/* Central learning scenes share the hub's reading surfaces and persistent prompt. */
.game-hub [data-game-panel=learning]{height:100%}
.learning-view{height:100%;min-height:0;display:flex;flex-direction:column;gap:12px}
.learn-intro{flex:none;max-width:100%;border-left:3px solid var(--game-blue);padding:4px 0 4px 16px}
.learn-chapter{display:flex;align-items:center;justify-content:space-between;gap:16px}
.learn-chapter .eyebrow{font:750 10px/1.4 var(--hub-mono);letter-spacing:.07em;color:var(--game-blue)}
.learn-steps{display:flex;gap:5px;flex:none}
.learn-steps span{width:24px;height:4px;background:var(--line);border-radius:4px}
.learn-steps .done{background:var(--good)}
.learn-steps .current{background:var(--game-blue);height:6px;margin-top:-1px}
.game-hub .learn-intro h2{margin:4px 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.03em}
.game-hub .learn-intro p{max-width:78ch}
.learn-expected{margin-top:8px!important;color:var(--accent)}
.learn-expected code{background:var(--game-blue-wash);padding:3px 7px;border-radius:4px;display:inline-block}
.learn-scene{flex:1;min-height:70px;display:flex;flex-direction:column;background:var(--hub-canvas);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.learn-scene-bar,.learn-goal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
.learn-scene-bar{padding:4px 8px;border-bottom:1px solid var(--line);background:var(--surface)}
.learn-scene-bar .subtabs,.learn-goal-bar .subtabs{margin:0;gap:3px}
.learn-scene-bar button,.learn-goal-bar button{min-height:29px;font-size:11px;padding:4px 8px}
.learn-scene-bar>[data-gl-graph-pager]{margin-left:auto}
.learn-canvas{min-height:0;flex:1;position:relative;background-image:radial-gradient(var(--stage-dot,#cbd3dc) .7px,transparent .7px);background-size:20px 20px}
.learn-canvas>svg,.learn-canvas>[data-gl-details]{height:100%;width:100%;min-height:0}
.learn-canvas [data-gl-details]{display:flex;flex-direction:column;justify-content:center;padding:14px}
.learn-canvas [data-gl-details][hidden]{display:none}
.learn-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;flex:none}
.learn-actions button{font-size:12px;min-height:34px;padding:6px 12px}
.learn-actions span{font-size:12px;color:var(--muted)}
.learn-actions .learn-skip{margin-left:auto;background:transparent;border-color:transparent;color:var(--muted)}
.learn-replay-intro h2{font-family:var(--hub-mono)!important;font-size:20px!important;overflow-wrap:anywhere}
.learn-replay-actions button{white-space:nowrap}
.learn-replay-actions [data-gl=play]{margin-left:auto}
.game-hub .learn-feedback{font-size:12px!important;color:var(--accent);flex:none;min-height:0}
.learn-feedback:empty{display:none}
.learn-files,.learn-ci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.learn-files article,.learn-ci article{padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:8px;min-width:0}
.game-hub .learn-files h2,.game-hub .learn-ci h2{font:700 16px var(--hub-mono);margin:0 0 8px}
.learn-files article:first-child{border-top:4px solid var(--hub-work)}
.learn-files article:nth-child(2){border-top:4px solid var(--game-gold)}
.learn-files article:nth-child(3){border-top:4px solid var(--accent)}
.learn-files code{display:block;font:600 18px var(--hub-mono);margin-top:10px;overflow-wrap:anywhere}
.learn-files small{font-size:11px;color:var(--muted)}
.learn-ci code{font-size:11px;overflow-wrap:anywhere}
.learn-ci-proof{margin-top:10px!important}
.learn-empty{max-width:480px;margin:auto;text-align:center}
.game-hub .learn-empty h2{font-size:20px}
.learn-pager{display:flex;align-items:center;gap:8px;flex:none}
.learn-pager span{font:12px var(--hub-mono);color:var(--muted)}
.learn-pager button{min-height:28px;padding:3px 8px}
.learn-editor{display:flex;flex-direction:column;gap:6px;max-width:100%;min-height:0}
.learn-editor textarea{resize:none;width:100%;min-height:70px;font:13px/1.7 var(--hub-mono);padding:10px;color:var(--ink);background:var(--hub-canvas);border:1px solid var(--line);border-radius:8px}
.learn-builder-fields{display:grid;grid-template-columns:1fr 2fr;gap:12px}
.learn-builder-fields input{width:100%;min-width:0}
.learn-commands{display:flex;flex-direction:column;gap:12px;padding-left:25px;margin:12px 0}
.learn-commands code{font:600 15px/1.5 var(--hub-mono);overflow-wrap:anywhere;color:var(--accent)}
.learn-criteria{display:flex;flex-direction:column;gap:18px;margin:auto 0}
.learn-criteria p{padding:14px;background:var(--hub-canvas);border-left:3px solid var(--line)}
.learn-criteria .done{border-color:var(--good);color:var(--good)}
.learn-import-facts{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--hub-canvas);border:1px solid var(--line);border-radius:10px}
.game-hub .hub-toolbar .learning-shortcut{color:var(--accent);font-weight:750}
.game-hub[data-sheet=learning] .hub-toolbar{display:none}
.game-hub[data-sheet=learning] .hub-workspace{grid-template-rows:0 minmax(0,1fr) auto}
.game-hub[data-sheet=learning] .game-dock-body{max-width:1050px}
.game-hub[data-sheet=learning] .hub-sheet-heading{font:700 11px/1.4 var(--hub-mono);color:var(--muted);border-bottom:0;padding-bottom:2px}
.game-hub[data-sheet=learning] .hub-sheet-heading button{font-family:Manrope,sans-serif}
.git-history-ref.git-history-remote rect{fill:var(--surface);stroke:var(--accent);stroke-dasharray:4 2}
.git-history-ref.git-history-remote text{fill:var(--accent)}
@media(max-width:650px){
 .learning-view{gap:8px}.game-hub .learn-intro h2{font-size:18px;margin:3px 0 6px}.learn-intro{padding-left:10px}
 .game-hub .learning-view p{font-size:12px!important;line-height:1.45!important}
 .learn-files,.learn-ci{gap:5px}.learn-files article,.learn-ci article{padding:8px}
 .game-hub .learn-files h2,.game-hub .learn-ci h2{font-size:12px}.learn-files code{font-size:13px}
 .learn-actions{gap:5px}.learn-actions button{font-size:11px;min-height:32px;padding:5px 8px}.learn-actions .learn-skip{font-size:11px}.learn-steps span{width:13px}.learn-chapter{gap:8px}
 .learn-editor textarea{font-size:12px;line-height:1.5}.learn-builder-fields{grid-template-columns:1fr;gap:7px}
 .game-hub .hub-toolbar .hub-history{display:none}.learn-goal-bar>p{display:none}
 .learn-scene-bar{gap:3px;padding:3px}.learn-scene-bar button{font-size:11px;padding:3px 5px}
 .learn-commands{gap:8px;margin:4px 0}.learn-commands code{font-size:12px}
}
@media(max-height:580px){
 .learning-view{gap:6px}.game-hub .learn-intro h2{font-size:17px;margin:0 0 4px}
 .game-hub .learning-view p{font-size:12px!important;line-height:1.35!important}
 .learn-intro .eyebrow{display:none}.learn-actions button{min-height:28px;padding:4px 8px}.learn-steps{display:none}
 .learn-editor textarea{line-height:1.3;min-height:55px;padding:5px}.learn-scene{min-height:45px}
 .learn-files article,.learn-ci article{padding:7px}.game-hub .learn-files h2,.game-hub .learn-ci h2{font-size:12px;margin-bottom:4px}
 .learn-files code{font-size:12px;margin-top:4px}.learn-canvas [data-gl-details]{padding:6px}
 .learn-criteria{gap:8px}.learn-criteria p{padding:8px}.learn-import-facts{padding:10px;gap:8px}
}

/* Explicit rows keep hidden tabs from making the canvas inherit an auto row. */
.game-hub .hub-sheet-heading{grid-row:1}
.game-hub .game-dock-tabs{grid-row:2}
.game-hub .game-dock-body{grid-row:3}
.game-hub .game-dock-primary{grid-row:4}

.learn-reading-toggle{display:none}
@media(max-height:400px){
 [data-learning=tutorial] .learn-reading-toggle{display:inline-flex}
 [data-learning=tutorial] .learning-view[data-reading=true] .learn-scene{display:none}
 [data-learning=tutorial] .learning-view[data-reading=true] .learn-intro{flex:1}
 [data-learning=tutorial] .learning-view[data-reading=false] .learn-explanation{display:none}
 [data-learning=tutorial] .learning-view[data-reading=false] .learn-chapter{display:none}
 [data-learning=tutorial] .learning-view[data-reading=false] .learn-intro h2{font-size:13px;margin:0}
 [data-learning=tutorial] .learning-view[data-reading=false] .learn-intro:has(.learn-expected) h2{display:none}
 [data-learning=tutorial] .learning-view[data-reading=false] .learn-scene{min-height:60px}
 [data-learning=tutorial] .learn-intro .learn-expected{margin:0!important}
 .learn-actions{gap:4px}.learn-actions button{font-size:11px!important;padding:3px 6px!important}
 .learn-actions .learn-skip{display:none}
 .learn-replay-intro h2{font-size:13px!important}.learn-replay-intro .learn-explanation{display:none}
}

@media(max-height:580px){
 .game-hub[data-sheet=learning] .hub-toolbar{display:none}
 .game-hub[data-sheet=learning] .hub-workspace{grid-template-rows:0 minmax(0,1fr) auto}
 .game-hub[data-sheet=learning] .game-dock-body{padding:8px 0}
 .learn-builder-fields{grid-template-columns:1fr 2fr;gap:8px}
 .learn-files code{margin-top:3px}.game-hub .learn-files h2{margin-bottom:3px}
 .learn-files article{padding:5px}.learn-files small{font-size:11px}
 .learn-ci-proof{font-size:11px!important}
}
.game-hub .hub-toolbar{grid-row:1}
.game-hub .game-arena{grid-row:2}
.game-hub .hub-console{grid-row:3}

[data-gl-file-name]{font:11px var(--hub-mono);color:var(--muted)}
[data-gl-file-name]:empty{display:none}
@media(max-height:580px){
 .learn-files small{display:none}
 .learn-files article{padding:4px}
 .game-hub .learn-files h2{font-size:11px;line-height:1.2;margin:0}
 .learn-files code{font-size:12px;line-height:1.3;margin-top:1px}
}
.learn-goal-bar .subtabs button{white-space:nowrap;flex:0 0 auto;max-width:none}
@media(max-height:580px){
 .learn-ci article{display:grid;grid-template-columns:1fr auto;gap:2px;padding:4px}
 .game-hub .learn-ci h2{font-size:12px;line-height:1.2;margin:0}
 .game-hub .learn-ci article p{font-size:11px!important;line-height:1.3!important}
 .game-hub .learn-ci article code{grid-column:1/-1;font-size:11px;line-height:1.3}
 .game-hub .learn-ci-proof{font-size:11px!important;line-height:1.3!important;margin:3px 0 0!important}
}

.learn-file-picker{margin:0;max-width:120px}
.game-hub .learn-file-picker select{font:11px var(--hub-mono);min-height:27px;padding:3px 5px;width:100%}
@media(max-width:650px){.learn-file-picker{max-width:105px}}
@media(max-height:400px){
 .game-hub[data-sheet=learning] .game-dock-body{padding:4px 0}
 .learning-view{gap:4px}
 .learn-intro{padding-top:2px;padding-bottom:2px}
}

/* Portrait CI keeps the causal chain legible instead of squeezing three labels. */
.learn-ci article[data-status=passed]{border-color:var(--good)}
.learn-ci article[data-status=passed] p{color:var(--good)}
.learn-ci article[data-status=failed],.learn-ci article[data-status=blocked]{border-color:var(--game-coral)}
.learn-ci article[data-status=failed] p,.learn-ci article[data-status=blocked] p{color:var(--game-coral)}
@media(max-width:650px) and (min-height:401px){
 .learn-ci{grid-template-columns:1fr;gap:9px}
 .learn-ci article{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:2px 10px;padding:5px 9px}
 .game-hub .learn-ci h2{grid-row:1/3;align-self:center;font-size:13px}
 .game-hub .learn-ci article p{font-size:12px!important}
 .game-hub .learn-ci article code{grid-column:2;font-size:11px;white-space:normal}
 .learn-ci article[data-forward=true]::after{content:'↓';position:absolute;left:36px;top:100%;height:9px;line-height:9px;font-size:13px;color:var(--muted)}
 .game-hub .learn-ci-proof{font-size:11px!important;line-height:1.4!important;margin-top:7px!important}
}

@media(max-height:300px){
 .game-hub[data-sheet=learning] .hub-workspace{grid-template-rows:0 minmax(0,1fr) auto}
 .game-hub[data-sheet=learning] .hub-sheet-heading{min-height:23px;padding:1px 0;font-size:11px}
 .game-hub[data-sheet=learning] .hub-sheet-heading button{min-height:21px;padding:1px}
 .game-hub[data-sheet=learning] .game-dock-body{padding:3px 0}
 .learning-view{gap:3px}
 .game-hub[data-sheet=learning] .learn-scene-bar{padding:1px 4px;gap:3px}
 .game-hub[data-sheet=learning] .learn-scene-bar button{min-height:22px;padding:1px 5px}
 .game-hub[data-sheet=learning] .learn-file-picker select{min-height:22px;padding:1px 4px}
 .game-hub[data-sheet=learning] .learn-goal-bar button{min-height:24px;padding:2px 5px}
 .learn-actions button{min-height:24px!important}
 .learn-pager button{min-height:22px!important}
 .learn-criteria{gap:5px}.learn-criteria p{padding:5px 7px}
 .learn-canvas [data-gl-details]{padding:4px}
 .learn-canvas [data-gl-details]:has(.learn-ci){padding:2px 4px}
 .learn-ci article{padding:2px 4px;gap:0}
 .game-hub .learn-ci-proof{margin-top:1px!important}
}
.learn-ci article[data-status=skipped]{border-style:dashed}
.learn-ci article[data-status=skipped] p{color:var(--muted)}
/* The CI line a simulated action changes: shown where the lesson has room for it. */
.learn-intro .learn-yaml{display:none}
@media(min-width:651px) and (min-height:581px){
 .learn-intro .learn-yaml{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px!important;font-size:12px;color:var(--muted)}
 .learn-yaml span{font:700 11px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
 .learn-yaml code{font:12px/1.3 ui-monospace,monospace;padding:2px 6px;border-radius:4px;background:var(--paper);color:var(--ink)}
 .learn-yaml code:first-of-type{text-decoration:line-through;color:var(--muted)}
}
/* Legibility floor: no visible game text under 11px, whatever the viewport rules above compact. */
.delivery-game kbd,.delivery-game .hud-mission>span,.delivery-game [data-gm-count] span,.delivery-game .objective-label,.delivery-game .hub-task-label,
.delivery-game .hub-toolbar button,.delivery-game .hub-keyboard-tip,.delivery-game .hub-keyboard-tip span,.delivery-game .pager span,.delivery-game [data-gm-phase],
.delivery-game .hub-sheet-heading button,.delivery-game [data-settings-page] button,.delivery-game .hub-help-top p,.delivery-game .hub-suggestions code,.delivery-game .hub-console form button,
.delivery-game .gc-mission .gc-row-copy span,.delivery-game .gc-world-count,.delivery-game .game-world-tabs button span,.delivery-game .campaign-footer>*,.delivery-game .campaign-hud button,
.delivery-game .gc-path-heading span,.delivery-game .gc-pages span,.delivery-game .game-campaign-progress span,.delivery-game .commit-secondary,.delivery-game .game-dock-body button,.delivery-game .game-dock-body select,.delivery-game .game-file-states code,.delivery-game .game-dock-tabs button,.delivery-game .diff-status{font-size:11px!important}
.git-history .git-history-ref .git-history-ref-label,.git-history .git-history-ref.git-history-head .git-history-ref-label{font-size:11px}