/*
  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: baseline; gap: var(--space-3); min-width: 0; }
.brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; letter-spacing: -0.01em;
}
.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); }

/* 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-1); flex-wrap: wrap; }
.topbar-nav:empty { display: none; }
.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;
  padding: 38px 32px 140px;
}

/* --------------------------------------------------------------- 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;
}
.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 GRID.

  `.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 and the rail appeared to move sideways halfway down
  the page. `.cmd-lower` restores the established split: the same
  `minmax(0,1fr) 330px` tracks and the same gap as `.cmd-main`, so the rail card
  beneath lines up exactly with the rail cards above it.

  This is placement only. `.cmd-bands` itself is unchanged — it is still the
  multi-column band, it just wraps inside the main column now instead of across
  the whole shell — and nothing here touches which modules the engine puts in it.
*/
.cmd-lower {
  margin-top: calc(var(--space-8) * 1.6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: calc(var(--space-8) * 1.6);
  align-items: start;
}
.cmd-lower-rail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-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; }
.entry-label {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.entry-label > span:first-child {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; color: var(--color-neutral-200);
}
.entry .composer { border-color: var(--color-accent-800); }
.entry-context {
  display: block; margin: var(--space-3) 0 0; max-width: 80ch;
  font-size: 13.5px; color: var(--color-neutral-400);
  line-height: 1.65; text-wrap: pretty;
}
.ctx-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent); margin-right: var(--space-2);
  vertical-align: middle;
}

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

.nextstep {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  border-left: 2px solid var(--color-accent-700);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}
.nextstep-text {
  margin: 0; font-size: 15px; line-height: 1.6; max-width: 80ch;
  color: var(--color-neutral-200); 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-title {
  font-size: 14.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-neutral-300); font-weight: 400; margin: 0;
}
.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; }

.composer { border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
/*
  The THREAD composer only — `.composer` is reused on the Command dashboard's
  "next step" entry, which lives in a grid cell where sticky positioning would
  misbehave. Here, in `.thread-layout`'s flow column, the nearest scrolling
  ancestor is the document itself, so it sticks to the bottom of the viewport
  with no wrapper needed — the member should never have to hunt for it after
  a long Compare or Council run.
*/
.thread-layout .composer {
  position: sticky; bottom: var(--space-4); z-index: 4;
  box-shadow: var(--shadow-md);
}
.composer .textarea { border: 0; background: transparent; padding: var(--space-2); }
.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; }
.mic[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-200); }
.mic[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------- 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 */

.itemlist { display: flex; flex-direction: column; gap: var(--space-3); }
.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; }
  /* The lower region follows the composition it belongs to, or the rail card
     would stop lining up with the rail above it at exactly this step. */
  .cmd-lower { 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. */
  .cmd-lower { grid-template-columns: minmax(0, 1fr); }
  .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; }
  .main { padding: var(--space-8) var(--space-6) calc(var(--space-8) * 3); }
  .topbar { padding: 8px var(--space-6); }
}

/* ========================================================================= */
/*  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;
}