/* in normal flow: a tight box around the text - rows below shift only
     by the box chrome, nothing is covered */
  .editor-overlay.svelte-p21qwn {
    position: relative;
    margin: 1px -2px 2px;
    z-index: 25;
  }

  .toolbar.svelte-p21qwn {
    position: absolute;
    top: -31px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    white-space: nowrap;
  }

  .toolbar.svelte-p21qwn button:where(.svelte-p21qwn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .toolbar.svelte-p21qwn button:where(.svelte-p21qwn):hover {
    background: var(--hover);
    color: var(--ink);
  }

  .toolbar.svelte-p21qwn button.ok:where(.svelte-p21qwn) {
    color: var(--status-shipped);
  }

  .toolbar.svelte-p21qwn .done:where(.svelte-p21qwn) {
    color: var(--status-shipped);
  }

  .toolbar.svelte-p21qwn select:where(.svelte-p21qwn) {
    height: 22px;
    padding: 0 20px 0 6px;
    font-size: 10.5px;
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: 5px;
    background-color: var(--surface);
    color: var(--ink);
    cursor: pointer;
    /* own chevron + border-read focus, never the UA arrow or ring */
    appearance: none;
    outline: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
      linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position:
      calc(100% - 11px) calc(50% - 1px),
      calc(100% - 8px) calc(50% - 1px);
    background-size: 3px 3px;
    background-repeat: no-repeat;
  }

  .toolbar.svelte-p21qwn select:where(.svelte-p21qwn):focus {
    border-color: var(--line-strong);
  }

  .text-window.svelte-p21qwn {
    padding: 2px 6px 3px;
    border: 1.5px solid var(--status-mapped);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
  }

  .ref.svelte-p21qwn {
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--font-scale, 1));
    color: var(--ink-muted);
  }

  textarea.svelte-p21qwn,
  .context-window.svelte-p21qwn input:where(.svelte-p21qwn) {
    display: block;
    width: 100%;
    border: none;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: calc(11px * var(--font-scale, 1));
    line-height: 1.45;
    resize: none;
    outline: none;
    padding: 0;
    overflow: hidden;
  }

  .context-window.svelte-p21qwn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 5px);
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-focus);
  }

  .context-window.left.svelte-p21qwn {
    left: auto;
    right: calc(100% + 5px);
  }

  .context-window.svelte-p21qwn label:where(.svelte-p21qwn) span:where(.svelte-p21qwn) {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }

  .context-window.svelte-p21qwn input:where(.svelte-p21qwn),
  .context-window.svelte-p21qwn textarea:where(.svelte-p21qwn) {
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
  }

  .attach-row.svelte-p21qwn {
    display: flex;
    gap: 4px;
  }

  .attach-row.svelte-p21qwn button:where(.svelte-p21qwn) {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: none;
    color: var(--ink-secondary);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
  }

  .attachments.svelte-p21qwn {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: var(--ink-secondary);
    overflow: hidden;
  }

  .attachments.svelte-p21qwn li:where(.svelte-p21qwn) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .card.svelte-1si9tiv {
    /* zoomed-out readability: below 69% canvas zoom the column track widens
       by --card-boost and the card css-zooms by the same factor, so its
       INTERNAL layout is pixel-identical to a normal-zoom card - same words
       per line, same line count, never taller from re-wrapping */
    zoom: var(--card-boost, 1);
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    overflow: visible;
    transition: border-color 140ms ease;
  }

  .card.svelte-1si9tiv:hover {
    border-color: var(--line-strong);
  }

  /* the stage-2 focused card is counter-scaled to full size by its wrap -
     the shared boost must not compound on top */
  .lod-focus .card.svelte-1si9tiv {
    zoom: 1;
  }

  .status-mapped.svelte-1si9tiv { background: linear-gradient(var(--tint-mapped), var(--tint-mapped)), var(--surface-raised); }
  .status-open.svelte-1si9tiv { background: linear-gradient(var(--tint-open), var(--tint-open)), var(--surface-raised); }
  .status-shipped.svelte-1si9tiv { background: linear-gradient(var(--tint-shipped), var(--tint-shipped)), var(--surface-raised); }
  .status-blocked.svelte-1si9tiv { background: linear-gradient(var(--tint-blocked), var(--tint-blocked)), var(--surface-raised); }
  .status-deprecated.svelte-1si9tiv { background: linear-gradient(var(--tint-deprecated), var(--tint-deprecated)), var(--surface-raised); }

  header.svelte-1si9tiv {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px 6px;
  }

  .status-dot.svelte-1si9tiv {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
  }
  .status-mapped.svelte-1si9tiv .status-dot:where(.svelte-1si9tiv) { background: var(--status-mapped); }
  /* "open" display means complete (all requirements shipped) → green dot */
  .status-open.svelte-1si9tiv .status-dot:where(.svelte-1si9tiv) { background: var(--status-shipped); }
  .status-shipped.svelte-1si9tiv .status-dot:where(.svelte-1si9tiv) { background: var(--status-shipped); }
  .status-blocked.svelte-1si9tiv .status-dot:where(.svelte-1si9tiv) { background: var(--status-blocked); }
  .status-deprecated.svelte-1si9tiv .status-dot:where(.svelte-1si9tiv) { background: var(--status-deprecated); }

  h3.svelte-1si9tiv {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: calc(12px * var(--font-scale, 1));
    font-weight: 600;
    letter-spacing: -0.01em;
    /* long titles wrap to the next line instead of escaping the node */
    overflow-wrap: anywhere;
  }

  .body.svelte-1si9tiv {
    display: flex;
    gap: 10px;
    padding: 0 7px 8px 11px;
    min-height: 0;
  }

  .description.svelte-1si9tiv,
  .desc-edit.svelte-1si9tiv {
    flex: 0 0 34%;
    min-width: 0;
  }

  .description.svelte-1si9tiv {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: calc(10.5px * var(--font-scale, 1));
    line-height: 1.5;
    color: var(--ink-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: pointer;
    align-self: flex-start;
  }

  .description.svelte-1si9tiv:disabled {
    cursor: default;
  }

  /* same tight boundary box as the requirement editor */
  .desc-edit.svelte-1si9tiv {
    align-self: flex-start;
    padding: 2px 6px 3px;
    margin: -3px -7px;
    border: 1.5px solid var(--status-mapped);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
  }

  .desc-edit.svelte-1si9tiv textarea:where(.svelte-1si9tiv) {
    display: block;
    width: 100%;
    border: none;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: calc(10.5px * var(--font-scale, 1));
    line-height: 1.5;
    resize: none;
    outline: none;
    padding: 0;
    overflow: hidden;
  }

  .requirements.svelte-1si9tiv {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .requirements.svelte-1si9tiv li:where(.svelte-1si9tiv) {
    position: relative;
  }

  .req.svelte-1si9tiv {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 1px 4px;
    border: none;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: calc(11px * var(--font-scale, 1));
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
  }

  .req.svelte-1si9tiv:hover {
    background: var(--hover-veil);
  }

  /* read-only rows: no editor cursor, no veil, no delete - the play control
     on the marker is the one live affordance */
  .req.readonly.svelte-1si9tiv {
    cursor: default;
  }

  .req.readonly.svelte-1si9tiv:hover {
    background: none;
  }

  .req.readonly.svelte-1si9tiv .req-delete:where(.svelte-1si9tiv) {
    display: none;
  }

  /* pinned to the first text line so multi-line requirements stay aligned */
  .marker.svelte-1si9tiv {
    position: relative;
    width: 11px;
    height: 11px;
    flex: none;
    margin-top: 2.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .req-dot.svelte-1si9tiv {
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  /* play appears over the dot on row hover - clicking it runs, everything
     else on the row opens the editor */
  .play.svelte-1si9tiv {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: var(--surface-raised);
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
  }

  .req.svelte-1si9tiv:hover .play:where(.svelte-1si9tiv) {
    opacity: 1;
    pointer-events: auto;
  }

  .play.svelte-1si9tiv:hover {
    color: var(--status-shipped);
  }

  .req-ref.svelte-1si9tiv {
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--font-scale, 1));
    line-height: 1.6;
    color: var(--ink-muted);
    flex: none;
  }

  .req-text.svelte-1si9tiv {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* delete floats over the row's end on hover - reserves no layout space,
     so text runs right up to the node edge */
  .req-delete.svelte-1si9tiv {
    position: absolute;
    right: 2px;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    color: var(--ink-muted);
    background: var(--surface-raised);
    opacity: 0;
    pointer-events: none;
  }

  .req.svelte-1si9tiv:hover .req-delete:where(.svelte-1si9tiv) {
    opacity: 1;
    pointer-events: auto;
  }

  .req-delete.svelte-1si9tiv:hover {
    color: var(--status-blocked);
  }

  .head-tools.svelte-1si9tiv {
    margin-left: auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .card.svelte-1si9tiv:hover .head-tools:where(.svelte-1si9tiv) {
    opacity: 1;
  }

  .head-btn.svelte-1si9tiv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
  }

  .head-btn.svelte-1si9tiv:hover {
    color: var(--ink);
    background: var(--hover-veil);
  }

  .head-btn.delete.svelte-1si9tiv:hover {
    color: var(--status-blocked);
  }

  /* space is always reserved - only visibility changes, the node never grows */
  .add-req.svelte-1si9tiv {
    height: 20px;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .card.svelte-1si9tiv:hover .add-req:where(.svelte-1si9tiv) {
    opacity: 1;
  }

  .add-req.svelte-1si9tiv button:where(.svelte-1si9tiv) {
    border: none;
    background: none;
    padding: 2px 4px;
    font-family: inherit;
    font-size: calc(10px * var(--font-scale, 1));
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 5px;
  }

  .add-req.svelte-1si9tiv button:where(.svelte-1si9tiv):hover {
    color: var(--ink);
    background: var(--hover-veil);
  }

  footer.svelte-1si9tiv {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 11px 7px;
    border-top: 1px solid var(--line);
  }

  .progress.svelte-1si9tiv {
    flex: 1;
    display: flex;
    height: 2px;
    border-radius: 1px;
    background: var(--surface-sunken);
    overflow: hidden;
  }

  .fill.svelte-1si9tiv {
    height: 100%;
    transition: width 220ms ease;
  }

  .fill.shipped.svelte-1si9tiv {
    background: var(--status-shipped);
  }

  .fill.blocked.svelte-1si9tiv {
    background: var(--status-blocked);
  }

  .meta.svelte-1si9tiv {
    font-size: calc(9.5px * var(--font-scale, 1));
    color: var(--ink-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
/*
 * WorkMap design tokens.
 * Theme is driven by [data-theme="light" | "dark"] on the tool root, so the
 * tool can follow the IDE theme when embedded and its own toggle in the browser.
 * Status colors are validated (dataviz six checks) against both surfaces.
 */

.workmap-root {
  /* status hues - light (validated; deeper so they read against white) */
  --status-mapped: #33689e;
  --status-open: #9c9ca1;
  --status-shipped: #1e7c34;
  --status-blocked: #c02b20;
  --status-deprecated: #77777c;

  /* surfaces - the shell's Beautiful UI scale, so the embedded WorkMap and
     its host read as one app */
  --surface: #fafafb;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f2f3;
  --surface-overlay: rgba(250, 250, 251, 0.82);

  /* ink */
  --ink: #1f2124;
  --ink-secondary: #62656b;
  --ink-muted: #9a9da3;

  /* lines */
  --line: #ecedef;
  --line-strong: #e0e2e5;
  --line-dashed: rgba(31, 33, 36, 0.14);

  /* status tints for card fills - strong enough to tell blue/green/red apart */
  --tint-mapped: rgba(51, 104, 158, 0.12);
  --tint-open: rgba(156, 156, 161, 0.14);
  --tint-shipped: rgba(30, 124, 52, 0.11);
  --tint-blocked: rgba(192, 43, 32, 0.1);
  --tint-deprecated: rgba(119, 119, 124, 0.1);

  --hover-veil: rgba(255, 255, 255, 0.5);
  /* ink washes for menu rows - hover never darkens, same as the shell */
  --hover: rgba(31, 33, 36, 0.05);
  --selected: rgba(31, 33, 36, 0.07);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.03);
  --shadow-focus: 0 8px 28px rgba(0, 0, 0, 0.09), 0 24px 64px rgba(0, 0, 0, 0.1);

  --radius-card: 12px;
  --radius-pill: 999px;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI',
    Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Consolas, monospace;

  font-family: var(--font-ui);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

/* whisper scrollbars - hairline overlay thumb, visible only while the
   pointer is over the pane; identical to the shell's universal style so the
   embedded WorkMap never shows a different bar than its host */
.workmap-root ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.workmap-root ::-webkit-scrollbar-track,
.workmap-root ::-webkit-scrollbar-corner {
  background: transparent;
}

.workmap-root ::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.workmap-root :hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.workmap-root ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}

.workmap-root[data-theme='dark'] {
  --status-mapped: #4c94db;
  --status-open: #98989d;
  --status-shipped: #27a04a;
  --status-blocked: #f0524a;
  --status-deprecated: #6e6e73;

  --surface: #17181a;
  --surface-raised: #232427;
  --surface-sunken: #1c1d1f;
  --surface-overlay: rgba(23, 24, 26, 0.82);

  --ink: #f2f3f4;
  --ink-secondary: #a5a8ad;
  --ink-muted: #6c6f75;

  --line: #2e3033;
  --line-strong: #3a3c40;
  --line-dashed: rgba(242, 243, 244, 0.12);

  --tint-mapped: rgba(76, 148, 219, 0.1);
  --tint-open: rgba(152, 152, 157, 0.09);
  --tint-shipped: rgba(39, 160, 74, 0.1);
  --tint-blocked: rgba(240, 82, 74, 0.1);
  --tint-deprecated: rgba(110, 110, 115, 0.09);

  --hover-veil: rgba(255, 255, 255, 0.045);
  --hover: rgba(242, 243, 244, 0.055);
  --selected: rgba(242, 243, 244, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 8px 28px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

  .snapshot-root.svelte-1yb2z25 {
    background: none;
  }

  .snapshot.svelte-1yb2z25 {
    display: grid;
    column-gap: 16px;
    align-items: center;
    justify-items: center;
    --link: var(--line-strong);
  }

  .cell.svelte-1yb2z25 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  /* the same 1px branch line the tree draws between node levels */
  .stub.svelte-1yb2z25 {
    flex: 1;
    width: 1px;
    min-height: 12px;
    background: var(--link);
  }

  .focus-wrap.svelte-1yb2z25 {
    position: relative;
    width: 100%;
    margin: 17px 0 4px;
  }

  .node-ref.svelte-1yb2z25 {
    position: absolute;
    top: -17px;
    left: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-muted);
    line-height: 1;
  }

  /* neighboring nodes, minimized exactly like the tree's capsules */
  .mini-node.svelte-1yb2z25 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--ink-secondary);
  }

  .mini-node.st-mapped.svelte-1yb2z25 { background: linear-gradient(var(--tint-mapped), var(--tint-mapped)), var(--surface-raised); }
  .mini-node.st-open.svelte-1yb2z25 { background: linear-gradient(var(--tint-open), var(--tint-open)), var(--surface-raised); }
  .mini-node.st-blocked.svelte-1yb2z25 { background: linear-gradient(var(--tint-blocked), var(--tint-blocked)), var(--surface-raised); }
  .mini-node.st-shipped.svelte-1yb2z25 { background: linear-gradient(var(--tint-shipped), var(--tint-shipped)), var(--surface-raised); }
  .mini-node.st-deprecated.svelte-1yb2z25 { background: linear-gradient(var(--tint-deprecated), var(--tint-deprecated)), var(--surface-raised); }

  .mini-dot.svelte-1yb2z25 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
  }
  .st-mapped.svelte-1yb2z25 .mini-dot:where(.svelte-1yb2z25) { background: var(--status-mapped); }
  .st-open.svelte-1yb2z25 .mini-dot:where(.svelte-1yb2z25) { background: var(--status-shipped); }
  .st-blocked.svelte-1yb2z25 .mini-dot:where(.svelte-1yb2z25) { background: var(--status-blocked); }
  .st-shipped.svelte-1yb2z25 .mini-dot:where(.svelte-1yb2z25) { background: var(--status-shipped); }
  .st-deprecated.svelte-1yb2z25 .mini-dot:where(.svelte-1yb2z25) { background: var(--status-deprecated); }

  .mini-name.svelte-1yb2z25 {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-ref.svelte-1yb2z25 {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-muted);
    flex: none;
  }

  .missing.svelte-1yb2z25 {
    padding: 12px;
    font-size: 12px;
    color: var(--ink-muted);
  }

  /* absolute in .workmap-root coords - fixed would anchor to the shell's
     transformed overlay window and open far from the pointer */
  .menu.svelte-kuvfyx {
    position: absolute;
    z-index: 50;
    min-width: 230px;
    margin: 0;
    padding: 5px;
    list-style: none;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-focus);
    animation: svelte-kuvfyx-pop 120ms ease;
  }

  @keyframes svelte-kuvfyx-pop {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  button.svelte-kuvfyx {
    display: block;
    width: 100%;
    padding: 7px 12px;
    font-size: 12px;
    text-align: left;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  button.svelte-kuvfyx:hover {
    background: var(--hover);
  }

  /* the top padding is headroom: zoomed out, the counter-scaled root box
     grows upward from its (fixed) bottom edge into this space. It widens
     with the inverse zoom so the box never crosses the content's clipped
     top edge, and is exactly 64px at 1x and above */
  .header.svelte-1ve6g46 {
    display: flex;
    justify-content: center;
    padding: calc(14px + 50px / min(var(--zoom, 1), 1)) 28px 10px;
  }

  .root-cell.svelte-1ve6g46 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .root-box.svelte-1ve6g46 {
    margin-top: auto;
    padding: 9px 30px;
    border: 1.5px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    font-size: calc(13px * var(--font-scale, 1));
    font-weight: 600;
    letter-spacing: -0.01em;
    /* the project name stays readable at any zoom-out: undo the canvas
       scale below 1x. Anchored on the bottom edge, where the branch curves
       land, so the connection point never moves */
    transform: scale(calc(1 / min(var(--zoom, 1), 1)));
    transform-origin: 50% 100%;
  }

  .donut.svelte-z3wv0r {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .total.svelte-z3wv0r {
    font-size: 15px;
    font-weight: 600;
    fill: var(--ink);
  }

  .legend.svelte-z3wv0r {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto;
    gap: 3px 16px;
    font-size: 11.5px;
  }

  .legend.svelte-z3wv0r li:where(.svelte-z3wv0r) {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .dot.svelte-z3wv0r {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
  }

  .label.svelte-z3wv0r {
    color: var(--ink-secondary);
  }

  .count.svelte-z3wv0r {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }

  /* same construction as the toolbar: raised card, hairline, soft shadow */
  .hud.svelte-1vyy1eg {
    position: absolute;
    top: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
  }

  .hud.svelte-1vyy1eg {
    transition: opacity 160ms ease;
  }

  /* a node moved underneath: ghost out and let the diagram take the clicks */
  .hud.veiled.svelte-1vyy1eg {
    opacity: 0.12;
    pointer-events: none;
  }

  .hud-left.svelte-1vyy1eg {
    left: 16px;
  }

  .hud-right.svelte-1vyy1eg {
    right: 16px;
    gap: 20px;
  }

  .filter.svelte-1vyy1eg {
    position: relative;
  }

  .filter-btn.svelte-1vyy1eg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .filter-btn.svelte-1vyy1eg:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }

  .filter-btn.on.svelte-1vyy1eg {
    color: var(--status-mapped);
    border-color: var(--status-mapped);
  }

  .badge.svelte-1vyy1eg {
    font-size: 9.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .filter-menu.svelte-1vyy1eg {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-focus);
  }

  .filter-menu.svelte-1vyy1eg label:where(.svelte-1vyy1eg) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
  }

  .filter-menu.svelte-1vyy1eg label:where(.svelte-1vyy1eg):hover {
    background: var(--hover);
  }

  /* custom box, never the native checkbox (shell-wide rule) */
  .filter-menu.svelte-1vyy1eg input:where(.svelte-1vyy1eg) {
    appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    flex: none;
    display: inline-grid;
    place-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--surface-raised);
    cursor: pointer;
    outline: none;
  }

  .filter-menu.svelte-1vyy1eg input:where(.svelte-1vyy1eg):checked {
    border-color: var(--status-mapped);
    background: var(--status-mapped);
  }

  .filter-menu.svelte-1vyy1eg input:where(.svelte-1vyy1eg):checked::before {
    content: '';
    width: 9px;
    height: 9px;
    background: var(--surface-raised);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.75 8.5 3.25 3.25 7.25-7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.75 8.5 3.25 3.25 7.25-7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .filter-menu.svelte-1vyy1eg .dot:where(.svelte-1vyy1eg) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
  }

  .stats.svelte-1vyy1eg {
    display: flex;
    gap: 22px;
    margin: 0;
  }

  .stat.svelte-1vyy1eg dt:where(.svelte-1vyy1eg) {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }

  .stat.svelte-1vyy1eg dd:where(.svelte-1vyy1eg) {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .workmap-root.svelte-1bg5ref {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* no scroll-snap here: a y snap container makes Chromium cancel in-flight
     horizontal wheel scrolls (shift+wheel), killing the pan mid-motion */
  .scroller.svelte-1bg5ref {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* the diagram is a navigable canvas - the 4-arrow cursor says so */
    cursor: all-scroll;
  }

  /* typing surfaces inside the cards keep their text cursor */
  .scroller.svelte-1bg5ref input,
  .scroller.svelte-1bg5ref textarea {
    cursor: text;
  }

  /* navigation off: an ordinary pointer, no edge glide (script-gated), and
     empty canvas pans by grab-dragging - the cursor says so mid-drag only */
  .scroller.nav-off.svelte-1bg5ref {
    cursor: default;
  }

  .scroller.nav-off.panning.svelte-1bg5ref {
    cursor: grabbing;
  }

  /* bounds the scroll range to the SCALED tree - overflow: clip stops the
     unscaled layout box (and the hover halos) from widening it */
  .canvas.svelte-1bg5ref {
    overflow: clip;
  }

  /* keeps the header (and its root box) as wide as the tree, so the stem
     stays centered even when the tree overflows horizontally; the inline
     min-width/min-height stretch it to the viewport so the ghost hover
     halos stay live below a short tree.
     overflow-x clip: the halos must never poke out sideways - the phantom
     range read as a broken scrollbar */
  .content.svelte-1bg5ref {
    width: fit-content;
    overflow-x: clip;
    /* zoom scales from the top-left; the inline translate re-centers the
       tree once it is smaller than the window */
    transform-origin: 0 0;
  }

  .tree.svelte-1bg5ref {
    /* fixed width: nodes never shrink or wrap - the canvas scrolls instead */
    /* generous vertical air between full-size nodes; compact rows keep 10px */
    --row-gap: 120px;
    --link: var(--line-strong);
    min-width: fit-content;
    padding: 4px 28px 96px;
    /* host pages must never turn the diagram into a nested scroller (a
       shell-global .tree rule once did - wheel scrolls latched onto it and
       the root box desynced from the connector svg) */
    overflow: visible;
  }

  .row.svelte-1bg5ref {
    display: grid;
    /* per-pair gap tracks come inline - full-size neighbors get wide air,
       minimized pairs stay tight */
    justify-content: center;
  }

  /* the curved connectors span the same width as the grid, centered the
     same way, so curve endpoints land exactly on the column centers */
  .stubs.svelte-1bg5ref {
    display: flex;
    justify-content: center;
  }

  .stubs.svelte-1bg5ref svg:where(.svelte-1bg5ref) {
    display: block;
    flex: none;
    /* reach up to the root box's bottom border (header 10 + tree 4) */
    margin-top: -14px;
    pointer-events: none;
  }

  .branch-curve.svelte-1bg5ref {
    fill: none;
    stroke: var(--link);
    stroke-width: 1;
  }

  .branch-curve.bold.svelte-1bg5ref {
    stroke-width: 2;
  }

  /* invisible wide twin of each curve - the only hoverable part of the svg */
  .curve-hit.svelte-1bg5ref {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
  }

  .ghost-curve.svelte-1bg5ref {
    stroke-dasharray: 4 4;
  }

  .ghost-cell.svelte-1bg5ref {
    position: relative;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 140ms ease;
  }

  /* large invisible hover halo: hovering anywhere in it (from just under the
     header stats down most of the window, and outward beside the tree - but
     never all the way to the window edge) reveals the add-branch button.
     Only the button itself is clickable; the halo just shows it. */
  .ghost-cell.svelte-1bg5ref::before {
    content: '';
    position: absolute;
    top: -150px;
    height: 80vh;
    z-index: 5;
  }

  .ghost-cell.ghost-left.svelte-1bg5ref::before {
    left: -180px;
    right: 0;
  }

  .ghost-cell.ghost-right.svelte-1bg5ref::before {
    left: 0;
    right: -180px;
  }

  .ghost-cell.active.svelte-1bg5ref {
    opacity: 1;
  }

  /* not clickable while invisible: after adding a branch the layout shifts
     and the cursor can land here without a mouseenter ever firing */
  .ghost-cell.svelte-1bg5ref:not(.active) .ghost-node:where(.svelte-1bg5ref) {
    pointer-events: none;
  }

  .ghost-node.svelte-1bg5ref {
    /* above the hover halo (z 5), or the halo swallows the button's clicks */
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    border: 1px dashed var(--link);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .ghost-node.svelte-1bg5ref:hover {
    color: var(--ink);
  }

  .row.svelte-1bg5ref {
    margin-bottom: var(--row-gap);
  }

  /* this level and the next are fully minimized: pull the capsules together.
     the stubs/tails all derive from --row-gap, so the through-line still
     bridges the (smaller) gap */
  .row.compact.svelte-1bg5ref {
    --row-gap: 10px;
  }

  /* a cell stretches to the row height, but the card keeps its own size -
     the tail fills whatever is left and bridges the row gap */
  .cell.svelte-1bg5ref {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    transition: background 120ms ease;
  }

  /* hover veil hugs the actual card, not the (taller) grid cell */
  .cell.veiled.svelte-1bg5ref .drag-wrap:where(.svelte-1bg5ref)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--hover-veil);
    pointer-events: none;
  }

  .node-ref.svelte-1bg5ref {
    position: absolute;
    top: -17px;
    left: 3px;
    font-family: var(--font-mono);
    font-size: calc(9.5px * var(--font-scale, 1));
    color: var(--ink-muted);
    line-height: 1;
  }

  .drag-wrap.svelte-1bg5ref {
    position: relative;
    flex: none;
    display: flex;
    width: 100%;
    min-width: 0;
  }

  /* capsule centered in its row on a continuous line, so the gaps to the
     neighbors above and below read evenly */
  .mini-wrap.svelte-1bg5ref {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 12px wide hover target around a centered 1px line - visually unchanged */
  .mini-stub.svelte-1bg5ref {
    flex: 1;
    width: 12px;
    min-height: 6px;
  }

  .mini-stub.lined.svelte-1bg5ref {
    background: linear-gradient(var(--link), var(--link)) top center / 1px 100% no-repeat;
  }

  .mini-stub.lined.bold.svelte-1bg5ref {
    background-size: 2px 100%;
  }

  .mini-stub.extend.svelte-1bg5ref {
    margin-bottom: calc(-1 * var(--row-gap));
    padding-bottom: var(--row-gap);
  }

  /* a minimized node: a small capsule that still reads as a node */
  .mini-node.svelte-1bg5ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    font-family: inherit;
    font-size: calc(10.5px * var(--font-scale, 1));
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .mini-node.svelte-1bg5ref:hover {
    border-color: var(--line-strong);
  }

  .mini-node.st-mapped.svelte-1bg5ref { background: linear-gradient(var(--tint-mapped), var(--tint-mapped)), var(--surface-raised); }
  .mini-node.st-open.svelte-1bg5ref { background: linear-gradient(var(--tint-open), var(--tint-open)), var(--surface-raised); }
  .mini-node.st-blocked.svelte-1bg5ref { background: linear-gradient(var(--tint-blocked), var(--tint-blocked)), var(--surface-raised); }
  .mini-node.st-shipped.svelte-1bg5ref { background: linear-gradient(var(--tint-shipped), var(--tint-shipped)), var(--surface-raised); }
  .mini-node.st-deprecated.svelte-1bg5ref { background: linear-gradient(var(--tint-deprecated), var(--tint-deprecated)), var(--surface-raised); }

  .mini-dot.svelte-1bg5ref {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
  }
  .st-mapped.svelte-1bg5ref .mini-dot:where(.svelte-1bg5ref) { background: var(--status-mapped); }
  .st-open.svelte-1bg5ref .mini-dot:where(.svelte-1bg5ref) { background: var(--status-shipped); }
  .st-blocked.svelte-1bg5ref .mini-dot:where(.svelte-1bg5ref) { background: var(--status-blocked); }
  .st-shipped.svelte-1bg5ref .mini-dot:where(.svelte-1bg5ref) { background: var(--status-shipped); }
  .st-deprecated.svelte-1bg5ref .mini-dot:where(.svelte-1bg5ref) { background: var(--status-deprecated); }

  .mini-name.svelte-1bg5ref {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .mini-ref.svelte-1bg5ref {
    font-family: var(--font-mono);
    font-size: calc(9px * var(--font-scale, 1));
    color: var(--ink-muted);
    flex: none;
  }

  /* far-zoom stand-in for any node: the status-tinted bubble and the node
     number, nothing else. The number's font inverts the zoom so it stays
     readable on screen no matter how far out the view is. */
  .lod-node.svelte-1bg5ref {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    height: 96px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    background: var(--surface-raised);
    font: inherit;
    cursor: pointer;
  }

  .lod-node.st-mapped.svelte-1bg5ref { background: linear-gradient(var(--tint-mapped), var(--tint-mapped)), var(--surface-raised); }
  .lod-node.st-open.svelte-1bg5ref { background: linear-gradient(var(--tint-open), var(--tint-open)), var(--surface-raised); }
  .lod-node.st-blocked.svelte-1bg5ref { background: linear-gradient(var(--tint-blocked), var(--tint-blocked)), var(--surface-raised); }
  .lod-node.st-shipped.svelte-1bg5ref { background: linear-gradient(var(--tint-shipped), var(--tint-shipped)), var(--surface-raised); }
  .lod-node.st-deprecated.svelte-1bg5ref { background: linear-gradient(var(--tint-deprecated), var(--tint-deprecated)), var(--surface-raised); }

  .lod-ref.svelte-1bg5ref {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: calc(13px * var(--font-scale, 1) / var(--zoom, 1));
    line-height: 1;
    color: var(--ink);
  }

  /* middle zoom: the same status-tinted card, carrying only the node number
     and its title - both counter-scaled to stay readable on screen */
  .lod-title-node.svelte-1bg5ref {
    /* scaled by the shared card boost, like the full cards - internal
       layout stays constant so long titles never re-wrap taller */
    zoom: var(--card-boost, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    background: var(--surface-raised);
    font: inherit;
    cursor: pointer;
  }

  .lod-title-node.st-mapped.svelte-1bg5ref { background: linear-gradient(var(--tint-mapped), var(--tint-mapped)), var(--surface-raised); }
  .lod-title-node.st-open.svelte-1bg5ref { background: linear-gradient(var(--tint-open), var(--tint-open)), var(--surface-raised); }
  .lod-title-node.st-blocked.svelte-1bg5ref { background: linear-gradient(var(--tint-blocked), var(--tint-blocked)), var(--surface-raised); }
  .lod-title-node.st-shipped.svelte-1bg5ref { background: linear-gradient(var(--tint-shipped), var(--tint-shipped)), var(--surface-raised); }
  .lod-title-node.st-deprecated.svelte-1bg5ref { background: linear-gradient(var(--tint-deprecated), var(--tint-deprecated)), var(--surface-raised); }

  .lodt-ref.svelte-1bg5ref {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: calc(11px * var(--font-scale, 1));
    line-height: 1;
    color: var(--ink-muted);
  }

  .lodt-name.svelte-1bg5ref {
    max-width: 100%;
    font-size: calc(13px * var(--font-scale, 1));
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* title-stage focus: just this node enlarged back to its full card,
     floating over its compact neighbors at a readable scale */
  .drag-wrap.lod-focus.svelte-1bg5ref {
    position: relative;
    z-index: 30;
    /* the track is boost-widened; the focused card opts out of the boost
       (its own counter-scale already makes it full size), so it narrows
       back to the real column width first */
    width: calc(100% / var(--card-boost, 1));
    margin-left: auto;
    margin-right: auto;
    transform: scale(calc(1 / var(--zoom, 1)));
    transform-origin: top center;
  }

  /* the zoomed-out filter treatment: fade, never resize */
  .lod-node.svelte-1bg5ref,
  .lod-title-node.svelte-1bg5ref {
    transition: opacity 160ms ease;
  }

  .lod-node.dim.svelte-1bg5ref,
  .lod-title-node.dim.svelte-1bg5ref {
    opacity: 0.16;
  }

  .tail.svelte-1bg5ref {
    flex: 1;
    /* narrow hover target centered under the card, around the 1px line */
    width: 12px;
    align-self: center;
    padding-bottom: var(--row-gap);
    margin-bottom: calc(-1 * var(--row-gap));
    background: linear-gradient(var(--link), var(--link)) top center / 1px 100% no-repeat;
  }

  .tail.bold.svelte-1bg5ref {
    background-size: 2px 100%;
  }

  /* connector hover: use-case chip + token stats, styled apart from node
     text. Absolute in .workmap-root coords - a fixed box would anchor to
     the shell's transformed overlay window and drift off the cursor */
  .line-hover-box.svelte-1bg5ref {
    position: absolute;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-focus);
    pointer-events: none;
  }

  .line-hover-title.svelte-1bg5ref {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--font-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .line-hover-stats.svelte-1bg5ref {
    font-family: var(--font-mono);
    font-size: calc(10px * var(--font-scale, 1));
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .add-node.svelte-1bg5ref {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(-1 * var(--row-gap) + 6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }

  /* the row above is compact (10px gap) - pull up by that gap, not --row-gap */
  .add-node.compact-above.svelte-1bg5ref {
    margin-top: calc(-10px + 6px);
  }

  .add-node.visible.svelte-1bg5ref {
    opacity: 1;
    pointer-events: auto;
  }

  .add-stub.svelte-1bg5ref {
    width: 0;
    height: 14px;
    border-left: 1px dashed var(--line-strong);
    margin-bottom: 4px;
  }

  .add-node.svelte-1bg5ref button:where(.svelte-1bg5ref) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .add-node.svelte-1bg5ref button:where(.svelte-1bg5ref):hover {
    border-style: solid;
    color: var(--ink);
  }

  .toolbar.svelte-1bg5ref {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    z-index: 20;
  }

  .toolbar.svelte-1bg5ref button:where(.svelte-1bg5ref) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--ink-secondary);
    cursor: pointer;
  }

  .toolbar.svelte-1bg5ref button:where(.svelte-1bg5ref):hover:not(:disabled) {
    background: var(--hover);
    color: var(--ink);
  }

  .toolbar.svelte-1bg5ref button:where(.svelte-1bg5ref):disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* persistent on-state (navigation toggle) - one step above hover */
  .toolbar.svelte-1bg5ref button.active:where(.svelte-1bg5ref) {
    background: var(--selected);
    color: var(--ink);
  }

  /* the live percentage doubles as the reset-to-100% button */
  .toolbar.svelte-1bg5ref .zoom-pct:where(.svelte-1bg5ref) {
    width: auto;
    min-width: 40px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .divider.svelte-1bg5ref {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 4px;
  }

  .empty-state.svelte-1bg5ref {
    flex: 1;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-size: 13px;
  }
/* Warshall shell tokens - mirrors the WorkMap token scheme. */

/* Self-hosted variable faces used by the terminal surfaces. The full 100-900
   axis is declared so the interpolated steps (350 draft text, 450 secondary
   controls) render as their own weights instead of snapping to 400/500. */
@font-face {
  font-family: 'Geist Mono';
  src: url('./GeistMono-VariableFont_wght-Cqzc4KB0.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('./Geist-VariableFont_wght-BsuKa6U_.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The terminal's document faces: Inter for prose and chrome, JetBrains Mono
   for files, commands and code - both variable so the in-between weights
   (450 secondary, 550 labels) render true. */
@font-face {
  font-family: 'Inter';
  src: url('./InterVariable-DiVDrmQJ.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./JetBrainsMono-VariableFont_wght-DtE349c2.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

.shell-root {
  /* the Beautiful UI scale the terminal introduced, now the whole app's:
     ink-on-paper neutrals, one blue accent, tinted status hues */
  --surface: #fafafb;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f2f3;
  --ink: #1f2124;
  --ink-secondary: #62656b;
  --ink-muted: #9a9da3;
  --line: #ecedef;
  --line-strong: #e0e2e5;
  --accent: #1f2124;
  --good: #189a4d;
  --warn: #ef720c;
  --bad: #e3474c;
  /* interaction washes: hover lifts the surface with a translucent tint of
     the ink - it never swaps to a darker panel color. Selection sits one
     step stronger so rest/hover/selected stay distinguishable. */
  --hover: rgba(31, 33, 36, 0.05);
  --hover-strong: rgba(31, 33, 36, 0.08);
  --selected: rgba(31, 33, 36, 0.07);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.03);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.09), 0 24px 64px rgba(0, 0, 0, 0.1);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI',
    Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Consolas, monospace;
  /* legacy slots kept for stragglers - both resolve to the app faces now */
  --font-term: 'Inter', -apple-system, 'Segoe UI Variable Text', 'Segoe UI', system-ui,
    sans-serif;
  --font-input: 'JetBrains Mono', 'Cascadia Mono', 'Cascadia Code', Consolas, ui-monospace,
    monospace;

  /* the app's own title strip; 0 outside the desktop shell */
  --titlebar-h: 0px;

  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 13px;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* UA-rendered chrome (select popups, pickers) follows the theme */
  color-scheme: light;
}

.shell-root[data-theme='dark'] {
  --surface: #17181a;
  --surface-raised: #232427;
  --surface-sunken: #1c1d1f;
  --ink: #f2f3f4;
  --ink-secondary: #a5a8ad;
  --ink-muted: #6c6f75;
  --line: #2e3033;
  --line-strong: #3a3c40;
  --accent: #f2f3f4;
  --good: #3dbb72;
  --warn: #f68f3c;
  --bad: #ee5c61;
  /* dark theme: the wash is light ink, so hover brightens instead of the
     old darker-than-background sink */
  --hover: rgba(242, 243, 244, 0.055);
  --hover-strong: rgba(242, 243, 244, 0.09);
  --selected: rgba(242, 243, 244, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Accessible status palettes (Settings > Appearance > Accessible colors).
   Everything hue-coded keys off --good/--warn/--bad, so retuning the three
   tokens re-colors status ticks, usage bars and diff rows in one place. An
   explicit accessibility mode, so the hue set may leave the graphite rule:
   red/green becomes blue/orange for protan and deutan vision, and warn drops
   to a dark olive clearly separated from red by lightness for tritan. */
.shell-root[data-color-vision='protanopia-deuteranopia'] {
  --good: #0065b8;
  --warn: #8a6d00;
  --bad: #c74e00;
}

.shell-root[data-theme='dark'][data-color-vision='protanopia-deuteranopia'] {
  --good: #4da3e8;
  --warn: #d9c34a;
  --bad: #f08a3c;
}

.shell-root[data-color-vision='tritanopia'] {
  --good: #1b7f3b;
  --warn: #6e5f14;
  --bad: #d93025;
}

.shell-root[data-theme='dark'][data-color-vision='tritanopia'] {
  --good: #2fa557;
  --warn: #b3a25a;
  --bad: #f0524a;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------- top bar */

.shell-root.has-titlebar {
  --titlebar-h: 22px;
}

/* ---------- title bar ---------- */

.titlebar {
  flex: none;
  position: relative;
  z-index: 300;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--titlebar-h);
  background: var(--surface-raised);
  color: var(--ink);
  -webkit-app-region: drag;
  user-select: none;
}

/* the strip's rule, drawn over the row below it 1.5px lower than the strip's
   own bottom edge; an overlay, so nothing under the strip moves with it */
.titlebar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5px);
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

/* room for the traffic lights (main: trafficLightPosition); full screen
   hides them, and their gap goes with them */
.titlebar[data-platform='darwin'] {
  padding-left: 80px;
}

.titlebar[data-platform='darwin'][data-fullscreen] {
  padding-left: 0;
}

/* the strip's left segment is the head of the explorer column: it takes the
   column's width and carries its rule, so the line runs to the top of the
   window. The mark alone over the collapsed rail, the lockup once the column
   is open (the width follows the drag through --sidebar-w, Sidebar.tsx). */
.titlebar-side {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex: none;
  padding-left: 8px;
}

/* the explorer's drag edge lights up the whole line, strip included */
.shell-root:has(.sidebar-resizer:hover) .titlebar-side[data-explorer='open']::after,
.shell-root:has(.sidebar-resizer:active) .titlebar-side[data-explorer='open']::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px;
  /* the sidebar clips its resizer to the three columns inside its rule;
     the same three columns here */
  right: 0;
  width: 3px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.titlebar-side[data-explorer='collapsed'] {
  width: 44px;
  border-right: 1px solid var(--line);
}

.titlebar-side[data-explorer='open'] {
  width: var(--sidebar-w, 232px);
  border-right: 1px solid var(--line);
}

/* macOS: the traffic lights own the left end, the segment has no width */
.titlebar[data-platform='darwin'] .titlebar-side {
  width: auto;
  border-right: 0;
}

/* the same 28px box as the explorer toggle in the collapsed sidebar head
   below (8px inset, .icon-btn min-width), so the two icons share one axis */
.titlebar-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
}

.titlebar-brand svg {
  display: block;
  height: 13px;
  width: auto;
}

/* the brand lockup: Inter semibold caps at 0.1em beside the mark, centred
   on the mark's middle (the caps sit a touch high in a line-height 1 box) */
.titlebar-word {
  margin-left: 2px;
  padding-top: 1px;
  transform: translateY(1px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--ink-secondary);
}

.titlebar-controls {
  display: flex;
  align-self: stretch;
  margin-left: auto;
  -webkit-app-region: no-drag;
}

/* the caption buttons follow the native ones Chromium paints: glyphs in the
   full ink, a 10% ink wash that fades in and out over 150ms under the
   pointer, 20% at once while pressed */
.titlebar-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  outline: none;
  transition:
    background-color 150ms linear,
    color 150ms linear;
}

.titlebar-controls button:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.titlebar-controls button:active {
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  transition: none;
}

/* straight-line glyphs snap to device pixels, so they stay one crisp line at
   125% and 150% display scale too; the close cross keeps its smoothing */
.titlebar-controls button:not(.close) svg {
  shape-rendering: crispEdges;
}

/* the one convention every desktop keeps: close goes red under the pointer */
.titlebar-controls button.close:hover {
  background: #c42b1c;
  color: #ffffff;
}

.titlebar-controls button.close:active {
  background: rgb(196 43 28 / 60%);
}

/* another window has the focus: the lockup and the glyphs drop to 40% ink,
   the way Windows dims an inactive caption (a button under the pointer
   stays lit) */
.titlebar[data-inactive] .titlebar-brand,
.titlebar[data-inactive] .titlebar-word,
.titlebar[data-inactive] .titlebar-controls button:not(:hover) {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  flex: none;
  -webkit-app-region: drag;
}

.topbar > * {
  -webkit-app-region: no-drag;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 100ms ease, color 100ms ease;
}

.icon-btn.labeled {
  padding: 0 10px;
}

.icon-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.icon-btn.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}

.project-switch {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  /* not hidden - the project menu pops out below */
}

.switch-arrow:first-of-type {
  border-radius: 7px 0 0 7px;
}

.switch-arrow:last-of-type {
  border-radius: 0 7px 7px 0;
}

.switch-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 100%;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.switch-arrow:hover {
  background: var(--hover);
  color: var(--ink);
}

.project-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  /* fixed footprint - the switcher never resizes or shifts with the name */
  width: 280px;
  height: 100%;
  padding: 0 10px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}

.project-dropdown:hover {
  background: var(--hover);
}

.project-dropdown .name {
  flex: none;
  max-width: 55%;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-dropdown .dir {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-dropdown svg {
  margin-left: auto;
  color: var(--ink-muted);
  flex: none;
}

/* pinned: the host is showing one project's work and nothing else, so the
   switcher is only its name - no menu, no arrows, no hover affordance */
.project-switch.pinned .project-dropdown {
  border-left: none;
  border-right: none;
  cursor: default;
}

.project-switch.pinned .project-dropdown:hover {
  background: none;
}

/* rests like every other top-bar control - it must not read as selected */
.build-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.build-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

/* split control: the button builds the active project, the caret opens the
   build queue - one reorderable line per project, statuses on the left */
.build-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.build-anchor .build-btn {
  border-radius: 8px 0 0 8px;
  padding-right: 9px;
}

.build-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 30px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.build-caret:hover {
  background: var(--hover);
  color: var(--ink);
}

.build-caret.open {
  background: var(--selected);
  color: var(--ink);
}

.build-spin {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-top-color: var(--ink-secondary);
  animation: git-spin 0.8s linear infinite;
}

/* ------------------------------------------------------------ build queue
   A panel of rows, one per open project. Every row is the whole story of
   its build on one line: status, name and kind, the newest log line, the
   declared ports, the actions. Nothing unfolds. */

/* placed by floating.ts (fixed, inside the window) */
.build-pop {
  position: fixed;
  z-index: 95;
  width: 528px;
  max-width: calc(100vw - 16px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
}

/* the popup scrolls as a whole (floating.ts caps its height); the head
   stays put over the rows */
.build-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 11px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
}

.build-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

.build-count {
  font-size: 10.5px;
  color: var(--ink-muted);
}

.build-runall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  height: 20px;
  padding: 0 8px 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease, opacity 100ms ease;
}

.build-runall svg {
  width: 11px;
  height: 11px;
}

.build-runall:hover {
  background: var(--hover);
}

.build-runall:disabled {
  opacity: 0.45;
  cursor: default;
}

.build-list {
  padding: 3px;
}

.build-empty {
  padding: 14px 10px;
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
}

.build-row-wrap {
  border-radius: 7px;
}

/* insertion marker while dragging a row over this one */
.build-row-wrap.drag-over {
  box-shadow: inset 0 2px 0 var(--accent);
}

.build-row-wrap.drag-over.after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.build-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 3px;
  border-radius: 5px;
  cursor: default;
}

.build-row:hover,
.build-row.menu-open {
  background: var(--hover);
}

.build-row.missing .build-name {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* the drag handle shows on hover only; the whole row drags */
.build-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 12px;
  color: var(--ink-muted);
  opacity: 0;
  cursor: grab;
  transition: opacity 100ms ease;
}

.build-row:hover .build-grip {
  opacity: 1;
}

.build-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

/* one dot family for every state: a ring rests, a solid dot serves or
   fails, a spinner works, a tick finished */
.build-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.build-dot.idle {
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}

.build-dot.up {
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent);
}

.build-dot.failed {
  background: var(--bad);
}

.build-dot.missing {
  box-shadow: inset 0 0 0 1.5px var(--bad);
}

.build-ok {
  display: inline-flex;
  color: var(--good);
}

/* a fixed name column keeps the log lines in one column across rows */
.build-ident {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 150px;
  min-width: 90px;
}

.build-name {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-kind {
  flex: none;
  height: 14px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  line-height: 12px;
  color: var(--ink-muted);
}

/* a declared port shared with another queue project - same "!" as the
   terminal's untracked-usage mark */
.build-conflict {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--warn);
}

.build-conflict svg {
  width: 12px;
  height: 12px;
}

/* the one log line: replaced in place, never stacked */
.build-log {
  flex: 1;
  min-width: 60px;
  font-size: 10.5px;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-log.muted {
  color: var(--ink-muted);
}

.build-log.good {
  color: var(--good);
}

.build-log.bad {
  color: var(--bad);
}

/* stdin for a run program while it runs */
.build-stdin {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 130px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-sunken);
}

.build-stdin::before {
  content: '\203A';
  margin-right: 5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

.build-stdin input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
}

.build-stdin input::placeholder {
  color: var(--ink-muted);
}

/* declared ports as chips; the dot says what listens there */
.build-ports {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.build-port {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 2px 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-secondary);
}

/* several ports fold into one chip: a dot per port, the count, a caret;
   the chip opens the list below */
.build-port.multi {
  padding: 0 5px 0 7px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background 100ms ease;
}

.build-port.multi:hover {
  background: var(--hover);
}

/* open: the chip becomes the head of the list under it */
.build-port.multi.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--surface-raised);
}

.build-port.multi svg {
  width: 10px;
  height: 10px;
  color: var(--ink-muted);
}

.build-port-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.build-port-dot.live {
  background: var(--good);
  opacity: 1;
}

.build-port-dot.foreign {
  background: var(--warn);
  opacity: 1;
}

/* the list a multi-port chip opens: it continues the chip downward (same
   border, same surface, no gap), one ":port" per line */
.build-port-list {
  position: fixed;
  z-index: 96;
  border: 1px solid var(--line);
  border-radius: 4px;
  border-top-right-radius: 0;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.build-port-row {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 2px 0 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-secondary);
}

.build-port-row + .build-port-row {
  border-top: 1px solid var(--line);
}

.build-port-row:hover {
  background: var(--hover);
}

.build-port-row .build-port-text {
  flex: 1;
}

/* the line fits the chip's width exactly for a four digit port */
.build-port-row .build-port-open,
.build-port-row .build-port-stop {
  width: 13px;
}

.build-port-row .build-port-dot {
  width: 5px;
  height: 5px;
  margin-right: 1px;
}

/* frees whatever listens on that port; nothing to free, nothing to press */
.build-port-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--bad);
  cursor: pointer;
  transition: background 100ms ease;
}

.build-port-stop svg {
  width: 10px;
  height: 10px;
}

.build-port-stop:hover {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.build-port-stop:disabled {
  opacity: 0.3;
  cursor: default;
}

/* the address copies on click and selects on drag; "Copied" takes the same
   cell for a moment so nothing shifts */
.build-port-text {
  display: grid;
  cursor: pointer;
  user-select: text;
}

.build-port-text > span {
  grid-area: 1 / 1;
}

.build-port-copied {
  visibility: hidden;
  color: var(--good);
}

.build-port.copied .build-port-addr {
  visibility: hidden;
}

.build-port.copied .build-port-copied {
  visibility: visible;
}

/* the way to the browser, always on the chip */
.build-port-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.build-port-open svg {
  width: 11px;
  height: 11px;
}

.build-port-open:hover {
  background: var(--hover-strong);
  color: var(--ink);
}

.build-port-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
  opacity: 0.55;
}

.build-port.live .build-port-dot {
  background: var(--good);
  opacity: 1;
}

.build-port.foreign .build-port-dot {
  background: var(--warn);
  opacity: 1;
}

.build-port.conflict {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}

.build-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

.build-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, opacity 100ms ease;
}

.build-act:hover {
  background: var(--hover-strong);
  color: var(--ink);
}

.build-act:disabled {
  opacity: 0.35;
  cursor: default;
}

.build-act.stop {
  color: var(--bad);
}

.build-act.stop:hover {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
}

.build-act.more {
  opacity: 0;
}

.build-row:hover .build-act.more,
.build-row.menu-open .build-act.more {
  opacity: 1;
}

/* the row menu: everything a row can do beyond build and stop */
.build-menu {
  min-width: 232px;
}

.ctx-label {
  padding: 5px 16px 3px;
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.ctx-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-item:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ------------------------------------------------------ phase/model menu */

.phase-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.phase-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 7px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--term-fg-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}

.phase-btn:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.phase-btn.open {
  background: var(--term-selected);
  color: var(--term-fg);
}

/* the account cell on a model row: which linked subscription account of
   the row's provider a run on it goes out on, at the row's right end; a
   click steps to the next account and leaves the list open. While Autopilot
   pools the runs it is a plain word, not a control. */
.account-cell {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--term-fg-secondary);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}

.account-cell:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.account-cell.pooled:hover {
  background: none;
  color: var(--term-fg-secondary);
}

/* the tick keeps a fixed slot after the cell, so the cells of ticked and
   unticked rows stand in one column */
.model-row .account-cell + .tick {
  margin-left: 0;
  padding-left: 8px;
  /* the 11px check plus its gap, border-box: the same slot with or without it */
  width: 20px;
  justify-content: flex-end;
}

/* the hover card behind an orchestrator cell: the account in full */
.account-card {
  position: fixed;
  z-index: 96;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  pointer-events: none;
  animation: term-pop-in 160ms var(--term-ease-out) both;
}

/* the terminal picker's section rows under the models: a label, the
   current value at the right, a chevron; the row opens its side list */
.phase-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--term-line);
}

.phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms;
}

.phase-row:hover,
.phase-row.open {
  background: var(--term-field);
}

.phase-row.inert {
  cursor: default;
}

.phase-row.inert:hover {
  background: none;
}

.phase-row-value {
  margin-left: auto;
  color: var(--term-fg-secondary);
  font-size: 12px;
}

.phase-row svg {
  flex: none;
  color: var(--term-fg-secondary);
}

/* the side list a line item opens: the effort ladder, or the accounts */
.phase-sub {
  min-width: 180px;
}

.phase-sub.account {
  min-width: 268px;
}

.phase-sub.models {
  min-width: 200px;
}

/* the Add Models list's search: a bare line over the models with a hairline
   under it, never a boxed field; the caret alone shows focus */
.model-search {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 9px;
  border: none;
  border-bottom: 1px solid var(--term-line);
  outline: none;
  background: transparent;
  color: var(--term-fg);
  font: inherit;
  font-size: 12.5px;
}

.model-search::placeholder {
  color: var(--term-fg-secondary);
}

.model-search-empty {
  padding: 7px 9px;
  color: var(--term-fg-secondary);
  font-size: 12px;
}

/* an account in the list is a row of lines, never a card: its own class,
   away from the bordered .account-row cards in Settings, and the tick
   alone marks the one in use so nothing reads as a box inside the list */
.phase-sub .account-pick {
  align-items: flex-start;
}

/* beats .model-row.selected on purpose: an account in use is marked by its
   tick, so no row in the list is ever a filled box */
.phase-sub .account-pick.selected {
  background: none;
}

.phase-sub .account-pick.selected:hover {
  background: var(--term-field);
}

.account-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.account-detail-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.account-detail-plan {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--term-fg-secondary);
}

.account-detail-name {
  font-size: 12.5px;
  color: var(--term-fg);
}

.account-detail-off {
  font-size: 11px;
  color: var(--term-fg-muted);
}

.account-detail-off.warn {
  color: var(--term-warn);
}

.account-detail-win {
  font-size: 11px;
  font-weight: 500;
  color: var(--term-fg-secondary);
  white-space: nowrap;
}

.account-detail-win .usage-cell-label {
  min-width: 18px;
}

.account-detail-win .usage-cell-bar {
  width: 56px;
}

.account-detail-reset {
  color: var(--term-fg-muted);
}

/* reasoning effort - color-coded so the level reads at a glance */
.effort {
  --effort-color: var(--ink-muted);
  font-size: 10px;
  font-weight: 600;
  color: var(--effort-color);
  border: 1px solid color-mix(in srgb, var(--effort-color) 45%, transparent);
  border-radius: 4px;
  padding: 0.5px 3.5px;
  line-height: 1.3;
}

/* one neutral tone for every level - the pill never carries a color scale */
.effort { --effort-color: var(--ink-secondary); }
.terminal .effort,
.orch-effort { --effort-color: var(--term-fg-secondary); }

/* the level is a smaller face than the model name beside it, so centering
   the two boxes leaves its text riding about a pixel above the name's
   baseline. The nudge puts the two words on one line, which is what reads
   as "the level, beside the model". */
.phase-btn .effort {
  position: relative;
  top: 1px;
}

/* in the terminal the pill reads as a soft tinted chip, not a ruled box -
   and the orchestrator's pickers show a level in exactly that chip, so one
   level is written and drawn one way across the app */
.terminal .effort,
.orch-effort {
  border: none;
  border-radius: 999px;
  padding: 1.5px 7px;
  background: color-mix(in srgb, var(--effort-color) 12%, transparent);
  font-family: var(--term-font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* placed by floating.ts (fixed, over the shell root, inside the window) */
.phase-pop {
  position: fixed;
  z-index: 95;
  min-width: 224px;
  padding: 4px;
  border: none;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  animation: term-pop-in 200ms var(--term-ease-out) both;
  transform-origin: top left;
}

.phase-pop[data-side='above'] {
  transform-origin: bottom left;
}

.model-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms;
}

.model-row:hover {
  background: var(--term-field);
}

/* the picked model reads like the reference: soft selected fill, check at
   the right edge */
.model-row.selected {
  background: var(--term-selected);
}

.model-row .tick {
  margin-left: auto;
  padding-left: 14px;
  flex: none;
  display: inline-flex;
  color: var(--term-fg);
}

/* menu rows carry a larger mark, closer to the reference dropdown */
.model-row .model-mark svg {
  width: 15px;
  height: 15px;
}

/* provider logomark in the phase/model pickers - monochrome ink, same as
   the row text: professional, no brand tints in menus */
.model-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--term-fg);
}

/* the app's own mark, standing where a provider logo stands: Auto is
   Warshall picking, so it is Warshall's W that belongs beside it */
.cw-mark {
  justify-content: center;
  min-width: 12px;
  color: var(--term-fg-secondary);
}

.cw-mark svg {
  width: 12px;
  height: 12px;
}

.spacer {
  flex: 1;
}

/* -------------------------------------------------------- tracker button */

.tracker-anchor {
  position: relative;
}

.projection {
  position: absolute;
  top: 40px;
  right: -60px;
  width: 560px;
  height: 350px;
  z-index: 90;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  pointer-events: none;
  transform-origin: top right;
  transform: perspective(1200px) rotateX(4deg);
  animation: project-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes project-in {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateX(14deg) scale(0.9);
  }
}

.projection::before {
  /* the beam - light cast from the button onto the "wall" */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    200deg,
    rgba(255, 255, 255, 0.14),
    transparent 38%
  );
  pointer-events: none;
}

.projection-inner {
  width: 1600px;
  height: 1000px;
  transform: scale(0.35);
  transform-origin: top left;
}

.projection-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 2;
  font-size: 10.5px;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- layout */

/* sidebar spans the full window height; the top bar lives inside main-col */
.shell-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.workbench {
  flex: 1;
  min-height: 0;
  display: flex;
}

.sidebar {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 232px;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
  padding: 8px;
  overflow: hidden;
  font-size: 12px;
}

/* the tree scrolls, not the sidebar - keeps the resizer pinned full-height.
   Named explorer-tree, never bare .tree: the WorkMap diagram also has a .tree
   and a leaked overflow once turned it into a nested scroller */
.explorer-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}

.sidebar-resizer:hover,
.sidebar-resizer:active {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.sidebar.collapsed {
  width: 44px;
  padding: 8px 8px;
}

/* the head row is the top bar's 44px; the search box below it sits centred
   on the editor's tab strip next door (26px box in the 34px band) */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sidebar.collapsed .sidebar-head {
  justify-content: center;
  margin-bottom: 0;
}

.sidebar h5 {
  margin: 0 0 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* one row shape for both file trees: the explorer's, and the review
   window's changed-file rail (they are the same thing to a reader) */
:is(.sidebar, .rv-tree) .entry {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 24px;
  padding-right: 8px;
  border: none;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.rv-tree .entry {
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.sidebar, .rv-tree) .entry:hover {
  background: var(--hover);
  color: var(--ink);
}

:is(.sidebar, .rv-tree) .entry.active {
  background: var(--selected);
  color: var(--ink);
}

/* fixed-width twist slot keeps folder and file names on one grid */
.entry-twist {
  flex: none;
  width: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

.entry-twist svg {
  width: 11px;
  height: 11px;
}

.entry-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
}

:is(.sidebar, .rv-tree) .entry:hover .entry-icon,
:is(.sidebar, .rv-tree) .entry:hover .entry-twist {
  color: var(--ink-secondary);
}

/* root row - the project itself, VS Code style, with the new file/folder
   actions on its right (shown while the explorer is hovered) */
.sidebar .entry.root {
  height: 28px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.root-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-actions {
  display: none;
  gap: 2px;
  margin-left: auto;
}

.sidebar:hover .root-actions {
  display: inline-flex;
}

.root-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
}

.root-action:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

/* new-file/new-folder glyphs fill the action button */
.root-action svg {
  width: 24px;
  height: 24px;
}

/* generated/vendored resources - de-emphasized like VS Code */
.sidebar .entry.dim {
  opacity: 0.55;
}

/* rows picked with Ctrl and Shift clicks; the open file keeps its own mark */
.sidebar .entry.selected {
  background: var(--hover-strong);
  color: var(--ink);
}

.sidebar .entry.selected.active {
  background: var(--selected);
}

/* a row waiting for Paste after Cut */
.sidebar .entry.cut {
  opacity: 0.5;
}

/* the folder a drag of rows would land in */
.sidebar .entry.drop-target {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* the Search in Files switch sits beside the collapse toggle */
.sidebar-view-btn {
  margin-left: auto;
  margin-right: 2px;
}

.sidebar-view-btn.on {
  background: var(--selected);
  color: var(--ink);
}

/* ---------------------------------------------------------- search in files */
.search-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.search-fields {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.search-replace-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.search-replace-toggle:hover {
  background: var(--hover);
  color: var(--ink);
}

.search-replace-toggle svg {
  width: 11px;
  height: 11px;
}

.search-field-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 26px;
  padding: 0 2px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}

.search-field:focus-within {
  border-color: var(--ink-muted);
}

.search-field .ed-find-opt {
  flex: none;
  height: 20px;
  min-width: 20px;
  padding: 0 2px;
  font-size: 10.5px;
}

.search-field-stack .search-field {
  min-width: 0;
  overflow: hidden;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.search-input::placeholder {
  color: var(--ink-muted);
}

.search-input.boxed {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}

.search-input.boxed:focus {
  border-color: var(--ink-muted);
}

.search-filters-toggle {
  align-self: flex-end;
  height: 16px;
  margin-top: 2px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  line-height: 12px;
  cursor: pointer;
}

.search-filters-toggle:hover,
.search-filters-toggle.open {
  background: var(--hover);
  color: var(--ink);
}

.search-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 0 20px;
}

.search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin: 6px 4px 2px 20px;
  font-size: 11px;
  color: var(--ink-muted);
}

.search-summary .bad {
  color: var(--bad);
}

.search-results-tree {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar .search-file-row .hit-name {
  flex: none;
}

.sidebar .search-file-row .hit-dir {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--ink-muted);
}

.search-count {
  flex: none;
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--hover-strong);
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
  color: var(--ink-secondary);
}

.sidebar .entry.search-match {
  padding-left: 36px;
}

.search-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.search-preview mark {
  border-radius: 2px;
  background: color-mix(in srgb, var(--warn) 30%, transparent);
  color: inherit;
}

.search-preview mark.strike {
  background: color-mix(in srgb, var(--bad) 20%, transparent);
  text-decoration: line-through;
}

.search-new {
  border-radius: 2px;
  background: color-mix(in srgb, var(--good) 25%, transparent);
}

.search-row-action {
  display: none;
  flex: none;
  height: 18px;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.sidebar .entry:hover .search-row-action {
  display: inline-flex;
  align-items: center;
}

.search-row-action:hover {
  color: var(--ink);
}

/* inline new-file/new-folder row */
.entry-input {
  flex: 1;
  min-width: 0;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.entry-input:focus {
  border-color: var(--accent);
}

.editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* flat tab strip - sunken rail, hairline separators, active tab merges
   seamlessly into the code surface below (no radii, no floating borders) */
.tab-strip {
  position: relative;
  flex: none;
}

.editor-tabs {
  display: flex;
  height: 34px;
  background: var(--surface-sunken);
  /* no tab limit - the strip scrolls sideways on the overlay thumb below */
  overflow-x: auto;
  overflow-y: hidden;
}

/* the native bar reserved a row under the tabs - the overlay thumb rides
   on the tabs instead, so the strip never grows a gap */
.editor-tabs::-webkit-scrollbar {
  display: none;
}

/* slim bar riding over the bottom of the tab strip */
.osb-tabs {
  left: 2px;
  right: 2px;
  bottom: 1px;
  height: 6px;
}

.tab-strip:hover .osb {
  opacity: 1;
}

.editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 12px;
  min-width: 120px;
  flex: none;
  font-size: 12px;
  color: var(--ink-muted);
  border: none;
  border-right: 1px solid var(--line);
  background: none;
  cursor: pointer;
  user-select: none;
  /* hairline under inactive tabs closes the strip against the code area */
  box-shadow: inset 0 -1px 0 var(--line);
}

.editor-tab:hover {
  color: var(--ink-secondary);
}

.editor-tab.active {
  color: var(--ink);
  background: var(--surface-raised);
  /* graphite keyline along the bottom marks the active tab */
  box-shadow: inset 0 -1.5px 0 var(--accent);
}

/* insertion marker while dragging a tab to a new position */
.editor-tab.drag-over {
  box-shadow: inset 2px 0 0 var(--accent);
}

.tab-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
}

.editor-tab.active .tab-icon {
  color: var(--ink-secondary);
}

/* close affordance - always reserved so tabs don't shift, shown on the
   active tab and on hover like VS Code */
.tab-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  opacity: 0;
}

.editor-tab.active .tab-close,
.editor-tab:hover .tab-close {
  opacity: 1;
}

.tab-close:hover {
  background: var(--hover);
  color: var(--ink);
}

.editor-tab.active .tab-close:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* the × reads a step larger than the 12px icon default */
.tab-close svg {
  width: 18px;
  height: 18px;
}

/* the strip's empty remainder still needs the closing hairline */
.editor-tabs::after {
  content: '';
  flex: 1;
  box-shadow: inset 0 -1px 0 var(--line);
}

/* the code editor (CodeMirror, CodeEditor.tsx) dressed in the shell's own
   surfaces, font, gutter and caret; the rules sit under .code-area .ws-ed so
   they outrank CodeMirror's injected base theme */
.code-area {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--surface-raised);
  --ed-size: var(--ed-font-size, 13px);
  --ed-lh: var(--ed-line-height, 20px);
}

.code-scroll {
  height: 100%;
}

.code-area .ws-ed {
  height: 100%;
  background: var(--surface-raised);
  color: var(--ed-fg, var(--ink));
  font-size: var(--ed-size);
}

.code-area .ws-ed.cm-focused {
  outline: none;
}

.code-area .ws-ed .cm-scroller {
  font-family: var(--ed-font, var(--font-mono));
  line-height: var(--ed-lh);
  letter-spacing: normal;
  overflow: auto;
}

/* native bars hidden - the overlay thumbs replace them */
.code-area .ws-ed .cm-scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.code-area .ws-ed .cm-content {
  padding: 16px 0;
  caret-color: transparent;
}

.code-area .ws-ed .cm-line {
  padding: 0 24px 0 2px;
}

.code-area .ws-ed .cm-gutters {
  background: var(--surface-raised);
  color: var(--ed-gutter, var(--ink-muted));
  border: none;
  user-select: none;
}

.code-area .ws-ed .cm-lineNumbers .cm-gutterElement {
  min-width: 42px;
  padding: 0 4px 0 0;
  text-align: right;
}

.code-area .ws-ed .cm-activeLineGutter {
  background: transparent;
  color: var(--ink-secondary);
}

.code-area .ws-ed .cm-activeLine {
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
}

/* the fold chevrons show while the pointer is over the gutter, open ones
   always, as in VS Code */
.code-area .ws-ed .cm-foldGutter .cm-gutterElement {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  padding: 0;
  color: var(--ink-muted);
  cursor: pointer;
}

.cm-fold-marker {
  display: inline-flex;
  transition: opacity 120ms ease;
}

.cm-fold-marker.open svg {
  transform: rotate(90deg);
}

.code-area .ws-ed .cm-gutters .cm-fold-marker.open {
  opacity: 0;
}

.code-area .ws-ed .cm-gutters:hover .cm-fold-marker.open {
  opacity: 1;
}

.code-area .ws-ed .cm-foldPlaceholder {
  margin: 0 3px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--hover);
  color: var(--ink-secondary);
  font-size: calc(var(--ed-size) - 2px);
}

/* drawn caret - a 2px bar a step shorter than the line, like before */
.code-area .ws-ed .cm-cursor,
.code-area .ws-ed .cm-dropCursor {
  border-left: 2px solid var(--ed-fg, var(--ink));
  margin-left: -1px;
}

.code-area .ws-ed .cm-cursor {
  height: calc(var(--ed-lh) - 2px) !important;
  margin-top: 1px;
}

.code-area .ws-ed .cm-selectionBackground,
.code-area .ws-ed.cm-focused .cm-selectionBackground,
.code-area .ws-ed .cm-content ::selection {
  background: color-mix(in srgb, var(--ed-link, var(--accent)) 28%, transparent) !important;
}

/* the identifier under the caret, every occurrence softly boxed
   (IntelliJ's highlight usages) */
.code-area .ws-ed .cm-selectionMatch {
  border-radius: 2px;
  background: color-mix(in srgb, var(--ed-fg, var(--ink)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ed-fg, var(--ink)) 24%, transparent);
}

.code-area .ws-ed .cm-matchingBracket {
  background: color-mix(in srgb, var(--ed-fg, var(--ink)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ed-fg, var(--ink)) 32%, transparent);
  border-radius: 2px;
}

.code-area .ws-ed .cm-nonmatchingBracket {
  color: var(--bad);
}

.code-area .ws-ed .cm-searchMatch {
  border-radius: 2px;
  background: color-mix(in srgb, var(--warn) 28%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent);
}

.code-area .ws-ed .cm-searchMatch-selected,
.code-area .ws-ed .cm-searchMatch-selected * {
  background: color-mix(in srgb, var(--warn) 55%, transparent);
}

/* Ctrl held over an identifier: it reads as a link to its definition */
.code-area .ws-ed .cm-nav-link {
  text-decoration: underline;
  cursor: pointer;
  color: var(--ed-link, var(--accent));
}

.code-area .ws-ed .cm-line.walk {
  background: rgba(96, 165, 250, 0.28);
}

.code-area .ws-ed .cm-line.flash {
  background: var(--ed-flash, color-mix(in srgb, var(--accent) 18%, transparent));
  transition: background 400ms ease;
}

.code-area .ws-ed .cm-panels {
  background: transparent;
  border: none;
  color: var(--ink);
}

/* Vim's command line along the bottom */
.code-area .ws-ed .cm-vim-panel {
  padding: 2px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-sunken);
}

.code-area .ws-ed .cm-vim-panel input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.code-area .ws-ed .cm-fat-cursor {
  background: color-mix(in srgb, var(--ed-fg, var(--ink)) 45%, transparent) !important;
}

/* the blame column, left of the line numbers */
.code-area .ws-ed .cm-blame-gutter .cm-gutterElement {
  width: 188px;
  padding: 0 12px 0 10px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 11px;
  white-space: pre;
  text-overflow: ellipsis;
  color: var(--ink-muted);
  cursor: pointer;
}

.code-area .ws-ed .cm-blame-gutter .cm-gutterElement:hover {
  color: var(--ink);
}

/* suggestions while typing: the explorer menu's dress (5px shell, rows
   inset 4px), a kind glyph in the syntax color, the label in the editor's
   face with the typed letters in full ink, the detail on the right */
.ws-ed .cm-tooltip.cm-tooltip-autocomplete {
  padding: 4px 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.ws-ed .cm-tooltip.cm-tooltip-autocomplete > ul {
  min-width: 260px;
  max-width: min(520px, 90vw);
  max-height: 264px;
  font-family: var(--ed-font, var(--font-mono));
  font-size: 12px;
}

.ws-ed .cm-tooltip.cm-tooltip-autocomplete > ul > li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 0 4px;
  padding: 0 10px 0 6px;
  border-radius: 4px;
  line-height: 24px;
  color: var(--ink-secondary);
}

.ws-ed .cm-tooltip.cm-tooltip-autocomplete > ul > li:hover {
  background: var(--hover);
}

.ws-ed .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--selected);
  color: var(--ink);
}

.ws-ed .cm-tooltip-autocomplete .cm-completionLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.ws-ed .cm-tooltip-autocomplete .cm-completionMatchedText {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.ws-ed .cm-tooltip-autocomplete .cm-completionDetail {
  flex: 0 1 auto;
  max-width: 45%;
  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  color: var(--ink-muted);
}

/* kind glyphs: one stroke drawing each, masked so the syntax color fills it;
   a word from the file has no kind and shows the text glyph */
.ws-ed .cm-tooltip-autocomplete .cm-completionIcon {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.25 3.75h9.5M8 3.75v8.5'/%3E%3C/svg%3E");
  flex: none;
  width: 14px;
  height: 14px;
  padding: 0;
  opacity: 1;
  box-sizing: border-box;
  background: currentColor;
  color: var(--ink-muted);
  -webkit-mask: var(--glyph) center / 14px 14px no-repeat;
  mask: var(--glyph) center / 14px 14px no-repeat;
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon::after {
  content: none;
}

.ws-ed .cm-tooltip-autocomplete :is(.cm-completionIcon-function, .cm-completionIcon-method) {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75 13.75 4.9v6.2L8 14.25 2.25 11.1V4.9z'/%3E%3Cpath d='M2.25 4.9 8 8l5.75-3.1M8 8v6.25'/%3E%3C/svg%3E");
  color: var(--tk-fn, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-variable {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 3.25h-2v9.5h2M11.25 3.25h2v9.5h-2'/%3E%3Crect x='5.75' y='6.25' width='4.5' height='3.5' rx='.75'/%3E%3C/svg%3E");
  color: var(--tk-prop, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-property {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='4.25' width='7.5' height='7.5' rx='1.25'/%3E%3Cpath d='M9.75 8h4'/%3E%3C/svg%3E");
  color: var(--tk-prop, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-class {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='5.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='1.75' width='4.5' height='4.5' rx='1'/%3E%3Crect x='9.75' y='9.75' width='4.5' height='4.5' rx='1'/%3E%3Cpath d='M6.25 8H8m0-4v8m0-8h1.75M8 12h1.75'/%3E%3C/svg%3E");
  color: var(--tk-type, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-interface {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.75' cy='8' r='3'/%3E%3Cpath d='M1.75 8h6'/%3E%3C/svg%3E");
  color: var(--tk-type, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-type {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.5' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M6.5 6.5v7'/%3E%3C/svg%3E");
  color: var(--tk-type, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-enum {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='2.25' width='8' height='6' rx='1'/%3E%3Cpath d='M4 5.25h3.5M5.75 10.75v2a1 1 0 0 0 1 1h6.5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-1.5'/%3E%3C/svg%3E");
  color: var(--tk-type, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-constant {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.25' width='12' height='9.5' rx='1.5'/%3E%3Cpath d='M5 6.75h6M5 9.25h6'/%3E%3C/svg%3E");
  color: var(--tk-const, var(--tk-type, var(--ink-secondary)));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-keyword {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5h6.5M11 4.5h3M2 8h3M7.5 8H14M2 11.5h12'/%3E%3C/svg%3E");
  color: var(--tk-kw, var(--ink-secondary));
}

.ws-ed .cm-tooltip-autocomplete .cm-completionIcon-namespace {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h-.75A1.5 1.5 0 0 0 3.75 4v2.25L2.25 8l1.5 1.75V12a1.5 1.5 0 0 0 1.5 1.5H6M10 2.5h.75A1.5 1.5 0 0 1 12.25 4v2.25L13.75 8l-1.5 1.75V12a1.5 1.5 0 0 1-1.5 1.5H10'/%3E%3C/svg%3E");
  color: var(--tk-type, var(--ink-secondary));
}

.cm-tooltip.cm-completionInfo {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-raised);
  color: var(--ink-secondary);
  font-size: 12px;
  box-shadow: var(--shadow-pop);
}

/* Emmet's expansion preview */
.cm-tooltip.emmet-preview,
.cm-tooltip .emmet-preview {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  box-shadow: var(--shadow-pop);
}

/* files dragged in from the desktop */
.editor.file-drop .code-area,
.editor.file-drop .code-view.empty,
.editor.file-drop .editor-preview {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.code-view {
  margin: 0;
  padding: 16px 24px 16px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: normal;
  tab-size: 4;
  min-height: 100%;
}

.code-view.empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  background: var(--surface-raised);
}

/* ------------------------------------------------- editor file previews */

/* rendered views behind file tabs: images, PDFs, SVG and markdown */
.editor-preview {
  flex: 1;
  min-height: 0;
  background: var(--surface-raised);
}

.editor-preview.image,
.editor-preview.svg {
  display: flex;
  overflow: hidden;
}

/* an image or SVG tab (ImagePreview.tsx): the zoom cluster in the top left
   corner over a scroller holding the image, fitted until a zoom is picked */
.image-view {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.editor-zoom.image-zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  float: none;
}

.image-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-zoom button:disabled,
.image-zoom button:disabled:hover {
  background: none;
  color: var(--ink-muted);
  opacity: 0.5;
  cursor: default;
}

.image-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  padding: 18px;
}

.image-scroll.zoomed {
  overflow: auto;
}

/* a zoomed image larger than the pane moves with a drag, like a hand tool */
.image-scroll.pannable {
  cursor: grab;
}

.image-scroll.panning {
  cursor: grabbing;
  user-select: none;
}

/* margin auto centers the image while it fits and lets a larger one scroll
   from its own edge, where flex centering would cut the left and top off */
.image-scroll img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.image-scroll.zoomed img {
  flex: none;
  max-width: none;
  max-height: none;
}

.editor-preview.pdf {
  display: flex;
  min-height: 0;
}

.editor-preview.notebook {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------ in-app PDF viewer */

/* pdf.js under a toolbar with Chromium's control set (sidebar, title,
   page n / N, zoom cluster, fit, rotate, download, print) wearing the
   shell's tokens - the built-in viewer's frame is unstylable */
.pdfv {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
}

.pdfv-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.pdfv-title {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
}

.pdfv-center {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdfv-right {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.pdfv-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
  transition:
    background-color 150ms,
    color 150ms;
}

.pdfv-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.pdfv-page {
  width: 36px;
  height: 22px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
}

.pdfv-page:focus {
  outline: none;
  border-color: var(--accent);
}

.pdfv-count {
  margin-left: 2px;
  font-size: 11.5px;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.pdfv-sep {
  width: 1px;
  height: 18px;
  margin: 0 8px;
  background: var(--line-strong);
}

.pdfv-percent {
  min-width: 38px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.pdfv-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.pdfv-side {
  flex: none;
  width: 148px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
}

.pdfv-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.pdfv-thumb canvas {
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.pdfv-thumb.current canvas {
  border-color: var(--accent);
}

.pdfv-thumb span {
  font-size: 10.5px;
  color: var(--ink-muted);
}

.pdfv-thumb.current span {
  color: var(--ink);
  font-weight: 600;
}

.pdfv-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: safe center;
  gap: 16px;
  padding: 24px;
}

.pdfv-page-host {
  flex: none;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.08);
}

.editor-preview.markdown {
  position: relative;
  overflow-y: auto;
  padding: 20px 26px;
}

/* zoom cluster riding the rendered markdown's top right corner */
.editor-zoom {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.editor-zoom button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.editor-zoom button:hover {
  background: var(--hover);
  color: var(--ink);
}

.editor-zoom-level {
  min-width: 38px;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* document-grade markdown reading view - a .md file, not a PR card, so the
   type is a notch larger and every GFM construct has a real style */
.editor-md {
  max-width: 860px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.editor-md > :first-child {
  margin-top: 0;
}

.editor-md p {
  margin: 8px 0;
}

.editor-md h1,
.editor-md h2,
.editor-md h3,
.editor-md h4,
.editor-md h5,
.editor-md h6 {
  margin: 22px 0 8px;
  line-height: 1.3;
}

.editor-md h1 {
  font-size: 22px;
  padding-bottom: 6px;
}

.editor-md h2 {
  font-size: 18px;
  padding-bottom: 5px;
}

.editor-md h3 {
  font-size: 15px;
}

.editor-md a {
  color: var(--accent);
  text-decoration: none;
}

.editor-md a:hover {
  text-decoration: underline;
}

.editor-md img {
  max-width: 100%;
  border-radius: 6px;
}

.editor-md ul,
.editor-md ol {
  margin: 8px 0;
  padding-left: 24px;
}

.editor-md li {
  margin: 3px 0;
}

.editor-md li > ul,
.editor-md li > ol {
  margin: 3px 0;
}

.editor-md blockquote {
  margin: 10px 0;
  padding: 2px 14px;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-secondary);
}

.editor-md hr {
  margin: 20px 0;
}

.editor-md code {
  font-size: 11.5px;
}

.editor-md pre {
  margin: 10px 0;
  padding: 10px 12px;
  line-height: 1.5;
}

.editor-md pre code {
  padding: 0;
  background: none;
  font-size: 11.5px;
}

.editor-md table {
  display: block;
  max-width: 100%;
  width: max-content;
  margin: 12px 0;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.editor-md th,
.editor-md td {
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}

.editor-md th {
  background: var(--surface-sunken);
  font-weight: 600;
}

.editor-md tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
}

/* GFM task-list glyphs - the shell's own square, never a native checkbox */
.editor-md li:has(> .md-check) {
  list-style: none;
  margin-left: -18px;
}

.md-check {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3.5px;
  background: var(--surface-raised);
}

.md-check.checked {
  border-color: var(--accent);
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.2 8.6 3.2 3.2 6.4-6.8'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}

/* the accent is ink-toned: on dark the box is light, so the glyph flips */
.shell-root[data-theme='dark'] .md-check.checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317181a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.2 8.6 3.2 3.2 6.4-6.8'/%3E%3C/svg%3E");
}

.editor-preview-note {
  padding: 24px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* overlay scrollbar - rides on top of the code, only there on hover/scroll */
.osb {
  position: absolute;
  z-index: 6;
  display: none;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.code-area:hover .osb,
.code-area.scrolling .osb {
  opacity: 1;
}

.osb-v {
  top: 2px;
  right: 2px;
  bottom: 10px;
  width: 6px;
}

.osb-h {
  left: 2px;
  right: 10px;
  bottom: 2px;
  height: 6px;
}

.osb-thumb {
  pointer-events: auto;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.osb-thumb:hover,
.osb-thumb:active {
  background: color-mix(in srgb, var(--ink) 36%, transparent);
}

.osb-v .osb-thumb {
  width: 100%;
}

.osb-h .osb-thumb,
.osb-tabs .osb-thumb {
  height: 100%;
}

/* token tints come from the one editor palette (--tk-*, set on .shell-body
   and .review-window further down) */
:is(.code-view, .ws-ed) .tk-com {
  color: var(--tk-com, var(--ink-muted));
  font-style: var(--tk-com-style, normal);
}

:is(.code-view, .ws-ed) .tk-str {
  color: var(--tk-str, var(--ink-secondary));
}

:is(.code-view, .ws-ed) .tk-kw {
  color: var(--tk-kw, inherit);
}

:is(.code-view, .ws-ed) .tk-num {
  color: var(--tk-num, inherit);
}

:is(.code-view, .ws-ed) .tk-type {
  color: var(--tk-type, inherit);
}

/* SCREAMING_SNAKE_CASE constants - falls back to the type color where a profile
   defines nothing, so only profiles that opt in (IntelliJ) look different. */
:is(.code-view, .ws-ed) .tk-const {
  color: var(--tk-const, var(--tk-type, inherit));
  font-style: var(--tk-const-style, normal);
}

:is(.code-view, .ws-ed) .tk-fn {
  color: var(--tk-fn, inherit);
}

:is(.code-view, .ws-ed) .tk-prop {
  color: var(--tk-prop, inherit);
}

:is(.code-view, .ws-ed) .tk-attr {
  color: var(--tk-attr, inherit);
}

:is(.code-view, .ws-ed) .tk-tag {
  color: var(--tk-tag, inherit);
}

:is(.code-view, .ws-ed) .tk-punc {
  color: var(--tk-punc, inherit);
}

/* token classes the code editor's highlighter adds on top of the shared
   palette above: markdown emphasis */
.code-area .ws-ed .tk-em {
  font-style: italic;
}

.code-area .ws-ed .tk-strong {
  font-weight: 600;
}

.code-area .ws-ed .tk-strike {
  text-decoration: line-through;
}

/* status strip: file language on the left; the cursor, indentation,
   encoding and line ending, then the project language and detected
   toolchain (JDK/Python/Node - zero setup) on the right */
.editor-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  font-size: 11px;
  color: var(--ink-secondary);
}

.status-spacer {
  flex: 1;
}

.status-runtime {
  color: var(--ink-muted);
}

/* "Cannot find declaration to go to" - small callout at the click point */
.nav-toast {
  position: fixed;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  z-index: 90;
  animation: nav-toast-in 140ms ease;
}

@keyframes nav-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% - 4px));
  }
}

/* Ctrl+Click on a symbol with more than one declaration - pick the site.
   Anchored at the click point; dressed like the explorer context menu. */
.def-picker-backdrop {
  position: fixed;
  inset: 0;
  top: var(--titlebar-h);
  z-index: 94;
}

.def-picker {
  position: fixed;
  z-index: 96;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 300px;
  padding: 3px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  box-shadow: var(--shadow-pop);
  animation: nav-toast-in 140ms ease;
}

.def-picker-head {
  padding: 5px 7px 6px;
  font-size: 11px;
  color: var(--ink-secondary);
}

.def-picker-head b {
  color: var(--ink);
  font-weight: 600;
}

.def-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 258px;
  overflow-y: auto;
}

/* thin overlay-style bar, matching the code scrollbars - not the fat native one */
.def-picker-list::-webkit-scrollbar {
  width: 8px;
}

.def-picker-list::-webkit-scrollbar-track {
  background: transparent;
}

.def-picker-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  background-clip: padding-box;
}

.def-picker-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  background-clip: padding-box;
}

.def-site {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 7px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.def-site.active {
  background: var(--selected);
}

.def-site-loc {
  font-size: 11px;
  white-space: nowrap;
}

.def-site-line {
  color: var(--ink-muted);
}

.def-site-preview {
  overflow: hidden;
  font-family: var(--ed-font, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--ink-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------- editor IDE profiles
   The editor look is the same for every project - the profile only chooses
   the explorer's right-click menu. Scoped strictly to .sidebar and .editor -
   terminal and top-bar chrome keep the Warshall design. */

/* the new look slides in over the old one on project swap */
.shell-body[data-editor-profile] .sidebar,
.shell-body[data-editor-profile] .editor {
  animation: pane-slide-ltr 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.shell-body[data-editor-profile][data-swap='rtl'] .sidebar,
.shell-body[data-editor-profile][data-swap='rtl'] .editor {
  animation-name: pane-slide-rtl;
}

@keyframes pane-slide-ltr {
  from {
    transform: translateX(46px);
    opacity: 0.25;
  }
}

@keyframes pane-slide-rtl {
  from {
    transform: translateX(-46px);
    opacity: 0.25;
  }
}

/* Backgrounds stay the shell's own surfaces everywhere (same as the top bar
   and terminal panel) - a profile changes TEXT and NAVIGATION only: syntax
   palette, editor face, selection, tab accent, link color, gutter ink. */

.shell-body[data-editor-profile] .sidebar .entry {
  border-radius: 0;
}

.shell-body[data-editor-profile] .sidebar .entry.active {
  background: var(--ed-sel);
  color: var(--ed-sel-fg);
}

.shell-body[data-editor-profile] .sidebar .entry.active .entry-icon,
.shell-body[data-editor-profile] .sidebar .entry.active .entry-twist {
  color: var(--ed-sel-fg);
}

.shell-body[data-editor-profile] .editor-tab.active {
  box-shadow: inset 0 -2px 0 var(--ed-accent);
}

.shell-body[data-editor-profile] .code-view {
  color: var(--ed-fg);
}

/* the empty-state note is shell chrome, never the profile's code tint */
.shell-body[data-editor-profile] .code-view.empty {
  color: var(--ink-muted);
}

.shell-body[data-editor-profile] .code-view {
  font-family: var(--ed-font, var(--font-mono));
}

/* --- One editor palette for every project ------------------------------
   Colors follow the file's extension through the tokenizer and the
   Appearance code theme (--ctk-*), never the project's IDE profile. Face,
   gutter and selection are the shell's own tokens. --- */

.shell-body,
.review-window {
  --ed-fg: var(--ink);
  --ed-gutter: var(--ink-muted);
  --ed-sel: var(--selected);
  --ed-sel-fg: var(--ink);
  --ed-accent: var(--accent);
  --tk-kw: var(--ctk-kw, #0b5cc4);
  --tk-str: var(--ctk-str, #22863a);
  --tk-com: var(--ctk-com, #6a737d);
  --tk-num: var(--ctk-num, #146e2a);
  --tk-type: var(--ctk-type, #267f99);
  --tk-fn: var(--ctk-fn, #795e26);
  --tk-prop: var(--ctk-prop, #001080);
  --tk-const: var(--ctk-const, #b26a00);
  --tk-attr: var(--ctk-attr, #af00db);
  --tk-tag: var(--ctk-tag, #22863a);
  --tk-punc: var(--ink);
}

/* --- explorer right-click - VS Code's menu dress: squared 5px shell,
   hairline border, flat rows inset 4px with a soft rounded hover fill,
   thin separators. Items stay per-profile (IntelliJ keeps its New ▸). --- */

.ctx-menu,
.ctx-sub,
.ide-popup {
  position: fixed;
  z-index: 95;
  min-width: 192px;
  padding: 4px 0;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  box-shadow: var(--shadow-pop);
  font-size: 12px;
}

.ctx-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 8px);
  height: 26px;
  margin: 0 4px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.ctx-item:hover {
  background: var(--hover);
}

.ctx-item.open {
  background: var(--selected);
}

.ctx-arrow {
  display: inline-flex;
  margin-left: auto;
  margin-right: -6px;
  color: var(--ink-muted);
}

/* slight overlap so the pointer can travel into the submenu */
.ctx-sub {
  position: absolute;
  left: calc(100% - 4px);
  top: -5px;
}

.ctx-sep {
  height: 1px;
  margin: 4px 10px;
  background: var(--line);
}

.ctx-icon {
  display: inline-flex;
  width: 15px;
  justify-content: center;
  color: var(--ink-muted);
}

.ide-popup {
  min-width: 240px;
  padding: 10px;
}

.ide-popup-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.ide-popup-text {
  margin-bottom: 10px;
  color: var(--ink-secondary);
}

.ide-popup-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  outline: none;
}

.ide-popup-input:focus {
  border-color: var(--accent);
}

.ide-kind-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.ide-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ide-kind:hover {
  background: var(--hover);
}

.ide-kind.selected {
  background: var(--ed-sel, var(--surface-sunken));
  color: var(--ed-sel-fg, var(--ink));
}

.ide-popup-error {
  margin-top: 8px;
  color: var(--bad);
  font-size: 12px;
}

.ide-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.ide-btn {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ide-btn:hover {
  background: var(--hover);
}

.ide-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-raised);
}

/* Confirmation: a centered alert over a dimmed scrim. Centered on both
   axes: it was pinned 12vh from the top, which read as off center in a tall
   window and drifted further the taller the window got. A mark tinted by the
   tone, the question and its consequence, then a footer band holding where
   the ask comes from and the two ways out. */
.confirm-scrim {
  position: fixed;
  inset: 0;
  top: var(--titlebar-h);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 16, 18, 0.34);
  backdrop-filter: blur(2px);
  animation: confirm-fade 160ms ease-out;
}

.shell-root[data-theme='dark'] .confirm-scrim {
  background: rgba(0, 0, 0, 0.56);
}

.confirm-dialog {
  width: 420px;
  /* the scrim's own padding is the window margin now */
  max-width: 100%;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 12px 28px -6px rgba(16, 24, 40, 0.14),
    0 32px 72px -12px rgba(16, 24, 40, 0.24);
  /* it holds the focus for Enter and Escape; the buttons show Tab's ring */
  outline: none;
  animation: confirm-pop 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.shell-root[data-theme='dark'] .confirm-dialog {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 28px -6px rgba(0, 0, 0, 0.5),
    0 32px 72px -12px rgba(0, 0, 0, 0.6);
}

.confirm-body {
  display: flex;
  gap: 14px;
  padding: 20px 22px 22px 20px;
}

.confirm-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--hover-strong);
  color: var(--ink-secondary);
}

.confirm-mark svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.4;
}

.confirm-dialog.warning .confirm-mark {
  background: color-mix(in srgb, var(--warn) 13%, transparent);
  color: var(--warn);
}

.confirm-dialog.danger .confirm-mark {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
}

.confirm-text {
  flex: 1;
  min-width: 0;
  /* the title's first line sits level with the middle of the mark */
  padding-top: 7px;
}

.confirm-msg {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.confirm-detail {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.confirm-error {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bad);
}

.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 12px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-sunken) 60%, var(--surface-raised));
}

.confirm-context {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.confirm-btn {
  height: 30px;
  min-width: 76px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
  outline: none;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.confirm-btn:hover {
  background: linear-gradient(var(--hover), var(--hover)), var(--surface-raised);
}

.confirm-btn:focus-visible {
  box-shadow:
    0 0 0 2px var(--surface-raised),
    0 0 0 4px color-mix(in srgb, var(--ink) 28%, transparent);
}

.confirm-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.confirm-btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--surface));
}

.shell-root[data-theme='dark'] .confirm-btn.primary:hover {
  border-color: #ffffff;
  background: #ffffff;
}

.confirm-dialog.danger .confirm-btn.primary {
  border-color: var(--bad);
  background: var(--bad);
  color: #ffffff;
}

.confirm-dialog.danger .confirm-btn.primary:hover {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 88%, #ffffff);
}

@keyframes confirm-fade {
  from {
    opacity: 0;
  }
}

@keyframes confirm-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}

/* --------------------------------------------------- terminal palette */

/* The terminal runs its own token set now - a neutral ink-on-paper scale
   with one blue accent, tinted status pairs and a layered shadow system.
   Every terminal rule is written against the --term-* names. Scoped to the
   terminal containers because the right-click menu is portaled out of the
   card, so it carries the block too. */
.terminal-panel,
.terminal-float,
.terminal-only,
.terminal,
.term-menu,
.remote-menu,
.phase-pop,
.account-card,
.git-squash-pick,
.usage-pop,
.queued-pop {
  --term-bg: #ffffff;
  --term-canvas: #f1f2f3;
  --term-inset: #f7f8f9;
  --term-field: #f2f2f3;
  --term-bar: #ffffff;
  --term-pop: #ffffff;
  --term-band: #f7f8f9;
  --term-fg: #1f2124;
  --term-fg-secondary: #62656b;
  --term-fg-muted: #9a9da3;
  --term-line: #ecedef;
  --term-line-strong: #e0e2e5;
  --term-hover: #f4f5f6;
  --term-hover-2: #e7e9eb;
  --term-selected: #f2f2f3;
  --term-accent: #1f2124;
  --term-accent-strong: #1f2124;
  --term-accent-ink: #1f2124;
  --term-accent-tint: #ededee;
  --term-good: #189a4d;
  --term-good-tint: #e8f5ed;
  --term-warn: #ef720c;
  --term-warn-tint: #fdf1e5;
  --term-bad: #e3474c;
  --term-bad-tint: #fcecec;
  --term-tip-bg: #25272b;
  --term-tip-fg: #f6f7f8;
  --term-tip-border: #3a3c40;
  /* selection stays a translucent accent wash over the text */
  --term-primary: color-mix(in srgb, var(--term-accent) 24%, transparent);
  --term-primary-fg: var(--term-fg);
  --term-shadow-hairline: 0 0 0 1px var(--term-line);
  --term-shadow-btn: 0 0 0 1px var(--term-line-strong), 0 1px 2px rgba(16, 24, 40, 0.05);
  --term-shadow-card: 0 0 0 1px var(--term-line), 0 1px 2px rgba(16, 24, 40, 0.04),
    0 2px 6px rgba(16, 24, 40, 0.03);
  --term-shadow-raised: 0 0 0 1px var(--term-line), 0 2px 10px rgba(0, 0, 0, 0.04);
  --term-shadow-overlay: 0 0 0 1px var(--term-line), 0 8px 28px rgba(0, 0, 0, 0.07);
  /* motion: one strong ease-out for reveals, quick linear-ish micro moves */
  --term-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* the user's Appearance choice leads the stack (--term-font-user, set as an
     inline variable on the shell root); the shipped faces stay as fallbacks */
  --term-font-mono: var(--term-font-user, 'JetBrains Mono'), 'Cascadia Code', 'SF Mono',
    ui-monospace, Consolas, monospace;
  /* the document face for prose, chrome and the input line - files, commands
     and code stay on the mono face */
  --term-font-sans: 'Inter', -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto, sans-serif;
}

.shell-root[data-theme='dark'] :is(.terminal-panel, .terminal-float, .terminal-only, .terminal),
.shell-root[data-theme='dark'] .term-menu,
.shell-root[data-theme='dark'] .remote-menu,
.shell-root[data-theme='dark'] :is(.phase-pop, .account-card, .git-squash-pick, .usage-pop, .queued-pop) {
  --term-bg: #232427;
  --term-canvas: #1c1d1f;
  --term-inset: #1f2022;
  --term-field: #2b2c2f;
  --term-bar: #232427;
  --term-pop: #232427;
  --term-band: #1f2022;
  --term-fg: #f2f3f4;
  --term-fg-secondary: #a5a8ad;
  --term-fg-muted: #6c6f75;
  --term-line: #2e3033;
  --term-line-strong: #3a3c40;
  --term-hover: #2a2b2e;
  --term-hover-2: #313236;
  --term-selected: #2b2c2f;
  --term-accent: #f2f3f4;
  --term-accent-strong: #f2f3f4;
  --term-accent-ink: #f2f3f4;
  --term-accent-tint: rgba(242, 243, 244, 0.14);
  --term-good: #3dbb72;
  --term-good-tint: rgba(61, 187, 114, 0.14);
  --term-warn: #f68f3c;
  --term-warn-tint: rgba(246, 143, 60, 0.14);
  --term-bad: #ee5c61;
  --term-bad-tint: rgba(238, 92, 97, 0.14);
  --term-tip-bg: #111214;
  --term-tip-fg: #f2f3f4;
  --term-tip-border: #2e3033;
  --term-shadow-btn: 0 0 0 1px var(--term-line-strong), 0 1px 2px rgba(0, 0, 0, 0.3);
  --term-shadow-card: 0 0 0 1px var(--term-line), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.2);
  --term-shadow-raised: 0 0 0 1px var(--term-line), 0 2px 10px rgba(0, 0, 0, 0.22);
  --term-shadow-overlay: 0 0 0 1px var(--term-line-strong), 0 8px 28px rgba(0, 0, 0, 0.34);
}

/* Accessible color-vision modes keep steering the terminal's status hues -
   the shell's retuned --good/--warn/--bad lead, tints derive from them */
.shell-root[data-color-vision]
  :is(.terminal-panel, .terminal-float, .terminal-only, .terminal),
.shell-root[data-color-vision] .term-menu {
  --term-good: var(--good);
  --term-good-tint: color-mix(in srgb, var(--good) 13%, transparent);
  --term-warn: var(--warn);
  --term-warn-tint: color-mix(in srgb, var(--warn) 13%, transparent);
  --term-bad: var(--bad);
  --term-bad-tint: color-mix(in srgb, var(--bad) 13%, transparent);
}

/* selection inside the terminal borrows the primary pair, the way the
   emulator's selectionBackground/selectionForeground do */
.terminal ::selection,
.terminal-panel ::selection,
.term-menu ::selection {
  background: var(--term-primary);
  color: var(--term-primary-fg);
}

/* ------------------------------------------------------- terminal panel */

.terminal-panel {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--term-line);
  background: var(--term-canvas);
}

.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 6px;
  z-index: 5;
  cursor: col-resize;
  touch-action: none;
}

.panel-resizer:hover,
.panel-resizer:active {
  background: linear-gradient(90deg, var(--term-accent), var(--term-accent)) center / 3px 100%
    no-repeat;
}

.terminal-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* terminals sit flush against the panel edges - the panel border is their
   border; each slot's height is user-adjustable via the resizer below it */
.stack-slot {
  flex: none;
  min-height: 0;
}

.stack-slot > .terminal {
  height: 100%;
  border: none;
  /* the card's own bottom boundary IS the drag boundary - one line, no
     second rule under it */
  border-bottom: 1px solid var(--term-line-strong);
  border-radius: 0;
}

/* the drag handle straddles that bottom border as an invisible hit strip
   (negative margins cancel its layout height, so the cards sit flush);
   only the pointer resting on it surfaces the accent */
.stack-resizer {
  flex: none;
  position: relative;
  z-index: 6;
  height: 9px;
  margin: -5px 0 -4px;
  cursor: row-resize;
  touch-action: none;
  background: none;
}

.stack-resizer:hover,
.stack-resizer:active {
  background: linear-gradient(var(--term-accent), var(--term-accent)) center / 100% 3px no-repeat;
}

/* compact pill under the stack - a quiet control, no outline, the pill
   surfaces on hover only */
.add-terminal {
  flex: none;
  align-self: center;
  margin: 12px auto;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, box-shadow 150ms;
}

.add-terminal:hover:not(:disabled) {
  color: var(--term-fg);
  background: var(--term-bg);
  box-shadow: var(--term-shadow-btn);
}

/* browser demo: the control is there to be seen, not used */
.add-terminal:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ------------------------------------------------- worktree history list */

.wt-history {
  position: relative;
  display: inline-flex;
}

/* viewport-positioned: it hangs off buttons at the foot of a scrolling
   stack and inside a section head, and neither may clip it */
.wt-pop {
  position: fixed;
  z-index: 96;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
}

.wt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 6px 6px 6px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.wt-row:hover {
  background: var(--hover);
}

.wt-row.current {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.wt-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a checkout without a commit of its own yet: only the state after the colon leans */
.wt-name i {
  font-style: italic;
  color: var(--ink-secondary);
}

/* a fixed slot so names end on one line whether or not the tick is there */
.wt-tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ink);
}

.wt-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.wt-del:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

.wt-empty {
  padding: 8px 9px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- terminal */

.terminal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--term-line);
  border-radius: 10px;
  background: var(--term-bg);
  color: var(--term-fg);
  overflow: hidden;
  /* the whole card speaks the document sans; files, commands and code opt
     back into the mono face where they appear */
  font-family: var(--term-font-sans);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* the same 34px as the editor's tab strip beside it, so the two rules under
   the top bar sit on one line */
.terminal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bar);
}

.terminal-head .usage {
  font-size: 12px;
  font-weight: 500;
  color: var(--term-fg-secondary);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  /* breathing room between the git control and the usage figure */
  margin-left: 8px;
}

/* the % and its (rare) warning mark read as one figure */
.terminal-head .usage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* an account's usage fetch is failing - that plan is out of the pool */
.terminal-head .usage-warn {
  display: inline-flex;
  align-items: center;
  color: var(--term-warn);
}

/* hovering the figure opens the per-plan breakdown: one line per linked
   plan, all of its rate windows side by side on that line */
.terminal-head .usage {
  position: relative;
}

/* placed by floating.ts (fixed, inside the window, above the figure when
   the window is short) */
.usage-pop {
  display: flex;
  position: fixed;
  z-index: 95;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  border: none;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-overlay);
  white-space: nowrap;
  font-weight: 450;
  animation: term-pop-in 200ms var(--term-ease-out) both;
}

/* opened above the figure: the bridge moves to the bottom edge */
.usage-pop[data-side='above']::before {
  top: auto;
  bottom: -8px;
}

/* invisible bridge over the 7px gap so the hover survives the mouse travel */
.usage-pop::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.usage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--term-fg);
}

/* official provider logomark - monochrome ink, matching the menus */
.usage-row-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--term-fg);
}

.usage-row-plan {
  /* wide enough for "pro lite" so the window cells align across rows */
  min-width: 54px;
  color: var(--term-fg-secondary);
}

.usage-row-off {
  color: var(--term-warn);
}

/* one rate window: length tag, tiny remaining bar, % left */
.usage-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.usage-cell-label {
  color: var(--term-fg-muted);
}

.usage-cell-bar {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--term-hover-2);
}

.usage-cell-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--term-accent-strong);
}

.usage-cell-fill.warn {
  background: var(--term-warn);
}

.usage-cell-fill.bad {
  background: var(--term-bad);
}

.tracker-mark {
  color: var(--term-fg-secondary);
}

.tracker-mark:hover {
  color: var(--term-fg);
}

.terminal-head .tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------------------------------------------------- auto git hover view */

.git-menu {
  position: relative;
}

/* while the popup is up, the hover zone quietly reaches a little below the
   control - drifting a few pixels under it must not close the popup. Only
   while open, so a closed control never swallows clicks beneath it. */
.git-menu.open::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 100%;
  height: 16px;
}

/* the remote panel is opened and closed by clicks, so it needs no bridge -
   and an invisible strip under the button would only swallow them */
.remote-menu.open::after {
  content: none;
}

/* The auto git popup's hover body. The card itself (.git-view) clips to its
   rounded corners, which would clip the invisible grace strips too - so the
   fixed positioning and the strips live on this wrapper instead. */
.git-pop {
  position: fixed;
  z-index: 96;
  width: 334px;
}

.git-pop .git-view {
  position: static;
  width: 100%;
}

/* forgiveness under the popup - drifting past its bottom edge (the repo
   number row) must not close it. Invisible, nothing drawn. */
.git-pop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
}

/* the state of a project, beside its name in the switcher's list */
.project-row .state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.project-row .state::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--good);
}

/* reads as a quiet chrome control beside the model picker */
.git-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--term-fg-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}

.git-menu:hover .git-btn {
  background: var(--term-hover);
  color: var(--term-fg);
}

/* the live worktree view - same panel treatment as the usage breakdown.
   Git data (paths, commit subjects) keeps its real case; only the literal
   labels in the markup are caps - so the head's uppercase transform and
   letter-spacing must not leak in here */
.git-view {
  /* fixed in viewport coords like the WorkMap callout - the terminal's
     overflow:hidden and stacking must never clip or cover it; left/top come
     from the button rect, shifted left so the tail sweeps up-right to the
     glyph at the WorkMap angle - never a straight pyramid */
  position: fixed;
  z-index: 96;
  /* matches POP_W in GitStatus.tsx - the head carries four commands */
  width: 334px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
  font-size: 10px;
  font-weight: 400; /* git data is never bold - the head's weight stops here */
  /* grayscale smoothing: subpixel AA renders bright red visibly heavier than
     green at 10px, making the unstaged line look like a different font */
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: normal;
  overflow: hidden; /* the header band respects the rounded corners */
  /* a column so the repository numbers can sit ON the bottom edge: their row
     is the one thing in here that gets clicked twice in a row, and every
     repository draws a picture of a different length above it */
  display: flex;
  flex-direction: column;
}

/* the popup shell is shared with the review window's estimate callout, so
   the terminal's treatment is scoped to the card - the comic shell itself
   (bubble + tail construction) stays exactly as it is. The top bar's Remote
   popup (.remote-menu) wears the same card. */
.terminal .git-view,
.remote-menu .git-view {
  border-color: var(--term-line);
  background: var(--term-pop);
  font-family: var(--term-font-sans);
  font-size: 12px;
  letter-spacing: -0.01em;
}

.terminal .git-view-head,
.remote-menu .git-view-head {
  border-bottom-color: var(--term-line);
  background: var(--term-band);
}

/* the project this panel speaks for, above the Remote head - the whole card
   is about one checkout, so naming it comes before anything it says */
.remote-menu .git-view-project {
  position: relative;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-pop);
}

.remote-menu .git-project-pick {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  color: var(--term-fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.remote-menu .git-project-pick:hover,
.remote-menu .git-project-pick.open {
  background: var(--term-hover);
}

.remote-menu .git-project-pick svg {
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
  align-self: center;
  color: var(--term-fg-muted);
}

.remote-menu .git-project-pick .name,
.remote-menu .git-project-row .name {
  flex: none;
  font-size: 12px;
  font-weight: 600;
}

.remote-menu .git-project-pick .dir,
.remote-menu .git-project-row .dir {
  flex: 1;
  overflow: hidden;
  font-family: var(--term-font-mono);
  font-size: 10.5px;
  color: var(--term-fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* viewport coords, so the card's overflow:hidden cannot cut the list short -
   a project with no repository draws a card barely taller than one row */
.remote-menu .git-project-pop {
  position: fixed;
  z-index: 97;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--term-line-strong);
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.remote-menu .git-project-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--term-fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.remote-menu .git-project-row:hover {
  background: var(--term-hover);
}

.remote-menu .git-project-row.current {
  background: var(--term-selected);
}

.terminal .git-behind,
.remote-menu .git-behind {
  color: var(--term-fg-secondary);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.terminal .git-tail .tail-fill,
.remote-menu .git-tail .tail-fill {
  fill: var(--term-band);
}

/* the tail sinks into whatever the card's top row is: the banded head, or the
   project row where the panel carries one. A band-filled tail against a
   pop-white edge reads as a seam across the join */
.remote-menu.has-picker .git-tail .tail-fill {
  fill: var(--term-pop);
}

.terminal .git-tail .tail-edge,
.remote-menu .git-tail .tail-edge {
  stroke: var(--term-line-strong);
}

/* an empty repository has no rail to draw - one quiet line where it would be */
.git-remote-none {
  padding: 2px 0 4px 17px;
  color: var(--term-fg-muted);
  font-size: 10.5px;
}

/* invisible bridge over the tail gap so the hover survives the mouse travel
   down into the popup; never wider than the popup so it can't sit over (and
   block) the other head controls */
.git-pop::before {
  content: '';
  position: absolute;
  top: -19px;
  left: 0;
  right: 0;
  height: 19px;
}

/* the tail: fill melts into the popup's top edge, apex on the auto button */
.git-tail {
  position: fixed;
  z-index: 97;
  pointer-events: none;
  overflow: visible;
}

/* the tail lands on the header band - its fill must be the band's color so
   the two melt into one shape */
.git-tail .tail-fill {
  fill: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
  stroke: none;
}

.git-tail .tail-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* header-band tint so the tail melts into this variant too */
.git-view-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: var(--term-fg-secondary);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--term-band);
}

/* the way out of the empty state - creates the repository right here */
.git-init-btn {
  margin-left: auto;
  height: 22px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-btn);
  color: var(--term-fg-secondary);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.git-init-btn:hover:not(:disabled) {
  background: var(--term-hover);
  color: var(--term-fg);
}

.git-init-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.git-init-err {
  flex-basis: 100%;
  color: var(--term-warn);
  font-weight: 450;
}

/* header: how far behind the base branch on the left, commands on the right */
.git-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 5px 6px 5px 11px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
}

/* footer: one number per repository behind this worktree, the project first
   and then the nested checkouts that have something of their own */
.git-repos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* held against the popup's bottom edge, so switching repository never
     slides these numbers out from under the cursor that is clicking them */
  margin-top: auto;
  flex: none;
  padding: 4px 8px 4px 6px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
}

.git-repo-nums {
  display: flex;
  align-items: center;
  gap: 2px;
}

.git-repo-num {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.git-repo-num:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.git-repo-num.on {
  background: var(--selected);
  color: var(--term-fg);
}

.git-repo-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
  font-size: 9.5px;
}

.git-repo-eyebrow {
  margin-right: 5px;
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* the branch commands are local only - the head says so before it lists them */
.git-scope {
  flex: none;
  color: var(--ink-secondary);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.git-behind {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.git-cmds {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
}

.git-cmds button {
  height: 22px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-secondary);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.git-cmds button:hover:not(:disabled) {
  background: var(--term-hover);
  color: var(--term-fg);
}

/* a held command keeps its place and says why on hover, right where the
   pointer already is - no cursor trip to a corner of the window */
.git-cmd {
  position: relative;
  display: inline-flex;
}

/* which commits a squash folds, counted from the top: the list hangs off the
   Squash button in both popups, styled like every other list in them */
.git-squash-pick {
  /* placed by floating.ts (fixed, over the shell root, inside the window) */
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--term-line-strong);
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.git-squash-row {
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--term-fg);
  font-family: var(--term-font-sans);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms;
}

.git-squash-row:hover {
  background: var(--term-hover);
}

.git-cmds button.held {
  opacity: 0.45;
  cursor: default;
}

.git-cmd-why {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 1;
  white-space: nowrap;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
  color: var(--ink-secondary);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.git-cmds button:disabled {
  opacity: 0.55;
  cursor: default;
}

.git-view-note {
  padding: 5px 11px 0;
  color: var(--term-fg-muted);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: normal;
}

.git-view-note.warn {
  color: var(--term-warn);
}

/* the command found modified files and Settings > Git says ask: the answer
   sits in this row, under the message */
.git-view-note.asking {
  color: var(--term-fg-secondary);
}

.git-note-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.git-note-choice {
  height: 22px;
  padding: 0 9px;
  border: none;
  border-radius: 7px;
  background: var(--term-field);
  color: var(--term-fg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms;
}

.git-note-choice:hover {
  background: var(--term-hover);
}

.git-note-choice:disabled {
  cursor: default;
  color: var(--term-fg-muted);
}

/* the model is on it: the terminal's "Working…" line, at the note's size */
.git-view-note.working {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--term-fg-secondary);
}

.git-view-note.working::before {
  content: '✻ ';
  white-space: pre;
}

.git-view-note.working .working-verb {
  font-size: 11.5px;
}

/* the change lines carry the Commit message box over them */
.git-changes-block {
  position: relative;
}

/* the box takes the first change line's place while it is open, so an empty
   block still holds its height */
.git-changes-block.typing {
  min-height: 22px;
}

/* the Commit message box: the same raised card the message editor puts over
   a commit row, here over the files it is about */
.git-commit-edit {
  position: absolute;
  top: -1px;
  left: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  padding: 2px 6px;
  border: 1.5px solid var(--git-blue);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}

.git-commit-edit input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--term-fg);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 0;
  outline: none;
}

.git-view-body {
  padding: 7px 9px 8px 11px;
  /* a card capped to the window's room scrolls here */
  min-height: 0;
  overflow-y: auto;
}

/* browser demo: a sync/push result never just appears - the refreshed
   picture rides the same slide the project panes use on a swap */
.git-view-body[data-slide='ltr'] {
  animation: pane-slide-ltr 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.git-view-body[data-slide='rtl'] {
  animation: pane-slide-rtl 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* first fetch of a fresh worktree: body holds a clockwise spinner until the
   commands come back */
.git-view-body.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}

.git-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--term-fg) 15%, transparent);
  border-top-color: var(--term-fg-secondary);
  animation: git-spin 0.8s linear infinite;
}

@keyframes git-spin {
  to {
    transform: rotate(360deg);
  }
}

/* one change bucket = one git-status-style line; no box, hover highlight
   only, full file list on hover (title) - per the mock */
.git-changes {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 2px 6px;
  margin: 0 -4px;
  border-radius: 6px;
  line-height: 1.6;
  font-family: var(--term-font-mono);
  font-size: 11px;
  cursor: default;
}

.git-changes:hover {
  background: var(--term-hover);
}

.git-changes.unstaged {
  color: var(--term-bad);
}

.git-changes.staged {
  color: var(--term-good);
}

.git-changes-text {
  flex: 1; /* pushes the "N more" count to the far right */
  min-width: 0; /* lets the path shrink and take the one ellipsis itself */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* fixed column so both lines' counts start at the exact same x, whatever the
   file names around them do */
.git-changes-more {
  flex: none;
  width: 82px;
  text-align: left;
  white-space: nowrap;
  opacity: 0.75;
  font-size: 10.5px;
}

/* the line opens the worktree's copy of the file in the editor */
.git-changes-text.openable {
  cursor: pointer;
}

/* the line's x: discard that one file's uncommitted changes. Hidden until
   the line is hovered so the summary stays a summary. */
.git-change-x {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: -1px 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms;
}

.git-changes:hover .git-change-x {
  display: flex;
}

.git-change-x:hover {
  background: var(--term-hover);
}

.git-change-x svg {
  width: 11px;
  height: 11px;
}

/* the newest commit's x: undo it back into unstaged changes - same
   hover-reveal rhythm as the change lines */
.git-undo {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--term-fg-secondary);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.git-crow:hover .git-undo {
  display: flex;
}

.git-undo:hover {
  background: var(--term-hover);
  color: var(--term-bad);
}

.git-undo svg {
  width: 11px;
  height: 11px;
}

/* ---- the branch graph: worktree rail curving into the base branch rail */

.git-graph {
  position: relative;
  margin-top: 6px;
}

/* Every commit is drawn (GitStatus), so the graph is as tall as the branch
   is long: it scrolls here rather than growing the popup off the screen. The
   rails are absolute inside .git-graph, so they scroll with their rows. */
.git-graph-scroll {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* the auto git popup keeps its branch blue: the one sanctioned blue outside
   the status palette, kept when the accent went ink-neutral (2026-08-25) */
.git-view {
  --git-blue: #0285ff;
}

.shell-root[data-theme='dark'] .git-view {
  --git-blue: #3d9aff;
}

.git-rail {
  position: absolute;
  width: 2px;
  border-radius: 2px;
}

/* the worktree branch wears the popup's blue, the main branch green */
.git-rail.wt {
  background: var(--git-blue);
}

.git-rail.main {
  background: var(--term-good);
}

.git-fork {
  position: absolute;
  overflow: visible;
}

.git-fork path {
  fill: none;
  stroke: var(--git-blue);
  stroke-width: 2;
  stroke-linecap: round;
}

.git-crow {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 2px;
  border-radius: 5px;
  /* every row opens its commit's changed files in the review window */
  cursor: pointer;
}

/* Translucent band so the rails stay visible through a hovered row, drawn
   from just left of the row's own dot rather than the full width: run out to
   the left edge it paints over the branch picture the popup is here to
   draw. */
.git-crow::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  pointer-events: none;
}

.git-crow.wt::before {
  left: 15px;
}

.git-crow.main::before {
  left: 0;
}

.git-crow:hover::before {
  background: var(--term-hover);
}

/* the band is a positioned pseudo-element, so the row's own content has to be
   positioned too - static content paints UNDER it and the subject vanishes on
   hover (the dot is already absolute, which is why it never did) */
.git-crow-subject,
.git-crow-when,
.git-crow-edit,
.git-undo {
  position: relative;
}

.git-crow:focus-visible {
  outline: none;
}

.git-crow:focus-visible::before {
  background: var(--term-hover);
  box-shadow: inset 0 0 0 1px var(--term-line-strong);
}

.git-crow.wt {
  padding-left: 37px;
}

.git-crow.main {
  padding-left: 17px;
}

/* the newest commit takes a message edit on a double click - the rest of
   the graph is read only, since rewording an older commit rewrites every id
   above it. A single click still opens it, like any other row, so the row
   keeps the pointer: a text caret over it would promise a field that is not
   there until the second click. */

/* the same in-place box the WorkMap puts over a requirement: a raised card
   on the row it replaces, its input borderless inside */
.git-crow-edit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -4px;
  padding: 1px 2px 1px 5px;
  border: 1.5px solid var(--git-blue);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}

.git-crow-edit input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--term-fg);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.5;
  padding: 0;
  outline: none;
}

.git-crow-ok,
.git-crow-x {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--term-fg-secondary);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.git-crow-ok svg,
.git-crow-x svg {
  width: 11px;
  height: 11px;
}

.git-crow-ok:hover {
  background: var(--term-hover);
  color: var(--git-blue);
}

.git-crow-x:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

/* a surface ring lifts each dot off its rail; hovering reveals the commit id */
.git-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--term-pop);
  transition: transform 80ms ease;
}

.git-dot:hover {
  transform: scale(1.4);
}

.git-crow.wt .git-dot {
  left: 20.5px;
  background: var(--git-blue);
}

.git-crow.main .git-dot {
  left: 0.5px;
  background: var(--term-good);
}

.git-crow-subject {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--term-fg);
  font-size: 12px;
}

.git-crow-when {
  flex: none;
  color: var(--term-fg-muted);
  font-family: var(--term-font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* the branch runs deeper than the rail draws - the count sits under the last
   drawn commit, in line with their subjects */
.git-crow-more {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  padding-left: 37px;
  color: var(--term-fg-muted);
  font-size: 10.5px;
}

.tool-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink-muted);
  font-size: 11px;
  cursor: pointer;
}

.tool-btn:hover {
  background: var(--hover);
  color: var(--ink);
}

.tool-btn.on {
  color: var(--ink);
}

/* the head's ghost buttons run on the terminal palette; the class is shared
   with the settings modal, so the retreatment is scoped to the card */
.terminal .tool-btn {
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--term-fg-muted);
  transition: background-color 150ms, color 150ms, transform 150ms;
}

.terminal .tool-btn:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.terminal .tool-btn:active {
  transform: scale(0.94);
}

.terminal .tool-btn.on {
  color: var(--term-fg);
}

/* the conversation is a document: sans prose, quiet chips for machine bits */
.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* no bottom padding: the prompt-line under this scroller already opens the
     gap between the last line and the composer field, so padding here would
     only add dead space at the end of the scroll */
  padding: 10px 12px 0;
  font-family: var(--term-font-sans);
  /* conversation text follows the Appearance terminal size; status chrome
     and the input line keep their own sizes */
  font-size: var(--term-size, 13px);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /* one clear break between blocks, a tool's output tight under its call -
     per-entry margins below, not a uniform gap */
  gap: 0;
  /* The transcript NEVER scrolls sideways. Setting overflow-y alone leaves
     overflow-x computing to auto (CSS overflow), so one long path, url or
     wide block handed the whole column a horizontal bar - and since every
     other line still stretched to the visible width, scrolling across it
     showed nothing but empty space. Narrowing the terminal wraps the output
     instead; anything genuinely wide keeps its own scroller inside its own
     surface (.md-block-scroll), which is where a sideways bar belongs. */
  overflow-x: hidden;
}

/* no entry reaches past the column, whatever it holds */
.transcript > * {
  max-width: 100%;
  min-width: 0;
}

/* ...and the text inside one wraps rather than being clipped by that: an
   unbroken run of characters (a windows path, a url, a base64 blob) breaks
   where it must. Code and paste surfaces are exempt - they scroll. */
.entry-model,
.entry-reasoning,
.entry-system,
.entry-command,
.entry-command-output,
.entry-tool-result,
.working-line,
.approval-ask-cmd {
  overflow-wrap: anywhere;
}

.entry-user,
.entry-model,
.entry-reasoning,
.entry-tool,
.entry-system,
.entry-command,
.entry-command-output {
  margin-top: 18px;
  /* backwards, never both: a finished fade that kept its end state left every
     line holding a transform for good, and a transcript of thousands of such
     lines cost the compositor a frame budget on every scroll step (32fps
     measured). The end keyframe is the line's natural state anyway. */
  animation: term-fade-up 350ms var(--term-ease-out) backwards;
}

/* lines already there when the transcript mounted (a restored conversation,
   an older page scrolled in) stand still: the fade is for output landing
   live, and hundreds of lines fading in at once is a stall, not a reveal */
.transcript .entry-still {
  animation: none;
}

.transcript > :first-child:not(.prompt-line) {
  margin-top: 0;
}

/* the agent's first output sits a touch closer to the prompt it answers */
.entry-user + :not(.prompt-line) {
  margin-top: 12px;
}

/* consecutive tool calls read as one run of steps */
.entry-tool + .entry-tool {
  margin-top: 4px;
}

/* the asymmetry that shapes the whole transcript: your prompt is a soft
   filled bubble on the right, the agent's output is an unstyled full-width
   document on the left */
.entry-user {
  position: relative;
  align-self: flex-end;
  max-width: min(85%, 640px);
  color: var(--term-fg);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--term-field);
}

/* replies are the document itself: no marker, no surface, sans prose */
.entry-model {
  color: var(--term-fg);
  line-height: 1.55;
  white-space: pre-wrap;
  text-wrap: pretty;
}

/* a link in a reply reads in the reply's own ink, underlined */
.entry-model a {
  color: var(--term-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.entry-model a:hover {
  color: var(--ink);
}

/* thinking reads as de-emphasised prose, one quiet step under the reply */
.entry-reasoning {
  color: var(--term-fg-secondary);
  font-size: calc(var(--term-size, 13px) - 0.5px);
  line-height: 1.55;
  white-space: pre-wrap;
}

.reasoning-head {
  display: block;
  font-weight: 500;
  color: var(--term-fg-secondary);
}

/* the trace body hangs off a thin rail, the way expandable traces read */
.reasoning-body {
  display: block;
  margin-top: 6px;
  margin-left: 5px;
  padding-left: 14px;
  border-left: 1px solid var(--term-line);
  color: var(--term-fg-muted);
}

/* a tool call is one row: the verb in medium ink, its subject riding a
   quiet mono chip beside it */
.entry-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--term-fg-muted);
  font-size: calc(var(--term-size, 13px) - 0.5px);
}

.entry-tool b {
  flex: none;
  font-weight: 500;
  color: var(--term-fg);
}

.entry-tool .tool-args {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--term-hover-2);
  box-shadow: var(--term-shadow-hairline);
  color: var(--term-fg-secondary);
  font-family: var(--term-font-mono);
  font-size: calc(var(--term-size, 13px) - 1.5px);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* codex tool lines are commands - they keep the $ and the mono voice */
.transcript[data-agent='codex'] .entry-tool {
  display: block;
  font-family: var(--term-font-mono);
  white-space: pre-wrap;
}

.transcript[data-agent='codex'] .entry-tool::before {
  content: '$ ';
  color: var(--term-fg-secondary);
}

/* a tool's output hangs off a thin rail under its call */
.entry-tool-result {
  margin-left: 5px;
  padding-left: 14px;
  border-left: 1px solid var(--term-line);
  color: var(--term-fg-secondary);
  font-family: var(--term-font-mono);
  font-size: calc(var(--term-size, 13px) - 1.5px);
  line-height: 1.6;
  white-space: pre-wrap;
  /* two lines AS DRAWN: a first line that wraps takes the second line with
     it, and the row ends there with an ellipsis. The text is clipped to two
     lines already (toolOutput.ts); this is the same rule against the width. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* the transcript lays its rows out as a column; hidden overflow would let
     this row be squeezed to nothing when the column is full */
  flex: none;
}

/* the code surface in the node panel's stored conversations - unchanged */
.ndv-model .md-block {
  position: relative;
  display: block;
  margin: 8px 0;
  min-height: 35px;
  border-radius: 6px;
  background: var(--ctk-bg, var(--surface-sunken));
  color: var(--ctk-fg, var(--ink));
  text-indent: 0;
}

/* the live transcript's code surface: an inset card held by a hairline
   ring, long content scrolling inside it rather than growing the page */
.entry-model .md-block {
  position: relative;
  display: block;
  margin: 8px 0;
  min-height: 35px;
  border-radius: 8px;
  /* a named code theme brings its own surface pair (--ctk-bg/--ctk-fg);
     the default keeps the terminal's inset block */
  background: var(--ctk-bg, var(--term-inset));
  color: var(--ctk-fg, var(--term-fg));
  box-shadow: var(--term-shadow-hairline);
  text-indent: 0;
}

/* the scroller is its own layer so the copy control stays pinned to the
   block corner instead of riding the scrolled content. Ligatures are off on
   purpose - ligated != and => misrepresent the characters in the file. */
.md-block-scroll {
  display: block;
  max-height: 500px;
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--term-font-mono, 'JetBrains Mono'), monospace;
  font-size: calc(var(--term-size, 13px) - 1px);
  line-height: 1.5;
  white-space: pre;
  font-variant-ligatures: none;
}

/* the transcript's blocks read a step smaller with airier leading */
.entry-model .md-block-scroll {
  font-size: calc(var(--term-size, 13px) - 1.5px);
  line-height: 1.7;
}

/* inline code in the node panel - unchanged */
.ndv-model code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--surface-sunken);
}

/* inline code in the transcript: a soft accent-tinted mono pill */
.entry-model code {
  font-family: var(--term-font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--term-accent-tint);
  color: var(--term-accent-ink);
}

/* copy control at the block's top-right - held back until the block is
   hovered, the way every quiet affordance in the transcript behaves */
.md-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0;
}

.md-block:hover .md-copy,
.md-copy:focus-visible {
  opacity: 1;
}

.md-copy:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, var(--surface-sunken));
}

/* the transcript's copy control sits as a small raised button */
.entry-model .md-copy {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-btn);
  color: var(--term-fg-muted);
  transition: background-color 100ms, color 100ms;
}

.entry-model .md-copy:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

/* browser demo: the copy control stays out on every code block */
.shell-root[data-demo] .md-copy {
  opacity: 1;
}

/* browser demo: the embedded window never scrolls its own viewport, so no
   second bar ever rides beside the page's own scrollbar */
html:has(.shell-root[data-demo]),
html:has(.shell-root[data-demo]) body {
  overflow: hidden;
}

/* browser demo: the switcher's folder path hugs the end of the control,
   and the dropdown's rows keep their paths at the right the same way */
.shell-root[data-demo] .project-dropdown .dir {
  text-align: right;
}

.shell-root[data-demo] .project-row .dir {
  margin-left: auto;
  text-align: right;
}

/* closing a project is a write - the demo dropdown drops the control and
   lets the path own the row's right end */
.shell-root[data-demo] .project-row .row-x {
  display: none;
}

/* browser demo: fluent overlay scrollbars (Edge on Windows 11) ignore the
   webkit hiding rules, drawing a second bar over the editor's own overlay
   thumbs - the standard property hides the native bar under every mode */
.shell-root[data-demo] .code-scroll,
.shell-root[data-demo] .editor-tabs {
  scrollbar-width: none;
}

/* browser demo: the reasoning pill stays neutral - level words carry no
   color scale */
.shell-root[data-demo] .effort {
  --effort-color: var(--ink-secondary);
}

.shell-root[data-demo] .terminal .effort {
  --effort-color: var(--term-fg-secondary);
}

/* browser demo: the node being run announces it in the terminal's popup -
   no glow there, just a HARD blink: the header dot and the worked
   requirement's dot (the node's second row on both sample maps) grow into
   ringed beacons snapping on and off, the worked row carries a soft wash,
   and the title a working chip */
.shell-root[data-demo] .node-view.working .card .status-dot,
.shell-root[data-demo] .node-view.working .card .requirements li:nth-child(2) .req-dot {
  width: 7px;
  height: 7px;
  background: var(--status-shipped) !important;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--status-shipped) 30%, transparent);
  animation: demo-working-blink 0.8s infinite;
}

.shell-root[data-demo] .node-view.working .card header h3::after {
  content: 'working';
  display: inline-block;
  margin-left: 7px;
  padding: 0.5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-shipped) 14%, transparent);
  color: var(--status-shipped);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}

.shell-root[data-demo] .node-view.working .card .requirements li:nth-child(2) .req {
  background: color-mix(in srgb, var(--status-shipped) 9%, transparent);
}

/* the glow lives on the OPEN MAP instead: the node a run is working carries
   the pulsing green ring in the WorkMap overlay */
.shell-root[data-demo] .tracker-overlay .demo-working .card {
  border-color: color-mix(in srgb, var(--status-shipped) 50%, var(--line));
  animation: demo-working-ring 1.1s infinite;
}

/* on/off beacon - abrupt, not a fade */
@keyframes demo-working-blink {
  0%,
  54% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0.15;
  }
}

@keyframes demo-working-ring {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-shipped) 20%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-shipped) 6%, transparent);
  }
}

/* browser demo: the comment controls read as real controls, Reply as a
   quiet bordered button and the tick's glyph at full secondary ink */
.shell-root[data-demo] .rcm-act {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink-secondary);
  font-weight: 500;
  text-transform: capitalize;
  padding: 3px 12px;
  border-radius: 7px;
}

.shell-root[data-demo] .rcm-act:hover {
  background: var(--hover);
  color: var(--ink);
}

.shell-root[data-demo] .rcm-check {
  color: var(--ink-secondary);
}

/* the walkthrough spend rows keep one unit per line, never wrapping mid
   unit - desktop and demo alike */
.walk-est .val .est-ln {
  display: block;
  white-space: nowrap;
}

/* browser demo: the WorkMap's live play controls advertise the click, even
   inside the read-only requirement rows */
.shell-root[data-demo] .req .play {
  cursor: pointer;
}

/* browser demo: every settings section is read only - the controls inside
   neither hover nor act; switching sections, scrolling and closing the
   modal stay live (nav and pane head sit outside the scroll area) */
.shell-root[data-demo] .settings-scroll :is(button, input, select, textarea, a, [role='button']) {
  pointer-events: none;
}

/* browser demo: every window opens inside the page's frame rather than on a
   desktop screen, where the shipped sizes leave a wide empty margin around
   their content. Each one opens narrower here, and the viewer and the
   WorkMap shorter as well. Corner grips still resize them from these sizes;
   nothing on the desktop reads these rules. */
.shell-root[data-demo] .settings-modal {
  width: min(810px, calc(100vw - 80px));
}

.shell-root[data-demo] .review-window {
  width: min(840px, calc(100vw - 96px));
}

.shell-root[data-demo] .attach-window {
  width: min(820px, calc(100vw - 72px));
  height: min(560px, calc(100vh - 48px - var(--titlebar-h)));
}

/* the diagram's own view is measured, not fixed: the root stays centered
   across the body and hangs off the right HUD card whatever the box is. The
   width is the narrowest that still holds the three branches' first nodes,
   measured at the demo's own 76% zoom, and the height leaves an eighth of
   the page clear above and below. */
.shell-root[data-demo] .tracker-overlay {
  width: min(966px, calc(100vw - 96px));
  height: min(76vh, calc(100vh - 72px - var(--titlebar-h)));
}

/* browser demo: the stack's own scrollbar belongs ON the boundary line
   between the editor area and the terminal panel - never at the right edge
   where it reads as part of a terminal's output scrollbar. rtl flips the
   vertical bar to the scroller's LEFT edge (children restored to ltr), and
   with a second terminal a slim lane keeps the bar off the cards in every
   scrollbar mode (overlay bars paint over the lane, classic sit in it) */
.shell-root[data-demo] .terminal-stack {
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: var(--term-line) transparent;
}

.shell-root[data-demo] .terminal-stack > * {
  direction: ltr;
}

.shell-root[data-demo] .terminal-stack:has(.stack-slot ~ .stack-slot) {
  padding-left: 8px;
}

/* (the Terminals tab's per-column scrollbar hack is gone: columns no longer
   scroll on their own - the one tmode-main scrollbar owns vertical travel) */

/* browser demo: the node popup pops out of its WorkMap button and slips
   back into it - a small in-place beat, card and tail moving together */
.shell-root[data-demo] .terminal .node-view,
.shell-root[data-demo] .terminal .node-view-tail {
  animation: demo-node-pop-in 0.15s ease-out;
}

.shell-root[data-demo] .terminal .node-view.leaving,
.shell-root[data-demo] .terminal .node-view-tail.leaving {
  animation: demo-node-pop-out 0.15s ease-in forwards;
}

@keyframes demo-node-pop-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes demo-node-pop-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-7px);
  }
}

/* transcript-only token tints, CLI-ish ANSI palette - independent of the
   editor profiles, which scope their colors to .code-view */
/* Conversation code speaks the --ctk-* palette: the fallbacks here are the
   shell's own light set, the dark set and every named Appearance code theme
   land as variables on the shell root. The Appearance code preview shares
   the scope so it renders exactly what a conversation will. */
:is(.transcript, .appearance-preview) .tk-kw {
  color: var(--ctk-kw, #0b5cc4);
}
:is(.transcript, .appearance-preview) .tk-fn {
  color: var(--ctk-fn, #795e26);
}
:is(.transcript, .appearance-preview) .tk-str {
  color: var(--ctk-str, #22863a);
}
:is(.transcript, .appearance-preview) .tk-num {
  color: var(--ctk-num, #146e2a);
}
:is(.transcript, .appearance-preview) .tk-com {
  color: var(--ctk-com, #6a737d);
  font-style: italic;
}
:is(.transcript, .appearance-preview) .tk-type {
  color: var(--ctk-type, #267f99);
}
:is(.transcript, .appearance-preview) .tk-const {
  color: var(--ctk-const, #b26a00);
}
:is(.transcript, .appearance-preview) .tk-prop {
  color: var(--ctk-prop, #001080);
}
:is(.transcript, .appearance-preview) .tk-attr {
  color: var(--ctk-attr, #af00db);
}
:is(.transcript, .appearance-preview) .tk-tag {
  color: var(--ctk-tag, #22863a);
}

/* the default dark set (no --ctk-bg/fg: the code surface stays the shell's) */
.shell-root[data-theme='dark'] {
  --ctk-kw: #569cd6;
  --ctk-fn: #61afef;
  --ctk-str: #98c379;
  --ctk-num: #7bc275;
  --ctk-com: #6a9955;
  --ctk-type: #4ec9b0;
  --ctk-const: #d19a66;
  --ctk-prop: #9cdcfe;
  --ctk-attr: #c678dd;
  --ctk-tag: #e06c75;
}

/* Named code themes (Settings > Appearance). All but Latte are dark-only:
   in light mode their selector never matches and the default palette holds,
   the Conductor fallback behavior. Palettes from the Conductor kit's
   spec/05-code-themes.md, mapped onto our token classes. */
.shell-root:not([data-theme='dark'])[data-code-theme='catppuccin-latte'] {
  --ctk-bg: #eff1f5;
  --ctk-fg: #4c4f69;
  --ctk-kw: #8839ef;
  --ctk-fn: #1e66f5;
  --ctk-str: #40a02b;
  --ctk-num: #fe640b;
  --ctk-com: #8c8fa1;
  --ctk-type: #df8e1d;
  --ctk-const: #fe640b;
  --ctk-prop: #dd7878;
  --ctk-attr: #ea76cb;
  --ctk-tag: #1e66f5;
}

.shell-root[data-theme='dark'][data-code-theme='catppuccin-macchiato'] {
  --ctk-bg: #24273a;
  --ctk-fg: #cad3f5;
  --ctk-kw: #c6a0f6;
  --ctk-fn: #8aadf4;
  --ctk-str: #a6da95;
  --ctk-num: #f5a97f;
  --ctk-com: #8087a2;
  --ctk-type: #eed49f;
  --ctk-const: #f5a97f;
  --ctk-prop: #f0c6c6;
  --ctk-attr: #f5bde6;
  --ctk-tag: #8aadf4;
}

.shell-root[data-theme='dark'][data-code-theme='catppuccin-mocha'] {
  --ctk-bg: #1e1e2e;
  --ctk-fg: #cdd6f4;
  --ctk-kw: #cba6f7;
  --ctk-fn: #89b4fa;
  --ctk-str: #a6e3a1;
  --ctk-num: #fab387;
  --ctk-com: #7f849c;
  --ctk-type: #f9e2af;
  --ctk-const: #fab387;
  --ctk-prop: #f2cdcd;
  --ctk-attr: #f5c2e7;
  --ctk-tag: #89b4fa;
}

.shell-root[data-theme='dark'][data-code-theme='dracula'] {
  --ctk-bg: #282a36;
  --ctk-fg: #f8f8f2;
  --ctk-kw: #ff79c6;
  --ctk-fn: #50fa7b;
  --ctk-str: #f1fa8c;
  --ctk-num: #bd93f9;
  --ctk-com: #6272a4;
  --ctk-type: #8be9fd;
  --ctk-const: #bd93f9;
  --ctk-prop: #ffb86c;
  --ctk-attr: #f1fa8c;
  --ctk-tag: #ff79c6;
}

.shell-root[data-theme='dark'][data-code-theme='nord'] {
  --ctk-bg: #2e3440;
  --ctk-fg: #d8dee9;
  --ctk-kw: #81a1c1;
  --ctk-fn: #88c0d0;
  --ctk-str: #a3be8c;
  --ctk-num: #b48ead;
  --ctk-com: #616e88;
  --ctk-type: #8fbcbb;
  --ctk-const: #b48ead;
  --ctk-prop: #d08770;
  --ctk-attr: #ebcb8b;
  --ctk-tag: #81a1c1;
}

.shell-root[data-theme='dark'][data-code-theme='tokyo-night'] {
  --ctk-bg: #1a1b26;
  --ctk-fg: #a9b1d6;
  --ctk-kw: #9d7cd8;
  --ctk-fn: #7aa2f7;
  --ctk-str: #9ece6a;
  --ctk-num: #ff9e64;
  --ctk-com: #565f89;
  --ctk-type: #2ac3de;
  --ctk-const: #ff9e64;
  --ctk-prop: #c0caf5;
  --ctk-attr: #b4f9f8;
  --ctk-tag: #f7768e;
}

.shell-root[data-theme='dark'][data-code-theme='gruvbox-dark'] {
  --ctk-bg: #282828;
  --ctk-fg: #ebdbb2;
  --ctk-kw: #fb4934;
  --ctk-fn: #83a598;
  --ctk-str: #b8bb26;
  --ctk-num: #d3869b;
  --ctk-com: #928374;
  --ctk-type: #fabd2f;
  --ctk-const: #d3869b;
  --ctk-prop: #fe8019;
  --ctk-attr: #fabd2f;
  --ctk-tag: #8ec07c;
}

.shell-root[data-theme='dark'][data-code-theme='solarized-dark'] {
  --ctk-bg: #002b36;
  --ctk-fg: #839496;
  --ctk-kw: #859900;
  --ctk-fn: #268bd2;
  --ctk-str: #2aa198;
  --ctk-num: #6c71c4;
  --ctk-com: #586e75;
  --ctk-type: #b58900;
  --ctk-const: #6c71c4;
  --ctk-prop: #b58900;
  --ctk-attr: #cb4b16;
  --ctk-tag: #268bd2;
}

/* live status while a turn runs - a sparkle beside a shimmering verb */
.working-line {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--term-size, 13px);
  color: var(--term-fg-secondary);
}

.working-line::before {
  content: '✻ ';
  white-space: pre;
  color: var(--term-fg-secondary);
}

.working-verb {
  font-weight: 500;
  background-image: linear-gradient(
    90deg,
    var(--term-fg-muted) 35%,
    var(--term-fg) 50%,
    var(--term-fg-muted) 65%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: term-shimmer 1.4s linear infinite;
}

.working-meta {
  color: var(--term-fg-muted);
  font-size: calc(var(--term-size, 13px) - 1px);
}

/* the same line, held for the user instead of for a run: no shimmer, since
   nothing is working */
.waiting-verb {
  font-weight: 500;
  color: var(--term-fg-secondary);
}

@keyframes term-shimmer {
  0% {
    background-position: 150%;
  }
  100% {
    background-position: -50%;
  }
}

@keyframes term-fade-up {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes term-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.entry-system {
  color: var(--term-fg-muted);
  font-size: calc(var(--term-size, 13px) - 1px);
}

/* a /context reading (Terminal.tsx ContextMeter): one status line whose bar
   grows with the share of the model's window the conversation fills, drawn
   like the usage cells in the terminal head */
.entry-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
  font-variant-numeric: tabular-nums;
}

.context-meter-label {
  color: var(--term-fg-secondary);
}

.context-meter-bar {
  flex: 0 1 160px;
  min-width: 60px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--term-hover-2);
}

.context-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--term-accent-strong);
}

.context-meter-fill.warn {
  background: var(--term-warn);
}

.context-meter-fill.bad {
  background: var(--term-bad);
}

.context-meter-used {
  color: var(--term-fg);
}

.entry-command {
  font-family: var(--term-font-mono);
  font-size: calc(var(--term-size, 13px) - 1px);
  color: var(--term-fg);
}

.entry-command::before {
  content: '$ ';
  color: var(--term-good);
}

.entry-command-output {
  font-family: var(--term-font-mono);
  font-size: calc(var(--term-size, 13px) - 1.5px);
  line-height: 1.6;
  color: var(--term-fg-secondary);
  white-space: pre-wrap;
}

/* a command's output sits tight under its $ line, like a real shell */
.entry-command + .entry-command-output {
  margin-top: 2px;
}

/* agent identity legend - per mocks/"terminal cursor.PNG": colored mark +
   agent name on a thin rule, mixed case on purpose (brand, not chrome) */
.agent-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--term-fg-secondary);
}

.agent-brand::before {
  content: '';
  width: 8px;
  border-top: 1px solid var(--term-line-strong);
}

.agent-brand::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--term-line-strong);
}

.agent-brand-mark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

.agent-brand[data-agent='claude'] {
  color: #c15f3c;
}

.shell-root[data-theme='dark'] .agent-brand[data-agent='claude'] {
  color: #d97757;
}

/* codex brand periwinkle - sampled from the Codex app icon's gradient
   (mocks/codex-color.webp, #a8a5fe down to #4653ff); the light theme takes
   the icon's deep end, the dark theme its middle */
.agent-brand[data-agent='codex'] {
  color: #4a58e8;
}

.shell-root[data-theme='dark'] .agent-brand[data-agent='codex'] {
  color: #7b8cff;
}

/* gemini brand blue - same tint pair as the phase/model pickers */
.agent-brand[data-agent='gemini'] {
  color: #3b7fd0;
}

.shell-root[data-theme='dark'] .agent-brand[data-agent='gemini'] {
  color: #6faef2;
}

/* the prompt reads as an input band running the full width of the terminal,
   still activated by clicking anywhere in the terminal. The band face is
   drawn by ::before rather than on this element, so the element keeps its own
   opaque backdrop across the gaps above and below the band and scrolled
   output never shows through them. */
.prompt-line {
  /* never shrinks: as a default flex item its explicit min-height overrode
     the min-content floor, so an overflowing transcript squeezed the line to
     its bare padding and the cursor spilled ~10px lower after the first turn */
  flex: none;
  /* a sibling of the transcript, not a sticky child of it: the scroller ends
     at this line's top edge, so the output's bar stops there instead of
     running on down beside the composer. The line still sits at the bottom of
     the card (the transcript takes the free space above it) and still paints
     a solid backdrop. The z-index keeps a stacking context - without one the
     field card (::before, z-index -1) would fall behind that backdrop. */
  position: relative;
  z-index: 2;
  background: var(--term-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  /* spans both inner edges of the terminal; the composer field floats inside
     it with its own margins, and this padding = outer gap + field padding */
  padding: 17px 21px 19px;
  font-family: var(--term-font-sans);
  font-size: 15px;
  line-height: 1.5;
}

/* the composer field: a soft filled card floating inside the terminal,
   hairlined at rest and firming up while the prompt is being written. The
   negative z-index paints it above this element's backdrop and below the
   + dock, the draft text and the stop control. */
.prompt-line::before {
  content: '';
  position: absolute;
  inset: 8px 10px 10px;
  z-index: -1;
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: var(--term-field);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
  transition: border-color 150ms;
}

.prompt-line:has(.block-cursor.focused)::before {
  border-color: var(--term-line-strong);
}

.attach-float {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-muted);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.attach-float:hover {
  background: var(--term-hover-2);
  color: var(--term-fg);
}

.attach-float svg {
  stroke-width: 2.2;
}

/* the draft reads as composer text: plain weight, full ink */
.prompt-draft {
  /* anchors the overlay block cursor (as a flex item the span is blockified,
     so this is an ordinary block containing box) */
  position: relative;
  color: var(--term-fg);
  font-weight: 400;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

/* the draft's own scroller: the field grows with the prompt up to a share of
   the card and scrolls inside itself after that, so a long paste never grows
   the field past the card and the card is never scrolled to chase the caret.
   The share reads the card's height off the custom property the terminal
   keeps on its root. Same construction as the orchestrator's scroller. */
.prompt-draft-scroll {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(var(--term-h, 320px) * 0.45);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px;
  margin: 0 -4px;
}

.prompt-draft-scroll > .prompt-draft {
  flex: none;
}

/* browser demo: the composers are read only, so their text never selects,
   and the orchestrator's box is exactly wide enough for one task per line -
   the prepared request's longest line, and not a column of empty field
   beside it */
.shell-root[data-demo] .prompt-draft {
  user-select: none;
}

.shell-root[data-demo] .orch-col {
  width: min(100%, 940px);
}

/* mirrors the ghost input's live selection (ctrl+a, shift+arrows, …) */
.draft-selection {
  background: var(--term-primary);
  color: var(--term-primary-fg);
  border-radius: 2px;
}

/* a long paste folded into its placeholder, the way a CLI folds one: the
   text itself is what is sent, and a click unfolds it here to read or edit */
.draft-paste {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--term-hover);
  box-shadow: var(--term-shadow-hairline);
  cursor: pointer;
  transition: background-color 100ms;
}

.draft-paste:hover {
  background: var(--term-selected);
}

/* the placeholder sits inside the live selection: marked whole, never split */
.draft-paste.selected {
  background: var(--term-primary);
  color: var(--term-primary-fg);
}

/* the one slash command the box takes (/goal), in the code palette's keyword
   color wherever the prompt is shown: the mirror, the transcript, a task row */
.draft-command {
  color: var(--ctk-kw, #0b5cc4);
}

/* thin caret at the tracked caret position - negative margins cancel its
   width so mid-text editing never shifts the surrounding characters */
.block-cursor {
  display: inline-block;
  width: 2px;
  /* em-based so the caret tracks the prompt font size */
  height: 1.38em;
  margin: 0 -1px;
  vertical-align: -0.31em;
  border-radius: 1px;
  /* unfocused reads as the emulator's outline cursor: 1px edge, no fill */
  border: 1px solid var(--term-fg);
  background: transparent;
  /* cursorAccent - whatever a filled cursor covers takes the background */
  color: var(--term-bg);
  opacity: 0.35;
}

/* once there is text, the cursor floats over the caret's measured spot so a
   wrap-boundary caret can sit at the START of the next line (affinity) */
.block-cursor.overlay {
  position: absolute;
  margin: 0;
}

/* the caret holds solid while typing or moving - blink is an idle thing,
   and a mid-blink caret under fast typing reads as input lag */
.block-cursor.focused.typing {
  animation: none;
}

.block-cursor.focused {
  border-color: transparent;
  background: var(--term-fg);
  opacity: 1;
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}

/* invisible input backing the free cursor */
.ghost-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
  resize: none;
  overflow: hidden;
}

/* ---------------------------------------------------------- run control
   The run control is NOT mounted right now - the play button, its infinity/1
   run-mode badge and the cluster that carried them were taken out of the UI.
   Everything below down to the run-wave keyframes is kept on purpose so the
   control can come back looking exactly as it did. Do not delete. */

/* play/pause control for the coding agent on the selected requirement */
.run-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--term-fg-secondary);
  cursor: pointer;
}

.run-btn.running {
  color: var(--term-good);
}

/* the play glyph fills the button - a bold, prominent triangle */
.run-btn svg {
  width: 24px;
  height: 24px;
}

/* run-mode marker at the play glyph's bottom-right corner: "1" runs only the
   current task then stops, "∞" is full auto over the queue. Static glyph - no
   background, no hover effect whatsoever (nothing changes when it overlaps the
   play on hover). Sits just off the corner: not shoved far below, not jammed in. */
.run-cluster {
  position: relative;
  flex: none;
  display: inline-flex;
  margin-right: 3px;
}

.run-mode {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--term-fg-secondary);
  pointer-events: none;
}

.run-mode.running {
  color: var(--term-good);
}

/* the "agent is working" wave - three dots bobbing in sequence */
.run-dots {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}

.run-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: run-wave 1s ease-in-out infinite;
}

.run-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.run-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes run-wave {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3.5px);
  }
}

/* -------------------------------------------------------- popover rows */

.queue-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 12.5px;
  color: var(--term-fg);
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms;
}

.queue-item:hover {
  background: var(--term-hover);
}

.queue-item.empty {
  color: var(--term-fg-muted);
  cursor: default;
}

/* the rest of the list, folded away until it is asked for */
.queue-item.pick-more {
  color: var(--term-fg-secondary);
}

.queue-item .task-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-ref {
  /* rides inside a popover row, which sizes to its text */
  font-family: var(--term-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--term-fg-muted);
  flex: none;
}

/* excluded from builds - a standing tag beside the switch itself,
   unmissable (a dimmed label alone read like every other muted label) */
.tasks-off {
  flex: none;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--term-warn);
  background: var(--term-warn-tint);
  border: none;
  border-radius: 999px;
  padding: 1px 7px;
}

/* skills control - it rides the input line's right end, a quiet text
   control in the composer's own voice */
.skills-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  /* rides the line's vertical middle like the + at its left end, however
     tall the draft grows */
  align-self: center;
  /* the stop control's box, so the two sit level at the line's right end */
  height: 20px;
  /* takes the free space, leaving the stop the far corner it always had */
  margin-left: auto;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.skills-btn:hover,
.skills-btn.open {
  background: var(--term-hover-2);
  color: var(--term-fg);
}

/* skills has the auto margin now - a second one would split the free space
   between the two and pull the stop off the corner */
.skills-btn + .prompt-stop {
  margin-left: 0;
}

.skills-count {
  /* rides inside the skills button, which sizes to its text */
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--term-accent);
}

/* status bits shared by the popover's rows */
.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--term-fg);
}

.task-row .task-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.task-include {
  justify-content: space-between;
  border: none;
  border-top: 1px solid var(--term-line);
  border-radius: 0 0 7px 7px;
  background: none;
  margin-top: 4px;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--term-fg);
  cursor: pointer;
}

.task-include:hover {
  background: var(--term-hover);
}

.task-include-label {
  flex: 1;
  text-align: left;
}

/* the View in WorkMap row rides directly under Include in builds - one
   divider above the pair, the bottom radius on the last row only */
.node-view-workmap {
  border-top: none;
  margin-top: 0;
  padding-top: 6px;
}

.task-include:has(+ .node-view-workmap) {
  border-radius: 0;
}

/* the pop-out arrow marks the row as opening the WorkMap window */
.node-view-workmap-mark {
  flex: none;
  display: inline-flex;
  color: var(--term-fg-secondary);
}

.node-view-workmap-mark svg {
  width: 12px;
  height: 12px;
}

.node-view-workmap:hover .node-view-workmap-mark {
  color: var(--term-fg);
}

/* a real switch, not a checkbox pretending to be one */
.task-toggle {
  position: relative;
  flex: none;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--term-line-strong);
  transition: background 120ms ease;
}

.task-toggle.on {
  background: var(--term-accent-strong);
}

.task-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--term-pop);
  transition: transform 120ms ease;
}

.task-toggle.on .task-toggle-knob {
  transform: translateX(11px);
}

/* ------------------------------------------------------ workmap node view */

/* comic-book callout off the terminal's WorkMap button: the node this terminal
   is working, snapshotted live out of the WorkMap and editable in place */
.node-view {
  position: fixed;
  z-index: 96;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: overlay-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* content scrolls inside so the tail is never clipped away */
.node-view-body {
  min-height: 0;
  overflow: auto;
}

/* the comic tail: a straight tapered wedge drawn per-open from the bubble's
   top edge all the way to the WorkMap icon itself - base fill melts into the
   bubble, only the two slanted sides are inked */
.node-view-tail {
  position: fixed;
  z-index: 97;
  pointer-events: none;
  overflow: visible;
  animation: overlay-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.node-view-tail .tail-fill {
  fill: var(--surface);
  stroke: none;
}

.node-view-tail .tail-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the same callout chrome serves the review window and the walkthrough, so
   the terminal's warm treatment is scoped to the card */
.terminal .node-view {
  border-color: var(--term-line-strong);
  background: var(--term-pop);
}

.terminal .node-view-tail .tail-fill {
  fill: var(--term-pop);
}

.terminal .node-view-tail .tail-edge {
  stroke: var(--term-line-strong);
}

/* an unbound terminal opens the same callout on what it could pick up -
   popover rows, held to the width the task popover always used */
.node-pick {
  min-width: 230px;
  max-width: 340px;
}

/* HARD RULE: header rows never wrap - the label ellipsizes before a
   second line ever appears */
.node-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 9px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--term-fg-muted);
}

.node-pick-head > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* flips the popup between the bound node card and the node list */
.node-pick-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  text-transform: none;
  letter-spacing: normal;
  padding: 3px 8px 3px 5px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--term-fg-secondary);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.node-pick-back:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

/* the "All nodes" form sits above the snapshot and keeps its breathing room */
.node-view-body > .node-pick-back {
  margin-bottom: 6px;
}

.node-pick-back svg {
  width: 12px;
  height: 12px;
}

/* a settled terminal browses the list without loading anything from it */
.queue-item.settled {
  color: var(--term-fg-muted);
  cursor: default;
}

.queue-item.settled:hover {
  background: none;
}

/* the build switch sits flush across the callout's bottom edge, the way it
   closed the task popover */
.terminal .node-view .task-include {
  flex: none;
  /* stretches to the bubble's inner edges - a fixed 100% would stop short of
     them once the negative margins pull it out of the padding */
  width: auto;
  margin: 10px -16px -14px;
  padding: 9px 16px 10px;
  border-radius: 0 0 13px 13px;
}

/* the callout's rows speak the terminal's document voice */
.terminal .node-view :is(.queue-item, .task-include) {
  font-family: var(--term-font-sans);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------- floating terminal */

.terminal-float {
  position: fixed;
  z-index: 80;
  /* size and position are state-driven; resizable from every edge and corner
     via the .float-resizer handles */
  border-radius: 14px;
  box-shadow: var(--term-shadow-overlay), 0 24px 64px rgba(0, 0, 0, 0.12);
}

.float-resizer {
  position: absolute;
  z-index: 5;
  touch-action: none;
}

.float-n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.float-s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.float-e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.float-w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.float-ne { top: -4px; right: -4px; width: 13px; height: 13px; cursor: nesw-resize; }
.float-sw { bottom: -4px; left: -4px; width: 13px; height: 13px; cursor: nesw-resize; }
.float-nw { top: -4px; left: -4px; width: 13px; height: 13px; cursor: nwse-resize; }
.float-se { bottom: -4px; right: -4px; width: 13px; height: 13px; cursor: nwse-resize; }

.terminal-float > .terminal {
  width: 100%;
  height: 100%;
  border-color: var(--term-line-strong);
  border-radius: 14px;
}

.terminal-float .terminal-head {
  cursor: grab;
}

.terminal-float .terminal-head:active {
  cursor: grabbing;
}

/* -------------------------------------------------- terminal-only mode */

.terminal-only {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--term-canvas);
  font-family: var(--term-font-sans);
  letter-spacing: -0.01em;
}

.tmode-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg);
  -webkit-app-region: drag;
}

.tmode-strip > * {
  -webkit-app-region: no-drag;
}

/* the way back is its own thing, not part of the control cluster */
.tmode-back {
  margin-right: 18px;
}

/* ONE scroll surface for the whole grid: vertical travel lives on the right
   edge of the view, horizontal travel pages across projects - the columns
   themselves never scroll */
.tmode-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* stretch (not flex-start) so the section boundaries run the full height of
   the surface, past the last terminal down to the band - a line that stopped
   at the tallest column read as a broken divider. min-height fills a short
   workspace; a tall one grows the container and the lines grow with it. */
.tmode-columns {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  /* no bottom padding: it would end the boundary short of the band. The
     columns carry that breathing room themselves. */
  padding: 12px 16px 0;
}

.tmode-col {
  flex: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

/* the draggable boundary between two project sections: a hit strip with the
   hairline dead center, and no margins - the gutter is the strip itself, so
   the line sits exactly halfway between the two terminals it separates.
   Every column resizes together. */
.tmode-col-resizer {
  flex: none;
  width: 17px;
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(var(--term-line-strong), var(--term-line-strong)) center / 1px 100%
    no-repeat;
}

.tmode-col-resizer:hover,
.tmode-col-resizer:active {
  background: linear-gradient(var(--term-accent), var(--term-accent)) center / 3px 100% no-repeat;
}

/* one center line for the whole head: baseline alignment sized the row to
   the + button and left it sitting below the project name */
.tmode-col-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 10px;
}

.tmode-col-head .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--term-fg);
}

.tmode-col-head .dir {
  flex: 1;
  font-family: var(--term-font-mono);
  font-size: 10.5px;
  color: var(--term-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the + rides that same center line - no nudge, nothing to drift */
.tmode-col-head .icon-btn {
  align-self: center;
}

.tmode-stack {
  flex: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}

.tmode-slot {
  flex: none;
  display: flex;
  flex-direction: column;
}

.tmode-slot > .terminal {
  flex: 1;
  min-height: 0;
}

/* the draggable boundary under a terminal - every terminal resizes together */
.tmode-row-resizer {
  flex: none;
  position: relative;
  z-index: 6;
  height: 12px;
  cursor: row-resize;
  touch-action: none;
  background: none;
}

.tmode-row-resizer:hover,
.tmode-row-resizer:active {
  background: linear-gradient(var(--term-accent), var(--term-accent)) center / 100% 3px no-repeat;
}

/* ------------------------------------------- orchestrator input band
   Its own full-width lane on the window floor: no terminal ever renders
   beside the input box, not even at the sides. The composer column holds
   65% of the width, floored so a small window still fits the controls, and
   the confirmation rows span exactly that column. */

.orch-band {
  /* the ceiling shared by the conversations panel and the input box itself:
     both stop just below the middle of the window, so a long draft grows to
     exactly the height the panel covers and then scrolls inside it */
  --orch-panel-max: calc(50vh - 92px);
  flex: none;
  display: flex;
  justify-content: center;
  /* tight to the boundary above it: the field card carries its own inset,
     so anything more here reads as a gap rather than a seam */
  padding: 3px 16px 9px;
  border-top: 1px solid var(--term-line);
  background: var(--term-bg);
}

.orch-col {
  position: relative;
  width: 50%;
  min-width: min(560px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- what hangs over the workspace -------------------------------------- */

/* The confirmation rows and the conversation hang OVER the workspace as one
   stack, like the skills sheet: out of the column's flow, so the bar and the
   grid never move when either shows or goes. A few px narrower than the field
   box on each side (the box is itself inset 4px inside the column), so the
   stack reads as sitting on the input box, never overhanging it. It sits ON
   the bar's own boundary: the column starts one border plus the band's 3px
   padding below that line, so coming back down by 3 lands the lowest panel's
   bottom border exactly on it. The rows take that line, an open conversation
   sits just above them. */
.orch-hang {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 3px);
  z-index: 96;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: var(--orch-panel-max);
  pointer-events: none;
}

.orch-hang > * {
  pointer-events: auto;
}

/* --- confirmation rows ------------------------------------------------- */

/* one panel holding the rows; the rows themselves carry no box */
.orch-items {
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: var(--orch-panel-max);
  padding: 4px 0;
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  overflow-y: auto;
  transform-origin: bottom center;
  animation: orch-chat-in 150ms var(--term-ease-out) both;
}

/* with the conversation open above, the rows keep most of the height and
   the conversation shrinks to what is left */
.orch-chat + .orch-items {
  max-height: calc(var(--orch-panel-max) * 0.6);
}

.orch-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px;
  font-family: var(--term-font-sans);
  font-size: 12.5px;
  color: var(--term-fg);
}

/* a stop reads as a task row does: what it acts on where the project sits,
   then what the user called the work where the prompt sits */
.orch-control-where {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 220px;
  padding: 3px 8px;
  border: 1px solid var(--term-warn);
  border-radius: 7px;
  background: var(--term-bg);
  color: var(--term-fg);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orch-control-target {
  cursor: default;
}

.orch-item.orch-error {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* with no box around the row, the failure reads in its own color */
.orch-error-text {
  flex: 1;
  color: var(--term-bad);
}

.orch-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.orch-proj {
  position: relative;
  flex: none;
}

.orch-proj-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 3px 8px;
  border: 1px solid var(--term-line);
  border-radius: 7px;
  background: var(--term-bg);
  color: var(--term-fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.orch-proj-btn:hover {
  background: var(--term-hover-2);
}

.needs-pick .orch-proj-btn {
  border-color: var(--term-warn);
}

.orch-proj-btn svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--term-fg-muted);
}

.orch-proj-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* placed by floating.ts: above the band when the window has the room, else
   below or scrolling inside */
.orch-proj-pop {
  min-width: 300px;
  width: min(420px, max-content);
}

.orch-proj-pop .orch-proj-row-name {
  flex: none;
  font-weight: 600;
}

.orch-proj-pop .orch-proj-row-dir {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--term-font-mono);
  font-size: 10.5px;
  color: var(--term-fg-muted);
}

.orch-proj-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--term-fg-muted);
}

.orch-item-prompt {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--term-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.orch-item-prompt.expanded {
  display: block;
  overflow: visible;
}

.orch-item-go,
.orch-item-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.orch-item-go {
  color: var(--term-good);
}

.orch-item-go:hover {
  background: var(--term-good-tint);
}

.orch-item-go:disabled {
  color: var(--term-fg-muted);
  cursor: default;
  background: none;
}

.orch-item-x {
  color: var(--term-fg-muted);
}

.orch-item-x:hover {
  background: var(--term-hover-2);
  color: var(--term-fg);
}

.orch-item-go svg,
.orch-item-x svg {
  width: 15px;
  height: 15px;
}

/* the two places unrelated work can start - labelled, in the tick's slot */
.orch-item-where {
  width: auto;
  padding: 0 10px;
  font: 500 11px/1 var(--font-ui);
  white-space: nowrap;
}

.orch-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--term-fg-muted);
  font-size: 11px;
}

.orch-meta-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.orch-meta-cell .model-mark svg {
  width: 11px;
  height: 11px;
}

/* what the task runs on is also where you change it: the model list on a
   click, the level on a right-click, the same two gestures as the input
   box's own selector */
.orch-task-model {
  position: relative;
  display: inline-flex;
}

.orch-task-model-btn {
  padding: 1px 5px;
  margin: -1px -5px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.orch-task-model-btn:hover {
  background: var(--term-hover-2);
  color: var(--term-fg);
}

.orch-meta-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--term-line);
  border-radius: 999px;
  font-family: var(--term-font-mono);
  font-size: 10.5px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orch-meta-file svg {
  width: 10px;
  height: 10px;
  flex: none;
}

/* --- the input box itself ---------------------------------------------- */

.orch-card {
  position: relative;
}

/* the terminal composer field, standing alone: the prompt-line's own filled
   card is the visible box, so the sticky/transcript margins go away. The
   zeroed z-index keeps a stacking context - without one the field card
   (::before, z-index -1) would fall behind the band's background. The
   padding is symmetric here (the terminal's is not: it pays for the
   transcript above it), so every control on the row sits on one center. */
.orch-card .prompt-line {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 13px 18px;
  background: none;
}

.orch-card .prompt-line::before {
  inset: 3px 4px;
}

/* an attachment's hover label rises off the row into the conversations
   panel or the prompts sheet hanging over it, and both sit above this
   line's own context: while a label is out, the line rises over them */
.orch-card .prompt-line:has(.attach-icon-label.shown) {
  z-index: 97;
}

/* a long draft grows to the height the conversations panel covers and no
   further: past that the text scrolls inside the field (the caret is kept in
   view by the composer's own caret effect). The 26px is the prompt line's
   own padding, so the CARD ends up the panel's height, not the text.
   The cap is on this wrapper and never on the draft: a scrolling draft is a
   scroll container, which moved its own box and took the caret with it. */
.orch-draft-scroll {
  /* a column flex box, not a block: wrapping the draft in a block would put
     it in a line box, and the leading under that line sat the text 3px above
     the row's centre. As a flex child it is blockified exactly as it was
     before the wrapper existed. */
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(var(--orch-panel-max) - 26px);
  /* x is pinned rather than left to compute to auto beside y: an auto x
     reserves room for a bar that never appears, and that reserve is what
     pushed the text off the row's centre */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* a scroll box clips at its padding edge, and the caret sits ON the text's
     edge - at the end of a line, and its own negative margins at the start.
     This padding is the room it renders in; the matching negative margin
     keeps the field's own geometry unchanged. */
  padding: 0 4px;
  margin: 0 -4px;
}

/* the draft keeps its full height inside the scroller - shrinking it to fit
   is what the scrollbar is for */
.orch-draft-scroll > .prompt-draft {
  flex: none;
}

.orch-card.drag .prompt-line::before {
  border-color: var(--term-line-strong);
  border-style: dashed;
}

/* the plan being made, shown in the field the prompt was typed into: it
   takes the space the draft just gave up, so nothing above the bar shifts.
   Not part of the text mirror, so a drag across the field never picks it up. */
.orch-working {
  user-select: none;
}

/* --- the model selector (small rounded square, mark only) --------------- */

.orch-model {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* it sits right of the + dock, before the writing area */
  margin-right: 2px;
}

.orch-model-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--term-line);
  border-radius: 9px;
  background: var(--term-bg);
  color: var(--term-fg);
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.orch-model-btn:hover,
.orch-model-btn.open {
  background: var(--term-hover-2);
  border-color: var(--term-line-strong);
}

.orch-model-btn .model-mark svg {
  width: 15px;
  height: 15px;
}

/* placed by floating.ts, above the band when the window has the room. No
   floor width: the menu is exactly as wide as its longest line item, and
   the levels hold their own width, so cycling one never resizes it. */
.orch-model-pop {
  min-width: 0;
}

/* one line item per model: the model and its reasoning level are the same
   row, never two controls side by side. Right-click cycles the level. The
   name takes the slack, so every level lands in one column. */
.orch-model-row .model-name {
  flex: 1;
  text-align: left;
}

/* the tick is a fixed slot here: an empty one and a checked one must measure
   the same, or the row carrying the check would pull its level chip out of
   the column the other rows line up in. Only as wide as the check itself -
   the inherited 14px lead left a band of air past every level. */
.orch-model-row .tick {
  width: 11px;
  padding-left: 0;
  justify-content: flex-end;
}

/* the row's own air, tightened: mark, name, level, tick with nothing spare */
.orch-model-row {
  gap: 7px;
  padding: 7px 8px;
}

/* the level chip: the terminal's own, wherever it appears. The hidden copies
   of the other levels sit in the same grid cell, so the chip is already as
   wide as its longest word and switching levels moves nothing. */
.orch-effort {
  display: inline-grid;
  justify-items: center;
  align-items: center;
}

.orch-effort > * {
  grid-area: 1 / 1;
}

.orch-effort-ghost {
  visibility: hidden;
  user-select: none;
}

/* a level the provider documents as model dependent: shown, never hidden,
   but greyed so it reads as "may not be available here" */
.orch-effort.conditional {
  opacity: 0.45;
}

/* --- the orchestrator's conversation ----------------------------------- */

/* it hangs OVER the workspace inside .orch-hang (placement, width and the
   boundary line live there). It grows upward from the input, or from the
   confirmation rows when they show, and stops just below the middle of the
   screen, giving up height to the rows when both show. */
.orch-chat {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-height: var(--orch-panel-max);
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  overflow: hidden;
  transform-origin: bottom center;
  animation: orch-chat-in 150ms var(--term-ease-out) both;
}

@keyframes orch-chat-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the session rail, built like the auto git popup's repo numbers */
.orch-chat-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg);
}

.orch-chat-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.orch-chat-tab {
  height: 18px;
  padding: 0 7px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.orch-chat-tab:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.orch-chat-tab.on {
  background: var(--term-selected);
  color: var(--term-fg);
}


/* the orchestrator's skills sheet is the conversations panel's twin: it sits
   on the same boundary and opens the same way, upward off the bar, rather
   than dropping in from above the way a sheet hung under a terminal does */
.skills-sheet.orch-skills {
  transform-origin: bottom center;
  animation: orch-chat-in 150ms var(--term-ease-out) both;
}

/* whose conversation this is, said once, at the head of the panel */
.orch-chat-who {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orch-chat-who .model-mark svg {
  width: 12px;
  height: 12px;
}

/* the body IS a transcript (it carries .transcript too), so prompts and
   replies read exactly as they do inside a terminal */
.orch-chat-body {
  flex: 1;
  min-height: 0;
  padding: 12px 12px 14px;
}

/* the reply is a real markdown document: lists are lists, paths are code.
   The editor's renderer brings its own type scale, so the panel's own
   sizing is restated here rather than inherited from a file preview. */
.orch-md {
  max-width: none;
  margin: 0;
  font-size: var(--term-size, 13px);
  line-height: 1.55;
  /* the transcript keeps a terminal's pre-wrap, which is right for text but
     wrong for a document: the newlines marked leaves between <p>, <ul> and
     each <li> would each render as a blank line, so a three item list read
     as a page of gaps. Here the markup does the spacing. */
  white-space: normal;
}

.orch-md p {
  margin: 6px 0;
}

/* a list the model wrote with blank lines between items parses as a loose
   list, whose items are paragraphs - their margins would reopen the gaps */
.orch-md li > p {
  margin: 0;
}

/* the line that introduces a list belongs to it */
.orch-md p + ul,
.orch-md p + ol {
  margin-top: 2px;
}

.orch-md > :first-child {
  margin-top: 0;
}

.orch-md > :last-child {
  margin-bottom: 0;
}

.orch-md ul,
.orch-md ol {
  margin: 6px 0;
  padding-left: 20px;
}

.orch-md li {
  margin: 2px 0;
}

.orch-md li::marker {
  color: var(--term-fg-muted);
}

.orch-md code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--term-field);
  font-family: var(--term-font-mono);
  font-size: 0.88em;
  color: var(--term-fg-secondary);
}

.orch-md h1,
.orch-md h2,
.orch-md h3 {
  margin: 12px 0 4px;
  font-size: calc(var(--term-size, 13px) + 0.5px);
  font-weight: 600;
}

.orch-chat-empty {
  color: var(--term-fg-muted);
  font-family: var(--term-font-sans);
  font-size: 12px;
}

.orch-chat-btn {
  flex: none;
  align-self: center;
  margin-left: 10px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.orch-chat-btn:hover,
.orch-chat-btn.open {
  background: var(--term-hover-2);
  color: var(--term-fg);
}

/* -------------------------------------------------------- tracker overlay */

.tracker-overlay {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  width: min(1320px, calc(100vw - 96px));
  height: min(84vh, calc(100vh - 72px - var(--titlebar-h)));
  z-index: 100;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes overlay-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
}

.tracker-overlay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  flex: none;
}

/* the "WorkMap: <project>" label - same professional sans as the chrome */
.tracker-overlay-head .name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
}

.tracker-overlay-head .hint {
  font-size: 11px;
  color: var(--ink-muted);
}

.tracker-overlay-head .head-action {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 11px;
  color: var(--ink-secondary);
  cursor: pointer;
}

.tracker-overlay-head .head-action:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.tracker-overlay-head .head-action:disabled {
  cursor: default;
  opacity: 0.7;
}

.tracker-overlay-head .gen-error {
  color: var(--bad);
}

.tracker-overlay-head .gen-usage {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the regenerate button's hover estimate hangs off the head, not the cursor */
.tracker-overlay-head .regen-wrap {
  position: relative;
  display: inline-flex;
}

/* the same construction as the walkthrough estimate popup: model band on
   top, ESTIMATED row under it, sized to its widest line */
/* placed by floating.ts (fixed, over the shell root, inside the window) */
.regen-pop {
  position: fixed;
  z-index: 110;
  display: block;
  width: max-content;
  min-width: 240px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tracker-overlay-body {
  flex: 1;
  min-height: 0;
  /* the node detail panel is absolute inside this box and clipped by it -
     it can slide out of the diagram but never over the overlay chrome */
  position: relative;
  overflow: hidden;
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  top: var(--titlebar-h);
  z-index: 99;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
}

/* a review or settings window stacks OVER the diagram: the whole tracker
   pair drops beneath that window's z-99 backdrop, which dims it - closing
   the window lands back on the untouched diagram */
.overlay-backdrop.covered {
  z-index: 97;
}

.tracker-overlay.covered {
  z-index: 98;
}

/* -------------------------------------------------------- workmap prompt */

.workmap-prompt {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(460px, calc(100vw - 96px));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.workmap-prompt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.workmap-prompt-head .name {
  font-size: 13px;
  font-weight: 600;
}

.workmap-prompt-body {
  padding: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

.workmap-prompt-body p {
  margin: 0;
}

.workmap-prompt-status {
  margin-top: 10px !important;
  font-size: 11px;
  color: var(--ink-muted);
}

.workmap-prompt-status.error {
  color: var(--bad);
}

.workmap-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 14px;
}

.settings-add.primary {
  border-color: var(--accent);
  color: var(--ink);
}

/* ---------------------------------------------------------------- settings */

.settings-modal {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  width: min(1080px, calc(100vw - 80px));
  height: min(860px, calc(100vh - 72px - var(--titlebar-h)));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* invisible corner grips - the window resizes from any of its four corners */
.settings-resize {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  touch-action: none;
}

.settings-resize.nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.settings-resize.ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.settings-resize.sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.settings-resize.se {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

.settings-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 172px;
  flex: none;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
}

.settings-nav-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 5;
}

.settings-nav-resizer:hover,
.settings-nav-resizer:active {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.settings-title {
  padding: 2px 10px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 12px;
  color: var(--ink-secondary);
  cursor: pointer;
}

.settings-nav-item svg {
  flex: none;
  color: var(--ink-muted);
}

.settings-nav-item:hover {
  color: var(--ink);
}

.settings-nav-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  font-weight: 500;
}

.settings-nav-item.active svg,
.settings-nav-item:hover svg {
  color: var(--ink);
}

.settings-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.settings-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.settings-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px 24px;
}

.settings-note {
  color: var(--ink-secondary);
}

/* sections separate on whitespace and their uppercase heads; the only
   hairlines in the settings body are the .settings-line rules placed by
   hand between the groups he named (2026-09-10, back from the 2026-08-25
   no-hairline ruling) */
.settings-section {
  padding: 22px 0 10px;
}

.settings-line {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}

/* a project's name with its location beside it: the head of Settings >
   Projects next to the picker, and every Mobile Remote project row */
.settings-project-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.settings-project-dir {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.settings-section:first-child {
  padding-top: 12px;
}

.settings-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.settings-section-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.settings-section-count {
  font-size: 11px;
  color: var(--ink-muted);
}

/* a switch in the section head lines up with the row switches on the card
   below it: the card's border and 16px side padding */
.settings-section-head .set-switch {
  margin-left: auto;
  margin-right: 17px;
}

.settings-add {
  margin-left: auto;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
}

.settings-add:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.settings-add:disabled {
  opacity: 0.45;
  cursor: default;
}

.settings-empty {
  padding: 4px 0 10px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* one card per linked account - the boundary makes each account, and how
   many there are, readable at a glance */
.account-row {
  margin: 0 0 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  container-type: inline-size;
}

.shell-root[data-theme='dark'] .account-row {
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  box-shadow: none;
}

/* the card's head: mark, who it is, then the ceiling and the controls */
.account-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

/* the mark sits in a rounded tile, the way an integration list sets a
   service beside its name */
.account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

/* the Warshall account wears the person's initials on a solid disc */
.account-avatar.wacct-avatar {
  border-color: transparent;
  font-size: 12px;
}

.account-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* the plan badge shares the address's baseline: centring the boxes leaves
   its capitals riding higher than the address */
.account-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.account-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.account-meta {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.account-plan {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* the sign-in still going, or the one that failed, as a pill by the name */
.account-status {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--hover-strong);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ink-secondary);
}

.account-status.working::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-top-color: var(--ink-secondary);
  animation: git-spin 0.8s linear infinite;
}

.account-status.failed {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
}

.account-status svg {
  width: 11px;
  height: 11px;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.account-actions .settings-add {
  margin-left: 0;
}

.account-actions .settings-add + .settings-add {
  margin-left: 4px;
}

/* the row's own controls centre their glyph: a bare button leaves the icon
   on the text baseline, which sits it low in the box */
.account-actions .tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
}

/* everything under the head lines up with the address, past the mark */
.account-linking {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0 44px;
  font-size: 12px;
  color: var(--ink-secondary);
}

.account-linking a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.account-error {
  margin: 8px 0 0 44px;
  font-size: 11px;
  color: var(--bad);
}

/* ping in flight: the refresh icon just keeps spinning until the reply */
.account-ping-btn.pinging svg {
  animation: git-spin 0.9s linear infinite;
}

/* the global refresh lives in the pane header, beside the close control */
.settings-pane-head .settings-add {
  margin-right: 4px;
}

/* per-window usage detail, fetched live from the provider */
.account-usage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 4px 2px 44px;
  container-type: inline-size;
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* the account's ceiling, on the card's head before the controls: label,
   one field holding the percent and its unit, and the help mark that
   carries the sentence */
.account-ceiling {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-right: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
}

.account-ceiling-field {
  display: inline-flex;
  align-items: center;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  transition: border-color 120ms ease;
}

.account-ceiling-field:focus-within {
  border-color: var(--ink-muted);
}

.account-ceiling-box {
  width: 32px;
  height: 100%;
  padding: 0 2px 0 8px;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  outline: none;
}

.account-ceiling-unit {
  padding-right: 8px;
  color: var(--ink-muted);
}

/* the saved mark: stands beside the field once a value is stored, leaves
   while a new one is typed, back when the box commits it */
.account-ceiling-set {
  display: inline-flex;
  align-items: center;
  color: var(--ink-secondary);
}

.account-ceiling-set svg {
  width: 12px;
  height: 12px;
}

.account-ceiling-help {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
  cursor: default;
}

.account-ceiling-help:hover {
  color: var(--ink);
}

/* a narrow card keeps the address whole: the ceiling drops to its own line
   under it and the controls stay on the head */
@container (max-width: 600px) {
  .account-main {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .account-ceiling {
    order: 1;
    flex-basis: 100%;
    margin: 0 0 0 44px;
  }
}

/* one window, one table row: its name over its length, the bar over the
   reset, and what is left on the right; the columns line up down the card */
.usage-window {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) 104px;
  column-gap: 20px;
  align-items: start;
}

.usage-window-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.usage-window-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--ink);
}

.usage-window-length {
  font-size: 11px;
  color: var(--ink-muted);
}

/* the bar is centred on the name's first line */
.usage-window-meter {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding-top: 5px;
}

.usage-window-figures {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.usage-window-figures.warn {
  color: var(--warn);
}

.usage-window-figures.bad {
  color: var(--bad);
}

/* a narrow card stacks it: name and figure, then the bar and reset */
@container (max-width: 440px) {
  .usage-window {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .usage-window-name {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .usage-window-meter {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
}

.usage-bar {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 200ms ease;
}

.usage-bar-fill.warn {
  background: var(--warn);
}

.usage-bar-fill.bad {
  background: var(--bad);
}

/* something still being read or installed, with no figure to show yet: the
   usage bar's track with a segment sweeping across it */
.loading-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 2px;
  background: var(--accent);
  animation: loading-sweep 1.2s ease-in-out infinite;
}

@keyframes loading-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

/* in a settings row it stands where the version reads, one text line tall */
.harness-limit-copy > .loading-bar {
  max-width: 220px;
  margin: 6px 0;
}

.usage-window-reset {
  font-size: 11px;
  color: var(--ink-muted);
}

.usage-countdown {
  color: var(--ink-secondary);
}

.usage-error {
  color: var(--bad);
}

.settings-form {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 0 10px;
}

.settings-form input {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  font-size: 12px;
  color: var(--ink);
}

.settings-form input:focus {
  border-color: var(--accent);
}

.settings-form input {
  flex: 1;
  min-width: 0;
}

.settings-form .settings-add {
  margin-left: 0;
  flex: none;
}

/* the provider pick is a field like the inputs beside it */
.settings-form .set-select-btn {
  min-width: 116px;
  height: 28px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
}

/* the logo stays with the name; only the chevron keeps to the right edge */
.settings-form .set-select-btn > svg {
  margin-left: auto;
}

.settings-form .set-select-btn:hover,
.settings-form .set-select-btn.open {
  background: var(--surface-raised);
  border-color: var(--ink-muted);
}

/* ---------------------------------------------------- project switch menu */

/* flush under the dropdown, same width - reads as one joined control;
   placed by floating.ts (fixed, inside the window, above when short) */
.project-pop {
  position: fixed;
  z-index: 96;
  width: 280px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
}

.project-pop[data-side='above'] {
  border-radius: 10px 10px 0 0;
}

.project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.project-row:hover {
  background: var(--hover);
}

/* the project currently in view keeps a quiet boundary in the list */
.project-row.current {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.project-row .name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.project-row .dir {
  font-size: 10.5px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* close-project x - shows on row hover, pinned to the right edge */
.project-row .row-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0;
}

.project-row:hover .row-x {
  opacity: 1;
}

.project-row .row-x:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

.project-row.add {
  font-size: 12px;
  color: var(--ink-secondary);
  border-top: 1px solid var(--line);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 4px;
  padding-top: 7px;
}

.project-row.add:hover {
  color: var(--ink);
}

.tree-note {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--ink-muted);
}

/* whisper scrollbars - hairline overlay thumb, visible only while the
   pointer is over the pane; no track, no buttons */
/* HARD RULE: no naked native scrollbars anywhere, ever. The whisper style
   is universal; components wanting a different bar must style it themselves
   (the custom .osb overlay and per-pane rules below still win). */
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

*:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* --------------------------------------------------- native form controls
   HARD RULE: no default-styled native control anywhere, ever - Chromium's
   spin buttons, checkboxes, select arrows, focus rings and autofill yellow
   are all replaced the moment a control is introduced (same standing as the
   scrollbar rule above). Focus reads from the border, never a UA ring. */

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

input[type='number'] {
  appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--surface-raised) inset;
  -webkit-text-fill-color: var(--ink);
}

input[type='checkbox'] {
  appearance: none;
  width: 14px;
  height: 14px;
  flex: none;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-raised);
  cursor: pointer;
}

input[type='checkbox']:hover {
  border-color: var(--accent);
}

input[type='checkbox']:checked {
  border-color: var(--accent);
  background: var(--accent);
}

/* the check glyph - the shell's CheckIcon path, surface-colored via mask so
   it stays crisp and theme-correct over the accent fill */
input[type='checkbox']:checked::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--surface-raised);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.75 8.5 3.25 3.25 7.25-7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.75 8.5 3.25 3.25 7.25-7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

select {
  appearance: none;
  cursor: pointer;
  /* two tinted squares form the chevron - no UA arrow, theme-aware */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%),
    linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 1px),
    calc(100% - 11px) calc(50% - 1px);
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

select:focus {
  border-color: var(--accent);
}

/* ---------------------------------------------------- AI Providers cards */

/* settings rows grouped on one card, the same card the Accounts tab draws
   per account; the rows separate on their own padding */
.settings-group {
  margin-bottom: 10px;
  padding: 2px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.shell-root[data-theme='dark'] .settings-group {
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  box-shadow: none;
}

.settings-group {
  container-type: inline-size;
}

.settings-group > .harness-limit {
  padding: 12px 0;
}

/* a narrow card keeps a row's words whole: a row holding a wide control
   (a dropdown, a segmented choice, a text field, two buttons) drops it
   under the words; a switch, a number field or a single button stays
   beside them */
@container (max-width: 560px) {
  .settings-group > .harness-limit:has(.set-select-btn, .action-seg, > input[type='text'], .settings-add + .settings-add) {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .settings-group > .harness-limit:has(.set-select-btn, .action-seg, > input[type='text'], .settings-add + .settings-add) > .harness-limit-copy {
    flex-basis: 100%;
  }

  .settings-group > .harness-limit:has(.settings-add + .settings-add) > .settings-add {
    margin-left: 0;
  }
}

/* a row's run note (a failed install or update) under it, inside the card */
.settings-group-note {
  margin: -6px 0 12px;
  font-size: 11px;
  color: var(--ink-secondary);
}

/* a card's dropdowns are fields: boxed, one width, the chevron at the edge */
.settings-group .set-select-btn,
.project-card .set-select-btn {
  min-width: 132px;
  height: 28px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.settings-group .set-select-btn > svg,
.project-card .set-select-btn > svg {
  margin-left: auto;
}

.settings-group .set-select-btn:hover,
.settings-group .set-select-btn.open,
.project-card .set-select-btn:hover,
.project-card .set-select-btn.open {
  background: var(--surface);
  border-color: var(--ink-muted);
}

/* a model and its reasoning read as one pair */
.settings-group .set-select-btn + .set-select-btn {
  margin-left: -8px;
}

/* the subagent chips start at the row's title, inside the card */
.settings-group .subagent-chips {
  padding: 0 0 14px;
}

/* a copied file pattern is a path glob, so it reads in mono */
.glob-chips .subagent-chip > span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* a card's text field matches its dropdowns */
.settings-group .harness-limit.wide > input {
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
}

.settings-group .harness-limit.wide > input:focus {
  border-color: var(--ink-muted);
}

/* Projects: the project the rows describe, its picker with the location
   beside it */
.project-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.project-card .set-select-btn {
  flex: none;
  font-weight: 500;
}

/* one choice of two, side by side: a card each, the radio marks the one in
   force */
.mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.shell-root[data-theme='dark'] .mode-card {
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  box-shadow: none;
}

.mode-card:hover {
  border-color: var(--line-strong);
}

.mode-card.active {
  border-color: var(--accent);
}

.mode-radio {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  transition: border-color 120ms ease;
}

.mode-card.active .mode-radio {
  border-color: var(--accent);
}

.mode-card.active .mode-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}

/* the provider's head card (the Accounts card anatomy): the installed
   version as a mono chip beside the name */
.provider-version {
  flex: none;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 16px;
  color: var(--ink-secondary);
}

.account-status.warn {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
}

/* an install or uninstall in flight sweeps where the version line sits */
.provider-cli .account-id > .loading-bar {
  width: 220px;
  max-width: 100%;
  margin: 6px 0;
}

.provider-cli-note {
  margin: 8px 0 0 44px;
  font-size: 11px;
  color: var(--ink-secondary);
}

/* a narrow card keeps the name whole: the controls drop under it */
@container (max-width: 600px) {
  .provider-cli .account-actions {
    order: 1;
    flex-basis: 100%;
    flex-wrap: wrap;
    margin-left: 44px;
  }
}

.settings-note.provider-note {
  margin: 0 0 10px 2px;
  font-size: 12px;
}

/* a config file's row leads with a file tile, like the cards' marks */
.provider-file-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-secondary);
}

.mode-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* a row whose description IS a resolved value (a version, a login, an
   identity) sets it in mono, the way every other resolved value reads */
.mode-desc.mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

.mode-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-secondary);
}


/* ---------------------------------------------------------------------------
   Harness - push notifications (bottom right) + settings section
--------------------------------------------------------------------------- */

.push-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  z-index: 210;
}

.push-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow-pop);
}

.push-card.stop-loss {
  border-color: var(--warn);
}

.push-card.stopped {
  border-color: var(--bad);
}

.push-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.push-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-secondary);
}

.push-card.stop-loss .push-title {
  color: var(--warn);
}

.push-card.stopped .push-title {
  color: var(--bad);
}

.push-count {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--warn);
  margin-left: auto;
  min-width: 18px;
  text-align: center;
}

.push-close {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.push-card.stop-loss .push-close {
  margin-left: 0;
}

.push-close:hover {
  color: var(--ink);
}

.push-detail {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}

.push-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.push-keep {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
}

.push-keep:hover {
  background: var(--hover);
  border-color: var(--accent);
}

.harness-limit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 8px;
}

/* The router roster: one indented row per model, under the copy that
   explains it, so the toggles read as a list belonging to that setting
   rather than as more settings rows of their own. */
/* The subagent shortlist: one chip per model and level under the row that
   adds them, the level as its acronym, the remove mark big enough to hit */
.subagent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* the chips start where the row's title starts, not indented past it */
  padding: 0 8px 10px 8px;
}

.subagent-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 3px 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  font-size: 12px;
  color: var(--ink);
}

.subagent-chip-effort {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.subagent-chip-x {
  border: none;
  background: none;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
}

.subagent-chip-x:hover {
  background: var(--hover);
  color: var(--ink);
}

.router-roster {
  display: flex;
  flex-direction: column;
  padding: 0 8px 10px 20px;
}

.router-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}

.router-roster-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-secondary);
}

/* on a card the roster is a grid under its row: one cell per model, its
   logo and name with the switch at the cell's edge */
.settings-group .router-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap: 32px;
  padding: 0 0 14px;
}

.settings-group .router-roster-row {
  padding: 6px 0;
}

.settings-group .router-roster-name {
  color: var(--ink);
}

/* Task checkouts row: the counts sit between the copy and the action */
.checkout-count {
  font-size: 12px;
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* one dangerous-command rule: the command itself leads, its name sits under
   it, the three actions stand side by side on the right */
.approval-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px;
}

.approval-rule-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* the command is code, so it reads in mono; a long one wraps at its spaces
   before it splits a word */
.approval-rule-cmd {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.approval-rule-name {
  font-size: 11px;
  color: var(--ink-muted);
}

/* approve | ask | deny, one visible group - never a dropdown for these */
.action-seg {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}

.action-seg-btn {
  padding: 3px 10px;
  border: none;
  background: none;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}

.action-seg-btn + .action-seg-btn {
  border-left: 1px solid var(--line);
}

.action-seg-btn:hover {
  background: var(--hover);
}

.action-seg-btn.on {
  background: var(--selected);
  color: var(--ink);
}

.action-seg-btn.on.deny {
  color: var(--bad);
}

.approval-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
}

.approval-add > input {
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  font: inherit;
  font-size: 11.5px;
  color: var(--ink);
}

.approval-add > .approval-add-cmd {
  flex: 1;
  min-width: 0;
}

.approval-add > input:nth-child(2) {
  width: 26%;
}

/* ------------------------------------------------ Terminal tab on cards */

/* inside a card the rule rows take the card's own padding */
.settings-group > .approval-rule {
  padding: 10px 0;
}

/* a built-in rule keeps the remove button's width */
.approval-rule-slot {
  flex: none;
  width: 28px;
}

/* a card's segmented control: a field-coloured track, the chosen segment
   raised on it */
.settings-group .action-seg {
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.settings-group .action-seg-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
  transition: color 120ms ease;
}

.settings-group .action-seg-btn + .action-seg-btn {
  border-left: none;
}

.settings-group .action-seg-btn:hover {
  background: none;
  color: var(--ink);
}

.settings-group .action-seg-btn.on {
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.08),
    0 0 0 1px var(--line-strong);
}

.settings-group .action-seg-btn.on.deny {
  color: var(--bad);
}

/* a card's number field matches its dropdowns */
.settings-group .num-field {
  height: 28px;
  background: var(--surface);
}

.settings-group .num-field:focus-within {
  border-color: var(--ink-muted);
}

/* the add form under the rules card: fields like the Accounts forms */
.settings-group + .approval-add {
  padding: 4px 0 10px;
}

.approval-add > input {
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

.approval-add > input:focus {
  border-color: var(--ink-muted);
}

.approval-add .set-select-btn {
  min-width: 96px;
  height: 28px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
}

.approval-add .set-select-btn > svg {
  margin-left: auto;
}

.approval-add .set-select-btn:hover,
.approval-add .set-select-btn.open {
  background: var(--surface-raised);
  border-color: var(--ink-muted);
}

.approval-add .settings-add {
  margin-left: 0;
}

/* Settings > Harness variables: one variable per row, the name leads in mono and
   the value edits in place; the terminal values list reads the same way */
.env-var {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
}

.env-var-name {
  flex: 0 0 32%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.env-var-desc {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-muted);
}

.env-var > input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.env-var > input:focus {
  border-color: var(--accent);
}

.env-add > input {
  font-family: var(--font-mono);
}

.env-add > input:first-child {
  width: 32%;
}

.env-add > input::placeholder {
  color: var(--ink-muted);
}

/* a new variable naming one of the shell's own values is refused */
.env-conflict {
  margin: 6px 8px 0;
  font-size: 11px;
  color: var(--bad);
}

.harness-limit-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.harness-limit > input {
  width: 96px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
}

.harness-limit > input:focus {
  border-color: var(--accent);
}

/* number field with the shell's own steppers */
.num-field {
  display: inline-flex;
  align-items: stretch;
  width: 96px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  overflow: hidden;
}

.num-field:focus-within {
  border-color: var(--accent);
}

.num-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
}

.num-steps {
  display: flex;
  flex-direction: column;
  width: 17px;
  flex: none;
  border-left: 1px solid var(--line);
}

.num-steps button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.num-steps button:hover {
  background: var(--hover);
  color: var(--ink);
}

.num-steps svg {
  width: 7px;
  height: 7px;
}

/* unit symbol ($, %) standing left of its number field - the fields stack
   at one width on the right edge, so the symbols form their own aligned
   column down the section. Tightened against the row gap so the symbol
   reads as belonging to its field. */
/* a limit's unit ($, %) leads the number inside its field */
.num-unit {
  flex: none;
  align-self: center;
  padding-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

/* Appearance previews: live samples under the controls, drawn from the same
   tokens the settings drive */
.appearance-preview {
  margin: 10px 0 2px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-secondary);
  white-space: pre;
  overflow-x: auto;
}

/* Appearance: a setting that has a preview is one card, the preview its
   lower strip, edge to edge under a hairline, never a box inside the card */
.settings-group.with-preview {
  padding-bottom: 0;
  overflow: hidden;
}

.settings-group.with-preview > .appearance-preview {
  margin: 0 -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.appearance-preview.status {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: normal;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.good {
  background: var(--good);
}

.status-dot.warn {
  background: var(--warn);
}

.status-dot.bad {
  background: var(--bad);
}

/* the code sample follows the code theme and the terminal face/size, the
   same pair conversation code blocks render with */
.appearance-preview.code {
  background: var(--ctk-bg, var(--surface-sunken));
  color: var(--ctk-fg, var(--ink));
  font-family: var(--term-font-user, 'JetBrains Mono'), 'Cascadia Code', ui-monospace, monospace;
  font-size: calc(var(--term-size, 13px) - 1px);
  font-variant-ligatures: none;
}

.appearance-preview.mono {
  font-size: 12px;
}

.appearance-preview .diff-add {
  color: var(--good);
}

.appearance-preview .diff-del {
  color: var(--bad);
}

.appearance-preview.term {
  font-family: var(--term-font-user, 'JetBrains Mono'), 'Cascadia Code', ui-monospace, monospace;
  font-size: var(--term-size, 13px);
  color: var(--ink);
}

.appearance-preview .good {
  color: var(--good);
}

.appearance-preview .muted {
  color: var(--ink-muted);
}

/* shell-styled switch (see task-toggle for the compact queue variant) */
.set-switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 120ms ease;
}

.set-switch.on {
  background: var(--accent);
}

.set-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 120ms ease;
}

.set-switch.on .set-switch-knob {
  transform: translateX(13px);
}

.set-switch.small {
  width: 24px;
  height: 14px;
}

.set-switch.small .set-switch-knob {
  width: 10px;
  height: 10px;
}

.set-switch.small.on .set-switch-knob {
  transform: translateX(10px);
}

/* settings dropdown: bare value + chevron, pill on hover, floating card */
.set-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

.set-select-btn:hover,
.set-select-btn.open {
  background: var(--hover);
}

.set-select-btn svg {
  color: var(--ink-muted);
}

.set-select-pop {
  position: fixed;
  z-index: 130;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  animation: overlay-in 120ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.set-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.set-select-row:hover {
  background: var(--hover);
}

.set-select-row.selected {
  background: var(--selected);
}

.set-select-row .tick {
  display: inline-flex;
  width: 12px;
  flex: none;
  color: var(--ink);
}

/* a provider's logomark leads the value and every row that has one */
.set-select-row-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.set-select-btn .model-mark,
.set-select-row .model-mark {
  color: var(--ink);
}

/* an unset value reads Select, dim */
.set-select-btn.empty {
  color: var(--ink-muted);
}

/* the subagent picker: the orchestrator's model list in the settings
   dropdown's clothes, every row carrying the level it is set to (right-click
   cycles it), the name taking the slack so the levels stand in one column */
.subagent-pop {
  /* as wide as its longest row and no wider */
  min-width: 0;
}

.subagent-row {
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 8px;
}

.subagent-row-name {
  flex: 1;
  padding-right: 6px;
}

.subagent-row-effort {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-secondary) 12%, transparent);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-secondary);
}

/* the bound node's position rides inside the WorkMap control itself */
.tracker-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.tracker-mark-ref {
  /* rides inside the head's WorkMap button, which sizes to its text */
  font-family: var(--term-font-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--term-fg-secondary);
}

.tracker-mark:hover .tracker-mark-ref,
.tracker-mark.on .tracker-mark-ref {
  color: var(--term-fg);
}

/* compact stand-in for a loaded task prompt - click reveals the real text */
.run-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1px 9px;
  border: none;
  border-radius: 999px;
  background: var(--term-hover-2);
  box-shadow: var(--term-shadow-hairline);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--term-fg);
  cursor: pointer;
  transition: background-color 100ms;
}

.run-pill:hover {
  background: var(--term-line-strong);
}

/* stop control pinned to the right end of the input line - the composer's
   one solid control while a run is in flight */
.prompt-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  /* level with Prompts, on the line's vertical middle */
  align-self: center;
  /* a filled disc with a square in it: the stop mark everything uses, and it
     reads better at this size than a rounded square holding another one. Its
     height matches the Skills button so the two sit level at the line's end */
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--term-fg);
  color: var(--term-bg);
  cursor: pointer;
  transition: background-color 200ms, transform 200ms;
}

/* the square carries the button: too small and the control reads as a dot
   with a speck in it. Sized here rather than on the icon, which the build
   menu's own stop shares. */
.prompt-stop svg {
  width: 12px;
  height: 12px;
}

.prompt-stop:hover {
  background: color-mix(in srgb, var(--term-fg) 84%, var(--term-bg));
}

.prompt-stop:active {
  transform: scale(0.94);
}

/* a command parked on the user's decision - the terminal's approval card */
.approval-ask {
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--term-bg);
  box-shadow: var(--term-shadow-card);
  font-family: var(--term-font-sans);
  line-height: 1.5;
  animation: term-fade-up 350ms var(--term-ease-out) both;
}

.approval-ask-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-ask-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--term-fg);
}

.approval-ask-rule {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--term-field);
  font-size: 11px;
  font-weight: 500;
  color: var(--term-fg-secondary);
}

.approval-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--term-fg-muted);
  font-variant-numeric: tabular-nums;
}

.approval-ask-cmd {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--term-fg);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--term-inset);
  box-shadow: var(--term-shadow-hairline);
  font-family: var(--term-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
}

.approval-ask-actions {
  display: flex;
  gap: 8px;
}

/* a system line the work stopped on, with its control beside it: Auto
   continue on the provider's usage limit or a passing provider error,
   Continue on an account ceiling */
.entry-halt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* the app sent the conversation on by itself: the line stands where the
   prompt would, on the agent's side, in the working line's voice (a sparkle,
   a shimmering verb while the run is in flight) and never as a prompt bubble */
.entry-continue {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--term-size, 13px);
  font-weight: 500;
  color: var(--term-fg-secondary);
  animation: term-fade-up 350ms var(--term-ease-out) both;
}

.entry-continue::before {
  content: '✻ ';
  white-space: pre;
  color: var(--term-fg-secondary);
}

/* the agent's first output sits a touch closer to the line it answers */
.entry-continue + :not(.prompt-line) {
  margin-top: 12px;
}

/* an error line the terminal goes on from by itself: the countdown alone */
.halt-note {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--term-fg-secondary);
  white-space: nowrap;
}

/* prompts typed while a run is in flight: one right-aligned line above the
   composer carries the count; the queue itself opens off it in a floating
   panel over the transcript (floating.ts), so the output keeps its room */
.queued-bar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px 0;
  font-family: var(--term-font-sans);
}

.queued-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px 0 8px;
  border: none;
  border-radius: 7px;
  background: var(--term-field);
  color: var(--term-fg-secondary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.queued-btn:hover,
.queued-btn.open {
  background: var(--term-hover);
  color: var(--term-fg);
}

.queued-btn svg {
  transition: transform 150ms;
}

.queued-btn.open svg {
  transform: rotate(180deg);
}

.queued-count {
  font-variant-numeric: tabular-nums;
  color: var(--term-fg);
}

.queued-pop {
  position: fixed;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* deliberately narrow: a long prompt is cut to one line here and read
     whole by hovering it (TruncationTip) */
  width: 340px;
  padding: 5px;
  border: none;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  font-family: var(--term-font-sans);
  animation: term-pop-in 200ms var(--term-ease-out) both;
  transform-origin: bottom right;
}

.queued-pop[data-side='below'] {
  transform-origin: top right;
}

.queued-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 4px 0 6px;
  border-radius: 7px;
  color: var(--term-fg);
  font-size: 12.5px;
}

.queued-row:hover {
  background: var(--term-field);
}

/* the tag says where the row stands: the first goes out next, the rest wait */
.queued-label {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--term-field);
  color: var(--term-fg-secondary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.queued-label.next {
  background: var(--term-fg);
  color: var(--term-bg);
}

.queued-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the row's controls: edit it, what rode with it, drop it */
.queued-act {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--term-fg-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, color 150ms;
}

.queued-row:hover .queued-act,
.queued-act:focus-visible {
  opacity: 1;
}

.queued-act:hover {
  color: var(--term-fg);
}

/* a prompt that carries files says so, and names them on hover */
.queued-clip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 20px;
  color: var(--term-fg-secondary);
}

.queued-clip svg {
  width: 12px;
  height: 12px;
}

.queued-clip-count {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* the composer's Auto continue control beside Prompts: the icon, with the
   bare mark at its bottom right corner saying how far it goes on by
   itself, 1 or ∞ */
.skills-btn.auto-continue {
  position: relative;
  padding: 0 5px;
}

.skills-btn.auto-continue + .skills-btn {
  margin-left: 0;
}

.skills-btn.auto-continue.on {
  color: var(--term-fg);
}

.auto-continue-mark {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--term-fg);
  pointer-events: none;
}

.halt-btn {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: none;
  border-radius: 7px;
  background: var(--term-bg);
  box-shadow: var(--term-shadow-btn);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--term-fg);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.halt-btn:hover {
  background: var(--term-hover);
}

.halt-btn.on {
  background: var(--term-fg);
  color: var(--term-bg);
}

.halt-btn:disabled {
  cursor: default;
  color: var(--term-fg-muted);
}

.approval-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: var(--term-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--term-bg);
  cursor: pointer;
  transition: background-color 150ms, color 150ms, transform 150ms;
}

.approval-btn:hover {
  background: color-mix(in srgb, var(--term-fg) 84%, var(--term-bg));
}

.approval-btn:active {
  transform: scale(0.96);
}

.approval-btn.deny {
  background: var(--term-bg);
  box-shadow: var(--term-shadow-btn);
  color: var(--term-fg-secondary);
}

.approval-btn.deny:hover {
  background: var(--term-hover);
  color: var(--term-bad);
}

/* terminal right-click menu - the standard edit actions */
.term-menu-backdrop {
  position: fixed;
  inset: 0;
  top: var(--titlebar-h);
  z-index: 129;
}

.term-menu {
  position: fixed;
  z-index: 130;
  min-width: 148px;
  padding: 4px;
  border: none;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-raised);
  font-family: var(--term-font-sans);
  letter-spacing: -0.01em;
  animation: term-pop-in 200ms var(--term-ease-out) both;
}

.term-menu button {
  display: block;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 12.5px;
  color: var(--term-fg);
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms;
}

.term-menu button:hover:not(:disabled) {
  background: var(--term-field);
}

.term-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ------------------------------------------------------------------ reviews
   The review window: commit history, reviews you opened, reviews sent to
   you. Chrome follows the shell tokens; code follows the mono face. */

.review-window {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 96px));
  height: min(880px, calc(100vh - 48px - var(--titlebar-h)));
  z-index: 100;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  flex: none;
}

.review-head .spacer,
.rv-commit .spacer,
.rv-commitview-head .spacer,
.rv-desc-meta .spacer,
.rv-desc-top .spacer,
.rcm-foot .spacer {
  flex: 1;
}

.review-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.review-tabs {
  display: flex;
  gap: 2px;
}

/* every tab name stays on its own single line, however narrow the window
   the review opens in */
.review-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  background: none;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.review-tabs button:hover {
  background: var(--hover);
  color: var(--ink);
}

.review-tabs button.active {
  background: var(--selected);
  color: var(--ink);
}

.review-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.review-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* -------------------------------------------------- commit history tab */

.rv-history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rv-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.rv-count {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 11px;
}

.rv-commits {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 14px;
}

.rv-commit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
}

/* the history carries quiet column heads over its rows, aligned on the
   same flex slots the rows use */
.rv-commit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px 6px;
}

.rv-commit-head .spacer {
  flex: 1;
}

.rv-commit-head .rv-col {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* the head's first cell keeps the CHIP column's width and lets its longer
   label overflow into the widened gap, so the pull review head lands
   exactly over the chips */
.rv-commit-head .rv-col.ref {
  width: 52px;
  overflow: visible;
}

/* the app's refs slot is narrower than the demo's - there the label must
   take its natural width or it runs into the pull review head */
.shell-root:not([data-demo]) .rv-commit-head .rv-col.ref {
  width: auto;
  min-width: 52px;
}

/* browser demo: clear air between the workmap and pull review columns -
   rows and heads shift together, they share the refs slot */
.shell-root[data-demo] .rv-commit-refs {
  width: 212px;
  gap: 44px;
}

.rv-commit-head .rv-col.subject {
  margin-left: 7%;
}

/* multi-repo projects: which repository each commit landed in - the head
   and the rows share the slot's width */
.rv-commit-head .rv-col.repo {
  width: 104px;
}

.rv-repo {
  width: 104px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
  font-size: 11px;
}

.rv-commit-head .rv-col.sha {
  width: 46px;
}

.rv-commit:hover {
  background: var(--hover);
}

.req-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  min-width: 52px;
  text-align: center;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  flex: none;
}

.req-chip:hover {
  background: var(--hover);
}

.req-chip.blank {
  visibility: hidden;
  border: none;
  cursor: default;
}

.req-chip.small {
  min-width: 0;
  font-size: 10px;
  padding: 1px 6px;
  cursor: default;
}

.pr-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 3px 7px;
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  cursor: pointer;
  flex: none;
}

.pr-chip:hover {
  color: var(--ink);
}

.rv-commit-refs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 160px;
  flex: none;
}

.rv-subject {
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 0;
  margin-left: 7%;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-subject:hover {
  text-decoration: underline;
}

.rv-when {
  color: var(--ink-muted);
  font-size: 11px;
  flex: none;
}

.rv-sha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-secondary);
  text-decoration: none;
  flex: none;
}

.rv-sha.link:hover {
  color: var(--ink);
}

/* the drill-in of a commit without a PR: head bar, then the same rail +
   detail split the PR code tab uses (changed-files tree on the left) */
.rv-commitview {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rv-commitview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.rv-commitview-head .subject {
  font-size: 13px;
  font-weight: 600;
}

.rv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
}

.rv-back:hover {
  background: var(--hover);
  color: var(--ink);
}

/* ------------------------------------------------------------ dropdowns */

.rv-drop {
  position: relative;
}

.rv-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
}

.rv-drop-btn:hover {
  background: var(--hover);
}

.rv-drop-pop {
  /* placed by floating.ts (fixed, over the shell root, inside the window) */
  position: fixed;
  z-index: 120;
  min-width: 230px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
}

.rv-drop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.rv-drop-item:hover {
  background: var(--hover);
}

.rv-drop-item.active {
  font-weight: 600;
}

.rv-drop-none {
  padding: 8px 10px;
  color: var(--ink-muted);
  font-size: 11px;
}

/* --------------------------------------------------- review tabs layout */

.rv-split {
  flex: 1;
  display: flex;
  min-height: 0;
}

.rv-rail {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
}

.rv-prlist {
  flex: 1;
  min-height: 130px;
  overflow-y: auto;
  padding: 8px;
}

.rv-pritem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.rv-pritem:hover {
  background: var(--hover);
}

.rv-pritem.active {
  background: var(--selected);
}

.rv-pritem .ids {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rv-pritem .rref {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 5px;
}

.rv-pritem .prid {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.rv-pritem .ttl {
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px 12px;
}

.rv-tree-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 2px 8px 6px;
}

.rv-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px 18px 18px;
}

.rv-detail > * {
  flex: none;
}

/* the overview card fills the pane whether viewing or editing; the pane is
   the only thing that scrolls - the edit box itself never does */
.rv-desc.grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* the whole remaining card is the click-to-edit surface, not just the text */
.rv-desc.grow .rv-desc-body {
  flex: 1;
}

.rv-desc.editing .rv-desc-edit {
  flex: 1;
  overflow: hidden;
  resize: none;
}

/* ------------------------------------------------- description + people */

.rv-desc {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* top line of the card: requirement ref left, save state right */
.rv-desc-top {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.rv-desc-node {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}

.rv-desc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.rv-desc-meta .title.editable {
  cursor: text;
}

/* the WorkMap in-place editor look: a tight boundary box forming around the
   text right where it sits - no buttons, click off to save */
.rv-title-editwrap {
  flex: 1;
  min-width: 120px;
}

.rv-title-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding: 2px 6px 3px;
  margin: -3px 0;
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  outline: none;
}

.rv-desc-meta .title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.rv-desc-meta .by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
  white-space: nowrap;
  flex: none;
}

.rv-desc-meta .by b {
  color: var(--ink);
  font-weight: 600;
}

.rv-desc-top .saved {
  color: var(--ink-muted);
  font-size: 11px;
  flex: none;
}

.rv-desc-meta .prid {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-secondary);
  white-space: nowrap;
  flex: none;
}

.rv-desc-meta .commits {
  color: var(--ink-muted);
  font-size: 11px;
}

.rv-status {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-secondary);
}

/* open reads as the strong state - filled graphite, no amber */
.rv-status.open {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}

.rv-status.approved,
.rv-status.merged {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
}

.rev-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  flex: none;
}

.rev-badge.approved {
  border-color: var(--good);
}

.rev-badge.changes {
  border-color: var(--bad);
}

.rv-reviewers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.rv-reviewer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: 12px;
}

.rv-reviewer.option {
  border: none;
  padding: 0;
}

.rv-reviewer .rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0;
}

.rv-reviewer .rm:hover {
  color: var(--bad);
}

.rv-gate {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 11px;
}

.rv-desc-body {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.rv-desc-body.editable,
.rv-desc-body.commentable {
  cursor: text;
}

.rv-desc-body.editable:hover,
.rv-desc-body.commentable:hover {
  outline: 1px dashed var(--line-strong);
  outline-offset: 6px;
  border-radius: 4px;
}

/* rendered markdown: the GitHub-style stepped heading scale over the 12px
   body - every # level reads clearly different from the next */
.rv-desc-body h1,
.rv-desc-body h2,
.rv-desc-body h3,
.rv-desc-body h4,
.rv-desc-body h5,
.rv-desc-body h6,
.rcomment-body h1,
.rcomment-body h2,
.rcomment-body h3,
.rcomment-body h4,
.rcomment-body h5,
.rcomment-body h6 {
  margin: 14px 0 6px;
  font-weight: 600;
  line-height: 1.3;
}

.rv-desc-body h1,
.rcomment-body h1 {
  font-size: 20px;
  font-weight: 650;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.rv-desc-body h2,
.rcomment-body h2 {
  font-size: 17px;
  font-weight: 650;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.rv-desc-body h3,
.rcomment-body h3 {
  font-size: 15px;
}

.rv-desc-body h4,
.rcomment-body h4 {
  font-size: 13px;
}

.rv-desc-body h5,
.rcomment-body h5 {
  font-size: 12px;
}

.rv-desc-body h6,
.rcomment-body h6 {
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.rv-desc-body p,
.rcomment-body p {
  margin: 4px 0;
}

.rv-desc-body blockquote,
.rcomment-body blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-secondary);
}

.rv-desc-body hr,
.rcomment-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

.rv-desc-body ul,
.rv-desc-body ol,
.rcomment-body ul,
.rcomment-body ol {
  margin: 4px 0;
  padding-left: 20px;
}

.rv-desc-body code,
.rcomment-body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-sunken);
  border-radius: 4px;
  padding: 1px 4px;
}

.rv-desc-body pre,
.rcomment-body pre {
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 8px 10px;
  overflow-x: auto;
}

.rv-desc-edit {
  width: 100%;
  min-height: 180px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  background: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  resize: vertical;
}

/* no OS-colored focus ring on the review text boxes - focus reads from the
   border alone */
.rv-desc-edit:focus,
.rcomment-inline-input:focus {
  outline: none;
  border-color: var(--line-strong);
}

/* the Confirm/Cancel row keeps clear air off the edit box's bottom edge */
.rv-desc .rcomment-actions {
  margin-top: 10px;
  padding-bottom: 2px;
}

/* ------------------------------------------------------------ the diff */

.rdiff-empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 12px;
}

.rdiff-pages {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 10px;
  overflow: hidden;
}

.rdiff-page {
  border: none;
  background: none;
  color: var(--ink-muted);
  font-size: 12px;
  min-width: 24px;
  padding: 2px 4px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
}

.rdiff-page:hover {
  color: var(--ink);
}

.rdiff-page.current {
  color: var(--ink);
  font-weight: 600;
}

/* the strip slides rather than scrolls: these step it a windowful at a
   time, so every page number stays reachable by click */
.rdiff-page-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 6px;
}

.rdiff-page-step svg {
  width: 13px;
  height: 13px;
}

.rdiff-page-step:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover);
}

.rdiff-page-step:disabled {
  opacity: 0.32;
  cursor: default;
}

.rdiff-file {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  margin-bottom: 16px;
  overflow: hidden;
}

.rdiff-file-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  position: sticky;
  top: 0;
  z-index: 2;
}

.rdiff-path {
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rdiff-path .dir {
  color: var(--ink-muted);
}

.rdiff-path .base {
  font-weight: 600;
}

.rdiff-path .badge {
  margin-left: 8px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  color: var(--ink-secondary);
}

.rdiff-path .badge.added {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
}

.rdiff-path .badge.deleted {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 55%, transparent);
}

.rdiff-counts {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
}

.rdiff-counts .plus {
  color: var(--good);
}

.rdiff-counts .minus {
  color: var(--bad);
  margin-left: 8px;
}

.rdiff-binary {
  padding: 14px;
  color: var(--ink-muted);
  font-size: 12px;
}

/* the rendered/source control on a markdown or SVG file's header - the same
   choice the editor makes on a tab double-click */
.rdiff-render {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
}

.rdiff-render:hover {
  background: var(--hover);
  color: var(--ink);
}

.rdiff-render.on {
  background: var(--selected);
  color: var(--ink);
}

/* a file shown as itself: an image, a pdf, a document, rendered markdown or
   a rendered SVG. The pane scrolls; the content never decides the width. */
.rdiff-preview {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  overflow-x: auto;
}

.rdiff-preview .rdiff-side {
  flex: 1;
  min-width: 0;
}

/* before and after, side by side - what a changed image actually is */
.rdiff-preview.paired .rdiff-side {
  flex: 1 1 0;
}

.rdiff-side-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rdiff-preview img {
  display: block;
  max-width: 100%;
  /* a tall image must not push the file header off the pane */
  max-height: 620px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface-sunken);
}

/* the document surfaces read as documents, not as code rows */
.rdiff-preview .rv-desc-body {
  max-height: 720px;
  overflow: auto;
}

/* a notebook's cells, read only: the pane's cell shapes without its
   toolbar, scroll surface or insert rows */
.rdiff-preview .nb-static {
  flex: 1;
  min-width: 0;
}

.nb-static .nb-cells {
  padding: 0;
}

.nb-static .nb-slot + .nb-slot {
  margin-top: 8px;
}

/* .pdfv is a flex column that fills its parent - give it something to fill */
.rdiff-preview.pdf .rdiff-side {
  display: flex;
  height: 720px;
}

/* with a render control on the row, the counts ride beside it rather than
   taking their own share of the free space */
.rdiff-render + .rdiff-counts {
  margin-left: 0;
}

.rdiff-code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  background: var(--surface);
  padding: 3px 0 5px;
}

.rdiff-row {
  display: grid;
  grid-template-columns: 52px 18px 1fr;
  width: 100%;
  position: relative;
}

.rdiff-row .ln {
  text-align: right;
  padding: 0 8px 0 4px;
  color: var(--ink-muted);
  font-size: 11px;
  user-select: none;
}

.rdiff-row .mark {
  text-align: center;
  color: var(--ink-muted);
  user-select: none;
}

/* long lines wrap - the section never scrolls sideways */
.rdiff-row .code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-right: 20px;
}

.rdiff-row.add {
  background: color-mix(in srgb, var(--good) 12%, transparent);
}

.rdiff-row.add .mark {
  color: var(--good);
  font-weight: 700;
}

.rdiff-row.del {
  background: color-mix(in srgb, var(--bad) 11%, transparent);
}

.rdiff-row.del .mark {
  color: var(--bad);
  font-weight: 700;
}

/* commented lines carry a soft blue wash, the live selection a stronger one -
   both LAYER over the add/del tint instead of replacing it. This light blue
   is his sanctioned exception to the no-blue rule - keep it */
.rdiff-row.anchored {
  background: rgba(96, 165, 250, 0.13);
}

.rdiff-row.add.anchored {
  background:
    linear-gradient(rgba(96, 165, 250, 0.13), rgba(96, 165, 250, 0.13)),
    color-mix(in srgb, var(--good) 12%, transparent);
}

.rdiff-row.del.anchored {
  background:
    linear-gradient(rgba(96, 165, 250, 0.13), rgba(96, 165, 250, 0.13)),
    color-mix(in srgb, var(--bad) 11%, transparent);
}

.rdiff-row.sel {
  background: rgba(96, 165, 250, 0.28);
}

.rdiff-row.add.sel {
  background:
    linear-gradient(rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0.28)),
    color-mix(in srgb, var(--good) 12%, transparent);
}

.rdiff-row.del.sel {
  background:
    linear-gradient(rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0.28)),
    color-mix(in srgb, var(--bad) 11%, transparent);
}

/* the walkthrough's explained lines carry the live-selection wash - same
   strength as .sel, layered over the add/del tint the same way */
.rdiff-row.walk {
  background: rgba(96, 165, 250, 0.28);
}

.rdiff-row.add.walk {
  background:
    linear-gradient(rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0.28)),
    color-mix(in srgb, var(--good) 12%, transparent);
}

.rdiff-row.del.walk {
  background:
    linear-gradient(rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0.28)),
    color-mix(in srgb, var(--bad) 11%, transparent);
}

/* collapsed comment: a pin at the right edge, centered on the block */
.rcm-pins {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 4px;
}

.rcm-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink-secondary);
  cursor: pointer;
  padding: 0;
}

.rcm-pin:hover {
  background: var(--hover);
  color: var(--ink);
}

/* ------------------------------------------------------- collapsed gaps */

.rdiff-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 3px 12px;
}

.gap-pull {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
}

.gap-pull:hover {
  background: var(--hover);
  color: var(--ink);
}

.gap-pull .flip {
  display: inline-flex;
  transform: rotate(180deg);
}

.gap-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 11px;
  font-family: var(--font-ui);
  padding: 0 7px;
}

.gap-dots .dots {
  font-size: 13px;
  color: var(--ink-secondary);
}

.gap-all {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}

.gap-all:hover {
  background: var(--hover);
}

/* inside a gap the expand-all is plain link text like the pulls beside it,
   not a pill */
.rdiff-gap .gap-all {
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-family: var(--font-ui);
  padding: 3px 7px;
  border-radius: 6px;
}

.rdiff-gap .gap-all:hover {
  background: var(--hover);
  color: var(--ink);
}

/* ------------------------------------------------------------- comments */

.rdiff-orphans {
  padding: 8px 12px 0;
}

.rcomment-card {
  margin: 4px 14px 8px 70px;
  max-width: 720px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 8px 12px;
  font-family: var(--font-ui);
}

.rcomment-card.folded {
  margin: 4px 0 8px;
}

.rcomment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.rcomment-meta .spacer {
  flex: 1;
}

/* edit/delete on the top right of an expanded comment */
.rcm-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
}

.rcm-tool:hover {
  background: var(--hover);
  color: var(--ink);
}

.rcomment-meta .who {
  font-weight: 600;
  color: var(--ink-secondary);
}

.rcomment-body {
  font-size: 12px;
  line-height: 1.5;
}

/* the plain composer - just the text box and its two buttons, no chrome */
.rcomment-inline {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
}

/* inside a code section it hangs indented under the selection */
.rdiff-code .rcomment-inline {
  margin: 6px 14px 10px 70px;
  max-width: 640px;
}

.rcomment-inline-input {
  min-height: 64px;
  resize: vertical;
  font: inherit;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.rcomment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.rbtn {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.rbtn:hover {
  background: var(--hover);
}

.rbtn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.rbtn.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.rbtn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ------------------------------------------------------- comments tab */

.rv-comments {
  padding-bottom: 8px;
}

/* the general comment box leads the tab */
.rv-comments .rcomment-inline {
  margin: 0 0 14px;
}

/* comment cards stack; their headers never stick like the diff's do */
.rcm .rdiff-file-head {
  position: static;
}

/* the comment itself is the section footer - same band as the header */
.rcm-foot {
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  padding: 8px 12px;
  font-family: var(--font-ui);
}

.rcm-foot-main,
.rcm-reply {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rcm-foot .who {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.rcm-foot .txt {
  font-size: 12px;
  line-height: 1.5;
  min-width: 0;
}

.rcm-foot .when {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.rcm-reply {
  margin-top: 6px;
  padding-left: 18px;
}

.rcm-act {
  border: none;
  background: none;
  color: var(--ink-secondary);
  font-size: 11px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 6px;
  align-self: center;
}

.rcm-act:hover {
  background: var(--hover);
  color: var(--ink);
}

.rcm-check {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  align-self: center;
}

.rcm-check:hover {
  background: var(--hover);
  color: var(--ink);
}

.rcm-check.on {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
}

.rcm-check.static {
  cursor: default;
}

.rcm-check.static:hover {
  background: var(--surface-raised);
  color: var(--good);
}

/* -------------------------------------------- review window, second pass */

/* offscreen file sections skip layout/paint - big reviews stay smooth */
.rdiff-file {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* the diff speaks the same token palette as the editor (--tk-* land on
   .review-window) */
.rdiff-code .tk-com {
  color: var(--tk-com, var(--ink-muted));
  font-style: var(--tk-com-style, normal);
}

.rdiff-code .tk-str {
  color: var(--tk-str, var(--ink-secondary));
}

.rdiff-code .tk-kw {
  color: var(--tk-kw, inherit);
}

.rdiff-code .tk-num {
  color: var(--tk-num, inherit);
}

.rdiff-code .tk-type {
  color: var(--tk-type, inherit);
}

.rdiff-code .tk-const {
  color: var(--tk-const, var(--tk-type, inherit));
  font-style: var(--tk-const-style, normal);
}

.rdiff-code .tk-fn {
  color: var(--tk-fn, inherit);
}

.rdiff-code .tk-prop {
  color: var(--tk-prop, inherit);
}

.rdiff-code .tk-attr {
  color: var(--tk-attr, inherit);
}

.rdiff-code .tk-tag {
  color: var(--tk-tag, inherit);
}

.rdiff-code .tk-punc {
  color: var(--tk-punc, inherit);
}

/* branch filter label inside its drop button - git glyph + name */
.rv-branch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* clickable relative date - toggles to the raw committer date */
.rv-when {
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
  flex: none;
}

.rv-when:hover {
  color: var(--ink-secondary);
}

/* detail sub-navigation: Description | Code | Reviewers */
.rv-subnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 12px;
}

.rv-subnav .spacer {
  flex: 1;
}

/* the walkthrough is each PR's headline action on the subnav's right edge;
   hovering it (its wrapper - a disabled button swallows mouse events) opens
   the estimate breakdown popup */
.walk-launch-wrap {
  display: inline-flex;
  flex: none;
}

.rv-subnav .rbtn {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  flex: none;
}

.rv-subnav .rbtn + .rbtn {
  margin-left: 6px;
}

.rv-subnav .rbtn:hover {
  background: var(--hover);
  color: var(--ink);
}

.rv-subnav .rbtn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.rv-subnav .rbtn.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.rv-subnav .rbtn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.rv-subnav button:not(.icon-btn) {
  border: none;
  background: none;
  color: var(--ink-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
}

.rv-subnav button:not(.icon-btn):hover {
  background: var(--hover);
  color: var(--ink);
}

.rv-subnav button:not(.icon-btn).active {
  background: var(--selected);
  color: var(--ink);
}

/* comment-presence toggle beside the walkthrough button */
.rv-comments-toggle {
  margin-right: 8px;
}

/* draggable split between the PR list and the changed-files tree */
.rv-rail-divider {
  flex: none;
  height: 5px;
  margin: -2px 0;
  cursor: ns-resize;
  border-top: 1px solid var(--line);
}

.rv-rail-divider:hover {
  border-top-color: var(--line-strong);
}

/* draggable split between the rail and the detail pane; the rail's own
   right border stays the single visible line */
.rv-col-divider {
  flex: none;
  width: 5px;
  margin: 0 -2px 0 -3px;
  cursor: ew-resize;
  z-index: 3;
}

.rv-col-divider:hover {
  background: var(--hover-strong);
}

/* reviewers as line items - the circle is the avatar, not a pill boundary */
.rv-reviewers-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rv-reviewers-head .rv-gate {
  margin-left: auto;
}

.rv-reviewer-list {
  margin-top: 10px;
}

.rv-reviewer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.rv-reviewer-row .nm {
  font-weight: 500;
}

.rv-reviewer-row .verdict {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 11px;
}

.rv-reviewer-row .rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px;
}

.rv-reviewer-row .rm:hover {
  color: var(--bad);
}

/* -------------------------------------------------- code walkthrough */

/* estimate hover breakdown - the auto-git popup frame: header band carries
   the fallback model, the tail melts into the band like the git popup's */
/* sized to its widest line - a spend value never wraps to a second line */
.git-view.walk-est {
  width: max-content;
  min-width: 296px;
  max-width: min(460px, calc(100vw - 16px));
}

.walk-est-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  padding: 9px 11px;
  font-family: var(--font-mono);
}

.walk-est-rows .lbl {
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

.walk-est-rows .val {
  color: var(--ink);
  white-space: nowrap;
  min-height: 12px;
}

.walk-est-rows .val .bad {
  color: var(--bad);
}

/* the walkthrough speech bubble: node-view chrome, reading-card insides.
   It is placed where its whole content fits, so the body never scrolls -
   except in the .scroll last resort when no side of the code has room */
.walk-pop {
  width: 340px;
}

.walk-pop .node-view-body {
  overflow: visible;
}

.walk-pop.scroll .node-view-body {
  overflow: auto;
}

.walk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.walk-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}

.walk-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 650;
}

.walk-end {
  display: inline-flex;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 2px;
}

.walk-end:hover {
  color: var(--ink);
}

/* minimized bubble: a chip row riding the highlighted block's right edge -
   the comment chip brings the explanation back, the pencil opens the file */
.walk-chips {
  position: fixed;
  display: flex;
  gap: 6px;
}

.walk-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink-secondary);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.walk-restore:hover {
  color: var(--ink);
}

.walk-text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* explanation paragraphs stack with a clear line of air between them */
.walk-text + .walk-text {
  margin-top: 9px;
}

/* considerations/edge cases the step's code covers - a quiet footnote */
.walk-notes {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.walk-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.walk-nav .rbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11.5px;
}

/* selected entry in a dropdown carries a tick and the selection wash */
.rv-drop-item.active {
  background: var(--selected);
}

.rv-drop-item .tick {
  margin-left: auto;
  display: inline-flex;
  color: var(--ink-secondary);
}

/* provider marks stay monochrome ink (the base .rev-badge color) - no
   brand tints in the chrome */

/* Worktrees settings (Harness tab): text fields need room and read left to
   right, unlike the right-aligned numeric limits above them */
.harness-limit.wide input {
  width: 220px;
  text-align: left;
}

.harness-limit.wide input::placeholder {
  color: var(--ink-muted);
}

/* per-repository setup rows: the command box is the single-line field grown
   in height only - one command per line, no resize grip, no dropdown read */
.harness-limit.setup-row textarea {
  flex: 1;
  min-width: 220px;
  height: 74px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  resize: none;
  overflow-y: auto;
  white-space: pre;
  outline: none;
}

.harness-limit.setup-row textarea:focus {
  border-color: var(--accent);
}

.harness-limit.setup-row textarea::-webkit-scrollbar {
  width: 8px;
}

.harness-limit.setup-row textarea::-webkit-scrollbar-track {
  background: transparent;
}

.harness-limit.setup-row textarea::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  background-clip: padding-box;
}

/* --------------------------------------------------- node detail popup */

/* the same construction as the requirement editor's context window - a
   plain panel floating beside its node, no bubble chrome */
.node-detail {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.ndv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.ndv-ref {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.ndv-ref.small {
  padding: 0 5px;
  font-size: 9.5px;
}

.ndv-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ndv-metrics {
  /* the panel is narrow, so the counts give way before the name does */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ndv-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}

.ndv-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 12px;
  color: var(--ink-secondary);
  cursor: pointer;
}

.ndv-tabs button:hover {
  background: var(--hover);
  color: var(--ink);
}

.ndv-tabs button.active {
  background: var(--selected);
  color: var(--ink);
}

.ndv-tabs button i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.ndv-body {
  padding: 12px 16px 14px;
  min-height: 130px;
  overflow: auto;
}

.ndv-empty {
  padding: 10px 4px;
  font-size: 12px;
  color: var(--ink-muted);
}

.ndv-error {
  margin-top: 8px;
  font-size: 11px;
  color: var(--bad);
}

.ndv-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ------------------------------------------------ conversations tab */

.ndv-conv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.ndv-conv-row:hover {
  background: var(--hover);
}

/* the opened conversation's own view: a quiet breadcrumb, no chrome */
.ndv-conv-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 2px;
}

.ndv-conv-return {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
}

.ndv-conv-return svg {
  width: 12px;
  height: 12px;
}

.ndv-conv-return:hover {
  color: var(--ink);
}

.ndv-crumb-sep {
  font-size: 12px;
  color: var(--ink-muted);
}

.ndv-conv-head .ndv-conv-meta {
  margin-left: auto;
}

.ndv-conv-mark {
  flex: none;
  display: inline-flex;
  color: var(--ink-secondary);
}

.ndv-conv-name {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.ndv-conv-teaser {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ndv-conv-meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* one unified transcript look, whatever provider produced the turns -
   clean flow, no guide rails or rules */
/* stored conversations read exactly like the live transcript: the prompt is
   a small tinted bubble on the right, the model's output an unstyled
   document on the left - one rendering language on both surfaces */
.ndv-transcript {
  margin: 12px 6px 12px;
  font-family: var(--font-ui);
}

.ndv-turn {
  margin-bottom: 22px;
}

.ndv-turn:last-child {
  margin-bottom: 6px;
}

/* when the prompt went off - recorded by the app at submit time; it rides
   the bubble's edge */
.ndv-when {
  margin-bottom: 4px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* the bubble alone marks the user's words, no label needed */
.ndv-prompt {
  width: fit-content;
  max-width: 85%;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-sunken);
}

.ndv-prompt-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ndv-stream {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 9px;
}

.ndv-model {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* the narrow panel gets a shorter code surface than the terminal column */
.ndv-model .md-block-scroll {
  max-height: 300px;
  font-size: 11px;
}

.ndv-reasoning {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.ndv-reasoning-head {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ndv-reasoning-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* tool lines carry the two-tier weight of the live transcript: name in ink,
   arguments receding, both on the conversation's mono face */
.ndv-tool {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.ndv-tool b {
  font-weight: 500;
  color: var(--ink);
}

.ndv-tool-result {
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ndv-turn-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
}

.ndv-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.ndv-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

/* ------------------------------------------------- attachments tab */

.ndv-attach .ndv-eyebrow {
  margin: 10px 0 5px;
}

.ndv-attach .ndv-eyebrow:first-child {
  margin-top: 2px;
}

.ndv-attach-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-family: inherit;
}

/* prompt attachments are buttons - a click opens the file itself */
button.ndv-attach-row {
  cursor: pointer;
}

.ndv-attach-row:hover {
  background: var(--hover);
}

.ndv-attach-name {
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ndv-attach-path {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* context-doc rows carry their type tag */
.ndv-attach-kind {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* ---------------------------------------------------- summary tab */

.ndv-md {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ndv-md h1 { font-size: 16px; margin: 12px 0 6px; }
.ndv-md h2 { font-size: 14px; margin: 12px 0 6px; }
.ndv-md h3 { font-size: 13px; margin: 10px 0 5px; }
.ndv-md h4, .ndv-md h5, .ndv-md h6 { font-size: 12px; margin: 10px 0 5px; }
.ndv-md h1:first-child, .ndv-md h2:first-child, .ndv-md h3:first-child { margin-top: 0; }
.ndv-md p { margin: 6px 0; }
.ndv-md ul, .ndv-md ol { margin: 6px 0; padding-left: 20px; }
.ndv-md li { margin: 2px 0; }
.ndv-md code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-sunken);
}
.ndv-md pre {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-sunken);
  overflow-x: auto;
}
.ndv-md pre code { padding: 0; background: none; }
.ndv-md blockquote {
  margin: 8px 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-secondary);
}
.ndv-md hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

/* click-to-edit - the PR description's dashed-outline affordance */
.ndv-md.editable {
  cursor: text;
}

.ndv-md.editable:hover {
  outline: 1px dashed var(--line-strong);
  outline-offset: 6px;
  border-radius: 4px;
}

/* the edit field grows to fit the document; the tab scrolls, not the box */
.ndv-summary-edit .rv-desc-edit {
  margin-top: 0;
  overflow: hidden;
  resize: none;
}

.ndv-summary-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}

.ndv-summary-none {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ndv-gen {
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-size: 11px;
  color: var(--ink-secondary);
  cursor: pointer;
}

.ndv-gen:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.ndv-gen:disabled {
  cursor: default;
  opacity: 0.7;
}

/* token forecast for a summary generation - inline, shown before any spend */
/* the same construction as the walkthrough estimate popup, inline */
.ndv-est {
  display: inline-block;
  width: max-content;
  min-width: 240px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.ndv-est .git-view-head {
  display: flex;
}

/* ------------------------------------------------ pull requests tab */

/* one line per pull request: id then title, never stacked */
.ndv-pr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.ndv-pr:hover {
  background: var(--hover);
}

.ndv-pr .prid {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.ndv-pr .ttl {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* full text of any ellipsis-truncated element, on hover - the one
   sanctioned tooltip mechanism (explicit 2026-08-02 request) */
.trunc-tip {
  position: fixed;
  z-index: 400;
  max-width: 520px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* the composer's callout (Terminal.tsx autoTip): /clear, /compact or
   /context typed while Auto conversations is on, or a prompt that reads as a
   shell command sent without !. The tip's surface, with a tail pointing at
   the word in the draft, down from above it or up when it opened below */
.auto-conv-tip {
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  transform-origin: 16px 100%;
  animation: term-pop-in 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.auto-conv-tip[data-side='below'] {
  transform-origin: 16px 0;
}

.auto-conv-tip-title {
  font-weight: 600;
}

.auto-conv-tip-line {
  color: var(--ink-secondary);
}

.auto-conv-tip::after {
  content: '';
  position: absolute;
  /* over the word it points at (--tail-x, set by Terminal.tsx), kept clear
     of the rounded corners */
  left: clamp(10px, calc(var(--tail-x, 0px) + 8px), calc(100% - 20px));
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--surface-raised);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

.auto-conv-tip[data-side='below']::after {
  top: -5px;
  bottom: auto;
  border: none;
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
}

/* ------------------------------------------------- attachment viewer
   Same window construction and size as the review window. Images fit whole
   (no zoom, no scroll); PDFs use Chromium's viewer; markdown renders and
   edits exactly like a PR description. */

.attach-window {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  width: min(1120px, calc(100vw - 72px));
  height: min(880px, calc(100vh - 48px - var(--titlebar-h)));
  z-index: 100;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.attach-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  flex: none;
}

.attach-head .name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.attach-head .spacer {
  flex: 1;
}

.attach-body {
  flex: 1;
  min-height: 0;
}

.attach-body.image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 18px;
}

.attach-body.image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.attach-body.pdf {
  display: flex;
  min-height: 0;
}

.attach-body.markdown {
  overflow-y: auto;
  padding: 20px 26px;
}

/* plain text and docx are read-only: same page, no edit affordance */
.attach-body.text,
.attach-body.docx {
  overflow-y: auto;
  padding: 20px 26px;
}

.attach-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  text-transform: none;
  letter-spacing: normal;
}

.attach-md {
  min-height: calc(100% - 12px);
}

.attach-md-edit {
  height: 100%;
}

.attach-md-edit .rv-desc-edit {
  height: 100%;
  margin-top: 0;
  resize: none;
}

.attach-error {
  padding: 24px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ------------------------------------------- prompt attachment dock */

/* everything riding on the next prompt lives right on the + button's own
   line - a small pill forms around it once the tray is out, one compact
   icon per attachment, same size and baseline as the + itself. The tray
   stays tucked behind the + by default: it slides out to announce a new
   attachment (then tucks back) and answers a short hover pause on the +. */
.attach-dock {
  display: inline-flex;
  align-items: center;
  flex: none;
  transition:
    padding 180ms ease,
    background 180ms ease;
}

.attach-dock.filled {
  padding: 3px 5px;
  border-radius: 999px;
  background: var(--term-bg);
  box-shadow: var(--term-shadow-hairline);
}

.attach-tray {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 180ms ease,
    margin-left 180ms ease,
    opacity 140ms ease;
}

.attach-tray.open {
  max-width: 320px;
  margin-left: 5px;
  opacity: 1;
  /* the hover labels float above the icons - only the closed/animating
     tray clips, an open one must let them out */
  overflow: visible;
}

.attach-float {
  width: 20px;
  height: 20px;
  justify-content: center;
}

/* the icon and its hover label - a relative anchor so the label can float
   above without shifting anything else in the dock. New icons pop into the
   row as they land. */
.attach-icon-wrap {
  position: relative;
  display: inline-flex;
  animation: attach-icon-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* invisible footbridge over the air between icon and label - without it the
   climb to the remove control drops :hover halfway and the label vanishes
   under the pointer */
.attach-icon-wrap::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: -6px;
  right: -6px;
  height: 9px;
}

@keyframes attach-icon-in {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}

.attach-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--term-hover-2);
  box-shadow: var(--term-shadow-hairline);
  color: var(--term-fg-secondary);
  cursor: pointer;
  transition: transform 120ms ease;
}

/* the lift - hovering an icon in the row nudges it up, dock-style; it
   stays up while its label is out (the label outlives the hover by a
   grace, see labelFor in Terminal.tsx) */
.attach-icon-wrap:hover .attach-icon,
.attach-icon-wrap:has(.attach-icon-label.shown) .attach-icon {
  transform: translateY(-4px);
  color: var(--term-fg);
}

.attach-kind-label {
  font-family: var(--term-font-sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* the name + remove control - not a title attribute, a real hover-shown
   element so the x inside it can still be clicked. Anchored off the icon's
   LEFT edge, not centered: the dock hugs the terminal's left boundary and
   a centered bubble on the first icon would be half cut off by it. */
.attach-icon-label {
  position: absolute;
  bottom: 100%;
  left: -4px;
  transform: translateY(-6px);
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 4px 5px 4px 8px;
  border-radius: 7px;
  background: var(--term-tip-bg);
  box-shadow: 0 0 0 1px var(--term-tip-border), 0 4px 12px rgba(0, 0, 0, 0.18);
  color: var(--term-tip-fg);
  font-family: var(--term-font-sans);
  font-size: 11px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 3;
}

/* driven by state, not :hover - an invisible label cannot catch a pointer
   arriving diagonally, so hover-chaining dead-locked the remove control */
.attach-icon-label.shown {
  opacity: 1;
  pointer-events: auto;
}

.attach-icon-label-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-icon-label-x {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--term-tip-fg);
  opacity: 0.75;
  cursor: pointer;
}

.attach-icon-label-x:hover {
  opacity: 1;
}

.attach-icon-label-x svg {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

/* ------------------------------------------------ terminal drop veil */

/* a file drag over the terminal: the whole card becomes the drop target,
   Drive-style - dashed inset frame, one centered instruction */
.drop-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: color-mix(in srgb, var(--term-bg) 78%, transparent);
  pointer-events: none;
  animation: overlay-in 120ms ease;
}

.drop-veil-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  border: 2px dashed var(--term-accent);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--term-fg);
}

.drop-veil-box svg {
  width: 22px;
  height: 22px;
  color: var(--term-fg-muted);
}

/* ------------------------------------------------ terminal skills sheet */

/* the skills sheet hangs UNDER the terminal card at its full width (JS
   places it off the card's own rect) - the transcript and the input line
   stay readable while it is open. Fixed so it escapes the card's overflow
   clipping. */
.skills-sheet {
  position: fixed;
  z-index: 95;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 10px;
  background: var(--term-pop);
  box-shadow: var(--term-shadow-overlay);
  overflow: hidden;
  font-family: var(--term-font-sans);
  letter-spacing: -0.01em;
  animation: sheet-down 250ms var(--term-ease-out);
}

@keyframes sheet-down {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
}

.skills-sheet-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
  padding: 10px 12px 6px;
}

.skills-sheet-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--term-fg);
}

.skills-sheet-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 8px;
}

.skills-sheet-empty {
  padding: 12px 8px 10px;
  font-size: 12.5px;
  color: var(--term-fg-muted);
}

/* one skill: spark, name over description, check when riding the prompt */
.skill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms;
}

.skill-row:hover {
  background: var(--term-hover);
}

.skill-row.on {
  background: var(--term-field);
}

.skill-row-spark {
  display: flex;
  flex: none;
  color: var(--term-fg-muted);
}

.skill-row.on .skill-row-spark {
  color: var(--term-accent);
}

.skill-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.skill-row-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--term-fg);
}

.skill-row-scope {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--term-fg-muted);
  background: var(--term-field);
  border-radius: 999px;
  padding: 0 6px;
}

/* provider mark rides the name line, small and muted */
.skill-row-provider {
  display: inline-flex;
  align-self: center;
  color: var(--term-fg-muted);
}

.skill-row-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--term-fg-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.skill-row-mark {
  display: flex;
  flex: none;
  width: 12px;
  color: var(--term-fg);
}

.skill-row-mark svg {
  width: 11px;
  height: 11px;
}

/* --- the prompts panel: three tabs over one list ------------------------ */

/* one height across tabs - the panel hangs over the input, so a surface that
   resized under the pointer would move the rows being read */
.skills-sheet.prompts-sheet {
  height: 340px;
}

/* left aligned, and nothing sits on their right: later tabs land there */
.prompts-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px 8px;
}

.prompts-tab {
  height: 20px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-secondary);
  font-family: var(--term-font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.prompts-tab:hover {
  background: var(--term-hover);
  color: var(--term-fg);
}

.prompts-tab.on {
  background: var(--term-selected);
  color: var(--term-fg);
}

/* one prompt: the text (or the template's name) over its meta line, with the
   keep or remove control riding the right end */
.prompt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 4px 2px 8px;
  border-radius: 8px;
  transition: background-color 150ms;
}

.prompt-row:hover {
  background: var(--term-hover);
}

.prompt-row.on {
  background: var(--term-field);
}

.prompt-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.prompt-row-text {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--term-fg);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prompt-row-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--term-fg);
}

.prompt-row-meta {
  font-size: 11px;
  color: var(--term-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-row-keep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--term-fg-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, color 150ms, background-color 150ms;
}

.prompt-row:hover .prompt-row-keep,
.prompt-row-keep:focus-visible,
.prompt-row-keep.done {
  opacity: 1;
}

.prompt-row-keep:hover {
  color: var(--term-fg);
  background: var(--term-field);
}

.prompt-row-keep.done {
  color: var(--term-accent);
}

.prompt-row-failed {
  flex: none;
  font-size: 11px;
  color: var(--term-fg-muted);
}

/* the model a saved prompt names, under its description */
.prompt-row-model {
  font-size: 11px;
  color: var(--term-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-row-model b {
  font-weight: 500;
  color: var(--term-fg-secondary);
}

/* the derivation is a model run, so the control waits where a copy would
   already be done */
.prompt-row-working,
.entry-keep-working {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--term-line-strong);
  border-top-color: var(--term-fg);
  border-radius: 50%;
  animation: keep-spin 700ms linear infinite;
}

@keyframes keep-spin {
  to {
    transform: rotate(360deg);
  }
}

/* the keep control on a prompt already sent: outside the bubble's left edge,
   so it never sits over the words, and only there on hover */
.entry-keep {
  position: absolute;
  top: 2px;
  left: -28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--term-pop);
  color: var(--term-fg-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, color 150ms;
}

.entry-user:hover .entry-keep,
.entry-keep:focus-visible,
.entry-keep.done {
  opacity: 1;
}

/* the prompt IS the control: clicking one opens what it carried underneath
   it, so nothing extra rides the bubble */
.entry-user {
  cursor: pointer;
}

.entry-user.files-open {
  background: var(--term-selected);
}

/* a prompt that carried something says so, so it can be picked out of a
   transcript at a glance. Not a control: the whole bubble is one. */
.entry-clip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  vertical-align: baseline;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--term-fg-muted);
}

.entry-clip svg {
  width: 11px;
  height: 11px;
}

/* what rode with the prompt: its own sunken section across the transcript's
   full width, one tile per file, each opening the way the dock's icons do */
.entry-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--term-line);
  border-radius: 10px;
  background: var(--term-inset);
  animation: term-fade-up 250ms var(--term-ease-out) both;
}

.entry-attach-empty {
  padding: 4px 2px;
  font-size: 12px;
  color: var(--term-fg-muted);
}

.entry-attach-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 112px;
  padding: 10px 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--term-bg);
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.entry-attach-tile:hover {
  background: var(--term-hover);
  border-color: var(--term-line-strong);
}

/* the dock's glyph, one size up from the dock: large enough to read the file
   type across the section, not a picture of its own */
.entry-attach-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: var(--term-fg-secondary);
}

.entry-attach-glyph svg {
  width: 22px;
  height: 22px;
}

.entry-attach-glyph .attach-kind-label {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.entry-attach-name {
  max-width: 100%;
  font-family: var(--term-font-sans);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--term-fg-secondary);
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* the WorkMap's own prompt block: the same control, placed against its box */
.ndv-prompt {
  position: relative;
}

.ndv-keep {
  position: absolute;
  top: 4px;
  left: -26px;
  background: none;
}

/* an attachment chip that opens the file it names */
.ndv-chip-open {
  gap: 4px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 150ms, border-color 150ms;
}

.ndv-chip-open:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.ndv-chip-open svg {
  width: 10px;
  height: 10px;
}

.entry-keep:hover {
  color: var(--term-fg);
}

.entry-keep.done {
  color: var(--term-accent);
}

.entry-keep-failed {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--term-fg-muted);
}

/* A missing provider CLI carries the same bare "!" the build rows use for
   a port conflict. */
.provider-flag {
  margin-left: 6px;
  font-weight: 600;
  color: var(--warn);
}

/* Read-only view of a provider's own config file, in its own window over
   Settings (its backdrop is z-99 and the modal z-100, so this pair stacks
   above both), never inline under the rows. */
.provider-config-backdrop {
  z-index: 120;
}

.provider-config-view {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--titlebar-h) / 2);
  transform: translate(-50%, -50%);
  z-index: 121;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 120px));
  max-height: min(640px, calc(100vh - 120px - var(--titlebar-h)));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.provider-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--line);
}

.provider-config-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.provider-config-body {
  margin: 0;
  padding: 12px 16px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* In-panel provider tabs, synced with the rail sub-tree - Conductor's tab
   anatomy: plain labels over a hairline, 2px accent underline on the active
   one. Common settings sit above the strip; everything below is one
   provider's. */
.provider-tabs {
  display: flex;
  gap: 18px;
  margin: 2px 0 12px;
  border-bottom: 1px solid var(--line);
}

.provider-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 2px 8px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
}

.provider-tab:hover {
  color: var(--ink);
}

.provider-tab.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Mobile Remote (Settings): the relay fields are addresses, so they get
   the room a url needs; the pairing block sits under its own row */
.harness-limit > input.remote-field {
  width: 300px;
  text-align: left;
  font-size: 11.5px;
}

/* The Projects list: a tick per open project, sized as a tick rather than
   as the address fields the row rule above dresses every input in */
.harness-limit > input.remote-project-tick {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 4px;
}

.remote-pairing {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 6px 8px 12px;
}

/* the pairing code under its row, inside the Sessions card */
.remote-code {
  display: flex;
  justify-content: center;
  padding: 2px 0 14px;
}

/* dark on white in both themes, the way every scanner reads a code */
.remote-qr {
  flex: none;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* a session's phone mark sits at the top of its card, beside the name */
.remote-session .account-avatar {
  align-self: flex-start;
}

/* a phone on the wire right now */
.account-status.live {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: var(--good);
}

.remote-pairing-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.remote-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
  user-select: text;
}

.remote-pair-error {
  padding: 4px 8px 8px;
  font-size: 11px;
  color: var(--bad);
}

/* ------------------------------------------------- notebook editor (.ipynb)
   Jupyter's cell stack on the shell's surfaces: a toolbar, cells with a run
   gutter, outputs under each code cell, the kernel picker on the right.
   Code inside cells speaks the editor's own token palette (.code-view). */

.nb-pane {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-raised);
  outline: none;
}

.nb-toolbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.nb-tool,
.nb-kernel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.nb-tool:hover:not(:disabled),
.nb-kernel:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.nb-tool:disabled,
.nb-kernel:disabled {
  opacity: 0.45;
  cursor: default;
}

.nb-tool.primary {
  border-color: var(--line-strong);
  color: var(--ink);
}

.nb-sep {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--line);
}

.nb-spacer {
  flex: 1;
}

.nb-kernel {
  border-color: var(--line-strong);
  max-width: 360px;
}

.nb-kernel.open {
  background: var(--selected);
}

.nb-kernel .status-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-muted);
}

.nb-kernel .status-dot.good {
  background: var(--good);
}

.nb-kernel .status-dot.warn {
  background: var(--warn);
}

.nb-kernel .status-dot.bad {
  background: var(--bad);
}

.nb-kernel .status-dot.pulse {
  animation: nb-pulse 1s ease-in-out infinite;
}

@keyframes nb-pulse {
  50% {
    opacity: 0.25;
  }
}

/* how the last run ended and how long it took, Colab's check and time */
.nb-took {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.nb-took svg {
  width: 10px;
  height: 10px;
}

.nb-took.ok {
  color: var(--good);
}

.nb-took.error,
.nb-took.aborted {
  color: var(--bad);
}

/* a running cell spins in the gutter where its count will land */
.nb-spin {
  display: block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: nb-spin 0.8s linear infinite;
}

@keyframes nb-spin {
  to {
    transform: rotate(360deg);
  }
}

.nb-kernel-name {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
}

.nb-kernel-state {
  color: var(--ink-muted);
  font-weight: 400;
}

.nb-note {
  flex: none;
  padding: 4px 12px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nb-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.nb-cells {
  padding: 14px 18px 45vh 10px;
}

.nb-slot {
  position: relative;
}

.nb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.nb-in {
  display: flex;
}

/* the output block: its own sunken surface under the code, with an Out
   label in the gutter, present from the moment a run starts */
.nb-out {
  display: flex;
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  background: var(--surface-sunken);
}

.nb-out-gutter {
  flex: none;
  width: 46px;
  padding-top: 7px;
  text-align: center;
}

.nb-out-label {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.nb-out-body {
  flex: 1;
  min-width: 0;
  padding: 4px 10px 4px 0;
}

.nb-out-empty {
  padding: 4px 8px;
  color: var(--ink-muted);
  font-size: 11.5px;
}

.nb-cell.markdown,
.nb-cell.raw {
  border-color: transparent;
}

.nb-cell:hover {
  border-color: var(--line);
}

.nb-cell.selected {
  border-color: var(--line-strong);
}

.nb-cell.selected::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  border-radius: 6px 0 0 6px;
  background: var(--accent);
  content: '';
}

.nb-gutter {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding-top: 5px;
  gap: 1px;
}

.nb-run {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-secondary);
  opacity: 0;
  cursor: pointer;
}

.nb-cell:hover .nb-run,
.nb-cell.selected .nb-run,
.nb-cell.running .nb-run {
  opacity: 1;
}

.nb-run:hover:not(:disabled) {
  background: var(--hover-strong);
  color: var(--ink);
}

.nb-run.busy {
  color: var(--ink);
}

.nb-run:disabled {
  cursor: default;
}

.nb-count {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* a finished run lights the count and the cell's edge for a moment, so a
   run that took milliseconds still reads as a run */
.nb-count.fresh {
  animation: nb-fresh 1.4s ease-out both;
}

.nb-cell-flash {
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  pointer-events: none;
  animation: nb-cell-fresh 1.4s ease-out both;
}

@keyframes nb-fresh {
  0%,
  35% {
    color: var(--good);
    font-weight: 600;
  }
}

@keyframes nb-cell-fresh {
  0%,
  30% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 65%, transparent);
  }
}

.nb-body {
  flex: 1;
  min-width: 0;
  padding: 4px 10px 4px 0;
}

.nb-editor {
  position: relative;
  overflow: hidden;
}

.nb-stack {
  position: relative;
}

/* both layers wrap long lines the same way, so no cell ever scrolls sideways */
.nb-code,
.nb-input {
  margin: 0;
  padding: 6px 24px 6px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: normal;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  tab-size: 4;
}

.nb-code {
  min-height: 32px;
  color: var(--ed-fg);
}

.nb-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  overflow: hidden;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
}

.nb-input::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.nb-outputs {
  padding: 2px 0;
}

.nb-stream,
.nb-error,
.nb-text {
  margin: 0;
  padding: 4px 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}

.nb-stream.stderr {
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}

.nb-error {
  background: color-mix(in srgb, var(--bad) 7%, transparent);
}

.nb-html {
  padding: 4px 8px;
  overflow-x: auto;
  font-size: 12.5px;
}

.nb-html table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}

.nb-html th,
.nb-html td {
  padding: 2px 9px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.nb-html th {
  color: var(--ink-secondary);
  font-weight: 600;
}

.nb-image {
  display: block;
  max-width: 100%;
  margin: 4px 8px;
}

.nb-md {
  padding: 4px 8px;
}

.nb-md .nb-md-empty {
  color: var(--ink-muted);
  font-style: italic;
}

.nb-stdin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.nb-stdin-input {
  flex: 1;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  outline: none;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.nb-stdin-input:focus {
  border-color: var(--ink-muted);
}

.nb-cell-tools {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 2;
  display: none;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.nb-cell:hover .nb-cell-tools,
.nb-cell.selected .nb-cell-tools {
  display: flex;
}

.nb-cell-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
}

.nb-cell-tool.up svg {
  transform: rotate(180deg);
}

.nb-cell-tool:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.nb-cell-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.nb-insert {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 16px;
  margin: 2px 0;
  opacity: 0;
}

.nb-slot:hover .nb-insert {
  opacity: 1;
}

.nb-insert button {
  height: 16px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink-secondary);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 14px;
  cursor: pointer;
}

.nb-insert button:hover {
  background: var(--hover);
  color: var(--ink);
}

.nb-menu {
  width: 440px;
  max-width: calc(100vw - 24px);
}

.nb-menu-empty {
  padding: 8px 12px;
  color: var(--ink-muted);
  font-size: 12px;
}

.nb-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 12px;
}

.nb-menu-item.current {
  background: var(--selected);
}

.nb-menu-name {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

/* the location sits at the right end, short by default; hovering the row
   swaps in the full path (still clipped from the left when it is long) */
.nb-menu-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
  text-align: right;
  text-overflow: ellipsis;
  direction: rtl;
}

.nb-menu-path > span {
  direction: ltr;
  unicode-bidi: isolate;
}

.nb-menu-path-full,
.nb-menu-item:hover .nb-menu-path-short {
  display: none;
}

.nb-menu-item:hover .nb-menu-path-full {
  display: inline;
}

.nb-menu-flag {
  flex: none;
  color: var(--warn);
  font-size: 10.5px;
  white-space: nowrap;
}

/* ANSI colors in kernel output - the 16 basic ones, tuned per theme */
.nb-outputs {
  --ansi-0: #3b3b3b;
  --ansi-1: #c73535;
  --ansi-2: #1f8f3f;
  --ansi-3: #a67c00;
  --ansi-4: #2f6fd6;
  --ansi-5: #a33ea3;
  --ansi-6: #1a8f8f;
  --ansi-7: #8a8d93;
  --ansi-8: #6f7276;
  --ansi-9: #e0474c;
  --ansi-10: #2fa85f;
  --ansi-11: #c99a12;
  --ansi-12: #4f8ef7;
  --ansi-13: #c65fc6;
  --ansi-14: #2ab0b0;
  --ansi-15: #1f2124;
}

.shell-root[data-theme='dark'] .nb-outputs {
  --ansi-0: #5a5d63;
  --ansi-1: #ee5c61;
  --ansi-2: #3dbb72;
  --ansi-3: #d4a94a;
  --ansi-4: #6c9ef8;
  --ansi-5: #cf7fcf;
  --ansi-6: #4cc2c2;
  --ansi-7: #c9ccd1;
  --ansi-8: #8a8d93;
  --ansi-9: #ff7a7f;
  --ansi-10: #5fd68f;
  --ansi-11: #e8c26b;
  --ansi-12: #8db4ff;
  --ansi-13: #e39ae3;
  --ansi-14: #6ad6d6;
  --ansi-15: #f2f3f4;
}

.ansi-bold {
  font-weight: 600;
}

.ansi-italic {
  font-style: italic;
}

.ansi-underline {
  text-decoration: underline;
}

.ansi-fg-0 { color: var(--ansi-0); }
.ansi-fg-1 { color: var(--ansi-1); }
.ansi-fg-2 { color: var(--ansi-2); }
.ansi-fg-3 { color: var(--ansi-3); }
.ansi-fg-4 { color: var(--ansi-4); }
.ansi-fg-5 { color: var(--ansi-5); }
.ansi-fg-6 { color: var(--ansi-6); }
.ansi-fg-7 { color: var(--ansi-7); }
.ansi-fg-8 { color: var(--ansi-8); }
.ansi-fg-9 { color: var(--ansi-9); }
.ansi-fg-10 { color: var(--ansi-10); }
.ansi-fg-11 { color: var(--ansi-11); }
.ansi-fg-12 { color: var(--ansi-12); }
.ansi-fg-13 { color: var(--ansi-13); }
.ansi-fg-14 { color: var(--ansi-14); }
.ansi-fg-15 { color: var(--ansi-15); }
.ansi-bg-0 { background: var(--ansi-0); }
.ansi-bg-1 { background: var(--ansi-1); }
.ansi-bg-2 { background: var(--ansi-2); }
.ansi-bg-3 { background: var(--ansi-3); }
.ansi-bg-4 { background: var(--ansi-4); }
.ansi-bg-5 { background: var(--ansi-5); }
.ansi-bg-6 { background: var(--ansi-6); }
.ansi-bg-7 { background: var(--ansi-7); }
.ansi-bg-8 { background: var(--ansi-8); }
.ansi-bg-9 { background: var(--ansi-9); }
.ansi-bg-10 { background: var(--ansi-10); }
.ansi-bg-11 { background: var(--ansi-11); }
.ansi-bg-12 { background: var(--ansi-12); }
.ansi-bg-13 { background: var(--ansi-13); }
.ansi-bg-14 { background: var(--ansi-14); }
.ansi-bg-15 { background: var(--ansi-15); }

/* ---------------------------------------------------------- explorer search
   A file-name box under the Explorer head. While it holds text the tree gives
   way to a flat list of hits (name, then the folder it sits in, dimmed). */
.explorer-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin: 0 6px 6px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.explorer-search:focus-within {
  border-color: var(--line-strong);
  color: var(--ink-secondary);
}

.explorer-search > svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.explorer-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}

.explorer-search-input::placeholder {
  color: var(--ink-muted);
}

.explorer-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.explorer-search-clear:hover {
  background: var(--hover);
  color: var(--ink);
}

.explorer-search-clear svg {
  width: 11px;
  height: 11px;
}

.sidebar .entry.hit {
  padding-left: 8px;
  gap: 6px;
}

.sidebar .entry.hit .hit-name {
  flex: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .entry.hit.open .hit-name {
  color: var(--ink);
  font-weight: 500;
}

.sidebar .entry.hit .hit-dir {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  font-size: 11px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------- find in file
   Ctrl+F strip pinned to the top right of the code pane, Ctrl+H adds the
   replace row; the editor draws the matches (CodeEditor). */
.ed-find {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
}

.ed-find-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 4px 0 8px;
}

.ed-find-input.invalid {
  color: var(--bad);
}

.ed-find-opt.word {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ed-find-action {
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.ed-find-action:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.ed-find-action:disabled {
  opacity: 0.4;
  cursor: default;
}

.ed-find-input {
  width: 200px;
  height: 22px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
}

.ed-find-input.goto {
  width: 110px;
  font-family: var(--font-mono), ui-monospace, monospace;
}

.ed-find-input::placeholder {
  color: var(--ink-muted);
}

.ed-find-opt {
  height: 22px;
  min-width: 26px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  cursor: pointer;
}

.ed-find-opt:hover {
  background: var(--hover);
  color: var(--ink);
}

.ed-find-opt.on {
  background: var(--selected);
  border-color: var(--line-strong);
  color: var(--ink);
}

.ed-find-count {
  min-width: 68px;
  padding: 0 4px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
  text-align: center;
  white-space: nowrap;
}

.ed-find-count.none {
  color: var(--bad);
}

.ed-find-nav,
.ed-find-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--ink-secondary);
  cursor: pointer;
}

.ed-find-nav:hover:not(:disabled),
.ed-find-close:hover {
  background: var(--hover);
  color: var(--ink);
}

.ed-find-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.ed-find-nav svg,
.ed-find-close svg {
  width: 12px;
  height: 12px;
}

/* ---------------------------------------------------------- quick pick
   The Command Palette, Go to Symbol and the recent tabs switcher: a field
   over a list, hanging from the top of the window. */
.quick-pick-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
}

.quick-pick {
  position: fixed;
  top: calc(var(--titlebar-h, 0px) + 10px);
  left: 50%;
  z-index: 181;
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 80px));
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: nav-toast-in 120ms ease;
}

.quick-pick-input {
  flex: none;
  height: 34px;
  margin: 6px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.quick-pick-input:focus {
  border-color: var(--ink-muted);
}

.quick-pick-input::placeholder {
  color: var(--ink-muted);
}

.quick-pick-list {
  flex: 1;
  min-height: 0;
  padding: 0 4px 4px;
  overflow-y: auto;
}

.tab-switch .quick-pick-list {
  padding-top: 4px;
}

.quick-pick-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.quick-pick-row.active {
  background: var(--selected);
}

.quick-pick-label {
  flex: none;
  white-space: nowrap;
}

.quick-pick-detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink-muted);
}

.quick-pick-hint {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.quick-pick-empty {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------- keyboard shortcuts
   Settings > Keyboard Shortcuts: VS Code's keybindings editor. A search
   field, then one table: command, its keys as keycaps, where it works and
   whether it is the default. Click a key (or double-click the row) and
   press the new one; Escape leaves it as it was. */
.kb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
}

.kb-search:focus-within {
  border-color: var(--ink-muted);
}

.kb-search svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.kb-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.kb-search input::placeholder {
  color: var(--ink-muted);
}

.kb-table {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}

.kb-head,
.kb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 76px 72px 56px;
  align-items: center;
  column-gap: 12px;
  padding: 0 8px 0 14px;
}

.kb-head {
  height: 30px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kb-row {
  min-height: 30px;
  color: var(--ink);
  font-weight: 400;
  cursor: default;
}

.kb-row:nth-child(odd) {
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}

.kb-row:hover {
  background: var(--hover);
}

.kb-row.recording {
  background: var(--selected);
}

.kb-command {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 0;
}

.kb-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-clash {
  font-size: 11px;
  color: var(--warn);
}

.kb-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  max-width: 100%;
  min-height: 22px;
  padding: 0 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.kb-key:hover {
  border-color: var(--line-strong);
}

.kb-key.recording {
  min-width: 140px;
  border-color: var(--ink-muted);
  background: var(--surface);
  color: var(--ink-muted);
}

.kb-stroke {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.kb-plus {
  color: var(--ink-muted);
  font-size: 11px;
}

/* one keycap: a raised key with a heavier bottom edge */
.kb-cap {
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
}

.kb-when,
.kb-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
}

.kb-source.user {
  color: var(--ink);
}

.kb-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 2px;
}

.kb-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0;
}

.kb-row:hover .kb-act,
.kb-act:focus-visible {
  opacity: 1;
}

.kb-act:hover {
  background: var(--hover);
  color: var(--ink);
}

.kb-act svg {
  width: 12px;
  height: 12px;
}

/* ---------------------------------------------------------- status items
   The code editor's part of the status bar: problems first, then the
   cursor, indentation, encoding and line ending. */
.status-code {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.status-item {
  height: 20px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.status-item:hover {
  background: var(--hover);
  color: var(--ink);
}

.status-item.plain {
  cursor: default;
}

.status-item.plain:hover {
  background: none;
  color: inherit;
}

.status-item.muted {
  color: var(--ink-muted);
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.status-item.bad {
  color: var(--bad);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

/* a switch in the status bar (Git Blame) while it is on */
.status-item.on {
  background: var(--selected);
  color: var(--ink);
}

/* ---------------------------------------------------------- warshall account
   Settings > Warshall Account: the signed in row, the pending device code,
   and the review window's add-by-email control that the account unlocks. */
.wacct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.wacct-row .settings-add + .settings-add {
  margin-left: 0;
}

.wacct-copy {
  flex: 1;
  min-width: 0;
}

.wacct-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
}

.wacct-code {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink);
  width: max-content;
}

.rv-invite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rv-invite-input {
  width: 180px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-sunken);
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}

.rv-invite-input:focus {
  border-color: var(--line-strong);
}

.rv-invite-add {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.rv-invite-add:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ------------------------------------------------- html and latex views */

/* an HTML file is the page it is: the sandboxed frame fills the surface and
   the document paints its own ground */
.html-doc {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.html-doc-wait {
  flex: 1;
}

.editor-preview.html,
.attach-body.html {
  display: flex;
  min-height: 0;
}

.rdiff-preview.html .rdiff-side {
  display: flex;
  height: 720px;
}

/* a .tex shows as the PDF its engine makes: the pdf viewer fills the
   surface exactly as a .pdf does */
.editor-preview.latex,
.attach-body.latex {
  display: flex;
  min-height: 0;
}

.rdiff-preview.latex .rdiff-side {
  display: flex;
  height: 720px;
}

/* before the PDF exists: nothing, an install offer, or the engine's log */
.latex-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 22px;
  color: var(--ink-muted);
  font-size: 12px;
  overflow: auto;
}

.latex-install {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms;
}

.latex-install:hover {
  background: var(--hover);
}

.latex-install:disabled {
  cursor: default;
  color: var(--ink-muted);
}

.latex-error {
  color: var(--ink-muted);
}

.latex-log {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

/* the tab strip's right end: a quiet text action for the active file */
.tab-strip-action {
  /* the strip is a block holding the 34px tabs row: the action rides that
     row's right end, over the tabs' own scroll */
  position: absolute;
  right: 8px;
  top: 7px;
  padding: 0 8px;
  height: 20px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.tab-strip-action:hover {
  background: var(--hover);
  color: var(--ink);
}

.tab-strip-action:disabled {
  cursor: default;
  color: var(--ink-muted);
}

/* the review file header's copy: the whole file, the last control on the
   row, dressed like the render toggle so the two read as one cluster */
.rdiff-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 19px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.rdiff-copy svg {
  width: 12px;
  height: 12px;
}

.rdiff-copy:hover {
  background: var(--hover);
  color: var(--ink);
}