/* Socratic Tutor UI. One system for the student and teacher pages.
   Palette: royal-blue ink on cool paper; each NCERT chapter has its own colour. */
/* Atkinson Hyperlegible font (self-hosted offline) */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-bold-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/atkinson-hyperlegible-bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #f5f7fb; --sheet: #ffffff; --ink: #1c2140; --ink-2: #4a5170; --rule: #dfe3ee; --rule-2: #eef1f7;
  --royal: #2c3fb8; --royal-soft: #e8ebfb;
  --light: #c98a00; --light-soft: #fdf3dc;   /* Light: reflection and refraction */
  --eye: #7446c4; --eye-soft: #f1ebfb;       /* Human eye and the colourful world */
  --elec: #1a73d1; --elec-soft: #e5f0fc;     /* Electricity */
  --ok: #23845a; --ok-soft: #e2f3ea; --warn: #b86e00; --warn-soft: #fdf0dc; --bad: #c0362c; --bad-soft: #fbe5e2;
  --model: #7446c4; --code: #1a73d1; --person: #c0362c;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 6px; --r: 10px; --r-lg: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12152a; --sheet: #1a1e36; --ink: #e9ebf5; --ink-2: #a6acc8; --rule: #2c3152; --rule-2: #23284a;
  --royal: #8f9cff; --royal-soft: #262c5a;
  --light: #f0b733; --light-soft: #3a2f14; --eye: #b897f5; --eye-soft: #2f2650; --elec: #6fb2f5; --elec-soft: #1c2f4d;
  --ok: #5cc794; --ok-soft: #173326; --warn: #f0a640; --warn-soft: #3a2b14; --bad: #f2867c; --bad-soft: #3d1f1d;
  --model: #b897f5; --code: #6fb2f5; --person: #f2867c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: var(--royal); }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }
.muted { color: var(--ink-2); font-size: 14px; }
.hash { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.error { color: var(--bad); } .okay { color: var(--ok); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--rule-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- header ---------- */
header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; background: var(--sheet); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.prism { width: 30px; height: 30px; flex: none; position: relative; }
.prism::before { content: ""; position: absolute; inset: 2px 3px 4px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.prism::after { content: ""; position: absolute; right: -6px; top: 15px; width: 14px; height: 7px; background: linear-gradient(180deg, #e04a3b 0 20%, #f2a516 20% 40%, #3fa34d 40% 60%, #2a6fdb 60% 80%, #7446c4 80%); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
header h1 { font-size: 19px; margin: 0; letter-spacing: -.01em; }
header .sub { color: var(--ink-2); font-size: 13.5px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- controls ---------- */
button, .btn { font: inherit; font-size: 15px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; }
button:hover, .btn:hover { border-color: var(--ink-2); }
button.primary { background: var(--royal); color: #fff; border-color: var(--royal); font-weight: 700; }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--bad); }
button.ghost { border-color: transparent; background: none; color: var(--ink-2); }
button.theme-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; font-size: 16px; border-radius: var(--r-sm); }
button:disabled { opacity: .5; cursor: default; }
input:disabled, textarea:disabled, select:disabled { opacity: .6; cursor: not-allowed; background: var(--rule-2); }
input, textarea, select { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 9px 11px; }
textarea { width: 100%; resize: vertical; }
select { max-width: 100%; }
label { display: block; margin-top: 8px; }
.seg { display: inline-flex; background: var(--rule-2); border-radius: 999px; padding: 3px; }
.seg button { border: none; background: none; border-radius: 999px; padding: 6px 16px; color: var(--ink-2); }
.seg button.on { background: var(--sheet); color: var(--royal); font-weight: 700; box-shadow: 0 1px 2px rgba(28, 33, 64, .12); }

/* ---------- layout ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 20px; }
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; }
.layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.layout aside { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-bottom: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
h2 { font-size: 17px; margin: 0 0 4px; }
h3 { font-size: 15.5px; margin: 0; }

/* ---------- intro (student, first view) ---------- */
.intro { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; border-left: 4px solid var(--royal); }
.intro p { margin: 4px 0 10px; max-width: 62ch; color: var(--ink-2); }
.chapters { display: flex; gap: 8px; flex-wrap: wrap; }
.ch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 3px 12px 3px 8px; border-radius: 999px; font-weight: 700; }
.ch::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ch.light { color: var(--light); background: var(--light-soft); } .ch.eye { color: var(--eye); background: var(--eye-soft); } .ch.elec { color: var(--elec); background: var(--elec-soft); }
.try { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.try button { font-size: 14px; border-style: dashed; color: var(--ink-2); }

/* ---------- the ray: what happens to a message ---------- */
.ray-wrap h3 { margin-bottom: 2px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--c); }
.ray { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-top: 14px; }
.ray::before { content: ""; position: absolute; left: 4%; right: 4%; top: 20px; height: 2px; background: var(--rule); }
.ray .beam { position: absolute; left: 4%; top: 19px; height: 4px; width: 0; border-radius: 2px; background: linear-gradient(90deg, #e04a3b, #f2a516, #3fa34d, #2a6fdb, #7446c4); transition: width .45s ease; }
.station { position: relative; text-align: center; font-size: 12.5px; color: var(--ink-2); padding-top: 18px; }
.station .dot { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule); transition: all .25s; }
.station b { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.25; }
.station .who { font-size: 11.5px; }
.station.lit .dot { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.station.lit b { color: var(--ink); }
.station.skip { opacity: .45; }
.ray.working .station.next .dot { animation: pulse 1s ease-in-out infinite; border-color: var(--royal); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--royal-soft); } }
@media (prefers-reduced-motion: reduce) { .ray .beam, .station .dot { transition: none; } .ray.working .station.next .dot { animation: none; } }
.who-model { color: var(--model); } .who-code { color: var(--code); } .who-person { color: var(--person); }

/* ---------- quiz card ---------- */
.quiz { border-top: 4px solid var(--royal); }
.qhead { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.qtext { font-size: 18px; line-height: 1.5; margin: 10px 0 8px; }
.result { margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; }
.result.ok { background: var(--ok-soft); color: var(--ok); } .result.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- chat ---------- */
.chat { padding: 0; overflow: hidden; }
#log { min-height: 260px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.msg { max-width: 84%; display: grid; gap: 6px; }
.msg .bubble { padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; }
.msg .who { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.msg.me { align-self: flex-end; justify-items: end; }
.msg.me .bubble { background: var(--royal); color: #fff; border-bottom-right-radius: 4px; }
.msg.tutor { align-self: flex-start; }
.msg.tutor .bubble { background: var(--rule-2); border-bottom-left-radius: 4px; }
.msg.tutor.stopped .bubble { background: var(--bad-soft); }
.msg.note { align-self: center; max-width: 92%; text-align: center; color: var(--ink-2); font-size: 13.5px; }
.msg.note.scenario { background: var(--royal-soft); color: var(--ink); padding: 8px 14px; border-radius: var(--r-sm); text-align: left; }
.thinking .bubble { color: var(--ink-2); font-style: italic; }
.spotted { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); border-left: 3px solid var(--warn); }
.spotted b { color: var(--warn); white-space: nowrap; }
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 12.5px; max-width: 360px; }
.ladder span { padding: 3px 6px; border-radius: 4px; background: var(--rule-2); color: var(--ink-2); text-align: center; border-top: 3px solid var(--rule); }
.ladder span.on { color: var(--ink); border-top-color: var(--royal); background: var(--royal-soft); font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); color: var(--ink-2); }
.chip.book { border-style: dashed; }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rule); background: var(--sheet); }
.composer form, .composer-row { display: flex; gap: 8px; width: 100%; align-items: flex-end; }
.composer textarea, .composer input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--sheet);
  color: var(--ink);
  box-sizing: border-box;
}
.composer textarea {
  min-height: 52px;
  max-height: 96px;
  resize: vertical;
  overflow-y: auto;
}
.composer textarea:focus, .composer input:focus {
  outline: none;
  border-color: var(--royal);
}
.composer button { height: 42px; margin-bottom: 2px; }
.footnote { color: var(--ink-2); font-size: 13.5px; }

/* ---------- science helper & formulas ---------- */
.science-helper { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; background: var(--rule-2); border-radius: var(--r-sm); font-size: 13px; }
.sh-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sh-title { font-weight: 700; color: var(--ink-2); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.sh-items { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sh-btn { padding: 3px 8px; font-size: 13.5px; font-weight: 600; line-height: 1.2; border: 1px solid var(--rule); background: var(--sheet); border-radius: 4px; color: var(--ink); cursor: pointer; height: auto; }
.sh-btn:hover { border-color: var(--royal); color: var(--royal); background: var(--royal-soft); }
.sh-pill { padding: 3px 9px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; color: var(--ink-2); cursor: pointer; height: auto; }
.sh-pill:hover { border-color: var(--royal); color: var(--royal); background: var(--royal-soft); }
.math-frac { display: inline-flex; align-items: baseline; font-size: 0.95em; vertical-align: middle; }
.math-inline { font-style: normal; }
.math-display { display: block; text-align: center; margin: 0.5em 0; overflow-x: auto; }
.katex-display { margin: 0.4em 0 !important; }

/* ---------- side panel ---------- */
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.tabs button { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--ink-2); padding: 8px 12px; }
.tabs button.on { color: var(--royal); border-bottom-color: var(--royal); font-weight: 700; }
.count:not(:empty) { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 12px; text-align: center; font-weight: 700; }
.group { margin-bottom: 18px; }
.group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.group h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--c, var(--royal)); }
.sc { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; display: grid; gap: 6px; }
.sc .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sc-title { font-weight: 700; }
.sc .watch { font-size: 14px; color: var(--ink-2); }
.sc button { justify-self: start; font-size: 14px; padding: 5px 12px; }
.tag-demo { font-size: 12px; font-weight: 700; color: var(--royal); background: var(--royal-soft); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
th { color: var(--ink-2); font-weight: 700; font-size: 13.5px; }
table.kv th { width: 40%; }

/* ---------- mastery meters ---------- */
.mrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(70px, 1fr) 3.4em; gap: 10px; align-items: center; padding: 5px 0; font-size: 14.5px; }
.meter { height: 10px; background: var(--rule-2); border-radius: 5px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 5px; }
.meter .hi { background: var(--ok); } .meter .mid { background: var(--warn); } .meter .lo { background: var(--bad); }
.pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13.5px; }

/* ---------- teacher ---------- */
.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.att { text-align: left; background: var(--sheet); border: 1px solid var(--rule); border-left: 5px solid var(--c); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 2px; cursor: pointer; }
.att .n { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; }
.att .l { font-weight: 700; color: var(--ink); }
.att .s { font-size: 13.5px; color: var(--ink-2); }
.att.calm { --c: var(--ok); } .att.warn { --c: var(--warn); } .att.bad { --c: var(--bad); }
.stats { display: flex; gap: 28px; flex-wrap: wrap; padding: 4px 2px 14px; }
.stat .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 13.5px; color: var(--ink-2); }
.chapter { font-size: 14px; font-weight: 700; margin: 14px 0 4px; display: flex; align-items: center; gap: 8px; color: var(--c); }
.chapter::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.c-light { --c: var(--light); } .c-eye { --c: var(--eye); } .c-elec { --c: var(--elec); } .c-other { --c: var(--ink-2); }
.mbar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(60px, 1fr) 2.2em; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; }
.mbar .bar { height: 10px; border-radius: 5px; background: var(--c); min-width: 6px; }
.mbar .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.track { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin: 2px 0 8px; flex-wrap: wrap; }
.track span { padding: 2px 10px; border-radius: 999px; background: var(--rule-2); }
.track span.on { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.track span.done { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.track i { width: 14px; height: 2px; background: var(--rule); display: inline-block; }
.appr.stale { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.alert { border-left: 5px solid var(--warn); } .alert.distress { border-left-color: var(--bad); }
.banner { border-left: 5px solid var(--warn); background: var(--warn-soft); }
ol.steps { margin: 6px 0 10px; padding-left: 22px; font-size: 14.5px; } ol.steps li { margin: 3px 0; }
pre.transcript { white-space: pre-wrap; background: var(--paper); padding: 12px; border-radius: var(--r-sm); max-height: 340px; overflow: auto; font: 14px/1.55 var(--font); }
.seg.score { background: none; gap: 4px; padding: 0; }
.seg.score button { border: 1px solid var(--rule); min-width: 36px; padding: 4px 10px; }
.seg.score button.on { background: var(--royal); color: #fff; border-color: var(--royal); }

@media (max-width: 920px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout aside { position: static; max-height: none; }
  .ray { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .ray::before, .ray .beam { display: none; }
}
@media (max-width: 560px) {
  main { padding: 12px 16px; }
  header { padding: 10px 16px; }
  .msg { max-width: 96%; }
  .intro { grid-template-columns: 1fr; }
}

/* ---------- product shell: top navigation, views, presenter mode ---------- */
.topnav { display: flex; gap: 4px; }
.topnav button { border: none; background: none; color: var(--ink-2); padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.topnav button.on { background: var(--royal-soft); color: var(--royal); }
.view { max-width: 860px; margin: 0 auto; }
.hello { padding: 28px 4px 8px; }
.hello h2 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.hello p { color: var(--ink-2); margin: 0; max-width: 60ch; }
.chapters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 20px 0 8px; }
.chcard { background: var(--sheet); border: 1px solid var(--rule); border-top: 5px solid var(--c); border-radius: var(--r); padding: 16px; display: grid; gap: 8px; align-content: start; }
.chcard h3 { font-size: 17px; color: var(--c); }
.chcard .topics { font-size: 14px; color: var(--ink-2); }
.chcard button { text-align: left; font-size: 14.5px; border-color: var(--rule); background: var(--paper); white-space: normal; }
.chcard button:hover { border-color: var(--c); }
.consent-inline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); background: var(--sheet); border: 1px dashed var(--rule); border-radius: var(--r); padding: 10px 14px; margin-top: 14px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--royal-soft); display: grid; place-items: center; flex: none; }
.avatar::before { content: ""; width: 14px; height: 13px; background: var(--royal); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.trow { display: flex; gap: 10px; align-items: flex-start; }
.trow .body { display: grid; gap: 6px; min-width: 0; }
.mixup { font-size: 14px; padding: 7px 11px; border-radius: var(--r-sm); background: var(--warn-soft); border-left: 3px solid var(--warn); }
.mixup b { color: var(--warn); }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { font-size: 13.5px; padding: 4px 12px; border-radius: 999px; color: var(--royal); border-color: var(--royal-soft); background: var(--sheet); }
.thinking-steps { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.thinking-steps span { display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; text-align: left; padding: 0; }
.thinking-steps span.done::before { content: "✓"; color: var(--ok); font-weight: 700; display: inline-block; }
.thinking-steps span.now { color: var(--ink); font-weight: 600; }
.thinking-steps span.now::before { content: "•"; color: var(--royal); font-weight: 700; display: inline-block; font-size: 15px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.qcard { background: var(--sheet); border: 1px solid var(--rule); border-left: 5px solid var(--c); border-radius: var(--r); padding: 16px 18px; margin-bottom: 14px; display: grid; gap: 10px; }
.qcard .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.qcard .q { font-size: 17.5px; }
.qcard form { display: flex; gap: 8px; }
.qcard form input { flex: 1; min-width: 0; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-2); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.privacy { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
/* presenter mode */
.presenter-only { display: none !important; }
body.presenter .presenter-only { display: revert !important; }
body.presenter .layout-p { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 20px; align-items: start; max-width: 1280px; margin: 0 auto; }
body.presenter .layout-p > aside { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.presenter-badge { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--eye); padding: 2px 10px; border-radius: 999px; }
/* In a narrow window the panel is a drawer on the right, opened with the "How it works" button. */
body.presenter .hood-toggle.presenter-only { display: none !important; }
@media (max-width: 920px) {
  body.presenter .layout-p { grid-template-columns: minmax(0, 1fr); }
  body.presenter .layout-p > aside { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); max-height: none; z-index: 30;
    background: var(--paper); box-shadow: -8px 0 24px rgba(20, 24, 50, .18); padding: 12px; overflow-y: auto; transform: translateX(105%); transition: transform .25s ease; }
  body.presenter.hood-open .layout-p > aside { transform: none; }
  body.presenter .hood-toggle.presenter-only { display: inline-flex !important; }
  body.presenter .hood-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 31; gap: 6px; align-items: center;
    background: var(--eye); color: #fff; border: none; border-radius: 999px; padding: 10px 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(20, 24, 50, .25); }
  body.presenter .hood-toggle.ping { animation: ping 1.2s ease 2; }
  .topnav button { padding: 6px 10px; }
}
@keyframes ping { 50% { transform: scale(1.08); } }
/* the ray in the narrow presenter panel: two rows of four, no beam */
aside .ray { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
aside .ray::before, aside .ray .beam { display: none; }
/* no empty chat box before the first message */
#log:empty { min-height: 0; padding: 0; }

/* ---------- study plan: a path of numbered steps (the order matters) ---------- */
.path { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: step; }
.path > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; counter-increment: step; }
.path > li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--sheet); border: 2px solid var(--rule); color: var(--ink-2); z-index: 1; }
.path > li::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--rule); }
.path > li:last-child { padding-bottom: 0; } .path > li:last-child::after { display: none; }
.path > li.mastered::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: #fff; }
.path > li.next::before { border-color: var(--royal); color: var(--royal); box-shadow: 0 0 0 4px var(--royal-soft); }
.step-body { display: grid; gap: 6px; padding-top: 3px; }
.step-body .t { font-weight: 700; font-size: 16px; }
.step-body .why { font-size: 13.5px; color: var(--ink-2); }
.step-body .m { display: grid; grid-template-columns: minmax(80px, 220px) auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.step-body .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.step-body .acts button { font-size: 14px; padding: 5px 12px; }
.plan-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.teacher-note { margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--royal-soft); border-left: 3px solid var(--royal); font-size: 15px; }
.teacher-note b { color: var(--royal); }
.due { font-size: 13.5px; font-weight: 700; color: var(--warn); }
.nextup { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; background: var(--sheet); border: 1px solid var(--rule); border-left: 5px solid var(--royal); border-radius: var(--r); }
.nextup .t { flex: 1; min-width: 200px; } .nextup .t b { display: block; font-size: 16px; }

/* ---------- who's learning ---------- */
.picker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--ink-2); }
.picker select { padding: 6px 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); max-width: 220px; }

/* ---------- teacher: students ---------- */
.stu-bar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; justify-content: space-between; margin-bottom: 14px; }
.stu-bar label { margin: 0; }
.stu-bar .row input { width: 200px; }
table.class tr[data-id] { cursor: pointer; }
table.class tr[data-id]:hover td { background: var(--rule-2); }
table.class tr.sel td { background: var(--royal-soft); }
table.class td .meter { width: 90px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.stu-name { font-weight: 700; }
.builder li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.builder ol { margin: 6px 0 10px; padding-left: 22px; }
.builder .mv { display: flex; gap: 4px; }
.builder .mv button { padding: 3px 9px; font-size: 13.5px; }
.sugg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--rule); font-size: 14.5px; }
.sugg .why { font-size: 13px; color: var(--ink-2); }
@media (max-width: 560px) { .stu-bar .row input { width: 100%; } table.class .hide-sm { display: none; } }
.builder .row select { flex: 1; min-width: 0; }
.maxed { font-size: 14px; padding: 7px 11px; border-radius: var(--r-sm); background: var(--royal-soft); border-left: 3px solid var(--royal); }
.quick button.strong { background: var(--royal); color: #fff; border-color: var(--royal); font-weight: 700; }

/* ---------- level pill (header) ---------- */
.lvl { display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 14px; font-weight: 700; border-color: var(--rule); }
.lvl .lv { background: var(--royal); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 12.5px; }
.lvl .streak { color: var(--warn); font-weight: 700; font-size: 13px; }
.lvl .streak::before { content: ""; display: inline-block; width: 8px; height: 11px; margin-right: 5px; background: var(--warn); clip-path: polygon(50% 0, 100% 60%, 80% 100%, 20% 100%, 0 60%); vertical-align: -1px; }

/* ---------- flashcards ---------- */
.deckbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.deckprog { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
/* both faces share one grid cell, so the card is as tall as its longer side */
.fcard { position: relative; perspective: 1400px; display: grid; }
.fcard .face { grid-area: 1 / 1; min-height: 300px; background: var(--sheet); border: 1px solid var(--rule); border-top: 6px solid var(--c); border-radius: var(--r-lg); padding: 22px 24px; display: grid; gap: 12px; align-content: start; backface-visibility: hidden; transition: transform .5s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 6px 20px rgba(28, 33, 64, .07); overflow: auto; }
.fcard .back { transform: rotateY(180deg); border-top-color: var(--ink); }
.fcard.flip .front { transform: rotateY(-180deg); }
.fcard.flip .back { transform: rotateY(0); }
.fcard .topic { font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
.fcard .q { font-size: 21px; line-height: 1.45; }
.fcard .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.fcard .trap { font-size: 20px; font-weight: 700; color: var(--bad); line-height: 1.3; }
.fcard p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .fcard .face { transition: none; } }
@media (max-width: 560px) { .fcard .q { font-size: 18px; } }
.panel.done { text-align: center; padding: 28px 20px; display: grid; gap: 8px; justify-items: center; }
.panel.done .big { font-size: 46px; font-weight: 700; color: var(--royal); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- level, points and badges ---------- */
.game { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.ring { width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--royal) var(--p), var(--rule-2) 0); display: grid; place-items: center; }
.ring > div { width: 88px; height: 88px; border-radius: 50%; background: var(--sheet); display: grid; place-items: center; align-content: center; }
.ring b { font-size: 32px; line-height: 1; color: var(--royal); }
.ring span { font-size: 12px; color: var(--ink-2); }
.gtext h2 { font-size: 24px; }
.gstats { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.gstats b { color: var(--ink); font-size: 17px; margin-right: 3px; font-variant-numeric: tabular-nums; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 14px 10px; border: 1px dashed var(--rule); border-radius: var(--r); color: var(--ink-2); font-size: 13px; }
.badge b { color: var(--ink-2); font-size: 14.5px; }
.badge .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--rule-2); color: var(--ink-2); margin-bottom: 4px; }
.badge.on { border-style: solid; border-color: var(--royal-soft); background: var(--sheet); }
.badge.on b { color: var(--ink); }
.badge.on .ic { background: linear-gradient(135deg, #f2a516, #e04a3b 40%, #7446c4); color: #fff; }
@media (max-width: 560px) { .game { grid-template-columns: 1fr; justify-items: center; text-align: center; } .gstats { justify-content: center; } }
.plus { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 13px; }

/* one small burst for a right answer or a perfect round (skipped with reduced motion) */
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--c); animation: burst .8s ease-out forwards; transform: rotate(var(--a)) translateY(0); }
@keyframes burst { to { transform: rotate(var(--a)) translateY(-90px); opacity: 0; } }

/* ---------- teacher: class highlights ---------- */
.hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.hl div { background: var(--paper); border-radius: var(--r); padding: 10px 14px; }
.hl b { display: block; font-size: 26px; color: var(--royal); font-variant-numeric: tabular-nums; }
.hl span { font-size: 13.5px; color: var(--ink-2); }
.shout { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; }
.shout .star { color: #f2a516; }
.lvl-chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--royal-soft); color: var(--royal); white-space: nowrap; }
.topnav { flex-wrap: wrap; }
.fcard.flip .front, .fcard:not(.flip) .back { pointer-events: none; }
@media (max-width: 560px) { header { position: static; } .lvl { font-size: 13px; } }

/* Flashcards show one face at a time (no 3D flip, which some browsers draw wrongly) */
.fcard .face { transform: none !important; transition: none; backface-visibility: visible; }
.fcard.flip .front, .fcard:not(.flip) .back { visibility: hidden; }
.fcard:not(.flip) .front { cursor: pointer; }

/* Care replies (stress, frustration): soft and calm, never red */
.msg.tutor.care .bubble { background: var(--ok-soft); }
.chip.calm { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.quick.calm button { color: var(--ok); border-color: var(--ok-soft); }

/* ---------- the NCERT book next to the tutor: real text (set in a book serif), formula, figure ---------- */
.bookcard { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: var(--r); overflow: hidden; }
.bookcard > summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.bookcard > summary::-webkit-details-marker { display: none; }
.bookcard > summary::after { content: "Show"; margin-left: auto; font-size: 13px; color: var(--royal); font-weight: 700; }
.bookcard[open] > summary::after { content: "Hide"; }
.bk-icon { width: 22px; height: 18px; flex: none; border: 2px solid var(--ok); border-radius: 2px 2px 3px 3px; position: relative; }
.bk-icon::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ok); }
.bk-src { display: block; font-size: 12.5px; color: var(--ok); font-weight: 700; }
.bk-title { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.bk-body { padding: 2px 14px 14px; display: grid; gap: 10px; }
.bookcard blockquote, .lesson-card blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--rule); background: var(--paper); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.6; color: var(--ink); }
.formula { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-sm); background: var(--royal-soft); }
.formula .eq { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.formula .fno { font-size: 13px; color: var(--ink-2); }
.formula .fsays { font-size: 13.5px; color: var(--ink-2); }
.bookcard figure, .lesson-card figure { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px; }
.bookcard img, .lesson-card img { display: block; max-width: 100%; max-height: 340px; margin: 0 auto; }
.bookcard figcaption, .lesson-card figcaption { font-size: 13.5px; color: #4a5170; margin-top: 6px; text-align: center; }

/* ---------- a lesson from the book ---------- */
.lesson-card { background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--ok); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; }
.lesson-card h3 { font-size: 20px; margin: 0; }
.lhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lvl-tag { font-size: 12.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.lvl-tag.in_progress { background: var(--warn-soft); color: var(--warn); }
.lvl-tag.mastered { background: var(--royal-soft); color: var(--royal); }
.lstep { display: grid; gap: 6px; }
.lstep .lt { font-weight: 700; font-size: 14.5px; }
.quick button.strong { background: var(--royal); color: #fff; border-color: var(--royal); }
.learnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.learnrow select { flex: 1 1 140px; min-width: 0; font-size: 14px; }
.chcard .learnrow button { text-align: center; white-space: nowrap; background: var(--royal); }
.orask { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

/* ---------- behind the scenes: one card per step ---------- */
.hood .hood-kind { font-size: 12.5px; font-weight: 700; color: var(--royal); }
.hood .hood-q { font-size: 15px; margin: 2px 0 10px; color: var(--ink); }
.hcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: var(--r-sm); background: var(--sheet); }
.hc.warn { border-left-color: var(--warn); } .hc.stop { border-left-color: var(--bad); background: var(--bad-soft); } .hc.care { border-left-color: var(--ok); background: var(--ok-soft); }
.hc-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--rule-2); color: var(--ink-2); }
.hc-t { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.hc-t span { font-size: 12.5px; font-weight: 700; }
.hc-l { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.hc-l b { color: var(--ink); }
.hood-foot { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.chcard { min-width: 0; }
.chcard .learnrow { display: grid; grid-template-columns: minmax(0, 1fr); }
.chcard .learnrow select { width: 100%; }
.chcard .learnrow button { white-space: normal; }
.msg.tutor.lesson { max-width: 96%; }

/* ---------- the learning path: four steps, the current one lit ---------- */
.howto { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--royal); border-radius: var(--r); padding: 12px 16px; margin: 6px 0 14px; display: grid; gap: 6px; }
.howto ol, .journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.howto li, .journey li { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); }
.howto li span, .journey li span { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--rule-2); color: var(--ink-2); }
.journey { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 10px 14px; margin-top: 14px; display: grid; gap: 8px; }
.journey .jt { font-size: 15px; }
.journey li.done { color: var(--ok); } .journey li.done span { background: var(--ok); color: #fff; }
.journey li.now { color: var(--ink); font-weight: 700; } .journey li.now span { background: var(--royal); color: #fff; box-shadow: 0 0 0 4px var(--royal-soft); }
.unlocked { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ok-soft); display: grid; gap: 6px; }
@media (max-width: 640px) { .howto ol, .journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-l .model { display: inline-block; margin-top: 2px; font-size: 12.5px; color: var(--model); background: var(--eye-soft); padding: 1px 8px; border-radius: 999px; }

/* ---------- the workflow in the side panel: the path the last message took lights up ---------- */
#flow svg { display: block; margin-top: 8px; font-family: var(--font); }
#flow .fn rect { fill: var(--sheet); stroke: var(--rule); stroke-width: 1.5; }
#flow .fn .ft { font-size: 13.5px; font-weight: 700; fill: var(--ink-2); }
#flow .fn .fs { font-size: 11px; fill: var(--ink-2); opacity: .8; }
#flow .fn .fw { font-size: 11px; font-weight: 700; }
#flow .fn .fw.who-model { fill: var(--model); } #flow .fn .fw.who-code { fill: var(--code); } #flow .fn .fw.who-person { fill: var(--person); }
#flow .fn.on rect { fill: color-mix(in srgb, var(--c) 12%, var(--sheet)); stroke: var(--c); stroke-width: 2.5; }
#flow .fn.on .ft { fill: var(--ink); }
#flow .fe { fill: none; stroke: var(--rule); stroke-width: 1.6; }
#flow .fe.on { stroke: var(--c); stroke-width: 3; }
#flow .fa { fill: var(--rule); } #flow .fa.on { fill: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { #flow .fn rect, #flow .fe { transition: all .3s ease; } }

/* ---------- quiz: the book's figure, encouragement, level up, revision cards ---------- */
.qfig { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px; }
.qfig img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; }
.qfig.small img { max-height: 170px; }
.qfig figcaption { font-size: 13px; color: #4a5170; text-align: center; margin-top: 4px; }
.cheer { margin-top: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--ok-soft); display: grid; gap: 2px; font-size: 14.5px; }
.levelup { margin-top: 8px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); color: #fff;
  background: linear-gradient(90deg, #e04a3b, #f2a516, #3fa34d, #2a6fdb, #7446c4); }
.levelup b { display: block; font-size: 17px; } .levelup span { font-size: 13.5px; opacity: .95; }
.lv-big { width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--royal) !important; display: grid; place-items: center; font-size: 22px !important; font-weight: 700; opacity: 1 !important; }
.revise { margin-top: 10px; padding: 12px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper); display: grid; gap: 8px; }
.mini { background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--warn); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 6px; }
.mini .mq { font-size: 15px; }
.mini > button { justify-self: start; }
.mini .mback { display: none; } .mini.open .mback { display: grid; gap: 4px; } .mini.open > button { display: none; }
.mini .trap { color: var(--bad); font-weight: 700; }
.mini p { margin: 0; font-size: 14px; }
.flow-then { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

/* Home: the logo and the "Back to all topics" bar take the student back to the chapter cards. */
a.brand { color: inherit; text-decoration: none; border-radius: 10px; }
a.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.homebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.homebar button { font-weight: 600; }

/* A named student's sign-in code, asked once on a device. */
dialog.codedlg { border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; max-width: min(380px, calc(100vw - 32px)); background: var(--sheet); color: var(--ink); }
dialog.codedlg::backdrop { background: rgba(15, 18, 40, .45); }
dialog.codedlg h3 { margin: 0 0 6px; }
dialog.codedlg input { width: 100%; font-size: 20px; letter-spacing: .2em; margin: 8px 0 4px; }
#forgetNote { margin-left: 8px; }