/* Cygnet Insurance — the claims console as a drawcord garment.
   ------------------------------------------------------------------------------------------------
   THE ONE IDEA: a claim is a channel in a plane of silk. A gold cord runs the rail beside them, and
   the cord's REACH is the handler's delegated authority. Settling a claim is pulling its cord — the
   channel gathers into ribs and stays gathered. A claim above £5,000 has a channel the cord cannot
   reach: the gold stops at the authority bead and the rest of that channel is bare thread.

   That is not decoration over a dashboard. It is the exhibit:
     · CY-001 — above delegated authority — is GEOMETRY. A row of gold lines, one stopping short.
     · CY-002 — no shadow mode — is the PLANE. You cannot test-pull a cord. There is no way to see
       what this garment looks like gathered without gathering it, and the flat region at the foot
       of the page is the plane that can never be previewed.

   Colour literals live ONLY here and in favicon.svg (pinned by a test). Everything else takes
   var(--c-*). */

/* ══ Palette ════════════════════════════════════════════════════════════════════════════════════
   The black is WARM — a silk black with a brown undertone, not a cool graphite. That is deliberate
   and load-bearing: fairhaven-constabulary owns cold graphite near-black, and two dark clients in a
   five-client set only stay distinct if they are different temperatures carrying different metals.
   Gold takes real coverage here so the thumbnail reads as a warm metallic object rather than a
   terminal. */
:root {
  --c-ground: #100d0b; /* the ground. warm silk black */
  --c-silk: #1a1613; /* a raised plane */
  --c-silk-deep: #0a0807; /* a recessed region */
  --c-thread: #3a332c; /* graphite channel stitching — the hairline that draws everything */
  --c-thread-lit: #574d42; /* stitching under focus */

  --c-gold: #c9a227; /* the cord */
  --c-gold-lit: #e8c766; /* the cord under tension */
  --c-gold-bright: #f3dd9e; /* the bead, the active anchor */
  --c-gold-deep: #6b5518; /* the shadow side of the braid — the strand turning away */
  --c-gold-wash: #2a2313; /* gold at 10% over void — a filled channel */

  --c-ink: #f4efe4; /* prose on silk */
  --c-ink-soft: #b3a795; /* secondary */
  --c-ink-faint: #a29788; /* tertiary. Lifted one step — the previous tone passed contrast at 4.6:1
                              and was still hard to read, because small tracked uppercase on a dark
                              ground needs more than the floor. */

  /* States are cord positions, never hues. Only "released" gets its own tone, because a declined
     claim is the one outcome that is not a form the garment can hold. */
  --c-released: #9d8f7d;

  --shadow-lift: 0 18px 40px -24px rgb(0 0 0 / 0.9);
  --shadow-gather: 0 2px 0 0 var(--c-gold-wash), 0 22px 44px -28px rgb(0 0 0 / 0.95);

  /* Type. Declared as tokens so the design test can assert the allocated display class rather than
     grep the stylesheet for a family name. */
  --c-font-display: 'Bodoni Moda', ui-serif, Georgia, serif;
  --c-font-label: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --c-leading: 1.6;

  /* Geometry: hairline panels and circular beads. Deliberately NOT the old oversized radii — a
     28px tile is a soft dashboard card, and this world is stitched panels with cord ends. */
  --c-radius-panel: 6px;
  --c-radius-bead: 50%;

  --s-1: 0.375rem;
  --s-2: 0.625rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.5rem;
  --s-7: 5.5rem;

  --rail-w: 7px;
  --bead: 15px;

  --ease-draw: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ Reset & browser surfaces ═══════════════════════════════════════════════════════════════════
   The parts nobody draws still carry the design. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scrollbar-color: var(--c-thread) var(--c-ground);
}

body {
  margin: 0;
  /* Silk, not a flat fill. The tile is authored in static/weave.svg at an amplitude low enough that
     no text loses contrast and high enough that the black stops reading as a void. */
  background: var(--c-ground) url('/static/weave.svg') repeat;
  color: var(--c-ink);
  font-family: var(--c-font-label);
  font-size: 1rem;
  line-height: var(--c-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-gold);
  color: var(--c-ground);
}

:focus-visible {
  outline: 2px solid var(--c-gold-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--c-ground);
}
::-webkit-scrollbar-thumb {
  background: var(--c-thread);
  border-radius: 99px;
  border: 3px solid var(--c-ground);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-thread-lit);
}

/* ══ Type ═══════════════════════════════════════════════════════════════════════════════════════
   Bodoni carries the NAME and the two hero figures. Archivo carries everything that gets read or
   scanned — including all forty-two claim amounts.

   That split is a correction, and the reason is worth keeping. A didone optically THINS on a dark
   ground: its hairlines are the thinnest strokes in the whole system and they are the first thing
   to disappear in light-on-dark. Beautiful at 3rem for one figure; punishing at 1.5rem, forty-two
   times, when scanning the column is the actual task. Operate mode is explicit that expression may
   never obscure the task, so the money moved to the grotesque and Bodoni kept the moments where it
   is genuinely legible and genuinely doing work.

   `font-optical-sizing: auto` matters here: Bodoni Moda ships an optical-size axis, and letting the
   browser use it is what stops the display cut's hairlines being applied at text sizes.

   Figures are ALWAYS tabular — a column of money that shifts as it changes is a column nobody can
   scan. */
.c-display {
  font-family: var(--c-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.02;
  margin: 0;
}

.c-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* The missing middle of the ramp. Before this, every section heading on the page was an 11px label
   and the scale fell off a cliff from 1.5rem straight to body — a page with no hierarchy between
   "hero" and "small print". */
.c-heading {
  font-family: var(--c-font-label);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
}

.c-note {
  color: var(--c-ink-soft);
  margin: 0;
  max-width: 68ch;
}

.c-figure {
  font-family: var(--c-font-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* A figure that gets SCANNED rather than admired. Grotesque, tabular, sturdy on dark. */
.c-figure--scan {
  font-family: var(--c-font-label);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ══ Shell ══════════════════════════════════════════════════════════════════════════════════════ */
.c-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) calc(var(--s-7) + 5.5rem);
}

/* ── Masthead ───────────────────────────────────────────────────────────────────────────────── */
.c-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-thread);
}

.c-masthead__name {
  font-size: clamp(2.25rem, 6vw, 4rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.c-masthead__meta {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--s-2);
}

.c-masthead__meta dt {
  display: inline;
}
.c-masthead__meta dd {
  display: inline;
  margin: 0 0 0 var(--s-1);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.c-intro {
  margin: var(--s-6) 0 var(--s-5);
  display: grid;
  gap: var(--s-3);
  max-width: 62ch;
}

.c-intro__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--c-ink);
}

/* ── Authority statement ────────────────────────────────────────────────────────────────────────
   The one sentence that explains the whole mechanism, set at display scale because the mechanism is
   the product. */
.c-authority {
  margin: var(--s-6) 0 var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: end;
}

.c-authority__line {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--c-ink);
  max-width: 26ch;
}

.c-authority__line em {
  font-style: italic;
  color: var(--c-gold-lit);
}

.c-authority__reach {
  text-align: right;
}

.c-authority__reach .c-figure {
  display: block;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: var(--c-gold);
}

/* ══ The book, in a sentence ═══════════════════════════════════════════════════════════════════
   This was five figure-over-label cells in a bordered grid — the hero-metric template, and the exact
   "stat row" the direction contract at the top of index.html says this page REFUSES. Hairline rules
   instead of card borders was a mitigation, not a refusal; the structure was still the thing.

   The same five facts, said as one line of prose with the figures inline. Nothing is dropped: the
   count, what is unsettled, what the assistant has taken, what sits beyond the cord, and the total
   exposure are all here, and the sentence can say what a grid cannot — that the last two are the
   ones that matter. */
.c-book {
  margin: var(--s-5) 0 0;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
  max-width: 60ch;
}

.c-book b {
  font-family: var(--c-font-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: 1.35em;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}

.c-book b.c-book__beyond {
  color: var(--c-gold-lit);
}

/* Demo data, marked as demo data. Nothing on screen said the book was invented; PRODUCT.md did, and
   PRODUCT.md is not on the screen during a walkthrough. */
.c-book__synthetic {
  display: block;
  margin-top: var(--s-2);
}

/* ══ The rail and its channels ══════════════════════════════════════════════════════════════════
   The rail is a gold hairline down the left of the claim list. The bead marks the reach of the
   cord — the delegated authority. Every claim is a channel hanging off it. */
.c-rail {
  margin-top: var(--s-6);
  position: relative;
  padding-left: var(--s-5);
}

/* The cord itself: a braided gold cord running the whole rail.
   The braid is a real material (static/cord.svg, tiled vertically), not a coloured line. It was a
   flat 2px rule first, and a flat rule is not a cord — the world names BRAIDED gold and a solid
   line was the one thing it definitely is not.

   Deliberately NOT a gradient that stops partway: reach is a property of each CLAIM, not of the
   rail's length, and a cord that fades out halfway reads as "the list ends here". The reach lives
   in the beads, where a broken one sits against forty-one whole ones. */
.c-rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  background: url('/static/cord.svg') repeat-y center / var(--rail-w) auto;
  border-radius: 99px;
}

.c-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

/* ── A channel ──────────────────────────────────────────────────────────────────────────────── */
.c-channel {
  position: relative;
  display: grid;
  /* The money column is sized for its LARGEST member, not its typical one, and every row shares it
     so the figures stay in one tabular column. It was 7rem, which fitted a four-figure claim and let
     the beyond-the-cord row — the biggest number on the page, and the exhibit — spill its glyphs
     across the policyholder's name. */
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4);
  /* Stitched thread, not a table border — the world's positive line vocabulary. */
  border-bottom: 3px solid transparent;
  border-image: url('/static/stitch.svg') 0 0 3 0 repeat;
  transition:
    background 240ms var(--ease-draw),
    padding-left 240ms var(--ease-draw);
}

.c-channel:first-child {
  border-top: 1px solid var(--c-thread);
}

.c-channel:hover {
  background: var(--c-silk);
}

/* The cord entering the channel: a bead on the rail, a gold run into the row. */
.c-channel::before {
  content: '';
  position: absolute;
  left: calc(var(--s-5) * -1 - 1px);
  top: 50%;
  width: var(--bead);
  height: var(--bead);
  margin-top: calc(var(--bead) / -2);
  border-radius: var(--c-radius-bead);
  background: var(--c-gold);
  box-shadow: 0 0 0 4px var(--c-ground);
}

.c-channel::after {
  content: '';
  position: absolute;
  left: calc(var(--s-5) * -1 + var(--bead) - 4px);
  top: 50%;
  height: 1px;
  width: var(--s-4);
  background: var(--c-gold);
  opacity: 0.55;
}

.c-channel__amount {
  font-size: 1.375rem;
  color: var(--c-ink);
}

.c-channel__who {
  min-width: 0;
  /* Load-bearing. The gathered-state ribs are absolutely positioned inside this cell; without a
     positioned ancestor here they resolved against `.c-channel` and laid gold hairlines across the
     money figure — over the one thing on the row that must stay legible. */
  position: relative;
}

.c-channel__holder {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-channel__peril {
  color: var(--c-ink-faint);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.c-channel__state {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-self: end;
}

.c-channel__ref {
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* ── Gathered: the claim was settled. The channel draws in and stays in. ───────────────────────── */
.c-channel--gathered {
  background: var(--c-gold-wash);
  padding-left: var(--s-5);
  box-shadow: var(--shadow-gather);
}

.c-channel--gathered .c-channel__amount {
  color: var(--c-gold-lit);
}

/* The ribs. Drawn, not imagined: five hairlines raking across the gathered channel. */
.c-channel--gathered .c-channel__who::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 calc(var(--s-3) * -1);
  width: var(--s-3);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--c-gold) 0 1px,
    transparent 1px 7px
  );
  opacity: 0.5;
}

/* ── Released: declined. The one state the garment cannot hold. ────────────────────────────────── */
.c-channel--released .c-channel__amount {
  color: var(--c-released);
  text-decoration: line-through;
  text-decoration-color: var(--c-thread-lit);
  text-decoration-thickness: 1px;
}

/* ── Beyond reach: above delegated authority. The cord stops. ───────────────────────────────────
   No alarm colour anywhere — the signal is the ABSENCE of gold where every other row has it. At
   video scale a column of gold beads with one broken gap is unmistakable, and it needs no legend. */
.c-channel--beyond::before {
  background: transparent;
  border: 1px dashed var(--c-thread-lit);
  box-shadow: 0 0 0 4px var(--c-ground);
}

.c-channel--beyond::after {
  background: repeating-linear-gradient(
    to right,
    var(--c-thread-lit) 0 3px,
    transparent 3px 7px
  );
  opacity: 1;
}

/* Beyond the cord, at COMPOSITION scale.
   The signal was an 11px dashed bead and a 10px pill among forty-one solid beads — true, and
   invisible in a recording. The demo viewer is this surface's confirmed primary user, so the row
   itself carries it: taller, on the recessed silk, its bare-thread run drawn the full width of the
   channel. Still no alarm colour anywhere — the signal remains the ABSENCE of gold, just large
   enough to survive being shrunk to a thumbnail. */
.c-channel--beyond {
  background: var(--c-silk);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}

/* The bare thread, running the whole width where the cord should have been. */
.c-channel--beyond .c-channel__state::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--s-2) * -1);
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--c-thread-lit) 0 6px,
    transparent 6px 12px
  );
}

.c-channel--beyond .c-channel__amount {
  color: var(--c-gold-bright);
  font-size: 2rem;
}

.c-beyond-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px dashed var(--c-thread-lit);
  border-radius: var(--c-radius-panel);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── State marks ────────────────────────────────────────────────────────────────────────────── */
.c-state {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

.c-state--gathered {
  color: var(--c-gold-lit);
}
.c-state--released {
  color: var(--c-released);
}

/* ══ The plane — this client's exhibit, rendered as an absence ══════════════════════════════════
   Flat, unlifted, no channel stitched into it, no cord anywhere near it. The one region on the page
   that is not on the rail, because it is the one thing that cannot be pulled. */
.c-plane {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--c-silk-deep);
  border: 1px dashed var(--c-thread);
  border-radius: var(--c-radius-panel);
  display: grid;
  gap: var(--s-3);
}

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

.c-plane__state {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--c-ink-faint);
}

.c-plane__state s {
  text-decoration-color: var(--c-thread-lit);
  text-decoration-thickness: 2px;
}

/* The state ladder. Earned, not ornamental: it is the claim lifecycle, and the point is that step
   02 is unreachable without committing to it. */
.c-ladder {
  display: flex;
  gap: 0;
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.c-ladder__step {
  flex: 1 1 7rem;
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--c-thread);
  position: relative;
  display: grid;
  gap: 2px;
}

.c-ladder__step::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--c-radius-bead);
  background: var(--c-thread-lit);
}

.c-ladder__step--reachable::before {
  background: var(--c-gold);
}

.c-ladder__step--unreachable {
  border-top-style: dashed;
}

.c-ladder__num {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

.c-ladder__name {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.c-ladder__step--unreachable .c-ladder__name {
  color: var(--c-ink-faint);
}

/* ══ The ledger ═════════════════════════════════════════════════════════════════════════════════ */
.c-ledger {
  margin-top: var(--s-7);
}

.c-ledger__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-3);
  font-variant-numeric: tabular-nums;
}

.c-ledger__table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-thread);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.c-ledger__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-thread);
  color: var(--c-ink-soft);
  vertical-align: top;
}

.c-ledger__table td:first-child {
  color: var(--c-ink-faint);
}

.c-ledger__empty {
  padding: var(--s-4) 0;
  color: var(--c-ink-faint);
}

/* The column that is always empty, and the reason this console is the "before". */
.c-ledger__table .c-col-rule {
  color: var(--c-ink-faint);
  font-style: italic;
}

/* ══ The assistant ══════════════════════════════════════════════════════════════════════════════
   Bottom right, hanging on its own cord. Always present, because it is always able to act — that is
   the point being made.

   It is a `<details>`: no JavaScript anywhere in this client, and native disclosure already has the
   keyboard and screen-reader behaviour a hand-rolled toggle would have to reinvent badly.

   Refusing the category default deliberately: this is not a circular bubble that expands into a
   rounded-corner card with a coloured header and speech balloons. It is a panel on a cord, in the
   same hairline-and-thread language as the rest of the page, and the two speakers are separated by
   position and tone rather than by two opposing pill-shaped bubbles. */
.c-agent {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 20;
  width: min(27rem, calc(100vw - var(--s-4) * 2));
  background: var(--c-ground);
  border: 1px solid var(--c-thread);
  border-radius: var(--c-radius-panel);
  box-shadow: var(--shadow-lift);
}

/* The cord it hangs from: a short gold run up out of the panel's top edge. */
.c-agent::before {
  content: '';
  position: absolute;
  top: calc(var(--s-4) * -1);
  right: var(--s-5);
  width: var(--rail-w);
  height: var(--s-4);
  background: var(--c-gold);
}

.c-agent__tab {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* The default disclosure triangle belongs to no design system. */
.c-agent__tab::-webkit-details-marker {
  display: none;
}

.c-agent__tab:hover {
  background: var(--c-silk);
}

.c-agent__title {
  color: var(--c-ink);
  flex: 1 1 auto;
}

.c-agent__model {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}

/* The bead at the end of the cord, and the open/closed affordance.
   It reports state by BRIGHTENING and taking a gold-wash ring, not by moving. An earlier comment
   here claimed a quarter-turn rotation; there was no transform rule to match it, and there could
   not usefully have been one — the bead is a circle, so rotating it is invisible by construction. */
.c-agent__bead {
  width: var(--bead);
  height: var(--bead);
  border-radius: var(--c-radius-bead);
  background: var(--c-gold);
  flex: none;
  transition:
    background 260ms var(--ease-draw),
    box-shadow 260ms var(--ease-draw);
}

.c-agent[open] .c-agent__bead {
  background: var(--c-gold-bright);
  box-shadow: 0 0 0 4px var(--c-gold-wash);
}

.c-agent__body {
  border-top: 1px solid var(--c-thread);
  display: grid;
}

/* column-reverse is load-bearing, not a style choice: it paints the FIRST child at the bottom and
   starts the scroll container there, which is how this panel follows the newest turn with no script.
   `render.rs` emits turns newest-first to match. Changing either without the other silently strands
   the conversation at the top. */
.c-agent__log {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-4);
  padding: var(--s-3);
  max-height: min(46vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-agent__compose {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3);
  border-top: 1px solid var(--c-thread);
}

/* ── One exchange ──────────────────────────────────────────────────────────────────────────────
   Two speakers, told apart by indent and tone. No bubbles: a speech balloon is the one shape this
   whole visual world does not contain. */
.c-turn {
  display: grid;
  gap: var(--s-2);
}

.c-turn__ask {
  margin: 0 0 0 var(--s-4);
  padding-left: var(--s-3);
  border-left: 1px solid var(--c-gold);
  color: var(--c-ink);
}

.c-turn__reply {
  margin: 0;
  color: var(--c-ink-soft);
  /* The assistant answers a question by listing claims one per line. Without this the newlines
     collapse and forty-two claims arrive as a single run-on paragraph — which reads as the model
     having ignored the question rather than as a styling fault. */
  white-space: pre-wrap;
}

/* An outage is not an answer, and must never read as one. */
.c-turn__reply--unreachable {
  color: var(--c-released);
  padding-left: var(--s-3);
  border-left: 1px dashed var(--c-thread-lit);
}

/* ── Waiting ───────────────────────────────────────────────────────────────────────────────────
   Three beads travelling down a cord, not three dots. The generic typing ellipsis belongs to every
   chat product ever shipped; this world already owns a vocabulary for "something is moving along a
   cord", and the wait is the one moment the panel has to say something without words. */
.c-turn__thinking {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding-left: var(--s-4);
  min-height: 1.6em;
}

.c-turn__bead {
  width: 8px;
  height: 8px;
  border-radius: var(--c-radius-bead);
  background: var(--c-gold-deep);
  animation: c-thinking 1.25s var(--ease-draw) infinite;
}

.c-turn__bead:nth-child(2) {
  animation-delay: 0.16s;
}
.c-turn__bead:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes c-thinking {
  0%,
  70%,
  100% {
    background: var(--c-gold-deep);
    transform: translateY(0);
  }
  35% {
    background: var(--c-gold-bright);
    transform: translateY(-4px);
  }
}

/* The question is committed the moment it is asked, so it must read as fully landed while the
   reply is still outstanding — a half-faded pending turn would suggest the question might not have
   been taken, which is the opposite of what just happened. */
.c-turn--pending .c-turn__ask {
  opacity: 1;
}

/* What actually went through the gateway, against what the model claims it did. */
.c-turn__pulls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.c-turn__pull {
  padding: 2px var(--s-2);
  border: 1px solid var(--c-thread);
  border-radius: var(--c-radius-panel);
  color: var(--c-gold-lit);
}

.c-turn__on {
  font-variant-numeric: tabular-nums;
}

.c-turn__pulls--none {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}

.c-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--c-radius-bead);
  background: var(--c-gold);
  flex: none;
}

.c-dot--live {
  background: var(--c-gold-bright);
  box-shadow: 0 0 0 3px var(--c-gold-wash);
}

.c-dot--off {
  background: var(--c-thread-lit);
}

.c-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--c-silk);
  border: 1px solid var(--c-thread);
  border-radius: var(--c-radius-panel);
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink);
  font: inherit;
  caret-color: var(--c-gold-lit);
}

.c-input::placeholder {
  color: var(--c-ink-faint);
}

.c-input:focus-visible {
  border-color: var(--c-gold);
  outline-offset: 1px;
}

/* The committing control is the cord: a bead on a line. */
/* The committing control. It carries the cord: a braided run threading out of its right edge,
   because in this world every control is worked by one. A bare rounded rectangle was a stock
   component wearing the palette. */
.c-pull {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: 1px solid var(--c-gold);
  border-radius: var(--c-radius-panel);
  color: var(--c-gold-lit);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 200ms var(--ease-draw),
    color 200ms var(--ease-draw);
}

.c-pull::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--s-3);
  height: 3px;
  margin-top: -1.5px;
  background: url('/static/cord.svg') repeat-x left center / auto 3px;
  border-radius: 99px;
}

.c-pull:hover {
  background: var(--c-gold);
  color: var(--c-ground);
}

.c-pull:disabled {
  border-color: var(--c-thread);
  color: var(--c-ink-faint);
  cursor: not-allowed;
}

.c-quiet {
  color: var(--c-ink-soft);
  border-color: var(--c-thread);
  text-decoration: none;
}

.c-quiet:hover {
  background: var(--c-silk);
  color: var(--c-ink);
}

/* ══ Motion — one authored moment ═══════════════════════════════════════════════════════════════
   The gather. A settled channel draws in once, from an already-visible default. Nothing else on the
   page animates on load. */
@keyframes c-gather {
  from {
    padding-left: var(--s-4);
    background: transparent;
  }
  to {
    padding-left: var(--s-5);
    background: var(--c-gold-wash);
  }
}

.c-channel--gathered {
  animation: c-gather 520ms var(--ease-draw) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ Narrow ═════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .c-shell {
    padding: var(--s-5) var(--s-3) calc(var(--s-7) + 6.5rem);
  }

  .c-authority {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }

  .c-authority__reach {
    text-align: left;
  }

  .c-rail {
    padding-left: var(--s-4);
  }

  .c-channel {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--s-1);
  }

  .c-channel__amount {
    grid-column: 1 / -1;
  }

  .c-channel::before {
    left: calc(var(--s-4) * -1 - 1px);
  }

  .c-channel::after {
    display: none;
  }

  .c-input {
    flex: 1 1 100%;
    order: 3;
  }
}

/* ══ The decision point ═════════════════════════════════════════════════════════════════════════
   Slides out from the LEFT, mirroring the assistant on the right. Collapsed it is a slim vertical
   spine carrying its mode as rotated caps; opened it is a drawer of instrument modules.

   On this branch every module reports an absence, and that is the point rather than a shortfall:
   the choke point and its count are real, the three reserved fields are real and empty, and the
   modes are named so the shape of the missing thing is visible. Nothing here evaluates anything.
   REQ-013b depends on that staying true. */
/* Full height, not a floating slab centred on the viewport. A centred panel covered the masthead
   and read as something that had landed on the page by accident; a drawer that runs the full edge
   reads as part of the console, and it is the shape the reference instrument pane uses. */
.c-pdp {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  max-width: min(27rem, calc(100vw - var(--s-4)));
  background: var(--c-ground) url('/static/weave.svg') repeat;
  border-right: 1px solid var(--c-thread);
  box-shadow: var(--shadow-lift);
}

/* Collapsed, the drawer is only as wide as its spine. */
/* Collapsed, the drawer is only as wide as its spine, and the spine runs the full edge.
   It is deliberately NOT transparent. It was, and dark-on-dark at the extreme edge of the viewport
   it read as the page border rather than as a thing you could open — the first person to look for
   it could not find it. A control nobody can see is not a control. */
.c-pdp:not([open]) {
  background: var(--c-silk);
}

.c-pdp:not([open]) .c-pdp__tab {
  height: 100vh;
}

/* The cord runs down the closed spine: the loudest thing this world owns, and the cue that the
   edge is attached to something. */
.c-pdp:not([open])::after {
  content: '';
  position: absolute;
  left: var(--s-2);
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  background: url('/static/cord.svg') repeat-y center / var(--rail-w) auto;
  border-radius: 99px;
  opacity: 0.55;
}

.c-pdp:not([open]):hover {
  background: var(--c-gold-wash);
}

.c-pdp:not([open]):hover::after {
  opacity: 1;
}

.c-pdp:not([open]) .c-pdp__spine {
  color: var(--c-ink);
}

/* An explicit "this opens" mark, because a vertical label alone was not reading as an affordance. */
.c-pdp__open-hint {
  writing-mode: vertical-rl;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-lit);
  white-space: nowrap;
}

.c-pdp[open] .c-pdp__open-hint {
  display: none;
}



/* Collapsed: a spine, read bottom-to-top like the spine of a book on a shelf. */
.c-pdp__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-2) var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.c-pdp[open] .c-pdp__tab {
  padding: var(--s-3);
}

.c-pdp__tab::-webkit-details-marker {
  display: none;
}

.c-pdp__tab:hover {
  background: var(--c-silk);
}

.c-pdp__spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

/* The mode, in the spine. Hollow, because nothing is set — the one place on the page where an empty
   ring is the correct reading rather than a loading state. */
.c-pdp__mark {
  width: var(--bead);
  height: var(--bead);
  border-radius: var(--c-radius-bead);
  border: 1px dashed var(--c-thread-lit);
  flex: none;
}

.c-pdp__mode-now {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-thread-lit);
}

.c-pdp[open] .c-pdp__tab {
  flex-direction: row;
  justify-content: space-between;
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-thread);
}

.c-pdp[open] .c-pdp__spine,
.c-pdp[open] .c-pdp__mode-now {
  writing-mode: horizontal-tb;
  transform: none;
}

.c-pdp__body {
  padding: var(--s-3);
  display: grid;
  gap: var(--s-4);
  /* Bounded explicitly rather than by flex. `<details>` lays its non-summary children out through
     an internal slot, so a `flex: 1 1 auto` child of it is not the flex item you think it is — the
     body simply grew past the drawer and the last module became unreachable. `3.25rem` is the open
     tab's height. */
  max-height: calc(100vh - 3.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

/* Dashed, like every other unreachable thing in this world. */
.c-pdp__badge {
  padding: var(--s-1) var(--s-3);
  border: 1px dashed var(--c-thread-lit);
  border-radius: var(--c-radius-panel);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-pdp__module {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 3px solid transparent;
  border-image: url('/static/stitch.svg') 0 0 3 0 repeat;
}

.c-pdp__module:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.c-pdp__status {
  font-family: var(--c-font-display);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  color: var(--c-ink-faint);
}

.c-pdp__code {
  font-family: var(--c-font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--c-gold-lit);
}

.c-pdp__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

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

.c-pdp__empty-mark {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-thread-lit);
}

.c-pdp__modes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

/* Every mode is unavailable, so every mode reads the same: dashed, unlit, stated not offered. */
.c-pdp__mode {
  display: grid;
  gap: 2px;
  padding-left: var(--s-3);
  border-left: 1px dashed var(--c-thread-lit);
}

.c-pdp__mode-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

.c-pdp__mode-what {
  font-size: 0.8125rem;
  color: var(--c-ink-faint);
}

@media (max-width: 760px) {
  .c-pdp {
    max-width: calc(100vw - var(--s-3));
  }

}

/* ── Modes, as a control rather than a list ────────────────────────────────────────────────────
   Rendered from PolicyView, so the same markup serves `main` (all three unavailable) and an
   integration branch (one active, the others selectable). Nothing here knows which it is. */
.c-mode {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--c-thread);
  border-radius: var(--c-radius-panel);
}

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

.c-mode__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

.c-mode__state {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-gold-lit);
  white-space: nowrap;
}

.c-mode__state--off {
  color: var(--c-thread-lit);
}

.c-mode__what {
  font-size: 0.8125rem;
  color: var(--c-ink-faint);
}

/* In force. Gold, because on a wired branch this is the single most important fact in the drawer. */
.c-mode--active {
  border-color: var(--c-gold);
  background: var(--c-gold-wash);
}

.c-mode--active .c-mode__what {
  color: var(--c-ink-soft);
}

/* Dashed, like everything else in this client that cannot be reached. */
.c-mode--unavailable {
  border-style: dashed;
  border-color: var(--c-thread-lit);
}

.c-mode--unavailable .c-mode__label {
  color: var(--c-ink-soft);
}

.c-mode--active.c-mode--unavailable {
  border-style: solid;
}

/* ── A decision, once something is deciding ────────────────────────────────────────────────────
   Never rendered on `main` — there is nothing to render. Written, styled and tested here so an
   integration branch inherits a working feed instead of building one. */
.c-decision {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border-left: 1px solid var(--c-thread-lit);
}

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

.c-decision__outcome {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

/* The difference between "we stopped this" and "we only wrote it down" is the whole of a careful
   rollout. They must never look the same. */
.c-decision__mark {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-decision--enforced {
  border-left-color: var(--c-gold);
}

.c-decision--enforced .c-decision__mark {
  color: var(--c-gold-lit);
}

/* Binding, and it let the action through. A solid edge like an enforced decision — because it WAS
   enforced — but in the released tone rather than gold, so "checked and fine" never competes for
   attention with "checked and stopped". */
.c-decision--acted {
  border-left-color: var(--c-released);
}

.c-decision--acted .c-decision__mark {
  color: var(--c-released);
}

/* Not binding: the verdict was written down and nobody was going to act on it. Dashed, because a
   dashed edge reads as provisional at a glance and this row must never be mistaken for the one
   above it. */
.c-decision--recorded {
  border-left-style: dashed;
}

.c-decision--recorded .c-decision__mark {
  color: var(--c-ink-faint);
}

.c-decision__action,
.c-decision__reason {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}

.c-decision__claim {
  margin-left: var(--s-2);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-faint);
}

.c-decision__rule {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--c-gold-lit);
}

.c-pdp__filled {
  font-size: 0.8125rem;
  color: var(--c-gold-lit);
}

/* The signed version beside the rule that cited it. Quieter than the rule name and set in the
   label face: it is a lookup key, not something anyone reads as words. */
.c-col-rule__ver {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--c-font-label);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
}

/* The reason a claim was settled, under the peril it was settled about. Quieter than the peril and
   in the label face: the peril is a fact about the claim, the basis is something someone wrote. */
.c-channel__basis {
  display: block;
  font-family: var(--c-font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-ink-faint);
}