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

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

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

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

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

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

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

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