, which 08-feedback
* treats as REQUIRED rather than decorative: with the fill gone the glyph is
* half the signal, not a redundancy, and it is what keeps the state off colour
* alone for a greyscale or colour-blind reader.
*
* All that is left for this page is the gap to the form below it.
* ──────────────────────────────────────────────────────────────────────── */
.frihat-login-card .frihat-alert {
margin-block-end: var(--fx-space-4);
}
/* One per ModelState error inside the message column. Two errors should
* read as two lines, not as one run-on paragraph. */
.frihat-login-card .frihat-alert .alert-content > div + div {
margin-block-start: var(--fx-space-1);
}
/* ── 10) User preferences ──────────────────────────────────────────────────
* 01-base section 13 already collapses every fx-dur-* token to 0.01ms under a
* reduced-motion request, and 04-buttons and 05-forms both gate their own
* movement, so there is no local transition left to damp: the only two
* transitions in this file are colour changes on links.
*
* prefers-contrast is likewise handled at the token level — 00-tokens promotes
* every border and every text tier — so the only local concerns are the card's
* translucent hairline, which must become a real line, and the band's dimmed
* ink, which must collapse into the band's primary ink rather than stay a
* second tier the promoted palette cannot reach.
* ──────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
.frihat-login-card {
border-color: var(--fx-color-border-strong);
box-shadow: none;
}
/* The band is a brand fill, so the promoted PAGE palette does not reach
* inside it. Collapsing the dimmed step onto the primary ink is the
* equivalent move: 5.38 / 4.64 becomes 7.38 / 5.16 in the two themes. */
.frihat-login-band {
--fx-band-fg-muted: var(--fx-band-fg);
}
.frihat-lang-switch a {
text-decoration: underline;
}
}
/* FORCED COLOURS. The user agent replaces every background and every colour with
* a system pair, so the band's fill is gone and with it the only thing that made
* the head of the card a band. A real line brings the structure back, and
* forced-color-adjust is deliberately NOT set to none anywhere: overriding a
* forced-colors user is the failure this mode exists to prevent.
*
* The card gets a stroke for the same reason — its translucent hairline is not
* a system colour and does not survive — and the shadow is dropped because a
* shadow carries no information in this mode and only muddies the edge. */
@media (forced-colors: active) {
.frihat-login-card {
border: var(--fx-border-width-strong) solid CanvasText;
box-shadow: none;
}
.frihat-login-band {
border-block-end: var(--fx-border-width-strong) solid CanvasText;
}
.frihat-login-band .logo {
/* A raster mark is the one thing here that must keep its own colours:
* forced colours would otherwise flatten the artwork into the system
* pair and the mark would stop being a mark. */
forced-color-adjust: none;
}
.frihat-lang-switch a {
text-decoration: underline;
}
}
/* PRINT. Signing in is not a thing anyone prints, but a page that prints badly
* is a page nobody proofread. The brand fill is dropped rather than reproduced —
* a full width green band costs a cartridge and carries nothing on paper — the
* float shadow becomes a hairline, and the two controls that cannot be operated
* on paper are removed. Nothing here uses a colour token, because print is
* neither theme. */
@media print {
body {
display: block;
min-block-size: auto;
padding: 0;
}
.frihat-login-card {
inline-size: auto;
border: var(--fx-border-width) solid currentColor;
box-shadow: none;
overflow: visible;
}
.frihat-login-band {
background-color: transparent;
border-block-end: var(--fx-border-width) solid currentColor;
color: inherit;
}
.frihat-login-band .frihat-login-wordmark,
.frihat-lang-switch a {
color: inherit;
}
.frihat-lang-switch,
.frihat-login-card .btn,
.frihat-login-card .forgot-link {
display: none;
}
}
/* ============================================================================
* 11) THE COMPOSED SIGN-IN SCREEN — one consumer, Pages/Account/Login.cshtml
* ────────────────────────────────────────────────────────────────────────────
* WHAT THIS SECTION IS. Everything above it draws ONE plate: a brand band at the
* head, a form under it, 26rem wide. That is still exactly what the four
* account-layout screens get, and it is what this screen collapses back to below
* the lg breakpoint. From 992px up the sign-in screen becomes a TWO-PANE
* composition instead — a brand pane carrying the office's mark, the product
* name and three lines of positioning, beside the form.
*
* IT IS A MODIFIER, NOT A SECOND CARD. Every selector below is a compound with
* the class it refines: .frihat-login-card.frihat-auth for the plate,
* .frihat-login-band.frihat-auth-brand for the pane, .frihat-login-body plus
* .frihat-auth-panel for the form column. So the plate's fill, hairline, radius,
* float shadow and overflow, the mark's square and radius, the wordmark's type,
* the band's local ink pair, the band's focus-ring override and the whole
* language switcher all arrive from sections 3, 4, 5, 7 and 8 unchanged — and
* the account layout, which carries none of the frihat-auth-* classes, inherits
* nothing from here. That is why branding the sign-in screen needed no edit to
* Themes/LeptonXLite/Layouts/Account.cshtml.
*
* SPECIFICITY IS STATED, NEVER LEFT TO SOURCE ORDER. The compound form is what
* makes that true: (0,2,0) against the (0,1,0) rules it refines, (0,3,0) where a
* descendant of the band is retuned against section 4's (0,2,0). Section 1b of
* 05-forms records why relying on file order is too fragile to stand on, and the
* same reasoning applies inside a file.
*
* A MEDIA QUERY ADDS NO SPECIFICITY, and this file already contains three
* preference tiers ABOVE this section. A base rule written here would therefore
* out-order them at equal weight and silently blank them. So the preference
* tiers for this screen are section 12, at the very END of the file, and each of
* their selectors is a compound too — later in source AND at least as specific.
* ========================================================================== */
/* ── 11.1) THE CANVAS — DEPTH FROM THE BRAND, NOT FROM AN ASSET ─────────────
*
* SCOPED TO THIS PAGE BY A CLASS ON body, AND THAT IS DELIBERATE. Section 2's
* body rule is shared with the account layout; this one is not. body carries
* .frihat-auth-page only on Login.cshtml, so the four account screens keep the
* flat canvas they have today and nothing about them moves.
*
* NOTHING ON THE CANVAS CARRIES TEXT. Every readable thing on this screen sits
* on the plate or on the brand pane, both of which are opaque fills painted over
* this treatment. So neither the wash nor the grain can move a single foreground
* ratio, which is the cleanest form the argument can take: there is no composite
* to compute because there is nothing composited onto.
*
* THE WASH. A radial lift toward the top centre, both stops OPAQUE so no engine
* has to interpolate through a premultiplied alpha and there is no grey fringe
* to hunt. Its lighter stop mixes the shell toward the midpoint of level 2 and
* the brand fill: in LIGHT that mixture lifts a mid-dark green, in DARK it
* greens a near-black plane, and one expression therefore serves both themes
* without a branch. `at 50% 0%` is symmetric on the inline axis, so the wash
* mirrors under RTL with no direction-specific rule.
*
* MEASURED, light / dark
* canvas base .. fx-color-shell ............. #145a32 / #0c1a14
* wash centre .. the mix below .............. #22643e / #0e2117
* wash vs base .............................. 1.17:1 / 1.06:1
* plate vs base .............................. 8.27:1 / 1.24:1
* plate vs wash centre ....................... 7.09:1 / 1.17:1
*
* background-attachment: fixed keeps the wash anchored to the viewport rather
* than to a body box whose height the card decides, so the composition does not
* shift when a validation alert makes the card taller.
* ──────────────────────────────────────────────────────────────────────── */
body.frihat-auth-page {
background-image: radial-gradient(
ellipse 130% 90% at 50% 0%,
color-mix(
in srgb,
var(--fx-color-shell) 88%,
color-mix(in srgb, var(--fx-color-level-2), var(--fx-color-primary))
) 0%,
var(--fx-color-shell) 72%
);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* THE GRAIN. fx-texture-grain is an inline SVG data URI defined in 00-tokens,
* and 03-leptonx records at three separate call sites that it was removed from
* the shell and is retained in the token layer FOR THE LOGIN BACKDROP
* specifically. This is that consumer, and it is the only one. No asset is
* fetched: the whole texture is bytes inside the stylesheet, which matters on
* the one page an unauthenticated visitor always reaches — a remote texture here
* would disclose the client IP of every sign-in attempt before a credential is
* typed.
*
* WHY A PSEUDO-ELEMENT RATHER THAN A SECOND background-image LAYER. The token is
* a fixed SVG whose own rect is at opacity 0.5; laid on directly it would be an
* order of magnitude too strong, and a background layer has no opacity of its own
* to damp it with. The pseudo-element carries the token's paired
* fx-texture-grain-opacity, so the strength stays a token decision.
*
* IT IS position: fixed, WHICH IS LOAD BEARING TWICE. An absolutely positioned
* child of a flex container is not a flex item, so the grain cannot become a
* third column beside the card; and z-index -1 puts it in the negative layer of
* the root stacking context, above the propagated canvas fill and below every
* in-flow element, so it never lands over the form. pointer-events: none is
* insurance on the same point from the other side.
*
* WORST CASE MEASURED: 3.5 percent white over the canvas base is #1c6039 in
* light and #15221c in dark, 1.10:1 and 1.09:1 from the fill it sits on. It is a
* texture at the threshold of perception, which is the entire brief for it.
* ──────────────────────────────────────────────────────────────────────── */
body.frihat-auth-page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--fx-texture-grain);
opacity: var(--fx-texture-grain-opacity);
}
/* ── 11.2) THE BRAND PANE — THE 1.000:1 FIX, AND ONLY IN LIGHT ─────────────
*
* THE DEFECT. Section 4 pins the band's fill to fx-color-primary so it can never
* drift from the app shell's topbar, and that was right when the page canvas was
* fx-color-surface-sunken. Since 2026-08-04 the canvas is fx-color-shell, and in
* LIGHT both tokens resolve to green-800: the band's fill and the page behind it
* were the same colour, 1.000:1, and the head of the card dissolved into the
* page. The surface ladder forbids 1.000 anywhere, and this was the one place in
* the product where it had appeared.
*
* THE FIX IS A DEEPENING, AND IT IS ASYMMETRIC BECAUSE THE PROBLEM IS. In light
* the pane mixes the brand fill toward fx-color-primary-active, staying inside
* the brand ramp and reading as the deeper spine of the card rather than as a new
* hue. In DARK nothing is wrong: the canvas is near-black and the semantic fill
* already stands 3.47:1 from it, while deepening WOULD cost the internal seam
* against the plate, which measured 1.89:1 at the same mix. So dark keeps the
* semantic exactly as section 4 states it.
*
* A PER-THEME MIX IS THE SANCTIONED SHAPE FOR THIS, not an exception to the token
* model: 00-tokens 2.4.1 records that 03-leptonx 7.0 declares its rail ladder in
* both themes for precisely this reason, "because the two planes need different
* mix percentages to reach the same four RATIOS". Neither branch consumes an
* fx-p-* primitive and neither writes a literal colour.
*
* MEASURED, light / dark
* pane fill ................................. #104526 / #1e7d43
* pane vs canvas base ....... was 1.000:1 -> 1.34:1 / 3.47:1
* pane vs canvas wash centre ................ 1.56:1 / 3.26:1
* pane vs the plate (internal seam) ......... 11.05:1 / 2.79:1
* fx-band-fg product name, pitch ...... 9.86:1 / 5.16:1 AA
* fx-band-fg-muted tagline, glyph, switcher . 7.16:1 / 4.65:1 AA
* fx-band-fg the local focus ring ..... 9.86:1 / 5.16:1 SC 1.4.11
*
* THE DARK CELLS ARE SECTION 4'S OWN FIGURES, unchanged, because dark's fill is
* unchanged. The light cells all IMPROVED: the deeper pane lifts the band ink
* from 7.38 to 9.86 and the dimmed step from 5.38 to 7.16, so the fix costs no
* legibility anywhere. 1.34:1 for the pane against the canvas is a decorative
* boundary, not a control boundary — SC 1.4.11 governs what identifies a user
* interface component, and nothing about operating this screen depends on
* perceiving where the pane ends. The edge a user actually sees is the PLATE's,
* and that is white on green at 8.27:1 with fx-shadow-float-lg under it.
* ──────────────────────────────────────────────────────────────────────── */
.frihat-login-band.frihat-auth-brand {
--fx-band-bg: color-mix(
in srgb,
var(--fx-color-primary) 55%,
var(--fx-color-primary-active)
);
}
/* DARK KEEPS THE SEMANTIC. (0,4,1) against the (0,2,0) above, so the branch is
* decided by weight rather than by which line came second. If the shell token is
* ever repointed away from the brand green in light, delete BOTH rules and let
* section 4 own the fill again — the deepening exists only to answer the
* collision, and a pane one step off the topbar is a cost, not a feature. */
html[data-bs-theme="dark"] .frihat-login-band.frihat-auth-brand {
--fx-band-bg: var(--fx-color-primary);
}
/* ── 11.3) BELOW 992px THE PANE IS TODAY'S BAND ────────────────────────────
* Nothing here changes the narrow layout: section 4's flex row already puts the
* mark, the wordmark and the language switcher on one 56px band, and that is the
* shape this screen keeps on a phone and a tablet. The two elements the wide
* composition adds are simply not shown yet.
*
* display: none RATHER THAN A REORDER. The tagline and the three positioning
* lines are the brand pane's content, and the brand pane does not exist below the
* breakpoint — on a phone this screen is one card the thumb can reach, which is
* exactly the shape it had before this pass. Hiding them also removes them from
* the accessibility tree, so a screen reader is not read a column that has no
* visual counterpart. Nothing operational is hidden: every control, label, error
* and link is in the form panel.
*
* ══ THE HIDE IS DECLARED ON THE ELEMENTS' OWN BASE RULES IN 11.6, NOT HERE, AND
* THAT IS A DEFECT THIS SECTION USED TO CONTAIN ═════════════════════════════
*
* It first stood as its own rule at this point in the file:
*
* .frihat-login-band.frihat-auth-brand > .frihat-auth-tagline,
* .frihat-login-band.frihat-auth-brand > .frihat-auth-pitch { display: none }
*
* A CHILD COMBINATOR ADDS NO SPECIFICITY, so that selector is (0,3,0) — exactly
* the weight of 11.6's own base rule for the pitch, which declares display: flex
* and sits LATER in the file. The hide therefore lost on source order and the
* positioning column rendered on every phone, stacked under the wordmark inside a
* 56px band. It is the same class of failure as an inert preference tier, arriving
* from the other direction: equal weight, and the loser written first.
*
* The fix is to give each element ONE display declaration in its base rule and let
* the wide tier in 11.7 be the only thing that turns it on. Two rules for one
* property, in a known order, instead of three at the same weight.
* ──────────────────────────────────────────────────────────────────────── */
/* ── 11.4) THE FORM PANEL ──────────────────────────────────────────────────
* The panel IS .frihat-login-body, so section 5's fx-surface-pad-md interior and
* section 5's h1 treatment both arrive unchanged at the narrow tier. What these
* classes add is the rhythm the composed screen needs, plus the wide tier's own
* geometry in 11.7.
* ──────────────────────────────────────────────────────────────────────── */
/* THE SUBTITLE. One line under the heading, on the tertiary tier so it supports
* the h1 without competing with it. sm (13px) is the smallest step in this system
* allowed to carry a readable sentence; the heading owns the size signal.
* MEASURED on the plate: 5.97:1 light, 4.88:1 dark — both clear AA. */
.frihat-login-card.frihat-auth .frihat-auth-subtitle {
margin-block: 0 var(--fx-space-5);
font-size: var(--fx-text-sm);
line-height: var(--fx-leading-normal);
color: var(--fx-color-text-subtle);
}
/* THE HEADING GIVES UP ITS BOTTOM MARGIN TO THE SUBTITLE, and nothing else about
* it moves. Section 5 states the whole type treatment on `.frihat-login-card
* h1.title` at (0,2,1); this rule is (0,3,1) and touches two properties, so the
* family, weight, leading, tracking and balance stay defined in exactly one
* place. The size steps up one rung because this is the only heading on the only
* screen in the product with no data on it, and it now has a subtitle beneath it
* to anchor the step. */
.frihat-login-card.frihat-auth h1.title {
margin-block-end: var(--fx-space-2);
font-size: var(--fx-text-3xl);
}
/* THE META ROW — remember-me at the inline start, forgot-password at the inline
* end, above the action. It replaces a stray link under the button and it is a
* form LAYOUT decision, which is this file's job; both members arrive fully
* dressed from 05-forms and section 7. space-between and flex-wrap resolve
* against the writing direction, so the row mirrors under RTL and drops the link
* onto a second line on a narrow card rather than overflowing it.
*
* NO BLOCK-START MARGIN, AND THAT IS THE DETERMINISTIC CHOICE RATHER THAN THE
* LAZY ONE. The preceding .fx-field already ends on 05-forms' 16px inter-group
* step. Adding a second margin here would collapse against it at the narrow tier,
* where the panel is block flow, and NOT collapse at the wide tier, where 11.7
* makes the panel a flex column — so the gap above this row would differ between
* the two tiers by construction. Leaving the whole gap to the field keeps one
* number in one place and both tiers identical. */
.frihat-login-card.frihat-auth .frihat-auth-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--fx-space-3);
margin-block-start: 0;
}
/* Section 7 gives the link a full step of block-start margin because it used to
* be the last line of the column. Inside the row it is a member, not a line, so
* the margin is cancelled here — (0,3,0) against that rule's (0,2,0). */
.frihat-login-card.frihat-auth .frihat-auth-meta .forgot-link {
margin-block-start: 0;
}
/* 05-forms gives every .form-check row a 4px block-end margin so stacked
* checkboxes breathe. In a single-row flex assembly that margin is an
* asymmetry — the checkbox would sit 4px higher than the link beside it — so it
* is cancelled. (0,3,0) against that file's (0,1,0). */
.frihat-login-card.frihat-auth .frihat-auth-meta .form-check {
margin-block-end: 0;
}
/* ── 11.5) THE HERO FIELDS — A PUBLISHED STEP, NOT A LOCAL FORK ────────────
*
* 05-forms 1b names its 44px rung "a hero field: the login form", and until
* 2026-08-07 that rung could not reach an input: section 1 of that file sets the
* fx-ctl locals on a selector list containing input[type="text"] at (0,1,1) while
* every size class was a single class at (0,1,0), so on an input the base step
* won and the ladder was inert. That is fixed upstream — 1b now DOUBLES every
* rung, taking .form-control-lg.form-control-lg to (0,2,0) — so the correct
* implementation of "the hero step for the login fields only" is to name the
* class in the markup and write NO CSS AT ALL here.
*
* SO THERE IS NO SIZE RULE IN THIS SECTION, ON PURPOSE. A local redeclaration of
* the four fx-ctl locals would have been a fork of a contract that works, and
* 05-forms is explicit about the failure mode: "A consumer that needs a shape no
* LOCAL provides has found a gap in this contract: extend the contract here,
* never fork it there." The markup carries .form-control-lg on both fields,
* .fx-control-lg on the password's input group so the group and its trailing
* action track the same rung, and .btn-xl on the action so the 44px silhouette is
* shared by field and button. If the upstream fix is ever reverted the page
* degrades to the 40px default and stays coherent — the button rung would be the
* only thing left out of step.
*
* THE REVEAL TOGGLE IS 05-forms' OWN CONTROL. .fx-input-action is described there
* as "an icon only trailing action inside the field, e.g. a reveal toggle", and it
* already supplies the transparent fill inside the group's well, the square
* against fx-ctl-h, the gated hover wash and a focus ring pulled inward by a
* negative offset so the group's overflow cannot clip it. Nothing about it is
* restated here.
*
* MEASURED, light / dark
* glyph at rest text-subtle on the field fill ... 5.71:1 / 5.14:1
* glyph hovered text on the hover wash .......... 13.92:1 / 11.27:1
* focus ring on the field fill ............... 7.91:1 / 5.01:1
* ──────────────────────────────────────────────────────────────────────── */
/* ── 11.6) THE POSITIONING COLUMN ──────────────────────────────────────────
* Three lines that say what the platform is for, on the brand pane, visible from
* 992px up. They are CONTENT — a real list, localized through WebResource in both
* languages — so they are marked up as one, and their glyphs are aria-hidden
* because each line already states its own meaning in words.
*
* TWO INKS AND NO THIRD. 00-tokens 2.2.1 rules that on a brand fill in dark the
* whole theme has 0.66 of headroom over AA and the green ramp is frozen, so
* hierarchy on a brand plane is SIZE, WEIGHT and SPACE. The line text takes the
* pane's primary ink, the glyph beside it and the tagline above take the pane's
* dimmed step, and that is the entire palette of this column. Both are mixed from
* the band's own knobs by section 4, never inherited from the page ladder — a
* page text tier on this fill measures 1.35:1.
* ──────────────────────────────────────────────────────────────────────── */
/* display: none is the NARROW-TIER state, and 11.7 is the only thing that turns
* either element on — see the note in 11.3 for the ordering defect that made this
* the shape of the fix. */
.frihat-login-band.frihat-auth-brand .frihat-auth-tagline {
display: none;
margin: 0;
font-size: var(--fx-text-sm);
line-height: var(--fx-leading-normal);
color: var(--fx-band-fg-muted);
}
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch {
display: none;
flex-direction: column;
gap: var(--fx-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch > li {
display: flex;
align-items: flex-start;
gap: var(--fx-space-3);
font-size: var(--fx-text-sm);
line-height: var(--fx-leading-normal);
color: var(--fx-band-fg);
}
/* The glyph is decoration attached to a line that reads correctly without it, so
* it takes the dimmed step and the line keeps the primary ink. The block-start
* nudge is optical: a 16px square beside a 1.7 leading line box sits high
* without it. */
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch > li > i {
flex: 0 0 auto;
inline-size: var(--fx-icon-md);
margin-block-start: 0.25em;
font-size: var(--fx-icon-sm);
text-align: center;
color: var(--fx-band-fg-muted);
}
/* ── 11.7) THE WIDE TIER — TWO PANES FROM 992px ────────────────────────────
*
* fx-bp-lg is the breakpoint the token layer already re-tiers fx-container-max
* at, so the composition changes where the rest of the system changes rather than
* at a number chosen here. Below it, everything above this block is the whole
* screen and the shape is the card the account layout also draws.
*
* THE PLATE. 58rem tracks the type scale under browser zoom exactly as section
* 3's 26rem does, and it clamps by fx-gutter — the page margin token that
* re-tiers at a breakpoint — rather than by a rhythm step, for the reason section
* 3 records. Two auto-placed grid children need no named areas: the pane is the
* first child and takes the inline-start track, the panel takes the other, and
* both mirror with the writing direction under RTL with no direction-specific
* rule anywhere. The pane is the narrower track so the form, which is the task,
* holds the wider one.
*
* align-items defaults to stretch, which is what makes the two panes the same
* height without either of them being told a height.
* ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
.frihat-login-card.frihat-auth {
inline-size: min(58rem, calc(100vw - var(--fx-gutter) * 2));
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
/* THE PANE STOPS BEING A ROW AND BECOMES A COLUMN. Section 4's flex row is
* replaced by a four-row grid: the mark and the language switcher share the
* top row, the name and the tagline stack under it, and the positioning
* column is anchored to the BOTTOM by giving its row the 1fr and sitting at
* the block end of it. The pane's own padding steps up to fx-surface-pad-lg,
* the 24 to 36px surface step, because a full-height pane at the 18 to 26px
* step reads as a band that grew rather than as a composition. The shorthand
* cancels section 4's two longhands. */
.frihat-login-band.frihat-auth-brand {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto 1fr;
grid-template-areas:
"mark switch"
"name name"
"tag tag"
"pitch pitch";
column-gap: var(--fx-space-3);
row-gap: var(--fx-space-4);
padding: var(--fx-surface-pad-lg);
}
.frihat-login-band.frihat-auth-brand .logo {
grid-area: mark;
/* Derived from the control ladder rather than stated: the hero control
* height plus one rhythm step is 56px, the same height section 4 gives
* the band itself, so the mark on the pane is exactly as tall as the
* whole band is on a phone. It grows with the coarse-pointer tier for
* free. */
inline-size: calc(var(--fx-control-h-xl) + var(--fx-space-3));
block-size: calc(var(--fx-control-h-xl) + var(--fx-space-3));
}
.frihat-login-band.frihat-auth-brand .frihat-lang-switch {
grid-area: switch;
align-self: start;
}
/* The product name is the pane's own headline now, so it steps from base to
* 2xl and takes the matching tracking rung. It is NOT a heading element:
* this screen has exactly one h1 and it is the form's. Tracking stays
* tokenised so 00-tokens' Arabic guard can zero it — a cursive script must
* never take negative letter-spacing. */
.frihat-login-band.frihat-auth-brand .frihat-login-wordmark {
grid-area: name;
font-size: var(--fx-text-2xl);
letter-spacing: var(--fx-tracking-heading);
}
.frihat-login-band.frihat-auth-brand .frihat-auth-tagline {
grid-area: tag;
display: block;
/* The row gap already carries the space above; the tagline belongs to the
* name, so it is pulled back onto it. */
margin-block-start: calc(var(--fx-space-1) - var(--fx-space-4));
}
/* The hairline is re-derived from the pane's OWN ink, never from
* fx-color-divider: 00-tokens 3.9's surface clause is explicit that a brand
* plane may not inherit a page line, and the opaque divider family is
* defined against the page ladder. MEASURED against the pane: 1.62:1 light,
* 1.40:1 dark — inside the 1.03 to 1.5 band 00-tokens 2.3 sanctions for
* structural separation, which identifies no control. */
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch {
grid-area: pitch;
/* The one place the column is turned on. Its base rule in 11.6 holds
* display: none and every other property it needs, so this is a single
* declaration rather than a second copy of the list. */
display: flex;
align-self: end;
padding-block-start: var(--fx-space-5);
border-block-start: var(--fx-border-width) solid
color-mix(in srgb, var(--fx-band-fg) 18%, transparent);
}
/* THE FORM SITS OPTICALLY CENTRED IN ITS PANE rather than pinned to the block
* start, because the pane beside it is full height and a form parked at the
* top of a tall column reads as unfinished. It re-centres when a validation
* alert makes the column taller, which is the correct behaviour: the alert is
* part of the form. */
.frihat-login-body.frihat-auth-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--fx-surface-pad-lg);
}
}
/* ── 11.8) THE MAINTENANCE PANEL (Pages/Maintenance, 2026-10-06) ───────────
* The maintenance page wears the signed-out card whole, so the band, the pane,
* the h1 and the subtitle above are already its own. What follows is only what
* that page adds: a status mark above the heading, a reading measure for the
* explanation, a live status line and a small status code. Semantic tokens
* only, so all sixteen themes are covered without a per theme rule.
* ──────────────────────────────────────────────────────────────────────── */
/* THE MARK. A warning tone, not danger: nothing the user did failed, and
* nothing is lost. Round, so it echoes the platform mark in the band. */
.frihat-login-card .frihat-maintenance-mark {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 3.5rem;
block-size: 3.5rem;
margin-block-end: var(--fx-space-4);
border-radius: 50%;
border: var(--fx-border-width) solid var(--fx-color-warning-border);
background-color: var(--fx-color-warning-bg);
color: var(--fx-color-warning-fg);
font-size: 1.5rem;
}
.frihat-login-card .frihat-maintenance-body {
max-inline-size: 52ch;
margin-block: 0 var(--fx-space-4);
font-size: var(--fx-text-base);
line-height: var(--fx-leading-relaxed);
color: var(--fx-color-text);
}
/* The live line: tertiary, because it reports progress rather than content. A
* fixed minimum height keeps the button below it from jumping as the countdown
* text changes length. */
.frihat-login-card .frihat-maintenance-status {
min-block-size: 1.5em;
margin-block: 0 var(--fx-space-4);
font-size: var(--fx-text-sm);
color: var(--fx-color-text-subtle);
}
.frihat-login-card .frihat-maintenance-code {
margin-block: var(--fx-space-4) 0;
font-size: var(--fx-text-xs);
color: var(--fx-color-text-subtle);
}
/* ============================================================================
* 12) PREFERENCE TIERS FOR THE COMPOSED SCREEN — LAST IN THE FILE ON PURPOSE
* ────────────────────────────────────────────────────────────────────────────
* A MEDIA QUERY ADDS NO SPECIFICITY. Section 10's three preference blocks sit
* ABOVE section 11, so a base rule written there would out-order them at equal
* weight and quietly blank them — the exact failure a sweep of this codebase
* found nine times. Everything below is therefore last in source order AND
* written as a compound at (0,2,0) or heavier, so it wins on both counts, against
* section 11's base rules and against section 10's (0,1,0) ones.
*
* Section 10 already covers what these screens share: the card's hairline becomes
* a real line under prefers-contrast, the band's dimmed ink collapses onto its
* primary ink, the band takes a CanvasText rule under forced colours, and print
* drops the brand fill and the controls. What is left below is only what the
* two-pane composition adds.
* ========================================================================== */
@media (prefers-contrast: more) {
/* The pane hairline is re-derived from the pane's own ink, so the promoted
* PAGE palette cannot reach it — the same reason section 10 has to collapse
* fx-band-fg-muted by hand. Raising the mix from 18 to 45 percent takes the
* rule from 1.62:1 to a line that reads at a glance in both themes. */
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch {
border-block-start-color: color-mix(
in srgb,
var(--fx-band-fg) 45%,
transparent
);
}
/* A texture is decoration, and a user who asked for more contrast asked for
* less of exactly this. */
body.frihat-auth-page::before {
display: none;
}
}
@media (forced-colors: active) {
/* The user agent replaces every background with a system pair, so the wash is
* gone anyway — but the grain layer is a full-viewport box with a
* background-image, and forced colours do not reliably drop one. Hiding it
* outright is the only guarantee that it cannot paint a system-coloured
* rectangle over the whole screen. */
body.frihat-auth-page {
background-image: none;
}
body.frihat-auth-page::before {
display: none;
}
/* The mix that draws the pitch rule is not a system colour and does not
* survive; CanvasText brings the structure back. */
.frihat-login-band.frihat-auth-brand .frihat-auth-pitch {
border-block-start-color: CanvasText;
}
}
@media (min-width: 992px) and (forced-colors: active) {
/* Section 10 closes the band with a block-end rule, which is correct while
* the band is a horizontal strip above the form. At the wide tier the pane is
* a COLUMN beside the form, so the separator has to move to the inline end —
* and the block-end rule has to be cancelled, or the pane is boxed on two
* sides for no reason. Logical properties, so it mirrors under RTL. */
.frihat-login-band.frihat-auth-brand {
border-block-end: 0;
border-inline-end: var(--fx-border-width-strong) solid CanvasText;
}
}
@media print {
/* Signing in is not a thing anyone prints, and section 10 already strips the
* fill, the shadow and the controls. What is left is to undo the composition
* itself: a two-column grid clamped to 58rem does not belong on a page whose
* width the printer decides, and a positioning column is marketing on paper.
* Every selector here is (0,2,0) or heavier, so it also answers section 11's
* own base and wide-tier rules rather than only section 10's. */
body.frihat-auth-page {
background-image: none;
}
body.frihat-auth-page::before {
display: none;
}
.frihat-login-card.frihat-auth {
display: block;
inline-size: auto;
}
.frihat-login-band.frihat-auth-brand {
display: block;
padding-block: var(--fx-space-3);
padding-inline: 0;
}
.frihat-login-band.frihat-auth-brand > .frihat-auth-tagline,
.frihat-login-band.frihat-auth-brand > .frihat-auth-pitch {
display: none;
}
.frihat-login-card.frihat-auth .frihat-auth-meta {
display: none;
}
}