:root {
  --ui-teal: #176d65;
  --ui-ink: #183d39;
  --ui-muted: #617873;
  --ui-bg: #f5f8f7;
  --ui-line: #dce5e2;
  --ui-surface: #fff;
  --ui-radius: 12px;
  --ui-gap: 16px;
  --ui-small: 14px;
  --ui-body: 16px;
  --ui-side: 204px;
  --ui-nav-height: 68px;
  --ui-dock-height: 0px;
  --ui-header-height: 68px;
}
* { box-sizing: border-box; }
html { background: #e9eeec; }
body {
  width: 100%; max-width: 1024px; margin: 0 auto;
  background: var(--ui-bg); color: var(--ui-ink);
  font: var(--ui-body)/1.6 system-ui, sans-serif;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; max-width: 100%; min-width: 0; }
button, a, input, textarea, select { touch-action: manipulation; }
button { min-height: 44px; border-radius: 8px; }
button.primary { background: var(--ui-teal); }
:is(button, a, input, textarea, select):focus-visible { outline: 3px solid #309c90; outline-offset: 3px; }
h1, h2, h3, p, label { overflow-wrap: anywhere; }
h1 { font-size: 24px; line-height: 1.4; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
a { color: var(--ui-teal); }

/* Two columns only. The sidebar, header and content share the 1024px frame. */
.shell-layout { display: grid; grid-template-columns: var(--ui-side) minmax(0, 1fr); min-height: 100dvh; }
.shell-sidebar {
  position: sticky; top: 0; height: 100dvh; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  padding: 22px 10px 16px; border-right: 1px solid var(--ui-line);
  background: #fff; overflow-y: auto;
}
.shell-sidebar-brand { flex: none; min-width: 0; padding: 0 4px; font-size: 18px; white-space: nowrap; }
.shell-sidebar-brand .logo { flex: none; }
.shell-sidebar nav { display: grid; gap: 6px; position: static; }
.shell-sidebar .shell-secondary-nav { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.shell-sidebar nav a, .shell-mobile-nav a {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 12px; border-radius: 8px; font-size: 14px;
  color: var(--ui-muted); text-decoration: none;
}
.shell-sidebar a[aria-current=page], .shell-mobile-nav a[aria-current=page] { background: #e3f0eb; color: #145f56; font-weight: 700; }
.nav-icon { flex: none; width: 23px; text-align: center; }
.shell-sidebar nav a:not([aria-current=page]):hover, .shell-collapse:hover { background: #f0f6f3; color: var(--ui-teal); }
.shell-collapse { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; color: var(--ui-muted); font-size: 14px; text-align: left; background: transparent; }
.shell-layout.collapsed { --ui-side: 68px; }
.shell-layout.collapsed .shell-sidebar .nav-label { display: none; }
.shell-layout.collapsed .shell-sidebar nav a, .shell-layout.collapsed .shell-collapse { justify-content: center; min-width: 44px; padding-inline: 0; }
.shell-layout.collapsed .shell-sidebar-brand { font-size: 0; justify-content: center; padding: 0; }
.shell-layout.collapsed .shell-sidebar .shell-brand-name { display: none; }
.shell-layout.collapsed .shell-sidebar-brand .logo { font-size: 30px; }
.shell-workspace { min-width: 0; padding: 0 24px calc(var(--ui-dock-height) + 28px); }
.shell-workspace > header.app-header {
  position: static; height: 64px; max-width: 100%; width: 100%;
  padding: 10px 0; margin: 0 0 16px; background: transparent;
  border-bottom: 1px solid var(--ui-line); backdrop-filter: none;
  justify-content: flex-end;
}
.shell-workspace > .app-header .brand { display: none; }
.header-actions { min-width: 0; gap: 8px; max-width: 100%; }
.header-actions #accountButton { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions #openLibrary { white-space: nowrap; }
.shell-mobile-nav { display: none; }
.shell-network, #shellDraftStatus { margin: 0 0 12px; font-size: 12px; color: var(--ui-muted); }
#shellDraftStatus:empty { display: none; }
.shell-view { min-width: 0; }
.shell-view > h1 { margin: 0 0 16px; }

/* Shared cards across Home, Vocabulary and Progress. */
.shell-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); }
.shell-card, .feature-placeholder, .view-state {
  min-width: 0; padding: 18px; margin: 0 0 16px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); background: var(--ui-surface);
}
.shell-cards > * { margin-bottom: 0; }
.shell-cards { margin-bottom: 16px; }
.shell-card :is(h2, h3), .view-state h3 { margin: 0 0 8px; }
.shell-card p, .feature-placeholder p, .view-state p { font-size: 14px; color: var(--ui-muted); }
.shell-card .view-state { padding: 0; margin: 0; border: 0; }
.shell-card button { display: block; width: 100%; margin-top: 8px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.shell-hero { margin-bottom: 24px; padding: 4px 0 20px; border-bottom: 1px solid var(--ui-line); background: transparent; border-radius: 0; }
.shell-hero h1 { margin: 6px 0; }
.shell-hero p { max-width: 48ch; margin: 8px 0 16px; color: var(--ui-muted); font-size: 14px; }
.shell-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ui-teal); }
.shell-primary-link { display: inline-block; padding: 9px 15px; border-radius: 8px; background: var(--ui-teal); color: white; text-decoration: none; }
.status-badge { display: inline-block; padding: 2px 8px; margin: 0 6px; border-radius: 6px; background: #eef2f0; color: var(--ui-muted); font-size: 11px; }
.feature-placeholder p { margin-bottom: 0; }
.shell-chart-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 65px; gap: 8px; align-items: center; font-size: 12px; }
.shell-chart-row meter { width: 100%; accent-color: var(--ui-teal); }

/* Library stays a full-width list; no auxiliary column. */
.shell-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.shell-filters select { width: auto; min-width: 150px; }
.shell-workspace #libraryDialog { width: 100%; max-width: none; padding: 0 !important; }
.shell-workspace #libraryDialog #library { max-height: none; }
.shell-workspace :is(#libraryDialog, #sharedList) :is(.book, .shared-book) { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; padding: 12px; margin: 0 0 8px; background: white; border: 1px solid var(--ui-line); border-radius: 10px; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-info { min-width: 0; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-info b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-info small { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 12px; overflow-wrap: anywhere; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-listen { min-height: 44px; padding: 8px 13px; border: 0; border-radius: 8px; background: var(--ui-teal); color: white; font-size: 13px; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-menu { min-width: 0; border: 0; margin: 0; padding: 0; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-menu summary { display: grid; place-items: center; min-height: 44px; width: 44px; padding: 0; border-radius: 8px; color: var(--ui-ink); list-style: none; cursor: pointer; font-size: 24px; }
.shell-workspace .book-menu summary::-webkit-details-marker { display: none; }
.shell-workspace .book-menu summary:focus-visible { outline: 3px solid #309c90; outline-offset: 2px; }
.shell-workspace .book-menu summary:hover { background: #edf4f0; }
.shell-workspace :is(#libraryDialog, #sharedList) .book-menu[open] { grid-column: 1 / -1; }
.shell-workspace .book-menu[open] summary { margin-left: auto; background: #edf4f0; }
.shell-workspace .book-menu:not([open]) > .book-actions { display: none; }
.shell-workspace .book-menu[open] > .book-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ui-line); }
.shell-workspace .book-menu .book-actions > :is(button, a) { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: white; color: var(--ui-teal); font-size: 13px; text-decoration: none; }
.shell-workspace .book-menu .book-actions > .danger { color: #a3473b; }
.shell-workspace #libraryDialog .library-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.shell-workspace #libraryDialog .library-heading h2 { min-width: 0; margin: 0; font-size: 21px; }
.shell-workspace #libraryDialog .library-heading #add { flex: none; width: auto; min-height: 44px; margin: 0; padding: 8px 13px; font-size: 14px; }
.shell-workspace #libraryDialog .shell-filters { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.shell-workspace #libraryDialog .shell-filters button { flex: 1; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 999px; background: white; color: var(--ui-teal); font-size: 13px; white-space: nowrap; }
.shell-workspace #libraryDialog .shell-filters button[aria-pressed=true] { border-color: var(--ui-teal); background: var(--ui-teal); color: white; }
.shell-workspace #libraryDialog .search { margin: 12px 0 10px; }
.shell-workspace #libraryDialog .search input { min-height: 44px; font-size: 14px; }
.shell-practice-tools:empty { display: none; }
.shell-workspace .library-dialog .book-actions { flex-wrap: wrap; }
.shell-workspace .shared-panel { padding: 16px; background: #edf5f1; border-radius: var(--ui-radius); }
.shell-workspace .storage { margin-block: 20px; padding: 16px 0; border-block: 1px solid var(--ui-line); }
.shell-workspace .storage button { font-size: 13px; }

/* Practice keeps one media node, with modes directly below the lesson title. */
.shell-practice-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shell-practice-header h1 { margin: 0; min-width: 0; }
.shell-practice-header a { flex: none; font-size: 13px; }
.shell-player-host { min-width: 0; margin-bottom: 16px; }
.shell-layout:not(.shell-practice) .shell-player-host { margin: 0; }
.shell-player-host:has(.listening-dock[hidden]) { display: none; }
.shell-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.shell-tabs a { padding: 9px 8px; border: 1px solid var(--ui-line); border-radius: 8px; text-align: center; text-decoration: none; background: white; font-size: 14px; }
.shell-tabs a[aria-current=page] { background: var(--ui-teal); color: white; border-color: var(--ui-teal); }
.shell-workspace #appMain, body:has(#listeningDock:not([hidden])) .shell-workspace #appMain { width: 100%; max-width: 100%; height: auto; margin: 0; padding: 0; }
.shell-workspace .reader, body:has(#listeningDock:not([hidden])) .shell-workspace .reader, body:has(#listeningDock:not([hidden])) .shell-workspace #player { height: auto; }
.shell-workspace #sentencePanel { height: auto; min-height: 200px; padding: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: white; overflow: hidden; }
.shell-workspace #cues { max-height: min(62dvh, 640px); min-height: 160px; overflow-y: auto; overscroll-behavior: contain; }
.shell-workspace #captionTools { flex-wrap: wrap; overflow: visible; padding: 12px; gap: 6px; }
.shell-workspace #captionTools input { flex: 1 1 150px; width: auto; min-width: 0; }
.shell-workspace .session-header { display: none; }
.study-launch { gap: 6px; }
.study-launch button { font-size: 12px; padding: 7px 10px; }

/* Ordinary tools and vocabulary remain inline, using their existing controls. */
.shell-inline {
  position: static !important; inset: auto !important; width: 100% !important;
  max-width: none !important; max-height: none !important; margin: 16px 0 !important;
  padding: 18px !important; border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important; background: white !important;
  box-shadow: none !important; overflow: visible !important;
}
.shell-inline::backdrop { display: none; }
/* The existing upload form becomes a separate mobile card; its DOM and selected files survive close/reopen. */
#ytImportRetry { min-height: 44px; margin-top: 8px; }
.youtube-import-status { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; }
#ytCaptionStatus:empty { display: none; }
@media (max-width: 599px) {
  #dialog.shell-inline[data-presentation=modal] {
    position: fixed !important; inset: calc(var(--ui-header-height) + 8px) 14px auto !important;
    width: calc(100% - 28px) !important; max-width: 480px !important;
    max-height: max(160px, calc(100dvh - var(--ui-header-height) - var(--ui-dock-height) - env(safe-area-inset-bottom) - 24px)) !important;
    margin: 0 auto !important; padding: 14px !important; overflow: auto !important; overscroll-behavior: contain;
    z-index: 25; box-shadow: 0 12px 36px #183e3933 !important;
  }
  #dialog.shell-inline[data-presentation=modal]::backdrop { display: block; background: #183e3940; }
  #dialog[data-presentation=modal] label { margin-top: 10px; }
  #dialog[data-presentation=modal] .file-box { padding: 10px; }
}
.shell-inline > header { position: static; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shell-inline .study-panel { min-width: 0; }
.shell-inline pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.shell-workspace :is(.study-tools, .bilingual-toolbar, .bilingual-tools, .bilingual-controls) { flex-wrap: wrap; }
.shell-workspace .study-dialog nav { flex-wrap: wrap; overflow: visible; }
.shell-workspace .study-dialog nav button { flex: 0 1 auto; }
.shell-workspace .study-row { min-width: 0; grid-template-columns: 24px 76px 76px minmax(0, 1fr) 90px; }
.shell-workspace .study-row input[type=number] { width: 76px; }
.shell-inline .row-actions { max-width: 100%; }
.shell-inline .row-actions input { width: 90px; }
.shell-workspace :is(input, textarea) { scroll-margin-block: 100px calc(var(--ui-dock-height) + var(--ui-nav-height) + 24px); }
.shell-workspace textarea { min-height: 85px; }
.shell-workspace iframe { max-width: 100%; }
.shell-workspace #accountDialog { min-width: 0; }
.shell-workspace .account-row { flex-wrap: wrap; }
.shell-workspace .account-row > div { min-width: 0; overflow-wrap: anywhere; }
.shell-workspace .study-caption-preview { overflow-wrap: anywhere; }

/* Vocabulary uses its own compact page while keeping the existing study stores. */
.shell-workspace #studyDialog[data-view="vocab"] { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#studyDialog[data-view="vocab"] > #studyStatus { margin: 0 0 10px; padding: 0; background: transparent; font-size: 13px; }
#studyDialog[data-view="vocab"] > #studyStatus:empty { display: none; }
.vocabulary-panel { min-width: 0; width: 100%; max-width: 1024px; margin-inline: auto; padding: 0; }
.vocab-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.vocab-stats > div { padding: 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
.vocab-stats dt { font-size: 13px; color: var(--ui-muted); }
.vocab-stats dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; }
.vocab-label-filter select { width: 100%; min-height: 44px; margin-top: 5px; }
.vocab-contexts > section { padding: 4px 0 12px; border-bottom: 1px solid var(--ui-line); margin-bottom: 10px; }
.vocab-contexts textarea { width: 100%; }
.vocab-labels { color: var(--ui-teal); font-size: 12px; }
#lookupPhrase { min-height: 44px; margin-block: 8px; }
#sentencePanel .cue > #lookupPhrase { grid-column: 1 / -1; justify-self: start; }
.vocab-heading, .vocab-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vocab-heading { margin-bottom: 12px; }
.vocab-heading h1 { min-width: 0; margin: 0; font-size: 22px; }
.vocab-heading > button { flex: none; margin: 0; min-height: 44px; padding: 8px 13px; font-size: 14px; }
.vocab-form { min-width: 0; margin-bottom: 16px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.vocab-form-heading h2 { margin: 0; font-size: 17px; }
.vocab-form-heading button { min-height: 44px; padding: 7px 12px; font-size: 13px; }
.vocab-form label { display: block; margin: 10px 0; font-size: 13px; }
.vocab-form :is(input, textarea) { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 8px; font-size: 15px; }
.vocab-form textarea { min-height: 72px; resize: vertical; }
.vocab-form > button { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.vocabulary-panel .vocab-search { display: block; margin: 0 0 12px; }
.vocab-search input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); font-size: 15px; }
.vocabulary-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.study-dialog .vocab-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 10px; background: #e8efeb; overflow: visible; }
.vocab-tabs button { min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted); font-size: 14px; }
.vocab-tabs button[aria-pressed=true] { background: var(--ui-surface); color: var(--ui-teal); font-weight: 600; box-shadow: 0 1px 4px #183d3910; }
.vocab-lesson-filter { margin-bottom: 10px; color: var(--ui-muted); font-size: 12px; }
.vocab-lesson-filter summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.vocab-lesson-filter select { display: block; width: 100%; min-height: 44px; margin-top: 5px; }
.vocabulary-panel .study-vocab-item { min-width: 0; margin-bottom: 8px; padding: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
.study-vocab-item > summary { display: block; position: relative; min-height: 66px; padding: 12px 32px 12px 12px; list-style: none; cursor: pointer; overflow-wrap: anywhere; }
.study-vocab-item > summary::-webkit-details-marker { display: none; }
.study-vocab-item > summary:focus-visible { outline: 3px solid #309c90; outline-offset: 2px; border-radius: 9px; }
.study-vocab-item > summary::after { position: absolute; right: 12px; top: 15px; content: "⌄"; color: var(--ui-muted); }
.study-vocab-item[open] > summary::after { content: "⌃"; }
.study-vocab-item > summary strong { font-size: 16px; font-weight: 600; }
.vocab-ipa { margin-left: 8px; color: var(--ui-teal); font-size: 13px; }
.vocab-meaning { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 14px; }
.vocab-word-detail { min-width: 0; padding: 0 12px 12px; border-top: 1px solid #eef2f0; }
.vocab-word-detail p { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vocab-example { font-size: 14px; }
.vocab-source { color: var(--ui-muted); font-size: 12px; }
.vocab-word-actions, .vocab-card-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.vocab-word-actions button, .vocab-card-tools button { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.vocab-review-overview { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1px solid #c7ddd5; border-radius: 12px; background: #eaf3ef; }
.vocab-review-overview h2 { margin: 0; font-size: 16px; }
.vocab-review-overview p { margin: 3px 0 0; color: var(--ui-muted); font-size: 13px; }
.vocab-review-overview > button { flex: none; min-height: 44px; padding: 8px 18px; font-size: 14px; }
.vocab-review-overview > button:disabled { opacity: .55; }
#vocabReviewStatus { margin: 12px 0; color: var(--ui-muted); font-size: 13px; }
.vocabulary-panel .vocab-flashcard { min-width: 0; margin: 0; padding: 20px 16px; border-color: var(--ui-line); background: var(--ui-surface); text-align: center; }
#vocabFront, #vocabBack { display: grid; align-content: center; min-height: 128px; margin: 0 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
#vocabFront { font-size: 26px; }
#vocabBack { font-size: 17px; }
.vocab-card-tools, #vocabRatings { justify-content: center; }
#vocabRatings { margin-bottom: 0; }
.vocab-empty { padding: 20px 12px; border: 1px dashed var(--ui-line); border-radius: 10px; color: var(--ui-muted); font-size: 14px; line-height: 1.7; }

/* On other pages the same dock becomes a compact fixed mini player. */
.listening-dock { width: min(100%, 1024px); max-width: 1024px; left: 50%; right: auto; transform: translateX(-50%); padding: 10px 14px max(10px, env(safe-area-inset-bottom)); z-index: 10; }
.listening-dock .dock-inner { max-width: 100%; border: 1px solid var(--ui-line); border-radius: 0; background: white; box-shadow: 0 4px 18px #183d3912; }
.listening-dock.shell-mini :is(.listening-stage, .settings, .practice-actions, .practice-feedback, .dock-toolbar) { display: none !important; }
.listening-dock.shell-mini .audio-panel { margin: 0; padding: 0; }
.shell-mini-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.shell-mini-title a { margin-left: auto; flex: none; }
.shell-mini-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shell-player-host > .listening-dock { position: fixed; bottom: calc(var(--ui-nav-height) + env(safe-area-inset-bottom)); left: calc(50% + var(--ui-side) / 2); right: auto; transform: translateX(-50%); width: calc(min(100vw, 1024px) - var(--ui-side)); max-width: 1024px; margin: 0; padding: 8px 16px; }
.shell-player-host .dock-inner { padding: 14px; box-shadow: none; }
.shell-player-host .listening-stage { max-height: none; overflow: visible; }
.shell-player-host .current-card, .shell-player-host .dock-collapsed .current-card { padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 0; background: #edf5f1; box-shadow: none; color: var(--ui-ink); }
.shell-player-host .current-card :is(.subtitle, .main-ipa) { color: var(--ui-ink); }
.shell-player-host .current-heading, .shell-player-host .current-heading small { color: var(--ui-muted); }
.feature-placeholder > button:disabled { display: inline-block; min-height: 36px; padding: 4px 0; border: 0; background: transparent; color: var(--ui-ink); font-weight: 600; opacity: 1; cursor: default; }
.shell-player-host .dock-toolbar { flex-wrap: wrap; }
.shell-player-host .settings { flex-wrap: wrap; }
#toast { top: auto; bottom: calc(var(--ui-dock-height) + 20px); width: max-content; height: auto; min-height: 0; max-width: min(90vw, 520px); overflow-wrap: anywhere; z-index: 30; }

/* Tablet keeps the chosen sidebar state and trims content padding. */
@media (min-width: 600px) and (max-width: 899px) {
  .shell-workspace { padding-inline: 18px; }
  .shell-workspace .study-row { display: flex; flex-wrap: wrap; }
  .shell-workspace .study-row textarea { width: 100%; flex-basis: 100%; }
  .shell-inline .row-actions { display: flex; flex-wrap: wrap; }
}

/* Mobile: one column, five navigation items, safe area reserved. */
@media (max-width: 599px) {
  .shell-layout { display: block; }
  .shell-sidebar { display: none; }
  .shell-workspace { padding: 0 14px calc(var(--ui-dock-height) + var(--ui-nav-height) + env(safe-area-inset-bottom) + 24px); }
  .shell-workspace > header.app-header { height: 64px; margin-bottom: 14px; justify-content: space-between; }
  .shell-workspace > .app-header .brand { display: flex; font-size: 16px; gap: 7px; white-space: nowrap; }
  .shell-workspace > .app-header .logo { width: 30px; height: 30px; font-size: 27px; }
  .header-actions { gap: 5px; max-width: 60%; }
  .header-actions small { display: none; }
  .header-actions button { padding: 7px 9px; font-size: 11px; }
  .header-actions #accountButton { max-width: 25vw; }
  .listening-dock { bottom: calc(var(--ui-nav-height) + env(safe-area-inset-bottom)); padding: 7px 8px; }
  .shell-cards { grid-template-columns: minmax(0, 1fr); }
  .shell-card, .feature-placeholder, .view-state { padding: 16px; }
  .shell-inline { padding: 14px !important; }
  .shell-practice-header { align-items: flex-start; }
  .shell-practice-header h1 { font-size: 21px; }
  .shell-tabs a { padding: 9px 4px; font-size: 13px; }
  .shell-workspace .study-row { display: flex; flex-wrap: wrap; }
  .shell-workspace .study-row textarea { width: 100%; flex-basis: 100%; }
  .shell-inline .row-actions { display: flex; flex-wrap: wrap; }
  .shell-workspace .study-tools label { max-width: 100%; }
  .shell-workspace #studyTimeline { width: 100%; flex-basis: 100%; }
  .shell-workspace .advanced-config { display: flex; flex-wrap: wrap; }
  .shell-workspace .advanced-config > label { flex: 1 1 120px; }
  .shell-workspace .study-dialog nav button { font-size: 12px; }
  .shell-player-host .dock-inner { padding: 10px; }
  .shell-typing .listening-dock.shell-mini { bottom: var(--ui-keyboard, 0px); }
  .shell-typing .shell-workspace { padding-bottom: calc(var(--ui-dock-height) + 24px); }
}
/* Header contains secondary actions and the mobile primary navigation. */
.shell-workspace > header.app-header {
  justify-content: flex-start; gap: 12px; height: 68px; min-height: 68px;
  padding-block: 10px; margin-bottom: 12px; border-bottom: 0;
}
.app-header #accountButton.shell-account-menu {
  display: none; place-items: center; order: -1; flex: 0 0 44px; width: 44px; height: 44px;
  min-height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #c78357; color: white; font-size: 21px; font-weight: 700;
}
.app-header #accountButton[aria-current=page] { box-shadow: 0 0 0 3px #176d6540; }
.shell-header-topbar { display: contents; }
.shell-mobile-brand { display: none; }
.shell-workspace > header.app-header.shell-no-submenus { display: none; }
.shell-header-menus { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; padding: 4px; }
.shell-header-menus .shell-tabs { display: flex; gap: 6px; margin: 0; }
.shell-header-menus .shell-tabs a { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 599px) {
  :root { --ui-header-height: calc(103px + env(safe-area-inset-top)); }
  html { scroll-padding-top: calc(var(--ui-header-height) + 8px); }
  .shell-workspace > header.app-header {
    position: sticky; top: 0; z-index: 20; isolation: isolate;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    height: auto; min-height: 0;
    width: calc(100% + 28px); max-width: none;
    margin: 0 -14px 10px; padding: env(safe-area-inset-top) 14px 4px;
    background: #F8FCFA; color: #183E39; border-bottom: 1px solid var(--ui-line);
    transition: transform 160ms ease;
  }
  .shell-workspace > header.app-header.shell-no-submenus { display: flex; }
  .shell-header-topbar { display: flex; align-items: center; gap: 6px; width: 100%; height: 44px; min-height: 44px; flex: none; }
  .shell-workspace > .app-header .shell-mobile-brand { display: flex; flex: 1; min-width: 0; font-size: 17px; gap: 7px; color: #183E39; white-space: nowrap; }
  .shell-workspace > .app-header .shell-mobile-brand .logo { width: 28px; height: 28px; border-radius: 10px; font-size: 27px; }
  .app-header #accountButton.shell-account-menu { display: grid; order: 0; flex-basis: 36px; width: 36px; height: 36px; min-height: 36px; font-size: 18px; }
  .shell-header-menus { flex: none; padding: 0; overflow: visible; }
  .shell-workspace > header.app-header.shell-header-hidden { transform: translateY(-44px); }
  .shell-header-hidden .shell-header-topbar { visibility: hidden; pointer-events: none; }
  .app-header .shell-practice-tools { margin-left: 0; }
  .app-header .shell-practice-tools > summary { justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 8px; border: 0; border-radius: 10px; color: #116E64; }
  .app-header .shell-practice-tools > summary::after { content: none; }
  .app-header .shell-practice-tools > summary svg { display: block; width: 21px; height: 21px; }
  .app-header .shell-tools-label { display: none; }
  .app-header .shell-practice-tools > summary[aria-disabled=true] { opacity: .4; cursor: default; }
  .shell-header-menus .shell-tabs a { padding-inline: 12px; font-size: 13px; }
  .shell-workspace :is(button, a, input, textarea, select, [tabindex]) { scroll-margin-top: calc(var(--ui-header-height) + 12px); }
}
.shell-home > .shell-workspace > .shell-network[data-state=available],
.shell-workspace:has(#libraryDialog:not([hidden])) > .shell-network[data-state=available] { display: none; }
/* Home content follows the quiet, compact layout of the reference. */
.shell-home .shell-workspace { background: #fafcfb; color: #171d1b; }
.shell-home .shell-hero { margin: 0 0 12px; padding: 0; border: 0; }
.shell-home .shell-kicker { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #727a77; }
.shell-home .shell-hero h1 { margin: 0 0 2px; font-size: 20px; line-height: 1.35; font-weight: 600; }
.shell-home .shell-hero p { max-width: none; margin: 0; font-size: 13px; color: var(--ui-muted); }
.home-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-section-heading h2 { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; }
.home-section-heading :is(small, a) { flex: none; font-size: 12px; color: #747c78; text-decoration: none; }
.home-section-heading svg { flex: none; width: 16px; height: 16px; color: var(--ui-teal); }
.home-continue { min-width: 0; margin-bottom: 16px; padding: 14px; border: 1px solid #b9d9d3; border-radius: 14px; background: #e7f0ee; box-shadow: 0 3px 12px #176d6509; }
.home-continue-name { margin: 12px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.home-continue progress { display: block; width: 100%; height: 6px; margin: 0; border: 0; border-radius: 999px; background: #cfdeda; overflow: hidden; color: #238c7c; accent-color: #238c7c; }
.home-continue progress::-webkit-progress-bar { background: #cfdeda; border-radius: 999px; }
.home-continue progress::-webkit-progress-value { background: #238c7c; border-radius: 999px; }
.home-continue progress::-moz-progress-bar { background: #238c7c; border-radius: 999px; }
.home-continue-details { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; color: #66736e; font-size: 12px; }
.home-source { padding: 0 8px; border-radius: 99px; background: #dce7e3; color: #242e2a; font-weight: 500; }
.home-resume { display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--ui-teal); color: white; text-align: center; text-decoration: none; font-size: 14px; font-weight: 600; }
.home-resume:hover { background: #125a53; }
.home-resume > span { display: flex; }
.home-resume svg { width: 17px; height: 17px; }
.home-continue .view-state { border: 0; padding: 14px 0; margin: 0; background: transparent; }
.home-continue .view-state h3 { font-size: 15px; margin: 0; }
.home-continue .view-state p { margin: 4px 0; }
.home-recent-section { margin-bottom: 12px; }
.home-recent-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 8px; margin-top: 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.home-recent-row:hover { background: #edf3ef; }
.home-recent-row > span:nth-child(2), .home-library > span:first-child { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.home-recent-row strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.home-recent-row small, .home-library small { font-size: 12px; color: #7a827e; }
.home-row-icon { display: flex; flex: 0 0 20px; align-items: center; color: #747d77; }
.home-row-icon svg { width: 20px; height: 22px; }
.home-row-next { display: flex; margin-left: auto; }
.home-row-next svg { width: 15px; height: 15px; }
.home-library { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 10px; color: inherit; }
.home-library strong { font-size: 14px; font-weight: 600; }
.home-library-link { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.shell-home .home-goal { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 8px; padding: 8px 0; border: 0; background: transparent; font-size: 13px; }
.shell-home .home-goal .status-badge { flex: none; margin: 0; padding: 1px 8px; background: #edf0ee; color: var(--ui-muted); font-size: 11px; }
.home-learning-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.home-learning-links a { display: flex; align-items: center; min-height: 44px; min-width: 0; max-width: 100%; padding: 8px 12px; border: 1px solid #b9d9d3; border-radius: 10px; background: #D9F3EA; color: #183E39; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.home-recent-section .view-state { margin: 6px 0 0; padding: 10px 8px; border: 0; background: transparent; }
.home-recent-section .view-state h3 { font-size: 13px; margin: 0; }
.home-recent-section .view-state p { font-size: 12px; margin: 2px 0 0; }
.shell-home .shell-workspace :is(button, a) { scroll-margin-bottom: calc(var(--ui-dock-height) + var(--ui-nav-height) + env(safe-area-inset-bottom) + 16px); }

/* Desktop uses the left sidebar; mobile uses five tabs inside the header. */
.shell-layout { --ui-nav-height: 0px; }
.shell-workspace { padding-bottom: calc(var(--ui-dock-height) + var(--ui-nav-height) + env(safe-area-inset-bottom) + 24px); }
.nav-icon svg { display: block; width: 20px; height: 20px; margin: auto; }
.shell-mobile-nav { grid-area: navigation; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 0; }
.shell-mobile-nav a { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 50px; min-height: 50px; min-width: 0; padding: 6px 2px; border-radius: 10px; background: #D9F3EA; color: #183E39; font-size: 10px; line-height: 1.25; text-align: center; }
.shell-mobile-nav .nav-label { white-space: nowrap; }
.shell-mobile-nav .nav-icon { display: flex; justify-content: center; width: 20px; }
.shell-mobile-nav .nav-icon svg { width: 18px; height: 18px; }
.shell-mobile-nav a[aria-current=page] { background: #116E64; color: white; font-weight: 600; }
.shell-mobile-nav a[aria-current=page] .nav-icon { color: inherit; }
.listening-dock.shell-mini { bottom: calc(var(--ui-nav-height) + env(safe-area-inset-bottom)); }
@media (max-width: 599px) {
  #toast { bottom: calc(var(--ui-dock-height) + 20px + env(safe-area-inset-bottom)); }
  .shell-mobile-nav { display: grid; }
  .shell-typing .shell-workspace { padding-bottom: calc(var(--ui-dock-height) + 24px); }
  .shell-typing .listening-dock.shell-mini { bottom: var(--ui-keyboard, 0px); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Compact practice controls; advanced settings expand in the document flow. */
.shell-practice > .shell-workspace > .shell-network[data-state=available] { display: none; }
.shell-practice-header { display: block; margin: 0 0 14px; }
.shell-practice-header h1 { margin: 0 0 4px; font-family: inherit; font-size: 23px; font-weight: 650; line-height: 1.35; letter-spacing: normal; }
.shell-practice-header p { margin: 0; color: var(--ui-muted); font-size: 13px; line-height: 1.5; }
.shell-practice-lesson { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; max-height: 3em; margin: 0 0 12px; overflow: hidden; overflow-wrap: anywhere; color: var(--ui-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
.shell-practice .shell-player-host { margin: 0; }
.shell-workspace > .shell-tabs { margin: 0 0 16px; gap: 6px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 12px; background: #eaf1ee; }
.shell-workspace > .shell-tabs a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; }
.shell-workspace > .shell-tabs a[aria-current=page] { background: var(--ui-teal); color: white; font-weight: 650; }
.shell-practice .shell-header-menus { justify-content: flex-end; padding: 0; overflow: visible; }
.shell-practice .app-header #accountButton.shell-account-menu { display: grid; }
.shell-practice-tools { position: relative; flex: none; width: auto; margin-left: auto; font-size: 14px; }
.shell-practice-tools > summary { display: inline-flex; align-items: center; gap: 7px; width: fit-content; cursor: pointer; padding: 8px 12px; min-height: 44px; border: 1px solid var(--ui-line); border-radius: 8px; list-style: none; }
.shell-practice-tools > summary::-webkit-details-marker { display: none; }
.shell-practice-tools > summary svg { display: none; }
.shell-practice-tools > summary::after { content: "⌄"; }
.shell-practice-tools[open] > summary { background: #e3f0eb; border-color: #adcfc7; }
.shell-practice-tools .study-launch { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; width: min(250px, calc(100vw - 28px)); padding: 6px; margin: 0; border: 1px solid var(--ui-line); border-radius: 10px; background: white; box-shadow: 0 8px 24px #183d391a; }
.shell-practice-tools:not([open]) > .study-launch { display: none; }
.shell-practice-tools .study-launch button { width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-size: 14px; }
.shell-practice-tools .study-launch button:hover { background: #edf5f1; }
.shell-header-menus:has(.shell-practice-tools[open]) { overflow: visible; }
.shell-listening-options { min-width: 0; margin: 12px 0 0; border: 1px solid var(--ui-line); border-radius: 10px; background: white; }
.shell-practice :is(#appMain, #studyDialog, .shell-listening-options) { scroll-margin-bottom: calc(var(--ui-dock-height) + var(--ui-nav-height) + env(safe-area-inset-bottom) + 24px); }
.shell-listening-options > summary { min-height: 44px; padding: 9px 12px; cursor: pointer; color: var(--ui-teal); font-size: 14px; }
.shell-listening-settings { padding: 0 12px 12px; font-size: 13px; }
.shell-listening-settings :is(.display-options, .practice-options, .offset-option, .bilingual-toolbar) { margin: 0 0 10px; padding: 10px 0; border: 0; border-top: 1px solid var(--ui-line); background: transparent; }
.shell-listening-settings :is(label, .shell-listening-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.shell-listening-settings label { margin: 6px 0; }
.shell-listening-settings h3 { margin: 0 0 6px; }
.shell-listening-settings p { margin: 6px 0; }
.shell-listening-actions #abText, .shell-listening-actions #mainIPA { width: 100%; }
.shell-workspace #sentencePanel { min-height: 0; }
.shell-workspace #cues { min-height: 0; max-height: max(140px, calc(100dvh - var(--ui-dock-height) - var(--ui-nav-height) - 230px)); scroll-padding-block: 12px; }
.shell-practice #empty { width: min(100%, 480px); min-height: 0; height: auto; margin: 0 auto; padding: clamp(16px, 3dvh, 28px) 12px; }
.shell-practice #empty .empty-icon { display: grid; flex: none; width: 44px; height: 44px; margin: 0 0 12px; border-radius: 12px; background: #e3efeb; color: var(--ui-teal); font-size: 22px; }
.shell-practice #empty small { display: none; }
.shell-practice #empty h2 { margin: 0; font-size: 20px; letter-spacing: normal; }
.shell-practice #empty p { margin: 6px 0 20px; color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
.shell-open-library { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 240px); min-height: 44px; padding: 9px 16px; border-radius: 8px; background: var(--ui-teal); color: white; font-size: 14px; font-weight: 600; text-decoration: none; }
.shell-practice #emptyAdd { width: min(100%, 240px); min-height: 44px; margin: 8px 0 0; padding: 9px 16px; border: 1px solid var(--ui-line); background: transparent; color: var(--ui-teal); font-size: 14px; font-weight: 500; }
.shell-practice #studyDialog { margin-top: 0 !important; }
.shell-practice #studyStatus:empty { display: none; }
#studyDialog[data-view=speaking] > #studyStatus { display: none; }
#study-speaking .speaking-status { margin: 10px 0; padding: 10px 12px; border: 1px solid #c7ddd5; border-radius: 8px; background: #edf5f1; color: var(--ui-teal); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#study-speaking[data-recording-state=error] .speaking-status { border-color: #e1d0b7; background: #fbf6ed; color: #79551f; }
#study-speaking[data-recording-state=requesting] #speakRecord { opacity: .75; }
.study-word-action { padding: 4px; background: white; border-radius: 8px; }
.shell-practice #playerOptionsToggle { flex: none; min-height: 44px; padding: 6px 10px; border-color: var(--ui-line); background: #edf5f1; color: var(--ui-teal); font-size: 13px; }
.player-caption-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; margin: 6px 0 10px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 8px; background: #edf5f1; }
.player-caption-options label { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 44px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; }
.player-caption-options input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-teal); }
.player-source-hint { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--ui-muted); }
.shell-layout:not(.shell-practice) .player-caption-options { display: none; }
.compact-player.player-hide-english :is(#subtitle, .bilingual-english, .word-lookup) { display: none !important; }
#listeningDock #subtitle .word[role=button] { cursor: pointer; touch-action: manipulation; }
.word[role=button]:focus-visible { outline: 2px solid var(--ui-teal); outline-offset: 3px; }
.word-lookup { position: fixed; z-index: 90; display: flex; flex-direction: column; width: 400px; min-width: 0; max-width: calc(100vw - 16px); max-height: min(560px, calc(100dvh - 16px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid #b1d0c7; border-radius: 10px; background: #fff; box-shadow: 0 8px 28px #183d3930; color: var(--ui-ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; letter-spacing: normal; }
.word-lookup[hidden] { display: none !important; }
.word-lookup-header { display: flex; flex: none; align-items: flex-start; gap: 4px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--ui-line); background: #edf5f1; }
.word-lookup-title { flex: 1; min-width: 0; max-height: 80px; align-self: center; overflow-y: auto; }
.word-lookup-title > * { display: inline; margin-right: 6px; }
.word-lookup-icons { display: flex; flex: none; }
.word-lookup-body { flex: 1; min-height: 0; padding: 8px 12px 12px; overflow-y: auto; overscroll-behavior: contain; }
.word-lookup-heading, .word-lookup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.word-lookup-heading > strong { flex: 1; min-width: 0; font-size: 14px; }
#lookupTerm { font-size: 18px; }
.word-lookup button { min-height: 44px; max-width: 100%; padding: 8px 10px; font-size: 13px; white-space: normal; }
.word-lookup .word-lookup-icons button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 44px; min-height: 44px; padding: 9px; border: 0; background: transparent; color: var(--ui-teal); }
.word-lookup-icons svg { width: 20px; height: 20px; }
.word-lookup-icons button[aria-pressed=true] { background: #d3e9e0; }
.word-lookup-icons button:disabled { opacity: .45; }
.word-lookup :is(p, #lookupSentence, #lookupTranslation) { margin: 6px 0; min-height: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--ui-ink); }
.word-lookup .word-lookup-ipa, .word-lookup small { color: var(--ui-muted); font-size: 12px; }
.word-lookup .word-lookup-ipa { font-style: italic; }
#lookupMeaningDisplay { font-weight: 600; }
.word-lookup .word-lookup-meaning { display: grid; gap: 4px; margin: 8px 0; font-size: 12px; }
.word-lookup textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px; max-height: 120px; margin: 0; font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.word-lookup .word-lookup-label { margin-top: 12px; color: var(--ui-muted); font-size: 12px; }
.word-lookup details { margin: 8px 0 0; }
.word-lookup summary { min-height: 44px; padding: 10px 0; font-size: 12px; cursor: pointer; }
.word-lookup-definition { padding: 8px 0; border-bottom: 1px solid var(--ui-line); }
.word-lookup-definition button { min-height: 44px; margin-bottom: 4px; padding: 4px 8px; font-size: 12px; }
#lookupDictionarySource a, #lookupVietnameseSource a { color: var(--ui-teal); font-size: 12px; }
.word-lookup-attribution { display: grid; gap: 3px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ui-line); font-size: 11px; }
.word-lookup-attribution small, .word-lookup-attribution a { font-size: 11px !important; }
.word-lookup-attribution small:empty { display: none; }
#lookupPhrase { position: fixed; z-index: 91; margin: 0; padding: 8px; border: 1px solid #b1d0c7; border-radius: 8px; background: #edf5f1; box-shadow: 0 4px 16px #183d3920; color: var(--ui-teal); font-size: 13px; }
@media (max-width: 640px) { .word-lookup { max-height: 45dvh; } }
#lookupDictionaryStatus:empty, #lookupVietnameseStatus:empty { display: none; }
#lookupStatus:empty { display: none; }
.shell-player-host #audio { display: none !important; }
.shell-player-host .shell-media-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px minmax(48px, 72px); align-items: center; gap: 0 6px; min-width: 0; margin: 2px 0; }
.shell-media-controls #youtubePlay { grid-column: 1; grid-row: 1; }
.shell-media-controls #youtubeTime { grid-column: 2; grid-row: 1; min-width: 0; text-align: left; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shell-media-controls #youtubeMute { grid-column: 3; grid-row: 1; }
.shell-media-controls #playerVolume { grid-column: 4; grid-row: 1; }
.shell-media-controls #youtubeSeek { grid-column: 1 / -1; grid-row: 2; }
.shell-player-host .shell-media-controls button { width: 44px; min-height: 44px; padding: 4px; border-radius: 8px; font-size: 17px; }
.shell-player-host .shell-media-controls input[type=range] { --played: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 44px; min-height: 44px; max-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; accent-color: var(--ui-teal); cursor: pointer; }
.shell-player-host .shell-media-controls input[type=range]::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 4px; background: linear-gradient(to right, var(--ui-teal) var(--played), #d5dedb var(--played)); box-shadow: none; }
.shell-player-host .shell-media-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -7px; border: 2px solid white; border-radius: 50%; background: var(--ui-teal); box-shadow: 0 0 0 1px var(--ui-teal); }
.shell-player-host .shell-media-controls input[type=range]::-moz-range-track { height: 4px; border: 0; border-radius: 4px; background: #d5dedb; }
.shell-player-host .shell-media-controls input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ui-teal); }
.shell-player-host .shell-media-controls input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid white; border-radius: 50%; background: var(--ui-teal); box-shadow: 0 0 0 1px var(--ui-teal); }
.shell-player-host .shell-media-controls input[type=range]:disabled { opacity: .45; cursor: default; }
.shell-practice .listening-dock :is(.context-card, .current-heading, .current-footnote, .dock-toolbar, .practice-actions) { display: none !important; }
.shell-practice .shell-player-host > .listening-dock { max-height: min(55dvh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.shell-practice .listening-dock.dock-collapsed .audio-panel .settings { display: grid; }
.shell-practice .shell-player-host .listening-stage { display: block; max-height: 148px; overflow-y: auto; }
.shell-practice .shell-player-host .dock-collapsed .listening-stage { max-height: 52px; }
.shell-practice .shell-player-host :is(.current-card, .dock-collapsed .current-card) { min-height: 0; padding: 0; border: 0; background: transparent; }
.shell-practice .shell-player-host .current-card .subtitle { display: block; max-height: none; overflow-wrap: anywhere; font-size: 17px; line-height: 26px; white-space: pre-line; }
.shell-practice .shell-player-host #mainIPA:not([hidden]) { display: block !important; margin: 4px 0 0; padding: 0; border: 0; background: transparent; text-align: left; font-size: 15px; line-height: 24px; }
.shell-practice #biCurrent { min-height: 0; max-height: none; margin: 4px 0 0; padding: 0; overflow-wrap: anywhere; white-space: pre-line; font-size: 15px; line-height: 24px; }
.shell-practice .listening-dock .audio-panel { padding: 0; margin: 4px 0 0; }
.shell-practice .listening-dock .settings { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 4px 0 0; }
.shell-practice .speed-controls { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; width: auto; }
.shell-practice .speed-controls > span { display: none; }
.shell-seek-controls { display: flex; gap: 6px; }
.shell-practice .shell-seek-controls { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.shell-practice .listening-dock .settings button { min-height: 44px; padding: 6px 10px; white-space: nowrap; }
.shell-practice .listening-dock .settings .speed-controls button { min-height: 44px; padding: 6px 10px; }
.shell-practice #abQuick { grid-column: 2; grid-row: 1; min-width: 0; white-space: normal; font-size: 13px; line-height: 20px; }
.shell-practice #loop::after { content: " Lặp câu đã chọn"; }
.shell-practice .practice-feedback { margin: 0; font-size: 11px; line-height: 20px; }
.shell-practice .practice-feedback > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shell-practice .practice-feedback > span:empty { display: none; }
.shell-practice #cancelRest { min-height: 32px; padding: 2px 10px; font-size: 12px; }
@media (min-width: 900px) {
  .shell-practice .listening-dock .settings { grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto); }
  .shell-practice .shell-seek-controls { grid-column: 2; grid-row: 1; }
  .shell-practice #abQuick { grid-column: 3; }
}
@media (max-width: 599px) {
  .shell-player-host > .listening-dock { left: 50%; width: 100%; bottom: calc(var(--ui-nav-height) + env(safe-area-inset-bottom)); padding: 6px 8px; }
  .shell-practice .shell-player-host .dock-inner { padding: 6px 10px; }
  .shell-typing .shell-practice .listening-dock { bottom: var(--ui-keyboard, 0px); }
  .shell-typing .shell-practice .listening-dock :is(.settings, .practice-feedback), .shell-typing .shell-practice .listening-dock .listening-stage { display: none !important; }
}

/* Library keeps the same active player pinned below the lesson list. */
.listening-dock .practice-feedback:has(#cancelRest:not([hidden])) { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.listening-dock #cancelRest { flex: none; min-height: 44px; padding: 6px 12px; border: 1px solid #adcfc7; border-radius: 8px; background: #e3f0eb; color: var(--ui-teal); font-size: 13px; }
.listening-dock.shell-mini .practice-feedback > span { display: none; }
.listening-dock.shell-mini.shell-library-player .listening-stage { display: block !important; max-height: 88px; overflow: hidden; margin-bottom: 6px; }
.shell-library-player :is(.context-card, .current-heading, .current-footnote) { display: none !important; }
.listening-dock.shell-library-player .current-card { min-height: 0; padding: 8px 12px; }
.listening-dock.shell-library-player .current-card .subtitle { margin: 0; font-size: 14px; line-height: 24px; }
.shell-library-player #biCurrent { min-height: 0; margin: 0; padding: 0; font-size: 13px; line-height: 20px; }
@media (max-width: 599px) {
  body.shell-typing .listening-dock.shell-library-player .shell-mini-title, body.shell-typing .listening-dock.shell-library-player .listening-stage { display: none !important; }
}

/* Compact practice player: a 184–200px default, with expandable inline panels. */
.shell-player-host > .compact-player { --player-controls-bg: #edf7f2; --player-inline-padding: 30px; --player-caption-top: 22px; --player-controls-bottom: 22px; padding: 0; border-top: 1px solid #b9dcd2; background: var(--player-controls-bg); box-shadow: 0 -3px 14px #183e3914; }
.shell-player-host .compact-player .dock-inner { padding: 0; border: 0; background: var(--player-controls-bg); }
.shell-practice .shell-player-host > .compact-player { --player-font-size: 17px; --player-inline-padding: 16px; --player-caption-top: 6px; --player-controls-bottom: 6px; padding: 0; max-height: 33dvh; overflow-y: auto; scrollbar-width: thin; }
.shell-practice .compact-player .dock-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.compact-player .player-caption-wrap { position: relative; min-width: 0; padding: var(--player-caption-top) var(--player-inline-padding) 20px; background: var(--player-controls-bg); }
.compact-player .player-caption-wrap .current-card { background: transparent; }
.shell-practice .compact-player .player-caption-wrap .listening-stage { max-height: max(24px, calc(33dvh - 142px)); overflow-y: auto; }
.shell-practice .compact-player .current-card #subtitle, .shell-practice .compact-player :is(#mainIPA, #biCurrent):not([hidden]) { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 2.5em; overflow: hidden; margin: 0; font-size: var(--player-font-size); line-height: 1.25; white-space: pre-line; }
.shell-practice .compact-player .current-card { min-height: calc(var(--player-font-size) * 2.5); }
.shell-practice .compact-player.player-hide-english #subtitle { display: none !important; }
.shell-player-host .compact-player #mainIPA:not([hidden]) { font-size: max(13px, calc(var(--player-font-size, 17px) - 3px)); font-style: italic; }
.shell-practice .compact-player #biCurrent:not([hidden]) { font-size: max(14px, calc(var(--player-font-size) - 2px)); }
.shell-player-host .compact-player .audio-panel { margin: 0; padding: 2px var(--player-inline-padding) var(--player-controls-bottom); background: var(--player-controls-bg); }
.shell-player-host .compact-player .shell-media-controls { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.compact-player .shell-media-controls #youtubeTime { font-size: 11px; line-height: 20px; }
.compact-player #playerCueCount { color: var(--ui-muted); font-size: 11px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compact-player .player-volume-controls { display: flex; align-items: center; min-width: 0; }
.shell-player-host .compact-player .shell-media-controls button { flex: none; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 6px; font-size: 15px; }
.shell-player-host .compact-player .shell-media-controls input[type=range] { height: 24px; min-height: 24px; max-height: 24px; }
.shell-practice .compact-player .audio-panel #playerSettings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.shell-practice .compact-player .shell-seek-controls { display: contents; }
.shell-practice .compact-player .settings button { min-height: 36px; padding: 2px 6px; font-size: 12px; line-height: 20px; }
.compact-player .player-loop-slot { display: flex; gap: 4px; min-width: 0; }
.compact-player .player-loop-slot > button { flex: 1; min-width: 0; }
.shell-practice .compact-player #cancelRest { width: auto; min-height: 36px; margin: 0; padding: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.compact-player .player-caption-options, .compact-player .player-playback-options, .compact-player .player-loop-options { display: block; min-width: 0; margin: 4px 0 0; padding: 8px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--player-controls-bg); font-size: 13px; }
.compact-player .player-caption-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.compact-player .player-caption-checks label { gap: 4px; min-width: 0; min-height: 40px; font-size: 12px; white-space: nowrap; }
.compact-player .player-caption-checks input { width: 16px; height: 16px; }
.compact-player .player-playback-options #playerSpeeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 4px 0; }
.compact-player #playerSpeeds button { min-height: 40px; margin: 0; padding: 4px 8px; font-size: 13px; }
.compact-player #playerFontLabel { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 6px 0; }
.compact-player #playerFontLabel input { grid-column: 1 / -1; width: 100%; min-height: 32px; margin: 0; padding: 0; accent-color: var(--ui-teal); }
.compact-player details > summary { min-height: 40px; padding: 8px 0; cursor: pointer; }
.compact-player .player-advanced-settings label, .compact-player #playerRepeatCountLabel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0; font-size: 13px; }
.compact-player .player-advanced-settings select, .compact-player .player-advanced-settings input { max-width: 140px; min-height: 40px; }
.compact-player .player-advanced-settings :is(p, .offset-option) { margin: 4px 0; padding: 0; border: 0; font-size: 12px; }
.compact-player .player-loop-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.compact-player .player-loop-actions button { min-height: 40px; padding: 4px; font-size: 12px; }
.player-loop-popover { position: fixed; z-index: 80; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: min(60dvh, 340px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 6px 24px #183d3930; font: 13px/1.5 system-ui, sans-serif; }
.player-loop-modes { display: grid; gap: 2px; }
.player-loop-modes button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; background: transparent; text-align: left; }
.player-loop-modes button[aria-checked=true] { background: #e3f0eb; color: var(--ui-teal); font-weight: 600; }
.player-loop-check { visibility: hidden; }
[aria-checked=true] > .player-loop-check { visibility: visible; }
.player-loop-popover #playerLoopDetails { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-line); }
.player-loop-popover #loop::after { content: " Lặp đã chọn"; }
.shell-practice .compact-player #loop::after { content: " Lặp đã chọn"; }
.compact-player :is(#abText, #playerLoopStatus, .practice-feedback) { margin: 4px 0; font-size: 12px; line-height: 20px; }
.compact-player #playerLoopStatus:empty { display: none; }
.shell-practice .compact-player.player-options-open, .shell-practice .compact-player.player-caption-full { max-height: min(70dvh, 560px); }
.shell-practice .compact-player.player-caption-full :is(#subtitle, #mainIPA, #biCurrent):not([hidden]) { display: block !important; -webkit-line-clamp: unset; max-height: none; overflow: visible; }
.shell-practice .compact-player.player-caption-full .listening-stage { max-height: none; overflow: visible; }
.shell-practice .compact-player.player-caption-full.player-hide-english #subtitle { display: none !important; }
.shell-practice .compact-player.dock-collapsed:not(.player-caption-full) .current-card #subtitle { -webkit-line-clamp: 1; max-height: 1.25em; }
.shell-practice .compact-player.dock-collapsed:not(.player-caption-full) .current-card { min-height: calc(var(--player-font-size) * 1.25); }
.listening-dock.shell-mini .player-playback-options, .listening-dock.shell-mini .player-caption-wrap { display: none; }
.listening-dock.shell-mini.shell-library-player :is(.player-caption-wrap, .player-caption-options, .player-playback-options) { display: block; }
.listening-dock.shell-library-player.compact-player.player-caption-full .listening-stage { max-height: min(40dvh,300px); overflow-y: auto; }
.listening-dock.shell-library-player.compact-player.player-caption-full :is(#subtitle, #mainIPA, #biCurrent):not([hidden]) { display: block !important; -webkit-line-clamp: unset; max-height: none; overflow: visible; }
.listening-dock.shell-library-player.compact-player.player-caption-full.player-hide-english #subtitle { display: none !important; }
.shell-player-host .compact-player .current-card :is(#subtitle, #mainIPA, #biCurrent) { padding-top: 5px; text-align: justify; text-align-last: start; }
.listening-dock.shell-mini.shell-library-player #playerSettings:has(#cancelRest:not([hidden])) { display: flex !important; justify-content: flex-end; }
.listening-dock.shell-mini.shell-library-player #playerSettings :is(.shell-seek-controls, #playerLoopToggle) { display: none; }
@media (max-width: 599px) {
 .shell-typing .shell-practice .compact-player { bottom: var(--ui-keyboard, 0px); max-height: max(128px, calc(100dvh - var(--ui-keyboard, 0px) - 72px)); }
 .shell-typing .shell-practice .compact-player .audio-panel #playerSettings { display: grid !important; }
 .shell-typing .shell-practice .compact-player .listening-stage { display: block !important; }
}

/* Reuse the transport nodes; narrow containers get two comfortable button rows. */
.compact-player button svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.compact-player :is(#playerOptionsToggle, #playerCaptionToggle, #back, #forward, #playerPreviousCue, #playerNextCue, #playerLoopToggle, #playerVolumeToggle) { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 6px; line-height: 1; }
.shell-player-host .compact-player .shell-media-controls { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: flex-start; min-width: 0; }
.compact-player .player-loop-controls { display: flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.compact-player .player-volume-controls { position: relative; flex: 0 0 104px; width: 104px; margin-left: auto; }
.shell-player-host .compact-player #playerTimeline { order: 1; flex: 0 0 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.shell-player-host .compact-player #playerTimeline #youtubeSeek { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: 24px; min-height: 24px; max-height: 24px; margin: 0; }
.compact-player .shell-media-controls #youtubeTime { grid-column: 1; grid-row: 1; min-width: 0; white-space: nowrap; text-align: left; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.compact-player #playerCueCount { grid-column: 3; grid-row: 1; min-width: 0; padding: 0; text-align: right; line-height: 16px; }
.shell-player-host .compact-player .shell-media-controls :is(#youtubeTime, #playerCueCount) { color: var(--ui-ink); }
.compact-player .player-volume-popover { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.compact-player #playerVolumeToggle { display: none; }
.compact-player #playerVolume { flex: 1; min-width: 0; }
.compact-player #playerLoopToggle.is-active { color: var(--ui-teal); background: #dceee8; box-shadow: inset 0 0 0 1px #87b6a8; }
.compact-player #playerLoopToggle { position: relative; }
.compact-player .player-loop-a { position: absolute; right: 1px; bottom: 0; padding: 0 1px; background: #dceee8; font-size: 9px; font-weight: 700; line-height: 10px; }
.compact-player #playerABAction { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 4px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.compact-player :is(#youtubePlay, #youtubeMute) { display: grid; place-items: center; font-size: 0 !important; }
.compact-player :is(#youtubePlay, #youtubeMute)::before { content: ""; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--control-icon) center / contain no-repeat; mask: var(--control-icon) center / contain no-repeat; }
.compact-player #youtubePlay { --control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7Z'/%3E%3C/svg%3E"); }
.compact-player #youtubePlay[aria-pressed=true] { --control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E"); }
.compact-player #youtubeMute { --control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 5-6 4H2v6h3l6 4V5Zm4 3a5 5 0 0 1 0 8m3-11a9 9 0 0 1 0 14'/%3E%3C/svg%3E"); }
.compact-player #youtubeMute[aria-pressed=true] { --control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 5-6 4H2v6h3l6 4V5Zm6 4 5 6m0-6-5 6'/%3E%3C/svg%3E"); }
.compact-player #playerSettings { display: none !important; }


@media (max-width: 599px) {
 .shell-player-host > .compact-player { --player-inline-padding: 18px; --player-caption-top: 16px; --player-controls-bottom: 16px; }
 .shell-practice .shell-player-host > .compact-player { --player-inline-padding: 14px; --player-caption-top: 7px; --player-controls-bottom: 5px; padding: 0; }
 .shell-practice .compact-player .dock-inner { position: relative; padding: 0; gap: 0; }
 .shell-practice .compact-player .player-caption-wrap { min-height: 32px; }
 .shell-practice .compact-player .player-caption-wrap .listening-stage { margin: 0; padding: 0; max-height: none; }
 .shell-practice .compact-player .current-card { min-height: 32px; margin: 0; padding: 0; border: 0; background: transparent; }
 .shell-player-host .compact-player .shell-media-controls { width: 100%; }
 .shell-player-host .compact-player .shell-media-controls button svg { width: 18px; height: 18px; }
 .shell-player-host .compact-player #youtubeSeek::-webkit-slider-runnable-track { height: 3px; }
 .shell-player-host .compact-player #youtubeSeek::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -6px; }
 .shell-player-host .compact-player #youtubeSeek::-moz-range-track, .shell-player-host .compact-player #youtubeSeek::-moz-range-progress { height: 3px; }
 .shell-player-host .compact-player #youtubeSeek::-moz-range-thumb { width: 15px; height: 15px; }
 .compact-player .player-volume-controls { flex-basis: 44px; width: 44px; }
 .compact-player #playerVolumeToggle { display: inline-grid; }
 .compact-player .player-volume-popover { display: none; position: absolute; right: 0; left: auto; bottom: calc(100% + 6px); z-index: 4; box-sizing: border-box; width: min(180px,calc(100vw - 40px)); padding: 4px 8px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); box-shadow: 0 4px 18px #183d3920; }
 .compact-player .player-volume-controls.is-open .player-volume-popover { display: flex; }
 .shell-practice .compact-player:has(.player-volume-controls.is-open) { overflow: visible; }
 .shell-practice .compact-player.dock-collapsed:not(.player-caption-full) .current-card { min-height: 32px; }
 .shell-typing .shell-practice .compact-player .audio-panel #playerSettings { display: none !important; }
}

/* Size changes keep the shared transport nodes and measured content inset. */
.shell-player-host > .compact-player { position: fixed; }
.compact-player #playerMiniLesson { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.shell-player-host .compact-player #playerSizeToggle { position: absolute; right: 4px; top: 2px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 6px; z-index: 2; background: var(--player-controls-bg); border: 0; border-radius: 6px; }
.shell-player-host .compact-player:not(.player-minimized) :is(.player-caption-wrap, .shell-mini-title) { padding-right: max(56px, var(--player-inline-padding)); }
.shell-player-host .compact-player.player-minimized { max-height: none; overflow: visible; }
.shell-player-host .compact-player.player-minimized :is(.player-caption-wrap, .shell-mini-title, .player-playback-options, .player-caption-options, .practice-feedback, #playerSettings) { display: none !important; }
.shell-player-host .compact-player.player-minimized .audio-panel { padding: 3px 6px; }
.shell-player-host .compact-player.player-minimized .shell-media-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; grid-template-areas: "play title clock size"; gap: 8px; align-items: center; }
.shell-player-host .compact-player.player-minimized .shell-media-controls > :not(#youtubePlay, #playerTimeline, #playerMiniLesson, #playerSizeToggle) { display: none !important; }
.shell-player-host .compact-player.player-minimized #youtubePlay { grid-column: 1; grid-row: 1; }
.shell-player-host .compact-player.player-minimized #playerMiniLesson { display: block; grid-column: 2; grid-row: 1; width: 100%; }
.shell-player-host .compact-player.player-minimized #playerTimeline { display: block; grid-column: 3; grid-row: 1; }
.shell-player-host .compact-player.player-minimized #playerTimeline :is(#youtubeSeek, #playerCueCount) { display: none; }
.shell-player-host .compact-player.player-minimized #youtubeTime { font-size: 11px; white-space: nowrap; }
.shell-player-host .compact-player.player-minimized #playerSizeToggle { position: static; grid-column: 4; grid-row: 1; }
.progress-activity { grid-column: 1 / -1; }
.progress-activity label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.progress-activity :is(select,input) { max-width: 100%; min-height: 38px; }
.progress-activity .activity-chart > li { grid-template-columns: 42px minmax(0,1fr) auto; }
.activity-modules { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 8px; margin: 12px 0; }
.activity-modules div { padding: 8px; background: #e9f5ef; border-radius: 8px; }
.activity-modules dt { color: var(--ui-muted); font-size: 12px; }
.activity-modules dd { margin: 4px 0 0; font-weight: 600; }
.activity-day .progress-history li { overflow-wrap: anywhere; }
.activity-day .progress-history time { margin-right: 8px; }
#view-progress .progress-goal { grid-column: 1 / -1; }
.learning-goal-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; width: 100%; }
.learning-goal-form label { min-width: 0; }
.learning-goal-form :is(input[type=number],select) { width: 100%; box-sizing: border-box; min-height: 40px; }
.learning-goal-form :is(.check,[role=status]) { grid-column: 1 / -1; margin: 0; }
.learning-goal-form button { min-height: 40px; }
.home-goal { flex-wrap: wrap; gap: 8px; }
.home-goal p { margin: 0; }
:is(.home-goal,.progress-goal) progress { width: 100%; height: 8px; accent-color: #116e64; }
:is(.home-goal,.progress-goal) .progress-note { margin: 4px 0; }
.speaking-comparison { padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: #f1f8f4; margin: 8px 0; }
.speaking-comparison summary { min-height: 32px; cursor: pointer; color: #116e64; font-weight: 600; }
.speaking-comparison p { font-size: 13px; overflow-wrap: anywhere; }
.speaking-comparison textarea { width: 100%; min-height: 56px; box-sizing: border-box; resize: vertical; }

/* Progress uses existing results plus explicitly measured V42 activity. */
.shell-workspace:has(#view-progress:not([hidden])) > .shell-network[data-state=available] { display: none; }
#view-progress > h1 { margin: 8px 0 4px; }
#view-progress > p { margin: 0 0 16px; color: var(--ui-muted); font-size: 13px; }
#view-progress .progress-content { display: grid; gap: 14px; min-width: 0; }
#view-progress .progress-modules { grid-column: 1 / -1; }
#view-progress .progress-content > section { min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
#view-progress .progress-content h2 { margin: 0 0 12px; font-size: 17px; line-height: 1.4; }
#view-progress .progress-content p { margin: 8px 0; font-size: 13px; color: var(--ui-muted); }
#view-progress .progress-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
#view-progress .progress-stats > div { min-width: 0; }
#view-progress .progress-stats dt { color: var(--ui-muted); font-size: 12px; }
#view-progress .progress-stats dd { margin: 4px 0 0; color: var(--ui-teal); font-size: 22px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#view-progress .progress-note { font-size: 12px; }
#view-progress :is(.progress-history, .progress-chart) { margin: 0; padding: 0; list-style: none; }
#view-progress .progress-history > li { min-width: 0; padding: 12px 0; border-bottom: 1px solid #edf1ef; }
#view-progress .progress-history > li:first-child { padding-top: 0; }
#view-progress .progress-history > li:last-child { border: 0; padding-bottom: 0; }
#view-progress .progress-history strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#view-progress .progress-activity-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 3px 0; color: var(--ui-muted); font-size: 12px; }
#view-progress .progress-result { display: block; font-size: 12px; color: var(--ui-muted); }
#view-progress .progress-result[data-correct=true] { color: var(--ui-teal); }
#view-progress .progress-result[data-correct=false] { color: #89622e; }
#view-progress .progress-recent > details { margin-top: 10px; }
#view-progress .progress-recent summary { min-height: 44px; padding: 10px 0; color: var(--ui-teal); font-size: 13px; cursor: pointer; }
#view-progress .progress-chart { display: grid; gap: 12px; margin-top: 16px; }
#view-progress .progress-chart > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
#view-progress .progress-chart > li > span:last-child { min-width: 40px; text-align: right; }
#view-progress .progress-bar-track { display: block; height: 8px; border-radius: 8px; background: #edf3f0; overflow: hidden; }
#view-progress .progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--ui-teal); }
#view-progress .progress-content > .progress-goal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
#view-progress .progress-goal h2 { margin: 0; font-size: 14px; }
#view-progress .progress-goal .status-badge { flex: none; margin: 0; }
#view-progress .shell-primary-link { min-height: 44px; margin-top: 4px; font-size: 14px; }
@media (min-width: 900px) {
  #view-progress .progress-content { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  #view-progress :is(.progress-overview, .progress-goal) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  #view-progress .progress-content > section { padding: 14px; }
  #view-progress .progress-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #view-progress .progress-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  #view-progress .progress-stats dt { max-width: 60%; }
  #view-progress .progress-stats dd { margin: 0; font-size: 20px; text-align: right; }
}

#sentencePanel .cue > div { cursor: pointer; }
#sentencePanel .cue > div:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* Audio SATII: supplied lotus and wordmark, shared across navigation sizes. */
.brand .logo { background: #fff; overflow: hidden; }
.brand .logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand .shell-brand-name { display: block; flex: 0 1 122px; width: 122px; height: 25px; overflow: hidden; font-size: 0; background: url('audio-satii-wordmark.svg') center / contain no-repeat; }
.shell-sidebar-brand { gap: 8px; }
.auth-gate .auth-brand { display: block; width: min(430px, 100%); height: auto; border-radius: 12px; }
@media (max-width: 650px) { .shell-mobile-brand .shell-brand-name { flex-basis: 112px; width: 112px; height: 23px; } }