/*--------------------------------------------------------------
# Fast Mode (docs/archive/FAST_MODE_PLAN.md): a signed-in user's default look since 2026-11-10, the same pages without what
# costs a device CPU / GPU time. Every rule is under html.fast, which wwwroot/js/fast-mode.js sets before the page paints
# unless this browser chose "Full effects" (the cogwheels' switch, the Settings page) or, never having chosen, belongs to
# a visitor (full effects first; the fire / rocket in the footer switches), so the sheet loads on every page, last, and
# the switch needs no reload. The scripts that animate (v3-waves.js, landing.js, dashboard.js, modal.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
#   5. The motion Fast Mode keeps: short slides and fades a click or the pointer starts, each a transform, an opacity
#      or a colour on a small element (the main menu, the windows, toasts, tooltips, hover colours). They cost a slow
#      device next to nothing; what does cost it (the blur, the sea, the loops, anything that lays the page out again
#      on every frame) stays off. Not with reduced motion: then everything stands, as before.
--------------------------------------------------------------*/

/* ---------- 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-v3-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-v3-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 #v3 {
    --v3-folder: #fafcfe;
}

html.fast[data-v3-scene="sunset"] #v3 {
    --v3-folder: #fff5eb;
}

html.fast[data-v3-scene="night"] #v3 {
    --v3-folder: #222934;
}

/* The page behind a window (and behind the main menu and the filter panel) as the "Dim only" setting has it (Admin ->
   Interface, modal.css): with no blur behind the dialog the page would show through it sharp, so the dim is
   deeper and the dialog solid. 0.45: the dialog against the dimmed page is 2.65 to 3.05:1 by day and at sunset
   (0.42 dipped to 2.43:1 at sunset's darker corner). The night can't get there by dimming, its page being near black
   already (even 80% black gives 1.44:1), so there the dialog's rim draws the edge (below). */
html.fast body {
    --mm-dim: rgba(15, 28, 46, 0.45);
    --mm-blur: none;
}

html.fast[data-v3-scene="night"] body {
    --mm-dim: rgba(3, 7, 14, 0.55);
}

/* The night's rim on the dialog, the main menu and the filter panel: #a0acbe at 40% (2.9:1 against the dimmed page),
   where the glass's 20% (1.97:1) was enough only while the blur set the dialog apart. The sign-in window too. */
html.fast[data-v3-scene="night"] #v3 :is(.modal .modal-content, .custom-panel, .filter-offcanvas),
html.fast[data-v3-scene="night"] .account-modal .modal-content {
    border-color: #a0acbe66;
}

/* The sign-in window (landing.css) keeps a light dim of its own, made for its blur: here the windows' deeper one */
html.fast body:has(#account-modal) > .modal-backdrop {
    background-color: var(--mm-dim);
}

/* 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 #v3 .modal .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.css): its tint made solid */
html.fast .ctv-stats-panel {
    background: #eef3f9;
}

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

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

html.fast[data-v3-scene="night"] body.shell-v3 .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 ----------
   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 (v3-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 (docs/archive/FAST_MODE_PLAN.md §2). Section 5 puts back, one by one and
   naming their properties, the few that cost next to nothing. */
html.fast *,
html.fast *::before,
html.fast *::after {
    transition: none !important;
}

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

/* The animations stop one by one, each named here, not with a rule on every element: animation properties on every
   element tripled the style work of a page that restyles often (Welcome's Services network: 1.33s of every 5s against
   0.42s, CPU x6, 2026-11-10, docs/archive/FAST_MODE_PLAN.md §7). They end at once rather than not run: the cookie banner
   and the contact card's glow wait for animationend. A new animation goes on this list, unless it is a spinner or the
   page-load wind (they say something is under way, are small, and keep turning) or section 5 keeps it. */
html.fast .slide-down-out,
html.fast .contact-draft.is-sending,
html.fast .contact-draft.is-sent-glow,
html.fast body:has(#account-modal) > .modal-backdrop,
html.fast body.mm-opening > .modal-backdrop,
html.fast body.mm-closing > .modal-backdrop,
html.fast .mm-turn,
html.fast .mm-icon-btn.is-copied > .bi,
html.fast .mm-lookup-list tr.is-added td,
html.fast .order-row-updated,
html.fast .orders-skeleton-line,
html.fast .orders-skeleton-icon,
html.fast .dash-skeleton span,
html.fast .dash-ticker-skeleton span,
html.fast .dash-panel-head::before,
html.fast .dash-panel-head::after,
html.fast .dash-resize.ctour-item,
html.fast .status-art .art-bob,
html.fast .status-art .art-fog-1,
html.fast .status-art .art-fog-2,
html.fast .status-art .art-fog-3 {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !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). The wind is not on section 3's list; the bar's transitions are put back here, 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;
}

/* With reduced motion, where section 5 keeps nothing: a modal stands where it ends, not lifted for the slide
   (modal.css); a search window's added row holds its tint rather than fading it; the field-error bubble and the
   tooltip have no slide offset (field-validation.css, tooltip.css) */
@media (prefers-reduced-motion: reduce) {
    html.fast .modal.fade .modal-dialog {
        transform: none;
    }

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

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

/* ---------- 5. The motion Fast Mode keeps ----------
   Section 3 stops every transition and animation; these come back at their own timings (as in the stylesheet named),
   each naming its properties, never `all`. All of them move a transform or an opacity, which the compositor does
   without laying out or painting the page again, or fade a colour on something small: a click or the pointer starts
   them and they end. The blur that the menu's, the windows' and the filter panel's backdrops have in normal mode is
   off here (section 2), so what fades is a plain tint. Not with reduced motion: then section 3 stands. */
@media (prefers-reduced-motion: no-preference) {
    /* The main menu slides in (site.css .custom-panel, a transform) and the veil behind it fades (v3.css 5c) */
    html.fast .custom-panel {
        transition: transform 0.3s ease-in-out !important;
    }

    html.fast #v3 #header::after {
        transition: opacity 0.25s ease-in, visibility 0s linear 0.25s !important;
    }

    html.fast #v3 #header:has(#customPanel.show)::after {
        transition: opacity 0.25s ease-out !important;
    }

    /* The filter panel (Bootstrap's offcanvas) slides, and its backdrop fades */
    html.fast .filter-offcanvas {
        transition: transform 0.3s ease-in-out !important;
    }

    html.fast .offcanvas-backdrop.fade {
        transition: opacity 0.15s linear !important;
    }

    /* A window fades as it rises (modal.css). Its dim fades too, by its opacity: normal mode fades the tint's colour
       and its blur's radius (mm-dim-in / -out) to keep the blur whole, which paints the whole window again on every
       frame; with no blur here, the opacity alone is the compositor's. The sign-in window (landing.css) the same. */
    html.fast .modal.fade {
        transition: opacity 0.2s ease !important;
    }

    html.fast .modal.fade .modal-dialog {
        transition: transform 0.3s cubic-bezier(.2, .8, .2, 1) !important;
    }

    html.fast body.mm-opening > .modal-backdrop,
    html.fast body:has(#account-modal) > .modal-backdrop {
        animation: fast-dim-in 0.25s ease-out both !important;
    }

    html.fast body.mm-closing > .modal-backdrop {
        animation: fast-dim-out 0.2s ease-in forwards !important;
    }

    /* Inside a window: the record dimming as the next one loads, the reader stepping to the next item, the copied
       icon's pop, a search window's added row (modal.css); the quick view's statistics rising over its map */
    html.fast .modal .modal-content.is-turning .modal-body {
        transition: opacity 0.15s ease-in-out !important;
    }

    html.fast .mm-turn {
        animation-duration: 0.22s !important;
    }

    html.fast .mm-icon-btn.is-copied > .bi {
        animation-duration: 0.32s !important;
    }

    html.fast .mm-lookup-list tr.is-added td {
        animation-duration: 2.4s !important;
    }

    html.fast .ctv-stats-panel {
        transition: transform 0.2s ease !important;
    }

    html.fast .ctv-map-wrap:has(> .ctv-stats-panel.is-open) > .mm-map {
        transition: visibility 0s 0.2s !important;
    }

    /* Welcome (landing.css): a section fading in as it rises, the contact card and the services' map fading, their
       buttons' colours. Its photos' 1.2s fade stays off: a picture the size of the stage, under a filter. */
    html.fast .alma-landing .stage .panel {
        transition: opacity .5s, transform .65s cubic-bezier(.16, 1, .3, 1), visibility .5s !important;
    }

    html.fast .alma-landing .contact-draft {
        transition: opacity .35s, transform .35s, visibility .35s !important;
    }

    html.fast .alma-landing .logistics-scene {
        transition: opacity .35s, visibility .35s !important;
    }

    html.fast .alma-landing .journey-path {
        transition: opacity .5s !important;
    }

    html.fast :is(.alma-landing .primary, .alma-landing .secondary, .alma-landing .legal-tabs button, .alma-landing .contact-links a.contact-card, .account-modal .primary) {
        transition: background-color .2s, color .2s, border-color .2s !important;
    }

    /* Services' network: its hubs light up in turn as the orders move (landing.js runs the network in Fast Mode too, on
       Services only) */
    html.fast .alma-landing .hub :is(.node-icon, .hub-core) {
        transition: opacity .2s !important;
    }

    /* The Orders row a quick edit rewrote flashes green (areas/orders.css) */
    html.fast .order-row-updated {
        animation-duration: 1.6s !important;
    }

    /* The toasts slide down from the top (header-toast.css) */
    html.fast .header-toast {
        transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s ease !important;
    }

    html.fast .header-toast.ht-glide {
        transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s ease, top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    /* The tooltip and the field-error bubble fade in, rising 3px (tooltip.css, field-validation.css) */
    html.fast :is(.site-tooltip, .fv-bubble) {
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s !important;
    }

    html.fast :is(.site-tooltip.is-visible, .fv-bubble.is-shown) {
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s !important;
    }

    /* The header (v3-shell.css; Welcome's, landing.css): the visitors' links' underline drawn in, the round icons'
       circle growing from the middle, a pressed icon's dip */
    html.fast :is(body.shell-v3 #header .vh-link, .header-landing .lh-link)::after {
        transition: transform 0.3s ease !important;
    }

    html.fast body.shell-v3 :is(.menu-toggle, .icon-button .icon-link, .icon-button #notifBell) {
        transition: background-size 0.28s cubic-bezier(.2, .7, .2, 1), color 0.2s ease !important;
    }

    html.fast body.shell-v3 :is(.menu-toggle, .icon-button .icon-link) > :is(i, span:first-child) {
        transition: scale 0.12s ease !important;
    }

    /* The cogwheels' turn and a group's chevron (v3-shell.css, site.css, dashboard.css, modal.css) */
    html.fast :is(body.shell-v3 .footer-cog-btn i, .menu-round .bi-gear, .dash-cog i, .alma-landing .landing-cog-btn .bi-gear) {
        transition: transform 0.4s ease !important;
    }

    html.fast .mm-group-toggle .bi-chevron-down {
        transition: transform 0.2s ease !important;
    }

    /* Colours under the pointer: Bootstrap's buttons (not while busy: the label would show under the spinner,
       components.css, button-busy.css), the menus' rows, the dropdowns' items, the windows' and the footer's small
       buttons */
    html.fast .btn:not(.is-busy, .btn-busy.is-centered) {
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    }

    html.fast :is(.custom-panel-body ul li a, .custom-panel .dropdown > a, .custom-panel .dropdown > ul > li a) {
        transition: background-color 0.3s ease, color 0.3s ease !important;
    }

    html.fast body.shell-v3 :is(.dropdown-menu:not(.dash-menu):not(.grid-pager-size .dropdown-menu) .dropdown-item, .grid-toolbar-tools .dropdown-menu > li > label) {
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    html.fast :is(.effects-btn, .mm-close, .mm-btn, .mm-pager-link, .mm-pager-arrow, .mm-doc, .menu-footer .menu-round, .dash-clock-toggle, .dash-cog, #v3 a.grid-card-chip, #v3 .badge.badge-transparent, #v3 a.mm-count, body.shell-v3 #footer #notifBell, body.shell-v3 .footer-cog-btn):not(.is-busy, .btn-busy.is-centered) {
        transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
}

@keyframes fast-dim-in {
    from {
        opacity: 0;
    }
}

@keyframes fast-dim-out {
    to {
        opacity: 0;
    }
}

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

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

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

/* ---------- A visitor's switch (_EffectsButton): the fire / the rocket at the right end of the footer ----------
   _FooterV3 and Welcome's strip. The fire (warm orange) and "Full effects" while they are on, the rocket (the footer's
   blue) and "Fast Mode" in Fast Mode, the name in the strip's own text colour; a pill under the pointer. Both icons and
   both names are in the button; html.fast picks one of each, so there is no flash of the other before fast-mode.js runs.
   Below 1024px the strip is icons only (v3.css §5e, landing.css), and so is this: a round button like the cogwheel's. */
.effects-switch {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
}

.effects-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 28px;
    height: 28px;
    padding: 0 10px 0 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #dcebf7;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .effects-btn:is(:hover, :focus-visible) {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .effects-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 1px;
    }

    .effects-btn i {
        font-size: 15px;
    }

    .effects-btn i.effects-full {
        color: #ffa94d;
    }

    .effects-btn i.effects-fast {
        color: var(--v3-footer-accent, #7ecafd);
    }

html.fast .effects-btn .effects-full,
html:not(.fast) .effects-btn .effects-fast {
    display: none;
}

@media (max-width: 1023.98px) {
    .effects-btn {
        width: 28px;
        padding: 0;
    }

        .effects-btn .effects-name {
            display: none;
        }
}