/* app.css -- the two-pane advisor (makeover floor PR 2). Desktop: the profile pane
   ~320px on the right (the content spec); one column on narrow screens. Brand tokens from
   /static/intake.css, the conversation's look from /advisor/advisor.css. */
.panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
@media (min-width: 60rem) {
  .panes { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .pane-profile { position: sticky; top: 1rem; }
}
/* The conversation is a <main>, and intake.css gives every main max-width: 46rem and margin: 0 auto.
   A grid item with auto margins shrinks to its content, so the column was only as wide as what was
   in it. The token card held it near 46rem until #460 hid that card from an admitted browser; then
   an empty conversation drew the composer about 300 px wide (D63-25). It fills its measure instead:
   46rem, centred, whatever it holds. */
.pane-conversation { width: 100%; }
.convo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.convo-head h2 { overflow-wrap: anywhere; }
#profile-card h2 { text-transform: uppercase; }
/* the fold: the heading is the toggle, with a drawn chevron (no generated text) */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                  justify-content: space-between; gap: 0.75rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; }
.fold > summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem;
                         border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                         transform: rotate(45deg); transition: transform 280ms ease; opacity: 0.8; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold[open] > summary { margin-bottom: 0.75rem; }
.fold > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .fold > summary::after { transition: none; } }
#profile-card .sub { margin-top: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows .row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
             padding: 0.55rem 0; border-top: 1px solid rgba(232, 220, 195, 0.15); }
.rows .label { font-weight: 600; }
.rows .value { grid-column: 1; }
.rows .prov { grid-column: 1; font-size: 0.8rem; color: var(--ink-soft); }
.rows .acts { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 0.6rem;
              align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rows .confirm { font-size: 0.85rem; }
/* THE INLINE EDITOR FITS (Lane A D63, the founder's staging note): Edit puts a select or a field, and
   Save, into the row's actions. In the auto track the longest choice ("Season of Conquest or later")
   pushed the actions past a 320px card and squeezed the row's words to a word a line. While a row is
   being edited its actions take a line of their own under the words, the full width of the row. A
   select keeps the width of its longest choice, so the choice shows whole, and Save goes under it when
   both do not fit; neither is ever wider than the row. */
.rows .row > .acts:has(> select, > input) { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
.rows .acts > select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.rows .acts > input { flex: 1 1 10rem; min-width: 0; max-width: 100%; }
button.text { background: none; border: 0; padding: 0; text-decoration: underline;
              color: inherit; cursor: pointer; font: inherit; }
.chips { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.chip { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-size: 0.9rem; }
/* corpus C-6912, B-design's section 7.1/7.2/7.5: the fact, then the question behind a 1px rule
   (no separator character), the hint as the chip's second line; the desk's glass ground */
.chips .chip { background: var(--g2, transparent); border: 1px solid var(--glass-line, currentColor);
               border-radius: 8px; padding: 0.45rem 0.7rem; }
.chip-fact { color: var(--gold-hi, inherit); }
.chip-q { color: var(--bone, inherit); border-left: 1px solid var(--gold-dim, currentColor);
          padding-left: 10px; }
.chip button.text:first-of-type { color: var(--gold, inherit); }
.chip button.text + button.text { color: var(--bone-mute, inherit); }
.chip-hint { flex-basis: 100%; font-size: 11.5px; color: var(--bone-mute, inherit); }
/* corpus C-6912, B-design's section 7.4: a row's entries stack one per line, each with its own
   provenance; a march's Remove sits at the end of its line */
.rows .entries { grid-column: 1; list-style: none; margin: 0; padding: 0; }
.rows .entry { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem;
               padding: 0.15rem 0; overflow-wrap: anywhere; }
.rows .entry .acts { grid-column: 2; grid-row: 1 / span 2; }
/* THE LIVE REFRESH (Lane A night packet 2026-10-19): the row a save or a Remove just changed
   carries .just -- one brief ember on the row's frame, BEHIND its words (isolation keeps the
   glow under the row's own text). Class A atmosphere (corpus C-4141): the label, the value
   and the provenance never move; only the frame's glow fades in and out, once. Under reduced
   motion it is a still ember edge, and nothing moves. Plainly styled: B-design's to restyle. */
.rows .row.just { position: relative; isolation: isolate; }
.rows .row.just::before { content: ""; position: absolute; inset: 0 -0.5rem; z-index: -1;
                          pointer-events: none; border-radius: var(--r-ctrl, 8px);
                          box-shadow: inset 2px 0 0 var(--gold, #C8A35A);
                          background: linear-gradient(90deg, rgba(200, 163, 90, 0.22),
                                                      rgba(200, 163, 90, 0) 70%);
                          opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rows .row.just::before { animation: row-just 2.4s var(--ease, ease-out) 1 both; }
}
@media (prefers-reduced-motion: reduce) {
  .rows .row.just::before { opacity: 1; background: none; }
}
@keyframes row-just { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.toast { margin-top: 0.75rem; font-size: 0.9rem; }
/* D63 car 2 (Lane A night packet): #459's capture editor in the card's register. Stylesheet
   only: profile_card.js builds it under the rows as label, input, hint, then Save, Full profile,
   Cancel, in that order, so Save is the plate's first button and its one gold action. A plate
   with the briefing card's line and its gold top rule; the label in Cinzel; nothing moves. */
.capture { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.1rem;
           margin: 0.85rem 0 0.25rem; padding: 0.85rem 0.95rem 0.9rem;
           border: 1px solid var(--line, rgba(232, 220, 195, 0.2));
           border-top: 2px solid rgba(201, 162, 39, 0.55); border-radius: 8px; }
.capture-label, .capture input, .capture-hint { flex: 0 0 100%; }
.capture-label { font: 600 0.78rem/1.3 "Cinzel", "Source Serif 4", Georgia, serif;
                 letter-spacing: 0.08em; text-transform: uppercase; }
.capture input { width: 100%; min-width: 0; }
.capture-hint { margin-top: -0.15rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); }
.capture button.text:first-of-type { font-weight: 600; }
@media (max-width: 40rem) { .capture input[type="text"] { font-size: 16px; } }   /* never zooms */
/* the History drawer (CM-A P1): static -- no animation or transition on any of it */
#history-toggle { margin-left: auto; }
.history { margin: 0 0 0.75rem; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-item { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between;
                padding: 0.45rem 0; border-top: 1px solid rgba(232, 220, 195, 0.15); }
.history-open { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
                text-align: left; text-decoration: none; }
.history-title { overflow-wrap: anywhere; text-decoration: underline; }
.history-date { font-size: 0.8rem; color: var(--ink-soft); }
.history-item .confirm { font-size: 0.85rem; }

/* THE WAR-DESK DRESS (Tier A step 4, B-CODE; ORDERS_2026-10-10 B3; Site Design Spec v1_1,
   the normative render, corpus C-6509). Panels, chips and skeletons (B3), then the toast
   (second pass). The build-card frame waits for a build card in the conversation.
   PRESENTATION ONLY: no copy, no element id and no behaviour changes. advisor.js and
   profile_card.js are untouched. This page is served only while ROK_MAKEOVER is on, and
   it now links /app/tokens.css. tokens.css redefines --ink as the PARCHMENT ink, and the
   desk has no parchment surface, so body.desk re-scopes the chrome's and the
   conversation's variables (intake.css, advisor.css) to bone on midnight glass.
   * PANELS: the cards are the render's glass panels.
   * TURNS: the user's question is the F4 block (below). The advisor's turn carries the render's
     gold rule on its left edge (turn-adv).
   * CHIPS: the mode chips advisor.js draws (span.badge.mode) wear the gold-dim pill. An
     abstention draws no chip; that is advisor.js's rule, unchanged.
   * SKELETON (composing): while a turn is in flight advisor.js disables #send. The
     render's three shimmer lines then stand under the conversation, drawn in CSS from
     that state alone. No element, no copy, no claim, and gone the moment #send returns.
   Motion loops only under prefers-reduced-motion: no-preference. Under reduce the
   skeleton holds still. */
body.desk {
  --ink: var(--bone); --ink-soft: var(--bone-mute); --line: var(--glass-line);
  --bg: var(--g1); --card: transparent; --accent: var(--gold);
  color: var(--bone);
  font-family: "Albert Sans", system-ui, sans-serif;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(19,30,56,.95), transparent 62%),
    radial-gradient(900px 560px at 92% 12%, rgba(13,21,38,.9), transparent 60%),
    var(--g1);
  min-height: 100vh;
}
body.desk a { color: var(--bone); text-decoration-color: var(--gold-dim); }
body.desk h2 { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: .05em;
  color: var(--bone); }
body.desk .hint, body.desk .sub, body.desk .rows .prov { color: var(--bone-mute); }

/* panels */
body.desk .pane > .card {
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--r-panel); backdrop-filter: blur(8px); padding: 20px 22px;
}
body.desk .pane > .card + .card { margin-top: 1rem; }
body.desk .rows .row { border-top-color: var(--glass-line); }

/* inputs and buttons */
body.desk input[type="text"], body.desk input[type="password"], body.desk select {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-ctrl);
  padding: 12px 14px; color: var(--bone); font: 400 15px "Albert Sans", system-ui, sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
body.desk select option { background: var(--g2); color: var(--bone); }
body.desk input::placeholder { color: var(--bone-mute); }
body.desk input:focus, body.desk select:focus { border-color: var(--gold);
  box-shadow: var(--glow-soft); outline: none; }
body.desk button.primary {
  border: 0; border-radius: var(--r-ctrl); padding: 12px 22px; color: var(--g1); cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  font: 600 15px "Albert Sans", system-ui, sans-serif;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    filter var(--t-fast);
}
body.desk button.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow); }
body.desk button.primary:active:not(:disabled) { transform: translateY(1px); }
body.desk button.primary:disabled { filter: saturate(.4) brightness(.75); cursor: progress; }
body.desk button.text { color: var(--bone-mute); text-decoration-color: var(--gold-dim); }
body.desk button.text:hover { color: var(--bone); }
/* D63 car 2: the capture editor's plate on the desk: the toast's g2 ground, glass line and gold
   top rule; Save a gold-ruled pill, Full profile and Cancel the desk's quiet text buttons */
body.desk .capture { background: var(--g2); border-color: var(--glass-line);
  border-top: 2px solid var(--gold); border-radius: var(--r-ctrl); }
body.desk .capture-label { color: var(--gold-hi); font-size: 12px; }
body.desk .capture-hint { color: var(--bone-mute); font-size: 12px; }
body.desk .capture input[type="text"] { padding: 10px 12px; }
body.desk .capture button.text:first-of-type { border: 1px solid var(--gold-dim); border-radius: 999px;
  padding: 5px 16px; color: var(--gold-hi); text-decoration: none; }
body.desk .capture button.text:first-of-type:hover { border-color: var(--gold); color: var(--bone); }
/* a phone keeps the field at 16px, so focusing it never zooms the page */
@media (max-width: 40rem) { body.desk .capture input[type="text"] { font-size: 16px; } }

/* turns */
body.desk .turn { border: 0; background: transparent; padding: .4rem 0; margin: .9rem 0; }
body.desk .turn.advisor {
  /* the gold rule is the reading-line seam's ::before (below), drawn in full by default */
  border-left: 0; position: relative; padding-left: 18px; font-size: 15.5px;
}
body.desk .turn.error { border-left: 2px solid var(--crimson); padding-left: 16px;
  color: var(--bone); }
body.desk details.tier summary { color: var(--gold); }

/* chips -- ONE FACE IN THE ROW (the founder, Lane A D66-42; corpus C-6254 as the rule): the basis chips wear
   corpus C-6254's Cinzel caps, the tier chip's face and size, and stay outlined where the tier chip is filled */
body.desk .badge.mode {
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 4px 12px 3px;
  color: var(--gold-hi); background: transparent; font: 600 11.5px/1.25 "Cinzel", serif;
  letter-spacing: .1em; text-transform: uppercase;
}

/* THE SOW-VERIFIED SEAL (Lane A D63; the founder's preview of the seal mock's B,
   corpus C-6911): a seal, not another chip -- a 4 px corner, a double rule (the gold outline, a
   ground gap, a faint gold hairline), the brand mark at 18 px on a soft glow, the label in
   Cinzel 600 caps (the text is flair's own; the caps are drawn here). advisor.css sets it at
   the answer's foot behind its hairline; here it stands 10 px above the turn's foot. */
body.desk .turn.advisor .sow-seal { margin: 0 0 calc(10px - .4rem); padding-top: 10px; }
/* THE S REMINDER (Lane A D64-71, D65-51): under a SHORT read, behind a gold hairline, the ratified line
   in the quiet ink, and beneath it the plans page's gold Companion button (advisor.js draws both) */
body.desk .turn.advisor .s-note { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid rgba(200, 163, 90, .28);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.desk .turn.advisor .s-reminder { margin: 0; color: var(--bone-mute); font-size: 14.5px; line-height: 1.45; }
body.desk button.primary.companion { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }   /* wraps, never clips (D67-42) */
/* THE TIER CHIP (the founder, D66): a SHORT read's first chip, gold-FILLED where the basis chips are
   outlined, in corpus C-6254's Cinzel caps, the dark ink on the gold (the plans page's button's pair) */
body.desk .badge.tier {
  border: 1px solid var(--gold); border-radius: 999px; padding: 4px 12px 3px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #241E12;
  font: 700 11.5px/1.25 "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 8px rgba(200, 163, 90, .3);
}
/* a short read's chip row wraps with air between its rows (a phone puts the two chips on two lines) */
body.desk .turn.advisor .meta:has(> .badge.tier) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.desk .turn.advisor .meta:has(> .badge.tier) > .badge { margin-right: 0; }
body.desk .sow-badge {
  gap: 7px; padding: 3px 10px 3px 5px; border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--g1), inset 0 0 0 3px rgba(200, 163, 90, .32);
  background: radial-gradient(circle at 14px 50%, rgba(200, 163, 90, .18), transparent 30px);
  color: var(--gold-hi); font: 600 10.5px/1 "Cinzel", Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
body.desk .sow-badge img { width: 18px; height: 18px; }

/* the toast (Tier A step 4, second pass; spec v1_1 section 5: "toast rise (280ms, gold top
   rule)"). profile_card.js sets the text and unhides it; the dress only draws it. It is the
   render's toast: the g2 ground, a glass line and the gold top rule. Every message, an
   error included, wears gold, because crimson is rationed to badges and verdicts (R-D6). */
body.desk .toast:not([hidden]) {
  display: block; margin-top: .9rem; padding: 12px 16px;
  background: var(--g2); border: 1px solid var(--glass-line); border-top: 2px solid var(--gold);
  border-radius: var(--r-ctrl); color: var(--bone); font-size: 14.5px; line-height: 1.45;
}

/* the composing skeleton: drawn from #send's disabled state, nothing else -- but not while the composer is
   PAUSED (Lane A D64-25's zero-balance turn): #send stays disabled until the reset and no answer is being
   composed (advisor.js marks #ask data-paused for the pause) */
body.desk #card-chat:has(#send:disabled):where(:not(:has(#ask[data-paused]))) .turns::after {
  content: ""; display: block; height: 58px; margin: .9rem 0 0 18px; border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(240,234,218,.06) 25%, rgba(240,234,218,.16) 50%, rgba(240,234,218,.06) 75%) 0 0 / 200% 13px repeat-x,
    linear-gradient(90deg, rgba(240,234,218,.06) 25%, rgba(240,234,218,.16) 50%, rgba(240,234,218,.06) 75%) 0 22px / 200% 13px repeat-x,
    linear-gradient(90deg, rgba(240,234,218,.06) 25%, rgba(240,234,218,.16) 50%, rgba(240,234,218,.06) 75%) 0 44px / 200% 13px repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 92% 13px no-repeat,
    linear-gradient(#000 0 0) 0 22px / 78% 13px no-repeat,
    linear-gradient(#000 0 0) 0 44px / 85% 13px no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 92% 13px no-repeat,
    linear-gradient(#000 0 0) 0 22px / 78% 13px no-repeat,
    linear-gradient(#000 0 0) 0 44px / 85% 13px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  body.desk #card-chat:has(#send:disabled):where(:not(:has(#ask[data-paused]))) .turns::after { animation: desk-skel 1.3s linear infinite; }
  body.desk .toast:not([hidden]) { animation: desk-toast var(--t-mid) var(--ease) both; }
}
@keyframes desk-toast { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes desk-skel { to { background-position: -200% 0, -200% 22px, -200% 44px; } }
@media (prefers-reduced-motion: reduce) {
  body.desk input, body.desk select, body.desk button.primary { transition: none; }
  body.desk button.primary:hover:not(:disabled),
  body.desk button.primary:active:not(:disabled) { transform: none; }
}

/* F4, THE QUESTION BLOCK (founder session verdict corpus C-6911 F4; the founder's pick, variant A
   "The Sealed Question", Lane A D62-33..41). The player's submitted question is a gold-framed
   block: the message separator and the page's one signature moment. It is the player's own
   words, in bone, left-set; no copy is added. The latest question PINS: it stays at the top
   while its answer scrolls under it, and it lets go the moment the next question is asked.
   Only the latest pins, because every pinned block stands on the same line: a short follow-up
   pinned over a taller question would leave the taller one's foot showing beneath it.
   THE MOMENT, once, as the line is added (the moment they ask, never when an answer arrives;
   corpus C-4141): the block rises 8 px, and the frame draws itself once around it (700 ms) and
   fades into the resting line. Nothing in the answer moves. Under reduced motion the frame is
   simply there.
   A question with no break in it (a pasted link) breaks anywhere inside the frame; main's
   right-set line ran off the page sideways with it. */
body.desk .turn.user {
  position: relative;
  text-align: left; color: var(--bone); font: 500 16px/1.5 "Albert Sans", system-ui, sans-serif;
  margin: 1.4rem 0 1rem; padding: 14px 18px; overflow-wrap: anywhere;
  border: 1px solid var(--gold); border-radius: 10px;
  background: linear-gradient(180deg, #111b2f, var(--g2));
  box-shadow: inset 0 1px 0 rgba(240,215,158,.18), 0 10px 26px rgba(0,0,0,.55);
}
body.desk .turns > .turn.user:not(:has(~ .turn.user)) { position: sticky; top: 12px; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  body.desk .turn.user { animation: qb-rise 420ms cubic-bezier(.2,.7,.2,1) both; }
  body.desk .turn.user::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    pointer-events: none;
    background: conic-gradient(from -90deg, var(--gold-hi) var(--qb-sweep), transparent 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: qb-draw 700ms ease-out both;
  }
}
@property --qb-sweep { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes qb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qb-draw { 0% { --qb-sweep: 0%; opacity: 1; } 85% { --qb-sweep: 100%; opacity: 1; }
                     100% { --qb-sweep: 100%; opacity: 0; } }

/* THE HERO BAND (founder pick, Variant A "the Banner"; Lane A order 2026-10-13, from the
   reviewed set under directive/design/review/, v0_1, as reviewed). Full width above both
   panes:
   - the SAGE OF WAR wordmark, centred, in the brand face (no crest asset exists yet), over
     the lander's midnight-ember field;
   - one stately line, the brand's own "We compute. You conquer.";
   - two etched slots in the foot corners: the profile context on the left (the account
     card's kingdom and season rows, filled by app.js) and the advisor's name on the right
     (interface-only, corpus C-6630). No additions beyond the reviewed composition.

   IT SETTLES AT ASK TIME ONLY. The state is read from the user's own lines in the
   conversation, so it changes the moment a question is added, never when an answer arrives:
     fresh    no question yet        152 px (a phone: 120)
     settled  one or two questions   104 px (a phone: 88); the line folds away
     compact  three or more          60 px; one quiet bar
   The size snaps once at that moment (no box transitions). Only ornaments fade (the seam
   and the embers), and only at the step to compact.

   CLASS A / CLASS B (corpus C-4141). The embers are the band's one motion, and they keep
   rising while an answer is in flight: the living surface never pauses (Lane A D65-76, which
   retires the old in-flight hold), and the wait is the moment it is needed. The wordmark, the
   line and both slots never animate or transition. Under reduced motion the band is fully
   static: no embers, no fades. */
body.desk .hero-band {
  position: relative; z-index: 1; overflow: hidden; box-sizing: border-box;
  display: grid; align-content: center; justify-items: center; text-align: center;
  height: 152px; max-width: none; margin: 0 -1rem; padding: 0 1.25rem;
  border-bottom: 1px solid var(--glass-line);
  background:
    radial-gradient(600px 220px at 50% 120%, rgba(200,163,90,.16), transparent 70%),
    radial-gradient(900px 300px at 80% -40%, var(--g3), transparent 65%),
    var(--g1);
}
body.desk .hero-band .hb-wordmark {
  margin: 0; font: 700 34px/1 "Cinzel", serif; letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--parchment);
  text-shadow: 0 0 18px rgba(200,163,90,.18);
}
body.desk .hero-band .hb-seam {
  width: min(16rem, 60%); height: 1px; margin-top: .75rem;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 12%, var(--gold-hi) 50%,
    var(--gold-dim) 88%, transparent);
  box-shadow: 0 0 12px rgba(200,163,90,.35);
}
body.desk .hero-band .hb-line {
  margin: .6rem 0 0; font: 600 11.5px/1 "Cinzel", serif; letter-spacing: .4em; text-indent: .4em;
  text-transform: uppercase; color: #8F887C;
}
/* the slots: etched, quiet, reserved (an empty slot keeps its line), never animated */
body.desk .hero-band .hb-context,
body.desk .hero-band .hb-name {
  position: absolute; bottom: 14px; margin: 0; min-height: 1em;
  font: 500 11.5px/1 "Albert Sans", system-ui, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-mute);
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(240,215,158,.08);
}
body.desk .hero-band .hb-context { left: 1.5rem; text-align: left; }
body.desk .hero-band .hb-name { right: 1.5rem; text-align: right; color: var(--gold); }
/* FD-2, the account menu (Lane A 2026-10-17, corpus C-6905): Profile, Plans, Sign out, in the
   band's top-right corner, etched like the slots and never animated. Sign out is a button drawn
   as a link. On a phone it is the band's first row, above the wordmark. */
body.desk .hero-band .hb-account {
  position: absolute; top: 12px; right: 1.5rem; margin: 0;
  font: 500 11px/1 "Albert Sans", system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-mute);
}
body.desk .hero-band .hb-account a,
body.desk .hero-band .hb-account button {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--bone-mute); text-decoration: none;
}
body.desk .hero-band .hb-account a:hover, body.desk .hero-band .hb-account a:focus-visible,
body.desk .hero-band .hb-account button:hover, body.desk .hero-band .hb-account button:focus-visible {
  color: var(--parchment); text-decoration: underline;
}
/* THE APP'S SHARED NAV (Lane A D65-80): Advisor, Guides, Plans, Account -- one partial on every
   app page (execution/web/partials/app_nav.html, stamped by tools/app_nav.py). On the band it
   takes the top-left corner, mirroring FD-2's menu in the top-right, etched the same way and
   never animated; the page's own link is gold. */
body.desk .hero-band .app-nav {
  position: absolute; top: 12px; left: 1.5rem; margin: 0;
  font: 500 11px/1 "Albert Sans", system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-mute);
}
body.desk .hero-band .app-nav a { color: var(--bone-mute); text-decoration: none; }
body.desk .hero-band .app-nav a + a::before {     /* the partial's separators are drawn, never typed */
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: middle; margin: 0 .55em 0 .1em; background: var(--bone-mute); }
body.desk .hero-band .app-nav a[aria-current="page"] { color: var(--gold); }
body.desk .hero-band .app-nav a:hover, body.desk .hero-band .app-nav a:focus-visible {
  color: var(--parchment); text-decoration: underline;
}
/* THE SLOTS NEVER COLLIDE (founder P1, corpus C-6911 rider: a long context line ran into the
   wordmark on a narrow desktop, "E OF WAR" with SAGE stranded at the edge). Each slot owns
   its half of the band, less the corner inset and a gap; in the foot corners a line longer
   than its half ends in an ellipsis, so the two slots can never meet each other. */
body.desk .hero-band .hb-context,
body.desk .hero-band .hb-name {
  max-width: calc(50% - 2.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* THE KINGDOM NUMBER ALWAYS SURVIVES TRUNCATION (Lane A D62-25). app.js writes the line as two pieces:
   the kingdom (.hb-k), which never shrinks, and the season with its separator (.hb-s), which gives way
   first and carries the ellipsis. The season may break anywhere when its room is measured (so its column
   asks only for the kingdom's width) but shows one line, clamped; pre-wrap keeps the space before its
   separator. Where the line wraps instead (compact, desktop) nothing is cut. */
body.desk .hero-band .hb-context { display: flex; }
body.desk .hero-band .hb-k { flex: none; white-space: nowrap; }
body.desk .hero-band .hb-s { flex: 0 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; line-clamp: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the ember field: the lander's, fewer and slower, inside the band only */
body.desk .hero-band .hb-embers { position: absolute; inset: 0; pointer-events: none; }
body.desk .hero-band .hb-embers span {
  position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-hi); opacity: 0; filter: blur(.4px);
}
body.desk .hero-band .hb-embers span:nth-child(1) { left: 8%;  --dx: 12px;  --d: 13s; --l: -2s; }
body.desk .hero-band .hb-embers span:nth-child(2) { left: 19%; --dx: -16px; --d: 17s; --l: -9s; }
body.desk .hero-band .hb-embers span:nth-child(3) { left: 31%; --dx: 8px;   --d: 15s; --l: -5s; }
body.desk .hero-band .hb-embers span:nth-child(4) { left: 69%; --dx: -10px; --d: 16s; --l: -12s; }
body.desk .hero-band .hb-embers span:nth-child(5) { left: 81%; --dx: 14px;  --d: 12s; --l: -7s; }
body.desk .hero-band .hb-embers span:nth-child(6) { left: 92%; --dx: -6px;  --d: 18s; --l: -3s; }
@keyframes hb-ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .8; }
  65% { opacity: .4; } 100% { transform: translate(var(--dx), -170px); opacity: 0; } }

/* the states, from the user's own lines: one asked (settled), three asked (compact) */
body.desk:has(.turns > .turn.user) .hero-band { height: 104px; }
body.desk:has(.turns > .turn.user) .hero-band .hb-line { opacity: 0; height: 0; margin: 0; }
body.desk:has(.turns > .turn.user) .hero-band .hb-wordmark { font-size: 26px; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band { height: 60px; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-wordmark { font-size: 18px; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-seam { opacity: 0; height: 0; margin: 0; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-embers { opacity: 0; }
/* compact: the slots share the wordmark's row, so each stops 24 px short of it (the compact
   wordmark is under 12rem wide, 6rem a side) and wraps rather than reaching it */
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-context,
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-name {
  bottom: auto; top: 50%; transform: translateY(-50%);
  max-width: calc(50% - 9rem); white-space: normal; overflow: visible; line-height: 1.25;
  overflow-wrap: anywhere; }
/* FD-2's menu beside them: on a narrow desktop a compact name wraps to two lines at most (under
   29 px, centred on the 60 px band, so its first line starts at 15 px or lower); the menu takes
   the phone's 9 px size and a 3 px inset, ending at 12 px, clear of the name at every width */
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-account { top: 3px; font-size: 9px; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .app-nav { top: 3px; font-size: 9px; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-context { display: block; }
body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-s { display: inline; -webkit-line-clamp: none;
  line-clamp: none; white-space: normal; overflow: visible; }

/* a phone: 120 / 88 / 60 px; the slots stacked under the wordmark, and side by side on
   one line once compact. Each slot is ONE line in every state, and a line longer than its
   room ends in an ellipsis, as in the desktop foot corners (Lane A D62-19): wrapped, a long
   kingdom or name line ran past the band's foot at 280-390 px and the band cut it off, while
   the slot's own box stayed inside */
@media (max-width: 40rem) {
  body.desk .hero-band { height: 120px; }
  /* one line, always: the wordmark is about ten of its own em wide, so below 320 the fresh
     size steps down with the window, leaving room for the band's padding and a desktop
     scrollbar (a docked DevTools pane makes a 289 px desktop window; there 24 px wrapped
     and the band cut the top line off) */
  body.desk .hero-band .hb-wordmark {
    font-size: min(24px, calc((100vw - 4rem) / 10)); letter-spacing: .24em; white-space: nowrap; }
  body.desk .hero-band .hb-line { font-size: 10px; letter-spacing: .3em; }
  body.desk .hero-band .hb-context, body.desk .hero-band .hb-name {
    position: static; margin-top: .45rem; order: 1;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.desk .hero-band .hb-context { justify-content: center; }
  body.desk .hero-band .hb-name { order: 2; }
  /* FD-2: the account menu is the first row. It keeps 7 px under it, because the wordmark's
     Cinzel rises above its own line box: with no gap the menu sat on the letters at every
     phone width (measured -3 to -4 px, Code B Design 2026-10-19, Lane A night packet). The
     gap once cost a WRAPPED context its second line's foot when compact; the phone slots are
     one line since Lane A D62-19, so it now costs nothing. The stacked slots close up a little
     to make room */
  body.desk .hero-band .hb-account {
    position: static; order: -1; grid-column: 1 / -1; margin-bottom: 7px; font-size: 9px; }
  /* the shared nav (D65-80) shares that first row: the nav at its start, the menu at its end */
  body.desk .hero-band .app-nav {
    position: static; grid-row: 1; grid-column: 1 / -1; justify-self: start; margin-bottom: 7px;
    font-size: 9px; letter-spacing: .08em; }
  body.desk .hero-band .hb-account { grid-row: 1; justify-self: end; letter-spacing: .08em; }
  body.desk .hero-band .hb-context, body.desk .hero-band .hb-name { margin-top: .3rem; }
  body.desk:has(.turns > .turn.user) .hero-band { height: 88px; }
  body.desk:has(.turns > .turn.user) .hero-band .hb-wordmark { font-size: 20px; }
  /* compact on a phone: the wordmark over one line holding both slots. Each column grows to
     its line and no further, so a short name ("Sage") leaves the rest of the row to the
     kingdom line, and two long lines share it equally */
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band {
    grid-template-columns: minmax(min-content, max-content) minmax(0, max-content); column-gap: 1rem;
    justify-content: center; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-wordmark {
    grid-column: 1 / -1; font-size: 16px; }
  /* the shared nav (D65-80) and FD-2's menu keep the first row, each in its own column so the
     shrink-wrapped grid makes room for both, and the nav leaves out the page you are on */
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .app-nav { grid-column: 1; white-space: nowrap; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-account { grid-column: 2; white-space: nowrap; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .app-nav a[aria-current="page"] { display: none; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .app-nav a[aria-current="page"] + a::before {
    content: none; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-line,
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-seam { display: none; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-context,
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-name {
    margin-top: .35rem; transform: none; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-context { display: flex; }
  body.desk:has(.turns > .turn.user ~ .turn.user ~ .turn.user) .hero-band .hb-s { display: -webkit-box; -webkit-line-clamp: 1;
    line-clamp: 1; white-space: pre-wrap; overflow: hidden; }
}
/* the narrowest phones: the nav leaves out the page you are on, and both rows close their
   letters up, so the nav and the menu share the row without meeting (measured 320-375) */
@media (max-width: 23.4rem) {
  body.desk .hero-band .app-nav a[aria-current="page"] { display: none; }
  body.desk .hero-band .app-nav a[aria-current="page"] + a::before { content: none; }
}
@media (max-width: 21rem) {
  body.desk .hero-band .app-nav, body.desk .hero-band .hb-account { letter-spacing: .02em; }
}

/* motion: atmosphere only, and only under no-preference */
@media (prefers-reduced-motion: no-preference) {
  body.desk .hero-band .hb-embers span { animation: hb-ember var(--d) linear var(--l) infinite; }
  body.desk .hero-band .hb-seam, body.desk .hero-band .hb-embers {
    transition: opacity var(--t-slow) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  body.desk .hero-band .hb-embers { display: none; }
}

/* THE ADVISOR SURFACE (night orders 2026-10-12 car 1; founder + Lane A directive on the
   corpus C-4141 doctrine, superseding its "the advisor is utilitarian" reading; the guides ember
   system, execution/site/guides_build.py, ported). ZERO JAVASCRIPT for every motion here.

   CLASS A / CLASS B (corpus C-4141, as ratified). Motion is ATMOSPHERE only (Class A): the seam,
   the ignition of section heads and evidence pills, the margin embers. Every DATA element
   (Class B) is static, always: the board tables (.board), every number and the sentences
   that carry them (.verdict, .answer), the receipts and why folds (details.tier), absences,
   questions and banners. No rule below may name a Class B selector with an animation; the
   tests hold that.

   THE STREAMING RULE (RATIFIED, Lane A 2026-10-12, written here so it survives refactors):
   the loading skeleton and ANY future streaming text stay PLAIN until the answer is
   complete. A turn draws today as one whole element when its reply arrives; if a streaming
   path ever lands, it must render its text undecorated and opt into the seam only once the
   answer is complete. Nothing here decorates text while it arrives.

   THE READING LINE. One line, 55% down the scrolling box. The /app page scrolls as a document
   (the pane is not its own scroller), so the box is the viewport, which on this layout is
   also the answer pane's visible height. Each answer's seam draws as the answer rises into
   view(block 55% 12%), the band between the reading line and the bottom 12%: from its top
   meeting the band's foot until it reaches the reading line (entry), so an answer that has
   reached the line stays drawn wherever the reader rests, the top of the page included.

   THE ARRIVAL (night orders 2026-10-13 car 1; founder verdict ADJUST on staging). An answer
   is added where the reader already is: the composer sits under the conversation and the
   page does not scroll, so the first answer, and any answer added high in the window, is
   born past the band and a scroll timeline alone paints it finished from its first frame
   (MEASURED, Chromium 141 at 1366x768 and 1920x1080: born at 41% / 29% of the window, seam
   at 100% and the pill frozen mid-glow 20 ms after arrival). So every answer's seam ALSO
   draws once in time when the answer arrives (seam-arrive, on the `scale` property, which
   multiplies the scroll draw), and its pill and heads bloom once in time behind it. An
   answer born in view draws in front of the reader; one born below the fold arrives with
   its scroll draw at zero and draws as it is scrolled up, as before. The answer arrives
   whole; only the seam and the glows move after it has (the streaming rule above).

   THE SETTLED STATE IS THE BASE STATE. Seam drawn, heads and pills at their faint glow. A
   browser without scroll timelines, a reduced-motion user, or a page too short to scroll sees
   exactly that and never a half-drawn page (the guides law). Desktop margin embers drift in
   the gutters either side of the 46rem conversation column, never over text, and stop on a
   phone and under reduced motion. */
body.desk .turn.advisor::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-dim));
  box-shadow: 0 0 8px rgba(200, 163, 90, .35); transform-origin: top; pointer-events: none;
}
body.desk .turn.advisor .badge.mode { box-shadow: 0 0 6px rgba(200, 163, 90, .22); }
body.desk .turn.advisor .questions h4,
body.desk .turn.advisor .gaps h4 { text-shadow: 0 0 6px rgba(200, 163, 90, .25); }

/* the margin embers: desktop gutters only (the conversation column is intake.css's 46rem,
   centred in the grid's first track; the rail is 320px, or the collapsed tab). They rise from the
   phone breakpoint up (Lane A D65-78: "a tablet is not a phone"): with the sidebars on, in the
   lanes the tracks leave at every desk width (sidebars.css); without them the centred column
   leaves its gutters only from 80rem, so below that they stay down. */
body.desk .margin-embers { display: none; }
body.desk .panes, body.desk footer { position: relative; z-index: 1; }
@media (min-width: 60rem) {
  body.desk .margin-embers {
    --rail: 320px; --gutter: calc((100vw - 3rem - var(--rail) - 46rem) / 2);
    display: block; position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  }
  body.desk:has(.panes.rail-collapsed) .margin-embers { --rail: 2.75rem; }
  body.desk .margin-embers span {
    position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
    background: #F0D79E; opacity: 0; filter: blur(.4px);
  }
  /* five, slower than the hero's fourteen: 23-33s crossings (the guides' cadence class) */
  body.desk .margin-embers span:nth-child(1) { left: calc(1rem + var(--gutter) * .30); --dx: 10px; }
  body.desk .margin-embers span:nth-child(2) { left: calc(1rem + var(--gutter) * .68); --dx: -14px; }
  body.desk .margin-embers span:nth-child(3) { left: calc(1rem + var(--gutter) * 1.25 + 46rem); --dx: 8px; }
  body.desk .margin-embers span:nth-child(4) { left: calc(1rem + var(--gutter) * 1.62 + 46rem); --dx: -12px; }
  body.desk .margin-embers span:nth-child(5) { left: calc(1rem + var(--gutter) * .50); --dx: 16px; }
}
@media (min-width: 60rem) and (max-width: 79.99rem) {
  body.desk:not(.sb-on) .margin-embers { display: none; }
}

/* the account rail collapses to the right edge (finding #4; the state is app.js's, in-page) */
body.desk .rail-toggle { display: none; }
@media (min-width: 60rem) {
  body.desk .rail-toggle {
    display: block; position: absolute; top: 22px; left: -14px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--g2); border: 1px solid var(--glass-line); color: var(--gold);
  }
  body.desk .rail-toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translate(-65%, -50%) rotate(-45deg);
  }
  body.desk .rail-toggle:hover { border-color: var(--gold-dim); }
  body.desk .rail-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  body.desk .panes.rail-collapsed { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  body.desk .panes.rail-collapsed #profile-card { display: none; }
  body.desk .panes.rail-collapsed .rail-toggle { left: 4px; }
  body.desk .panes.rail-collapsed .rail-toggle::after { transform: translate(-35%, -50%) rotate(135deg); }
}

/* the footer pin: Terms / Privacy / Refund locked to the viewport's foot at every size
   (finding #6). The page keeps room for it, so it never sits over the last line. */
body.desk { padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
body.desk footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; max-width: none; margin: 0;
  padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px)); text-align: center;
  background: rgba(8, 13, 24, .88); border-top: 1px solid var(--glass-line);
  backdrop-filter: blur(8px);
}
body.desk footer p { margin: 0; }

@keyframes seam-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes seam-arrive { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes pill-ignite {
  0% { border-color: var(--gold-dim); box-shadow: none; }
  30% { border-color: var(--gold-hi); box-shadow: 0 0 12px rgba(240, 215, 158, .7), 0 0 26px rgba(200, 163, 90, .35); }
  100% { border-color: var(--gold-dim); box-shadow: 0 0 6px rgba(200, 163, 90, .22); }
}
@keyframes head-ignite {
  0% { text-shadow: none; }
  30% { text-shadow: 0 0 14px rgba(240, 215, 158, .85), 0 0 34px rgba(200, 163, 90, .45); }
  100% { text-shadow: 0 0 6px rgba(200, 163, 90, .25); }
}
@keyframes margin-ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .7; }
  70% { opacity: .35; } 100% { transform: translate(var(--dx), -92vh); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* each list pairs the scroll draw with the one arrival draw (THE ARRIVAL, above) */
    body.desk .turn.advisor::before {
      animation: seam-draw linear both, seam-arrive 1.2s var(--ease) both;
      animation-timeline: view(block 55% 12%), auto;
      animation-range: entry 0% entry 100%, normal;
    }
    /* the bloom: from crossing the reading line until 20% of the box past it; on arrival the
       pill blooms as the seam leaves it and the heads as the seam runs down to them */
    body.desk .turn.advisor .badge.mode {
      animation: pill-ignite linear both, pill-ignite 1.4s ease-out .15s backwards;
      animation-timeline: view(block 35% 45%), auto;
      animation-range: cover 0% cover 100%, normal;
    }
    body.desk .turn.advisor .questions h4,
    body.desk .turn.advisor .gaps h4 {
      animation: head-ignite linear both, head-ignite 1.4s ease-out .7s backwards;
      animation-timeline: view(block 35% 45%), auto;
      animation-range: cover 0% cover 100%, normal;
    }
  }
  @media (min-width: 60rem) {
    body.desk .margin-embers span { animation: margin-ember linear infinite; }
    body.desk .margin-embers span:nth-child(1) { animation-duration: 26s; animation-delay: -3s; }
    body.desk .margin-embers span:nth-child(2) { animation-duration: 31s; animation-delay: -17s; }
    body.desk .margin-embers span:nth-child(3) { animation-duration: 23s; animation-delay: -9s; }
    body.desk .margin-embers span:nth-child(4) { animation-duration: 33s; animation-delay: -24s; }
    body.desk .margin-embers span:nth-child(5) { animation-duration: 28s; animation-delay: -12s; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.desk .margin-embers { display: none; }
}

/* CM-2 S5: the advisor's name on its bubble (static; the Class B law) */
body.desk .turn.advisor .who { display: block; font-size: .8rem; letter-spacing: .04em; color: var(--gold); margin-bottom: .25rem; }

/* =====================================================================================
   CM-2 S3 + S4 -- KNOWLEDGE CARDS AND CHARTS WITH WOW (B-CODE; ROK_CM_Design_Spec_v1_0 §1, §2;
   Lane A rulings 2026-10-16). The selectors are the mockup sheet's own
   (directive/design/review/cm_v1_0/cm.css, "written the way B-code will ship it"), copied, not
   re-interpreted; where the build differs it says why: the term is an anchor to its card (rule 7), the
   ✓ / ✕ of a seal are DOM text (CSS never writes text), the phone column label is the cell's
   own .cell-label DOM, and a turn contains its floated card. Every width is set through the
   constructed stylesheet advisor.js keeps (the CSP bans inline styles). The card's arrival is
   the only motion, under no-preference only; every chart and table is Class B, static.
   ===================================================================================== */
body.desk .turn.advisor.contract { display: flow-root; }
body.desk .turn.advisor .term { color: inherit; cursor: pointer;
  text-decoration: underline dotted rgba(200,163,90,.85); text-underline-offset: 4px;
  text-decoration-thickness: 1.5px; }
body.desk .turn.advisor .term:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* the knowledge card: a parchment slip set into the midnight page (§1.2) */
/* the card is the one light surface: the shell maps --ink to bone (body.desk above), so the card
   restores the parchment pair, tokens.css's own --ink / --ink-soft values (a test holds them equal) */
body.desk .kcard { --ink: #241E12; --ink-soft: #5A4F38;
  position: relative; margin: 6px 0 22px; padding: 16px 18px 14px; border-radius: var(--r-card);
  color: var(--ink); background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%), var(--parchment);
  box-shadow: 0 0 0 1px var(--gold-dim), inset 0 0 0 3px var(--parchment), inset 0 0 0 4px rgba(154,123,63,.45),
              0 14px 28px -14px rgba(0,0,0,.9); }
body.desk .kcard:focus { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
body.desk .kcard .kc-draft { position: absolute; top: 8px; right: 10px; padding: 2px 6px; border-radius: 3px;
  font: 700 9.5px/1.2 "Cinzel", serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--parchment); background: var(--crimson); }
/* §1.5 rule 1: desktop, the card sits BESIDE the paragraph that named the term */
@media (min-width: 960px) {
  body.desk .kcard.beside { float: right; width: 300px; margin: 4px 0 16px 28px; }
  /* a card's paragraph starts below any earlier card, so each card stays beside its own */
  body.desk .flow, body.desk .turn.advisor .board, body.desk .inst, body.desk .cblocks { clear: both; }
}
/* F-2: below 960px it sits directly after its paragraph, centred, never floated */
@media (max-width: 959px) {
  body.desk .flow { display: flex; flex-direction: column; }
  body.desk .flow > .kcard { order: 2; }
  body.desk .kcard.beside { float: none; width: auto; max-width: 420px; margin: 6px auto 22px; align-self: center; }
}
body.desk .kcard .kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font: 600 10.5px/1 "Cinzel", serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
body.desk .kcard .kicker svg { width: 13px; height: 13px; flex: none; }
body.desk .kcard h3 { margin: 0 0 6px; font: 700 21px/1.15 "Cinzel", serif; letter-spacing: .04em; text-transform: none; color: var(--ink); }
body.desk .kcard .def { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
body.desk .kcard .foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(90,79,56,.25);
  font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
body.desk .kcard .foot b { color: var(--ink); font-weight: 600; margin-right: .3em; }
body.desk .balance .verdict b { font-weight: 700; margin-right: .3em; }
body.desk .seal li .mk { margin-right: .35em; }
body.desk .kcard .well { padding: 12px 12px 10px; border-radius: 7px; background: var(--parchment-2);
  box-shadow: inset 0 1px 3px rgba(36,30,18,.25); }
body.desk .kcard .cap { margin: 8px 0 0; font: 600 10.5px/1 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* archetype METER (rage) */
body.desk .meter .scale { display: flex; justify-content: space-between; margin: 0 0 4px; }
body.desk .meter .scale span { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
body.desk .meter .bar { position: relative; height: 16px; border-radius: 8px; background: rgba(36,30,18,.14);
  box-shadow: inset 0 1px 2px rgba(36,30,18,.35); overflow: hidden; }
body.desk .meter .fill { position: absolute; inset: 0 30% 0 0; border-radius: 8px;
  background: linear-gradient(90deg, #7A2A22, var(--crimson) 45%, #C0533F); }
body.desk .meter .bar::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(242,234,217,.7) calc(10% - 1px) 10%); }
body.desk .meter ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
body.desk .meter li { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; font-size: 12.5px; color: var(--ink); }
body.desk .meter li b { font-variant-numeric: tabular-nums; color: var(--crimson); text-align: right; }

/* archetype BALANCE (weighted trade) */
body.desk .balance .row { display: grid; grid-template-columns: 4.6em 1fr 3.4em; align-items: center; gap: 8px; margin: 0 0 7px; }
body.desk .balance .lbl { font: 600 10.5px/1 "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
body.desk .balance .trk { height: 14px; border-radius: 7px; background: rgba(36,30,18,.12); box-shadow: inset 0 1px 2px rgba(36,30,18,.3); overflow: hidden; }
body.desk .balance .f { display: block; height: 100%; border-radius: 7px; }
body.desk .balance .f.lost { background: linear-gradient(180deg, #8A8170, #6F6757); }
body.desk .balance .f.gain { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim)); }
body.desk .balance .v { text-align: right; font: 600 14px/1 "Albert Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); }
body.desk .balance .verdict { margin: 6px 0 0; font: 700 15px/1.2 "Cinzel", serif; color: var(--ink); text-align: center; }
body.desk .balance .verdict span { color: #6B4F14; }

/* archetype SEATS (lead & partner) */
body.desk .seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.desk .seat { padding: 10px 10px 9px; border-radius: 6px; background: rgba(242,234,217,.7); box-shadow: 0 0 0 1px rgba(154,123,63,.45); }
body.desk .seat.lead { box-shadow: 0 0 0 1.5px var(--gold-dim), 0 2px 0 rgba(36,30,18,.15); }
body.desk .seat .n { display: block; font: 700 11px/1 "Cinzel", serif; letter-spacing: .16em; color: var(--ink-soft); margin-bottom: 6px; }
body.desk .seat .who { display: block; font: 700 15px/1.15 "Cinzel", serif; color: var(--ink); margin-bottom: 6px; }
body.desk .seat ul { margin: 0; padding: 0 0 0 14px; font-size: 12px; line-height: 1.4; color: var(--ink); }

/* archetypes LADDER (role letters), TIMELINE (seasons), SEAL (conditional pick, artifacts) */
body.desk .ladder { display: flex; gap: 3px; }
body.desk .ladder span { flex: 1; text-align: center; padding: 7px 0 6px; border-radius: 5px; font: 700 13px/1 "Cinzel", serif; min-width: 0;
  color: var(--ink-soft); background: rgba(36,30,18,.08); }
body.desk .timeline { position: relative; display: flex; justify-content: space-between; padding-top: 14px; }
body.desk .timeline::before { content: ""; position: absolute; left: 6px; right: 6px; top: 19px; border-top: 2px solid rgba(36,30,18,.3); }
body.desk .timeline span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 600 10px/1.1 "Cinzel", serif; letter-spacing: .06em; color: var(--ink-soft); text-align: center; width: 20%; }
body.desk .timeline span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--parchment-2); box-shadow: 0 0 0 2px var(--ink-soft); }
body.desk .timeline span.here { color: var(--ink); }
body.desk .timeline span.here::before { background: var(--gold); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(200,163,90,.35); }
body.desk .seal { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
body.desk .seal .disc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 "Cinzel", serif;
  color: var(--parchment); background: radial-gradient(circle at 50% 30%, #4A3E28, var(--ink)); box-shadow: 0 0 0 2px var(--gold-dim), 0 0 0 4px var(--parchment-2), 0 0 0 5px rgba(36,30,18,.3); }
body.desk .seal ul { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.45; color: var(--ink); }
body.desk .seal .mk { color: #4F7A4F; font-weight: 700; }
body.desk .seal li.no .mk { color: var(--crimson); }

/* the arrival (§1.5 rule 6; ADMITTED to the Class A list, R-D60-2, Lane A 2026-10-16;
   corpus C-4141's suite tests/test_advisor_surface_seam.py): the card rises 6 px and fades in
   over 280 ms, once, with the newest answer only (the seam's own arrival rule,
   .turn.advisor:last-child), so an earlier answer never replays it. Under reduce it is simply
   there. No script drives it. */
@media (prefers-reduced-motion: no-preference) {
  body.desk .turn.advisor:last-child .kcard { animation: kc-in var(--t-mid) var(--ease) both; }
}
@keyframes kc-in { from { opacity: 0; translate: 0 6px; } }

/* §2.1 THE INSTRUMENT: a numeric column as engraved bars (the #371 gallery chart, promoted) */
body.desk .inst { margin: 6px 0 22px; padding: 14px 16px 10px; border-radius: 10px; background: rgba(7,11,22,.6);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(240,215,158,.1), 0 0 0 1px rgba(200,163,90,.14); }
body.desk .inst figcaption { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
body.desk .inst .t { font: 600 13px/1.2 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
/* G-ERA-BRIDGE-HEADER-1: a later-era block's era, in its head (the instrument's caption, the key line, the table's caption) */
body.desk .blk-era { font: 600 11.5px/1.2 "Cinzel", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(200,163,90,.45); }
body.desk .board caption { caption-side: top; text-align: left; padding: 0 0 8px; }
body.desk .inst .r { display: grid; grid-template-columns: minmax(10em, 15em) 1fr 4.2em; align-items: center; gap: 12px; min-height: 30px; }
body.desk .inst .nm { font-size: 14px; color: var(--bone); }
body.desk .inst .nm small { display: block; font-size: 11.5px; color: var(--bone-mute); }
body.desk .inst .tk { position: relative; height: 12px; border-radius: 6px; background-color: rgba(0,0,0,.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(240,215,158,.1); }
body.desk .inst .fl { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
body.desk .inst .val { text-align: right; font: 600 14px/1 "Albert Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--bone); }
body.desk .inst .r.top .val { color: var(--gold-hi); }
body.desk .inst .r.mine { margin: 2px -8px; padding: 0 8px; border-radius: 8px; background: rgba(200,163,90,.08); box-shadow: 0 0 0 1px rgba(200,163,90,.45); }
body.desk .inst .r.mine .fl { background: linear-gradient(180deg, #F3B48A, #D9763F 55%, #A2471F); }
body.desk .inst .mine-tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; font: 600 9.5px/1.2 "Cinzel", serif;
  letter-spacing: .12em; color: var(--g1); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); vertical-align: 1px; }
body.desk .inst .ax { display: grid; grid-template-columns: minmax(10em, 15em) 1fr 4.2em; gap: 12px; margin-top: 4px; }
body.desk .inst .ax div { display: flex; justify-content: space-between; font-size: 11px; color: var(--bone-mute); }
body.desk .inst .src { margin: 8px 0 0; font-size: 11.5px; color: var(--bone-mute); }

/* §2.2 THE COMPARTMENT TABLE: a text table as framed compartments (DESIGN_S4_REDLINES_v1_0 §4;
   the rules sit here, not in advisor.css (the sheet's I-4): the spec's build plan names app.css,
   and advisor.css may carry no content: at all (tests/test_app_shell_brand.py), which the markers
   below need. These rules outrank advisor.css's legacy .board block where they meet.) */
body.desk .ctab { margin: 6px 0 22px; border-radius: 10px; overflow: hidden; overflow-x: auto; box-shadow: 0 0 0 1px rgba(200,163,90,.22), inset 0 1px 4px rgba(0,0,0,.6); }
body.desk .ctab table { width: 100%; border-collapse: collapse; }
body.desk .ctab th { text-align: left; padding: 10px 14px; font: 600 11px/1.2 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: linear-gradient(180deg, var(--g3), var(--g2)); border-bottom: 1px solid rgba(200,163,90,.3); }
body.desk .ctab td { vertical-align: top; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--bone); background: rgba(13,21,38,.35); border-bottom: 0; }
body.desk .ctab tr:nth-child(even) td { background: rgba(7,11,22,.55); }
body.desk .ctab tr + tr td { box-shadow: inset 0 1px 0 rgba(0,0,0,.6), inset 0 2px 0 rgba(240,215,158,.05); }
body.desk .ctab td:first-child { font: 600 15px/1.3 "Cinzel", serif; color: var(--bone); }
body.desk .ctab th.num, body.desk .ctab td.num { text-align: right; }
body.desk .ctab td.num { font-variant-numeric: tabular-nums; }
body.desk .ctab td strong { color: var(--gold-hi); font-weight: 600; }
/* THE REVERSED LEAD (Lane A, pulled forward): the pair's quiet note, "(Cao Cao leads)" -- the body face, never the
   heading's, in the muted bone, the same in a compartment cell and a commander block's name */
body.desk .turn.advisor .lead-note { font: italic 400 13px/1.4 "Albert Sans", system-ui, sans-serif; letter-spacing: 0;
  text-transform: none; color: var(--bone-mute); white-space: nowrap; }
body.desk .ctab .cell-label { display: none; }

/* §2.3 COMMANDER BLOCKS (founder F-1): the card family's level, on the midnight ground */
body.desk .cblocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 24px; }
body.desk .ckey { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 2px;
  font: 600 10px/1.2 "Cinzel", serif; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
body.desk .ckey span { display: inline-flex; align-items: center; gap: 8px; }
body.desk .ckey .k-rec::before, body.desk .cb .rec::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
body.desk .cb .rec::before, body.desk .cb .fit::before { position: absolute; left: 1px; }
body.desk .ckey .k-fit::before, body.desk .cb .fit::before { content: ""; flex: none; width: 10px; height: 1.5px; background: var(--gold-dim); }
body.desk .cb { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 18px 18px 16px; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--g3), var(--g2));
  box-shadow: 0 0 0 1px rgba(200,163,90,.26), inset 0 0 0 3px var(--g2), inset 0 0 0 4px rgba(200,163,90,.10), 0 14px 28px -14px rgba(0,0,0,.9); }
body.desk .cb .medal { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 "Cinzel", serif; color: var(--gold-hi);
  background: radial-gradient(circle at 50% 30%, var(--g3), var(--g1)); box-shadow: 0 0 0 2px var(--gold-dim), 0 0 0 5px rgba(0,0,0,.55); }
body.desk .cb h4 { margin: 0; padding: 0 0 8px; font: 600 18px/1.15 "Cinzel", serif; letter-spacing: .05em; color: var(--parchment);
  background: linear-gradient(90deg, var(--gold), rgba(200,163,90,.35) 60%, rgba(200,163,90,0)) left bottom / 100% 1px no-repeat; }
body.desk .cb .rec, body.desk .cb .fit { position: relative; margin: 0; padding-left: 18px; }
body.desk .cb .rec { font-size: 15px; line-height: 1.5; color: var(--bone); }
body.desk .cb .rec::before { top: .62em; transform: rotate(45deg); }
body.desk .cb .rec strong { color: var(--gold-hi); font-weight: 600; }
body.desk .cb .fit { margin-top: 6px; font-size: 14.5px; line-height: 1.5; font-style: italic; color: #CFC9B8; }
body.desk .cb .fit::before { top: .74em; left: 0; }
body.desk .cb.pick { margin-top: 10px;
  background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(200,163,90,.16), transparent 70%), linear-gradient(180deg, var(--g3), var(--g2));
  box-shadow: 0 0 0 1.5px var(--gold), inset 0 0 0 3px var(--g2), inset 0 0 0 4px rgba(240,215,158,.28),
              0 0 28px -6px rgba(200,163,90,.45), 0 14px 28px -14px rgba(0,0,0,.9); }
body.desk .cb.pick .medal { color: var(--g1); background: radial-gradient(circle at 50% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-dim));
  box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 5px rgba(0,0,0,.55), 0 0 18px rgba(240,215,158,.45); }
body.desk .cb .pick-tab { position: absolute; top: -10px; left: 18px; padding: 4px 10px 3px; border-radius: 4px;
  font: 700 10px/1.2 "Cinzel", serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 0 0 1px var(--gold-dim), 0 4px 10px -4px rgba(0,0,0,.8); }
body.desk .cblocks .cb.pick ~ .cb { margin-top: 10px; }   /* rows stay level beside the pick */

/* phone (≤ 640 px): the compartment stacks, the Instrument breathes (F-3) and "Your march"
   takes its own line above the pair (A-1) */
@media (max-width: 640px) {
  body.desk .ctab thead { display: none; }
  body.desk .ctab tr, body.desk .ctab td { display: block; }
  body.desk .ctab td { padding: 4px 14px; background: transparent !important; box-shadow: none !important; }
  body.desk .ctab tr { padding: 10px 0; background: rgba(13,21,38,.35); }
  body.desk .ctab tr:nth-child(even) { background: rgba(7,11,22,.55); }
  body.desk .ctab tr + tr { box-shadow: inset 0 1px 0 rgba(0,0,0,.6); }
  body.desk .ctab .cell-label { display: block; font: 600 9.5px/1.4 "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }
  body.desk .inst .r { grid-template-columns: 1fr 4em; gap: 6px 10px; padding: 10px 0 8px; }
  body.desk .inst .r + .r:not(.mine) { box-shadow: 0 -1px 0 rgba(200,163,90,.08); }
  body.desk .inst .r.mine { margin: 12px -8px 6px; padding: 12px 8px 10px; }
  body.desk .inst .nm { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
  body.desk .inst .mine-tag { order: -1; margin: 0 0 6px; }
  body.desk .inst .ax { grid-template-columns: 1fr 4em; }
  body.desk .inst .ax > :first-child { display: none; }
}

/* THE THINKING MARK (Lane A D65-79; D66, the founder's revision, which supersedes D65-79's speed and size):
   while the advisor thinks, the Sage of War mark at the head of the waiting strip (wait_strip.js draws it;
   the strip lives only while a turn waits) "is LARGER (try 40 px on desk, 32 on phone) and VISIBLY SPINS
   while the advisor thinks -- a loading-spinner read, continuous, about one turn every 2-3 s, no bounce --
   and stops dead on arrival. Light-moves register stays; the ring turns, the core holds."
   Its ring (the four arcs) turns once every 2.5 s, linear, a rotation and nothing else. The inner ring and
   the core hold still, and the strip's own breath (wait_strip.css) goes on. It stops dead because the strip
   and its mark are gone before the answer's first frame (wait_strip.js; B-code's lock
   test_it_is_gone_before_the_answers_frame), so there is no wind-down turn. On a desk the 40 px mark stands
   beside the whole status zone, the status line and the process line under it (20 + 2 + 18 px). On a
   phone the 32 px mark's top meets the status line's. At 360 px and below, the gap beside it is 6 px (was
   10), so the widest name the profile allows (24 characters) keeps its three status rows: measured over
   every shipped and candidate line, it is cut at 320 px with a 10 px gap and whole with 6.
   Still under reduced motion.
   STACKED ON A PHONE (D67-30, the founder: "PHONE (<=640 px): the thinking mark is centered ABOVE the 'While your
   Sage weighs the records...' line and its sub-line -- stacked, not beside. Desk keeps the mark beside the text";
   the size stays D66-18's, D67-23's doubling withdrawn). Up to 640 px the status zone is a column: the 32 px mark
   (--ws-mark-phone, one value to change if the size is ever ruled again) centred, 8 px above the status line and the
   process line, which take the strip's whole width and are centred under it. With no column beside the mark, the
   narrow gap rule (6 px beside it at 360 px and below) has nothing left to do and is gone.
   THE ZONE SIZES TO ITS CONTENT (D67-34, the founder on frame 453: "the gap between the sub-line and the dealt card is
   too large. The status zone sizes to its content (no reserved 116 px); the band from the sub-line to the card = the
   desk band (~28 px)"). The status line takes the rows its name needs, and the band under the zone is the desk's
   28 px. The process line rotates, so its box holds the tallest line the deck can show at that width and never
   changes height while lines rotate. Measured in the pinned Chromium on the stacked column, every shipped and
   candidate line: the tallest (WS-P-001) takes one row from 559 px, two from 360 px and three below. The tiers
   step at 36rem and 22.5rem, a little wider than the measured steps, so a phone whose text sets a pixel wider
   still has room for the line. The cost: from 559 to 576 px, and at exactly 360, the zone holds one row more than
   any line uses. The strip's height is the column's: mark, gap, status rows, process box, band and deck, one
   height per width and name for the whole wait. */
body.desk .ws-strip .ws-status .ws-mark { width: 40px; height: 40px; margin-top: 0; }
@media (max-width: 40rem) {
  body.desk .turns > li.ws-strip { --ws-mark-phone: 32px; --ws-mark-gap: 8px; height: auto; }
  body.desk .ws-strip .ws-status .ws-mark { width: var(--ws-mark-phone); height: var(--ws-mark-phone); }
  body.desk .turns > li.ws-strip .ws-status { flex-direction: column; align-items: center; gap: var(--ws-mark-gap); }
  body.desk .turns > li.ws-strip .ws-said { flex: none; width: 100%; height: auto; text-align: center; }
  body.desk .turns > li.ws-strip .ws-procs { height: 18px; }      /* the tallest process line: one row */
  body.desk .turns > li.ws-strip .ws-deck { margin-top: 28px; }   /* the desk's band */
}
@media (max-width: 36rem) {
  body.desk .turns > li.ws-strip .ws-procs { height: 36px; }      /* two rows */
}
@media (max-width: 22.5rem) {
  body.desk .turns > li.ws-strip .ws-procs { height: 54px; }      /* three rows */
}
@media (prefers-reduced-motion: no-preference) {
  body.desk .ws-strip .ws-sigil > g {
    transform-box: view-box; transform-origin: 50% 50%; animation: ws-ring-turn 2.5s linear infinite; }
}
@keyframes ws-ring-turn { to { transform: rotate(360deg); } }

/* THE VISIBLE LANGUAGE PICKER (B-DESIGN; Lane A D76, the founder's pass: Placement B approved; advisor.js langPicker
   draws it, only on this two-pane page and only when two or more languages are open). A pill in the conversation's
   head row beside "New conversation": the language's own name, its BETA chip when gated, a gold caret; a midnight list
   beneath. Scoped to body.desk #card-chat, so the page-wide button and list rules never reach it. On a phone the "Language" kicker drops, the list
   anchors left inside the card, and the row wraps before anything is cut. */
body.desk #card-chat .lp { position: relative; display: inline-flex; flex: none; }
body.desk #card-chat .convo-head > .lp { margin-left: auto; align-self: center; }
body.desk #card-chat .lp-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 0; cursor: pointer; background: transparent;
  border: 1px solid rgba(200, 163, 90, .4); border-radius: 999px; padding: 4px 10px 4px 11px;
  color: var(--bone); font: 500 12.5px/1.2 "Albert Sans", system-ui, sans-serif; letter-spacing: .02em;
  text-transform: none; text-decoration: none; box-shadow: none;
}
body.desk #card-chat .lp-btn:hover, body.desk #card-chat .lp-btn:focus-visible, body.desk #card-chat .lp-btn[aria-expanded="true"] {
  border-color: var(--gold); color: var(--parchment);
  box-shadow: var(--glow-soft);
}
body.desk #card-chat .lp-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
body.desk #card-chat .lp-k { color: var(--bone-mute); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
body.desk #card-chat .lp-car { width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold); transform: translateY(-2px) rotate(45deg); }
body.desk #card-chat .lp-btn[aria-expanded="true"] .lp-car { transform: translateY(1px) rotate(225deg); }
body.desk #card-chat .lp-b { border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 7px 1px;
  color: var(--gold-hi); font: 600 9.5px/1.2 "Cinzel", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
body.desk #card-chat .lp-list {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; min-width: 230px; max-width: calc(100vw - 32px);
  box-sizing: border-box; margin: 0; padding: 6px; list-style: none; background: var(--g2);
  border: 1px solid rgba(200, 163, 90, .3); border-radius: var(--r-card); box-shadow: 0 14px 36px rgba(0, 0, 0, .6);
}
body.desk #card-chat .lp-list[hidden] { display: none; }
body.desk #card-chat .lp-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; border-radius: 7px; cursor: pointer;
  color: var(--bone); font: 500 14px/1.2 "Albert Sans", system-ui, sans-serif; text-align: left; }
body.desk #card-chat .lp-opt[aria-selected="true"] { background: rgba(200, 163, 90, .10); }
body.desk #card-chat .lp-opt:hover, body.desk #card-chat .lp-opt:focus { background: rgba(224, 232, 255, .06); outline: none; }
body.desk #card-chat .lp-opt:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
body.desk #card-chat .lp-chk { width: 14px; flex: none; color: var(--gold); }
body.desk #card-chat .lp-opt .lp-n { flex: 1; }
body.desk #card-chat .lp-note { display: block; margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid rgba(200, 163, 90, .14);
  color: var(--bone-mute); font: 400 11.5px/1.4 "Albert Sans", system-ui, sans-serif; text-align: left; }
@media (max-width: 600px) {
  body.desk #card-chat .lp-k { display: none; }
  body.desk #card-chat .lp-list { left: 0; right: auto; min-width: 214px; }
  body.desk #card-chat .convo-head:has(> .lp) { flex-wrap: wrap; align-items: center; gap: .5rem; }
  body.desk #card-chat .convo-head > .lp { order: -1; margin: 0 auto 0 0; }
  body.desk #card-chat .convo-head:has(> .lp) > h2:empty { display: none; }
  body.desk #card-chat .convo-head:has(> .lp) > #new-convo { white-space: nowrap; margin-left: auto; }
}

/* D76 smoke T3 (the founder's walk: "the toggle's pressed state is nearly invisible -- it must light up unmistakably,
   since it arms a paid spend"): the composer's deep-read toggle, pressed, wears the gold fill of a chosen chip */
body.desk .dr-toggle[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #241E12; border: 1px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-dim), 0 0 14px var(--gold-dim); font-weight: 700; }