/* assets/style.css */
.tooltip-hide .tooltip {
  display: none;
}

/* Walkthrough carousel indicators */
.wt-indicator {
    background-color: var(--mantine-color-gray-6) !important;
    opacity: 0.5;
    width: 12px;
    height: 6px;
    border: 1px solid var(--mantine-color-gray-7);
    transition: all 250ms ease;
}

.wt-indicator[data-active] {
    background-color: var(--mantine-color-blue-7) !important;
    opacity: 1;
    width: 30px;
}

/* Wider dbc tooltips */
.tooltip-inner {
    max-width: 350px !important;
}


/* Hide Plotly rangeslider on small screens — the external range buttons replace it,
   and hiding it removes the finger-target conflict with the overflow-x scrollbar. */
@media (max-width: 768px) {
    .rangeslider-container {
        display: none !important;
    }
}

/* Accordion control hover highlight (mirrors dbc.Button behaviour) */
.mantine-Accordion-control {
    transition: background-color 150ms ease;
}

.mantine-Accordion-control:not([data-disabled]):hover {
    background-color: var(--mantine-color-blue-8) !important;
}

/* Reduce inner panel content padding (default Mantine is 16px) */
.mantine-Accordion-content {
    padding: 6px;
}


/* ── Walkthrough highlight ───────────────────────────────────────── */
.wt-highlight {
    outline: 3px solid rgba(33, 113, 181, 0.8) !important;
    outline-offset: 4px;
    border-radius: 6px;
}

/* Custom colours for Mantine bars loader (m_870bb79 = bar div element) */
.m_870bb79:nth-of-type(1) { background: #2171b5 !important; }
.m_870bb79:nth-of-type(2) { background: #c6dbef !important; }
.m_870bb79:nth-of-type(3) { background: #fc9272 !important; }

/* Custom colours for Mantine dots loader (m_870c4af = dot div element, 3 dots) */
.m_870c4af:nth-of-type(1) { background: #2171b5 !important; }
.m_870c4af:nth-of-type(2) { background: #c6dbef !important; }
.m_870c4af:nth-of-type(3) { background: #fc9272 !important; }

/* Center all text in the alert-info panel.  The <ul> is made inline-block
   so the bullet block itself is centered within the container. */
#alert-info {
    text-align: center;
}

#alert-info p {
    margin-bottom: 0.15rem;
}

#alert-info ul {
    display: inline-block;
    margin: 0;
}

/* Instructional placeholder shown in a tab panel before it has real content
   (replaces the old disabled-tab + hover-tooltip pattern). */
.alert-tab-placeholder {
    color: #666;
    font-style: italic;
    padding: 8px 4px;
}

/* Tabs inside the alert-info panel */
#alert-tabs {
    --tabs-color: #2d7a2d;   /* dark green indicator line */
}
/* This DMC version DOES also render the classic "mantine-Tabs-*" BEM class
   names alongside the hashed CSS-module ones (confirmed via DevTools, e.g.
   <button class="... m_4ec4dce6 mantine-Tabs-tab ...">) - target those
   directly rather than only the ARIA role, they're more legible and stable
   across DMC/Mantine versions than the hash. */
#alert-tabs .mantine-Tabs-tab,
#alert-tabs [role="tab"] {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 10px;
    text-align: center;
    /* Icon (leftSection) + label side by side, centered as one unit within
       the tab. display:flex alone wasn't enough (DevTools confirmed the tab
       is already a flex container by default) - the actual culprit was
       flex-direction: Mantine's own rule sets it to column for this
       variant/orientation combo, and since an earlier version of this rule
       only set display/align/justify/gap (never flex-direction), that
       column value kept winning per-property regardless of this rule's
       higher specificity - CSS resolves each property independently, a
       more specific rule doesn't blanket-override properties it doesn't
       itself set. !important here because even the explicit flex-direction
       override alone wasn't reliably beating Mantine's - belt and braces. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0px;
}
/* Icon and label were sitting far apart (icon pinned to the left edge,
   label centered in whatever space was left) because Mantine's own
   tabLabel span stretches to fill the remaining flex space by default, then
   centers its own text inside that wide box - so the *pair* looked spread
   out even with justify-content:center on the tab and a small `gap` above.
   Stop both sections from stretching so they size to their content and sit
   right next to each other (gap apart), with the tab's justify-content
   centering that tight icon+label unit as a whole instead. */
#alert-tabs .mantine-Tabs-tabSection,
#alert-tabs .mantine-Tabs-tabLabel {
    flex: none !important;
    width: auto !important;
}
/* Second, independent gap source, same as _nav_btn_styles' 'section' tweak
   for the shortcut nav buttons (app_layout.py): Tabs.Tab is built on
   UnstyledButton, so its left tabSection carries the same kind of built-in
   margin-inline-end as a Button's leftSection - a plain margin, not part of
   the flex `gap` above, so zeroing that didn't touch this. Halved (not
   zeroed) to match the exact same convention used there, still keyed off
   the theme spacing var so it scales with --mantine-scale. */
#alert-tabs .mantine-Tabs-tabSection[data-position="left"] {
    margin-inline-end: calc(var(--mantine-spacing-xs) / 2) !important;
}
/* 'Tips' is a plain string, so it centers via the tab's own layout. The
   other three tabs wrap their label in an extra span (for responsive
   mobile/desktop text, or - previously - a dmc.Tooltip), which doesn't
   stretch/center on its own - keep its text centered without forcing
   block/full-width (that's what broke the icon+label row above). */
#alert-tabs .mantine-Tabs-tab > *,
#alert-tabs [role="tab"] > * {
    text-align: center;
}
#alert-tabs [role="tabpanel"] {
    padding-top: 6px;
}
/* Mobile: the four tabs (even with their already-short mobile labels -
   "Tips" / "Future" / "Impact" / "Summary") were wrapping to a second line
   because the desktop padding/gap/icon-size left too little room for four
   grow:true tabs in a narrow viewport. Tighten horizontal padding, font
   size, icon-to-label gap and the icon itself so all four fit on one row. */
@media (max-width: 767px) {
    #alert-tabs .mantine-Tabs-tab,
    #alert-tabs [role="tab"] {
        padding: 4px 5px;
        font-size: 0.85rem;
    }
    #alert-tabs .mantine-Tabs-tabSection[data-position="left"] {
        margin-inline-end: 3px !important;
    }
    #alert-tabs .mantine-Tabs-tabSection[data-position="left"] svg {
        width: 13px !important;
        height: 13px !important;
    }
    /* The TabsList is built with grow=True (app_layout.py) so every tab
       shares equal width - i.e. all four stretch to match the WIDEST one
       ("Summary"), wasting space around short ones like "Tips"/"Impact"
       instead of letting each size to its own content. Mantine applies grow
       via `flex-grow: 1` on [data-grow] descendants (confirmed in the
       compiled DMC bundle) - cancel it here on mobile only, so tabs pack to
       content width and spread across the row instead, freeing up real
       room rather than just shaving padding. Desktop keeps grow (plenty of
       width there, and the even layout looks fine with the longer labels). */
    #alert-tabs .mantine-Tabs-list[data-grow] .mantine-Tabs-tab,
    #alert-tabs [data-grow] [role="tab"] {
        flex-grow: 0 !important;
        flex: 0 1 auto !important;
    }
    #alert-tabs .mantine-Tabs-list {
        justify-content: space-between;
    }
}

/* ── AI Summary button ────────────────────────────────────────────────────
   Used to be a small yellow circle floating in the alert-info title row,
   expanding on hover to reveal its label. Moved into the Figure summary
   tab as a normal, always-labelled dmc.Button (styled like the CMIP
   risk-ratio trigger - see _summary_tab_placeholder in climate_diy.py), so
   the expand-on-hover/tap treatment and its absolute positioning no longer
   apply - removed below along with the mobile two-tap handler that existed
   only to work around a label with no room to always be visible. */

/* Flex row shared by the breadcrumb bar and the alert-info title row (the
   title row itself no longer needs the space-between/relative positioning
   this gave it for the old button, but the breadcrumb row still does). */
.ai-summary-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    position: relative;
}

#alert-info-title {
    flex: 1;
    min-width: 0;
}




/* Map container: horizontal scroll only on small screens.
   On md+ screens overflow is left at the default (visible) so the
   walkthrough CSS outline on child elements is never clipped. */
@media (max-width: 767px) {
    .map-scroll-container {
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;       /* Firefox */
    }
    .map-scroll-container::-webkit-scrollbar {
        display: none;               /* Chrome / Safari */
    }
}

/* Desktop-only figure width floor. On mobile (<768px) the S/M/L control
   (seg-fig-size) owns figure width, so no floor is applied there. */
@media (min-width: 768px) {
    #map-world, #map-country, #lineplot {
        min-width: 500px;
    }
}

/* ── Mobile sidebar drawer ───────────────────────────────────────────────────
   On small screens the accordion sidebar becomes a slide-in drawer from the
   right. position:fixed removes it from the grid flow so the main content
   expands to fill the full width automatically.                             */

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1049;
    cursor: pointer;
}

@media (max-width: 767px) {
    #sidebar-col {
        position: fixed !important;
        top: 0;
        right: 0;
        height: 100vh;
        width: 92vw !important;
        max-width: 400px;
        z-index: 1050;
        background: white;
        overflow: visible !important;  /* allow dropdown menus to escape the container */
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(105%);
        transition: transform 0.3s ease;
        padding: 12px !important;
    }

    #sidebar-scroll-inner {
        height: 100vh;
        overflow-y: auto;
        padding-bottom: 24px;
        /* Side padding gives the wt-highlight outline room to show without being
           clipped — overflow-y:auto implicitly sets overflow-x:auto per CSS spec. */
        padding-left: 5px;
        padding-right: 5px;
    }

    #sidebar-col.sidebar-open {
        transform: translateX(0);
    }

    #sidebar-overlay.sidebar-open {
        display: block;
    }
}

@media (min-width: 768px) {
    #btn-open-sidebar,
    #btn-close-sidebar {
        display: none !important;
    }
}

/* Mantine portal dropdowns must appear above the sidebar overlay (z-index 1049) */
:root {
    --mantine-z-index-popover: 2000;
    --mantine-z-index-dropdown: 2000;
}

/* On mobile: breadcrumb capped so the tune FAB doesn't overlap it. */
@media (max-width: 767px) {
    #nav-breadcrumb {
        max-width: 75%;
    }
}

/* Year-range slider (ts-year-slider): takes up a lot of vertical space (its
   own row plus label/mark text below) and dragging a thin slider precisely
   is fiddly on a touchscreen anyway - mobile already has the range-preset
   buttons (Last month/yr/5yrs/etc, with their own short mobile labels) plus
   pinch/drag-to-zoom on the chart itself for anything finer. Its `style`
   prop is otherwise driven by a clientside callback (climate_diy.py,
   update_ts_range_btns) that toggles display:none/flex depending on figure
   type/resolution - !important here so this unconditionally wins on mobile
   regardless of what that callback sets, without touching its logic (or its
   desktop behaviour) at all. */
@media (max-width: 767px) {
    #ts-year-slider {
        display: none !important;
    }
}

/* "Analysis updated below" scroll cue (scroll-to-analysis-cue) - hidden by
   default (and whenever its -visible modifier class isn't present, toggled
   by the clientside callback in climate_diy.py and mobile_ui.js - see both
   for the full show/hide lifecycle), tappable pill matching the app's other
   small pill-shaped controls. Already mobile-only via its own d-md-none
   class in app_layout.py; no separate media query needed here.
   position:fixed + bottom anchoring makes it a floating button rather than
   part of the normal page flow under the chart - stays reachable regardless
   of how far the user has scrolled, same idea as btn-open-sidebar's "tune"
   FAB (top-anchored, z-index 1048) elsewhere in this file - kept just below
   that and the sidebar drawer/overlay (1049/1050) so those still win if ever
   both are on screen together. env(safe-area-inset-bottom) keeps it clear of
   the home-indicator bar on notched phones. mobile_ui.js hides it the moment
   the page starts scrolling (not just once alert-info is actually visible,
   as the IntersectionObserver alone would), so it doesn't float over content
   while the user is mid-scroll themselves. */
.scroll-to-analysis-cue {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1045;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #198754;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    width: fit-content;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.scroll-to-analysis-cue.scroll-to-analysis-cue-visible {
    display: flex;
}

/* ── Mobile figure scroll buttons ◀ ▶ ──────────────────────────────────────── */
.fig-scroll-controls {
    display: none;   /* hidden by default; shown on mobile below */
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* Keep the S/M/L control right-aligned even when the scrollbar track is
   hidden (fig_scroll.js sets it display:none when the figure fits). */
#seg-fig-size {
    margin-left: auto;
}

/* Custom scrollbar track */
#fig-scroll-track {
    flex: 1;
    height: 20px;
    background: #e0e4ea;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
}

/* Thumb — width and left set by JS */
#fig-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 30px;
    background: #6c94c0;
    border-radius: 10px;
    cursor: grab;
    touch-action: none;
    transition: background 0.15s ease;
}

#fig-scroll-thumb:active {
    background: #4a74a8;
    cursor: grabbing;
}

@media (max-width: 767px) {
    .fig-scroll-controls {
        display: flex;
    }
}

/* Risk-ratio slider (_risk_ratio_slider_div, alert-info-event): now always
   paired with the "Calculate how often..." button in a flex row (see
   _build_cmip_rr_trigger's `slider` param) - fills its own flex cell
   (flex: 1 1 auto there) rather than fighting that with its own fixed
   width, which is what the previous 75%-on-desktop rule here did back when
   the slider was still the sole, stacked element in this panel. */
.risk-ratio-slider {
    width: 100%;
    margin-left: 4px;
    margin-right: 4px;
}

/* On larger screens, cap how wide the slider itself gets rather than
   letting it stretch to fill however much room the flex row happens to
   have (which can get excessive on a wide desktop window) - small screens
   still need the full available width, so this only applies above the
   mobile/desktop breakpoint used elsewhere in this file. Centered within
   its flex cell (auto margins) once capped, rather than left-flush with
   blank space on the right. */
@media (min-width: 768px) {
    .risk-ratio-slider {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Keep the slider and button side by side at every width, but stop the
   label from overflowing out of its own flex cell: it's a fixed 340px,
   absolutely-positioned, centered box (sized that way so it has room to
   track the handle position) - once its flex cell (.rr-trigger-slider-cell)
   renders narrower than ~350px, that fixed width doesn't shrink or wrap, it
   just spills out sideways and renders underneath/behind the button.
   This was originally gated on a `@media (max-width: 767px)` viewport
   check, which turned out to be the wrong proxy: the cell can render under
   350px on a perfectly wide desktop window too (sidebar/map width, browser
   zoom, window not maximized, ...), which is exactly why the overlap
   showed up intermittently rather than only on phones. A container query,
   keyed to the slider cell's own rendered width instead of the viewport's,
   fixes that - it fires whenever the cell itself is too narrow, regardless
   of why. */
.rr-trigger-slider-cell {
    container-type: inline-size;
}

@container (max-width: 380px) {
    .risk-ratio-slider {
        height: 96px !important;
    }
    .risk-ratio-slider .rr-slider-label {
        left: 50% !important;
        width: calc(100% - 4px) !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
}