/* STARNET — app.css : screens for the REAL harness (title · connect · game). Reuses the v7 phosphor/CRT design language from style.css (vars + body::before/after). No "web app" softness — 2px hard lines, inverted-block headers, heavy bloom. */ /* ---------- screen scaffolding ---------- */ .screen { position: fixed; inset: 0; display: none; z-index: 10; } .screen.active { display: flex; } /* boot veil — the neutral holding-card shown during init()'s async gap before the boot router picks a real screen. Solid ink so there's never a flash of the wrong screen (the old #screen-connect .active bug); reuses the phosphor vars so it matches whatever theme is about to load. */ #screen-boot { background: var(--ink); align-items: center; justify-content: center; } .boot-veil { text-align: center; opacity: .82; animation: boot-fade 2.4s ease-in-out infinite; } .boot-mark { color: var(--ph-bright); font-size: 30px; letter-spacing: 8px; text-shadow: 0 0 14px var(--ph-glow), 0 0 3px var(--ph-glow); } .boot-line { color: var(--ph-dim); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; margin-top: 12px; } .boot-dots::after { content: '…'; animation: cc-blink 1.1s steps(1) infinite; } @keyframes boot-fade { 0%, 100% { opacity: .62; } 50% { opacity: .9; } } @media (prefers-reduced-motion: reduce) { .boot-veil { animation: none; } .boot-dots::after { animation: none; } } #screen-connect.active { align-items: center; justify-content: center; } /* THE CABINET IS HARDWARE — TEXT SIZE is a type dial, not a magnifying glass. body carries the TEXT SIZE zoom (stationui.js applySettings), and it multiplies into every length below, so the whole frame used to swell with the text: at HUGE the crew rail went 232→336px and COMMS 360→522px, and the station view — the thing you are actually watching — was squeezed 1279→995px (-29% area). --sn-unzoom is the exact reciprocal, so every CABINET dimension here resolves back to the size it was designed at while the type inside still grows. `1fr` then hands the reclaimed space to the stage automatically. Unset (the 100% default) resolves to 1, i.e. these are the shipped numbers untouched. --chat-w (chatresize.js, the draggable COMMS seam) and --crew-w (leftrail.js, the CREW seam) are written in VISUAL px for the same reason, so a dragged width means the same thing at every text size. */ #screen-game.active { display: grid; grid-template-rows: calc(64px * var(--cz)) 1fr calc(44px * var(--cz)); /* both side columns are live vars so the user can drag either divider (leftrail.js / chatresize.js) */ grid-template-columns: calc(var(--crew-w, 232px) * var(--cz)) 1fr calc(var(--chat-w, 360px) * var(--cz)); grid-template-areas: "top top top" "left center chat" "bot bot bot"; padding: calc(11px * var(--cz)); gap: calc(9px * var(--cz)); } /* The cabinet BLOCKS whose whole content is hardware — the instrument bar, the dock, and the two molded nameplates with their engraved labels. Their boxes are now fixed by the grid above, so their contents have to come back to 1:1 too or they overflow a box that no longer grew with them. One declaration each resets a whole subtree, which is why this is a `zoom` and not a per-property counter-scale. #logo is a child (hoisted over the CRT glass) rather than a topbar descendant, so it needs its own — app.js positionLogo() measures the effective ratio off the element, so it follows this either way. `.ws-head` (SESSIONS / PROJECTS / + NEW) is here too, and that was measured rather than assumed: it is a control strip, so the first pass let it scale with the type — and in a rail that no longer widens, 45% bigger tabs ran straight off the edge and clipped "+ NEW". A view switcher that loses a button is worse than one that stays the size it was drawn at, so it is furniture. `--cz: 1` because these subtrees are already at 1:1: it keeps `calc(px * var(--cz))` (style.css `body`) correct on BOTH sides of the counter-zoom line, so shared rules like the panel bezel radius need no fork. */ #topbar, #bottombar, #logo, #left > h3, #chat-panel > h3, .ws-head { zoom: var(--sn-unzoom, 1); --cz: 1; } .hidden { display: none !important; } /* visually-hidden but exposed to assistive tech (screen-reader-only live regions / labels) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dim { color: var(--ph-dim); } .dimb { color: var(--ph-dim); font-weight: normal; } .pos { color: var(--gold); } .muted { color: var(--text); opacity: 0.82; } /* ---------- shared inputs / buttons ---------- */ .btn, .btn-xl, .btn-sm, .prov { font-family: inherit; color: var(--ph); background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 8%, var(--panel2)), var(--panel2)); border: 1px solid var(--ph-dim); border-radius: 5px; padding: 7px 15px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; line-height: 1; text-shadow: 0 0 6px var(--ph-glow2); box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .12), 0 1px 0 rgba(0,0,0,.4); transition: color .12s, border-color .12s, background-color .12s, box-shadow .12s, transform .12s; } .btn:hover, .btn-xl:hover, .btn-sm:hover, .prov:hover { border-color: var(--ph); background: var(--ph-faint); color: var(--ph-bright); box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .18), 0 0 10px var(--ph-glow2), 0 1px 0 rgba(0,0,0,.4); } .btn:active, .btn-xl:active, .btn-sm:active, .prov:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); } .btn:focus-visible, .btn-xl:focus-visible, .btn-sm:focus-visible, .prov:focus-visible { outline: 2px solid var(--ph-bright); outline-offset: 2px; } .btn-xl { font-size: 26px; padding: 13px 27px; border-color: var(--ph); box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .16), 0 0 0 2px rgba(0,0,0,.85), 0 0 18px var(--ph-glow2); } .btn-sm { font-size: 15px; padding: 5px 10px; } .prov.sel { background: linear-gradient(180deg, var(--ph-bright) -40%, var(--ph) 60%); color: var(--ink); border-color: var(--ph); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 10px var(--ph-glow2); } /* ---------- COMPACT CONSOLE KEYS — .bb.sm / .bb.xs ---------- The ~105 in-window action buttons (ADD KEY · SIGN IN · REVOKE · RUN NOW · REFRESH …). They were the one control family that never got the material pass: flat hollow rectangles with hard 90° corners, sitting inside cards that are rounded and raised, and hanging off the surrounding text's BASELINE. Reported 2026-08-03 (Andrew, SETTINGS ▸ PROVIDERS: "ugly and not even centered correctly"). Both halves were measured live before this rule existed, not guessed: 1. GEOMETRY — every provider row read the button's centre 2.50px above its status text's centre. The cause is baseline layout, and it cannot be nudged away with a margin: EVERY label in this family mixes VT323 with a symbol glyph VT323 does not contain (＋ ⏼ ✕ ▸ ↻ ⌫ all fall back to a system font — measured at 2.0–3.2× VT323's monospace advance), so the label carries two different baselines before it even meets the text beside it. inline-flex + centre + line-height:1 centres the label on the BOX instead, which is level by construction. 2. MATERIAL — the molded keycap the rest of the console already wears (.btn above, .bb-grp in panelchrome.css): top light, phosphor body, shaded base, contact shadow, press sink. Matte, never glossy. Only the surface and the radius change; the compact metrics stay compact so no caller reflows. Deliberately NOT the CONTROL FLOOR (see the block near line 100): that floor is element-level and must never carry box metrics, radius or shadow. This is a real surface class, which is exactly where material belongs. Per-surface skins still override (.mkt .bb.sm keeps the bay's tighter metrics), and the canonical danger-armed rule still wins on !important. */ .bb.sm, .bb.xs { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 6%, var(--panel2)) 0%, var(--panel2) 58%, color-mix(in srgb, #000 20%, var(--panel2)) 100%); box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .08), inset 0 -2px 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.45); } /* 5px, not the 3px this rule replaced, and not the 7px a first pass guessed at. Measured: the label's line box is 17.05px at this font size (line-height:1 sets a 13px STRUT, but VT323's own ascent+descent still win the line box, so line-height alone shrinks nothing). 17.05 + 10 + 2px border = 29.05px — within a fifth of a pixel of the 28.88px key this replaced, so all ~105 call sites keep their rhythm. */ .bb.sm { padding: 5px 12px; } .bb.sm:hover, .bb.xs:hover { color: var(--ph-bright); border-color: var(--ph); background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 11%, var(--panel2)) 0%, var(--panel2) 62%, color-mix(in srgb, #000 16%, var(--panel2)) 100%); box-shadow: inset 0 1px 0 rgba(var(--ph-rgb), .12), inset 0 -2px 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.45), 0 0 10px var(--ph-glow2); } /* pressed = the key is DOWN: the seat sinks and the base light goes out (same verb as .bb-grp) */ .bb.sm:active, .bb.xs:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.42); } input[type=text], input[type=password], input[type=url], input[type=search], input:not([type]), textarea.key-input { width: 100%; font-family: inherit; font-size: 19px; color: var(--ph-bright); background: linear-gradient(180deg, #000, color-mix(in srgb, var(--ph) 3%, #000)); border: 1px solid var(--ph-dim); border-radius: 4px; padding: 8px 11px; outline: none; text-shadow: 0 0 5px var(--ph-glow2); box-shadow: inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(var(--ph-rgb),.06); transition: border-color .12s, box-shadow .12s; } input:focus, textarea.key-input:focus { border-color: var(--ph); box-shadow: inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(var(--ph-rgb),.08), 0 0 12px var(--ph-glow2); } /* solid --ph-dim (no opacity multiplier) keeps placeholder hint text >=4.5:1 (WCAG AA) on --bg across every theme; .7 opacity dropped it to ~3.2:1 */ input::placeholder, textarea.key-input::placeholder { color: var(--ph-dim); opacity: 1; } /* ---------- CONTROL FLOOR — NO control may ever paint itself with OS chrome ---------- LAW (2026-07-27, Andrew): every control in this product is station hardware. The browser's own paint — buttonface white, ButtonBorder grey, black system text — is a BUG here, every single time it surfaces, and it has surfaced repeatedly (the SURFACE/REFIT bare