/* Phase 6 — Shared CSS Foundation (D-07) */ /* Extracted from web/login.html, web/dashboard.html, web/group.html */ /* Phase 06.1 — FOUC prevention: i18n.js sets data-i18n-pending on before the catalog fetch and removes it once the catalog is applied. This rule hides the body during that window so untranslated French text never flashes. */ html[data-i18n-pending] body { visibility: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* Reset & Base */ /* ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* T106 — Flag-emoji web font. Browsers that can't render Unicode regional- indicator flag emoji (notably Windows Chrome/Edge/Firefox) show bare two-letter codes ("AR", "FR", "GB"). We self-host the MIT-licensed TwemojiCountryFlags color font (COLR/CPAL) and put it FIRST in the font stacks below. The `unicode-range` restricts it to flag glyphs only (regional indicators + the black-flag tag-sequence range used by GB-ENG/GB-SCT), so it never touches non-flag text or the 🌍 earth emoji. The font is always defined — no runtime feature detection — and degrades gracefully: if the woff2 fails to load, or the browser already renders flags natively for a glyph the font lacks, the browser falls through per-glyph to the next family (native emoji). On Mac/iOS/Android this means flags render in Twemoji style instead of the native set, which is an accepted, consistent trade-off. */ @font-face { font-family: 'Twemoji Country Flags'; src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2'); font-display: swap; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; } body { font-family: 'Twemoji Country Flags', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 20px; } /* T106 — Flag-emoji web font for form controls. Form controls don't inherit the body font in the UA stylesheet, so flags in text-only contexts (the account country search input .searchable-select-input and the penalty-winner