/*--------------------------------------------------------------
# Fast Mode (FAST_MODE_PLAN.md): for slower devices, the same pages without what costs them CPU / GPU time. Every rule
# is under html.fast, which wwwroot/js/fast-mode.js sets before the page paints from this browser's choice (the
# cogwheels' "Fast mode", or the hint it offers a slow device), so the sheet loads on every page, last, and the switch
# needs no reload. The scripts that animate (v2-waves.js, landing.js, dashboard.js, modal-modern.js) ask
# window.almaFast.still() and stop on their own.
#   1. Glass without the blur: solid grounds that look as the blurred glass did
#   2. No blur anywhere else either
#   3. No motion: animations and transitions end at once (spinners excepted)
#   4. What the reduced-motion rules change besides motion, for Fast Mode too
--------------------------------------------------------------*/

/* ---------- 1. Glass without the blur ----------
   The glass is see-through and blurs what is behind it; without the blur the sea and the rows behind would show through
   sharp. Each token's colours are made solid here: the glass's own tint laid over what its blur makes of the veil behind
   a v3 card (v3.css, --v3-th-ground: #f1f7fd by day, #ffeddc at sunset, #0b111a at night), worked out per scene. */
html.fast {
    --glass-filter: none;
    --glass-modal-filter: none;
    --glass-bg: linear-gradient(135deg, #f9fcfe, #edf5fd);
    --glass-card: linear-gradient(135deg, #f7fbfe, #eff6fd);
    --glass-card-hover: #fafcfe;
    --glass-modal: linear-gradient(135deg, #fcfdff, #eff7fe);
    --glass-field: #f9fcfe;
}

html.fast[data-v2-scene="sunset"] {
    --glass-bg: linear-gradient(135deg, #fff4ea, #feebd7);
    --glass-card: linear-gradient(135deg, #fff3e7, #ffecda);
    --glass-card-hover: #fff5eb;
    --glass-modal: linear-gradient(135deg, #fff7ef, #feead6);
    --glass-field: #fff7f0;
}

html.fast[data-v2-scene="night"] {
    --glass-bg: linear-gradient(180deg, #212732, #181e28);
    --glass-card: linear-gradient(180deg, #1c232d, #151b24);
    --glass-card-hover: #2c3441;
    --glass-modal: linear-gradient(180deg, #252c37, #1c222c);
    --glass-field: #0d131e;
    --glass-modal-field: #141b27;
}

/* v3's folders (the Customs and calculator tabs' panels) */
html.fast body.shell-v2.v3:not(#_) {
    --v3-folder: #fafcfe;
}

html.fast[data-v2-scene="sunset"] body.shell-v2.v3:not(#_) {
    --v3-folder: #fff5eb;
}

html.fast[data-v2-scene="night"] body.shell-v2.v3:not(#_) {
    --v3-folder: #222934;
}

/* v3's windows as its "dim only" setting draws them (Admin -> Interface, v3.css): with no blur behind the dialog the
   page would show through it sharp, so the dim is deeper and the dialog solid */
html.fast body.shell-v2.v3.mm-backdrop:not(#_) > .modal-backdrop {
    background-color: rgba(15, 28, 46, 0.42);
}

html.fast[data-v2-scene="night"] body.shell-v2.v3.mm-backdrop:not(#_) > .modal-backdrop {
    background-color: rgba(3, 7, 14, 0.55);
}

html.fast body.shell-v2.v3:not(#_) .offcanvas-backdrop.show {
    background-color: rgba(15, 28, 46, 0.42);
}

html.fast[data-v2-scene="night"] body.shell-v2.v3:not(#_) .offcanvas-backdrop.show {
    background-color: rgba(3, 7, 14, 0.55);
}

/* The dialog keeps --glass-modal, solid above. A search window's sticky column labels: their tint on the dialog's solid,
   as "dim only" has them, so the rows don't show through as they pass under. */
html.fast body.shell-v2.v3.v3-modal-glass:not(#_) .modal-modern .mm-results-scroll thead th {
    background: linear-gradient(rgba(var(--v3-rgb), 0.06), rgba(var(--v3-rgb), 0.06)), var(--glass-modal) fixed;
}

/* The statistics over a quick view's map (modal-modern.css): its tint made solid */
html.fast .ctv-stats-panel {
    background: #eef3f9;
}

html.fast[data-v2-scene="night"] body.shell-v2 .ctv-stats-panel {
    background: #282f3a;
}

/* Night v2's dashboard panels and the markets drawer, see-through slate of their own */
html.fast[data-v2-scene="night"] body.shell-v2.v2-night2 .dash-panel {
    background: linear-gradient(180deg, #212732, #181e28);
}

html.fast[data-v2-scene="night"] body.shell-v2.v2-night2 .dash-markets {
    background: #14243d;
}

/* ---------- 2. No blur anywhere else ----------
   The menus, the bell's panel, the modal backdrops, the column headings: their grounds are near solid already. */
html.fast *,
html.fast *::before,
html.fast *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---------- 3. No motion ----------
   Animations end at once rather than not run (the cookie banner and the contact card's glow wait for animationend); an
   animation is only where a rule names one. The spinners keep turning (they say something is under way, and are small).
   Transitions are off altogether, not shortened: a duration on every element gives every element a transition of every
   property (transition-property is `all` by default), and a transition paints its old value for one frame however short
   it is, so whatever a script set landed a frame late (v2-grid.js's margins: the toolbar jumped, a scrollbar flashed and
   moved the header's icons). Bootstrap reads the duration as 0 and ends at once; the page scripts that wait for a
   transitionend have a timer of their own (FAST_MODE_PLAN.md §2). */
html.fast *,
html.fast *::before,
html.fast *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
}

html.fast {
    scroll-behavior: auto !important;
}

html.fast :is(.spinner-border, .spinner-grow, .s2-loading-msg .spinner, .dash-card.is-loading .dash-refresh i),
html.fast :is(.btn.is-busy, .btn-busy-icon)::after {
    animation-duration: .75s !important;
    animation-iteration-count: infinite !important;
}

/* ---------- 4. As the reduced-motion rules have it ----------
   Where a rule for prefers-reduced-motion does more than stop the motion, Fast Mode does the same. */

/* The page-load bar and the wind streaks off the header logo (site.css, page-progress.js) keep their motion: they say a
   page is on its way, they run only while it loads, and they are small (a 4px line; four dashed strokes in a box about
   the logo's size). Section 3 would stop both, so they are put back here, their own timings as site.css has them. */
html.fast .page-progress {
    transition: opacity .2s ease !important;
}

html.fast .page-progress.is-visible.is-done {
    transition-delay: .15s !important;
}

html.fast .page-progress-bar {
    transition: width .4s ease-out !important;
}

html.fast .page-wind path {
    animation-duration: .5s !important;
    animation-iteration-count: infinite !important;
}

html.fast .page-wind path:nth-child(2) { animation-duration: .43s !important; animation-delay: -.15s !important; }
html.fast .page-wind path:nth-child(3) { animation-duration: .62s !important; animation-delay: -.3s !important; }
html.fast .page-wind path:nth-child(4) { animation-duration: .38s !important; animation-delay: -.1s !important; }

/* A modal stands where it ends, not lifted for the slide (modal-modern.css) */
html.fast .modal-modern.fade .modal-dialog {
    transform: none;
}

html.fast .mm-lookup-list tr.is-added td {
    background-color: rgba(25, 135, 84, 0.12);
}

/* The field-error bubble and the tooltip: no slide offset (field-validation.css, tooltip.css) */
html.fast :is(.fv-bubble, .fv-bubble.is-shown),
html.fast :is(.site-tooltip, .site-tooltip.is-visible) {
    transform: none;
}

/* The dashboard's ticker stands still and scrolls by hand; the copy for the loop is not needed, nor the dot joining it
   (dashboard.css) */
html.fast .dash-ticker-run {
    animation: none !important;
}

html.fast .dash-ticker .dash-card-body {
    overflow-x: auto;
    scrollbar-width: none;
}

html.fast .dash-ticker-list[aria-hidden="true"] {
    display: none;
}

html.fast .dash-tick:last-child::after {
    content: none;
}

/* The new homepage's contact card while it sends: the glow held, not breathing (landing.css) */
html.fast .contact-draft.is-sending {
    box-shadow: var(--lp-glass-shadow), 0 0 0 1px #6fa3dc80, 0 0 26px 3px #6fa3dc59;
}

/* ---------- The cogwheels' switch (_HomepageMenuItems) ----------
   The rocket and the name at the left, the check at the far right while Fast Mode is on. Not under html.fast: the
   switch is drawn either way. */
[data-fast-toggle] {
    display: flex;
    align-items: center;
}

    [data-fast-toggle] .fast-label {
        margin-right: 12px;
    }

    [data-fast-toggle] .fast-check {
        flex: none;
        margin-left: auto;
    }

/* ---------- The hint's and the switch's toast ---------- */
.fast-toast-action {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .fast-toast-action:hover,
    .fast-toast-action:focus-visible {
        text-decoration-thickness: 2px;
    }