/* ai-teacher — mobile-first study app. No frameworks, no build step. */

:root {
  --bg: #0b0f14;
  --bg-soft: #121821;
  --card: #161d28;
  --card-2: #1c2532;
  --line: #263041;
  --ink: #e8edf5;
  --ink-2: #9fb0c6;
  --ink-3: #6b7c93;
  --accent: #4cc2ff;
  --accent-2: #7c8cff;
  --good: #45d483;
  --warn: #ffc857;
  --bad: #ff6b6b;
  --on-accent: #04121c;   /* text that sits on an accent-filled surface */
  /* mind-map branch palette — bright, tuned for dark screens (see light overrides at the end) */
  --mm0: #4cc2ff; --mm1: #ffc857; --mm2: #45d483;
  --mm3: #7c8cff; --mm4: #ff9ecd; --mm5: #ff8a5c;
  --radius: 18px;
  --top-h: 52px;
  --side-w: 268px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-2: #f0f4f9;
    --line: #dde5ef;
    --ink: #101720;
    --ink-2: #4a5c72;
    --ink-3: #7b8ca1;
    --accent: #0b7dc4;
    --accent-2: #5158e0;
    --on-accent: #ffffff;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; gap: 12px;
  justify-items: center; background: var(--bg); z-index: 100;
}
.boot-mark { font-size: 44px; animation: pulse 1.4s ease-in-out infinite; }
.boot-text { color: var(--ink-3); font-size: 14px; }
@keyframes pulse { 0%,100% { opacity: .4; transform: scale(.95);} 50% { opacity: 1; transform: scale(1.05);} }

/* ---------- chrome ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: calc(var(--top-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 40;
}
.topbar[data-transparent="1"] { background: transparent; border-color: transparent; backdrop-filter: none; }
.topbar-title { text-align: center; font-weight: 650; font-size: 15px; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  background: none; border: 0; font-size: 22px; line-height: 1; padding: 10px;
  color: var(--ink-2); cursor: pointer;
}
.icon-btn:active { color: var(--ink); }

.view { min-height: 100%; }
.view[data-chrome="full"] { padding: 0; }
.view[data-chrome="page"] {
  padding: calc(var(--top-h) + env(safe-area-inset-top) + 8px) 16px
           calc(env(safe-area-inset-bottom) + 40px);
  max-width: 760px; margin: 0 auto;
}

/* ---------- left menu ---------- */

.scrim {
  position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5);
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0 } }

.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); z-index: 50;
  background: var(--bg-soft); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.sidebar[data-open="1"] { transform: none; }

.side-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.profile-chip {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; cursor: pointer;
}
.profile-chip b { display: block; font-size: 14.5px; }
.profile-chip span span { font-size: 11.5px; color: var(--ink-3); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font-weight: 750; font-size: 15px;
}

.side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.side-nav::-webkit-scrollbar { width: 0; }

.side-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 10px 6px;
}
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: 14px; color: var(--ink-2); font-weight: 550;
}
.side-link .ico { width: 20px; text-align: center; font-size: 15px; flex: none; }
.side-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 700; }
.side-link:active { background: var(--card-2); }
.side-count {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  background: var(--card-2); border-radius: 999px; padding: 2px 7px;
}
.side-count[data-due="1"] { background: var(--bad); color: #fff; }

.side-subject { display: block; }
.side-subject > summary {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: 14px; color: var(--ink-2); font-weight: 550; cursor: pointer; list-style: none;
}
.side-subject > summary::-webkit-details-marker { display: none; }
.side-subject[open] > summary { color: var(--ink); font-weight: 700; }
.side-sections { padding: 2px 0 8px 30px; display: grid; gap: 1px; }
.side-sections a {
  font-size: 12.5px; color: var(--ink-3); padding: 6px 10px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
}
.side-sections a[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.side-foot {
  padding: 10px 16px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-3);
}

.skill-pip { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--line); }
.skill-pip[data-tone="ready"] { background: var(--good); }
.skill-pip[data-tone="solid"] { background: var(--accent); }
.skill-pip[data-tone="developing"] { background: var(--warn); }
.skill-pip[data-tone="beginner"] { background: var(--ink-3); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; z-index: 60; animation: rise .18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px);} }

/* ---------- reels ---------- */
.reels {
  height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }

.slide {
  height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; display: flex; flex-direction: column;
  padding: calc(var(--top-h) + env(safe-area-inset-top) + 12px) 20px
           calc(env(safe-area-inset-bottom) + 24px);
  background: radial-gradient(120% 80% at 50% 0%, var(--slide-tint, transparent) 0%, transparent 60%), var(--bg);
}

.slide-kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.lens-chip {
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px;
  background: color-mix(in srgb, var(--lens, var(--accent)) 18%, transparent);
  color: var(--lens, var(--accent));
  border: 1px solid color-mix(in srgb, var(--lens, var(--accent)) 35%, transparent);
}
.slide-title { font-size: 26px; line-height: 1.2; font-weight: 750; margin: 0 0 14px; letter-spacing: -.4px; }
.slide-body {
  flex: 1; overflow-y: auto; font-size: 17px; color: var(--ink);
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.slide-body::-webkit-scrollbar { display: none; }
/* auto margins centre short lessons without clipping the top of long ones */
.slide-inner { margin: auto 0; width: 100%; }
.slide-body p { margin: 0 0 14px; }
.slide-body ul, .slide-body ol { margin: 0 0 14px; padding-left: 20px; }
.slide-body li { margin-bottom: 7px; }
.slide-body strong { color: var(--ink); font-weight: 700; }
.slide-body em { color: var(--accent); font-style: normal; font-weight: 650; }
.slide-body code {
  font-family: var(--mono); font-size: .88em; background: var(--card-2);
  padding: 2px 6px; border-radius: 6px; color: var(--accent);
}
.slide-body pre {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 13px;
  line-height: 1.55; margin: 0 0 14px;
}
.slide-body pre code { background: none; padding: 0; color: var(--ink); }
.slide-body blockquote {
  margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--accent);
  background: var(--card); border-radius: 0 12px 12px 0; color: var(--ink-2);
}

.slide-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; color: var(--ink-3); font-size: 12px;
}
.slide-actions { display: flex; gap: 8px; }
.chip-btn {
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.chip-btn[data-on="1"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); }

.swipe-hint {
  text-align: center; font-size: 11px; color: var(--ink-3); padding: 4px 0 2px;
  animation: bob 1.8s ease-in-out infinite; pointer-events: none;
}
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-5px); opacity: 1 } }

/* ---------- visual + interactive lenses ---------- */

.lens-card { border-left: 3px solid var(--lens); }
.lens-label { margin: 0 0 8px; color: var(--lens); }
.lens-body { font-size: 15.5px; }
.lens-body p:last-child, .slide-inner > :last-child { margin-bottom: 0; }

.scenario {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 0 14px 14px 0; padding: 16px;
}
.scenario p:last-child { margin-bottom: 0; }

/* flow diagram */
.flow { display: grid; justify-items: stretch; gap: 0; margin-bottom: 14px; }
.flow-node {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; display: grid; gap: 3px; text-align: center;
}
.flow-node b { font-size: 14.5px; font-weight: 650; }
.flow-node span { font-size: 12px; color: var(--ink-3); }
.flow-node.is-accent { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.flow-node.is-leaf { padding: 9px 11px; }
.flow-node.is-leaf b { font-size: 13px; font-weight: 600; }
.flow-arrow { text-align: center; color: var(--ink-3); font-size: 17px; line-height: 1.5; }
.flow-fan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px;
  margin-top: 10px; position: relative; padding-top: 12px;
}
.flow-fan::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 12px; background: var(--line);
}

/* mind map — branch palette lives in :root at the top so the light theme can override it */
.mindmap { display: grid; justify-items: center; margin-bottom: 14px; }
.mm-root {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  font-weight: 750; font-size: 16px; padding: 11px 22px; border-radius: 999px;
}
.mm-stem { width: 1px; height: 16px; background: var(--line); }
.mm-branches { display: grid; gap: 9px; width: 100%; }
.mm-branch {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--mm);
  border-radius: 0 13px 13px 0; padding: 11px 13px;
}
.mm-branch > b { font-size: 14.5px; color: var(--mm); }
.mm-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-kids span {
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line);
}

.mm-branch.is-planned { opacity: .45; }
.mm-branch.is-planned > b { color: var(--ink-2); }
a.mm-branch { display: block; }
a.mm-branch:active { transform: scale(.995); }

/* match-up game tiles */
.match-row { display: flex; flex-wrap: wrap; gap: 8px; }
.match-col { display: grid; gap: 8px; }
.tile {
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; transition: .12s;
}
.tile-wide { font-weight: 500; font-size: 13.5px; line-height: 1.45; }
.tile[data-on="1"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.tile[data-state="right"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--card)); }
.tile[data-state="wrong"] { border-color: var(--bad);  background: color-mix(in srgb, var(--bad) 14%, var(--card)); }
.tile[data-done="1"] { opacity: .55; cursor: default; }

/* puzzle / reverse-engineer */
.puzzle-q { font-size: 16.5px; font-weight: 650; margin: 4px 0 12px; }
.puzzle-ctl { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.puzzle-hint {
  border-left: 3px solid var(--warn); background: var(--card); padding: 12px 14px;
  border-radius: 0 12px 12px 0; margin-bottom: 10px; font-size: 14.5px; color: var(--ink-2);
}
.puzzle-answer {
  border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  border-radius: 13px; padding: 14px; animation: rise .2s ease-out;
}
.puzzle-answer > :last-child { margin-bottom: 0; }

/* execution stepper */
.trace { margin-bottom: 14px; }
.trace-code {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 0; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.65; margin: 0 0 10px; white-space: pre;
}
.trace-code .tl { display: block; padding: 0 14px; border-left: 3px solid transparent; }
.trace-code .tl.is-now {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-left-color: var(--accent); color: var(--ink);
}
.trace-note { font-size: 14.5px; color: var(--ink-2); min-height: 1.5em; }
.trace-note p { margin: 0 0 6px; }
.trace-state { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.trace-state .var, .viz-vars .var {
  font-family: var(--mono); font-size: 12px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; color: var(--ink);
}
.trace-state .var b, .viz-vars .var b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.trace-ctl { display: flex; align-items: center; gap: 10px; }
.trace-pos { font-size: 12px; color: var(--ink-3); flex: 1; text-align: center; }
.trace-ctl .chip-btn:disabled { opacity: .35; }

/* memory-block slide gets a distinct look */
.memory-box {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius); padding: 20px; font-size: 19px; line-height: 1.5; font-weight: 600;
}

/* ---------- quiz ---------- */
.q-stem { font-size: 20px; font-weight: 650; line-height: 1.35; margin: 0 0 18px; }
.opts { display: grid; gap: 10px; }
.opt {
  text-align: left; background: var(--card); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px; font-size: 15.5px; cursor: pointer; transition: .12s;
  display: flex; gap: 10px; align-items: flex-start;
}
.opt:active { transform: scale(.99); }
.opt-key { font-weight: 800; color: var(--ink-3); min-width: 16px; }
.opt[data-state="right"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--card)); }
.opt[data-state="wrong"] { border-color: var(--bad);  background: color-mix(in srgb, var(--bad) 14%, var(--card)); }
.opt[disabled] { cursor: default; opacity: .85; }
.opt[data-state="right"], .opt[data-state="wrong"] { opacity: 1; }
.why {
  margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: var(--card-2);
  border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2);
}
.why strong { color: var(--ink); }

/* ---------- cards / lists ---------- */
.section-title {
  font-size: 12px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 10px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; display: block;
}
.card-row { display: flex; align-items: center; gap: 12px; }
.card h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.meta { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }

/* syllabus */
.track {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 14px 8px; margin-bottom: 12px;
}
.track > summary {
  display: flex; align-items: center; gap: 11px; padding: 12px 0; cursor: pointer;
  list-style: none; font-size: 15px;
}
.track > summary::-webkit-details-marker { display: none; }
.track-emoji { font-size: 20px; }
.track-goal { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.track .bar { margin: 0 0 6px; }

.row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-top: 1px solid var(--line);
}
.row h3 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; }
.row .meta { margin-top: 3px; }
.row-planned { opacity: .5; }
.row-planned h3 { font-weight: 500; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.status-dot[data-s="learning"]  { background: var(--warn); }
.status-dot[data-s="practiced"] { background: var(--accent); }
.status-dot[data-s="explain"]   { background: var(--accent-2); }
.status-dot[data-s="ready"]     { background: var(--good); }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 650; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line);
}

.btn {
  display: block; width: 100%; text-align: center; padding: 15px; border-radius: 14px;
  background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 15.5px;
  border: 0; cursor: pointer; margin-top: 14px;
}
.btn[data-variant="ghost"] { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn:active { transform: scale(.99); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat-num { font-size: 30px; font-weight: 780; letter-spacing: -1px; line-height: 1; }
.stat-lbl { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: .6px; }

.bar { height: 7px; border-radius: 4px; background: var(--card-2); overflow: hidden; margin-top: 10px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.empty { text-align: center; color: var(--ink-3); padding: 48px 20px; }
.empty-mark { font-size: 40px; margin-bottom: 10px; }

.search-input {
  width: 100%; padding: 13px 15px; border-radius: 13px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); font-size: 16px; outline: none;
}
.search-input:focus { border-color: var(--accent); }

.term-row { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.term-row b { font-size: 15px; }
.term-row span { font-size: 14px; color: var(--ink-2); }

/* flashcard */
.flash {
  min-height: 44dvh; display: grid; place-content: center; text-align: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  font-size: 20px; font-weight: 650; line-height: 1.4; cursor: pointer;
}
.flash .back { font-size: 16.5px; font-weight: 500; color: var(--ink-2); text-align: left; }
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.grade {
  padding: 13px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.grade[data-g="0"] { color: var(--bad); }
.grade[data-g="1"] { color: var(--warn); }
.grade[data-g="2"] { color: var(--accent); }
.grade[data-g="3"] { color: var(--good); }

@media (min-width: 900px) {
  .sidebar { transform: none; }
  .scrim { display: none; }
  .topbar { left: var(--side-w); }
  .topbar [data-action="menu"] { visibility: hidden; }
  .view { margin-left: var(--side-w); }
  /* centre the reading column inside the space beside the sidebar, not the whole window */
  .view[data-chrome="page"] {
    /* must repeat margin-left: this selector outranks the plain .view rule above */
    max-width: none; margin-left: var(--side-w); margin-right: 0;
    padding-left: clamp(20px, calc((100% - 760px) / 2), 260px);
    padding-right: clamp(20px, calc((100% - 760px) / 2), 260px);
  }
  .reels { margin-left: var(--side-w); }
  .slide { padding-left: max(24px, calc((100vw - var(--side-w)) / 2 - 320px));
           padding-right: max(24px, calc((100vw - var(--side-w)) / 2 - 320px)); }
  .slide-title { font-size: 32px; }
}

/* ---------- light-theme contrast fixes ----------
   Must come last: these override component rules defined above, not just variables.
   The lens palette is authored bright for dark screens; on white it needs darkening. */
@media (prefers-color-scheme: light) {
  :root {
    --mm0: #0b6fb0; --mm1: #8a5800; --mm2: #0e6b3d;
    --mm3: #454dc4; --mm4: #a8306c; --mm5: #b0431a;
  }
  /* lens colours arrive from JS as bright hexes — mix toward black to stay legible */
  .lens-chip, .lens-label { color: color-mix(in srgb, var(--lens) 62%, #000); }
  .lens-card { border-left-color: color-mix(in srgb, var(--lens) 62%, #000); }
  .slide-body em { color: color-mix(in srgb, var(--accent) 85%, #000); }
}

/* ---------- dashboard ---------- */

.hero {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.hero-score { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.hero-band { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.hero-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 20px; margin-left: auto; }
.hero-stats span { font-size: 11.5px; color: var(--ink-3); display: grid; }
.hero-stats b { font-size: 17px; color: var(--ink); font-weight: 750; }

.skill-row { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.skill-row:first-child { border-top: 0; }
.skill-row-top { display: flex; align-items: baseline; gap: 8px; }
.skill-row-top b { font-size: 14.5px; flex: 1; }
.skill-num { font-size: 15px; font-weight: 800; }
.skill-num[data-tone="ready"] { color: var(--good); }
.skill-num[data-tone="solid"] { color: var(--accent); }
.skill-num[data-tone="developing"] { color: var(--warn); }
.skill-num[data-tone="beginner"], .skill-num[data-tone="none"] { color: var(--ink-3); }
.bar > u { display: block; height: 100%; background: repeating-linear-gradient(
  45deg, var(--ink-3), var(--ink-3) 2px, transparent 2px, transparent 5px); opacity: .5; margin-top: -7px; }
.meta .stale { color: var(--warn); }

.warn-card { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.warn-card > p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }

.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; }
.heat i, .heat-key i { width: 100%; aspect-ratio: 1; border-radius: 2px; background: var(--card-2); display: block; }
.heat i[data-l="1"], .heat-key i[data-l="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--card-2)); }
.heat i[data-l="2"], .heat-key i[data-l="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--card-2)); }
.heat i[data-l="3"], .heat-key i[data-l="3"] { background: color-mix(in srgb, var(--accent) 75%, var(--card-2)); }
.heat i[data-l="4"], .heat-key i[data-l="4"] { background: var(--accent); }
.heat-key { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.heat-key i { width: 11px; }

/* ---------- subject ---------- */

.subject-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.subject-emoji { font-size: 32px; line-height: 1; }
.subject-emoji.sm { font-size: 20px; }
.subject-head h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.4px; line-height: 1.2; }
.subject-head p { margin: 0; font-size: 14px; color: var(--ink-2); }

.skill-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.skill-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.skill-score { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.skill-score span { font-size: 15px; color: var(--ink-3); font-weight: 600; letter-spacing: 0; }
.skill-band { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.skill-band[data-tone="ready"] { color: var(--good); }
.skill-band[data-tone="solid"] { color: var(--accent); }
.skill-band[data-tone="developing"] { color: var(--warn); }
.skill-band[data-tone="beginner"], .skill-band[data-tone="none"] { color: var(--ink-3); }
.skill-meta { display: grid; gap: 3px; margin-left: auto; text-align: right; }
.skill-meta span { font-size: 11.5px; color: var(--ink-3); }
.decay-note { font-size: 13px; color: var(--warn); margin: 10px 0 0; }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tile-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px;
  display: grid; gap: 3px; text-align: center;
}
.tile-card b { font-size: 13.5px; }
.tile-card span:last-child { font-size: 11px; color: var(--ink-3); }
.tile-ico { font-size: 22px; }

.sec-head { margin-bottom: 16px; }
.sec-head h1 { font-size: 22px; margin: 6px 0 4px; letter-spacing: -.3px; }
.sec-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.crumb { font-size: 12px; color: var(--accent); font-weight: 600; }

/* ---------- knowledge graph ---------- */

.graph-wrap {
  margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: auto; -webkit-overflow-scrolling: touch;
}
.graph { display: block; width: 100%; height: auto; }
.graph-tools { display: flex; gap: 8px; margin-bottom: 10px; }

.g-edge { stroke: var(--line); opacity: .55; }
.g-spoke { stroke: var(--line); opacity: .3; stroke-width: 1; }
.g-track circle { fill: var(--card-2); stroke: var(--line); stroke-width: 1.5; }
.g-emoji { font-size: 22px; }
.g-tlabel { font-size: 13px; fill: var(--ink-2); font-weight: 650; font-family: var(--font); }
.g-node { cursor: pointer; }
.g-node circle { fill: var(--line); stroke: var(--bg); stroke-width: 2; transition: .15s; }
.g-node[data-s="learning"] circle { fill: var(--warn); }
.g-node[data-s="practiced"] circle { fill: var(--accent); }
.g-node[data-s="explain"] circle { fill: var(--accent-2); }
.g-node[data-s="ready"] circle { fill: var(--good); }
.g-node .g-halo { fill: none; stroke: currentColor; opacity: .25; stroke-width: 1.5; }
.g-node[data-s="learning"] .g-halo { stroke: var(--warn); }
.g-node[data-s="practiced"] .g-halo { stroke: var(--accent); }
.g-node[data-s="explain"] .g-halo { stroke: var(--accent-2); }
.g-node[data-s="ready"] .g-halo { stroke: var(--good); }
.g-node:hover circle { stroke: var(--accent); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--ink-3); }
.legend span { display: flex; align-items: center; gap: 5px; }

/* ---------- problems ---------- */

.step { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step > div { flex: 1; font-size: 14.5px; }
.step > div > p:last-child { margin-bottom: 0; }
.step-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--card-2); color: var(--accent); font-size: 12px; font-weight: 750;
}
.tick {
  width: 28px; height: 28px; border-radius: 8px; flex: none; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card-2); color: var(--on-accent);
  font-size: 15px; font-weight: 800; line-height: 1;
}
.tick[data-on="1"] { background: var(--good); border-color: var(--good); }
.problem-row { padding: 13px 14px; }

.pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- algorithm animations ---------- */

.viz { margin: 4px 0 2px; }
.viz-title { font-size: 14px; font-weight: 650; margin-bottom: 10px; }

.viz-stage {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 13px;
  padding: 14px 12px; overflow-x: auto; min-height: 96px;
}
.viz-stage::-webkit-scrollbar { height: 4px; }

/* bar chart — occupancy, counts */
.viz-bars { display: flex; align-items: flex-end; gap: 5px; height: 112px; min-width: min-content; }
.viz-bar { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column;
           align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.viz-bar > i {
  display: block; width: 100%; border-radius: 4px 4px 0 0; min-height: 2px;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  transition: height .35s cubic-bezier(.4,0,.2,1), background .2s;
}
.viz-bar.is-active > i { background: var(--accent); }
.viz-bar.is-peak > i   { background: var(--good); }
.viz-bar-val { font-size: 11px; font-family: var(--mono); color: var(--ink-2); margin-bottom: 3px; }
.viz-bar-lbl { font-size: 10px; color: var(--ink-3); margin-top: 4px; }

/* cells — arrays, strings */
.viz-cells { display: flex; gap: 6px; min-width: min-content; padding-bottom: 4px; }
.viz-cell {
  min-width: 40px; display: grid; justify-items: center; gap: 2px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 8px 6px 5px; transition: .25s;
}
.viz-cell b { font-family: var(--mono); font-size: 15px; }
.viz-cell span { font-size: 9.5px; color: var(--ink-3); }
.viz-cell em {
  font-style: normal; font-size: 9.5px; font-weight: 750; color: var(--accent);
  min-height: 13px; letter-spacing: .3px;
}
.viz-cell[data-win="1"] { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.viz-cell.is-active { border-color: var(--accent); transform: translateY(-3px); }
.viz-cell.is-peak   { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card)); }
.viz-cell.is-stale  { border-color: var(--bad); opacity: .6; }
.viz-cell.is-done   { opacity: .5; }

/* spans — intervals with a sweep line */
.viz-spans { display: grid; gap: 5px; min-width: 260px; }
.viz-span-row { display: flex; align-items: center; gap: 8px; }
.viz-span-lbl { font-size: 10.5px; font-family: var(--mono); color: var(--ink-3); width: 24px; flex: none; }
.viz-span-track { position: relative; flex: 1; height: 15px; background: var(--card); border-radius: 4px; }
.viz-span-track > i {
  position: absolute; top: 2px; bottom: 2px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink-3) 40%, transparent); transition: .3s;
}
.viz-span-track > i.is-active { background: var(--accent); }
.viz-span-track > i.is-done   { background: color-mix(in srgb, var(--ink-3) 28%, transparent); }
.viz-span-track > u {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn);
  transition: left .35s cubic-bezier(.4,0,.2,1);
}

.viz-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.viz-vars .var { background: var(--card); }
.viz-note { font-size: 14px; color: var(--ink-2); margin-top: 8px; min-height: 2.8em; }
.viz-note p { margin: 0 0 4px; }

.viz-ctl { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.viz-ctl .chip-btn { padding: 7px 11px; }
.viz-ctl .chip-btn:disabled { opacity: .35; }
.viz-speed { min-width: 46px; }
.viz-scrub { flex: 1; accent-color: var(--accent); min-width: 60px; }
.viz-pos { font-size: 11px; color: var(--ink-3); margin-top: 6px; text-align: center; }
.viz-caption { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }

/* problem hint / solution reveals */
.problem-reveals { margin-top: 8px; display: grid; gap: 6px; }
.problem-reveals summary {
  cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--ink-3);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  display: inline-block; list-style: none;
}
.problem-reveals summary::-webkit-details-marker { display: none; }
.problem-reveals details[open] summary { color: var(--accent); border-color: var(--accent); }
.reveal-body { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.reveal-body pre { font-size: 12.5px; }

.anim-badge {
  color: var(--good); font-weight: 700;
  background: color-mix(in srgb, var(--good) 14%, transparent);
  border-radius: 999px; padding: 1px 7px;
}

/* summary text on a list card — markdown, first paragraph only */
.card-sub { font-size: 13.5px; color: var(--ink-2); }
.card-sub p { margin: 0; }
.card-sub strong { color: var(--ink); }

/* ---------- practical mode ---------- */

.slack { border-left: 3px solid var(--accent-2); }
.slack-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.slack-head b { display: block; font-size: 14px; }
.slack-head span { font-size: 11.5px; color: var(--ink-3); }

.ac-row { display: flex; gap: 9px; padding: 6px 0; font-size: 14.5px; }
.ac-row > span { color: var(--ink-3); }
.ac-row p { margin: 0; }

.tkt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tkt-type {
  font-size: 11px; font-weight: 750; letter-spacing: .4px; padding: 3px 9px;
  border-radius: 999px; background: var(--card-2);
}
.tkt-type[data-tone="accent"]  { color: var(--accent); }
.tkt-type[data-tone="accent2"] { color: var(--accent-2); }
.tkt-type[data-tone="bad"]     { color: var(--bad); }
.tkt-type[data-tone="good"]    { color: var(--good); }
.tkt-type[data-tone="ink3"]    { color: var(--ink-3); }
.tkt-id { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.pill[data-p="P0"], .pill[data-p="P1"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

.work-step .step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.work-step .step-head h3 { margin: 0; }

.decision-opt { align-items: flex-start; }
.decision-opt[data-on="1"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.consequence { border-top: 1px solid var(--line); margin-top: 14px; }

/* board */
.board { display: grid; gap: 12px; }
@media (min-width: 780px) { .board { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.board-col { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.board-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3); padding: 2px 4px 10px;
}
.board-head span { background: var(--card); border-radius: 999px; padding: 1px 7px; }
.board-empty { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 14px 0; }

.tkt {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
}
.tkt:active { transform: scale(.995); }
.tkt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tkt h3 { margin: 0 0 8px; font-size: 14px; font-weight: 650; line-height: 1.35; }
.tkt-foot { display: flex; align-items: center; gap: 6px; }
.tkt[data-type="incident"], .tkt[data-type="bug"] { border-left: 3px solid var(--bad); }
.tkt[data-type="feature"] { border-left: 3px solid var(--accent); }
.tkt[data-type="spike"]   { border-left: 3px solid var(--accent-2); }
.tkt[data-type="review"]  { border-left: 3px solid var(--good); }

.callback {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--card));
}
.callback-choice { font-size: 13.5px; margin: 0 0 10px; }
.callback-choice b { color: var(--warn); }

/* ---------- notebooks ---------- */

.nb-title { font-size: 23px; line-height: 1.25; margin: 8px 0 6px; letter-spacing: -.4px; }

.nb-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px;
  margin-bottom: 14px; border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.nb-tabs::-webkit-scrollbar { display: none; }
.nb-tab {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 650;
  color: var(--ink-3); background: var(--card); border: 1px solid var(--line);
}
.nb-tab[data-on="1"] {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
}
.nb-tab span { font-size: 12px; }

.nb-intro { font-size: 13.5px; color: var(--ink-3); margin: 0 0 12px; }

.nb-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}
.nb-pos { font-size: 12px; color: var(--ink-3); }

/* notes aesthetic — highlighter, key boxes, recap card */
mark {
  background: color-mix(in srgb, var(--warn) 30%, transparent);
  color: inherit; padding: 1px 3px; border-radius: 3px;
}

.nb-block {
  border-left: 3px solid var(--line); background: var(--card);
  border-radius: 0 14px 14px 0; padding: 14px 16px; margin-bottom: 12px;
}
.nb-block > b {
  display: block; font-size: 11px; font-weight: 750; letter-spacing: .9px;
  text-transform: uppercase; margin-bottom: 8px;
}
.nb-block[data-kind="key"]  { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.nb-block[data-kind="key"] > b  { color: var(--accent); }
.nb-block[data-kind="warn"] { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--card)); }
.nb-block[data-kind="warn"] > b { color: var(--bad); }
.nb-block[data-kind="note"] > b { color: var(--ink-3); }
.nb-block .lens-body > :last-child { margin-bottom: 0; }

.nb-recap {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 14px; padding: 16px; margin-top: 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.nb-recap-head {
  font-size: 11px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.nb-recap ul { margin: 0; padding-left: 18px; }
.nb-recap li { font-size: 14.5px; margin-bottom: 8px; }
.nb-recap li:last-child { margin-bottom: 0; }

/* `.card p { margin: 0 }` exists for one-line card subtitles, but it was also
   flattening every prose paragraph rendered inside a card. Restore spacing and
   size for actual prose bodies. */
.card .lens-body p,
.card .reveal-body p,
.card .viz-note p {
  margin: 0 0 13px;
  font-size: inherit;
}
.card .lens-body p:last-child,
.card .reveal-body p:last-child,
.card .viz-note p:last-child { margin-bottom: 0; }

/* ---------- handbooks ----------
   A page of one is meant to read as a sheet of paper someone wrote on: warm
   ground, ruled feel, spiral binding down the left, coloured boxes. Display
   type is handwriting; body type is not, because a phone screen is not a poster
   and the body still has to be readable at 14px. */

.hb {
  --paper: #141a23;
  --paper-2: #1a212c;
  --paper-line: #2b3648;
  --hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  position: relative;
  margin: 6px 0 14px;
  padding-left: 26px;
}
.hb[style*="--hb"] { }

/* spiral binding */
.hb-rings {
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 26px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.hb-rings i {
  width: 15px; height: 7px; border-radius: 7px;
  border: 2px solid var(--ink-3); border-right-color: transparent; opacity: .5;
}

.hb-sheet {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 4px 14px 14px 4px;
  padding: 14px 15px 20px;
  box-shadow: 0 1px 0 var(--paper-line), 0 10px 24px -18px #000;
}

.hb-head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1.5px solid var(--paper-line); padding-bottom: 8px; margin-bottom: 14px;
}
.hb-tag {
  font-family: var(--hand); font-size: 14px; letter-spacing: .3px;
  color: var(--hb, var(--accent-2)); font-weight: 700;
}
.hb-page-no {
  margin-left: auto; font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--paper-line); border-radius: 999px; padding: 2px 9px;
}

.hb-title-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.hb-n {
  font-family: var(--hand); font-size: 25px; font-weight: 700; line-height: 1;
  color: var(--hb, var(--accent-2));
}
.hb-h {
  font-family: var(--hand); font-size: 25px; line-height: 1.15; margin: 0;
  letter-spacing: .2px; font-weight: 700;
}
.hb-thesis {
  font-size: 13.5px; color: var(--ink-2); font-style: italic;
  border: 1.5px dashed var(--paper-line); border-radius: 9px;
  padding: 8px 11px; margin: 11px 0 4px;
}
.hb-block-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hand); font-size: 17px; font-weight: 700; letter-spacing: .3px;
  margin: 20px 0 9px; color: var(--ink);
}
.hb-block-title::after {
  content: ""; flex: 1; height: 1.5px; background: var(--paper-line);
}
.hb-caption { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.hb-prose { font-size: 14.5px; margin-top: 10px; }
.hb-prose > :last-child { margin-bottom: 0; }

/* The poster grid. Two columns on a phone, deliberately small type: the whole
   point is seeing the map at once. One column here made it an app card list. */
.hb-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.hb-map-box {
  display: block; background: var(--paper-2); min-width: 0;
  border: 1.5px solid var(--paper-line); border-radius: 9px; padding: 7px 8px 8px;
}
a.hb-map-box:active { transform: scale(.98); }
.hb-map-head {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--hand); font-weight: 700; font-size: 12.5px; line-height: 1.2;
  padding: 2px 6px; border-radius: 5px; margin-bottom: 5px;
  background: color-mix(in srgb, var(--t) 20%, transparent); color: var(--t);
  border: 1px solid color-mix(in srgb, var(--t) 38%, transparent);
}
.hb-map-icon { font-family: var(--font); font-size: 11px; opacity: .9; }
.hb-map-box ul { margin: 0; padding-left: 11px; }
.hb-map-box li {
  font-size: 12px; line-height: 1.35; color: var(--ink-2); margin-bottom: 1px;
  overflow-wrap: anywhere;
}
.hb-map-box li::marker { font-size: 9px; }
.hb-map-box li:last-child { margin-bottom: 0; }
.hb-map-count { font-size: 10px; color: var(--ink-3); margin-top: 5px; }

/* boxed panels */
.hb-panels { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hb-panel {
  background: var(--paper-2); border: 1.5px solid color-mix(in srgb, var(--t) 34%, var(--paper-line));
  border-radius: 11px; padding: 10px 12px 11px;
}
.hb-panel[data-dashed="1"] { border-style: dashed; }
.hb-panel-head {
  font-family: var(--hand); font-weight: 700; font-size: 15.5px; color: var(--t); margin-bottom: 6px;
}
.hb-panel-lead { font-size: 13px; color: var(--ink-2); margin: 0 0 7px; }
.hb-panel-list { margin: 0; padding-left: 17px; }
.hb-panel-list li { font-size: 13.5px; color: var(--ink-2); margin-bottom: 5px; }
.hb-panel-list li:last-child { margin-bottom: 0; }
.hb-panel-list[data-mark="check"], .hb-list[data-mark="check"],
.hb-panel-list[data-mark="cross"], .hb-list[data-mark="cross"] { list-style: none; padding-left: 2px; }
/* hang the wrapped lines under the text, not under the tick */
.hb-panel-list[data-mark="check"] li, .hb-list[data-mark="check"] li,
.hb-panel-list[data-mark="cross"] li, .hb-list[data-mark="cross"] li {
  padding-left: 1.15em; text-indent: -1.15em;
}
.hb-panel-list[data-mark="check"] li::before,
.hb-list[data-mark="check"] li::before { content: "✓ "; color: var(--good); font-weight: 700; }
.hb-panel-list[data-mark="cross"] li::before,
.hb-list[data-mark="cross"] li::before { content: "✕ "; color: var(--bad); font-weight: 700; }
.hb-panel-foot {
  font-size: 12px; color: var(--ink-3); margin-top: 8px;
  border-top: 1px dashed var(--paper-line); padding-top: 7px;
}
.hb-verdict {
  font-size: 12.5px; margin-top: 8px; padding: 6px 9px; border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--t) 40%, transparent);
  color: color-mix(in srgb, var(--t) 80%, var(--ink)); font-style: italic;
}
.hb-list { margin: 0; padding-left: 18px; }
.hb-list li { font-size: 14px; color: var(--ink-2); margin-bottom: 5px; }

/* cheat-sheet rows */
.hb-sheet-rows { display: grid; gap: 8px; }
.hb-row {
  display: flex; gap: 10px; background: var(--paper-2);
  border: 1px solid var(--paper-line); border-left: 3px solid var(--t);
  border-radius: 9px; padding: 9px 11px;
}
.hb-row-n {
  flex: 0 0 22px; height: 22px; border-radius: 6px; display: grid; place-content: center;
  background: color-mix(in srgb, var(--t) 20%, transparent); color: var(--t);
  font-size: 12px; font-weight: 700;
}
.hb-row-main { flex: 1; min-width: 0; }
.hb-row-topic { font-weight: 650; font-size: 14.5px; margin-bottom: 2px; }
.hb-row-desc { font-size: 13.5px; color: var(--ink-2); }
.hb-row-points { margin: 6px 0 0; padding-left: 16px; }
.hb-row-points li { font-size: 12.5px; color: var(--ink-3); margin-bottom: 3px; }
.hb-row-eg {
  margin-top: 7px; font-size: 12.5px; font-family: var(--mono);
  background: var(--paper); border: 1px dashed var(--paper-line);
  border-radius: 7px; padding: 6px 8px; color: var(--ink-2); overflow-x: auto;
}
.hb-row-eg span { color: var(--ink-3); margin-right: 6px; font-family: var(--font); font-style: italic; }

/* capacity estimation */
.hb-assume {
  border: 1.5px dashed color-mix(in srgb, var(--warn) 45%, var(--paper-line));
  border-radius: 11px; padding: 10px 11px; margin-bottom: 11px;
}
.hb-assume-label {
  font-family: var(--hand); font-size: 14px; font-weight: 700; color: var(--warn); margin-bottom: 8px;
}
.hb-assume-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hb-assume-box {
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: 9px; padding: 7px 9px; display: grid; gap: 2px;
}
.hb-assume-k { font-size: 11.5px; color: var(--ink-3); }
.hb-assume-box b { font-size: 14.5px; }
.hb-assume-note { font-size: 11px; color: var(--ink-3); font-style: italic; }

/* code panel */
.hb-code pre { margin: 0; }
.hb-code { border-radius: 10px; overflow: hidden; }

/* margin note */
.hb-note {
  border: 1.5px solid color-mix(in srgb, var(--t) 40%, transparent);
  background: color-mix(in srgb, var(--t) 8%, var(--paper-2));
  border-radius: 11px; padding: 10px 12px; margin: 14px 0 0;
}
.hb-note > b { display: block; font-family: var(--hand); font-size: 15px; color: var(--t); margin-bottom: 4px; }
.hb-note .lens-body { font-size: 13.5px; }
.hb-note .lens-body > :last-child { margin-bottom: 0; }
.hb-note .lens-body p { margin: 0 0 10px; }

/* tones — set --t only on the element that carries data-tone. Children like
   .hb-panel-head inherit it; giving them their own default would silently
   override the parent's tone and paint every heading the same colour. */
.hb-map-head, .hb-panel, .hb-row, .hb-note { --t: var(--accent); }
.hb [data-tone="accent"]  { --t: var(--accent); }
.hb [data-tone="accent2"] { --t: var(--accent-2); }
.hb [data-tone="good"]    { --t: var(--good); }
.hb [data-tone="warn"]    { --t: var(--warn); }
.hb [data-tone="bad"]     { --t: var(--bad); }
.hb [data-tone="ink3"]    { --t: var(--ink-3); }

/* must-do questions */
.hb-q-count {
  font-family: var(--font); font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--paper-line); border-radius: 999px; padding: 1px 8px; font-weight: 500;
}
.hb-qs { display: grid; gap: 6px; }
.hb-q {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: 9px; padding: 8px 10px;
}
.hb-q .tick { flex: 0 0 auto; margin-top: 1px; }
.hb-q-main { flex: 1; min-width: 0; }
.hb-q-t { font-size: 14px; display: block; }
.hb-q .tick[data-on="1"] + .hb-q-main .hb-q-t { color: var(--ink-3); text-decoration: line-through; }
.hb-q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.hb-q-meta .pill { font-size: 10.5px; padding: 1px 7px; }
.hb-q-meta .pill[data-d="easy"]   { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.hb-q-meta .pill[data-d="medium"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.hb-q-meta .pill[data-d="hard"]   { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.hb-q-pat { color: var(--accent); }

/* deck navigation */
.hb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.hb-contents-btn { flex: 0 0 auto; }
.hb-toc-fold { border-top: 1px solid var(--line); padding-top: 10px; }
.hb-toc-fold summary { font-size: 13px; color: var(--ink-3); cursor: pointer; padding: 4px 0; }
.hb-toc { display: grid; gap: 4px; margin-top: 8px; }
.hb-toc-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card);
}
.hb-toc-row[data-on="1"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.hb-toc-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); flex: 0 0 22px; }
.hb-toc-t { flex: 1; font-size: 14px; }
.hb-toc-q { font-size: 11.5px; color: var(--ink-3); }

/* cover cards on the index */
.hb-cover-card { border-left: 3px solid var(--hb, var(--accent-2)); }
.hb-cover-kicker {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--hb, var(--accent-2)); font-weight: 700;
}
.hb-cover-title { font-family: var(--hand); font-size: 22px; margin: 4px 0 2px; font-weight: 700; }
.hb-cover-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 4px; }

@media (min-width: 560px) {
  .hb-map { grid-template-columns: repeat(3, 1fr); }
  .hb-map-box li { font-size: 12.5px; }
  .hb-panels[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .hb-assume-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .hb-map { grid-template-columns: repeat(4, 1fr); }
  .hb-assume-row { grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-color-scheme: light) {
  .hb {
    --paper: #fffdf6;
    --paper-2: #fbf7ea;
    --paper-line: #e2d9c2;
  }
  .hb-sheet { box-shadow: 0 1px 0 var(--paper-line), 0 12px 26px -20px #6b5a2e; }
  .hb-rings i { opacity: .65; }
}

/* ---------- handbook: density pass ----------
   The first cut rendered as an app card list wearing a paper texture. These
   rules tighten it into something you can actually see at once, and move long
   explanations behind a tap so the page stays a poster. */

.hb { padding-left: 21px; }
.hb-rings { width: 21px; top: 14px; bottom: 14px; }
.hb-rings i {
  width: 17px; height: 9px; border-radius: 9px; opacity: .75;
  border: 1.5px solid var(--ink-3);
  background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--ink-3) 25%, transparent) 100%);
}
.hb-sheet { padding: 12px 12px 18px; }

/* tighter headings so more content clears the fold */
.hb-head { padding-bottom: 6px; margin-bottom: 11px; }
.hb-h, .hb-n { font-size: 22px; }
.hb-thesis { font-size: 12.5px; padding: 7px 10px; margin: 9px 0 2px; }
.hb-block-title { font-size: 15.5px; margin: 15px 0 7px; }

/* panels: short bullets, tighter box */
.hb-panels { gap: 8px; }
.hb-panel { padding: 8px 10px 9px; border-radius: 9px; }
.hb-panel-head { font-size: 14px; margin-bottom: 5px; }
.hb-panel-list { padding-left: 15px; }
.hb-panel-list li { font-size: 13px; line-height: 1.4; margin-bottom: 3px; }

/* "…and here is why" — the long version, one tap away */
.hb-more > summary {
  cursor: pointer; list-style: none; display: block;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink-3) 70%, transparent);
}
.hb-more > summary::-webkit-details-marker { display: none; }
.hb-more > summary::after { content: " ▸"; color: var(--ink-3); font-size: 10px; }
.hb-more[open] > summary::after { content: " ▾"; }
.hb-more[open] > summary { color: var(--ink); }
.hb-more-body {
  font-size: 12.5px; color: var(--ink-3); margin-top: 5px; padding-left: 1px;
  border-left: 2px solid var(--paper-line); padding-left: 9px;
}
.hb-more-body p { margin: 0 0 8px; }
.hb-more-body > :last-child { margin-bottom: 0; }
.hb-panel-list li.has-more, .hb-list li.has-more { text-indent: 0; }

/* cheat-sheet rows a little tighter too */
.hb-sheet-rows { gap: 6px; }
.hb-row { padding: 8px 10px; gap: 9px; }
.hb-row-topic { font-size: 14px; }
.hb-row-desc { font-size: 13px; line-height: 1.4; }
.hb-row-points li { font-size: 12px; line-height: 1.4; }
.hb-row-eg { font-size: 12px; padding: 5px 7px; }

/* questions list */
.hb-q { padding: 7px 9px; }
.hb-q-t { font-size: 13.5px; line-height: 1.35; }

/* A ✓/✕ bullet whose body is a <details> put the marker on its own line —
   summary is display:block. Flex keeps them on one line and hangs the wrap. */
.hb-panel-list[data-mark="check"] li, .hb-list[data-mark="check"] li,
.hb-panel-list[data-mark="cross"] li, .hb-list[data-mark="cross"] li {
  display: flex; gap: .35em; padding-left: 0; text-indent: 0;
}
.hb-panel-list[data-mark="check"] li::before, .hb-list[data-mark="check"] li::before,
.hb-panel-list[data-mark="cross"] li::before, .hb-list[data-mark="cross"] li::before {
  flex: 0 0 auto; line-height: inherit;
}
.hb-panel-list li.has-more, .hb-list li.has-more { min-width: 0; }
.hb-more { min-width: 0; }

/* ---------- "in this repo" + build tasks ----------
   The point of these two components is that the example is not invented: it is
   the file you are about to open. They should look like a path, not like prose. */

.repo-ref {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px; margin-bottom: 9px;
}
.repo-ico { color: var(--accent); font-size: 12px; }
.repo-ref code {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: none; padding: 0; overflow-wrap: anywhere;
}
.repo-lines {
  font-size: 11px; color: var(--ink-3);
  border-left: 1px solid var(--line); padding-left: 7px;
}
.repo-what { font-size: 13.5px; color: var(--ink-2); margin: 0 0 11px; font-style: italic; }

.build-task { border-left: 3px solid var(--good); }
.build-task h3 { font-size: 15px; line-height: 1.35; }
.build-task .repo-ref { margin-bottom: 0; }
.build-check {
  margin-top: 11px; padding: 9px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--good) 8%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--good) 28%, transparent);
}
.build-check > b {
  display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--good); margin-bottom: 5px;
}
.build-check > div { font-size: 13.5px; }
.build-check > div > :last-child { margin-bottom: 0; }
.build-check pre { margin: 6px 0 0; }
.build-stretch { margin-top: 10px; }
.build-stretch > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-3);
  padding: 4px 0; list-style: none;
}
.build-stretch > summary::-webkit-details-marker { display: none; }
.build-stretch > summary::before { content: "+ "; color: var(--accent); }
.build-stretch[open] > summary::before { content: "− "; }
.build-stretch .reveal-body { font-size: 13.5px; color: var(--ink-2); }

/* the tick is shared with pattern problems and handbook questions */
.build-task .tick { flex: 0 0 auto; margin-top: 2px; }
.build-task .tick[data-on="1"] + div h3 { color: var(--ink-3); text-decoration: line-through; }

/* Code blocks outside the reels feed had no styling and no overflow rule —
   `overflow-x: auto` lived only on `.slide-body pre`, so a long line in a
   lesson, a handbook or a build task was simply unreachable. Bare `pre` is
   (0,0,1), so the earlier `.slide-body pre` and `.trace-code` rules still win. */
pre {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; margin: 0 0 13px; max-width: 100%; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
pre code { background: none; padding: 0; color: var(--ink); white-space: pre; }

/* ---------- the plan, and the habit around it ---------- */

.habit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.habit-stat {
  --t: var(--ink-3);
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--t); border-radius: 12px;
  padding: 10px 8px; text-align: center; min-width: 0;
}
.habit-stat[data-tone="good"] { --t: var(--good); }
.habit-stat[data-tone="bad"]  { --t: var(--bad); }
.habit-stat b { display: block; font-size: 21px; font-weight: 750; letter-spacing: -.5px; line-height: 1.15; }
.habit-stat b i { font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.habit-stat span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.today-card {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.today-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.today-day { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .6px; text-transform: uppercase; }
.today-week { font-size: 12px; color: var(--ink-3); }
.today-title { font-size: 22px; line-height: 1.25; margin: 6px 0 8px; letter-spacing: -.4px; }
.today-note { font-size: 13px; color: var(--ink-2); font-style: italic; margin: 10px 0 0; }

.plan-item { position: relative; }
.plan-item .card-row { align-items: flex-start; gap: 11px; }
.plan-item[data-done="1"] h3 { color: var(--ink-3); text-decoration: line-through; }
.plan-item.is-offline { border-left: 3px solid var(--warn); }
/* the whole row is a link, but the tick must stay clickable — so the hit area
   sits underneath everything rather than wrapping it */
.plan-hit { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); }
.plan-item .card-row > *:not(.plan-hit) { position: relative; z-index: 1; }
.plan-item .tick { flex: 0 0 auto; margin-top: 1px; }
.plan-kind {
  font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; margin-bottom: 3px;
}
.plan-sub { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; }

.exit-card {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px;
}
.exit-card > b {
  display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--good); margin-bottom: 5px;
}
.exit-card p { margin: 0; font-size: 14px; color: var(--ink-2); }

.freeze-card {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.freeze-card > div { flex: 1; min-width: 180px; }
.freeze-card b { font-size: 14px; }
.freeze-card p { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 0; }

.plan-day[data-state="done"] .plan-daynum { background: var(--good); color: var(--on-accent); }
.plan-day[data-state="now"]  { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.plan-day[data-state="now"] .plan-daynum { background: var(--accent); color: var(--on-accent); }
.plan-daynum {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-content: center; font-size: 12px; font-weight: 700;
  background: var(--card-2); color: var(--ink-3);
}
.plan-links { margin-top: 16px; }
.side-count[data-streak="1"] { background: none; color: var(--warn); font-weight: 700; }

/* ---------- account ---------- */
.auth-label {
  display: block; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; margin: 12px 0 5px;
}
.auth-label:first-child { margin-top: 0; }
.auth-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.auth-actions .btn { flex: 1; min-width: 130px; margin: 0; }
[data-busy="1"] { opacity: .55; pointer-events: none; }
.side-count[data-signin="1"] {
  background: var(--accent); color: var(--on-accent);
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-content: center; font-size: 11px; font-weight: 700;
}

/* ---------- the thinking gym ---------- */

.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.skill-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 12px; text-align: left; display: grid; gap: 5px; cursor: pointer;
  font: inherit; color: inherit; min-width: 0;
}
.skill-tile:active { transform: scale(.98); }
.skill-emoji { font-size: 22px; line-height: 1; }
.skill-tile b { font-size: 14.5px; line-height: 1.25; }
.skill-for { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.skill-count { font-size: 11px; color: var(--accent); }

.method-claim { font-size: 16px; line-height: 1.45; color: var(--ink); margin: 4px 0 10px; }

/* the myth/fact split — the whole point of the format */
.myth { display: grid; gap: 0; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.myth-row { padding: 12px 14px; border: 1px solid var(--line); }
.myth-row[data-side="wrong"] {
  background: color-mix(in srgb, var(--bad) 8%, var(--card));
  border-bottom: 0; border-radius: 14px 14px 0 0;
}
.myth-row[data-side="right"] {
  background: color-mix(in srgb, var(--good) 8%, var(--card));
  border-radius: 0 0 14px 14px;
}
.myth-row > b { display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
.myth-row[data-side="wrong"] > b { color: var(--bad); }
.myth-row[data-side="right"] > b { color: var(--good); }
.myth-row .lens-body { font-size: 14px; }
.myth-row .lens-body > :last-child { margin-bottom: 0; }
.myth-row[data-side="wrong"] .lens-body { text-decoration: line-through; opacity: .75; }

.src { display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--accent); }

.prac { border-left: 3px solid var(--accent-2); }
.prac-top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.prac-top b { font-size: 15px; }
.prac-top span { font-size: 11.5px; color: var(--ink-3); }
.prac p { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 0; }

.drill {
  border: 2px solid var(--good); border-radius: 14px; padding: 14px; margin: 16px 0;
  background: color-mix(in srgb, var(--good) 6%, var(--card));
}
.drill-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.drill-head > b { flex: 1; font-size: 15px; color: var(--good); }
.drill-steps { margin: 0; padding-left: 20px; }
.drill-steps li { font-size: 14px; margin-bottom: 9px; line-height: 1.45; }
.drill-pass {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13.5px;
}
.drill-pass > b { display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.drill-pass p { margin: 0; }

@media (min-width: 700px) { .skill-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- the feed ----------
   A method slide has to read differently from a lesson slide at a glance, and
   the drill slide has to look like an invitation rather than more reading. */

/* .slide already paints the radial tint from --slide-tint; a ::before here
   would double it. The variant styling below is all that is needed. */
.slide.is-method .slide-title { letter-spacing: -.6px; }
.slide.is-method .lens-chip { border-color: color-mix(in srgb, var(--lens) 55%, transparent); }

.slide-src { font-size: 11.5px; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* the drill slide: bordered, greener, and obviously actionable */
.slide.is-drill {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 22%, transparent);
}
.slide.is-drill .slide-title { color: var(--good); }
.slide.is-drill .drill-steps { padding-left: 19px; }
.slide.is-drill .drill-steps li { font-size: 15px; margin-bottom: 11px; }
.slide.is-drill .drill-pass { border-top-color: color-mix(in srgb, var(--good) 30%, transparent); }
.slide.is-drill .slide-actions .chip-btn { flex: 1; text-align: center; padding: 11px 12px; font-size: 14px; }
.slide.is-drill .chip-btn[data-on="1"] {
  background: var(--good); color: var(--on-accent); border-color: var(--good);
}

/* "just scroll" — the no-plan escape hatch, prominent on purpose */
.scroll-btn {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: var(--on-accent); border: 0; font-weight: 700;
}

/* the swipe affordance was only on slide 1 of the old reels */
.slide:first-child .swipe-hint { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(-4px); opacity: .9 } }

/* Reel layout: the title used to pin to the top while the body centred, so a
   short slide left a large void between them. Auto margins above the title and
   below the body centre the two as one group, with the kicker and foot still
   anchored. Applies to lesson reels as well as the feed. */
.slide-title { margin-top: auto; }
.slide-body { flex: 0 1 auto; min-height: 0; margin-bottom: auto; }
.slide-inner { margin: 0; }
/* a slide with no title still needs the top spacer */
.slide-kicker + .slide-body { margin-top: auto; }

/* `--warn` at 30% over a near-black background lands on muddy brown with poor
   contrast against white text. Tint the text instead of the box: readable in
   both themes, and it reads as a highlighter rather than a redaction. */
mark {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
  box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--warn) 14%, transparent);
  padding: 0 2px; border-radius: 2px; font-weight: 600;
}
@media (prefers-color-scheme: light) {
  mark {
    background: color-mix(in srgb, var(--warn) 42%, transparent);
    color: #3a2c00;
    box-shadow: none;
  }
}

/* The feed is read at arm's length while scrolling, not studied. */
.slide-body { font-size: 18px; line-height: 1.6; }
.slide-title { font-size: 28px; }
@media (max-height: 700px) {
  .slide-body { font-size: 16.5px; }
  .slide-title { font-size: 24px; }
}

/* the "did you use it?" slide */
.slide.is-check { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.slide.is-check .slide-title { color: var(--accent-2); }
.check-claim { font-size: 16px; color: var(--ink-2); font-style: italic; margin: 0 0 18px; }
.check-q { font-size: 19px; font-weight: 650; margin: 0 0 16px; line-height: 1.4; }
.check-opts { display: grid; gap: 9px; }
.check-after {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px;
  background: var(--card-2); border: 1px solid var(--line);
}
.check-after b { display: block; margin-bottom: 3px; }
.plan-card { border-left: 3px solid var(--accent); }
.plan-weeks { margin: 12px 0 14px; padding-left: 18px; }
.plan-weeks li { font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
.plan-weeks li b { font-weight: 600; color: var(--ink); }

/* ---------- bottom tab bar ----------
   The app grew to thirteen top-level destinations behind one hamburger, which
   is where discoverability went (nobody found the login). Five thumb-reachable
   tabs carry the routes that matter; the sidebar keeps everything else. */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: grid; justify-items: center; gap: 3px;
  padding: 9px 4px 8px; font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .1px; min-width: 0;
}
.tab span { font-size: 19px; line-height: 1; }
.tab[aria-current="page"] { color: var(--accent); font-weight: 650; }
.tab:active { opacity: .6; }

/* the view must clear the bar, and full-bleed reels must clear it too */
body { padding-bottom: 0; }
.view { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.reels { scroll-padding-bottom: 0; }
.slide { padding-bottom: calc(env(safe-area-inset-bottom) + 74px); }

/* on desktop the sidebar is permanent, so the tab bar is redundant */
@media (min-width: 900px) {
  .tabbar { display: none; }
  .view { padding-bottom: 40px; }
  .slide { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
}
/* backdrop-filter is not universal; without it the bar was transparent and
   content read straight through it. Opaque base, blur only as an enhancement. */
.tabbar { background: var(--bg-soft); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: color-mix(in srgb, var(--bg-soft) 88%, transparent); }
}
/* `.view[data-chrome="page"]` is (0,2,0) and sets the `padding` shorthand, which
   resets the padding-bottom set on bare `.view` (0,1,0). Same trap as the
   sidebar margin bug — restate it on the selector that already wins.
   `full` chrome keeps padding 0; its slides pad themselves. */
.view[data-chrome="page"] { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .view[data-chrome="page"] { padding-bottom: 40px; }
}
/* a neutral placeholder beats asserting the wrong answer while we check */
.skeleton-line {
  height: 13px; border-radius: 7px; margin: 8px 0;
  background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none } }