/* Shared by the notes-template pages (Gatsby chapters, satire, precalc 2.5/2.6): header, notes, quiz, results. */
body{background:var(--paper);font-family:"Inter",system-ui,sans-serif;color:var(--ink)}
main{max-width:680px;margin:0 auto;padding:20px 16px 40px;position:relative;z-index:1}
h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(26px,6vw,38px);letter-spacing:-.02em;line-height:1}
.sub{font-size:13px;color:var(--ink-2);margin:6px 0 24px}
.hdr{margin-bottom:18px}
.note-block{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);padding:18px 20px;margin-bottom:10px}
.note-block h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.note-block h3 .ts{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);min-width:40px}
.note-block p{font-size:14px;line-height:1.6}
.note-block ul{font-size:14px;line-height:1.6;padding-left:18px;margin-top:6px}
.note-block li{margin-bottom:4px}
.note-block .formula{margin-top:10px;padding:10px 14px;background:var(--paper-2);border-radius:var(--radius);border-left:3px solid var(--blue);
  font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1.7}
.note-block .tip{margin-top:10px;padding:10px 14px;background:var(--gold-bg);border-radius:var(--radius);border-left:3px solid var(--gold);
  font-size:13px;line-height:1.5}
.foot{font-size:12px;color:var(--ink-3);margin-top:24px;padding-top:14px;border-top:1px solid var(--ink-3);line-height:1.5}
@media(min-width:1000px){
  main,.topbar .in{max-width:860px}
}
/* Section switcher (tones.html design) */
.sections{display:flex;background:var(--white);border:1.5px solid var(--ink-3);border-radius:99px;padding:4px;margin-bottom:18px}
.sections button{
  flex:1;font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;
  padding:10px;border:none;background:none;color:var(--ink-2);cursor:pointer;border-radius:99px;
  transition:all .15s}
.sections button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.sections button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.statline{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);margin-bottom:16px;letter-spacing:.03em}
.stats{display:flex;gap:1px;background:var(--ink-3);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.stat{flex:1;background:var(--white);padding:11px 8px;text-align:center}
.stat .val{font-family:"Fraunces",serif;font-weight:800;font-size:24px;line-height:1}
.stat .lbl{font-size:10.5px;color:var(--ink-2);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.stat.green .val{color:var(--green)}
.stat.gold .val{color:var(--gold)}
.stat.red .val{color:var(--red)}
.stat.blue .val{color:var(--blue)}
.pbar{height:4px;background:var(--ink-3);border-radius:99px;margin-bottom:6px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .4s ease}
.pmeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);margin-bottom:16px;font-family:"IBM Plex Mono",monospace}
/* Quiz (tones.html design) */
.q-card{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:14px}
.q-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.q-text{font-family:"Fraunces",Georgia,serif;font-size:clamp(16px,3.5vw,20px);line-height:1.45;margin-bottom:14px}
.opts{display:grid;gap:8px;margin-bottom:14px}
.opt{text-align:left;font-size:14.5px;font-weight:500;padding:14px 16px;border:1.5px solid var(--ink-3);
  background:var(--white);color:var(--ink);cursor:pointer;border-radius:var(--radius);transition:all .12s;
  display:flex;align-items:center;gap:10px;font-family:"Inter",sans-serif}
.opt:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.opt .key{font-family:"IBM Plex Mono",monospace;font-size:11px;width:22px;height:22px;border-radius:4px;
  border:1px solid var(--ink-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-2)}
.opt.right{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.opt.wrong{background:var(--red);color:var(--on-accent);border-color:var(--red)}
.opt.right .key,.opt.wrong .key{border-color:currentColor;color:var(--on-accent)}
.opt:disabled{cursor:default}
.feedback{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);padding:16px 18px;font-size:14px;line-height:1.55}
.feedback .fb-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.feedback.correct{border-left:3px solid var(--green);background:var(--green-bg)}
.feedback.correct .fb-label{color:var(--green)}
.feedback.incorrect{border-left:3px solid var(--red);background:var(--red-bg)}
.feedback.incorrect .fb-label{color:var(--red)}
.nxt-row{margin-top:12px}
.nxt-btn{width:100%;font-size:14px;font-weight:600;padding:13px;border:none;background:var(--ink);
  color:var(--paper);cursor:pointer;border-radius:var(--radius);transition:background .15s;font-family:"Inter",sans-serif}
.nxt-btn:hover{background:var(--blue)}
/* Results */
.results{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 24px;text-align:center}
.results h2{font-family:"Fraunces",serif;font-weight:800;font-size:32px;margin-bottom:4px}
.results .rsub{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.score-ring{width:100px;height:100px;margin:0 auto 16px;position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-weight:800;font-size:28px}
.missed-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:20px 0 8px}
.missed-list span{display:inline-block;background:var(--red-bg);color:var(--red);padding:2px 8px;border-radius:4px;margin:2px 3px;font-weight:500;font-size:13px}
@media(max-width:600px){.sections button{padding:12px 8px}}
@media(min-width:1000px){#app,.topbar .in{max-width:860px}.q-card,.opts,.feedback,.nxt-row,.results{max-width:680px;margin-inline:auto}}
/* Wide screens: notes flow into two columns to fill the page */
@media(min-width:1400px){
  :is(#app,main):has(#view>.note-block){max-width:1240px}
  #view:has(>.note-block){columns:2;column-gap:14px}
  #view>.note-block{break-inside:avoid}
}
/* New look, matching lesson.css: notes flow on the page with hairline dividers, eyebrow labels, reading width, calmer tips and answers */
main{background:var(--paper);box-shadow:0 0 48px 36px var(--paper);clip-path:inset(0 -120px)}  /* keep the decorative clouds out from behind the text */
#view>.note-block{background:none;border:none;border-radius:0;box-shadow:none;padding:30px 0;margin:0;border-top:1px solid var(--ink-3)}
#view>.note-block:first-child{border-top:none;padding-top:10px}
#view>.note-block .dg{--ground:var(--paper)}
.note-block .formula{background:var(--white);margin-top:14px}
.note-block h3{display:block;font-size:19px;line-height:1.3;margin-bottom:10px;text-wrap:balance}
.note-block h3 .ts{display:block;min-width:0;font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ink-2);margin-bottom:6px}
.note-block p,.note-block ul{font-size:14.5px;line-height:1.65}
.note-block li{margin-bottom:6px}
.note-block.ex>p{font-family:"Fraunces",Georgia,serif;font-size:16.5px;line-height:1.55}
.note-block .tip{margin-top:12px;border-left:none;padding:12px 14px}
.note-block .tip::before{content:"Tip";display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
main:has(#view>.note-block) .pbar{display:none}
.opt.right{background:var(--green-bg);color:var(--ink);border-color:var(--green)}
.opt.wrong{background:var(--red-bg);color:var(--ink);border-color:var(--red)}
.opt.right .key{border-color:var(--green);color:var(--green)}
.opt.wrong .key{border-color:var(--red);color:var(--red)}
@media(min-width:1000px) and (max-width:1399px){main:has(#view>.note-block){max-width:720px}}
@media(max-width:600px){#view>.note-block{padding:26px 0}}
/* content width for the cloud layout in base.css */
@media(min-width:1000px){:root{--content-w:860px}}
@media(min-width:1000px) and (max-width:1399px){:root:has(#view>.note-block){--content-w:720px}}
@media(min-width:1400px){:root:has(#view>.note-block){--content-w:1240px}}