/* ══════════════════════════════════════════════════════════════════════════
   Design tokens: the app's base palette
   Source: a tokens.json made by a Wind Tunnel export

   Two layers, deliberately:

   1. The DESIGN SYSTEM layer (`--color-*`, `--shadow-*`, …) is a verbatim
      transcription of the semantic Light set in tokens.json, under the
      hyphenated names that file's own `agentContext.tokenNamingConvention`
      specifies. When the design system changes, only this block changes.
      Its type, spacing and radius steps are not here any more: the sweep of
      2026-09-21 (docs/design/canvas-plan.md, section 1) took every size from
      the Instrument scales in src/ui/tokens.css (--t-*, --sp-*, --r-*), the
      colour and the faces staying the DS's.

   2. The ALIAS layer maps Wind Tunnel's existing internal names onto it. The
      app has ~470 `var()` call sites; aliasing meant none of them had to be
      touched, and the next token update is a one-block edit.

   LIGHT, not dark. tokens.json declares `darkModeDefault: false` and every
   mockup shipped alongside it (src/mockups/*.html) is light on white. An
   earlier pass here adopted the Dark set: which is the single biggest reason
   this app kept looking unrelated to the system it was themed from.

   And light only. One prefers-color-scheme block survived the port, turning
   the wordmark white on a white surface on a dark desktop; it is gone, and
   tests/house.js keeps the sheet to one scheme. Every colour is a role now,
   so a dark theme, if the system ever ships one, is one token block, not a
   pass through the sheet.
   ══════════════════════════════════════════════════════════════════════════ */
/* One face, SF Pro Display (2026-09-21): the system's own, named first
   for a machine that has it installed and reached through -apple-system
   and system-ui on every other. No file ships and nothing is fetched.
   Outfit and Fira Code, the DS's faces, stay the defaults a design
   system offers to the pages it draws; the app's own chrome is set in
   SF Pro Display alone, its figures tabular so counts and prices line
   up where the mono face used to do that. */

:root {
  color-scheme: dark;

  /* ── The base palette: dark, the default since 2 October 2026. The
     light theme restates every one of these under data-theme="light",
     below this block; tests/house.js holds the two lists to the same
     names and measures every text role on every ground it sits on. The
     blue is the app's own; the neutrals are warm greys, the ground a
     step below the chrome. ── */
  --color-bg: #171616;
  --color-surface: #211f1f;
  --color-surface-raised: #2b2929;
  --color-bar: #0f0e0e;             /* the chrome: title bar, rail, sidebar */
  --color-sunken: #111010;          /* a trough: the bed under a segmented control, the canvas */
  --color-line: #343232;            /* the middle line: a menu's edge, a divider with weight */
  --color-overlay: rgba(0,0,0,0.65);
  --color-border: #2a2828;
  --color-border-strong: #4a4747;
  --color-text: #f2efef;
  --color-text-muted: #9a9192;
  --color-text-subtle: #8a8384;
  --color-primary: #2663EB;
  --color-primary-hover: #3b74f0;
  --color-primary-fg: #ffffff;
  --color-primary-subtle: rgba(38,99,235,0.16);
  --color-accent: #8a8687;
  --color-accent-hover: #a39e9f;
  --color-error: #ff7b6a;
  --color-error-subtle: rgba(255,107,92,0.12);
  --color-warning: #f0b24e;
  --color-warning-subtle: rgba(235,152,10,0.12);
  --color-success: #5fc690;
  --color-success-subtle: rgba(28,166,79,0.12);
  --color-info: #5b8dfa;
  --color-info-subtle: rgba(38,99,235,0.12);

  /* Primitives this theme reaches for directly, each with a reason.

     brand/500 is the brand red as the mockups actually paint it (4.91:1 on
     white both ways). brand/600 is the same hue darkened far enough to carry
     11px glyphs on a raised surface, where brand/500 lands at 4.47:1.

     neutral/600 is the lightest neutral that clears 4.5:1 on all three light
     surfaces. The semantic `text/muted` and `text/subtle` tokens do not 3.63:1 and 2.30:1 on white: so they are transcribed above for fidelity
     but deliberately not aliased to anything that renders text. */
  --brand-500: #2663EB;   /* fills, borders, focus rings */
  --brand-600: #5b8dfa;   /* glyphs: the lighter blue that reads on the dark ground */
  --neutral-600: #9a9192;
  --neutral-700: #c7c0c1;

  /* Channel triplets: for `rgba(var(--rgb-primary), .28)` tints. Without
     these every translucent accent freezes the old palette as a literal, which
     is exactly how this file drifted the first time. */
  --rgb-primary: 38,99,235;
  --rgb-warning: 240,178,78;
  --rgb-success: 95,198,144;
  --rgb-error: 255,123,106;

  /* Surface tints. On the dark theme these were white at 2–14% alpha; on light
     they have to be black or they vanish into the surface they sit on. */
  --tint-1: rgba(255,255,255,0.03);
  --tint-2: rgba(255,255,255,0.05);
  --tint-3: rgba(255,255,255,0.07);
  --tint-4: rgba(255,255,255,0.10);
  --tint-5: rgba(255,255,255,0.14);
  --tint-6: rgba(255,255,255,0.20);

  /* ── Design system: shape, motion, type ── */
  /* Six sizes, and every one of them nameable.

     Fifteen rendered across five routes before this: seven of them inside
     a five pixel band, where 13 sat beside 13.5 beside 14 beside 15 and
     nothing in the product depended on the difference. Three headlines
     were clamped, so they were a different size at every window width and
     no two machines saw the same one.

     11 caption and meta, 12 controls, 13 body, 16 the glyphs that carry
     icons, 22 a section heading, 30 a page heading. The three token
     families below all resolve into those six; the names stay because
     ~900 call sites use them.

     Two marks keep their own size: an 8px cross inside a 14px dot and a
     9.5px letter inside a small square. Each is sized to fit a box rather
     than to be read at a step, which is the same argument this file makes
     for writing true circles as 50%. */
  /* The corners are the Instrument radius scale (src/ui/tokens.css,
     --r-*), a decision per element class since the sweep of 2026-09-21
     (docs/design/canvas-plan.md, section 1): the flat 4px family under
     seven names that sat here is gone. Nothing here reaches a generated
     screen or a preview, which take their corners from the project's own
     design system through resolveRadius(). */

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.50);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.65);

  --duration-fast: 100ms;  --duration-base: 150ms;  --duration-slow: 250ms;
  --easing-default: cubic-bezier(0.4,0,0.2,1);
  --easing-spring: cubic-bezier(0.34,1.56,0.64,1);

  --font-body: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  /* One face. The display face named Inter while every title was set in
     Outfit, and the one rule that asked for it set the Foundry's figures
     in a second sans; the mono role set its labels in Fira Code. All
     three are the one face now; the mono role keeps its size, tracking
     and case, which is what made it read as a label. */
  --font-display: var(--font-body);
  --font-mono: var(--font-body);

  /* ── Alias layer: Wind Tunnel's internal names ── */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-hover: var(--color-surface-raised);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --text: var(--color-text);
  /* Both point at neutral/600, not at text/muted and text/subtle. All 60 uses
     of `--subtle` are 10–11px labels and every use of `--muted` is secondary
     body copy; the semantic tokens fail 4.5:1 on all three light surfaces.
     The design system has no de-emphasis step that is legible on light worth adding one there rather than inventing it here. */
  --muted: var(--neutral-600);
  --subtle: var(--neutral-600);
  /* Two reds, because one cannot do both jobs on light surfaces:
     `--brand` fills, borders and focus rings (UI contrast, 3:1);
     `--brand-text` anywhere the red carries glyphs (4.5:1 on every surface). */
  --brand: var(--brand-500);
  --brand-text: var(--brand-600);
  --brand-2: var(--color-primary-hover);
  --brand-glow: rgba(38,99,235,0.30);
  --green: var(--color-success);
  /* `--green` is the indicator colour: fine as a dot, bar or border, where
     3:1 applies. It is 3.04:1 on white, so anywhere green carries an 11px
     label it has to step down the ramp, exactly as --brand does. */
  --green-text: #5fc690;
  --green-dim: rgba(95,198,144,0.12);
  --green-border: rgba(95,198,144,0.40);
  /* Amber has the same problem green does, for the same reason: #eb980a
     is 2.2:1 on white, fine as a dot and unreadable as a label. One rule
     already carried this darker step as a literal fallback behind a
     `--warn` that is defined nowhere. It is a token now, beside the green
     it mirrors. */
  --warning-text: #f0b24e;
  /* Every other status colour names what goes on top of it. Error did
     not, so the one rule that asked for it lost the declaration entirely
     and a destructive button drew inherited near-black on #b21010. */
  --color-error-fg: #141313;
  /* The selected-state tint. Named --red-* while the brand was red and
     valued off the ERROR channel by mistake, so every active chip, tab and
     filter carried a red wash under blue text. Now derived from the brand,
     via the channel triplet so it can never freeze a literal again. */
  --brand-dim: rgba(var(--rgb-primary), 0.07);
  --brand-border: rgba(var(--rgb-primary), 0.24);
  --transition: var(--duration-base) var(--easing-default);
  --color-error-hover: #ff9385;
  /* Channel triplets for the two grounds, so a wash over a page or a
     dark canvas is written as a tint of a role, not a literal. */
  --rgb-white: 255,255,255;
  --rgb-black: 0,0,0;
  /* The dark canvas under a component, and the dark logo slot: four
     roles, the only dark surface the app draws itself. */
  --dark-bg: #0d0d12;  --dark-surface: #1b1a1c;  --dark-border: #322f34;  --dark-text: #6f6a70;
  /* And the light canvas under a component in its light mode: a page's
     ground, the same in both themes, so a system's light components
     are never drawn on the app's dark ground (2 October 2026). */
  --light-bg: #fafafa;  --light-surface: #ffffff;  --light-border: #e9e7e7;  --light-text: #726567;
  /* Identities the app borrows: Figma's blue and mark, Storybook's
     pink, and the purple the design-system chip has always worn. */
  --figma: #1abcfe;  --figma-hover: #09a8e8;  --figma-text: #5fc9ff;  --rgb-figma: 26,188,254;
  --figma-mark: #a259ff;  --storybook: #ff4785;
  --ds-purple: #7f56d9;  --ds-purple-text: #b79cff;  --rgb-ds-purple: 127,86,217;
  /* The Library's categories, each its own hue. */
  --cat-workflow-text: #a5b4fc;   --rgb-cat-workflow: 99,102,241;
  --cat-screens-text: #6ee7b7;    --rgb-cat-screens: 16,185,129;
  --cat-figma-text: #fcd34d;      --rgb-cat-figma: 245,158,11;
  --cat-components-text: #c4b5fd; --rgb-cat-components: 139,92,246;
  --cat-iteration-text: #67e8f9;  --rgb-cat-iteration: 6,182,212;
  --cat-qa-text: #f9a8d4;         --rgb-cat-qa: 236,72,153;

  /* ── App chrome (layout, not a design-system concern) ── */
  --menubar-h: 0px;             /* the in-window File bar is gone (2 October 2026); the name stays for the rules that add it */
  --wt-panel-w: 0px;            /* the detail panel's width while it is open as a split; set on the root by src/panel.js */
  /* 252 here and 256 in --app-sidebar-width described the same element.
     Flex used the later one, so the sidebar has always been 256 while the
     sticky bar positioned itself at 252: a 4px overlap nobody could see
     until the grid gave the column an opinion. One number now. */
  --sidebar-w: 256px;
  --sticky-h: 58px;
}

/* ── The light theme ───────────────────────────────────────────────
   The app's own palette as it was before 2 October 2026: the same blue
   on a white ground. Under data-theme="light" on the root, which the
   inline script in index.html sets before the first paint from the
   choice Settings keeps. Every colour the dark root declares is
   restated here; the amber that carries glyphs is one step darker
   than the DS's, the step that clears 4.5:1. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-raised: #f5f4f4;
  --color-bar: #f1f0f0;
  --color-sunken: #eae9e9;
  --color-line: #d4cecf;
  --color-overlay: rgba(0,0,0,0.45);
  --color-border: #e9e7e7;
  --color-border-strong: #b2a9aa;
  --color-text: #181616;
  --color-text-muted: #918385;
  --color-text-subtle: #b2a9aa;
  --color-primary-hover: #1f55d0;
  --color-primary-subtle: #f2f6fe;
  --color-accent: #7a7a7a;
  --color-accent-hover: #616161;
  --color-error: #b21010;
  --color-error-subtle: #fbf4f4;
  --color-warning: #eb980a;
  --color-warning-subtle: #fbf8f3;
  --color-success: #1ca64f;
  --color-success-subtle: #f4faf7;
  --color-info: #094cb9;
  --color-info-subtle: #f4f6fb;
  --brand-600: #1f55d0;
  --neutral-600: #726567;
  --neutral-700: #564d4e;
  --rgb-warning: 235,152,10;
  --rgb-success: 28,166,79;
  --rgb-error: 178,16,16;
  --tint-1: rgba(0,0,0,0.02);
  --tint-2: rgba(0,0,0,0.035);
  --tint-3: rgba(0,0,0,0.05);
  --tint-4: rgba(0,0,0,0.07);
  --tint-5: rgba(0,0,0,0.10);
  --tint-6: rgba(0,0,0,0.14);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.32);
  --brand-glow: rgba(38,99,235,0.22);
  --green-text: #105c2b;
  --green-dim: rgba(28,166,79,0.09);
  --green-border: rgba(28,166,79,0.28);
  --warning-text: #8f5a05;
  --color-error-fg: #ffffff;
  --color-error-hover: #8f0d0d;
  --figma-text: #0369a1;
  --ds-purple-text: #5b3aa8;
  --cat-workflow-text: #4338ca;
  --cat-screens-text: #047857;
  --cat-figma-text: #92400e;
  --cat-components-text: #6d28d9;
  --cat-iteration-text: #0e7490;
  --cat-qa-text: #be185d;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 900px;
  /* Flat. The reference mockups carry no ambient wash: depth on light
     comes from borders and surface steps, not from a tinted glow. */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body-sm-s);
  line-height: 1.5;
  /* Figures line up everywhere: the mono role used to do that with a
     second face; one face does it with its tabular figures. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { cursor: text; }
code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); background: var(--tint-4); padding: 1px 4px; border-radius: var(--r-xs); }

/* ══ ONE FOCUS RING ════════════════════════════════════════════════
   Focus rings were the browser's, and 28 rules switched them off on the
   fields they styled, for the mouse and the keyboard alike. One ring,
   from the focus token, on everything that takes the keyboard, and only
   for the keyboard; a field lights its own frame instead. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* ══ THE KEYS: the palette and the sheet (src/keys.js) ═══════════════ */
.wt-palette {
  width: 640px; max-width: 92vw; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4xl);
  box-shadow: var(--shadow-modal); overflow: hidden; align-self: flex-start; margin-top: 12vh;
}
.wt-palette-in { height: 48px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 16px; font-size: var(--t-title-md-s); background: var(--surface); }
.wt-palette-in:focus-visible { box-shadow: none; border-color: var(--border); }
.wt-palette-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.wt-palette-item {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 8px 8px; border: 0; border-radius: var(--r-4xl); background: none; color: var(--text);
  font: inherit; font-size: var(--t-body-sm-s); text-align: left; cursor: pointer;
}
.wt-palette-item .k { font-size: var(--t-caption-s); color: var(--subtle); }
.wt-palette-item .l { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-palette-item .h { font-size: var(--t-caption-s); color: var(--muted); white-space: nowrap; }
.wt-palette-item:hover, .wt-palette-item.on { background: var(--brand-dim); color: var(--brand-text); }
.wt-palette-item.on .k, .wt-palette-item.on .h { color: var(--brand-text); }
.wt-palette-none { margin: 0; padding: 16px 12px; font-size: var(--t-body-sm-s); color: var(--muted); }
.wt-palette-foot { margin: 0; padding: 8px 16px; border-top: 1px solid var(--border); font-size: var(--t-caption-s); color: var(--subtle); display: flex; gap: 12px; }
.wt-palette-foot kbd, .wt-keys kbd {
  font: inherit; font-size: var(--t-micro-s); font-weight: 600; color: var(--muted); background: var(--surface-hover);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 6px; margin-right: 4px; white-space: nowrap;
}
.wt-keys-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wt-keys-row { display: grid; grid-template-columns: 72px 1fr; align-items: baseline; gap: 12px; }
.wt-keys-row dt, .wt-keys-row dd { margin: 0; }
.wt-keys-row dd { font-size: var(--t-body-sm-s); color: var(--muted); }

/* ══ ONE BUTTON ════════════════════════════════════════════════════
   Thirty classes drew a button, each with its own height, padding and
   type: a primary was 44px on the head and 32px on the canvas, a ghost
   had a border here and none there. One component: .btn with a look
   (primary, secondary, ghost, danger) and a size (md, or sm), and
   `icon` for a square one. `on` is a toggle that is on; `is-danger` is
   the confirm sheet turning a button red for one question. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  /* The spec's heights (2.5): a section action at 34, a small one at 28, the list head's at 38. */
  height: var(--h-action); padding: 0 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-body-sm-s); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn.sm { height: var(--h-meta); padding: 0 8px; font-size: var(--t-body-xs-s); gap: 4px; }
.btn.icon { width: var(--h-action); padding: 0; }
.btn.icon.sm { width: var(--h-meta); }
.btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); }
.btn.primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn.secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--tint-2); color: var(--text); }
.btn.danger, .btn.is-danger { background: var(--color-error); border-color: var(--color-error); color: var(--color-error-fg); }
.btn.danger:hover:not(:disabled), .btn.is-danger:hover:not(:disabled) { background: var(--color-error-hover); border-color: var(--color-error-hover); }
.btn.secondary.is-danger, .btn.ghost.is-danger { background: var(--surface); color: var(--color-error); border-color: var(--color-error); }
.btn.secondary.is-danger:hover:not(:disabled), .btn.ghost.is-danger:hover:not(:disabled) { background: var(--color-error-subtle); }
.btn.on, .btn[aria-expanded="true"] { color: var(--brand-text); background: var(--brand-dim); border-color: var(--brand-border); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn .fig { width: 13px; height: 13px; }

.menu-group { display: flex; flex-direction: row; gap: 0; flex-shrink: 0; }

.menu-item {
  position: relative;
  padding: 0 8px;
  height: var(--menubar-h);
  display: flex; align-items: center;
  font-size: var(--t-caption-s); color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-item:hover { background: var(--tint-3); color: var(--text); }
.menu-item.open  { background: var(--tint-4); color: var(--text); }

.menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px); left: 0;
  min-width: 220px;
  /* Short today, and one File menu away from not being. */
  max-height: calc(100vh - var(--chrome-h) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-4xl);
  padding: 4px;
  box-shadow: var(--shadow-modal);
  z-index: 1000;
}
.menu-item.open .menu-dropdown { display: block; }

.menu-action {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 6px 8px;
  border-radius: var(--r-lg); border: none; background: transparent;
  color: var(--muted); font-size: var(--t-caption-s); text-align: left;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap; gap: 24px;
}
.menu-action:hover { background: var(--tint-4); color: var(--text); }
.menu-shortcut { font-size: var(--t-mono-sm-s); color: var(--subtle); font-family: var(--font-mono); flex-shrink: 0; }
.menu-sep { height: 1px; background: var(--tint-4); margin: 2px 6px; }

.menubar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-caption-s); color: var(--subtle);
  flex-shrink: 0;
  padding-left: 12px;
  white-space: nowrap;
}

/* === App shell === */
/* The phase bar spans the whole route, so .app is a grid with the bar
   on row one and the rail and page sharing row two. It was a flex row
   of sidebar + main, which had nowhere to put a full-width band. */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--menubar-h));
  margin-top: var(--menubar-h);
  overflow: hidden;
  position: relative;
}
/* The head spans the rail and the page, above both. */
.app > #dsHead { grid-column: 1 / -1; grid-row: 1; }

/* width:var(--sidebar-w) was set for the old flex row. In the grid the
   track already is that width, and the explicit width made the element
   4px wider than its own column, so it lapped over the page beside it. */
.app > .sidebar { grid-column: 1; grid-row: 2; min-width: 0; }
.app > main     { grid-column: 2; grid-row: 2; }
/* The Prompt Library drops the rail, so it must drop its column too or
   the page starts 232px in against an empty gutter. */
.app.app--library { grid-template-columns: minmax(0, 1fr); }
.app.app--library > main { grid-column: 1; }

.app.app--library > #dsHead { display: none; }
/* The Foundry's hero is a toolbar now: the head names the system and
   the view, so the heading and the paragraph go; the library keeps
   its own until it gets a head. The sidebar's brand block said the
   name a second time, and the about card was a leaflet in an editor. */
.app:not(.app--library) .hero-text { display: none; }
.app:not(.app--library) .hero { margin-bottom: 12px; align-items: center; }
.app > .sidebar > .brand, .app > .sidebar > .brand { display: none; }
.app > .sidebar .about-card { display: none; }
.wf-modes button .tick { margin-left: 4px; color: var(--color-success); font-style: normal; font-size: var(--t-micro-s); }
.wf-modes button[data-state="stale"] .tick { color: var(--warning-text); }

/* ══════════════════════════════════════════════
   Sidebar
══════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 2px;
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-info h1 { margin: 0; font-size: var(--t-body-sm-s); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.brand-sub { display: block; font-size: var(--t-caption-s); color: var(--subtle); margin-top: 2px; }

/* ── Nav progress: steps complete out of 7 ── */
.nav-progress { padding: 0 4px 12px; }
.nav-progress-track {
  height: 3px; border-radius: var(--r-xs); background: var(--tint-4); overflow: hidden;
}
.nav-progress-track i {
  display: block; height: 100%; border-radius: var(--r-xs);
  background: var(--brand); width: 0%;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
#navProgressLabel {
  display: block; margin-top: 6px;
  font-size: var(--t-caption-s); font-weight: 700; letter-spacing: 0.04em;
  color: var(--subtle);
}

/* ── Nav: modern minimal ── */
/* Scoped to the sidebar it was written for. As a bare element selector it
   reached every <nav> on the page, including the ones the component preview
   draws: a Breadcrumb inherited `flex-direction: column` and stacked its
   crumbs vertically, because the inline style set `display:flex` but never
   had reason to restate the direction. */
.sidebar nav { display: flex; flex-direction: column; gap: 1px; flex: 1; padding-top: 4px; }

.nav {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 8px;
  border-radius: var(--r-lg);
  border: none;
  background: transparent;
  text-align: left;
  position: relative;
  transition: background var(--transition);
  }

/* Per-step status dot: done / current / todo */
.nav-dot {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  pointer-events: none;
}
.nav-dot.done {
  background: var(--green); border: none;
}
.nav-dot.current {
  background: var(--brand); border: none;
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.nav strong {
  font-size: var(--t-body-sm-s); font-weight: 400; color: var(--muted);
  display: block; transition: color var(--transition);
  letter-spacing: -0.01em;
}
.nav span {
  font-size: var(--t-caption-s); color: var(--subtle);
  display: block; transition: color var(--transition);
  margin-top: 1px;
}
.nav:hover { background: var(--tint-2); }
.nav:hover strong { color: var(--text); }
.nav:hover span { color: var(--muted); }

.nav.active { background: var(--tint-3); }
.nav.active strong { color: var(--text); font-weight: 600; }
.nav.active span { color: var(--muted); }
.nav.active::before {
  content: '';
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2px; border-radius: var(--r-xs);
  background: var(--brand);
  box-shadow: 0 0 6px var(--brand-glow);
}

.row { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-caption-s); color: var(--muted); }
.row b { color: var(--text); font-weight: 700; }

/* ── About card ── */
.about-card {
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--tint-1);
}
.about-logo {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-caption-s); font-weight: 700; color: var(--subtle);
  margin-bottom: 8px;
}
.about-logo svg { color: var(--brand-text); flex-shrink: 0; }

/* ── The wordmark ───────────────────────────────────────────────────
   Pure type: light "Wind", set "Tunnel", one family. The weight
   contrast IS the mark: never set both words at one weight.
   Tracking tightens as the mark shrinks, per the brand kit's optical
   scale (the light weight thins out at small sizes). */
.wt-mark { font-family: var(--font-body); line-height: 1; white-space: nowrap;
           display: inline-flex; gap: .28em; align-items: baseline; }
.wt-mark .wind   { font-weight: 600; color: var(--brand-text); }
.wt-mark .tunnel { font-weight: 600; color: var(--color-text); }

.wt-mark.sz-sm { font-size: var(--t-body-sm-s); letter-spacing: -0.012em; }
.wt-mark.sz-sm .wind { font-weight: 700; }
.wt-mark.sz-sm .tunnel { font-weight: 700; }
.about-desc { margin: 0 0 8px; font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.6; }
.about-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-caption-s); color: var(--subtle);
}
.about-version {
  padding: 1px 6px; border-radius: var(--r-2xl);
  background: var(--brand-dim); border: 1px solid var(--brand-border);
  color: var(--brand-text); font-weight: 700; font-size: var(--t-caption-s);
}

/* === Main === */
main {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 24px 32px;
  padding-bottom: 32px;
}

/* ══════════════════════════════════════════════
   Hero + health widget
══════════════════════════════════════════════ */
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.hero-text small {
  display: block; font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--brand-text); margin-bottom: 8px;
}
/* A fluid top step is not a scale: at 1400px this resolved to 26px, so the
   ratio between the page title and everything under it changed with the
   window. Pinned to the h1 step. */
.hero-text h2 { margin: 0; font-size: var(--t-display-md-s); font-weight: var(--t-display-md-w); letter-spacing: -0.02em; line-height: var(--t-display-md-lh); }
.hero-text p  { margin: 8px 0 0; color: var(--muted); max-width: 480px; line-height: 1.65; font-size: var(--t-body-sm-s); }

.hero-setup {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; padding-top: 6px;
}
.setup-mini-label { font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle); white-space: nowrap; }
.setup-mini-track {
  width: 120px; height: 5px;
  background: var(--tint-4);
  border-radius: var(--r-xs); overflow: hidden;
}
.setup-mini-fill {
  height: 100%; border-radius: var(--r-xs);
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background-color 0.5s ease;
  background: var(--brand);
}
.setup-mini-pct { font-size: var(--t-caption-s); font-weight: 700; color: var(--muted); min-width: 32px; }

/* === Sections === */
.section { display: none; }
.section.active { display: block; }

/* ══════════════════════════════════════════════
   Overview: two-column layout
══════════════════════════════════════════════ */
.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}
.config-main { display: flex; flex-direction: column; gap: 8px; }
.config-aside { position: sticky; top: 0; }

/* ══════════════════════════════════════════════
   Visual Style: two-column layout
══════════════════════════════════════════════ */
.style-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.style-col { display: flex; flex-direction: column; gap: 8px; }
.style-group { margin-bottom: 16px; }
.style-group:last-child { margin-bottom: 0; }
.style-group .group-label { margin-bottom: 8px; }

/* Custom value input */
.custom-val-input {
  width: 100%; margin-top: 8px;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--muted);
  font-size: var(--t-caption-s);
  transition: border-color var(--transition), color var(--transition);
}
.custom-val-input:focus { border-color: rgba(var(--rgb-primary),0.4); color: var(--text); }
.custom-val-input::placeholder { color: var(--subtle); }

/* ══════════════════════════════════════════════
   Config card (shared)
══════════════════════════════════════════════ */
.config-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 16px 20px; }
.config-card-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 12px;
}

/* Foundation sub-grid */
.foundation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.foundation-group { display: flex; flex-direction: column; gap: 8px; }
.group-label { margin: 0; font-size: var(--t-caption-s); font-weight: 400; color: var(--muted); }

/* Framework button grid */
.fw-grid { display: flex; flex-wrap: wrap; gap: 4px; }

/* Foundation grid: uniform-height auto-fill cards */
.ui-fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.ui-fw-grid .fw-btn {
  height: 56px;   /* title + subtitle need one more step than a single line */
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  text-align: left; white-space: normal; width: 100%;
}

.fw-btn {
  padding: 6px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--t-caption-s); font-weight: 600;
  transition: all var(--transition); cursor: pointer;
  white-space: nowrap;
}
.fw-btn:hover  { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.fw-btn.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--text); }
.fw-btn.incompat { opacity: 0.3; }
.fw-btn.incompat:hover { opacity: 0.55; }
/* Description shown as a tiny subtitle inside foundation cards only */
.fw-desc {
  display: block; font-size: var(--t-caption-s); color: var(--subtle); margin-top: 2px;
  font-weight: 400; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
/* Swaps in for .fw-desc on incompatible cards: states what would unlock it */
.fw-desc.fw-reason { color: var(--color-primary); font-weight: 600; }
.incompat-badge { display: none; } /* dimming communicates incompatibility, no need for text */

/* ── Platform grid: compact icon buttons ── */
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.platform-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 16px 8px;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  transition: all var(--transition);
}
.platform-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.platform-btn.active { background: var(--brand-dim); border-color: var(--brand-border); }
.platform-btn.active svg, .platform-btn.active .platform-label { color: var(--text); }
.platform-btn.active .platform-sub { color: var(--muted); }
.platform-btn svg { flex-shrink: 0; }
.platform-label { font-size: var(--t-caption-s); font-weight: 600; color: inherit; display: block; }
.platform-sub   { font-size: var(--t-caption-s); color: var(--subtle); display: block; text-align: center; line-height: 1.3; }

/* ── Ingredients card ── */
/* Ingredients aside: no box, just a living message */
.ingredients-card {
  border: none !important;
  background: transparent !important;
  padding-left: 4px;
}
.ingredients-eyebrow {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle); margin-bottom: 12px;
}
.ingredients-message {
  font-size: var(--t-body-sm-s); line-height: 1.9; color: var(--muted);
  margin: 0 0 20px;
}
.ingredients-message strong { color: var(--text); font-weight: 600; }
.ingredients-message em { font-style: normal; color: var(--brand-text); font-weight: 600; }

/* Preset callout: prominent but not boxed */
.preset-callout {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 4px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.preset-callout-icon {
  font-size: var(--t-title-md-s); line-height: 1; margin-top: 1px; flex-shrink: 0;
}
.preset-callout-body { display: flex; flex-direction: column; gap: 2px; }
.preset-callout-name { font-size: var(--t-body-sm-s); font-weight: 700; color: var(--text); }
.preset-callout-desc { font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }

/* Legacy pills row: hidden now, message replaces it */
.ingredients-pills { display: none; }
.ing-chip { display: none; }
.ing-sep  { display: none; }
.ing-preset { display: none; }

/* ── Color input ── */
.color-input-wrap {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.color-input-wrap:focus-within { border-color: rgba(var(--rgb-primary),0.5); box-shadow: 0 0 0 3px rgba(var(--rgb-primary),0.1); }
input[type="color"] { width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--r-xs); background: none; cursor: pointer; }
.color-input-wrap span { font-size: var(--t-mono-sm-s); color: var(--muted); font-family: var(--font-mono); }

/* ── Style toggles ── */
.style-toggles { display: flex; flex-direction: column; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--t-body-sm-s); color: var(--muted); }
.toggle input { display: none; }
.toggle-track {
  width: 32px; height: 17px; border-radius: var(--r-xs);
  border: 1px solid var(--border); background: var(--color-surface-raised);
  position: relative; flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}
.toggle-track::after {
  content: ''; position: absolute;
  width: 11px; height: 11px; border-radius: var(--r-xs);
  background: var(--subtle); top: 2px; left: 2px;
  transition: transform var(--transition), background var(--transition);
}
.toggle input:checked + .toggle-track { background: var(--brand); border-color: var(--brand); }
.toggle input:checked + .toggle-track::after { transform: translateX(15px); background: white; }

/* ══════════════════════════════════════════════
   Panels (shared)
══════════════════════════════════════════════ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 24px; }
.title { margin-bottom: 16px; }
.title h3 { margin: 0; font-size: var(--t-title-md-s); font-weight: 700; letter-spacing: -0.03em; }
.title p  { margin: 4px 0 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }
.two-col  { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }

/* ══════════════════════════════════════════════
   Component workspace
══════════════════════════════════════════════ */

.catalog-controls  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.catalog-search {
  width: 200px; padding: 6px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--tint-2);
  color: var(--text); font-size: var(--t-body-sm-s);
}
.catalog-search:focus { border-color: var(--brand); }
.catalog-cats {
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; max-width: 460px;
}
.catalog-cats:-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0;
  padding: 4px 12px; border-radius: var(--r-md); font-size: var(--t-micro-s);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.cat-chip:hover  { color: var(--text); border-color: var(--border-strong); }
.cat-chip.active { background: rgba(var(--rgb-primary),0.12); border-color: rgba(var(--rgb-primary),0.35); color: var(--brand-text); font-weight: 600; }

/* Catalog grid: scannable, wraps instead of scrolling */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.catalog-card {
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--tint-1); padding: 12px 12px;
  transition: border-color var(--transition), background var(--transition);
  display: flex; flex-direction: column;
}
.catalog-card:hover { border-color: var(--border-strong); background: var(--tint-2); }
.catalog-card.catalog-added {
  border-color: rgba(var(--rgb-primary),0.28); background: rgba(var(--rgb-primary),0.05);
}
.catalog-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.catalog-cat-badge {
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.4px;
  color: var(--subtle); text-transform: uppercase;
}
.catalog-remove-btn {
  width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-body-sm-s); line-height: 1; cursor: pointer;
  background: transparent; transition: all var(--transition); flex-shrink: 0;
}

.catalog-remove-btn { color: var(--subtle); font-size: var(--t-caption-s); }
.catalog-remove-btn:hover { background: rgba(var(--rgb-primary),0.12); border-color: var(--brand); color: var(--brand-text); }
.catalog-card strong { display: block; font-size: var(--t-body-sm-s); font-weight: 600; margin-bottom: 4px; }
.catalog-card p { font-size: var(--t-caption-s); color: var(--muted); margin: 0; line-height: 1.5; flex: 1; }

/* Source badges: shadcn / custom */
.catalog-src-badge {
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 1px 4px; border-radius: var(--r-xs);
}
.catalog-src-badge.shadcn { background: rgba(var(--rgb-success),0.12); color: var(--green-text); border: 1px solid rgba(var(--rgb-success),0.25); }
.catalog-src-badge.custom { background: rgba(var(--rgb-cat-components), 0.14); color: var(--cat-components-text); border: 1px solid rgba(var(--rgb-cat-components), 0.3); }

/* Custom component modal extras */
.label-hint { font-size: var(--t-caption-s); color: var(--subtle); font-weight: 400; margin-left: 4px; }
#customCompModal textarea { resize: vertical; min-height: 52px; }
#customCompModal select { width: 100%; }
.form-row { display: flex; flex-direction: column; gap: 6px; }

/* ── Custom component modal: wider to fit image zone ── */
.cc-modal-box { max-width: 600px !important; max-height: 90vh; overflow-y: auto; }

/* ── Image drop zone ── */
.cc-image-zone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-2xl);
  overflow: hidden; transition: border-color var(--transition);
  background: var(--tint-1);
}
.cc-image-zone.cc-drag-over { border-color: var(--brand); background: rgba(var(--rgb-primary),0.05); }

.cc-image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px 20px; text-align: center; cursor: pointer;
}
.cc-image-icon { font-size: var(--t-display-md-s); color: var(--subtle); margin-bottom: 4px; }
.cc-image-placeholder p { margin: 0; font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.cc-image-hint { font-size: var(--t-caption-s); color: var(--subtle); }

.cc-image-preview {
  position: relative; display: flex; align-items: center; justify-content: center;
  max-height: 240px; overflow: hidden; background: var(--color-bg);
}
.cc-image-preview img {
  max-width: 100%; max-height: 240px; object-fit: contain;
  display: block;
}
.cc-image-overlay {
  position: absolute; inset: 0; background: rgba(var(--rgb-black), 0.55);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transition: opacity 0.2s;
}
.cc-image-preview:hover .cc-image-overlay { opacity: 1; }

.cc-analysing {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px 20px; background: var(--color-bg);
}
.cc-analysing p { margin: 0; font-size: var(--t-caption-s); color: var(--muted); }
.cc-analysing-spinner {
  width: 24px; height: 24px; border: 2px solid var(--border);
  border-top-color: var(--brand-text); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Divider between image zone and spec form */
.cc-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0; color: var(--subtle); font-size: var(--t-label-sm-s); font-weight: 600;
}
.cc-divider::before, .cc-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Field highlight after AI fill */
.cc-field-filled {
  animation: fieldPop 1.8s ease forwards;
}
@keyframes fieldPop {
  0%   { box-shadow: 0 0 0 2px rgba(var(--rgb-success),0.5); background: rgba(var(--rgb-success),0.08); }
  100% { box-shadow: none; background: transparent; }
}

.api-key-ok { font-size: var(--t-caption-s); color: var(--color-success); font-weight: 600; }

/* Settings modal */
.settings-modal-box { max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: 0; }
.settings-section { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 4px; }
.settings-section-label { font-size: var(--t-label-sm-s); font-weight: 600; color: var(--brand-text); }
.settings-desc { margin: 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.6; }
.settings-field-label { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); margin-top: 4px; }
.settings-input {
  width: 100%; padding: 8px 80px 8px 12px; box-sizing: border-box;
  background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: var(--r-lg); color: var(--text); font-size: var(--t-body-sm-s); font-family: inherit;
}
.settings-input:focus { border-color: var(--brand-text); }
.settings-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-caption-s); padding: 2px 8px;
}

.settings-footer { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; }

/* ── Workspace ──────────────────────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 12px; align-items: start; }
.sticky { position: sticky; top: 0; }
.component-list { display: grid; gap: 4px; margin-top: 12px; }

.component-card {
  width: 100%; text-align: left; color: var(--muted);
  border: 1px solid var(--border); background: var(--tint-1);
  border-radius: var(--r-2xl); padding: 8px 12px; transition: all var(--transition);
}
.component-card:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border-strong); }
.component-card.active { color: var(--text); background: rgba(var(--rgb-primary),0.07); border-color: rgba(var(--rgb-primary),0.22); }
.component-card.active::before { display: none; }
.component-card strong { display: block; font-size: var(--t-body-sm-s); font-weight: 600; }
.component-card span   { display: block; margin-top: 2px; font-size: var(--t-caption-s); color: var(--subtle); }

.builder { min-width: 0; }

.tabs { display: flex; gap: 2px; padding: 2px; background: var(--color-surface-raised); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 16px; flex-wrap: wrap; }
.output-tabs { margin-bottom: 12px; }
.tab, .output-tab { flex: 1; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: var(--r-md); border: none; background: transparent; color: var(--muted); font-size: var(--t-label-sm-s); font-weight: 600; transition: all var(--transition); white-space: nowrap; }
.tab:hover:not(.active), .output-tab:hover:not(.active) { color: var(--text); }
.tab.active, .output-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

.builder-section { display: none; }
.builder-section.active { display: block; }
.section-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-top h4 { margin: 0; font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); line-height: var(--t-label-md-lh); letter-spacing: -0.02em; }
.section-top p  { margin: 2px 0 0; font-size: var(--t-caption-s); color: var(--muted); }

.chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 12px; }
.chip { padding: 4px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--t-micro-s); font-weight: 600; transition: all var(--transition); }
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.active { background: var(--brand-dim); color: var(--text); border-color: var(--brand-border); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
label { display: grid; gap: 4px; font-size: var(--t-caption-s); font-weight: 400; color: var(--muted); }

/* Radio joins colour and checkbox on the exclusion list. It was never
   meant to be a full-width text field, and being one pushed every gate
   option's label into a narrow column on the far right. */
/* `.search-input` joins the exclusion list rather than being out-argued
   by it. The rule above the search bar carries a comment saying it beats
   this one because this one has "three :not() clauses"; it has four now,
   which makes it (0,4,1) and the winner, so every search field in the
   product lost its 34px of room and drew its own icon on top of the
   placeholder. Counting pseudo-classes is not a way to hold a layout. */
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not(.custom-val-input):not(.search-input), select {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  font-size: var(--t-body-sm-s); transition: border-color var(--transition), box-shadow var(--transition);
}
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not(.custom-val-input):focus, select:focus {
  border-color: rgba(var(--rgb-primary),0.5);
  box-shadow: 0 0 0 3px rgba(var(--rgb-primary),0.1);
}

.state-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.state-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--tint-1); color: var(--muted); font-size: var(--t-caption-s); transition: all var(--transition); }
.state-toggle span { font-weight: 400; }
.state-toggle strong { font-size: var(--t-caption-s); font-weight: 600; color: var(--subtle); }
.state-toggle.active { background: var(--green-dim); border-color: var(--green-border); color: var(--text); }
.state-toggle.active strong { color: var(--green); }

.preview-matrix { display: grid; gap: 12px; }
.preview-matrix-row { background: var(--tint-1); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 16px 16px; }
.preview-matrix-label {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle); margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 8px;
}
.preview-matrix-note {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.preview-matrix-items { display: flex; flex-wrap: wrap; gap: 16px 16px; align-items: flex-end; }

/* Each cell names what it demonstrates, so the art can carry realistic
   copy instead of repeating the variant token. */
.preview-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.preview-cell-art { display: flex; align-items: center; min-height: 24px; }
.preview-cell figcaption {
  font-size: var(--t-mono-sm-s); color: var(--subtle);
  font-family: var(--font-mono);
  letter-spacing: 0.01em; line-height: 1;
}
.cmp-stage.canvas-dark .preview-cell figcaption { color: var(--dark-text); }
/* A global `label` rule paints every label with the app's own muted grey
   and caption type. Inside the preview those belong to the design system,
   so a checkbox label came out in Wind Tunnel's colour, not the system's. */
.preview-matrix-items label {
  color: inherit; font-size: inherit; font-weight: inherit;
  display: revert; gap: revert;
}
/* Form controls default to the UA font, which would show the design
   system's fields in the browser's face rather than its own. */
/* The preview wears the system's typeface, controls included. The app's
   own rule for text inputs (its UI font, by attribute selector) used to
   outrank this "inherit", so an Input previewed in Wind Tunnel's face
   while the Card beside it wore the system's. Weighted to win. */
.preview-matrix-items input, .preview-matrix-items input[type],
.preview-matrix-items select,
.preview-matrix-items textarea,
.preview-matrix-items button,
.preview-matrix-items optgroup,
.preview-matrix-items option,
.fprev-art input, .fprev-art input[type], .fprev-art select, .fprev-art textarea, .fprev-art button,
/* And on a component's sheet, its preview and its matrix (batch 7: the old canvas was the only place it held). */
#dsStoryPreview input, #dsStoryPreview select, #dsStoryPreview textarea, #dsStoryPreview button,
.ds-ws-cellart input, .ds-ws-cellart input[type], .ds-ws-cellart select, .ds-ws-cellart textarea, .ds-ws-cellart button { font-family: inherit; }
.preview-matrix-items input:focus,
.preview-matrix-items select:focus,
.preview-matrix-items textarea:focus { }
/* The preview draws semantic markup, and every bare element selector in this
   file lands on it. Inline styles only win the properties they set, so an app
   rule the preview never restates still applies: that is how the sidebar's
   `nav` rule stacked a Breadcrumb into a column. Reverting the app's bare
   selectors here keeps the art answerable to the design system alone, so a
   new rule up there cannot quietly restyle a component. */
.preview-matrix-items nav {
  flex-direction: revert; flex: revert; gap: revert;
  padding-top: revert; width: revert; align-items: revert;
}
.preview-matrix-items code,
.preview-matrix-items kbd {
  font-family: inherit; font-size: inherit;
  background: revert; padding: revert; border-radius: revert;
}
.preview-matrix-items main { padding: revert; overflow: revert; }

.code { display: none; }
.code.active { display: block; }
pre.code { width: 100%; min-height: 240px; background: var(--color-bg); color: var(--muted); border: 1px solid var(--tint-4); border-radius: var(--r-xs); padding: 16px; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); line-height: 1.8; overflow: auto; margin: 0; }

.approved-list { display: grid; gap: 6px; margin-top: 12px; }
.approved-item { padding: 8px 12px; background: var(--green-dim); border: 1px solid var(--green-border); border-radius: var(--r-2xl); }
.approved-item strong { display: block; font-size: var(--t-body-sm-s); font-weight: 600; }
.approved-item span   { display: block; font-size: var(--t-caption-s); color: var(--muted); margin-top: 2px; }

.token-list { display: grid; gap: 4px; margin-top: 12px; }

/* Doc grid with download button */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.doc-card { padding: 12px; background: var(--tint-1); border: 1px solid var(--border); border-radius: var(--r-2xl); transition: all var(--transition); }
.doc-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.doc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.doc-card strong { display: block; font-size: var(--t-caption-s); font-weight: 600; }
.doc-card p { margin: 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }

/* Agent IDE modal */
.agent-ide-modal {
  position: fixed; inset: 0; background: var(--color-overlay); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(6px);
}
.agent-ide-panel {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl); width: 100%; max-width: 820px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.agent-ide-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.agent-ide-header strong { font-size: var(--t-body-sm-s); font-weight: 700; display: block; margin-bottom: 4px; }
.agent-ide-header p { margin: 0; font-size: var(--t-caption-s); color: var(--muted); }
.agent-ide-header code { font-family: var(--font-mono); background: var(--surface-hover); padding: 1px 4px; border-radius: var(--r-xs); }
.agent-ide-code {
  flex: 1; overflow-y: auto; margin: 0; padding: 16px 20px;
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s); line-height: 1.75;
  color: var(--muted); background: var(--color-bg); white-space: pre-wrap; word-break: break-word;
}

/* All components export */
.all-comp-export { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }

.comp-export-block { border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.comp-export-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--tint-2); border-bottom: 1px solid var(--border);
}
.comp-export-name { font-size: var(--t-mono-sm-s); font-weight: 600; font-family: var(--font-mono); color: var(--text); }
.comp-export-code {
  margin: 0; padding: 12px 16px; background: var(--color-surface-raised);
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s); line-height: 1.75;
  color: var(--text); max-height: 260px; overflow-y: auto; white-space: pre; overflow-x: auto;
}

/* ── Project Sync ── */
.sync-status-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-2xl);
  background: rgba(var(--rgb-success),0.07); border: 1px solid rgba(var(--rgb-success),0.2);
  margin-bottom: 12px;
}
.sync-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success); flex-shrink: 0;
  box-shadow: 0 0 6px var(--color-success);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }
.sync-folder-name { font-size: var(--t-caption-s); font-weight: 700; color: var(--text); }
.sync-file-count  { font-size: var(--t-caption-s); color: var(--muted); margin-left: auto; }
.sync-file-list   { display: flex; flex-direction: column; gap: 6px; }
.sync-file-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px;
  background: var(--tint-1); border: 1px solid var(--border);
  border-radius: var(--r-2xl); transition: border-color var(--transition);
}
.sync-file-row:hover { border-color: var(--border-strong); }
.sync-file-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sync-file-name   { font-size: var(--t-mono-sm-s); font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.sync-file-path   { font-size: var(--t-caption-s); color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-badges      { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sync-badge       { font-size: var(--t-micro-s); padding: 1px 6px; border-radius: var(--r-xs); background: var(--surface-hover); color: var(--muted); border: 1px solid var(--border); }
.sync-badge.muted { color: var(--subtle); }
.sync-file-actions { flex-shrink: 0; }
.sync-in-lib      { font-size: var(--t-caption-s); color: var(--color-success); font-weight: 600; }

.sync-unsupported { font-size: var(--t-caption-s); color: var(--subtle); padding: 12px; border-radius: var(--r-2xl); background: rgba(var(--rgb-warning), 0.05); border: 1px solid rgba(var(--rgb-warning), 0.15); }

.toast { position: fixed; right: 20px; bottom: calc(var(--sticky-h) + 12px); max-width: 300px; background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); color: var(--text); padding: 12px 16px; border-radius: var(--r-4xl); box-shadow: var(--shadow-lg); font-size: var(--t-body-sm-s); font-weight: 400; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; backdrop-filter: blur(20px); z-index: 400; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════
   Canvas section
══════════════════════════════════════════════ */
.canvas-layout {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 200px;
  gap: 12px;
  height: calc(100vh - var(--menubar-h) - var(--sticky-h) - 120px);
  align-items: start;
}

.canvas-panel {
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; overflow-y: auto;
}

.canvas-panel-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle);
}

.canvas-frame-btns { display: flex; flex-direction: column; gap: 4px; }
.canvas-frame-btn {
  padding: 6px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--t-caption-s); font-weight: 600;
  text-align: left; transition: all var(--transition);
}
.canvas-frame-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.canvas-frame-btn.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--text); }

.canvas-palette { display: flex; flex-direction: column; gap: 4px; }
.canvas-element-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--t-caption-s); font-weight: 600;
  text-align: left; transition: all var(--transition); cursor: grab;
}
.canvas-element-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

.canvas-element-icon { font-size: var(--t-body-sm-s); width: 20px; text-align: center; }

.canvas-stage {
  background: var(--color-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.canvas-viewport {
  position: relative;
  transform-origin: center center;
}

.canvas-frame {
  background: var(--color-primary-fg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.canvas-frame.web-frame { width: 1440px; height: 900px; }
.canvas-frame.mobile-frame { width: 390px; height: 844px; border-radius: var(--r-5xl); }

.canvas-el {
  position: absolute;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.canvas-el.selected {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.canvas-el-handle {
  position: absolute; right: -4px; bottom: -4px;
  width: 9px; height: 9px; border-radius: 0;
  background: var(--brand); border: 1px solid white;
  cursor: se-resize; display: none;
}
.canvas-el.selected .canvas-el-handle { display: block; }

.canvas-props-empty { font-size: var(--t-caption-s); color: var(--subtle); margin: 0; }

.canvas-prop-row { display: grid; gap: 4px; margin-bottom: 8px; }
.canvas-prop-row label { font-size: var(--t-label-sm-s); color: var(--subtle); font-weight: 600; }
.canvas-prop-row input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font-size: var(--t-caption-s); }
.canvas-prop-row input:focus { border-color: rgba(var(--rgb-primary),0.5); }
.canvas-prop-del { width: 100%; margin-top: 8px; padding: 6px; border-radius: var(--r-lg); border: 1px solid rgba(var(--rgb-primary),0.3); background: var(--brand-dim); color: var(--brand-text); font-size: var(--t-caption-s); font-weight: 600; transition: all var(--transition); }
.canvas-prop-del:hover { background: rgba(var(--rgb-primary),0.18); }

.prompt-badge {
  padding: 4px 12px; border-radius: var(--r-xs);
  background: var(--brand-dim); border: 1px solid var(--brand-border);
  color: var(--brand-text); font-size: var(--t-micro-s); font-weight: 700; white-space: nowrap;
}

.cat-badge {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--r-xs);
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
}
.cat-workflow    { background: rgba(var(--rgb-cat-workflow), 0.15); color: var(--cat-workflow-text); border: 1px solid rgba(var(--rgb-cat-workflow), 0.25); }
.cat-screens     { background: rgba(var(--rgb-cat-screens), 0.15); color: var(--cat-screens-text); border: 1px solid rgba(var(--rgb-cat-screens), 0.25); }
.cat-figma       { background: rgba(var(--rgb-cat-figma), 0.15); color: var(--cat-figma-text); border: 1px solid rgba(var(--rgb-cat-figma), 0.25); }
.cat-components  { background: rgba(var(--rgb-cat-components), 0.15); color: var(--cat-components-text); border: 1px solid rgba(var(--rgb-cat-components), 0.25); }
.cat-iteration   { background: rgba(var(--rgb-cat-iteration), 0.15);  color: var(--cat-iteration-text); border: 1px solid rgba(var(--rgb-cat-iteration), 0.25); }
.cat-qa          { background: rgba(var(--rgb-cat-qa), 0.15); color: var(--cat-qa-text); border: 1px solid rgba(var(--rgb-cat-qa), 0.25); }

/* ── Prompt edit modal ── */
.modal-overlay {
  display: none;
}
.modal-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 900;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4xl);
  padding: 24px;
  width: 560px; max-width: 90vw;
  box-shadow: var(--shadow-modal);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.modal-head strong { font-size: var(--t-body-sm-s); font-weight: 700; }
.modal-close {
  width: 28px; height: 28px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--t-body-sm-s);
  display: grid; place-items: center;
  transition: all var(--transition);
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.prompt-edit-textarea {
  width: 100%; resize: vertical;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  font-size: var(--t-body-sm-s); line-height: 1.7;
  transition: border-color var(--transition);
}
.prompt-edit-textarea:focus { border-color: rgba(var(--rgb-primary),0.5); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.review-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.review-step-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  transition: background var(--transition);
}
.review-step-head:hover { background: var(--surface-hover); }
.step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: var(--t-micro-s); font-weight: 700;
  background: var(--brand-dim); border: 1px solid var(--brand-border); color: var(--brand-text);
}
.step-num.complete { background: var(--green-dim); border-color: var(--green-border); color: var(--green-text); }
.step-title { flex: 1; font-size: var(--t-body-sm-s); font-weight: 700; }
.step-status { font-size: var(--t-caption-s); font-weight: 600; color: var(--subtle); }
.step-status.ok { color: var(--green-text); }
.step-edit { padding: 4px 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--t-caption-s); font-weight: 600; transition: all var(--transition); }
.step-edit:hover { color: var(--text); border-color: var(--border-strong); }
.review-step-body { padding: 0 16px 16px; display: none; border-top: 1px solid var(--border); }
.review-step-body.open { display: block; padding-top: 12px; }
.review-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.review-item { padding: 8px 12px; border-radius: var(--r-2xl); background: var(--tint-1); border: 1px solid var(--border); }
.review-item strong { display: block; font-size: var(--t-caption-s); color: var(--subtle); font-weight: 400; margin-bottom: 2px; }
.review-item span   { display: block; font-size: var(--t-body-sm-s); color: var(--text); font-weight: 600; }

/* ══════════════════════════════════════════════
   Token page
══════════════════════════════════════════════ */
.token-page { display: flex; flex-direction: column; gap: 0; }

.token-tabs {
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.token-tab-btn {
  padding: 6px 12px; border-radius: var(--r-md); font-size: var(--t-body-sm-s); font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.token-tab-btn:hover  { color: var(--text); border-color: var(--border-strong); }
.token-tab-btn.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--text); }
.token-mode-badge {
  margin-left: auto; font-size: var(--t-micro-s); font-weight: 600; padding: 4px 8px;
  border-radius: var(--r-xs); border: 1px solid var(--border); color: var(--muted);
}
.token-mode-badge.dark  { border-color: rgba(var(--rgb-cat-workflow), 0.3); color: var(--cat-workflow-text); background: rgba(var(--rgb-cat-workflow), 0.08); }
/* Says the library is real but not yet the designer's, without dressing it
   up as a warning: nothing is wrong, it is simply not set. */
.token-default-note {
  margin: 0 0 16px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--tint-1);
  font-size: var(--t-body-xs-s); line-height: 1.6; color: var(--muted);
}
.token-default-note .ghost-link { font-size: inherit; }
.token-mode-badge.light { border-color: rgba(var(--rgb-cat-figma), 0.3);  color: var(--warning-text); background: rgba(var(--rgb-cat-figma), 0.08);  }

/* Primitives */
.prim-grid  { display: flex; flex-direction: column; gap: 8px; }
.prim-row   { display: flex; align-items: center; gap: 12px; }
.prim-label { width: 68px; font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); flex-shrink: 0; }
.prim-swatches { display: flex; gap: 2px; flex: 1; }
.prim-swatch {
  flex: 1; height: 36px; border-radius: var(--r-xs); position: relative;
  cursor: default; transition: transform 0.15s;
}
.prim-swatch:hover { transform: scaleY(1.15); z-index: 1; }
.prim-step {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-caption-s); font-weight: 700; color: rgba(var(--rgb-white), 0.7);
  text-shadow: 0 1px 2px rgba(var(--rgb-black), 0.5); white-space: nowrap; pointer-events: none;
}

/* Semantic */
.sem-table  { display: flex; flex-direction: column; gap: 0; }
.sem-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle); padding: 8px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.sem-group-label {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
  padding: 12px 8px 4px; margin-top: 4px;
}
.sem-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; padding: 6px 8px; border-radius: var(--r-2xl);
  transition: background var(--transition);
}
.sem-row:hover { background: var(--tint-2); }
code.sem-name { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text); }
.sem-val  { display: flex; align-items: center; gap: 6px; font-size: var(--t-mono-sm-s); color: var(--muted); font-family: var(--font-mono); }
.sem-swatch { width: 14px; height: 14px; border-radius: var(--r-xs); border: 1px solid var(--tint-5); flex-shrink: 0; }

/* Component tokens */
.comp-token-list  { display: flex; flex-direction: column; gap: 16px; }
.comp-token-group { border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.comp-token-name  {
  padding: 8px 12px; font-size: var(--t-body-sm-s); font-weight: 600;
  background: var(--tint-2); border-bottom: 1px solid var(--border);
}
.comp-token-rows  { display: flex; flex-direction: column; }
.comp-token-row   {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 6px 12px; gap: 12px;
  border-bottom: 1px solid var(--tint-2);
  font-size: var(--t-caption-s);
}
.comp-token-row:last-child { border-bottom: none; }
.comp-token-row code { font-family: var(--font-mono); color: var(--text); }
.comp-token-ref { color: var(--subtle); font-style: italic; }
.comp-token-val { display: flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-mono); justify-content: flex-end; }

/* ══════════════════════════════════════════════
   Design Context
══════════════════════════════════════════════ */
.dc-layout { display: flex; flex-direction: column; gap: 16px; }
.dc-platform-tabs { display: flex; gap: 8px; }
.dc-tab {
  padding: 6px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--t-body-sm-s); font-weight: 600;
  transition: all var(--transition);
}
.dc-tab:hover  { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.dc-tab.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--text); font-weight: 600; }

.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--transition);
}
.dc-card:hover { border-color: var(--border-strong); }
.dc-card-title { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.dc-drop-zone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-2xl);
  min-height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
  background: var(--tint-1); position: relative; overflow: hidden;
}
.dc-drop-zone:hover { border-color: var(--brand); background: rgba(var(--rgb-primary),0.04); }
.dc-drop-zone.dc-has-thumb {
  border-style: solid; background-size: cover;
  background-position: center; background-repeat: no-repeat;
  cursor: default;
}
.dc-remove-btn {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(var(--rgb-white), 0.2); background: rgba(var(--rgb-black), 0.6);
  color: var(--text); font-size: var(--t-caption-s);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
  opacity: 0;
}
.dc-drop-zone.dc-has-thumb:hover .dc-remove-btn { opacity: 1; }

/* ══════════════════════════════════════════════
   Font select
══════════════════════════════════════════════ */
.font-select {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  font-size: var(--t-body-sm-s); transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.font-select:focus {
  border-color: rgba(var(--rgb-primary),0.5);
  box-shadow: 0 0 0 3px rgba(var(--rgb-primary),0.1);
}

/* === Responsive === */
@media (max-width: 1280px) {
  .overview-layout { grid-template-columns: 1fr; }
  .config-aside { position: static; }
  .style-layout { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 200px minmax(0, 1fr); }
  .workspace > aside:last-child { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .foundation-row { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .platform-grid, .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid.four, .state-grid { grid-template-columns: repeat(2, 1fr); }
  
  
  
  .all-comp-export { grid-template-columns: 1fr; }
  .canvas-layout { grid-template-columns: 160px minmax(0,1fr); }
  .canvas-layout > aside:last-child { display: none; }
}

/* ═══════════════════════════════════════════════
   Prompt Builder
═══════════════════════════════════════════════ */
.prompt-builder-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  margin-bottom: 24px;
  overflow: hidden;
}
.pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--rgb-warning),.07) 0%, transparent 60%);
}
.pb-head-left { display: flex; align-items: center; gap: 12px; }
.pb-icon { font-size: var(--t-title-lg-s); color: var(--brand-text); line-height: 1; }
.pb-title { font-size: var(--t-body-sm-s); font-weight: 700; color: var(--text); }
.pb-subtitle { font-size: var(--t-caption-s); color: var(--muted); margin-top: 2px; }
.pb-toggle {
  height: 28px; display: inline-flex; align-items: center;
  background: none; border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--muted); padding: 4px 8px; font-size: var(--t-caption-s); cursor: pointer;
  transition: all .15s;
}
.pb-toggle:hover { background: var(--surface-hover); color: var(--text); }

.pb-body { padding: 16px; }
.pb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pb-fields { display: flex; flex-direction: column; gap: 12px; }
.pb-field-group { display: flex; flex-direction: column; gap: 4px; }
.pb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-label { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.pb-required { color: var(--brand-text); }
.pb-muted { font-weight: 400; color: var(--muted); }
.pb-input, .pb-select, .pb-textarea {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: var(--t-body-sm-s);
  padding: 8px 8px;
  font-family: inherit;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.pb-input:focus, .pb-select:focus, .pb-textarea:focus {
  border-color: var(--brand-text);
}
.pb-textarea { resize: vertical; }
.pb-select { cursor: pointer; }
.pb-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pb-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-caption-s);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-hover);
  transition: all .12s;
}
.pb-check:hover { border-color: var(--brand-text); color: var(--text); }
.pb-check input[type="checkbox"] { accent-color: var(--brand-text); cursor: pointer; }

/* Output column */
.pb-output-col { display: flex; flex-direction: column; gap: 8px; }
.pb-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pb-output-label { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.pb-gen-btn {
  background: var(--brand);
  color: var(--color-primary-fg);
  border: none;
  border-radius: var(--r-lg);
  padding: 6px 12px;
  font-size: var(--t-body-sm-s);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.pb-gen-btn:hover { opacity: .85; }
.pb-copy-btn {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 12px;
  font-size: var(--t-caption-s);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.pb-copy-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }
.pb-output-box {
  flex: 1;
  min-height: 280px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow-y: auto;
  padding: 12px;
}
.pb-output-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
  font-size: var(--t-body-sm-s);
  color: var(--muted);
  text-align: center;
  padding: 16px;
  line-height: 1.6;
}
.pb-output-pre {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm-s);
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.pb-output-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pb-add-to-lib {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--muted);
  padding: 6px 12px;
  font-size: var(--t-caption-s);
  cursor: pointer;
  transition: all .15s;
}
.pb-add-to-lib:hover { border-color: var(--brand-text); color: var(--brand-text); }
.pb-char-count { font-size: var(--t-caption-s); color: var(--muted); }

/* ── Brand Extraction Card ── */
.brand-extract-card {
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(var(--rgb-primary),0.04) 0%, rgba(var(--rgb-warning),0.03) 100%);
  border-color: rgba(var(--rgb-primary),0.2);
}
.brand-extract-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.brand-extract-badge {
  font-size: var(--t-micro-s); font-weight: 700; letter-spacing: 0.08em;
  color: var(--brand-text); background: rgba(var(--rgb-primary),0.1);
  border: 1px solid rgba(var(--rgb-primary),0.22);
  padding: 2px 8px; border-radius: var(--r-xs); flex-shrink: 0; margin-top: 2px;
}
.brand-extract-desc { font-size: var(--t-caption-s); color: var(--muted); margin: 4px 0 0; line-height: 1.55; }
.brand-extract-body { margin-bottom: 12px; }
.brand-drop-zone {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-2xl);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.brand-drop-zone:hover, .brand-drop-zone.drag-over {
  border-color: var(--brand); background: rgba(var(--rgb-primary),0.03);
}
.brand-drop-icon { color: var(--subtle); }
.brand-drop-title { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.brand-drop-sub { font-size: var(--t-caption-s); color: var(--muted); }
.brand-extract-preview {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  border: 1px solid var(--border); max-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.brand-preview-img { max-width: 100%; max-height: 200px; object-fit: contain; display: block; }
.brand-remove-btn {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(var(--rgb-black), 0.6); color: var(--color-primary-fg); border: none;
  font-size: var(--t-caption-s); cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.brand-extract-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand-extract-status { font-size: var(--t-caption-s); color: var(--muted); flex: 1; }
/* One page of a website, read as a source (9 October 2026). */
.brand-site-row { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); }
.brand-site-field { display: flex; gap: var(--sp-2); align-items: center; }
.brand-site-field .settings-input { flex: 1; min-width: 0; }
.brand-extract-status.success { color: var(--green); }
.brand-extract-status.error { color: var(--brand-text); }

/* Applied tokens preview */
.brand-applied-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.brand-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro-s); font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 2px 8px 2px 6px;
}
.brand-chip-swatch {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--tint-6); flex-shrink: 0;
}

@media (max-width: 860px) {
  
  main { padding: 16px; padding-bottom: 20px; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid, .form-grid, .form-grid.four, .state-grid { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .hero-setup { padding-top: 0; }
  .setup-mini-track { width: 80px; }
  .canvas-layout { grid-template-columns: 1fr; }
}

.logo-meta-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: var(--t-caption-s);
  padding: 4px 8px;
  font-family: inherit;
}
.logo-meta-input:focus {
  border-color: var(--brand);
}

/* ════════════════════════════════════════
   Typography: Type Scale Table
════════════════════════════════════════ */
.type-fonts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.typescale-table-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.typescale-hint {
  font-size: var(--t-caption-s);
  color: var(--subtle);
  font-style: italic;
}
.typescale-table {
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.typescale-col-heads {
  display: grid;
  grid-template-columns: 90px 70px 80px 90px 110px;
  gap: 0;
  background: var(--tint-2);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
}
.typescale-col-heads span {
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--subtle);
}
.typescale-row {
  display: grid;
  grid-template-columns: 90px 70px 80px 90px 110px;
  gap: 0;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.typescale-row:last-child { border-bottom: none; }
.typescale-row:hover { background: var(--surface-hover); }
.typescale-role {
  font-size: var(--t-caption-s);
  font-weight: 600;
  color: var(--text);
}
.typescale-role .typescale-preview {
  font-size: var(--t-caption-s);
  color: var(--subtle);
  font-weight: 400;
  display: block;
}
.typescale-input {
  width: 60px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: var(--t-caption-s);
  padding: 2px 4px;
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.typescale-input:focus,
.typescale-input:hover {
  border-color: var(--border);
  background: var(--surface);
}
.typescale-input::placeholder { color: var(--subtle); font-size: var(--t-caption-s); }
.typescale-input.weight-select {
  width: 72px;
}

/* ════════════════════════════════════════
   Color System: extended
════════════════════════════════════════ */
.color-trio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.semantic-colors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* The references' roles, under the brand colours. */
.ds-roles { margin-top: 16px; }
.ds-roles-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-roles-clear { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: var(--t-caption-s); text-decoration: underline; cursor: pointer; }
.ds-roles-clear:hover { color: var(--text); }
.ds-roles-sub { margin-top: 12px; }
/* The system's parts, live, under every style step. */
.style-live { margin-top: 16px; }
.style-live-label { margin: 0; font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.style-live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.style-live-head .fs-note { margin: 0; }
.style-live-stage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 24px; border-radius: var(--r-md); border: 1px solid var(--border); }
.style-live-cell { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.style-live-cell figcaption { font-size: var(--t-caption-s); }
.style-live-art { display: flex; align-items: center; min-height: 24px; }
.ds-roles-drawn { display: block; margin-top: 4px; font-size: var(--t-caption-s); color: var(--muted); }
.ds-roles-sig { margin: 0; padding-left: 16px; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }
.chart-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chart-color-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 8px 4px 4px;
  position: relative;
}
.chart-color-chip input[type="color"] {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.chart-color-chip .chip-hex {
  font-size: var(--t-mono-sm-s);
  color: var(--muted);
  font-family: var(--font-mono);
  min-width: 56px;
}
.chart-color-remove {
  background: none;
  border: none;
  color: var(--subtle);
  cursor: pointer;
  font-size: var(--t-caption-s);
  width: 16px; height: 16px;
  display: inline-grid; place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: var(--r-md);
}
.chart-color-remove:hover { color: var(--brand-text); }

/* ════════════════════════════════════════
   Layout: gaps, grid, breakpoints
════════════════════════════════════════ */
.layout-gaps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.layout-gaps-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-caption-s);
  color: var(--muted);
  font-weight: 400;
}
.layout-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: var(--t-caption-s);
  padding: 4px 8px;
  font-family: inherit;
}
.layout-input:focus { border-color: var(--brand); }

.breakpoints-table {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.breakpoint-row {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.breakpoint-row:last-child { border-bottom: none; }
.breakpoint-header {
  background: var(--tint-2);
  padding: 6px 8px;
}
.breakpoint-header span {
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--subtle);
}
.bp-name {
  font-size: var(--t-caption-s);
  font-weight: 600;
  color: var(--text);
}

/* ════════════════════════════════════════
   AI Panel: unified collapsible AI card
   (brand extraction + prompt builder)
════════════════════════════════════════ */
.ai-panel {
  background: linear-gradient(135deg, rgba(var(--rgb-warning),.06) 0%, rgba(var(--rgb-primary),.04) 40%, transparent 80%),
              var(--tint-1);
  border: 1px solid rgba(var(--rgb-warning), .18);
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-bottom: 16px;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.ai-panel-head:hover {
  background: var(--tint-2);
}
.ai-panel-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-panel-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-panel-icon {
  font-size: var(--t-title-md-s);
  color: var(--brand-text);
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rgb-warning),.12);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.ai-panel-title {
  font-size: var(--t-body-sm-s);
  font-weight: 700;
  color: var(--text);
}
.ai-panel-subtitle {
  font-size: var(--t-caption-s);
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
}

.ai-panel-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--tint-4);
}

/* Override prompt builder to use ai-panel head styling */
.prompt-builder-panel.ai-panel .pb-head {
  border-bottom: 1px solid var(--tint-4);
  background: transparent;
}

/* ════════════════════════════════════════
   Review Page: Export hero + Git strip + Verify
════════════════════════════════════════ */
.section.review-section { display: none; }
.section.review-section.active {
  display: flex;
  flex-direction: column;
}

.review-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ──────────── Export hero (two equal destinations) ──────────── */
.export-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.export-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.export-hero-zip {
  /* subtle warm accent line at top */
  background: linear-gradient(180deg, rgba(var(--rgb-warning),0.04) 0%, var(--surface) 80%);
  border-color: rgba(var(--rgb-warning),0.18);
}
.export-hero-figma {
  background: linear-gradient(180deg, rgba(var(--rgb-figma), 0.04) 0%, var(--surface) 80%);
  border-color: rgba(var(--rgb-figma), 0.18);
}

/* Top: icon + titles */
.export-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.export-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-hero-icon-zip {
  background: rgba(var(--rgb-warning),0.12);
  color: var(--brand, var(--color-warning));
}
.export-hero-icon-figma {
  background: rgba(var(--rgb-figma), 0.10);
}
.export-hero-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.export-hero-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.export-hero-title {
  font-size: var(--t-title-md-s);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.export-hero-sub {
  font-size: var(--t-body-sm-s);
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
  min-height: 36px; /* reserves 2 lines so both cards align top→bottom */
}
.export-hero-sub a {
  /* Was `var(--brand-text)`. `--accent` is defined nowhere,
     so this silently resolved to warning amber: 2.23:1 for a 13px link. It is
     an inline "→" link, which the reference styles as brand red. */
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.export-hero-sub a:hover { text-decoration: underline; }

/* Body content list: identical in both cards for visual harmony */
.export-hero-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-hero-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body-sm-s);
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}
.export-hero-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--rgb-success),0.14);
  color: var(--green-text);
  font-size: var(--t-micro-s);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-hero-cross {
  background: rgba(var(--rgb-error), 0.14);
  color: var(--color-error);
}

/* Dynamic Figma checklist rows */
.export-hero-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-hero-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.export-hero-check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.export-hero-check-label {
  font-size: var(--t-body-sm-s);
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}
.export-hero-check-fix {
  font-size: var(--t-caption-s);
  color: var(--color-error);
  line-height: 1.4;
}

/* CTAs */
.export-hero-cta {
  width: 100%;
  margin-top: auto;
}

/* ──────────── Verify section ──────────── */
.review-verify {
  background: var(--tint-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 24px 24px 16px;
}
.review-verify-head {
  margin-bottom: 12px;
}
.review-verify-eyebrow {
  display: block;
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--subtle);
  margin-bottom: 4px;
}
.review-verify-title {
  font-size: var(--t-title-md-s);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.review-verify-desc {
  font-size: var(--t-body-sm-s);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.review-verify-list {
  display: flex;
  flex-direction: column;
}

/* Push hero CTA to the bottom of the card so buttons align across both cards */
.export-hero-cta {
  margin-top: auto;
}

/* Responsive media query handled below */

/* ──────────── Responsive ──────────── */
@media (max-width: 920px) {
  .export-hero {
    grid-template-columns: 1fr;
  }
  
  
}

/* Status tags */
.review-status-tag {
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  padding: 2px 8px;
  white-space: nowrap;
}
.review-status-tag.wip {
  background: rgba(var(--rgb-cat-figma), .12);
  color: var(--warning-text);
  border: 1px solid rgba(var(--rgb-cat-figma), .25);
}
.review-status-tag.figma-refine {
  background: rgba(var(--rgb-figma), .1);
  color: var(--figma-text);
  border: 1px solid rgba(var(--rgb-figma), .2);
}

/* ════════════════════════════════════════
   Figma Companion: How it works modal
════════════════════════════════════════ */
.figma-companion-body {
  padding: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.figma-companion-lead {
  font-size: var(--t-body-sm-s);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.figma-companion-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.figma-companion-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fcs-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--rgb-figma), .15);
  color: var(--figma-text);   /* Figma blue is 2.23:1 as text; the mark keeps var(--figma) */
  font-size: var(--t-caption-s);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.figma-companion-step strong {
  font-size: var(--t-body-sm-s);
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.figma-companion-step p {
  font-size: var(--t-caption-s);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.figma-companion-capabilities {
  background: rgba(var(--rgb-figma), .06);
  border: 1px solid rgba(var(--rgb-figma), .15);
  border-radius: var(--r-2xl);
  padding: 12px 16px;
}
.fcc-title {
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--figma-text);   /* Figma blue is 2.23:1 as text; the mark keeps var(--figma) */
  margin-bottom: 8px;
}
.fcc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.fcc-item {
  font-size: var(--t-caption-s);
  color: var(--muted);
}

/* ════════════════════════════════════════
   Logo v3: clean redesign
════════════════════════════════════════ */
.logo-v3-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 16px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.logo-v3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-v3-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.logo-v3-hint {
  font-size: var(--t-caption-s);
  color: var(--subtle);
}

/* Upload slots row */
.logo-v3-uploads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Each slot is the interactive zone container */
.logo-v3-slot {
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-2xl);
  background: var(--tint-1);
  min-height: 96px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.logo-v3-slot:hover {
  border-color: var(--brand);
  background: rgba(var(--rgb-warning),0.04);
}
.logo-v3-slot.logo-v3-dragging {
  border-color: var(--brand);
  background: rgba(var(--rgb-warning),0.07);
}

/* Dark mode slot */
.logo-v3-slot-dark {
  background: var(--dark-bg);
  border-color: rgba(var(--rgb-white), 0.1);
}
.logo-v3-slot-dark:hover {
  border-color: rgba(var(--rgb-white), 0.3);
  background: var(--dark-bg);
}

/* Mode label badge: top-left inside slot */
.logo-v3-mode-badge {
  position: absolute;
  top: 9px;
  left: 11px;
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtle);
  pointer-events: none;
  user-select: none;
}

/* Drop area content */
.logo-v3-drop-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 16px 12px; /* top padding clears the badge */
}
.logo-v3-icon {
  color: var(--subtle);
  flex-shrink: 0;
  opacity: 0.6;
}
.logo-v3-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-v3-drop-cta {
  font-size: var(--t-caption-s);
  font-weight: 400;
  color: var(--muted);
}
.logo-v3-drop-sub {
  font-size: var(--t-caption-s);
  color: var(--subtle);
}

/* The two logo slots preview a light and a dark lockup, so the dark one keeps
   its dark background by design: which means the labels inside it cannot use
   the light theme's text tokens. `--muted` on var(--dark-bg) is 3.61:1. Scope the
   text instead of lightening the slot. */
.logo-v3-slot-dark .logo-v3-mode-badge,
.logo-v3-slot-dark .logo-v3-drop-sub,
.logo-v3-slot-dark .logo-v3-icon   { color: rgba(var(--rgb-white), 0.72); }
.logo-v3-slot-dark .logo-v3-drop-cta { color: rgba(var(--rgb-white), 0.92); }

/* Preview state */
.logo-v3-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: inherit;
}
.logo-v3-preview img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}
.logo-v3-remove {
  position: absolute;
  top: 7px;
  right: 8px;
  background: rgba(var(--rgb-black), 0.5);
  color: var(--color-primary-fg);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: var(--t-caption-s);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.logo-v3-preview:hover .logo-v3-remove {
  opacity: 1;
}

/* Token inputs row */
.logo-v3-tokens {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.logo-v3-token-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
}
.logo-v3-token-label {
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   The start dialogs (a new page or a new project)
══════════════════════════════════════════════ */
.start-modal-box { width: 620px; }
.start-head { text-align: center; margin-bottom: 20px; }
.start-head h2 {
  margin: 0 0 6px; font-size: var(--t-display-md-s); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.2;
}
.start-head p { margin: 0; font-size: var(--t-body-sm-s); color: var(--muted); line-height: 1.55; }

.start-options { display: flex; flex-direction: column; gap: 8px; }
.start-option {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 34px 1fr; row-gap: 2px; column-gap: 12px;
  padding: 12px 16px; border-radius: var(--r-2xl);
  border: 1px solid var(--border); background: var(--tint-1);
  transition: border-color var(--transition), background var(--transition);
}
.start-option:hover { border-color: var(--brand); background: var(--brand-dim); }
.start-option-icon {
  grid-row: 1 / span 2; align-self: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--brand-text); font-size: var(--t-title-md-s);
}
.start-option strong { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.start-option > span:last-child {
  font-size: var(--t-body-xs-s); color: var(--muted); line-height: 1.5;
}
.start-foot { margin-top: 16px; text-align: center; }
.ghost-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: var(--t-body-xs-s); color: var(--muted); text-decoration: underline;
  text-underline-offset: 2px; transition: color var(--transition);
}
.ghost-link:hover { color: var(--brand-text); }

/* ══════════════════════════════════════════════
   Figma import
══════════════════════════════════════════════ */
.modal-head h3 { margin: 0 0 2px; font-size: var(--t-title-md-s); font-weight: 700; }
.modal-sub { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); }

/* ── Three-band dialog: head and foot are pinned, only the report scrolls.
   Scoped to .modal-overlay so these beat the DS component layer's own
   .modal-box rules (which sit later in the file) regardless of order. ── */
.modal-overlay .figma-import-box {
  width: 660px;
  max-height: min(760px, calc(100vh - 80px));
  padding: 0; gap: 0;
  display: flex; flex-direction: column;
}
.modal-overlay .figma-import-box .modal-head {
  flex: none; margin: 0;
  padding: 16px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-overlay .figma-import-box .modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 20px 20px;
}
.modal-overlay .figma-import-box .modal-foot {
  flex: none; margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: var(--surface);
  border-radius: 0 0 var(--r-4xl) var(--r-4xl);
}
.fi-foot-note {
  margin: 0 auto 0 0; max-width: 340px;
  font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.5;
}

.figma-import-warn {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--r-2xl);
  background: var(--color-warning-subtle); border: 1px solid rgba(var(--rgb-warning), 0.3);
  font-size: var(--t-body-xs-s); color: var(--text);
}
.figma-import-status {
  margin-top: 8px; font-size: var(--t-body-xs-s); color: var(--muted);
  min-height: 18px; display: flex; align-items: center; gap: 6px;
}
.figma-import-status.error { color: var(--brand-text); }
.figma-import-status .spinner {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--brand);
  animation: fi-spin 0.7s linear infinite;
}
@keyframes fi-spin { to { transform: rotate(360deg); } }

/* ── Report ── */
.figma-import-result:not(:empty) {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.fi-file {
  font-size: var(--t-body-sm-s); font-weight: 600; margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fi-src-badge {
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--green-dim); border: 1px solid var(--green-border); color: var(--green-text);
}
.fi-src-badge.styles {
  background: var(--tint-2); border-color: var(--border-strong); color: var(--muted);
}
.fi-meta { font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.55; }

.fi-section { margin-top: 20px; }
.fi-section-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.fi-section-label em {
  margin-left: auto; font-style: normal;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ── Figure strip: numbers carry it, no card chrome ── */
.fi-figures {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.fi-fig { padding: 12px 0 12px; }
.fi-fig + .fi-fig { border-left: 1px solid var(--border); padding-left: 12px; }
.fi-fig b {
  display: block; font-size: var(--t-title-lg-s); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.fi-fig span { font-size: var(--t-caption-s); color: var(--muted); }
.fi-fig.empty b { color: var(--subtle); opacity: 0.55; }

/* ── Coverage bar: how much of the file Wind Tunnel understood ── */
.fi-coverage {
  display: flex; height: 8px; border-radius: var(--r-2xl); overflow: hidden;
  background: var(--tint-2);
}
.fi-coverage i { display: block; height: 100%; min-width: 2px; }
.fi-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: var(--t-caption-s); color: var(--muted);
}
.fi-legend span { display: flex; align-items: center; gap: 6px; }
.fi-legend i { width: 8px; height: 8px; border-radius: var(--r-xs); flex: none; }
.fi-legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Disclosure groups replace the chip wall ── */
.fi-group {
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  overflow: hidden; background: var(--surface);
}
.fi-group + .fi-group { margin-top: 6px; }
.fi-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px; font-size: var(--t-label-sm-s); font-weight: 600;
  transition: background var(--transition);
}
.fi-group > summary:-webkit-details-marker { display: none; }
.fi-group > summary:hover { background: var(--surface-hover); }
.fi-group > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 6px; height: 6px; margin-right: 2px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.fi-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fi-group-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; }
.fi-group-count { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.fi-group-body { border-top: 1px solid var(--border); }
.fi-group-why {
  margin: 0; padding: 12px 12px; font-size: var(--t-caption-s);
  color: var(--subtle); line-height: 1.6; background: var(--tint-1);
}
.fi-names {
  list-style: none; margin: 0;
  padding: 8px 12px 12px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px;
  max-height: 184px; overflow-y: auto; overscroll-behavior: contain;
}
.fi-names li {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm-s); line-height: 1.85; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fi-names li.more { color: var(--subtle); font-style: italic; }

/* ── Style pairs read as a spec sheet, not a chip pile ── */
.fi-pairs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; margin: 0; }
.fi-pairs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: var(--t-body-xs-s);
}
.fi-pairs dt { color: var(--muted); }
.fi-pairs dd { margin: 0; font-weight: 600; text-align: right; }

.fi-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.fi-swatch {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 4px 8px 4px 6px; font-size: var(--t-caption-s); background: var(--surface);
}
.fi-swatch i {
  width: 14px; height: 14px; border-radius: var(--r-xs); flex: none;
  border: 1px solid rgba(var(--rgb-black), 0.12);
}
.fi-swatch code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }

/* ── The one action inside the report gets card treatment ── */
.fi-optin {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 12px 0; padding: 12px 12px;
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--tint-1);
  font-size: var(--t-body-xs-s); line-height: 1.55; color: var(--text); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.fi-optin:has(input:checked) { border-color: var(--color-warning); background: var(--color-warning-subtle); }
.fi-optin:hover { background: var(--surface-hover); }
.fi-optin input { margin-top: 2px; flex: none; accent-color: var(--brand); }
.fi-optin b { font-weight: 600; display: block; }
.fi-optin small { color: var(--subtle); font-size: var(--t-caption-s); line-height: 1.5; display: block; margin-top: 2px; }

/* ══════════════════════════════════════════════
   Components page: library / canvas / inspector
══════════════════════════════════════════════ */
.cmp-shell {
  display: grid;
  grid-template-columns: 176px minmax(0,1fr) 248px;
  gap: 12px;
  align-items: start;
}

/* ── Library rail ── */
.cmp-library, .cmp-inspector {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: 12px;
  position: sticky; top: 12px;
  max-height: calc(100vh - 190px); overflow-y: auto;
}
.cmp-rail-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.cmp-add-btn {
  width: 100%; margin-top: 8px; padding: 6px;
  border-radius: var(--r-lg); font-size: var(--t-caption-s); font-weight: 600;
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--muted); cursor: pointer; transition: all var(--transition);
}
.cmp-add-btn:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-dim); }

/* ── Canvas ── */
.cmp-canvas {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden; min-height: 460px;
  display: flex; flex-direction: column;
}
.cmp-canvas-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 12px; border-bottom: 1px solid var(--border);
}
.cmp-canvas-title small {
  display: block; font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
.cmp-canvas-title strong { font-size: var(--t-title-lg-s); font-weight: var(--t-title-lg-w); line-height: var(--t-title-lg-lh); letter-spacing: -0.015em; }
.cmp-canvas-modes { display: flex; gap: 4px; flex-shrink: 0; }
.cmp-mode {
  font-size: var(--t-caption-s); font-weight: 600; padding: 4px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.cmp-mode:hover { color: var(--text); border-color: var(--border-strong); }
.cmp-mode.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }

.cmp-stage {
  flex: 1; padding: 20px; overflow: auto;
  /* The system's light mode on a light ground, whatever the app's theme:
     the stage is the system's page, not Wind Tunnel's. */
  background:
    linear-gradient(90deg, rgba(var(--rgb-black), 0.022) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgba(var(--rgb-black), 0.022) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--light-bg);
}
.cmp-stage:not(.canvas-dark) .preview-matrix-row { background: rgba(var(--rgb-black), 0.02); border-color: var(--light-border); }
.cmp-stage:not(.canvas-dark) .preview-matrix-label, .cmp-stage:not(.canvas-dark) .preview-cell figcaption { color: var(--light-text); }
.cmp-stage:not(.canvas-dark) .cmp-stage-note { color: var(--light-text); border-top-color: var(--light-border); }
/* Dark canvas mode previews tokens against a dark surface */
.cmp-stage.canvas-dark {
  background:
    linear-gradient(90deg, rgba(var(--rgb-white), 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgba(var(--rgb-white), 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--dark-surface);
}
.cmp-stage.canvas-dark .preview-matrix-label { color: var(--dark-text); }
.cmp-stage.canvas-dark .cmp-stage-note { color: var(--dark-text); border-top-color: var(--dark-border); }
.cmp-stage-note {
  font-size: var(--t-caption-s); color: var(--subtle); margin: 16px 0 0;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.cmp-code-pane { display: none; flex: 1; padding: 12px 12px; overflow: auto; }
.cmp-code-pane.active { display: block; }

/* ── Inspector ── */
.cmp-approve-row { margin-bottom: 8px; }
.cmp-approve-chip {
  width: 100%; padding: 8px; border-radius: var(--r-md);
  font-size: var(--t-micro-s); font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: all var(--transition);
}
.cmp-approve-chip:hover { border-color: var(--brand); color: var(--brand-text); }
.cmp-approve-chip.is-approved {
  background: var(--green-dim); border-color: var(--green-border); color: var(--green-text);
}
.cmp-insp-desc {
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.cmp-group-head {
  min-height: 44px;
  width: 100%; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px; font-size: var(--t-title-md-s); font-weight: 700; color: var(--muted);
  background: transparent; border: none; border-top: 1px solid var(--border);
  transition: color var(--transition);
}
.cmp-group-head:first-of-type { border-top: none; }
.cmp-group-head::after { content: '›'; font-size: var(--t-title-md-s); color: var(--subtle); }
.cmp-group-head:hover { color: var(--text); }
.cmp-group-head.active { color: var(--text); }
.cmp-group-head.active::after { content: '⌄'; }
.cmp-group-head span { font-size: var(--t-caption-s); color: var(--subtle); font-weight: 400; margin-left: auto; margin-right: 8px; }

/* Inspector controls sit in a narrow column: stack the form grids */
.cmp-inspector .builder-section { display: none; padding: 2px 0 8px; }
.cmp-inspector .builder-section.active { display: block; }
.cmp-inspector .form-grid, .cmp-inspector .form-grid.four { grid-template-columns: 1fr; gap: 8px; }
.cmp-inspector .section-top { margin-bottom: 8px; }
.cmp-inspector .section-top p  { font-size: var(--t-caption-s); line-height: 1.45; }
.cmp-inspector .state-grid { grid-template-columns: 1fr; }

/* ── Catalog picker modal ── */
.catalog-modal-box { width: 720px; max-width: 92vw; }
.catalog-modal-box .catalog-controls { margin-bottom: 12px; flex-wrap: wrap; }
.catalog-modal-box .catalog-grid {
  max-height: 46vh; overflow-y: auto; margin-bottom: 0;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.catalog-selcount { font-size: var(--t-body-xs-s); color: var(--muted); }
.catalog-card.catalog-picked {
  border-color: var(--brand); background: var(--brand-dim);
}
.catalog-card.catalog-inlib { opacity: 0.5; }

/* ── Empty state ── */
.cmp-empty {
  text-align: center; padding: 52px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.cmp-empty-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--brand-dim); border: 1px solid var(--brand-border);
  color: var(--brand-text); font-size: var(--t-title-lg-s); margin-bottom: 12px;
}
.cmp-empty h4 { font-size: var(--t-title-md-s); font-weight: 700; margin: 0 0 4px; }
.cmp-empty p  { font-size: var(--t-body-xs-s); color: var(--muted); max-width: 42ch; margin: 0 0 16px; line-height: 1.55; }
.cmp-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Responsive: canvas never starves ── */
@media (max-width: 1180px) {
  .cmp-shell { grid-template-columns: 160px minmax(0,1fr) 232px; }
}
@media (max-width: 1040px) {
  .cmp-shell { grid-template-columns: minmax(0,1fr) 232px; }
  .cmp-library { display: none; }
  .cmp-rail-expand { display: none !important; }
}
.catalog-pick-tick {
  width: 18px; height: 18px; border-radius: var(--r-xs); flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--t-micro-s); font-weight: 700;
  border: 1px solid var(--border); color: var(--brand-text); background: transparent;
}
.catalog-card.catalog-picked .catalog-pick-tick {
  background: var(--brand); border-color: var(--brand); color: var(--color-primary-fg);
}
.catalog-card:not(.catalog-inlib) { cursor: pointer; }

/* Collapsible library: buys the canvas back ~180px on demand */
.cmp-rail-collapse, .cmp-rail-expand {
  border: 1px solid var(--border); background: transparent; color: var(--subtle);
  border-radius: var(--r-md); width: 18px; height: 18px; font-size: var(--t-caption-s); line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: all var(--transition);
}
.cmp-rail-collapse:hover, .cmp-rail-expand:hover { color: var(--text); border-color: var(--border-strong); }
.cmp-rail-expand { display: none; margin-right: 8px; flex-shrink: 0; }
.cmp-shell.lib-collapsed { grid-template-columns: minmax(0,1fr) 248px; }
.cmp-shell.lib-collapsed .cmp-library { display: none; }
.cmp-shell.lib-collapsed .cmp-rail-expand { display: grid; }

/* Catalog modal controls: chips on one row, search + custom on the next */
.catalog-modal-box .catalog-controls {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
}
.catalog-modal-box .catalog-cats {
  grid-column: 1 / -1; max-width: none; padding-bottom: 2px;
}
.catalog-modal-box .catalog-search { width: 100%; }

/* A select holding a token that does not exist in the current vocabulary */
select.select-unresolved {
  border-color: var(--brand-border);
  background: var(--brand-dim);
  color: var(--brand-text);
}

.prov-mode {
  flex: 1; padding: 6px 8px; border-radius: var(--r-md); font-size: var(--t-label-sm-s); font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.prov-mode:hover  { color: var(--text); border-color: var(--border-strong); }
.prov-mode.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }

.settings-notice {
  padding: 8px 12px; border-radius: var(--r-2xl); font-size: var(--t-body-xs-s); line-height: 1.55;
  background: var(--color-warning-subtle); border: 1px solid rgba(var(--rgb-warning), 0.3);
  color: var(--text);
}

.prov-models:not(:empty) {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.prov-models-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 6px;
}

/* A model ref is one word: inline spans let it break across two lines in
   the middle of the name. */
.prov-model {
  display: inline-block; white-space: nowrap; margin: 0 4px 4px 0;
  font-size: var(--t-mono-sm-s); padding: 2px 8px; border-radius: var(--r-md);
  background: var(--green-dim); border: 1px solid var(--green-border); color: var(--green-text);
  font-family: var(--font-mono);
}

/* ── Slingshot SSO state ── */
.sso-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-2xl); margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--tint-1); font-size: var(--t-body-xs-s); line-height: 1.5;
}
.sso-row.ok   { background: var(--green-dim); border-color: var(--green-border); }
.sso-row.todo { background: var(--color-warning-subtle); border-color: rgba(var(--rgb-warning), 0.3); }
.sso-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 4px;
  background: var(--subtle);
}
.sso-row.ok   .sso-dot { background: var(--green); }
.sso-row.todo .sso-dot { background: var(--color-warning); }
.sso-row b { display: block; font-weight: 600; margin-bottom: 1px; }
.sso-row span { color: var(--muted); }
.sso-row code {
  display: inline-block; margin-top: 4px; font-family: var(--font-mono);
  font-size: var(--t-mono-sm-s); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 2px 6px; user-select: text;
}
.sso-waiting { font-size: var(--t-body-xs-s); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sso-waiting i {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--brand);
  animation: fi-spin 0.7s linear infinite;
}

/* ══════════════════════════════════════════════
   V2 Dashboard: the entry point
══════════════════════════════════════════════ */
.dashboard {
  display: none;
  position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w);
  background: var(--bg); z-index: 700; overflow-y: auto;
}
.dashboard.open { display: block; }

.ide-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 12px;
  height: calc(100vh - var(--menubar-h) - 150px);
  min-height: 460px;
}
@media (max-width: 1060px) { .ide-shell { grid-template-columns: 250px minmax(0,1fr); } }

/* ── Left panel ── */
.ide-left {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  display: flex; flex-direction: column; overflow: hidden;
}
.ide-brief { padding: 12px 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ide-brief-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ide-brief-label {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
.ide-brief-toggle {
  background: none; border: none; color: var(--subtle); cursor: pointer;
  font-size: var(--t-caption-s); padding: 0 2px; transition: color var(--transition);
}
.ide-brief-toggle:hover { color: var(--text); }
.ide-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ide-chip {
  font-size: var(--t-micro-s); font-weight: 600; padding: 4px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.ide-chip:hover { border-color: var(--border-strong); color: var(--text); }
.ide-chip.on { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }
.ide-chip.ds {
  background: rgba(var(--rgb-ds-purple), 0.10); border-color: rgba(var(--rgb-ds-purple), 0.32); color: var(--ds-purple-text);
}
.ide-chip.ds.none { background: var(--tint-2); border-color: var(--border); color: var(--muted); }
/* A's sentence, on demand: readability without a second screen */
.ide-sentence {
  display: none; margin: 8px 0 0; font-size: var(--t-body-xs-s); line-height: 1.6; color: var(--muted);
}
.ide-sentence.show { display: block; }
.ide-sentence b { color: var(--text); font-weight: 600; }

/* ── Thread ── */
.ide-thread {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.ide-msg { max-width: 100%; }
.ide-who {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle); margin-bottom: 4px;
}
.ide-bub {
  border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 8px 12px;
  font-size: var(--t-body-xs-s); line-height: 1.55; background: var(--surface); white-space: pre-wrap;
}
.ide-msg.you .ide-bub { background: var(--tint-2); }
.ide-msg.err .ide-bub { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }
.ide-mention {
  background: rgba(var(--rgb-ds-purple), 0.14); color: var(--ds-purple-text);
  border-radius: var(--r-lg); padding: 0 4px; font-weight: 600;
}
.ide-thinking { display: flex; align-items: center; gap: 8px; font-size: var(--t-body-xs-s); color: var(--muted); }
.ide-thinking i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); border-top-color: var(--brand);
  animation: fi-spin 0.7s linear infinite;
}

/* ── Composer: fixed at the bottom, never moves ── */
.ide-composer { border-top: 1px solid var(--border); padding: 8px; background: var(--surface); position: relative; }
.ide-input {
  width: 100%; resize: none; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 8px 12px; font-size: var(--t-body-xs-s); font-family: inherit; line-height: 1.5;
  background: var(--surface); color: var(--text); transition: border-color var(--transition);
}
.ide-input:focus { border-color: var(--brand); }

/* One bar: add, say, send. */
.ide-askbar {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); padding: 6px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ide-askbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.ide-askbar .ide-input {
  flex: 1; min-width: 0; border: 0; background: none; resize: none;
  padding: 6px; height: 34px; max-height: 120px; border-radius: 0;
}
.ide-askbar .ide-input:focus { border-color: transparent; box-shadow: none; }
.ide-attach, .ide-send {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-lg); cursor: pointer; padding: 0;
}
.ide-attach { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.ide-attach:hover { border-color: var(--border-strong); color: var(--text); }
.ide-send { border: none; background: var(--brand); color: var(--color-primary-fg); }
.ide-send:disabled { opacity: .45; cursor: default; }
.ide-attach svg, .ide-send svg {
  width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The running total, under the bar that spends it. */
.ide-spend { margin: 8px 2px 0; font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.5; }
.ide-spend:empty { display: none; }

/* A craft run is a message, so it gets the message's rhythm rather than
   a card's padding. */
.ide-msg.craft-run { display: flex; flex-direction: column; gap: 6px; }
.ide-msg.craft-run .run-steps { margin-bottom: 0; }
.ide-msg.craft-run .run-summary { margin: 6px 0 0; }
.ide-msg.craft-run .run-error { margin: 4px 0 0; }
.ide-chips:empty { display: none; }

/* @mention autocomplete */
.ide-mentions {
  display: none; position: absolute; bottom: 100%; left: 10px; right: 10px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-4xl);
  box-shadow: 0 -4px 18px rgba(var(--rgb-black), 0.09); padding: 4px; margin-bottom: 6px; z-index: 20;
}
.ide-mentions.open { display: block; }
.ide-mention-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: var(--r-lg); font-size: var(--t-body-xs-s); cursor: pointer;
}
.ide-mention-item:hover, .ide-mention-item.sel { background: var(--tint-2); }
.ide-mention-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-purple); flex: none; }

/* ── The width control: Fit · 1440 · 1024 · 390, on every canvas bar ── */
.wt-widths { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.wt-widths button {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-caption-s); font-weight: 600;
  font-variant-numeric: tabular-nums; padding: 4px 8px; cursor: pointer;
}
.wt-widths button + button { border-left: 1px solid var(--border); }
.wt-widths button:hover { color: var(--text); background: var(--tint-2); }
.wt-widths button[aria-pressed="true"] { color: var(--brand-text); background: var(--brand-dim); }

/* ── Canvas ── */
.ide-canvas {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.ide-canvas-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; min-height: 44px;
}
.ide-vtab {
  display: flex; align-items: center; gap: 6px; font-size: var(--t-caption-s); font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: all var(--transition);
}
.ide-vtab:hover { border-color: var(--border-strong); color: var(--text); }
.ide-vtab.on { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }
.ide-vtab i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-purple); flex: none; }
.ide-vtab-meta { margin-left: auto; font-size: var(--t-caption-s); color: var(--subtle); display: flex; gap: 8px; align-items: center; }

/* The screen and what it is, as one block the stage can centre. */
.ide-shot { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ide-shot .ide-readbody { flex: 1; min-height: 0; }
.ide-shot .ide-frame { height: auto; flex: 1; min-height: 0; }
.ide-cap { margin: 0; text-align: center; font-size: var(--t-caption-s); color: var(--subtle); }

.ide-stage {
  flex: 1; overflow: auto; padding: 16px; display: grid; place-items: center;
  background:
    linear-gradient(90deg, rgba(var(--rgb-black), 0.022) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgba(var(--rgb-black), 0.022) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--bg);
}
.ide-frame {
  width: 100%; height: 100%; border: 1px solid var(--border-strong);
  border-radius: var(--r-5xl); background: var(--surface); overflow: hidden;
}
.ide-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Empty state: the argument for the whole product ── */
.ide-ready-pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 12px; max-width: 420px; }
.ide-ready-pill {
  font-size: var(--t-micro-s); padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}

/* Ideate is a workspace: give it the viewport, trim the hero, drop the
   sticky-bar padding main reserves for the build steps. */
main:has(#ideate.active) { padding-bottom: 24px; }
#ideate.active { display: flex; flex-direction: column; }
main:has(#ideate.active) .hero { margin-bottom: 12px; }
main:has(#ideate.active) .hero h2 { font-size: var(--t-display-md-s); }
main:has(#ideate.active) .hero p  { display: none; }
.ide-shell { height: auto; flex: 1; min-height: 420px; }

/* main is a plain block, so flex:1 on the section did nothing.
   Make it a column only while Ideate is active. */
main:has(#ideate.active) { display: flex; flex-direction: column; overflow: hidden; }
main:has(#ideate.active) .hero { flex: none; }
main:has(#ideate.active) #ideate.active { flex: 1; min-height: 0; }
.ide-shell { min-height: 0; }

/* ══════════════════════════════════════════════
   Studio: standalone surface for research,
   ideation and test. The design system is an
   input here, never the parent workflow.
══════════════════════════════════════════════ */
.studio {
  display: none;
  position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w);
  background: var(--bg); z-index: 720; overflow: hidden;
}
.studio.open { display: block; }
.studio.open.working .stu-compose { display: none; }
.studio.open:not(.working) .stu-work { display: none; }
/* The workspace wears the head (src/head.js) over the two columns; the
   landing has no head, it is the landing. */
.studio.open.working { display: grid; grid-template-rows: auto 1fr; }
.studio.open.working .stu-work { height: auto; min-height: 0; grid-row: 2; }
.studio.open:not(.working) #stuHead { display: none; }
#stuHead[hidden] { display: none; }
/* The craft's pages on the design surface: the second row whole while
   the head stands down; the workspace's two columns wait behind it. */
.stu-surface { grid-row: 2; position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.stu-surface[hidden], .stu-work[hidden] { display: none; }
.studio.open:not(.working) .stu-surface { display: none; }
/* The craft's column inside the conversation panel: the brief and the
   spine folded under the strip, the thread taking the height, the
   composer at the foot with its two intents and its price above the box. */
.stu-convhost { display: flex; flex-direction: column; min-height: 0; }
.stu-conv > .ide-brief { flex: none; padding: 0; border-bottom: 1px solid var(--border-hairline); background: var(--bg-surface); }
.stu-conv .ide-brief-strip { display: flex; padding: var(--sp-2) var(--sp-4); }
.stu-conv:not(.peek) .ide-brief-head, .stu-conv:not(.peek) .ide-chips, .stu-conv:not(.peek) .ide-sentence, .stu-conv:not(.peek) > .ide-spine { display: none; }
.stu-conv.peek .ide-brief-head { padding: var(--sp-15) var(--sp-4) 0; }
.stu-conv.peek .ide-chips, .stu-conv.peek .ide-sentence.show { padding: 0 var(--sp-4) var(--sp-3); }
.stu-conv > .ide-spine { flex: none; max-height: 40%; overflow-y: auto; border-bottom: 1px solid var(--border-hairline); }
.stu-conv > .ide-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.stu-conv > .ide-composer { flex: none; border-top: 1px solid var(--border-hairline); padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); }
/* The intents and the note on one line while they fit; a third intent
   (the selection's own ask) sends the note under them rather than
   squeezing it into a column of single words. */
.ide-composer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.ide-composer-top .ide-mode { margin: 0; flex: none; }
.ide-composer-top .ide-spend { margin: 0; flex: 1 1 160px; min-width: 0; text-align: right; }
.ide-composer-top:not(:has(.ide-mode:not(:empty))):not(:has(.ide-spend:not(:empty))) { display: none; }

/* ── Composer ── */
.stu-compose { height: 100%; overflow-y: auto; }
/* Wider than the composer alone needs, because the rows under it are
   four cards across and the page reads as one column when they share a
   measure. */
.stu-compose-inner { max-width: 1080px; margin: 0 auto; padding: 32px 28px 72px; }

/* Two .stu-title rules already exist, both earlier in this file, and the
   later one carries a 26px bottom margin sized for a heading with nothing
   under it. */
/* The title was a flex row, so the "?" after the dropdown became its own
   flex item and inherited the 10px gap, leaving the punctuation floating
   away from the word it belongs to. Text should flow as text. */
.stu-compose-inner .stu-title {
  margin-bottom: 8px; display: block; text-align: center;
}

.stu-sub {
  margin: 0 0 20px; text-align: center;
  font-size: var(--t-body-sm-s); color: var(--muted); line-height: 1.55;
}
/* The four landing titles are one treatment: the lists' display size. */
.stu-title {
  margin: 0 0 20px; font-family: var(--font-serif); font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w);
  letter-spacing: var(--t-display-xl-ls); text-align: center; line-height: var(--t-display-xl-lh);
}

/* Prompt card */
.stu-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  box-shadow: 0 1px 2px rgba(var(--rgb-black), .04), 0 6px 18px rgba(var(--rgb-black), .05); overflow: hidden;
}
.stu-input {
  width: 100%; border: none; resize: none;
  padding: 16px 16px 6px; font-size: var(--t-body-sm-s); font-family: inherit;
  line-height: 1.55; color: var(--text); background: transparent;
}
.stu-attach { display: flex; gap: 6px; padding: 0 16px; flex-wrap: wrap; }
.stu-attach:not(:empty) { padding-bottom: 8px; }
.stu-thumb {
  width: 46px; height: 34px; border-radius: var(--r-xs); border: 1px solid var(--border);
  background-size: cover; background-position: center; position: relative; flex: none;
}
.stu-thumb button {
  position: absolute; top: -5px; right: -5px; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: var(--t-caption-s); line-height: 1; cursor: pointer; padding: 0;
}
/* A document has nothing to show as a thumbnail, so it states itself:
   name, rough size, and the same remove control as an image. */
.stu-doc {
  display: inline-flex; align-items: center; gap: 6px; height: 34px;
  padding: 0 8px 0 6px; border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--surface); position: relative; flex: none; max-width: 240px;
}
.stu-doc b {
  font-size: var(--t-caption-s); font-weight: 400; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.stu-doc small { font-size: var(--t-caption-s); color: var(--subtle); flex: none; }
.stu-doc button {
  position: absolute; top: -5px; right: -5px; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: var(--t-caption-s); line-height: 1; cursor: pointer; padding: 0;
}

.stu-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px 12px; flex-wrap: wrap; }
.stu-plus, .stu-go {
  width: 40px; height: 40px; border-radius: var(--r-lg); display: grid; place-items: center;
  font-size: var(--t-title-md-s); cursor: pointer; flex: none;
}
.stu-plus { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.stu-plus:hover { border-color: var(--border-strong); color: var(--text); }
.stu-go { border: none; background: var(--brand); color: var(--color-primary-fg); margin-left: auto; }
.stu-go:disabled { opacity: .45; cursor: default; }
.stu-pill {
  display: flex; align-items: center; gap: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  /* One height for the whole row. Long values used to wrap, so the four
     pills sat at 40, 56 and 70px side by side. */
  height: 40px;
  padding: 0 12px 0 4px; font-size: var(--t-micro-s); cursor: pointer; text-align: left;
  min-width: 0;
}
.stu-pill:hover { border-color: var(--border-strong); }
.stu-pill .ic {
  width: 25px; height: 25px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: var(--t-micro-s); flex: none; background: var(--surface-hover); color: var(--muted);
}
.stu-pill.ds .ic { background: rgba(var(--rgb-ds-purple), .12); color: var(--ds-purple); }
.stu-pill.ds.none .ic { background: var(--surface-hover); color: var(--subtle); }
.stu-pill .lab { line-height: 1.25; }
.stu-pill .lab small { display: block; font-size: var(--t-micro-s); color: var(--subtle); }
.stu-pill .lab { min-width: 0; }
.stu-pill .lab b {
  font-size: var(--t-micro-s); font-weight: 600;
  display: block; max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stu-pill:disabled { opacity: .55; cursor: default; }

.stu-foot {
  border-top: 1px solid var(--border); padding: 8px 16px;
  font-size: var(--t-caption-s); color: var(--muted); background: var(--bg);
  display: flex; align-items: center; gap: 8px;
}
.stu-foot.warn { background: var(--color-warning-subtle); border-top-color: rgba(var(--rgb-warning), .3); }

/* ── Workspace ── */
.stu-work {
  height: 100%; padding: 12px;
  display: grid; gap: 0;
  /* One declaration, not four. The conversation takes a fifth of the room
     and the preview takes the rest, with a floor so it stays readable on a
     small window and a ceiling so it does not sprawl on a large one. The
     handle between them is the gap; a drag on it sets the column's width
     as an inline rule on this element (stuColumnApply). */
  grid-template-columns: minmax(240px, 20%) 12px minmax(0, 1fr);
}
@media (min-width: 1800px) { .stu-work { grid-template-columns: minmax(240px, 360px) 12px minmax(0, 1fr); } }
.stu-work .ide-left, .stu-work .ide-canvas { height: 100%; min-height: 0; }
.stu-split { position: relative; cursor: col-resize; touch-action: none; }
.stu-split::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; border-radius: var(--r-xs);
  background: transparent; transition: background var(--transition);
}
.stu-split:hover::before, .stu-split.dragging::before { background: var(--brand-border); }
body.stu-dragging { cursor: col-resize; user-select: none; }
body.stu-dragging iframe { pointer-events: none; }

/* While a page is edited by hand the column's brief and spine fold to one
   strip, and the panel starts under it; the strip opens them for a look. */
.ide-brief-strip {
  display: none; width: 100%; align-items: center; gap: 6px; padding: 6px 12px; border: 0; background: none;
  font: inherit; font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); cursor: pointer; text-align: left;
}
.ide-brief-strip::before { content: "▸"; font-size: var(--t-caption-s); }
.ide-brief-strip[aria-expanded="true"]::before { content: "▾"; }
.ide-brief-strip:hover { color: var(--text); }
.studio.focus .ide-brief-strip { display: flex; }
.studio.focus .ide-brief { padding: 0; }
.studio.focus .stu-work:not(.peek) .ide-brief-head, .studio.focus .stu-work:not(.peek) .ide-chips,
.studio.focus .stu-work:not(.peek) .ide-sentence, .studio.focus .stu-work:not(.peek) .ide-spine { display: none; }
.studio.focus .stu-work.peek .ide-brief-head { padding: 6px 12px 0; }
.studio.focus .stu-work.peek .ide-chips, .studio.focus .stu-work.peek .ide-sentence.show { padding: 0 12px 12px; }

/* Report output (research / test) reads as a document, not a mockup */
.ide-stage.report { place-items: stretch; padding: 0; background: var(--surface); }
.ide-stage.report .ide-frame { border: none; border-radius: 0; }

/* ── Test input sources ── */
.stu-sources { margin-bottom: 12px; }
.stu-sources:empty { display: none; }

/* ══════════════════════════════════════════════
   The field kit

   The six intake types a method composes its setup from, drawn at the
   app's own tokens. The studio took a brief and nothing else, so these
   are scoped to the two surfaces that do run methods: Quick run and a
   workflow stage.
══════════════════════════════════════════════ */

.stu-bar-note {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.45;
}
.stu-bar-note:empty { display: none; }
.stu-bar-note i { font-style: normal; flex: none; }
.stu-bar.warn .stu-bar-note { color: var(--color-warning); }
.mf-label {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
.mf-label em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.mf-input {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  font-size: var(--t-body-sm-s); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mf-input:focus {
  border-color: rgba(var(--rgb-primary), .5);
  box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
}
.mf-area { resize: vertical; min-height: 64px; line-height: 1.55; font-family: inherit; }

.mf-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.mf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted);
  font-size: var(--t-micro-s); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  transition: all var(--transition);
}
.mf-chip:hover { border-color: var(--border-strong); color: var(--text); }
.mf-chip.on { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.mf-chip i { font-style: normal; font-size: var(--t-micro-s); color: var(--subtle); }
.mf-chip.on:hover i { color: var(--brand-text); }

/* A locked field states a rule rather than offering a choice, so its
   chips do not respond to the pointer at all. */
.mf-locked .mf-chip { cursor: default; pointer-events: none; }
.mf-locked .mf-why {
  display: block; width: 100%; margin-top: 4px;
  font-size: var(--t-caption-s); color: var(--subtle);
  text-transform: none; letter-spacing: 0; line-height: 1.45;
}

/* The strip: screens in order. The order is the flow, so it is something
   you move rather than a bag you add to. */
.mf-strip { display: flex; flex-direction: column; gap: 6px; }
.mf-scr {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--sp-2);
  align-items: start; padding: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface);
}
.mf-scrn {
  font-size: var(--t-caption-s); color: var(--subtle); font-variant-numeric: tabular-nums;
  padding-top: 8px; text-align: right;
}
.mf-scrf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#wrFields .mf-scrf .mf-input { width: 100%; }
.mf-scrp { font-size: var(--t-caption-s); color: var(--muted); }
.mf-scrbtns { display: flex; gap: 2px; padding-top: 4px; }
.mf-scrbtns button {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--subtle); font-size: var(--t-body-xs-s); line-height: 1;
  transition: all var(--transition);
}
.mf-scrbtns button:hover:not(:disabled) { border-color: var(--border); color: var(--text); }
.mf-scrbtns button:disabled { opacity: .25; cursor: default; }
.mf-scradd {
  align-self: flex-start; height: 26px; padding: 0 var(--sp-2);
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  background: none; color: var(--muted); font-size: var(--t-caption-s); font-weight: 400;
  transition: all var(--transition);
}
.mf-scradd:hover { border-color: var(--brand); color: var(--brand-text); }

/* Triage: a row per finding, three answers, a note. Decided rows say
   which way in their left edge; undecided ones sit plain. */
.mf-triall { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.mf-triall button, .mf-trid button {
  height: 26px; padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted); font-size: var(--t-caption-s); font-weight: 600;
  transition: all var(--transition);
}
.mf-triall button:hover, .mf-trid button:hover { border-color: var(--border-strong); color: var(--text); }
.mf-trid button.on { border-color: var(--brand); color: var(--brand-text); background: var(--tint-2); }
.mf-trinone { font-size: var(--t-caption-s); color: var(--muted); margin: 0 0 var(--sp-2); }
.mf-triage { display: flex; flex-direction: column; gap: 6px; }
.mf-tri {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--sp-2); align-items: start;
  padding: var(--sp-2); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-2xl); background: var(--surface);
}
.mf-tri.fix { border-left-color: var(--brand); }
.mf-tri.leave { border-left-color: var(--green); }
.mf-tri.later { border-left-color: var(--border-strong); }
.mf-trin { font-size: var(--t-caption-s); color: var(--subtle); font-variant-numeric: tabular-nums; padding-top: 4px; text-align: right; }
.mf-trib { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mf-trit { font-size: var(--t-body-sm-s); line-height: 1.4; }
.mf-trim { font-size: var(--t-body-xs-s); color: var(--subtle); }
.mf-trinote { font-size: var(--t-caption-s); }
#wrFields .mf-trib .mf-input { width: 100%; }
.mf-trid { display: flex; gap: 4px; padding-top: 2px; }
.mf-triadd { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); align-items: center; }
.mf-triadd .mf-input { flex: 1; }
.mf-trix { margin-left: var(--sp-2); border: 0; background: none; color: var(--subtle); font-size: var(--t-body-sm-s); line-height: 1; padding: 0 4px; cursor: pointer; }
.mf-trix:hover { color: var(--text); }
.wr-fixoffer { border-color: var(--brand); }
.run-fixoffer { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.run-fixoffer span { font-size: var(--t-caption-s); color: var(--muted); }

/* Wells: named groups of images. The group is the unit of the report,
   so it is the unit of the intake. */
.mf-wells { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.mf-well {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2); min-height: 96px;
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--surface); text-align: left;
}
/* The one that is still an invitation keeps the dashes. */
.mf-well-new { border-style: dashed; border-color: var(--border-strong); }
.mf-well small { font-size: var(--t-caption-s); color: var(--subtle); text-transform: none; letter-spacing: 0; }
.mf-well-head { display: flex; align-items: center; gap: 4px; }
/* Scoped to the id, because `input:not([type="color"]):not(…):not(…)`
   outranks any class selector and was giving this a 40px full-width
   field inside a 96px well. */
#wrFields .mf-well-name {
  flex: 1; min-width: 0; width: auto; height: auto;
  padding: 2px 4px;
  border: 1px solid transparent; border-radius: var(--r-lg);
  background: transparent; color: var(--text);
  font-size: var(--t-body-sm-s); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
#wrFields .mf-well-name::placeholder { font-weight: 400; color: var(--subtle); }
#wrFields .mf-well-name:hover { border-color: var(--border); }
#wrFields .mf-well-name:focus {
  border-color: var(--border-strong); background: var(--bg); box-shadow: none;
}
/* Scoped to the id, because `input:not([type="color"]):not(…):not(…)`
   outranks any class selector and was giving this a 40px full-width
   field inside a 96px well. */
.mf-well-del {
  flex: none; width: 20px; height: 20px; border: none; background: transparent;
  color: var(--subtle); font-size: var(--t-caption-s); border-radius: var(--r-md);
}
.mf-well-del:hover { color: var(--brand-text); background: var(--brand-dim); }
.mf-well.over {
  border-style: solid; border-color: var(--brand);
  background: var(--brand-dim); box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .1);
}
.mf-well.over * { pointer-events: none; }
.mf-well-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--muted);
}
.mf-well-new b { font-size: var(--t-body-sm-s); font-weight: 600; }
.mf-well-new:hover { border-color: var(--brand); color: var(--brand-text); }
.mf-shots { display: flex; flex-wrap: wrap; gap: 4px; }
.mf-shot {
  position: relative; width: 34px; height: 24px; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background-size: cover; background-position: center top;
}
.mf-shot button {
  position: absolute; top: -5px; right: -5px; width: 14px; height: 14px;
  border: none; border-radius: 50%; background: var(--text); color: var(--surface);
  font-size: 8px; line-height: 1; padding: 0; opacity: 0; transition: opacity var(--transition); /* a mark, sized to its box */
}
.mf-shot:hover button { opacity: 1; }
.mf-shot.add {
  display: grid; place-items: center; border-style: dashed;
  background: var(--surface); color: var(--subtle); font-size: var(--t-body-sm-s);
}
.mf-shot.add:hover { border-color: var(--brand); color: var(--brand-text); }

@media (max-width: 720px) { .mf-wells { grid-template-columns: 1fr 1fr; } }
.stu-src-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 6px;
}
.stu-src-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stu-src {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  padding: 8px 12px; text-align: left; cursor: pointer; transition: all var(--transition);
}
.stu-src:hover { border-color: var(--border-strong); }
.stu-src.on { border-color: var(--brand); background: var(--brand-dim); }
.stu-src.disabled { opacity: .45; cursor: default; }
.stu-src b { display: block; font-size: var(--t-label-sm-s); font-weight: 600; }
.stu-src span { display: block; font-size: var(--t-caption-s); color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Chain affordance in the workspace: offered, never required */
.ide-chain {
  display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg); flex-wrap: wrap; align-items: center;
}
.ide-chain span { font-size: var(--t-caption-s); color: var(--subtle); margin-right: 2px; }
.ide-chain button {
  font-size: var(--t-caption-s); font-weight: 600; padding: 4px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  transition: all var(--transition);
}
.ide-chain button:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-dim); }

/* ══════════════════════════════════════════════
   Studio composer v2: wider, pill-driven,
   mode as an inline dropdown in the title
══════════════════════════════════════════════ */
.stu-compose-inner { max-width: 940px; padding: 44px 32px 60px; }
.stu-title { margin-bottom: 24px; }

.stu-bar { padding: 6px 12px 12px; }
.stu-bar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.stu-go { margin-left: 0; }
.stu-pill.model {
  padding: 4px 12px; color: var(--muted); font-size: var(--t-micro-s);
  flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25;
}
.stu-pill.model small { font-size: var(--t-micro-s); color: var(--subtle); display: block; }
.stu-pill.model b { font-size: var(--t-micro-s); font-weight: 600; color: var(--text); }

/* Figma link row: the app's equivalent of "no codebase selected" */
.stu-linkrow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-top: 1px solid var(--border);
}
.stu-linkicon { font-size: var(--t-body-xs-s); opacity: .5; flex: none; }
.stu-linkinput {
  flex: 1; border: none; background: transparent;
  font-size: var(--t-body-xs-s); font-family: inherit; color: var(--text); padding: 2px 0;
}
.stu-linkinput::placeholder { color: var(--subtle); }

.stu-linkrow.busy .btn { opacity: .5; pointer-events: none; }

/* ── Shared dropdown menu ── */
.stu-menu {
  display: none; position: fixed; z-index: 900;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-4xl);
  box-shadow: 0 10px 32px rgba(var(--rgb-black), .14); padding: 4px;
  min-width: 0; width: max-content; max-width: 300px;
  /* The height is set on open, against the room the anchor leaves. This
     is what makes that height mean something. `contain` so reaching the
     end of the list does not start scrolling the page behind it. */
  overflow-y: auto; overscroll-behavior: contain;
}
.stu-menu.open { display: block; }
.stu-menu-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); padding: 6px 8px 4px;
}
.stu-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--r-lg); font-size: var(--t-body-xs-s); cursor: pointer; color: var(--text);
}
.stu-menu-item:hover { background: var(--tint-2); }
.stu-menu-item.on { background: var(--brand-dim); color: var(--brand-text); font-weight: 600; }
.stu-menu-item .sw { width: 10px; height: 10px; border-radius: var(--r-xs); flex: none; }
.stu-menu-item .meta { margin-left: auto; font-size: var(--t-caption-s); color: var(--subtle); font-weight: 400; }
.stu-menu-item.create { color: var(--brand-text); font-weight: 600; }
.stu-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.stu-menu-empty { padding: 8px; font-size: var(--t-body-xs-s); color: var(--muted); }

/* ══ COMPOSER: drawn icons, and the verb as a word ══════════════════
   The bar labelled itself with typographic characters (◈ ▭ ◇ and a link
   glyph). They are font coverage rather than artwork: they sat off the
   optical baseline, ignored the stroke weight everything else uses, and
   drew differently on any machine missing the glyph. These are on the
   same 24 grid and the same 1.6 stroke as the rail's icons. */
.stu-pill .ic svg, .stu-plus svg, .stu-go svg,
.stu-linkicon svg, .stu-menu-item .mic svg {
  width: 16px; height: 16px; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.stu-plus svg, .stu-go svg { width: 18px; height: 18px; }
.stu-linkicon { display: grid; place-items: center; width: 16px; height: 16px; opacity: .55; }
.stu-menu-item .mic { display: grid; place-items: center; width: 18px; flex: none; color: var(--muted); }
.stu-menu-item:hover .mic, .stu-menu-item.on .mic { color: inherit; }

/* The verb was a dropdown, then a word in a cursive face the rest of the
   app never used: the one decorative move, on the least important
   screen. It is a word in the title's own face now, marked by colour. */
.stu-verb { font-style: normal; color: var(--brand-text); }

/* [hidden] is a UA display:none, which .stu-linkrow's own display:flex
   beats at equal specificity by coming later. The row would stay on
   screen with the attribute set and nothing to explain why. */
.stu-linkrow[hidden] { display: none; }

/* ══ THE ASK DIALOG ═════════════════════════════════════════════════
   The questions put to a brief before the design call. It has no fields
   of its own: how many rows, what they are called and what they offer
   all arrive from the model, so everything here sizes to its content. */
/* The shared .modal-box pads itself 24px, which left the head floating
   28px above the body and stopped the foot's rule reaching either edge.
   This box bands itself instead: head, body, foot, each with its own
   padding and full-bleed dividers. */
/* The later .modal-box rule also makes the box a flex column with a 16px
   gap, which is the last 16px between the head rule and the body. */
#stuAskModal .modal-box {
  padding: 0; gap: 0; max-width: 620px; width: min(620px, calc(100vw - 48px));
}
#stuAskModal .modal-head {
  margin: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.ask-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.ask-note { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); }
.ask-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ask-row:last-child { margin-bottom: 0; }
.ask-q { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ask-q b { font-size: var(--t-label-sm-s); font-weight: 600; color: var(--text); }
.ask-q small { font-size: var(--t-caption-s); color: var(--subtle); }
.ask-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-openlabel { font-size: var(--t-label-sm-s); font-weight: 600; color: var(--text); }
.ask-input {
  width: 100%; height: 40px; padding: 0 12px; font: inherit; font-size: var(--t-body-xs-s);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
}
.ask-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.ask-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-hover);
}
.ask-foot-note { margin-right: auto; font-size: var(--t-caption-s); color: var(--subtle); }
/* Waiting on the questions. Three bars sized like the rows that replace
   them, so the box does not jump when they land. */
.ask-wait { display: flex; flex-direction: column; gap: 16px; }
.ask-wait span {
  height: 34px; border-radius: var(--r-md);
  background: linear-gradient(90deg, transparent, var(--surface-hover), transparent);
  background-size: 260px 100%; background-repeat: no-repeat;
  animation: askShimmer 1.4s linear infinite;
}
.ask-wait span:nth-child(2) { width: 88%; }
.ask-wait span:nth-child(3) { width: 72%; }
@keyframes askShimmer { from { background-position: -260px 0; } to { background-position: 260px 0; } }
@media (prefers-reduced-motion: reduce) { .ask-wait span { animation: none; } }

/* Wider workspace too */
/* was: two more grid-template-columns declarations here, which is what made
   the 300px base above dead code. The rule above is now the only one. */

/* ══════════════════════════════════════════════
   Corrective scale: the app's own token grammar

   Measured before this: 11 font sizes, 5 weights,
   9 line-heights, 15 paddings (9 off-grid), 8 radii.
   Everything below routed onto seven type steps,
   seven spacing steps and five radii; the type steps
   are the Instrument roles now.
══════════════════════════════════════════════ */
:root {
  /* Type is the Instrument scale alone (src/ui/tokens.css, the --t-*-s
     roles). The seven steps this block used to carry, and the PS type
     scale they aliased, were swept off the sheet on 2026-09-21
     (docs/design/canvas-plan.md, section 1): every rule names a role. */

  /* DS tokens we had no equivalent for. */
  --color-focus: var(--brand-600);
  --layout-max-width: 1280px;
  --gap-tight: 8px;  --gap-normal: 16px;  --gap-relaxed: 24px;  --gap-section: 64px;
  --app-header-height: 40px;   /* the window's title bar, Variant B of 2 October 2026 */
  --app-sidebar-width: 256px;
  --app-sidebar-width-collapsed: 64px;

  /* One spacing family and one radius family. A second of each (--s-n,
     --r-n) lived here as aliases, so half the sheet named its steps one
     way and half the other; every call site names the first now. */

  /* Shell */
  /* the real shellbar height: .shellbar is set to --app-header-height further
     down, so --shell-h has to agree or every surface below it hangs 10px wrong */
  --shell-h: var(--app-header-height);
  --rail-w: 52px;              /* the icon rail */
  --chrome-h: calc(var(--menubar-h) + var(--shell-h));
}

/* ── One chip, replacing .fw-btn / .cat-chip / .ide-chip / .stu-out ── */
.chip, .cat-chip, .ide-chip {
  font-size: var(--t-micro-s); font-weight: var(--t-micro-w); line-height: var(--t-label-sm-lh);
  /* A chip in this app is a rounded rectangle, not a lozenge: --r-pill
     read 0px, so this asked for a pill and drew a box, and pointing it
     at a real 999px now would round every chip in the product on the
     strength of a token name. */
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.chip:hover, .cat-chip:hover, .ide-chip:hover {
  border-color: var(--border-strong); color: var(--text);
}
.chip.on, .chip.active, .cat-chip.active, .ide-chip.on {
  background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); font-weight: 600;
}
/* the design-system chip keeps its purple identity */
.ide-chip.ds { background: rgba(var(--rgb-ds-purple), .10); border-color: rgba(var(--rgb-ds-purple), .32); color: var(--ds-purple-text); }
.ide-chip.ds.none { background: var(--tint-2); border-color: var(--border); color: var(--muted); }

/* ── Type corrections, applied where the audit found strays ── */

.hero h2 { font-size: var(--t-display-md-s); line-height: var(--t-display-md-lh); }
.stu-pill .lab small, .ide-brief-label, .cmp-rail-label, .lbl, .settings-section-label { font-size: var(--t-micro-s); font-weight: var(--t-caption-w); }
.stu-pill .lab b, .stu-pill.model b { font-size: var(--t-micro-s); }
.stu-pill, .stu-plus, .stu-go { border-radius: var(--r-sm); }
.stu-card, .stu-menu { border-radius: var(--r-2xl); }
.ide-vtab, .stu-src { border-radius: var(--r-md); }

/* Workspace had no heading level at all: its largest type was 12px */
.ide-brief-label { font-size: var(--t-caption-s); }
.ide-vtab { font-size: var(--t-body-xs-s); }
.ide-vtab.on { font-weight: 700; }
.ide-canvas-title {
  font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w); line-height: var(--t-title-md-lh);
  margin: 0; color: var(--text);
}
.ide-bub { font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }
.ide-who { font-size: var(--t-caption-s); font-weight: 700; }

/* 9px floor eliminated */
.stu-src span, .prov-model, .sso-row span { font-size: var(--t-caption-s); }

/* ══════════════════════════════════════════════
   Shell: Studio, Design System and Projects are
   routes in one frame. Before this they were an
   overlay, an app and a modal, with no shared
   navigation and two dead ends.
══════════════════════════════════════════════ */
.shellbar {
  position: fixed; top: var(--menubar-h); left: 0; right: 0; height: var(--shell-h);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); background: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline); z-index: 800;
}

   /* the routes live on the rail now */

/* ══ PRIMARY RAIL ══════════════════════════════════════════════════
   Whole modes, not pages, so they stay equally reachable from anywhere.
   Labelled rather than icon-only: "Design System Foundry" has no
   conventional glyph, and an unlabelled one is a guess re-made every visit.
   ════════════════════════════════════════════════════════════════ */
.prail {
  position: fixed; top: var(--chrome-h); left: 0; bottom: 0;
  width: var(--rail-w); z-index: var(--z-rail);
  background: var(--bg-rail); border-right: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-05); padding: var(--sp-25) 0 var(--sp-6); overflow-y: auto; overscroll-behavior: contain;
}
/* An item stacks full width: the icon over its label, and where you are
   is said by a surface fill and a 2px edge at the left in the DS's
   selected colour, not by a tinted lozenge. */
.pnav {
  width: 100%; padding: var(--sp-3) var(--sp-1); border: 0; background: none;
  border-left: 2px solid transparent; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
/* flex:none matters: the icon is a flex item on the column's main axis, so
   without it the box shrinks to its content and the glyph collapses */
.pnav svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none;
            stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
            transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.pnav span { font-size: var(--t-nav-label-s); font-weight: var(--t-nav-label-w); line-height: var(--t-nav-label-lh); letter-spacing: var(--t-nav-label-ls); text-align: center; }
/* The rail's buttons also carry .shell-tab, whose 32px height and horizontal
   padding are meant for the top bar. Scoped so the rail wins without
   changing the horizontal tabs anywhere else. */
.prail .pnav {
  height: auto; min-height: 0; width: 100%;
  padding: var(--sp-3) var(--sp-1); border-radius: 0;
  border: 0; border-left: 2px solid transparent; background: transparent; color: var(--text-muted);
  font-size: var(--t-nav-label-s); font-weight: var(--t-nav-label-w);
}
.prail .pnav span { display: block; max-width: 60px; }
.prail .pnav:hover { color: var(--text-primary); background: var(--tint-2); }
.prail .pnav.on { color: var(--text-primary); background: var(--bg-surface); border-left-color: var(--brand); font-weight: 600; }
.pnav:hover:not(.on) svg { transform: scale(1.08); }
/* where you are is said by the icon settling larger and taking the accent */
@keyframes navSettle { 0% { transform: scale(1); } 45% { transform: scale(1.22); }
                       100% { transform: scale(1.1); } }
.pnav.on { color: var(--text-primary); background: var(--bg-surface); border-left-color: var(--brand); font-weight: 600; }
.pnav.on span { font-weight: 600; }
.pnav.on svg { animation: navSettle 340ms cubic-bezier(.2,.8,.3,1) forwards; }
/* flex:none, or the rule is a 1px flex item the column is free to shrink
   to nothing the moment the rail has to scroll. */
.prail .sep { width: auto; height: 1px; flex: none; background: var(--border-hairline); margin: var(--sp-25) var(--sp-4); }

/* The crumb belongs to the content, not the chrome, and only exists below
   level one. It replaces a hardcoded "Design System /" that also rendered
   on the Prompt Library route, where it was simply wrong. */
.wt-crumb {
  display: inline-flex; align-items: center; gap: 8px; height: 28px;
  margin: 0 0 12px; padding: 0 4px 0 0; border: 0; background: none;
  font-size: var(--t-body-xs-s); color: var(--muted); cursor: pointer;
  transition: color var(--transition);
}
.wt-crumb:hover { color: var(--brand-text); }

/* A run that was stopped, or that could not be written, must not look like
   one that finished. Both flags were set in the code and rendered nowhere. */
.run-notice {
  margin: 0 0 12px; padding: 8px 12px; font-size: var(--t-caption-s);
  line-height: 1.55; border-left: 2px solid var(--color-warning);
  background: rgba(var(--rgb-warning), .07); color: var(--text);
}
.run-notice b { font-weight: 600; }
.run-notice.quick {
  border-left-color: var(--color-primary);
  background: rgba(var(--rgb-primary), .06);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.run-notice.quick .btn.ghost { margin-left: auto; border-color: var(--border); }

.run-notice.kept {
  border-left-color: var(--color-success);
  background: rgba(var(--rgb-success), .06);
}
/* A way back, beside the readiness figure it will move. */
.hero-undo { display: flex; gap: 6px; align-items: center; }
.hero-undo .btn.ghost { font-variant-numeric: tabular-nums; }

/* The wording a step sends, on the step that sends it. */
.run-step-see {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--t-caption-s); padding: 1px 6px; cursor: pointer;
  border-radius: var(--r-md); flex: none;
  transition: border-color var(--transition), color var(--transition);
}
.run-step-see:hover, .run-step-see[aria-expanded="true"] {
  border-color: var(--color-primary); color: var(--brand-text);
}
.run-step-prompt {
  margin: 8px 0 0; padding: 12px 12px; max-height: 340px; overflow: auto;
  border: 1px solid var(--border); background: var(--color-surface-raised);
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s);
  line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
  border-radius: var(--r-xs);
}

.run-notice.unsaved { border-left-color: var(--color-error);
                      background: rgba(var(--rgb-error), .07); }
/* On the method surface the notice sits between the export bar and the
   report, where the two are already flush against each other. */
.run-card.unsaved { border-color: var(--color-error); }

/* ══════════════════════════════════════════════
   Projects: 30 / 70

   The left column orients, the right column works. This page's one primary
   action lives in the working column rather than the header, so the usual
   record-left / act-right contract is deliberately inverted here.

   EVERY rule is scoped under #dashboard. The prototype's names are generic
   (hero, sub, search, cat, projects, loading) and this stylesheet already has
   rules for several of them. Scoping means the port cannot be overridden by
   an existing single-class rule further down the file, and cannot leak into
   any other page. That is the same failure that made every dialog 761px tall.
══════════════════════════════════════════════ */
.wt-page .search {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
  /* the bare `label` rule sets display:grid, a gap and weight 500, and the
     input inherits the weight through `font: inherit` */
  gap: 0; font-weight: 400; color: var(--text);
}
.wt-page .search svg {
  position: absolute; left: 11px; width: 16px; height: 16px;
  stroke: var(--muted); fill: none; stroke-width: 1.7; pointer-events: none;
}
/* The search fields name themselves and are excluded from the global
   input rule, so this no longer has to out-weigh anything. */
.wt-page .search input[type="search"] {
  width: 100%; height: 38px; padding: 0 12px 0 32px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-body-xs-s);
}
.wt-page .search input[type="search"]::placeholder { color: var(--subtle); }
.wt-page .search input[type="search"]:hover { border-color: var(--border-strong); }
.wt-page .search input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.wt-page .proj-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0;
}
.wt-page .cat {
  height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  color: var(--muted); font-size: var(--t-caption-s); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition);
}
.wt-page .cat:hover { border-color: var(--border-strong); color: var(--text); }
.wt-page .cat.on {
  border-color: var(--color-primary); color: var(--brand-text);
  background: var(--color-primary-subtle); font-weight: 600;
}
.wt-page .cat .n { color: var(--subtle); font-variant-numeric: tabular-nums; }
.wt-page .cat.on .n { color: var(--brand-text); }
.wt-page .wl-count { margin-left: auto; font-size: var(--t-caption-s); color: var(--subtle); }
/* A link in a line: the tidy beside the note. */
.wf-link { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: var(--brand-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wf-link:hover { color: var(--text); }
.wt-page .wf-sub #dashTidy:empty { display: none; }
/* The sort, at the chip row's end: a word and a caret, like the head's picker. */
.wt-page .wl-sort { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption-s); color: var(--subtle); margin-left: 12px; font-weight: 400; }
.wt-page .wl-sort select {
  font: inherit; font-size: var(--t-caption-s); color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); height: 30px; padding: 0 8px; cursor: pointer;
}
.wt-page .wl-sort select:hover { border-color: var(--border-strong); }
/* Removed is not a category, it is the absence of one, so it sits apart. */
.wt-page .cat.is-removed { border-style: dashed; }
.wt-page .cat.is-removed.on { border-style: solid; }

/* ══════════════════════════════════════════════
   Workflows: the split canvas

   The page is the app shell, not a document: it does not scroll. Only the
   grid column does, so the header and the filter row stay put while the
   panel comes and goes and the grid keeps its place in the list.
══════════════════════════════════════════════ */
#dashboard, #quickrun { overflow: hidden; }
/* One shell for the lists and the catalogues: the name, one sentence,
   the search and the one button, the chips, and the grid full width.
   The page held its content in a 1440 column before this, and the handoff
   is drawn against the same reference. Without it four fixed columns
   stretch to 430px on a wide monitor and the 104px picture becomes a
   letterbox slot, which is the fixed count's whole cost. Inside 1440 the
   columns land at about 300, which is what the handoff drew. */
.wt-page .wf-shell {
  height: 100%; width: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; min-height: 0;
}

.wt-page .wf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 24px 28px 16px; flex: none;
}
.wt-page .wf-heading { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wt-page .wf-head h1 {
  margin: 0; font-size: var(--t-display-md-s); font-weight: var(--t-display-md-w); letter-spacing: -.02em;
  line-height: 1.1; color: var(--text);
}
.wt-page .wf-sub {
  margin: 0; font-size: var(--t-caption-s); color: var(--muted);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* Two facts, one line, and the separator belongs to neither of them, so it
   is drawn rather than typed into either. */
.wt-page .wf-sub span:empty { display: none; }
.wt-page .wf-sub span + span:not(:empty)::before {
  content: "·"; margin-right: 8px; color: var(--subtle);
}
.wt-page .wf-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.wt-page .wf-tools .search { flex: 0 1 340px; min-width: 200px; }
/* The icon sits inside the field, so the text has to start after it. The
   shared rule two sections up says it matched the global input rule's
   weight and won on order; the global rule has since grown a fourth
   :not(), which makes it (0,4,1) and puts the text back under the
   magnifier. An id is how this whole section is scoped anyway, and it is
   the one weight a generic input rule cannot overtake by accident. */
.wt-page .wf-tools .search input[type="search"] { padding: 0 12px 0 32px; }

.wt-page .proj-tabs {
  position: static; flex: none; padding: 0 28px 16px; margin: 0;
  border-bottom: 1px solid var(--border);
}

.wt-page .wf-row { flex: 1; min-height: 0; display: flex; position: relative; }
.wt-page .wf-grid {
  flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 28px 40px;
}

/* The panel is a sibling of the grid, not an overlay, so the two share the
   row and the seam between them stays flush while both animate. The inner
   wrapper is a fixed width: the clipping window changes, the content never
   reflows, so no text re-wraps for 260ms on the way in. */
#dashboard .wf-panel {
  flex: 0 0 auto; width: 0; overflow: hidden;
  background: var(--surface-hover); border-left: 0 solid var(--border);
  transition: width 260ms cubic-bezier(.4, 0, .2, 1);
}
/* The border belongs to the seam, and there is no seam when the panel is
   closed: left on, it drew a 1px rule down the right edge of a page with
   nothing selected. */
#dashboard .wf-panel.open { width: 430px; border-left-width: 1px; }
#dashboard .wf-pane {
  width: 430px; height: 100%; display: flex; flex-direction: column; min-height: 0;
}

#dashboard .wf-pane-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex: none;
}
/* The name column takes the row, so the close sits at the end of it
   rather than immediately after the chip: without the flex the column
   was only as wide as its widest line, and a short project name left the
   cross stranded in the middle of the header. */
#dashboard .wf-pane-head .who {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
}
#dashboard .wf-pane-head .pcat { align-self: flex-start; }
#dashboard .wf-pane-head h2 {
  margin: 0; font-size: var(--t-title-lg-s); font-weight: 600; line-height: 1.2;
  color: var(--text); text-wrap: pretty;
}
#dashboard .wf-close {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
#dashboard .wf-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
#dashboard .wf-close:hover { background: var(--surface-hover); color: var(--text); }

#dashboard .wf-pane-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
/* The project's own thumbnail. The handoff called for a 200px grey
   skeleton because it had no imagery to work from; the app already draws
   an abstraction of each project in that project's own two colours, and a
   grey box would be less than it has.

   Scaled rather than stretched. The tile is built at 64px with a 7px
   pad, an 11px header and 6px rules; at 200px tall those become three
   hairlines adrift in an empty box. Doubling it keeps the proportions the
   tile was drawn at, and the aspect ratio gives the panel a picture
   rather than a strip. */
#dashboard .wf-preview { display: block; }
/* The panel's copy of the same tile. Not square here: the panel is a tall
   narrow column and a 382px square would push everything under it off the
   bottom, which is the one thing the overview exists to avoid. */
#dashboard .wf-preview .pthumb {
  height: 168px; gap: 8px; padding: 16px; border-bottom: 0; border: 1px solid var(--border);
  border-radius: var(--r-xs);
}
#dashboard .wf-preview .pthumb i.ink { height: 10px; }
#dashboard .wf-preview .pthumb i.l1, #dashboard .wf-preview .pthumb i.l2 { height: 7px; }
#dashboard .wf-preview .pthumb.sys .aa { font-size: 44px; } /* a mark, sized to its box */
#dashboard .wf-preview .pthumb.sys .sw i { width: 24px; height: 24px; }

#dashboard .wf-cap {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--muted); margin: 0 0 8px;
}
#dashboard .wf-facts { display: flex; flex-direction: column; gap: 8px; }
#dashboard .wf-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: var(--t-body-xs-s);
}
#dashboard .wf-fact dt { color: var(--muted); }
#dashboard .wf-fact dd { margin: 0; color: var(--text); font-weight: 400; text-align: right;
  min-width: 0; overflow-wrap: anywhere; }
#dashboard .wf-phase {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-body-xs-s); color: var(--muted);
}
/* Neutral, for the same reason the category chip is: the accent belongs
   to the primary action and a phase is not a severity. */
#dashboard .wf-phase i { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--border-strong); }
#dashboard .wf-none { font-size: var(--t-caption-s); color: var(--subtle); margin: 0; }

#dashboard .wf-pane-foot {
  flex: none; display: flex; gap: 8px; padding: 16px 24px;
  border-top: 1px solid var(--border); background: var(--surface);
}
#dashboard .wf-pane-foot .btn.primary { flex: 1; height: 38px; }

/* Below roughly 1100px there is not enough canvas to give 430px away, so
   the panel stops being a column and becomes a sheet over the grid. */
#dashboard .wf-scrim {
  position: absolute; inset: 0; background: rgba(var(--rgb-black), .5);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; z-index: 5;
}
@media (max-width: 1100px) {
  #dashboard .wf-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 430px; max-width: 92%;
    transform: translateX(100%); transition: transform 200ms ease-out; z-index: 6;
    box-shadow: -12px 0 32px rgba(var(--rgb-black), .12);
  }
  #dashboard .wf-panel.open { transform: translateX(0); }
  #dashboard .wf-scrim.on { opacity: 1; pointer-events: auto; }
  #dashboard .wf-head { flex-wrap: wrap; }
  #dashboard .wf-tools .search { flex: 1 1 200px; }
}
/* Motion is decoration here: the split is legible without it. */
@media (prefers-reduced-motion: reduce) {
  #dashboard .wf-panel, #dashboard .wf-scrim { transition: none; }
}

/* Four columns, and three while the panel is open, animated on the same
   curve and duration as the panel's width so the seam between them stays
   flush. Fixed rather than auto-filled: the handoff's cards resize in
   place and none is reordered, which is what a count does and what a
   min-width cannot promise. */
#dashboard .proj-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  transition: grid-template-columns 260ms cubic-bezier(.4, 0, .2, 1);
}
#dashboard .wf-row.split .proj-grid { grid-template-columns: repeat(3, 1fr); }
/* Below the split's own breakpoint the panel is a sheet, so the grid
   keeps its four; narrower still and a fixed count would draw cards too
   small to read, so it goes back to filling. */
@media (max-width: 900px) {
  #dashboard .proj-grid,
  #dashboard .wf-row.split .proj-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
#dashboard .wl-tail { min-height: 1px; }
#dashboard .wl-more {
  padding: 24px 0; text-align: center; font-size: var(--t-body-xs-s); color: var(--subtle);
}
/* Scrolling is an optimisation, not the only way to reach page two: a
   keyboard or screen-reader user never triggers an intersection observer. */
#dashboard button.wl-more {
  display: block; width: 100%; background: none; border: 1px solid transparent;
  cursor: pointer; font: inherit; font-size: var(--t-body-xs-s); color: var(--muted);
  padding: 12px 0; transition: all var(--transition);
}
#dashboard button.wl-more:hover { border-color: var(--border); color: var(--text); }
#dashboard button.wl-more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
#dashboard .wl-sentinel { height: 1px; }

/* ══ THE CARD ══════════════════════════════════════════════════════
   One card for every object in a list (src/card.js): the picture on
   top, the name under it, one line, and the ⋯. The card is a container,
   not a control: a button inside a button is invalid markup and the
   browser hoists the inner one out of the row. Three sizes: grid (the
   lists), recent (the studio's five), row (the drawer). */
.wt-card {
  position: relative; display: block; background: var(--surface);
  border: 1px solid var(--border); box-shadow: none; cursor: default;
  border-radius: var(--r-2xl); overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.wt-card:hover, .wt-card:focus-within {
  border-color: var(--color-primary); box-shadow: none; transform: translateY(-1px);
}
/* A selected card. The ring is the app's own brand, not a second one. */
.wt-card.on { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }
.wt-card.away { opacity: .55; }
.wt-card .pface {
  display: block; width: 100%; text-align: left; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.wt-card .pface:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.wt-card .pmeta { padding: 12px 12px 16px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wt-card .proj-name {
  margin: 0; font-size: var(--t-label-sm-s); font-weight: 600; letter-spacing: -.003em;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-card .pnote {
  font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* What tells a same-name card apart: its brief's first words, or its
   folder in the folder's own letters. */
.wt-card .ptwin {
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-card.is-system .ptwin { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
/* The ⋯ sits over the picture, so it carries its own ground. */
.wt-card .proj-menu {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 1px solid transparent; background: var(--surface);
  color: var(--subtle); font-size: var(--t-title-md-s); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--transition), border-color var(--transition);
}
.wt-card:hover .proj-menu, .wt-card .proj-menu:focus-visible, .wt-card .proj-menu.on { opacity: 1; }
.wt-card .proj-menu:hover, .wt-card .proj-menu.on { border-color: var(--border-strong); color: var(--text); }
/* Recent: a shorter picture, a tighter foot. */
.wt-card.recent .pthumb { height: 96px; }
.wt-card.recent .pmeta { padding: 12px 12px 12px; gap: 2px; }
/* Row: the picture beside the name, the ⋯ at the end, no frame. */
.wt-card.row { display: flex; align-items: stretch; gap: 4px; border: 0; border-radius: var(--r-2xl); overflow: visible; }
.wt-card.row:hover, .wt-card.row:focus-within { background: var(--surface-hover); transform: none; border: 0; }
.wt-card.row.on { box-shadow: none; }
.wt-card.row .pface { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; }
.wt-card.row .pface:focus-visible { outline-offset: -2px; border-radius: var(--r-2xl); }
.wt-card.row .pthumb { width: 60px; height: 44px; flex: none; padding: 6px; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-xs); }
.wt-card.row .pthumb i.ink { height: 5px; }
.wt-card.row .pthumb i.l1, .wt-card.row .pthumb i.l2 { height: 4px; }
.wt-card.row .pmeta { padding: 0; gap: 2px; }
.wt-card.row .proj-menu { position: static; opacity: 1; width: 32px; height: auto; border: 0; background: none; border-radius: var(--r-4xl); font-size: var(--t-body-xs-s); }
.wt-card.row .proj-menu:hover { color: var(--text); background: var(--tint-3); border: 0; }
@media (prefers-reduced-motion: reduce) { .wt-card { transition: none; } .wt-card:hover { transform: none; } }

/* The thumbnail is the project's own work when there is any, and the mark
   when there is not. Never a generic placeholder box. */
/* 104px, 14px of padding, 6px between the bars: the handoff's own
   numbers. The bars are 8px at 52% in the project's ink, then 6px at 80%
   and 64% in near-black at 9%. */
/* Unscoped, because projThumbHtml draws this tile wherever a project is
   shown and every rule that gave it a shape was written under
   #dashboard. Drawn anywhere else it was a tinted rectangle with three
   invisible bars in it. The dashboard's own sizes still win: they are
   more specific, and they come after. */
.pthumb {
  width: 100%; height: 104px;
  border: 0; border-bottom: 1px solid var(--border); background: var(--tint-2);
  position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
}
.pthumb i { display: block; font-style: normal; background: rgba(var(--rgb-black), .09); }
.pthumb i.ink { height: 8px; width: 52%; }
.pthumb i.l1  { height: 6px; width: 80%; }
.pthumb i.l2  { height: 6px; width: 64%; }
/* The bars are the reading state and nothing else: they breathe while
   the picture is read, and are replaced by it. */
.pthumb.reading i { animation: pthumb-breathe 1.4s ease-in-out infinite; }
.pthumb.reading i.l1 { animation-delay: .15s; }
.pthumb.reading i.l2 { animation-delay: .3s; }
@keyframes pthumb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pthumb.reading i { animation: none; } }
/* A page: the top of it, at the card's width. */
.pthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* A system: its palette and its type, on its own paper. */
.pthumb.sys { gap: 0; padding: 12px 12px; justify-content: space-between; }
.pthumb.sys .sw { display: flex; gap: 4px; }
.pthumb.sys .sw i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(var(--rgb-black), .08); background: none; }
.pthumb.sys .aa { font-size: var(--t-display-md-s); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.pthumb.sys .faces { font-size: var(--t-caption-s); opacity: .7; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-card.row .pthumb.sys { padding: 4px 6px; }
.wt-card.row .pthumb.sys .sw i { width: 8px; height: 8px; }
.wt-card.row .pthumb.sys .aa { font-size: var(--t-body-sm-s); }
.wt-card.row .pthumb.sys .faces { display: none; }
/* A plan drawn small: a column of dots per phase. */
.pthumb.plan { padding: 0; display: block; }
.pthumb.plan svg { width: 100%; height: 100%; display: block; }
.pthumb.plan .track { stroke: var(--border); stroke-width: 1; fill: none; }
.pthumb.plan .step { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.pthumb.plan .step.done { fill: var(--brand); stroke: var(--brand); }
.pthumb.plan .step.running, .pthumb.plan .step.waiting { stroke: var(--brand); }
.pthumb.plan .step.skipped { stroke-dasharray: 2 2; }
.pthumb.plan text { font-family: inherit; font-size: 8px; fill: var(--subtle); } /* a mark, sized to its box */
.wt-card.row .pthumb.plan text { display: none; }
/* Nothing made yet: said, not drawn as a mark. */
.pthumb.empty { align-items: center; justify-content: center; }
.pthumb.empty span { font-size: var(--t-body-xs-s); color: var(--subtle); }
.wt-card.row .pthumb.empty span { display: none; }

#dashboard .pcat {
  align-self: flex-start; font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; border: 1px solid var(--border);
  background: var(--color-surface-raised); color: var(--subtle); padding: 1px 6px;
}
/* Categories never wear the accent: that belongs to the primary action, and
   never wear green or amber: those mean success and warning everywhere else
   in this app, and a category is not a severity. */
#dashboard .pcat.c2 { color: var(--text); border-color: var(--border-strong); }
#dashboard .pcat.c3 { color: var(--muted); border-color: var(--border-strong); }
#dashboard .pcat.c4 { color: var(--muted); border-color: var(--border-strong);
                      background: var(--tint-2); }

/* One column below the split point: a sticky 30% column that is 30% of a
   phone is not orientation, it is a stripe. */

/* ══════════════════════════════════════════════
   Prompt Library

   The lists' shell. A card shows an extract, not the whole prompt: a
   prompt is longer than any card, and a wall of text is unreadable at a
   glance. The full wording opens in a dialog. Scoped under #prompts so
   the short names cannot leak or be overridden.
══════════════════════════════════════════════ */
/* The library is a section of the Foundry's main, which scrolls as a
   page: its shell has no height of its own and its grid does not
   scroll inside it. */
#prompts .wf-shell { height: auto; }
#prompts .wf-row, #prompts .wf-grid { overflow: visible; }
#prompts .wf-head { padding-top: 6px; }
/* The builder sits above the list: it is what New prompt opens. */
#prompts .prompt-builder-panel { margin-bottom: 12px; }
#prompts .prompt-builder-panel[hidden] { display: none; }

#prompts .pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px;
}
#prompts .pcard {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--transition), transform var(--transition);
}
/* Keep: a toggle in the corner, a tick that fills when the prompt is in
   your system. Outside the face, which is a button of its own. */
#prompts .pkeep {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--subtle);
  transition: all var(--transition);
}
#prompts .pkeep svg { opacity: .45; }
#prompts .pkeep:hover { border-color: var(--color-primary); color: var(--brand-text); }
#prompts .pkeep:hover svg { opacity: 1; }
#prompts .pkeep[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); }
#prompts .pkeep[aria-pressed="true"] svg { opacity: 1; }
#prompts .pkeep:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#prompts .pkept { font-size: var(--t-caption-s); font-weight: 600; color: var(--brand-text); }
#prompts .pcard:hover { border-color: var(--color-primary); transform: translateY(-1px); }
#prompts .pcard.on { border-color: var(--color-primary); }
/* align-items:stretch is not optional: Chrome's UA stylesheet centres every
   button's children, which shrink-wraps each line of a flex-column card. */
#prompts .pface {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 100%; text-align: left; padding: 12px; cursor: pointer;
  background: none; border: 0; font: inherit; color: inherit;
}
#prompts .pface:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
#prompts .ptop { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding-right: 28px; }
#prompts .ptop b {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#prompts .ptag {
  margin-left: auto; flex: none; font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--border); color: var(--subtle);
  background: var(--color-surface-raised);
}
/* The extract: three lines and an ellipsis, so every card is the same
   height and the grid reads as a list rather than a ransom note. */
#prompts .pextract {
  font-size: var(--t-caption-s); line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.55em * 3);
}
#prompts .pfoot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 12px 12px; margin-top: auto;
}

#prompts .pedited { font-size: var(--t-caption-s); color: var(--color-warning); }
/* The ⋯, at the foot's end: the same menu every object carries. Always
   visible, never hover-revealed, so it can be found without hunting. */
#prompts .pmenu {
  margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--subtle); font-size: var(--t-title-md-s); line-height: 1; transition: all var(--transition);
}
#prompts .pmenu:hover, #prompts .pmenu.on { border-color: var(--border-strong); color: var(--text); }
#prompts .wl-tail { display: flex; justify-content: flex-end; padding-top: 8px; }

/* The viewer. Sized to its content and capped, so a long prompt scrolls
   inside the dialog rather than growing it past the window. */
#promptViewModal .modal-box { max-width: 720px; width: min(720px, calc(100vw - 48px)); }
#promptViewModal .modal-head .ptag { margin-left: 8px; }
.pv-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px;
           max-height: min(56vh, 520px); overflow: auto; }
.pv-note { margin: 0; font-size: var(--t-caption-s); color: var(--muted); }
.pv-text {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: var(--t-mono-md-s); line-height: 1.65;
  color: var(--text); background: var(--tint-2);
  border: 1px solid var(--border); padding: 12px;
}
.pv-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  background: var(--color-surface-raised);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ══════════════════════════════════════════════
   The spine: the ledger drawn

   A vertical rule with one station per receipt. Stale is carried by the
   station whose input moved, never by the whole project, because that is
   what the edges actually say.
══════════════════════════════════════════════ */
.ide-spine:empty { display: none; }
.ide-spine {
  border: 1px solid var(--border); background: var(--surface);
  padding: 12px 12px; margin-bottom: 8px; flex: none;
  max-height: 34%; overflow-y: auto;
}

.sp-title {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--muted);
}
/* Folded to its line: the count and what needs a look stay in view, the
   rows open on demand. The old spine spent a third of the column on
   every run before the thread began. */
.sp-fold > summary {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; flex-wrap: wrap;
}
.sp-fold > summary .sp-title { white-space: nowrap; }
.sp-fold > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::before { content: "▸"; font-size: var(--t-caption-s); color: var(--subtle); align-self: center; }
.sp-fold[open] > summary::before { content: "▾"; }
.sp-fold[open] > summary { margin-bottom: 8px; }
.sp-fold > summary:hover .sp-title { color: var(--text); }
.sp-fold > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sp-warn {
  margin-left: auto; font-size: var(--t-caption-s); color: var(--color-warning);
  border: 1px solid var(--color-warning); padding: 1px 6px;
  background: none; font: inherit; font-size: var(--t-caption-s); cursor: pointer;
}
.sp-warn:disabled { cursor: default; opacity: .7; }
.wb-rec { border: 1px solid var(--border); background: var(--tint-2); padding: 8px 12px; margin-top: 8px; }
.wb-rec-seq { margin: 6px 0 8px; padding-left: 16px; }
.wb-rec-seq li { margin-bottom: 6px; line-height: 1.45; }
.wb-rec-seq li > span { display: block; font-size: var(--t-body-sm-s); color: var(--muted); }
.wb-rec-seq .wb-recphase { display: inline; margin-left: 6px; font-size: var(--t-body-xs-s); color: var(--subtle); }
.wb-rec-seq .wb-recreuse { color: var(--green-text); }
.wb-rec-seq .wb-recwarn { color: var(--color-warning); }
.wb-rec-seq .wb-recnote { color: var(--subtle); }
.wb-recsay { font-size: var(--t-body-sm-s); color: var(--muted); margin-left: 8px; }
.wb-recbudget {
  width: 3.5em; font: inherit; font-size: var(--t-body-sm-s); color: inherit;
  background: var(--surface); border: 1px solid var(--border); padding: 1px 4px; text-align: right;
}
.sp-impact { margin: 0 0 12px; padding: 8px 8px; border: 1px solid var(--border); background: var(--tint-2); }
.sp-impact-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px dashed var(--border); }
.sp-impact-row:first-child { border-top: 0; padding-top: 0; }
.sp-impact-row > b { font-size: var(--t-caption-s); }
.sp-list { list-style: none; margin: 0; padding: 0 0 0 4px; }
.sp-row {
  position: relative; display: flex; gap: 8px; padding: 0 0 12px 12px;
  border-left: 1px solid var(--border);
}
.sp-row:last-child { border-left-color: transparent; padding-bottom: 0; }
/* The body is a button now, because the row opens its run. It has to keep
   looking like the text it was. */
.sp-row .sp-body {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  border: 0; background: none; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.sp-row .sp-body:hover .sp-top b { color: var(--brand-text); }
.sp-row .sp-body:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sp-dot {
  position: absolute; left: -4px; top: 4px; width: 7px; height: 7px;
  background: var(--border-strong); border: 1px solid var(--surface);
}
.sp-row.feeds .sp-dot { background: var(--color-success); }
.sp-row.stale .sp-dot { background: var(--color-warning); }
.sp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-top { display: flex; align-items: baseline; gap: 8px; }
.sp-top b { font-size: var(--t-caption-s); font-weight: 600; color: var(--text); }
.sp-cost { font-size: var(--t-caption-s); color: var(--subtle); font-variant-numeric: tabular-nums; }
.sp-made { font-size: var(--t-caption-s); color: var(--muted); line-height: 1.45; }
.sp-made.muted { color: var(--subtle); font-style: italic; }
.sp-note { font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.45; }
/* What somebody signed at a gate. Carried in the text colour, not the
   subtle one: a decision is the most load-bearing thing on the row. */
.sp-signed {
  font-size: var(--t-caption-s); color: var(--color-text); line-height: 1.45;
  font-weight: 600;
}
.sp-row.stale .sp-note { color: var(--color-warning); }
.sp-avail {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5;
}

/* ══════════════════════════════════════════════
   Quick Run

   The catalogue, in the lists' shell. It was a two-column page: a
   column of copy about the two routes on the left, the methods on the
   right. Scoped under #quickrun for the same reason the Projects page
   is: the names are generic and this stylesheet already owns several.
══════════════════════════════════════════════ */
#quickrun .qgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px;
}
/* align-items:stretch is not optional: Chrome's user agent stylesheet sets
   align-items:center on every button, which shrink-wraps and centres each
   line of a flex-column card. */
#quickrun .qcard {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  text-align: left; padding: 12px; cursor: pointer; font: inherit;
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--surface); color: var(--text);
  transition: border-color var(--transition), transform var(--transition);
}
#quickrun .qcard:hover { border-color: var(--color-primary); transform: translateY(-1px); }
#quickrun .qcard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
#quickrun .qtop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#quickrun .qicon { color: var(--brand-text); font-size: var(--t-title-md-s); line-height: 1; flex: none; }
#quickrun .qtop b {
  font-size: var(--t-label-sm-s); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#quickrun .qmode {
  margin-left: auto; flex: none; font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--subtle);
}
#quickrun .qgist { font-size: var(--t-caption-s); line-height: 1.5; color: var(--muted); }
#quickrun .qfoot {
  margin-top: auto; padding-top: 4px; font-size: var(--t-caption-s); color: var(--subtle);
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  #quickrun .qcard:hover { transform: none; }
}

/* ══════════════════════════════════════════════
   wt-state: the one state block

   Form carries the state, not colour alone. A dashed edge means nothing is
   there; a solid edge with a left rule means something happened. That way
   the four states are still distinguishable at a glance in greyscale, and
   to anyone who does not see the red.
══════════════════════════════════════════════ */
/* id-scoped: a later bare .modal-box rule beats a bare .wtc-box at equal
   specificity, which is how this sheet came out 520px wide. */
#wtConfirm .modal-box { max-width: 460px; width: min(460px, calc(100vw - 48px)); }
.wtc-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.wtc-body p { margin: 0; font-size: var(--t-body-sm-s); line-height: 1.6; color: var(--text); }
.wtc-note { color: var(--muted) !important; }
/* What the feature will become, said once, quietly, so the interim shape
   does not read as the final one. */
.wtc-later {
  color: var(--muted) !important; font-size: var(--t-caption-s) !important;
  border-left: 2px solid var(--border); padding: 8px 0 8px 8px;
}
.wtc-field { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.wtc-field span { font-size: var(--t-caption-s); color: var(--muted); }
.wtc-field input {
  height: 38px; padding: 0 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-body-xs-s);
}
.wtc-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.wtc-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  background: var(--color-surface-raised);
  display: flex; gap: 8px; justify-content: flex-end;
}

.wt-state {
  grid-column: 1 / -1;
  border: 1px dashed var(--color-border); border-radius: var(--r-sm);
  padding: 44px 24px; text-align: center;
}
.wt-state-title  { margin: 0 0 4px; font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.wt-state-note   { margin: 0 auto; max-width: 56ch; font-size: var(--t-body-sm-s);
                   line-height: 1.6; color: var(--color-text-muted); }
.wt-state-detail {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s);
  color: var(--muted); word-break: break-all;
}
.wt-state-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* Inside a frame that has a border of its own, or on the canvas, the
   state is the content, not a box within a box. */
.wr-frame .wt-state, .ide-frame .wt-state, .ide-stage .wt-state { border: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ide-stage .wt-state { height: auto; max-width: 480px; }
#craftList .wt-state { margin: 16px 0; }

/* Something went wrong is not the same shape as nothing is here. */
.wt-state.is-error, .wt-state.is-partial {
  border-style: solid; border-color: var(--border);
  border-left-width: 2px; text-align: left; padding: 24px;
}
.wt-state.is-error   { border-left-color: var(--color-error);
                       background: rgba(var(--rgb-error), .05); }
.wt-state.is-partial { border-left-color: var(--color-warning);
                       background: rgba(var(--rgb-warning), .05); }
.wt-state.is-error .wt-state-title { color: var(--color-error); }
.wt-state.is-error .wt-state-note,
.wt-state.is-partial .wt-state-note { margin: 0; max-width: 68ch; }
.wt-state.is-error .wt-state-acts,
.wt-state.is-partial .wt-state-acts { justify-content: flex-start; }

/* Loading says how much is coming by drawing that many bars. */
.wt-state.is-loading { padding: 28px 24px; }
.wt-state-shimmer { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin: 0 auto 16px; }
.wt-state-shimmer i {
  display: block; height: 12px;
  background: linear-gradient(90deg, var(--color-surface-raised) 25%,
              var(--color-border) 50%, var(--color-surface-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}
.wt-state-shimmer i:nth-child(2) { animation-delay: .12s; }
.wt-state-shimmer i:nth-child(3) { animation-delay: .24s; }
.wt-state-shimmer i:nth-child(4) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .wt-state-shimmer i { animation: none; background: var(--color-border); opacity: .5; }
}

/* Settings, in the corner with the plan pill: the same height, the
   same border, one cluster. */
.shell-gear {
  height: var(--h-control); width: var(--h-control); display: grid; place-items: center; padding: 0; flex: none;
  border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface);
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.shell-gear svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
                  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shell-gear:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 900px) {
  .prail { flex-direction: row; top: var(--chrome-h); bottom: auto; width: 100%;
           height: 56px; border-right: 0; border-bottom: 1px solid var(--border);
           padding: 6px 12px; }
  .prail .sep { display: none; }
}
.shell-tab {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--t-label-sm-s); font-weight: var(--t-label-sm-w);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; transition: all var(--transition);
}
.shell-tab:hover { color: var(--text); background: var(--tint-2); }
.shell-tab.on { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand-text); }

.shell-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.shell-model {
  display: flex; align-items: center; gap: var(--sp-2); height: var(--h-control);
  font-size: var(--t-caption-s); color: var(--text-secondary);
  border: 1px solid var(--border-hairline); background: var(--bg-surface);
  border-radius: var(--r-md); padding: 0 var(--sp-3); cursor: pointer;
  transition: all var(--transition); max-width: 260px;
}
.shell-model:hover { border-color: var(--border-strong); color: var(--text); }
.shell-model span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-model i {
  width: 7px; height: 7px; border-radius: 50%; flex: none; display: block;
  background: var(--subtle);
}
.shell-model i.live { background: var(--green); }
.shell-gear {
  width: var(--h-control); height: var(--h-control); border-radius: var(--r-md); flex: none;
  border: 1px solid var(--border-hairline); background: var(--bg-surface); color: var(--text-muted);
  cursor: pointer; font-size: var(--t-body-sm-s); transition: all var(--transition);
}
.shell-gear:hover { border-color: var(--border-strong); color: var(--text); }

/* Routes share the frame below the shell */
.app      { margin-top: var(--chrome-h); margin-left: var(--rail-w);
            height: calc(100vh - var(--chrome-h)); }
@media (max-width: 900px) {
  .app { margin-left: 0; margin-top: calc(var(--chrome-h) + 56px); }
  /* the rail lies down here, so the overlays follow it rather than indenting
     76px from a rail that is no longer on the left */
  .studio, .dashboard { inset: calc(var(--chrome-h) + 56px) 0 0 0; }
  
}
/* No `top` here. It restated --chrome-h, which .studio (:3863) and
   .dashboard (:3616) already set through `inset`, and being later in the
   file it overrode the 56px the max-width:900px block above reserves for
   the horizontal rail. */
.studio   { z-index: 700; }
.dashboard{ z-index: 700; }

/* Inline route to Settings from an error: errors used to name it with no way there */
.inline-settings-link {
  display: inline-block; margin-top: var(--sp-2);
  font-size: var(--t-caption-s); font-weight: 600; color: var(--brand-text);
  background: var(--surface); border: 1px solid var(--brand-border);
  border-radius: var(--r-md); padding: var(--sp-1) var(--sp-3); cursor: pointer;
}
.inline-settings-link:hover { background: var(--brand-dim); }

/* New-run reads as a word now, not a glyph */
.ide-brief-toggle {
  font-size: var(--t-caption-s); font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 2px var(--sp-2); background: var(--surface);
}
.ide-brief-toggle:hover { border-color: var(--border-strong); color: var(--text); }

.ide-vtab-meta { gap: var(--sp-2); }

.shellbar { flex-wrap: nowrap; }
.shell-tab { width: auto; flex: none; white-space: nowrap; }

/* ══════════════════════════════════════════════
   Readiness panel

   The meter read a bare percentage on every screen with no
   way to learn what moved it. A number you cannot act on is
   decoration, and one stuck near zero all session actively
   discourages. It is now a control that answers "what is
   left", phrased as remaining work and deep-linked.
══════════════════════════════════════════════ */
.hero-setup {
  cursor: pointer; border: 1px solid transparent; background: transparent;
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  transition: all var(--transition); text-align: left;
}
.hero-setup:hover { border-color: var(--border); background: var(--surface); }
.setup-caret { font-size: var(--t-caption-s); color: var(--subtle); margin-left: var(--sp-1); }

.readiness {
  display: none; position: absolute; right: 0; top: calc(100% + var(--sp-2));
  width: 340px; max-height: 60vh; overflow-y: auto; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl); box-shadow: 0 12px 34px rgba(var(--rgb-black), .13);
  padding: var(--sp-3);
}
.readiness.open { display: block; }
.readiness-head {
  font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w);
  margin: 0 0 2px;
}
.readiness-sub { font-size: var(--t-caption-s); color: var(--muted); margin: 0 0 var(--sp-3); }
.readiness-group {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
  margin: var(--sp-3) 0 var(--sp-2);
}
.readiness-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-2); border-radius: var(--r-2xl);
  font-size: var(--t-body-sm-s); line-height: 1.45;
}
.readiness-item[data-goto] { cursor: pointer; }
.readiness-item[data-goto]:hover { background: var(--tint-2); }
.readiness-item i {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 2px;
  display: grid; place-items: center; font-size: var(--t-caption-s); font-weight: 700; color: var(--color-primary-fg);
  font-style: normal;
}
.readiness-item.done i, .readiness-item.pass i { background: var(--green); }
.readiness-item.todo i { background: transparent; border: 1.5px dashed var(--border-strong); }
/* Three answers, three marks. A failed measurement and one that could
   not be taken are not the same colour, because they are not the same
   thing: one says fix this, the other says nothing yet. */
.readiness-item.fail i { background: var(--color-error); }
.readiness-item.unmeasured i { background: var(--muted); }
.readiness-item.done span { color: var(--muted); }
.readiness-item span > small { display: block; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.4; }
.readiness-item.fail .readiness-finding { color: var(--text); }
.readiness-item.fail .readiness-finding::before { content: "· "; color: var(--muted); }
/* A finding's fix, and Fix all: text actions, never a second primary. */
.readiness-fix {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--text); text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.readiness-fix:hover { color: var(--text); }
.readiness-item .readiness-fixall { margin-top: var(--sp-1); }
/* Validate: the findings with their fixes, for one sign-off. */
.dsv-lead { margin: 0 0 16px; font-size: var(--t-body-sm-s); color: var(--text); line-height: 1.5; }
.dsv-lead.warn { color: var(--muted); }
.dsv-group + .dsv-group { margin-top: 16px; }
.dsv-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.dsv-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--t-caption-s); color: var(--muted); line-height: 1.45; }
.dsv-row:first-child { border-top: 0; }
.dsv-row input { margin: 2px 0 0; flex: none; }
.dsv-row b { display: block; color: var(--text); font-weight: 600; }
.dsv-row small { display: block; margin-top: 2px; font-size: var(--t-caption-s); }
.dsv-dot { flex: none; width: 12px; height: 12px; margin-top: 2px; border-radius: 50%; border: 1.5px dashed var(--border-strong); }
.dsv-fix { display: block; margin-top: 4px; color: var(--text); }
.dsv-row .readiness-fix { display: inline-block; margin-top: 4px; font-weight: 400; }
.dsv-say { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
/* The criterion a finding fails, named so it can be looked up. */
.readiness-wcag { font-weight: 600; font-size: var(--t-caption-s); letter-spacing: 0.02em; color: var(--muted); }

/* A plan still to run, as a card in the project's thread: its steps
   with their states, and the way on. */
.wf-steps { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-body-sm-s); }
.wf-steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); }
.wf-steps li i { font-style: normal; width: 16px; text-align: center; color: var(--muted); }
.wf-steps li.done i { color: var(--green); }
.wf-steps li.skipped, .wf-steps li.skipped i { color: var(--muted); text-decoration: line-through; }
.wf-steps li.todo i { color: var(--brand-text); }
.readiness-go { margin-left: auto; font-size: var(--t-caption-s); font-weight: 600; color: var(--brand-text); flex: none; }
.readiness-empty {
  padding: var(--sp-3); text-align: center; font-size: var(--t-body-sm-s);
  color: var(--green-text); background: var(--green-dim); border: 1px solid var(--green-border);
  border-radius: var(--r-2xl);
}
.hero { position: relative; }

/* Workspace brief renders the composer's pills, sized for a 300px rail */
.ide-chips { gap: var(--sp-2); }
.ide-chips .stu-pill { padding: 2px var(--sp-2) 2px 2px; }
.ide-chips .stu-pill .ic { width: 22px; height: 22px; border-radius: var(--r-sm); font-size: var(--t-micro-s); }
.ide-chips .stu-pill .lab small { font-size: var(--t-micro-s); }
.ide-chips .stu-pill .lab b { font-size: var(--t-micro-s); }
.ide-chips .stu-pill:disabled { opacity: .55; cursor: default; }

.stu-linkstatus { padding: 0 16px 8px 36px; font-size: var(--t-caption-s); }
.stu-linkstatus:empty { display: none; }
.stu-linkstatus.ok  { color: var(--green-text); }
.stu-linkstatus.err { color: var(--brand-text); }
.stu-linkstatus:not(.ok):not(.err) { color: var(--muted); }

.ide-drift { color: var(--brand-text); border-color: var(--brand-border); }

/* ══════════════════════════════════════════════
   Slingshot PS Design System: component layer

   Tokens alone left the UI looking unchanged, because the components
   never adopted the system's own specs. The kit defines three button
   sizes and four variants; this app had grown nine ad-hoc heights
   (22/24/26/28/30/32/34/36/52) with hardcoded 8px radii and invented
   padding. Everything below snaps to the real spec.

   Source: _ds_bundle.js: Button SIZES/VARIANTS, Input SIZES, Card PAD,
   Badge SIZES. Values transcribed, not approximated.
══════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────
   sm 32px · 8/12 · 14px · radius-sm
   md 40px · 12/20 · 14px · radius-md
   lg 48px · 16/24 · 16px · radius-lg          */

/* ── Option cards ────────────────────────────
   The framework / CSS / platform choices are selections, not actions.
   An earlier sweep promoted the single-line ones to the lg BUTTON spec
   (16px type, radius-lg) while the two-line cards stayed at 13px: the
   same control in two voices. One spec for the whole family:
   48px row, radius-md, 14px/600 title, tinted primary when selected. */
.fw-btn, .ui-fw-grid .fw-btn {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-lg);
  font-size: var(--t-body-sm-s); font-weight: 600;
  border: 1px solid var(--color-border); background: transparent;
  color: var(--color-text-muted);
}
.fw-btn:hover:not(.incompat) {
  color: var(--color-text); border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
}
.fw-btn.active, .platform-btn.active {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.platform-btn { border-radius: var(--r-lg); font-size: var(--t-body-sm-s); font-weight: 600; }
.fw-desc { font-size: var(--t-caption-s); font-weight: 400; }

/* Icon-only controls stay square at the sm height. */
.catalog-remove-btn, .dc-remove-btn, .brand-remove-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-lg);
  border: 1px solid transparent; background: transparent;
  color: var(--color-text-muted);
  transition: background var(--duration-base) var(--easing-default);
}
.catalog-remove-btn:hover, .dc-remove-btn:hover, .brand-remove-btn:hover {
  background: var(--color-surface-raised); color: var(--color-text);
}

/* ── Inputs ──────────────────────────────────
   sm 32px · 10px · 13px · radius-sm
   md 40px · 12px · 14px · radius-md           */
/* ── One field frame ──
   A frame means "type here": every text field, select and textarea is
   framed by this one rule, md 36px to sit beside a button, and nothing
   else on a form is boxed. */
input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], select, textarea, .typescale-input, .layout-input, .custom-val-input, .logo-meta-input, .font-select, .pb-input, .pb-select, .pb-textarea, .stu-linkinput, .settings-input {
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--t-body-sm-s);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-sizing: border-box;
  transition: border-color var(--duration-base) var(--easing-default),
              box-shadow var(--duration-base) var(--easing-default);
}
textarea, .pb-textarea, .stu-input, .prompt-edit-textarea {
  height: auto; padding: 8px 12px; line-height: 1.55;
}
/* The narrow numeric fields in the type and layout editors are the system's
   sm input, not a size of their own. */
.typescale-input, .custom-val-input {
  height: 32px; padding: 0 8px;
  font-size: var(--t-body-sm-s); border-radius: var(--r-lg);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled),
.typescale-input:hover, .layout-input:hover {
  border-color: var(--color-border-strong);
}
input:focus, select:focus, textarea:focus,
.typescale-input:focus, .layout-input:focus, .custom-val-input:focus,
.logo-meta-input:focus, .font-select:focus, .pb-input:focus, .pb-select:focus, .pb-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
input::placeholder, textarea::placeholder { color: var(--color-text-subtle); }
/* Colour swatches keep their own square footprint. */
input[type="color"] { height: 20px; padding: 0; border-radius: var(--r-xs); }
input[type="checkbox"], input[type="radio"] { height: auto; }

/* The system's focus ring, everywhere else. */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Cards ───────────────────────────────────
   padding sm 14/16 · md 18/20 · lg 22/24      */
.card, .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: 16px 20px;
}
.card.interactive:hover {
  border-color: var(--color-primary);
}

/* ── Badges ──────────────────────────────────
   sm 18px · 6px · 11px · md 22px · 8px · 12px */
.badge, .chip, .pill, .ide-ready-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  font-size: var(--t-micro-s);
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.badge.sm, .chip.sm { height: 18px; padding: 0 6px; font-size: var(--t-micro-s); }

/* Small chrome controls: the shell bar, step editors and mode toggles had
   grown 27/30/35px heights. The system has one small control size. */
.shell-tab, .step-edit, .cmp-mode, .hero-setup,
.stu-pill, .ide-vtab {
  min-height: 32px;
  border-radius: var(--r-lg);
  /* Was --font-size-sm (13px), a step above every other button in the app. */
  font-size: var(--t-micro-s);
  font-weight: 600;
}
/* The top bar's own controls are WtAppFrame's: 30px at the 7px corner
   (docs/design/instrument-spec.md, 3.1), not the 32px small control. */
.shell-model, .shell-gear { min-height: var(--h-control); border-radius: var(--r-md); font-weight: 400; }
.shell-gear, .hero-setup { display: inline-flex; align-items: center; }

/* ══════════════════════════════════════════════
   Slingshot PS: desktop application shell

   Matched to ui_kits/desktop_app: a 256px surface sidebar with grouped
   navigation, 34px single-line items, primary-subtle active state, and a
   56px header. Wind Tunnel's own sidebar had two-line 53px items with
   descriptions, which is a different pattern to the one the system ships.
   Descriptions move to tooltips so nothing is lost.

   Source: _ds_bundle.js Sidebar, AppShell.jsx header.
══════════════════════════════════════════════ */

.app > .sidebar {
  flex: 0 0 var(--app-sidebar-width);
  width: var(--app-sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}

/* Brand block sits in the header band, matching the kit's sidebar header. */
.app > .sidebar > .brand {
  height: var(--app-header-height);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  margin: 0;
}
.app > .sidebar > .brand .brand-sub { display: none; }
.app > .sidebar > .brand h1 {
  font-size: var(--t-body-sm-s); font-weight: 600; margin: 0;
  letter-spacing: -0.01em;
}

.app > .sidebar > nav {
  flex: 1; overflow-y: auto;
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}

/* Group heading: 11px, 600, .06em, uppercase, subtle. */
.nav-group {
  margin: 16px 0 4px 8px;
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--color-text-subtle);
}
.nav-group:first-child { margin-top: 0; }

/* Nav item: 34px, single line, 13px, radius-sm. */
.app > .sidebar nav .nav {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  width: 100%; position: relative;
  flex: 0 0 34px;   /* a column flex parent was shrinking these to 19px */
  height: 34px;
  padding: 0 8px;
  border: none;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--t-body-sm-s);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-base) var(--easing-default),
              color var(--duration-base) var(--easing-default);
}
.app > .sidebar nav .nav:hover { background: var(--color-surface-raised); color: var(--color-text); }
.app > .sidebar nav .nav.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}
/* Descriptions become tooltips: the kit's items are one line. */
.app > .sidebar nav .nav > span { display: none; }
.app > .sidebar nav .nav > strong {
  font-size: inherit; font-weight: inherit; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The completion dot stays pinned right, where the kit puts its count
   badges: it is a status signal, not an icon. */
.app > .sidebar nav .nav .nav-dot {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px dashed var(--color-border-strong);
  background: transparent;
}
.app > .sidebar nav .nav .nav-dot.done { background: var(--color-success); border: none; }
.app > .sidebar nav .nav .nav-dot.current { border-style: solid; border-color: var(--color-primary); }
.app > .sidebar nav .nav > strong { padding-right: 12px; }

/* Sidebar footer: avatar-style block, as the kit puts the user. */
.app > .sidebar .about-card {
  margin: 0; padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  border-radius: 0; background: transparent;
  flex-shrink: 0;
}
.app > .sidebar .about-desc { display: none; }
.app > .sidebar .about-logo {
  font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-text);
  gap: 8px;
}

/* Progress strip sits under the brand, quiet. */
.app > .sidebar .nav-progress { padding: 12px 16px 0; }

/* ── Header ──────────────────────────────────
   56px, surface, one border, content 0 20px.  */
.shellbar {
  height: var(--app-header-height);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
  padding: 0 var(--sp-5);
  gap: var(--sp-2);
}
.shell-tab {
  height: 32px; padding: 0 12px;
  border-radius: var(--r-lg);
  font-size: var(--t-body-sm-s); font-weight: 600;
  color: var(--color-text-muted);
  background: transparent; border: 1px solid transparent;
}
.shell-tab:hover { background: var(--color-surface-raised); color: var(--color-text); }
.shell-tab.on, .shell-tab.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
  border-color: transparent;
}

/* Content region: the kit uses 24px on the page background. */
.app > .main, .app > main, .content {
  background: var(--color-bg);
}

/* The kit marks the active item with tint and colour alone: no rail. */
.app > .sidebar nav .nav.active::before { display: none; }

/* ══════════════════════════════════════════════
   Page header + KPI rail: desktop_app patterns

   Source: ui_kits/desktop_app/DashboardScreen.jsx. The header is a
   breadcrumb, a 24px/600 title and a 14px muted line, with actions
   pushed right. The rail is a 4-up grid of small cards: an 11px
   uppercase label, a 28px/700 value, and a delta line.

   Wind Tunnel's hero ran a clamp(20-32px) title at weight 800 and
   -0.04em, with a red uppercase eyebrow: louder than the kit and off
   its scale in both size and tracking.
══════════════════════════════════════════════ */

.hero { gap: 24px; margin-bottom: 20px; }
.hero-text { display: flex; flex-direction: column; gap: 6px; }

/* Eyebrow becomes a breadcrumb: muted, not a brand-red shout. */
.hero-text small {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 0;
  font-size: var(--t-caption-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}
/* The section name is set by JS; the parent crumb is constant. */
.hero-text h2 {
  margin: 0;
  font-size: var(--t-display-md-s);
  font-weight: var(--t-display-md-w);
  letter-spacing: -0.02em;
  line-height: var(--t-display-md-lh);
}
.hero-text p {
  margin: 0;
  font-size: var(--t-body-sm-s);
  color: var(--color-text-muted);
  line-height: var(--t-body-sm-lh);
  max-width: 62ch;
}

/* ── KPI rail ─────────────────────────────── */
/* Five, not the kit's four: setup and readiness are two figures now,
   and folding them back into one card is the overclaim this replaced. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: 12px 16px;              /* the kit's Card size="sm" */
}
.kpi-label {
  margin: 0;
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--color-text-muted);
}
.kpi-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display-md-s);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.kpi-note {
  margin: 0;
  font-size: var(--t-caption-s);
  color: var(--color-text-subtle);
}
.kpi-note.up { color: var(--color-success); }

/* The readiness KPI is the trigger for the "what is left" panel, so the
   duplicate meter in the header comes out: the kit puts actions there,
   not a second copy of a number already in the rail. */
.hero .hero-setup { display: none; }
.kpi-action {
  text-align: left; cursor: pointer;
  font: inherit;
  transition: border-color var(--duration-base) var(--easing-default);
}
.kpi-action:hover { border-color: var(--color-primary); }

/* ── Page-header actions ─────────────────────
   ToggleGroup: 2px track on a raised surface, 32px buttons at 13px/500,
   selected lifted onto the surface colour with shadow-xs.
   Source: _ds_bundle.js ToggleGroup.                                  */
.hero-actions {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.toggle-group {
  display: inline-flex;
  padding: 2px; gap: 2px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.toggle-group button {
  height: 32px; padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--t-body-sm-s);
  font-weight: 600;
  border: none;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}
.toggle-group button:hover { color: var(--color-text); }
.toggle-group button.on {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}
/* The one primary action on the page. */
.hero-actions .hero-cta { height: 32px; padding: 0 12px; }

@media (max-width: 860px) {
  .hero { flex-wrap: wrap; }
  .hero-actions { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════
   Data table + tabs with counts

   Source: ui_kits/desktop_app/ListScreen.jsx (th/td) and _ds_bundle.js
   Tabs (line variant). The table sits in a card with zero padding so
   the radius clips the rows, which is how the kit does it.
══════════════════════════════════════════════ */
.inventory { margin-top: 24px; }

/* ── Tabs, line variant ─────────────────────── */
.inv-tabs {
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.inv-tab {
  height: 36px; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: var(--t-body-xs-s);
  font-weight: 400;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-base) var(--easing-default);
}
.inv-tab:hover { color: var(--color-text); }
.inv-tab.on {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}
.inv-count {
  font-size: var(--t-caption-s);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ── Table ──────────────────────────────────── */
.inv-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: 0;
  overflow: hidden;
}
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: var(--t-label-sm-s);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.inv-table td {
  padding: 12px;
  font-size: var(--t-body-sm-s);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.inv-table tbody tr:last-child td { border-bottom: none; }
.inv-table tbody tr { cursor: pointer; transition: background var(--duration-fast) var(--easing-default); }
.inv-table tbody tr:hover { background: var(--color-surface-raised); }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table .muted { color: var(--color-text-muted); }
.inv-table .strong { font-weight: 400; }
.inv-none, .inv-table td.inv-none {
  padding: 40px 12px; text-align: center;
  color: var(--color-text-subtle); cursor: default;
}

/* Status badge: the kit's small dot badge. */
.inv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 18px; padding: 0 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  font-size: var(--t-micro-s);
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.inv-badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-subtle);
}
.inv-badge.ok { color: var(--color-success); border-color: var(--color-success-subtle); background: var(--color-success-subtle); }
.inv-badge.ok i { background: var(--color-success); }

/* ══════════════════════════════════════════════
   Toast, Dialog, DropdownMenu: kit specs

   Source: _ds_bundle.js Toast / Dialog / DropdownMenu.
══════════════════════════════════════════════ */

/* ── Toast ───────────────────────────────────
   14px padding, radius-md, shadow-md, 300-380px, tinted per severity. */
.toast {
  position: fixed; right: 24px; bottom: calc(var(--sticky-h) + 16px);
  display: flex; align-items: flex-start; gap: 12px;
  min-width: 300px; max-width: 380px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 1px;                 /* the kit tints, it does not stripe */
  border-radius: var(--r-4xl);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--duration-slow) var(--easing-default),
              transform var(--duration-slow) var(--easing-default);
  z-index: 900;   /* above the rail (780) and the shellbar (800) */
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-icon { font-size: var(--t-body-sm-s); line-height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast-title { margin: 0; font-size: var(--t-body-sm-s); font-weight: 600; }
.toast-desc  { margin: 0; font-size: var(--t-caption-s); color: var(--color-text-muted); }
.toast-close {
  border: none; background: transparent; color: var(--color-text-muted);
  cursor: pointer; font-size: var(--t-body-sm-s); line-height: 1; padding: 0; flex-shrink: 0;
  width: 20px; height: 20px; display: inline-grid; place-items: center;
  border-radius: var(--r-md);
}
.toast-close:hover { color: var(--color-text); }
/* One thing the toast offers to do about it (batch 2): a quiet button, never the screen's primary. */
.toast-act {
  flex-shrink: 0; align-self: center; height: 26px; padding: 0 var(--sp-25); border: 1px solid var(--color-border);
  border-radius: var(--r-md); background: transparent; color: var(--color-text); font: inherit; font-size: var(--t-caption-s); cursor: pointer;
}
.toast-act:hover { background: var(--tint-2); }

.toast.ok   { background: var(--color-success-subtle); border-color: var(--color-success); }
.toast.ok   .toast-icon, .toast.ok   .toast-title { color: var(--color-success); }
.toast.err  { background: var(--color-error-subtle);   border-color: var(--color-error); }
.toast.err  .toast-icon, .toast.err  .toast-title { color: var(--color-error); }
.toast.warn { background: var(--color-warning-subtle); border-color: var(--color-warning); }
.toast.warn .toast-icon, .toast.warn .toast-title { color: var(--color-warning); }
.toast.info { background: var(--color-info-subtle);    border-color: var(--color-info); }
.toast.info .toast-icon, .toast.info .toast-title { color: var(--color-info); }

/* ── Dialog ──────────────────────────────────
   radius-xl, 24px padding, 16px gap, md caps at 520px. */
.modal-box {
  border-radius: var(--r-4xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  padding: 24px;
  width: 520px; max-width: calc(100vw - 48px);
  display: flex; flex-direction: column; gap: 16px;
}
.modal-box.sm { width: 420px; }
.modal-box.lg { width: 680px; }
.modal-box h2 {
  margin: 0; font-size: var(--t-title-lg-s); font-weight: 600; letter-spacing: 0;
}

/* Footer actions sit right, as the kit puts them. */
.modal-box .modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── DropdownMenu ────────────────────────────
   radius-sm, 4px padding, shadow-md, items 7/8 at 13px. */
.stu-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4xl);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 200px;
}
.stu-menu button, .stu-menu [data-pick] {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--t-body-sm-s);
  text-align: left;
  border: none;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.stu-menu button:hover, .stu-menu [data-pick]:hover { background: var(--color-surface-raised); }
.stu-menu .danger { color: var(--color-error); }
.stu-menu-label {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--color-text-subtle);
  padding: 6px 8px 4px;
}
.stu-menu-sep, .stu-menu hr {
  height: 1px; margin: 4px 0; border: none;
  background: var(--color-border);
}
.stu-menu .shortcut {
  font-size: var(--t-mono-sm-s); color: var(--color-text-subtle);
  font-family: var(--font-mono); margin-left: auto;
}

/* ══════════════════════════════════════════════
   Shell identity and routes

   The mark alone did not say what the product is, and the three routes
   read as buttons because they were tinted pills. The product name now
   carries the identity and the routes take the kit's line-tab treatment,
   which is what they are: three views of one workspace, not actions.
══════════════════════════════════════════════ */
.shell-wordmark {
  flex: none;
  margin-right: var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--t-wordmark-s);
  letter-spacing: var(--t-wordmark-ls);
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.26em;
}
/* The mark is the weight contrast: light "Wind", set "Tunnel". No dot,
   no glyph, no motion graphic: the brand kit is explicit that the type
   alone is the mark. */
.shell-wordmark .wind   { font-weight: 600; color: var(--brand-text); }
.shell-wordmark .tunnel { font-weight: 600; color: var(--color-text); }

.proj-tabs {
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--color-border);
  margin: 20px 0 20px;
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

/* ══════════════════════════════════════════════
   Run cards

   The thread is a record of runs, not a transcript. Each card carries
   the settings the run used, what it produced, and what to do next so a variant is never separated from the model and design system
   that made it.
══════════════════════════════════════════════ */
.ide-thread { display: flex; flex-direction: column; gap: 12px; }

/* A brief is yours: tinted, aligned right, no speaker label needed. */
.ide-msg.you { align-self: flex-end; max-width: 88%; }
.ide-msg.you .ide-bub {
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  border-radius: var(--r-2xl);
  padding: 8px 12px;
}

.run-card {
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  background: var(--color-surface);
  overflow: hidden;
}
.run-card.running { border-color: var(--color-border-strong); }
.run-card.failed  { border-color: var(--color-error); background: var(--color-error-subtle); }

.run-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--t-caption-s);
  color: var(--color-text-muted);
}
.run-card.failed .run-head { background: transparent; border-bottom-color: var(--color-error); }
.run-head b {
  color: var(--color-text); font-weight: 600;
  font-size: var(--t-caption-s);
}
.run-chip {
  padding: 1px 6px; border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.run-chip.muted { color: var(--color-text-subtle); font-style: italic; }
.run-when { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

.run-body { padding: 12px 12px; display: flex; flex-direction: column; gap: 8px; }

.run-out { display: flex; gap: 6px; flex-wrap: wrap; }
.out-thumb {
  flex: 1 1 88px; min-width: 88px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xs);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--t-caption-s);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-default),
              background var(--duration-fast) var(--easing-default);
}
.out-thumb:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.out-thumb.on {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}
.out-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-flag { color: var(--color-warning); flex-shrink: 0; }
.out-thumb.pending { cursor: default; border-style: dashed; }
.out-thumb.pending i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  animation: run-spin 800ms linear infinite;
}
@keyframes run-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .out-thumb.pending i { animation: none; } }

/* ── Run steps: one row per planned call ──
   A stage string cannot describe four calls, and a failure has to be a
   row you can act on rather than a run that died. */
.run-steps { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
/* dot · label · [actions] · cost. The cost column is a fixed track so
   every price in the list lines up rather than trailing its own label. */
.run-step {
  display: grid; grid-template-columns: 7px 1fr auto auto; align-items: center;
  gap: 8px; font-size: var(--t-caption-s); color: var(--muted);
}
.run-step-cost { font-size: var(--t-caption-s); color: var(--subtle); white-space: nowrap; text-align: right; min-width: 34px; }
/* Free is the point being made, so it is the one that carries colour. */
.run-step-cost.free { color: var(--green); }
.run-step-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--border); border: 1.5px solid transparent;
}
.run-step.done   .run-step-dot { background: var(--green); }
.run-step.running .run-step-dot { background: var(--surface); border-color: var(--brand); animation: run-step-pulse 1.1s ease-in-out infinite; }
.run-step.failed .run-step-dot { background: var(--color-error); }
.run-step.skipped .run-step-dot { background: transparent; border-color: var(--border-strong); }
.run-step.done   .run-step-label { color: var(--text); }
.run-step.failed .run-step-label { color: var(--color-error); }
/* A step that finished and did not pass its required check. Done is
   execution; this is validation, and it wears its own colour so the two
   cannot be read as one. */
.run-step.held .run-step-dot { background: var(--color-warning); }
.run-step-held { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-sm);
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-warning); border: 1px solid currentColor; vertical-align: 1px; }
.run-step.skipped .run-step-label { text-decoration: line-through; opacity: .6; }
.run-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A craft step names the system and what was read from it, which does not
   fit one line of a 272px column. Method steps keep the single line: they
   carry Retry / Continue buttons on the same row. */
.run-steps.craft .run-step { align-items: start; }
.run-steps.craft .run-step-label { white-space: normal; overflow: visible; }
.run-steps.craft .run-step-dot { margin-top: 6px; }
.run-steps.craft .run-step-cost { margin-top: 1px; }
.run-step-acts { margin-left: auto; display: flex; gap: 4px; flex: none; }
.run-step-act {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--muted);
  padding: 1px 6px; font-size: var(--t-caption-s); font-weight: 400;
}
.run-step-act:hover { border-color: var(--brand); color: var(--brand-text); }
.run-step-act:disabled { opacity: .5; }
@keyframes run-step-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* What the run cost, closing it off. Green rule, because the sentence
   is mostly about what was free. */
.run-summary {
  margin: var(--sp-2) 0; padding: 4px 0 4px 12px;
  border-left: 2px solid var(--green);
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.55;
}
.run-partial {
  margin: 0 0 var(--sp-2); font-size: var(--t-caption-s); color: var(--color-warning);
}

.run-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.run-act {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--t-caption-s);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}
.run-act:hover { border-color: var(--color-primary); color: var(--color-primary); }
.run-error { margin: 0; font-size: var(--t-body-sm-s); color: var(--color-error); line-height: 1.55; }

/* ══════════════════════════════════════════════
   Settings: connection cards and the tools grid
══════════════════════════════════════════════ */
.conn-cards { display: flex; flex-direction: column; gap: 12px; }
.conn-card {
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  background: var(--color-surface);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.conn-head { display: flex; align-items: center; gap: 8px; }
.conn-title { font-size: var(--t-body-sm-s); font-weight: 600; }
.conn-title em {
  font-style: normal; font-weight: 400;
  font-size: var(--t-caption-s); color: var(--color-text-subtle);
  margin-left: 6px;
}

.conn-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.prov-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prov-addrow .settings-input { width: auto; flex: 1; min-width: 140px; }
.prov-keywrap { position: relative; flex: 2; min-width: 200px; display: flex; }
.prov-keywrap .settings-input { width: 100%; padding-right: 52px; }
.prov-keywrap .settings-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--color-text-muted);
  font-size: var(--t-caption-s); cursor: pointer; padding: 4px;
}

/* One row per thing you can connect, in either list. The mark and the name
   share a line, where it stands sits underneath in its own colour, and the
   dot on the right is the same fact again at a glance: nine of these are
   scanned, not read. */
.set-item {
  display: grid; grid-template-columns: var(--sp-4) minmax(0, 1fr) var(--sp-2);
  grid-template-areas: "logo name dot" "logo state dot";
  align-items: center; column-gap: var(--sp-2);
  padding: var(--sp-15) var(--sp-2); min-width: 0;
  border: 1px solid transparent; border-radius: var(--r-2xl);
  background: transparent; text-align: left; cursor: pointer;
  transition: background var(--duration-base) var(--easing-default);
}
.set-item:hover:not(.soon) { background: var(--color-surface-raised); }
.set-item.on { background: var(--color-primary-subtle); border-color: var(--color-primary); }
.set-item.soon { cursor: default; opacity: 0.5; }
.set-item .tool-logo { grid-area: logo; height: auto; }
.set-item .tool-name { grid-area: name; line-height: var(--t-label-sm-lh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-item .tool-state { grid-area: state; line-height: var(--t-caption-lh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-item .set-pip {
  grid-area: dot; width: var(--sp-2); height: var(--sp-2); border-radius: 50%;
  border: 1px solid var(--color-border-strong); background: transparent;
}
/* Drawn on the same 24 grid and 1.6 stroke as the rail and the composer,
   so nine marks share one optical size instead of nine font metrics. */
.set-item .tool-logo svg {
  width: var(--sp-4); height: var(--sp-4); display: block;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.set-item.connected .tool-state { color: var(--color-success); }
.set-item.connected .set-pip { background: var(--color-success); border-color: var(--color-success); }
.set-item.warn .tool-state { color: var(--color-warning); }
.set-item.warn .set-pip { background: var(--color-warning); border-color: var(--color-warning); }
.set-item.soon .set-pip { border-style: dashed; }
.tool-logo { line-height: 1; display: flex; align-items: center; }
.tool-name { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-text); }
.tool-state { font-size: var(--t-caption-s); color: var(--color-text-subtle); }

/* The right half has no frame of its own: the split already draws the line
   between the two. */
.tool-drawer { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Nothing picked yet: the right half explains the tab rather than sitting
   empty next to a list. A modifier, not a replacement: setting className
   here threw away .set-detail and with it the padding keeping the text off
   the divider. */
.set-empty { color: var(--color-text-muted); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }
.set-empty p { margin: 0; max-width: 46ch; }

/* The default every run without its own picker will use. */
.set-default {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.set-default:empty { display: none; }
.set-default b {
  font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-text); flex: none;
}
.set-default .set-default-pick {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
}
.set-default select { height: 28px; padding: 0 8px; font-size: var(--t-body-xs-s); max-width: 320px; }
.set-default small { font-size: var(--t-caption-s); color: var(--color-text-subtle); }

/* One route into a backend. A backend with two of these shows both, with
   the second introduced as the alternative it is. */
.set-way { display: flex; flex-direction: column; gap: var(--sp-2); }
.set-way + .set-way {
  padding-top: var(--sp-3); border-top: 1px solid var(--color-border);
}
.set-way > b { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-text); }
.set-way > p {
  margin: 0; max-width: 52ch;
  font-size: var(--t-caption-s); line-height: var(--t-body-sm-lh); color: var(--color-text-muted);
}
.set-way code {
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  padding: 0 var(--sp-1);
}
/* Setting a connection up is a second-level action, so both controls take
   the small step: the button says sm, and the field is the small field,
   the same 28px, so a field and its button sit on one line. */
.tool-drawer .settings-input {
  height: 28px; padding: 0 8px; font-size: var(--t-body-xs-s);
}
.tool-drawer .prov-keywrap { flex: none; width: 100%; }

/* ══════════════════════════════════════════════
   Settings v2: sectioned shell, stepper, drawers
══════════════════════════════════════════════ */
.settings-modal-box { width: 720px; max-width: calc(100vw - 48px); }
/* One height, whatever is in it. A dialog that grows and shrinks as you
   move between sections, or as a connection changes state under you,
   moves its own footer out from under the cursor. */
.settings-shell {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0;
  border: 1px solid var(--color-border); border-radius: var(--r-2xl);
  overflow: hidden; height: clamp(340px, 58vh, 500px);
}
/* Sections across the top. This is .inv-tabs, the underline tab the app
   already uses for exactly this job on the Inventory: one component, not a
   second one drawn to look like a folder. Only the things that make it sit
   inside a dialog rather than on a page are set here. The two sections that
   can be connected carry a dot rather than a count, because "something is
   connected" is the only thing worth knowing from up here. */
.settings-tabs {
  margin-bottom: 0; padding: 0 var(--sp-4);
  background: var(--color-bg); flex: none;
}
.set-dot { width: var(--sp-15); height: var(--sp-15); border-radius: 50%; background: transparent; }
.set-dot.on { background: var(--color-success); }

.settings-panes { background: var(--color-bg); min-height: 0; display: flex; }
.settings-pane {
  display: none; flex-direction: column; gap: var(--sp-3);
  flex: 1; min-height: 0; padding: var(--sp-4); overflow-y: auto;
}
.settings-pane.on { display: flex; }
/* Models and Tools are a list and a detail, so they own the whole pane and
   scroll in their own halves rather than as one long column. */
.settings-pane.split { padding: 0; overflow: hidden; gap: 0; }
.set-split { display: grid; grid-template-columns: 232px minmax(0, 1fr); flex: 1; min-height: 0; }
.set-list {
  border-right: 1px solid var(--color-border); background: var(--color-surface);
  padding: var(--sp-2); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-05);
}
.set-detail {
  padding: var(--sp-4); overflow-y: auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.settings-desc.mono { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
.settings-hint { font-size: var(--t-caption-s); color: var(--color-text-subtle); }

/* Stepper */
.sstep-row { display: flex; align-items: center; gap: 6px; }
.sstep { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-caption-s); color: var(--color-text-subtle); }
.sstep i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  display: grid; place-items: center;
  font-size: 9.5px; font-style: normal; font-weight: 700; /* a mark, sized to its box */
}
.sstep.done { color: var(--color-text-muted); }
.sstep.done i { background: var(--color-success); border-color: var(--color-success); color: var(--color-primary-fg); }
.sstep.now { color: var(--color-text); font-weight: 600; }
.sstep.now i { border-color: var(--color-primary); color: var(--color-primary); }
.sstep-line { width: 20px; height: 1px; background: var(--color-border); }

/* Install progress */
.sso-install { display: flex; flex-direction: column; gap: 8px; }
.prog-track { height: 6px; border-radius: var(--r-xs); background: var(--color-surface-raised); overflow: hidden; }
.prog-run { display: block; height: 100%; width: 38%; border-radius: var(--r-xs);
  background: var(--color-primary);
  animation: prog-slide 1.3s var(--easing-default) infinite; }
@keyframes prog-slide { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .prog-run { animation: none; width: 100%; opacity: .35; } }
.install-line {
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s);
  color: var(--color-text-subtle);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Waiting for SSO */
.sso-wait { display: flex; gap: 8px; align-items: center; font-size: var(--t-body-sm-s);
  color: var(--color-text-muted); line-height: 1.55; }
.sso-wait b { color: var(--color-text); }
.sso-spin { width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: run-spin 800ms linear infinite; }

/* Drawers */
.drawer-title { font-size: var(--t-body-sm-s); font-weight: 600;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.drawer-note { font-size: var(--t-caption-s); font-weight: 400; color: var(--color-text-subtle); }

.probe-note { border-radius: var(--r-2xl); padding: 8px 12px; font-size: var(--t-body-sm-s); line-height: 1.5; }
.probe-note.ok { background: var(--color-success-subtle); border: 1px solid var(--color-success); }
.probe-note.ok b { color: var(--color-success); }
.probe-note.warn { background: var(--color-warning-subtle); border: 1px solid var(--color-warning); }
.probe-note.warn b { color: var(--color-warning); }
.merge-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.merge-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--r-2xl);
  background: var(--color-surface); font-size: var(--t-body-sm-s); }
.tag2 { font-size: var(--t-micro-s); font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid; white-space: nowrap; }
.tag2.new { background: var(--color-info-subtle); color: var(--color-info); border-color: var(--color-info); }
.tag2.chg { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning); }
.tag2.same { background: var(--color-surface-raised); color: var(--color-text-subtle); border-color: var(--color-border-strong); }
.settings-input.mono { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }

/* Provenance chips in the inventory */
.origin-chip { font-size: var(--t-micro-s); font-weight: 600; padding: 1px 6px; border-radius: var(--r-md);
  border: 1px solid var(--color-border-strong); color: var(--color-text-muted);
  background: var(--color-surface-raised); white-space: nowrap; }
.origin-chip.figma { color: var(--figma-mark); border-color: var(--figma-mark); background: transparent; }
.origin-chip.storybook { color: var(--storybook); border-color: var(--storybook); background: transparent; }

/* ── Prompt Library as a standalone route ──
   Same section, no Foundry chrome. */
.app.app--library .sidebar, /* The Prompt Library carries its own hero now, so the shared Foundry one
   above it was saying the same thing twice and pushing the work down the
   page. Hidden here beside the other Foundry chrome this route drops. */
.app.app--library > main > .hero { display: none; }
.app.app--library .main, .app.app--library main { padding-top: 8px; }

/* The readiness card says it opens. */
.kpi-chev {
  float: right; color: var(--color-text-subtle);
  font-size: var(--t-caption-s); line-height: 1.6;
  transition: transform var(--duration-base) var(--easing-default);
}
.kpi-action:hover .kpi-chev { color: var(--color-primary); }

/* Post-import approval: imported drafts need one decision, not 53. */
.import-approve {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  margin-bottom: 20px;
}
.ia-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 260px; }
.ia-text b { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-warning); }
.ia-text span { font-size: var(--t-body-sm-s); color: var(--color-text-muted); line-height: 1.5; }
.ia-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Measured metrics on the design-context tiles. */
.dc-metrics {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.dc-metric {
  font-size: var(--t-caption-s); padding: 1px 6px; border-radius: var(--r-2xl);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); white-space: nowrap;
}

/* ══════════════════════════════════════════════
   Two ways into a design system, side by side

   Reading a brand document and reading a Figma file are peers, not a
   feature and an afterthought: so they get equal width and the same
   card, distinguished by what they actually are: one is AI reading a
   picture, the other is a direct structured read.
══════════════════════════════════════════════ */
/* One panel at a time now: the picker above decides which. */
.ingest-split { display: block; margin-bottom: var(--sp-4); }

/* Peers: same card, same head, same body, and a footer action row that
   sits on the floor of each one so three cards of different heights
   still line their buttons up. */
.ingest-split .ai-panel {
  margin-bottom: 0; height: 100%;
  display: flex; flex-direction: column; background: var(--surface);
}
.ingest-split .ai-panel-head { align-items: flex-start; }
.ingest-split .ai-panel-body {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px 16px;
}
.ingest-split .ingest-note { margin: 0; font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.55; }

.ingest-split .ai-panel-head-right { align-items: center; }
.ingest-split .ai-panel-subtitle { white-space: normal; }

/* The Figma card is not an AI feature, and should not borrow its warmth. */
#figmaIngestCard { background: var(--color-surface); border-color: var(--color-border); }
#figmaIngestCard .ai-panel-icon.figma {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
}

.figma-ingest-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.figma-ingest-body .settings-input { width: 100%; }
.figma-ingest-note {
  font-size: var(--t-caption-s);
  color: var(--color-text-subtle);
  line-height: 1.55;
}
.figma-ingest-note.warn { color: var(--color-warning); }
.figma-ingest-note b { color: var(--color-text-muted); font-weight: 600; }

/* An extraction that lists only its findings reads as complete; the values
   it could not determine are the ones a designer needs to go and set. */
.brand-extract-gap {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--t-caption-s); color: var(--muted); line-height: 1.55;
}
/* The system's history on Overview: one row per version. */
.history-card { margin-top: 12px; }
.history-panel { display: flex; flex-direction: column; gap: 2px; }
/* A working session, as a card that opens its checkpoints on the right. */
.history-session {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font: inherit; font-size: var(--t-caption-s); color: var(--muted); text-align: left; cursor: pointer;
}
.history-session + .history-session { margin-top: 6px; }
.history-session:hover { border-color: var(--border-strong); background: var(--tint-2); }
.history-session:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.history-session b { color: var(--text); font-weight: 600; }
.history-session-text { min-width: 0; }
.history-chev { flex: none; color: var(--muted); }
.history-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history-point { padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--t-caption-s); color: var(--muted); }
.history-point:first-child { border-top: 0; padding-top: 0; }
.history-point-head { display: flex; align-items: center; gap: 8px; }
.history-point-head b { color: var(--text); font-weight: 600; }
.history-point-head .btn { margin-left: auto; }
.history-sha { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
.history-point .history-what { margin: 4px 0 0; }
.history-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--t-caption-s); color: var(--muted); }
.history-row:first-child { border-top: 0; }
.history-row b { color: var(--text); font-weight: 600; }
.history-now { color: var(--muted); font-weight: 400; }
.history-now::before { content: "· "; }
.history-when { display: block; }
.history-what { display: block; line-height: 1.5; }
.history-empty { font-size: var(--t-caption-s); color: var(--muted); }
/* The offer of starter pages, once per system, above the library. */
.starter-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface); }
.starter-offer-body { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-body-sm-s); color: var(--muted); }
.starter-offer-body b { color: var(--text); font-weight: 600; }
.starter-offer-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* A drawn page in the design context: the page itself, laid out small. */
.dc-card-page .dc-has-page { position: relative; overflow: hidden; padding: 0; height: 200px; display: block; }
.dc-page-thumb { position: absolute; top: 0; left: 0; width: 400%; height: 400%; transform: scale(0.25); transform-origin: 0 0; border: 0; pointer-events: none; background: var(--surface); }
.dc-starter { font-size: var(--t-label-sm-s); font-weight: 600; color: var(--muted); margin-left: 6px; }
.dc-send-pages { margin-left: auto; }
/* What the house suggests: one line each, one press to apply. */
.brand-extract-house { color: var(--text); }
.house-suggest { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.house-suggest + .house-suggest { border-top: 1px solid var(--border); }

/* Brand references: one row of what the extraction will read. */
.brand-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.brand-thumb {
  position: relative; margin: 0; width: 92px;
  border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden;
  background: var(--surface);
}
.brand-thumb img { display: block; width: 100%; height: 68px; object-fit: cover; }
.brand-thumb figcaption {
  font-size: var(--t-caption-s); color: var(--subtle); text-align: center;
  padding: 2px 0; border-top: 1px solid var(--border);
}
.brand-thumb-x {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(var(--rgb-black), .55); color: var(--color-primary-fg);
  font-size: var(--t-caption-s); line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.brand-thumb-x:hover { background: rgba(var(--rgb-black), .8); }
.brand-thumb-add {
  width: 92px; height: 68px; border-radius: var(--r-xs);
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--muted); font-size: var(--t-title-lg-s); cursor: pointer;
}
.brand-thumb-add:hover { border-color: var(--brand); color: var(--brand); }

/* Extraction runs in two passes and the first one used to release the
   button, so the work looked finished while the model was still reading. */
.btn-spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  vertical-align: -1px; border-radius: 50%;
  border: 2px solid rgba(var(--rgb-white), 0.35); border-top-color: var(--color-primary-fg);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   THE FOUNDRY, STAGED
   Phases across the top, groups down the rail, the library as cards
   that state themselves while collapsed.
══════════════════════════════════════════════════════════════════ */

/* Never disabled: an incomplete system is still exportable, so it says
   what is unset rather than refusing the work. */

/* ── the step rail ── */
.frail { margin-bottom: 12px; }
.frail-empty { margin: 0; font-size: var(--t-body-xs-s); color: var(--subtle); line-height: 1.55; }

.fstep {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0 0 16px; position: relative; color: var(--text);
}
.fstep::before {
  content: ""; position: absolute; left: 12.5px; top: 27px; bottom: 3px;
  width: 1px; background: var(--border);
}
.fstep:last-child::before { display: none; }
.fstep .pip {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-micro-s); font-weight: 600; border: 1.5px solid var(--border-strong);
  color: var(--muted); background: var(--surface); position: relative; z-index: 1;
}
.fstep .pip.done  { background: rgba(var(--rgb-success), .12); border-color: var(--green); color: var(--green); }
.fstep .pip.cur   { background: var(--brand); border-color: var(--brand); color: var(--color-primary-fg); }
.fstep .pip.stale { background: rgba(var(--rgb-warning), .12); border-color: var(--color-warning); color: var(--color-warning); }
.ftxt { min-width: 0; }
.ftxt b { display: block; font-size: var(--t-body-sm-s); font-weight: 600; line-height: 1.3; }
.fstep.on .ftxt b { color: var(--brand-text); }
.ftxt .sub {
  display: block; font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.45; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftxt .flag {
  display: inline-block; margin-top: 2px; font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.ftxt .flag.done  { color: var(--green); }
.ftxt .flag.stale { color: var(--color-warning); }

/* ── the library as cards ── */
.cmp-groups { margin-bottom: 16px; }
.fcard { border: 1px solid var(--border); background: var(--surface); margin-bottom: 8px; }
.fcard.open  { border-color: var(--border-strong); }
.fcard.stale { border-color: var(--color-warning); }
.fcard .chd {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; cursor: pointer;
}
.fcard.open .chd { border-bottom: 1px solid var(--border); }
.fcard .caret { color: var(--subtle); font-size: var(--t-caption-s); margin-top: 4px; width: 9px; flex: none; }
.fcard .cnm { font-size: var(--t-title-md-s); font-weight: 600; line-height: 1.3; }
.fcard .ctag {
  font-size: var(--t-mono-xs-s); font-family: var(--font-mono); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--border); color: var(--subtle);
  margin-left: 8px; align-self: center; white-space: nowrap;
}
.fcard .ctag.ok   { color: var(--green); border-color: var(--green); background: rgba(var(--rgb-success), .08); }
.fcard .ctag.warn { color: var(--color-warning); border-color: var(--color-warning); background: rgba(var(--rgb-warning), .08); }
/* Collapsed, it still says its shape and where the approval came from. */
.fcard .cfg {
  margin-left: auto; text-align: right; font-size: var(--t-caption-s); color: var(--subtle);
  line-height: 1.55; flex: none; padding-left: 12px;
}
.fcard .cfg b { color: var(--muted); font-weight: 400; }
/* align-items:start, or the contrast panel stretches to the height of the
   variant/size/state stack beside it and reads as a mostly empty box. */
/* The preview needs width more than the rows do: three buttons side by
   side in a 280px column wrapped to a stack while the left half sat
   empty. Rows first, preview across the full card underneath. */
.fcard .cbd { padding: 16px 16px 16px; display: flex; flex-direction: column;
  gap: 16px; }
/* One row of facts, wrapping into as many columns as fit. */
.fcard .rowset {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 20px; min-width: 0;
}
.fcard .rw .k {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 6px;
}
.fcard .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fcard .tag {
  font-size: var(--t-micro-s); padding: 2px 8px; border: 1px solid var(--border);
  color: var(--muted); background: var(--surface);
}
.fcard .tag.on { border-color: var(--brand); color: var(--brand-text); background: var(--brand-dim); }
.fcard .tag.mono { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
.fprev { border: 1px solid var(--border); background: var(--surface-hover); padding: 16px; min-width: 0; }
.fcard .fprev-art { gap: 24px; }
.fprev .pk {
  font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--subtle); margin-bottom: 8px;
}
.fprev .pmeta { margin: 0; font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.6; }
.fprev .pmeta code { font-family: var(--font-mono); }
.fcard .cfoot {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface-hover); flex-wrap: wrap;
}
.fcard .fnote { font-size: var(--t-caption-s); color: var(--subtle); }
.fcard .sp { margin-left: auto; display: flex; gap: 8px; }

/* ── the drift banner ── */
.fbanner {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
  border: 1px solid var(--color-warning); border-left-width: 2px;
  background: rgba(var(--rgb-warning), .07); padding: 12px 16px;
}
.fbanner .bi { color: var(--color-warning); flex: none; line-height: 1.5; }
.fbanner b { display: block; font-size: var(--t-body-sm-s); font-weight: 600; color: var(--color-warning); }
.fbanner p { margin: 2px 0 0; font-size: var(--t-body-xs-s); color: var(--muted); line-height: 1.55; }
.fbanner code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
.fbanner .ba { margin-left: auto; flex: none; }
.fbanner .btn { border-color: var(--color-warning); color: var(--color-warning); }

.faddrow {
  width: 100%; text-align: left; border: 1px dashed var(--border-strong);
  background: none; padding: 12px 16px; font-size: var(--t-body-sm-s); color: var(--subtle);
  cursor: pointer; transition: all var(--transition);
}
.faddrow:hover { border-color: var(--brand); color: var(--brand-text); }

/* The canvas is reached from a card now, not shown beside the library.
   Open, it is a flex row, and a flex row sizes a rail to its words unless
   told otherwise: the grid's 176 and 248 hold here too, so the stage's
   width is the shell's less the rails, not whatever the longest label
   in the library happens to be at today's type size. */
.cmp-shell { display: none; }
.cmp-shell.open { display: flex; }
.cmp-shell.open > .cmp-library { flex: 0 0 176px; }
.cmp-shell.open > .cmp-canvas { flex: 1 1 0; min-width: 0; }
.cmp-shell.open > .cmp-inspector { flex: 0 0 248px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .sidebar { display: none; }
  .app > main { grid-column: 1; }
  .fcard .rowset { grid-template-columns: 1fr; }
}

/* The rail replaced the section nav and its progress bar. Both stay in
   the DOM, because navigateTo() and twenty call sites find sections by
   [data-section], and the sticky Previous/Next reads .nav.active. They
   are simply not two more places to look. */
.app > .sidebar > nav,
.app > .sidebar > .nav-progress,
.app > .sidebar > .about-card { display: none; }
/* The system's name stays: it is the one thing on this rail that is not
   progress, and the phase bar has no room for it. */
.app > .sidebar > .brand { margin-bottom: 16px; }
/* The head names the system; the brand block said it a second time. */
.app > .sidebar > .brand { display: none; }
/* The phase bar names the phase, so the hero saying it again above the
   title was the same word twice, 40px apart. */
.app > main > .hero #heroStep { display: none; }

/* The Design Context rail marks a slot rather than filtering the grid:
   uploading eight references is a batch job, and one tile at a time
   turns it into eight round trips. */
.dc-card.picked {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

/* ── 6. one column while a block is filtered ───────────────────────
   The two style columns kept their tracks when five of six cards were
   hidden, so the visible card sat in the right-hand track with an empty
   half beside it. */
.style-layout.filtered { grid-template-columns: minmax(0, 1fr); }
.style-layout.filtered .style-col:empty,
.style-layout.filtered .style-col.is-hidden { display: none; }

/* ── One button shape for the three ways in ───────────────────────
   They were three different sizes, one with a sparkle glyph, two with
   nothing, and the sparkle was a text character rather than an icon. */
.ingest-split .ingest-go {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  gap: 8px; font-size: var(--t-label-sm-s); font-weight: 600; white-space: nowrap;
  border-radius: var(--r-lg);
}
.ingest-split .ingest-go svg {
  width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ingest-split .ingest-go:disabled { opacity: .5; cursor: default; }
/* The head carried a tag on the right; with the tags gone the title
   should use the width rather than leave a gap where they were. */
.ingest-split .ai-panel-head-left { flex: 1; min-width: 0; }

/* ── The card's own preview ────────────────────────────────────────
   Same renderer the canvas uses, so what a card shows and what the
   system would draw cannot drift apart. */
.fprev-art {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 12px; border: 1px solid var(--border); background: var(--surface);
  min-height: 64px;
}
.fprev-art.empty {
  display: block; font-size: var(--t-caption-s); color: var(--subtle); text-align: center;
  padding: 20px 12px;
}
.fprev-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.fprev-cell figcaption { font-size: var(--t-caption-s); color: var(--subtle); letter-spacing: .03em; }
.fprev-art-in { display: flex; align-items: center; }
.fprev-more { margin: 6px 0 0; font-size: var(--t-caption-s); color: var(--subtle); }
.fprev .pmeta { margin-top: 8px; }

/* ── One of these three ────────────────────────────────────────────
   Three open cards in a row read as three things to do. The heading
   and the "or" between them say it is a choice. */
.ingest-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ingest-head-title {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--text);
}
.ingest-head-note { font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.5; }

/* ── One line for the three actions ────────────────────────────────
   Each card's footer sinks to its own floor, and the cards are equal
   height, so the three buttons land on one line. Only the scratch card
   had a footer that did this; the other two sat wherever their body
   happened to end. */
.ingest-split .brand-extract-footer {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding-top: 12px;
}
.ingest-split .brand-extract-footer .brand-extract-status {
  flex: 1; min-width: 0; font-size: var(--t-caption-s); color: var(--subtle);
}
.ingest-split .brand-extract-footer .ingest-go { margin-left: auto; }

/* ── The three ways in, as a selector ──────────────────────────────
   Same grammar as the UI foundation and framework pickers further down
   this page: pick one tile, and what you picked opens underneath. */
.ingest-picker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 8px;
}
.ingest-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--surface); color: var(--text);
  transition: all var(--transition);
}
.ingest-tile:hover { border-color: var(--border-strong); }
.ingest-tile.on { border-color: var(--brand-border); background: var(--brand-dim); }
.ingest-tile-ic {
  width: 40px; height: 40px; margin-bottom: 8px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-hover); color: var(--muted);
}
.ingest-tile.on .ingest-tile-ic { background: var(--surface); color: var(--brand-text); }
.ingest-tile-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The Figma mark is a logo: it keeps its own colours and its own fills. */
.ingest-tile-ic svg.fig { width: 15px; height: 22px; stroke: none; }
.ingest-tile b { font-size: var(--t-label-sm-s); font-weight: 600; }
.ingest-tile small { font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.45; }
.ingest-tile.on small { color: var(--muted); }

/* The panel the picker opened. It is one block in the left column, the
   same width as every other block on this page. */
.ingest-panel { margin-bottom: 0; }
.ingest-panel .ai-panel-body { border-top: 0; padding: 16px 16px; }

/* What this step is building on: the three steps above it, read back. */
.ingest-basis {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: var(--t-caption-s); line-height: 1.5;
}
.ingest-basis .ib-k {
  font-weight: 600; color: var(--subtle);
}
.ingest-basis .ib-v { color: var(--muted); }
.ingest-basis .ib-warn { color: var(--color-warning); }

/* A step waiting on a person reads as waiting, not as running. */
.run-step.gate .run-step-dot { background: var(--color-warning); border-color: var(--color-warning); }
.run-step.gate .run-step-label { color: var(--color-warning); font-weight: 400; }

/* ── A method's dropped notes ──────────────────────────────────────
   Text only, and the drop zone says which kinds: a field that accepts a
   file and then ignores it is worse than one that refuses it. */
.mf-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mf-docdrop {
  flex: 1 1 100%; min-height: 60px; padding: 12px 12px; text-align: left;
  border: 1px dashed var(--border-strong); background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: var(--t-body-xs-s);
  transition: all var(--transition);
}
.mf-docdrop small { display: block; margin-top: 2px; font-size: var(--t-caption-s); color: var(--subtle); }
.mf-docdrop:hover, .mf-docdrop.over { border-color: var(--brand); color: var(--brand-text); }
.mf-doc {
  display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 8px 0 8px; border: 1px solid var(--border); background: var(--surface);
  max-width: 240px;
}
.mf-doc b { font-size: var(--t-caption-s); font-weight: 400; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mf-doc small { font-size: var(--t-caption-s); color: var(--subtle); flex: none; }
.mf-doc button {
  border: 0; background: none; color: var(--subtle); cursor: pointer;
  font-size: var(--t-caption-s); padding: 0 0 0 2px; flex: none;
}
.mf-doc button:hover { color: var(--color-error); }
.mf-doc.drafted { border-style: dashed; }
/* A document the brief's own documents can be turned into. */
.mf-docact { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.mf-docbtn { flex: none; height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-primary); cursor: pointer; }
.mf-docbtn:hover { background: var(--bg-rail); }
.mf-docbtn:disabled { opacity: .6; cursor: default; }
.mf-docact small { font-size: var(--t-caption-s); color: var(--text-secondary); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
   A METHOD, RUN ON ITS OWN
   Quick Run picks a method; this is where it runs. Its own screen, not
   a card inside the Craft Studio conversation.
══════════════════════════════════════════════════════════════════ */

/* ── The two states of a method screen ──────────────────────────────

   It used to be one: a 360px gutter down the left with the whole intake
   folded into it, and beside it an empty page saying nothing has run
   yet. Competitive analysis puts eleven chips, two chip pickers, a
   screenshot well and a text field in that column, so the form was a
   ladder in a slot while three quarters of the screen held a sentence.

   Composing is a form and gets the page. Once there is something to
   look at, the same two children become a split pane with a handle
   between them, which is the shape this actually is: you are reading
   the result and reaching back into the form. */

/* Composing: the form takes the page, and a rail beside it carries what
   is about to happen, why it cannot yet, and the button. The decision to
   spend and the thing being spent on belong in one place; the plan used
   to sit under the form where you had to scroll past the fields to find
   out what the run would cost. */
/* Two columns at most. Three tracks of a third each turns a chip set
   into the ladder this was meant to stop being. */
/* Pinned, so the cost and the button are visible however long the plan
   is. A Run button below the fold is a Run button people hunt for. */
/* Wide by default: a chip set, a screenshot well and a drop zone all
   want the row. A single-line text field is the exception, so it is the
   one that opts out. */
/* Every field wraps in .mf-label, so the class cannot tell them apart.
   What can: a one-line text field puts its input directly inside the
   label, while a chip set, a screenshot well and a drop zone all put a
   container there and keep any inputs down inside it. */
/* A set of chips is a panel, and two panels read as a pair. */
/* [hidden] is a UA display:none, and a button class that sets its own
   display beats it at equal specificity by coming later. Stop showed
   through on a run that had not started. */

/* the run, as steps rather than a message */

/* the output, and the way back into it */

/* ══════════════════════════════════════════════════════════════════
   The workflow builder

   Phases across, methods beneath. The track scrolls sideways because a
   plan is a sequence and reading it as one is the point; each column
   holds its own steps, and a step that has run stops looking editable.
   ══════════════════════════════════════════════════════════════════ */
/* A workflow: one head above two bodies. The shell is the screen; the
   plan and the run are its bodies, one open at a time under the same
   head. Each used to be a fixed screen with a head of its own. */
.wf {
  display: none; position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w);
  background: var(--bg); z-index: 700; overflow: hidden;
  grid-template-rows: auto 1fr;
  /* One column, the screen's width and never its content's. The implicit
     column was auto, which is at least as wide as the widest thing in
     it: a plan of thirteen steps made the step rail 2,249px, and the
     head, the column under it and the dock all stretched to match, off
     the right of the window. The rail scrolls inside the width instead. */
  grid-template-columns: minmax(0, 1fr);
}
.wf > * { min-width: 0; }
.wf.open { display: grid; }

/* The head, one piece for every object (src/head.js). Named apart from
   the Workflows list's .wf-head. */
.wthead {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 16px 28px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.wthead-title { flex: 1; min-width: 220px; }
.wthead-line { margin: 2px 0 0 0; font-size: var(--t-body-xs-s); color: var(--muted); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wthead-state:empty { display: none; }
/* The picker on the line: what the object draws with, as a word with a
   caret. Chosen here; every other line on the screen reads it. */
.wthead-pick {
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-label-sm-s); font-weight: 600;
  color: var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong);
}
.wthead-pick:hover { color: var(--brand-text); text-decoration-color: currentColor; }
.wthead-pick.none { color: var(--muted); font-weight: 400; }
.wthead-pick[hidden] { display: none; }
.wthead-state:not(:empty) + .wthead-pick::before { content: "·"; color: var(--subtle); font-weight: 400; margin-right: 8px; text-decoration: none; display: inline-block; }
/* The disclosure: the brief and the system, one press under the line. */
.wthead-more {
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-caption-s); color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong);
}
.wthead-more::after { content: " ▾"; font-size: var(--t-caption-s); }
.wthead-more.open::after { content: " ▴"; }
.wthead-more:hover { color: var(--text); }
.wthead-details { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.wthead-details[hidden] { display: none; }
.wthead-right { display: flex; align-items: center; gap: 8px; flex: none; }
/* A button class sets its own display, which outranks the UA rule for
   [hidden] at equal specificity: Stop stayed on screen with nothing to
   stop. The same trap has caught .stu-linkrow and .mr-actions. */
.wthead-right [hidden] { display: none; }

.wthead-right .wf-modes[style*="none"] { display: none; }

/* Folded: one line. Reading a document or editing a page needs the
   crumb, the name, the views and the button, and nothing else the head
   carries; the canvas under it takes the height. */
.wthead.folded { padding: 6px 28px; align-items: center; flex-wrap: nowrap; gap: 12px; }
.wthead.folded .wthead-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.wthead.folded .wt-crumbs { margin: 0; flex: none; }
.wthead.folded input.wthead-name:not(#wt-none), .wthead.folded .wthead-line, .wthead.folded .wthead-details { display: none; }
.wthead.folded .wf-modes button { padding: 4px 12px; }

/* The phase tabs go with it, and the canvas is the whole column. */
/* One row: with the tabs gone, the canvas would otherwise land in the
   auto track and the 1fr track would sit empty under it. */
.workflowrun.focus { grid-template-rows: 1fr; }
.workflowrun.focus .wr-canvas { display: flex; flex-direction: column; padding: 0; }
/* The run stays in the screen's second row when the head stands down for
   the design surface: auto placement would lift it into the head's auto
   row and give it the dock's height. */
.wf > .workflowrun { grid-row: 2; }

/* The plan: the track and its foot, under the head. */
.workflow {
  display: none; min-height: 0; overflow: hidden;
  grid-template-rows: 1fr auto;
}
.workflow.open { display: grid; }

/* The name reads as a heading until it is pointed at. The stylesheet's
   general rule for inputs is written with five :not()s, which outranks
   any class; :not(#…) lends this rule an id's weight without an id, so
   every head's name wins, whatever its prefix. */
input.wthead-name:not(#wt-none) {
  /* As wide as its text, up to the column: a craft is named for its
     brief, and a fixed width cut one off mid-word. */
  width: auto; field-sizing: content; min-width: 12ch; max-width: 100%;
  border: 1px solid transparent; background: none;
  font: inherit; font-size: var(--t-title-lg-s); font-weight: 700; letter-spacing: -.02em;
  color: var(--text); padding: 2px 6px; margin-left: -6px; border-radius: var(--r-lg);
  transition: border-color var(--transition), background var(--transition);
}
input.wthead-name:not(#wt-none):hover { border-color: var(--border); }
input.wthead-name:not(#wt-none):focus { border-color: var(--brand); background: var(--surface); }
/* A quick run is named for its method, and that is not a thing to rename. */
input.wthead-name:not(#wt-none).fixed, input.wthead-name:not(#wt-none).fixed:hover, input.wthead-name:not(#wt-none).fixed:focus { border-color: transparent; background: none; cursor: default; }

/* ── The plan board (the agreed screen of 2 October 2026, C-Plan): the
   plan check first, then the six phases as columns of step cards, each
   with Add a step at its foot; under it the strip of two cards, the
   worked-out plan, the dock. The methods open as a panel at the right,
   and the board makes room for it. ── */
.wb-track { overflow-x: hidden; overflow-y: auto; padding: var(--sp-5) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.workflow.picking .wb-track { padding-right: 400px; }
/* A column keeps room for a one-word name (Brainstorming, Storyboarding):
   narrowed by a panel beside it, the last phases wrap to a row under the
   first, so none is broken in two and none is out of sight. */
.wb-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-5) var(--sp-3); margin: 0 var(--sp-7); align-items: start; }
.pcol { min-width: 0; }
.pcol > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1) var(--sp-25); }
.pcol > header h2 { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.pcol > header .n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.pcol-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
/* A step: its state as a circle, its name, where it is. */
.mcirc {
  position: relative; display: flex; align-items: flex-start; gap: var(--sp-25); min-width: 0; cursor: pointer;
  padding: var(--sp-3); background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--r-xl);
}
.mcirc:hover { border-color: var(--border-hairline); }
.mcirc:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mcirc.next { border-color: var(--signal-live); }
.mcirc-disc {
  flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--text-muted); color: var(--text-inverse); font-size: var(--t-nav-label-s);
}
.mcirc-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mcirc.next .mcirc-disc, .mcirc.running .mcirc-disc { background: var(--signal-live); border-color: var(--signal-live); }
.mcirc.done .mcirc-disc { background: var(--status-settled); border-color: var(--status-settled); }
.mcirc.failed .mcirc-disc { background: var(--status-caution); border-color: var(--status-caution); }
.mcirc.skipped .mcirc-disc, .mcirc.waiting .mcirc-disc { border-style: dashed; }
.mcirc-lock { font-style: normal; line-height: 1; }
.mcirc-text { display: grid; gap: var(--sp-05); min-width: 0; }
.mcirc-text b { font-size: var(--t-body-md-s); font-weight: 600; line-height: 1.3; color: var(--text-primary); overflow-wrap: break-word; }
.mcirc-state { font-size: var(--t-caption-s); line-height: 1.4; color: var(--text-muted); }
.mcirc.next .mcirc-state { color: var(--text-secondary); }
.mcirc.late .mcirc-state { color: var(--status-caution); }
.mcirc-btns { position: absolute; top: calc(-1 * var(--sp-3)); right: var(--sp-2); display: inline-flex; gap: var(--sp-05); opacity: 0; transition: opacity var(--dur-state) var(--ease-out); }
.mcirc:hover .mcirc-btns, .mcirc:focus-within .mcirc-btns { opacity: 1; }
.mcirc-btns button {
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border-hairline); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); line-height: 1; cursor: pointer;
}
.mcirc-btns button:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.mcirc-btns button:disabled { opacity: .3; cursor: default; }
/* Add a step, at the foot of the column. */
.wb-add {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; height: var(--h-control); padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-md); background: transparent; font: inherit; font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer;
}
.wb-add-c { font-style: normal; font-size: var(--t-body-md-s); line-height: 1; }
.wb-add:hover { color: var(--text-primary); background: var(--bg-surface); }
.wb-nothing { margin: 0 var(--sp-7); text-align: center; color: var(--text-secondary); }
.wb-nothing b { display: block; font-size: var(--t-title-md-s); font-weight: 600; color: var(--text-primary); }
.wb-nothing p { margin: var(--sp-1) 0 0; font-size: var(--t-body-sm-s); }
/* The strip and the plan below the board keep the page's gutter. */
.wb-strip, .wb-before { margin: 0 var(--sp-7); }
/* A step read in the panel. */
.wb-stepblurb { margin: 0 0 var(--sp-4); font-size: var(--t-body-sm-s); line-height: 1.55; color: var(--text-secondary); }
.wb-stepread section + section { margin-top: var(--sp-5); }
.wb-stepread h4 { margin: 0 0 var(--sp-2); }
.wb-stepsays { font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-secondary); }
.wb-stepsays b { color: var(--text-primary); font-weight: 600; }
/* Drag to reorder, inside a phase. */
.mcirc[draggable="true"] { cursor: grab; }
.mcirc[draggable="true"]:active { cursor: grabbing; }
.mcirc.lifted { opacity: .3; }
.wb-track.dragging .pcol.dnd-off { opacity: .4; }
.mcirc[data-wbdrop]::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--signal-live); }
.mcirc[data-wbdrop="before"]::after { top: -6px; }
.mcirc[data-wbdrop="after"]::after  { bottom: -6px; }
/* The strip: two cards. */
.wb-strip { display: flex; gap: var(--sp-3); align-items: stretch; }
.wb-card {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-35) var(--sp-4);
}
.wb-card > div { min-width: 0; flex: 1; }
.wb-card b { display: block; font-size: var(--t-body-sm-s); font-weight: 600; }
.wb-card b .wt-eyebrow { margin-left: var(--sp-15); font-weight: 400; }
.wb-card b .wt-eyebrow.good { color: var(--status-settled); }
.wb-card p { margin: var(--sp-1) 0 0; font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-secondary); }
.wb-cardbtn {
  flex: none; height: 36px; padding: 0 var(--sp-35); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface);
  font: inherit; font-size: var(--t-body-xs-s); color: var(--text-primary); cursor: pointer;
}
.wb-cardbtn.strong { border-color: var(--action-primary-bg); color: var(--action-primary-bg); font-weight: 600; }
.wb-cardbtn:hover { background: var(--bg-rail); }
.wb-plandoc-acts { display: flex; gap: var(--sp-2); flex: none; }
/* What the plan starts without: a card of its own, the width of the strip. */
.wb-strip-starts { display: flex; margin: 0 var(--sp-7); }
/* The plan check: the caution tint while there is a gap. */
.wb-plancheck.gaps { background: var(--status-caution-soft); border-color: var(--status-caution-line); }
.wb-card b.wb-checkhead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.wb-plancheck.gaps .wb-checkhead .wt-caution { color: var(--status-caution); }
.wb-checksay { font-weight: 400; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
/* Its rows, compact: the gap, who reads it, and its acts as quiet buttons. */
.wb-plancheck .wb-starts-list li, .wb-plancheck .wb-starts-list li.never {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k acts" "who acts"; row-gap: 0; padding: var(--sp-15) 0;
}
.wb-plancheck .wb-starts-list .k { grid-area: k; }
.wb-plancheck .wb-starts-list .who { grid-area: who; font-size: var(--t-caption-s); color: var(--text-muted); }
.wb-plancheck .wb-starts-list .acts, .wb-plancheck .wb-starts-list .why { grid-area: acts; }
.wb-plancheck .wb-starts-list .why { max-width: 44ch; font-size: var(--t-caption-s); text-align: right; }
.wb-plancheck .wb-starts-list .acts button { height: 26px; padding: 0 var(--sp-2); border-color: transparent; background: var(--bg-surface); font-size: var(--t-caption-s); }
.wb-plancheck .wb-starts-list li[hidden] { display: none; }
.wb-checkall { margin: var(--sp-2) 0 0; }
.wb-starts { align-items: flex-start; }
.wb-starts-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.wb-starts-list li { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-caption-s); }
.wb-starts-list li:first-child { border-top: 0; }
.wb-starts-list .k { font-weight: 600; color: var(--text-primary); }
.wb-starts-list .who { color: var(--text-secondary); min-width: 0; }
.wb-starts-list .acts { display: flex; gap: var(--sp-2); }
.wb-starts-list .acts button { height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-primary); cursor: pointer; }
.wb-starts-list .acts button:hover { background: var(--bg-rail); }
.wb-starts-list .acts button:disabled { opacity: .5; cursor: default; }
.wb-starts-list li.never { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) minmax(0, 1.4fr); }
.wb-starts-list li.never .k, .wb-starts-list li.gone .k { color: var(--text-secondary); font-weight: 400; }
.wb-starts-list .why { color: var(--text-secondary); }
.wb-starts .wb-starts-say { margin-top: var(--sp-3); }
.wb-starts .wb-starts-say.live { color: var(--text-primary); font-family: var(--font-mono); }
.wb-recommend { align-items: flex-start; }
.wb-recommend .wb-line { margin: var(--sp-25) 0 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.wb-empty { margin: var(--sp-1) 0 0; font-size: var(--t-caption-s); color: var(--text-secondary); line-height: 1.5; max-width: 64ch; }
/* The worked-out plan under the strip. */
.wb-before { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-5); }
.wb-before .wr-stephead { margin-bottom: var(--sp-3); }
.wb-before .wr-stephead h2 { font-size: var(--t-title-lg-s); font-weight: 600; margin: 0; }
.wb-before .wr-stephead p { max-width: 72ch; }
.wb-before .wr-planacts { margin-top: var(--sp-3); }
.wb-before .wr-planwait { margin: var(--sp-15) 0 0; }
.wb-line { margin: 0 0 var(--sp-15); font-size: var(--t-caption-s); color: var(--text-secondary); line-height: 1.5; }
.wb-line b { color: var(--text-primary); }
.wb-line.warn b { color: var(--status-caution); }
/* The methods (the agreed screen of 2 October 2026, C-Plan): a panel at
   the right from the title bar to the foot, the board made room for. */
.wb-pick {
  position: fixed; z-index: var(--z-menu); top: var(--chrome-h); right: 0; bottom: 76px; width: 400px; max-width: 100vw; display: flex; flex-direction: column; /* above the dock, which stays whole under it */
  background: var(--bg-rail); border-left: 1px solid var(--border-hairline);
}
.wb-pick[hidden] { display: none; }
.wb-pickhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-5); }
.wb-pickhead strong { font-size: var(--t-title-md-s); font-weight: 600; }
.wb-pickwhy { margin: var(--sp-05) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.wb-pickfind { display: flex; align-items: center; gap: var(--sp-2); height: 36px; margin: 0 var(--sp-5) var(--sp-2); padding: 0 var(--sp-3); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-muted); }
.wb-pickfind svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.wb-pickfind input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--t-body-sm-s); color: var(--text-primary); }
/* The field's frame is the search box: it lights, not the input inside it. */
.wb-pickfind input:focus-visible { box-shadow: none; }
.wb-pickfind:focus-within { box-shadow: 0 0 0 2px var(--focus-ring); }
.wb-picklist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 var(--sp-3) var(--sp-5); gap: var(--sp-05); }
.wb-picksec { display: flex; justify-content: space-between; margin: var(--sp-4) var(--sp-2) var(--sp-15); }
.wb-picksec span { color: var(--text-muted); }
.wb-pickitem {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left; width: 100%;
  padding: var(--sp-25) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-lg);
  background: transparent; font: inherit; color: inherit; cursor: pointer;
}
.wb-pickitem:hover, .wb-pickitem:focus-visible { background: var(--bg-surface); border-color: var(--border-hairline); outline: none; }
.wb-pickitem.in { opacity: .55; }
.wb-pickbody { flex: 1; min-width: 0; }
.wb-pickbody b { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text-primary); }
.wb-pickbody b .wt-statpill { font-style: normal; height: 18px; }
.wb-pickin { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); font-weight: 400; letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wb-pickneeds { display: block; margin-top: var(--sp-05); font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-muted); }
.wb-pickadd { flex: none; font-size: var(--t-body-xs-s); color: var(--text-secondary); white-space: nowrap; }
.wb-pickitem:hover .wb-pickadd { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════
   Running a workflow

   The Foundry's shape: phases across the top, one working canvas below.
   Each phase carries a dropdown of its methods and where each one got
   to, so the state of the whole plan is one click away without leaving
   the step in front of you.
   ══════════════════════════════════════════════════════════════════ */
/* The run: the phase tabs and the canvas, under the head. */
.workflowrun {
  display: none; min-height: 0; overflow: hidden;
  /* One row: the canvas. The phase tabs that took an auto row above it
     are on the head now, so with two tracks the canvas landed in the
     auto track at its content's height and the 1fr track sat empty
     under the dock: a short Set up left the dock 98px off the foot. */
  grid-template-rows: minmax(0, 1fr);
}
.workflowrun.open { display: grid; }
/* Where you are, as crumbs: each level a link, the last plain. */
.wt-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-caption-s); color: var(--subtle); margin-bottom: 4px; min-height: 0; }
.wt-crumbs:empty { display: none; }
.wt-crumbs .crumb { color: var(--subtle); }
.wt-crumbs button.crumb { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--muted); }
.wt-crumbs button.crumb:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.wt-crumbs i { font-style: normal; color: var(--border-strong); }
/* Plan · Run · Made: the three views of a workflow, on the one head. */
.wf-modes { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-right: 6px; }
.wf-modes button {
  border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--t-label-sm-s); font-weight: 600;
  padding: 6px 12px; cursor: pointer;
}
.wf-modes button + button { border-left: 1px solid var(--border); }
.wf-modes button:hover:not(:disabled):not(.on) { color: var(--text); background: var(--tint-2); }
.wf-modes button.on { color: var(--brand-text); background: var(--brand-dim); font-weight: 600; }
.wf-modes button:disabled { opacity: .4; cursor: default; }
/* The canvas: the whole cycle happens here and nothing opens over it. */
.wr-canvas { overflow-y: auto; padding: 20px 28px 40px; }
.wr-step { max-width: 1180px; margin: 0 auto; }
/* The head of the plan's Before it runs and of the workflow's report: a kind, a name, a line. */
.wr-stephead { margin-bottom: 16px; }
.wr-stephead h2 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--t-title-lg-s); font-weight: 700; letter-spacing: -.02em;
}
.wr-stephead p { margin: 6px 0 0; font-size: var(--t-body-xs-s); color: var(--muted); max-width: 68ch; }
.wr-n {
  display: block; font-size: var(--t-micro-s); color: var(--muted); white-space: nowrap;
}
/* What the step was set up with, above every stage after Set up. */
.wr-setupline {
  display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0 !important; max-width: none !important;
  padding: 8px 0 12px; border-bottom: 1px solid var(--border); font-size: var(--t-body-xs-s);
}
.wr-setupline .k { color: var(--subtle); flex: none; }
.wr-setupline .t { color: var(--muted); flex: 1; min-width: 0; }

.wr-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The set-up grid: two columns, the first field across both, and any
   field that holds a list or pictures across both as well. */
.wr-fields.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; }
.wr-grid > :first-child, .wr-grid > :has(.mf-wells), .wr-grid > :has(.mf-strip), .wr-grid > :has(.mf-triage) { grid-column: 1 / -1; }
.wr-grid .mf-input, .wr-grid textarea.mf-input { width: 100%; }
.wr-k { margin: 0; font-size: var(--t-label-sm-s); font-weight: 600; color: var(--muted); }
/* What will run: each part with a hollow mark, joined by a line. */
.wr-will { list-style: none; margin: 0; padding: 0; }
.wr-will li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 16px 24px; font-size: var(--t-body-xs-s); }
.wr-will li i {
  position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
}
.wr-will li::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; border-left: 1px solid var(--border); }
.wr-will li:last-child::before { display: none; }
.wr-will li.gate i { border-color: var(--brand); }
.wr-will li small { font-size: var(--t-caption-s); color: var(--subtle); }
/* The foot: Run and Skip on the left, the guard beside them, the price on the right. */
.wr-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
}

.wr-cost { margin: 0 0 0 auto; font-size: var(--t-body-xs-s); color: var(--muted); }
.wr-guard { margin: 0; font-size: var(--t-caption-s); color: var(--color-warning); min-height: 1em; }
.wr-err {
  margin: 0; padding: 8px 12px; font-size: var(--t-caption-s);
  border: 1px solid var(--color-warning); border-radius: var(--r-2xl); color: var(--color-warning);
}
.wr-skip { align-self: flex-start; }
.wr-none { font-size: var(--t-body-xs-s); color: var(--muted); margin: 0; }

/* ── The Running stage: the sub-steps (above, .wt-runrows), the stream from the model, and Stop as the one bordered primary. ── */
.wr-stall {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg);
  border: 1px solid var(--color-warning); background: var(--status-caution-soft);
  font-size: var(--t-caption-s); line-height: 1.5; color: var(--text-primary);
}
/* What is running (the agreed screens, 2 October 2026): a segment per sub-step, then the sub-steps as rows. */
.wt-segbar { display: flex; gap: var(--sp-05); height: 4px; }
.wt-segbar i { flex: 1; border-radius: var(--r-xs); background: var(--border-hairline); }
.wt-segbar i.done { background: var(--status-settled); }
.wt-segbar i.running { background: var(--signal-live); }
.wt-segbar i.failed { background: var(--status-caution); }
.wt-runrows { list-style: none; margin: var(--sp-35) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.wt-runrows li { display: flex; align-items: center; gap: var(--sp-3); min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-lg); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wt-runrows li i { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--t-nav-label-s); border: 1.5px solid var(--text-muted); }
.wt-runrows li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-runrows li small { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); color: var(--text-muted); }
.wt-runrows li.done i { background: var(--status-settled); border-color: var(--status-settled); color: var(--text-inverse); }
.wt-runrows li.done { color: var(--text-primary); }
.wt-runrows li.running { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; }
.wt-runrows li.running i { background: var(--signal-live); border-color: var(--signal-live); }
.wt-runrows li.running small { font-weight: 400; color: var(--text-secondary); }
.wt-runrows li.failed i { background: var(--status-caution); border-color: var(--status-caution); }
.wt-runrows li.failed small { color: var(--status-caution); }
.wt-lrow small.wt-lfrom { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--text-muted); }
.wt-runside .wt-lrow { justify-content: flex-start; }
.wt-stream { margin-top: var(--sp-5); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-5) var(--sp-6); }
.wt-stream header { display: flex; align-items: center; gap: var(--sp-25); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.wt-stream.folded header { padding-bottom: 0; border-bottom: 0; }
.wt-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-live); flex: none; }
.wt-stream header .wt-link { margin-left: auto; }
.wt-stream header .wt-link + .wt-link { margin-left: var(--sp-3); }
.wt-streamtext { margin-top: var(--sp-35); max-width: 74ch; font-size: var(--t-body-lg-s); line-height: 1.75; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.wt-streamtext.quiet { color: var(--text-muted); }
.wt-streamtext.done b { display: block; margin-bottom: var(--sp-1); font-size: var(--t-body-xs-s); font-weight: 600; color: var(--text-primary); }
.wt-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom; margin-left: 2px; background: var(--signal-live); animation: wt-caret 1s steps(2) infinite; }
@keyframes wt-caret { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wt-caret { animation: none; } }
/* The ledger's running rows. */
.wt-ledger .wt-lrun li { gap: var(--sp-05); }
.wt-ledger .wt-lrun li i { display: grid; place-items: center; font-style: normal; font-size: var(--t-nav-label-s); line-height: 1; }
.wt-ledger .wt-lrun li.done i { background: var(--status-settled-soft); border-color: var(--status-settled); color: var(--status-settled); }
.wt-ledger .wt-lrun li.done small.res { font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-ledger .wt-lrun li.running {
  background: var(--signal-live-soft); border: 1px solid var(--signal-live-line); border-radius: var(--r-2xl);
  padding: var(--sp-2) var(--sp-25) var(--sp-2) var(--sp-5); margin: 0 calc(-1 * var(--sp-1)) var(--sp-3) calc(-1 * var(--sp-3));
}
.wt-ledger .wt-lrun li.running::before { display: none; }
.wt-ledger .wt-lrun li.running i { left: var(--sp-2); top: var(--sp-25); background: var(--signal-live); border-color: var(--signal-live); }
.wt-ledger .wt-lrun li.running span { color: var(--signal-live); }
.wt-ledger .wt-lrun li.running small.live { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--signal-live); }
.wt-ledger .wt-lrun li.queued { opacity: .55; }
.wt-ledger .wt-lrun li.failed i { background: var(--status-caution); border-color: var(--status-caution); }
.wt-ledger .wt-lrun li.failed small { color: var(--status-caution); }
/* Stop: the one bordered primary. */
.wt-dock-primary.bordered { background: var(--bg-surface); border: 1.5px solid var(--signal-live); color: var(--signal-live); }
.wt-dock-primary.bordered:hover:not(:disabled) { background: var(--signal-live-soft); }

/* ── The gates (spec 7.6): the eyebrow in the needle, the question at
   34px, what the step produced open by default, option cards or the
   drawn directions as cards, the note, the dock naming the choice. ── */
.wr-callhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin: var(--sp-4) 0 0; }
.wr-callhead > div { flex: 1; min-width: 0; }
.wr-eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); letter-spacing: var(--t-mono-xs-ls); line-height: var(--t-mono-xs-lh);
  text-transform: uppercase; color: var(--signal-live);
}
.wr-callhead h2 { margin: var(--sp-2) 0 0; font-family: var(--font-serif); font-size: var(--t-display-lg-s); font-weight: var(--t-display-lg-w); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls); }
.wr-callhead .wr-callwhy { margin: var(--sp-2) 0 0; font-size: var(--t-body-md-s); line-height: 1.6; color: var(--text-secondary); max-width: 76ch; }
/* Under the step's head the question leads: no gap of its own above it. */
.wr-stagehead + .wr-callhead { margin-top: 0; }
.wr-callhead h2:first-child { margin-top: 0; }
/* What this step produced, open. */
.wt-produced { margin-top: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-35) var(--sp-4); }
.wt-produced header { display: flex; align-items: center; gap: var(--sp-25); }
.wt-produced header b { font-size: var(--t-body-xs-s); font-weight: 600; }
.wt-produced header .wt-link { margin-left: auto; }
.wt-counts { display: flex; gap: var(--sp-5); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }
.wt-counts span { display: flex; flex-direction: column; }
.wt-counts b { font-family: var(--font-mono); font-size: var(--t-num-md-s); font-weight: 400; line-height: 1; }
.wt-counts small { font-size: var(--t-micro-s); color: var(--text-muted); margin-top: var(--sp-05); }
/* The choice gate's cards. */
.wt-gopts { display: flex; gap: var(--sp-35); margin-top: var(--sp-4); align-items: stretch; }
.wt-gopt {
  flex: 1; min-width: 0; display: block; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-4) var(--sp-5);
}
.wt-gopt.picked { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wt-gopt-head, .wt-gpick-head { display: flex; align-items: center; gap: var(--sp-25); }
.wt-gopt-head input, .wt-gpick-head input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); flex: none; }
.wt-gopt-head b { font-size: var(--t-title-md-s); font-weight: 600; min-width: 0; }
/* A statement as the option: its short name above, the sentence read at
   the body's size, the radio beside the first line. */
.wt-gopt.long .wt-gopt-head { align-items: flex-start; }
.wt-gopt.long .wt-gopt-head input { margin-top: var(--sp-05); }
.wt-gopt-say { display: block; margin-top: var(--sp-25); font-size: var(--t-body-md-s); line-height: 1.55; color: var(--text-primary); }
.wt-rec {
  margin-left: auto; flex: none; font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase;
  background: var(--bg-sunken); border: 1px solid var(--border-hairline); border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); color: var(--text-secondary);
}
.wt-rec.ink { background: var(--action-primary-bg); border-color: transparent; color: var(--text-inverse); }
.wt-gopt-why { display: block; margin-top: var(--sp-25); font-size: var(--t-body-sm-s); line-height: 1.6; color: var(--text-secondary); }
.wt-gopt-facts { display: grid; gap: var(--sp-1); margin-top: var(--sp-25); }
.wt-gopt-facts span { display: flex; gap: var(--sp-2); font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.wt-gopt-facts i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); width: 96px; flex: none; padding-top: 2px; }
.wt-gopt-commit { display: block; margin-top: var(--sp-25); padding-top: var(--sp-25); border-top: 1px solid var(--border-soft); font-size: var(--t-body-xs-s); line-height: 1.55; color: var(--text-muted); }
.wt-gopt-commit strong { color: var(--text-secondary); font-weight: 600; }
.wt-gnote { margin-top: var(--sp-35); width: 100%; box-sizing: border-box; height: var(--h-field); padding: 0 var(--sp-35); font-size: var(--t-body-md-s); border-radius: var(--r-lg); border: 1px solid var(--border-hairline); }
.wt-gnote:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.wr-none { margin: var(--sp-4) 0 0; font-size: var(--t-body-sm-s); color: var(--text-muted); }
/* The pick gate: the drawn directions as cards. */
.wt-gpicks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-35); margin-top: var(--sp-4); }
.wt-gpick {
  display: flex; flex-direction: column; min-width: 0; cursor: pointer; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl);
}
.wt-gpick.picked { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wt-gpick-head { padding: var(--sp-25) var(--sp-35); border-bottom: 1px solid var(--border-soft); }
.wt-gpick-head b { font-size: var(--t-title-sm-s); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-gpick-bed { display: flex; justify-content: center; background: var(--bg-sunken); padding: var(--sp-4); position: relative; }
/* The ways to see an option in full, always there: a preview you have to
   hover to find is a preview nobody opens. */
.wt-gpick-acts { display: flex; gap: var(--sp-2); padding: var(--sp-25) var(--sp-35) 0; }
.wt-gpick-act {
  height: var(--h-chip); padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--bg-surface);
  font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.wt-gpick-act:hover, .wt-gpick-act:focus-visible { color: var(--text-primary); border-color: var(--text-secondary); }
.wt-gpage .wt-gpick-acts { padding: 0; }
/* Look: the direction full size in the design panel (spec 4.6). */
.wt-gpick-look {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3); height: var(--h-chip); padding: 0 var(--sp-25);
  border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; opacity: 0; transition: opacity var(--dur-hover) var(--ease-out);
}
.wt-gpick:hover .wt-gpick-look, .wt-gpick-look:focus-visible { opacity: 1; }
.wt-gpick-look:hover { color: var(--text-primary); }
.wt-device { display: block; width: 142px; height: 224px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); box-shadow: var(--shadow-float); }
.wt-device iframe { width: 390px; height: 615px; border: 0; transform: scale(0.364); transform-origin: 0 0; pointer-events: none; display: block; }
/* A web page's frame: a landscape at the same scale. */
.wt-device.wide { width: 256px; height: 160px; border-radius: var(--r-md); }
.wt-device.wide iframe { width: 1280px; height: 800px; transform: scale(0.2); }
/* The pages a gate shows under What this step produced: a strip of
   frames, each named, Look on hover, at the same size as a pick's. */
.wt-gpages { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); }
.wt-gpage { display: flex; flex-direction: column; gap: var(--sp-15); flex: none; min-width: 0; }
.wt-gpage-bed { display: flex; justify-content: center; position: relative; background: var(--bg-sunken); border-radius: var(--r-2xl); padding: var(--sp-3); }
.wt-gpage:hover .wt-gpick-look, .wt-gpage .wt-gpick-look:focus-visible { opacity: 1; }
.wt-gpage-name { font-size: var(--t-caption-s); color: var(--text-secondary); text-align: center; max-width: 256px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-gpick-body { display: block; padding: var(--sp-3) var(--sp-35) var(--sp-35); flex: 1; }
.wt-gpick-case { display: block; font-size: var(--t-body-xs-s); line-height: 1.55; color: var(--text-secondary); }
.wt-gpick-chips { display: flex; flex-wrap: wrap; gap: var(--sp-15); margin-top: var(--sp-25); }
.wt-check { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); border: 1px solid var(--border-hairline); color: var(--text-secondary); }
.wt-check.good { background: var(--status-settled-soft); border-color: var(--status-settled-line); color: var(--status-settled); }
.wt-check.caution { background: var(--status-caution-soft); border-color: var(--color-warning); color: var(--status-caution); }
/* Comments at a gate (wrGateNotes): the block on the gate, the Comment
   buttons on its cards, the pins over a page in the panel and the
   panel's footer while commenting. */
.wt-gnotes { margin-top: var(--sp-4); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-35) var(--sp-4); }
.wt-gnotes header { display: flex; align-items: center; gap: var(--sp-25); }
.wt-gnotes header b { font-size: var(--t-body-xs-s); font-weight: 600; }
.wt-gn-none { margin: var(--sp-2) 0 0; font-size: var(--t-body-sm-s); line-height: 1.55; color: var(--text-muted); }
.wt-gn-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-25); }
.wt-gn { display: flex; gap: var(--sp-25); align-items: flex-start; }
.wt-gn-n, .wt-gc-pin {
  flex: none; display: grid; place-items: center; width: var(--h-chip); height: var(--h-chip); border-radius: var(--r-pill);
  background: var(--brand); color: var(--text-inverse); font-style: normal; font-size: var(--t-caption-s); font-weight: 600; font-variant-numeric: tabular-nums;
}
.wt-gn.done .wt-gn-n, .wt-gc-pin.done { background: var(--status-settled); }
.wt-gn.not .wt-gn-n { background: var(--status-caution); }
.wt-gn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.wt-gn-on { font-size: var(--t-caption-s); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-gn-text { font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-primary); }
.wt-gn.done .wt-gn-text, .wt-gn.not .wt-gn-text { color: var(--text-secondary); }
.wt-gn-said { font-size: var(--t-body-xs-s); line-height: 1.5; color: var(--status-settled); }
.wt-gn.not .wt-gn-said { color: var(--status-caution); }
.wt-gn-add { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.wt-gn-add .wt-gn-input { margin-top: 0; flex: 1; min-width: 0; }
.wt-gn-add .wt-scopechip { flex: none; }
.wt-gn-untarget { border: 0; background: none; padding: 0 0 0 var(--sp-1); font: inherit; color: var(--text-muted); cursor: pointer; }
.wt-gn-untarget:hover { color: var(--text-primary); }
.wt-gnotes-n { font-style: normal; margin-left: var(--sp-15); padding: 0 var(--sp-15); border-radius: var(--r-pill); background: var(--brand); color: var(--text-inverse); font-size: var(--t-micro-s); font-weight: 600; }
.wt-gnotes-n[hidden] { display: none; }
.wt-gopt-acts { display: flex; margin-top: var(--sp-25); }
.wt-gc-toggle { margin-left: auto; }
.wt-panel-toolbar .wt-gc-toggle + .wt-eyebrow.esc { margin-left: var(--sp-3); }
.wt-gc-toggle.on { color: var(--brand-text); border-color: var(--brand); }
.wt-gc-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wt-gc-pin { position: absolute; transform: translate(-50%, -50%); box-shadow: var(--shadow-float); }
.wt-panel-foot:has(.wt-gc), .wt-panel-foot:has(.wt-gn-list) { height: auto; max-height: 45%; overflow-y: auto; align-items: flex-start; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.wt-gc-foot { flex: 1; min-width: 0; }
.wt-gc-idle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wt-gc-idle p { flex: 1; min-width: 0; }
.wt-gc-actbtn { flex: none; }
.wt-gc-foot .wt-gn-list { margin-top: var(--sp-2); }
.wt-gc { display: grid; gap: var(--sp-2); }
.wt-gc-on { font-size: var(--t-body-sm-s); }
.wt-gc-on b { color: var(--text-primary); font-weight: 600; }
.wt-gc-form { display: grid; gap: var(--sp-2); }
.wt-gc-text { width: 100%; box-sizing: border-box; padding: var(--sp-2) var(--sp-25); font: inherit; font-size: var(--t-body-sm-s); line-height: 1.5; border: 1px solid var(--border-hairline); border-radius: var(--r-lg); resize: vertical; }
.wt-gc-text:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.wt-gc-acts { display: flex; justify-content: flex-end; gap: var(--sp-2); }
/* Why this one: the pick gate's column. */
.wt-why { width: auto; }
.wt-why .wt-note p { margin: 0; }
.wt-why .wt-note p + p { margin-top: var(--sp-25); }
.wt-why .wt-lnone + .wt-lnone { margin-top: var(--sp-2); }
.wt-why .wt-lnone b { color: var(--text-primary); font-weight: 600; }
.wt-why .wt-gnote { margin-top: auto; height: var(--h-field-sm); font-size: var(--t-body-sm-s); }
.wt-ledger .wt-note b { display: block; font-size: var(--t-caption-s); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-1); }
.wt-ledger .wt-note p { margin: 0; }

/* A finished step is a way back into what it produced, so it is a button.
   One that has not run is inert and stays a div. */
.wrph-step.go {
  width: 100%; text-align: left; background: none; border: 0; font: inherit;
  cursor: pointer;
}
.wrph-step.go:hover { background: var(--surface-hover); }
.wrph-step.go:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* ── reading a step back: its Output stage ── */
.wr-viewing { max-width: 1180px; margin: 0 auto; }
.wr-outhead { display: flex; align-items: baseline; gap: 16px; margin: 6px 0 16px; }
.wr-outtitle { margin: 0; flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--t-body-xs-s); }
.wr-outtitle i { font-style: normal; color: var(--green); font-weight: 700; }
/* The count stays on one line; a long line of decisions beside it was
   squeezing "Five outputs, signed" into three. The decisions wrap. */
.wr-outtitle b { font-size: var(--t-title-md-s); font-weight: 700; white-space: nowrap; flex: none; }
.wr-outtitle .wr-decs { flex: 1 1 320px; min-width: 0; }
.wr-outtitle span { color: var(--muted); }
.wr-outhead .sp { display: inline-flex; gap: 6px; flex: none; }
.wr-outcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 0 0 16px; }
.wr-outcard { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wr-outpic {
  aspect-ratio: 3 / 4; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden;
  background: var(--tint-2); display: flex; align-items: flex-start; justify-content: center;
}
.wr-outpic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wr-outph { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px; }
.wr-outph i { display: block; height: 10px; border-radius: var(--r-sm); background: var(--border); }
.wr-outph i:first-child { width: 55%; height: 12px; background: var(--brand); opacity: .5; }
.wr-outph i:nth-child(2) { width: 85%; } .wr-outph i:nth-child(3) { width: 70%; } .wr-outph i:nth-child(4) { width: 78%; }

.wr-outcard b { margin-top: 8px; font-size: var(--t-body-sm-s); font-weight: 600; }
.wr-outmeta { font-size: var(--t-caption-s); color: var(--subtle); }
.wr-outcard .sp { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wr-onward .wr-nextline { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--t-body-xs-s); }
.wr-onward .wr-nextline .k { color: var(--muted); }
.wr-onward .wr-nextline b { font-size: var(--t-body-sm-s); }
.wr-onward [data-wrcontinue] { margin-left: auto; }
.wr-back {
  background: none; border: 0; padding: 0; margin: 0 0 var(--sp-2);
  /* The only way back off this view, so it takes the size the other two
     back controls take: .mr-back and .stu-back are both --t-ui-s. This
     said --t-cap, which is not a token, so it has always inherited and
     nobody has seen it at the caption size. Eleven pixels is the right
     step for a note under a label and the wrong one for navigation. */
  font: inherit; font-size: var(--t-body-xs-s); color: var(--muted); cursor: pointer;
}
.wr-back:hover { color: var(--brand-text); }
.wr-hold {
  border: 1px solid var(--border); background: var(--surface-hover);
  padding: var(--sp-2); margin: 0 0 var(--sp-3);
}
.wr-hold p { margin: 0 0 var(--sp-15); font-size: var(--t-body-xs-s); color: var(--muted); }
.wr-made { font-size: var(--t-caption-s); color: var(--muted); margin: 0 0 var(--sp-2); }
.wr-decs { list-style: none; margin: 0; padding: 0; display: inline; }
.wr-decs li { display: inline; font-size: var(--t-body-xs-s); color: var(--muted); }
.wr-decs li + li::before { content: " · "; }
.wr-decs b { color: var(--text); font-weight: 600; }
.wr-decs span { color: var(--muted); }
.wr-decs span::before { content: " · "; }

/* ── the documents a step wrote ── */
.wr-outs { list-style: none; margin: 0; padding: 0; }
.wr-out {
  display: flex; align-items: center; gap: var(--sp-15);
  padding: var(--sp-15) var(--sp-2); border: 1px solid var(--border);
  border-bottom: 0; font-size: var(--t-body-xs-s);
}
.wr-out:last-child { border-bottom: 1px solid var(--border); }
.wr-out b { font-weight: 600; color: var(--text); min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-out .sp { margin-left: auto; display: flex; gap: var(--sp-1); flex: none; }

/* ── everything this run has made ──
   The ending of a run, and a click away during it. The grid on the
   left, a panel about the picked output on the right, the way the
   Design Workflows list opens its overview beside the cards. */
.wr-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1400px; margin: 0 auto; align-items: start; }
.wr-allmain { min-width: 0; }
.wr-allhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.wr-allhead h2 { margin: 0 0 6px; font-size: var(--t-title-lg-s); font-weight: 700; letter-spacing: -.02em; }
.wr-allhead p { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); line-height: 1.6; }
.wr-allhead .sp { display: flex; gap: 8px; flex: none; align-items: center; }
/* The finished head keeps its own centre; the overview follows under it. */
.wr-all .wr-done { margin: 20px auto 8px; }
.wr-allbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.wr-allfilter { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--r-md); padding: 4px 12px; font: inherit; font-size: var(--t-micro-s); cursor: pointer;
}
.wr-chip:hover { border-color: var(--border-strong); color: var(--text); }
.wr-chip.on { border-color: var(--brand); color: var(--brand-text); background: var(--brand-dim); font-weight: 600; }
.wr-late { margin: 0 0 12px; font-size: var(--t-body-xs-s); color: var(--muted); max-width: 80ch; }
/* A quick run's foot: what is (not) kept, and the two ways on. */
.wr-quickfoot { justify-content: space-between; }
.wr-keep { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); }
.wr-quickfoot .sp { display: flex; gap: 8px; align-items: center; }
.wr-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-body-xs-s);
  color: var(--brand-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.wr-none { margin: 0; font-size: var(--t-caption-s); color: var(--subtle); }
.wr-allthread { margin: 8px 0 0; font-size: var(--t-caption-s); color: var(--subtle); }
/* Landscape tiles, three or four to a row, the top of each page showing. */
.wr-all .wr-outcards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 20px; }
.wr-all .wr-outpic { aspect-ratio: 4 / 3; }
/* A card that can be picked, and the one that is. */
.wr-outcard[data-wrpick] { cursor: pointer; border-radius: var(--r-2xl); }
.wr-outcard[data-wrpick]:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.wr-outcard[data-wrpick]:hover .wr-outpic { border-color: var(--border-strong); }
.wr-outcard.on .wr-outpic { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* What the project is about, said once at the top of the plan. */
.wb-brief {
  display: block; width: 100%; max-width: 560px; margin-top: var(--sp-15);
  font: inherit; font-size: var(--t-caption-s); line-height: 1.5; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  padding: var(--sp-15); resize: vertical;
}
.wb-brief::placeholder { color: var(--subtle); }
.wb-brief:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }

/* The narrative, previewed where it was made rather than in another tab. */
.wr-frame {
  margin-top: var(--sp-3); border: 1px solid var(--border); background: var(--surface);
  height: 60vh; min-height: 320px;
}
.wr-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Read in place: the head in one row, the document filling what is left. */
.wr-readhead { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.wr-readtitle { min-width: 0; }
.wr-readtitle h2 { margin: 0; font-size: var(--t-title-lg-s); font-weight: 700; letter-spacing: -.01em; }
.wr-readhead .sp { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wr-readframe { margin-top: 0; height: calc(100vh - 330px); min-height: 420px; }
/* The reader's outline beside a page on the craft's canvas: the
   document's headings, sticky, the section in view lit. In the detail
   panel the same items are a row of chips (.wt-panel-jump). */
.wr-outline { position: sticky; top: 0; flex: 0 0 168px; max-height: calc(100vh - 330px); overflow-y: auto; }
.wr-outline[hidden] { display: none; }
.wt-outline { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-left: 1px solid var(--border); }
.wt-outline-item {
  text-align: left; background: none; border: 0; border-left: 2px solid transparent; margin-left: -1px;
  padding: 4px 8px; font: inherit; font-size: var(--t-caption-s); color: var(--muted); cursor: pointer; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-outline-item:hover { color: var(--text); }
.wt-outline-item.on { color: var(--brand-text); border-left-color: var(--brand); font-weight: 600; }
.wt-outline-item.is-summary { font-weight: 600; color: var(--text); }
.wt-outline-item.is-appendix { color: var(--subtle); font-style: italic; }
/* On the craft's canvas, a document reads the same way. */
.ide-readbody { display: flex; gap: 12px; align-items: stretch; flex: 1; min-height: 0; }
.ide-readbody .ide-frame { flex: 1; min-width: 0; }
.ide-shot.is-doc .wr-outline { max-height: none; align-self: flex-start; position: sticky; top: 0; }
/* Edit this page · New direction: what the studio's composer does. */
.ide-mode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 8px; }
.ide-mode:empty { display: none; }
/* On the canvas bar, beside the pages it applies to. */
.ide-canvas-bar .ide-mode { margin: 0 0 0 4px; }
.ide-mode button { border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--t-caption-s); padding: 4px 8px; cursor: pointer; }
.ide-mode button + button { border-left: 1px solid var(--border); }
.ide-mode button.on { color: var(--brand-text); background: var(--brand-dim); font-weight: 600; }
/* The pages of the set, one control on the canvas bar: the page on the
   canvas, how many there are, and a menu of all of them. */
.ide-pages {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 8px;
  border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--surface);
  font: inherit; color: var(--text); cursor: pointer; max-width: 320px;
}
.ide-pages:hover { border-color: var(--border-strong); }
.ide-pages b { font-size: var(--t-label-sm-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-pages small { font-size: var(--t-caption-s); color: var(--muted); white-space: nowrap; }
.ide-pages i { font-style: normal; font-size: var(--t-caption-s); color: var(--subtle); }
.stu-menu-item .when { white-space: nowrap; }
/* Click to edit: the panel that takes the left column while a page is
   edited by hand. Discard and Save at the top, the tabs and the two
   steps back under them, then what the selection is and its controls. */
.pe-host { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.pe-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* ── Spot editing: the properties and the layers (canvas-plan 3.3) ── */
.pe-sec { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.pe-sec > h4 { margin: 0 0 var(--sp-05); font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); color: var(--text-primary); }
.pe-sec .pe-hint, .pe-layers + .pe-hint { margin: 0; font-size: var(--t-caption-s); color: var(--text-muted); line-height: 1.45; }
/* Why the page is this way, and what a part is for (the rationale). */
.pe-whyarg { margin: 0; font-size: var(--t-caption-s); color: var(--text-secondary); line-height: 1.5; }
.pe-whylist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.pe-whylist li { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-primary); line-height: 1.45; }
.pe-whylist small { display: block; margin-top: var(--sp-05); color: var(--text-muted); font-size: var(--t-caption-s); }
.pe-whyon { color: var(--text-muted); text-transform: capitalize; }
.pe-whowho { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-soft); }
.pe-whowho li { grid-template-columns: 96px 1fr; }
.pe-hint code { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); }
.pe-place { gap: 0; }
.pe-placerow, .pe-layer {
  --d: 0; /* the row's depth in the tree, set inline per row */
  display: flex; align-items: center; gap: var(--sp-2); height: 28px; box-sizing: border-box; padding: 0 var(--sp-2) 0 calc(var(--sp-2) + var(--d) * var(--sp-4));
  border: 0; border-radius: var(--r-md); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text-secondary); width: 100%; min-width: 0;
}
.pe-placerow:hover, .pe-layer:hover { background: var(--bg-sunken); }
.pe-placerow.on, .pe-layer.on { background: var(--signal-live-soft); color: var(--text-primary); }
.pe-lkind { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-layer.on .pe-lkind, .pe-placerow.on .pe-lkind { color: var(--signal-live); }
.pe-lwords { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body-xs-s); }
.pe-layers { display: flex; flex-direction: column; gap: 0; margin: 0 calc(-1 * var(--sp-2)); }
.pe-layer.hid { color: var(--text-muted); }
/* The selected layer's arrows, and the properties row's pair (peMove). */
.pe-lmove, .pe-movepair { flex: none; display: inline-flex; gap: var(--sp-05); }
.pe-lmove button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--signal-live); font: inherit; font-size: var(--t-body-xs-s); line-height: 1; cursor: pointer; }
.pe-lmove button:hover { background: var(--bg-surface); }
.pe-layer.hid .pe-lwords { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.pe-eye { flex: none; width: 16px; height: 16px; border-radius: var(--r-full); border: 1.5px solid var(--border-strong); background: none; padding: 0; cursor: pointer; position: relative; }
.pe-eye.on { border-color: var(--text-secondary); }
.pe-eye.on::after { content: ""; position: absolute; left: 4px; top: 4px; width: 5px; height: 5px; border-radius: var(--r-full); background: var(--text-secondary); }
.pe-eye:not(.on)::before { content: ""; position: absolute; left: -3px; top: 6px; width: 18px; border-top: 1.5px solid var(--border-strong); transform: rotate(-35deg); }
.pe-row.pe-dims { flex-direction: row; align-items: center; gap: var(--sp-2); }
.pe-row.pe-dims > span { flex: 0 0 52px; }
.pe-row.pe-dims input[type="text"] { flex: 1 1 60px; min-width: 0; width: auto; }
.pe-row.pe-dims select { flex: 0 0 auto; width: auto; }
.pe-contrast { align-self: flex-start; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-xs); background: var(--status-settled-soft); color: var(--status-settled); }
.pe-contrast.poor { background: var(--status-caution-soft); color: var(--status-caution); }
.pe-foot { gap: 0; padding-top: var(--sp-2); }
.pe-footrow { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 var(--sp-1); border: 0; background: none; font: inherit; font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; text-align: left; list-style: none; }
.pe-footrow::-webkit-details-marker { display: none; }
.pe-footrow:hover { color: var(--text-primary); }
.pe-footrow i { font-style: normal; color: var(--text-muted); transition: transform var(--transition); }
.pe-footfold[open] > .pe-footrow i { transform: rotate(90deg); }
.pe-tokensbody { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-2); }
/* The Motion tab: what the selection does in a line; the triggers as
   tabs; presets as tiles whose glyph moves the way the preset does
   under the pointer; the movement as Ease, Spring or Linear with its
   curve; sliders for time and bounce. */
.pe-does { margin: 0; }
.pe-seg.wide { display: flex; }
.pe-seg.wide button { flex: 1; text-align: center; }
.pe-triggers { margin-top: var(--sp-1); }
.pe-triggers button { position: relative; }
.pe-triggers button.has::after { content: ""; position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; border-radius: var(--r-full); background: var(--signal-live); }
.pe-triggers button.on.has::after { background: var(--signal-live); }
.pe-motionpanel { border-top: 0; padding-top: var(--sp-2); }
.pe-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-15); }
.pe-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-25) var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.pe-tile i { display: grid; place-items: center; width: 34px; height: 30px; color: var(--text-primary); border-radius: var(--r-md); }
.pe-tile:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pe-tile.on { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.pe-tile.on i { color: var(--signal-live); }
/* The glyphs move the way the preset does, once, under the pointer. */
@media (prefers-reduced-motion: no-preference) {
  .pe-tile[data-petile="fade"]:hover i svg { animation: pe-tile-fade .9s var(--ease-out) both; }
  .pe-tile[data-petile="rise"]:hover i svg { animation: pe-tile-rise .9s var(--ease-out) both; }
  .pe-tile[data-petile="scale"]:hover i svg { animation: pe-tile-scale .9s var(--ease-out) both; }
  .pe-tile[data-petile="slide"]:hover i svg { animation: pe-tile-slide .9s var(--ease-out) both; }
  .pe-tile[data-petile="blur"]:hover i svg { animation: pe-tile-blur .9s var(--ease-out) both; }
  .pe-tile[data-petile="lift"]:hover i svg { animation: pe-tile-lift .5s var(--ease-out) forwards; }
  .pe-tile[data-petile="grow"]:hover i svg { animation: pe-tile-grow .5s var(--ease-out) forwards; }
  .pe-tile[data-petile="dim"]:hover i svg { animation: pe-tile-dim .5s var(--ease-out) forwards; }
  .pe-tile[data-petile="glow"]:hover i svg { animation: pe-tile-glow .6s var(--ease-out) forwards; }
  .pe-tile[data-petile="sink"]:hover i svg { animation: pe-tile-sink .5s var(--ease-out) forwards; }
  .pe-tile[data-petile="underline"]:hover i .ul { animation: pe-tile-underline .6s var(--ease-out) both; }
  .pe-tile[data-petile="soft"]:hover i svg { animation: pe-tile-parallax 1.4s ease-in-out infinite alternate; }
  .pe-tile[data-petile="deep"]:hover i svg { animation: pe-tile-parallax-deep 1.4s ease-in-out infinite alternate; }
  .pe-tile[data-petilekind="vt"][data-petile="fade"]:hover i svg { animation: pe-tile-fade .9s var(--ease-out) both; }
  .pe-tile[data-petilekind="vt"][data-petile="slide"]:hover i svg { animation: pe-tile-vtslide .9s var(--ease-out) both; }
  .pe-tile[data-petilekind="vt"][data-petile="rise"]:hover i svg { animation: pe-tile-rise .9s var(--ease-out) both; }
}
@keyframes pe-tile-fade { from { opacity: 0; } }
@keyframes pe-tile-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes pe-tile-scale { from { opacity: 0; scale: .6; } }
@keyframes pe-tile-slide { from { opacity: 0; translate: -10px 0; } }
@keyframes pe-tile-vtslide { from { translate: 22px 0; } }
@keyframes pe-tile-blur { from { opacity: 0; filter: blur(4px); } }
@keyframes pe-tile-lift { to { translate: 0 -3px; filter: drop-shadow(var(--shadow-float)); } }
@keyframes pe-tile-grow { to { scale: 1.18; } }
@keyframes pe-tile-dim { to { opacity: .45; } }
@keyframes pe-tile-glow { to { filter: drop-shadow(0 0 5px currentColor); } }
@keyframes pe-tile-sink { to { scale: .84; } }
@keyframes pe-tile-underline { from { stroke-dasharray: 12; stroke-dashoffset: 12; } to { stroke-dasharray: 12; stroke-dashoffset: 0; } }
@keyframes pe-tile-parallax { from { translate: 0 -3px; } to { translate: 0 3px; } }
@keyframes pe-tile-parallax-deep { from { translate: 0 -6px; } to { translate: 0 6px; } }
.pe-transition { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); margin-top: var(--sp-1); border-top: 1px solid var(--border-soft); }
.pe-transition .pe-row:has(.pe-curve) { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.pe-transition .pe-row:has(.pe-curve) > span { flex: 0 0 100%; }
.pe-curve { display: inline-grid; place-items: center; height: 26px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--signal-live); background: var(--surface); }
.pe-code pre { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); line-height: 1.5; background: var(--bg-sunken); padding: var(--sp-3); border-radius: var(--r-lg); }
.pe-code h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--t-label-md-s); }
.pe-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pe-title { font-size: var(--t-label-sm-s); font-weight: 600; }
.pe-acts { display: flex; gap: 6px; }
.pe-tools { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pe-tabs { display: inline-flex; gap: 2px; }
.pe-tabs button {
  border: 0; background: none; font: inherit; font-size: var(--t-caption-s); font-weight: 600; color: var(--muted);
  padding: 4px 8px; border-radius: var(--r-md); cursor: pointer;
}
.pe-tabs button.on { color: var(--brand-text); background: var(--brand-dim); }
.pe-history { display: inline-flex; gap: 2px; }
.pe-history button {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--t-body-sm-s); line-height: 1;
  width: 28px; height: 26px; border-radius: var(--r-sm); cursor: pointer;
}
.pe-history button:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.pe-history button:disabled { opacity: .4; cursor: default; }
.pe-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pe-empty { margin: 4px 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.55; }
.pe-what { margin: 0; font-size: var(--t-body-xs-s); }
.pe-kind { font-weight: 600; }
.pe-alike { color: var(--muted); }
.pe-row { display: flex; flex-direction: column; gap: 4px; }
.pe-row > span { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.pe-row textarea, .pe-row input[type="text"], .pe-row input[type="url"], .pe-row select {
  width: 100%; font: inherit; font-size: var(--t-body-xs-s); padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); resize: vertical;
}
.pe-row textarea:focus, .pe-row input:focus, .pe-row select:focus { border-color: var(--brand); }
.pe-file input { font-size: var(--t-caption-s); }
.pe-bgpicrow { display: flex; align-items: center; gap: var(--sp-15); }
.pe-bgthumb { flex: none; width: 40px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface) center / cover no-repeat; }
.pe-filebtn { position: relative; cursor: pointer; }
.pe-filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pe-filebtn:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.pe-check { display: flex; align-items: center; gap: 8px; font-size: var(--t-caption-s); color: var(--text); }
.pe-rowacts { flex-direction: row; margin-top: 4px; }
.pe-said { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }
/* The padding and the margin of the selected element: a side picked on the page, stepped here. */
.pe-space { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pe-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; width: max-content; }
.pe-stepper button { border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-body-xs-s); width: 28px; height: 28px; cursor: pointer; }
.pe-stepper button:hover { background: var(--brand-dim); color: var(--brand-text); }
/* A flex basis, because a global rule gives every text input the full width and would push the plus off the panel. */
.pe-stepper input { flex: 0 0 72px; min-width: 0; height: 28px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font: inherit; font-size: var(--t-body-xs-s); background: var(--surface); color: var(--text); }
.pe-stepper input:focus { background: var(--brand-dim); }
/* Ask about the selection: the prompt, its price, and the ideas that came back. */
.pe-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pe-ask .pe-rowacts { align-items: center; gap: 12px; }
.pe-askhint, .pe-bghint { font-size: var(--t-caption-s); color: var(--muted); line-height: 1.4; }
.pe-asksaid { margin: 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.5; }
.pe-options { display: flex; flex-direction: column; gap: 6px; }
.pe-opt { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name try" "why try"; align-items: center; gap: 0 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pe-opt.on { border-color: var(--brand); background: var(--brand-dim); }
.pe-optname { grid-area: name; font-size: var(--t-label-sm-s); font-weight: 600; }
.pe-optwhy { grid-area: why; font-size: var(--t-caption-s); color: var(--muted); }
.pe-opt .btn { grid-area: try; }

/* The ask bar is put away while a page is edited by hand. Its class
   sets display, which outranks the UA rule for [hidden]. */
.ide-askbar[hidden], .ide-spend[hidden] { display: none; }
/* Tweaks: tokens as swatches and steps, typed values when wanted. */
.pe-group { display: flex; flex-direction: column; gap: 6px; }
.pe-grouplabel { font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.pe-token { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; }
.pe-token .pe-sw { width: 16px; height: 16px; border-radius: var(--r-xs); border: 1px solid var(--border); }
.pe-tokname { font-size: var(--t-caption-s); color: var(--text); text-transform: capitalize; }
.pe-tokname small { display: block; font-size: var(--t-caption-s); color: var(--muted); text-transform: none; }
.pe-house { padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--r-md); }
.pe-token input[type="color"] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; }
.pe-token .pe-tokval { grid-column: 2 / -1; width: 100%; font: inherit; font-size: var(--t-body-xs-s); padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--muted); }
.pe-token input[type="color"] + .pe-tokval { grid-column: 2 / -1; }
.pe-token .pe-tokval.wide { grid-column: 2 / -1; }
/* A row with no swatch: the name at its own width, the value beside it. */
.pe-token.plain { grid-template-columns: auto 1fr; }
.pe-token.plain .pe-tokname { white-space: nowrap; }
.pe-token.plain .pe-tokval { grid-column: 2; }
.pe-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pe-seg button { border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--t-caption-s); padding: 4px 8px; cursor: pointer; }
.pe-seg button + button { border-left: 1px solid var(--border); }
.pe-seg button.on { color: var(--brand-text); background: var(--brand-dim); font-weight: 600; }
/* ── The designer's controls (2026-09-22) ──────────────────────────
   Chips with plain names off the page's own scale, icons for
   alignment and size modes, a spacing box, a slider, and a preview on
   every chip that can carry one. */
.pe-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pe-chip {
  display: inline-flex; align-items: center; gap: var(--sp-15); height: 28px; padding: 0 var(--sp-25); border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.pe-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.pe-chip.on { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.pe-chip.pe-chipmore { padding: 0 var(--sp-2); letter-spacing: 1px; }
.pe-chips.wide .pe-chip { flex: 1 1 auto; justify-content: center; }
.pe-corner { display: inline-block; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right: 0; border-bottom: 0; }
.pe-shadow { display: inline-block; width: 14px; height: 10px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border); }
.pe-custom { width: 100%; font: inherit; font-size: var(--t-body-xs-s); padding: var(--sp-15) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
.pe-seg.pe-icons button, .pe-seg.pe-modes button { display: inline-grid; place-items: center; width: 30px; padding: 0; height: 26px; }
.pe-row.pe-dims .pe-modes { flex: none; }
.pe-styles { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(-1 * var(--sp-1)); }
.pe-style {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-md); background: none;
  font: inherit; line-height: 1.15; color: var(--text-primary); cursor: pointer; text-align: left;
}
.pe-style small { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.pe-style:hover { background: var(--bg-sunken); }
.pe-style.on { background: var(--signal-live-soft); color: var(--signal-live); }
.pe-style.on small { color: var(--signal-live); }
.pe-style.pe-chipmore span { font-size: var(--t-caption-s); letter-spacing: 1px; }
/* The spacing box: margin outside, padding inside, the element in the middle. */
.pe-spacebox { position: relative; height: 128px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-sunken); margin-top: 2px; }
.pe-sbinner { position: absolute; inset: 30px 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.pe-sbcore { position: absolute; inset: 26px 30px; border-radius: var(--r-xs); background: var(--signal-live-soft); border: 1px solid var(--signal-live-line); }
.pe-sblabel { position: absolute; left: 6px; top: 4px; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); pointer-events: none; }
.pe-sblink { position: absolute; right: 4px; top: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--r-full); background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.pe-sblink.on { color: var(--signal-live); background: var(--signal-live-soft); }
/* Written to outweigh the one field frame (input:not(...) x4, 0,5,1): a side's number is a small thing in a box, not a field. */
.pe-panel .pe-row .pe-spacebox input.pe-sbv[data-pespace] {
  position: absolute; width: 34px; height: 20px; padding: 0; margin: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; text-align: center; resize: none;
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); line-height: 18px; color: var(--text-primary); box-shadow: none;
}
.pe-panel .pe-row .pe-spacebox input.pe-sbv[data-pespace]:hover { border-color: var(--border); background: var(--surface); }
.pe-panel .pe-row .pe-spacebox input.pe-sbv[data-pespace]:focus-visible { border-color: var(--signal-live); background: var(--surface); box-shadow: 0 0 0 3px var(--signal-live-soft); }
.pe-row .pe-spacebox > input.pe-sbv.t { left: 50%; top: 5px; transform: translateX(-50%); }
.pe-row .pe-spacebox > input.pe-sbv.b { left: 50%; bottom: 5px; transform: translateX(-50%); }
.pe-row .pe-spacebox > input.pe-sbv.l { left: 2px; top: 50%; transform: translateY(-50%); width: 30px; }
.pe-row .pe-spacebox > input.pe-sbv.r { right: 2px; top: 50%; transform: translateY(-50%); width: 30px; }
.pe-row .pe-sbinner > input.pe-sbv.t { left: 50%; top: 3px; transform: translateX(-50%); }
.pe-row .pe-sbinner > input.pe-sbv.b { left: 50%; bottom: 3px; transform: translateX(-50%); }
.pe-row .pe-sbinner > input.pe-sbv.l { left: 1px; top: 50%; transform: translateY(-50%); width: 28px; }
.pe-row .pe-sbinner > input.pe-sbv.r { right: 1px; top: 50%; transform: translateY(-50%); width: 28px; }
.pe-row.pe-sliderrow { flex-direction: row; align-items: center; gap: var(--sp-2); }
.pe-row.pe-sliderrow > span { flex: 0 0 52px; }
.pe-row.pe-sliderrow input[type="range"] { flex: 1; min-width: 0; accent-color: var(--signal-live); }
.pe-row.pe-sliderrow output { flex: 0 0 38px; text-align: right; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.pe-swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pe-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; background: var(--surface); }
.pe-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.pe-swatch.none { background: linear-gradient(135deg, transparent 45%, var(--border-strong) 45%, var(--border-strong) 55%, transparent 55%); }
.pe-swatches input[type="color"] { width: 24px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-xs); background: none; margin-left: 2px; }
/* The set bar under the editor's tabs: add, link, preview, the step. */
/* One bar over the page. The row for a new page is there only while
   one is being named; the link hint sits on the bar while a link is
   waited for; the rest (Link, the prototype document, Open, the
   exports) is behind the ⋯. */

/* The page editor: Craft Studio's own shell, inside the runner's canvas. */
.wr-editor.ide-shell { height: calc(100vh - 320px); min-height: 480px; max-width: none; }
.wr-editor .ide-sentence { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); }
.wr-editor .ide-sentence b { color: var(--text); font-weight: 600; }
.wr-edver { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption-s); color: var(--subtle); }
.wr-edver select { font: inherit; font-size: var(--t-caption-s); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 2px 6px; max-width: 260px; }

.wr-sofar { font-size: var(--t-caption-s); color: var(--muted); margin: var(--sp-2) 0 0; }
.wr-done { max-width: 640px; margin: 40px auto 0; text-align: center; }
.wr-done h2 { margin: 0 0 8px; font-size: var(--t-title-lg-s); font-weight: 600; letter-spacing: -.02em; }
.wr-done p { margin: 0; font-size: var(--t-body-xs-s); color: var(--muted); line-height: 1.6; }
/* What the app did here: the count and the estimate, under the summary, in the settled colour. */
.wt-madehead .wr-saved { margin-top: var(--sp-2); color: var(--status-settled); }
.wt-madehead .wr-saved[hidden] { display: none; }
.wr-doneacts { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* ══════════════════════════════════════════════
   Send to Figma

   The panel states what is going before it goes. Every row is a count
   the plugin will report back, so the two can be compared rather than
   trusted.
══════════════════════════════════════════════ */
.modal-overlay .figma-send-box { width: 520px; }

.fs-manifest { display: flex; flex-direction: column; gap: 0; margin: 0 0 4px; }
.fs-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: var(--t-body-xs-s); line-height: 1.45;
}
.fs-row:last-child { border-bottom: 0; }
.fs-row span { color: var(--muted); flex: none; }
.fs-row b { font-weight: 600; text-align: right; }

.fs-code-wrap {
  margin-top: 16px; padding: 16px;
  background: var(--tint-4); border-radius: var(--r-xs);
  text-align: center;
}
.fs-code-lead { margin: 0 0 8px; font-size: var(--t-body-xs-s); color: var(--muted); }
.fs-code-lead b { color: var(--text); font-weight: 600; }
.fs-code {
  font-family: var(--font-mono);
  font-size: var(--t-title-lg-s); font-weight: 700; letter-spacing: .22em;
  text-indent: .22em;                 /* the tracking pads the right edge only */
  color: var(--text); user-select: all;
}
.fs-code-note { margin: 8px 0 0; font-size: var(--t-caption-s); color: var(--subtle); }

.fs-problem {
  margin-top: 12px; padding: 12px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--color-warning);
  border-radius: var(--r-2xl); background: var(--surface);
}
.fs-problem b { display: block; font-size: var(--t-label-sm-s); font-weight: 600; margin-bottom: 4px; }
.fs-problem span { display: block; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.55; }

/* The plugin's own location, which is a path and reads like one. */
.fc-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fc-path code {
  font-size: var(--t-caption-s); word-break: break-all;
  background: var(--tint-3); padding: 2px 6px; border-radius: var(--r-xs);
}
.fs-note {
  margin: -4px 0 8px; font-size: var(--t-caption-s); color: var(--subtle);
  line-height: 1.5; max-width: 42em;
}

/* ── The split, once there is a result ──────────────────────────────
   The form on the left, what came back on the right, a handle between
   them, and each side scrolling on its own so reading the report does
   not scroll the fields away. */
/* The rail stops being a rail and goes under the form: the right-hand
   side belongs to the result now. */
/* Back to a single column inside a narrow pane: two 300px tracks do not
   fit in 460px, and auto-fit would otherwise keep trying. */
/* A column, so the report can be told to take what is left. A
   percentage height inside an auto-height scroller resolves to nothing,
   which is why the iframe sat at its floor with the pane empty below. */
/* One pixel is the line; the grab area is the twelve around it, which is
   what a pointer can actually hit. */
/* A hairline is the right resting state and a poor advertisement. A
   short grip, on hover, says the seam is a control without making the
   page look like it has a scrollbar down the middle of it. */
/* While dragging, the iframe must not eat the pointer. */

/* The report fills the pane rather than a fixed slice of the viewport. */

/* ══════════════════════════════════════════════
   The head every field wears

   A label was one uppercase line and an "optional" after it. What a
   field is for, whether it has to be filled and how much is in it were
   all things you found out by looking at the field itself, or by
   pressing Run and reading the refusal.
══════════════════════════════════════════════ */
.mf-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
.mf-name { min-width: 0; }
.mf-req {
  font-style: normal; font-weight: 600; letter-spacing: .04em;
  color: var(--brand-text); flex: none;
}
.mf-opt {
  font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--subtle); flex: none;
}
/* The live figure sits at the far end, where a number belongs. */
.mf-meta {
  margin-left: auto; flex: none; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mf-hint {
  font-size: var(--t-caption-s); font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); line-height: 1.5;
  margin-top: -2px;
}

/* A chip field is a set. It sat in a bordered box while every other
   field was bare, for no reason the eye could find: one rule now, a
   frame means "type here", and a set of chips has its label. */
.mf-group { gap: 8px; }
.mf-group .mf-chips { margin-top: 2px; }

/* A group of screens, as a card with its place in the order on it. */
.mf-well-n {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: var(--r-xs); background: var(--surface-hover);
  font-size: var(--t-micro-s); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mf-drop {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-height: 96px; padding: 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-2xl);
  background: var(--bg); color: var(--muted); cursor: pointer;
  font: inherit; text-transform: none; letter-spacing: 0;
}
.mf-drop:hover { border-color: var(--brand); color: var(--brand-text); background: var(--surface); }
.mf-drop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mf-drop b { font-size: var(--t-label-sm-s); font-weight: 600; }
.mf-drop small { font-size: var(--t-caption-s); color: var(--subtle); }
/* The card is the drop target, so the zone inside it must not eat the
   pointer on the way in. */
.mf-well.over .mf-drop { border-color: var(--brand); background: var(--surface); }

/* ── The plan, in the rail ──────────────────────────────────────────
   A numbered list with a line down it, because a plan is an order and
   dots do not say which is first. The numbers come from a counter
   rather than markup, so the same rows render as the craft thread's
   flat list everywhere else. */
/* The thread between the steps, stopping at the last one. */

/* The Custom chip, while it is being typed into. Sized as the chip it
   replaces so the row does not jump. */
.mf-custom-in {
  min-width: 128px; max-width: 220px;
  border: 1px solid var(--brand); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-caption-s);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-lg);
  text-transform: none; letter-spacing: 0;
}
.mf-custom-in:focus { outline: 2px solid var(--color-focus); outline-offset: -1px; }

/* ══════════════════════════════════════════════
   Below the composer

   The studio opened on a headline, a box, and then nothing: a cold
   start for anybody who did not already know what to type, and no way
   back to yesterday's work without leaving the page.
══════════════════════════════════════════════ */
.stu-rowhead {
  display: flex; align-items: center; gap: 12px;
  margin: 40px 0 12px;
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
/* A rule that fills whatever the label leaves, rather than a border on
   the section that has to dodge the text. */
.stu-rowhead::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.stu-rowhead .stu-seeall {
  order: 3; flex: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-caption-s); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--brand-text);
}
.stu-rowhead .stu-seeall:hover { text-decoration: underline; }

.stu-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

/* The recents are the one card (src/card.js), at recent size. */

@media (max-width: 900px) {
  .stu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A line under a menu's list, for what the list is not showing. */
.stu-menu-note {
  padding: 8px 8px 4px; font-size: var(--t-caption-s); color: var(--subtle);
  line-height: 1.45;
}
/* The device glyph beside each platform, at list scale. */
.stu-menu-item .ic.sm { flex: none; width: 16px; height: 16px; }
.stu-menu-item .ic.sm svg {
  width: 16px; height: 16px; fill: none; stroke: var(--muted);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* The Output pill while it is still reading the brief rather than
   obeying a choice. */
.stu-pill.auto .lab b { color: var(--muted); font-weight: 600; }

/* ══════════════════════════════════════════════
   The crafts drawer

   Reached from See all. A drawer rather than a route: it is a thing you
   dip into to find or tidy something, then carry on with the brief you
   were halfway through writing.
══════════════════════════════════════════════ */
.cp-scrim {
  position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w); z-index: 880;
  background: var(--color-overlay); opacity: 0;
  transition: opacity 200ms var(--easing-default);
}
.cp-scrim.on { opacity: 1; }

.cp {
  position: fixed; top: var(--chrome-h); right: 0; bottom: 0; z-index: 890;
  width: 460px; max-width: 92vw;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -14px 0 40px rgba(var(--rgb-black), .14);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.cp.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .cp, .cp-scrim { transition: none; }
}

.cp-head {
  display: flex; align-items: flex-start; gap: 12px; flex: none;
  padding: 20px 20px 12px; border-bottom: 1px solid var(--border);
}
.cp-title h2 { margin: 0; font-size: var(--t-title-lg-s); font-weight: 600; letter-spacing: -.02em; }
.cp-title p { margin: 2px 0 0; font-size: var(--t-caption-s); color: var(--muted); }
.cp-head .modal-close { margin-left: auto; }

.cp-search { flex: none; margin: 12px 20px 4px; position: relative; display: flex; align-items: center; }
.cp-search svg {
  position: absolute; left: 11px; width: 16px; height: 16px;
  stroke: var(--muted); fill: none; stroke-width: 1.7; pointer-events: none;
}
.cp-search input[type="search"] {
  width: 100%; height: 36px; padding: 0 12px 0 32px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-body-xs-s);
}
.cp-search input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.cp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 24px; }

/* The drawer's rows are the one card (src/card.js), at row size. */

/* ── What is running, in the shell bar ──────────────────────────────
   Visible from every route, because a run outlives the screen that
   started it and used to be invisible the moment you walked away. */
.shell-run {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-control); padding: 0 var(--sp-3) 0 var(--sp-2); margin-right: 0;
  border: 1px solid var(--signal-live-line); border-radius: var(--r-md);
  background: var(--signal-live-soft); color: var(--text-primary);
  font: inherit; cursor: pointer; max-width: 320px;
}
.shell-run:hover { border-color: var(--brand); }
.shell-run:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.shell-run[hidden] { display: none; }
/* The working mark (docs/design/run-mark): smoke trails flowing over a
   body, as in the tunnel. Zero-length dashes with round caps draw the
   dots; sliding the dash offset by one period moves them along. One
   colour, the run mark's role: the ink on the dark ground, the brand
   blue on the light one, the lower trails fainter for depth. */
.shell-run-smoke { width: 20px; height: 14px; flex: none; overflow: visible; color: var(--signal-run-mark); }
.shell-run-smoke path {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 0 3.4; animation: shell-run-smoke var(--dur-flow) linear infinite;
}
.shell-run-smoke path:nth-child(2) { opacity: .7; }
.shell-run-smoke path:nth-child(3) { opacity: .45; }
@keyframes shell-run-smoke { to { stroke-dashoffset: -3.4; } }
@media (prefers-reduced-motion: reduce) {
  .shell-run-smoke path { animation: none; }
}
/* The same mark beside a piece of work's step under way (src/work.js):
   in the conversation, in the pages menu while a page is drawn. */
.wt-run-mark { width: 16px; height: 11px; flex: none; overflow: visible; color: var(--signal-run-mark); }
.wt-run-mark path {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 0 3.4; animation: shell-run-smoke var(--dur-flow) linear infinite;
}
.wt-run-mark path:nth-child(2) { opacity: .7; }
.wt-run-mark path:nth-child(3) { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  .wt-run-mark path { animation: none; }
}
/* A piece of work as one line, as a terminal shows a task: the run mark,
   what it is doing, its clock, and at the line's end the fold, which
   stays where it is while the steps open under the line. */
.wt-work-head {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--muted);
}
.wt-work-head > .wt-run-mark { flex: none; }
/* The dot in the mark's column: 8 wide, 4 either side, the mark's 16. */
.wt-work-head > .run-step-dot { width: 8px; height: 8px; margin: 0 4px; }
.wt-work-head > .wt-work-done { background: var(--green); }
.wt-work-head > .wt-work-done.partial { background: transparent; border-color: var(--border-strong); }
.wt-work-head > .wt-work-flag { background: var(--color-warning); }
.wt-work-head > .wt-work-flag.failed { background: var(--color-error); }
.wt-work-now { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-work-line {
  flex: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--subtle); font-variant-numeric: tabular-nums;
}
.wt-work-sep { flex: none; color: var(--subtle); }
.wt-work-fold {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0; white-space: nowrap;
  border: 0; background: none; cursor: pointer; font: inherit; color: var(--text);
}
.wt-work-fold:hover { color: var(--text-primary); }
.wt-work-fold svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-90deg); transition: transform var(--dur-state) var(--ease-out);
}
.wt-work.open .wt-work-fold svg { transform: none; }
.wt-work-steps { margin: var(--sp-2) 0 0 calc(16px + var(--sp-2)); }
.wt-work:not(.open) .wt-work-steps { display: none; }
.wt-pageadd-row .wt-run-mark { margin-right: var(--sp-1); vertical-align: middle; }
/* The send button as the work's Stop: the button as it was, a square in it. */
.ide-send.stop svg rect { fill: currentColor; stroke: none; }
.shell-run-lab { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.shell-run-lab b {
  font-size: var(--t-caption-s); font-weight: 600; max-width: 250px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-run-lab small { font-size: var(--t-caption-s); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ══ THE PROJECT BRIEF ═══════════════════════════════════════════
   Before the builder, and shaped like the method surface it precedes:
   the form on the left, the reason and the way on from it down the
   right. A workflow's first screen used to be a wall of empty phases
   with a two-line textarea above it. */
/* Sits where its siblings sit. It was written with `position: absolute;
   inset: 0`, which is neither: the containing block is the document, so
   the form started at x=0 underneath the rail and had its labels sliced
   off, and the header scrolled up under the app chrome. Every other
   screen at this level says the same three things, and now so does this
   one. */
/* ── The brief (spec 7.2): a head, the form at 700 beside an explainer,
   the dock. Built on the Set up stage's form rules (.wt-form) and dock. ── */
.wfbrief {
  display: none; position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w);
  background: var(--bg-page); z-index: 700; overflow: hidden;
}
.wfbrief.open { display: flex; flex-direction: column; }
.wfb-head {
  flex: none; display: flex; align-items: center; gap: var(--sp-35);
  padding: var(--sp-6) var(--sp-7) 0;
}
.wfb-head .wthead-back[hidden] { display: none; }
.wfb-head .wthead-back {
  width: var(--h-control); height: var(--h-control); min-height: 0; padding: 0; flex: none; display: inline-grid; place-items: center;
  border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary);
}
.wfb-title { display: grid; gap: var(--sp-15); }
.wfb-eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); line-height: var(--t-mono-xs-lh);
  letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted);
}
.wfb-title h1 { margin: 0; font-family: var(--font-serif); font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); }
.wfb-title .wfb-sub { margin: 0; font-size: var(--t-body-md-s); line-height: var(--t-body-md-lh); color: var(--text-secondary); }
/* Three questions say they are needed: the marks stand down here. */
.wfbrief #wfbRequired .mf-req { display: none; }
.wfb-body { flex: 1; min-height: 0; display: flex; gap: var(--sp-8); padding: var(--sp-6) var(--sp-7) 0; overflow: hidden; }
.wfb-form { width: 700px; flex: none; overflow-y: auto; min-width: 0; padding-bottom: var(--sp-10); }
@media (max-width: 1180px) { .wfb-form { width: auto; flex: 1; } .wfb-explain { display: none; } }
.wfb-form .wt-required { margin-top: 0; gap: var(--sp-5); }
/* The Context group: the Set up's Refine group, with two columns inside
   and the dates side by side under them. */
.wfb-context { margin-top: var(--sp-5); }
.wfb-context.open .wfb-ctx { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.wfb-ctx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; }
.wfb-dates { margin-top: var(--sp-4); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); align-items: end; }
.wfb-dates-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); grid-column: 1 / 3; align-items: end; }
.wfb-dates .mf-input { font-family: var(--font-mono); font-size: var(--t-mono-md-s); height: var(--h-field-sm); }
.wfb-when { margin: 0 0 var(--sp-25); font-size: var(--t-caption-s); line-height: 1.5; color: var(--text-muted); }
/* More context, folded: the header says what is filled. */
.wfb-foldhead .wfb-filled { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: var(--t-body-xs-s); }
/* What happens next, and that it can change. */
.wfb-next { display: grid; gap: var(--sp-25); }
.wfb-steps { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-primary); }
.wfb-nextsay { margin: 0; font-size: var(--t-body-sm-s); line-height: 1.55; color: var(--text-secondary); max-width: 46ch; }
/* The explainer column. */
.wfb-explain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; padding-bottom: var(--sp-6); }
.wfb-explain .wt-eyebrow { margin: 0; }

/* The system the workflow draws with, under the brief line. */

/* ══ THE PLAN, BEFORE THE RUN ════════════════════════════════════
   Twelve method labels down a track is a list of tools. What each
   stage contributes, what you have to bring to it and where it is
   likely to go wrong is the thing worth reading before the first
   call, and it was never anywhere. */
/* The same measure as the step it precedes, so the page does not jump
   width the moment somebody presses through it. */
.wr-plan { max-width: 960px; margin: 0 auto; padding: 24px 28px 60px; }
.wr-planwait { display: flex; gap: 6px; margin: 24px 0; }
.wr-planwait i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: wr-planwait 1.1s ease-in-out infinite;
}
.wr-planwait i:nth-child(2) { animation-delay: .16s; }
.wr-planwait i:nth-child(3) { animation-delay: .32s; }
@keyframes wr-planwait { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.wr-stages { list-style: none; margin: 20px 0 0; padding: 0; }
.wr-stage {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.wr-stagen {
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.wr-stagebody { min-width: 0; }
.wr-stagebody b { font-size: var(--t-body-sm-s); font-weight: 600; }
.wr-stagephase {
  margin-left: 8px; font-size: var(--t-label-sm-s); font-weight: 600; color: var(--subtle);
}
/* A line of a write-up stops near seventy characters: a full-width paragraph is read by nobody. */
.wr-stagebody p { margin: 4px 0 0; max-width: 70ch; font-size: var(--t-body-sm-s); color: var(--subtle); line-height: 1.55; }
.wr-bring b, .wr-risk b { color: var(--text); font-weight: 600; }
.wr-risk { color: var(--color-warning); }
.wr-prefill {
  display: inline-block; margin-top: 6px !important; font-size: var(--t-caption-s);
  color: var(--brand-text); background: var(--brand-dim);
  border-radius: var(--r-lg); padding: 1px 6px;
}
.wr-planacts { display: flex; gap: 8px; margin-top: 24px; align-items: center; }
.wr-planacts .btn.primary { margin-left: auto; }
.wr-planlink {
  background: none; border: 0; padding: 0; margin-top: 8px; cursor: pointer;
  font: inherit; font-size: var(--t-body-xs-s); color: var(--brand-text); text-decoration: underline;
}

/* ══ FIELD SUGGESTIONS ═══════════════════════════════════════════
   Worked out from the project brief and shown faded, because a
   suggestion is not an answer yet. In a text field that is the
   placeholder, which is already faded and already gets out of the way
   the moment somebody types. In a chips field there is no box to type
   in, so the options themselves are marked. */
.mf-sugg-note {
  display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
  font-size: var(--t-body-xs-s); color: var(--subtle);
}
.mf-sugg-note button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--t-label-sm-s); font-weight: 600; color: var(--brand-text); text-decoration: underline;
}
.mf-has-sugg .mf-input::placeholder { color: var(--brand-text); opacity: .5; }
.mf-has-sugg .mf-input:focus::placeholder { opacity: .38; }
.mf-chip.mf-sugg {
  border-color: var(--brand-border); color: var(--brand-text);
  background: var(--brand-dim);
}
.mf-sugg-set { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mf-sugg-scr {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: var(--t-body-xs-s); color: var(--brand-text);
  background: var(--brand-dim); border: 1px dashed var(--brand-border);
  border-radius: var(--r-2xl); padding: 2px 6px;
}
.mf-sugg-scr b { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 600; }

/* The gap after it is the gap between a control and the thing it is
   about, not the gap between two blocks. */
.wfb-head { gap: 8px; }

/* ══ THE COMPANION SHEET ═════════════════════════════════════════
   Four numbered steps and a six-cell grid is a page, not a dialog: at
   full height it ran edge to edge with its Close button off the bottom
   of the screen. The head and the foot stay put and the middle is what
   scrolls, which is what every other sheet here does. */
.modal-overlay #figmaCompanionBox {
  max-height: min(680px, calc(100vh - 96px));
  display: flex; flex-direction: column;
}
#figmaCompanionBox .modal-head, #figmaCompanionBox .modal-foot { flex: none; }
#figmaCompanionBox .figma-companion-body {
  overflow-y: auto; min-height: 0; flex: 1;
}

/* The model a backend runs, inside the backend that serves it. */
.prov-default {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.prov-default b { font-size: var(--t-label-sm-s); font-weight: 600; }
.prov-default small { font-size: var(--t-caption-s); color: var(--subtle); }
.prov-default select { margin-top: 6px; max-width: 340px; }

/* What a drawing step will be drawn with. */
.wr-ds {
  margin: 8px 0 0; font-size: var(--t-caption-s); line-height: 1.5;
  color: var(--green);
}
.wr-ds b { font-weight: 600; }
.wr-ds.none { color: var(--color-warning); }
.wr-dspick {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-weight: 600; color: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.wr-dspick:hover { color: var(--brand-text); }

/* A Figma link, on the reference set the add card has always said takes
   one. */
.mf-well-link { display: flex; gap: 6px; margin: 8px 0 0; }
.mf-well-link .mf-input { flex: 1; min-width: 0; font-size: var(--t-caption-s); padding: 4px 8px; }
.mf-well-link button {
  flex: none; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-lg); font: inherit; font-size: var(--t-caption-s);
  padding: 4px 8px; cursor: pointer; color: var(--muted);
}
.mf-well-link button:hover { border-color: var(--brand-500); color: var(--brand-text); }
.mf-well-link button:disabled { opacity: .5; cursor: default; }
.mf-well-say { margin: 4px 0 0; font-size: var(--t-caption-s); color: var(--subtle); }
.mf-well-say:empty { display: none; }
.mf-well-say.err { color: var(--color-error); }

/* Drafting a position instead of gathering one. */
.mf-draft {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.mf-draft button {
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  border-radius: var(--r-lg); font: inherit; font-size: var(--t-caption-s);
  padding: 4px 12px; color: var(--brand-text);
}
.mf-draft button:hover { border-color: var(--brand-500); }
.mf-draft button:disabled { opacity: .55; cursor: default; }
.mf-draft small { font-size: var(--t-caption-s); color: var(--subtle); line-height: 1.5; }

/* A review that stopped the line. */
.wr-halt .wr-stephead h2 { color: var(--color-error); }
.wr-halt .wr-sub { margin-top: 8px; font-size: var(--t-body-sm-s); color: var(--subtle); }

/* ── The project plan on the Plan screen ────────────────────────
   Offered under the phases like the plan call, read in place over the
   track: the document is wide, so the frame takes the height the track
   had and the foot folds away. */
.wb-plandoc .wb-plandoc-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mf-date .mf-input { width: auto; min-width: 16ch; }
/* Where the plan is, while another step is being read: a dot on the
   cursor's tab, the underline on the one in view. */
.wrph .at { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-left: 4px; vertical-align: 2px; }
/* A step the plan has not reached: its questions, answerable now. */
.wr-early { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.wr-early .wr-k { margin: 0 0 2px; }
.wr-early .wr-sub { margin: 0 0 var(--sp-2); font-size: var(--t-caption-s); color: var(--muted); max-width: 72ch; }

/* ══ THE INSTRUMENT PRIMITIVES (docs/design/instrument-spec.md, section 3) ══
   Built in PR2 against src/ui/tokens.css: the sizes, spacing and layout
   are the spec's, snapped to its own spacing scale where the canvas used
   an odd pixel (11 reads 12, 3 reads 4, 14 stays 14); the colour and the
   faces are the design system's. WtAppFrame is the shell bar and the
   rail above. Here: WtWorkspaceHeader, WtStepRail. */

/* ── WtWorkspaceHeader (3.2): two rows, never three ── */
.wthead.wt-wshead { display: block; padding: 0; border-bottom: 0; background: var(--bg-page); }
.wt-wshead .wthead-row1 {
  display: flex; align-items: center; gap: var(--sp-35);
  height: 62px; padding: 0 var(--sp-7); box-sizing: border-box;
}
/* A quick run has no second row, so the first carries the hairline. */
.wt-wshead:has(.wthead-rail[hidden]) .wthead-row1 { border-bottom: 1px solid var(--border-hairline); }
.wt-wshead .wthead-title { display: flex; align-items: center; gap: var(--sp-35); min-width: 0; flex: 1; }
.wt-wshead .wt-crumbs { display: none; margin: 0; }
.wt-wshead .wthead-back, .wt-wshead #wfDots, .wt-wshead .btn.icon.secondary {
  width: var(--h-control); height: var(--h-control); min-height: 0; padding: 0; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary);
}
.wt-wshead .wthead-back:hover, .wt-wshead #wfDots:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-surface); }
.wt-wshead input.wthead-name:not(#wt-none) {
  font-size: var(--t-display-sm-s); font-weight: var(--t-display-sm-w); line-height: var(--t-display-sm-lh); letter-spacing: var(--t-display-sm-ls);
  font-family: var(--font-serif); padding: 0 var(--sp-15); margin-left: calc(-1 * var(--sp-15)); white-space: nowrap;
}
/* The state pill: uppercase mono, in a tone. */
.wthead-pill {
  flex: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); line-height: var(--t-mono-xs-lh); letter-spacing: var(--t-mono-xs-ls);
  text-transform: uppercase; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2);
  background: var(--bg-sunken); border: 1px solid var(--border-hairline); color: var(--text-secondary);
}
.wthead-pill[hidden] { display: none; }
.wthead-pill[data-tone="live"] { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); }
.wthead-pill[data-tone="settled"] { background: var(--status-settled-soft); border-color: var(--status-settled-line); color: var(--status-settled); }
/* The views as a segmented switch: a sunken bed, the active one lifted. */
.wt-wshead .wf-modes {
  display: inline-flex; gap: var(--sp-05); border: 0; overflow: visible; margin: 0;
  background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--sp-1);
}
.wt-wshead .wf-modes button {
  height: var(--h-control); padding: 0 var(--sp-35); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text-secondary); font-size: var(--t-body-xs-s); font-weight: 400; line-height: 1;
}
.wt-wshead .wf-modes button + button { border-left: 0; }
.wt-wshead .wf-modes button:hover:not(:disabled):not(.on) { color: var(--text-primary); background: transparent; }
.wt-wshead .wf-modes button.on { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; }
.wt-wshead .wf-modes button:disabled { opacity: .4; }
.wt-wshead .wthead-right { gap: var(--sp-25); }
/* Row two: the context rail. */
.wt-wshead .wthead-rail {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 0 var(--sp-7); margin: 0; box-sizing: border-box; min-width: 0;
  background: var(--bg-rail); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline);
  font-size: var(--t-body-xs-s); color: var(--text-secondary);
}
.wt-wshead .wthead-rail[hidden] { display: none; }
.wt-wshead .wthead-rail[data-variant="meta"] { height: 44px; }
.wt-wshead .wthead-rail[data-variant="steps"] { height: 50px; }
.wt-wshead .wthead-railleft { display: flex; align-items: center; min-width: 0; flex: 1; }
.wt-wshead .wthead-railright { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* On Plan and Made the two controls stand at the left, the system's
   pill first, and the counts at the right; on Run the step rail has the
   left and the controls the right (2026-09-21). */
.wt-wshead .wthead-rail[data-variant="meta"] .wthead-railright { order: -1; }
.wt-wshead .wthead-rail[data-variant="meta"] .wthead-railleft { justify-content: flex-end; }
.wthead-picklabel { color: var(--text-muted); margin-right: var(--sp-1); }
.wthead-picklabel::after { content: "·"; margin-left: var(--sp-1); color: var(--border-strong); }
/* The counts: a run of mono, the number dark, the noun quieter, a bar between. */
.wt-wshead .wthead-state { display: inline-flex; align-items: center; gap: var(--sp-25); white-space: nowrap; overflow: hidden; }
.wt-wshead .wthead-state[hidden] { display: none; }
.wthead-count {
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); letter-spacing: var(--t-mono-xs-ls); line-height: var(--t-mono-xs-lh);
  text-transform: uppercase; color: var(--text-secondary);
}
.wthead-count b { font-weight: inherit; color: var(--text-primary); }
.wthead-bar { font-style: normal; color: var(--border-strong); }
/* The two pills at the right: the system, and the brief's disclosure. */
.wt-wshead .wthead-pick, .wt-wshead .wthead-more {
  height: var(--h-meta); display: inline-flex; align-items: center; gap: var(--sp-15);
  padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface);
  font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.wt-wshead .wthead-pick:hover, .wt-wshead .wthead-more:hover { color: var(--text-primary); border-color: var(--border-strong); text-decoration: none; }
.wt-wshead .wthead-pick[hidden], .wt-wshead .wthead-more[hidden] { display: none; }
.wt-wshead .wthead-pick.none { color: var(--text-muted); }
.wt-wshead .wthead-state:not(:empty) + .wthead-pick::before { content: none; }
.wt-wshead .wthead-more::after { content: " ▾"; font-size: var(--t-micro-s); }
.wt-wshead .wthead-more.opens::after { content: " ›"; }
.wt-wshead .wthead-more.open::after { content: " ▴"; }
.wt-wshead .wthead-details { padding: var(--sp-25) var(--sp-7); margin: 0; border-bottom: 1px solid var(--border-hairline); background: var(--bg-rail); }
/* The Overview's head (the agreed screens, 2 October 2026): the name as
   the page's title with its pill, the counts as a quiet line under it,
   then the views as tabs, the picker at the tabs' right. */
.wt-wshead.tabs .wthead-row1 { height: auto; padding: var(--sp-6) var(--sp-7) 0; border-bottom: 0; }
.wt-wshead.tabs input.wthead-name:not(#wt-none) { font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); }
.wt-wshead.tabs .wthead-pill { border: 0; border-radius: var(--r-pill); padding: 0 var(--sp-2); height: 20px; display: inline-flex; align-items: center; gap: var(--sp-15); }
.wt-wshead.tabs .wthead-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wt-wshead.tabs .wthead-rail { height: auto; padding: var(--sp-1) var(--sp-7) 0; background: none; border: 0; }
.wt-wshead.tabs .wthead-rail[data-variant="meta"] .wthead-railleft { justify-content: flex-start; }
.wt-wshead.tabs .wthead-railright { display: none; }
.wt-wshead.tabs .wthead-count { font-family: inherit; font-size: var(--t-body-xs-s); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.wt-wshead.tabs .wthead-count b { color: var(--text-muted); }
.wthead-tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-7) 0; border-bottom: 1px solid var(--border-hairline); }
.wthead-tabs[hidden] { display: none; }
.wthead-tabsl { display: flex; min-width: 0; }
.wthead-tabsr { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.wt-wshead .wthead-tabs .wf-modes { gap: var(--sp-5); padding: 0; background: none; border-radius: 0; }
.wt-wshead .wthead-tabs .wf-modes button {
  height: 40px; padding: 0 var(--sp-1); border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; box-shadow: none; font-size: var(--t-body-md-s); color: var(--text-secondary);
}
.wt-wshead .wthead-tabs .wf-modes button.on { background: none; box-shadow: none; color: var(--text-primary); border-bottom-color: var(--text-primary); }
.wt-wshead .wthead-details[hidden] { display: none; }
/* Folded, for reading a document or editing a page: row one alone, the
   crumbs carrying the name, and no rail. */
.wt-wshead.folded { padding: 0; }
.wt-wshead.folded .wthead-row1 { height: 52px; box-sizing: border-box; padding: 0 var(--sp-7); border-bottom: 1px solid var(--border-hairline); }
.wt-wshead.folded .wt-crumbs { display: flex; flex-wrap: nowrap; }
.wt-wshead.folded .wt-crumbs .crumb:last-child { color: var(--text-primary); font-weight: 600; }
.wt-wshead.folded input.wthead-name:not(#wt-none), .wt-wshead.folded .wthead-pill, .wt-wshead.folded .wthead-rail, .wt-wshead.folded .wthead-details,
.wt-wshead.folded .wf-modes { display: none; }
.wt-wshead .wthead-right .btn[hidden], .wt-wshead #wfDots[hidden] { display: none; }
.wthead-fold { display: none; white-space: nowrap; }
.wt-wshead.folded .wthead-fold:not([hidden]) { display: inline; }

/* ── WtStepRail (3.3): the one step navigation ── */
.wthead-steps {
  display: flex; align-items: center; gap: var(--sp-25); min-width: 0; max-width: 100%;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: var(--sp-05) 0;
}
.wthead-steps::-webkit-scrollbar { display: none; }
.wthead-steps[hidden] { display: none; }
/* When the row runs past the head, it fades only at an end with more
   beyond it: faded at both ends always, the sticky phase at the start
   lost its first letter ("EFINE") and the last chip read as cut. */
.wthead-steps.more-l {
  mask-image: linear-gradient(90deg, transparent, rgba(var(--rgb-black), 1) 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(var(--rgb-black), 1) 24px);
}
.wthead-steps.more-r {
  mask-image: linear-gradient(90deg, rgba(var(--rgb-black), 1) calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, rgba(var(--rgb-black), 1) calc(100% - 24px), transparent);
}
.wthead-steps.more-l.more-r {
  mask-image: linear-gradient(90deg, transparent, rgba(var(--rgb-black), 1) 24px, rgba(var(--rgb-black), 1) calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(var(--rgb-black), 1) 24px, rgba(var(--rgb-black), 1) calc(100% - 24px), transparent);
}
/* The sticky phase stands clear of the fade, and the chips that scroll
   under it fade into it rather than running into its word. */
.wthead-steps.more-l .wsr-phase { padding-left: var(--sp-6); }
.wthead-steps.more-l .wsr-phase::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--sp-6)); width: var(--sp-6);
  background: linear-gradient(90deg, var(--bg-rail), transparent); pointer-events: none;
}
.wsr-phase {
  position: sticky; left: 0; z-index: 1; flex: none; padding-right: var(--sp-05);
  font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); font-weight: var(--t-mono-2xs-w); letter-spacing: var(--t-mono-2xs-ls); line-height: var(--t-mono-2xs-lh);
  text-transform: uppercase; color: var(--text-muted); background: var(--bg-rail);
}
.wsr-sep { flex: none; width: var(--sp-35); height: 1px; background: var(--border-hairline); }
.wsr-chip {
  flex: none; height: var(--h-control); display: inline-flex; align-items: center; gap: var(--sp-15);
  padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; scroll-snap-align: center;
  font: inherit; font-size: var(--t-body-xs-s); line-height: 1; white-space: nowrap; max-width: 240px;
}
.wsr-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.wsr-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wsr-chip .wsr-n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-style: normal; color: var(--text-muted); }
.wsr-chip .wsr-tick { color: var(--status-settled); }
.wsr-chip .wsr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-live); flex: none; }
.wsr-chip .wsr-l { overflow: hidden; text-overflow: ellipsis; }
/* Stopped: its dot in the caution colour. */
.wsr-chip.stopped .wsr-dot { background: var(--status-caution); }
/* Held for the field, or skipped: a dashed edge and the word. */
.wsr-chip.held, .wsr-chip.skipped { border-style: dashed; color: var(--text-muted); }
/* The one being read. */
.wsr-chip.on { box-shadow: inset 0 0 0 1.5px var(--brand); border-color: var(--brand); }

/* ── WtStageHeader (3.4), WtLedgerRail (3.5), WtActionDock (3.6), and
   the Set up body (7.4): the runner's Set up stage, converted as the
   proof. The other stages keep their chrome until PR3. ── */
/* The canvas, docked: the stage scrolls, the dock stays at the foot. */
.wr-canvas.docked { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.wt-stage.wr-step {
  flex: 1; min-height: 0; overflow-y: auto; max-width: none; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-8); align-items: start;
  padding: var(--sp-6) var(--sp-7) var(--sp-10);
}
.wt-work { min-width: 0; }
@media (max-width: 1279px) {
  .wt-stage.wr-step { grid-template-columns: minmax(0, 1fr) 262px; gap: var(--sp-6); }
}
@media (max-width: 1023px) {
  .wt-stage.wr-step { grid-template-columns: minmax(0, 1fr); }
  .wt-ledger { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); padding-top: var(--sp-5); position: static; }
}
/* The eyebrow: the smallest mono, uppercase, for a section's label. */
.wt-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); font-weight: var(--t-mono-2xs-w); letter-spacing: var(--t-mono-2xs-ls); line-height: var(--t-mono-2xs-lh);
  text-transform: uppercase; color: var(--text-muted);
}
.wt-link { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wt-link:hover { color: var(--text-primary); }

/* A step's head (the agreed screens of 2 October 2026): its number, its
   name as the screen's title, what it does, and its status line. */
.wr-stagehead { display: grid; gap: var(--sp-15); margin-bottom: var(--sp-6); }
.wr-stepno {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); line-height: var(--t-mono-xs-lh);
  letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted);
}
.wr-stepname {
  margin: 0; font-family: var(--font-display); font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w);
  line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); color: var(--text-primary);
}
.wr-stagehead .wr-blurb { margin: 0; font-size: var(--t-body-md-s); font-weight: 400; line-height: var(--t-body-md-lh); max-width: 72ch; color: var(--text-secondary); }
.wr-stagehead.dense .wr-stepname { font-size: var(--t-display-md-s); }
/* The status line: a pill for where the step is, what that state needs said, the step's own acts at the right. */
.wt-status {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control); margin-top: var(--sp-35);
  font-size: var(--t-body-xs-s); line-height: var(--t-body-xs-lh); color: var(--text-muted);
}
.wt-statpill {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-15); height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); letter-spacing: var(--t-mono-xs-ls);
  text-transform: uppercase; white-space: nowrap; background: var(--bg-sunken); color: var(--text-muted);
}
.wt-statpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wt-statpill[data-tone="live"] { background: var(--signal-live-soft); color: var(--signal-live); }
.wt-statpill[data-tone="settled"] { background: var(--status-settled-soft); color: var(--status-settled); }
.wt-statpill[data-tone="caution"] { background: var(--status-caution-soft); color: var(--status-caution); }
.wt-statsay { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wt-statacts { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.wt-statacts .wt-link { margin-left: 0; }
/* What follows the head sits under it at the head's own gap, not its own margin as well. */
.wr-stagehead + .wt-carries, .wr-stagehead + .wr-stopped, .wr-stagehead + .wt-band { margin-top: 0; }

/* The carries banner. */
.wt-carries { margin: var(--sp-4) 0 0; background: var(--status-settled-soft); border: 1px solid var(--status-settled-line); border-radius: var(--r-2xl); padding: var(--sp-3) var(--sp-4); }
.wt-carries .wr-carry { display: flex; align-items: center; gap: var(--sp-35); margin: 0; font-size: var(--t-body-sm-s); line-height: 1.45; color: var(--status-settled); max-width: none; }
.wt-carries .wr-carry svg { flex: none; }
.wt-carries .wr-carry b { font-weight: 600; }
.wt-carries-see {
  margin-left: auto; flex: none; height: var(--h-control); background: var(--bg-surface); border: 1px solid var(--status-settled-line); border-radius: var(--r-md);
  padding: 0 var(--sp-3); font: inherit; font-size: var(--t-caption-s); color: var(--status-settled); cursor: pointer;
}
.wt-carries-see:hover { border-color: var(--status-settled); }

.wt-carries.missing { background: var(--status-caution-soft); border-color: var(--color-warning); }
.wt-carries.missing .wr-carry { color: var(--status-caution); }
/* Drafted from the brief: carried in, and an assumption, so neither
   settled green nor the caution of something missing. */
.wt-carries.drafted { background: var(--bg-rail); border-color: var(--border-hairline); }
.wt-carries.drafting { background: var(--signal-live-soft); border-color: var(--signal-live-line); }
.wt-carries.drafting .wr-carry { color: var(--text-secondary); }
.wt-carries.drafting .wr-carry b { color: var(--text-primary); }
.wt-carries.drafted .wr-carry { color: var(--text-secondary); flex-wrap: wrap; }
.wt-carries.drafted .wr-carry b { color: var(--text-primary); }
.wt-carries.drafted .wt-carries-see { margin-left: 0; border-color: var(--border-hairline); color: var(--text-primary); }
.wt-carries.drafted .wt-carries-see:hover { border-color: var(--text-secondary); }
.wt-carries.missing .wt-carries-see { border-color: var(--status-caution-line); color: var(--status-caution); }
.wt-carries.missing .wt-carries-see + .wt-carries-see { margin-left: var(--sp-2); }

/* The form: what has to be answered, first and in one column. */
.wt-form { display: block; }
.wt-required { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.wt-required:empty { display: none; }
.wt-form .mf-name { font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); }
.wt-form .mf-req {
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: var(--t-mono-xs-w); letter-spacing: var(--t-mono-xs-ls);
  text-transform: uppercase; font-style: normal; margin-left: var(--sp-2);
  padding: 0 var(--sp-15); border-radius: var(--r-sm); color: var(--status-caution); background: var(--status-caution-soft);
}
.wt-refine .mf-opt { display: none; }
.wt-form .mf-hint { font-size: var(--t-caption-s); color: var(--text-muted); margin-top: var(--sp-1); }
.wt-required .mf-label { position: relative; }
.wt-required input.mf-input { height: var(--h-input); padding: 0 var(--sp-35); font-size: var(--t-body-lg-s); border-radius: var(--r-lg); border: 1px solid var(--border-strong); width: 100%; box-sizing: border-box; }
.wt-required textarea.mf-input { padding: var(--sp-3) var(--sp-35); font-size: var(--t-body-lg-s); border-radius: var(--r-lg); border: 1px solid var(--border-strong); width: 100%; box-sizing: border-box; }
.wt-required .mf-input:focus { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wt-hasbrief input.mf-input { padding-right: 120px; }
.wt-frombrief {
  position: absolute; right: var(--sp-3); bottom: var(--sp-35);
  font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); font-weight: var(--t-mono-2xs-w); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase;
  color: var(--status-settled); background: var(--status-settled-soft); border: 1px solid var(--status-settled-line); border-radius: var(--r-sm); padding: var(--sp-05) var(--sp-15);
}
/* The Refine group: open, or folded rows printing what they are set to. */
.wt-fold-title { margin: 0 0 var(--sp-2); font-size: var(--t-label-md-s); font-weight: 600; }
.wt-refine { margin-top: var(--sp-4); background: var(--bg-rail); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); overflow: hidden; }
.wt-refine-head { display: flex; align-items: center; gap: var(--sp-25); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-hairline); }
.wt-refine-head b { font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); }
.wt-refine.open #wrOptional { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.wt-fold {
  display: flex; align-items: center; gap: var(--sp-35); width: 100%; text-align: left;
  background: var(--bg-surface); border: 0; border-bottom: 1px solid var(--border-soft); padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--text-primary); cursor: pointer;
}
.wt-fold:last-child, .wt-fold-open:last-child { border-bottom: 0; }
.wt-fold:hover { background: var(--tint-1); }
.wt-fold:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.wt-fold svg { color: var(--text-muted); flex: none; }
.wt-fold-name { font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); width: 210px; flex: none; }
.wt-fold-val { font-size: var(--t-body-xs-s); color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-fold-val.none { color: var(--text-muted); }
.wt-fold-open { background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.wt-fold-open .wt-link { margin-left: 0; justify-self: start; }

/* Set up's one card beside the form, Before it runs (16 October): a card, not a rail, and wider for its own words. */
.wt-stage.wr-step.wr-setup { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); }
.wt-ledger.wt-setupcard { border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); background: var(--bg-surface); padding: var(--sp-4); gap: var(--sp-4); top: var(--sp-4); }
.wt-setupcard .wt-sc-inputs { display: flex; flex-direction: column; gap: var(--sp-3); }
.wt-setupcard .wt-sc-inputs .wt-carries { margin: 0; }
.wt-setupcard .wt-sc-inputs .wr-carry { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.wt-setupcard .wt-sc-inputs .wr-carry .wt-carries-see { margin-left: 0; }
.wt-sc-rows { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-hairline); }
.wt-sc-rows > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); font-size: var(--t-body-xs-s); line-height: var(--t-body-sm-lh); }
.wt-sc-rows dt { color: var(--text-muted); }
.wt-sc-rows dd { margin: 0; color: var(--text-primary); }
.wt-sc-rows .wt-link { margin-left: 0; font-size: inherit; }
.wt-setupcard .wr-planlink { align-self: flex-start; margin-left: 0; }
.wt-happens-panel section { display: flex; flex-direction: column; padding-bottom: var(--sp-3); }
.wt-hp-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-15) 0; font-size: var(--t-body-sm-s); color: var(--text-primary); }
.wt-hp-row small.free { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wt-hp-row .wt-link { flex: none; margin-left: 0; }
.wt-hp-review { display: flex; gap: var(--sp-2); align-items: baseline; margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--signal-live-soft); color: var(--text-primary); font-size: var(--t-body-sm-s); }
.wt-hp-review b { font-weight: 600; color: var(--signal-live); }
.wt-hp-hist header b { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
/* Sized by the run's own width, so a panel beside it narrows it the same as a small window: the card goes under the form. */
@container (max-width: 1180px) { .wt-stage.wr-step.wr-setup { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); } }
@container (max-width: 960px) { .wt-stage.wr-step.wr-setup { grid-template-columns: minmax(0, 1fr); } .wt-ledger.wt-setupcard { position: static; } }
/* A carry line inside the card is the card's text, not a box in a box; a warning keeps its colour, as a line. */
.wt-setupcard .wt-carries { background: none; border: 0; padding: 0; border-radius: 0; }
.wt-setupcard .wt-carries.missing { border-left: 2px solid var(--color-warning); padding-left: var(--sp-3); }
.wt-setupcard .wt-carries.drafting { border-left: 2px solid var(--signal-live-line); padding-left: var(--sp-3); }
.wt-lacks { display: flex; flex-direction: column; gap: var(--sp-3); }
.wt-carries.could .wr-carry { color: var(--text-secondary); flex-wrap: wrap; }
.wt-carries.could .wt-carries-see { font-size: var(--t-caption-s); }

/* The ledger rail, in its Set up state. */
.wt-ledger { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-35); border-left: 1px solid var(--border-hairline); padding-left: var(--sp-7); min-width: 0; }
.wt-ledger-title { margin: 0; }
.wt-lblock h4 { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); font-weight: var(--t-mono-2xs-w); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wt-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.wt-lrow small { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.wt-lnone { margin: 0; font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-muted); }
.wt-ledger .wr-will li { padding: 0 0 var(--sp-3) var(--sp-5); font-size: var(--t-body-xs-s); font-weight: 600; color: var(--text-primary); gap: var(--sp-05); }
.wt-ledger .wr-will li i { width: 9px; height: 9px; top: 3px; border: 1.5px solid var(--text-muted); background: var(--bg-surface); }
.wt-ledger .wr-will li::before { left: 4px; top: 14px; border-left-color: var(--border-hairline); }
.wt-ledger .wr-will li.gate i { border-color: var(--signal-live); }
.wt-ledger .wr-will li small { font-weight: 400; }
.wt-ledger .wr-will li small.gate { font-size: var(--t-caption-s); color: var(--signal-live); }
.wt-ledger .wr-will li small.free { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--status-settled); }
/* Set up's side (the agreed screens, 2 October 2026): what happens, numbered, a review marked with the status line's pill; no rail of dots. */
.wt-ledger .wr-will.wt-happens li { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding: 0 0 var(--sp-3); font-weight: 400; color: var(--text-primary); }
.wt-ledger .wr-will.wt-happens li::before { display: none; }
.wt-happen { display: flex; gap: var(--sp-15); min-width: 0; font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }
.wt-happen .n { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wt-ledger .wr-will.wt-happens li small { flex: none; margin-top: 1px; }
.wt-ledger .wr-will.wt-happens li small.gate.wt-statpill { color: var(--signal-live); }
.wt-ledger .wr-will.wt-happens li .wr-wording { flex: none; font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-ledger .wr-will.wt-happens li .wr-wording:hover { color: var(--text-primary); }
.wr-wording-text { margin: var(--sp-3) 0 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--t-caption-s); line-height: var(--t-body-sm-lh); color: var(--text-primary); }
/* What arrived, as a line on the surface with its way in at the right; a caution keeps its own tint. */
.wt-carries.wt-carryline { background: var(--bg-surface); border-color: transparent; padding: var(--sp-25) var(--sp-4); }
.wt-carryline .wr-carry { color: var(--text-secondary); font-size: var(--t-body-xs-s); }
.wt-carryline .wr-carry svg { color: var(--text-muted); }
.wt-carryline .wt-carries-see { height: auto; padding: 0; border: 0; background: none; color: var(--signal-live); font-weight: 600; }
.wt-carryline .wt-carries-see:hover { text-decoration: underline; text-underline-offset: 3px; }
.wt-lchips { display: flex; flex-wrap: wrap; gap: var(--sp-15); margin-bottom: var(--sp-2); }
.wt-lchip { font: inherit; font-size: var(--t-micro-s); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); color: var(--text-secondary); background: var(--bg-surface); }
button.wt-lchip { cursor: pointer; }
button.wt-lchip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.wt-note { background: var(--bg-rail); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-3) var(--sp-35); font-size: var(--t-caption-s); line-height: 1.5; color: var(--text-secondary); }
.wt-note .wr-ds { margin: 0; font-size: inherit; color: inherit; }
.wt-note .wr-ds.none { color: var(--status-caution); }
.wt-ledger .wr-planlink { margin: 0; align-self: flex-start; }

/* The dock. */
.wt-dock {
  flex: none; height: 76px; box-sizing: border-box; position: relative; z-index: var(--z-dock);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: 0 var(--sp-7); background: var(--bg-surface); border-top: 1px solid var(--border-hairline); box-shadow: var(--shadow-dock);
}
.wt-dock-status { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 180px; flex: 1 1 auto; }
.wt-dock-title { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; min-height: 20px; min-width: 0; max-width: 100%; }
.wt-dock-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wt-dock.guarded .wt-dock-ready { display: none; }
.wt-dock .wr-guard { display: none; align-items: center; gap: var(--sp-15); margin: 0; min-height: 0; font-size: inherit; color: var(--status-caution); }
.wt-dock.guarded .wr-guard { display: inline-flex; }
.wt-dock .wr-guard svg { flex: none; }
.wt-dock .wr-cost {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-dock-acts { display: flex; align-items: center; gap: var(--sp-5); flex: none; min-width: 0; }
.wt-dock-primary:not(.wt-dock-named) { flex: none; }
/* Beside an open panel the screen is narrow: the buttons stay whole (a
   primary clipped to "Rur" was the audit of 11 October), and the words
   give way, the title onto a second line before it is cut. */
html.wt-split .wt-dock-status { min-width: 0; flex: 1 1 0; }
html.wt-split .wt-dock-title .wt-dock-ready, html.wt-split .wt-dock-title .wt-guard-text {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
html.wt-split .wt-dock-title { line-height: 1.3; }
html.wt-split .wt-dock .wr-cost { max-width: 100%; }
/* The step's bar at the top, beside a panel: its name keeps its width on
   one line and the line after it gives way first, to nothing if need be
   (the pilot shots of 15 October: "Comp… docum…" beside "STEP 8 OF 9 · HA…"). */
html.wt-split .wt-dock:not(.sf-dock) .wt-dock-title { flex: 0 1 auto; }
html.wt-split .wt-dock:not(.sf-dock) .wt-dock-title .wt-dock-ready, html.wt-split .wt-dock:not(.sf-dock) .wt-dock-title .wt-guard-text { display: block; white-space: nowrap; -webkit-line-clamp: unset; text-overflow: ellipsis; }
html.wt-split .wt-dock:not(.sf-dock) .wr-cost { flex: 1 1 0; min-width: 0; }
.wt-dock-secondary { flex: none; white-space: nowrap; }
/* A button that names what it signs keeps to half the dock and ends in
   an ellipsis; the whole name is its title. A statement as a label ran
   it off the right of the window (24 September). */
.wt-dock-primary.wt-dock-named { max-width: min(520px, 48vw); min-width: 0; }
.wt-dock-primary.wt-dock-named > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-dock-secondary { height: var(--h-field); align-self: center; padding: 0 var(--sp-2); border: 0; background: none; font: inherit; font-size: var(--t-body-md-s); color: var(--text-secondary); cursor: pointer; }
.wt-dock-secondary:hover { color: var(--text-primary); }
.wt-dock-secondary:focus-visible, .wt-dock-primary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wt-dock-primary {
  height: var(--h-field); border-radius: var(--r-xl); padding: 0 var(--sp-6); border: 1px solid transparent;
  background: var(--action-primary-bg); color: var(--text-inverse);
  font: inherit; font-size: var(--t-body-lg-s); font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.wt-dock-primary:hover:not(:disabled) { background: var(--action-primary-hover); }
/* Guarded, the primary is still the blue one, faded: the guard beside
   it says what is missing, and the button says what will happen the
   moment it is. Grey read as no action at all. */
.wt-dock-primary:disabled { opacity: .45; cursor: not-allowed; }

/* ── The Output stage (spec 7.8), the stopped banner (7.9), the not-yet
   band (7.4): the headline and the signatures, the output cards with
   one Open and a menu, what was left behind, the receipt. ── */
.wt-band { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); background: var(--bg-rail); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.wt-band p { margin: 0; flex: 1; min-width: 0; font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-secondary); }
.wt-band .wt-link { margin-left: 0; flex: none; }
.wr-early { margin-top: var(--sp-5); }
.wr-early .wt-eyebrow { margin: 0; }
.wr-early .wr-sub { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-outhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-top: var(--sp-4); }
.wt-outhead > div { min-width: 0; flex: 1; }
.wt-outtitle { margin: 0; font-family: var(--font-serif); font-size: var(--t-display-md-s); font-weight: var(--t-display-md-w); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls); }
.wt-outtitle.small { font-size: var(--t-title-lg-s); line-height: var(--t-title-lg-lh); letter-spacing: 0; }
.wt-outsub { margin: var(--sp-1) 0 0; font-size: var(--t-body-xs-s); color: var(--text-muted); }
.wt-outheadacts { display: flex; gap: var(--sp-25); flex: none; }
.wt-outheadacts .wb-cardbtn { height: var(--h-action); }
.wb-cardbtn.icon { width: var(--h-action); padding: 0; }
.wt-decs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-25); }
.wt-dec { display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--t-caption-s); background: var(--status-settled-soft); border: 1px solid var(--status-settled-line); color: var(--status-settled); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); }
.wt-dec i { font-style: normal; }
.wt-dec b { font-weight: 600; }
.wt-dec small { font-size: inherit; color: var(--text-secondary); }
.wt-dec small::before { content: " · "; }
/* A step's outputs (the agreed screens, 2 October 2026): Pages, then
   Documents, each a section with its count; a card is its picture, which
   opens it, its name with a page's version, and a ⋯ in its corner. */
.wt-outsect + .wt-outsect { margin-top: var(--sp-7); }
.wt-outsect > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.wt-outsect h3 { margin: 0; font-size: var(--t-title-lg-s); font-weight: var(--t-title-lg-w); color: var(--text-primary); }
.wt-outsect h3 span { margin-left: var(--sp-15); font-size: var(--t-caption-s); font-weight: 400; color: var(--text-muted); }
.wt-outsect > header .wt-link { margin-left: auto; font-size: var(--t-body-xs-s); color: var(--signal-live); text-decoration: none; }
.wt-outgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-35); margin-top: var(--sp-3); }
.wt-outgrid.compact { gap: var(--sp-3); }
@media (max-width: 1279px) { .wt-outgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wt-outcard { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.wt-outbed {
  aspect-ratio: 16 / 10; width: 100%; padding: var(--sp-3); overflow: hidden; cursor: pointer; font: inherit; color: inherit;
  display: flex; align-items: flex-start; justify-content: center;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl);
}
.wt-outbed:hover { border-color: var(--border-strong); }
.wt-outbed:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wt-outcard.compact .wt-outbed { padding: var(--sp-2); }
.wt-outbed img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: top; display: block; border: 1px solid var(--border-hairline); border-radius: var(--r-xs); }
.wt-outbed .wr-outph { width: 72%; padding: var(--sp-25); background: var(--bg-sunken); border-radius: var(--r-xs); gap: var(--sp-1); }
.wt-outbed .wr-outph i { height: 3px; }
.wt-outbed .wr-outph i:first-child { height: 5px; background: var(--text-primary); opacity: 1; }
.wt-outbody { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 0 var(--sp-05); }
.wt-outcard.doc .wt-outbody { flex-direction: column; align-items: flex-start; gap: var(--sp-05); }
.wt-outbody b { flex: 1; min-width: 0; max-width: 100%; font-size: var(--t-title-md-s); font-weight: 600; line-height: 1.3; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-outbody b .wt-eyebrow { color: var(--signal-live); font-style: normal; }
.wt-outmeta { display: block; max-width: 100%; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-verpill {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--bg-sunken);
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted);
}
.wt-verpill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wt-outmore {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: var(--h-control); height: var(--h-control); display: grid; place-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-md); color: var(--text-secondary); cursor: pointer; opacity: 0;
}
.wt-outcard:hover .wt-outmore, .wt-outmore:focus-visible, .wt-outmore[aria-expanded="true"] { opacity: 1; }
.wt-outmore:hover { border-color: var(--border-strong); color: var(--text-primary); }
/* The side of a step that ran: what was decided, who uses it, what it leaves behind. */
.wt-ldec { margin: 0 0 var(--sp-2); font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-secondary); }
.wt-ldec b { color: var(--text-primary); font-weight: 600; }
.wt-ldec small { font-size: inherit; color: var(--text-muted); }
button.wt-lrow { width: 100%; border: 0; background: none; font: inherit; font-size: var(--t-body-xs-s); text-align: left; cursor: pointer; }
button.wt-lrow:hover span { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.wb-cardbtn { display: inline-flex; align-items: center; gap: var(--sp-15); }
.wb-cardbtn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
/* The stopped banner. */
.wt-stopped { margin-top: var(--sp-4); background: var(--signal-live-soft); border: 1px solid var(--signal-live); box-shadow: inset 0 0 0 0.5px var(--signal-live); border-radius: var(--r-4xl); padding: var(--sp-5); }
.wt-stopped-head { display: flex; align-items: flex-start; gap: var(--sp-35); }
.wt-stopped-head > svg { flex: none; color: var(--signal-live); margin-top: var(--sp-1); }
.wt-stopped-text { flex: 1; min-width: 0; }
.wt-stopped-text h3 { margin: 0; font-family: var(--font-serif); font-size: var(--t-display-xs-s); font-weight: var(--t-display-xs-w); line-height: var(--t-display-xs-lh); letter-spacing: var(--t-display-xs-ls); }
.wt-stopped-text p { margin: var(--sp-15) 0 0; font-size: var(--t-body-sm-s); line-height: 1.55; color: var(--text-secondary); }
.wt-stopped-count { flex: none; text-align: right; }
.wt-stopped-count b { display: block; font-family: var(--font-mono); font-size: var(--t-num-md-s); font-weight: 400; color: var(--signal-live); line-height: 1; }
.wt-stopped-count span { font-size: var(--t-micro-s); color: var(--signal-live); }
.wt-stopped-list { margin-top: var(--sp-35); background: var(--bg-surface); border: 1px solid var(--signal-live-line); border-radius: var(--r-xl); overflow: hidden; }
.wt-stopped-list header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-35); border-bottom: 1px solid var(--border-soft); }
.wt-stopped-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-25) var(--sp-35); border-bottom: 1px solid var(--border-soft); width: 100%; box-sizing: border-box; }
button.wt-stopped-row { border-left: 0; border-right: 0; border-top: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.wt-stopped-row:hover { background: var(--bg-rail); }
button.wt-stopped-row:hover span { color: var(--text-primary); }
.wt-stopped-log { margin: var(--sp-2) 0 0; display: flex; }
.wt-stopped-log .wt-link { margin-left: 0; }
.wt-stopped-row:last-child { border-bottom: 0; }
.wt-stopped-row i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--signal-live); width: 46px; flex: none; }
.wt-stopped-row span { flex: 1; min-width: 0; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.wt-stopped-row small { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); flex: none; }
/* The two ways on. */
.wt-way { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-35); }
.wt-way.rec { border-color: var(--border-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.wt-way b { display: block; font-size: var(--t-body-sm-s); font-weight: 600; }
.wt-way p { margin: var(--sp-15) 0 0; font-size: var(--t-caption-s); line-height: 1.5; color: var(--text-secondary); }
.wt-way .wt-eyebrow { display: block; margin-top: var(--sp-25); font-style: normal; }

/* ── Made (spec 7.10): the title at 40px, a filter row, a section per
   step with a 200px spine and a row of 178px cards, the dock. ── */
.wt-stage.wr-all.wt-made { display: grid; grid-template-columns: minmax(0, 1fr); }
.wt-made .wr-allmain { min-width: 0; }
.wt-madehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin: 0; }
.wt-madehead > div { min-width: 0; flex: 1; }
.wt-madehead h2 { margin: 0; font-family: var(--font-serif); font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); }
.wt-madehead p { margin: var(--sp-2) 0 0; font-size: var(--t-body-md-s); color: var(--text-secondary); line-height: 1.5; max-width: 76ch; }
.wt-madehead p b { color: var(--text-primary); }
.wt-madehead .wr-sofar { color: var(--text-muted); }
.wr-doneacts { display: flex; gap: var(--sp-2); flex: none; }
.wt-made .wr-done { margin: 0; text-align: left; }
.wt-madebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding-bottom: var(--sp-35); border-bottom: 1px solid var(--border-hairline); }
.wt-madebar .wr-allfilter { display: flex; align-items: center; gap: var(--sp-15); flex-wrap: wrap; }
.wt-madebar .wr-chip {
  height: var(--h-control); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface);
  font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-15);
}
.wt-madebar .wr-chip i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-muted); }
/* Selected, not pressed: the system's selected style, since the only filled control on a screen is the dock's next action. */
.wt-madebar .wr-chip.on { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.wt-madebar .wr-chip.on i { color: inherit; opacity: .7; }
.wt-vsep { width: 1px; height: 18px; background: var(--border-hairline); margin: 0 var(--sp-15); }
/* The segmented control, as the header's view switch. */
.wt-seg { display: inline-flex; gap: var(--sp-05); border: 0; overflow: visible; background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--sp-1); }
.wt-seg button { height: var(--h-control); padding: 0 var(--sp-35); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-body-xs-s); cursor: pointer; }
.wt-seg button + button { border-left: 0; }
.wt-seg button.on { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; }
.wt-decided { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.wt-decided:hover { text-decoration-color: var(--text-primary); }
.wt-made .wr-none { margin: 0; align-self: center; font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-madecard { width: 178px; flex: none; display: flex; flex-direction: column; gap: 0; background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); overflow: hidden; cursor: pointer; scroll-snap-align: start; }
.wt-madecard:hover { border-color: var(--border-strong); }
.wt-madecard.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wt-madecard:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wt-made .wt-madebed { aspect-ratio: auto; height: 112px; border: 0; border-radius: 0; border-bottom: 1px solid var(--border-soft); background: var(--bg-sunken); padding: var(--sp-25); display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.wt-madebed img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: top; border: 1px solid var(--border-hairline); border-radius: var(--r-xs); background: var(--bg-surface); }
.wt-madebed .wr-outph { width: 80px; padding: var(--sp-2); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-xs); gap: var(--sp-1); }
.wt-madebed .wr-outph i { height: 3px; }
.wt-madebody { padding: var(--sp-25) var(--sp-3) var(--sp-3); min-width: 0; }
.wt-madebody b { display: block; margin: 0; font-size: var(--t-body-xs-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-madebody b .wt-eyebrow { color: var(--status-settled); font-style: normal; }
.wt-madebody .wr-outmeta { display: block; margin-top: var(--sp-05); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-madebody .wt-madestep { display: none; }
/* List: one row per output. */
/* Outputs, one grid by phase (the agreed screens, 2 October 2026): the phase's name and counts, what was decided in it, its cards. */
.wt-phases { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-5); }
.wt-phase { display: flex; flex-direction: column; gap: var(--sp-3); }
.wt-phasehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.wt-phasehead .wt-eyebrow { font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); }
.wt-phasedec { margin: 0; font-size: var(--t-body-md-s); line-height: var(--t-body-md-lh); color: var(--text-primary); max-width: 96ch; }
.wt-phasedec > span { color: var(--text-muted); }
.wt-phasedec .wt-decided { display: inline; font-weight: 400; text-align: left; }
.wt-made .wr-outcards.wt-phasegrid { display: grid; grid-template-columns: repeat(auto-fill, 178px); gap: var(--sp-3); }
.wt-made .wt-phase .wr-none { align-self: flex-start; }
.wt-phaseskip { margin: 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-made .wr-allthread { margin: var(--sp-5) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }

/* ── The lists (spec 7.1): the page header with its one primary at the
   right, the segmented filter row, three columns of cards. The one
   screen with a primary in the header, because it has no dock. ── */
.wt-page .wf-head { padding: var(--sp-8) var(--sp-7) var(--sp-5); gap: var(--sp-8); }
.wt-page .wf-head h1 { font-family: var(--font-serif); font-size: var(--t-display-xl-s); font-weight: var(--t-display-xl-w); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); }
.wt-page .wf-heading { gap: var(--sp-25); }
.wt-page .wf-sub { font-size: var(--t-body-sm-s); color: var(--text-muted); }
.wt-page .wf-tools { gap: var(--sp-25); }
.wt-page .wf-tools .search { flex: 0 0 250px; min-width: 0; }
.wt-page .wf-tools .search input[type="search"] { height: var(--h-field-sm); border-radius: var(--r-lg); border: 1px solid var(--border-hairline); background: var(--bg-surface); font-size: var(--t-body-sm-s); }
.wt-page .wf-tools .btn { height: var(--h-field-sm); border-radius: var(--r-lg); padding: 0 var(--sp-4); font-size: var(--t-body-md-s); font-weight: 600; }
.wt-page .wf-tools .btn.primary { padding: 0 var(--sp-5); }
.wt-page .proj-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-35); padding: 0 var(--sp-7) var(--sp-5); border-bottom: 1px solid var(--border-hairline); }
.wt-page .proj-seg { display: inline-flex; gap: var(--sp-05); background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--sp-1); }
.wt-page .proj-seg .cat { height: var(--h-control); padding: 0 var(--sp-35); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); font-size: var(--t-body-xs-s); }
.wt-page .proj-seg .cat:hover { color: var(--text-primary); border: 0; }
.wt-page .proj-seg .cat.on { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; border: 0; }
.wt-page .proj-seg .cat .n { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-muted); }
.wt-page .proj-seg .cat.on .n { color: var(--text-muted); }
.wt-page .proj-seg .cat.is-removed { border: 0; opacity: .8; }
.wt-page .wl-count { margin-left: auto; font-size: var(--t-caption-s); }
.wt-page .wl-sort { gap: var(--sp-2); font-size: var(--t-body-xs-s); margin-left: 0; }
.wt-page .wl-sort select { height: var(--h-control-lg); border-radius: var(--r-md); border: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); padding: 0 var(--sp-25); }
.wt-page .wf-grid { padding: var(--sp-6) var(--sp-7) var(--sp-10); }
/* Four across (three beside the panel): three across a 1440 window,
   each with a bed of its own and a foot that grew with its words, read
   as a page zoomed in (2026-09-21). */
#dashboard .proj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
#dashboard .wf-row.split .proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The card at the 12px corner: the picture edge to edge on the surface,
   a landscape at 16 by 9; the foot on the sunken ground at one height
   for every card, four fixed rows: the name with its state chip, the
   spine, a line for what tells twins apart, and the meta line in mono. */
.wt-card.grid { border-radius: var(--r-4xl); border-color: var(--border-hairline); display: flex; flex-direction: column; }
.wt-card.grid:hover, .wt-card.grid:focus-within { border-color: var(--border-strong); transform: none; }
.wt-card.grid .pface { display: flex; flex-direction: column; flex: 1; }
.wt-card.grid .pthumb { height: auto; aspect-ratio: 16 / 9; background: var(--bg-surface); border-bottom: 1px solid var(--border-hairline); padding: var(--sp-35); }
.wt-card.grid .pthumb:has(img), .wt-card.grid .pthumb.plan { padding: 0; }
.wt-card.grid .pthumb img { border: 0; border-radius: 0; }
.wt-card.grid .pmeta {
  background: var(--bg-sunken); padding: var(--sp-25) var(--sp-35) var(--sp-25); box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-rows: 20px 4px 18px 18px; row-gap: var(--sp-1); align-items: center;
}
.wt-card.grid .pname-row { grid-row: 1; }
.wt-card.grid .pspine { grid-row: 2; }
.wt-card.grid .ptwin { grid-row: 3; }
.wt-card.grid .pnote { grid-row: 4; }
.wt-card .pname-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-25); min-width: 0; }
.wt-card.grid .proj-name { font-size: var(--t-body-sm-s); font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; min-width: 0; }
.wt-card .pstate {
  flex: none; margin-top: 1px; font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase;
  background: var(--bg-sunken); border: 1px solid var(--border-hairline); border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); color: var(--text-secondary);
}
.wt-card .pstate.live { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); }
.wt-card .pstate.settled { background: var(--status-settled-soft); border-color: var(--status-settled-line); color: var(--status-settled); }
.wt-card .pspine { display: flex; gap: var(--sp-05); height: 4px; }
.wt-card .pspine i { flex: 1; background: var(--border-hairline); }
.wt-card .pspine i.done { background: var(--text-primary); }
.wt-card .pspine i.done.all { background: var(--status-settled); }
.wt-card .pspine i.current { background: var(--signal-live); }
.wt-card .pspine i.held { background: var(--signal-live-line); }
.wt-card.grid .pnote { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); color: var(--text-muted); }
.wt-card.grid .proj-menu { border-radius: var(--r-md); width: var(--h-meta); height: var(--h-meta); }

/* ══ The detail panel (spec 4) ══════════════════════════════════════
   Looking never navigates. Anchored to the right edge, its top the
   bottom of the workspace header, its bottom the top of the dock, both
   measured at open. No scrim; the screen behind stays live. */
.wt-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 640px; max-width: calc(100vw - 68px); box-sizing: border-box;
  display: flex; flex-direction: column; background: var(--bg-surface); border-left: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-panel); z-index: var(--z-panel); opacity: 0; transform: translateX(24px);
}
.wt-panel.in { opacity: 1; transform: none; transition: opacity var(--dur-panel) var(--ease-panel), transform var(--dur-panel) var(--ease-panel); }
.wt-panel[hidden] { display: none; }
.wt-panel.under { opacity: .4; transform: translateX(-40px); pointer-events: none; z-index: calc(var(--z-panel) - 1); box-shadow: none; }
.wt-panel-handle { position: absolute; left: -2px; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 1; }
.wt-panel-handle:hover { background: var(--signal-live-line); }
.wt-panel-head {
  flex: none; height: 58px; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--border-hairline);
}
.wt-panel-title { min-width: 0; flex: 1; }
.wt-panel-title .wt-eyebrow { margin: 0 0 var(--sp-05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-panel-title h2 {
  margin: 0; font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w); line-height: var(--t-title-md-lh); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-panel-back {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-control-lg); padding: 0 var(--sp-2) 0 var(--sp-1);
  border: 0; border-radius: var(--r-lg); background: none; font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; max-width: 180px;
}
.wt-panel-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-panel-back:hover { background: var(--bg-rail); color: var(--text-primary); }
.wt-panel-acts { display: flex; align-items: center; gap: var(--sp-15); flex: none; }
.wt-panel-act {
  height: var(--h-control-lg); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface);
  font: inherit; font-size: var(--t-body-xs-s); color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.wt-panel-act:hover { background: var(--bg-rail); }
.wt-panel-act.strong { border-color: var(--action-primary-bg); color: var(--action-primary-bg); font-weight: 600; }
.wt-panel-icon {
  width: var(--h-control-lg); height: var(--h-control-lg); border: 0; border-radius: var(--r-lg); background: none;
  color: var(--text-secondary); font: inherit; font-size: var(--t-body-md-s); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wt-panel-icon:hover { background: var(--bg-rail); color: var(--text-primary); }
.wt-panel-toolbar {
  flex: none; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4) 0 var(--sp-5); background: var(--bg-rail); border-bottom: 1px solid var(--border-hairline);
}
.wt-panel-toolbar > .wt-eyebrow { flex: none; }
.wt-panel-toolbar .wt-eyebrow.esc { margin-left: auto; }
.wt-panel-body { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.wt-panel-foot {
  flex: none; height: 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-5); border-top: 1px solid var(--border-hairline);
}
.wt-panel-foot p { margin: 0; font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-secondary); min-width: 0; }
.wt-panel-foot .wt-panel-act { height: calc(var(--h-action) + 6px); padding: 0 var(--sp-4); }
.wt-panel-foot .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; flex: none; max-width: 50%; }
.wt-panel-strip {
  flex: none; height: 34px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-5); background: var(--bg-rail); border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted);
}
.wt-panel-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The document kind: the page in a frame, the panel's width its column;
   its sections as a row of chips in the toolbar. */
.wt-panel[data-kind="document"] .wt-panel-body { display: flex; flex-direction: column; }
/* Panels whose body is a list of their own: the same gutter as the head. */
.wt-panel[data-kind="validate"] .wt-panel-body, .wt-panel[data-kind="history"] .wt-panel-body { padding: var(--sp-4) var(--sp-5); }
.wt-panel-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.wt-panel-frame iframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--bg-surface); }
.wt-panel-frame .wt-state { margin: var(--sp-6) var(--sp-5); }
.wt-panel-jump { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wt-panel-jump::-webkit-scrollbar { display: none; }
.wt-panel-jump[hidden] { display: none; }
.wt-panel-jump .wt-outline { flex-direction: row; gap: var(--sp-1); padding: 0; border-left: 0; }
.wt-panel-jump .wt-outline-item {
  flex: none; margin: 0; height: var(--h-chip); padding: 0 var(--sp-25); border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-caption-s); line-height: 1; display: inline-flex; align-items: center; max-width: 200px;
}
.wt-panel-jump .wt-outline-item.on { border-color: var(--signal-live-line); background: var(--signal-live-soft); color: var(--signal-live); font-weight: 600; }
.wt-panel-jump .wt-outline-item.is-appendix { font-style: normal; }
/* The written kind: what a step produced, as blocks in a reading column. */
.wt-panel-read { max-width: 64ch; padding: var(--sp-5) var(--sp-5) var(--sp-8); font-size: var(--t-body-lg-s); line-height: 1.7; color: var(--text-primary); }
.wt-panel-read .wr-evblock { margin: 0 0 var(--sp-5); }
.wt-panel-read .wr-evblock b { display: block; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; font-weight: 400; color: var(--text-muted); margin-bottom: var(--sp-15); }
.wt-panel-read .wr-evblock pre { margin: 0; white-space: pre-wrap; font: inherit; }
/* The design kind: a drawn page on a sunken bed, at a width you pick. */
.wt-panel[data-kind="design"] .wt-panel-body, .wt-panel[data-kind="compare"] .wt-panel-body { background: var(--bg-sunken); }
.wt-panel-bed { padding: var(--sp-6) var(--sp-5); display: flex; justify-content: center; align-items: flex-start; height: 100%; box-sizing: border-box; overflow: auto; }
.wt-panel-page { position: relative; background: var(--bg-surface); border-radius: var(--r-5xl) var(--r-5xl) 0 0; box-shadow: var(--shadow-page); overflow: hidden; flex: none; }
.wt-panel-page iframe { border: 0; display: block; width: 1280px; height: 900px; transform-origin: 0 0; }
.wt-panel-page.phone { border-radius: var(--r-5xl); border: 6px solid var(--text-primary); box-sizing: content-box; }
.wt-panel-bed.wide { justify-content: flex-start; }
.wt-panel-nav { display: inline-flex; align-items: center; gap: var(--sp-1); }
.wt-panel-nav b { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); font-weight: 400; color: var(--text-secondary); min-width: 40px; text-align: center; }
.wt-panel-pages { display: flex; gap: var(--sp-05); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wt-panel-pages::-webkit-scrollbar { display: none; }
.wt-panel-pages button, .wt-panel-nav button {
  flex: none; height: var(--h-control); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer;
}
.wt-panel-nav button { width: var(--h-control); padding: 0; }
.wt-panel-pages button:hover, .wt-panel-nav button:hover { background: var(--tint-2); color: var(--text-primary); }
.wt-panel-pages button.on { color: var(--text-primary); font-weight: 600; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.wt-panel-nav button:disabled { opacity: .35; cursor: default; }
.wt-panel-toolbar .wt-seg { margin-left: auto; flex: none; }
/* Compare, screen by screen (wrPanelCompare): a column a direction, the
   screen whole in each, scaled to the column, and the rows that tell them
   apart under it, like a shop's comparison. */
.wt-cmp2 { display: grid; gap: var(--sp-4); padding: var(--sp-5); align-items: start; }
.wt-cmp2-col { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); padding: var(--sp-3); background: var(--bg-surface); }
.wt-cmp2-col.picked { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wt-cmp2-col header { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-label-sm-s); font-weight: 600; min-width: 0; }
.wt-cmp2-col header b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-cmp2-col header .wt-rec { margin-left: auto; }
.wt-cmp2-shot { position: relative; overflow: hidden; background: var(--bg-sunken); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border-soft); }
.wt-cmp2-shot iframe { display: block; border: 0; background: var(--bg-surface); pointer-events: none; }
.wt-cmp2-none { margin: 0; padding: var(--sp-6) var(--sp-4); font-size: var(--t-body-sm-s); color: var(--text-muted); text-align: center; }
.wt-cmp2-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-15) var(--sp-3); margin: 0; font-size: var(--t-body-xs-s); line-height: 1.5; }
.wt-cmp2-rows dt { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); padding-top: var(--sp-05); }
.wt-cmp2-rows dd { margin: 0; color: var(--text-secondary); min-width: 0; }
.wt-cmp2-rows dd.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.wt-cmp2-acts { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.wt-cmp2-pick { display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--t-body-xs-s); cursor: pointer; }
.wt-cmp2-pick input { accent-color: var(--brand); margin: 0; }
.wt-cmp2.diff .wt-cmp2-shot { opacity: .55; }
.wt-cmp2.diff .wt-cmp2-col.picked .wt-cmp2-shot { opacity: 1; }
.wt-panel-foot .wt-panel-radios { display: flex; gap: var(--sp-4); flex: none; }
.wt-panel-foot .wt-panel-radios label { display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--t-body-xs-s); cursor: pointer; }
/* Lists inside a panel: the brief, what arrived, the run's log. */
.wt-panel-list { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
/* Prose in the panel, inset as its lists are (16 October: the craft's brief touched the panel's edge). */
.wt-panel-prose { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); color: var(--text-primary); }
.wt-panel-prose p { margin: 0; max-width: 68ch; }
.wt-panel-prose .wt-panel-note { font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-panel-list section { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.wt-panel-list section > header { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.wt-panel-list section > header b { font-size: var(--t-label-sm-s); font-weight: 600; }
.wt-panel-list section > header .wt-eyebrow { margin-left: auto; }
.wt-panel-list dl { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--t-body-sm-s); line-height: 1.5; }
.wt-panel-list dt { color: var(--text-muted); }
.wt-panel-list dd { margin: 0; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.wt-panel-list dd.none { color: var(--text-muted); font-style: italic; }
.wt-panel-list p { margin: 0; font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-secondary); }
.wt-panel-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border-soft); font-size: var(--t-body-sm-s); line-height: 1.5; }
.wt-panel-row:first-of-type { border-top: 0; }
.wt-panel-row .who { flex: none; }
.wt-panel-row .what { min-width: 0; flex: 1; }
.wt-panel-row .what small { display: block; color: var(--text-muted); font-size: var(--t-caption-s); }
.wt-panel-row .num { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); color: var(--text-secondary); text-align: right; }
.wt-panel-row .rm { flex: none; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--t-caption-s); cursor: pointer; padding: 0 var(--sp-1); }
.wt-panel-row .rm:hover { color: var(--text-primary); }
.wt-panel-row.gate .what b { color: var(--signal-live); }
.wt-panel-row .who.done { color: var(--status-settled); }
.wt-panel-row .who.failed { color: var(--status-caution); }
.wt-panel-row.lost .what small { color: var(--status-caution); }
.wt-prov {
  display: inline-block; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-secondary);
  border: 1px solid var(--border-hairline); border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); white-space: nowrap;
}
.wt-panel-list details { border-top: 1px solid var(--border-soft); padding-top: var(--sp-2); }
.wt-panel-list details summary { cursor: pointer; font-size: var(--t-caption-s); color: var(--text-secondary); }
.wt-panel-list details pre { margin: var(--sp-2) 0 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); line-height: 1.5; color: var(--text-primary); max-height: 420px; overflow: auto; }
.wt-panel-list .wt-panel-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); }
.wt-panel-tile { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface); padding: var(--sp-2); text-align: left; font: inherit; cursor: pointer; }
.wt-panel-tile:hover { border-color: var(--border-strong); }
.wt-panel-tile .wt-outph { margin-bottom: var(--sp-2); }
.wt-panel-tile b { display: block; font-size: var(--t-caption-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-panel-tile .wt-prov { display: inline-block; margin-top: var(--sp-1); }
.wt-panel-tile.off { opacity: .55; }
/* The versions kind. */
.wt-panel-vers { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5); }
.wt-panel-vers li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-25) 0; border-top: 1px solid var(--border-soft); font-size: var(--t-body-sm-s); }
.wt-panel-vers li:first-child { border-top: 0; }
.wt-panel-vers li .v { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); color: var(--text-secondary); min-width: 32px; }
.wt-panel-vers li .what { flex: 1; min-width: 0; }
.wt-panel-vers li .what small { display: block; color: var(--text-muted); font-size: var(--t-caption-s); }
.wt-panel-vers li.current .v { color: var(--signal-live); }
.wt-panel-vers li .wt-check { flex: none; }
.wt-panel-vers li.away { opacity: .6; }
.wt-panel-verslabel { margin: var(--sp-3) var(--sp-5) 0; }
/* The finding kind, read-only on the stopped banner. */
.wt-panel-finding { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--t-body-sm-s); line-height: 1.55; }
.wt-panel-finding h3 { margin: 0; font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w); }
.wt-panel-finding p { margin: 0; color: var(--text-primary); }
.wt-panel-finding .k { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: var(--sp-1); }
@media (prefers-reduced-motion: reduce) { .wt-panel.in { transition: none; } }

/* ══ The design surface: the canvas (docs/design/canvas-plan.md, 3) ═══
   The set's pages as artboards on one bed, the chrome floating over
   it in capsules, the two panels fixed against the margins, the dock
   at the foot. Colour and faces from the DS; the sizes the direction's. */
.wt-cvsurface { --cv-bar-h: 68px; position: relative; flex: 1; min-height: 0; overflow: hidden; max-width: none; margin: 0; padding: 0; background: var(--bg-page); }
.wt-cvsurface .wt-cv {
  position: absolute; inset: 0; overflow: hidden; cursor: default;
  background-color: var(--bg-page);
  background-image: radial-gradient(circle, var(--border-hairline) 1px, transparent 1.2px); background-size: 20px 20px;
}
.wt-cvsurface .wt-cv.dragging, .wt-cvsurface.tool-hand .wt-cv, .wt-cvsurface.spacing .wt-cv { cursor: grab; }
.wt-cvsurface .wt-cv.dragging { cursor: grabbing; }
.wt-cvsurface .wt-cv.linking { cursor: crosshair; }
/* Promoted only while it moves (sfGesture): promoted for good, its pages stayed rastered at the scale
   they were first drawn and outgrew the memory for their tiles, so pages and the chrome went blank. */
.wt-cv-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; --cv-inv: 1; }
.wt-cvsurface.gesturing .wt-cv-layer { will-change: transform; }
.wt-cvsurface.gesturing .wt-cv-board iframe { pointer-events: none; }
/* The box drawn on the empty bed, and the pages it picks. */
.wt-cv-marquee { position: absolute; z-index: 6; pointer-events: none; border: 1px solid var(--signal-live); background: var(--signal-live-soft); border-radius: var(--r-xs); }
/* The hand's overlay: over the frames while the hand tool or space is held, so a drag anywhere pans. */
.wt-cv-hand { position: absolute; inset: 0; display: none; z-index: 3; }
.wt-cvsurface.tool-hand .wt-cv-hand, .wt-cvsurface.tool-note .wt-cv-hand, .wt-cvsurface.spacing .wt-cv-hand { display: block; }
.wt-cvsurface.tool-note .wt-cv { cursor: copy; }
/* Notes on the canvas, in the layer's own coordinates, and the pins of the comments on their elements. */
.wt-cv-note {
  position: absolute; z-index: 4; width: 236px; box-sizing: border-box; padding: 0 0 var(--sp-1); border-radius: var(--r-lg);
  /* Read at the screen's size whatever the zoom, like the pins and the names. */
  transform: scale(var(--cv-inv)); transform-origin: 0 0;
  background: var(--status-caution-soft); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); color: var(--text-primary);
}
.wt-cv-note.editing { outline: 2px solid var(--signal-live); outline-offset: 2px; }
.wt-cv-note.lost { opacity: .7; }
.wt-cv-notehead { display: flex; align-items: center; gap: var(--sp-15); height: 28px; padding: 0 var(--sp-1) 0 var(--sp-3); cursor: grab; }
.wt-cv-notehead .wt-mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--status-caution); }
.wt-cv-notex { flex: none; width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.wt-cv-notex:hover { color: var(--text-primary); background: var(--bg-surface); }
.wt-cv-notebody { display: block; width: 100%; box-sizing: border-box; border: 0; background: none; resize: none; padding: 0 var(--sp-3) var(--sp-2); font: inherit; font-size: var(--t-body-xs-s); line-height: 1.45; color: var(--text-primary); }
.wt-cv-pin {
  position: absolute; z-index: 4; width: calc(22px * var(--cv-inv)); height: calc(22px * var(--cv-inv)); margin: calc(-11px * var(--cv-inv)) 0 0 calc(-4px * var(--cv-inv));
  display: grid; place-items: center; border-radius: var(--r-full) var(--r-full) var(--r-full) var(--r-xs); background: var(--status-caution); color: var(--text-inverse);
  font-family: var(--font-mono); font-size: calc(var(--t-mono-xs-s) * var(--cv-inv)); font-style: normal; box-shadow: var(--shadow-float); cursor: pointer;
}
.wt-cv-pin.inline { position: static; width: 20px; height: 20px; margin: 0; font-size: var(--t-mono-xs-s); }
/* A comment sent (sfSendComments): settled with what it changed, or said why not. */
.wt-cv-pin.done { background: var(--status-settled); }
.wt-cv-note.resolved { background: var(--status-settled-soft); }
.wt-cv-note.resolved .wt-cv-notehead .wt-mono { color: var(--status-settled); }
.wt-cv-notesaid { margin: 0; padding: 0 var(--sp-3) var(--sp-2); font-size: var(--t-body-xs-s); line-height: 1.45; color: var(--status-settled); }
.wt-cv-note.notdone .wt-cv-notesaid { color: var(--status-caution); }
.wt-cv-send { font-weight: 600; color: var(--brand-text); }
.wt-cv-board { position: absolute; }
.wt-cv-board .ide-frame { position: absolute; inset: 0; border: 0; border-radius: var(--r-5xl); background: var(--bg-surface); box-shadow: var(--shadow-page); overflow: hidden; display: block; }
.wt-cv-board .ide-frame iframe { display: block; border: 0; width: 100%; height: 100%; background: var(--bg-surface); }
.wt-cv-board .ide-frame .wt-state { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
/* The outline and the name keep their size whatever the zoom. */
.wt-cv-board.current .ide-frame { outline: calc(2px * var(--cv-inv)) solid var(--signal-live); outline-offset: calc(6px * var(--cv-inv)); }
.wt-cv-board.focus .ide-frame { outline: calc(2px * var(--cv-inv)) solid var(--signal-live); outline-offset: calc(6px * var(--cv-inv)); }
.wt-cv-board.picked .ide-frame { outline: calc(2px * var(--cv-inv)) solid var(--signal-live); outline-offset: calc(6px * var(--cv-inv)); }
.wt-cv-board.current.off:not(.picked):not(.focus) .ide-frame { outline-color: transparent; }
.wt-cv-board.picked .wt-cv-name button b { color: var(--signal-live); }
/* The bar over the tools while two or more pages are picked: no primary; the dock keeps that. */
.wt-cv-pickbar {
  position: absolute; left: 50%; bottom: calc(var(--sp-7) + 64px); transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: var(--sp-2); height: 44px; box-sizing: border-box; padding: 0 var(--sp-2) 0 var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); box-shadow: var(--shadow-float);
  font-size: var(--t-body-sm-s); color: var(--text-primary);
}
.wt-cv-pickbar b { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); font-weight: 600; color: var(--signal-live); margin-right: var(--sp-1); }
.wt-cv-pickbar button:not(.wt-cap-ico) { height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-full); background: none; color: var(--text-primary); font: inherit; cursor: pointer; }
.wt-cv-pickbar button:not(.wt-cap-ico):hover { background: var(--bg-sunken); }
.wt-cv-pickbar .wt-cap-ico { width: 32px; height: 32px; font-size: var(--t-body-sm-s); }
.wt-cv-board.sketch .ide-frame { opacity: .9; }
/* ── Play: the set clicked through, over the surface ──────────────
   A dark room with the screen in the middle at the platform's size,
   scaled down when the window is smaller, never up; the head names the
   page and its place in the set. The surface underneath is untouched. */
.wt-player { position: fixed; inset: 0; z-index: calc(var(--z-panel) + 10); display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(var(--rgb-ink), .98); color: var(--text-inverse); }
.wt-player-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 var(--sp-3); }
.wt-player-l, .wt-player-r { display: flex; align-items: center; gap: var(--sp-1); }
.wt-player-r { justify-content: flex-end; }
.wt-player-c { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.wt-player-c b { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-player-c .wt-cap-mono { height: auto; padding: 0; cursor: default; color: var(--text-inverse); opacity: .6; }
.wt-player-c .wt-cap-mono:hover { background: none; }
.wt-player .wt-cap-ico { color: var(--text-inverse); opacity: .75; }
.wt-player .wt-cap-ico:hover:not(:disabled) { background: rgba(var(--rgb-page), .12); color: var(--text-inverse); opacity: 1; }
.wt-player .wt-cap-ico.on { background: rgba(var(--rgb-page), .18); color: var(--text-inverse); opacity: 1; }
.wt-player-stage { display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.wt-player-screen { position: relative; flex: none; transform-origin: 0 0; background: var(--bg-surface); box-shadow: var(--shadow-float); --wt-vt-dur: var(--dur-panel); --wt-vt-ease: var(--ease-out); /* set inline from the page's tempo when it has a transition */ }
.wt-player-screen .ide-frame { position: absolute; inset: 0; overflow: hidden; }
.wt-player-screen iframe { display: block; position: absolute; left: 0; top: 0; border: 0; background: var(--bg-surface); opacity: 0; transition: opacity var(--dur-panel) var(--ease-out); }
.wt-player-screen iframe.in { opacity: 1; }
/* The page's own transition to the next (Motion, --wt-page-transition):
   the old frame under the new until both have moved, at the page's tempo. */
.wt-player-screen[data-wtvt] iframe.out { opacity: 1; z-index: 0; animation: wt-vt-out-fade var(--wt-vt-dur) var(--wt-vt-ease) both; }
.wt-player-screen[data-wtvt] iframe.in { z-index: 1; }
.wt-player-screen[data-wtvt="slide"][data-wtdir="forward"] iframe.out { animation-name: wt-vt-out-slide; }
.wt-player-screen[data-wtvt="slide"][data-wtdir="forward"] iframe.in { animation: wt-vt-in-slide var(--wt-vt-dur) var(--wt-vt-ease) both; }
.wt-player-screen[data-wtvt="slide"][data-wtdir="back"] iframe.out { animation-name: wt-vt-out-slide-back; }
.wt-player-screen[data-wtvt="slide"][data-wtdir="back"] iframe.in { animation: wt-vt-in-slide-back var(--wt-vt-dur) var(--wt-vt-ease) both; }
.wt-player-screen[data-wtvt="rise"] iframe.in { animation: wt-vt-in-rise var(--wt-vt-dur) var(--wt-vt-ease) both; }
/* Push: into a detail, the new page taking the whole width as the old leaves it; back, the reverse. */
.wt-player-screen[data-wtvt="push"][data-wtdir="forward"] iframe.out { animation-name: wt-vt-out-push; }
.wt-player-screen[data-wtvt="push"][data-wtdir="forward"] iframe.in { animation: wt-vt-in-push var(--wt-vt-dur) var(--wt-vt-ease) both; }
@keyframes wt-vt-out-fade { to { opacity: 0; } }
@keyframes wt-vt-out-slide { to { opacity: 0; translate: -10% 0; } }
@keyframes wt-vt-in-slide { from { translate: 100% 0; } }
@keyframes wt-vt-out-slide-back { to { opacity: 0; translate: 100% 0; } }
@keyframes wt-vt-in-slide-back { from { translate: -10% 0; } }
@keyframes wt-vt-in-rise { from { translate: 0 24px; } }
@keyframes wt-vt-out-push { to { translate: -100% 0; } }
@keyframes wt-vt-in-push { from { translate: 100% 0; } }
.wt-player-screen.device { border-radius: var(--r-phone); }
/* ── Demo: the prototype walking itself (src/demo.js) ─────────────
   Every page of the walk loaded once and kept, the one in front shown;
   the pointer, the press and the caption drawn over the page in the
   player's own two inks, which read on any page in either theme; the
   head carrying the demo's controls, and its timeline along its foot. */
.wt-player-head { position: relative; }
.wt-player:not(.demo) [data-wtdemo-only] { display: none; }
.wt-player .wt-cap-mono { color: var(--text-inverse); opacity: .75; }
.wt-player .wt-cap-mono:hover:not(:disabled) { background: rgba(var(--rgb-page), .12); color: var(--text-inverse); opacity: 1; }
.wt-player .wt-cap-mono.on { background: rgba(var(--rgb-page), .18); opacity: 1; }
.wt-player-screen.demo iframe { transition: none; }
.wt-player-screen.demo iframe[data-wtdemo-off] { visibility: hidden; }
/* Play fades every new page in by a transition; a demo times its own, so
   a dissolve and a rise fade in by an animation it can hold and step, over
   the page they leave, which stays as it was beneath them. */
.wt-player-screen.demo[data-wtvt="fade"] iframe.in { animation: wt-vt-in-fade var(--wt-vt-dur) var(--wt-vt-ease) both; }
.wt-player-screen.demo[data-wtvt="rise"] iframe.in { animation: wt-vt-in-rise var(--wt-vt-dur) var(--wt-vt-ease) both, wt-vt-in-fade var(--wt-vt-dur) var(--wt-vt-ease) both; }
.wt-player-screen.demo[data-wtvt="fade"] iframe.out, .wt-player-screen.demo[data-wtvt="rise"] iframe.out { animation: none; }
@keyframes wt-vt-in-fade { from { opacity: 0; } }
.wt-demo-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
/* The pointer's tip is the point it stands on: the drawing is moved so
   the tip sits on the box's corner, which is where it scales from. */
.wt-demo-ptr { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; transform-origin: 0 0; will-change: transform; }
.wt-demo-ptr[hidden] { display: none; }
.wt-demo-ptr svg { position: absolute; left: 0; top: 0; overflow: visible; translate: -5px -3.5px; }
.wt-demo-ptr path { fill: rgb(var(--rgb-ink)); stroke: rgb(var(--rgb-page)); stroke-width: 1.3; stroke-linejoin: round; }
.wt-demo-ptr .hand, .wt-demo-ptr[data-hand] .arrow { display: none; }
.wt-demo-ptr[data-hand] .hand { display: inline; }
.wt-demo-ptr[data-hand] svg { translate: -10.6px -3.2px; }
.wt-demo-tap { position: absolute; left: 0; top: 0; width: 44px; height: 44px; translate: -22px -22px; border-radius: var(--r-full); border: 2px solid rgba(var(--rgb-ink), .55); background: rgba(var(--rgb-ink), .12); opacity: 0; }
.wt-demo-tap[data-touch] { width: 48px; height: 48px; translate: -24px -24px; border-color: rgba(var(--rgb-page), .9); background: rgba(var(--rgb-ink), .28); }
.wt-demo-cap {
  position: absolute; left: 50%; bottom: var(--sp-6); translate: -50% 0; max-width: calc(100% - var(--sp-12));
  display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: rgba(var(--rgb-ink), .86); color: rgb(var(--rgb-page)); box-shadow: var(--shadow-float);
  font-size: var(--t-title-md-s); line-height: var(--t-title-md-lh); white-space: nowrap;
}
.wt-demo-cap[hidden] { display: none; }
.wt-demo-cap b { flex: none; font-weight: 400; font-family: var(--font-mono); font-size: var(--t-mono-md-s); opacity: .7; }
.wt-demo-cap b:empty { display: none; }
.wt-demo-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wt-demo-bar { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 0; height: var(--sp-3); cursor: pointer; }
.wt-demo-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--sp-1); height: 2px; border-radius: var(--r-full); background: rgba(var(--rgb-page), .18); }
.wt-demo-bar i { position: absolute; left: 0; bottom: var(--sp-1); width: 0; height: 2px; border-radius: var(--r-full); background: rgb(var(--rgb-page)); }
.wt-demo-bar b { position: absolute; bottom: var(--sp-1); width: 2px; height: 6px; margin-left: -1px; translate: 0 2px; background: rgba(var(--rgb-page), .5); }
/* Recording a walk: the head says so, with Done and Cancel; going back is not part of a walk. */
.wt-player:not(.rec) [data-wtrec-only] { display: none; }
.wt-player.rec [data-wtdemo], .wt-player.rec [data-wtplayback] { display: none; }
.wt-player.rec .wt-player-c span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-15); border-radius: var(--r-full); background: var(--color-error); }
/* The walk's steps, beside the screen, which moves over to make room. */
.wt-player.steps .wt-player-stage { padding-right: calc(320px + var(--sp-6)); }
.wt-demo-steps {
  position: absolute; top: 52px; right: 0; bottom: 0; width: 320px; box-sizing: border-box; overflow: auto;
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4);
  background: rgba(var(--rgb-ink), .96); border-left: 1px solid rgba(var(--rgb-page), .12); color: var(--text-inverse);
}
.wt-demo-steps[hidden] { display: none; }
.wt-demo-stepshead { display: flex; flex-direction: column; gap: var(--sp-05); }
.wt-demo-stepshead b { font-size: var(--t-title-md-s); font-weight: 600; }
.wt-demo-stepshead small { font-size: var(--t-body-xs-s); opacity: .7; }
.wt-demo-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-label-sm-s); font-weight: 600; }
.wt-demo-steps input {
  width: 100%; height: 32px; box-sizing: border-box; padding: 0 var(--sp-2);
  border: 1px solid rgba(var(--rgb-page), .18); border-radius: var(--r-lg); background: rgba(var(--rgb-page), .06);
  color: var(--text-inverse); font: inherit; font-size: var(--t-body-sm-s);
}
.wt-demo-steps input::placeholder { color: rgba(var(--rgb-page), .45); }
.wt-demo-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.wt-demo-list li { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(var(--rgb-page), .1); }
.wt-demo-list p { margin: 0; font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }
.wt-demo-on { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); opacity: .6; }
.wt-demo-steps .wt-link { margin-left: var(--sp-1); color: var(--text-inverse); opacity: .7; }
.wt-demo-steps .wt-link:hover { opacity: 1; }
.wt-demo-stepsfoot { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* A video being made, and what came of it, in the head. */
.wt-demo-job { display: inline-flex; align-items: center; gap: var(--sp-1); }
.wt-demo-job[hidden] { display: none; }
.wt-demo-job span.wt-cap-mono { cursor: default; opacity: 1; }
.wt-demo-job span.wt-cap-mono:hover { background: none; }
.wt-demo-job.err span.wt-cap-mono { color: var(--color-error); }
/* The recorder's stage (demo/stage.html): the screen alone, or a phone on the player's ground. */
.wt-recorder-stage { margin: 0; overflow: hidden; background: rgb(var(--rgb-ink)); }
.wt-recorder-stage .wt-player-screen { position: absolute; left: 0; top: 0; box-shadow: none; }
/* ── end of Demo ── */
.wt-player-screen.device .ide-frame, .wt-player-screen.device .ide-frame::before, .wt-player-screen.device .ide-frame::after { position: absolute; }

/* The phone: a bezel outside the screen's 390 by 844, its corners
   rounded, the island over the top of the page and the home bar over
   its foot, the page scrolling inside. Drawn in the app's ink, since
   it is chrome and not the page. */
.wt-cv-board.device .ide-frame, .wt-player-screen.device .ide-frame { inset: calc(-1 * var(--sp-3)); width: auto; height: auto; border: var(--sp-3) solid var(--text-primary); border-radius: var(--r-phone); box-shadow: var(--shadow-float); background: var(--text-primary); }
.wt-cv-board.device .ide-frame::before, .wt-player-screen.device .ide-frame::before { content: ""; position: absolute; left: 50%; top: var(--sp-3); width: 120px; height: 32px; margin-left: -60px; border-radius: var(--r-full); background: var(--text-primary); z-index: 2; pointer-events: none; }
.wt-cv-board.device .ide-frame::after, .wt-player-screen.device .ide-frame::after { content: ""; position: absolute; left: 50%; bottom: var(--sp-2); width: 136px; height: var(--sp-1); margin-left: -68px; border-radius: var(--r-full); background: var(--text-primary); z-index: 2; pointer-events: none; }
.wt-cv-board.device.current .ide-frame, .wt-cv-board.device.focus .ide-frame { outline-offset: calc(10px * var(--cv-inv)); }
/* Its name stands above the bezel and the ring round the page open on it, where it stands still. */
.wt-cv-board.device .wt-cv-name { bottom: calc(100% + var(--sp-3) + var(--sp-1) * var(--cv-inv)); }
.wt-cv-name {
  position: absolute; left: 0; bottom: 100%; transform: scale(var(--cv-inv)); transform-origin: 0 100%;
  display: flex; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-25); white-space: nowrap;
  /* No wider than its board looks at this zoom: the name is cut before its neighbour's begins. */
  max-width: calc(100% / var(--cv-inv)); box-sizing: border-box; overflow: hidden;
}
.wt-cv-name button { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); text-transform: uppercase; color: var(--text-muted); }
/* The name bar is the board's handle: dragged, the board goes with it; a still press is the click that opens the page. */
.wt-cv-name { user-select: none; cursor: grab; }
.wt-cv.moving, .wt-cv.moving .wt-cv-name { cursor: grabbing; }
.wt-cv-board.dragging { z-index: 5; }
.wt-cv-board.dragging .ide-frame { box-shadow: var(--shadow-float); }
/* The name edited in place: a box in the bar, the same mono role. */
.wt-cv-rename { width: 100%; min-width: 120px; max-width: 320px; box-sizing: border-box; height: 24px; padding: 0 var(--sp-15); border: 1px solid var(--signal-live-line); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); text-transform: none; }
/* When a page was touched is said on the current board alone; the dropdown says it for every page. */
.wt-cv-name small { display: none; flex: 0 20 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wt-cv-board.current .wt-cv-name small { display: inline; }
.wt-cv-name button b { color: var(--text-primary); font-weight: 400; }
.wt-cv-board.current .wt-cv-name button b { color: var(--signal-live); }
.wt-cv-name button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wt-cv-name small { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
/* The connectors: the wires in the layer's own coordinates, the hotspots over the elements that lead somewhere. */
.wt-cv-wires { position: absolute; left: -200px; top: -200px; overflow: visible; pointer-events: none; z-index: 2; }
.wt-cv-wires path { fill: none; stroke: var(--signal-live); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wt-cv-wires path.new { stroke-dasharray: 6 5; }
.wt-cv-wires circle { fill: var(--bg-surface); stroke: var(--signal-live); stroke-width: 2; vector-effect: non-scaling-stroke; r: calc(5px * var(--cv-inv)); }
/* Alignment guides while a board is dragged: a hairline on the line
   two boards share, a dot where each edge meets it, whatever the zoom. */
.wt-cv-guides { position: absolute; left: -200px; top: -200px; overflow: visible; pointer-events: none; z-index: 3; }
.wt-cv-guides line { stroke: var(--signal-guide); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wt-cv-guides circle { fill: var(--signal-guide); r: calc(2.5px * var(--cv-inv)); }
.wt-cv-hot { position: absolute; z-index: 2; border: calc(2px * var(--cv-inv)) solid var(--signal-live); border-radius: calc(var(--r-4xl) * var(--cv-inv)); pointer-events: none; box-sizing: border-box; }
.wt-cv-hot.candidate { border-style: dashed; }
.wt-cv-hot i {
  position: absolute; right: 0; top: 50%; width: calc(14px * var(--cv-inv)); height: calc(14px * var(--cv-inv));
  transform: translate(50%, -50%); border-radius: var(--r-full); background: var(--signal-live);
  border: calc(2px * var(--cv-inv)) solid var(--bg-surface); box-sizing: border-box; pointer-events: auto; cursor: crosshair;
}
/* The text toolbar, over the canvas above the selected element. */
.wt-tbar {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: var(--sp-05); height: 40px; padding: 0 var(--sp-15); box-sizing: border-box;
  background: var(--bg-raised); color: var(--text-primary); border-radius: var(--r-4xl); box-shadow: var(--shadow-menu); font-size: var(--t-body-xs-s);
}
.wt-tbar select { height: 28px; border: 0; border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); padding: 0 var(--sp-15); max-width: 130px; }
.wt-tbar button { height: 28px; min-width: 28px; padding: 0 var(--sp-15); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); font-weight: 700; cursor: pointer; }
.wt-tbar button[data-wt-tb="italic"] { font-style: italic; font-weight: 400; }
.wt-tbar button[data-wt-tb="underline"] { text-decoration: underline; font-weight: 400; }
.wt-tbar button:hover { background: var(--tint-4); }
.wt-tbar button[data-wt-on] { background: var(--chosen-bg); color: var(--chosen-fg); }
.wt-tbar s { display: block; width: 1px; height: 20px; margin: 0 var(--sp-1); background: var(--border-hairline); }
/* The chrome: capsules floating over the bed, set in by the page margin. */
.wt-cvchrome { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.wt-cvchrome > * { pointer-events: auto; }
.wt-cap {
  position: absolute; display: flex; align-items: center; gap: var(--sp-15); height: 52px; box-sizing: border-box; padding: 0 var(--sp-2);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); box-shadow: var(--shadow-float);
}
/* The canvas's bar as two floating capsules again (16 October, at the user's word): the page, its version
   and the mode at the left, the view, the panels, Export and Hand off at the right, the bed under both. */
.wt-cap.wt-cap-bar {
  left: var(--sp-7); right: var(--sp-7); top: var(--sp-4); height: 52px; justify-content: space-between; gap: var(--sp-4); padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: none; pointer-events: none; z-index: 9;
}
.wt-cap-tl, .wt-cap-tr { display: flex; align-items: center; gap: var(--sp-15); min-width: 0; height: 52px; box-sizing: border-box; padding: 0 var(--sp-2);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); box-shadow: var(--shadow-float); pointer-events: auto; }
.wt-cap-tl { flex: 0 1 auto; overflow: hidden; }
.wt-cap-tr { flex: none; }
.wt-cvsurface .wt-cv { top: 0; }
.wt-cap-tools { left: 50%; bottom: var(--sp-7); transform: translateX(-50%); }
.wt-cap-ico {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-lg); background: none; color: var(--text-secondary);
  font: inherit; font-size: var(--t-title-md-s); line-height: 1; cursor: pointer;
}
.wt-cap-ico:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text-primary); }
.wt-cap-ico.on { background: var(--signal-live-soft); color: var(--signal-live); }
.wt-cap-ico:disabled { opacity: .35; cursor: default; }
.wt-cap-ico svg { width: 16px; height: 16px; }
.wt-cap-crumb { font-size: var(--t-body-xs-s); color: var(--text-muted); white-space: nowrap; padding: 0 var(--sp-1); }
.wt-cap-sep { width: 1px; height: 24px; background: var(--border-hairline); margin: 0 var(--sp-1); }
.wt-cap-mono {
  height: 36px; padding: 0 var(--sp-25); border: 0; border-radius: var(--r-lg); background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); color: var(--text-secondary);
}
.wt-cap-mono b { font-weight: 400; color: var(--text-primary); }
.wt-cap-mono i { font-style: normal; opacity: .6; }
.wt-cap-mono:hover { background: var(--bg-sunken); color: var(--text-primary); }
/* The system changed after the pages were drawn: said on the canvas, under the bar, with what moved,
   centred on the canvas between the panels. After .wt-cap, whose height and padding it undoes. */
.wt-cap.wt-cap-sync {
  left: var(--sp-7); right: var(--sp-7); top: calc(var(--cv-bar-h) + var(--sp-3)); margin: 0 auto; z-index: 8;
  height: auto; min-height: 52px; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  width: fit-content; max-width: 720px;
}
.wt-cvsurface.conv-on .wt-cap.wt-cap-sync { left: calc(var(--sp-7) + 330px + var(--sp-4)); }
.wt-cvsurface.props-on .wt-cap.wt-cap-sync { right: calc(var(--sp-7) + 300px + var(--sp-4)); }
.wt-sync-text { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; font-size: var(--t-body-sm-s); line-height: 1.4; color: var(--text-secondary); }
.wt-sync-text b { font-weight: 600; color: var(--text-primary); }
.wt-sync-go { flex: none; height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-full); background: none; color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); font-weight: 600; white-space: nowrap; cursor: pointer; }
.wt-sync-go:hover:not(:disabled) { background: var(--bg-sunken); }
.wt-sync-go:disabled { opacity: .5; cursor: default; }
.wt-cap.wt-cap-sync .wt-cap-ico { width: 32px; height: 32px; font-size: var(--t-body-sm-s); }
.wt-cap .ide-pages.wt-cap-pages { height: 36px; border: 0; border-radius: var(--r-lg); background: none; padding: 0 var(--sp-25); gap: var(--sp-15); min-width: 0; max-width: 320px; }
.wt-cap .ide-pages.wt-cap-pages:hover { background: var(--bg-sunken); }
.wt-cap .ide-pages.wt-cap-pages b { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-cap .ide-pages.wt-cap-pages small { display: none; }
.wt-cap .ide-pages.wt-cap-pages i { font-style: normal; color: var(--text-muted); }
.wt-cap .wt-seg { background: var(--bg-sunken); }
.wt-cap .wt-editmodes button { font-size: var(--t-body-xs-s); }
.wt-cap .wt-editmodes button.on { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-raised); }
/* The panels: fixed against the margins, from the capsule row to the dock. */
.wt-conv, .wt-props {
  position: absolute; top: calc(var(--cv-bar-h) + var(--sp-4)); bottom: var(--sp-4);
  display: flex; flex-direction: column; min-height: 0; box-sizing: border-box;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); box-shadow: var(--shadow-float); overflow: hidden;
}
.wt-conv { left: var(--sp-7); width: 330px; }
.wt-props { right: var(--sp-7); width: 300px; }
.wt-panelhead { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; box-sizing: border-box; padding: 0 var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--border-hairline); }
.wt-panelhead b { font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text-primary); }
.wt-panelhead .wt-cap-ico { width: 30px; height: 30px; font-size: var(--t-body-xs-s); }
/* The properties' head names what is selected and where it sits (the agreed screens, 2 October 2026). */
.wt-panelhead.wt-propshead { height: auto; min-height: 52px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); gap: var(--sp-2); }
.wt-propsname { display: grid; gap: var(--sp-05); min-width: 0; }
.wt-propsname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-panelsub { font-size: var(--t-caption-s); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-props .pe-what { display: none; }
/* Applies to: one switch for what a change reaches, and a line saying it. */
.pe-applies .pe-scope { display: flex; width: 100%; }
.pe-applies .pe-scope button { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-scopesay { margin: var(--sp-15) 0 0; font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-muted); }
.wt-conv .wt-editbody .ide-thread { padding: var(--sp-3) var(--sp-4); }
.wt-conv .ide-composer { flex: none; border-top: 1px solid var(--border-hairline); padding: var(--sp-3) var(--sp-4); }
.wt-conv .ide-spend.wt-convprice { margin: 0 0 var(--sp-2); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-conv .ide-spend.wt-convprice .wt-mono { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
/* The conversation's scope: the whole page, or the one element selected.
   (.wt-scope itself is the foundry preview's token scope, so the buttons are .wt-scopebtn.) */
.wt-scopes { flex: none; display: flex; align-items: center; gap: var(--sp-15); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border-hairline); min-height: 44px; box-sizing: border-box; }
.wt-scopebtn { display: inline-flex; align-items: center; gap: var(--sp-15); height: var(--h-meta); white-space: nowrap; flex: none; padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--bg-surface); font: inherit; font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; }
.wt-scopebtn.on { border-color: var(--signal-live-line); background: var(--signal-live-soft); color: var(--signal-live); font-weight: 600; }
.wt-scopebtn .wt-mono, .wt-scopechip b { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--bg-sunken); color: var(--text-secondary); font-weight: 400; }
.wt-scopebtn.on .wt-mono { background: var(--bg-surface); color: var(--signal-live); }
.wt-scopehint { font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-scopechip { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--signal-live); }
.wt-convopts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-15); margin-top: var(--sp-2); }
.wt-convopt { height: var(--h-meta); padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-surface); font: inherit; font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; }
.wt-convopt.on { border-color: var(--signal-live-line); background: var(--signal-live-soft); color: var(--signal-live); font-weight: 600; }
.wt-convopt:disabled { opacity: .6; cursor: default; }
.wt-convopt.kept { border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.wt-convopt.kept:disabled { opacity: 1; }
.wt-convopt.rejected { text-decoration: line-through; }
.wt-convsaid { font-size: var(--t-caption-s); color: var(--text-muted); }
/* An ask's ideas: the bar over the element while they are on trial. */
.wt-optbar {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: var(--sp-05); height: 40px; max-width: calc(100% - var(--sp-4)); padding: 0 var(--sp-1); box-sizing: border-box;
  background: var(--bg-raised); color: var(--text-primary); border-radius: var(--r-4xl); box-shadow: var(--shadow-menu); font-size: var(--t-body-xs-s); white-space: nowrap;
}
.wt-optbar button { display: inline-flex; align-items: center; gap: var(--sp-1); height: 28px; min-width: 28px; padding: 0 var(--sp-15); border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.wt-optbar button:hover:not(:disabled) { background: var(--tint-4); }
.wt-optbar button:focus-visible { outline: 2px solid var(--signal-live); outline-offset: 1px; }
.wt-optbar button:disabled { color: var(--text-muted); cursor: default; }
.wt-optbar .wt-obstep { padding: 0; justify-content: center; color: var(--text-secondary); }
.wt-obsegs { display: inline-flex; align-items: center; gap: var(--sp-05); min-width: 0; overflow: hidden; }
.wt-obsegs button b { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); font-weight: 400; color: var(--text-muted); }
.wt-obsegs button span { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.wt-obsegs button[aria-pressed="true"] { background: var(--chosen-bg); color: var(--chosen-fg); }
.wt-obsegs button[aria-pressed="true"] b { color: inherit; }
.wt-obsegs button:disabled span { text-decoration: line-through; }
.wt-optbar s { display: block; flex: none; width: 1px; height: 20px; margin: 0 var(--sp-1); background: var(--border-hairline); }
.wt-optbar .wt-obaccept { border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.wt-convopts .wt-link { margin: 0; }
.ide-mode button .wt-mono { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; }
/* A hidden panel leaves a handle at its edge. */
.wt-edge {
  position: absolute; top: 50%; width: 28px; height: 64px; transform: translateY(-50%); display: grid; place-items: center;
  border: 1px solid var(--border-hairline); background: var(--bg-surface); box-shadow: var(--shadow-float); color: var(--text-muted); font: inherit; font-size: var(--t-title-md-s); cursor: pointer;
}
.wt-edge.l { left: 0; border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.wt-edge.r { right: 0; border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.wt-edge:hover { color: var(--text-primary); }
/* The workspace header stands down while the surface is up. */
#wfHead[hidden] { display: none; }

/* The properties panel's tabs, context row and body; the conversation's thread and composer. */
.wt-editleft { display: flex; flex-direction: column; min-height: 0; }
.wt-edittabs { display: flex; flex: none; border-bottom: 1px solid var(--border-hairline); }
.wt-edittabs button {
  flex: 1; height: var(--h-action); border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--t-body-sm-s); color: var(--text-secondary); cursor: pointer;
}
.wt-edittabs button.on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--signal-live); }
.wt-editctx { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; box-sizing: border-box; padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.wt-editctx .pe-history button { border-radius: var(--r-md); width: var(--h-meta); height: var(--h-meta); border-color: var(--border-hairline); }
.wt-editbody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wt-editbody .ide-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.wt-editbody .ide-msg .ide-bub { border-radius: var(--r-2xl); background: var(--bg-page); }
.wt-editbody .ide-who { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wt-editbody .ide-composer { flex: none; border-top: 1px solid var(--border-hairline); padding: var(--sp-3) var(--sp-4); }
.wt-editbody .ide-spend { margin: var(--sp-2) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-editbusy { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wt-editbusy .wt-elapsed { margin-left: var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.wt-editbody .pe-host { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pe-panel.embedded .pe-body { padding: var(--sp-3) var(--sp-4); }

/* The pages dropdown (spec 5.6): 352 wide under the pages control. */
.wt-pages {
  position: fixed; z-index: var(--z-menu); width: 352px; max-width: calc(100vw - 16px); display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); box-shadow: var(--shadow-menu); overflow: hidden;
}
.wt-pages[hidden] { display: none; }
.wt-pageshead { flex: none; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-25) var(--sp-4) var(--sp-15); }
.wt-pagesearch { flex: none; padding: 0 var(--sp-2) var(--sp-2); }
.wt-pagesearch .mf-input { width: 100%; height: var(--h-field-sm); box-sizing: border-box; font-size: var(--t-body-xs-s); }
.wt-pagelist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); }
.wt-pagelabel { margin: var(--sp-2) var(--sp-2) var(--sp-1); }
.wt-pagerow {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-15) var(--sp-2); border-radius: var(--r-lg); cursor: pointer; position: relative;
}
.wt-pagerow:hover { background: var(--bg-rail); }
.wt-pagerow.current { background: var(--bg-rail); }
.wt-pagerow.away { opacity: .55; cursor: default; }
.wt-pagerow.adding { opacity: .6; cursor: default; }
.wt-pagerow.adding.failed { opacity: 1; }
.wt-pagerow.adding.failed small { color: var(--status-caution); }
.wt-pagegrip { flex: none; width: 6px; height: 14px; background: radial-gradient(circle, var(--border-hairline) 1px, transparent 1.2px) 0 0 / 3px 4.66px; opacity: 0; }
.wt-pagerow:hover .wt-pagegrip, .wt-pagerow.current .wt-pagegrip { opacity: 1; }
.wt-pagerow.current .wt-pagegrip { background-image: radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px); }
.wt-pagethumb { flex: none; width: 34px; height: 46px; border-radius: var(--r-xs); border: 1px solid var(--border-hairline); background: var(--bg-page); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wt-pagerow.current .wt-pagethumb { border-color: var(--border-strong); }
.wt-pagethumb.sketch { border-style: dashed; }
.wt-pagethumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wt-pagebody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.wt-pagebody b { font-size: var(--t-body-sm-s); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-pagebody small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-pagerow.current .wt-pagebody b { font-weight: 600; }
.wt-pageopen { flex: none; font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-inverse); background: var(--action-primary-bg); border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); }
.wt-pagemore { flex: none; width: var(--h-meta); height: var(--h-meta); border: 0; border-radius: var(--r-md); background: none; color: var(--text-secondary); font: inherit; cursor: pointer; opacity: 0; }
.wt-pagerow:hover .wt-pagemore, .wt-pagemore:focus-visible { opacity: 1; }
.wt-pagemore:hover { background: var(--bg-surface); color: var(--text-primary); }
.wt-pagerow .wt-link { margin: 0; flex: none; }
.wt-pageblank {
  flex: none; display: flex; align-items: center; gap: var(--sp-25); width: 100%; padding: var(--sp-25) var(--sp-4); border: 0; border-top: 1px solid var(--border-hairline);
  background: var(--bg-surface); font: inherit; text-align: left; cursor: pointer;
}
.wt-pageblank:hover { background: var(--bg-rail); }
.wt-pageblank:disabled { opacity: .5; cursor: default; }
.wt-pageblank .plus { width: 15px; text-align: center; font-size: var(--t-body-md-s); color: var(--text-secondary); }
.wt-pageblank b { flex: 1; font-size: var(--t-body-sm-s); font-weight: 600; }
.wt-pageblank .free { color: var(--status-settled); }
.wt-pageadd { flex: none; background: var(--bg-rail); border-top: 1px solid var(--border-hairline); padding: var(--sp-3) var(--sp-4) var(--sp-35); display: flex; flex-direction: column; gap: var(--sp-2); }
.wt-pageadd-row { display: flex; align-items: center; gap: var(--sp-2); }
.wt-pageadd-row b { flex: 1; font-size: var(--t-body-sm-s); font-weight: 600; }
.wt-pageadd-row.busy { justify-content: space-between; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.wt-pageadd-row.busy .wt-link { margin: 0; }
.wt-spark { color: var(--signal-live); font-style: normal; width: 15px; text-align: center; }
.wt-suggest-wrap { position: relative; }
.wt-pageask {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-body-xs-s); padding: var(--sp-2) var(--sp-25); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg-surface); color: var(--text-primary); resize: none;
}
.wt-pagehint { position: absolute; left: var(--sp-25); right: var(--sp-25); top: var(--sp-2); font-size: var(--t-body-xs-s); color: var(--text-muted); pointer-events: none; line-height: 1.45; }
.wt-pagehint[hidden] { display: none; }
.wt-pagehint i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; margin-left: var(--sp-1); }
.wt-pagechips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.wt-pagechip { height: var(--h-chip); padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; }
.wt-pagechip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.wt-pageadd-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wt-micro { font-size: var(--t-micro-s); color: var(--text-muted); line-height: 1.4; }
/* A bordered button: the screen's one filled control is its dock's. */
.wt-pagemake { flex: none; height: calc(var(--h-action) + 2px); padding: 0 var(--sp-35); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); font-weight: 600; cursor: pointer; }
.wt-pagemake:hover:not(:disabled) { background: var(--surface-hover); }
.wt-pagemake:disabled { opacity: .5; cursor: default; }
.wt-pagesfoot { flex: none; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border-hairline); }
.wt-pagesfoot .wt-link { margin: 0; }
.wt-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-hairline); border-top-color: var(--signal-live); border-radius: var(--r-full); animation: wt-spin 0.8s linear infinite; margin-right: var(--sp-15); vertical-align: -2px; }
@keyframes wt-spin { to { transform: rotate(360deg); } }

/* ══ The triage table (spec 7.7) ═════════════════════════════════════
   A toolbar pinned above the rows, the rows grouped by severity with
   a sticky head each, a three-way per row, the reason for a Leave on
   a second line. */
.wt-triage { position: relative; }
.wt-tribar { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
.wt-tribar-row { display: flex; align-items: center; gap: var(--sp-25); padding: var(--sp-25) var(--sp-4); flex-wrap: wrap; }
.wt-tribar-row + .wt-tribar-row { border-top: 1px solid var(--border-soft); }
.wt-tricount { font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w); }
.wt-triprog { width: 150px; height: 6px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.wt-triprog i { display: block; height: 100%; background: var(--signal-live); border-radius: var(--r-full); }
.wt-tribreak { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-secondary); }
.wt-trikeys { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-trikeys kbd { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); background: var(--bg-sunken); border-radius: var(--r-xs); padding: var(--sp-05) var(--sp-15); color: var(--text-primary); margin-left: var(--sp-1); }
.wt-trikeys kbd:first-child { margin-left: 0; }
.wt-trichip { height: var(--h-chip); padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); }
.wt-trichip b { font-weight: 600; color: var(--text-primary); }
.wt-trichip.on { background: var(--signal-live-soft); border-color: var(--signal-live-line); color: var(--signal-live); font-weight: 600; }
.wt-trichip.on b { color: var(--signal-live); }
.wt-trichip .dot, .wt-trihead .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--text-muted); display: inline-block; flex: none; }
.wt-trichip.high .dot, .wt-trihead.high .dot { background: var(--signal-live); }
.wt-trichip.medium .dot, .wt-trihead.medium .dot { background: var(--status-caution); }
.wt-trisep { width: 1px; height: 18px; background: var(--border-hairline); margin: 0 var(--sp-1); }
.wt-triscreens { width: auto; max-width: 180px; flex: none; height: var(--h-chip); border: 1px solid var(--border-hairline); border-radius: var(--r-pill); background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); padding: 0 var(--sp-2); }
.wt-tribulk { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-15); font-size: var(--t-caption-s); color: var(--text-secondary); }
.wt-tribulk button { height: var(--h-chip); padding: 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--bg-surface); font: inherit; font-size: var(--t-caption-s); color: var(--text-primary); cursor: pointer; }
.wt-tribulk button:hover { border-color: var(--border-strong); }
.wt-tritable.mf-triage { gap: 0; border: 1px solid var(--border-hairline); border-top: 0; border-radius: 0 0 var(--r-2xl) var(--r-2xl); overflow: hidden; background: var(--bg-surface); }
.wt-tritable:empty { display: none; }
.wt-trigroup + .wt-trigroup .wt-trihead { border-top: 1px solid var(--border-hairline); }
.wt-trihead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-15) var(--sp-4); background: var(--bg-rail); border-bottom: 1px solid var(--border-hairline); }
.wt-tritable .wt-trirow.mf-tri {
  display: grid; grid-template-columns: 42px 22px minmax(0, 1fr) auto 72px auto; align-items: center; gap: var(--sp-25);
  padding: var(--sp-2) var(--sp-4); border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: var(--bg-surface);
}
.wt-tritable .wt-trirow.mf-tri:last-child { border-bottom: 0; }
.wt-tritable .wt-trirow.focused, .wt-tritable .wt-trirow:focus-visible { border-left-color: var(--border-strong); }
.wt-tritable .wt-trirow.decided.fix { background: var(--status-settled-soft); }
.wt-tritable .wt-trirow.decided.leave { background: var(--status-caution-soft); }
.wt-tritable .wt-trirow.decided.later { background: var(--bg-sunken); }
.wt-tricrit.mf-trin { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: var(--t-mono-sm-ls); color: var(--text-secondary); text-align: left; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-trithumb { width: 22px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--border-hairline); background: var(--bg-page); overflow: hidden; }
.wt-trithumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wt-tritext.mf-trit { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-body-sm-s); line-height: 1.4; color: var(--text-primary); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wt-tritext.mf-trit:hover { text-decoration: underline; text-underline-offset: 3px; }
.wt-tritable .mf-trix { margin: 0; }
.wt-trixslot:empty { width: 0; }
.wt-tridec.mf-trid { flex: none; }
.wt-triscreen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.wt-tridec.mf-trid { display: inline-flex; gap: var(--sp-1); padding: 0; }
.wt-tridec.mf-trid button {
  width: 52px; height: 30px; padding: 0; border: 1px solid var(--border-hairline); border-radius: 0; background: var(--bg-surface);
  font: inherit; font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer;
}
.wt-tridec.mf-trid button:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.wt-tridec.mf-trid button:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.wt-tridec.mf-trid button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.wt-tridec.mf-trid button.on { color: var(--text-primary); font-weight: 600; }
.wt-tridec.mf-trid button[data-mfdec="fix"].on, .wt-tridec.mf-trid button[data-wtfind="fix"].on { background: var(--status-settled-soft); border-color: var(--status-settled-line); color: var(--status-settled); }
.wt-tridec.mf-trid button[data-mfdec="leave"].on, .wt-tridec.mf-trid button[data-wtfind="leave"].on { background: var(--status-caution-soft); border-color: var(--status-caution); color: var(--status-caution); }
.wt-tridec.mf-trid button[data-mfdec="later"].on, .wt-tridec.mf-trid button[data-wtfind="later"].on { background: var(--bg-sunken); border-color: var(--border-strong); }
.wt-trireason { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-1); }
.wt-trireason .wt-micro { color: var(--status-caution); }
.wt-trireason .mf-input { height: var(--h-field-sm); font-size: var(--t-body-xs-s); }
.wt-trireason.quiet .mf-input { height: var(--h-meta); }
.wt-trireason.quiet .wt-micro { display: none; }
.wt-trireason[hidden] { display: none; }
.wt-triage .mf-triadd { margin-top: var(--sp-3); }
/* The finding panel's foot: the same three-way, and the reason. */
.wt-findfoot { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.wt-findfoot .wt-findreason { flex: 1; min-width: 0; height: var(--h-field-sm); font-size: var(--t-body-xs-s); }
.wt-findfoot .wt-findreason[hidden] { display: none; }
.wt-findshot { position: relative; border: 1px solid var(--border-hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-page); }
.wt-findshot img { width: 100%; display: block; }
.wt-findbox { position: absolute; border: 2px solid var(--signal-live); border-radius: var(--r-xs); box-shadow: 0 0 0 2px var(--bg-surface); pointer-events: none; }

/* Carried sets (spec 7.4): the provenance chip, the tick, a sketch unticked. */
.mf-well.carried .mf-well-head { gap: var(--sp-2); }
.mf-well-on { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--action-primary-bg); }
.mf-well.off { opacity: .55; }
.mf-well.off .mf-shots, .mf-well.off .mf-well-name { filter: grayscale(1); }
.mf-well > small { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.mf-well-note { margin: 0 0 var(--sp-2); font-size: var(--t-caption-s); line-height: 1.45; color: var(--text-secondary); }

/* ══ Menus and pills (spec 7.13) ═════════════════════════════════════
   Every menu at the menu shadow and the 12px corner, rows at body-sm;
   the system picker 380 wide with its sections. */
.stu-menu { border-radius: var(--r-4xl); border-color: var(--border-hairline); box-shadow: var(--shadow-menu); padding: var(--sp-15); max-width: 380px; }
.stu-menu-item { border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-25); font-size: var(--t-body-sm-s); color: var(--text-primary); }
.stu-menu-item:hover { background: var(--bg-rail); }
.stu-menu-item.on { background: var(--signal-live-soft); color: var(--signal-live); }
.stu-menu-item .meta { color: var(--text-muted); }
.stu-menu-label { padding: var(--sp-2) var(--sp-25) var(--sp-1); }
.stu-menu-label.wt-eyebrow { font-weight: 400; }
.stu-menu-sep { background: var(--border-hairline); margin: var(--sp-1) var(--sp-05); }
.stu-menu-empty, .stu-menu-note { font-size: var(--t-caption-s); color: var(--text-muted); padding: var(--sp-2) var(--sp-25); }
.wt-sysrow { min-width: 300px; }
.wt-sysrow .sw { width: 10px; height: 10px; border-radius: var(--r-full); }
.wt-sysrow .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-sysrow .tick { font-style: normal; color: var(--signal-live); }
.wt-sysrow .meta.wt-eyebrow { font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; }
.wt-syssearch { padding: 0 var(--sp-1) var(--sp-1); }
.wt-syssearch .mf-input { width: 100%; box-sizing: border-box; height: var(--h-field-sm); font-size: var(--t-body-xs-s); }
.wt-sysall { max-height: 320px; overflow-y: auto; }
.wt-sysgroup .wt-sysmore { display: block; margin: 0 0 var(--sp-1) var(--sp-8); border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-caption-s); color: var(--text-secondary); cursor: pointer; }
.wt-sysgroup .wt-sysvers { margin-left: var(--sp-4); border-left: 1px solid var(--border-soft); }

/* ══════════════════════════════════════════════
   Settings (24 September 2026): a dialog of cards. The brain is what
   every run uses above the brains themselves, a list beside the one
   picked; Tools the same shape for design sources; Workspace and About
   rows of a label, a value and an action. Scoped to the dialog, so the
   earlier rules for the same classes stand everywhere else.
══════════════════════════════════════════════ */
#settingsModal .settings-modal-box {
  width: min(960px, calc(100vw - var(--sp-12))); max-width: none;
  height: min(1060px, calc(100vh - var(--sp-12)));
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-5xl); background: var(--bg-surface);
}
#settingsModal .st-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: var(--sp-6) var(--sp-8) var(--sp-3);
}
#settingsModal .st-title {
  margin: 0; color: var(--text-primary); font-family: var(--font-sans);
  font-size: var(--t-title-lg-s); font-weight: var(--t-title-lg-w); line-height: var(--t-title-lg-lh);
}
#settingsModal .st-close {
  width: var(--h-field-sm); height: var(--h-field-sm); display: grid; place-items: center;
  border: 1px solid var(--border-hairline); border-radius: var(--r-2xl);
  background: var(--bg-surface); color: var(--text-primary); cursor: pointer;
}
#settingsModal .st-close svg { width: var(--sp-4); height: var(--sp-4); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#settingsModal .st-close:hover { background: var(--bg-rail); }

#settingsModal .settings-shell {
  flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column;
  border: 0; border-radius: 0; overflow: hidden;
}
#settingsModal .settings-tabs {
  flex: none; margin: 0; padding: 0 var(--sp-8); gap: var(--sp-7);
  background: var(--bg-surface); border-bottom: 1px solid var(--border-hairline);
}
#settingsModal .settings-tabs .inv-tab {
  height: var(--sp-12); gap: var(--sp-2);
  font-size: var(--t-title-sm-s); line-height: var(--t-title-sm-lh); color: var(--text-secondary);
}
#settingsModal .settings-tabs .inv-tab.on { color: var(--text-primary); font-weight: var(--t-title-sm-w); }
#settingsModal .set-dot { width: var(--sp-15); height: var(--sp-15); border-radius: var(--r-full); background: transparent; }
#settingsModal .set-dot.on { background: var(--status-settled); }
#settingsModal .set-dot.warn { background: var(--status-caution); }

#settingsModal .settings-panes { flex: 1; min-height: 0; display: flex; background: var(--bg-rail); }
#settingsModal .settings-pane,
#settingsModal .settings-pane.split {
  display: none; flex: 1; min-height: 0; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8); overflow-y: auto;
}
#settingsModal .settings-pane.on { display: flex; }

/* A card: a hairline on the surface, no shadow. */
#settingsModal .st-card {
  flex: none; display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl);
  padding: var(--sp-5) var(--sp-6);
}
#settingsModal .st-splitcard { flex: 1 0 auto; gap: 0; padding: 0; overflow: hidden; min-height: 480px; }
#settingsModal .st-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
#settingsModal .st-cardhead.st-rule { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-hairline); }
#settingsModal .st-cardhead h3 {
  margin: 0; color: var(--text-primary);
  font-size: var(--t-title-sm-s); font-weight: var(--t-title-sm-w); line-height: var(--t-title-sm-lh);
}
#settingsModal .st-cardhead p { margin: 0; color: var(--text-muted); font-size: var(--t-body-xs-s); line-height: var(--t-body-xs-lh); }

#settingsModal .st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
#settingsModal .st-field { display: flex; flex-direction: column; gap: var(--sp-25); min-width: 0; }
#settingsModal .st-fieldrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
#settingsModal .st-label {
  color: var(--text-primary); font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); line-height: var(--t-label-md-lh);
}
#settingsModal .st-hint {
  margin: 0; color: var(--text-muted); font-size: var(--t-body-xs-s); line-height: var(--t-body-xs-lh); text-wrap: pretty;
}
#settingsModal .st-hint.caution, #settingsModal .st-caution { color: var(--status-caution); font-weight: 600; }
#settingsModal .st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#settingsModal .st-mono { font-family: var(--font-mono); font-size: var(--t-mono-md-s); }

/* Fields and selects: the list-screen field height, the hairline strong. */
#settingsModal .settings-input,
#settingsModal .tool-drawer .settings-input {
  height: var(--h-field-sm); width: 100%; padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg-surface); color: var(--text-primary);
  font-size: var(--t-body-md-s);
}
#settingsModal select.settings-input { padding-right: var(--sp-8); }
#settingsModal .settings-input:disabled { color: var(--text-muted); background: var(--bg-rail); cursor: not-allowed; }
#settingsModal .st-select { position: relative; width: 100%; min-width: 0; }
#settingsModal .btn { height: var(--h-field-sm); padding: 0 var(--sp-4); font-size: var(--t-body-md-s); border-radius: var(--r-lg); }
#settingsModal .btn.sm { height: var(--h-action); padding: 0 var(--sp-3); font-size: var(--t-body-sm-s); }

/* The switch: a real checkbox, drawn; in Settings and beside Find references' Search. */
#settingsModal .st-switch, .mbn-deep .st-switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer; position: relative;
  width: var(--sp-10); height: var(--sp-6); border-radius: var(--r-full); background: var(--border-strong);
  transition: background var(--dur-state) var(--ease-out);
}
#settingsModal .st-switch::after, .mbn-deep .st-switch::after {
  content: ""; position: absolute; top: var(--sp-05); left: var(--sp-05);
  width: calc(var(--sp-6) - var(--sp-1)); height: calc(var(--sp-6) - var(--sp-1)); border-radius: var(--r-full);
  background: var(--bg-surface); box-shadow: var(--shadow-raised);
  transition: left var(--dur-state) var(--ease-out);
}
#settingsModal .st-switch:checked, .mbn-deep .st-switch:checked { background: var(--action-primary-bg); }
#settingsModal .st-switch:checked::after, .mbn-deep .st-switch:checked::after { left: calc(var(--sp-10) - var(--sp-6) + var(--sp-05)); }
#settingsModal .st-switch:focus-visible, .mbn-deep .st-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The list beside the detail. */
#settingsModal .set-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); flex: 1; min-height: 0; }
#settingsModal .set-list {
  border-right: 1px solid var(--border-hairline); background: var(--bg-surface);
  padding: var(--sp-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1);
}
#settingsModal .set-detail {
  padding: var(--sp-6); overflow-y: auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5);
}
#settingsModal .st-group {
  margin: var(--sp-3) var(--sp-3) var(--sp-1); color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase;
}
#settingsModal .set-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: 1px solid transparent; border-radius: var(--r-2xl); background: transparent;
  text-align: left; cursor: pointer; color: var(--text-primary);
  transition: background var(--dur-hover) var(--ease-out);
}
#settingsModal .set-item:hover:not(.soon):not(.on) { background: var(--bg-rail); }
#settingsModal .set-item.on { background: var(--chosen-bg); border-color: var(--chosen-line); }
#settingsModal .set-item.soon { cursor: default; opacity: 0.55; }
#settingsModal .st-tile {
  flex: none; width: var(--sp-8); height: var(--sp-8); display: grid; place-items: center;
  border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface);
}
#settingsModal .st-tile.lg { width: var(--h-field); height: var(--h-field); border-radius: var(--r-2xl); }
#settingsModal .st-tile svg { width: var(--sp-5); height: var(--sp-5); display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#settingsModal .st-tile.lg svg { width: var(--sp-6); height: var(--sp-6); }
#settingsModal .st-rowtext { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; }
#settingsModal .tool-name {
  display: flex; align-items: center; gap: var(--sp-15);
  font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); color: var(--text-primary); white-space: nowrap;
}
#settingsModal .st-state {
  display: flex; align-items: center; gap: var(--sp-15); min-width: 0;
  font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted);
}
#settingsModal .st-state .tool-state { color: inherit; font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settingsModal .set-pip {
  flex: none; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-full);
  border: 1.5px solid var(--border-strong); background: transparent; box-sizing: border-box;
}
#settingsModal .connected .st-state, #settingsModal .st-state.connected { color: var(--status-settled); }
#settingsModal .connected .set-pip, #settingsModal .st-state.connected .set-pip { background: var(--status-settled); border-color: var(--status-settled); }
#settingsModal .warn .st-state, #settingsModal .st-state.warn { color: var(--status-caution); }
#settingsModal .warn .set-pip, #settingsModal .st-state.warn .set-pip { background: var(--status-caution); border-color: var(--status-caution); }
#settingsModal .soon .set-pip { border-style: dashed; }
#settingsModal .st-tag {
  display: inline-flex; align-items: center; padding: 0 var(--sp-15); border-radius: var(--r-xs);
  border: 1px solid var(--chosen-line); background: var(--bg-surface); color: var(--chosen-fg);
  font-size: var(--t-micro-s); font-weight: 600; line-height: var(--t-micro-lh);
}
#settingsModal .st-tag.lg { height: var(--h-action); padding: 0 var(--sp-3); border-radius: var(--r-lg); background: var(--chosen-bg); border-color: transparent; font-size: var(--t-body-sm-s); }
#settingsModal .st-cam { display: inline-flex; color: var(--text-muted); }
#settingsModal .st-cam svg { width: var(--sp-35); height: var(--sp-35); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The detail: the brain's head, then what it needs, then its models. */
#settingsModal .st-bhead { display: flex; align-items: center; gap: var(--sp-35); }
#settingsModal .st-bname { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; flex: 1; }
#settingsModal .st-bname b { font-size: var(--t-title-md-s); font-weight: var(--t-title-md-w); line-height: var(--t-title-md-lh); color: var(--text-primary); }
#settingsModal .st-bname .st-state { font-size: var(--t-body-sm-s); align-items: baseline; }
#settingsModal .st-bname .st-state .set-pip { align-self: center; flex: none; }
#settingsModal .st-bacts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

#settingsModal .st-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-35) var(--sp-4); border-radius: var(--r-4xl);
  border: 1px solid var(--border-hairline); background: var(--bg-rail);
  color: var(--text-primary); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh);
}
#settingsModal .st-banner[hidden] { display: none; }
#settingsModal .st-banner.caution { background: var(--status-caution-soft); border-color: var(--status-caution-line); }
#settingsModal .st-banner.settled { background: var(--status-settled-soft); border-color: var(--status-settled-line); }
#settingsModal .st-bannertext { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
#settingsModal .st-bannertext b { font-weight: 600; }
#settingsModal .st-bannertext code, #settingsModal .set-way code {
  font-family: var(--font-mono); font-size: var(--t-mono-sm-s);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-xs); padding: 0 var(--sp-1);
}
#settingsModal .st-banner .conn-actions { flex: none; flex-wrap: nowrap; }
#settingsModal .set-way { display: flex; flex-direction: column; gap: var(--sp-2); }

#settingsModal .st-keyrow { display: flex; align-items: center; gap: var(--sp-2); }
#settingsModal .st-keyrow .prov-keywrap { flex: 1; min-width: 0; }
#settingsModal .st-keyrow > .settings-input { flex: 1; }
#settingsModal .st-keyrow .btn { flex: none; }
#settingsModal .st-field-static {
  flex: 1; height: var(--h-field-sm); display: flex; align-items: center; padding: 0 var(--sp-3);
  border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-rail); color: var(--text-secondary);
}
#settingsModal .st-box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl);
}
#settingsModal .st-box p { margin: 0; color: var(--text-secondary); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }
/* Skills (10 October 2026): a requirement and how it is checked, stacked in its row; a box that reads top to bottom. */
#settingsModal .skill-rows .st-row { align-items: flex-start; }
#settingsModal .skill-rows .st-rowvalue { display: flex; flex-direction: column; gap: var(--sp-1); }
#settingsModal .skill-rows .st-state { align-items: flex-start; }
#settingsModal .skill-rows .st-state .set-pip { margin-top: var(--sp-1); flex: none; }
#settingsModal .st-box.skill-box { flex-direction: column; align-items: stretch; gap: var(--sp-15); }
#settingsModal .st-box.skill-box .st-rows { background: transparent; padding: 0; }
#settingsModal .skill-boxhead { font-weight: 600; color: var(--text-primary); }
#settingsModal .st-bhead .skill-tag { margin-left: auto; flex: none; }

#settingsModal .st-models { display: flex; flex-direction: column; gap: var(--sp-3); }
#settingsModal .st-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
#settingsModal .st-eyebrow {
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase;
}
#settingsModal .st-link {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--chosen-fg); font-size: var(--t-body-xs-s); font-weight: 600;
}
#settingsModal .st-link:hover { text-decoration: underline; }
#settingsModal .st-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
#settingsModal .st-chip {
  display: inline-flex; align-items: center; height: var(--h-control); padding: 0 var(--sp-3);
  border: 1px solid var(--status-settled-line); border-radius: var(--r-full); background: var(--status-settled-soft);
  color: var(--status-settled); font-family: var(--font-mono); font-size: var(--t-mono-md-s);
}
#settingsModal .st-chip.empty { border-style: dashed; border-color: var(--border-strong); background: var(--bg-rail); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--t-body-xs-s); }
#settingsModal .st-tiers { border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); overflow: hidden; }
#settingsModal .st-tier {
  display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr) minmax(0, 220px); align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
#settingsModal .st-tier + .st-tier { border-top: 1px solid var(--border-soft); }
/* ChatGPT's rows carry how hard each tier thinks beside its model (13 October 2026). */
#settingsModal .st-tier.thinks { grid-template-columns: var(--sp-6) minmax(0, 1fr) minmax(0, 200px) minmax(0, 130px); }
#settingsModal .st-tiertext { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; }
#settingsModal .st-tiertext b { font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); color: var(--text-primary); }
#settingsModal .st-tiertext span { font-size: var(--t-caption-s); color: var(--text-muted); line-height: var(--t-caption-lh); }
#settingsModal .st-bars { display: flex; align-items: flex-end; gap: var(--sp-05); height: var(--sp-35); }
#settingsModal .st-bars i { width: var(--sp-1); background: var(--border-strong); border-radius: var(--r-xs); }
#settingsModal .st-bars i:nth-child(1) { height: 40%; }
#settingsModal .st-bars i:nth-child(2) { height: 70%; }
#settingsModal .st-bars i:nth-child(3) { height: 100%; }
#settingsModal .st-bars[data-n="1"] i:nth-child(-n+1),
#settingsModal .st-bars[data-n="2"] i:nth-child(-n+2),
#settingsModal .st-bars[data-n="3"] i:nth-child(-n+3) { background: var(--text-primary); }

#settingsModal .set-empty { color: var(--text-muted); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); }

/* Workspace and About: a label, a value, an action. */
#settingsModal .st-rows { padding: 0; gap: 0; }
#settingsModal .st-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
}
#settingsModal .st-row + .st-row { border-top: 1px solid var(--border-hairline); }
#settingsModal .st-rowlabel { font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); color: var(--text-primary); }
#settingsModal .st-rowvalue { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; color: var(--text-muted); font-size: var(--t-body-xs-s); line-height: var(--t-body-xs-lh); }
#settingsModal .st-rowvalue b { color: var(--text-primary); font-size: var(--t-label-md-s); font-weight: var(--t-label-md-w); }
#settingsModal .st-rowvalue .st-mono { color: var(--text-primary); }
#settingsModal .st-seg { display: inline-flex; gap: var(--sp-05); padding: var(--sp-05); border-radius: var(--r-lg); background: var(--bg-sunken); }
#settingsModal .st-seg button {
  height: var(--h-meta); padding: 0 var(--sp-35); border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-muted); font-size: var(--t-body-xs-s); cursor: pointer;
}
#settingsModal .st-seg button.on { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-raised); }
#settingsModal .st-seg button:disabled { cursor: not-allowed; }

/* The foot: the promise about credentials, and the one primary. */
#settingsModal .settings-footer {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8); border-top: 1px solid var(--border-hairline); background: var(--bg-surface);
}
#settingsModal .st-note { margin: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--t-body-xs-s); }
#settingsModal .st-note svg { width: var(--sp-35); height: var(--sp-35); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#settingsModal .st-footacts { display: flex; gap: var(--sp-3); }
#settingsModal .settings-footer .btn { height: var(--h-field); padding: 0 var(--sp-5); border-radius: var(--r-xl); font-weight: 600; }
#settingsModal .settings-notice { flex: none; }

/* ── The components, reviewed as a queue (24 September) ──────────────
   The list, the spec sheet on the system's own page, and what shapes it. */
.rq { display: flex; flex-direction: column; gap: 12px; }
.rq-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rq-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.rq-filter { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); padding: 4px 12px; font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.rq-filter span { color: var(--text); font-weight: 600; margin-left: 4px; }
.rq-filter.on { border-color: var(--text); color: var(--text); }
.rq-filter:focus-visible, .rq-item:focus-visible, .rq-act:focus-visible, .rq-seg button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.rq-keys { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
.rq-body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 232px; gap: 16px; align-items: start; }
.rq-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 280px); overflow-y: auto; position: sticky; top: 0; padding-right: 4px; }
.rq-group { margin: 12px 0 4px; font-size: var(--t-caption-s); font-weight: 600; color: var(--muted); }
.rq-group:first-child { margin-top: 0; }
.rq-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--r-md); background: none; font: inherit; font-size: var(--t-body-sm-s); color: var(--text); text-align: left; cursor: pointer; }
.rq-item:hover { background: var(--tint-2); }
.rq-item.on { border-color: var(--border-strong); background: var(--surface); }
.rq-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-tag { font-size: var(--t-caption-s); color: var(--muted); }
.rq-st { flex: none; font-size: var(--t-caption-s); font-weight: 600; padding: 2px 8px; border-radius: var(--r-md); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.rq-st.approved { color: var(--green); border-color: currentColor; }
/* Approved with findings since: said together, in the caution colour, not "Approved" beside a red count. */
.rq-st.approved.tocheck { color: var(--status-caution); }
.rq-st.changed, .rq-st.sent { color: var(--text); border-color: var(--border-strong); background: var(--tint-2); }
.rq-f { flex: none; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-caption-s); font-weight: 700; color: var(--color-primary-fg); background: var(--color-error); }
.rq-empty { font-size: var(--t-caption-s); color: var(--muted); }
.rq-sheet { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rq-head h2 { margin: 4px 0 0; font-size: var(--t-title-lg-s); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-desc { margin: 4px 0 0; font-size: var(--t-body-sm-s); color: var(--muted); max-width: 60ch; }
.rq-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.rq-act { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 4px 12px; font: inherit; font-size: var(--t-caption-s); font-weight: 600; cursor: pointer; }
.rq-act:hover { border-color: var(--border-strong); }
.rq-act.strong { border-color: var(--text); }
.rq-note { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rq-note label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption-s); color: var(--muted); }
.rq-note textarea { font: inherit; font-size: var(--t-body-sm-s); color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px; resize: vertical; }
.rq-note div { display: flex; gap: 4px; }
.rq-said { margin: 0; font-size: var(--t-caption-s); color: var(--text); padding: 8px 12px; border-left: 2px solid var(--border-strong); background: var(--tint-2); }
/* A component Figma changed while the one here was kept (7 October 2026): said on its own sheet,
   beside the work, with the two choices and what each costs. */
.rq-sync { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--status-caution-soft); }
.rq-sync-lead { display: flex; gap: 8px; align-items: flex-start; }
.rq-sync-lead svg { flex: none; color: var(--status-caution); margin-top: 2px; }
.rq-sync h3 { margin: 0 0 4px; font-size: var(--t-title-lg-s); font-weight: 600; color: var(--text); }
.rq-sync p { margin: 0; font-size: var(--t-body-sm-s); color: var(--text); max-width: 72ch; }
.rq-sync-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rq-sync-side { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.rq-sync-side p { font-size: var(--t-caption-s); color: var(--muted); }
.rq-sync-plate { min-height: 72px; border-radius: var(--r-md); display: grid; place-items: center; padding: 12px; overflow: hidden; background: var(--bg); }
.rq-sync-plate img { max-width: 100%; max-height: 120px; }
.rq-sync-cost { font-size: var(--t-caption-s); }
.rq-sync-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-sync-acts small { font-size: var(--t-caption-s); color: var(--muted); }
.rq-st.figma { color: var(--status-caution); border-color: currentColor; background: var(--status-caution-soft); }
.rq-filter.figma { color: var(--status-caution); }
/* Not in Figma (7 October 2026): the same caution as Figma changed, a group panel of ticked reasons, and Remove in the fault's ink. */
.rq-st.gone { color: var(--status-caution); border-color: currentColor; background: var(--status-caution-soft); }
.rq-filter.gone { color: var(--status-caution); }
.rq-act.danger { color: var(--color-error); }
.rq-act:disabled { opacity: 0.55; cursor: default; }
.rq-gone-group { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rq-gone-set { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-35); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.rq-gone-set input { flex: none; margin: var(--sp-05) 0 0; accent-color: var(--color-primary); }
.rq-gone-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.rq-gone-head { display: flex; gap: var(--sp-2); align-items: baseline; }
.rq-gone-head b { font-size: var(--t-title-sm-s); font-weight: 600; color: var(--text); }
.rq-gone-n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--muted); }
.rq-gone-what { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; }
.rq-gone-line { font-size: var(--t-body-sm-s); color: var(--text); }
.rq-gone-names { font-size: var(--t-caption-s); color: var(--muted); }
.rq-sync-plate.rq-gone-plate { display: flex; align-items: center; justify-content: center; gap: var(--sp-35); background: var(--bg-sunken); }
.rq-gone-screen { height: calc(var(--sp-16) * 1.75); box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); }
.rq-gone-screen i { display: block; height: var(--sp-1); border-radius: var(--r-xs); background: var(--border); }
.rq-gone-screen i:nth-child(2) { height: calc(var(--sp-8) + var(--sp-05)); }
.rq-gone-screen i:nth-child(4) { margin-top: auto; height: var(--sp-2); }
.rq-finds ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption-s); color: var(--text); }
.rq-view { display: flex; gap: 8px; }
.rq-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rq-seg button { border: 0; background: var(--surface); color: var(--muted); padding: 4px 12px; font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.rq-seg button.on { background: var(--tint-3); color: var(--text); font-weight: 600; }
.rq-stage { border-radius: var(--r-md); border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-x: auto; }
.rq-row-title { margin: 0 0 8px; font-size: var(--t-caption-s); font-weight: 600; }
.rq-cells { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rq-cell { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.rq-cell figcaption { font-size: var(--t-caption-s); opacity: 0.72; }
.rq-art { display: flex; align-items: center; min-height: 24px; max-width: 100%; }
.rq-none { font-size: var(--t-caption-s); opacity: 0.72; }
.rq-context { border: 1px solid; border-radius: var(--r-md); padding: 24px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.rq-context.phone { width: 360px; }
.rq-context-card { border: 1px solid; border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.rq-context-card span { font-size: var(--t-body-sm-s); }
.rq-context-art { margin-top: 8px; max-width: 100%; overflow: hidden; }
.rq-inspect { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.rq-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption-s); color: var(--muted); }
.rq-field span { color: var(--text); font-weight: 600; }
.rq-field select, .rq-field input { font: inherit; font-size: var(--t-body-sm-s); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 4px 8px; height: 32px; box-sizing: border-box; }
.rq-shared { margin: 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.45; }
.rq-bind-title { margin-top: 4px; }
.rq-binds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption-s); color: var(--muted); }
.rq-binds b { color: var(--text); font-weight: 600; margin-right: 4px; }
@media (max-width: 1280px) { .rq-body { grid-template-columns: 200px minmax(0, 1fr); } .rq-inspect { grid-column: 2; position: static; } }
/* Narrowed by a detail panel beside it, the queue measures its own room, not the window's:
   with a panel open the window was wide and the queue was not, and the settings were drawn over the sheet. */
#cmpGroups { container-type: inline-size; }
@container (max-width: 1100px) { .rq-body { grid-template-columns: 200px minmax(0, 1fr); } .rq-inspect { grid-column: 2; position: static; } }
/* The sheet beside Figma is put in its column by a rule further down, which beat this one and left it no width at all: said more closely here. */
@container (max-width: 760px) { .rq-body { grid-template-columns: minmax(0, 1fr); } .rq-list { position: static; max-height: 240px; } .rq-inspect, .rq-body > .rq-sheet.fb { grid-column: 1; } }

/* A component drawn from a Figma file, beside Figma's own pictures (src/figma-beside.js).
   It takes the inspector's column too, so a button as wide as its row can be read; what
   was read sits beside the table where there is room and under it where there is not. */
.rq-sheet.fb { grid-column: 2 / -1; container-type: inline-size; }
.fb-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fb-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fb-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; align-items: start; }
@container (min-width: 1180px) { .fb-main { grid-template-columns: minmax(0, 1fr) 280px; } .fb-side { grid-template-columns: minmax(0, 1fr); } }
.fb-sum { margin: 4px 0 0; font-size: var(--t-caption-s); color: var(--text); }
.fb-busy { color: var(--muted); }
.fb-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fb-fg { display: inline-flex; align-items: center; gap: 8px; }
.fb-fl { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
.fb-fg .rq-seg button small { color: var(--muted); margin-left: 4px; font-size: var(--t-caption-s); }
.fb-spacer { flex: 1; }
.fb-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.fb-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) minmax(0, 1fr) 128px; gap: 12px; align-items: center; width: 100%; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; }
.fb-row.one { grid-template-columns: 148px minmax(0, 2fr) 128px; }
/* Narrow, with the detail panel open beside it: the name and the match over the pictures. */
@container (max-width: 760px) {
  .fb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .fb-row.one { grid-template-columns: minmax(0, 1fr) auto; }
  .fb-row > .fb-vn { grid-column: 1; grid-row: 1; }
  .fb-row > .fb-match { grid-column: 2; grid-row: 1; justify-self: end; align-items: flex-end; text-align: right; }
  .fb-row > .fb-plate { grid-row: 2; }
  .fb-row.one > .fb-plate { grid-column: 1 / -1; }
  .fb-head > span:first-child, .fb-head > span:last-child { display: none; }
  .fb-head > span { grid-row: 1; }
  .fb-head.one > span { grid-column: 1 / -1; }
}
.fb-row:last-child { border-bottom: 0; }
button.fb-row { cursor: pointer; }
button.fb-row:hover { background: var(--tint-2); }
.fb-head { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); background: var(--surface); }
.fb-vn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-vn b { font-size: var(--t-body-sm-s); font-weight: 600; }
.fb-vn small { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); overflow-wrap: anywhere; }
.fb-plate { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; padding: 8px; border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.fb-pic { display: block; max-width: 100%; height: auto; }
.fb-stack { position: relative; display: block; max-width: 100%; }
.fb-stack .fb-pic { width: 100%; }
.fb-stack .fb-pic[data-fbover] { position: absolute; left: 0; top: 0; opacity: 0.5; }
.fb-mark { position: absolute; outline: 2px solid var(--color-error); border-radius: var(--r-md); pointer-events: none; }
.fb-live { display: block; max-width: none; overflow: hidden; }
.fb-none { font-size: var(--t-caption-s); color: var(--muted); }
.fb-match { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.fb-match small { font-size: var(--t-caption-s); color: var(--muted); }
.fb-chip { font-size: var(--t-caption-s); font-weight: 600; padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--r-md); white-space: nowrap; }
.fb-chip.ok { color: var(--green); }
.fb-chip.warn { color: var(--status-caution); }
.fb-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.fb-card p { margin: 0; font-size: var(--t-caption-s); color: var(--text); line-height: 1.45; }
.fb-card .fb-ct { font-weight: 600; }
.fb-card .fb-quiet { color: var(--muted); }
.fb-kv { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; }
.fb-sw { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: var(--r-md); }
.fb-kv b, .fb-sz b { display: block; font-size: var(--t-caption-s); font-weight: 600; color: var(--text); }
.fb-kv div span, .fb-sz span { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
.fb-sz { display: flex; flex-direction: column; gap: 2px; }
.fb-card .fb-miss { position: relative; padding-left: 12px; }
.fb-card .fb-miss::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: var(--r-md); background: var(--status-caution); }
.wt-panel[data-kind="figma-variant"] .wt-panel-body { padding: var(--sp-4) var(--sp-5); }
.fbx { display: flex; flex-direction: column; gap: 16px; }
.fbx-raw { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
.fbx .rq-seg { align-self: flex-start; }
.fbx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fbx-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fbx-fig figcaption { font-size: var(--t-caption-s); color: var(--muted); }
.fbx-plate { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 12px; border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.fbx-looks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.fbx-looks b { display: block; font-size: var(--t-title-lg-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.fbx-looks p { margin: 4px 0 0; font-size: var(--t-caption-s); color: var(--muted); line-height: 1.45; }
.fbx-thumb { display: block; width: 120px; }
.fbx-t { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); }
.fbx-r { display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) 56px; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: var(--t-caption-s); color: var(--text); font-variant-numeric: tabular-nums; }
.fbx-r:last-child { border-bottom: 0; }
.fbx-h { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
.fbx-k { color: var(--muted); }
.fbx-off { color: var(--status-caution); }
.fbx-mark.ok { color: var(--green); }
.fbx-mark.warn { color: var(--status-caution); font-weight: 600; }
/* A component drawn from its layers: a property with many options is a list, and what the drawing could not take is said under the table. */
.fb-sel { font: inherit; font-size: var(--t-caption-s); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 8px; max-width: 220px; }
.fbx-notes ul { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption-s); color: var(--text); line-height: 1.45; }
.wt-figma-layers { max-width: 100%; overflow: hidden; }
/* A hidden offer is hidden: its display rule outranked the attribute and left an empty box over the library. */
.starter-offer[hidden] { display: none; }

/* The reference pages, drawn from the system, above the design context grid. */
.dc-refset { margin: 0 0 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.dc-refset-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dc-refset-head b { display: block; font-size: var(--t-body-sm-s); font-weight: 600; color: var(--text); }
.dc-refset-head span { display: block; margin-top: 4px; font-size: var(--t-caption-s); color: var(--muted); max-width: 64ch; line-height: 1.45; }
.dc-refset-head .btn { flex: none; }
.dc-refset-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.dc-refset-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: var(--t-caption-s); color: var(--muted); }
.dc-refset-list label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; min-width: 0; }
.dc-refset-list label input { margin: 2px 0 0; flex: none; }
.dc-refset-list b { color: var(--text); font-weight: 600; }
.dc-refset-list small { display: block; font-size: var(--t-caption-s); line-height: 1.4; }
.dc-refset-list em { flex: none; font-style: normal; color: var(--muted); }
.dc-refset-list em.have { color: var(--green); }
.dc-refset-list em.failed { color: var(--color-error); }
.dc-refset-say { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
/* The sizes a field and a card are shown at in a preview cell. They were
   the components' own, so every page drawn with the system's card had its
   panels squeezed to 240px and every field to 220px (24 September).
   The canvas's copy of the components is !important (wtScopedCss), so the frame is too. */
:is(.preview-cell-art, .rq-art, .style-live-art) .wt-scope .wt-field { width: 220px !important; }
:is(.preview-cell-art, .rq-art, .style-live-art) .wt-scope .wt-card { min-width: 200px !important; max-width: 240px !important; }

/* Another design system, from the surface's menu. */
.wt-panel[data-kind="restyle"] .wt-panel-body { padding: var(--sp-4) var(--sp-5); }
.sf-restyle { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-body-sm-s); color: var(--text); }
.sf-restyle-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-restyle-list label, .sf-restyle-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sf-restyle-list i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border); flex: none; }
.sf-restyle-list small { color: var(--muted); font-size: var(--t-caption-s); }
.sf-restyle-say { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--muted); }
/* Apply a design system (pilot batch 4): the scope first, then a row a system with its picture. */
.sf-restyle-scope { align-self: flex-start; margin-bottom: var(--sp-2); }
.sf-restyle-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); cursor: pointer; }
.sf-restyle-row:hover { background: var(--surface-hover); }
.sf-restyle-row.on { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--signal-live-line); }
.sf-restyle-row input { position: absolute; opacity: 0; pointer-events: none; }
.sf-restyle-row:focus-within { outline: 2px solid var(--signal-live-line); outline-offset: 1px; }
.sf-restyle-thumb { width: 72px; height: 48px; flex: none; border-radius: var(--r-sm); overflow: hidden; position: relative; background: var(--bg-sunken); }
.sf-restyle-thumb > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-restyle-thumb .pthumb.sys { height: 100%; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); flex-direction: row; align-items: center; justify-content: space-between; }
.sf-restyle-thumb .pthumb.sys .sw { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; }
.sf-restyle-thumb .pthumb.sys .sw i { width: 8px; height: 8px; }
.sf-restyle-thumb .pthumb.sys .aa { font-size: var(--t-title-md-s); }
.sf-restyle-thumb .pthumb.sys .faces { display: none; }
.sf-restyle-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-restyle-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-restyle-hid { color: var(--muted); font-size: var(--t-caption-s); margin: 0; }
.sf-restyle-how summary { cursor: pointer; color: var(--muted); font-size: var(--t-caption-s); }
.sf-restyle-steps { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }

/* ══════════════════════════════════════════════
   The shell, in Variant B's proportions (2 October 2026)

   The title bar is the window's own: 40px on the chrome ground, the
   traffic lights at the left, Back and the window's tabs beside them,
   what is running and Settings at the right, and nothing else. The
   rail is 52px of icons, each label a tooltip. The content is a flat
   ground beside and below them: the change of ground is the seam, so
   neither carries a line. Stated last, so it wins over the frame above.
══════════════════════════════════════════════ */
.shellbar {
  top: 0; height: var(--shell-h); padding: 0 var(--sp-2) 0 calc(var(--sp-16) + var(--sp-5));
  background: var(--bg-rail); border-bottom: 0; gap: var(--sp-1);
  -webkit-app-region: drag;
}
.shellbar button, .shellbar .shell-tabs { -webkit-app-region: no-drag; }
.shell-ico {
  width: var(--h-meta); height: var(--h-meta); flex: none; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-muted); display: inline-grid; place-items: center; cursor: pointer;
}
.shell-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shell-ico:hover:not(:disabled) { background: var(--tint-3); color: var(--text-primary); }
.shell-ico:disabled { opacity: .35; cursor: default; }
.shell-tabs { display: flex; align-items: flex-end; align-self: stretch; gap: var(--sp-05); margin-left: var(--sp-2); min-width: 0; padding-top: var(--sp-1); }
.shell-wtab {
  height: calc(var(--shell-h) - var(--sp-1)); max-width: 240px; min-width: 0; padding: 0 var(--sp-3); border: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: none; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-xs-s); white-space: nowrap; cursor: pointer;
}
.shell-wtab svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shell-wtab span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shell-wtab:hover { background: var(--tint-2); color: var(--text-secondary); }
.shell-wtab.on { background: var(--bg-page); color: var(--text-primary); font-weight: 600; }
.shell-wtab.on:hover { background: var(--bg-page); }
.shell-wtab.home { padding: 0 var(--sp-25); }
.shell-wtab .x { width: 18px; height: 18px; flex: none; border-radius: var(--r-xs); display: inline-grid; place-items: center; color: var(--text-muted); margin-right: calc(-1 * var(--sp-1)); }
.shell-wtab .x:hover { background: var(--tint-4); color: var(--text-primary); }
.shell-wtab .x svg { width: 12px; height: 12px; }
.shell-right { gap: var(--sp-1); }
.shell-model, .shell-gear { min-height: var(--h-meta); height: var(--h-meta); border-radius: var(--r-sm); }
.shell-gear { width: var(--h-meta); padding: 0; justify-content: center; }
.shell-run { height: var(--h-meta); min-height: var(--h-meta); }

.prail {
  top: var(--chrome-h); width: var(--rail-w); background: var(--bg-rail); border-right: 0;
  align-items: center; gap: var(--sp-1); padding: var(--sp-2) 0 var(--sp-3);
}
.prail .pnav {
  width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: var(--r-lg);
  position: relative; display: grid; place-items: center; color: var(--text-muted);
}
/* The label is the tooltip now; it stays in the tree for the reader and
   for anything that reads the rail by its words. */
.prail .pnav span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prail .pnav svg { width: 20px; height: 20px; transition: none; }
.prail .pnav:hover { background: var(--tint-3); color: var(--text-primary); }
.prail .pnav.on { background: var(--tint-3); color: var(--text-primary); border-left: 0; }
.prail .pnav.on::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 2px; border-radius: var(--r-xs); background: var(--signal-live); }
.prail .pnav.on svg, .prail .pnav:hover:not(.on) svg { animation: none; transform: none; }
.prail .sep { width: 24px; margin: var(--sp-1) auto; }
/* Who is signed in (hosted app only; src/account.js), beside the gear in
   the one corner that says what you work as and where you change it: the
   gear's own size, the person's initials in a round avatar. */
.shell-account { width: var(--h-meta); height: var(--h-meta); min-height: var(--h-meta); padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; border-radius: var(--r-pill); }
.shell-avatar { width: calc(var(--h-meta) - 4px); height: calc(var(--h-meta) - 4px); border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--tint-3); color: var(--text-primary); font-size: var(--t-caption-s); font-weight: 600; line-height: 1; }
.shell-account:hover .shell-avatar, .shell-account[aria-expanded="true"] .shell-avatar { background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.shell-account:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wt-acct-head { display: grid; gap: var(--sp-05); padding: var(--sp-2) var(--sp-25); min-width: 200px; }
.wt-acct-name { font-weight: 600; color: var(--text-primary); }
.wt-acct-mail { font-size: var(--t-caption-s); color: var(--text-muted); }
.start-option-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ══════════════════════════════════════════════
   The workflow's side (2 October 2026): a column on the chrome ground
   at the left of the workflow, Overview at its head, the steps by phase,
   the progress under them, the system and the brief at the foot. The
   steps keep the rail's names (wsr-chip, data-wrstep, its states) and
   stand as rows instead of chips.
══════════════════════════════════════════════ */
.wf.with-side { grid-template-columns: var(--w-side) minmax(0, 1fr); }
.wf.with-side > #wfHead, .wf.with-side > .workflow, .wf.with-side > .workflowrun { grid-column: 2; }
.wf-side {
  grid-row: 1 / 3; grid-column: 1; background: var(--bg-rail); min-height: 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-05); padding: var(--sp-2) var(--sp-3) var(--sp-3); overflow: hidden;
}
.wf-side[hidden] { display: none; }
.wfs-overview {
  height: var(--h-row); flex: none; width: 100%; display: flex; align-items: center; gap: var(--sp-25); padding: 0 var(--sp-25);
  border: 0; border-radius: var(--r-lg); background: none; color: var(--text-secondary); font: inherit; font-size: var(--t-body-md-s); text-align: left; cursor: pointer;
}
.wfs-overview svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wfs-overview:hover { background: var(--tint-3); color: var(--text-primary); }
.wfs-overview.on { background: var(--tint-3); color: var(--text-primary); font-weight: 600; }
.wfs-steps { display: flex; flex-direction: column; gap: var(--sp-05); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.wfs-steps .wsr-phase {
  position: static; display: flex; justify-content: space-between; align-items: baseline; flex: none;
  padding: var(--sp-5) var(--sp-25) var(--sp-15); background: none;
}
.wfs-steps .wsr-phase:first-child { padding-top: var(--sp-2); }
.wfs-steps .wsr-phase .n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.wfs-steps .wsr-phase .n.ok { color: var(--status-settled); }
.wfs-steps .wsr-chip {
  display: flex; flex: none; width: 100%; height: var(--h-row); max-width: none; padding: 0 var(--sp-25); gap: var(--sp-25);
  border: 0; border-radius: var(--r-lg); background: none; color: var(--text-secondary); font-size: var(--t-body-md-s); text-align: left; scroll-snap-align: none;
}
.wfs-steps .wsr-chip:hover { background: var(--tint-3); color: var(--text-primary); border-color: transparent; }
.wfs-steps .wsr-chip.on { background: var(--chosen-bg); color: var(--text-primary); font-weight: 600; box-shadow: none; border-color: transparent; }
/* The cursor is said by its mark, not by a fill; the fill is for the one being read. */
.wfs-steps .wsr-chip.current, .wfs-steps .wsr-chip.running { background: none; color: var(--text-primary); font-weight: 600; }
.wfs-steps .wsr-chip.current:hover, .wfs-steps .wsr-chip.running:hover { background: var(--tint-3); color: var(--text-primary); }
.wfs-steps .wsr-chip.current.on, .wfs-steps .wsr-chip.running.on { background: var(--chosen-bg); }
.wfs-steps .wsr-chip.stopped { border: 0; color: var(--text-primary); }
.wfs-steps .wsr-chip.stopped.cursor { background: none; color: var(--text-primary); }
.wfs-steps .wsr-chip.held, .wfs-steps .wsr-chip.skipped { border: 0; color: var(--text-muted); }
.wfs-steps .wsr-mark {
  width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center;
  font-style: normal; font-size: var(--t-mono-2xs-s); line-height: 1; color: var(--bg-rail);
}
.wfs-steps .wsr-chip.done .wsr-mark { background: var(--status-settled); border-color: var(--status-settled); }
.wfs-steps .wsr-chip.current .wsr-mark, .wfs-steps .wsr-chip.running .wsr-mark { background: var(--signal-live); border-color: var(--signal-live); }
.wfs-steps .wsr-chip.stopped .wsr-mark { background: var(--status-caution); border-color: var(--status-caution); }
.wfs-steps .wsr-chip.held .wsr-mark, .wfs-steps .wsr-chip.skipped .wsr-mark { border-style: dashed; }
.wfs-steps .wsr-chip .wsr-l { white-space: nowrap; }
.wfs-progress { flex: none; padding: var(--sp-6) var(--sp-25) 0; display: grid; gap: var(--sp-2); }
.wfs-bar { display: flex; gap: 2px; height: 4px; }
.wfs-bar i { flex: 1; border-radius: var(--r-xs); background: var(--border-strong); }
.wfs-bar i.done { background: var(--status-settled); }
.wfs-bar i.on { background: var(--signal-live); }
.wfs-progress span { font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); }
.wfs-foot { margin-top: auto; flex: none; display: flex; gap: var(--sp-1); padding-top: var(--sp-3); min-width: 0; }
.wfs-pick, .wfs-brief {
  height: var(--h-meta); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary);
  font: inherit; font-size: var(--t-body-xs-s); display: inline-flex; align-items: center; gap: var(--sp-15); cursor: pointer; min-width: 0;
}
.wfs-pick { flex: 0 1 auto; }
.wfs-pick svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wfs-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfs-pick.none { color: var(--text-muted); }
.wfs-pick:hover, .wfs-brief:hover { background: var(--tint-3); color: var(--text-primary); }
/* The head beside the side has the side's steps for its plan; the
   Plan, Run and Made views stay as the way between them, and the
   name's row loses its line under it: the content's ground is the seam. */
.wf.with-side .wt-wshead .wthead-row1 { border-bottom: 0; }
.wf.with-side .wt-wshead:has(.wthead-rail[hidden]) .wthead-row1 { border-bottom: 0; }

/* ══════════════════════════════════════════════
   The design surface, focused (2 October 2026): the window's rail
   stands down while a page is open, so the surface takes the width;
   the title bar keeps the way back. A board's name is set in the
   sans, in sentence case, as the page named itself. The capsule
   carries Hand off and the close.
══════════════════════════════════════════════ */
/* Inside a project the canvas is a view: the rail and the project's sidebar stay (Workflows redesign, batch 8). */
html.wt-focus:not(.ps-on) .prail { display: none; }
html.wt-focus:not(.ps-on) .wf, html.wt-focus:not(.ps-on) .studio { left: 0; }
.wt-cv-name button { font-family: var(--font-sans); font-size: var(--t-caption-s); letter-spacing: 0; text-transform: none; }
.wt-cv-name button b { font-weight: 600; }
/* Hand off is the canvas's one primary, at the right of its bar. */
.wt-cap-handoff {
  height: 36px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-xl); white-space: nowrap; cursor: pointer;
  background: var(--action-primary-bg); color: var(--text-inverse); font: inherit; font-size: var(--t-body-sm-s); font-weight: 600;
  transition: background var(--dur-hover) var(--ease-out);
}
.wt-cap-handoff:hover:not(:disabled) { background: var(--action-primary-hover); }
.wt-cap-handoff:disabled { opacity: .45; cursor: not-allowed; }
.wt-cap-close { margin-left: var(--sp-05); }
/* The options control on the composer's bar (2 October 2026). */
.stu-opts { align-self: center; padding-left: 0; }
.stu-opts[hidden] { display: none; }
.stu-opts-lab { font-size: var(--t-micro-s); color: var(--subtle); padding: 0 var(--sp-15) 0 var(--sp-25); }
.stu-opts button { min-width: 28px; padding: 0 var(--sp-2); }

/* ══════════════════════════════════════════════
   The detail panel as a split (2 October 2026): a column at the right
   from the title bar to the foot, the screen beside it narrowed to make
   room so its head and its dock stay whole and visibly its own. The
   app's name stands beside the traffic lights; the head's back arrow
   is gone, the title bar's Back being the way up.
══════════════════════════════════════════════ */
.shell-wordmark { margin: 0 var(--sp-3) 0 0; font-family: var(--font-sans); font-size: var(--t-wordmark-s); font-weight: 600; letter-spacing: var(--t-wordmark-ls); gap: 0.22em; }
.shell-wordmark .wind { color: var(--brand-text); }
.shell-wordmark .tunnel { color: var(--text-primary); }
.wthead-back[hidden] { display: none; }
.wt-panel { box-shadow: none; border-left: 1px solid var(--border-hairline); }
html.wt-split .wf, html.wt-split .studio, html.wt-split .dashboard, html.wt-split .wfbrief { right: var(--wt-panel-w, 0px); }
html.wt-split .app { margin-right: var(--wt-panel-w, 0px); }
/* The runner beside a panel is narrow, so its stage answers its own
   width, not the window's: the ledger column goes under the work, the
   dock's buttons stay on one line. */
.workflowrun { container-type: inline-size; }
@container (max-width: 1100px) {
  .wt-stage.wr-step { grid-template-columns: minmax(0, 1fr) 262px; gap: var(--sp-6); }
}
@container (max-width: 900px) {
  .wt-stage.wr-step { grid-template-columns: minmax(0, 1fr); }
  .wt-ledger { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-hairline); padding-top: var(--sp-5); position: static; }
}
.wt-dock-primary { white-space: nowrap; }
@container (max-width: 1100px) {
  .wt-outgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 900px) {
  .wt-outgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The dock keeps its buttons whole and lets its words give way. */
  .wt-dock-status { min-width: 0; flex: 1 1 0; }
  .wt-dock-status > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .wt-dock-acts { flex: none; }
}

/* ══ A run's options on the canvas (2 October 2026) ══════════════════
   A board an option from the moment a Craft run starts: the option's
   idea on the sunken ground until its page's body begins, then the page
   as far as it has been written, the next frame swapped in behind the
   one showing so the board never blinks. The words are scaled against
   the zoom, the way the board names are. */
.wt-cv-board.drawing .ide-frame { background: var(--bg-sunken); }
.wt-cv-board.drawing .ide-frame iframe.next { position: absolute; inset: 0; visibility: hidden; }
.wt-cv-board.drawing .wt-cv-name small { display: inline; color: var(--signal-live); }
.wt-drawing { position: absolute; inset: 0; display: grid; place-items: center; }
.wt-drawing-in {
  display: grid; gap: var(--sp-2); justify-items: center; text-align: center; box-sizing: border-box;
  max-width: calc(100% / var(--cv-inv)); padding: var(--sp-6);
  transform: scale(var(--cv-inv)); transform-origin: 50% 50%;
}
.wt-drawing-state { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); line-height: var(--t-mono-xs-lh); text-transform: uppercase; color: var(--text-muted); }
.wt-drawing b { font-size: var(--t-title-md-s); line-height: var(--t-title-md-lh); font-weight: 600; color: var(--text-primary); }
.wt-drawing p { margin: 0; max-width: 36ch; font-size: var(--t-body-md-s); line-height: var(--t-body-md-lh); color: var(--text-secondary); }
.wt-drawing.failed .wt-livedot { background: var(--color-error); }
.wt-drawing.failed p { color: var(--color-error); }

/* ── The properties, by what is selected (4 October 2026) ─────────
   Sections by the selection's kind, an empty one folded behind a plus,
   values as rows: a field to type or step, a menu of the page's steps,
   a colour as its swatch and its name. Fields sit a step above the
   panel, with no edge; the segmented rows sit in a trough. */
.wt-props .pe-body { gap: 0; padding: 0 var(--sp-3) var(--sp-3); }
.wt-props .pe-sec { gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3); border-top: 1px solid var(--border-hairline); }
.wt-props .pe-sec:first-child, .wt-props .pe-scoperow + .pe-sec, .wt-props .pe-say + .pe-sec { border-top: 0; }
.wt-props .pe-sec.folded { padding: var(--sp-05) 0; }
.pe-sh { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.pe-lab { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.pe-ib { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.pe-ib:hover { background: var(--tint-4); color: var(--text-primary); }
.pe-ib.on { background: var(--chosen-bg); color: var(--chosen-fg); }
.pe-ib:focus-visible, .pe-dd:focus-visible, .pe-morebtn:focus-visible, .pe-scopechip:focus-visible, .pe-crumbs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.pe-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.pe-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); flex: 1; min-width: 0; }
.pe-f { display: flex; align-items: center; gap: var(--sp-15); height: 28px; padding: 0 var(--sp-2); min-width: 0; box-sizing: border-box; background: var(--bg-raised); border-radius: var(--r-sm); }
.pe-f .pe-fk { flex: none; display: inline-grid; place-items: center; min-width: 12px; font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-f input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); font-variant-numeric: tabular-nums; }
.pe-f input::placeholder { color: var(--text-muted); }
.pe-f .pe-fu { flex: none; font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-f .pe-fmode { flex: none; max-width: 64px; padding: 0 0 0 var(--sp-05); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.pe-g4 .pe-f { padding: 0 var(--sp-1); gap: var(--sp-05); }
.pe-dd { width: 100%; height: 28px; min-width: 0; padding: 0 var(--sp-1) 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); cursor: pointer; }
.pe-row2 { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
.pe-row2 .pe-rl { flex: none; width: 64px; font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-row2 .pe-rv { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-1); }
.pe-row2 .pe-rv > .pe-dd, .pe-row2 .pe-rv > .pe-seg, .pe-row2 .pe-rv > .pe-f, .pe-row2 .pe-rv > .pe-g2 { flex: 1; }
.wt-props .pe-seg { display: flex; gap: 2px; padding: 2px; border: 0; border-radius: var(--r-sm); background: var(--bg-sunken); overflow: visible; }
.wt-props .pe-seg button { flex: 1; min-width: 0; height: 24px; padding: 0 var(--sp-1); border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--t-caption-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-grid; place-items: center; }
.wt-props .pe-seg button + button { border-left: 0; }
.wt-props .pe-seg button:hover { color: var(--text-primary); }
.wt-props .pe-seg button.on { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-raised); font-weight: 600; }
.pe-colour { display: flex; align-items: center; gap: var(--sp-15); }
.pe-colour input[type="color"] { flex: none; width: 28px; height: 28px; padding: var(--sp-05); border: 0; border-radius: var(--r-sm); background: var(--bg-raised); cursor: pointer; }
.pe-colour input[type="color"].unset { opacity: .55; }
.pe-colour .pe-dd { flex: 1; }
.wt-props .pe-contrast { align-self: center; margin: 0; flex: none; }
.pe-fill { display: flex; align-items: center; gap: var(--sp-2); height: 28px; padding: 0 var(--sp-05) 0 var(--sp-2); border-radius: var(--r-sm); background: var(--bg-raised); }
.pe-fill.open { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.pe-fill .pe-fname { flex: 1; min-width: 0; font-size: var(--t-body-xs-s); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-fill .pe-fval { font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-fill .pe-bgthumb { width: 16px; height: 16px; border: 0; box-shadow: inset 0 0 0 1px var(--tint-4); }
.pe-fillbody { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: calc(-1 * var(--sp-2)); padding: var(--sp-1) var(--sp-2) var(--sp-2); border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--bg-raised); border-top: 1px solid var(--border-hairline); }
.pe-fillbody .pe-seg { background: var(--bg-surface); }
.pe-addpic { display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start; height: 24px; padding: 0 var(--sp-15); border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--t-caption-s); cursor: pointer; position: relative; }
.pe-addpic:hover { background: var(--tint-4); color: var(--text-primary); }
.pe-addpic input, .pe-picprev .pe-filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pe-addpic:focus-within { outline: 2px solid var(--focus-ring); }
.pe-picprev { position: relative; height: 132px; border-radius: var(--r-sm); background: var(--bg-sunken); overflow: hidden; }
.pe-picprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-picprev .pe-filebtn { position: absolute; right: var(--sp-2); bottom: var(--sp-2); }
.pe-morebtn { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.pe-morebtn:hover { color: var(--text-primary); }
.pe-more { display: flex; flex-direction: column; gap: var(--sp-2); }
.pe-scoperow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-15); padding: var(--sp-2) 0 var(--sp-1); font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-scopechip { display: inline-flex; align-items: center; gap: var(--sp-1); height: 24px; padding: 0 var(--sp-15) 0 var(--sp-2); border: 0; border-radius: var(--r-xs); background: var(--bg-raised); color: var(--text-primary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.pe-scopechip span { color: var(--text-muted); }
.pe-scoperow .pe-scopesay { margin: 0; }
.pe-say { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--t-caption-s); line-height: 1.5; color: var(--text-secondary); }
.wt-props .pe-hint { font-size: var(--t-caption-s); color: var(--text-muted); }
.pe-why2 { border-top: 1px solid var(--border-hairline); padding: var(--sp-1) 0; }
.pe-why2 > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; list-style: none; cursor: pointer; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.pe-why2 > summary::-webkit-details-marker { display: none; }
.pe-why2 > summary::after { content: "›"; margin-left: auto; color: var(--text-muted); transition: transform var(--dur-state) var(--ease-out); }
.pe-why2[open] > summary::after { transform: rotate(90deg); }
.pe-why2 > summary:hover { color: var(--text-primary); }
.pe-why2 .pe-sec { border-top: 0; padding-top: 0; }
.pe-foldsum { color: var(--text-muted); font-size: var(--t-caption-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pe-tstyle .pe-tsample { width: 28px; flex: none; color: var(--text-primary); line-height: 1; }
.pe-token.plain.pe-tstyle { grid-template-columns: 28px 1fr 72px; }
.pe-token.plain.pe-tstyle .pe-tokval { grid-column: 3; }
/* The head: the kind's mark, the name, the path above it, undo, redo, the menu. */
.wt-panelhead.wt-propshead { justify-content: flex-start; gap: var(--sp-15); padding-left: var(--sp-3); }
.wt-propshead .wt-propsname { flex: 1; }
.pe-kindmark { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-secondary); }
.pe-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.pe-crumbs > span { color: var(--text-muted); }
.pe-crumbs button { flex: none; padding: 0 2px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.pe-crumbs button:hover { color: var(--text-primary); background: var(--tint-4); }
.wt-propshead .pe-history button { width: 24px; height: 24px; border: 0; background: transparent; }
.wt-propshead .pe-history button:hover:not(:disabled) { background: var(--tint-4); }
/* The app's general input rule chains five :not()s; the panel's fields outrank it here. */
.wt-props .pe-f input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { flex: 1 1 0; min-width: 24px; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); font-variant-numeric: tabular-nums; }
.wt-props .pe-f .pe-fmode { width: auto; height: auto; flex: none; }
.wt-props .pe-dd { padding: 0 var(--sp-1) 0 var(--sp-2); }
.wt-propshead .wt-editctx { height: auto; padding: 0; border: 0; gap: 0; flex: none; }
.wt-propshead .wt-editctx button { border: 0; background: transparent; color: var(--text-secondary); }
/* Arrange: the 3 by 3 grid of where the children sit, beside the gap and a grid's columns. */
.pe-alignrow { align-items: flex-start; }
.pe-align9 { flex: none; display: grid; grid-template-columns: repeat(3, 20px); grid-auto-rows: 20px; padding: var(--sp-1); gap: 0; border-radius: var(--r-sm); background: var(--bg-raised); }
.pe-align9 button { display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; cursor: pointer; }
.pe-align9 button i { width: 4px; height: 4px; border-radius: var(--r-xs); background: var(--text-muted); opacity: .6; }
.pe-align9 button:hover i { opacity: 1; background: var(--text-primary); }
.pe-align9 button.on i { width: 12px; height: 4px; border-radius: var(--r-xs); opacity: 1; background: var(--signal-live); box-shadow: 0 -4px 0 var(--signal-live), 0 4px 0 var(--signal-live); }
.pe-align9 button:focus-visible { outline: 2px solid var(--focus-ring); }
.pe-alignside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
/* Layers as a tree (4 October 2026): a twirl, the kind's mark, the name and its words, a count on a part repeated,
   the shell marked, the eye on what is hidden or under the pointer, a line where a dragged row will land. */
.pe-layerfind { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) 0 var(--sp-1); }
.pe-layerfind .pe-f { flex: 1; }
.wt-props .pe-layers { margin: 0 calc(-1 * var(--sp-1)); padding: var(--sp-1) 0; }
.wt-props .pe-layer { position: relative; display: flex; align-items: center; gap: var(--sp-1); height: 28px; padding: 0 var(--sp-05) 0 calc(var(--sp-1) + var(--d, 0) * 12px); border-radius: var(--r-sm); cursor: default; color: var(--text-secondary); }
.wt-props .pe-layer:hover { background: var(--tint-4); color: var(--text-primary); }
.wt-props .pe-layer:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.wt-props .pe-layer.on { background: var(--signal-live-soft); color: var(--text-primary); }
.wt-props .pe-layer.child { background: color-mix(in srgb, var(--signal-live-soft) 45%, transparent); }
.wt-props .pe-layer.dragging { opacity: .5; }
.wt-props .pe-layer.drop-before::before, .wt-props .pe-layer.drop-after::after { content: ""; position: absolute; left: calc(var(--sp-6) + var(--d, 0) * 12px); right: var(--sp-1); height: 2px; border-radius: var(--r-xs); background: var(--signal-live); }
.wt-props .pe-layer.drop-before::before { top: -1px; }
.wt-props .pe-layer.drop-no { cursor: not-allowed; }
.wt-props .pe-layers + .pe-hint.refused { color: var(--status-caution); }
.wt-props .pe-layer.drop-after::after { bottom: -1px; }
.pe-twirl { flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); cursor: pointer; }
.pe-twirl svg { transition: transform var(--dur-state) var(--ease-out); }
.pe-twirl.open svg { transform: rotate(90deg); }
.pe-twirl:hover { color: var(--text-primary); }
.pe-lico { flex: none; display: inline-grid; place-items: center; color: var(--text-muted); }
.wt-props .pe-layer.on .pe-lico { color: var(--signal-live); }
.wt-props .pe-lkind { width: auto; flex: none; font-family: inherit; font-size: var(--t-body-xs-s); letter-spacing: 0; text-transform: none; color: inherit; }
.wt-props .pe-layer.on .pe-lkind { color: inherit; font-weight: 600; }
.wt-props .pe-lwords { flex: 1; min-width: 0; color: var(--text-muted); font-size: var(--t-caption-s); }
.pe-lbadge, .pe-lshell { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); color: var(--text-muted); }
.pe-lbadge { padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--bg-raised); }
.wt-props .pe-eye { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); cursor: pointer; opacity: 0; }
.wt-props .pe-eye::before, .wt-props .pe-eye::after { content: none; }
.wt-props .pe-layer:hover .pe-eye, .wt-props .pe-layer:focus-within .pe-eye, .wt-props .pe-layer.hid .pe-eye { opacity: 1; }
.wt-props .pe-eye:hover { color: var(--text-primary); background: var(--tint-4); }
.wt-props .pe-layer.hid .pe-lkind, .wt-props .pe-layer.hid .pe-lico { opacity: .5; }
.wt-props .pe-lmove { opacity: 0; }
.wt-props .pe-layer:hover .pe-lmove, .wt-props .pe-layer:focus-within .pe-lmove { opacity: 1; }
.wt-props .pe-hint kbd { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); padding: 0 var(--sp-05); border-radius: var(--r-xs); background: var(--bg-raised); }
/* Motion's triggers as cards (4 October 2026): what each does in a word, a plus or a minus; one with something on it open. */
.pe-trigs { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-3); }
.pe-trig { border-radius: var(--r-md); background: var(--bg-raised); }
.pe-trighead { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-05) 0 var(--sp-3); }
.pe-trigname { flex: none; font-size: var(--t-body-xs-s); font-weight: 600; color: var(--text-primary); }
.pe-trig:not(.has) .pe-trigname { font-weight: 400; color: var(--text-secondary); }
.pe-trigval { flex: 1; min-width: 0; font-size: var(--t-caption-s); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-trigbody { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--border-hairline); }
.pe-trigbody .pe-seg { background: var(--bg-surface); }
.pe-trigbody .pe-tile { background: var(--bg-surface); }
.pe-trigbody .pe-curve { flex: none; color: var(--signal-live); }
/* The Figma import's preview: the roles from the file's names, its ramps, its type scale (5 October 2026). */
.fi-ramp { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); }
.fi-ramp > span:first-child { display: flex; flex-direction: column; width: 140px; flex: none; min-width: 0; }
.fi-rampsteps { display: flex; flex: 1; height: 20px; border-radius: var(--r-xs); overflow: hidden; }
.fi-rampsteps i { flex: 1; }
/* ── The role check (5 October 2026): what each colour does, as a strip, and the roles to look at as rows ── */
.modal-overlay .figma-import-box:has(.figma-import-result:not(:empty)) { width: min(860px, calc(100vw - 80px)); max-height: min(900px, calc(100vh - 80px)); }
.fi-rolesec { display: flex; flex-direction: column; gap: var(--sp-25); }
.fi-rolehead { display: flex; align-items: flex-end; gap: var(--sp-3); }
.fi-rolehead > div { flex: 1; min-width: 0; }
.fi-rolehead .fi-section-label { margin: 0 0 var(--sp-1); }
.fi-rolecap { margin: 0; font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); max-width: 560px; }
.fi-pill { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-full); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; white-space: nowrap; }
.fi-pill.ok { background: var(--status-settled-soft); color: var(--status-settled); }
.fi-pill.warn { background: var(--status-caution-soft); color: var(--status-caution); }
.fi-pill.mute { background: var(--bg-raised); color: var(--text-muted); }
.fi-roles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-hairline); }
.fi-role { display: flex; flex-direction: column; min-width: 0; }
.fi-role + .fi-role { border-left: 1px solid var(--border-hairline); }
.fi-rcell { display: block; height: 36px; position: relative; box-shadow: inset 0 -1px 0 var(--border-hairline); }
.fi-rcell.unset, .fi-rsw > i.unset { background: repeating-linear-gradient(135deg, var(--bg-raised) 0 4px, var(--bg-sunken) 4px 8px); }
.fi-rdot { position: absolute; top: var(--sp-15); right: var(--sp-15); width: 16px; height: 16px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--color-surface); color: var(--status-caution); }
.fi-rlab { display: flex; flex-direction: column; gap: var(--sp-05); padding: var(--sp-15) var(--sp-2) var(--sp-2); min-width: 0; }
.fi-rlab b { font-size: var(--t-caption-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-rlab small { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-rlab small.warn { color: var(--status-caution); }
.fi-rolefoot { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.fi-rolefoot .ghost-link { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.fi-rolefoot .ghost-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.fi-rtable { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); }
.fi-rhead, .fi-rrow { display: grid; grid-template-columns: 28px 128px minmax(0, 1fr) 212px 148px; align-items: center; column-gap: var(--sp-3); padding: 0 var(--sp-3) 0 var(--sp-2); }
.fi-rhead { height: 32px; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.fi-rrow { min-height: 52px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.fi-rrow + .fi-rrow { border-top: 1px solid var(--border-hairline); }
.fi-rrow.look { background: color-mix(in srgb, var(--status-caution-soft) 50%, transparent); }
.fi-rrow.off .fi-rname, .fi-rrow.off .fi-rsrc, .fi-rrow.off .fi-rvals { opacity: 0.55; }
.fi-rtick { display: grid; place-items: center; }
.fi-rtick input { margin: 0; accent-color: var(--brand); }
.fi-rname { display: flex; flex-direction: column; gap: var(--sp-05); min-width: 0; }
.fi-rname b { font-size: var(--t-body-xs-s); font-weight: 600; }
.fi-rname small { font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); }
.fi-rsrc { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-15); }
.fi-rdd { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: 28px; padding: 0 var(--sp-2) 0 var(--sp-25); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--t-mono-sm-s); text-align: left; cursor: pointer; min-width: 0; }
.fi-rdd > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-rdd svg { flex: none; color: var(--text-muted); }
.fi-rdd.none { font-family: inherit; font-size: var(--t-body-xs-s); color: var(--text-muted); }
.fi-rdd:hover { background: var(--surface-hover); }
.fi-rdd[aria-expanded="true"] { border-color: var(--brand); }
.fi-ralts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-15); font-size: var(--t-caption-s); color: var(--text-muted); }
.fi-ralt { display: inline-flex; align-items: center; gap: var(--sp-15); height: 22px; padding: 0 var(--sp-2) 0 var(--sp-1); border: 0; border-radius: var(--r-xs); background: var(--bg-raised); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--t-mono-sm-s); cursor: pointer; max-width: 100%; }
.fi-ralt:hover { background: var(--surface-hover); }
.fi-ralt i, .fi-rmi i { flex: none; width: 12px; height: 12px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.fi-rvals { display: flex; gap: var(--sp-25); min-width: 0; }
.fi-rsw { display: flex; align-items: center; gap: var(--sp-15); min-width: 0; }
.fi-rsw > i { flex: none; width: 20px; height: 20px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.fi-rsw > span { display: flex; flex-direction: column; min-width: 0; }
.fi-rsw small { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.fi-rsw code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); background: none; padding: 0; border: 0; }
.fi-rchk { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; }
.fi-rchk small { font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); }
.fi-rmenu { position: absolute; top: 32px; left: 0; z-index: 5; width: 340px; display: flex; flex-direction: column; gap: var(--sp-05); padding: var(--sp-15); border-radius: var(--r-lg); background: var(--color-surface-raised); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-lg); }
.fi-rfind { height: 28px; margin-bottom: var(--sp-1); padding: 0 var(--sp-2); border: 1px solid var(--border-hairline); border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); }
.fi-rmlist { display: flex; flex-direction: column; gap: var(--sp-05); max-height: 260px; overflow-y: auto; }
.fi-rmh { padding: var(--sp-15) var(--sp-2) var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.fi-rmi { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; width: 100%; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--t-body-xs-s); text-align: left; cursor: pointer; }
.fi-rmi:hover, .fi-rmi:focus-visible { background: var(--surface-hover); }
.fi-rmi i.none { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.fi-rmtick { width: 12px; flex: none; color: var(--brand); display: grid; place-items: center; }
.fi-rmname { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-rmname.plain { font-family: inherit; font-size: var(--t-body-xs-s); }
.fi-rmi small { flex: none; font-size: var(--t-caption-s); color: var(--text-muted); }
.fi-rmsep { height: 1px; margin: var(--sp-1) var(--sp-15); background: var(--border-hairline); }
.fi-rmempty { margin: 0; padding: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.fi-ramp + .fi-swatches { margin-top: var(--sp-3); }
/* Backgrounds and artwork in the import (5 October 2026) */
.fi-artsec { display: flex; flex-direction: column; gap: var(--sp-25); }
.fi-artgroup { display: flex; flex-direction: column; gap: var(--sp-2); }
.fi-artgroup > .fi-section-label { margin: var(--sp-1) 0 0; }
.fi-artitem { display: grid; grid-template-columns: 28px minmax(0, 1fr) 220px; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); }
.fi-artitem > input { margin: var(--sp-05) 0 0 var(--sp-15); accent-color: var(--brand); }
.fi-artitem.off .fi-artwhat, .fi-artitem.off .fi-artmeta { opacity: 0.55; }
.fi-artwhat { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fi-artwhat b { font-size: var(--t-body-xs-s); font-weight: 600; }
.fi-artthumbs { display: flex; flex-wrap: wrap; gap: var(--sp-25); align-items: flex-end; }
.fi-artmeta { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); }
.fi-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-15); border-radius: var(--r-xs); background: var(--bg-raised); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-secondary); }
.fi-platefig { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fi-platefig figcaption { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.fi-plate { display: block; position: relative; width: 112px; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-hairline); background: var(--bg-sunken); }
.fi-plate img { position: absolute; display: block; }
.fi-artchk { display: grid; place-items: center; padding: var(--sp-15); border-radius: var(--r-sm); background: repeating-conic-gradient(var(--bg-raised) 0% 25%, var(--bg-sunken) 0% 50%) 0 0 / 12px 12px; }
.fi-artchk img { display: block; border-radius: var(--r-xs); }
.fi-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
.fi-type > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-15) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); }
.fi-type b { font-weight: 600; }
.fi-type span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fi-type small { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.figma-import-alt { margin: var(--sp-2) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.figma-import-code { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.figma-import-code .fi-code { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-md-s); letter-spacing: 0.12em; color: var(--text-primary); }
.figma-import-code[hidden] { display: none; }

/* ── How closely new screens follow the references (5 October 2026, src/fidelity.js) ── */
.modal-overlay .wtf-box { width: min(880px, calc(100vw - 80px)); padding: 0; gap: 0; display: flex; flex-direction: column; }
.modal-overlay .wtf-box .modal-head { margin: 0; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-hairline); }
.wtf-body { display: flex; gap: var(--sp-6); padding: var(--sp-5); align-items: flex-start; }
.wtf-refs { display: flex; gap: var(--sp-2); flex: none; }
.wtf-refs[hidden] { display: none; }
.wtf-refs img { display: block; height: 280px; max-width: 160px; object-fit: contain; border-radius: var(--r-lg); border: 1px solid var(--border-hairline); background: var(--bg-sunken); }
.wtf-opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-25); }
.wtf-opt { display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%; padding: var(--sp-35) var(--sp-4); border: 1px solid var(--border-hairline); border-radius: var(--r-xl); background: var(--bg-raised); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.wtf-opt:hover { background: var(--surface-hover); }
.wtf-opt.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wtf-dot { flex: none; width: 16px; height: 16px; margin-top: var(--sp-05); border-radius: var(--r-full); border: 1.5px solid var(--border-strong); display: grid; place-items: center; }
.wtf-opt.on .wtf-dot { border-color: var(--brand); }
.wtf-opt.on .wtf-dot::after { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--brand); }
.wtf-txt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.wtf-txt b { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--t-title-md-s); font-weight: 600; }
.wtf-txt > span { font-size: var(--t-body-xs-s); line-height: var(--t-body-xs-lh); color: var(--text-secondary); }
.wtf-rec { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; font-weight: 400; padding: var(--sp-05) var(--sp-15); border-radius: var(--r-full); background: var(--signal-live-soft); color: var(--signal-live); }
.wtf-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-hairline); }
.wtf-status { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); }

/* Mobbin in Settings (5 October 2026) */
.st-rowsmini { display: flex; flex-direction: column; }
.st-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); }
.st-kv > :first-child { color: var(--text-muted); }
.mobbin-said { color: var(--text-secondary); }
.mobbin-wait { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; color: var(--text-secondary); }

/* ── Compare a page with the reference it follows (5 October 2026, src/compare.js) ── */
.wtc2 { position: fixed; inset: 0; z-index: 900; display: none; background: color-mix(in srgb, var(--bg-sunken) 72%, transparent); padding: var(--sp-6); }
.wtc2.open { display: flex; }
.wtc2-box { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--border-hairline); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.wtc2-head { display: flex; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-hairline); }
.wtc2-head > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.wtc2-head h2 { margin: 0; font-size: var(--t-title-lg-s); font-weight: 600; }
.wtc2-lab { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wtc2-tools { display: flex; align-items: center; gap: var(--sp-2); }
.wtc2-tools select { width: auto; max-width: 220px; }
.wtc2-seg { display: flex; gap: var(--sp-05); padding: var(--sp-05); border-radius: var(--r-md); background: var(--bg-sunken); }
.wtc2-seg button { height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-body-xs-s); cursor: pointer; }
.wtc2-seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-primary); }
.wtc2-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.wtc2-stage { min-height: 0; overflow: auto; padding: var(--sp-5); display: flex; justify-content: center; align-items: flex-start; }
.wtc2-wait { margin: var(--sp-10) 0; display: flex; gap: var(--sp-2); align-items: center; color: var(--text-muted); font-size: var(--t-body-xs-s); }
.wtc2-pair { display: flex; gap: var(--sp-7); align-items: flex-start; }
.wtc2-pair figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.wtc2-pair figcaption { font-size: var(--t-caption-s); color: var(--text-secondary); }
.wtc2-ph { position: relative; display: inline-block; }
.wtc2-ph img { display: block; height: min(640px, calc(100vh - 260px)); width: auto; border-radius: var(--r-xl); border: 1px solid var(--border-hairline); }
.wtc2-overlay .wtc2-ph img + img { position: absolute; inset: 0; }
.wtc2-overlay { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.wtc2-mix { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.wtc2-mark { position: absolute; border: 2px dashed var(--status-caution); border-radius: var(--r-sm); pointer-events: none; }
.wtc2-mark i { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--status-caution); color: var(--color-surface); font-style: normal; font-size: var(--t-caption-s); font-weight: 700; display: grid; place-items: center; }
.wtc2-side { border-left: 1px solid var(--border-hairline); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); overflow: auto; }
.wtc2-score { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-35); border-radius: var(--r-xl); border: 1px solid var(--border-hairline); }
.wtc2-score b { font-size: var(--t-display-lg-s); line-height: var(--t-display-lg-lh); font-weight: 600; font-variant-numeric: tabular-nums; }
.wtc2-score small { font-size: var(--t-caption-s); color: var(--text-muted); }
.wtc2-gap { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-25); padding: var(--sp-25) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); }
.wtc2-gap i { width: 20px; height: 20px; border-radius: var(--r-full); background: var(--status-caution-soft); color: var(--status-caution); font-style: normal; font-size: var(--t-caption-s); font-weight: 700; display: grid; place-items: center; }
.wtc2-gap b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.wtc2-gap span { display: block; color: var(--text-muted); }
.wtc2-gap code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); background: none; padding: 0; }
.wtc2-meas { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-25) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); }
.wtc2-meas b { font-weight: 600; overflow-wrap: anywhere; }
.wtc2-meas code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); background: none; padding: 0; }
.wtc2-note { margin: 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.wtc2-dock { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-hairline); }
.wtc2-status { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); }

/* Find references on Mobbin, and a flow as a source (src/mobbin.js). */
.mbn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mbn-tabs { display: flex; gap: var(--sp-1); }
.mbn-tab { height: var(--h-control); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-body-xs-s); cursor: pointer; }
.mbn-tab.on { background: var(--bg-raised); color: var(--text-primary); font-weight: 600; }
.wt-panel[data-kind="references"] .wt-panel-body, .wt-panel[data-kind="reference-flow"] .wt-panel-body { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.mbn-query { width: 100%; height: auto; min-height: calc(var(--h-input) * 1.75); box-sizing: border-box; resize: vertical; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); }
.mbn-query:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mbn-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mbn-row .btn { margin-left: auto; }
.mbn-seg button[aria-pressed="true"] { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; }
.mbn-mode, .mbn-count, .mbn-sent { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.mbn-sent, .mbn-said, .mbn-notice, .mbn-flowsaid { margin: 0; }
.mbn-said, .mbn-flowsaid { font-size: var(--t-body-xs-s); color: var(--text-secondary); line-height: 1.5; }
.mbn-notice { font-size: var(--t-body-xs-s); color: var(--status-caution); }
.mbn-results.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.mbn-results.flows { display: grid; gap: var(--sp-3); }
.mbn-tile { display: grid; gap: var(--sp-1); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); padding: var(--sp-1); cursor: pointer; background: var(--bg-surface); }
.mbn-tile img, .mbn-tile .mbn-ph { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border-radius: var(--r-md); background: var(--bg-sunken); display: block; }
.mbn-results.grid .mbn-tile img { aspect-ratio: auto; max-height: 280px; }
.mbn-tilefoot { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t-caption-s); color: var(--text-secondary); min-width: 0; }
.mbn-tilefoot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbn-tile.on, .mbn-flow.on { border-color: var(--chosen-line); background: var(--chosen-bg); }
.mbn-zoomable { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); }
.mbn-zoomable:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mbn-strip .mbn-zoomable { flex: none; }
.mbn-tilefoot { cursor: pointer; }
.mbn-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.mbn-fromsaid { width: 100%; font-size: var(--t-body-xs-s); color: var(--text-secondary); }
.mbn-chip { height: var(--h-chip); padding: 0 var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbn-chip.on { border-color: var(--chosen-line); background: var(--chosen-bg); color: var(--chosen-fg); }
.mbn-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mbn-deep { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; }
.mbn-sent.deep { color: var(--status-caution); }
.mbn-notehead { display: flex; align-items: baseline; gap: var(--sp-3); }
.mbn-view { position: fixed; inset: 0; z-index: 950; display: none; grid-template-rows: auto 1fr auto; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); background: var(--color-overlay); }
.mbn-view.open { display: grid; }
.mbn-viewbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-float); }
.mbn-viewbar b { font-size: var(--t-body-sm-s); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mbn-viewat, .mbn-viewsaid { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.mbn-viewat { margin-right: auto; }
.mbn-viewpick { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; }
.mbn-viewstage { min-height: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); }
.mbn-viewstage img, .mbn-viewstage .mbn-ph { justify-self: center; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: var(--r-lg); background: var(--bg-sunken); box-shadow: var(--shadow-float); }
.mbn-viewstage img { height: 100%; width: auto; }
.mbn-viewnav { width: var(--h-control); height: var(--h-control); border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--bg-surface); color: var(--text-primary); font: inherit; cursor: pointer; }
.mbn-viewnav:disabled { opacity: .4; cursor: default; }
.mbn-viewnav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mbn-viewsaid { margin: 0; justify-self: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--bg-surface); }
.mbn-flow { border: 1px solid var(--border-hairline); border-radius: var(--r-lg); padding: var(--sp-3); display: grid; gap: var(--sp-2); background: var(--bg-surface); }
.mbn-flowhead { display: flex; align-items: center; gap: var(--sp-2); }
.mbn-flowhead > span { flex: 1; min-width: 0; display: grid; }
.mbn-flowhead b { font-size: var(--t-body-sm-s); color: var(--text-primary); }
.mbn-flowhead small { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.mbn-strip { display: flex; gap: var(--sp-1); overflow-x: auto; }
.mbn-strip img { height: 120px; width: auto; border-radius: var(--r-sm); background: var(--bg-sunken); flex: none; }
.mbn-more { flex: none; align-self: center; padding: 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.mbn-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.mbn-tags span { padding: 0 var(--sp-2); height: var(--h-chip); display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--bg-sunken); font-size: var(--t-caption-s); color: var(--text-secondary); }
.mbn-empty { display: grid; gap: var(--sp-3); justify-items: start; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.mbn-pill { display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--sp-2); margin-right: var(--sp-1); border-radius: var(--r-pill); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-secondary); }
.mbn-pill.ok { background: var(--status-settled-soft); color: var(--status-settled); }
.mbn-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.mbn-cell { position: relative; padding: 0; border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-sunken); cursor: pointer; overflow: hidden; }
.mbn-cell img, .mbn-cell .mbn-ph { display: block; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }
.mbn-cell i { position: absolute; left: var(--sp-1); top: var(--sp-1); min-width: 18px; height: 18px; padding: 0 var(--sp-1); box-sizing: border-box; border-radius: var(--r-pill); background: var(--bg-raised); font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-secondary); display: grid; place-items: center; }
.mbn-cell.noted { border-color: var(--chosen-line); }
.mbn-cell.noted i { background: var(--chosen-bg); color: var(--chosen-fg); }
.mbn-cell.on { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mbn-cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* The note stays in view while the screens scroll under it. */
.mbn-note { position: sticky; top: calc(-1 * var(--sp-4)); z-index: 1; box-shadow: var(--shadow-float); display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg-surface); justify-items: start; }
.mbn-note textarea { width: 100%; height: auto; min-height: calc(var(--h-input) * 1.5); box-sizing: border-box; resize: vertical; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); }
.mf-mobbin { margin-top: var(--sp-2); align-self: flex-start; justify-self: start; text-align: left; }

/* A system's component restyled, a token it does not have (src/drift.js) */
.wt-drift { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg-surface); }
.wt-drift p { margin: 0; font-size: var(--t-body-xs-s); color: var(--text-secondary); line-height: 1.5; }
.wt-driftpill { justify-self: start; display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--status-caution-soft); color: var(--status-caution); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); }
.wt-driftpair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.wt-driftfig { margin: 0; display: grid; gap: var(--sp-1); }
.wt-driftframe { height: calc(var(--h-control) * 2.5); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-sunken); overflow: hidden; }
.wt-driftframe iframe { display: block; width: calc(100% / .5); height: calc(100% / .5); border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.wt-drifttok { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); white-space: nowrap; color: var(--text-primary); }
.wt-driftfig figcaption { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.wt-driftacts { justify-content: flex-end; }
.wt-driftdone { margin: var(--sp-2) 0 0; font-size: var(--t-body-xs-s); color: var(--text-secondary); }

/* A Mobbin flow: what it is for, and its plan (src/flowplan.js) */
.wff-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.wff-badge { display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-secondary); }
.wff-meta { color: var(--text-muted); }
.wff-thumbs { flex: none; display: grid; grid-template-columns: repeat(4, 56px); gap: var(--sp-1); align-content: start; }
.wff-thumbs img { width: 56px; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: var(--r-sm); border: 1px solid var(--border-hairline); background: var(--bg-sunken); display: block; }
.wff-more { display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.wfp-view { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-page); color: var(--text-primary); }
.wfp-bar { display: flex; justify-content: flex-end; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border-hairline); }
.wfp-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.wfp-stage { min-height: 0; overflow: auto; padding: var(--sp-6) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.wfp-eb, .wfp-lab { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--t-mono-2xs-ls); }
.wfp-stage h1 { margin: 0; font-size: var(--t-display-md-s); font-weight: var(--t-display-md-w); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls); }
.wfp-stl { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wfp-pill { display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--sp-2); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); flex: none; }
.wfp-pill.warn { background: var(--status-caution-soft); color: var(--status-caution); }
.wfp-pill.live { background: var(--signal-live-soft); color: var(--signal-live); }
.wfp-plan { display: grid; border: 1px solid var(--border-hairline); border-radius: var(--r-lg); overflow: hidden; }
.wfp-row { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr) minmax(0, 1.2fr) 216px 56px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-hairline); font-size: var(--t-body-xs-s); }
.wfp-row:first-child { border-top: 0; }
.wfp-row.head { background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.wfp-row.off .wfp-step, .wfp-row.off .wfp-for, .wfp-row.off .wfp-minis { opacity: .5; }
.wfp-n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.wfp-minis { display: flex; align-items: center; gap: var(--sp-05); }
.wfp-minis img { width: 22px; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: var(--r-xs); border: 1px solid var(--border-hairline); }
.wfp-minis small { margin-left: var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); color: var(--text-muted); }
.wfp-step { display: grid; gap: var(--sp-05); min-width: 0; }
#wtFlowPlan .wfp-row input.wfp-name { width: 100%; box-sizing: border-box; height: var(--h-control); padding: 0 var(--sp-2); border: 1px solid transparent; border-radius: var(--r-md); background: transparent; box-shadow: none; color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); font-weight: 600; }
#wtFlowPlan .wfp-row input.wfp-name:hover, #wtFlowPlan .wfp-row input.wfp-name:focus { border-color: var(--border-soft); background: var(--bg-sunken); }
.wfp-name:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wfp-step small { padding: 0 var(--sp-2); color: var(--text-muted); }
.wfp-for { color: var(--text-secondary); line-height: 1.45; }
.wfp-dec button[aria-pressed="true"] { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; }
.wfp-dec button[hidden] { display: none; }
.wfp-dec { justify-self: end; }
.wfp-move { display: flex; gap: var(--sp-05); }
.wfp-wait { height: 240px; border-radius: var(--r-lg); background: var(--bg-sunken); }
.wfp-side { min-height: 0; overflow: auto; padding: var(--sp-6) var(--sp-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: var(--sp-3); }
.wfp-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-surface); }
.wfp-card p { margin: 0; font-size: var(--t-body-xs-s); color: var(--text-secondary); line-height: 1.5; }
.wfp-big { font-size: var(--t-title-md-s); font-weight: 600; }
.wfp-st { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-xs-s); color: var(--text-secondary); cursor: pointer; }
.wfp-dock { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--border-hairline); background: var(--bg-surface); }
.wfp-status { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); }

/* The component controls stay compact beside the actual appearance. */
#completed .ds-story-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-block: var(--sp-4); }
#completed .ds-story-options label { display: grid; gap: var(--sp-2); }
#completed #dsStoryPreview { padding: var(--sp-6); overflow: auto; }
#completed pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#completed #dsSourceAssetPreview img { max-width: 100%; height: auto; }

/* Completed is a library with evidence alongside it and one review action. */
#completed .ds-ex-tabs { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-block:var(--sp-5); }
#completed .ds-ex-tabs [aria-pressed="true"] { background:var(--bg-raised); color:var(--text-primary); box-shadow:inset 0 calc(-1 * var(--sp-05)) var(--signal-live); }
#completed .ds-ex-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--sp-5); align-items:start; }
#completed .ds-ex-main { min-width:0; }
#completed .ds-ex-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, calc(var(--sp-16) * 3)),1fr)); gap:var(--sp-4); }
#completed .ds-ex-card { padding:var(--sp-5); background:var(--bg-surface); border-radius:var(--r-lg); overflow-wrap:anywhere; }
#completed .ds-ex-card h3 { font-size:var(--t-title-lg-s); margin-block:var(--sp-3); }
#completed .ds-ex-card p { font-size:var(--t-body-xs-s); color:var(--text-secondary); margin-block:var(--sp-3); }
#completed .ds-ex-muted { color:var(--text-muted); font-size:var(--t-body-xs-s); }
#completed .ds-ex-inspector { position:sticky; top:var(--sp-4); max-height:calc(100vh - var(--sp-16) * 3); overflow:auto; background:var(--bg-surface); border-radius:var(--r-lg); min-width:0; }
#completed .ds-ex-section { padding:var(--sp-5); border-bottom:1px solid var(--border-hairline); overflow-wrap:anywhere; }
#completed .ds-ex-section h3 { margin-block:var(--sp-3); }
#completed .ds-ex-section p { color:var(--text-secondary); font-size:var(--t-body-xs-s); }
#completed .ds-ex-facts { margin:var(--sp-3) 0; overflow-wrap:anywhere; }
#completed .ds-ex-facts > div { padding-block:var(--sp-2); border-bottom:1px solid var(--border-soft); }
#completed .ds-ex-facts dt { color:var(--text-muted); font-size:var(--t-body-xs-s); }
#completed .ds-ex-facts dd { margin:var(--sp-1) 0 0; font-size:var(--t-body-xs-s); }
#completed .ds-ex-facts ul { padding-left:var(--sp-4); }
#completed .ds-ex-search { display:grid; gap:var(--sp-2); }
#completed #dsExplorerToolbar { display:grid; gap:var(--sp-3); margin-bottom:var(--sp-4); }
#completed .ds-ex-check { display:flex; align-items:start; gap:var(--sp-2); }
#completed .ds-ex-dock { position:sticky; bottom:0; margin-top:var(--sp-6); z-index:2; }
#completed .ds-ex-dock .wt-dock-status { white-space:normal; }
#completed .ds-story-controls { margin:0; padding:var(--sp-4); }
#completed .ds-story-controls select { max-width:100%; }
#completed #dsStoryPreview { max-width:100%; border-radius:var(--r-md); margin-block:var(--sp-3); }
#completed .ds-story-fit { width:max-content; }
#completed #dsExplorerLegacy { margin-top:var(--sp-5); }
#completed .ds-ex-layout:has(> aside[hidden]) { grid-template-columns:minmax(0,1fr); }
#completed .ds-ex-thumbnail { height:calc(var(--sp-16) * 2); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--r-md); margin-bottom:var(--sp-4); padding:var(--sp-2); }
#completed .ds-ex-thumbnail-content { width:max-content; max-width:none; flex-shrink:0; }
#completed #dsExplorerClose { margin:var(--sp-3); }
#completed .ds-ex-summary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); padding:0; }
#completed .ds-ex-summary h2 { width:100%; margin:0; font-size:var(--t-display-md-s); }
#completed .ds-ex-summary > p { margin:0; font-size:var(--t-body-xs-s); color:var(--text-secondary); }
#completed .ds-ex-summary > p:nth-of-type(2) { width:100%; }
#completed .ds-ex-summary details { width:100%; }
#completed .ds-ex-tabs { margin-block:var(--sp-4); }
#completed #dsExplorerToolbar { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
#completed #dsExplorerToolbar > p { margin:0; font-size:var(--t-body-xs-s); }
#completed #dsExplorerToolbar > div { grid-column:2; grid-row:1; }
#completed .ds-ex-search { font-size:var(--t-body-xs-s); }
#completed .ds-ex-search input { width:100%; }
#completed .ds-ex-inspector { max-height:55vh; }
#completed .ds-ex-section h4 { margin:0 0 var(--sp-2); font-size:var(--t-title-sm-s); }
#completed .ds-ex-section p { margin-block:var(--sp-3); }
#completed .ds-story-controls > label { display:block; margin-block:var(--sp-2); font-size:var(--t-body-xs-s); }
#completed .ds-story-controls > select { width:100%; }
#completed .ds-story-controls p { margin-block:var(--sp-3); font-size:var(--t-body-xs-s); }
#completed .ds-ex-dock { box-shadow:none; border:0; font:var(--t-mono-sm-w) var(--t-mono-sm-s)/var(--t-mono-sm-lh) var(--font-mono); }
#completed .ds-evidence-figure { margin:var(--sp-3) 0; }
#completed .ds-evidence-viewport { max-height:32vh; overflow:auto; background:var(--bg-sunken); border-radius:var(--r-md); }
#completed .ds-evidence-image { position:relative; }
#completed .ds-evidence-image img { display:block; width:100%; height:auto; }
#completed .ds-evidence-region { position:absolute; box-sizing:border-box; border:var(--sp-05) solid var(--signal-live); pointer-events:none; }
#completed .ds-evidence-figure figcaption { margin-top:var(--sp-2); font-size:var(--t-body-xs-s); color:var(--text-muted); }

/* Simple creation keeps the shared source controls on one page. */
.app.ds-simple-home { grid-template-columns: minmax(0, 1fr); }
.app.ds-simple-home > .sidebar { display: none; }
.app.ds-simple-home > main { grid-column: 1 / -1; }
.ds-simple-home #overview > .overview-layout { display: none; }
#dsSimple { display: grid; gap: var(--sp-6); padding-bottom: var(--sp-16); }
#dsSimple[hidden], #dsSimpleDock[hidden] { display: none; }
#dsSimple h2 { font-family: var(--font-sans); font-size: var(--t-title-lg-s); font-weight: var(--t-title-lg-w); margin-bottom: var(--sp-3); }
#dsSimple p { color: var(--text-secondary); margin-bottom: var(--sp-4); }
#dsSimple .ingest-go { display: none; }
#dsSimpleMaterial { display: grid; gap: var(--sp-4); }
.ds-simple-actions, #dsSimpleExceptions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
#dsSimpleDock { position: absolute; bottom: 0; inset-inline: 0; z-index: 5; background: var(--bg-surface); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-7); }
#dsSimpleStatus { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); }
.ds-simple-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ds-simple-swatches span { display: flex; align-items: center; gap: var(--sp-2); }
.ds-simple-swatches i { display: inline-block; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-sm); }

.ds-simple-examples { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); margin-top: var(--sp-4); }
.ds-simple-examples figure { min-width: 0; margin: 0; overflow: hidden; }
.ds-simple-examples figcaption { margin-top: var(--sp-2); font-size: var(--t-caption-s); }
.ds-simple-art { min-width: 0; overflow: hidden; padding: var(--sp-2); }
.ds-simple-home #kpiRow { display: none !important; }

.ds-simple-home .hero-undo { display: none; }
.app:has(#dsSimpleDock:not([hidden])) #dsExplorerStatus { padding-bottom: var(--sp-12); }
.ds-ex-dock[hidden] { display: none; }
#dsSimple { grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--ds-simple-column)),1fr)); align-items: start; }
#dsSimple > section:last-child { grid-column: 1 / -1; }
#dsSimple .ai-panel { border: none; background: var(--bg-surface); }
#dsSimple .brand-drop-zone { padding: var(--sp-6); }

#dsAdvancedAreas { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
#dsAdvancedAreas[hidden], .ds-simple-mode #importApproveBar { display: none !important; }

#dsSimplePlugin[hidden], #dsDoneEditing[hidden], #dsCreationMode[hidden] { display: none; }
.app.ds-storybook-view { grid-template-columns: minmax(0,1fr); }
.app.ds-storybook-view > .sidebar, .ds-storybook-view .hero-undo, .ds-storybook-view #kpiRow { display: none !important; }
.app.ds-storybook-view > main { grid-column: 1 / -1; }
.ds-storybook-view #dsCompletedBody { padding-bottom: var(--sp-16); }
.ds-storybook-view .ds-ex-summary > details, .ds-storybook-view #dsCompleteRelease,
.ds-storybook-view [data-sync-source], .ds-storybook-view [data-sync-local],
.ds-storybook-view [data-sync-style], .ds-storybook-view [data-sync-keep-style],
.ds-storybook-view #dsReviewConflicts, .ds-storybook-view #dsCompareReference,
.ds-storybook-view .ds-ex-check, .ds-storybook-view [data-ds-resolve] { display: none; }

.ds-storybook-view #importApproveBar { display: none !important; }

/* Storybook: a navigable library beside a generous component canvas. */
/* The workspace says its counts under the name (Set A). */
.ds-storybook-view #completed { padding-top: var(--sp-2); }
.ds-storybook-view #completed .ds-ex-tabs { margin-top: 0; margin-bottom: var(--sp-5); }
#completed .ds-book { display:grid; grid-template-columns: minmax(0, var(--ds-book-rail)) minmax(0,1fr); gap:var(--sp-8); align-items:start; }
.ds-book-nav { position:sticky; top:var(--sp-2); max-height:calc(100vh - var(--ds-book-chrome)); overflow:auto; padding-right:var(--sp-3); }
.ds-book-search { display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); color:var(--text-secondary); font-size:var(--t-label-sm-s); }
.ds-book-search input { grid-column:1/-1; }
#dsBookTree { margin-top:var(--sp-5); }
#dsBookTree h3 { font-family:var(--font-mono); font-size:var(--t-mono-sm-s); font-weight:var(--t-mono-sm-w); color:var(--text-muted); margin:var(--sp-5) var(--sp-2) var(--sp-2); text-transform:uppercase; }
.ds-book-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); background:transparent; color:var(--text-secondary); border:0; border-radius:var(--r-md); padding:var(--sp-3); text-align:left; cursor:pointer; font-family:var(--font-sans); font-size:var(--t-body-md-s); }
.ds-book-item:hover { background:var(--bg-surface); }
.ds-book-item[aria-current="true"] { background:var(--bg-raised); color:var(--text-primary); font-weight:600; }
.ds-book-item small { color:var(--text-muted); font-size:var(--t-caption-s); }
.ds-book-page { min-width:0; }
.ds-book-heading { display:flex; justify-content:space-between; align-items:start; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.ds-book-heading h2 { font-size:var(--t-display-xl-s); font-weight:600; margin-block:var(--sp-2) var(--sp-3); }
.ds-book-heading p { max-width:var(--ds-book-measure); color:var(--text-secondary); font-size:var(--t-body-md-s); }
.ds-book-origin { flex-shrink:0; padding:var(--sp-2) var(--sp-3); background:var(--bg-surface); border-radius:var(--r-md); color:var(--text-secondary); font-size:var(--t-caption-s); }
#completed .ds-book .ds-story-controls { padding:0; background:transparent; }
.ds-book-canvasbar { display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); color:var(--text-muted); font-size:var(--t-caption-s); background:var(--bg-surface); border-radius:var(--r-lg) var(--r-lg) 0 0; }
#completed .ds-book #dsStoryPreview { display:flex; align-items:center; justify-content:center; min-height:var(--ds-book-stage); margin:0 0 var(--sp-6); border-radius:0 0 var(--r-lg) var(--r-lg); padding:var(--sp-8); }
#completed .ds-book .ds-story-options { grid-template-columns:repeat(auto-fit,minmax(var(--ds-book-control),1fr)); padding:var(--sp-4); background:var(--bg-surface); border-radius:var(--r-lg); }
#completed .ds-book #dsStoryComponent[hidden], #completed .ds-book label[hidden] { display:none !important; }
.ds-book .ds-story-controls > p { color:var(--text-secondary); margin-block:var(--sp-4); }
.ds-book .ds-story-controls > details { margin-top:var(--sp-6); padding:var(--sp-4); background:var(--bg-surface); border-radius:var(--r-lg); }

/* Visual reference chapters share a reading rhythm and restrained tool chrome. */
.ds-storybook-view #dsCompletedBody { padding-top:var(--sp-2); }
.ds-book-intro { margin-bottom:var(--sp-7); max-width:var(--ds-book-measure); }
.ds-book-intro h2 { font-size:var(--t-display-xl-s); margin:var(--sp-2) 0 var(--sp-3); }
.ds-book-intro p, .ds-book-record p { color:var(--text-secondary); }
.ds-book-section { margin-block:var(--sp-8); }
.ds-book-section h3 { margin-bottom:var(--sp-4); }
.ds-book-specimens { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--ds-book-rail)),1fr)); gap:var(--sp-4); }
.ds-book-specimen { margin:0; min-width:0; background:var(--bg-surface); border-radius:var(--r-lg); overflow:hidden; }
.ds-book-sample { height:var(--ds-book-control); display:flex; align-items:center; justify-content:center; padding:var(--sp-5); overflow:hidden; background:var(--bg-raised); font-size:var(--t-display-xl-s); }
.ds-book-sample i { display:block; width:var(--sp-12); height:var(--sp-12); background:var(--text-secondary); max-width:100%; }
.ds-book-specimen figcaption { padding:var(--sp-4); display:grid; gap:var(--sp-2); overflow-wrap:anywhere; }
.ds-book-specimen code { color:var(--text-secondary); font-size:var(--t-mono-sm-s); }
.ds-book-stats { display:flex; flex-wrap:wrap; gap:var(--sp-8); padding:var(--sp-5); background:var(--bg-surface); border-radius:var(--r-lg); }
.ds-book-stats strong { display:block; font-size:var(--t-display-lg-s); margin-bottom:var(--sp-2); }
.ds-book-guidance { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ds-simple-column)),1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.ds-book-record { padding:var(--sp-5); border-radius:var(--r-lg); background:var(--bg-surface); margin-block:var(--sp-3); overflow-wrap:anywhere; }
.ds-book-record h3 { margin:0 0 var(--sp-3); }
.ds-book-record-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3); }
.ds-book-source { margin:var(--sp-4) 0; padding:var(--sp-4); background:var(--bg-surface); border-radius:var(--r-lg); }
.ds-book-source img { max-width:100%; max-height:var(--ds-book-stage); object-fit:contain; }
.ds-book-source figcaption { padding-top:var(--sp-3); }
.ds-book-pagination { display:flex; gap:var(--sp-3); }
.ds-book-variant-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ds-book-rail)),1fr)); gap:var(--sp-4); margin-top:var(--sp-4); }
.ds-book-variant { display:grid; gap:var(--sp-3); padding:var(--sp-3); border:0; border-radius:var(--r-md); background:var(--bg-surface); color:var(--text-primary); text-align:left; cursor:pointer; }
.ds-book-variant > span { overflow-wrap:anywhere; font-size:var(--t-caption-s); }
.ds-book-variants summary { cursor:pointer; display:flex; justify-content:space-between; }
.ds-book-variants summary span { color:var(--text-secondary); }
#completed .ds-book #dsStoryPreview { min-height:var(--ds-book-preview); }
.ds-book-guidance { align-items:start; }
.ds-book-missing { padding:var(--sp-4); background:var(--bg-surface); border-radius:var(--r-md); color:var(--text-secondary); margin-bottom:var(--sp-5); }
.ds-book-records > .ds-book-record { max-width:var(--ds-book-measure); }
#completed .ds-book #dsStoryVariant[hidden] { display:none !important; }
.ds-storybook-view [data-knowledge-resolve] { display:none; }
.ds-book-artwork { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ds-book-rail)),1fr)); gap:var(--sp-4); }
.ds-book-artwork figure { margin:0; padding:var(--sp-3); background:var(--bg-raised); border-radius:var(--r-md); min-width:0; overflow-wrap:anywhere; }
.ds-book-artwork img { max-width:100%; height:var(--ds-book-control); object-fit:contain; }
.ds-book-artwork figcaption { font-size:var(--t-caption-s); margin-bottom:var(--sp-3); }
.ds-book-records { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ds-simple-column)),1fr)); gap:var(--sp-4); align-items:start; }
.ds-book-records > p, .ds-book-records > .ds-book-pagination { grid-column:1/-1; }
.ds-book-guidance .ds-book-specimens { grid-template-columns:repeat(auto-fit,minmax(var(--ds-book-control),1fr)); }
.ds-book-guidance .ds-book-section { margin:0; }
#dsExplorerToolbar.ds-book-source-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); }
#dsExplorerToolbar.ds-book-source-toolbar p { flex:1; margin:0; }
#dsExplorerToolbar.ds-book-source-toolbar button { width:auto; }

#figmaLogoCandidates .ds-book-artwork { grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--ds-book-rail)),1fr)); }
#figmaLogoCandidates figure { display:flex; flex-direction:column; gap:var(--sp-2); }
#figmaLogoCandidates img { width:100%; }

/* Saved drafts use the existing detail-panel anatomy. */
.wt-panel[data-kind="design-recovery"] .wt-panel-body { padding: var(--sp-4) var(--sp-5); }
.wt-panel[data-kind="design-recovery"] details { margin-block: var(--sp-4); padding: var(--sp-4); background: var(--bg-surface); border-radius: var(--r-md); }
.wt-panel[data-kind="design-recovery"] label { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); }
.wt-panel[data-kind="design-recovery"] input { width: 100%; }
.wt-panel[data-kind="design-recovery"] p { margin-block: var(--sp-3); }

/* ══ The lists, Set A (11 October 2026) ══════════════════════════════
   The name with one count beside it; the filter (only with two kinds),
   the search, the sort and ⋯ at the right; Now above the grid; New in
   the dock. No rule under the head: layers, not lines. */
#dashboard.open { display: flex; flex-direction: column; }
#dashboard > .wf-shell { flex: 1; min-height: 0; height: auto; }
#dashboard .proj-dock { flex: none; }
#dashboard .proj-dock .wr-cost { white-space: normal; }
#dashboard .wf-heading { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
#dashboard .wf-heading .wf-sub { flex-basis: 100%; }
#dashboard .wf-sub:has(span:empty + span:empty) { display: none; }
#dashboard .wf-count {
  height: 24px; display: inline-flex; align-items: center; padding: 0 var(--sp-2); border-radius: var(--r-xs);
  background: var(--bg-surface); font-size: var(--t-body-xs-s); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
#dashboard .wf-count[hidden] { display: none; }
#dashboard .wf-head { align-items: center; }
#dashboard .wf-tools .proj-tabs { padding: 0; border: 0; }
#dashboard .wf-tools .proj-tabs[hidden] { display: none; }
#dashboard .wf-icon {
  width: var(--h-control-lg); height: var(--h-control-lg); flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--t-body-md-s);
}
#dashboard .wf-icon:hover { background: var(--bg-surface); color: var(--text-primary); }
#dashboard .wf-icon[hidden] { display: none; }
#dashboard .wf-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#dashboard .proj-now { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
#dashboard .proj-now[hidden], #dashboard .proj-all[hidden] { display: none; }
#dashboard .proj-now .wt-eyebrow, #dashboard .proj-all { margin: 0 0 var(--sp-05); }
#dashboard .proj-all { margin-bottom: var(--sp-2); }
#dashboard .proj-nowrow {
  min-height: 56px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); text-align: left;
  border: 0; border-radius: var(--r-xl); background: var(--bg-surface); color: var(--text-primary); font: inherit; cursor: pointer;
}
#dashboard .proj-nowrow:hover { background: var(--bg-raised, var(--bg-surface)); }
#dashboard .proj-nowrow .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--signal-live); }
#dashboard .proj-nowrow.caution .dot { background: var(--status-caution); }
#dashboard .proj-nowrow .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
#dashboard .proj-nowrow .what b { font-size: var(--t-body-sm-s); font-weight: 600; }
#dashboard .proj-nowrow .what small { font-size: var(--t-body-xs-s); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard .proj-nowrow .go { font-size: var(--t-body-sm-s); color: var(--signal-live); }
.wt-card.grid .pmeta { display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: left; gap: var(--sp-1); min-height: 84px; }
.wt-card .pstate.caution { background: var(--status-caution-soft, var(--bg-sunken)); border-color: var(--status-caution-line, var(--border-hairline)); color: var(--status-caution); }

/* ══ The plan, Set A (11 October 2026) ═══════════════════════════════
   The check a line once the plan has run; the empty phases a row of Add
   links above the board; a card that says what it gave, with its moves
   in a ⋯ that shows on hover. */
.wb-checkline {
  margin: 0 var(--sp-7) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--t-body-sm-s); line-height: 1.45; color: var(--text-secondary);
}
.wb-checkline.gaps { color: var(--text-primary); }
.wb-checkline .wt-caution { color: var(--status-caution); flex: none; }
.wb-checkline .wt-link { margin-left: var(--sp-1); }
.wb-addrow { margin: 0 var(--sp-7) var(--sp-4); display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.wb-addrow .wt-link { margin-left: 0; font-size: var(--t-body-sm-s); color: var(--text-muted); text-decoration: none; }
.wb-addrow .wt-link:hover { color: var(--text-primary); }
.wb-board { --wb-cols: 6; }            /* how many phases hold steps; the board sets it */
.wb-board:not(.empty) { grid-template-columns: repeat(var(--wb-cols), minmax(160px, 1fr)); }
.mcirc-gave { font-size: var(--t-caption-s); line-height: 1.4; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcirc-more {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: 24px; height: 24px; border: 0; border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--text-secondary); font: inherit; cursor: pointer; opacity: 0; transition: opacity var(--dur-state) var(--ease-out);
}
.mcirc:hover .mcirc-more, .mcirc:focus-within .mcirc-more, .mcirc-more[aria-expanded="true"] { opacity: 1; }
.mcirc-more:hover { color: var(--text-primary); }

/* ══ A step's set-up, Set A (11 October 2026) ══ */
.wt-carryline { display: flex; flex-direction: column; gap: var(--sp-1); }
.wt-carryline .wr-ds { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wt-carryline .wr-ds.none { color: var(--text-secondary); }
.wt-carryline .wr-dspick { margin-left: var(--sp-1); }
.wt-lgives { margin: 0; font-size: var(--t-body-sm-s); line-height: 1.5; color: var(--text-primary); }

/* ══ A step's Output, Set A (11 October 2026) ══
   The chosen pages large; the ones not chosen one row, a press away;
   documents as rows by title. */
.wt-outgrid.pages.chosen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wt-outsect.notchosen { margin-top: var(--sp-2); }
.wt-notchosen {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-xl); background: var(--bg-surface); color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer;
}
.wt-notchosen .say { flex: 1; min-width: 0; font-size: var(--t-body-sm-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-notchosen .wt-link { margin-left: 0; }
.wt-outsect.notchosen .wt-outgrid { margin-top: var(--sp-3); }
.wt-docrows { display: flex; flex-direction: column; }
.wt-docrow { min-height: 48px; display: flex; align-items: center; gap: var(--sp-3); border-bottom: 1px solid var(--border-hairline); position: relative; }
.wt-docrow .ic { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.wt-docrow .ic svg { width: 16px; height: 16px; }
.wt-docrow .nm { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-body-sm-s); color: var(--text-primary); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-docrow .nm:hover { text-decoration: underline; text-underline-offset: 3px; }
.wt-docrow .kind { font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-docrow .wt-link { margin-left: 0; }
.wt-docrow .wt-outmore { position: static; opacity: 1; }

/* ══ Outputs, Set A (11 October 2026) ══
   The design first, large; a phase's documents as a table of rows. */
.wt-design { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.wt-made .wr-outcards.wt-designgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.wt-designproto { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); display: flex; align-items: center; gap: var(--sp-2); }
.wt-designproto b { color: var(--text-primary); font-weight: 600; }
.wt-designproto .wt-link { margin-left: var(--sp-1); }
.wt-doctable { display: flex; flex-direction: column; }
.wt-doctable .wt-docrow { display: grid; grid-template-columns: 16px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 64px; }
.wt-doctable .from, .wt-doctable .dec { font-size: var(--t-caption-s); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-doctable .day { font-size: var(--t-caption-s); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.wt-designgrid .wt-madecard { width: auto; }
.wt-made .wt-designgrid .wt-madebed { height: 220px; }

/* ══ What a fix step came to, Set A (11 October 2026) ══ */
.wt-outcome { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.wt-outcome-strip { display: flex; gap: var(--sp-6); }
.wt-outcome-strip span { font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wt-outcome-strip b { font-size: var(--t-display-md-s); font-weight: 600; color: var(--text-primary); margin-right: var(--sp-1); font-variant-numeric: tabular-nums; }
.wt-outcome-strip .good b { color: var(--status-settled); }
.wt-outcome-strip .warn b { color: var(--status-caution); }
.wt-outcome-table { display: flex; flex-direction: column; }
.wt-outcome-row { display: grid; grid-template-columns: 28px minmax(0, 3fr) minmax(0, 1fr) 96px minmax(0, 2fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.wt-outcome-row.head { padding: var(--sp-2) 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wt-outcome-row .n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wt-outcome-row .t { color: var(--text-primary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wt-outcome-row .pg, .wt-outcome-row .why { color: var(--text-secondary); }
.wt-outcome-row .wt-statpill { font-style: normal; }
.wt-doctable button.dec { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-caption-s); text-align: left; cursor: pointer; color: var(--text-secondary); }
.wt-doctable button.dec:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ══ A new design system, Set A (11 October 2026) ══
   Three sources; a website is the brand panel with only its address. */
.ds-simple-mode #ingestPicker [data-ingest="scratch"] { display: none; }
.app:not(.ds-simple-mode) #ingestPicker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#brandExtractCard.ingest-website .brand-drop-zone, #brandExtractCard.ingest-website .brand-extract-footer .ingest-go { display: none; }
#brandExtractCard.ingest-website .brand-site-row { margin-top: 0; }
.ds-simple-use { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.ds-simple-built { margin: var(--sp-4) 0 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-simple-built .wt-link { margin-left: var(--sp-2); }
.ds-simple-cap { margin: var(--sp-2) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
#dsSimple .ds-simple-actions .wt-link { margin-left: 0; align-self: center; }
#dsSimpleCreate.muted { opacity: .55; }
.ds-simple-mode #brandExtractCard:not(.ingest-website) .brand-site-row { display: none; }

/* ══ A design system's workspace, Set A (11 October 2026) ══
   Overview: readiness and the look at the left, who uses it, its sources
   and its releases at the right. Foundations: colour as a table of
   roles. Before you publish: the checks and what ships. */
.ds-ws-host .ds-ws-edit { align-self: flex-end; margin: 0 0 var(--sp-3) auto; display: block; }
.ds-ws { display: flex; flex-direction: column; gap: var(--sp-5); }
.ds-ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; }
.ds-ws-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.ds-ws-card { background: var(--bg-surface); border-radius: var(--r-2xl); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-ws-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.ds-ws-card > header h3 { margin: 0; font-size: var(--t-title-md-s); font-weight: 600; color: var(--text-primary); }
.ds-ws-card > header span { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-card > footer { display: flex; justify-content: flex-start; padding-top: var(--sp-2); }
.ds-ws-checks { display: flex; flex-direction: column; }
.ds-ws-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 64px; gap: var(--sp-3); align-items: center; min-height: 40px; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.ds-ws-check:last-child { border-bottom: 0; }
.ds-ws-check i { font-style: normal; font-weight: 700; text-align: center; color: var(--text-muted); }
.ds-ws-check.pass i { color: var(--status-settled); }
.ds-ws-check.fail i { color: var(--status-caution); }
.ds-ws-check b { font-weight: 400; color: var(--text-primary); }
.ds-ws-check > span { color: var(--text-secondary); font-size: var(--t-caption-s); }
.ds-ws-check .wt-link { margin-left: 0; justify-self: end; }
.ds-ws-before { margin-left: 0; align-self: flex-start; }
.ds-ws-look { border-radius: var(--r-xl); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.ds-ws-swatches { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ds-ws-swatches span { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.ds-ws-swatches i { width: 40px; height: 40px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-swatches small { font-size: var(--t-caption-s); opacity: .75; }
.ds-ws-type { display: flex; align-items: baseline; gap: var(--sp-4); }
.ds-ws-type > b { font-size: var(--t-display-xl-s); line-height: 1; }
.ds-ws-type span { font-size: var(--t-body-sm-s); opacity: .8; }
.ds-ws-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.ds-ws-samples figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-ws-samples .ds-ex-thumbnail { height: 72px; border-radius: var(--r-md); overflow: hidden; }
.ds-ws-samples figcaption { font-size: var(--t-caption-s); opacity: .75; }
.ds-ws-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.ds-ws-side section { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.ds-ws-side h4 { margin: 0; }
.ds-ws-side .wt-link { margin-left: 0; }
.ds-ws-row { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-body-sm-s); color: var(--text-primary); cursor: pointer; text-align: left; }
.ds-ws-row:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-ws-none { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-title { margin: 0; font-size: var(--t-display-md-s); font-weight: 600; color: var(--text-primary); }
.ds-ws-table { display: flex; flex-direction: column; }
.ds-ws-tr { display: grid; grid-template-columns: 120px 150px 150px minmax(0, 1fr) 120px; gap: var(--sp-3); align-items: center; min-height: 48px; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-tr.ships { grid-template-columns: minmax(0, 1fr) 140px 100px; }
.ds-ws-tr.head { min-height: 32px; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.ds-ws-tr b { font-weight: 400; color: var(--text-primary); }
.ds-ws-tr .ok { color: var(--status-settled); }
.ds-ws-tr .low { color: var(--status-caution); }
.ds-ws-tr .wt-statpill { font-style: normal; }
.ds-ws-val { display: flex; align-items: center; gap: var(--sp-2); }
.ds-ws-val code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-secondary); }
.ds-ws-sw { width: 28px; height: 28px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-sw i { width: 18px; height: 18px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-blocks { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-blocks .wt-link { margin-left: var(--sp-1); }
.ds-ws-rest { display: flex; flex-direction: column; gap: var(--sp-5); }
/* (the old tab row is hidden by src/ds-workspace.js) */
#dsSimpleDock #dsWsSecond { margin-left: auto; }
#dsSimpleDock #dsWsSecond[hidden] { display: none; }
.ds-ws-host #dsExplorerToolbar:empty { display: none; }
.ds-ws-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-3) 0; }
.ds-ws-exc { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t-caption-s); color: var(--status-caution); }
.ds-ws-exc i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-ws-exc.look { color: var(--text-muted); }
#dsBookTree h3 span { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--status-settled); margin-left: var(--sp-1); }
.ds-book-heading .wt-statpill { font-style: normal; align-self: flex-start; }
.ds-ws-finds { margin-top: var(--sp-5); }
.ds-ws-finds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-ws-finds li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-finds li:last-child { border-bottom: 0; }
.ds-ws-finds .wt-link { margin-left: 0; flex: none; }

/* ── Set A gaps (11 October 2026): the variant by state matrix, the
   properties column, colour edited in place, ramps, Used on, before and
   after on a fix, a direction's second screen, one section edited. ── */
.ds-ws-matrix { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ds-ws-matrix > header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ds-ws-matrix > header h3 { margin: 0 auto 0 0; font-size: var(--t-title-md-s); font-weight: 600; color: var(--text-primary); }
.ds-ws-matrix > footer { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-seg { display: inline-flex; padding: var(--sp-05); gap: var(--sp-05); background: var(--bg-surface); border-radius: var(--r-md); }
.ds-ws-seg button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; }
.ds-ws-seg button.on { background: var(--bg-raised); color: var(--text-primary); }
.ds-ws-grid-m { --ds-ws-cols: 4; border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); overflow-x: auto; }
.ds-ws-mrow { display: grid; grid-template-columns: 96px repeat(var(--ds-ws-cols, 4), minmax(120px, 1fr)); gap: var(--sp-2); align-items: center; }
.ds-ws-mrow.head span, .ds-ws-mrow [role="rowheader"] { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; opacity: .7; }
.ds-ws-cell { height: 88px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-md); }
.ds-ws-cell.none { opacity: .4; }
.ds-ws-cellart { max-width: 100%; }
#completed .ds-book.has-props { grid-template-columns: minmax(0, var(--ds-book-rail)) minmax(0, 1fr) 260px; }
.ds-ws-props { position: sticky; top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; font-size: var(--t-body-sm-s); }
.ds-ws-props section { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.ds-ws-props h4 { margin: 0; }
.ds-ws-props dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.ds-ws-props dt { color: var(--text-muted); }
.ds-ws-props dd { margin: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ds-ws-props ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-ws-props li { display: grid; grid-template-columns: 20px auto 1fr; gap: var(--sp-2); align-items: center; color: var(--text-secondary); }
.ds-ws-props code { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); justify-self: end; }
.ds-ws-props .wt-link { margin-left: 0; }
.ds-ws-chip { width: 20px; height: 20px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-swbtn { display: inline-flex; align-items: center; gap: var(--sp-2); border: 0; background: transparent; padding: var(--sp-05); margin: calc(-1 * var(--sp-05)); border-radius: var(--r-md); cursor: pointer; font: inherit; }
.ds-ws-swbtn:hover, .ds-ws-swbtn:focus-visible { background: var(--bg-raised); }
.ds-ws-swbtn code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-primary); }
.ds-ws-pop { position: fixed; z-index: var(--z-menu); width: 280px; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-raised); color: var(--text-primary); border-radius: var(--r-xl); box-shadow: var(--shadow-menu); font-size: var(--t-body-sm-s); }
.ds-ws-pop > header { display: flex; justify-content: space-between; align-items: baseline; }
.ds-ws-pop > header b { font-weight: 600; }
.ds-ws-pop > header span { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-pop .wt-eyebrow { margin: 0; }
.ds-ws-hexrow { display: flex; gap: var(--sp-2); align-items: center; }
.ds-ws-hexrow input[type="color"] { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; }
.ds-ws-hexrow input[type="text"] { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono-sm-s); }
.ds-ws-ramp { display: grid; grid-template-columns: repeat(11, 1fr); gap: var(--sp-05); }
.ds-ws-ramp button { height: 22px; border: 0; border-radius: var(--r-sm); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-ramp button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.ds-ws-readout { margin: 0; color: var(--status-settled); font-size: var(--t-caption-s); }
.ds-ws-readout.low { color: var(--status-caution); }
.ds-ws-pop > footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-pop > footer .wt-link { margin-left: 0; }
.ds-ws-ramps { gap: var(--sp-2); }
.ds-ws-ramprow { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); align-items: center; font-size: var(--t-body-sm-s); }
.ds-ws-ramprow b { font-weight: 400; color: var(--text-secondary); }
.ds-ws-ramprow span { display: grid; grid-template-columns: repeat(11, 1fr); gap: var(--sp-05); }
.ds-ws-ramprow i { height: 24px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border-hairline); }
#completed .ds-ws-tr.ships { grid-template-columns: minmax(0, 1fr) 140px 90px minmax(0, 1.4fr); }
.ds-ws-usedon { color: var(--text-secondary); font-size: var(--t-caption-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-outcome-table.shots .wt-outcome-row { grid-template-columns: 28px minmax(0, 3fr) minmax(0, 1fr) 96px minmax(0, 2fr) 140px; }
.wt-outcome-row .ba { display: flex; gap: var(--sp-1); }
.wt-outcome-row .ba img { width: 64px; height: 40px; object-fit: cover; object-position: top; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border-hairline); background: var(--bg-sunken); }
.wt-gpick-also { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); background: var(--bg-sunken); padding: 0 var(--sp-4) var(--sp-3); }
.wt-gpick-also .wt-device { transform-origin: top center; }
.wt-gpick-also small { font-size: var(--t-caption-s); color: var(--text-muted); }
.app.ds-ws-editing #dsHead + * { padding-bottom: var(--sp-12); }

/* ── Set B (11 October 2026): the project is its timeline. The project
   and where it stands at the top, each step saying what it gave, the
   plan edited in place (+ under a row, a step's ⋯, the plan's holes as
   a caution), and the tabs over the centre. ── */
.wfs-project { height: auto; flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: var(--sp-25); }
.wfs-project b { font-size: var(--t-title-sm-s); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfs-project #wfSideDone { font-size: var(--t-caption-s); color: var(--text-muted); }
.wfs-project .wfs-bar { margin-top: var(--sp-1); }
.wfs-progress[hidden] { display: none; }
.wfs-steps .wsr-row { position: relative; display: flex; align-items: center; flex: none; }
.wfs-steps .wsr-row .wsr-chip { flex: 1; min-width: 0; }
.wfs-steps .wsr-chip .wsr-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wfs-steps .wsr-m { flex: none; font-size: var(--t-caption-s); font-weight: 400; color: var(--text-muted); }
.wfs-steps .wsr-chip.current .wsr-m, .wfs-steps .wsr-chip.running .wsr-m { color: var(--signal-live); }
.wfs-steps .wsr-chip.stopped .wsr-m { color: var(--status-caution); }
.wsr-more { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: var(--bg-raised); color: var(--text-secondary); font: inherit; cursor: pointer; opacity: 0; }
.wsr-row:hover .wsr-more, .wsr-more:focus-visible, .wsr-more[aria-expanded="true"] { opacity: 1; }
.wsr-row.edit:hover .wsr-m { visibility: hidden; }
.wsr-ins { position: absolute; left: var(--sp-25); bottom: calc(-1 * var(--sp-2)); z-index: 1; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--signal-live); color: var(--text-inverse); font: inherit; font-size: var(--t-caption-s); line-height: 1; cursor: pointer; opacity: 0; }
.wsr-row:hover .wsr-ins, .wsr-ins:focus-visible { opacity: 1; }
.wsr-addend { flex: none; height: var(--h-row); margin-top: var(--sp-2); padding: 0 var(--sp-25); border: 0; border-radius: var(--r-lg); background: none; color: var(--text-muted); font: inherit; font-size: var(--t-body-sm-s); text-align: left; cursor: pointer; }
.wsr-addend:hover { background: var(--tint-3); color: var(--text-primary); }
.wsr-caution { flex: none; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-2) var(--sp-25); border-radius: var(--r-lg); background: var(--tint-2); font-size: var(--t-caption-s); color: var(--text-secondary); }
.wsr-caution .wt-caution { color: var(--status-caution); margin-top: 2px; }
.wsr-caution > span:not(.wsr-cacts) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.wsr-cacts { grid-column: 2; display: flex; gap: var(--sp-3); }
.wsr-cacts .wt-link { margin-left: 0; font-size: var(--t-caption-s); }
.wf.with-side > #wfProjTabs { grid-column: 2; grid-row: 1; }
.wf-tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); height: 44px; padding: 0 var(--sp-7); border-bottom: 1px solid var(--border-hairline); background: var(--bg); }
.wf-tabs[hidden] { display: none; }
.wf-tabrow { display: flex; gap: var(--sp-5); height: 100%; }
.wf-tab { border: 0; background: none; padding: 0 var(--sp-1); height: 100%; color: var(--text-muted); font: inherit; font-size: var(--t-body-sm-s); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.wf-tab:hover:not(:disabled) { color: var(--text-primary); }
.wf-tab.on { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--signal-live); }
.wf-tab:disabled { opacity: .4; cursor: default; }
.wf-tabmore { align-self: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
.wf-tabmore:hover { background: var(--tint-3); color: var(--text-primary); }
.wt-doctable .wt-docrow, .wt-doctable .wt-dochead { display: grid; grid-template-columns: 16px minmax(0, 2fr) 84px minmax(0, 1fr) minmax(0, 1.4fr) 96px 64px; gap: var(--sp-3); align-items: center; }
.wt-dochead { min-height: 32px; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wt-dochead span:last-child { text-align: right; }
.wt-doctable .kd { font-size: var(--t-caption-s); color: var(--text-secondary); }
.wt-doctable .st .wt-statpill { font-style: normal; }
.wt-handoffline { margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--bg-surface); font-size: var(--t-body-sm-s); color: var(--text-secondary); display: flex; gap: var(--sp-3); }
.wt-handoffline b { color: var(--text-primary); font-weight: 600; }
.wt-handoffline.ready b { color: var(--status-settled); }
/* The review in full (Set B): the timeline folded to its marks. */
.wf.with-side.reviewing { grid-template-columns: 56px minmax(0, 1fr); }
.wf.reviewing .wf-side { padding: var(--sp-3) var(--sp-1); align-items: center; }
.wf.reviewing .wfs-project b, .wf.reviewing #wfSideDone, .wf.reviewing .wfs-steps .wsr-phase, .wf.reviewing .wsr-l, .wf.reviewing .wsr-m,
.wf.reviewing .wsr-more, .wf.reviewing .wsr-ins, .wf.reviewing .wsr-caution, .wf.reviewing .wsr-addend, .wf.reviewing .wfs-foot { display: none; }
.wf.reviewing .wfs-project { padding: var(--sp-2) 0; width: 40px; }
.wf.reviewing .wfs-bar { flex-direction: column; height: auto; width: 4px; gap: 2px; margin: 0 auto; }
.wf.reviewing .wfs-bar i { height: 10px; flex: none; }
.wf.reviewing .wfs-steps { gap: var(--sp-25); padding-top: var(--sp-3); }
.wf.reviewing .wfs-steps .wsr-chip { justify-content: center; padding: 0; width: 40px; height: 28px; }
.wf.reviewing .wfs-steps .wsr-chip.on, .wf.reviewing .wfs-steps .wsr-chip.cursor .wsr-mark { box-shadow: 0 0 0 2px var(--bg-rail), 0 0 0 3px var(--signal-live); }
.wt-gviews { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.wt-gonebar { display: flex; gap: var(--sp-1); margin-left: auto; }
.wt-gonebar button { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--t-body-sm-s); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); cursor: pointer; }
.wt-gonebar button.on { background: var(--bg-raised); color: var(--text-primary); }
.wt-gpicks.one { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.wt-gpicks.one .wt-gpick:not(.picked) { display: none; }
button.wt-gpick-also { border: 0; font: inherit; cursor: pointer; width: 100%; }
button.wt-gpick-also:hover small { color: var(--text-primary); }
/* Home's composer (Set B): what you are making, its brief, how big. */
.home-compose { max-width: 760px; margin: 0 auto var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-2xl); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.home-compose[hidden] { display: none; }
.home-compose.over { box-shadow: inset 0 0 0 2px var(--signal-live); }
.home-compose textarea { width: 100%; min-height: 72px; resize: vertical; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--t-body-md-s); line-height: 1.5; }
.home-compose textarea::placeholder { color: var(--text-muted); }
.home-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.home-files:empty { display: none; }
.home-file { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); border-radius: var(--r-md); background: var(--bg-raised); font-size: var(--t-caption-s); color: var(--text-secondary); }
.home-file b { font-weight: 600; color: var(--text-primary); }
.home-file button { width: 20px; height: 20px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); cursor: pointer; font: inherit; }
.home-file button:hover { background: var(--tint-3); color: var(--text-primary); }
.home-row { display: flex; align-items: center; gap: var(--sp-3); }
.home-kinds { display: flex; gap: var(--sp-1); margin-left: auto; }
/* The system's nav (Set B): where the head's tabs were. */
.app.ds-ws-navon { grid-template-columns: 240px minmax(0, 1fr); }
.app.ds-ws-navon > #dsHead { display: none; }
.app.ds-ws-navon > main { grid-column: 2; grid-row: 1 / -1; }
.ds-ws-nav { grid-column: 1; grid-row: 1 / -1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-rail); padding: var(--sp-4) var(--sp-3) var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-05); }
.ds-ws-nav[hidden] { display: none; }
.ds-ws-navtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); padding: 0 var(--sp-2) var(--sp-4); }
.ds-ws-dots { grid-column: 1 / -1; display: flex; gap: var(--sp-1); }
.ds-ws-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-navtop b { font-size: var(--t-title-sm-s); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ws-navstate { grid-column: 1; font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-navstate[data-tone="caution"] { color: var(--status-caution); }
.ds-ws-navmore { grid-column: 2; grid-row: 2 / 4; align-self: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
.ds-ws-navmore:hover { background: var(--tint-3); color: var(--text-primary); }
.ds-ws-navrow { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 32px; padding: 0 var(--sp-25); border: 0; border-radius: var(--r-md); background: none; color: var(--text-secondary); font: inherit; font-size: var(--t-body-sm-s); text-align: left; cursor: pointer; flex: none; }
.ds-ws-navrow:hover { background: var(--tint-3); color: var(--text-primary); }
.ds-ws-navrow.on { background: var(--chosen-bg); color: var(--text-primary); font-weight: 600; }
.ds-ws-navrow.sub { padding-left: var(--sp-5); }
.ds-ws-navrow.comp { padding-left: var(--sp-8); min-height: 28px; font-size: var(--t-caption-s); }
.ds-ws-navrow .n { margin-left: auto; font-style: normal; font-size: var(--t-caption-s); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ds-ws-navrow.group.open { color: var(--text-primary); }
.ds-ws-navrow .dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--status-caution); }
.ds-ws-count { margin-left: auto; font-style: normal; font-size: var(--t-caption-s); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--chosen-bg); color: var(--signal-live); font-variant-numeric: tabular-nums; }
.ds-ws-navlabel { margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-25); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.ds-ws-navlabel:empty { margin: var(--sp-2) 0; }
.ds-ws-navfind { display: block; padding: 0 var(--sp-1) var(--sp-1); }
.ds-ws-navfind input { width: 100%; height: 28px; font-size: var(--t-caption-s); }
.ds-ws-navnone { margin: 0; padding: var(--sp-1) var(--sp-25); font-size: var(--t-caption-s); color: var(--text-muted); }
#completed .ds-book.ds-ws-nolist { grid-template-columns: minmax(0, 1fr); }
#completed .ds-book.ds-ws-nolist.has-props { grid-template-columns: minmax(0, 1fr) 260px; }
.ds-book.ds-ws-nolist > .ds-book-nav { display: none; }
.ds-ws-inboxhint { margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
#dsBookTree h3 .n { font-family: var(--font-mono); color: var(--text-muted); margin-left: var(--sp-1); }
.ds-ws-sync { margin-bottom: var(--sp-5); }
.ds-ws-spec { margin-top: var(--sp-5); }
#completed .ds-ws-tr.props { grid-template-columns: 110px minmax(0, 1.2fr) 90px minmax(0, 1.4fr); }
.ds-ws-tr.props code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ws-tr.props code.t { color: var(--text-secondary); }
.ds-ws-tokens { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ds-ws-token { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); background: var(--bg-raised); }
.ds-ws-token i { width: 12px; height: 12px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-ws-token code { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-secondary); }
/* The release sheet (Set B). */
.ds-ws-sheetwrap { position: fixed; inset: 0; z-index: var(--z-panel); background: var(--color-overlay); display: grid; place-items: center; padding: var(--sp-6); }
.ds-ws-sheet { width: min(720px, 100%); max-height: calc(100vh - 96px); overflow: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-2xl); background: var(--bg-raised); box-shadow: var(--shadow-menu); color: var(--text-primary); }
.ds-ws-sheet h2 { margin: 0; font-size: var(--t-title-lg-s); font-weight: 600; }
.ds-ws-sheet section { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-ws-sheet section h4 { margin: 0; }
.ds-ws-sheet p { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-sheet p.low { color: var(--status-caution); }
.ds-ws-sheet p .wt-link { margin-left: var(--sp-2); }
.ds-ws-sheet textarea { width: 100%; font: inherit; font-size: var(--t-body-sm-s); }
.ds-ws-check2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-sheet footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-2); }
/* One drop target for a new system (Set B). */
.ds-drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); margin-top: var(--sp-3); border-radius: var(--r-2xl); border: 1px dashed var(--border-strong); background: var(--bg-sunken); text-align: center; cursor: pointer; }
.ds-drop.over { border-color: var(--signal-live); }
.ds-drop b { font-size: var(--t-title-lg-s); font-weight: 600; color: var(--text-primary); }
.ds-drop span { font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-drop input { width: min(440px, 100%); margin-top: var(--sp-3); text-align: center; }
.ds-drop-found { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.ds-drop-found[hidden] { display: none; }
.ds-drop-found li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; min-height: 36px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.ds-drop-found b { font-weight: 600; color: var(--text-primary); }
.ds-drop-found span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-drop-found small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-drop-or { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
/* The proposed plan beside the brief (Set B). */
.wfb-plan { display: flex; flex-direction: column; gap: var(--sp-2); }
.wfb-planhead { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wfb-plancaution { margin: var(--sp-1) 0; display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--tint-2); font-size: var(--t-caption-s); color: var(--text-secondary); }
.wfb-plancaution .wt-caution { color: var(--status-caution); flex: none; margin-top: 1px; }
.wfb-planphase { margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wfb-planrow { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-hairline); }
.wfb-planrow > span { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.wfb-planrow b { font-weight: 600; color: var(--text-primary); font-size: var(--t-body-sm-s); }
.wfb-planrow small { flex-basis: 100%; font-size: var(--t-caption-s); color: var(--text-muted); }
.wfb-stop { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--signal-live); }
.wfb-planx { flex: none; width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.wfb-planx:hover { background: var(--tint-3); color: var(--text-primary); }
.wfb-planacts { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-2) 0 0; }
.wfb-planacts .wt-link { margin-left: 0; }
.wfb-plansay { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); }
.wfb-planerr { margin: 0; font-size: var(--t-caption-s); color: var(--status-caution); }
/* The system's Overview as a living spec (Set B). */
.ds-ws-hero .ds-ws-look { padding: var(--sp-8); border-radius: var(--r-2xl); }
.ds-ws-heroname { margin: 0; font-size: var(--t-display-xl-s); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.ds-ws-health { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-ws-health header { display: flex; align-items: baseline; gap: var(--sp-3); }
.ds-ws-health h3 { margin: 0; font-size: var(--t-title-md-s); font-weight: 600; color: var(--text-primary); }
.ds-ws-health header span { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-health .ds-ws-before { margin-left: auto; }
.ds-ws-hchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ds-ws-hchip { display: inline-flex; align-items: center; gap: var(--sp-15); height: 32px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.ds-ws-hchip:disabled { cursor: default; }
.ds-ws-hchip i { font-style: normal; font-weight: 700; }
.ds-ws-hchip.pass i { color: var(--status-settled); }
.ds-ws-hchip.fail { box-shadow: inset 0 0 0 1px var(--status-caution-line); color: var(--text-primary); }
.ds-ws-hchip.fail i, .ds-ws-hchip.fail small { color: var(--status-caution); }
.ds-ws-hchip.unmeasured i { color: var(--text-muted); }
.ds-ws-hchip:not(:disabled):hover { background: var(--bg-raised); }
.ds-ws-since { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-ws-since li { display: flex; justify-content: space-between; gap: var(--sp-3); min-height: 36px; align-items: center; border-bottom: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-since li:last-child { border-bottom: 0; }
.ds-ws-since small { flex: none; font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-ws-ramprow i.used { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--text-primary); }
.ds-ws-usedby { margin: 0; font-size: var(--t-caption-s); color: var(--text-secondary); }
.ds-ws-lowroles { margin: 0; display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--tint-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ws-lowroles .wt-caution { color: var(--status-caution); flex: none; margin-top: 2px; }
.ds-book-heading .ds-ws-usedline { margin: 0; font-size: var(--t-caption-s); color: var(--text-muted); }
/* The note a request for changes carries, under the component's heading (batch 1). */
.ds-ws-asked { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--tint-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wsr-row.edit[draggable="true"]:hover .wsr-chip { cursor: grab; }
.wsr-row.dragging { opacity: .5; }
.wsr-row.drop { box-shadow: inset 0 2px 0 var(--signal-live); }

/* ══ The action bar, at the top (pilot batch 1, 12 October 2026) ══
   Every screen's one primary sits at the top right, in a bar above the
   work, where desktop tools put it; the bottom dock is gone. The bar is
   the same element the dock was (.wt-dock), placed first: its status at
   the left, its actions at the right. The design surface keeps its own
   bar at the canvas foot (.sf-dock). */
.wt-dock:not(.sf-dock) { order: -1; height: 56px; border-top: 0; border-bottom: 1px solid var(--border-hairline); box-shadow: none; background: var(--bg-page); }
.wt-dock:not(.sf-dock) .wt-dock-status { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
.wt-dock:not(.sf-dock) .wt-dock-title { font-size: var(--t-body-md-s); }
.wt-dock:not(.sf-dock) .wt-dock-primary { height: 32px; padding: 0 var(--sp-4); font-size: var(--t-body-sm-s); border-radius: var(--r-md); }
.wt-dock:not(.sf-dock) .wt-dock-secondary { height: 32px; font-size: var(--t-body-sm-s); }
.wt-dock:not(.sf-dock) .wt-dock-acts { gap: var(--sp-3); }
#dsSimpleDock { position: sticky; top: 0; bottom: auto; z-index: 6; border-bottom: 1px solid var(--border-hairline); background: var(--bg-page); padding: var(--sp-2) var(--sp-7); min-height: 56px; box-sizing: border-box; }
.app:has(#dsSimpleDock:not([hidden])) #dsExplorerStatus { padding-bottom: 0; }
.ds-storybook-view #dsCompletedBody { padding-bottom: var(--sp-8); }
/* Projects: New in the head's tools, where the list's actions are. */
#dashboard .wf-tools #dashNewProject { height: 32px; padding: 0 var(--sp-4); font-size: var(--t-body-sm-s); border-radius: var(--r-md); }
#dashboard #dashDock { display: none; }
.shell-wtab .live { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-live); flex: none; }
/* Starting a project, in a line (pilot batch 2): the brief alone, then the plan alone. */
#wfbrief .wfb-body { justify-content: center; }
#wfbrief.stage-brief .wfb-explain { display: none; }
#wfbrief.stage-plan .wfb-form { display: none; }
#wfbrief.stage-plan .wfb-explain { flex: none; width: min(680px, 100%); }
#wfbrief .wfb-head { justify-content: center; }
#wfbrief .wfb-title { width: 700px; max-width: 100%; }
#wfbrief.stage-plan .wfb-title { width: min(680px, 100%); }
.wfb-stepper { display: inline-flex; gap: var(--sp-5); align-items: center; font-size: var(--t-body-sm-s); font-weight: 400; color: var(--text-muted); }
.wfb-stepper span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.wfb-stepper i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--t-caption-s); box-shadow: inset 0 0 0 1px var(--border-strong); }
.wfb-stepper .on { color: var(--text-primary); font-weight: 600; }
.wfb-stepper .on i { background: var(--action-primary-bg); color: var(--text-inverse); box-shadow: none; }
.wfb-stepper .done i { background: var(--status-settled); color: var(--text-inverse); box-shadow: none; }
.wfb-sugg { margin-left: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-15); height: 24px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--t-caption-s); cursor: pointer; }
.wfb-sugg i { width: 6px; height: 6px; border-radius: 50%; background: var(--status-caution); }
.wfb-sugg:hover { background: var(--bg-raised); }
/* The picker, one line a method. */
.wb-pickitem.one { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-2); min-height: 36px; padding: var(--sp-2) var(--sp-3); }
.wb-pickitem.one b { font-weight: 600; white-space: nowrap; }
.wb-pickitem.one small { color: var(--text-muted); font-size: var(--t-caption-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-pickitem.one .wb-pickadd { opacity: 0; }
.wb-pickitem.one:hover .wb-pickadd, .wb-pickitem.one:focus-visible .wb-pickadd { opacity: 1; }

/* ══ Pilot batch 3 (12 October 2026): the step screens ══ */
/* The timeline, narrower and tighter. */
.wf.with-side { grid-template-columns: 200px minmax(0, 1fr); }
.wfs-steps .wsr-chip { height: 28px; font-size: var(--t-body-sm-s); }
.wfs-steps .wsr-phase { padding: var(--sp-3) var(--sp-25) var(--sp-1); }
.wfs-steps .wsr-phase .wsr-pl { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; }
.wfs-project b { font-size: var(--t-body-md-s); }
/* One header: the bar carries the name and where it is. */
.wr-stagehead.merged .wr-stepno, .wr-stagehead.merged .wr-stepname, .wr-stagehead.merged .wt-statpill { display: none; }
.wr-stagehead.merged .wt-status:not(:has(.wt-statsay, .wt-statacts)) { display: none; }
.wr-stagehead.merged .wr-blurb { margin-top: 0; }
#wrDock:not(.sf-dock) .wt-dock-title .wt-dock-ready { font-size: var(--t-body-lg-s); font-weight: 600; }
/* Refine rows, light. */
.wt-refine { background: none; border-radius: var(--r-lg); }
.wt-refine-head { padding: var(--sp-2) var(--sp-3); }
.wt-fold { min-height: 36px; padding-block: 0; }
.wt-fold-name { font-weight: 400; color: var(--text-primary); }
.wt-fold-val { margin-left: auto; text-align: right; }
/* Required and still empty: one word, Needed, the same chip everywhere a field is drawn (16 October; it was an asterisk drawn as a dot, and a second chip on one field). */
.mf-req { margin-left: var(--sp-2); padding: 0 var(--sp-15); border-radius: var(--r-sm); font-style: normal; font-weight: 400;
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase;
  color: var(--status-caution); background: var(--status-caution-soft); }
.wt-dock .wr-needs { cursor: pointer; }
/* A run narrowed by a panel keeps Run whole: the guard's words step aside (Run's title says them). */
@container (max-width: 760px) { .workflowrun #wrDock:not(.sf-dock) .wr-needs { display: none; } }
.wt-dock .wr-needs:hover .wt-guard-text { text-decoration: underline; text-underline-offset: 3px; }
/* The review's controls in the bar. */
.wt-gviews.inbar { margin: 0; gap: var(--sp-2); flex-wrap: nowrap; }
.wt-gviews.inbar .ds-ws-seg button { padding: var(--sp-1) var(--sp-25); }
.wt-gonebar { margin: 0 0 var(--sp-3); }
.wsr-cacts { flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.wsr-cacts .wt-link { white-space: nowrap; }
.wr-gate .wr-stagehead.merged .wt-status, .wr-gate.pick .wr-callhead h2 { display: none; }

/* Craft's open checks: one row in the thread (pilot batch 5). */
.ide-checks { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: none; color: var(--text); font: inherit; font-size: var(--t-body-sm-s); cursor: pointer; text-align: left; }
.ide-checks:hover { background: var(--surface-hover); }
.ide-checks b { font-weight: 600; color: var(--signal-live); }
.ide-checklist { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--t-body-sm-s); }
.ide-checklist h4 { margin: 0 0 var(--sp-1); font-weight: 600; }
.ide-checklist ul { margin: 0; padding-left: var(--sp-4); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--sp-1); }

/* The type picker over the Google Fonts catalogue (13 October 2026). */
.wt-fp-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wt-fp-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; height: var(--h-field); padding: 0 var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text); font: inherit; font-size: var(--t-body-md-s); cursor: pointer; text-align: left; }
.wt-fp-btn:hover { background: var(--surface-hover); }
.wt-fp-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-fp-btn i { font-style: normal; color: var(--text-secondary); }
.wt-fp { position: fixed; z-index: var(--z-menu); width: 380px; max-height: 450px; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: var(--shadow-float); }
.wt-fp-q { width: 100%; }
.wt-fp-kinds { align-self: flex-start; }
.wt-fp-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.wt-fp-h { margin: var(--sp-2) 0 var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-sm-s); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.wt-fp-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); cursor: pointer; text-align: left; }
.wt-fp-row span { font-size: var(--t-title-md-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-fp-row small { flex: none; color: var(--text-secondary); font-size: var(--t-caption-s); }
.wt-fp-row:hover, .wt-fp-row:focus-visible, .wt-fp-row.on { background: var(--surface-hover); }
.wt-fp-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.wt-fp-more { align-self: flex-start; margin: var(--sp-2) 0; }
.wt-fp-none { color: var(--text-secondary); margin: var(--sp-2) 0; }

/* One of ours is looked at: the controls that would change it are not drawn (batch 2, R-11). */
.ds-ws-lookonly [data-wsfix], .ds-ws-lookonly .ds-ws-finds button, .ds-ws-lookonly [data-wsrole] .ds-ws-edithint,
.ds-ws-lookonly .ds-ws-props button, .ds-ws-lookonly [data-rqfix], .ds-ws-lookonly [data-rqfixall] { display: none; }

/* The system screen's head (batch 2): the place's title at the left of the action bar,
   the status after it, the one primary at the right. */
#dsSimpleDock .ds-ws-pagetitle { margin: 0; flex: none; font-size: var(--t-display-md-s); font-weight: var(--t-display-md-w); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls); color: var(--text-primary); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dsSimpleDock .ds-ws-pagetitle[hidden] { display: none; }
#dsSimpleDock:has(.ds-ws-pagetitle:not([hidden])) { justify-content: flex-start; }
#dsSimpleDock:has(.ds-ws-pagetitle:not([hidden])) #dsSimpleStatus { flex: 1 1 auto; min-width: 0; }
/* Design systems in two groups when the whole list shows (batch 2): yours, then ours. */
#projGrid .proj-group { grid-column: 1 / -1; margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); display: flex; gap: var(--sp-3); align-items: baseline; }
#projGrid .proj-group:first-child { margin-top: 0; }
#projGrid .proj-group small { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: var(--t-caption-s); color: var(--text-muted); }

/* ══ Needs you, the page (batch 3) ══ */
.ds-nd { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 980px; }
.ds-nd-tabs { align-self: flex-start; display: inline-flex; gap: var(--sp-05); background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--sp-1); }
.ds-nd-tabs .cat { height: var(--h-control); padding: 0 var(--sp-35); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-body-xs-s); display: inline-flex; gap: var(--sp-2); align-items: center; cursor: pointer; }
.ds-nd-tabs .cat.on { background: var(--bg-surface); box-shadow: var(--shadow-raised); color: var(--text-primary); font-weight: 600; }
.ds-nd-tabs .cat .n { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ds-nd-sec { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-nd-h { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; font-weight: 400; color: var(--text-muted); }
.ds-nd-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-25) var(--sp-4); border: 0; border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.ds-nd-row.static { cursor: default; }
.ds-nd-row:not(.static):hover { background: var(--tint-3); }
.ds-nd-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-nd-what b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-nd-what small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-nd-go { color: var(--text-muted); }
.ds-nd-tag { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--tint-2); color: var(--text-secondary); }
.ds-nd-tag.fix { color: var(--status-settled); background: var(--status-settled-soft); }
.ds-nd-tag.you { color: var(--status-caution); background: var(--status-caution-soft); }
.ds-nd-tag.figma { color: var(--signal-live); background: var(--chosen-bg); }
.ds-nd-note, .ds-nd-left { margin: var(--sp-2) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-nd-empty { padding: var(--sp-10) var(--sp-6); border-radius: var(--r-lg); background: var(--bg-surface); text-align: center; }
.ds-nd-empty b { font-size: var(--t-display-xs-s); font-weight: 600; }
.ds-nd-empty p { margin: var(--sp-2) 0 0; color: var(--text-secondary); }
/* the panel */
.ds-nd-detail { margin: 0 0 var(--sp-4); color: var(--text-secondary); line-height: 1.5; }
.ds-nd-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.ds-nd-ba figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-nd-cell { height: 120px; border-radius: var(--r-lg); background: var(--color-bg, var(--bg-surface)); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-hairline); }
.ds-nd-none { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-nd-fixes, .ds-nd-lines { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-nd-lines { font-size: var(--t-caption-s); }
.ds-nd-more { list-style: none; color: var(--text-muted); }
.ds-nd-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.ds-nd-chip { height: 26px; padding: 0 var(--sp-25); border: 0; border-radius: var(--r-pill); background: var(--tint-2); color: var(--text-primary); font: inherit; font-size: var(--t-caption-s); display: inline-flex; align-items: center; }
button.ds-nd-chip { cursor: pointer; }
button.ds-nd-chip:hover { background: var(--tint-3); }
.ds-nd-parts { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.ds-nd-part { display: grid; grid-template-columns: 20px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--bg-surface); font-size: var(--t-body-sm-s); }
.ds-nd-part.head { background: none; padding-top: 0; padding-bottom: 0; }
.ds-nd-part span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-nd-part.gone { grid-template-columns: 20px 1fr; align-items: start; margin-bottom: var(--sp-1); }
.ds-nd-part.gone span { grid-column: 2; white-space: normal; font-size: var(--t-caption-s); }
.ds-nd-names { color: var(--text-muted); }

/* ══ What was read (batch 3) ══ */
.ds-rd { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 980px; }
.ds-rd-src { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--bg-surface); display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-rd-src.stopped, .ds-rd-src.failed { box-shadow: inset 0 0 0 1px var(--status-caution); }
.ds-rd-src header { display: flex; align-items: center; gap: var(--sp-3); }
.ds-rd-src h2 { margin: 0; flex: 1; min-width: 0; font-size: var(--t-body-md-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-rd-state { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-rd-src.stopped .ds-rd-state, .ds-rd-src.failed .ds-rd-state { color: var(--status-caution); }
.ds-rd-src p { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); line-height: 1.5; }
.ds-rd-src p b { color: var(--text-primary); font-weight: 600; }
.ds-rd-sub { font-size: var(--t-caption-s) !important; color: var(--text-muted) !important; }
.ds-rd-pages { margin: 0; padding-left: var(--sp-5); font-size: var(--t-caption-s); color: var(--text-secondary); }
.ds-rd-acts { display: flex; gap: var(--sp-2); }
.ds-rd-face { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }

/* ══ A new system, the system screen empty (batch 3) ══ */
.ds-ws-navrow[disabled] { opacity: .45; cursor: default; }
.ds-ws-navrow[disabled]:hover { background: none; color: var(--text-secondary); }
.ds-ws-navrow .n.ok { color: var(--status-settled); }
.ds-new-name { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.ds-new-name input { border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--t-display-lg-s); font-weight: var(--t-display-lg-w); letter-spacing: var(--t-display-lg-ls); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border-hairline); }
.ds-new-name input:focus-visible { border-bottom-color: var(--signal-live); }
.ds-new-ours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); align-items: center; }
.ds-new-our { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--sp-3); border: 0; border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.ds-new-our:hover { background: var(--tint-3); }
.ds-new-our b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-new-our small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-rd-src[hidden] { display: none; }
#dsSimple .ds-new-name, #dsSimple .ds-new-ours { grid-column: 1 / -1; }

/* ══ Components: the page and a component's own panel (batch 4) ══ */
.ds-cp { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-16); }
.ds-cp-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ds-cp-find { margin-left: auto; width: 220px; height: var(--h-control); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); }
.ds-cp-groups { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ds-nd-chip.on { background: var(--chosen-bg); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--signal-live); }
.ds-cp-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-3); }
.ds-cp-card { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.ds-cp-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border-hairline)); }
.ds-cp-art { height: 104px; display: grid; place-items: center; overflow: hidden; background: var(--color-bg, var(--bg-sunken)); }
.ds-cp-meta { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-25) var(--sp-3) 0; }
.ds-cp-meta b { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-body-sm-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-cp-card small { padding: var(--sp-1) var(--sp-3) var(--sp-3); font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-cp-chip { flex: none; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; padding: 2px var(--sp-15); border-radius: var(--r-sm); background: var(--status-caution-soft); color: var(--status-caution); }
.ds-cp-chip.approved { background: var(--status-settled-soft); color: var(--status-settled); }
.ds-cp-bulk { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-25) var(--sp-4); border-radius: var(--r-lg); background: var(--chosen-bg); font-size: var(--t-body-sm-s); }
.ds-cp-bulk .muted { flex: 1; color: var(--text-secondary); }
.ds-cp-table { display: flex; flex-direction: column; font-size: var(--t-body-sm-s); }
.ds-cp-row { display: grid; grid-template-columns: 26px minmax(0, 1.4fr) minmax(0, 1fr) 150px 90px minmax(0, 1fr) 90px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-hairline); }
.ds-cp-row.head { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); }
.ds-cp-row.on { background: var(--chosen-bg); }
.ds-cp-row .wt-link { text-align: left; }
.ds-cp-row .mono { font-family: var(--font-mono); color: var(--text-secondary); }
.ds-cp-row .warn { color: var(--status-caution); }
.ds-cp-row .muted { color: var(--text-muted); }
.ds-cp-back { align-self: flex-start; margin-bottom: var(--sp-2); }
/* add components */
.ds-cp-add { width: min(820px, calc(100vw - 80px)); }
.ds-cp-addcols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-5); max-height: 60vh; }
.ds-cp-addlist { overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); padding-right: var(--sp-2); }
.ds-cp-addlist input[type=search] { height: var(--h-control); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; margin-bottom: var(--sp-2); }
.ds-cp-additem { display: grid; grid-template-columns: 20px 1fr; gap: 0 var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--bg-surface); font-size: var(--t-body-sm-s); cursor: pointer; }
.ds-cp-additem small { grid-column: 2; font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-cp-additem.have { opacity: .55; cursor: default; }
.ds-cp-additem[hidden] { display: none; }
.ds-cp-own { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-cp-own p { margin: 0; }
/* a component's own panel */
.ds-ep section { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-ep-f { display: grid; grid-template-columns: 1fr 96px auto; align-items: center; gap: var(--sp-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-ep-f input, .ds-ep-f select, .ds-ep-slots select, .ds-ep-varhead input { height: 28px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); min-width: 0; }
.ds-ep-f select { grid-column: 2 / 4; }
.ds-ep-f i { font-style: normal; color: var(--text-muted); font-size: var(--t-caption-s); }
.ds-ep-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; align-items: center; }
.ds-ep-chips .ds-nd-chip { gap: var(--sp-1); }
.ds-ep-chips .ds-nd-chip button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.ds-ep-x { border: 0; background: none; color: var(--text-muted); font: inherit; cursor: pointer; padding: 0 var(--sp-1); }
.ds-ep-x:hover { color: var(--text-primary); }
.ds-ep-var { display: flex; flex-direction: column; gap: var(--sp-15); padding: var(--sp-2); border-radius: var(--r-md); background: var(--bg-surface); }
.ds-ep-varhead { display: flex; gap: var(--sp-1); }
.ds-ep-varhead input { flex: 1; font-weight: 600; }
.ds-ep-slots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-2); }
.ds-ep-slots label { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-caption-s); color: var(--text-muted); }
/* the sheet's tabs */
.ds-cp-tabs { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-cp-tabbody > .ds-ws-spec { padding: 0; background: none; }
.ds-cp-code { margin: 0; max-height: 420px; overflow: auto; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--t-mono-sm-s); line-height: 1.5; }
.ds-cp-notes { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-cp-notes textarea { padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); resize: vertical; }
.ds-ws-inboxbulk { margin: 0 0 var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }

/* ══ Foundations, edited in place (batch 5) ══ */
.ds-fd { display: flex; flex-direction: column; gap: var(--sp-3); }
.ds-fd header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ds-fd-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ds-fd-label { min-width: 110px; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-fd-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.ds-fd-colour { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: var(--sp-2); align-items: center; padding: var(--sp-2); border-radius: var(--r-md); background: var(--bg-sunken); font-size: var(--t-body-sm-s); cursor: pointer; }
.ds-fd-colour input { grid-row: 1 / 3; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; }
.ds-fd-colour code { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ds-fd-charts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ds-fd-chart { display: inline-flex; align-items: center; }
.ds-fd-chart input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-md); background: none; cursor: pointer; }
.ds-fd-switch { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--t-body-sm-s); }
.ds-fd-switch span { display: flex; flex-direction: column; gap: 2px; }
.ds-fd-switch b { font-weight: 600; }
.ds-fd-switch small { color: var(--text-muted); font-size: var(--t-caption-s); }
.ds-fd-nums { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.ds-fd-num { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-fd-num input { width: 64px; height: 28px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); }
.ds-fd-num i { font-style: normal; color: var(--text-muted); font-size: var(--t-caption-s); }
.ds-fd-note { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-fd-face { display: grid; grid-template-columns: 110px minmax(0, 240px) 1fr; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--border-hairline); }
.ds-fd-face select { height: 30px; border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; padding: 0 var(--sp-2); }
.ds-fd-specimen { font-size: var(--t-display-sm-s); color: var(--text-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-fd-table { display: flex; flex-direction: column; }
.ds-fd-tr { display: grid; grid-template-columns: 80px minmax(0, 1fr) 70px 70px 70px 80px; gap: var(--sp-2); align-items: center; padding: var(--sp-15) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.ds-fd-tr.head { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); border-top: 0; }
.ds-fd-tr input { height: 26px; min-width: 0; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-caption-s); }
.ds-fd-spec { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-primary); }

/* ══ Releases kept, taken elsewhere, used, and settings (batch 5) ══ */
.ds-rl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-rl-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: baseline; padding: var(--sp-3) 0; border-top: 1px solid var(--border-hairline); }
.ds-rl-row:first-child { border-top: 0; }
.ds-rl-row b { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); font-weight: 600; color: var(--text-primary); }
.ds-rl-when { font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-rl-back { grid-column: 3; grid-row: 1; justify-self: end; }
.ds-rl-notes, .ds-rl-noted { grid-column: 2 / 4; margin: 0; font-size: var(--t-body-sm-s); color: var(--text-primary); white-space: pre-wrap; }
.ds-rl-notes.none { color: var(--text-muted); }
.ds-rl-noted summary { cursor: pointer; color: var(--text-secondary); font-size: var(--t-caption-s); }
.ds-rl-noted ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); color: var(--text-secondary); font-size: var(--t-caption-s); }
.ds-rl-take { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.ds-rl-card { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; text-align: left; padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; cursor: pointer; }
.ds-rl-card:hover { border-color: var(--border-strong); }
.ds-rl-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds-rl-card b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-rl-card span { font-size: var(--t-caption-s); color: var(--text-secondary); }
.ds-use-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 46vh; overflow-y: auto; }
.ds-use-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; }
.ds-use-row:hover { background: var(--bg-sunken); }
.ds-use-row:has(input:checked) { background: var(--bg-sunken); }
.ds-use-row span { display: flex; flex-direction: column; gap: 2px; }
.ds-use-row b { font-weight: 600; font-size: var(--t-body-sm-s); color: var(--text-primary); }
.ds-use-row small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-set-in { flex: 1; max-width: 360px; height: 30px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; font-size: var(--t-body-sm-s); }
.ds-set-in:focus-visible, .ds-fd-num input:focus-visible, .ds-fd-tr input:focus-visible, .ds-fd-face select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Over the app's generic input (width 100%, five :not()s): the foundations' small fields keep their size. */
.ds-ws-card.ds-fd .ds-fd-num input[type="text"][data-fdnum] { flex: none; width: 64px; padding: 0 var(--sp-2); }
.ds-ws-card.ds-fd .ds-fd-tr input[type="text"][data-fdtype] { width: 100%; padding: 0 var(--sp-2); }
.ds-fd-num > span { white-space: nowrap; }

/* ══ Logo, tokens, patterns, sources, reference screens and Find (batch 6) ══ */
.ds-lg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.ds-lg-slot { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-lg-ground { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: var(--r-md); border: 1px solid var(--border-hairline); font-size: var(--t-caption-s); }
.ds-so-art summary { cursor: pointer; font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-lg-ground img { max-width: 70%; max-height: 64px; object-fit: contain; }
.ds-lg-meta { display: flex; flex-direction: column; gap: 2px; }
.ds-lg-meta b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-lg-meta small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-lg-acts { display: flex; gap: var(--sp-3); }
.ds-lg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--sp-1); }
.ds-lg-icon { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); }
.ds-tk header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ds-tk header .cat i { font-style: normal; color: var(--text-muted); margin-left: var(--sp-1); }
.ds-tk-q { max-width: 240px; }
.ds-tk-table { display: flex; flex-direction: column; }
.ds-tk-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 64px; gap: var(--sp-2); align-items: center; padding: var(--sp-15) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-tk-tr.head { border-top: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); }
.ds-tk-tr code { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tk-tr > span { display: inline-flex; align-items: center; gap: var(--sp-15); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-tk-sw { flex: none; width: 14px; height: 14px; border-radius: var(--r-sm); border: 1px solid var(--border-hairline); }
.ds-pt h3 .n { font-style: normal; color: var(--text-muted); font-weight: 400; margin-left: var(--sp-1); }
.ds-pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.ds-pt-card { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; text-align: left; padding: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text-primary); font: inherit; cursor: pointer; }
.ds-pt-card:hover { border-color: var(--border-strong); }
.ds-pt-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds-pt-card b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-pt-card span { font-size: var(--t-caption-s); color: var(--text-secondary); }
.ds-pt-card small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-pt-words { display: flex; flex-direction: column; }
.ds-pt-wr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--sp-2); align-items: center; padding: var(--sp-15) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.ds-pt-wr.head { border-top: 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); }
.ds-pt-wr b { font-weight: 600; }
.ds-pt-wr span { color: var(--text-secondary); }
.ds-pt-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-pt-rules li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-15) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); color: var(--text-primary); }
.ds-pt-rules li:first-child { border-top: 0; }
.ds-pt-rules li.none { color: var(--text-muted); }
.ds-pt-note { width: 100%; max-width: none; height: auto; }
.ds-so header { display: flex; align-items: center; gap: var(--sp-2); }
.ds-so header h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-so header > span:last-child { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-so-said { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.ds-so-gave { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin: 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-so-gave span { margin-right: var(--sp-1); }
.ds-so-gave i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); padding: 2px var(--sp-15); border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--text-secondary); }
.ds-rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.ds-rf-slot { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.ds-rf-thumb { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border-hairline); background: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.ds-rf-slot.empty .ds-rf-thumb { border-style: dashed; background: var(--bg-sunken); color: var(--text-muted); font-size: var(--t-caption-s); }
.ds-rf-thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.ds-rf-slot b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-rf-slot small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-rf-full { width: 100%; height: 60vh; border: 1px solid var(--border-hairline); border-radius: var(--r-md); background: var(--color-surface); }
.ds-find-wrap { align-items: flex-start; padding-top: 12vh; }
.ds-find { width: min(620px, calc(100vw - 32px)); padding: var(--sp-2); gap: 0; }
.ds-find-q { width: 100%; max-width: none; height: 40px; border: 0; background: transparent; font-size: var(--t-body-md-s); }
.ds-find-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; border-top: 1px solid var(--border-hairline); padding-top: var(--sp-1); }
.ds-find-h { margin: var(--sp-2) var(--sp-2) var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); }
.ds-find-row { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-15) var(--sp-2); border: 0; border-radius: var(--r-md); background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.ds-find-row b { font-weight: 600; font-size: var(--t-body-sm-s); }
.ds-find-row span { font-size: var(--t-caption-s); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-find-row.on, .ds-find-row:hover { background: var(--bg-sunken); }
.ds-find-keys { margin: var(--sp-1) var(--sp-2) 0; font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }

/* ══ Source order, every change, screens compared (batch 7) ══ */
.ds-so-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-so-rank li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); font-size: var(--t-body-sm-s); }
.ds-so-rank b { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); font-weight: 600; color: var(--text-muted); }
.ds-so-rank span { flex: 1; color: var(--text-primary); }
.ds-so-acts { display: inline-flex; gap: var(--sp-3); flex: none; }
.ds-hi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-hi-day { padding: var(--sp-3) 0 var(--sp-1); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); text-transform: uppercase; letter-spacing: var(--t-mono-xs-ls); color: var(--text-muted); }
.ds-hi-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-15) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-sm-s); }
.ds-hi-time { font-family: var(--font-mono); font-size: var(--t-mono-sm-s); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ds-hi-what { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-hi-now { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-rf-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ds-rc-stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0; }
.ds-rc-stage[hidden] { display: none; }
.ds-rc-stage[data-rcstage="over"] { grid-template-columns: 1fr; }
.ds-rc-stage figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-rc-stage figcaption { font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-rc-stage img { display: block; width: 100%; height: auto; }
.ds-rc-over { position: relative; }
.ds-rc-over img + img { position: absolute; inset: 0; opacity: 0.5; }
.ds-fd-live .style-live-stage { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-radius: var(--r-md); }
.ds-fd-live .style-live-head { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-fd-live .style-live-label { margin: 0; font-weight: 600; font-size: var(--t-body-sm-s); color: var(--text-primary); }
.ds-fd-warn:not([hidden]) { color: var(--text-secondary); }
.ds-fd-reset { text-align: right; }
.ds-lg-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.ds-lg-cand { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-caption-s); color: var(--text-muted); }
.ds-lg-cand .ds-lg-ground { height: 80px; background: var(--bg-sunken); }
.ds-rf-offer[hidden] { display: none; }
.ds-rf-offer { justify-content: space-between; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); }

/* ══ One shell for every project (Workflows redesign, batch 1, 15 October 2026) ══
   The project sidebar beside whichever screen a project has up; the screen
   moves over to make room. It stands down on the design surface, as the
   rail does, until batch 8 keeps it there. */
.proj-side {
  position: fixed; top: var(--chrome-h); bottom: 0; left: var(--rail-w); width: var(--w-projside); z-index: var(--z-rail);
  background: var(--bg-rail); display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-3) var(--sp-1);
  box-sizing: border-box; min-height: 0;
}
.proj-side[hidden] { display: none; }
/* Hidden from the window bar's toggle: no width, so every view and the canvas take the room. */
html.ps-collapsed { --w-projside: 0px; }
html.ps-collapsed .proj-side { display: none; }
html.ps-on .wf, html.ps-on .studio { left: calc(var(--rail-w) + var(--w-projside)); }

.proj-side svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ps-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: start; padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-25); }
.ps-kind { color: var(--text-muted); padding-top: 2px; display: grid; }
.ps-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-id b { font-size: var(--t-body-md-s); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-id small { font-size: var(--t-caption-s); line-height: var(--t-caption-lh); color: var(--text-muted); }
.ps-more { width: var(--h-meta); height: var(--h-meta); border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.ps-more:hover { background: var(--tint-3); color: var(--text-primary); }
.ps-find { height: var(--h-meta); margin: 0 var(--sp-1) var(--sp-2) var(--sp-25); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-muted); font: inherit; font-size: var(--t-body-sm-s); display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.ps-find span { flex: 1; text-align: left; }
.ps-find kbd { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ps-find:hover { color: var(--text-primary); }
.ps-views { display: flex; flex-direction: column; gap: 1px; padding-left: var(--sp-1); }
.ps-viewbtn { height: 32px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary); font: inherit; font-size: var(--t-body-md-s); display: flex; align-items: center; gap: var(--sp-25); padding: 0 var(--sp-2); cursor: pointer; text-align: left; }
.ps-viewbtn svg { color: var(--text-muted); }
.ps-viewbtn:hover { background: var(--tint-3); color: var(--text-primary); }
.ps-viewbtn.on { background: var(--chosen-bg); color: var(--text-primary); font-weight: 600; }
.ps-viewbtn[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.ps-viewbtn[aria-disabled="true"]:hover { background: none; }
.ps-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: var(--sp-3); padding-left: var(--sp-1); }
.ps-body .wfs-steps { overflow: visible; }
.ps-body .wfs-steps[hidden], .ps-pages[hidden] { display: none; }
/* With Plan open, the plan is the view: the steps fold to their phases. */
.proj-side.plan-open .wfs-steps .wsr-row, .proj-side.plan-open .wfs-steps .wsr-addend, .proj-side.plan-open .wfs-steps .wsr-caution { display: none; }
/* The plan check is said once, on the plan; not as a card on every screen. */
.proj-side .wsr-caution { display: none; }
.ps-pages { display: flex; flex-direction: column; gap: 1px; }
.ps-group { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); padding: var(--sp-2) var(--sp-2) var(--sp-15); }
.ps-page, .ps-add { height: 32px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary); font: inherit; font-size: var(--t-body-sm-s); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); cursor: pointer; text-align: left; min-width: 0; }
.ps-page i { width: 24px; height: 16px; border-radius: var(--r-sm); background: var(--tint-3); flex: none; }
.ps-page span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-page small { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ps-page:hover, .ps-add:hover { background: var(--tint-3); color: var(--text-primary); }
.ps-page.on { background: var(--tint-3); color: var(--text-primary); font-weight: 600; }
.ps-add { color: var(--text-muted); }
.ps-foot { flex: none; display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) 0 0 var(--sp-1); }
.ps-footbtn { height: 30px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-secondary); font: inherit; font-size: var(--t-body-sm-s); display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); cursor: pointer; min-width: 0; }
.ps-footbtn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-footbtn:hover { background: var(--tint-3); color: var(--text-primary); }
.ps-footbtn[hidden] { display: none; }
.ps-footbtn.wfs-pick.none { color: var(--text-muted); }
.shell-help { height: var(--h-control); width: var(--h-control); display: grid; place-items: center; padding: 0; flex: none; border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; }
.shell-help:hover { color: var(--text-primary); background: var(--tint-3); }

/* A craft's Overview, Outputs and Activity: the studio's view host. */
.stu-view { display: none; }
.studio.open.working.ps-view { display: block; }
.studio.open.working.ps-view .stu-view { display: flex; flex-direction: column; position: absolute; inset: 0; min-height: 0; }
.studio.open.working.ps-view .stu-work, .studio.open.working.ps-view .stu-surface, .studio.open.working.ps-view #stuHead { display: none; }
.stu-view .wr-canvas { flex: 1; min-height: 0; }

/* The views' content. */
.ps-banner { display: flex; gap: var(--sp-25); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--bg-surface); font-size: var(--t-body-md-s); line-height: var(--t-body-md-lh); color: var(--text-secondary); margin-bottom: var(--sp-5); }
.ps-banner svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ps-banner b { color: var(--text-primary); font-weight: 600; }
.ps-banner.live { background: var(--signal-live-soft); } .ps-banner.live svg { color: var(--signal-live); }
.ps-banner.warn { background: var(--status-caution-soft); } .ps-banner.warn svg { color: var(--status-caution); }
.ps-banner.ok { background: var(--status-settled-soft); } .ps-banner.ok svg { color: var(--status-settled); }
.ps-banner.bad { background: var(--color-error-subtle); } .ps-banner.bad svg { color: var(--color-error); }
.ps-phases { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ps-phase { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-15); }
.ps-phase small { font-size: var(--t-caption-s); color: var(--text-secondary); }
.ps-segs { display: flex; gap: 2px; height: 5px; }
.ps-segs i { flex: 1; border-radius: var(--r-xs); background: var(--border-strong); }
.ps-segs i.done { background: var(--status-settled); }
.ps-segs i.on { background: var(--signal-live); }
.ps-sec { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.ps-sec .wt-phasehead { display: flex; justify-content: space-between; align-items: baseline; }
.ps-decided { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-25) 0; border: 0; border-top: 1px solid var(--border-hairline); background: none; color: var(--text-primary); font: inherit; font-size: var(--t-body-md-s); text-align: left; cursor: pointer; }
.ps-decided:hover span:nth-child(2) { text-decoration: underline; }
.ps-chip { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-xs); background: var(--tint-3); color: var(--text-secondary); }
.ps-chip.ok { background: var(--status-settled-soft); color: var(--status-settled); }
.ps-aside { display: flex; flex-direction: column; gap: var(--sp-2); }
.ps-aside p { margin: 0 0 var(--sp-3); font-size: var(--t-body-sm-s); line-height: var(--t-body-sm-lh); color: var(--text-secondary); }
.ps-rows { list-style: none; margin: 0; padding: 0; }
.ps-row { width: 100%; display: grid; grid-template-columns: 18px 100px minmax(0, 1.3fr) minmax(0, 1.5fr) 70px; gap: var(--sp-3); align-items: center; padding: var(--sp-25) var(--sp-15); border: 0; border-top: 1px solid var(--border-hairline); background: none; color: var(--text-primary); font: inherit; font-size: var(--t-body-md-s); text-align: left; }
button.ps-row { cursor: pointer; }
button.ps-row:hover { background: var(--tint-3); }
.ps-craftview .ps-row { grid-template-columns: 18px minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.ps-when, .ps-cost { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ps-said { font-size: var(--t-body-sm-s); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-mark { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.ps-mark.done { background: var(--status-settled-soft); box-shadow: inset 0 0 0 1.5px var(--status-settled); }
.ps-mark.running { box-shadow: inset 0 0 0 2px var(--signal-live); background: radial-gradient(var(--signal-live) 35%, transparent 40%); }
.ps-mark.halted { border-radius: var(--r-xs); background: var(--status-caution-soft); box-shadow: inset 0 0 0 1.5px var(--status-caution); }
.ps-mark.failed { border-radius: var(--r-xs); background: var(--color-error-subtle); box-shadow: inset 0 0 0 1.5px var(--color-error); }
.ps-mark.held { box-shadow: none; border: 1.5px dashed var(--text-muted); box-sizing: border-box; }
.ps-mark.skipped { opacity: .5; }
.ps-note { margin: var(--sp-4) 0 0; font-size: var(--t-caption-s); color: var(--text-muted); }
.ps-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--border-hairline); font-size: var(--t-body-md-s); }
.ps-line small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ps-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4); }
.ps-card { border: 0; background: none; padding: 0; text-align: left; color: var(--text-primary); font: inherit; display: flex; flex-direction: column; gap: var(--sp-15); cursor: pointer; }
.ps-pic { height: 140px; border-radius: var(--r-lg); background: var(--bg-surface); overflow: hidden; display: grid; place-items: center; }
.ps-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ps-card b { font-size: var(--t-body-md-s); font-weight: 600; }
.ps-card small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ps-card:hover .ps-pic { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.ps-doc { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.ps-doc span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ps-doc small { font-size: var(--t-caption-s); color: var(--text-muted); }
.ps-doc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--text-muted); }
.ps-briefcard p { margin: 0; font-size: var(--t-body-md-s); line-height: var(--t-body-md-lh); color: var(--text-secondary); max-width: 72ch; }
.ps-latest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.ps-latest .wt-madebed { height: 132px; }
.ps-latest .wt-madecard { width: auto; }
.ps-latest .wt-madebed { aspect-ratio: auto; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--bg-sunken); padding: var(--sp-25); display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }

/* ══ The plan as one list (Workflows redesign, batch 2) ══
   The phases stack, each step a row: its number and mark, its name and state,
   what it gave, how many reviews, its ⋯. The plan check sits beside the list,
   said once. The board's names stay (.pcol, .mcirc), so the drag reads them. */
.wt-sysrow .meta { margin-left: auto; padding-left: var(--sp-3); white-space: nowrap; }
#wbTrack.with-check { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-7); align-items: start; }
.wb-planmain { min-width: 0; }
.wb-planside { position: sticky; top: 0; }
.wb-planside > * { margin: 0; }
#wbBoard.wb-board:not(.empty) { display: flex; flex-direction: column; gap: var(--sp-5); grid-template-columns: none; overflow: visible; }
#wbBoard:not(.empty) .pcol { width: auto; min-width: 0; background: none; border: 0; padding: 0; }
#wbBoard:not(.empty) .pcol > header { display: flex; gap: var(--sp-2); align-items: baseline; padding: 0 0 var(--sp-2); border: 0; }
#wbBoard:not(.empty) .pcol > header h2 { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 0; }
#wbBoard:not(.empty) .pcol-steps { display: flex; flex-direction: column; gap: 0; }
#wbBoard:not(.empty) .mcirc { display: grid; grid-template-columns: 28px minmax(0, 1fr) 100px 28px; gap: var(--sp-3); align-items: center; width: auto; min-height: 44px; padding: var(--sp-2) var(--sp-25); border: 0; border-top: 1px solid var(--border-hairline); border-radius: 0; background: none; box-shadow: none; }
#wbBoard:not(.empty) .mcirc:hover { background: var(--tint-3); }
#wbBoard:not(.empty) .mcirc.next { box-shadow: inset 2px 0 0 var(--signal-live); }
#wbBoard:not(.empty) .mcirc-text { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr); column-gap: var(--sp-4); align-items: baseline; min-width: 0; }
#wbBoard:not(.empty) .mcirc-text b { grid-row: 1; grid-column: 1; }
#wbBoard:not(.empty) .mcirc-state { grid-row: 2; grid-column: 1; font-size: var(--t-caption-s); color: var(--text-muted); }
#wbBoard:not(.empty) .mcirc-gave { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: var(--t-body-sm-s); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wbBoard:not(.empty) .mcirc-reviews { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--signal-live); text-align: right; }
#wbBoard:not(.empty) .mcirc-reviews:empty { visibility: hidden; }
#wbBoard:not(.empty) .wb-add { width: auto; justify-content: flex-start; border: 0; border-top: 1px solid var(--border-hairline); border-radius: 0; background: none; min-height: 40px; padding: 0 var(--sp-25); color: var(--text-muted); }
#wbBoard:not(.empty) .wb-add:hover { color: var(--text-primary); background: var(--tint-3); }
#wbBoard:not(.empty) .mcirc-more { position: static; opacity: 1; }
#wbBoard:not(.empty) .pcol { width: 100%; max-width: none; flex: none; box-sizing: border-box; }
#wbBoard:not(.empty) .mcirc-text { grid-template-columns: 240px minmax(0, 1fr); }

/* ══ Workflows redesign, batch 3: starting a project ══════════════
   The guard beside the answer it names, placeholders that read as
   examples, the aside on every stage, the brief edited beside the
   project's sidebar. */
#wfbrief.stage-edit { z-index: 701; }
html.ps-on #wfbrief.stage-edit { left: calc(var(--rail-w) + var(--w-projside)); }
#wfbrief.stage-edit .wfb-explain { display: flex; flex: none; width: 300px; }
#wfbrief.stage-brief .wfb-explain { display: flex; flex: none; width: 300px; }
#wfbrief .wfb-head { gap: var(--sp-8); }
#wfbrief.stage-brief .wfb-head::after, #wfbrief.stage-edit .wfb-head::after { content: ""; flex: none; width: 300px; }
#wfbrief.stage-edit .wfb-sub[hidden] { display: none; }
#wfbrief.stage-edit .wfb-eyebrow { order: 2; }
#wfbrief.stage-edit .wfb-title h1 { order: 1; }
.wfbrief .mf-input::placeholder { color: var(--text-muted); }
.wfb-needchip {
  font-style: normal; margin-left: var(--sp-2); padding: 0 var(--sp-15); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase;
  color: var(--status-caution); background: var(--status-caution-soft);
}
.wfb-needed .mf-input { box-shadow: inset 0 0 0 1px var(--status-caution-line); }
.wfb-needsay { display: block; margin-top: var(--sp-15); font-size: var(--t-caption-s); line-height: 1.5; color: var(--status-caution); }
#wfbDock .wr-guard { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wfb-ceiling { color: var(--text-muted); font-size: var(--t-caption-s); }
.wfb-ceiling .wt-link { font-size: inherit; }
.wfb-ceilbox { width: 56px; height: var(--h-field-sm); display: inline-block; padding: 0 var(--sp-15); font-family: var(--font-mono); }
#wfbNext:disabled { opacity: .5; cursor: not-allowed; }
.wfb-draftchip {
  font-style: normal; margin-left: var(--sp-2); padding: 0 var(--sp-15); border-radius: var(--r-sm);
  font-size: var(--t-caption-s); color: var(--text-secondary); background: var(--tint-4);
}
.start-drop {
  margin-top: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--t-body-sm-s); color: var(--text-secondary);
}
.start-drop.over { border-color: var(--action-primary-bg); background: var(--tint-4); color: var(--text-primary); }
#wfbrief.stage-edit #wfbNext svg { display: none; }
.wfb-foldhead b { white-space: nowrap; }

/* ══ Workflows redesign, batch 4a: a step's set up and its run ══ */
.wr-needs .wt-guard-text { color: var(--status-caution); font-size: var(--t-body-sm-s); white-space: nowrap; }
.wr-needs .wt-guard-text:empty { display: none; }
#wrDock .wr-guard.wr-needs { display: inline-flex; align-items: center; }
.mf-stripchips { display: flex; flex-wrap: wrap; gap: var(--sp-15); align-items: center; margin-top: var(--sp-2); }
.mf-stripchip { padding: var(--sp-1) var(--sp-25); border-radius: var(--r-sm); background: var(--tint-4); font-size: var(--t-body-sm-s); color: var(--text-primary); }
.mf-stripchip.more { color: var(--text-secondary); }
.mf-stripopen { margin-left: auto; }
.wr-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-15); }
.wr-hist li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wt-carryline .wr-carry .wt-link { font-size: inherit; }
#wrDock .wr-stopbtn { background: transparent; color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
#wrDock .wr-stopbtn:hover { background: var(--color-error-subtle); }
#wrDock.guarded .wt-dock-ready { display: inline; }

/* ══ batch 4b: failed, held, stopped ══ */
.wr-failbanner { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-4xl); background: var(--color-error-subtle); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--color-error); }
.wr-failbanner > svg { flex: none; color: var(--color-error); margin-top: var(--sp-05); }
.wr-failbanner b { font-weight: 600; }
.wr-failbanner p { margin: var(--sp-1) 0 0; font-size: var(--t-body-sm-s); line-height: 1.55; color: var(--text-secondary); }
.wr-failacts { display: flex; gap: var(--sp-5); margin-top: var(--sp-3) !important; }
.wr-failrows { margin-top: var(--sp-4); }
.wr-failrows li.failed i { color: var(--color-error); }
.wr-failsetup { margin-top: var(--sp-5); display: grid; gap: var(--sp-15); }
.wr-failsetup p { margin: 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wr-heldslot { margin-top: var(--sp-4); }
.wt-stopped { background: var(--status-caution-soft); border-color: var(--status-caution-line); box-shadow: none; }
.wt-stopped-head > svg { color: var(--status-caution); }
.wt-sev { font-style: normal; flex: none; padding: 0 var(--sp-15); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); text-transform: uppercase; color: var(--status-caution); background: var(--status-caution-soft); }
.wt-sev[data-sev="high"], .wt-sev[data-sev="critical"], .wt-sev[data-sev="blocking"] { color: var(--color-error); background: var(--color-error-subtle); }
.wr-failacts { justify-content: flex-start; }
.wr-failacts .wt-link { margin-left: 0; }
.wt-stopped-count b, .wt-stopped-count span { color: var(--status-caution); }

/* ══ batch 4c: Activity ══ */
.ps-filters { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.ps-filter { display: inline-flex; align-items: center; gap: var(--sp-15); height: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--r-md); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--t-body-sm-s); cursor: pointer; }
.ps-filter small { font-family: var(--font-mono); font-size: var(--t-mono-xs-s); color: var(--text-muted); }
.ps-filter:hover { background: var(--tint-4); color: var(--text-primary); }
.ps-filter.on { background: var(--tint-4); color: var(--text-primary); font-weight: 600; }
.ps-mark { display: inline-grid; place-items: center; font-size: var(--t-micro-s); line-height: 1; font-style: normal; }
.ps-mark.done { color: var(--status-settled); }
.ps-mark.failed { color: var(--color-error); }

/* ══ Workflows redesign, batch 5a: reviews ══ */
.wr-gate .wr-callhead h2 { display: none; }
.wr-gate .wr-callwhy .wt-link { font-size: inherit; }
.wt-gviews { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.wt-gtools { display: inline-flex; gap: var(--sp-5); margin-left: auto; }
.wt-gtool { font-size: var(--t-body-sm-s); }
.wt-evidence-inline { position: relative; max-height: 320px; overflow: hidden; margin-top: var(--sp-3); }
.wt-evidence-inline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sp-10); background: linear-gradient(transparent, var(--bg-surface)); pointer-events: none; }
.wt-gn-note { display: grid; gap: var(--sp-15); margin-top: var(--sp-4); font-size: var(--t-caption-s); color: var(--text-secondary); }
.wr-needscomment { font-size: var(--t-body-sm-s); color: var(--text-muted); white-space: nowrap; }
.wt-gnotes header .wt-eyebrow { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: var(--t-caption-s); }
.wt-gpick-head b { white-space: normal; overflow: visible; text-overflow: clip; }

/* ══ batch 6: what a step made, Outputs ══ */
.wr-earlier { margin: var(--sp-4) 0 0; font-size: var(--t-body-sm-s); color: var(--text-secondary); }
.wr-earlier .wt-link { font-size: inherit; }
/* A dense design grid: the pages as a contact sheet, not three to a row. */
.wt-made .wr-outcards.wt-designgrid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); }
.wt-made .wt-designgrid .wt-madebed { height: 120px; }

/* ══ batch 7: a craft grows into a workflow ══ */
.ps-growdone { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-surface); }
.ps-growdone small { margin-left: auto; color: var(--text-muted); font-size: var(--t-body-sm-s); }
.ps-growrow { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--bg-surface); margin-top: var(--sp-2); cursor: pointer; }
.ps-growrow span { display: grid; gap: var(--sp-1); }
.ps-growrow small { color: var(--text-secondary); font-size: var(--t-body-sm-s); }
.ps-growrow .wfb-stop { margin-left: var(--sp-2); }
.ps-growrow b { font-size: var(--t-body-md-s); font-weight: 600; color: var(--text-primary); }
.ps-growrow span { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-2); }
.ps-growrow span small { grid-column: 1 / -1; }
.ps-growrow .wfb-stop { margin-left: 0; justify-self: start; }

/* ══ batch 8: the canvas is a view of the project ══
   Inside a project the sidebar is the way out: the canvas's own back,
   crumb and close stand down (Escape still closes). */
html.ps-on .wt-cap-tl > [data-wrback], html.ps-on .wt-cap-crumb, html.ps-on .wt-cap-close { display: none; }
.wt-keys-sub { margin: var(--sp-4) 0 var(--sp-2); }

/* Run limits in Settings › Workspace (follow-up). */
.st-limits .st-rowvalue { display: grid; gap: var(--sp-3); }
.st-limitgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.st-limitgrid label { display: grid; gap: var(--sp-15); font-size: var(--t-caption-s); color: var(--text-secondary); }
.st-limitsay { font-size: var(--t-caption-s); color: var(--text-muted); }
.wt-cmp2-col header .wt-cmp2-pick.top { display: inline-flex; margin-right: var(--sp-2); }
.wt-cmp2-decision b { font-weight: 600; }
.wt-cv-tchip { position: absolute; transform: translate(-50%, -50%); padding: var(--sp-05) var(--sp-15); border-radius: var(--r-sm); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--signal-live-line); color: var(--signal-live); font-family: var(--font-mono); font-size: var(--t-mono-xs-s); letter-spacing: var(--t-mono-xs-ls); pointer-events: none; white-space: nowrap; }
.ps-keepcard { display: grid; gap: var(--sp-2); }
.ps-page.sketch { opacity: .6; }

/* ── One dropdown chevron for the whole app (16 October): the "▾" glyph drew at a few pixels and half
   opacity and could not be seen. The character stays in the text; what is drawn is this, in the text's
   own colour. ── */
i.wt-chev, span.wt-chev, .wt-cap-mono i.wt-chev, .wt-cap .ide-pages.wt-cap-pages i.wt-chev {
  display: inline-block; flex: none; width: 12px; height: 12px; margin-left: var(--sp-1); vertical-align: -1px;
  font-size: 0; line-height: 0; opacity: 1; color: inherit;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wthead-more::after, .wt-wshead .wthead-more::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: var(--sp-1); vertical-align: -1px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A mono control with a chevron keeps it on the line with its words. */
.wt-cap-mono:has(> .wt-chev) { display: inline-flex; align-items: center; gap: var(--sp-05); }
.wt-cap-mono:has(> .wt-chev) > .wt-chev { margin-left: 0; }
/* The canvas bar's two menus say what they are: Pages and Version, small, above the value. */
.wt-cap-stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 1px; min-width: 0; }
.wt-cap-stack::before { content: attr(data-eyebrow); font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
.wt-cap-eyebrow { font-family: var(--font-mono); font-size: var(--t-mono-2xs-s); letter-spacing: var(--t-mono-2xs-ls); text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
.wt-cap .ide-pages.wt-cap-pages { align-items: center; }
.wt-cap-mono .wt-cap-stack > span:last-child { color: var(--text-primary); }
/* No bar at the canvas foot (16 October, at the user's word): its one act, Keep a version, Restart, or
   Stop with the conversation put away, floats at the bottom right; what runs keeps its words beside its
   Stop; with nothing to do it is not drawn. The canvas takes the height. */
.wt-cvsurface ~ .wt-dock.sf-dock { position: absolute; right: var(--sp-7); bottom: var(--sp-7); z-index: 8; height: auto; min-height: 0; max-width: 520px;
  padding: var(--sp-15); gap: var(--sp-3); border: 1px solid var(--border-hairline); border-radius: var(--r-4xl); background: var(--bg-surface); box-shadow: var(--shadow-float); order: 0; }
.wt-cvsurface.props-on ~ .wt-dock.sf-dock { right: calc(var(--sp-7) + 300px + var(--sp-4)); }
.wt-cvsurface ~ .wt-dock.sf-dock:not(.sf-run) .wt-dock-status { display: none; }
.wt-cvsurface ~ .wt-dock.sf-dock.sf-run { padding-left: var(--sp-4); }
.wt-cvsurface ~ .wt-dock.sf-dock:not(.sf-run):has(.wt-dock-acts:empty) { display: none; }

/* Until the app has chosen its route (src/theme-boot.js, app.js initShell). */
html.wt-booting #dashboard, html.wt-booting #quickrun, html.wt-booting #studio,
html.wt-booting #dsHead, html.wt-booting main { visibility: hidden; }