/* California RE Law Prep design system.
   Direction: California civic field manual. Warm bond paper, black ink,
   one budgeted state gold. Serif for reading, mono for records, sans for
   machinery. Square corners everywhere, achieved by writing no radius at
   all. Every color pair below is annotated with its WCAG contrast. */
:root{
  /* ---------- paper (surfaces) ---------- */
  --paper:#F2EEE3;       /* page field, warm bond paper */
  --sheet:#FCFAF4;       /* cards and plates, the sheet on the desk */
  --sheet-alt:#F4EEDF;   /* table heads, quiet wells, hover fills */

  /* ---------- ink (text) ---------- */
  --ink:#1D1A14;         /* primary text: 16.6:1 on sheet, 15.0:1 on paper */
  --ink-soft:#4D493D;    /* secondary text: 8.6:1 on sheet */
  --ink-faint:#6E695B;   /* eyebrows, fineprint: 5.3:1 sheet, 4.7:1 paper */

  /* ---------- rules (lines) ---------- */
  --rule:#C8C0AC;        /* standard hairline, decorative */
  --rule-soft:#DDD6C4;   /* interior hairlines, row separators */
  --rule-firm:#8A8370;   /* borders of interactive things: 3.6:1 sheet */

  /* ---------- california gold (one accent, three jobs only) ---------- */
  --gold:#8A6410;        /* gold as TEXT: 5.1:1 sheet, 4.6:1 gold-wash */
  --gold-bright:#AC7F12; /* gold as MARK or FILL: 4.8:1 on the dark bar */
  --gold-wash:#F6ECD1;   /* ground for flagged and in-progress states */

  /* ---------- verdict colors (results semantics) ---------- */
  --green:#2D5F3A;       /* correct, pass: 7.2:1 sheet, 6.3:1 green-wash */
  --green-wash:#E7EFE0;
  --red:#9E3B2E;         /* wrong, below the line: 6.5:1 sheet */
  --red-wash:#F7E8E1;

  /* ---------- dark chrome (exam topbar and submit dialog only) ---------- */
  --bar:#1D1A14;         /* same hex as ink, named separately on purpose */
  --bar-ink:#EFEAD9;     /* 14.4:1 on bar */
  --bar-soft:#B3AC99;    /* 7.7:1 on bar */
  --bar-rule:#4A4536;    /* clock box border on the bar */
  --warn:#E8B54A;        /* clock under 30 min: 9.2:1 on bar */
  /* no crit token: at five minutes the clock inverts to sheet-on-bar */

  /* ---------- type ---------- */
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* No webfont. Iowan Old Style covers Apple, Georgia covers the rest. */

  --fs-hero:clamp(34px,6vw,52px);
  --fs-h1:clamp(28px,4vw,34px);
  --fs-h2:22px;
  --fs-h3:18px;
  --fs-stem:clamp(18px,2.4vw,20px);
  --fs-guide:17px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-fine:13px;
  --fs-cite:12.5px;
  --fs-eyebrow:11px;
  --fs-clock:19px;

  /* ---------- space, 4px base ---------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ---------- rules and edges ---------- */
  --hair:1px solid var(--rule);
  --hair-soft:1px solid var(--rule-soft);
  --edge:1px solid var(--rule-firm);      /* interactive component boundary */
  --edge-ink:1px solid var(--ink);        /* plate boundary */
  --rule-heavy:3px double var(--ink);     /* the almanac double rule */

  /* ---------- layout ---------- */
  --w-wrap:1320px;
  --w-prose:84ch;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--w-wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:calc(var(--w-prose) + 40px)}
.hide{display:none !important}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.topbar :focus-visible,dialog :focus-visible{outline-color:var(--bar-ink)}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* skip link, visually hidden until focused */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--sheet);padding:10px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- shared primitives ---------- */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
/* engraved plate: ink frame with an inset hairline, certificate style.
   Reserved for the two exam picker plates and the results verdict. */
.plate{position:relative;background:var(--sheet);border:var(--edge-ink)}
.plate::after{content:"";position:absolute;inset:3px;border:var(--hair);pointer-events:none}
/* almanac dot leader row: label ... value */
.lead-row{display:flex;align-items:baseline;gap:var(--s2);padding:6px 0}
.lead-row .k{font-size:var(--fs-small);color:var(--ink-soft)}
.lead-row .fill{flex:1;border-bottom:1px dotted var(--rule-firm);transform:translateY(-4px)}
.lead-row .v{font-family:var(--mono);font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
a.lead-row{text-decoration:none}
a.lead-row:hover .k{color:var(--ink);text-decoration:underline}
/* recorder stamp chip */
.stamp{display:inline-block;padding:2px 8px;border:1px solid currentColor;
  font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.stamp.pass{color:var(--green);background:var(--green-wash)}
.stamp.fail{color:var(--red);background:var(--red-wash)}
.stamp.gold{color:var(--gold);background:var(--gold-wash)}
.stamp.mute{color:var(--ink-faint);background:var(--sheet)}
.stamp.plain{color:var(--ink-soft);background:var(--sheet);border-color:var(--rule-firm)}

/* two button voices: primary ink, quiet outline */
.btn{
  display:inline-block;text-decoration:none;text-align:center;
  border:var(--edge-ink);background:var(--ink);color:var(--sheet);
  padding:11px 22px;font-weight:600;font-size:15px;letter-spacing:.01em;line-height:1;
  transition:background .15s ease;
}
.btn:hover{background:#3A362C}
.btn:active{background:#000}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.quiet{background:transparent;color:var(--ink-soft);border:var(--edge)}
.btn.quiet:hover{background:var(--sheet-alt);color:var(--ink)}
.btn.sm{padding:7px 14px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink-soft);border:var(--edge)}
.btn.ghost:hover{background:var(--sheet-alt);color:var(--ink)}
.toggle{
  border:var(--edge);background:var(--sheet);color:var(--ink-soft);
  padding:8px 16px;font-size:14px;
}
.toggle[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}

/* ---------- site header ---------- */
.sitebar{border-bottom:var(--hair)}
.sitebar .inner{
  max-width:var(--w-wrap);margin:0 auto;padding:14px 20px;
  display:flex;align-items:baseline;gap:var(--s5);
}
.sitebar .brand{font-family:var(--serif);font-size:18px;color:var(--ink);text-decoration:none;white-space:nowrap}
.sitebar nav{display:flex;gap:var(--s4);overflow-x:auto;margin-left:auto}
.sitebar nav a{font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;padding-bottom:2px}
.sitebar nav a:hover{text-decoration:underline}
.sitebar nav a[aria-current="page"]{border-bottom:2px solid var(--ink)}

/* ---------- mastheads ---------- */
.masthead{border-top:var(--hair);padding:var(--s6) 0 var(--s5);border-bottom:var(--rule-heavy);margin-bottom:var(--s6)}
.masthead h1{
  font-family:var(--serif);font-size:var(--fs-h1);line-height:1.15;
  margin:10px 0 12px;font-weight:400;
}
.masthead.hero h1{font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.015em}
.masthead .sub{color:var(--ink-soft);margin:0;font-size:17px}
.crumb{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin:18px 0 0}
.crumb a{color:var(--ink-faint)}
.crumb span{margin:0 4px}

/* ---------- landing ---------- */
.landing{padding-bottom:var(--s7)}
#screen-start{padding:0 0 80px}
.kindcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5);margin-bottom:var(--s7)}
.kindcard{display:block;text-decoration:none;color:var(--ink);padding:var(--s5)}
.kindcard h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);margin:6px 0 6px}
.kindcard>p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.kindcard .leads{margin:0 0 18px}
.kindcard .go{display:inline-block;border:var(--edge-ink);background:var(--ink);color:var(--sheet);
  padding:11px 22px;font-weight:600;font-size:15px;line-height:1}
.kindcard:hover .go{background:#3A362C}
.landsec{margin-bottom:var(--s7)}
.landsec>h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 6px}
.landsec>.note{color:var(--ink-faint);font-size:var(--fs-fine);margin:0 0 18px}
/* trust block: statutory subdivisions */
.trust{max-width:none}
.trust ul{list-style:none;padding:0;margin:0}
.trust li{display:grid;grid-template-columns:2.5rem 1fr;margin:0 0 14px}
.trust .mark{font-family:var(--mono);font-size:var(--fs-cite);color:var(--ink-faint)}
.trust p{margin:0;font-size:15px;line-height:1.55}
/* specimen: one review item shown on the landing page */
.specimen{max-width:none}
.specimen-note{font-size:var(--fs-fine);color:var(--ink-faint);margin-top:10px}
.guidelinks{max-width:none}

/* ---------- hubs ---------- */
.hubpage{padding-bottom:var(--s7)}
.examlist{background:var(--sheet);border:var(--edge);margin-bottom:var(--s6)}
.exam-row{
  display:grid;grid-template-columns:56px 1fr auto auto;gap:var(--s4);align-items:center;
  padding:12px var(--s4);text-decoration:none;color:var(--ink);position:relative;
}
.exam-row+.exam-row{border-top:var(--hair-soft)}
.exam-row:hover{background:var(--sheet-alt)}
.exam-row:focus-visible{outline-offset:-2px}
.exam-row .no{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.exam-row .nm{font-size:16px}
.exam-row .meta{font-family:var(--mono);font-size:var(--fs-cite);color:var(--ink-faint)}
.exam-row.inprogress::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;
  background:var(--gold-bright);clip-path:polygon(0 0,100% 0,100% 100%)}
.storage-note{color:var(--ink-faint);font-size:var(--fs-fine);margin:-18px 0 var(--s6)}
.factrow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.factrow b{display:block;font-family:var(--serif);font-size:28px;font-weight:400}
.factrow span{font-size:var(--fs-fine);color:var(--ink-soft)}
.hubcopy{max-width:none}
.hubcopy h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);margin:var(--s6) 0 8px}
.hubcopy p{margin:0 0 12px;font-size:15px;color:var(--ink-soft)}

/* ---------- start screen (exam pages) ---------- */
.blueprint{background:var(--sheet);border:var(--edge);padding:26px 28px;margin-bottom:28px}
.blueprint h2{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 4px}
.blueprint .note{color:var(--ink-faint);font-size:13.5px;margin:0 0 20px}
.bp-row{display:grid;grid-template-columns:1fr 62px 44px;gap:14px;align-items:center;padding:7px 0}
.bp-row+.bp-row{border-top:var(--hair-soft)}
.bp-name{font-size:14.5px}
.bp-bar{height:9px;background:var(--sheet-alt);position:relative;border:var(--hair-soft)}
.bp-bar span{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.bp-pct{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-align:right}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-bottom:26px}
.opt-card{background:var(--sheet);border:var(--edge);padding:22px 24px}
.opt-card h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 6px}
.opt-card p{margin:0 0 16px;font-size:14px;color:var(--ink-soft);min-height:60px}
.opt-card select{width:100%;padding:9px;border:var(--edge);margin-bottom:12px;font-family:inherit;font-size:14px;background:var(--sheet);color:var(--ink)}
.toggle-row{display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.resume-banner{
  background:var(--gold-wash);border:1px solid var(--gold-bright);border-left-width:4px;
  padding:16px 20px;margin-bottom:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.resume-banner p{margin:0;flex:1;min-width:220px;font-size:14.5px}
.history{background:var(--sheet);border:var(--edge);padding:22px 26px;margin-bottom:26px}
.history h2{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 14px}
.hist-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;border-top:var(--hair-soft)}
.hist-row:first-of-type{border-top:0}
.hist-row .sc{font-family:var(--mono)}
.fineprint{color:var(--ink-faint);font-size:var(--fs-fine)}
.fineprint a{color:var(--ink-faint)}

/* ---------- exam chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--bar);color:var(--bar-ink);border-bottom:1px solid #000}
.topbar .inner{
  max-width:var(--w-wrap);margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
}
.topbar .title{font-family:var(--serif);font-size:16px;letter-spacing:.01em;white-space:nowrap;color:var(--bar-ink)}
.topbar .spacer{flex:1}
.meter{font-family:var(--mono);font-size:13px;color:var(--bar-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.clock{
  font-family:var(--mono);font-size:var(--fs-clock);font-variant-numeric:tabular-nums;
  padding:3px 12px;border:1px solid var(--bar-rule);color:var(--bar-ink);
}
.clock.warn{color:var(--warn);border-color:var(--warn)}
.clock.crit{background:var(--sheet);color:var(--ink);border-color:var(--sheet)}
.topbar .btn{padding:8px 16px;font-size:14px;background:var(--sheet);color:var(--ink);border:1px solid var(--sheet)}
.topbar .btn:hover{background:var(--sheet-alt)}
.topbar .btn.quiet{background:transparent;color:var(--bar-soft);border:1px solid #6E695B}
.topbar .btn.quiet:hover{background:#2A2620;color:var(--bar-ink)}
.progress-strip{height:3px;background:#3A352A}
.progress-strip span{display:block;height:100%;background:var(--gold-bright);width:0;transition:width .2s ease}

/* ---------- exam layout ---------- */
.exam-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:30px;padding:32px 0 60px}
@media (max-width:920px){.exam-grid{grid-template-columns:1fr}}
.qcard{background:var(--sheet);border:var(--edge);padding:0}
.qhead{
  display:flex;align-items:center;gap:14px;padding:12px var(--s5);
  border-bottom:var(--hair-soft);background:var(--sheet-alt);flex-wrap:wrap;
}
.qnum{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.qarea{font-size:12.5px;color:var(--ink-soft)}
.qhead .spacer{flex:1}
.flagbtn{border:var(--edge);background:var(--sheet);color:var(--ink-soft);padding:5px 13px;font-size:13px}
.flagbtn[aria-pressed="true"]{background:var(--gold-wash);border-color:var(--gold-bright);color:var(--gold)}
.qbody{padding:var(--s6) var(--s5) 26px}
@media (max-width:560px){.qbody{padding:20px var(--s4)}}
.qtext{font-family:var(--serif);font-size:var(--fs-stem);line-height:1.5;margin:0 0 var(--s5)}
.choices{display:flex;flex-direction:column;gap:0;border-top:var(--hair-soft)}
.choice{
  display:flex;gap:15px;align-items:flex-start;width:100%;text-align:left;
  padding:14px;background:transparent;border:0;border-bottom:var(--hair-soft);
  font-size:16px;line-height:1.5;color:var(--ink);min-height:48px;
}
@media (hover:hover){.choice:hover{background:var(--sheet-alt)}}
.choice:active{background:var(--rule-soft)}
.choice .ltr{
  flex:none;width:26px;height:26px;border:var(--edge);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--ink-soft);
  margin-top:1px;
}
.choice[aria-checked="true"]{background:var(--sheet-alt);box-shadow:inset 3px 0 0 var(--ink)}
.choice[aria-checked="true"] .ltr{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.choice[aria-checked="true"] .txt{font-weight:600}
.choice:focus-visible{outline-offset:-2px}
.qfoot{display:flex;gap:12px;align-items:center;padding:var(--s4) var(--s5);border-top:var(--hair-soft);flex-wrap:wrap}
.qfoot .spacer{flex:1}

/* ---------- navigator ---------- */
.navpanel{background:var(--sheet);border:var(--edge);padding:var(--s4);align-self:start;position:sticky;top:78px}
.navpanel h3{font-family:var(--serif);font-weight:400;font-size:16px;margin:0 0 4px}
.navlegend{display:flex;gap:13px;flex-wrap:wrap;margin:10px 0 14px;font-size:11.5px;color:var(--ink-soft)}
.navlegend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border:var(--hair)}
.navlegend i.lg-answered{background:var(--ink);border-color:var(--ink)}
.navlegend i.lg-flagged{background:var(--gold-wash);border-color:var(--gold-bright)}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
@media (max-width:920px){.grid{grid-template-columns:repeat(15,1fr)}.navpanel{position:static}}
@media (max-width:560px){.grid{grid-template-columns:repeat(8,1fr);gap:3px}}
.cell{
  aspect-ratio:1;border:var(--hair);background:var(--sheet);position:relative;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);padding:0;
  display:grid;place-items:center;
}
.cell.answered{background:var(--ink);border-color:var(--ink);color:var(--sheet);font-weight:600}
.cell.flagged{background:var(--gold-wash);border-color:var(--gold-bright);color:var(--ink)}
.cell.answered.flagged{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.cell.flagged::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;
  background:var(--gold-bright);clip-path:polygon(0 0,100% 0,100% 100%)}
.cell.current{outline:2px solid var(--ink);outline-offset:0;font-weight:700}
.cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- results ---------- */
#screen-results{padding:34px 0 80px}
.verdict{padding:var(--s6);margin-bottom:26px}
.verdict-top{display:flex;gap:var(--s6);align-items:flex-start;flex-wrap:wrap}
.scorebox{flex:none}
.scorebox .big{font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:-.02em}
.scorebox .frac{font-family:var(--mono);font-size:14px;color:var(--ink-soft);margin-top:6px;font-variant-numeric:tabular-nums}
.verdict-copy{flex:1;min-width:250px}
.verdict-copy h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:8px 0 8px}
.verdict-copy p{margin:0 0 10px;color:var(--ink-soft)}
.verdict-copy .eyebrow{display:block;margin-bottom:8px}
.passline{margin-top:22px;padding-top:20px;border-top:var(--hair-soft)}
.passline .track{height:26px;background:var(--sheet-alt);border:var(--hair);position:relative}
.passline .fill{position:absolute;top:0;bottom:0;left:0;background:var(--ink)}
.passline .cut{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--gold-bright)}
.passline .cutlbl{position:absolute;top:-25px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--ink)}
.ledger-note{
  display:flex;gap:12px;align-items:center;background:var(--sheet-alt);border:var(--hair-soft);
  padding:10px var(--s4);margin-bottom:26px;font-size:14px;color:var(--ink-soft);
}
.card{background:var(--sheet);border:var(--edge);padding:26px 30px;margin-bottom:26px}
.card h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 5px}
.card .note{color:var(--ink-faint);font-size:13.5px;margin:0 0 22px}
.area-row{display:grid;grid-template-columns:190px 1fr 84px;gap:var(--s4);align-items:center;padding:11px 0}
.area-row+.area-row{border-top:var(--hair-soft)}
@media (max-width:680px){.area-row{grid-template-columns:1fr;gap:6px}}
.area-name{font-size:14.5px;line-height:1.35}
.area-name em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
.dual{position:relative;height:22px;background:var(--sheet-alt);border:var(--hair-soft)}
.dual .ghost{position:absolute;top:0;bottom:0;left:0;background:var(--rule-soft)}
.dual .score{position:absolute;top:3px;bottom:3px;left:0;background:var(--ink)}
.dual .score.low{background:var(--red)}
.dual .score.mid{background:var(--gold-bright)}
.dual .thresh{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-soft)}
.area-score{font-family:var(--mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.area-score b{font-weight:600}
.area-score small{display:block;color:var(--ink-faint);font-size:11px}
.prio-item{display:flex;gap:16px;padding:16px 0;border-top:var(--hair-soft)}
.prio-item:first-child{border-top:0}
.prio-rank{
  flex:none;width:28px;height:28px;background:var(--ink);color:var(--sheet);font-family:var(--mono);
  font-size:13px;display:grid;place-items:center;
}
.prio-body h4{margin:0 0 4px;font-size:17px;font-family:var(--serif);font-weight:400}
.prio-body p{margin:0 0 6px;font-size:14px;color:var(--ink-soft)}
.prio-body .topics{font-size:13px;color:var(--ink-faint)}
.prio-body .topics b{color:var(--ink-soft);font-weight:600}
.prio-body .glink{font-size:13px}
.prio-body .glink a{color:var(--ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.review-item{border-top:var(--hair);padding:22px 0;display:grid;grid-template-columns:104px 1fr;gap:var(--s5)}
@media (max-width:680px){.review-item{grid-template-columns:1fr;gap:8px}}
.rail{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-faint);padding-top:3px}
.rail .rq{color:var(--ink);font-weight:600;font-size:12px;display:block;margin-bottom:5px}
.rail .verdict-tag{display:inline-block;padding:1px 6px;border:1px solid currentColor;margin-bottom:6px;letter-spacing:.05em}
.rail .verdict-tag.ok{color:var(--green);background:var(--green-wash)}
.rail .verdict-tag.no{color:var(--red);background:var(--red-wash)}
.rail .verdict-tag.skip{color:var(--ink-faint);background:var(--sheet-alt)}
.rail .cite{display:block;margin-top:7px;padding-top:7px;border-top:var(--hair-soft);color:var(--ink-soft);font-size:var(--fs-cite)}
.rail .vlink{display:block;margin-top:5px;font-family:var(--sans);font-size:12px}
.rail .vlink a{color:var(--ink-soft);text-decoration:underline;text-decoration-style:dotted}
.rev-q{font-family:var(--serif);font-size:17px;line-height:1.45;margin:0 0 14px}
.rev-opt{display:flex;gap:11px;padding:7px 10px;font-size:14.5px;line-height:1.45;border-left:3px solid transparent}
.rev-opt .l{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none;padding-top:2px}
.rev-opt.key{background:var(--green-wash);border-left-color:var(--green)}
.rev-opt.picked{background:var(--red-wash);border-left-color:var(--red)}
.rev-opt.key.picked{background:var(--green-wash);border-left-color:var(--green)}
.rev-exp{margin-top:13px;padding:14px 16px;background:var(--sheet-alt);border-left:3px solid var(--ink);font-size:14.5px;line-height:1.6}
.rev-exp b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px;font-weight:600}
.account-teaser{background:var(--sheet-alt);border:var(--hair-soft);padding:14px 18px;margin:20px 0 0}
.account-teaser h3{font-family:var(--serif);font-weight:400;font-size:16px;margin:0 0 4px}
.account-teaser p{margin:0;font-size:14px;color:var(--ink-soft)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.review-actions{margin-top:26px;padding-top:22px;border-top:var(--hair-soft)}
.empty{color:var(--ink-faint);font-size:14.5px;padding:26px 0}
dialog{border:1px solid #000;background:var(--bar);color:var(--bar-ink);padding:0;max-width:460px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(29,26,20,.6)}
.dlg{padding:26px 28px}
.dlg h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 10px;color:var(--bar-ink)}
.dlg p{margin:0 0 8px;font-size:15px;color:var(--bar-soft)}
.dlg .actions{margin-top:20px}
.dlg .btn{background:var(--sheet);color:var(--ink);border:1px solid var(--sheet)}
.dlg .btn.quiet{background:transparent;color:var(--bar-soft);border:1px solid #6E695B}
.dlg .btn.quiet:hover{background:#2A2620;color:var(--bar-ink)}

/* ---------- guide pages ---------- */
.guide{padding-bottom:var(--s8)}
.guide .prose,.page .prose{max-width:none}
.prose{font-family:var(--serif);font-size:var(--fs-guide);line-height:1.65}
.prose p{margin:0 0 16px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:var(--s7) 0 var(--s3);padding-bottom:8px;border-bottom:var(--hair)}
.prose h2 .folio{font-family:var(--mono);font-size:12px;color:var(--ink-faint);display:block;letter-spacing:.08em;margin-bottom:4px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:var(--s5) 0 var(--s2)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:6px}
.excerpt{background:var(--sheet);border:var(--hair);padding:var(--s4) var(--s5);margin:0 0 18px}
.excerpt .cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:8px}
.excerpt p{font-size:16px;line-height:1.6;margin:0}
.onexam{background:var(--sheet-alt);border-left:3px solid var(--ink);padding:12px 16px;margin:0 0 18px;font-family:var(--sans);font-size:14.5px;line-height:1.6}
.onexam b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px}
.gtable-wrap{overflow-x:auto;margin:0 0 18px}
.gtable{border-collapse:collapse;width:100%;background:var(--sheet);border:var(--hair);font-family:var(--sans)}
.gtable th{background:var(--sheet-alt);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:8px 12px;font-weight:600}
.gtable td{font-size:14.5px;padding:8px 12px;border-top:var(--hair-soft)}
.gtable td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.gsources{margin-top:var(--s7);padding-top:var(--s4);border-top:var(--hair)}
.gsources h2{border:0;margin-top:0}
.gsources ul{list-style:none;padding:0;font-family:var(--mono);font-size:var(--fs-cite);color:var(--ink-soft)}
.gpager{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s4);border-top:var(--rule-heavy);font-size:14px}
.gpager a{color:var(--ink)}

/* ---------- footer ---------- */
.sitefoot{border-top:var(--rule-heavy);margin-top:var(--s8);padding:var(--s6) 0 var(--s7)}
.sitefoot .inner{max-width:var(--w-wrap);margin:0 auto;padding:0 20px}
.sitefoot .foot-brand{font-family:var(--serif);font-size:16px;margin:0 0 8px}
.sitefoot p{font-size:var(--fs-small);color:var(--ink-soft);margin:0 0 12px}
.foot-links{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--ink)}
.donate-link{text-decoration-style:dotted}
.sitefoot .fineprint{border-top:var(--hair);padding-top:14px;margin-top:6px;font-size:var(--fs-fine);color:var(--ink-faint)}

/* ---------- ad slots: quarantined notices, hidden until filled ---------- */
.ad-slot{background:var(--sheet);border:var(--hair);position:relative;margin:var(--s6) 0}
.ad-slot::before{content:"Advertisement";position:absolute;top:6px;left:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.ad-slot[hidden]{display:none}

/* ---------- print: the results page as a clean study document ---------- */
@media print{
  .sitebar,.topbar,.navpanel,.filters,.actions,.review-actions,.sitefoot,
  .ad-slot,.ledger-note,.account-teaser,dialog,.btn{display:none !important}
  body{background:#fff;color:#000}
  .plate,.card{border:1px solid #000;background:#fff}
  .plate::after{display:none}
  .review-item{break-inside:avoid}
  .rail .cite{color:#000}
  .rev-opt.key{background:#fff;border-left:3px solid #000;font-weight:600}
  .rev-opt.picked{background:#fff;border-left:3px dotted #000}
  .rev-exp{background:#fff;border:1px solid #000;border-left:3px solid #000}
}

/* ---------- landing FAQ ---------- */
.faq details{background:var(--sheet);border:var(--hair);margin-bottom:8px}
.faq summary{cursor:pointer;padding:12px 16px;font-size:15px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);margin-right:10px;color:var(--ink-faint)}
.faq details[open] summary::before{content:"\2212"}
.faq details p{margin:0;padding:0 16px 14px 34px;font-size:14.5px;color:var(--ink-soft)}
.kindcard-plate .kindcard{padding:var(--s5)}
.donate-line a{color:var(--ink-faint)}

/* On narrow screens let headings wrap naturally instead of forcing breaks */
@media (max-width:560px){.masthead h1 br{display:none}}

/* ---------- phone touch sizing ----------
   At 375px an 8-column navigator gives 35px cells, under the 40px floor the
   design calls for. Seven columns plus a tighter panel gutter clears it, and
   the flag chip grows to a comfortable target at the same time. */
@media (max-width:560px){
  .navpanel{padding:12px}
  .grid{grid-template-columns:repeat(7,1fr)}
  .flagbtn{padding:9px 14px}
  .qhead{padding:10px var(--s4)}
}

/* During a live exam the site chrome steps aside, leaving only the exam's
   own topbar. It returns on the start and results screens. */
body.exam-live .sitebar,body.exam-live .sitefoot{display:none}
.studyfrom{margin-top:var(--s7)}
.studyfrom h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);margin:0 0 12px}

/* ---------- landing: two reference columns side by side ---------- */
.landsplit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.landsplit>.landsec{margin-bottom:0}
@media (max-width:900px){
  .landsplit{grid-template-columns:1fr;gap:0}
  .landsplit>.landsec{margin-bottom:var(--s7)}
}