/* tokens.css — Spec 019 Programa Semilla Brand Pivot design-token layer.
   THIS IS THE ONLY FILE WHERE RAW HEX VALUES MAY APPEAR (FR-009 — spec 011 invariant).
   THIS IS THE ONLY FILE WHERE LITERAL DURATIONS MAY APPEAR (FR-014 from spec 011, preserved).
   Names are SEMANTIC — no value-bound names like --color-white or --motion-200ms.

   Spec 019 retuned the palette / type stack / surfaces from the warm-modern (spec 011)
   placeholder identity to a sponsor-approximated Programa Semilla identity.

   Spec 037 re-anchors the palette to the OFFICIAL Programa Semilla brand book
   (superseding spec 019's sampled approximations):
     - primary: #1FA0A0 → official teal #008A9E (+ new --color-primary-light #42AFA8)
     - accent:  #F2C014 → official yellow #FFC729 (+ reserved decorative --color-accent-orange #F9A61C)
     - page bg: #FFFFFF → off-white #F6F8FA (cards stay pure white)
     - text:    #1A1A1A/#5A5A5A → #1F2933/#64748B; border #E2E5E5 → #DDE5E8
     - status:  success #168A4A, danger #D92D20
     - tables:  --color-table-zebra removed (de-zebra) → --color-table-hover/-separator
     - sidebar: new dark-teal shell tokens (--color-sidebar-bg #12343B, -hover, -text)

   History note for SC-001 grep: legacy hex values are intentionally absent from
   the rest of the codebase. Spec-011 legacy (#2E5E4E #1F4438 #E1ECE6 #D98A1B
   #FBEED6 #FAF7F2 #F4EFE6 #E5DED2) and the now-superseded spec-019 palette
   (#1FA0A0 #15807F #D7EDED #F2C014 #FBEBA6 #FFF3E5) appear ONLY in this comment.

   Imported BEFORE site.css and BEFORE tabler.min.css from _Layout.cshtml so the
   --tblr-* bridge below takes effect. */

/* ============================================================
   FONT FACES — self-hosted (FR-013 — sans-only after spec 019)
   Vendored as Latin-subsetted WOFF2 files under wwwroot/lib/fonts/<family>/. Spec 076 /
   FR-028 re-subset both from upstream (Inter v4.1, JetBrains Mono v2.304 — SIL OFL 1.1) to
   add the colón sign ₡ (U+20A1) and → (U+2192); provenance, commands and hashes are in
   wwwroot/lib/fonts/README.md, and scripts/verify-font-glyphs.sh guards the two glyphs.
   Latin subset (U+0000-00FF + typographic extras) covers en + es-CR copy.
   Fraunces was retired by spec 019 (FR-013) and removed from the vendored
   bundle to free ≈ 35 KB toward the NFR-002 / SC-011 ≤ 400 KB gz budget.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../lib/fonts/inter/inter-variable.woff2") format("woff2-variations"),
       url("../lib/fonts/inter/inter-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../lib/fonts/jetbrains-mono/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Spec 076 / FR-028 — JetBrains Mono has no ₡ upstream; this one-glyph face (Inter's ₡) is
   registered under the same family for U+20A1 only, so a monospaced amount never shows a box. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../lib/fonts/jetbrains-mono/colon-sign-fallback.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20A1;
}

/* ============================================================
   ROOT TOKENS
   ============================================================ */

:root {
  /* ---------- Color: surfaces (FR-007) ---------- */
  --color-bg-page:            #F6F8FA;
  --color-bg-surface:         #FFFFFF;
  --color-bg-surface-raised:  #FFFFFF;

  /* ---------- Color: text (FR-011) ---------- */
  --color-text-primary:       #1F2933;
  --color-text-secondary:     #64748B;
  --color-text-muted:         #64748B;

  /* ---------- Color: brand (FR-008 — spec 037 official palette #008A9E) ---------- */
  /* BUG-PSB-003 (#276) — #008A9E as white text on a solid fill (.fl-btn
     primary, .fl-table thead th, journey nodes, chips, badges, modal header —
     ~7 sites, all white-on-fill) measured 4.09-4.11:1, below the WCAG AA
     4.5:1 floor for normal text. Retuned to #008296 (5% darker on G/B),
     following the exact spec-058 --color-success playbook: darken the one
     shared root token rather than patch each of the ~7 consumers, since every
     one is the identical white-on-fill pairing and none needed a
     specificity-tie override (unlike .btn-link below) — .fl-btn/.fl-table/etc.
     are this project's OWN classes, not a Tabler default competing on the
     cascade. Re-verified live: 4.53:1 on the Login submit button and the
     "Mis fichas" table header (BrandTokenContrastTests). */
  --color-primary:            #008296;
  /* BUG-WMF-006 (#243) — #007789 as text-on-`--color-primary-subtle`
     (.fl-status-pill[data-tone="primary"]) measured 4.34:1, below 4.5:1.
     Retuned to #007486 (a 3-unit G/B darken — barely perceptible, clears
     4.52:1). This token is also used as text-on-white (.btn-link below,
     .fl-btn secondary text, etc.) and as a background-with-white-text
     (.fl-btn primary :hover/:focus-visible) — both directions only GAIN
     contrast from darkening, so this single retune is safe everywhere it's
     consumed (verified by reading every call site, not just the one
     reported). */
  --color-primary-strong:     #007486;
  --color-primary-light:      #42AFA8;
  --color-primary-light-rgb:  66, 175, 168;
  --color-primary-subtle:     #D6EEF1;
  /* Spec 076 / FR-005, FR-030 — label colour on a solid --color-primary fill (.btn-brand).
     White on #008296 measures ~4.5:1, on --color-primary-strong higher. */
  --color-on-primary:         #FFFFFF;
  --color-primary-rgb:        0, 130, 150;

  /* ---------- Color: accent (FR-009) — decorative-only per NFR-003 ---------- */
  --color-accent:             #FFC729;
  --color-accent-subtle:      #FFEFB8;
  /* Reserved decorative/fill accent (spec 037 D5) — NOT wired to any status; dark-text overlay only. */
  --color-accent-orange:      #F9A61C;

  /* ---------- Color: Alia accent family (spec 060 FR-008) — sampled from the Alia
     logo's own gradient (seeds/feedback-5/logo.png), provisional/self-derived, NOT
     the client-approved spec-037 palette above. Small, high-attention elements only
     (research.md R4/R5/R9 — never a large surface, FR-009):
       gold    → primary/brand buttons (.btn.btn-primary bridge, below)
       orange  → sidebar active/selected nav-item accent
       fuchsia → added to the family per FR-008; not wired to a component yet */
  --color-accent-alia-gold:    #FDC62F;
  --color-accent-alia-orange:  #ED804F;
  --color-accent-alia-orange-rgb: 237, 128, 79;
  --color-accent-alia-fuchsia: #E33A7A;

  /* ---------- Color: tables (spec 037 D3 — de-zebra: white rows, light-teal hover, soft separators) ---------- */
  --color-table-hover:        #EFF8F8;
  --color-table-separator:    #E5ECEF;

  /* ---------- Color: sidebar (spec 037 D1 shell, scoped to [data-testid="sidebar"]).
     Spec 060 / US2 / FR-006: retuned from dark-teal (#12343B) to a calm, low-chroma
     dark gray — a large solid saturated color block read as "visually aggressive" on
     a money-focused screen (research.md R3). --color-sidebar-hover is re-derived by
     the same HSL lightness step (+0.057) the old teal pair used, so the hover-state
     legibility contract carries over unchanged (text-on-hover contrast ~8.18:1, still
     comfortably above the ~9.0:1-ish text-on-shell floor). --color-sidebar-text is
     UNCHANGED — it already clears AA (10.17:1) against the new gray. Self-derived,
     not client-approved (SC-009 sign-off required before this ships). */
  --color-sidebar-bg:         #2B3238;
  --color-sidebar-hover:      #384148;
  --color-sidebar-text:       #D9E6E8;

  /* ---------- Color: status (FR-012 — retuned for AA on white) ---------- */
  /* Spec 058 / US5 / FR-009 — retuned from #168A4A. Tabler's --tblr-success-fg
     (every solid btn-success's label, unoverridden) resolves to --tblr-light
     (#F9FAFB, not pure white) — on #168A4A that measures only ~4.21:1 against the
     WCAG AA 4.5:1 floor, including "Revisar y enviar" on the ficha edit
     (company/objectives) screen the spec names, and 7 other solid btn-success
     screens sharing the same root cause (research.md D5's own ~4.40:1 figure used
     pure white as the reference text, which this codebase's actual button text
     is not — verified empirically against a live rendered button, see the BUTTON
     CONTRAST FIX block below for why a root-token retune alone doesn't even
     reach the button in the first place). #128245 measures ~4.67:1 against the
     real #F9FAFB text with a comfortable margin, while staying visually close to
     the original.
  */
  --color-success:            #128245;
  --color-success-subtle:     #DEF1E3;
  --color-warning:            #8C5A0B;
  --color-warning-subtle:     #FCEFD0;
  --color-danger:             #D92D20;
  --color-danger-subtle:      #F7DDDA;
  --color-info:               #1F5BA8;
  --color-info-subtle:        #DBE7F5;

  /* ---------- Color: structural ---------- */
  --color-border:             #DDE5E8;
  --color-focus-ring:         var(--color-primary);

  /* ---------- Spacing (T-shirt scale on 8 px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem; /* 4 px */
  --space-2:  0.5rem;  /* 8 px */
  --space-3:  0.75rem; /* 12 px */
  --space-4:  1rem;    /* 16 px */
  --space-5:  1.5rem;  /* 24 px */
  --space-6:  2rem;    /* 32 px */
  --space-7:  3rem;    /* 48 px */
  --space-8:  4rem;    /* 64 px */

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ---------- Shadows (FR-016) ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 16px 32px rgba(26, 26, 26, 0.08), 0 4px 8px rgba(26, 26, 26, 0.04);
  --shadow-glow-primary: 0 0 0 4px rgba(var(--color-primary-rgb), 0.18);

  /* ---------- Typography families (FR-013 — sans-only) ---------- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (FR-014 — display 700 / heading 600 to recover weight) ---------- */
  --type-display-xl-size:  3.5rem;   --type-display-xl-lh: 1.05;  --type-display-xl-weight: 700;
  --type-display-lg-size:  2.5rem;   --type-display-lg-lh: 1.10;  --type-display-lg-weight: 700;
  --type-display-1-weight: 700;
  --type-display-2-weight: 700;
  --type-display-3-weight: 700;
  --type-heading-lg-size:  1.75rem;  --type-heading-lg-lh: 1.20;  --type-heading-lg-weight: 600;
  --type-heading-md-size:  1.25rem;  --type-heading-md-lh: 1.30;  --type-heading-md-weight: 600;
  --type-heading-sm-size:  1rem;     --type-heading-sm-lh: 1.35;  --type-heading-sm-weight: 600;
  --type-heading-1-weight: 600;
  --type-heading-2-weight: 600;
  --type-heading-3-weight: 600;
  --type-heading-4-weight: 600;
  --type-body-size:        0.9375rem;--type-body-lh:       1.50;  --type-body-weight: 400;
  --type-body-emphasis-weight: 600;
  --type-meta-size:        0.8125rem;--type-meta-lh:       1.40;  --type-meta-weight: 500;
  --type-micro-size:       0.6875rem;--type-micro-lh:      1.30;  --type-micro-weight: 500;

  /* ---------- Motion durations (FR-017 — preserved verbatim from spec 011) ---------- */
  --motion-instant:     50ms;
  --motion-fast:        150ms;
  --motion-base:        250ms;
  --motion-slow:        400ms;
  --motion-celebratory: 700ms;
  --motion-opacity-exempt: 150ms; /* preserved under reduced-motion */

  /* ---------- Easings (preserved verbatim from spec 011) ---------- */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1050;
  --z-toast:   1100;
}

/* ============================================================
   TABLER BRIDGE (FR-015)
   Override the high-traffic --tblr-* tokens so every Tabler component
   inherits the Programa Semilla palette. Tokens.css must load BEFORE
   tabler.min.css for these to take effect.
   ============================================================ */

:root {
  --tblr-primary:        var(--color-primary);
  /* BUG-PSB-003 (#276) — kept in sync with --color-primary-rgb's retune above. */
  --tblr-primary-rgb:    0, 130, 150;
  --tblr-secondary:      var(--color-text-secondary);
  --tblr-success:        var(--color-success);
  --tblr-warning:        var(--color-warning);
  --tblr-danger:         var(--color-danger);
  --tblr-info:           var(--color-info);
  --tblr-body-bg:        var(--color-bg-page);
  --tblr-body-color:     var(--color-text-primary);
  --tblr-border-color:   var(--color-border);
  --tblr-card-bg:        var(--color-bg-surface);
  --tblr-link-color:     var(--color-primary-strong);
}

/* ============================================================
   BADGE CONTRAST FIX (solid secondary)
   Tabler defaults a badge's text colour to --tblr-secondary AND
   the solid `.bg-secondary` utility paints the background with
   --tblr-secondary — so a solid secondary badge draws its text
   the SAME colour as its background: an invisible label inside a
   gray pill (e.g. the quotation count on /Applications/{code}/Review).
   Restore a legible foreground for every solid secondary badge,
   matching Tabler's own `.text-bg-secondary`. The `-lt` tint
   variants already have contrast and are untouched.
   ============================================================ */
.badge.bg-secondary { --tblr-badge-color: #f9fafb; }

/* ============================================================
   BADGE CONTRAST FIX (solid success)
   Spec 058 / US4 / FR-007 — same defect class as the secondary fix above: Tabler
   defaults a badge's text colour to --tblr-secondary (gray) and `.bg-success` only
   sets the background, so the "Activo"/"Activa" badges (Admin/Users/{id}/Edit's
   objective row and company row) render gray-on-green today.

   CORRECTION (found during deep review — the original version of this comment
   assumed the badge's background was --color-success and reasoned from that;
   it is NOT): `.bg-success`'s background comes from Tabler's OWN single-class
   utility rules (`background-color: rgba(var(--tblr-success-rgb),...)` /
   `color-mix(in srgb, var(--tblr-success),...)`, both in tabler.min.css), which
   hit the EXACT SAME `:root` specificity tie the BUTTON CONTRAST FIX block below
   documents — this file's TABLER BRIDGE only re-declares `--tblr-success` on
   plain `:root`, loses the tie against Tabler's own later-loaded
   `:root,[data-bs-theme=light]{--tblr-success:#2fb344;...}`, and nothing here
   overrides `--tblr-success-rgb` at all. So the badge's REAL rendered background
   is Tabler's stock #2FB344, not this file's retuned --color-success (#128245) —
   confirmed by GreenButtonContrastTests-style live measurement during review.
   Black text clears 4.5:1 against the ACTUAL background either way (black vs
   #2FB344 ≈ 7.65:1; black vs #128245 would only be ≈4.30:1, i.e. it would FAIL
   if the badge really did inherit --color-success — the fix happens to be robust
   to which green is really underneath, but "clears the floor either way" was
   the wrong reason; "clears the floor against the green Tabler actually paints"
   is the right one). No badge-background fix is in scope here (FR-007 only
   requires the TEXT to be legible, and it is) — see the wider TABLER BRIDGE
   cascade gap noted in follow-ups for whether OTHER themed Tabler components
   are silently rendering stock Tabler colors the same way.
   ============================================================ */
.badge.bg-success { --tblr-badge-color: #000; }

/* ============================================================
   BUTTON CONTRAST FIX (solid success)
   Spec 058 / US5 / FR-009 — retuning --color-success above is NOT by itself enough
   for solid btn-success buttons ("Revisar y enviar" on the ficha edit screen, and 7
   other screens sharing the same class). The TABLER BRIDGE block re-declares
   `--tblr-success` on plain `:root` — the SAME specificity (a single pseudo-class)
   as Tabler's own `:root,[data-bs-theme=light]{--tblr-success:#2fb344;...}` default,
   and tabler.min.css loads AFTER tokens.css (required so the bridge applies to
   everything else), so on an EQUAL-specificity tie Tabler's later rule wins for this
   one property — verified empirically: a live "Revisar y enviar" button rendered
   Tabler's own #2fb344, not this file's --color-success, despite the retune above.
   `.btn.btn-success` (two classes) has higher specificity than either `:root`
   competitor, which is enough to win the property for every element that matches —
   the same technique the badge fix above already uses for the identical reason.
   `--tblr-btn-bg`/`--tblr-btn-disabled-bg` read `var(--tblr-success)` directly
   inside Tabler's own `.btn-success{}` rule (same element, so this override reaches
   them); the hover/active `--tblr-success-darken` derivative is computed once at
   `:root` and inherited as an already-resolved value, so it is NOT reachable this
   way and keeps Tabler's default — an accepted gap, since FR-009 only requires the
   resting/enabled state's text to be legible, not the hover state's.
   ============================================================ */
.btn.btn-success { --tblr-success: var(--color-success); }

/* ============================================================
   BUTTON ACCENT (solid primary) — spec 060 / US2 / FR-008/FR-010/FR-011
   Same specificity-tie mechanism as the BUTTON CONTRAST FIX above: the
   TABLER BRIDGE's plain-`:root` `--tblr-primary` redeclaration ties with
   Tabler's own later-loaded `:root,[data-bs-theme=light]` default, so a
   `.btn.btn-primary` (two classes) override is required to reliably reach
   the rendered button — proven live via FR-011 (T016/T017), not assumed
   from the declaration alone (research.md R7).

   Text color is the load-bearing half of this rule (research.md R6):
   Tabler's solid `.btn-primary` reads `--tblr-btn-color:
   var(--tblr-primary-fg, #ffffff)`, and Tabler's own `--tblr-primary-fg`
   resolves near-white. White text on the Alia gold fill measures ~1.58:1
   (FAILS AA); on orange, ~2.69:1 (FAILS). Every candidate in this accent
   family fails AA with white text, so `--tblr-primary-fg` is overridden to
   a dark token here too — matching the `.fl-badge[data-variant="accent"]`
   precedent (same "light accent fill needs dark text" shape). Dark text on
   gold measures ~9.34:1.

   SCOPE NOTE (deep-review finding, architecture): this selector matches only
   the SOLID `.btn-primary` shape. Tabler's outline/ghost primary variants
   (`.btn-outline-primary`, `.btn-ghost-primary`) read the same `--tblr-primary`
   bridge token but carry no `btn-primary` class token, so this override does
   NOT reach them — they render on the unretuned teal `--color-primary`
   (tokens.css `--tblr-primary`, plain-`:root` bridge). This is a DELIBERATE
   scope decision, not an oversight: FR-008 names "primary/brand buttons" for
   the solid-fill treatment this feature was scoped to verify live
   (FR-011/T016-T017); repainting outline/ghost variants too would need their
   own border+text contrast decision this feature never designed or verified.
   If a future pass wants outline/ghost primary buttons on the Alia palette
   too, add `.btn.btn-outline-primary, .btn.btn-ghost-primary { --tblr-primary:
   ...; }` here with its own contrast check — do not assume this block already
   covers them.
   ============================================================ */
.btn.btn-primary {
    --tblr-primary: var(--color-accent-alia-gold);
    --tblr-primary-fg: var(--color-text-primary);
}

/* ============================================================
   LINK CONTRAST FIX (btn-link)
   BUG-WMF-006 (#243) — a DIFFERENT mechanism than the specificity-tie fixes
   above: tabler.min.css's `.btn-link{color:...}` rule sets `color` directly
   to a LITERAL rgb() value (compiled from Bootstrap's own SCSS color-mix at
   build time), not `var(--tblr-link-color)` — so the TABLER BRIDGE's
   `--tblr-link-color: var(--color-primary-strong)` redeclaration above has no
   hook to intercept at ANY specificity, tied or not. This literal color
   (~rgb(7,124,234) on white) measures 4.13:1, below 4.5:1. A `.btn.btn-link`
   two-class override sets `color` directly, the same property Tabler's own
   rule sets, so it wins on specificity regardless of source order (mirrors
   the `.btn.btn-primary`/`.btn.btn-success` pattern above, but overriding
   `color` itself rather than a custom property, since there is no property
   to redeclare here). Affects "Recursos útiles" (applicant dashboard) and
   any other `.btn-link` usage platform-wide.
   ============================================================ */
.btn.btn-link {
  color: var(--color-primary-strong);
}

/* ============================================================
   BRAND ACTION (solid turquoise) — spec 076 / FR-005, FR-030
   The applicant's primary confirm/submit actions use the Programa Semilla turquoise,
   not green (`.btn-success`) and not the Alia gold `.btn-primary` above. Defined on
   Tabler's own --tblr-btn-* custom properties, which `.btn` reads directly, with the
   same two-class specificity as the fixes above so no `:root` tie can override it.
   ============================================================ */
.btn.btn-brand {
  --tblr-btn-color: var(--color-on-primary);
  --tblr-btn-bg: var(--color-primary);
  --tblr-btn-border-color: var(--color-primary);
  --tblr-btn-hover-color: var(--color-on-primary);
  --tblr-btn-hover-bg: var(--color-primary-strong);
  --tblr-btn-hover-border-color: var(--color-primary-strong);
  --tblr-btn-active-color: var(--color-on-primary);
  --tblr-btn-active-bg: var(--color-primary-strong);
  --tblr-btn-active-border-color: var(--color-primary-strong);
  --tblr-btn-disabled-color: var(--color-on-primary);
  --tblr-btn-disabled-bg: var(--color-primary);
  --tblr-btn-disabled-border-color: var(--color-primary);
}

/* ============================================================
   GLOBAL TYPE BASELINE
   ============================================================ */

html { background: var(--color-bg-page); }

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}

h1, h2, h3, .display-heading {
  font-family: var(--font-display);
  color: var(--color-text-primary);
}

code, pre, .mono, [data-mono] {
  font-family: var(--font-mono);
}

/* ============================================================
   REDUCED-MOTION CONTRACT (FR-017 — preserved verbatim from spec 011)
   Clamps every duration token to 0; preserves opacity exemption at --motion-opacity-exempt.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant:     0ms;
    --motion-fast:        0ms;
    --motion-base:        0ms;
    --motion-slow:        0ms;
    --motion-celebratory: 0ms;
    --motion-opacity-exempt: 150ms;
  }
}

/* ============================================================
   PRINT STYLESHEET (research R13)
   Surfaces flagged with data-print-hide="sponsor-strip" suppress the strip
   on print (applicant detail, reviewer queue/detail). Auth surfaces and the
   bare _Layout default omit the attribute and so retain the strip in print.
   ============================================================ */

@media print {
  [data-print-hide="sponsor-strip"] {
    display: none !important;
  }
}

/* ============================================================
   FACELIFT-LOCAL UTILITY CLASSES
   These are CSS classes — partials never use inline style=.
   ============================================================ */

/* Fonts */
.fl-font-display { font-family: var(--font-display); }
.fl-font-body    { font-family: var(--font-body); }
.fl-font-mono    { font-family: var(--font-mono); }

/* Type ramp */
.fl-type-display-xl  { font-family: var(--font-display); font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); font-weight: var(--type-display-xl-weight); letter-spacing: -0.01em; }
.fl-type-display-lg  { font-family: var(--font-display); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); font-weight: var(--type-display-lg-weight); letter-spacing: -0.005em; }
.fl-type-heading-lg  { font-size: var(--type-heading-lg-size); line-height: var(--type-heading-lg-lh); font-weight: var(--type-heading-lg-weight); }
.fl-type-heading-md  { font-size: var(--type-heading-md-size); line-height: var(--type-heading-md-lh); font-weight: var(--type-heading-md-weight); }
.fl-type-heading-sm  { font-size: var(--type-heading-sm-size); line-height: var(--type-heading-sm-lh); font-weight: var(--type-heading-sm-weight); }
.fl-type-body        { font-size: var(--type-body-size);       line-height: var(--type-body-lh);       font-weight: var(--type-body-weight); }
.fl-type-meta        { font-size: var(--type-meta-size);       line-height: var(--type-meta-lh);       font-weight: var(--type-meta-weight); }
.fl-type-micro       { font-size: var(--type-micro-size);      line-height: var(--type-micro-lh);      font-weight: var(--type-micro-weight); }

/* Surfaces */
.fl-surface          { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.fl-surface-raised   { background: var(--color-bg-surface-raised); border-radius: var(--radius-lg); }
.fl-surface-shadow-sm { box-shadow: var(--shadow-sm); }
.fl-surface-shadow-md { box-shadow: var(--shadow-md); }

/* Brand colors as text */
.fl-text-primary     { color: var(--color-text-primary); }
.fl-text-secondary   { color: var(--color-text-secondary); }
.fl-text-muted       { color: var(--color-text-muted); }
.fl-text-brand       { color: var(--color-primary); }
.fl-text-accent      { color: var(--color-accent); }
.fl-text-success     { color: var(--color-success); }
.fl-text-warning     { color: var(--color-warning); }
.fl-text-danger      { color: var(--color-danger); }
.fl-text-info        { color: var(--color-info); }

/* BUG-BRA-001 (#335) / spec 037 FR-020 — the kebab menu's danger action
   ("Inhabilitar") must render red-outline, not plain red text. Scoped to
   .dropdown-item.text-danger specifically so every OTHER .text-danger usage
   in the app (validation messages, balance cells, required-field marks) is
   completely unaffected — those never carry the dropdown-item class. */
.dropdown-menu .dropdown-item.text-danger {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus-visible {
  background: var(--color-danger-subtle);
}

/* Backgrounds (subtle status fills) */
.fl-bg-primary-subtle  { background: var(--color-primary-subtle); color: var(--color-primary-strong); }
.fl-bg-accent-subtle   { background: var(--color-accent-subtle); color: var(--color-text-primary); }
.fl-bg-success-subtle  { background: var(--color-success-subtle); color: var(--color-success); }
.fl-bg-warning-subtle  { background: var(--color-warning-subtle); color: var(--color-warning); }
.fl-bg-danger-subtle   { background: var(--color-danger-subtle); color: var(--color-danger); }
.fl-bg-info-subtle     { background: var(--color-info-subtle); color: var(--color-info); }

/* Spacing helpers */
.fl-pad-2 { padding: var(--space-2); }
.fl-pad-3 { padding: var(--space-3); }
.fl-pad-4 { padding: var(--space-4); }
.fl-pad-5 { padding: var(--space-5); }
.fl-gap-2 { gap: var(--space-2); }
.fl-gap-3 { gap: var(--space-3); }
.fl-gap-4 { gap: var(--space-4); }

/* Status pill — token-driven enum-to-color mapping */
.fl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-meta-size);
  line-height: 1;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface-raised);
  color: var(--color-text-secondary);
}
.fl-status-pill[data-tone="primary"] { background: var(--color-primary-subtle); color: var(--color-primary-strong); }
.fl-status-pill[data-tone="success"] { background: var(--color-success-subtle); color: var(--color-success); }
.fl-status-pill[data-tone="warning"] { background: var(--color-warning-subtle); color: var(--color-warning); }
.fl-status-pill[data-tone="danger"]  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.fl-status-pill[data-tone="info"]    { background: var(--color-info-subtle);    color: var(--color-info); }
.fl-status-pill[data-tone="muted"]   { background: var(--color-bg-surface-raised); color: var(--color-text-muted); }
/* Yellow-accent pill — semibold dark text overlay; keeps NFR-003 AA via #1A1A1A on #F2C014 / #FBEBA6 */
.fl-status-pill[data-tone="accent"]  { background: var(--color-accent-subtle); color: var(--color-text-primary); }

/* KPI tile + ticker (FR-027 — admin dashboard glow retunes to teal) */
.fl-kpi-tile {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.fl-kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fl-kpi-label { color: var(--color-text-secondary); font-size: var(--type-meta-size); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.fl-kpi-value { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--color-text-primary); margin-top: var(--space-2); font-weight: 700; }
.fl-kpi-value[data-ticker-target] { font-variant-numeric: tabular-nums; }
.fl-kpi-tile[data-glow="primary"]:hover { box-shadow: var(--shadow-md), var(--shadow-glow-primary); }

/* Hero strip + welcome */
.fl-hero-strip {
  background: var(--color-bg-surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.fl-welcome-headline {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  font-weight: var(--type-display-lg-weight);
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
  margin: 0;
}
.fl-welcome-subhead { color: var(--color-text-secondary); margin-top: var(--space-2); }

/* Awaiting-action callout (FR-023 — left teal accent bar + soft tinted bg + dark text) */
.fl-awaiting {
  background: var(--color-accent-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--color-text-primary);
}
.fl-awaiting-msg { color: var(--color-text-primary); font-weight: 500; flex: 1 1 auto; }

/* Application card (FR-020 — 1px solid border, no rest shadow, hover --shadow-md) */
.fl-app-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: none;
  transition: box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.fl-app-card:hover, .fl-app-card:focus-within { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fl-app-card-title { font-family: var(--font-display); font-size: var(--type-heading-md-size); margin: 0 0 var(--space-2); font-weight: var(--type-heading-md-weight); }
.fl-app-card-meta  { color: var(--color-text-secondary); font-size: var(--type-meta-size); }
.fl-app-card-mono  { font-family: var(--font-mono); color: var(--color-text-secondary); }

/* Resources / trust strip */
.fl-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.fl-strip-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.fl-strip-card-title { font-family: var(--font-display); font-size: var(--type-heading-sm-size); margin: 0 0 var(--space-2); font-weight: var(--type-heading-sm-weight); }

/* Journey timeline */
.fl-journey { display: flex; flex-direction: column; gap: var(--space-3); }
.fl-journey-mainline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fl-journey-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--type-meta-size);
  color: var(--color-text-muted);
  background: var(--color-bg-surface-raised);
  transition: background var(--motion-base) var(--ease-spring),
              color var(--motion-base) var(--ease-spring),
              transform var(--motion-base) var(--ease-spring);
}
.fl-journey-node[data-state="completed"] { color: var(--color-primary-strong); background: var(--color-primary-subtle); }
.fl-journey-node[data-state="current"]   { color: #FFFFFF; background: var(--color-primary); box-shadow: var(--shadow-glow-primary); transform: scale(1.04); }
.fl-journey-node[data-state="pending"]   { color: var(--color-text-muted); background: var(--color-bg-surface-raised); opacity: 0.6; }
.fl-journey-connector { flex: 0 0 auto; width: 24px; height: 2px; background: var(--color-border); }
.fl-journey-mini { gap: var(--space-1); }
.fl-journey-mini .fl-journey-node { padding: var(--space-1); font-size: var(--type-micro-size); }
/* Spec 076 / FR-023 — the dashboard (Mini) timeline: larger icons with the stage name under each,
   and completed / current / pending visibly distinct, with the current stage the most prominent. */
.fl-journey-mini .fl-journey-mainline { align-items: flex-start; }
.fl-journey-mini .fl-journey-node {
  flex-direction: column;
  gap: var(--space-1);
  min-width: 4.5rem;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  text-align: center;
}
.fl-journey-mini .fl-journey-node i { font-size: var(--type-heading-md-size); }
.fl-journey-mini .fl-journey-node-label { font-size: var(--type-micro-size); line-height: var(--type-micro-lh); font-weight: var(--type-micro-weight); }
.fl-journey-mini .fl-journey-node[data-state="completed"] { border: 1px solid var(--color-primary-light); }
.fl-journey-mini .fl-journey-node[data-state="current"] { font-weight: var(--type-heading-sm-weight); transform: scale(1.1); }
.fl-journey-mini .fl-journey-node[data-state="current"] .fl-journey-node-label { font-weight: var(--type-heading-sm-weight); }
.fl-journey-mini .fl-journey-node[data-state="pending"] { border: 1px dashed var(--color-border); }
.fl-journey-mini .fl-journey-connector { margin-top: calc(var(--space-2) + var(--type-heading-md-size) / 2); width: 16px; }
.fl-journey-micro .fl-journey-node {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: var(--color-bg-surface-raised);
}
.fl-journey-micro .fl-journey-node[data-state="completed"] { background: var(--color-primary-subtle); }
.fl-journey-micro .fl-journey-node[data-state="current"]   { width: 12px; height: 12px; background: var(--color-primary); box-shadow: var(--shadow-glow-primary); transform: none; }
.fl-journey-micro .fl-journey-node[data-state="pending"]   { background: var(--color-border); opacity: 0.6; }
.fl-journey-branch { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-5); }
.fl-journey-branch[data-kind="sentback"] .fl-journey-node { background: var(--color-warning-subtle); color: var(--color-warning); }
.fl-journey-branch[data-kind="rejected"] .fl-journey-node { background: var(--color-danger-subtle);  color: var(--color-danger); }
.fl-journey-branch[data-kind="appeal"]   .fl-journey-node { background: var(--color-info-subtle);    color: var(--color-info); }

/* Event log highlight */
.is-highlighted {
  background: var(--color-accent-subtle);
  transition: background var(--motion-base) var(--ease-out);
}

/* BUG-ARA-001 (#201) — persistent (not a transient flash) marker on the
   applicant-response line item(s) still missing an accept/reject decision,
   so a blocked submit is visually explainable, not just a disabled button. */
.response-item--undecided {
  background: var(--color-warning-subtle);
  box-shadow: inset 3px 0 0 var(--color-warning);
}

/* Empty state (FR-026 — 9 illustrations re-stroked teal) */
.fl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
}
.fl-empty-illustration {
  opacity: 0;
  transform: translateY(8px);
  animation: fl-empty-enter var(--motion-base) var(--ease-out) forwards;
}
.fl-empty-illustration[data-size="sm"] { width: 120px; height: 120px; }
.fl-empty-illustration[data-size="md"] { width: 160px; height: 160px; }
.fl-empty-illustration[data-size="lg"] { width: 220px; height: 220px; }
.fl-empty-illustration[data-size="xl"] { width: 280px; height: 280px; }
@keyframes fl-empty-enter { to { opacity: 1; transform: translateY(0); } }

/* Filter chip — Reports tab pill chips active = teal bg + white text (US3) */
.fl-chip-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--type-meta-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.fl-chip:hover { background: var(--color-bg-surface-raised); color: var(--color-text-primary); }
.fl-chip[aria-pressed="true"] { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }

/* Reviewer queue row */
.fl-queue-row {
  transition: box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.fl-queue-row:hover { box-shadow: var(--shadow-md); cursor: pointer; }

/* Ceremony */
.fl-ceremony { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-7) var(--space-4); }
.fl-ceremony-seal { width: 200px; height: 200px; }
.fl-ceremony-seal[data-state="static"] { /* used under reduced-motion or bookmark re-visit */ }
.fl-ceremony-seal[data-state="animate"] {
  animation: fl-ceremony-draw var(--motion-celebratory) var(--ease-spring) both;
}
@keyframes fl-ceremony-draw {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.fl-ceremony-headline {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  font-weight: var(--type-display-xl-weight);
  text-align: center;
  letter-spacing: -0.015em;
}
.fl-ceremony-subhead { color: var(--color-text-secondary); text-align: center; max-width: 36rem; }
.fl-ceremony-summary {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-3);
  min-width: 18rem;
}
.fl-ceremony-amount {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--color-primary-strong);
}
.fl-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-toast);
}

/* Auth layout (FR-004 — Login/Register hero + sponsor strip in footer)
   Spec 021 stamp fix: removed `min-height: 100vh` to let the auth content
   drive shell height. With body=d-flex.flex-column, a 100vh shell pushed
   the sibling _SponsorStrip footer just past the viewport; once Playwright
   (or a real user) scrolled the submit button into view, the strip slid
   up and intercepted pointer events on the form's submit button. Letting
   content drive height keeps the strip strictly below the form. */
.fl-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-bg-page);
}
@media (max-width: 768px) {
  .fl-auth-shell { grid-template-columns: 1fr; }
}
.fl-auth-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-7) var(--space-5);
  background: var(--color-primary-subtle);
  text-align: center;
  gap: var(--space-4);
}
.fl-auth-hero-mark { width: 240px; height: 240px; max-width: 60vw; }
/* Spec 037 — official vertical logo (portrait disc+wordmark lockup). */
.fl-auth-hero-logo { width: 260px; max-width: 70vw; height: auto; }
@media (max-width: 480px) {
  .fl-auth-hero-mark { width: 96px; height: 96px; }
  .fl-auth-hero-logo { width: 168px; }
  .fl-auth-hero { padding: var(--space-5) var(--space-4); }
}
.fl-auth-hero-wordmark { width: 320px; max-width: 80vw; color: var(--color-primary-strong); }
.fl-auth-hero-tagline { color: var(--color-text-secondary); font-size: var(--type-heading-sm-size); max-width: 28rem; }
.fl-auth-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: var(--space-7) var(--space-5);
  background: var(--color-bg-surface);
}
.fl-auth-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
.fl-auth-headline {
  font-family: var(--font-display);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--type-heading-lg-weight);
  margin: 0 0 var(--space-4);
}

/* ============================================================
   COMPONENT VOCABULARY (FR-018..FR-026)
   ============================================================ */

/* Buttons (FR-018) */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body-size);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.fl-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fl-btn[data-variant="primary"] {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
.fl-btn[data-variant="primary"]:hover:not(:disabled),
.fl-btn[data-variant="primary"]:focus-visible {
  background: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}
.fl-btn[data-variant="secondary"] {
  background: transparent;
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
}
.fl-btn[data-variant="secondary"]:hover:not(:disabled),
.fl-btn[data-variant="secondary"]:focus-visible {
  background: var(--color-primary-subtle);
}
.fl-btn[data-variant="danger"] {
  background: var(--color-danger);
  color: #FFFFFF;
  border-color: var(--color-danger);
}
.fl-btn[data-variant="danger"]:hover:not(:disabled),
.fl-btn[data-variant="danger"]:focus-visible {
  background: #8E1F18;
  border-color: #8E1F18;
}
.fl-btn[data-size="sm"] {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--type-meta-size);
}

/* Tables (FR-019, FR-031 — density via data-density attribute) */
.fl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--type-body-size);
}
.fl-table thead th {
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 600;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
}
.fl-table tbody td {
  padding: var(--space-4);
  border: none;
  border-bottom: 1px solid var(--color-table-separator);
  color: var(--color-text-primary);
}
/* Spec 037 D3 — de-zebra: body rows stay white; light-teal hover carries row distinction. */
.fl-table tbody tr:hover td {
  background: var(--color-table-hover);
}
.fl-table[data-density="reviewer"] tbody td,
.fl-table[data-density="reviewer"] thead th {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.fl-table[data-density="applicant"] tbody td,
.fl-table[data-density="applicant"] thead th,
.fl-table:not([data-density]) tbody td,
.fl-table:not([data-density]) thead th {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.fl-table[data-density="reviewer"] thead th { padding-top: var(--space-3); padding-bottom: var(--space-3); }

/* Cards (FR-020) */
.fl-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: none;
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
.fl-card:hover, .fl-card:focus-within { box-shadow: var(--shadow-md); }

/* Badges (FR-021) */
.fl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--type-meta-size);
  font-weight: 600;
  background: var(--color-bg-surface-raised);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.fl-badge[data-variant="primary"] { background: var(--color-primary); color: #FFFFFF; }
.fl-badge[data-variant="accent"]  { background: var(--color-accent); color: var(--color-text-primary); }
.fl-badge[data-variant="success"] { background: var(--color-success); color: #FFFFFF; }
.fl-badge[data-variant="warning"] { background: var(--color-warning); color: #FFFFFF; }
.fl-badge[data-variant="danger"]  { background: var(--color-danger); color: #FFFFFF; }
.fl-badge[data-variant="info"]    { background: var(--color-info); color: #FFFFFF; }

/* Inputs (FR-022) */
.fl-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: 1.4;
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.fl-input:focus, .fl-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.20),
              0 0 0 2px var(--color-primary) inset;
}
.fl-input[aria-invalid="true"] { border-color: var(--color-danger); }
.fl-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(176, 39, 30, 0.18); }

/* Alerts (FR-023) */
.fl-alert {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-primary);
}
.fl-alert[data-variant="success"] { background: var(--color-success-subtle); border-left-color: var(--color-success); }
.fl-alert[data-variant="warning"] { background: var(--color-warning-subtle); border-left-color: var(--color-warning); }
.fl-alert[data-variant="danger"]  { background: var(--color-danger-subtle);  border-left-color: var(--color-danger); }
.fl-alert[data-variant="info"]    { background: var(--color-info-subtle);    border-left-color: var(--color-info); }

/* Modals (FR-024) */
.fl-modal {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 40px rgba(26, 26, 26, 0.10);
  overflow: hidden;
}
.fl-modal-header {
  background: var(--color-primary);
  color: #FFFFFF;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--type-heading-md-size);
  font-weight: var(--type-heading-md-weight);
}
.fl-modal-body { padding: var(--space-5); }
.fl-modal-footer { padding: var(--space-4) var(--space-5); background: var(--color-bg-surface-raised); display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Sidebar header (FR-025) */
.fl-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
}
.fl-sidebar-brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.fl-sidebar-brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-md-size);
  color: var(--color-primary-strong);
  white-space: nowrap;
}

/* Sponsor strip (FR-003; spec 037 D7 — single official partner image + yellow top border) */
.fl-sponsor-strip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border-top: 3px solid var(--color-accent);
}
.fl-sponsor-image {
  max-width: 1100px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Section divider — yellow accent decorative-only */
.fl-divider-accent {
  border: none;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-5) 0;
  opacity: 0.65;
}

/* BUG-ADM-003 (#228) — FR-025/AS4 admin-area invariant: no inline style= attributes.
   Bounded-height scrollable option lists (e.g. the group-selector drilldown) reuse
   this utility instead of a literal style="max-height: ...". */
.fl-options-scroll {
  max-height: 9rem;
}

/* Focus rings (a11y not suppressed under reduced-motion) */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  transition: outline-color var(--motion-instant) var(--ease-out);
}

/* Spec 076 / FR-031 — applicant home: the ALIA logo, prominent (≥ 96 px), and the welcome slot. */
.fl-applicant-home-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.fl-applicant-home-logo { width: 6rem; height: 6rem; object-fit: contain; }
.fl-applicant-welcome:empty { display: none; }