/* Murmur — "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 Murmur 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: #0d1117;          /* cabin night, blue-black */
  --bg2: #121923;
  --panel: #161f2b;
  --panel2: #1c2735;
  --line: #263446;
  --fg: #eef1f5;
  --muted: var(--mm-muted-dark);
  --dim: #5f6e82;
  --accent: var(--mm-amber);           /* amber 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: #4fd1c5;        /* listening */
  --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: #eef1f7; --bg2: #dfe6f3; --panel: #ffffff; --panel2: #f3f6fb; --line: #cfd8e6; --fg: #0f1722; --muted: #4a5568; --dim: #7a8699; --accent: var(--mm-amber-strong); --accent-ink: var(--mm-amber-ink); --teal: #0d9488; --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: #eef1f7; --bg2: #dfe6f3; --panel: #ffffff; --panel2: #f3f6fb; --line: #cfd8e6; --fg: #0f1722; --muted: #4a5568; --dim: #7a8699; --accent: var(--mm-amber-strong); --accent-ink: var(--mm-amber-ink); --teal: #0d9488; --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: radial-gradient(120% 60% at 50% -10%, var(--bg2), var(--bg) 60%) fixed, 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; }
.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; }
.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(23px, 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) 40%, 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) 72%, transparent); }
.spoken .w.past { color: color-mix(in srgb, var(--fg) 88%, 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; }

@media (prefers-reduced-motion: no-preference) {
  .status.listen::before { animation: pulse 1.1s ease-in-out infinite; }
  @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); }

/* ---- Murmur name + Signalcraft umbrella ---- */
h1 .tag { display: block; font: 600 .62em/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #ffb547); }
/* Murmur is the product; the company and creator are quieter secondary credits. */
.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; }
.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: #080e18b8; backdrop-filter: blur(5px); }
.audio-setup-heading img { display: block; margin-bottom: 18px; }
.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: #080e18b8; 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: #080e18b8; 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:#58c990; }
@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 Murmur'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}