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

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;
}

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

/* .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 {
  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 input: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 GOLD "WAITING" CELL — one of the three scoped gold moments in this
   file (see the file header). The state word ("The press is waiting.")
   is the actual carrier; the gold ground and the pip are reinforcement on
   top of a sentence that already says the same thing without them,
   satisfying family sheet §4 rule 4 ("never the only carrier") the same
   way the press room's ON AIR pip does one room over. */
.bento-cell.waiting {
  background: color-mix(in srgb, var(--gold) 12%, var(--surface-raised));
  border-color: var(--gold);
}
.bento-cell.waiting a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.125rem;
  text-decoration: none;
  min-height: var(--touch-target);
}
.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;
}

.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. */
.data-table tr.is-self td {
  color: var(--accent-2);
  font-weight: 600;
}
.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;
}