/* Chapbook practice tests. Printed study booklet system, per DESIGN.md. */
:root{
  --paper:#fffaf0; --paper-deep:#f7ecd7; --ink:#17261f; --ink-soft:#43554c;
  --accent:#9b1c3a; --gold:#f2cf8c; --correct:#2e6b34; --wrong:#a31621; --line:#d8c9a8;
  --shadow:4px 4px 0 rgba(23,38,31,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Familjen Grotesk",Verdana,system-ui,sans-serif; font-size:17px; line-height:1.5;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.no-grain::before{display:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}
main,header.site,footer.site{position:relative; z-index:1}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
h1,h2,h3,.wordmark{font-family:"Young Serif",Georgia,serif; font-weight:400; line-height:1.35; margin:0 0 16px}
h1{font-size:40px} h2{font-size:24px; margin-top:32px} h3{font-size:20px}
@media (max-width:600px){ h1{font-size:32px} }
p{max-width:68ch; margin:0 0 16px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:8px 16px; z-index:50}
.skip:focus{left:8px; top:8px}
/* header */
header.site{border-bottom:2px solid var(--ink); background:var(--paper)}
.header-in{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:16px 0}
.wordmark{font-size:24px; margin:0}
.wordmark a{color:var(--ink); text-decoration:none}
.tagline{font-size:14px; color:var(--ink-soft); margin:2px 0 0; max-width:none}
nav.mainnav ul{display:flex; flex-wrap:wrap; gap:16px; list-style:none; margin:0; padding:0}
nav.mainnav a{color:var(--ink); font-size:16px}
/* notice */
.notice{
  background:var(--paper-deep); border:2px solid var(--ink); border-radius:14px;
  box-shadow:var(--shadow); padding:16px; margin:24px 0;
}
.notice p{margin:0}
.notice .note-hand{margin-top:8px}
/* handwritten margin notes, two or three per page at most */
.note-hand{font-family:"Mansalva",cursive; font-size:17px; color:var(--ink); transform:rotate(-1.5deg); display:inline-block}
/* panels and facts strip */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:24px; margin:24px 0}
.panel-strong{border:2px solid var(--ink)}
.facts{background:var(--paper-deep); border:1px solid var(--line); border-radius:14px; padding:16px 24px; margin:24px 0}
.facts h2{margin-top:8px}
.facts dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 24px; margin:0}
.facts dt{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.facts dd{margin:0; font-size:18px; font-variant-numeric:tabular-nums}
.facts dd mark{background:var(--gold); color:var(--ink); padding:0 4px}
.facts .source-line{margin:16px 0 0}
/* contents list, numbered, like a booklet contents page */
.contents{list-style:none; margin:0; padding:0; counter-reset:item}
.contents li{counter-increment:item; border-bottom:1px solid var(--line)}
.contents a{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:16px 8px; color:var(--ink); text-decoration:none;
}
.contents a:hover,.contents a:focus-visible{background:var(--paper-deep)}
.contents .num{font-family:"Young Serif",Georgia,serif; font-size:20px; min-width:40px}
.contents .what{flex:1}
.contents .what strong{display:block; font-size:18px; font-weight:600}
.contents .what span{color:var(--ink-soft); font-size:14px}
.contents .meta{font-variant-numeric:tabular-nums; white-space:nowrap; font-size:15px}
/* buttons */
.btn{
  display:inline-block; background:var(--accent); color:var(--paper); border:2px solid var(--ink);
  border-radius:14px; padding:12px 24px; font:inherit; font-size:17px; cursor:pointer;
  text-decoration:none; box-shadow:var(--shadow);
}
.btn-secondary{background:var(--paper); color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.linklike{background:none; border:none; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; padding:0}
/* finder */
.finder{display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end}
@media (max-width:700px){ .finder{grid-template-columns:1fr} }
label{display:block; font-weight:600; margin-bottom:4px}
select,input[type="date"],input[type="text"]{
  width:100%; font:inherit; padding:12px; border:2px solid var(--ink); border-radius:8px; background:var(--paper); color:var(--ink);
}
/* player */
.player-wrap{max-width:720px; margin:0 auto; padding:0 16px}
.player-head{
  position:sticky; top:0; background:var(--paper); border-bottom:2px solid var(--ink);
  padding:12px 0; z-index:5;
}
.player-head .row{display:flex; justify-content:space-between; gap:16px; align-items:baseline; flex-wrap:wrap}
.progress-track{height:12px; border:2px solid var(--ink); border-radius:8px; margin-top:8px; background:var(--paper)}
.progress-fill{height:100%; background:var(--gold); border-radius:6px; width:0%}
.question-card{border:2px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:24px; margin:24px 0; background:var(--paper)}
.qnum-tab{font-family:"Young Serif",Georgia,serif; font-size:20px; color:var(--accent); margin:0 0 8px}
.question-text{font-size:18px; line-height:1.5; max-width:60ch; margin:0 0 24px}
.answers{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.answer-row{margin:0}
.answer-btn{
  display:flex; gap:16px; align-items:center; width:100%; text-align:left; font:inherit; font-size:16px;
  min-height:52px; padding:12px 16px; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:8px; cursor:pointer;
}
.answer-btn .letter{font-family:"Young Serif",Georgia,serif; font-size:18px; min-width:24px}
.answer-btn[aria-checked="true"]{background:var(--gold)}
.answer-btn.is-correct{border-color:var(--correct)}
.answer-btn.is-wrong{border-color:var(--wrong)}
.mark{font-weight:700}
.mark.ok{color:var(--correct)} .mark.no{color:var(--wrong)}
.explain{background:var(--paper-deep); border:1px solid var(--line); border-radius:14px; padding:16px 24px; margin-top:24px}
.source-line{font-size:14px; color:var(--ink-soft)}
.player-actions{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:24px 0 48px}
.timer-words{font-variant-numeric:tabular-nums}
/* results, set as a marked paper */
.score-big{font-family:"Young Serif",Georgia,serif; font-size:40px; font-variant-numeric:tabular-nums}
.scale{position:relative; border:2px solid var(--ink); border-radius:8px; height:28px; margin:16px 0; background:var(--paper)}
.scale-fill{height:100%; background:var(--gold); border-radius:6px}
.scale-pass{position:absolute; top:-8px; bottom:-8px; width:3px; background:var(--accent)}
.scale-pass span{position:absolute; top:-24px; left:-30px; font-size:13px; white-space:nowrap}
table.topics{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
table.topics th,table.topics td{border-bottom:1px solid var(--line); padding:8px; text-align:left}
.missed{border:1px solid var(--line); border-radius:14px; padding:16px 24px; margin:16px 0; background:var(--paper)}
/* footer */
footer.site{border-top:2px solid var(--ink); background:var(--paper-deep); margin-top:64px}
footer.site .wrap{padding-top:24px; padding-bottom:32px}
footer.site ul{display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:0 0 16px}
footer.site a{color:var(--ink)}
.fineprint{font-size:13px; color:var(--ink-soft)}
.two-col{display:grid; grid-template-columns:2fr 1fr; gap:32px}
@media (max-width:800px){ .two-col{grid-template-columns:1fr} }
.slide-in{animation:slidein 160ms ease-out}
@keyframes slidein{from{transform:translateX(12px); opacity:.4} to{transform:none; opacity:1}}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}