/* ===========================================================================
   eterngit · structure.css
   Theme-AGNOSTIC structural layer. Sizes, spacing and layout live here;
   every color and font is a CSS variable supplied by a palette file
   (css/palettes/<theme>-<mode>.css). Page-body structure is identical across
   every theme & mode — only the variables (and the nav chrome) change.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--chrome-top, 0px) + 12px); }

body {
  margin: 0;
  font-family: var(--font-content);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  /* clear the fixed bottom status bar + the (vscode-only) left activity rail */
  padding-bottom: var(--statusbar-h, 0px);
  padding-left: var(--chrome-left, 0px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* themed thin scrollbars ---------------------------------------------------*/
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: padding-box; }

/* ===========================================================================
   LAYOUT
   =========================================================================== */
.forge { min-height: 100vh; }

/* single content column (most archetypes) */
.page { max-width: 940px; margin: 0 auto; padding: 30px 36px 64px; }

/* file-tree pages: left sidebar (the tree) + main content */
.layout-tree { display: grid; grid-template-columns: var(--tree-w, 278px) minmax(0, 1fr); align-items: start; }
.layout-tree > .page { margin: 0; max-width: none; min-width: 0; }
.layout-tree > .tree-panel {
  position: sticky; top: var(--chrome-top, 0px);
  align-self: start;
  max-height: calc(100vh - var(--chrome-top, 0px) - var(--statusbar-h, 0px));
  overflow: auto;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 14px 0 24px;
}

/* ===========================================================================
   NAV CHROME — container positioning (theme-agnostic).
   Look + internal layout live in css/nav/nav-<theme>.css; these rules only
   place the three shells. body padding (set above) clears the fixed bars.
   =========================================================================== */
.chrome { font-family: var(--font-ui); }
header.nav-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--chrome-bg); color: var(--chrome-fg);
  border-bottom: 1px solid var(--chrome-border);
}
aside.nav-rail {
  position: fixed; left: 0; top: 0; bottom: var(--statusbar-h, 0px);
  width: var(--chrome-left, 0px); z-index: 45;
  background: var(--chrome-bg); color: var(--chrome-fg);
  display: flex; flex-direction: column;
}
footer.nav-status {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--statusbar-h, 0px); z-index: 50;
  background: var(--statusbar-bg); color: var(--statusbar-fg);
  font-family: var(--font-ui); overflow: hidden;
}
header.nav-top a, footer.nav-status a, aside.nav-rail a { color: inherit; }

/* theme picker — shared control, recoloured by each nav file */
.picker { display: inline-flex; align-items: center; gap: 6px; }
.picker-ic { display: inline-flex; opacity: 0.7; }
.picker-theme, .picker-mode {
  font-family: var(--font-ui); font-size: 0.76rem; color: inherit; line-height: 1.4;
  background: transparent; border: 1px solid; border-color: color-mix(in srgb, currentColor 36%, transparent);
  border-radius: var(--radius); padding: 1px 6px; cursor: pointer;
}
.picker-mode { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; }
.picker-theme:hover, .picker-mode:hover { border-color: currentColor; }
.picker-theme option { color: var(--fg); background: var(--bg-elev); }

/* ===========================================================================
   PAGE HEADING + META
   =========================================================================== */
.page-head { margin: 0 0 22px; }
.page-title {
  margin: 0; font-family: var(--font-content); font-weight: 600;
  font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.page-title code, .page-title .mono { font-family: var(--font-mono); font-weight: 600; }
.page-subtitle { margin: 6px 0 0; color: var(--fg-muted); font-size: 0.95rem; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin: 10px 0 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--fg-muted);
}
.meta-item { display: inline-flex; align-items: center; gap: 5px; }
.meta-item:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--fg-faint); }
.meta-item a { color: var(--accent); }
.meta-item .hash { margin: 0; }

.section-label {
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.7rem; font-weight: 600; color: var(--fg-muted);
  margin: 30px 0 10px; display: flex; align-items: center; gap: 8px;
}
.section-label .count { color: var(--fg-faint); font-weight: 500; }
.section-label--tight { margin-top: 0; }

.rule { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

/* ===========================================================================
   LIST ARCHETYPE  (org / repo / release / proposal lists, branches)
   =========================================================================== */
.list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); }
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--bg-hover); }
.list-row__icon { flex: none; color: var(--fg-muted); display: inline-flex; }
.list-row__icon svg { width: 16px; height: 16px; display: block; }
.list-row__main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.list-row__name { font-weight: 600; color: var(--accent); font-size: 0.95rem; }
.list-row:hover .list-row__name { text-decoration: underline; }
.list-row__name.mono { font-family: var(--font-mono); font-weight: 600; }
.list-row__sub { margin-top: 2px; color: var(--fg-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; }
.list-row__sub .mono { font-family: var(--font-mono); }
.list-row__meta { flex: none; display: flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 0.8rem; font-family: var(--font-mono); }

/* links row: releases · proposals (repo home) */
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.linkrow a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); color: var(--fg); font-size: 0.86rem; font-family: var(--font-ui);
}
.linkrow a:hover { background: var(--bg-hover); border-color: var(--border-strong); text-decoration: none; }
.linkrow a svg { width: 15px; height: 15px; color: var(--fg-muted); }
.linkrow .count {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-muted);
  background: var(--bg-inset); padding: 1px 7px; border-radius: 999px;
}

/* ===========================================================================
   BADGES / CHIPS
   =========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  background: var(--bg-inset); color: var(--fg-muted);
}
.badge--latest { background: var(--badge-latest-bg); color: var(--badge-latest-fg); }
.badge--rc { background: var(--badge-rc-bg); color: var(--badge-rc-fg); }

.hash {
  font-family: var(--font-mono); font-size: 0.8em; font-weight: 600;
  background: var(--hash-bg); color: var(--hash-fg);
  padding: 1px 7px; border-radius: var(--radius); white-space: nowrap;
}
a.hash:hover { text-decoration: none; filter: brightness(1.12); }

.tag-chip {
  font-family: var(--font-mono); font-size: 0.8rem;
  background: var(--tag-bg); color: var(--tag-fg);
  padding: 1px 8px; border-radius: var(--radius); border: 1px solid var(--border);
}

/* ===========================================================================
   COMMIT LIST  (leave room to become an actual graph later)
   =========================================================================== */
.commits { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); }
.commit { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.commit:last-child { border-bottom: 0; }
.commit:hover { background: var(--bg-hover); }
.commit__rail { flex: none; display: flex; align-items: center; }
.commit__node { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg-elev); }
.commit__hash { flex: none; }
.commit__subject { flex: 1; min-width: 0; color: var(--fg); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit:hover .commit__subject { color: var(--accent); }
.commit__meta { flex: none; color: var(--fg-muted); font-size: 0.78rem; font-family: var(--font-mono); display: flex; gap: 12px; }
.commit__meta .who { color: var(--fg-muted); }

/* ===========================================================================
   FILE TREE
   =========================================================================== */
.tree { font-family: var(--font-mono); font-size: 0.82rem; }
.tree-section { padding: 0 8px; min-width: max-content; }   /* grow to the widest row so the sidebar can scroll it horizontally */
.tree-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 8px 3px calc(8px + var(--depth, 0) * 15px);
  border-radius: var(--radius); color: var(--tree-file); text-decoration: none;
  white-space: nowrap; line-height: 1.5;
}
.tree-row:hover { background: var(--bg-hover); text-decoration: none; }
.tree-row__icon { flex: none; display: inline-flex; opacity: 0.95; }
.tree-row__icon svg { width: 14px; height: 14px; display: block; }
.tree-row--folder { color: var(--tree-folder); font-weight: 500; }
.tree-row--folder .tree-row__icon { color: var(--tree-folder); }
.tree-row--file { color: var(--tree-file); }
.tree-row--file .tree-row__icon { color: var(--fg-muted); }
.tree-row--current { background: var(--tree-current-bg); color: var(--tree-current-fg); box-shadow: inset 2px 0 0 var(--accent); }
.tree-row--current .tree-row__icon { color: var(--tree-current-fg); }
.tree-row__name { flex: none; }   /* full name, no ellipsis — long/deep rows scroll horizontally */

/* ===========================================================================
   CODE PANEL  (file view) — plain text today; .tok-* are themed by --syn-*
   =========================================================================== */
.panel { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); }
.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; background: var(--bg-inset); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-muted);
}
.panel-head .name { color: var(--fg); font-weight: 600; }
.panel-head .spacer { flex: 1; }
.panel-head .pill { color: var(--fg-muted); }

.code { overflow-x: auto; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; background: var(--code-bg); color: var(--code-fg); }
.code-line { display: flex; }
.code-line--current { background: var(--code-current-line); }
.code-ln {
  flex: none; width: 52px; text-align: right; padding: 0 14px 0 0; user-select: none;
  color: var(--code-gutter-fg); background: var(--code-gutter-bg);
  position: sticky; left: 0; border-right: 1px solid var(--border);
}
.code-src { flex: 1; white-space: pre; padding: 0 16px; min-width: 0; }

/* syntax token colors — same highlighter, recoloured per theme */
.tok-keyword     { color: var(--syn-keyword); }
.tok-string      { color: var(--syn-string); }
.tok-comment     { color: var(--syn-comment); font-style: italic; }
.tok-number      { color: var(--syn-number); }
.tok-function    { color: var(--syn-function); }
.tok-type        { color: var(--syn-type); }
.tok-variable    { color: var(--syn-variable); }
.tok-operator    { color: var(--syn-operator); }
.tok-punctuation { color: var(--syn-punctuation); }
.tok-property    { color: var(--syn-property); }
.tok-constant    { color: var(--syn-constant); }
.tok-tag         { color: var(--syn-tag); }
.tok-attr        { color: var(--syn-attr); }
.tok-builtin     { color: var(--syn-builtin); }
.tok-regexp      { color: var(--syn-regexp); }

/* ===========================================================================
   UNIFIED DIFF
   =========================================================================== */
.diff { overflow-x: auto; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.diff-line { display: grid; grid-template-columns: 44px 44px 20px minmax(0, 1fr); align-items: baseline; }
.diff-ln { text-align: right; padding: 0 8px; user-select: none; color: var(--code-gutter-fg); font-size: 0.72rem; }
.diff-sign { text-align: center; user-select: none; color: var(--fg-faint); }
.diff-src { white-space: pre; padding: 0 14px 0 4px; min-width: 0; color: var(--code-fg); }

.diff-line--ctx .diff-src { color: var(--fg-muted); }
.diff-line--add { background: var(--diff-add-bg); box-shadow: inset 2px 0 0 var(--diff-add-marker); }
.diff-line--add .diff-ln { background: var(--diff-add-gutter); color: var(--diff-add-marker); }
.diff-line--add .diff-sign { color: var(--diff-add-marker); }
.diff-line--add .diff-src { color: var(--diff-add-text); }
.diff-line--del { background: var(--diff-del-bg); box-shadow: inset 2px 0 0 var(--diff-del-marker); }
.diff-line--del .diff-ln { background: var(--diff-del-gutter); color: var(--diff-del-marker); }
.diff-line--del .diff-sign { color: var(--diff-del-marker); }
.diff-line--del .diff-src { color: var(--diff-del-text); }
.diff-line--hunk { grid-template-columns: 1fr; background: var(--diff-hunk-bg); }
.diff-line--hunk .diff-src { color: var(--diff-hunk-fg); padding: 2px 14px; font-size: 0.76rem; }
.diff-file-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--bg-inset); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg);
}
.diff-file-head .stat-add { color: var(--diff-add-marker); }
.diff-file-head .stat-del { color: var(--diff-del-marker); }

/* ===========================================================================
   DOWNLOAD ROWS  (source tarball, artifacts)  filename + sha256
   =========================================================================== */
.downloads { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); }
.dl-row { padding: 11px 16px; border-bottom: 1px solid var(--border); }
.dl-row:last-child { border-bottom: 0; }
.dl-top { display: flex; align-items: center; gap: 12px; }
.dl-top .ic { color: var(--fg-muted); flex: none; display: inline-flex; }
.dl-top .ic svg { width: 16px; height: 16px; display: block; }
.dl-name { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: var(--accent); }
.dl-size { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-muted); }
.dl-sha { margin-top: 5px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--fg-faint); word-break: break-all; padding-left: 28px; }
.dl-sha b { color: var(--fg-muted); font-weight: 600; }

/* ===========================================================================
   FACTS  (key/value)
   =========================================================================== */
.facts { margin: 14px 0 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts > div { display: flex; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { flex: none; width: 130px; margin: 0; font-family: var(--font-ui); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.84rem; color: var(--fg); }

/* ===========================================================================
   MARKDOWN  (rendered README / release notes)
   =========================================================================== */
.md { color: var(--fg); }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--font-content); font-weight: 600; line-height: 1.25; color: var(--fg); margin: 1.6em 0 0.6em; }
.md h1 { font-size: 1.55rem; letter-spacing: -0.01em; }
.md h2 { font-size: 1.25rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.md h3 { font-size: 1.05rem; }
.md h4 { font-size: 0.92rem; color: var(--fg-muted); }
.md p { margin: 0.7em 0; }
.md a { color: var(--accent); }
.md ul, .md ol { margin: 0.7em 0; padding-left: 1.5em; }
.md li { margin: 0.25em 0; }
.md li::marker { color: var(--fg-faint); }
.md code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-inset); color: var(--fg); padding: 0.12em 0.4em; border-radius: 4px; }
.md pre { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; overflow-x: auto; margin: 0.9em 0; }
.md pre code { background: none; padding: 0; font-size: inherit; color: var(--code-fg); }
.md blockquote { margin: 0.9em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--border-strong); color: var(--fg-muted); }
.md table { border-collapse: collapse; margin: 1em 0; font-size: 0.88rem; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
.md th { background: var(--bg-inset); font-weight: 600; }
.md tr:nth-child(2n) td { background: var(--bg-elev); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }
.md img { max-width: 100%; }
.md kbd { font-family: var(--font-mono); font-size: 0.8em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--bg-inset); }

/* ===========================================================================
   RESPONSIVE  (desktop primary; this keeps it usable narrow)
   =========================================================================== */
@media (max-width: 760px) {
  body { padding-left: 0; }
  .page { padding: 20px 18px 56px; }
  .layout-tree { grid-template-columns: 1fr; }
  .layout-tree > .tree-panel {
    position: static; max-height: 230px; border-right: 0; border-bottom: 1px solid var(--border);
  }
  .commit__meta, .list-row__sub { display: none; }
  .page-title { font-size: 1.4rem; }
}

/* ===========================================================================
   VIEW PRIMITIVES (shared) — consumed by view.js, skinned by css/views/*.
   Workbench (sidebar+main), side-by-side diff, raw diff line, changed files.
   =========================================================================== */
/* IDE + terminal views are pinned to the viewport; their panes scroll inside,
   so the page never grows — a tall file tree scrolls within the sidebar, the
   editor within itself, and the status bar stays put. */
.forge.view-terminal, .forge.view-vscode, .forge.view-jetbrains, .forge.view-neovim {
  height: calc(100vh - var(--chrome-top, 0px) - var(--statusbar-h, 0px)); min-height: 0; overflow: hidden;
}
.forge.view-vscode, .forge.view-jetbrains, .forge.view-neovim { display: flex; align-items: stretch; }
.wb { display: flex; width: 100%; height: 100%; overflow: hidden; }
.wb--nolist { display: block; height: 100%; overflow-y: auto; }

.v-sectiontitle { font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; padding: 10px 14px 8px; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; }
.v-count { color: var(--fg-faint); font-weight: 500; }

/* changed-files list (SCM / lazygit / jetbrains Changes) */
.cf { font-family: var(--font-mono); font-size: 0.8rem; }
.cf-row { display: flex; align-items: center; gap: 8px; padding: 3px 12px; }
.cf-row:hover { background: var(--bg-hover); }
.cf-row.is-active { background: var(--accent-soft); }
.cf-stat { width: 13px; text-align: center; font-weight: 700; font-size: 0.74rem; flex: none; }
.cf-stat--A { color: var(--diff-add-marker); } .cf-stat--D { color: var(--diff-del-marker); } .cf-stat--M { color: var(--blue); }
.cf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-num { display: flex; gap: 6px; font-size: 0.72rem; flex: none; }
.cf-num .stat-add { color: var(--diff-add-marker); } .cf-num .stat-del { color: var(--diff-del-marker); }

/* side-by-side diff */
/* side-by-side diff: two independent panes (left = old, right = new), each 50%
   and horizontally scrollable on its own. The one .split scrolls vertically, so
   the two sides stay row-aligned; long lines scroll per side, never truncated. */
.split { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; }
.split-filehead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg-inset); border-bottom: 1px solid var(--border); color: var(--fg); font-size: 0.8rem; }
.split-stat { margin-left: 8px; display: flex; gap: 8px; } .split-stat .stat-add { color: var(--diff-add-marker); } .split-stat .stat-del { color: var(--diff-del-marker); }
.split-body { display: flex; align-items: stretch; }
.split-pane { flex: 1; min-width: 0; overflow-x: auto; }
.split-pane:first-child { border-right: 1px solid var(--border); }
.split-hunk { position: sticky; left: 0; background: var(--diff-hunk-bg); color: var(--diff-hunk-fg); padding: 2px 12px; font-size: 0.74rem; white-space: nowrap; }
.split-line { display: flex; width: max-content; min-width: 100%; min-height: 1.55em; }
.split-ln { width: 42px; flex: none; text-align: right; padding: 0 6px; color: var(--code-gutter-fg); user-select: none; font-size: 0.72rem; }
.split-src { flex: 1; white-space: pre; padding: 0 8px; }
.split-src--del, .split-ln--del { background: var(--diff-del-bg); } .split-src--del { color: var(--diff-del-text); }
.split-src--add, .split-ln--add { background: var(--diff-add-bg); } .split-src--add { color: var(--diff-add-text); }
.split-src--empty, .split-ln--empty { background: var(--bg-inset); opacity: 0.45; }
.split-src--ctx { color: var(--fg-muted); }
.split-mid { width: 0; }

/* raw diff line (terminal) */
.diff--raw { border: 0 !important; background: none !important; border-radius: 0; }
.raw-line { display: flex; }
.raw-src { white-space: pre; padding: 0 2px; }
.raw-line--add .raw-src { color: var(--diff-add-marker); }
.raw-line--del .raw-src { color: var(--diff-del-marker); }
.raw-line--hunk .raw-src { color: var(--diff-hunk-fg); }
.raw-line--meta .raw-src { color: var(--fg-muted); font-weight: 600; }
.raw-line--ctx .raw-src { color: var(--fg-muted); }

.rel { padding: 22px 30px; max-width: 900px; }