/* paper-pages.css — the one Vybd look for the public practice-paper pages (UX review A9, 6 Oct 2026):
   /sample-papers/** (static HTML) and /olympiad/** (written by tools/generate-olympiad-landing-pages.js).
   Cream paper, teal, Fraunces headings, Inter body; colour tokens copy the public/index.html :root values
   (light, and dark under prefers-color-scheme). Mobile-first, rem-based, no fixed heights. Clickable things
   look clickable (links, buttons, raised class cards); static facts are plain text or flat panels; answer
   options are a printable "(A) … (B) …" list. tools/test-paper-pages-brand.js pins these rules. */

:root{
  --surface:#FBFAF6;--surface-2:#FFFFFF;--surface-3:#F3F0E9;
  --ink:#17342F;--ink-2:#3F5550;--ink-muted:#5F6E6A;
  --line:#E7E2D6;--line-strong:#CFD8D4;
  --accent:#0F766E;--accent-strong:#0C5D56;--accent-deep:#115E59;--accent-soft:#DCEFEA;--accent-line:#BFE0D9;--on-accent:#FFFFFF;
  --success:#15803D;--focus:#0F766E;
  --shadow-1:0 1px 2px rgba(20,20,30,.05),0 1px 3px rgba(20,20,30,.06);
  --shadow-lift:0 8px 22px rgba(15,118,110,.12);
  --radius:14px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-head:'Fraunces',Georgia,'Times New Roman',serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#0F1513;--surface-2:#171F1C;--surface-3:#202A26;
    --ink:#ECEFEA;--ink-2:#C3CBC6;--ink-muted:#98A39D;
    --line:#283430;--line-strong:#35433E;
    --accent:#2FB8A3;--accent-strong:#0F766E;--accent-deep:#1E9C88;--accent-soft:#163B35;--accent-line:#2A5A50;--on-accent:#06201B;
    --success:#4ADE80;--focus:#7DD3FC;
    --shadow-1:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);
    --shadow-lift:0 8px 22px rgba(0,0,0,.45);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;font-family:var(--font-head);font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.pp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Frame: header, readable column (+ a side column on wide screens), footer */
.pp-wrap{width:100%;max-width:82.5rem;margin:0 auto;padding:0 1rem}
.pp-head{border-bottom:1px solid var(--line);background:var(--surface)}
.pp-head .pp-wrap{display:flex;align-items:center;min-height:3.75rem}
.pp-logo{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:1.75rem;line-height:1.1;letter-spacing:.01em;
  color:var(--accent-deep);text-decoration:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pp-logo{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.pp-crumbs{padding:.875rem 0 0;font-size:.8125rem;color:var(--ink-muted)}
.pp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.125rem .375rem}
.pp-crumbs li+li::before{content:'›';margin-right:.375rem}
.pp-crumbs a{color:var(--accent);font-weight:500;text-decoration:none}
.pp-crumbs a:hover{text-decoration:underline}
.pp-page{display:grid;grid-template-columns:minmax(0,1fr);padding:1rem 0 1rem}
.pp-a,.pp-b{min-width:0;max-width:46rem}
.pp-side{min-width:0;max-width:46rem}
@media (min-width:48rem){.pp-wrap{padding:0 2rem}}
@media (min-width:64rem){
  .pp-page{grid-template-columns:minmax(0,46rem) 19rem;grid-template-areas:"a side" "b side";column-gap:clamp(2.5rem,4vw,4rem);align-items:start}
  .pp-a{grid-area:a}.pp-b{grid-area:b}
  .pp-side{grid-area:side;position:sticky;top:1.5rem}
}

/* Title block: h1, one plain meta line, a short intro */
.pp-title{margin:.75rem 0 .5rem;font-size:clamp(1.75rem,1.25rem + 1.6vw,2.5rem)}
.pp-meta{margin:0 0 .75rem;font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.pp-intro{margin:0 0 1.5rem;max-width:40rem;color:var(--ink-2)}

/* The paper: a flat white sheet (static, so no shadow) */
.pp-paper{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1rem}
.pp-paper-title{font-size:1.25rem}
.pp-paper-sub{margin:.25rem 0 0;font-size:.9375rem;color:var(--ink-muted)}
.pp-facts{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:.875rem;color:var(--ink-2)}
.pp-instr,.pp-scoring{margin:1rem 0 0;padding:.75rem 1rem;border-radius:10px;font-size:.875rem;line-height:1.55;color:var(--ink-2);background:var(--surface-3)}
.pp-scoring{background:var(--accent-soft);color:var(--ink)}
.pp-qs{list-style:none;margin:1rem 0 0;padding:0}
.pp-q{display:grid;grid-template-columns:2.75rem minmax(0,1fr);padding:1rem 0;border-top:1px solid var(--line)}
.pp-q:first-child{border-top:0}
.pp-qn{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.pp-stem{margin:0 0 .5rem;font-weight:500;color:var(--ink)}
.pp-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1.5rem;color:var(--ink-2)}
.pp-opts b{font-weight:600;color:var(--ink);margin-right:.25rem}
.pp-opts-1{grid-template-columns:minmax(0,1fr)}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
@media (min-width:36rem){
  .pp-paper{padding:1.75rem 2rem}
  .pp-opts-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Buttons: one filled primary per view (the CTA); everything else outlined or text */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.625rem 1.25rem;
  border-radius:12px;border:1.5px solid transparent;font:600 .9375rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;
  transition:box-shadow .15s,transform .15s,border-color .15s,background-color .15s}
.pp-btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 2px 12px rgba(15,118,110,.30),0 1px 3px rgba(0,0,0,.08)}
.pp-btn-primary:hover{box-shadow:0 4px 20px rgba(15,118,110,.4);transform:translateY(-1px)}
.pp-btn-outline{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
.pp-btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.pp-btn-text{background:none;color:var(--accent);padding-left:.5rem;padding-right:.5rem}
.pp-btn-text:hover{text-decoration:underline}
.pp-btn[hidden]{display:none}

/* Answer key: revealed by the one "Show answers" button, always printed (on its own page) */
.pp-key{margin:1.25rem 0 0;padding:1.25rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.pp-key[hidden]{display:none}
.pp-key h2{font-size:1.25rem;margin:0 0 .5rem}
.pp-key-list{list-style:none;margin:0;padding:0}
.pp-key-list li{display:grid;grid-template-columns:2.75rem 1.75rem minmax(0,1fr);gap:.5rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.9375rem}
.pp-key-q{font-weight:700;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.pp-key-a{font-weight:700;color:var(--success)}
.pp-key-s{color:var(--ink-2)}
@media (min-width:36rem){.pp-key{padding:1.5rem 2rem}}

/* Next step: a flat teal panel holding the page's one primary button */
.pp-cta{margin:2rem 0 0;padding:1.5rem 1.25rem;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius)}
.pp-cta h2{font-size:1.25rem;margin:0 0 .375rem}
.pp-cta p{margin:0 0 1rem;font-size:.9375rem;color:var(--ink-2)}
.pp-cta .pp-btn{width:100%}
@media (min-width:64rem){.pp-cta{margin:.75rem 0 0}}

/* Supporting sections */
.pp-sec{margin:2.5rem 0 0}
.pp-sec>h2{font-size:1.375rem;margin:0 0 .75rem}
.pp-sec-intro{margin:-.25rem 0 .75rem;font-size:.875rem;color:var(--ink-muted)}
.pp-links{list-style:none;margin:0;padding:0;display:grid;gap:.125rem}
.pp-links a{display:inline-block;padding:.3125rem 0;font-weight:600;text-decoration:none}
.pp-links a::after{content:' →'}
.pp-links a:hover{text-decoration:underline}
.pp-classes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pp-classes a{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1rem;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--surface-2);color:var(--ink);font-size:.875rem;font-weight:600;text-decoration:none}
.pp-classes a:hover{border-color:var(--accent);color:var(--accent)}
.pp-classes a[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft);color:var(--ink)}
.pp-facts-dl{margin:0;display:grid;gap:.625rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.25rem}
.pp-facts-dl div{display:grid;gap:.125rem .75rem;padding-bottom:.625rem;border-bottom:1px solid var(--line)}
.pp-facts-dl div:last-child{padding-bottom:0;border-bottom:0}
.pp-facts-dl dt{font-size:.75rem;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.pp-facts-dl dd{margin:0;font-size:.9375rem}
.pp-facts-dl ul{list-style:none;margin:0;padding:0}
.pp-facts-dl li+li{margin-top:.5rem}
.pp-facts-dl li b{display:block;font-weight:600}
.pp-facts-dl li span{display:block;font-size:.875rem;color:var(--ink-2)}
.pp-nw{white-space:nowrap}
@media (min-width:36rem){.pp-facts-dl div{grid-template-columns:9rem minmax(0,1fr)}.pp-facts-dl dt{padding-top:.1875rem}}
.pp-faq details{border-top:1px solid var(--line)}
.pp-faq details:last-of-type{border-bottom:1px solid var(--line)}
.pp-faq summary{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;font-weight:600;cursor:pointer;list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:'+';flex:none;font-size:1.25rem;line-height:1.2;font-weight:600;color:var(--accent)}
.pp-faq details[open] summary::after{content:'−'}
.pp-faq details p{margin:0 0 1rem;color:var(--ink-2)}
.pp-note{margin:2.5rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--ink-muted)}

/* Hub pages: whole-card links (raised = clickable) */
.pp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10.5rem,100%),1fr));gap:.75rem}
.pp-card{display:flex;flex-direction:column;gap:.125rem;height:100%;padding:1rem 1.125rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.pp-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.pp-card b{font-family:var(--font-head);font-size:1.25rem;font-weight:700;line-height:1.25}
.pp-card span{font-size:.875rem;color:var(--ink-2);line-height:1.4}
.pp-card .pp-card-go{margin-top:auto;padding-top:.5rem;font-weight:600;color:var(--accent)}
.pp-hub-sec{margin:2rem 0 0}
.pp-hub-sec h2{font-size:1.375rem;margin:0 0 .75rem}

.pp-foot{margin-top:3rem;border-top:1px solid var(--line);padding:2rem 0 2.5rem;font-size:.875rem;color:var(--ink-muted)}
.pp-foot .pp-logo{font-size:1.375rem;margin-bottom:.375rem}
.pp-foot p{margin:0 0 .75rem}
.pp-foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0 0 .75rem}
.pp-foot nav a{color:var(--ink-2);font-weight:500;text-decoration:none}
.pp-foot nav a:hover{color:var(--accent);text-decoration:underline}

.pp-print{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* Print: the paper on A4, the answer key on its own page; no screen chrome */
@page{size:A4;margin:14mm}
@media print{
  :root{--surface:#fff;--surface-2:#fff;--surface-3:#F3F0E9;--ink:#111;--ink-2:#333;--ink-muted:#555;--line:#ccc;--accent:#0F766E;--accent-soft:#EEF6F4;--success:#0F5132}
  body{background:#fff;font-size:11pt}
  .pp-head,.pp-crumbs,.pp-side,.pp-b,.pp-foot,.pp-actions,.pp-meta,.pp-intro,.pp-title{display:none!important}
  .pp-wrap{max-width:none;padding:0}
  .pp-page{display:block;padding:0}
  .pp-a{max-width:none}
  .pp-print{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 10pt;padding:0 0 8pt;border-bottom:2pt solid #0F766E}
  .pp-print b{font:700 20pt/1 var(--font-head);color:#0F766E}
  .pp-print span{font-size:9.5pt;color:#333}
  .pp-paper,.pp-key{border:0;border-radius:0;padding:0;background:none}
  .pp-q{break-inside:avoid;padding:8pt 0}
  .pp-opts-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pp-key,.pp-key[hidden]{display:block!important;break-before:page;margin:0}
  .pp-key-list li{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}