/* tmpfs.tech "Console" layout.
Loaded after app.css and overrides it: a left navigation rail, a top
bar with catalog search (⌘K), sans-serif UI with monospace kept for
anything that is code. app.css still owns component behaviour and the
page-state classes (play-mode, pre-session, maxterm, …); this file only
changes where things sit and how they look. To roll back, remove the
block in index.html. */
:root {
/* Colour tokens (--bg/--panel/--border/--fg/--accent) are deliberately
NOT overridden: every other page (/about, /c/…, /u/…, certificates,
README badges) shares them, and tests/suites/pages.mjs pins parity. */
--rail-w:212px; --top-h:53px; --tabs-h:58px;
--hover:#1c2129; --active:#21262d;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
body { font:14px/1.5 var(--sans); padding-left:var(--rail-w); -webkit-font-smoothing:antialiased; }
code, kbd, pre, samp, #idle, #creds, #edcontent, .epath, #introTerm, #introTask,
#status, .lbtable td.num, .cmddiff, .meta { font-family:var(--mono); }
button { border-radius:8px; }
button.primary { font-weight:650; }
:focus-visible { outline:2px solid #7ab8ff; outline-offset:2px; }
/* ---------------------------------------------------------------- rail */
#rail { position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:20;
display:flex; flex-direction:column; gap:2px; padding:14px 10px;
background:var(--bg); border-right:1px solid var(--border); overflow-y:auto; }
#rail .brandblock { display:block; padding:3px 10px 16px; }
#rail h1 { margin:0; font:700 15px/1.2 var(--mono); color:var(--fg); cursor:pointer; }
#rail h1:hover { text-decoration:none; }
#rail h1 .bt2 { color:var(--accent); }
#rail h1 .bt3 { position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; }
#rail .tag { display:none; }
#modebar { display:flex; flex-direction:column; gap:2px; justify-content:flex-start; }
#modebar button, #navmenu button {
width:100%; min-width:0; text-align:left; padding:8px 10px; border:0;
border-radius:8px; background:none; color:var(--muted); font:500 14px/1.4 var(--sans);
letter-spacing:0; box-shadow:none; transform:none; filter:none; }
#modebar button:hover, #modebar button:focus-visible,
#navmenu button:hover, #navmenu button:focus-visible,
#modebar button.primary.on:hover, #modebar button.primary.on:focus-visible {
background:var(--hover); color:var(--fg); transform:none; box-shadow:none;
filter:none; border-color:transparent; }
#modebar button.on, #modebar button.primary.on, body:has(#panel.show) #navmenu button.on {
background:var(--active); color:var(--fg); box-shadow:none; }
#modebar button.primary.on { box-shadow:inset 2px 0 0 var(--accent); }
#nav { display:flex; flex-direction:column; margin-top:18px; position:static; justify-self:auto; }
#nav::before { content:"You"; font:600 11px/1 var(--sans); letter-spacing:.08em;
text-transform:uppercase; color:#666c78; padding:0 10px 8px; }
#navMenuBtn { display:none; }
#navmenu { position:static; display:grid; gap:2px; min-width:0; padding:0;
background:none; border:0; box-shadow:none; }
#nav button { font-size:14px; padding:8px 10px; }
/* -------------------------------------------------------------- top bar */
header { position:sticky; top:0; z-index:15; height:var(--top-h); padding:0 20px;
display:flex; align-items:center; gap:12px; background:var(--bg);
border-bottom:1px solid var(--border); }
.topbrand { display:none; font:700 15px/1 var(--mono); color:var(--fg); text-decoration:none; }
.topbrand span { color:var(--accent); }
#cmdk { flex:1 1 auto; max-width:520px; min-width:0; display:flex; align-items:center; gap:10px;
padding:8px 12px; background:var(--panel); border:1px solid var(--border);
border-radius:9px; color:var(--muted); font:400 14px/1.3 var(--sans); text-align:left; }
#cmdk:hover, #cmdk:focus-visible { border-color:#3a3f4b; color:var(--fg); transform:none; box-shadow:none; }
#cmdk .cmdk-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
kbd { font-size:11px; border:1px solid var(--border); border-radius:5px; padding:1px 6px;
color:var(--muted); background:var(--bg); }
header .grow { display:block; flex:1 1 0; }
#who { margin-left:auto; max-width:none; text-align:right; font-size:13px; }
/* ------------------------------------------------------------- palette */
#cmdpal { position:fixed; inset:0; z-index:90; background:#000a;
display:grid; place-items:start center; padding:12vh 16px 0; }
#cmdpal[hidden] { display:none; }
.cmdpal-box { width:min(600px,100%); background:var(--panel); border:1px solid #3a3f4b;
border-radius:12px; overflow:hidden; box-shadow:0 30px 80px #000c; }
#cmdq { width:100%; background:none; border:0; border-bottom:1px solid var(--border);
outline:0; padding:15px 16px; font:400 16px/1.3 var(--sans); color:var(--fg); }
#cmdres { max-height:min(52vh,420px); overflow-y:auto; }
.cmdrow { display:flex; align-items:center; gap:12px; width:100%; padding:10px 16px;
border:0; border-bottom:1px solid var(--border); border-radius:0; background:none;
color:var(--fg); font:400 14px/1.4 var(--sans); text-align:left; }
.cmdrow:hover, .cmdrow.sel { background:var(--active); transform:none; box-shadow:none; }
.cmdtitle { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdmeta { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.cmddot { width:8px; height:8px; border-radius:50%; background:#3a3f4b; flex:none; }
.cmddot.done { background:var(--accent); }
.cmddiff { font-size:11.5px; padding:1px 7px; border-radius:5px; border:1px solid var(--border); color:var(--muted); }
.cmddiff.easy { color:#3fb950; border-color:#1f4a35; }
.cmddiff.medium { color:#f2c063; border-color:#4d3d1c; }
.cmddiff.pro { color:#ff9a9a; border-color:#4d2424; }
.cmdempty { padding:18px 16px; color:var(--muted); }
.cmdpal-foot { display:flex; gap:16px; padding:9px 16px; color:var(--muted); font-size:12px; }
.cmdpal-foot kbd { margin-right:4px; }
/* ---------------------------------------------------------------- main */
main { height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h)); }
#catalog { padding:12px; }
#stage { padding:16px 20px; }
body.play-home #stage, body.leaderboard-home #stage { padding:24px 24px 34px; }
/* catalog: flat section headers, dense rows */
.navhead { border:0; background:none; border-radius:8px; padding:7px 10px; margin:2px 0;
font:600 12px/1.4 var(--sans); letter-spacing:.06em; box-shadow:none; }
.navhead.track { background:none; border:0; color:var(--fg); font-size:12.5px; }
.navhead.easy, .navhead.medium, .navhead.pro { background:none; border:0; }
.navhead.easy { color:#3fb950; } .navhead.medium { color:#f2c063; } .navhead.pro { color:#ff9a9a; }
.navhead:hover, .navhead:focus-visible { background:var(--hover); border:0; box-shadow:none; transform:none; }
.navhead:focus-visible { outline:2px solid #7ab8ff; outline-offset:-2px; }
.navgroup:not(.collapsed) > .navhead { box-shadow:none; }
.diffgroup > .navhead { font-size:11px; padding:5px 10px; margin:2px 0; }
.track > .gbody { margin:0 0 6px 10px; padding-left:8px; }
.card { background:none; border:1px solid transparent; border-radius:8px; padding:9px 10px; margin-bottom:2px; }
.card:hover { background:var(--hover); border-color:transparent; }
.card.active { background:var(--active); border-color:var(--border); box-shadow:inset 2px 0 0 var(--accent); }
.card h3 { font:550 14px/1.35 var(--sans); }
.meta { font-size:11px; }
/* action bar */
#bar { gap:8px; margin-bottom:12px; }
#bar button { font:500 13px/1.3 var(--sans); padding:7px 12px; }
#bar button.primary { font-weight:650; }
#termwrap { border-radius:10px; }
/* ------------------------------------------------------- play / home */
body.play-home .playhome { display:flex; flex-wrap:wrap; gap:12px; }
body.play-home .playhome > * { flex:1 1 100%; min-width:0; }
body.play-home .playhome > .playcard { flex:1 1 380px; }
body.play-home .playviz { order:-1; gap:12px; }
.playcard, .playpanel, .leaderboardhero, .leaderboardpanel, .problemboard-card, .playlog-item,
.playstat, .playbar { border-radius:10px; }
body.play-home .playcard, .playcard { background:var(--panel); border:1px solid var(--border);
box-shadow:none; padding:20px; }
.playpanel, .leaderboardpanel { background:var(--panel); box-shadow:none; }
.leaderboardhero { background:var(--panel); box-shadow:none; padding:22px; }
body.play-home .playkicker, .playkicker, .playviz-head, .playpanel-kicker, .playpanel-head, .playhero-kicker {
font:600 11.5px/1.3 var(--sans); letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
body.play-home .playtitle, .playtitle, .playhero-title { font:650 22px/1.2 var(--sans);
letter-spacing:-.01em; max-width:none; margin:0 0 8px; }
body.play-home .playsub, .playsub, .playhero-copy { font-size:14px; line-height:1.55; max-width:70ch; margin:0 0 14px; }
.playstat { background:var(--panel); padding:14px; }
.playstat span { font:500 12px/1.3 var(--sans); letter-spacing:0; text-transform:none; }
.playstat strong { font:600 22px/1.3 var(--mono); letter-spacing:-.02em; }
.playbar { background:var(--panel); }
.playstat.hoverable:hover, .playbar.hoverable:hover { transform:none; box-shadow:none; border-color:#3a3f4b; }
.playlog-item { background:var(--bg); }
.playhome-footer { padding-top:6px; }
/* ----------------------------------------------------- challenge view */
#notepad:not(.graded) .sheet { border-radius:10px; background:var(--panel); border:1px solid var(--border); box-shadow:none; }
#notepad:not(.graded) .sheet h2 { font:650 20px/1.25 var(--sans); letter-spacing:-.01em; }
#notepad:not(.graded) .sheet .sub { font:600 11.5px/1.4 var(--sans); letter-spacing:.08em; }
#notepad:not(.graded) .sheet pre { font:15px/1.6 var(--sans); }
#notepad:not(.graded) .sheet pre code { font:13px/1.5 var(--mono); }
#term { border-radius:10px; }
.problemboard-card { background:var(--panel); box-shadow:none; }
/* ------------------------------------------------------ phone / tablet */
@media (max-width:1180px) {
main { height:auto; min-height:calc(100vh - var(--top-h)); min-height:calc(100dvh - var(--top-h)); }
/* the page itself scrolls at these widths, so the bar scrolls with it */
header { align-items:center; position:static; }
#who { max-width:none; }
#navmenu { left:auto; right:auto; min-width:0; }
/* main is auto-height here, so a flex:1 terminal would collapse to
nothing once the brief and action bar are taller than the viewport. */
#termwrap { min-height:min(56vh,460px); }
}
@media (max-width:900px) {
body { padding-left:0; padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
#rail { top:auto; right:0; width:auto; height:calc(var(--tabs-h) + env(safe-area-inset-bottom));
padding:6px 6px calc(6px + env(safe-area-inset-bottom)); flex-direction:row; align-items:stretch;
gap:4px; border-right:0; border-top:1px solid var(--border); overflow:visible; }
#rail .brandblock { display:none; }
#modebar { flex-direction:row; flex:1 1 auto; gap:4px; flex-wrap:nowrap; width:auto; }
#modebar button { flex:1 1 0; min-width:0; text-align:center; padding:6px 4px; font-size:13px; }
#modebar button.primary.on { box-shadow:inset 0 -2px 0 var(--accent); }
#nav { margin:0; position:relative; flex:0 0 auto; width:auto; flex-direction:row; }
#nav::before { display:none; }
#navMenuBtn { display:block; height:100%; min-width:48px; border:0; background:none; color:var(--muted); font-size:18px; }
#navmenu { display:none; position:absolute; top:auto; bottom:calc(100% + 10px); right:0; left:auto;
min-width:210px; padding:6px; background:var(--panel); border:1px solid var(--border);
border-radius:10px; box-shadow:0 12px 32px #000a; }
#nav.open #navmenu { display:grid; }
header { padding:0 12px; gap:10px; }
.topbrand { display:block; }
#cmdk { flex:0 1 auto; padding:8px 10px; }
#cmdk kbd { display:none; }
main { min-height:calc(100vh - var(--top-h) - var(--tabs-h)); min-height:calc(100dvh - var(--top-h) - var(--tabs-h)); }
#stage { padding:12px; }
body.play-home #stage, body.leaderboard-home #stage { padding:16px 12px 24px; }
body.play-home .playviz { order:0; }
.playviz-grid { grid-template-columns:1fr 1fr; }
/* a running session owns the screen: fold the catalog strip away */
body.has-session #catalog { max-height:0; padding:0; border:0; overflow:hidden; }
}
@media (max-width:700px) {
header { grid-template-columns:none; }
#modebar, #nav { width:auto; }
#who { width:auto; text-align:right; }
#cmdk .cmdk-label { display:none; }
}
/* keep the maximize arrow off the editor header text */
#editor .ehead { padding-left:44px; padding-right:44px; }
/* "Ready to start" prompt. app.css lays the out as a grid, which
turns every span AND every bare text run into its own row, so
"▶ Press Start challenge to …" broke into fragments and overflowed
the short pre-session box. Flow it as ordinary pre-wrapped lines,
clear of the two corner buttons, in a box tall enough to show it. */
#idle .selected-prompt { display:block; white-space:pre-wrap; line-height:1.75;
padding:0 40px; }
body.pre-session #termwrap { flex:0 0 196px; min-height:196px; }
/* sign-in chooser: one column of equal-width provider buttons */
#gate .gbtn { min-width:250px; justify-content:center; }