/* Dango Academy: one column app. Header with tabs, then the current view (word grid, clip player, quiz, progress). */
:root {
  --page: #eef4f3;
  --card: #ffffff;
  --ink: #15302e;
  --muted: #557370;
  --line: #d3e2df;
  --chip: #d5e5e2;
  --brand: #0f5c57;
  --brand-ink: #f4fbf9;
  --sun: #ffc94a;
  --sun-ink: #2a2100;
  --good: #2f9a62;
  --good-bg: #dff3e7;
  --bad: #c2453f;
  --bad-bg: #fbe3e1;
  --display: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page:#0c1716; --card:#132321; --ink:#e3efed; --muted:#9fb7b3; --line:#22403c; --chip:#1e3331; --brand:#5fc2b6; --brand-ink:#08201e; --good:#6fd39b; --good-bg:#14352a; --bad:#f08a84; --bad-bg:#3a1c1a; color-scheme: dark; }
}
:root[data-theme="dark"] { --page:#0c1716; --card:#132321; --ink:#e3efed; --muted:#9fb7b3; --line:#22403c; --chip:#1e3331; --brand:#5fc2b6; --brand-ink:#08201e; --good:#6fd39b; --good-bg:#14352a; --bad:#f08a84; --bad-bg:#3a1c1a; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font-family: var(--body); font-variant-ligatures: no-common-ligatures; line-height: 1.45; }
.wrap { max-width: 960px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 48px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
button { font: inherit; }
[hidden] { display: none !important; }
a { color: var(--brand); }
.tabs a, .btn, .brand, .back { color: var(--ink); }
.btn.primary { color: var(--brand-ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pointer button:focus-visible, .pointer a:focus-visible { outline: none; } /* see "the focus ring" in app.js */

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 6px 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 900; font-size: 1.35rem; text-decoration: none; color: var(--ink); }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 44px; transform: rotate(-18deg); }
.brand-mark .dango { display: block; }
.tabs { display: flex; gap: 4px; background: var(--chip); padding: 4px; border-radius: 12px; }
.tabs a { text-decoration: none; color: var(--ink); font-weight: 700; padding: 8px 14px; border-radius: 9px; font-size: .95rem; }
.tabs a[aria-current="page"] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mode { font-size: .8rem; color: var(--muted); }

/* summary strip */
.summary { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-block: 4px 18px; }
.stat { background: var(--card); border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); min-width: 0; }
.stat .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.stat .v { font-family: var(--display); font-weight: 900; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.meter { height: 10px; background: var(--chip); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .4s; }
@media (max-width: 620px) { .summary { grid-template-columns: 1fr 1fr; } .summary .stat:first-child { grid-column: 1 / -1; } }

/* word grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wcard p.def { flex: 1; }
.wcard.known { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.wcard h3 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.wcard .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.tone { font-weight: 700; border-radius: 99px; padding: 1px 8px; font-size: .75rem; }
.tone.p { background: var(--good-bg); color: var(--good); }
.tone.n { background: var(--bad-bg); color: var(--bad); }
.wcard p.def { margin: 0; font-size: .95rem; }
.wcard .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.views { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--chip); color: var(--ink); font-size: .95rem; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.sun { background: var(--sun); color: var(--sun-ink); }

/* word page */
.back { display: inline-flex; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 700; margin-bottom: 10px; }
.player { display: grid; gap: 12px; }
.details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 14px; }
.details .stat p { margin: 6px 0 0; }
@media (max-width: 680px) { .details { grid-template-columns: 1fr; } }

/* quiz */
.qcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 14px; max-width: 720px; margin-inline: auto; }
/* Today's own screens (the hub and each section's end screen) use the full page width, like Words and Progress. */
.qcard.today { max-width: none; }
.qtop { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.qprompt { font-size: 1.1rem; margin: 0; }
.qdir { display: grid; gap: 2px; font-size: .9rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; }
.qdir b { color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.qword { font-family: var(--display); font-weight: 900; font-size: 2.4rem; margin: 0; letter-spacing: .01em; }
.qsent { font-size: 1.3rem; margin: 0; line-height: 1.5; }
.qsent .blank { letter-spacing: .05em; white-space: nowrap; }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .qopts { grid-template-columns: 1fr; } }
.qopt { text-align: left; border: 2px solid var(--line); background: var(--page); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 1.05rem; cursor: pointer; }
.qopt b { margin-right: 8px; color: var(--muted); }
.qopt:hover:not(:disabled) { border-color: var(--brand); }
.qopt.right { background: var(--good-bg); border-color: var(--good); }
.qopt.wrong { background: var(--bad-bg); border-color: var(--bad); }
.qopt:disabled { cursor: default; }
.feedback { border-radius: 12px; padding: 12px 14px; }
.feedback.ok { background: var(--good-bg); }
.feedback.no { background: var(--bad-bg); }
.feedback p { margin: 4px 0 0; }
.qbar { height: 8px; background: var(--chip); border-radius: 99px; overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--brand); transition: width .3s; }

/* progress */
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
td.num { font-variant-numeric: tabular-nums; }
/* On phones the word table drops "Last activity" (Recent activity below covers it) so the rest fits without scrolling. */
@media (max-width: 600px) { th, td { padding: 9px 6px; } th:first-child, td:first-child { padding-left: 10px; } th { letter-spacing: .04em; } table { font-size: .88rem; } th.last, td.last { display: none; } }
.pill2 { border-radius: 99px; padding: 2px 9px; font-size: .78rem; font-weight: 700; }
.pill2.yes { background: var(--good-bg); color: var(--good); }
.pill2.no { background: var(--chip); color: var(--muted); }
.pill2.warn { background: var(--bad-bg); color: var(--bad); }
.section-h { font-size: 1.15rem; margin: 22px 0 10px; }
.empty { color: var(--muted); }
.gate { max-width: 420px; margin: 40px auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 12px; }
.gate input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--page); color: var(--ink); }
.err { color: var(--bad); font-size: .9rem; margin: 0; }
.note { color: var(--muted); font-size: .88rem; }

/* ---------- clip player ---------- */
.screen { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #0f5c57; container-type: inline-size; }
.screen.paused *, .screen.paused *::before { animation-play-state: paused !important; }
.screen:not(.started) .walk, .screen:not(.started) .walkIn, .screen:not(.started) .runIn { animation: none !important; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.scene.on { opacity: 1; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene svg text { font-family: var(--body); }
.scene svg .disp { font-family: var(--display); }
.ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; padding: 6cqw 7cqw; color: #f4fbf9; }
.ov.right { padding-left: 44cqw; padding-right: 4cqw; }
.ov .big { font-family: var(--display); font-weight: 900; font-size: 10cqw; line-height: 1; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.ov .big.fit { font-size: 8.4cqw; }
.ov .h { font-family: var(--display); font-weight: 900; font-size: 4.4cqw; line-height: 1.1; margin: 0; }
.ov .t { font-size: 3cqw; line-height: 1.35; margin: 0; }
.ov .s { font-size: 2.2cqw; margin: 0; opacity: .85; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.ov .pron { font-size: 3.6cqw; margin: 0; }
.ov .pron b { color: #ffc94a; }
.ov .pill { align-self: flex-start; display: inline-flex; gap: 1cqw; align-items: center; background: rgba(255,255,255,.15); border-radius: 99px; padding: .7cqw 2cqw; font-size: 2.1cqw; font-weight: 700; }
.ov .pos { background: #8fe3b4; color: #0b2a1a; border-radius: 99px; padding: 0 1.2cqw; }
.ov .neg { background: #f4a7a2; color: #3a0d0a; border-radius: 99px; padding: 0 1.2cqw; }
.ov .hl { white-space: nowrap; background: #ffc94a; color: #2a2100; border-radius: .8cqw; padding: 0 .8cqw; }
.chips { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.chips span { font-size: 2.8cqw; font-weight: 700; padding: 1cqw 2.2cqw; border-radius: 99px; }
.chips.yes span { background: #8fe3b4; color: #0b2a1a; }
.chips.no span { border: .3cqw solid rgba(255,255,255,.5); text-decoration: line-through; text-decoration-thickness: .25cqw; color: #f4fbf9; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.opt { font-size: 3.2cqw; padding: 1.4cqw 2.4cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.13); color: #f4fbf9; }
.opt b { margin-right: 1.2cqw; }
.answer .opt { opacity: .35; }
.answer .opt.right { opacity: 1; background: #ffc94a; color: #2a2100; }
.think { position: absolute; left: 0; right: 0; bottom: 0; height: .7cqw; background: rgba(255,255,255,.08); opacity: 0; transition: opacity .3s; }
.think i { position: absolute; inset: 0; background: rgba(255,201,74,.75); transform-origin: left; }
.hold .scene.on .think { opacity: 1; }
.hold .scene.on .think i { animation: count 5s linear forwards; }
@keyframes count { to { transform: scaleX(0); } }
.think-label { position: absolute; right: 3cqw; bottom: 1.8cqw; margin: 0; font-size: 1.9cqw; color: rgba(244,251,249,.6); opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.hold .scene.on .think-label { opacity: 1; }
.start { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,40,38,.45); border: 0; cursor: pointer; padding: 0; z-index: 5; }
.start span { display: inline-flex; align-items: center; gap: 12px; background: #ffc94a; color: #2a2100; font: 800 clamp(1rem, 3cqw, 1.6rem) var(--display); padding: 14px 26px; border-radius: 99px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.cap { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; font-size: 1.1rem; line-height: 1.45; min-height: 3.2em; }
.cap mark { background: var(--sun); color: var(--sun-ink); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
button.b { font: 700 .95rem var(--body); border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; background: var(--chip); color: var(--ink); }
button.b.primary { background: var(--brand); color: var(--brand-ink); }
.bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; flex: 1 1 300px; min-width: 0; }
.seg { height: 26px; background: var(--chip); border: 0; border-radius: 6px; position: relative; overflow: hidden; padding: 0; cursor: pointer; container-type: inline-size; }
/* The label is drawn twice: dark on the empty track, and a white copy inside the fill that is clipped as the fill grows. */
.seg i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); overflow: hidden; font-style: normal; }
.seg span { position: absolute; inset: 0 auto 0 0; width: 100cqw; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.seg i span { color: var(--brand-ink); }
@media (max-width: 600px) { .seg span { display: none; } .seg { height: 12px; } .cap { font-size: 1rem; } }

/* timed entrances */
.pop, .fade { opacity: 0; }
.scene.on .pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: var(--d, 0s); }
.scene.on .fade { animation: fade .5s ease forwards; animation-delay: var(--d, 0s); }
.scene.on .out { animation: fadeout .4s ease forwards; animation-delay: var(--d, 0s); }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes fadeout { to { opacity: 0; } }
.pop, .fade, .out, .walk, .walkIn, .runIn, .walkOut, .bob, .bounce, .jump, .stomp, .laugh, .shiver, .float, .slideR, .fall, .snowfall, .fall2, .drip, .rise, .ballMiss, .ballSwish { transform-box: fill-box; transform-origin: 50% 100%; }
.scene.on .walk { animation: walk 3s ease-out forwards; }
.scene.on .walkIn { animation: walkIn 1.4s ease-out forwards; }
.scene.on .runIn { animation: runIn 1.6s ease-in forwards; }
.scene.on .walkOut { animation: walkOut 2s ease-in forwards; animation-delay: var(--d, 0s); }
@keyframes walk { from { transform: translateX(-900px); } to { transform: none; } }
@keyframes walkIn { from { transform: translateX(-500px); } to { transform: none; } }
@keyframes runIn { from { transform: translateX(-700px); } to { transform: none; } }
@keyframes walkOut { to { transform: translateX(-900px); } }
.scene.on .bob { animation: bob .5s ease-in-out 6 alternate; }
@keyframes bob { to { transform: translateY(-14px); } }
.scene.on .bounce { animation: bounce .45s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes bounce { to { transform: translateY(-26px) rotate(2deg); } }
.scene.on .jump { animation: jump 1.1s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes jump { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-60px); } }
.scene.on .stomp { animation: stomp .5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes stomp { 0%, 100% { transform: none; } 40% { transform: translateY(-16px) rotate(-3deg); } 60% { transform: translateY(4px) rotate(2deg); } }
.wave { transform-box: fill-box; transform-origin: 50% 6% !important; }
.scene.on .wave { animation: wave .45s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes wave { from { transform: rotate(-150deg); } to { transform: rotate(-115deg); } }
.scene.on .laugh { animation: laugh .35s ease-in-out infinite alternate; }
@keyframes laugh { to { transform: translateY(-10px) rotate(-1.5deg); } }
.scene.on .shiver { animation: shiver .15s linear infinite alternate; }
@keyframes shiver { to { transform: translateX(4px); } }
.scene .float { opacity: 0; }
.scene.on .float { animation: float 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes float { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-160px) scale(1.1); } }
.scene .slideR { transform: translateX(900px); }
.scene.on .slideR { animation: slideR .7s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes slideR { to { transform: none; } }
.twinkle { transform-box: fill-box; transform-origin: center !important; }
.scene.on .twinkle { animation: tw 1.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes tw { from { transform: scale(.5) rotate(0); opacity: .3; } to { transform: scale(1.1) rotate(30deg); opacity: 1; } }
.scene.on .fall { animation: fall 3s linear infinite; animation-delay: var(--d, 0s); }
@keyframes fall { to { transform: translateY(1000px) rotate(200deg); } }
.scene.on .snowfall { animation: fall 5s linear infinite; animation-delay: var(--d, 0s); }
.scene.on .fall2 { animation: fall2 2.4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes fall2 { to { transform: translateY(240px); } }
.scene .drip { opacity: 0; }
.scene.on .drip { animation: drip 1.4s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes drip { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px); } }
.scene .flash { opacity: 0; }
.scene.on .flash { animation: flash .6s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
.scene .rise { opacity: 0; }
.scene.on .rise { animation: rise 3s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes rise { 0% { opacity: 0; transform: translateY(160px) scale(.3); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(-120px) scale(1); } }
.spin { transform-box: fill-box; transform-origin: center !important; }
.scene.on .spin { animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.burst { transform-box: fill-box; transform-origin: center !important; opacity: 0; }
.scene.on .burst { animation: burst 1s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes burst { from { opacity: 0; transform: scale(.1); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.scene .ballMiss, .scene .ballSwish { opacity: 0; }
.scene.on .ballMiss { animation: ballMiss 1.6s ease-in-out forwards; animation-delay: var(--d, 0s); }
@keyframes ballMiss { 0% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translate(380px, -260px); } 70% { transform: translate(470px, -140px); } 100% { opacity: 1; transform: translate(300px, 300px); } }
.scene.on .ballSwish { animation: ballSwish 1.4s ease-in-out forwards; animation-delay: var(--d, 0s); }
@keyframes ballSwish { 0% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translate(360px, -260px); } 75% { transform: translate(480px, -120px); } 100% { opacity: 1; transform: translate(490px, 260px); } }
.scene.on .rainfall { animation: rain .9s linear infinite; animation-delay: var(--d, 0s); }
.scene.on .drizzlefall { animation: rain 2s linear infinite; animation-delay: var(--d, 0s); }
@keyframes rain { to { transform: translate(-60px, 1800px); } }
.scene .fly { opacity: 0; }
.scene.on .fly { animation: fly 2.2s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes fly { 0% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translate(-520px, -150px); } }
.flicker { transform-box: fill-box; transform-origin: 50% 100%; }
.scene.on .flicker { animation: flicker .4s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scaleY(.9) scaleX(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .scene.on .walk, .scene.on .walkIn, .scene.on .runIn, .scene.on .bob, .scene.on .bounce, .scene.on .jump, .scene.on .stomp, .scene.on .wave, .scene.on .laugh, .scene.on .shiver, .scene.on .twinkle, .scene.on .spin, .scene.on .fall, .scene.on .snowfall, .scene.on .fall2, .scene.on .rainfall, .scene.on .drizzlefall, .scene.on .flicker { animation: none; }
  .scene.on .slideR { animation-duration: .01s; }
}

/* compact word list */
.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 12px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.fchip .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 2px; }
.fchip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.fchip[aria-pressed="true"] .n { color: var(--brand-ink); opacity: .8; }
.search { font: inherit; flex: 1 1 220px; max-width: 320px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.letter { font-size: .8rem; letter-spacing: .1em; color: var(--muted); margin: 16px 0 6px 4px; font-weight: 900; }
.wlist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wrow { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 48px; border-top: 1px solid var(--line); }
.wrow:first-child { border-top: 0; }
.wrow:hover { background: color-mix(in srgb, var(--chip) 45%, transparent); }
.wlink { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); padding: 12px 0; }
.ww { font-family: var(--display); font-weight: 900; font-size: 1.08rem; flex: none; }
.wpos { color: var(--muted); font-size: .8rem; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.p { background: var(--good); } .dot.n { background: var(--bad); }
.wdef { color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--ink); flex: none; }
.play:hover { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 560px) { .wlink { flex-wrap: wrap; row-gap: 0; padding: 8px 0; } .wdef { flex-basis: 100%; font-size: .85rem; } .search { max-width: none; } }
.sync { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--bad-bg); color: var(--ink); font-size: .92rem; }
.screen .loadmsg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: #f4fbf9; font-weight: 700; }

/* Today */
.qcard.today { position: relative; gap: 10px; }
.qcard.today h2 { margin: 0; font-size: 1.8rem; }
.lede { margin: 0; font-size: 1.15rem; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.btn.big { font-size: 1.15rem; padding: 14px 30px; border-radius: 12px; }
.btn.small { padding: 6px 10px; font-size: .85rem; }
.done-stats { display: flex; gap: 12px; }
.done-stats div { background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; display: grid; }
.done-stats b { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.done-stats span { color: var(--muted); font-size: .85rem; }
.qtop .stop { color: var(--muted); font-weight: 700; white-space: nowrap; }
.kicker { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.kicker b { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.qopts.wide { grid-template-columns: 1fr; }
.recall .qword { font-size: 2.8rem; }
.rpos { margin: -10px 0 0; color: var(--muted); font-style: italic; }
.hint { color: var(--muted); font-size: .85rem; margin-left: 6px; }
.meaning { background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.meaning .def { margin: 0; font-size: 1.2rem; font-weight: 700; }
.meaning .ex { margin: 6px 0 0; color: var(--muted); }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.grade { display: grid; padding: 12px 10px; font-size: 1.05rem; border: 2px solid transparent; }
.grade small { font-weight: 400; font-size: .8rem; color: var(--muted); }
.grade.again { background: var(--bad-bg); }
.grade.hard { background: var(--chip); }
.grade.good { background: var(--good-bg); }
.grade:hover:not(:disabled) { border-color: var(--brand); }
.grade:disabled { opacity: .55; cursor: default; }
.newhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.newhead h2 { margin: 2px 0 0; font-size: 2rem; }
.pill.new { display: inline-block; background: var(--sun); color: var(--sun-ink); border-radius: 99px; padding: 2px 10px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.btn.pulse { animation: pulse 1.2s ease-in-out 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 30%, transparent); } }
@media (max-width: 560px) { .qcard { padding: 16px; } .qcard.today h2 { font-size: 1.5rem; } .grades { gap: 6px; } .grade { padding: 10px 4px; font-size: .95rem; } .recall .qword { font-size: 2.2rem; } }

/* stage badges */
.stage { flex: none; font-size: .74rem; font-weight: 800; border-radius: 99px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.s-new { background: var(--chip); color: var(--muted); }
.s-learning { background: color-mix(in srgb, var(--sun) 35%, var(--card)); color: var(--ink); }
.s-mastered { background: var(--good-bg); color: var(--good); }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.pips i.on { background: var(--ink); }
@media (max-width: 560px) { .stage { font-size: .68rem; padding: 2px 7px; } }

/* replay */
.modal { position: fixed; inset: 0; background: rgba(8, 20, 19, .66); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal-card { background: var(--card); border-radius: 18px; padding: 16px; width: min(900px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 12px; }
.modal-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.3rem; }

/* progress */
.section-h.first { margin-top: 4px; }
.stagebar-card { margin-bottom: 12px; }
.stagebar { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--chip); }
.stagebar i, .legend i { display: block; }
.stagebar .m, .legend .m { background: var(--good); }
.stagebar .l, .legend .l { background: var(--sun); }
.stagebar .n, .legend .n { background: color-mix(in srgb, var(--ink) 14%, var(--card)); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .9rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend .of { color: var(--muted); }
.summary.three { grid-template-columns: repeat(3, 1fr); margin: 0 0 12px; }
@media (max-width: 620px) { .summary.three { grid-template-columns: repeat(3, 1fr); } .summary.three .stat:first-child { grid-column: auto; } .summary.three .stat { padding: 12px; } .summary.three .v { font-size: 1.35rem; } }
.stat .sub { color: var(--muted); font-size: .85rem; }
.pace p { margin: 6px 0 0; font-size: 1.05rem; }
.pace.behind { border-color: var(--bad); }
.pace .warn { color: var(--bad); font-size: .95rem; }
.struggling { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.settings { display: grid; gap: 14px; max-width: 520px; }
.settings label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.settings input, .settings select { font: inherit; font-weight: 400; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--page); color: var(--ink); }
.settings .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.recent td:first-child { width: 8.5rem; color: var(--muted); }
.recent td:nth-child(2) { width: 11rem; font-weight: 700; }
@media (max-width: 600px) { .recent td:first-child { width: 6.5rem; } .recent td:nth-child(2) { width: auto; } }

/* Dango mascots */
.dango { display: block; flex: none; overflow: visible; }
.hero { display: flex; align-items: center; gap: 18px; }
.hero .dango { width: 52px; height: auto; }
.hero-text { display: grid; gap: 8px; min-width: 0; }
.qcard.today .hero h2 { padding-right: 0; }
.gate-mark { display: flex; justify-content: center; }
.fb-head { display: flex; align-items: center; gap: 8px; }
.dg-bounce .dg-b0 { animation: dg-hop 1.8s ease-in-out infinite; }
.dg-bounce .dg-b1 { animation: dg-hop 1.8s ease-in-out .15s infinite; }
.dg-bounce .dg-b2 { animation: dg-hop 1.8s ease-in-out .3s infinite; }
@keyframes dg-hop { 0%, 60%, 100% { transform: none; } 25% { transform: translateY(-5px); } }
@media (max-width: 560px) { .hero { gap: 12px; padding-right: 84px; } .hero .dango { width: 40px; } }
@media (prefers-reduced-motion: reduce) { .dg-bounce .dg-b0, .dg-bounce .dg-b1, .dg-bounce .dg-b2 { animation: none; } }

/* ---------- sign-in and the learner picker ---------- */
.gate h2 { margin: 0; text-align: center; }
.gate > p { margin: 0; }
.gate .note { text-align: center; }
.stepbar { display: flex; justify-content: center; gap: 6px; margin: -6px 0 2px; }
.stepbar span { width: 28px; height: 4px; border-radius: 2px; background: var(--line); }
.stepbar span.done { background: var(--brand); opacity: .55; }
.stepbar span.now { background: var(--brand); }
.gate .tagline { text-align: center; color: var(--muted); }
.stack { display: grid; gap: 8px; }
.stack > p { margin: 0 0 4px; }
.stack label, .gate > label { font-weight: 700; font-size: .92rem; }
.gate .btn { padding: 11px 16px; }
.btn.google { background: var(--card); border: 2px solid var(--line); color: var(--ink); }
.btn.google:hover { border-color: var(--brand); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.otp { font-family: var(--display); font-weight: 900; font-size: 1.6rem; letter-spacing: .35em; text-align: center; }
.learners { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.learner { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--page); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.learner:hover { border-color: var(--brand); }
.learner span { overflow-wrap: anywhere; }
.avatars { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; gap: 2px; }
.avatars legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: 6px; }
.avatar { display: inline-flex; padding: 3px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.avatar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar:has(input:checked) { border-color: var(--brand); background: var(--chip); }
.avatar:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.gate .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- parent area ---------- */
.top .row { display: flex; gap: 8px; }
.btn.danger { background: var(--bad-bg); color: var(--bad); }
.kids { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.kid { display: grid; gap: 10px; align-content: start; }
.kid h3 { margin: 0; font-size: 1.25rem; }
.kid .note { margin: 0; }
.kid-top { display: flex; gap: 12px; align-items: center; }
.kid .row, .account .row { display: flex; gap: 8px; flex-wrap: wrap; }
.kid .settings { max-width: none; }
.kid .settings h3 { margin: 0; }
.account p { margin: 0 0 10px; }
.account .err:empty, .kid .err:empty { display: none; }

/* ---------- plain pages (privacy) ---------- */
.doc { max-width: 720px; }
.doc h1 { font-size: 2rem; margin: 8px 0 4px; }
.doc h2 { margin: 28px 0 8px; font-size: 1.25rem; }
.doc p, .doc li { line-height: 1.6; }
.doc ul { padding-left: 1.2em; }
.avatars { max-width: 340px; }
#addbox { margin-top: 12px; }

/* ---------- header layout and the account menu ---------- */
.top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.top .tabs { justify-self: end; }
@media (max-width: 620px) {
  .top { grid-template-columns: 1fr auto; row-gap: 10px; }
  .top .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .top .tabs a { flex: 1; text-align: center; }
  .acct-name { display: none; }
}
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; max-width: 200px; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--brand); }
.acct-btn svg.dg-one { flex: none; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-btn .chev { flex: none; color: var(--muted); transition: transform .15s; }
.acct-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.14); display: grid; gap: 2px; }
.acct-menu[hidden] { display: none; }
.acct-email { margin: 4px 8px 6px; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.acct-email b { color: var(--ink); }
.acct-h { margin: 6px 8px 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.acct-item:hover, :root:not(.pointer) .acct-item:focus-visible { background: var(--chip); }
.acct-item[aria-current="true"] { background: var(--page); }
.acct-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item .tick { margin-left: auto; color: var(--good); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.parent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.parent-head .btn svg { margin-right: 2px; }

/* ---------- who's setting this up ---------- */
.who { display: grid; gap: 8px; }
.who-q { font-weight: 700; text-align: center; }
.gate .birth { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.gate .birth label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.gate select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--page); color: var(--ink); }

/* ---------- setting up a device from a phone ---------- */
.signin .choice { display: grid; gap: 8px; text-align: center; }
.signin .choice h3 { margin: 0; font-size: 1.1rem; }
.signin .choice .note { margin: 0; }
.btn svg { flex: none; }
.devicecode .steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.bigcode { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 2.4rem; letter-spacing: .12em; text-align: center; margin: 4px 0; color: var(--ink); }
.qr { width: 180px; height: 180px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--line); }
.qr { display: block; }
.code8 { letter-spacing: .2em; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.linkapprove .asking { margin: 0; }
.warn-box { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--ink); font-weight: 700; font-size: .92rem; }
.pick { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.pick legend { font-weight: 700; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.pickrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 700; }
.pickrow input { accent-color: var(--brand); }
.pickrow:has(input:checked) { border-color: var(--brand); background: var(--chip); }
.pickrow.addrow { border-style: dashed; color: var(--brand); }
.pickrow .plus { width: 32px; height: 32px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-weight: 900; color: var(--muted); }
.center { text-align: center; margin: 0; }
.devices { display: grid; gap: 12px; }
.device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.device .note { margin: 2px 0 0; }
.devices > .note { margin: 0; }
.device .btn { white-space: nowrap; flex: none; }

/* Signed-out first screen: "Sign in" in the corner, privacy and terms in a quiet footer. */
.signin-link { padding: 8px 16px; font-weight: 700; grid-column: -2 / -1; justify-self: end; }
.foot { text-align: center; color: var(--muted); margin-top: 16px; }

/* Word sets: the current unit on Today, and each set's progress on the Progress page. */
.unitline { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.sets { display: grid; gap: 10px; }
.sets .k { margin: 0; }
.setrow { display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: 10px; }
.setname { font-weight: 700; }
.setbar { height: 10px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.setbar i { display: block; height: 100%; background: var(--brand, #0f5c57); border-radius: 99px; }
.setnum { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .92rem; }
.settings label .note { display: block; font-weight: 400; margin-top: 4px; }

/* Words page grouped by unit: the current unit open first, the rest one line each. */
.unit { margin-top: 12px; }
.unit summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.unit summary::-webkit-details-marker { display: none; }
.unit[open] summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
.unit .uname { font-family: var(--display); font-weight: 900; font-size: 1.05rem; }
.unit .ucount { color: var(--muted); font-size: .9rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.unit.now summary { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand); }
.unit.now .ucount { color: var(--brand); font-weight: 700; }
.unit .chev { flex: none; color: var(--muted); transition: transform .15s; }
.unit[open] .chev { transform: rotate(180deg); }
.unit summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wunit { color: var(--muted); font-size: .78rem; white-space: nowrap; flex: none; }
@media (max-width: 560px) { .wunit { display: none; } }

/* Word tiles inside a unit: the word is the hero; the tile's look is its stage. */
.tiles { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.unit.now .tiles { border-color: var(--brand); }
.tile { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 72px; height: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); border: 2px solid var(--line); background: var(--card); transition: transform .1s, box-shadow .1s; }
.tile:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.tw { font-family: var(--display); font-weight: 900; font-size: 1.2rem; line-height: 1.15; overflow-wrap: anywhere; }
.tdef { color: var(--muted); font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tiles.with-defs .tile { justify-content: flex-start; }
.t-new .tw { color: color-mix(in srgb, var(--ink) 78%, var(--card)); }
.t-learning { background: color-mix(in srgb, var(--sun) 22%, var(--card)); border-color: color-mix(in srgb, var(--sun) 70%, var(--card)); }
.t-mastered { background: var(--good-bg); border-color: var(--good); }
.tmark { color: var(--good); font-size: .78rem; font-weight: 800; }
.tile .pips i { width: 7px; height: 7px; }
.meaningbar { display: flex; justify-content: flex-end; margin: 4px 0 -2px; }
.mtoggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; padding: 6px 2px; }
.mtoggle .knob { width: 34px; height: 20px; border-radius: 99px; background: var(--chip); position: relative; transition: background .15s; flex: none; }
.mtoggle .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.mtoggle[aria-pressed="true"] .knob { background: var(--brand); }
.mtoggle[aria-pressed="true"] .knob::after { transform: translateX(14px); }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 8px; } .tw { font-size: 1.08rem; } .tile { min-height: 64px; padding: 10px 12px; } }

/* "Already know it?" above a not-started word's story on its page. */
.provebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px 10px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.provebar .btn { padding: 8px 16px; }

/* Player: symbol buttons, and a tap on the picture pauses (a play symbol shows while paused). */
button.b.icon { display: inline-grid; place-items: center; width: 44px; height: 40px; padding: 0; }
.screen.started { cursor: pointer; }
.screen.started.paused::after { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: rgba(8,40,38,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5 L18.5 12 L8.5 18.5Z' fill='white'/%3E%3C/svg%3E") center / 40px no-repeat; }

/* Parent area: Mastered and Learning open the words behind the count. */
.kidlegend .lg { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px 4px 8px; cursor: pointer; }
.kidlegend .lg:hover { background: var(--chip); }
.kidlegend .lg[aria-expanded="true"] { background: var(--chip); border-color: var(--ink); }
.kidlegend .lg .chev { color: var(--muted); transition: transform .15s; }
.kidlegend .lg[aria-expanded="true"] .chev { transform: rotate(180deg); }
.kidwords { border-top: 1px solid var(--line); padding-top: 10px; }
.wchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-weight: 700; font-size: .9rem; border: 1px solid transparent; }
.wchip.m { background: var(--good-bg); color: var(--good); }
.wchip.l { background: color-mix(in srgb, var(--sun) 25%, var(--card)); color: var(--ink); border-color: color-mix(in srgb, var(--sun) 65%, var(--card)); }
.wchip.warn { background: var(--bad-bg); border-color: var(--bad); }
.kidwords .note { margin-top: 8px; font-size: .85rem; }
.warnkey { color: var(--bad); font-weight: 700; }

/* A balance scale in the Compare lessons that could tip either way. */
.scene.on .rock { animation: rock 2.4s ease-in-out infinite; transform-box: view-box; }
@keyframes rock { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .scene.on .rock { animation: none; } }

/* ---------- Compare: quantitative comparison (public/compare-ui.js) ---------- */
.cmp { display: grid; gap: 14px; }
.cmp .kicker { margin: 0; }
.cmp-q { display: grid; gap: 14px; }
/* Given information, as on the ISEE: part of the question, above Column A and Column B and spanning both, in the same
   type as the columns (a little smaller, since ours are large), so it reads as part of the question, not a caption. */
.cmp-info { grid-column: 1 / -1; margin: 0; padding: 14px 16px; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 4.2vw, 1.45rem); line-height: 1.35; text-wrap: balance; background: var(--card); border-bottom: 2px solid var(--line); }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
.cmp-col { display: grid; justify-items: center; gap: 6px; padding: 14px 10px 18px; }
.cmp-col + .cmp-col { border-left: 2px solid var(--line); }
.cmp-col.a { background: color-mix(in srgb, #ffc94a 14%, var(--card)); }
.cmp-col.b { background: color-mix(in srgb, #4c8fd6 12%, var(--card)); }
.cmp-colname { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cmp-val { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 6vw, 2.3rem); font-variant-numeric: tabular-nums; text-align: center; }
.cmp-opts { display: grid; gap: 8px; }
.cmp-opt { font-size: 1rem; }
/* Stacked fractions: <span class="frac"><sup>7</sup><span class="sr">/</span><sub>12</sub></span>. The slash is kept
   for screen readers and copying but hidden, and the bar under the numerator draws the line. */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; white-space: nowrap; }
.frac sup, .frac sub { font-size: .62em; line-height: 1.08; vertical-align: baseline; }
.frac sup { border-bottom: max(2px, .07em) solid currentColor; padding: 0 .12em .04em; }
.frac sub { padding: .04em .12em 0; }
.frac .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.frac { position: relative; }
/* In Compare's small text (tray labels, the line under the scale, tries and steps), a stacked fraction at .62em is too
   small to read, so its parts are nearly full size there, with room above and below so it doesn't touch the next line.
   The big column values, tray numbers and chips keep the compact size. */
.scale-label .frac sup, .scale-label .frac sub, .scale-line .frac sup, .scale-line .frac sub, .cmp-tries .frac sup, .cmp-tries .frac sub { font-size: .88em; }
.scale-label .frac, .scale-line .frac, .cmp-tries .frac { margin-block: .2em; }
.scale-label, .scale-line, .cmp-tries li { line-height: 1.6; }

/* The balance scale: a beam that tips about 12 degrees with a little spring, and trays that ride its ends. */
@property --tilt { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.scale { --arm: 112px; --top: 40px; position: relative; width: 100%; max-width: 360px; height: calc(var(--top) + 178px); margin: 4px auto 0; transition: --tilt .9s cubic-bezier(.34, 1.56, .64, 1); }
@media (min-width: 600px) { .scale { --arm: 132px; max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .scale { transition: none; } }
.scale-frame { position: absolute; left: 50%; top: calc(var(--top) - 64px); width: 320px; height: 220px; transform: translateX(-50%); }
.scale-beam { position: absolute; left: 50%; top: var(--top); width: calc(2 * var(--arm) + 26px); height: 12px; border-radius: 6px; background: #a8743f; transform: translate(-50%, -50%) rotate(var(--tilt)); }
.scale-pivot { position: absolute; left: 50%; top: var(--top); width: 22px; height: 22px; border-radius: 50%; background: #5a3a24; transform: translate(-50%, -50%); }
.scale-tray { position: absolute; top: var(--top); display: grid; justify-items: center; width: 116px; }
.scale-tray.a { left: calc(50% - var(--arm)); transform: translate(-50%, calc(sin(var(--tilt)) * var(--arm) * -1)); }
.scale-tray.b { left: calc(50% + var(--arm)); transform: translate(-50%, calc(sin(var(--tilt)) * var(--arm))); }
.scale-tray::before { content: ""; width: 86px; height: 40px; background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #8a8a8a calc(50% - 1.5px), #8a8a8a calc(50% + 1.5px), transparent calc(50% + 1.5px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1.5px), #8a8a8a calc(50% - 1.5px), #8a8a8a calc(50% + 1.5px), transparent calc(50% + 1.5px)) right / 50% 100% no-repeat; }
.scale-val { display: grid; place-items: center; min-width: 108px; min-height: 64px; padding: 4px 8px; border-radius: 16px; border: 4px solid; font-family: var(--display); font-weight: 900; font-size: 1.8rem; font-variant-numeric: tabular-nums; color: #15302e; }
.scale-tray.a .scale-val { background: #fff1c9; border-color: #e0a400; }
.scale-tray.b .scale-val { background: #dcebf9; border-color: #2f6fb3; }
.scale-label { margin-top: 6px; font-size: .85rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.scale-under { display: grid; justify-items: center; gap: 2px; text-align: center; margin-top: -6px; }
.scale-x { margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.9rem; }
.scale-line { margin: 0; font-weight: 700; }
.muted { color: var(--muted); }
.cmp-walk { display: grid; gap: 12px; }
.cmp-chips-h { margin: 0; text-align: center; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cmp-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cmp-chip { min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 900; font-size: 1.4rem; cursor: pointer; }
.cmp-chip:hover { border-color: var(--brand); }
.cmp-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cmp-nudge { margin: 0; text-align: center; font-weight: 700; color: var(--brand); }
.cmp-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; }
.cmp-tries li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--page); }
.cmp-tries li > span:first-child { font-weight: 800; white-space: nowrap; }
.cmp-tries .rel { font-weight: 800; white-space: nowrap; }
.cmp-tries .rel.A { color: #b07d00; }
.cmp-tries .rel.B { color: #2f6fb3; }
.cmp-tries .rel.C { color: var(--good); }
.cmp-tries.cmp-steps li { grid-template-columns: auto 1fr; }
/* One try: x, then Column A's working and Column B's working on their own lines, then the result. On a phone the
   working moves under x and the result, so each line has the full width. */
.cmp-tries li:has(.try-work) { grid-template-columns: auto 1fr auto; grid-template-areas: "x work rel"; }
.try-x { grid-area: x; min-width: 4.6em; } /* the same width on every row, so the A and B lines line up */
.try-work { grid-area: work; display: grid; gap: 2px; }
.try-work > span { white-space: nowrap; }
.try-work b { display: inline-block; width: 1.1em; color: var(--muted); font-size: .85em; }
.cmp-tries li:has(.try-work) .rel { grid-area: rel; }
@media (max-width: 520px) {
  .cmp-tries li:has(.try-work) { grid-template-columns: 1fr auto; grid-template-areas: "x rel" "work work"; row-gap: 4px; }
  .try-x { min-width: 0; }
}
/* A little room between a variable and its exponent (x³). */
.cmp sup.xp { margin-left: .12em; }
.cmp-flip { border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, #7a4ab5 12%, var(--card)); border: 2px solid color-mix(in srgb, #7a4ab5 40%, var(--card)); }
.cmp-flip.same { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 40%, var(--card)); }
.cmp-flip h3 { margin: 0 0 4px; }
.cmp-flip p { margin: 4px 0; }
.cmp-flip .cmp-habit { font-weight: 700; }
.cmp-flip .actions { margin-top: 10px; }
@media (max-width: 420px) { .cmp-chip { font-size: 1.2rem; min-height: 48px; } .cmp-tries { font-size: .88rem; } .cmp-tries li { gap: 6px; padding: 8px; } }
.cmp .feedback { scroll-margin-top: 12px; }
@media (max-width: 400px) { .scale { --arm: 104px; } }

/* ---------- sections (SECTIONS.md): the weekly goal, Today's section cards, Progress tabs ---------- */
.week { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .95rem; }
.week-n b { font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 55%, var(--card)); }
.dots i.on { background: var(--brand); border-color: var(--brand); }
.week.met .dots i.on { background: var(--good); border-color: var(--good); }
.week-met { color: var(--good); font-weight: 700; }
.secs { display: grid; gap: 10px; }
/* Side by side on wider screens: icon and text on top, the button at the bottom, lined up across the cards. */
@media (min-width: 760px) {
  .secs:not(.small) { grid-template-columns: 1fr 1fr; gap: 14px; }
  .secs:not(.small) .sec { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 18px; }
  .secs:not(.small) .sec .btn { grid-column: 1 / -1; justify-self: start; align-self: end; margin-top: 6px; }
}
.sec { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.sec h3 { margin: 0; font-size: 1.2rem; }
.sec-line { margin: 2px 0 0; }
.sec .unitline { font-size: .88rem; margin-top: 2px; }
.sec-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--card); color: var(--brand); border: 1px solid var(--line); }
.sec-icon svg { width: 24px; height: 24px; }
.sec.done .sec-icon { background: var(--good-bg); color: var(--good); border-color: transparent; }
.sec.done .sec-line, .sec.rest .sec-line { color: var(--muted); }
.sec .btn { white-space: nowrap; }
.secs.small { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.secs.small .sec { padding: 10px 12px; }
.secs.small .sec-icon { width: 36px; height: 36px; }
@media (max-width: 480px) {
  .sec { grid-template-columns: auto 1fr; }
  .sec .btn { grid-column: 1 / -1; }
}
.strip { display: grid; gap: 10px; margin-bottom: 14px; }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .95rem; }
.strip-today { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.secchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--chip); color: var(--muted); font-size: .85rem; font-weight: 700; }
.secchip svg { width: 14px; height: 14px; }
.secchip.done { background: var(--good-bg); color: var(--good); }
.ptabs { display: grid; grid-template-columns: repeat(var(--tabs, 2), auto); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--chip); max-width: 520px; }
.ptabs button { border: 0; border-radius: 9px; padding: 9px 12px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ptabs .tab-short { display: none; }
/* On a phone, up to four section tabs in one row: shorter labels and tighter padding. */
@media (max-width: 480px) {
  .ptabs { max-width: none; }
  .ptabs button { padding: 9px 8px; }
  .ptabs .tab-long { display: none; }
  .ptabs .tab-short { display: inline; }
}
.ptabs button[aria-selected="true"] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.skills { display: grid; gap: 4px; }
.skillrow { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name pips btn" "acc acc btn"; align-items: center; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.skillrow .skillname { grid-area: name; font-weight: 700; }
.skillrow .pips { grid-area: pips; }
.skillrow .pips i { width: 9px; height: 9px; }
.skillrow .skillacc { grid-area: acc; color: var(--muted); font-size: .9rem; }
.skillrow.later .skillname, .skillrow.later .skillacc { opacity: .55; }
.skillrow .skillbtns { grid-area: btn; display: flex; gap: 6px; }
/* On a phone the buttons get their own line, so the skill names don't squeeze into a narrow column. */
@media (max-width: 520px) {
  .skillrow { grid-template-columns: 1fr auto; grid-template-areas: "name pips" "acc acc" "btn btn"; }
  .skillrow.later { grid-template-areas: "name pips" "btn btn"; }
  .skillrow .skillbtns { margin-top: 4px; }
}
.skillrow.later .skillacc { grid-area: pips; }
.dtraps { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dtraps th { text-align: right; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0 6px 12px; }
.dtraps td { padding: 6px 0; border-top: 1px solid var(--line); }
/* The row's label wraps on a phone, so the two weeks' columns always fit. */
.dtraps td:first-child { white-space: normal; }
.dtraps td + td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; padding-left: 12px; white-space: nowrap; }
.note.quiet { opacity: .8; }

/* Simplifying both sides: smaller tray text (whole expressions), and the block that lifts out of both trays. */
.scale.small .scale-val { font-size: 1.25rem; min-width: 96px; padding: 4px 10px; white-space: nowrap; }
.scale.small .scale-val.long { font-size: 1.05rem; padding-inline: 6px; }
.scale-ghost { position: absolute; top: 52px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.12); left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 10px; background: var(--card); border: 2px dashed var(--muted); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 1.1rem; white-space: nowrap; pointer-events: none; animation: lift 1.2s ease-out forwards; }
@keyframes lift { 0% { opacity: 1; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70px); } }
@media (prefers-reduced-motion: reduce) { .scale-ghost { animation-duration: .01s; } }
.cmp-left { margin-bottom: 4px; }
.cmp-left p { margin: 0; }
.newskill h2 { margin: 6px 0 0; font-size: 1.8rem; }
.newskill .rule { display: grid; gap: .5em; }
.newskill .rule p { margin: 0; }

/* Columns written in words (percent changes, averages): smaller than the big numbers so they fit. */
.cmp-val.long { font-size: clamp(1.02rem, 3.6vw, 1.2rem); font-weight: 800; line-height: 1.35; text-wrap: balance; }
.cmp-why li > span:last-child { line-height: 1.6; }

/* The timed set: the clock in the session bar, the third card spanning both columns, and the results list. */
.clock { font-family: var(--display); font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.clock.low { color: var(--bad); }
/* A card left on its own in the last row (three cards, say) spans both columns rather than leaving a gap. */
@media (min-width: 760px) { .secs:not(.small) .sec:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.sec-icon.timed { color: #7a4ab5; }
.timed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.timed-list li { display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--page); line-height: 1.6; }
.timed-list li.no { background: var(--bad-bg); }
.timed-list .tn { font-weight: 800; color: var(--muted); }
.timed-list .tq { font-family: var(--display); font-weight: 800; }
.timed-list .tq .frac sup, .timed-list .tq .frac sub { font-size: .88em; }
.timed-list .tp { font-size: .9rem; white-space: nowrap; }
@media (max-width: 520px) { .timed-list li { grid-template-columns: 2em 1fr; } .timed-list .tp { grid-column: 2; white-space: normal; } }
.timed-list .tf { display: block; font-family: var(--body); font-weight: 400; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.cmp-tries li.now { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }

/* Compare word problems: a setup that runs to two sentences reads a size down. */
.cmp-info.long { font-family: var(--body); font-weight: 400; font-size: clamp(1.02rem, 3.6vw, 1.12rem); line-height: 1.5; }
/* Pairs (x, y) on the scale's chips and under the scale. */
.cmp-chips.pairs .cmp-chip { font-size: 1.1rem; padding: 0 4px; white-space: nowrap; }
/* On a phone five pairs don't fit in a row: three, then two. */
@media (max-width: 560px) { .cmp-chips.pairs { grid-template-columns: repeat(6, 1fr); } .cmp-chips.pairs .cmp-chip { grid-column: span 2; } .cmp-chips.pairs .cmp-chip:nth-child(4) { grid-column: 2 / span 2; } }
.scale-x.pair { font-size: 1.5rem; }
/* The timed set, as on the test: the four answer choices once at the top, letter buttons under each question. */
.cmp-key { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 2px; border-radius: 12px; background: var(--page); font-size: .95rem; }
.cmp-key li { display: grid; grid-template-columns: 2.1em 1fr; }
.cmp-key b { color: var(--muted); }
.cmp-letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cmp-letter { min-height: 56px; border: 2px solid var(--line); border-radius: 14px; background: var(--page); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 900; font-size: 1.35rem; cursor: pointer; }
.cmp-letter:hover:not(:disabled) { border-color: var(--brand); }
.nowrap { white-space: nowrap; }
.cmp-val.wide { font-size: clamp(1.25rem, 4.6vw, 1.8rem); }
/* A stacked fraction on a chip fills more of it; the chips' capitalized heading keeps the variable lowercase (x, not X). */
.cmp-chip .frac sup, .cmp-chip .frac sub { font-size: .78em; }
.cmp-chips-h i { text-transform: none; }
.cmp-nudge { text-wrap: balance; }
.cmp-val .frac sup, .cmp-val .frac sub { font-size: .72em; }
/* A fractional exponent, (1/50)^(−1/2): its stacked fraction is already in a superscript, so it shrinks less. */
sup.xf .frac sup, sup.xf .frac sub { font-size: .85em; }
sup.xf { vertical-align: .55em; font-size: .7em; }
/* "See how it works" after a right answer: the walkthrough under a small heading. */
.cmp-how { display: grid; gap: 10px; scroll-margin-top: 12px; }
.cmp-how > h3 { margin: 4px 0 0; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
/* Stacked fractions in a feedback sentence ("Column A is 9/25…") at the size they have in the steps. */
.feedback p .frac sup, .feedback p .frac sub { font-size: .88em; }
.feedback p .frac { margin-block: .2em; }
.feedback p { line-height: 1.6; }
/* A skill's name on Progress opens its card. */
a.skillname { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a.skillname:hover { text-decoration-color: var(--brand); }

/* Compare figures and charts (public/compare-figures.js): plain line drawings as on the test. Lines are the ink color,
   fills light, shading a hatch, so they work in the dark theme too. */
.cmp-fig { grid-column: 1 / -1; margin: 0; padding: 14px 6px 10px; display: grid; justify-items: center; gap: 4px; background: var(--card); border-bottom: 2px solid var(--line); }
.cmp-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmp-walkfig .cmp-fig { border: 2px solid var(--line); border-radius: 14px; }
.fig-line { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig-line.thin { stroke-width: 1.6; }
.fig-line.thick { stroke-width: 2.6; }
.fig-line.axis { stroke-width: 1.6; }
.fig-line.grid { stroke: var(--line); stroke-width: 1; }
.fig-line.hl { stroke: #e0a400; stroke-width: 2.8; }
.fig-fill { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fig-fill.light { fill: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.fig-fill.white { fill: var(--card); }
.fig-fill.none { fill: none; }
.fig-hatch { stroke: color-mix(in srgb, var(--ink) 42%, var(--card)); stroke-width: 1.4; }
.fig-hatch-bg { fill: var(--card); }
.fig-dot { fill: var(--ink); }
.fig-text { font-family: var(--display); font-weight: 800; font-size: 15px; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.fig-text .var { font-style: italic; }
.fig-text.hl { fill: #a87400; }
.fig-text.title { font-weight: 700; fill: var(--muted); }
.fig-bar { fill: color-mix(in srgb, #4c8fd6 30%, var(--card)); stroke: var(--ink); stroke-width: 1.5; transition: fill .3s; }
.fig-bar.on { fill: color-mix(in srgb, #4c8fd6 62%, var(--card)); }
.fig-bar.off { fill: color-mix(in srgb, var(--ink) 6%, var(--card)); }
.fig-bar.mark { fill: var(--sun); }
.fig-note { margin: 0; font-size: .85rem; font-style: italic; color: var(--muted); }
.fig-table { border-collapse: collapse; font-family: var(--display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fig-table th, .fig-table td { padding: 6px 16px; border: 1.5px solid var(--ink); text-align: center; transition: background .3s; }
.fig-table thead th { background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.fig-table .on { background: color-mix(in srgb, #4c8fd6 30%, var(--card)); }
.fig-table .off { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Recent Compare answers (Progress, and a learner's card in the parent area): an "All / Misses" filter, and rows that
   open the question again. Wide, the rows line up like the activity tables (when, skill, kind, result); on a phone, the
   skill and result go first, with when and what kind of answer under them. */
.ansfilter { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 12px; background: var(--chip); }
.ansfilter button { border: 0; border-radius: 9px; padding: 6px 16px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.ansfilter button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.anslist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .92rem; }
.anslist li + li { border-top: 1px solid var(--line); }
.anslist a { display: grid; grid-template-columns: 8.5rem 11rem auto 1fr auto; align-items: center; column-gap: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.anslist a:hover { background: var(--page); }
.anslist .meta { display: contents; }
.anslist .at { grid-column: 1; grid-row: 1; color: var(--muted); }
.anslist .dot { display: none; }
.anslist .sk { grid-column: 2; grid-row: 1; font-weight: 700; }
.anslist .md { grid-column: 3; grid-row: 1; }
.anslist .res { grid-column: 4; grid-row: 1; justify-self: start; }
.anslist .chev { grid-column: 5; grid-row: 1; color: var(--muted); }
@media (max-width: 600px) {
  .anslist a { grid-template-columns: 1fr auto auto; row-gap: 2px; }
  .anslist .sk { grid-column: 1; }
  .anslist .res { grid-column: 2; justify-self: end; }
  .anslist .chev { grid-column: 3; grid-row: 1 / span 2; }
  .anslist .meta { display: block; grid-column: 1 / 3; grid-row: 2; color: var(--muted); font-size: .85rem; }
  .anslist .dot { display: inline; }
}
.kidwords .ansfilter { margin-top: 2px; }

/* ---------- word problems (WORD-PROBLEMS.md) ---------- */
.sec-icon.wp { color: #b4531f; }
/* The section icons' own colors, lighter on a dark card. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-icon.wp { color: #f0965f; } :root:not([data-theme="light"]) .sec-icon.timed { color: #b896ea; } }
:root[data-theme="dark"] .sec-icon.wp { color: #f0965f; }
:root[data-theme="dark"] .sec-icon.timed { color: #b896ea; }
.wp-q { position: relative; display: grid; gap: 14px; }
.wp-stem { margin: 0; padding-right: 40px; font-size: 1.15rem; line-height: 1.6; text-wrap: pretty; }
.wp-stem .frac, .wp-opts .frac { margin-block: .1em; }
.wp-opts .qopt { font-size: 1.12rem; display: flex; align-items: center; gap: 2px; line-height: 1.5; }
.wp-opts .qopt .frac sup, .wp-opts .qopt .frac sub, .wp-stem .frac sup, .wp-stem .frac sub { font-size: .8em; }
/* The 60-second marker: a quiet ring in the corner that fills over a minute, then stays full. */
.wp-pace { position: absolute; top: 0; right: 0; width: 28px; height: 28px; }
.wp-pace svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.wp-pace circle { fill: none; stroke-width: 4.5; }
.wp-pace .track { stroke: var(--line); }
.wp-pace .fill { stroke: color-mix(in srgb, var(--brand) 50%, var(--card)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: wp-pace var(--pace) linear var(--spent) forwards; }
.wp-pace.stopped .fill { animation-play-state: paused; }
@keyframes wp-pace { to { stroke-dashoffset: 0; } }
.wp-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); background: var(--page); }
.wp-skip p { margin: 0; flex: 1 1 240px; color: var(--muted); }
.wp-pace-note { margin: 8px 0 0; }
/* Which move fits, then the steps. */
.wp-moves h3 { margin: 0 0 8px; font-size: 1.05rem; }
/* Three moves in one row when they fit, four as two rows of two, one under another on a phone. */
.wp-move-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
@media (min-width: 561px) { .wp-move-opts.four { grid-template-columns: 1fr 1fr; } }
.qopt.wp-move { font-size: 1rem; font-weight: 700; text-align: center; }
.qopt.wp-move.faded { opacity: .55; }
.wp-move-line { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--page); }
.wp-move-line.ok { background: var(--good-bg); }
.cmp-tries.cmp-steps.wp-steps li { grid-template-columns: auto 1fr auto; }
/* A tall step (trying all four choices) keeps its number at the top, level with its first line. */
.cmp-tries.wp-steps > li { align-items: first baseline; }
.cmp-tries.wp-steps > li > .wp-mark { align-self: center; }
.wp-steps li.tried.yes { background: var(--good-bg); }
.wp-rows { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 4px; }
.cmp-tries .wp-rows li > span:first-child { font-weight: 400; }
.cmp-tries .wp-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 8px; background: var(--card); }
.cmp-tries .wp-rows li.yes { background: var(--good-bg); }
.wp-mark { font-weight: 900; font-size: 1.05rem; }
.wp-mark.yes { color: var(--good); }
.wp-mark.no { color: var(--bad); }

/* ---------- Reading (READING.md, public/reading-ui.js) ---------- */
.sec-icon.reading { color: #2f6fb3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-icon.reading { color: #7fb2ea; } }
:root[data-theme="dark"] .sec-icon.reading { color: #7fb2ea; }
/* The reading screen uses the page's width, so the passage and the questions fit side by side on a wide screen. */
.qcard.readcard { max-width: none; }
.rd { display: grid; gap: 12px; }
.rd-top { display: inline-flex; align-items: center; gap: 12px; }
.rd-pace { position: static; width: 22px; height: 22px; }
/* The passage: each line its own row that never wraps (line numbers must mean the same lines on every screen),
   every fifth numbered in the margin, each paragraph's first line indented 1em. Lines are at most 280px wide
   (scripts/build-passages.py), so the column fits a 360px phone. */
/* The 4px either side holds the lines' highlights, which reach past the words (below). */
.rd-text { font: 16px/1.75 var(--body); overflow-x: auto; padding-inline: 4px; margin-inline: -4px; }
/* Every row as wide as the widest line, so an outline or a highlight across lines is one clean block. */
.rd-lines { width: max-content; }
.pl { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; align-items: baseline; }
.pl-n { text-align: right; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; user-select: none; }
/* The text's highlight reaches 4px past the words on each side, without taking any width from the column. */
.pl-t { white-space: nowrap; padding: 0 4px; margin: 0 -4px; }
.pl.first .pl-t { padding-left: calc(1em + 4px); }
/* Lines a stem points to: outlined as one box. */
.pl.ref .pl-t { --c: var(--brand); box-shadow: inset 2px 0 var(--c), inset -2px 0 var(--c); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.pl.ref-a .pl-t { box-shadow: inset 2px 0 var(--c), inset -2px 0 var(--c), inset 0 2px var(--c); border-top-left-radius: 6px; border-top-right-radius: 6px; }
.pl.ref-z .pl-t { box-shadow: inset 2px 0 var(--c), inset -2px 0 var(--c), inset 0 -2px var(--c); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.pl.ref-a.ref-z .pl-t { box-shadow: inset 0 0 0 2px var(--c); border-radius: 6px; }
.pl.ref .pl-n { color: var(--brand); font-weight: 700; }
/* The proof: lit like a highlighter. */
.pl.proof .pl-t { background: color-mix(in srgb, var(--sun) 48%, var(--card)); }
.pl.proof-a .pl-t { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.pl.proof-z .pl-t { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.pl.proof .pl-n { color: var(--ink); font-weight: 700; }
/* The line she tapped to prove an answer. */
.pl.tapped .pl-t { box-shadow: inset 0 0 0 2px var(--good); border-radius: 5px; }
.pl.tapped.no .pl-t { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-bg); }
.pl.tapped .pl-n { font-weight: 700; color: var(--ink); }
/* Tap-to-prove: every line is a target. */
.pl.tap { cursor: pointer; }
.pl.tap:hover .pl-t { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.pl.tap:focus-visible { outline: none; }
.pl.tap:focus-visible .pl-t { outline: 3px solid var(--sun); outline-offset: 0; }
.rd-stem { margin: 0; font-size: 1.1rem; line-height: 1.55; text-wrap: pretty; }
.rd-ref { font: inherit; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rd-ref:hover { text-decoration-style: solid; }
.rd-q { display: grid; gap: 12px; }
.rd-opts .qopt { font-size: 1rem; line-height: 1.45; display: grid; grid-template-columns: auto 1fr; align-items: baseline; }
.rd-h { margin: 0; font-size: 1.5rem; }
.rd-list .rd-type { font-weight: 700; }
.rd-list li { grid-template-columns: 2em 1fr auto; }
.rd-list .tp { grid-column: 3; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rd-list li.yes { background: var(--page); }
.rd-next { font-size: 1.05rem; }
.rd-find p b { font-weight: 700; }
.feedback .rd-found, .feedback .rd-trap { margin-top: 6px; }
.rd-trap { display: block; }
.rd-tag { display: inline-block; margin-right: 4px; padding: 1px 9px; border-radius: 99px; background: var(--card); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--card)); color: var(--bad); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.rd-why { margin-top: 6px; }
.rd-proof { display: grid; gap: 6px; }
.rd-proof .kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rd-proof .rd-ref { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; }
.rd-excerpt { display: grid; gap: 8px; padding: 8px 4px; margin-inline: -4px; font: 16px/1.75 var(--body); overflow-x: auto; }
/* The bar under the passage on a phone: back to the questions, or the tap-to-prove prompt. */
.rd-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }
.rd-foot p { margin: 0; flex: 1 1 180px; font-weight: 700; }
.rd-foot:empty { display: none; }
.rd-tabs { max-width: none; margin: 0; grid-template-columns: 1fr 1fr; }
/* A phone: one view at a time. */
@media (max-width: 859px) {
  .rd-body[data-view="question"] .rd-passage, .rd-body[data-view="passage"] .rd-side { display: none; }
  .rd-wide-only { display: none; }
  .rd-passage.tapping .pl-t { background-image: linear-gradient(to top, color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1px); }
}
/* A wide screen: the passage on the left as the page scrolls, the questions beside it. */
@media (min-width: 860px) {
  .rd-tabs, .rd-foot, .rd-phone-only, .rd-proof { display: none !important; }
  .rd-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 32px; align-items: start; }
  .rd-passage { padding-right: 28px; border-right: 1px solid var(--line); }
  .rd-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 2px; }
}
/* Small card padding on a phone, so the passage's widest line fits at 360px. */
@media (max-width: 560px) { .qcard.readcard { padding: 12px; } }
@media (max-width: 380px) { .qcard.readcard { padding: 10px 8px; } .rd-foot { margin-inline: -8px; margin-bottom: -10px; padding-inline: 8px; } .pl { grid-template-columns: 22px 1fr; column-gap: 6px; } }
/* The review sheet (scripts/review-passages.mjs): every question listed beside the passage. */
.rd.sheet .rd-side { position: static; max-height: none; display: grid; gap: 28px; }
.rd.sheet .rd-opts .qopt { display: block; }
.wp-stem.still { padding-right: 0; }