/* ============================================================================ studio-auth-supplement.css — the auth-surface rules that belong to Studio, layered on top of the shared shell (_content/Vahary.Branding/vahary-auth-shell.css, Vahary.Branding.Assets 0.6.0). THE ONE RULE FOR THIS FILE: it may only ADD elements the shared shell does not have. It must never restate, override, or "improve" a shell rule. That rule is the whole point. Studio used to vendor its own copy of the shell, and the copy drifted badly — 342 of its 388 lines differed from the package's, with only 91 lines common to both — because the tokens had been renamed to a --vh-* prefix and the class vocabulary with them. Nothing caught it: a stylesheet that no longer matches its own markup still compiles and still passes every test. It only looks wrong. Anything in here that duplicates the shell is the beginning of that same divergence, so if a rule below ever needs to change because the SHELL changed, it is in the wrong file — push it upstream instead. Everything here is expressed in the shell's own --vh-* tokens and hangs off .vh-shell, so it inherits the tenant accent and the Night ground rather than carrying a second opinion about either. Studio-owned classes take a `studio-` prefix so this file can never collide with a class a future shell release decides to claim. Deliberately NOT carried over from the vendored sheet, because the shell now owns them and restating would re-open the divergence: .brand img / .brand .tname -> .vh-brand img / .vh-brand-textmark (white-label brand slots are a shell concern, and the shell styles both shapes) a.quiet -> .vh-quiet the four @font-face blocks -> wwwroot/vahary.css already self-hosts the same four woff2 subsets under the same family names Dropped as dead rather than moved: .frow, input.otp, .validation-errors, .validation-message and input.invalid (Studio's auth pages use a plain
with hand-rolled validation — there is no EditForm on either surface), and .tall (see MonumentShell.Tall: the v2 root grows instead of clipping). ============================================================================ */ /* ---------------- host layout ---------------- */ /* AuthLayout's host element,
. This is the one rule in the old vendored sheet that had nothing to do with the shell's own look, and it is the one most easily lost: v1's root was `position:fixed; inset:0`, so it escaped its host entirely and the host only ever had to supply a ground colour. The v2 root is `position:relative`, so the host's box IS the shell's box — every constraint on this element is now a constraint on the login. Keeping it explicitly `display:block` with no padding is what keeps the shell full-bleed; the ground colour still matters because the body underneath is Bootstrap's white and shows through on overscroll. The ground is a literal, not var(--vh-void): the shell defines its tokens on .vh-shell itself, which is this element's CHILD, so they are not in scope here. It matches --vh-void by value. */ .auth-shell { display: block; background: #0D1013; min-height: 100vh; padding: 0; margin: 0; } /* Belt-and-braces for the org disclosure below, which hides its field group with the `hidden` attribute rather than a class. The UA sheet's [hidden] rule is display:none with NO !important, so any component library that gives .vh-fgroup a display would silently reveal a field the page believes is collapsed. The shell has no opinion on [hidden]. */ .vh-shell [hidden] { display: none !important; } /* ---------------- the org-scope disclosure ---------------- */ /* Studio's sign-in needs an organization ID (a GUID) to scope the token request — a functional requirement, not a first-class field, and asking for a GUID as the first thing on the page reads as a developer console rather than a sign-in. So it is demoted to a collapsed "Organization" disclosure in the mono label voice, and SignIn re-opens it whenever the org id is missing or invalid on submit, so the requirement is never hidden from a user who trips it. No other product in the estate has this affordance, which is why it is here and not in the shell. */ .vh-shell .studio-disclose { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--vh-font-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--vh-steel); transition: color var(--vh-touch-dur); } .vh-shell .studio-disclose:hover, .vh-shell .studio-disclose:focus-visible { color: var(--vh-paper); } .vh-shell .studio-chev { display: inline-block; color: var(--vh-accent-bright); transition: transform 180ms var(--vh-rise-ease); } .vh-shell .studio-disclose[aria-expanded="true"] .studio-chev { transform: rotate(90deg); } /* ---------------- element gaps the shell does not cover ---------------- */ /* .vh-quiet is written for an — it sets colour, size and the underline hairline, but nothing that a