/* ============================================================================ integratoros-auth-supplement.css — the auth-surface rules that belong to IntegratorOS, layered on top of the shared shell (_content/Vahary.Branding/vahary-auth-shell.css). Load order matters: the package sheet first, this second. THE ONE RULE FOR THIS FILE: it may only ADD what the shared shell has no opinion about — product-specific elements, framework-emitted classes, and the host-layout override. It must never restate, override, or "improve" a shell rule. That rule is the whole point. IntegratorOS used to vendor its own copy of the shell, and the copy drifted a full generation behind the source — 754 lines differed, because the tokens had been renamed to a `vh` prefix and the class vocabulary with them. Nothing caught it, and nothing could: a stylesheet that no longer matches its own markup still compiles and still passes every test. It only looks wrong. (This repo has 1000+ tests and not one of them touches the auth shell.) 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. Product-specific classes take an `ios-` prefix so it is obvious at a call site which vocabulary a class is in. THREE THINGS WERE DROPPED rather than carried across, each checked first: * `.open-console` (the first-run "no operators configured" notice) — dead. No .razor file in the repo still renders that class. * The four @font-face declarations — vahary.css already makes them, from the same four woff2 files, under the same family names the package sheet's font tokens resolve to ('Tektur', 'Work Sans', 'IBM Plex Mono'). That is also why _content/Vahary.Branding/brand.css is not linked: it would be a second declaration of the same files. * `.auth-shell { display:block; background:#0D1013; min-height:100vh }` — the host-layout override, and the interesting one. It is what HQ had to rescue into ITS supplement, because HQ's app.css styles .auth-shell as a centred-card flexbox and dropping the vendored sheet turned the shell into a flex item with no basis (538px wide in a 1280px viewport). IntegratorOS looks the same but is not: nothing in app.css styles .auth-shell at all, so the host is a bare
at its UA default of display:block with no padding. The vendored rule was defensive, written when the shell was `position:fixed; inset:0` and out of flow entirely. Verified rather than reasoned: with the rule deleted at runtime, on /login and on /register at a 640px viewport, in the LIGHT app theme (the worst case for a transparent host), the shell stays left:0 width:1280 and its height still covers the full scrollHeight. Zero difference. A rule that does nothing is not free — it is the next person's evidence that the host needs managing. If a future change gives .auth-shell a box of its own, THIS is the note that says put the counter-rule back here. ──────────────────────────────────────────────────────────────────────────── THE `.vh-error` CLASS COLLISION IS FIXED AT SOURCE — Branding 0.6.0. This note used to be a standing warning: vahary-branding.css, the VaharyLockup/VaharyError sheet from the same package family, defined `.vh-error` as a full-page error SURFACE (min-height:100vh, a centred column), while vahary-auth-shell.css uses that identical class name for the inline error BAND inside a sign-in form. Wherever a host linked both, the 100vh won and the sign-in band inflated to fill the viewport, shoving the form off the bottom of the page. IntegratorOS was clear only because it did not link the second sheet — the hazard was one away, and the PORTAL is the surface most likely to want it, since VaharyLockup is how a tenant mark would be rendered. It was worth recording because it is invisible to every structural check — band present, display:flex, vh-s-error on the root all pass while the page is unusable. It cost Visitor, Uptime and Access exactly that, and it broke in the OTHER direction too: the band's default display:none blanked an Uptime 404 whose copy was sitting in the DOM. 0.6.0 renames the full-page surface to `.vh-errorpage` (children `.vh-errorpage__*`) and leaves the inline band as `.vh-error`, so the two names no longer overlap and BOTH sheets can be linked on the same page. The trap is gone rather than documented. What is left is the ordinary version rule: linking vahary-branding.css is now safe, but only from 0.6.0 up — an older copy of that sheet still carries the colliding `.vh-error`. This repo hand-writes no copy of the error-surface markup (checked: zero `vh-error__` or `vh-errorpage__` classes in src/ and tests/), so nothing here needed the rename applied. The rule below it does NOT change, and it is the one that mattered anyway: if the portal ever wants the lockup, take the markup and do not add a counter-rule here. Overriding a shell class is how the last divergence started. ──────────────────────────────────────────────────────────────────────────── ============================================================================ */ /* Tall composition (register — six fields plus hints). The shell's .vh-core flex-CENTERS its content, and a flex item taller than its container overflows in BOTH directions: the top of the form disappears under the brand bar and no scroll can reach it. Auto margins collapse to 0 on overflow, so the core stays optically centered whenever there is room and degrades to the safe reading order when there is not. The shell has no tall variant; if another product grows a long pre-auth form, this is the rule to move upstream. */ .vh-shell.ios-tall .vh-core { flex: none; margin: auto 0; padding-top: 2.4rem; padding-bottom: 2.4rem; } /* Quiet status line: the mode probe ("Checking sign-in options…"), the suite redirect notice, and the portal's "access code sent" confirmation. Deliberately the mono/uppercase meta voice, not a band — none of these is an error, and the shell only ships the error treatment. .ios-ok lifts it to the accent tint for the one that is an affirmative result. */ .vh-shell .ios-notice { margin: 2.2rem 0 0; font-family: var(--vh-font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--vh-steel); animation: vh-rise var(--vh-rise-dur) var(--vh-rise-ease) 260ms both; } .vh-shell .ios-notice.ios-ok { color: var(--vahary-violet-tint, #D8C9F7); } /* The suite-SSO action row renders with no
around it (the challenge is a navigation, not a submit), so it misses the rise the shell puts on .vh-form. This gives that one row the same entrance rather than letting it pop in. */ .vh-shell .vh-actions.ios-standalone { margin-top: 2.2rem; animation: vh-rise var(--vh-rise-dur) var(--vh-rise-ease) 260ms both; } /* One sentence of body copy under the product noun (register's welcome line, the portal's "enter your email" instruction). */ .vh-shell .ios-sub { margin: 0; max-width: 24rem; color: var(--vh-steel); font-size: .9rem; line-height: 1.6; animation: vh-rise var(--vh-rise-dur) var(--vh-rise-ease) 200ms both; } /* Register density: six fields at the shell's default 1.9rem rhythm do not fit a laptop viewport. A form-level modifier, so it is opt-in per page. */ .vh-shell .vh-form.ios-compact .vh-fgroup { margin-bottom: 1.15rem; } /* Paired field row (first name / last name). */ .vh-shell .ios-frow { display: flex; gap: 1.4rem; } .vh-shell .ios-frow .vh-fgroup { flex: 1; min-width: 0; } @media (max-width: 560px) { .vh-shell .ios-frow { flex-direction: column; gap: 0; } } /* Field hint (password policy, company-name helper, "we sent a code to …") in the label's quiet voice, unshouted. */ .vh-shell .ios-fhint { display: block; margin-top: .4rem; font-size: .74rem; color: var(--vh-steel); line-height: 1.45; } /* The shell anchors .vh-reveal to the field group's BOTTOM, which is correct when the input is the last thing in the group. A hint extends the group, so SHOW would sit on the hint line — lift it back level with the input. */ .vh-shell .vh-fgroup:has(.ios-fhint) .vh-reveal { bottom: calc(4px + 1.5rem); } /* The portal's "use a different email" is an ACTION, not a link, so it is a