/* fbise-notes@1 reader styles. Dark only. Tokens first (see DESIGN.md); every fill and line is an opaque step of one slate ramp.
   Each subject has its own ink (accent); the page re-inks itself through the registered --accent properties. */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #edeef0; }
@property --accent-hover { syntax: '<color>'; inherits: true; initial-value: #d3d5d9; }
@property --accent-subtle { syntax: '<color>'; inherits: true; initial-value: #272a2d; }
@property --accent-line { syntax: '<color>'; inherits: true; initial-value: #363a3f; }
@property --accent-ring { syntax: '<color>'; inherits: true; initial-value: #43484e; }

:root {
  color-scheme: dark;
  /* Radix slate dark: 1 and 2 backgrounds, 3 to 5 fills, 3 to 8 lines, 11 and 12 text */
  --n1: #111113; --n2: #18191b; --n3: #212225; --n4: #272a2d; --n5: #2e3135; --n6: #363a3f;
  --n7: #43484e; --n8: #5a6169; --n9: #696e77; --n10: #777b84; --n11: #b0b4ba; --n12: #edeef0;

  --bg: var(--n1);
  --bg-subtle: var(--n2);
  --surface: var(--n3);           /* 1.19:1 on the page: stands alone */
  --surface-hover: var(--n4);
  --raised: var(--n3);
  --well: #0b0b0c;                /* darker than the page; the one box that keeps a line */
  --fill: var(--n3); --fill-hover: var(--n4); --fill-active: var(--n5);
  --line-subtle: var(--n3); --line: var(--n4); --line-strong: var(--n6);

  --fg: #edeef0;                  /* never #fff */
  --fg-hover: #d3d5d9;
  --fg-secondary: var(--n11);
  --fg-muted: #9ea2a9;            /* 7.3:1 on the page, 5.1:1 on a fill inside a surface */
  --fg-disabled: #5d6168;

  /* subject inks: Radix step 11 for ink, step 3 for the tinted solid, step 6 for a line in that hue */
  --physics: #70b8ff;    --physics-subtle: #0d2847;    --physics-line: #104d87;
  --chemistry: #ff977d;  --chemistry-subtle: #391714;  --chemistry-line: #742a1f;
  --maths: #ffca16;      --maths-subtle: #302008;      --maths-line: #573a00;
  --cs: #baa7ff;         --cs-subtle: #291f43;         --cs-line: #473876;
  --pakstudies: #71d083; --pakstudies-subtle: #132d21; --pakstudies-line: #20573e;
  --english: #ff8dcc;    --english-subtle: #37172f;    --english-line: #69204f;
  /* ring tracks: Radix step 8, bright enough to read as the subject's colour at 0% */
  --physics-ring: #2870bd; --chemistry-ring: #b54548; --maths-ring: #8f6424; --cs-ring: #6958ad; --pakstudies-ring: #3e7949; --english-ring: #a84885;

  /* the current ink: neutral at home, the subject's hue inside a subject */
  --accent: var(--n12); --accent-hover: var(--fg-hover); --accent-subtle: var(--n4); --accent-line: var(--n6); --accent-ring: var(--n7);
  --on-accent: var(--n1);         /* text on a filled accent: the page colour, 8:1 or better on every ink */

  --ok: #3dd68c; --ok-subtle: #132d21;
  --danger: #ff6369; --danger-subtle: #3b1219; --danger-line: #72232d;
  --warn: #ffca16; --warn-subtle: #302008;

  --ring: var(--accent);
  --c1: var(--accent); --c2: var(--fg); --c3: #70b8ff; --c4: #3dd68c;   /* graph series */
  --grid: var(--n5);
  --axis: var(--n10);
  --area: color-mix(in oklab, var(--accent) 22%, transparent);   /* data overlay over a grid it cannot know */

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-full: 9999px;
  --font: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --read-size: 16px;
}
:root[data-subject="physics"]    { --accent: var(--physics);    --accent-subtle: var(--physics-subtle);    --accent-line: var(--physics-line); --accent-ring: var(--physics-ring); }
:root[data-subject="chemistry"]  { --accent: var(--chemistry);  --accent-subtle: var(--chemistry-subtle);  --accent-line: var(--chemistry-line); --accent-ring: var(--chemistry-ring); }
:root[data-subject="maths"]      { --accent: var(--maths);      --accent-subtle: var(--maths-subtle);      --accent-line: var(--maths-line); --accent-ring: var(--maths-ring); }
:root[data-subject="cs"]         { --accent: var(--cs);         --accent-subtle: var(--cs-subtle);         --accent-line: var(--cs-line); --accent-ring: var(--cs-ring); }
:root[data-subject="pakstudies"] { --accent: var(--pakstudies); --accent-subtle: var(--pakstudies-subtle); --accent-line: var(--pakstudies-line); --accent-ring: var(--pakstudies-ring); }
:root[data-subject="english"]    { --accent: var(--english);    --accent-subtle: var(--english-subtle);    --accent-line: var(--english-line); --accent-ring: var(--english-ring); }
:root[data-subject] { --accent-hover: color-mix(in oklab, var(--accent) 82%, white); }
/* when the inks change graph series 3 collides with physics blue; swap it for violet there */
:root[data-subject="physics"] { --c3: #baa7ff; }

.notes { font-family: var(--font); font-size: var(--read-size); line-height: 1.65; color: var(--fg); }
.notes p, .notes li, .notes dd { text-wrap: pretty; }
.notes .katex { font-size: 1.07em; }
.notes .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.notes .muted { color: var(--fg-muted); }
.notes .lbl { font-weight: 550; color: var(--fg-secondary); }
.notes strong, .notes b, .notes th { font-weight: 550; }
.notes em { font-style: oblique 10deg; }

/* unit header */
.unit-head { padding-top: 4px; }
.unit-head h1 { font-size: 30px; line-height: 1.15; font-weight: 550; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.unit-meta { margin: 10px 0 0; font-size: 14px; color: var(--fg-secondary); }
.unit-stats { margin: 2px 0 0; font-size: 14px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.unit-partial { margin: 12px 0 0; font-size: 14px; color: var(--warn); }
.lead { font-size: 1.0625em; color: var(--fg-secondary); margin: 24px 0 0; }
.slos { margin-top: 16px; font-size: 15px; color: var(--fg-secondary); }
.slos summary { cursor: pointer; color: var(--fg-muted); width: max-content; min-height: 32px; display: flex; align-items: center; }

/* sections */
.sec { margin-top: 56px; scroll-margin-top: 80px; }
.sec > h2 { font-size: 21px; line-height: 1.3; font-weight: 550; letter-spacing: -0.01em; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sec-ref { color: var(--fg-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sec-exam, .sec-pages { font-size: 13px; font-weight: 500; color: var(--fg-muted); letter-spacing: 0; }
.sec-exam { color: var(--accent); }
.sec > p, .sec > .list { margin: 12px 0 0; }
.bh3 { font-size: 1em; font-weight: 550; margin: 24px 0 4px; }
.bh4 { font-size: .9375em; font-weight: 550; margin: 18px 0 2px; color: var(--fg-secondary); }
.notes p { margin: 10px 0 0; }
.list { padding-left: 22px; margin: 10px 0 0; }
.list li + li { margin-top: 4px; }
.list li::marker { color: var(--fg-muted); }

/* equations */
.eq { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.eq-body { flex: 1; min-width: 0; }
.eq-label { color: var(--fg-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.eq-note { font-size: 14px; color: var(--fg-muted); margin-top: 2px !important; }
.tex-err { color: var(--danger); background: var(--danger-subtle); border-radius: var(--r-xs); padding: 0 4px; font-family: var(--mono); font-size: 13px; }
.tex-raw { font-family: var(--mono); font-size: 13px; }

/* worked steps hang off an answer-book margin rule in the subject's ink */
.work { margin: 14px 0 0; padding-left: 16px; border-left: 2px solid var(--accent-line); }
.work-title { font-weight: 550; font-size: 15px; margin-bottom: 4px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { padding: 6px 0; }
.step + .step { border-top: 1px solid var(--line-subtle); }
.step-math { margin-top: 2px; }
.step-note { font-size: 14px; color: var(--fg-muted); margin-top: 2px; }

/* callouts: a solid band, tone named in words */
.callout { margin: 16px 0 0; padding: 12px 16px; background: var(--surface); border-radius: var(--r-md); }
.callout-title { font-weight: 550; font-size: 14px; color: var(--fg-secondary); }
.callout[data-tone="mistake"] { background: var(--danger-subtle); }
.callout[data-tone="mistake"] .callout-title { color: var(--danger); }
.callout[data-tone="exam"], .callout[data-tone="remember"] { background: var(--accent-subtle); }
.callout[data-tone="exam"] .callout-title, .callout[data-tone="remember"] .callout-title { color: var(--accent); }
.callout-body { margin-top: 2px; }

/* derivations */
.derivation { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line-subtle); }
.der-title { font-size: 17px; font-weight: 550; margin: 0; }
.der-kind { color: var(--accent); font-weight: 500; margin-right: 4px; }
.der-goal, .der-meaning { margin-top: 8px !important; }
.der-assume ul { margin: 4px 0 0; padding-left: 22px; }
.der-result { margin: 14px 0 0; padding: 10px 16px; background: var(--accent-subtle); border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.der-result .lbl { font-size: 14px; color: var(--accent); }
.der-result .katex-display { flex: 1; }

/* answers, given, examples */
.answer { margin: 14px 0 0; padding: 8px 16px; background: var(--surface); border-radius: var(--r-md); overflow-x: auto; }
.answer p { margin: 0; }
.given { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 12px 0 0; }
.given ul { list-style: none; margin: 2px 0 0; padding: 0; }
.given li { margin: 2px 0; }
.given .lbl { font-size: 14px; }
.example { margin: 20px 0 0; padding: 14px 16px; background: var(--surface); border-radius: var(--r-md); --fill: var(--n5); --line-subtle: var(--n5); }
.example .answer, .example .callout { background: var(--n5); }
.example-title { font-weight: 550; }
.example-prompt { margin-top: 4px; }
.example-sol { margin-top: 8px; }
.defs { margin: 12px 0 0; }
.defs dt { font-weight: 550; margin-top: 12px; }
.defs dd { margin: 2px 0 0; color: var(--fg-secondary); }

/* tables */
.tbl { overflow-x: auto; margin: 14px 0 0; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; color: var(--fg-muted); font-size: 14px; padding-bottom: 6px; }
.tbl th { text-align: left; font-weight: 550; font-size: 14px; color: var(--fg-secondary); border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; }
.tbl td { border-bottom: 1px solid var(--line-subtle); padding: 8px 12px 8px 0; vertical-align: top; }

/* formula sheet */
.formulas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 12px; }
.formula { min-width: 0; }
.formula { padding: 12px 0; border-bottom: 1px solid var(--line-subtle); }
.f-name { font-weight: 550; font-size: 15px; }
.f-tex { margin-top: 2px; overflow-x: auto; }
.f-where { font-size: 14px; color: var(--fg-muted); margin-top: 2px; }

/* figures */
.fig, .graph, .mol { margin: 18px 0 0; }
.fig figcaption, .graph figcaption, .mol figcaption { font-size: 14px; color: var(--fg-muted); margin-top: 6px; }
.fig-svg { max-width: 560px; color: var(--fg); overflow: visible; }
.fig-svg svg { width: 100%; height: auto; display: block; overflow: visible; }
.fig-svg svg text, .fig-svg .t { fill: var(--fg); font-family: var(--font); font-size: 13px; }
.fig-svg svg text { stroke: none !important; }
.fig-svg .t.sm { font-size: 11px; }
.fig-svg .t.mu, .fig-svg text.mu { fill: var(--fg-muted); }
.fig-svg .t.ac, .fig-svg text.ac { fill: var(--accent); }
.fig-svg .ac { stroke: var(--accent); }
.fig-svg .acf { fill: var(--accent); }
.fig-svg .mu { stroke: var(--fg-muted); }
.fig-svg .muf { fill: var(--fg-muted); }
.fig-svg .soft { fill: var(--n4); }
.fig-svg .ink { fill: var(--fg); }
.fig-svg .c1 { stroke: var(--c1); } .fig-svg .c3 { stroke: var(--c3); } .fig-svg .c4 { stroke: var(--c4); }

/* animated figures: play / pause, a time scrubber and a live readout */
.fig-anim .fig-svg svg { cursor: pointer; }
.anim-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 560px; margin-top: 8px; }
.anim-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: var(--fill); color: var(--fg); cursor: pointer; transition: background-color 150ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.anim-btn:active { transform: scale(0.92); }
.anim-btn svg { width: 16px; height: 16px; }
.fig-anim[data-playing] .anim-btn { background: var(--accent-subtle); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .anim-btn:hover { background: var(--fill-hover); } }
.anim-scrub { flex: 1 1 140px; min-width: 120px; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.anim-scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px; background: var(--fill-active); }
.anim-scrub::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--fill-active); }
.anim-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 9999px; background: var(--accent); border: 0; }
.anim-scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 9999px; background: var(--accent); border: 0; }
.anim-read { flex: 1 1 100%; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.anim-read:empty { display: none; }
.anim-read sub { font-size: 0.75em; line-height: 0; }

/* graphs */
.graph { max-width: 560px; }
.graph-title { font-weight: 550; font-size: 15px; margin-bottom: 6px; }
.graph-box { position: relative; width: 100%; background: var(--surface); border-radius: var(--r-md); overflow: clip; overflow-clip-margin: 4px; }
.graph-box > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-grid { stroke: var(--grid); stroke-width: 1; }
.g-axis { stroke: var(--axis); stroke-width: 1.2; }
.g-tick { stroke: var(--axis); stroke-width: 1; }
.g-arrowhead { fill: var(--axis); }
.g-arrowhead-c1 { fill: var(--c1); } .g-arrowhead-c2 { fill: var(--c2); } .g-arrowhead-c3 { fill: var(--c3); } .g-arrowhead-c4 { fill: var(--c4); }
.g-curve, .g-seg, .g-guide { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-guide { stroke-width: 1.3; }
.g-dashed { stroke-dasharray: 6 5; }
.g-dotted { stroke-dasharray: 1.5 4.5; }
.g-area { fill: var(--area); stroke: none; }
.g-poly { fill: var(--area); stroke: var(--c1); stroke-width: 1.5; }
.g-poly.nofill { fill: none; }
.c1 { stroke: var(--c1); } .c2 { stroke: var(--c2); } .c3 { stroke: var(--c3); } .c4 { stroke: var(--c4); }
.g-open { fill: var(--surface); stroke-width: 1.8; }
.g-closed { stroke-width: 1.8; }
.g-closed.c1 { fill: var(--c1); } .g-closed.c2 { fill: var(--c2); } .g-closed.c3 { fill: var(--c3); } .g-closed.c4 { fill: var(--c4); }
.g-lbl { position: absolute; white-space: nowrap; font-size: 12.5px; line-height: 1; color: var(--fg-secondary); pointer-events: none; }
.g-lbl .katex { font-size: 1em; }
.g-lbl .katex .text, .graph-legend .katex .text { font-family: var(--font); font-size: .86em; }
.g-axislbl { color: var(--fg); font-size: 14px; }
.g-itemlbl { color: var(--fg); font-size: 13px; background: var(--surface); padding: 1px 3px; border-radius: 3px; }
.pos-n { transform: translate(-50%, calc(-100% - 6px)); } .pos-s { transform: translate(-50%, 6px); }
.pos-e { transform: translate(6px, -50%); } .pos-w { transform: translate(calc(-100% - 6px), -50%); }
.pos-ne { transform: translate(5px, calc(-100% - 4px)); } .pos-nw { transform: translate(calc(-100% - 5px), calc(-100% - 4px)); }
.pos-se { transform: translate(5px, 5px); } .pos-sw { transform: translate(calc(-100% - 5px), 5px); }
.pos-c { transform: translate(-50%, -50%); }
.graph-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; }
.graph-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend .key > svg { width: 22px; height: 8px; flex: none; }

/* chemical structures */
.mols { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; margin: 14px 0 0; }
.mols .mol { margin: 0; }
.mol-draw { min-height: 60px; }
.mol-draw svg { max-width: 100%; height: auto; display: block; }
.mol-name { color: var(--fg-secondary); }

/* questions */
.ex-intro { color: var(--fg-secondary); }
.q { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-subtle); scroll-margin-top: 80px; }
.q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.q-n { font-weight: 550; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.q-n:empty { display: none; }
.q-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 0 1 auto; }
.tag { font-size: 12.5px; line-height: 18px; padding: 2px 8px; background: var(--fill); border-radius: var(--r-xs); color: var(--fg-secondary); }
.q-marks { margin-left: auto; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.q-prompt { margin-top: 6px; font-weight: 500; }
.opts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.opt { display: flex; align-items: baseline; gap: 10px; }
.opt-key { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--fill); display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 550; color: var(--fg-secondary); transform: translateY(-1px); }
.opt.correct .opt-key { background: var(--accent); color: var(--on-accent); }
.opt.correct .opt-text { font-weight: 500; }
.opt-mark { font-size: 12.5px; color: var(--accent); }
.sol { margin-top: 12px; }
.sol-label { font-size: 13px; color: var(--fg-muted); }
.sol > p:first-of-type { margin-top: 2px; }
.part { margin-top: 16px; }
.part-head { font-weight: 500; }
.part-label { font-weight: 550; margin-right: 2px; }
.part-answer { font-size: 15px; }
.book-answer, .q-note { font-size: 14px; color: var(--fg-muted); }
.focus { padding-left: 22px; }
.focus li { margin-top: 14px; }
.focus li::marker { color: var(--fg-muted); }
.focus-why { color: var(--fg-muted); font-size: 14px; }
.focus-ref { font-size: 14px; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.focus-ref:hover { text-decoration-color: currentColor; }
.bad-block { color: var(--danger); font-size: 14px; }

/* code listings */
.code { margin: 14px 0 0; }
.code pre { margin: 0; padding: 12px 14px; background: var(--surface); border-radius: var(--r-md); overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: auto; }
.code pre[data-lang="text"] { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.code figcaption { font-size: 14px; color: var(--fg-muted); margin-top: 6px; }

/* phone widths */
.fig { overflow-x: auto; }
/* a long inline equation scrolls inside its own line instead of widening the page */
.notes :is(div, p, li, dd, dt, h4, h5):has(> .katex):not(.katex-display, .eq-body, .f-tex, .g-lbl, .katex *) { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 640px) {
  .unit-head h1 { font-size: 27px; }
  .sec { margin-top: 44px; }
  .work { padding-left: 12px; }
  .q-marks { margin-left: 0; }
}