:root {
  --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; --board: #fcfcf9; --brand: #2563eb;
  --hand: "Caveat", "Comic Sans MS", cursive; --ui: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--ui); color: var(--ink); background: #eef0f3; display: flex; flex-direction: column; min-height: 100vh; }

.top { display: flex; gap: 16px; align-items: center; padding: 12px 18px; background: #111827; color: #fff; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.25); }
#ask { display: flex; gap: 8px; flex: 1; min-width: 280px; }
#ask input { flex: 1; min-width: 0; font: 500 16px var(--ui); padding: 11px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; }
#ask input:focus { outline: 2px solid var(--brand); border-color: transparent; }
#ask select { font: 500 14px var(--ui); padding: 0 10px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; }
#ask button { font: 600 16px var(--ui); padding: 0 20px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer; }
#ask button:disabled { opacity: .6; cursor: wait; }

.langwrap { position: relative; display: flex; }
#langBtn { font: 500 14px var(--ui); padding: 0 12px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
#langPop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 290px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px; }
#langSearch { width: 100%; font: 500 15px var(--ui); padding: 9px 11px; border-radius: 8px; border: 1px solid #d1d5db; margin-bottom: 6px; }
#langList { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
#langList .lhead { font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .06em; color: #6b7280; padding: 8px 8px 4px; }
#langList .lopt { display: flex; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; font: 500 14px var(--ui); }
#langList .lopt span { color: #6b7280; font-weight: 400; }
#langList .lopt:hover, #langList .lopt:focus { background: #eef2ff; outline: none; }
#langList .lopt.on { background: #e0e7ff; }
.chips { display: flex; gap: 8px; padding: 10px 18px 0; flex-wrap: wrap; }
.chips button { font: 500 13px var(--ui); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chips button:hover { border-color: var(--brand); color: var(--brand); }
.chips .sketchchip { flex: none; font: 600 13px var(--ui); padding: 7px 12px; border-radius: 999px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; text-decoration: none; white-space: nowrap; }
.chips .sketchchip:hover { border-color: #f59e0b; }

#board {
  position: relative; flex: 1; margin: 12px 18px; border-radius: 16px; background: var(--board);
  background-image: radial-gradient(#e7e5dc 1px, transparent 1px); background-size: 22px 22px;
  border: 1px solid #e2e0d6; box-shadow: 0 8px 30px rgba(17,24,39,.06);
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); grid-template-rows: auto 1fr;
  gap: 0 18px; padding: 14px 22px 18px; min-height: 480px; overflow: hidden;
}
#boardTitle { grid-column: 1 / -1; font: 700 40px/1.1 var(--hand); color: #111827; min-height: 48px; }
#figArea { min-height: 0; position: relative; }
#fig { width: 100%; height: 100%; min-height: 380px; overflow: visible; display: block; }
#notes { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; padding-top: 6px; overflow-y: auto; min-height: 0; }

#empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; pointer-events: none; }
#empty .big { font: 700 34px var(--hand); color: #374151; padding: 0 20px; }
#empty .small { color: var(--muted); font-size: 15px; }
#board.started #empty { display: none; }

/* notes column */
.note { font: 600 30px/1.15 var(--hand); color: var(--ink); padding: 2px 4px; transition: opacity .4s; }
.note.eq { font-family: var(--ui); }
.note.eq.lg { font-size: 1.9rem; }
.note.eq.md { font-size: 1.4rem; }
.note .katex-display { margin: .2em 0; text-align: left; }
.note .katex-display > .katex { text-align: left; }
.wipe { animation: wipe .9s ease-out both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.flash { animation: flash 1.5s ease-in-out; border-radius: 8px; }
@keyframes flash { 0%,100% { background: transparent; } 30%,70% { background: rgba(250,204,21,.35); } }
.fading { opacity: 0 !important; }

/* svg figures */
#fig g.fig { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s; transform-origin: 0 0; }
#fig text { font-family: var(--hand); font-weight: 700; paint-order: stroke; stroke: var(--board); stroke-width: 5px; stroke-linejoin: round; }
#fig .pop { animation: pop .5s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
#fig .fadein { animation: fadein .7s ease-out both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
#fig .glow { animation: glow 1.6s ease-in-out; }
@keyframes glow { 0%,100% { filter: none; } 30%,70% { filter: drop-shadow(0 0 6px rgba(250,204,21,1)) drop-shadow(0 0 2px rgba(250,204,21,1)); } }

/* quiz */
.quiz { font-family: var(--ui); background: #fff; border: 2px solid #c7d2fe; border-radius: 14px; padding: 14px; box-shadow: 0 6px 18px rgba(37,99,235,.12); }
.quiz .q { font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.quiz button { display: block; width: 100%; text-align: left; font: 500 15px var(--ui); margin: 6px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #f9fafb; cursor: pointer; color: var(--ink); }
.quiz button:hover:not(:disabled) { border-color: var(--brand); }
.quiz button.right { background: #dcfce7; border-color: #16a34a; }
.quiz button.wrong { background: #fee2e2; border-color: #dc2626; }
.quiz .explain { margin-top: 8px; font: 600 26px var(--hand); color: #15803d; }
.quiz .explain.no { color: #b45309; }
.quiz .yourturn { font-size: 13px; color: var(--brand); font-weight: 600; margin-bottom: 6px; }
/* "Ask me questions": the guess-first question (predict.py), the quiz's card with chips, or a 3-2-1 countdown in videos */
.quiz.predict { border-color: #fcd34d; box-shadow: 0 6px 18px rgba(217,119,6,.14); }
.quiz.predict .yourturn { display: flex; align-items: center; gap: 8px; color: #b45309; }
.quiz.predict .pchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quiz.predict .pchips button { display: inline-block; width: auto; margin: 0; border-radius: 999px; padding: 9px 16px; font-weight: 600; text-align: center; }
.quiz.predict .pchips button.dim { opacity: .45; }
.quiz.predict .pchips .pskip { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; padding: 9px 8px; text-decoration: underline; text-underline-offset: 3px; }
.quiz.predict .explain { font-size: 24px; line-height: 1.15; }
.quiz.predict .pcount { position: relative; width: 26px; height: 26px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.quiz.predict .pcount svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz.predict .pcount circle { fill: none; stroke-width: 3.5; }
.quiz.predict .pcount .bg { stroke: #fde68a; }
.quiz.predict .pcount .fg { stroke: #f59e0b; stroke-dasharray: 94.25; stroke-linecap: round; }
.quiz.predict .pcount b { position: relative; font: 700 13px var(--ui); color: #92400e; }
.quiz.predict .pcount.done { background: #16a34a; }
.quiz.predict .pcount.done svg { display: none; }
.quiz.predict .pcount.done b { color: #fff; }
.quiz.predict.compact .pchips button { padding: 6px 12px; }
.quiz.predict.compact .explain { font-size: 20px; }

/* bottom bar */
.bar { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; align-items: center; padding: 10px 18px 14px; background: #fff; border-top: 1px solid var(--line); }
#status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; flex: none; }
.bar.talking .pulse { background: #22c55e; animation: beat 1s infinite; }
.bar.thinking .pulse { background: #f59e0b; animation: beat .6s infinite; }
@keyframes beat { 50% { transform: scale(1.5); opacity: .5; } }
#caption { font-size: 19px; line-height: 1.45; min-height: 28px; color: #8b93a1; }
#caption .w { transition: color .12s; }
#caption .w.on { color: var(--ink); }
#caption .w.now { color: var(--brand); }
.ctrl { display: flex; align-items: center; gap: 8px; }
.ctrl button { font: 600 13px var(--ui); padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); }
.ctrl button:disabled { opacity: .45; cursor: default; }
#metric { font-size: 12px; color: #059669; font-weight: 600; white-space: nowrap; }
.error { color: #b91c1c !important; }

@media (max-width: 860px) {
  #board { grid-template-columns: 1fr; grid-template-rows: auto minmax(260px, 46vh) auto; margin: 10px; padding: 12px; }
  #boardTitle { font-size: 32px; }
  .note { font-size: 26px; }
  .bar { grid-template-columns: 1fr; gap: 6px; }
  #ask { min-width: 100%; }
}

/* ask-anything bar */
#qa { display: flex; gap: 8px; margin: 0 18px 10px; }
#qa input { flex: 1; min-width: 0; font: 500 16px var(--ui); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
#qa input:focus { outline: 2px solid var(--brand); border-color: transparent; }
#qa button { font: 600 15px var(--ui); padding: 0 18px; border-radius: 12px; border: 0; background: #111827; color: #fff; cursor: pointer; }
#qa #mic { background: #fff; border: 1px solid var(--line); font-size: 18px; padding: 0 12px; }
#qa #mic.on { background: #fee2e2; border-color: #dc2626; animation: beat 1s infinite; }
.note.asked { font: 600 15px var(--ui); color: #1d4ed8; background: #eff6ff; border-radius: 10px; padding: 8px 12px; }
#fig .credit { font-family: var(--ui); font-weight: 500; stroke: none; }

#fig text.halo { stroke-width: 9px; }
.zoom { position: fixed; inset: 0; background: rgba(17,24,39,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 50; cursor: zoom-out; padding: 20px; }
.zoom img { max-width: 96vw; max-height: 86vh; background: #fff; border-radius: 10px; }
.zoom div { color: #e5e7eb; font-size: 14px; }

/* never let the page scroll sideways; long notes wrap, long equations scroll inside their note */
html, body { overflow-x: hidden; }
#board > * { min-width: 0; }
.note { overflow-wrap: anywhere; max-width: 100%; }
.note .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
#notes { padding-right: 4px; }
.note.eq.prev { opacity: .5; font-size: 1.05rem !important; margin-bottom: -6px; }

/* homework photo */
#ask .photobtn { background: #1f2937; border: 1px solid #374151; font-size: 18px; padding: 0 12px; }
#qa #photoBtn2 { background: #fff; border: 1px solid var(--line); font-size: 18px; padding: 0 12px; }
#ask .photobtn:hover, #qa #photoBtn2:hover { border-color: var(--brand); }
#photoChip { position: absolute; left: 14px; top: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 6px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.08); font: 600 14px var(--ui); color: var(--ink); max-width: 80%; }
#photoChip[hidden] { display: none; }
#photoThumb { width: 84px; height: 56px; object-fit: contain; background: #f3f0e4; border-radius: 8px; border: 1px solid var(--line); }
#photoChip.busy #photoMsg::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--brand); animation: beat 1s infinite; }
.zoom .vidbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.zoom .vidact { background: #2563eb; color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font: 600 14px var(--ui); text-decoration: none; cursor: pointer; }
.zoom .vidact:disabled { opacity: .6; cursor: default; }
.zoom .vidact[hidden] { display: none; }
.zoom .vidmsg { color: #cbd5e1; font-size: 13px; }
.zoom video { background: #000; border-radius: 10px; }
#short { white-space: nowrap; }

/* top-bar: Shorts tab + format picker */
#shortsTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; white-space: nowrap; }
#shortsTab:hover, #libraryTab:hover, #iconsTab:hover, #styleTab:hover, #sketchTab:hover { border-color: var(--brand); }
#iconsTab, #styleTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; white-space: nowrap; }
#iconsTab[aria-pressed="false"] { color: #9ca3af; filter: grayscale(1); text-decoration: line-through; }
/* "Ask me questions" (optional, predict.py): the top-bar switch (hidden unless the server offers it) and the guess-first
   question in the notes column, in the quiz's look: chips to tap (live), or a 3-2-1 "Think..." countdown (video) */
#askTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #9ca3af; cursor: pointer; white-space: nowrap; }
#askTab:hover { border-color: var(--brand); }
#askTab[aria-pressed="true"] { color: #fff; border-color: #f59e0b; box-shadow: inset 0 0 0 1px #f59e0b; }
#askTab[hidden] { display: none; }
/* tablets (641-860 px) show the nav buttons' names; with this sixth button they would wrap onto a second row, so they
   show their icons only, as from 861 px (the header rule further down; phones hide .top .lbl too) */
@media (min-width: 641px) and (max-width: 860px) { body.askable .top .lbl { display: none; } }
@media (max-width: 640px) {
  #askTab:not([hidden]) { font-size: 16px; height: 38px; min-width: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 420px) {  /* a sixth icon next to the brand: the full name still fits from 390 px (without its dot) */
  #askTab:not([hidden]) { min-width: 36px; padding: 0 7px; }
  body.askable .top { gap: 6px; }
  body.askable .brand { font-size: 14px; letter-spacing: -0.3px; gap: 0; overflow: hidden; }
  body.askable .brand .dot { display: none; }
}
#libraryTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; text-decoration: none; white-space: nowrap; }
.startsaved { margin-top: 12px; pointer-events: auto; font: 700 18px var(--ui); padding: 14px 28px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(37,99,235,.35); }

/* footer: the main video for the chosen format comes first */
.ctrl > * { order: 1; }
#metric { order: 0; }
body.vert #short { order: 0; }

/* vertical (9:16) live board: same lesson, laid out like the Short */
body.vert #board {
  flex: none; align-self: center; width: auto; height: calc(100vh - 240px); min-height: 560px; aspect-ratio: 9 / 16; max-width: calc(100vw - 20px);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px 0; padding: 14px 16px 16px; margin: 12px auto;
}
body.vert #boardTitle { font-size: 34px; text-align: center; min-height: 40px; }
body.vert #fig { min-height: 0; height: 100%; }
body.vert #notes { overflow: hidden; align-items: center; text-align: center; gap: 6px; padding: 0; max-height: 34%; }
body.vert .note { font-size: 26px; }
body.vert .note .katex-display, body.vert .note .katex-display > .katex { text-align: center; }
body.vert .quiz { text-align: left; width: 100%; }
body.vert #board > #caption { background: #fff; border: 1px solid #e2e0d6; border-radius: 14px; padding: 10px 14px; font-size: 20px; line-height: 1.35; text-align: center; color: #9aa1ad; min-height: 64px; box-shadow: 0 4px 14px rgba(17,24,39,.06); }
body.vert .bar { grid-template-columns: 170px 1fr; }
body.vert .bar .ctrl { justify-content: flex-end; }
@media (max-width: 860px) {
  body.vert #board { height: auto; min-height: 0; width: calc(100vw - 20px); margin: 10px; }
  body.vert .bar { grid-template-columns: 1fr; }
  body.vert .bar .ctrl { justify-content: flex-start; flex-wrap: wrap; }
}

/* video overlay close button; overlays opened from the Shorts feed sit above it */
.zoom .zx { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer; }
.zoom.top { z-index: 80; }

/* Shorts feed: full-screen vertical swipe, one Short per screen */
body.feedon { overflow: hidden; }
#shortsFeed { position: fixed; inset: 0; z-index: 70; background: #000; }
#shortsFeed[hidden] { display: none; }
#feedList { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
#feedList::-webkit-scrollbar { display: none; }
/* video and its info stack (never overlap the Short's own title or burned-in subtitles) */
.fitem { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 0 0; }
.fitem video { flex: 1 1 auto; min-height: 0; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #000; cursor: pointer; border-radius: 12px; }
.fhint { position: absolute; top: 14px; right: 66px; z-index: 2; font: 600 13px var(--ui); color: #fff; background: rgba(255,255,255,.16); padding: 0 14px; height: 42px; line-height: 42px; border-radius: 999px; pointer-events: none; }
.fmeta { flex: none; width: min(100%, 560px); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); color: #fff; }
.ftitle { font: 700 19px/1.25 var(--ui); }
.fsub { font: 500 13px var(--ui); color: #e2e8f0; margin: 3px 0 10px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fbtn { font: 600 13px var(--ui); padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(17,24,39,.55); color: #fff; text-decoration: none; cursor: pointer; }
.fbtn.pri { background: var(--brand); border-color: var(--brand); }
.fbtn:disabled { opacity: .6; cursor: default; }
.fempty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #e5e7eb; font: 500 16px var(--ui); padding: 30px; }
#feedClose { position: absolute; top: 14px; right: 16px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 18px; cursor: pointer; }
.feedhead { position: absolute; top: 20px; left: 18px; z-index: 2; color: #fff; font: 700 18px var(--ui); pointer-events: none; }

/* phones: the lesson form wraps (topic on its own line, controls below) instead of running off-screen */
@media (max-width: 860px) {
  #ask { flex-wrap: wrap; }
  #ask input { flex: 1 1 100%; }
  #ask select, #langBtn { height: 44px; flex: 1 1 auto; min-width: 0; }
  #ask button#go { height: 44px; }
  .langwrap { flex: 1 1 auto; min-width: 0; }
  #langBtn { width: 100%; max-width: none; }
  .fitem { padding-top: 64px; }
}

/* handout export sheet */
#export { white-space: nowrap; }
.zoom .expcard { cursor: default; background: #fff; border-radius: 16px; padding: 22px 24px; max-width: 440px; width: calc(100vw - 40px); box-shadow: 0 20px 50px rgba(0,0,0,.35); font-family: var(--ui); }
.zoom .expcard .exph { font: 700 20px var(--ui); color: #111827; }
.zoom .expcard .expsub { font: 400 14px/1.5 var(--ui); color: #4b5563; margin: 6px 0 16px; }
.exprow { display: flex; gap: 10px; flex-wrap: wrap; }
.exprow .vidact { flex: 1; text-align: center; min-width: 140px; }
.exprow .vidact.off { opacity: .4; pointer-events: none; }
.zoom .expcard .expmsg { font: 500 13px var(--ui); color: #6b7280; margin-top: 10px; }
.zoom .expcard .expmsg:empty { display: none; }

/* "Explain simpler" / "Go deeper" after a lesson */
.ctrl { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; max-width: 660px; }
@media (max-width: 760px) { .ctrl { justify-content: flex-start; } }
.bar .lvlbtn { background: #eef4ff; border-color: #bfd3fb; color: #1d4ed8; font-weight: 600; }
.bar .lvlbtn:hover { background: #dbe7fe; }

/* quiz squeezed into a short notes column: tighter card so the question and every option stay visible */
.quiz.compact { padding: 8px 10px; }
.quiz.compact .q { font-size: 15px; margin-bottom: 4px; }
.quiz.compact button { padding: 6px 10px; margin: 3px 0; font-size: 14px; }
.quiz.compact .explain { font-size: 21px; margin-top: 4px; }

/* phones: the notes row grows with its content (up to 270px) and the diagram row gives way, so a quiz is never squeezed
   into a 76px strip with its options hidden */
@media (max-width: 860px) {
  body:not(.vert) #board:has(#notes .quiz) { grid-template-rows: auto minmax(150px, 1fr) auto; }
  body:not(.vert) #board:has(#notes .quiz) #notes { max-height: 360px; }
  body:not(.vert) #board:has(#notes .quiz) #fig { min-height: 150px; }
  body:not(.vert) #board:has(#notes .quiz) { min-height: 560px; }
}

/* even line breaks in notes and the caption (no single word left alone on the last line) */
.note, #boardTitle { text-wrap: balance; }

/* vertical board: cap the notes by screen height. A % cap resolves against a grid row that grows with the quiz,
   so the quiz was clipped and the leftover space showed up as a gap above the caption. */
body.vert #notes { max-height: 22vh; max-height: 22dvh; }
body.vert #board:has(#notes .quiz) #notes { max-height: 44vh; max-height: 44dvh; }

/* ================================================================ phones (portrait, <= 640px)
   Idle: slim header, topic + Teach me on one row, style / language / format / photo on a second row, examples in one
   swipeable row. In a lesson: the form folds away behind "New topic", and the board fills the screen between the
   header and a slim caption + controls footer, so the drawing is never below the fold. */
#newTopic { display: none; }
@media (max-width: 640px) {
  body { min-height: 100dvh; }
  .top { gap: 8px; padding: 8px 10px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  .brand { font-size: 16px; flex: 1; min-width: 0; }
  .top .lbl { display: none; }
  #shortsTab, #libraryTab, #iconsTab, #styleTab, #newTopic { font-size: 16px; height: 38px; min-width: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
  #newTopic { font: 600 14px var(--ui); border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; white-space: nowrap; }

  /* topic row + settings row */
  #ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px 46px; grid-template-areas: "topic topic go go" "level lang fmt photo"; gap: 8px; flex: 1 1 100%; min-width: 0; }
  #ask input { grid-area: topic; height: 46px; padding: 0 12px; }
  #ask button#go { grid-area: go; height: 46px; padding: 0 10px; }
  #ask #level { grid-area: level; }
  #ask #format { grid-area: fmt; padding: 0 4px; text-align: center; }
  #ask .langwrap { grid-area: lang; position: static; }
  #ask .photobtn { grid-area: photo; padding: 0; }
  #ask select, #langBtn, #ask .photobtn { height: 40px; font-size: 14px; }
  #langBtn { width: 100%; max-width: none; padding: 0 8px; }
  /* language list: a bottom sheet instead of a dropdown that runs off the screen edge */
  #langPop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; z-index: 90; padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.3); }
  #langList { max-height: 52dvh; }
  #langSearch { font-size: 16px; }  /* 16px stops iOS zooming the page on focus */

  .chips { flex-wrap: nowrap; overflow-x: auto; padding: 10px 10px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; padding: 8px 12px; }

  #board { margin: 8px; padding: 10px 12px; border-radius: 14px; min-height: 0; grid-template-rows: auto minmax(220px, 1fr) auto; }
  #boardTitle { font-size: 28px; min-height: 34px; }
  #empty .big { font-size: 28px; }
  .note { font-size: 23px; }
  .note.eq.lg { font-size: 1.5rem; }
  .note.eq.md { font-size: 1.2rem; }
  #notes { gap: 4px; max-height: 26dvh; }

  #qa { margin: 0 8px 8px; gap: 6px; }
  #qa input { height: 44px; padding: 0 12px; }
  #qa button { padding: 0 14px; }
  #qa #mic, #qa #photoBtn2 { padding: 0 10px; }

  /* footer: caption on top, then status + one swipeable row of buttons (no 2-3 line wrap) */
  .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cap cap" "status ctrl"; gap: 6px 10px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #caption { grid-area: cap; font-size: 17px; line-height: 1.35; min-height: 46px; }
  #status { grid-area: status; font-size: 12px; }
  .ctrl { grid-area: ctrl; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ctrl::-webkit-scrollbar { display: none; }
  .ctrl button { flex: none; height: 36px; padding: 0 12px; }
  #metric { display: none; }

  /* in a lesson: fold the form away, the board takes the rest of the screen */
  body.inlesson:not(.askopen) #ask, body.inlesson .chips { display: none; }
  body.inlesson #newTopic { display: inline-flex; }
  body.inlesson.askopen #newTopic { background: #374151; }
  body.inlesson { height: 100dvh; min-height: 0; }
  body.inlesson #board { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  body.inlesson #fig { min-height: 0; }
  body:not(.vert) #board:has(#notes .quiz) #notes { max-height: 46dvh; }
  body.inlesson:not(.vert) #board:has(#notes .quiz) { grid-template-rows: auto minmax(120px, 1fr) auto; min-height: 0; }
  body.inlesson:not(.vert) #board:has(#notes .quiz) #fig { min-height: 120px; }

  /* vertical (9:16) mode on a phone: the screen already is 9:16, so the board simply fills it */
  body.vert #board { width: auto; height: auto; aspect-ratio: auto; max-width: none; margin: 8px; min-height: 0; padding: 10px 12px; }
  body.vert.inlesson #board { flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  body.vert #boardTitle { font-size: 28px; }
  body.vert .note { font-size: 22px; }
  body.vert #board > #caption { grid-area: auto; font-size: 17px; min-height: 52px; padding: 8px 10px; }
  body.vert .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "status ctrl"; }
  body.vert .bar .ctrl { flex-wrap: nowrap; justify-content: flex-start; }
  body.vert:not(.inlesson) #board > #caption { display: none; }
  body.vert #board { flex: 1 1 auto; }

  /* before a lesson there is nothing to pause or replay: no footer; screen recording does not exist on phones */
  body:not(.inlesson) .bar { display: none; }
  #record { display: none; }
  /* the button row scrolls sideways: fade its right edge so it reads as "more this way" */
  .ctrl { padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}

/* ================================================================ video mode (?video=<lesson>): capture_video.py records this
   page frame by frame. Only the board is on screen, filling the frame; the karaoke caption sits inside the board. */
body.videomode { background: var(--board); overflow: hidden; }
body.videomode .top, body.videomode .chips, body.videomode #qa, body.videomode .bar, body.videomode #photoChip,
body.videomode #empty, body.videomode #shortsFeed { display: none !important; }
body.videomode #board {
  position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; min-height: 0; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; padding: 18px 28px 16px;
  grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 22px;
}
body.videomode #fig { min-height: 0; height: 100%; }
body.videomode #board > #caption {
  grid-column: 1 / -1; align-self: end; justify-self: center; width: min(100%, 1100px);
  background: #fff; border: 1px solid #e2e0d6; border-radius: 14px; padding: 10px 18px; box-shadow: 0 4px 14px rgba(17,24,39,.06);
  font-size: 23px; line-height: 1.35; text-align: center; color: #9aa1ad; min-height: 0;
}
body.videomode #board > #caption:empty { visibility: hidden; }
body.videomode.vert #board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 22px 18px 18px; gap: 8px 0; }
body.videomode.vert #board > #caption { font-size: 22px; width: 100%; }

/* ---------------------------------------------------------------- Video Lab switches (?video=..&cfg=...) */
/* camera: the zoomed figure stays inside its area */
body.videomode #figArea { overflow: hidden; }
/* textures */
body.videomode.cfg-texture-plain #board { background-image: none; }
body.videomode.cfg-texture-grid #board { background-color: #fdfdfb; background-image: linear-gradient(#e3eaf3 1px, transparent 1px), linear-gradient(90deg, #e3eaf3 1px, transparent 1px); background-size: 28px 28px; }
/* notebook v2 (judge: the margin line ran through content): margin at the very edge, fainter rules */
body.videomode.cfg-texture-lined #board { background-color: #fffef8; background-image: linear-gradient(90deg, transparent 6px, #f4c7c7 6px, #f4c7c7 8px, transparent 8px), linear-gradient(#e9eff7 1px, transparent 1px); background-size: 100% 100%, 100% 34px; }
/* paper: warm cream page, brown ink (storybook-lite) */
body.videomode.cfg-texture-paper { --board: #fbf3e2; --ink: #3b2f2f; }
body.videomode.cfg-texture-paper #board { background-color: #fbf3e2; background-image: radial-gradient(rgba(120, 90, 50, .05) 1px, transparent 1.4px); background-size: 7px 7px; }
body.videomode.cfg-texture-paper #boardTitle { color: #3b2f2f; }
body.videomode.cfg-texture-chalk #board { background-color: #22362b; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.6px); background-size: 6px 6px; }
/* chalkboard: dark green board, white chalk (the JS palette swaps the ink colours), equations lightened */
body.videomode.cfg-texture-chalk { --board: #22362b; --ink: #f4f4ee; }
body.videomode.cfg-texture-chalk #boardTitle { color: #f4f4ee; }
/* the caption box and the quiz card stay light cards with dark text (v1 made them white on white) */
body.videomode.cfg-texture-chalk:not(.cfg-caption-big) #board > #caption, body.videomode.cfg-texture-chalk .quiz { --ink: #1f2937; --board: #ffffff; color: #1f2937; }
body.videomode.cfg-texture-chalk:not(.cfg-caption-big) #board > #caption .w { color: #6b7280; }
body.videomode.cfg-texture-chalk:not(.cfg-caption-big) #board > #caption .w.on { color: #1f2937; }
body.videomode.cfg-texture-chalk .note.eq.prev { opacity: .7; }
/* handwriting fonts (Kalam also covers Devanagari) */
body.videomode.cfg-font-kalam { --hand: "Kalam", "Caveat", cursive; }
body.videomode.cfg-font-patrick { --hand: "Patrick Hand", "Caveat", cursive; }
body.videomode.cfg-font-kalam .note, body.videomode.cfg-font-patrick .note { font-size: 26px; }
/* captions: big Shorts-style chunks of 2-3 words, current word yellow, white with a dark outline, over the board */
body.videomode.cfg-caption-none #board > #caption { display: none; }
body.videomode.cfg-caption-big #board > #caption {
  position: absolute; left: 4%; right: 4%; bottom: 7%; width: auto; z-index: 6; pointer-events: none;
  background: none; border: 0; box-shadow: none; padding: 0; text-align: center;
  font: 800 46px/1.12 Inter, system-ui, sans-serif; color: #fff;
  text-shadow: 0 0 3px #000, 3px 3px 0 #111, -3px -3px 0 #111, 3px -3px 0 #111, -3px 3px 0 #111, 0 3px 0 #111, 3px 0 0 #111, 0 -3px 0 #111, -3px 0 0 #111;
}
body.videomode.cfg-caption-big #caption .w { display: none; color: #fff; }
body.videomode.cfg-caption-big #caption .w.chunk { display: inline; }
body.videomode.cfg-caption-big #caption .w.chunk.now { color: #facc15; }
body.videomode.cfg-caption-big #board { padding-bottom: 92px; }
body.videomode.cfg-caption-big #board > #caption { bottom: 18px; }
body.videomode.vert.cfg-caption-big #board { padding-bottom: 300px; }
body.videomode.vert.cfg-caption-big #board > #caption { bottom: 200px; font-size: 40px; }

/* one-tap download of the lesson video */
.ctrl .dlbtn { font: 600 13px var(--ui); padding: 8px 12px; border-radius: 9px; background: var(--brand); color: #fff; text-decoration: none; white-space: nowrap; order: 0; }
.ctrl .dlbtn[hidden] { display: none; }
@media (max-width: 640px) { .ctrl .dlbtn { flex: none; height: 36px; display: inline-flex; align-items: center; } }

/* video being made: the pill fills up with real progress; the export sheet shows the steps */
.ctrl .progpill { position: relative; overflow: hidden; font: 600 13px var(--ui); padding: 8px 12px; border-radius: 9px; border: 1px solid #bfd3fb; background: #eef4ff; color: #1d4ed8; white-space: nowrap; order: 0; cursor: pointer; min-width: 190px; text-align: left; }
.ctrl .progpill[hidden] { display: none; }
.progpill .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #c7dafc; transition: width 1.2s linear; }
.progpill .lbl { position: relative; }
.zoom .expcard .bigbar { height: 12px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 4px 0 12px; }
.zoom .expcard .bigfill { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width 1.2s linear; }
.zoom .expcard .expsteps { margin: 0 0 14px; padding-left: 20px; font: 500 14px/1.8 var(--ui); color: #9ca3af; }
.zoom .expcard .expsteps li.now { color: #1d4ed8; font-weight: 600; }
.zoom .expcard .expsteps li.done { color: #15803d; }
.zoom .expcard .expsteps li.done::marker { content: "✓  "; }
.zoom .expcard .autodl { display: flex; gap: 8px; align-items: center; font: 500 13px var(--ui); color: #4b5563; margin-top: 12px; }
@media (max-width: 640px) { .ctrl .progpill { flex: none; height: 36px; min-width: 170px; } }

/* readability switches */
body.videomode.cfg-capsize-big #board > #caption { font-size: 31px; line-height: 1.3; padding: 12px 22px; }
body.videomode.vert.cfg-capsize-big #board > #caption { font-size: 28px; }
body.videomode:not(.vert).cfg-fill-max #board { padding: 12px 18px 12px; gap: 4px 18px; }  /* notes column keeps its width (v1 clipped notes) */
body.videomode:not(.vert).cfg-fill-max #boardTitle { font-size: 34px; min-height: 38px; }
/* 9:16: the figure takes the space, notes stay a compact strip */
body.videomode.vert.cfg-fill-max #board { padding: 16px 12px 14px; gap: 6px 0; }
body.videomode.vert.cfg-fill-max #notes { max-height: 17vh; }
body.videomode.cfg-labels-big .note:not(.eq) { font-size: 32px; }
body.videomode.vert.cfg-labels-big .note:not(.eq) { font-size: 27px; }

/* video templates: hook card and end card */
#hookCard, #endCard { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--board); overflow: hidden; }
#hookCard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hookCard.pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,39,.10) 0%, rgba(17,24,39,.62) 100%); }
#hookCard .hooktxt { position: relative; z-index: 1; font: 700 64px/1.08 var(--hand); color: var(--ink); max-width: 86%; padding: 0 24px; text-wrap: balance; }
#hookCard.pic .hooktxt { color: #fff; text-shadow: 0 3px 22px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.7); }
body.vert #hookCard .hooktxt { font-size: 50px; }
#endCard .endtitle { font: 700 56px/1.08 var(--hand); color: var(--ink); max-width: 86%; text-wrap: balance; }
#endCard .endsub { margin-top: 28px; font: 600 26px var(--ui); color: #4b5563; }
#endCard .endurl { margin-top: 10px; font: 800 36px var(--ui); color: var(--brand); }
body.vert #endCard .endtitle { font-size: 44px; }
body.vert #endCard .endurl { font-size: 28px; }
/* big captions keep their own band even with fill=max (r4: the fill rule's padding overrode the band, so captions
   covered labels, quiz options and credits) */
body.videomode:not(.vert).cfg-caption-big #board { padding-bottom: 96px; }
body.videomode.vert.cfg-caption-big #board { padding-bottom: 300px; }

/* chalk v3: image credits readable on the dark board */
body.videomode.cfg-texture-chalk #fig .credit { fill: #cbd5e1; }

/* brand kit (v2, off unless set): corner badge (watermark=on), big end-card logo, brand colour on the end card and the
   caption's active word. Text stays text. */
#wmark { position: absolute; top: 1.6vh; right: 1.4vw; z-index: 9; height: 7vh; box-sizing: border-box; padding: .8vh 1vh;
  display: flex; align-items: center; background: rgba(255,255,255,.88); border-radius: 1.2vh; box-shadow: 0 2px 10px rgba(17,24,39,.12);
  pointer-events: none; opacity: .92; }
#wmark img { height: 100%; width: auto; max-width: 22vw; object-fit: contain; display: block; }
#wmark.txt { height: auto; padding: .7vh 1.2vh; font: 700 2.4vh var(--ui); color: #374151; letter-spacing: .01em; }
#endCard .endlogo { margin-bottom: 3.5vh; padding: 1.8vh 2.4vh; background: #fff; border-radius: 2vh; box-shadow: 0 6px 24px rgba(17,24,39,.12); }
#endCard .endlogo img { display: block; height: 22vh; width: auto; max-width: 60vw; object-fit: contain; }
body.vert #endCard .endlogo img { height: 14vh; max-width: 70vw; }
#endCard .endsub.brandname { font-weight: 800; font-size: 30px; color: var(--ink); }
body.brandc #endCard .endurl, body.brandc #endCard .endsub.brandname { color: var(--brandc); }
body.videomode.brandc #board > #caption .w.now { color: var(--brandc); }
body.videomode.brandc.cfg-caption-big #caption .w.chunk.now { color: var(--brandc); }

/* video editor */
.ctrl .editbtn { font: 600 13px var(--ui); padding: 8px 12px; border-radius: 9px; border: 1px solid #bfd3fb; background: #eef4ff; color: #1d4ed8; white-space: nowrap; order: 0; cursor: pointer; }
.ctrl .editbtn[hidden] { display: none; }
.zoom .edcard { max-width: 520px; max-height: 92vh; overflow-y: auto; }
.edcard .edlbl { font: 600 12px var(--ui); text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 14px 0 6px; }
.edcard .edchips, .edcard .seg { display: flex; flex-wrap: wrap; gap: 6px; }
.edcard .edchips button, .edcard .seg button { font: 600 13px var(--ui); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.edcard .edchips button.on, .edcard .seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.edcard .edtext { display: block; width: 100%; margin-top: 8px; font: 500 15px var(--ui); padding: 9px 11px; border-radius: 9px; border: 1px solid #d1d5db; }
.edcard .edtext[hidden] { display: none; }
.edcard .edbtns { margin-top: 18px; }
.edcard .bigbar { margin-top: 14px; }
.edcard .bigbar[hidden] { display: none; }
.zoom .prev16x9 { width: min(94vw, 1280px); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #fff; }
.zoom .prev9x16 { height: min(88vh, 960px); aspect-ratio: 9 / 16; border: 0; border-radius: 10px; background: #fff; }
@media (max-width: 640px) { .ctrl .editbtn { flex: none; height: 36px; } }

/* editor v2 */
.edcard .edsec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.edcard .edsec > summary { cursor: pointer; font: 700 14px var(--ui); color: #111827; padding: 8px 0; }
.edcard .edrow[hidden] { display: none; }
.edcard .edbadge { font: 700 10px var(--ui); text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.edcard .edbadge.lab { background: #dcfce7; color: #15803d; }
.edcard .edbadge.new { background: #fef3c7; color: #a16207; }
.edcard .edhint { font: 500 12px var(--ui); color: #6b7280; margin: 4px 0 8px; display: inline-block; }
.edcard .edsel { font: 500 14px var(--ui); padding: 8px 10px; border-radius: 9px; border: 1px solid #d1d5db; width: 100%; }
.edcard .edscene { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.edcard .edscene label { white-space: nowrap; font: 500 13px var(--ui); }
.edcard .edscene .edtext { margin-top: 0; font-size: 13px; padding: 6px 8px; }
.edcard .edbtns { flex-wrap: wrap; }
/* ---------------------------------------------------------------- v2 templates (all off unless the switch is set) */
/* vlayout=stack (9:16 only): vertical-first Short. Title below the top 6% safe zone, notes a compact 2-line strip,
   the figure gets the rest; the caption keeps its band above the bottom 20% (YouTube / Reels UI) */
body.videomode.vert.cfg-vlayout-stack #board { padding-top: 6.2vh; }
body.videomode.vert.cfg-vlayout-stack #boardTitle { font-size: 30px; min-height: 34px; line-height: 1.1; }
body.videomode.vert.cfg-vlayout-stack #notes { max-height: 13vh; gap: 2px; }
body.videomode.vert.cfg-vlayout-stack .note:not(.eq) { font-size: 27px; line-height: 1.12; }
body.videomode.vert.cfg-vlayout-stack .note.eq.lg { font-size: 1.6rem; }
/* keyterms=card: big centred key-term card, the board dimmed behind it; under the caption band (z 6) */
#keyCard { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding-bottom: 5%;
  background: rgba(250, 250, 247, .6); pointer-events: none; }
body.videomode.cfg-texture-chalk #keyCard { background: rgba(20, 32, 25, .55); }
#keyCard .kcbox { background: #fff; border: 3px solid #c7d2fe; border-radius: 24px; box-shadow: 0 18px 50px rgba(17, 24, 39, .2);
  padding: 22px 52px 28px; max-width: 78%; text-align: center; }
#keyCard .kclabel { font: 700 17px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #4f46e5; }
#keyCard .kcterm { font: 700 86px/1.05 var(--hand); color: #111827; margin-top: 4px; text-wrap: balance; }
#keyCard .kcterm.kceq { font: 500 46px var(--ui); margin: 6px 0 0; }
#keyCard .kcterm.kceq .katex-display { margin: .2em 0; }
#keyCard .kcdef { font: 600 38px/1.18 var(--hand); color: #374151; margin-top: 8px; text-wrap: balance; }
body.vert #keyCard { padding-bottom: 30%; }
body.vert #keyCard .kcbox { max-width: 88%; padding: 18px 26px 22px; }
body.vert #keyCard .kcterm { font-size: 74px; }
body.vert #keyCard .kcterm.kceq { font-size: 32px; }
body.vert #keyCard .kcdef { font-size: 33px; }
/* recap=card: "Quick recap" + 3 ticked points before the end card */
#recapCard { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--board); padding-bottom: 3%; }
#recapCard .rctitle { font: 700 66px/1.05 var(--hand); color: var(--ink); }
#recapCard ul { list-style: none; margin: 30px 0 0; padding: 0; max-width: 82%; }
#recapCard li { display: flex; align-items: center; gap: 20px; margin: 16px 0; font: 600 42px/1.15 var(--hand); color: var(--ink); }
#recapCard .rctick { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #16a34a; color: #fff; font: 800 28px/1 var(--ui);
  display: flex; align-items: center; justify-content: center; }
body.vert #recapCard { padding: 0 28px 24%; }
body.vert #recapCard .rctitle { font-size: 58px; }
body.vert #recapCard ul { max-width: 100%; }
body.vert #recapCard li { font-size: 35px; gap: 14px; margin: 16px 0; }
body.vert #recapCard .rctick { width: 40px; height: 40px; font-size: 22px; }

/* motion kit (video switch motion=kit) */
.mtoken { filter: drop-shadow(0 0 6px rgba(249,115,22,.9)); pointer-events: none; }
.confetti { position: fixed; width: 0; height: 0; z-index: 60; pointer-events: none; }
.confetti i { position: absolute; left: -4px; top: -7px; width: 9px; height: 14px; border-radius: 2px; }
.note .countup { font-variant-numeric: tabular-nums; }

/* Video style button: a dot when the viewer has changed something from the best settings */
#styleTab.custom { position: relative; }
#styleTab.custom::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
@media (max-width: 420px) {  /* five icon buttons + the brand on a small phone */
  #shortsTab, #libraryTab, #iconsTab, #styleTab, #newTopic { min-width: 36px; padding: 0 7px; }
}
@media (max-width: 380px) {  /* 360 px phones: the full name fits next to five buttons */
  .brand { font-size: 14px; gap: 6px; letter-spacing: -0.2px; }
  .brand .dot { width: 8px; height: 8px; }
}
@media (max-width: 370px) { .brand .dot { display: none; } }

/* sketch video entry: a header button on wide screens, the first topic chip on phones (the phone header is full) */
#sketchTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; text-decoration: none; white-space: nowrap; }
.chips .sketchchip { display: none; }
@media (max-width: 1399px) { #sketchTab { display: none; } }
@media (max-width: 700px) {
  .chips .sketchchip { display: inline-block; }
}
.edcard .sketchlink { display: block; margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font: 500 13px var(--ui); text-decoration: none; }

/* animated video entry: a topic chip on phones (like the sketch chip), a header button on wide screens (a chip there
   wrapped the topic row and pushed the board down 40 px) */
@media (max-width: 700px) { .chips #animateChip { display: inline-flex; } }
#animateTab, #storyTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; text-decoration: none; white-space: nowrap; }
#animateTab:hover, #storyTab:hover { border-color: var(--brand); }
@media (max-width: 1599px) { #animateTab, #storyTab { display: none; } }

/* Laptop widths (861-1919 px): the header row holds the brand, the nav buttons and the lesson form. The topic box used to
   be squeezed to ~30 px and "Teach me" ran off the edge, because #ask could shrink to 280 px while its own controls need
   ~600 px. Here the nav buttons show their icons only (their full names stay as tooltips), and the form is never narrower
   than 800 px: when the row has no room for that (861-1279 px), the form wraps onto its own row instead of crushing the
   topic box. Measured: the topic box is 211-663 px wide from 1280 to 1919 px on one row; 1920 px and up are unchanged. */
@media (min-width: 861px) and (max-width: 1919px) { .top .lbl { display: none; } }
@media (min-width: 861px) { #ask { min-width: min(100%, 800px); } #ask button#go { white-space: nowrap; } }

/* visual steps: the "Animations" switch (on the page only when the server has the feature on, TUTOR_VISUAL_STEPS=1) */
#vizTab { font: 600 14px var(--ui); padding: 9px 14px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; white-space: nowrap; }
#vizTab:hover { border-color: var(--brand); }
#vizTab[aria-pressed="false"] { color: #9ca3af; filter: grayscale(1); text-decoration: line-through; }
@media (max-width: 640px) { #vizTab { font-size: 16px; height: 38px; min-width: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; } }
@media (max-width: 420px) { #vizTab { min-width: 36px; padding: 0 7px; } }
/* "Ask me questions" shown: one more nav button. Keep the header on one row where main's header fix does: a little less
   space between and around the header items on laptops (1280 px keeps a ~207 px topic box on one row), and icon-only buttons up to 2199 px (at 1920 px the seven named buttons plus
   the form no longer fit on one row). */
@media (min-width: 861px) and (max-width: 1919px) { body.askable .top { gap: 8px; padding-left: 12px; padding-right: 12px; } body.askable #ask { min-width: min(100%, 740px); } }
@media (min-width: 1920px) and (max-width: 2199px) { body.askable .top .lbl { display: none; } }
/* Both optional buttons shown ("Ask me questions" + "Animations"): at 861-1365 px a slightly smaller brand (no dot) and
   narrower select padding keep the topic box ~200 px on one row at 1280 px (152 px without this). */
@media (min-width: 861px) and (max-width: 1365px) {
  body:has(#vizTab:not([hidden])) .brand { font-size: 16px; }
  body:has(#vizTab:not([hidden])) .brand .dot { display: none; }
  body:has(#vizTab:not([hidden])) #ask select { padding: 0 6px; }
}

/* ================================================================ Phase 1 fixes (2026-10-24) */
/* the language button and its search field have their own look (the form's blue-button / dark-input rules used to win) */
#ask #langBtn { font: 500 14px var(--ui); padding: 0 12px; border-radius: 10px; border: 1px solid #374151; background: #1f2937; color: #fff; cursor: pointer; }
#ask #langBtn:hover { border-color: var(--brand); }
#ask #langSearch { flex: none; display: block; width: 100%; height: auto; font: 500 15px var(--ui); padding: 9px 11px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; color: var(--ink); margin-bottom: 6px; }
#ask #langSearch:focus { outline: 2px solid var(--brand); border-color: transparent; }
@media (max-width: 640px) { #ask #langBtn { padding: 0 8px; } #ask #langSearch { font-size: 16px; } }

/* words not yet spoken: readable grey (4.8:1 on white; was 3.1:1). The video recorder keeps its own caption colours. */
#caption { color: #6b7280; }
body.vert:not(.videomode) #board > #caption { color: #6b7280; }

/* the caption's "Try again" after a lesson that stopped early */
#caption .capbtn { margin-left: 8px; font: 600 13px var(--ui); padding: 5px 12px; border-radius: 8px; border: 1px solid var(--brand); background: #fff; color: var(--brand); cursor: pointer; vertical-align: 1px; }

/* phones: ✎ New topic only during a lesson (on the home screen it did nothing and cut the brand name) */
@media (max-width: 640px) { body:not(.inlesson) #newTopic { display: none; } }

/* footer at 641-1365 px: the phone layout (caption on its own row, then status + one row of buttons). The old three-column
   footer put the caption in a ~130 px column and wrapped the buttons, so at 1024x768 the caption, Pause and Replay were
   below the fold. In a lesson the page is exactly one screen tall and the board takes what is left. 1366 px and up, and
   phones, are unchanged.
   Short laptop screens (1366 px and wider, up to 820 px tall, e.g. 1366x768): the same layout. The three-column footer
   wrapped the caption to three lines there and pushed it and Pause / Replay below the screen. 1440x900, 1920x1080 are
   unchanged. */
@media (min-width: 641px) and (max-width: 1365px), (min-width: 1366px) and (max-height: 820px) {  /* (body.live: the live page only, never the video recorder or the notes exporter) */
  body.live .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cap cap" "status ctrl"; gap: 6px 14px; padding: 8px 18px 10px; }
  body.live .bar #caption { grid-area: cap; font-size: 18px; line-height: 1.4; }
  body.live #status { grid-area: status; }
  body.live .ctrl { grid-area: ctrl; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; scrollbar-width: none; padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  body.live .ctrl::-webkit-scrollbar { display: none; }
  body.live .ctrl > * { flex: none; }
  body.live #metric { display: none; }
  body.live.vert .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "status ctrl"; }
  body.live.vert .bar .ctrl { justify-content: flex-start; flex-wrap: nowrap; }

  body.inlesson:not(.videomode) { height: 100vh; height: 100dvh; min-height: 0; }
  body.inlesson:not(.videomode) .chips { display: none; }
  body.inlesson:not(.videomode) #board { flex: 1 1 auto; min-height: 0; }
  body.inlesson:not(.vert):not(.videomode) #board { grid-template-rows: auto minmax(0, 1fr); }
  body.inlesson:not(.videomode) #fig { min-height: 0; }
  body.inlesson.vert:not(.videomode) #board { flex: 1 1 0; height: auto; min-height: 0; }
}
@media (min-width: 641px) and (max-width: 860px) {
  body.inlesson:not(.vert):not(.videomode) #board { grid-template-rows: auto minmax(0, 1fr) auto; }
  body.inlesson:not(.vert):not(.videomode) #notes { max-height: 30dvh; }
  body.inlesson:not(.vert):not(.videomode) #board:has(#notes .quiz) { grid-template-rows: auto minmax(120px, 1fr) auto; min-height: 0; }
  body.inlesson:not(.vert):not(.videomode) #board:has(#notes .quiz) #fig { min-height: 120px; }
  body.inlesson:not(.vert):not(.videomode) #board:has(#notes .quiz) #notes { max-height: 46dvh; }
}
/* phones and up to 1365 px (and short laptop screens): Pause and Replay come first in the button row (the video buttons
   used to push them off-screen) */
@media (max-width: 1365px), (max-height: 820px) { body.live .ctrl #pause, body.live .ctrl #replay { order: -1; } }

/* [noaccess] visitors who may not make new lessons: one quiet line under the examples (never during a lesson), with Sign in */
#visitorLine { padding: 8px 18px 0; font: 500 13px var(--ui); color: #4b5563; }
#visitorLine[hidden], body.inlesson #visitorLine { display: none; }
#visitorLine a, #visitorLine button { font: 600 13px var(--ui); color: #1d4ed8; background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { #visitorLine { padding: 6px 10px 0; } }

/* [noaccess] the sign-in card: on the empty board after a refused lesson, or as a sheet (Make video, a question...) */
.accwrap { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 16px; }
.acccard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 12px 36px rgba(17,24,39,.14); font-family: var(--ui); cursor: default; }
.zoom .acccard { width: calc(100vw - 40px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.acccard .acch { font: 700 19px/1.3 var(--ui); color: #111827; }
.acccard .accsub { font: 400 14px/1.5 var(--ui); color: #4b5563; margin: 6px 0 16px; }
.acccard .accrow { display: flex; flex-wrap: wrap; gap: 10px; }
.acccard .accbtn { flex: 1 1 auto; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; color: #1f2937; font: 600 14px var(--ui); text-decoration: none; cursor: pointer; }
.acccard .accbtn.pri { background: var(--brand); border-color: var(--brand); color: #fff; }

/* an example that plays its saved Simple English lesson for a visitor */
.chips button.fallback::after { content: " · Simple English"; color: #6b7280; font-weight: 500; }

/* short messages at the bottom of the screen */
#notice { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; width: max-content; max-width: min(560px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #111827; color: #fff; border-radius: 12px; padding: 10px 10px 10px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); font: 500 14px/1.45 var(--ui); }
#notice[hidden] { display: none; }
#notice .ntext { flex: 1 1 220px; }
#notice button { font: 600 13px var(--ui); padding: 8px 12px; border-radius: 8px; border: 0; background: var(--brand); color: #fff; cursor: pointer; }
#notice button.nx { background: transparent; color: #cbd5e1; padding: 6px 8px; }
body.videomode #notice { display: none !important; }
@media (min-width: 641px) and (max-width: 860px) { body.inlesson.vert:not(.videomode) #board { aspect-ratio: auto; } }