/* ══ THE GATE ═══════════════════════════════════════════════════════════════
   The post-login landing: nameplate, the dot field as the animation, a resume
   strip, and one card per entitled track.

   Numbered 17 so it lands after 16-calculator.css; the NN- prefix is the cascade.

   The design brief for this screen is restraint. Mark's read was that the front
   page felt inferior to the training screen, and the front page's problem was
   that it tried to be a working instrument AND an entrance at once — a hero, a
   rounds grid, nav cards, a custom-practice form and a leaderboard, none of which
   is what you want when you arrive. So this screen holds a name, a way back into
   today's work, and a choice. Nothing else has ink.

   The atmosphere is not decoration added here: it is #paper-tooth, already under
   every screen, now visible. Leaving this screen's own ground bare is what lets
   the dot field part around the cursor and be the animation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `safe center`, not `center`, and no scroller. This is the first screen after
   sign-in and it was the worst of the set in practice: MEASURED at 320x568,
   177px of a 745px screen sat outside a 568px capture — and because the screen
   both centred and scrolled itself, that overflow was split across the TOP and
   bottom edges, so part of it could not be scrolled to at all. */
#screen-gate { justify-content: safe center; overflow-y: visible; }

.gate-inner {
  width: min(760px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(24px, 6vh, 72px) 0;
}

/* ── nameplate ── */
.gate-mast { text-align: center; margin-bottom: clamp(28px, 5vh, 52px); }

.gate-name {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  /* The one place display type gets to be display type — nothing here is being
     read against a clock. */
  font-size: clamp(52px, 11vw, 116px);
  /* line-height below 1 pulls the line box in tighter than the glyphs, so at
     116px Fraunces' 'g' descender overflowed the h1's box and crossed the folio
     rule 22px beneath it. Clearance is in em so it tracks the clamp instead of
     breaking again at another width. */
  line-height: 0.92;
  padding-bottom: 0.14em;
  letter-spacing: -.04em;
  color: var(--bs-ink);
  margin: 0;
}
.gate-folio {
  margin-top: 4px;
  padding: 13px 0 12px;
  border-top: 1px solid var(--bs-ink);
  border-bottom: 1px solid var(--bs-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-family: var(--bs-mono);
  /* Was 9px, which is unreadable for grade 6-8 and made the line look like a
     caption under a masthead six times its size. It is the only line naming the
     date and the student, so it earns real size. */
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-2);
}
.gate-folio-date { font-size: 13px; color: var(--bs-ink-3); }
/* The greeting is the personal line, so it leads the band. */
.gate-folio-reader { font-size: 15px; color: var(--bs-ink); letter-spacing: .12em; }

/* ── resume strip ── */
/* Rules above and below rather than a filled card: this is a line of the paper,
   not a panel floating on it. */
.gate-resume {
  border-top: 2px solid var(--bs-ink);
  border-bottom: 1px solid var(--bs-rule);
  padding: 12px 0 16px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.gate-resume-k {
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-blue);
  margin-bottom: 8px;
}
.gate-resume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gate-resume-line {
  font-family: var(--bs-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-ink);
  flex: 1 1 260px;
  min-width: 0;
}
/* .bs .btn-primary sets width:100%, which out-specifies a single class and made
   this span the whole measure — a 760px Start bar reads as a banner, not an
   action. Matched specificity to hold it to its own size. */
/* The three things he named are DOING buttons; the consoles below them are
   places to look. Inked, so the eye lands on the verb first. */
.bs .gate-staff-btn.is-do {
  color: var(--bs-sheet);
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  font-weight: 600;
}

.bs .gate-staff-btn.is-do:hover {
  background: var(--bs-ink-2);
  border-color: var(--bs-ink-2);
}

.bs .gate-resume-btn { width: auto; padding: 12px 30px; flex-shrink: 0; }

/* ── A ROW THAT IS THERE BUT NOT YET OPEN ───────────────────────────────────
   Mark's ruling, 2026-08-31: "always show but have them grayed out when not
   active so not clickable". Every gate band used to remove itself when there
   was nothing to join, so a student arriving before the lecture started saw an
   empty page and could not tell "not yet" from "broken".

   The button is `disabled` in the DOM (see gateRowDormant in 03-api.js), so
   this styling only has to make that legible — it is not what does the
   disabling. Kept legible rather than faint: the whole point is that the
   student READS the reason, so the line stays at full contrast and only the
   emphasis comes off. */
.bs .gate-station.is-dormant,
.bs .gate-lecture.is-dormant,
.bs .gate-placement.is-dormant,
.bs .gate-daily.is-dormant { opacity: 1; }

.bs .is-dormant .gate-resume-k { color: var(--bs-ink-3); }

.bs .is-dormant .gate-resume-line {
  color: var(--bs-ink-3);
  font-style: italic;
}

.bs .is-dormant .gate-resume-btn,
.bs .gate-resume-btn:disabled {
  background: transparent;
  color: var(--bs-ink-3);
  border: 1px solid var(--bs-rule);
  box-shadow: none;
  cursor: not-allowed;
}

.bs .is-dormant .gate-resume-btn:hover,
.bs .gate-resume-btn:disabled:hover {
  background: transparent;
  color: var(--bs-ink-3);
  border-color: var(--bs-rule);
}

/* ── track cards ── */
/* Two columns, not auto-fit. With four tracks, auto-fit at this measure gave
   three across and left Cognition orphaned on its own row — the grid has to
   divide the tracks evenly or it reads as an accident. */
.gate-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 560px) {
  .gate-tracks { grid-template-columns: minmax(0, 1fr); }
}

.gate-track {
  position: relative;
  /* Numeral column, then body. align-items:center balances the display numeral
     against the two-line body instead of hanging it off the first baseline. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 16px 18px 17px;
  background: var(--bs-sheet);
  border: 1px solid var(--bs-ink);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* The style lives in the interaction. At rest these are flat sheets; the press
   is what the letterpress offset is for. */
.gate-track:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--bs-ink);
}
.gate-track:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--bs-ink); }
.gate-track:focus-visible { outline: 3px solid var(--bs-blue); outline-offset: 3px; }

/* Every other stylesheet honours this; the gate was the one that never got a
   block, so its .12s letterpress transition was the only motion still running
   under reduce. The offset itself stays — it is the affordance, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .gate-track { transition-duration: .001s; }
}

.gate-track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gate-track-mark {
  font-family: var(--bs-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-ink-3);
  transition: transform .12s ease, color .12s ease;
}
.gate-track:hover .gate-track-mark { color: var(--bs-ink); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .gate-track:hover .gate-track-mark { transform: none; }
}
.gate-track-mark.locked-mark {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-blue);
}
.gate-track:hover .gate-track-mark.locked-mark { transform: none; color: var(--bs-blue); }

/* At phone widths the head row cannot hold both halves, and it was the LOCK
   LABEL that paid. MEASURED at 320px on 2026-08-19: the head has 180px of
   content box; "Math Competition" cannot break below 154px (its longest word is
   one 20px display-serif token) and "ASK TO UNLOCK" cannot break below 43px, so
   the row needs 209px. Neither item can shrink past min-content, so the row
   overflowed by 29px and space-between pushed the mark 10px PAST the tile's own
   right edge, where it was clipped mid-word — the tile read "ASK T / UNLOC".
   Only the Math Competition tile showed it, because it has the longest name,
   which is why it survived every wider walk.

   Stacking the label above the title gives it the full measure and reads as the
   agate kicker the rest of this design already uses. Scoped to .locked
   deliberately: an ENTITLED tile's mark is the single "→" glyph, which fits
   inline and belongs on the title's own line, so flex-wrap on the shared .head
   would orphan it onto a line of its own. */
@media (max-width: 400px) {
  .gate-track.locked .gate-track-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .gate-track.locked .gate-track-mark.locked-mark { order: -1; }
}

.gate-track-num {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  /* A real display numeral, not a caption. It carries the left column and gives
     the card its visual counterweight to the headline. */
  font-size: 40px;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: 0;
  /* Bronze, not a grey tint: --bs-rule measured 1.61:1 against the sheet, which
     made a 40px numeral read as a smudge. --bs-blue is the palette's role token
     for bronze that must be READ (4.98:1); --bs-camel and --bs-camel-deep are
     banned on `color:` by contract — "camel where it can be seen, bronze where
     it must be read" (01-tokens.css), enforced by
     test_camel_never_lands_on_a_text_colour, which caught my first attempt. The
     warm/cool split against the green headline is what balances the card. */
  color: var(--bs-blue);
  /* Fixed column so every title starts at the same x: "III" is far wider than
     "I". Sized for IV — a fifth track would want this revisited. */
  min-width: 54px;
}
.gate-track:hover .gate-track-num { color: var(--bs-ink); }
.gate-track-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gate-track-name {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--bs-ink);
}
.gate-track-sub {
  font-family: var(--bs-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bs-ink-2);
}
/* The figure a student actually came to see — rating, streak, or a dash. */
.gate-track-fig {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--bs-rule);
  font-family: var(--bs-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bs-blue);
}

/* Locked tracks stay visible so the shape of the whole programme is legible,
   but they do not pretend to be pressable. */
.gate-track.locked {
  /* Not transparent: the gate's dot-field showed through the card, which read as
     a rendering fault rather than a locked state. A flat stock tint keeps it a
     card while still sitting back from the live ones. */
  background: color-mix(in oklab, var(--bs-sheet) 55%, transparent);
  border-color: var(--bs-rule);
  cursor: default;
}
.gate-track.locked:hover { transform: none; box-shadow: none; }
.gate-track.locked .gate-track-name { color: var(--bs-ink-3); }
.gate-track.locked .gate-track-num { color: var(--bs-rule); }
.gate-track.locked .gate-track-fig { color: var(--bs-ink-3); }
/* The locked card must read as "not yours yet", not as "broken". A dashed edge
   says provisional where a solid grey edge said dead, and the sub line is the
   only copy on it. */
.gate-track.locked { border-style: dashed; }
.gate-track.locked .gate-track-sub { color: var(--bs-ink-3); }

/* ── foot ── */
.gate-foot {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(24px, 4vh, 44px);
}
/* Measured at 67x23 in the 375 sweep. These two are Settings and Sign out —
   low-frequency but not low-consequence, and 23px tall is a miss-and-try-again
   target. The type stays 9px; the padding carries the height. */
.gate-foot-link {
  background: none;
  border: none;
  padding: 13px 10px;
  min-height: 44px;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.gate-foot-link:hover { color: var(--bs-blue); border-bottom-color: var(--bs-blue); }
.gate-foot-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

@media (max-width: 560px) {
  .gate-inner { width: calc(100vw - 32px); }
  .gate-resume-btn { width: 100%; }
}

/* ══ COMPETITION LANDING ════════════════════════════════════════════════════
   Reuses the .training-* shell from the SAT plan deliberately — that screen is
   the one Mark rates highest, so the competition track inherits its shape. Only
   the round cards are new, because rounds are what this track actually does. */

.comp-rounds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.comp-round-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 18px;
  background: var(--bs-sheet);
  border: 1px solid var(--bs-ink);
  border-radius: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Style in the interaction: flat at rest, letterpress on press. */
.comp-round-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--bs-ink); }
.comp-round-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--bs-ink); }
.comp-round-card:focus-visible { outline: 3px solid var(--bs-blue); outline-offset: 3px; }

.crc-name {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
  color: var(--bs-ink);
}
.crc-meta {
  font-family: var(--bs-ui);
  font-size: 12.5px;
  color: var(--bs-ink-2);
}
/* The calculator rule, as agate. Bronze when permitted, muted ink when not —
   never camel on this light ground (2.13:1). */
.crc-calc {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--bs-rule);
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.crc-calc.is-yes { color: var(--bs-blue); }

/* Recovery strip for a session left open in this tab (reload / lid close /
   Back). Deliberately quieter than .gate-resume — it is a recovery affordance,
   not the primary call to action, and it must not out-shout today's plan. */
.gate-recover {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: clamp(16px, 3vh, 28px);
  border: 1px dashed var(--bs-rule);
  border-left: 3px solid var(--bs-blue);
  background: color-mix(in oklab, var(--bs-blue) 6%, transparent);
}
.gate-recover-line {
  flex: 1 1 220px;
  font-size: 13px;
  color: var(--bs-ink);
}
.gate-recover-btn { flex: 0 0 auto; }
.gate-recover-dismiss {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--bs-blue);
  text-decoration: underline;
  cursor: pointer;
}
.gate-recover-dismiss:hover, .gate-recover-dismiss:focus { color: var(--bs-ink); }

/* An account with no entitled track would otherwise land on a blank gate. */
.gate-empty {
  padding: 18px 0;
  font-size: 14px;
  color: var(--bs-ink);
}


/* The "← All tracks" control is appended into #gate-tracks (05-home.js), which
   is a 2-column grid — so it became a GRID ITEM. With 5 competition banks (odd)
   it landed in the right cell of row 3, beside "AMC Mixed", occupying a
   card-sized cell as near-invisible 9px text: the way out of the picker read as
   a sixth tile. */
.gate-tracks > .gate-foot-link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
}

/* Audience is grades 6-8. All five supporting labels on the first screen after
   login were 9px mono uppercase at .2em tracking, which reduces apparent size
   further. Each is a short single-line label in generous space, so raising them
   reflows nothing. */
/* .gate-track-num is deliberately NOT in this group: it is a 40px display
   numeral now, and being listed here overrode that to 11px from further down the
   cascade — the numeral looked tiny for two rounds because of it. */
.gate-folio,
.gate-resume-k,
.gate-foot-link,
.crc-calc {
  font-size: 11px;
  letter-spacing: .12em;
}

/* ── THE CHOOSER ─────────────────────────────────────────────────────────────
   Opened from the wordmark. Four destinations, and the two that have no system
   behind them yet are dormant rather than absent — same ruling as the rows.

   The wordmark's <button> is stripped to nothing: the h1 inside it already
   carries every visual property, and letting the button contribute padding or a
   border would move the nameplate the moment it became interactive. */
.gate-name-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.gate-name-btn:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 6px;
}
/* The nameplate is the only affordance on the screen that changes on hover, so
   the change is a colour shift rather than motion — a 116px wordmark that moves
   reads as a glitch. */
.gate-name-btn:hover .gate-name { color: var(--bs-blue); }

.gate-chooser {
  border-top: 2px solid var(--bs-ink);
  border-bottom: 1px solid var(--bs-rule);
  padding: 12px 0 4px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.gate-chooser[hidden] { display: none; }

.gate-chooser-k {
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-blue);
  margin-bottom: 10px;
}

.gate-chooser-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gate-chooser-list > li + li { border-top: 1px solid var(--bs-rule); }

/* One destination. A <button> spanning the row, so the whole line is the target
   rather than a small control at its end. */
.gate-dest {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--bs-ink);
}
.gate-dest-name {
  font-family: var(--bs-ed);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.015em;
  flex: 0 0 auto;
}
.gate-dest-line {
  font-family: var(--bs-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bs-ink-3);
  flex: 1 1 200px;
  min-width: 0;
  text-align: right;
}
.gate-dest:hover:not(:disabled) .gate-dest-name { color: var(--bs-blue); }
.gate-dest:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: -2px;
}

/* Dormant: legible, not vanished. Opacity is deliberately NOT used — dropping
   the whole row to 0.5 takes the reason down with it, and the reason is the
   only thing on a dormant row worth reading. */
.gate-dest:disabled { cursor: default; }
.gate-dest:disabled .gate-dest-name { color: var(--bs-graphite); }
.gate-dest:disabled .gate-dest-line { color: var(--bs-ink-3); font-style: italic; }

@media (max-width: 560px) {
  .gate-dest { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gate-dest-line { text-align: left; }
}

/* THE WORDMARK IS NOT ALWAYS A DOOR. Mark, 2026-09-01: only the twelve Vanguard
   students have anything behind it — the lecture, the stations and the two
   competition projects are their programme. For the other 178 it is set
   `disabled` in the DOM (05-home.js), which is what actually stops the click
   and takes it out of the tab order; this only stops the browser greying the
   wordmark out as it would any other disabled button. It is still the
   masthead, and it must still look like one. */
.bs .gate-name-btn:disabled {
  opacity: 1;
  cursor: default;
  color: inherit;
}