/* Topic 5 (calculus) styling.
 *
 * Imports the Topic 4 sheet rather than copying it, so the palette cannot drift
 * between the two topics. Everything below is additions Topic 5 needs and
 * Topic 4 does not: animation controls, stacked twin panels for f against f',
 * the term-by-term derivative reveal, and live equation readouts.
 *
 * The animations are hand-rolled SVG driven by requestAnimationFrame, not
 * JSXGraph. Topic 4 needed draggable points on a scatter and the library earned
 * its 950KB there; here the motion is a smooth sweep with easing, which raw SVG
 * does better, lighter, and with nothing to load from anywhere.
 */
@import url("/topic-4/lesson.css");

/* ---- figure frame ---------------------------------------------------- */
.fig { width:100%; background:var(--card); border:1px solid var(--line);
       border-radius:10px; display:block; touch-action:none; }
.figcap { font-size:14.5px; color:var(--soft); text-align:center; margin:8px 0 0; }

/* ---- play bar: a button, a scrub slider, a live value ----------------- */
.playbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 2px; }
.playbar button.play { font-size:15.5px; font-weight:700; padding:9px 20px; border:none;
       border-radius:999px; background:var(--mint); color:#06211b; cursor:pointer;
       min-width:116px; }
.playbar button.play:hover { filter:brightness(1.08); }
.playbar input[type=range] { flex:1; min-width:150px; accent-color:var(--mint); }
.playbar .val { font-family:"Literata",Georgia,serif; font-size:19px; min-width:5.4em;
       text-align:right; font-variant-numeric:tabular-nums; }

/* ---- live readouts --------------------------------------------------- */
.reads { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin:12px 0 4px; }
.reads > div { text-align:center; }
.reads b { font-family:"Literata",Georgia,serif; font-size:23px; display:block;
       font-variant-numeric:tabular-nums; line-height:1.15; }
.reads span { font-size:14px; color:var(--soft); }

/* a verdict word that changes colour with the sign of f' */
.verdict { display:inline-block; font-weight:700; font-size:15px; padding:4px 14px;
       border-radius:999px; border:1.5px solid currentColor; }
.verdict.up   { color:var(--good); }
.verdict.down { color:var(--bad); }
.verdict.flat { color:var(--warm); }

/* a live equation, monospaced digits so it does not jiggle while animating */
.eqline { font-family:"Literata",Georgia,serif; font-size:20px; text-align:center;
       margin:4px 0 0; font-variant-numeric:tabular-nums; }
.eqline.alt { color:var(--warm); font-size:18px; }

/* ---- the filling table (5.1) ----------------------------------------- */
table.fill { width:100%; border-collapse:collapse; font-size:16px; margin:14px 0 4px;
       font-variant-numeric:tabular-nums; }
table.fill th, table.fill td { border:1px solid var(--line); padding:7px 9px; text-align:center; }
table.fill th { background:rgba(29,107,87,.1); font-weight:600; }
table.fill tr.pending td { color:var(--line); }
table.fill tr.lit td { background:rgba(29,122,95,.1); font-weight:600;
       transition:background .35s ease; }
table.fill tr.limit td { border-top:2px solid var(--mint); font-weight:700; }

/* ---- term-by-term derivative reveal (5.3) ---------------------------- */
.terms { margin:16px 0 6px; }
.termrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
       padding:11px 13px; border:1px solid var(--line); border-radius:10px;
       background:var(--paper); margin-bottom:9px;
       opacity:.34; transform:translateY(5px);
       transition:opacity .4s ease, transform .4s ease, border-color .4s ease; }
.termrow.on { opacity:1; transform:none; border-color:var(--mint); }
.termrow .from { font-family:"Literata",Georgia,serif; font-size:20px; min-width:4.6em; }
.termrow .arrow { color:var(--soft); font-size:18px; }
.termrow .to { font-family:"Literata",Georgia,serif; font-size:20px; font-weight:700;
       color:var(--mint); min-width:4.6em; }
.termrow .why { font-size:14.5px; color:var(--soft); flex:1 1 190px; }
.answer { font-family:"Literata",Georgia,serif; font-size:21px; text-align:center;
       padding:14px; border:2px solid var(--mint); border-radius:10px;
       background:var(--card); margin-top:4px;
       opacity:0; transform:scale(.97); transition:opacity .45s ease, transform .45s ease; }
.answer.on { opacity:1; transform:none; }

/* ---- small helpers --------------------------------------------------- */
.sidebyside { display:grid; gap:14px; }
@media (min-width:640px) { .sidebyside.two { grid-template-columns:1fr 1fr; } }
.chip { display:inline-block; font-size:13px; font-weight:600; color:var(--mint);
       border:1px solid var(--mint); border-radius:999px; padding:3px 11px; margin-bottom:18px; }
.chip.hl { color:var(--warm); border-color:var(--warm); }
.fallback { padding:16px 18px; border:1px dashed var(--line); border-radius:10px;
       color:var(--soft); font-size:15px; }
.soon { opacity:.6; border-left-color:var(--line) !important; }
.soon strong::after { content:" (not built yet)"; font-weight:400; font-size:14px; color:var(--soft); }

@media (prefers-reduced-motion:reduce) {
  .termrow, .answer { transition:none; }
}

/* ---- the retrieval and transfer block (retain.js) --------------------- */
/* Deliberately set apart from the lesson above it: this is work to come back
   to, not more reading. */
section.retain { border-top:2px solid var(--mint); margin-top:40px; padding-top:22px; }
section.retain h2 { margin-top:0; }
section.retain .why { color:var(--soft); font-size:15.5px; }
section.retain .spacing { font-size:15px; background:rgba(29,107,87,.08);
  border-left:3px solid var(--mint); padding:10px 14px; border-radius:0 8px 8px 0;
  margin:14px 0 18px; }

ol.mix { list-style:none; counter-reset:mix; padding:0; margin:0; }
ol.mix > li { counter-increment:mix; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:15px 18px; margin-bottom:12px; position:relative; }
ol.mix > li::before { content:counter(mix); position:absolute; left:-11px; top:14px;
  width:24px; height:24px; border-radius:50%; background:var(--mint); color:#fff;
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
ol.mix > li > p { margin:0 0 10px; }
ol.mix .tagline { font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--warm); margin-bottom:5px; }
ol.mix button.rev { font:inherit; font-size:14.5px; font-weight:600; color:var(--mint);
  background:none; border:1px solid var(--mint); border-radius:999px;
  padding:5px 15px; cursor:pointer; }
ol.mix button.rev:hover { background:rgba(29,107,87,.08); }
ol.mix .ans { margin-top:11px; font-size:15.5px; border-left:3px solid var(--mint);
  padding-left:12px; }
ol.mix .ans b { color:var(--mint); }

.transfer { margin-top:22px; background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--warm); border-radius:0 12px 12px 0; padding:15px 18px; }
.transfer strong.h { display:block; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--warm); margin-bottom:9px; }
.transfer ul { margin:0; padding-left:19px; font-size:15.5px; }
.transfer li { margin-bottom:7px; }
.transfer li:last-child { margin-bottom:0; }

/* ---- levelled question bank on a teacher page ------------------------ */
/* Three tiers, in the ascotmaths pattern: fluency, then a real context,
   then a challenge. A teacher sets the tier the class needs. */
.tiers { margin: 18px 0 8px; }
.tier { border:1px solid var(--line); border-radius:12px; padding:16px 18px;
        margin-bottom:14px; background:var(--card); border-left:4px solid var(--mint); }
.tier.t2 { border-left-color:var(--warm); }
.tier.t3 { border-left-color:var(--bad); }
.tier > h3 { margin:0 0 3px; font-size:16.5px; display:flex; align-items:baseline; gap:10px; }
.tier .num { display:inline-flex; align-items:center; justify-content:center;
             width:23px; height:23px; border-radius:50%; background:var(--mint);
             color:#fff; font-size:12.5px; font-weight:700; flex:none; }
.tier.t2 .num { background:var(--warm); }
.tier.t3 .num { background:var(--bad); }
.tier > p.what { margin:0 0 12px; font-size:14.5px; color:var(--soft); }
.tier ol { margin:0; padding-left:20px; }
.tier li { margin-bottom:11px; font-size:15.5px; }
.tier li:last-child { margin-bottom:0; }
.tier .skill { display:block; font-size:12px; font-weight:700; letter-spacing:.05em;
               text-transform:uppercase; color:var(--soft); margin-bottom:2px; }
.tier .ans { color:var(--mint); font-weight:600; }
.tier.t2 .ans { color:var(--warm); }
.tier.t3 .ans { color:var(--bad); }

/* ---- a worked example revealed a line at a time (worked.js) ---------- */
.worked { border:1px solid var(--line); border-left:4px solid var(--mint);
  border-radius:0 12px 12px 0; background:var(--card); padding:16px 19px; margin:16px 0 20px; }
.worked > p.q { margin:0 0 4px; font-weight:600; }
.worked > p.ask { margin:0 0 14px; font-size:15px; color:var(--soft); }
.worked ol.steps { list-style:none; counter-reset:wk; margin:0; padding:0; }
.worked ol.steps > li { counter-increment:wk; padding:9px 0 9px 34px; position:relative;
  border-top:1px solid var(--line); outline:none; }
.worked ol.steps > li:first-child { border-top:0; }
.worked ol.steps > li::before { content:counter(wk); position:absolute; left:0; top:10px;
  width:22px; height:22px; border-radius:50%; background:var(--mint); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.worked .line { font-size:17px; }
.worked .why { display:block; font-size:14.5px; color:var(--soft); margin-top:3px; }
.worked .final { font-weight:600; }
.worked .final .line { color:var(--mint); }
.worked .bar { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.worked button { font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  border-radius:999px; padding:8px 18px; }
.worked button.next { color:#fff; background:var(--mint); border:0; }
.worked button.next:hover { filter:brightness(1.08); }
.worked button.again { color:var(--mint); background:none; border:1px solid var(--mint); }
.worked .alldone { font-size:14.5px; color:var(--soft); }