@font-face {
  font-family: "Commit Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/proofstack-desktop/fonts/commit-mono-latin-400-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/commit-mono-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Commit Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/proofstack-desktop/fonts/commit-mono-latin-700-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/commit-mono-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/proofstack-desktop/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-sans-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/proofstack-desktop/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-sans-latin-500-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/proofstack-desktop/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-sans-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/proofstack-desktop/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-sans-condensed-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/proofstack-desktop/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-mono-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/proofstack-desktop/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"), url("/proofstack-desktop/fonts/ibm-plex-mono-latin-500-normal.woff") format("woff");
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/proofstack-desktop/fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
  font-family: "Switzer";
  src: url("/proofstack-desktop/fonts/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}


/* ==========================================================================
   Design tokens — single source of truth.

   One accent, everywhere, and it is the hub purple from the mark. Purple means
   agency: a running agent, the active selection, the primary action, focus. It
   never means "heading" and it never means "decoration". Everything else is
   monochrome until a state is actually true.

   Structure comes from 1px hairlines and a surface step, never a shadow.
   Any value not defined here is a bug.

   Every colour below was measured, not eyeballed. Ratios in comments are
   against --bg-app / --bg-surface / --bg-raised in that order.
   ========================================================================== */

/* --- The three faces ------------------------------------------------------
   Self-hosted, no CDN. Cabinet Grotesk and Switzer are variable, so one file
   covers every weight. Commit Mono arrives via @fontsource in main.tsx. */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/proofstack-desktop/fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

@font-face {
  font-family: "Switzer";
  src: url("/proofstack-desktop/fonts/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

:root {
  color-scheme: dark;

  /* --- Surfaces -----------------------------------------------------------
     Four steps now, near-black and almost perfectly neutral. The old ramp was
     three steps and slightly violet, which tinted every surface in the app
     with the accent hue and left nothing for the accent itself to stand
     against. These are grey. Depth is still read from the step change alone:
     nothing is lifted with a shadow.

     The fourth step exists because row hover and card fill were the same
     value, so a card and the row hovering behind it were indistinguishable. */
  --bg-app: #0a0a0b; /* page background and shared content canvas */
  --bg-void: #000000; /* exposed workspace ground and dark titlebar */
  --bg-surface: #0d0d0f; /* floating sidebar and work surfaces */
  --bg-raised: #141417; /* cards, panels, the empty-state tile */
  /* Terminal chrome stays a dark instrument even when the surrounding shell
     changes theme: the reference treats each CLI as its own small window. */
  --terminal-bg: #050505;
  --terminal-bar: #252525;
  --terminal-border: #454545;
  --terminal-text: #f1f1f1;
  --terminal-muted: #a6a6a6;
  --bg: var(--bg-app);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-raised);
  --surface-hover: #1a1a1e; /* row hover — its own step, not the card fill */
  --surface-active: #212127;

  /* Plan vocabulary, pointing at the same four steps. */
  --bg-base: var(--bg-app);
  --bg-panel: var(--bg-raised);
  --bg-hover: var(--surface-hover);

  /* --- Borders ------------------------------------------------------------
     Three, not two. A divider only has to be seen; a control's edge has to
     clear 3:1 or the control is not perceivable, and --border-strong never
     could. That is what --line-control is for. */
  --border-subtle: #1f1f24; /* pane dividers, hairlines */
  --border-strong: #2a2a31; /* inputs, buttons */
  --line-control: #64646f; /* 3.36 / 3.30 / 3.12 — inputs, checkboxes, switches */
  --border: var(--border-subtle);

  /* Brief-named aliases, so either vocabulary reads correctly. */
  --line: var(--border-subtle);
  --line-strong: var(--border-strong);

  /* --- Text ---------------------------------------------------------------
     Three steps, all of which clear AA as *text* on all three surfaces. The
     fourth is not text. */
  --text-primary: #e8e8ea; /* 16.17 / 15.87 / 15.03 — headings, active nav */
  --text-secondary: #9a9aa2; /*  7.08 /  6.95 /  6.58 — nav items, labels */
  /* The plan proposes #6a6a73 here. Measured, that is 3.43:1 on --bg-raised,
     and this token sets empty-state copy and meter text — body copy, which the
     plan itself holds to 4.5:1. Lightened until it actually passes rather than
     shipped because the table said so. */
  --text-tertiary: #7d7d88; /*  4.86 /  4.77 /  4.52 — empty-state copy, meters */

  /* The idle status mark: a dot, a bullet, a lamp. Not text, so the bar is
     3:1 rather than 4.5:1 — which is exactly what the darker step passes and
     why it lives here instead of in the text ramp above. */
  --text-tertiary-mark: #61616c; /*  3.24 /  3.18 /  3.01 */

  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --text-faint: var(--text-tertiary);

  /* The board's own surface: darker than any panel on purpose — the board is
     a place you look into rather than a panel you read. The rule is texture,
     there to give a drag something to move against, not to be counted. */
  --sgraph-void: #060607;
  --sgraph-grid: color-mix(in srgb, var(--text-primary) 4.5%, transparent);

  /* Graph wires are content — they are how the topology is read — so they meet
     the 3:1 non-text minimum. The lit state is a step in brightness *and*
     width, because the dash animation that carried it is gone under reduced
     motion. */
  --sgraph-edge: #61616c;
  --sgraph-edge-active: #c8c8d0;

  /* --- Accent -------------------------------------------------------------
     THE ACCENT IS GREY. This is the whole discipline of the redesign, and it
     is enforced here rather than at 216 call sites.

     Every surface in the app already asks for `var(--accent)`. Rather than
     hunt those down and rewrite each one — which would neutralise the app
     once and then decay the moment anyone wrote `--accent` again — the family
     itself resolves monochrome. A nav item, a button, a border or a focus
     ring that asks for the accent gets grey, today and in any code written
     later. Restraint becomes the default rather than a rule to remember.

     Violet is not deleted; it is scoped. Two surfaces re-point this same
     family at the hub purple over their own subtree — the voice controls, the
     status orb and its microphone, whose accent means "an agent has agency
     here", and first-run onboarding, where the violet check is what the choice
     you just made looks like. Both are defined below under "Scoped violet".
     Everywhere else on screen is grey, and that restraint is what makes the
     density readable rather than noisy. */
  --accent: #8a8a95; /* fills, dots, rings, the rail — never type */
  --accent-hover: #a0a0ab;
  --accent-press: #74747f;
  --accent-hi: var(--accent-hover);

  /* Accent *as type*. Stated as a literal rather than aliased to
     --text-primary: an alias here resolves against whichever theme block the
     reader is standing in, so the light theme inherited dark ink and landed at
     1.08:1. Each theme says its own value. */
  --accent-text: #e8e8ea;
  --accent-solid: var(--bg-raised); /* the primary button is a panel, not a fill */
  --accent-ink: var(--text-primary);

  --accent-quiet: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-line: var(--border-strong);
  --accent-soft: var(--accent-quiet);

  /* Focus is a ring in the text colour at 2px, not a purple halo. */
  --focus-ring: var(--text-secondary);

  /* --- The hub purple ------------------------------------------------------
     Held as raw values so the two scoped surfaces below can re-point the
     accent family at them without restating the hex anywhere. Nothing outside
     those scopes may reference these directly. */
  --violet: #7051fc;
  --violet-hover: #8368fd;
  --violet-press: #5c3ce8;
  --violet-text: #9f8bfd; /* violet *as type*, against the darker ground */
  --violet-solid: #6244f2;
  --violet-ink: #f4f3f8;

  --swarm-purple: #8b5cf6;
  --swarm-purple-hi: #9b6cf8;
  --swarm-purple-solid: #7c3aed;
  --swarm-purple-subtle: #c084fc;
  --swarm-white: #ffffff;

  /* --- Theme previews ------------------------------------------------------
     Literal copies of both themes' surfaces, and the only tokens in this file
     that deliberately do *not* react to the theme.

     A card previewing the theme you are not in cannot use a theme-reactive
     token — --bg-app is whichever theme is live, so both previews would show
     the same thing. Naming them here rather than inlining the hex at each use
     means the swatch in Settings and the card in onboarding cannot drift apart,
     and the "no raw values" guard stays absolute instead of carrying a list of
     blessed exceptions. */
  --preview-dark-bg: #0a0a0b;
  --preview-dark-surface: #0d0d0f;
  /* The intro screen's cinema black. Deliberately not theme-reactive: the
     clip plays over everything, in both themes, as pure black. */
  --intro-void: #000000;
  --preview-dark-panel: #141417;
  --preview-dark-line: #2a2a31;
  --preview-light-bg: #f7f7f8;
  --preview-light-surface: #fdfdfd;
  --preview-light-panel: #ffffff;
  --preview-light-line: #d3d3d8;

  /* --- Composer tokens ----------------------------------------------------- */
  --composer-white: #ffffff;
  --composer-ink: #0a0a0b;
  --composer-bolt: #facc15;
  --composer-record: #ef4444;
  --composer-bg: #18181b;
  --composer-border: #27272a;
  --composer-send: #7051fc;
  --composer-send-hover: #8368fd;
  --composer-send-press: #5c3ce8;
  --glow-shimmer-start: #9f8bfd;
  --glow-shimmer-mid: #ffffff;
  --glow-shimmer-end: #c4b5fd;

  /* --- Agent roles --------------------------------------------------------
     Role is nominal data: coordinator is not more or less than scout. It gets
     a nominal channel — shape, from the mark's own geometry — and no hue and
     no luminance ramp, either of which would imply an order that is not there.

     These aliases stay so the graph, rail and chat can keep asking for
     var(--role); they now resolve monochrome, and shape does the work. The
     five hues they used to hold are gone: two of them (scout green, reviewer
     amber) collided with --ok and --warn, so a role could read as an outcome. */
  --role: var(--text-secondary);
  --role-soft: color-mix(in srgb, var(--text-secondary) 10%, transparent);
  --role-line: var(--border-strong);
  --role-glow: transparent;

  /* --- Discord-style Swarm Chat & Mention Tokens -------------------------- */
  --discord-mention-bg: color-mix(in srgb, #5865f2 18%, transparent);
  --discord-mention-bg-hover: color-mix(in srgb, #5865f2 32%, transparent);
  --discord-mention-text: #8ea1ff;
  --discord-mention-border: color-mix(in srgb, #5865f2 35%, transparent);

  --role-coordinator: #f0b232;
  --role-coordinator-bg: color-mix(in srgb, #f0b232 16%, transparent);
  --role-coordinator-border: color-mix(in srgb, #f0b232 36%, transparent);

  --role-reviewer: #38d39f;
  --role-reviewer-bg: color-mix(in srgb, #38d39f 16%, transparent);
  --role-reviewer-border: color-mix(in srgb, #38d39f 36%, transparent);

  --role-builder: #f38234;
  --role-builder-bg: color-mix(in srgb, #f38234 16%, transparent);
  --role-builder-border: color-mix(in srgb, #f38234 36%, transparent);

  --role-scout: #38bdf8;
  --role-scout-bg: color-mix(in srgb, #38bdf8 16%, transparent);
  --role-scout-border: color-mix(in srgb, #38bdf8 36%, transparent);

  --role-operator: #818cf8;
  --role-operator-bg: color-mix(in srgb, #818cf8 16%, transparent);
  --role-operator-border: color-mix(in srgb, #818cf8 36%, transparent);

  --role-service: #94a3b8;
  --role-service-bg: color-mix(in srgb, #94a3b8 16%, transparent);
  --role-service-border: color-mix(in srgb, #94a3b8 36%, transparent);

  /* --- State --------------------------------------------------------------
     Three, and they only ever appear when that state is true. Warn no longer
     shares the accent hue: purple means "an agent has agency here", amber
     means "this needs you", and one colour cannot say both. */
  --state-run: #4ade9b; /* 11.17 / 10.55 /  9.70 */
  --state-warn: #f2c14e; /* 11.45 / 10.80 /  9.94 */
  --state-error: #f2555a; /*  5.69 /  5.37 /  4.94 */

  --ok: var(--state-run);
  --warn: var(--state-warn);
  --bad: var(--state-error);
  --danger: var(--state-error); /* plan vocabulary — Kill All, destructive confirms */

  /* --- Usage meters --------------------------------------------------------
     The bar is grey until the number is worth reacting to. Colour is the only
     signal that changes across the thresholds: no size change, no motion —
     a status bar that moves is a status bar you stop trusting. */
  --meter-track: var(--border-subtle);
  --meter-fill: var(--text-secondary);
  --meter-warn: var(--state-warn); /* above 80% */
  --meter-danger: var(--state-error); /* above 95% */
  /* Past the thresholds the fill becomes this ramp, sized to the track, so a
     full bar reads "the *end* is red" rather than as a solid alarm strip. */
  --meter-ramp: linear-gradient(
    90deg,
    var(--meter-fill) 0 55%,
    var(--meter-warn) 80%,
    var(--meter-danger) 100%
  );


  /* All three clear AA as type on every surface, so the text face is the same
     colour as the dot. Three tokens fewer, and a dot and its label can never
     drift apart. */
  --ok-text: var(--state-run);
  --warn-text: var(--state-warn);
  --bad-text: var(--state-error);

  /* A state gets a tint and a hairline, never a filled banner. */
  --run-soft: color-mix(in srgb, var(--state-run) 10%, transparent);
  --run-line: color-mix(in srgb, var(--state-run) 32%, transparent);
  --warn-soft: color-mix(in srgb, var(--state-warn) 10%, transparent);
  --warn-line: color-mix(in srgb, var(--state-warn) 32%, transparent);
  --error-soft: color-mix(in srgb, var(--state-error) 10%, transparent);
  --error-line: color-mix(in srgb, var(--state-error) 32%, transparent);

  /* --- Radius -------------------------------------------------------------
      6 chips and inputs, 10 cards and buttons, 14 panels, 18 modals. Panes are
      rounded cards too — 12px, matching the reference shell where every pane,
      the sidebar and the composer are visibly rounded objects floating on the
      app ground. */
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-modal: 18px;
  --radius-pane: 12px;
  --radius-full: 9999px;

  /* --- Spacing ------------------------------------------------------------
     4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96, on a 4px base. The top of this
     scale used to be three copies of 32px; it is a real ramp now, so vertical
     rhythm between groups can be generous while rhythm inside them stays
     tight. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  /* --- Type ---------------------------------------------------------------
     The scale is rem so it answers to the root, and it is the brief's scale
     with one addition: a 12px step. This app puts 71 rules at 12px — the gap
     between an 11px eyebrow and a 13px label is real in a pane 300px wide,
     and closing it would cost density the tool cannot spare.

     Chrome sits at `label`, not `body`. §4 says density is the point; at a
     32px row height, 14px chrome does not fit. */
  --t-micro: 0.6875rem; /* 11px — eyebrows, column heads, status */
  --t-meta: 0.75rem; /* 12px — the density step (deviation, documented) */
  --t-label: 0.8125rem; /* 13px — chrome, labels, buttons */
  --t-body: 0.875rem; /* 14px — running prose */
  --t-body-l: 1rem; /* 16px */
  --t-title: 1.375rem; /* 22px */
  --t-display-m: 2rem; /* 32px */
  --t-display-l: 2.75rem; /* 44px */
  --t-mono: 0.8125rem; /* 13px — always tabular */

  /* Legacy names, pointing into the scale above. Nothing new may use them. */
  --t-11: var(--t-micro);
  --t-12: var(--t-meta);
  --t-13: var(--t-label);
  --t-15: var(--t-body-l);
  --t-20: var(--t-title);
  --t-compact: var(--t-label);
  --t-card: var(--t-body-l);
  --t-section: var(--t-body-l);
  --t-display: var(--t-display-m);
  --t-hero: var(--t-display-l);

  /* Tracking is negative on display sizes only. */
  --track-display-l: -0.03em;
  --track-display-m: -0.025em;
  --track-title: -0.015em;
  --track-micro: 0.08em;
  /* The account gate's eyebrow — the one place tracking is the voice. */
  --track-wide: 0.3em;

  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.55;

/* The reference sidebar reads much wider than this because the screenshot is
   2×. 260 is that measurement halved and then settled against our own 13px
   chrome — copying the pixel value literally would have given a 520px rail. */
  --sidebar-w: 260px;
  --sidebar-panel-w: 260px;
  --sidebar-rail-w: 64px;
  --rail-w: 64px; /* legacy name for the collapsed sidebar */
  --rail-accent: 2px;

  /* Shell chrome. Both are fixed: they are the frame, and a frame that changes
      height as content loads makes the whole window feel unstable. */
  --tbar-h: 60px;
  --sbar-h: 28px;
  --frail-w: 240px;
  /* macOS parks its traffic lights in the top-left. Nothing may be drawn under
     them; on every other platform this collapses to nothing. */
  --tbar-lights: 0px;

  /* The orchestration rail — the signature element. Not the sidebar. */
  --orail-w: 24px;
  --orail-node: 6px;

  /* Elevation exists once, for modals and popovers. Everything else is a
     hairline against a different surface step. */
  --scrim: color-mix(in srgb, #000 62%, transparent);
  --shadow-1: none;
  --shadow-2: 0 0 0 1px var(--line), 0 16px 40px -12px color-mix(in srgb, #000 70%, transparent);

  /* --- Motion -------------------------------------------------------------
     120ms hover and press, 200ms panels and popovers. Nothing longer except
     the rail draw, and nothing that stands between a click and its result. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: var(--ease);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --dur-rail: 600ms; /* one edge segment drawing on hand-off */
  --dur-mark: 500ms; /* the mark assembling, cold start only */
  /* Entrances only: a strong ease-out — fast start, long settle. The standard
     --ease stays for everything that changes under the pointer. */
  --ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-enter: 360ms;
  --dur-route: 5.2s; /* one full idle circuit of the mark, hub to all four */
  /* Continuous liveness is not a transition and does not obey the 200ms
     ceiling — a pulse at 200ms is a flicker. */
  --dur-live: 640ms;
  --dur-pulse: 1.4s;

  --display:
    "Cabinet Grotesk", "Switzer", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:
    "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --mono:
    "Commit Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  font-family: var(--sans);
  /* The root stays at the browser's own size so 1rem is 16px and the scale
     above means what it says. Setting the app's 13px chrome *here* would make
     every rem token resolve against 13px and silently shrink the whole scale
     by 19% — the chrome size belongs on <body>, below. */
  font-size: 100%;
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-void);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Light theme ----------------------------------------------------------
   The same tokens, re-measured, and the same discipline: the accent family
   resolves grey here too, so light mode is monochrome for exactly the reason
   dark mode is.

   Surfaces are near-white rather than #fff: the mark's own extremes are the
   only pure values in this system, and neither of them is in the UI.

   Note what is no longer here. `--accent-ink` used to need an explicit
   light-on-purple override, because inheriting `--text-primary` put near-black
   ink on a purple fill at 2.87:1. The primary button is a panel now rather
   than a saturated fill, so its ink *should* follow the theme's text colour —
   the override is gone because the bug it patched cannot occur. The violet
   fill that does still need light ink keeps it, in --violet-ink. */

[data-theme="light"] {
  color-scheme: light;

  --bg-app: #f7f7f8;
  --bg-void: #f7f7f8;
  --bg-surface: #fdfdfd;
  --bg-raised: #f1f1f3;
  --surface-hover: #ebebee;
  --surface-active: #e4e4e8;

  --border-subtle: #e5e5e8;
  --border-strong: #d3d3d8;
  --line-control: #84848d;

  --text-primary: #16161a;
  --text-secondary: #5b5b64;
  --text-tertiary: #6a6a74;
  --text-tertiary-mark: #85858e;

  /* The neutral accent inverts: a mid-grey that reads as a mark on white. */
  --accent: #74747f;
  --accent-hover: #5f5f6a;
  --accent-press: #4a4a54;
  --accent-text: #16161a;

  /* Violet-as-type has to darken on a light ground to stay legible. The fill
     and its ink do not move: purple stays a dark fill in both themes. */
  --violet-text: #5b3ae6;

  /* State hues have to darken on a light ground to stay legible as type. */
  --state-run: #0e7a50;
  --state-warn: #7d5a0e;
  --state-error: #bb2c29;

  --swarm-purple: #7c3aed;
  --swarm-purple-hi: #6d28d9;
  --swarm-purple-solid: #7c3aed;
  --swarm-purple-subtle: #8b5cf6;
  --swarm-white: #ffffff;

  --sgraph-void: #eeeef0;
  --sgraph-edge: #84848d;
  --sgraph-edge-active: #3c3c45;

  --discord-mention-bg: color-mix(in srgb, #3b429f 12%, transparent);
  --discord-mention-bg-hover: color-mix(in srgb, #3b429f 22%, transparent);
  --discord-mention-text: #3b429f;
  --discord-mention-border: color-mix(in srgb, #3b429f 28%, transparent);

  --role-coordinator: #b45309;
  --role-coordinator-bg: color-mix(in srgb, #b45309 12%, transparent);
  --role-coordinator-border: color-mix(in srgb, #b45309 28%, transparent);

  --role-reviewer: #047857;
  --role-reviewer-bg: color-mix(in srgb, #047857 12%, transparent);
  --role-reviewer-border: color-mix(in srgb, #047857 28%, transparent);

  --role-builder: #c2410c;
  --role-builder-bg: color-mix(in srgb, #c2410c 12%, transparent);
  --role-builder-border: color-mix(in srgb, #c2410c 28%, transparent);

  --role-scout: #0369a1;
  --role-scout-bg: color-mix(in srgb, #0369a1 12%, transparent);
  --role-scout-border: color-mix(in srgb, #0369a1 28%, transparent);

  --role-operator: #4338ca;
  --role-operator-bg: color-mix(in srgb, #4338ca 12%, transparent);
  --role-operator-border: color-mix(in srgb, #4338ca 28%, transparent);

  --role-service: #475569;
  --role-service-bg: color-mix(in srgb, #475569 12%, transparent);
  --role-service-border: color-mix(in srgb, #475569 28%, transparent);

  --scrim: color-mix(in srgb, #16161a 32%, transparent);
  --shadow-2: 0 0 0 1px var(--line), 0 16px 40px -12px color-mix(in srgb, #16161a 22%, transparent);
}

/* --- Scoped violet --------------------------------------------------------
   The only places the hub purple is allowed, and they get it by re-pointing
   the accent family over their own subtree. Everything inside them that already
   asks for `var(--accent)` — a dot, a ring, a fill, a focus halo — turns violet
   without a single one of those rules being rewritten.

   `.orb` is the status orb and `.mic` the push-to-talk control. `.onboard` is
   first run, `.gate` the sign-in screen and `.paywall` the subscription page
   — the three surfaces where the violet check or the violet CTA is what the
   choice you just made looks like. `.home__tile` and `.wside__brand` hold the
   brand mark itself, whose hub *is* this purple, and `.tbar__mark` is the
   titlebar's own mark, which reads in colour rather than monochrome —
   everywhere else the glyph stays monochrome. `.prodsw` is the product
   switcher: its thumb is the one place in the shell where "which product you
   are on" is stated, and that statement rides the brand purple. */

.orb,
.mic,
.onboard,
.gate,
.paywall,
.home__tile,
.wside__brand,
.wside__nav-items,
.skills,
.updates,
.tbar__mark,
.prodsw {
  --accent: var(--violet);
  --accent-hover: var(--violet-hover);
  --accent-press: var(--violet-press);
  --accent-hi: var(--violet-hover);
  --accent-text: var(--violet-text);
  --accent-solid: var(--violet-solid);
  --accent-ink: var(--violet-ink);
  --accent-line: color-mix(in srgb, var(--violet) 32%, transparent);
  --focus-ring: var(--violet);
}

/* Updates — a quiet software panel, led by the actual ProofStack mark. */
.updates {
  width: min(880px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: clamp(var(--s-7), 6vh, var(--s-9)) clamp(var(--s-4), 4vw, var(--s-8)) var(--s-8);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  container-type: inline-size;
  background: var(--surface);
}

.updates__header { margin-bottom: var(--s-7); }
.updates__header h1 {
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 650;
  letter-spacing: var(--track-display-m);
  line-height: var(--lh-tight);
}
.updates__header p {
  margin-top: var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-body);
}

.updates__panel {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.updates__identity {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-7);
  border-bottom: 1px solid var(--border-subtle);
}
.updates__identity > .mark { flex: none; }
.updates__product { min-width: 0; }
.updates__product h2 {
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 650;
  letter-spacing: var(--track-display-m);
  line-height: var(--lh-tight);
}
.updates__product p {
  margin-top: var(--s-1);
  color: var(--text-secondary);
  font-size: var(--t-label);
  line-height: var(--lh-body);
}
.updates__version {
  flex: none;
  max-width: 40%;
  margin: 0 0 0 auto;
  text-align: right;
}
.updates__version dt {
  color: var(--text-secondary);
  font-size: var(--t-meta);
}
.updates__version dd {
  margin: var(--s-2) 0 0;
  font-family: var(--mono);
  font-size: var(--t-title);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}
.updates__status { padding: var(--s-7); }
.updates__status-copy h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-body-l);
  line-height: var(--lh-heading);
  font-weight: 600;
}
.updates__status-copy h3 svg { flex: none; color: var(--ok-text); }
.updates__status-copy p {
  max-width: 65ch;
  margin-top: var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.updates__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.updates__actions .btn {
  min-height: 44px;
  padding-inline: var(--s-4);
}
.updates .updates__primary {
  background: var(--accent-solid);
  color: var(--accent-ink);
  border-color: var(--accent-solid);
}
.updates .updates__primary:hover:not(:disabled),
.updates .updates__primary:active:not(:disabled) {
  background: var(--accent-press);
  border-color: var(--accent-press);
}
.updates .updates__primary:disabled {
  opacity: 1;
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.updates .btn:focus-visible,
.updates__help summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
.updates__checked,
.updates__restart-note {
  color: var(--text-secondary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}
.updates__checked { margin-left: auto; }
.updates__restart-note { margin-top: var(--s-3); }
.updates__verification {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-7);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}
.updates__verification svg { flex: none; }
.updates__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-4);
  color: var(--bad-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.updates__error svg { flex: none; margin-top: var(--s-1); }
.updates__progress { margin-top: var(--s-5); }
.updates__progress > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}
.updates__progress progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--border-strong);
  accent-color: var(--accent);
}
.updates__progress progress::-webkit-progress-bar { background: var(--border-strong); }
.updates__progress progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-full); }
.updates__progress progress::-moz-progress-bar { background: var(--accent); }
.updates__release { margin-top: var(--s-8); }
.updates__release-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}
.updates__release-heading h2 { font-size: var(--t-body-l); font-weight: 600; }
.updates__release-version {
  margin-left: auto;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-meta);
}
.updates__release-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-5);
}
.updates__release-empty > svg { flex: none; color: var(--text-tertiary); margin-top: var(--s-1); }
.updates__release-empty h3 { font-size: var(--t-body); font-weight: 500; line-height: var(--lh-body); }
.updates__release-empty p,
.updates__notes p {
  max-width: 70ch;
  margin-top: var(--s-1);
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: 1.7;
}
.updates__notes { padding-block: var(--s-5); }
.updates__notes time { display: block; margin-bottom: var(--s-3); color: var(--text-secondary); font-size: var(--t-meta); }
.updates__notes p { white-space: pre-wrap; }
.updates__help { margin-top: var(--s-4); border-top: 1px solid var(--border-subtle); }
.updates__help summary {
  width: fit-content;
  min-height: 44px;
  padding-block: var(--s-4);
  color: var(--text-secondary);
  font-size: var(--t-label);
  cursor: pointer;
}
.updates__help summary:hover { color: var(--text-primary); }
.updates__help ol {
  margin: 0;
  padding: 0 0 0 var(--s-5);
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.updates__help li + li { margin-top: var(--s-3); }
.updates__help strong { font-weight: 500; color: var(--text-primary); }

/* Respond to the available pane width, including an expanded desktop sidebar. */
@container (max-width: 540px) {
  .updates__identity { flex-wrap: wrap; padding: var(--s-5); }
  .updates__identity > .mark { width: 56px; height: 56px; }
  .updates__product h2 { font-size: var(--t-display-m); }
  .updates__version {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    width: 100%;
    max-width: none;
    margin-top: var(--s-2);
    text-align: left;
  }
  .updates__version dd { margin: 0; font-size: var(--t-body-l); }
  .updates__status { padding: var(--s-5); }
  .updates__verification { padding-inline: var(--s-5); }
  .updates__checked { flex-basis: 100%; margin-left: 0; }
}
@container (max-width: 360px) {
  .updates__actions .btn { width: 100%; }
  .updates__product { flex: 1; }
}

* {
  box-sizing: border-box;
}

/* The theme swap is a cut, not a dissolve. Held for exactly one frame by
   `applyTheme` — see workspace/theme.ts for why. */
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after {
  transition: none !important;
}

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

body {
  margin: 0;
  overflow: hidden;
  /* Chrome sits at `label`. Density is the point: at a 32px row height the
     14px `body` step does not fit, and running prose opts up to it locally. */
  font-size: var(--t-label);
}

/* Every number that sits in a column or updates live, so digits do not jitter
   and a live value cannot change the width of its own row. */
code,
kbd,
samp,
pre,
[class*="mono"],
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* The focus contract, once, for everything that does not override it. Two
   rings rather than an outline: the inner one is the canvas colour, so the
   halo separates from whatever surface the control sits on, and the outer one
   is the accent. Purple means agency, and focus is where your agency is. */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* Inside a panel the inner ring has to match the panel, not the app canvas,
   or the halo reads as a hole punched through the surface. */
.wside :focus-visible,
.pane :focus-visible,
.sgraph :focus-visible {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--focus-ring);
}

/* Motion is a courtesy. Taken away, nothing here becomes unusable: every state
   that motion helps read is also carried by a surface, a border or a word.
   Decorative movement stops; state still changes, instantly. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* Delays go too: a staggered entrance with zeroed durations would
       otherwise hold `backwards`-filled content invisible for the delay. */
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The nonessential transforms: nothing here means anything on its own. */
  .btn:active:not(:disabled),
  .mcv__primary:active:not(:disabled),
  .mcv__secondary:active:not(:disabled),
  .mode__button:active,
  .mode__button:hover .mode__action {
    transform: none;
  }

  /* A dot that pulses to say "running" still has its word beside it. */
  .wside__pulse,
  .home__runtime-dot,
  .mcv__dot,
  .swarm-live-dot {
    animation: none !important;
  }
}

/* A panel arriving: a short rise, not an entrance. */
@keyframes ps-rise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* The only animation in the app that runs on its own. It says "still working",
   which is information the UI has no other way to give continuously. */
@keyframes ps-pulse {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* 8px, transparent track, and a thumb that is a border colour rather than a
   surface. The thumb used to be --bg-raised, which is now a *panel* fill: on
   the new near-black it sat 1.29:1 from the page and was effectively invisible
   until hovered. A scrollbar you cannot see until you go looking for it is not
   a scrollbar. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
  background-clip: content-box;
}

/* Firefox has no pseudo-elements for this, only the two-value shorthand. */
* {
  scrollbar-color: var(--border-strong) transparent;
}

/* ==========================================================================
   The mark, and the one device taken from it.

   Everything in this block is the brand doing work. Nothing else in the app
   is allowed to move in colour.
   ========================================================================== */

.mark {
  flex: 0 0 auto;
  overflow: visible;
}

.mark__plate {
  fill: var(--bg-app);
}

.mark__edges line {
  stroke: currentColor;
}

.mark__node {
  fill: currentColor;
}

.mark__hub {
  fill: var(--accent);
}

/* Cold start: the four edges draw outward from the hub, the nodes scale in
   behind them, and then the shell arrives. Once, and never again — a mark that
   reassembles on every navigation is a logo animation, not a loading state. */
.mark[data-assembling] .mark__edges line {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: mark-draw var(--dur-mark) var(--ease) forwards;
  animation-delay: calc(var(--i) * 60ms);
}

.mark[data-assembling] .mark__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: mark-node-in 240ms var(--ease) backwards;
  animation-delay: calc(160ms + var(--i) * 60ms);
}

@keyframes mark-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mark-node-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

/* The only loading indicator in the app. The satellites brighten in sequence
   around the hub, which reads as "the coordinator is working through them"
   rather than as a generic spin. */
.mark[data-thinking] .mark__node {
  animation: mark-think var(--dur-pulse) var(--ease) infinite;
  animation-delay: calc(var(--i) * (var(--dur-pulse) / 4));
}

@keyframes mark-think {
  0%,
  60%,
  100% {
    opacity: 0.35;
  }
  20% {
    opacity: 1;
  }
}

/* Idle, launcher only: the hub hands a pulse to each satellite in turn — one
   packet in flight at a time, a quarter of the circuit apart, so the loop
   reads as coordination rather than as a spinner. GPU-only properties, and
   the packets unmount entirely when the window is blurred (see Home.tsx). */
.mark__packet {
  fill: var(--accent);
  opacity: 0;
}

.mark[data-idle] .mark__packet {
  animation: mark-route var(--dur-route) var(--ease) infinite;
  animation-delay: calc(var(--i) * (var(--dur-route) / 4));
}

@keyframes mark-route {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  3% {
    opacity: 0.9;
  }
  13% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--text-primary);
}

/* The display face earns its keep here and in page titles, nowhere smaller. */
.wordmark__name {
  overflow: hidden;
  font-family: var(--display);
  font-size: var(--t-body-l);
  font-weight: 500;
  letter-spacing: var(--track-title);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the orchestration rail ------------------------------------------------

   The signature element, and the one place boldness is spent. A thin vertical
   node-and-edge run down the left edge of the main content: the mark's own
   geometry, rotated into a timeline and made load-bearing. Each node is a run.

   Everything around it stays quiet — flat surfaces, hairline borders, no other
   animated colour — because this is what should catch the eye when six agents
   are working at once. */

.orail {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: var(--orail-w);
  padding: var(--s-4) 0;
  overflow: hidden;
}

.orail__nodes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The node is a button with no box: the hit area is padded out to 24px so it
   is reachable, while what you see stays a 6px dot. */
.orail__node {
  padding: 0;
  border: 0;
  background: none;
}

.orail__node::after {
  display: block;
  width: var(--orail-node);
  height: var(--orail-node);
  content: "";
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  transition:
    background var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    scale var(--dur-1) var(--ease);
}

.orail__node:hover:not(:disabled)::after {
  scale: 1.3;
}

/* The one selected node grows a ring in the canvas colour so it reads as
   "you are here" without adding a second colour. */
.orail__node[data-current="true"]::after {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3px currentColor;
}

/* The spine the nodes sit on. */
.orail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  translate: -50% 0;
}

/* Queued is the resting state and needs no explanation beyond being dim. */
.orail__node[data-state="queued"]::after {
  background: var(--text-tertiary-mark);
}

/* Running is the only thing on the rail that glows, because it is the only
   thing on screen that is still changing. One idea, one colour, one glow. */
.orail__node[data-state="running"]::after {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.orail__node[data-state="done"]::after {
  background: var(--ok);
}

.orail__node[data-state="failed"]::after {
  background: var(--bad);
}

/* `currentColor` on the selected ring above resolves from here, so the ring
   matches whatever the node is rather than being a fifth colour. */
.orail__node[data-state="queued"] {
  color: var(--text-tertiary-mark);
}
.orail__node[data-state="running"] {
  color: var(--accent);
}
.orail__node[data-state="done"] {
  color: var(--ok);
}
.orail__node[data-state="failed"] {
  color: var(--bad);
}

/* Hand-off: the segment between two nodes draws downward as work moves from
   one agent to the next. The same geometry as the logo's edges, now carrying
   information — this is the app telling you where the work went. */
.orail__edge {
  width: 1px;
  height: var(--s-4);
  transform-origin: top;
  background: var(--accent);
  scale: 1 0;
}

.orail__edge[data-drawn="true"] {
  animation: orail-draw var(--dur-rail) var(--ease) forwards;
}

@keyframes orail-draw {
  to {
    scale: 1 1;
  }
}

/* Nothing here is the only carrier of its meaning: a running node has a label
   beside it, a failed one has a word. Taken away, the rail is a static map. */
@media (prefers-reduced-motion: reduce) {
  .mark[data-assembling] .mark__edges line,
  .mark[data-assembling] .mark__node,
  .mark[data-thinking] .mark__node {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  /* The idle circuit is pure decoration; without motion it is nothing. */
  .mark[data-idle] .mark__packet {
    animation: none;
    opacity: 0;
  }

  .orail__edge[data-drawn="true"] {
    animation: none;
    scale: 1 1;
  }
}

/* --- app shell ------------------------------------------------------------
   Four bands: the titlebar the app draws itself, the three-column body, and
   the status bar. The window has no OS chrome of its own — see `titleBarStyle:
   "Overlay"` in tauri.conf.json — so this grid is the whole window. */

.app {
  display: grid;
  grid-template-rows: var(--tbar-h) minmax(0, 1fr) var(--sbar-h);
  height: 100%;
  background: var(--bg-void);
}

/* Agent chat owns the full lower edge; its composer is the only footer. */
.app[data-product="agent"] {
  grid-template-rows: var(--tbar-h) minmax(0, 1fr);
  overflow: hidden;
}

.app[data-product="agent"] .app__body,
.app[data-product="agent"] .app__main {
  overflow: hidden;
}

.app__body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  /* The sidebar belongs to the shell, not to a route: every product mode
     renders inside it. ProofSwarm hid it here once, which is why the width is
     animated in one place and hidden in none. */
  transition: grid-template-columns var(--motion-normal) var(--ease-standard);
}

.app__body:has(.frail) {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--frail-w);
}

.app[data-rail="true"] {
  --sidebar-w: var(--rail-w);
  --sidebar-panel-w: var(--rail-w);
}

.app[data-sidebar-hidden="true"] {
  --sidebar-w: 0px;
}

@media (prefers-reduced-motion: reduce) {
  .app__body {
    transition-duration: 0.01ms;
  }
}

.app__main {
  position: relative;
  min-width: 0;
  min-height: 0;
  /* The top edge takes the smallest step in the ramp: the titlebar already
     reads as one band with what it heads, so the panels hang off the chrome
     rather than floating below it. .wside's top margin matches this value. */
  margin: var(--s-1) 15px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
}

/* A full-height route owns its own scroll region and must clip.
   `.app__main` scrolls, because the short routes — the launcher, Settings —
   are ordinary pages that grow. But a route that is `height: 100%` with an
   inner scroller and a pinned footer has *already* placed its footer at the
   bottom of the viewport; anything of its content that overflows spills past
   `height: 100%` into the shell, and the shell dutifully scrolls it. The
   result is a window that scrolls down past its own Continue button into
   dead space.

   `min-height: 0` does not help here — it lets a flex or grid item shrink,
   and these are already the right height. The overflow has to be clipped at
   the route, so the only thing that scrolls is the region built to scroll. */
.wiz,
.wmain,
.swarm-setup,
.swarm-workspace,
.squad-shell,
.squad {
  overflow: hidden;
}

/* A route arriving: a short rise, played once by whichever page just mounted.
   The workspace root is deliberately not in this list — it owns a fixed-position
   drawer, and an ancestor transform would reposition it. Neither is the
   launcher: its children carry their own staggered entrance instead. */
.wiz,
.page,
.swarm-workspace,
.swarm-setup,
.auto {
  animation: ps-route var(--motion-normal) var(--ease-standard);
}

@keyframes ps-route {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

/* Tab switching cross-fade transition inside the main application shell */
.app__view-transition {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  animation: appViewFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

@keyframes appViewFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app__view-transition {
    animation: none;
  }
}

/* The command centre is a tool surface: separate floating terminal panels, no outer frame. */
.app__main[data-workspace="true"] {
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

/* --- page --- */

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(var(--s-7), 6vh, var(--s-7)) clamp(var(--s-6), 4vw, var(--s-7)) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.page__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

/* The display face, at the one size per screen that earns it. Nothing under
   24px is ever set in Cabinet Grotesk — it is a face with opinions and they
   only read at size. */
.page__title {
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 500;
  letter-spacing: var(--track-title);
  line-height: var(--lh-tight);
}

.page__lede {
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.page__actions {
  margin-top: var(--s-2);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* A section head is an eyebrow: it labels a region, so it is `micro` and
   tracked out rather than a small sentence in sentence case. */
.section__title {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* --- button --- */

/* One control height, one radius, one weight. A variant changes what a button
   means, never how big it is — so a row of mixed variants still lines up.
   `.mcv__*` are the Manager's older names for the same two variants; they are
   aliased rather than rewritten so no dispatch call site is touched. */
.btn,
.mcv__primary,
.mcv__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.btn svg,
.mcv__primary svg,
.mcv__secondary svg {
  flex: none;
}

/* One primary per view. It is no longer a filled purple box — it is a raised
   panel with a real edge, which is how the reference marks its primary action
   and why that interface stays readable at this density.

   The border is not decoration. A panel fill sits 1.29:1 from the page behind
   it; without the edge the button's own bounds are not perceivable, and a
   button you cannot find the shape of is not a primary action. `--accent-line`
   resolves to --border-strong out here and to a violet hairline inside the two
   scoped surfaces, so this one rule is right in both places. */
.btn--primary,
.mcv__primary {
  color: var(--accent-ink);
  background: var(--accent-solid);
  border-color: var(--accent-line);
}

.btn--primary:hover:not(:disabled),
.mcv__primary:hover:not(:disabled) {
  background: var(--surface-active);
  border-color: var(--line-control);
}

.btn--primary:active:not(:disabled),
.mcv__primary:active:not(:disabled) {
  background: var(--surface-hover);
}

/* Inside onboarding the accent family is violet, so the primary there is still
   a violet fill — and a violet fill takes violet hover/press steps rather than
   the grey surface ramp above. */
.onboard .btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.onboard .btn--primary:active:not(:disabled) {
  background: var(--accent-press);
}

.btn--secondary {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-control);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-active);
}

.btn--ghost,
.mcv__secondary {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}

.btn--ghost:hover:not(:disabled),
.mcv__secondary:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Destructive is text, not a filled red box. A tinted panel makes deleting
   look like a state the app is already in; the word plus the colour is the
   warning, and the confirm step is what actually protects you. */
.btn--danger {
  color: var(--bad);
  background: transparent;
  border-color: transparent;
}

.btn--danger:hover:not(:disabled) {
  background: var(--error-soft);
}

/* Never removed, never a browser default. Two rings: one in the canvas colour
   so the halo reads on any surface, one in the accent. Focus is agency, so it
   is purple for the same reason the running node is. */
.btn:focus-visible,
.mcv__primary:focus-visible,
.mcv__secondary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* Selected: a toggle that is currently on. Quiet fill plus a real border, so
   it does not compete with the one primary action. */
.btn[aria-pressed="true"],
.btn[data-selected="true"] {
  color: var(--text);
  background: var(--accent-quiet);
  border-color: var(--accent-line);
}

.btn--compact {
  min-height: 28px;
  padding: 0 var(--s-3);
  font-size: var(--t-meta);
}

/* Icon-only: the name lives in `aria-label` and in the tooltip. */
.btn--icon {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.btn:active:not(:disabled),
.mcv__primary:active:not(:disabled),
.mcv__secondary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.mcv__primary:disabled,
.mcv__secondary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Waiting on something real. The label stays put so the button does not
   change width mid-click. */
.btn[data-loading="true"] {
  cursor: progress;
}

/* There are no spinners in this app. A satellite pulsing on the mark's own
   1.4s rhythm says "working" in the same language as everything else, and a
   dot cannot imply progress it does not know about the way an arc does. */
.btn[data-loading="true"]::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: var(--radius-full);
  background: currentColor;
  animation: mark-think var(--dur-pulse) var(--ease) infinite;
}

.btn__icon {
  display: grid;
  place-items: center;
  margin-left: -2px;
}

/* --- role glyphs ---
   The shape is the identity. It inherits colour from whatever it sits in, so
   a role never carries a hue of its own and can never be mistaken for a
   state. See components/proofswarm/RoleGlyph.tsx for why shape and not hue. */

.roleglyph {
  flex: 0 0 auto;
  fill: currentColor;
  stroke: currentColor;
  color: var(--text-secondary);
}

/* The coordinator is the hub, and the hub is the one solid, accented thing —
   exactly as it is in the mark. This is the only role that gets the accent,
   and it gets it because "the one that coordinates" is the same idea the
   purple carries everywhere else. */
.roleglyph[data-role="coordinator"] {
  color: var(--accent);
}

/* You are not a role, but you are the other party in the conversation. */
.roleglyph[data-role="operator"] {
  color: var(--text-primary);
}

.rolelegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  list-style: none;
}

.rolelegend__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* --- theme picker ---
   Two swatches, each showing the thing it will do rather than naming it. */

.themepick {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.themepick__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 500;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.themepick__option:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.themepick__option[data-selected="true"] {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-quiet);
}

.themepick__swatch {
  position: relative;
  display: block;
  width: 34px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
}

/* The only hardcoded colours left in this stylesheet, and they have to be.
   A swatch previewing the theme you are *not* in cannot use a theme-reactive
   token: --bg-app is whichever theme is live, so both swatches would show the
   same thing. These are literals of the two --bg-app / --bg-surface values. */
.themepick__swatch[data-theme-preview="dark"] {
  background: var(--preview-dark-bg);
}

.themepick__swatch[data-theme-preview="light"] {
  background: var(--preview-light-bg);
}

/* The sidebar, in miniature. */
.themepick__swatch-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 11px;
}

.themepick__swatch[data-theme-preview="dark"] .themepick__swatch-bar {
  background: var(--preview-dark-surface);
}

.themepick__swatch[data-theme-preview="light"] .themepick__swatch-bar {
  background: var(--preview-light-surface);
  border-right: 1px solid var(--preview-light-line);
}

/* The accent is the same purple in both themes, and the swatch says so. */
.themepick__swatch-dot {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  translate: 0 -50%;
}

/* --- empty state --- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-7);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-2);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.empty__title {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.empty__description {
  max-width: 42ch;
  font-size: var(--t-13);
  color: var(--text-muted);
}

/* --- alert --- */

/* A failure is a colour and a sentence, not a red box. The rule on the left
   carries the state; the surface stays the surface it was. A filled banner
   makes every error look like the same emergency, which is how people learn
   to stop reading them. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--bad);
  color: var(--text);
  font-size: var(--t-label);
}

.alert__icon {
  color: var(--bad);
}

.alert__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* --- app updates --------------------------------------------------------- */

.update-notice {
  position: relative;
  width: 100%;
  padding: var(--s-3);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg-raised);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
  animation: update-notice-in var(--motion-normal) var(--ease-standard);
}

@keyframes update-notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.update-notice__dismiss {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-15);
  line-height: 1;
  cursor: pointer;
}

.update-notice__dismiss:hover,
.update-notice__dismiss:focus-visible {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.update-notice__eyebrow {
  margin: 0 24px 2px 0;
  color: var(--accent-hi);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0;
}

.update-notice__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding-right: var(--s-4);
}

.update-notice__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--accent-hi);
  background: var(--accent-quiet);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.update-notice__heading {
  min-width: 0;
}

.update-notice__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.update-notice__title span {
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
}

.update-notice__copy,
.update-notice__error,
.update-notice__progress {
  margin: 0;
  font-size: var(--t-12);
  line-height: 1.45;
}

.update-notice__copy {
  margin-top: var(--s-2);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.update-notice__error {
  margin-top: var(--s-2);
  color: var(--bad);
}

.update-notice__progress {
  margin-top: var(--s-2);
  color: var(--text-secondary);
}

.update-notice__actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.update-notice__download {
  flex: 1 1 auto;
  min-height: 36px;
  color: var(--accent-ink);
  background: var(--accent-solid);
  border-color: var(--accent-line);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
}

.update-notice__download:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.update-notice__download:active:not(:disabled) {
  background: var(--accent-press);
}

.update-notice__actions .btn--ghost {
  min-height: 36px;
  padding-inline: var(--s-3);
}

.wside[data-collapsed="true"] .update-notice {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .update-notice {
    animation: none;
  }
}

/* --- badges --- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* A badge is a surface, not an outline. It only takes a colour when the thing
   it labels is in a state worth interrupting you for. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-11);
  line-height: 1.5;
  white-space: nowrap;
}

.badge--accent {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.badge--warning {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.badge__icon {
  display: grid;
  place-items: center;
}

/* --- project list --- */

.project-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.project-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.project-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.project-card__open {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-7) var(--s-4) var(--s-4);
  border: 0;
  border-radius: inherit;
  background: transparent;
  text-align: left;
}

.project-card__open:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.project-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.project-card__name {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.project-card__path {
  font-size: var(--t-12);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card__time {
  font-size: var(--t-11);
  color: var(--text-dim);
  white-space: nowrap;
}

.project-card__remove {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  opacity: 0.6;
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.project-card:hover .project-card__remove,
.project-card__remove:focus-visible {
  opacity: 1;
}

.project-card__remove:hover:not(:disabled) {
  color: var(--bad-text);
  background: var(--error-soft);
  border-color: var(--error-line);
}

/* --- project detail --- */

.page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: space-between;
}

.page__path {
  font-size: var(--t-12);
  color: var(--text-dim);
  word-break: break-all;
}

.facts {
  margin: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  overflow: hidden;
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  font-size: var(--t-13);
}

.facts__row dt {
  color: var(--text-dim);
}

.facts__row dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

/* --- task --- */

.task {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.task__label {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.task__input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-app);
  color: var(--text);
  font: inherit;
  font-size: var(--t-13);
  resize: none;
}

.task__input:disabled {
  cursor: not-allowed;
  color: var(--text-dim);
}

.task__input::placeholder {
  color: var(--text-dim);
}

/* The border change is a second cue, not a replacement: the global
   :focus-visible ring is the only thing here with real contrast. */
.task__input:not(:disabled):focus {
  border-color: var(--border-strong);
}

.task__input[aria-invalid="true"] {
  border-color: var(--error-line);
}

.task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-12);
}

.task__counter {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.task__counter--error {
  color: var(--bad-text);
}

.task__error {
  color: var(--bad-text);
}

.task__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.task__note {
  flex: 1 1 260px;
  font-size: var(--t-12);
  color: var(--text-dim);
}

/* --- shared text --- */

.muted {
  font-size: var(--t-13);
  color: var(--text-dim);
}

.prose {
  font-size: var(--t-13);
  color: var(--text-muted);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.facts--flush {
  border-radius: var(--radius-sm);
}

.bullets {
  margin: 0;
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-13);
  color: var(--text-muted);
}

.bullets--muted {
  color: var(--text-dim);
  font-size: var(--t-12);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.areas__reason {
  font-size: var(--t-12);
  color: var(--text-dim);
}

.chips code,
.areas code,
.relevant__path {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-12);
  word-break: break-all;
}

.quote {
  margin: 0;
  padding: var(--s-4) var(--s-4);
  border-left: 2px solid var(--accent-hi);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-raised);
  font-size: var(--t-13);
  color: var(--text);
  white-space: pre-wrap;
}

/* --- cards --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.card__title {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.card__label {
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

/* --- notices --- */

.notices {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-7);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-13);
  color: var(--text-secondary);
}

.notice-strong {
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-13);
  color: var(--text-secondary);
}

/* --- relevant files --- */

.relevant {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.relevant__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.relevant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.relevant__reasons {
  font-size: var(--t-12);
  color: var(--text-dim);
}

.relevant__warning {
  font-size: var(--t-12);
  color: var(--warn-text);
}

/* --- source preview --- */

.preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
}

.preview__summary {
  padding: var(--s-2) var(--s-3);
  color: var(--text-muted);
  font-size: var(--t-12);
  cursor: pointer;
  list-style: none;
}

.preview__summary::-webkit-details-marker {
  display: none;
}

.preview__summary::before {
  content: "›";
  display: inline-block;
  width: 12px;
  margin-right: var(--s-1);
}

.preview[open] .preview__summary::before {
  content: "⌄";
}

.preview__summary:hover {
  color: var(--text);
}

.preview__code {
  max-height: 320px;
  margin: 0;
  padding: var(--s-3) var(--s-3);
  overflow: auto;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-11);
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

/* --- git changed files --- */

.changed {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.changed__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
}

.changed__status {
  flex: 0 0 auto;
  width: 76px;
  font-size: var(--t-11);
  color: var(--text-dim);
}

.changed__status--staged {
  color: var(--ok-text);
}

.changed__status--modified {
  color: var(--warn-text);
}

.changed__status--deleted,
.changed__status--conflicted {
  color: var(--bad-text);
}

.changed__path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- file tree --- */

.tree {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-app);
  overflow: hidden;
}

.tree__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-13);
  text-align: left;
}

.tree__toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.tree__chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}

.tree__chevron[data-open="true"] {
  transform: rotate(90deg);
}

.tree__count {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--text-dim);
}

.tree__list {
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.tree__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-top: 2px;
  padding-bottom: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-11);
  color: var(--text-muted);
}

.tree__icon {
  display: inline-grid;
  place-items: center;
  width: 13px;
  color: var(--text-dim);
}

.tree__name--dir {
  color: var(--text);
}

.tree__truncated {
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--t-11);
  color: var(--warn-text);
}

/* --- steps --- */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.steps__number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-12);
  font-weight: 500;
}

.steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.steps__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.steps__area {
  padding: 2px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

.steps__detail {
  font-size: var(--t-13);
  color: var(--text-muted);
}

/* --- checklist --- */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.checklist__box {
  width: 15px;
  height: 15px;
  margin-top: var(--s-1);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
}

.checklist__statement {
  font-size: var(--t-13);
  color: var(--text);
}

.checklist__id {
  margin-right: var(--s-2);
  color: var(--text-dim);
  font-size: var(--t-11);
  font-weight: 500;
}

.checklist__verify {
  margin-top: var(--s-1);
  font-size: var(--t-12);
  color: var(--text-dim);
}

/* --- responsive --- */

@media (max-width: 880px) {
  .project-card__time {
    display: none;
  }

  .facts__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}



/* --- agent activity timeline --- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border);
  list-style: none;
}

.timeline__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  font-size: var(--t-12);
  color: var(--text-muted);
}

.timeline__sequence {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-11);
}

.timeline__time {
  color: var(--text-dim);
  font-size: var(--t-11);
  font-variant-numeric: tabular-nums;
}

/* --- catalog table --- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-12);
}

.table th {
  padding: var(--s-3) var(--s-3);
  text-align: left;
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table__id {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-11);
  color: var(--text-dim);
}

/* ==========================================================================
   Command centre
   A dense desktop workspace: small type, hairline borders, monospace for
   anything a machine produced. Colour never carries meaning on its own.
   ========================================================================== */

/* --- workspace sidebar --- */

/* A rounded panel floating on the app ground, not a flush column: inset from
   the window's top/left edges and closed by its own hairline on all four
   sides. The right edge keeps no divider — the gap to the content says it. */
.wside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: calc(var(--sidebar-panel-w) - 15px);
  min-width: 0;
  /* Top edge matches .app__main's — see the comment there. */
  margin: var(--s-1) 0 15px 15px;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* The sidebar itself never scrolls: the tree does. Scrolling the whole
     column took the footer's runtime status off screen as soon as the tree
     grew, which is where it is least replaceable. */
  overflow: hidden;
  transition:
    transform var(--motion-normal) var(--ease-standard),
    opacity var(--motion-normal) var(--ease-standard);
}

.app[data-sidebar-hidden="true"] .wside {
  transform: translateX(calc(-100% - 15px));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wside {
    transition-duration: 0.01ms;
  }
}

.wside__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-1) 2px var(--s-2);
}

/* The mark carries itself. It used to sit in a bordered, filled chip, which
   made it read as a button you could press. */

.wside__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The one scrolling region in the sidebar, so the footer below it stays put
     however many workspaces are expanded. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Sentence case at 12px. All-caps with wide tracking is the loudest tell that
   a screen was decorated rather than designed. */
/* An eyebrow labelling the one region in the sidebar that has contents. */
.wside__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2) var(--s-1);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Every row in the sidebar is the same 32px object. Density comes from the
   rows being short, not from the gaps between them being guessed. */
.wside__item,
.wside__context {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-13);
  text-align: left;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside__item:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.wside__item:active {
  background: var(--surface-active);
}

.wside__item--nav {
  font-weight: 500;
}

/* Selection is the raised surface plus the accent rail — the same two signals
   used for the active pane and the current wizard step, so the whole app reads
   as one system. No filled pill, no border, no glow. */
.wside__item--nav[data-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.wside__item--nav[data-selected="true"]::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--rail-accent);
  height: 16px;
  content: "";
  background: var(--accent);
  transform: translateY(-50%);
}

.wside__item--quiet {
  color: var(--text-tertiary);
}

/* What is open, not somewhere to go: a row without a pointer. */
.wside__context {
  color: var(--text-primary);
  background: var(--bg-raised);
  font-weight: 500;
}

.wside__context svg {
  flex: none;
  color: var(--text-secondary);
}

.wside__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wside__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}

/* Identity and settings share one quiet footer row. */
.wside__account-controls {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  min-width: 0;
}

.wside__user {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-width: 0;
  padding: var(--s-2);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}

.wside__user-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--accent);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--accent-ink);
}

.wside__user:hover {
  background: var(--bg-raised);
}

.wside__user-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wside__user-separator {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--t-13);
  line-height: 1;
}

.wside__user-tier {
  flex: none;
  font-size: var(--t-meta);
  color: var(--violet-text);
  font-weight: 500;
}

.wside__settings-trigger {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside__settings-trigger:hover,
.wside__settings-trigger[data-selected="true"] {
  background: var(--bg-raised);
  color: var(--text-primary);
}

.wside__settings-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.wside__credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2);
  font-size: var(--t-meta);
  color: var(--text-dim);
}

.wside__credits-value {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Narrow windows keep an icon rail so the sidebar still has room to work.
   The toolbar carries the project's name, path and Git state, and every rail
   control keeps its tooltip.

   The narrow-window rules below repeat these declarations for `.wside` with no
   attribute; keep the two lists in step. */
.wside[data-collapsed="true"] {
  align-items: center;
  /* The rail is a narrow rounded card; its own padding shrinks so the icons
     keep the room the inset margins took from the column. */
  padding-inline: var(--s-2);
}

.wside[data-collapsed="true"] .wside__account-controls {
  justify-content: center;
}

/* Everything the rail has no room for. `App` sets `data-collapsed` for both the
   stored preference and a window too narrow to honour it, so this is the only
   list a new sidebar row has to be added to. */
.wside[data-collapsed="true"] :is(
    .wside__name,
    /* Heading, count and plus together: with all three hidden the row is a
       stray rule across the rail. */
    .wside__label-row,
    .wside__label,
    .wside__item-label,
    .wside__empty,
    .wside__workspace-name,
    .wside__workspace-body,
    .wside__workspace-sub,
    .wside__count,
    .wside__workspace-remove,
    /* Without its section heading this is a second, unexplained plus sign.
       ProofSpace still leads to the same wizard. */
    .wside__add
  ) {
  display: none;
}

.wside[data-collapsed="true"] :is(
    .wside__item,
    .wside__context
  ) {
  justify-content: center;
  padding-inline: 0;
}

/* The rail keeps the accent marker, moved under the icon where there is room
   for it. Selection must survive the loss of the label. */
.wside[data-collapsed="true"] .wside__item--nav[data-selected="true"]::before {
  left: 50%;
  top: auto;
  bottom: 2px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
}

/* Rows shrink to the rail rather than overflowing it. */
.wside[data-collapsed="true"] :is(
    .wside__nav,
    .wside__foot,
    .wside__label-row,
    .wside__workspaces,
    .wside__workspace,
    .wside__project-row,
    .wside__item,
    .wside__workspace-btn
  ) {
  width: 100%;
  min-width: 0;
}

/* The rail shows the workspace's initial and, when something is running in it,
   the same dot the full sidebar uses. Clipping the name mid-word instead read
   as a layout fault. */
.wside[data-collapsed="true"] .wside__workspace-btn {
  position: relative;
  align-items: center;
  padding: var(--s-2) var(--s-1);
}

.wside[data-collapsed="true"] .wside__workspace-btn::before {
  content: attr(data-initial);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--text);
}

.wside[data-collapsed="true"] .wside__workspace-btn[data-live="true"]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}



/* --- project toolbar --- */

.wmain {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* --- pane grid --- */

.wmain__grid {
  flex: 1 1 auto;
  min-height: 0;
  /* Top edge takes the smallest step, like .app__main: a workspace's own main
     panel is flush to the chrome, so this padding is what holds the panes off
     the titlebar and it follows the same rule. */
  padding: var(--s-1) 15px 15px;
}

/* The workspace terminals: small padding for gaps between rounded cards. */
.wmain__grid--flush {
  padding: var(--s-1) 15px 15px;
}

.wgrid {
  display: grid;
  height: 100%;
  min-height: 0;
}

.wgrid__cell {
  min-width: 0;
  min-height: 0;
}

.wgrid--stacked {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.wgrid--stacked .wgrid__cell {
  flex: 0 0 auto;
  min-height: 300px;
}

.pane-resize {
  position: relative;
  background: transparent;
  border-radius: var(--radius);
}

.pane-resize--vertical {
  cursor: col-resize;
}

.pane-resize--horizontal {
  cursor: row-resize;
}

.pane-resize::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: transparent;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}

.pane-resize--vertical::after {
  width: 1px;
}

.pane-resize--horizontal::after {
  height: 1px;
}

.pane-resize:hover::after,
.pane-resize:focus-visible::after {
  background: var(--accent-hi);
}

.pane-resize:focus-visible {
  outline: 1px solid var(--accent-hi);
  outline-offset: -1px;
}

body.is-resizing {
  user-select: none;
  cursor: grabbing;
}

/* --- pane --- */

.pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.pane[data-collapsed="true"] {
  height: auto;
  align-self: start;
}

.pane[data-focused="true"] {
  border-color: var(--border-strong);
}

.pane__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  height: 30px;
  padding: 0 var(--s-2) 0 2px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  overflow: hidden;
}

.pane[data-collapsed="true"] .pane__head {
  border-bottom: 0;
}

.pane__collapse {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
}

.pane__collapse:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.pane__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

/* The title never truncates: the metadata tags give up their space first. */
.pane__title {
  flex: 1 0 auto;
  font-size: var(--t-11);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.pane__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex: 0 0 auto;
  padding: 1px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--t-11);
  white-space: nowrap;
  color: var(--text-muted);
}

.pane__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.pane__status--idle {
  color: var(--text-dim);
}

.pane__status--active {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: var(--bg-raised);
}

.pane__status--good {
  color: var(--ok);
  border-color: var(--run-line);
}

.pane__status--warn {
  color: var(--warn);
  border-color: var(--warn-line);
}

.pane__status--bad {
  color: var(--bad);
  border-color: var(--error-line);
}

.pane__meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  /* Metadata gives up space before the title does: the same values are
     always repeated in the pane body. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.pane__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 0 0 auto;
}

.pane__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
}

/* `display: flex` above outranks the user-agent rule for [hidden], so a
   collapsed pane needs this or its body stays on screen. */
.pane__body[hidden] {
  display: none;
}

/* Sections keep their natural height and the body scrolls. Without this,
   flexbox shrinks them and `overflow: hidden` silently clips the content. */
.pane__body > *,
.drawer__body > * {
  flex: 0 0 auto;
}

/* Panes respond to their own width, not the window's: a pane can be narrow in
   a wide window and wide in a narrow one. */
.pane__body {
  container-type: inline-size;
}

@container (max-width: 330px) {
  .pane-fact {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .proof-list__item {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .proof-list__detail {
    grid-column: 2;
  }

  .event-log__row {
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .event-log__type {
    display: none;
  }
}

.pane-tag {
  padding: 1px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-app);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-11);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pane-btn {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-11);
  white-space: nowrap;
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.pane-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.pane-btn[data-danger="true"]:hover:not(:disabled),
.pane-btn[data-danger="true"]:focus-visible {
  color: var(--bad);
  background: var(--error-soft);
  border-color: var(--bad);
}

/* Icon-only, for an action whose name is in its tooltip and aria-label. */
.pane-btn--icon {
  display: inline-grid;
  place-items: center;
  padding: var(--s-1);
  border-color: transparent;
}

.pane-btn--accent {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: var(--bg-raised);
}

.pane-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.pane-note {
  font-size: var(--t-12);
  line-height: 1.5;
  color: var(--text-muted);
}

.pane-hint {
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--text-dim);
}

.pane-error {
  font-size: var(--t-11);
  color: var(--bad);
}

.pane-alert {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--error-line);
  border-radius: var(--radius-xs);
  background: var(--error-soft);
  color: var(--bad-text);
  font-size: var(--t-11);
  line-height: 1.45;
}

.pane-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pane-section__title {
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

/* Nothing here yet is a state, not a fault: a real surface rather than a
   dashed outline waiting to be filled. */
.pane-empty {
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pane-empty__title {
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text);
}

.pane-empty__text {
  margin-top: var(--s-1);
  max-width: 62ch;
  font-size: var(--t-11);
  line-height: 1.55;
  color: var(--text-muted);
}

.pane-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding-left: var(--s-4);
  font-size: var(--t-11);
  color: var(--text-dim);
}

.pane-list--mono {
  font-family: var(--mono);
  font-size: var(--t-11);
}

/* --- pane facts --- */

.pane-facts {
  display: grid;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
  overflow: hidden;
}

.pane-fact {
  display: grid;
  grid-template-columns: minmax(84px, 34%) 1fr;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
}

.pane-fact__label {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.pane-fact__value {
  margin: 0;
  font-size: var(--t-11);
  color: var(--text);
  word-break: break-word;
}

.pane-fact__value--mono {
  font-family: var(--mono);
  font-size: var(--t-11);
}

/* --- event log --- */

.event-log {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-11);
}

.event-log__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 108px) minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: baseline;
  padding: 2px var(--s-1);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.event-log__row:hover {
  background: var(--bg-raised);
}

.event-log__seq {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.event-log__type {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-log__message {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-log__time {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* --- task pane --- */

.task-input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  color: var(--text);
  font: inherit;
  font-size: var(--t-12);
  line-height: 1.5;
  resize: vertical;
}

.task-input:focus {
  border-color: var(--border-strong);
}

.task-input[aria-invalid="true"] {
  border-color: var(--error-line);
}

.task-quote {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--accent-hi);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-raised);
  font-size: var(--t-12);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* --- proof pane --- */

.proof-statement {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-11);
  line-height: 1.45;
}

.proof-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
}

.proof-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.proof-section__title {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.proof-section__status {
  flex: 0 0 auto;
  font-size: var(--t-11);
  color: var(--text-dim);
}

.proof-section__status--recorded {
  color: var(--ok);
}

.proof-section__summary {
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--text-dim);
}

.proof-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-1) 0 0;
  padding: 0;
  list-style: none;
}

.proof-list__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 118px) minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-11);
}

.proof-list__mark {
  width: 7px;
  height: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.proof-list__mark--recorded {
  border-color: var(--run-line);
  background: var(--run-line);
}

.proof-list__label {
  color: var(--text-muted);
}

.proof-list__detail {
  min-width: 0;
  color: var(--text-dim);
  line-height: 1.45;
}

/* --- workspace footer ---
   Removed. The status strip under the terminal grid restated what the Proof
   pane already shows, and the run count and the standing statement were a
   permanent 30px of chrome under every terminal to say so. */

/* --- project intelligence drawer --- */

.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(460px, 92vw);
  height: 100%;
  border-left: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border);
}

.drawer__title {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
}

.drawer__close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-3);
}

.drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* --- workspace responsiveness ---
 *
 * A narrow window also falls back to the icon rail, but that is decided in
 * `App` and expressed through `data-collapsed` rather than repeated here: one
 * copy of the rail rules means a new sidebar row cannot be styled for the
 * toggle and forgotten for the narrow window.
 */

/* --- coding agent runtimes --- */

/* A path is too long for the value column, so its row spans the card. */
.facts__row--wide {
  grid-template-columns: 1fr;
  gap: var(--s-1);
}

.runtime__path {
  display: inline-block;
  max-width: 100%;
  padding: 2px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  font-family: var(--mono);
  font-size: var(--t-11);
  overflow-wrap: anywhere;
}

.runtime__signin {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

/* The command the user runs themselves. ProofStack never runs it. */
.runtime__command {
  display: block;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-12);
  user-select: all;
}

/* --- embedded runtime terminal --- */

.terminal-host {
  /* Owns whatever the toolbar leaves. No floor, no ceiling, no border: the
     terminal is the pane's content, not a card inside it. */
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  background: var(--terminal-bg);
  overflow: hidden;
}

/* The terminal and activity surfaces share one box. Both faces stay mounted,
so xterm keeps its PTY subscription and scrollback while activity is open.
Visibility is swapped directly because WebKit can leave a 3D back face hidden
after its React state changed. */
.terminal-flip {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
  background: var(--terminal-bg);
  border-radius: var(--radius-lg);
}

/* `.pane__body > *` gives ordinary sections an intrinsic height. The flip
   surface is the pane's one full-height body item, so restore the flex growth
   here; otherwise both absolute faces collapse to the toolbar's height. */
.pane__body > .terminal-flip {
  flex: 1 1 auto;
}

.squad-pane__body > .terminal-flip,
.swarm-terminal-card__body > .terminal-flip {
  height: 100%;
}

.terminal-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.terminal-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--terminal-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms var(--ease), visibility 0s linear;
}

.terminal-flip__front {
  z-index: 2;
}

.terminal-flip__back {
  z-index: 1;
}

.terminal-flip:not([data-flipped="true"]) .terminal-flip__back,
.terminal-flip[data-flipped="true"] .terminal-flip__front {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.terminal-flip[data-flipped="true"] .terminal-flip__back {
  z-index: 3;
}

.terminal {
  width: 100%;
  height: 100%;
  padding: var(--s-2) var(--s-2);
  background: var(--terminal-bg);
}

/* Holds one session's xterm for as long as that session lasts, so leaving the
   workspace and coming back re-parents the same emulator instead of a new one. */
.terminal__host {
  width: 100%;
  height: 100%;
}

/* xterm's stylesheet paints the viewport opaque black whatever the theme says,
   which showed as a hard rectangle inside the pane — and fitting to whole
   character cells always leaves a strip over. Letting the host colour through
   keeps the pane one flat surface. */
.terminal .xterm .xterm-viewport {
  background-color: var(--terminal-bg);
}

/* The terminal owns focus while a session is running. */
.terminal:focus-within {
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
}

/* Full-bleed body. The toolbar keeps its height and the terminal takes the
   rest — and the body itself never scrolls, so xterm owns scrolling. */
.pane__body--flush {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.pane__body--flush > .terminal-host {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.pane__body--flush > .term-bar,
.pane__body--flush > .term-outcome {
  flex: 0 0 auto;
}

/* --- running session toolbar --- */

/* One header bar per pane: which terminal this is, and what can be done to
   it. */
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-bar);
  color: var(--terminal-text);
  font-size: var(--t-meta);
  white-space: nowrap;
  overflow: visible;
  flex-wrap: nowrap;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The head is the top of the terminal rather than a card sitting on it: the
   same ground, and no rule between the two — the pane's own border already
   draws the window, and a divider here would make the terminal a document
   inside a panel instead of the pane's content. */
.term-bar--session,
.term-bar--activity {
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-bar);
}

/* The window head's traffic lamp. Green while a process is alive, amber while
   it is starting or stopping, red when the run ended badly — the same three
   states the pane bar's own lamp shows, at the size a window control is. */
.term-bar__lamp {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  /* An inner hairline, so a lit dot reads as a lens rather than as a spill of
     colour the bar cannot contain. */
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.3);
  transition:
    background var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.term-bar[data-phase="running"] .term-bar__lamp {
  background: var(--state-run);
  box-shadow:
    inset 0 0 0 0.5px rgb(0 0 0 / 0.28),
    0 0 6px 1px rgb(76 175 125 / 0.45);
}

.term-bar[data-phase="starting"] .term-bar__lamp,
.term-bar[data-phase="stopping"] .term-bar__lamp {
  background: var(--state-warn);
  box-shadow:
    inset 0 0 0 0.5px rgb(0 0 0 / 0.28),
    0 0 6px 1px rgb(227 179 65 / 0.45);
}

.term-bar[data-phase="failed"] .term-bar__lamp {
  background: var(--state-error);
  box-shadow:
    inset 0 0 0 0.5px rgb(0 0 0 / 0.28),
    0 0 6px 1px rgb(248 81 73 / 0.45);
}

/* Which agent this pane runs. The mark is the agent's, not ours: in a grid of
   six terminals it is the one thing in the bar that tells them apart. */
.term-bar__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* --- the overflow -------------------------------------------------------
 *
 * Everything that acts on a terminal without being one of the three controls
 * the bar keeps. It lives inside the bar, so a short pane clips it rather
 * than letting it run off the window — the cap is what keeps the first and
 * last row reachable instead of merely present. */

.term-more {
  position: relative;
  display: flex;
  align-items: center;
}

.term-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 272px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  /* The bar sets `nowrap`; a menu is prose, and prose wraps. */
  white-space: normal;
  cursor: default;
  animation: sbar-pop var(--motion-normal) var(--ease-standard);
}

/* What the pane is: who it is, what it runs, how long — and the one thing the
   bar no longer says out loud, what it is working on. */
.term-more__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-2);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}

.term-more__name {
  color: var(--text);
  font-size: var(--t-label);
  font-weight: 600;
}

.term-more__meta,
.term-more__state {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.4;
}

/* The private activity summary, still double-click editable where it is now
   read. It is one line of the pane's own note, so it truncates rather than
   wrapping the head out of the menu. */
.term-more__working {
  display: block;
  margin-bottom: var(--s-2);
  padding: 0 var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  line-height: 1.4;
  cursor: text;
}

.term-more__working-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-more__working[data-error="true"] .term-working__editor {
  border-color: var(--state-error);
}

.term-more__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: transparent;
  font-size: var(--t-label);
  text-align: left;
  transition: background var(--motion-fast) var(--ease-standard);
}

.term-more__row:hover,
.term-more__row:focus-visible {
  background: var(--bg-hover);
}

.term-more__glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.term-more__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-more__hint {
  flex: none;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.term-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* A quiet utility row with the two agent actions picked out in violet.

   Every control here is a pill. On a surface this translucent the radius is
   doing the work a fill would do elsewhere, and a pill is also the one shape
   that survives being reduced to its glyph when the pane gets narrow. */
.term-bar .pane-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--terminal-muted);
  font-family: var(--sans);
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

.term-bar .pane-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Hover is the same glass, one step brighter: a wash, a hairline, and the
   inset highlight that keeps the pill looking lit rather than filled.

   The three washes are read from custom properties first, because the pills
   whose rest state is not a neutral fill — the violet activity pill, the
   accent pressed state — cannot restate their own hover without out-ranking
   this rule, and `:not(:disabled)` is what gives this rule that rank. A pill
   sets its own three and the glass follows; everything else falls back. */
.term-bar .pane-btn:hover:not(:disabled) {
  color: var(--bar-pill-hover-ink, var(--text));
  background: var(--bar-pill-hover-bg, color-mix(in srgb, var(--text-primary) 9%, transparent));
  border-color: var(--bar-pill-hover-line, color-mix(in srgb, var(--text-primary) 14%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}

.term-bar .pane-btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--text-primary) 14%, transparent);
  box-shadow: none;
}

.term-bar .pane-btn:focus-visible,
.squad-pane__activity-toggle:focus-visible,
.swarm-terminal-card__activity-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.term-bar .pane-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.term-bar .pane-btn--icon {
  width: 26px;
  min-width: 26px;
  padding: 0;
}

.term-bar .pane-btn[aria-pressed="true"],
.term-bar .pane-btn--accent {
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
  --bar-pill-hover-ink: var(--accent-text);
  --bar-pill-hover-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --bar-pill-hover-line: color-mix(in srgb, var(--accent) 44%, transparent);
}

.term-bar .term-stop {
  margin-left: 2px;
  border-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.term-bar .term-maximize {
  color: var(--terminal-text);
}

.term-bar .term-maximize[aria-pressed="true"] {
  color: var(--terminal-text);
  background: color-mix(in srgb, var(--terminal-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--terminal-text) 22%, transparent);
}

.term-bar .pane-btn[data-danger="true"]:hover:not(:disabled),
.term-bar .pane-btn[data-danger="true"]:focus-visible,
.term-bar .term-stop:hover:not(:disabled),
.term-bar .term-stop:focus-visible {
  color: var(--bad-text);
  background: var(--error-soft);
  border-color: var(--error-line);
}

@media (prefers-reduced-motion: reduce) {
  .term-bar .pane-btn {
    transition: none;
  }
}

/* The pane's own shape controls — maximize and remove — share one capsule. It
   is the bar's only container, and that is the point: they belong to the pane
   rather than to the run, so they must not read as peers of the actions on
   either side of them. Inside it the hover wash is enough on its own — the
   capsule's fill is what the two glyphs are read against, and a second border
   there would draw a box inside a box. */
.term-bar__group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  /* One pixel of inset plus a 24px control and a hairline either side lands
     the capsule on the same 28px line as every pill beside it. */
  padding: 1px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-void) 26%, transparent);
}

.term-bar .term-bar__group .pane-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
}

/* A hairline between reading the run and ending it. Stop is the one action up
   here that stops work, and the rule is what says so before the pointer ever
   reaches it. */
.term-bar__rule {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: color-mix(in srgb, var(--text-primary) 14%, transparent);
}

/* The folder chip is the bar's one filled control. Held at a translucent fill
   it sits in the glass instead of on top of it; the same chip on a pane body
   keeps its solid fill. */
.term-bar .term-dir__chip {
  background: color-mix(in srgb, var(--bg-raised) 62%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.term-bar .term-dir__chip:hover,
.term-bar .term-dir__chip:focus-visible {
  background: color-mix(in srgb, var(--surface-hover) 80%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
}

.term-skill {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: var(--t-11);
}

.term-skill__label {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.term-skill__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-11);
}

.term-skill__input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.term-skill__error {
  flex: 0 1 32ch;
  color: var(--bad-text);
  line-height: 1.35;
}

@media (max-width: 700px) {
  .term-skill {
    flex-wrap: wrap;
  }

  .term-skill__input {
    order: 2;
    flex-basis: 100%;
  }

  .term-skill__error {
    order: 3;
    flex-basis: 100%;
  }
}

.tpane:hover .term-bar .pane-btn,
.tpane:focus-within .term-bar .pane-btn,
.term-bar:focus-within .pane-btn {
  opacity: 1;
}

/* The pane's name, and a lamp saying whether anything is alive in it. */
.term-brand {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--terminal-text);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.term-brand__lamp {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}

/* A static glow says that the process is alive without repainting every
   terminal header on every animation frame. */
.term-brand[data-phase="running"] .term-brand__lamp {
  background: var(--state-run);
  box-shadow: 0 0 6px 1px rgb(76 175 125 / 0.45);
}

.term-brand[data-phase="starting"] .term-brand__lamp,
.term-brand[data-phase="stopping"] .term-brand__lamp {
  background: var(--state-warn);
  box-shadow: 0 0 6px 1px rgb(227 179 65 / 0.45);
}

.term-brand[data-phase="failed"] .term-brand__lamp {
  background: var(--state-error);
  box-shadow: 0 0 6px 1px rgb(248 81 73 / 0.45);
}

.term-bar__spacer {
  flex: 1 1 auto;
  min-width: var(--s-2);
}

/* The private activity summary's editor, wherever the summary is shown. */
.term-working__editor {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  outline: none;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  line-height: 1.2;
}

.term-working__editor:focus {
  border-color: var(--text-tertiary-mark);
}

.term-outcome {
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- live terminal activity -------------------------------------------- */

.term-activity {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.term-activity__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  min-height: 0;
  padding: var(--s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.term-activity__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.term-activity__eyebrow {
  margin: 0;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.term-activity__subcopy {
  margin: calc(var(--s-2) * -1) 0 0;
  color: var(--text-muted);
  font-size: var(--t-11);
  line-height: 1.45;
}

.term-activity__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--text-muted);
  font-size: var(--t-11);
}

.term-activity__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.term-activity__status[data-status="working"] .term-activity__status-dot {
  background: var(--state-run);
  box-shadow: 0 0 5px rgb(76 175 125 / 0.45);
}

.term-activity__status[data-status="starting"] .term-activity__status-dot,
.term-activity__status[data-status="stopping"] .term-activity__status-dot {
  background: var(--state-warn);
}

.term-activity__status[data-status="attention"] .term-activity__status-dot {
  background: var(--bad-text);
}

.term-activity__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.term-activity__label {
  margin: 0;
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

.term-activity__section-help {
  margin: calc(var(--s-1) * -1) 0 0;
  color: var(--text-muted);
  font-size: var(--t-11);
  line-height: 1.4;
}

.term-activity__doing {
  margin: 0;
  font-size: var(--t-13);
  line-height: 1.45;
  color: var(--text);
}

.term-activity__active-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.term-activity__active-mark {
  color: var(--text-tertiary-mark);
  font-size: var(--t-11);
}

.term-activity__active-mark[data-active="true"] {
  color: var(--state-run);
}

.term-activity__path {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-11);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-activity__active-state,
.term-activity__time {
  color: var(--text-muted);
  font-size: var(--t-11);
  white-space: nowrap;
}

.term-activity__files {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--border);
}

.term-activity__file {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
}

.term-activity__operation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 46px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  background: var(--bg-raised);
  font-size: var(--t-10);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.term-activity__operation[data-operation="create"] {
  color: var(--state-run);
}

.term-activity__operation[data-operation="delete"] {
  color: var(--bad-text);
}

.term-activity__operation[data-operation="rename"] {
  color: var(--state-warn);
}

.term-activity__command {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.term-activity__command-state {
  color: var(--text-muted);
  font-size: var(--t-10);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.term-activity__command[data-running="true"] .term-activity__command-state {
  color: var(--ok-text);
}

.term-activity__command code {
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-11);
}

.term-activity__git {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-12);
}

.term-activity__git strong {
  color: var(--text);
  font-weight: 500;
}

.term-activity__git-total {
  color: var(--text-secondary);
}

.term-activity__git-add {
  color: var(--state-run);
  font-family: var(--mono);
}

.term-activity__git-delete {
  color: var(--bad-text);
  font-family: var(--mono);
}

.term-activity__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-11);
}

.term-activity__preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.term-activity__preview summary {
  padding: var(--s-2) var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-11);
  cursor: pointer;
  list-style: none;
}

.term-activity__preview summary::-webkit-details-marker {
  display: none;
}

.term-activity__preview summary::before {
  display: inline-block;
  margin-right: var(--s-2);
  color: var(--text-muted);
  content: "＋";
}

.term-activity__preview[open] summary::before {
  content: "−";
}

.term-activity__preview summary:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.term-activity__preview-note,
.term-activity__preview-empty,
.term-activity__preview-error {
  margin: 0;
  padding: 0 var(--s-3) var(--s-2);
  color: var(--text-muted);
  font-size: var(--t-11);
  line-height: 1.4;
}

.term-activity__preview-error {
  color: var(--bad-text);
}

.term-activity__preview-code {
  max-height: 260px;
  margin: 0;
  padding: var(--s-3);
  overflow: auto;
  border-top: 1px solid var(--border);
  color: var(--text);
  background: var(--bg);
  font: var(--t-11)/1.55 var(--mono);
  white-space: pre;
}

.term-activity__notice {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-xs);
  background: var(--warn-soft);
  color: var(--text-muted);
  font-size: var(--t-11);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .terminal-flip__face {
    transition: none;
  }
}

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

/* One pane, the whole area. The sidebar and the project toolbar stay. */
.wmain__grid[data-mode="terminal-focus"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* --- start session dialog --- */

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: 88vh;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}

.dialog__title {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}

.dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
}

.dialog__notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-xs);
  background: var(--warn-soft);
}

/* --- the agent list ------------------------------------------------------
   Twelve rows that have to be scannable in one pass, so the reading order is
   rank, then mark, then name, then everything else. Colour never carries a
   state alone: every row states its status in words as well.

   Replaces the two-runtime `runtime-choice` block, which could not hold a
   capability list, an unverified state or an edited command. */

.agents {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.agents__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent {
  /* One fixed radio track so the detail below can line up under the name
     without guessing at a platform's radio width. */
  --agent-indent: calc(18px + 26px + var(--s-2) * 2);

  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) var(--s-3);
  /* The rail lives in the left border, so a selected row does not reflow. */
  border: 1px solid var(--border);
  border-left: var(--rail-accent) solid transparent;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  transition: border-color 120ms ease, opacity 120ms ease;
}

.agent[data-selected="true"] {
  border-left-color: var(--accent);
  border-color: var(--border-strong);
}

/* Not installed is not a failure, it is an absence. It recedes rather than
   alarming, and stays legible enough to read the reason. */
.agent[data-state="notInstalled"] {
  opacity: 0.62;
}

.agent__pick {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 18px 26px 1fr;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}

.agent__pick:has(input:disabled) {
  cursor: default;
}

.agent__radio {
  accent-color: var(--accent);
}

.agent__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary-mark);
}

.agent__mark[data-tone="good"] {
  color: var(--ok);
}

.agent__mark[data-tone="warn"] {
  color: var(--warn);
}

.agent__mark[data-tone="bad"] {
  color: var(--bad);
}

.agent__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}

.agent__name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
  font-size: var(--t-12);
  font-weight: 500;
}

.agent__tag {
  padding: 1px var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agent__state {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agent__state[data-tone="good"] {
  color: var(--ok-text);
}

.agent__state[data-tone="warn"] {
  color: var(--warn-text);
}

.agent__body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  /* Aligned under the name, not under the radio: the command belongs to the
     agent, and a hanging indent is how a list says so. */
  padding-left: var(--agent-indent);
  min-width: 0;
}

/* Nothing to say about an agent beyond its name — no command, no capability,
   no advice — so the row closes up instead of leaving a gap. */
.agent__body:empty {
  display: none;
}

.agent__command {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent__caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent__cap {
  padding: 1px var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agent__advice {
  margin: 0;
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agent__go {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.agents__more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-11);
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

.agents__more:hover {
  color: var(--text);
}

.chat-usage {
  margin: 0;
  align-self: flex-end;
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agents__blocked {
  margin: 0;
  font-size: var(--t-11);
  color: var(--warn-text);
}

/* --- editing one agent's command ----------------------------------------- */

.agentedit {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}

.agentedit__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.agentedit__label {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agentedit__hint {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.agentedit__area {
  font-family: var(--mono);
  resize: vertical;
}

.agentedit__objection {
  margin: 0;
  font-size: var(--t-11);
  color: var(--warn-text);
}

.wside__hint--locked {
  color: var(--warn);
}

.wside__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Home, workspace setup and the terminal grid.

   Same restrained palette as the rest of the tool: near-black ground, one
   purple accent, warm amber only where a status earns it. No marketing
   gradients — this is a desktop tool, not a landing page.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- home --- */

/* The launcher is a centred column, not a page. Nothing is open yet, so the
   mark holds the middle and the ways in sit under it as one short list. */
.home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--s-8) var(--s-5);
}

.home__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
}

/* The mark at the one size it is the largest thing on screen. */
.home__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.home__wordmark {
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 600;
  letter-spacing: var(--track-display-m);
  line-height: 1;
}

/* The one place the largest display step is spent. */
.home__headline {
  margin-top: var(--s-7);
  font-family: var(--display);
  font-size: var(--t-display-l);
  font-weight: 600;
  letter-spacing: var(--track-display-l);
  line-height: 1;
  text-align: center;
}

.home__lede {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--t-body);
  text-align: center;
}

.home__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  align-self: stretch;
  margin-top: var(--s-7);
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 2px solid var(--bad);
  color: var(--text);
  font-size: var(--t-label);
}

.home__error svg {
  flex: none;
  color: var(--bad);
}

.home__modes {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-self: stretch;
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
}

/* One row per way in. A row is one line: icon, name, what is behind it, and
   the key that opens it — so two rows can be compared without reading. */
.mode {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.mode:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.mode:active {
  background: var(--surface-active);
}

.mode__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color var(--motion-fast) var(--ease);
}

/* The row is the affordance; the icon lights to the accent to say which one
   the pointer is on. One purple thing at a time, and only under a pointer. */
.mode:hover .mode__icon {
  color: var(--accent-text);
  border-color: var(--accent-line);
}

.mode__name {
  flex: 1;
  overflow: hidden;
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode__kbd {
  flex: none;
  padding: 3px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: var(--bg-app);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

/* The quiet row at the bottom: what the machine is doing, one shortcut, and
   the sentence this whole app is an argument for. */
.home__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  align-self: stretch;
  margin-top: var(--s-8);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.home__runtime {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.home__runtime-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

/* Ready breathes — slow, shallow, alive. The reduced-motion block already
   stills this dot; the word beside it carries the state on its own. */
.home__runtime[data-tone="ready"] .home__runtime-dot {
  background: var(--ok);
  animation: home-breathe 2.8s var(--ease) infinite alternate;
}

@keyframes home-breathe {
  from {
    opacity: 0.55;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.home__runtime[data-tone="attention"] .home__runtime-dot {
  background: var(--warn);
}

.home__runtime[data-tone="checking"] .home__runtime-dot {
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.home__hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.home__hint kbd {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0;
  text-transform: none;
}

.home__statement {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}



/* --- shared surfaces --- */

/* One content panel, used wherever a page needs a bounded region with a title.
   Panels do not nest: a panel inside a panel means the hierarchy is wrong. */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.panel__title {
  font-size: var(--t-section);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.panel__note {
  flex: none;
  font-size: var(--t-meta);
  color: var(--text-dim);
}

/* Nothing here yet is a state, not a fault: a real surface, said plainly. */
.panel__empty {
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--t-compact);
  line-height: var(--lh-body);
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* A segmented control: one row, one selected option, no underlined words. */
.segmented {
  display: flex;
  flex: none;
  gap: 2px;
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.segmented__option {
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-compact);
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.segmented__option:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}

.segmented__option[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-active);
  box-shadow: var(--shadow-1);
}

.segmented__option:disabled {
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.5;
}

.swarm-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

/* Screenshot-referenced ProofSwarm setup: native controls, existing backend. */
.swarm-setup {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: 0;
  color: var(--text);
  background: var(--bg-app);
}

.swarm-setup__steps {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-7) var(--s-3);
}

.swarm-setup__steps button {
  position: relative;
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  background: transparent;
  font: 500 var(--t-meta) var(--mono);
}

.swarm-setup__steps button:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: 10px;
  height: 1px;
  content: "";
  background: var(--border-strong);
}

.swarm-setup__steps button[data-active="true"] {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
}

.swarm-setup__steps button[data-complete="true"] { color: var(--text-dim); cursor: pointer; }
.swarm-setup__steps button:disabled { opacity: 1; }
.swarm-setup__body { min-height: 0; overflow-y: auto; padding: var(--s-6) var(--s-6) var(--s-7); }
.swarm-setup__screen { width: min(720px, 100%); margin: 0 auto; text-align: center; }
.swarm-setup__screen--wide { width: min(900px, 100%); }
.swarm-setup__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: var(--s-1) auto var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--accent-hi); background: var(--bg-raised); box-shadow: var(--shadow-1); font: 500 var(--t-title) var(--mono); }
.swarm-setup__screen h1 { margin: 0; color: var(--text); font-size: var(--t-title); font-weight: 500; letter-spacing: -0.02em; }
.swarm-setup__screen > p { max-width: 560px; margin: var(--s-3) auto var(--s-7); color: var(--text-dim); font-size: var(--t-compact); line-height: 1.55; }
.swarm-setup__label { display: block; margin: var(--s-6) 0 var(--s-3); color: var(--text-dim); font: 500 var(--t-label) var(--mono); text-align: left; }

.swarm-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.swarm-preset-grid button { display: grid; gap: 2px; min-height: 66px; place-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); background: var(--surface-2); cursor: pointer; }
.swarm-preset-grid button[data-active="true"] { border-color: var(--border-strong); color: var(--accent-hi); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.swarm-preset-grid strong { font-size: var(--t-body-l); }
.swarm-preset-grid span { font: 500 var(--t-label) var(--mono); }
.swarm-runtime-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.swarm-runtime-pills span { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-2); font-size: var(--t-meta); }
.swarm-roster-list { display: grid; gap: var(--s-2); margin-top: var(--s-3); text-align: left; }
.swarm-roster-list > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.swarm-roster-list > div > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--accent-hi); background: var(--bg-raised); font: 500 var(--t-label) var(--mono); }
.swarm-roster-list strong { color: var(--text-secondary); font: 500 var(--t-meta) var(--mono); }
.swarm-roster-list small { color: var(--text-dim); font-size: var(--t-label); }

.swarm-mission-input { width: 100%; min-height: 180px; padding: var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); background: var(--bg); box-shadow: none; outline: none; resize: vertical; font: var(--t-body)/1.6 var(--sans); }
.swarm-mission-input:focus, .swarm-name-input:focus, .swarm-context-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.swarm-shared-note { margin-top: var(--s-3); padding: var(--s-3) var(--s-3); border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-raised); font-size: var(--t-meta); text-align: left; }
.swarm-rule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); text-align: left; }
.swarm-rule-grid label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 54px; padding: var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.swarm-rule-grid label[data-active="true"] { border-color: var(--border-strong); background: var(--bg-raised); }
.swarm-rule-grid strong, .swarm-rule-grid small { display: block; }
.swarm-rule-grid strong { color: var(--text-muted); font-size: var(--t-meta); }
.swarm-rule-grid small { margin-top: var(--s-1); color: var(--text-dim); font-size: var(--t-label); }
.swarm-rule-grid input { width: 30px; accent-color: var(--accent); }

.swarm-directory-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); background: var(--surface-2); text-align: left; }
.swarm-directory-card strong, .swarm-directory-card small { display: block; }
.swarm-directory-card strong { overflow: hidden; color: var(--text); font: var(--t-meta) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.swarm-directory-card small { margin-top: var(--s-1); color: var(--text-dim); font-size: var(--t-label); }
.swarm-directory-card > span { color: var(--ok); font: 500 var(--t-label) var(--mono); }
.swarm-context-card { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-7); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); background: var(--surface-2); }
.swarm-context-card strong { color: var(--text-muted); font-size: var(--t-compact); }
.swarm-context-card small { color: var(--text-dim); font-size: var(--t-meta); }
.swarm-context-card textarea { width: 100%; min-height: 110px; margin-top: var(--s-4); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--bg); outline: none; resize: vertical; font: var(--t-meta)/1.6 var(--mono); }
.swarm-name-input { width: 100%; padding: var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); background: var(--bg); outline: none; text-align: center; font-size: var(--t-section); }
.swarm-launch-summary { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }
.swarm-launch-summary span { padding: var(--s-2) var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-dim); font-size: var(--t-label); }

.swarm-setup__footer { display: grid; grid-template-columns: 140px 1fr 180px; align-items: center; gap: var(--s-4); min-height: 66px; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--border); background: var(--surface); }
.swarm-setup__footer > span { color: var(--text-dim); font: 500 var(--t-label) var(--mono); text-align: center; }

.swarm-workspace-stage { min-height: 0; overflow-y: auto; }
.swarm-stage-continue { display: block; margin: var(--s-4) auto var(--s-7); }

/* ProofSwarm execution — original graphite orchestration surface. */
.swarm-stage-nav {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.swarm-stage-nav span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-dim);
  font-size: var(--t-meta);
  font-weight: 500;
}

.swarm-stage-nav span[data-complete] {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: var(--bg-raised);
}

.swarm-commander-stage {
  min-height: 620px;
  border-bottom: 1px solid var(--border);
}

.swarm-worktrees,
.swarm-launch-card,
.swarm-integration {
  width: min(1100px, calc(100% - 48px));
  margin: var(--s-7) auto;
  padding: var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.swarm-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
}

.swarm-section-head h2,
.swarm-launch-card h2,
.swarm-integration h2 {
  margin: var(--s-2) 0 var(--s-2);
  color: var(--text);
  font-size: var(--t-title);
}

.swarm-section-head p,
.swarm-launch-card p,
.swarm-integration > p {
  margin: 0;
  color: var(--text-muted);
}

.swarm-section-head__step {
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
}

.swarm-status-chip,
.swarm-live-dot + * {
  white-space: nowrap;
}

.swarm-status-chip {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--run-line);
  border-radius: var(--radius-full);
  color: var(--ok);
  background: var(--run-soft);
  font-size: var(--t-meta);
}

.swarm-dirty {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  color: var(--warn);
  background: var(--warn-soft);
}

.swarm-dirty p { color: var(--warn); }
.swarm-dirty ul { max-height: 120px; overflow: auto; }
.swarm-dirty label { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }

.swarm-worktree-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.swarm-worktree-card {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.swarm-worktree-card header,
.swarm-terminal-card header,
.swarm-message-list article header,
.swarm-verification-task > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.swarm-worktree-card header span { color: var(--ok); font-size: var(--t-meta); }
.swarm-worktree-card dl { margin: var(--s-4) 0; }
.swarm-worktree-card dl div { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-2); margin: var(--s-2) 0; min-width: 0; }
.swarm-worktree-card dt { color: var(--text-dim); font-size: var(--t-meta); }
.swarm-worktree-card dd { min-width: 0; margin: 0; overflow: hidden; color: var(--text-muted); font: var(--t-meta)/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.swarm-readonly { color: var(--text-dim); font-size: var(--t-compact); }
.swarm-prepare { margin-top: var(--s-6); }

.swarm-link-danger {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-left: var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--error-line);
  border-radius: var(--radius-sm);
  color: var(--bad);
  background: var(--error-soft);
  font-size: var(--t-compact);
  font-weight: 500;
}

.swarm-link-danger:hover:not(:disabled) {
  background: var(--error-soft);
}
.swarm-orphans { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.swarm-orphans > div { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--s-3); padding: var(--s-2) 0; color: var(--text-muted); }
.swarm-orphan-actions { display: flex; gap: var(--s-2); }
.swarm-orphan-actions button { padding: var(--s-2) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-hover); cursor: pointer; }

.swarm-run {
  min-height: 760px;
  margin-top: var(--s-7);
  border-top: 1px solid var(--border);
  background: var(--bg-app);
}

.swarm-run__bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--border);
  /* An opaque surface, not a blur: the bar sits over a terminal, and a
     translucent one made the text underneath legible through it. */
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-meta);
}

.swarm-run__bar nav { display: flex; justify-content: center; gap: var(--s-1); }
.swarm-run__bar nav button { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; font-size: var(--t-meta); cursor: pointer; }
.swarm-run__bar nav button[data-active="true"] { color: var(--text); border-color: var(--border-strong); background: var(--bg-raised); box-shadow: var(--shadow-1); }
.swarm-run__bar nav button span { min-width: 17px; padding: 2px var(--s-1); border-radius: var(--radius-full); color: var(--accent-hi); background: var(--bg-raised); font-size: var(--t-label); }
.swarm-run__identity { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.swarm-run__identity > span:last-child { display: grid; min-width: 0; }
.swarm-run__identity strong { overflow: hidden; font-size: var(--t-meta); text-overflow: ellipsis; white-space: nowrap; }
.swarm-run__identity small { color: var(--text-dim); font-size: var(--t-label); }
.swarm-run__state { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.swarm-run__state > strong { color: var(--ok); }
.swarm-run__state button { padding: var(--s-2) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; cursor: pointer; }
.swarm-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: var(--s-2); border-radius: var(--radius-full); background: var(--ok); box-shadow: none; }
.swarm-run__error { width: min(900px, calc(100% - 48px)); margin: var(--s-4) auto; }

.swarm-topology {
  position: relative;
  width: min(1100px, 96%);
  height: 680px;
  margin: 0 auto;
  overflow: hidden;
}

.swarm-topology > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.swarm-topology line { stroke: var(--accent-line); stroke-width: 0.22; vector-effect: non-scaling-stroke;  }

.swarm-commander-node,
.swarm-node-position {
  position: absolute;
  transform: translate(-50%, -50%);
}

.swarm-commander-node {
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text);
  background: var(--bg-surface);
}

.swarm-commander-node span { color: var(--text-secondary); font-size: var(--t-title); }
.swarm-commander-node strong { font-size: var(--t-compact); }
.swarm-commander-node small { color: var(--text-dim); font-size: var(--t-label); }

.swarm-node {
  display: grid;
  justify-items: center;
  width: 150px;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.swarm-node__orb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: var(--t-20);
}

.swarm-node[data-status="needs_login"] .swarm-node__orb,
.swarm-node[data-status="needs_trust"] .swarm-node__orb,
.swarm-node[data-status="needs_permission"] .swarm-node__orb,
.swarm-node[data-status="failed"] .swarm-node__orb { border-color: var(--bad); color: var(--bad); box-shadow: none; }
.swarm-node[data-status="verified"] .swarm-node__orb { border-color: var(--ok); color: var(--ok); }
.swarm-node strong { font-size: var(--t-meta); }
.swarm-node > span:not(.swarm-node__orb) { color: var(--text-dim); font-size: var(--t-label); }
.swarm-node small { max-width: 150px; overflow: hidden; color: var(--text-dim); font-size: var(--t-label); text-overflow: ellipsis; white-space: nowrap; }

.swarm-agent-inspector {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 310px;
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2);
}
.swarm-agent-inspector > button { float: right; border: 0; color: var(--text-dim); background: transparent; font-size: var(--t-title); }
.swarm-agent-inspector > span { color: var(--text-secondary); font-size: var(--t-meta); }
.swarm-agent-inspector h3 { margin: var(--s-2) 0; color: var(--text); font-size: var(--t-card); }
.swarm-agent-inspector p { color: var(--text-muted); }
.swarm-agent-inspector code { display: block; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; }
.swarm-agent-inspector div { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.swarm-agent-inspector div button { padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--accent-hi); background: var(--bg-raised); }

.swarm-terminal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1px;
  min-height: 700px;
  background: var(--border);
}
.swarm-terminal-card { min-width: 0; min-height: 360px; background: var(--bg); }
.swarm-terminal-card header { height: 42px; padding: 0 var(--s-3); border-bottom: 1px solid var(--border); color: var(--text-muted); }
.swarm-terminal-card header span { color: var(--text-dim); font-size: var(--t-meta); }
.swarm-terminal-card__body { height: 330px; }
.swarm-terminal-card__body > p { padding: var(--s-6); color: var(--text-dim); }

.swarm-messages {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 700px;
}
.swarm-message-list { width: min(1200px, calc(100% - 60px)); margin: var(--s-6) auto; }
.swarm-message-list > p { color: var(--text-dim); text-align: center; }
.swarm-message-list article { margin-bottom: var(--s-3); padding: var(--s-4) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.swarm-message-list article[data-priority="high"] { border-color: var(--warn-line); }
.swarm-message-list header strong { color: var(--text-secondary); font-size: var(--t-meta); }
.swarm-message-list header span { color: var(--text-dim); font-size: var(--t-label); }
.swarm-message-list h3 { margin: var(--s-3) 0 var(--s-1); color: var(--text); font-size: var(--t-compact); }
.swarm-message-list p { margin: 0; color: var(--text-muted); font-size: var(--t-compact); line-height: 1.55; white-space: pre-wrap; }
.swarm-message-filter { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); color: var(--text-dim); font-size: var(--t-meta); }
.swarm-message-filter input { padding: var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--bg); outline: none; }
.swarm-message-filter input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.swarm-message-list details, .swarm-integrated-diff { margin-top: var(--s-3); color: var(--text-dim); font-size: var(--t-meta); }
.swarm-message-list summary, .swarm-integrated-diff summary { cursor: pointer; }
.swarm-message-list pre, .swarm-integrated-diff pre { max-height: 340px; overflow: auto; padding: var(--s-3); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--bg); font: var(--t-meta)/1.5 var(--mono); white-space: pre-wrap; }
.swarm-message-compose { position: sticky; bottom: 0; display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s-2); width: min(900px, calc(100% - 40px)); margin: 0 auto var(--s-4); padding: var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.swarm-message-compose select, .swarm-message-compose textarea { border: 0; color: var(--text-muted); background: transparent; outline: none; }
.swarm-message-compose textarea { min-height: 42px; resize: none; }
.swarm-message-compose button { padding: 0 var(--s-4); border: 0; border-radius: var(--radius-sm); color: var(--accent-ink); background: var(--accent); }

.swarm-verification-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); width: min(1200px, calc(100% - 48px)); margin: var(--s-6) auto; }
.swarm-verification-task { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.swarm-verification-task > header strong { display: block; color: var(--text); }
.swarm-verification-task > header span, .swarm-verification-task > header small { color: var(--text-dim); font-size: var(--t-meta); }
.swarm-verification-task > p { color: var(--text-dim); }
.swarm-criterion { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.swarm-criterion > strong { color: var(--text-muted); font-size: var(--t-meta); }
.swarm-criterion > span { color: var(--text-muted); font-size: var(--t-label); }
.swarm-criterion > p, .swarm-criterion > small, .swarm-criterion > div { grid-column: 1 / -1; }
.swarm-criterion > p { margin: var(--s-1) 0; color: var(--text-muted); font-size: var(--t-meta); }
.swarm-criterion > small { color: var(--text-dim); }
.swarm-criterion[data-status="passed"] { border-color: var(--run-line); }
.swarm-criterion[data-status="failed"] { border-color: var(--error-line); }
.swarm-criterion button { margin-right: var(--s-2); padding: var(--s-2) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--accent-hi); background: var(--bg-raised); }

.swarm-integration { min-height: 400px; }
.swarm-merge-card, .swarm-proof-link { margin: var(--s-6) 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.swarm-merge-card > strong { display: block; margin-bottom: var(--s-2); color: var(--text-secondary); }
.swarm-merge-card code, .swarm-proof-link code { display: block; margin: var(--s-2) 0; color: var(--text-muted); }
.swarm-merge-card ul { padding-left: var(--s-4); color: var(--text-muted); font-size: var(--t-meta); line-height: 1.6; }
.swarm-proof-link strong { color: var(--ok); }

@media (max-width: 780px) {
  .swarm-setup__steps { justify-content: flex-start; overflow-x: auto; padding-inline: var(--s-4); }
  .swarm-setup__steps button { min-width: max-content; }
  .swarm-preset-grid, .swarm-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swarm-setup__footer { grid-template-columns: auto 1fr; padding-inline: var(--s-3); }
  .swarm-setup__footer > span { display: none; }
  .swarm-setup__next { justify-self: stretch; }
  .swarm-run__bar { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3); }
  .swarm-run__bar nav { justify-content: flex-start; overflow-x: auto; }
  .swarm-run__state { justify-content: flex-start; }
  .swarm-stage-nav { justify-content: flex-start; overflow-x: auto; }
  .swarm-topology { height: 760px; }
  .swarm-node-position { transform: translate(-50%, -50%) scale(0.82); }
  .swarm-terminal-grid { grid-template-columns: 1fr; }
  .swarm-message-compose { grid-template-columns: 1fr; }
}

/* The bar a ProofSwarm workspace keeps above its stages. The sidebar carries
   navigation, so this carries identity and stage only. */
.swarm-workspace__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  flex: none;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.swarm-workspace__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.swarm-workspace__id h1 {
  overflow: hidden;
  font-size: var(--t-section);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swarm-workspace > .mcv {
  flex: 1;
  min-height: 0;
}

.swarm-run-loading {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--s-8);
  color: var(--text-dim);
  font-size: var(--t-compact);
}

@media (max-width: 760px) {
  .home__modes {
    grid-template-columns: 1fr;
  }
}

/* --- setup wizard --- */

.wiz {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wiz__top {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.wiz__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wiz__heading-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wiz__heading-copy {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-11);
}

.wiz__steps {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* The connector between steps. Decorative, so it is never announced. */
.wiz__step + .wiz__step::before {
  content: "";
  display: inline-block;
  width: clamp(20px, 5vw, 56px);
  height: 1px;
  margin-right: var(--s-2);
  vertical-align: middle;
  background: var(--border-subtle);
}

.wiz__step-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--t-12);
}

/* No circles. A step is a number and a word; where you are is said in accent,
   and everything ahead of you stays tertiary until you get there. */
.wiz__step-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-tertiary);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.wiz__step[data-state="current"] .wiz__step-btn {
  color: var(--text-primary);
}

/* Where you are: filled, the way a running node on the rail is filled. */
.wiz__step[data-state="current"] .wiz__step-index {
  border-color: transparent;
  background: var(--accent-solid);
  color: var(--accent-ink);
}

.wiz__step[data-state="done"] .wiz__step-btn {
  color: var(--text-secondary);
}

/* Cleared: outlined rather than filled, so only one circle is ever solid. */
.wiz__step[data-state="done"] .wiz__step-index {
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.wiz__step-btn:disabled {
  cursor: default;
}

.wiz__close {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
}

.wiz__close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.wiz__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.wiz__body {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(var(--s-6), 5vh, var(--s-7)) clamp(var(--s-6), 4vw, var(--s-7)) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.wiz__title {
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 600;
  letter-spacing: var(--track-display-m);
  line-height: 1.1;
  text-align: center;
}

.wiz__lede {
  max-width: 62ch;
  margin: calc(var(--s-3) * -1) auto 0;
  color: var(--text-muted);
  font-size: var(--t-body);
  text-align: center;
}

/* Sticky, so Back and Continue stay reachable at any window height. */
.wiz__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* The wizard's footer pair are the shared secondary and primary buttons under
   older names; they inherit the one control height rather than defining a
   second one. */
.wiz__back,
.wiz__next,
.swarm-setup__back,
.swarm-setup__next,
.swarm-stage-continue,
.swarm-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--t-compact);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.wiz__back,
.swarm-setup__back,
.swarm-secondary {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

.wiz__back:hover:not(:disabled),
.swarm-setup__back:hover:not(:disabled),
.swarm-secondary:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}

.wiz__foot-status {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

/* Text, not a button: it is a way past the step, not a thing to reach for.
   It sits beside the primary so the two are read as a pair of exits. */
.wiz__skip {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-label);
  font-weight: 500;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wiz__skip:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.wiz__discard-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--bg-app) 78%, transparent);
  backdrop-filter: blur(5px);
}

.wiz__discard {
  width: min(100%, 410px);
  padding: var(--s-6);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  box-shadow: 0 18px 60px rgb(0 0 0 / 38%);
  animation: ps-rise var(--dur-2) var(--ease) both;
}

.wiz__discard h2 {
  margin: 0 0 var(--s-2);
  color: var(--text);
  font-size: var(--t-section);
}

.wiz__discard p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-compact);
  line-height: 1.55;
}

.wiz__discard > div {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.wiz__discard button {
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-2);
}

.wiz__discard button:hover,
.wiz__discard button:focus-visible {
  color: var(--text);
  border-color: var(--accent-line);
}

.wiz__discard button.is-danger {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 42%, var(--border));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface-2));
}

.wiz__issue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--bad);
  font-size: var(--t-12);
}

/* The one filled button on the screen. Nothing else gets an accent background,
   which is what makes this one read as the thing to press. */
.wiz__next,
.swarm-setup__next,
.swarm-stage-continue {
  background: var(--accent);
  color: var(--accent-ink);
}

.wiz__next:hover:not(:disabled),
.swarm-setup__next:hover:not(:disabled),
.swarm-stage-continue:hover:not(:disabled) {
  background: var(--accent-hover);
}

/* Disabled is a state, not a dimmed copy: opacity would drag the label below
   readable contrast and leave the accent faintly visible under it. */
.wiz__next:disabled,
.swarm-setup__next:disabled,
.swarm-stage-continue:disabled {
  cursor: not-allowed;
  background: var(--bg-raised);
  color: var(--text-tertiary);
}

.wiz__back:disabled,
.swarm-setup__back:disabled,
.swarm-secondary:disabled {
  cursor: not-allowed;
  border-color: var(--border-subtle);
  color: var(--text-tertiary);
}

/* --- wizard steps --- */

.wstep {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.wstep__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

/* --- working folder ---
   The first question on the layout step: where the terminals will start. One
   row per folder, because a folder is one fact and a card around one fact is
   a box around a sentence. */

.wfolder {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wfolder__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.wfolder__title {
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wfolder__hint {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.wfolder__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wfolder__row:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

/* A path is an identifier, so it is set in mono and never wrapped. */
.wfolder__path {
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only a real path truncates from the left — its last segment is the part
   that tells you which folder this is. Applied to the placeholder it just
   moved the ellipsis to the front of a sentence. */
.wfolder__path[data-path="true"] {
  direction: rtl;
  text-align: left;
}

.wfolder__browse {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--text-tertiary);
}

/* Folders opened before. Quieter than the current one, and the same shape, so
   the row you are on is obvious without a label saying so. */
.wfolder__row--recent {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
}

.wfolder__row--recent .wfolder__path {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.wfolder__row--recent:hover {
  border-color: var(--line);
  background: var(--surface);
}

.wfolder__row--recent:hover .wfolder__path {
  color: var(--text-muted);
}

/* A quiet way to take back a working-folder choice: one step back to the
   project folder. Not a second row of buttons — a single inline return. */
.wdirstack__reset {
  align-self: flex-start;
  padding: 0 var(--s-1);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--t-meta);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.wdirstack__reset:hover,
.wdirstack__reset:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

/* A step's own subheading. It had no rule at all and was falling through to
   the browser's default h2 — which is why it was competing with the page
   title above it. */
.wstep__title {
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

/* A section label rather than a heading. Where the hero already says what the
   screen is for, a 16px "Squad size" above three tiles competes with it; this
   is the same eyebrow the wizard's quick-fill row uses. */
.wstep__title--eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The one-line instruction that sits beside the subheading rather than under
   it, so the section costs two lines instead of three. */
.wstep__hint {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.wstep__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.wstep__count {
  padding: 2px var(--s-2);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-11);
  font-weight: 500;
}

.wstep__dims,
.wstep__subtitle {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.wstep__subtitle {
  margin-top: var(--s-2);
  font-weight: 500;
}

.wpick {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.wpick__browse {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--t-12);
}

.wpick__browse:hover {
  border-color: var(--accent-hi);
  background: var(--surface-hover);
}

.wpick__empty,
.wfield__hint,
.wnote {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.wpick__chosen {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wpick__name {
  font-size: var(--t-15);
  font-weight: 500;
}

.wpick__path {
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin: var(--s-1) 0 0;
}

.wfact dt {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.wfact dd {
  margin: 2px 0 0;
  font-size: var(--t-12);
  color: var(--text);
}

/* A fact about the folder, with the icon that says which fact. Dim, inline and
   unactionable on purpose: it informs, it does not gate. */
.wnote--git {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.wnote--warn {
  color: var(--warn);
}

.wnote--bad {
  color: var(--bad);
}

.wack {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  cursor: pointer;
}

.wack input {
  margin-top: 2px;
  accent-color: var(--accent);
}

.wack__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--warn);
}

.wack__text {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-11);
  color: var(--text-muted);
}

/* Two columns, because a saved grid is a short row and a single column of
   them wastes the width the wizard already has. */
.wrecent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One fact per line: the name you recognise first, the path beneath it as
   the identifier. The old side-by-side row fought its content - a long
   path's auto track starved the name's track to zero width and then walked
   past the card edge, so neither half could be trusted to fit. */
.wrecent__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wrecent__item:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-2);
}

.wrecent__name,
.wrecent__path,
.wrecent__meta {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrecent__name {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

/* The path under the name, in mono. It is an identifier, and its last
   segment is the part that says which folder this is, so long paths cut
   from the left rather than from the right. */
.wrecent__path {
  direction: rtl;
  text-align: left;
}

.wrecent__path,
.wrecent__meta {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.wfield {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.wfield--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
}

.wfield__label {
  font-size: var(--t-11);
  color: var(--text-muted);
}

.wfield__input {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--t-13);
}

.wfield__input:focus {
  border-color: var(--accent-hi);
  outline: none;
}

.wfield__input--number {
  width: 68px;
}

.wfield__input--area {
  min-height: 112px;
  resize: vertical;
  line-height: 1.45;
}

.aset__providers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.aset__provider {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  text-align: left;
}

.aset__provider:hover:not(:disabled),
.aset__provider[data-selected="true"] {
  border-color: var(--accent);
}

.aset__provider:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.aset__provider-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.aset__provider-name,
.aset__provider-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aset__provider-name { font-size: var(--t-12); font-weight: 600; }
.aset__provider-meta { color: var(--text-tertiary); font-size: var(--t-11); }
.wproviders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wproviders--loading {
  min-height: 126px;
}

.wprovider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wprovider:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.wprovider[data-selected="true"] {
  border-color: var(--accent-line);
  background: var(--accent-quiet);
}

.wprovider__pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.wprovider__pick:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.wprovider__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}

.wprovider__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.wprovider__name,
.wprovider__vendor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wprovider__name {
  font-size: var(--t-12);
  font-weight: 600;
}

.wprovider__vendor {
  color: var(--text-tertiary);
  font-size: var(--t-11);
}

.wprovider__check {
  color: var(--accent-text);
  font-size: var(--t-12);
  font-weight: 700;
}

.wprovider__stepper {
  display: grid;
  grid-template-columns: 24px 22px 24px;
  align-items: center;
  align-self: center;
  margin-right: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.wprovider__count-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
}

.wprovider__count-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.wprovider__count-btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.wprovider__count {
  color: var(--text-primary);
  font-size: var(--t-11);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.wmini-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.wmini-preview__label {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmini-preview {
  display: grid;
  gap: 4px;
  height: 86px;
  padding: 5px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2%);
}

.wmini-preview__pane {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text-tertiary);
  overflow: hidden;
}

.wmini-preview--providers .wmini-preview__pane {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-quiet));
}

.wmini-preview__prompt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: -.08em;
}

.wmini-preview__index {
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  opacity: .72;
}

@media (max-width: 760px) {
  .aset__providers,
  .wproviders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Model/effort choice grid in the agent setup wizard */
.aset__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.aset__choice {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-13);
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.aset__choice:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.aset__choice[data-selected="true"] {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.wruntimes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wruntime {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.wruntime__name {
  font-size: var(--t-12);
  font-weight: 500;
}

.wruntime__state,
.walloc__state {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.wruntime__state--ready,
.walloc__state--ready {
  color: var(--ok);
}

.wruntime__state--authenticationRequired,
.wruntime__state--unsupportedVersion,
.walloc__state--authenticationRequired,
.walloc__state--unsupportedVersion,
.walloc__state--later {
  color: var(--warn);
}

.wruntime__state--checkFailed,
.walloc__state--checkFailed {
  color: var(--bad);
}

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

/* A row of squares, one per pane count. The miniature grid inside is the
   answer to "what will this look like"; the number under it is the answer to
   "how many". Both are the same information, which is the point — you read
   whichever one you were going to read. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  aspect-ratio: 1;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

/* The chosen grid. One accent border and an accent number — the cells stay
   quiet, because eight lit squares is a light show, not a selection. */
.tile[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-quiet);
}

.tile__grid {
  display: grid;
  gap: 3px;
  width: 44px;
  height: 32px;
}

.tile__cell {
  border-radius: 1.5px;
  background: var(--border-strong);
  transition: background var(--motion-fast) var(--ease);
}

.tile[aria-pressed="true"] .tile__cell {
  background: var(--accent);
}

.tile__count {
  font-size: var(--t-title);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-title);
  line-height: 1;
  color: var(--text-muted);
}

.tile[aria-pressed="true"] .tile__count {
  color: var(--text);
}

/* The grid shape is already drawn above it, so the words are for the screen
   reader and for the one tile whose shape you cannot draw. */
.tile__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tile--custom .tile__count {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0;
}

.wcustom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Empty panes on purpose: nothing is running, so nothing is shown running. */
.wpreview {
  display: grid;
  gap: var(--s-2);
  height: clamp(150px, 26vh, 240px);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.wpreview__pane {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.wpreview__label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

/* A preset is a saved grid with a name. Chips rather than cards: the name and
   the pane count are the whole of it, and a paragraph under each one turned a
   row of choices into a page of reading. */
.wpresets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpreset {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}

.wpreset:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.wpreset[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-quiet);
}

.wpreset__name {
  flex: 1;
  overflow: hidden;
  font-size: var(--t-label);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpreset__count {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

/* The description was the third line on a chip that is two lines tall. It is
   the button's own title instead, where it costs no space. */
.wpreset__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --- runtime allocation --- */

/* Four ways to fill the grid without touching a stepper. Buttons, not links:
   they act on the draft, and a link that changes state is a lie. */
.wfill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.wfill__label {
  margin-right: var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.wfill__btn {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-meta);
  font-weight: 500;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wfill__btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.wfill__btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Clear removes work you did, so it says so in the destructive colour — text
   only, because a filled red button for "unset four dropdowns" is theatre. */
.wfill__btn--clear {
  color: var(--bad);
  border-color: transparent;
  background: transparent;
}

.wfill__btn--clear:hover:not(:disabled) {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad);
}

/* Two columns of runtimes. A runtime is one row: is it on, what is it, how
   many panes get it. Everything else about it lives in Settings. */
.walloc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.walloc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  min-height: 52px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

/* A runtime with panes assigned is on. The border says it from across the
   room; the count says exactly how much. */
.walloc__row[data-on="true"] {
  border-color: var(--accent-line);
  background: var(--accent-quiet);
}

.walloc__row--muted {
  opacity: 0.66;
}

/* Not a row that spans two columns any more — it is one card in the grid. */
.walloc__row--muted .walloc__about {
  gap: var(--s-1);
}

/* The checkbox and the name are one target: ticking a row is the common
   action, and a 13px box is a small thing to ask someone to hit. */
.walloc__pick {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  cursor: pointer;
}

.walloc__pick input {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.walloc__pick input:disabled,
.walloc__pick:has(input:disabled) {
  cursor: not-allowed;
}

.walloc__about {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}

.walloc__name {
  font-size: var(--t-label);
  font-weight: 500;
}

/* Spans the row, under everything, and only appears when this runtime cannot
   be used. Nothing says "installed and signed in" any more — a box you can
   tick already says that. */
.walloc__fix {
  grid-column: 1 / -1;
  color: var(--warn);
  font-size: var(--t-micro);
}

/* The ceiling this runtime could take, beside the count that says what it
   has. Reads as "4 of 8" without needing the words. */
.walloc__max {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.walloc__stepper {
  display: grid;
  grid-template-columns: 28px 30px 28px;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-app);
}

.walloc__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--t-body-l);
  line-height: 1;
  transition:
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.walloc__btn:hover:not(:disabled) {
  background: var(--surface-active);
  color: var(--text);
}

.walloc__btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.walloc__count {
  min-width: 0;
  font-size: var(--t-label);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* An unticked row shows a plain zero where the stepper would be, so the two
   states line up in the grid instead of the count jumping sideways. */
.walloc__count[data-zero="true"] {
  width: 88px;
  padding: 2px 0;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-weight: 500;
}

.walloc__row[data-on="true"] .walloc__count {
  color: var(--accent-text);
}


/* --- pane assignment ---
   The per-pane runtime/role grid is gone: the allocation counts above place
   panes on their own, and eight rows of two dropdowns each restated what the
   counts already said. `.wpane__select` survives because the squad roster
   still uses it. */

/* `.wpane__select` is gone with the roster's dropdowns: the squad roster was
   its last caller, and it now picks a CLI with the same chips the rest of the
   screen uses. */

.tpane__unassigned {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Task, Plan and Proof get a readable measure instead of a full-bleed sheet. */
/* The card is as tall as what is in it. Stretching it to the window left a
   sheet of empty surface under two lines of text. */
.wpanel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  min-height: 0;
  overflow-y: auto;
  animation: ps-rise var(--dur-2) var(--ease) both;
}

.wpanel > * {
  flex: 0 0 auto;
}

.wpanel .pane {
  height: auto;
}

.wpanel .pane__body {
  overflow: visible;
}

/* One pane with a whole tab to itself can afford room. The six-pane grid
   cannot, so the roomier scale is scoped here rather than applied to `.pane`. */
.wpanel .pane {
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.wpanel .pane__head {
  height: auto;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2);
}

.wpanel .pane__title {
  font-size: var(--t-13);
  letter-spacing: -0.01em;
}

.wpanel .pane__body {
  gap: var(--s-6);
  padding: var(--s-6) var(--s-6) var(--s-6);
}

.wpanel .pane-section {
  gap: var(--s-2);
}

.wpanel .pane-section__title {
  font-size: var(--t-11);
  color: var(--text-muted);
}

.wpanel .pane-note {
  max-width: 68ch;
}

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

.wmain__grid--single {
  display: flex;
}

.wmain__grid--single > * {
  flex: 1 1 auto;
  min-height: 0;
}

.tgrid-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  --tgrid-gap: 15px;
}

/* Visible gaps between panes. The background shows through, giving each
   terminal its own rounded card rather than tiling edge to edge. */
.tgrid {
  display: grid;
  flex: 1 1 auto;
  gap: var(--tgrid-gap);
  min-height: 0;
  padding: 0;
}

.tgrid[data-maximized="true"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* The draggable seams, laid over the hairlines the panes already share. A
   layer of its own rather than gutter tracks: tracks would widen the one-pixel
   seam into a rule, and the panes are auto-placed, so a handle inside the grid
   would take a cell from one of them. Nothing here is visible until it is
   pointed at — the pane borders are the drawn line. */
.tgrid__seams {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  gap: var(--tgrid-gap);
  pointer-events: none;
}

.tgrid__seams .pane-resize {
  position: relative;
  pointer-events: auto;
}

.tgrid__seams .pane-resize--vertical {
  align-self: stretch;
  justify-self: end;
  width: 9px;
  margin: 0;
  transform: translateX(calc(var(--tgrid-gap) / 2 + 4.5px));
}

.tgrid__seams .pane-resize--horizontal {
  align-self: end;
  justify-self: stretch;
  width: auto;
  height: 9px;
  margin: 0;
  transform: translateY(calc(var(--tgrid-gap) / 2 + 4.5px));
}

/* Rounded card panes floating on the background, with gaps between them. */
.tpane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-lg);
  margin: 0;
  background: var(--terminal-bg);
  transition: border-color var(--motion-fast) var(--ease);
  /* So the session toolbar can respond to the pane's width rather than the
     window's: a dense grid is narrow however large the window is. */
  container-type: inline-size;
}

.tpane__delete-error {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
  font-size: var(--t-11);
  line-height: 1.4;
}

/* The focused pane is outlined on all four sides, not railed on one.
   In a grid of rounded cards a full border says "your keys go here" from
   anywhere on the screen. It is the one accented outline in the app, and
   only ever one pane has it. */
.tpane:focus-within {
  z-index: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.tpane:focus-within .term-bar {
  border-bottom-color: var(--accent-line);
}

.tpane .term-bar {
  flex-wrap: nowrap;
  overflow: visible;
}

/* Grab any quiet part of a terminal's top bar. The grip also gives keyboard
   users an arrow-key target without changing the terminal's input focus. */
.tpane .term-bar,
.tpane__drag-bar {
  cursor: grab;
  user-select: none;
}

.tpane__drag-bar {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-bar);
  color: var(--terminal-muted);
  font-size: var(--t-11);
}

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

.tpane__drag-grip {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--terminal-muted);
  font-size: 17px;
  line-height: 1;
  cursor: grab;
}

.tpane__drag-grip:hover,
.tpane__drag-grip:focus-visible {
  color: var(--terminal-text);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.tpane__drag-grip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.terminal-drag-identity {
  position: fixed;
  z-index: 10000;
  max-width: min(360px, calc(100vw - 24px));
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--terminal-bar);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
  color: var(--terminal-text);
  font-size: var(--t-11);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.tgrid__drop-slot {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4);
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--accent) 75%, var(--terminal-border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--terminal-bg));
  color: var(--terminal-text);
  text-align: center;
  pointer-events: none;
}

.tgrid__drop-title,
.tgrid__drop-origin {
  font-size: var(--t-11);
  color: var(--terminal-muted);
}

.tgrid__drop-slot strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--terminal-text);
  font-size: var(--t-meta);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-dragging-terminal,
body.is-dragging-terminal * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* The bar is one line at every width, in every pane.

   A second row used to be the answer to a narrow pane, and it cost every
   dense grid a strip of terminal height for chrome the operator reads once.
   So the bar narrows what it says instead: past 860px the folder chip and the
   actions tighten up, and past 700px the three text actions keep their glyphs
   while their names move into their tooltips. Nothing is ever pushed out of
   reach — the activity title is the one thing up here allowed to be cut
   short, because a hidden Stop is worse than a small one. The label step is
   at 700 rather than lower because what the labels give up is what the title
   below them is read in.

   The caps are written against `.term-bar .term-dir__chip` on purpose: the
   chip's own rule sits much further down this file, so a bare `.term-dir__chip`
   here would lose to it on source order and never cap anything. */
@container (max-width: 860px) {
  .term-bar .term-dir__chip {
    max-width: 14ch;
  }

  .term-bar__actions {
    gap: 3px;
  }
}

@container (max-width: 700px) {
  .term-bar .term-dir__chip {
    max-width: 10ch;
  }

  .term-brand {
    font-size: var(--t-11);
  }

  .term-bar {
    padding: 0 var(--s-2);
    gap: var(--s-1);
  }

  .term-bar .term-activity-toggle span,
  .term-bar .term-skill-toggle span,
  .term-bar .term-stop span {
    display: none;
  }

  .term-bar .term-activity-toggle,
  .term-bar .term-skill-toggle,
  .term-bar .term-stop {
    width: 28px;
    padding: 0;
  }
}

/* Below 480 the bar is all furniture, and the title is what the operator is
   actually reading. The folder chip keeps its glyph and its tooltip and gives
   up its name, which is the last thing here that can be shortened without an
   action losing its name. */
@container (max-width: 480px) {
  .term-bar .term-dir__chip {
    max-width: 7ch;
  }
}

/* The private summary is a control — Enter or double-click edits it — so it
   carries the ring wherever it is shown. */
.term-more__working:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* A running pane is marked by its status dot, not by a coloured frame. */
.tpane[data-assigned="false"] {
  border-style: dashed;
}

.tpane__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 0;
  overflow: auto;
  padding: var(--s-6);
  text-align: center;
}

/* Waiting, not empty. */
.tpane__glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
}

.tpane__runtime {
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text);
}

.tpane__start {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--t-12);
  font-weight: 500;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.tpane__start:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--border-strong);
}

.tpane__start:disabled {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  cursor: not-allowed;
}

.tpane__reason {
  max-width: 32ch;
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--text-dim);
}

/* --- sidebar workspaces --- */

/* Top navigation items, like Dashboard, Routines, Plugins, Skills. */
.wside__nav-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-3);
}

/* The vertical sliding thumb for the sidebar navigation items.
   Scoped violet root sets --accent-solid to the brand purple, matching .prodsw__thumb. */
.wside__nav-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: var(--radius);
  background: var(--accent-solid);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--motion-normal) var(--ease-standard),
    height var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
  will-change: transform, height, opacity;
  z-index: 0;
}

.wside__nav-thumb:not([data-hidden="true"]) {
  opacity: 1;
}

.wside__nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-13);
  text-align: left;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside__nav-item:hover:not([data-current="true"]) {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.wside__nav-item[data-current="true"] {
  color: var(--accent-ink);
  font-weight: 600;
}

.wside__nav-item[data-current="true"] .wside__nav-badge {
  color: var(--accent-ink);
  opacity: 0.85;
}

.wside__nav-badge {
  margin-left: auto;
  font-size: var(--t-meta);
  color: var(--text-dim);
}

/* A hairline under the heading, so the list below reads as this section's
   contents rather than as more sidebar rows. */
.wside__label-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.wside__label-row .wside__label {
  flex: 1 1 auto;
}

/* The count is the same text step as the heading; only the weight steps back,
   so it reads as a quantity rather than a second label. */
.wside__label-count {
  margin-left: var(--s-2);
  font-weight: 400;
}

.wside__add {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
}

.wside__add:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}

.wside__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Nothing saved yet. The panel is gone — an empty sidebar is already empty,
   and boxing the emptiness just draws a frame around it. */
.wside__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-3);
  text-align: center;
}

/* The glyph as the illustration, quiet. Never a stock drawing, never an emoji. */
.wside__empty-mark {
  margin-bottom: var(--s-2);
  opacity: 0.2;
}

.wside__empty-title {
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text-muted);
}

.wside__empty-text {
  font-size: var(--t-11);
  color: var(--text-dim);
}

/* The one primary action on this screen, and the only filled purple thing on
   it. An empty state is an invitation with a single action. */
.wside__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-solid);
  color: var(--accent-ink);
  font-size: var(--t-label);
  font-weight: 500;
  transition: background var(--dur-1) var(--ease);
}

.wside__empty-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.wside__empty-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wside__workspaces {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wside__workspace,
.wside__project-row {
  position: relative;
  display: flex;
  align-items: center;
}

/* One line: dot, mark, name, then the running count flush right. The dot
   carries state, the number carries quantity; neither repeats the other. */
.wside__workspace-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: var(--s-1) var(--s-7) var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside__workspace-btn:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.wside__workspace-btn:active {
  background: var(--surface-active);
}

/* The same rail as the nav rows above it, but it is always drawn and only
   *shown* by transform: a grey stub grows in under the pointer, the full
   accent rail marks selection. Scoped to the expanded sidebar because the
   collapsed rail re-uses this ::before for the workspace's initial. */
.wside:not([data-collapsed="true"]) .wside__workspace-btn::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--rail-accent);
  height: 16px;
  content: "";
  background: var(--border-strong);
  transform: translateY(-50%) scaleY(0);
  transition:
    transform var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside:not([data-collapsed="true"]) .wside__workspace-btn:hover::before {
  transform: translateY(-50%) scaleY(0.6);
}

/* Unscoped: the raised surface marks selection in both sidebar widths. */
.wside__workspace-btn[data-selected="true"] {
  background: var(--bg-raised);
  color: var(--text-primary);
}

.wside:not([data-collapsed="true"])
  .wside__workspace-btn[data-selected="true"]::before {
  background: var(--accent);
  transform: translateY(-50%) scaleY(1);
}

.wside__workspace-btn--check {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  min-height: 48px;
}

.wside__workspace-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.wside__workspace-sub {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  padding-left: 20px;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wside__workspace-dir {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}

.wside__workspace-time {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.wside__workspace-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* The name text alone truncates, so the count badge and pulse beside it keep
   their width and the row never grows a horizontal scrollbar. */
.wside__workspace-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One 6px dot per row, leading the line, and its colour is the only thing
   that says which state the workspace is in. Idle dots keep their slot —
   invisible, not absent — so every name starts at the same offset. */
.wside__pulse {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.wside__pulse[data-state="idle"] {
  visibility: hidden;
}

.wside__pulse[data-state="running"] {
  background: var(--state-run);
  /* The one permitted flourish in the app: liveness earns its motion. */
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.wside__pulse[data-state="attention"] {
  background: var(--accent);
}

/* The running count, flush right like the reference shell's badge: a quiet
   pill that says how many terminals are alive without a second line. It
   steps aside on hover, where the row's rename and delete tools appear. */
.wside__count {
  flex: 0 0 auto;
  min-width: 18px;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-dim);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: opacity var(--dur-1) var(--ease);
}

.wside__workspace:hover .wside__count,
.wside__workspace:focus-within .wside__count,
.wside__project-row:hover .wside__count {
  opacity: 0;
}

.wside__workspace-remove {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
  opacity: 0;
  transition:
    opacity var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.wside__workspace:hover .wside__workspace-remove,
.wside__project-row:hover .wside__workspace-remove,
.wside__workspace-remove:focus-visible {
  opacity: 1;
}

.wside__workspace-remove:hover:not(:disabled) {
  color: var(--bad);
  background: var(--surface-hover);
}

/* --- narrow windows --- */

@media (max-width: 1180px) {
  /* Tiles scroll rather than wrapping into an unreadable stack. */
  .tiles {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--s-2);
  }
}

@media (max-width: 900px) {
  .wiz__body {
    gap: var(--s-6);
  }

  .walloc__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }

  .walloc__stepper {
    align-self: flex-start;
  }

  .wpanes,
  .wpresets,
  .wfacts {
    grid-template-columns: 1fr;
  }

  .wiz__step-label {
    display: none;
  }

  /* A dense pane grid will not fit side by side here: stack and scroll it. */
  .tgrid:not([data-maximized="true"]) {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .tgrid:not([data-maximized="true"]) .tpane {
    flex: 0 0 auto;
    min-height: 168px;
  }

  /* Stacked, there are no seams to drag: the saved fractions are kept for
     when the window is wide enough for the grid again. */
  .tgrid__seams {
    display: none;
  }
}

/* --- workspace session status --- */

/* A rule with a headline on it, rather than a card full of numbers. */
.tpane__error {
  max-width: 34ch;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--error-line);
  border-radius: var(--radius-sm);
  background: var(--error-soft);
  color: var(--bad-text);
  font-size: var(--t-11);
}

.tpane[data-state="failed"] {
  border-color: var(--error-line);
}

.tpane[data-state="waitingForSlot"],
.tpane[data-state="runtimeUnavailable"] {
  border-style: dashed;
}

/* A checkbox row with no warning tone: an ordinary opt-in, not a risk. */
.wack--plain {
  border-color: var(--border);
  background: var(--surface);
}

.wack--plain .wack__title {
  color: var(--text);
}


/* --- the conversational Manager ---
 *
 * A conversation is the screen, not a form on it. The timeline owns the space,
 * the composer sits at the bottom where it can always be reached, and every
 * operational control — runtime, model, autonomy, protected paths — is one
 * click away rather than in the way.
 *
 * Same graphite surfaces and single restrained accent as the rest of the
 * workspace. Motion is short and only ever confirms something arrived. */

/* The conversation owns its whole tab: the timeline scrolls inside itself so
   the composer can stay reachable at the bottom, which the panel's own
   scrolling would otherwise take away. Widened because the activity panel sits
   beside it rather than under it. */
.wpanel:has(> .mcv) {
  max-width: 1180px;
  overflow: hidden;
}

.wpanel > .mcv {
  flex: 1 1 auto;
  min-height: 0;
}

.mcv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.mcv[data-activity="true"] {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-4);
}

.mcv__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.mcv__loading {
  padding: var(--s-7) var(--s-1);
}

/* --- header --- */

.mcv__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 2px var(--s-3);
  border-bottom: 1px solid var(--border);
}

.mcv__head-identity {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--text-secondary);
}

.mcv__head-title {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mcv__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.mcv__constraints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 2px 0;
}

/* --- shared atoms --- */

.mcv__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--t-11);
  line-height: 1.5;
  white-space: nowrap;
}

.mcv__chip--role {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.mcv__chip--quiet {
  color: var(--text-dim);
  background: transparent;
}

.mcv__chip--button {
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.mcv__chip--button:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.mcv__label {
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

.mcv__quiet {
  font-size: var(--t-11);
  line-height: 1.55;
  color: var(--text-dim);
}

.mcv__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.mcv__icon-btn:hover,
.mcv__icon-btn[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border);
}

.mcv__primary,
.mcv__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--t-12);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.mcv__primary {
  border: 1px solid var(--accent-line);
  background: var(--accent);
  color: var(--accent-ink);
}

.mcv__primary:hover:not(:disabled) {
  background: var(--accent-hi);
}

.mcv__secondary {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
}

.mcv__secondary:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-active);
}

.mcv__primary:disabled,
.mcv__secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mcv__primary--small,
.mcv__secondary--tiny {
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-11);
}

.mcv__link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--t-11);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-line);
}

.mcv__error,
.mcv__warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-3) 2px 0;
  padding: var(--s-3) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--t-12);
  line-height: 1.55;
}

.mcv__error {
  border: 1px solid var(--error-line);
  background: var(--error-soft);
  color: var(--bad);
}

.mcv__warn {
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.mcv__warn > svg {
  flex: none;
  margin-top: var(--s-1);
}

/* --- timeline --- */

.mcv__timeline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 0;
  padding: var(--s-4) 2px var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* --- empty state --- */

.mcv__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin: auto;
  padding: var(--s-6) var(--s-2);
  max-width: 46ch;
  text-align: center;
  /* WebKit can retain the `from` opacity on an empty flex child after route
     restoration. This state must always be readable, so it does not animate. */
  opacity: 1;
  transform: none;
}

.mcv__empty-title {
  font-size: var(--t-20);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mcv__empty-body {
  font-size: var(--t-12);
  line-height: 1.6;
  color: var(--text-muted);
}

.mcv__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.mcv__starter {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--t-11);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.mcv__starter:hover {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.mcv__empty-note {
  max-width: 40ch;
}

/* --- the status orb ---------------------------------------------------------
   The single exception to "structure comes from hairlines, never glows". It is
   the loudest thing the app draws, which is affordable because it is only ever
   on screen when nothing else is: the moment before the first message. The
   accent is the same amber the bolt mark is, doing the same job it always does
   — saying where you are — at the one size worth looking at. */

.orb {
  --orb-size: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

/* Three layers, stacked by paint order rather than by z-index: the halo is a
   ::before and the sphere a positioned element after it, so the sphere lands on
   top without a negative z-index — which would have dropped the halo behind the
   first opaque ancestor and hidden it entirely. */
.orb__body {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--orb-size);
  height: var(--orb-size);
}

/* The halo, breathing. Slow on purpose: alive, not busy. Half again the
   sphere's size, because the middle is covered and only the ring that escapes
   past the rim is ever seen. */
.orb__body::before {
  content: "";
  position: absolute;
  inset: -24%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--accent), transparent);
  opacity: 0.28;
  filter: blur(20px);
  animation: orb-breathe 4s var(--ease) infinite;
}

/* The listening ring. Drawn in every state and animated in one, so nothing
   reflows when dictation starts. */
.orb__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-full);
  opacity: 0;
}

/* The sphere, lit from the top left. The step change reads as roundness on its
   own, so nothing here is lifted with a shadow. */
.orb__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle at 34% 28%,
    var(--surface-active),
    var(--bg-app) 74%
  );
  color: var(--accent);
}

.orb[data-state="listening"] .orb__body::after {
  animation: orb-ripple 1.6s var(--ease) infinite;
}

/* The mark alone, not the sphere: fading the sphere would let the halo show
   through it, and a translucent orb reads as broken rather than as busy. */
.orb[data-state="thinking"] .orb__core svg {
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.orb__label {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* Doing something is the state worth colouring. Standby stays quiet. */
.orb[data-state="listening"] .orb__label,
.orb[data-state="thinking"] .orb__label {
  color: var(--accent);
}

.orb__caret {
  animation: orb-blink 1.1s steps(2) infinite;
}

@keyframes orb-breathe {
  50% {
    opacity: 0.42;
    transform: scale(1.06);
  }
}

@keyframes orb-ripple {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes orb-blink {
  50% {
    opacity: 0;
  }
}

/* --- messages --- */

.mcv__msg {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 74ch;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  animation: ps-rise var(--dur-2) var(--ease) both;
}

/* The user's own words sit on the other side and in a warmer surface, so a
   long conversation reads as a conversation rather than as a log. */
.mcv__msg[data-author="user"] {
  align-self: flex-end;
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.mcv__msg[data-author="system"] {
  max-width: none;
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.mcv__msg[data-kind="proposal"] {
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
}

.mcv__msg[data-kind="proposal"] .mcv__msg-head,
.mcv__msg[data-kind="proposal"] .mcv__msg-body {
  padding: 0 2px;
}

.mcv__msg-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mcv__msg-who {
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text);
}

.mcv__msg-kind {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.mcv__msg .mcv__icon-btn {
  opacity: 0;
}

.mcv__msg:hover .mcv__icon-btn,
.mcv__msg .mcv__icon-btn:focus-visible {
  opacity: 1;
}

.mcv__msg-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.mcv__msg-text {
  font-size: var(--t-12);
  line-height: 1.62;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mcv__msg[data-author="user"] .mcv__msg-text {
  color: var(--text);
}

.mcv__code {
  max-height: 320px;
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 1.6;
  overflow: auto;
  scrollbar-width: thin;
}

.mcv__code--prompt {
  max-height: 380px;
  white-space: pre-wrap;
}

.mcv__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcv__files li {
  padding: 2px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-11);
}

.mcv__copied {
  align-self: flex-end;
  font-size: var(--t-11);
  color: var(--text-dim);
}

.mcv__thinking {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-12);
}

.mcv__pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent-hi);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

/* --- the inline proposal --- */

.mcv__proposal {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-1);
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.mcv__proposal-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

.mcv__proposal-eyebrow {
  font-size: var(--t-11);
  color: var(--text-dim);
}

.mcv__proposal-count {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mcv__reasons,
.mcv__list,
.mcv__blockers {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-12);
  line-height: 1.58;
  color: var(--text-muted);
}

.mcv__reasons li,
.mcv__list li {
  padding-left: var(--s-4);
  position: relative;
}

.mcv__reasons li::before,
.mcv__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.mcv__blockers li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--warn);
}

.mcv__agents {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcv__agent {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.mcv__agent-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mcv__agent-title {
  font-size: var(--t-12);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcv__agent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.mcv__agent-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-1);
  border-top: 1px solid var(--border);
  animation: ps-rise var(--dur-1) var(--ease) both;
}

.mcv__detail-text {
  font-size: var(--t-12);
  line-height: 1.58;
  color: var(--text-muted);
}

.mcv__waits {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-11);
  color: var(--text-dim);
}

.mcv__details > summary {
  cursor: pointer;
  font-size: var(--t-11);
  color: var(--text-muted);
  list-style: none;
}

.mcv__details > summary::-webkit-details-marker {
  display: none;
}

.mcv__details > summary::before {
  content: "▸ ";
  color: var(--text-dim);
}

.mcv__details[open] > summary::before {
  content: "▾ ";
}

.mcv__details > * {
  margin-top: var(--s-2);
}

.mcv__ack {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  font-size: var(--t-12);
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

.mcv__ack input {
  margin-top: 2px;
  accent-color: var(--accent);
}

.mcv__proposal-actions,
.mcv__question-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-1);
}

/* --- questions --- */

.mcv__questions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

.mcv__question {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-12);
  line-height: 1.5;
  color: var(--text-muted);
}

.mcv__question textarea {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-12);
  resize: vertical;
}

/* --- composer --- */

.mcv__composer {
  flex: none;
  padding: var(--s-3) 2px 2px;
  background: var(--bg-app);
}

.mcv__composer-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.mcv__composer-box:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mcv__input {
  width: 100%;
  min-height: 24px;
  max-height: 220px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--t-13);
  line-height: 1.6;
  resize: none;
  outline: none;
  overflow-y: auto;
  scrollbar-width: thin;
}

.mcv__input::placeholder {
  color: var(--text-dim);
}

.mcv__composer-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.mcv__send {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--t-12);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.mcv__send:hover:not(:disabled) {
  background: var(--accent-hi);
}

.mcv__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mcv__send--stop {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad);
}

.mcv__send--stop:hover {
  background: var(--error-line);
}

.mcv__manual {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0 2px var(--s-2);
}

/* --- agent activity --- */

.mcv__activity {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  padding: 0 0 var(--s-2) var(--s-4);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
  animation: ps-rise var(--dur-2) var(--ease) both;
}

.mcv__activity-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  position: sticky;
  top: 0;
  padding-bottom: var(--s-2);
  background: var(--bg);
  z-index: 1;
}

.mcv__activity-title {
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mcv__activity-empty {
  padding: var(--s-3) 0;
}

.mcv__activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcv__activity-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease);
}

.mcv__activity-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.mcv__activity-name {
  font-size: var(--t-12);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcv__activity-state {
  font-size: var(--t-11);
  color: var(--text-dim);
  white-space: nowrap;
}

.mcv__activity-task,
.mcv__activity-detail {
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--text-muted);
}

.mcv__activity-detail {
  color: var(--text-dim);
}

.mcv__activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.mcv__activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

/* Colour is never the only signal: every row spells its state out beside it. */
.mcv__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.mcv__activity-row[data-state="running"] {
  border-color: var(--border-strong);
}

.mcv__activity-row[data-state="running"] .mcv__dot,
.mcv__activity-row[data-state="planning"] .mcv__dot {
  background: var(--accent-hi);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.mcv__activity-row[data-state="promptDispatched"] .mcv__dot {
  background: var(--accent);
}

.mcv__activity-row[data-state="completed"] .mcv__dot {
  background: var(--ok);
}

.mcv__activity-row[data-state="awaitingVerification"] .mcv__dot,
.mcv__activity-row[data-state="needsAttention"] .mcv__dot,
.mcv__activity-row[data-state="awaitingApproval"] .mcv__dot,
.mcv__activity-row[data-state="awaitingPermission"] .mcv__dot {
  background: var(--warn);
}

.mcv__activity-row[data-state="failed"] {
  border-color: var(--error-line);
}

.mcv__activity-row[data-state="failed"] .mcv__dot {
  background: var(--bad);
}

.mcv__dot[data-ready="ready"] {
  background: var(--ok);
}

.mcv__dot[data-ready="authenticationRequired"] {
  background: var(--warn);
}

/* --- settings --- */

.mcv__scrim {
  position: fixed;
  inset: 0;
  border: 0;
  background: var(--scrim);
  cursor: default;
  z-index: 40;
  animation: ps-fade var(--dur-1) var(--ease) both;
}

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

.mcv__settings {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  z-index: 41;
  animation: ps-slide var(--dur-2) var(--ease) both;
}

@keyframes ps-slide {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
}

.mcv__settings-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--border);
}

.mcv__settings-title {
  font-size: var(--t-13);
  font-weight: 500;
}

.mcv__settings-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  overflow-y: auto;
  scrollbar-width: thin;
}

.mcv__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.mcv__field > legend,
.mcv__field-label {
  padding: 0;
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--text-dim);
}

.mcv__field select,
.mcv__field textarea {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-12);
}

.mcv__field textarea {
  resize: vertical;
  font-family: var(--mono);
  font-size: var(--t-11);
}

.mcv__field select:focus,
.mcv__field textarea:focus {
  border-color: var(--border-strong);
  outline: none;
}

.mcv__segmented {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.mcv__segment {
  flex: 1 1 0;
  padding: var(--s-2) var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--t-11);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.mcv__segment[aria-pressed="true"] {
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.mcv__runtimes {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-11);
  color: var(--text-muted);
}

.mcv__runtimes li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* --- narrow windows ---
 *
 * The activity panel becomes a drawer over the conversation, and the composer
 * keeps every control it had. Nothing overflows sideways: code blocks scroll
 * inside themselves rather than widening the page. */

@media (max-width: 1000px) {
  .mcv[data-activity="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .mcv__activity {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 92vw);
    padding: var(--s-4);
    background: var(--surface);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
    z-index: 39;
  }

  .mcv__activity-head {
    background: var(--surface);
  }

  .mcv__msg {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .mcv__composer-bar {
    flex-wrap: wrap;
  }

  .mcv__chip--button {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- inline clarification ---
 *
 * A question asked in the conversation is answered in the conversation. Cards
 * rather than a modal, because the point is that the user does not lose sight
 * of what they asked for while they answer. Same graphite surfaces; the warm
 * accent marks the one that stops everything until it is answered. */

.mcv__question-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 74ch;
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  animation: ps-rise var(--dur-2) var(--ease) both;
}

.mcv__question-card[data-blocking="true"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.mcv__question-card[data-answered="true"] {
  opacity: 0.62;
}

.mcv__question-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.mcv__question-title {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.mcv__options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcv__option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.mcv__option:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
}

.mcv__option:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mcv__option[aria-checked="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.mcv__option:disabled {
  cursor: default;
  opacity: 0.55;
}

/* The mark is square for "pick several" and round for "pick one", so the
   arity is visible before the first click rather than after it. */
.mcv__option-mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.mcv__options[role="group"] .mcv__option-mark {
  border-radius: var(--radius-xs);
}

.mcv__option[aria-checked="true"] .mcv__option-mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-app);
}

.mcv__options[role="group"] .mcv__option[aria-checked="true"] .mcv__option-mark {
  background: var(--accent-hi);
}

.mcv__option-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.mcv__option-label {
  font-size: var(--t-12);
  line-height: 1.45;
}

.mcv__option-note {
  font-size: var(--t-11);
  line-height: 1.45;
  color: var(--text-dim);
}

.mcv__custom {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.mcv__custom textarea {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--t-12);
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--dur-1) var(--ease);
}

.mcv__custom textarea:focus {
  border-color: var(--border-strong);
  outline: none;
}

.mcv__question-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-11);
  color: var(--warn);
}

/* What approving does to the workspace, said before the button is pressed. */
.mcv__will-do {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* A criterion only a person can judge, asked one at a time. */
.mcv__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.mcv__confirm-note {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.mcv__confirm-note input {
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
}

/* ==========================================================================
   Dock — the editor, browser and canvas beside the terminals.

   It takes width from the pane area rather than floating over it: the point of
   the dock is reading a file while an agent works on it, and a panel that
   covered the panes would take that away.
   ========================================================================== */

.wmain__area {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.wmain__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Dock focus is the same temporary view mode as a maximized terminal: the
   workspace stays mounted, but the other surface gives the focused one the
   whole working area. The saved dock width is intentionally left untouched so
   restoring the dock returns to the previous split. */
.wmain__area[data-dock-maximized="true"] .wmain__content {
  display: none;
}

.squad-shell[data-dock-maximized="true"] > .squad {
  display: none;
}

.dock {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 0 auto;
  /* Top edge matches .app__main, .wside and .wmain__grid — the dock is one of
     the panels beside them, so it hangs off the chrome by the same amount. */
  margin: var(--s-1) 15px 15px 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transform: translateX(0);
  transition:
    width var(--dur-enter) var(--ease-enter),
    flex-grow var(--dur-enter) var(--ease-enter),
    margin-right var(--dur-enter) var(--ease-enter),
    margin-left var(--dur-enter) var(--ease-enter),
    transform var(--dur-enter) var(--ease-enter);
}

.dock[data-maximized="true"] {
  flex: 1 1 0;
  width: auto;
  margin-left: 15px;
}

.dock[data-open="false"] {
  flex: 0 0 0;
  width: 0;
  margin-right: 0;
  margin-left: 0;
  transform: translateX(100%);
  pointer-events: none;
}

.is-resizing .dock {
  transition: none;
}

.dock[data-maximized="true"] .dock__grip {
  display: none;
}

/* The separator is a hairline you can actually hit: 9px of target around 1px
   of line, which is the difference between a resizable panel and a fiddly one. */
.dock__grip {
  position: absolute;
  /* The dock clips its panel contents, so keep the whole hit target inside
     the frame and draw the active hairline on the shared left edge. */
  inset: 0 auto 0 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
}

.dock__grip:hover::after,
.dock__grip:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--accent-line);
}

.dock__grip:focus-visible {
  outline: none;
}

.dock__head {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0 var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

.dock__tabs {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.dock__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dock__tab:hover {
  color: var(--text-secondary);
}

.dock__tab[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.dock__alpha {
  font-size: var(--t-label);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dock__maximize,
.dock__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.dock__maximize:hover,
.dock__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.dock__maximize[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.dock__panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Code — the built-in editor.
   ========================================================================== */

.code {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.code__bar {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

.code__project {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code__spacer {
  flex: 1 1 auto;
}

.code__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.code__icon:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.code__error {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--error-soft);
  border-bottom: 1px solid var(--error-line);
  color: var(--bad-text);
  font-size: var(--t-meta);
}

.code__dismiss {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--t-meta);
  cursor: pointer;
  text-decoration: underline;
  flex: 0 0 auto;
}

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

.code__tree {
  width: 200px;
  flex: 0 0 auto;
  overflow: auto;
  border-right: 1px solid var(--border-subtle);
  padding: var(--s-1) 0;
}

.code__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.code__row {
  display: flex;
  align-items: center;
}

.code__entry {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 3px;
  padding-right: var(--s-1);
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--t-meta);
  text-align: left;
  cursor: pointer;
}

.code__entry:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.code__entry[data-open="true"] {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.code__chev {
  display: inline-flex;
  width: 12px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.code__glyph {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

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

/* Row actions stay out of the way until the row is under the pointer or holds
   focus, so the tree reads as names rather than as a wall of buttons. */
.code__rowactions {
  display: flex;
  gap: 2px;
  padding-right: var(--s-1);
  opacity: 0;
  flex: 0 0 auto;
  transition: opacity 0.15s ease;
}

.code__row:hover .code__rowactions,
.code__row:focus-within .code__rowactions {
  opacity: 1;
}

.code__new {
  padding: 2px var(--s-2);
}

.code__name {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--t-meta);
  font-family: inherit;
  padding: 2px var(--s-1);
}

.code__name:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: -1px;
}

.code__hint {
  margin: var(--s-2) var(--s-3);
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

.code__pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--bg-app);
}

.code__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  flex: 0 0 auto;
}

.code__tab {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  flex: 0 0 auto;
}

.code__tab[data-active="true"] {
  border-bottom-color: var(--accent);
}

.code__tabname {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1) var(--s-2) var(--s-2);
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  cursor: pointer;
  white-space: nowrap;
}

.code__tab[data-active="true"] .code__tabname {
  color: var(--text-primary);
}

.code__dirty {
  color: var(--accent);
  font-size: var(--t-micro);
  line-height: 1;
}

.code__tabclose {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  background: none;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
}

.code__tabclose:hover {
  color: var(--text-primary);
}

.code__save {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  padding: 3px var(--s-2);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-label);
  cursor: pointer;
  flex: 0 0 auto;
}

.code__save:disabled {
  background: none;
  color: var(--text-tertiary);
  cursor: default;
}

.code__save kbd {
  font-family: inherit;
  opacity: 0.7;
}

.code__editor {
  flex: 1 1 auto;
  min-height: 0;
}

.code__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: 1 1 auto;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.code__empty p {
  margin: 0;
}

.code__emptyhint {
  font-size: var(--t-label);
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* ==========================================================================
   Browser — a real page beside the terminals.

   The page itself is a child webview drawn over `.brow__stage` by the OS, so
   nothing here styles the page. This is the chrome around a hole.
   ========================================================================== */

/* Kept mounted while another dock tab shows, the same way a terminal is. */
.dock__keep {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dock__keep[hidden] {
  display: none;
}

.brow {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.brow__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  flex: 0 0 auto;
}

.brow__tab {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  max-width: 180px;
  flex: 0 0 auto;
}

.brow__tab[data-active="true"] {
  border-bottom-color: var(--accent);
}

.brow__tabname {
  padding: var(--s-2) var(--s-1) var(--s-2) var(--s-2);
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.brow__tab[data-active="true"] .brow__tabname {
  color: var(--text-primary);
}

.brow__tabclose,
.brow__newtab {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-1);
  background: none;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.brow__tabclose:hover,
.brow__newtab:hover {
  color: var(--text-primary);
}

.brow__bar {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

.brow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.brow__icon:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.brow__icon:disabled {
  opacity: 0.4;
  cursor: default;
}

.brow__icon--flip svg {
  transform: rotate(180deg);
}

.brow__form {
  flex: 1 1 auto;
  min-width: 0;
}

.brow__address {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--t-meta);
  padding: 4px var(--s-2);
}

.brow__address:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: -1px;
  border-color: var(--accent-line);
}

.brow__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-2);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--t-label);
  cursor: pointer;
  flex: 0 0 auto;
}

.brow__pick:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The one place the accent appears in this panel: the picker is armed and the
   next click in the page will be captured. */
.brow__pick[data-on="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

.brow__error {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--error-soft);
  border-bottom: 1px solid var(--error-line);
  color: var(--bad-text);
  font-size: var(--t-meta);
}

.brow__stage {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-app);
}

.brow__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 100%;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  text-align: center;
  padding: var(--s-5);
}

.brow__empty p {
  margin: 0;
}

.brow__start {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}

.brow__start:hover {
  border-color: var(--accent-line);
  color: var(--text-primary);
}

/* ==========================================================================
   Design composer — what you say about the element you picked.
   ========================================================================== */

.dcomp {
  position: absolute;
  inset: auto var(--s-3) var(--s-3) var(--s-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.dcomp__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.dcomp__selector {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-label);
  color: var(--accent-hi);
}

.dcomp__close {
  background: none;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.dcomp__snippet {
  margin: 0;
  max-height: 76px;
  overflow: auto;
  padding: var(--s-2);
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-tertiary);
  font-size: var(--t-label);
  white-space: pre-wrap;
  word-break: break-all;
}

.dcomp__input {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--t-meta);
  padding: var(--s-2);
  resize: vertical;
}

.dcomp__input:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: -1px;
}

.dcomp__attached {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-label);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcomp__unattach {
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-size: var(--t-label);
  text-decoration: underline;
  cursor: pointer;
  flex: 0 0 auto;
}

.dcomp__foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.dcomp__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-2);
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--t-label);
  cursor: pointer;
}

.dcomp__target {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--t-label);
  padding: 4px var(--s-2);
}

.dcomp__send {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-3);
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-label);
  cursor: pointer;
  flex: 0 0 auto;
}

.dcomp__send:disabled {
  background: none;
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  cursor: default;
}

/* ==========================================================================
   Notification bell — a pane stopped talking.
   ========================================================================== */

/* The anchor the panel hangs from. It has to be the wrapper rather than the
   button, because the button is a grid cell and the panel is not in it. */
.bell {
  position: relative;
  display: flex;
  align-items: center;
}

.bell__btn {
  position: relative;
}

/* The icon remounts on every arriving notice (keyed by the pulse), so the
   shake always replays from the start rather than needing animation resets. */
.bell__icon {
  display: inline-flex;
}

.bell__icon[data-ring="true"] {
  animation: bell-ring 0.7s var(--ease-standard);
  /* A bell swings from its crown, not its centre. */
  transform-origin: 50% 15%;
}

@keyframes bell-ring {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bell__icon[data-ring="true"] {
    animation: none;
  }
}

/* The unread dot. It sits on the button's corner rather than the icon, so it
   does not shake with the bell and stays put as a steady flag. */
.bell__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--state-error);
  /* A ring of the titlebar colour lifts it off the bell stroke behind it. */
  box-shadow: 0 0 0 2px var(--bg-surface);
  pointer-events: none;
}

/* Right-aligned: the cluster is against the right edge, and a left-aligned
   panel would run off the window. */
.bell__panel {
  position: absolute;
  top: calc(100% + var(--s-1));
  right: 0;
  /* Above the working area's own overlays, same as the add-pane menu. */
  z-index: 50;
  width: 320px;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  animation: sbar-pop var(--motion-normal) var(--ease-standard);
  cursor: default;
}

.bell__head {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  line-height: 1.4;
}

.bell__empty {
  margin: 0;
  padding: var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.bell__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* A squad settles together, so the list can grow; the panel scrolls rather
     than the window losing its view to a pile of notices. */
  max-height: 320px;
  overflow-y: auto;
}

.bell__row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border-radius: var(--radius-sm);
  /* The left border is the only non-text carrier of the kind, the same way
     the old toasts carried it. */
  border-left: 2px solid var(--border-subtle);
  transition: background var(--motion-fast) var(--ease-standard);
}

.bell__row:hover {
  background: var(--bg-hover);
}

.bell__row[data-kind="completed"] { border-left-color: var(--ok-text); }
.bell__row[data-kind="ended"] { border-left-color: var(--text-tertiary); }
.bell__row[data-kind="stopped"] { border-left-color: var(--text-tertiary-mark); }
.bell__row[data-kind="stalled"] { border-left-color: var(--bad-text); }
.bell__row[data-kind="failed"] { border-left-color: var(--bad-text); }
.bell__row[data-kind="attention"] { border-left-color: var(--warn-text); }

.bell__jump {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-2);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--t-label);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.bell__message {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-2);
  color: var(--text-primary);
  font-size: var(--t-label);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bell__jump:focus-visible {
  background: var(--bg-hover);
}

.bell__dismiss {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--s-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.bell__dismiss:hover,
.bell__dismiss:focus-visible {
  color: var(--text-primary);
}

/* The pane a jump landed on. Two pulses of the accent hairline, then gone —
   long enough to find it in a grid of twelve, short enough not to nag. */
.tpane[data-flash="true"] {
  animation: pane-flash 0.7s ease 2;
}

@keyframes pane-flash {
  50% {
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tpane[data-flash="true"] {
    animation: none;
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

.notif {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.notif__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-body);
  color: var(--text-secondary);
}

.notif__label {
  min-width: 60px;
}

.notif__value {
  min-width: 42px;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

/* ==========================================================================
   Canvas — a board to park thinking on. Alpha, and scoped to say so.
   ========================================================================== */

.canv {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.canv__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

.canv__label {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.canv__alpha {
  font-size: var(--t-label);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.canv__spacer {
  flex: 1 1 auto;
}

.canv__zoom {
  font-size: var(--t-label);
  color: var(--text-tertiary);
  min-width: 38px;
  text-align: right;
}

.canv__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  font-size: var(--t-label);
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

.canv__icon:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.canv__surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  background-color: var(--bg-app);
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--border-subtle) 1px,
    transparent 0
  );
}

.canv__surface:active {
  cursor: grabbing;
}

.canv__note {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  width: 160px;
  min-height: 72px;
  padding: var(--s-2);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: grab;
}

.canv__note:active {
  cursor: grabbing;
}

.canv__body {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.canv__text {
  width: 100%;
  min-height: 56px;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--t-meta);
  resize: none;
}

.canv__text:focus-visible {
  outline: none;
}

.canv__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  padding: 2px;
  background: none;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.canv__note:hover .canv__remove,
.canv__note:focus-within .canv__remove {
  opacity: 1;
}

.canv__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  pointer-events: none;
}

/* ==========================================================================
   Simulator — iOS device beside Code. Capture is native; this is chrome.
   ========================================================================== */

.sim {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.sim__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

.sim__select {
  max-width: 42%;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-size: var(--t-meta);
}

.sim__select--profile {
  max-width: 28%;
}

.sim__state {
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.sim__state--on {
  color: var(--text-primary);
}

.sim__spacer {
  flex: 1 1 auto;
}

.sim__metrics {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.sim__error,
.sim__warn {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-meta);
}

.sim__error {
  background: var(--error-soft);
  color: var(--bad-text);
}

.sim__warn {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.sim__setup,
.sim__caps,
.sim__doctor,
.sim__compare {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
}

.sim__caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.sim__caps label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sim__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-app);
  outline: none;
}

.sim__frame {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.sim__empty {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  padding: var(--s-4);
  text-align: center;
}

.sim__logs {
  max-height: 120px;
  overflow: auto;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-meta);
  background: var(--bg-raised);
}

.sim__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-2);
  border-top: 1px solid var(--border-subtle);
}

.sim__controls button {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
}

.sim__controls button:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.sim__controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.sim__icon {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sim__compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.sim__compare span {
  display: block;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-label);
}

/* Dictation. Present only when the platform has an engine for it, so this
   never styles a button that cannot work. */
.mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  cursor: pointer;
  flex: 0 0 auto;
}

.mic:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.mic:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Listening is a state, so it gets the accent and a pulse — this is the one
   control in the app that is recording something. */
.mic[data-on="true"] {
  background: var(--accent-soft);
  color: var(--accent-hi);
  animation: mic-pulse 1.4s ease-in-out infinite;
}

@keyframes mic-pulse {
  50% {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mic[data-on="true"] {
    animation: none;
  }
}

.mic__error {
  font-size: var(--t-label);
  color: var(--bad-text);
}

/* ==========================================================================
   Command palette — ⌘K.
   ========================================================================== */

.pal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  background: rgba(13, 14, 16, 0.6);
}

.pal__panel {
  width: min(560px, calc(100vw - var(--s-7)));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.pal__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

.pal__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--t-card);
}

.pal__input:focus-visible {
  outline: none;
}

.pal__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-1) 0;
}

.pal__heading {
  margin: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.pal__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
}

/* One selected row, whether it got there by pointer or by arrow key — two
   different highlights for the same idea would be one too many. */
.pal__row[data-selected="true"] {
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--accent);
}

.pal__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pal__detail {
  font-size: var(--t-label);
  color: var(--text-tertiary);
  flex: 0 0 auto;
}

.pal__empty {
  margin: 0;
  padding: var(--s-4) var(--s-3);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  text-align: center;
}

.pal__hint {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--t-label);
  flex: 0 0 auto;
}

.pal__hint kbd {
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0 4px;
}

/* How many panes have an agent. The label carries the meaning; the bar is
   reinforcement, which is why "No agents yet" is words and not an empty
   track the user has to interpret. */
.walloc-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.walloc-bar__fraction {
  flex: 0 0 auto;
  color: var(--text);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.walloc-bar__track {
  flex: 1 1 auto;
  height: 4px;
  background: var(--bg-app);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.walloc-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  transition:
    width var(--motion-normal) var(--ease),
    background-color var(--motion-fast) var(--ease);
}

/* The accent appears only when the grid is actually ready to launch. */
.walloc-bar__fill[data-complete="true"] {
  background: var(--accent);
}

.walloc-bar__label {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.walloc-bar__label[data-empty="true"] {
  color: var(--text-tertiary);
}

/* The crash screen. It only ever renders when the app tree threw, so it
   depends on nothing but tokens and its own layout. */
.crash {
  display: grid;
  place-items: center;
  height: 100vh;
  padding: var(--s-5);
  background: var(--bg-app);
}

.crash__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: min(520px, 100%);
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.crash__title {
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.crash__note {
  font-size: var(--t-12);
  line-height: 1.6;
  color: var(--text-secondary);
}

.crash__detail {
  overflow-x: auto;
  padding: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  color: var(--bad-text);
  font-family: var(--mono);
  font-size: var(--t-11);
  white-space: pre-wrap;
}

.crash__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* ==========================================================================
   Squad wizard — the unified and streamlined swarm setup surface.

   Chrome, footer and step rail are the workspace wizard's (`.wiz*`, `.wstep*`,
   `.wpick*`, `.wfield*`): one wizard shape for the app, with sleek BridgeMind-inspired
   engine grid, AI prompt generation banner, clean brief, and presets.
   ========================================================================== */

.sqwiz__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.sqwiz__identity {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.sqwiz__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  flex-shrink: 0;
}

.sqwiz__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sqwiz__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  color: var(--text-primary);
}

.sqwiz__subtitle {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqwiz__body {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* --- Create with AI Banner --- */
.sqai-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.sqai-card:hover {
  border-color: var(--line-control);
}

.sqai-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  user-select: none;
}

.sqai-card__lead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.sqai-card__spark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  flex-shrink: 0;
}

.sqai-card__title {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.sqai-card__copy {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-dim);
}

.sqai-card__action {
  display: grid;
  place-items: center;
  color: var(--text-dim);
  flex-shrink: 0;
  padding-left: var(--s-2);
}

.sqai-card__drawer {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sqai-card__input-bar {
  display: flex;
  gap: var(--s-2);
}

.sqai-card__input {
  flex: 1 1 auto;
  min-height: 36px;
  font-size: var(--t-label);
}

.sqai-card__gen-btn {
  padding: 0 var(--s-4);
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-app);
  font-size: var(--t-label);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-1) var(--ease);
}

.sqai-card__gen-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.sqai-card__gen-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sqai-card__templates {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sqai-card__templates-label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.sqai-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.sqai-card__chip {
  padding: 3px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.sqai-card__chip:hover {
  border-color: var(--line-control);
  color: var(--text-primary);
}

/* --- Section Layouts --- */
.sqsection {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sqsection__title {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-secondary);
}

.sqsection__hint {
  margin: 0;
  font-size: var(--t-micro);
  color: var(--text-dim);
}

/* --- Name Input with Icon --- */
.sqname-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sqname-input-icon {
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  pointer-events: none;
}

.sqname-input {
  width: 100%;
  min-height: 40px;
  padding-left: 36px;
  padding-right: 12px;
  font-size: var(--t-body);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.sqname-input:focus {
  border-color: var(--line-control);
  background: var(--bg-raised);
}

/* --- Powered By: 12-Engine Grid --- */
.sqroster-layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.sqengine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

@media (max-width: 680px) {
  .sqengine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .sqengine-grid {
    grid-template-columns: 1fr;
  }
}

.sqengine-card {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 48px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.sqengine-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.sqengine-card[data-active="true"] {
  border-color: var(--accent-hover);
  background: var(--surface-hover);
}

.sqengine-card[data-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

.sqengine-card:disabled:hover {
  border-color: var(--border-subtle);
  background: var(--surface);
}

.sqengine-card__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sqengine-card__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.sqengine-card__name {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sqengine-card__vendor {
  font-size: var(--t-micro);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sqengine-card__check {
  display: grid;
  place-items: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.sqengine-hint {
  margin-top: var(--s-2);
  margin-bottom: 0;
}

/* --- Per-Agent Accordion --- */
.sqroster-fold {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sqroster-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.sqroster-fold__summary::-webkit-details-marker {
  display: none;
}

.sqroster-fold__summary svg {
  transition: transform var(--dur-1) var(--ease);
}

.sqroster-fold[open] .sqroster-fold__summary svg {
  transform: rotate(90deg);
}

/* --- Directory & Context Cluster --- */
.sqdir-ctx-cluster {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.sqdir-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sqdir-card__icon {
  display: grid;
  place-items: center;
  color: var(--text-dim);
  flex-shrink: 0;
}

.sqdir-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sqdir-card__name {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.sqdir-card__path {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqdir-card__btn {
  padding: 4px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--t-meta);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.sqdir-card__btn:hover {
  background: var(--surface-hover);
  border-color: var(--line-control);
}

.sqdir-note {
  margin-top: var(--s-2);
}

/* --- Footer in Swarm Wizard --- */
.sqwiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.sqwiz__foot-note {
  font-size: var(--t-meta);
  color: var(--text-dim);
  min-width: 0;
  flex: 1 1 auto;
}

.sqwiz__foot-hint {
  color: var(--text-tertiary-mark);
  font-size: var(--t-meta);
}

.sqwiz__foot-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.sqwiz__cancel-btn {
  min-height: 34px;
}

.sqwiz__launch-btn {
  min-height: 34px;
  padding: 0 var(--s-4);
  font-weight: 600;
}

/* --- size ---
   One row of three, each tile self-describing: the count it will spawn, the
   name, and the shape of the roster those numbers buy — one glyph per role,
   tallied, in the same shapes the board and chat feed use. */

.sqsizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.sqsize {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.sqsize:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.sqsize:active {
  transform: scale(0.98);
}

/* Selection is the one thing on this screen the accent is allowed to say,
   and it says it with an edge, not a fill. */
.sqsize[data-active="true"] {
  border-color: var(--accent-hover);
  background: var(--surface-hover);
}

.sqsize__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
}

.sqsize__count {
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-title);
  line-height: 1;
  color: var(--text-secondary);
}

/* The count carries the choice, so it is the part that lights up. */
.sqsize[data-active="true"] .sqsize__count {
  color: var(--text-primary);
}

.sqsize__name {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--text-dim);
}

.sqsize[data-active="true"] .sqsize__name {
  color: var(--text-secondary);
}

.sqsize__shape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.sqsize__slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.sqsize__slot svg {
  color: var(--text-muted);
}

.sqsize[data-active="true"] .sqsize__slot svg {
  color: var(--text-primary);
}

.sqsizes__note {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-dim);
}

/* --- the agents ---
   Rows divided by hairlines rather than boxed five times: the section is one
   list, and a box around every member made five cards where one table was
   meant. The value control carries the affordance a box used to fake. */

.sqroster {
  display: flex;
  flex-direction: column;
  margin: var(--s-1) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}

.sqagent {
  border-bottom: 1px solid var(--border-subtle);
}

/* The whole row is the disclosure control, so the target is the row and not a
   12px chevron at the end of it. */
.sqagent__head {
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  margin: 0 calc(var(--s-2) * -1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-1) var(--ease);
}

.sqagent__head::-webkit-details-marker {
  display: none;
}

.sqagent__head:hover {
  background: var(--surface-hover);
}

.sqagent__head:focus-visible {
  outline: none;
}

.sqagent__index {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-dim);
}

/* A tinted tile, not a coloured one. Role is nominal data and this app spends
   hue on state, so the glyph's shape carries which role it is — the same shape
   it has on the graph and in the chat feed. */
.sqagent__glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-muted);
}

.sqagent[open] .sqagent__glyph {
  background: var(--accent-quiet);
  color: var(--text-primary);
}

.sqagent__about {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sqagent__role {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--text-primary);
}

/* Monospaced because it is an identifier the agents use, not a label the UI
   made up for this row. */
.sqagent__handle {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
}

.sqagent__duty {
  overflow: hidden;
  font-size: var(--t-meta);
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The collapsed choice as a control: bordered, filled like a field, with its
   own chevron — so a shut row still reads as something that opens a menu,
   which floating text never did. */
.sqagent__value {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-label);
  white-space: nowrap;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.sqagent__value svg {
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: transform var(--dur-1) var(--ease);
}

.sqagent__head:hover .sqagent__value {
  border-color: var(--line-control);
  color: var(--text);
}

/* ChevronIcon points right; open, it points down into the options. */
.sqagent[open] .sqagent__value svg {
  transform: rotate(90deg);
}

.sqagent__head[data-problem="true"] .sqagent__value {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

/* Indented past the number and glyph so the options line up under the name of
   the agent they belong to. The sum is the head's own columns, spelled out
   rather than measured, so changing that grid moves this with it. */
.sqagent__body {
  padding: var(--s-1) var(--s-2) var(--s-4)
    calc(var(--s-2) + 18px + var(--s-3) + 28px + var(--s-3));
  animation: sq-agent-open var(--dur-2) var(--ease-enter);
}

@keyframes sq-agent-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Options as rows, not chips: one per CLI, radio-marked, with the state the
   detector actually confirmed beside the name. A chip row made three CLIs
   look like tags; this reads as the menu it is. */
.sqagent__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sqagent__option {
  display: grid;
  grid-template-columns: 14px minmax(0, auto) 1fr;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-label);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.sqagent__option:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* The chosen row keeps a quiet plate, so scanning five closed menus for what
   changed needs no colour at all. */
.sqagent__option[data-active="true"] {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.sqagent__option-dot {
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-full);
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.sqagent__option:hover .sqagent__option-dot {
  border-color: var(--text-dim);
}

.sqagent__option[data-active="true"] .sqagent__option-dot {
  border-color: var(--text-primary);
  background: var(--text-primary);
}

.sqagent__option-note {
  justify-self: end;
  font-size: var(--t-micro);
  color: var(--ok-text);
}

/* A discovered CLI is offered, not vouched for: the row says so in the note,
   and the dot stays hollow even when active. */
.sqagent__option[data-discovered="true"] .sqagent__option-note {
  color: var(--text-tertiary-mark);
}

/* Divider label between the agents ProofStack knows and the ones it merely
   found on this machine. */
.sqagent__option-subhead {
  margin-top: var(--s-2);
  padding: 0 var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary-mark);
}

/* A machine can carry a great many discovered CLIs; the per-agent menu scrolls
   rather than stretching the roster past the bottom of the window. */
.sqagent__discovered {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.sqagent__problem {
  margin: var(--s-2) 0 0;
  font-size: var(--t-micro);
  color: var(--warn-text);
}

/* --- the "not ready" fold ---
   The wall of grey text became a folded line: reachable for the rare audit,
   invisible the other ninety-nine times. */

.squnready {
  margin-top: var(--s-2);
  font-size: var(--t-meta);
}

.squnready summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px var(--s-1);
  margin-left: calc(var(--s-1) * -1);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-1) var(--ease);
}

.squnready summary::-webkit-details-marker {
  display: none;
}

.squnready summary:hover {
  color: var(--text-secondary);
}

.squnready summary svg {
  transition: transform var(--dur-1) var(--ease);
}

.squnready[open] summary svg {
  transform: rotate(90deg);
}

.squnready__list,
.squnready__hint {
  margin: 0 0 0 var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
}

.squnready__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px var(--s-4);
  padding-top: var(--s-1);
  padding-bottom: var(--s-1);
  list-style: none;
}

.squnready__list li {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--text-dim);
}

.squnready__hint {
  padding-bottom: 2px;
  font-size: var(--t-micro);
  color: var(--text-tertiary-mark);
}

/* --- discovered CLIs ---
   Everything the machine scan found that no manifest claims. Folded under the
   known agents, and scrollable, because a machine can have hundreds of
   executables and the roster must stay readable whatever it finds. */

.sqdiscovered {
  margin-top: var(--s-2);
  font-size: var(--t-meta);
}

.sqdiscovered summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px var(--s-1);
  margin-left: calc(var(--s-1) * -1);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-1) var(--ease);
}

.sqdiscovered summary::-webkit-details-marker {
  display: none;
}

.sqdiscovered summary:hover {
  color: var(--text-secondary);
}

.sqdiscovered summary svg {
  transition: transform var(--dur-1) var(--ease);
}

.sqdiscovered[open] summary svg {
  transform: rotate(90deg);
}

.sqdiscovered__hint {
  margin: 0 0 var(--s-1) var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
  padding-bottom: 2px;
  font-size: var(--t-micro);
  color: var(--text-tertiary-mark);
}

.sqdiscovered__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  max-height: 220px;
  overflow-y: auto;
  margin-left: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-left: 1px solid var(--border-subtle);
}

.sqdiscovered__option {
  min-height: 26px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.sqdiscovered__option:hover,
.sqdiscovered__option:focus-visible {
  border-color: var(--line-control);
  color: var(--text);
}

.sqdiscovered__option[data-active="true"] {
  border-color: var(--accent-hover);
  background: var(--surface-hover);
  color: var(--text-primary);
}

.sqdiscovered__option[data-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.sqdiscovered__option:disabled:hover {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--text-dim);
}

/* --- mission ---
   The brief gets the room of a page: taller field, calmer chrome under it. */

.sqmission {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* One grid cell holds both layers, so the chip layer is exactly the size of
   the textarea however the textarea is resized. */
.sqmission__field {
  position: relative;
  display: grid;
}

.sqmission__ghost,
.sqmission__input {
  grid-area: 1 / 1;
  /* Both stated rather than left to grid stretch: a textarea sizes itself from
     `cols` when it is allowed to, and one layer wider than the other wraps the
     text differently and slides every chip off the path it belongs to. */
  width: 100%;
  min-height: 220px;
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* Reserved in both layers, so a scrollbar appearing cannot re-wrap one of
     them and slide every chip off the words it belongs to. */
  scrollbar-gutter: stable;
}

.sqmission__ghost {
  overflow: hidden;
  border-color: transparent;
  background: var(--surface);
  /* The textarea draws the text. This layer exists only to put something
     behind the resolved paths. */
  color: transparent;
  pointer-events: none;
}

.sqmission__chip {
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: transparent;
  /* A path that wraps gets its hairline on both halves rather than one open
     box across two lines. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.sqmission__input {
  z-index: 1;
  overflow-y: auto;
  background: transparent;
  color: var(--text);
  caret-color: var(--accent);
  resize: vertical;
}

.sqmission__input:focus {
  outline: none;
  border-color: var(--line-control);
}

/* The global focus ring doubles up against the field's own border on a
   control this large — the border step plus the caret is focus enough. */
.sqmission__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.sqmission__input::placeholder {
  color: var(--text-tertiary-mark);
}

.sqmission__tools {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.sqmission__hint {
  font-size: var(--t-micro);
  color: var(--text-dim);
}

.sqmission__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.sqpicker {
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 240px;
  margin-top: var(--s-1);
  overflow-y: auto;
  padding: var(--s-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}

.sqpicker__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-align: left;
}

/* Keyboard and pointer share one highlight: the row Enter would take is the
   row the mouse is over, and there is never a second one. */
.sqpicker__option[data-active="true"] {
  color: var(--text);
  background: var(--surface-active);
}

.sqpicker__note {
  padding: var(--s-2);
  font-size: var(--t-micro);
  color: var(--text-dim);
}

.sqpicker__note--bad {
  color: var(--bad-text);
}

.sqcontext__add {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sqcontext__add .wfield__input {
  flex: 1 1 auto;
  min-width: 0;
}

.sqcontext {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sqcontext__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sqcontext__kind {
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.sqcontext__value {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqcontext__remove {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
}

.sqcontext__remove:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ==========================================================================
   The squad at work — the workspace, the chat feed, and the composer.

   Every value is a token from the top of this file. Role identity is a glyph,
   a word and the weight of one hairline — never a colour, because the app has
   exactly one accent and this surface spends it on urgency.
   ========================================================================== */

/* The squad beside its editor. Same arrangement ProofSpace uses for the dock:
   a row that the workspace fills and the dock takes a fraction of, so opening
   a board narrows the panes instead of covering them. */
.squad-shell {
  display: flex;
  height: 100%;
  min-height: 0;
}

.squad-shell > .squad {
  flex: 1 1 auto;
  min-width: 0;
}

.squad {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-app);
}

.squad__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--t-meta);
  gap: var(--s-3);
}

.squad__identity-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.squad__identity {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.squad__brand-glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, #6344F2 8%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, #6344F2 28%, var(--border-strong));
  color: #8f7cf7;
  flex-shrink: 0;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.squad__identity:hover .squad__brand-glyph {
  border-color: color-mix(in srgb, #6344F2 52%, var(--border-strong));
  background: color-mix(in srgb, #6344F2 12%, var(--bg-raised));
  color: #a89bff;
}

.squad__title-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.squad__title-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.squad__name {
  font-size: var(--t-compact);
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad__project-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.squad__connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

.squad__beacon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.squad__beacon-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  transition: background var(--dur-2) var(--ease);
}

.squad__beacon-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: transparent;
  pointer-events: none;
}

.squad__beacon[data-state="connected"] .squad__beacon-dot,
.squad__beacon[data-state="partial"] .squad__beacon-dot {
  background: var(--ok);
}

.squad__beacon[data-state="connected"] .squad__beacon-ring {
  background: color-mix(in srgb, var(--ok) 30%, transparent);
  animation: beacon-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.squad__beacon[data-state="starting"] .squad__beacon-dot,
.squad__beacon[data-state="reconnecting"] .squad__beacon-dot {
  background: var(--warn);
}

.squad__beacon[data-state="needs_person"] .squad__beacon-dot {
  background: var(--warn);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite;
}

@keyframes beacon-ping {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  80%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.squad__connection-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.squad__state-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.squad__state-dot[data-state="connected"],
.squad__state-dot[data-state="partial"] {
  background: var(--ok);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 50%, transparent);
}

.squad__state-dot[data-state="starting"],
.squad__state-dot[data-state="reconnecting"] {
  background: var(--warn);
}

.squad__state-dot[data-state="needs_person"] {
  background: var(--warn);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite;
}

.squad__nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
}

.squad__nav-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 6px;
  background: #6344F2;
  pointer-events: none;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    width 200ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, width;
  z-index: 0;
}

.squad__nav-pill button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}

.squad__nav-pill button:hover:not([data-active="true"]) {
  color: var(--text-primary);
}

.squad__nav-pill button[data-active="true"] {
  color: var(--swarm-white);
  font-weight: 600;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.squad__nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  transition: all var(--dur-1) var(--ease);
}

.squad__nav-pill button[data-active="true"] .squad__nav-count {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--swarm-white);
}

.squad__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
}

.squad__run-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--s-3);
  border-radius: var(--radius-full);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--run-soft);
  border: 1px solid var(--run-line);
  color: var(--ok-text);
}

.squad__run-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.squad__exit-btn {
  padding: 4px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.squad__exit-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--line-control);
}

.squad__attention {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  max-height: 22vh;
  padding: var(--s-2) var(--s-4);
  overflow-y: auto;
  border-bottom: 1px solid var(--warn-line);
  background: var(--warn-soft);
}

.squad__attention > strong {
  color: var(--warn-text);
  font-size: var(--t-meta);
  font-weight: 500;
  white-space: nowrap;
}

.squad__attention ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.squad__attention li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-1) 2px var(--s-2);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}

.squad__attention code {
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
}

.squad__attention span {
  color: var(--text-muted);
  font-size: var(--t-label);
  white-space: nowrap;
}

.squad__attention button {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  font-size: var(--t-label);
  white-space: nowrap;
}

.squad__attention button:hover {
  color: var(--text);
  background: var(--surface);
}

.squad__error {
  flex: 0 0 auto;
  margin: var(--s-3) var(--s-4) 0;
}

.squad__stage {
  flex: 1;
  min-height: 0;
}

.squad__view {
  height: 100%;
  min-height: 0;
  container-type: inline-size;
}

.squad__view[hidden] {
  display: none;
}

.squad__panes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-auto-rows: minmax(320px, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
  height: 100%;
  overflow: auto;
  background: var(--bg-app);
}

.squad-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-app) 60%, transparent), 0 1px 3px color-mix(in srgb, var(--border-subtle) 30%, transparent);
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.squad-pane:hover {
  border-color: var(--border-strong);
}

.squad-pane:focus-within,
.squad-pane[data-focused="true"] {
  z-index: 1;
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 8px 24px color-mix(in srgb, var(--bg-app) 80%, transparent);
}

.squad-pane__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.squad-pane__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.squad-pane__title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.squad-pane__name {
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.squad-pane__role-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.squad-pane__role-pill {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 500;
  white-space: nowrap;
}

.squad-pane__runtime-pill {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.squad-pane__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--s-2);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 500;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  color: var(--text-dim);
}

.squad-pane__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.squad-pane__activity-toggle,
.swarm-terminal-card__activity-toggle {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-size: var(--t-11);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.squad-pane__activity-toggle:hover,
.swarm-terminal-card__activity-toggle:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.term-bar .term-activity-toggle,
.squad-pane__activity-toggle,
.swarm-terminal-card__activity-toggle {
  border-color: color-mix(in srgb, var(--violet) 24%, var(--border-subtle));
  color: var(--violet-text);
  background: color-mix(in srgb, var(--violet) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
  /* Hovering the one violet pill must not turn it grey. The wash below is
     what the bar's hover rule picks up in place of its own. */
  --bar-pill-hover-ink: var(--violet-text);
  --bar-pill-hover-bg: color-mix(in srgb, var(--violet) 17%, transparent);
  --bar-pill-hover-line: color-mix(in srgb, var(--violet) 58%, var(--border-strong));
}

.term-bar .term-activity-toggle:hover,
.squad-pane__activity-toggle[aria-pressed="true"],
.swarm-terminal-card__activity-toggle[aria-pressed="true"],
.squad-pane__activity-toggle:hover,
.swarm-terminal-card__activity-toggle:hover {
  border-color: color-mix(in srgb, var(--violet) 58%, var(--border-strong));
  color: var(--violet-text);
  background: color-mix(in srgb, var(--violet) 17%, transparent);
}

/* The skill pill sits between the violet activity pill and the ghost icons: a
   quiet wash of its own, opening the composer below the bar. */
.term-bar .term-skill-toggle,
.term-bar .term-skill-toggle:hover,
.term-bar .term-skill-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.term-bar .term-skill-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--text-primary) 22%, transparent);
  color: var(--text);
}

.squad-pane__status-pill[data-status="ready"],
.squad-pane__status-pill[data-status="working"] {
  background: var(--run-soft);
  border-color: var(--run-line);
  color: var(--ok-text);
}

.squad-pane__status-pill[data-status="needs_login"],
.squad-pane__status-pill[data-status="needs_trust"],
.squad-pane__status-pill[data-status="needs_permission"] {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn-text);
}

.squad-pane__status-pill[data-status="failed"],
.squad-pane__status-pill[data-status="wedged"] {
  background: var(--error-soft);
  border-color: var(--error-line);
  color: var(--bad-text);
}

.squad-pane__body {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-app);
}

.squad-pane__gone {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  color: var(--text-dim);
  font-size: var(--t-meta);
  text-align: center;
}

.squad-pane__gone button {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-raised);
}

.squad-pane__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.squad-pane__stop-btn,
.squad-pane__restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.squad-pane__stop-btn:hover {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn-text);
}

.squad-pane__restart-btn:hover {
  background: var(--surface-hover);
  border-color: var(--line-control);
  color: var(--text-primary);
}

/* ==========================================================================
   The Discord-Style Swarm Chat Feed
   ========================================================================== */

.squad-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-app);
}

/* --------------------------------------------------------------------------
   Chat navigation — a quiet, Discord-inspired conversation rail. The rail is
   intentionally part of Chat rather than a second app-wide sidebar: it keeps
   the live swarm roster beside the messages it addresses.                    */

.squad-chat {
  flex-direction: row;
  overflow: hidden;
}

.squad-chat__sidebar {
  display: flex;
  flex: 0 0 clamp(214px, 23vw, 268px);
  flex-direction: column;
  min-width: 214px;
  min-height: 0;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.squad-chat__sidebar-head {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.squad-chat__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.squad-chat__sidebar-brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.squad-chat__sidebar-brand > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.squad-chat__sidebar-brand strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--t-compact);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-chat__sidebar-brand small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-chat__sidebar-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  overflow-y: auto;
}

.squad-chat__section-label {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.squad-chat__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-2) var(--s-1);
}

.squad-chat__section-count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-dim);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.squad-chat__conversation-list {
  display: grid;
  gap: 2px;
}

.squad-chat__conversation {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.squad-chat__conversation:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.squad-chat__conversation[data-active="true"] {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-active) 78%, transparent);
}

.squad-chat__conversation[data-kind="group"] {
  min-height: 48px;
  border-color: var(--border-subtle);
  background: transparent;
}

.squad-chat__conversation[data-kind="group"][data-active="true"] {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-active) 72%, transparent);
  box-shadow: inset 2px 0 0 #6344F2;
}

.squad-chat__conversation-icon {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.squad-chat__conversation[data-kind="group"] .squad-chat__conversation-icon {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.squad-chat__conversation-icon[data-glyph="coordinator"] {
  border-color: var(--role-coordinator-border);
  color: var(--role-coordinator);
  background: var(--role-coordinator-bg);
}

.squad-chat__conversation-icon[data-glyph="builder"] {
  border-color: var(--role-builder-border);
  color: var(--role-builder);
  background: var(--role-builder-bg);
}

.squad-chat__conversation-icon[data-glyph="scout"] {
  border-color: var(--role-scout-border);
  color: var(--role-scout);
  background: var(--role-scout-bg);
}

.squad-chat__conversation-icon[data-glyph="reviewer"] {
  border-color: var(--role-reviewer-border);
  color: var(--role-reviewer);
  background: var(--role-reviewer-bg);
}

.squad-chat__conversation-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.squad-chat__conversation-copy strong,
.squad-chat__conversation-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-chat__conversation-copy strong {
  color: inherit;
  font-size: var(--t-label);
  font-weight: 600;
}

.squad-chat__conversation-copy small {
  color: var(--text-dim);
  font-size: var(--t-micro);
}

.squad-chat__conversation-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.squad-chat__presence {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg-surface);
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.squad-chat__presence[data-status="queued"],
.squad-chat__presence[data-status="launching"],
.squad-chat__presence[data-status="ready"],
.squad-chat__presence[data-status="working"],
.squad-chat__presence[data-status="awaiting_verification"],
.squad-chat__presence[data-status="verified"] {
  background: var(--ok);
}

.squad-chat__presence[data-status="needs_login"],
.squad-chat__presence[data-status="needs_trust"],
.squad-chat__presence[data-status="needs_permission"] {
  background: var(--warn);
}

.squad-chat__presence[data-status="failed"],
.squad-chat__presence[data-status="wedged"] {
  background: var(--bad);
}

.squad-chat__sidebar-foot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--s-2);
  min-height: 42px;
  padding: 0 var(--s-3);
  border-top: none;
  color: var(--text-dim);
  font-size: var(--t-micro);
}

.squad-chat__sidebar-live-dot,
.squad-chat__live-chip > span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.squad-chat__main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-app);
}

.squad-chat__channel-head {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 66px;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.squad-chat__channel-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.squad-chat__channel-icon[data-kind="group"] {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.squad-chat__channel-icon[data-glyph="coordinator"] {
  border-color: var(--role-coordinator-border);
  color: var(--role-coordinator);
  background: var(--role-coordinator-bg);
}

.squad-chat__channel-icon[data-glyph="builder"] {
  border-color: var(--role-builder-border);
  color: var(--role-builder);
  background: var(--role-builder-bg);
}

.squad-chat__channel-icon[data-glyph="scout"] {
  border-color: var(--role-scout-border);
  color: var(--role-scout);
  background: var(--role-scout-bg);
}

.squad-chat__channel-icon[data-glyph="reviewer"] {
  border-color: var(--role-reviewer-border);
  color: var(--role-reviewer);
  background: var(--role-reviewer-bg);
}

.squad-chat__channel-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.squad-chat__channel-copy h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--t-body);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-chat__channel-copy p {
  margin: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-chat__channel-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.squad-chat__live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.squad-chat__message-count {
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
}

@media (max-width: 760px) {
  .squad-chat {
    flex-direction: column;
  }

  .squad-chat__sidebar {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .squad-chat__sidebar-head {
    padding: var(--s-2) var(--s-3);
  }

  .squad-chat__sidebar-scroll {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .squad-chat__sidebar-scroll::-webkit-scrollbar {
    display: none;
  }

  .squad-chat__sidebar-scroll > .squad-chat__section-label,
  .squad-chat__section-heading {
    display: none;
  }

  .squad-chat__conversation,
  .squad-chat__conversation[data-kind="group"] {
    width: auto;
    min-width: 148px;
    min-height: 42px;
    flex: 0 0 auto;
  }

  .squad-chat__conversation-list {
    display: flex;
    gap: var(--s-2);
  }

  .squad-chat__conversation-copy small,
  .squad-chat__conversation-count {
    display: none;
  }

  .squad-chat__sidebar-foot {
    display: none;
  }

  .squad-chat__channel-head {
    min-height: 58px;
    padding: var(--s-2) var(--s-3);
  }

  .squad-chat__channel-meta {
    gap: var(--s-2);
  }

  .squad-chat__message-count {
    display: none;
  }
}

@media (max-width: 480px) {
  .squad-chat__sidebar-brand small,
  .squad-chat__live-chip {
    display: none;
  }

  .squad-chat__sidebar-brand strong {
    font-size: var(--t-label);
  }

  .squad-chat__conversation,
  .squad-chat__conversation[data-kind="group"] {
    min-width: 132px;
  }
}

.squad-chat__stalled {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--warn-line);
  background: var(--warn-soft);
}

.squad-chat__stalled-content {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.squad-chat__stalled-content p {
  margin: 0;
  color: var(--warn-text);
  font-size: var(--t-label);
  font-weight: 500;
}

.squad-chat__stalled-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.squad-chat__stalled-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.squad-chat__stalled-btn:hover {
  background: var(--surface-hover);
  border-color: var(--warn-text);
}

.squad-chat__stalled-status {
  color: var(--warn-text);
  font-size: var(--t-micro);
}

.squad-chat__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* Keep the final message completely above the floating composer. The old
     110px reserve ended almost exactly at the composer's top border, so the
     descenders on the last line could sit underneath that border. */
  padding: var(--s-4) 0 136px;
  scroll-padding-bottom: 136px;
  background: var(--bg-app);
}

.squad-chat__scroll > :first-child {
  margin-top: auto;
}

.squad-chat__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-8) var(--s-4);
  max-width: 480px;
  margin: 0 auto;
}

.squad-chat__empty-orb-wrap {
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
}

.squad-chat__empty-avatar {
  position: relative;
}

.squad-chat__empty-orb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  margin-bottom: var(--s-3);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--bg-app) 70%, transparent);
}

.squad-chat__empty-state h3 {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--s-2);
}

.squad-chat__empty-state p {
  color: var(--text-secondary);
  font-size: var(--t-label);
  line-height: var(--lh-body);
}

.squad-chat__earlier {
  display: block;
  width: min(860px, calc(100% - var(--s-8)));
  margin: 0 auto var(--s-4);
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-1) var(--ease);
}

.squad-chat__earlier:hover {
  border-color: var(--line-control);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.squad-chat__jump {
  position: absolute;
  bottom: var(--s-3);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  font-size: var(--t-label);
  font-weight: 500;
  transform: translateX(-50%);
  animation: ps-rise var(--dur-2) var(--ease) both;
  cursor: pointer;
  z-index: 10;
}

.squad-chat__jump:hover {
  border-color: var(--line-control);
  background: var(--surface-hover);
}

/* Discord Message Layout */

.squad-msg {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--s-3);
  width: min(860px, calc(100% - var(--s-8)));
  margin: 0 auto;
  padding: 4px var(--s-3);
  border-radius: var(--radius-md);
  transition: background var(--dur-1) var(--ease);
}

.squad-msg:hover {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}

.squad-msg[data-continues="true"] {
  padding-top: 1px;
  padding-bottom: 1px;
}

.squad-msg[data-urgent="true"] {
  background: color-mix(in srgb, var(--error-soft) 40%, transparent);
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.squad-msg[data-fresh="true"] {
  animation: squad-msg-in var(--dur-2) var(--ease) both;
}

.squad-msg__actions {
  position: absolute;
  top: -10px;
  right: var(--s-3);
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bg-app) 80%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
  z-index: 5;
}

.squad-msg:hover .squad-msg__actions {
  opacity: 1;
  pointer-events: auto;
}

.squad-msg__action-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.squad-msg__action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.squad-msg__avatar-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2px;
}

.squad-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 28%;
  flex-shrink: 0;
}

.squad-avatar__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: all var(--dur-1) var(--ease);
}

.squad-avatar[data-glyph="coordinator"] .squad-avatar__inner {
  background: var(--role-coordinator-bg);
  border-color: var(--role-coordinator-border);
  color: var(--role-coordinator);
}

.squad-avatar[data-glyph="reviewer"] .squad-avatar__inner {
  background: var(--role-reviewer-bg);
  border-color: var(--role-reviewer-border);
  color: var(--role-reviewer);
}

.squad-avatar[data-glyph="builder"] .squad-avatar__inner {
  background: var(--role-builder-bg);
  border-color: var(--role-builder-border);
  color: var(--role-builder);
}

.squad-avatar[data-glyph="scout"] .squad-avatar__inner {
  background: var(--role-scout-bg);
  border-color: var(--role-scout-border);
  color: var(--role-scout);
}

.squad-avatar[data-glyph="operator"] .squad-avatar__inner {
  background: var(--role-operator-bg);
  border-color: var(--role-operator-border);
  color: var(--swarm-white);
}

.squad-avatar[data-glyph="service"] .squad-avatar__inner {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.squad-chat__conversation[data-kind="group"][data-active="true"]
  .squad-avatar[data-glyph="service"] .squad-avatar__inner,
.squad-chat__channel-head
  .squad-avatar[data-glyph="service"] .squad-avatar__inner {
  background: color-mix(in srgb, #6344F2 9%, var(--bg-raised));
  border-color: color-mix(in srgb, #6344F2 34%, var(--border-strong));
  color: #9c8cff;
}

.squad-avatar[data-glyph="agent"] .squad-avatar__inner {
  background: var(--role-service-bg);
  border-color: var(--role-service-border);
  color: var(--role-service);
}

.squad-avatar__status-pip {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--ok);
  border: 2px solid var(--surface);
  z-index: 2;
}

.squad-avatar__status-pip[data-status="urgent"],
.squad-avatar__status-pip[data-status="needs_login"],
.squad-avatar__status-pip[data-status="needs_trust"],
.squad-avatar__status-pip[data-status="needs_permission"] {
  background: var(--warn);
}

.squad-avatar__status-pip[data-status="failed"],
.squad-avatar__status-pip[data-status="wedged"] {
  background: var(--bad);
}

.squad-msg__hovertime {
  color: var(--text-dim);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}

.squad-msg:hover .squad-msg__hovertime {
  opacity: 1;
}

.squad-msg__main {
  min-width: 0;
}

.squad-msg__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: 2px;
}

.squad-msg__sender-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.squad-msg__author {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-primary);
}

.squad-msg__author[data-role="coordinator"] {
  color: var(--role-coordinator);
}

.squad-msg__author[data-role="reviewer"] {
  color: var(--role-reviewer);
}

.squad-msg__author[data-role="builder"] {
  color: var(--role-builder);
}

.squad-msg__author[data-role="scout"] {
  color: var(--role-scout);
}

.squad-msg__author[data-role="operator"] {
  color: var(--role-operator);
}

.squad-msg__author[data-role="service"] {
  color: var(--role-service);
}

.squad-msg__badge {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  color: var(--text-secondary);
  line-height: 1.2;
  text-transform: uppercase;
}

.squad-msg__recipients {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.squad-msg__to-label {
  color: var(--text-dim);
  font-size: var(--t-micro);
  margin-right: 1px;
}

/* Discord Mention Pill */
.squad-msg__mention-pill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--discord-mention-bg);
  border: 1px solid var(--discord-mention-border);
  color: var(--discord-mention-text);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  transition: all var(--dur-1) var(--ease);
}

.squad-msg__mention-pill:hover {
  background: var(--discord-mention-bg-hover);
  filter: brightness(1.1);
}

.squad-msg__mention-pill--all {
  background: color-mix(in srgb, var(--role-coordinator) 16%, transparent);
  border-color: color-mix(in srgb, var(--role-coordinator) 36%, transparent);
  color: var(--role-coordinator);
}

.squad-msg__kind-pill {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: var(--t-micro);
  text-transform: capitalize;
}

.squad-msg__urgent-badge {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--error-soft);
  border: 1px solid var(--error-line);
  color: var(--bad-text);
  font-size: var(--t-micro);
  font-weight: 700;
}

.squad-msg__time {
  margin-left: auto;
  color: var(--text-dim);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.squad-msg__subject {
  overflow-wrap: anywhere;
  margin: var(--s-1) 0;
  color: var(--text-primary);
  font-size: var(--t-compact);
  font-weight: 600;
}

.squad-msg__body {
  display: grid;
  gap: var(--s-2);
  margin-top: 2px;
}

.squad-msg__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-compact);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Discord Inline Mentions in text */
.squad-md__mention {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--discord-mention-bg);
  color: var(--discord-mention-text);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 600;
}

.squad-md__mention--all {
  background: color-mix(in srgb, var(--role-coordinator) 16%, transparent);
  color: var(--role-coordinator);
}

.squad-md__code {
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  background: var(--bg-surface);
  font-family: var(--mono);
  font-size: var(--t-label);
}

.squad-md__strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Code & ASCII Art Card */
.squad-md__code-box {
  margin: var(--s-1) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.squad-md__code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px var(--s-3);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-subtle);
}

.squad-md__lang-tag {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.squad-md__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-micro);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.squad-md__copy-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.squad-md__block {
  margin: 0;
  padding: var(--s-3);
  overflow-x: auto;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: 1.45;
  white-space: pre;
}

/* Markdown Tables */
.squad-md__table-wrap {
  margin: var(--s-2) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow-x: auto;
  background: var(--bg-surface);
}

.squad-md__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-label);
  text-align: left;
}

.squad-md__table th {
  padding: var(--s-2) var(--s-3);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.squad-md__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.squad-md__table tr:last-child td {
  border-bottom: 0;
}

.squad-md__table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface) 35%, transparent);
}

.squad-md__table tr:hover td {
  background: var(--surface-hover);
}

/* Markdown Headings & Quotes */
.squad-md__heading {
  margin: var(--s-2) 0 var(--s-1);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--t-meta);
}

.squad-md__quote {
  margin: var(--s-2) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
  font-style: italic;
}

/* Markdown Lists */
.squad-md__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--s-1) 0;
  padding: 0;
  list-style: none;
}

.squad-md__list-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.squad-md__list-num {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 600;
  flex-shrink: 0;
}

.squad-md__list-bullet {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 6px;
}

.squad-md__list-content {
  flex: 1 1 auto;
  color: var(--text-secondary);
  font-size: var(--t-compact);
  line-height: var(--lh-body);
}

.squad-msg__notice {
  margin-top: var(--s-1);
  color: var(--text-secondary);
  font-size: var(--t-label);
}

.squad-msg__notice summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 500;
}

.squad-msg__full {
  width: fit-content;
  margin-top: var(--s-2);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
  cursor: pointer;
}

.squad-msg__file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.squad-msg__file:hover {
  background: var(--surface-hover);
  border-color: var(--line-control);
}

.squad-msg__file-icon {
  color: var(--text-secondary);
}

.squad-msg__undelivered {
  margin: var(--s-1) 0 0;
  color: var(--warn-text);
  font-size: var(--t-label);
}

.squad-msg__ack {
  margin-top: var(--s-2);
  padding: 3px var(--s-3);
  border: 1px solid var(--error-line);
  border-radius: var(--radius-sm);
  color: var(--bad-text);
  background: var(--error-soft);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
}

/* ==========================================================================
   Discord-Style Floating Composer
   ========================================================================== */

.squad-composer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 var(--s-4) 18px;
  background: transparent;
  border-top: none;
  transition: margin-left 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.squad__stage[data-tab="chat"] ~ .squad-composer {
  margin-left: clamp(214px, 23vw, 268px);
}

.squad__stage[data-tab="terminals"] ~ .squad-composer {
  display: none;
}

.squad-composer__box {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(840px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 16px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: border-color var(--dur-1) var(--ease);
}

.squad-composer__box:focus-within {
  border-color: var(--line-control);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.squad-composer__box[data-urgent="true"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.squad-composer__input-wrap {
  min-height: 28px;
}

.squad-composer__input {
  width: 100%;
  min-height: 28px;
  max-height: 160px;
  padding: 2px 0;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: var(--t-compact);
  line-height: 1.5;
  outline: none;
  resize: none;
}

.squad-composer__input:focus-visible {
  box-shadow: none;
}

.squad-composer__input::placeholder {
  color: var(--text-dim);
  font-size: var(--t-label);
}

.squad-composer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: 4px;
}

.squad-composer__meta {
  display: flex;
  align-items: center;
}

.squad-composer__reach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--t-micro);
}

.squad-composer__reach-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.squad-composer__unreachable {
  color: var(--warn-text);
  font-size: var(--t-micro);
}

.squad-composer__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.squad-composer__urgent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-1) var(--ease);
}

.squad-composer__urgent:hover {
  color: var(--text-primary);
  border-color: var(--line-control);
}

.squad-composer__urgent[aria-pressed="true"] {
  color: var(--warn-text);
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.squad-composer__urgent-icon {
  color: inherit;
}

/* Purple circle send button */
.squad-composer__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--swarm-white);
  background: var(--swarm-purple);
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease);
  flex-shrink: 0;
}

.squad-composer__send:hover:not(:disabled) {
  background: var(--swarm-purple-hi);
}

.squad-composer__send:active:not(:disabled) {
  transform: scale(0.96);
}

.squad-composer__send:disabled {
  background: var(--bg-raised);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 780px) {
  .squad__bar {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3);
  }

  .squad__panes {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion needs nothing of its own here: the global rule at the top of
   this file stops the arrival animation, the jump pill's rise and the
   attention pulse, and the feed never scrolls smoothly to begin with. */

/* ==========================================================================
   ProofSwarm — the swarm graph.

   The first screen a new swarm workspace opens on, so it answers the two
   questions an operator has before reading anything: who is in here, and is
   any of it moving. Every mark on it is backed by a record — a line means
   those two have spoken, a pulse means just now, a dot is the stored status.
   Nothing animates to look busy.
   ========================================================================== */

/* --- the squad board ------------------------------------------------------
   Tiered rows, top to bottom, wired by measured bezier curves. The one place
   in this app that glows: the board is read as a live circuit, and a hairline
   cannot say which of five wires is carrying traffic right now. */

.sgraph {
  position: relative;
  height: 100%;
  min-height: 0;
  /* The board is panned, not scrolled: a scrollbar can only reach as far as
     the content and the point of a canvas is to go past it. */
  overflow: hidden;
}

/* Graph paper, on black. The squares are what a drag moves against — on a
   plain field the board reads as stuck, because nothing but the cards moves and
   at the edges there are no cards. Sized and offset from the view in the
   component, so the grid is the board's own surface rather than a backdrop the
   board slides over. */
.sgraph__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--sgraph-void);
  background-image:
    linear-gradient(to right, var(--sgraph-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sgraph-grid) 1px, transparent 1px);
  cursor: grab;
  touch-action: none;
  /* A drag across a board is a pan, not a text selection. Without this the
     first drag highlights whichever card handle it passes over and leaves it
     highlighted. Nothing here is prose worth selecting: the card text is
     duplicated in the detail panel, which selects normally. */
  user-select: none;
}

.sgraph__canvas[data-panning="true"] {
  cursor: grabbing;
}

/* A vignette over the grid, not under it: the squares fade out at the edges so
   the board has a centre without the grid having to stop somewhere. */
.sgraph__canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(110% 85% at 50% 40%, transparent 45%, var(--sgraph-void) 100%);
  pointer-events: none;
}

.sgraph__zoom {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sgraph__zoom button {
  min-width: 24px;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  background: transparent;
  font-size: var(--t-meta);
}

.sgraph__zoom button:hover {
  color: var(--text);
  background: var(--bg-raised);
}

.sgraph__zoom output {
  min-width: 40px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sgraph--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-dim);
  font-size: var(--t-compact);
  text-align: center;
}

/* The rows own the vertical rhythm and the wires are drawn against whatever
   room they take, so this gap is the only thing that sets how much sweep a
   curve has. Below the token scale on purpose: it is a drawing dimension. */
.sgraph__field {
  --tier-gap: 120px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tier-gap);
  /* The board sizes to its content and the canvas moves over it, so it must
     not be stretched to the canvas or a pan would have nothing to reveal. */
  width: max-content;
  min-width: 100%;
  padding: var(--s-7) var(--s-6) var(--s-8);
  transform-origin: 0 0;
}

.sgraph__wires {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.sgraph__wire {
  fill: none;
  stroke: var(--role, var(--sgraph-edge));
  stroke-width: 1.5;
  stroke-opacity: 0.42;
  filter: drop-shadow(0 0 4px var(--role-glow));
  transition:
    stroke-opacity var(--dur-2) var(--ease),
    stroke-width var(--dur-2) var(--ease);
}

/* A wire is lit only while a real message is inside its window. Brightness and
   width carry that on their own, because the travelling packet below is
   removed under reduced motion. */
.sgraph__wires g[data-active="true"] .sgraph__wire {
  stroke-opacity: 0.95;
  stroke-width: 2;
}

/* The packet is a second stroke over the same curve: a short dash chasing a
   long gap, so one bright bead travels the wire instead of it crawling. */
.sgraph__packet {
  fill: none;
  stroke: var(--sgraph-edge-active);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 90;
  opacity: 0;
}

.sgraph__wires g[data-active="true"] .sgraph__packet {
  opacity: 1;
  animation: sgraph-flow 2.4s linear infinite;
}

/* The bead always runs sender to recipient. The curve itself is drawn downhill
   whichever way the message went, so a reply runs the animation backwards
   rather than being redrawn as a wire that climbs. */
.sgraph__packet[data-reverse="true"] {
  animation-direction: reverse;
}

@keyframes sgraph-flow {
  from { stroke-dashoffset: 96; }
  to { stroke-dashoffset: 0; }
}

/* Drawn only where wires leave a card, which is the only real convergence on
   the board. A dot at an arbitrary crossing would claim a junction that
   nothing routes through. */
.sgraph__junction {
  fill: var(--sgraph-edge);
  opacity: 0.5;
  transition: opacity var(--dur-2) var(--ease);
}

.sgraph__junction[data-active="true"] {
  fill: var(--sgraph-edge-active);
  opacity: 1;
}

.sgraph__tier {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-4);
}

.sgraph__tier-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--role, var(--text-dim));
  font-size: var(--t-label);
  opacity: 0.5;
}

.sgraph__tier-mark {
  display: inline-flex;
}

.sgraph__tier-name {
  /* The one uppercased label in the app. A tier heading is a legend for the
     row under it, not a sentence, and at 11px the caps are what separate it
     from the card text an inch below. */
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sgraph__tier-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* The rule runs out to both edges from the label, so a row of one card and a
   row of five read as the same band. */
.sgraph__tier-head .sgraph__rule {
  flex: 1;
}

.sgraph__rule {
  height: 1px;
  background: currentcolor;
  opacity: 0.4;
}

.sgraph__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--s-5);
}

.sgraph__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-2);
  width: 260px;
  padding: var(--s-3);
  border: 1px solid var(--role-line);
  border-radius: var(--radius);
  color: var(--text);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  text-align: left;
  box-shadow: 0 0 24px var(--role-glow);
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.sgraph__card:hover,
.sgraph__card:focus-visible {
  border-color: var(--role);
  transform: scale(1.02);
  box-shadow: 0 0 32px var(--role-glow);
  z-index: 2;
}

/* Selection is an outline in --text, not a brighter glow. The role tints
   measure under the 3:1 a state indicator has to clear, and a glow step is
   already spent on hover — reusing it here would make the selected card
   indistinguishable from the one under the pointer. */
.sgraph__card[data-selected="true"] {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.sgraph__card[data-state="stopped"],
.sgraph__card[data-state="failed"] {
  box-shadow: none;
}

.sgraph__card[data-state="failed"] {
  border-color: var(--error-line);
}

.sgraph__card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* The same four shapes as the chat feed, on the same reasoning: role is
   nominal, so it gets a nominal channel, and every hue in this app is spoken
   for by state. Learn the vocabulary once, read it on either surface. */
.sgraph__badge {
  display: inline-flex;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: transparent;
}

.sgraph__badge > svg {
  margin: auto;
}

/* Coordinator — the hub: solid, accented, the only one. */
.sgraph__card[data-role="coordinator"] .sgraph__badge,
.sgraph__detail[data-role="coordinator"] .sgraph__detail-mark {
  border-color: var(--accent-line);
  color: var(--accent-text);
  background: var(--accent-quiet);
}

/* Builder — square. */
.sgraph__card[data-role="builder"] .sgraph__badge,
.sgraph__detail[data-role="builder"] .sgraph__detail-mark {
  border-radius: var(--radius-xs);
}

/* Scout — a ring. */
.sgraph__card[data-role="scout"] .sgraph__badge,
.sgraph__detail[data-role="scout"] .sgraph__detail-mark {
  border-width: 2px;
}

/* Reviewer — diamond. The icon turns back so it is never read at an angle. */
.sgraph__card[data-role="reviewer"] .sgraph__badge,
.sgraph__detail[data-role="reviewer"] .sgraph__detail-mark {
  border-radius: var(--radius-xs);
  rotate: 45deg;
  scale: 0.82;
}

.sgraph__card[data-role="reviewer"] .sgraph__badge > *,
.sgraph__detail[data-role="reviewer"] .sgraph__detail-mark > * {
  rotate: -45deg;
}

/* The legend sits on the board permanently. A shape code has to be learnable,
   and a key you have to hover for is a key nobody reads. */
.sgraph__legend {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.sgraph__handle {
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-size: var(--t-compact);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgraph__count {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
}

.sgraph__status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-label);
}

.sgraph__role {
  flex: 1;
  overflow: hidden;
  color: var(--role);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgraph__elapsed {
  flex: none;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The one line on the card that has to survive at any width: a pane waiting on
   a person says so here, and the dot beside it is only 6px of colour. */
.sgraph__state[data-state="blocked"] { color: var(--warn-text); }
.sgraph__state[data-state="failed"] { color: var(--bad-text); }
.sgraph__state[data-state="done"] { color: var(--ok-text); }

.sgraph__log {
  display: grid;
  gap: 2px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: var(--lh-tight);
}

.sgraph__log span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgraph__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.sgraph__dot[data-state="working"] {
  background: var(--ok);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.sgraph__dot[data-state="starting"] {
  background: var(--text-tertiary-mark);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.sgraph__dot[data-state="blocked"] { background: var(--warn); }
.sgraph__dot[data-state="done"] { background: var(--ok); }
.sgraph__dot[data-state="stopped"] { background: var(--text-tertiary-mark); }
.sgraph__dot[data-state="failed"] { background: var(--bad); }

.sgraph__detail {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: var(--s-3);
  margin: 0 var(--s-6) var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--role-line);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2);
}

.sgraph__detail header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.sgraph__detail-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--role-line);
  border-radius: var(--radius);
  color: var(--role);
  background: var(--role-soft);
}

.sgraph__detail header div {
  display: grid;
  gap: 2px;
}

.sgraph__detail strong {
  color: var(--text);
  font-size: var(--t-compact);
  font-weight: 500;
}

.sgraph__detail small {
  color: var(--text-dim);
  font-size: var(--t-label);
}

.sgraph__close {
  margin-left: auto;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius);
  color: var(--text-dim);
  background: transparent;
  font-size: var(--t-compact);
}

.sgraph__close:hover {
  color: var(--text);
}

.sgraph__detail dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: 0;
}

.sgraph__detail dl div {
  display: grid;
  gap: 2px;
}

.sgraph__detail dt {
  color: var(--text-dim);
  font-size: var(--t-label);
}

.sgraph__detail dd {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: var(--t-label);
}

.sgraph__detail dd[data-state="working"] { color: var(--ok-text); }
.sgraph__detail dd[data-state="done"] { color: var(--ok-text); }
.sgraph__detail dd[data-state="blocked"] { color: var(--warn-text); }
.sgraph__detail dd[data-state="stopped"] { color: var(--text-dim); }
.sgraph__detail dd[data-state="failed"] { color: var(--bad-text); }

.sgraph__detail-actions {
  display: flex;
  gap: var(--s-2);
}

.sgraph__detail-actions button {
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-raised);
  font-size: var(--t-label);
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.sgraph__detail-actions button:hover {
  color: var(--text);
  border-color: var(--role-line);
}

/* The travelling packets are the only continuous motion here that is not a
   liveness indicator, and a dozen of them at once is a lot of movement. The
   lit wire keeps its brightness and width, which is what carried the meaning
   anyway. */
@media (prefers-reduced-motion: reduce) {
  .sgraph__wires g[data-active="true"] .sgraph__packet {
    animation: none;
    opacity: 0;
  }

  .sgraph__card:hover,
  .sgraph__card:focus-visible {
    transform: none;
  }
}

/* --- the workspace's own loading and empty states --- */

.squad-loading {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-3);
  height: 100%;
  color: var(--text-dim);
  font-size: var(--t-compact);
}

.squad-loading__pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

/* Switching views is a fade, not a slide: the composer and the bar do not
   move, so only the stage has anything to say. */
.squad__stage > * {
  animation: ps-fade var(--dur-2) var(--ease) both;
}

/* Sixteen panes have to fit, so the grid tracks the pane count rather than
   being fixed at two columns. */
.squad__panes {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-auto-rows: minmax(320px, 1fr);
  align-content: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .sgraph__wires line[data-active="true"] {
    animation: none;
  }
}

/* --- the sidebar's swarm rows --- */

/* Two tools now, so the row reserves room for both rather than the trash
   sitting on top of the name. */
.wside__workspace-btn {
  padding-right: 52px;
}

.wside__workspace-tools {
  position: absolute;
  right: 4px;
  display: flex;
  gap: 2px;
}

.wside__workspace-tools .wside__workspace-remove {
  position: static;
}

/* Only the delete tool is destructive; renaming is not. */
.wside__workspace-tools .wside__workspace-remove:first-child:hover {
  color: var(--text);
}

.wside__workspace-mark {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

/* --- directory nodes ---
   The top level of the tree: one row per project directory, expanding straight
   to the workspaces saved inside it. The directory is the folder the user
   picked, so it is the thing they recognise; the workspaces hang off it with a
   small indent and nothing in between. */

.wside__dir-workspaces {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-2);
  list-style: none;
}

.wside__project-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font: inherit;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.wside__project-btn:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.wside__project-btn[data-active="true"] {
  color: var(--text-primary);
}

.wside__project-folder {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--text-tertiary);
}

.wside__project-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wside__rename {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--s-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-app);
  font: 500 var(--t-13) var(--sans);
  outline: none;
}

.wside[data-collapsed="true"] .wside__workspace-tools {
  display: none;
}

.wside[data-collapsed="true"] .wside__workspace-btn {
  padding-right: var(--s-1);
}

/* The full sidebar uses ::before for its left selection rail, while the icon
   rail uses that same pseudo-element for the workspace initial. Restore the
   initial here and move selection to an inset underline so the two signals do
   not overwrite or overlap one another. */
.wside[data-collapsed="true"] .wside__workspace-btn[data-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.wside[data-collapsed="true"] .wside__workspace-btn[data-selected="true"]::before {
  position: static;
  width: auto;
  height: auto;
  content: attr(data-initial);
  color: var(--text);
  background: none;
  transform: none;
}

/* The code dock can make this panel narrow while the application viewport is
   still wide, so a viewport media query alone cannot protect the graph. */
@container (max-width: 980px) {
  /* The detail card stops fitting beside the graph long before the graph
     stops being readable, so it goes under it rather than squeezing it. */
  .sgraph {
    flex-direction: column;
    overflow-y: auto;
  }

  /* Both of these belong to the whole stacked range, not only to the narrowest
     part of it. Without the first, the square field is a shrinkable column item
     and the graph was squashed instead of scrolled; without the second, the
     vertical auto margins centre the field inside the scroll box and its top
     cannot be scrolled back to. Between 721 and 980 the stack had neither. */
  .sgraph__field {
    flex: 0 0 auto;
    margin: 0 auto;
  }

  .sgraph__detail {
    flex: 0 0 auto;
    align-self: stretch;
    margin: var(--s-4) 0 0;
  }
}

@container (max-width: 720px) {
  .sgraph {
    padding: var(--s-4);
  }
}

/* ==========================================================================
   The squad launch wizard — one question per screen.

   ProofSpace's setup wizard and this one share a skeleton (`.wiz*`, `.wstep*`,
   `.wpick*`, `.wfield*`), and ProofSpace's look is the one already shipped, so
   every rule below is behind `.wiz--squad` or a name only this flow uses.
   Nothing here changes a pixel of ProofSpace.

   The shape: identity and progress on one quiet rail across the top — the
   ProofStack mark at one end, five numbered steps in the middle, close at the
   other — then the step's question asked in type alone, no badge and no glow,
   over its content in a 720px column. Back / where-you-are / the primary
   action stay pinned to the floor. Colour discipline is unchanged: grey
   everywhere, state hues only when the state is true, and the one filled
   button at the floor.
   ========================================================================== */

/* --- the top rail: brand, steps, exit --- */

.wiz--squad .wiz__top {
  position: relative;
   /* One row, hairline under. The rail is chrome now, not a stage: it states
      who is asking and where you are, then gets out of the way. */
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--s-2) clamp(var(--s-4), 3vw, var(--s-6));
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}

.wizbrand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-2);
}

.wizbrand .mark {
  color: var(--text-primary);
}

.wizbrand__name {
  font-family: var(--display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.wiz--squad .wiz__close {
  flex: 0 0 auto;
}

.wiz--squad .wiz__steps {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
}

.wiz--squad .wiz__step {
  display: flex;
  align-items: stretch;
}

/* The shared wizard draws a hairline connector between steps; this rail is a
   tab strip, and tabs carry order without leaders. */
.wiz--squad .wiz__step + .wiz__step::before {
  display: none;
}

/* Numbered words, no pills: the numeral does the counting, the underline does
   the pointing, and nothing else decorates either job. */
.wiz--squad .wiz__step-btn {
  position: relative;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  border: 0;
  border-radius: var(--radius-xs);
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.wiz--squad .wiz__step-btn:hover:not(:disabled) {
  background: var(--surface-hover);
}

.wiz--squad .wiz__step-index {
  width: auto;
  min-width: 14px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  color: inherit;
  opacity: 0.72;
}

.wiz--squad .wiz__step-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Where you are: the label at full ink with an underline beneath it — the
   same device as a tab strip, because that is what the rail is. */
.wiz--squad .wiz__step[data-state="current"] .wiz__step-btn {
  color: var(--text-primary);
}

.wiz--squad .wiz__step[data-state="current"] .wiz__step-btn::after {
  content: "";
  position: absolute;
  right: var(--s-2);
  bottom: 0;
  left: var(--s-2);
  height: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--text-primary);
}

/* Behind you: tick for numeral, secondary ink, and it still answers hover —
   a cleared step is the one you may jump back to. */
.wiz--squad .wiz__step[data-state="done"] .wiz__step-btn {
  color: var(--text-secondary);
}

.wiz--squad .wiz__step[data-state="todo"] .wiz__step-btn {
  color: var(--text-tertiary);
  cursor: default;
}

.wiz--squad .wiz__step-btn:disabled:hover {
  background: transparent;
}

/* Auto margins rather than `justify-content`, which would centre a tall step
   by hiding its top above the scroll origin. */
.wiz--squad .wiz__scroll {
  display: flex;
  flex-direction: column;
}

.wiz--squad .wiz__body {
  /* One breath, top and bottom, so a short screen sits in the middle of the
     window instead of being pushed up by a heavier footer than header. */
  --wiz-squad-gutter: clamp(var(--s-5), 5vh, calc(var(--s-7) + var(--s-5)));

  width: 100%;
  max-width: 680px;
  margin: auto;
  padding: var(--wiz-squad-gutter) var(--s-5);
  gap: clamp(var(--s-6), 4vh, var(--s-7));
}

/* --- the hero: the question, asked in type --- */

.wizhero {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: left;
}

.wizhero__title {
  margin: 0;
  font-family: var(--display);
  /* Scales down before it wraps: a two-line question stops being one question. */
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--track-display-m);
  color: var(--text-primary);
  text-wrap: balance;
}

.wizhero__lede {
  max-width: 62ch;
  margin: 0;
  font-size: var(--t-card);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Section headings inside a step: chrome weight against the hero's display
   weight — smaller, bolder-cut, full ink — so hierarchy reads from family and
   size together rather than from uppercase tracking. */
.wiz--squad .wstep > .wstep__title,
.wiz--squad .wstep > .wstep__head .wstep__title {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

/* --- the floor: back, where you are, and the one thing to press --- */

/* Three columns rather than a flex row, so "STEP 2 OF 5" is centred on the
   window and does not drift as the primary button's label changes length. */
.wiz--squad .wiz__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) clamp(var(--s-4), 3vw, var(--s-6));
  border-top: 1px solid var(--border-subtle);
  background: transparent;
}

.wiz--squad .wiz__foot > .wiz__back {
  grid-column: 1;
  justify-self: start;
}

.wiz--squad .wiz__foot > .wiz__foot-status,
.wiz--squad .wiz__foot > .wiz__step-count {
  grid-column: 2;
  justify-self: center;
}

.wiz--squad .wiz__foot > .wiz__next {
  grid-column: 3;
  justify-self: end;
}

.wiz--squad .wiz__foot-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-width: 0;
}

/* A position, not a message: monospaced and spaced out so it reads as a
   coordinate and stays out of the way of the blocking issue beside it. */
.wiz--squad .wiz__step-count {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* The one filled thing on the floor: ink and ground swapped, which reads as
   "the button" in both themes without spending a hue to say it. */
.wiz--squad .wiz__next {
  min-height: 38px;
  padding: 0 var(--s-5);
  background: var(--text-primary);
  color: var(--bg-app);
}

.wiz--squad .wiz__next:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text-primary) 86%, var(--bg-app));
}

.wiz--squad .wiz__next:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-app),
    0 0 0 4px var(--focus-ring);
}

/* --- the three screens that needed a shape of their own --- */

/* The name screen is one field, so the field is the screen: big enough to read
   as the answer to the headline above it rather than a form row. */
.wname__input {
  width: 100%;
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: var(--t-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  transition: border-color var(--dur-1) var(--ease);
}

.wname__input::placeholder {
  color: var(--text-tertiary-mark);
  font-weight: 400;
  letter-spacing: 0;
}

.wname__input:focus {
  border-color: var(--line-control);
}

/* `.wfield__input:focus` clears the outline for the small shared fields; this
   one is the whole screen, so the keyboard ring comes back. */
.wname__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* An attach-a-path-or-link panel, not a drop target: dashed because what goes
   in it is optional, and sized to its row rather than to an empty rectangle. */
.wctx__drop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* The field and its button are wrapped in the row that already styles them, so
   the panel's only flex child is that row — and a row sized to its content sat
   in a third of the panel with the placeholder cut off mid-word. */
.wctx__drop > .sqcontext__add {
  flex: 1 1 auto;
  min-width: 0;
}

.wctx__drop .wfield__input {
  flex: 1 1 220px;
  min-width: 0;
}

.wctx__drop button {
  flex: 0 0 auto;
}

/* The chosen folder, stated once. A canonical path is an identifier: it
   truncates, because three wrapped lines of it says nothing the first line
   and the last few characters do not. */
.wdir__cwd {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}

.wdir__cwd > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wdir__cwd strong {
  font-size: var(--t-card);
  font-weight: 500;
  color: var(--text-primary);
}

.wdir__cwd code,
.wdir__cwd .wpick__path {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--text-tertiary);
}

/* --- the roster's "one CLI for all" row ---
   Same control language as everything else on the screen: a bordered plate
   that fills when it is the choice, no pills, no second radius system. */

.sqcli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.sqcli__option {
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--t-label);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.sqcli__option:hover,
.sqcli__option:focus-visible {
  border-color: var(--line-control);
  color: var(--text);
}

.sqcli__option:active {
  transform: scale(0.98);
}

/* The current choice: full ink on a raised plate, edge included. */
.sqcli__option[data-active="true"] {
  border-color: var(--accent-hover);
  background: var(--surface-hover);
  color: var(--text-primary);
}

@media (max-width: 860px) {
  /* The rail wraps under the brand before it breaks; labels are what carry
     the steps, so they go nowhere. */
  .wiz--squad .wiz__top {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: var(--s-2);
  }

  /* The shared wizard drops step labels below 1180px; this rail is a tab
     strip across the whole window, so the words stay and the strip scrolls. */
  .wiz--squad .wiz__step-label {
    display: inline;
  }

  .wizbrand {
    margin-right: auto;
  }

  .wiz--squad .wiz__steps {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

@media (max-width: 720px) {
  .wiz--squad .wiz__body {
    padding-inline: var(--s-4);
  }

  /* Three tiles stop being a comparison below ~420px of content width, so
     they stack rather than squeeze their numbers. */
  .sqsizes {
    grid-template-columns: 1fr;
  }

  .sqagent__head {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .sqagent__index {
    display: none;
  }

  .sqagent__body {
    padding-left: calc(var(--s-2) + 28px + var(--s-3));
  }

  .wiz--squad .wiz__foot {
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
  }

  .wiz--squad .wiz__foot > .wiz__back {
    grid-column: 1;
    grid-row: 1;
  }

  .wiz--squad .wiz__foot > .wiz__foot-status,
  .wiz--squad .wiz__foot > .wiz__step-count {
    display: none;
  }

  .wiz--squad .wiz__foot > .wiz__next {
    grid-column: 2;
    justify-self: end;
  }
}

/* ==========================================================================
   Dashboard token activity — a desktop-wide, cross-CLI usage readout.
   ========================================================================== */

.dashboard {
  min-height: 100%;
  overflow-y: auto;
  background: var(--surface);
}

.token-activity {
  /* This dashboard is an explicitly violet data surface. Keep the override
     scoped here so unrelated app chrome remains monochrome. */
  --activity-empty: var(--bg-surface);
  --activity-low: color-mix(in srgb, var(--violet) 24%, var(--bg-surface));
  --activity-mid: color-mix(in srgb, var(--violet) 46%, var(--bg-surface));
  --activity-high: color-mix(in srgb, var(--violet) 72%, var(--bg-surface));
  --activity-peak: var(--violet-hover);
  --activity-text: var(--violet-text);
  --activity-ink: var(--violet-ink);
  --activity-cell: 11px;
  --activity-gap: 3px;
  width: min(1180px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(var(--s-6), 5vh, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-8);
  color: var(--text-primary);
}

.token-activity__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
}

.token-activity__eyebrow,
.token-activity__summary-label,
.token-activity__section-head,
.token-activity__chart-head p,
.token-activity__footer {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.token-activity__eyebrow {
  margin-bottom: var(--s-2);
  color: var(--activity-text);
}

.token-activity__title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--track-title);
  line-height: 1;
}

.token-activity__lede {
  max-width: 62ch;
  margin: var(--s-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.token-activity__refresh {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.token-activity__refresh-wrap {
  position: relative;
  flex: none;
}

.token-activity__refresh:hover:not(:disabled) {
  border-color: var(--text-secondary);
  background: var(--surface-active);
}

.token-activity__refresh:disabled {
  color: var(--text-tertiary);
  cursor: wait;
}

.token-activity__refresh:focus-visible,
.token-activity__tabs button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.token-activity__tabs {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-4) 0;
}

.token-activity__tabs button {
  padding: 0 0 var(--s-2);
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--sans);
  font-size: var(--t-label);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.token-activity__tabs button:hover,
.token-activity__tabs button[data-current="true"] {
  color: var(--text-primary);
}

.token-activity__tabs button[data-current="true"] {
  border-color: var(--activity-peak);
}

.token-activity__error,
.token-activity__loading {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--t-label);
}

.token-activity__error {
  border-color: var(--danger-border);
  color: var(--danger);
}

.token-activity__skeleton {
  overflow: hidden;
}

.token-activity__skeleton-block {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--text-tertiary) 13%, var(--bg-raised)) 20%,
    color-mix(in srgb, var(--activity-peak) 22%, var(--bg-raised)) 48%,
    color-mix(in srgb, var(--text-tertiary) 13%, var(--bg-raised)) 76%
  );
  background-size: 220% 100%;
  animation: token-activity-skeleton-shimmer 1.8s var(--ease-standard) infinite;
}

@keyframes token-activity-skeleton-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -100% 0; }
}

.token-activity__hero--skeleton {
  min-height: 150px;
}

.token-activity__skeleton-total {
  padding-right: var(--s-6);
  border-right: 1px solid var(--border-subtle);
}

.token-activity__skeleton-label {
  width: 74px;
  height: 9px;
}

.token-activity__skeleton-number {
  width: min(210px, 58%);
  height: 55px;
  margin-top: var(--s-2);
  border-radius: var(--radius-sm);
}

.token-activity__skeleton-copy {
  width: 164px;
  margin-top: var(--s-3);
}

.token-activity__metrics--skeleton {
  align-items: center;
}

.token-activity__metrics--skeleton div {
  align-items: flex-start;
}

.token-activity__skeleton-metric {
  width: 76px;
  height: 21px;
  border-radius: var(--radius-sm);
}

.token-activity__skeleton-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.token-activity__skeleton-heading > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.token-activity__skeleton-heading-title {
  width: 126px;
  height: 12px;
}

.token-activity__skeleton-heading-copy {
  width: 210px;
  height: 9px;
}

.token-activity__skeleton-period {
  width: 58px;
  height: 9px;
}

.token-activity__skeleton-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: 220px;
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 33%,
    var(--border-subtle) calc(33% + 1px),
    transparent calc(33% + 2px)
  );
}

.token-activity__skeleton-chart span {
  flex: 1;
  min-width: 5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--activity-peak) 30%, var(--bg-raised)),
    color-mix(in srgb, var(--activity-peak) 64%, var(--bg-raised))
  );
  animation: token-activity-skeleton-breathe 1.8s var(--ease-standard) infinite alternate;
}

.token-activity__skeleton-chart span:nth-child(3n) { animation-delay: -420ms; }
.token-activity__skeleton-chart span:nth-child(4n) { animation-delay: -780ms; }

@keyframes token-activity-skeleton-breathe {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

.token-activity__skeleton-chart-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-3) var(--s-2) 0;
}

.token-activity__skeleton-chart-labels span {
  width: 42px;
  height: 8px;
}

.token-activity__skeleton-provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.token-activity__skeleton-provider-list > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.token-activity__skeleton-provider-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

.token-activity__skeleton-provider-name {
  width: 92px;
  height: 11px;
}

.token-activity__skeleton-provider-total {
  width: 50px;
  height: 11px;
}

.token-activity__skeleton-provider-bar {
  height: 5px;
}

.token-activity__calendar-panel--skeleton {
  min-height: 215px;
}

.token-activity__skeleton-calendar {
  display: grid;
  grid-template-columns: repeat(28, var(--activity-cell));
  grid-auto-rows: var(--activity-cell);
  gap: var(--activity-gap);
  width: max-content;
  margin: var(--s-5) 0 0 28px;
}

.token-activity__skeleton-calendar span {
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-tertiary) 12%, var(--bg-raised));
  animation: token-activity-skeleton-shimmer 1.8s var(--ease-standard) infinite;
}

.token-activity__skeleton-calendar span:nth-child(4n) {
  background: color-mix(in srgb, var(--activity-peak) 28%, var(--bg-raised));
}

.token-activity__refresh-hint {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  right: 0;
  width: min(330px, calc(100vw - 48px));
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--activity-peak) 70%, var(--border-strong));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-surface) 96%, var(--activity-peak));
  box-shadow: 0 18px 38px rgb(0 0 0 / 24%);
  animation: token-activity-hint-in 420ms var(--ease-enter) both;
}

.token-activity__refresh-hint::before {
  position: absolute;
  top: -7px;
  right: 40px;
  width: 12px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--activity-peak) 70%, var(--border-strong));
  border-left: 1px solid color-mix(in srgb, var(--activity-peak) 70%, var(--border-strong));
  background: color-mix(in srgb, var(--bg-surface) 96%, var(--activity-peak));
  content: "";
  transform: rotate(45deg);
}

@keyframes token-activity-hint-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.token-activity__refresh-hint-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.token-activity__refresh-hint-copy strong {
  color: var(--text-primary);
  font-size: var(--t-body);
  font-weight: 650;
}

.token-activity__refresh-hint-copy span {
  color: var(--text-secondary);
  font-size: var(--t-label);
  line-height: var(--lh-body);
}

.token-activity__refresh-hint-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.token-activity__refresh-hint-actions button {
  min-height: 30px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
}

.token-activity__refresh-hint-dismiss {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
}

.token-activity__refresh-hint-dismiss:hover {
  color: var(--text-secondary);
}

.token-activity__refresh-hint-confirm {
  padding: 0 var(--s-3);
  border: 1px solid var(--activity-peak);
  background: var(--activity-peak);
  color: var(--activity-ink);
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.token-activity__refresh-hint-confirm:hover {
  border-color: var(--activity-peak);
  background: var(--activity-peak);
}

.token-activity__hero {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-6);
  padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--border-subtle);
}

.token-activity__hero-total {
  padding-right: var(--s-6);
  border-right: 1px solid var(--border-subtle);
}

.token-activity__summary-label {
  color: var(--text-secondary);
}

.token-activity__total {
  margin: var(--s-2) 0 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 700;
  letter-spacing: var(--track-display-m);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.token-activity__summary-copy {
  margin: var(--s-3) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

.token-activity__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: end;
}

.token-activity__metrics div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.token-activity__metrics span {
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

.token-activity__metrics strong {
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-title);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.token-activity__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.75fr);
  gap: var(--s-7);
  padding-top: var(--s-7);
}

.token-activity__chart-panel,
.token-activity__providers,
.token-activity__calendar-panel {
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.token-activity__chart-head,
.token-activity__section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.token-activity__chart-head p {
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.token-activity__chart-head span,
.token-activity__chart-period,
.token-activity__section-head span:last-child {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  letter-spacing: 0;
  text-transform: none;
}

.token-activity__chart-head > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.token-activity__chart-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  height: 220px;
  margin-top: var(--s-6);
}

.token-activity__chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 var(--s-3);
  color: var(--text-tertiary-mark);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.token-activity__trend {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.token-activity__grid-line {
  stroke: var(--border-subtle);
  stroke-dasharray: 3 7;
  stroke-width: 1;
}

.token-activity__trend-area {
  fill: url(#token-activity-fill);
}

.token-activity__trend-line {
  fill: none;
  stroke: var(--activity-peak);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.token-activity__trend-point {
  fill: var(--bg-raised);
  stroke: var(--activity-peak);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.token-activity__chart-x {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-2) 0 0 calc(var(--s-6) + var(--s-3));
  color: var(--text-tertiary-mark);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.token-activity__chart-x span:last-child {
  text-align: right;
}

.token-activity__chart-note {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

.token-activity__provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.token-activity__provider {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.token-activity__provider-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.token-activity__provider-name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--s-2);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--t-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-activity__provider-name svg {
  flex: none;
}

.token-activity__provider-heading strong {
  flex: none;
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
}

.token-activity__provider-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--meter-track);
}

.token-activity__provider-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--activity-high);
}

.token-activity__provider-note,
.token-activity__empty {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: var(--lh-body);
}

.token-activity__calendar-panel {
  margin-top: var(--s-7);
}

.token-activity__calendar-head,
.token-activity__calendar-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
}

.token-activity__calendar-head > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.token-activity__calendar-head h2,
.token-activity__calendar-head p {
  margin: 0;
}

.token-activity__calendar-head h2 {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.token-activity__calendar-head p,
.token-activity__calendar-head > span,
.token-activity__calendar-footer {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: var(--lh-body);
}

.token-activity__calendar-shell {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.token-activity__weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--activity-cell));
  row-gap: var(--activity-gap);
  padding-top: calc(var(--t-micro) + var(--s-2));
  color: var(--text-tertiary-mark);
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--activity-cell);
}

.token-activity__weekdays span:nth-child(1) { grid-row: 2; }
.token-activity__weekdays span:nth-child(2) { grid-row: 4; }
.token-activity__weekdays span:nth-child(3) { grid-row: 6; }

.token-activity__calendar-scroll {
  min-width: 0;
  overflow-x: auto;
  padding: 0 var(--s-1) 38px;
  scrollbar-width: thin;
}

.token-activity__months,
.token-activity__calendar {
  display: grid;
  width: max-content;
  column-gap: var(--activity-gap);
}

.token-activity__months {
  height: calc(var(--t-micro) + var(--s-2));
  color: var(--text-tertiary-mark);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.token-activity__months span {
  grid-column-end: span 3;
}

.token-activity__calendar {
  grid-template-rows: repeat(7, var(--activity-cell));
  row-gap: var(--activity-gap);
}

.token-activity__calendar-day,
.token-activity__legend i {
  width: var(--activity-cell);
  height: var(--activity-cell);
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
  border-radius: 3px;
  background: var(--activity-empty);
}

.token-activity__calendar-day {
  position: relative;
  padding: 0;
  cursor: default;
}

.token-activity__calendar-day[data-level="1"],
.token-activity__legend i[data-level="1"] { background: var(--activity-low); }
.token-activity__calendar-day[data-level="2"],
.token-activity__legend i[data-level="2"] { background: var(--activity-mid); }
.token-activity__calendar-day[data-level="3"],
.token-activity__legend i[data-level="3"] { background: var(--activity-high); }
.token-activity__calendar-day[data-level="4"],
.token-activity__legend i[data-level="4"] { background: var(--activity-peak); }

.token-activity__calendar-day[data-level]:not([data-level="0"]) {
  border-color: color-mix(in srgb, var(--activity-peak) 45%, var(--border-strong));
  cursor: help;
}

.token-activity__calendar-day::after {
  position: absolute;
  z-index: 4;
  top: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
  color: var(--text-primary);
  content: attr(data-tooltip);
  font-family: var(--sans);
  font-size: var(--t-micro);
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.token-activity__calendar-day:hover::after,
.token-activity__calendar-day:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.token-activity__calendar-day:focus-visible {
  z-index: 5;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.token-activity__calendar-footer {
  align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

.token-activity__legend {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-1);
}

.token-activity__legend i {
  display: block;
}

.token-activity__empty {
  margin: var(--s-5) 0 0;
}

.token-activity__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  padding-top: var(--s-5);
  color: var(--text-tertiary-mark);
  letter-spacing: 0;
  text-transform: none;
}

.token-activity__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.token-activity__status-dot[data-refreshing="true"] {
  background: var(--activity-peak);
}

@media (max-width: 900px) {
  .token-activity__hero,
  .token-activity__layout {
    grid-template-columns: 1fr;
  }

  .token-activity__hero-total {
    padding-right: 0;
    border-right: 0;
  }

  .token-activity__skeleton-total {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .token-activity {
    padding-right: var(--s-4);
    padding-left: var(--s-4);
  }

  .token-activity__head {
    flex-direction: column;
    gap: var(--s-4);
  }

  .token-activity__refresh {
    width: 100%;
  }

  .token-activity__refresh-wrap {
    width: 100%;
  }

  .token-activity__refresh-hint {
    right: auto;
    left: 0;
    width: min(330px, 100%);
  }

  .token-activity__refresh-hint::before {
    right: 42px;
  }

  .token-activity__metrics {
    gap: var(--s-3);
  }

  .token-activity__metrics strong {
    font-size: var(--t-label);
  }

  .token-activity__chart-panel,
  .token-activity__providers,
  .token-activity__calendar-panel {
    padding: var(--s-4);
  }

  .token-activity__calendar-head,
  .token-activity__calendar-footer {
    flex-direction: column;
    gap: var(--s-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .token-activity__refresh,
  .token-activity__tabs button,
  .token-activity__calendar-day::after,
  .token-activity__skeleton-block,
  .token-activity__skeleton-chart span,
  .token-activity__skeleton-calendar span,
  .token-activity__refresh-hint {
    transition: none;
    animation: none;
  }
}

/* The global reduce block already flattens every transition and zeroes every
   animation; these are named so the intent survives a future edit to it.
   Nothing here loops or moves on its own, so there is nothing else to switch
   off beyond the entrance on an opened agent row. */
@media (prefers-reduced-motion: reduce) {
  .wiz--squad .wiz__step-btn,
  .sqsize,
  .sqcli__option,
  .sqagent__value,
  .sqagent__value svg,
  .sqagent__options,
  .squnready summary svg,
  .wname__input {
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   Chat view — the same pane, rendered as a conversation.

   Everything here is the existing system: three surface steps, hairlines,
   the one amber accent (the send button is the pane's filled primary; slash
   chips take the accent tint), and the three state colours only where that
   state is true (+N / -N diff stats, error blocks). Tool rows sit a text
   step below assistant prose so the transcript reads as narrative with the
   machinery tucked underneath.
   ========================================================================== */

.chat-pane {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-app);
}

/* --- empty state ------------------------------------------------------- */

.chat-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: var(--s-5);
}

.chat-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  max-width: 560px;
}

.chat-empty__ascii {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--accent-hi);
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: pre;
}

.chat-empty__title {
  font-size: var(--t-20);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-align: center;
  color: var(--text-primary);
}

.chat-empty__repo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: var(--t-12);
  color: var(--text-secondary);
}

.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.chat-suggest button {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--t-12);
  color: var(--text-secondary);
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.chat-suggest button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.chat-suggest button:active {
  transform: scale(0.98);
}

/* --- composer ----------------------------------------------------------- */

.chat-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  transition: border-color var(--motion-fast) var(--ease);
}

.chat-composer[data-dragging="true"] {
  border-color: var(--accent);
  border-style: dashed;
}

.chat-composer[data-dragging="true"] .chat-composer__input,
.chat-composer[data-dragging="true"] .chat-composer__foot {
  opacity: 0.16;
}

.chat-composer__dropzone {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 1px dashed var(--accent);
  border-radius: inherit;
  background: rgba(24, 24, 27, 0.96);
  color: var(--text-primary);
  font-size: var(--t-13);
  pointer-events: none;
}

.chat-composer__skill-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3) 0;
}

.chat-composer__skill-suggestion {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 4px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-app);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-12);
  cursor: pointer;
}

.chat-composer__skill-suggestion:hover,
.chat-composer__skill-suggestion:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  outline: none;
}

.chat-composer__skill-suggestion small {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.chat-composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) 0;
}

.chat-composer__attachment {
  position: relative;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-app);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.chat-composer__attachment-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-app);
}

.chat-composer__attachment-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 14px var(--s-2) var(--s-1);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: var(--text-primary);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-composer__attachment-remove {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.62);
  color: var(--text-primary);
  transition: background var(--motion-fast) var(--ease);
}

.chat-composer__attachment-remove:hover {
  background: rgba(0, 0, 0, 0.88);
}

.chat-composer:focus-within {
  border-color: var(--border-strong);
}

.chat-composer[data-variant="docked"] {
  margin: 0 var(--s-2) var(--s-2);
  width: auto;
  flex: none;
}

.chat-composer__input {
  width: 100%;
  min-height: 34px;
  max-height: 180px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: var(--t-13);
  line-height: var(--lh-body);
  color: var(--text-primary);
  outline: none;
}

.chat-composer__input::placeholder {
  color: var(--text-tertiary);
}

.chat-composer__foot {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2);
  min-height: 34px;
}

.chat-composer__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.chat-attach:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.chat-attach:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.chat-composer__attachment-error {
  margin: 0;
  padding: 0 var(--s-3) var(--s-2);
  color: var(--danger);
  font-size: var(--t-11);
}

.chat-composer__meta {
  font-size: var(--t-11);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chat-composer > .chat-composer__meta {
  padding: 0 var(--s-3) var(--s-2);
  white-space: normal;
}

.chat-composer__spacer {
  flex: 1;
}

.chat-pick {
  position: relative;
}

.chat-pick__face {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  list-style: none;
  font-size: var(--t-11);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.chat-pick__face::-webkit-details-marker {
  display: none;
}

.chat-pick__key {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The chosen model's id can be long (`provider/model@variant`); the face
   truncates it, and the full string rides on the title attribute. */
.chat-pick__label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pick__face:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.chat-pick[open] .chat-pick__face {
  color: var(--text-primary);
}

.chat-pick__list {
  position: absolute;
  bottom: calc(100% + var(--s-1));
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 400px;
  /* Bounded so a long model list scrolls instead of stretching off-screen. */
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
}

.chat-pick__list button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--t-13);
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 32px;
}

.chat-pick__list button:hover:not(:disabled) {
  background: var(--surface-hover);
}

/* Search input inside pick lists with many items (model dropdowns). */
.chat-pick__search {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: var(--t-13);
  outline: none;
  margin-bottom: var(--s-1);
}

.chat-pick__search::placeholder {
  color: var(--text-tertiary);
}

.chat-pick__search:focus {
  border-color: var(--line-control);
}

.chat-pick__list button[data-selected="true"] {
  background: var(--accent-soft);
}

.chat-pick__list button:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}.chat-pick__list small {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

.chat-pick__empty {
  padding: var(--s-3);
  text-align: center;
  font-size: var(--t-12);
  color: var(--text-tertiary);
}




.chat-pick__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.chat-pick__dot[data-ready="true"] {
  background: var(--state-run);
}

.chat-mode {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-mode button {
  padding: 2px var(--s-2);
  border: 0;
  background: transparent;
  font-size: var(--t-11);
  color: var(--text-tertiary);
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.chat-mode button[data-active="true"] {
  background: var(--surface-active);
  color: var(--text-primary);
}

.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-ink);
  transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.chat-send:hover:not(:disabled) {
  background: var(--accent-hover);
}

.chat-send:active:not(:disabled) {
  transform: scale(0.94);
}

.chat-send:disabled {
  background: var(--surface-active);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.chat-pick__bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--composer-bolt);
  margin-right: 2px;
}

.chat-voice-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--composer-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  outline: none;
}

.chat-voice-pill:hover:not(:disabled) {
  background: var(--composer-white);
  transform: scale(1.04);
}

.chat-voice-pill:active:not(:disabled) {
  transform: scale(0.96);
}

.chat-voice-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-voice-pill--active {
  background: var(--composer-record) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
  animation: ps-voice-pulse 1.5s infinite;
}

.chat-voice-pill__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  height: 16px;
}

.chat-voice-pill__bar {
  width: 2px;
  border-radius: 1px;
  background: var(--composer-ink);
  transition: height 0.15s ease, background 0.15s ease;
}

.chat-voice-pill--active .chat-voice-pill__bar {
  background: var(--composer-white);
}

.chat-voice-pill__bar.bar-1 { height: 4px; }
.chat-voice-pill__bar.bar-2 { height: 9px; }
.chat-voice-pill__bar.bar-3 { height: 14px; }
.chat-voice-pill__bar.bar-4 { height: 9px; }
.chat-voice-pill__bar.bar-5 { height: 4px; }

.chat-voice-pill--active .bar-1 { animation: ps-voice-wave 0.8s ease-in-out infinite alternate; animation-delay: 0.1s; }
.chat-voice-pill--active .bar-2 { animation: ps-voice-wave 0.8s ease-in-out infinite alternate; animation-delay: 0.3s; }
.chat-voice-pill--active .bar-3 { animation: ps-voice-wave 0.8s ease-in-out infinite alternate; animation-delay: 0.5s; }
.chat-voice-pill--active .bar-4 { animation: ps-voice-wave 0.8s ease-in-out infinite alternate; animation-delay: 0.2s; }
.chat-voice-pill--active .bar-5 { animation: ps-voice-wave 0.8s ease-in-out infinite alternate; animation-delay: 0.4s; }

@keyframes ps-voice-wave {
  0% { height: 3px; }
  50% { height: 15px; }
  100% { height: 5px; }
}

@keyframes ps-voice-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.chat-user__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s-1);
}

.chat-user__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: var(--t-11);
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  user-select: none;
}

.chat-user__badge--auto {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.25);
  color: var(--composer-bolt);
}

.chat-user__badge--mode {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.chat-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.chat-stop:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* --- working status with purple glow animation --- */

.chat-working-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  margin: var(--s-1) 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--composer-send) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--composer-send) 24%, transparent);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--text-primary);
  width: fit-content;
  align-self: flex-start;
  animation: ps-glow-pulse 2.2s ease-in-out infinite alternate;
}

.chat-working-glow {
  font-weight: 600;
  background: linear-gradient(
    90deg,
    var(--glow-shimmer-start) 0%,
    var(--glow-shimmer-mid) 45%,
    var(--glow-shimmer-end) 70%,
    var(--glow-shimmer-start) 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ps-purple-shimmer 2.2s linear infinite;
}

.chat-working-detail {
  color: var(--text-secondary);
  font-weight: 400;
}

.chat-working-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chat-working-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--composer-send);
  animation: ps-dot-bounce 1.4s ease-in-out infinite;
}

.chat-working-dot.dot-1 {
  animation-delay: 0s;
}

.chat-working-dot.dot-2 {
  animation-delay: 0.2s;
}

.chat-working-dot.dot-3 {
  animation-delay: 0.4s;
}

@keyframes ps-dot-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes ps-purple-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes ps-glow-pulse {
  0% {
    box-shadow: 0 0 10px color-mix(in srgb, var(--composer-send) 18%, transparent);
    border-color: color-mix(in srgb, var(--composer-send) 22%, transparent);
  }
  100% {
    box-shadow: 0 0 22px color-mix(in srgb, var(--composer-send) 40%, transparent);
    border-color: color-mix(in srgb, var(--composer-send) 40%, transparent);
  }
}

/* --- transcript ---------------------------------------------------------- */

.chat-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-3) var(--s-3) var(--s-4);
  overscroll-behavior: contain;
}

.chat-notice {
  align-self: center;
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

.chat-notice[data-waiting="true"] {
  animation: ps-pulse var(--dur-pulse) ease-in-out infinite;
}

.chat-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.chat-user__bubble {
  position: relative;
  max-width: 70%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-13);
  line-height: var(--lh-body);
}

.chat-user__cmds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
}

.chat-user__cmd {
  padding: 0 var(--s-1);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--accent-hi);
}

.chat-user__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.chat-user__attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.chat-user__attachment {
  position: relative;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-app);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.chat-user__attachment-image {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-app);
  object-fit: cover;
}

.chat-user__attachment-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 14px var(--s-2) var(--s-1);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: var(--text-primary);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-user__bubble[data-clamped="true"] .chat-user__text {
  max-height: calc(8 * 1.5 * var(--t-13));
  overflow: hidden;
  /* The fade tells you there is more before the button says so. The `#000`
     here is a mask, not a colour: in a mask, black means "opaque" and the
     channel that matters is alpha. It is not the UI drawing pure black. */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.chat-user__more {
  margin-top: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-11);
  color: var(--text-secondary);
}

.chat-user__more:hover {
  color: var(--text-primary);
}

.chat-assistant {
  width: min(76ch, 100%);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-raised), var(--bg-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* The streaming caret rides the last block, blinking on the liveness clock. */
.chat-assistant[data-streaming="true"] .chatmd > :last-child::after {
  content: "▍";
  margin-left: 2px;
  color: var(--accent);
  animation: ps-pulse var(--dur-live) ease-in-out infinite;
}

/* --- markdown ------------------------------------------------------------ */

.chatmd {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-13);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.chatmd__p {
  overflow-wrap: anywhere;
}

.chatmd__p:first-of-type {
  font-size: var(--t-14);
  line-height: 1.6;
}

.chatmd__heading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--text-primary);
}

.chatmd__heading[data-level="1"],
.chatmd__heading[data-level="2"] {
  font-size: var(--t-15);
}

.chatmd__heading-mark {
  width: 4px;
  height: 18px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.chatmd__heading[data-level="3"] .chatmd__heading-mark,
.chatmd__heading[data-level="4"] .chatmd__heading-mark {
  height: 12px;
  background: var(--border-strong);
}

.chatmd__list {
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
}

.chatmd__list li {
  position: relative;
  padding-left: var(--s-5);
  overflow-wrap: anywhere;
}

.chatmd__list li::before {
  content: "·";
  position: absolute;
  top: 0;
  left: var(--s-2);
  color: var(--accent-hi);
  font-weight: 700;
}

ol.chatmd__list {
  counter-reset: chat-item;
}

ol.chatmd__list li {
  counter-increment: chat-item;
}

ol.chatmd__list li::before {
  content: counter(chat-item, decimal-leading-zero);
  left: 0;
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

.chatmd__quote {
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  color: var(--text-secondary);
}

.chatmd__quote-mark {
  font-family: Georgia, serif;
  font-size: var(--t-20);
  line-height: 0.8;
  color: var(--accent-hi);
}

.chatmd__quote .chatmd {
  gap: var(--s-2);
}

.chatmd__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.chatmd__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: var(--t-12);
}

.chatmd__table th,
.chatmd__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.chatmd__table th {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.chatmd__table td {
  color: var(--text-secondary);
}

.chatmd__table tbody tr:last-child td {
  border-bottom: 0;
}

.chatmd__rule {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--s-2) 0;
}

.chatmd__inline-code {
  padding: 1px var(--s-1);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--text-primary);
}

.chatmd__link {
  color: var(--accent-hi);
  text-decoration: none;
}

.chatmd__link:hover {
  text-decoration: underline;
}

.chatmd__fence {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-app);
  overflow: hidden;
}

.chatmd__ascii {
  border-color: var(--border-strong);
  background: var(--bg-app);
}

.chatmd__ascii .chatmd__fence-bar {
  background: var(--bg-raised);
}

.chatmd__ascii .chatmd__code {
  color: var(--accent-hi);
  letter-spacing: 0.03em;
}

.chatmd__fence-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}

.chatmd__fence-lang {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

.chatmd__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 1px var(--s-1);
  border: 0;
  border-radius: var(--radius);
  background: none;
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

.chatmd__copy:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.chatmd__code {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--t-12);
  line-height: 1.6;
  white-space: pre;
  color: var(--text-primary);
}

/* --- tool rows ----------------------------------------------------------- */

.chat-tools {
  max-width: 76ch;
}

.chat-tools__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: none;
  font-size: var(--t-12);
  color: var(--text-tertiary);
  text-align: left;
  transition: color var(--motion-fast) var(--ease);
}

.chat-tools__row:hover {
  color: var(--text-secondary);
}

.chat-tools__summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-tools__stats {
  font-family: var(--mono);
  font-size: var(--t-11);
  white-space: nowrap;
}

.chat-tools__added {
  color: var(--ok-text);
}

.chat-tools__removed {
  color: var(--bad-text);
}

.chat-tools__chevron {
  display: inline-flex;
  color: var(--text-tertiary-mark);
}

.chat-tools__detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-1);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
}

.chat-tools__call-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.chat-tools__call[data-errored="true"] .chat-tools__call-head {
  color: var(--bad-text);
}

.chat-tools__body {
  margin: var(--s-1) 0 0;
  padding: var(--s-2);
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

/* Agent transcript tool disclosure: a quiet activity rail with the active
   call readable at a glance and the group still available as history. */
.agentpg__convo .chat-tools--agent {
  width: min(100%, 720px);
  max-width: none;
  align-self: flex-start;
}

.agentpg__convo .chat-tools--agent .chat-tools__row {
  width: fit-content;
  min-height: 28px;
  padding: 3px 8px 3px 4px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--t-13);
}

.agentpg__convo .chat-tools--agent .chat-tools__row:hover,
.agentpg__convo .chat-tools--agent .chat-tools__row:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-primary);
}

.agentpg__convo .chat-tools--agent .chat-tools__summary {
  overflow: visible;
  color: inherit;
}

.agentpg__convo .chat-tools--agent .chat-tools__detail {
  gap: 0;
  margin: 2px 0 0 18px;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.agentpg__convo .chat-tools__call--agent {
  padding: 8px 10px 9px 0;
}

.agentpg__convo .chat-tools__call--agent .chat-tools__call-head {
  gap: 8px;
  min-height: 20px;
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--text-primary);
}

.agentpg__convo .chat-tools__call--agent .chat-tools__call-head > svg {
  flex: none;
  color: var(--accent-hover);
}

.agentpg__convo .chat-tools__call-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.agentpg__convo .chat-tools__call-state {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--ok-text);
}

.agentpg__convo .chat-tools__call-state[data-error="true"] {
  color: var(--bad-text);
}

.agentpg__convo .chat-tools__call-state .chat-spin {
  width: 12px;
  height: 12px;
}

.agentpg__convo .chat-tools__result {
  max-width: 66ch;
  margin: 3px 0 0 20px;
  color: var(--text-secondary);
  font-size: var(--t-13);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agentpg__convo .chat-tools__result--working {
  color: var(--text-tertiary);
  animation: ps-pulse var(--dur-live) ease-in-out infinite;
}

/* --- permissions, errors, raw ------------------------------------------- */

.chat-permission {
  max-width: 76ch;
  padding: var(--s-3);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

.chat-permission__title {
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--text-primary);
}

.chat-permission__input {
  margin: var(--s-2) 0;
  padding: var(--s-2);
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--bg-app);
  font-family: var(--mono);
  font-size: var(--t-12);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.chat-permission__actions {
  display: flex;
  gap: var(--s-2);
}

.chat-permission__allow {
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-12);
  font-weight: 500;
}

.chat-permission__allow:hover {
  background: var(--accent-hover);
}

.chat-permission__deny {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-12);
}

.chat-permission__deny:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.chat-permission__done {
  font-size: var(--t-12);
  color: var(--text-tertiary);
}

.chat-permission__label {
  font-family: var(--mono);
}

.chat-error {
  max-width: 76ch;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  background: var(--error-soft);
  font-size: var(--t-12);
  color: var(--bad-text);
  overflow-wrap: anywhere;
}

.chat-raw {
  max-width: 100%;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  overflow-x: auto;
  border-left: 1px solid var(--border-subtle);
  font-family: var(--mono);
  font-size: var(--t-12);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.chat-jump {
  position: absolute;
  /* Clear of the docked composer: two spacing steps of the largest size. */
  bottom: calc(var(--s-8) + var(--s-8));
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  font-size: var(--t-11);
  color: var(--text-primary);
}

/* The last spinner in the app, replaced. Same rhythm as the mark's satellites
   and the loading button, so "working" looks like one idea everywhere. */
.chat-spin {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: mark-think var(--dur-pulse) var(--ease) infinite;
}

.tpane__actions {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  display: inline-flex;
  gap: var(--s-1);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease);
}

.tpane:hover .tpane__actions,
.tpane:focus-within .tpane__actions {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .chat-notice[data-waiting="true"],
  .chat-assistant[data-streaming="true"] .chatmd > :last-child::after {
    animation: none;
  }

  .chat-send:active:not(:disabled),
  .chat-suggest button:active {
    transform: none;
  }
}

/* The mixed-modes badge on the sidebar's Chat toggle. */
.wside__item-count {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

/* Narrow panes wrap the composer's controls rather than clipping them. */
.chat-composer__foot {
  flex-wrap: wrap;
}

/* --- stack tasks: one prompt, one worktree, one branch --- */

/* Numerics compare down a column; anything counted or measured sits in mono. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* The task chip beside the brand: branch in the tooltip, port in the bar.
   Quiet by design — the port is a fact, not a state. */
.term-task {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-2);
  padding: 0 var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: default;
}

/* One pane's own starting folder, in the terminal bar. The chip names the
   folder by its last segment and opens the picker; the tiny reset shows up
   only once the pane has been pointed off the project root, and puts it back.
   Both apply to the pane's *next* session: the running process is not moved. */
.term-dir {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.term-dir__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 22ch;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-11);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.term-dir__chip:hover,
.term-dir__chip:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

/* When the pane has a directory of its own, say so plainly: the chip is how
   the operator sees that this terminal differs from the rest of the grid. */
.term-dir[data-custom="true"] .term-dir__chip {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.term-dir__reset {
  padding: 1px var(--s-1);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--t-11);
  cursor: pointer;
}

.term-dir__reset:hover,
.term-dir__reset:focus-visible {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* The folder picker's refusal, said under the bar. It is about the pane's
   next session, not the running one, so it reads as a note rather than an
   alarm. */
.term-dir-error {
  padding: var(--s-1) var(--s-3);
  border-bottom: 1px solid var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
  font-size: var(--t-11);
  line-height: 1.4;
}

/* Reconcile's findings: one line above the grid, gone once acted on. It
   reserves no space when absent, and arriving shifts only the grid below it —
   never a running terminal's content. */
.stack-leftovers {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.stack-leftovers__text {
  flex: 1 1 auto;
  font-size: var(--t-12);
  color: var(--text-secondary);
}

/* Preparing: the pane reads as working before the terminal exists. */
.tpane__prep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.tpane__prep-line {
  font-size: var(--t-13);
  color: var(--text);
}

/* A failed prepare shows its evidence in place, scrollable, never truncated
   in storage even though the pane clips the view. */
.tpane__evidence {
  max-width: 100%;
}

.tpane__evidence summary {
  font-size: var(--t-11);
  color: var(--text-secondary);
  cursor: pointer;
}

.tpane__evidence-text {
  max-height: 180px;
  max-width: 52ch;
  margin: var(--s-2) 0 0;
  padding: var(--s-2);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  white-space: pre-wrap;
}

/* The primary action on a completed attempt (for example, Review). */
.tpane__start--task {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.tpane__start--task:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

/* The ten-second undo after a discard, inline where the discard happened. */
.tpane__undo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  color: var(--text-secondary);
}

.tpane__undo-btn {
  padding: 0 var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--t-11);
}

.tpane__undo-btn:hover {
  border-color: var(--accent);
}

/* The task dialog's prompt field, first because the prompt is the task. */
.task-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.task-prompt__input {
  width: 100%;
  min-height: 96px;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: var(--t-13) / var(--lh-body) var(--sans);
  resize: vertical;
  outline: none;
}

.task-prompt__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- the evidence surface ---

   The second material. The workbench is dense because machines work there;
   the evidence is paper because a person reads there and decides. The boundary
   is crisp: no gradient between the two, no half-lit surface.

   Paper is a *material*, not a theme, and it is defined as a shift away from
   whatever bench it happens to sit on, in four dimensions at once:

     warmer        — the bench is cool and very slightly violet; paper is warm
                     grey. In the dark theme it is also far lighter, but in the
                     light theme it is barely lighter at all (1.05:1), and the
                     warmth is what still reads. Lightness alone would not
                     survive the light theme; warmth does.
     more contrast — body ink is 16.5:1 here against the bench's 15.6:1. You
                     read here, so the floor is higher.
     rules, not fills — structure is ruled lines. No tinted panels, no cards.
     narrower measure — the column caps at 68ch, not the pane width.

   The typeface change is the fourth signal and the loudest: IBM Plex instead
   of Switzer/Commit Mono. This is a deliberate exception to the type rules,
   because a reader should know they have moved before they have read a word.

   Nothing here borrows the bench's accent, and the bench borrows no paper. The
   accent used to be the one exception, arriving here as the press shade — but
   the bench's accent is grey now, and a grey borrowed onto cream reads as a
   smudge rather than as emphasis. Paper states its own. */

:root {
  --paper-000: #f7f5f0;
  --paper-100: #efede6;
  --paper-200: #e4e1d8;
  --paper-500: #5c594f; /* 6.43:1 — metadata. Was #6d726d at 4.02:1, which failed. */
  --paper-900: #17161a; /* 16.53:1 */
  --paper-800: #2e2c33; /* the ink's hover step */
  --paper-rule: #d8d5cb;

  /* The accent on paper. Stated rather than borrowed from the bench: aliasing
     this to --accent-press tied paper's emphasis to a token that has since gone
     grey, and 4.24:1 on this ground is below the floor for type. A darker step
     of paper's own ink family, which is what emphasis on paper should be. */
  --paper-accent: #45423a; /* 8.29:1 on --paper-000 */

  /* Verdict colors. Only ever a verdict: never emphasis, never decoration. */
  --verdict-pass: #2f6b4f;
  --verdict-fail: #a02f24;
  --verdict-work: #8a6410;

  /* The spine's resting segments: visible history, never a verdict. */
  --spine-idle: #b9b5a9;

  /* Change marks in a diff. Their own tokens, not the verdict's. */
  --paper-add: #dfe8dc;
  --paper-add-ink: #27503a;
  --paper-del: #f0dfd9;
  --paper-del-ink: #6d3529;

  --ev-sans: "IBM Plex Sans", var(--sans);
  --ev-cond: "IBM Plex Sans Condensed", var(--ev-sans);
  --ev-mono: "IBM Plex Mono", var(--mono);
}

.wmain {
  position: relative;
}

.evidence {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--paper-000);
  color: var(--paper-900);
  font-family: var(--ev-sans);
  /* The one orchestrated moment: a firm wipe, like turning something over. */
  animation: ev-wipe 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.evidence:focus {
  outline: none;
}

@keyframes ev-wipe {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evidence {
    animation: none;
  }
}

.evidence__bar {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-7) var(--s-3);
  border-bottom: 1px solid var(--paper-rule);
  background: var(--paper-000);
}

.evidence__bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  min-width: 0;
}

.evidence__bar-row--figures {
  margin-top: var(--s-2);
}

.evidence__title {
  flex: 1 1 auto;
  min-width: 12ch;
  margin: 0;
  overflow: hidden;
  font-family: var(--ev-sans);
  font-size: var(--t-body-l);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence__branch {
  flex: 0 1 auto;
  max-width: 26ch;
  overflow: hidden;
  font-family: var(--ev-mono);
  font-size: var(--t-micro);
  color: var(--paper-500);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence__spacer {
  flex: 1 1 auto;
}

/* The number that matters most: how big is this change. Read in a second. */
.evidence__figures {
  font-family: var(--ev-mono);
  font-size: var(--t-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.evidence__asof {
  font-family: var(--ev-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--paper-500);
}

/* A verdict badge. The only colored word on the surface. */
.evidence__verdict {
  padding: 2px var(--s-2);
  /* A neutral chip by default, so a stateless one still sits in the column
     with the verdicts rather than floating. */
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  color: var(--paper-500);
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence__verdict[data-verdict="work"] {
  color: var(--verdict-work);
  border: 1px solid color-mix(in srgb, var(--verdict-work) 45%, var(--paper-000));
}

.evidence__verdict[data-verdict="pass"] {
  color: var(--verdict-pass);
  border: 1px solid color-mix(in srgb, var(--verdict-pass) 45%, var(--paper-000));
}

.evidence__verdict[data-verdict="fail"] {
  color: var(--verdict-fail);
  border: 1px solid color-mix(in srgb, var(--verdict-fail) 45%, var(--paper-000));
}

.ev-btn {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--paper-900);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper-900);
  font-family: var(--ev-sans);
  font-size: var(--t-meta);
  font-weight: 500;
  transition: background var(--dur-1) var(--ease);
}

.ev-btn:hover:not(:disabled) {
  background: var(--paper-100);
}

.ev-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.ev-btn:disabled {
  border-color: var(--paper-rule);
  color: var(--paper-500);
  cursor: not-allowed;
}

.ev-btn--primary {
  background: var(--paper-900);
  color: var(--paper-000);
  font-weight: 600;
}

.ev-btn--primary:hover:not(:disabled) {
  background: var(--paper-800);
}

.ev-btn--primary:disabled {
  background: var(--paper-200);
  border-color: var(--paper-200);
  color: var(--paper-500);
}

.ev-btn--quiet {
  border-color: var(--paper-rule);
  color: var(--paper-500);
}

.evidence :focus-visible {
  outline: 2px solid var(--paper-900);
  outline-offset: 2px;
}

.evidence__error {
  margin: var(--s-2) 0 0;
  font-size: var(--t-meta);
  color: var(--verdict-fail);
}

.evidence__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-5) var(--s-7) var(--s-9);
}

.evidence__empty {
  margin-top: 18vh;
  text-align: center;
  font-size: var(--t-body);
}

.evidence__empty-hint {
  margin-top: var(--s-2);
  font-size: var(--t-meta);
  color: var(--paper-500);
}

/* One changed file: a header you can find from across the room, then rows. */
.evfile {
  max-width: 1040px;
  margin: 0 auto var(--s-6);
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: var(--paper-000);
  overflow: hidden;
}

.evfile__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--paper-rule);
  background: var(--paper-100);
}

.evfile__status {
  flex: 0 0 auto;
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-500);
}

.evfile__path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--ev-mono);
  font-size: var(--t-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evfile__counts {
  flex: 0 0 auto;
  font-family: var(--ev-mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  color: var(--paper-500);
}

.evfile__note {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-meta);
  color: var(--paper-500);
}

.evfile__body {
  overflow-x: auto;
}

.evdiff {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ev-mono);
  font-size: var(--t-meta);
  line-height: 1.6;
}

.evdiff__no {
  width: 1%;
  min-width: 3.5ch;
  padding: 0 var(--s-2);
  border-right: 1px solid var(--paper-rule);
  background: var(--paper-100);
  color: var(--paper-500);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
  vertical-align: top;
}

.evdiff__line {
  padding: 0 var(--s-4) 0 var(--s-2);
  white-space: pre;
}

.evdiff__sign {
  display: inline-block;
  width: 1.5ch;
  user-select: none;
  color: var(--paper-500);
}

.evdiff__row[data-kind="add"] .evdiff__line {
  background: var(--paper-add);
  color: var(--paper-add-ink);
}

.evdiff__row[data-kind="del"] .evdiff__line {
  background: var(--paper-del);
  color: var(--paper-del-ink);
}

.evdiff__gap {
  padding: var(--s-1) var(--s-4);
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-500);
}

/* --- the history rail: the attempt's line of return points --- */

.evidence__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-6);
  align-items: start;
  max-width: 1380px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .evidence__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Narrow: the history sits above the files, still one glance away. */
  .evidence__rail {
    order: -1;
    position: static;
  }
}

.evidence__main {
  min-width: 0;
}

.evidence__main .evfile {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.evidence__rail {
  position: sticky;
  top: 0;
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: var(--paper-000);
  padding: var(--s-3) var(--s-4) var(--s-4);
}

.evidence__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.evidence__rail-title {
  margin: 0;
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-500);
}

.evidence__rail-dirty {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro);
  color: var(--verdict-work);
}

.evhistory {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evhistory__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--paper-rule);
}

.evhistory__row:first-child {
  border-top: 0;
}

.evhistory__row[data-head="true"] .evhistory__label {
  font-weight: 600;
}

.evhistory__text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.evhistory__label {
  overflow: hidden;
  font-size: var(--t-meta);
  line-height: var(--lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evhistory__meta {
  font-family: var(--ev-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--paper-500);
}

.evidence__rail-hint {
  margin: var(--s-3) 0 0;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--paper-500);
}

/* --- the gate: verified, not just finished --- */

/* The verdict dot on a task pane's chip: pass, fail, or working. The one
   place the verdict colors appear on the workbench, because a verdict is
   exactly what they are for. */
.term-task[data-verdict]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: var(--s-1);
  border-radius: var(--radius-full);
}

.term-task[data-verdict="pass"]::before {
  background: var(--verdict-pass);
}

.term-task[data-verdict="fail"]::before {
  background: var(--verdict-fail);
}

.term-task[data-verdict="work"]::before {
  background: var(--verdict-work);
}

/* The gate strip: one quiet row of instruments under the figures. */
.evidence__gate {
  margin-top: var(--s-2);
}

.evidence__gate-none {
  font-size: var(--t-micro);
  color: var(--paper-500);
}

.evgate-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper-500);
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evgate-chip:disabled {
  cursor: default;
}

.evgate-chip[data-open="true"] {
  border-color: var(--paper-900);
  color: var(--paper-900);
}

/* Status is carried by the glyph and the word, color only confirms it. */
.evgate-chip[data-status="passed"] .evgate-chip__glyph {
  color: var(--verdict-pass);
}

.evgate-chip[data-status="failed"] .evgate-chip__glyph,
.evgate-chip[data-status="refused"] .evgate-chip__glyph {
  color: var(--verdict-fail);
}

.evgate-chip[data-status="running"] .evgate-chip__glyph {
  color: var(--verdict-work);
}

.evgate-chip__glyph {
  font-family: var(--ev-mono);
  font-weight: 500;
}

.evgate-chip__time {
  font-family: var(--ev-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* One check's output, read in place. The full log lives on disk untouched. */
.evgate-out {
  margin-top: var(--s-2);
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: var(--paper-100);
}

.evgate-out__summary {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-meta);
}

.evgate-out__text {
  max-height: 200px;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  overflow: auto;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--ev-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--paper-900);
}

/* --- best-of-N: candidates side by side, spines adjacent --- */

.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  max-width: 1380px;
  margin: 0 auto;
}

.race-card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: var(--paper-000);
  overflow: hidden;
}

/* The signature: the candidate's whole run as one 4px column. Segments are
   stretches between checkpoints, proportional to duration, separated by
   hairline ticks; only the bottom — the present — carries a verdict color,
   and only while live does it breathe. */
.race-spine {
  display: flex;
  flex: 0 0 4px;
  flex-direction: column;
  background: var(--paper-100);
}

.race-spine__seg {
  min-height: 6px;
  background: var(--spine-idle);
  border-top: 1px solid var(--paper-000);
}

.race-spine__seg:first-child {
  border-top: 0;
}

.race-spine__seg--now[data-verdict="pass"] {
  background: var(--verdict-pass);
}

.race-spine__seg--now[data-verdict="fail"] {
  background: var(--verdict-fail);
}

.race-spine__seg--now[data-verdict="work"] {
  background: var(--verdict-work);
}

.race-spine__seg--now[data-live="true"] {
  animation: race-breathe var(--dur-pulse) var(--ease) infinite alternate;
}

@keyframes race-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-spine__seg--now[data-live="true"] {
    animation: none;
  }
}

.race-card__body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}

.race-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.race-card__agent {
  font-family: var(--ev-sans);
  font-size: var(--t-body);
  font-weight: 600;
}

/* The elimination facts, in the plan's priority order, compared down a
   column: verdict, size of change, wall clock. */
.race-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
}

.race-card__fact {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.race-card__fact dt {
  flex: 0 0 64px;
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-500);
}

.race-card__fact dd {
  margin: 0;
  font-size: var(--t-label);
}

.race-card__fact dd.mono {
  font-family: var(--ev-mono);
  font-variant-numeric: tabular-nums;
}

.race-card__note {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--verdict-fail);
}

.race-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
}

.race-hint {
  max-width: 1380px;
  margin: var(--s-4) auto 0;
  font-size: var(--t-micro);
  color: var(--paper-500);
}

/* The per-pane agent choice inside the race fieldset. */
.race-agent {
  margin-left: auto;
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-12);
}

/* --- the merge queue: an ordered list, live per item --- */

.queue-list {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border: 1px solid var(--paper-rule);
  border-radius: var(--radius);
  background: var(--paper-000);
}

.queue-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--paper-rule);
}

.queue-row:first-child {
  border-top: 0;
}

/* An excluded row stays legible but reads as out of the run. */
.queue-row[data-included="false"] {
  opacity: 0.55;
}

.queue-row[data-state="skipped"] {
  background: var(--paper-100);
}

.queue-row__ordinal {
  flex: 0 0 2ch;
  font-family: var(--ev-mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  color: var(--paper-500);
  text-align: right;
}

.queue-row__text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.queue-row__title {
  overflow: hidden;
  font-size: var(--t-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-row__meta {
  font-family: var(--ev-mono);
  font-size: var(--t-micro);
  color: var(--paper-500);
}

.queue-row__detail {
  font-size: var(--t-micro);
  color: var(--paper-500);
}

.queue-row[data-state="blocked"] .queue-row__detail {
  color: var(--verdict-fail);
}

.queue-row__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.queue-row__include {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--ev-cond);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-500);
}

/* ==========================================================================
   Shell chrome — titlebar, status bar, file rail

   The sidebar and product windows sit on --bg-surface. The titlebar and status
   bar use --bg-void, while only an open workspace opts its exposed canvas into
   that same void.
   ========================================================================== */

[data-platform="macos"] {
  /* Room for the traffic lights, measured against the standard macOS inset. */
  --tbar-lights: 72px;
}

/* Fullscreen has no traffic lights, so the corner held clear for them is just
   a hole with the title floating to its right. Closing it puts the title and
   its controls back against the left edge. See `watchFullscreen`. */
[data-platform="macos"][data-fullscreen="true"] {
  --tbar-lights: 0px;
}

/* --- titlebar --- */

.tbar {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
  height: var(--tbar-h);
  padding: 0 var(--s-2) 0 var(--s-3);
  border-bottom: 0;
  background: var(--bg-void);
  user-select: none;
}

.tbar__side {
  display: flex;
  align-items: center;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
}

.tbar__side--left {
  grid-column: 1;
  justify-content: flex-start;
}

/* The expanded sidebar ends at --sidebar-w. Keep its titlebar control on that
   same edge, with a small inset so the larger button does not feel cramped. */
.app:not([data-rail="true"]) .tbar__side--left {
  box-sizing: border-box;
  width: calc(var(--sidebar-w) - var(--s-3));
  padding-right: var(--s-2);
  justify-content: space-between;
}

.tbar__side--right {
  grid-column: 3;
  justify-content: flex-end;
  overflow: visible;
}

.tbar__lights {
  flex: none;
  width: var(--tbar-lights);
}

.tbar__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  color: var(--text-primary);
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Match the launcher mark: white satellites and edges, with the hub carrying
   the scoped violet accent from the block above. */
.tbar__mark {
  color: var(--text-primary);
}

.tbar__group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.tbar__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  background: transparent;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.tbar__btn--sidebar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
}

.tbar__btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.tbar__btn[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.tbar__btn:disabled {
  color: var(--text-tertiary-mark);
}

.tbar__sep {
  width: 1px;
  height: 16px;
  margin: 0 var(--s-1);
  background: var(--border-subtle);
}

/* --- product switcher ---
   Agent / Swarm / ProofSpace / Check, centred in the titlebar. One pill holding
   four equal segments, and a raised "thumb" that slides under the current one
   rather than appearing where it is — the thumb is filled with the text
   colour and set in the app ground colour, a light chip on the dark shell,
   exactly like the reference's switcher. Selection is marked by that surface
   alone: no accent, no ring, no glow. */

.prodsw {
  /* Keep the navigation centered on the app window even when the titlebar's
     side controls or parent layout do not occupy the full viewport width. */
  position: absolute;
  top: 50%;
  left: 50vw;
  transform: translate(-50%, -50%);
  flex: none;
}

.prodsw__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
}

/* The sliding thumb. Sized to the active segment and moved by transform so
   the slide stays on the compositor. It asks for --accent-solid, which is
   grey everywhere except here: .prodsw is a scoped-violet root, so the thumb
   fills with the brand purple. Selection is marked by that surface alone:
   no ring, no glow. */
.prodsw__thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent-solid);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--motion-normal) var(--ease-standard),
    width var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
  will-change: transform, width;
}

/* Off a product route no segment is current, so the thumb hides rather than
   sitting under the first segment and claiming Home is ProofSwarm. */
.prodsw__thumb:not([data-hidden="true"]) {
  opacity: 1;
}

.prodsw__seg {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* One step of padding, so each segment is its own word and nothing more:
     the switcher reads as four labels, not four boxes. */
  padding: 7px 14px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.prodsw__seg:active:not([data-current="true"]) {
  background: var(--surface-active);
}

.prodsw__seg:hover:not([data-current="true"]) {
  color: var(--text-primary);
}

/* The current label rides the violet thumb: --accent-ink resolves to the
   violet ink inside this scoped root, light on the purple fill in both
   themes. */
.prodsw__seg[data-current="true"] {
  color: var(--accent-ink);
  font-weight: 600;
}

.prodsw__seg:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Keep all four products reachable as the side clusters tighten. The title is
   the first non-essential item to yield; traffic-light clearance and controls
   remain, while segment padding contracts without changing the four columns. */
@media (max-width: 760px) {
  .tbar {
    gap: var(--s-1);
    padding-right: var(--s-1);
  }

  .tbar__title {
    display: none;
  }

  .prodsw__seg {
    padding-inline: 8px;
  }
}

@media (max-width: 560px) {
  .tbar__sep {
    display: none;
  }

  .tbar__btn {
    width: 26px;
  }

  .tbar__btn--sidebar {
    width: 36px;
  }

  .prodsw__seg {
    padding-inline: 5px;
  }
}

/* --- add pane --- */

/* The anchor the menu hangs from. It has to be the wrapper rather than the
   button, because the button is a grid cell and the menu is not in it. */
.addpane {
  position: relative;
  display: flex;
  align-items: center;
}

/* Right-aligned: the cluster is against the right edge, and a left-aligned
   panel would run off the window. */
.addpane__menu {
  position: absolute;
  top: calc(100% + var(--s-1));
  right: 0;
  /* Above the working area's own overlays: the evidence surface sits at 40 and
     leaves the titlebar clickable, so a menu opened from there has to be
     readable rather than behind it. */
  z-index: 50;
  width: 264px;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  animation: sbar-pop var(--motion-normal) var(--ease-standard);
  cursor: default;
}

.addpane__question {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  line-height: 1.4;
}

.addpane__note {
  margin: 0;
  padding: 0 var(--s-1) var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.addpane__error {
  margin: var(--s-1) 0 0;
  padding: 0 var(--s-1);
  color: var(--danger);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.addpane__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Twelve agents is taller than the window has room for above the grid. */
  max-height: 320px;
  overflow-y: auto;
}

.addpane__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: transparent;
  font-size: var(--t-label);
  text-align: left;
  transition: background var(--motion-fast) var(--ease-standard);
}

.addpane__row:hover:not(:disabled),
.addpane__row:focus-visible {
  background: var(--bg-hover);
}

.addpane__row:disabled {
  color: var(--text-tertiary);
}

/* The empty pane is a real choice, not an agent. The rule says so once,
   rather than repeating it in every row's copy — and only when there is
   something above it to be separated from. */
.addpane__list li:not(:first-child) .addpane__row[data-empty="true"] {
  margin-top: var(--s-1);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-top: calc(var(--s-2) + 1px);
}

.addpane__glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.addpane__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addpane__hint {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

/* --- status bar --- */

.sbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--sbar-h);
  padding: 0 var(--s-3);
  background: var(--bg-void);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  user-select: none;
}

/* --- usage cluster (bottom left) --- */

/* The anchor for the usage panel, so overflow stays visible here and the
   clipping of a too-long readout happens on the button inside. */
.sbar__usage {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

/* The whole readout is one button: every number in it opens the same panel. */
.sbar__usage-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 20px;
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.sbar__usage-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

/* One provider: glyph, bar, then a text segment per quota window. */
.sbar__seg {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}

/* "No reading" wears the warn colour on its glyph only. Kimi never has one,
   and a bar-length of amber that can never go away is a false alarm. */
.sbar__seg-alert {
  display: grid;
  place-items: center;
  color: var(--warn-text);
}

.sbar__refresh {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.sbar__refresh:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.sbar__dot {
  color: var(--border-strong);
}

.sbar__glyph {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

/* 48×3, per the spec. The track is always drawn — an absent reading is a track
   with no fill, which reads as "nothing known" rather than as "0% used". */
.sbar__bar {
  position: relative;
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--meter-track);
  overflow: hidden;
}

.sbar__bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--meter-fill);
  /* Colour is the only signal that changes across the thresholds. Width is
     data; nothing here pulses, grows or moves to get attention. */
  transition:
    width var(--motion-normal) var(--ease-standard),
    background var(--motion-normal) var(--ease-standard);
}

/* Past the thresholds the fill becomes the ramp, sized to the 48px track so
   the gradient is positional: only the *end* of a full bar is red, which keeps
   "100% used" legible without painting a solid alarm strip into permanent
   chrome. Tones still exist so the thresholds stay in one place (usage.ts). */
.sbar__bar-fill[data-tone="warn"],
.sbar__bar-fill[data-tone="danger"] {
  background: var(--meter-ramp);
  background-size: 48px 100%;
}

.sbar__meter-text {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* --- resources (bottom right) --- */

.sbar__res {
  position: relative;
  margin-left: auto;
  flex: none;
}

.sbar__res-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 20px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.sbar__res-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.sbar__res-item {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* The popover. Anchored bottom-right so it opens over the app rather than
   pushing the bar around. */
.sbar__pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--s-2));
  z-index: 40;
  width: 360px;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  animation: sbar-pop var(--motion-normal) var(--ease-standard);
}

@keyframes sbar-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.sbar__pop-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.sbar__pop-spacer {
  flex: 1;
}

.sbar__pop-empty {
  padding: var(--s-4) var(--s-2);
  color: var(--text-tertiary);
  text-align: center;
}

.sbar__pop-list {
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.sbar__pop-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}

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

.sbar__pop-glyph {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}

.sbar__pop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbar__pop-num {
  flex: none;
  min-width: 56px;
  color: var(--text-tertiary);
  text-align: right;
}

.sbar__pop-kill {
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  line-height: 1;
}

.sbar__pop-kill:hover {
  color: var(--danger);
  background: var(--error-soft);
}

/* Destructive, and it says so in colour rather than in a filled red box.
   One click — the undo toast is the safety net, not a confirm step. */
.sbar__pop-killall {
  width: 100%;
  margin-top: var(--s-1);
  padding: var(--s-2);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  color: var(--danger);
  background: transparent;
  font-size: var(--t-micro);
  font-weight: 500;
}

.sbar__pop-killall:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.sbar__pop-killall:disabled {
  color: var(--text-tertiary-mark);
}

.sbar__undo,
.sbar__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--text-secondary);
}

.sbar__error {
  color: var(--bad-text);
}

.sbar__undo-btn {
  border: 0;
  border-radius: var(--radius-xs);
  padding: 2px var(--s-2);
  color: var(--text-primary);
  background: var(--bg-hover);
  font-size: var(--t-micro);
  font-weight: 500;
}

.sbar__undo-btn:hover {
  background: var(--surface-active);
}

/* --- the usage panel ---
   Anchored bottom-left, over the app. The same numbers as the bar — it never
   fetches on its own — with room for every window, when each resets, and how
   stale the reading is behind a row's chevron. */

.upop {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--s-2));
  z-index: 40;
  width: 340px;
  padding: var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-2);
  animation: sbar-pop var(--motion-normal) var(--ease-standard);
}

.upop__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
}

.upop__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.upop__scope {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.upop__refresh {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
}

.upop__refresh:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

/* Detailed | Compact. A pill track with the active density raised one step. */
.upop__tabs {
  display: flex;
  margin: 0 var(--s-2) var(--s-2);
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
}

.upop__tab {
  flex: 1;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
}

.upop__tab[data-active="true"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.upop__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.upop__empty {
  margin: 0;
  padding: var(--s-4) var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.upop__row-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-2);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  text-align: left;
  font-size: var(--t-micro);
}

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

.upop__row-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.upop__row-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--s-1);
}

.upop__row-title-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.upop__row-name {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.upop__row-sub {
  overflow: hidden;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upop__row-meters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-variant-numeric: tabular-nums;
}

.upop__meter {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.upop__meter-label {
  color: var(--text-tertiary);
}

.upop__meter-bar {
  position: relative;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--meter-track);
  overflow: hidden;
}

.upop__meter-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--meter-fill);
}

.upop__meter-fill[data-tone="warn"] {
  background: var(--meter-warn);
}

.upop__meter-fill[data-tone="danger"] {
  background: var(--meter-danger);
}

/* The number takes the colour of its state; the label stays quiet. */
.upop__meter-pct {
  color: var(--text-secondary);
}

.upop__meter-pct[data-tone="warn"] {
  color: var(--warn-text);
}

.upop__meter-pct[data-tone="danger"] {
  color: var(--bad-text);
}

.upop__row-compact {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.upop__chevron {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--text-tertiary);
}

/* A row's numbers unabridged: every window, its reset, and how stale the
   reading is. Indented past the glyph so it reads as the row's own. */
.upop__detail {
  padding: 0 var(--s-2) var(--s-3) calc(24px + var(--s-2) + var(--s-3));
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.upop__detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}

.upop__detail-label {
  color: var(--text-secondary);
}

.upop__detail-note {
  margin: var(--s-1) 0 0;
}

.upop__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-2);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 500;
}

.upop__link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* --- file rail --- */

.frail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow: hidden;
}

.frail__head {
  flex: none;
  margin: 0;
  padding: var(--s-3);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* With no workspace open: one line, centred, and no invitation to go and find
   a folder. The rail follows the workspace or it says nothing. */
.frail__empty {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: var(--s-5);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  text-align: center;
}

.frail__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 var(--s-2) var(--s-3);
  overflow-y: auto;
  list-style: none;
}

.frail__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 26px;
  padding-right: var(--s-2);
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-meta);
  text-align: left;
}

.frail__row:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.frail__glyph {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--text-tertiary);
}

.frail__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Empty state — the launcher, rebuilt to the reference's stack

   Tile, wordmark, one line, two buttons, shortcuts. The old version put the
   mark and wordmark on one row and the two products in a vertical list; this
   is the same information in the reference's shape, which reads as a landing
   surface rather than as a menu.
   ========================================================================== */

/* The 96px tile. The mark sits inside rather than floating on the page, which
   is what stops the empty state reading as an unfinished screen. It renders at
   full fidelity here — white satellites, violet hub (see "Scoped violet") —
   because this is the one surface where the mark *is* the content. */
.home__tile {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
  color: var(--text-primary);
}

.home__brand {
  display: none;
}

.home__wordmark {
  margin-top: var(--s-5);
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 700;
  letter-spacing: var(--track-display-m);
  line-height: 1;
  color: var(--text-primary);
}

/* The tagline reads as the wordmark's subline: one type step down and one
   colour step down, not two of each — that gap is the hierarchy. */
.home__lede {
  margin-top: var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-body);
  text-align: center;
}

/* Entrance: the column arrives top to bottom — mark, name, line, actions,
   keys, status. Decorative, so `backwards` fill; the reduced-motion block
   zeroes both the durations and these delays, collapsing it to a cut. */
.home__tile,
.home__wordmark,
.home__lede,
.home__error,
.home__action,
.home__foot {
  animation: home-enter var(--dur-enter) var(--ease-enter) backwards;
}

.home__wordmark {
  animation-delay: 50ms;
}

.home__lede {
  animation-delay: 100ms;
}

.home__error {
  animation-delay: 130ms;
}

/* The rows arrive in reading order, 40ms apart — the stack assembling itself
   top to bottom is the whole entrance, so nothing else here is staggered. */
.home__action {
  animation-delay: 160ms;
}

.home__action:nth-child(2) {
  animation-delay: 200ms;
}

.home__action:nth-child(3) {
  animation-delay: 240ms;
}

.home__action:nth-child(4) {
  animation-delay: 280ms;
}

.home__foot {
  animation-delay: 340ms;
}

@keyframes home-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* One column, full width. The rows are read top to bottom, so the gap is one
   step tighter than the space above them: four rows are one object. */
.home__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-self: stretch;
  margin-top: var(--s-7);
}

/* Icon, name over line, chevron. The three columns are fixed so the names
   start on the same x across all four rows — that alignment is what lets the
   list be scanned without reading it. */
.home__action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--bg-panel);
  text-align: left;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

/* Secondary is the same shape with no fill — the difference between the first
   way in and the rest is one surface step, not a colour. */
.home__action[data-variant="secondary"] {
  background: transparent;
}

.home__action:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.home__action:active {
  background: var(--surface-active);
}

/* The icon sits in its own tile so the row has a left edge to align to. */
.home__action-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-tertiary);
  transition:
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.home__action:hover .home__action-icon {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.home__action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home__action-title {
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* What the mode does, in one line. It wraps rather than truncates: this is the
   only place the product explains itself, so it is not worth an ellipsis. */
.home__action-note {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: 1.35;
  transition: color var(--motion-fast) var(--ease-standard);
}

.home__action:hover .home__action-note {
  color: var(--text-secondary);
}

/* Absent until the pointer or focus is on the row, then it slides into place. */
.home__action-go {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.home__action:hover .home__action-go,
.home__action:focus-visible .home__action-go {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   First run

   Owns the whole window: no sidebar, no status bar, nothing behind it. The
   scale here is deliberately larger than anywhere else in the app — this is
   the one surface with a single question on it, and the app's usual density
   argument does not apply when there is nothing to be dense about.

   This is one of the two scopes where the accent family is violet (see
   "Scoped violet" in the token block). The checked card is the choice the user
   just made, and that is the one thing on a first-run screen worth colour.
   ========================================================================== */

.onboard {
  display: flex;
  justify-content: center;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-app);
}

.onboard__sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  min-height: 100%;
  padding: var(--s-8) var(--s-7) var(--s-5);
}

.onboard__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-body-l);
  font-weight: 600;
}

/* Three ticks and a count. A tick is a rule, not a dot: it reads as progress
   along a line rather than as three unrelated lamps. */
.onboard__progress {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-top: var(--s-8);
}

.onboard__tick {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--border-strong);
  transition: background var(--motion-normal) var(--ease-standard);
}

.onboard__tick[data-state="done"] {
  background: var(--text-tertiary);
}

.onboard__tick[data-state="current"] {
  width: 40px;
  background: var(--text-primary);
}

.onboard__count {
  margin-left: var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}

.onboard__body {
  flex: 1;
  padding-top: var(--s-7);
}

.onboard__eyebrow {
  margin: 0 0 var(--s-4);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.onboard__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-display-l);
  font-weight: 700;
  letter-spacing: var(--track-display-l);
  line-height: 1.05;
  color: var(--text-primary);
}

.onboard__lede {
  max-width: 56ch;
  margin: var(--s-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.onboard__lede--tight {
  margin-top: var(--s-1);
  font-size: var(--t-label);
  color: var(--text-tertiary);
}

.onboard__section {
  margin: var(--s-7) 0 0;
  color: var(--text-primary);
  font-size: var(--t-body-l);
  font-weight: 600;
}

.onboard__group {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-7) 0 var(--s-3);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* Green means "found", which is a state that is actually true — the one hue
   on this screen that is not the accent. */
.onboard__group-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.onboard__group-count {
  color: var(--text-tertiary);
}

.onboard__group-count::before {
  content: "· ";
}

.onboard__none {
  margin: 0;
  padding: var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

/* --- agent cards --- */

.onb-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.onb-agent {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.onb-agent:hover {
  border-color: var(--line-control);
  background: var(--surface-hover);
}

/* Selected. Inside `.onboard` the accent family is violet, so this one rule
   is the violet ring — nothing here names a purple. */
.onb-agent[data-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}

/* An agent the machine does not have is offered but is honest about it. */
.onb-agent[data-installed="false"] {
  opacity: 0.62;
}

.onb-agent__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: var(--surface-active);
}

.onb-agent__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.onb-agent__name {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.onb-agent__cmd {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.onb-agent__check,
.onb-theme__check {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  color: var(--accent-ink);
  background: var(--accent);
}

.onboard__more {
  margin-top: var(--s-4);
  padding: 0;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
}

.onboard__more:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- permissions ---
   Two cards rather than a checkbox: the choice is between two states the user
   has to live with, and a checkbox only ever describes one of them. */

.onb-permissions {
  margin-top: var(--s-8);
  padding: 0;
  border: 0;
}

.onb-permissions__legend {
  padding: 0 0 var(--s-3);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.onb-permissions__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

@media (max-width: 620px) {
  .onb-permissions__options {
    grid-template-columns: 1fr;
  }
}

.onb-permission {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.onb-permission:hover {
  border-color: var(--line-control);
  background: var(--surface-hover);
}

/* The same violet ring the agent cards use, for the same reason: it marks the
   choice the user just made, and only inside `.onboard`. */
.onb-permission[data-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}

.onb-permission__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.onb-permission__note {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.onb-permissions__reach {
  margin: var(--s-3) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.45;
}

/* --- theme cards --- */

.onb-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}

.onb-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.onb-theme:hover {
  border-color: var(--line-control);
}

.onb-theme[data-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
}

/* The miniature. Literal values, because a preview of the theme you are *not*
   in cannot use a theme-reactive token — both cards would show the same
   thing. Same reason as the Settings swatches. */
.onb-theme__preview {
  display: flex;
  height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
}

.onb-theme__preview[data-preview="dark"] {
  background: var(--preview-dark-bg);
}

.onb-theme__preview[data-preview="light"] {
  background: var(--preview-light-bg);
}

.onb-theme__preview-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34%;
  padding: 0 8px;
}

.onb-theme__preview-mid {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  width: 30%;
  padding: 8px 6px;
}

.onb-theme__preview-main {
  flex: 1;
}

.onb-theme__preview i {
  display: block;
  height: 4px;
  border-radius: 2px;
}

.onb-theme__preview[data-preview="dark"] i {
  background: var(--preview-dark-line);
}

.onb-theme__preview[data-preview="dark"] .onb-theme__preview-main {
  background: var(--preview-dark-panel);
}

.onb-theme__preview[data-preview="light"] i {
  background: var(--preview-light-line);
}

.onb-theme__preview[data-preview="light"] .onb-theme__preview-main {
  background: var(--preview-light-panel);
}

.onb-theme__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 var(--s-1) var(--s-1);
}

.onb-theme__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.onb-theme__hint {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.onboard__note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.onboard__note strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- notifications --- */

/* Amber, and it is a warning about the machine rather than about the app. A
   tint and a hairline, never a filled banner. */
.onb-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding: var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.onb-warn svg {
  flex: none;
  margin-top: 2px;
}

.onb-warn__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-label);
}

.onb-warn__text strong {
  font-weight: 600;
}

.onb-sound {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.onb-sound__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
}

.onb-sound__controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.onb-sound__select {
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-primary);
  background: var(--bg-app);
  font-size: var(--t-label);
}

.onb-sound__test {
  height: 32px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
}

.onb-sound__test:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.onboard__tested {
  margin: var(--s-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

/* --- footer --- */

.onboard__foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

.onboard__foot-spacer {
  flex: 1;
}

.onboard__skip {
  padding: 0;
  border: 0;
  color: var(--text-tertiary);
  background: transparent;
  font-size: var(--t-label);
}

.onboard__skip:hover {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.onboard__back {
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
}

.onboard__back:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* The one primary on the screen. Violet here, because inside `.onboard` the
   accent family is violet and this is the action the step exists for. */
.onboard__next {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-ink);
  background: var(--accent-solid);
  font-size: var(--t-label);
  font-weight: 500;
}

.onboard__next:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.onboard__next kbd {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--violet-press) 55%, transparent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

/* ==========================================================================
   Settings — two panes

   A fixed nav on the left and one panel on the right, rather than one long
   scrolling page. Settings is looked *up*, not read: the nav is the index, and
   the search filters it because "where is that setting" is the question a
   settings search is actually asked.
   ========================================================================== */

.sset {
  display: grid;
  grid-template-columns: var(--sset-nav-w) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

:root {
  --sset-nav-w: 260px;
}

.sset {
  display: grid;
  grid-template-columns: var(--sset-nav-w) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}

/* --- nav --- */

.sset__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  padding: var(--s-4) var(--s-3) var(--s-6);
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow-y: auto;
}

.sset__nav-top {
  display: flex;
  align-items: center;
}

.sset__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 30px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: var(--bg-raised);
  font-size: var(--t-meta);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.sset__back:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.sset__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-tertiary);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.sset__search:focus-within {
  border-color: var(--line-control);
  background: var(--bg-app);
  box-shadow: 0 0 0 1px var(--line-control);
}

.sset__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--t-meta);
  outline: none;
}

/* The wrapper owns this compound control's focus ring. */
.sset__search-input:focus-visible {
  box-shadow: none;
}

.sset__search-input::placeholder {
  color: var(--text-tertiary);
}

.sset__search-input::-webkit-search-cancel-button {
  appearance: none;
}

.sset__search-clear {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  color: var(--text-secondary);
  cursor: pointer;
}

.sset__search-clear:hover {
  color: var(--text-primary);
  background: var(--border-strong);
}

.sset__nav-sections {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-1);
}

.sset__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.sset__group-label {
  margin: 0 0 var(--s-1) var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.sset__group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sset__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: transparent;
  font-size: var(--t-label);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.sset__item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.sset__item[data-current="true"] {
  color: var(--text-primary);
  background: var(--bg-raised);
  border-color: var(--border-subtle);
  font-weight: 600;
}

.sset__item[data-current="true"]::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--rail-accent);
  height: 14px;
  content: "";
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: translateY(-50%);
}

.sset__item-icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--text-tertiary);
  transition: color var(--motion-fast) var(--ease-standard);
}

.sset__item:hover .sset__item-icon,
.sset__item[data-current="true"] .sset__item-icon {
  color: var(--text-primary);
}

.sset__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sset__item-badge {
  flex: none;
  padding: 1px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
}

.sset__no-match {
  padding: var(--s-5) var(--s-2);
  text-align: center;
}

.sset__no-match-text {
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
}

.sset__no-match-sub {
  margin-top: var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

/* --- Settings Main Body --- */

.sset__body {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-app);
}

.sset__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-9);
}

.sset__head {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.sset__head-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.sset__head-divider {
  color: var(--border-strong);
}

.sset__head-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sset__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
  line-height: var(--lh-tight);
}

.sset__title-badge {
  flex: none;
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.sset__lede {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.sset__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Hide duplicated inner header for plugins when rendered inside Settings */
.sset .plug__head {
  display: none;
}

.sset .plug__filters {
  margin-bottom: var(--s-4);
}

/* --- Theme Picker Grid --- */

.themepick {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.themepick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}

.themepick__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.themepick__card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.themepick__card[data-selected="true"] {
  border-color: var(--accent-line);
  background: var(--bg-raised);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.themepick__preview {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.themepick__preview[data-theme-preview="dark"] {
  background: var(--preview-dark-bg);
}

.themepick__preview[data-theme-preview="light"] {
  background: var(--preview-light-bg);
}

.themepick__preview-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.themepick__preview-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.themepick__preview[data-theme-preview="light"] .themepick__preview-dots {
  border-color: var(--preview-light-line);
}

.themepick__preview-dots span {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  opacity: 0.5;
}

.themepick__preview-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  flex: 1;
  min-height: 0;
}

.themepick__preview-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-right: 1px solid var(--border-subtle);
}

.themepick__preview[data-theme-preview="dark"] .themepick__preview-side {
  background: var(--preview-dark-surface);
  border-color: var(--preview-dark-line);
}

.themepick__preview[data-theme-preview="light"] .themepick__preview-side {
  background: var(--preview-light-surface);
  border-color: var(--preview-light-line);
}

.themepick__preview-line {
  display: block;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--text-tertiary);
  opacity: 0.3;
}

.themepick__preview-line--short {
  width: 60%;
  opacity: 0.6;
}

.themepick__preview-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
}

.themepick__preview-card {
  position: relative;
  height: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

.themepick__preview[data-theme-preview="dark"] .themepick__preview-card {
  background: var(--preview-dark-panel);
  border-color: var(--preview-dark-line);
}

.themepick__preview[data-theme-preview="light"] .themepick__preview-card {
  background: var(--preview-light-panel);
  border-color: var(--preview-light-line);
}

.themepick__preview-accent-dot {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: translateY(-50%);
}

.themepick__info {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.themepick__label-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.themepick__icon {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}

.themepick__name {
  flex: 1;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.themepick__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--surface-active);
}

.themepick__desc {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

/* --- Notifications & Audio Settings --- */

.notif {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.notif__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.notif__section {
  padding: var(--s-5);
}

.notif__section + .notif__section {
  border-top: 1px solid var(--border-subtle);
}

.notif__section > .agents__perm-info {
  margin-top: var(--s-4);
}

.notif__section[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.notif__header-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
}

.notif__icon-box {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.notif__text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.notif__desc {
  max-width: 54ch;
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.notif__switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.notif__switch-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--motion-fast) var(--ease-standard);
}

.notif__switch[aria-checked="true"] .notif__switch-track {
  background: var(--text-primary);
}

.notif__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.notif__switch[aria-checked="true"] .notif__switch-thumb {
  transform: translateX(18px);
  background: var(--bg-app);
}

.notif__volume-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.notif__slider {
  width: 140px;
  height: 4px;
  appearance: none;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  outline: none;
  cursor: pointer;
}

.notif__slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--text-primary);
  cursor: pointer;
}

.notif__volume-value {
  min-width: 38px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-align: right;
}

.notif__hint {
  padding: 0 var(--s-2);
}

.notif__hint-text {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

/* --- Remote Access -------------------------------------------------------- */

.remote {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.remote__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.remote__section {
  padding: var(--s-5);
}

.remote__section + .remote__section {
  border-top: 1px solid var(--border-subtle);
}

.remote__setting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
}

.remote__heading {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.remote__copy {
  max-width: 60ch;
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.remote__switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.remote__switch-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--motion-fast) var(--ease-standard);
}

.remote__switch[aria-checked="true"] .remote__switch-track {
  background: var(--text-primary);
}

.remote__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.remote__switch[aria-checked="true"] .remote__switch-thumb {
  transform: translateX(18px);
  background: var(--bg-app);
}

.remote__status-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.remote__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
}

.remote__status[data-state="connected"] {
  border-color: var(--run-line);
  color: var(--ok-text);
  background: var(--run-soft);
}

.remote__status[data-state="reconnecting"] {
  border-color: var(--warn-line);
  color: var(--warn-text);
  background: var(--warn-soft);
}

.remote__status[data-state="error"] {
  border-color: var(--error-line);
  color: var(--bad-text);
  background: var(--error-soft);
}

.remote__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.remote__status[data-state="connected"] .remote__status-dot {
  background: var(--ok);
}

.remote__status[data-state="error"] .remote__status-dot {
  background: var(--bad);
}

.remote__status[data-state="connecting"] .remote__status-dot {
  background: var(--warn);
  animation: mark-think var(--dur-pulse) var(--ease) infinite;
}

.remote__status[data-state="reconnecting"] .remote__status-dot {
  background: var(--warn);
  animation: mark-think var(--dur-pulse) var(--ease) infinite;
}

.remote__device-id {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.remote__key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.remote__key-input {
  flex: 1 1 16rem;
  min-width: 12rem;
  height: 2rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: var(--t-meta);
}

.remote__device-id code {
  color: var(--text-secondary);
  font-family: var(--mono);
}

.remote__mobile-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
}

.remote__mobile-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.remote__mobile-body {
  min-width: 0;
}

.remote__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--bg-app) 80%, transparent);
  backdrop-filter: blur(4px);
}

.remote__modal {
  width: min(100%, 460px);
  padding: var(--s-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-modal);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2);
}

.remote__modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.remote__eyebrow {
  margin: 0 0 2px;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.remote__modal-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
}

.remote__modal-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.remote__modal-close:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.remote__modal-lede {
  margin: var(--s-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.remote__qr-shell {
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  min-height: 300px;
  margin: var(--s-5) auto 0;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-000);
}

.remote__qr {
  display: block;
  width: min(280px, 100%);
  height: auto;
}

.remote__qr-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  padding: var(--s-5);
  color: var(--paper-500);
  font-size: var(--t-meta);
  text-align: center;
}

.remote__qr-placeholder--expired {
  color: var(--verdict-fail);
  font-weight: 600;
}

.remote__expires {
  margin: var(--s-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-label);
  text-align: center;
}

.remote__expires strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.remote__expires--expired {
  color: var(--bad-text);
}

.remote__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ==========================================================================
   Agents Panel
   ========================================================================== */

.agents {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.agents__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.agents__block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.agents__heading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.agents__count {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
}

.agents__note {
  max-width: 68ch;
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.agents__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s-3);
}

.agents__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.agents__card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.agents__card[data-selected="true"] {
  border-color: var(--accent-line);
  background: var(--surface-active);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.agents__card[data-installed="false"] {
  opacity: 0.6;
}

.agents__card-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.agents__card-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface-active);
}

.agents__card-icon--auto {
  color: var(--ok-text);
}

.agents__card-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agents__card-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--border-strong);
}

.agents__card-desc {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: var(--lh-heading);
}

/* Permissions block */

.agents__perm-info {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.agents__perm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface-active);
}

.agents__perm-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.agents__perm-info + .agents__perm-info {
  margin-top: var(--s-3);
}

.agents__perm-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.agents__perm-desc {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

/* Segmented control */

.segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.segmented__option {
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.segmented__option:hover {
  color: var(--text-primary);
}

.segmented__option[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--surface-active);
  font-weight: 600;
}

/* Gateways */

.gateway-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gateway-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.gateway-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.gateway-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.gateway-card__sub {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.gateway-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.gateway-card__fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
}

.gateway-card__fact-label {
  color: var(--text-tertiary);
}

.gateway-card__fact-value {
  color: var(--text-secondary);
}

.gateway-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gateway-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.gateway-card__field-label {
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.gateway-card__input {
  height: 32px;
}

.gateway-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Agents list & Row */

.agents__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.agents__empty {
  padding: var(--s-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.agents__empty-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.agents__empty-sub {
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.arow {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.arow:hover {
  border-color: var(--border-strong);
}

.arow[data-open="true"] {
  border-color: var(--line-control);
  background: var(--bg-surface);
}

.arow__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.arow__summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.arow__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-active);
}

.arow__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.arow__name-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.arow__name {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.arow__version {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.arow__cmd {
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arow__badges {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.arow__default-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  background: var(--surface-active);
  font-size: var(--t-micro);
  font-weight: 600;
}

.arow__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
}

.arow__act {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.arow__act:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.arow__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-app);
}

.arow__facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.arow__fact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arow__fact-item--full {
  grid-column: 1 / -1;
}

.arow__fact-label {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.arow__fact-value {
  color: var(--text-primary);
  font-size: var(--t-meta);
}

.arow__env-code {
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.arow__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.arow__section-title {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.arow__hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.arow__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.arow__cap-pill {
  display: inline-flex;
  padding: 2px var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: var(--t-micro);
}

.arow__note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.arow__warnings {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.arow__warning-line {
  margin: 0;
  color: var(--warn-text);
  font-size: var(--t-meta);
}

.arow__advice {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent);
  background: var(--bg-surface);
}

.arow__advice-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-meta);
}

.arow__command-box {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-meta);
}

/* Agent editor form */

.agentedit {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.agentedit__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.agentedit__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.agentedit__label {
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.agentedit__input {
  height: 32px;
}

.agentedit__hint {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.agentedit__objection {
  margin: 0;
  color: var(--bad-text);
  font-size: var(--t-meta);
}

.agentedit__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.arow__footer-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ==========================================================================
   AI Provider Accounts
   ========================================================================== */

.paccts {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.pacct {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.pacct__top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.pacct__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
}

.pacct__id {
  flex: 1;
  min-width: 0;
}

.pacct__name-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pacct__name {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.pacct__type-badge {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
}

.pacct__sub {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.pacct__docs {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.pacct__docs:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.pacct__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.pacct__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
}

.pacct__hint {
  max-width: 60ch;
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.pacct__add {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
  min-height: 28px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-primary);
  background: var(--bg-raised);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.pacct__add:hover {
  background: var(--surface-hover);
  border-color: var(--line-control);
}

.pacct__new {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.pacct__input {
  flex: 1;
  min-width: 0;
  height: 32px;
}

.pacct__new-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.pacct__fresh {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--run-line);
  border-radius: var(--radius);
  background: var(--run-soft);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.pacct__fresh p {
  margin: 0;
}

.pacct__fresh strong {
  color: var(--text-primary);
}

.pacct__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pacct__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.pacct__row:hover {
  border-color: var(--border-strong);
}

.pacct__row[data-active="true"] {
  border-color: var(--line-control);
  background: var(--surface-hover);
}

.pacct__row-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface-active);
}

.pacct__row-text {
  flex: 1;
  min-width: 0;
}

.pacct__row-name-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.pacct__row-name {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.pacct__row-detail {
  margin: 1px 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.pacct__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--s-2);
  border: 1px solid var(--run-line);
  border-radius: var(--radius-full);
  color: var(--ok-text);
  background: var(--run-soft);
  font-size: var(--t-micro);
  font-weight: 600;
}

.pacct__row-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.pacct__remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.pacct__remove:hover {
  color: var(--bad-text);
  background: var(--error-soft);
}

.pacct__unsupported {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.pacct__unsupported-text {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.pacct__empty {
  padding: var(--s-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.pacct__empty-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.pacct__empty-sub {
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

/* ==========================================================================
   Model Providers
   ========================================================================== */

.provs {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.provs__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.provs__heading {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.provs__note {
  max-width: 60ch;
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.provs__count-badge {
  padding: 2px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
}

.provs__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.prov {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.prov:hover {
  border-color: var(--border-strong);
}

.prov__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.prov__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
}

.prov__id {
  flex: 1;
  min-width: 0;
}

.prov__title-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.prov__name {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.prov__plan-badge {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 500;
}

.prov__plan-badge--ready {
  color: var(--ok-text);
  background: var(--run-soft);
  border-color: var(--run-line);
}

.prov__plan-badge--offline {
  color: var(--text-tertiary);
  background: var(--bg-raised);
}

.prov__summary {
  max-width: 54ch;
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.prov__meta {
  flex: none;
}

.prov__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-3);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 500;
  white-space: nowrap;
}

.prov__state--saved {
  border: 1px solid var(--run-line);
  color: var(--ok-text);
  background: var(--run-soft);
}

.prov__state--missing {
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  background: var(--bg-raised);
}

.prov__state--warn {
  border: 1px solid var(--warn-line);
  color: var(--warn-text);
  background: var(--warn-soft);
}

.prov__state--free {
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.prov__state-key {
  color: var(--text-primary);
  font-family: var(--mono);
}

.prov__form {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
}

.prov__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}

.prov__field-label {
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.prov__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.prov__input {
  flex: 1;
  height: 32px;
  padding-right: 32px;
}

.prov__toggle-vis {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
}

.prov__toggle-vis:hover {
  color: var(--text-primary);
}

.prov__field-hint {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.prov__actions {
  display: flex;
  gap: var(--s-2);
  flex: none;
}

.prov__blocked {
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.prov__blocked p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

/* Settings owns the window. Its own nav is the index while it is open, so the
   app sidebar is removed rather than dimmed — two navs side by side is the
   thing the two-pane layout exists to avoid. */
.app[data-settings="true"] .wside {
  display: none;
}

.app[data-settings="true"] .app__body {
  grid-template-columns: minmax(0, 1fr);
}

.app[data-settings="true"] .app__body:has(.frail) {
  grid-template-columns: minmax(0, 1fr) var(--frail-w);
}

/* --- Automations ------------------------------------------------------------
   Scheduled, verified agent runs. A template rail beside a two-tab surface;
   dense rows, quiet chrome, colour only where it means state. */

.auto {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  background: var(--surface);
}

.auto__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.auto__rail-label {
  margin: var(--s-2) var(--s-1) 0;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auto__list,
.auto__templates {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__row,
.auto__template {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--s-3);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.auto__row:hover,
.auto__template:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

/* Press reads as press — the same one-step scale every launcher button has. */
.auto__row:active,
.auto__template:active,
.auto__add:active {
  transform: scale(0.98);
}

/* One focus contract for every interactive element on this surface. */
.auto__row:focus-visible,
.auto__template:focus-visible,
.auto__add:focus-visible,
.auto__run-row:focus-visible,
.auto__tabs [role="tab"]:focus-visible,
.auto__segment button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

.auto__row[data-selected="true"] {
  border-color: var(--line-control);
  background: var(--surface-active);
  color: var(--text-primary);
}

.auto__row[data-disabled="true"] .auto__row-name {
  color: var(--text-tertiary);
}

.auto__row-name {
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-primary);
}

.auto__row-meta,
.auto__template-text {
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

.auto__row-live {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--state-run);
  animation: auto-pulse var(--dur-pulse) ease-in-out infinite;
}

.auto__template-category {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auto__template-title {
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-primary);
}

.auto__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--t-label);
  color: var(--text-secondary);
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.auto__add:hover {
  color: var(--text-primary);
  border-color: var(--line-control);
}

/* --- main pane --- */

.auto__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
  gap: var(--s-4);
}

/* --- Skills ---------------------------------------------------------------
   Local skill inventory: a clean, searchable catalog with restrained text accents. */

.skills {
  min-height: 100%;
  overflow-y: auto;
  padding: var(--s-7) clamp(var(--s-5), 5vw, 72px) var(--s-8);
  background: var(--bg-app);
}

.skills__header,
.skills__guide-banner,
.skills__installer,
.skills__controls-panel,
.skills__groups,
.skills__table-container {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.skills__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.skills__header-info {
  flex: 1 1 260px;
}

.skills__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.skills__eyebrow-pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--violet);
}

.skills__eyebrow {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.skills h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.skills__intro {
  max-width: 620px;
  margin: var(--s-2) 0 var(--s-4);
  color: var(--text-muted);
  font-size: var(--t-13);
  line-height: 1.55;
}

.skills__stats-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.skills__stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
}

.skills__stat-pill svg {
  color: var(--text-tertiary);
}

.skills__stat-pill strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.skills__stat-pill--active {
  border-color: var(--border-strong);
  background: var(--bg-surface);
}

.skills__header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.skills__guide-btn,
.skills__refresh,
.skills__state-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-12);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__guide-btn:hover,
.skills__refresh:hover,
.skills__state-action:hover {
  border-color: var(--line-control);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.skills__guide-btn--active {
  border-color: var(--line-control);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.skills__refresh:disabled {
  cursor: wait;
  opacity: 0.65;
}

.skills__spin-icon {
  animation: skills-spin 0.8s linear infinite;
}

/* --- Actionable Skills Guide Banner --- */

.skills__guide-banner {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  animation: appViewFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.skills__guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.skills__guide-head-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-primary);
  font-size: var(--t-14);
}

.skills__guide-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.skills__guide-close:hover {
  color: var(--text-primary);
}

.skills__guide-intro {
  margin: 0 0 var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-12);
  line-height: 1.5;
}

.skills__guide-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
}

.skills__guide-col h4 {
  margin: 0 0 var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skills__guide-col ul {
  margin: 0;
  padding-left: var(--s-4);
  color: var(--text-secondary);
  font-size: var(--t-12);
  line-height: 1.7;
}

.skills__guide-col li code {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}

.skills__guide-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

.skills__guide-code {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- GitHub installer ----------------------------------------------------- */

.skills__installer {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--s-4);
  margin: 0 auto var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.skills__installer-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.skills__installer-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skills__installer-copy p:last-child {
  max-width: 560px;
  margin: var(--s-2) 0 0;
  color: var(--text-muted);
  font-size: var(--t-12);
  line-height: 1.5;
}

.skills__installer-copy code {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}

.skills__install-form {
  min-width: 0;
}

.skills__install-form > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skills__install-controls {
  display: flex;
  gap: var(--s-2);
}

.skills__install-controls input {
  min-width: 0;
  flex: 1;
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: 0;
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}

.skills__install-controls input:focus {
  border-color: var(--line-control);
}

.skills__install-controls input[aria-invalid="true"] {
  border-color: var(--state-warn);
}

.skills__install-controls input::placeholder {
  color: var(--text-tertiary);
}

.skills__install-button {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--t-12);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.skills__install-button:hover:not(:disabled) {
  border-color: var(--line-control);
  background: var(--surface-hover);
}

.skills__install-button:active:not(:disabled) {
  transform: translateY(1px);
}

.skills__install-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.skills__install-help,
.skills__install-error,
.skills__install-success {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0;
  font-size: var(--t-micro);
  line-height: 1.4;
}

.skills__install-help {
  color: var(--text-tertiary);
}

.skills__install-help strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.skills__install-error {
  color: var(--state-warn);
}

.skills__install-success {
  color: var(--state-good);
}

.skills__install-success strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* --- Controls Panel (Search, Categories, Sorting, View Mode) --- */

.skills__controls-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.skills__search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  transition: border-color var(--motion-fast) var(--ease);
}

.skills__search-bar:focus-within {
  border-color: var(--line-control);
}

.skills__search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--t-13);
}

.skills__search-bar input:focus-visible {
  box-shadow: none;
}

.skills__search-bar input::placeholder {
  color: var(--text-tertiary);
}

.skills__search-clear {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.skills__search-clear:hover {
  color: var(--text-primary);
}

.skills__filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.skills__category-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.skills__category-pills::-webkit-scrollbar {
  display: none;
}

.skills__category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-12);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__category-pill:hover {
  border-color: var(--line-control);
  color: var(--text-primary);
}

.skills__category-pill--active {
  border-color: var(--line-control);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
}

.skills__cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--text-tertiary);
}

.skills__category-pill--active .skills__cat-icon {
  color: var(--text-secondary);
}

.skills__cat-count {
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.skills__category-pill--active .skills__cat-count {
  background: var(--border-strong);
  color: var(--text-primary);
}

.skills__filter-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.skills__select {
  height: 30px;
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-12);
  outline: 0;
  cursor: pointer;
}

.skills__select:hover,
.skills__select:focus {
  border-color: var(--line-control);
  color: var(--text-primary);
}

.skills__view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.skills__view-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__view-btn:hover {
  color: var(--text-primary);
}

.skills__view-btn--active {
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* --- Group Headings --- */

.skills__groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.skills__group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}

.skills__group-heading-left {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-secondary);
}

.skills__group-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skills__group-count {
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

/* --- Skill Grid & Cards --- */

.skills__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--s-3);
}

.skills__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__card:hover {
  border-color: var(--border-strong);
}

.skills__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.skills__card-header-left {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-width: 0;
  flex: 1;
}

.skills__category-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.skills__card-titles {
  min-width: 0;
  flex: 1;
}

.skills__name-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.skills__name {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-14);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.skills__path-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.skills__path {
  max-width: 220px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__runtime-pill {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 500;
}

.skills__description-container {
  display: flex;
  flex-direction: column;
  margin: var(--s-2) 0 var(--s-3);
  flex: 1 1 auto;
}

.skills__description {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-12);
  line-height: 1.5;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.skills__description--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3em;
}

.skills__description--expanded {
  display: block;
  max-height: 600px;
}

.skills__expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.skills__expand-btn:hover {
  color: var(--text-primary);
}

.skills__tags-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.skills__tag-chip {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.skills__commands {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}

.skills__card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.skills__availability-summary {
  margin-right: auto;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.skills__action-button,
.skills__reconcile-button {
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__action-button:hover,
.skills__reconcile-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-primary);
}

.skills__conflict-note {
  color: var(--warning-text, var(--text-tertiary));
  font-size: var(--t-micro);
  font-weight: 600;
}

.skills__action-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(1180px, 100%);
  margin: var(--s-3) auto 0;
  color: var(--success-text, var(--text-secondary));
  font-size: var(--t-12);
}

.skills__command-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  min-height: 30px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.skills__command-label {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.skills__command-row code {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__copy-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.skills__copy-btn--compact {
  padding: 0 4px;
  height: 20px;
}

.skills__copy-btn--copied {
  color: var(--text-secondary);
  font-weight: 600;
}

.skills__copy-feedback {
  font-size: var(--t-micro);
  font-weight: 600;
}

/* --- Table List View --- */

.skills__table-container {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.skills__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--t-12);
}

.skills__table th {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-raised);
}

.skills__table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.skills__table-row {
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}

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

.skills__table-name-cell {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.skills__table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.skills__table-name {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--t-13);
}

.skills__table-path {
  display: block;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
}

.skills__category-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
}

.skills__table-command-box {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.skills__table-command-box code {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
}

.skills__table-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-muted);
  max-width: 280px;
}

.skills__icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.skills__icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--line-control);
}

/* --- Detail Inspector Modal --- */

.skills__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  animation: appViewFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.skills__modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 85vh;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.skills__modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border);
}

.skills__modal-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.skills__category-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.skills__modal-title-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.skills__modal-title-row h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-16);
  font-weight: 700;
}

.skills__runtime-tag {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 500;
}

.skills__modal-category {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-12);
}

.skills__modal-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.skills__modal-close:hover {
  color: var(--text-primary);
}

.skills__modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.skills__modal-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.skills__modal-label {
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skills__modal-desc {
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-13);
  line-height: 1.6;
  white-space: pre-wrap;
}

.skills__modal-help {
  margin: var(--s-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.5;
}

.skills__availability-matrix,
.skills__conflict-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skills__availability-row,
.skills__conflict-item {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(120px, 0.7fr) minmax(0, 1.6fr);
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
}

.skills__availability-provider,
.skills__conflict-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--t-12);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__availability-status {
  color: var(--text-secondary);
  font-size: var(--t-micro);
  font-weight: 600;
}

.skills__availability-status[data-status="native"] {
  color: var(--success-text, var(--text-secondary));
}

.skills__availability-status[data-status="conflict"] {
  color: var(--warning-text, var(--text-secondary));
}

.skills__availability-row small,
.skills__conflict-item span,
.skills__conflict-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__conflict-item {
  grid-template-columns: minmax(120px, 0.7fr) minmax(150px, 0.9fr) minmax(0, 1.5fr);
}

.skills__conflict-item small {
  grid-column: 2 / -1;
}

.skills__conflict-item code {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__terminal-picker {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: 85vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.skills__terminal-picker-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-16);
}

.skills__terminal-picker-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overflow-y: auto;
  padding: var(--s-5);
}

.skills__terminal-targets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skills__terminal-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.skills__terminal-target:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.skills__terminal-target > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.skills__terminal-target strong {
  font-size: var(--t-13);
}

.skills__terminal-target small,
.skills__terminal-target code {
  overflow: hidden;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}

.skills__code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.skills__code-box code {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills__code-box--path {
  word-break: break-all;
}

.skills__prompt-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.skills__prompt-box p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-13);
  line-height: 1.4;
}

.skills__prompt-box em {
  color: var(--text-tertiary);
}

.skills__modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.skills__modal-foot-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-family: var(--font-mono);
}

.skills__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--t-12);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}

.skills__btn-primary:hover {
  background: var(--surface-hover);
}

/* --- State views (Error, Loading, Empty) --- */

.skills__state {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: min(1180px, 100%);
  margin: var(--s-7) auto 0;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--t-13);
}

.skills__state-content {
  flex: 1;
}

.skills__state strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--t-14);
}

.skills__state p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--t-12);
}

.skills__state--error {
  border-color: var(--border-strong);
}

.skills__empty-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.skills__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-primary);
  border-radius: var(--radius-full);
  animation: skills-spin 0.8s linear infinite;
}

@keyframes skills-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 680px) {
  .skills { padding: var(--s-5) var(--s-3) var(--s-7); }
  .skills__header { flex-direction: column; }
  .skills__refresh { align-self: flex-start; }
  .skills__installer { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); }
  .skills__install-form { grid-column: 1 / -1; }
  .skills__install-controls { flex-direction: column; }
  .skills__install-button { width: 100%; }
  .skills__command-row { grid-template-columns: 86px minmax(0, 1fr) 26px; }
  .skills__state { align-items: flex-start; }
}

/* Quiet library: the active category is the only persistent purple accent. */
.skills__title-row { display: flex; align-items: center; gap: 12px; }
.skills__title-row h1 { font-family: var(--display); font-size: var(--t-display); font-weight: 650; }
.skills__library-count { color: var(--text-tertiary); font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.skills__intro { margin-bottom: 0; }
.skills__header-actions { padding-top: 3px; }
.skills__add-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid var(--text-primary); border-radius: var(--radius); background: var(--text-primary); color: var(--bg-app); font-size: var(--t-12); font-weight: 600; cursor: pointer; }
.skills__add-button:hover { opacity: 0.88; }
.skills__installer[hidden] { display: none; }
.skills__installer-copy h2 { font-size: var(--t-14); }
.skills__installer-copy p:last-child { max-width: 34ch; }
.skills__install-controls input { flex: none; width: 100%; min-height: 40px; font-family: inherit; font-size: var(--t-12); }
.skills__install-target-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.skills__install-target-row > label { color: var(--text-secondary); font-size: var(--t-12); }
.skills__install-target-row select { min-width: 130px; max-width: 100%; height: 34px; }
.skills__install-target-row .skills__install-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-left: auto; }
.skills__install-help { flex-wrap: wrap; }
.skills__install-success p { margin: 5px 0 0; color: var(--text-secondary); }
.skills__text-button { padding: 0; border: 0; background: transparent; color: var(--text-primary); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.skills__category-pill { border-color: transparent; height: 34px; }
.skills__category-pill--active { background: var(--bg-raised); border-color: var(--border-strong); color: var(--violet-text); }
.skills__cat-count, .skills__category-pill--active .skills__cat-count { padding: 0; background: none; color: var(--text-tertiary); }
.skills__filter-right { flex-wrap: wrap; }
.skills__card { padding: 20px; }
.skills__card-top { align-items: center; gap: 9px; margin-bottom: 14px; }
.skills__category-badge { width: 28px; height: 28px; border: 0; background: none; }
.skills__card-category { color: var(--text-tertiary); font-size: var(--t-12); }
.skills__card-top .skills__conflict-note { margin-left: auto; }
.skills__name-button { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.skills__name-button:hover .skills__name { color: var(--text-secondary); }
.skills__card .skills__description { margin: 8px 0 16px; min-height: 3em; font-size: var(--t-13); }
.skills__command-line { display: flex; align-items: center; gap: 4px; margin-top: auto; margin-bottom: 16px; min-width: 0; }
.skills__command-line code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--t-12); }
.skills__card-footer { display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.skills__card-provider { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary); font-size: var(--t-micro); }
.skills__card-footer button { flex-shrink: 0; min-height: 30px; }
.skills__card-footer .skills__reconcile-button { border-color: transparent; background: none; font-weight: 500; }
.skills__card-footer .skills__icon-btn { border-color: transparent; background: none; }
.skills__card-footer .skills__action-button { font-weight: 500; }
.skills__table-col-actions { white-space: nowrap; }
.skills__table-col-actions .skills__icon-btn { display: inline-grid; margin: 2px; }
.skills__group-heading { border-bottom: 0; margin-bottom: 10px; }
.skills__group-heading h2 { font-size: var(--t-13); font-weight: 500; color: var(--text-secondary); }
.skills__group-heading-left > svg { display: none; }
.skills__action-notice { margin-bottom: 16px; }
.skills button:focus-visible,
.skills select:focus-visible,
.skills input:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 3px; }
.skills button:disabled { cursor: not-allowed; opacity: 0.5; }
@media (max-width: 800px) {
  .skills__installer { grid-template-columns: minmax(0, 1fr); }
  .skills__installer-copy p:last-child { max-width: none; }
  .skills__header-info { flex-basis: auto; }
  .skills__availability-row { grid-template-columns: 1fr 1fr; }
  .skills__availability-row small { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 480px) {
  .skills__card { padding: 16px; }
  .skills__header-actions { gap: 6px; }
  .skills__install-target-row .skills__install-button { width: 100%; margin-left: 0; }
  .skills__modal-title-row, .skills__modal-foot { flex-wrap: wrap; }
  .skills__modal-grid { grid-template-columns: minmax(0, 1fr); }
  .skills__filter-right { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skills *, .skills *::before, .skills *::after { animation: none !important; transition: none !important; }
}

.auto__tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.auto__tabs [role="tab"] {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--motion-fast) var(--ease);
}

.auto__tabs [role="tab"]:hover {
  color: var(--text-secondary);
}

.auto__tabs [role="tab"][data-active="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.auto__tab-count {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.auto__void {
  display: grid;
  place-items: center;
  flex: 1;
}

.auto__void .empty {
  max-width: 420px;
}

.auto__void .empty .pane-btn {
  margin-top: var(--s-2);
}

.auto__dismiss {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text-tertiary);
}

/* --- overview --- */

.auto__overview {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 880px;
}

.auto__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.auto__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 500;
  letter-spacing: var(--track-title);
  color: var(--text-primary);
}

.auto__lede {
  margin: var(--s-1) 0 0;
  font-size: var(--t-label);
  color: var(--text-muted);
}

.auto__head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.auto__danger {
  color: var(--bad);
}

.auto__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin: 0;
}

.auto__fact {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.auto__fact dt {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.auto__fact dd {
  margin: 0;
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.auto__fact-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.auto__mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
}

.auto__section-label {
  margin: 0 0 var(--s-2);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auto__verify-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__verify-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.auto__verify-list li svg {
  color: var(--ok);
}

.auto__verify-none {
  margin: 0;
  font-size: var(--t-label);
  color: var(--text-tertiary);
  max-width: 60ch;
}

/* One quiet strip, not five cards: history is reference material, and a row
   of boxes was reading louder than the run list it summarises. */
.auto__stats {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.auto__stat {
  flex: 1 1 0;
  min-width: 110px;
  padding: var(--s-3) var(--s-4);
}

.auto__stat + .auto__stat {
  border-left: 1px solid var(--border-subtle);
}

.auto__stat-value {
  margin: 0;
  font-size: var(--t-body-l);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.auto__stat-label {
  margin: 2px 0 0;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.auto__prompt-text {
  margin: 0;
  max-width: 72ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.auto__truth {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

/* --- runs --- */

.auto__runs {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__run {
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--motion-fast) var(--ease);
}

/* The status repeats on the row's left edge, so a column of runs scans as a
   column of verdicts before a single label is read. */
.auto__run[data-tone="run"] {
  border-left-color: var(--state-run);
}

.auto__run[data-tone="ok"] {
  border-left-color: var(--ok);
}

.auto__run[data-tone="warn"] {
  border-left-color: var(--warn);
}

.auto__run[data-tone="bad"] {
  border-left-color: var(--bad);
}

.auto__run[data-open="true"] {
  border-color: var(--border-strong);
}

.auto__run[data-open="true"][data-tone="run"] {
  border-left-color: var(--state-run);
}

.auto__run[data-open="true"][data-tone="ok"] {
  border-left-color: var(--ok);
}

.auto__run[data-open="true"][data-tone="warn"] {
  border-left-color: var(--warn);
}

.auto__run[data-open="true"][data-tone="bad"] {
  border-left-color: var(--bad);
}

.auto__run-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: none;
  text-align: left;
}

.auto__run-when {
  font-size: var(--t-label);
  color: var(--text-primary);
}

.auto__run-meta {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.auto__run-chevron {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  color: var(--text-tertiary);
  transition: transform var(--motion-fast) var(--ease);
}

.auto__run-chevron[data-open="true"] {
  transform: rotate(180deg);
}

.auto__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 110px;
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-secondary);
}

.auto__status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.auto__status[data-tone="run"] .auto__status-dot {
  background: var(--state-run);
  animation: auto-pulse var(--dur-pulse) ease-in-out infinite;
}

.auto__status[data-tone="ok"] .auto__status-dot {
  background: var(--ok);
}

.auto__status[data-tone="warn"] .auto__status-dot {
  background: var(--warn);
}

.auto__status[data-tone="bad"] .auto__status-dot {
  background: var(--bad);
}

@keyframes auto-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Tab panes enter with the same short rise the routes use — one movement,
   under 200ms, and only on the pane that changed. */
.auto__overview,
.auto__runs,
.auto__void {
  animation: ps-route var(--motion-normal) var(--ease-enter);
}

.auto__detail {
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

@media (prefers-reduced-motion: reduce) {
  .auto__overview,
  .auto__runs,
  .auto__void,
  .auto__detail,
  .auto,
  .auto__row-live,
  .auto__status-dot {
    animation: none;
  }

  .auto__row:active,
  .auto__template:active,
  .auto__add:active {
    transform: none;
  }
}

/* --- run detail --- */

.auto__detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

.auto__gatebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-soft);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.auto__gatebar-actions {
  display: flex;
  gap: var(--s-2);
}

.auto__failure {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  background: var(--error-soft);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

/* The timeline carries a rail: a hairline through fixed-position dots, so the
   sequence reads as one story rather than a stack of log lines. Offsets are
   safe to fix because the time column is fixed. */
.auto__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 79px;
  width: 1px;
  background: var(--border-strong);
}

.auto__event {
  position: relative;
  display: flex;
  gap: var(--s-5);
  align-items: baseline;
}

.auto__event::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 76px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
  outline: 3px solid var(--bg-raised);
}

.auto__event[data-kind="finished"]::before {
  background: var(--text-primary);
}

.auto__event[data-kind="retry"]::before,
.auto__event[data-kind="approval"]::before {
  background: var(--warn);
}

.auto__event[data-kind="limit"]::before {
  background: var(--bad);
}

.auto__event[data-kind="verification"]::before {
  background: var(--accent);
}

.auto__event-time {
  flex: none;
  width: 64px;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.auto__event-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.auto__event-message {
  font-size: var(--t-label);
  line-height: 1.45;
  color: var(--text-secondary);
}

.auto__event[data-kind="finished"] .auto__event-message {
  color: var(--text-primary);
}

.auto__event-detail summary {
  cursor: pointer;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.auto__event-detail summary:hover {
  color: var(--text-secondary);
}

.auto__event-detail pre {
  margin: var(--s-2) 0 0;
  padding: var(--s-3);
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.auto__checks ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__check {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
}

.auto__check[data-status="passed"] {
  border-left-color: var(--ok);
}

.auto__check[data-status="failed"],
.auto__check[data-status="refused"] {
  border-left-color: var(--bad);
}

.auto__check[data-status="running"] {
  border-left-color: var(--state-run);
}

.auto__check-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.auto__check-name {
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-primary);
}

.auto__check-summary {
  font-size: var(--t-meta);
  color: var(--text-muted);
}

.auto__check-time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--text-tertiary);
}

.auto__branch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--text-tertiary);
}

/* --- proof --- */

.auto__proof {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.auto__proof-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.auto__proof-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.auto__facts--proof {
  gap: var(--s-2) var(--s-5);
}

.auto__proof-files {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__proof-files li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.auto__proof-delta {
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--text-tertiary);
}

.auto__proof-checks {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto__proof-checks li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.auto__proof-checks li[data-status="passed"] {
  color: var(--text-secondary);
}

.auto__proof-checks li:not([data-status="passed"]) {
  color: var(--bad-text, var(--bad));
}

.auto__proof-evidence {
  flex: none;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

/* --- the editor dialog ------------------------------------------------------
   Composed like the reference: the name leads as one large quiet field, the
   prompt is the hero, the precheck reads as a terminal line, and the config
   sits below a hairline in an even grid. The one colour anywhere is the
   agents' own marks. */

.auto__editor {
  width: min(820px, 94vw);
}

.auto__title-input {
  width: 100%;
  padding: 0 0 var(--s-2);
  border: none;
  border-bottom: 1px solid var(--line-control);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: var(--track-title);
  transition: border-color var(--motion-fast) var(--ease);
}

.auto__title-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 500;
}

.auto__title-input:focus-visible {
  outline: none;
  border-bottom-color: var(--focus-ring);
}

.auto__field--prompt {
  margin-top: var(--s-5);
  gap: var(--s-2);
}

.auto__field--prompt .auto__textarea {
  min-height: 170px;
  font-size: var(--t-body);
  line-height: 1.6;
}

/* The precheck reads as a terminal line: a prompt glyph, then the command. */
.auto__precheck {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  background: var(--bg-app);
  padding-inline: var(--s-3);
  transition: border-color var(--motion-fast) var(--ease);
}

.auto__precheck:focus-within {
  border-color: var(--focus-ring);
}

.auto__precheck-glyph {
  flex: none;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-mono);
  user-select: none;
}

.auto__precheck .auto__input {
  flex: 1;
  min-width: 0;
  padding-inline: 0;
  border: none;
  background: transparent;
}

.auto__precheck .auto__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.auto__editor-div {
  height: 1px;
  margin: var(--s-5) 0;
  background: var(--border);
}

/* The agent picker: the vendors' real marks, each in its own colour. A row
   of plates rather than a select, because a select cannot wear a logo. */
.auto__agents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.auto__agent-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  background: var(--bg-app);
  color: var(--text-secondary);
  font-size: var(--t-label);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.auto__agent-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.auto__agent-chip[data-active="true"] {
  border-color: var(--border-strong);
  background: var(--surface-active);
  color: var(--text-primary);
}

.auto__editor-head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.auto__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.auto__field-label {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-secondary);
}

.auto__field-hint {
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--text-tertiary);
}

.auto__input,
.auto__textarea,
.auto__select {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  background: var(--bg-app);
  font-size: var(--t-label);
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease);
}

.auto__input::placeholder,
.auto__textarea::placeholder {
  color: var(--text-tertiary);
}

.auto__input:focus-visible,
.auto__textarea:focus-visible,
.auto__select:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
}

.auto__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--lh-body);
}

.auto__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s-6);
}

.auto__select--compact {
  width: auto;
  min-height: 28px;
  padding-top: var(--s-1);
  padding-bottom: var(--s-1);
  font-size: var(--t-meta);
}

.auto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  align-items: start;
}

.auto__grid--precheck {
  grid-template-columns: minmax(0, 1fr) 120px;
  margin-top: var(--s-4);
}

.auto__grid--config {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  row-gap: var(--s-4);
  align-items: end;
}

.auto__field--agents {
  grid-column: 1 / -1;
}

.auto__segment {
  display: inline-flex;
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  overflow: hidden;
}

.auto__segment button {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: transparent;
  font-size: var(--t-label);
  color: var(--text-muted);
  transition:
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.auto__segment button + button {
  border-left: 1px solid var(--line-control);
}

.auto__segment button[data-active="true"] {
  background: var(--surface-active);
  color: var(--text-primary);
}

/* ============================================================
   ProofCheck — launch-readiness testing
   One full-width main column: the workspace list moved up into the app
   shell's own sidebar, so nothing here competes with a rail any more.
   Every value comes from the tokens; state rides on a tint and a
   hairline, never a filled banner.
   ============================================================ */

.pcheck {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  animation: ps-route var(--motion-normal) var(--ease-standard);
}

.pcheck__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  background: var(--bg-surface);
}

.pcheck__rail-label {
  margin: var(--s-2) 0 0;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pcheck__rail-empty {
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck__rail-empty p {
  margin: 0;
}

.pcheck__add {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.pcheck__add:hover {
  background: var(--surface-hover);
}

.pcheck__list {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck__row {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.pcheck__row:hover {
  background: var(--surface-hover);
}

.pcheck__row[data-selected="true"] {
  border-color: var(--border-strong);
  background: var(--bg-raised);
}

.pcheck__row-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck__row-live {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--state-run);
  animation: auto-pulse var(--dur-pulse) ease-in-out infinite;
}

.pcheck__row-target {
  font-size: var(--t-meta);
  font-family: var(--mono);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck__row-meta {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  /* Centered reading measure: reports stay scannable on wide windows
     instead of stretching hairline cards edge to edge. */
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-6);
  overflow-y: auto;
  /* A grid item is min-width:auto by default, so a long target URL or the
     action cluster would widen this column past its track and scroll the
     page sideways. Every wrapper down to the text blocks opts out. */
  min-width: 0;
}

.pcheck__run,
.pcheck__report,
.pcheck__live,
.pcheck__landing,
.pcheck__findings {
  min-width: 0;
}

.pcheck__dismiss {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

/* --- landing --- */

.pcheck__landing {
  max-width: 640px;
  margin: 0 auto;
  padding-top: var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  animation: ps-route var(--motion-normal) var(--ease-enter);
}

.pcheck__headline {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-display-m);
  letter-spacing: var(--track-display-m);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.pcheck__lede {
  margin: calc(-1 * var(--s-3)) 0 0;
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.pcheck__target {
  display: grid;
  gap: var(--s-2);
}

.pcheck__label {
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-secondary);
}

.pcheck__input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--t-body);
  font-family: var(--mono);
}

.pcheck__input:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 1px;
}

.pcheck__select {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--t-label);
}

.pcheck__select--compact {
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-meta);
  min-width: 0;
  max-width: 100%;
}

.pcheck__hint {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck__presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.pcheck__preset {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.pcheck__preset:hover {
  background: var(--surface-hover);
}

.pcheck__preset[data-selected="true"] {
  border-color: var(--accent-line);
  background: var(--bg-raised);
}

.pcheck__preset-title {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck__preset-text {
  font-size: var(--t-meta);
  line-height: var(--lh-heading);
  color: var(--text-secondary);
}

.pcheck__preset-meta {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pcheck__config {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

.pcheck__config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.pcheck__field {
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.pcheck__check {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

/* --- run header, status --- */

.pcheck__run {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--s-4);
  animation: ps-route var(--motion-fast) var(--ease-enter);
  /* Queried rather than the viewport: this column's width depends on the
     sidebar and the rail as much as on the window. */
  container-type: inline-size;
}

.pcheck__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  min-width: 0;
}

.pcheck__head > div:first-child {
  min-width: 0;
}

/* With the rail gone, the workspace name is the page heading — sized and
   spaced like one, with the directory path reading beneath it as data. */
.pcheck__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-display-m);
  letter-spacing: var(--track-display-m);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.pcheck__subtitle {
  margin: var(--s-1) 0 0;
  font-size: var(--t-meta);
  font-family: var(--mono);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.pcheck__head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.pcheck__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-secondary);
}

.pcheck__status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.pcheck__status[data-tone="run"] .pcheck__status-dot {
  background: var(--state-run);
  animation: auto-pulse var(--dur-pulse) ease-in-out infinite;
}

.pcheck__status[data-tone="ok"] .pcheck__status-dot {
  background: var(--ok);
}

.pcheck__status[data-tone="warn"] .pcheck__status-dot {
  background: var(--warn);
}

.pcheck__status[data-tone="bad"] .pcheck__status-dot {
  background: var(--bad);
}

.pcheck__status--flat {
  min-width: 0;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
}

.pcheck__status--flat[data-tone="bad"] {
  color: var(--bad-text);
}

.pcheck__status--flat[data-tone="warn"] {
  color: var(--warn-text);
}

/* --- live view --- */

.pcheck__live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  /* Queried rather than the viewport: this column's width depends on the
     sidebar and the rail as much as on the window. */
  container-type: inline-size;
}

.pcheck__live-score {
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-body);
}

.pcheck__live-score p {
  margin: 0 0 var(--s-3);
}

.pcheck__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  min-width: 0;
}

.pcheck__columns > section {
  min-width: 0;
}

@container (max-width: 860px) {
  .pcheck__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pcheck__section-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck__agents {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck__agent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: var(--t-meta);
  min-width: 0;
}

.pcheck__agent-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.pcheck__agent[data-state="running"] .pcheck__agent-dot {
  background: var(--state-run);
  animation: auto-pulse var(--dur-pulse) ease-in-out infinite;
}

.pcheck__agent[data-state="complete"] .pcheck__agent-dot {
  background: var(--ok);
}

.pcheck__agent[data-state="failed"] .pcheck__agent-dot {
  background: var(--bad);
}

.pcheck__agent-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Second row, spanning under the dot: what a tester is doing is the whole
   reason the live view exists, so it gets the width rather than a column
   that truncates it to three words. */
.pcheck__agent-activity {
  grid-column: 2 / -1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pcheck__agent-meta {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.pcheck__timeline {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.pcheck__timeline li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-2);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.pcheck__timeline li[data-kind="finding"] {
  border-left-color: var(--warn-line);
}

.pcheck__timeline li[data-kind="finished"] {
  border-left-color: var(--run-line);
}

.pcheck__timeline-age {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

/* --- the report --- */

.pcheck__report {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--s-5);
}

.pcheck__score {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding: var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck__score-block {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  flex-shrink: 0;
}

.pcheck__score-figure {
  font-family: var(--display);
  font-size: var(--t-display-l);
  letter-spacing: var(--track-display-l);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pcheck__score-denominator {
  font-size: var(--t-body-l);
  color: var(--text-tertiary);
}

.pcheck__score-verdict {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  flex: 1;
}

.pcheck__verdict {
  justify-self: start;
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  color: var(--text-primary);
}

.pcheck__verdict[data-tone="ok"] {
  border-color: var(--run-line);
  background: var(--run-soft);
  color: var(--ok-text);
}

.pcheck__verdict[data-tone="warn"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.pcheck__verdict[data-tone="bad"] {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
}

.pcheck__summary {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.pcheck__delta {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck__why {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--t-meta);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pcheck__breakdown {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

.pcheck__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-meta);
}

.pcheck__table th,
.pcheck__table td {
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  color: var(--text-secondary);
}

.pcheck__table th {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

.pcheck__table-math {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

.pcheck__categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--s-3);
  min-width: 0;
}

.pcheck__category {
  display: grid;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.pcheck__category[data-evaluated="false"] {
  opacity: 0.6;
}

.pcheck__category-name {
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.pcheck__category-score {
  font-family: var(--display);
  font-size: var(--t-title);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pcheck__category[data-evaluated="false"] .pcheck__category-score {
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck__category-weight {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck__counts {
  display: flex;
  gap: var(--s-2) var(--s-4);
  flex-wrap: wrap;
  min-width: 0;
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.pcheck__counts [data-tone="bad"] {
  color: var(--bad-text);
}

.pcheck__counts [data-tone="warn"] {
  color: var(--warn-text);
}

.pcheck__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin: 0;
}

.pcheck__facts div {
  display: grid;
  gap: 2px;
}

.pcheck__facts dt {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

.pcheck__facts dd {
  margin: 0;
  font-size: var(--t-label);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pcheck__facts--tight {
  gap: var(--s-2) var(--s-5);
}

/* --- findings --- */

.pcheck__findings {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--s-3);
}

.pcheck__filters {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-width: 0;
}

.pcheck__chips {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  min-width: 0;
}

.pcheck__chip {
  padding: 3px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: none;
  font-size: var(--t-meta);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.pcheck__chip:hover {
  background: var(--surface-hover);
}

.pcheck__chip[data-active="true"] {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.pcheck__issues {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.pcheck__issue {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  animation: ps-route var(--motion-fast) var(--ease-enter);
  min-width: 0;
}

.pcheck__issue-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  min-width: 0;
}

.pcheck__issue-open {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  /* flex:1 still leaves min-width:auto, so a long finding title and route
     would push the whole findings list wider than its column. */
  min-width: 0;
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-1);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--t-label);
}

.pcheck__issue-id {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck__issue-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck__issue-page {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}

.pcheck__issue-body {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.pcheck__issue-body p,
.pcheck__issue-body ol {
  margin: 0;
}

.pcheck__issue-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pcheck__evidence {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-app);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 200px;
  overflow-y: auto;
}

.pcheck__evidence-kind {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

.pcheck__fix {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-width: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
}

/* --- production review --- */

.pcheck__review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.pcheck__review h4 {
  margin: var(--s-2) 0 0;
  font-size: var(--t-label);
  color: var(--text-primary);
}

.pcheck__review ul,
.pcheck__review ol {
  margin: 0;
  padding-left: var(--s-5);
}

.pcheck__review p {
  margin: 0;
}

.pcheck__review-verdict {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .pcheck,
  .pcheck__landing,
  .pcheck__run,
  .pcheck__config,
  .pcheck__breakdown,
  .pcheck__issue,
  .pcheck__row-live,
  .pcheck__status-dot,
  .pcheck__agent-dot {
    animation: none;
  }
}

/* The Manager's ProofCheck offer: one quiet line above the composer. An
   offer, never a reroute — the message still goes to the Manager on send. */
.mcv__offer {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 var(--s-4);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font-size: var(--t-meta);
  color: var(--text-secondary);
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

.mcv__offer button {
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--t-meta);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mcv__offer {
    animation: none;
  }
}

/* ==========================================================================
   ProofCheck 2.0 — project-directory launch-readiness + security scanner.

   The two-column .pcheck shell (rail + main) and every .pcheck__* primitive
   above are reused as-is; this block only adds the structures 2.0 introduced:
   the directory picker, the mode cards' badge, the scan-history rows, the live
   stage progress list, the report's verdict banner and tabs, finding triage,
   the security grouping, and the coverage bars. Every value is a token, tones
   ride on data-tone, and the only motion is ps-pulse on a running stage.
   ========================================================================== */

/* The main-area empty state, when no workspace is selected yet. */
.pcheck2__void {
  display: grid;
  place-items: center;
  flex: 1;
}

.pcheck2__void .empty {
  max-width: 420px;
}

.pcheck2__void .empty .pane-btn {
  margin-top: var(--s-2);
}

/* --- Zero Workspaces empty state --- */

.pcheck-zero {
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  min-height: calc(100vh - var(--tbar-h) - var(--sbar-h) - 120px);
  padding: var(--s-6) var(--s-4);
  animation: ps-route var(--motion-normal) var(--ease-enter);
}

.pcheck-zero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  width: 100%;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.pcheck-zero__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-3);
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.pcheck-zero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}

.pcheck-zero__tag-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.pcheck-zero__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: var(--track-title);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.pcheck-zero__description {
  margin: var(--s-2) 0 0;
  font-size: var(--t-label);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* The solid purple create button, clean and disciplined — no glow */
.pcheck-zero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--composer-send);
  border-radius: var(--radius);
  background: var(--composer-send);
  color: var(--composer-white);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.pcheck-zero__btn:hover {
  background: var(--composer-send-hover);
  border-color: var(--composer-send-hover);
  transform: translateY(-1px);
}

.pcheck-zero__btn:active {
  background: var(--composer-send-press);
  border-color: var(--composer-send-press);
  transform: translateY(0);
}

.pcheck-zero__assurances {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck-zero__assurance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pcheck-zero__assurance-icon {
  color: var(--ok);
}

.pcheck-zero__assurance-sep {
  color: var(--border-subtle);
}

/* --- ProofCheck setup: elevated workspace creation --- */

.pcheck-setup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-9);
  animation: ps-route var(--motion-normal) var(--ease-enter);
}

.pcheck-setup__top {
  display: flex;
  align-items: center;
}

.pcheck-setup__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.pcheck-setup__back:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

.pcheck-setup__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pcheck-setup__emblem {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-3);
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.pcheck-setup__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}

.pcheck-setup__tag-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.pcheck-setup__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 700;
  letter-spacing: var(--track-display-m);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.pcheck-setup__lede {
  margin: var(--s-2) 0 0;
  max-width: 58ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* --- setup configuration form --- */

.pcheck-setup__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
}

.pcheck-setup__steps-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.pcheck-setup__step {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-1) var(--ease);
}

.pcheck-setup__step:last-child {
  border-bottom: 0;
}

.pcheck-setup__step-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.pcheck-setup__step[data-done="true"] .pcheck-setup__step-num {
  border-color: var(--ok);
  color: var(--ok-text);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.pcheck-setup__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  min-width: 0;
}

.pcheck-setup__label {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck-setup__dir-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-control);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.pcheck-setup__dir-btn:hover {
  border-color: var(--text-secondary);
  background: var(--surface-hover);
}

.pcheck-setup__dir-btn[data-empty="false"] {
  border-style: solid;
  border-color: var(--border-strong);
}

.pcheck-setup__dir-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.pcheck-setup__dir-title {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck-setup__dir-sub {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck-setup__dir-name {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck-setup__dir-path {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcheck-setup__dir-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: auto;
  flex-shrink: 0;
}

.pcheck-setup__input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: var(--t-body);
  outline: none;
  transition: border-color var(--dur-1) var(--ease);
}

.pcheck-setup__input:focus {
  border-color: var(--text-primary);
}

.pcheck-setup__hint {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

/* Quick project selector */
.pcheck-setup__shelf {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck-setup__shelf-label {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-tertiary);
}

.pcheck-setup__shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
}

.pcheck-setup__shelf-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.pcheck-setup__shelf-item:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.pcheck-setup__shelf-item[data-selected="true"] {
  border-color: var(--composer-send);
  color: var(--text-primary);
  background: var(--bg-surface);
}

.pcheck-setup__shelf-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.pcheck-setup__shelf-check {
  color: var(--ok-text);
  flex-shrink: 0;
}

/* Actions */
.pcheck-setup__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.pcheck-setup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.pcheck-setup__btn--primary {
  background: var(--composer-send);
  border: 1px solid var(--composer-send);
  color: var(--composer-white);
}

.pcheck-setup__btn--primary:hover:not(:disabled) {
  background: var(--composer-send-hover);
  border-color: var(--composer-send-hover);
  transform: translateY(-1px);
}

.pcheck-setup__btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pcheck-setup__btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.pcheck-setup__btn--ghost:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

.pcheck-setup__next-move {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

/* Pillars section in setup */
.pcheck-setup__pillars-section,
.pcheck-setup__presets-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.pcheck-setup__section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.pcheck-setup__section-eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pcheck-setup__section-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
  color: var(--text-primary);
}

.pcheck-setup__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.pcheck-setup__pillar {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.pcheck-setup__pillar:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.pcheck-setup__pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}

.pcheck-setup__pillar-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
}

.pcheck-setup__pillar-icon--score {
  background: color-mix(in srgb, var(--composer-bolt) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--composer-bolt) 28%, transparent);
  color: var(--composer-bolt);
}

.pcheck-setup__pillar-icon--security {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  color: var(--ok-text);
}

.pcheck-setup__pillar-icon--swarm {
  background: color-mix(in srgb, var(--composer-send) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--composer-send) 28%, transparent);
  color: var(--composer-send);
}

.pcheck-setup__pillar-badge {
  font-size: var(--t-micro);
  font-family: var(--mono);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.pcheck-setup__pillar-title {
  margin: 0 0 var(--s-1);
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck-setup__pillar-desc {
  margin: 0;
  font-size: var(--t-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Presets */
.pcheck-setup__presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

.pcheck-setup__preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck-setup__preset-card[data-recommended="true"] {
  border-color: color-mix(in srgb, var(--composer-send) 40%, var(--border-strong));
  background: var(--bg-raised);
}

.pcheck-setup__preset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcheck-setup__preset-title {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck-setup__preset-agents {
  font-size: var(--t-micro);
  font-family: var(--mono);
  color: var(--text-secondary);
  padding: 1px var(--s-2);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
}

.pcheck-setup__preset-desc {
  margin: 0;
  font-size: var(--t-meta);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.pcheck-setup__preset-rec-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px var(--s-2);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  color: var(--ok-text);
}

/* Sidebar empty state check variant */
.wside__empty--check .wside__empty-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-2);
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wside__empty-btn--purple {
  background: var(--composer-send);
  color: var(--composer-white);
  border-color: var(--composer-send);
}

.wside__empty-btn--purple:hover:not(:disabled) {
  background: var(--composer-send-hover);
  border-color: var(--composer-send-hover);
}

@media (max-width: 800px) {
  .pcheck-setup__pillars,
  .pcheck-setup__presets {
    grid-template-columns: 1fr;
  }
}

/* --- setup: the directory picker --- */

.pcheck2__dir {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.pcheck2__dir:hover {
  background: var(--surface-hover);
}

.pcheck2__dir[data-empty="true"] {
  color: var(--text-tertiary);
  font-family: var(--sans);
}

.pcheck2__dir svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.pcheck2__dir-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- setup: the new-workspace landing -------------------------------------
   Two numbered moves inside one card — folder, then name — so the eye has an
   order without any of them being blocked before its turn. The picker reads
   as done once a folder is chosen: solid border, name over path, and a
   Change affordance where the call to action was. The report trio sits
   underneath so Create is not a leap into an unexplained screen. */

.pcheck2__setup-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.pcheck2__setup-glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-surface));
  color: var(--ok-text);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ok) 20%, transparent);
}

.pcheck2__setup-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

.pcheck2__setup-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5);
}

.pcheck2__setup-step + .pcheck2__setup-step {
  border-top: 1px solid var(--border-subtle);
}

.pcheck2__setup-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-full);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-hover);
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.pcheck2__setup-step[data-done="true"] .pcheck2__setup-num {
  border-color: var(--ok);
  color: var(--ok-text);
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 25%, transparent);
}

.pcheck2__setup-step-main {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

/* The picker itself. Project drop-zone card with hover glow */
.pcheck2__setup-dir {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: 14px 18px;
  border: 1px dashed var(--line-control);
  border-radius: var(--radius);
  background: var(--surface-hover);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.pcheck2__setup-dir:hover {
  background: color-mix(in srgb, var(--surface-active) 85%, var(--ok) 6%);
  border-color: var(--ok);
  transform: translateY(-1px);
}

.pcheck2__setup-dir:focus-visible {
  outline: 2px solid var(--ok);
  outline-offset: 1px;
}

.pcheck2__setup-dir[data-empty="false"] {
  border-style: solid;
  border-color: var(--border-strong);
  background: var(--bg-surface);
}

.pcheck2__setup-dir > svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.pcheck2__setup-dir[data-empty="false"] > svg {
  color: var(--ok-text);
}

.pcheck2__setup-dir-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pcheck2__setup-dir-title {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--text-primary);
}

.pcheck2__setup-dir-sub {
  font-size: var(--t-12);
  color: var(--text-tertiary);
}

.pcheck2__setup-dir-name {
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck2__setup-dir-path {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl; /* long paths truncate at their start, keeping the leaf visible */
  text-align: left;
}

.pcheck2__setup-dir-change {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--bg-raised);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--dur-1) var(--ease);
}

.pcheck2__setup-dir:hover .pcheck2__setup-dir-change {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.pcheck2__setup-next {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--text-tertiary);
}

/* --- the launch panel ----------------------------------------------------
   The one action this screen exists for, so it is the one card with weight:
   a real button rather than a pane chip, and the read-only promise carried
   as its own hairline row — the same fact the Details tab proves later. */

/* The home screen's one card with weight: raised surface, a stronger
   hairline than the panels below it, and room for the action to breathe. */
.pcheck2__launch {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.pcheck2__launch-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pcheck2__launch-copy {
  min-width: 0;
}

.pcheck2__launch-copy .pcheck__section-title {
  margin-bottom: var(--s-1);
}

/* The primary action of the home screen at full chrome size — the .btn face,
   not the small pane-btn the rest of the header actions use. */
.pcheck2__launch-btn {
  flex-shrink: 0;
}

.pcheck2__trust {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.pcheck2__trust svg {
  flex-shrink: 0;
}

.pcheck2__trust[data-tone="ok"] svg {
  color: var(--ok-text);
}

/* --- the run header's context chips -------------------------------------- */

.pcheck2__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.pcheck2__chip {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  font-size: var(--t-micro);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* --- what a check reports, before the first scan --- */

.pcheck2__intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-top: var(--s-4);
}

.pcheck2__intro-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-content: start;
  justify-items: start;
  padding: var(--s-4) var(--s-5);
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition:
    transform var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.pcheck2__intro-cell:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pcheck2__intro-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  transition: all var(--dur-2) var(--ease);
}

.pcheck2__intro-cell:hover .pcheck2__intro-icon {
  transform: scale(1.08);
}

.pcheck2__intro-icon--score {
  background: color-mix(in srgb, var(--composer-bolt) 12%, transparent);
  border-color: color-mix(in srgb, var(--composer-bolt) 28%, transparent);
  color: var(--composer-bolt);
}

.pcheck2__intro-icon--security {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
  color: var(--ok-text);
}

.pcheck2__intro-icon--coverage {
  background: color-mix(in srgb, var(--composer-send) 12%, transparent);
  border-color: color-mix(in srgb, var(--composer-send) 28%, transparent);
  color: var(--composer-send);
}

.pcheck2__intro-label {
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.pcheck2__intro-text {
  font-size: var(--t-12);
  line-height: 1.55;
  color: var(--text-tertiary);
}

@container (max-width: 700px) {
  .pcheck2__intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- the mode picker: reuses .pcheck__presets / .pcheck__preset --- */

.pcheck2__picker {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  animation: ps-route var(--motion-fast) var(--ease-enter);
}

.pcheck2__mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.pcheck2__badge {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- scan history rows --- */

.pcheck2__scans {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck2__scan-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

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

.pcheck2__scan-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

/* The depth of the check, as a quiet chip rather than bare prose floating
   between the name and the status. */
.pcheck2__scan-mode {
  flex-shrink: 0;
  padding: 1px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

.pcheck2__scan-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The score a completed scan earned, lifted out of the meta prose into a
   figure you can scan down the column for. */
.pcheck2__scan-score {
  padding: 0 var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-primary);
}

.pcheck2__scan-score em {
  font-style: normal;
  color: var(--text-tertiary);
}

.pcheck2__scan-row svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform var(--dur-1) var(--ease);
}

.pcheck2__scan-row:hover svg {
  transform: translateX(2px);
  color: var(--text-secondary);
}

/* --- one scan: header --- */

.pcheck2__scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  min-width: 0;
}

.pcheck2__scan-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  min-width: 0;
}

.pcheck2__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: 0;
  padding: 0;
  background: none;
  font-size: var(--t-meta);
  color: var(--text-secondary);
  cursor: pointer;
}

.pcheck2__back:hover {
  color: var(--text-primary);
}

.pcheck2__scan-title {
  margin: 0;
  min-width: 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck2__scan-head .pane-btn {
  margin-left: auto;
}

/* A live region for assistive tech, carried off-screen: the visible status
   pill already shows the same word, so it is not repeated visually. */
.pcheck2__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- live stage progress --- */

.pcheck2__stages {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck2__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-size: var(--t-meta);
  min-width: 0;
}

/* The state is read from colour and glyph together, so meaning never depends
   on the pulse — only the running dot animates, and only to say "still going". */
.pcheck2__stage-glyph {
  display: inline-grid;
  place-items: center;
  width: 14px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1;
  color: var(--text-tertiary-mark);
}

.pcheck2__stage-glyph::before {
  content: "○";
}

.pcheck2__stage-glyph[data-state="running"]::before {
  content: "●";
}

.pcheck2__stage-glyph[data-state="running"] {
  color: var(--state-run);
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

.pcheck2__stage-glyph[data-state="complete"]::before {
  content: "✓";
}

.pcheck2__stage-glyph[data-state="complete"] {
  color: var(--ok);
}

.pcheck2__stage-glyph[data-state="failed"]::before {
  content: "✕";
}

.pcheck2__stage-glyph[data-state="failed"] {
  color: var(--bad);
}

.pcheck2__stage-glyph[data-state="skipped"]::before {
  content: "⊘";
}

.pcheck2__stage-glyph[data-state="skipped"] {
  color: var(--text-tertiary);
}

.pcheck2__stage-label {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pcheck2__stage-state {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Second row, spanning under the glyph: the activity is the whole reason the
   live view exists, so it gets the width rather than a truncating column. */
.pcheck2__stage-activity {
  grid-column: 2 / -1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* --- report: the release verdict banner --- */

.pcheck2__verdict {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-left-width: 2px;
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck2__verdict[data-tone="ok"] {
  border-color: var(--run-line);
  border-left-color: var(--ok);
  background: var(--run-soft);
}

.pcheck2__verdict[data-tone="warn"] {
  border-color: var(--warn-line);
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.pcheck2__verdict[data-tone="bad"] {
  border-color: var(--error-line);
  border-left-color: var(--bad);
  background: var(--error-soft);
}

.pcheck2__verdict-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--text-primary);
}

.pcheck2__verdict[data-tone="ok"] .pcheck2__verdict-label {
  color: var(--ok-text);
}

.pcheck2__verdict[data-tone="warn"] .pcheck2__verdict-label {
  color: var(--warn-text);
}

.pcheck2__verdict[data-tone="bad"] .pcheck2__verdict-label {
  color: var(--bad-text);
}

.pcheck2__verdict-summary {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* --- report: the two score cells --- */

.pcheck2__score-cell {
  display: grid;
  gap: var(--s-1);
  flex-shrink: 0;
}

/* A hairline between the two figures instead of empty air, so they read as
   one instrument with two dials; it folds away when the row wraps. */
.pcheck2__score-cell + .pcheck2__score-cell {
  padding-left: var(--s-5);
  border-left: 1px solid var(--border-subtle);
}

@container (max-width: 620px) {
  .pcheck2__score-cell + .pcheck2__score-cell {
    padding-left: 0;
    border-left: 0;
  }
}

.pcheck2__score-second {
  font-family: var(--display);
  font-size: var(--t-display-m);
  letter-spacing: var(--track-display-m);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pcheck2__score-caption {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

/* --- report: the tabs (same contract as the Automations tablist) --- */

.pcheck2__tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.pcheck2__tabs [role="tab"] {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease);
}

.pcheck2__tabs [role="tab"]:hover {
  color: var(--text-secondary);
}

.pcheck2__tabs [role="tab"][data-active="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.pcheck2__tabs [role="tab"]:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Counts read as quiet pills beside the label, so a glance separates "the
   Findings tab" from "how much is in it". */
.pcheck2__tab-count {
  padding: 0 var(--s-2);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  font-size: var(--t-micro);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pcheck2__tabs [role="tab"][data-active="true"] .pcheck2__tab-count {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* --- findings: status, KEV, refs --- */

.pcheck2__finding-status {
  flex-shrink: 0;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__kev {
  flex-shrink: 0;
  padding: 1px var(--s-2);
  border: 1px solid var(--error-line);
  border-radius: var(--radius-xs);
  background: var(--error-soft);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--bad-text);
}

.pcheck2__refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
}

.pcheck2__refs span {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

/* --- findings: triage controls --- */

.pcheck2__findings-intro {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-raised), var(--bg-surface));
}

.pcheck2__findings-intro-copy {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.pcheck2__findings-kicker,
.pcheck2__fix-kicker {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.pcheck2__findings-intro h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pcheck2__findings-intro p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.pcheck2__findings-totals {
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 132px;
  padding-left: var(--s-5);
  border-left: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  text-align: right;
}

.pcheck2__findings-totals strong {
  color: var(--text-primary);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pcheck2__findings-totals small {
  margin-top: var(--s-1);
  color: var(--warn-text);
  font-size: var(--t-micro);
}

.pcheck2__finding-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--border-subtle);
}

.pcheck2__finding-summary-cell,
.pcheck2__finding-summary-status {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raised);
}

.pcheck2__finding-summary-cell > span,
.pcheck2__finding-summary-status > span {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.pcheck2__finding-summary-cell > strong,
.pcheck2__finding-summary-status > strong {
  color: var(--text-primary);
  font-size: var(--t-label);
}

.pcheck2__finding-summary-cell[data-tone="bad"] > strong {
  color: var(--bad-text);
}

.pcheck2__finding-summary-cell[data-tone="warn"] > strong {
  color: var(--warn-text);
}

.pcheck2__finding-summary-cell small {
  color: var(--text-secondary);
  font-size: var(--t-micro);
}

.pcheck2__finding-summary-cell code {
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck2__finding-explanation,
.pcheck2__finding-next {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-raised);
}

.pcheck2__finding-explanation h4,
.pcheck2__finding-next h4,
.pcheck2__finding-evidence h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.pcheck2__finding-explanation p,
.pcheck2__finding-next p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.pcheck2__finding-limitation {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}

.pcheck2__finding-limitation[data-tone="ok"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.pcheck2__finding-limitation strong {
  color: var(--text-primary);
}

.pcheck2__finding-limitation p {
  margin: 0;
  color: var(--text-secondary);
}

.pcheck2__technical {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
}

.pcheck2__technical summary {
  padding: var(--s-3) var(--s-4);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
}

.pcheck2__technical p {
  padding: 0 var(--s-4) var(--s-3);
  color: var(--text-secondary);
}

.pcheck2__finding-evidence {
  display: grid;
  gap: var(--s-2);
}

.pcheck2__finding-evidence > div p {
  margin: var(--s-1) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.pcheck2__plain-english {
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--bg-raised);
  color: var(--text-primary);
}

.pcheck2__fix {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}

.pcheck2__fix[data-open="true"] {
  display: grid;
  align-items: stretch;
  gap: var(--s-3);
  border-color: var(--border-strong);
}

.pcheck2__fix-head {
  display: grid;
  flex: 1 1 100%;
  gap: var(--s-1);
  min-width: min(100%, 420px);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
}

.pcheck2__fix-head > div {
  display: grid;
  gap: 3px;
}

.pcheck2__fix-head strong {
  color: var(--text-primary);
  font-size: var(--t-label);
}

.pcheck2__fix-head p,
.pcheck2__fix-copy span {
  max-width: 72ch;
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.pcheck2__fix-copy {
  display: grid;
  flex: 1 1 100%;
  gap: var(--s-1);
}

.pcheck2__fix-path {
  display: block;
  width: 100%;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  overflow-wrap: anywhere;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--t-meta);
}

.pcheck2__agent-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  padding: var(--s-1) 0 0;
  border: 0;
}

.pcheck2__agent-picker legend {
  padding: 0;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.pcheck2__agent-choice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.pcheck2__agent-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.pcheck2__agent-choice[data-selected="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--bg-raised);
}

.pcheck2__agent-choice input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

.pcheck2__agent-choice input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.pcheck2__agent-choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pcheck2__agent-choice-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--t-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck2__agent-choice-copy small {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
}

.pcheck2__agent-picker:disabled .pcheck2__agent-choice {
  cursor: default;
  opacity: 0.72;
}

.pcheck2__agent-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.pcheck2__agent-handoff {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.pcheck2__agent-handoff strong {
  color: var(--text-primary);
}

.pcheck2__fix-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--t-meta);
  line-height: var(--lh-body);
}

.pcheck2__fix-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.pcheck2__fix button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.pcheck2__triage {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
}

.pcheck2__triage-label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

.pcheck2__triage-btns {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.pcheck2__triage-btn {
  padding: 3px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: none;
  font-size: var(--t-meta);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

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

.pcheck2__triage-btn[data-active="true"] {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-primary);
}

@media (max-width: 680px) {
  .pcheck2__findings-intro {
    display: grid;
    padding: var(--s-4);
  }

  .pcheck2__findings-totals {
    grid-template-columns: auto 1fr;
    justify-items: start;
    gap: 0 var(--s-2);
    min-width: 0;
    padding: var(--s-3) 0 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
    text-align: left;
  }

  .pcheck2__findings-totals strong {
    grid-row: span 2;
  }

  .pcheck2__finding-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .pcheck2__agent-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- security tab --- */

.pcheck2__security {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.pcheck2__sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
}

.pcheck2__honest {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.pcheck2__sec-group {
  display: grid;
  gap: var(--s-2);
}

.pcheck2__sec-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck2__sec-count {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.pcheck2__sec-list {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck2__sec-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  min-width: 0;
}

.pcheck2__sec-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-label);
  color: var(--text-primary);
}

.pcheck2__sec-ref {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

/* --- coverage tab --- */

.pcheck2__coverage {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  /* Queried rather than the viewport: the row's width depends on the sidebar
     and rail as much as on the window. */
  container-type: inline-size;
}

.pcheck2__cov-list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcheck2__cov-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(80px, 120px) auto;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.pcheck2__cov-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-label);
  color: var(--text-primary);
}

.pcheck2__cov-nums {
  font-size: var(--t-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pcheck2__cov-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--meter-track);
  overflow: hidden;
}

.pcheck2__cov-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--meter-fill);
}

.pcheck2__cov-pct {
  font-size: var(--t-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@container (max-width: 620px) {
  .pcheck2__cov-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pcheck2__cov-bar {
    display: none;
  }
}

/* --- investigation tab --- */

.pcheck2__investigation {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.pcheck2__inv-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.pcheck2__inv-phase {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck2__inv-stop {
  padding: 2px var(--s-2);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

.pcheck2__inv-coverage {
  margin-left: auto;
  font-size: var(--t-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pcheck2__inv-surfaces,
.pcheck2__inv-hypotheses,
.pcheck2__inv-runs,
.pcheck2__inv-branches,
.pcheck2__inv-audit {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.pcheck2__inv-surface,
.pcheck2__inv-hypothesis,
.pcheck2__inv-run,
.pcheck2__inv-branch,
.pcheck2__inv-audit-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  min-width: 0;
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.pcheck2__inv-surface-kind,
.pcheck2__inv-hypothesis-id,
.pcheck2__inv-run-id {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__inv-surface-status,
.pcheck2__inv-hypothesis-state,
.pcheck2__inv-run-outcome {
  flex-shrink: 0;
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
}

.pcheck2__inv-surface-status[data-status="investigated"],
.pcheck2__inv-surface-status[data-status="deeplyInvestigated"],
.pcheck2__inv-surface-status[data-status="runtimeValidated"] {
  color: var(--ok-text);
}

.pcheck2__inv-surface-status[data-status="discovered"],
.pcheck2__inv-surface-status[data-status="partial"] {
  color: var(--warn-text);
}

.pcheck2__inv-surface-status[data-status="unresolved"] {
  color: var(--bad-text);
}

.pcheck2__inv-surface-ev {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__inv-hypothesis-state[data-state="confirmed"] {
  color: var(--bad-text);
}

.pcheck2__inv-hypothesis-state[data-state="rejected"] {
  color: var(--ok-text);
}

.pcheck2__inv-hypothesis-state[data-state="unresolved"] {
  color: var(--warn-text);
}

.pcheck2__inv-hypothesis-text {
  flex: 1;
  min-width: 0;
}

.pcheck2__inv-run-hyp {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__inv-run-agent {
  flex-shrink: 0;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__inv-run-outcome[data-outcome="confirmed"],
.pcheck2__inv-run-outcome[data-outcome="weaknessConfirmed"] {
  color: var(--bad-text);
}

.pcheck2__inv-run-outcome[data-outcome="hypothesisRejected"] {
  color: var(--ok-text);
}

.pcheck2__inv-run-outcome[data-outcome="failed"],
.pcheck2__inv-run-outcome[data-outcome="aborted"] {
  color: var(--warn-text);
}

.pcheck2__inv-run-failure {
  flex: 1;
  min-width: 0;
  font-size: var(--t-micro);
  color: var(--warn-text);
}

.pcheck2__inv-branch-id {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__inv-branch-text {
  flex: 1;
  min-width: 0;
}

.pcheck2__inv-audit-row {
  align-items: center;
}

.pcheck2__inv-audit-allowed {
  flex-shrink: 0;
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
}

.pcheck2__inv-audit-allowed[data-allowed="true"] {
  color: var(--ok-text);
}

.pcheck2__inv-audit-allowed[data-allowed="false"] {
  color: var(--bad-text);
}

.pcheck2__inv-audit-tool {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

.pcheck2__inv-audit-arg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

@container (max-width: 620px) {
  .pcheck2__inv-surface,
  .pcheck2__inv-hypothesis,
  .pcheck2__inv-run,
  .pcheck2__inv-branch {
    flex-wrap: wrap;
  }
}

/* --- details tab --- */

.pcheck2__details {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.pcheck2__detail-block {
  display: grid;
  gap: 2px;
}

.pcheck2__detail-block .pcheck__label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

/* The read-only proof line: a tint and a hairline, tone-driven, never a box. */
.pcheck2__proof {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--border-strong);
  font-size: var(--t-label);
  color: var(--text-secondary);
}

.pcheck2__proof[data-tone="ok"] {
  border-left-color: var(--ok);
}

.pcheck2__proof[data-tone="warn"] {
  border-left-color: var(--warn);
  color: var(--warn-text);
}

@media (prefers-reduced-motion: reduce) {
  .pcheck2__picker,
  .pcheck2__stage-glyph[data-state="running"] {
    animation: none;
  }
}

/* --- sidebar tree -------------------------------------------------------
 *
 * The workspaces list is a two-level tree: directory, then workspace. */

/* The chevron, the workspace row and its tools share one line. The row was
   already full-width; beside the chevron it stretches the remaining width. */
.wside__tree-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wside__tree-row .wside__workspace-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.wside__chevron,
.wside__chevron-placeholder {
  flex: 0 0 auto;
  width: 20px;
  margin-left: var(--s-1);
}

.wside__chevron {
  display: grid;
  place-items: center;
  align-self: stretch;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-dim);
}

.wside__chevron:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* The rail has no room for tree indentation. */
.wside[data-collapsed="true"] .wside__chevron,
.wside[data-collapsed="true"] .wside__chevron-placeholder {
  display: none;
}

/* The folder glyph on a ProofSpace row. The swarm mark already has its own
   place; this is the one glyph that reads as "a place with things in it". */
.wside__workspace-folder {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--text-tertiary);
}

/* The chat pane's strip carries the same two halves the terminal's foot used
   to: what the last turn did, and the keys. The terminal's own foot is gone —
   the bar says all of it, and one row per pane is enough. */
.chat-status__hints {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

/* One hint is a key and its action. Keys are the mono face at the strip's
   own size, so the whole row stays one quiet line. */
.chat-status__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chat-status kbd {
  display: inline-block;
  padding: 0 3px;
  border: 1px solid var(--border-subtle);
  border-bottom-color: var(--border-strong);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: var(--t-11);
  line-height: 1.4;
  color: var(--text-dim);
}

/* The chat pane's strip sits between the transcript and the composer, and
   carries the same two halves: what the last turn did, and the keys. */
.chat-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex: 0 0 auto;
  min-height: 22px;
  margin: 0 var(--s-2) var(--s-1);
  padding: 0 var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-11);
}

.chat-status__line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-status__lamp {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.chat-status__lamp[data-live="true"] {
  background: var(--state-run);
}

.chat-status[data-working="true"] .chat-status__lamp {
  animation: ps-pulse var(--dur-pulse) var(--ease) infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .chat-status[data-working="true"] .chat-status__lamp {
    animation: none;
  }
}

/* --- plugins ---
 *
 * The connect surface shared by the Plugins page and its settings section:
 * quiet rows in one bordered list, brand tiles, one accent per row at most.
 */

.plug {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.plug__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.plug__head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.plug__title {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
}

.plug__lede {
  margin: 2px 0 0;
  font-size: var(--t-13);
  color: var(--text-tertiary);
}

.plug__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.plug__search {
  min-width: 200px;
}

/* The transport and auth choices inside the custom-server form. It sizes to
   its own labels — a segmented control that stretches to the field width
   reads as three empty panels rather than one control with three states. */
.plug__segmented {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-app);
}

.plug__segmented button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--t-12);
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.plug__segmented button + button {
  border-left: 1px solid var(--border-subtle);
}

.plug__segmented button:hover {
  color: var(--text-secondary);
}

.plug__segmented button[data-selected="true"] {
  background: var(--surface-active);
  color: var(--text-primary);
}

.plug__segmented button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.plug__list {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface, transparent);
}

.plug__row + .plug__row {
  border-top: 1px solid var(--border-strong);
}

.plug__row-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 14px;
}

.plug__tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  font-size: var(--t-body-l, var(--t-body));
  font-weight: 600;
}

.plug__glyph-letter {
  font-size: var(--t-15, var(--t-body));
  font-weight: 600;
  line-height: 1;
}

.plug__row-main {
  flex: 1;
  min-width: 0;
}

.plug__name {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--text-primary);
}

.plug__summary {
  margin: 2px 0 0;
  font-size: var(--t-13);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plug__row-side {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.plug__pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  padding: 5px 13px;
  font: inherit;
  font-size: var(--t-13);
  color: var(--text-primary);
  cursor: pointer;
}

.plug__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--state-run);
}

/* Connection states read at a glance from the pill's dot. */
.plug__pill[data-state="connected"] .plug__dot {
  background: var(--state-run);
}

.plug__pill[data-state="expired"],
.plug__pill[data-state="reauthorizationRequired"] {
  color: var(--warn-text);
}

.plug__pill[data-state="expired"] .plug__dot,
.plug__pill[data-state="reauthorizationRequired"] .plug__dot {
  background: var(--state-warn);
}

.plug__pill[data-state="error"] {
  color: var(--bad-text);
}

.plug__pill[data-state="error"] .plug__dot {
  background: var(--state-error);
}

/* Legacy-credential and error banners above the detail actions. */
.plug__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
}

.plug__banner p {
  margin: 0;
  font-size: var(--t-13);
}

.plug__banner--warn {
  border: 1px solid color-mix(in srgb, var(--state-warn) 40%, transparent);
  background: color-mix(in srgb, var(--state-warn) 10%, transparent);
}

.plug__banner--error {
  border: 1px solid color-mix(in srgb, var(--state-error) 40%, transparent);
  background: color-mix(in srgb, var(--state-error) 10%, transparent);
}

/* Result of an explicit "Test connection" for one row. */
.plug__testnote {
  margin: 8px 0 0;
  border-radius: var(--radius-md, 8px);
  padding: 8px 12px;
  font-size: var(--t-13);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.plug__testnote--error {
  border-color: color-mix(in srgb, var(--state-error) 40%, transparent);
  background: color-mix(in srgb, var(--state-error) 10%, transparent);
}

/* Numbered setup steps on provider-specific advanced cards. */
.plug__steps {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--t-13);
  color: var(--text-secondary);
}

/* Host/port and username/password pairs share one row in database forms. */
.plug__db-grid {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: var(--s-2);
  max-width: 420px;
}

.plug__db-grid > .plug__field {
  max-width: none;
}

/* Per-row CLI connections: which CLIs act through this plugin right now. */
.plug__linked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 6px 0 0;
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.plug__linked-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.plug__connect,
.plug__detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0 14px var(--s-4) 65px;
}

.plug__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}

.plug__field > span {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.plug__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.plug__detail-label {
  margin: 0;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--text-tertiary);
}

.plug__agents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.plug__agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-13);
}

/* --- the developer row -------------------------------------------------
   A custom MCP server is the same act as connecting a catalogued one, so it
   is the same row: tile, name, summary, one hairline at the top instead of a
   boxed button that shouted louder than the plugins above it. The dashed tile
   is the only mark that says "nothing here yet". */

.plug__dev {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 14px var(--s-4);
  border-top: 1px solid var(--border-strong);
}

.plug__devrow {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.plug__devrow:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.plug__devrow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-app),
    0 0 0 4px var(--focus-ring);
}

/* The row's two lines stack, as they do in every other row. */
.plug__devrow .plug__row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plug__devrow .plug__summary {
  white-space: normal;
}

.plug__tile--dashed {
  border: 1px dashed var(--line-control);
  background: transparent;
  color: var(--text-tertiary);
}

.plug__devrow:hover .plug__tile--dashed {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}

/* --- the custom-server form --------------------------------------------
   It replaces the row rather than hanging off it, so it takes the list's own
   padding: the 65px content indent belongs to a tile that is not there. */

.plug__add-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) 14px var(--s-4);
  border-top: 1px solid var(--border-strong);
}

.plug__form-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.plug__add-form .plug__summary {
  white-space: normal;
}

/* Caption under the fields: one step quieter than the labels above them. */
.plug__hint {
  margin: 0;
  max-width: 420px;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--text-tertiary);
}

.plug__empty {
  padding: var(--s-4) 14px;
}

/* The closing note: reference copy, so it sits at the smallest size rather
   than reading as a second lede under the list. */
.plug__note {
  margin: 0;
  max-width: 78ch;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--text-tertiary);
}

@media (max-width: 720px) {
  .plug__row-top {
    flex-wrap: wrap;
  }

  .plug__summary {
    white-space: normal;
  }

  .plug__connect,
  .plug__detail {
    padding-left: 14px;
  }
}

/* --- the full-page Plugins destination --- */

.plugins {
  min-height: 100%;
  overflow-y: auto;
  padding: var(--s-7) clamp(var(--s-5), 5vw, 72px) var(--s-8);
  background: var(--surface);
}

.plugins__header {
  width: min(1100px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.plugins__eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.plugins h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}

.plugins__intro {
  max-width: 560px;
  margin: var(--s-3) 0 0;
  color: var(--text-muted);
  font-size: var(--t-13);
  line-height: 1.55;
}

.plugins__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-size: var(--t-12);
}

.plugins__refresh:disabled {
  opacity: 0.6;
}

.plugins__body {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.plugins__foot {
  width: min(1100px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-5);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  line-height: 1.5;
}

/* Provider-specific connect card: sign-in copy, permission list, key link. */
.plug__card-line {
  margin: 0;
  max-width: 420px;
  font-size: var(--t-13);
  line-height: 1.55;
  color: var(--text-muted);
}

.plug__perms {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.plug__perms ul {
  margin: 0;
  padding-left: 18px;
  font-size: var(--t-13);
  color: var(--text-secondary);
}

.plug__perms li {
  margin: 2px 0;
}

.plug__key-link {
  align-self: flex-start;
  font-size: var(--t-micro);
  color: var(--text-secondary);
}

/* ==========================================================================
   The Agent surface — standalone chats on the machine's own coding CLIs.
   ==========================================================================
   A product route like ProofCheck, not a pane: it owns the full main area,
   keeps its own two-column shape (chat list, conversation), and reuses the
   workspace chat primitives for everything that renders a transcript or a
   composer. Only this page's own chrome is styled here. */

.agentpg {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  animation: ps-route var(--motion-normal) var(--ease-standard);
}

/* --- first run ----------------------------------------------------------
   Before anything is created the page has no chrome to show, so it is the
   ground itself: the board's faint grid on the void step, vignetted at the
   edges, with one raised panel centred in it. The panel is the only surface
   on screen, which is what makes the button the obvious next move — no
   shadow, no hue, no illustration doing that work.

   The earlier version left `.agentpg__void` unstyled, so the shared dashed
   `.empty` box stretched the full width of the page and pushed its own
   content to the top — a hairline across the screen with words in the
   corner. The stage is what was missing. */
.agentpg__void {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: clamp(var(--s-5), 7vh, var(--s-8)) var(--s-5);
  background-color: var(--bg-void);
  background-image:
    radial-gradient(120% 85% at 50% 42%, transparent 38%, var(--bg-void) 100%),
    linear-gradient(to right, var(--sgraph-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sgraph-grid) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}

.agentvoid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: min(100%, 460px);
  padding: var(--s-6) var(--s-5) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.agentvoid__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.agentvoid__eyebrow {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.agentvoid__title {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  color: var(--text-primary);
}

.agentvoid__text {
  max-width: 40ch;
  margin: 0;
  font-size: var(--t-label);
  line-height: var(--lh-body);
  color: var(--text-tertiary);
}

/* The page's primary action, and the only filled control on it: the panel
   step plus a control-grade edge, which is what the accent family resolves
   to everywhere outside the two violet scopes. */
.agentvoid__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-control);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 500;
  transition:
    background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

.agentvoid__cta:hover {
  background: var(--surface-hover);
  border-color: var(--text-tertiary-mark);
}

.agentvoid__cta:active {
  transform: scale(0.99);
}

/* The three things an agent actually buys, under a hairline: a list reads as
   specifics where the same three clauses in a sentence read as padding. */
.agentvoid__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  margin: var(--s-3) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
  text-align: left;
}

.agentvoid__facts li {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: start;
  gap: var(--s-3);
  font-size: var(--t-12);
  line-height: var(--lh-body);
  color: var(--text-tertiary);
}

.agentvoid__facts li > svg {
  margin-top: 3px;
  color: var(--text-tertiary-mark);
}

.agentvoid__facts strong {
  font-weight: 600;
  color: var(--text-secondary);
}

.agentpg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}

.agentpg__id {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.agentpg__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.agentpg__id h1 {
  margin: 0;
  font-size: var(--t-15);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agentpg__id p {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin: 2px 0 0;
  font-size: var(--t-12);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agentpg__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.agentpg__working {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg);
  font-size: var(--t-12);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.agentpg__working > span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.agentpg__working[data-live="true"] > span {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
}

/* The section tabs: Chats / Memory / Skills / Settings. The same quiet
   contract as the titlebar's product switcher — the current one carries a
   raised surface and primary ink, nothing else. */
.agentpg__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg);
  flex: none;
}

.agentpg__tabs button {
  padding: 5px var(--s-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--t-12);
  color: var(--text-secondary);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.agentpg__tabs button:hover {
  color: var(--text-primary);
}

.agentpg__tabs button[data-current="true"] {
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* --- chat tabs on top, conversation below --- */

.agentpg__chats {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* The chat strip: one tab per conversation, newest last, with the new-chat
   plus pinned at the end. Scrolls sideways instead of wrapping, the way a
   browser's tab bar does. */
.agentpg__tabstrip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: none;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  scrollbar-width: thin;
}

.agentpg__tabstrip::-webkit-scrollbar {
  height: 0;
}

.agentpg-tab {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  max-width: 220px;
  min-width: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: background var(--motion-fast) var(--ease);
}

.agentpg-tab:hover {
  background: var(--bg-raised);
}

.agentpg-tab[data-current="true"] {
  background: var(--bg-raised);
}

/* The active tab carries a 2px underline in primary ink — the one mark that
   says where you are. */
.agentpg-tab[data-current="true"]::after {
  content: "";
  position: absolute;
  left: var(--s-2);
  right: var(--s-2);
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--text-primary);
}

.agentpg-tab__open {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  min-width: 0;
  padding: var(--s-2) var(--s-1) var(--s-2) var(--s-3);
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--t-13);
  color: var(--text-secondary);
}

.agentpg-tab[data-current="true"] .agentpg-tab__open {
  color: var(--text-primary);
}

.agentpg-tab__open--ghost {
  cursor: default;
}

.agentpg-tab__lamp {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.agentpg-tab__lamp[data-live="true"] {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}

.agentpg-tab__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentpg-tab__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: var(--s-1);
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.agentpg-tab:hover .agentpg-tab__close,
.agentpg-tab__close:focus-visible {
  opacity: 1;
}

.agentpg-tab[data-current="true"] .agentpg-tab__close {
  opacity: 0.7;
}

.agentpg-tab__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.agentpg__tabnew {
  display: grid;
  place-items: center;
  align-self: center;
  width: 24px;
  height: 24px;
  margin-left: var(--s-1);
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
}

.agentpg__tabnew:hover {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* The conversation column owns a scrolling transcript and a docked composer. */
.agentpg__convo {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--surface);
}

.agentpg__convo .chat-scroll {
  flex: 1;
  gap: 4px;
  overflow-x: hidden;
  /* Leave a real exclusion zone for the floating composer. The page measures
     the live bubble (including attachments, errors, and a growing draft) and
     supplies this variable so the latest transcript line stays above it. */
  padding: var(--s-5) max(var(--s-5), calc((100% - 920px) / 2))
    var(--agent-composer-clearance, 144px);
  scroll-padding-bottom: var(--agent-composer-clearance, 144px);
}

.agentpg__convo .chat-empty {
  padding: clamp(var(--s-5), 8vh, var(--s-8));
}

.agentpg__convo .chat-empty__inner {
  max-width: min(960px, calc(100% - var(--s-6)));
  gap: var(--s-6);
}

.agentpg__convo .chat-empty__title {
  margin: 0 0 var(--s-2) 0;
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
}

.agentpg__convo .chat-composer {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  background: var(--composer-bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.agentpg__convo .chat-composer:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--composer-bg) 94%, var(--composer-white) 6%);
}

/* The composer itself supplies the focus state; don't add the global halo
   around the message field when it receives keyboard or pointer focus. */
.agentpg__convo .chat-composer:focus-within {
  border-color: color-mix(in srgb, var(--composer-send) 58%, rgba(255, 255, 255, 0.18));
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.58),
    0 0 0 1px color-mix(in srgb, var(--composer-send) 24%, transparent),
    0 0 28px color-mix(in srgb, var(--composer-send) 14%, transparent);
}

.agentpg__convo .chat-composer[data-dragging="true"] {
  border-color: var(--accent);
  border-style: dashed;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.55);
}

.agentpg__convo .chat-composer__dropzone {
  background: rgba(24, 24, 27, 0.97);
  color: var(--composer-white);
  font-weight: 500;
}

.agentpg__convo .chat-attach {
  width: 32px;
  height: 32px;
}

.agentpg__convo .chat-composer__input {
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.008em;
  caret-color: var(--composer-send);
}

.agentpg__convo .chat-composer__input::placeholder {
  color: var(--text-tertiary);
  font-weight: 500;
}

.agentpg__convo .chat-composer__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.agentpg__convo .chat-composer[data-variant="hero"] .chat-composer__input {
  min-height: 68px;
  padding: 16px 18px 8px 18px;
  font-size: var(--t-15);
  line-height: 1.5;
}

.agentpg__convo .chat-composer__foot {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 48px;
  padding: 6px 12px 10px 14px;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.agentpg__convo .chat-composer__foot::-webkit-scrollbar {
  display: none;
}

.agentpg__convo .chat-pick {
  flex-shrink: 0;
}

.agentpg__convo .chat-composer[data-variant="docked"] .chat-composer__input {
  min-height: 44px;
  padding: 12px 16px 6px 16px;
  font-size: var(--t-14);
}

.agentpg__convo .chat-pick__face {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 8px;
  border-radius: var(--radius);
  background: transparent;
  gap: 5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.agentpg__convo .chat-pick__face:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

.agentpg__convo .chat-pick[open] .chat-pick__face {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
}

.agentpg__convo .chat-pick__label {
  max-width: 260px;
}

/* The new-chat composer sits in the empty-state flow instead of at the
   bottom of the conversation. Open its pickers downward so the menu stays
   inside the available viewport rather than being clipped above the page. */
.agentpg__convo .chat-composer[data-variant="hero"] .chat-pick__list {
  top: calc(100% + var(--s-1));
  bottom: auto;
}

.agentpg__convo .chat-composer[data-variant="hero"] .chat-composer__foot {
  /* `overflow-x: auto` makes `overflow-y: visible` compute to `auto`, which
     clips the picker inside the composer. The hero uses the viewport space
     below the composer for its menu instead. */
  overflow: visible;
}

.agentpg__convo .chat-composer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.agentpg__convo .chat-send {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 0;
  background: color-mix(in srgb, var(--composer-send) 25%, transparent);
  color: color-mix(in srgb, var(--text-primary) 35%, transparent);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.agentpg__convo .chat-send:not(:disabled) {
  background: var(--composer-send);
  color: var(--composer-white);
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--composer-send) 40%, transparent);
}

.agentpg__convo .chat-send:not(:disabled):hover {
  background: var(--composer-send-hover);
  transform: scale(1.06);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--composer-send) 55%, transparent);
}

.agentpg__convo .chat-send:not(:disabled):active {
  background: var(--composer-send-press);
  transform: scale(0.95);
}

.agentpg__convo .chat-send:disabled {
  background: color-mix(in srgb, var(--composer-send) 18%, transparent);
  color: color-mix(in srgb, var(--text-primary) 30%, transparent);
  cursor: not-allowed;
}

.agentpg__convo .chat-stop {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.agentpg__convo .chat-user__bubble {
  max-width: min(84%, 820px);
  padding: var(--s-3) var(--s-4);
  border-color: color-mix(in srgb, var(--border-subtle) 78%, transparent);
  border-radius: 16px 16px 5px 16px;
  background: color-mix(in srgb, var(--bg-raised) 94%, var(--surface));
  font-size: var(--t-14);
}

.agentpg__convo .chat-assistant {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  gap: 7px;
  width: min(900px, 100%);
  padding: 11px 12px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  transition: background var(--motion-fast) var(--ease);
}

.agentpg__convo .chat-assistant:hover {
  background: color-mix(in srgb, var(--bg-raised) 45%, transparent);
}

.agentpg__convo .agent-message-identity {
  min-height: 32px;
}

.agentpg__convo .chat-assistant__bubble {
  width: min(calc(100% - 42px), 820px);
  max-width: none;
  margin-left: 42px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--t-14);
  line-height: 1.65;
  color: var(--text-primary);
}

/* The media is the useful output of image/video plugins. Keep it directly in
   the conversation even while the implementation/tool history stays folded. */
.agentpg__convo .agent-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  width: min(820px, 100%);
  margin: 10px 0 4px;
}

.agentpg__convo .agent-media__item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-raised) 86%, var(--surface));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.agentpg__convo .agent-media__preview {
  display: block;
  width: 100%;
  max-height: 520px;
  background: var(--bg-app);
  object-fit: contain;
}

.agentpg__convo .agent-media__preview--image {
  min-height: 160px;
}

.agentpg__convo .agent-media__preview--video {
  aspect-ratio: 16 / 9;
}

.agentpg__convo .agent-media__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px 9px;
  color: var(--text-secondary);
  font-size: var(--t-12);
}

.agentpg__convo .agent-media__caption > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentpg__convo .agent-media__caption > small {
  flex: none;
  color: var(--text-tertiary);
  font-size: var(--t-11);
}

.agentpg__convo .chat-tools--agent > .agent-media {
  margin: 0 0 8px;
}

.agentpg__convo .chat-tools--agent,
.agentpg__convo .chat-working-row {
  margin-left: 54px;
}

.agentpg__convo .chatmd {
  font-size: var(--t-14);
  line-height: 1.65;
}

.agentpg-starterror {
  margin: var(--s-2) auto 0;
  width: min(760px, calc(100% - var(--s-4)));
}

/* The CLI's unstructured own words — a banner, a refusal, a crash. Kept in a
   monospace block so it reads as output, never styled away. */
.chat-raw {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

.agentpg__convo .chat-composer[data-variant="docked"] {
  /* Float the bubble over the transcript. The conversation surface remains
     visible around its rounded corners and in the bottom breathing room. */
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  z-index: 20;
  margin: 0;
  width: min(960px, calc(100% - var(--s-6)));
  transform: translateX(-50%);
}

/* Docked pickers open upward from the footer. The footer's horizontal scroll
   viewport must not clip that menu after a conversation has started. */
.agentpg__convo .chat-composer[data-variant="docked"] .chat-composer__foot {
  overflow: visible;
}

.agentpg__convo .chat-composer[data-variant="docked"] .chat-pick__list {
  z-index: 60;
}

.agentpg__convo .chat-jump {
  bottom: calc(var(--agent-composer-clearance, 144px) + var(--s-2));
}

.agentpg-addproject {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-12);
  color: var(--text-secondary);
}

.agentpg-addproject:hover {
  color: var(--text-primary);
}

/* --- the Memory / Skills / Settings panes --- */

.agentpg-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-8) var(--s-7) var(--s-9);
  width: min(860px, 100%);
  margin: 0 auto;
}

.agentpg-pane__head {
  margin-bottom: var(--s-8);
}

.agentpg-pane__head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: var(--track-title);
  color: var(--text-primary);
}

.agentpg-pane__head p,
.agentpg-set__note {
  margin: var(--s-2) 0 0;
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-muted);
}

.agentpg-pane__head div:first-child {
  min-width: 0;
}

.agentpg-pane__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-7);
}

.agentpg-pane__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  font-weight: 600;
}

.agentpg-pane__kicker svg {
  color: var(--text-secondary);
}

.agentpg-pane__head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.agentpg-save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  color: var(--text-tertiary);
  font-size: var(--t-meta);
  white-space: nowrap;
}

.agentpg-save-state::before {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  content: "";
}

.agentpg-save-state[data-state="dirty"]::before {
  background: var(--warn);
}

.agentpg-save-state[data-state="saved"]::before {
  background: var(--ok);
}

.agentpg-pane__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

.agentpg-pane__hint {
  font-size: var(--t-12);
  line-height: 1.5;
  color: var(--text-tertiary);
}

.agentpg-pane__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

.agentpg-pane__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  font-size: var(--t-12);
  color: var(--danger);
}

.agentpg-memory {
  display: block;
  width: 100%;
  min-height: 18rem;
  padding: var(--s-4);
  border: 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  resize: vertical;
  font: inherit;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--text-primary);
}

.agentpg-memory::placeholder {
  color: var(--text-tertiary);
}

.agentpg-memory:focus-visible {
  outline: none;
}

.agentpg-memory-card {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--motion-fast) var(--ease);
}

.agentpg-memory-card:focus-within {
  border-color: var(--line-control);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.agentpg-memory-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 42px;
  padding: 0 var(--s-4);
}

.agentpg-memory-card__head label {
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
}

.agentpg-memory-card__head span {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}

.agentpg-context-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 0 var(--s-1);
  color: var(--text-tertiary);
}

.agentpg-context-note svg {
  margin-top: 3px;
  flex: none;
}

.agentpg-context-note p {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.55;
}

.agentpg-context-note strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.agentpg-save {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--text-secondary);
  flex: none;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

.agentpg-save:hover:not(:disabled) {
  border-color: var(--line-control);
  background: var(--surface-hover);
  color: var(--text-primary);
}

.agentpg-save:disabled {
  opacity: 0.55;
}

.agentpg-save--primary {
  border-color: var(--line-control);
  background: var(--accent-solid);
  color: var(--accent-ink);
}

.agentpg-save--quiet {
  border-color: var(--border-subtle);
  background: transparent;
}

.agentpg-skills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}

.agentpg-skill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
  text-align: left;
  transition: border-color var(--motion-fast) var(--ease);
}

.agentpg-skill:hover {
  border-color: var(--border-strong);
}

.agentpg-skill__name {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--text-primary);
}

.agentpg-skill__desc {
  font-size: var(--t-12);
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agentpg-skill__meta {
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

/* --- settings --- */

.agentpg-pane--settings {
  padding-bottom: 0;
}

.agentpg-pane--settings .agentpg-pane__head {
  margin-bottom: var(--s-5);
}

.agentpg-defaults {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--s-7);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.agentpg-defaults > div {
  min-width: 0;
  padding: 0 var(--s-4);
  border-left: 1px solid var(--border-subtle);
}

.agentpg-defaults > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.agentpg-defaults dt {
  margin-bottom: var(--s-1);
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 500;
}

.agentpg-defaults dd {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--t-label);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentpg-set {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr);
  gap: var(--s-7);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border-subtle);
}

.agentpg-set:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.agentpg-set h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--t-body-l);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.agentpg-set__intro {
  min-width: 0;
}

.agentpg-set__intro .agentpg-set__note {
  margin-top: var(--s-2);
  font-size: var(--t-meta);
  line-height: 1.55;
}

.agentpg-set__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.agentpg-set__title-row h3 {
  margin: 0;
}

.agentpg-providers {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.agentpg-provider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 58px;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-align: left;
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.agentpg-provider:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.agentpg-provider[data-selected="true"] {
  border-color: var(--line-control);
  background: var(--bg-raised);
}

.agentpg-provider:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.agentpg-provider__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  flex: none;
}

.agentpg-provider__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.agentpg-provider__name {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.agentpg-provider__status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-11);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agentpg-provider__status::before {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  content: "";
  flex: none;
}

.agentpg-provider__status[data-ready="true"]::before {
  background: var(--ok);
}

.agentpg-provider__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-primary);
  flex: none;
}

.agentpg-set__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.agentpg-set__row label {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-secondary);
}

.agentpg-set__row select {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  font: inherit;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--text-primary);
}

.agentpg-set__row select:focus-visible {
  border-color: var(--line-control);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.agentpg-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.agentpg-check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
}

.agentpg-check input {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.agentpg-check:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.agentpg-check:has(input:disabled) input {
  cursor: not-allowed;
}

.agentpg-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--text-secondary);
  font-size: var(--t-meta);
  font-weight: 500;
}

.agentpg-field input,
.agentpg-field textarea {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
}

.agentpg-field input {
  min-height: 40px;
}

.agentpg-field textarea {
  min-height: 112px;
  resize: vertical;
}

.agentpg-field input:focus-visible,
.agentpg-field textarea:focus-visible {
  border-color: var(--line-control);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.agentpg-field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.agentpg-field small {
  color: var(--text-tertiary);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.45;
}

.agentpg-field small[role="alert"] {
  color: var(--danger);
}

.agentpg-field__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.agentpg-field__meta small:last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.agentpg-set__empty {
  align-self: start;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.agentpg-settings-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: var(--s-7) calc(-1 * var(--s-7)) 0;
  padding: var(--s-4) var(--s-7);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-app);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.agentpg-settings-foot__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

/* A narrow window keeps the tab strip scrollable; the conversation below it
   is untouched. */
@media (max-width: 720px) {
  .agentpg-tab {
    max-width: 160px;
  }

  .agentpg__head {
    min-height: 56px;
    padding-inline: var(--s-3);
  }

  .agentpg__working {
    display: none;
  }

  .agentpg__tabs button {
    padding-inline: var(--s-2);
  }

  .agentpg__convo .chat-scroll {
    padding-inline: var(--s-3);
  }

  .agentpg__convo .chat-composer[data-variant="docked"] {
    width: calc(100% - var(--s-4));
  }

  .agentpg-pane {
    padding: var(--s-7) var(--s-4) var(--s-8);
  }

  .agentpg-pane__head {
    flex-direction: column;
    gap: var(--s-4);
    margin-bottom: var(--s-7);
  }

  .agentpg-pane__head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .agentpg-set {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .agentpg-set__title-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .agentpg-set__row {
    grid-template-columns: 1fr;
  }

  .agentpg-defaults {
    gap: var(--s-2);
  }

  .agentpg-defaults > div {
    padding-inline: var(--s-2);
  }

  .agentpg-pane__foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .agentpg-pane__actions {
    width: 100%;
  }

  .agentpg-pane__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agentpg-pane__actions .agentpg-save,
  .agentpg-settings-foot .agentpg-save {
    justify-content: center;
  }

  .agentpg-settings-foot {
    margin-inline: calc(-1 * var(--s-4));
    padding-inline: var(--s-4);
  }

  .agentpg-settings-foot > span {
    display: none;
  }

  .agentpg-settings-foot__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    width: 100%;
  }
}

/* ==========================================================================
   The launch intro — one video, once per run, over everything.
   ========================================================================== */

/* Sits above the app (and every dialog in it) for the length of the clip.
   Black, not a themed surface: the intro is cinema, not chrome. The literal
   lives in the token block (--intro-void) because this rule may not carry
   raw values — see the tokens test. */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--intro-void);
  opacity: 1;
  transition: opacity 700ms var(--ease-enter);
}

.intro-splash[data-fading] {
  /* Let clicks fall through to the app the moment the fade starts. */
  pointer-events: none;
  opacity: 0;
}

.intro-splash video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   The account gate — sign in, or wait while the browser does.

   Owns the whole window, like first run: no session, no shell. The scale is
   the onboarding scale — one question on the screen, density nowhere in the
   argument. Scoped violet (see "Scoped violet"): the CTA is the one thing
   here worth colour.
   ========================================================================== */

.gate {
  display: grid;
  place-items: center;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-app);
}

/* --- orbit plumbing --------------------------------------------------------
   The mechanics of OrbitImages (React Bits, adapted): a design-space canvas
   scaled to the container, a rotation wrapper, and items riding an SVG path
   via offset-distance. Positioning only — every value that reads as colour
   or type lives in the gate's own rules above and below. */

.orbit-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.orbit-scaling-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.orbit-scaling-container--responsive {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.orbit-rotation-wrapper {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  position: relative;
}

.orbit-item {
  position: absolute;
  will-change: offset-distance, transform;
  user-select: none;
}

.orbit-center-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.gate__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  padding: var(--s-6) var(--s-6) var(--s-7);
}

/* --- the orbit stage ------------------------------------------------------
   The agents circle the hub: the product's own thesis, staged. The stage
   shrinks when the form is up, so the composition keeps its head while the
   form keeps its room. */

.gate__stage {
  width: 340px;
  height: 340px;
  margin-bottom: var(--s-5);
  transition:
    width var(--motion-normal) var(--ease-enter),
    height var(--motion-normal) var(--ease-enter),
    margin var(--motion-normal) var(--ease-enter);
}

.gate__stage--compact {
  width: 200px;
  height: 200px;
  margin-bottom: var(--s-4);
}

/* One tile per brand: the vendor's real mark on a raised plate, the way the
   reference stages its ring. Monochrome brands take the tile's light ink via
   currentColor. */
.gate-orbit__tile {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: 0 0 0 4px var(--bg-app);
}

/* The hub: mark, ring, and the one halo of colour on this surface. */
.gate-orbit__center {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  color: var(--text-primary);
}

.gate-orbit__halo {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    var(--accent-glow) 38%,
    transparent 68%
  );
}

.gate-orbit__ring {
  position: absolute;
  width: 136px;
  height: 136px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

.gate-orbit__center .mark {
  position: relative;
}

/* --- the name and the thesis --------------------------------------------- */

.gate__eyebrow {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.gate__eyebrow-dot {
  margin: 0 var(--s-2);
  color: var(--accent-text);
}

.gate__headline {
  margin: var(--s-3) 0 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-display-l);
  font-weight: 700;
  letter-spacing: var(--track-display-l);
  line-height: 1.05;
  text-align: center;
}

.gate__headline-accent {
  color: var(--accent-text);
}

.gate__browser-copy {
  max-width: 430px;
  margin: var(--s-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  text-align: center;
}

/* --- the swap: doors and form share one slot -------------------------------
   Both panels stay mounted; the inactive one folds to a 0fr grid track, so
   the column's height is always the active panel's and the headline glides
   instead of jumping. Visibility flips on a delay when folding — content
   leaves the tab order only after the collapse — and instantly on open. */
.gate__swap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
  margin-top: var(--s-6);
}

.gate__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--motion-normal) var(--ease-standard),
    visibility 0s linear var(--motion-normal);
}

.gate__panel[data-active] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--dur-enter) var(--ease-enter),
    visibility 0s;
}

.gate__panel > * {
  min-height: 0;
  overflow: hidden;
}

/* The choreography: exits are one fast shared fade; entrances rise in one
   after another. Exit faster than enter — leaving never holds anyone up. */
.gate__actions > *,
.gate__form > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 150ms var(--ease-standard),
    transform 150ms var(--ease-standard);
}

.gate__panel[data-active] .gate__actions > *,
.gate__panel[data-active] .gate__form > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 280ms var(--ease-enter),
    transform 280ms var(--ease-enter);
}

.gate__panel[data-active] :is(.gate__actions, .gate__form) > :nth-child(1) {
  transition-delay: 90ms;
}

.gate__panel[data-active] :is(.gate__actions, .gate__form) > :nth-child(2) {
  transition-delay: 130ms;
}

.gate__panel[data-active] :is(.gate__actions, .gate__form) > :nth-child(3) {
  transition-delay: 170ms;
}

.gate__panel[data-active] :is(.gate__actions, .gate__form) > :nth-child(4) {
  transition-delay: 210ms;
}

.gate__panel[data-active] :is(.gate__actions, .gate__form) > :nth-child(5) {
  transition-delay: 250ms;
}

/* --- the two doors --------------------------------------------------------- */

.gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gate__actions--browser {
  gap: var(--s-4);
}

.gate__browser-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-secondary);
  text-align: left;
}

.gate__browser-wait > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-label);
  line-height: var(--lh-body);
}

.gate__browser-wait strong {
  color: var(--text-primary);
  font-weight: 600;
}

.gate__btn {
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--radius);
  font-size: var(--t-body-l);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.gate__btn--primary {
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  background: var(--accent-solid);
}

.gate__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.gate__btn--primary:active {
  background: var(--accent-press);
  transform: translateY(1px);
}

.gate__btn--primary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
}

.gate__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.gate__btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-raised);
}

.gate__btn--ghost:hover {
  background: var(--surface-hover);
  border-color: var(--line-control);
}

.gate__btn:focus-visible,
.gate__links button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

/* --- the revealed form ----------------------------------------------------- */

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.gate__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Labels speak the gate's own type: the mono eyebrow voice, one step down. */
.gate__field > span {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: color var(--motion-fast) var(--ease-standard);
}

/* The label warms with its field: focus is one violet thought, shared. */
.gate__field:focus-within > span {
  color: var(--accent-text);
}

/* The gate's own input, not the workspace utility: a raised plate on the
   void, room to type. No violet focus treatment — the field stays quiet. */
.gate__input {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-body-l);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.gate__input::placeholder {
  color: var(--text-tertiary);
}

.gate__input:focus,
.gate__input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--violet) 55%, transparent);
  /* The violet border and the warmed label carry focus here; the global
     double ring stays off — the gate's field answers quietly. */
  box-shadow: none;
}

/* WebKit fills saved credentials on a white canvas; pin the plate and ink. */
.gate__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset;
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
}

.gate__form .gate__btn {
  width: 100%;
  margin-top: var(--s-2);
}

.gate__error {
  margin: 0;
  color: var(--state-error);
  font-size: var(--t-label);
  line-height: var(--lh-body);
}

@media (prefers-reduced-motion: no-preference) {
  /* Errors arrive, they do not teleport. The same small rise as the surface. */
  .gate__error {
    animation: account-surface-enter 240ms var(--ease-enter);
  }
}

/* The form's quiet pair: back out, or reset from the site. */
.gate__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  color: var(--text-tertiary);
  font-size: var(--t-label);
}

.gate__links button {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--t-label);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gate__links button:hover {
  color: var(--text-primary);
}

.paywall__cta:focus-visible,
.paywall__cycle:focus-visible,
.paywall__waiting-cancel:focus-visible,
.paywall__signout:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  /* The stage's shrink is presentation; the orbit itself is paused from the
     component (see AuthGate). The swap and its stagger are presentation too:
     state flips, instantly. */
  .gate__stage,
  .gate__panel,
  .gate__actions > *,
  .gate__form > * {
    transition: none;
  }
}

/* ==========================================================================
   Account settings — Developer profile, workstation environment & plan tier.

   Production account settings surface:
   - Near-black monochrome, #0a0a0b app, #0d0d0f surface, #141417 raised.
   - Restraint: 1px precision hairlines, tactile interactive states, zero raw colors.
   - Typography: Cabinet Grotesk (headings), Switzer (body), Commit Mono (code/data).
   - Balanced two-column layout with genuine workstation environment metrics.
   ========================================================================== */

.profile {
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
}

.profile__container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-7) var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.profile__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.profile__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.profile__breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.profile__back-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--s-1) var(--s-3);
  font-family: var(--sans);
  font-size: var(--t-meta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition:
    color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.profile__back-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.profile__back-btn:active {
  transform: scale(0.97);
}

.profile__eyebrow {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__eyebrow-dot {
  color: var(--text-tertiary-mark);
}

.profile__header-status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.profile__sync-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: var(--s-1) var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.profile__sync-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.profile__sync-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.profile__sync-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.profile__sync-icon {
  display: inline-flex;
  align-items: center;
}

.profile__sync-icon--spinning {
  display: inline-flex;
  align-items: center;
  animation: profile-spin 800ms linear infinite;
}

@keyframes profile-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.profile__status-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.profile__live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ok);
}

.profile__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.profile__title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-display-m);
  font-weight: 700;
  letter-spacing: var(--track-title);
  line-height: 1.15;
}

.profile__lede {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 68ch;
}

.profile__banner-notice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--run-soft);
  border: 1px solid var(--run-line);
  border-radius: var(--radius-sm);
  color: var(--ok-text);
  font-size: var(--t-meta);
  font-family: var(--sans);
  animation: account-surface-enter 200ms var(--ease-enter);
}

/* --- Card-Free Editorial Layout ----------------------------------------- */

.profile__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
}

.profile__section {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--border-subtle);
}

.profile__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.profile__section-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile__section-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: var(--track-title);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__section-desc {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--sans);
  font-size: var(--t-label);
}

.profile__badge {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  padding: 3px var(--s-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__badge--pro {
  color: var(--text-primary);
  border-color: var(--line-control);
  background: var(--surface-active);
}

.profile__badge--free {
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
  background: var(--bg-surface);
}

/* --- Identity Section ---------------------------------------------------- */

.profile__avatar-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-2) 0 var(--s-4);
}

.profile__avatar-plate {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
}

.profile__avatar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
}

.profile__avatar-monogram {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: var(--track-tight);
  line-height: 1;
  text-transform: uppercase;
}

.profile__avatar-pip {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--bg-surface);
}

.profile__avatar-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  flex: 1;
}

.profile__display-name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--track-title);
  line-height: 1.2;
}

.profile__email-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__display-email {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--text-secondary);
}

.profile__copy-pill {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  padding: 1px var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  transition:
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

.profile__copy-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.profile__avatar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 2px;
}

.profile__action-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-tertiary);
  font-family: var(--sans);
  font-size: var(--t-meta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  transition: color var(--dur-1) var(--ease);
}

.profile__action-link:hover {
  color: var(--text-primary);
}

.profile__notice-saved {
  font-size: var(--t-meta);
  color: var(--ok);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* --- Identity Metadata Rows ---------------------------------------------- */

.profile__rows {
  display: flex;
  flex-direction: column;
}

.profile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-label);
}

.profile__row-label {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 140px;
}

.profile__row-val {
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-2) 0;
}

.profile__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.profile__form-label {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-secondary);
}

.profile__input {
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: var(--t-label);
  outline: none;
  transition: border-color var(--dur-1) var(--ease);
}

.profile__input:focus {
  border-color: var(--line-control);
}

.profile__form-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* --- Plan & Subscription Section ----------------------------------------- */

.profile__plan-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.profile__plan-hero-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile__plan-tier-name {
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--track-title);
}

.profile__plan-price-group {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.profile__plan-price {
  font-family: var(--mono);
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--text-primary);
}

.profile__plan-interval {
  font-family: var(--sans);
  font-size: var(--t-label);
  color: var(--text-tertiary);
  font-weight: 500;
}

.profile__pill-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--s-3);
  border-radius: var(--radius-full);
  background: var(--run-soft);
  border: 1px solid var(--run-line);
  color: var(--ok-text);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.profile__pill-sandbox {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s-3);
  border-radius: var(--radius-full);
  background: var(--surface-active);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.profile__plan-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

@media (max-width: 680px) {
  .profile__plan-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.profile__plan-spec-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.profile__plan-spec-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-tertiary);
  font-weight: 500;
}

.profile__plan-spec-val {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile__plan-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) 0;
}

.profile__plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-label);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.profile__plan-check {
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 2px;
}

.profile__plan-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-2);
}

/* --- Danger Zone / Session Terminate Section ----------------------------- */

.profile__danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.profile__danger-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile__danger-title {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.profile__danger-desc {
  margin: 0;
  font-size: var(--t-label);
  color: var(--text-tertiary);
  max-width: 54ch;
  line-height: var(--lh-body);
}

@media (max-width: 640px) {
  .profile__danger-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Modals & Overlays --------------------------------------------------- */

.profile__modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  animation: account-surface-enter 160ms var(--ease-enter);
}

.profile__modal {
  width: 100%;
  max-width: 540px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.profile__modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.profile__modal-title {
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0;
}

.profile__modal-desc {
  color: var(--text-tertiary);
  font-size: var(--t-label);
  margin: 2px 0 0;
}

.profile__modal-body-copy {
  color: var(--text-secondary);
  font-size: var(--t-label);
  line-height: var(--lh-body);
  margin: 0;
}

.profile__modal-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--s-1);
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  transition: color var(--dur-1) var(--ease);
}

.profile__modal-close:hover {
  color: var(--text-primary);
}

.profile__avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

@media (max-width: 500px) {
  .profile__avatar-grid {
    grid-template-columns: 1fr;
  }
}

.profile__avatar-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-secondary);
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.profile__avatar-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.profile__avatar-choice:active {
  transform: scale(0.97);
}

.profile__avatar-choice[data-selected="true"] {
  border-color: var(--line-control);
  background: var(--surface-active);
  color: var(--text-primary);
}

.profile__avatar-choice-title {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.profile__avatar-choice-desc {
  font-size: var(--t-meta);
  color: var(--text-tertiary);
  font-family: var(--sans);
}

.profile__modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

@media (prefers-reduced-motion: no-preference) {
  .profile__container {
    animation: account-surface-enter 320ms var(--ease-enter) both;
  }
}

/* ==========================================================================
   Subscribe — the one plan, and the way back from checkout.

   Free accounts see this instead of the app. The layout follows the plan
   card: a centred column, a cycle toggle, the card, one CTA. While checkout
   is open in the browser this page polls the account and unlocks itself, so
   the CTA's whole story is "leave, and it is done when you come back".
   Scoped violet: the checks and the CTA are the choice.
   ========================================================================== */

.paywall {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-app);
}

.paywall__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-8);
}

/* The upgrade moment: centred, alone, nothing else on the page. */
.paywall__col--done {
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

.paywall__title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-display-l);
  font-weight: 700;
  letter-spacing: var(--track-display-l);
  line-height: 1.05;
  text-align: center;
}

.paywall__lede {
  max-width: 46ch;
  margin: var(--s-5) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-align: center;
}

/* --- cycle toggle --- */

.paywall__toggle {
  position: relative;
  display: flex;
  width: min(100%, 300px);
  margin-top: var(--s-7);
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
}

.paywall__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-full);
  background: var(--text-primary);
  transition: transform var(--motion-normal) var(--ease-standard);
}

.paywall__toggle[data-cycle="annual"] .paywall__thumb {
  transform: translateX(100%);
}

.paywall__cycle {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-label);
  font-weight: 500;
  cursor: pointer;
}

.paywall__cycle[data-active="true"] {
  color: var(--bg-app);
  font-weight: 600;
}

.paywall__save {
  padding: 1px var(--s-2);
  border-radius: var(--radius-full);
  color: var(--accent-ink);
  background: var(--accent-solid);
  font-family: var(--mono);
  font-size: var(--t-micro);
}

/* --- the plan card --- */

.paywall__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: var(--s-6);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-modal);
  background: var(--bg-raised);
}

.paywall__tier {
  margin: 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.paywall__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
}

.paywall__was {
  color: var(--text-tertiary);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 600;
}

.paywall__now {
  color: var(--text-primary);
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: var(--track-display-l);
  line-height: 1;
}

.paywall__per {
  color: var(--text-secondary);
  font-size: var(--t-body);
}

.paywall__billed {
  margin: var(--s-2) 0 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-meta);
}

.paywall__audience {
  margin: var(--s-6) 0 0;
  color: var(--text-secondary);
  font-size: var(--t-body-l);
  font-weight: 500;
  text-align: center;
}

/* A hairline with the plan's one promise riding it. */
.paywall__rule {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-6);
}

.paywall__rule::before,
.paywall__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.paywall__rule span {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.paywall__features {
  width: 100%;
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.paywall__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--text-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.paywall__check {
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.paywall__cta {
  width: 100%;
  margin-top: var(--s-6);
  min-height: 46px;
  padding: 0 var(--s-5);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--accent-ink);
  background: var(--accent-solid);
  font-size: var(--t-body-l);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.paywall__cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.paywall__cta:active {
  background: var(--accent-press);
  transform: translateY(1px);
}

.paywall__guarantee {
  margin: var(--s-4) 0 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-align: center;
}

/* Checkout is out in the browser; this is the page holding the door. */
.paywall__waiting {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--accent);
}

.paywall__waiting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-label);
  line-height: var(--lh-body);
}

.paywall__waiting-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.paywall__waiting-text > span {
  color: var(--text-tertiary);
}

.paywall__waiting-cancel {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--t-label);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.paywall__waiting-cancel:hover {
  color: var(--text-primary);
}

.paywall__offline {
  margin: var(--s-5) 0 0;
  color: var(--state-warn);
  font-size: var(--t-label);
  line-height: var(--lh-body);
  text-align: center;
}

.paywall__error {
  margin: var(--s-4) 0 0;
  color: var(--state-error);
  font-size: var(--t-label);
  line-height: var(--lh-body);
  text-align: center;
}

.paywall__account {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  color: var(--text-tertiary);
  font-size: var(--t-meta);
}

.paywall__email {
  overflow: hidden;
  max-width: 280px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paywall__signout {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--t-meta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.paywall__signout:hover {
  color: var(--text-primary);
}

/* The upgrade moment's check: the one circle of colour on the page. */
.paywall__done-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-6);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-full);
  color: var(--accent);
  background: var(--accent-quiet);
}

@media (prefers-reduced-motion: no-preference) {
  /* Both account surfaces arrive with one small rise. Nothing else moves:
     the page's job is a decision, and the motion says "here it is" once. */
  .gate__col,
  .paywall__col,
  .profile__col {
    animation: account-surface-enter 320ms var(--ease-enter) both;
  }
}

@keyframes account-surface-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paywall__thumb {
    transition: none;
  }
}

/* --- ProofCheck reading pass --------------------------------------------
   Check is an evidence surface, so prose needs room and weight needs to be
   earned. The app-wide chrome can stay dense; this page gets a quieter text
   rhythm and stronger grouping around the numbers people came to inspect. */

.pcheck {
  --check-copy: "IBM Plex Sans", var(--sans);
  font-family: var(--check-copy);
  line-height: 1.55;
}

.pcheck,
.pcheck * {
  font-weight: 400 !important;
}

.pcheck button,
.pcheck input,
.pcheck select {
  font-weight: 500 !important;
}

.pcheck__headline,
.pcheck__title,
.pcheck__score-figure,
.pcheck2__score-second,
.pcheck__category-score,
.pcheck2__monogram,
.pcheck2__launch-title {
  font-weight: 600 !important;
}

.pcheck__headline,
.pcheck__title {
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.pcheck__main {
  max-width: 1160px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 72px;
  gap: 32px;
}

.pcheck__landing {
  max-width: 680px;
  padding-top: 24px;
  gap: 28px;
}

.pcheck__lede {
  max-width: 60ch;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.65;
}

.pcheck__label,
.pcheck__section-title,
.pcheck__preset-title,
.pcheck2__intro-label,
.pcheck2__stage-label,
.pcheck2__sec-title,
.pcheck2__inv-phase {
  font-weight: 600 !important;
}

.pcheck__label {
  letter-spacing: 0.01em;
}

.pcheck__hint,
.pcheck__preset-text,
.pcheck2__intro-text,
.pcheck2__setup-next {
  line-height: 1.6;
}

.pcheck__hint {
  font-size: 0.8125rem;
}

.pcheck__run,
.pcheck__report,
.pcheck2__scan {
  gap: 28px;
}

.pcheck__head {
  gap: 20px;
  padding-bottom: 4px;
}

.pcheck__title {
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.pcheck__subtitle {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.5;
}

.pcheck2__chips {
  gap: 6px;
  margin-top: 14px;
}

.pcheck2__chip {
  padding: 3px 9px;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}

.pcheck__section-title {
  gap: 9px;
  margin-bottom: 12px;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.pcheck2__launch {
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
}

.pcheck2__launch-main {
  gap: 24px;
}

.pcheck2__launch-copy .pcheck__section-title {
  margin-bottom: 6px;
  font-size: 1rem;
}

.pcheck2__launch-copy .pcheck__hint {
  max-width: 54ch;
  font-size: 0.875rem;
}

.pcheck2__trust {
  padding-top: 16px;
  line-height: 1.5;
}

.pcheck2__intro {
  border-radius: var(--radius-lg);
}

.pcheck2__intro-cell {
  gap: 7px;
  padding: 20px;
}

.pcheck2__intro-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
}

.pcheck2__intro-text {
  font-size: 0.8125rem;
}

.pcheck2__picker {
  gap: 20px;
  padding: 20px;
  border-radius: var(--radius-lg);
}

.pcheck__presets {
  gap: 10px;
}

.pcheck__preset {
  min-height: 142px;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius);
}

.pcheck__preset-text {
  font-size: 0.8125rem;
}

.pcheck__preset-meta {
  margin-top: auto;
  font-size: 0.6875rem;
}

.pcheck2__scans {
  gap: 8px;
}

.pcheck2__scan-row {
  gap: 14px;
  min-height: 54px;
  padding: 12px 16px;
  border-radius: var(--radius);
}

.pcheck2__scan-name,
.pcheck2__scan-row .pcheck__status {
  font-weight: 500 !important;
}

.pcheck2__scan-mode {
  padding: 3px 8px;
}

.pcheck2__scan-meta {
  gap: 10px;
}

.pcheck__live-score,
.pcheck__breakdown,
.pcheck__review {
  border-radius: var(--radius-lg);
}

.pcheck__live-score {
  padding: 20px 24px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pcheck__live-score p {
  margin-bottom: 18px;
}

.pcheck__columns {
  gap: 24px;
}

.pcheck2__stage {
  gap: 4px 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius);
}

.pcheck2__stage-activity {
  line-height: 1.5;
}

.pcheck__timeline {
  gap: 4px;
}

.pcheck__timeline li {
  min-height: 34px;
  padding: 7px 10px;
  line-height: 1.5;
}

.pcheck__report {
  gap: 20px;
}

.pcheck2__verdict {
  gap: 6px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
}

.pcheck2__verdict-label {
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

.pcheck2__verdict-summary {
  max-width: 70ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pcheck__score {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.pcheck2__score-cell {
  min-width: 156px;
  gap: 7px;
  padding: 24px;
}

.pcheck2__score-cell + .pcheck2__score-cell {
  padding-left: 24px;
}

.pcheck__score-figure {
  font-size: clamp(2.75rem, 5vw, 4rem);
}

.pcheck2__score-second {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
}

.pcheck__score-denominator {
  font-size: 0.9375rem;
}

.pcheck2__score-caption {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.pcheck__score-verdict {
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-left: 1px solid var(--border-subtle);
}

.pcheck__delta {
  max-width: 50ch;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.pcheck__why {
  font-size: 0.8125rem;
}

.pcheck__breakdown {
  gap: 20px;
  padding: 20px 24px;
}

.pcheck__breakdown > .pcheck__hint {
  max-width: 72ch;
  font-size: 0.8125rem;
}

.pcheck__categories {
  gap: 10px;
}

.pcheck__category {
  gap: 5px;
  padding: 14px;
  border-radius: var(--radius);
}

.pcheck__category-name {
  font-size: 0.8125rem;
}

.pcheck__category-score {
  font-size: 1.5rem;
}

.pcheck__counts {
  gap: 8px;
  font-size: 0.8125rem;
}

.pcheck__counts > span {
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
}

.pcheck__counts > span[data-tone="bad"] {
  border-color: var(--error-line);
  background: var(--error-soft);
}

.pcheck__counts > span[data-tone="warn"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.pcheck2__tabs {
  gap: 24px;
}

.pcheck2__tabs [role="tab"] {
  min-height: 42px;
  padding: 10px 2px 12px;
  font-weight: 500 !important;
}

.pcheck2__tab-count {
  min-width: 22px;
  padding: 1px 7px;
  text-align: center;
}

.pcheck__findings {
  gap: 16px;
}

.pcheck__filters {
  min-height: 34px;
}

.pcheck__chips {
  gap: 6px;
}

.pcheck__chip {
  padding: 6px 11px;
  font-size: 0.75rem;
}

.pcheck__issue {
  border-radius: var(--radius);
}

.pcheck__issue-row {
  padding: 0 12px;
}

.pcheck__issue-row > input {
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  accent-color: var(--accent);
}

.pcheck__issue-open {
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 58px;
  padding: 12px 8px;
  line-height: 1.45;
}

.pcheck__status--flat,
.pcheck2__finding-status,
.pcheck2__sec-ref,
.pcheck2__inv-surface-status,
.pcheck2__inv-hypothesis-state,
.pcheck2__inv-run-outcome {
  font-weight: 600 !important;
}

.pcheck__issue-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.pcheck__issue-body {
  gap: 16px;
  padding: 20px 24px 24px;
  font-size: 0.875rem;
  line-height: 1.65;
}

.pcheck__facts {
  gap: 12px 32px;
}

.pcheck__facts div {
  gap: 4px;
}

.pcheck__facts dt,
.pcheck2__detail-block .pcheck__label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.pcheck__facts dd {
  font-size: 0.8125rem;
}

.pcheck__evidence {
  gap: 7px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.55;
  border-radius: var(--radius-sm);
}

.pcheck2__triage {
  gap: 10px 14px;
  padding-top: 16px;
}

.pcheck2__triage-btn {
  padding: 6px 10px;
  font-size: 0.75rem;
}

.pcheck__fix {
  gap: 10px;
  padding-top: 16px;
}

.pcheck2__security,
.pcheck2__coverage,
.pcheck2__investigation,
.pcheck2__details {
  gap: 20px;
}

.pcheck2__sec-item,
.pcheck2__inv-surface,
.pcheck2__inv-hypothesis,
.pcheck2__inv-run,
.pcheck2__inv-branch,
.pcheck2__inv-audit-row {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--radius);
}

.pcheck2__sec-name,
.pcheck2__inv-hypothesis-text,
.pcheck2__inv-branch-text {
  line-height: 1.5;
}

.pcheck2__cov-list {
  gap: 14px;
}

.pcheck2__cov-row {
  gap: 14px;
}

.pcheck2__cov-bar {
  height: 8px;
}

.pcheck2__proof {
  padding: 10px 14px;
  line-height: 1.6;
}

.pcheck:has(.pcheck2__setup) .pcheck2__setup-card {
  border-radius: var(--radius-lg);
}

.pcheck2__setup-step {
  padding: 20px;
}

.pcheck2__setup-step-main {
  gap: 10px;
}

.pcheck2__setup-dir {
  min-height: 62px;
  padding: 14px 16px;
  border-radius: var(--radius);
}

/* The two actions that affect the directory or the active scan deserve a
   proper control surface, not the small utility treatment used by headers. */
.pcheck2__refresh-btn,
.pcheck2__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-4);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 600 !important;
}

.pcheck2__refresh-btn {
  border-color: var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.pcheck2__refresh-btn:hover:not(:disabled) {
  border-color: var(--focus-ring);
  background: var(--surface-hover);
}

.pcheck2__refresh-btn:disabled,
.pcheck2__cancel-btn:disabled {
  opacity: 1;
}

.pcheck2__refresh-btn:disabled {
  color: var(--text-secondary);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.pcheck2__cancel-btn {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
}

.pcheck2__cancel-btn:hover:not(:disabled) {
  border-color: var(--bad);
  background: var(--error-soft);
  color: var(--bad-text);
}

.pcheck2__cancel-btn[data-pending="true"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.pcheck2__scan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  min-width: 0;
  margin-left: auto;
}

.pcheck2__scan-actions .pane-btn {
  margin-left: 0;
}

.pcheck2__cancel-feedback {
  max-width: 34ch;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.pcheck2__cancel-feedback[data-pending="true"] {
  color: var(--warn-text);
}

/* The Check workspace rows are denser than the report, but they still need a
   readable name/path hierarchy in the shared shell. */
.wside__workspace-btn--check {
  min-height: 56px;
  padding-block: 10px;
  line-height: 1.35;
  font-weight: 500 !important;
}

.wside__workspace-btn--check .wside__workspace-name {
  line-height: 1.3;
  font-weight: 500 !important;
}

.wside__workspace-btn--check .wside__workspace-text,
.wside__workspace-btn--check .wside__count {
  font-weight: 500 !important;
}

.wside__workspace-btn--check .wside__workspace-sub,
.wside__workspace-btn--check .wside__workspace-dir,
.wside__workspace-btn--check .wside__workspace-time {
  line-height: 1.35;
  font-weight: 400 !important;
}

@media (max-width: 720px) {
  .pcheck__main {
    padding: 24px 16px 48px;
    gap: 24px;
  }

  .pcheck__head-actions {
    width: 100%;
  }

  .pcheck__head-actions .pane-btn:first-child {
    flex: 1;
  }

  .pcheck2__scan-actions {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .pcheck2__cancel-feedback {
    max-width: none;
  }

  .pcheck__score {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcheck2__score-cell {
    min-width: 0;
    padding: 20px 16px;
  }

  .pcheck2__score-cell + .pcheck2__score-cell {
    padding-left: 16px;
  }

  .pcheck__score-verdict {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
    padding: 18px 16px;
  }

  .pcheck__issue-open {
    flex-wrap: wrap;
    min-height: 64px;
  }

  .pcheck__issue-title {
    flex-basis: calc(100% - 24px);
    order: 5;
  }

  .pcheck__issue-page {
    max-width: 100%;
  }

  .pcheck2__scan-row {
    flex-wrap: wrap;
  }

  .pcheck2__scan-meta {
    width: 100%;
    margin-left: 0;
  }
}

/* --- the model + effort picker -------------------------------------------
   One control for the two decisions that shape a turn: which model runs, and
   how much reasoning it spends. Opening it leads with the model list — the
   choice that decides which efforts even exist — and choosing a model hands
   off to the effort dial, the way the Codex picker behaves. */

.modelpick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* The split capsule: model and effort side by side in one pill, divided by a
   hairline — the way a pro composer names both decisions at a glance. */
.modelpick__split {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 340px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  transition:
    border-color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.modelpick__split:hover {
  border-color: var(--line-control);
}

.modelpick[data-open="true"] .modelpick__split {
  border-color: var(--line-control);
  background: var(--surface-active);
}

.modelpick__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 170px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-12);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease),
    background var(--motion-fast) var(--ease);
}

.modelpick__trigger:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.modelpick__trigger[data-active="true"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.modelpick__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modelpick__trigger.is-static {
  cursor: default;
  color: var(--text-secondary);
}

.modelpick__trigger.is-static:hover {
  background: transparent;
}

.modelpick__triggerlabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-primary);
}

.modelpick__trigger--effort .modelpick__triggerlabel {
  font-weight: 500;
  color: var(--text-secondary);
}

.modelpick__trigger--effort[data-active="true"] .modelpick__triggerlabel,
.modelpick__trigger--effort:hover .modelpick__triggerlabel {
  color: var(--text-primary);
}

.modelpick__triggerchev {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--text-tertiary);
  transition: transform var(--motion-fast) var(--ease);
}

.modelpick__trigger[data-active="true"] .modelpick__triggerchev {
  transform: rotate(90deg);
}

.modelpick__triggerchev--bolt {
  color: var(--text-tertiary);
}

.modelpick__divider {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
}

.modelpick__panel {
  position: absolute;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 264px;
  max-width: min(264px, calc(100vw - var(--s-6)));
  padding: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
  animation: modelpick-panel-in-up var(--motion-normal) var(--ease);
}

/* Opening downward, the panel drops in from above the trigger instead. */
.modelpick[data-placement="down"] .modelpick__panel {
  top: calc(100% + var(--s-1));
  animation-name: modelpick-panel-in-down;
}

.modelpick[data-placement="up"] .modelpick__panel {
  bottom: calc(100% + var(--s-1));
}

/* The docked composer floats over the transcript; its panel must clear it. */
.chat-composer[data-variant="docked"] .modelpick__panel {
  z-index: 70;
}

/* Floating menus portal to the body, pinned to their trigger by viewport
   coordinates — no ancestor scroll container can slice them off. The panel
   inside lays out statically at the portal's measured width. */
.modelpick__portal {
  position: fixed;
  z-index: 300;
  margin: 0;
}

.modelpick__portal .modelpick__panel {
  position: static;
  width: 100%;
  max-width: none;
}

.modelpick__portal[data-dir="up"] .modelpick__panel {
  animation-name: modelpick-panel-in-up;
}

.modelpick__portal[data-dir="down"] .modelpick__panel {
  animation-name: modelpick-panel-in-down;
}

/* The panel's caption row: what the menu holds, and how many choices. */
.modelpick__menuhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-2) var(--s-2);
}

.modelpick__menutitle {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.modelpick__menucount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-11);
  color: var(--text-tertiary);
}

@keyframes modelpick-panel-in-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes modelpick-panel-in-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.modelpick__searchwrap {
  position: relative;
  display: flex;
  align-items: center;
}

.modelpick__searchicon {
  position: absolute;
  left: 10px;
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  pointer-events: none;
}

.modelpick__search {
  width: 100%;
  padding: var(--s-2) var(--s-3) var(--s-2) 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: var(--t-13);
  outline: none;
}

.modelpick__search::placeholder {
  color: var(--text-tertiary);
}

.modelpick__search:focus {
  border-color: var(--line-control);
}

.modelpick__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modelpick__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 32px;
  padding: 7px var(--s-2);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--t-13);
  text-align: left;
  cursor: pointer;
}

.modelpick__item > .modelpick__itemtext {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelpick__item:hover {
  background: var(--surface-hover);
}

.modelpick__item[data-selected="true"] {
  background: var(--surface-hover);
}

.modelpick__itemicon {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.modelpick__itemtext {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex: 1;
  min-width: 0;
  /* The selection check rides absolutely at the row's end; keep text clear. */
  padding-right: 26px;
}

.modelpick__itemname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelpick__itemmeta {
  flex: none;
  font-size: var(--t-11);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* A model row states its choice with a checkmark, not a fill — the hover
   is the only highlight, the way the Codex list reads. */
.modelpick__itemcheck {
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  color: var(--text-primary);
}

/* The Default block: the provider's own standing choice, named and
   subtitle'd above the model rows. */
.modelpick__section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px var(--s-2) 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.modelpick__section:hover {
  background: var(--surface-hover);
}

.modelpick__section[data-selected="true"] {
  background: var(--surface-hover);
}

.modelpick__sectiontext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-right: 24px;
}

.modelpick__sectiontitle {
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--text-primary);
}

.modelpick__sectionsub {
  font-size: var(--t-12);
  color: var(--text-tertiary);
}

.modelpick__empty {
  padding: var(--s-3);
  text-align: center;
  font-size: var(--t-12);
  color: var(--text-tertiary);
}

/* --- the effort menu: one row per level, name plus what it buys --- */

.modelpick__effortrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 40px;
  padding: 7px var(--s-2);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.modelpick__effortrow:hover {
  background: var(--surface-hover);
}

.modelpick__effortrow[data-selected="true"] {
  background: var(--surface-hover);
}

.modelpick__efforttext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
  min-width: 0;
  padding-right: 24px;
}

.modelpick__effortrowname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--text-primary);
}

.modelpick__effortrowhint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-12);
  color: var(--text-tertiary);
}

/* --- the settings-row variant --- */

/* The settings pane lays this row out as a two-column grid; the picker holds
   both decisions, so it spans the pair rather than sharing with a sibling. */
.modelpick[data-variant="rows"] {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  grid-column: 1 / -1;
}

.modelpick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.modelpick__rowlabel {
  font-size: var(--t-12);
  color: var(--text-secondary);
}

.modelpick__select {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 210px;
  max-width: 320px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: var(--t-13);
  text-align: left;
  cursor: pointer;
}

.modelpick__select:hover:not(:disabled),
.modelpick__select[aria-expanded="true"] {
  border-color: var(--line-control);
}

.modelpick__select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modelpick__select.is-static {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.modelpick__selectlabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelpick[data-variant="rows"] .modelpick__panel {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}

/* ==========================================================================
   Check workspace home — masthead, launch hero, scan ledger
   ==========================================================================
   Three moves. The masthead gets a monogram and a kicker so the directory
   reads as a project rather than a path dump. The one action this screen
   exists for becomes a hero: the monogram echoes ghosted behind the copy on
   a blueprint grid that fades before it can touch the text. And the scan
   list becomes a ledger — hairlines instead of boxes, so the rows read as
   one document with a stated count, not a stack of cards. */

.pcheck2__head-identity {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  min-width: 0;
}

.pcheck2__head-text {
  min-width: 0;
}

.pcheck2__monogram {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: var(--s-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
  font-family: var(--display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.pcheck2__kicker {
  margin: 0 0 var(--s-1);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary-mark);
}

/* The path is data, so it stays monospace; separators are structure, not
   content, and dimming them is what keeps a long path readable. The final
   segment — the folder you actually opened — earns the full text colour. */
.pcheck2__path-segment {
  color: var(--text-tertiary);
}

.pcheck2__path > span:last-child > .pcheck2__path-segment {
  color: var(--text-primary);
}

.pcheck2__path-sep {
  padding: 0 1px;
  color: var(--text-tertiary-mark);
}

/* --- the hero: one card with weight, now with drawing-room depth -------- */

.pcheck2__launch {
  position: relative;
  overflow: hidden;
  gap: 26px;
  padding: 28px;
  border-color: var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.28);
}

/* The drop shadow is tuned for the dark canvas; on paper it steps down to a
   soft lift and the top-edge highlight flips to light. */
[data-theme="light"] .pcheck2__launch {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 44px rgba(0, 0, 0, 0.1);
}

/* The blueprint grid and the top-right glow live in their own layer behind
   everything, masked off before they can reach the copy. */
.pcheck2__launch-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120% 150% at 88% -20%, color-mix(in srgb, var(--text-primary) 7%, transparent), transparent 58%),
    linear-gradient(var(--sgraph-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sgraph-grid) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px, 26px 26px;
  -webkit-mask-image: linear-gradient(to top right, transparent 22%, black 72%);
  mask-image: linear-gradient(to top right, transparent 22%, black 72%);
}

/* The workspace monogram, enlarged to furniture: stroke-only, bleeding off
   the right edge, quieter than the grid beneath it. */
.pcheck2__launch-ghost {
  position: absolute;
  top: 50%;
  right: -0.08em;
  transform: translateY(-54%);
  font-family: var(--display);
  font-size: clamp(6.5rem, 22cqw, 11rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--text-primary) 3%, transparent);
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text-primary) 9%, transparent);
  user-select: none;
  pointer-events: none;
}

.pcheck2__launch-main,
.pcheck2__assure {
  position: relative;
}

.pcheck2__launch-title {
  margin: 0 0 var(--s-2);
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--text-primary);
  text-wrap: balance;
}

.pcheck2__launch-btn {
  min-height: 44px;
  padding-inline: 18px;
  font-weight: 600 !important;
}

.pcheck2__launch-arrow {
  display: inline-flex;
  margin-left: 2px;
  transition: transform var(--dur-1) var(--ease);
}

.pcheck2__launch-btn:hover:not(:disabled) .pcheck2__launch-arrow {
  transform: translateX(3px);
}

.pcheck2__launch-btn:active:not(:disabled) {
  transform: scale(0.99);
}

/* What a check guarantees, as a row of small assurances rather than a
   single sentence: legible at a glance, one provenance per dot. */
.pcheck2__assure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s-3);
  margin: 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck2__assure li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.pcheck2__assure li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: calc(var(--s-3) - var(--s-2));
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.pcheck2__assure svg {
  flex: none;
  color: var(--text-tertiary-mark);
}

.pcheck2__assure li[data-tone="ok"] svg {
  color: var(--ok-text);
}

@container (max-width: 560px) {
  .pcheck2__launch-ghost {
    display: none;
  }
}

/* --- the scan ledger ----------------------------------------------------- */

.pcheck2__history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.pcheck2__history-head .pcheck__section-title {
  margin: 0;
}

.pcheck2__history-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pcheck2__scans {
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Rows cascade in once, fifty milliseconds apart — order is meaning in a
   ledger, and the stagger makes the newest row land first. */
.pcheck2__scans > li {
  animation: pcheck2-row-in 340ms var(--ease-enter) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes pcheck2-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.pcheck2__scan-row {
  padding: 14px var(--s-3);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background var(--dur-1) var(--ease);
}

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

.pcheck2__scan-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.pcheck2__latest {
  padding: 1px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* The scan status graduates from flat text to a pill — a result you can
   scan down the column — while findings keep the flat label they had. */
.pcheck__status:not(.pcheck__status--flat) {
  padding: 3px var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.pcheck__status[data-tone="run"]:not(.pcheck__status--flat),
.pcheck__status[data-tone="ok"]:not(.pcheck__status--flat) {
  border-color: var(--run-line);
  background: var(--run-soft);
  color: var(--ok-text);
}

.pcheck__status[data-tone="warn"]:not(.pcheck__status--flat) {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.pcheck__status[data-tone="bad"]:not(.pcheck__status--flat) {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
}

@media (prefers-reduced-motion: reduce) {
  .pcheck2__scans > li {
    animation: none;
  }
}

/* ==========================================================================
   ProofCheck readability pass — de-bunch the report.

   Complaint: everything felt bunched together, walls of same-weight words.
   Fix, in one place:
   - report, findings and detail all get real vertical rhythm (28px between
     groups, 16-20px inside an open finding, not 8px everywhere)
   - one status card replaces the stacked completion + verdict banners
   - finding rows become two-line (title / location + status) so the long
     path no longer fights the title on one line
   - open findings read as numbered steps 1-5 with collapsible evidence,
     instead of ten same-weight blocks
   - helper copy shrinks to footnote size and muted tone
   ========================================================================== */

.pcheck__report {
  gap: var(--s-6);
}

.pcheck2__status-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck2__status-card[data-tone="warn"] {
  border-left-color: var(--warn);
  background: linear-gradient(135deg, var(--warn-soft), var(--bg-surface) 65%);
}

.pcheck2__status-card[data-tone="bad"] {
  border-left-color: var(--bad);
  background: linear-gradient(135deg, var(--error-soft), var(--bg-surface) 65%);
}

.pcheck2__status-card[data-tone="ok"],
.pcheck2__status-card[data-tone="run"] {
  border-left-color: var(--ok);
}

.pcheck2__status-card-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pcheck2__status-eyebrow {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--warn-text);
}

.pcheck2__status-card[data-tone="bad"] .pcheck2__status-eyebrow {
  color: var(--bad-text);
}

.pcheck2__status-card[data-tone="ok"] .pcheck2__status-eyebrow,
.pcheck2__status-card[data-tone="run"] .pcheck2__status-eyebrow {
  color: var(--ok-text);
}

.pcheck2__verdict-chip {
  padding: 2px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--text-secondary);
}

.pcheck2__verdict-chip[data-tone="warn"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn-text);
}

.pcheck2__verdict-chip[data-tone="bad"] {
  border-color: var(--error-line);
  background: var(--error-soft);
  color: var(--bad-text);
}

.pcheck2__verdict-chip[data-tone="ok"] {
  border-color: var(--run-line);
  background: var(--run-soft);
  color: var(--ok-text);
}

.pcheck2__status-summary {
  max-width: 72ch;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.pcheck2__status-meta {
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
  color: var(--text-tertiary);
}

.pcheck2__scores {
  gap: var(--s-5);
  padding: var(--s-5);
}

.pcheck2__scores .pcheck2__score-caption {
  order: -1;
  margin-bottom: var(--s-1);
}

.pcheck2__score-empty {
  color: var(--text-tertiary);
}

.pcheck2__footnote {
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--text-tertiary);
}

.pcheck2__footnote strong {
  color: var(--text-secondary);
}

.pcheck2__severity-row {
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}

.pcheck2__severity-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pcheck2__findings-intro {
  align-items: center;
  background: var(--bg-surface);
}

.pcheck2__findings-intro p {
  font-size: var(--t-label);
}

.pcheck2__review-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--radius-full);
  background: var(--warn);
  vertical-align: 1px;
}

.pcheck2__findings-totals small {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-2);
  padding: 2px var(--s-2);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-full);
  background: var(--warn-soft);
}

.pcheck2__filters {
  justify-content: space-between;
}

.pcheck2__filter-count {
  font-size: var(--t-micro);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pcheck__issues {
  gap: var(--s-3);
}

.pcheck2__issue .pcheck__issue-row {
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
}

.pcheck2__row-main {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pcheck2__row-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.pcheck2__row-top .pcheck__issue-title {
  flex: 1;
  font-size: var(--t-body);
  font-weight: 500;
}

.pcheck2__row-bottom {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  flex-wrap: wrap;
}

.pcheck2__row-bottom .pcheck__issue-page {
  max-width: min(100%, 420px);
  font-size: var(--t-micro);
}

.pcheck2__row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pcheck2__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary-mark);
}

.pcheck2__status-dot[data-tone="bad"] {
  background: var(--bad);
}

.pcheck2__status-dot[data-tone="warn"] {
  background: var(--warn);
}

.pcheck2__status-dot[data-tone="ok"],
.pcheck2__status-dot[data-tone="run"] {
  background: var(--ok);
}

.pcheck2__detail {
  gap: var(--s-4);
  padding: var(--s-5);
}

.pcheck2__overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pcheck2__overview .pcheck2__finding-summary-cell {
  gap: 6px;
  padding: var(--s-4);
}

.pcheck2__category-value {
  font-weight: 500 !important;
}

.pcheck2__overview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcheck2__step {
  gap: var(--s-2);
  padding: var(--s-4);
}

.pcheck2__step h4,
.pcheck2__fix-head h4 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-primary);
}

.pcheck2__finding-limitation strong {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.pcheck2__step-num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--text-secondary);
}

.pcheck2__step p {
  max-width: 72ch;
  line-height: 1.65;
}

.pcheck2__finding-evidence {
  display: none;
}

.pcheck2__evidence-note {
  margin: 0;
  padding: 0 var(--s-4) var(--s-1);
  font-size: var(--t-micro);
  color: var(--text-tertiary);
}

.pcheck2__technical summary {
  font-size: var(--t-label);
}

.pcheck2__fix {
  gap: var(--s-3);
  padding: var(--s-4);
}

.pcheck2__fix-sub,
.pcheck2__fix-note {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--text-secondary);
}

.pcheck2__fix-cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pcheck2__fix-path--inline {
  width: auto;
  flex: 1;
  min-width: 160px;
  font-size: var(--t-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcheck2__triage {
  gap: var(--s-3);
}

.pcheck2__triage-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .pcheck2__overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .pcheck2__status-card,
  .pcheck2__detail {
    padding: var(--s-4);
  }

  .pcheck2__scores {
    gap: var(--s-4);
  }

  .pcheck2__overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Browser window host; the renderer above is the desktop stylesheet. */
.ps-desktop { width: 100%; height: 100%; }
body > .skip-link { display: none; }