/*
 * Interaction and motion, applied across components (tokens in 00-tokens.css):
 *  - pressed states on pointer-down, released with a spring;
 *  - menus and popovers as translucent material that grows out of the control that opened them;
 *  - modals that dim the page; on phones they become bottom sheets (drag to dismiss in assets/shell.js);
 *  - chart cards and tiles settle into place when a view opens;
 *  - Dash 4 components (dropdown, slider, checklist) in the brand colours (slider knob in slider.css).
 * Gesture-driven motion (the phone drawer, sheet dragging, the segmented-control thumb) lives in assets/shell.js.
 */

/* ---- Dash 4 component colours ------------------------------------------------------------------ */
:root {
    --Dash-Fill-Interactive-Strong: var(--color-fill-accent);
    --Dash-Fill-Interactive-Weak: var(--color-blue-50);
    --Dash-Fill-Primary-Hover: var(--color-blue-50);
    --Dash-Fill-Primary-Active: var(--color-blue-100);
    --Dash-Fill-Inverse-Strong: var(--color-surface);   /* dropdown, slider input and list backgrounds */
    --Dash-Fill-Disabled: var(--color-fill-quiet);
    --Dash-Stroke-Strong: var(--color-ink-500);
    --Dash-Text-Disabled: var(--color-ink-500);
    --Dash-Stroke-Weak: var(--color-line);
    --Dash-Text-Primary: var(--color-ink-700);
    --Dash-Text-Strong: var(--color-ink-900);
    --Dash-Text-Weak: var(--color-ink-500);
}

/* ---- Pressed states: immediate on pointer-down, spring back on release ------------------------- */
.ds-button, .ds-link-button, .btn, .dropdown-item, .ds-nav-item, .radio-buttons:not(.has-thumb) label,
.figure-size-panel button, button.dash-dropdown, .ds-header-link, .ds-theme-toggle {
    transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-fast) linear,
        border-color var(--dur-fast) linear, color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.ds-button:active, .ds-link-button:active, .btn:active, .radio-buttons:not(.has-thumb) label:active,
.figure-size-panel button:active, .ds-header-link:active, .ds-theme-toggle:active {
    transform: scale(var(--press-scale));
    transition-duration: var(--dur-press), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast);
    transition-timing-function: ease-out, linear, linear, linear, linear;
}
/* Wide surfaces move less than small buttons */
.ds-nav-item:active, .dropdown-item:active, button.dash-dropdown:active {
    transform: scale(calc((1 + var(--press-scale)) / 2));
    transition-duration: var(--dur-press), var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast);
    transition-timing-function: ease-out, linear, linear, linear, linear;
}
.ds-nav-item:active:not(.is-active) { background: var(--color-blue-100); }
/* On touch screens a hover state would stick after the tap */
@media (hover: none) {
    .ds-nav-item:hover:not(.is-active):not(:active) { background: transparent; color: var(--color-ink-700); }
    .ds-button:hover:not(:active) { background: var(--color-surface); border-color: var(--color-line); }
}

/* ---- Menus and popovers: material that grows out of its trigger -------------------------------- */
.ds-app .dropdown-menu {
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--material-menu);
    -webkit-backdrop-filter: var(--material-blur-thin);
    backdrop-filter: var(--material-blur-thin);
    box-shadow: var(--shadow-2);
    font-size: var(--text-sm);
    /* Popper positions these menus with an inline transform, so a scale would grow from the wrong point.
       Instead the menu is revealed by a clip that opens out of the corner next to its button. The open clip
       sits well outside the box so the shadow is not cut. */
    --reveal-from: inset(0 45% 70% 0 round var(--radius-md));
    clip-path: inset(-64px round var(--radius-md));
    transition: opacity 0.14s linear, clip-path var(--dur-spring) var(--ease-spring), translate var(--dur-spring) var(--ease-spring),
        display var(--dur-spring) allow-discrete;
}
.ds-app .dropdown-menu[data-popper-placement$="end"], .ds-app .dropdown-menu-end { --reveal-from: inset(0 0 70% 45% round var(--radius-md)); }
.ds-app .dropdown-menu:not(.show) { opacity: 0; translate: 0 -4px; clip-path: var(--reveal-from); }
@starting-style { .ds-app .dropdown-menu.show { opacity: 0; translate: 0 -4px; clip-path: var(--reveal-from); } }
.ds-app .dropdown-item {
    padding: 7px var(--space-3);
    border-radius: 6px;
    color: var(--color-ink-900);
    letter-spacing: var(--tracking-body);
}
.ds-app .dropdown-item:hover, .ds-app .dropdown-item:focus { background: var(--color-blue-50); color: var(--color-navy-900); }
.ds-app .dropdown-item:active { background: var(--color-fill-accent); color: var(--color-on-accent); }
.ds-app .dropdown-toggle.ds-button { border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-blue-600); }
.ds-app .dropdown-toggle.ds-button.show { background: var(--color-blue-50); border-color: var(--color-blue-600); }

/* Country selector list (Radix popover); Radix waits for the closing animation before removing it */
.dash-dropdown-content {
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    background: var(--material-menu) !important;
    -webkit-backdrop-filter: var(--material-blur-thin);
    backdrop-filter: var(--material-blur-thin);
    box-shadow: var(--shadow-2) !important;
    transform-origin: var(--radix-popover-content-transform-origin);
}
/* A material inside another material cannot blur what lies behind both (the outer one becomes its backdrop), so
   the country list, which opens from the pinned sidebar panel, is solid instead */
.dash-dropdown-content {
    background: var(--color-surface-raised) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.dash-dropdown-content[data-state="open"] { animation: ds-pop-in var(--dur-spring) var(--ease-spring); }
.dash-dropdown-content[data-state="closed"] { animation: ds-pop-out 0.14s ease-in forwards; }
@keyframes ds-pop-in { from { opacity: 0; scale: 0.94; } 40% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes ds-pop-out { to { opacity: 0; scale: 0.97; } }
button.dash-dropdown { border-radius: var(--radius-sm); }

/* ---- Modals: dim to focus; bottom sheets on phones ---------------------------------------------- */
.modal-backdrop { --bs-backdrop-bg: #001226; --bs-backdrop-opacity: 0.32; }
:root[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000000; --bs-backdrop-opacity: 0.5; }
.modal-content {
    background: var(--color-surface);
    color: var(--color-ink-700);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.modal-header { border-bottom: 0; padding: var(--space-5) var(--space-5) var(--space-2); background: transparent; }
.modal-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-navy-900); letter-spacing: var(--tracking-title); line-height: var(--leading-tight); }
.modal-body { padding: var(--space-2) var(--space-5) var(--space-4); }
.modal-footer { border-top: 0; padding: 0 var(--space-5) var(--space-5); gap: var(--space-2); }
.modal.fade .modal-dialog { transform: scale(0.96); transition: transform var(--dur-spring) var(--ease-spring); }
.modal.show .modal-dialog { transform: none; }

@media (max-width: 575.98px) {
    /* The sheet rises from the bottom edge and leaves the same way */
    .modal-dialog, .modal-dialog-centered { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
    .modal-dialog .modal-content { width: 100%; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .modal.fade .modal-dialog { transform: translateY(100%); }
    .modal.show .modal-dialog { transform: none; }
    /* The header is the drag handle (assets/shell.js) and carries the grabber */
    .modal-content .modal-header { position: relative; padding-top: var(--space-6); touch-action: none; }
    .modal-content .modal-header::before {
        content: ""; position: absolute; top: var(--space-2); left: 50%; translate: -50% 0;
        width: 36px; height: 5px; border-radius: 3px; background: var(--grabber);
    }
    .modal-content .modal-body { overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- Views settle into place as they open -------------------------------------------------------- */
.chart-container, .ds-kpi, .ds-intro-card, .ds-page-card {
    transition: opacity 0.22s linear, translate var(--dur-spring) var(--ease-spring);
}
@starting-style {
    .chart-container, .ds-kpi, .ds-intro-card, .ds-page-card { opacity: 0; translate: 0 8px; }
}

/* ---- Reduced motion: keep fades, drop movement --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ds-app .dropdown-menu:not(.show) { translate: none; clip-path: inset(-64px round var(--radius-md)); }
    @starting-style { .ds-app .dropdown-menu.show { translate: none; clip-path: inset(-64px round var(--radius-md)); } }
    .dash-dropdown-content[data-state] { animation-name: ds-fade; }
    @keyframes ds-fade { from { opacity: 0; } }
    .modal.fade .modal-dialog { transform: none; }
    .chart-container, .ds-kpi, .ds-intro-card, .ds-page-card { translate: none; }
    @starting-style { .chart-container, .ds-kpi, .ds-intro-card, .ds-page-card { translate: none; } }
    .radio-buttons.thumb-ready::before { transition-property: none; }
}