/* ── THE BOOT SCREEN (Task 7F, the specification's §8 member 1) ────────────────────────────
   THE REVERSED LOCKUP ON THE PORTICO GREEN. On a cold WebAssembly start over a bad connection
   this is the longest look at the product a first-time visitor gets, and it was a favicon tile
   and a sentence on the ordinary page ground.

   IT MAY USE THIS SHEET ONLY. It is pre-Blazor markup: riwaq-fonts, riwaq-tokens and riwaq-base
   are linked before it and nothing else has downloaded, and none of the .resx files exist yet —
   every string on it comes from the translation table in index.html's inline script.

   Boot remains legible using system fonts, even when the font request fails: the label reaches
   for the display face but --rw-font-display carries Georgia and serif behind it, so a font that
   never arrives costs the shape and not the sentence. */
.ic-boot {
    min-block-size: 100dvh; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--rw-space-6); padding: var(--rw-page-gutter);
    text-align: center; font-family: system-ui, sans-serif;
    background: var(--rw-portico); color: var(--rw-on-portico);
}
/* The mark is drawn, not fetched: an <img> cannot inherit currentColor, which is the defect
   PublicEntryTests already records for the old lockup — the wordmark went near-black on a
   near-black header and the product's name was missing from its own front door. Here the arch
   takes the reversed ink and the star takes the brass that reads on the portico (7.07:1 by day,
   9.81:1 at night). */
.rw-boot-mark { inline-size: 4rem; block-size: 4rem; flex: none; color: var(--rw-on-portico); }
.ic-boot__label, .ic-boot__failtitle { font-size: var(--rw-text-lead); font-weight: 400; font-family: var(--rw-font-display); }
.ic-boot__slow, .ic-boot__failbox { display: grid; gap: var(--rw-space-2); max-inline-size: var(--rw-reading-measure); }
/* --rw-on-portico-muted, not --rw-ink-muted: the muted ink is written for limestone and measures
   2.31:1 on the portico, which fails AA outright. The quiet caption has to stay quiet AND stay
   readable, and the on-portico muted ink is the token that already does both — 9.08:1. */
.ic-boot__slowhint, .ic-boot__failhint { color: var(--rw-on-portico-muted); max-inline-size: var(--rw-reading-measure); }
.ic-boot__retry { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--rw-target-min); padding-inline: var(--rw-space-6); background: var(--rw-accent-fill); color: var(--rw-accent-ink); border-radius: var(--rw-radius-pill); font-weight: 800; text-decoration: none; }
.ic-boot__retry:hover { background: var(--rw-accent-fill-hover); text-decoration: underline; text-underline-offset: var(--rw-space-1); }
.ic-boot__retry:active { translate: 0 1px; background: var(--rw-accent-fill); box-shadow: var(--rw-press-inset); }
/* The retry press set an inset with no composite; a held key kept the inset and lost the cream bands. */
.ic-boot__retry:active:focus-visible { box-shadow: var(--rw-press-inset), var(--rw-focus-bands); }
/* A THIN BRASS SWEEP, and it is the only thing on this screen that moves. The rule itself is
   drawn always; the light that travels along it exists only under prefers-reduced-motion:
   no-preference, so a reader who has asked for less motion gets a static brass rule rather than
   an animation stopped mid-travel by the base sheet's override. Nothing is lost by that: the
   sentence above it already says the app is opening, and the sweep never claimed progress. */
.ic-boot__sweep { inline-size: min(14rem, 60%); block-size: 1px; background: var(--rw-accent-on-portico); opacity: .5; position: relative; overflow: hidden; flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .ic-boot__sweep::after { content: ""; position: absolute; inset-block: 0; inline-size: 40%; background: var(--rw-on-portico); animation: rw-sweep 1600ms linear infinite; }
    /* ONE WAY, LINEAR, AND NEVER OFF THE RULE. This was `ease-in-out ... alternate` travelling
       -100% to 250% of the light's own width — measured, that is a 224px rule with an 89.6px
       light, so both ends of the travel put the light ENTIRELY OUTSIDE the track, and easing made
       it decelerate into exactly those two positions. The screen a reader watches while nothing
       has loaded yet therefore spent a visible beat at each end showing a dead brass line: the one
       thing a boot screen must never look like is stopped. The owner read it as stalled, correctly.

       So: constant speed, one direction, and the travel is clamped so a slice of the light is on
       the rule at every instant of the cycle. It still claims no progress — nothing here measures
       progress, and a bar that filled would be a lie — it only says the page is alive.

       THE ARITHMETIC, since the old values were chosen to a tenth of a percent and then read
       wrongly. The light is 40% of the rule, so its own width L = 0.4W and `translate` is a
       multiple of L. Its leading edge sits at x = translate x L; it is off the rule entirely at
       translate <= -100% (x <= -L) and again at translate >= 250% (x >= W). Both old endpoints
       were exactly those two values. -75% and 225% leave a quarter of the light on the rule at
       each end, so the cycle's restart is a slide off one edge into the other rather than a gap. */
    @keyframes rw-sweep { from { translate: -75% 0; } to { translate: 225% 0; } }
}
#blazor-error-ui { display: none; position: fixed; inset-block-end: 0; inset-inline: 0; padding: var(--rw-space-4); background: var(--rw-danger-bg); color: var(--rw-danger-fg); z-index: 100; }
#blazor-error-ui .reload { display: inline-flex; align-items: center; min-block-size: var(--rw-target-min); color: inherit; }
/* Appearance is three buttons in a row, not a menu: the label sits above the segmented control
   so the group reads as one field beside the language pill.

   EQUAL THIRDS, because the words are not equal. "Light" is four letters and Danish's "use the
   system setting" is twenty-two; sized to their words the three segments came out 51, 64 and
   191 pixels and the control looked broken rather than balanced. A third each lets the long
   translation wrap inside its own segment and keeps the group the same shape in every
   language.

   A wrapped segment also drags its neighbours' height with it: stretched, the three stay one
   band instead of one tall button beside two short ones.

   And it claims a floor of width. Squeezed into the footer's legal row the three segments came
   out narrower than they were tall and rendered as three circles — pill radius reads as a pill
   only on something wider than it is high. */
/* WIDE ENOUGH FOR ITS WORDS (2026-09-25 audit). Three equal thirds of 22rem left "Brug
   systemindstilling" a third of the width it needs, so it broke mid-word into a tall blob beside
   two round ones. Each option now takes its label's width and the row wraps before a word does. */
.rw-theme { display: grid; gap: var(--rw-label-gap); justify-items: start; inline-size: auto; max-inline-size: 100%; padding-block: var(--rw-space-4); }
.rw-theme__label { font-size: var(--rw-text-small); color: var(--rw-ink-muted); }
.rw-theme .ic-rowchoice { flex-wrap: wrap; align-items: stretch; max-inline-size: 100%; }
.rw-theme .ic-rowchoice__option { flex: 0 1 auto; min-inline-size: 0; padding-inline: var(--rw-space-4); font-size: var(--rw-text-small); text-align: center; white-space: nowrap; }
