/* Self-hosted so the browser never has to reach fonts.googleapis.com (a
   render-blocking stylesheet) and then fonts.gstatic.com for the file itself.
   One variable file covers weights 400-700.

   unicode-range limits it to the Malayalam block, so Latin text never waits on
   this download - it renders immediately in the system face. */
@font-face {
  font-family: 'Noto Sans Malayalam';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/noto-sans-malayalam-v29.woff2') format('woff2');
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0D00-0D7F, U+1CDA,
                 U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}

/* PSCQuiz.com — hand-written CSS. No build step, no framework.
   One webfont (Malayalam). Latin and mono use the system stack, which costs
   nothing to download and renders on the first paint. */

:root {
  color-scheme: light;

  --font-ml: 'Noto Sans Malayalam', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --navy: #0d3b66;
  --navy-deep: #082a4a;
  --gold: #e8a33d;
  --gold-deep: #96601a;
  --correct: #1c7a45;
  --correct-bg: #e8f5ec;
  --wrong: #bd3a2c;
  --wrong-bg: #fcecea;

  --paper: #faf8f4;
  --surface: #ffffff;
  --sunk: #f1eee7;
  --ink: #16181c;
  --ink-soft: #4d5661;
  --ink-faint: #626b76;
  --rule: #e2ddd2;
  --rule-strong: #c9c2b3;
  --link: var(--navy);
  --shadow: 0 1px 2px rgba(20, 24, 28, .04);
  --shadow-lift: 0 6px 20px -8px rgba(20, 24, 28, .18);
}

html.dark {
  color-scheme: dark;

  --paper: #131316;
  --surface: #1a1a1f;
  --sunk: #212127;
  --ink: #f0eee9;
  --ink-soft: #a8a49c;
  --ink-faint: #97938b;
  --rule: #2c2c33;
  --rule-strong: #3d3d45;
  --correct: #4ab776;
  --correct-bg: #14301f;
  --wrong: #e2705f;
  --wrong-bg: #331915;
  --link: #7fb2e0;
  --shadow: none;
  --shadow-lift: 0 6px 20px -8px rgba(0, 0, 0, .5);
}

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

/* `hidden` is only display:none in the UA stylesheet, so any author rule
   (.row { display:flex }) beats it and JS row-hiding silently stops working. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ml);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }

::selection { background: var(--gold); color: #1a1200; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
html.dark :focus-visible { outline-color: var(--gold); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 18px; }
@media (min-width: 480px) { .wrap { padding: 0 24px; } }
@media (min-width: 900px) { .wrap { padding: 0 32px; } }
.wrap.tight { max-width: 720px; }
.wrap.mid { max-width: 960px; }

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.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;
}
.stack > * + * { margin-top: 1rem; }

/* Latin runs inside Malayalam text look better in the UI face. */
.ui { font-family: var(--font-ui); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-bar { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 1rem; }

.logo {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--font-ui); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.03em;
}
.logo .accent { color: var(--gold-deep); }
html.dark .logo .accent { color: var(--gold); }
.logo .dot { color: var(--gold); }

.nav-desktop { display: none; align-items: center; gap: 2px; }
@media (min-width: 800px) { .nav-desktop { display: flex; } }
.nav-desktop a, .nav-mobile a {
  padding: 7px 11px; border-radius: 6px;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
  color: var(--ink-soft); transition: color .12s, background .12s;
}
.nav-desktop a:hover, .nav-mobile a:hover { color: var(--ink); background: var(--sunk); }
.nav-desktop a[aria-current="page"] { color: var(--ink); font-weight: 650; }

/* Legal links promoted into the header for the AdSense review. Quieter and
   tighter than the real navigation so they read as secondary, and small enough
   that seven items still fit beside the logo at the 800px breakpoint. */
.nav-desktop .nav-quiet, .nav-mobile .nav-quiet {
  font-size: .8rem; color: var(--ink-faint); padding-inline: 8px;
}
.nav-split {
  width: 1px; height: 16px; margin: 0 6px;
  background: var(--rule-strong);
}
.nav-mobile .nav-split {
  width: auto; height: 1px; margin: 8px 11px;
}

.header-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-soft); font-size: 1rem; cursor: pointer;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--sunk); color: var(--ink); }
#nav-toggle { display: inline-flex; }
@media (min-width: 800px) { #nav-toggle { display: none; } }

.nav-mobile { display: none; flex-direction: column; padding: 6px 0 12px; border-top: 1px solid var(--rule); }
.nav-mobile.open { display: flex; }
@media (min-width: 800px) { .nav-mobile.open { display: none; } }
.nav-mobile a { padding: 10px 11px; font-size: .95rem; }

/* ─── Masthead ───────────────────────────────────────────────────────── */

.masthead { padding-block: 1.6rem 1.35rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .masthead { padding-block: 2.5rem 1.75rem; } }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }

.masthead h1 {
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  font-weight: 700; max-width: 15ch;
}
.masthead h1 .accent { color: var(--navy); }
html.dark .masthead h1 .accent { color: var(--gold); }
.masthead p { margin-top: .5rem; color: var(--ink-soft); max-width: 46ch; font-size: .95rem; }

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .7rem;
}
.kicker::before { content: ''; width: 22px; height: 2px; background: var(--gold); }

.streak {
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint);
  white-space: nowrap; padding-bottom: .3rem;
}
.streak b { color: var(--ink); font-size: 1.35rem; font-weight: 700; display: block; line-height: 1.1; }
.streak.live b { color: var(--correct); }

/* ─── Today ──────────────────────────────────────────────────────────── */

.today { padding-block: 1.5rem 2rem; }
.today-card {
  display: block; position: relative;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 1.5rem; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.today-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gold); border-radius: 4px 0 0 4px;
}
.today-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
@media (min-width: 640px) { .today-card { padding: 1.75rem 2rem; } }

.today-head {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7rem;
  white-space: nowrap; overflow: hidden;
}
.today-head .badge { flex-shrink: 0; }
.today-head .done {
  margin-left: auto; color: var(--correct); font-weight: 700;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.today-card h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; }
.today-peek {
  margin-top: .9rem; padding-left: .9rem; border-left: 2px solid var(--rule-strong);
  color: var(--ink-soft); font-size: .97rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.today-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem; margin-top: 1.1rem;
}
.today-foot .btn { flex: 1; min-width: 11rem; }
@media (min-width: 560px) { .today-foot .btn { flex: 0 0 auto; } }
.today-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); }

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.25rem; border: 1px solid transparent; border-radius: 4px;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 650;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-gold { background: var(--gold); color: #1e1400; }
.btn-gold:hover { background: var(--gold-deep); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--navy); color: #fff; }
.btn-quiet { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-quiet:hover { background: var(--sunk); }
.btn-block { width: 100%; }
/* Quieten rather than fade: a 45%-opacity dark button reads as a grey slab. */
.btn:disabled {
  background: var(--sunk); color: var(--ink-faint);
  border-color: var(--rule); cursor: not-allowed;
}

/* ─── Quiz index (list, not cards) ───────────────────────────────────── */

.list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--ink);
}
.list-head h2 { font-size: 1rem; font-weight: 700; }
.list-head a { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--link); }
.list-head a:hover { text-decoration: underline; }

.quiz-list { list-style: none; margin: 0; padding: 0; }
.quiz-list li + li { border-top: 1px solid var(--rule); }

/* Two lines on a phone: title + meta, then the question preview.
   The date rail is desktop-only because the title is already the date. */
.row { display: block; padding: .85rem .25rem; transition: background .12s; }
.row:hover { background: var(--sunk); }
.row .top { display: flex; align-items: baseline; gap: .5rem; }
.row h3 { font-size: 1rem; font-weight: 650; }
.row:hover h3 { color: var(--link); }
.row .count {
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-faint);
  white-space: nowrap; margin-left: auto;
}
.row .peek {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink-soft); font-size: .9rem; line-height: 1.55; margin-top: .15rem;
}
.row .day { display: none; }
.row .done {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  color: var(--correct); border: 1px solid currentColor; border-radius: 3px;
  padding: 0 .3rem; letter-spacing: .06em; flex-shrink: 0;
}

@media (min-width: 640px) {
  .row { display: grid; grid-template-columns: 4rem 1fr; gap: .1rem 1.1rem; padding: .95rem .25rem; }
  .row .day {
    display: block; grid-row: span 2; align-self: center;
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    color: var(--ink-faint); letter-spacing: .07em; text-transform: uppercase;
  }
  .row .day b { display: block; font-size: 1.4rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.05; }
  .row .peek { margin-top: 0; }
}

@media (max-width: 639px) {
  .quiz-list {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
  }
  .quiz-list li + li { border-top: 1px solid var(--rule); }
  .row { padding: .8rem .85rem; }
  .row:first-child { border-radius: 10px 10px 0 0; }
  .list-head { padding: 0 .15rem .6rem; }
}

/* ─── Month sections ─────────────────────────────────────────────────── */

.month-group { margin-bottom: 2rem; }
@media (min-width: 640px) { .month-group { margin-bottom: 2.75rem; } }
.month-group > h2 {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 .15rem .55rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: .7rem;
}
@media (min-width: 640px) { .month-group > h2 { margin-bottom: 0; padding-inline: 0; } }

/* ─── Page furniture ─────────────────────────────────────────────────── */

.page { padding-block: 1.5rem 3rem; }
@media (min-width: 640px) { .page { padding-block: 2.25rem 3.5rem; } }
.section { padding-block: 1.9rem; }
@media (min-width: 640px) { .section { padding-block: 2.5rem; } }
.section + .section { padding-block-start: 0; }

.breadcrumbs {
  font-family: var(--font-ui); font-size: .78rem; color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.breadcrumbs a:hover { color: var(--link); text-decoration: underline; }
.breadcrumbs .sep { margin: 0 .4rem; opacity: .5; }

.page-title { font-size: clamp(1.35rem, 5.4vw, 2.3rem); font-weight: 700; margin-bottom: .7rem; }
.page-title .accent { color: var(--navy); }
html.dark .page-title .accent { color: var(--gold); }

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint);
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .5rem; border-radius: 3px;
  background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
html.dark .badge { background: var(--gold); color: #1e1400; }

/* The page's share card, reused as a header image. width/height on the tag plus
   aspect-ratio here mean the box is reserved before the file lands, so nothing
   reflows. It is lazy-loaded: it must never become the LCP element. */
.page-card {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  margin: 1.5rem 0 .25rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--sunk);
}
.prose .page-card { margin: 1.25rem 0 2rem; }
/* The card is drawn on the light paper background; at full brightness it glares
   on a dark page. */
html.dark .page-card { opacity: .82; border-color: var(--rule-strong); }

/* The DMCA page is the only thing using this, but a blockquote with no author
   rule falls back to the UA's plain 40px indent, which reads as broken. */
.prose blockquote {
  margin: 1.25rem 0; padding: .85rem 1.1rem;
  background: var(--sunk); border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}
.prose blockquote p { margin: 0; }

.intro-box {
  margin: 1.1rem 0; padding: .85rem 1rem;
  background: var(--sunk); border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0; font-size: 1rem; line-height: 1.75;
}

/* ─── Quiz player (unchanged in spirit — this part already works) ────── */

.quiz-shell {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 6px; overflow: hidden; box-shadow: var(--shadow);
}
.progress-track { height: 4px; background: var(--sunk); }
.progress-fill { height: 100%; width: 0; background: var(--gold); transition: width .45s ease-out; }

.quiz-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem; background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-size: .78rem;
}
html.dark .quiz-status { background: var(--navy-deep); }
.quiz-status .dim { color: rgba(255, 255, 255, .68); }
.quiz-status strong { color: #fff; }

.quiz-body { padding: 1.1rem .95rem; }
@media (min-width: 640px) { .quiz-body { padding: 1.6rem 1.75rem; } }
@media (min-width: 420px) { .quiz-body { padding: 1.25rem; } }

.quiz-question {
  font-size: 1.05rem; font-weight: 600; line-height: 1.7; margin-bottom: 1.3rem;
  padding-left: .9rem; border-left: 3px solid var(--gold);
}

.options { display: flex; flex-direction: column; gap: .6rem; }
.quiz-option {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 50px; padding: .75rem .9rem; text-align: left;
  border: 1px solid var(--rule-strong); border-radius: 5px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-ml); font-size: .95rem; line-height: 1.55;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--navy); background: var(--sunk); }
.quiz-option:disabled { cursor: default; }
.option-bubble {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .78rem;
  color: var(--ink-faint); transition: all .12s;
}
.quiz-option.selected .option-bubble { background: var(--navy); border-color: var(--navy); color: #fff; }
.quiz-option.correct { border-color: var(--correct); background: var(--correct-bg); }
.quiz-option.correct .option-bubble { background: var(--correct); border-color: var(--correct); color: #fff; }
.quiz-option.wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.quiz-option.wrong .option-bubble { background: var(--wrong); border-color: var(--wrong); color: #fff; }

.verdict { margin-top: .9rem; font-size: .9rem; font-weight: 650; }
.verdict.ok { color: var(--correct); }
.verdict.no { color: var(--wrong); }

.explanation {
  margin-top: .7rem; padding: .8rem .9rem; border-radius: 4px;
  background: var(--sunk); color: var(--ink-soft); font-size: .9rem; line-height: 1.7;
}
.explanation strong { color: var(--ink); }

.quiz-hint {
  padding: 0 1.1rem 1rem; text-align: center;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint);
}

.score-wrap { padding: 2.25rem 1.5rem 1rem; text-align: center; }
.score-ring {
  width: 130px; height: 130px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--sunk) 0);
}
.score-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.score-ring .score-num {
  position: relative; font-family: var(--font-mono);
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em;
}
.score-wrap h2 { font-size: 1.3rem; margin-bottom: .35rem; }
.quiz-actions { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem 1.5rem; }
@media (min-width: 520px) { .quiz-actions { flex-direction: row; } .quiz-actions > * { flex: 1; } }

/* ─── Question list + answer key ─────────────────────────────────────── */

.question-list, .answer-key, .study-notes { margin-top: 2.75rem; }
.question-list > h2, .study-notes > h2 {
  font-size: 1.15rem; font-weight: 700;
  padding-bottom: .6rem; border-bottom: 2px solid var(--ink); margin-bottom: .7rem;
}
.question-list > p { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1.4rem; }

.qa-item { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.qa-item h3 { font-size: 1rem; font-weight: 600; line-height: 1.7; margin-bottom: .8rem; }
.qa-item h3 .qnum { font-family: var(--font-mono); color: var(--ink-faint); margin-right: .5rem; }
.qa-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
@media (min-width: 620px) { .qa-options { grid-template-columns: 1fr 1fr; gap: .35rem .9rem; } }
.qa-options li {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .4rem .55rem; border-radius: 4px; background: var(--sunk);
  font-size: .92rem; line-height: 1.55;
}
.qa-options li .letter {
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem;
  color: var(--ink-faint); flex-shrink: 0;
}

.answer-key > details { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
.answer-key > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem .95rem; cursor: pointer; list-style: none; font-size: .98rem;
}
.answer-key > details > summary::-webkit-details-marker { display: none; }
.answer-key > details > summary::after {
  content: '+'; font-family: var(--font-mono); font-size: 1.3rem;
  color: var(--ink-faint); flex-shrink: 0; line-height: 1;
}
.answer-key > details[open] > summary::after { content: '−'; }
.answer-key > details[open] > summary { border-bottom: 1px solid var(--rule); }
.answer-key > details > summary .muted { font-size: .78rem; font-weight: 400; }
.answer-key-body { padding: .4rem .95rem .9rem; }
@media (min-width: 480px) { .answer-key-body { padding: .5rem 1.15rem 1rem; } }

.key-item { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.key-item:last-child { border-bottom: 0; }
.key-item .qnum { font-family: var(--font-mono); color: var(--ink-faint); margin-right: .3rem; }
.qa-answer { font-size: .95rem; font-weight: 650; color: var(--correct); margin-bottom: .35rem; }
.qa-explanation { font-size: .9rem; line-height: 1.75; color: var(--ink-soft); }
.qa-explanation strong { color: var(--ink); }

/* ─── FAQ ────────────────────────────────────────────────────────────── */

.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-weight: 600; font-size: .98rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); color: var(--ink-faint); font-size: 1.2rem; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding-bottom: 1.1rem; color: var(--ink-soft); font-size: .94rem; line-height: 1.75; }

/* ─── Search ─────────────────────────────────────────────────────────── */

.search-field { position: relative; margin-bottom: 1.25rem; }
.search-field input {
  width: 100%; padding: .85rem 1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 5px;
  font-family: var(--font-ml); font-size: 1rem;
}
.search-field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 59, 102, .12); }
html.dark .search-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 163, 61, .16); }

.result-count { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-faint); margin-bottom: .5rem; }
.result-row {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline;
  padding: .95rem .25rem; border-bottom: 1px solid var(--rule); transition: background .12s;
}
.result-row:hover { background: var(--sunk); }
.result-row h2 { font-size: 1rem; font-weight: 650; }
.result-row:hover h2 { color: var(--link); }
.result-row p {
  color: var(--ink-soft); font-size: .88rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.result-row .when { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-faint); grid-row: span 2; }

.empty {
  padding: 3rem 1.5rem; text-align: center; color: var(--ink-soft);
  border: 1px dashed var(--rule-strong); border-radius: 6px;
}

/* ─── Prose ──────────────────────────────────────────────────────────── */

.prose { font-size: 1.02rem; line-height: 1.8; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.15rem; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.35rem); color: var(--ink); margin-bottom: .3rem; }
.prose h2 {
  font-size: 1.3rem; color: var(--ink); margin-top: 2.5rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.prose h3 { font-size: 1.08rem; color: var(--ink); margin-top: 1.9rem; }
.prose ul { margin: 0; padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--gold-deep); }
.prose a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose strong, .prose b { color: var(--ink); font-weight: 650; }
.prose .lede { font-size: 1.12rem; color: var(--ink); line-height: 1.7; }

/* `.prose a` (0,1,1) outranks `.btn-*` (0,1,0), so a button placed inside prose
   was repainted with the link colour - gold background, link-blue text. */
.prose a.btn { text-decoration: none; }
.prose a.btn-gold { color: #1e1400; }
.prose a.btn-ink { color: var(--paper); }
.prose a.btn-quiet { color: var(--ink); }

.cta-grid { display: grid; gap: .9rem; margin-top: 2.25rem; }
@media (min-width: 600px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta-card {
  padding: 1.1rem 1.2rem; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--surface); transition: border-color .15s, background .15s;
}
.cta-card:hover { border-color: var(--rule-strong); background: var(--sunk); }
.cta-card h3 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.cta-card p { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

.site-footer { margin-top: 4rem; border-top: 1px solid var(--rule); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding: 2.5rem 0 1.75rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer-brand { grid-column: auto; } }
.footer-brand p { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.7; max-width: 34ch; }
.site-footer h2 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer li a { font-size: .88rem; color: var(--ink-soft); }
.site-footer li a:hover { color: var(--link); text-decoration: underline; }
/* Links out to our other sites. Tokens rather than fixed greys, or the divider
   and the text stay light-theme colours on a dark page. */
.footer-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  padding: 1rem 0; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--ink-faint);
}
.footer-links a { color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover { color: var(--link); text-decoration: underline; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
  padding: 1.1rem 0 2rem; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint);
}

/* ─── Share ──────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }
main:focus { outline: none; }

#share-btn {
  position: fixed; right: 12px; bottom: 12px; z-index: 50;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .6rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-size: .82rem; font-weight: 650;
  box-shadow: var(--shadow-lift); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Icon only on phones so it covers as little of the page as possible. */
#share-btn span { display: none; }
@media (min-width: 560px) { #share-btn { padding: .55rem .95rem; } #share-btn span { display: inline; } }
/* Room so the pill never rests on the last footer line. */
.footer-bottom { padding-bottom: 3.5rem; }
@media (min-width: 560px) { .footer-bottom { padding-bottom: 2rem; } }

/* Score sharing — the thing people actually want to send to a study group. */
.share-row { padding: 0 1.5rem; text-align: center; }
.share-label {
  font-family: var(--font-ml); font-size: .85rem; color: var(--ink-faint);
  margin-bottom: .6rem;
}
.share-buttons { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.share-buttons .btn { flex: 1; min-width: 130px; }
.btn-wa { background: #25d366; color: #05310f; }
.btn-wa:hover { background: #1fb955; }

/* ─── Motion ─────────────────────────────────────────────────────────── */

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise-in { animation: fadeUp .3s ease-out; }

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

@media print {
  .site-header, .site-footer, #share-btn, .quiz-shell { display: none !important; }
  body { background: #fff; color: #000; }
  .answer-key details { border: 0; }
}

/* The wider quiz column can carry slightly larger question text. */
@media (min-width: 900px) {
  .quiz-question { font-size: 1.12rem; }
  .quiz-option { font-size: 1rem; padding: .85rem 1rem; }
  .qa-item h3 { font-size: 1.05rem; }
}