/* Component skin for both the existing HTML pages and the React DOM adapter. */
body { background: var(--color-page); color: var(--color-text); font-family: var(--font-ui); }
.learner-shell :is(h1,h2,h3,h4), .study-shell :is(h1,h2,h3,h4), .shell :is(h1,h2,h3,h4), .batch-shell :is(h1,h2,h3,h4) { font-family: var(--font-ui); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--color-brand-600); outline-offset: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: 600; box-shadow: none; }
.button.primary { background: var(--color-brand-600); color: #fff; border-color: var(--color-brand-600); box-shadow: none; }
.button.secondary { background: var(--color-brand-100); color: var(--color-brand-700); border-color: var(--color-brand-100); }
.button.subtle { background: transparent; color: var(--color-brand-700); border-color: transparent; }
.button.danger { color: var(--color-danger); border-color: var(--color-danger); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { border-color: var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--color-brand-600); }
.card, .wb-card, .wb-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-surface); }
.chip, .wb-badge { color: var(--color-brand-700); background: var(--color-brand-100); border-radius: 99px; }
.help, .section-subtitle { color: var(--color-text-muted); }
.eyebrow { color: var(--color-brand-700); }
.empty, .saved-empty, .site-empty { margin: 12px 0; padding: 16px; color: var(--color-text-muted); background: var(--color-brand-100); border-radius: var(--radius-control); font-size: 14px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; padding: 16px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; }
.site-brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); text-decoration: none; flex-shrink: 0; }
.site-brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--color-brand-600); color: #fff; font-size: 24px; }
.site-brand strong { display: block; font-size: 20px; line-height: 1.35; }
.site-brand small { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 3px; }
.site-navigation { display: flex; flex-wrap: wrap; gap: 8px; }
.site-navigation a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-control); white-space: nowrap; font-weight: 600; }
.site-navigation a[aria-current=page] { background: var(--color-brand-100); color: var(--color-brand-700); }
.learner-shell, .study-shell { max-width: var(--content-width); margin: auto; padding: 0 32px 72px; }
.learner-hero { display: block; padding: 20px 0 28px; margin: 0; background: none; border-radius: 0; box-shadow: none; }
.learner-hero h1 { max-width: none; font-family: var(--font-ui); font-size: clamp(25px, 3vw, 36px); letter-spacing: -.025em; margin: 4px 0 12px; }
.learner-hero h1 br { display: none; }
.learner-hero .hero-art { display: none; }
.library-card { padding: 24px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.library-item.series-item, .library-item.clip-item { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; gap: 16px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); min-width: 0; }
.library-item .library-icon, .series-item .library-icon { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16/9; margin: 0; overflow: hidden; border-radius: var(--radius-control); background: var(--color-brand-100); }
.library-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.library-icon .thumbnail-play { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; display: grid; place-items: center; border-radius: 50%; background: #ffffffdf; color: var(--color-brand-700); font-size: 16px; }
.library-icon .thumbnail-empty { display: none; position: absolute; inset: 0; width: auto; height: auto; place-items: center; border-radius: 0; background: var(--color-brand-100); color: var(--color-text-muted); font-size: 13px; }
.library-icon[data-cover-state=missing] img, .library-icon[data-cover-state=missing] .thumbnail-play { visibility: hidden; }
.library-icon[data-cover-state=missing] .thumbnail-empty { display: grid; }
.library-item strong { font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.library-item .library-arrow { display: none; }
.lesson-flow { max-width: none; gap: 24px; }
.practice-video-card { padding: 20px; }
.video-heading h2 { font-size: 16px; margin: 0; }
.clip-navigation { padding: 8px 0; margin: 8px 0; border: 0; background: transparent; box-shadow: none; min-height: 44px; }
.quality-banner { margin: 12px 0; padding: 10px 14px; font-size: 13px; }
.watch-player { position: relative; top: auto; padding: 0; box-shadow: none; z-index: auto; }
.video-stage { height: auto; min-height: 0; aspect-ratio: 16/9; max-height: none; background: #202436; }
.watch-player:not(.expanded) .video-stage {
  height:auto; aspect-ratio:16/9; margin-inline:auto;
  width:min(100%,calc(min(42dvh,420px) * 16 / 9)); max-height:min(42dvh,420px);
}
.watch-player.expanded .video-stage { aspect-ratio: auto; max-height: none; }
.practice-video-card .video-stage video { height: 100%; min-height: 0; width: 100%; object-fit: contain; }
.watch-section #lines { padding: 4px 4px calc(90px + env(safe-area-inset-bottom,0px)); margin-top: 10px; }
.transcript-heading { margin-top: 12px; }
.transcript-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; flex-wrap: wrap; }
.transcript-toolbar .help { margin: 0; font-size: 13px; }
.transcript-toolbar > div { display: flex; gap: 4px; }
.transcript-toolbar .button { padding: 8px 10px; font-size: 13px; }
#inlinePlayerSettings .dock-options { margin: 8px 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
#inlinePlayerSettings [hidden] { display: none!important; }
.practice-lines[data-mode=window] { padding: 8px; }
.practice-lines[data-mode=window] .practice-line:not(.subtitle-window-line) { display: none; }
.practice-lines[data-mode=window] .practice-line { opacity: .62; margin: 0; padding: 10px 12px; }
.practice-lines[data-mode=window] .practice-line.active { opacity: 1; background: var(--color-brand-100); }
.practice-lines .dialogue-manuscript .line-text { display: block; }
.practice-lines .dialogue-manuscript .practice-line.active .line-text { background: var(--color-brand-100); }
.practice-lines .dialogue-manuscript .practice-line.active .line-text strong { color: var(--color-brand-700); background: none; box-shadow: none; }
.practice-lines[data-mode=full] { max-height: min(64vh, 640px); overflow-y: auto; overscroll-behavior-y: contain; scroll-behavior: smooth; }
.subtitle-gap { padding: 6px 14px; margin: 0; color: var(--color-text-muted); font-size: 13px; }
.reading-choices { margin: 16px 0 0; }
.reading-choice { min-height: 48px; border-color: var(--color-border); color: var(--color-brand-700); background: var(--color-brand-100); }
.lesson-vocabulary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vocabulary-item { min-height: 72px; padding: 14px; border-radius: var(--radius-control); background: var(--color-page); border: 1px solid var(--color-border); box-shadow: none; }
.vocabulary-item span { color: var(--color-text-muted); }
.lesson-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px; margin: 0; }
.lesson-journey h3 { font-size: 18px; margin: 0; }
.lesson-journey .eyebrow { display: none; }
.journey-summary, .lesson-journey p { margin: 4px 0; }
.lesson-journey .journey-steps { flex: 1; }
.lesson-review-inline { margin: 12px 0; border-top: 1px solid var(--color-border); padding-top: 12px; }
.lesson-review-inline > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--color-brand-700); font-weight: 600; }
.lesson-review-inline:not([open]) > :not(summary) { display: none; }
.card-learning { margin-top: 0; padding: 24px; }
.card-learning .study-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.study-card { border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 16px; min-width: 0; }
.study-card .study-jyutping { color: var(--color-brand-700); }
.study-card .study-actions { flex-wrap: wrap; }
.lesson-phrase-details > summary { cursor: pointer; min-height: 44px; padding: 4px 0; color: var(--color-brand-700); font-weight: 600; }
.lesson-practice { padding: 0; scroll-margin-top: 16px; }
.lesson-practice .study-toolbar label:first-child { display: none; }
.lesson-practice [hidden] { display: none!important; }
.lesson-practice #studyStatus { margin: 8px 0 16px; }
.lesson-practice #studyQuestion { margin-top: 16px; }
.completion-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
dialog.practice-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-panel); max-width: min(620px, calc(100vw - 28px)); max-height: 88dvh; overflow-y: auto; }
.shadow-page { color: var(--color-text); background: var(--color-page); }
.shadow-line, .shadow-stage, .full-reading-text { border-color: var(--color-border); }
.shadow-icon, .shadow-player-icon, .shadow-back { min-width: 44px; min-height: 44px; }
.stage-icon { min-width: 44px; min-height: 44px; }
.topbar:not(.site-header) { border-color: var(--color-border); }
.progress-track > div { background: var(--color-brand-600); }
.shell .bound-cue-row.active { background: var(--color-brand-100); box-shadow: inset 4px 0 var(--color-brand-600); }
.auth-page { background: var(--color-page); color: var(--color-text); font-family: var(--font-ui); }
.auth-card { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-surface); }
.auth-card button, .auth-session-bar button { min-height: 44px; border-color: var(--color-border); border-radius: var(--radius-control); background: var(--color-brand-100); color: var(--color-brand-700); }
.auth-card button[type=submit], .batch-shell .button.primary { background: var(--color-brand-600); color: #fff; border-color: var(--color-brand-600); }
.auth-session-bar { color: var(--color-brand-700); background: var(--color-brand-100); }
.batch-shell .button.secondary { color: var(--color-brand-700); background: var(--color-brand-100); border-color: var(--color-border); }
.batch-shell button:not(.primary):not(.secondary) { min-height: 44px; border-color: var(--color-border); color: var(--color-brand-700); border-radius: var(--radius-control); }
@media (hover:hover) { .button.primary:hover:not(:disabled) { background: var(--color-brand-700); transform: none; } .site-navigation a:hover { background: var(--color-brand-100); } }
@media (max-width: 720px) {
  .learner-shell, .study-shell { padding: 0 16px 88px; }
  .site-header { display: block; padding: 16px 0 12px; margin-bottom: 16px; }
  .site-brand strong { font-size: 19px; }
  .site-navigation { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; margin-top: 14px; }
  .site-navigation a { padding: 10px 4px; font-size: 14px; }
  .learner-hero { padding: 8px 0 20px; }
  .learner-hero h1 { font-size: 27px; line-height: 1.4; }
  .library-card, .practice-video-card, .card-learning, .lesson-practice, .lesson-vocabulary { padding: 14px; }
  .library-grid { grid-template-columns: 1fr; gap: 14px; }
  .library-item.series-item, .library-item.clip-item { padding: 12px; }
  .video-stage { aspect-ratio: 16/9; height: auto; max-height: none; border-radius: 12px; }
  .practice-video-card .video-stage video { max-height: none; aspect-ratio: auto; }
  .stage-controls { padding: 6px; gap: 6px; min-height: 48px; }
  .stage-controls .stage-seek { min-height: 32px; }
  .practice-lines[data-mode=window] .practice-line { padding: 9px 6px; }
  .practice-lines .practice-line strong { font-size: 20px; line-height: 2; }
  .practice-lines .practice-line small { font-size: 14px; line-height: 1.65; }
  .lesson-vocabulary-list, .card-learning .study-cards { grid-template-columns: 1fr; }
  .lesson-journey { padding: 16px; display: block; }
  .lesson-journey .journey-steps { margin: 12px 0; }
  .lesson-journey .journey-actions { margin-top: 12px; }
  .lesson-heading { align-items: stretch; }
  .lesson-heading h2 { font-size: 24px; }
  .reading-choices { gap: 8px; }
  .reading-choice { padding: 12px 8px; font-size: 14px; }
  .full-reading-controls { gap: 8px; }
  .shadow-header { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; } }

/* R1: directory cards use a bounded thumbnail; the lesson player is independent. */
.library-grid .library-item.series-item, .library-grid .library-item.clip-item { flex-direction: row; align-items: center; gap: 14px; }
.library-grid .library-item .library-icon { width: 120px; height: 76px; aspect-ratio: 16/10; flex: 0 0 120px; }
.library-grid .library-item > :not(.library-icon) { min-width: 0; overflow-wrap: anywhere; }
.library-grid .library-item .library-arrow { display: none; }
.platform-title { padding: 8px 0 20px; color: var(--color-text); }
.platform-title h1 { font-size: clamp(20px,3vw,28px); margin: 0 0 6px; line-height:1.5; }
.platform-title p { margin: 0; color:var(--color-text-muted); font-size:14px; }
.platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.platform-group { min-width:0; display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); }
.platform-group-icon { display:block; flex:none; width:26px; height:26px; color:var(--color-brand-600); }
.site-duotone { display:block; width:100%; height:100%; pointer-events:none; }
.platform-entries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex:1; min-width:0; }
.platform-entries-four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.platform-card { min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 0; color:var(--color-text); text-decoration:none; border-radius:var(--radius-control); }
.platform-card[href]:hover { background:var(--color-page); }
.platform-icon-tile { display:block; width:44px; height:44px; padding:9px; border-radius:14px; background:var(--color-brand-100); color:var(--color-brand-600); }
.platform-label { font-size:14px; line-height:1.5; text-align:center; margin-top:5px; overflow-wrap:anywhere; }
.platform-card small { color:var(--color-text-muted); font-size:10px; line-height:1.5; margin-top:1px; }
.platform-group-recharge .platform-icon-tile { background:var(--soft-peach-wash); color:var(--color-warm-ink); }
.platform-group-recharge .platform-group-icon { color:var(--color-warm-ink); }
.platform-unset { display:flex; align-items:center; gap:16px; flex:1; padding:8px 16px; color:var(--color-text-muted); font-size:14px; }
.platform-unset > span { flex:1; height:1px; background:var(--color-border); }
.practice-lines[data-mode=full] { height: auto; max-height: none; overflow: visible; scroll-behavior: auto; overflow-anchor: none; touch-action: pan-y; }
.study-copy ruby, .dictionary-entry ruby, #wordDialog ruby, .vocabulary-item ruby { ruby-align: center; color: var(--color-text); }
.study-copy ruby rt, .dictionary-entry ruby rt, #wordDialog ruby rt, .vocabulary-item ruby rt { color: var(--color-brand-600); font-size: .55em; font-weight: 500; line-height: 1.4; }
.study-copy strong, .dictionary-word, #wordDialogTitle, .example-yue { color: var(--color-text); }
.study-copy small, #wordDialogMeaning, .example-mandarin { color: var(--color-text-muted); }
.example-yue, .example-mandarin, .example-origin { display: block; margin: 12px 0; overflow-wrap: anywhere; }
.example-yue { font-size: 20px; line-height: 2.2; }
.example-mandarin { line-height: 1.7; }
.example-origin { color: var(--color-text-muted); font-size: 13px; }
.generated-word-audio { display: grid; gap: 8px; color: var(--color-brand-700); }
.dictionary-sense audio, #wordDialog audio { max-width: 100%; }
.study-card .study-copy { min-width: 0; overflow-wrap: anywhere; }
.study-card .study-actions { flex-shrink: 0; }
.card-learning .study-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; }
.card-learning .study-card .study-copy { grid-column: 2; }
.card-learning .study-card .study-actions { grid-column: 2; max-width: none; width: 100%; justify-content: flex-start; padding-left: 0; }
.card-learning .study-card .study-actions .help { white-space: normal; }
#centerNavigation[hidden] { display: none; }
.cloze-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.cloze-bank button[aria-pressed=true] { background: var(--color-brand-100); border-color: var(--color-brand-600); }
.study-context { white-space: pre-wrap; }
@media(max-width:720px) {
  .platform-grid { grid-template-columns:1fr; gap:9px; }
  .platform-group { padding:12px 15px; gap:14px; border-radius:17px; }
  .platform-card { padding:0; min-height:70px; }
  .site-header { display: flex; gap: 8px; flex-wrap: wrap; }
  .site-header > .button { padding: 8px; font-size: 13px; }
  .site-brand small { max-width: 180px; }
  .library-grid .library-item .library-icon { width: 88px; height: 58px; flex-basis: 88px; }
  .practice-lines[data-mode=full] { height: auto; max-height: none; }
  .study-card { flex-wrap: wrap; }
  .study-card .study-actions { width: 100%; }
}

/* Learner mobile navigation is intentionally hidden on desktop. */
.mobile-bottom-nav{display:none}
@media(max-width:760px), (orientation:landscape) and (max-height:480px) and (pointer:coarse){
  .mobile-bottom-nav{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 94%,transparent);backdrop-filter:blur(14px)}
  .mobile-bottom-nav a{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-text-muted);text-decoration:none;border-radius:12px}
  .mobile-bottom-nav a>span{display:grid;place-items:center;width:24px;height:24px}.mobile-bottom-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-bottom-nav small{font-size:11px;line-height:1.3}
  .mobile-bottom-nav a[aria-current=page]{color:var(--color-brand-700);background:var(--color-brand-100);font-weight:600}
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .mobile-home-content{padding:0 6px 20px}.mobile-home-content h2{margin:0 0 10px;font-size:var(--font-mobile-section)}.mobile-home-courses{display:grid;gap:10px}.mobile-home-courses a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px 16px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);color:var(--color-text);text-decoration:none}.mobile-home-courses a strong{font-size:var(--font-mobile-copy)}.mobile-home-courses a span,.mobile-home-empty{color:var(--color-text-muted);font-size:12px}
  .watch-player{top:env(safe-area-inset-top,8px)}
}

/* Confirmed screenshot follow-up: full page transcript with a visible player. */
.watch-player { position: sticky; top: 8px; z-index: 5; }
.vocabulary-word { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vocabulary-item:focus { outline:2px solid var(--color-brand-600); outline-offset:3px; }
.practice-entry-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.practice-entry { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:24px; border:1px solid var(--color-border); border-radius:var(--radius-panel); background:var(--color-page); }
.practice-entry > div { min-width:0; }
.practice-entry strong, .practice-entry small { display:block; }
.practice-entry small { margin-top:8px; }
.practice-entry .help:empty { display:none; }
.objective-game-dialog { box-sizing:border-box; width:620px; padding:24px; background:var(--color-page); color:var(--color-text); }
.objective-game-dialog::backdrop { background:rgb(0 0 0 / 45%); }
.objective-game-dialog .study-toolbar { flex-wrap:wrap; }
.objective-game-dialog audio { width:100%; max-width:100%; }
.objective-game-dialog .dialog-top { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.practice-entry small { color:var(--color-text-muted); }
.practice-entry button { white-space:normal; }
@media(max-width:720px) { .lesson-practice { padding:0; } .practice-entry { padding:16px; gap:10px; } .practice-entry button { flex:0 0 94px; } .objective-game-dialog { padding:16px; } }

/* One icon treatment across learner pages and the existing workbench. */
.ui-icon { display:inline-block; width:24px; height:24px; flex:none; vertical-align:middle; pointer-events:none; }
.button > svg, .wb-audio-icon > svg { flex:none; stroke-width:2; }
.ui-icon-button, .wb-audio-icon {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; min-width:44px; min-height:44px; padding:10px;
  border:1px solid var(--color-border); border-radius:var(--radius-control);
  background:var(--color-brand-100); color:var(--color-brand-700); cursor:pointer;
}
.ui-icon-button:hover:not(:disabled), .wb-audio-icon:hover:not(:disabled) { border-color:var(--color-brand-600); background:var(--color-surface); }
.ui-icon-button:focus-visible, .wb-audio-icon:focus-visible { outline:3px solid var(--color-brand-600); outline-offset:3px; }
.ui-icon-button:disabled, .wb-audio-icon:disabled { opacity:.45; cursor:not-allowed; }
.ui-icon-button[data-audio-state=playing], .wb-audio-icon[aria-pressed=true] { background:var(--color-brand-700); color:var(--color-surface); }
.ui-icon-button[data-audio-state=loading] { cursor:progress; border-color:var(--color-brand-600); }
.bookmark-icon[aria-pressed=true] { background:var(--soft-peach-wash); color:var(--color-warning); border-color:var(--color-accent-warm); }
.bookmark-icon[aria-pressed=true] svg { fill:currentColor; }
.card-icon-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }

/* Each reading has its own width; native ruby overhang must not merge syllables. */
:is(#lines, .learner-ruby, .dictionary-entry, #wordDialog, .review-card, .wb-card, .wb-selected-item) ruby {
  display:inline-grid; grid-template-rows:auto auto; justify-items:center;
  vertical-align:bottom; white-space:nowrap; margin:.18em .13em 0; padding-inline:.07em;
  ruby-overhang:none; line-height:1.35; letter-spacing:normal;
}
:is(#lines, .learner-ruby, .dictionary-entry, #wordDialog, .review-card, .wb-card, .wb-selected-item) ruby rb { grid-row:2; }
:is(#lines, .learner-ruby, .dictionary-entry, #wordDialog, .review-card, .wb-card, .wb-selected-item) ruby rt {
  display:block; grid-row:1; color:var(--color-brand-600); font-size:.55em; font-weight:500;
  line-height:1.4; margin:0 0 3px; letter-spacing:normal; text-align:center;
}

.lesson-vocabulary-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; align-items:start; }
.vocabulary-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:start; gap:6px; padding:14px; background:var(--color-page); border-radius:var(--radius-card); }
.vocabulary-item .card-icon-actions { grid-column:2; grid-row:1; }
.vocabulary-item .vocabulary-word { grid-column:1; grid-row:1; }
.vocabulary-item > :is(small,.vocabulary-meaning) { grid-column:1/-1; }
.vocabulary-word { display:block; min-width:0; }
.vocabulary-word strong { display:block; font-size:24px; font-weight:700; line-height:1.8; overflow-wrap:anywhere; }
.vocabulary-item .vocabulary-meaning { color:var(--color-text-muted); font-size:16px; line-height:1.8; }
.card-audio-status { display:block; color:var(--color-text-muted); font-size:13px; line-height:1.6; }
.card-audio-status:empty { display:none; }
.learner-shell .section-subtitle:empty { display:none; }
.learner-shell .scene-summary { margin-block:6px 10px; }
.lesson-word-challenge { scroll-margin-top:110px; }
.lesson-word-challenge .pronunciation-game { margin-top:20px; }
.lesson-word-challenge .study-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:12px; }
.card-learning .study-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
:is(.card-learning,.lesson-word-challenge) .study-card {
  display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:14px;
  border-radius:var(--radius-card); background:var(--color-surface); min-width:0;
}
.study-card-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.study-card-heading .study-number { font-size:14px; }
.study-card-heading .study-focus { flex:1; min-width:60px; font-size:14px; line-height:1.6; }
.study-card-heading .card-icon-actions { margin-left:auto; }
.study-card .study-copy { display:flex; flex-direction:column; gap:6px; width:100%; }
.study-card .study-copy > strong { color:var(--color-text); font-size:23px; font-weight:650; line-height:1.8; }
.study-card .study-copy > small { color:var(--color-text-muted); font-size:16px; line-height:1.85; }
.study-card .study-original { align-self:flex-start; }

/* Shared entrance banner; the original speech and question controllers remain. */
.challenge-entry {
  display:flex; align-items:center; gap:20px; padding:24px; min-width:0;
  border:1px solid var(--color-border); border-radius:var(--radius-panel);
  background:linear-gradient(126deg,var(--color-brand-100),var(--soft-peach-wash));
}
.challenge-entry-icon { display:flex; justify-content:center; align-items:center; flex:none; width:52px; height:52px; border-radius:16px; color:var(--color-brand-700); background:var(--color-surface); }
.challenge-entry-icon .ui-icon { width:26px; height:26px; }
.challenge-entry > div { flex:1; min-width:0; display:grid; gap:6px; }
.challenge-entry .game-label { color:var(--color-brand-700); font-size:13px; font-weight:650; line-height:1.5; }
.challenge-entry strong { display:block; color:var(--color-text); font-size:21px; line-height:1.5; }
.challenge-entry small { display:block; color:var(--color-text-muted); font-size:14px; line-height:1.8; margin:0; }
.challenge-entry button { flex:none; min-height:48px; padding:12px 20px; white-space:nowrap; }
.challenge-entry .help { margin:0; }
.challenge-entry .help:empty { display:none; }
.practice-entry-grid { gap:16px; }
@media(max-width:720px) {
  .lesson-vocabulary-list, .card-learning .study-cards, .lesson-word-challenge .study-cards { grid-template-columns:1fr; }
  .vocabulary-item, :is(.card-learning,.lesson-word-challenge) .study-card { padding:12px; }
  .lesson-vocabulary-list, .card-learning .study-cards, .lesson-word-challenge .study-cards { gap:8px; }
  .vocabulary-word strong, .study-card .study-copy > strong { font-size:22px; }
  .study-card-heading { gap:8px; }
  .card-icon-actions { gap:6px; }
  .challenge-entry { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; padding:18px 16px; align-items:start; }
  .challenge-entry-icon { width:40px; height:40px; border-radius:12px; }
  .challenge-entry-icon .ui-icon { width:24px; height:24px; }
  .challenge-entry strong { font-size:19px; }
  .challenge-entry > button { grid-column:2; justify-self:start; }
}
/* Short landscape screens keep a full dialogue line below the normal player. */
@media (orientation:landscape) and (max-height:480px) {
  .watch-player:not(.expanded) .video-stage {
    height:auto; width:min(100%,calc(40dvh * 16 / 9)); max-height:40dvh;
  }
}

/* Confirmed compact navigation and local profile share the learner shell. */
.profile-shell { box-sizing:border-box; max-width:var(--content-width); margin:auto; padding:0 32px 72px; }
:is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-header { position:relative; padding-right:64px; }
.site-header { position:relative; padding-right:64px; }
.site-account { position:absolute; z-index:30; top:20px; right:0; }
.site-user-toggle { position:relative; display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:8px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-surface); color:var(--color-brand-600); cursor:pointer; }
.site-user-toggle:hover, .site-user-toggle[aria-expanded=true] { background:var(--color-brand-100); }
.site-user-panel { position:absolute; box-sizing:border-box; z-index:31; top:calc(100% + 8px); right:0; width:280px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 96px - env(safe-area-inset-top,0px)); overflow:auto; padding:20px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); box-shadow:var(--shadow-surface); }
.site-user-panel[hidden], .profile-shell [hidden] { display:none!important; }
.site-user-summary { display:flex; align-items:center; gap:12px; overflow-wrap:anywhere; }
.site-user-summary strong { min-width:0; }
.site-user-panel p { color:var(--color-text-muted); font-size:13px; margin:12px 0; }
.site-user-panel .button { width:100%; }
body:is(.player-expanded,.shadow-open) .site-account { visibility:hidden; }
html[data-learner-view=home] .site-home-link { display:none; }
html[data-learner-view=home] .site-header { border-bottom:0; margin-bottom:4px; }
.profile-heading { margin:16px 0 24px; }
.profile-heading h1 { font-size:28px; margin:0 0 8px; }
.profile-heading p { font-size:13px; }
.profile-card { max-width:760px; padding:28px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); box-shadow:var(--shadow-surface); }
.profile-avatar { display:block; flex:none; width:44px; height:44px; padding:9px; border-radius:14px; color:var(--color-brand-600); background:var(--color-brand-100); }
.profile-avatar-large { width:76px; height:76px; padding:14px; border-radius:22px; }
.profile-identity { display:flex; align-items:flex-start; gap:20px; }
.profile-identity > div { min-width:0; flex:1; overflow-wrap:anywhere; }
.profile-identity h2 { font-size:22px; margin:4px 0 10px; }
.profile-identity p { color:var(--color-text-muted); line-height:1.8; white-space:pre-wrap; margin:0; }
.profile-services { margin:28px 0 0; padding-top:20px; border-top:1px solid var(--color-border); display:grid; gap:16px; }
.profile-services > div { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.profile-services dt { color:var(--color-text); }
.profile-services dd { color:var(--color-text-muted); margin:0; }
.profile-form { display:grid; gap:12px; }
.profile-form h2 { font-size:22px; margin:0 0 8px; }
.profile-form fieldset { margin:0 0 8px; padding:0; border:0; min-width:0; }
.profile-form legend { margin-bottom:12px; }
.profile-form label small { color:var(--color-text-muted); font-size:12px; margin-left:8px; }
.profile-form :is(input[type=text],textarea) { box-sizing:border-box; width:100%; min-height:44px; padding:12px; font:inherit; border:1px solid var(--color-border); }
.profile-form textarea { resize:vertical; }
.profile-form [aria-invalid=true] { border-color:var(--color-danger); }
.profile-form-actions { display:flex; justify-content:flex-end; gap:8px; }
.profile-avatar-options { display:flex; flex-wrap:wrap; gap:10px; }
.profile-avatar-choice { position:relative; display:block; cursor:pointer; }
.profile-avatar-choice input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.profile-avatar-choice input:checked + span { outline:2px solid var(--color-brand-600); outline-offset:2px; }
.profile-avatar-choice input:focus-visible + span { outline:3px solid var(--color-brand-600); outline-offset:3px; }
.profile-form .help:empty { display:none; }

/* Mobile text scale covers every learner view and its dialogs; ruby retains
   readable readings and controls retain their original touch area. */
@media (max-width:760px), (orientation:landscape) and (max-height:480px) and (pointer:coarse) {
  /* Normalize automatic text inflation, without disabling user/pinch zoom. */
  html:has(:is(.learner-shell,.study-shell,.profile-shell,.translate-shell)) { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body:has(:is(.learner-shell,.study-shell,.profile-shell,.translate-shell)) { font-size:var(--font-mobile-copy); }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-header { gap:8px; padding:18px 56px 12px 0; min-height:82px; flex-wrap:wrap; }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-brand { gap:10px; }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-brand-mark { width:35px; height:35px; font-size:18px; border-radius:11px; }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-brand strong { font-size:16px; }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-navigation a { font-size:var(--font-mobile-nav); }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) .site-brand small { font-size:10px; max-width:none; }
  .site-account { top:18px; }
  .site-user-panel { font-size:var(--font-mobile-copy); }
  .platform-title { padding:4px 6px 16px; }
  .platform-title h1 { font-size:var(--font-mobile-title); line-height:1.5; }
  .platform-title p { font-size:12px; line-height:1.6; }
  .platform-group { padding:12px 15px; gap:14px; }
  .platform-group-icon { width:25px; height:25px; }
  .platform-icon-tile { width:43px; height:43px; }
  .platform-label { font-size:var(--font-mobile-nav); }
  .platform-entries-four .platform-icon-tile { width:38px; height:38px; padding:8px; border-radius:12px; }
  .platform-entries-four .platform-label { font-size:12px; }
  .platform-unset { font-size:var(--font-mobile-nav); }
  .platform-group:has(.platform-unset) { min-height:55px; }
  .platform-card small { font-size:10px; }
  .learner-shell .learner-hero h1, .learner-shell .lesson-heading h2, .study-shell .study-header h1,
  .profile-heading h1 { font-size:var(--font-mobile-title); }
  .learner-shell :is(.card-heading h2,.transcript-heading h3,.lesson-journey h3),
  .study-shell :is(.center-panel-heading h2,.center-card h3,.video-progress-top h3),
  .study-shell main > section h2, .profile-identity h2 { font-size:var(--font-mobile-section); }
  .learner-shell :is(.library-item strong,.series-item strong,.video-heading h2) { font-size:var(--font-mobile-yue); }
  .learner-shell :is(.button,.reading-choice), .study-shell .button, .profile-shell .button { font-size:var(--font-mobile-nav); min-height:44px; }
  .learner-shell .practice-lines .practice-line .line-text strong,
  .learner-shell .practice-lines .practice-line.active .line-text strong { font-size:var(--font-mobile-yue); line-height:1.7; }
  .learner-shell .practice-lines .practice-line .line-text small,
  .learner-shell .practice-lines .practice-line.active .line-text small { font-size:13px; line-height:1.65; }
  .learner-shell .vocabulary-word strong, .study-shell .dictionary-word,
  .study-shell .center-card strong { font-size:var(--font-mobile-word); }
  .learner-shell .study-card .study-copy > strong, .example-yue { font-size:var(--font-mobile-yue); }
  .learner-shell .vocabulary-word strong { line-height:1.6; }
  .learner-shell .study-card .study-copy > strong, .example-yue { line-height:1.7; }
  .learner-shell .study-card .study-copy > small, .learner-shell .vocabulary-item .vocabulary-meaning,
  .study-shell .dictionary-summary, .study-shell .dictionary-sense p, .example-mandarin { font-size:var(--font-mobile-copy); }
  .learner-shell .challenge-entry strong, .learner-shell .game-card > strong,
  .learner-shell .game-intro strong, .learner-shell .game-celebration strong { font-size:var(--font-mobile-word); }
  .learner-shell :is(.challenge-entry small,.game-card > small,.game-intro small) { font-size:13px; }
  .learner-shell .challenge-entry small { line-height:1.6; }
  .learner-shell .challenge-entry .game-label { font-size:12px; }
  .learner-shell .game-card-top { align-items:flex-start; }
  .learner-shell .game-card-top > .game-label { flex:none; }
  .learner-shell .game-dots { max-width:60%; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
  .learner-shell .game-dots i { flex:none; width:6px; height:6px; }
  .learner-shell :is(.study-card-heading .study-number,.study-card-heading .study-focus) { font-size:12px; }
  body:has(.learner-shell) :is(.shadow-line-copy strong,.shadow-stage-yue,.full-reading-yue,.dialog-yue),
  .study-context { font-size:var(--font-mobile-yue); }
  .study-shell .study-record strong { font-size:var(--font-mobile-word); }
  .study-shell :is(.study-toolbar label,.study-return), .profile-bio { font-size:var(--font-mobile-copy); }
  body:has(.learner-shell) :is(.focus-copy strong,.review-card strong,.warmup-card strong) { font-size:var(--font-mobile-yue); }
  body:has(.learner-shell) :is(.shadow-line-copy small,.shadow-stage-mandarin,.full-reading-mandarin,.dialog-mandarin) { font-size:13px; }
  body:has(.learner-shell) :is(.shadow-header h1,.dialog-top h2), .objective-game-dialog .dialog-top h2 { font-size:var(--font-mobile-title); }
  body:has(.learner-shell) :is(.series-complete-dialog h2,.full-exit-dialog h2) { font-size:var(--font-mobile-title); }
  body:has(:is(.learner-shell,.study-shell)) .practice-dialog .button { font-size:var(--font-mobile-nav); min-height:44px; }
  body:has(.learner-shell) :is(.shadow-back,.shadow-page .button) { min-height:44px; font-size:var(--font-mobile-nav); }
  :is(#wordDialogTitle,.dictionary-sense h2) { font-size:var(--font-mobile-word); }
  :is(#wordDialogMeaning,.study-choice,#studyFeedback) { font-size:var(--font-mobile-copy); }
  .learner-shell :is(.study-jyutping,.game-jyutping), #wordDialogJyutping { font-size:var(--font-mobile-jyutping); }
  .learner-shell .saved-phrase strong { font-size:var(--font-mobile-yue); }
  :is(.learner-shell,.study-shell) ruby rt, #wordDialog ruby rt,
  body:has(.learner-shell) .shadow-page ruby rt { font-size:var(--font-mobile-jyutping); }
  /* Keep the stored caption preference; mobile displays it at a smaller scale. */
  .learner-shell .video-caption { font-size:clamp(14px,calc(var(--caption-size,24px) * 2 / 3),24px); }
  .learner-shell #videoCaptionYue ruby rt { font-size:max(10px,.55em); }
  .learner-shell #videoCaptionMandarin { font-size:max(12px,.75em); }
  :is(.learner-shell,.study-shell,.profile-shell,.translate-shell) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea),
  body:has(.learner-shell) .practice-dialog :is(input,select,textarea) { font-size:16px; }
  .profile-shell { padding:0 16px 72px; }
  .profile-card { padding:20px; }
  .profile-identity { flex-wrap:wrap; gap:14px; }
  .profile-identity > div { flex:1; }
  .profile-identity > .button { margin-left:auto; }
  .profile-avatar-large { width:60px; height:60px; padding:12px; border-radius:18px; }
  .profile-form h2 { font-size:var(--font-mobile-section); }
}
@media (max-width:350px) {
  .platform-group { padding:11px; gap:9px; }
  .platform-group-icon { width:22px; height:22px; }
  .platform-entries-four { gap:4px; }
}
/* Mobile home reuses the site's icons, colors and buttons. */
.mobile-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 10px;padding:24px 12px;margin:12px 0 22px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px}
.mobile-feature{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;color:var(--color-text);font-size:13px;min-width:0}
.mobile-feature-icon{display:grid;place-items:center;width:40px;height:40px;color:var(--color-brand-600)}
.mobile-feature-icon svg{width:34px;height:34px}.mobile-feature small{font-size:10px;color:var(--color-text-muted)}
.mobile-feature[aria-disabled=true]{color:var(--color-text-muted)}
.mobile-home-panel{padding:18px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;margin:16px 0}
.mobile-home-panel h2{font-size:18px;margin:0 0 10px}.mobile-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-panel-heading p{font-size:13px;margin:0;color:var(--color-text-muted)}
.mobile-panel-heading button{padding:10px 15px;font-size:13px;white-space:nowrap}.checkin-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:18px 0 12px}.checkin-day{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}.checkin-day small{font-size:10px;color:var(--color-text-muted)}.checkin-day b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f3f1fa;color:#9091a4}.checkin-day.checked b{background:var(--color-brand-600);color:#fff}
[data-announcements]{font-size:13px;color:var(--color-text-muted);line-height:1.7}[data-announcements] article+article{border-top:1px solid #e7e5f1;margin-top:12px;padding-top:12px}[data-announcements] strong{display:block;color:var(--color-text)}[data-announcements] p{white-space:pre-wrap;margin:5px 0}
@media(max-width:340px){.mobile-feature-grid{gap:20px 6px;padding:20px 8px}.mobile-feature{font-size:12px}}