/* ==========================================================================
   MCM Guess Papers — exam portal
   --------------------------------------------------------------------------
   The design follows the thing it replaces: a printed question bank and an
   OMR answer sheet. Options are real answer bubbles that take ink when
   chosen, the question palette is the answer sheet itself, and the results
   page is that sheet handed back marked. Colours are the ones already used
   by the printed banks — parade green, brass, signal red.
   No build step, no external requests: it works offline once loaded.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --paper:        #f3f5f1;
  --paper-deep:   #e9ede5;
  --card:         #ffffff;
  --ink:          #16241b;
  --ink-soft:     #5b675e;
  --ink-faint:    #8b968d;
  --rule:         #dde3d8;
  --rule-strong:  #c6cfc0;

  --parade:       #0b3d0b;   /* headings, primary actions               */
  --parade-lift:  #16651a;   /* hover / fills                           */
  --parade-wash:  #eef4ea;
  --brass:        #b46a00;   /* marked for review, medium difficulty    */
  --brass-wash:   #fdf4e3;
  --signal:       #a00000;   /* wrong, hard difficulty                  */
  --signal-wash:  #fbecec;
  --navy:         #1b2a6b;   /* information                             */
  --navy-wash:    #edf0fb;

  --font-display: "Bahnschrift", "DIN Alternate", "Haettenschweiler",
                  "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Charter", "Bitstream Charter", "Cambria", Georgia, serif;
  --font-ui:      "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", sans-serif;
  --font-urdu:    "Jameel Noori Nastaleeq", "Alvi Nastaleeq",
                  "Noto Nastaliq Urdu", "Urdu Typesetting", "Segoe UI",
                  Tahoma, sans-serif;

  --shadow-sm: 0 1px 2px rgba(22, 36, 27, .06), 0 2px 6px rgba(22, 36, 27, .04);
  --shadow-md: 0 2px 4px rgba(22, 36, 27, .05), 0 12px 28px rgba(22, 36, 27, .08);
  --shadow-lg: 0 4px 8px rgba(22, 36, 27, .06), 0 24px 60px rgba(22, 36, 27, .12);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --shell: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* faint ruled-paper grain, drawn not downloaded */
  background-image:
    radial-gradient(circle at 12% -10%, rgba(11, 61, 11, .05), transparent 42%),
    radial-gradient(circle at 92% 4%,  rgba(180, 106, 0, .05), transparent 38%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.12; }
p { margin: 0 0 1em; }
a { color: var(--parade); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
@media (max-width: 640px) { .shell { width: min(100% - 28px, var(--shell)); } }

/* Small tracked-out label — the portal's structural voice. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- masthead */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(243, 245, 241, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}
.wordmark {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.crest {
  width: 36px; height: 36px; flex: none;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--parade-lift), var(--parade));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
}
.wordmark b {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: .01em; display: block; line-height: 1.05;
}
.wordmark .tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.masthead nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.masthead nav a {
  font-size: 14px; text-decoration: none; color: var(--ink-soft);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.masthead nav a:hover { background: var(--paper-deep); color: var(--ink); }
.masthead nav a[aria-current="page"] { background: var(--parade-wash); color: var(--parade); }
.source-pill {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px;
}

.masthead .who {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .04em;
  color: var(--parade); background: var(--parade-wash);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.signout-form { display: inline-flex; margin: 0; }

/* ---- hamburger: three lines that fold into a cross ---- */
.nav-toggle {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; flex: none; padding: 11px 10px;
  background: none; border: 1px solid var(--rule-strong); border-radius: 11px;
  cursor: pointer; flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--ink);
  transition: transform .24s var(--ease), opacity .18s var(--ease);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(14, 20, 14, .38);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); z-index: 38;
}
.nav-backdrop.on { opacity: 1; pointer-events: auto; }

/* On a phone the links move into a panel behind the three-line button. */
@media (max-width: 760px) {
  .masthead-in { height: 58px; gap: 10px; }
  .crest { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
  .wordmark b { font-size: 16px; }
  .wordmark .tag { display: none; }
  .nav-toggle { display: flex; }

  .masthead nav {
    position: absolute; inset-inline: 0; top: 100%;
    margin: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--card); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md); padding: 12px 18px 18px;
    display: none;
  }
  .masthead nav.open { display: flex; }
  .masthead nav a {
    font-size: 15.5px; padding: 12px 14px; border-radius: 10px;
    border-bottom: 1px solid var(--rule);
  }
  .masthead nav a:last-of-type { border-bottom: 0; }
  .masthead .who { align-self: flex-start; margin-top: 8px; }
  .signout-form { margin-top: 8px; }
  .signout-form .btn { width: 100%; justify-content: center; }
  .source-pill { display: none; }
}
@media (max-width: 380px) {
  .wordmark b { font-size: 0; }               /* keep the crest, drop the words */
  .wordmark b::after {
    content: "CCT"; font-size: 16px; font-family: var(--font-display);
  }
}
@media (max-width: 380px) {
  .wordmark b { font-size: 0; }               /* keep the crest, drop the words */
  .wordmark b::after {
    content: "CCT"; font-size: 16px; font-family: var(--font-display);
  }
}

/* -------------------------------------------------------------------- hero */
.hero { padding: 54px 0 10px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 54px; align-items: end;
}
.hero h1 {
  font-size: clamp(40px, 6.6vw, 76px);
  letter-spacing: -.015em;
  margin: 14px 0 0;
}
.hero h1 em {
  font-style: normal; display: block; color: var(--parade);
}
.hero-lede {
  font-family: var(--font-body); font-size: 18.5px; line-height: 1.6;
  color: var(--ink-soft); max-width: 46ch; margin: 20px 0 0;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* The four colleges, set as a ruled register — real content, not decoration */
.register { border-top: 2px solid var(--ink); padding-top: 12px; }
.register li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.register ol { list-style: none; margin: 0; padding: 0; }
.register li i {
  font-family: var(--font-display); font-style: normal; font-size: 12px;
  letter-spacing: .1em; color: var(--brass); width: 22px; flex: none;
}
.register-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); }

@media (max-width: 900px) {
  .hero { padding-top: 34px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; align-items: start; }
}

/* ------------------------------------------------------------------ counts */
.tally {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-sm);
  margin: 40px 0 8px; overflow: hidden;
}
.tally div { padding: 20px 22px; border-inline-start: 1px solid var(--rule); }
.tally div:first-child { border-inline-start: 0; }
.tally b {
  font-family: var(--font-display); font-size: 34px; font-weight: 600;
  display: block; line-height: 1; letter-spacing: -.01em;
}
.tally span { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; }
@media (max-width: 720px) {
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally div:nth-child(3) { border-inline-start: 0; }
  .tally div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---------------------------------------------------------------- sections */
.section { padding: 52px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.section-head h2 { font-size: 27px; letter-spacing: -.005em; }
.section-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }

/* --------------------------------------------------------- subject cards */
.subject-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}
.paper-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 22px 22px 20px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
  overflow: hidden;
}
/* the spine: colour-codes the subject the way a shelved paper file does */
.paper-card::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 6px; background: var(--accent, var(--parade));
}
.paper-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-strong);
}
.paper-card h3 { font-size: 23px; margin-bottom: 4px; }
.paper-card .grade { font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; }
.paper-card .blurb {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink-soft);
  margin: 12px 0 16px; min-height: 44px;
}
.paper-card .blurb[dir="rtl"] { font-family: var(--font-urdu); line-height: 2; font-size: 16px; }
.paper-card .foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-top: 13px;
  font-size: 13px; color: var(--ink-soft);
}
.paper-card .go {
  font-family: var(--font-display); letter-spacing: .1em; font-size: 12px;
  text-transform: uppercase; color: var(--parade);
}
.paper-card:hover .go { color: var(--parade-lift); }
.paper-card.soon { opacity: .62; pointer-events: none; background: #fbfcfa; }
.paper-card.soon::before { background: var(--rule-strong); }
.soon-tag {
  position: absolute; top: 16px; inset-inline-end: 16px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 9px;
}

/* ------------------------------------------------------------- chapter row */
.chapter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.chapter-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex;
  flex-direction: column; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chapter-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.chapter-top { display: flex; gap: 14px; align-items: flex-start; }
.chapter-no {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--parade-wash); color: var(--parade);
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
}
.chapter-card h3 { font-size: 18.5px; line-height: 1.2; }
.chapter-card h3[dir="rtl"] { font-family: var(--font-urdu); font-size: 20px; line-height: 1.9; }
.chapter-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.chip.e { color: var(--parade); background: var(--parade-wash); }
.chip.m { color: var(--brass);  background: var(--brass-wash); }
.chip.h { color: var(--signal); background: var(--signal-wash); }
.chapter-card .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- chapters already sat ---- */
.chapter-card { position: relative; }

/* A sat chapter turns solid: green when the best score is a pass, red when it
   is below the pass mark. Everything written on it goes white so it stays
   readable on either background. */
.chapter-card.done {
  --done-bg: #168816;
  background: var(--done-bg);
  border-color: var(--done-bg);
  color: #fff;
}
.chapter-card.done.low { --done-bg: #a11616; }

.chapter-card.done *,
.chapter-card.done h3,
.chapter-card.done .chapter-meta,
.chapter-card.done .done-line { color: #fff; }

.chapter-card.done .chapter-no {
  background: rgba(255, 255, 255, .18); color: #fff;
}
.chapter-card.done .chip {
  color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55);
}
/* Ghost buttons — a filled button would vanish into the card. */
.chapter-card.done .btn {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .7);
  color: var(--btn-fg);
}
.chapter-card.done .btn:hover {
  --btn-bg: #fff; --btn-fg: var(--done-bg); --btn-bd: #fff;
}

.done-flag {
  position: absolute; top: 14px; inset-inline-end: 16px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--parade);
  background: var(--card); border: 1px solid #bcd6bc;
  border-radius: 999px; padding: 3px 10px;
}
.chapter-card.done .done-flag {
  color: var(--done-bg); background: #fff; border-color: #fff;
}
.chip.done-chip { color: var(--parade); background: var(--parade-wash); }
.done-line {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .06em;
  color: var(--parade); margin-top: 10px;
}
.paper-card.started::before { background: var(--parade); }

/* ----------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--parade); --btn-fg: #fff; --btn-bd: var(--parade);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: 10px;
  padding: 11px 20px; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: .03em;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.btn:hover { --btn-bg: var(--parade-lift); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn.ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn.ghost:hover { --btn-bg: var(--paper-deep); }
.btn.quiet { --btn-bg: transparent; --btn-fg: var(--ink-soft); --btn-bd: transparent; }
.btn.quiet:hover { --btn-bg: var(--paper-deep); --btn-fg: var(--ink); }
.btn.danger { --btn-bg: var(--signal); --btn-bd: var(--signal); }
.btn.danger:hover { --btn-bg: #bb1414; }
.btn.wide { width: 100%; }
.btn.sm { padding: 8px 14px; font-size: 13.5px; }
.btn[disabled] { opacity: .42; pointer-events: none; }
/* A paper already sat. It is not a button at all — it goes nowhere until an
   admin resets that paper. */
.btn.locked {
  --btn-bg: transparent; --btn-fg: var(--ink-faint); --btn-bd: var(--rule);
  cursor: default; box-shadow: none;
}
.btn.locked:hover { --btn-bg: transparent; box-shadow: none; }
.btn.locked:active { transform: none; }
.lock-line { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }

/* -------------------------------------------------------------- page head */
.page-head {
  padding: 34px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 30px;
}
.crumb {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--ink-soft); font-size: 13.5px; margin-bottom: 14px;
}
.crumb:hover { color: var(--parade); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.01em; }
.page-head .lede {
  font-family: var(--font-body); color: var(--ink-soft); font-size: 16px;
  max-width: 70ch; margin: 12px 0 22px;
}
.page-head .lede[dir="rtl"] { font-family: var(--font-urdu); line-height: 2.1; }

/* ============================== EXAM SETUP ============================== */
.setup {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px;
  align-items: start; padding-bottom: 60px;
}
.panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 20px; margin-bottom: 4px; }
.panel .hint { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 18px; }
.field { margin-bottom: 22px; }
.field > label.field-label {
  display: block; margin-bottom: 9px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.choices { display: flex; flex-wrap: wrap; gap: 9px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: block; padding: 10px 17px; border: 1px solid var(--rule-strong);
  border-radius: 10px; cursor: pointer; font-size: 14.5px; background: var(--card);
  transition: all .18s var(--ease);
}
.choice input:checked + span {
  border-color: var(--parade); background: var(--parade-wash);
  color: var(--parade); font-weight: 600;
}
.choice input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.text-input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--rule-strong);
  border-radius: 10px; font: inherit; background: var(--card);
}
.text-input:focus { border-color: var(--parade); outline: none; box-shadow: 0 0 0 3px var(--parade-wash); }

.topic-list { margin: 0; padding: 0; list-style: none; }
.topic-list li {
  display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.topic-list li:last-child { border-bottom: 0; }
.topic-list b {
  font-family: var(--font-display); color: var(--brass); flex: none; min-width: 18px;
}
.topic-list span { color: var(--ink-soft); }
.topic-list[dir="rtl"] li { font-family: var(--font-urdu); line-height: 2; }

/* ------------------------------------------------------------- lesson --
   The page that opens a chapter before the paper starts. The bilingual banks
   write their method as several lines - the rule in English, then the same
   rule in Urdu - and app.js decides the direction of each line on its own.
   .ur is what an Urdu line lands in, wherever prose() is used. */
.lesson h2 { font-size: 20px; }
.lesson-part { border-top: 1px solid var(--rule); padding: 14px 0 4px; }
.lesson-part:first-of-type { border-top: 0; padding-top: 4px; }
.lesson-part > summary {
  display: flex; gap: 12px; align-items: baseline; cursor: pointer;
  list-style: none; padding: 2px 0;
}
.lesson-part > summary::-webkit-details-marker { display: none; }
.lesson-part > summary b {
  font-family: var(--font-display); color: var(--brass);
  flex: none; min-width: 18px;
}
.lesson-part > summary span {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
}
.lesson-part > summary::after {
  content: "-"; margin-left: auto; color: var(--ink-faint); flex: none;
}
.lesson-part:not([open]) > summary::after { content: "+"; }
.lesson-body { padding: 8px 0 6px 30px; }
.lesson-body p { margin: 0 0 9px; font-size: 15px; color: var(--ink-soft); }
.lesson-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .lesson-body { padding-left: 0; } }

/* An Urdu line inside otherwise left-to-right prose. */
.ur {
  font-family: var(--font-urdu); line-height: 2.05; font-size: 16.5px;
  text-align: right;
}

@media (max-width: 900px) { .setup { grid-template-columns: 1fr; } }

/* ================================= EXAM ================================= */
.exam-body { background: var(--paper-deep); }

.exam-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 245, 241, .9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.exam-bar-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.exam-bar .title { min-width: 0; }
.exam-bar .title b {
  font-family: var(--font-display); font-size: 16px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exam-bar .title span { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.exam-bar .spacer { margin-inline-start: auto; }
.clock {
  font-family: var(--font-display); font-size: 19px; letter-spacing: .04em;
  padding: 5px 13px; border-radius: 9px; border: 1px solid var(--rule-strong);
  background: var(--card);
}
.clock.warn { color: var(--brass); border-color: var(--brass); background: var(--brass-wash); }
.clock.out  { color: var(--signal); border-color: var(--signal); background: var(--signal-wash); }

.exam-layout {
  display: grid; grid-template-columns: 296px minmax(0, 1fr);
  gap: 28px; align-items: start; padding: 26px 0 80px;
}

/* ---- left rail: the answer sheet ---- */
.rail { position: sticky; top: 86px; display: grid; gap: 16px; }
.rail-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm);
}
.rail-card h3 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }

.progress-figure { display: flex; align-items: center; gap: 16px; }
.dial { width: 78px; height: 78px; flex: none; }
.dial circle { fill: none; stroke-width: 8; }
.dial .track { stroke: var(--paper-deep); }
.dial .value {
  stroke: var(--parade); stroke-linecap: round;
  transition: stroke-dashoffset .5s var(--ease);
}
.dial text {
  font-family: var(--font-display); font-size: 21px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}
.progress-figure .read b { font-family: var(--font-display); font-size: 21px; display: block; }
.progress-figure .read span { font-size: 12.5px; color: var(--ink-faint); }

.count-rows { margin-top: 14px; display: grid; gap: 7px; }
.count-rows div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.count-rows i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor;
}
.count-rows .k-answered { color: var(--parade); }
.count-rows .k-marked   { color: var(--brass); }
.count-rows .k-left     { color: var(--ink-faint); }
.count-rows b { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--ink); }

/* the OMR sheet grid — also the navigation */
.sheet {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px; max-height: 42vh; overflow-y: auto; padding-inline-end: 4px;
}
.sheet::-webkit-scrollbar { width: 8px; }
.sheet::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 99px; }
.sheet button {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--rule-strong); background: var(--card);
  font-family: var(--font-display); font-size: 12.5px; color: var(--ink-soft);
  display: grid; place-items: center; padding: 0;
  transition: all .16s var(--ease);
}
.sheet button:hover { border-color: var(--ink-faint); transform: scale(1.08); }
/* Jumping between questions is switched off — the grid is a progress display. */
.sheet.locked button { cursor: default; pointer-events: none; }
.sheet.locked button:hover { border-color: var(--rule-strong); transform: none; }
.sheet button.answered {
  background: var(--parade); border-color: var(--parade); color: #fff;
}
.sheet button.marked {
  border-color: var(--brass); color: var(--brass); background: var(--brass-wash);
}
.sheet button.marked.answered {
  background: var(--brass); color: #fff;
}
.sheet button.current {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
  transform: scale(1.06);
}

/* ---- main column ---- */
.question-stage { min-height: 60vh; }
.qcard {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 30px 34px 28px;
}
.qcard.enter { animation: qin .34s var(--ease) both; }
@keyframes qin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.qhead {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 22px;
}
.qhead .qno {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--parade);
}
.qhead .qtype { font-size: 12.5px; color: var(--ink-faint); }
.qhead .spacer { margin-inline-start: auto; }

.qtext {
  font-family: var(--font-body); font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.5; margin: 0 0 24px; color: var(--ink);
  /* History/Geography carry an Urdu line under the English one, sent as a
     plain "\n" in the text. pre-line keeps that break without any markup. */
  white-space: pre-line;
}
[dir="rtl"] .qtext, .qtext[dir="rtl"] {
  font-family: var(--font-urdu); line-height: 2.15; font-size: clamp(20px, 2.2vw, 25px);
}

.options { display: grid; gap: 11px; }
.option {
  display: flex; align-items: center; gap: 15px; width: 100%;
  text-align: start; padding: 14px 18px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--rule);
  border-radius: 13px;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease);
}
.option:hover { border-color: var(--rule-strong); background: #fbfcfa; transform: translateX(2px); }
[dir="rtl"] .option:hover { transform: translateX(-2px); }

/* the signature: an answer bubble that takes ink */
.bubble {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14.5px; color: var(--ink-soft);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.bubble::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--parade); transform: scale(0); opacity: 0;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.bubble span { position: relative; z-index: 1; }
.option[aria-checked="true"] { border-color: var(--parade); background: var(--parade-wash); }
.option[aria-checked="true"] .bubble { border-color: var(--parade); color: #fff; }
.option[aria-checked="true"] .bubble::before { transform: scale(1); opacity: 1; }
.opt-text { font-family: var(--font-body); font-size: 17px; line-height: 1.45; white-space: pre-line; }
[dir="rtl"] .opt-text { font-family: var(--font-urdu); font-size: 18px; line-height: 2; }

.qnav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.qnav .spacer { margin-inline-start: auto; }
/* Says why Next is shut. Nothing may be left blank. */
.qnav .hint { font-size: 13px; color: var(--ink-faint); }
.qnav .hint[hidden] { display: none; }

/* Study subjects: the key is printed on the option itself. It is a marking,
   not a selection — the student's own tap still shows as the chosen bubble. */
.option.key {
  border-color: var(--parade); background: var(--parade-wash);
  border-style: solid; box-shadow: inset 3px 0 0 var(--parade);
}
.option.key .bubble { border-color: var(--parade); color: var(--parade); }
.option.key .opt-text { font-weight: 600; }
.key-flag {
  margin-inline-start: auto; flex: none; align-self: center;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--parade); white-space: nowrap;
}
.option.key[aria-checked="true"] .bubble { color: #fff; }
@media (max-width: 560px) {
  .key-flag { font-size: 0; }
  .key-flag::after { content: "✓"; font-size: 16px; }
}

.method-note {
  margin-top: 18px; background: var(--brass-wash);
  border: 1px dashed #e0be7c; border-radius: var(--r-sm);
  padding: 14px 16px; font-size: 14px; color: #6d4a12;
  white-space: pre-line;
}
.method-note b {
  font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  font-size: 11.5px; color: var(--brass); display: block; margin-bottom: 5px;
}
.method-note p { margin: 0 0 7px; }
.method-note p:last-child { margin-bottom: 0; }
.method-note .ur { font-size: 15px; line-height: 2; }
.method-note[dir="rtl"] { font-family: var(--font-urdu); line-height: 2; }

.sheet-toggle { display: none; }

@media (max-width: 940px) {
  .exam-layout { grid-template-columns: 1fr; gap: 0; padding-top: 18px; }
  .rail {
    position: fixed; inset: auto 0 0 0; z-index: 70; max-height: 78vh;
    overflow-y: auto; background: var(--card); padding: 18px;
    border-top: 1px solid var(--rule); border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg); transform: translateY(101%);
    transition: transform .3s var(--ease);
  }
  .rail.open { transform: none; }
  .rail-card { border: 0; box-shadow: none; padding: 0; }
  .rail-card + .rail-card { padding-top: 16px; border-top: 1px solid var(--rule); }
  .sheet { max-height: 34vh; }
  .sheet-toggle { display: inline-flex; }
  .qcard { padding: 22px 18px 20px; border-radius: var(--r-md); }
  .exam-layout { padding-bottom: 96px; }
}

/* --------------------------------------------------------------- backdrop */
.backdrop {
  position: fixed; inset: 0; z-index: 65; background: rgba(22, 36, 27, .38);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.backdrop.on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- dialogue */
.modal-wrap {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; background: rgba(22, 36, 27, .42);
  backdrop-filter: blur(3px);
  animation: fade .2s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(100%, 470px); background: var(--card);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 28px; animation: pop .28s var(--ease) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal h2 { font-size: 23px; margin-bottom: 10px; }
.modal p { font-size: 15px; color: var(--ink-soft); }
.modal .tally-line {
  display: flex; gap: 18px; margin: 18px 0 22px; padding: 14px 16px;
  background: var(--paper); border-radius: var(--r-sm); flex-wrap: wrap;
}
.modal .tally-line div { font-size: 13px; color: var(--ink-faint); }
.modal .tally-line b { display: block; font-family: var(--font-display); font-size: 21px; color: var(--ink); }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ================================ RESULT ================================ */
.result-hero {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 30px 34px; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center;
  margin-bottom: 22px;
}
.grade-stamp {
  width: 132px; height: 132px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  border: 3px solid var(--parade); color: var(--parade);
  background: var(--parade-wash);
  animation: stamp .5s var(--ease) both;
}
@keyframes stamp {
  from { opacity: 0; transform: scale(1.25) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
.grade-stamp b { font-family: var(--font-display); font-size: 52px; line-height: 1; }
.grade-stamp span {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; margin-top: 2px;
}
.grade-stamp.warn { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }
.grade-stamp.poor { border-color: var(--signal); color: var(--signal); background: var(--signal-wash); }
.result-hero h1 { font-size: clamp(26px, 3.6vw, 38px); }
.result-hero .where { color: var(--ink-soft); font-size: 14.5px; margin: 6px 0 0; }
.result-hero .level {
  font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  font-size: 12px; color: var(--brass); margin-top: 14px; display: block;
}
.result-actions { display: grid; gap: 9px; }
@media (max-width: 860px) {
  .result-hero { grid-template-columns: 1fr; justify-items: start; gap: 20px; padding: 24px; }
  .result-actions { width: 100%; grid-auto-flow: column; }
}

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: var(--tone, var(--rule-strong));
}
.stat b {
  font-family: var(--font-display); font-size: 38px; display: block; line-height: 1;
  color: var(--tone, var(--ink)); font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .05em; }
.stat.ok    { --tone: var(--parade); }
.stat.bad   { --tone: var(--signal); }
.stat.skip  { --tone: var(--brass); }
.stat.info  { --tone: var(--navy); }

.chart-grid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 18px; margin-bottom: 26px;
}
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.chart-card h3 { font-size: 17px; margin-bottom: 3px; }
.chart-card .hint { font-size: 13px; color: var(--ink-faint); margin: 0 0 18px; }
.legend { display: grid; gap: 8px; margin-top: 16px; }
.legend div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legend b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

.bar-row { display: grid; gap: 12px; }
.bar-line { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 12px; align-items: center; }
.bar-line .label { font-size: 13.5px; color: var(--ink-soft); }
.bar-line .label[dir="rtl"] { font-family: var(--font-urdu); }
.bar-track { height: 9px; border-radius: 99px; background: var(--paper-deep); overflow: hidden; margin-top: 5px; }
.bar-fill {
  height: 100%; border-radius: 99px; background: var(--parade); width: 0;
  transition: width .8s var(--ease);
}
.bar-line .pct { font-family: var(--font-display); font-size: 15px; text-align: end; font-variant-numeric: tabular-nums; }

/* ---- review list ---- */
.review-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin: 34px 0 16px;
}
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filters button {
  border: 1px solid var(--rule-strong); background: var(--card); cursor: pointer;
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; color: var(--ink-soft);
  transition: all .16s var(--ease);
}
.filters button:hover { border-color: var(--ink-faint); }
.filters button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

.review { display: grid; gap: 13px; }
.review-item {
  background: var(--card); border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--rule-strong);
  border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.review-item.correct { border-inline-start-color: var(--parade); }
.review-item.wrong   { border-inline-start-color: var(--signal); }
.review-item.skipped { border-inline-start-color: var(--brass); }
.review-item .rhead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.review-item .rno {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.verdict {
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.verdict.correct { background: var(--parade-wash); color: var(--parade); }
.verdict.wrong   { background: var(--signal-wash); color: var(--signal); }
.verdict.skipped { background: var(--brass-wash);  color: var(--brass); }
.review-item .rq {
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.5; margin: 0 0 14px;
  white-space: pre-line;
}
.review-item .rq[dir="rtl"] { font-family: var(--font-urdu); line-height: 2.1; }
.answer-lines { display: grid; gap: 7px; margin-bottom: 12px; }
.answer-line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.answer-line .tag {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 96px; padding-top: 3px;
}
.answer-line .val { font-family: var(--font-body); white-space: pre-line; }
.answer-line .val[dir="rtl"] { font-family: var(--font-urdu); line-height: 2; }
.answer-line.mine .val { color: var(--signal); }
.answer-line.mine.ok .val { color: var(--parade); }
.answer-line.key .val { color: var(--parade); font-weight: 600; }
.explain {
  background: var(--navy-wash); border-radius: var(--r-sm); padding: 13px 16px;
  font-size: 14.5px; color: #263166; white-space: pre-line;
}
.explain b {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--navy);
}
.explain p { margin: 0 0 7px; }
.explain p:last-child { margin-bottom: 0; }
.explain .ur { font-size: 15.5px; line-height: 2; }
.explain + .explain { margin-top: 8px; }
.explain.method { background: var(--brass-wash); color: #6d4a12; }
.explain.method b { color: var(--brass); }
.explain[dir="rtl"] { font-family: var(--font-urdu); line-height: 2.1; }
.review-more { text-align: center; margin-top: 20px; }

/* -------------------------------------------------------- mistake book */
.mistake-subject { margin-bottom: 40px; }
.mistake-subject-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 0 0 12px;
  border-bottom: 3px solid var(--accent, var(--parade));
  margin-bottom: 20px;
}
.mistake-subject-head h3 { font-size: 26px; color: var(--accent, var(--parade)); }
.mistake-tally {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mistake-chapter + .mistake-chapter { margin-top: 26px; }
.mistake-chapter-head {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 13px;
}
.mistake-chapter-head h4 { font-size: 17px; }
.mistake-chapter-head h4[dir="rtl"] { font-family: var(--font-urdu); line-height: 1.9; }
.mistake-chapter-head > div { flex: 1; min-width: 180px; }
.mistake-chapter-head span:not(.chapter-no) {
  display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px;
}

/* ------------------------------------------------------------- history */
.history-list { display: grid; gap: 10px; }
.history-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 14px 18px;
}
.history-row .g {
  font-family: var(--font-display); font-size: 20px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--parade-wash); color: var(--parade);
}
.history-row .n { font-size: 15px; }
.history-row .n span { display: block; font-size: 12.5px; color: var(--ink-faint); }
.history-row .p { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .history-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .history-row .when { display: none; }
}

/* ------------------------------------------------------------- sign in */
.login-card { max-width: 430px; margin: 64px auto 90px; }
.login-card h2 { font-size: 27px; margin: 6px 0 6px; }
.login-card .btn.wide { margin-top: 6px; }
.login-error {
  background: var(--signal-wash); border-color: #e6c3c3; color: #7a1414;
}
@media (max-width: 620px) { .login-card { margin: 34px auto 60px; } }

/* ----------------------------------------------------------------- states */
.loading, .empty {
  padding: 70px 20px; text-align: center; color: var(--ink-faint);
}
.loading .spin {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 16px;
  border: 3px solid var(--rule); border-top-color: var(--parade);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.notice {
  background: var(--brass-wash); border: 1px solid #eccf95; color: #6d4a12;
  border-radius: var(--r-md); padding: 16px 18px; font-size: 14.5px;
  margin-bottom: 22px;
}
.notice b { display: block; font-family: var(--font-display); margin-bottom: 3px; }
.notice code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* ----------------------------------------------------------------- footer */
.site-foot {
  border-top: 1px solid var(--rule); margin-top: 40px; padding: 28px 0 40px;
  font-size: 13.5px; color: var(--ink-faint);
}
.site-foot .in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ print */
@media print {
  .masthead, .site-foot, .result-actions, .filters, .btn, .review-more { display: none !important; }
  body { background: #fff; }
  .result-hero, .stat, .chart-card, .review-item {
    box-shadow: none; border: 1px solid #bbb; break-inside: avoid;
  }
  .review-item { page-break-inside: avoid; }
  .mistake-subject { page-break-before: auto; }
  .mistake-chapter-head { page-break-after: avoid; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================== FIGURES ====
   The Intelligence subject draws its questions: the stem carries a block of
   inline SVG and every option is one <svg>. These classes come from the
   workbook generator (shapes-workbook/build_practice.py) so a figure looks
   the same on paper and on screen. No other subject uses them. */
.figrow {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 14px 0 2px;
}
.cell { display: flex; flex-direction: column; align-items: center; }
.box {
  width: 62px; height: 62px; border: 1.5px solid var(--rule-strong);
  border-radius: 4px; background: #fff;
}
.nobox { width: 62px; height: 62px; }
.qbox { background: var(--paper-deep); border-style: dashed; }
.box svg, .nobox svg, .gc svg { display: block; width: 100%; height: 100%; }
.lab { font-size: 11px; font-weight: 700; margin-top: 3px; color: var(--ink-soft); }
.sep {
  font-size: 16px; font-weight: 700; color: var(--parade);
  padding: 0 3px; align-self: center; margin-bottom: 14px;
}
.grid3 {
  display: grid; grid-template-columns: repeat(3, 62px); gap: 3px;
  border: 2px solid var(--ink); padding: 3px; background: var(--ink);
}
.gc { width: 62px; height: 62px; background: #fff; }
.rawcell { display: flex; align-items: center; }

/* A figure question's stem is a <div>, not a <p>, so the SVG can sit in it. */
.qtext p { margin: 0 0 4px; }
.qtext p:last-of-type { margin-bottom: 0; }

/* One figure per answer button. */
.option .opt-text > svg {
  display: block; width: 78px; height: 78px;
  border: 1.5px solid var(--rule-strong); border-radius: 4px; background: #fff;
}
.option[aria-checked="true"] .opt-text > svg { border-color: var(--parade); }

/* Review and mistakes: smaller, they sit inside a line of text. */
.review-item .rq { margin: 0 0 8px; }
.review-item .rq p { margin: 0 0 4px; }
.answer-line .val > svg {
  display: block; width: 54px; height: 54px; border: 1px solid var(--rule);
  border-radius: 4px; background: #fff;
}

@media (max-width: 520px) {
  .figrow { gap: 7px; }
  .box, .nobox, .gc { width: 54px; height: 54px; }
  .grid3 { grid-template-columns: repeat(3, 54px); }
  .option .opt-text > svg { width: 66px; height: 66px; }
}

/* Answer figures sit in a row, the way they are printed on a real paper,
   with the letter above each drawing. Text options are untouched. */
.options.figures {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
}
.options.figures .option {
  flex: 1 1 0; min-width: 104px; width: auto;
  flex-direction: column; gap: 8px;
  padding: 12px 8px; text-align: center;
}
.options.figures .option:hover,
[dir="rtl"] .options.figures .option:hover { transform: translateY(-2px); }
.options.figures .opt-text { display: flex; justify-content: center; }
.options.figures .key-flag { font-size: 11.5px; }

@media (max-width: 520px) {
  .options.figures { gap: 8px; }
  .options.figures .option { min-width: 92px; padding: 10px 6px; }
}