/* ============================================================================
   IELTS Mock Test — the student's side of the site.
   Carries the estate's "Atlas" art direction (the same tokens as
   bayrenedu.com) so the mock site reads as one company with the rest of
   BayRen: navy and gold, a serif display face, a warm humanist sans.

   It is deliberately NOT the exam chrome. static/css/exam.css replicates the
   official IELTS computer-based test and must stay that way — practice only
   feels like the real thing if it LOOKS like the real thing. Nothing in this
   file may leak into the exam room.
   ============================================================================ */

/* ── The hidden attribute always wins ──────────────────────────────────────
 * A rule that sets `display:` silently BEATS `hidden`, so an element the code
 * has hidden stays on screen. It is not theoretical: it once froze the Speaking
 * test (a button hidden during "Get ready" was still clickable — see the inline
 * guard at the top of templates/exam/speaking.html), and it left "Audio is
 * Playing" on screen through the sound check, which says nothing is running.
 * Guarding one class at a time only works until the next one, so guard the
 * attribute itself. */
[hidden] { display: none !important; }

:root {
  /* ══ THE DESIGN SYSTEM, 4 September 2026 ═══════════════════════════════════
     Asaf: capsules and tablets, a white page, soft colour, and no more leading
     with gold and navy. See BayRen Platform/docs/design-system.md.

     Every name below is the one the templates already use — nothing is renamed.
     Only the VALUES move, onto the tokens in tokens.css, so all 47 student and
     admin pages take the new palette at once instead of one rewrite at a time.
     That is the same trick this block was already doing for the old palette.

     GOLD IS RETIRED from the interface. It survives in the logo artwork only.
     Anything that was gold now takes AMBER, which is the new palette's yellow —
     the closest honest home for it. NAVY survives as the ink, which is what
     still ties a page to the logo. ───────────────────────────────────────── */
  --navy: var(--d-ink);      --navy-700: #1d3854;
  --navy-800: #0f1f30;       --navy-900: #0a1622;
  --gold: var(--amber-solid);      --gold-600: var(--amber-solid);
  --gold-300: var(--amber-edge);   --gold-50: var(--amber-tint);
  --gold-ink: var(--amber-solid);

  /* Supporting washes — backgrounds only, never text */
  --sky-600: var(--blue-solid);  --sky-050: var(--blue-tint);  --sky-100: var(--blue-edge);
  --teal-600: var(--teal-solid); --teal-050: var(--teal-tint);

  /* ── Neutrals ────────────────────────────────────────────────────────────── */
  --ink: var(--d-ink);      --body: var(--d-muted);   --muted: var(--d-muted);
  --line: var(--d-line);    --bg: var(--d-ground);    --bg-soft: var(--d-sunken);
  --ink-050: var(--d-sunken);
  --white: #fff;   --wa: #25d366;

  /* ── Meaning: the four signals, never re-toned for decoration ────────────── */
  --ok: var(--correct);      --ok-soft: var(--correct-bg);
  --warn: var(--warn);       --warn-soft: var(--warn-bg);
  --danger: var(--wrong);

  /* ── Accent: a warm red, used sparingly for emphasis ──────────────────────
     Deliberately NOT --danger. Red that also means "error" cannot be used for
     decoration without teaching students to dread it, so the two are separate
     colours with separate jobs: --danger warns, --accent-red points. The new
     palette's ROSE is exactly that distinction, so it takes the job. */
  --accent-red: var(--rose-solid);  --accent-red-soft: var(--rose-tint);
  --accent-red-line: var(--rose-edge);

  /* ── Type: serif headlines, humanist sans body, heavy numerals ───────────── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-num: 'Archivo Black', 'Figtree', system-ui, sans-serif;

  /* The design system ships with Inter; this site has always set Figtree. Point
     the system's own font tokens at THIS site's faces so a br- component reads
     as part of the page rather than a visitor from another app. Type was not
     part of what Asaf asked to change. */
  --d-font-display: var(--font-display);
  --d-font-body: var(--font-sans);

  /* ── Shape, depth, rhythm ────────────────────────────────────────────────── */
  --radius: 16px;  --radius-sm: 10px;  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(11,42,73,.06);
  --shadow:    0 14px 38px rgba(11,42,73,.12);
  --shadow-lg: 0 26px 60px rgba(11,42,73,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1120px;
  --sec-pad: clamp(40px, 5vw, 64px);

  /* ── Names the existing templates already use ────────────────────────────────
     Kept pointing at the new tokens so every page that was written against the
     old palette — and the four that were written against the WRITING portal's
     stylesheet and therefore rendered half-unstyled here — come right at once
     rather than one rewrite at a time. */
  --accent: var(--navy);        --accent-dark: var(--navy-800);
  --accent-soft: var(--sky-050);
  --ink-soft: var(--body);      --line-soft: var(--ink-050);
  --surface: var(--white);      --bg-alt: var(--bg-soft);
  --maxw: var(--container);     --font: var(--font-sans);
  --font-heading: var(--font-display);
  --text-muted: var(--muted);   --red: var(--danger);

  /* Text ON the navy panels. Named, so the next person to lighten the navy
     changes these in the same place instead of hunting hex through the file. */
  --on-navy: #f2f7fc;  --on-navy-soft: #d7e5f3;  --on-navy-note: #c2d6ea;

  /* ── Names the RESULTS pages need ────────────────────────────────────────
     The student's results page and the writing feedback report were written
     against the writing portal's stylesheet, which this site does not load.
     Their rules are ported in at the end of this file; these are the tokens
     those rules ask for, pointed at the Atlas palette. */
  --text: var(--ink);          --text-main: var(--ink);
  --border: var(--line);       --accent-light: var(--sky-050);
  --gold-dark: var(--gold-600);

  /* Inline error highlights in a marked essay — one colour per kind of mistake.
     Values kept identical to the writing portal so a student who uses both
     sites learns one code, not two. */
  --err-grammar-bg: #fde8e8;  --err-grammar-line: #d45555;
  --err-spell-bg:   #fff6d6;  --err-spell-line:   #c8960a;
  --err-vocab-bg:   #ddeeff;  --err-vocab-line:   #3d82c4;
  --err-other-bg:   #ecdeff;  --err-other-line:   #7a44c4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Every size on the student's side is set in rem, so ONE root change lifts the
 * whole page together — headings, labels, small print, the lot. A percentage
 * rather than a px value, so a student who has set a larger font in their
 * browser still gets it (a px root would silently override them). */
html { font-size: 106.25%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; color: var(--ink); font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .8rem 1.4rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all .15s ease; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--accent); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); }
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-lg { padding: 1rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── Header / nav ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: .65rem; flex: none; }
.brand img { height: 34px; width: auto; }
.brand-text { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.brand-text span { color: var(--accent); }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a.nav-link {
  color: var(--ink-soft); font-weight: 500; font-size: .92rem; padding: .5rem .8rem;
  border-radius: var(--radius-sm);
}
.nav a.nav-link:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav .nav-user { color: var(--muted); font-size: .9rem; padding-left: .5rem; }

/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash-wrap { max-width: var(--maxw); margin: 1rem auto 0; padding: 0 1.5rem; }
.flash {
  padding: .8rem 1.1rem; border-radius: var(--radius-sm); font-size: .92rem; margin-bottom: .6rem;
  border: 1px solid var(--line);
}
.flash-success { background: var(--ok-soft); border-color: #bfe3cd; color: #14532d; }
.flash-error,
.flash-danger  { background: #fdecec; border-color: #f4c6c3; color: #7f1d1d; }
.flash-info    { background: var(--accent-soft); border-color: #cfe1f1; color: var(--accent-dark); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.hero .container { padding-top: 4.5rem; padding-bottom: 4.5rem; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  padding: .4rem .8rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; max-width: 18ch; margin: 0 auto 1.1rem; }
.hero .lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-soft); max-width: 60ch; margin: 0 auto 2rem; }
.hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 1.3rem; font-size: .88rem; color: var(--muted); }

/* skill row */
.skills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.8rem 0 0; }
.skill {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  padding: .5rem .95rem; border-radius: 999px;
}

/* ── Generic section ──────────────────────────────────────────────────────── */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto 2.8rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
.section-head p { margin-top: .8rem; color: var(--ink-soft); font-size: 1.05rem; }

/* feature grid */
.grid { display: grid; gap: 1.2rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d4dde6; }
.icon-tile {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; margin-bottom: 1rem;
}
.card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.card p { color: var(--ink-soft); font-size: .95rem; }

/* checklist */
.checklist { list-style: none; display: grid; gap: .9rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); }
.checklist .tick {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-top: 2px;
}
.checklist b { color: var(--ink); font-weight: 600; }

/* ── App shell (dashboard / account pages) ────────────────────────────────── */
.app-main { background: var(--bg-alt); min-height: calc(100vh - 68px); padding: 2.2rem 0 4rem; }
.page-title { font-size: 1.6rem; font-weight: 800; margin-bottom: .3rem; }
.page-sub { color: var(--muted); margin-bottom: 1.8rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 1.2rem; }
.panel-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }

.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat .num { font-size: 1.9rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat .label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* data table */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--line-soft); }
.table th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table tr:last-child td { border-bottom: 0; }

/* badges / band pill */
.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge-ok { background: var(--ok-soft); color: #14532d; }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-muted { background: var(--bg-alt); color: var(--muted); }
.band-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem;
  padding: .3rem .55rem; border-radius: 8px; font-weight: 800; background: var(--accent); color: #fff;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: #0f1c2a; color: #9fb1c2; padding: 2.4rem 0; }
.site-footer .container { text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.site-footer strong { color: #fff; font-weight: 700; }
.site-footer a { color: #cfe1f1; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .35rem; }
.form-label .req, .req { color: var(--danger); }
.form-input, .form-select, textarea.form-input, textarea.form-textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus, .form-select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-hint { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--ink-soft); margin: .6rem 0; cursor: pointer; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 140px; }

/* ── Auth card (sign in / register) ───────────────────────────────────────── */
.auth-wrap { min-height: calc(100vh - 68px); display: grid; place-items: center; background: var(--bg-alt); padding: 2.5rem 1rem; }
.auth-card { width: 100%; max-width: 430px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem; }
.auth-card.wide { max-width: 560px; }
.auth-head { text-align: center; margin-bottom: 1.4rem; }
.auth-head img { height: 40px; margin: 0 auto .9rem; }
.auth-head h1 { font-size: 1.35rem; }
.auth-head p { color: var(--muted); font-size: .92rem; margin-top: .3rem; }
.auth-alt { text-align: center; margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .nav a.nav-link { padding: .5rem .55rem; font-size: .86rem; }
  .brand-text { display: none; }
  .hero .container { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ── WhatsApp: floating "chat with us" button + inline approval button ─────── */
:root { --wa: #25d366; --wa-dark: #1da851; }

.fab-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa); color: #fff;
  box-shadow: 0 6px 18px rgba(37,211,102,.45);
  transition: transform .15s ease, background .15s ease;
}
.fab-wa:hover { background: var(--wa-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.fab-wa svg { display: block; }
@media (max-width: 600px) { .fab-wa { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

.btn-whatsapp {
  background: var(--wa); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
}
.btn-whatsapp:hover { background: var(--wa-dark); color: #fff; }
.btn-whatsapp svg { flex: 0 0 auto; }

/* ── Awaiting-approval page ────────────────────────────────────────────────── */
.pending-lead { color: var(--ink-soft); line-height: 1.6; margin: 0 0 1.2rem; }
.pending-details {
  list-style: none; margin: 0 0 1.3rem; padding: .4rem .2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pending-details li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .2rem; }
.pending-details span { color: var(--muted); font-size: .9rem; }
.pending-details strong { color: var(--ink); font-weight: 600; word-break: break-word; text-align: right; }
.pending-hint { color: var(--muted); font-size: .85rem; text-align: center; margin: .6rem 0 0; }

/* ════════════════════════════════════════════════════════════════════════════
   Atlas type + the pieces the student's home page is built from (2026-08-27)
   ════════════════════════════════════════════════════════════════════════════ */

body { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.62; color: var(--body); }
h1, h2, h3, .page-title, .panel-title { color: var(--ink); }
h1, .page-title { font-family: var(--font-display); font-weight: 700; line-height: 1.06;
  font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: .002em; }
h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem); }
/* the one italic gold word that carries the moment */
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--gold-ink); }
h3, .panel-title { font-family: var(--font-sans); font-weight: 700; color: var(--navy);
  letter-spacing: -.01em; font-size: 1.08rem; }
.panel-title { position: relative; padding-bottom: 10px; }
.panel-title::after { content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--accent-red); }
.eyebrow { font-weight: 700; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Buttons: the estate's pill */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary { background: linear-gradient(180deg, #e2bf63, var(--gold)); color: var(--navy);
  border-color: transparent; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-600); }

/* ── The next action: the ONE thing to do, said once ──────────────────────── */
/* These text colours used to be hard-coded hex, and the smallest of them
 * (#9fb6cd at .86rem) was where "your last one is still being marked" lived —
 * the least readable text on the page carrying news the student most needed.
 * All three are lighter now, the note is bigger, and a red-to-gold hairline
 * across the top gives the panel some warmth. */
.next-action { position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-800) 60%, #1d5488 100%);
  color: var(--on-navy); border-radius: var(--radius-lg); padding: 30px 32px;
  box-shadow: var(--shadow); margin-bottom: 22px; }
.next-action::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--accent-red) 0%, var(--gold) 62%, var(--gold-300) 100%); }
.next-action h2 { color: #fff; margin-bottom: 6px; }
.next-action p { color: var(--on-navy-soft); max-width: 62ch; }
.next-action .btn { margin-top: 18px; }
.next-action .na-note { font-size: .95rem; color: var(--on-navy-note); margin-top: 12px; }
.next-action .na-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── The estimate: one honest number, with its working shown ──────────────── */
.estimate { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; align-items: stretch; }
.est-main { background: var(--sky-050); border: 1px solid var(--sky-100);
  border-radius: var(--radius); padding: 22px 24px; }
.est-side { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; display: flex;
  flex-direction: column; justify-content: center; }
.band-num { font-family: var(--font-num); font-size: 3.1rem; line-height: 1; color: var(--navy); }
.est-side .band-num { font-size: 2.1rem; }
.est-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.est-basis { font-size: .92rem; color: var(--body); margin-top: 10px; }
.est-cover { font-size: .88rem; color: var(--warn); margin-top: 6px; }

/* ── Sittings: "Mock Test 1, 2, 3" and what each scored ───────────────────── */
.mile { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.mile-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px;
  padding: 0 9px; border-radius: 999px; background: var(--gold-50);
  color: var(--gold-ink); font-family: var(--font-num); font-size: .92rem; }
.skill-cell { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.state-badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.state-pending { background: var(--accent-red-soft); color: var(--accent-red);
  box-shadow: inset 0 0 0 1px var(--accent-red-line); }
.state-none { background: var(--ink-050); color: var(--muted); }
.band-pill { display: inline-grid; place-items: center; min-width: 46px; padding: 4px 10px;
  border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* ── Sittings that ended early, and the appeal ────────────────────────────── */
.voided { margin-top: 18px; }
.voided summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.void-row { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-top: 10px; background: var(--ink-050); }
.void-why { color: var(--body); font-size: .92rem; margin: 4px 0 10px; }
.appeal-form textarea { width: 100%; min-height: 62px; margin-bottom: 8px; }

@media (max-width: 820px) {
  .estimate { grid-template-columns: 1fr; }
  .next-action { padding: 24px 22px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   THE RESULTS PAGES  (ported 2026-08-27)

   The student's results page and the Writing feedback report were written
   against the WRITING PORTAL's stylesheet — but this site loads only mock.css
   (mock_templates/base.html), so on mock.bayrenedu.com they rendered with no
   card styling at all: the four band scores as bare stacked divs, the whole
   marked-essay report unstyled, every small button full size, and — because
   .print-only was never defined here — the print letterhead and meta table
   showing ON SCREEN.

   An earlier pass aliased the VARIABLES these rules ask for and stopped there.
   These are the rules themselves, copied verbatim so the two sites stay
   identical; they resolve against the Atlas tokens aliased at the top of this
   file, so they arrive in BayRen navy and gold rather than the portal's colours.
   ════════════════════════════════════════════════════════════════════════════ */

/* Any wide table can scroll inside itself. Used by the sittings list, which had
   eight columns and no scroll box — on a phone the last ones were unreachable.
   This class was referenced in the markup but defined in NO stylesheet. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > .table { min-width: 34rem; }

.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.825rem; }
.prompt-box-image {
  margin-top: 1.25rem;
  text-align: center;
}
.prompt-box-image img {
  max-width: 100%;
  max-height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: contain;
  background: #fff;
}
/* ─── Results page ───────────────────────────────────────────────────────── */
.results-layout { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.results-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.band-number {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.band-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.results-meta { flex: 1; }
.results-meta h1 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.results-meta p  { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.feedback-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.feedback-card h2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.feedback-card p  { font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; }
.corrected-version-card { border-color: #3d9e5a; background: #f4fbf6; }
.corrected-version-card h2 { color: #2a7a44; }
.corrected-version-text { font-size: 0.95rem; line-height: 1.85; white-space: pre-wrap; color: var(--text-main); }
.essay-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; margin-bottom: 1.5rem; }
.essay-card h2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.dot-grammar    { background: var(--err-grammar-bg); border: 1.5px solid var(--err-grammar-line); }
.dot-spelling   { background: var(--err-spell-bg);   border: 1.5px solid var(--err-spell-line); }
.dot-vocabulary { background: var(--err-vocab-bg);   border: 1.5px solid var(--err-vocab-line); }
.dot-other      { background: var(--err-other-bg);   border: 1.5px solid var(--err-other-line); }
.annotations-section h2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.annotation-card-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: box-shadow 0.2s;
}
.annotation-card-result.active { box-shadow: 0 0 0 2px var(--accent); }
.ann-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.ann-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ann-error-text {
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
}
.ann-error-text s { color: #c62828; }
.ann-correction   { font-size: 0.875rem; color: #2e7d32; font-weight: 600; margin-bottom: 0.4rem; }
.ann-explanation  { font-size: 0.875rem; color: var(--text-muted); line-height: 1.55; }
/* ─── Four criteria display (results page) ───────────────────────────────── */
.criteria-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.75rem;
  margin-bottom: 1.5rem;
}
.criteria-card h2 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.9rem; }
.criteria-grid-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.criterion-label { font-size: 0.82rem; color: var(--text-muted); }
.criterion-score { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; }
/* ─── Attempt history (submitted page) ──────────────────────────────────── */
.attempts-history {
  margin-top: 1.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  text-align: left;
}
.attempts-history h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.attempts-history table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.attempts-history th {
  background: var(--bg);
  padding: 0.5rem 0.65rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.attempts-history td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border); }
.attempts-history tr:last-child td { border-bottom: none; }
.attempts-history .current-row td { background: var(--accent-light); }
/* ─── Band guide (results page) ──────────────────────────────────────────── */
.band-guide {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.5rem;
}
.band-guide summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.band-guide summary:hover { color: var(--accent-dark); }
.band-guide-body { margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.6; color: var(--text); }
.band-guide-body p { margin-bottom: 0.4rem; }
.band-guide-body .guide-improve { color: var(--text-muted); }
.band-guide-body .guide-improve strong { color: var(--gold-dark); }
.overall-band-summary {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  line-height: 1.6;
}
.criterion-item.with-guide .criterion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ─── Print: clean result report ─────────────────────────────────────────── */
/* Print-only elements are hidden on screen and revealed in the print stylesheet. */
.print-only { display: none; }
/* ─── Overview: stat cards + bar charts ──────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  border-top: 3px solid var(--accent);
}
.stat-card.stat-attention { border-top-color: var(--gold); background: #fffaf0; }
.stat-card-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.stat-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

@media (max-width: 540px) { .criteria-grid-display { grid-template-columns: 1fr; } }

@media print {
  @page { margin: 1.4cm; }

  /* Force the brand colours to print (most browsers honour this). */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body { background: #fff; color: #1a1a1a; font-size: 10.5pt; line-height: 1.5; }

  /* Hide everything that's screen-only chrome. */
  .nav, .flash-wrap, .btn, .band-guide, .attempts-history, .legend,
  .results-header, .overall-band-summary { display: none !important; }

  .results-layout { max-width: 100%; margin: 0; padding: 0; }

  /* ---- Branded letterhead ---- */
  .print-report-head {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 3px solid #16406B;
  }
  .print-logo { height: 70px; width: auto; }
  .print-report-titles { flex: 1; }
  .print-org {
    font-family: var(--font-heading);
    font-size: 19pt;
    font-weight: 700;
    color: #16406B;
    line-height: 1.1;
  }
  .print-doc {
    font-size: 9.5pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a6a6a;
    margin-top: 2px;
  }
  .print-band {
    text-align: center;
    border: 2.5px solid #D8B04C;
    border-radius: 10px;
    padding: 6px 16px;
    min-width: 74px;
  }
  .print-band-num {
    font-family: var(--font-heading);
    font-size: 26pt;
    font-weight: 700;
    color: #16406B;
    line-height: 1;
  }
  .print-band-lbl {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6a6a;
    margin-top: 2px;
  }

  /* ---- Student / assessment facts ---- */
  .print-meta-table {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 20px;
    font-size: 9.5pt;
  }
  .print-meta-table td { padding: 5px 9px; border: 1px solid #d8d8d8; }
  .print-meta-table td.k {
    background: #f1f4f7;
    font-weight: 600;
    color: #16406B;
    width: 13%;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 8pt;
    letter-spacing: 0.04em;
  }

  /* ---- Section cards become clean, flat, page-break-aware ---- */
  .criteria-card, .feedback-card, .essay-card, .annotations-section,
  .corrected-version-card {
    box-shadow: none !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px;
    padding: 14px 16px !important;
    margin-bottom: 14px !important;
    break-inside: avoid;
  }
  .criteria-card h2, .feedback-card h2, .essay-card h2,
  .annotations-section h2, .corrected-version-card h2 {
    font-family: var(--font-heading);
    font-size: 12pt;
    color: #16406B;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    margin-bottom: 10px;
  }

  /* Criteria grid: tidy two-column boxes with a gold score */
  .criteria-grid-display { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .criterion-item {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px;
    padding: 7px 11px !important;
    break-inside: avoid;
  }
  .criterion-item.with-guide { flex-direction: row; align-items: center; }
  .criterion-item .criterion-head { width: 100%; }
  .criterion-label { font-size: 9.5pt; color: #333; }
  .criterion-score { font-family: var(--font-heading); font-size: 15pt; color: #16406B; }

  .feedback-card p, .corrected-version-text { font-size: 10pt; line-height: 1.6; }

  /* Essay: corrections as clean underlines (background tints rarely print well) */
  #essay-display { font-size: 10pt; line-height: 1.7; }
  mark { background: none !important; border-bottom: 1.2px solid #c0392b !important;
         color: #1a1a1a !important; padding: 0 !important; }

  /* Detailed corrections list */
  .annotation-card-result {
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding: 9px 12px !important;
    margin-bottom: 8px !important;
    break-inside: avoid;
  }
  .err-type-badge { border: 1px solid #ccc; }
  .corrected-version-card { border-color: #2a7a44 !important; }

  /* ---- Footer line ---- */
  .print-footer {
    display: block !important;
    margin-top: 18px;
    padding-top: 8px;
    border-top: 1px solid #d8d8d8;
    font-size: 8pt;
    color: #888;
    text-align: center;
    letter-spacing: 0.03em;
  }
}


/* ── The mock result on paper ────────────────────────────────────────────────
   A student pays for this and may want to show it to an agent, a university or
   an employer. On screen it is a web page; printed it should be a document.
   The writing portal already had a print report — this is the same treatment
   for the four-skill result, which had none, no print button, and no name or
   date on it at all. */
@media print {
  @page { margin: 1.4cm; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: #fff; color: #1a1a1a; font-size: 10.5pt; line-height: 1.5; }

  /* Screen-only chrome, and anything that cannot be acted on from paper. */
  .nav, .site-footer, .flash-wrap, .wa-fab, .no-print,
  .results-sheet .btn, .results-sheet details { display: none !important; }

  .results-sheet { max-width: 100%; margin: 0; padding: 0; }
  .results-sheet .card, .results-sheet .panel { break-inside: avoid; box-shadow: none; }
  /* The band hero is inline-styled navy; on paper it reads better as a rule. */
  .result-band-hero {
    background: none !important; color: #16406B !important;
    border: 2.5px solid #D8B04C; border-radius: 10px; padding: 10px !important;
  }
  .stat-cards { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
  .stat-card { border: 1px solid #bbb !important; box-shadow: none !important; }
}

/* ── "Before you begin" ───────────────────────────────────────────────────────
   Asaf, after sitting the test: too much information, not arranged clearly
   enough for a student to realise the whole thing happens in one go. One idea
   per panel, the one-sitting rule first and alone, the drop-out rules as a
   table instead of a paragraph, and a tick-box before Start. */
.pretest-lede { border-left: 4px solid var(--accent); }
.pretest-lede h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 .7rem; }
.pretest-lede p { margin: 0 0 .7rem; }
.pretest-lede p:last-child { margin-bottom: 0; }

.pretest-h { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }

/* Row headers here are words a student reads, not column labels — so they keep
   their case and their weight instead of .table's small grey uppercase. */
.pretest-table th {
  text-transform: none; font-size: .95rem; font-weight: 700;
  color: var(--ink); white-space: nowrap; vertical-align: top; width: 1%;
}
.pretest-table td { font-size: .95rem; vertical-align: top; }

.pretest-consent {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.4rem; padding: .9rem 1rem;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--bg-alt); cursor: pointer; line-height: 1.5;
}
.pretest-consent input { margin-top: .25rem; flex: 0 0 auto; width: 18px; height: 18px; cursor: pointer; }

/* ── Teacher feedback, with its Bangla twin (4 Sep 2026) ──────────────────────
   Our students are weak in English — that is why they are here. Feedback in
   English alone gets read and half-understood. The English stays first and
   full-size, because those are the examiner's words they will meet on the real
   day; the Bangla sits under it, quieter, so the meaning is never in doubt.
   Defined in BOTH stylesheets on purpose: the mock's student pages load only
   mock.css, the writing portal's only main.css, and this shows on both. */
.fb-line { display: block; }
.fb-line + .fb-line { margin-top: .55rem; }
.fb-en { display: block; }
.fb-bn {
  display: block;
  font-family: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;
  font-size: .93em;
  line-height: 1.75;
  opacity: .82;
  margin-top: .12rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   THE CAPSULE-AND-TABLET RE-SKIN  (4 September 2026)

   Asaf: "I actually like the colored capsule, tablet style of designing
   websites, where things, titles and sections are separated that way, it makes
   things easier to see visually" — and no more leading with gold and navy.

   This block comes LAST on purpose, so it re-dresses the classes the seventeen
   student pages already use rather than asking seventeen templates to change.
   The shapes are the four Asaf picked; the colours come from the tokens at the
   top of this file, which now point at the estate design system.

   The EXAM ROOM is not affected: it loads exam.css and nothing else.
   ════════════════════════════════════════════════════════════════════════════ */

/* The page is white. Panels float on it — that is where the life comes from. */
body { background: var(--d-ground); }
.app-main { background: transparent; }

/* ── Tablets: every card, panel and box on the site ────────────────────────── */
.card, .panel {
  background: var(--d-ground);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-tablet);
  box-shadow: none;
}
.card-hover:hover { transform: none; box-shadow: var(--d-shadow); border-color: var(--tone-edge); }
.panel-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--d-ink);
}
/* The red hairline under a panel title was the old accent. A capsule reads as
   a label, which is the whole idea of the new system. */
.panel-title::after { display: none; }

/* ── The next action: THE signature block of the dashboard ─────────────────
   It used to be a dark navy gradient slab — the one thing on the page that
   fought the white ground. It becomes the tab tablet: white, outlined in its
   tone, with the headline sitting in the tab. */
.next-action {
  position: relative; overflow: visible;
  background: var(--d-ground);
  color: var(--d-ink);
  border: 1.5px solid var(--tone);
  border-radius: 0 var(--d-r-tablet) var(--d-r-tablet) var(--d-r-tablet);
  box-shadow: none;
  padding: 26px 28px;
  margin: 1.6rem 0 22px;
}
.next-action::before {
  content: "Next";
  /* No `inset` shorthand here: it resets top/right/bottom to auto and would
     drop the tab back down onto the headline. */
  position: absolute; top: -1.62rem; left: -1.5px; right: auto; bottom: auto;
  height: auto; width: auto;
  background: var(--tone); color: #fff;
  border-radius: var(--d-r-sm) var(--d-r-sm) 0 0;
  padding: .2rem .8rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.next-action h2 {
  color: var(--d-ink); font-family: var(--font-display);
  font-size: 1.75rem; margin-bottom: 8px;
}
.next-action h2 em { color: var(--tone); font-style: normal; }
.next-action p { color: var(--d-muted); max-width: 62ch; }
.next-action .na-note { color: var(--d-muted); }
.next-action .na-note a { color: var(--tone); text-decoration: underline; text-underline-offset: 3px; }

/* ── Buttons become capsules ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--d-r-capsule);
  font-weight: 600;
  border: 1.5px solid transparent;
  box-shadow: none;
}
.btn-primary { background: var(--tone); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--tone); filter: brightness(1.08); box-shadow: none; }
.btn-outline { background: transparent; color: var(--tone); border-color: var(--tone); }
.btn-outline:hover { background: var(--tone-tint); color: var(--tone); }
.btn-ghost { background: transparent; color: var(--d-muted); border-color: var(--d-line); }
.btn-ghost:hover { background: var(--d-sunken); color: var(--d-ink); }

/* ── The estimate: three tablets, each in its own tone ─────────────────────── */
.est-main {
  background: var(--blue-tint); border: 1px solid var(--blue-edge);
  border-radius: var(--d-r-tablet);
}
.est-main .band-num { color: var(--blue-solid); }
.est-side {
  background: var(--d-ground); border: 1px solid var(--d-line);
  border-radius: var(--d-r-tablet);
}
.est-side:nth-of-type(2) .band-num { color: var(--teal-solid); }
.est-side:nth-of-type(3) .band-num { color: var(--purple-solid); }
.band-num { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.est-label { color: var(--d-muted); letter-spacing: .12em; }

/* ── Sittings: the numbers become capsules, the states become status pills ─── */
.mile-num {
  background: var(--tone-tint); color: var(--tone);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.band-pill {
  background: var(--tone-tint); color: var(--tone);
  border: 1px solid var(--tone-edge);
  font-family: var(--font-display); font-size: 1.05rem;
}
.state-badge { font-weight: 600; letter-spacing: .02em; padding: 3px 11px; }
.state-pending { background: var(--warn-bg); color: var(--warn); box-shadow: none; }
.state-none { background: var(--d-sunken); color: var(--d-muted); }
.badge-ok { background: var(--correct-bg); color: var(--correct); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: var(--d-sunken); color: var(--d-muted); }

/* ── Tables sit inside a tablet ────────────────────────────────────────────── */
.table th {
  font-size: .72rem; letter-spacing: .08em; color: var(--d-muted);
  border-bottom: 1px solid var(--d-line);
}
.table td { border-bottom: 1px solid var(--d-line); }
.table tbody tr:hover { background: var(--d-sunken); }

/* ── Flashes become notices ────────────────────────────────────────────────── */
.flash {
  border-radius: var(--d-r-sm);
  border: 1px solid var(--d-line); border-left-width: 3px;
  box-shadow: none; font-weight: 500;
}
.flash-success { background: var(--correct-bg); border-color: var(--correct); color: var(--d-ink); }
.flash-error, .flash-danger { background: var(--wrong-bg); border-color: var(--wrong); color: var(--d-ink); }
.flash-info { background: var(--info-bg); border-color: var(--info); color: var(--d-ink); }

/* ── Fields ────────────────────────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  border-radius: var(--d-r-input); border: 1.5px solid var(--d-line-strong);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-tint); outline: none;
}

/* ── A sitting that ended early ────────────────────────────────────────────── */
.void-row {
  background: var(--rose-tint); border: 1px solid var(--rose-edge);
  border-radius: var(--d-r-tablet);
}

/* ── The header ────────────────────────────────────────────────────────────── */
.site-header { background: var(--d-ground); border-bottom: 1px solid var(--d-line); box-shadow: none; }
.nav-link { color: var(--d-muted); }
.nav-link:hover { color: var(--tone); }

/* ── Each page picks its own colour ────────────────────────────────────────
   One class on <body>, set per page. This is the whole of "decorative, chosen
   per page" — no component below ever names a hue. */
body { --tone: var(--blue-solid); --tone-tint: var(--blue-tint); --tone-edge: var(--blue-edge); }
body.p-dashboard { --tone: var(--indigo-solid); --tone-tint: var(--indigo-tint); --tone-edge: var(--indigo-edge); }
body.p-results   { --tone: var(--teal-solid);   --tone-tint: var(--teal-tint);   --tone-edge: var(--teal-edge); }
body.p-speaking  { --tone: var(--purple-solid); --tone-tint: var(--purple-tint); --tone-edge: var(--purple-edge); }
body.p-buy       { --tone: var(--green-solid);  --tone-tint: var(--green-tint);  --tone-edge: var(--green-edge); }
body.p-pretest   { --tone: var(--amber-solid);  --tone-tint: var(--amber-tint);  --tone-edge: var(--amber-edge); }
body.p-auth      { --tone: var(--blue-solid);   --tone-tint: var(--blue-tint);   --tone-edge: var(--blue-edge); }

/* ── The results sheet ────────────────────────────────────────────────────────
   This page carried its whole appearance in fifty style="" attributes — the
   band hero had no class rule at all outside the print block, so no stylesheet
   could reach it. The structure lives here now. */
.results-sheet { max-width: 780px; margin: 2rem auto; }
.rs-title { font-family: var(--font-display); margin-bottom: .25rem; }
.rs-meta { color: var(--d-muted); margin-bottom: 1rem; }
.rs-print-line { margin: -.4rem 0 1.5rem; }
.rs-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; margin: 2rem 0 .35rem; color: var(--d-ink);
}
.rs-sub { margin: 0 0 .9rem; font-size: .92rem; }
.rs-summary { margin: -.5rem 0 1.5rem; font-size: .95rem; }

/* The signature block: a tab tablet, not a navy slab. */
.result-band-hero {
  position: relative;
  background: var(--d-ground);
  border: 1.5px solid var(--tone);
  border-radius: 0 var(--d-r-tablet) var(--d-r-tablet) var(--d-r-tablet);
  padding: 1.5rem; text-align: center;
  margin: 1.8rem 0 1.5rem;
}
.rs-hero-tab {
  position: absolute; top: -1.62rem; left: -1.5px;
  background: var(--tone); color: #fff;
  border-radius: var(--d-r-sm) var(--d-r-sm) 0 0;
  padding: .2rem .8rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.rs-hero-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1.05; color: var(--tone);
}
.rs-hero-note { font-size: .88rem; color: var(--d-muted); }

.rs-bands { margin-bottom: 1.5rem; }
.rs-tips { margin-bottom: 1.5rem; }
.rs-tip { padding: 1rem 1.25rem; margin-bottom: .6rem; }
.rs-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* Where the marks went — the one sentence a student can act on. */
.rs-lost { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.6rem; }
.rs-lost-row {
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(90px,1fr) auto;
  gap: .9rem; align-items: center;
  background: var(--tone-tint); border: 1px solid var(--tone-edge);
  border-radius: var(--d-r-group); padding: .6rem .9rem;
}
.rs-lost-name { display: flex; align-items: center; gap: .5rem; min-width: 0; flex-wrap: wrap; }
.rs-lost-name strong { font-size: .95rem; color: var(--d-ink); }
.rs-lost-score {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tone); white-space: nowrap; font-size: .92rem;
}

.rs-review { padding: .6rem 1.1rem; margin-bottom: .75rem; }
/* No text-transform here: it capitalised every word, so the line read
   "Listening — 40 Of 40 Correct". The section name is capitalised in the
   template, where only that word is meant. */
.rs-review-sum { cursor: pointer; font-weight: 600; }
.rs-part { margin: 1rem 0 .2rem; font-size: 1rem; }
.rs-passage { margin: .2rem 0 .6rem; }
.rs-passage > summary { cursor: pointer; font-size: .88rem; color: var(--d-muted); }
.rs-passage-body {
  margin: .5rem 0 0; padding: .9rem 1.1rem;
  background: var(--d-sunken); border-radius: var(--d-r-sm);
  white-space: pre-wrap; line-height: 1.7; font-size: .95rem;
  max-height: 26rem; overflow-y: auto;
}
.rs-group { margin: .7rem 0 1rem; }
.rs-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
}
.rs-group-head strong { font-size: .95rem; }
.rs-group-head .muted { font-size: .85rem; }
.rs-instruction { margin: .15rem 0 .5rem; font-size: .88rem; white-space: pre-line; }
.rs-table { width: 100%; font-size: .92rem; }
.rs-table .c-n { width: 2.4rem; font-weight: 700; }
.rs-table .c-a { width: 9rem; }
.rs-table .c-key { font-weight: 600; }
.rs-table .c-t { width: 2rem; text-align: center; font-weight: 700; }
/* Right and wrong are SIGNALS — the one place colour carries meaning, and it
   always sits beside a tick or a cross, never colour alone. */
.rs-table .is-ok { color: var(--correct); }
.rs-table .is-wrong { color: var(--wrong); }
.rs-table .is-blank { color: var(--text-muted); font-style: italic; }
.rs-table .rs-marks { font-size: .8rem; font-style: normal; margin-top: .15rem; }
.stat-card-sub { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.stat-card-pending { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.rs-hero-pending { font-size: 1.6rem; }

/* ── Classes the mock uses that were defined only in main.css ─────────────────
   The student side loads mock.css and nothing else, so these rendered with no
   styling at all on this site. The band badge is the worst of them: it is the
   circular badge whose colour shows the band on the Writing report, and it was
   a bare div here. */
.band-score-badge {
  display: inline-grid; place-items: center;
  width: 74px; height: 74px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.8rem;
  border: 2px solid var(--tone-edge); background: var(--tone-tint); color: var(--tone);
}
.band-score-badge.score-low  { border-color: var(--rose-edge);  background: var(--rose-tint);  color: var(--rose-solid); }
.band-score-badge.score-mid  { border-color: var(--amber-edge); background: var(--amber-tint); color: var(--amber-solid); }
.band-score-badge.score-good { border-color: var(--blue-edge);  background: var(--blue-tint);  color: var(--blue-solid); }
.band-score-badge.score-high { border-color: var(--green-edge); background: var(--green-tint); color: var(--green-solid); }

.err-type-badge {
  display: inline-block; border-radius: 999px; padding: .1rem .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge-grammar    { background: var(--err-grammar-bg); color: var(--d-ink); }
.badge-spelling   { background: var(--err-spell-bg);   color: var(--d-ink); }
.badge-vocabulary { background: var(--err-vocab-bg);   color: var(--d-ink); }
.badge-other      { background: var(--err-other-bg);   color: var(--d-ink); }

/* The four-colour code in a marked essay. Without these the browser's default
   yellow <mark> was used for every kind of mistake, so the colour code the
   legend explains did not exist on this site. */
mark.error-grammar    { background: var(--err-grammar-bg); border-bottom: 2px solid var(--err-grammar-line); }
mark.error-spelling   { background: var(--err-spell-bg);   border-bottom: 2px solid var(--err-spell-line); }
mark.error-vocabulary { background: var(--err-vocab-bg);   border-bottom: 2px solid var(--err-vocab-line); }
mark.error-other      { background: var(--err-other-bg);   border-bottom: 2px solid var(--err-other-line); }
mark[class^="error-"] { padding: 0 .1em; border-radius: 3px; }

.status-pill {
  display: inline-block; border-radius: 999px; padding: .15rem .6rem;
  font-size: .74rem; font-weight: 600;
  background: var(--d-sunken); color: var(--d-muted);
}
.pill-published, .pill-approved { background: var(--correct-bg); color: var(--correct); }
.pill-pending, .pill-graded { background: var(--warn-bg); color: var(--warn); }
.pill-rejected { background: var(--wrong-bg); color: var(--wrong); }

.criterion-notes { margin: .6rem 0 0; }
.criterion-notes dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--d-muted); margin-top: .7rem;
}
.criterion-notes dd { margin: .15rem 0 0; font-size: .93rem; line-height: 1.65; }
.criterion-item {
  border: 1px solid var(--d-line); border-radius: var(--d-r-sm);
  padding: .6rem .8rem;
}
.criterion-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

/* ── Two print defects ────────────────────────────────────────────────────────
   The print block hides `.wa-fab`, but the class is `.fab-wa` — so the floating
   WhatsApp button printed on every student's result. And `.nav` was hidden while
   `.site-header` was not, so the header bar and logo printed above the
   letterhead. Both fixed here rather than by editing the rule above, so the
   history of what was wrong stays readable. */
@media print {
  .fab-wa, .site-header { display: none !important; }
  /* The hero is a fill on screen; on paper it becomes a rule, like the rest. */
  .result-band-hero {
    background: none !important; border: 2px solid #6b7889 !important;
    border-radius: 10px; padding: 10px !important;
  }
  .rs-hero-tab {
    position: static !important; display: inline-block;
    background: none !important; color: #14283c !important;
    padding: 0 !important; letter-spacing: .08em;
  }
  .rs-hero-num { color: #14283c !important; }
  .rs-lost-row { background: none !important; border: 1px solid #b9c2cc !important; }
  .rs-lost-score { color: #14283c !important; }
}

/* ── The phone pass (9 Sep 2026) ─────────────────────────────────────────────
   Results are read on phones; the exam is sat on laptops. Under 600px the two
   tables that mattered most stack into cards, the WhatsApp button wraps, and
   the header keeps its logo. Nothing here moves on a laptop. */
@media (max-width: 600px) {
  /* The header: the logo was squeezed to 0px and the links wrapped to two lines. */
  .nav-buy, .nav-dash { display: none; }   /* the logo already goes to the dashboard */
  .nav-user { display: none; }              /* the balance is on the dashboard and the Buy page */
  .site-header .nav .btn { padding: .6rem .9rem; font-size: .88rem; }
  /* The links wrapped word by word ("Sign / in", "5 / credits"). They stay
     on one line each; if the bar is still too narrow it scrolls sideways
     inside itself, never the page. */
  .nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav a.nav-link, .nav-user, .nav .btn { white-space: nowrap; }
  .nav a.nav-link { padding: .5rem .45rem; }
  .nav-user { font-size: .82rem; }

  /* "Account created" scrolled sideways: the WhatsApp button could not wrap. */
  .btn-whatsapp, .btn-block { white-space: normal; line-height: 1.3; }
  .auth-card { min-width: 0; }

  /* The sittings list: one card per sitting, each cell naming its column. */
  .table-scroll > .sittings-table { min-width: 0; }
  .sittings-table thead { display: none; }
  .sittings-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem;
    padding: .8rem 0; border-bottom: 1px solid var(--line);
  }
  .sittings-table td { display: block; padding: 0; border: 0; }
  .sittings-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--d-muted); margin-bottom: .1rem;
  }
  .sittings-table td.s-test, .sittings-table td.s-overall, .sittings-table td.s-action { grid-column: 1 / -1; }
  .sittings-table td.s-action .btn { width: 100%; }

  /* The answer review: number · question, then "You:" and "Answer:" on their
     own lines, the tick beside them — instead of two columns cut off to the
     right of a box nothing pointed at. */
  .table-scroll > .rs-table { min-width: 0; }
  .rs-table thead { display: none; }
  .rs-table tr {
    display: grid; grid-template-columns: 2.4rem 1fr 2rem; gap: .1rem .5rem;
    padding: .6rem 0; border-bottom: 1px solid var(--line-soft);
  }
  .rs-table td { display: block; padding: 0; border: 0; width: auto; }
  .rs-table td.c-n { grid-column: 1; grid-row: 1 / span 3; }
  .rs-table td:nth-child(2) { grid-column: 2; }
  .rs-table td:nth-child(3) { grid-column: 2; }
  .rs-table td:nth-child(3)::before { content: "You: "; font-weight: 600; color: var(--d-muted); }
  .rs-table td.c-key { grid-column: 2; }
  .rs-table td.c-key::before { content: "Answer: "; font-weight: 600; color: var(--d-muted); }
  .rs-table td.c-t { grid-column: 3; grid-row: 1 / span 3; align-self: center; text-align: center; }

  /* Thumbs: the small buttons and the disclosure rows were 24–31px tall. */
  .btn-sm { padding: .85rem 1rem; }   /* 44px tall at 17px root */
  .rs-review-sum, .rs-passage > summary { padding: .6rem 0; }
}