/* ── Theme: dim text color ────────────────────────────────────────────────── */
/* In dark mode, Mantine's --mantine-color-dimmed is too dark against #1A1B1E.
   Override it to #C1C2C5 so c="dimmed" looks correct in both modes.
   Light mode inherits Mantine's default (~#868e96), which is readable on white. */
html[data-mantine-color-scheme="dark"] {
    --mantine-color-dimmed: #C1C2C5;
}

/* ── Light mode: yellow/gold text → dark ──────────────────────────────────── */
/* c="yellow" → style="--_text-color:var(--mantine-color-yellow-filled)"       */
/* c="#FFD700" → style="--_text-color:#FFD700"                                  */
/* Both are unreadable on white. Target Text/Title roots only (not badges).     */
body.site-light .mantine-Text-root[style*="FFD700"],
body.site-light .mantine-Text-root[style*="yellow"],
body.site-light .mantine-Title-root[style*="yellow"] {
    color: #1A1B1E !important;
}
/* Named class for one-off overrides (e.g. collapsible titles, sub-sections). */
body.site-light .stw-section-title {
    color: #1A1B1E !important;
}

/* ── Collapsible section hover ────────────────────────────────────────────── */

.stw-collapsible {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.stw-collapsible:hover {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 1px #FFD70044;
}

.stw-collapsible::after {
    content: "Click to expand";
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 100;
}

.stw-collapsible:hover::after {
    opacity: 1;
}

.stw-collapsible-inner {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.stw-collapsible-inner:hover {
    border-color: #C1C2C5 !important;
    box-shadow: 0 0 0 1px #C1C2C544;
}

.stw-collapsible-inner::after {
    content: "Click to expand";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 100;
}

.stw-collapsible-inner:hover::after {
    opacity: 1;
}

/* ── Select / Dropdown gold glow on focus ────────────────────────────────── */

.mantine-Select-input:focus,
.mantine-Select-input[aria-expanded="true"] {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 2px #FFD70044, 0 0 8px #FFD70033 !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Chip filter pills: make them obviously clickable ─────────────────────── */
/* Site-wide. Raw Mantine chips look like flat text and users miss that they're
   selectable filters. Give every chip a visible button outline, a gold hover,
   and an unmistakable filled-gold "selected" state. Applies in both themes. */
.mantine-Chip-label {
    cursor: pointer;
    font-weight: 600 !important;
    border: 1px solid #5c5f66 !important;
    background-color: rgba(255, 215, 0, 0.07) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease, transform 0.1s ease;
}

.mantine-Chip-label:hover {
    border-color: #FFD700 !important;
    background-color: rgba(255, 215, 0, 0.16) !important;
    box-shadow: 0 0 0 2px #FFD70033;
    transform: translateY(-1px);
}

/* Selected — solid gold, dark text: impossible to miss which are active. */
.mantine-Chip-label[data-checked] {
    background-color: #FFD700 !important;
    border-color: #FFD700 !important;
    color: #1A1B1E !important;
    box-shadow: 0 0 8px #FFD70055;
}

.mantine-Chip-label[data-checked]:hover {
    background-color: #ffdf33 !important;
}

/* Light mode: unselected pills are NEUTRAL grey (not gold-tinted) so the solid
   gold selected state is unmistakable on white. */
body.site-light .mantine-Chip-label {
    border-color: #adb5bd !important;
    background-color: #f1f3f5 !important;
    color: #1A1B1E !important;
}

body.site-light .mantine-Chip-label:hover {
    border-color: #d4a800 !important;
    background-color: #fff6cc !important;
}

/* Light-mode selected — higher specificity than the rule above (which would
   otherwise win and hide the gold). Solid gold + dark-gold ring = obvious. */
body.site-light .mantine-Chip-label[data-checked] {
    background-color: #FFD700 !important;
    border-color: #b8860b !important;
    color: #1A1B1E !important;
    box-shadow: 0 0 0 2px #b8860b66;
}

/* ── Range Slider ─────────────────────────────────────────────────────────── */

/* Selected range — RangeSlider uses .rc-slider-track-1, .rc-slider-track-2 etc */
.rc-slider-track,
.rc-slider-track-1,
.rc-slider-track-2 {
    background-color: #FFD700 !important;
    height: 6px !important;
}

/* Handles */
.rc-slider-handle,
.rc-slider-handle-1,
.rc-slider-handle-2 {
    border-color: #FFD700 !important;
    background-color: #FFD700 !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -5px !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle-dragging,
.rc-slider-handle-1:hover,
.rc-slider-handle-2:hover {
    border-color: #fff !important;
    box-shadow: 0 0 8px #FFD700 !important;
}

/* Tooltip bubble showing the year numbers */
.rc-slider-tooltip-inner,
.rc-tooltip-inner {
    background-color: #FFD700 !important;
    color: #1A1B1E !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    box-shadow: none !important;
}

.rc-slider-tooltip-arrow,
.rc-tooltip-arrow {
    border-top-color: #FFD700 !important;
    border-bottom-color: #FFD700 !important;
}

.rc-slider-tooltip,
.rc-tooltip {
    opacity: 1 !important;
}

/* ── Hover tooltips (dmc.Tooltip) — site-wide ────────────────────────────────
   Mantine renders a tooltip as ONE non-wrapping line. Any label longer than
   the bubble spills straight out of its own background: on a light page the
   overflow is dark text on white with nothing behind it (invisible), on a dark
   page it is light text floating over the card (readable, barely). Setting
   `w=` on the component sized the box but did NOT make the text wrap, which is
   what made it look like the background was "cut off".

   Fix it once, here, so every tooltip on the site behaves like a Plotly hover
   box: wrap, cap the width, stay inside the viewport on a phone. */
.mantine-Tooltip-tooltip {
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: min(340px, calc(100vw - 32px));
    line-height: 1.45;
    text-align: left;
    padding: 8px 11px !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Neutral tooltips (`className="fdt-tip"`) flip with the theme exactly like
   `_chart_colors()` does for Plotly hoverlabels: white-on-dark in dark mode,
   dark-on-white in light. Source badges keep their green/orange fills — that
   colour is the gov / non-gov signal and must not be overridden. */
.mantine-Tooltip-tooltip.fdt-tip {
    background-color: #202226 !important;
    color: #f1f3f5 !important;
    border: 1px solid var(--fdt-border-default, #495057);
}

body.site-light .mantine-Tooltip-tooltip.fdt-tip {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #ced4da;
}

/* The arrow is a separate square; without this it keeps Mantine's own colour
   and reads as a floating dot beside a differently-coloured bubble. */
.mantine-Tooltip-tooltip.fdt-tip .mantine-Tooltip-arrow {
    background-color: inherit !important;
    border-color: inherit;
}

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — May 2026
   ════════════════════════════════════════════════════════════════════════════
   Centralizes the palette + interaction patterns for the site. Every NEW page
   should use these tokens / classes; existing pages migrate piece-by-piece.

   PALETTE (use these via CSS vars where possible; Python charts use the same
   hex values via _chart_colors() helpers):

     --fdt-bg-page         page background       dark #1A1B1E   light #ffffff
     --fdt-bg-card         card background       dark gradients light #f8f9fa
     --fdt-text-primary    main text             dark #ffffff   light #111827
     --fdt-text-secondary  secondary / dimmed    dark #C1C2C5   light #1f2937
     --fdt-text-muted      least emphasized      dark #868e96   light #4b5563
     --fdt-accent-gold     primary accent / CTA  both #FFD700   (text on gold = #111)
     --fdt-accent-amber    accent in light mode  light #b45309  (deeper for contrast)
     --fdt-blue            secondary accent      both #4dabf7
     --fdt-green-pos       positive / good       dark #69db7c   light #15803d
     --fdt-red-neg         negative / bad        dark #ef5350   light #b91c1c
     --fdt-border-default  subtle outline        dark #373A40   light #dee2e6
     --fdt-border-expand   expandable outline    dark #FFD700   light #b45309

   COMPONENT CLASSES:

     .expandable           outer expandable card — gold/amber border + cursor +
                           hover tooltip "Click to expand" (CSS-only, no JS)
     .expandable-inner     nested expandable — subtler grey→gold-on-hover border
     .stw-collapsible      legacy share-the-wealth class; behaves like .expandable
                           but kept for backwards compat (do NOT delete yet)

   When a new design pattern is needed (different border style, different hover
   behavior, etc.), discuss FIRST — don't add ad-hoc classes per page. The whole
   point of this section is to keep the visual language consistent.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --fdt-bg-page:         #1A1B1E;
    --fdt-bg-card:         #2C2E33;
    --fdt-text-primary:    #ffffff;
    --fdt-text-secondary:  #C1C2C5;
    --fdt-text-muted:      #868e96;
    --fdt-accent-gold:     #FFD700;
    --fdt-blue:            #4dabf7;
    --fdt-green-pos:       #69db7c;
    --fdt-red-neg:         #ef5350;
    --fdt-border-default:  #373A40;
    --fdt-border-expand:   #FFD700;

    /* Height of the mobile section-nav bar. One number, because three separate
       rules have to agree on it: the bar's own spacer, and any page that pins
       something else to the bottom edge and must sit ABOVE the bar rather than
       on top of it (see .som-wallets-bar). When they disagreed, the nav was
       still rendering — underneath the cart drawer, which reads as gone. */
    --fdt-bottom-nav-h: 72px;
}

body.site-light {
    --fdt-bg-page:         #ffffff;
    --fdt-bg-card:         #f8f9fa;
    --fdt-text-primary:    #111827;
    --fdt-text-secondary:  #1f2937;
    --fdt-text-muted:      #4b5563;
    --fdt-accent-gold:     #b45309;
    --fdt-blue:            #1971c2;
    --fdt-green-pos:       #15803d;
    --fdt-red-neg:         #b91c1c;
    --fdt-border-default:  #dee2e6;
    --fdt-border-expand:   #b45309;
}

/* ──── LIGHT-MODE TEXT READABILITY ──── */
/* Mantine's "dimmed" var defaults to a barely-visible grey on white in light
   mode. Override it so c="dimmed" stays readable. */
body.site-light {
    --mantine-color-dimmed: var(--fdt-text-secondary);
}

/* Belt-and-suspenders: directly target every element Mantine 2.x marks with
   data-c="dimmed" / "yellow" / "gray". The var override above SHOULD cover
   "dimmed" but Mantine sometimes ships color via inline styles that don't
   read the var; a direct rule with !important guarantees readability. */
body.site-light [data-c="dimmed"],
body.site-light .mantine-Text-root[data-c="dimmed"],
body.site-light .mantine-Anchor-root[data-c="dimmed"],
body.site-light .mantine-Title-root[data-c="dimmed"] {
    color: var(--fdt-text-secondary) !important;
}

body.site-light [data-c="yellow"],
body.site-light .mantine-Text-root[data-c="yellow"],
body.site-light .mantine-Anchor-root[data-c="yellow"] {
    color: var(--fdt-text-primary) !important;
}

/* Expander header titles (dmc.Text c="yellow" inside .expandable / .expandable-inner
   / .stw-collapsible) → solid black bold, matching the site Title standard. */
body.site-light .expandable .mantine-Text-root[data-c="yellow"],
body.site-light .expandable-inner .mantine-Text-root[data-c="yellow"],
body.site-light .stw-collapsible .mantine-Text-root[data-c="yellow"],
body.site-light .stw-collapsible-inner .mantine-Text-root[data-c="yellow"] {
    color: #000 !important;
    font-weight: 800 !important;
}

/* Company name headings on prison page — per-company hex colors (pale teal,
   light yellow, etc.) are unreadable on white. Force black bold to match the
   site Title standard. The left-border accent color still shows company identity.
   Must override --text-color too — Mantine 2.x sets color via that custom prop
   in its internal stylesheet, so a color-only rule loses to the inline style. */
body.site-light .prison-company-name {
    color: #000 !important;
    --text-color: #000 !important;
    font-weight: 800 !important;
}

/* Mantine "gray" text — used for source links, captions, footnotes. Same
   issue: pale grey on white in light mode. */
body.site-light .mantine-Text-root[data-c="gray"],
body.site-light .mantine-Anchor-root[data-c="gray"] {
    color: var(--fdt-text-secondary) !important;
}

/* Inline gold (#FFD700) text becomes invisible on white — Mantine 2.x emits
   c="#FFD700" as `--text-color: #FFD700` in the inline style. Force it dark
   in light mode. Same for pale grey (#C1C2C5). */
body.site-light [style*="--text-color: #FFD700"],
body.site-light [style*="--text-color:#FFD700"],
body.site-light [style*="--text-color: #ffd700"],
body.site-light [style*="--text-color:#ffd700"],
body.site-light [style*="--text-color: #C1C2C5"],
body.site-light [style*="--text-color:#C1C2C5"],
body.site-light [style*="--text-color: #c1c2c5"],
body.site-light [style*="--text-color:#c1c2c5"] {
    --text-color: var(--fdt-text-primary) !important;
    color: var(--fdt-text-primary) !important;
}

/* Catch-all for raw `color:` declarations (used by html.A, DashIconify, etc). */
body.site-light [style*="color: #FFD700"],
body.site-light [style*="color:#FFD700"],
body.site-light [style*="color: #ffd700"],
body.site-light [style*="color:#ffd700"],
body.site-light [style*="color: #C1C2C5"],
body.site-light [style*="color:#C1C2C5"],
body.site-light [style*="color: #c1c2c5"],
body.site-light [style*="color:#c1c2c5"] {
    color: var(--fdt-text-primary) !important;
}

/* SCORCHED-EARTH RULE: any element in light mode with a light/pale hex color
   anywhere in its inline style gets near-black text. No class restriction —
   the class-restricted rules above kept missing variants Mantine 2.x emits
   in different formats. This is the catch-all that actually lands.
   Covers: site gold (#FFD700), site grey (#C1C2C5), and every pale/pastel hex
   used across pages (company colors, card accents, educational callouts) that
   are readable on dark but invisible on white. */
body.site-light [style*="#C1C2C5"],
body.site-light [style*="#c1c2c5"],
body.site-light [style*="#FFD700"],
body.site-light [style*="#ffd700"],
body.site-light [style*="#ffe66d"],
body.site-light [style*="#FFE66D"],
body.site-light [style*="#a8dadc"],
body.site-light [style*="#A8DADC"],
body.site-light [style*="#c3b1e1"],
body.site-light [style*="#C3B1E1"],
body.site-light [style*="#4ecdc4"],
body.site-light [style*="#4ECDC4"],
body.site-light [style*="#69db7c"],
body.site-light [style*="#69DB7C"],
body.site-light [style*="#4dabf7"],
body.site-light [style*="#4DABF7"] {
    color: #111827 !important;
    --text-color: #111827 !important;
}

/* Titles → solid black, bolder. Keeps the hierarchy visible on a white page. */
body.site-light .mantine-Title-root,
body.site-light h1, body.site-light h2,
body.site-light h3, body.site-light h4 {
    color: #000 !important;
    font-weight: 800 !important;
}

/* Yellow badges/buttons keep their gold fill (good contrast on white) but
   force their TEXT to dark — the `light` and `outline` variants paint the
   text yellow which becomes unreadable. */
body.site-light .mantine-Badge-root[data-variant="light"][data-color="yellow"],
body.site-light .mantine-Badge-root[data-variant="outline"][data-color="yellow"],
body.site-light .mantine-Button-root[data-variant="light"][data-color="yellow"],
body.site-light .mantine-Button-root[data-variant="outline"][data-color="yellow"] {
    color: var(--fdt-text-primary) !important;
    border-color: var(--fdt-accent-gold) !important;
}

/* Header logo — keep it visible but professional in light mode. */
body.site-light #app-header .mantine-Text-root[data-c="yellow"] {
    color: #000 !important;
}

/* ──── EXPANDABLE COMPONENT ──── */

.expandable {
    cursor: pointer;
    border: 1.5px solid var(--fdt-border-expand) !important;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
    position: relative;
}

.expandable:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdt-border-expand) 25%, transparent) !important;
}

/* Hover tooltip — pure CSS, no JS. Pseudo-element rides above the card. */
.expandable::after {
    content: "Click to expand";
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 100;
}

.expandable:hover::after {
    opacity: 1;
}

/* ── .fdt-card — the same card, for things that DON'T expand ────────────────
   `.expandable` carries a "Click to expand" hover hint and a pointer cursor,
   which is correct on a Paper that opens and a lie on one that doesn't. Pages
   built on tabs or sidebar-nav (the archive, and anything migrated off the old
   pattern) were using .expandable purely for the gold border, so every card
   promised an expansion that never came. Same look, no promise. */
.fdt-card {
    border: 1.5px solid var(--fdt-border-expand) !important;
    transition: box-shadow 0.15s ease;
    position: relative;
}

.fdt-card:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdt-border-expand) 25%, transparent) !important;
}

/* Section headings inside a card get the same light-mode treatment as the
   ones inside an expandable — see the rule near the top of this file. */
body.site-light .fdt-card .mantine-Text-root[data-c="yellow"] {
    color: #8a6d00 !important;
}

/* ── .efile-send-drop — the attach-a-file box on the archive's send form ─────
   A drop target has to LOOK like one before anything is in it, or the reader
   reads it as a paragraph and never clicks. Dashed border, obvious hover, and
   a hit area big enough for a thumb. Both themes come from the palette vars so
   this is one rule, not two. */
.efile-send-drop {
    border: 2px dashed var(--fdt-border-expand);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.efile-send-drop:hover {
    border-color: var(--fdt-accent-gold);
    background-color: color-mix(in srgb, var(--fdt-accent-gold) 8%, transparent);
}

/* Inner / nested expandable — subtler so hierarchy reads clearly */
.expandable-inner {
    cursor: pointer;
    border: 1px solid var(--fdt-text-secondary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.expandable-inner:hover {
    border-color: var(--fdt-border-expand) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fdt-border-expand) 20%, transparent) !important;
}

.expandable-inner::after {
    content: "Click to expand";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 100;
}

.expandable-inner:hover::after {
    opacity: 1;
}

/* ──── WHAT-IF TOGGLE (home page inherited-pace switch) ──── */
/* Gold border + tinted bg + initial pulse so the toggle reads as an
   interactive call-to-action, not a default Paper. */
.what-if-toggle {
    border: 1.5px solid var(--fdt-accent-gold) !important;
    background: color-mix(in srgb, var(--fdt-accent-gold) 8%, var(--fdt-bg-card)) !important;
    transition: box-shadow 0.2s ease, transform 0.08s ease;
    animation: what-if-pulse 2.2s ease-in-out 2;
}

.what-if-toggle:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdt-accent-gold) 25%, transparent) !important;
}

@keyframes what-if-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fdt-accent-gold) 0%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fdt-accent-gold) 28%, transparent); }
}

/* ──── MANTINE ACCORDION HOVER TOOLTIP ──── */
/* Every dmc.AccordionControl gets the same "Click to expand" tooltip on hover.
   This applies site-wide to ANY accordion (Iran war, Could-have-funded, etc).
   No per-component class needed — Mantine accordions all use this root class. */

/* (Tooltip moved up to .mantine-Accordion-item — Mantine v7 reserves both
   ::before and ::after on .mantine-AccordionControl-root for its own focus
   ring + ripple, so pseudo-elements at that level got overridden.) */

/* Gold border + hover tooltip on every Mantine accordion item.
   We attach the tooltip to .mantine-Accordion-item rather than
   .mantine-AccordionControl-root because Mantine v7 internally uses
   ::after AND ::before on the control button (focus ring + ripple),
   which silently overrode our pseudo-element rules. The item is the
   outer wrapper card and Mantine doesn't touch its pseudo-elements.
   overflow: visible !important — Mantine sets overflow:hidden by
   default to clip the panel during expand/collapse animation; that
   ALSO clips our tooltip. Override; the animation still works. */
.mantine-Accordion-item {
    border: 1.5px solid var(--fdt-border-expand) !important;
    transition: box-shadow 0.15s ease;
    overflow: visible !important;
    position: relative;
}

.mantine-Accordion-item:hover {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fdt-border-expand) 25%, transparent) !important;
}

.mantine-Accordion-item::before {
    content: "Click to expand";
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 1000;
}

.mantine-Accordion-item:hover::before {
    opacity: 1;
}

/* When the item's control is open, swap to "Click to collapse". Uses
   :has() to detect aria-expanded="true" on a descendant control. */
.mantine-Accordion-item:has([aria-expanded="true"])::before {
    content: "Click to collapse";
}

/* ── Mobile responsive overrides ─────────────────────────────────────────── */

@media (max-width: 575px) {
    /* Tighter padding on all Papers/Cards on small screens */
    .mantine-Paper-root {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hero debt ticker — keep it readable at any size */
    #debt-live-display {
        font-size: clamp(1rem, 8vw, 2rem) !important;
        letter-spacing: -0.5px !important;
    }

    /* Year range slider marks: shrink text so they don't overlap */
    .mantine-Slider-markLabel,
    .mantine-RangeSlider-markLabel {
        font-size: 9px !important;
    }

    /* SegmentedControl: full width on mobile */
    .mantine-SegmentedControl-root {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tabs: allow wrapping on mobile (default) */
    .mantine-Tabs-list {
        flex-wrap: wrap !important;
    }

    /* Reduce hero title sizes on mobile */
    h1.mantine-Title-root {
        font-size: clamp(1.1rem, 5vw, 1.8rem) !important;
    }
    h2.mantine-Title-root {
        font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
    }
}

/* Louisiana main tab bar: always scroll horizontally, never wrap */
#la-main-tabs .mantine-Tabs-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#la-main-tabs .mantine-Tabs-list::-webkit-scrollbar {
    display: none;
}

/* ── Tax page: "you're here" bracket row highlight ────────────────────────── */
/* Dark mode (default): dark brown with gold outline + bright gold label.
   Light mode: pale yellow with darker gold outline + dark gold label so
   neither the cell text nor the indicator disappears on the highlight. */
.tax-bracket-row-current {
    background-color: #2a2200;
    outline: 1px solid #FFD700;
}
.tax-bracket-here-label {
    color: #FFD700;
}
body.site-light .tax-bracket-row-current {
    background-color: #fff8d4;
    outline: 1px solid #b8860b;
}
body.site-light .tax-bracket-here-label {
    color: #b8860b;
}
/* In light mode the "You Owe" cell still defaults to c="yellow"; force a
   darker gold so it reads against the pale-yellow highlighted row. */
body.site-light .tax-bracket-row-current .mantine-Text-root[data-c="yellow"] {
    color: #b8860b !important;
}

/* ── Oil page: sticky year-range filter bar ───────────────────────────────── */
/* Sticks just below the 60px AppShell header so it follows the user as they
   scroll through the long oil page. Background is set so chart cards
   underneath don't bleed through; z-index sits above expandable content but
   below modal-style overlays (Mantine modal default = 200). */
.oil-year-filter-bar {
    position: sticky;
    top: 60px;
    z-index: 50;
    background-color: var(--fdt-bg-card);
    backdrop-filter: blur(4px);
}
/* The AppShell header is taller from the md breakpoint up (it wraps the nav
   onto two lines there) — keep sticky bars clear of it. Must stay in sync with
   `header={"height": {...}}` in app.py. */
@media (min-width: 62em) {
    .oil-year-filter-bar {
        top: 104px;
    }
}
body.site-light .oil-year-filter-bar {
    background-color: rgba(255, 255, 255, 0.95);
}

/* ── Scale-of-Money tool: sticky three-wallet bar ─────────────────────────── */
/* The three fortunes (Million / Billion / Trillion) follow the user as they
   scroll the buy menu, so the reaction to every purchase stays in view.
   Sticky ONLY on desktop (>=768px) where the 3 cards sit side-by-side and the
   bar is short enough to fit under the 60px header. On mobile the cards stack
   into a tall column — keeping it sticky there would push the bottom rows
   (the per-second numbers) off-screen and clip them, so it scrolls normally. */
.som-wallets-bar {
    padding: 0.5rem 0.75rem;
    background-color: var(--fdt-bg-page);
    z-index: 100;
}
/* Mobile + tablet (<1024px): the wallets become a fixed bottom drawer.
   Collapsed = just the 🧾 cart total + Show/Hide stuck to the bottom edge;
   expanded = the wallet cards rise ABOVE the total (flex column-reverse pins
   the total to the bottom) and scroll internally if they outrun the screen. */
@media (max-width: 1023.98px) {
    .som-wallets-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92vh;
        border-top: 2px solid var(--fdt-border-expand, #FFD700);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
        /* Keep the pinned cart-total clear of the iOS home indicator / toolbar. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* The "🧾 Cart total" bar is the drawer's TITLE/header cap: it sits at the
       top of the panel, above the resizable content. When the drawer is
       collapsed it's the only thing showing, locked to the bottom of the
       screen. A divider + subtle weight make it read as a connected header. */
    .som-wallets-title {
        padding: 4px 2px 8px;
        border-bottom: 1px solid var(--fdt-border-default, #373A40);
    }
    /* Cap + scroll the content below the title. The cap is user-adjustable:
       dragging the grip sets --som-drawer-max (px) on the bar; default 40vh
       keeps the open drawer to roughly the bottom third so the page stays
       usable. The title bar stays visible above this scroll area. */
    #som-wallets-collapse {
        overflow-y: auto !important;
        max-height: var(--som-drawer-max, 40vh) !important;
        -webkit-overflow-scrolling: touch;
        /* Stop the drawer's scroll from chaining into the page behind it when
           it hits the top/bottom — otherwise both scroll together (annoying). */
        overscroll-behavior: contain;
    }
    /* Drag-to-resize grip — sticks to the top of the open drawer. */
    .som-drawer-handle {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        margin: -4px 0 2px;
        cursor: ns-resize;
        touch-action: none;
        background-color: var(--fdt-bg-page);
    }
    .som-drawer-grip {
        width: 44px;
        height: 5px;
        border-radius: 3px;
        background-color: var(--fdt-text-muted, #909296);
    }
    /* Clear the collapsed drawer so page content isn't hidden behind it. */
    .som-page {
        padding-bottom: 72px;
    }
}
/* Below `sm` the shared section-nav bar also pins itself to the bottom edge, so
   two fixed bars want the same 72px of screen. The nav keeps the floor and the
   cart drawer sits on top of it: the drawer is this page's centrepiece and grows
   upward from its own bottom, so lifting it costs nothing, while burying the
   section menu cost the reader every other view on the page.
   Only below `sm` (768px) — between 768 and 1024 the drawer is still fixed but
   the nav bar is not rendered, so there is nothing to clear. */
@media (max-width: 767.98px) {
    .som-wallets-bar {
        bottom: var(--fdt-bottom-nav-h);
        /* The nav bar is the thing touching the screen edge now, and it carries
           its own safe-area padding. Keeping it here too double-counts the iOS
           home indicator and leaves a dead gap inside the drawer. */
        padding-bottom: 0;
        /* Never taller than the room left above the nav bar. */
        max-height: calc(92vh - var(--fdt-bottom-nav-h));
    }
}
body.site-light .som-drawer-handle {
    background-color: rgba(255, 255, 255, 0.97);
}
/* Desktop (≥1024px): unchanged — top-sticky, expanded, no drag handle. */
@media (min-width: 1024px) {
    .som-wallets-bar {
        position: sticky;
        top: 60px;
        z-index: 50;
        backdrop-filter: blur(4px);
        border-bottom: 1px solid var(--fdt-border-default);
    }
    .som-drawer-handle {
        display: none;
    }
}
/* Charts that live inside a collapse need a reserved height so they don't
   render at 0px while closed. Responsive to match the figure's mobile height. */
.tax-collapse-graph {
    height: 380px;
}
@media (max-width: 575.98px) {
    .tax-collapse-graph {
        height: 260px;
    }
}
/* Tax page sidebar nav → compact horizontal scroll tab-bar on phones/tablets
   (desktop keeps the vertical sidebar). Saves ~350px of vertical space. */
@media (max-width: 767.98px) {
    .tax-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 8px !important;
        padding-bottom: 6px;
    }
    .tax-nav > * {
        flex: 0 0 auto;        /* don't let nav items shrink */
        width: auto !important; /* size each tab to its content, not full width */
        border-radius: 8px;
    }
    /* Hide the sub-descriptions on mobile so each tab is a compact pill */
    .tax-nav [class*="NavLink-description"] {
        display: none;
    }
    .tax-nav [class*="NavLink-label"] {
        white-space: nowrap;
    }
}

/* Tax-history story-mode year strip — scrolls horizontally on small screens */
.tax-era-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
}

/* Bracket-visualizer chart (two horizontal bars + legend below) */
.bv-graph {
    height: 300px;
}
@media (max-width: 575.98px) {
    .bv-graph {
        height: 320px;
    }
}

/* Ledger rows: on phones the qty / price / delete controls drop to their own
   line under the item name instead of squishing against it. Desktop keeps them
   inline on one row (space-between). */
@media (max-width: 575.98px) {
    .som-ledger-row {
        flex-wrap: wrap !important;
        row-gap: 4px;
    }
    .som-ledger-main {
        flex-basis: 100% !important;
    }
    .som-ledger-controls {
        width: 100%;
        justify-content: flex-end !important;
    }
}
body.site-light .som-wallets-bar {
    background-color: rgba(255, 255, 255, 0.97);
}

/* Scale-of-Money: make the collapsible sections obviously clickable — a bright
   gold chevron + a hover highlight so it reads "tap me to expand". */
.som-accordion .mantine-Accordion-chevron {
    color: var(--fdt-accent-gold, #FFD700);
    transform: scale(1.25);
}
.som-accordion .mantine-Accordion-control {
    transition: background-color 0.15s ease;
}
.som-accordion .mantine-Accordion-control:hover {
    background-color: rgba(255, 215, 0, 0.08);
}
.som-accordion .mantine-Accordion-label {
    cursor: pointer;
}

/* Immigration table — sticky header row */
.imm-sticky-thead th {
    position: sticky;
    top: 60px;
    z-index: 5;
    background-color: #2C2E33 !important;
}
body.site-light .imm-sticky-thead th {
    background-color: #f8f9fa !important;
}

/* ── Section menu: mobile bottom bar ──────────────────────────────────────── */
/* Built by sidebar_nav_col() in dash_pages/_helpers.py and used by every page
   with a section menu. Only rendered below the `sm` breakpoint — above it the
   sidebar column is shown instead and this is not in the DOM at all.

   Why it exists: the sidebar column is span 12 on a phone, so it stacked
   full-width ABOVE the content. On an eight-section page that is roughly half
   a 390x844 screen of navigation before the reader reaches anything, on every
   scroll back to the top. The bar puts those same sections where a thumb
   already rests and costs one row instead of eight.

   It scrolls sideways rather than squeezing: eight legible targets do not fit
   across 390px, and a row of unreadable 40px icons is not navigation. About
   five are visible and the rest are one swipe away. The scroll is contained
   here — this must never widen the document, or it pushes the site header's
   hamburger off the right edge (see TabsList, same bug, 2026-08-11). */
.fdt-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Above anything else a page pins to the bottom edge (the scale-of-money
       cart drawer is z-index 100), below modals (200). The section menu is the
       one control that must never be covered — losing it strands the reader on
       whichever panel happens to be open. */
    z-index: 110;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* the bar is swiped, not dragged */
    /* Keeps the swipe inside the bar. Without this, reaching either end
       chains the scroll to the page, so a sideways flick on the nav drags the
       whole document sideways — which is the thing that pushes the header's
       hamburger off screen. */
    overscroll-behavior: contain;
    /* When a tap focuses an item the browser scrolls the strip to reveal it.
       That is useful; unannounced it reads as the bar lurching. Smooth makes
       it deliberate. Most noticeable at 8 items, where the strip really does
       overflow. */
    scroll-behavior: smooth;
    background-color: var(--fdt-bg-card);
    border-top: 2px solid var(--fdt-accent-gold);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    /* Mobile browsers grow and shrink the visual viewport as the URL bar hides
       and reappears, but a position:fixed element is anchored to the LAYOUT
       viewport. During that transition the bar visibly detaches: scrolling up
       rides it half off the bottom edge, and scrolling back down snaps it into
       place. Promoting it to its own compositor layer makes the browser
       reposition it every frame rather than at the end of the gesture.
       Safe here specifically because the bar has no fixed or absolute
       descendants of its own — a transform on an element makes it the
       containing block for those, which is the usual reason not to do this. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}
.fdt-bottom-nav::-webkit-scrollbar { display: none; }

/* Keeps the bar from covering the last of the content and the footer. Reads the
   same variable the bar is sized from, so the two cannot drift apart. */
.fdt-bottom-nav-spacer { height: var(--fdt-bottom-nav-h); }

.fdt-bottom-nav-item {
    flex: 0 0 auto;
    min-width: 68px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--fdt-text-secondary);
    transition: background-color 0.15s, color 0.15s;
}
.fdt-bottom-nav-item--on {
    background-color: var(--fdt-accent-gold);
    color: #1a1b1e;                 /* gold is a light fill in both themes */
    font-weight: 700;
}

/* ── Flex children must be allowed to shrink ──────────────────────────────── */
/* The single most repeated layout bug on this site, found three times in one
   day in three different disguises: veterans' conflict cards, share-the-wealth's
   programme cards, and the immigration table.

   A flex child defaults to `min-width: auto`, which means it refuses to become
   narrower than its own content. Inside a `wrap="nowrap"` Group — there are ~69
   of them across 20 files — one long word therefore sets a floor. When that
   floor is wider than the phone, the child does not overflow its own box, the
   whole DOCUMENT gets wider. The page then scrolls sideways and the first thing
   to go is the site header: the nav hamburger slides off the right edge. The
   page itself looks fine, which is exactly why it kept being missed.

   `min-width: 0` restores the sane behaviour: the child shrinks, and its text
   wraps or ellipsises inside its own box. Anything that genuinely must not
   shrink can opt out with `flex-shrink: 0` or its own `min-width`. */
.mantine-Group-root > * {
    min-width: 0;
}

/* ── Grey outline badges, light mode ──────────────────────────────────────── */
/* `variant="outline" color="gray"` is grey-on-white in light mode and all but
   disappears. Two places it matters enough to invert:

     .fdt-unrated       "Not yet reviewed" — stands in for a warning nobody has
                        written yet, so it is the one badge that must not read
                        as a soft afterthought.
     .fdt-badge-invert  counts and sizes on the Archive contents cards, and the
                        data-set badge on a document.

   Deliberately opt-in by class rather than a blanket rule on every grey outline
   badge: the source badges (_src) use the same variant site-wide, and turning
   every "Verify source ↗" black would be a far bigger change than this.

   Set through Mantine's own CSS variables rather than background-color, because
   that is what the component actually reads — a plain override loses to the
   variables, the same trap the Paper backgrounds hit (CLAUDE.md). The literal
   declarations after them are a fallback for any build that renames them. */
body.site-light .fdt-unrated,
body.site-light .fdt-badge-invert {
    --badge-bg: #111827;
    --badge-color: #ffffff;
    --badge-bd: 1px solid #111827;
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

/* ── Source badges, light mode ────────────────────────────────────────────── */
/* Site-wide, every _src() call on every page. These are outline badges, which
   read fine on the dark page and wash out to near-invisible grey or pale orange
   on white. A source badge that cannot be read is the worst thing on this site
   to lose: every number's claim to be true is the badge underneath it.

   The gov / non-gov distinction is preserved rather than flattened. Both become
   solid and high-contrast, but they stay different colours, so "no government
   source available" is still obvious at a glance:

     .fdt-src-gov    near-black, white text   — .gov / .edu, verifiable
     .fdt-src-nogov  dark amber, white text   — corporate or nonprofit self-report

   Dark mode is untouched: these rules are scoped to body.site-light.

   Set through Mantine's --badge-* variables, which is what the component reads;
   overriding background-color alone loses to them. */
body.site-light .fdt-src-gov {
    --badge-bg: #111827;
    --badge-color: #ffffff;
    --badge-bd: 1px solid #111827;
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

body.site-light .fdt-src-nogov {
    --badge-bg: #92400e;
    --badge-color: #ffffff;
    --badge-bd: 1px solid #92400e;
    background-color: #92400e !important;
    color: #ffffff !important;
    border-color: #92400e !important;
}