/* Cascade layer order — registered FIRST so every file that transitively
   imports this one (all preview cards via _card.css, and the prototype) shares
   one deterministic order. Later layers win regardless of selector specificity;
   UNLAYERED rules beat all layered rules (so this statement alone changes
   nothing — components migrate INTO layers one at a time). See
   notes/architecture.md. */
@layer reset, tokens, theme, base, components, app, tweaks;

/* =============================================================================
   ČOS Digital Library — Design Tokens
   Based on:
     • Design systém gov.cz (DSGCZ) — https://designsystem.gov.cz/
     • Jednotný vizuální styl státní správy (JVS)
     • Domain extensions for the ČOS / OOS Digital Library
   ============================================================================= */

/* ---------- Brand font: Czechia Sans (Tomáš Brousil / Suitcase Type Foundry).
     The official typeface of the Jednotný vizuální styl státní správy.
     Self-hosted from /fonts. Italics provided as separate font-style:italic
     faces so the browser does not synthesize obliques.
   ---------- */
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-SemiboldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Czechia Sans';
  src: url('fonts/CzechiaSans2.4-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Web-font fallbacks loaded from Google Fonts.
     Czechia Sans is not freely available (access on request from Suitcase Type
     Foundry / brand owners), so the cascade must degrade gracefully without it.

     • Roboto — primary sans fallback. Note: Roboto has no Semibold (600); the
       browser picks 700 as the nearest neighbour, which is acceptable.
     • Roboto Mono — primary mono. JetBrains Mono is the secondary mono before
       the system Consolas fallback.
     Italics included for 400/500 so emphasis renders properly without
       synthesized obliques.
   ---------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&family=Roboto+Mono:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================================
     COLORS — DSGCZ Primary (blue scale, used for actions, links, focus)
     ============================================================================ */
  --gov-color-primary-50:  #eaf2fb;
  --gov-color-primary-100: #c7ddf3;
  --gov-color-primary-200: #9fcaff;
  --gov-color-primary-300: #6ba8e1;
  --gov-color-primary-400: #337fc4;
  --gov-color-primary-500: #2362a2;   /* core action blue */
  --gov-color-primary-600: #1e5086;
  --gov-color-primary-700: #1d456f;
  --gov-color-primary-800: #1d3c5d;
  --gov-color-primary-900: #15355e;

  /* JVS — official brand colors for the state logo lockup */
  --jvs-modra:  #00469B;              /* JVS Modrá — used in the Lev/logo block */
  --jvs-bila:   #FFFFFF;

  /* ============================================================================
     NEUTRALS — cool-gray scale (text, surfaces, dividers)
     ============================================================================ */
  --gov-color-neutral-0:   #ffffff;
  --gov-color-neutral-50:  #f3f7fc;
  --gov-color-neutral-100: #e3eaef;
  --gov-color-neutral-200: #d4dde2;
  --gov-color-neutral-300: #b9c1c6;
  --gov-color-neutral-400: #9aa6ac;
  --gov-color-neutral-500: #7e8a8f;
  --gov-color-neutral-600: #5f6b70;
  --gov-color-neutral-700: #4a575c;
  --gov-color-neutral-800: #2d3338;
  --gov-color-neutral-900: #0c1838;   /* almost-black with blue cast */

  /* ============================================================================
     SEMANTIC — status (success / warning / error / info)
     Color must NEVER carry meaning alone — always pair with text + icon.
     ============================================================================ */
  --gov-color-success-50:  #e6f4ea;
  --gov-color-success-100: #c8e6cf;
  --gov-color-success-500: #2e8540;
  --gov-color-success-700: #1f5d2d;

  --gov-color-warning-50:  #fff8e6;
  --gov-color-warning-100: #faeec8;
  --gov-color-warning-500: #b06b00;
  --gov-color-warning-700: #7a4a00;

  --gov-color-error-50:   #fdecee;
  --gov-color-error-100:  #f9c9ce;
  --gov-color-error-500:  #c52a3a;
  --gov-color-error-600:  #a51e2d;
  --gov-color-error-700:  #7f1521;

  --gov-color-info-50:    #e6f6fd;
  --gov-color-info-100:   #c7e7f9;
  --gov-color-info-500:   #0e7fa8;
  --gov-color-info-700:   #0a5675;

  /* ============================================================================
     DOMAIN — ČOS digital-library extensions
     Tonal, muted swatches for document types. They sit in the body of the page;
     UI primary stays gov.cz blue. Color is never the sole carrier of meaning —
     each label combines text + icon + this swatch.
     ============================================================================ */
  --doc-cos:      #1d456f;            /* ČOS — deep state blue */
  --doc-cos-bg:   #eaf2fb;
  --doc-stanag:   #4a575c;            /* STANAG — graphite */
  --doc-stanag-bg:#eef1f3;
  --doc-stanrec:  #5d4a83;            /* STANREC — muted plum */
  --doc-stanrec-bg:#f0ecf6;
  --doc-ap:       #2c6e63;            /* AP — muted teal */
  --doc-ap-bg:    #e6f1ef;

  /* Availability / request workflow */
  --avail-public:           var(--gov-color-success-500);
  --avail-public-bg:        var(--gov-color-success-50);
  --avail-login:            var(--gov-color-info-500);
  --avail-login-bg:         var(--gov-color-info-50);
  --avail-controlled:       var(--gov-color-warning-500);
  --avail-controlled-bg:    var(--gov-color-warning-50);
  --avail-metadata:         var(--gov-color-neutral-600);
  --avail-metadata-bg:      var(--gov-color-neutral-50);

  --req-submitted:    var(--gov-color-info-500);
  --req-review:       var(--gov-color-warning-500);
  --req-approved:     var(--gov-color-success-500);
  --req-rejected:     var(--gov-color-error-500);
  --req-returned:     var(--gov-color-warning-700);

  /* Validity */
  --validity-valid:   var(--gov-color-success-500);
  --validity-invalid: var(--gov-color-neutral-500);
  --validity-replaced:var(--gov-color-warning-500);
  --validity-draft:   var(--gov-color-neutral-400);

  /* ============================================================================
     SEMANTIC SURFACES — apply these in components, not raw scale values
     ============================================================================ */
  --color-bg-page:        var(--gov-color-neutral-50);
  --color-bg-surface:     var(--gov-color-neutral-0);
  --color-bg-subtle:      var(--gov-color-neutral-50);
  --color-bg-muted:       var(--gov-color-neutral-100);

  --color-fg-default:     var(--gov-color-neutral-900);
  --color-fg-secondary:   var(--gov-color-neutral-700);
  --color-fg-tertiary:    var(--gov-color-neutral-500);
  --color-fg-on-primary:  var(--gov-color-neutral-0);
  --color-fg-link:        var(--gov-color-primary-500);
  --color-fg-link-visited:#7B4DA1;

  --color-border-default: var(--gov-color-neutral-200);
  --color-border-strong:  var(--gov-color-neutral-300);
  --color-border-focus:   var(--gov-color-primary-500);

  /* ============================================================================
     TYPOGRAPHY
     gov.cz / JVS primary typeface: Czechia Sans (Tomáš Brousil).
     The font has two visual variants exposed via OpenType stylistic sets:

       • TEXT variant — humanist details: 'i'/'I' with semi-serifs, 'l' with
         a tail curl. Use for body, UI, captions, all running text.
         font-feature-settings: "dlig", "kern", "ordn", "ss04", "ss11", "ss20";

       • LOGOTYPE variant — geometric, simpler 'i', 'I', 'l' (no semi-serifs).
         Use for institutional names, brand wordmarks, large display headers.
         font-feature-settings: "dlig", "kern", "ordn";

     Reference: https://statni-sprava.brandcloud.pro/document/169038
     ============================================================================ */
  /* Font cascade — degrades gracefully when Czechia Sans is unavailable.
     Order: project web font (local) → fallback web font (Google Fonts) →
     modern system font → ubiquitous system fonts → generic family.
     If you change this, also update notes/decisions.md "Typography". */
  --font-sans:    'Czechia Sans', 'Roboto', 'Aptos', 'Arial', 'Helvetica', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  --font-display: 'Czechia Sans', 'Roboto', 'Aptos', 'Arial', 'Helvetica', sans-serif;

  /* OpenType feature presets — apply these via font-feature-settings */
  --otf-text:     "dlig", "kern", "ordn", "ss04", "ss11", "ss20";
  --otf-logotype: "dlig", "kern", "ordn"; /* @kind font */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Type scale — desktop. Sizes follow DSGCZ scale, units in rem (1rem=16px). */
  --fs-display:  2.75rem;   /* 44 — Page hero */
  --fs-h1:       2rem;      /* 32 */
  --fs-h2:       1.5rem;    /* 24 */
  --fs-h3:       1.25rem;   /* 20 */
  --fs-h4:       1.125rem;  /* 18 */
  --fs-body-l:   1.125rem;  /* 18 */
  --fs-body:     1rem;      /* 16 — base */
  --fs-body-s:   0.875rem;  /* 14 — meta / caption */
  --fs-caption:  0.75rem;   /* 12 — micro / chip */

  --lh-tight:    1.2;  /* @kind font */
  --lh-snug:     1.35; /* @kind font */
  --lh-normal:   1.5;  /* @kind font */
  --lh-relaxed:  1.6;  /* @kind font */

  --ls-tight:    -0.01em;
  --ls-normal:    0; /* @kind spacing */
  --ls-mono:      0.01em;
  --ls-caps:      0.06em;

  /* ============================================================================
     SPACING — 4px base
     ============================================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================================================
     RADII — DSGCZ uses small, consistent corners (no pillowy rounding)
     ============================================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default for cards, buttons, inputs */
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ============================================================================
     SHADOWS — flat, very subtle (institutional, not marketing)
     ============================================================================ */
  --shadow-1: 0 1px 2px rgba(12, 24, 56, 0.06);
  --shadow-2: 0 2px 6px rgba(12, 24, 56, 0.08), 0 1px 2px rgba(12, 24, 56, 0.04);
  --shadow-3: 0 6px 16px rgba(12, 24, 56, 0.10), 0 2px 4px rgba(12, 24, 56, 0.05);
  /* Focus ring — spacer-ring recipe (Tailwind/Radix/Linear pattern).
     Two stacked outset layers: a 2px spacer the surface color (acts as the
     visual gap, follows border-radius, matches whatever sits behind the
     focused element), then a translucent brand halo at 5px outset. The
     spacer mode means the ring stays readable even when the focused
     element shares its color with its container (e.g. blue Primary button
     on a blue-tinted card). Used as a single token across the system so
     fields, checkboxes, radios, switches and segmented controls all share
     the same focus language. */
  --shadow-focus:       0 0 0 2px var(--color-bg-surface), 0 0 0 5px rgba(35, 98, 162, 0.45);
  --shadow-focus-error: 0 0 0 2px var(--color-bg-surface), 0 0 0 5px rgba(197, 42, 58, 0.45);

  /* Borders */
  --border-thin: 1px solid var(--color-border-default);
  --border-strong: 1px solid var(--color-border-strong);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: var(--space-6);
}

/* ============================================================================
   FIELD COMPONENT TOKENS — shared by every input "box" (.field) across
   comp-inputs / comp-search / comp-select / comp-textarea. These are the
   theme-flipping surfaces that USED to live as a higher-specificity
   `body[data-theme="dark"] .field` blanket in _dark.css; routing them through
   tokens lets dark be a pure token re-value (see _dark.css @layer theme) and
   collapses that blanket. Light defaults here; dark overrides in _dark.css.
     • --field-bg            rest surface — white in light, the darker "well"
                             (color-bg-subtle) in dark so the field sinks below
                             the card.
     • --field-disabled-bg   greyed well — neutral-50 light, color-bg-page dark.
     • --field-disabled-bd-style  solid light → dashed dark (a non-colour
                             "locked" signal; accessibility: never colour alone).
     • --field-pressed-bg    select-trigger pressed tint — primary-100 light,
                             a neutral translucent-white in dark.
   NOTE: the field RULES stay UNLAYERED in each card (they can't move into
   @layer components yet — the inner `<input>:focus` suppression must beat the
   UNLAYERED global `:where(input):focus-visible` ring in this file, and an
   unlayered rule can't be beaten from a layer). Token VALUES resolve by
   inheritance regardless of layer, so the migration works anyway. Same blocker
   family as table/.bi and doc-card/_chips.css. */
@layer tokens {
  :root {
    /* RAISED SURFACE \u2014 a content/control surface that rests on the page or a
       card and must read as a DISTINCT block in both themes: white in light,
       a sunken "well" tone in dark (so it doesn't merge into the dark card it
       sits on, the same way the field well sinks). Shared by the not-yet-self-
       contained preview controls / panels that USED to ride the
       `body[data-theme="dark"] .x { background: color-bg-subtle }` blanket in
       _dark.css: .filter-pill, .view-switch, .pag button, .related a,
       .quick-tile, .lib-card, .filter-group, .notice (base). Routing them
       through this token collapses that blanket to a single @layer theme
       re-value (see _dark.css). Intentionally a SEPARATE token from --field-bg
       even though the values currently match \u2014 the intents differ (input well
       vs. raised panel/control), so they must be independently themeable. */
    --color-bg-raised:         var(--gov-color-neutral-0);

    --field-bg:                var(--gov-color-neutral-0);
    --field-disabled-bg:       var(--gov-color-neutral-50);
    --field-disabled-bd-style: solid; /* @kind other */
    --field-pressed-bg:        var(--gov-color-primary-100);

    /* THEME SWITCH (.tsw / .tsw3) tokens \u2014 shared by comp-switch.html,
       brand-header.html and the prototype (ui-kit.css general .tsw + the
       always-dark .bar override). Dark re-value in _dark.css @layer theme.
         \u2022 --tsw-bg / --tsw-bd      track surface + border (neutral-100/border-
                                    default light \u2192 bg-muted/border-strong dark).
         \u2022 --tsw-puck-light          the LIGHT puck/icon colour (white \u2192 #e6ebf2).
         \u2022 --tsw-puck-dark           the DARK puck/icon colour (neutral-900 \u2192
                                    #1a2030). These two flip with THEME, so the
                                    unchecked thumb (light puck + dark icon) and
                                    checked thumb (dark puck + light icon) stay
                                    legible in both themes \u2014 incl. on the always- dark .bar, which used to need the _dark.css blanket to avoid a near-white icon on a white puck. neutral-900 can't be used directly because it INVERTS to near-white in dark. */
    --tsw-bg:          var(--gov-color-neutral-100);
    --tsw-bd:          var(--color-border-default);
    --tsw-puck-light:  #ffffff;
    --tsw-puck-dark:   var(--gov-color-neutral-900);
    --tsw-thumb-shadow: 0 1px 2px rgba(12,24,56,0.22), 0 0 0 0.5px rgba(12,24,56,0.05);
  }
}

/* ============================================================================
   SEMANTIC ELEMENT BASE STYLES
   ============================================================================ */
html { font-family: var(--font-sans); color: var(--color-fg-default); font-feature-settings: var(--otf-text); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-fg-default); background: var(--color-bg-page); font-feature-settings: var(--otf-text); }

/* Logotype variant — for institutional wordmarks, brand lockups, and large
   display headers. Switches off the humanist stylistic sets so 'i' / 'I' /
   'l' render in their cleaner geometric form. */
.czechia-logotype,
.lockup__name,
.text-display,
h1, .h1 { font-feature-settings: var(--otf-logotype); }

/* Weight rule: Czechia Sans Bold (700) is reserved for display sizes ≥24 px
   (Display, H1, H2). At H3 / H4 / logotype sizes the bold weight closes up
   the dot on "i / í" against the stem and crowds Czech diacritics — step down
   to Semibold (600) for headings below 24 px and for the brand lockup. */
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--font-weight-bold); letter-spacing: var(--ls-tight); color: var(--color-fg-default); margin: 0; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--font-weight-bold); margin: 0; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--font-weight-semibold); margin: 0; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--font-weight-semibold); margin: 0; }
p  { font-size: var(--fs-body); line-height: var(--lh-relaxed); margin: 0; }
small, .text-meta { font-size: var(--fs-body-s); color: var(--color-fg-secondary); }
.text-caption { font-size: var(--fs-caption); color: var(--color-fg-tertiary); }
.text-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--font-weight-bold); letter-spacing: var(--ls-tight); }
.text-eyebrow { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--font-weight-medium); color: var(--color-fg-secondary); }

a { color: var(--color-fg-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gov-color-primary-700); }
a:visited { color: var(--color-fg-link-visited); }
/* SYSTEM-WIDE RULE: the underline never runs under an icon. INLINE anchors are
   already safe — the @layer reset makes `.bi` inline-flex (an atomic inline),
   and text-decoration does not propagate into atomic inlines. Anchors that are
   THEMSELVES flex containers blockify their children (decoration propagates
   into flex items) — those must underline a label <span> instead of the anchor
   (see brand-header / ui-kit.css `.bar a`). Never fix this with an unlayered
   `a .bi { display:… }` — it would out-cascade every layered `.bi` display
   override (h-icon hiding etc.). */

code, .text-mono { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: var(--ls-mono); }

/* Document code — for "ČOS 100001", "STANAG 4370 Ed. 6", etc.
   Hybrid: monospace digits + sans label, slight blue tint, no terminal look. */
.doc-code {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: 0.95em;
  letter-spacing: var(--ls-mono);
  color: var(--color-fg-default);
  font-variant-numeric: tabular-nums;
}

/* Focus ring — DSGCZ accessibility standard.
   LIVES IN @layer base (Jun 2026) so a component that defines its OWN focus ring
   in @layer components (e.g. .btn, and the now-layered .field wrapper) WINS over
   this default — layered components beat layered base. Previously this rule was
   UNLAYERED and beat every layered focus ring (incl. the button's tokenised
   ring); moving it to @layer base both fixes that AND unblocks fully wrapping the
   field family (the .field inner-input suppression can now sit in @layer
   components and beat this ring on the native control). UNLAYERED component focus
   rings (the not-yet-migrated preview controls: .seg/.pag/.filter-pill/…) are
   UNCHANGED — unlayered still beats layered base, so they keep winning. Plain
   focusable elements with no component ring still get this default. */
@layer base {
  a:focus-visible,
  a[data-state~="focus"] {
    outline: none; box-shadow: var(--shadow-focus); border-radius: 2px;
    /* Bloom-in (matches the focusable rule below) so link focus rings animate
       — real keyboard focus AND the playground's forced data-state="focus". */
    transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  :where(button, [role="button"], input, select, textarea, [tabindex]):focus-visible,
  :where(button, [role="button"], input, select, textarea, [tabindex])[data-state~="focus"] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
    /* Bloom-in animation: spacer-ring's outset layers grow from
       transparent 0-spread to full size with a soft expo-out easing.
       Component-specific rules with their own transition declaration
       win (e.g. .btn defines its own faster hover transition that also
       covers focus).  The `[data-state~="focus"]` mirror lets the focus/
       state playground force the ring on any focusable it stamps. */
    transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* -----------------------------------------------------------------------------
   Bootstrap-icon normalization — system-wide glyph centering.

   Root cause of the recurring "icon rides high / off-centre" bug: a Bootstrap
   `<i class="bi …">` is an INLINE box, so its height follows the inherited
   line-height (e.g. ~15.3px at 14px text) while the glyph `::before` is only
   ~12.5px and is laid out on the text baseline PLUS Bootstrap's
   `vertical-align: -.125em`. The glyph therefore parks above the centre of the
   `<i>` box; flex-centering the parent (a button, chip, etc.) then centres that
   too-tall box, not the glyph — so the glyph still looks high.

   Fix it ONCE here instead of per-component top/margin nudges: make the icon
   element a flex container. Its `::before` becomes a flex item, so the
   line-box strut, baseline and `vertical-align` no longer apply; the `<i>`
   collapses to the glyph's own size and centres it. Any centered parent then
   centres the glyph itself. Composes cleanly with per-component sizing
   (`font-size` / `width` / `height` on the icon) and horizontal margin nudges.

   LIVES IN @layer reset (Jun 2026) — it is a normalize/reset rule and belongs
   there per notes/architecture.md. Moving it off UNLAYERED is what UNBLOCKED
   `@layer`-wrapping comp-table: while `.bi` was unlayered, the table's
   `.tbl thead th .h-icon { display:none }` (`.h-icon` IS a `.bi`) lost to the
   unlayered `.bi { display:inline-flex }` once the table moved into
   @layer components (unlayered beats layered). Now `.bi` is in @layer reset, so
   any LAYERED override of it (the table's, or any future component's) wins
   cleanly, while still-UNLAYERED `.bi` overrides keep winning over reset. No
   `.bi` consumer regressed — verify display on any new `.bi` override after a wrap.
   ----------------------------------------------------------------------------- */
@layer reset {
  .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* -----------------------------------------------------------------------------
   Reduced motion — ONE system-wide policy (the single source of truth).

   `prefers-reduced-motion: reduce` collapses EVERY CSS transition and animation
   to near-instant across the whole system, so every state change — hover, the
   focus-ring bloom, active/press, open/close, slide, sweep, chevron rotation,
   sliding thumbs — SNAPS uniformly. Components must NOT ship their own partial
   reduced-motion blocks (that is what made the focus ring snap on some controls
   and keep blooming on others); this rule is the only place motion is reduced.

   Why 1ms and not 0/none: it keeps `transitionend` / `animationend` firing, so
   JS hand-offs that await them still complete, and it reads identically to the
   playground's synthetic `instant` shim — so the `reduced` test and `instant`
   speed now match. Delays are zeroed too (a lingering `transition-delay` would
   otherwise re-introduce a visible wait — e.g. the search clear button's
   deferred visibility flip). Iteration count is clamped so nothing loops.

   JS-DRIVEN motion (Web Animations API thumb glides in comp-segmented /
   comp-pagination) is invisible to CSS — those scripts read the SAME preference
   and skip the glide, snapping to the destination. Keep that JS guard in
   lock-step with this rule whenever you add JS-driven motion.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}