/* Kelmint Voice — "instrument cluster" UI.
   Layout: one column; glanceable type; every control a big target in the bottom third, reachable while the phone is mounted. */
:root {
  /* Shared Kelmint palette and scale: murmur-tokens.css (loaded first). */
  /* Minimum touch target (master plan rule 4). One value for every control. */
  --touch: var(--mm-touch);
  --bg: #0b1714;          /* cabin night, deep spruce */
  --bg2: #10221e;
  --panel: #132823;
  --panel2: #18312b;
  --line: #24403a;
  --fg: #eef3ef;
  --muted: var(--mm-muted-dark);
  --dim: #6b8a80;
  --accent: var(--mm-amber);           /* sea-glass gauge needle */
  --accent-ink: var(--mm-amber-ink);
  --accent-text: var(--mm-amber);      /* accent used as text; darker in light mode for WCAG AA */
  --teal: #f2c46d;        /* listening: warm gold, distinct from the sea-glass accent (name kept) */
  --good: var(--mm-good-dark);
  --bad: var(--mm-bad-dark);
  --digi: #a78bfa; --eltr: #fb923c; --math: #60a5fa; --efab: #f472b6; --mix: #8fd3c1; --focus: var(--mm-amber);
  --display: 'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font: var(--mm-font-ui);
  --r: 18px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #faf8f2; --bg2: #efece2; --panel: #ffffff; --panel2: #f5f3ec; --line: #dcd8cb; --fg: #13241f; --muted: var(--mm-muted-light); --dim: #7b8a84; --accent: var(--mm-amber-strong); --accent-ink: var(--mm-amber-strong-ink); --teal: #8a5a00; --digi: #7c3aed; --eltr: #ea580c; --math: #2563eb; --efab: #db2777; --mix: #0d9488; --focus: var(--mm-amber-strong); --accent-text: var(--mm-amber-text); --good: var(--mm-good-light); --bad: var(--mm-bad-light); color-scheme: light; }
}
:root[data-theme="light"] { --bg: #faf8f2; --bg2: #efece2; --panel: #ffffff; --panel2: #f5f3ec; --line: #dcd8cb; --fg: #13241f; --muted: var(--mm-muted-light); --dim: #7b8a84; --accent: var(--mm-amber-strong); --accent-ink: var(--mm-amber-strong-ink); --teal: #8a5a00; --digi: #7c3aed; --eltr: #ea580c; --math: #2563eb; --efab: #db2777; --mix: #0d9488; --focus: var(--mm-amber-strong); --accent-text: var(--mm-amber-text); --good: var(--mm-good-light); --bad: var(--mm-bad-light); color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 18px; line-height: 1.4;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); -webkit-tap-highlight-color: transparent; }
/* Scrolling. The cabin gradient sits on its own fixed layer, painted once. As a
   "fixed" body background it forced Chrome to scroll on the main thread and
   repaint the whole screen every frame, so any background work (saving or
   uploading test data, loading voice packs) made scrolling stutter. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, var(--bg2), var(--bg) 60%); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; scroll-behavior: auto; }
/* Inner scrollers keep their momentum to themselves instead of dragging the page
   when they reach an end, and scroll with native momentum on every engine. */
.picklist, .stage, .spoken, dialog, .app-update-terms { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Press feedback on touch screens: a quick, subtle settle, never on hover. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .btn, .start, .iconbtn, .opt, .course, .voicechip { transition: transform .14s cubic-bezier(.2, .8, .2, 1), background-color .14s; }
  .btn:active, .start:active:not(:disabled), .iconbtn:active, .opt:active, .course:active, .voicechip:active:not(:disabled) { transform: scale(.97); }
}
.screen { min-height: 100%; padding: 14px 16px 28px; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 6vw, 26px); margin: 0; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
h2.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 6px 0 8px; font-weight: 700; }
.sub, .hint { color: var(--muted); margin: 2px 0 0; font-size: 15px; }
.center { text-align: center; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
svg { width: 26px; height: 26px; fill: currentColor; }
a { color: var(--accent-text); }

/* app bar */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { display: block; flex: none; }
/* The Kelmint wordmark is the supplied artwork (inline paths, currentColor), never typed;
   its artboard carries the guide's clear space, offset here so the letters align. The
   guide's minimum width is 176 px. */
.brand-wordmark { display: block; width: 184px; height: auto; color: var(--fg); margin: -8px 0 -4px -7px; }
.iconbtn { width: 46px; height: 46px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.voicechip { align-self: flex-start; min-height: var(--touch); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
.voicechip:disabled { cursor: default; color: var(--muted); border-color: var(--line); background: transparent; }

/* resume card */
.resume { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.resume-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; }
.resume-meta b { font-family: var(--display); font-size: 21px; line-height: 1.15; }
.resume-meta small { color: var(--muted); font-size: 14px; }
.bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.resume-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.primary, .ghost { border-radius: 14px; padding: 14px; font-size: 18px; font-weight: 700; border: 1px solid transparent; }
.primary { background: var(--accent); color: var(--accent-ink); }
.ghost { background: transparent; border-color: var(--line); color: var(--fg); }

/* segmented controls */
.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.segbtn { flex: 1; background: transparent; border: 0; color: var(--muted); font-size: 16px; font-weight: 700; padding: 8px 4px; border-radius: 10px; min-width: 0; min-height: var(--touch); }
.seg.big .segbtn { font-size: 18px; padding: 13px 6px; }
.segbtn.on { background: var(--fg); color: var(--bg); }

/* course tiles */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.course { position: relative; border: 1.5px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--panel)), var(--panel) 70%); border-radius: 16px; padding: 14px 44px 14px 14px; text-align: left; min-height: 78px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.course b { font-family: var(--display); font-size: 18px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.course b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.course small { color: var(--muted); font-size: 13px; line-height: 1.25; }
.course.on { border-color: var(--c); border-width: 2.5px; background: color-mix(in srgb, var(--c) 26%, var(--panel)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 28%, transparent); }
.ring { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 7px, #000 8px); mask: radial-gradient(circle, transparent 7px, #000 8px); }

.picklist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 6px; background: var(--panel); }
.pick { background: transparent; border: 0; text-align: left; padding: 12px 10px; border-radius: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 16px; }
.pick.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pick small { color: var(--muted); white-space: nowrap; }
.pick.locked { opacity: .45; }

.startwrap { display: flex; flex-direction: column; gap: 8px; }
.start { background: var(--accent); color: var(--accent-ink); border: 0; font-family: var(--display); font-size: 24px; font-weight: 800; padding: 20px; border-radius: 20px; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent); }
.start:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.stat b { display: block; font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums; }
.stat small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.weak { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.weak a, .weak span { color: var(--fg); text-decoration: none; display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.weak small { color: var(--muted); }

/* ---------- session ---------- */
.session { gap: 10px; padding-bottom: 8px; height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 0; }
.sessbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip { background: var(--panel); border: 1.5px solid var(--line); padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip.ghost { color: var(--muted); font-variant-numeric: tabular-nums; }
.status { color: var(--accent-text); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status.listen { color: var(--teal); }
.status.paused { color: var(--muted); }
/* The answer buttons cannot shrink; with three long options on a phone the stage
   used to run under the control bar and hide option 3. The spoken text gives up
   height first, and the stage scrolls as a last resort, so every option stays reachable. */
.stage { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.stage > .options, .stage > .kicker, .stage > .heard { flex-shrink: 0; }
.kicker { margin: 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.spoken { flex: 1; min-height: 72px; overflow-y: auto; font-size: clamp(24px, 5.6vw, 31px); line-height: 1.45; scroll-behavior: auto;
  -webkit-mask: linear-gradient(transparent 0, #000 7%, #000 88%, transparent 100%); mask: linear-gradient(transparent 0, #000 7%, #000 88%, transparent 100%); padding: 14px 2px 0; }
/* Room for the last line to scroll up to reading height. A spacer, not padding:
   padding counts toward the box itself and kept it at least 40vh tall. */
.spoken::after { content: ""; display: block; height: 40vh; }
.spoken .w { color: color-mix(in srgb, var(--fg) 55%, transparent); transition: color .25s ease, background-color .25s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 2px 0; }
.spoken .w.s { color: color-mix(in srgb, var(--fg) 78%, transparent); }
.spoken .w.past { color: color-mix(in srgb, var(--fg) 90%, transparent); }
.spoken .w.now { color: var(--fg); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.heard { margin: 0; color: var(--teal); font-size: 15px; min-height: 1.4em; }
.options { display: grid; gap: 8px; }
.opt { background: var(--panel); border: 2px solid var(--line); font-size: 19px; text-align: left; padding: 14px; border-radius: 14px; display: flex; gap: 12px; align-items: center; }
.opt em { font-style: normal; font-weight: 700; color: var(--accent-text); min-width: 1.3em; font-family: var(--display); }
.opt.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--panel)); }
.opt.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); }
.opt.wide { justify-content: center; font-weight: 700; }

.controls { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.controls .row { display: grid; gap: 8px; }
.controls .row.help { grid-template-columns: repeat(3, 1fr); }
.controls .row.main { grid-template-columns: 1fr 1.35fr 1fr 1fr; }
.ctl { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; min-width: 0; }
.ctl svg { width: 30px; height: 30px; }
.ctl span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.ctl.soft { min-height: 58px; flex-direction: row; gap: 8px; background: var(--panel2); }
.ctl.soft svg { width: 22px; height: 22px; }
.ctl.soft span { font-size: 14px; color: var(--fg); text-transform: none; letter-spacing: 0; }
.ctl.accent { border-color: color-mix(in srgb, var(--teal) 60%, var(--line)); }
.ctl.accent svg { color: var(--teal); }
.ctl.hero { background: var(--accent); color: var(--accent-ink); border-color: transparent; min-height: 84px; }
.ctl.hero span { color: var(--accent-ink); }
.ctl.hero svg { width: 36px; height: 36px; }
.ctl.hero.on { background: var(--teal); }
.ctl.danger svg { color: var(--bad); }
.ctl:active { transform: scale(.97); }

/* ---------- settings ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.form label.row { flex-direction: row; align-items: center; gap: 10px; color: var(--fg); }
.form input[type=text], .form input[type=password], .form select { font: inherit; font-size: 17px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px; width: 100%; min-width: 0; }
.form input[type=range] { width: 100%; height: var(--touch); accent-color: var(--accent); }
.form input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
.form output { color: var(--fg); }
.statusrow { display: flex; flex-direction: column; gap: 2px; }
.statusrow small { color: var(--muted); font-size: 14px; }
.meter { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; flex-wrap: wrap; }
.btn { background: var(--bg); border: 1px solid var(--line); font-size: 16px; font-weight: 700; padding: 12px 14px; border-radius: 12px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .5; }
.keyrow { display: flex; flex-direction: column; gap: 6px; }
.keyhead { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.keyhead .n { width: 22px; height: 22px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.keyhead a { margin-left: auto; font-size: 14px; display: inline-flex; align-items: center; min-height: var(--touch); }
.keystatus { display: flex; flex-direction: column; gap: 6px; }
.kst { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--line); }
.kst span { color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kst.ok { border-left-color: var(--good); } .kst.bad { border-left-color: var(--bad); } .kst.off { opacity: .6; }

/* summary */
.summary-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.summary-list li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 16px; border-left: 4px solid var(--line); }
.summary-list li.bad { border-left-color: var(--bad); }
.summary-list li.good { border-left-color: var(--good); }
.summary-list small { color: var(--muted); display: block; }

.status.think { color: var(--muted); }
.status.think::after { content: "…"; letter-spacing: .05em; }
@media (prefers-reduced-motion: no-preference) {
  .status.listen::before { animation: pulse 1.1s ease-in-out infinite; }
  .status.think::before { animation: think 1.4s ease-in-out infinite; }
  .status.think::after { content: ""; width: 1.2em; height: 1em; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / .4em 100% repeat-x; animation: dots 1.2s steps(4) infinite; clip-path: inset(0 100% 0 0); }
  @keyframes think { 50% { opacity: .35; } }
  @keyframes dots { to { clip-path: inset(0 -.1em 0 0); } }
  @keyframes pulse { 50% { opacity: .3; transform: scale(1.4); } }
}
@media (min-width: 560px) { .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-height: 700px) { .ctl { min-height: 60px; } .ctl.hero { min-height: 68px; } .ctl.soft { min-height: 48px; } }

/* microphone settings */
.permrow { display: flex; gap: 12px; align-items: flex-start; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dim); margin-top: 5px; flex: none; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 25%, transparent); }
.dot.ask { background: var(--accent); }
.help { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.help summary { cursor: pointer; font-weight: 700; }
.help ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--fg); }
.levelwrap { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.level { flex: 1; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.level i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--good) 60%, var(--accent)); transition: width .08s linear; }

.spoken[data-hl="word"] .w.now { background: var(--accent); color: var(--accent-ink); }
.spoken[data-hl="off"] .w { color: var(--fg); }

/* ---- Kelmint Voice name + Kelmint Learning credit ---- */
h1 .tag { display: block; font: 600 .62em/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
/* Kelmint Voice is the product; the company is a quieter secondary credit (small K, 18 px). */
.sc-badge { display: block; width: 18px; height: 18px; flex: none; }
.sc-foot { display: flex; justify-content: center; padding: 10px 0 20px; }
.sc-foot a { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; min-height: 44px; color: var(--muted); text-decoration: none; }
.sc-name { font-size: 12px; letter-spacing: -.01em; white-space: nowrap; }
.sc-name b { font-weight: 650; }
.sc-name i { font-style: normal; font-weight: 400; }
.sc-creator { font-size: 10px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.sc-about { display: flex; gap: 12px; align-items: flex-start; }
.about-product-icon { flex: none; border-radius: 10px; }
.about-product-name { margin: 0; font: 750 26px/1.2 var(--display); letter-spacing: -.025em; }
.about-product-tag { margin: 4px 0 10px; font-size: 12px; color: var(--muted); }
.sc-about-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0; color: var(--muted); }

/* Shared learning: follow the existing single-column cards and large phone controls. */
.adaptive-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 12px 0; }
.adaptive-card h3 { font: 700 1.05rem/1.35 var(--font); margin: 0 0 8px; }
.adaptive-card p { color: var(--muted); font-size: .94rem; line-height: 1.5; margin: 8px 0; }
.adaptive-card small { display: block; color: var(--muted); margin: 8px 0 12px; }
.adaptive-card .btn { min-height: 48px; width: 100%; }
.adaptive-evidence { color: var(--muted); font-size: .9rem; line-height: 1.55; padding: 8px 0; }
.adaptive-evidence summary { color: var(--fg); cursor: pointer; min-height: var(--touch); display: list-item; align-content: center; }

/* Settings: clear sections, usable selects, compact disclosure of advanced controls. */
#settings { max-width: 760px; gap: 18px; }
.settings-header { padding: 12px 2px 6px; align-items: flex-start; }
.settings-header h1 { margin: 7px 0; font-size: 32px; }
#settings .card { padding: 22px; box-shadow: 0 8px 26px #0000000b; }
.settings-section-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 5px; }
.settings-section-title h2 { font: 700 21px/1.2 var(--display); margin: 0; letter-spacing: -.02em; }
.settings-section-title p { font-size: 14px; color: var(--muted); margin: 5px 0 0; }
.settings-number { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 10px; font-size: 12px; font-weight: 700; }
#settings .form > .hint { line-height: 1.6; }
#settings .form select { appearance: none; padding: 13px 40px 13px 14px; min-height: 50px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2393a1b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
#settings select:hover, #settings input[type=text]:hover, #settings input[type=password]:hover { border-color: var(--muted); }
#settings select:focus, #settings input:focus { border-color: var(--accent); }
#settings select option { background: var(--panel); color: var(--fg); }
#settings .help { line-height: 1.5; padding: 12px 14px; }
#settings .help summary { min-height: var(--touch); display: list-item; align-content: center; }
#settings .help[open] > :not(summary) { margin-top: 12px; }
#settings .form label.row { padding: 5px 0; line-height: 1.4; min-height: var(--touch); }
#settings .form label.row input { flex: none; }
#settings .btn { min-height: var(--touch); }
.btn.quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn.quiet:hover { background: var(--panel2); color: var(--fg); }
.audio-pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.audio-pack { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: color-mix(in srgb, var(--panel2) 55%, transparent); }
.audio-pack b { font-size: 16px; }
.audio-pack small { color: var(--muted); font-size: 13px; }
.audio-pack > span:last-child { color: var(--muted); font-size: 12px; margin-top: 4px; }
.audio-pack .audio-pack-icon { font-size: 26px; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.audio-status { min-height: 2.8em; line-height: 1.5; }
.audio-status.has-error { color: var(--bad); }
.audio-progress { width: 100%; height: 8px; border: 0; border-radius: 9px; overflow: hidden; appearance: none; background: var(--line); accent-color: var(--accent); }
.audio-progress::-webkit-progress-bar { background: var(--line); border-radius: 9px; }
.audio-progress::-webkit-progress-value { background: var(--accent); border-radius: 9px; }
.audio-progress::-moz-progress-bar { background: var(--accent); border-radius: 9px; }
.settings-note { margin: 0; padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border-left: 3px solid var(--accent); color: var(--muted); font-size: 13px; line-height: 1.6; }
#keyRows { display: flex; flex-direction: column; gap: 12px; }
.ai-slot { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-slot-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--muted); }
.ai-slot-head .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--panel2); color: var(--accent-text); }
.ai-slot-body { display: flex; flex-direction: column; gap: 9px; }
.ai-slot-body a { font-size: 13px; }
.ai-slot-body input { background: var(--panel)!important; }
#aiChainStatus { font-size: 14px; line-height: 1.5; color: var(--muted); }
.audio-setup-dialog { width: min(540px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 26px; border-radius: 26px; color: var(--fg); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 25px 90px #0008; overflow: auto; }
.audio-setup-dialog::backdrop { background: #06110eb8; backdrop-filter: blur(5px); }
.audio-setup-heading img { display: block; margin-bottom: 18px; border-radius: 13px; }
.audio-setup-heading h2 { font: 800 clamp(29px,6vw,37px)/1.07 var(--display); letter-spacing: -.035em; margin: 10px 0 14px; }
.audio-setup-heading p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 0 19px; }
.audio-setup-dialog > .hint { margin: 14px 0; font-size: 13px; line-height: 1.6; }
.audio-setup-dialog .audio-pack { padding: 13px; }
.audio-setup-actions { display: grid; gap: 6px; margin-top: 15px; }
.audio-setup-actions .btn { min-height: 49px; }
.audio-setup-foot { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
@media(max-width:420px) { #settings .card { padding: 17px; } .settings-section-title h2 { font-size: 19px; } .audio-setup-dialog { padding: 21px; } .audio-pack { padding: 12px; } .audio-pack b { font-size: 15px; } }
.ai-paid-gate, .ai-backup { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--panel2); }
.ai-paid-gate .hint { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.ai-paid-gate label.row { font-weight: 700; }
#settings #paidAIEnabled { appearance: none; position: relative; width: 44px; height: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; margin: 0; }
#settings #paidAIEnabled::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: var(--muted); }
#settings #paidAIEnabled:checked { background: var(--accent); border-color: var(--accent); }
#settings #paidAIEnabled:checked::before { left: 21px; background: var(--accent-ink); }
.ai-slot .keyhead { flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.workbench-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--fg); }
.workbench-link span { color: var(--accent-text); }
.audio-recovery { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.audio-recovery > summary { min-height: var(--touch); display: flex; align-items: center; cursor: pointer; }
.audio-recovery > :not(summary) { margin-top: 12px; }
.audio-recovery select { display: block; width: 100%; margin-top: 6px; padding: 11px; min-height: 46px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.audio-recovery label { display: block; color: var(--muted); }
.audio-setup-dialog .audio-setup-actions .btn { width: 100%; }

.audio-pack > span[data-state="ready"] { color: var(--good); }
.audio-pack > span[data-state="failed"] { color: var(--bad); }
.audio-pack > span[data-state="loading"] { color: var(--accent-text); }
.audio-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#settings .audio-secondary-actions .btn { min-height: var(--touch); padding: 9px 6px; font-size: 14px; }

#audioRecoveryStatus { white-space: pre-line; overflow-wrap: anywhere; }

.paid-confirm-dialog { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 25px; border-radius: 22px; color: var(--fg); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 25px 90px #0008; overflow: auto; }
.paid-confirm-dialog::backdrop { background: #06110eb8; backdrop-filter: blur(5px); }
.paid-confirm-dialog h2 { margin: 12px 0; font: 700 27px/1.15 var(--display); letter-spacing: -.025em; }
.paid-confirm-dialog p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.paid-confirm-dialog .settings-note { font-size: 13px; }
.paid-confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-top: 22px; }
.paid-confirm-actions .btn { min-height: 48px; }

/* SVGs share the same local geometry; their exterior remains transparent. */
.sc-foot .sc-badge,
.sc-about .sc-badge {
  object-fit: contain;
}
.sc-foot a {
  opacity: 1;
  color: var(--muted);
  font-size: .76rem;
}
.sc-foot a:hover { color: var(--fg); }

/* Update consent is release-specific; keep the text readable on narrow phones. */
.app-update-dialog { width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 25px; border-radius: 22px; color: var(--fg); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 25px 90px #0008; overflow: auto; }
.app-update-dialog::backdrop { background: #06110eb8; backdrop-filter: blur(5px); }
.app-update-dialog h2 { margin: 12px 0; font: 700 27px/1.15 var(--display); letter-spacing: -.025em; }
.app-update-dialog p, .app-update-dialog li { line-height: 1.6; }
.app-update-dialog ul { padding-left: 20px; }
.app-update-terms { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 14px; font: inherit; font-size: 14px; }
.app-update-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin: 18px 0 10px; }
.app-update-actions .btn { min-height: 48px; white-space: normal; }
.app-update-build { font-size: 11px; overflow-wrap: anywhere; }

/* Update feedback remains legible without animation or colour perception. */
.update-check-icon { display:inline-flex; width:1.1em; height:1.1em; margin-right:.45em; vertical-align:middle; }
.update-check-icon svg { width:100%; height:100%; }
.update-check-icon.spinning { animation:update-check-turn .7s linear infinite; }
.update-check-icon.ready { color:var(--good); }
@keyframes update-check-turn { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .update-check-icon.spinning { animation:none; opacity:.65; } }

/* Shared modules (account panel, bug reports, study plan) ship neutral styles of
   their own. Bind their tokens to Kelmint's theme here so they follow the phone's
   light/dark scheme and use the same controls as the rest of the app. */
.murmur-account { --ma-text: var(--fg); --ma-muted: var(--muted); --ma-line: var(--line); --ma-accent: var(--accent); background: var(--panel); }
.murmur-account .ma-button { background: var(--panel2); border-color: var(--line); color: var(--fg); }
.murmur-account .ma-button:hover { background: var(--bg2); }
.murmur-account .ma-button.ma-primary, .murmur-account .ma-button[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.murmur-account input:not([type=checkbox]) { background: var(--bg); border-color: var(--line); color: var(--fg); }
.murmur-account .ma-status { background: var(--panel2); }
.bug-report-dialog { background: var(--panel); color: var(--fg); border-color: var(--line); }
.bug-report-dialog textarea { background: var(--bg); color: var(--fg); border-color: var(--line); }
.bug-report-actions button { background: var(--panel2); color: var(--fg); border-color: var(--line); }
.bug-report-actions button:last-child { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#planScreen .appbar button, .murmur-plan button { background: var(--panel); border: 1px solid var(--line); color: var(--fg); font: inherit; font-size: 16px; font-weight: 700; padding: 12px 14px; border-radius: 12px; }
.murmur-plan article { background: var(--panel); border-color: var(--line); }
.murmur-plan input[type=number], .murmur-plan select { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; }

/* Testing mode (phone-diagnostics.js): the tester dialog reuses the confirmation
   dialog shell and adds stacked fields. */
.diag-dialog label { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; font-weight: 700; }
.diag-dialog input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-height: 48px; }

/* Touch height for checkbox rows that shared modules render into Settings
   (bug-report-view.css is byte-identical across apps, so sized here). */
#settings label:has(> input[type=checkbox]) { min-height: var(--touch); display: flex; align-items: center; gap: 10px; }
/* The selected course card is tinted with its course colour; muted grey on that
   tint falls below 4.5:1, so the subtitle uses the full text colour. */
.course.on small { color: var(--fg); }
/* Hidden tester mode in Settings › Account & sync (phone-diagnostics.js). */
.version-line{margin:14px 0 0}.version-tap{border:0;background:none;color:inherit;opacity:.7;font:inherit;font-size:.82rem;padding:10px 0;min-height:44px;cursor:default}.tester-area{margin-top:10px;padding:16px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:14px}.tester-area h3{margin:0 0 8px}.tester-area label{display:grid;gap:6px;margin:10px 0}.tester-area .tester-switch{display:flex;align-items:center;gap:10px;font-weight:600}.tester-on-note{font-weight:600}
/* Short status note (UI.toast) */
#toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,20px);max-width:min(92vw,520px);margin:0;padding:12px 16px;border-radius:14px;background:#17342e;color:#eef3ef;font-size:.95rem;line-height:1.4;box-shadow:0 10px 30px #0008;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1000}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* Session menu button, paused session card and lectures in progress */
.menu-chip{cursor:pointer;font:inherit;font-weight:700}
.nowplaying{border-color:var(--accent)}
.paused-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.paused-item{display:grid;gap:2px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card,transparent);color:inherit;font:inherit;cursor:pointer;min-height:56px}
.paused-item small{opacity:.75}
.menu-chip{min-height:44px;padding:0 14px}
/* Optional faster wake word (Settings › Microphone & listening). */
.wake-pack { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.wake-pack[hidden] { display: none; }

/* Offer to move to the new address (site-move.js), shown only on the old address. */
.kelmint-move { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.kelmint-move p { margin: 0 0 10px; font-size: 15px; color: var(--fg); }
.kelmint-move-button { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }