/* gitGud. as one game: a hairline masthead, one stage, one console. The page itself never scrolls; a region that
   can outgrow its box (the Journal's log, the console's output) scrolls or pages inside it. Loaded last on /git/. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0}
.hud [hidden],.hud-console[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hud-app{--hud-height:64px;--console-height:132px;height:100dvh;display:grid;grid-template-rows:var(--hud-height) auto minmax(0,1fr) var(--console-height);min-width:0;overflow:hidden}
html[data-hud=game] .hud-app{grid-template-rows:var(--hud-height) auto minmax(0,1fr)}
/* Fixed tracks: a hidden storage warning must not shift the stage into its row. */
.hud{grid-row:1}.hud-app>.storage-feedback{grid-row:2}.hud-stage{grid-row:3}.hud-console{grid-row:4}

/* ---- Masthead ---- */
.hud{display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--paper);min-width:0}
.hud-mark{font-size:28px;line-height:1;letter-spacing:-1.6px;white-space:nowrap;flex-shrink:0}.hud-mark span{color:var(--accent)}
.hud-where{flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:10px;padding-left:16px;border-left:1px solid var(--line);font:600 12px/1.3 ui-monospace,SFMono-Regular,monospace;white-space:nowrap;color:var(--accent)}
/* The open commit's title gives way first, then the branch name; the beat dots always stay. */
.hud-where-ref{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.hud-where-title{flex-shrink:100;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:500}
.hud-beats{display:flex;align-items:center;gap:5px;flex-shrink:0}
.hud-beats i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--accent);transition:background-color .25s,border-color .25s,transform .25s cubic-bezier(.2,1.4,.4,1)}
.hud-beats i[data-past]{background:var(--accent)}.hud-beats i[data-current]{background:var(--coral);border-color:var(--coral);transform:scale(1.3)}
.hud-counts{display:flex;gap:18px;margin:0;padding:0;list-style:none;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap}
.hud-counts strong{display:block;font:650 15px/1.2 ui-monospace,SFMono-Regular,monospace;color:var(--ink)}.hud-of{margin:0 .35em}.hud-counts li:last-child strong{color:var(--game-gold,#a06d00)}
.hud-views{display:flex;gap:2px}
.hud-views a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 11px;border:1px solid transparent;border-radius:4px;color:var(--ink);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap}
.hud-views a:hover{border-color:var(--line)}.hud-views a[aria-current=page]{background:var(--tint);border-color:var(--line)}
.hud kbd{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}
.hud-tools{display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line)}
.hud-tools button{min-height:36px;min-width:36px;padding:6px 9px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);font-size:12px;font-weight:650;box-shadow:none}
.hud-tools button:hover{border-color:var(--ink);background:var(--tint)}
.hud-tools svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hud-tools [data-theme-toggle] svg path{fill:currentColor;stroke:none}
/* Motion off: the pulse line is struck through, like a muted speaker. */
.hud-tools [data-motion-toggle] .hud-off{display:none}.hud-tools [data-motion-toggle][aria-pressed=true]{color:var(--muted)}.hud-tools [data-motion-toggle][aria-pressed=true] .hud-off{display:block}
.hud [data-profile-open]{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud .platform-switch{max-width:150px;min-height:36px;border-radius:4px;border-color:var(--line);background:transparent;color:var(--ink);font-size:12px}
.hud-app>.storage-feedback:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 20px;border-bottom:1px solid var(--line)}.hud-app>.storage-feedback p{margin:0;flex:1;min-width:200px;font-size:13px}.hud-app>.storage-feedback button{min-height:34px;padding:5px 12px;font-size:12px}

/* ---- Stage ---- */
.hud-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--paper)}.hud-stage:focus{outline:none}
.hud-flow{height:100%;min-height:0}
.hud-stage>.learning-workbench{height:100%;max-height:100%;min-height:0;margin:0;border:0;border-radius:0}
.hud-stage>.page-head{padding:32px}.hud-stage>.page-head+.button{margin-left:32px}
/* The HUD names the open lesson; its title stays for screen readers and the module picker gives way to the map. */
.hud-stage .learning-workbench.wb-lesson{grid-template-rows:auto minmax(0,1fr) auto}
.hud-stage .learning-workbench.wb-lesson>.wb-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hud-stage .game-play,.hud-stage .game-hub{height:100%;min-height:0;margin:0;border:0;border-radius:0}
html[data-hud=game] .hud-stage .game-hud .game-brand{display:none}
/* Inside the HUD a level spans the stage edge to edge; its own console is the only one on screen. */
.hud-stage .game-hub.game-play{padding:0;--hub-content:100%;grid-template-rows:54px auto minmax(0,1fr)}.hud-stage .game-hud,.hud-stage .hub-mission{padding-inline:18px}.hud-stage .hub-workspace{border:0;border-radius:0}.hud-stage .hub-console{border-radius:0}
@media(max-height:499px) and (min-width:700px){.hud-stage .game-hub.game-play{grid-template-rows:42px auto minmax(0,1fr)}}

/* ---- Map ---- */
.hud-map{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;background:var(--surface)}
.hud-map-canvas{min-width:0;min-height:0}
/* A pan never selects text: not on the map, and not anywhere while a drag is in flight (map.js sets the flag). */
.git-map,.git-map *{-webkit-user-select:none;user-select:none}
html[data-map-dragging],html[data-map-dragging] *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing}
.hud-preview{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;overflow:auto;padding:28px 24px 22px;border-left:1px solid var(--line);background:var(--paper)}
.preview-top{display:flex;justify-content:space-between;font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}.preview-top code{font:inherit}
.preview-kind{color:var(--coral);font-weight:700}
.preview-branch{display:block;font:11px ui-monospace,SFMono-Regular,monospace;color:var(--accent);overflow-wrap:anywhere}
.preview-body h2{font-size:24px;line-height:1.2;letter-spacing:-.8px;margin:10px 0 14px;overflow-wrap:anywhere}
.preview-body p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}.preview-body .preview-metric{margin-top:12px;color:var(--ink);font:600 12px ui-monospace,SFMono-Regular,monospace}
.preview-stars{color:var(--game-gold,#a06d00);font:20px ui-monospace,monospace;letter-spacing:4px}
.preview-status{display:flex;align-items:center;gap:8px;margin:auto 0 0;font:600 12px ui-monospace,SFMono-Regular,monospace}
.preview-status i{width:7px;height:7px;border-radius:50%;background:var(--accent)}.preview-status[data-status=done] i{background:var(--good)}.preview-status[data-status=locked] i{background:var(--muted)}
.preview-open{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:4px;background:var(--accent);color:var(--surface);font-weight:700;text-decoration:none;box-shadow:var(--lift)}
.preview-open:hover{background:var(--ink)}.preview-open kbd{font:11px ui-monospace,monospace;opacity:.75}
.preview-reason{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--muted)}.preview-alt{font-size:12px;font-weight:650}
.preview-order{margin:0;padding-top:12px;border-top:1px solid var(--line);font:11px/1.6 ui-monospace,SFMono-Regular,monospace;color:var(--muted)}

/* ---- Journal ---- */
.journal .rp-content{display:flex;min-height:0}
.jr-log{flex:1;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.jr-log header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.jr-log h2{margin:0;font:700 12px ui-monospace,SFMono-Regular,monospace;color:var(--coral)}
.jr-log ol{margin:0;padding:4px 0;list-style:none;overflow:auto;min-height:0}
.jr-log a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:4px 14px;padding:7px 16px;color:var(--ink);text-decoration:none;font-size:13px}
.jr-log a:hover,.jr-log a:focus-visible{background:var(--tint)}
.jr-log code{font:600 12px ui-monospace,SFMono-Regular,monospace;color:var(--game-gold,#a06d00)}
.jr-copy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jr-refs{font:600 12px ui-monospace,SFMono-Regular,monospace;color:var(--accent)}
.jr-meta{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted);white-space:nowrap}.jr-stars{color:var(--game-gold,#a06d00);letter-spacing:2px;font-size:12px}
.jr-log a[data-hue]:not([data-hue=main]) code{color:var(--lane,var(--accent))}
.jr-log [data-hue=release]{--lane:var(--game-gold)}.jr-log [data-hue=m0]{--lane:#216aa5}.jr-log [data-hue=m1]{--lane:#a24c27}.jr-log [data-hue=m2]{--lane:#60731b}.jr-log [data-hue=m3]{--lane:#7f438f}.jr-log [data-hue=m4]{--lane:#1c756c}.jr-log [data-hue=m5]{--lane:#994360}.jr-log [data-hue=m6]{--lane:#4055a4}.jr-log [data-hue=m7]{--lane:#7f5a26}
[data-theme=dark] .jr-log [data-hue=m0]{--lane:#70b7eb}[data-theme=dark] .jr-log [data-hue=m1]{--lane:#eeac86}[data-theme=dark] .jr-log [data-hue=m2]{--lane:#b2c76b}[data-theme=dark] .jr-log [data-hue=m3]{--lane:#caa2d7}[data-theme=dark] .jr-log [data-hue=m4]{--lane:#77c7bd}[data-theme=dark] .jr-log [data-hue=m5]{--lane:#e49bb7}[data-theme=dark] .jr-log [data-hue=m6]{--lane:#aebdff}[data-theme=dark] .jr-log [data-hue=m7]{--lane:#dec08a}

/* ---- Console: a terminal in both themes ---- */
.hud-console{position:relative;z-index:7;display:grid;grid-template-rows:18px minmax(0,1fr) 42px;gap:7px;min-width:0;min-height:0;padding:12px 20px;background:#142332;color:#f4eddd;border-top:1px solid #34495a}
.hud-console-heading{display:flex;gap:16px;align-items:center;font:11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.04em;color:#bcc9d2}
.hud-console-dot{margin-left:6px;color:#86d6b4}.hud-sync{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;text-align:right;color:#93a6b4}
.hud-console-keys kbd{font:inherit;color:#d8e2ea}
#hud-output{margin:0;padding:0;overflow:auto;border:0;background:transparent;font:12px/18px ui-monospace,SFMono-Regular,monospace;color:#c9d6e0;white-space:pre-wrap;max-height:none}
#hud-output b{color:#f0cc7a;font-weight:500}#hud-output .command{color:#f0cc7a}#hud-output .error{color:#ffb2a3}#hud-output .hint{color:#a9c9ee}
#hud-output:focus-visible{outline:2px solid #a3c3ff;outline-offset:-2px}
#hud-form{display:flex;align-items:center;gap:12px;min-width:0;padding:3px 4px 3px 12px;border:1px solid #60778b;border-radius:4px;background:#0d1b28}
#hud-form:focus-within{border-color:#a3c3ff;box-shadow:0 0 0 2px #a3c3ff}
.hud-prompt{color:#f6ae8b;font-size:18px}
#hud-command{flex:1;min-width:0;height:32px;padding:5px 0;border:0;outline:0;background:transparent;color:#f4eddd;font:14px ui-monospace,SFMono-Regular,monospace;box-shadow:none}
#hud-command::placeholder{color:#93a6b4;opacity:1}
#hud-run{min-height:32px;padding:5px 12px;border:0;border-radius:3px;background:#eab8a0;color:#142332;font-size:12px;font-weight:700;box-shadow:none}#hud-run:focus-visible{outline:2px solid #a3c3ff;outline-offset:2px}
.hud-suggestions{position:absolute;right:20px;bottom:calc(100% - 6px);justify-content:flex-end;z-index:10;display:flex;flex-wrap:wrap;gap:6px;max-width:min(calc(100% - 340px),720px);padding:8px;border:1px solid #60778b;border-radius:4px;background:#142332}.hud-suggestions:empty{display:none}
.hud-suggestions button{min-height:30px;padding:3px 9px;border:1px solid #60778b;border-radius:3px;background:#21384a;color:#f4eddd;font:12px ui-monospace,SFMono-Regular,monospace;box-shadow:none}
/* Long results unfold above the console, over the stage, and fold back on Escape or the next click elsewhere. */
.hud-console[data-expanded=true] #hud-output{position:absolute;left:0;right:0;bottom:100%;height:45dvh;padding:14px 20px;background:#142332;border-top:1px solid #60778b;white-space:pre;line-height:18px}
.hud-console[data-expanded=true]::before{content:'Page↑ / Page↓ pour parcourir · Échap pour replier';grid-row:2;align-self:center;font:11px ui-monospace,SFMono-Regular,monospace;color:#bcc9d2}

/* ---- Discovery keeps its own paper ---- */
html[data-hud=discover] .hud-stage{background:var(--paper)}

/* ---- Motion ---- */
@media(prefers-reduced-motion:no-preference){html[data-motion=on][data-enter] .hud-map{animation:hud-in .35s cubic-bezier(.2,.7,.2,1) both}@keyframes hud-in{from{opacity:.4}}}
html[data-motion=off] .hud-app *,html[data-motion=off] .hud-app *::before,html[data-motion=off] .hud-app *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hud-app *,.hud-app *::before,.hud-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Narrower desktops ---- */
@media(max-width:1180px){.hud{gap:10px;padding:0 14px}.hud-where{padding-left:10px}.hud-counts{gap:12px}.hud-counts strong{font-size:13px}.hud-views kbd{display:none}.hud-tools{padding-left:8px;gap:4px}.hud .platform-switch{max-width:110px}.hud [data-profile-open]{max-width:96px}.hud-map{grid-template-columns:minmax(0,1fr) 260px}.hud-preview{padding-inline:18px}.preview-body h2{font-size:21px}}
@media(max-width:900px) and (min-width:700px){.hud-mark{font-size:24px}.hud-counts{font-size:10px}.hud-counts strong{font-size:12px}.hud-views a{padding:6px 7px;font-size:12px}.hud .platform-switch{max-width:96px;font-size:11px}.hud [data-profile-open]{max-width:76px}}

/* ---- Phones: three masthead rows; the map's preview goes under the map ---- */
@media(max-width:699px){
 .hud-app{--hud-height:88px}
 /* Three slim rows from one flex line: the two pseudo-elements are the line breaks. */
 .hud{flex-wrap:wrap;align-content:space-evenly;gap:0 6px;padding:1px 10px}.hud::before,.hud::after{content:'';flex-basis:100%;height:0}
 .hud-tools{display:contents}
 .hud-mark{order:1;flex:1;font-size:22px}.hud-views{order:2}.hud [data-profile-open]{order:3}.hud::before{order:4}
 .hud-where{order:5;flex:1;padding:0 2px;border:0;font-size:10px;gap:8px}.hud-where-title{display:none}.hud-where-ref{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.hud [data-course-switch]{order:6}.hud::after{order:7}
 .hud-counts{order:8;flex:1;gap:12px;font-size:9px;align-items:baseline}.hud-counts strong{display:inline;font-size:11px}.hud-of{margin:0 1px}.hud [data-motion-toggle]{order:9}.hud [data-theme-toggle]{order:10}
 .hud-views kbd{display:none}.hud-views a{padding:2px 8px;font-size:12px;min-height:28px}
 .hud [data-profile-open]{max-width:84px;min-height:28px;padding:2px 8px;font-size:11px}
 .hud .platform-switch{max-width:100px;min-height:24px;height:24px;padding:0 6px;font-size:11px}
 .hud [data-motion-toggle],.hud [data-theme-toggle]{min-height:24px;min-width:28px;height:24px;padding:2px}.hud-tools svg{width:16px;height:16px}
 .hud-map{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
 .hud-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;max-height:190px;padding:10px 14px;border-left:0;border-top:1px solid var(--line)}
 .preview-top,.preview-body,.preview-order,.preview-reason{grid-column:1/-1}.preview-body h2{font-size:17px;margin:3px 0 6px}.preview-body p{font-size:11px;line-height:1.45}.preview-body .preview-metric{margin-top:5px;font-size:11px}
 .preview-body p:not(.preview-metric){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.preview-order{display:none}
 .preview-status{margin:0;font-size:10px}.preview-stars{font-size:13px}.preview-open,.preview-alt{grid-column:2;min-height:32px;padding:5px 10px;font-size:12px}.preview-order,.preview-reason{padding-top:6px;font-size:10px}
 .jr-log a{grid-template-columns:auto minmax(0,1fr) auto}.jr-meta{grid-column:2/-1;grid-row:2}
 .hud-console{padding-inline:8px}.hud-suggestions{right:8px;max-width:calc(100% - 16px)}
}
/* Short landscape screens: one compact masthead row. */
@media(max-height:499px) and (min-width:700px){.hud-app{--hud-height:46px}.hud-mark{font-size:22px}.hud-counts{font-size:9px}.hud-counts strong{font-size:12px}.hud-views a,.hud-tools button{min-height:32px}.hud-map{grid-template-columns:minmax(0,1fr) 240px}.hud-preview{padding:14px 14px 10px;gap:8px}.preview-body h2{font-size:18px;margin:6px 0 8px}.preview-body p{font-size:11px}.preview-order{font-size:10px}.preview-open{min-height:32px;font-size:12px}}
/* Small or short screens fold the console to its prompt until it is used. */
@media(max-width:699px),(max-height:499px){
 .hud-app{--console-height:44px}.hud-app:has(.hud-console:focus-within){--console-height:136px}
 .hud-console{grid-template-rows:36px;padding:4px 8px}.hud-console-heading,#hud-output{display:none}
 .hud-console:focus-within{grid-template-rows:minmax(0,1fr) 36px;padding-top:6px}.hud-console:focus-within #hud-output{display:block}
 #hud-command{height:28px;font-size:12px}#hud-run{min-height:28px;padding:2px 8px;font-size:11px}
 .hud-console[data-expanded=true]::before{display:none}.hud-console[data-expanded=true] #hud-output{display:block;padding:8px 12px;font-size:11px;line-height:16px}
 .hud-console[data-expanded=true]:focus-within #hud-form{grid-row:2}
}
/* Short phone landscape: the three-row masthead would leave a level no board and the map no canvas. A level takes
   the whole screen and keeps its own way back; the map's preview sits beside the canvas instead of under it. */
@media(max-width:699px) and (max-height:499px){
 html[data-hud=game] .hud-app{--hud-height:0px}html[data-hud=game] .hud{display:none}html[data-hud=game] .hud-stage .game-hud .game-brand{display:flex}
 .hud-map{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr)}.hud-preview{max-height:none;border-top:0;border-left:1px solid var(--line)}
}