:root{
    --bg:#f6f8fa; --card:#ffffff; --ink:#1a2332; --muted:#5b6b7f;
    --accent:#0e7c66; --accent-ink:#ffffff; --accent-soft:#e6f4f1;
    --wrong:#b3402f; --wrong-soft:#faeae7; --right:#0e7c66;
    --border:#e2e8f0; --chip:#eef2f6;
    /* --border is a decorative hairline (1.23:1 on white). Control boundaries need 3:1 under the
       non-text contrast rule, so inputs and other interactive edges use --field-border. */
    --field-border:#8494a5; --focus:#0b5f4e;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; min-height:100vh; display:flex; flex-direction:column;}
  header{background:var(--card); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .logo{font-weight:800; font-size:1.15rem; letter-spacing:-0.02em;}
  .logo span{color:var(--accent);}
  .tagline{color:var(--muted); font-size:0.85rem;}
  .scorebar{margin-left:auto; display:flex; gap:16px; font-size:0.85rem; color:var(--muted);}
  .scorebar b{color:var(--ink); font-variant-numeric:tabular-nums;}
  main{max-width:860px; width:100%; margin:0 auto; padding:24px 20px 60px; flex:1;}
  .topics{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
  .topics:empty{display:none;}
  .chips-label{margin:0 0 8px; font-size:0.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600;}
  .chip{border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:999px; min-height:44px; display:inline-flex; align-items:center; padding:6px 13px; font-size:0.83rem; cursor:pointer; touch-action:manipulation; transition:background-color .15s, border-color .15s, color .15s;}
  .chip:hover{border-color:var(--accent); color:var(--accent);}
  .chip.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;}
  .card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px; box-shadow:0 1px 3px rgba(16,24,40,.05);}
  .qmeta{display:flex; gap:10px; align-items:center; margin-bottom:14px;}
  .qtopic{background:var(--accent-soft); color:var(--accent); font-size:0.75rem; font-weight:700; padding:3px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;}
  .qtext{font-size:1.08rem; margin-bottom:20px;}
  /* The rounding instruction. Grading is strict against exactly this, so it has to read as
     part of the question rather than as a footnote the eye skips. */
  .roundnote{display:block; margin-top:12px; font-size:0.85rem; color:var(--accent); background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:8px 12px;}
  .answer-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  input[type=text]{flex:1; min-width:160px; min-height:44px; padding:11px 14px; font-size:1rem; border:1.5px solid var(--field-border); border-radius:9px; outline:none;}
  input[type=text]:focus{border-color:var(--accent);}
  .unit{color:var(--muted); font-size:0.95rem; min-width:70px;}
  button{min-height:44px; padding:11px 20px; font-size:0.95rem; font-weight:600; border-radius:9px; border:1.5px solid var(--accent); cursor:pointer; touch-action:manipulation; transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;}
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:transparent; color:var(--accent);}
  .btn-ghost:hover{background:var(--accent-soft);}
  .feedback{margin-top:16px; padding:13px 16px; border-radius:9px; font-size:0.95rem; display:none;}
  .feedback.right{display:block; background:var(--accent-soft); color:var(--accent); border:1px solid #bfe3da;}
  .feedback.wrong{display:block; background:var(--wrong-soft); color:var(--wrong); border:1px solid #efc8bf;}
  .steps{margin-top:18px; border-top:1px dashed var(--border); padding-top:18px; display:none;}
  .steps.open{display:block;}
  .steps h3{font-size:0.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px;}
  .step{display:flex; gap:12px; margin-bottom:10px; font-size:0.95rem;}
  .stepnum{background:var(--chip); color:var(--muted); font-weight:700; font-size:0.75rem; min-width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px;}
  .formula{font-family:"SF Mono",Menlo,Consolas,monospace; background:var(--chip); padding:2px 7px; border-radius:5px; font-size:0.88em;}
  .note{margin-top:12px; font-size:0.85rem; color:var(--muted); background:var(--chip); border-radius:8px; padding:10px 14px;}
  .qtable{border-collapse:collapse; margin:10px 0 4px; font-size:0.9rem;}
  .qtable th,.qtable td{border:1px solid var(--border); padding:5px 12px; text-align:left;}
  .qtable th{background:var(--chip); font-size:0.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
  footer{border-top:1px solid var(--border); background:var(--card); padding:18px 20px; font-size:0.78rem; color:var(--muted); text-align:center;}
  footer .byline{margin-bottom:6px; color:var(--ink); font-size:0.83rem;}
  @media(max-width:560px){ .scorebar{width:100%; margin-left:0;} }


/* ---- Accessibility pass ----
   Three defects this fixes, all in the CRITICAL tier:
   1. No visible focus indicator anywhere. The text input set outline:none and signalled focus only
      by tinting a 1.5px border, which is invisible to most keyboard users; buttons and links had
      nothing at all. Removing focus rings is a named anti-pattern, not a style choice.
   2. transition:all animated every property including layout ones. Narrowed to paint-only.
   3. No prefers-reduced-motion. A student who has asked their OS to stop moving things was
      still getting every transition. */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;}
input[type=text]:focus-visible{outline:3px solid var(--focus); outline-offset:1px;}
input[type=text]:focus{border-color:var(--accent);}
a:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

/* Body copy was 0.92rem (~14.7px). Below the 16px floor for mobile reading, and this is a site
   people read on a phone next to their notes. */
@media (max-width:768px){
  body{font-size:1rem;}
}

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

/* Balanced line breaks on headings (no widowed last word). */
h1,h2,h3{text-wrap:balance;}

/* ---- multi-page additions ---- */
a{color:var(--accent);}
/* base.css makes every <header> a flex row. With the nav as a flex item it takes its content
   width (about 490px), which on a phone is wider than the screen and gives the whole page a
   horizontal scroll. Block layout: brand row, then the nav bar spanning the header edge to edge. */
.site-header{background:var(--card);border-bottom:1px solid var(--border);padding:14px 20px 0;display:block;}
.site-header .inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.site-header a.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none;color:var(--ink);touch-action:manipulation;}
.site-header a.brand span{color:var(--accent);}
.site-header .htag{color:var(--muted);font-size:0.82rem;}
.crumb{max-width:900px;margin:16px auto 0;padding:0 20px;font-size:0.82rem;color:var(--muted);}
.crumb a{display:inline-flex;align-items:center;min-height:24px;padding:4px 0;text-decoration:none;touch-action:manipulation;}
.prose{max-width:820px;margin:0 auto;padding:8px 20px 0;}
.prose h1{font-size:1.7rem;letter-spacing:-0.02em;margin:14px 0 10px;}
.prose .lede{color:var(--muted);font-size:0.9rem;margin-bottom:18px;}
.prose p.intro{font-size:1.02rem;margin-bottom:16px;}
.block{margin:14px 0;}
.blabel{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:6px;}
.prose .formula{display:block;margin:5px 0;}
.prose .ex{background:#fafbfc;padding:9px 14px;border-radius:8px;font-size:0.95rem;margin:4px 0;}
.prose .trap{font-size:0.92rem;color:var(--muted);background:var(--chip);border-radius:8px;padding:11px 15px;margin-top:14px;}
.section-label{max-width:820px;margin:26px auto 0;padding:0 20px;font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.topic-grid{max-width:900px;margin:14px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.topic-grid a{display:block;min-height:44px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:0.92rem;touch-action:manipulation;transition:border-color .15s, color .15s, box-shadow .15s;}
.topic-grid a:hover{border-color:var(--accent);color:var(--accent);}
.homelede{max-width:820px;margin:0 auto;padding:22px 20px 0;}
.homelede h1{font-size:1.8rem;letter-spacing:-0.02em;margin-bottom:10px;}
.homelede p{color:var(--muted);margin-bottom:10px;}
.more-wrap{margin-top:30px;}
/* Section divider: a rule the width of the text column, so the page reads as a sequence of
   distinct sections (practice box, topic list, references, ...) rather than one long scroll. */
hr.divider{width:calc(100% - 40px);max-width:780px;margin:40px auto 0;border:0;border-top:1px solid var(--border);}

/* ---- nav ---- */
.site-nav{border-top:1px solid var(--border);background:var(--card);margin:10px -20px 0;}
.site-nav .inner{max-width:960px;margin:0 auto;padding:0 20px;display:flex;gap:22px;flex-wrap:wrap;}
.site-nav a,.site-nav .nav-here{display:inline-flex;align-items:center;min-height:44px;padding:11px 0;font-size:0.88rem;font-weight:600;text-decoration:none;border-bottom:2px solid transparent;touch-action:manipulation;}
.site-nav a{color:var(--muted);}
.site-nav a:hover{color:var(--accent);}
.site-nav .nav-here{color:var(--accent);border-bottom-color:var(--accent);}
/* On a phone the header ate 260px before any content: tagline wrapped to two lines and the nav
   wrapped to two rows with 44px targets. Hide the tagline (the h1 says the same thing two lines
   later) and keep the nav to one row that scrolls sideways, which is what phones do with tabs. */
@media (max-width:600px){
  .site-header{padding:8px 16px 0;}
  .site-nav{margin:6px -16px 0;}
  .site-header .inner{justify-content:flex-start;}
  .site-header .htag{display:none;}
  .site-nav .inner{flex-wrap:nowrap;overflow-x:auto;gap:18px;padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .site-nav .inner::-webkit-scrollbar{display:none;}
  .site-nav a,.site-nav .nav-here{white-space:nowrap;}
}

/* ---- diagrams ---- */
.diagram{margin:20px 0 4px;padding:0;}
.diagram svg{display:block;max-width:100%;height:auto;}
.diagram figcaption{font-size:0.86rem;color:var(--muted);line-height:1.55;margin-top:8px;}

/* ---- about page + per-topic sources ---- */
.prose .hp{font-size:0.97rem;line-height:1.68;margin-bottom:12px;}
.prose h2{font-size:1.22rem;letter-spacing:-0.01em;margin:26px 0 8px;}
.sources{max-width:820px;margin:32px auto 0;padding:0 20px;}
.sources h2{font-size:1.22rem;letter-spacing:-0.01em;margin-bottom:8px;}
.sources .hp{font-size:0.92rem;line-height:1.62;color:var(--muted);margin-bottom:10px;}
.srclist{list-style:none;padding:0;margin:0;}
.srclist li{border-top:1px solid var(--border);padding:11px 0;font-size:0.9rem;line-height:1.6;color:var(--muted);}
.srclist .srcname,.srclist a{color:var(--ink);font-weight:600;}
.srclist a{text-decoration:underline;}

/* ---- formula sheet / mistakes / examples pages ---- */
.sheet-page{max-width:900px;margin:0 auto;padding:0 20px;}
.sheet-row{border-top:1px solid var(--border);padding:16px 0;}
.sheet-row h2{font-size:1.02rem;margin:0 0 4px;letter-spacing:0;}
.sheet-row h2 a{color:var(--ink);text-decoration:none;}
.sheet-row h2 a:hover{color:var(--accent);}
.sheet-row .why{font-size:0.92rem;color:var(--muted);line-height:1.6;margin:0 0 8px;}
.sheet-row .fs-f{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.86rem;background:var(--chip);border-radius:6px;padding:8px 12px;margin:4px 0;}
.sheet-row .ex{background:#fafbfc;padding:9px 14px;border-radius:8px;font-size:0.92rem;margin:8px 0 0;}
.sheet-row .go{display:inline-block;margin-top:8px;font-size:0.85rem;font-weight:600;text-decoration:none;color:var(--accent);}
.ex-topic{border-top:1px solid var(--border);padding:18px 0 6px;}
.ex-topic > h2{font-size:1.18rem;letter-spacing:-0.01em;margin:0 0 10px;}
.ex-topic > h2 a{color:var(--ink);text-decoration:none;}
.ex-topic > h2 a:hover{color:var(--accent);}
.ex-count{font-size:0.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-left:8px;}
.ex-topic .wp h3{font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.sharehint{font-size:0.78rem;color:var(--muted);margin:12px 0 0;line-height:1.5;}
#share{white-space:nowrap;}

/* ---- homepage depth sections ---- */
.home h2{max-width:820px;margin:34px auto 10px;padding:0 20px;font-size:1.35rem;letter-spacing:-0.02em;}
.home > p, .home .hp{max-width:820px;margin:0 auto 12px;padding:0 20px;font-size:0.97rem;line-height:1.65;}
.topic-grid a .tg-blurb{display:block;font-weight:400;font-size:0.8rem;color:var(--muted);margin-top:5px;line-height:1.45;}
.formula-sheet{max-width:820px;margin:8px auto 0;padding:0 20px;}
.guide{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:36px;padding:8px 0 28px;}
.guide .inner{max-width:820px;margin:0 auto;padding:0 20px;font-size:1.02rem;line-height:1.62;}
.guide h2{font-size:1.45rem;margin:26px 0 10px;letter-spacing:-0.01em;}
.guide h3{font-size:1.08rem;margin:26px 0 8px;color:var(--ink);}
.guide p{margin:0 0 12px;}
.guide ul{margin:0 0 14px;padding-left:22px;}
.guide li{margin-bottom:6px;}
.guide .gformula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.95rem;background:var(--chip);padding:10px 14px;border-radius:6px;overflow-x:auto;}
.guide .gcalc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.93rem;background:var(--chip);padding:8px 12px;border-radius:6px;overflow-x:auto;}
.pdf-dl{margin:10px 0 0;}.pdf-dl a{display:inline-block;padding:10px 16px;min-height:44px;border-radius:8px;background:#0e7c66;color:#fff;font-weight:600;text-decoration:none;}.pdf-dl a:hover{background:#0b5f4e;}.pdf-dl a:focus-visible{outline:3px solid var(--focus,#0b5f4e);outline-offset:2px;}.pdf-dl span{display:block;margin-top:6px;font-size:.9em;color:#4a5866;}
.fs-row{border-bottom:1px solid var(--border);padding:13px 0;}
.fs-row:last-child{border-bottom:none;}
.fs-name{font-weight:700;font-size:0.95rem;margin:0 0 5px;}
.fs-name a{text-decoration:none;}
.fs-f{display:block;font-size:0.9rem;color:var(--ink);margin:3px 0;}
.mistakes{max-width:820px;margin:8px auto 0;padding:0 20px;}
.mk{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:10px;}
.mk-topic{font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:5px;}
.mk-body{font-size:0.92rem;line-height:1.55;}

/* Static worked problems (server-rendered so search engines can read them) */
.worked{max-width:820px;margin:34px auto 0;padding:0 20px;}
.worked h2{font-size:1.35rem;letter-spacing:-0.02em;margin:0 0 8px;}
.worked-lede{color:var(--muted);font-size:0.9rem;margin-bottom:20px;}
.wp{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;}
.wp h3{font-size:0.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0 0 8px;}
.wq{font-size:1rem;margin:0 0 12px;line-height:1.55;}
.walabel{display:inline-block;font-size:0.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-right:8px;}
.wans{background:#fafbfc;padding:8px 14px;border-radius:8px;font-weight:700;margin:0 0 12px;font-size:0.98rem;}
.wsteps{font-size:0.92rem;color:var(--ink);}
.wsteps ol{margin:6px 0 0;padding-left:20px;}
.wsteps li{margin-bottom:6px;line-height:1.55;}
.wnote{font-size:0.86rem;color:var(--muted);background:var(--chip);border-radius:8px;padding:9px 13px;margin-top:12px;}
.wp .formula{display:inline-block;margin:2px 0;}

/* No min-height reservation on .card / #waitlist: measured CLS is already 0.000 on
   every page, and forcing a floor only added dead space inside the practice card
   (and on one page actually introduced a 0.06 shift). Measured, not assumed. */