/* App layout and screen styles. Layout follows M3 window size classes:
   compact (<600) → navigation bar; medium/expanded (≥600) → navigation rail. */

.view { min-height: 100dvh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); outline: none; }
.view.enter > * { animation: fade-through var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes fade-through { from { opacity: 0; transform: scale(0.98); } }
body.immersive .m3-nav-bar, body.immersive .m3-nav-rail { display: none; }
body.immersive .view { padding-bottom: 0; }
body.immersive .m3-snackbar-host { bottom: calc(88px + env(safe-area-inset-bottom)); }

@media (min-width: 600px) {
  .m3-nav-bar { display: none; }
  .m3-nav-rail { display: flex; }
  body:not(.immersive) .view { margin-left: 80px; padding-bottom: 24px; }
  body:not(.immersive) .m3-snackbar-host { bottom: 24px; left: 80px; }
}

.screen { min-height: 100dvh; }
.content-pad { padding: 8px 16px 24px; max-width: 840px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.muted { color: var(--md-sys-color-on-surface-variant); }
.primary-text { color: var(--md-sys-color-primary); }
.deva { font-family: var(--bh-typeface-deva); }
.script-jp { font-family: var(--bh-typeface-jp); }
.bar-title { display: flex; flex-direction: column; line-height: 1.15; }
.bar-title > :first-child { font: var(--md-sys-typescale-title-large); }

.avatar-sm { width: 32px; height: 32px; font: var(--md-sys-typescale-label-large); }
.avatar-lg { width: 56px; height: 56px; font: var(--md-sys-typescale-title-large); border-radius: var(--md-sys-shape-corner-large); }
.avatar-neutral { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.avatar-secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.avatar-tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.cp-content { position: absolute; inset: 0; display: grid; place-items: center; color: var(--md-sys-color-on-surface); }

.screen-fab { position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 15; }
body.immersive .screen-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .screen-fab { bottom: 24px !important; right: 24px; } }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; }
.empty-state h2, .empty-state p { margin: 0; max-width: 420px; }
.empty-icon { width: 80px; height: 80px; border-radius: var(--md-sys-shape-corner-extra-large); display: grid; place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---------- Welcome ---------- */
.welcome { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(120% 60% at 50% 0%, var(--md-sys-color-primary-container) 0%, transparent 60%), var(--md-sys-color-surface); }
.welcome-inner { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.welcome-inner > h1, .welcome-inner > p { margin: 0; }
.welcome-logo { width: min(220px, 60vw); aspect-ratio: 1; margin-bottom: -8px; }
.ui-lang-q { margin: 24px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.ui-lang-q p { margin: 0; }
.ui-lang-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; margin-top: 8px; }
.ui-lang-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; min-height: 120px; text-align: start; font: inherit; border-radius: var(--md-sys-shape-corner-extra-large); }
.ui-lang-card > .icon { margin-top: auto; align-self: flex-end; color: var(--md-sys-color-primary); }
.welcome-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brand-title { color: var(--md-sys-color-on-surface); line-height: 1.4; }
.tagline { max-width: 420px; margin: 8px 0 16px !important; }
.demo-card { width: 100%; padding: 20px; text-align: start; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; border-radius: var(--md-sys-shape-corner-extra-large); }
.demo-row { display: flex; flex-direction: column; margin-bottom: 8px; }
.demo-latin { font: var(--md-sys-typescale-headline-small); text-decoration: line-through; text-decoration-color: var(--md-sys-color-error); text-decoration-thickness: 2px; opacity: 0.85; }
.demo-deva { font-size: 32px; line-height: 1.6; color: var(--md-sys-color-primary); font-weight: 600; }
.demo-points { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.demo-point { display: flex; gap: 12px; align-items: center; }
.demo-point .icon { color: var(--md-sys-color-primary); }
.lang-list { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 16px; }
.lang-card { display: flex; align-items: center; gap: 16px; padding: 16px; text-align: start; width: 100%; font: inherit; }
.lang-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lang-sample { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.sample-deva { color: var(--md-sys-color-primary); font-weight: 600; }

/* ---------- Learn ---------- */
.streak-chip { gap: 4px; padding: 0 12px; }
.streak-chip .icon { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.streak-chip.lit .icon { color: var(--md-sys-color-primary); }
.hero { padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; flex-direction: column; gap: 4px; }
.hero h2, .hero p { margin: 0; }
.hero-overline { opacity: 0.85; }
.hero-goal { margin: 8px 0 16px !important; }
.hero .linear-progress .track { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 18%, transparent); }
.hero .linear-progress .active, .hero .linear-progress .track::after { background: var(--md-sys-color-on-primary-container); }
.hero-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.hero-actions .btn-text { color: var(--md-sys-color-on-primary-container); }
.review-banner { display: flex; align-items: center; gap: 16px; padding: 16px; }
.review-banner .content { flex: 1; display: flex; flex-direction: column; }
.unit .subheader { padding-inline: 4px; }
.unit-t { font-weight: 400; }
.chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chapter-card { display: flex; align-items: center; gap: 16px; padding: 16px; }
.chapter-card .content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.why-card { padding: 16px 16px 8px; }
.why-card p { margin: 8px 0; }
.why-head { display: flex; align-items: center; gap: 12px; }
.why-head .icon { color: var(--md-sys-color-tertiary); }

/* ---------- Chapter ---------- */
.chapter-header { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; }
.chapter-header h1 { margin: 4px 0 0; }
.goal-chip { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.steps-card { padding: 8px 0; border-radius: var(--md-sys-shape-corner-extra-large); }
.steps-card .list-item { padding-inline: 20px; }
.phrase-preview .supporting.deva { color: var(--md-sys-color-primary); font-size: 15px; }

/* ---------- Phrase (the Mango-style colour-linked view) ---------- */
.phrase { display: flex; flex-direction: column; gap: 6px; }
.ph-target { font: var(--md-sys-typescale-headline-medium); display: flex; flex-wrap: wrap; align-items: baseline; }
.ph-target.script-latin { column-gap: 0; }
.ph-word { background: none; border: none; padding: 0 2px; margin: 0 -2px; font: inherit; border-radius: var(--md-sys-shape-corner-small); color: inherit; }
.ph-word:not(:last-child) { margin-right: 0.25em; }
.script-jp .ph-word:not(:last-child) { margin-right: 0; }
.ph-deva { font-family: var(--bh-typeface-deva); font-size: 28px; line-height: 1.55; font-weight: 600; }
.ph-en { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface-variant); }
.ph-eword { font-weight: 600; }
.ph-lit { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); font-style: italic; }
.ph-lit .md-label-medium { font-style: normal; text-transform: uppercase; letter-spacing: 0.8px; }
.phrase-small .ph-target { font: var(--md-sys-typescale-title-large); }
.phrase-small .ph-deva { font-size: 19px; line-height: 1.5; }
.phrase-small .ph-en { font: var(--md-sys-typescale-body-medium); }
.syl-sep { color: var(--md-sys-color-outline); font-weight: 400; margin: 0 1px; }
.stress { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.special { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 7px; }

/* ---------- Lesson / quiz shell ---------- */
.lesson { display: flex; flex-direction: column; min-height: 100dvh; }
.lesson-progress { padding-right: 8px; }
.counter { padding: 0 12px; }
.lesson-stage { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 16px 20px 24px; }
.slide { display: flex; flex-direction: column; gap: 16px; }
.slide > p { margin: 0; }
.slide.from-right { animation: slide-x var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); --dx: 32px; }
.slide.from-left { animation: slide-x var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); --dx: -32px; }
@keyframes slide-x { from { opacity: 0; transform: translateX(var(--dx)); } }
.slide-label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lesson-footer, .quiz-footer {
  position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--md-sys-color-surface-container);
}
.lesson-footer { justify-content: space-between; }
.phrase-block { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-low); }
.phrase-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.play-main { width: 64px; height: 64px; border-radius: var(--md-sys-shape-corner-large); }
.play-main .icon { font-size: 32px; }
.note-card { padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.note-card.note-culture { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.note-card.note-pronunciation { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.note-card h2 { margin: 16px 0 8px; }
.note-card p { margin: 0; }
.note-head { display: flex; align-items: center; gap: 12px; }
.note-head .avatar { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.mini-phrase { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: start; font: inherit; width: 100%; }
.mini-phrase .icon { color: var(--md-sys-color-primary); }
.recall-prompt { margin: 0; padding: 20px 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.recall-hint { display: flex; align-items: center; gap: 8px; }
.reveal { animation: slide-x var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); --dx: 0; }
.done-slide { align-items: center; text-align: center; padding-top: 32px; }
.done-slide h2, .done-slide p { margin: 0; }
.done-badge { width: 112px; height: 112px; display: grid; place-items: center; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); animation: pop var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate); }
@keyframes pop { from { transform: scale(0.5) rotate(-20deg); opacity: 0; } }
.word-sheet { padding: 8px 24px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.word-target { font: var(--md-sys-typescale-display-small); }
.word-deva { font-size: 34px; line-height: 1.6; font-weight: 600; color: var(--md-sys-color-primary); }

/* ---------- Quiz ---------- */
.options { display: flex; flex-direction: column; gap: 12px; }
.option { min-height: 56px; padding: 14px 20px; text-align: start; font: var(--md-sys-typescale-title-medium); display: flex; align-items: center; border-radius: var(--md-sys-shape-corner-large); width: 100%; }
.option.script-latin, .option .deva { font-size: 18px; }
.option-deva { font-size: 21px; line-height: 1.5; }
.option:disabled { cursor: default; opacity: 1; }
.option.correct { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: var(--md-sys-color-primary); }
.option.wrong { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: var(--md-sys-color-error); }
.listen-row { display: flex; align-items: center; gap: 16px; justify-content: center; padding: 8px 0 16px; }
.prompt-deva { font-size: 34px; line-height: 1.6; font-weight: 600; color: var(--md-sys-color-primary); padding: 16px 24px; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high); }
.quiz-footer { min-height: 80px; }
.quiz-footer.idle { justify-content: center; }
.quiz-footer.ok { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.quiz-footer.bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.quiz-footer.bad .btn-filled { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.fb-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-title { display: flex; align-items: center; gap: 8px; }
.build-answer { min-height: 72px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border-radius: var(--md-sys-shape-corner-large); border: 2px dashed var(--md-sys-color-outline-variant); }
.build-answer.correct { border-style: solid; border-color: var(--md-sys-color-primary); }
.build-answer.wrong { border-style: solid; border-color: var(--md-sys-color-error); }
.build-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip { height: auto; min-height: 48px; padding: 6px 14px; flex-direction: column; gap: 0; align-items: flex-start; font: var(--md-sys-typescale-title-medium); }
.word-chip:disabled { opacity: 0.3; box-shadow: none; }
.chip-deva { font-size: 14px; color: var(--md-sys-color-primary); font-weight: 500; }
.build-actions { display: flex; justify-content: flex-end; }

/* ---------- Conversation ---------- */
.conv-intro { display: flex; gap: 16px; padding: 16px; margin-bottom: 16px; border-radius: var(--md-sys-shape-corner-large); }
.conv-intro > .icon { color: var(--md-sys-color-primary); }
.conv-intro p { margin: 4px 0 0; }
.bubbles { display: flex; flex-direction: column; gap: 16px; }
.bubble-row { display: flex; gap: 12px; align-items: flex-start; max-width: 92%; }
.bubble-row.right { flex-direction: row-reverse; align-self: flex-end; }
.bubble-row.right .speaker { text-align: end; }
.bubble-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bubble { padding: 12px 16px; border-radius: 4px var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-high); transition: background-color var(--md-sys-motion-duration-short4), box-shadow var(--md-sys-motion-duration-short4); }
.bubble-right { border-radius: var(--md-sys-shape-corner-large) 4px var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large); background: var(--md-sys-color-secondary-container); }
.bubble.speaking { box-shadow: 0 0 0 2px var(--md-sys-color-primary); }
.conv-actions { display: flex; justify-content: center; padding: 32px 0 80px; }

/* ---------- Review ---------- */
.review { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.review-head { display: flex; flex-direction: column; gap: 8px; }
.flashcard { padding: 24px; border-radius: var(--md-sys-shape-corner-extra-large); display: flex; flex-direction: column; gap: 12px; }
.flashcard > p { margin: 0; }
.review-actions { display: flex; justify-content: center; gap: 8px; }
.review-actions.grade .btn { flex: 1; }

/* ---------- Sounds ---------- */
.conventions { padding: 16px; }
.conventions > p { margin: 8px 0 16px; }
.conv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.conv-grid li { display: flex; gap: 12px; align-items: flex-start; }
.conv-grid li > span:last-child { display: flex; flex-direction: column; }
.conv-mark { flex: none; min-width: 64px; text-align: center; padding: 4px 8px; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); font-size: 20px; line-height: 1.6; font-weight: 600; }
.tabs-card { border-radius: var(--md-sys-shape-corner-large); overflow: hidden; }
.sound-list { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
.sound-intro { margin: 0 4px 8px; }
.sound-card { display: flex; gap: 16px; align-items: center; padding: 16px; }
.sound-glyph { flex: none; width: 72px; min-height: 64px; display: grid; place-items: center; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: 24px; font-weight: 600; line-height: 1.5; text-align: center; padding: 4px; }
.sound-body { flex: 1; min-width: 0; }
.sound-body p { margin: 4px 0 8px; }
.sound-example { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--md-sys-typescale-title-medium); }
.sound-example .deva { color: var(--md-sys-color-primary); font-size: 18px; }

/* ---------- Profile ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border-radius: var(--md-sys-shape-corner-large); text-align: center; }
.stat .icon { color: var(--md-sys-color-primary); }
.group { padding: 0; border-radius: var(--md-sys-shape-corner-large); overflow: hidden; }
.group > * + * { border-top: 1px solid var(--md-sys-color-outline-variant); }
.settings-row { cursor: pointer; }
.settings-block { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 48px; height: 48px; border-radius: var(--md-sys-shape-corner-large); border: none; background: var(--swatch); color: #fff; display: grid; place-items: center;
  transition: border-radius var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); }
.swatch .icon { opacity: 0; transition: opacity var(--md-sys-motion-duration-short4); }
.swatch[aria-checked="true"] { border-radius: var(--md-sys-shape-corner-full); box-shadow: 0 0 0 3px var(--md-sys-color-surface), 0 0 0 5px var(--swatch); }
.swatch[aria-checked="true"] .icon { opacity: 1; }

/* ---------- Logo (tree of languages) ---------- */
:root { --bh-trunk: #7a4a2b; }
:root[data-theme="dark"] { --bh-trunk: #b98559; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bh-trunk: #b98559; } }
.bh-logo svg { display: block; width: 100%; height: 100%; }
.bh-logo .trunk { fill: var(--bh-trunk); stroke: var(--bh-trunk); }
.rail-logo { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); }
.rail-logo img { width: 48px; height: 48px; }
.about-logo { width: 40px; height: 40px; flex: none; }

/* ---------- Pronunciation vs translation labels ---------- */
.ph-row { display: flex; align-items: flex-start; gap: 10px; }
.ph-row > :last-child { flex: 1; min-width: 0; }
.ph-row-icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0.45em; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-highest); }
.ph-row-icon .icon { font-size: 16px; }
.ph-tr { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface-variant); }
.ph-tword { font-weight: 600; }
.phrase-small .ph-tr { font: var(--md-sys-typescale-body-medium); }
.pron { color: var(--md-sys-color-primary) !important; font-weight: 600; }
.settings-label { display: flex; gap: 16px; align-items: center; }
.settings-label > .icon { color: var(--md-sys-color-on-surface-variant); }
.settings-label > span:last-child { display: flex; flex-direction: column; }
.about-row { gap: 16px; }

/* ---------- Hindi/Marathi UI: Devanagari needs taller lines than Latin (M3: adjust line height for tall scripts) ---------- */
html:is([lang="hi"], [lang="mr"]) {
  --md-sys-typescale-headline-medium: 400 28px/42px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 400 24px/36px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large: 400 22px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 500 16px/26px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 500 14px/22px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 16px/27px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/23px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px/19px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 14px/22px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 12px/18px var(--md-ref-typeface-plain);
}
html:is([lang="hi"], [lang="mr"]) :is(.md-headline-medium, .md-headline-small, .md-title-large, .md-title-medium, .md-title-small,
  .md-body-large, .md-body-medium, .md-body-small, .md-label-large, .md-label-medium) { letter-spacing: 0; }

/* ---------- Voice picker ---------- */
.sheet-sub { margin: 0 24px 8px; }
.voice-list { max-height: 60vh; overflow-y: auto; padding-top: 0; }
.voice-item .radio { color: var(--md-sys-color-on-surface-variant); }
.voice-item[aria-pressed="true"] .radio { color: var(--md-sys-color-primary); }

/* ---------- Welcome motto ---------- */
.motto { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.motto p { margin: 0; }
.motto-sa { color: var(--md-sys-color-primary); font-weight: 600; letter-spacing: 0; }

/* ---------- Privacy policy page ---------- */
.policy { max-width: 760px; display: flex; flex-direction: column; gap: 4px; padding-bottom: 48px; }
.policy-langs { max-width: 420px; margin: 8px 0 16px; }
.policy article > p, .policy article li { font: var(--md-sys-typescale-body-large); letter-spacing: 0.15px; }
.policy article p { margin: 0 0 12px; }
.policy article h2.md-title-large { margin: 28px 0 8px; }
.policy article ul { margin: 0 0 12px; padding-inline-start: 22px; }
.policy article li { margin-bottom: 6px; }
.policy a { color: var(--md-sys-color-primary); }
.policy-note { font-style: italic; }
.policy-glance { padding: 16px 20px; border-radius: var(--md-sys-shape-corner-large); margin: 8px 0 8px; }
.policy-glance h2 { margin: 0 0 8px; }
.policy-glance ul { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.policy-glance li { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; }
.policy-glance li .icon { color: var(--md-sys-color-primary); margin-top: 2px; }
.privacy-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; padding: 8px 12px; border-radius: var(--md-sys-shape-corner-full); }
.privacy-link:hover { color: var(--md-sys-color-primary); text-decoration: underline; }