/* Hallmark · shape: Terminal (an airport wayfinding system: sign band, departures board, boarding pass, passport) · genre: editorial · theme: custom · job: sign up · idea: "learning a language is a trip to your exam: today’s practice leaves from a real board, and every price is printed on a boarding pass" · vibe: "night departures board, yellow signs, honest fares"
 * paper: oklch(98.2% 0.006 250) · accent: oklch(86.5% 0.172 92) · display: Overpass · body: Overpass · hero: today’s practice on the departures board at left, the headline, one line and the start form at right, a boarding pass for the first exercise · nav: overhead wayfinding sign, a night-ink band with pictograms and a yellow sign for the current page · footer: an arrivals board of every page on night ink · imagery: none, the product built (board, pass, seat map, passport) · signature: flaps flip and a boarding pass prints with the full price
 * axes: light/grotesk-heavy/chromatic-yellow · posture: committed, wayfinding yellow owns the section sign panels, the current-page sign and the one primary action · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: H, fourteen pages share one board so every Operate page leads with a single board or pass, never two competing panels */
/* Hallmark · hero-review: not run during the build, covered by the finish review · finish-review: subagent · 8 findings · 6 resolved 2 partial (footer still a two-column list styled as an arrivals board; level filter sits in the search, not on the board sign) · plus impeccable finish review and intent vigil audit, all fixes batched once */
/* Hallmark · waive 64 · B612 Mono sets only departure times, seat numbers, flight-style codes and prices on the board and the pass · those are figures and codes the airport board prints in its own face */
/* Hallmark · dismissed 23 · yellow sign panels head each section, the declared committed posture, like the overhead signs they copy */
/* Hallmark · answered F19 · Overpass carries text at 400 and 800; B612 Mono at 700 sets only board times, codes and prices */
/* Hallmark · answered F4 · one primary recipe, the yellow sign button; the pressed board tabs and the current-page sign are wayfinding states, not second primaries */
/* Hallmark · waive 39b · departures board rows, intro video posters and boarding time slots · each control is sized by the board row, video or time it holds */
/* Hallmark · waive 78 · class, teacher, practice and level test pages are booking or exercise screens · their panel heads sit at title size beside the boarding pass */
/* Hallmark · waive 72 · details.explain on practice.html is closed by default; Chrome keeps a layout box for the hidden answer, which the check reads as overflow · open, the Arabic text sits 20px inside the box */
/* Hallmark · waive 85 · signup.html is the join page itself · its account form is the whole job of the join page, every other page ends on booking or teaching */
/* Hallmark · waive 80 · the founder asked for landmark drawings on the passport pages, the way real visa pages carry engraved scenes · they are pale line art behind the stamps, one landmark per language Luggati teaches, never the page's picture */
/* Hallmark · dismissed 3 · the three fare columns differ in width and content, set as a comparison table, not icon tiles */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- base additions ---------- */
body { font-weight: 400; }
:lang(ar), .ar { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.5; }
h1 { font-size: var(--text-display); font-weight: 800; line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 16ch; }
h2 { font-size: var(--text-section); font-weight: 800; line-height: 1.06; letter-spacing: var(--tracking-display); max-width: 22ch; }
h3 { font-size: var(--text-title); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 52ch; }
.small { font-size: var(--text-sm); color: var(--color-ink-2); }
.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
strong, b { font-weight: 800; }
a:hover { text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--color-muted); border: 3px solid var(--color-paper); border-radius: var(--radius-pill); }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font: 800 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--quiet { background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-paper-2); }
.on-board .btn--quiet { color: var(--color-board-ink); border-color: var(--color-board-ink-2); }
.on-board .btn--quiet:hover { background: var(--color-board-2); }
.on-board { --color-focus: var(--color-board-focus); }
.link { font-weight: 800; color: var(--color-ink); }
.on-board .link { color: var(--color-board-ink); }

/* ---------- the sign band (nav) ---------- */
.sign-band { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-board); color: var(--color-board-ink); border-bottom: 1px solid var(--color-board-rule); --color-focus: var(--color-board-focus); }
.sign-band .container { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) var(--space-xs); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-control); font: 800 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; }
.wordmark span { font-size: var(--text-md); }
.sign-band nav { flex: 1; min-width: 0; }
.signs { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.signs a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-control); font-weight: 800; text-decoration: none; white-space: nowrap; color: var(--color-board-ink); transition: background-color var(--dur-micro) var(--ease-out); }
.signs a:hover { background: var(--color-board-2); }
.signs a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.signs .icon { width: 20px; height: 20px; }
.sign-band .acts { display: flex; gap: var(--space-xs); margin-inline-start: auto; }
.sign-band .btn { min-height: 44px; }
.sign-band .btn--quiet { color: var(--color-board-ink); border-color: var(--color-board-ink-2); }
.sign-band .btn--quiet:hover { background: var(--color-board-2); }
.menu { display: none; }
.menu:not([open]) .signs { display: none; }
.menu-only { display: none; }
@media (max-width: 70rem) {
  .sign-band nav, .sign-band .acts .btn--quiet { display: none; }
  .menu { display: block; margin-inline-start: auto; }
  .menu summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-board-ink-2); border-radius: var(--radius-control); font-weight: 800; cursor: pointer; list-style: none; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .signs { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: var(--space-sm) var(--gutter) var(--space-lg); background: var(--color-board); border-bottom: 1px solid var(--color-board-rule); }
  .menu[open] .signs a { width: 100%; min-height: 48px; }
  .sign-band .acts { margin-inline-start: 0; }
}
@media (max-width: 40rem) { .sign-band .acts { display: none; } .menu-only { display: list-item; } .sign-band .container { gap: var(--space-sm); } }

/* ---------- sections ---------- */
.sec { padding-block: var(--section-gap); }
.sec--s { padding-block: var(--section-gap-s); }
.sec--l { padding-block: var(--section-gap-l); }
.sec--well { background: var(--color-paper-2); }
.sec--board { background: var(--color-board); color: var(--color-board-ink); }
.sec--board .lead, .sec--board .small { color: var(--color-board-ink-2); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { justify-self: start; }
.signhead { display: flex; align-items: center; gap: var(--space-md); }
.sign { display: inline-flex; align-items: center; gap: var(--space-md); justify-self: start; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-control); max-width: none; }
.sign__pict { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 4px; background: var(--color-accent-ink); color: var(--color-accent); }
.sign__pict .icon { width: 32px; height: 32px; }
.panel__h { font-size: var(--text-2xl); max-width: none; }
.waysigns { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.waysigns a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); border-radius: var(--radius-card); background: var(--color-board); color: var(--color-board-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); --color-focus: var(--color-board-focus); }
.waysigns a:hover { background: var(--color-board-2); }
.waysigns a:active { transform: translateY(1px); }
.waysigns .sign__pict { background: var(--color-accent); color: var(--color-accent-ink); }
.waysigns__name { font: 800 var(--text-title)/1.2 var(--font-display); }
.waysigns__name small { display: block; margin-top: var(--space-3xs); font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-board-ink-2); }
.waysigns__fare { font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-accent); white-space: nowrap; }
.waysigns a > .icon { width: 32px; height: 32px; color: var(--color-accent); }
@media (max-width: 40rem) { .waysigns a { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); } .waysigns a > .icon { display: none; } .sign { padding-inline-end: var(--space-md); } .sign__pict { width: 40px; height: 40px; } .sign__pict .icon { width: 24px; height: 24px; } }
.pict { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); }
.pict .icon { width: 32px; height: 32px; }
.sec--board .pict { background: var(--color-accent); }
@media (max-width: 60rem) { .head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-md); } .pict { width: 44px; height: 44px; } .pict .icon { width: 26px; height: 26px; } }

/* ---------- hero ---------- */
.hero { background: var(--color-board); color: var(--color-board-ink); padding-block: var(--space-2xl); }
.hero + .sec, .pagehead + .sec { padding-top: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "board hook" "board pass"; gap: var(--space-xl) var(--space-2xl); align-items: start; }
.hero__board { grid-area: board; } .hero__hook { grid-area: hook; display: grid; gap: var(--space-lg); } .hero__pass { grid-area: pass; }
.hero .split { align-items: center; }
.hero h1 { color: var(--color-board-ink); }
.hero .lead { color: var(--color-board-ink-2); margin-top: var(--space-md); }
.hero .side { display: grid; gap: var(--space-xl); padding-top: var(--space-sm); }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hook" "board" "pass"; } }

/* ---------- search ---------- */
.search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); align-items: end; }
.search--2 { max-width: 40rem; }
.search--4 { max-width: 56rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 48rem) { .search--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.search .pair { grid-column: 1 / -1; }
.search .btn { grid-column: 1 / -1; }
.field { display: grid; gap: var(--space-xs); }
.field label, .field .lbl { font-size: var(--text-sm); font-weight: 800; }
.on-board .field label { color: var(--color-board-ink-2); }
.input, select.input { min-height: 48px; width: 100%; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-body); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-paper-2); }
.on-board .input { border-color: var(--color-board-ink-2); }
.input[aria-invalid="true"] { border-color: var(--color-error); }

/* ---------- departures board ---------- */
.board { background: var(--color-flap); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg) var(--space-lg); color: var(--color-board-ink); --color-focus: var(--color-board-focus); }
.board__sign { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.board__title { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-control); font-weight: 800; font-size: var(--text-lg); }
.board__title .icon { width: 26px; height: 26px; }
.board__zone { font-size: var(--text-sm); color: var(--color-board-ink-2); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 var(--space-sm); }
.tabs button { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-board-rule); border-radius: var(--radius-control); background: transparent; color: var(--color-board-ink); font: 800 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.tabs button:hover { background: var(--color-board-2); }
.tabs button:active { transform: translateY(1px); }
.tabs button[aria-pressed="true"] { background: var(--color-board-ink); color: var(--color-board); border-color: var(--color-board-ink); }
.tabs button:disabled { opacity: 0.55; cursor: not-allowed; }
.rows { margin: 0; padding: 0; list-style: none; }
.rowhead, .row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 2.5rem 7.5rem; gap: var(--space-md); align-items: center; }
.rowhead { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-board-ink-2); border-bottom: 1px solid var(--color-board-rule); }
.row { position: relative; padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-board-rule); }
.row:hover { background: var(--color-board); }
.row[aria-current="true"] { background: var(--color-board-2); }
.row a.cover { position: absolute; inset: 0; z-index: var(--z-base); }
.row a.cover:focus-visible { outline: 2px solid var(--color-board-focus); outline-offset: -2px; }
.cls { display: block; font-weight: 800; font-size: var(--text-lg); line-height: 1.25; }
.who { display: block; color: var(--color-board-ink-2); font-size: var(--text-sm); margin-top: var(--space-3xs); }
.flaps { display: inline-flex; gap: var(--space-3xs); }
.ch { display: inline-grid; place-items: center; min-width: 0.95em; height: 1.5em; padding: 0 var(--space-3xs); border-radius: 3px; background: linear-gradient(180deg, var(--color-flap-hi) 0 49%, var(--color-flap-lo) 49% 51%, var(--color-flap-hi) 51%); color: var(--color-board-ink); font: 700 var(--text-flap)/1 var(--font-outlier); text-transform: uppercase; }
.ch.sp { background: none; min-width: 0.45em; }
.js .ch.flip { animation: flip 380ms var(--ease-out) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(88deg); } 55% { transform: rotateX(-88deg); } 100% { transform: rotateX(0); } }
.lvl { font: 700 var(--text-md)/1 var(--font-outlier); }
.st { font-weight: 800; font-size: var(--text-sm); }
.st--go { color: var(--color-go); }
.st--last { color: var(--color-accent); }
.st--full, .st--wait { color: var(--color-board-ink-2); }
.board__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); }
.board__empty { padding: var(--space-xl) var(--space-sm); color: var(--color-board-ink-2); }
.board__empty button { margin-top: var(--space-sm); }
@media (max-width: 48rem) {
  .board { padding: var(--space-sm); }
  .rowhead { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); padding-inline: var(--space-2xs); }
  .row > .when-cell { grid-column: 1 / -1; }
  .row .lvl { display: none; }
}

/* ---------- boarding pass ---------- */
.pass { position: relative; background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-pass); --color-focus: var(--color-ink); }
.pass__band { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-accent); border-radius: var(--radius-card) var(--radius-card) 0 0; font-weight: 800; }
.code { font: 700 var(--text-lg)/1 var(--font-outlier); }
.pass__main { padding: var(--space-lg); display: grid; gap: var(--space-md); }
.pass__route { font: 800 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--color-ink); }
.facts > div { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.facts > div:nth-child(even) { padding-inline-start: var(--space-sm); border-inline-start: 1px solid var(--color-rule); }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts--3 > div:nth-child(n) { padding-inline-start: var(--space-sm); border-inline-start: 1px solid var(--color-rule); }
.facts--3 > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.pagehead h1.h1-big { font-size: var(--text-display); }
.facts dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.facts dd { margin: var(--space-3xs) 0 0; font-weight: 800; font-size: var(--text-md); }
.pass__stub { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-lg); border-top: 2px dashed var(--color-rule); position: relative; }
.pass__stub::before, .pass__stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-board); }
.pass__stub::before { left: -11px; } .pass__stub::after { right: -11px; }
.on-paper .pass__stub::before, .on-paper .pass__stub::after { background: var(--color-paper-2); }
.price { font: 800 var(--text-2xl)/1 var(--font-display); }
.price small { display: block; font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); margin-top: var(--space-2xs); }
.js .pass.print { animation: print 520ms var(--ease-out) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-8px); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---------- table (fares, fees) ---------- */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table caption { text-align: start; }
.table th, .table td { text-align: start; vertical-align: top; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.table thead th { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); border-bottom: 1px solid var(--color-ink); }
.table tbody th { font-weight: 800; }
.table .num { font-weight: 800; white-space: nowrap; }
.scroll { overflow-x: auto; }

/* ---------- list of things (formats, crew rows) ---------- */
.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-ink); }
.list > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.list .meta { font-size: var(--text-sm); color: var(--color-ink-2); }
.list > li > p { color: var(--color-ink-2); }
.list h3, .list > li > b { font-size: var(--text-lg); }
.list .end { justify-self: end; text-align: end; }
@media (max-width: 48rem) { .list > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } .list .end { justify-self: start; text-align: start; } }

/* ---------- crew badges ---------- */
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.crew--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.badge { display: grid; gap: var(--space-md); align-content: start; }
.badge__id { display: flex; gap: var(--space-md); align-items: center; }
.mono-pic { display: grid; place-items: center; width: 64px; height: 76px; flex: none; border-radius: var(--radius-control); background: var(--color-board); color: var(--color-accent); font: 800 var(--text-xl)/1 var(--font-display); }
.badge b, .badge__id b { display: block; font-size: var(--text-lg); }
.badge__id .meta { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
.on-board .badge__id .meta { color: var(--color-board-ink-2); }
.pagehead .mono-pic { background: var(--color-board-3); }
.sessions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-ink); }
.sessions li { display: grid; grid-template-columns: 3rem 5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.badge .meta { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
.tag { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 400; border: 1px solid var(--color-muted); }
.tag--cert { background: var(--color-go-soft); border-color: var(--color-go-ink); color: var(--color-go-ink); }
.tag--cert .icon { width: 16px; height: 16px; }
.video { margin: 0; }
.video__play { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-board); color: var(--color-board-ink); cursor: pointer; overflow: hidden; }
.video { width: 100%; }
.video__play:hover .video__btn { transform: scale(1.06); }
.video__cap { position: absolute; left: var(--space-md); bottom: var(--space-md); display: grid; gap: var(--space-3xs); text-align: start; }
.video__cap b { font-size: var(--text-lg); }
.video__cap span { font-size: var(--text-sm); color: var(--color-board-ink-2); }
.video__btn { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); transition: transform var(--dur-short) var(--ease-out); }
.video__btn .icon { width: 28px; height: 28px; fill: currentColor; }
.video iframe, .video__note { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-card); }
.video__note { display: grid; place-items: center; padding: var(--space-lg); background: var(--color-board); color: var(--color-board-ink); text-align: center; }
@media (max-width: 60rem) { .crew, .crew--two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- exam route (timeline) ---------- */
.route { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-board-ink); }
.route li { position: relative; padding: var(--space-lg) var(--space-md) 0 0; }
.route li::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-board); border: 2px solid var(--color-board-ink); }
.route li.here::before { background: var(--color-accent); border-color: var(--color-accent); }
.route li:last-child::before { background: var(--color-go); border-color: var(--color-go); }
.route .when { font: 800 var(--text-lg)/1 var(--font-body); color: var(--color-accent); }
.route li:last-child .when { color: var(--color-go); }
.route b { display: block; margin-top: var(--space-xs); font-size: var(--text-lg); }
.route span { display: block; margin-top: var(--space-2xs); color: var(--color-board-ink-2); font-size: var(--text-sm); }
.route--light { border-top-color: var(--color-ink); }
.route--light li::before { background: var(--color-paper); border-color: var(--color-ink); }
.route--light .when { color: var(--color-ink); }
.route--light span { color: var(--color-ink-2); }
.route--light li:last-child .when { color: var(--color-go-ink); }
.route--light li:last-child::before { background: var(--color-go-ink); border-color: var(--color-go-ink); }
@media (max-width: 60rem) { .route, .route--3, .route--4 { grid-template-columns: minmax(0, 1fr); border-top: 0; border-inline-start: 2px solid var(--color-board-ink); } .route li { padding: 0 0 var(--space-lg) var(--space-lg); } .route li::before { top: 2px; left: -9px; } .route--light { border-inline-start-color: var(--color-ink); } }

/* ---------- passport ---------- */
.passport { position: relative; display: grid; gap: var(--space-xs); padding: var(--space-xs); background: var(--color-board-2); border-radius: var(--radius-card); box-shadow: var(--shadow-pass); }
.passport__book { display: grid; gap: var(--space-xs); }
.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); perspective: 1100px; }
.js .passport__book > .spread { grid-area: 1 / 1; }
.js .spread:not(.is-open):not(.is-under) { visibility: hidden; }
.js .spread.is-open { z-index: 2; }
.js .spread.is-under { z-index: 1; }
.js .spread.is-top { z-index: 3; }
.passport__page { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: var(--space-md); min-height: 440px; padding: var(--space-lg) var(--space-lg) var(--space-2xl); color: var(--color-ink); background-color: var(--color-paper);
  background-image: repeating-radial-gradient(circle at 50% 118%, transparent 0 7px, var(--color-guilloche-a) 7px 8px), repeating-radial-gradient(circle at -20% 30%, transparent 0 11px, var(--color-guilloche-b) 11px 12px); }
.passport__page--l { transform-origin: 100% 50%; border-radius: 4px 0 0 4px; box-shadow: inset -20px 0 18px -16px var(--color-spine); }
.passport__page--r { transform-origin: 0 50%; border-radius: 0 4px 4px 0; box-shadow: inset 20px 0 18px -16px var(--color-spine); }
.passport__page::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-page-shade); opacity: 0; pointer-events: none; }
.passport__page h3 { font-size: var(--text-lg); }
.landmark { position: absolute; inset: auto 0 0; z-index: -1; width: 100%; height: auto; color: var(--color-landmark); pointer-events: none; }
.lm-fill { fill: var(--color-paper); }
.passport__foot { position: absolute; inset: auto var(--space-lg) var(--space-md); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin: 0; font-size: var(--text-xs); color: var(--color-ink-2); }
.passport__page--r .passport__foot { flex-direction: row-reverse; }
.passport__num { font-weight: 800; font-variant-numeric: tabular-nums; }
.passport__note { justify-self: center; max-width: 18ch; padding-top: var(--space-xl); text-align: center; color: var(--color-ink-2); }
.ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--color-landmark); }
.stamps, .slots { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.stamp { width: min(100%, 196px); min-width: 0; mix-blend-mode: multiply; }
.stamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.stamp svg text, .slot svg text { font-family: var(--font-outlier); font-weight: 700; }
.stamps .stamp:nth-child(1) { justify-self: start; transform: translate(-8%, 0); }
.stamps .stamp:nth-child(2) { justify-self: end; margin-top: -18%; transform: translate(8%, 0); }
.slots { justify-items: center; padding-top: var(--space-md); }
.passport__page--l .slots { justify-items: end; }
.slot { display: grid; justify-items: center; gap: var(--space-xs); min-width: 0; text-align: center; color: var(--color-muted); }
.slot svg { width: 100%; max-width: 132px; height: auto; opacity: 0.75; }
.slot p { display: grid; gap: var(--space-3xs); }
.slot b { color: var(--color-ink); }
.slot span { font-size: var(--text-sm); color: var(--color-ink-2); }
.passport__nav { display: none; }
.js .passport__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) var(--space-2xs) 0; }
.passport__nav .btn--quiet { color: var(--color-board-ink); border-color: var(--color-board-ink-2); }
.passport__nav .btn--quiet:hover { background: var(--color-board-3); }
.passport__nav :focus-visible { outline-color: var(--color-board-focus); }
.passport__count { font-size: var(--text-sm); font-weight: 800; color: var(--color-board-ink); text-align: center; white-space: nowrap; }
.ink-violet { color: var(--color-stamp-violet); } .ink-red { color: var(--color-stamp-red); } .ink-green { color: var(--color-stamp-green); } .ink-blue { color: var(--color-stamp-blue); } .ink-muted { color: var(--color-muted); }
.stamp--wait svg { opacity: 0; }
.stamp--land svg { transform-origin: 50% 50%; animation: stampdown 560ms var(--ease-out) both; }
@keyframes stampdown { 0% { opacity: 0; transform: scale(1.5) rotate(-6deg); } 55% { opacity: 1; transform: scale(0.95) rotate(0); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp--wait svg { opacity: 1; } .stamp--land svg { animation: none; } }
@media (max-width: 48rem) {
  .spread { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .passport__page { min-height: 400px; }
  .passport__page--l { border-radius: 4px 4px 0 0; box-shadow: inset 0 -20px 18px -16px var(--color-spine); }
  .passport__page--r { border-radius: 0 0 4px 4px; box-shadow: inset 0 20px 18px -16px var(--color-spine); }
  .stamp { width: min(100%, 184px); }
  .passport__nav .btn { padding-inline: var(--space-md); }
}

/* ---------- seat map ---------- */
.seats { display: grid; grid-template-columns: repeat(3, 48px) 24px repeat(3, 48px); gap: var(--space-xs); align-items: center; }
.seat { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px 8px 4px 4px; border: 1px solid var(--color-ink); font: 700 var(--text-sm)/1 var(--font-outlier); }
.seat--taken { background: var(--color-ink); color: var(--color-paper); }
.seat--free { background: var(--color-accent); color: var(--color-accent-ink); }
.aisle { width: 24px; }
@media (max-width: 40rem) { .seats { grid-template-columns: repeat(3, 38px) 16px repeat(3, 38px); gap: var(--space-2xs); } .seat { width: 38px; height: 38px; } .aisle { width: 16px; } }
.seat-key { display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-ink-2); }
.seat-key span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.seat-key i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--color-ink); }
.seat-key .k-taken { background: var(--color-ink); } .seat-key .k-free { background: var(--color-accent); }

/* ---------- two-column page layouts ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sticky { position: sticky; top: calc(64px + var(--space-lg)); }
.stack { display: grid; gap: var(--space-lg); align-content: start; }
.stack-sm { display: grid; gap: var(--space-sm); align-content: start; }
.panel { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.panel--board { background: var(--color-board); color: var(--color-board-ink); border-color: var(--color-board); }
.panel--board .small { color: var(--color-board-ink-2); }
.pagehead { background: var(--color-board); color: var(--color-board-ink); padding-block: var(--space-2xl); }
.pagehead .lead { color: var(--color-board-ink-2); margin-top: var(--space-md); }
.pagehead h1 { color: var(--color-board-ink); font-size: var(--text-display-s); }
.crumbs { display: flex; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-board-ink-2); }
.crumbs a { color: var(--color-board-ink); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-board-ink-2); }
@media (max-width: 60rem) { .split, .split--rev { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }

.ladder { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ladder li { display: grid; place-items: center; min-width: 64px; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); font-weight: 800; color: var(--color-ink-2); }
.ladder li.on { background: var(--color-accent); border-color: var(--color-ink); color: var(--color-accent-ink); }
.countdown { display: grid; gap: var(--space-sm); justify-items: start; }
.countdown .ch { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.confirm { display: grid; gap: var(--space-sm); grid-column: 1 / -1; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); border: 1px solid var(--color-ink); }
.list > li > .status { grid-column: 1 / -1; }
.link-btn { padding: 0; border: 0; background: none; color: var(--color-ink); font: 800 var(--text-md)/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--color-accent-2); }
.status--go { color: var(--color-go-ink); }
.seats--sm { grid-template-columns: repeat(6, 36px); }
.seat--sm { width: 36px; height: 36px; }
.mono-pic--lg { width: 88px; height: 104px; font-size: var(--text-2xl); }
.choice { margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: var(--space-xs); }
.pass__status { padding: 0 var(--space-lg) var(--space-lg); }
.pass .times { margin-top: var(--space-xs); }
@media (max-width: 60rem) { .split > .sticky { order: -1; } }

/* ---------- breakdown (price lines) ---------- */
.lines { margin: 0; display: grid; }
.lines > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.lines dt { color: var(--color-ink-2); }
.lines dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.lines .total { border-bottom: 0; border-top: 1px solid var(--color-ink); }
.lines .total dt { color: var(--color-ink); font-weight: 800; }
.lines .total dd { font-size: var(--text-lg); }

/* ---------- time grid ---------- */
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-xs); }
.time { display: grid; gap: 0; min-height: 52px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); text-align: start; font: 800 var(--text-md)/1.2 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.time small { font: 400 var(--text-sm)/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.time:hover { background: var(--color-paper-2); }
.time:active { transform: translateY(1px); }
.time[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-ink); }
.time:disabled { opacity: 0.55; cursor: not-allowed; }
.choice { display: grid; gap: var(--space-xs); }
.choice label { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); cursor: pointer; }
.choice label:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-ink); }
.choice input { accent-color: var(--color-ink); width: 20px; height: 20px; }
.choice .mono { font-family: var(--font-body); font-weight: 800; }

/* ---------- note box ---------- */
.note { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.note .icon { margin-top: var(--space-3xs); }
.note--go { background: var(--color-go-soft); border-color: var(--color-go-ink); }
.status { font-weight: 800; }

/* ---------- prose (read pages) ---------- */
.prose { max-width: 68ch; display: grid; gap: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); max-width: none; }
.prose h3 { margin-top: var(--space-md); }
.prose ul { margin: 0; padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); }
.toc { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: var(--space-xs) 0; font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.toc a:hover { text-decoration: underline; }

/* ---------- dashboard tiles ---------- */
.grid-3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: start; }
.big { font: 800 var(--text-3xl)/1 var(--font-display); }
.flashcard { display: grid; gap: var(--space-xs); min-height: 160px; align-content: center; padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); text-align: start; font: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.flashcard:hover { background: var(--color-paper-2); }
.flashcard:active { transform: translateY(1px); }
.flashcard b { font-size: var(--text-xl); }
.flashcard .back { display: none; color: var(--color-ink-2); }
.flashcard[aria-pressed="true"] .back { display: block; }
.flashcard[aria-pressed="true"] .front-hint { display: none; }
.pair { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.pair .btn { flex: 1 1 12rem; }
@media (max-width: 60rem) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- quiz ---------- */
.quiz { display: grid; gap: var(--space-sm); }
.quiz fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-sm); }
.quiz legend { font: 800 var(--text-xl)/1.3 var(--font-display); margin-bottom: var(--space-md); }
.opt { display: flex; align-items: center; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-ink); }
.opt input { accent-color: var(--color-ink); width: 20px; height: 20px; }
.meter { display: flex; gap: var(--space-2xs); }
.meter i { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.meter i.on { background: var(--color-ink); }

/* ---------- footer: arrivals board ---------- */
.arrivals { background: var(--color-board); color: var(--color-board-ink); padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-board-rule); --color-focus: var(--color-board-focus); }
.arrivals__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-board-rule); }
.arrivals__sign { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-weight: 800; color: var(--color-accent); }
.arr-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); margin: 0; padding: var(--space-lg) 0 var(--space-xl); list-style: none; }
.arr-rows li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-bottom: 1px solid var(--color-board-rule); }
.arr-rows a { flex: 1; font-weight: 800; padding-block: var(--space-sm); }
.arr-rows span { font-size: var(--text-sm); color: var(--color-board-ink-2); }
.arrivals h2 { font-size: var(--text-md); font-weight: 400; color: var(--color-board-ink-2); margin-bottom: var(--space-sm); letter-spacing: 0; max-width: none; }
.arrivals a { color: var(--color-board-ink); text-decoration: none; }
.arrivals a:hover { color: var(--color-accent); }
.arrivals__base { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-lg); border-top: 1px solid var(--color-board-rule); font-size: var(--text-sm); color: var(--color-board-ink-2); }
.arrivals .wordmark { background: var(--color-accent); color: var(--color-accent-ink); }
.arrivals .wordmark span { color: var(--color-accent-ink); }
@media (max-width: 48rem) { .arr-rows { grid-template-columns: minmax(0, 1fr); } }

/* ---------- small helpers ---------- */
.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); }
.row-acts { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.sample { font-size: var(--text-sm); color: var(--color-ink-2); }
.sec--board .sample, .hero .sample, .on-board .small { color: var(--color-board-ink-2); }
.sec--band { padding-block: var(--space-2xl); }
.on-board .pass .small, .on-board .panel:not(.panel--board) .small { color: var(--color-ink-2); }
.list--roomy > li { padding-block: var(--space-xl); }
a.cls { color: var(--color-board-ink); text-decoration: none; }
a.cls:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.route--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.route--6 li:last-child:not(.here)::before { background: var(--color-paper); border-color: var(--color-ink); }
.route--6 li:last-child:not(.here) .when { color: var(--color-ink); }
.route--6 li.here::before { background: var(--color-accent); border-color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) { .js .ch.flip, .js .pass.print { animation: none; } .video__play:hover .video__btn { transform: none; } }

.on-board .pass .btn--quiet { color: var(--color-ink); border-color: var(--color-ink); }
.on-board .pass .btn--quiet:hover { background: var(--color-paper-2); }

/* ---------- messages, reviews, course builder, accounts ---------- */
.threads { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; align-content: start; }
.thread { display: grid; gap: var(--space-3xs); width: 100%; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); text-align: start; font: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.thread:hover { background: var(--color-paper-2); }
.thread:active { transform: translateY(1px); }
.thread[aria-pressed="true"] { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.thread span { color: var(--color-ink-2); }
.convo__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.bubbles { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.bubble { max-width: 46ch; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.bubble--me { justify-self: end; background: var(--color-board); color: var(--color-board-ink); }
.input--area { min-height: 96px; padding-block: var(--space-sm); resize: vertical; line-height: 1.5; }
.input--file { padding-block: var(--space-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.chips legend { width: 100%; margin-bottom: var(--space-sm); }
.chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); cursor: pointer; font-weight: 800; }
.chip:has(input:checked) { background: var(--color-accent); border-color: var(--color-ink); }
.chip input { accent-color: var(--color-ink); width: 18px; height: 18px; }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.check input { accent-color: var(--color-ink); width: 20px; height: 20px; }
.checks { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checks li span { display: grid; }
.checks .ok .icon { color: var(--color-go-ink); }
.checks .todo .icon { color: var(--color-error); }
.meter-bar { width: 100%; height: 12px; accent-color: var(--color-ink); }
.tag--ready { background: var(--color-go-soft); border-color: var(--color-go-ink); color: var(--color-go-ink); }
.tag--warn { border-color: var(--color-error); color: var(--color-error); }
.tag--wait { border-color: var(--color-muted); color: var(--color-ink-2); }
.route--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.table .pair .btn { min-height: 44px; }
.table .status { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); }

/* ---------- practice ---------- */
.deckcard { display: grid; gap: var(--space-xs); min-height: 168px; align-content: center; padding: var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); }
.deckcard b { font-size: var(--text-2xl); }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.grade .btn { flex-direction: column; gap: var(--space-3xs); min-height: 52px; padding-inline: var(--space-sm); }
.grade small { font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-2); }
@media (max-width: 40rem) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note-text { line-height: 2; }
.word { padding: 0 var(--space-2xs); border: 0; border-bottom: 2px dotted var(--color-ink); background: none; color: var(--color-ink); font: inherit; font-weight: 800; cursor: pointer; }
.word:hover { background: var(--color-paper-2); }
.word--saved { background: var(--color-accent); border-bottom-color: transparent; }
.plan-list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.plan-list li { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.tag--pass { background: var(--color-accent); border-color: var(--color-ink); color: var(--color-accent-ink); font-weight: 800; }

/* Explanation in the learner's own language, folded until they ask */
.explain { border: 1px solid var(--color-rule); border-radius: var(--radius-control); padding: var(--space-xs) var(--space-md); }
.explain summary { display: flex; align-items: center; min-height: 44px; font-weight: 800; cursor: pointer; }
.explain summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.explain p { margin: var(--space-xs) 0 var(--space-sm); }