/* ==========================================================================
   wkp.my — page styles over tokens.css.

   Direction D's my. treatment (docs/drafts/2026-08-22-design-system-
   proposal.md §2.4, "my. under D"), quoted directly, section by section
   below rather than paraphrased — this file's whole job is to be that
   paragraph in CSS:

     "login is the blend in one card - deep-dark ground, serif nameplate
     ('The Wing King Press' in Newsreader, because the door says the
     paper's name), one labelled field, condensed gold-ringed submit; the
     three High-severity form guidelines from §3.1 are the build sheet.
     The press-conference room is a studio: --surface-stage ground,
     questions in serif, an on-air state that says ON AIR in words with a
     gold pip beside it (gold on stage 9.65:1 - and the pip is never the
     only carrier, per house law). The locker room is a dense dark board:
     --fs-data density, card spans from the Bento Box Grid checklist
     (record 2x1, next matchup 2x2, keeper slots 1x1), the manager's own
     standing carried by --accent-2 exactly as the two-voice rule
     assigns it."

   PHONE-FIRST (house rule: "the league lives on phones"). Every layout
   below is written mobile-first with a single min-width breakpoint that
   only ever ADDS columns; nothing here assumes a pointer, and every
   tappable control clears --touch-target (44px) per family sheet §4
   rule 6.

   GOLD STAYS SCARCE. Approved scope (§5 ruling item 3, "I like it"):
   "stage moments only, never a third voice beside coral and cyan." Gold
   appears in exactly three places in this file: the login submit's ring
   (a threshold moment - the door), the press room's ON AIR pip (the
   literal broadcast-studio state this task's own Interfaces block
   names), and the home's one "waiting" cell (a summons FROM the press,
   the same event as the on-air pip one room over). Nowhere else. And
   per family sheet §4 rule 4 ("State ... is never the only carrier"),
   every gold moment below carries the state in WORDS FIRST - the pip or
   tint is decoration on a sentence that already says the same thing.
   ========================================================================== */

/* No @import of tokens.css here - base.html links both stylesheets
   directly (tokens.css first, then this file), and CSS custom
   properties resolve at used-value time regardless of link order once
   both sheets are loaded, so an @import would only cost a second
   request for nothing. */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--accent-2);
}

/* ---- Skip link (audit 2026-08-29, finding 81) -------------------------
   The paper's own pattern (broadsheet.css .skip-link), restated here
   because the two apps share no build pipeline - the same hand-kept-copy
   posture base.html's building strip already takes. ABSOLUTE, and that
   is load-bearing rather than cosmetic: on the door pages body.door is a
   centering flex, and an in-flow first child there re-creates the
   2026-08-26 squeezed-card regression (base.html's strip note); an
   absolutely positioned child never enters flex layout. Hidden until
   focused; the first tab stop on every page. Fallbacks on the two font
   variables my. tokens.css does not carry, my.css's own existing idiom
   (.door-card h1). */
.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding-inline: var(--s4);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label, 0.1em);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Screen-reader-only text (C12 audit, 2026-08-31) - the standard clip
   recipe, added for the standings board's self-row "(you)" carrier
   (home.html): every visual part of the is-self mark (colour, weight,
   border) is silent in a screen reader, and the family sheet's rule 4 -
   "the state word is the actual carrier" - needs an actual word.
   `clip-path` rather than the legacy `clip: rect(0 0 0 0)`: every
   browser this app's own fonts already require supports it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s4);
}

/* On the door (login/claim), .door-nameplate already carries the paper's
   name at masthead size - a second same-size serif heading directly
   under it ("Log in" / "Set your password") would read as two mastheads
   stacked. Demoted to a condensed kicker instead: a label for the card
   the nameplate already announced. */
.door-card h1 {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--muted);
  margin: 0 0 var(--s4);
}

/* ---- Shared furniture ---------------------------------------------------
   The nameplate: Newsreader, the paper's name, present on every page that
   is not itself a card floating alone (login/claim use their own card-
   scoped nameplate instead - see .door below). */
.nameplate {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.top-bar .nameplate {
  font-size: 1.125rem;
}

.top-bar form {
  margin: 0;
}

.top-bar .who {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--condensed);
}

/* A plain, condensed logout control - never styled as a primary action,
   since it is the one button on every protected page that ends the
   session rather than moving the story forward. */
.logout-button {
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0 var(--s3);
  min-height: 36px;
  cursor: pointer;
}
.logout-button:hover,
.logout-button:focus-visible {
  color: var(--ink);
  border-color: var(--muted);
}

main {
  padding: var(--s4);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Desktop widening (commissioner's 2026-08-24 render note: "super
   thin on the computer") ---------------------------------------------
   PHONE-FIRST STAYS PHONE-FIRST: this is one min-width addition, not a
   redesign - `main`'s own 640px cap is untouched below the breakpoint,
   so every phone render is pixel-identical to before this rule existed.

   The defect, measured rather than assumed: `main` capped at 640px on a
   1280px-wide monitor leaves 640px of dead margin either side of the
   column (fully HALF the viewport unused); on a 1920px monitor that
   grows to 1280px, two thirds of the screen. That is "thin", not a
   feeling.

   900px, not 640px (`.bento`'s own existing breakpoint two rules below
   this file's War Desk section): a small tablet held one-handed at
   ~768-820px should not suddenly get a three-column War Desk sized for
   a mouse - 900px sits comfortably past that and still short of a
   typical 1024px+ laptop viewport, so the widened measure only ever
   appears somewhere a pointer and a wide window both actually exist.

   1100px, not full-bleed: the standings table's widest real row (an
   eight-column --fs-data board) needs nowhere near this much room -
   the number that actually sizes this is the War Desk's three sibling
   `<article>`s (below) wanting a genuine three-column row without
   crowding a keeper board's burn-order sentences into a sliver. 1100px
   gives each of those three columns roughly 340px once the gaps are
   subtracted - enough to read a full displacement sentence without
   `.table-scroll`'s horizontal-scroll fallback firing on every row. */
@media (min-width: 900px) {
  main {
    max-width: 1100px;
  }
}

/* The walk-night finding (AJ, 2026-08-26 06:53, live on his own monitor):
   1100px was sized off the War Desk's three-column need and reads right
   at laptop widths, but on a 1920px display it leaves 400px of gutter a
   side - "the margins are huge". Two wider tiers rather than a fluid
   100vw: the hub is cards and tables, not prose, so width is capacity -
   but unbounded width turns a 12-row table into a prairie. */
@media (min-width: 1440px) {
  main {
    max-width: 1360px;
  }
  /* Playwright verification, 2026-08-26: the press room's own reading
     column (.question/.answer/.small-print) keeps its measure caps here
     on purpose — --measure-serif and --measure exist so a line of prose
     never runs wall-to-wall, and that is correct at any width. What was
     never intended is where the capped column SITS: with no inline
     margin of its own it inherits `main`'s flex-start position, so at
     this tier it sat flush against `main`'s left edge with the right
     two-thirds of a 1920px screen bare beside it. Centering the column
     within the now-wide `main` fixes the position without touching the
     cap - press.html is untouched, and every phone/tablet render below
     this breakpoint is unaffected. */
  .question,
  .answer,
  .small-print {
    margin-inline: auto;
  }
}
@media (min-width: 1840px) {
  main {
    max-width: 1560px;
  }
  .question,
  .answer,
  .small-print {
    margin-inline: auto;
  }
}

/* .prose — a block of CONSECUTIVE NEWSREADER (serif) running text, paired
   with .question in tokens.css's own font-weight:450 rule (both are the
   "serif on dark ground" case §5.5's ruling actually names — see that
   comment for the ruling itself). Narrowed to --measure-serif, never
   --measure, per family sheet §4 rule 5 ("never the serif at 66ch") —
   the two DIFFERENT measures are for two DIFFERENT typefaces, not
   interchangeable options for the same block. my.'s one real instance is
   the claim page's consent line (claim.html: class="consent prose");
   ordinary UI microcopy (.small-print, .byline, .dates) stays in Barlow
   and never takes this class, because it was never the serif the ruling
   was about. */
.prose {
  font-family: var(--serif);
  max-width: var(--measure-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ---- Forms — the three High-severity guidelines from §3.1, the build
   sheet the my. paragraph names by number:
     1. Every input carries a visible <label> (never placeholder-as-label).
     2. Every error is text, not colour alone.
     3. Every control clears the 44px touch target.
   ------------------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: var(--s4);
}

.field > span {
  display: block;
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--s1, 4px);
}

.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--s3);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--sans);
}
.field textarea { padding: var(--s3); line-height: 1.5; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 1px;
}

/* The condensed, gold-ringed submit - the one gold moment on the door.
   A RING, not a fill: gold stays the ceremony's colour (§5 item 3), and a
   solid gold button on the very first screen every manager sees would
   read as gold's default state rather than its exception. The ring says
   "this one matters" without spending gold as wallpaper. */
.submit-gold {
  display: block;
  width: 100%;
  min-height: var(--touch-target);
  margin-top: var(--s2);
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  font-family: var(--condensed);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.submit-gold:hover,
.submit-gold:focus-visible {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  outline: none;
}

.error {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s3);
  font-family: var(--sans);
}
.notice {
  color: var(--muted);
}

/* ---- The door: login / claim ---------------------------------------
   "deep-dark ground, serif nameplate ... one labelled field, condensed
   gold-ringed submit." Deep-dark ground is --surface itself (already the
   darkest ground in the family; nothing to add), so this only has to
   float the card. */
.door {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
}

.door-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5, 24px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
}

.door-nameplate {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.door-tagline {
  text-align: center;
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 var(--s5, 24px);
}

/* Card-specific chrome only - font-family/weight/measure/colour all
   come from .prose (claim.html sets class="consent prose"; tokens.css's
   own .prose, .question rule is where the ruled 450 weight actually
   lives, cited there). This selector only adds what makes the sentence
   read as a QUOTE inside the card: italic, an accent rule, an inset
   ground one step lighter than the card itself. */
.door-card .consent {
  font-style: italic;
  margin: 0 auto var(--s5, 24px);
  padding: var(--s3);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.door-card .error {
  margin-bottom: var(--s4);
}

.door-links {
  text-align: center;
  margin-top: var(--s4);
  font-size: 0.9375rem;
}

/* ---- The locker room: home -------------------------------------------
   "a dense dark board: --fs-data density, card spans from the Bento Box
   Grid checklist (record 2x1, next matchup 2x2, keeper slots 1x1), the
   manager's own standing carried by --accent-2." Phone-first: one column,
   cards stacking full-width; the grid only appears at the width where two
   columns actually have room to mean something. */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .span-2 { grid-column: span 2; }
}

.bento-cell {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}

.bento-cell h2, .bento-cell h3 {
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

/* THE PRESS CELL — three states, always one rendered (spec 2026-09-16 §5).
   Only OPEN paints gold, one of the three scoped gold moments in this
   file (see the file header); FILED and QUIET add no hue of any kind.
   Layout and the 44px touch target are shared across all three below —
   family sheet §4 rule 6 binds every tappable control, not just the gold
   one, and this is the same link to /hub/press regardless of which
   sentence it carries.

   ui-ux-pro-max was run on these three states (task 4's own required
   design step) against exactly this constraint set: no new gold, no pip
   outside OPEN, existing tokens only. Its finding: the brief's own draft
   CSS coded FILED/QUIET's muted colour as `var(--ink-muted, var(--ink))`
   — a token this file never defines, so the fallback always wins and
   QUIET would have rendered in full --ink, indistinguishable from FILED
   and from ordinary body text. Replaced with the token this file already
   uses for exactly this "resting" register — `.bento-cell h2/h3` and the
   press room's own OFF AIR `.state-badge` both carry --muted for the same
   reason. Recommendation taken as proposed: FILED's "You told the Press:"
   kicker gets --muted + 600 weight (label, not content) while the
   manager's own quoted line stays --ink at normal weight, so the
   hierarchy reads by WEIGHT AND COLOUR together rather than colour alone
   (ties to the same "never the only carrier" rule, not just to gold);
   QUIET's single sentence goes straight to --muted, same posture as
   OFF AIR. */
.bento-cell.press a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--serif);
  font-size: 1.125rem;
  text-decoration: none;
  min-height: var(--touch-target);
}
.bento-cell.press.open {
  background: color-mix(in srgb, var(--gold) 12%, var(--surface-raised));
  border-color: var(--gold);
}
.bento-cell.press.open a {
  color: var(--ink);
  font-weight: 450;
}
.pip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent);
  flex: none;
}

/* FILED — settled press, no pip, no gold. The label reads --muted/600
   (a kicker, same register as every other label in this file); the
   manager's own quoted line stays --ink at plain weight, so it is the
   heavier half of the sentence, not the site's framing of it. */
.bento-cell.press.filed a {
  /* BLOCK, NOT THE FLEX ROW ABOVE. The row exists for OPEN's pip-plus-
     sentence; seen live on 2026-09-17 with the first real filed answer,
     a flex row squeezed the label to min-content and it wrapped as
     "You told / the / Press:" down the left of a four-line quote. A
     filed answer is a kicker over a quotation, so the kicker takes the
     cell's own heading vocabulary (the `.bento-cell h2` rule above - the
     standings cell's "2026 STANDINGS" line sits directly under it) and
     the quote runs full width beneath. */
  display: block;
  color: var(--ink);
  font-weight: 400;
}
.bento-cell.press.filed .press-label {
  display: block;
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

/* QUIET — the resting state, deliberately the least visually loud of the
   three, the same posture the press room's own OFF AIR badge already
   takes for "nothing to report". Opted-out and nothing-fired share this
   one rule with no branch between them — a second rule would be a second
   way to learn who opted out. */
.bento-cell.press.quiet a {
  color: var(--muted);
}

.empty-state {
  color: var(--muted);
  font-style: italic;
}

/* ---- Data tables — --fs-data density, tabular-nums --------------------
   Applies to the standings board AND the War Desk's three tables: the
   my.-under-D paragraph scopes "--fs-data density" to the whole locker
   room, not to the War Desk alone (Task 7's own Interfaces block singles
   out the War Desk by name, but the source paragraph it quotes is about
   the room as a whole - CLAUDE.md's "no design invention" rule cuts the
   other way here too: giving the standings board a SEPARATE, less-dense
   treatment than the desk one scroll below it would be the invented
   inconsistency, not this one shared class). */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--condensed);
  font-size: var(--fs-data);
  line-height: var(--lh-data);
  font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td {
  padding: var(--s2) var(--s2);
  text-align: right;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table th:first-child, .data-table td:first-child {
  text-align: left;
  font-family: var(--sans);
}
/* The keeper board and draft-capital tables carry a prose-length note in
   their last column (a collision explanation, a burn-order sentence) -
   that column reads left and wraps normally, unlike the short numeric
   columns tabular-nums is actually for. */
.data-table td:last-child {
  text-align: left;
  font-family: var(--sans);
  white-space: normal;
}
.data-table thead th {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

/* The manager's own row - "carried by --accent-2 exactly as the two-voice
   rule assigns it" (my.-under-D, quoted above): rank/record is the
   standings speaking, and a reader's OWN row is exactly that grammar
   pointed at them. Set by the template comparing row.manager_name against
   the session's own manager_name - no new server-side field, since the
   context already carries both strings.

   THE FULL MARK, as of 2026-09-01 (C12 audit): colour + weight + the
   accent bottom border - the same three parts the building strip's
   `[aria-current="page"]` mark carries, which the strip's own comment
   below had CLAIMED this rule already used ("never colour alone") while
   the rule as shipped had only two of them. The border rides the row's
   existing 1px --line bottom rule (border-collapse means the heavier
   border simply wins), so no row height shifts. The fourth, non-visual
   part is the template's own visually-hidden "(you)" in the first cell
   (home.html) - all three CSS parts are silent in a screen reader. */
.data-table tr.is-self td {
  color: var(--accent-2);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-2);
}
.data-table tr.is-self td:first-child {
  color: var(--accent-2);
}

.table-scroll {
  overflow-x: auto;
}

/* ---- The press-conference room: a studio ------------------------------
   "--surface-stage ground, questions in serif, an on-air state that says
   ON AIR in words with a gold pip beside it (gold on stage 9.65:1 - and
   the pip is never the only carrier)." Applied via a body class
   (press.html sets it through base.html's bodyclass block) rather than a
   page wrapper, so the stage ground reaches the full viewport the way a
   studio floor does - not a card floating on the shell's own --surface,
   which is the door's treatment, not this room's. */
body.stage {
  background: var(--surface-stage);
}

.byline {
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 var(--s4);
}

/* THE STATE BADGE — words first, always; the pip (gold, only for the
   live/open state) is decoration on top, never the sole signal. Three
   states, matching press.html's own {% if %} chain: FILED (already
   answered - no pip, nothing left to broadcast), ON AIR (a question is
   live and waiting - the gold pip, the scoped stage moment), OFF AIR
   (nothing fired, or opted out - no pip, deliberately the least visually
   loud of the three, since it is the room's resting state). */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--s1, 4px) var(--s3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--stage-rim);
  color: var(--muted);
  margin-bottom: var(--s4);
}
.state-badge.on-air {
  color: var(--gold);
  border-color: var(--gold);
}

.question {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: var(--measure-serif);
  margin: 0 0 var(--s4);
}

.answer {
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 0 var(--s3);
}

.dates {
  color: var(--muted);
  font-size: 0.9375rem;
}

.open-question textarea {
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: var(--s3);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  margin-bottom: var(--s3);
}
.open-question textarea:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 1px;
}

.open-question form {
  display: inline-block;
  margin: 0 var(--s2) var(--s3) 0;
}

/* The answer form is BLOCK and full-width, overriding the inline-block
   that the side-by-side button forms want. Without this the textarea's
   width:100% resolves against a shrink-to-fit inline-block form and the
   box renders "awkwardly short" - the commissioner's own words on the
   2026-08-23 render review, the one sizing note in an otherwise-approved
   design pass. A place to say something should look like one. */
.open-question form[action="/press/answer"] {
  display: block;
  width: 100%;
  margin-right: 0;
}
.open-question textarea {
  min-height: 11rem;
}

.open-question button[type="submit"] {
  min-height: var(--touch-target);
  padding: 0 var(--s4);
  border-radius: var(--radius-pill);
  font-family: var(--condensed);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.open-question form[action="/press/answer"] button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.open-question form[action="/press/no-comment"] button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
}

.small-print {
  color: var(--muted);
  font-size: 0.875rem;
  max-width: var(--measure);
  margin-top: var(--s4);
}

.note {
  color: var(--gold);
  font-family: var(--condensed);
  font-size: 0.9375rem;
}

/* ---- The War Desk ------------------------------------------------------
   No new ground of its own - it renders inside home, on the locker
   room's own --surface, one bento cell among the others (Task 6b's own
   template comment: "an INCLUDE, not a page of its own"). Its three
   tables get the SAME .data-table density every other board table in
   this file gets - see that class's own comment for why the scope is
   the whole room, not the desk alone. */
.war-desk {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.war-desk h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 var(--s3);
}
.war-desk article {
  margin-bottom: var(--s5, 24px);
}
.war-desk article:last-child {
  margin-bottom: 0;
}
.war-desk h3 {
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.war-desk .deadline {
  font-family: var(--condensed);
  color: var(--accent-2);
  font-weight: 600;
}
.war-desk .linear-note,
.war-desk .no-options,
.war-desk .absent-declared,
.war-desk .none-declared,
.war-desk .unknown-declared,
.war-desk .capital-unavailable,
.war-desk .slot {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* THE DESK GOES THREE ACROSS AT DESKTOP WIDTH - the one honest multi-
   column read of `wardesk.html`'s actual structure. That template is
   THREE SIBLING <article>s (keeper board, declared-vs-lock, draft
   capital), each its own self-contained widget with its own <h3> - not
   one continuous document, so reading top-to-bottom across all three
   was never the intended order even when they stack on a phone; a
   dashboard row of three cards is the honest desktop shape, not an
   invention.

   NEVER the standings table, and the same rule explains why not: that
   IS one continuous reading order (row 1, row 2, row 3, ...), so
   forcing it into CSS columns would scramble it - the standings board
   stays a single full-width `.data-table` (see that class's own
   comment) and only benefits from the wider `main` above, not from a
   column split here.

   Each keeper-board/draft-capital table keeps its own `.table-scroll`
   wrapper as the fallback for a still-narrow column (a long burn-order
   or displacement sentence in the Status cell) - three-across is the
   target, a horizontal scroll on one card is the honest fallback when
   a real roster's content does not fit, never a forced reflow that
   breaks the sentence. */
@media (min-width: 900px) {
  .war-desk {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--s5, 24px);
  }
  .war-desk h2 {
    /* The one element that is NOT one of the three cards - it introduces
       all three, so it spans the full row above them. */
    grid-column: 1 / -1;
  }
  .war-desk article {
    /* The phone-first vertical margin between stacked cards; side by
       side there is nothing below the last card to separate from, and
       the grid's own column-gap already separates the three horizontally. */
    margin-bottom: 0;
    /* Grid items default to min-width:auto, not 0 - without this, a
       wide `.data-table` inside `.table-scroll` can refuse to shrink to
       its column's track, pushing the whole grid (and the page itself)
       wider than the viewport instead of scrolling internally the way
       `.table-scroll` intends. Verified against the two tables here
       (keeper board, draft capital) that are the only content wide
       enough to trigger it. */
    min-width: 0;
  }
}

/* ==========================================================================
   THE BUILDING STRIP - Task A7's one-building chrome.

   THE PAPER / THE BOARD / MY HUB, the same recipe
   site/src/components/BuildingStrip.astro uses on the paper (see that
   component's own header comment for the full argument): --condensed
   uppercase at the paper's own --fs-label size and --tracking-label value
   (0.09em - not tokenized in THIS file the way tokens.css tokenizes it
   for the paper, so it is hardcoded here exactly as this file already
   hardcodes tracking everywhere else - .logout-button, .door-tagline,
   .byline, .state-badge all do the same); the same drawn dot separator;
   and the same three-part current-state mark (colour + weight + a border
   rule, never colour alone) `.tab[aria-current="page"]` uses on the paper
   and `.data-table tr.is-self` already uses one room below this for the
   very same "never colour alone" reason.

   FULL-BLEED, NOT CONTAINER-CAPPED. This app has no `.container` class
   (`main` is a single 640px column, family sheet's own phone-first
   posture) - a top utility bar spanning edge-to-edge is already
   `.top-bar`'s own convention one room below this, so the strip follows
   it rather than inventing a second width rule.
   ========================================================================== */
.building-strip {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.building-strip__inner {
  padding-inline: var(--s4);
}

.building-strip__list {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding-block: var(--s1, 4px);
  overflow-x: auto;
}

.building-strip__list li {
  display: flex;
  align-items: center;
  flex: none;
}

/* The same drawn 3px circle .masthead__meta's dateline row uses on the
   paper (site/src/styles/broadsheet.css) - borrowing a motif the paper
   already carries rather than inventing a second separator style. */
.building-strip__list li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: var(--s3);
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}

.building-strip__item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.building-strip__item:hover,
.building-strip__item:focus-visible {
  color: var(--ink);
}

.building-strip__item[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}


/* THE BACKROOM (B3 commit 4; AJ 2026-09-01: "for my eyes only"). A dense
   status board, and the state WORD is the carrier on every row - the dot
   is reinforcement, never the only signal (the state-badge rule above,
   applied to a four-word vocabulary: ok / watch / broken / unknown).
   Colors are the standing voices: --ok (the one token this page added),
   --gold for watch, --accent for broken, --muted for unknown - no new
   hex enters a component here. */
.backroom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-data, 0.9375rem);
}
.backroom-table th {
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-strong);
}
.backroom-table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.backroom-id {
  font-family: var(--condensed);
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.backroom-state {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.backroom-dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  margin-right: var(--s2);
  background: currentColor;
}
.backroom-state--ok      { color: var(--ok); }
.backroom-state--watch   { color: var(--gold); }
.backroom-state--broken  { color: var(--accent); }
.backroom-state--unknown { color: var(--muted); }
.backroom-roll--ok      { color: var(--ok); border-color: var(--ok); }
.backroom-roll--watch   { color: var(--gold); border-color: var(--gold); }
.backroom-roll--broken  { color: var(--accent); border-color: var(--accent); }
.backroom-roll--unknown,
.backroom-roll--absent  { color: var(--muted); }
.backroom-boundary summary {
  cursor: pointer;
  font-family: var(--condensed);
  font-size: var(--fs-label, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: var(--s1, 4px);
}
.backroom-boundary summary:focus-visible { outline: 3px solid var(--accent-2); }

/* ---- My Roster (SP1, 2026-09-19) ---------------------------------------
   Tiles, the grouped roster table, the bento's bars and bye grid, and the
   player card. Colors are the tokens and nothing else: --accent-2 is
   your own standing, --accent is wrong, --gold is attention. The two
   bye-grid hex values (.w1/.w2) are the teal ramp steps the mockup
   validated against the raised surface (the darkest step failed contrast
   and was dropped) - the ONLY non-token colors here, argued once. */
.ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); padding-block: var(--s4); }
.ident h1 { font-family: var(--serif); font-weight: 600; margin: 0; }
.ident .standing { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-2); }
.season-form { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
.season-form label { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); }
.season-form select { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s2) var(--s3); min-height: var(--touch-target); font: 600 .95rem var(--condensed); }
.frame { color: var(--muted); font-size: .875rem; margin: 0 0 var(--s3); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(6, 1fr); } .tiles.small { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-label { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); }
.tile-value { font: 700 1.9rem var(--condensed); line-height: 1; font-variant-numeric: tabular-nums; }
.tile-value.absent { color: var(--muted); }
.tile-value small { font-size: .85rem; font-weight: 600; line-height: 1.2; } /* a keeper tile that is a sentence (choice / floor), not a round */
.tile-rank { font-size: .8rem; color: var(--muted); }
/* The roster table's Value column absence (SP2b Task 4) - same muted
   register as .tile-rank, sized for a table cell rather than a tile. */
.value-note { font-size: .8rem; color: var(--muted); }
.roster-card { padding: 0; margin-bottom: var(--s4); }
.roster-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; padding: var(--s4) var(--s4) var(--s3); }
.roster-head h2 { margin: 0 auto 0 0; }
.roster-head .sub, .bento-cell h2 .sub { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.pill { font: 600 .78rem var(--condensed); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: var(--radius-pill); padding: 6px 12px; min-height: 32px; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--surface-high); color: var(--ink); }
.pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.roster-table th.grp { text-align: center; color: var(--ink); letter-spacing: .1em; border-bottom: 1px solid var(--line); }
.roster-table th.g-season { color: var(--accent-2); } .roster-table th.g-opp { color: var(--gold); }
/* Sticky first column: the header's FIRST row only - the second header row's
   first cell is "Pts", and `th:first-child` pinned it too (final review 2026-09-19). */
.roster-table thead tr:first-child th:first-child, .roster-table tbody td:first-child { position: sticky; left: 0; background: var(--surface-raised); z-index: 1; }
.roster-table td:last-child { text-align: right; font-family: var(--condensed); white-space: nowrap; }
.roster-table tr.started td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.roster-table td small { color: var(--muted); }
.roster-table .col-opp, .roster-table .col-status { display: none; }
.roster-table.show-opp .col-opp, .roster-table.show-status .col-status { display: table-cell; }
.roster-table.hide-season .col-season, .roster-table.hide-next .col-next { display: none; }
.roster-table th[aria-sort="descending"]::after { content: " \25BE"; color: var(--accent-2); }
.roster-table th[aria-sort="ascending"]::after { content: " \25B4"; color: var(--accent-2); }
.roster-table td.up { color: var(--ok); } .roster-table td.down { color: var(--accent); }
.pos { font: 700 .68rem var(--condensed); letter-spacing: .06em; border-radius: 4px; padding: 2px 5px; background: var(--surface-high); }
.tm { color: var(--muted); font-size: .72rem; }
.chip { display: inline-block; font: 600 .7rem var(--condensed); letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.chip.keep, .chip.q { border-color: var(--gold); color: var(--gold); }
.chip.wire { border-color: var(--accent-2); color: var(--accent-2); }
.chip.out { border-color: var(--accent); color: var(--accent); }
.chip.rookie { border-color: var(--ok); color: var(--ok); }
/* The matchup tier: the word is printed beside the rank, so the colour is
   never the only carrier (Ruling 9 / B6). --accent tough, --gold middle,
   --ok soft - the standing voices, no new token. */
.roster-table td.matchup { white-space: nowrap; }
.tier { font: 600 .7rem var(--condensed); letter-spacing: .05em; text-transform: uppercase; }
.tier.tough { color: var(--accent); } .tier.middle { color: var(--gold); } .tier.soft { color: var(--ok); }
.legend { padding: var(--s3) var(--s4); font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); margin: 0; }
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 6px var(--s3); align-items: center; font-size: var(--fs-data); }
.bars .b { height: 10px; border-radius: 0 4px 4px 0; background: var(--accent-2); min-width: 2px; }
.bars .n { color: var(--muted); white-space: nowrap; }
.byes { display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; }
.byes div { aspect-ratio: 1; border-radius: 4px; background: var(--surface-high); display: grid; place-items: center; font: 600 .78rem var(--condensed); color: var(--muted); }
.byes .w1 { background: #2b7686; color: var(--ink); } .byes .w2 { background: #3f9fb1; color: var(--ink); }
.byes .w3 { background: var(--accent-2); color: var(--accent-2-ink); }
.byes .now { outline: 2px solid var(--gold); outline-offset: -2px; }
.byes-x { display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; margin-top: 4px; font: 600 .62rem var(--condensed); color: var(--muted); text-align: center; }
.status { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); margin: 0; font-size: var(--fs-data); }
.status dt { font: 700 1.3rem var(--condensed); line-height: 1; text-align: right; }
.status dt.gold { color: var(--gold); } .status dt.coral { color: var(--accent); } .status dt.absent { color: var(--muted); }
.status dd { margin: 0; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-data); }
.list li { display: flex; gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.list .m { margin-left: auto; color: var(--muted); white-space: nowrap; }
.card-dialog { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); width: min(560px, calc(100% - 2 * var(--s4))); max-height: 90vh; padding: var(--s4); }
.card-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.card-dialog .close { float: right; min-width: var(--touch-target); min-height: var(--touch-target); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: var(--radius-pill); font: 600 .8rem var(--condensed); cursor: pointer; }
.player-card .crumb a { color: var(--accent-2); }
.player-card .meta { color: var(--muted); }
.journey { list-style: none; padding: 0; font-size: var(--fs-data); }
.journey li { padding-block: 6px; border-bottom: 1px solid var(--line); }

/* ---- My History (2026-09-20) --------------------------------------------
   The hub's second tab: the tab strip, the record/yours lists, the keeper
   chains and two chips - on the tokens above and nothing else. The strip is
   the mockup's: 44px links (--touch-target), the active tab in --accent-2
   with a 3px underline (your own standing; gold stays the press cell's),
   the focus ring --gold like every other control on the page. */
.tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--line); margin: var(--s4) 0; }
.tabs a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--s2); margin-bottom: -1px; font: 600 .95rem var(--condensed); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.tabs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* A record/yours list: the label in the condensed caps every card label
   wears, the record line in --ink, yours in --accent-2 (the two-voice rule),
   an absence in --muted - a sentence, never a dash standing in for a zero. */
.rec { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); margin: 0; font-size: var(--fs-data); }
.rec dt { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--muted); padding-top: 2px; white-space: nowrap; }
.rec dd { margin: 0; min-width: 0; }
.rec .record, .rec .yours { display: block; }
.rec .yours { color: var(--accent-2); }
.absent { color: var(--muted); }
.chip.held { border-color: var(--gold); color: var(--gold); }
.chip.grade { border-color: var(--accent-2); color: var(--accent-2); font-size: .8rem; }
.chains { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
.chain { font-size: .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 4px 10px; color: var(--muted); }
/* A grid item's automatic minimum is its min-content, and a trades table
   with two nowrap columns is wider than a phone: at 375px every card grew
   to 393 and the page scrolled sideways (measured 2026-09-20). Zero it so
   the card takes the track and the table scrolls inside `.table-scroll`. */
.history .bento-cell { min-width: 0; }
.history .bento-cell h3 { margin-top: var(--s4); }
/* Names read left; only the round and points columns are numbers. The grade
   cell never wraps - a wrapped "no grade on file" made every trade row four
   lines tall at 1100px (measured on AJ's 51 trades). A card note here is a
   frame, not an alert, so it is muted where the war desk's is gold. */
.history .data-table th, .history .data-table td { text-align: left; }
.history .keepers th:nth-child(n+3), .history .keepers td:nth-child(n+3) { text-align: right; font-family: var(--condensed); }
.history .trades td { white-space: normal; }
.history .trades td:first-child { white-space: nowrap; }
.history .trades td:first-child small { display: block; color: var(--muted); white-space: normal; }
@media (min-width: 640px) { .history .trades td:last-child, .history .trades td:first-child small { white-space: nowrap; } }
/* The thesis line sits under the grade chip (item 8, final-fix wave):
   `display: block` breaks it onto its own line and `white-space: normal`
   overrides the last-child nowrap above, so the sentence wraps instead of
   forcing the grade cell as wide as its longest thesis. */
.history .trades .thesis { display: block; color: var(--muted); white-space: normal; }
.history .bento-cell .note { color: var(--muted); font-family: var(--sans); font-size: .8rem; }
.history .legend { border-top: 0; padding-inline: 0; }

/* ---- Feedback (2026-09-21) ------------------------------------------------
   The suggestion box and the bug finder, and the backroom's activity and
   feedback cells. Only what the form needs on top of `.field`: the radio
   pair as two large targets (44px is the floor; the label IS the target,
   the input is inside it), the error line beside its control, the sent
   list, the kind chips on the standing voices (suggestion --accent-2,
   bug --accent, login --gold - each 4.5:1 or better on --surface-raised,
   the same method as tokens.css's twelve), and the secondary button the
   press room's "No comment" already wears, named so a second room can. */
.kind-pair { border: 0; padding: 0; margin: 0 0 var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.kind-pair legend { font-family: var(--condensed); font-size: var(--fs-label, 0.8125rem); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--s1); padding: 0; }
.kind-option { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s2); align-items: center; min-height: var(--touch-target); padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.kind-option input { grid-row: span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--accent-2); }
.kind-option span { font: 600 1rem var(--condensed); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.kind-option small { color: var(--muted); font-size: .8rem; }
.kind-option:has(input:checked) { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.kind-option:has(input:focus-visible) { outline: 3px solid var(--accent-2); outline-offset: 1px; }
.field-error { color: var(--accent); font-family: var(--sans); font-size: .875rem; margin: calc(-1 * var(--s3)) 0 var(--s4); }
.feedback-form .submit-gold { width: auto; padding: 0 var(--s5); }
.sent-list { list-style: none; margin: 0; padding: 0; }
.sent-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sent-item:last-child { border-bottom: 0; }
.sent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s1); font-size: .8rem; color: var(--muted); }
.sent-meta strong { color: var(--ink); }
.sent-state { margin-left: auto; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .06em; }
.sent-text { margin: 0; max-width: var(--measure); white-space: pre-line; }
.sent-item.seen .sent-text, .sent-item.seen .sent-meta strong { color: var(--muted); }
.sent-item.seen .sent-state { color: var(--ok); }
.chip.suggestion, .chip.submit { border-color: var(--accent-2); color: var(--accent-2); }
.chip.bug { border-color: var(--accent); color: var(--accent); }
.chip.login { border-color: var(--gold); color: var(--gold); }
.button-secondary { min-height: var(--touch-target); padding: 0 var(--s4); border-radius: var(--radius-pill); background: transparent; color: var(--muted); border: 1px solid var(--line-strong); font: 600 .9rem var(--condensed); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.button-secondary:hover { color: var(--ink); border-color: var(--ink); }
.button-secondary:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 1px; }
.done-form { display: inline; margin-left: auto; }
.backroom .activity th, .backroom .activity td, .backroom .recent-table th, .backroom .recent-table td { text-align: left; font-family: var(--sans); }
.backroom .activity td:nth-child(n+3) { text-align: right; font-family: var(--condensed); }
.backroom .recent-table td:last-child { font-family: var(--condensed); word-break: break-all; }
.backroom .never { margin-top: var(--s3); }
.backroom .recent { margin-top: var(--s3); }