/*
* Ecox SSO — visual design system.
*
* Owner: design-lead (docs/design-language.md has the full rationale).
* Structural pass landed in T-22 (go-dev); this file is design-lead's
* styling pass over the SAME class hooks (`sso-*`) — no class names or
* template structure changed, only token values + rules, per T-22's
* contract. 2026-07-19 rebrand pass: WeWillApp SSO → Ecox SSO, blue
* placeholder → green (ECOXTECH logo) identity. 2026-07-20b: emerald
* admin-redesign POC (operator-supplied concept) — recomputed AA contrast
* for every new pairing from scratch, see docs/design-language.md's
* "Phase 2b" section + docs/admin-redesign-assessment.md for the full
* rationale of every choice below.
*
* Hard constraint (unchanged): served as a static asset (go:embed, see
* static.go), never inlined — the app's `Content-Security-Policy:
* default-src 'self'` (no 'unsafe-inline') needs no relaxation for
* style-src as long as EVERY rule lives here, never in a template.
*
* Identity: a calm, restrained "trustworthy infrastructure" look (closer to
* Stripe/Linear-grade auth screens than a marketing surface) — this page is
* the front door every Ecox employee sees before anything else loads. The
* admin back-office (Phase 2b) is the same identity applied to a denser,
* data-table-centric surface — see "Phase 2b" below.
*/
:root {
color-scheme: light;
/* ------------------------------------------------------------------
* BRAND — Ecox identity. 2026-07-20b: retoned from the plain green
* (#15803d, Tailwind green-700) to Tailwind's EMERALD family, per the
* operator-supplied admin-redesign concept (docs/admin-redesign-
* assessment.md, Path A). This is still the ONE place a future rebrand
* touches:
* 1. --sso-color-primary (+ -hover/-active) → the brand hue, used for
* every primary button, the focus-ring base, and (via the real
* logo in layout.html) sits alongside the logo mark.
* 2. --sso-color-secondary → the logo's teal/blue-green globe accent.
* RESERVED, decorative + the Admin role badge only — untouched by
* this pass (still #0f766e; a cool teal already harmonizes with
* emerald, no clash to resolve).
* 3. --sso-color-primary-accent → NEW (2026-07-20b): a distinct, lighter
* emerald step used ONLY on the dark admin sidebar (see "Phase 2b"
* below) — see the AA note next to its value for why this is a
* separate token from --sso-color-primary, not a duplicate.
* 4. Logo — unchanged, `` in layout.html (and now also
* `.sso-admin-sidebar__logo` for the sidebar brand lockup).
* ------------------------------------------------------------------ */
/* --sso-color-primary is Tailwind emerald-700 (#047857), NOT the
operator concept's literal emerald-600 (#059669) — recomputed, don't
reuse: white button-text on emerald-600 only clears 3.77:1 (WCAG
relative-luminance, computed directly), below the 4.5:1 AA minimum for
normal text. emerald-700 clears 5.49:1. See docs/design-language.md
"Phase 2b" for the full contrast table and docs/admin-redesign-
assessment.md for why this is flagged as a correction, not a rejection,
of the operator's spec. */
--sso-color-primary: #047857; /* emerald-700 */
--sso-color-primary-hover: #065f46; /* emerald-800 — 7.69:1 white-text */
--sso-color-primary-active: #064e3b; /* emerald-900 — 9.72:1 white-text */
--sso-color-primary-contrast: #ffffff;
/* Focus-ring color is a separate token from --sso-color-primary on
purpose (decoupling, not because they currently diverge): emerald-700's
own luminance profile already clears 3:1 against both light-mode
surfaces and (see the dark-mode block below) both dark-mode surfaces, so
--sso-color-focus equals --sso-color-primary in BOTH themes today. */
--sso-color-focus: var(--sso-color-primary);
/* --sso-color-primary-accent (emerald-600, sidebar-only) — RETIRED in the
Phase 2a Tailwind/DaisyUI admin redesign: the rebuilt sidebar's active
nav state now uses the SAME --sso-color-primary as every other button/
CTA in the system (DaisyUI's `bg-primary`/`text-primary-content`
utilities), per the "one primary action color, never let a second hue
leak into nav/chrome" rule — a second, narrower-verified shade just for
the sidebar was no longer needed once nav styling moved to Tailwind
utility classes reading the same theme token. See
app/api/tailwind/input.css's `ecox` theme for the current source of
truth on --color-primary (identical hex, #047857).
Reserved brand accent — the logo's teal/blue-green globe. Untouched by
the emerald retone (already independent of the primary hue; still
decorative + the Admin role-badge fill only, see Components). */
--sso-color-secondary: #0f766e;
--sso-color-secondary-hover: #115e56;
/* --- neutrals --- */
--sso-color-bg: #f4f6f9;
--sso-color-surface: #ffffff;
--sso-color-text: #101828;
--sso-color-muted: #475569;
--sso-color-border: #d7dce3;
--sso-color-border-strong: #b7c0cc;
/* --- semantic (status) --- */
--sso-color-error: #b3261e;
--sso-color-error-bg: #fdecec;
/* --sso-color-success / -bg: 2026-07-20b — retoned to Tailwind
green-800/green-100 (#166534 / #dcfce7) per the operator concept's
literal "green-100/green-800 = success" spec. Recomputed: 6.49:1 (WCAG
relative luminance), clears AA with a comfortable margin. Deliberately
a DIFFERENT green family from --sso-color-primary (emerald) — the
concept's own "status colors separate from primary" rule — so success
never reads as "the same green as the primary action," reinforced (as
before the retone) by shape/position: success is always a tinted
alert/badge, never a solid button fill, so it can never be confused
with the primary CTA's affordance either. */
--sso-color-success: #166534; /* green-800 */
--sso-color-success-bg: #dcfce7; /* green-100 */
/* --sso-color-warning*/--sso-color-danger* (the old Phase-2 amber-warning-
box + destructive-action-button token families) are RETIRED as of the
Phase 2a Tailwind/DaisyUI admin redesign — the entire /admin/* surface
that used them (username-locked hint, delete-confirm warning, the
delete/danger button) now reads its warning/error colors straight from
the DaisyUI "ecox" theme (`--color-warning`/`--color-error` in
app/api/tailwind/input.css, via `alert-warning`/`btn-error`/`alert-error`
component classes) — same hex values, one fewer parallel token system
to keep in sync. Nothing outside /admin/* ever used these two families
(grep-verified before removal), so this is a pure dead-code cleanup,
not a behavior change. See docs/design-language.md's Phase 2a section
for the full before/after. */
/* --- typography ---
Thai-safe system stack: no web font is loaded (the CSP has no
font-src/style-src relaxation and this app deliberately avoids a
Google Fonts / CDN link, which would be blocked anyway) — every name
below is a platform system font that already renders Thai glyphs
correctly on its OS (Segoe UI/Leelawadee UI on Windows, San Francisco/
Thonburi-backed system UI on macOS/iOS, Noto Sans Thai on Android/
Linux/Chrome OS). */
--sso-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
"Noto Sans Thai", "Noto Sans", sans-serif;
/* --sso-font-family-mono: reserved for any future money/numeric/code
column (none exists in SSO today — no money, no settings-table data —
see docs/admin-redesign-assessment.md's "N/A for SSO" section) but
defined so a future admin surface (e.g. a session/audit timestamp
table) has a ready-made monospace stack instead of guessing one. */
--sso-font-family-mono: ui-monospace, "SFMono-Regular", "Cascadia Code",
Consolas, "Liberation Mono", monospace;
--sso-font-size-sm: 0.875rem;
--sso-font-size-xs: 0.75rem;
--sso-font-size-base: 1rem;
--sso-font-size-heading: 1.5rem;
--sso-line-height-base: 1.6; /* generous — Thai vowel/tone marks need the room */
--sso-line-height-heading: 1.3;
--sso-font-weight-label: 500;
--sso-font-weight-heading: 700;
/* --- spacing (8pt-ish scale) --- */
--sso-space-xs: 0.25rem;
--sso-space-sm: 0.5rem;
--sso-space-md: 1rem;
--sso-space-lg: 1.5rem;
--sso-space-xl: 2.5rem;
/* --- radius / elevation / layout --- */
--sso-radius-sm: 0.5rem; /* inputs, buttons, alerts, brand mark */
--sso-radius-lg: 1rem; /* card */
--sso-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
0 12px 32px -8px rgba(16, 24, 40, 0.14);
--sso-card-max-width: 27rem;
/* Admin/back-office content widths. The auth pages (login/setup/
logout/account-password) keep the 27rem width above unchanged — this is
purely additive. Two more canonical widths, selected per-page via the
`.sso-main:has(...)` rules further down (a pure-CSS, content-aware
width switch — no Go template field needed, since `.Page` is a
different concrete struct per page and `layout.html` can't branch on a
field only some of them have; see design-language.md for the full
rationale).
Phase 2a (Tailwind/DaisyUI admin redesign) widened -admin from 40rem to
60rem: the new-user/detail pages now render a genuine two-column layout
(form + a real info/summary side panel) instead of one narrow centered
form — a lone ~40rem column centered in the full dashboard width read as
"stranded" on a wide viewport (design-lead craft-bar finding). The
confirm/step-up page is the deliberate exception — see
`.sso-admin-shell--narrow` further down — and stays a small, centered,
modal-like card on purpose. */
--sso-card-max-width-admin: 60rem; /* new-user / detail (2-column) forms */
--sso-card-max-width-admin-table: 72rem; /* the user-list table (widened
from 64rem in the 2026-07-20b pass — the table now sits inside the
sidebar shell's content column rather than a lone centered card, so it
can use the extra room instead of scrolling sooner than it needs to) */
/* --sso-sidebar-* (fixed dark chrome tokens) — RETIRED in the Phase 2a
Tailwind/DaisyUI admin redesign. The sidebar's color/width/spacing now
comes directly from Tailwind/DaisyUI utility classes in layout.html
(`bg-neutral`, `text-neutral-content`, `w-64`, etc., reading the SAME
"ecox" theme values these tokens used to duplicate — see
app/api/tailwind/input.css). style.css keeps only the structural
show/hide toggle for `.sso-admin-sidebar` further down — see that rule's
comment for why the split is by CSS PROPERTY (display vs. everything
else), not by which stylesheet "wins": style.css is unlayered and
app.css's Tailwind utilities live in `@layer utilities`, and CSS
cascade layers make an unlayered rule always beat a layered one
regardless of specificity (verified empirically, not assumed) — so the
two stylesheets must never both set the same property on the same
element, only different, non-overlapping properties. */
/* --- motion --- */
--sso-transition-fast: 120ms ease;
}
/* Dark scheme — same semantics, re-themed for a dark surface. No JS toggle;
this is `prefers-color-scheme` only, per the task's light+dark
requirement. Only values that actually depend on page/surface luminance
are overridden (button-on-primary contrast, e.g., doesn't change with the
page background, so it's omitted here on purpose). The admin sidebar's
own colors are no longer sourced from this file at all (see the Phase 2a
note further down) — the DaisyUI "ecox" theme is light-only, so the
sidebar stays visually the same dark surface regardless of the visitor's
OS light/dark preference, same end result as the old fixed-dark-sidebar
tokens this comment used to describe. */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
/* Emerald behaves like the old plain green here: G-dominant hues have a
narrow "AA text-contrast ceiling" / "AA non-text floor" band (see
docs/design-lessons.md), so hover/active are pinned to the same value
as the base color in dark mode; the hover/active affordance instead
comes from the inset highlight ring further down
(`.sso-button--primary:hover`/`:active` inside this same media
query), not from a luminance shift. Recomputed for emerald-700
(#047857) specifically, not assumed from the old green-700 numbers:
vs. dark card (#141b29) = 3.14:1 (≥3:1, passes — a real but slightly
narrower margin than green-700's old 3.43:1, still comfortably
above the floor); vs. dark page bg (#0b1220) = 3.41:1 (≥3:1, passes). */
--sso-color-primary-hover: var(--sso-color-primary);
--sso-color-primary-active: var(--sso-color-primary);
/* --sso-color-focus is deliberately NOT overridden here (unlike the old
blue palette) — --sso-color-primary itself already clears 3:1 against
both the dark surface and the dark page background (recomputed above
for emerald-700), so the base emerald doubles as the dark-mode
focus-ring color with no separate lighter value needed. */
--sso-color-bg: #0b1220;
--sso-color-surface: #141b29;
--sso-color-text: #e7ebf1;
--sso-color-muted: #94a3b8;
--sso-color-border: #26303f;
--sso-color-border-strong: #384457;
--sso-color-error: #ff9a91;
--sso-color-error-bg: #3a1512;
/* Success dark-mode pairing is UNCHANGED by the 2026-07-20b light-mode
retone (green-800/green-100 → these dark values were never green-700-
derived to begin with, they're their own independently-verified
pair): 9.7:1, still comfortably AA. */
--sso-color-success: #7ee2ac;
--sso-color-success-bg: #0f2b1e;
/* --sso-color-danger*/--sso-color-warning* dark-mode overrides retired
alongside the :root definitions above — see that comment. The
DaisyUI "ecox" theme these admin colors now come from is light-only
(Phase 1 scope, tailwind/README.md), which only affects the
Tailwind-styled /admin/* surface, not this file's own dark-mode
tokens for the remaining sso-*-styled auth pages. */
--sso-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5),
0 20px 45px -12px rgba(0, 0, 0, 0.6);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* THE empty-top-band bug fix (2026-07-20d): layout.html's icon-sprite
` in layout.html (and now also
* `.sso-admin-sidebar__logo` for the sidebar brand lockup).
* ------------------------------------------------------------------ */
/* --sso-color-primary is Tailwind emerald-700 (#047857), NOT the
operator concept's literal emerald-600 (#059669) — recomputed, don't
reuse: white button-text on emerald-600 only clears 3.77:1 (WCAG
relative-luminance, computed directly), below the 4.5:1 AA minimum for
normal text. emerald-700 clears 5.49:1. See docs/design-language.md
"Phase 2b" for the full contrast table and docs/admin-redesign-
assessment.md for why this is flagged as a correction, not a rejection,
of the operator's spec. */
--sso-color-primary: #047857; /* emerald-700 */
--sso-color-primary-hover: #065f46; /* emerald-800 — 7.69:1 white-text */
--sso-color-primary-active: #064e3b; /* emerald-900 — 9.72:1 white-text */
--sso-color-primary-contrast: #ffffff;
/* Focus-ring color is a separate token from --sso-color-primary on
purpose (decoupling, not because they currently diverge): emerald-700's
own luminance profile already clears 3:1 against both light-mode
surfaces and (see the dark-mode block below) both dark-mode surfaces, so
--sso-color-focus equals --sso-color-primary in BOTH themes today. */
--sso-color-focus: var(--sso-color-primary);
/* --sso-color-primary-accent (emerald-600, sidebar-only) — RETIRED in the
Phase 2a Tailwind/DaisyUI admin redesign: the rebuilt sidebar's active
nav state now uses the SAME --sso-color-primary as every other button/
CTA in the system (DaisyUI's `bg-primary`/`text-primary-content`
utilities), per the "one primary action color, never let a second hue
leak into nav/chrome" rule — a second, narrower-verified shade just for
the sidebar was no longer needed once nav styling moved to Tailwind
utility classes reading the same theme token. See
app/api/tailwind/input.css's `ecox` theme for the current source of
truth on --color-primary (identical hex, #047857).
Reserved brand accent — the logo's teal/blue-green globe. Untouched by
the emerald retone (already independent of the primary hue; still
decorative + the Admin role-badge fill only, see Components). */
--sso-color-secondary: #0f766e;
--sso-color-secondary-hover: #115e56;
/* --- neutrals --- */
--sso-color-bg: #f4f6f9;
--sso-color-surface: #ffffff;
--sso-color-text: #101828;
--sso-color-muted: #475569;
--sso-color-border: #d7dce3;
--sso-color-border-strong: #b7c0cc;
/* --- semantic (status) --- */
--sso-color-error: #b3261e;
--sso-color-error-bg: #fdecec;
/* --sso-color-success / -bg: 2026-07-20b — retoned to Tailwind
green-800/green-100 (#166534 / #dcfce7) per the operator concept's
literal "green-100/green-800 = success" spec. Recomputed: 6.49:1 (WCAG
relative luminance), clears AA with a comfortable margin. Deliberately
a DIFFERENT green family from --sso-color-primary (emerald) — the
concept's own "status colors separate from primary" rule — so success
never reads as "the same green as the primary action," reinforced (as
before the retone) by shape/position: success is always a tinted
alert/badge, never a solid button fill, so it can never be confused
with the primary CTA's affordance either. */
--sso-color-success: #166534; /* green-800 */
--sso-color-success-bg: #dcfce7; /* green-100 */
/* --sso-color-warning*/--sso-color-danger* (the old Phase-2 amber-warning-
box + destructive-action-button token families) are RETIRED as of the
Phase 2a Tailwind/DaisyUI admin redesign — the entire /admin/* surface
that used them (username-locked hint, delete-confirm warning, the
delete/danger button) now reads its warning/error colors straight from
the DaisyUI "ecox" theme (`--color-warning`/`--color-error` in
app/api/tailwind/input.css, via `alert-warning`/`btn-error`/`alert-error`
component classes) — same hex values, one fewer parallel token system
to keep in sync. Nothing outside /admin/* ever used these two families
(grep-verified before removal), so this is a pure dead-code cleanup,
not a behavior change. See docs/design-language.md's Phase 2a section
for the full before/after. */
/* --- typography ---
Thai-safe system stack: no web font is loaded (the CSP has no
font-src/style-src relaxation and this app deliberately avoids a
Google Fonts / CDN link, which would be blocked anyway) — every name
below is a platform system font that already renders Thai glyphs
correctly on its OS (Segoe UI/Leelawadee UI on Windows, San Francisco/
Thonburi-backed system UI on macOS/iOS, Noto Sans Thai on Android/
Linux/Chrome OS). */
--sso-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
"Noto Sans Thai", "Noto Sans", sans-serif;
/* --sso-font-family-mono: reserved for any future money/numeric/code
column (none exists in SSO today — no money, no settings-table data —
see docs/admin-redesign-assessment.md's "N/A for SSO" section) but
defined so a future admin surface (e.g. a session/audit timestamp
table) has a ready-made monospace stack instead of guessing one. */
--sso-font-family-mono: ui-monospace, "SFMono-Regular", "Cascadia Code",
Consolas, "Liberation Mono", monospace;
--sso-font-size-sm: 0.875rem;
--sso-font-size-xs: 0.75rem;
--sso-font-size-base: 1rem;
--sso-font-size-heading: 1.5rem;
--sso-line-height-base: 1.6; /* generous — Thai vowel/tone marks need the room */
--sso-line-height-heading: 1.3;
--sso-font-weight-label: 500;
--sso-font-weight-heading: 700;
/* --- spacing (8pt-ish scale) --- */
--sso-space-xs: 0.25rem;
--sso-space-sm: 0.5rem;
--sso-space-md: 1rem;
--sso-space-lg: 1.5rem;
--sso-space-xl: 2.5rem;
/* --- radius / elevation / layout --- */
--sso-radius-sm: 0.5rem; /* inputs, buttons, alerts, brand mark */
--sso-radius-lg: 1rem; /* card */
--sso-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
0 12px 32px -8px rgba(16, 24, 40, 0.14);
--sso-card-max-width: 27rem;
/* Admin/back-office content widths. The auth pages (login/setup/
logout/account-password) keep the 27rem width above unchanged — this is
purely additive. Two more canonical widths, selected per-page via the
`.sso-main:has(...)` rules further down (a pure-CSS, content-aware
width switch — no Go template field needed, since `.Page` is a
different concrete struct per page and `layout.html` can't branch on a
field only some of them have; see design-language.md for the full
rationale).
Phase 2a (Tailwind/DaisyUI admin redesign) widened -admin from 40rem to
60rem: the new-user/detail pages now render a genuine two-column layout
(form + a real info/summary side panel) instead of one narrow centered
form — a lone ~40rem column centered in the full dashboard width read as
"stranded" on a wide viewport (design-lead craft-bar finding). The
confirm/step-up page is the deliberate exception — see
`.sso-admin-shell--narrow` further down — and stays a small, centered,
modal-like card on purpose. */
--sso-card-max-width-admin: 60rem; /* new-user / detail (2-column) forms */
--sso-card-max-width-admin-table: 72rem; /* the user-list table (widened
from 64rem in the 2026-07-20b pass — the table now sits inside the
sidebar shell's content column rather than a lone centered card, so it
can use the extra room instead of scrolling sooner than it needs to) */
/* --sso-sidebar-* (fixed dark chrome tokens) — RETIRED in the Phase 2a
Tailwind/DaisyUI admin redesign. The sidebar's color/width/spacing now
comes directly from Tailwind/DaisyUI utility classes in layout.html
(`bg-neutral`, `text-neutral-content`, `w-64`, etc., reading the SAME
"ecox" theme values these tokens used to duplicate — see
app/api/tailwind/input.css). style.css keeps only the structural
show/hide toggle for `.sso-admin-sidebar` further down — see that rule's
comment for why the split is by CSS PROPERTY (display vs. everything
else), not by which stylesheet "wins": style.css is unlayered and
app.css's Tailwind utilities live in `@layer utilities`, and CSS
cascade layers make an unlayered rule always beat a layered one
regardless of specificity (verified empirically, not assumed) — so the
two stylesheets must never both set the same property on the same
element, only different, non-overlapping properties. */
/* --- motion --- */
--sso-transition-fast: 120ms ease;
}
/* Dark scheme — same semantics, re-themed for a dark surface. No JS toggle;
this is `prefers-color-scheme` only, per the task's light+dark
requirement. Only values that actually depend on page/surface luminance
are overridden (button-on-primary contrast, e.g., doesn't change with the
page background, so it's omitted here on purpose). The admin sidebar's
own colors are no longer sourced from this file at all (see the Phase 2a
note further down) — the DaisyUI "ecox" theme is light-only, so the
sidebar stays visually the same dark surface regardless of the visitor's
OS light/dark preference, same end result as the old fixed-dark-sidebar
tokens this comment used to describe. */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
/* Emerald behaves like the old plain green here: G-dominant hues have a
narrow "AA text-contrast ceiling" / "AA non-text floor" band (see
docs/design-lessons.md), so hover/active are pinned to the same value
as the base color in dark mode; the hover/active affordance instead
comes from the inset highlight ring further down
(`.sso-button--primary:hover`/`:active` inside this same media
query), not from a luminance shift. Recomputed for emerald-700
(#047857) specifically, not assumed from the old green-700 numbers:
vs. dark card (#141b29) = 3.14:1 (≥3:1, passes — a real but slightly
narrower margin than green-700's old 3.43:1, still comfortably
above the floor); vs. dark page bg (#0b1220) = 3.41:1 (≥3:1, passes). */
--sso-color-primary-hover: var(--sso-color-primary);
--sso-color-primary-active: var(--sso-color-primary);
/* --sso-color-focus is deliberately NOT overridden here (unlike the old
blue palette) — --sso-color-primary itself already clears 3:1 against
both the dark surface and the dark page background (recomputed above
for emerald-700), so the base emerald doubles as the dark-mode
focus-ring color with no separate lighter value needed. */
--sso-color-bg: #0b1220;
--sso-color-surface: #141b29;
--sso-color-text: #e7ebf1;
--sso-color-muted: #94a3b8;
--sso-color-border: #26303f;
--sso-color-border-strong: #384457;
--sso-color-error: #ff9a91;
--sso-color-error-bg: #3a1512;
/* Success dark-mode pairing is UNCHANGED by the 2026-07-20b light-mode
retone (green-800/green-100 → these dark values were never green-700-
derived to begin with, they're their own independently-verified
pair): 9.7:1, still comfortably AA. */
--sso-color-success: #7ee2ac;
--sso-color-success-bg: #0f2b1e;
/* --sso-color-danger*/--sso-color-warning* dark-mode overrides retired
alongside the :root definitions above — see that comment. The
DaisyUI "ecox" theme these admin colors now come from is light-only
(Phase 1 scope, tailwind/README.md), which only affects the
Tailwind-styled /admin/* surface, not this file's own dark-mode
tokens for the remaining sso-*-styled auth pages. */
--sso-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5),
0 20px 45px -12px rgba(0, 0, 0, 0.6);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* THE empty-top-band bug fix (2026-07-20d): layout.html's icon-sprite