/* ==========================================================================
   MERIDIAN — the platform's visual system (2026-07-23, full visual overhaul)
   Replaces the old blue-admin sheet AND the appended Kadam layer with ONE
   coherent system, so every page (legacy markup and .k-* markup alike) looks
   like the same premium product instead of two half-migrated designs.

   PALETTE INTENT
     ink        deep navy-black   — text, headers, primary actions ("doing")
     ivory      warm off-white    — the canvas; paper is pure white on top of it
     emerald    deep green        — the brand: links, focus, "you are here"
     gold       muted brass       — premium accent ONLY (rules, active markers)
     6 tones    ok/check/stop/unknown/noted/locked — colour = STATE, never decoration

   RULES THAT SURVIVE THE REDESIGN
     · colour carries meaning; a button is never coloured to look pretty
     · "we could not verify" keeps its indigo + dashed border (prints in greyscale)
     · every interactive target is >=44px on touch
     · the apply pack must print cleanly on a cheap printer
   ========================================================================== */

:root{
  /* ==========================================================================
     EVIDENCE — the 2026-08-15 redesign (handoff: "Admission Puzzle — Frontend
     Design Handoff", §3). Replaces OXBLOOD-ON-BROWN-PAPER.

     The central idea is EVIDENCE BECOMING CONFIDENCE:
       BLUE  (#175DEB) = pending / active / actionable — buttons, links, focus,
             "you are here", the first half of every evidence line.
       MINT  (#079B72) = human-confirmed, source-verified — the second half of
             every evidence line, confirmed badges, verified rows.
       NAVY  (#071A38 → #0B1F3A) = the trust surfaces: sidebar, dark CTA fields,
             headings.
       ICE   (#F7FAFE) = the canvas. NO cream, NO beige page washes (handoff §3).

     Two AA corrections to the handoff's literal values, because handoff rule 10
     (WCAG 2.1 AA) outranks the swatch: mint #079B72 reaches only 3.53:1 on white
     and amber #B86600 only 4.25:1, so the TEXT tokens below are darkened to
     #07795A (5.40:1) and #A65A00 (5.14:1). The handoff hexes stay in use for
     icons, rules and fills, where 3:1 is the bar.
     ========================================================================== */
  --canvas:#F7FAFE;           /* ice-50 — the main page background */
  --paper:#FFFFFF;
  --paper-2:#F7FAFE;
  --paper-3:#EDF3FB;
  --hair:#D9E2EF;
  --hair-2:#C2D0E4;

  /* ---- ink: navy, cool. Nothing warm survives. ---- */
  --ink-900:#071A38;          /* navy-950 — sidebar, deepest CTA field */
  --ink-800:#0B1F3A;
  --ink-1:#0B1F3A;            /* navy-900 — body text + headings */
  --ink-2:#29415F;            /* navy-700 — secondary text        */
  /* Muted / meta text. Measured on the running app 2026-08-15: the handoff's #5C6B84 reaches
     only 4.44:1 on --paper-3 (the pale-ice chip fill), which is a real AA failure at 14px.
     Darkened until it clears 4.5:1 on the DARKEST surface it is ever printed on:
     5.40:1 on paper · 5.16:1 on canvas · 4.84:1 on paper-3. */
  --ink-3:#5C6B84;
  --ink-inv:#EAF1FB;          /* text on dark surfaces            */

  /* ---- brand = the action blue ---- */
  --brand:#175DEB;
  --brand-500:#2F66F6;        /* accent / progress / focus, on dark surfaces */
  --brand-600:#124FCB;
  --brand-700:#0E3F9F;
  --brand-tint:#E9F0FF;
  --brand-tint-2:#D6E4FF;

  /* ---- accent = MINT (verified). Token names kept so every old rule re-skins. ---- */
  --gold:#079B72;             /* rules, marks, borders, evidence lines            */
  --gold-2:#50E3B3;           /* mint-400 — on dark surfaces only                 */
  --gold-ink:#07795A;         /* mint used as TEXT on paper — clears 4.5:1 at 12px */
  --gold-tint:#E4F8F1;

  /* ---- six semantic tones — no seventh is permitted ---- */
  --t-ok:#07795A;      --t-ok-bg:#E4F8F1;
  --t-check:#A65A00;   --t-check-bg:#FFF2D9;
  --t-stop:#BE2F2F;    --t-stop-bg:#FDE8E8;
  --t-unknown:#4B4A8F; --t-unknown-bg:#ECEBF8;   /* WE COULD NOT VERIFY — signature */
  --t-noted:#29415F;   --t-noted-bg:#E9F0FF;
  --t-locked:#6B7488;

  /* ---- evidence line: the signature component (handoff §4) ---- */
  --ev-pending:#175DEB; --ev-confirmed:#079B72; --ev-track:#D9E2EF;

  /* legacy aliases so any un-migrated rule/inline style still resolves */
  --bg:var(--canvas); --card:var(--paper); --ink:var(--ink-1); --mut:var(--ink-3);
  --line:var(--hair); --brand2:var(--brand-600);
  --ok:var(--t-ok); --okbg:var(--t-ok-bg); --warn:var(--t-check); --warnbg:var(--t-check-bg);
  --bad:var(--t-stop); --badbg:var(--t-stop-bg); --info:var(--t-noted); --infobg:var(--t-noted-bg);
  --unk:var(--t-unknown); --unkbg:var(--t-unknown-bg);
  --road:var(--gold); --road-tint:var(--gold-tint);

  /* ---- elevation: cool-toned only, never brown (handoff §3) ---- */
  --sh-1:0 1px 2px rgba(11,31,58,.05), 0 1px 3px rgba(11,31,58,.05);
  --sh-2:0 2px 4px rgba(11,31,58,.04), 0 12px 32px rgba(11,31,58,.08);
  --sh-3:0 20px 52px rgba(11,31,58,.14);
  --elev:var(--sh-2);

  /* ---- type ---- */
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Roboto Mono",Consolas,"DejaVu Sans Mono",monospace;
  --t-display:2rem; --t-hero:1.625rem; --t-title:1.1875rem;
  --t-body:1rem; --t-sm:.875rem; --t-xs:.75rem;

  /* ---- rhythm ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* handoff §3: buttons 12px · cards 16px · hero/feature panels 24px · pills 999px */
  --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink-1);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Text links use the darker blue: #175DEB only reaches 4.35:1 on the cool canvas. */
a{color:var(--brand-600);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}

h1,h2,h3{font-weight:700;letter-spacing:-.018em;color:var(--ink-1)}
h1{font-size:var(--t-hero);line-height:1.24;margin:0 0 var(--s2)}
h2{font-size:var(--t-title);line-height:1.34;margin:0 0 var(--s3)}
h3{font-size:var(--t-body);line-height:1.4;margin:0 0 var(--s2)}
p{margin:0 0 var(--s3)}

.sub{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 var(--s5);max-width:68ch}
.note{color:var(--ink-2);font-size:var(--t-sm)}
.small{font-size:var(--t-sm)}
.mut{color:var(--ink-3)}
.meta{font-size:var(--t-sm);color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
hr{border:none;border-top:1px solid var(--hair);margin:var(--s5) 0}

/* ==========================================================================
   HEADER — white app chrome (2026-08-03 redesign).
   Phones and tablets get a quiet white TOP BAR; from 1024px up the same markup
   becomes a fixed LEFT SIDEBAR (the reference dashboard layout) — no template
   change, so every page gets the shell at once.
   ========================================================================== */
header{
  background:var(--paper-2);
  color:var(--ink-1);
  padding:var(--s3) var(--s6);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
  box-shadow:var(--sh-1);
}
header .logo{
  font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:var(--s3);color:var(--ink-1);text-decoration:none;
  min-height:44px;
}
header .logo:hover{text-decoration:none;color:var(--ink-1)}
header .logo .mark{flex:none;border-radius:8px}
header .logo .lw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
header .logo .lw b{font-weight:800;letter-spacing:-.02em}
header .logo .lw i{
  font:600 9px/1 var(--font);font-style:normal;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap;
}
header nav{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-left:auto}
header nav a{
  color:var(--ink-2);font-size:var(--t-sm);font-weight:600;
  padding:6px 2px;border-bottom:1.5px solid transparent;
  display:inline-flex;align-items:center;gap:9px;
}
header nav a:hover{color:var(--ink-1);text-decoration:none;border-bottom-color:var(--brand)}
header nav a .nico{width:17px;height:17px;flex:none;color:var(--ink-3)}
header nav a:hover .nico{color:var(--brand-600)}
header nav form{display:inline-flex}
header .btn.small.sec{
  background:var(--paper);color:var(--ink-1);
  border:1px solid var(--hair-2);
}
header .btn.small.sec:hover{background:var(--paper-2);color:var(--ink-1)}
header .who{
  display:none;                             /* only the sidebar shows the account chip */
  align-items:center;gap:10px;padding:10px 12px;margin-top:var(--s3);
  border:1px solid var(--hair);border-radius:12px;background:var(--paper-2);
  text-decoration:none;color:inherit;       /* it is a LINK to the profile (zinc 2026-08-16) */
  min-height:44px;                          /* the account chip is a tap target like any other */
}
header .who:hover,header .who:focus-visible{background:var(--brand-tint);border-color:var(--brand);text-decoration:none}
header .who:hover .wmail,header .who:focus-visible .wmail{color:var(--brand-700)}
header .who-go{width:14px;height:14px;flex:none;margin-left:auto;color:var(--ink-3)}
header .who:hover .who-go{color:var(--brand-600)}
header .who .avi{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-700);
  display:flex;align-items:center;justify-content:center;
  font:700 var(--t-sm)/1 var(--font);text-transform:uppercase;
}
header .who .wmail{
  font-size:var(--t-xs);color:var(--ink-2);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

main{max-width:1060px;margin:var(--s7) auto var(--s8);padding:0 var(--s5)}

/* ---- ≥1024px: the top bar becomes the reference's left sidebar ---- */
@media(min-width:1024px){
  body{padding-left:248px}
  header{
    position:fixed;left:0;top:0;bottom:0;width:248px;z-index:50;
    flex-direction:column;align-items:stretch;gap:var(--s5);
    padding:var(--s5) var(--s4);
    border-bottom:none;border-right:1px solid var(--hair);
    overflow-y:auto;box-shadow:none;
  }
  header nav{flex-direction:column;align-items:stretch;gap:3px;margin-left:0}
  header nav a{
    padding:10px 12px;min-height:44px;border-radius:10px;border-bottom:none;
  }
  header nav a:hover{background:var(--paper-2);border-bottom:none}
  header nav a.on{background:var(--brand-tint);color:var(--brand-700)}
  header nav a.on .nico{color:var(--brand-700)}
  header nav form{margin-top:var(--s3)}
  header nav .btn.small.sec{width:100%}
  header .who{display:flex;margin-top:auto}
}
/* ---- below 1024px: the sidebar becomes a top bar, and NOTHING may vanish with it -------------
   It used to hide Tests, Apply and Sources on a phone ("they are all reachable from the road"),
   and it hid the account chip outright. Measured on a 320px frame, 2026-08-16:
     · /students/387 (where a student reads his programmes) had ZERO links to the apply kit;
     · /me/profile — the page zinc asked for, with delete-account on it — was reachable from
       NO page at all on a phone, because the chip was its only door.
   So the whole menu stays, in one swipeable row (a stack of 8 would be a 3-row header), and the
   chip stays as avatar + chevron: 44px, no width cost, profile one tap from every page. */
@media(max-width:1023px){
  header nav{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;gap:var(--s4);
    /* the fade says "there is more this way" without costing a row */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  }
  header nav::-webkit-scrollbar{display:none}
  header nav a,header nav form{flex:none;scroll-snap-align:start}
  header nav a.side-only{display:inline-flex}
  header .who{display:flex;margin:0 0 0 auto;padding:6px;gap:4px}
  header .who .wmail{display:none}       /* the avatar IS the identity; the email needs a row */
  /* Three stacked rows — logo, menu, chip — is 165px of a 568px phone before the page starts.
     The chip is 63px wide and the logo 183px, so they share row one and the menu takes row two. */
  header{gap:var(--s2) var(--s4);padding:var(--s2) var(--s4)}
  header .logo{order:1}
  header .who{order:2}
  header nav{order:3;width:100%;margin-left:0}
}

/* ==========================================================================
   SURFACES
   ========================================================================== */
.card,.k-card,.scard{
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:var(--s5) var(--s5);
  margin-bottom:var(--s4);
  box-shadow:var(--sh-1);
}
.card{padding:var(--s6)}
.k-card.float,.card.float{box-shadow:var(--sh-2)}

/* ==========================================================================
   BUTTONS — BLUE for doing (zinc, 2026-08-03).
   This replaces the original "buttons are ink, the only coloured button is
   Confirm" rule. His instruction was explicit: the black button had to go and
   the landing page's blue should carry the actions. The rule it replaces still
   holds in spirit — blue now MEANS "a thing you can do", it is not decoration,
   and Confirm keeps its own colour below so the one irreversible action still
   looks different from every other button.
   ========================================================================== */
.btn,.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);
  background:var(--brand);color:#fff;
  border:1px solid var(--brand);border-radius:var(--r-sm);
  font:600 var(--t-sm)/1 var(--font);letter-spacing:.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;max-width:100%;
  box-shadow:var(--sh-1);
  transition:background-color .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
}
.btn:hover,.k-btn:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff;text-decoration:none;box-shadow:var(--sh-2)}
.btn:active,.k-btn:active{transform:translateY(1px);box-shadow:var(--sh-1)}

.btn.sec,.k-btn.ghost{
  background:var(--paper);color:var(--ink-1);border:1px solid var(--hair-2);box-shadow:none;
}
.btn.sec:hover,.k-btn.ghost:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink-1)}

.btn.ghost{background:var(--brand-tint);color:var(--brand-700);border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--brand-tint-2);color:var(--brand-700);border-color:transparent}

/* Confirm is the one irreversible action a student takes — it stays GREEN so it can never be
   mistaken for an ordinary blue button now that every button is blue. */
.btn.okbtn{background:var(--t-ok);border-color:var(--t-ok)}
.btn.okbtn:hover{background:#05604A;border-color:#05604A}

.btn.small{min-height:38px;padding:0 var(--s3);font-size:var(--t-xs);border-radius:var(--r-sm)}
.btn.big,.k-btn{min-height:52px;padding:0 var(--s6);font-size:var(--t-body)}
.btn[disabled],.k-btn[disabled]{background:var(--t-locked);border-color:var(--t-locked);cursor:not-allowed;box-shadow:none}
form.inline{display:inline}

/* on touch, the primary action spans the card */
@media(max-width:599px){ .k-btn{width:100%} }
@media(min-width:600px){ .k-btn{min-width:200px} }

/* ==========================================================================
   STATUS — pills and badges share one shape so the language reads as one system
   ========================================================================== */
.badge,.k-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700;line-height:1.5;white-space:nowrap;
  border:1px solid transparent;
  max-width:100%;                /* never wider than the card that holds it */
}
/* Measured at 375px (2026-08-15): /me/practice and the interview-prep page scrolled sideways
   because some pills carry a SENTENCE, not a status word — "this is German Missions, India's
   own page" is 390px wide and nowrap pushed the page 113px past the viewport. Below the tablet
   breakpoint a pill is allowed to wrap onto a second line; a two-line pill is always better
   than a page a thumb has to drag left and right. */
@media(max-width:900px){
  .badge,.k-pill{white-space:normal;overflow-wrap:normal;word-break:normal;text-align:left;flex-shrink:0}
  .k-proof>div{flex-wrap:wrap}
  /* …but "↻ Read its page now" is a BUTTON wearing the pill's clothes, and `overflow-wrap:anywhere`
     let it collapse to 23px wide × 192px tall — one letter per line — inside the card's grid at
     390px (measured 2026-08-16, 19 of them on one page). A button may wrap between WORDS only. */
  .readnow{overflow-wrap:normal;word-break:normal;min-width:11.5rem;justify-content:center;text-align:center}
  /* Same defect, same cause, on the buttons: "Start a practice interview for Birmingham City
     University" is a 337px label inside a 293px column, and nowrap pushed /me/practice and the
     interview-prep page 23px sideways at 375px. MISTAKES.md already records this class —
     "layout fights the copy" — so the fix is to let the copy win on a narrow screen. */
  .btn,.k-btn{white-space:normal;text-align:center;line-height:1.3;padding-block:10px}
}
.b-ok,.k-pill.ok      {background:var(--t-ok-bg);      color:var(--t-ok);      border-color:rgba(7,121,90,.16)}
.b-warn,.k-pill.check {background:var(--t-check-bg);   color:var(--t-check);   border-color:rgba(166,90,0,.18)}
.b-bad,.k-pill.stop   {background:var(--t-stop-bg);    color:var(--t-stop);    border-color:rgba(190,47,47,.16)}
.b-info,.k-pill.noted {background:var(--t-noted-bg);   color:var(--t-noted);   border-color:rgba(41,65,95,.16)}
/* unverified keeps a DASHED border so it still reads on a greyscale printout */
.b-unk,.k-pill.unknown{background:var(--t-unknown-bg); color:var(--t-unknown); border:1px dashed var(--t-unknown)}
.b-bad,.k-pill.stop   {background:var(--t-stop-bg);    color:var(--t-stop);    border-color:rgba(190,47,47,.22)}

.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0}
.chip{
  background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:5px 13px;
  font-size:var(--t-xs);font-weight:500;color:var(--ink-2);
}

/* ==========================================================================
   STEPPER (legacy wizard) — quiet rail, brass marks the step you are on
   ========================================================================== */
.stepper{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s5) 0 var(--s3)}
.step{
  flex:1;min-width:min(150px,100%);background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--ink-2);
}
.step b{display:block;font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;font-weight:700}
.step.done{background:var(--t-ok-bg);border-color:rgba(7,121,90,.22)}
.step.done b{color:var(--t-ok)}
.step.now{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);background:var(--paper)}
.step.now b{color:var(--brand-700)}
.nextline{
  background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--gold);
  border-radius:var(--r-md);padding:var(--s3) var(--s5);
  font-size:var(--t-sm);margin:var(--s3) 0 var(--s5);box-shadow:var(--sh-1);
}

/* ==========================================================================
   PANELS — collapsible, one job at a time
   ========================================================================== */
details.panel{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  margin-bottom:var(--s4);box-shadow:var(--sh-1);overflow:hidden;
}
details.panel>summary{
  list-style:none;cursor:pointer;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--t-title);font-weight:700;letter-spacing:-.015em;
}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::after{
  content:"";margin-left:var(--s2);width:8px;height:8px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .16s ease;
}
details.panel[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.panel>summary:hover{background:var(--paper-2)}
details.panel>summary .st{margin-left:auto;font-size:var(--t-xs);font-weight:600;color:var(--ink-3);letter-spacing:.02em}
details.panel .inner{padding:var(--s2) var(--s5) var(--s5)}
details.panel[open]>summary{border-bottom:1px solid var(--hair);background:var(--paper-2)}
.locknote{
  color:var(--ink-2);font-size:var(--t-sm);background:var(--paper-3);
  border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--s3) var(--s4);
}

/* ==========================================================================
   TABLES — hairlines only, micro-caps headers, tabular numerals
   ========================================================================== */
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
/* Document-row actions sit right on a wide screen (this was an inline style on the td until
   2026-07-25 — it fought the mobile stacked-card rule and needed !important to beat it).
   `end`, not `right`, so it follows writing direction. The 640px block below overrides it. */
table.doclist td.actions{text-align:end;white-space:nowrap}
th{
  color:var(--ink-3);text-align:left;font-weight:700;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;
  padding:var(--s2) var(--s2);border-bottom:1px solid var(--hair-2);
}
td{padding:var(--s3) var(--s2);border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-1)}
tr:last-child td{border-bottom:none}

/* ==========================================================================
   FORMS
   ========================================================================== */
label{
  display:block;font-size:var(--t-xs);font-weight:700;color:var(--ink-2);
  letter-spacing:.02em;margin:var(--s4) 0 var(--s1);
}
input,select,textarea{
  width:100%;padding:12px 14px;min-height:46px;
  border:1px solid var(--hair-2);border-radius:var(--r-sm);
  font-size:var(--t-body);font-family:inherit;color:var(--ink-1);
  background:var(--paper);
  transition:border-color .14s ease, box-shadow .14s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}
textarea{min-height:96px;line-height:1.6}
input[type=file]{padding:10px 12px;background:var(--paper-2);border-style:dashed}
/* Checkboxes opt out of the form-control sizing, but keep a real hit box: the 2.5.8 floor
   below sizes them. `.tickbox` is what the country pickers used to say inline as width:auto —
   an inline style beat the floor and left them 13px wide. */
input[type=checkbox],input[type=checkbox].tickbox{min-height:0}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--s5)}
.checkbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0}
.conf-low{background:var(--t-stop-bg);border-color:rgba(190,47,47,.4)}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert{
  background:var(--t-check-bg);border:1px solid rgba(166,90,0,.28);
  border-left:3px solid var(--t-check);color:#8A4B00;
  padding:var(--s3) var(--s5);border-radius:var(--r-md);
  margin-bottom:var(--s4);font-size:var(--t-sm);
}
.alert.ok{background:var(--t-ok-bg);border-color:rgba(7,121,90,.28);border-left-color:var(--t-ok);color:#05604A}
.alert-list ul{margin:6px 0 0 18px;padding:0}
.alert-list li{margin:3px 0}
.alert.stop{background:var(--t-stop-bg);border-color:rgba(190,47,47,.28);border-left-color:var(--t-stop);color:#9E2020}

/* ==========================================================================
   MATCHES / EVIDENCE
   ========================================================================== */
.evi{
  border:1px solid var(--hair);border-radius:var(--r-md);
  margin:var(--s3) 0;overflow:hidden;background:var(--paper);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.evi:hover{border-color:var(--hair-2);box-shadow:var(--sh-1)}
.evi summary{
  padding:var(--s4);cursor:pointer;display:flex;gap:var(--s2);
  align-items:center;flex-wrap:wrap;list-style:none;
}
.evi summary::-webkit-details-marker{display:none}
.evi[open]{box-shadow:var(--sh-2);border-color:var(--hair-2)}
.evi[open] summary{background:var(--paper-2);border-bottom:1px solid var(--hair)}
.evi .body{padding:var(--s3) var(--s4) var(--s4)}
.evrow{
  display:grid;grid-template-columns:190px 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--hair);font-size:var(--t-sm);
}
.evrow:first-child{border-top:none}
.evrow .req{font-weight:700}
/* Source stamps are 12px mono — they must clear 4.5:1, so they use ink-2, not the muted tone. */
.src,.k-stamp{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
}
.k-stamp{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.k-stamp.secondary{color:var(--t-check)}
.plainline{font-size:var(--t-sm);color:var(--ink-3);width:100%;padding-left:2px}

/* ==========================================================================
   DASHBOARD (admin)
   ========================================================================== */
.hero{
  display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--ink-900) 0%,#0B2451 55%,#123A72 100%);
  color:var(--ink-inv);border-radius:var(--r-xl);
  padding:var(--s6) var(--s7);margin-bottom:var(--s5);
  box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
}
.hero .htext{flex:1;min-width:min(260px,100%)}
.hero h2{color:#fff;font-size:var(--t-hero);margin:0 0 var(--s2)}
.hero p{margin:0;color:rgba(247,250,254,.74);font-size:var(--t-sm)}
.hero .btn{background:var(--paper);color:var(--ink-1);border-color:var(--paper)}
.hero .btn:hover{background:var(--gold-tint);border-color:var(--gold-tint);color:var(--ink-1)}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%), 1fr));gap:var(--s4)}
.scard{padding:var(--s5);margin-bottom:0;transition:box-shadow .14s ease,transform .08s ease}
.scard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.scard h3{margin:0 0 var(--s1)}
.dlrow{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--hair);font-size:var(--t-sm)}
.dlrow:last-child{border-bottom:none}
.dldate{min-width:120px;font-weight:700;font-variant-numeric:tabular-nums}
.dlsoon{color:var(--t-stop)}
.dlok{color:var(--t-noted)}

/* ==========================================================================
   DOCUMENT REVIEW
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* A grid track defaults to min-width:auto, so one wide child (the document-type <select>, whose
   min-content is its longest option) pushed the whole PAGE to 497px on a 375px phone. min-width:0
   lets the column shrink and keeps the page from scrolling sideways. */
.split>*,.frow>*{min-width:0}
select{max-width:100%}
@media(max-width:900px){.split{grid-template-columns:1fr}.evrow{grid-template-columns:1fr;gap:var(--s1)}}
.docimg{max-width:100%;border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.kit-head{border-bottom:2px solid var(--gold);padding-bottom:var(--s3);margin-bottom:var(--s5)}
.copyblock{
  background:var(--ink-900);color:#EAF1FB;border-radius:var(--r-md);
  padding:var(--s5);font-family:var(--mono);font-size:var(--t-xs);
  line-height:1.7;white-space:pre-wrap;border:1px solid rgba(255,255,255,.06);
}

/* ==========================================================================
   THE ROAD (student home)
   ========================================================================== */
.k{font-family:var(--font);color:var(--ink-1);font-size:var(--t-body);line-height:1.6}
.k h1{font-size:var(--t-hero)}
.k p{max-width:64ch}
.k .kicker{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);margin-bottom:var(--s2);
}

/* THE ONE ACTION — a single horizontal block: icon · words · the button (handoff §6.1).
   It keeps the accent rule on top, so "wait" and "blocked" still read as different states. */
.k-next{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--brand);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);margin-bottom:var(--s5);box-shadow:var(--sh-2);
}
.knext-ico{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;
  border-radius:16px;background:var(--brand);color:#fff;
}
.knext-ico svg{width:24px;height:24px}
.k-next.wait{border-top-color:var(--t-noted)}
.k-next.wait .kicker{color:var(--t-noted)}
.k-next.wait .knext-ico{background:var(--t-noted)}
.k-next.blocked{border-top-color:var(--t-check)}
.k-next.blocked .kicker{color:var(--t-check)}
.k-next.blocked .knext-ico{background:var(--t-check)}
.k-next h1{margin-bottom:var(--s2);font-size:var(--t-hero);line-height:1.18}
.k-next p{color:var(--ink-2);margin-bottom:0}
.k-next .k-btn{flex:none}
@media(max-width:820px){
  .k-next{grid-template-columns:auto minmax(0,1fr);gap:var(--s4)}
  .k-next .k-btn{grid-column:1 / -1;width:100%}
}

/* ---- the progress header that replaced four disconnected metric tiles --------- */
.phead{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4);
}
.phead .k{display:block;font:700 10.5px/1.3 var(--font);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.phead-n b{display:block;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--ink-1);
  font-variant-numeric:tabular-nums;margin:2px 0}
.phead-bar{position:relative;display:flex;align-items:center;gap:10px}
.phead-bar .evbar{flex:1}
.phead-dots{display:flex;align-items:center;gap:8px;flex:none}
.phead-next{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--s3);
  min-height:52px;padding:6px 10px 6px 16px;border-radius:var(--r-sm);
  border:1px solid var(--hair);text-decoration:none;color:var(--ink-1);max-width:270px;
}
.phead-next:hover{background:var(--brand-tint);border-color:var(--brand);text-decoration:none}
.phead-next .k,.phead-next b,.phead-next .nx{grid-column:1}
.phead-next b{font-size:var(--t-sm);color:var(--ink-1)}
.phead-next .nx{font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead-next svg{grid-column:2;grid-row:1 / 4;width:18px;height:18px;color:var(--brand)}
@media(max-width:900px){
  .phead{grid-template-columns:1fr;gap:var(--s3)}
  .phead-next{max-width:none}
}

.k-road{list-style:none;margin:0;padding:0}
.k-stage{position:relative;padding:0 0 var(--s5) var(--s6);border-left:2px solid var(--hair);margin-left:11px}
.k-stage:last-child{border-left-color:transparent;padding-bottom:0}
.k-stage .dot{
  position:absolute;left:-12px;top:0;width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--paper);border:2px solid var(--hair);color:var(--ink-3);
  font:700 var(--t-xs)/18px var(--font);text-align:center;
}
.k-stage.done .dot{background:var(--t-ok);border-color:var(--t-ok);color:#fff}
/* White numeral on the blue accent (4.6:1) — the old dark-on-brass pairing fails on blue. */
.k-stage.now .dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--brand-tint)}
.k-stage.now{border-left-color:var(--brand)}
.k-stage .st-title{font-weight:700;line-height:1.35}
.k-stage .st-status{font-size:var(--t-sm);color:var(--ink-3)}

.k-proof{border-top:1px solid var(--hair);padding:var(--s3) 0}
.k-proof:first-of-type{border-top:none}
.k-proof .p-req{font-weight:700;font-size:var(--t-sm)}
.k-proof .p-note{color:var(--ink-2);font-size:var(--t-sm);margin:var(--s1) 0 0}

.k-prog{
  display:block;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s3);
  color:inherit;text-decoration:none;transition:box-shadow .14s ease,border-color .14s ease,transform .08s ease;
}
.k-prog:hover{text-decoration:none;background:var(--paper);border-color:var(--hair-2);box-shadow:var(--sh-2);transform:translateY(-1px)}
.k-prog .p-name{font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-prog .p-inst{font-size:var(--t-sm);color:var(--ink-3)}
.k-cc{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  background:var(--t-noted-bg);color:var(--t-noted);padding:2px 7px;border-radius:var(--r-sm);
}
.k-task{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:var(--s2) 0;border-top:1px solid var(--hair)}
.k-task:first-of-type{border-top:none}
.k-task .t-main{flex:1;min-width:0}
.k-task .t-name{font-weight:700;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-lock{
  background:var(--gold-tint);border:1px solid rgba(7,155,114,.35);
  border-radius:var(--r-lg);padding:var(--s6);text-align:center;
}

/* ==========================================================================
   THE DASHBOARD (/me) — 2026-08-03.
   The road page used to be three stacked cards in a 1060px column: one giant
   action, a vertical list, a paragraph. It read as a half-finished page.
   This is the same data laid out as a real home screen: welcome row, the one
   action, the road across the page, then main + side columns.
   Every number in it is read from the student's own rows — there is no score,
   no stock photo and no estimated budget anywhere in this block.
   ========================================================================== */
.dash{max-width:1240px}
main:has(.dash){max-width:1240px}

/* ---- the two doors, pinned to the top of the road (zinc 2026-08-03) ---- */
.cbar{
  position:sticky;top:0;z-index:45;
  /* Opaque, not backdrop-filter: a blurred sticky bar repaints on every scroll frame and
     this product's user is on a cheap Android phone. */
  background:var(--canvas);
  border-bottom:1px solid var(--hair);
  margin:calc(var(--s7) * -1) 0 var(--s5);   /* sit above main's top margin */
  padding:var(--s2) var(--s5);
}
.cbar-in{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:flex-end;
}
.cbar-lbl{
  margin-right:auto;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.cbar-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);
  font:700 var(--t-sm)/1 var(--font);cursor:pointer;white-space:nowrap;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
.cbar-btn svg{width:17px;height:17px;flex:none}
.cbar-human{background:var(--paper);color:var(--brand-600);border:1.5px solid var(--brand)}
.cbar-human:hover{background:var(--brand-tint);text-decoration:none;color:var(--brand-700)}
.cbar-zinc{background:var(--brand);color:#fff;border:1.5px solid var(--brand);box-shadow:var(--sh-1)}
.cbar-zinc:hover{background:var(--brand-600);border-color:var(--brand-600)}
.cbar-dot{width:7px;height:7px;border-radius:50%;background:#50E3B3;flex:none}
.cb-short{display:none}
/* ---- the bar on a phone: ONE row, never three (measured 2026-08-16) --------------------------
   The full-width-buttons version stacked to 150px on a 320x568 screen. The bar is STICKY, so that
   was 26% of the phone permanently gone, on every page, now that it is in the shell. One row of
   two short-labelled buttons is ~52px and still hits the 44px touch floor. */
@media(max-width:640px){
  .cbar{margin:calc(var(--s5) * -1) 0 var(--s4);padding:6px var(--s4)}
  .cbar-lbl{display:none}                       /* the two buttons already say what they are */
  .cbar-in{justify-content:stretch;flex-wrap:nowrap;gap:var(--s2)}
  .cbar-btn{flex:1 1 0;min-width:0;padding:0 var(--s3);font-size:var(--t-xs);white-space:nowrap}
  .cb-full{display:none}
  .cb-short{display:inline}
}

.dash-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5);
}
.dash-head h1{font-size:var(--t-display);line-height:1.15;margin:0}

.railcard{padding:var(--s5) var(--s6)}
.railcard h2{margin-bottom:var(--s4)}
.hrail{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);
}
.hstep{display:flex;align-items:center;gap:var(--s3);position:relative;min-width:0}
/* Every stage is a link (zinc 2026-08-16). It has to LOOK openable without becoming five buttons
   competing with the one action above it: no fill at rest, a tinted card and a chevron on hover
   or keyboard focus. The whole row is the target, not the words inside it. */
.hstep-l{
  display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1 1 auto;
  padding:8px 10px;margin:-8px -4px;border-radius:var(--r-md);
  color:inherit;text-decoration:none;border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.hstep-l:hover,.hstep-l:focus-visible{background:var(--paper-2);border-color:var(--hair);text-decoration:none}
.hstep-l:hover .txt b,.hstep-l:focus-visible .txt b{color:var(--brand-700)}
.hstep-go{width:15px;height:15px;flex:none;margin-left:auto;color:var(--ink-3);opacity:0;transition:opacity .12s ease}
.hstep-l:hover .hstep-go,.hstep-l:focus-visible .hstep-go{opacity:1}
/* A thumb has no hover, so the chevron is always there on touch — it is the only cue that the
   row opens something. */
@media(pointer:coarse){
  .hstep-go{opacity:.65}
  .hstep-l{min-height:44px}
}
/* The connector is the evidence line: a solid MINT rule behind the steps that are done,
   BLUE up to the step you are on, and a pale track for what is still ahead. It replaces a
   dotted grey rule that read as "broken" rather than "not yet". */
.hstep:not(:last-child)::after{
  content:"";position:absolute;right:calc(var(--s4) * -1);top:17px;width:var(--s4);height:2px;
  background:var(--ev-track);border-radius:2px;
}
.hstep.done:not(:last-child)::after{background:var(--ev-confirmed)}
.hstep.now:not(:last-child)::after{background:var(--ev-pending)}
.hstep .num{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--paper-3);color:var(--ink-3);
  font:700 var(--t-sm)/1 var(--font);
}
.hstep .txt{min-width:0}
.hstep .txt b{display:block;font-size:var(--t-sm);line-height:1.3}
.hstep .txt span{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.35}
.hstep.done .num{background:var(--t-ok);border-color:var(--t-ok);color:#fff}
.hstep.now .num{background:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--brand-tint)}
.hstep.now .txt b{color:var(--brand-700)}
.hstep.now .txt span{color:var(--brand-600);font-weight:600}

.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.dmain{min-width:0}
.dside{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.sidecard{padding:var(--s5);margin-bottom:0}
.sidecard h2{font-size:var(--t-body);margin:0}
.card-h{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);
}
.card-h h2{margin:0}

/* --- programme cards --- */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.pcard{
  display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);
  transition:box-shadow .14s ease,border-color .14s ease,transform .08s ease;
}
.pcard:hover{text-decoration:none;border-color:var(--hair-2);box-shadow:var(--sh-2);transform:translateY(-1px)}
.pban{position:relative;display:flex;align-items:center;gap:10px;height:74px;padding:var(--s3) var(--s4)}
.pban.b1{background:linear-gradient(135deg,#E9F0FF 0%,#F7FAFE 90%)}
.pban.b2{background:linear-gradient(135deg,#E4F8F1 0%,#F7FAFE 90%)}
.pban.b3{background:linear-gradient(135deg,#D6E4FF 0%,#F7FAFE 90%)}
.pflag{display:flex;flex:none}
.flagsvg{display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(11,31,58,.12)}
.pcountry{font-weight:700;font-size:var(--t-sm);color:var(--ink-1);letter-spacing:-.01em}
.ptag{
  position:absolute;top:9px;right:9px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:3px 9px;font:700 var(--t-xs)/1.4 var(--font);color:var(--t-ok);box-shadow:var(--sh-1);
}
.pbody{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);flex:1}
.pname{
  font-weight:700;font-size:var(--t-sm);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pinst{font-size:var(--t-xs);color:var(--ink-3)}
.pbody .badge{align-self:flex-start}
.pfacts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:auto}
.pfacts .kk{
  display:block;font:700 10px/1 var(--font);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;
}
.pfacts .vv{display:block;font-weight:700;font-size:var(--t-xs);line-height:1.35}
.psrc{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  border-top:1px dashed var(--hair-2);padding-top:var(--s2);
}

/* --- test cards --- */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.tcard{background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--s4)}
.tcard.attention{background:var(--gold-tint);border-color:rgba(7,155,114,.35)}
.tname{font-weight:700;font-size:var(--t-sm)}
.tcount{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;margin-top:3px}

/* --- side cards --- */
.drow{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--hair);font-size:var(--t-sm);
}
.drow:first-of-type{border-top:none}
.dname{flex:1;min-width:0;font-weight:600}
.ringrow{display:flex;align-items:center;gap:var(--s4);margin:var(--s3) 0 0}
.ring{width:84px;height:84px;flex:none}
.ring .rtxt{font:700 17px/1 var(--font);fill:var(--ink-1)}
.ringrow b{display:block;font-size:var(--t-sm)}
.ringrow .meta{display:block;line-height:1.4}
.leftlist{margin:var(--s3) 0 0;padding-left:18px;font-size:var(--t-sm);color:var(--ink-2)}
.leftlist li{margin-bottom:3px}
.mrow2{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-top:1px solid var(--hair);
}
.mrow2:first-of-type{border-top:none}
.mamt{font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:1100px){
  .dgrid{grid-template-columns:1fr}
  .dside{flex-direction:row;flex-wrap:wrap}
  .dside .sidecard{flex:1 1 280px}
  .pcards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}
@media(max-width:760px){
  .hrail{grid-template-columns:1fr;gap:var(--s3)}
  .hstep:not(:last-child)::after{display:none}
  .dside{flex-direction:column}
  .pcards{grid-template-columns:1fr}
  .dash-head{gap:var(--s3)}
  .dash-head .btn{width:100%}
  .railcard{padding:var(--s5) var(--s4)}
}

/* ==========================================================================
   SEMANTIC UTILITIES — replace the hardcoded inline colours that used to be
   sprinkled through the templates, so one palette change moves the whole app.
   ========================================================================== */
.tone-stop{color:var(--t-stop)}
.tone-check{color:var(--t-check)}
.tone-ok{color:var(--t-ok)}

/* a value the student must supply themselves ([ADD: …] on the CV) */
.fill-me{
  background:var(--gold-tint);
  box-shadow:inset 2px 0 0 var(--gold);
  border-radius:var(--r-sm);padding:2px 8px;display:inline-block;
}
td.fill-me,p.fill-me{display:block}

/* an automatic check refused the confirmation */
.blockbox{
  background:var(--t-stop-bg);border:1px solid rgba(190,47,47,.35);border-left:3px solid var(--t-stop);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s3) 0;
}
.blockbox strong{color:var(--t-stop)}

/* the "I checked it myself, confirm anyway" override */
.overridebox{
  display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4);
  background:var(--t-check-bg);border:1px solid rgba(166,90,0,.35);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);font-weight:400;
}
.overridebox input{margin-top:3px}

/* a neutral information panel (journey summary, test facts) */
.infobox{
  background:var(--t-noted-bg);border:1px solid rgba(41,65,95,.18);border-left:3px solid var(--t-noted);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:0 0 var(--s4);
}
.factbox{
  background:var(--paper-2);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s2) 0;
}
.moneybox{
  background:var(--gold-tint);border:1px solid rgba(7,155,114,.30);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s2) 0;
}
/* WHERE TO APPLY — the one door out of this app and into the university's own form.
   Blue left rule because it is the actionable step on the page; the sentence under it always names
   the host being opened, so nobody is sent off-site without being told (zinc 2026-08-16). */
.applybox{
  background:var(--brand-tint);border:1px solid rgba(23,93,235,.22);border-left:3px solid var(--brand);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s4) 0;
}
.applybox .ab-h{margin:0 0 var(--s2);font-weight:650;color:var(--ink)}
.applybox .ab-go{margin:0}
.applybox .ab-say{margin:var(--s2) 0 0}
.applybox p:last-child{margin-bottom:0}

/* a bordered sub-block inside a panel (one programme, one SOP draft) */
.tile{
  background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:var(--s4);margin:var(--s3) 0;
}
/* a card that is asking the student for something */
.card.attention{background:var(--gold-tint);border-color:rgba(7,155,114,.35)}
/* the "we are reading your files" notice */
.alert.reading{background:var(--t-noted-bg);border-color:rgba(41,65,95,.28);border-left-color:var(--t-noted);color:var(--t-noted)}
/* a table row whose value still has to be asked for */
tr.needs-ask td{background:var(--gold-tint)}

/* ==========================================================================
   FOCUS / MOTION / STATE
   ========================================================================== */
/* handoff §4: 3px blue ring with a 2px white offset, so the ring reads on every surface */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.k-btn:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm);
  box-shadow:0 0 0 2px #fff;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.k-busy{opacity:.5;pointer-events:none}

footer{
  color:var(--ink-3);font-size:var(--t-xs);text-align:center;line-height:1.7;
  padding:var(--s6) var(--s5) var(--s7);max-width:70ch;margin:0 auto;
  border-top:1px solid var(--hair);
}

/* ==========================================================================
   RESPONSIVE — the real device is a cheap Android phone
   ========================================================================== */
@media(max-width:640px){
  header{padding:var(--s2) var(--s4);gap:var(--s2)}
  header nav{gap:var(--s4);margin-left:0;width:100%}
  /* 44px tap targets on a phone — the nav links were 33px, too small for a thumb */
  header nav a{font-size:var(--t-xs);min-height:44px;display:inline-flex;align-items:center;padding:0}
  header .logo{min-height:44px}
  .btn.small{min-height:44px;padding:0 var(--s4)}

  /* Source links were 14px tall — the very links the footer tells a student to click before they
     apply or pay. Measured at 375px: 12 of them under 44px (heights 14 and 36).
     `.src` is a plain INLINE <a> that often sits mid-sentence ("…€11,904 [source, 2026-07-18]"),
     so `display:inline-flex;min-height:44px` would drop 44px boxes into running paragraphs — the
     same "layout fights the copy" trap as `.btn{white-space:nowrap}` and grid `min-width:auto`
     (MISTAKES.md 2026-07-23). Vertical padding on an INLINE element grows the hit box without
     changing the line box, so no text moves.
     The line-height bump is what stops the enlarged hit areas of stacked links overlapping each
     other — without it a thumb aimed at line 2 could open line 1's source. */
  .src{padding-block:15px}
  p:has(.src),li:has(.src),td:has(.src),div:has(.src){line-height:2.4}

  /* A wide table must scroll INSIDE its own box. Before this it simply overflowed the card and the
     right-hand columns were unreachable on a phone (no page scroll, just cut off). */
  .inner>table,.card>table,.k-card>table{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* the document row's action buttons may wrap instead of forcing the table wide */
  td.actions{white-space:normal;text-align:start}
  td.actions .btn,td.actions form{margin:2px 4px 2px 0}

  /* 2026-07-25 — the documents list becomes a STACKED CARD per document under 640px.
     overflow-x:auto above stopped the PAGE scrolling sideways, but the table's own intrinsic width
     (443px inside a 310px box at a 375px viewport) still pushed the actions column out to x=339.
     Measured on the running app before this rule: 16 of 16 controls clipped, 5 delete buttons 0px
     visible, "View" showing 36px of its 60px. A scroll container the student has to DISCOVER is not
     an acceptable answer for the app's core loop — opening a document is the primary action.
     Scoped to .doclist so the pricing comparison table keeps its columns. */
  table.doclist,table.doclist tbody,table.doclist tr,table.doclist td{display:block;width:100%}
  table.doclist{overflow-x:visible}
  table.doclist tr{
    border:1px solid var(--hair);border-radius:10px;background:var(--paper);
    padding:var(--s3);margin:0 0 var(--s3);
  }
  table.doclist td{border:0;padding:var(--s1) 0;white-space:normal;text-align:start}
  table.doclist td.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
  /* min-width:0 — a flex child defaults to min-width:auto and a long label would re-inflate the row
     (the same trap recorded in MISTAKES.md 2026-07-23 for grid tracks). */
  table.doclist td.actions .btn{flex:1 1 auto;min-width:0;margin:0}
  table.doclist td.actions form.inline{flex:0 0 auto;margin:0}

  /* A long label ("✓ Confirm — I checked these against the document") cannot sit on one line at 375px.
     Without this it pushed the whole page to 480px wide and the student had to scroll sideways to
     reach the button that finishes the step. */
  .btn.big{
    width:100%;white-space:normal;line-height:1.35;
    height:auto;padding:var(--s3) var(--s4);text-align:center;
  }
  .btn{max-width:100%}

  main{margin:var(--s5) auto var(--s7);padding:0 var(--s4)}
  .card{padding:var(--s5) var(--s4)}
  .k-next{padding:var(--s5) var(--s4)}
  .k-next h1{font-size:var(--t-hero)}
  details.panel>summary{padding:var(--s4)}
  details.panel .inner{padding:var(--s2) var(--s4) var(--s4)}
  .hero{padding:var(--s5) var(--s4)}
  .stepper{gap:var(--s1)}
  .step{min-width:100%}
}

/* ==========================================================================
   THE GUIDE — a small person who floats over the page.
   He can be dragged anywhere, resized, and tucked away; the browser remembers all three.
   He ships as a still image; the 3D only loads on request (see partials/guide.ejs).
   Nothing here may cover the one action: he sits in a corner, above the page, and is dismissible.
   ========================================================================== */
.guide{
  --gw:86px;                       /* figure size, set by guide-shell.js and remembered */
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:max-content;               /* the caption may be wider than the figure */
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:var(--font);
  touch-action:none;               /* we own the drag gesture */
}
.guide[hidden]{display:none}

.guide-figure{
  position:relative;
  width:var(--gw);aspect-ratio:3/4;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(240,246,253,.94) 100%);
  border:1px solid var(--hair);
  box-shadow:var(--sh-2);
  cursor:grab;
  overflow:visible;                /* the thought bubble leans outside the frame */
  -webkit-tap-highlight-color:transparent;
}
.guide.is-dragging .guide-figure{cursor:grabbing;box-shadow:var(--sh-3)}
.guide-figure:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.guide-still,.guide-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  border-radius:var(--r-lg);
  transition:opacity .45s ease;
  pointer-events:none;             /* the frame handles the gesture, not the picture */
}
.guide-canvas{opacity:0}
.guide[data-live="1"] .guide-canvas{opacity:1}
.guide[data-live="1"] .guide-still{opacity:0}

/* ---- the comic thought bubble: only while he is thinking ---- */
.guide-bubble{
  position:absolute;left:-14%;top:-30%;width:74%;height:auto;z-index:2;
  opacity:0;transform:scale(.6) translateY(8px);transform-origin:20% 100%;
  transition:opacity .18s ease, transform .26s cubic-bezier(.2,1.5,.4,1);
  pointer-events:none;
}
.guide[data-state="thinking"] .guide-bubble{opacity:1;transform:scale(1) translateY(0)}
/* Pass 1: the outline of the whole cloud. Pass 2: white fill over it, which erases every internal
   seam. Stroking each circle individually made it read as a heap of rings, not one bubble. */
.gb-ink circle{fill:var(--ink-1);stroke:var(--ink-1);stroke-width:7;stroke-linejoin:round}
.gb-fill circle{fill:#fff}
.gb-mark{fill:var(--ink-1);font:700 30px/1 var(--font);text-anchor:middle}

/* ---- Zzz: only while he is asleep. The pose alone cannot say "asleep" this small. ---- */
.guide-zzz{
  position:absolute;right:8%;top:3%;z-index:2;   /* inside the frame, over his shoulder */
  display:flex;gap:2px;align-items:flex-end;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.guide[data-state="drowsy"] .guide-zzz{opacity:1}
.guide-zzz span{
  font:700 13px/1 var(--font);color:var(--ink-2);
  animation:gz 2.6s ease-in-out infinite;
}
.guide-zzz span:nth-child(2){font-size:16px;animation-delay:.35s}
.guide-zzz span:nth-child(3){font-size:20px;animation-delay:.7s}
@keyframes gz{
  0%,100%{opacity:.15;transform:translateY(2px)}
  45%{opacity:1;transform:translateY(-6px)}
}

/* ---- hide + resize controls ---- */
.guide-close,.guide-grip{
  position:absolute;z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:var(--paper);color:var(--ink-2);
  border:1px solid var(--hair-2);border-radius:var(--r-pill);
  box-shadow:var(--sh-1);cursor:pointer;
  opacity:0;transition:opacity .18s ease;
}
.guide-close{top:-8px;right:-8px;font:400 18px/1 var(--font)}
.guide-grip{bottom:-8px;left:-8px;cursor:ew-resize}
.guide-grip::after{content:"⇔";font:600 13px/1 var(--font);color:var(--ink-3)}
.guide:hover .guide-close,.guide:hover .guide-grip,
.guide:focus-within .guide-close,.guide:focus-within .guide-grip{opacity:1}
.guide-close:hover,.guide-grip:hover{border-color:var(--ink-3);color:var(--ink-1)}
/* Touch has no hover, so on a phone the controls are simply always there — and at the app's own
   44px floor, since a thumb is the only way to reach them. */
@media(hover:none){ .guide-close,.guide-grip{opacity:1;width:44px;height:44px} }

/* ---- his line, under the figure ----
   2026-08-03, seen on zinc's own screen: the permanent 210px caption slab plus the figure
   covered the whole Document-check card in the dashboard's right column. He is a helper, not a
   panel — the caption now appears only when he is hovered, focused, or has something to say
   (blocked / waiting), and takes no layout room otherwise. */
.guide-body{
  margin-top:6px;padding:6px 9px;width:max-content;max-width:210px;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.guide:hover .guide-body,
.guide:focus-within .guide-body,
.guide.has-chat .guide-body,
.guide[data-mood="blocked"] .guide-body,
.guide[data-mood="wait"] .guide-body{opacity:1;transform:none;pointer-events:auto}
/* Touch has no hover: keep the line visible there, but only while he is not asleep. */
@media(hover:none){
  .guide .guide-body{opacity:1;transform:none;pointer-events:auto}
  .guide[data-state="drowsy"] .guide-body{opacity:0}
}
.guide-who{
  margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);                         /* brass as TEXT must use the dark token */
}
.guide-line{margin:2px 0 0;font-size:11px;color:var(--ink-2);line-height:1.4}
.guide-live{
  /* 12px text on a 1.5 line box is an 18px line; 13px of padding each side takes the hit area to
     44px without moving anything visually. */
  background:none;border:0;padding:13px 0;
  color:var(--brand);font:600 var(--t-xs)/1.5 var(--font);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.guide-live[disabled]{color:var(--ink-3);cursor:default;text-decoration:none}
.guide-cost{color:var(--ink-3);font-weight:500}

/* ---- the chat ---- */
.guide-chat{
  position:absolute;bottom:0;right:calc(100% + var(--s3));
  width:min(320px,calc(100vw - var(--s5) * 2));
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(60vh,440px);
}
.guide-chat[hidden]{display:none}
.guide-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair);
  background:var(--paper-2);font-size:var(--t-sm);
}
.guide-chat-close{
  background:none;border:0;padding:10px;margin:-10px -8px -10px 0;   /* 44px hit area */
  font:400 18px/1 var(--font);color:var(--ink-3);cursor:pointer;
}
.guide-chat-close:hover{color:var(--ink-1)}
.guide-chat-log{padding:var(--s3) var(--s4);overflow-y:auto;flex:1}
.guide-msg{
  margin:0 0 var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);
  font-size:var(--t-sm);line-height:1.5;max-width:92%;
}
.guide-msg.them{background:var(--paper-3);color:var(--ink-1);white-space:pre-line}
.guide-msg.me{background:var(--brand-tint);color:var(--brand-700);margin-left:auto}
/* Rule-verified caution from the consultant: check-amber, dashed like every "verify this" state. */
.guide-msg.caution{background:#FFF2D9;color:var(--tone-check,#A65A00);border:1px dashed currentColor;white-space:pre-line}
.guide-msg.thinking{color:var(--ink-3)}
.guide-note{
  margin:0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45;
  border-left:2px solid var(--hair-2);padding-left:var(--s2);
}
.guide-chat-form{display:flex;gap:var(--s2);padding:var(--s3);border-top:1px solid var(--hair)}
.guide-chat-form input{
  flex:1;min-width:0;min-height:44px;padding:0 var(--s3);
  border:1px solid var(--hair-2);border-radius:var(--r-sm);
  font:400 var(--t-sm)/1 var(--font);color:var(--ink-1);background:var(--paper);
}
.guide-chat-form input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}

/* ---- the handle left behind when he is tucked away ---- */
.guide-recall{
  position:fixed;right:18px;bottom:18px;z-index:60;
  min-height:44px;padding:0 var(--s4);
  background:var(--brand);color:#fff;border:1px solid var(--brand);border-radius:var(--r-pill);
  font:600 var(--t-xs)/1 var(--font);cursor:pointer;box-shadow:var(--sh-2);
}
.guide-recall[hidden]{display:none}
.guide-recall:hover{background:var(--brand-600)}

/* ---- ON A PHONE THE FIGURE STANDS DOWN (2026-08-16) -----------------------------------------
   Screenshot at 360px, three pages: the floating figure sat ON the road's "Next up → See
   programmes" card and on the profile summary's Edit link. Handoff rule: he may never cover a
   primary action — and on a 360px screen there is no corner where an 68px figure does not.
   He is not lost: "Ask Zinc" is in the sticky help bar at the top of every page now, so the phone
   keeps the CHAT and drops the mascot. The element stays in the DOM (guide-shell.js owns the chat
   inside it) and only becomes touchable once the chat is open. */
@media(max-width:640px){
  .guide{--gw:68px;right:10px;bottom:10px;pointer-events:none}
  .guide>.guide-figure,.guide>.guide-body,.guide>.guide-grip,.guide>.guide-close{display:none}
  .guide-recall{display:none}                    /* nothing to recall — he is not shown */
  .guide:has(.guide-chat:not([hidden])){pointer-events:auto}
  /* FIXED to the viewport, not centred on the avatar's own 68px box. The old left:50% was 50% of
     the .guide element sitting at right:10px, which hung the panel ~60px off the right edge of a
     390px phone — the Send button was a 15px sliver a first-time user could not reach (measured
     live, E2E round 42). */
  /* With no figure under it, the chat is a bottom sheet: full width, sitting on the bottom edge. */
  .guide-chat{
    position:fixed;left:12px;right:12px;bottom:12px;
    width:auto;max-width:none;transform:none;max-height:min(72vh,520px);pointer-events:auto;
  }
}
/* Someone who asked for less motion gets no idle fidgeting and no crossfades. */
@media(prefers-reduced-motion:reduce){
  .guide-canvas,.guide-still,.guide-bubble{transition:none}
  .guide-zzz span{animation:none;opacity:.7}
}

/* ==========================================================================
   PRINT — the apply pack and the CV are physically carried to an appointment
   ========================================================================== */
@media print{
  header,footer,nav,.no-print,.btn,.k-btn,.k-next,.stepper,.nextline,.guide,.guide-recall{display:none!important}
  body{background:#fff;color:#000;padding-left:0}   /* undo the sidebar offset */
  main{margin:0;max-width:none;padding:0}
  .card,details.panel,.k-card,.evi,.k-prog{
    box-shadow:none;border:1px solid #999;break-inside:avoid;
  }
  details.panel,details.panel .inner,.evi .body{display:block}
  .badge,.k-pill{border:1px solid #666}
  .hero{background:#fff;color:#000;box-shadow:none;border:1px solid #999}
  .hero h2,.hero p{color:#000}
  a{color:#000;text-decoration:underline}
}


/* ==========================================================================
   INNER PAGES — the same design language as the dashboard (zinc 2026-08-04).
   His verdict on the student page: "the same old design". The dashboard got a
   real redesign; these rules carry its exact vocabulary — rail, kicker card,
   soft white rows, pill counts — into every panel-based page, WITHOUT touching
   the pinned mobile rules (§16 doclist, §23 .src).
   ========================================================================== */

/* ---- the "Do this now" card, same voice as the dashboard's k-next ---- */
.nextcard{
  background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--gold);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:var(--s3) 0 var(--s5);
  box-shadow:var(--sh-2);font-size:var(--t-sm);
}
.nextcard .kicker{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);margin-bottom:var(--s1);
}
.nextcard p{margin:0;color:var(--ink-2)}

/* ---- page header: the name + fact chips ---- */
main>h1:first-of-type{font-size:var(--t-display);letter-spacing:-.02em}
.chips{gap:var(--s2)}
.chips .chip{
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1);
  padding:7px 14px;font-weight:600;color:var(--ink-2);
}

/* ---- collapsible panels: real section headers, not grey <details> bars ---- */
details.panel{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
details.panel>summary{
  padding:var(--s4) var(--s5);gap:var(--s3);
  font-size:1.0625rem;
}
details.panel>summary:hover{background:var(--paper-2)}
details.panel[open]>summary{background:var(--paper-2)}
/* the little status text on the right becomes a counted pill */
details.panel>summary .st{
  background:var(--paper-3);border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:4px 12px;font-size:var(--t-xs);font-weight:700;color:var(--ink-2);
  letter-spacing:.01em;
}

/* ---- the documents list: soft card rows (visual only — every §16 rule intact) ---- */
table.doclist td{padding:var(--s4) var(--s3);border-bottom:1px solid var(--hair)}
table.doclist tr:last-child td{border-bottom:none}
@media(min-width:641px){
  table.doclist tr{transition:background-color .12s ease}
  table.doclist tr:hover td{background:var(--paper-2)}
  table.doclist td:first-child b{font-size:var(--t-body)}
}
table.doclist .small.mut{font-family:var(--mono);font-size:var(--t-xs)}

/* ---- generic key/value tables inside panels (profile, recognition) ---- */
.card>table td,.inner>table td{padding:var(--s3) var(--s3)}

/* ---- match/evidence blocks: white cards, quiet borders ---- */
.factbox{
  background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--hair-2);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:var(--s3) 0;
}
.evi{border-radius:var(--r-md)}
.evi summary{padding:var(--s4) var(--s5)}
.evrow{padding:var(--s3) 0}
.evrow .req{color:var(--ink-1)}

/* ---- the big blue action inside "Find matching programs" keeps its weight ---- */
.k-btn{border-radius:var(--r-md)}

/* the reading banner joins the card language instead of the old flat strip */
.alert.reading{border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* doclist rows keep their taller rhythm even inside .inner (the generic rule above ties on specificity) */
.inner>table.doclist td,table.doclist td{padding:var(--s4) var(--s3)}


/* ==========================================================================
   THE INSTRUMENTS — data/DESIGN-LANGUAGE.md made real (2026-08-04).
   Information renders as gauges, rings, status lines, severity cards, stat
   tiles and entity cards — never as paragraphs. Every number these show is a
   COUNT of real things (checks passed, points OK) — no invented scores.
   ========================================================================== */

/* ---- gauge tile: the gradient hero number ---- */
.gauge-tile{
  background:linear-gradient(140deg,#175DEB 0%,#124FCB 62%,#0E3F9F 100%);
  border-radius:var(--r-lg);padding:var(--s5);color:#fff;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-2);
  position:relative;overflow:hidden;
}
.gauge-tile::after{
  content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.10);
}
.gt-k{font:700 var(--t-xs)/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#D6E4FF}
.gt-n{font:800 44px/1 var(--font);letter-spacing:-.03em}
.gt-n i{font-style:normal;font-size:22px;color:#B9CDF9;font-weight:700}
.gt-s{font-size:var(--t-xs);color:#D6E4FF;line-height:1.4}
.gt-bar{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.22);margin-top:6px;overflow:hidden}
.gt-bar i{display:block;height:100%;border-radius:99px;background:#fff}

/* ---- status line: icon circle + label + chip ---- */
.statusline{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px 0;border-top:1px solid var(--hair);
}
.statusline:first-of-type{border-top:none;padding-top:0}
.sl-ico,.fc-ico,.dl-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  font:800 13px/1 var(--font);
}
.sl-ico.t-ok,.fc-ico.t-ok,.dl-ico.t-ok{background:var(--t-ok-bg);color:var(--t-ok)}
.sl-ico.t-check,.fc-ico.t-check,.dl-ico.t-check{background:var(--t-check-bg);color:var(--t-check)}
.sl-ico.t-stop,.fc-ico.t-stop,.dl-ico.t-stop{background:var(--t-stop-bg);color:var(--t-stop)}
.sl-ico.t-unknown,.fc-ico.t-unknown,.dl-ico.t-unknown{background:var(--t-unknown-bg);color:var(--t-unknown)}
.sl-ico.t-noted,.fc-ico.t-noted,.dl-ico.t-noted{background:var(--t-noted-bg);color:var(--t-noted)}
.sl-txt{flex:1;min-width:0}
.sl-txt b{display:block;font-size:var(--t-sm);line-height:1.3}
.sl-txt i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statusline .k-pill{flex:none}

/* ---- fix card: one problem, one severity, one action ---- */
.fixcol h3.fixh{font-size:var(--t-body);margin:0 0 var(--s3)}
.fixcard{
  display:flex;align-items:flex-start;gap:var(--s3);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s4);margin-bottom:var(--s3);box-shadow:var(--sh-1);
}
.fixcard .fc-ico{width:34px;height:34px;border-radius:10px;font-size:15px}
.fc-main{flex:1;min-width:0}
.fc-top{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.fc-top b{font-size:var(--t-sm)}
.fc-main p{margin:4px 0 0;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.fc-act{flex:none;align-self:center}

/* ---- stat strip: 4 tiles, coloured underlines ---- */
.stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);
  margin:0 0 var(--s5);
}
.stile{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s4) var(--s4) var(--s3);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:2px;
}
.stile b{font:800 26px/1.1 var(--font);letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums}
.stile>span{font-size:var(--t-xs);color:var(--ink-3);line-height:1.3}
.stile .su{display:block;height:3px;border-radius:99px;margin-top:8px}
.su-ok{background:var(--t-ok)}
.su-blue{background:var(--brand)}
.su-ox{background:var(--gold)}
.su-check{background:var(--t-check)}
.su-unknown{background:var(--t-unknown)}

/* ---- the readiness overview grid at the top of the matches panel ---- */
.mx-over{
  display:grid;grid-template-columns:250px minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--s4);align-items:start;margin:var(--s4) 0 var(--s5);
}
.mx-over .card{margin-bottom:0}
.ov-lines h3{font-size:var(--t-body);margin:0 0 var(--s3)}
.ov-detail{margin-top:var(--s3);border-top:1px solid var(--hair);padding-top:var(--s2)}
.ov-detail>summary{cursor:pointer;font-size:var(--t-xs);color:var(--brand-600);font-weight:700;
  min-height:44px;display:flex;align-items:center;list-style:none}
.ov-detail>summary::-webkit-details-marker{display:none}
@media(max-width:1100px){.mx-over{grid-template-columns:1fr 1fr}.mx-over .gauge-tile{grid-column:1/-1}}
@media(max-width:700px){.mx-over{grid-template-columns:1fr}}

/* ---- entity summary: the match row becomes a card face ---- */
.evi>summary.ecrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:var(--s3);align-items:center;padding:var(--s4) var(--s5)}
.ec-flag{display:flex;flex:none;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--paper-3);border:1px solid var(--hair)}
.ec-main{min-width:0}
.ec-main b{display:block;font-size:var(--t-sm);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-main i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ec-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ec-tags .k-pill{font-size:10.5px;padding:2px 9px}
.ec-ring{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;width:56px}
.ec-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.ec-ring .rtrack{fill:none;stroke:var(--paper-3);stroke-width:4}
.ec-ring .rfill{fill:none;stroke:var(--t-ok);stroke-width:4;stroke-linecap:round}
.ec-ring.tone-check .rfill{stroke:var(--t-check)}
.ec-ring.tone-unknown .rfill{stroke:var(--t-unknown)}
.ec-ring b{font:700 10px/1 var(--font);color:var(--ink-2)}
.ec-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
@media(max-width:640px){
  .evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr) auto}
  .ec-ring{display:none}
}

/* documents list: leading state icon */
.dl-ico{margin-right:9px;vertical-align:middle}
table.doclist td:first-child{display:flex;align-items:flex-start;gap:0}
table.doclist td:first-child>span.dl-main{min-width:0}
@media(max-width:640px){table.doclist td:first-child{display:flex}}

/* ---- vertical timeline (journey visa steps) ---- */
.vtimeline{list-style:none;margin:0 0 var(--s4);padding:0}
.vt-step{position:relative;padding:0 0 var(--s4) 34px}
.vt-step::before{content:'';position:absolute;left:10px;top:20px;bottom:-2px;width:2px;background:var(--hair)}
.vt-step:last-child::before{display:none}
.vt-dot{position:absolute;left:3px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:3px solid var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.vt-body b{font-size:var(--t-sm)}
.vt-body .k-pill{margin-left:6px;vertical-align:middle}

/* The grid min-width:auto trap, grid edition (caught live at 375px: one child's min-content
   forced the single 1fr track to 564px inside an overflow:hidden panel — content CLIPPED with no
   scrollbar to reach it). Same class as MISTAKES.md 2026-07-23. Floors released explicitly. */
.mx-over>*, .stat-strip>*, .fixcard>*, .statusline>*{min-width:0}
.mx-over .p-note, .mx-over .fc-main p, .mx-over .sl-txt b{overflow-wrap:anywhere}
@media(max-width:700px){.mx-over{grid-template-columns:minmax(0,1fr)}}

/* ---- the apply kit joins the language (2026-08-04) ---- */
.kitcard .kc-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.kc-title{flex:1;min-width:0}
.kc-title b{display:block;font-size:1.0625rem;line-height:1.3;letter-spacing:-.015em}
.kc-title i{display:block;font-style:normal;font-size:var(--t-sm);color:var(--ink-3);margin-top:2px}
.kc-title .ec-tags{margin-top:8px}
.kc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);
  margin-bottom:var(--s4)}
.kc-facts>*{min-width:0}
u.kk{display:block;text-decoration:none;font:700 10px/1 var(--font);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
.kc-phase{font-size:var(--t-sm);margin-bottom:6px}
.kc-phase b{display:block;line-height:1.35}
.kc-phase span{color:var(--ink-2);font-variant-numeric:tabular-nums}
.kc-phase i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
.kc-v{font-size:var(--t-sm);color:var(--ink-1);margin-bottom:4px}
.kc-note{display:block;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;margin:2px 0}
.sl-txt .k-pill{margin-left:6px;vertical-align:middle}
.print-only{display:none}
@media print{
  .print-only{display:block}
  .statusline{break-inside:avoid}
  .kitcard .kc-head{border-bottom:1px solid #999}
  .sl-ico{border:1px solid #666}
}


/* ==========================================================================
   THE DENSITY PASS (zinc 2026-08-04: right components, wrong composition).
   Small type, tight rows, four-up hero band, horizontal fix chips, per-row
   metric bars + fees + CTA, iconed stat tiles, one illustration accent, and
   the closing count banner. All numbers stay COUNTS of real things.
   ========================================================================== */

/* ---- hero band: gauge · readiness · journey · accent, one tight row ---- */
.mx-over.hero4{grid-template-columns:220px minmax(0,1.35fr) 215px 200px;gap:var(--s3);margin:var(--s4) 0}
.hero4 .gauge-tile{padding:var(--s4);border-radius:var(--r-md);gap:4px}
.hero4 .gt-n{font-size:34px}
.hero4 .gt-n i{font-size:17px}
.hero4 .gt-k{font-size:10px}
.hero4 .gt-s{font-size:10.5px;line-height:1.35}
.hero4 .card{padding:var(--s4);border-radius:var(--r-md)}
.hero4 .ov-lines h3{font-size:var(--t-sm);margin-bottom:var(--s2)}
.hero4 .statusline{padding:6px 0;gap:10px}
.hero4 .sl-ico{width:22px;height:22px;font-size:11px}
.hero4 .sl-txt b{font-size:12.5px;line-height:1.25}
.hero4 .sl-txt i{font-size:10.5px}
.hero4 .statusline .k-pill{font-size:10px;padding:2px 8px}
.hero4 .ov-detail{margin-top:var(--s2);padding-top:2px}
.hero4 .ov-detail>summary{min-height:34px;font-size:11px}

/* the compact journey column */
.jtl{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s4);box-shadow:var(--sh-1)}
.jtl h3{font-size:var(--t-sm);margin:0 0 var(--s2)}
.jtl-step{display:flex;align-items:center;gap:8px;padding:4px 0;position:relative}
.jtl-step::before{content:"";position:absolute;left:7px;top:22px;height:10px;width:2px;background:var(--hair)}
.jtl-step:last-child::before{display:none}
.jtl-dot{width:16px;height:16px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:800 9px/1 var(--font);background:var(--paper-3);color:var(--ink-3);
  border:1px solid var(--hair-2)}
.jtl-step.done .jtl-dot{background:var(--t-ok);border-color:var(--t-ok);color:#fff}
.jtl-step.now .jtl-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 3px var(--brand-tint)}
.jtl-step b{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jtl-chip{flex:none;font:700 9px/1.5 var(--font);padding:1px 7px;border-radius:99px}
.jtl-step.done .jtl-chip{background:var(--t-ok-bg);color:var(--t-ok)}
.jtl-step.now .jtl-chip{background:var(--brand-tint);color:var(--brand-700)}
.jtl-step.up .jtl-chip{background:var(--paper-3);color:var(--ink-3)}

/* the one illustration accent — drawn, costs nothing */
.accent-tile{position:relative;overflow:hidden;border-radius:var(--r-md);
  background:linear-gradient(160deg,#EAF1FB 0%,#E9F0FF 55%,#D6E4FF 100%);
  border:1px solid var(--hair);min-height:150px;display:flex;flex-direction:column;
  justify-content:flex-start;padding:var(--s4)}
.accent-tile b{position:relative;z-index:1;font-size:12.5px;line-height:1.35;color:var(--ink-1);max-width:15ch}
.accent-tile svg{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:60%}

/* ---- fix chips: horizontal, two-up, counted header ---- */
.fixhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin:var(--s4) 0 var(--s2)}
.fixhead h3{font-size:var(--t-body);margin:0}
.fixcount{font:700 var(--t-xs)/1 var(--font);color:var(--t-check);background:var(--t-check-bg);
  border:1px solid rgba(166,90,0,.25);padding:6px 12px;border-radius:99px}
.fixgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%), 1fr));gap:var(--s3);margin-bottom:var(--s4)}
.fixgrid .fixcard{margin-bottom:0;padding:var(--s3) var(--s4);align-items:center}
.fixgrid .fc-ico{width:30px;height:30px;font-size:13px}
.fixgrid .fc-top b{font-size:12.5px}
.fixgrid .fc-top .k-pill{font-size:9.5px;padding:2px 8px}
.fixgrid .fc-main p{font-size:10.5px;line-height:1.45;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fixgrid .fc-act{min-height:36px;font-size:10.5px;padding:0 var(--s3)}

/* ---- iconed stat tiles ---- */
.stile{position:relative}
.stile .si{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;margin-bottom:7px}
.stile .si svg{width:16px;height:16px}
.si-blue{background:var(--brand-tint);color:var(--brand-600)}
.si-ok{background:var(--t-ok-bg);color:var(--t-ok)}
.si-ox{background:var(--gold-tint);color:var(--gold-ink)}
.si-unknown{background:var(--t-unknown-bg);color:var(--t-unknown)}
.si-check{background:var(--t-check-bg);color:var(--t-check)}
.stile b{font-size:23px}
.stile>span{font-size:11px}

/* ---- programme rows: metrics column + fees column + CTA ---- */
.evi>summary.ecrow{grid-template-columns:auto minmax(0,1.15fr) minmax(0,.95fr) auto auto auto;
  gap:var(--s3);padding:var(--s3) var(--s4)}
.ec-flag{width:38px;height:38px;border-radius:10px}
.ec-main b{font-size:12.5px}
.ec-main i{font-size:10.5px;margin-top:1px}
.ec-main .ec-tags{margin-top:4px}
.ec-tags .k-pill{font-size:9px;padding:1px 7px}
.ec-mets{display:flex;flex-direction:column;gap:3px;min-width:0}
.ec-met{display:grid;grid-template-columns:66px 56px;align-items:center;gap:7px}
.ec-met u{text-decoration:none;font:600 8.5px/1.2 var(--font);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-met i{display:block;height:4px;border-radius:99px;background:var(--paper-3);position:relative;overflow:hidden}
.ec-met i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);border-radius:99px;background:var(--c,var(--t-ok))}
.ec-fees{display:flex;flex-direction:column;gap:2px;flex:none;width:118px;min-width:0}
.ec-fees u{text-decoration:none;font:600 8.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ec-fees b{font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-ring{width:46px}
.ec-ring svg{width:38px;height:38px}
.ec-ring b{font-size:9px}
.ec-side{gap:4px}
.ec-side .badge{font-size:10px;padding:3px 9px}
.ec-cta{display:inline-flex;align-items:center;justify-content:center;min-height:34px;
  padding:0 var(--s3);border-radius:9px;background:var(--brand);color:#fff;
  font:700 11px/1 var(--font);white-space:nowrap}
.ec-cta:hover{background:var(--brand-600);text-decoration:none;color:#fff}
@media(max-width:1080px){.evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr) auto auto}.ec-mets,.ec-fees{display:none}}
@media(max-width:640px){.evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr) auto}}

/* ---- closing count banner ---- */
.found-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--s4);
  background:linear-gradient(135deg,#175DEB 0%,#124FCB 60%,#0E3F9F 100%);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);margin:var(--s5) 0 var(--s3);
  box-shadow:var(--sh-2)}
.found-banner::before{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;
  border-radius:50%;background:rgba(255,255,255,.09)}
.fb-txt{flex:1;min-width:0;position:relative}
.fb-txt b{display:block;font:800 19px/1.2 var(--font);color:#fff;letter-spacing:-.02em}
.fb-txt span{display:block;font-size:12px;color:#D6E4FF;margin-top:3px}
.fb-cta{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 var(--s5);border-radius:11px;background:#fff;color:var(--brand-700);
  font:700 13px/1 var(--font);white-space:nowrap}
.fb-cta:hover{background:var(--brand-tint);text-decoration:none;color:var(--brand-700)}
.fb-rocket{position:relative;flex:none;width:46px;height:46px;color:#fff;opacity:.95}
@media(max-width:640px){.found-banner{flex-wrap:wrap}.fb-cta{width:100%;justify-content:center}}

/* hero band collapse */
@media(max-width:1150px){.mx-over.hero4{grid-template-columns:1fr 1fr}.hero4 .accent-tile{display:none}}
@media(max-width:700px){.mx-over.hero4{grid-template-columns:minmax(0,1fr)}}

/* ---- the matches list note: one line + a fold, replacing three paragraphs ---- */
.listnote{display:flex;align-items:flex-start;gap:10px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--s3) var(--s4);
  margin:var(--s3) 0;box-shadow:var(--sh-1)}
.listnote>.sl-ico{margin-top:1px}
.ln-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ln-txt b{color:var(--ink-1)}
.ln-more summary{cursor:pointer;list-style:none;font:700 11px/1 var(--font);color:var(--brand-600);
  min-height:34px;display:flex;align-items:center;white-space:nowrap}
.ln-more summary::-webkit-details-marker{display:none}
.ln-more[open]{position:relative}
.ln-more[open] summary~*{max-width:56ch}
.listnote:has(.ln-more[open]){flex-wrap:wrap}
.advicecard{padding:var(--s4) var(--s5)}
.advicecard h3{font-size:var(--t-sm);margin:0 0 var(--s2)}
.advicecard .statusline{padding:6px 0}
.advicecard .sl-ico{width:20px;height:20px;font-size:10px}
.advicecard b.adv{font-weight:600;font-size:12px;line-height:1.45;display:block}

/* ---- journey test rows + fact grid (density pass) ---- */
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) 172px;gap:var(--s3);align-items:start;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);margin:0 0 var(--s3);box-shadow:var(--sh-1)}
.trow .ec-flag{width:36px;height:36px;border-radius:10px}
.tr-main{min-width:0}
.tr-main>b{display:block;font-size:12.5px;line-height:1.3}
.tr-main>b .k-pill{margin-left:6px;vertical-align:middle;font-size:9px;padding:1px 7px}
.tr-main>i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin:1px 0 4px}
.tr-verbatim{display:block;font-size:11px;color:var(--ink-2);line-height:1.5;font-style:italic}
.tr-extra{display:block;font-size:11px;color:var(--ink-2);margin-top:3px}
.tr-gap{display:block;font-size:11px;color:var(--t-stop);font-weight:600;margin-top:3px}
.tr-cheap{display:flex;flex-direction:column;gap:2px;min-width:0;border-left:1px solid var(--hair);
  padding-left:var(--s3)}
.tr-cheap u{text-decoration:none;font:600 8.5px/1 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.tr-cheap b{font-size:12px;line-height:1.3}
.tr-cheap i{font-style:normal;font-size:10.5px;color:var(--ink-2);line-height:1.4}
@media(max-width:700px){.trow{grid-template-columns:auto minmax(0,1fr)}.tr-cheap{grid-column:2;border-left:0;padding-left:0;border-top:1px dashed var(--hair-2);padding-top:6px;margin-top:2px}}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%), 1fr));gap:var(--s3)}
.factgrid>*{min-width:0}
.factline{display:flex;align-items:flex-start;gap:10px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r-md);padding:var(--s3) var(--s4);box-shadow:var(--sh-1)}
.factline .sl-txt b{font-size:12px}
.factline .kc-note{font-size:10.5px}
/* CV: quiet micro-caps section headers so the document joins the language */
#cvsheet h3{font:700 10.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);border-top:1px solid var(--hair);padding-top:var(--s3);margin:var(--s5) 0 var(--s2)}

/* ---- pan-ico: the coherent line-icon chip that replaced the panel emoji ---- */
.pan-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:9px;margin-right:2px}
.pan-ico svg{width:15px;height:15px}
.pi-ox{background:var(--gold-tint);color:var(--gold-ink)}
.pi-blue{background:var(--brand-tint);color:var(--brand-600)}
.pi-h1{width:34px;height:34px;border-radius:10px;background:var(--gold-tint);color:var(--gold-ink);
  vertical-align:-8px;margin-right:10px}
.pi-h1 svg{width:18px;height:18px}
.pi-chip{width:16px;height:16px;background:none;color:var(--ink-3);margin-right:0}
.pi-chip svg{width:14px;height:14px}
.chips .chip{display:inline-flex;align-items:center;gap:7px}
h3 .pan-ico{margin-right:8px;vertical-align:-8px}

/* ---- pricing plan cards ---- */
.plangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%), 1fr));gap:var(--s4);
  margin:0 0 var(--s4)}
.plangrid>*{min-width:0}
.plancard{position:relative;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s4);box-shadow:var(--sh-1)}
.plancard h3{margin:0 0 var(--s1);font-size:var(--t-body)}
.plancard.featured{border:2px solid var(--brand);box-shadow:var(--sh-2)}
.pc-tag{position:absolute;top:-12px;right:16px;background:var(--brand);color:#fff;
  border-radius:99px;padding:4px 12px;font:700 10px/1.4 var(--font);letter-spacing:.06em;
  text-transform:uppercase}
.pc-price{font:800 30px/1 var(--font);letter-spacing:-.02em;color:var(--ink-1);
  font-variant-numeric:tabular-nums}
.pc-price span{font:700 13px/1 var(--font);color:var(--ink-3);margin-left:3px}
.pc-per{font-size:var(--t-xs);color:var(--ink-3);margin:4px 0 var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.plancard .statusline{padding:7px 0}
.plancard .statusline.off{opacity:.55}
.plancard .statusline.off .sl-ico{background:var(--paper-3);color:var(--ink-3)}


/* ==========================================================================
   DOCUMENT CARD GRID (zinc 2026-08-05: "change it to SS 1").
   Each document is a card: tinted type icon, status pill, kebab, filename,
   verified date, ONE action. Replaces table.doclist — and with it the whole
   375px clipping class the old §16 rules existed to contain: cards stack,
   nothing clips. The old doclist CSS below stays inert (no table uses it).
   ========================================================================== */
.docstats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pan-ico.pi-bare{width:auto;height:auto;background:none;margin:0;color:inherit}
.pan-ico.pi-bare svg{width:16px;height:16px}
.pan-ico.pi-inbtn{width:auto;height:auto;background:none;margin:0 6px 0 0;color:inherit}
.pan-ico.pi-inbtn svg{width:14px;height:14px}

.docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:var(--s3)}
.docgrid>*{min-width:0}
.doccard{
  display:flex;flex-direction:column;gap:5px;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--s4);box-shadow:var(--sh-1);
  transition:box-shadow .14s ease,border-color .14s ease;
}
.doccard:hover{box-shadow:var(--sh-2);border-color:var(--hair-2)}
.doccard.tone-check{background:#FFFBF2;border-color:rgba(166,90,0,.30)}
.doccard.tone-unknown{border-style:dashed;border-color:var(--t-unknown)}

.dc-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:2px}
.dc-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:12px;
}
.dc-ico svg{width:20px;height:20px}
.dc-ico.t-ok{background:var(--t-ok-bg);color:var(--t-ok)}
.dc-ico.t-check{background:var(--t-check-bg);color:var(--t-check)}
.dc-ico.t-unknown{background:var(--t-unknown-bg);color:var(--t-unknown)}
.dc-ico.t-noted{background:var(--t-noted-bg);color:var(--t-noted)}
.dc-top .k-pill{margin-left:auto;flex:none}

.kebab{position:relative;flex:none;margin:-4px -6px 0 0}
.kebab>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;color:var(--ink-3);
  font:700 16px/1 var(--font);
}
.kebab>summary::-webkit-details-marker{display:none}
.kebab>summary:hover{background:var(--paper-2);color:var(--ink-1)}
.kebab[open]>summary{background:var(--paper-3)}
.kebab-menu{
  position:absolute;right:0;top:36px;z-index:20;min-width:170px;
  background:var(--paper);border:1px solid var(--hair-2);border-radius:var(--r-sm);
  box-shadow:var(--sh-3);padding:5px;display:flex;flex-direction:column;
}
.kebab-menu form{display:contents}
.kebab-item{
  display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;
  background:none;border:0;border-radius:8px;cursor:pointer;text-align:left;
  font:600 var(--t-xs)/1.3 var(--font);color:var(--ink-1);text-decoration:none;
}
.kebab-item:hover{background:var(--paper-2);text-decoration:none}
.kebab-item.danger{color:var(--t-stop)}
.kebab-item.danger:hover{background:var(--t-stop-bg)}

.dc-name{font-size:var(--t-sm);line-height:1.3;font-weight:700}
.dc-file{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--hair);
}
.dc-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);min-width:0;line-height:1.35}
.dc-dot{width:7px;height:7px;border-radius:50%;flex:none}
.dc-dot.t-ok{background:var(--t-ok)}
.dc-dot.t-check{background:var(--t-check)}
.dc-dot.t-unknown{background:var(--t-unknown)}
.dc-dot.t-noted{background:var(--t-noted)}
.dc-act{flex:none}
/* Amber outline. It assumes a WHITE fill — guard it, so `.dc-check` on a solid button can never
   again paint amber text on blue (measured 1.07:1 on 2026-08-15). */
.dc-check{background:var(--paper);border-color:rgba(166,90,0,.45);color:var(--t-check)}
.dc-check:hover{background:var(--t-check-bg);border-color:var(--t-check);color:var(--t-check)}

/* the dashed add-row, SS1 style */
.adddoc>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--s3);
  border:1.5px dashed var(--hair-2);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);min-height:56px;
}
.adddoc>summary::-webkit-details-marker{display:none}
.adddoc>summary:hover{border-color:var(--brand);background:var(--paper-2)}
.ad-plus{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-600);font:700 18px/1 var(--font);
}
.ad-txt{flex:1;min-width:0}
.ad-txt b{display:block;font-size:var(--t-sm);line-height:1.3}
.ad-txt i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}
.ad-cta{
  display:inline-flex;align-items:center;flex:none;min-height:38px;padding:0 var(--s4);
  border-radius:9px;background:var(--brand);color:#fff;font:700 var(--t-xs)/1 var(--font);
}
.adddoc[open]>summary{border-style:solid;border-color:var(--brand);margin-bottom:var(--s3)}

@media(max-width:640px){
  .docgrid{grid-template-columns:1fr}
  .dc-foot{flex-wrap:wrap}
  .dc-act{flex:1 1 100%;justify-content:center}
  .ad-cta{display:none}   /* the whole dashed row is the tap target on a phone */
}

/* the kebab was a 34px target — under the app's own 44px floor (caught by the live sweep) */
.kebab>summary{width:44px;height:44px;margin:-9px -10px 0 0}


/* ==========================================================================
   HERO v3 — "design wise like the mock, not colour grading" (zinc 2026-08-05).
   The three info columns become ONE card with internal hairline dividers, the
   score tile carries its progress row inside, readiness rows are label-only,
   journey chips right-align, and the illustration is a tall tile beside it.
   Palette unchanged — zinc keeps the brown/oxblood/blue he chose.
   ========================================================================== */
.mx-over.hero5{grid-template-columns:minmax(0,1fr) 210px;gap:var(--s3)}
.hero-card{
  display:grid;grid-template-columns:236px minmax(0,1.15fr) minmax(0,1fr);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.hero-card>*{min-width:0}
.hc-col{padding:var(--s4) var(--s5);border-left:1px solid var(--hair)}
.hc-col:first-child{border-left:0}
.hc-first{padding:var(--s3)}
.hero-card .ov-lines{border:0;border-radius:0;box-shadow:none;margin:0;background:none}
.hero-card .jtl{border:0;border-radius:0;box-shadow:none;background:none;padding:var(--s4) var(--s5)}
.hero5 .hc-col h3{font-size:var(--t-sm);margin:0 0 var(--s3);color:var(--ink-1)}

/* the score tile fills its cell; progress row lives inside it */
.gauge-tile.g2{height:100%;border-radius:var(--r-md);justify-content:flex-start;padding:var(--s4) var(--s4) var(--s4)}
.gt-spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gauge-tile.g2 .gt-n{margin:6px 0 2px}
.gt-foot{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:10px}
.gt-foot i{font-style:normal;font:600 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#C9D8FB}
.gt-foot b{font:800 13px/1 var(--font);color:#fff}

/* label-only readiness rows */
.statusline.lite{padding:8px 0}
.statusline.lite .sl-txt b{font-weight:600;font-size:12.5px}

/* journey chips right-aligned, quiet solid connector */
.hero5 .jtl-step{padding:5px 0}
.hero5 .jtl-step b{font-weight:600}
.hero5 .jtl-chip{margin-left:auto}
.hero5 .jtl-step::before{left:7px;top:24px;height:8px}

/* the tall illustration tile */
.accent-tile.tall{min-height:100%;justify-content:flex-start;padding:var(--s5) var(--s4)}
.accent-tile.tall b{font-size:13px;max-width:14ch}
.accent-tile.tall svg{height:52%}

@media(max-width:1150px){
  .mx-over.hero5{grid-template-columns:1fr}
  .hero-card{grid-template-columns:1fr 1fr}
  .hc-first{grid-column:1/-1}
  .hero-card .jtl{border-left:0;border-top:1px solid var(--hair)}
  .hero5 .accent-tile{display:none}
}
@media(max-width:700px){
  .hero-card{grid-template-columns:1fr}
  .hc-col{border-left:0;border-top:1px solid var(--hair)}
  .hc-col:first-child{border-top:0}
}

/* ---- fix cards match the mock's anatomy: warm tint, chip beside title, action bottom-left ---- */
.fixgrid .fixcard{
  flex-direction:column;align-items:stretch;gap:var(--s2);
  background:var(--gold-tint);border-color:rgba(7,155,114,.22);
}
.fixgrid .fixcard .fc-ico{width:34px;height:34px;border-radius:10px}
.fixgrid .fc-main{display:block}
.fixgrid .fc-act{align-self:flex-start;margin-top:2px;background:var(--paper)}

/* ---- stat tiles: centred, icon chip on top (the mock's summary tiles) ---- */
.stile{align-items:center;text-align:center}
.stile .si{margin:0 0 8px}
.stile .su{width:56px;margin:8px auto 0}

/* ---- programme rows: a touch taller, bar words, ring badge ---- */
.evi>summary.ecrow{padding:var(--s4) var(--s5)}
.ec-main b{font-size:13.5px}
.ec-met{grid-template-columns:60px 52px auto}
.ec-met em{font:700 8.5px/1 var(--font);font-style:normal;letter-spacing:.03em;text-transform:uppercase}
.mw-ok,.mw-noted{color:var(--t-ok)}
.mw-check{color:var(--t-check)}
.mw-unknown{color:var(--t-unknown)}
.mw-stop{color:var(--t-stop)}
.ec-ring{position:relative}
.ec-badge{
  position:absolute;top:-3px;right:-1px;z-index:2;
  display:flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:var(--t-ok);color:#fff;font:800 9px/1 var(--font);
  box-shadow:0 0 0 2px var(--paper);
}

/* ==========================================================================
   CHECK & CONFIRM — screen-by-screen design pass, screen 1 (2026-08-08).
   Grounded in ChatGPT's 10-point critique of the real screenshot + template:
   critical type panel · two-zone honest-confidence labels · cluster hairlines ·
   44px fields · sticky action bar · document-first 1.12/.88 split · 375px rules.
   ========================================================================== */
.confirmpage .sub{max-width:760px;color:var(--ink-2,#5C6B84);line-height:1.5;margin-bottom:20px}
.confirmpage h1{font-size:32px}
.confirmpage .split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);gap:var(--s4,16px);align-items:start}
.confirmpage .split>*{min-width:0}
.dr-doc{width:100%;height:calc(100vh - 230px);min-height:560px;border:1px solid var(--hair);border-radius:12px}

/* the one control that can invalidate the document */
.dr-typepanel{border:1px solid var(--hair);border-left:4px solid var(--gold,#079B72);background:var(--paper);border-radius:12px;padding:16px;margin-bottom:18px}
.dr-typepanel label{font-weight:700;display:block;margin-bottom:8px}
.dr-typepanel select{width:100%;min-height:48px;font-weight:650;font-size:15px;border:1px solid var(--hair);border-radius:8px;padding:8px 12px;background:#fff}
.dr-typepanel select:focus{outline:none;border-color:var(--gold,#079B72);box-shadow:0 0 0 2px rgba(7,155,114,.18)}

/* two-zone label: field name left, the REAL confidence right — never dressed up */
.dr-field{margin-top:12px}
.dr-field.dr-break{margin-top:22px;border-top:1px solid var(--hair);padding-top:20px}
.dr-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.dr-name{font-size:13px;font-weight:600;color:var(--ink);text-transform:capitalize}
.dr-conf{font-size:12.5px;color:var(--ink-2,#5C6B84);border:1px solid var(--hair);border-radius:999px;padding:3px 8px;background:#fff;white-space:nowrap}
.dr-conf.low{color:var(--t-check,#A65A00);border-color:var(--t-check,#A65A00)}
.dr-conf.low b{font-weight:800}

/* fields read as editable evidence, not disabled metadata */
.confirmpage .dr-field input,.confirmpage .dr-field textarea{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--hair);border-radius:8px;
  font-size:15px;color:var(--ink);background:#fff;line-height:1.45;
}
.confirmpage .dr-field input:focus,.confirmpage .dr-field textarea:focus{outline:2px solid var(--brand,#175DEB);outline-offset:0;border-color:var(--brand,#175DEB)}
.confirmpage .dr-field .conf-low{border-color:var(--t-check,#A65A00)}

/* the confirm can never hide below the fold */
.dr-actions{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--hair);padding:14px 0 6px;margin-top:20px;text-align:center}
.dr-actions .okbtn{width:100%;min-height:48px;font-weight:700}
.dr-back{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--ink-2,#5C6B84);text-decoration:underline;font-size:13.5px}

@media(max-width:900px){
  .confirmpage .split{grid-template-columns:1fr}
  .confirmpage h1{font-size:26px}
  .dr-doc{height:60vh;min-height:380px}
}
.dr-actions .okbtn{white-space:normal;line-height:1.3;font-size:14.5px}

/* ==========================================================================
   APPLY KIT — screen-by-screen design pass, screen 2 (2026-08-08).
   ChatGPT's 8 grounded points; scoped to .kitpage so shared components keep
   their look elsewhere. The page's real job: print it and tick it off at the
   embassy / bank / document desk.
   ========================================================================== */
/* 1 · evidence rows become tickable checklist rows */
.kitpage .statusline{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 10px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:start}
.kitpage .statusline>*{min-width:0}
.kitpage .statusline .k-pill{grid-column:3;justify-self:end}
.kitpage .sl-txt{display:block}
.kitpage .sl-txt b{display:block;font-size:13.5px}
.kitpage .kc-note{display:block;color:var(--ink-2,#5C6B84);font-size:12.5px;line-height:1.5;margin-top:3px}
/* 2 · citations, not terminal output */
.kitpage .src{font-family:inherit;font-size:12.5px;color:var(--ink-2,#5C6B84);display:inline-block;margin-top:6px;text-decoration-thickness:1px;text-underline-offset:2px;background:none;padding:0}
/* 3 · deadlines / fees as bounded fact panels */
.kitpage .kc-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.kitpage .kc-facts>div{border:1px solid var(--hair);border-radius:10px;padding:14px 16px;background:var(--paper);min-width:0}
.kitpage .kc-facts .kk{color:var(--gold,#079B72)}
/* 4 · the university's own words read as a quote, not as our text */
.kitpage .kc-quote{display:block;margin-top:10px;padding:8px 10px;border-left:3px solid var(--hair);color:var(--ink-2,#5C6B84);font-size:12.5px;line-height:1.45;font-style:normal}
/* 5 · programme header = cover sheet */
.kitpage .kc-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;align-items:start}
.kitpage .kc-title b{font-size:19px}
.kitpage .kc-title i{font-size:13px;color:var(--ink-2,#5C6B84);font-style:normal;display:block}
.kitpage .ec-tags{display:block;margin-top:8px}
/* 6 · the action signal outranks descriptors */
.kitpage .k-pill.noted{border-color:var(--hair);color:var(--ink-2,#5C6B84);background:var(--paper)}
.kitpage .k-pill.check{color:var(--t-check,#A65A00);border:1px solid var(--t-check,#A65A00);font-weight:700;background:var(--paper)}
/* 7 · stat tiles = one compact pre-flight strip */
.kitpage .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hair);border-radius:12px;background:var(--paper);overflow:hidden}
.kitpage .stile{border:0;border-radius:0;box-shadow:none;border-left:1px solid var(--hair);padding:14px 16px}
.kitpage .stile:first-child{border-left:0}
.kitpage .stile b{font-size:21px;font-weight:750}
.kitpage .stile span{font-size:12.5px;color:var(--ink-2,#5C6B84)}
.kitpage .stile .su{display:none}
/* 8 · packet-grade card + mobile */
.kitpage .kitcard{padding:22px;margin-top:20px}
@media(max-width:640px){
  .kitpage .kc-facts{grid-template-columns:1fr}
  .kitpage .stat-strip{grid-template-columns:1fr 1fr}
  .kitpage .stile:nth-child(3){border-left:0;border-top:1px solid var(--hair)}
  .kitpage .stile:nth-child(4){border-top:1px solid var(--hair)}
  .kitpage .kc-head{grid-template-columns:1fr}
  .kitpage .kc-head .fc-act{width:100%;justify-content:center}
  .kitpage .kitcard{padding:16px}
}
@media print{
  /* the icon becomes an empty square a pen can tick */
  .kitpage .sl-ico{width:16px;height:16px;border:1.5px solid #5C6B84;border-radius:3px;background:#fff !important;color:transparent !important}
  .kitpage .src{text-decoration:none;color:#0B1F3A}
  .kitpage .kc-head,.kitpage .kc-facts,.kitpage .statusline{break-inside:avoid}
  .kitpage .kitcard{box-shadow:none}
  .kitpage .stat-strip{break-inside:avoid}
}
/* kit citations: the stamp partial renders .k-stamp — same citation treatment (ChatGPT point 2) */
.kitpage .k-stamp{font-family:inherit;font-size:12.5px;color:var(--ink-2,#5C6B84);background:none;padding:2px 0;margin-top:6px;display:inline-block;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;letter-spacing:0}
@media print{.kitpage .k-stamp{text-decoration:none;color:#0B1F3A}}

/* ==========================================================================
   CHECK & CONFIRM v2 — the verification cockpit (2026-08-08 round 2).
   Round 1 was invisible; this changes the ANATOMY: dark source-doc header,
   numbered section boxes on canvas tint, per-field tick targets with a live
   counter, honest confidence meters. Same data, same words, same honesty.
   ========================================================================== */
/* left: the scan reads as a source document, not another form card */
.vs-doccard{padding-top:0;overflow:hidden}
.vs-dochead{display:flex;align-items:center;gap:12px;background:var(--ink-900,#071A38);color:#EAF1FB;margin:0 calc(-1 * var(--s5,20px)) 14px;padding:12px var(--s5,20px)}
.vs-dochead .vs-kicker{color:#D8C6A4}
.vs-file{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-kicker{font:700 10.5px/1 var(--font,inherit);letter-spacing:.1em;text-transform:uppercase}

/* right: the verification sheet */
.vsheet{background:var(--paper)}
.vs-head{display:flex;flex-direction:column;gap:4px;border-bottom:2px solid var(--gold,#079B72);padding-bottom:12px;margin-bottom:14px}
.vs-head .vs-kicker{color:var(--gold,#079B72)}
.vs-head b{font-size:18px}
.vs-sub{font-size:12.5px;color:var(--ink-2,#5C6B84);line-height:1.45}

/* numbered chips */
.vs-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:9px;background:var(--gold,#079B72);color:#fff;font:800 12.5px/1 var(--font,inherit);letter-spacing:.04em}

/* the type panel keeps rank 00 */
.dr-typepanel{display:flex;gap:12px;align-items:flex-start}
.dr-typebody{flex:1;min-width:0}

/* numbered section boxes on canvas tint — visibly different from a plain form */
.vs-section{border:1px solid var(--hair);background:var(--canvas,#F7FAFE);border-radius:12px;padding:14px;margin-top:14px}
.vs-sechead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.vs-seccount{font:700 10.5px/1 var(--font,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2,#5C6B84)}

/* one row = tick target + field */
.vs-row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:12px;margin-top:10px;transition:border-color .15s}
.vs-row.low{border-color:var(--t-check,#A65A00)}
.vs-row.done{border-color:var(--t-ok,#07795A);background:#F1FBF7}
.vs-tickwrap{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:2px;cursor:pointer}
.vs-tick{position:absolute;inset:0;opacity:0;cursor:pointer}
.vs-tickface{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--hair);color:transparent;font-size:14px;font-weight:800;background:#fff;transition:all .15s}
.vs-tick:checked + .vs-tickface{background:var(--t-ok,#07795A);border-color:var(--t-ok,#07795A);color:#fff}
.vs-tick:focus-visible + .vs-tickface{outline:2px solid var(--brand,#175DEB);outline-offset:2px}
.vs-fieldbody{min-width:0}

/* honest meter: the REAL % sits right beside it, always */
.vs-meter{display:inline-block;width:44px;height:5px;border-radius:99px;background:var(--hair);margin-left:7px;vertical-align:2px;overflow:hidden}
.vs-meter i{display:block;height:100%;background:var(--ink-2,#5C6B84);border-radius:99px}
.dr-conf.low .vs-meter i{background:var(--t-check,#A65A00)}

/* live counter in the sticky bar */
.dr-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.vs-count{font:700 12px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,#5C6B84);border:1px solid var(--hair);border-radius:999px;padding:6px 12px;background:var(--paper)}

@media(max-width:900px){
  .vs-dochead{margin:0 -16px 12px;padding:10px 16px}
  .vs-section{padding:10px}
  .vs-row{padding:10px}
}

/* ==========================================================================
   ADMIN USERS v2 (2026-08-08) — the plainest page gets the app's card anatomy:
   counted stat strip · card per user (avatar chip, role pill, coloured
   subscription state band) · actions grouped primary/account/danger.
   ========================================================================== */
.adusers .au-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:12px;background:var(--paper);margin-bottom:16px}
.adusers .au-stats>div{padding:12px 16px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.adusers .au-stats>div:first-child{border-left:0}
.adusers .au-stats b{font-size:21px;font-weight:750}
.adusers .au-stats span{font-size:12.5px;color:var(--ink-2,#5C6B84)}
.au-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.au-card{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:16px;min-width:0}
.au-card.au-admin{background:transparent;border-style:dashed}
.au-head{display:flex;align-items:center;gap:12px}
.au-ava{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--brand,#175DEB);color:#fff;font-weight:800;font-size:15px;flex:none}
.au-ava.ava-admin{background:var(--gold,#079B72)}
.au-id{min-width:0;flex:1}
.au-id b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-rec{font-size:12.5px;color:var(--ink-2,#5C6B84)}
.k-pill.ox{background:var(--gold-tint,#E4F8F1);color:var(--gold,#079B72);border:1px solid var(--gold,#079B72)}
.au-state{margin:12px 0 0;border-radius:9px;padding:8px 12px;font:800 11.5px/1 var(--font,inherit);letter-spacing:.06em;background:var(--canvas,#F7FAFE);color:var(--ink-2,#5C6B84);border:1px solid var(--hair)}
.au-state.on{background:#E4F8F1;color:var(--t-ok,#07795A);border-color:var(--t-ok,#07795A)}
.au-state.warn{background:#FFF2D9;color:var(--t-check,#A65A00);border-color:var(--t-check,#A65A00)}
.au-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.au-actions form{display:inline}
.au-ok2{background:var(--paper);color:var(--t-ok,#07795A);border:1.5px solid var(--t-ok,#07795A)}
.au-danger{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);display:flex;justify-content:flex-end}
.au-remove{background:none;border:1px solid var(--t-stop,#BE2F2F);color:var(--t-stop,#BE2F2F);border-radius:8px;padding:8px 12px;font:600 12.5px/1 var(--font,inherit);cursor:pointer;min-height:36px}
.au-remove:hover{background:#FDE8E8}
@media(max-width:900px){
  .au-grid{grid-template-columns:1fr}
  .adusers .au-stats{grid-template-columns:1fr 1fr}
  .adusers .au-stats>div:nth-child(3){border-left:0;border-top:1px solid var(--hair)}
  .adusers .au-stats>div:nth-child(4){border-top:1px solid var(--hair)}
}

/* ==========================================================================
   DATA HEALTH v2 (2026-08-08) — triage anatomy: counted status strip,
   changed-first action cards (one primary action), the repeated instruction
   said once, verified rows quiet, log behind a fold.
   ========================================================================== */
.dhpage .dh-ai{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dh-aichip{border:1px solid var(--hair);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.dh-aichip b{text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.dh-aichip span{font-weight:700;font-size:13px}
.dh-aichip i,.dh-aichip em{font-style:normal;font-size:12px;color:var(--ink-2,#5C6B84)}
.dh-aichip.ok{border-color:var(--t-ok,#07795A);background:#E4F8F1}
.dh-aichip.ok span{color:var(--t-ok,#07795A)}
.dh-aichip.bad{border-color:var(--t-stop,#BE2F2F);background:#FDE8E8}
.dh-aichip.bad span{color:var(--t-stop,#BE2F2F)}
.dh-aichip.idle,.dh-aichip.off{background:var(--canvas,#F7FAFE)}
.dhpage .dh-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:12px;background:var(--paper);margin:14px 0 10px}
.dhpage .dh-stats>div{padding:12px 16px;border-left:1px solid var(--hair)}
.dhpage .dh-stats>div:first-child{border-left:0}
.dhpage .dh-stats b{display:block;font-size:22px;font-weight:750}
.dhpage .dh-stats span{font-size:12.5px;color:var(--ink-2,#5C6B84)}
.dhpage .dh-stats>div.hot b{color:var(--t-stop,#BE2F2F)}
.dhpage .dh-stats>div.warm b{color:var(--t-check,#A65A00)}
.dh-once{background:var(--canvas,#F7FAFE);border:1px solid var(--hair);border-radius:10px;padding:10px 14px;font-size:13px}
.dh-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--hair);border-left:4px solid var(--hair);border-radius:10px;padding:12px 14px;margin-top:10px;background:var(--paper)}
.dh-row.chg{border-left-color:var(--t-stop,#BE2F2F)}
.dh-row.att{border-left-color:var(--t-check,#A65A00)}
.dh-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.dh-id b{font-size:13.5px}
.dh-id span{font-size:12.5px;color:var(--ink-2,#5C6B84)}
.dh-id i{font-style:normal;font-size:12px;color:var(--t-check,#A65A00)}
.dh-when{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.dh-when i{font-style:normal;font-size:12px;color:var(--ink-2,#5C6B84)}
.dh-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.dh-src{font-size:12.5px;color:var(--ink-2,#5C6B84);text-decoration:underline;text-underline-offset:2px;min-height:24px;display:inline-flex;align-items:center}
.dh-quiet{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);min-width:0}
.dh-quiet:last-of-type{border-bottom:0}
.dh-dot{color:var(--t-ok,#07795A);font-weight:800}
.dh-quiet b{font-size:12.5px;white-space:nowrap}
.dh-quiet span{font-size:12.5px;color:var(--ink-2,#5C6B84);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.dh-quiet i{font-style:normal;font-size:12px;color:var(--ink-2,#5C6B84);white-space:nowrap}
.dh-log summary{cursor:pointer;list-style:none}
.dh-log summary::-webkit-details-marker{display:none}
.dh-log summary h2::after{content:" ▸";color:var(--ink-2,#5C6B84)}
.dh-log[open] summary h2::after{content:" ▾"}
@media(max-width:900px){
  .dhpage .dh-ai{grid-template-columns:1fr}
  .dhpage .dh-stats{grid-template-columns:1fr 1fr}
  .dhpage .dh-stats>div:nth-child(3){border-left:0;border-top:1px solid var(--hair)}
  .dhpage .dh-stats>div:nth-child(4){border-top:1px solid var(--hair)}
  .dh-row{grid-template-columns:1fr}
  .dh-act{align-items:flex-start}
}

/* ==========================================================================
   APPLY KIT v3 + GREEN SHELL — built to zinc's ChatGPT mock (2026-08-08).
   The mock's art direction: deep forest sidebar, serif display titles, flag
   medallion, per-country skyline watermark, icon-medallion fact panels,
   green info quotes, evidence timeline, green primary buttons, help floater.
   Shell theme = append-only overrides (delete this block to fully revert).
   ========================================================================== */
/* ---- the shell goes deep green (mock's sidebar) ---- */
@media(min-width:1024px){
  header{background:linear-gradient(180deg,#071A38,#0B2451);border-right:1px solid #04122A}
  header .lw b{color:#FFFFFF}
  header .lw i{color:#9FB6D9}
  header nav a{color:#C7D9F5}
  header nav a:hover{background:#16386B;color:#fff}
  /* handoff §4: active = translucent blue surface + a bright blue inner indicator */
  header nav a.on{background:rgba(23,93,235,.22);color:#fff;position:relative}
  header nav a.on::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    border-radius:0 3px 3px 0;background:var(--brand-500,#2F66F6);
  }
  header nav .nico{stroke:currentColor}
  header .btn.sec{background:transparent;color:#C7D9F5;border-color:#23497F}
  header .who{background:#10305C;border-color:#23497F;color:#DDE8F7}
  header .who b,header .who span{color:#DDE8F7}
}
/* upgrade card in the sidebar (free students only — rendered by head.ejs) */
.sideup{display:none}
@media(min-width:1024px){
  .sideup{display:block;margin:14px 12px;padding:14px;border-radius:12px;background:#10305C;border:1px solid #23497F;color:#DDE8F7}
  .sideup b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
  .sideup span{font-size:12px;color:#9FB6D9;display:block;margin-bottom:10px}
  .sideup a{display:inline-flex;align-items:center;gap:6px;background:#175DEB;color:#fff;border-radius:9px;padding:9px 12px;font:700 12.5px/1 var(--font,inherit);text-decoration:none;min-height:36px}
  .sideup a:hover{background:#2F66F6}
}

/* ---- kit page components ---- */
.kitv3 .kv3-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.kv3-back{color:var(--ink-2,#5C6B84);text-decoration:none;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center}
.kv3-back:hover{text-decoration:underline}
.kv3-print{background:#175DEB}
.kv3-print:hover{background:#124FCB}
.kv3-meta{margin:0 0 14px}
.kv3-card{position:relative;overflow:hidden;padding:22px}
.kv3-sky{position:absolute;right:-8px;top:-4px;width:300px;height:120px;color:#175DEB;opacity:.10;pointer-events:none}
.kv3-sky svg{width:100%;height:100%}
.kv3-head{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:start;margin-bottom:16px}
.kv3-flag{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh-1,0 1px 2px rgba(0,0,0,.06))}
.kv3-title{min-width:0}
.kv3-title h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:26px;line-height:1.2;letter-spacing:.01em}
.kv3-title i{display:block;font-style:normal;font-size:13px;color:var(--ink-2,#5C6B84);margin-top:4px}
.kv3-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kv3-apply{background:#175DEB;min-height:44px}
.kv3-apply:hover{background:#124FCB}
.kv3-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.kv3-panel{position:relative;border:1px solid var(--hair);border-radius:10px;background:#fff;padding:14px 16px 14px 62px;min-width:0}
.kv3-med{position:absolute;left:14px;top:14px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#E4F8F1;color:#175DEB}
.kv3-med svg{width:19px;height:19px}
.kv3-quote{margin-top:8px;padding:8px 10px;border-left:3px solid #175DEB;background:#E4F8F1;color:#29415F;font-size:12.5px;line-height:1.45;border-radius:0 8px 8px 0}
.kv3-evlist{position:relative}
.kv3-evlist::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--hair)}
.kv3-ev{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--hair)}
.kv3-ev:last-child{border-bottom:0}
.kv3-evico{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid currentColor;font-weight:800;font-size:14px}
.kv3-evtxt{min-width:0;display:flex;flex-direction:column;gap:3px}
.kv3-evtxt b{font-size:14px}
.kv3-verdict{align-self:center}
.kv3-help{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;flex-direction:column;gap:3px;max-width:230px;background:#fff;border:1px solid var(--hair);border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(7,26,56,.18);text-decoration:none;color:var(--ink)}
.kv3-help b{font-size:14px}
.kv3-help span{font-size:12px;color:var(--ink-2,#5C6B84)}
.kv3-help i{font-style:normal;margin-top:8px;display:inline-flex;align-items:center;background:#071A38;color:#fff;border-radius:8px;padding:8px 10px;font:700 12px/1 var(--font,inherit)}
@media(max-width:900px){
  .kv3-head{grid-template-columns:44px minmax(0,1fr)}
  .kv3-apply{grid-column:1/-1;justify-self:stretch;text-align:center}
  .kv3-flag{width:44px;height:44px}
  .kv3-title h2{font-size:21px}
  .kv3-facts{grid-template-columns:1fr}
  .kv3-sky{display:none}
  .kv3-help{position:static;max-width:none;margin-top:14px}
}
@media print{.kv3-help{display:none}.kv3-sky{display:none}}

/* ==========================================================================
   THE SEARCH RECEIPT  (zinc 2026-08-12)
   His words after a real, correct, 13 ms search: "i dont know if the info it shows is correct and
   if it even did the process of searching, i feel like it didnt even work."
   Nothing here is decoration and nothing here is invented — every figure is a count runMatching
   took from rows it actually read. The point of the block is that a suspicious person can check it.
   ========================================================================== */
.receipt{
  margin:14px 0;border:1px solid var(--ink);border-radius:12px;
  background:var(--paper);overflow:hidden;
}
.rc-head{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;
  padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--hair);
}
.rc-flow{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0}
.rc-flow li{padding:12px 14px;border-right:1px solid var(--hair);min-width:0}
.rc-flow li:last-child{border-right:none}
.rc-flow li b{
  display:block;font-size:1.6rem;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);
}
.rc-flow li span{display:block;margin-top:2px;font-size:var(--t-xs);line-height:1.4;color:var(--ink-2)}
.rc-line{
  margin:0;padding:9px 14px;border-top:1px solid var(--hair);
  font-size:var(--t-xs);line-height:1.55;
}
.rc-k{
  display:inline-block;margin-right:7px;padding:1px 7px;border-radius:999px;
  border:1px solid currentColor;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:1px;
}
/* The four caveats, folded (they used to sit open between the student and their answer). */
.advicefold{margin:12px 0;border:1px solid var(--hair);border-radius:10px;background:var(--paper)}
.advicefold>summary{
  padding:11px 14px;min-height:44px;display:flex;align-items:center;
  cursor:pointer;font-weight:700;font-size:var(--t-sm);color:var(--ink-1);
}
.advicefold[open]>summary{border-bottom:1px solid var(--hair)}
.advicefold .statusline{padding:8px 14px}
@media(max-width:640px){
  .rc-flow{grid-template-columns:1fr}
  .rc-flow li{border-right:none;border-bottom:1px solid var(--hair);display:grid;
    grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;padding:10px 14px}
  .rc-flow li:last-child{border-bottom:none}
  .rc-flow li b{font-size:1.25rem}
  .rc-flow li span{margin-top:0}
}

/* ==========================================================================
   DARK SIDEBAR — CONTRAST REPAIR  (zinc 2026-08-12)
   "on the left side panel is you see the card of aitezazkhan523@gmail.com its the same color as the
   side panel which makes it invisible."
   He found one. A measured sweep of every element inside <header> at 1280px found four, all the same
   root cause: the dark-shell block was appended using selectors with FEWER classes than the
   light-theme rules it has to beat, so the light colour kept winning inside a dark box.
   Measured WCAG ratios before → after (Chrome, real page, real logged-in session):
     account email  .who .wmail        1.25 → 12.0   (the one he reported)
     active nav icon a.on .nico        1.14 → 10.1
     nav icons      nav a .nico        2.18 → 10.9
     wordmark tagline .lw i            2.18 →  6.5
   Each rule below deliberately carries at least as many classes as the light rule it overrides, so
   this cannot silently regress the next time a token changes.
   ========================================================================== */
@media(min-width:1024px){
  header .who{background:#10305C;border-color:#23497F}
  header .who .wmail{color:#C7D9F5}
  header .who .avi{background:#175DEB;color:#FFFFFF}
  /* The chip is a link now, and the light hover from the top of this sheet would flash a pale
     panel inside the navy sidebar. Hover on navy = a lighter navy. */
  header .who:hover,header .who:focus-visible{background:#16386B;border-color:#2F66F6}
  header .who:hover .wmail,header .who:focus-visible .wmail{color:#FFFFFF}
  header .who-go{color:#9FB6D9}
  header .who:hover .who-go{color:#FFFFFF}
  header .logo .lw i{color:#9FB6D9}
  header nav a .nico{color:#C7D9F5}
  header nav a:hover .nico{color:#FFFFFF}
  header nav a.on .nico{color:#FFFFFF}
  header .btn.small.sec{background:transparent;color:#C7D9F5;border:1px solid #23497F}
  header .btn.small.sec:hover{background:#16386B;color:#FFFFFF}
  /* Anything dropped into the sidebar later inherits a readable colour instead of dark-on-dark. */
  header .mut,header .small.mut,header .meta{color:#9FB6D9}
}

/* The level challenge — shown when a student's own confirmed degree contradicts the level they
   picked. Deliberately loud: on zinc's real run this was the difference between "0 programmes fit
   you" and 15 real master's programmes his degree qualifies for. */
.levelbox{
  margin:14px 0;padding:var(--s4) var(--s5);border-radius:var(--r-md);
  background:var(--t-check-bg);border:1px solid rgba(166,90,0,.35);border-left:3px solid var(--t-check);
}
.levelbox .lb-h{margin:0 0 6px;font-weight:700;font-size:var(--t-body);color:var(--ink)}
.levelbox form{margin-top:10px}

/* A panel that cannot be used yet says so ON THE CLOSED ROW — never only after you open it. */
summary.islocked{color:var(--ink-2)}
summary.islocked .pico,summary.islocked svg{opacity:.55}
.st.st-lock{
  background:var(--paper-2);color:var(--locked,#5A6270);
  border:1px dashed var(--hair-2,#C9BCA4);font-weight:600;
}

/* ==========================================================================
   UPLOAD PAGE  (/me for a new student) — rebuilt 2026-08-12
   zinc: "the frontend design for this page is very basic and boring."
   Every token below already exists; no new colour, no image, no web font, no dependency.
   ========================================================================== */
.up{max-width:1060px;margin:0 auto}
.up-head{margin-bottom:var(--s5)}
.up-kick{
  margin:0 0 var(--s1);color:var(--gold-ink);font-size:var(--t-xs);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.up-lede{max-width:60ch;color:var(--ink-2);margin:0 0 var(--s5)}
.up-rail{
  display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0;
  border-top:1px solid var(--hair);
}
.up-rail li{position:relative;padding:var(--s4) var(--s2) 0;color:var(--ink-3);font-size:var(--t-xs)}
.up-rail li::before{
  content:"";position:absolute;top:-5px;left:var(--s2);width:9px;height:9px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--hair-2);
}
.up-rail li.on{color:var(--ink-1);font-weight:700}
.up-rail li.on::before{background:var(--gold);border-color:var(--gold)}
.up-rail li span{margin-right:5px;font-variant-numeric:tabular-nums}

.up-bench{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(240px,2fr);
  grid-template-areas:"pick need" "trust trust";
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
}
.up-pick,.up-need,.up-trust{background:var(--paper);min-width:0}
.up-pick{grid-area:pick;padding:var(--s5)}
.up-need{grid-area:need;padding:var(--s5)}
.up-pick h2,.up-need h2{margin:0 0 var(--s2);font-size:var(--t-title)}
.up-note{color:var(--ink-3);font-size:var(--t-sm);margin:0}

.up-list{list-style:none;margin:var(--s4) 0 0;padding:0}
.up-list li{
  display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--s3);
  align-items:start;padding:var(--s3) 0;border-top:1px solid var(--hair);
}
.up-list .d{width:13px;height:13px;margin-top:5px;border:1px solid var(--hair-2);border-radius:50%}
.up-list small{display:block;color:var(--ink-3);font-size:var(--t-xs);line-height:1.4}
.up-list em{color:var(--ink-3);font-size:var(--t-xs);font-style:normal;white-space:nowrap;padding-top:2px}

.up-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:158px;margin:var(--s5) 0 var(--s3);padding:var(--s5);
  border:2px dashed var(--hair-2);border-radius:var(--r-md);background:var(--paper-2);cursor:pointer;
}
.up-drop:hover,.up-drop.over{border-color:var(--brand);background:var(--brand-tint)}
.up-drop.has{border-style:solid;border-color:var(--t-ok);background:var(--t-ok-bg)}
.up-drop svg{
  width:30px;height:30px;margin-bottom:var(--s2);fill:none;stroke:var(--ink-2);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.up-drop strong{font-size:var(--t-body)}
.up-drop span{color:var(--ink-3);font-size:var(--t-xs);margin-top:2px}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.vh:focus-visible + .up-drop{outline:3px solid var(--brand);outline-offset:3px}

.up-picked{min-height:40px;margin-bottom:var(--s3)}
.up-picked p{margin:0;font-weight:700;font-size:var(--t-sm)}
.up-picked ul{margin:var(--s1) 0 0;padding-left:var(--s5);font-size:var(--t-xs);color:var(--ink-2)}
.up-picked li{overflow-wrap:anywhere;padding:1px 0}
.up-pick .btn.big{width:100%;justify-content:center}

.up-tip{margin-top:var(--s4);border-top:1px solid var(--hair)}
.up-tip summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:var(--t-sm)}
.up-tip ul{margin:0 0 var(--s3);padding-left:var(--s5);color:var(--ink-2);font-size:var(--t-xs);line-height:1.6}

.up-trust{grid-area:trust;display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--s5)}
.up-trust div{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid var(--hair)}
.up-trust div + div{padding-left:var(--s4)}
.up-trust div:last-child{border-right:none}
.up-trust b{display:block;font-size:var(--t-sm)}
.up-trust span{display:block;margin-top:3px;color:var(--ink-3);font-size:var(--t-xs);line-height:1.5}

.up-after{margin-top:var(--s5);padding:var(--s5);background:var(--paper);
  border:1px solid var(--hair);border-top:2px solid var(--gold);border-radius:var(--r-md)}
.up-after ol{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);list-style:none;margin:var(--s3) 0 0;padding:0}
.up-after li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s3)}
.up-after li > span{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair-2);font-weight:800;font-size:var(--t-sm);color:var(--ink-2);
}
.up-after p{margin:2px 0 0;color:var(--ink-3);font-size:var(--t-xs);line-height:1.55}

@media(max-width:860px){
  /* On a phone the checklist comes FIRST — you go and find the papers before you can choose them. */
  .up-rail{display:none}
  .up-bench{grid-template-columns:minmax(0,1fr);grid-template-areas:"need" "pick" "trust";border-radius:var(--r-md)}
  .up-pick,.up-need{padding:var(--s4)}
  .up-trust{grid-template-columns:1fr;padding:0 var(--s4)}
  .up-trust div{padding:var(--s4) 0;border-right:none;border-bottom:1px solid var(--hair)}
  .up-trust div + div{padding-left:0}
  .up-trust div:last-child{border-bottom:none}
  .up-drop{min-height:132px}
  .up-after{padding:var(--s4)}
  .up-after ol{grid-template-columns:1fr;gap:var(--s4)}
}

/* A per-document caution, on the card in the list. */
.dc-flag{
  display:block;margin-top:6px;font-size:var(--t-xs);font-weight:700;line-height:1.35;
  color:currentColor;
}
.doccard .dc-flag.tone-stop{color:var(--t-stop)}
.doccard .dc-flag.tone-check{color:var(--t-check)}
.doccard .dc-flag.tone-noted{color:var(--t-noted)}

/* Flag count on a COLLAPSED panel row — a problem must not disappear just because the step is done. */
.st.st-flag{
  background:var(--t-check-bg);color:var(--t-check);
  border:1px solid rgba(166,90,0,.35);font-weight:700;margin-left:6px;
  white-space:nowrap;
}

/* A summary row that carries TWO pills (e.g. "10/10 confirmed" + "⚠ 6 to check") must not push the
   chevron off a 390px screen. The title takes the whole first line; the pills wrap under it. */
@media(max-width:560px){
  details.panel>summary{flex-wrap:wrap}
  details.panel>summary .st{margin-left:0}
  details.panel>summary .st:first-of-type{margin-left:auto}
  details.panel>summary .st.st-flag{margin-left:0}
}

/* ==========================================================================
   MOBILE MATCH CARDS — round-42 open item 4 (zinc: "finish with the open items")
   At 390px, 13 of 15 card titles truncated to identical stubs ("Computer S…" twice from the same
   university), and every per-card signal (check bars, verdict tone, fee) was display:none — a wall
   of same-looking cards. The title now wraps to two lines, and a compact strip of the SAME real
   counts (never a score) returns to the phone.
   ========================================================================== */
@media(max-width:640px){
  .ec-main b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:1080px){
  /* the check chips come back as a one-line strip under the title instead of vanishing */
  .evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr) auto auto;grid-auto-flow:dense}
  .ec-mets{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 10px;grid-column:2 / -1;grid-row:2}
  .ec-met{grid-template-columns:auto auto;gap:5px}
}

/* Round-42 polish: the two worst thumb targets, measured at 390px (chat × 30x30, View details 34px). */
.guide-chat-close{padding:14px;margin:-12px -10px -12px 0}
@media(max-width:640px){
  .ec-cta{min-height:44px}
  /* the journey costs table gets its own horizontal scroll instead of crushing 3 columns into 390px */
  .jcosts-wrap,.costs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* GRE tile programme list was cut mid-word with no ellipsis ("IE Universi") */
.tf-progs{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ==========================================================================
   EVIDENCE COMPONENTS — the 2026-08-15 redesign (handoff §4)
   The signature of the product: a 2px line that starts BLUE (extracted /
   pending) and turns MINT (human-confirmed / source-verified). The line is
   decorative; every relationship it draws is ALSO written in text, because a
   student on a screen reader must get the same answer (handoff §10).
   ========================================================================== */

/* ---- the line itself -------------------------------------------------- */
.evline{display:flex;align-items:center;gap:0;min-height:2px}
.evline .ev-node{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--ev-pending);box-shadow:0 0 0 3px rgba(23,93,235,.14);
}
.evline .ev-node.done{background:var(--ev-confirmed);box-shadow:0 0 0 3px rgba(7,155,114,.16)}
.evline .ev-node.wait{background:var(--paper);border:2px solid var(--ev-track);box-shadow:none}
.evline .ev-seg{
  height:2px;flex:1 1 auto;min-width:18px;background:var(--ev-track);border-radius:2px;
  transition:background-color .32s ease;
}
.evline .ev-seg.pending{background:var(--ev-pending)}
.evline .ev-seg.done{background:linear-gradient(90deg,var(--ev-pending),var(--ev-confirmed))}
.evline .ev-seg.confirmed{background:var(--ev-confirmed)}

/* a vertical rail is what the same relationship looks like on a phone */
@media(max-width:767px){
  .evline.stacks{flex-direction:column;align-items:flex-start;gap:0}
  .evline.stacks .ev-seg{width:2px;height:auto;min-height:22px;flex:0 0 auto;margin-left:4px}
}

/* ---- the progress bar shares the same two colours --------------------- */
.evbar{height:8px;border-radius:999px;background:var(--ev-track);overflow:hidden}
.evbar>i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ev-pending),var(--ev-confirmed));
  transition:width .36s cubic-bezier(.2,.8,.2,1);
}

/* ---- structured panel (handoff §4: borders before shadows) ------------ */
.panel{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s4);
}
.panel.feature{
  background:linear-gradient(160deg,var(--ink-900) 0%,#0B2451 100%);
  color:var(--ink-inv);border-color:transparent;border-radius:var(--r-xl);
}
.panel.feature h2,.panel.feature h3,.panel.feature b{color:#fff}
.panel.feature a{color:var(--gold-2)}
.panel.quiet{background:var(--paper-2)}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--hair);
}
.panel-head h2,.panel-head h3{margin:0}

/* ---- metadata rows: fine dividers, aligned numeric columns ------------ */
.metarow{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:9px 0;border-bottom:1px solid var(--hair);
}
.metarow:last-child{border-bottom:0}
.metarow>span:first-child{color:var(--ink-3);font-size:var(--t-sm)}
.metarow>span:last-child,.metarow b{font-variant-numeric:tabular-nums;text-align:right}

/* ---- motion: honoured everywhere, switched off on request (handoff §9) - */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   PROGRAMME ROWS on the road (handoff §6.1, 2026-08-15)
   Replaces three banner cards. A row shows the same facts the card showed —
   name, institution, tuition, deadline, degree-match verdict, and the source
   with its check date — but three of them line up, so a student can compare
   instead of scrolling sideways through equal-looking boxes.
   ========================================================================== */
.prows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.prow{border-bottom:1px solid var(--hair)}
.prow-l{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:var(--s4);padding:var(--s4) var(--s2);min-height:76px;
  text-decoration:none;color:inherit;border-radius:var(--r-sm);
}
.prow-l:hover{background:var(--brand-tint);text-decoration:none}
.prow-flag{display:flex;align-items:center;flex:none}
.prow-flag .flagsvg{border-radius:3px;box-shadow:0 0 0 1px rgba(11,31,58,.14)}
.prow-main{min-width:0}
.prow-main b{display:block;font-size:var(--t-sm);line-height:1.32;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prow-inst{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.prow-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.prow-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--paper-3);color:var(--ink-2);font:600 11px/1.6 var(--font);white-space:nowrap}
.prow-chip.kept{background:var(--gold-tint);color:var(--gold-ink)}
.prow-chip.soon{background:var(--t-stop-bg);color:var(--t-stop)}
.prow-chip.closed{background:var(--t-noted-bg);color:var(--t-noted)}
.prow-mets{display:flex;gap:var(--s5);flex:none}
.prow-met{display:flex;flex-direction:column;gap:5px;min-width:0}
.prow-met .kk{font:700 9.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.prow-met .vv{font:500 11px/1.4 ui-monospace,Consolas,monospace;color:var(--ink-3);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-go{width:18px;height:18px;flex:none;color:var(--ink-3)}
.prow-l:hover .prow-go{color:var(--brand)}
.prow-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font:700 var(--t-sm)/1 var(--font);color:var(--brand-600)}

@media(max-width:900px){
  /* the metric columns fall under the name rather than squeezing it to nothing */
  .prow-l{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3)}
  .prow-mets{grid-column:2 / -1;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:8px}
  .prow-met .vv{max-width:none}
}

/* ==========================================================================
   TOUCH TARGET FLOOR (2026-08-15) — gated on the POINTER, not the viewport.
   The 2026-07-25 fix raised the small controls to 44px, but only inside
   @media(max-width:640px). A tablet at 900px, or a touch laptop, got none of
   it. Measured on the running app at 1707px: 196 interactive elements under
   44px tall (btn.small 38 · summary 34 · .ec-cta 34 · .src 15 · checkbox 13).
   Anything a finger can hit is raised here whatever the window width is.
   Precise pointers keep the compact sizes the references show.
   ========================================================================== */
/* WCAG 2.2 SC 2.5.8 (Target Size Minimum, AA) asks for 24x24 on EVERY pointer, not just
   touch. Measured with a mouse at 1707px: 37 targets under 24px — 25 native checkboxes at
   13x13 and 12 source links 15px tall. These two get their floor unconditionally. */
/* Vertical padding on an INLINE link grows the hit box without changing the line box, so no
   text moves anywhere on the page. 5px takes the smallest link on the app (.src, a 15px line
   box) to 25px. Buttons and pills are excluded: they set their own height. */
a:not(.btn):not(.k-btn):not(.chip):not(.hb):not(.badge):not(.k-pill){padding-block:5px}
input[type=checkbox],input[type=radio]{width:24px;height:24px;accent-color:var(--brand)}

@media(pointer:coarse){
  .btn.small,.k-btn.small,a.btn.small,button.btn.small{min-height:44px;padding-inline:var(--s4)}
  .ec-cta,.kebab-item,.chip,.prow-chip{min-height:44px}
  summary{min-height:44px;display:flex;align-items:center}
  /* .src is an INLINE link that sits mid-sentence, so it is grown with vertical padding
     (which does not move the line box) and the line-height of its container is opened up
     so two stacked links cannot overlap each other's hit area. */
  .src{padding-block:15px}
  p:has(.src),li:has(.src),td:has(.src),div:has(.src){line-height:2.4}
  /* a native checkbox is 13px; the whole label row becomes the target instead */
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
}

/* ==========================================================================
   SOURCES LIBRARY (handoff §6.5, 2026-08-15)
   Search + filters, four shelves, and an inspector inside each row that says
   which answer the page supports. The inspector is a <details>, not a modal
   or a drawer: it works with no JavaScript, it prints, and on a phone it is
   already the "drawer" the handoff asks for.
   ========================================================================== */
.srcbar{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin:var(--s5) 0 var(--s3);
}
.srcfind{
  display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:0;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:0 14px;min-height:48px;
}
.srcfind:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.srcfind svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.srcfind input{
  flex:1;min-width:0;border:0;background:none;min-height:46px;padding:0;
  font:400 var(--t-sm)/1 var(--font);color:var(--ink-1);
}
.srcfind input:focus{outline:none;box-shadow:none}
.srcfilters{display:flex;gap:6px;flex-wrap:wrap}
.srcf{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--paper);
  font:600 var(--t-xs)/1 var(--font);color:var(--ink-2);cursor:pointer;
}
.srcf span{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.srcf:hover{border-color:var(--hair-2)}
.srcf.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* Measured 2026-08-15: rgba(255,255,255,.8) on the brand blue is 4.12:1 — an AA failure at 12px.
   Hierarchy comes from the weight, not from fading the count until it cannot be read. */
.srcf.on span{color:#fff;font-weight:500}
.srccount{margin:0 0 var(--s3)}

.srcshelf{margin-bottom:var(--s5)}
.srcshelf-h{
  display:flex;align-items:center;gap:9px;margin:0 0 var(--s2);
  font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.srcshelf-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 6px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink-2);
  font:700 11px/1 var(--font);letter-spacing:0;
}
.srcrow{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-sm);
  margin-bottom:8px;
}
.srcrow[open]{border-color:var(--brand);box-shadow:var(--sh-1)}
.srcrow>summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  padding:12px 14px;min-height:56px;cursor:pointer;list-style:none;
}
.srcrow>summary::-webkit-details-marker{display:none}
.srcrow>summary:hover{background:var(--paper-2)}
.srcrow-main{min-width:0}
.srcrow-main b{display:block;font-size:var(--t-sm);color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcrow-where{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:1px}
.srcrow-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.srcrow-n{font:600 var(--t-xs)/1 var(--font);color:var(--ink-3);white-space:nowrap}

.srcinspect{padding:0 14px 14px;border-top:1px solid var(--hair);margin-top:-1px;padding-top:14px}
.srci-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:8px}
.srci-head .k{font:700 10px/1 var(--font);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.srci-when{font:500 11.5px/1 ui-monospace,Consolas,monospace;color:var(--ink-3)}
.srci-list{list-style:none;margin:0 0 var(--s3);padding:0}
.srci-list li{
  padding:10px 0 10px 14px;border-left:2px solid var(--ev-confirmed);
  border-bottom:1px solid var(--hair);
}
.srci-list li:last-child{border-bottom:0}
.srci-req{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink-1);line-height:1.4}
/* These lines carry raw URLs and quoted requirement text — unbreakable strings. With the inspector
   OPEN at 390px the widest of them pushed the whole page to 430px and /me/sources scrolled sideways
   (measured 2026-08-16 with every <details> forced open, which is the only honest way to measure). */
.srci-val,.srci-note,.srci-where{display:block;font-size:var(--t-xs);line-height:1.5;margin-top:3px;overflow-wrap:anywhere;min-width:0}
.srci-val{color:var(--ink-2)}
.srci-note{color:var(--ink-3)}
.srci-where{color:var(--ink-3);font-weight:600}
.srci-warn{
  margin:0 0 var(--s3);padding:10px 12px;border-radius:10px;
  background:var(--t-check-bg);color:var(--t-check);font-size:var(--t-xs);line-height:1.55;
}
.srcempty{margin:var(--s5) 0;color:var(--ink-2)}

@media(max-width:720px){
  .srcrow>summary{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .srcrow-tags{grid-column:1 / -1;justify-content:flex-start}
  .srcfind{flex-basis:100%}
}
.srcrow-page{font-weight:400;color:var(--ink-3)}

/* ---- journey zones (handoff §6.3) ------------------------------------------
   Three numbered zones, each opening with why it matters. The number is a real
   character in the summary, so a screen reader announces "1 Required language
   tests" and a greyscale printout still shows the order. */
.panel.zone>summary .zn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;margin-right:10px;border-radius:50%;
  background:var(--brand);color:#fff;font:800 13px/1 var(--font);
}
.panel.zone>.zwhy{
  margin:0;padding:12px var(--s5) 14px;
  border-bottom:1px solid var(--hair);
  font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);background:var(--brand-tint);
}
.panel.zone>.zwhy b{color:var(--ink-1)}
.panel.zone:not([open])>.zwhy{display:none}
/* Disabled export: it must look unavailable AND say why (handoff §6.4, §8). */
.kv3-print[disabled]{background:var(--t-locked);border-color:var(--t-locked);cursor:not-allowed;box-shadow:none}
.kv3-print[disabled]:hover{background:var(--t-locked);border-color:var(--t-locked)}

/* ==========================================================================
   INTERVIEW GATE CARDS (handoff §6.7, 2026-08-15)
   One card per gate the student actually faces. Every number is a COUNT of a
   real thing; there is deliberately no readiness percentage, because nothing
   in the data supports one.
   ========================================================================== */
.gatecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%), 1fr));gap:var(--s4);margin:0 0 var(--s5)}
.gatecard{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
}
.gc-head{display:flex;align-items:center;gap:11px}
.gc-flag{display:flex;align-items:center;flex:none}
.gc-flag .flagsvg{border-radius:3px;box-shadow:0 0 0 1px rgba(11,31,58,.14)}
.gc-name{min-width:0;margin-right:auto}
.gc-name b{display:block;font-size:var(--t-title);line-height:1.25;color:var(--ink-1)}
.gc-name span{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;margin-top:2px}
.gc-nums{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);margin:0}
.gc-nums>div{min-width:0}
.gc-nums dt{font:700 9.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.gc-nums dd{margin:3px 0 0;font:800 1.125rem/1.1 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums}
.gc-cats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gc-cats .k{width:100%;font:700 9.5px/1.3 var(--font);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.gc-cats .chip{font-size:11px;padding:4px 10px}
.gc-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* ==========================================================================
   NARROW-SCREEN REPAIRS measured at 375px on the real pages (2026-08-15)
   ========================================================================== */
@media(max-width:560px){
  /* 2026-08-15: the two help buttons clipped their own labels — 155px of text inside a 139px box,
     so a student read "Human consultant · Mari". The cure was one button per row.
     2026-08-16, superseded: that made the bar 150px tall, and the bar is now STICKY on EVERY page
     rather than only the road, so it ate 26% of a 320x568 screen for good. The label is the whole
     point of the button, so the label got shorter instead of the bar getting taller — "Maria" and
     "Ask Zinc" fit one row with no clipping. Stacking is left in place only below 360px, where
     even the short labels would be tight. */
  .cbar-btn{padding-block:8px;text-align:center}

  /* Zinc is 210px wide — 58% of a 360px screen — and at that size he can sit over the one
     action the road is asking for. Handoff §6.1: compact, dismissible, never covering a
     primary action. On a phone he shrinks to the figure alone; his caption and the chat open
     when the student taps him. */
  .guide{--gw:56px;right:10px;bottom:10px}
  .guide .guide-body{display:none}
  .guide[data-state="chat"] .guide-body{display:block}
}

/* ==========================================================================
   DOCUMENTS + PROGRAMMES WORKSPACE (handoff §6.2, 2026-08-15)
   Built to images/app/02-documents-before-after.png.
   ========================================================================== */
.wshead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;margin-bottom:var(--s5);
}
.wsh-hi{margin:0;font-size:var(--t-sm);color:var(--ink-3)}
.wshead h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 8px;
  font-size:var(--t-display);line-height:1.1}
.wsh-verif{font-size:var(--t-xs)}
.wsh-meta{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:0;
  font-size:var(--t-sm);color:var(--ink-2)}
.wsh-meta>span{display:inline-flex;align-items:center;gap:6px}
.wsh-ring{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.wsh-ring svg{width:78px;height:78px}
.wsh-ring>span{font:700 10.5px/1 var(--font);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- profile summary: the four facts every match is computed against ------ */
.psum{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s4)}
.psum-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.psum-h h2{margin:0;font-size:var(--t-title)}
.psum-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.ptile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:1px var(--s3);align-items:center;
  background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:12px 14px}
.pt-ico{grid-row:1 / 3;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:var(--brand-tint);color:var(--brand-600)}
.pt-ico svg{width:17px;height:17px}
.pt-k{font:700 9.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pt-v{font:700 var(--t-sm)/1.3 var(--font);color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .wshead h1{font-size:var(--t-hero)}
  .wsh-ring{order:-1}
}

/* ---- document verification table (handoff §6.2) --------------------------- */
.dtable{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.dt-head,.dt-row{display:grid;grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1.6fr) auto;
  gap:var(--s4);align-items:center;padding:12px var(--s4)}
.dt-head{
  background:var(--paper-2);border-bottom:1px solid var(--hair);
  font:700 9.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.dt-row{border-bottom:1px solid var(--hair)}
.dt-row:last-child{border-bottom:0}
.dt-row:hover{background:var(--paper-2)}
.dt-doc{display:flex;align-items:center;gap:11px;min-width:0}
.dt-doctxt{min-width:0}
.dt-doctxt b{display:block;font-size:var(--t-sm);color:var(--ink-1);line-height:1.3}
.dt-doctxt i{display:block;font-style:normal;font:500 11px/1.4 ui-monospace,Consolas,monospace;
  color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.dt-when{font-style:normal;font-size:11px;color:var(--ink-3)}
.dt-facts{display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}
.dt-fact{display:flex;flex-direction:column;min-width:0}
.dt-fact i{font-style:normal;font:700 9px/1.3 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.dt-fact b{font:600 12px/1.35 var(--font);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-fact.none{font-size:11.5px;color:var(--ink-3);font-style:italic}
.dt-flag{flex:1 1 100%;font-size:11.5px;line-height:1.45;color:var(--t-check)}
.dt-flag.tone-stop{color:var(--t-stop)}
.dt-act{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.dt-lbl{display:none}

/* Below the tablet breakpoint the table becomes labelled card rows (handoff §7). */
@media(max-width:900px){
  .dt-head{display:none}
  .dt-row{grid-template-columns:1fr;gap:10px;padding:14px var(--s4)}
  .dt-lbl{display:block;font:700 9px/1.3 var(--font);letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
  .dt-status{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
  .dt-status .dt-lbl{width:100%;margin:0}
  .dt-act{justify-content:flex-start}
  .dt-act .btn{flex:1}
}

/* the mint "evidence connected" bar that closes the panel */
.evconn{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:var(--s4);
  padding:14px var(--s4);border-radius:var(--r-sm);
  background:var(--gold-tint);border:1px solid rgba(7,155,114,.28);
}
.evconn-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:10px;background:var(--gold);color:#fff}
.evconn-ico svg{width:18px;height:18px}
.evconn-txt{flex:1;min-width:min(200px,100%);font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.evconn-txt b{display:block;font-size:var(--t-sm);color:var(--t-ok)}

/* ---- fit tiles + sort bar above the matches (handoff §6.2) ---------------- */
.fittiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:var(--s4) 0 var(--s3)}
.fittile{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:11px 14px}
.ft-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fittile.t-ok .ft-dot{background:var(--t-ok)}
.fittile.t-check .ft-dot{background:var(--t-check)}
.fittile.t-unknown .ft-dot{background:var(--t-unknown)}
.fittile.t-kept .ft-dot{background:var(--brand)}
.ft-txt{display:flex;flex-direction:column;font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;min-width:0}
.ft-txt b{font-size:1.125rem;font-weight:800;color:var(--ink-1);line-height:1.1;font-variant-numeric:tabular-nums}
.sortbar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin:var(--s4) 0 var(--s3)}
.sortbar h3{margin:0;font-size:var(--t-title);display:flex;align-items:center;gap:9px}
.sb-note{font-size:var(--t-xs);color:var(--ink-3);max-width:56ch}

/* The gauge moves to the LEFT of the row and grows, as the reference has it.
   SIX children (ring · flag · name · metrics · fees · actions) need SIX columns — with five they
   wrapped and the actions landed under the gauge. */
.evi>summary.ecrow{grid-template-columns:auto auto minmax(0,1fr) auto auto auto}
.ec-ring{order:-2;width:74px;gap:1px}
.ec-ring svg{width:56px;height:56px}
.ec-ring .rtrack,.ec-ring .rfill{stroke-width:5}
.ec-ring b{font:800 12px/1 var(--font);color:var(--ink-1)}
.ec-rword{font-style:normal;font:700 9px/1.2 var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--t-ok);text-align:center}
.ec-ring.tone-check .ec-rword{color:var(--t-check)}
.ec-ring.tone-unknown .ec-rword{color:var(--t-unknown)}
.ec-flag{order:-1;width:38px;height:38px}
@media(max-width:1180px){
  /* the metric bars fold onto their own row under the name, keeping gauge · name · actions */
  .evi>summary.ecrow{grid-template-columns:auto auto minmax(0,1fr) auto auto}
}
@media(max-width:900px){
  .evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr) auto}
  .ec-flag{display:none}
}
@media(max-width:640px){
  .ec-ring{display:flex;width:56px}
  .ec-ring svg{width:42px;height:42px}
  .ec-fees{display:none}
  /* ring · name · actions could not share a 274px row: the grid computed the NAME column at 2px
     (56px ring + 144px actions took the rest) and every pill in it stacked one letter per line —
     measured on three cards at 390px, E2E scan 2026-09-04. Two columns on a phone: the ring beside
     the name, the actions on their own row underneath, the metric bars under that. */
  .evi>summary.ecrow{grid-template-columns:auto minmax(0,1fr)}
  .ec-mets{grid-column:1 / -1;grid-row:auto}
  .ec-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
}

/* ---- the dark shortlist bar that closes the matches list (handoff §6.2) ---- */
.slbar{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  padding:var(--s4) var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--ink-900) 0%,#0B2451 100%);color:var(--ink-inv);
}
.slbar-txt{flex:1;min-width:min(220px,100%);font-size:var(--t-xs);line-height:1.55;color:#B9CBE8}
.slbar-txt b{display:block;font-size:var(--t-sm);color:#fff}
.slbar-flags{display:flex;align-items:center;gap:-6px}
.slbar-flag{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(11,31,58,.6);margin-left:-8px}
.slbar-flag:first-child{margin-left:0}
.slbar-flag .flagsvg{border-radius:50%;width:18px;height:18px;object-fit:cover}
.slbar-more{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
  margin-left:-8px;border-radius:50%;background:#fff;color:var(--ink-1);
  font:800 11px/1 var(--font);box-shadow:0 0 0 2px rgba(11,31,58,.6)}
.slbar .btn{background:#fff;color:var(--brand-600);border-color:#fff}
.slbar .btn:hover{background:#E9F0FF;color:var(--brand-700);border-color:#E9F0FF}

/* ==========================================================================
   FILE AUDIT DRILL (handoff §6.9, images/app/11-file-audit-before-after.png)
   Requirements on the left, our audit of the real file on the right, a counted
   summary under them, one bottom bar, and the evidence trail.
   ========================================================================== */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 var(--s3);
  font-size:var(--t-xs);color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand-600)}
.crumbs b{color:var(--ink-1)}

.fahead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;margin-bottom:var(--s4)}
.fahead h1{margin:0}
.fahead-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.facorr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--ink-3)}

.fagrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.facol{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s5)}
.facol-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);
  align-items:center;margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.facol-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--brand);color:#fff;font:800 13px/1 var(--font)}
.facol-h h2{margin:0;font-size:var(--t-title)}
.facol-h p{margin:2px 0 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}

.farow{border-bottom:1px solid var(--hair)}
.farow:last-of-type{border-bottom:0}
.farow>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;
  align-items:center;padding:11px 2px;min-height:56px;cursor:pointer;list-style:none}
.farow>summary::-webkit-details-marker{display:none}
.farow>summary:hover{background:var(--paper-2)}
.fa-ico{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:50%;font:800 13px/1 var(--font)}
.fa-ico.t-ok{background:var(--t-ok-bg);color:var(--t-ok)}
.fa-ico.t-check{background:var(--t-check-bg);color:var(--t-check)}
.fa-ico.t-stop{background:var(--t-stop-bg);color:var(--t-stop)}
.fa-ico.t-unknown{background:var(--t-unknown-bg);color:var(--t-unknown)}
.fa-ico.t-noted,.fa-ico.t-locked{background:var(--paper-3);color:var(--ink-3)}
.fa-main{min-width:0}
.fa-main b{display:block;font-size:var(--t-sm);line-height:1.3;color:var(--ink-1)}
.fa-main i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-body{padding:0 2px 14px 37px}
.fa-marks{display:flex;gap:6px;flex-wrap:wrap}

.fasum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  margin:var(--s4) 0 var(--s3)}
.fasum-n{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:12px 16px;text-align:center}
.fasum-n b{display:block;font:800 1.5rem/1.1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink-1)}
.fasum-n b.t-ok{color:var(--t-ok)} .fasum-n b.t-check{color:var(--t-check)} .fasum-n b.t-stop{color:var(--t-stop)}
.fasum-n span{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:3px}

.fabar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-radius:var(--r-lg);margin-bottom:var(--s5);
  background:var(--brand-tint);border:1px solid rgba(23,93,235,.24)}
.fabar.isdone{background:var(--gold-tint);border-color:rgba(7,155,114,.28)}
.fabar-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:12px;background:var(--brand);color:#fff}
.fabar.isdone .fabar-ico{background:var(--gold)}
.fabar-ico svg{width:19px;height:19px}
.fabar-txt{flex:1;min-width:min(220px,100%);font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.fabar-txt b{display:block;font-size:var(--t-sm);color:var(--ink-1)}

.fatrail{background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s5);margin-top:var(--s4)}
.fatrail>b{display:block;font:700 10.5px/1 var(--font);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.fatrail dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);margin:0}
.fatrail dt{font:700 9.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fatrail dd{margin:3px 0 0;font-size:var(--t-sm);color:var(--ink-1)}

@media(max-width:900px){
  .fagrid{grid-template-columns:1fr}
  .fahead-side{align-items:flex-start}
}
.dt-doctxt{min-width:0}

/* ==========================================================================
   PRACTICE INTERVIEW STAGE (handoff §6.8, images/app/10-interview-mock-*.png)
   Two panels: the interview, and the preparation rail beside it.
   ========================================================================== */
.mockstage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.ms-main{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:var(--s6);text-align:center}
.ms-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;text-align:left}
.ms-live{display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--font);
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600)}
.ms-live i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.ms-q{flex:1;min-width:0;font-size:var(--t-sm);color:var(--ink-2)}
.ms-count{font:700 var(--t-xs)/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ms-bar{margin:10px 0 var(--s5)}
.ms-face{width:132px;height:132px;margin:0 auto var(--s3);border-radius:50%;
  box-shadow:0 0 0 8px var(--brand-tint)}
.ms-face svg{width:100%;height:100%}
.ms-who{display:inline-flex;align-items:center;padding:4px 14px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font:700 var(--t-xs)/1.6 var(--font);margin:0 0 var(--s3)}
.ms-cue{margin:0 auto var(--s5);max-width:46ch;font-size:var(--t-sm);color:var(--ink-2)}
.ms-qcard{border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s5);
  background:var(--paper-2);text-align:left;margin-bottom:var(--s4)}
.ms-qlbl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:700 9.5px/1.4 var(--font);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ms-qcard h2{margin:8px 0 0;font-size:var(--t-hero);line-height:1.3}
.ms-printed{margin:10px 0 0;font-size:var(--t-xs);line-height:1.55;color:var(--ink-3)}
.ms-form{text-align:left}
.ms-form textarea{width:100%}
.ms-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ms-mode{flex:1;min-width:min(220px,100%);display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);color:var(--ink-3)}
.ms-mode svg{width:16px;height:16px;flex:none;color:var(--t-ok)}
.ms-tip{margin:var(--s4) 0 0;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--brand-tint);color:var(--ink-2);font-size:var(--t-xs);text-align:left}

.ms-rail{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.msr-box{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.msr-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:10px}
.msr-h h3{margin:0;font:700 10px/1.3 var(--font);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.msr-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.msr-notes li{font-size:var(--t-xs);line-height:1.55;color:var(--ink-2);
  padding-left:12px;border-left:2px solid var(--ev-confirmed)}
.msr-notes b{display:block;font-size:11px;color:var(--ink-1);text-transform:capitalize}
.msr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.msr-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 10px;
  font-size:var(--t-xs);color:var(--ink-3);line-height:1.5}
.msr-steps li span{grid-row:1 / 3;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand-600);
  font:800 12px/1 var(--font)}
.msr-steps li b{font-size:var(--t-sm);color:var(--ink-1)}
.msr-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);text-align:center}
.msr-nums b{display:block;font:800 1.125rem/1.1 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums}
.msr-nums span{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.35;margin-top:3px}
.msr-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.msr-src li{display:flex;flex-direction:column;gap:2px;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}

@media(max-width:1000px){ .mockstage{grid-template-columns:1fr} }
@media(max-width:640px){
  .ms-main{padding:var(--s5) var(--s4)}
  .ms-face{width:96px;height:96px}
  .ms-qcard h2{font-size:var(--t-title)}
}

/* ---- apply kit: counted readiness strip per programme (handoff §6.4) ------ */
.kv3-ready{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:var(--s4) 0;padding:var(--s3);background:var(--paper-2);
  border:1px solid var(--hair);border-radius:var(--r-sm)}
.kv3-ready>div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:0 10px;align-items:center;padding:6px 10px}
.kr-ico{grid-row:1 / 3;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font:800 13px/1 var(--font)}
.kr-ico.t-ok{background:var(--t-ok-bg);color:var(--t-ok)}
.kr-ico.t-check{background:var(--t-check-bg);color:var(--t-check)}
.kr-ico.t-unknown{background:var(--t-unknown-bg);color:var(--t-unknown)}
.kr-ico.t-noted{background:var(--brand-tint);color:var(--brand-600);font-size:12px}
.kv3-ready b{font:800 1.125rem/1.1 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums}
.kv3-ready span:last-child{font-size:10.5px;line-height:1.35;color:var(--ink-3)}
@media print{ .kv3-ready{break-inside:avoid} }

/* ---- journey readiness header (handoff §6.3) ------------------------------ */
.jhead{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--s5);
  align-items:center;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s5)}
.jh-progress .k{display:block;font:700 10px/1.3 var(--font);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.jh-progress b{display:block;font:800 1.75rem/1.1 var(--font);color:var(--ink-1);
  font-variant-numeric:tabular-nums;margin:4px 0 10px}
.jh-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s4)}
.jh-nums>div{border-left:1px solid var(--hair);padding-left:var(--s4);min-width:0}
.jh-nums b{display:block;font:800 1.375rem/1.1 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums}
.jh-nums span{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;margin-top:3px}
@media(max-width:820px){
  .jhead{grid-template-columns:1fr;gap:var(--s4)}
  .jh-nums>div:first-child{border-left:0;padding-left:0}
}
/* The rail's "Edit"/"View all" links are 23px wide — under the 24px floor. Widen the hit box
   without moving the text (measured 2026-08-15). */
.msr-h a.small{padding-inline:6px;margin-inline:-6px}

/* ==========================================================================
   JOURNEY — the reference's five header cards, the zone band with its
   medallion rail, "why this matters" as a side panel, and the closing
   next-best-action bar (handoff §6.3, images/app/04-tests-before-after.png).
   ========================================================================== */
.jcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 var(--s5)}
.jcard{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:2px;min-width:0}
.jc-ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;background:var(--gold-tint);color:var(--t-ok);margin-bottom:8px}
.jc-ico.t-blue{background:var(--brand-tint);color:var(--brand-600)}
.jc-ico svg{width:16px;height:16px}
.jc-k{font:700 9.5px/1.3 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.jcard b{font:800 1.375rem/1.15 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums}
.jcard b.jc-sm{font-size:var(--t-sm);font-weight:700;line-height:1.35}
.jc-sub{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;margin-top:2px}
.jcard .evbar{margin-top:8px}

/* The zone band: a numbered medallion on the left, the content in the middle, and the
   "why this matters" note pinned to the right — the reference's three-part band.
   Absolute positioning, NOT a grid on the <details>: Chrome does not lay a details element's
   children out as direct grid items reliably (measured 2026-08-15 — `grid-column:2` computed
   correctly and still rendered in column one), so the note is placed against a relative panel. */
@media(min-width:1100px){
  .panel.zone{position:relative}
  .panel.zone[open]>.inner{padding-right:284px}
  .panel.zone[open]>.zwhy{
    position:absolute;right:var(--s5);width:250px;
    top:calc(var(--s5) + 62px);margin:0;
    padding:var(--s4);border:1px solid rgba(23,93,235,.22);border-radius:var(--r-lg);
    background:var(--brand-tint);border-bottom:1px solid rgba(23,93,235,.22);
  }
}
.panel.zone>summary .zn{box-shadow:0 0 0 5px var(--brand-tint)}
.panel.zone>.zwhy b{display:block;margin-bottom:4px}

.jnext{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:var(--s5) 0 0;
  padding:var(--s4) var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--ink-900) 0%,#0B2451 100%);color:var(--ink-inv)}
.jn-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border-radius:12px;background:rgba(80,227,179,.16);color:var(--gold-2)}
.jn-ico svg{width:19px;height:19px}
.jn-txt{flex:1;min-width:min(220px,100%);font-size:var(--t-xs);line-height:1.55;color:#B9CBE8}
.jn-txt b{display:block;font-size:var(--t-sm);color:#fff}
.jnext .btn{background:#fff;color:var(--brand-600);border-color:#fff}
.jnext .btn:hover{background:#E9F0FF;border-color:#E9F0FF;color:var(--brand-700)}
.jnext .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.jnext .btn.sec:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ---- the road's third rail (handoff §6.1) --------------------------------- */
@media(min-width:1280px){
  .dgrid{grid-template-columns:minmax(0,1fr) 300px 270px}
}
@media(min-width:1024px) and (max-width:1279px){
  .dgrid{grid-template-columns:minmax(0,1fr) 320px}
  .drail{grid-column:2}
}
.drail{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
@media(max-width:1023px){ .dgrid{grid-template-columns:1fr} }

/* The road's main column is ~574px wide once the third rail exists, so the programme rows must
   reflow on the CONTAINER's width, not the window's — measured 2026-08-15, the 4-column row
   overlapped its own text at 1560px viewport because the viewport query never fired.
   The viewport rule above stays as the fallback for engines without container queries. */
.dmain{container-type:inline-size;container-name:dmain}
@container dmain (max-width:760px){
  .prow-l{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3)}
  .prow-mets{grid-column:2 / -1;grid-row:2;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:8px}
  /* keep the chevron on the title row — auto-placement dropped it onto a third row of its own */
  .prow-go{grid-column:3;grid-row:1;align-self:center}
  .prow-met .vv{max-width:none}
  .prow-main b{white-space:normal;-webkit-line-clamp:2}
}
@container dmain (max-width:520px){
  .prow-l{grid-template-columns:auto minmax(0,1fr)}
  .prow-go{display:none}
}

/* ---- interview prep: how-this-works, gate legend, gate ring (handoff §6.7) ---- */
.prtop{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);
  align-items:start;margin:0 0 var(--s5)}
.howbox{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s4)}
.hb-h{display:flex;align-items:center;gap:8px;font:700 var(--t-sm)/1 var(--font);color:var(--ink-1);margin-bottom:8px}
.hb-h svg{width:17px;height:17px;color:var(--brand)}
.howbox p{margin:0;font-size:var(--t-xs);line-height:1.6;color:var(--ink-2)}
.gatehead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin:0 0 var(--s3)}
.gatehead h2{margin:0;font-size:var(--t-title)}
.gatelegend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--ink-3)}
.gl{width:9px;height:9px;border-radius:50%;flex:none;margin-left:8px}
.gl:first-child{margin-left:0}
.gl-ok{background:var(--t-ok)} .gl-mid{background:var(--brand)} .gl-new{background:var(--t-locked)}
.gc-head{align-items:flex-start}
.gc-name .badge{margin-top:6px}
.gc-ring{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;width:62px}
.gc-ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.gc-ring .rtrack{fill:none;stroke:var(--ev-track);stroke-width:4}
.gc-ring .rfill{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round}
.gc-ring.done .rfill{stroke:var(--ev-confirmed)}
.gc-ring b{font:800 12px/1 var(--font);color:var(--ink-1);font-variant-numeric:tabular-nums;margin-top:-34px}
.gc-ring i{font-style:normal;font:700 8.5px/1.2 var(--font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-top:20px}
@media(max-width:900px){ .prtop{grid-template-columns:1fr} }

/* ---- document verification table (handoff §6.2) -------------------------- */
.dtable{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.dt-head,.dt-row{display:grid;grid-template-columns:minmax(0,1.5fr) 132px minmax(0,1.6fr) auto;
  gap:var(--s4);align-items:center;padding:12px var(--s4)}
.dt-head{background:var(--paper-3);border-bottom:1px solid var(--hair)}
.dt-head span{font:700 9.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dt-row{border-bottom:1px solid var(--hair)}
.dt-row:last-child{border-bottom:0}
.dt-row:hover{background:var(--paper-2)}
.dt-doc{display:flex;align-items:center;gap:12px;min-width:0}
.dt-doctxt{display:flex;flex-direction:column;min-width:0}
.dt-doctxt b{font-size:var(--t-sm);color:var(--ink-1);line-height:1.3}
.dt-doctxt i{font-style:normal;font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.dt-when{font-style:normal;font-size:11px;color:var(--ink-3)}
.dt-facts{display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}
.dt-fact{display:flex;flex-direction:column;min-width:0}
.dt-fact i{font-style:normal;font:700 9px/1.3 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.dt-fact b{font-size:12.5px;color:var(--ink-1);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-fact.none{font-size:12.5px;color:var(--ink-3)}
.dt-flag{flex:1 0 100%;font-size:11.5px;line-height:1.4;color:var(--t-check)}
.dt-flag.tone-stop{color:var(--t-stop)}
.dt-act{display:flex;align-items:center;gap:6px;justify-self:end}
.dt-lbl{display:none}
/* the row carries a state edge, so the state is not colour alone */
.dt-row.tone-ok    {box-shadow:inset 3px 0 0 var(--t-ok)}
.dt-row.tone-check {box-shadow:inset 3px 0 0 var(--t-check)}
.dt-row.tone-unknown{box-shadow:inset 3px 0 0 var(--t-unknown)}
.dt-row.tone-noted {box-shadow:inset 3px 0 0 var(--t-noted)}

@media(max-width:900px){
  .dt-head{display:none}
  .dt-row{grid-template-columns:1fr;gap:10px;padding:14px var(--s4)}
  .dt-lbl{display:block;font:700 9px/1.3 var(--font);letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .dt-status{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
  .dt-status .dt-lbl{width:100%;margin:0}
  .dt-act{justify-self:stretch}
  .dt-act .btn{flex:1}
}

/* ---- "evidence connected" closing bar ------------------------------------ */
.evconn{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);
  background:var(--gold-tint);border:1px solid rgba(7,155,114,.26);border-radius:var(--r-lg);
  padding:14px var(--s4)}
.evconn-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:50%;background:var(--paper);color:var(--gold-ink)}
.evconn-ico svg{width:17px;height:17px}
.evconn-txt{flex:1;min-width:min(220px,100%);font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.evconn-txt b{display:block;color:var(--gold-ink)}

/* ==========================================================================
   APPLY KIT (handoff §6.4, images/app/05-apply-before-after.png)
   Programme context pinned at the top · checklist rows with readiness,
   evidence file and action · a right rail carrying the one next action, the
   deadlines and the source state. Export is disabled until something is in it.
   ========================================================================== */
.kv3-back{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-sm);color:var(--ink-2)}
.kv3-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin:0 0 6px}
.kv3-top h1{margin:0;font-size:var(--t-display)}
.kv3-sub{margin:4px 0 0;font-size:var(--t-sm);color:var(--ink-3)}
.kv3-meta{margin:0 0 var(--s5)}

.kv3-card{margin-bottom:var(--s6)}
/* ---- pinned programme context ---- */
.kctx{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1.15fr) minmax(0,1.3fr) auto;
  gap:var(--s4);align-items:center;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4)}
.kctx-tile{display:flex;align-items:center;justify-content:center;width:54px;height:54px;flex:none;
  border-radius:14px;background:var(--brand-tint);position:relative;z-index:1}
.kctx-tile .flagsvg{border-radius:3px}
.kctx-name{min-width:0;position:relative;z-index:1}
.kctx-name b{display:block;font-size:var(--t-sm);color:var(--ink-2)}
.kctx-name h2{margin:1px 0 2px;font-size:var(--t-title);line-height:1.25}
.kctx-name i{font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}
.kctx-meta{display:flex;gap:var(--s5);flex-wrap:wrap;position:relative;z-index:1}
.kctx-meta span{display:flex;flex-direction:column;min-width:0}
.kctx-meta i{font-style:normal;font:700 9px/1.4 var(--font);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.kctx-meta b{font-size:var(--t-sm);color:var(--ink-1)}
.kctx-change{position:relative;z-index:1;white-space:nowrap}

/* ---- the two-column body ---- */
.kv3-body{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:var(--s4);align-items:start}
.kv3-main{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s5)}
.kchk-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.kchk-h h3{margin:0;font-size:var(--t-title)}
.kchk-guide{margin-left:auto;font-size:var(--t-sm)}

/* ---- the checklist table ---- */
.ktable{border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s4)}
.kt-head,.kt-row{display:grid;grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1.2fr);
  gap:var(--s4);align-items:center;padding:12px var(--s4)}
.kt-head{background:var(--paper-3);border-bottom:1px solid var(--hair)}
.kt-head span{font:700 9.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kt-row{border-bottom:1px solid var(--hair)}
.kt-row:last-child{border-bottom:0}
.kt-row:hover{background:var(--paper-2)}
.kt-req{display:flex;align-items:flex-start;gap:11px;min-width:0}
.kt-reqtxt{min-width:0}
.kt-reqtxt b{display:block;font-size:var(--t-sm);color:var(--ink-1);line-height:1.35}
.kt-reqtxt i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);
  line-height:1.45;margin-top:2px}
.kt-lbl{display:none}
.kt-foot{display:flex;align-items:center;gap:8px;margin:var(--s4) 0 0;
  font-size:var(--t-xs);color:var(--ink-3)}
.kt-foot svg{width:14px;height:14px;flex:none}

/* ---- the right rail ---- */
.kv3-rail{display:flex;flex-direction:column;gap:var(--s3);position:sticky;top:var(--s4)}
.krail-card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s4)}
.krail-k{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font:700 10px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.krail-k svg{width:14px;height:14px;color:var(--brand)}
.krail-next{background:var(--brand-tint);border-color:rgba(23,93,235,.24)}
.krail-next b{display:block;font-size:var(--t-sm);color:var(--ink-1);line-height:1.35}
.krail-next p{margin:5px 0 12px;font-size:var(--t-xs);line-height:1.5;color:var(--ink-2)}
.krail-next .btn{width:100%}
.krail-note{margin:4px 0 8px;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.krail-src{font-size:var(--t-xs);line-height:1.5;border-left:3px solid var(--t-ok);
  padding-left:10px;color:var(--ink-2)}
.krail-src.tone-check{border-left-color:var(--t-check)}

@media(max-width:1100px){
  .kv3-body{grid-template-columns:1fr}
  .kv3-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .krail-card{flex:1 1 240px}
  .kctx{grid-template-columns:auto minmax(0,1fr);grid-auto-rows:auto}
  .kctx-meta,.kctx-change{grid-column:1 / -1}
}
@media(max-width:760px){
  .kt-head{display:none}
  .kt-row{grid-template-columns:1fr;gap:10px}
  .kt-lbl{display:block;font:700 9px/1.3 var(--font);letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .kctx-meta{gap:var(--s3) var(--s4)}
  .kctx-change{width:100%}
}

/* Apply-kit readiness: four across, so the count reads as one row (handoff §6.4). */
.kv3-main .kv3-ready{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.kv3-main .kv3-ready{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* long requirement notes are clamped in the list; the full text lives on the source page */
.kt-reqtxt i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- the navy shortlist bar that closes the programmes workspace --------- */
.slbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  background:linear-gradient(120deg,var(--ink-900) 0%,#0B2451 100%);
  border-radius:var(--r-lg);padding:16px var(--s5);color:var(--ink-inv)}
.slbar-txt{flex:1;min-width:min(220px,100%)}
.slbar-txt b{display:block;color:#fff;font-size:var(--t-sm)}
.slbar-txt span{display:block;font-size:var(--t-xs);line-height:1.5;color:#B9CBE8;margin-top:2px}
.slbar-txt span b{display:inline;color:#fff}
.slbar-flags{display:flex;align-items:center}
.slbar-flag{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#fff;margin-left:-8px;box-shadow:0 0 0 2px #0B2451}
.slbar-flag:first-child{margin-left:0}
.slbar-flag .flagsvg{width:18px;height:12px;border-radius:2px}
.slbar-more{margin-left:6px;font:700 11px/1 var(--font);color:#B9CBE8}
.slbar-cta{background:#fff;border-color:#fff;color:var(--ink-1)}
.slbar-cta:hover{background:var(--brand-tint);border-color:var(--brand-tint);color:var(--ink-1)}
@media(max-width:640px){.slbar-cta{width:100%}}

/* Both of these are new in the EVIDENCE pass and were measured at 40px and 32px by
   public/_audit.js — raised to the 44px floor the handoff sets for every control. */
.kv3-back{min-height:44px}
.kchk-guide{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   SOURCES LIBRARY — list + docked inspector (handoff §6.5, image 06)
   ========================================================================== */
.srcgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);align-items:start}
.srclist{min-width:0}

/* the column headers the reference puts above the list */
.srchead{display:grid;grid-template-columns:minmax(0,1fr) 150px 116px 190px;gap:var(--s4);
  padding:10px var(--s4);margin-bottom:6px;
  background:var(--paper-3);border:1px solid var(--hair);border-radius:var(--r-sm);
  font:700 9.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.srcrow>summary{display:grid;grid-template-columns:auto minmax(0,1fr) 150px 116px 190px;
  gap:var(--s3) var(--s4);align-items:center}
.srcrow-dom,.srcrow-when{font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.srcrow.picked{border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.srcrow.picked .srcrow-main b{color:var(--brand-700)}

/* the dock */
.srcdock{position:sticky;top:var(--s4);background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-lg);overflow:hidden}
.srcdock-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:11px var(--s4);border-bottom:1px solid var(--hair);background:var(--paper-3);
  font:700 9.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.srcdock-x{border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  min-width:32px;min-height:32px;border-radius:8px;font-size:13px}
.srcdock-x:hover{background:var(--paper-2);color:var(--ink-1)}
.srcdock-body{padding:var(--s4);max-height:calc(100vh - 160px);overflow:auto}
.srcdock-empty{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--ink-3)}
.srcdock .srcinspect{border:0;padding:0;margin:0;background:transparent}
.srci-title{margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.srci-title b{display:block;font-size:var(--t-sm);color:var(--ink-1);word-break:break-word}
.srci-title span{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.srci-facts{margin:var(--s3) 0}

.srcfoot{display:flex;align-items:flex-start;gap:11px;margin-top:var(--s5);
  background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:14px var(--s4);font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.srcfoot svg{width:18px;height:18px;flex:none;color:var(--gold-ink);margin-top:1px}

@media(max-width:1100px){
  /* the inspector becomes a drawer inside the row; the dock is removed entirely by the script */
  .srcgrid{grid-template-columns:1fr}
  .srchead{display:none}
  .srcrow>summary{grid-template-columns:auto minmax(0,1fr) auto}
  .srcrow-dom,.srcrow-when{display:none}
}

/* The source name was clipped to "northumbria…" once Domain and Last-checked took their columns.
   The name is the thing a student searches by, so it gets the room and wraps to two lines. */
.srchead{grid-template-columns:minmax(0,1fr) 124px 104px 168px}
.srcrow>summary{grid-template-columns:auto minmax(0,1fr) 124px 104px 168px}
.srclist .srcrow-main b{white-space:normal;overflow:visible;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;line-height:1.3}
.srclist .srcrow-page{color:var(--ink-3);font-weight:500}
@media(max-width:1100px){ .srcrow>summary{grid-template-columns:auto minmax(0,1fr) auto} }

/* ---- practice-interview header bar + closers (handoff §6.8, image 10) ------------------- */
.mockbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.mb-k{display:block;font:700 10px/1.3 var(--font);letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-600)}
.mockbar h1{margin:3px 0 0;font-size:var(--t-hero);line-height:1.2}
.mockbar h1 i{font-style:normal;font-weight:500;font-size:var(--t-sm);color:var(--ink-3)}
.mb-end{white-space:nowrap}
.mockabout{margin-top:var(--s5)}
.mockfoot{display:flex;align-items:flex-start;gap:11px;margin-top:var(--s4);
  background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:13px var(--s4);font-size:var(--t-xs);line-height:1.55;color:var(--ink-2)}
.mockfoot svg{width:17px;height:17px;flex:none;color:var(--ink-3);margin-top:1px}
@media(max-width:640px){ .mb-end{width:100%} }

/* The reference floats the two panels on a deep navy field, so the drill reads as focus mode and
   not as one more page of the app. The panels stay white; only the ground goes dark. */
.mockfield{background:linear-gradient(160deg,var(--ink-900) 0%,#0B2451 100%);
  border-radius:var(--r-xl);padding:var(--s5);margin-bottom:var(--s4)}
.mockfield .mockbar{border-bottom-color:rgba(255,255,255,.14)}
.mockfield .mockbar h1{color:#fff}
.mockfield .mb-k{color:var(--gold-2)}
.mockfield .mockbar h1 i{color:#B9CBE8}
.mockfield .mb-end{background:transparent;color:#DDE8F7;border-color:rgba(255,255,255,.28)}
.mockfield .mb-end:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.45)}
@media(max-width:640px){ .mockfield{padding:var(--s4) var(--s3);border-radius:var(--r-lg)} }

/* ---- My Road's closing trust bar (handoff image 01-my-road) ------------------------------ */
.trustbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:16px var(--s5);box-shadow:var(--sh-1)}
.tb-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border-radius:12px;background:var(--gold-tint);color:var(--gold-ink)}
.tb-ico svg{width:20px;height:20px}
/* min-width:280px is a FLOOR the smallest phones cannot pay: at 320px the content box is 273px,
   so this block sat 16px past the right edge and the road scrolled sideways (measured 2026-08-16 —
   invisible to the old harness because the element was NARROWER than the screen while still
   reaching past it). The floor only applies where there is room for it. */
.tb-txt{flex:1;min-width:min(280px,100%)}
.tb-txt>b{display:block;font-size:var(--t-sm);color:var(--ink-1)}
.tb-txt>span{display:block;font-size:var(--t-xs);line-height:1.55;color:var(--ink-3);margin-top:3px}
.tb-txt>span b{color:var(--ink-2)}
.tb-when{display:flex;flex-direction:column;flex:none;padding-left:var(--s4);
  border-left:1px solid var(--hair)}
.tb-when i{font-style:normal;font:700 9px/1.4 var(--font);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.tb-when b{font-size:var(--t-sm);color:var(--ink-1);font-variant-numeric:tabular-nums}
.tb-cta{white-space:nowrap}
@media(max-width:700px){
  .tb-when{padding-left:0;border-left:0}
  .tb-cta{width:100%}
}

/* ---- Zinc at the head of My Road's rail (handoff image 01-my-road) ----------------------- */
.zcard{background:linear-gradient(165deg,var(--brand-tint) 0%,var(--paper) 62%);
  border-color:rgba(23,93,235,.22)}
.zc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.zc-face{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 12%;
  background:var(--paper);box-shadow:0 0 0 2px var(--paper), 0 4px 14px rgba(11,31,58,.14)}
.zc-id b{display:flex;align-items:center;gap:6px;font-size:var(--t-body);color:var(--ink-1)}
.zc-id i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.zc-say{margin:0 0 12px;background:var(--paper);border:1px solid var(--hair);
  border-radius:14px 14px 14px 4px;padding:12px 14px;
  font-size:var(--t-sm);line-height:1.5;color:var(--ink-1)}
.zc-acts{display:flex;gap:8px;flex-wrap:wrap}
.zc-acts .btn{flex:1;min-width:min(118px,100%)}
.zc-note{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}

/* ==========================================================================
   MY ROAD — the three columns end together (zinc, 2026-08-16)
   With `align-items:start` each column hugged its own content, so the shortest
   one stopped ~250-700px above the tallest and left a dead white block in the
   middle of the page. The row now STRETCHES and the last card in each column
   grows to take up the slack, so all three finish on the same line — which is
   what the reference shows and what a reader expects from a row of panels.
   ========================================================================== */
@media(min-width:1024px){
  .dgrid{align-items:stretch}
  .dmain{display:flex;flex-direction:column;gap:var(--s4)}
  .dmain>.card{margin-bottom:0}
  .dmain>.card:last-child,
  .dside>.card:last-child,
  .drail>.card:last-child{flex:1 1 auto}
}

/* The provenance line and anything else dropped straight onto the navy drill field must be light:
   the muted ink token is 2.8:1 there and its link 2.2:1 — found by the mobile sweep, and it was
   just as unreadable on the desktop view. */
.mockfield>p,.mockfield>p.small,.mockfield .ms-note{color:#C7D9F5}
.mockfield>p a,.mockfield>p.small a{color:var(--gold-2)}
.mockfield>p.mut,.mockfield>p.small.mut{color:#B9CBE8}

/* ==========================================================================
   COSTS TABLE → LABELLED CARD ROWS ON A PHONE (handoff §7)
   "Tables become labelled card rows below 768px. Never rely on horizontal
   scrolling for the core task." Comparing what each programme costs IS the
   core task on this page, and five columns crushed into 390px — or pushed off
   the side behind a swipe — is not a comparison anybody can make on a bus.
   Each cell carries its own label from data-l, so the row reads as a card.
   ========================================================================== */
@media(max-width:768px){
  .costs-cards table,.costs-cards tbody,.costs-cards tr,.costs-cards td{display:block;width:auto}
  .costs-cards table{border-collapse:separate}
  /* the header row is the labels themselves now */
  .costs-cards tr:first-child{display:none}
  .costs-cards tr{
    border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);
    padding:12px var(--s4);margin-bottom:10px;
  }
  .costs-cards td{border:0;padding:7px 0;border-top:1px solid var(--hair)}
  .costs-cards td:first-child{border-top:0;padding-top:0}
  .costs-cards td[data-l]::before{
    content:attr(data-l);display:block;
    font:700 9px/1.4 var(--font);letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:3px;
  }
  /* the wrapper no longer needs to scroll — nothing is wider than the screen */
  .costs-cards{overflow-x:visible}
}

/* A programme chip carrying a whole sentence ("Public Madrid per-credit rates — exact amount NOT
   verified") is 318px wide and pushed My Road 10px off the side of a 390px phone. Chips wrap their
   own text rather than the page: found by the mobile sweep at 390px. */
.prow-chip{white-space:normal;max-width:100%;text-align:left;line-height:1.35}
.prow-chips{min-width:0}
.prow-main{min-width:0}

/* ==========================================================================
   DOCUMENT TABLE: the ⋮ menu must never be cut off (mobile sweep, 390px)
   `.dtable{overflow:hidden}` existed to clip the rounded corners. On the LAST
   document row it also clipped the kebab menu — measured 31px of it gone, and
   the item it swallowed was "Delete file". The corners are now rounded on the
   rows themselves, so nothing has to be clipped at all.
   ========================================================================== */
.dtable{overflow:visible}
.dt-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
.dt-row:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
@media(max-width:900px){
  /* the header is hidden on a phone, so the first ROW carries the top corners */
  .dt-row:first-of-type{border-radius:var(--r-lg) var(--r-lg) 0 0}
}
/* and the last rows open their menu upwards, so it never runs off the card either */
.dt-row:nth-last-child(-n+2) .kebab-menu{top:auto;bottom:calc(100% + 4px)}

/* ---- 320px sweep (iPhone SE and the cheap Androids this app is built for) ---------------- */
/* A grid child defaults to min-width:auto, so one long unbreakable string (a URL, a document
   filename) props the whole column open and pushes the page sideways. */
.fagrid>*{min-width:0}
.facol{min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){
  .facol{padding:var(--s4)}
}

/* ==========================================================================
   THE TOUCH FLOOR — measured, not assumed (mobile sweep, 2026-08-16)
   Forcing the app's own `@media (pointer:coarse)` rules into a 390px frame
   and measuring every control found 393 targets under 44px. The existing
   coarse block covered seven selectors; these are the rest of them.

   Padding on an INLINE link grows its hit box without changing the line box,
   so the negative margin keeps the text exactly where it was — the target
   gets bigger, the paragraph does not move.
   ========================================================================== */
@media(pointer:coarse){
  /* A FLOOR, so it is written to win. These carry !important on purpose: measuring the app with
     the coarse rules forced on showed the earlier version losing to more specific selectors
     elsewhere in the sheet (a .src inside an evidence card was still 25px tall). A minimum touch
     size is not a suggestion another rule gets to override.

     Padding on an INLINE link grows its hit box without changing the line box, and the negative
     margin puts the text back exactly where it was — the target gets bigger, the paragraph does
     not move. */
  /* .applybox p a is the secondary door ("Or read the full admissions page first") — measured at
     29px in a 360px frame the day it was added (2026-08-16), so it joins the floor rather than
     being the one link on the page a thumb cannot hit. */
  /* `<p class="small"><a>← Back to your programmes</a></p>` is navigation wearing prose clothes —
     29px tall on the proof page at 390px (measured 2026-08-16). The class is on the paragraph, so
     `a.small` never caught it. */
  .src,a.small,.slink,.kchk-guide,.msr-h a,.psum-h a,.srcdock-x,.viewall,.applybox p a,p.small>a:only-child{
    padding-block:15px !important;margin-block:-15px !important;
    padding-inline:11px !important;margin-inline:-11px !important;
  }
  summary{min-height:44px !important}
  .kebab>summary{min-width:44px;display:flex;align-items:center;justify-content:center}
  /* the country tick boxes were 22x22 — half a thumb */
  .tickbox{width:26px !important;height:26px !important}
  .checkbar label{min-height:44px;padding-block:6px}
  .guide-close,.guide-chat-close{min-width:44px !important;min-height:44px !important}
  .btn.small,.k-btn.small{min-height:44px !important}
  .readnow{min-height:44px !important}
  /* A logged-out visitor's header holds two SHORT links — "Log in" measured 34px wide on /pricing
     at 320px and 390px (2026-08-16). The floor is a square, not a bar: a 44px-tall target 34px
     wide is still a miss with a thumb. */
  header nav a{min-width:44px;justify-content:center}
  .dt-row .btn,.kt-row .btn,.srcrow>summary{min-height:44px}
  /* breadcrumbs and the corridor switcher are real navigation, not prose */
  .crumbs a,.facorr a,.facorr .k-pill{
    display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;margin-inline:-10px;
  }
}

/* The recognition tracker is a two-column table. At 320px the status <select> was squeezed to 29px
   wide — unusable with a thumb, and you cannot read which status you are on. Below 560px the row
   becomes a labelled card and the select takes the full width (handoff §7). */
@media(max-width:560px){
  .rectable,.rectable tbody,.rectable tr,.rectable td{display:block;width:auto}
  .rectable tr{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);
    padding:12px var(--s4);margin-bottom:10px}
  .rectable td{border:0;padding:8px 0;width:auto !important}
  .rectable td[data-l]::before{content:attr(data-l);display:block;
    font:700 9px/1.4 var(--font);letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:4px}
  .rectable .rec-status select{width:100%;min-height:44px}
}

/* ==========================================================================
   YOUR PROFILE (2026-08-16) — zinc: "my profile is not clickable … inside my
   profile should have the option and details … also add delete profile option."

   The page's whole job is provenance: a value, and the document it came from.
   So the row is a three-column grid — LABEL · VALUE · WHERE IT CAME FROM —
   and the third column is the one that makes it different from a competitor's
   typed form. It stacks to one column on a phone, where a three-across grid
   would squeeze the source line to two words a line.
   ========================================================================== */
.pf-face{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;font:800 var(--t-title)/1 var(--font);
}
.pf-back{margin:calc(var(--s3) * -1) 0 var(--s5)}

.pflist{list-style:none;margin:0;padding:0}
.pfrow{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,1fr);
  gap:4px var(--s4);align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.pfrow:last-child{border-bottom:0}
.pflist.tight .pfrow{padding:9px 0}
.pf-k{font:700 var(--t-sm)/1.35 var(--font);color:var(--ink-2)}
.pf-v{font-size:var(--t-sm);color:var(--ink-1);font-weight:600;overflow-wrap:anywhere}
.pf-v i,.pf-src i{font-style:normal;color:var(--ink-3);font-weight:500}
.pf-src{font-size:var(--t-xs);color:var(--ink-3);overflow-wrap:anywhere}
.pf-src a{font-weight:700}
/* An empty field is a STATE, not a blank — dashed, like every other "we could not verify". */
.pfrow.none .pf-v{border-left:2px dashed var(--t-unknown);padding-left:8px}
.pfrow.clash{background:var(--t-check-bg);border-radius:var(--r-sm);padding-inline:10px;margin-inline:-10px}
.pf-clash{grid-column:1 / -1;font-size:var(--t-xs);color:var(--t-check);font-weight:700;margin-top:2px}
.pf-rev{margin-top:4px}
.pf-rev>summary{
  display:inline-flex;align-items:center;min-height:24px;cursor:pointer;
  font:600 var(--t-xs)/1.3 var(--font);color:var(--brand-700);
}
.pf-rev[open]>summary{margin-bottom:4px}
.pf-long{display:block;font-size:var(--t-xs);color:var(--ink-2);font-weight:500;white-space:pre-wrap;line-height:1.5}
@media(max-width:760px){
  .pfrow{grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 0}
  .pf-k{font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
}

/* ---- the danger zone: visibly its own thing, never one more card ---------- */
.pf-danger{border-color:rgba(190,47,47,.35)}
.pf-danger>h2{color:var(--t-stop)}
.pf-del{border:1px solid var(--hair);border-radius:var(--r-md);margin-top:var(--s3);background:var(--paper-2)}
.pf-del>summary{
  display:flex;align-items:center;min-height:44px;padding:10px var(--s4);cursor:pointer;
  font:700 var(--t-sm)/1.35 var(--font);color:var(--t-stop);
}
.pf-del[open]>summary{border-bottom:1px solid var(--hair)}
.pf-delbody{padding:var(--s4)}
.pf-delform{max-width:360px}
.pf-delform label{margin-top:var(--s3)}
.btn.danger{background:var(--t-stop);border-color:var(--t-stop);color:#fff}
.btn.danger:hover{background:#9E2020;border-color:#9E2020;color:#fff}

/* Measured on the profile page at 320/360/390/430px with the app's own coarse-pointer rules forced
   on (public/_mobile.js): the "Open" links in the source column came out 30×26 and "See plans"
   53×26. They are standalone controls at the end of a row, not words inside a sentence, so the
   WCAG 2.5.8 inline exception does not cover them — they get the same 44px floor as every other
   target. The negative inline margin keeps the row's visual rhythm while the touch box grows. */
@media(pointer:coarse){
  .pf-src a,.pf-rev>summary{
    display:inline-flex;align-items:center;min-height:44px;
    padding-inline:10px;margin-inline:-10px;
  }
}

/* Document read progress — a real ring, not a spinner (zinc 2026-08-16).
   The percentage comes from server.js's docProgress: a queue position we actually assigned and a
   read stage that actually completed. `.live` pulses only for the ONE document being read, so a
   queued file never animates as though something is happening to it. */
.dtring{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none}
.dtring svg{position:absolute;inset:0;width:38px;height:38px}
.dtring b{font:700 10px/1 var(--font);color:var(--brand-700);font-variant-numeric:tabular-nums}
.dtring.live circle:last-child{animation:dtpulse 1.6s ease-in-out infinite}
@keyframes dtpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.dtring.live circle:last-child{animation:none}}

/* Evidence grade on a programme row (zinc 2026-08-16 — keep all 25 countries, but never let a
   register listing wear the authority of a fully-checked programme). Icon AND word, never colour
   alone (LOCKED RULE 9); the dashed ring is the same "we could not verify" signature used
   everywhere else, so it survives a greyscale printout. */
.gradedot{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:3px 8px;border-radius:var(--r-pill);
  font:700 10px/1.4 var(--font);letter-spacing:.02em;white-space:nowrap;
}
.gradedot i{font-style:normal}
.gradedot.g2{background:var(--t-ok-bg);color:var(--t-ok);border:1px solid var(--t-ok)}
.gradedot.g1{background:var(--t-check-bg);color:var(--t-check);border:1px solid var(--t-check)}
.gradedot.g0{background:var(--t-unknown-bg);color:var(--t-unknown);border:1px dashed var(--t-unknown)}
@media(max-width:640px){ .gradedot i{display:none} .gradedot{padding:3px 6px} }

/* "Read its page now" — the control that turns "no data" into data by actually fetching the
   university's page (zinc 2026-08-16). Deliberately quiet: it is an offer on rows we have not
   read, not a call to action competing with View details. */
.k-pill.readnow{
  border:1px dashed var(--brand);background:var(--brand-tint);color:var(--brand-700);
  cursor:pointer;font-weight:700;
}
.k-pill.readnow:hover{background:var(--brand-tint-2)}
@media(pointer:coarse){ .k-pill.readnow{min-height:36px;display:inline-flex;align-items:center} }

/* The one summary row above the list (zinc 2026-08-16: no wall of explanation). Two folds and a
   button sit inline; the folds open below the row, not inside it. */
.metarow .pf-rev>summary,.metarow .advicefold>summary{min-height:24px;font:600 var(--t-xs)/1.3 var(--font);color:var(--brand-700);cursor:pointer;padding:0}
.metarow details{flex:0 1 auto;margin:0}
.metarow details[open]{flex-basis:100%}
.metarow .advicefold{border:0;background:none;padding:0}

/* The working-out, behind one arrow (zinc 2026-08-16). Shut by default: the receipt, the ordering
   line, the read-depth and WINDOW folds, the caveats and the repeated-flag line all live inside.
   The summary carries the two numbers worth seeing without opening it. */
.workfold{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--paper);margin:0 0 var(--s4)}
.workfold>summary{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  min-height:44px;padding:9px var(--s4);cursor:pointer;list-style:none;
}
.workfold>summary::-webkit-details-marker{display:none}
.workfold>summary::before{
  content:"";flex:none;width:8px;height:8px;margin-right:2px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s ease;
}
.workfold[open]>summary::before{transform:rotate(45deg)}
.workfold>summary:hover{background:var(--paper-2)}
.wf-title{font:700 var(--t-sm)/1.3 var(--font);color:var(--ink-1)}
.wf-facts{font-size:var(--t-xs);color:var(--ink-3)}
.wf-body{padding:0 var(--s4) var(--s4);border-top:1px solid var(--hair)}
.wf-body .receipt{margin-top:var(--s4)}
@media(max-width:640px){ .wf-facts{flex-basis:100%} }