/* Throttle Studio — the studio class vocabulary (views/workspaces).
 *
 * Vendored from the console's own exported design language
 * (design-systems systems/throttle patterns/shell.css — the Side Menu §5,
 * the studio split §8, the pane heads, the lane rows §6, the webmux terminal
 * realization — and tokens/shell.css for the geometry), adapted to the
 * --role-* / --type-* tokens tokens.css already carries. Loaded as the fifth
 * base asset beside tokens/keys/app/components; every value is a token or a
 * literal — no external origin, no import rule, no CSS `url` function
 * (assert_self_contained runs over this file, comments included: it scans
 * bytes, so even naming the function with its parenthesis here reds it).
 *
 * The terminal is its own surface: it sits on the plate regardless of theme.
 * Those plate values are DEFINED here as --studio-* tokens (the Rig register's
 * --rig-* set stays confined to .register-telemetry by the console's register
 * scanner) and APPLIED only under .webmux. Everything else is achromatic and
 * follows the theme through the role layer; status is always a word plus a
 * role tint, never colour alone. */

:root {
  --studio-side-menu: 280px;
  --studio-side-menu-min: 220px;
  --studio-pane-min: 320px;
  /* The session | renderer split, driven per studio from the CSSOM
   * (studio.jsx sets these on .studio-root; default 55/45). */
  --studio-session: 55fr;
  --studio-renderer: 45fr;
  --studio-plate: #1D1C18;
  --studio-plate-surface: #24231E;
  --studio-plate-ink: #F8F9F4;
  --studio-plate-muted: #8A897E;
  --studio-plate-line: #3A3933;
  --studio-plate-accent: #F2C400;
}

/* ── The grid inside #outlet: Side Menu | Agent Session | gutter | Renderer ─ */
.studio-host { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.studio-root {
  display: grid;
  grid-template-columns:
    var(--studio-side-menu)
    minmax(var(--studio-pane-min), var(--studio-session))
    5px
    minmax(var(--studio-pane-min), var(--studio-renderer));
  /* Row 1 is the studio bar, which exists only at ≤ 1100 px (Phase 5); on a
   * desktop it is not rendered and the row collapses to nothing. */
  grid-template-rows: auto minmax(0, 1fr);
  position: relative;
  flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; min-width: 0;
  background: var(--role-background); color: var(--role-text);
}
.studio-root > .side-menu, .studio-root > .studio-pane, .studio-root > .studio-gutter { grid-row: 2; }
/* The two page roots are the focus FLOOR a closing dialog falls to when its
 * opener was just disabled by the Receipt and no landmark is on the surface
 * (lifecycle.jsx `Dialog`, `focusReturnTarget`; Phase-3 review round 5) —
 * focusable through tabIndex=-1, never a tab stop, so the ring a programmatic
 * focus would paint on the whole page is suppressed. */
.studio-root:focus, .studio-directory:focus { outline: 0; }
.studio-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.studio-pane[data-pane="session"] { border-right: 1px solid var(--role-border); background: var(--role-background); }
.studio-pane[data-pane="renderer"] { background: var(--role-surface); }
.studio-gutter { width: 5px; cursor: col-resize; background: none; border: 0; padding: 0; position: relative; }
.studio-gutter:hover::after, .studio-gutter:focus-visible::after {
  content: ""; position: absolute; inset: 0 1px; background: var(--role-text-strong);
}

/* ── Side Menu (§5) ─────────────────────────────────────────────────────── */
.side-menu {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--role-surface); border-right: 1px solid var(--role-border);
}
.side-menu-head { padding: 12px 12px 8px; }
.side-menu-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--role-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-menu-sub { font-size: 11px; font-family: var(--type-technical); color: var(--role-muted); margin-top: 2px; }
.side-menu-tabs { display: flex; gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--role-border); }
.side-menu-tab {
  flex: 1; padding: 5px 4px; border-radius: 6px; border: 0; background: none; font: inherit;
  font-size: 12px; color: var(--role-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
}
.side-menu-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-menu-tab:hover { background: var(--role-surface-sunken); color: var(--role-text); }
.side-menu-tab[aria-selected="true"] { background: var(--role-surface-sunken); color: var(--role-text-strong); font-weight: var(--weight-semibold); }
.side-menu-tab svg { flex: none; }
.side-menu-body { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
.side-menu-body > .status-region { margin: 4px; }
.side-menu-lanes > .status-region { margin: 0 0 8px; }
/* Add lane with its permission read in error: the button and the error Region
 * (with Retry) stack in the action row (review round 7). */
.add-lane-with-authority { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.side-menu-filter { margin: 0 0 8px; min-width: 0; }

/* ── Lane rows (§6) ─────────────────────────────────────────────────────── */
.nav-list, .nav-views { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-item { display: flex; flex-direction: column; gap: 1px; }
.nav-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--role-text); background: none; border: 0;
  width: 100%; text-align: left; cursor: pointer; min-width: 0;
}
.nav-row:hover { background: var(--role-surface-sunken); }
.nav-row[aria-current="true"] { background: var(--role-surface-sunken); color: var(--role-text-strong); font-weight: var(--weight-semibold); }
.nav-row > svg { flex: none; color: var(--role-muted); }
.nav-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.nav-row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row-sub { display: block; font-size: 11px; font-weight: var(--weight-regular); color: var(--role-muted); font-family: var(--type-technical); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row-reason { white-space: normal; display: inline-flex; align-items: center; gap: 4px; font-family: var(--type-human); }
.nav-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-family: var(--type-technical); font-size: 11px; color: var(--role-muted); font-weight: var(--weight-regular); }
.nav-row-age { font-variant-numeric: tabular-nums; }
.nav-view-index { color: var(--role-muted); font-family: var(--type-technical); font-size: 11px; margin-right: 2px; }
.tree-indent { padding-left: 26px; }
/* The lane-state dot is REDUNDANT with the status word beside it — a tint,
 * never the sole carrier of state. Vocabulary = protocol.rs LaneStatus (the
 * lanes harness's words: active, quiet, dead, absent, missing, unknown) plus
 * `helper` for an exec holder that publishes no status. */
.lane-state { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--role-muted); }
.lane-state[data-state="active"] { background: var(--role-success); }
.lane-state[data-state="quiet"] { background: var(--role-border-strong); }
.lane-state[data-state="dead"], .lane-state[data-state="absent"], .lane-state[data-state="missing"] { background: var(--role-danger); }
.lane-state[data-state="unknown"] { background: var(--role-muted); }
.lane-state[data-state="helper"] { background: none; border: 1px solid var(--role-muted); }
.sbadge-compact { font-size: 10px; padding: 0 5px; }

/* ── Pane heads (§7, §8) ────────────────────────────────────────────────── */
.agent-session, .renderer { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.pane-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 44px;
  border-bottom: 1px solid var(--role-border); background: var(--role-surface);
}
.pane-head > svg { flex: none; color: var(--role-muted); }
/* The object's NAME is the header's first job (§8): the text keeps a floor
 * and the actions group shrinks — only the follow chip gives way, cut with
 * an ellipsis, its full sentence in its title (review round 6 of Phase 4: a
 * held path in the chip squeezed the name to zero). */
.pane-head-text { min-width: 6em; flex: 1 1 auto; }
.pane-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--role-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-title-technical { font-family: var(--type-technical); font-size: 12px; }
.pane-sub { font-size: 11px; font-family: var(--type-technical); color: var(--role-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.pane-head-actions > * { flex: none; }
.pane-head-actions > .follow { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
/* The read clock beside the status word: the time the pane's facts were
 * read; the stale word (role tint, never colour alone) when the latest
 * refresh failed. */
.pane-read { font-size: 11px; font-family: var(--type-technical); color: var(--role-muted); white-space: nowrap; }
.pane-read[data-stale="true"], .pane-foot [data-stale="true"], .side-menu-sub[data-stale="true"] { color: var(--role-warning); font-weight: 600; }
.pane-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.pane-body > .status-region { margin: 14px; }
.pane-foot {
  display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-top: 1px solid var(--role-border);
  background: var(--role-surface); font-family: var(--type-technical); font-size: 11px; color: var(--role-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pane-foot-label { text-transform: uppercase; letter-spacing: var(--track-label); font-size: 10px; }
.pane-foot .sep { opacity: 0.5; margin: 0 4px; }

/* ── Follow indicator (§9) ──────────────────────────────────────────────── */
.follow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--type-technical);
  color: var(--role-muted); border: 1px solid var(--role-border); border-radius: 4px; padding: 1px 7px;
}
.follow[data-following="true"] { color: var(--role-text-strong); border-color: var(--role-text-strong); }
.follow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow > span:first-of-type { flex: none; }
.follow-note { color: var(--role-muted); }
.follow[data-stale="true"] .follow-note { color: var(--role-warning); font-weight: 600; }
.renderer-empty { margin: 20px; }

/* ── Webmux: the tmux lane on the plate ─────────────────────────────────── */
.webmux { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; background: var(--studio-plate); color: var(--studio-plate-ink); }
.webmux-views { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--studio-plate-line); overflow-x: auto; flex: none; }
.webmux-view {
  background: none; border: 0; border-bottom: 2px solid transparent; font-family: var(--type-terminal);
  font-size: 11px; color: var(--studio-plate-muted); padding: 4px 9px; cursor: pointer; white-space: nowrap;
}
.webmux-view:hover { color: var(--studio-plate-ink); }
.webmux-view[aria-selected="true"] { color: var(--studio-plate-accent); border-bottom-color: var(--studio-plate-accent); }
.webmux-view-index { opacity: 0.7; }
/* Disabled-never-hidden: outside `attached` the tabs stay on screen, muted,
 * with the channel's phase as their title (no click can park a request). */
.webmux-view:disabled, .webmux-view[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.webmux-view:disabled:hover { color: var(--studio-plate-muted); }
/* A select_window on the wire and not yet answered by `view`: the request
 * is visible as "requested" (aria-busy), never as a selection. */
.webmux-view[data-pending="true"] { border-bottom-style: dashed; border-bottom-color: var(--studio-plate-muted); }
.webmux-view-pending, .nav-view-pending { opacity: 0.7; font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-label); }
.nav-views .nav-row[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.nav-views .nav-row[data-pending="true"] .nav-row-title { font-style: italic; }
/* The OPERATOR's current window (tmux `window_active`, moves with their
 * zellij) — a different fact from this browser's selected tab
 * (`aria-selected`), so it is worded, never implied by the same styling. */
.webmux-view-operator, .nav-row-operator { opacity: 0.75; font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-label); }
/* A per-request Host error (a refused select_window, a failed resize): the
   channel is still live, so this is an inline notice beside the strip, never
   the attach overlay. */
.webmux-notice {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px; flex: none;
  font-family: var(--type-technical); font-size: 11px; color: var(--studio-plate-ink);
  background: var(--studio-plate-surface); border-bottom: 1px solid var(--studio-plate-line);
}
.webmux-notice-code { font-family: var(--type-terminal); color: var(--studio-plate-accent); }
.webmux-notice .act { margin-left: auto; height: 22px; padding: 0 8px; font-size: 11px; }
.webmux-screen { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; }
.webmux-terminal { height: 100%; min-height: 0; }
/* size_mode "ignore": the operator's geometry, rendered at its own size. */
.webmux-screen[data-fixed="true"] .webmux-terminal { height: auto; width: max-content; }
/* A mirrored (read-only) grid says so ON THE GRID, not only in the foot
   (review round 7: `data-read-only` was set and nothing styled it, so a
   clicked mirror was indistinguishable from a live terminal). A muted frame
   and a chip; `pointer-events: none` keeps selection and copy working. */
.webmux-screen[data-read-only="true"] { box-shadow: inset 0 0 0 1px var(--studio-plate-line); }
.webmux-screen[data-read-only="true"]::after {
  content: "read-only \00b7 mirrored"; position: absolute; top: 4px; right: 12px; z-index: 1;
  padding: 1px 6px; font-family: var(--type-technical); font-size: 10px;
  color: var(--studio-plate-muted); background: var(--studio-plate-surface);
  border: 1px solid var(--studio-plate-line); pointer-events: none;
}
.webmux-overlay { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; }
.webmux-foot {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px; flex: none;
  border-top: 1px solid var(--studio-plate-line); font-family: var(--type-technical); font-size: 11px;
  color: var(--studio-plate-muted);
}
.webmux-geometry { font-variant-numeric: tabular-nums; }
.webmux-foot-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.webmux-foot .act {
  height: 24px; padding: 0 8px; font-size: 11px;
  background: var(--studio-plate-surface); color: var(--studio-plate-ink); border-color: var(--studio-plate-line);
}
.webmux-foot .act:hover { border-color: var(--studio-plate-muted); }

/* ── Directory ──────────────────────────────────────────────────────────── */
.studio-machine { display: inline-flex; align-items: center; gap: 5px; }
.studio-directory .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* The studio's own search-field realization, SCOPED to the studio surfaces.
 * tokens.css owns the bare `.search-field` every other view renders (the
 * /inside toolbars use it); this file is a base asset on every console page,
 * so an unscoped re-declaration here would win the cascade everywhere
 * (review round 2). The console's selector-intersection test pins that no
 * top-level selector of studio.css re-declares one of tokens.css's. */
.studio-directory .search-field, .studio-root .search-field {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--role-border-strong); border-radius: 6px;
  padding: 0 9px; height: 30px; background: var(--role-surface); min-width: 0;
}
.studio-directory .search-field svg, .studio-root .search-field svg { color: var(--role-muted); flex: none; }
.studio-directory .search-field input, .studio-root .search-field input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--role-text); width: 100%; height: 100%; min-width: 0; }
.studio-directory .search-field:focus-within, .studio-root .search-field:focus-within { border-color: var(--role-focus); }
.studio-directory .search-field { min-width: 220px; }
/* The connected-machine rows the directory names when a Host is connected
 * but reports no studios (never "No Studio Host is connected" beside a
 * "1 machine connected" badge). */
.studio-machines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--type-technical); font-size: 12px; }
.studio-machines li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Phase 5: the studio bar, the lane chords, the reaches ──────────────── */
.studio-bar {
  grid-column: 1 / -1; grid-row: 1; display: none; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--role-border); background: var(--role-surface);
  min-width: 0;
}
.studio-bar-title {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--role-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-surfaces { display: none; gap: 2px; flex: none; }
.studio-surface {
  appearance: none; border: 1px solid transparent; background: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--role-muted); border-radius: 6px; padding: 4px 10px; min-height: 32px;
}
.studio-surface[aria-pressed="true"] {
  color: var(--role-text-strong); background: var(--role-surface-sunken); border-color: var(--role-border);
  font-weight: var(--weight-semibold);
}
.studio-surface:focus-visible, .studio-bar-sheet:focus-visible { outline: 2px solid var(--role-focus); outline-offset: 1px; }
.side-menu-reach { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
/* The lane chord's visible route (Foundation §17): a quiet key cap. */
.lane-shortcut {
  font-family: var(--type-technical); font-size: 10px; color: var(--role-muted);
  border: 1px solid var(--role-border); border-radius: 4px; padding: 0 4px; line-height: 16px;
}
.nav-row[aria-disabled="true"][data-lane-held] { opacity: 0.6; cursor: not-allowed; }
/* The keyboard reach that did nothing visible, said (a lane number past the
 * list, a chord while the page is held). A status line, not a record. */
.studio-announce {
  position: absolute; left: 12px; bottom: 12px; z-index: 6; margin: 0; max-width: min(520px, 80%);
  padding: 6px 10px; border: 1px solid var(--role-border-strong); border-radius: 6px;
  background: var(--role-surface); color: var(--role-text); font-size: 12px;
}
.studio-announce[data-empty="true"] { display: none; }

/* The WorkspaceSwitcher (a listbox under a filter) and the keyboard
 * reference, both inside the studio's own Dialog. */
.switcher-field { margin: 0 0 8px; }
.switcher-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: min(52vh, 420px); overflow-y: auto; }
.switcher-item > .nav-row { text-decoration: none; }
.switcher-item > .nav-row[data-cursor="true"] { background: var(--role-surface-sunken); box-shadow: inset 3px 0 0 var(--role-text-strong); }
.switcher-item > .nav-row[aria-disabled="true"] { cursor: not-allowed; }
.reference-section { margin: 0 0 12px; }
.reference-list { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.reference-row { display: flex; gap: 12px; align-items: baseline; }
.reference-row > dt { flex: none; min-width: 7.5em; }
.reference-row > dd { margin: 0; font-size: 13px; }
.reference-list kbd { font-family: var(--type-technical); font-size: 12px; }

/* F3: the directory's `missing` sentence beneath the presence word, and the
 * evidence behind it as visible text (review round 4: it was title-only). */
.directory-missing {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px;
  font-size: 12px; color: var(--role-text);
}
.directory-missing-line { display: inline-flex; align-items: center; gap: 6px; }
.directory-missing-detail { display: block; font-size: 11px; color: var(--role-muted); }
.directory-missing[data-lane-status-contradicted] .directory-missing-detail { color: var(--role-attention); }

/* ── Responsive (Foundation §24; the shell's own breakpoints) ───────────── */
/* Medium (≤ 1100 px): the Side Menu becomes a SHEET over the studio, opened
 * from the studio bar; the Renderer stacks under the Agent Session and the
 * divider (a left/right split) steps aside. The centre is never moved by the
 * sheet: it overlays, it does not reflow the session. */
@media (max-width: 1100px) {
  .studio-root { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 3fr) minmax(0, 2fr); }
  .studio-bar { display: flex; }
  .studio-gutter { display: none; }
  .studio-root > .studio-pane[data-pane="session"] { grid-row: 2; grid-column: 1; border-right: 0; border-bottom: 1px solid var(--role-border); }
  .studio-root > .studio-pane[data-pane="renderer"] { grid-row: 3; grid-column: 1; }
  .studio-root > .side-menu {
    grid-row: 2 / -1; grid-column: 1; position: absolute; top: 0; bottom: 0; left: 0; z-index: 5;
    width: min(320px, 88%); box-shadow: var(--shadow-overlay);
  }
  .studio-root[data-sheet="closed"] > .side-menu { display: none; }
}
/* Mobile (≤ 720 px): ONE surface at a time — Agent, Renderer or Side Menu,
 * chosen from the bar; the Agent Session is the default. The others are
 * hidden but stay MOUNTED and sized (visibility, never display:none), so a
 * live terminal is neither torn down nor refitted to zero when the person
 * looks at the Renderer. */
@media (max-width: 720px) {
  .studio-root { grid-template-rows: auto minmax(0, 1fr); }
  .studio-bar { flex-wrap: wrap; }
  .studio-bar-sheet { display: none; }
  .studio-surfaces { display: inline-flex; }
  .studio-root > .studio-pane { grid-row: 2; grid-column: 1; }
  .studio-root > .side-menu { grid-row: 2; grid-column: 1; position: static; width: auto; box-shadow: none; border-right: 0; }
  .studio-root[data-sheet="closed"] > .side-menu { display: flex; }
  .studio-root:not([data-surface="menu"]) > .side-menu,
  .studio-root:not([data-surface="session"]) > .studio-pane[data-pane="session"],
  .studio-root:not([data-surface="renderer"]) > .studio-pane[data-pane="renderer"] { visibility: hidden; }
  .studio-root > .studio-pane[data-pane="session"] { border-bottom: 0; }
}

/* ── Phase 4: the Side Menu's read modes and the Renderer families ───────── */
/* Achromatic by construction. Status and diff rows carry a WORD and a sign;
 * the tint under them is a second carrier, never the only one. */
.side-menu-mode { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.side-menu-mode > .status-region { margin: 0; }
.mode-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--role-muted); }
.tree-listed { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mode-note[data-truncated] { color: var(--role-warning); }
.mode-note[data-problem] { color: var(--role-danger); }
.mode-group { display: flex; flex-direction: column; gap: 2px; }
.mode-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--role-muted); padding: 2px 4px;
}
.mode-head { display: flex; flex-direction: column; gap: 3px; }
.mode-head-line {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-family: var(--type-technical); font-size: 12px; color: var(--role-text-strong);
}
.mode-head-line > svg { flex: none; color: var(--role-muted); }
.mode-head-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-head-base { color: var(--role-muted); }
.mode-head-sub { font-size: 11px; font-family: var(--type-technical); color: var(--role-muted); }
.mode-search { display: flex; flex-direction: column; gap: 6px; }
.mode-tabs { display: inline-flex; gap: 2px; flex: none; }
.mode-tab {
  appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--role-muted); border-radius: 5px;
  padding: 2px 8px; height: 22px; white-space: nowrap;
}
.mode-tab:hover { color: var(--role-text); background: var(--role-surface-sunken); }
.mode-tab[aria-selected="true"] {
  color: var(--role-text-strong); background: var(--role-surface-sunken);
  border-color: var(--role-border); font-weight: var(--weight-semibold);
}
/* A DISABLED tab reads as one: dimmed, no pointer, no hover lift — the
   Service family's "Pane transcript" looked like an ordinary tab that did
   nothing on click (review round 3 of Phase 4). The reason is its title. */
.mode-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.mode-tab:disabled:hover { color: var(--role-muted); background: none; }

/* The file tree: one flat row list with the depth carried as a custom
 * property, so nesting costs no wrapper element and the keyboard walk is a
 * single sequence. */
.tree { --tree-depth: 0; }
.tree-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--tree-depth) * 13px); }
.tree-row > .nav-row { flex: 1; min-width: 0; }
.tree-row > .act-overflow { flex: none; opacity: 0; }
.tree-row:hover > .act-overflow,
.tree-row:focus-within > .act-overflow,
.tree-row > .act-overflow[aria-pressed="true"] { opacity: 1; }
.tree-status { padding-left: calc(var(--tree-depth) * 13px); }
.tree-status > .status-region { margin: 2px 0; }
.tree-note {
  padding: 2px 6px 2px calc(6px + var(--tree-depth) * 13px);
  font-size: 11px; font-family: var(--type-technical); color: var(--role-muted);
}
.tree-note[data-truncated] { color: var(--role-warning); }
.hit-preview { font-family: var(--type-terminal); white-space: pre; }
.hit-preview-cut { color: var(--role-muted); font-family: var(--type-technical); }
.diff-stat { font-family: var(--type-technical); font-variant-numeric: tabular-nums; }

/* ── The Renderer body ──────────────────────────────────────────────────── */
.render-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 0; }
.render-foot {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px;
  font-family: var(--type-technical); color: var(--role-muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--role-border);
}
.render-foot[data-truncated="true"] { color: var(--role-warning); }
.facts { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.facts-row { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.facts dt {
  flex: none; width: 140px; font-size: 11px; color: var(--role-muted);
  text-transform: uppercase; letter-spacing: var(--track-label);
}
.facts dd { margin: 0; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }

/* Markdown, Rendered. No inline style, no HTML sink: every element here was
 * built by React from a token the parser emitted. */
.markdown { font-size: 13px; line-height: 1.6; color: var(--role-text); min-width: 0; }
.markdown > :first-child { margin-top: 0; }
.md-heading { color: var(--role-text-strong); line-height: 1.3; margin: 18px 0 6px; }
.md-heading[data-level="1"] { font-size: 19px; }
.md-heading[data-level="2"] { font-size: 16px; }
.md-heading[data-level="3"] { font-size: 14px; }
.md-heading[data-level="4"], .md-heading[data-level="5"], .md-heading[data-level="6"] { font-size: 13px; }
.md-paragraph { margin: 0 0 10px; }
.md-list { margin: 0 0 10px; padding-left: 20px; }
.md-list li { margin: 2px 0; }
.md-list li[data-depth="1"] { margin-left: 16px; }
.md-list li[data-depth="2"] { margin-left: 32px; }
.md-list li[data-depth="3"], .md-list li[data-depth="4"] { margin-left: 48px; }
.md-quote {
  margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 2px solid var(--role-border-strong); color: var(--role-muted);
}
.md-rule { border: 0; border-top: 1px solid var(--role-border); margin: 16px 0; }
.md-code, .raw {
  margin: 0 0 10px; padding: 10px 12px; overflow-x: auto;
  background: var(--role-surface-sunken); border: 1px solid var(--role-border);
  border-radius: 6px; font-family: var(--type-terminal); font-size: 12px; line-height: 1.5;
}
.md-code-note { display: block; margin-top: 6px; color: var(--role-warning); font-size: 11px; }
.markdown code { font-family: var(--type-terminal); font-size: 12px; }
.md-image, .md-link-refused { color: var(--role-muted); }
/* A followed markdown link is a BUTTON (an in-pane scroll or a Renderer
   open), never an anchor: underlined text, so it reads as a link without
   colour carrying the meaning. */
.md-link {
  display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit;
  color: var(--role-text-strong); text-decoration: underline; cursor: pointer;
}
.md-link:focus-visible { outline: 2px solid var(--role-focus); outline-offset: 1px; }
.md-table { border-collapse: collapse; margin: 0 0 10px; font-size: 12px; display: block; overflow-x: auto; }
.md-table th, .md-table td {
  border: 1px solid var(--role-border); padding: 4px 8px; text-align: left; vertical-align: top;
}
.md-table th { color: var(--role-text-strong); background: var(--role-surface-sunken); }

/* Code, Source. The tokenizer is vendored; the classes are achromatic apart
 * from a muted comment and a tinted string, and the code reads with neither. */
.code, .transcript {
  font-family: var(--type-terminal); font-size: 12px; line-height: 1.55;
  border: 1px solid var(--role-border); border-radius: 6px; overflow-x: auto;
  background: var(--role-surface-sunken);
}
.code-line { display: flex; gap: 10px; white-space: pre; }
/* A search hit's line: marked by a rule in the margin as well as the tint,
   so the mark does not depend on colour. */
.code-line[data-focus-line="true"] { background: var(--role-surface-sunken); box-shadow: inset 3px 0 0 var(--role-text-strong); }
.code-number {
  flex: none; width: 46px; text-align: right; padding-right: 2px;
  color: var(--role-muted); user-select: none; font-variant-numeric: tabular-nums;
}
.code-text { min-width: 0; padding-right: 12px; }
.code [data-token="comment"] { color: var(--role-muted); font-style: italic; }
.code [data-token="string"] { color: var(--role-success); }
.code [data-token="keyword"] { color: var(--role-text-strong); font-weight: var(--weight-semibold); }
.code [data-token="number"] { color: var(--role-information); }
.transcript-line { white-space: pre; padding: 0 12px; }

/* Diff, Unified. The sign column carries the word; the tint is the second
 * carrier and never the only one. */
.diff { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.diff-legend { margin: 0; font-size: 11px; color: var(--role-muted); }
.diff-legend code { font-family: var(--type-terminal); }
.diff-rows {
  font-family: var(--type-terminal); font-size: 12px; line-height: 1.55;
  border: 1px solid var(--role-border); border-radius: 6px; overflow-x: auto;
  background: var(--role-surface-sunken);
}
.diff-row { display: flex; gap: 8px; white-space: pre; }
.diff-row[data-diff="add"] { background: var(--role-success-tint); }
.diff-row[data-diff="del"] { background: var(--role-danger-tint); }
.diff-row[data-diff="hunk"], .diff-row[data-diff="meta"] { color: var(--role-muted); background: var(--role-surface); }
.diff-number {
  flex: none; width: 42px; text-align: right; color: var(--role-muted);
  user-select: none; font-variant-numeric: tabular-nums;
}
.diff-sign { flex: none; width: 12px; text-align: center; color: var(--role-text-strong); }
.diff-text { min-width: 0; padding-right: 12px; }
/* Hidden characters (bidi controls, zero-width and format characters, a lone
   CR) are painted as VISIBLE code-point marks, and every line of agent-written
   text is a bidi ISOLATE, so neither can reorder what surrounds it (review
   round 2 of Phase 4: Trojan Source). */
.code-text, .diff-text, .hit-preview, .transcript-line { unicode-bidi: isolate; }
/* The same isolation for the rest of agent-written text on screen: rendered
   Markdown, file and service names in the Side Menu, and the Renderer's
   title (review round 3 of Phase 4). */
.markdown p, .markdown li, .markdown th, .markdown td, .markdown code,
.md-heading, .md-link, .md-link-refused, .md-image,
.nav-row-title, .nav-row-sub, .pane-title, .pane-sub { unicode-bidi: isolate; }
.hidden-mark {
  display: inline-block;
  margin: 0 1px;
  padding: 0 3px;
  border: 1px solid var(--role-border);
  border-radius: 3px;
  font-family: var(--type-technical);
  font-size: 0.8em;
  line-height: 1.2;
  color: var(--role-warning);
  unicode-bidi: isolate;
}

/* Shared Lanes: text snapshots, independent of Studio/xterm geometry. */
.sharing { min-width: 0; max-width: 1500px; margin-inline: auto; }
.sharing .sharing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-block: 12px; }
.sharing a, .sharing button, .sharing select { touch-action: manipulation; }
.sharing button, .sharing select, .sharing input[type="search"] { min-height: 44px; font-size: 16px; }
.sharing input[type="checkbox"] { width: 20px; height: 20px; margin-inline-end: 10px; vertical-align: middle; }
.sharing .sharing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-block: 20px; }
.sharing .sharing-card, .sharing .sharing-settings { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-decoration: none; color: inherit; background: var(--surface); }
.sharing .sharing-card:hover { border-color: currentColor; }
.sharing .sharing-muted { opacity: .7; }
.sharing .sharing-split { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.sharing .sharing-lanes { display: flex; flex-direction: column; gap: 8px; max-height: 70dvh; overflow: auto; }
.sharing .sharing-lane { appearance: none; text-align: left; padding: 12px 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; flex-shrink: 0; cursor: pointer; }
.sharing .sharing-lane strong, .sharing .sharing-lane span { display: block; overflow-wrap: anywhere; }
.sharing .sharing-lane[aria-pressed="true"] { border-color: var(--role-focus); box-shadow: inset 3px 0 var(--role-focus); background: var(--role-surface-raised); }
.sharing .sharing-lane:hover { border-color: var(--line-strong); }
.sharing button[type="submit"], .sharing select, .sharing input[type="search"] { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: var(--surface); color: var(--ink); font-family: inherit; }
.sharing button[type="submit"] { cursor: pointer; font-weight: 600; }
.sharing button:focus-visible, .sharing a:focus-visible, .sharing select:focus-visible { outline: 2px solid var(--role-focus); outline-offset: 3px; }
.sharing .sharing-viewer { min-width: 0; }
.sharing .sharing-output { display: block; width: 100%; min-height: 240px; height: 65dvh; max-height: 850px; overflow: auto; overscroll-behavior: contain; white-space: pre; tab-size: 4; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #10141b; color: #e4e9f2; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; box-sizing: border-box; -webkit-user-select: text; user-select: text; }
.sharing .sharing-settings { margin-block: 16px; }
.sharing .sharing-settings summary { min-height: 44px; cursor: pointer; font-weight: 650; }
.sharing .sharing-settings form { display: grid; gap: 16px; }
.sharing .sharing-settings label { display: block; min-height: 44px; padding-block: 8px; }
.sharing .sharing-audience { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; max-height: 350px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
/* The shared-lanes page collapses at the console's ONE mobile breakpoint (Phase 5
 * review round 5: it had its own 760 px, so between 721 and 760 px the page
 * was mobile inside a medium shell; tests/tokens.test.mjs pins the pair). */
@media (max-width: 720px) {
  .sharing .sharing-split { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .sharing .sharing-lanes { max-height: 25dvh; }
  .sharing .sharing-output { height: 52dvh; padding: 12px; }
  .sharing .sharing-card, .sharing .sharing-settings { padding: 14px; }
  .sharing .sharing-audience { grid-template-columns: minmax(0,1fr); }
  .sharing { padding-bottom: max(20px,env(safe-area-inset-bottom)); }
}