/* ==========================================================================
   Trade-Advise stylesheet — the Bootstrap replacement.

   This file exists so the site can stop loading Bootstrap from a CDN without
   rewriting ~350 class attributes across 30 views. It re-implements, under
   Bootstrap 5.3's own class and custom-property names, only the parts this
   codebase actually uses: the grid, a Reboot subset, and the seven components
   in the markup (card, list-group, btn, form controls, table, alert,
   pagination). Because the names survive, the ~68 places where a view tunes a
   component with `--bs-card-cap-padding-x`, `--bs-gutter-y`,
   `--bs-list-group-item-padding-y`, `--bs-alert-bg` or `--bs-btn-hover-bg`
   keep working untouched.

   Two consequences worth knowing before editing:

   1. Values are the real Bootstrap 5.3.3 ones, with the old inline "Bootstrap
      bridge" from layouts/app.blade.php folded in — so a card's cap padding is
      16px/12px here, not Bootstrap's 1rem/.5rem. Colours come from the design
      tokens below rather than from Bootstrap's greys.
   2. The utility set is use-driven, not complete. The grid and the spacing
      scale are whole (those are the ones you reach for without thinking), but
      display/flex/text utilities only exist in the variants the views use. If
      you write `d-lg-flex` or `text-end`, add the rule here first.

   Loaded before every page's own <style>, so page CSS still wins.
   ========================================================================== */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --bg:       #FFFFFF;
    --bg2:      #F8F9FA;
    --bg3:      #F1F5F9;
    --bd:       #E5E7EB;
    --tx:       #1F2937;
    /* Muted inks, darkened 2026-07-29: the old #9CA3AF measured 2.54:1 on white
       and 2.41:1 on --bg2, so every footer link, legal line and small caption on
       the site failed SC 1.4.3. --tx2 moved with it to keep the three levels
       ordered. Measured on #FFFFFF / #F8F9FA / #F1F5F9. */
    --tx2:      #5C636E;   /* 6.06 · 5.75 · 5.53 */
    --tx3:      #666D79;   /* 5.21 · 4.95 · 4.76 */
    --blue:     #1D4ED8;
    --blue-lt:  #DBEAFE;
    /* One blue cannot both carry white text and be readable as text on a tinted
       surface. In light mode all three roles are the same value; dark mode splits
       them. See the .dark-mode block. */
    --blue-ink:  var(--blue);
    --blue-fill: var(--blue);

    /* Every accent below is split the same three ways, because one hue cannot do
       all three jobs at AA:
         --x       decoration only — dots, sparkline bars, gradients, borders.
                   Never set `color` from it.
         --x-ink   text, on --bg / --bg2 / --bg3 and on the matching --x-lt tint.
         --x-fill  a surface with white text on it.
       Ratios are measured on #FFFFFF · #F8F9FA · the tint, and in .dark-mode on
       #0F172A · #1E293B · the tint. */
    --green:      #059669;
    --green-lt:   #D1FAE5;
    --green-ink:  #047857;   /* 5.48 · 5.20 · 4.84 */
    --green-fill: #047857;   /* white on it: 5.48 */
    --red:        #DC2626;
    --red-lt:     #FEE2E2;
    --red-ink:    #B91C1C;   /* 6.47 · 6.14 · 5.30 */
    --red-fill:   #B91C1C;   /* white on it: 6.47 */
    --amber:      #F59E0B;
    --amber-lt:   #FEF0DA;
    --amber-ink:  #96500A;   /* 6.09 · 5.78 · 5.42 — amber-700 (#B45309) reaches only
                                4.47 on the tint, which axe scores as a fail. */
    --amber-fill: #B45309;   /* white on it: 5.02 */
    --violet:     #8B5CF6;
    --violet-lt:  #EDE9FE;
    --violet-ink: #7C3AED;   /* 5.70 · 5.41 · 4.80 */
    --violet-fill:#7C3AED;   /* white on it: 5.70 */
    --orange:     #F97316;
    --orange-ink: #C2410C;   /* 5.18 · 4.91 */
    --code-ink:   #D63384;   /* Bootstrap's pink: 5.19 on --bg */
    /* Two more, for the coin monograms on /crypto, which are the coin's own hue. */
    --indigo-ink: #4F46E5;   /* 6.29 on --bg; #6366F1 is 4.47 and drops on the tint */
    --gold-ink:   #A16207;   /* 4.92 on --bg; #CA8A04 is 2.94 */
    --sh-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --sh-md:    0 4px 16px rgba(0,0,0,.10);
    --r:        10px;

    /* Vertical rhythm. One value for the space between two sections and one for
       the page header's own padding, which is symmetric — every page used to
       carry its own hand-typed 22/18, 24/20, 28/24 or 22/16, so no two pages
       breathed the same and none of them was even top-to-bottom.
       24px because it was already the commonest gap on the site (13 of 35).
       /broker is out of scope: the register runs its own --ta-sp-* scale. */
    --ta-sec-gap: 24px;
    --ta-hdr-pad: 24px;

    /* Kept under Bootstrap's names because the component rules below read them
       and a page override should still be able to reach them. */
    --bs-border-width: 1px;
    --bs-border-radius: var(--r);
    --bs-border-radius-sm: .25rem;
}
.dark-mode {
    color-scheme: dark;
    --bg:       #0F172A;
    --bg2:      #1E293B;
    --bg3:      #1E293B;
    --bd:       #334155;
    --tx:       #F1F5F9;
    --tx2:      #94A3B8;   /* 6.96 on --bg · 5.71 on --bg2 */
    /* #64748B measured 3.07:1 on --bg2 — the footer's own background. */
    --tx3:      #8494A8;   /* 5.77 · 4.72 */
    --blue:     #3B82F6;   /* as text: 4.85 on --bg, 3.98 on --bg2 */
    --blue-lt:  #1E3A5F;
    /* Text blue for tinted surfaces (--bg2, --blue-lt), where plain --blue drops
       to 3.13:1, and a darker fill blue that white text can sit on: white on
       #3B82F6 is only 3.68:1. */
    --blue-ink:  #93C5FD;  /* 6.38 on --blue-lt */
    --blue-fill: #1D4ED8;  /* white on it: 6.70 */
    /* The tints stay translucent so they read as a wash over whatever card they
       sit on; the -ink values are measured against them composited over --bg. */
    --green-lt:   rgba(5,150,105,.18);
    --green-ink:  #34D399;   /* 9.29 · 7.61 · 7.75 */
    --red-lt:     rgba(220,38,38,.18);
    --red-ink:    #F87171;   /* 6.45 · 5.29 · 5.73 */
    --amber-lt:   rgba(245,158,11,.15);
    --amber-ink:  #FBBF24;   /* 10.69 · 8.76 · 7.93 */
    --violet-lt:  #1E1F42;
    --violet-ink: #A78BFA;   /* 6.56 · 5.38 · 5.80 */
    --orange-ink: #FB923C;   /* 7.89 · 6.46 */
    --code-ink:   #F472B6;   /* #D63384 is 3.97 on --bg here */
    --indigo-ink: #818CF8;   /* 5.98 · 4.90 */
    --gold-ink:   #FACC15;   /* 11.66 · 9.55 */
    /* The fills keep their light-mode value: they are already dark enough for
       white text and going darker still would lose them against --bg. */
    --sh-sm:    0 1px 3px rgba(0,0,0,.35);
    --sh-md:    0 4px 16px rgba(0,0,0,.45);
}

/* ── Register token layer (--ta-*) ────────────────────────────────────────
   Single source of truth for the broker register (/broker, /broker/{slug}).
   Structure, scale, spacing and motion are **Shadcn** tokens: the zinc neutral
   ramp, one accent, `--radius` 0.5rem, hairline borders and a card surface that
   lifts off the page by one step. It replaced TypeUI Corporate, which was
   executed correctly and briefed wrongly — Corporate is square (every radius
   0px) and its ramp was warmed to a parchment here, so zero radius plus warm
   stock plus a double rule gave the visual grammar of a FILING. The register is
   a product surface, not a document, and this ramp is the difference.

   Five jurisdiction inks and three licence-status triples survive the change
   unaltered in hue: a reader who learned "teal = Seychelles" keeps it. They
   were re-measured against the new surfaces, not assumed — the zinc ramp is
   lighter in light mode and darker in dark mode than the warm one, so every
   ratio moved.

   Every ratio below is calculated, not eyeballed, and is quoted against
   surface / card / muted in that order. `muted` is the chip fill and the hover,
   which is where a token that only ever got checked against white quietly
   fails. Provenance: docs/design/tokens.md.

   Namespaced rather than folded into the tokens above because those are
   consumed by ~28 other views; nothing here changes a page that does not
   opt in. Sizes are rem so browser font-size preferences still apply.
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Surfaces. Shadcn's zinc ramp, unrotated — neutral grey is the correct
       temperature for a product surface, and it is what lets ONE accent and
       five jurisdiction hues read as meaning rather than as decoration on tinted
       stock. The page is one step down from the card, so a card lifts by
       luminance and a hairline instead of by a shadow. */
    --ta-surface:      #FAFAFA;   /* zinc-50  — the page */
    --ta-surface-2:    #FFFFFF;   /* white    — the card, sticky bars, form wells */
    --ta-surface-3:    #F4F4F5;   /* zinc-100 — chip fills, hover, muted blocks */
    --ta-surface-ink:  #18181B;   /* inverted blocks, the primary action */
    /* NEW: the plate a third-party logo is set on. Deliberately pure white and
       deliberately the SAME value in both themes — it is not a surface in the
       ramp, it is the stock a brand's own mark was drawn against. A dark
       favicon on the dark theme's own surface is invisible, so this one value
       cannot follow the theme. Marks drawn in white get --ta-plate-ink instead,
       decided per brand by brokers:normalise-logos.
       --ta-plate-ink is NOT --ta-surface-ink, and that distinction is the whole
       point: surface-ink is the *inverted* surface, so it is near-black in light
       and near-WHITE in dark. A wordmark drawn in white was therefore given a
       white plate in the dark theme — the exact failure the light-ink flag
       exists to prevent, and invisible in testing because the light theme
       looked right. A logo's own ink does not change when the reader changes
       theme, so neither of these two values may. */
    --ta-plate:        #FFFFFF;
    --ta-plate-ink:    #191510;

    /* Ink — 3 levels on the zinc axis. Quoted surface / card / muted. */
    --ta-ink:          #09090B;   /* headings, brand names, values — 19.06 / 19.90 / 18.10 */
    --ta-ink-2:        #3F3F46;   /* body prose — 10.01 / 10.44 / 9.50 */
    --ta-ink-3:        #696971;   /* labels, legal entity, meta — 5.21 / 5.44 / 4.95.
                                     FIXED from zinc-500 #71717A, which is 4.40:1
                                     on the muted fill and therefore fails 4.5:1
                                     inside a chip. It passes on white, which is
                                     exactly how a third-level ink gets shipped
                                     broken. */

    /* Rules — two weights plus a control boundary. Shadcn's --border is a single
       hairline; the register needs a second, quieter one because a card list
       still has internal separators. */
    --ta-rule:         #F0F0F1;   /* separator inside a card */
    --ta-rule-2:       #E4E4E7;   /* --border: the card edge, control edges */
    --ta-rule-strong:  #71717A;   /* 4.63 / 4.83 / 4.40 — input and control
                                     boundaries (SC 1.4.11), and the card hover
                                     edge. #A1A1AA reads better but is 2.56:1
                                     off white, so a hover state drawn in it is
                                     not perceivable. */

    /* Accent. Exactly one hue, spent only on links, the active control, the
       focus ring and the primary action. Everything else that carries colour on
       this page carries MEANING (jurisdiction, licence state), and that only
       works if the accent stays this disciplined. */
    --ta-brand:        #2563EB;   /* 4.95 / 5.17 / 4.70 */
    --ta-brand-strong: #1D4ED8;   /* hover / active */
    --ta-brand-soft:   #EFF6FF;   /* chip fill under an active control, never
                                     text: 1.09:1 off the card, and ink-3 still
                                     reads 5.00:1 on it. */
    --ta-brand-on:     #FFFFFF;   /* label on an accent fill, 5.17:1 */

    /* Jurisdiction inks. One hue per register, so a reader scanning 552 rows
       can see at a glance that a page is mostly Seychelles, and the facet pill
       and the citation line agree without reading a word. Set on the register's
       NAME only — never on a row background, which would stripe the table.
       All five clear 4.5:1 on all three surfaces (worst: FSA at 4.66 on the row
       hover). Hues collide with the status green and amber by design: status is
       a glyphed pill in its own column, an ink is an inline word in the
       citation, and the two never touch. */
    --ta-jur-cysec:    #3730A3;   /* indigo  — 9.68 / 8.90 / 7.92 */
    --ta-jur-fsa:      #0E6B64;   /* teal    — 6.19 / 5.69 / 5.06. FIXED from
                                     #0F766E, which is 4.36:1 on the warm row
                                     hover: the warm surface-3 is darker than
                                     the cool one it replaced, and teal is the
                                     lightest of the five inks, so it was the
                                     one the change broke. */
    --ta-jur-fca:      #9F1239;   /* crimson — 7.81 / 7.18 / 6.39 */
    --ta-jur-fsca:     #A21CAF;   /* fuchsia — 6.16 / 5.66 / 5.04. FIXED from
                                     violet #7E22CE, which is 35° from the
                                     CySEC indigo: the two are adjacent facet
                                     chips and appear in the same citation
                                     lines, and at those depths 35° does not
                                     separate. Spacing is now 38° bronze, 175°
                                     teal, 224° accent, 244° indigo, 296°
                                     fuchsia, 344° crimson. */
    --ta-jur-jse:      #854D0E;   /* bronze  — 6.68 / 6.14 / 5.46 */

    /* Licence status. Three states, and the signal is the GLYPH: filled disc /
       half disc / hollow ring, plus the word. Colour is the third channel, so
       the set still reads under any dichromacy. Withdrawn is deliberately not
       red — an expired licence is an absence, not an error, and red stays free
       for a real warning.
       Each state now also carries a hairline in its own ink, held at ≥3:1 off
       the page surface (SC 1.4.11), which is what makes the pill read as a
       stamped verdict rather than as a faint wash. */
    --ta-st-force:     #166534;   /* In force    ●  6.49:1 on its tint */
    --ta-st-force-bg:  #DCFCE7;   /* de-warmed with the rest of the ramp: three
                                     cool pills on cream read as stickers, three
                                     cool pills on zinc read as state */
    --ta-st-force-bd:  #16A34A;   /* 3.30:1 off the card, 3.16:1 off the page */
    --ta-st-wind:      #92400E;   /* Surrendering ◐  6.37:1 on its tint */
    --ta-st-wind-bg:   #FEF3C7;
    --ta-st-wind-bd:   #D97706;   /* 3.19 / 3.05 */
    --ta-st-gone:      #52525B;   /* Withdrawn   ○  7.03:1 on its tint */
    --ta-st-gone-bg:   #F4F4F5;
    --ta-st-gone-bd:   #71717A;   /* the neutral rule ink: no colour is the
                                     point of this state. 4.83 / 4.63 */

    /* Type. ONE family: Inter.
       This replaced Poppins (display/body) + Space Grotesk (data). The old pair
       existed to solve a real problem — Poppins ships no `tnum` and its digit
       advances vary by 1.83x, so a column of 552 licence numbers could not align
       in it, and Space Grotesk was brought in as a proportional face that does
       carry `tnum`. Inter carries `tnum` too, so one family now covers both
       roles and the two extra families were removed from the layout's Google
       Fonts request entirely. Inter was ALREADY in that request for the rest of
       the site, so this is a net reduction of two families, not a swap.

       Both custom properties are kept, and --ta-data still resolves separately,
       because the DATA ROLE is real even when the face is shared: labels, dates,
       codes and licence references want tabular figures and a slightly tighter
       tracking, and keeping the name means a future change can re-introduce a
       second face without touching 70-odd call sites.

       `.ledger` and `.dossier` each set `font-variant-numeric: tabular-nums` on
       the root and it inherits, so figures align down every column without the
       feature being repeated per rule.

       There is deliberately no --ta-serif. Eight rules on the broker profile
       once referenced one, it was never defined anywhere, and the page was
       paying for an Instrument Serif + DM Mono request that rendered nothing. */
    --ta-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ta-data:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Scale. Authored here; these are the only sizes the register uses. Inter
       sets ~10% narrower than Poppins did, so the support roles moved up a step
       where they were previously compensating for width. */
    --ta-fs-micro:   0.6875rem;  /* 11px — the few genuinely micro labels left */
    --ta-fs-data:    0.8125rem;  /* 13px — codes, dates, meta line, chip text */
    --ta-fs-support: 0.875rem;   /* 14px — support text floor, legal entity */
    --ta-fs-body:    0.9375rem;  /* 15px — body, controls, values */
    --ta-fs-lead:    1.0625rem;  /* 17px — standfirst */
    --ta-fs-card:    1.125rem;   /* 18px — entity name on a register card. The
                                    one-second anchor, and the only large type
                                    inside a card. */
    --ta-fs-sub:     1.125rem;   /* 18px — h3 */
    --ta-fs-sect:    1.375rem;   /* 22px — h2 section opener */
    --ta-fs-display: 2rem;       /* 32px — the page h1 */

    --ta-lh-display: 1.15;
    --ta-lh-comp:    1.3;
    --ta-lh-body:    1.6;
    --ta-ls-tight:  -0.02em;     /* display + section headings */
    --ta-ls-caps:    0.04em;     /* the few uppercase labels that remain */
    --ta-ls-data:    0;          /* Inter needs no tracking correction at 13px,
                                    where Space Grotesk wanted +0.01em */

    --ta-fw-normal:   400;
    --ta-fw-medium:   500;
    --ta-fw-semibold: 600;

    /* Spacing — Corporate's gap + section scale on a 4pt grid. */
    --ta-sp-1:  0.25rem;  --ta-sp-2:  0.5rem;   --ta-sp-3:  0.75rem;
    --ta-sp-4:  1rem;     --ta-sp-5:  1.25rem;  --ta-sp-6:  1.5rem;
    --ta-sp-8:  2rem;     --ta-sp-10: 2.5rem;   --ta-sp-12: 3rem;
    --ta-sp-16: 4rem;     --ta-sp-20: 5rem;     --ta-sp-24: 6rem;

    /* Structure. Shadcn's --radius is 0.5rem and everything else derives from
       it. This is the single most visible break from Corporate, which was square
       at 0px — and squareness was most of what made the register read as a
       filing rather than as a product. */
    /* The register's shell, set to the site header's own: .container-xxl above
       is 1440px wide with half of its 3.5rem gutter either side, so a page
       using this pair lines its masthead, controls and list up with the top
       menu instead of sitting in a narrower column of its own. The gutter
       steps down with that container's, at the same breakpoint. */
    --ta-container:     1440px;
    --ta-container-pad: 1.75rem;
    --ta-measure:   65ch;    /* 45–75 character body measure */
    --ta-radius:      0.5rem;   /* 8px  — cards, buttons, inputs */
    --ta-radius-sm:   0.375rem; /* 6px  — chips, badges, the logo plate */
    --ta-radius-round: 9999px;  /* status glyphs and pills only */
    --ta-elevation: none;    /* a card lifts by luminance + hairline, never by a
                                shadow: 24 shadowed cards is a texture, not a list */
    --ta-elevation-overlay: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.04);
    --ta-control-h: 2.75rem; /* 44px — also the touch-target floor */

    /* Card measures. 92px is the three-line desktop entry; the logo plate is
       44px so a wordmark can never push the name column. */
    --ta-card-h:     5.75rem;
    --ta-plate-size: 2.75rem;

    /* Focus. Solid and offset, so it survives on every surface. The accent
       rather than the ink, because a near-black ring on near-black type is
       only visible by its offset. */
    --ta-focus:        #1E40AF;   /* 8.51:1 on surface, 8.06:1 on surface-2 */
    --ta-focus-width:  2px;
    --ta-focus-offset: 2px;

    /* Motion — state transitions only, inside the 120–180ms band. */
    --ta-motion:      150ms;     /* cp --default-transition-duration */
    --ta-motion-ease: cubic-bezier(.4, 0, .2, 1);  /* cp --ease-in-out */
}
/* Redefining the token rather than overriding padding on each wrap: a media
   rule here cannot be outranked by a later declaration further down a page
   stylesheet, so both register views follow the header's phone gutter without
   either of them having to restate the value. */
@media (max-width: 767px) {
    :root { --ta-container-pad: 1rem; }
}
.dark-mode {
    /* Shadcn's dark ramp, re-homed onto this site's `.dark-mode` class (Shadcn
       ships `.dark`, and Tailwind's default is a media query; neither matches
       how ta.css switches) and rotated off neutral zinc onto the SLATE NAVY the
       rest of the site already uses in the dark theme.

       The zinc ramp was a deliberate seam: the shared chrome (header, ticker,
       footer) is navy — ta.css gives the dark BODY #0F172A a few hundred lines
       above — so the register painted its own colder surface and the header sat
       on top of a different temperature. Read on a real page that seam is just a
       colour mismatch, and one page looking foreign is a worse trade than a
       slightly warmer base, so the ramp now takes the site's own surfaces:
       --ta-surface IS --bg and --ta-surface-2 IS --bg2. The register still owns
       its own tokens — only the values moved, nothing here changes another page.

       Every ratio below was RE-MEASURED against these surfaces, not carried over:
       the navy card #1E293B is lighter than zinc-900, so every figure moved and
       three tokens had to be lifted to keep passing. Quoted page / card / muted. */
    --ta-surface:      #0F172A;   /* the page — the site's own --bg */
    --ta-surface-2:    #1E293B;   /* the card, sticky bars, wells — --bg2 */
    --ta-surface-3:    #29374F;   /* chip fills, hover, muted blocks. One step
                                     above the card (1.22:1), which is the same
                                     lift zinc-800 had over zinc-900. */
    --ta-surface-ink:  #F1F5F9;
    /* --ta-plate and --ta-plate-ink are deliberately NOT overridden here: a
       third-party logo's own ink does not follow the reader's theme. See :root. */

    --ta-ink:          #F1F5F9;   /* 16.26 / 13.36 / 10.93 — the site's --tx */
    --ta-ink-2:        #CBD5E1;   /* 12.00 /  9.86 /  8.07 */
    --ta-ink-3:        #94A3B8;   /*  6.95 /  5.71 /  4.67 — the site's --tx2.
                                     Slate-400 is the floor here: #8494A8 clears
                                     the page and the card but lands under 4.5:1
                                     on the muted fill, i.e. inside a chip. */

    --ta-rule:         #26324A;   /* separator inside a card */
    --ta-rule-2:       #334155;   /* --border: the card edge, control edges.
                                     The site's own --bd, so a register card and
                                     a card anywhere else share one hairline. */
    --ta-rule-strong:  #6B7B93;   /* 4.14:1 off the page, 3.40:1 off the card —
                                     control boundaries and the card hover edge
                                     (SC 1.4.11). Lifted from the zinc #6B6B74,
                                     which is only 2.77:1 on this lighter card. */

    --ta-brand:        #60A5FA;   /* 7.01 / 5.76 / 4.53. Unchanged: blue-400 was
                                     already the accent and still clears 4.5:1
                                     on all three navy surfaces. */
    --ta-brand-strong: #93C5FD;   /* hover / active */
    --ta-brand-soft:   #17304F;   /* chip fill under an active control, never
                                     text: 1.13:1 off the card, and ink-3 still
                                     reads 5.21:1 on it. Deepened from #17233D,
                                     which is within a hair of the navy card and
                                     so left an active control unreadable as one. */
    --ta-brand-on:     #0F172A;   /* label on an accent fill, 7.01:1 */

    /* The same five jurisdictions, lifted rather than re-hued so a reader who
       learned "teal = Seychelles" in one theme keeps it in the other. All five
       clear 4.5:1 on all three dark surfaces by a wide margin (worst: CySEC at
       6.01 on the row hover). */
    --ta-jur-cysec:    #A5B4FC;   /* indigo  — 8.94 / 7.34 / 6.01 */
    --ta-jur-fsa:      #5EEAD4;   /* teal    — 12.04 /  9.89 /  8.09 */
    --ta-jur-fca:      #FDA4AF;   /* crimson —  9.41 /  7.73 /  6.33 */
    --ta-jur-fsca:     #F0ABFC;   /* fuchsia — 10.12 /  8.31 /  6.81 */
    --ta-jur-jse:      #FCD34D;   /* bronze  — 12.35 / 10.14 /  8.30 */

    --ta-st-force:     #4ADE80;   /* In force    ●  8.00:1 on its tint */
    --ta-st-force-bg:  #14321F;   /* the tints are the state's own hue at the
                                     ramp's depth, so they carry over unchanged */
    --ta-st-force-bd:  #2E8C4F;   /* 4.22:1 off the page, 3.47:1 off the card.
                                     Lifted from #2A7F47, which is 2.94:1 here. */
    --ta-st-wind:      #FBBF24;   /* Surrendering ◐  8.56:1 on its tint */
    --ta-st-wind-bg:   #37280A;
    --ta-st-wind-bd:   #9C6B0E;   /* 3.84 / 3.15 */
    --ta-st-gone:      #CBD5E1;   /* Withdrawn   ○  8.07:1 on its tint */
    --ta-st-gone-bg:   #29374F;   /* the muted fill: no colour is the point of
                                     this state, so it takes the neutral surface */
    --ta-st-gone-bd:   #64748B;   /* 3.74 / 3.07 — the neutral rule ink. FIXED
                                     from the zinc #71717A, which reads warm
                                     against a navy pill. */

    --ta-focus:        #60A5FA;   /* 7.01:1 on the page, 5.76:1 on the card */
    --ta-elevation-overlay: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.4);
}

/* ── Reboot ──────────────────────────────────────────────────────────────
   Only the elements that appear in the views. layouts/app.blade.php adds its
   own `* { margin: 0 }`, which nulls the margins below on every page that uses
   it; they are here for the four standalone heads (auth + admin login,
   admin dashboard) that have no reset of their own. */
*, ::before, ::after { box-sizing: border-box; }
body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tx);
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
hr { margin: 1rem 0; color: inherit; border: 0; border-top: var(--bs-border-width) solid; opacity: .25; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: inherit; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}
p { margin-top: 0; margin-bottom: 1rem; }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
blockquote, figure { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small, .small { font-size: .875em; }
sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
a { color: var(--blue); text-decoration: underline; }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }
code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
code { font-size: .875em; color: var(--code-ink); word-wrap: break-word; }
a > code { color: inherit; }
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
pre code { font-size: inherit; color: inherit; word-break: normal; }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
caption { padding-top: .5rem; padding-bottom: .5rem; color: var(--tx2); text-align: left; }
th { text-align: inherit; text-align: -webkit-match-parent; }
tbody, td, tfoot, th, thead, tr { border-color: inherit; border-style: solid; border-width: 0; }
label { display: inline-block; }
button { border-radius: 0; }
button:focus:not(:focus-visible) { outline: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
select { word-wrap: normal; }
select:disabled { opacity: 1; }
[role=button] { cursor: pointer; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
::-moz-focus-inner { padding: 0; border-style: none; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-inner-spin-button { height: auto; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
[hidden] { display: none !important; }

/* ── Container ───────────────────────────────────────────────────────────
   The site was designed to a single 1440px measure, so there are no stepped
   Bootstrap widths here. Gutter 3.5rem reproduces the original 28px side
   padding, 2rem the 16px one on phones. */
.container-xxl {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 1440px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
@media (max-width: 767px) {
    .container-xxl { --bs-gutter-x: 2rem; }
}

/* ── Grid ────────────────────────────────────────────────────────────────
   Bootstrap's negative-margin gutter model, kept whole, but the gutter is no
   longer per-view: every row on the site uses the one spacing value. 28 pages
   used to declare their own 12/14/16/18/20/22px pair here, which is why no two
   card grids breathed alike. Both axes are set, so a wrapped row spaces its
   lines exactly as far apart as its columns — gutter-y used to default to 0.
   Rows are margin-based (see .row > * below), so a column's own background is
   unaffected by this. /broker is untouched: it uses .dos-row / .ldg-row, not
   this grid, and register.css never sets --bs-gutter-*. */
.row {
    --bs-gutter-x: var(--ta-sec-gap);
    --bs-gutter-y: var(--ta-sec-gap);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}
.col { flex: 1 0 0; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }

@media (min-width: 576px) {
    .col-sm { flex: 1 0 0; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
    .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
    .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333333%; }
    .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}
@media (min-width: 768px) {
    .col-md { flex: 1 0 0; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
    .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
    .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; }
    .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}
@media (min-width: 992px) {
    .col-lg { flex: 1 0 0; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
    .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; }
    .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}
@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
    .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
    .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333%; }
    .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}
@media (min-width: 1400px) {
    .col-xxl { flex: 1 0 0; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
    .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; }
    .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; }
    .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.33333333%; }
    .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; }
    .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; }
    .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}

/* Gutter shorthands */
.g-0,  .gx-0 { --bs-gutter-x: 0; }
.g-0,  .gy-0 { --bs-gutter-y: 0; }
.g-1,  .gx-1 { --bs-gutter-x: .25rem; }
.g-1,  .gy-1 { --bs-gutter-y: .25rem; }
.g-2,  .gx-2 { --bs-gutter-x: .5rem; }
.g-2,  .gy-2 { --bs-gutter-y: .5rem; }
.g-3,  .gx-3 { --bs-gutter-x: 1rem; }
.g-3,  .gy-3 { --bs-gutter-y: 1rem; }
.g-4,  .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4,  .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5,  .gx-5 { --bs-gutter-x: 3rem; }
.g-5,  .gy-5 { --bs-gutter-y: 3rem; }

/* ── Card ────────────────────────────────────────────────────────────────
   No .card-body: this codebase pairs .card with .card-header and its own body
   class, so the --bs-card-spacer-* pair has no consumer and is left out. */
.card {
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bd);
    --bs-card-border-radius: var(--r);
    --bs-card-inner-border-radius: calc(var(--r) - var(--bs-border-width));
    --bs-card-cap-padding-y: 12px;
    --bs-card-cap-padding-x: 16px;
    --bs-card-cap-bg: var(--bg);
    --bs-card-bg: var(--bg);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--tx);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--sh-sm);
}
.card > hr { margin-right: 0; margin-left: 0; }
.card > .list-group { border-top: inherit; border-bottom: inherit; }
.card > .list-group:first-child { border-top-width: 0; border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); }
.card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: var(--bs-card-inner-border-radius); border-bottom-left-radius: var(--bs-card-inner-border-radius); }
.card > .card-header + .list-group { border-top: 0; }
.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child { border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }

/* ── List group ──────────────────────────────────────────────────────── */
.list-group {
    --bs-list-group-color: var(--tx);
    --bs-list-group-bg: var(--bg);
    --bs-list-group-border-color: var(--bd);
    --bs-list-group-border-width: var(--bs-border-width);
    --bs-list-group-border-radius: var(--r);
    --bs-list-group-item-padding-x: 18px;
    --bs-list-group-item-padding-y: 15px;
    --bs-list-group-action-color: var(--tx2);
    --bs-list-group-action-hover-color: var(--tx);
    --bs-list-group-action-hover-bg: var(--bg2);
    --bs-list-group-action-active-color: var(--tx);
    --bs-list-group-action-active-bg: var(--bg2);
    --bs-list-group-disabled-color: var(--tx3);
    --bs-list-group-disabled-bg: var(--bg);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--blue);
    --bs-list-group-active-border-color: var(--blue);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--bs-list-group-border-radius);
}
.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item + .list-group-item.active { margin-top: calc(-1 * var(--bs-list-group-border-width)); border-top-width: var(--bs-list-group-border-width); }
.list-group-item.active { z-index: 2; color: var(--bs-list-group-active-color); background-color: var(--bs-list-group-active-bg); border-color: var(--bs-list-group-active-border-color); }
.list-group-item.disabled, .list-group-item:disabled { color: var(--bs-list-group-disabled-color); pointer-events: none; background-color: var(--bs-list-group-disabled-bg); }
.list-group-item-action { width: 100%; color: var(--bs-list-group-action-color); text-align: inherit; }
.list-group-item-action:hover, .list-group-item-action:focus { z-index: 1; color: var(--bs-list-group-action-hover-color); text-decoration: none; background-color: var(--bs-list-group-action-hover-bg); }
.list-group-item-action:active { color: var(--bs-list-group-action-active-color); background-color: var(--bs-list-group-action-active-bg); }
.list-group-flush { border-radius: 0; }
.list-group-flush > .list-group-item { border-width: 0 0 var(--bs-list-group-border-width); }
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--tx);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-shadow-rgb: 29, 78, 216;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--bs-btn-bg);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.btn:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); }
.btn.active, .btn.show, .btn:first-child:active { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); }
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}
.btn-sm {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}
/* Anywhere below that white text sits on the accent, the surface is --blue-fill,
   not --blue: white on dark mode's #3B82F6 is 3.68:1. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue-fill);
    --bs-btn-border-color: var(--blue-fill);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1E40AF;
    --bs-btn-hover-border-color: #1E40AF;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1E40AF;
    --bs-btn-active-border-color: #1E40AF;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--blue-fill);
    --bs-btn-disabled-border-color: var(--blue-fill);
}
.btn-outline-primary {
    --bs-btn-color: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--blue-fill);
    --bs-btn-hover-border-color: var(--blue-fill);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue-fill);
    --bs-btn-active-border-color: var(--blue-fill);
    --bs-btn-disabled-color: var(--blue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--blue);
}
.btn-outline-secondary {
    --bs-btn-color: var(--tx2);
    --bs-btn-border-color: var(--bd);
    --bs-btn-hover-color: var(--blue);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue-fill);
    --bs-btn-active-border-color: var(--blue-fill);
    --bs-btn-disabled-color: var(--tx2);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bd);
}

/* ── Form controls ───────────────────────────────────────────────────── */
.form-label { margin-bottom: .5rem; }
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tx);
    appearance: none;
    background-color: var(--bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bd);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus { color: var(--tx); background-color: var(--bg); border-color: var(--blue); outline: 0; box-shadow: none; }
.form-control::placeholder { color: var(--tx3); opacity: 1; }
.form-control:disabled { background-color: var(--bg2); opacity: 1; }
textarea.form-control { min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)); }
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tx);
    appearance: none;
    background-color: var(--bg);
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bd);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Bootstrap swapped this chevron on [data-bs-theme=dark]; the site's own
   .dark-mode class now carries it. */
.dark-mode .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select:focus { color: var(--tx); background-color: var(--bg); border-color: var(--blue); outline: 0; box-shadow: none; }
.form-select-sm { padding-top: .25rem; padding-bottom: .25rem; padding-left: .5rem; font-size: .875rem; border-radius: var(--bs-border-radius-sm); }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem; }
.form-check .form-check-input { float: left; margin-left: -1.5em; }
.form-check-input {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    appearance: none;
    background-color: var(--bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--bd);
    print-color-adjust: exact;
}
.form-check-input[type=checkbox] { border-radius: .25em; }
.form-check-input[type=radio] { border-radius: 50%; }
.form-check-input:active { filter: brightness(90%); }
.form-check-input:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 .25rem var(--blue-lt); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:disabled { pointer-events: none; filter: none; opacity: .5; }
.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label { cursor: default; opacity: .5; }

/* ── Table ───────────────────────────────────────────────────────────────
   Cell padding stays Bootstrap's hardcoded .5rem: --bs-table-cell-padding-*
   does not exist in Bootstrap 5, and track-record.blade.php sets it, so
   honouring it here would silently change that page. */
.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--tx);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bd);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--tx);
    --bs-table-striped-bg: var(--bg2);
    --bs-table-active-color: var(--tx);
    --bs-table-active-bg: var(--bg2);
    --bs-table-hover-color: var(--tx);
    --bs-table-hover-bg: var(--bg2);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody { vertical-align: inherit; }
.table > thead { vertical-align: bottom; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg); }
.table-hover > tbody > tr:hover > * { --bs-table-color-state: var(--bs-table-hover-color); --bs-table-bg-state: var(--bs-table-hover-bg); }

/* ── Alert ───────────────────────────────────────────────────────────── */
.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border-radius: var(--bs-border-radius);
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-border-width) solid var(--bs-alert-border-color);
    border-radius: var(--bs-alert-border-radius);
}
.alert-success { --bs-alert-color: var(--green); --bs-alert-bg: var(--green-lt); --bs-alert-border-color: transparent; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination {
    --bs-pagination-padding-x: .75rem;
    --bs-pagination-padding-y: .375rem;
    --bs-pagination-font-size: 13px;
    --bs-pagination-color: var(--tx2);
    --bs-pagination-bg: var(--bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bd);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--blue);
    --bs-pagination-hover-bg: var(--bg2);
    --bs-pagination-hover-border-color: var(--bd);
    --bs-pagination-focus-color: var(--blue);
    --bs-pagination-focus-bg: var(--bg2);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--blue);
    --bs-pagination-active-border-color: var(--blue);
    --bs-pagination-disabled-color: var(--tx3);
    --bs-pagination-disabled-bg: var(--bg);
    --bs-pagination-disabled-border-color: var(--bd);
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.page-link:hover { z-index: 2; color: var(--bs-pagination-hover-color); background-color: var(--bs-pagination-hover-bg); border-color: var(--bs-pagination-hover-border-color); }
.page-link:focus { z-index: 3; color: var(--bs-pagination-focus-color); background-color: var(--bs-pagination-focus-bg); outline: 0; box-shadow: var(--bs-pagination-focus-box-shadow); }
.active > .page-link, .page-link.active { z-index: 3; color: var(--bs-pagination-active-color); background-color: var(--bs-pagination-active-bg); border-color: var(--bs-pagination-active-border-color); }
.disabled > .page-link, .page-link.disabled { color: var(--bs-pagination-disabled-color); pointer-events: none; background-color: var(--bs-pagination-disabled-bg); border-color: var(--bs-pagination-disabled-border-color); }
.page-item:not(:first-child) .page-link { margin-left: calc(var(--bs-pagination-border-width) * -1); }
.page-item:first-child .page-link { border-top-left-radius: var(--bs-pagination-border-radius); border-bottom-left-radius: var(--bs-pagination-border-radius); }
.page-item:last-child .page-link { border-top-right-radius: var(--bs-pagination-border-radius); border-bottom-right-radius: var(--bs-pagination-border-radius); }

/* ── Helpers ─────────────────────────────────────────────────────────── */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) { position: absolute !important; }

/* ── Utilities ───────────────────────────────────────────────────────────
   Spacing is the complete non-responsive scale (0 = 0, 1 = .25rem,
   2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem). Everything below it is only
   present in the variants the views use — add the rule before you use a new
   one, because a missing utility fails silently. */
.m-0 { margin: 0 !important; }
.m-1 { margin: .25rem !important; }
.m-2 { margin: .5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 { margin-right: .25rem !important; margin-left: .25rem !important; }
.mx-2 { margin-right: .5rem !important; margin-left: .5rem !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: .25rem !important; }
.pe-2 { padding-right: .5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.px-2 { padding-right: .5rem !important; padding-left: .5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }

.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
/* Breakpoint-scoped order, lg only. Used where a narrow summary rail is authored
   first so it leads on a phone, but has to sit to the right of the wide column
   once they are side by side — reordering the markup instead would silently
   demote that rail on mobile. */
@media (min-width: 992px) {
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
}

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-muted { color: var(--tx2) !important; }
.fw-normal { font-weight: 400 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.align-middle { vertical-align: middle !important; }
.overflow-hidden { overflow: hidden !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-flex { display: flex !important; }
    .flex-sm-fill { flex: 1 1 auto !important; }
    .align-items-sm-center { align-items: center !important; }
    .justify-content-sm-between { justify-content: space-between !important; }
}
@media (min-width: 768px) {
    .d-md-table-cell { display: table-cell !important; }
    .flex-md-row { flex-direction: row !important; }
    .align-items-md-center { align-items: center !important; }
    .align-items-md-end { align-items: flex-end !important; }
    .gap-md-0 { gap: 0 !important; }
}
@media (min-width: 992px) {
    .text-lg-end { text-align: right !important; }
}