/* AP® Chemistry course styles, on top of assets/theme.css. Forked from the A&P
   stylesheet (docs/apchem-spec.md decision 1): the same visual language
   tokens (Okabe–Ito based, colorblind-safe, light and dark), page shell,
   stepped lesson, textbook frame and question styles, renamed chem-*, plus
   what this course adds: stimulus panels and sets, numeric answers, charts,
   unit pages, the printable unit sheet and the course home.

   The course color: cobalt blue on every page (body.chem), dark-mode tint
   kept low (A&P decision 81: 7%). */
body.chem{--ctint:#E3EAFA;--cink:#1D44A6;}
:root[data-theme="dark"] body.chem{--ctint:rgba(90,130,230,0.12);--cink:#B3C8F7;}

/* ============================================================ 1. Visual language */
:root{
  --chem-o2:#D55E00;        /* oxygenated blood: vermillion */
  --chem-o2-fill:#F6D2BD;
  --chem-deo2:#0072B2;      /* deoxygenated blood: blue */
  --chem-deo2-fill:#C3DDF0;
  --chem-symp:#CC79A7;      /* sympathetic: reddish purple */
  --chem-symp-fill:#F1DAE7;
  --chem-para:#009E73;      /* parasympathetic: bluish green */
  --chem-para-fill:#C4E8DC;
  --chem-aff:#E69F00;       /* afferent (toward the control center): orange */
  --chem-aff-fill:#F8E3B8;
  --chem-eff:#56B4E9;       /* efferent (away from it): sky blue */
  --chem-eff-fill:#D2EAF8;
  --chem-hi:#8E3B2E;        /* the high side of a gradient */
  --chem-hi-fill:#EFD5CF;
  --chem-lo:#5B6B8C;        /* the low side */
  --chem-lo-fill:#E1E6F0;
  --chem-memb:#6B5E3C;      /* membranes */
  --chem-shape:#5D6B69;     /* neutral structure */
  --chem-shape-fill:#EEF2F1;
  --chem-causes:#1F2A28;    /* "causes" arrows */
  --chem-flows:#1F2A28;     /* "flows to" arrows */
  --chem-mask:#FFF7E6;
}
:root[data-theme="dark"]{
  --chem-o2:#FF9A5C;  --chem-o2-fill:rgba(213,94,0,0.28);
  --chem-deo2:#6CB8EC; --chem-deo2-fill:rgba(0,114,178,0.30);
  --chem-symp:#E7A5CA; --chem-symp-fill:rgba(204,121,167,0.26);
  --chem-para:#4FD1AA; --chem-para-fill:rgba(0,158,115,0.26);
  --chem-aff:#F3C04F;  --chem-aff-fill:rgba(230,159,0,0.26);
  --chem-eff:#8FD0F5;  --chem-eff-fill:rgba(86,180,233,0.24);
  --chem-hi:#F0A08F;   --chem-hi-fill:rgba(142,59,46,0.34);
  --chem-lo:#AEBBD6;   --chem-lo-fill:rgba(91,107,140,0.30);
  --chem-memb:#D8C58F;
  --chem-shape:#B7C4C1; --chem-shape-fill:rgba(183,196,193,0.10);
  --chem-causes:#E6EEEC; --chem-flows:#E6EEEC;
  --chem-mask:#2B3432;
}

/* SVG vocabulary. Fill classes color a shape; add .line for a stroke only. */
.chem-fig svg, svg.chem-svg{max-width:100%;height:auto;overflow:visible;}
/* Inline stimulus drawings (particle views) carry a fixed width; they shrink to the column on a phone. */
.chem-stim-html svg{max-width:100%;height:auto;}
.chem-fig .shape{fill:var(--chem-shape-fill);stroke:var(--chem-shape);stroke-width:2;}
.chem-fig .o2{fill:var(--chem-o2-fill);stroke:var(--chem-o2);stroke-width:2;}
.chem-fig .deo2{fill:var(--chem-deo2-fill);stroke:var(--chem-deo2);stroke-width:2;}
.chem-fig .symp{fill:var(--chem-symp-fill);stroke:var(--chem-symp);stroke-width:2;}
.chem-fig .para{fill:var(--chem-para-fill);stroke:var(--chem-para);stroke-width:2;}
.chem-fig .aff{fill:var(--chem-aff-fill);stroke:var(--chem-aff);stroke-width:2;}
.chem-fig .eff{fill:var(--chem-eff-fill);stroke:var(--chem-eff);stroke-width:2;}
.chem-fig .hi{fill:var(--chem-hi-fill);stroke:var(--chem-hi);stroke-width:2;}
.chem-fig .lo{fill:var(--chem-lo-fill);stroke:var(--chem-lo);stroke-width:2;}
.chem-fig .memb{fill:none;stroke:var(--chem-memb);stroke-width:3;}
.chem-fig .accent{fill:var(--ctint);stroke:var(--cink);stroke-width:2;}
.chem-fig .line{fill:none !important;}
.chem-fig .o2.line{stroke:var(--chem-o2);} .chem-fig .deo2.line{stroke:var(--chem-deo2);}
/* The two arrow kinds (spec section 6). "causes": solid, filled head.
   "flows": dashed, open head. The heads are markers defined once per page by
   chem-core.js, so an author only writes class="causes" or class="flows". */
.chem-fig .causes{fill:none;stroke:var(--chem-causes);stroke-width:2.5;marker-end:url(#chem-head-causes);}
.chem-fig .flows{fill:none;stroke:var(--chem-flows);stroke-width:2.2;stroke-dasharray:7 5;marker-end:url(#chem-head-flows);}
.chem-fig .o2.flows{stroke:var(--chem-o2);} .chem-fig .deo2.flows{stroke:var(--chem-deo2);}
.chem-fig .lbl{fill:var(--ink);font:800 15px var(--font-ui);}
.chem-fig .lbl-sm{fill:var(--muted);font:700 12.5px var(--font-ui);}
.chem-fig text{fill:var(--ink);font-family:var(--font-ui);}
#chem-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ============================================================ 2. Page shell */
.chem-crumb{font:800 12.5px var(--font-ui);color:var(--muted);margin:18px 0 0;}
.chem-crumb a{color:var(--muted);text-decoration:none;}
.chem-crumb a:hover{color:var(--ink);text-decoration:underline;}
.chem-hero{padding-top:22px;}
.chem-hero h1{max-width:24ch;}
.chem-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.chem-tag{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--ctint);color:var(--cink);font:800 12.5px var(--font-ui);text-decoration:none;}
a.chem-tag:hover{text-decoration:underline;}
.chem-part{margin:0 0 30px;max-width:760px;}
.chem-part h2{display:flex;align-items:baseline;gap:10px;font-size:21px;margin:0 0 12px;}
.chem-part p,.chem-prose p,.chem-prose li{font-weight:600;line-height:1.7;}
.chem-hint{color:var(--muted);font-size:14px;}
.chem-small{color:var(--muted);font:700 13px var(--font-ui);}
.chem-unbuilt{color:var(--muted);}
.chem-links{margin:0;padding-left:20px;}
.chem-links li{margin:4px 0;}
.chem-plain{margin:6px 0 14px;padding-left:20px;}
.chem-hook{background:var(--ctint);border-radius:var(--radius, 18px);padding:18px 22px;}

/* The causal chain: numbered cause -> effect steps. */
.chem-chain{list-style:none;counter-reset:step;margin:0;padding:0;}
.chem-chain li{counter-increment:step;display:grid;grid-template-columns:32px 1fr;column-gap:12px;row-gap:4px;padding:12px 0;border-bottom:1px solid var(--line, rgba(0,0,0,0.08));}
.chem-chain li::before{content:counter(step);grid-row:1 / span 3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cink);color:var(--paper);font:900 13px var(--font-ui);}
.chem-chain .chem-arrow{color:var(--cink);font-weight:900;}
.chem-chain .chem-cause{font-weight:700;}
.chem-ideas{margin:0;padding-left:20px;}.chem-ideas li{margin:0 0 10px;}
.chem-core-tags{display:flex;flex-wrap:wrap;gap:8px;}
.chem-core{display:inline-block;padding:6px 13px;border-radius:12px;background:var(--white);box-shadow:var(--lift-sm);font:800 13.5px var(--font-ui);color:var(--ink);text-decoration:none;}
.chem-misconception{border-left:4px solid var(--warn, #C98A1A);padding-left:16px;}
.chem-wrong b{color:var(--bad-text, #B3261E);}
.chem-right b{color:var(--good-text, #1B7B5B);}

/* Figures and the lesson figure panel. */
.chem-figure{margin:18px 0 24px;}
.chem-figure figcaption{font:600 13.5px/1.5 var(--font-ui);color:var(--muted);margin-top:8px;}
.chem-credit{display:block;font-size:12px;margin-top:3px;}
.chem-figimg{position:relative;display:inline-block;max-width:100%;}
.chem-figimg img{display:block;max-width:100%;height:auto;border-radius:10px;background:#fff;}
/* Dark mode: the diagrams are SVG files drawn on white in the course palette
   (the Okabe-Ito hues above), shown as <img>, so page tokens cannot reach
   inside them. Inverting lightness and turning the hue back round keeps every
   hue in place while light fills go dark and dark strokes and labels go light,
   the same swap the A&P figures make with their dark tokens; the white ground
   lands near the dark card surface. Follows the site's theme toggle. */
:root[data-theme="dark"] .chem-figimg img{filter:invert(.88) hue-rotate(180deg) saturate(1.25) brightness(1.05);}
@media print{:root[data-theme="dark"] .chem-figimg img{filter:none;}}
.chem-mask{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:default;color:transparent;border-radius:4px;}
.chem-mask span{position:absolute;left:-9999px;}
.chem-labels-hidden .chem-mask{background:var(--chem-mask);outline:2px solid var(--cink);cursor:pointer;}
.chem-labels-hidden .chem-mask:focus-visible{outline:3px solid var(--accent);}
.chem-labels-hidden .chem-mask.revealed{background:transparent;outline:2px dashed var(--good, #1B7B5B);}
.chem-toggle-labels{margin-top:4px;}

/* Prose (notes pages). */
.chem-prose{max-width:760px;}
.chem-prose h2{font-size:23px;margin:34px 0 10px;}
.chem-prose h3{font-size:18px;margin:24px 0 8px;}
.chem-prose table.compare{width:100%;border-collapse:collapse;margin:18px 0;font:600 14.5px/1.5 var(--font-ui);display:block;overflow-x:auto;}
.chem-prose table.compare th,.chem-prose table.compare td{padding:9px 11px;border-bottom:1px solid var(--line, rgba(0,0,0,0.1));text-align:left;vertical-align:top;}
.chem-prose table.compare thead th{background:var(--ctint);color:var(--cink);}
.chem-prose table.compare tbody th{font-weight:800;}
.chem-prose .worked{background:var(--white);box-shadow:var(--lift-sm);border-radius:14px;padding:14px 18px;margin:18px 0;}
.chem-prose .worked::before{content:'Worked example';display:block;font:900 11px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cink);margin-bottom:6px;}
.going-further,.chem-preview,.for-your-exam{border-radius:14px;padding:12px 16px;margin:18px 0;}
.going-further{background:var(--paper-2, rgba(0,0,0,0.035));}
.going-further::before{content:'Going further';display:block;font:900 11px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.chem-preview{border:2px dashed var(--cink);}
.chem-preview::before{content:'Preview';display:block;font:900 11px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cink);margin-bottom:4px;}
.for-your-exam{background:var(--ctint);}
.chem-disclaimer{color:var(--muted);font:600 12.5px/1.5 var(--font-ui);max-width:760px;}
.chem-foot{padding:26px 0 40px;}
.chem-gate{margin:0 0 18px;}.chem-gate .premium-card{margin:0;}.chem-gate-notes{margin:8px 0 0;font:700 14px/1.5 var(--font-ui);}
.chem-accuracy-note{color:var(--muted);font:600 13px/1.5 var(--font-ui);max-width:760px;}
.chem-beta{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--cink);color:var(--paper);font:900 10.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;}
.chem-q-credit{margin:4px 0 0;color:var(--muted);}

/* ============================================================ Lesson layout (redesign)
   A rail with the lesson's parts, a coral title card joined to a white card
   and chip rows under it. Without JS every part shows in one scroll and the
   rail links jump to them; chem-lesson.js adds .chem-stepped (one part a step). */
.chem-ls{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 clamp(24px,4vw,54px);align-items:start;}
.chem-ls-rail{position:sticky;top:calc(var(--site-header-h,112px) + 18px);display:flex;flex-direction:column;gap:14px;padding:22px 0 26px;max-height:calc(100vh - var(--site-header-h,112px) - 36px);overflow-y:auto;}
.chem-ls-main{min-width:0;}
.chem-ls-k{font:900 12px/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;}
.chem-ls-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;}
.chem-ls-links a{display:inline-flex;align-items:center;gap:6px;font:800 13.5px var(--font-ui);color:var(--ink);text-decoration:none;}
.chem-ls-links a:hover,.chem-ls-chips a:hover{color:var(--cink);}
.chem-ls-prog{display:flex;align-items:center;gap:12px;}
.chem-ls-prog[hidden]{display:none;}
.chem-ls-track{flex:1;height:8px;border-radius:999px;background:var(--track);overflow:hidden;}
.chem-ls-fill{width:0;height:100%;background:var(--cink);border-radius:999px;transition:width .25s ease;}
.chem-ls-count{font:900 12.5px var(--font-mono);color:var(--muted);white-space:nowrap;}
.chem-ls-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.chem-ls-steps a{display:flex;align-items:flex-start;gap:10px;padding:7px 8px;border-radius:9px;font:800 12.5px/1.35 var(--font-ui);color:var(--muted);text-decoration:none;}
.chem-ls-steps a:hover{background:var(--hover-tint);}
.chem-ls-steps .n{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);font:900 11px var(--font-mono);margin-top:-2px;}
.chem-ls-steps .done a{color:var(--ink);}
.chem-ls-steps .current .n{background:var(--cink);color:var(--paper);}
.chem-ls-steps .done:not(.current) .n{background:var(--good-text);color:var(--white);font-size:0;}
.chem-ls-steps .done:not(.current) .n::after{content:"\2713";font:900 12px var(--font-ui);}
.chem-ls-hint{font:700 13px var(--font-ui);color:var(--muted);margin-left:auto;text-align:right;}
.chem-ls-hint:empty{display:none;}
.chem-ls-hint + .chem-ls-go{margin-left:0;}
.chem-ls-go:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.chem-free-first{margin:16px 0;padding:18px 20px;border-radius:var(--radius-lg);background:var(--white);border:var(--bw,2px) solid var(--line);}
.chem-free-first p{margin:0 0 12px;font-weight:700;color:var(--muted);}
.chem-ls-steps .current a{background:var(--ctint);color:var(--cink);}
.chem-ls-hero{margin-top:16px;padding:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 26px;background:var(--ctint);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.chem-ls-hero .eyebrow{color:var(--cink);}
.chem-ls-hero .chem-tag{background:var(--white);}
.chem-ls-hero h1{margin:0 0 6px;max-width:20ch;}
.chem-ls-hero .lede{margin:0 0 14px;max-width:52ch;color:var(--muted);font-weight:700;}
.chem-ls-card{background:var(--white);border:var(--bw,2px) solid var(--line);border-radius:var(--radius-lg);margin-top:-2px;padding:clamp(20px,4vw,32px);box-shadow:var(--lift-lg);}
.chem-ls [id]{scroll-margin-top:calc(var(--site-header-h,112px) + 12px);}
.chem-stepped .chem-ls-card{min-height:360px;display:flex;flex-direction:column;}
.chem-ls-card .chem-part{max-width:72ch;}
.chem-ls-card #figure{max-width:none;}
.chem-stepped .chem-step{display:none;flex:1;margin:0;}
.chem-stepped .chem-step.is-on{display:block;}
.chem-step .chem-step-k{font:900 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--cink);margin:0 0 6px;}
.chem-step h2{font:900 clamp(19px,3vw,24px) var(--font-ui);margin:0 0 14px;}
.chem-step h2:focus{outline:none;}
.chem-step-body > :first-child{margin-top:0;}
.chem-step-body > :last-child{margin-bottom:0;}
.chem-ls-actions{display:flex;align-items:center;gap:12px;margin-top:26px;}
.chem-ls-actions[hidden],.chem-ls-actions [hidden]{display:none;}
.chem-ls-back{font:800 14.5px var(--font-ui);color:var(--muted);background:none;border:0;padding:10px 6px;cursor:pointer;}
.chem-ls-back:hover{color:var(--ink);}
.chem-ls-go{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:900 15px var(--font-ui);color:var(--paper);background:var(--cink);padding:13px 24px;border-radius:var(--radius);border:0;cursor:pointer;text-decoration:none;box-shadow:var(--lift-sm);}
.chem-ls-go:hover{filter:brightness(1.07);color:var(--paper);}
.chem-ls-related{margin:22px 0 30px;display:flex;flex-direction:column;gap:10px;}
.chem-ls-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;}
.chem-ls-label{font:900 10.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:74px;}
.chem-ls-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;}
.chem-ls-chips a,.chem-ls-chips .chem-unbuilt,.chem-ls-chips summary{display:inline-block;color:var(--ink);background:var(--white);border:var(--bw,2px) solid var(--line);border-radius:var(--radius-sm);padding:6px 11px;font:700 12.5px var(--font-ui);text-decoration:none;}
.chem-ls-chips details{display:contents;}
.chem-ls-chips summary{cursor:pointer;color:var(--cink);list-style:none;}
@media (prefers-reduced-motion:no-preference){.chem-stepped .chem-step.is-on{animation:chem-step-in .25s ease both;}}
@keyframes chem-step-in{from{opacity:0;transform:translateY(6px);}}
@media (max-width:900px){
  .chem-ls{display:block;}
  .chem-ls-rail{position:static;max-height:none;overflow:visible;padding:14px 0 0;gap:10px;}
  .chem-ls-links{flex-direction:row;flex-wrap:wrap;gap:6px 18px;}
  .chem-ls-steps{flex-direction:row;flex-wrap:wrap;gap:6px;}
  .chem-ls-steps a{padding:5px 9px 5px 5px;background:var(--white);box-shadow:var(--lift-sm);}
  .chem-stepped .chem-ls-steps .t{display:none;}
  .chem-stepped .chem-ls-steps .current .t{display:inline;}
}
@media (max-width:560px){.chem-ls-label{min-width:0;flex-basis:100%;}}
/* No JavaScript: the lesson reads as one scroll, every part shown, no step
   controls (the stepped classes are in the markup for the first paint). */
@media (scripting: none){.chem-stepped .chem-step{display:block;margin:0 0 28px;}.chem-ls-prog,.chem-ls-actions{display:none;}.chem-stepped .chem-ls-steps .t{display:inline;}}
@media print{.chem-ls{display:block;}.chem-ls-rail,.chem-ls-actions{display:none !important;}.chem-stepped .chem-step{display:block;}}

/* Glossary terms in running text: underlined, with a definition on hover,
   focus or tap (chem-glossary.js). */
.gl{text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help;color:inherit;}
a.gl{cursor:pointer;}

/* Questions. */
.chem-qs{display:grid;gap:14px;}
.chem-q{background:var(--white);box-shadow:var(--lift-sm);border-radius:16px;padding:16px 18px;}
.chem-q-stem{margin:0 0 10px;font-weight:700;}
.chem-q-n{color:var(--cink);font-weight:900;}
.chem-opts{margin:0;padding-left:20px;}
.chem-opt-btns{display:grid;gap:8px;}
.chem-opt{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:12px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--paper);color:var(--ink);font:700 15px/1.45 var(--font-ui);cursor:pointer;}
.chem-opt:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--cink);}
.chem-opt[aria-disabled="true"]{cursor:default;}
.chem-opt[aria-checked="true"]{border-color:var(--cink);background:var(--ctint);}
.chem-opt.is-right{border-color:var(--good, #1B7B5B);background:var(--good-tint, rgba(27,123,91,0.1));}
.chem-opt.is-wrong{border-color:var(--bad, #B3261E);background:var(--bad-tint, rgba(179,38,30,0.08));}
.chem-opt .chem-opt-why{display:block;font-weight:600;font-size:13.5px;color:var(--muted);margin-top:4px;}
.chem-q-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.chem-q-feedback{margin-top:12px;font-weight:600;line-height:1.6;}
.chem-q-feedback .chem-verdict{font-weight:900;}
.chem-q-feedback .ok{color:var(--good-text, #1B7B5B);} .chem-q-feedback .no{color:var(--bad-text, #B3261E);}
.chem-order{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.chem-order li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--paper);}
.chem-order li.pos-ok{border-color:var(--good, #1B7B5B);} .chem-order li.pos-no{border-color:var(--bad, #B3261E);}
.chem-order .chem-order-text{flex:1;font-weight:700;}
.chem-order button{min-width:34px;min-height:34px;border-radius:9px;border:0;background:var(--ctint);color:var(--cink);font:900 15px var(--font-ui);cursor:pointer;}
.chem-predict{width:100%;border-collapse:collapse;}
.chem-predict th,.chem-predict td{padding:8px 6px;border-bottom:1px solid var(--line, rgba(0,0,0,0.1));text-align:left;}
.chem-predict .chem-dir{display:flex;gap:6px;flex-wrap:wrap;}
.chem-predict .chem-dir button{padding:6px 12px;border-radius:10px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--paper);font:800 13.5px var(--font-ui);color:var(--ink);cursor:pointer;}
.chem-predict .chem-dir button[aria-pressed="true"]{border-color:var(--cink);background:var(--ctint);}
.chem-predict tr.var-ok th{color:var(--good-text, #1B7B5B);} .chem-predict tr.var-no th{color:var(--bad-text, #B3261E);}
.chem-predict .chem-var-why{font-weight:600;font-size:13.5px;color:var(--muted);}
.chem-q-key summary{cursor:pointer;font-weight:800;color:var(--cink);margin-top:8px;}
.js .chem-q-key{display:none;}

/* Mastery text, study cards and filters. */
.chem-mastery{font:900 12.5px var(--font-ui);color:var(--cink);}
.chem-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.chem-cards li a{display:flex;flex-direction:column;gap:4px;height:100%;padding:15px 17px;border-radius:16px;background:var(--white);box-shadow:var(--lift-sm);text-decoration:none;color:var(--ink);}
.chem-cards li a span{color:var(--muted);font:600 13.5px/1.45 var(--font-ui);}
.chem-filter{display:inline-flex;align-items:center;gap:8px;font:800 13.5px var(--font-ui);margin-top:6px;}
.chem-filter input,.chem-filter select{padding:8px 11px;border-radius:10px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--paper);color:var(--ink);font:700 14px var(--font-ui);}


/* ============ Unit, notes and Learn pages
   The textbook layout is shared by every course: assets/course/book.css
   (.bk-*), loaded by those pages after base.css. Only Chem specifics stay. */

@media (max-width:560px){
  .chem-part h2{font-size:19px;}
}
@media print{
  .chem-toggle-labels,.chem-q-actions,#site-header,.course-nav{display:none !important;}
  .js .chem-q-key{display:block;}
}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.chem-cover{position:absolute;background:#fff;border-radius:3px;pointer-events:none;}
.chem-fix{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.chem-pin{position:absolute;background:#fff;border:3px solid var(--accent,#A33B26);border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font:800 14px var(--font-ui,system-ui);color:var(--accent,#A33B26);pointer-events:none;}
.chem-report-page{margin:18px 0 0;color:var(--muted);font:600 13px/1.5 var(--font-ui);}

/* Learn: the book column keeps the footer below the fold while the chosen
   chapter's topics load in order (chem-book.js), so nothing on screen moves. */
#chem-book{min-height:100vh;}

/* ============================================================ AP Chemistry additions */
/* 44 px touch targets on every control a student answers with. */
.chem-opt,.chem-ls-go,.chem-ls-back,.bk-btn,.chem-check,.chem-dir button,.chem-order button,.chem-num input{min-height:44px;}
.chem-order button{min-width:44px;}
.chem-foot .report-btn,.chem-report-page .report-btn{min-height:44px;}
.chem-disclaimer{color:var(--muted);font:600 12.5px/1.5 var(--font-ui);max-width:760px;margin:8px 0 0;}
.chem-review-note{font:700 13.5px/1.5 var(--font-ui);color:var(--muted);margin:14px 0 0;}
.chem-soon{padding:18px 20px;border-radius:var(--radius-lg,18px);background:var(--white);border:var(--bw,2px) solid var(--line);font-weight:700;}
.chem-hero{padding-top:22px;}

/* Answer marks: a word as well as a colour (A&P decision 81). */
.chem-mark{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font:900 11.5px var(--font-ui);vertical-align:middle;}
.chem-mark.ok{background:var(--good-text,#1B7B5B);color:var(--white,#fff);}
.chem-mark.no{background:var(--bad-text,#B3261E);color:var(--white,#fff);}
.chem-mark.miss{background:var(--amber-text,#8A5A00);color:var(--white,#fff);}
.chem-mark.ok::before{content:"\2713  ";}.chem-mark.no::before{content:"\2715  ";}
.chem-dir button[aria-checked="true"]{border-color:var(--cink);background:var(--ctint);}
.chem-predict .chem-dir{display:flex;gap:6px;flex-wrap:wrap;}
.chem-predict .chem-dir button{padding:6px 12px;border-radius:10px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--paper);font:800 13.5px var(--font-ui);color:var(--ink);cursor:pointer;}

/* Stimulus sets: one panel, then its 4-5 questions, held together. */
.chem-set{border:var(--bw,2px) solid var(--line);border-radius:18px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:var(--paper);}
.chem-set>*,.chem-qs>*{min-width:0;}
.chem-qs{grid-template-columns:minmax(0,1fr);}
.chem-stim{background:var(--white);border-radius:14px;padding:16px 18px;box-shadow:var(--lift-sm);}
.chem-stim-k{font:900 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cink);margin:0 0 4px;}
.chem-stim h3{font:900 17px var(--font-ui);margin:0 0 8px;}
.chem-stim-text p{font-weight:600;line-height:1.6;margin:0 0 10px;}
table.chem-data{width:100%;border-collapse:collapse;font:600 14px/1.45 var(--font-ui);}
table.chem-data caption{text-align:left;font:800 13px var(--font-ui);color:var(--muted);padding:0 0 6px;}
table.chem-data th,table.chem-data td{padding:8px 10px;border-bottom:1px solid var(--line, rgba(0,0,0,0.1));text-align:left;vertical-align:top;}
table.chem-data thead th{background:var(--ctint);color:var(--cink);}
table.chem-data td{font-variant-numeric:tabular-nums;}

/* Charts drawn by the generator (scripts/lib/apchem-build.mjs chartSvg).
   Series differ by colour AND marker shape, in light and dark. */
:root{--chem-s1:#0072B2;--chem-s2:#D55E00;--chem-s3:#009E73;--chem-s4:#CC79A7;--chem-s5:#5E5E5E;}
:root[data-theme="dark"]{--chem-s1:#6CB8EC;--chem-s2:#FF9A5C;--chem-s3:#4FD1AA;--chem-s4:#E7A5CA;--chem-s5:#C9C9C9;}
.chem-chart{margin:4px 0;}
.chem-svg{width:100%;max-width:560px;height:auto;display:block;}
.chem-svg .axis{stroke:var(--ink);stroke-width:1.5;}
.chem-svg .grid{stroke:var(--line, rgba(0,0,0,0.1));stroke-width:1;}
.chem-svg .tick{fill:var(--muted);font:700 12px var(--font-ui);}
.chem-svg .lbl{fill:var(--ink);font:800 13px var(--font-ui);}
.chem-svg .series{fill:none;stroke-width:2.5;}
.chem-svg .err{stroke:var(--ink);stroke-width:1.5;fill:none;}
.chem-svg .s1{stroke:var(--chem-s1);} .chem-svg .s2{stroke:var(--chem-s2);} .chem-svg .s3{stroke:var(--chem-s3);} .chem-svg .s4{stroke:var(--chem-s4);} .chem-svg .s5{stroke:var(--chem-s5);} .chem-svg .series.s5{stroke-dasharray:7 4;}
.chem-svg .pt.s1,.chem-svg .bar.s1{fill:var(--chem-s1);} .chem-svg .pt.s2,.chem-svg .bar.s2{fill:var(--chem-s2);} .chem-svg .pt.s3,.chem-svg .bar.s3{fill:var(--chem-s3);} .chem-svg .pt.s4,.chem-svg .bar.s4{fill:var(--chem-s4);} .chem-svg .pt.s5,.chem-svg .bar.s5{fill:var(--chem-s5);}
.chem-legend{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 0;font:800 13px var(--font-ui);}
.chem-legend i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;}
.chem-legend .s1 i{background:var(--chem-s1);} .chem-legend .s2 i{background:var(--chem-s2);} .chem-legend .s3 i{background:var(--chem-s3);} .chem-legend .s4 i{background:var(--chem-s4);} .chem-legend .s5 i{background:var(--chem-s5);}
.chem-chart-data summary{cursor:pointer;font:800 13px var(--font-ui);color:var(--cink);margin-top:6px;min-height:32px;}

/* Numeric answers. */
.chem-num{display:flex;flex-direction:column;gap:6px;}
.chem-num label{font:800 14px var(--font-ui);}
.chem-num-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chem-num input{width:12ch;padding:8px 12px;border-radius:12px;border:2px solid var(--line, rgba(0,0,0,0.2));background:var(--paper);color:var(--ink);font:800 17px var(--font-mono, monospace);}
.chem-num input:focus-visible{outline:3px solid var(--cink);outline-offset:2px;}
.chem-num-unit{font:800 15px var(--font-ui);color:var(--muted);}
.chem-num-ulabel{font:800 14px var(--font-ui);margin-left:6px;}
.chem-num input.chem-num-u{width:10ch;}
/* Value, units and significant figures, each with its own mark. */
.chem-num-parts{list-style:none;margin:8px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:700 14px var(--font-ui);}
.chem-num-parts li{display:flex;align-items:center;gap:6px;}
.chem-num-notes{margin:6px 0;padding-left:20px;font-size:14.5px;line-height:1.5;}
.chem-num-notes li{margin:2px 0;}



/* Glossary page: its styles are inlined in chem/glossary.html (build-apchem.mjs, GLOSSARY_CSS). */

/* The printable unit sheet: one page on screen, compact on paper. */
.chem-sheet-head h1{margin:6px 0 10px;}
.chem-sheet-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin:10px 0 24px;}
.chem-sheet-topic{background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:var(--lift-sm);font:600 13.5px/1.5 var(--font-ui);}
.chem-sheet-topic h2{font:900 16px var(--font-ui);margin:0 0 6px;}
.chem-sheet-topic h2 span{color:var(--cink);}
.chem-sheet-topic ul{margin:6px 0;padding-left:18px;}
.chem-sheet-chain{color:var(--muted);}
.chem-sheet-terms{margin:6px 0 0;display:grid;gap:4px;}
.chem-sheet-terms dt{display:inline;font-weight:900;}
.chem-sheet-terms dt::after{content:": ";}
.chem-sheet-terms dd{display:inline;margin:0;}
@media print{
  body.chem{background:#fff;color:#000;}
  .chem-foot .privacy-link,.chem-crumb,.chem-nav-ref .btn-press,.report-btn{display:none !important;}
  .chem-sheet-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .chem-sheet-topic{box-shadow:none;border:1px solid #999;padding:8px 10px;font-size:10.5pt;break-inside:avoid;}
  .chem-sheet-head h1{font-size:16pt;}
  .chem-set{border-color:#999;}
}
@media (max-width:560px){.chem-sheet-grid{grid-template-columns:minmax(0,1fr);}.chem-set{padding:10px;}}

/* Share bar: Share to Google Classroom, Copy link, Print (lessons, notes,
   unit sheets, FRQs; scripts/build-apchem.mjs shareBar). Fixed height, so
   nothing shifts when the copy label changes. */
.chem-share{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;}
.chem-share-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--line, rgba(0,0,0,0.12));background:var(--white);color:var(--cink);font:800 13.5px var(--font-ui);text-decoration:none;cursor:pointer;white-space:nowrap;min-width:7.5em;justify-content:center;}
.chem-share-btn:hover{border-color:var(--cink);color:var(--cink);}
.chem-share-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
@media print{.chem-share{display:none !important;}}