/* =========================================================================== gate.css — everything live.js renders, and nothing else WHY THIS FILE EXISTS. web/import.html was the last screen with a wholly private stylesheet, which is why it was also the last one with a wholly private sign-in. Folding it onto the common gate meant giving it the CSS the gate needs — and linking the whole of app.css turned out to be the wrong way to do that. build-shell has a check for exactly this failure: a page that reuses an app.css class name inherits the half it did not set. import.html defines .btn, .card and main, and so does app.css. The two merge rather than one winning, and the result is a page that is subtly wrong in ways neither stylesheet reads as wrong on its own. Satisfying that check property by property would have been gaming it. So the rules live.js actually renders are HERE, in one file, and a page can take the gate without taking a design system it was not built against. app.css imports this at its top, so the eight screens that link app.css and the four built pages that inline it are unchanged and there is still exactly one definition of each rule. THE TOKENS BELOW ARE FALLBACKS, not the source of truth. app.css redefines every one of them immediately after importing this — including the dark-mode values — so these only apply on a page that links gate.css alone. Three of them (--forest-d, --raise, --line2) exist nowhere in import.html and the gate would render with unset colors without them. =========================================================================== */ :root{ --cream:#f2f0ea; --surf:#faf9f5; --raise:#ffffff; --ink:#22301a; --muted:#6f6a5e; --line:#e4e0d2; --line2:#d6d1bf; --forest:#2e5e1e; --forest-d:#234a16; --sage:#87a05c; --red:#8b1a1a; } /* ---------- the account button and its menu ---------- */ .who{ width:28px; height:28px; border-radius:50%; background:var(--sage); color:#12240b; display:grid; place-items:center; font-weight:700; font-size:11.5px; border:0; } .who:hover{background:#9dba7f} /* The account menu. It carried hardcoded initials and no handler on all four screens, so the only way out of the app was to find the one page that still had a Sign out button. Two people sharing a machine could not tell whose session they were in. Mounted from live.js — see mountAccountMenu(). */ .whomenu{ position:fixed; z-index:60; min-width:200px; padding:6px; background:var(--raise); border:1px solid var(--line2); border-radius:12px; box-shadow:var(--shadow); color:var(--ink); } .whomenu[hidden]{display:none} .whomenu .whoem{ padding:7px 10px 8px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; } /* The control-room entry is an rather than a