/* Approved rollout: navigation visibility and size only. Existing font families,
   weights, lesson layout, images, player and learner logic remain authoritative. */
:root{--lesson-text-size:20px;--lesson-translation-size:17px;--exercise-text-size:18px}
.workspace{position:relative}
#brandToggle{display:inline-flex;align-items:center;justify-content:flex-start;min-width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:left}
#brandToggle:hover,#brandToggle[aria-expanded=true]{background:var(--accent-soft)}
#appRail{position:absolute;inset:0 auto 0 0;width:52px;min-width:52px;z-index:24;transform:translateX(-100%);visibility:hidden;pointer-events:none;touch-action:pan-y;transition:transform .18s ease,visibility 0s linear .18s}
.rail-open #appRail{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:6px 0 20px #28213714;transition:transform .18s ease,visibility 0s}
.rail-edge{position:absolute;left:16px;top:0;bottom:0;width:20px;z-index:23;touch-action:pan-y}
.rail-edge:after{content:'';position:absolute;left:0;top:46%;height:28px;width:3px;border-radius:3px;background:var(--accent-line);opacity:.8}
.rail-open .rail-edge,.focus .rail-edge{pointer-events:none;visibility:hidden}
.reference-template .dialogue-row .sentence{font-size:var(--lesson-text-size);line-height:1.4;min-height:44px}
.reference-template .translation-content{font-size:var(--lesson-translation-size);line-height:1.45}
.shadowing-line{font-size:var(--lesson-text-size);line-height:1.4}
.shadowing-translation{font-size:var(--lesson-translation-size);line-height:1.45}
.reading-passage,.source-text,.lyrics p,.speaking-prompts p{font-size:var(--lesson-text-size);line-height:1.5}
.speaking-prompts span,.word-bank span{font-size:var(--exercise-text-size)}
.exercise-card,.exercise legend,.answer-option,.country-game-row,.board-cells li,.game-board button,.recall-form{font-size:var(--exercise-text-size);line-height:1.45}
.exercise input,.exercise select,.exercise textarea,.recall-form input,.recall-form select,.smart-review select,.test-gate input{font-size:var(--exercise-text-size)}
.tick-grid{font-size:16px}
.primary,.secondary,.exercise-result,.audio-caption b,.speed-control output{font-size:16px}
.audio-time,.audio-status,.hint,.section-label,.translation-hint{font-size:14px}
.reference-template .translation-hint{font-size:14px}
.source-heading h2{font-size:22px}
.shadowing summary{font-size:18px}
.shadowing>.actions:first-of-type button{font-size:15px;min-height:44px}
.shadowing-controls button,.shadowing .sentence-navigation button,.shadowing .self-rating button{font-size:15px;min-height:44px}
.shadowing [role=status],.speed-presets>.hint,.preset-options button{font-size:14px}
.shadowing>.hint:first-of-type{font-size:14px}
.segment-controls button,.source-zoom{font-size:14px}
.node,.map-activities .node.child,.map-lesson-toggle{font-size:15px;line-height:1.45}
.vocab-card,.memory-text{font-size:16px}
.vocab-card small,.memory-tabs button{font-size:15px}
.memory-card .memory-score,.memory-card .memory-error,.memory-card .memory-time,.memory-source{font-size:14px;line-height:1.45}
.homeitem .catalog-copy b{font-size:17px}
.homeitem small,.home-primary-card .hint,.home-v2 .review-home-card small,.home-stat span{font-size:14px}
.home-v2 .home-card-heading,.home-v2 .review-home-card b,.home-v2 .review-start,.home-v2 .continue-card .recent-lesson{font-size:15px}
.home-view>h3,.reading-library>h3{font-size:18px}
.reading-card{font-size:15px}
.mode{font-size:15px;padding:0 8px;gap:6px}
/* Color-only audio tracking: constant border width/font metrics prevent jumping. */
.reference-template .dialogue-row.audio-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.reference-template .dialogue-row.audio-active .transcript-active{background:transparent;color:inherit;box-shadow:none}
.activity-box[data-audio-highlight=true] .dialogue-row.sentence-selected:not(.audio-active){border-color:transparent;background:var(--soft);box-shadow:none}
@media(max-width:900px){.mode{font-size:14px;padding:0 6px;gap:5px}}
@media(max-width:700px){:root{--lesson-text-size:18px;--lesson-translation-size:16px;--exercise-text-size:17px}}
@media(prefers-reduced-motion:reduce){#appRail{transition:none!important}}
/* Original image nodes and player controls are moved, never cloned/reloaded. */
.source-heading .lesson-image-toggle{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.lesson-image-toggle .ui-icon{width:18px;height:18px;transform:rotate(-90deg)}
.lesson-image-toggle[aria-expanded=false] .ui-icon{transform:rotate(90deg)}
.lesson-image-collapsed .source-heading{margin-bottom:0}
.lesson-image-body .bookpage{width:100%;height:auto}
.lesson-player-bar{position:sticky;top:8px;z-index:5;background:var(--surface);border-radius:12px;transition:opacity .15s,transform .15s}
.lesson-player-bar.player-hidden{visibility:hidden;opacity:0;transform:translateY(calc(-100% - 16px));pointer-events:none}
@container lesson (min-width:860px){.speaking-layout>.shadowing{position:sticky;top:12px;align-self:start}}
@media(prefers-reduced-motion:reduce){.lesson-player-bar{transition:none}}
/* Equal outer frames; each learning body owns its native scroll position. */
.balanced-panes{--lesson-pane-height:clamp(360px,calc(100dvh - 160px),660px)}
.balanced-panes>.lesson-audio,.balanced-panes>.shadowing[open]{height:var(--lesson-pane-height);min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;position:relative;top:auto}
.balanced-panes>.lesson-audio>.section-label{flex:none;margin:0}
.balanced-panes>.lesson-audio{container:dialogue-pane / inline-size}
.lesson-audio-scroll,.shadowing-scroll{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;overflow-anchor:none}
.balanced-panes .lesson-player-bar{top:0}
.balanced-panes>.shadowing>summary{flex:none}
.balanced-panes>.shadowing[open]{display:block;padding:16px}
.shadowing-frame{height:calc(var(--lesson-pane-height) - var(--shadowing-summary-height,44px) - 34px);display:flex;flex-direction:column;min-height:0}
.balanced-panes .shadowing-frame>.sentence-navigation{flex:none;margin:12px 0 0;padding-top:12px}
.shadowing-scroll>.actions:first-of-type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:3px}
.shadowing-scroll>.actions:first-of-type button{padding:8px 3px;min-width:0;min-height:44px;border:0;background:transparent;color:var(--muted);font-size:15px;border-radius:8px}
.balanced-panes>.shadowing:not([open]) .shadowing-frame{display:none}
@container dialogue-pane (max-width:260px){
 .dialogue-row.has-actor{grid-template-columns:minmax(0,1fr) 44px}
 .dialogue-row.has-actor>.actor{grid-column:1/-1;flex-direction:row;align-items:center}
 .dialogue-row.has-actor>.trans-content{grid-column:1;overflow-wrap:anywhere}
 .dialogue-row.has-actor>.sentence-listen{grid-column:2}
}