/* ── 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;
}

/* ── 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;
}

/* ════════════════════════════════════════════════════════════════════════════
   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;
}

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;
}

/* 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 #C1C2C5 or #FFD700
   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. */
body.site-light [style*="#C1C2C5"],
body.site-light [style*="#c1c2c5"],
body.site-light [style*="#FFD700"],
body.site-light [style*="#ffd700"] {
    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;
}

/* 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;
}

/* ──── 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;
}