/* The workbench stylesheet -- the git-ents "Design Component" handoff
 * (design_handoff_git_ents_workbench) recreated as one hand-rolled sheet,
 * keyed to the class taxonomy `crate::pages::layout*` and `crate::render`
 * already emit (`.wb`/`.rail`/`.wb-bar`/`.split`/`.tree`/`.card`/`.scope`/
 * `.status`/`.editor-open`/`.blob`/`.comment-meta` ...). The design's exact
 * tokens (color, geometry, type) live in `:root` below; a page changes its
 * markup only where a component needs structure the shared classes here
 * cannot express (an avatar, a state pill's dot, a two-line sidebar row) --
 * those additive classes are defined here too, so every page draws from one
 * vocabulary. Type is self-hosted IBM Plex (see the `@font-face` block and
 * `crate::assets::FONTS`); no rule here depends on a network fetch.
 *
 * The `--s-*` syntax-token variables feed `.code .keyword`-family consumers
 * (`crate::pages::files`'s `arborium` highlighter); the `--diff-*` and
 * `--status-*` variables feed `.diff` and `.status`
 * (`crate::pages::commits`). */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-mono-600.woff2") format("woff2"); }

/* The handoff's light scheme -- its exact token values. */
:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --raised: #fbfaf7;
  --ink: #1b1c21;
  --ink-2: #54555d;
  --ink-3: #8b8c94;
  --ink-4: #b6b6bd;
  --line: #e6e3dd;
  --line-2: #efece7;
  --accent: #4a3fc4;
  --accent-2: #6a5fe0;
  --accent-soft: #ecebfb;
  --accent-line: #d8d5f6;
  --editor: #0d8f9c;
  --editor-soft: #dff3f3;
  --editor-line: #b9e3e2;
  --green: #1c7a49;
  --green-soft: #e3f2e8;
  --red: #c23b34;
  --red-soft: #fae9e7;
  --amber: #a9791d;
  --amber-soft: #f6efdd;
  --violet: #7a3fb0;
  --violet-soft: #f1e8f8;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-card: 12px;
  --radius-inner: 8px;
  --radius-chip: 6px;
  --radius-pill: 20px;

  --shadow-pop: 0 24px 60px rgba(20, 20, 30, .28);
  --shadow-toast: 0 12px 30px rgba(20, 20, 30, .32);

  /* Deterministic entity/scope chip palette (README: 6 colors, hashed by
   * name), consumed by `.scope-c0`..`.scope-c5`. */
  --c0-fg: #4a3fc4; --c0-bg: #ecebfb;
  --c1-fg: #0d8f9c; --c1-bg: #dff3f3;
  --c2-fg: #1c7a49; --c2-bg: #e3f2e8;
  --c3-fg: #a9791d; --c3-bg: #f6efdd;
  --c4-fg: #b23c8c; --c4-bg: #f8e8f3;
  --c5-fg: #c23b34; --c5-bg: #fae9e7;

  /* Syntax tokens, tuned to the paper palette. */
  --s-comment: #8b8c94;
  --s-keyword: #a3324f;
  --s-func: #0d8f9c;
  --s-type: #a9791d;
  --s-string: #1c7a49;
  --s-const: #7a3fb0;
  --s-op: #54555d;
  --s-prop: #4a3fc4;
  --diff-add: rgba(28, 122, 73, .10);
  --diff-del: rgba(194, 59, 52, .09);
  --status-pass: #1c7a49;
  --status-fail: #c23b34;
  --status-error: #a9791d;
}

/* Dark scheme (README: "dark is a roadmap item -- design both"), derived
 * from the light palette: the same hues over an ink ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --surface: #1d1e23;
    --surface-2: #232429;
    --raised: #26272d;
    --ink: #ecedf2;
    --ink-2: #b7b8c0;
    --ink-3: #85868f;
    --ink-4: #5b5c65;
    --line: #303138;
    --line-2: #292a30;
    --accent: #9d95f5;
    --accent-2: #b3abff;
    --accent-soft: #262353;
    --accent-line: #3a3672;
    --editor: #3fc6d2;
    --editor-soft: #16333650;
    --editor-line: #2c5a5e;
    --green: #5cc98b;
    --green-soft: #143a2650;
    --red: #f0796f;
    --red-soft: #3a1e1c50;
    --amber: #d9a94a;
    --amber-soft: #37301c50;
    --violet: #c79be6;
    --violet-soft: #2c1f3a50;
    --c0-fg: #9d95f5; --c0-bg: #262353;
    --c1-fg: #3fc6d2; --c1-bg: #16333650;
    --c2-fg: #5cc98b; --c2-bg: #143a2650;
    --c3-fg: #d9a94a; --c3-bg: #37301c50;
    --c4-fg: #e58fc4; --c4-bg: #3a1f3350;
    --c5-fg: #f0796f; --c5-bg: #3a1e1c50;
    --s-comment: #85868f;
    --s-keyword: #f0796f;
    --s-func: #3fc6d2;
    --s-type: #d9a94a;
    --s-string: #5cc98b;
    --s-const: #c79be6;
    --s-op: #b7b8c0;
    --s-prop: #9d95f5;
    --diff-add: rgba(92, 201, 139, .13);
    --diff-del: rgba(240, 121, 111, .13);
    --status-pass: #5cc98b;
    --status-fail: #f0796f;
    --status-error: #d9a94a;
    --shadow-pop: 0 24px 60px rgba(0, 0, 0, .55);
    --shadow-toast: 0 12px 30px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
/* Every bare `<code>` (a short oid, a CLI command name, ...) reads as a
 * small code chip by default; contexts that already carry their own
 * monospace flow (`.blob-code`, `.doc-body`) reset it back below. */
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
::selection { background: var(--accent-soft); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}
.icon { flex-shrink: 0; fill: none; stroke: currentColor; vertical-align: -0.125em; }
.muted { color: var(--ink-3); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid var(--bg); }

/* ============================ SHELL ============================ *
 * `crate::pages::layout_shell`: a `.wb` row of the fixed 60px icon
 * `.rail` and a `.wb-main` column whose sticky 56px `.wb-bar` carries the
 * repo name + branch pill, the `.palette` search, and the `.id-chip`. */
.wb { display: flex; min-height: 100vh; width: 100%; }
.rail {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 60px; flex: none;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; z-index: 40;
}
.rail .nav-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: -1px; margin-bottom: 10px;
}
.rail a {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 11px; color: var(--ink-3);
}
.rail a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.rail a.active { background: var(--accent-soft); color: var(--accent); }
.rail a .icon { width: 19px; height: 19px; stroke-width: 1.7; }
.rail .spacer { flex: 1; }

.wb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wb-bar {
  position: sticky; top: 0; z-index: 30; height: 56px; flex: none;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
}
.repo-path { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; }
.repo-path .here { font-weight: 600; font-size: 14px; color: var(--ink); }
.branch {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
}
.branch .icon { width: 12px; height: 12px; stroke-width: 2; }
/* `.palette` is a form: undo the stacked-field form rules (column, gap,
 * bottom margin). Styled as the design's centered palette trigger. */
.palette {
  flex: 1; max-width: 520px; margin: 0 auto; height: 34px;
  display: flex; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 0;
  padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; position: relative;
}
.palette:focus-within { border-color: var(--accent); }
.palette .icon { width: 15px; height: 15px; stroke-width: 1.8; color: var(--ink-3); flex: none; }
.palette input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
}
.palette input::placeholder { color: var(--ink-3); }
.palette kbd {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 6px; flex: none;
}
.id-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink); font-size: 12.5px; font-weight: 500;
}
.id-chip:hover { border-color: var(--accent-line); color: var(--ink); text-decoration: none; }
.id-chip .avatar { width: 24px; height: 24px; font-size: 11px; }

/* Initials avatar on the indigo->teal gradient (README: no image assets). */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--editor));
  color: #fff; font-size: 9px; font-weight: 600; text-transform: lowercase; letter-spacing: -.02em;
}

/* ========================= META RAIL ========================= *
 * `crate::pages::layout_meta` -- the governance sub-rail beside every
 * meta-namespace page (`crate::pages::META_SECTIONS`). */
.meta-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.meta-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 78px; }
.meta-rail a { font-size: 13px; color: var(--ink-2); padding: 7px 11px; border-radius: var(--radius-inner); }
.meta-rail a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.meta-rail a.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
@media (max-width: 900px) {
  .meta-layout { grid-template-columns: minmax(0, 1fr); }
  .meta-rail { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ===================== CONTENT / SPLIT ===================== */
.content { max-width: 1120px; width: 100%; margin: 0 auto; padding: 30px 34px 60px; flex: 1; }
.readable { max-width: 760px; margin-inline: auto; }
/* Master-detail (`crate::pages::layout_split`): a sticky scrollable
 * sidebar beside a `min-height:0` detail pane. */
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 56px); }
.tree {
  border-right: 1px solid var(--line); background: var(--surface);
  overflow: auto; position: sticky; top: 0; height: 100%; padding: 10px 8px;
  font-family: var(--mono); font-size: 12px;
}
.tree a {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  border-radius: 7px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree a:hover { background: var(--surface-2); text-decoration: none; }
.tree a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tree a span { display: block; overflow: hidden; text-overflow: ellipsis; }
.tree a .icon { width: 13px; height: 13px; stroke-width: 1.7; color: var(--ink-3); }
.tree .dir { color: var(--ink-2); }
.tree .i1 { padding-left: 24px; }
.tree .i2 { padding-left: 38px; }
.tree .i3 { padding-left: 52px; }
.tree-note { display: block; padding: 4px 10px; color: var(--ink-3); }
.tree .where { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.pane { padding: 20px 28px 70px; min-width: 0; overflow: auto; }
.pane .readable, .pane > div { max-width: 820px; margin: 0 auto; }

/* A generic two-line master-detail sidebar row (issues, reviews, commit
 * lane): a title line and a mono `.side-meta` locator, its active state the
 * design's accent-soft fill + inset 3px bar. Sits inside `nav.tree`, so it
 * opts out of the tree's own flex-row link layout. */
.tree a.side-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: auto;
  padding: 11px 15px; border-radius: 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--sans); white-space: normal;
}
.tree a.side-row.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); color: inherit; }
.side-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35; text-wrap: pretty; }
.side-row.active .side-title { font-weight: 600; }
.side-meta { display: flex; align-items: center; gap: 6px; }
.side-meta .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-4); }
.side-meta .locator { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tree { position: static; height: auto; max-height: 16rem; border-right: none; border-bottom: 1px solid var(--line); }
  .pane { height: auto; }
}

/* ===================== PAGE HEADER ===================== */
/* Bare `h2` and `p.muted` in page flow are the section-heading and
 * lead-in idiom (mock: 14px/600 with 26px above; muted lead-ins breathe
 * instead of sitting flush on the card below). */
.content h2, .pane h2 { margin: 26px 0 12px; font-size: 14px; font-weight: 600; }
.content h2:first-child, .pane h2:first-child { margin-top: 0; }
p.muted { margin-bottom: 16px; font-size: 13px; text-wrap: pretty; }
.page-header {
  margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; }
/* A page-title that is itself a repository path (a tree/blob view -- the
 * `.crumbs` trail right under it names the exact same path) -- monospace so
 * it reads as the path it is, not prose competing with the crumb trail for
 * the same information. */
.page-title.path { font-family: var(--mono); font-size: 18px; word-break: break-all; }
.page-sub { margin-top: 5px; color: var(--ink-3); font-size: 13px; }
.page-header .mono { font-family: var(--mono); color: var(--ink-2); }
/* A `.crumbs` trail directly under a `.page-header` reads as its subtitle --
 * hug it to the title instead of the header's own bottom border/margin, and
 * move that border/gap to below the crumbs, in front of the page's content,
 * so the title and its path trail read as one grouped header. */
.page-header:has(+ .crumbs) { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; }
.page-header + .crumbs { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* ========================= CARDS ========================= */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: 18px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.card-header .btn-ghost { margin-left: auto; }
/* A form as a card's body gets the mock composer's inner padding, its
 * action row right-aligned as the mock's composer footer. */
.card > form { padding: 18px 20px; margin-bottom: 0; }
.card > form .composer-buttons { justify-content: flex-end; }
.tree-head .btn { height: 24px; }
/* Stacked card rows (meta index): name over blurb, sans, left-aligned. */
.card-row.stack { flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 16px; font-family: var(--sans); }
.card-row.stack a { flex: none; font-size: 13.5px; font-weight: 600; color: var(--accent); text-transform: capitalize; }
.card-row.stack span { font-size: 12.5px; color: var(--ink-3); }
.card-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  font-family: var(--mono); font-size: 12.5px;
}
.card-row + .card-row { border-top: 1px solid var(--line-2); }
.card-row .icon { color: var(--ink-3); stroke-width: 1.7; }
.card-row.is-dir .icon { color: var(--accent); }
.card-row a { color: var(--ink); flex: 1; min-width: 0; word-break: break-all; }
.card-row a:hover { color: var(--accent); }
.card-row a.row-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.card-row:has(.row-link):hover { background: var(--surface-2); }
.entry-size { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* ========================= DASHBOARD ========================= *
 * `crate::pages::dashboard`: three cards on a `.desk` grid, then a
 * full-width `.desk-wide` history card. */
.desk { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.desk .card, .desk-wide .card { margin-bottom: 0; }
.desk-wide { grid-column: 1 / -1; }
.attention-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; color: inherit; }
.attention-row:hover { background: var(--surface-2); text-decoration: none; }
.attention-row + .attention-row { border-top: 1px solid var(--line-2); }
.attention-row .what { font-size: 12.5px; color: var(--ink); text-wrap: pretty; }
.attention-row .what .lead { color: var(--amber); font-weight: 500; }
.attention-row .where { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.history .card-row { flex-wrap: nowrap; gap: 12px; }
.history .card-row a { flex: none; color: var(--accent); text-decoration: none; }
.history .card-row a:hover { text-decoration: underline; }
.desk-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.desk-when { flex: none; font-size: 12px; color: var(--ink-3); }
/* Commit-row trailing author/when: sans, quiet, never wrapping (mock). */
.row-author { flex: none; font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.row-when { flex: none; font-family: var(--sans); font-size: 12px; color: var(--ink-4); white-space: nowrap; }
@media (max-width: 1100px) { .desk { grid-template-columns: minmax(0, 1fr); } }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px;
  font-size: 13px; font-weight: 500; color: #fff; background: var(--accent);
  border: none; border-radius: var(--radius-inner); cursor: pointer;
  white-space: nowrap; flex: none;
}
.btn:hover { background: var(--accent-2); text-decoration: none; color: #fff; }
.btn-sm { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: var(--radius-chip); }
.btn-ghost {
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface); }

/* ===================== CHIPS & BADGES ===================== *
 * One `.chip` base; state/verdict/check/scope variants layer color and, for
 * state/verdict, a leading dot via `.chip .dot`. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 8px;
  border-radius: 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--ink-2); background: var(--surface-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Pill-shaped status chips carry more presence (issue/review state). */
.chip-pill { height: 22px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 11.5px; gap: 5px; }

.badge { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 8px; }

/* Issue state (`crate::pages::issues`). */
.state-open, .comment-state-open { color: var(--green); background: var(--green-soft); }
.state-closed, .comment-state-resolved { color: var(--ink-2); background: var(--line-2); }
.state-in-progress { color: var(--amber); background: var(--amber-soft); }
/* Review state (`crate::pages::commits`/reviews). */
.review-draft { color: var(--violet); background: var(--violet-soft); }
.review-in-review { color: var(--amber); background: var(--amber-soft); }
.review-approved { color: var(--green); background: var(--green-soft); }
.review-changes-requested { color: var(--red); background: var(--red-soft); }
.review-closed { color: var(--ink-2); background: var(--line-2); }
/* Review verdict badge. */
.verdict { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; }
.verdict-approve { color: var(--green); background: var(--green-soft); }
.verdict-request-changes { color: var(--red); background: var(--red-soft); }
.verdict-comment { color: var(--ink-2); background: var(--line-2); }

/* Check-status chips (`crate::pages::commits::checks_section`): a glyph
 * plus the value, one color per pass/fail/error. */
.status { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 2px 8px; }
.status::before { font-weight: 700; }
.status-pass { color: var(--status-pass); background: var(--green-soft); }
.status-pass::before { content: "\2713"; }
.status-fail { color: var(--status-fail); background: var(--red-soft); }
.status-fail::before { content: "\2715"; }
.status-error { color: var(--status-error); background: var(--amber-soft); }
.status-error::before { content: "!"; }

/* Scope chips (`crate::pages::dashboard::scope_class`): deterministic
 * color, fixed 52px width so commit subjects align (README). */
.scope {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 19px; border-radius: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.scope-c0 { color: var(--c0-fg); background: var(--c0-bg); }
.scope-c1 { color: var(--c1-fg); background: var(--c1-bg); }
.scope-c2 { color: var(--c2-fg); background: var(--c2-bg); }
.scope-c3 { color: var(--c3-fg); background: var(--c3-bg); }
.scope-c4 { color: var(--c4-fg); background: var(--c4-bg); }
.scope-c5 { color: var(--c5-fg); background: var(--c5-bg); }

/* ===================== EDITOR PILL ===================== *
 * `crate::pages::editor_open` -- the signature web<->editor motif: a small
 * teal pill deep-linking `file:line` into the serving user's editor.
 * Rendered nothing at all when no editor is configured. */
.editor-open {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px;
  background: var(--editor-soft); border: 1px solid var(--editor-line); border-radius: var(--radius-chip);
  color: var(--editor); font-family: var(--mono); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.editor-open:hover { color: var(--editor); text-decoration: none; filter: brightness(.96); }
.editor-open .icon { width: 11px; height: 11px; stroke-width: 2.4; }

/* ===================== ENTITY VIEWS ===================== *
 * The reflection-driven views (`crate::render`): a definition list for one
 * entity, a table for a list, a plain list for bare name lists. */
.entity-view { font-family: var(--mono); font-size: 12.5px; }
.entity-view dt { padding: 12px 16px 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.entity-view dd { padding: 0 16px 12px; word-break: break-all; color: var(--ink); }
.entity-view dt + dt { padding-top: 2px; }

.entity-list { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.entity-list th, .entity-list td { padding: 10px 16px; text-align: left; }
.entity-list th { white-space: nowrap; }
.entity-list td.long-token { word-break: break-all; }
.entity-list thead { background: var(--surface-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.entity-list tbody tr + tr { border-top: 1px solid var(--line-2); }
.entity-list td a { color: var(--accent); }
.commits-table th:nth-child(1), .commits-table td:nth-child(1),
.commits-table th:nth-child(3), .commits-table td:nth-child(3),
.commits-table th:nth-child(4), .commits-table td:nth-child(4) { white-space: nowrap; }

.string-list { list-style: none; font-family: var(--mono); font-size: 12.5px; }
.string-list li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.string-list li + li { border-top: 1px solid var(--line-2); }
.string-list a { color: var(--ink); }
.string-list a:hover { color: var(--accent); }

/* Per-entity read failure (`crate::render::unreadable`). */
.card-row.unreadable span { color: var(--ink-3); font-style: italic; }
.unreadable-detail { display: block; margin-top: 2px; color: var(--ink-3); font-style: normal; font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.unreadable-note { margin-bottom: 18px; }
.unreadable-note summary {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--amber); background: var(--amber-soft); border: 1px solid var(--editor-line); border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--radius-pill); padding: 2px 10px; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
}
.unreadable-note summary::-webkit-details-marker { display: none; }
.unreadable-note[open] summary { margin-bottom: 10px; }
.unreadable-note .card { margin-bottom: 0; }
.unreadable-note dd { color: var(--ink-3); font-size: 11.5px; }

/* Bare dl/ul markup a custom page emits directly. */
dl { font-family: var(--mono); font-size: 12.5px; margin-bottom: 18px; }
dl dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-top: 10px; }
dl dd { word-break: break-all; }
ul:not(.string-list):not(.doc-body ul) { list-style: none; font-family: var(--mono); font-size: 12.5px; margin-bottom: 18px; }
ul:not(.string-list):not(.doc-body ul) li { padding: 5px 0; }

/* ===================== BLANKSLATE ===================== */
.blankslate {
  text-align: center; padding: 40px 24px; border: 1px dashed var(--line);
  border-radius: var(--radius-card); background: var(--surface);
}
.blankslate h2 { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; }
.blankslate p { color: var(--ink-3); font-size: 12.5px; }
.blankslate code { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.card .blankslate { border: none; }

/* ===================== MEMBER CARDS ===================== *
 * `crate::pages::members::member_card`: avatar + username + key-type/state/
 * provenance badges, key material truncated with a full-key disclosure. */
.member-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.member-name { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink); }
a.member-name:hover { color: var(--accent); }
.key-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--editor); background: var(--editor-soft); border: 1px solid var(--editor-line); border-radius: 5px; padding: 1px 8px; white-space: nowrap; }
.member-key { padding: 0 16px 14px; font-family: var(--mono); font-size: 12px; }
.member-key code { color: var(--ink-3); background: var(--surface-2); border-radius: 5px; padding: 2px 6px; }
.member-key details { margin-top: 6px; }
.member-key summary { font-size: 11px; color: var(--ink-3); cursor: pointer; user-select: none; -webkit-user-select: none; }
.member-key pre { margin-top: 5px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-inner); white-space: pre-wrap; word-break: break-all; font-size: 11px; }

/* ===================== FORMS ===================== *
 * A labeled field is a stacked label + control. Short token fields (`rev`,
 * `lines`, `state`, `verdict`) stop short instead of stretching. */
form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 18px; }
form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
form input, form textarea, form select {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-inner);
  padding: 9px 12px; width: 100%;
}
form input { height: 34px; }
form input:focus, form textarea:focus, form select:focus { border-color: var(--accent); outline: none; }
form input[name="rev"], form input[name="lines"], form input[name="state"], form input[name="verdict"] { max-width: 12rem; }
form textarea { resize: vertical; min-height: 120px; line-height: 1.55; font-family: var(--sans); }
form button {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px;
  font-size: 13px; font-weight: 500; color: #fff; background: var(--accent);
  border: none; border-radius: var(--radius-inner); cursor: pointer;
}
form button:hover { background: var(--accent-2); }

/* Segmented closed-enum picker (state/verdict/review-state): a row of
 * buttons where the current option fills with its own chip color. */
.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.picker button, .picker .opt {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border-radius: var(--radius-inner); cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
}
.picker .opt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.picker .opt.active { font-weight: 600; }

/* Label picker chips (`labelPicker`): pick existing or type-and-create. */
.label-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-chip); cursor: pointer; font-family: var(--mono); font-size: 11px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
}
.label-chip.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); font-weight: 600; }

/* ===================== DISCLOSURES ===================== *
 * An edit affordance folded shut (issue edit, login-mapping edit): a
 * bordered card-let whose summary is the whole closed state. */
.disclosure {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-bottom: 12px;
}
.disclosure > summary {
  padding: 11px 16px; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--accent); }
.disclosure form { padding: 4px 16px 16px; margin-bottom: 0; }

/* ===================== CRUMBS ===================== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); word-break: break-all; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--ink-4); opacity: .8; display: inline-flex; }
.crumbs .sep .icon { width: 12px; height: 12px; }
.crumbs .here { color: var(--ink); }

/* ===================== BLOB VIEW ===================== *
 * `crate::pages::files`: a blob header bar over the line-per-row source
 * table. */
.blob-header {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-inner) var(--radius-inner) 0 0;
}
.blob-header .icon { width: 15px; height: 15px; stroke-width: 1.7; color: var(--ink-3); }
.blob-title { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.blob-meta { font-size: 12px; color: var(--ink-3); }
.blob-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.blob-actions a { color: var(--ink-2); }
.blob-actions a:hover { color: var(--accent); }
/* A "comment on this file/commit" trigger's popup (`assets/ents.js`):
 * floats below its trigger's own header row instead of pushing the
 * header/content box's own seamless border pairing apart. */
.standalone-composer { position: absolute; top: calc(100% + 8px); right: 14px; z-index: 20; width: min(480px, calc(100vw - 60px)); }
.standalone-composer .composer-form { margin: 0; max-width: none; }
.blob {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-inner) var(--radius-inner); margin-bottom: 18px; padding: 8px 0 10px;
}
/* A blob rendered without a header bar keeps all four corners rounded. */
.blob:first-child { border-radius: var(--radius-inner); }
.blob table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 21px; }
.blob td.blob-nums {
  position: sticky; left: 0; width: 52px; text-align: right; padding: 0 12px 0 0; vertical-align: top;
  color: var(--ink-4); background: var(--surface); user-select: none; -webkit-user-select: none; white-space: nowrap;
}
.blob-nums a { display: block; color: inherit; padding: 0 .4ch; border-radius: 4px; cursor: pointer; }
.blob-nums a:hover { color: var(--accent); }
.blob-nums a:target { color: var(--accent); font-weight: 600; }
.blob td.blob-code { padding: 0 16px 0 4px; white-space: pre; color: var(--ink); vertical-align: top; }
.blob-code code { font-family: inherit; font-size: inherit; background: none; border: none; padding: 0; border-radius: 0; }
.blob tr.blob-comment-row td { padding: 0; background: var(--surface); }
.blob tr.blob-comment-row .card { margin: 5px 26px 7px 52px; }
.binary { padding: 40px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

/* Client-side line selection (`assets/ents.js`): `tr.sel` spans a
 * clicked/shift-clicked range with the design's accent-soft + inset bar. */
.blob tr.sel td { background: var(--accent-soft); }
.blob tr.sel td.blob-nums { color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.blob-add {
  position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  width: 17px; height: 17px; line-height: 16px; padding: 0; text-align: center;
  font-size: 13px; font-weight: 600; color: #fff; background: var(--accent);
  border: none; border-radius: 5px; opacity: 0; cursor: pointer; transition: opacity .1s;
}
.blob td.blob-nums { position: sticky; } /* keep the affordance's containing block */
.blob tr:hover .blob-add, .blob-add:focus-visible { opacity: 1; }

/* Inline comment composer (`assets/ents.js` clones `composer-template`). */
.blob tr.blob-composer td { padding: 0; background: var(--surface); }
.composer-form {
  margin: 5px 26px 8px 52px; max-width: 640px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 9px; padding: 12px 13px; box-shadow: 0 4px 14px rgba(74, 63, 196, .1);
}
.composer-form textarea { min-height: 74px; }
.composer-buttons { display: flex; flex-direction: row; gap: 8px; }
.composer-buttons button { margin: 0; height: 28px; padding: 0 14px; }
.composer-cancel {
  align-self: flex-start; height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer;
}
.composer-cancel:hover { color: var(--accent); border-color: var(--accent-line); }

/* ===================== COMMITS ===================== */
.commit { padding: 16px 18px 18px; }
.commit-subject { font-size: 19px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 8px; }
/* The commit message body renders through `crate::asciidoc::to_html`, the
 * same pipeline an issue body or a `.adoc` blob does -- `.doc-body`'s own
 * element rules (headings, lists, code spans) apply, scaled down to this
 * compact metadata context instead of a full document card's. */
.commit-msg.doc-body { padding: 0; max-width: none; font-size: 13px; margin-bottom: 8px; }
.commit-meta { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; font-family: var(--mono); margin-top: 6px; }
.commit-meta a { color: var(--ink-3); }
.commit-meta a:hover { color: var(--accent); }

/* ===================== COMMENT CARDS ===================== *
 * `crate::pages::comments::comment_card` -- the universal conversational
 * primitive: avatar + author + relative time + optional reply/state, an
 * AsciiDoc body reusing `.doc-body`. */
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 6px; font-size: 11.5px; color: var(--ink-3); }
.comment-meta .author { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.comment-meta .reply { font-family: var(--mono); font-size: 10px; }
.comment-meta .spacer { flex: 1; }
.comment-body { padding: 0 14px 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.comment-card + .comment-card { border-top: 1px solid var(--line-2); }
.outdated { color: var(--amber); background: var(--amber-soft); font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 5px; }
.comment-state { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--amber); background: var(--amber-soft); }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.comment-actions form { margin: 0; }
/* An anchored blob thread card's header strip (thread on L<n>). */
.thread-head { display: flex; align-items: center; gap: 8px; padding: 6px 13px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.thread-head .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ===================== SYNTAX ===================== *
 * `crate::pages::files::highlight` (`arborium` `ClassNames`). */
.code .keyword, .code .macro, .code .tag { color: var(--s-keyword); }
.code .function, .code .constructor { color: var(--s-func); }
.code .type { color: var(--s-type); }
.code .string { color: var(--s-string); }
.code .number, .code .constant, .code .label { color: var(--s-const); }
.code .comment { color: var(--s-comment); font-style: italic; }
.code .operator, .code .punctuation { color: var(--s-op); }
.code .property, .code .attribute { color: var(--s-prop); }
.code .title { color: var(--s-keyword); font-weight: 600; }
.code .strong { font-weight: 600; }
.code .emphasis { font-style: italic; }
.code .link, .code .url, .code .reference { color: var(--s-prop); text-decoration: underline; }
.code .markup { color: var(--s-func); }

/* ===================== DIFFS ===================== *
 * `crate::pages::commits::diff_view`. */
.diff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-inner); overflow-x: auto; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; line-height: 19px; }
.diff .ln { display: block; padding: 2px 14px; white-space: pre; }
.diff .add { background: var(--diff-add); color: var(--green); }
.diff .del { background: var(--diff-del); color: var(--red); }
.diff .hunk { color: var(--accent); background: var(--surface-2); }
.diff .meta { color: var(--ink-3); }
.diff .file { color: var(--ink); font-weight: 600; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 9px 14px; }

/* ===================== RENDERED DOCS ===================== */
.doc-props { border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-2); padding: 6px 0; margin: 0 0 18px; }
.doc-props dd { white-space: pre-wrap; }
.doc-body { padding: 28px 32px 36px; max-width: 44rem; overflow-wrap: break-word; font-size: 14px; line-height: 1.62; color: var(--ink-2); }
.doc-body > :first-child { margin-top: 0; }
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 1.6rem 0 .8rem; color: var(--ink); }
.doc-body h1 { font-size: 1.9rem; letter-spacing: -.02em; margin-top: 0; }
.doc-body .doc-subtitle { font-style: italic; font-size: 1.1rem; color: var(--ink-3); margin: -.3rem 0 1.1rem; }
.doc-body h2 { font-size: 1.35rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.doc-body h3 { font-size: 1.12rem; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 1rem; }
.doc-body ul, .doc-body ol { padding-left: 1.4rem; list-style: revert; }
.doc-body li { margin: .25rem 0; }
.doc-body a { font-weight: 500; text-decoration: underline; }
.doc-body code, .doc-body .literal { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
.doc-body pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 14px 16px; overflow-x: auto; margin: 0 0 1rem; }
.doc-body pre code { background: none; border: none; padding: 0; font-size: inherit; }
.doc-body blockquote { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1.1rem; margin: 0 0 1rem; color: var(--ink-3); }
.doc-body table { border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; }
.doc-body th, .doc-body td { border: 1px solid var(--line); padding: .4rem .7rem; text-align: left; }
.doc-body th { background: var(--surface-2); font-weight: 600; }
.doc-body img { max-width: 100%; height: auto; }
.doc-body hr { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; }

/* ===================== LOGIN ===================== *
 * `crate::pages::login` -- the inverted device-code flow: a dark code
 * block, only ever mounted on a hosted deployment. */
.login-code {
  font-family: var(--mono); font-size: 15px; color: #fff; background: var(--ink);
  border-radius: var(--radius-inner); padding: 16px 18px; overflow-x: auto; white-space: pre;
}
.login-code .code { color: var(--editor); font-weight: 600; }

/* ============ PAGE-SCOPED ADDITIONS ============ *
 * Classes the per-page reskin introduced, collected here so the whole
 * design system stays in one stylesheet (the page modules never edit CSS
 * themselves; they report the rule and it lands here). */

/* The editor pill sits inside flex rows (`.card-row`, `.blob-actions`,
 * `.commit-meta`) and must never stretch like a `.card-row a` link does. */
.editor-open { flex: none; }
.ed-loc { white-space: nowrap; }

/* Dashboard working-tree change-kind chips (README ChangeKindLabel),
 * layered on the `.chip` base. */
.chip-added { color: var(--green); background: var(--green-soft); }
.chip-modified { color: var(--amber); background: var(--amber-soft); }
.chip-deleted { color: var(--red); background: var(--red-soft); }
.chip-renamed { color: var(--accent); background: var(--accent-soft); }
.chip-untracked { color: var(--ink-2); background: var(--line-2); }

/* Dashboard working-tree path: ellipsize from the front (`direction:rtl`)
 * so the filename stays visible when the path overflows. */
.desk-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }

/* Dashboard header's right-aligned deployment-mode line. */
.desk-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.desk-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--editor); flex: none; }

/* Files' outdated-comments section heading (warn glyph + title). */
.outdated-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.outdated-head .icon { width: 14px; height: 14px; stroke-width: 1.9; color: var(--amber); }

/* Issues sidebar status dot, colored by issue state (the chip's own leading
 * dot already inherits via `.chip .dot`). */
.side-meta .dot.state-open { background: var(--green); }
.side-meta .dot.state-in-progress { background: var(--amber); }
.side-meta .dot.state-closed { background: var(--ink-4); }

/* Segmented pickers: hide the native radio and fill the chosen option.
 * Issues' state picker is server-rendered (`.opt.active.state-*`, colored by
 * state); the commit verdict picker is plain radios, so its checked option
 * fills via `:has()`. */
.picker .opt { position: relative; }
.picker .opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.picker .opt:has(input:checked) { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); font-weight: 600; }
.picker .opt:has(input:checked) .dot, .picker .opt.active .dot { background: currentColor; }
.picker .opt.active.state-open { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.picker .opt.active.state-in-progress { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.picker .opt.active.state-closed { color: var(--ink-2); background: var(--line-2); border-color: var(--line); }

/* Disclosure summaries (issue Edit, account login-mapping) read as
 * clickable. */
details > summary { cursor: pointer; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 640px) {
  .content { padding: 22px 18px 40px; }
  .wb-bar { gap: 10px; padding: 0 12px; }
  .palette { max-width: none; }
  .palette kbd { display: none; }
  .page-title { font-size: 19px; }
  .doc-body { padding: 22px 20px 28px; }
  .doc-body h1 { font-size: 1.6rem; }
}