/*
  Product layout over Nocturne.

  Every colour, space, radius and shadow below comes from a Nocturne token
  (readme.md: "Never hard-code a hex, a font name or a px value the tokens
  already carry"). What is defined here is layout and composition — the things a
  design system does not carry — and nothing else. There is no second design
  language and no substituted component library.

  ── HC-DESK-REBUILD-1 ────────────────────────────────────────────────────────
  Composition rebuilt from the verified design authority
  ("Command Center design overview (5).zip",
   sha256 7bfea358e39486b60cb94e53af83ef2e78b749da6fcc74f99b1710b8d3ac930d).

  The measures below are the authority's own, read off its markup rather than
  eyeballed from a screenshot:

    shell          `max-width:1400px;margin:0 auto;padding:38px 32px 140px`
                   — HC Command Center.dc.html, the screen wrapper
    header inner   `max-width:1400px;margin:0 auto;padding:8px 32px;min-height:58px`
    main grid      `minmax(0,1fr) 330px`            (mainCols, rail composition)
    decision hero  `minmax(0,1fr) 250px`            (hero sub-grid)
    decision cards `repeat(2,minmax(0,1fr))`        (cardCols at 2+)
    signals        `repeat(3,minmax(0,1fr))`        (signalsCols, no rail)
    areas          `repeat(auto-fit,minmax(190px,1fr))` (areaCols band)
    conversations  `248px minmax(0,1fr)`            (+ `300px` inspector drawer)
    first run      `max-width:1100px`, `190px minmax(0,1fr)`
    rail collapse  under 1100px, per the layout-rule matrix's last row

  THE BINDING RULE OF THIS FILE. At desktop widths the composition is
  structural. `.cmd-main` is a two-column grid and `.cmd-bands` is a multi-column
  band whether or not the account has data for every module. A module with
  nothing in it paints its honest empty/unavailable/setup state IN PLACE and
  keeps its cell. Nothing here caps a module at a reading measure — the previous
  build's `max-width: 82ch` on every module is what produced a ~740px column
  beside dead canvas, and it is gone. Prose inside a module still wraps at a
  reading measure (`.prose`, ~76ch, the authority's own treatment), because
  capping a PARAGRAPH is typography and capping a MODULE is a collapsed layout.
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The main region is focused programmatically after every route change so a
   screen reader lands on the new content. That is a move, not an interaction,
   so it must not paint a focus ring around the whole page. */
.main:focus, .main:focus-visible { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ boot */

.boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--color-bg); z-index: 10;
}
.boot[hidden] { display: none; }
.boot-mark {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; letter-spacing: -0.015em; margin-bottom: var(--space-3);
}
.boot-message { color: var(--color-neutral-500); font-size: 14.5px; max-width: 46ch; }
.boot-message.error { color: var(--color-danger, var(--color-accent-300)); }

/* ---------------------------------------------------------------- shell */

.app { display: flex; flex-direction: column; min-height: 100vh; }
.app[hidden] { display: none; }

/* The bar is full-bleed so its rule spans the viewport; its contents sit on the
   same centred 1400px measure as `.main`. Authority: the header's inner wrapper
   is `max-width:1400px;margin:0 auto;padding:8px 32px;min-height:58px`. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  min-height: 58px;
  padding: 8px max(32px, calc((100% - 1400px) / 2 + 32px));
  border-bottom: 1px solid var(--color-neutral-900);
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--color-bg) 93%, transparent);
  backdrop-filter: blur(14px);
}
.topbar-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-mark {
  width: 18px; height: 18px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-700));
  flex-shrink: 0;
}
.brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; letter-spacing: -0.01em;
}
/* A real initial from the member's own written name — hidden entirely
   rather than shown as a placeholder glyph when no profile name exists. */
.member-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-neutral-800); color: var(--color-neutral-200);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.member-avatar[hidden] { display: none; }
.sep { width: 1px; height: 12px; background: var(--color-neutral-800); align-self: center; }
.workspace { font-size: 14.5px; color: var(--color-neutral-300); }
.collaborator { font-size: 14.5px; color: var(--color-neutral-500); }
/* The identity block stacks name over role, matching the approved
   reference's two-line identity chip, rather than one baseline-aligned
   run of text. `#memberIntent` is already omitted (empty) when the real
   profile carries no role, which collapses this to one line honestly. */
.member-block { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; gap: 1px; }

/* The contextual action/utility row — Theme and Sign out are account-level
   controls, not destinations, so they read as their own quiet cluster
   rather than sharing the primary nav's visual register. A left border
   stands in for a divider without adding a second box model to reason
   about. */
.topbar-actions {
  display: flex; align-items: center; gap: var(--space-2);
  padding-left: var(--space-4); border-left: 1px solid var(--color-neutral-900);
}

/* Desktop navigation stays desktop navigation: a horizontal row of destinations
   in the header. It never becomes a hamburger, a drawer or a rail at any
   desktop width. */
.topbar-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.topbar-nav:empty { display: none; }
/* The two work-destination clusters (interaction vs. capability) get their
   own visual grouping — a divider between them, not just a bigger gap —
   so the row reads as two groups rather than six equally-weighted tabs. */
.nav-cluster { display: flex; align-items: center; gap: var(--space-1); }
.nav-cluster:empty { display: none; }
#nav > .nav-cluster:first-child:not(:empty) {
  padding-right: var(--space-4); border-right: 1px solid var(--color-neutral-900);
}
.navlink {
  background: transparent; border: 1px solid transparent; color: var(--color-neutral-500);
  font-size: 14.5px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer;
}
.navlink:hover { color: var(--color-neutral-200); border-color: var(--color-neutral-800); }
.navlink[aria-current="page"] { color: var(--color-accent-200); border-color: var(--color-accent-700); }

/* The shell is a wide CENTRED measure. `.main` is a flex item of `.app`
   (flex-direction: column), so a `max-width` without an auto inline margin
   leaves the item at the start of the cross axis — the whole page hugs the left
   edge and the rest of the canvas is dead. The auto margin is what centres it,
   and it is not optional. Measure and padding are the authority's. */
.main {
  flex: 1; width: 100%; max-width: 1400px; margin: 0 auto;
  /*
    HC-DESIGN-SLICE-1 — the bottom clearance reserves exactly the persistent
    composer's own rendered footprint (app.js measures `#composerHost` with a
    ResizeObserver and writes it here as `--composer-clearance`), not an
    arbitrary guess at its height. `140px` is the fallback for every route the
    composer host is empty on — the same "clear of the header, room to
    breathe" measure this file used before the host existed.
  */
  padding: 38px 32px var(--composer-clearance, 140px);
}

/*
  THE ONE PERSISTENT COMPOSER HOST.

  `position: fixed` at shell level (index.html: a sibling of `#main`, a child
  of neither the Command grid nor the thread grid) is the actual fix for the
  problem `.thread-layout .composer`'s old sticky rule documented: sticky only
  ever worked because the thread's flow column happened to have the document
  itself as its nearest scrolling ancestor, and would misbehave the moment
  that stopped being true. A fixed shell host has no such dependency — it is
  anchored to the viewport, not to whichever route's grid is currently
  painted inside `#main`, so Command and a thread share the exact same
  anchoring with no special-casing either way.

  The horizontal padding mirrors `.topbar`'s own centring formula, so the
  composer's content aligns with the same 1400px measure as the header and
  `.main` at every width down to the mobile breakpoint below. The host itself
  takes no pointer events — only whatever is actually mounted into it does —
  so the transparent margin either side of a narrower composer (Command's
  `.entry` block reads narrower than 1400px on a wide desktop) never blocks a
  click on anything behind it.
*/
.composer-host {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: var(--space-4) max(32px, calc((100% - 1400px) / 2 + 32px));
  background: color-mix(in srgb, var(--color-bg) 93%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-neutral-900);
  pointer-events: none;
}
.composer-host[hidden] { display: none; }
.composer-host > * { pointer-events: auto; }

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

.page-head { margin-bottom: calc(var(--space-8) * 1.2); }
.page-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
.page-sub { color: var(--color-neutral-500); font-size: 14.5px; margin: 0; max-width: 76ch; }

.kicker {
  font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-400); margin-bottom: var(--space-3);
}

/* A reading measure for PROSE, never for a module. */
.prose { max-width: 76ch; text-wrap: pretty; }

/* ============================================ Command — the composition ==
   Authority: HC Command Center.dc.html.

   `.cmd-main` is the authority's `mainCols` rail composition
   (`minmax(0,1fr) 330px`). It is declared unconditionally at desktop widths:
   the grid, the column arrangement and the module frames render regardless of
   how much data the account holds. `.cmd-bands` carries the full-width module
   band beneath it and wraps at its own count.
   ======================================================================= */

/*
  HC-HUMAN-USE-1 — width doctrine. `.main` is the SHELL (1400px) and stays
  that width for every route, because Compare/Council legitimately use all of
  it. Command's own content does not structurally need the shell's full
  width — the owner's own screenshot is a monitor-wide composer and
  edge-to-edge decision cards, not a Compare/Council case — so Command gets
  its own, narrower WORKSPACE width, centered inside the shell. This changes
  nothing about `.cmd-main`'s own two-track grid or any `.recipe-*` rule
  inside it; it only bounds how wide that grid is allowed to become.
*/
.command-page { max-width: var(--width-workspace); margin: 0 auto; }

.cmd-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: calc(var(--space-8) * 1.6);
  align-items: start;
}
/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 — the rail track only exists in the
  DOM when it genuinely has real content (renderCommand). When it does not,
  `.cmd-main` collapses to one column rather than reserving 330px of
  permanently empty gutter — the same resolution `.cmd-lower` already
  reached for its own now-removed rail track.
*/
.cmd-main.no-rail { grid-template-columns: minmax(0, 1fr); }
.cmd-primary {
  min-width: 0; display: flex; flex-direction: column;
  gap: calc(var(--space-8) * 1.2);
}
.cmd-rail {
  min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-6);
}
/*
  THE LOWER REGION KEEPS THE COMPOSITION'S OWN MEASURE.

  `.cmd-bands` used to span the full shell as a flat four-track auto-fit band,
  so the cards beneath the composition sat on a different set of column edges
  from the cards above them. `.cmd-lower` keeps `.cmd-bands` on the same
  measure as `.cmd-main`'s own primary column.

  HC-DESIGN-SLICE-3 — this used to carry a second, 330px rail track
  alongside `.cmd-bands`, lined up with `.cmd-rail` above it, for
  "Included and not yet on screen" (`commandDormantModule`). That module no
  longer renders on default Home at all (§6C) — it explained implementation/
  layout state, not member work — so there is nothing left to put in a rail
  track here, and reserving 330px of permanently empty gutter would be
  exactly the kind of replacement furniture §19 forbids. One column.
*/
.cmd-lower {
  margin-top: calc(var(--space-8) * 1.6);
}

.cmd-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* A module frame. It occupies its cell whether or not it has content. */
.module {
  min-width: 0;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-6);
}
.module-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.module-title {
  font-size: 13.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-neutral-300); font-weight: 400; margin: 0;
}
.module-count { font-size: 13.5px; color: var(--color-neutral-600); white-space: nowrap; }

/* The honest state a module paints when it has nothing in it. It is a state,
   not a placeholder: it says what is true and what would make it true, and it
   never invents a figure to fill the frame. */
.module-empty {
  color: var(--color-neutral-500); font-size: 14.5px; line-height: 1.65;
  text-wrap: pretty; margin: 0;
}
.module-empty + .module-empty { margin-top: var(--space-3); }
.module-empty-note {
  display: block; margin-top: var(--space-3);
  font-size: 13.5px; color: var(--color-neutral-600); line-height: 1.6;
}

/* ---- the entry point (Ask composer) ---- */

.entry { min-width: 0; }
/*
  HC-HOME-DESIGN-RECONCILE-2 — the approved artifact's own entry composer
  (`HC Command Center.dc.html`, confirmed via its `position:fixed` composer
  wrapper) is a soft, rounded, floating pill — no accent border, no label
  above it, no technical line below it. `--radius-lg`/`--shadow-lg` are
  this design system's own existing tokens (Nocturne), not new ones.
*/
.entry .composer {
  border-color: var(--color-neutral-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/*
  HC-DESIGN-SLICE-3 — the Command contextual execution blocker.

  Lives in the composer's own immediate-response region (inside `.entry
  .composer` itself) — never a Home card, never a modal,
  never a global banner. `[hidden]` keeps it out of the layout entirely
  when there is nothing to say, the same doctrine `.composer-host[hidden]`
  already uses; there is exactly one of these per Command composer, and its
  content is always replaced wholesale (never appended to), so it can never
  duplicate itself.
*/
.command-blocker {
  border: 1px solid var(--color-accent-800);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.command-blocker[hidden] { display: none; }
.command-blocker-text {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-accent-200);
}

/* ---- your next step ---- */

/*
  HC-HOME-DESIGN-RECONCILE-2 — owner ruling §3E: a next step is a nudge, not
  a current blocker, so it no longer carries the accent-bordered hero
  treatment a genuine decision (`.decision`) gets. Same position in the
  composition — this is a visual-weight change, not a layout change.
*/
.nextstep {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.nextstep-text {
  margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 80ch;
  color: var(--color-neutral-400); text-wrap: pretty;
}

/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R4 — the adviser brief. This is
  the STRUCTURAL SLOT the approved reference's left-ruled synthesis
  paragraph occupies, distinct from `.nextstep` (a nudge, deliberately
  never given this treatment per §3E above) and from `.decision` (a
  specific card, not a synthesis). It renders only when a real decision
  exists — see `commandAdviserBrief`'s own comment for exactly which real
  fields it is built from.
*/
.adviser-brief {
  border-left: 2px solid var(--color-accent-700); padding-left: var(--space-4);
}
.adviser-brief-text {
  margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 80ch;
  color: var(--color-neutral-200); text-wrap: pretty;
}
.adviser-brief-rank {
  margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-neutral-600);
}

/* ---- adaptive-learning honesty band (environment, not content) ---- */

.learning-honesty {
  border: 1px dashed var(--color-neutral-800); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.learning-honesty-text {
  margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 80ch;
  color: var(--color-neutral-500); text-wrap: pretty;
}

/* ---- sections ---- */

.section { min-width: 0; }
.section-head {
  display: flex; align-items: baseline; gap: var(--space-4);
  justify-content: space-between; margin-bottom: var(--space-4);
}
.section-head-label { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.section-title {
  font-size: 14.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-neutral-300); font-weight: 400; margin: 0;
}
.section-sub { font-size: 13.5px; color: var(--color-neutral-600); }
.section-count { font-size: 13.5px; color: var(--color-neutral-600); }

/* ---- decision cards ---- */

.decisions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* ================================================ the seven recipes =====
   Authority: `Adaptive system - matrices.md` §2 and its recipe table (:76-84),
   and the prototype's own recipe→arrangement mapping
   (`HC Command Center.dc.html:3652-3658`).

   THE BINDING CONSTRAINT OF THIS LANE IS ENCODED IN THE SELECTORS THEMSELVES.
   Every rule below is scoped to a descendant of `.cmd-main` — `.decisions`,
   `.decision-cards`, `.decision-rows`, `.decision`. Not one of them sets
   `grid-template-columns` on `.cmd-main`. The recipe decides how the decisions
   arrange INSIDE the primary column; it never decides whether the desktop
   canvas is used. A dormant capability removes a module from the composition
   and nothing more.

   Recipe 1's note in the matrices says "No rail, because there is nothing to
   put in it" (:64). That is the one place this lane knowingly diverges: the
   owner's ruling is that no state may produce a single narrow column on a
   desktop canvas, and dropping the rail at recipe 1 is exactly the mechanism
   that produced one. The rail is kept and the hero takes the full primary
   column instead. Recorded in HC-B2-05.
   ======================================================================= */

/* Cards: one per row by default, two equal columns where the recipe says so. */
.decision-cards {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4); margin-top: var(--space-4);
}
.decision-cards:first-child { margin-top: 0; }

/* Recipe 3 — "Two equal active modules". :66 "Neither gets a rank number." */
.recipe-two-equal .decision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Recipe 4 — "One dominant module plus two compact supporting": the hero keeps
   the full column, the two supporting cards sit beneath it side by side. */
.recipe-dominant-two .decision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-dominant-two .decision-card { padding: var(--space-6); }
.recipe-dominant-two .decision-card .decision-title { font-size: 16.5px; }

/* Ranked rows — recipes 5 and 7, and the Returning composition. */
.decision-rows {
  display: flex; flex-direction: column;
  gap: 0; margin-top: var(--space-4);
}
.decision-rows:first-child { margin-top: 0; }

.decision-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-4); align-items: start;
  border: 0; border-bottom: 1px solid var(--color-neutral-900);
  border-radius: 0; background: transparent;
  padding: var(--space-4) 0;
}
.decision-row:first-child { border-color: var(--color-neutral-900); }
.decision-row-body { min-width: 0; }
.decision-rank {
  font-size: 13.5px; color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.decision-row .decision-title { font-size: 15.5px; margin-bottom: var(--space-2); }
.decision-row .decision-why { font-size: 14.5px; margin-bottom: var(--space-3); }

/* Recipe 5 — "Compact ranked rows". Denser than the Returning stack, because
   the member is looking at a queue rather than at what happened while away. */
.recipe-ranked .decision-row { padding: var(--space-3) 0; }
.recipe-ranked .decision-row .decision-why { display: none; }

/* The Returning composition — matrices §2:71, "Waiting On You takes the top."
   The rows keep their reason, because the member has been away and the reason
   is the thing they no longer remember; only the ranked queue hides it. */


.decision {
  min-width: 0;
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: var(--space-8); background: var(--color-surface);
}
.decision:first-child { border-color: var(--color-accent-800); }

/* The authority's hero sub-grid: the case on the left, its stake on the right. */
.decision-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  gap: calc(var(--space-8) * 1.4); align-items: start;
}
.decision-hero > * { min-width: 0; }
.decision-stake {
  border-left: 1px solid var(--color-neutral-900);
  padding-left: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.decision-stake-label {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.decision-stake-value { font-size: 14.5px; color: var(--color-neutral-300); line-height: 1.6; }

.decision-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.decision-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17.5px; line-height: 1.3; letter-spacing: -0.01em;
  margin: 0 0 var(--space-3); color: var(--color-neutral-100);
}
.decision-why {
  margin: 0 0 var(--space-3); font-size: 14.5px; line-height: 1.65;
  color: var(--color-neutral-400); text-wrap: pretty; max-width: 76ch;
}
.decision-provenance {
  margin: 0 0 var(--space-4); font-size: 13.5px; color: var(--color-neutral-600);
  max-width: 76ch;
}
.decision-waiting {
  border-top: 1px solid var(--color-neutral-900);
  margin: 0 0 var(--space-4); padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.waiting-item {
  display: flex; justify-content: space-between; gap: var(--space-4);
  width: 100%; text-align: left; background: transparent; cursor: pointer;
  border: 0; padding: var(--space-1) 0;
  font-size: 14.5px; color: var(--color-neutral-300);
}
.waiting-item:hover { color: var(--color-accent-200); }

/* ---- continue ---- */

.continue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title cue" "meta cue";
  gap: 2px var(--space-4);
  width: 100%; text-align: left; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom-color: var(--color-neutral-900);
  border-radius: 0; padding: var(--space-3) var(--space-2);
}
.continue-item:hover {
  border-color: var(--color-accent-800); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.continue-title { grid-area: title; font-size: 15px; color: var(--color-neutral-200); }
.continue-meta { grid-area: meta; font-size: 13.5px; color: var(--color-neutral-600); }
.continue-cue {
  grid-area: cue; align-self: center;
  font-size: 13.5px; color: var(--color-neutral-700);
}
.continue-item:hover .continue-cue { color: var(--color-accent-200); }

/* ---- rail modules ---- */

.rail-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.rail-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-900);
  font-size: 14.5px;
}
.rail-row:last-child { border-bottom: 0; }
.rail-row-key { color: var(--color-neutral-400); }
.rail-row-value { color: var(--color-neutral-200); text-align: right; }

/* ---- the operational-areas band ---- */

/* `areaCols` from the authority. It wraps at its own count and does not pad to
   a fixed grid — but the band itself keeps its place in the composition and
   paints its honest state when the account has no areas yet. */
.areas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6) var(--space-4);
}
.area {
  min-width: 0; border-top: 1px solid var(--color-neutral-800);
  padding-top: var(--space-3);
}
.area-name { font-size: 14.5px; color: var(--color-neutral-200); }
.area-meta { font-size: 13.5px; color: var(--color-neutral-600); margin-top: var(--space-1); }

/* ---------------------------------------------------------------- cards */

.panel {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.panel + .panel { margin-top: var(--space-4); }
.panel-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; margin: 0 0 var(--space-2);
}
.panel-body { color: var(--color-neutral-400); font-size: 14.5px; line-height: 1.5; max-width: 80ch; }

.hero { padding: var(--space-8); }
.hero .panel-title { font-size: 19px; }

.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.muted { color: var(--color-neutral-600); font-size: 13.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }

/* A multi-column band for any screen that has several independent panels.
   Account and Getting To Know You both use it, so neither is a single narrow
   stack on a desktop canvas. */
.panel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6); align-items: start;
}
.panel-grid > .panel + .panel { margin-top: 0; }
.panel-wide { grid-column: 1 / -1; }

/* A panel footer: the primary action at one end, the count at the other, so the
   row reads as one intentionally aligned line rather than two things that
   happen to sit next to each other. */
.panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4);
}

/* ============================================== Account composition =====
   Account was one `auto-fit` grid for every card on the screen, which is why
   its rows did not line up: a four-track grid gave the two top cards two
   tracks and left two empty, then gave Intelligence one track and left three,
   then gave Usage one and left three. The cards were all correctly sized and
   the screen still read as debris.

   It is now three explicit regions, because the three regions genuinely have
   different shapes and a single auto-fit grid cannot express that.
   ======================================================================= */

/* The three upper information cards: equal widths, and `stretch` so their top
   AND bottom edges line up regardless of how much copy each one carries. */
.account-top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6); align-items: stretch;
  margin-bottom: var(--space-6);
}
.account-top > .panel {
  margin: 0; display: flex; flex-direction: column;
}
/* The trailing action or chip row sits on the card's bottom edge, so three
   cards of different copy lengths still agree on where their last line is. */
.account-top > .panel > .row:last-child { margin-top: auto; padding-top: var(--space-4); }

/* Collaborator Profile's eight fields.

   Six tracks, not three: the first six fields span two tracks each (three to a
   row, as before) and the last two span three tracks each. That fills the final
   row cleanly with two equal-width fields instead of leaving the third column
   of a three-track grid empty. */
.profile-fields {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 var(--space-6); margin-top: var(--space-4);
}
.profile-fields > .field { grid-column: span 2; min-width: 0; }
.profile-fields > .field:nth-last-child(-n + 2) { grid-column: span 3; }

/* Plan history takes the primary width and Usage the rail measure — the same
   330px the Command rail uses, so Account and Command agree on what "the
   smaller right-hand column" is. `align-items: start` keeps their TOP edges
   together while letting each card end at its own content. */
.account-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-6); align-items: start;
  margin-top: var(--space-6);
}
.account-bottom > .panel { margin: 0; }

/* ============================================== Projects composition ====
   Existing projects are the primary content, so they take the larger column.
   38/62 within the shell. */
.projects-grid {
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: var(--space-6); align-items: start;
}

/* --------------------------------------------------------------- inputs */

.input, .textarea, .select {
  width: 100%; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-family: var(--font-body);
  /* The composer is where the member's own words live — reading-tier size,
     not a form-field default, per the owner's typography recheck. */
  font-size: var(--text-md);
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-neutral-700); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > label { font-size: 13.5px; color: var(--color-neutral-400); }

/*
  HC-HUMAN-USE-1 — semantic action hierarchy (owner recheck: the Start
  button "is an appropriate physical size, but its current subdued/gray
  treatment makes it too easy to miss"). `.button` (outline, accent text)
  IS already the correct SECONDARY treatment for the many contextually-
  important-but-not-singular actions that use it today (Save, Create, New
  conversation, Take this one — several of which appear multiple times side
  by side, where a filled treatment on every one would be the "gaudy"
  outcome explicitly ruled out). What was missing was a real PRIMARY tier,
  reserved for the one action that begins or continues the core
  intelligence interaction on a given screen — Command's Start, a thread's
  Ask/Send, Sign in — and a DESTRUCTIVE tier for the one place that needs
  it. Four tiers, no one-off colors: every value below is a token.
*/
.button {
  border: 1px solid var(--color-accent-700); background: transparent;
  color: var(--color-accent-200); font-family: var(--font-heading);
  font-size: 14.5px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); cursor: pointer;
}
.button:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.button:active { border-color: var(--color-accent-400); }
.button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* PRIMARY — filled, high-contrast. Reserved for the single action that
   starts or continues the core interaction on its screen; never more than
   one per view, which is what keeps this from reading as "everything is
   shouting." */
.button-primary {
  border: 1px solid var(--color-accent); background: var(--color-accent);
  color: var(--accent-contrast); font-weight: 600;
}
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-primary:active { background: color-mix(in srgb, var(--color-accent) 82%, black); }
.button-primary[disabled] { opacity: 0.45; cursor: not-allowed; }

/* QUIET / TERTIARY — recedes into chrome: panel toggles, Sign out, Pin. */
.button-quiet { border-color: var(--color-neutral-800); color: var(--color-neutral-400); }
.button-quiet:hover { border-color: var(--color-neutral-700); color: var(--color-neutral-200); background: transparent; }

/* DESTRUCTIVE — the one tier `.button`'s accent treatment must never
   borrow, so an irreversible action never reads as an ordinary one. */
.button-destructive { border-color: var(--error); color: var(--error); background: transparent; }
.button-destructive:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }
.button-destructive:active { background: color-mix(in srgb, var(--error) 22%, transparent); }

.button-small { font-size: 13.5px; padding: var(--space-1) var(--space-3); }

/* Native file inputs are the one control the design system does not carry, and
   an unstyled one is the loudest thing on a Nocturne page. Tame the button. */
input[type="file"] { font-size: 14.5px; color: var(--color-neutral-500); }
input[type="file"]::file-selector-button {
  border: 1px solid var(--color-neutral-800); background: transparent;
  color: var(--color-neutral-300); font-family: var(--font-heading); font-size: 14.5px;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  margin-right: var(--space-3); cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--color-accent-700); color: var(--color-accent-200);
}

.toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14.5px; }
.toggle input { accent-color: var(--color-accent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--color-neutral-800); border-radius: 999px;
  padding: 2px var(--space-3); font-size: 13px; color: var(--color-neutral-400);
}
.chip-accent { border-color: var(--color-accent-700); color: var(--color-accent-200); }
.chip-off { opacity: 0.5; }

/* -------------------------------------------------------- conversations */

/* Authority: `248px minmax(0,1fr)`, plus a `300px` inspector drawer on the
   thread. Both columns are declared at desktop widths and both keep their place
   when the account has nothing filed in them. */
.conversations {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  gap: calc(var(--space-8) * 1.2); align-items: start;
}
.conversations > * { min-width: 0; }
.rail { display: flex; flex-direction: column; gap: var(--space-4); }
.rail-group { border-top: 1px solid var(--color-neutral-900); padding-top: var(--space-3); }
.rail-group:first-child { border-top: 0; padding-top: 0; }
.rail-heading {
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: var(--space-2);
  display: flex; justify-content: space-between; align-items: center;
}
.rail-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); color: var(--color-neutral-300);
  font-size: 14.5px; cursor: pointer;
}
.rail-item:hover { border-color: var(--color-neutral-800); color: var(--color-neutral-100); }
.rail-item[aria-current="true"] { border-color: var(--color-accent-700); color: var(--color-accent-200); }
.rail-item .rail-meta { display: block; font-size: 13px; color: var(--color-neutral-600); }
.rail-nested { margin-left: var(--space-4); border-left: 1px solid var(--color-neutral-900); padding-left: var(--space-2); }

/* --------------------------------------------------------------- thread */

/* The thread is the conversations rail, the thread itself, and the context
   inspector: three columns, the authority's `248px minmax(0,1fr) 300px`. */
.thread-layout {
  display: grid;
  grid-template-columns: var(--width-rail-expanded) minmax(0, 1fr) var(--width-context);
  gap: calc(var(--space-8) * 1.2); align-items: start;
}
.thread-layout > * { min-width: 0; }
.rail-collapse-toggle { align-self: flex-start; margin-bottom: var(--space-2); }
.thread-layout.nav-collapsed .rail-collapse-toggle { width: 100%; }
/*
  HC-HUMAN-USE-1 — independent collapse for the rail and the inspector, at
  the desktop widths where `.thread-layout` is actually three columns (the
  existing 1280px/1100px breakpoints below already collapse it for space
  reasons of their own — this must not fight that cascade, so it is scoped
  to sit above it rather than competing on selector specificity).
  Collapsing the rail narrows its track (never removes it — a compact rail
  stays a rail, per the width doctrine). Closing the inspector removes its
  track entirely: the grid becomes two columns, so the closed panel reserves
  NOTHING, rather than collapsing to width:0 and leaving a phantom track.
*/
@media (min-width: 1281px) {
  .thread-layout.nav-collapsed {
    grid-template-columns: var(--width-rail-collapsed) minmax(0, 1fr) var(--width-context);
  }
  .thread-layout.context-closed {
    grid-template-columns: var(--width-rail-expanded) minmax(0, 1fr);
  }
  .thread-layout.nav-collapsed.context-closed {
    grid-template-columns: var(--width-rail-collapsed) minmax(0, 1fr);
  }
}
.turns { display: flex; flex-direction: column; gap: calc(var(--space-8) * 1.3); margin-bottom: var(--space-6); }
/*
  HC-HUMAN-USE-1 — the conversation as visual primitive.

  The primary test: without reading a label, can a member tell what THEY said
  from what HyperCommand answered? The request is a compact, right-leaning
  note on a raised surface — "the thing I handed over" — capped short of full
  width so it never competes with the answer. The response has no container
  at all: it sits directly on the canvas at full reading measure, because the
  answer is the page's actual content, not a reply inside a chat log.
*/
.turn { display: flex; flex-direction: column; gap: var(--space-3); }
.turn-request {
  align-self: flex-end;
  max-width: min(var(--measure-reading), 82%);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}
.turn-response {
  max-width: var(--measure-reading);
  color: var(--text-primary);
  font-size: var(--text-md); /* primary reading — the owner's named 16-17px tier */
  white-space: pre-wrap;
  line-height: 1.7;
}
.turn-failure {
  max-width: var(--measure-reading);
  border: 1px solid var(--color-accent-800);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.turn-failure .why { color: var(--color-accent-200); font-size: var(--text-sm); }
.turn-failure .action { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-2); }
/* Technical metadata — context version, model, fingerprint — recedes well
   below the answer it describes; it is provenance, not content. */
.turn-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.turn-meta .chip { font-size: var(--text-2xs); color: var(--text-muted); opacity: 0.8; }

/*
  HC-DESIGN-SLICE-1 — `.composer` no longer carries its own placement rule.
  It used to be positioned twice, once per grid it happened to render inside:
  plain flow on the Command dashboard, and sticky-positioned on a thread —
  which only worked because that column's nearest scrolling ancestor was the
  document, the exact fragility this slice removes. Placement now belongs
  entirely to `.composer-host`, the one shell-level element both Command and
  a thread mount into; `.composer` itself is just the card, wherever it is
  mounted.
*/
.composer { border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
.composer .textarea { border: 0; background: transparent; padding: var(--space-2); }
/*
  HC-HOME-DESIGN-RECONCILE-2 — `.textarea`'s own base rule (line ~638) sets
  `min-height: 84px` for every ordinary form use of it; Command's entry
  point is not an ordinary form field, and the approved artifact's own
  composer is genuinely one line tall until the member types more. Scoped
  to `.entry` only — a thread's composer keeps the taller default, since it
  already carries a mode switch and chooser above it.
*/
.entry .composer .textarea { min-height: 0; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mic { border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-400);
  border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.mic[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-200); }
.mic[disabled] { opacity: 0.4; cursor: not-allowed; }

/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R3 — Command's own composer is a
  single compact row (mic, field, send), narrower than the content column
  and floating centered, matching the approved artifact's own composer
  proportions rather than the full-shell-width, two-row panel this had
  drifted into. `.entry-captions` are the two short, factual lines the
  same lane restores beneath it (see buildPrimaryComposer's own comment
  for why their wording is not the literal requested copy).
*/
.entry { max-width: 760px; margin: 0 auto; }
/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — OWNER VISUAL REJECTION of
  R3/R4's single flat surface. The approved composer is TWO nested
  surfaces: `.composer` is the OUTER floating shell (substantial
  padding, its own border, distinct from the page), and
  `.composer-input-surface` is a SEPARATE inner rounded surface nested
  inside it, holding the field and controls. Captions are children of
  `.composer` (inside the outer shell), not a sibling of it.
*/
.entry .composer {
  padding: var(--space-3); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.composer-input-surface {
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  background: var(--color-bg); padding: var(--space-2);
  display: flex; align-items: center; gap: var(--space-2);
}
.composer-row .textarea { flex: 1; min-height: 0 !important; padding: 6px var(--space-2); }
.composer-row .button { flex-shrink: 0; }
/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — mic and send are compact
  ROUNDED-SQUARE controls of the same size, matching Image 1 (owner
  rejection: they were circular "bubbles").

  FINAL CONTROL HIERARCHY CORRECTION — owner ruling: the solid purple
  send fill was never the problem, so `.composer-send` no longer
  overrides color at all — `.button-primary` (on the same element, see
  buildPrimaryComposer) supplies that, exactly as it always has,
  including its own tested hover/active/disabled states. This rule is
  SHAPE only: same size and radius as `.mic` (secondary, dark/outlined,
  unchanged) — a deliberate primary/secondary hierarchy sharing one
  geometric family, not a fill mismatch. Bumped 30px -> 34px: the owner's
  own visual review read 30px as too small.
*/
.mic, .composer-send {
  width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
/*
  Captions live INSIDE the outer shell, directly beneath the inner input
  surface, left-aligned with it — not centered, not hanging below the
  composer as separate page text (both were named defects in the R5
  owner rejection).
*/
.entry-captions { text-align: left; }
.composer-caption {
  margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--color-neutral-600);
}

/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — the shared composer host's
  own full-bleed background/blur/border-top (below) is what made Command's
  composer read as a conventional page-bottom dock — a wash spanning the
  ENTIRE viewport width, behind a card that is itself only 760px wide.
  Suppressed specifically when Command's `.entry`-wrapped composer is the
  mounted content (`:has()`, well-supported in the evergreen browsers this
  product targets) — a thread's own composer, out of this lane's scope,
  keeps the host's backdrop exactly as before.
*/
.composer-host:has(.entry) {
  background: none; backdrop-filter: none; border-top: none;
}

/* ---------------------------------------------------- context inspector */

.inspector { position: sticky; top: 78px; }
.ctx-level { border-top: 1px solid var(--color-neutral-900); padding: var(--space-3) 0; }
.ctx-level:first-of-type { border-top: 0; }
.ctx-level-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.ctx-level-name { font-size: var(--text-sm); color: var(--color-neutral-300); }
.ctx-level-count { font-size: 13px; color: var(--color-neutral-600); }
.ctx-source { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.ctx-source-label { font-size: var(--text-sm); color: var(--color-neutral-400); }
.ctx-source[data-enabled="false"] .ctx-source-label { color: var(--color-neutral-700); text-decoration: line-through; }
.ctx-source input[type="checkbox"] { accent-color: var(--color-accent); }
.fingerprint { font-family: ui-monospace, monospace; font-size: 13px; color: var(--color-neutral-600); word-break: break-all; }
/* Progressive disclosure for module-level instrumentation — technical
   detail (fingerprints, hashes) that is real transparency but should not
   compete with the module's actual content by default. */
.module-detail { margin-top: var(--space-2); }
.module-detail summary {
  cursor: pointer; color: var(--text-muted); font-size: var(--text-xs);
  list-style: none;
}
.module-detail summary::-webkit-details-marker { display: none; }
.module-detail summary::before { content: '▸ '; }
.module-detail[open] summary::before { content: '▾ '; }
.module-detail summary:hover { color: var(--text-secondary); }
.module-detail .fingerprint { margin-top: var(--space-1); }

/* -------------------------------------------------------------- overlay */

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent); z-index: 20; padding: var(--space-6);
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-8); max-width: 520px; width: 100%;
}
.overlay-title { font-family: var(--font-heading); font-size: 17px; margin: 0 0 var(--space-3); }
.overlay-body { color: var(--color-neutral-400); font-size: 14.5px; line-height: 1.55; }
.overlay-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }

/* ------------------------------------------------------------- firstrun */

/* Authority: First Run sits on its own narrower 1100px measure — it is a
   composed screen at that measure, not a 660px column on a 1400px canvas. */
.firstrun { max-width: 1100px; margin: 0 auto; }
.firstrun-question { font-family: var(--font-heading); font-size: 26px; margin: 0 0 var(--space-3); letter-spacing: -0.015em; }
.firstrun-why { color: var(--color-neutral-500); font-size: 14.5px; margin-bottom: var(--space-6); max-width: 76ch; }
.firstrun-progress { display: flex; gap: 4px; margin-bottom: calc(var(--space-8) * 1.4); }
.firstrun-dot { height: 2px; flex: 1; background: var(--color-neutral-900); border-radius: 2px; }
.firstrun-dot.done { background: var(--color-accent-700); }
.firstrun-dot.current { background: var(--color-accent); }

/* The three ways in sit side by side, as the authority shows them. */
.firstrun-ways {
  margin-top: calc(var(--space-8) * 1.4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4); align-items: start;
}
/* The question step: the prompt on the left of its reason, the authority's
   `190px minmax(0,1fr)` review row. */
.firstrun-step { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: calc(var(--space-8) * 1.4); align-items: start; }
.firstrun-step > * { min-width: 0; }
.firstrun-review-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--space-6); align-items: baseline;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-neutral-900);
  margin-bottom: var(--space-3);
}

/* The recommendation offered at the third calibration question. Offered, never
   pre-filled — a field the member skipped past must stay absent. */
.firstrun-suggestion {
  margin-top: var(--space-4); padding: var(--space-4);
  border: 1px dashed var(--color-neutral-800); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
}

/* ---------------------------------------------------------------- lists */

/*
  HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R3 — Continue reads as one grouped
  card (matching the decision card's own bordered surface) rather than a
  set of rows whose only edge is a hairline between them and an ambiguous
  boundary with the page around it.
*/
.itemlist {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: 0 var(--space-3); background: var(--color-surface);
}
.itemlist .continue-item { border-bottom-color: var(--color-neutral-900); }
.itemlist .continue-item:last-child { border-bottom-color: transparent; }
.item {
  border: 1px solid var(--color-neutral-900); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.item-title { font-size: 15px; color: var(--color-neutral-200); }
.item-sub { font-size: 13.5px; color: var(--color-neutral-600); }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-neutral-900); }
.table th { color: var(--color-neutral-600); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.table td { color: var(--color-neutral-400); }
.table-scroll { overflow-x: auto; }

.empty { color: var(--color-neutral-600); font-size: 14.5px; padding: var(--space-4) 0; }

/* ---- header identity ---- */

.member-name { font-size: 14.5px; color: var(--color-neutral-200); }
.member-intent {
  font-size: 14.5px; color: var(--color-neutral-600);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-intent:not(:empty)::before {
  content: ""; display: inline-block; width: 1px; height: 11px;
  background: var(--color-neutral-800); margin: 0 var(--space-3) -1px;
}

/* ==================================================== responsive =========
   The layout-rule matrix's last row, and the only collapse it authorises:

     "viewport under 1100px · any composition with a rail → Stacked. Rail
      content follows the primary column in the same order of consequence."

   Above 1100px nothing here collapses. The desktop canvas is used at every
   desktop width, and 1280px is the tablet-landscape step where the thread's
   third column folds into the second.
   ======================================================================= */

/* ------------------------------------------- HC-MODELS-1 · the workspace */

/* The mode switch, frozen design CC:746-751 — a segmented control, and a
   right-aligned note beside it (CC:753). */
.mode-bar { margin-bottom: var(--space-4); gap: var(--space-6); flex-wrap: wrap; }

.mode-switch {
  display: flex;
  gap: var(--space-2);
  padding: 3px;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
}
.mode-button {
  border: 0;
  background: transparent;
  color: var(--color-neutral-400);
  font-size: 14.5px;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.mode-button:hover { color: var(--color-accent-200); }
.mode-button.is-active {
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
}
/* Discoverable, not hidden, and honest about not being built. Doctrine: no
   locked-module graveyard, and never a dead end. */
.mode-button.is-unavailable { color: var(--color-neutral-700); }
.mode-button.is-unavailable:hover { color: var(--color-neutral-500); }

.mode-note {
  font-size: 13.5px;
  color: var(--color-neutral-600);
  max-width: 52ch;
  text-align: right;
}

.model-select-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.model-select-wrap .select { width: auto; }

.compare-chooser { margin-bottom: var(--space-4); }
.compare-chooser .row.wrap { flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; }

.chip-toggle {
  cursor: pointer;
  border: 1px solid var(--color-neutral-800);
  background: transparent;
  color: var(--color-neutral-400);
}
.chip-toggle:hover { border-color: var(--color-accent-600); color: var(--color-accent-200); }
.chip-toggle[disabled] { cursor: not-allowed; opacity: 0.45; }
.chip-toggle[disabled]:hover { border-color: var(--color-neutral-800); color: var(--color-neutral-400); }
.chip-toggle.is-on {
  border-color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-200);
}

/* The Compare note bar, CC:815-818. */
.compare-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  border: 1px solid var(--color-accent-800);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-300);
  margin-bottom: var(--space-4);
}
.link-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-accent-300);
  font-size: 15px;
  cursor: pointer;
}
.link-button:hover { color: var(--color-accent-200); }

/* Two-column result cards, CC:819 — repeat(2, minmax(0,1fr)). */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.compare-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.compare-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-neutral-900);
}
/* The model identity is a label, not a headline: distinguished by weight, not
   size, so it never competes with the answer beneath it. The metadata beside
   it (provider, timing, retries) recedes further still — it is provenance. */
.compare-model { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.compare-meta { font-size: var(--text-2xs); color: var(--text-muted); text-align: right; opacity: 0.85; }
.compare-card-body { padding: var(--space-6); flex: 1; }
.compare-body-text {
  font-size: var(--text-md); /* primary reading — the owner's named 16-17px tier */
  line-height: 1.7;
  max-width: var(--measure-reading);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.compare-card-foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-neutral-900);
}
/* Per-participant state is visible, and each card carries only its own. */
.compare-card.is-streaming { border-left: 2px solid var(--color-accent-700); }
.compare-card.is-failed,
.compare-card.is-timeout { border-left: 2px solid var(--color-neutral-700); }
.compare-card.is-completed { border-left: 2px solid transparent; }

.compare-run { display: block; }
.compare-live:empty { display: none; }

@media (max-width: 1280px) {
  /* Tablet landscape: the context inspector follows the thread rather than
     squeezing three columns into a width that cannot carry them. */
  .thread-layout { grid-template-columns: 248px minmax(0, 1fr); }
  .thread-layout > .inspector { grid-column: 1 / -1; position: static; }
  .cmd-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .account-bottom { grid-template-columns: minmax(0, 1fr) 300px; }
  /*
    The band's 300px minimum track was calibrated when it spanned the whole
    shell. Inside the main column it still gives three tracks at the review
    width, but at tablet landscape it drops to two and leaves the third card
    alone beside an empty cell. Three explicit equal tracks here, because the
    band holds exactly three modules and wrapping one of them off is the
    accidental empty column this pass exists to remove.
  */
  .cmd-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .cmd-main { grid-template-columns: minmax(0, 1fr); }
  .cmd-bands { grid-template-columns: minmax(0, 1fr); }
  /* The recipes stack too, since the rail composition they sit in has stacked.
     This is the matrices' own last row (:72) reaching the whole composition,
     not a separate collapse. */
  .recipe-two-equal .decision-cards,
  .recipe-dominant-two .decision-cards { grid-template-columns: minmax(0, 1fr); }
  .decision-hero { grid-template-columns: minmax(0, 1fr); }
  .decision-stake { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-neutral-900); padding-top: var(--space-4); }
  .conversations { grid-template-columns: minmax(0, 1fr); }
  .thread-layout { grid-template-columns: minmax(0, 1fr); }
  .firstrun-step { grid-template-columns: minmax(0, 1fr); }
  .panel-grid { grid-template-columns: minmax(0, 1fr); }
  /* Below the rail-composition breakpoint every one of this lane's grids
     stacks, for the same reason the matrices give at :72 — the composition
     they sit in has stacked, so a second set of columns underneath it would be
     a rail with nothing beside it. */
  .account-top { grid-template-columns: minmax(0, 1fr); }
  .account-top > .panel > .row:last-child { margin-top: var(--space-4); padding-top: 0; }
  .account-bottom { grid-template-columns: minmax(0, 1fr); }
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-fields { grid-template-columns: minmax(0, 1fr); }
  .profile-fields > .field,
  .profile-fields > .field:nth-last-child(-n + 2) { grid-column: auto; }
  /* Compare's two columns stack for the same reason every other grid here
     does: the composition they sit in has stacked. */
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-note { text-align: left; }
  /* HC-DESIGN-SLICE-1 — same composer-footprint clearance as the desktop
     rule above; only the fallback (routes with no composer mounted) and the
     top/side padding are this breakpoint's own. */
  .main { padding: var(--space-8) var(--space-6) var(--composer-clearance, calc(var(--space-8) * 3)); }
  .topbar { padding: 8px var(--space-6); }
}

/*
  HC-DESIGN-SLICE-1 — the first phone-tier acceptance width this product has
  faced (390px human-use acceptance; the audit found no breakpoint below
  1100px anywhere in this file). Scoped to what actually needs it: the
  composer host's own edge padding, and the two composer-internal rows wide
  enough to overflow their card at this width — `.mode-switch`'s four
  buttons (One model / Compare / Send to several / Council) and
  `.composer-actions`'s mic/status/send row. Everything else the composer
  depends on (`.row`, `.mode-bar`) already wraps.
*/
@media (max-width: 480px) {
  .composer-host { padding-left: var(--space-3); padding-right: var(--space-3); }
  .mode-switch { flex-wrap: wrap; }
  .composer-actions { flex-wrap: wrap; row-gap: var(--space-2); }

  /*
    HC-DESIGN-SLICE-4 — `.topbar` itself never wrapped as a whole (only
    `.topbar-nav`'s own links did, line ~109), so at this width its four
    flex children — identity, nav, theme toggle, sign out — stayed on one
    nowrap row while the nav's now-multi-line content grew taller than its
    siblings; `align-items: center` then centred the single-line siblings
    across that full height, landing them visually on top of the nav's own
    wrapped second line. Real member identity text made this worse (a
    longer display name has no ellipsis and does not shrink). Not a new nav
    mechanism — the same flat, always-visible row (§10's own "never a
    hamburger, a drawer or a rail" holds at every width) — just letting the
    whole bar wrap onto calm, non-overlapping rows the way `.topbar-nav`
    already wraps its own links.
  */
  .topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .topbar-identity { flex-wrap: wrap; row-gap: 2px; }
  .topbar-nav { flex: 1 1 100%; order: 3; justify-content: flex-start; }
  /* The actions cluster's own left border reads as clutter once it has
     wrapped onto row 1 beside identity at this width, not as a divider
     between two things sharing a row with the primary nav. */
  .topbar-actions { padding-left: 0; border-left: none; }
}

/* ========================================================================= */
/*  COUNCIL — HC-COUNCIL-1                                                   */
/*  Frozen design CC:878-1206. The accent-bordered head bar, the four tabs,   */
/*  the two-column position grid and the split/agree pair are the design's,   */
/*  not this lane's.                                                          */
/* ========================================================================= */

.council { display: contents; }
.council-panel { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }

/* CC:881 — the accent-bordered head bar. */
.council-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  border: 1px solid var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.council-lead { font-size: 14.5px; color: var(--color-neutral-100); }
.council-members { font-size: 13.5px; color: var(--color-neutral-500); }
.council-round { font-size: 13.5px; color: var(--color-accent-200); }

.council-tabbar { gap: var(--space-4); flex-wrap: wrap; }
.council-context-toggle { border-style: dashed; }

.council-context, .council-evidence {
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.council-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
}
.council-context-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-neutral-900); }
.council-context-name { font-size: 14.5px; color: var(--color-neutral-100); }
.council-context-level { font-size: 13.5px; color: var(--color-neutral-500); }
.council-notsent { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-600); max-width: 84ch; }
.council-fingerprint code { font-size: 13.5px; color: var(--color-neutral-500); overflow-wrap: anywhere; }

/* CC:933-964 — the automatic panel. */
.council-auto {
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.council-auto-line { font-size: 15px; color: var(--color-neutral-100); }
.council-auto-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-progress { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.council-step {
  font-size: 13.5px;
  color: var(--color-neutral-600);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.council-step.is-done { color: var(--color-accent-200); }
.council-step.is-current {
  color: var(--color-accent-200);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.council-arrow { font-size: 13px; color: var(--color-neutral-800); }

/* CC:966-988 — round 1 and the position cards. */
.council-round-one { display: flex; flex-direction: column; gap: var(--space-4); }
.council-blind-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-positions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.council-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.council-card.is-lead { border-color: var(--color-accent-700); }
.council-card-model { font-size: 15px; color: var(--color-neutral-100); }
.council-card-tag {
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.council-card.is-lead .council-card-tag { color: var(--color-accent-200); }
.council-card-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-neutral-400);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.council-card-failed { font-size: 14.5px; color: var(--color-neutral-600); }

/* CC:990-1013 — the directed-exchange router. */
.council-router {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.council-router-note { font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-400); max-width: 80ch; }
.council-note { width: 100%; }
.council-router-actions { margin-top: var(--space-3); }

/* CC:1015-1036 — the exchange log. */
.council-log { display: flex; flex-direction: column; gap: var(--space-6); }
.council-log-entry { display: flex; flex-direction: column; gap: var(--space-3); }
.council-log-scope { font-size: 13.5px; color: var(--color-neutral-600); }
.council-log-routed { border-left: 2px solid var(--color-accent-700); padding-left: var(--space-6); }
.council-log-position {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-300);
  max-width: 86ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.council-log-instruction { font-size: 13.5px; color: var(--color-neutral-600); margin-top: var(--space-3); }
.council-log-reply {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* CC:1037-1057 — the proposal and the completion bar. */
.council-proposal, .council-complete {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.council-complete { border-color: var(--color-accent-800); flex-direction: row; align-items: center; }
.council-proposal-text { font-size: 16.5px; line-height: 1.7; color: var(--color-neutral-100); max-width: var(--measure-reading); }
.council-proposal-meta, .council-proposal-foot { font-size: 13.5px; color: var(--color-neutral-600); }

/* CC:1060-1161 — synthesis. */
.council-synthesis { display: flex; flex-direction: column; gap: var(--space-6); }
.council-resolution-by { font-size: 14.5px; color: var(--color-neutral-500); }
.council-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.council-agree, .council-split, .council-objection, .council-verdict {
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.council-split { border-color: var(--color-accent-800); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.council-objection { border-left: 2px solid var(--color-neutral-400); }
.council-objection-foot { font-size: 13.5px; color: var(--color-neutral-600); }
.council-list { margin: var(--space-4) 0 0; padding-left: var(--space-6); }
.council-list li { font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); margin-bottom: var(--space-3); }
.council-empty-line { font-size: 15px; color: var(--color-neutral-600); }
/* The verdict is the point of Council — it earns real elevation and an
   accent edge, so it reads as the answer rather than one more transcript
   card among equals. */
.council-verdict {
  background: var(--surface-raised);
  border-color: var(--color-accent-700);
  box-shadow: var(--shadow-md);
}
.council-verdict-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-decision { width: 100%; margin-top: var(--space-4); }
/* The verdict text had no reading-measure cap at all before this pass — the
   one place it matters most, now that Council's column genuinely widens in
   wide-mode (below). The container earns the width; the conclusion itself
   still reads at a controlled measure. */
.council-decided-text { font-size: 16.5px; line-height: 1.7; color: var(--color-neutral-100); max-width: var(--measure-reading); }
.council-decided-meta { font-size: 13.5px; color: var(--color-neutral-600); }
.council-empty { display: flex; flex-direction: column; gap: var(--space-4); }

/* CC:1183-1203 — full transcript. */
.council-transcript { display: flex; flex-direction: column; gap: var(--space-3); }
.council-transcript-entry {
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.council-transcript-role { font-size: 13.5px; color: var(--color-neutral-600); }

.council-chooser { display: flex; flex-direction: column; gap: var(--space-3); }
.council-controls { align-items: center; gap: var(--space-3); }

/* Under 1100px every Council grid stacks, like every other rail composition. */
@media (max-width: 1100px) {
  .council-positions, .council-split-grid, .council-context-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* HC-U2 — the login surface. It is the boot screen's sibling, so it inherits
   the same centred frame; only the form itself needs describing. */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  min-width: 280px;
  text-align: left;
}
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field > span { font-size: 15px; opacity: 0.75; }
.login-field > input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.18));
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: inherit;
  font: inherit;
}