/* ============================================================
   GLASS SKIN — the liquid-glass reskin layer. Loaded LAST so it
   out-cascades the legacy rules in styles.css/layout.css without
   editing them (they shrink away over time).

   Surface tiers (revised for the lava-lamp field, 2026-08-16):
   - STRUCTURAL glass (real backdrop-filter): header, modals,
     popovers, toasts, AND content cards/mover cards. Cards moved
     up a tier deliberately — the animated metaball field reads
     through them as heavy frosted blur (crisp goo between cards,
     diffused goo behind them). The old "≤6 blurred elements"
     budget is retired; the perf gate is the measured FPS on the
     Market Movers view over the animating canvas.
   - AMBIENT inset (rgba, NO backdrop-filter): surfaces nested
     INSIDE cards — stat tiles, inner option cards, metric panels.
   Never animate transform/filter on a backdrop-filtered element;
   never nest backdrop-filters.
   ============================================================ */

:root {
    --glass-header: rgba(246, 247, 251, 0.65);
    /* Floating dock chrome (nav capsule + utility satellite): near-opaque
       by design — NN/g-safe legibility over the animated field; the small
       blur radius is strictly cheaper than the old full-width header blur */
    --glass-dock: rgba(246, 247, 251, 0.88);
    --glass-panel: rgba(255, 255, 255, 0.55);
    /* Light-mode surfaces float on the ALWAYS-DARK lamp field — alphas
       are tuned against a near-black backdrop, not a pale one */
    --glass-card: rgba(255, 255, 255, 0.80);
    --glass-quiet: rgba(255, 255, 255, 0.82);
    --glass-modal: rgba(255, 255, 255, 0.85);
    --glass-inset: rgba(15, 23, 42, 0.045);
    --glass-stroke: rgba(255, 255, 255, 0.70);
    --glass-stroke-quiet: rgba(15, 23, 42, 0.07);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --glass-saturate: 180%;
}

[data-mode="dark"] {
    --glass-header: rgba(11, 14, 26, 0.62);
    --glass-dock: rgba(15, 18, 32, 0.85);
    --glass-panel: rgba(17, 21, 38, 0.55);
    --glass-card: rgba(19, 23, 41, 0.55);
    --glass-quiet: rgba(15, 18, 32, 0.85);
    --glass-modal: rgba(20, 24, 44, 0.80);
    --glass-inset: rgba(0, 0, 0, 0.25);
    --glass-stroke: rgba(255, 255, 255, 0.10);
    --glass-stroke-quiet: rgba(255, 255, 255, 0.06);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-saturate: 150%;

    /* Legacy variable remaps — styles.css still consumes these names and
       re-defines them in :root after themes.css, so the dark override
       must live HERE in the last-loaded layer. Without it, light-mode
       colors leak into dark surfaces (e.g. .volume-value text vanishing
       on dark tables). Dies with the legacy bridge. */
    --gray-bg: rgba(255, 255, 255, 0.05);
    --gray-light: rgba(255, 255, 255, 0.06);
    --gray-border: rgba(255, 255, 255, 0.12);
    --gray-input: rgba(255, 255, 255, 0.16);
    --gray-cancel: #7C8499;
    --gray-text: #A9B1C7;
    --gray-dark: #DDE1EE;
    --gray-heading: #F2F4FB;
    --success-green: #34D399;
    --success-green-hover: #6EE7B7;
    --success-green-light: rgba(52, 211, 153, 0.14);
    --success-green-border: rgba(52, 211, 153, 0.35);
    --success-green-text: #A7F3D0;
    --error-red: #F87171;
    --error-red-hover: #FCA5A5;
    --error-red-light: rgba(248, 113, 113, 0.14);
    --error-red-text: #FECACA;
    --info-blue: #60A5FA;
    --chart-indigo: #818CF8;
}

/* ---- Page chrome ---- */

body {
    color: var(--text-2);
}

/* ---- Shell: transparent layout layer; the dock regions carry the glass.
   (The old full-width blurred band is gone — chrome material lives on
   .nav-buttons and .utility-satellite below.) ---- */

.unified-header {
    /* De-boxed chrome (quiet-precision, 2026-08-17): the anchors carry no
       material of their own — this soft fade from the field color is the
       ONLY legibility scrim between chrome text and the animated lava.
       No backdrop-filter: the fade must stay cheap over the WebGL canvas. */
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--field-page) 90%, transparent),
        color-mix(in srgb, var(--field-page) 55%, transparent) 72%,
        transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    z-index: var(--z-sticky);
}

/* Masthead text renders directly on the lava field. The field is now
   same-polarity per mode (pastel-light / lamp-dark), so semantic text
   tokens are correct in both; the soft shadow guards the worst animated
   frame (WCAG F83 worst-pixel rule). */
.header-info h1 {
    color: var(--text-1);
    text-shadow: 0 1px 3px color-mix(in srgb, var(--field-page) 70%, transparent);
    font-family: var(--font-display);
    font-weight: 700;
}

.header-extra,
.header-extra .text-gray {
    color: var(--text-3);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--field-page) 70%, transparent);
}

/* ---- Nav: de-boxed text over the header scrim. No capsule material,
   no pills — active state is a pair of accent brackets: [ Trades ].
   The header-scrim fade above is what keeps this legible. ---- */

.nav-buttons {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 2px;
    box-shadow: none;
}

/* Utility satellite + brand: naked on the scrim, same as the nav */
.utility-sheet-trigger,
.utility-satellite {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: var(--r-sm);
    padding: 0;
    box-shadow: none;
}

.shell-brand {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: var(--r-sm);
    box-shadow: none;
}

/* ≤900px: the satellite reopens as an anchored popover — a floating
   layer, so it gets a real surface again (translucency is allowed on
   floating layers only). */
@media (max-width: 900px) {
    .shell-utilities[data-open="true"] .utility-satellite {
        background: var(--glass-modal);
        -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
        backdrop-filter: blur(20px) saturate(var(--glass-saturate));
        border: 1px solid var(--glass-stroke-quiet);
        border-radius: var(--r-md);
        padding: 4px;
        box-shadow: var(--shadow-2);
    }
}

.nav-buttons .btn,
.nav-buttons .btn.btn-purple {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text-3);
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: 0.9rem;
    height: 36px;
    padding: 0 1rem;
    min-width: 0;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease-out);
}

.nav-buttons .btn:hover:not(.active) {
    background: transparent;
    color: var(--text-1);
}

.nav-buttons .btn.active {
    background: transparent;
    color: var(--text-1);
    font-weight: 600;
    border: none;
    box-shadow: none;
}

/* Accent brackets frame the active label. Absolute-positioned inside the
   button's own padding so activation never shifts neighboring tabs. */
.nav-buttons .btn.active::before,
.nav-buttons .btn.active::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-weight: 400;
    font-size: 0.85rem;
    pointer-events: none;
}

.nav-buttons .btn.active::before {
    content: '[';
    left: 3px;
}

.nav-buttons .btn.active::after {
    content: ']';
    right: 3px;
}

/* Capsule compaction before the satellite collapse breakpoint */
@media (max-width: 900px) {
    .nav-buttons .btn,
    .nav-buttons .btn.btn-purple {
        padding: 0 0.625rem;
        font-size: 0.85rem;
    }
}

/* Bottom tab-bar transform of the same buttons (positioning in layout.css).
   Unlike the naked top nav, the bar floats over scrolling CONTENT, so it
   keeps a near-opaque surface — solid tint, no blur (quiet-precision). */
@media (max-width: 640px) {
    .nav-buttons {
        background: var(--glass-dock);
        border: 1px solid var(--glass-stroke-quiet);
        border-radius: var(--r-lg);
        padding: 2px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    }

    .nav-buttons .btn,
    .nav-buttons .btn.btn-purple {
        position: relative;
        flex-direction: column;
        gap: 2px;
        height: auto;
        min-width: 0;
        padding: 0.375rem 0.125rem 0.3125rem;
        font-size: 0.6875rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* Brackets don't fit the stacked icon+label geometry — the active
       tab reads through accent color instead. */
    .nav-buttons .btn.active::before,
    .nav-buttons .btn.active::after {
        content: none;
    }

    .nav-buttons .btn.active {
        color: var(--accent-text);
    }
}

/* ---- Cards: heavy structural glass over the lava-lamp field ----
   The frosting IS the design: crisp metaballs in the gaps, heavily
   diffused behind cards. Inner surfaces stay ambient (no nesting). */

.card,
.market-mover-card {
    background: var(--glass-card);
    -webkit-backdrop-filter: blur(36px) saturate(var(--glass-saturate));
    backdrop-filter: blur(36px) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1), var(--glass-highlight);
}

[data-mode="dark"] .card,
[data-mode="dark"] .market-mover-card {
    border-color: var(--glass-stroke);
}

/* Hover feedback via shadow/border only — never animate transform on a
   backdrop-filtered element (kills the translateY in styles.css) */
.market-mover-card:hover {
    box-shadow: var(--shadow-2), var(--glass-highlight);
    transform: none;
}

.card h2,
.card h3 {
    color: var(--text-1);
}

/* Nested/inset surfaces inside cards */
.metrics-panel,
.ts-info-box,
.modal-ticker-list {
    background: var(--glass-inset);
    border-color: var(--glass-stroke-quiet);
}

.stat-tile,
.option-inner-card {
    background: var(--glass-inset);
    border-color: var(--glass-stroke-quiet);
}

.mini-chart-svg {
    background: var(--glass-inset);
    border-color: var(--glass-stroke-quiet);
}

/* Chart bg rect goes transparent — the chart draws on its card */
.chart-bg {
    fill: transparent;
}

[data-mode="dark"] .chart-grid-line {
    stroke: rgba(255, 255, 255, 0.08);
}

[data-mode="dark"] .chart-marker-glyph {
    fill: #fff;
}

[data-mode="dark"] .chart-live-dot {
    stroke: var(--bg-field);
}

[data-mode="dark"] .chart-live-label,
[data-mode="dark"] .chart-live-change {
    stroke: rgba(11, 14, 26, 0.8);
}

/* ---- Tables: the QUIET surface — data is sacred ---- */

/* Kill the theme-tinted zebra (stripes fight translucency) */
tbody tr:nth-child(even):not(.today-ipo):not(.past-ipo):not(.future-ipo) {
    background-color: transparent;
}

tbody tr:not(.today-ipo):not(.past-ipo):not(.future-ipo):hover {
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

th {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    border-bottom: 1px solid color-mix(in srgb, var(--text-1) 10%, transparent);
    padding: 0.5rem 0.5rem 0.5rem 0;
}

td {
    border-bottom: 1px solid color-mix(in srgb, var(--text-1) 6%, transparent);
    color: var(--text-2);
}

/* ---- Buttons ---- */

.btn {
    border-radius: var(--r-control);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Quiet-precision button grammar ("single voltage CTA"): btn-purple is
   the one filled control; every other family is a hairline surface with
   semantic text color. Hover = one-notch shift, never a lift or glow. */

.btn-purple {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--text-on-accent, #fff);
}

.btn-purple:hover {
    background: var(--accent-strong, var(--accent));
    border-color: var(--accent-strong, var(--accent));
    filter: none;
    box-shadow: none;
}

.btn-gray,
.btn-cancel {
    background: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    color: var(--text-2);
}

.btn-gray:hover,
.btn-cancel:hover {
    background: var(--glass-inset);
    border-color: color-mix(in srgb, var(--text-1) 35%, transparent);
    color: var(--text-1);
}

.btn-green {
    background: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    color: var(--status-gain);
}

.btn-green:hover {
    background: var(--glass-inset);
    border-color: var(--status-gain);
    filter: none;
}

.btn-red {
    background: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    color: var(--status-loss);
}

.btn-red:hover {
    background: var(--glass-inset);
    border-color: var(--status-loss);
    filter: none;
}

.btn-blue {
    background: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    color: var(--status-info);
}

.btn-blue:hover {
    background: var(--glass-inset);
    border-color: var(--status-info);
    filter: none;
}

/* ---- Inputs on glass ---- */

.input,
.select {
    background: var(--glass-card);
    border: 1px solid var(--glass-stroke-quiet);
    border-radius: var(--r-control);
    color: var(--text-1);
    font-family: var(--font-ui);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

[data-mode="dark"] .input,
[data-mode="dark"] .select {
    background: var(--glass-inset);
}

.input::placeholder {
    color: var(--text-4);
}

.input:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.input[readonly] {
    background: var(--glass-inset);
    border-color: transparent;
}

/* ---- Modals: elevated structural glass (both legacy patterns) ---- */

.modal-overlay {
    background: rgba(5, 7, 15, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal);
}

.modal-backdrop {
    background: rgba(5, 7, 15, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.modal-content,
.dev-modal-content {
    background: var(--glass-modal);
    -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate));
    backdrop-filter: blur(28px) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    color: var(--text-2);
}

.modal-content h2,
.modal-content h3:not(.text-orange):not(.text-red) {
    color: var(--text-1);
}

/* ---- Toasts: structural glass with a semantic rail ---- */

.toast-element {
    background: var(--glass-modal);
    -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    backdrop-filter: blur(20px) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-stroke);
    border-left: 3px solid var(--toast-color);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}

.toast-message {
    color: var(--text-2);
}

/* ---- Theme picker popover: structural glass ---- */

.theme-picker-popover {
    background: var(--glass-modal);
    -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate));
    backdrop-filter: blur(28px) saturate(var(--glass-saturate));
    border-color: var(--glass-stroke);
}

.theme-picker-heading {
    color: var(--text-1);
}

[data-mode="dark"] .theme-card {
    background:
        radial-gradient(90% 90% at 15% 20%, color-mix(in srgb, var(--blob-1) 80%, transparent), transparent 70%),
        radial-gradient(90% 90% at 85% 25%, color-mix(in srgb, var(--blob-2) 75%, transparent), transparent 70%),
        radial-gradient(90% 90% at 50% 100%, color-mix(in srgb, var(--blob-3) 70%, transparent), transparent 70%),
        #0B0E1A;
}

[data-mode="dark"] .theme-card-name {
    color: #F2F4FB;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Mode toggle inside the picker */
.mode-toggle {
    display: flex;
    gap: 4px;
    background: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    border-radius: var(--r-sm);
    padding: 3px;
    margin-bottom: var(--sp-3);
}

.mode-toggle button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    border: none;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--text-3);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mode-toggle button.active {
    background: var(--accent);
    color: var(--text-on-accent, #fff);
}

/* ---- Misc dark-mode support for pre-glass components ---- */

[data-mode="dark"] .help-panel {
    background: #131729;
    color: var(--text-2);
}

[data-mode="dark"] .help-steps {
    color: var(--text-2);
}

[data-mode="dark"] .dev-modal-content h3 {
    color: var(--text-1);
}

[data-mode="dark"] .dev-modal-content p {
    color: var(--text-3);
}

[data-mode="dark"] .empty-state,
[data-mode="dark"] .empty-state-title {
    color: var(--text-2);
}

.badge-count {
    background: var(--accent-badge);
    color: #fff;
}

/* Loose-on-field text (e.g. the watchlist empty message): the field is
   same-polarity per mode now, so semantic tokens read in both. */
.empty-state-pad.text-gray {
    color: var(--text-2);
    text-shadow: 0 1px 3px color-mix(in srgb, var(--field-page) 70%, transparent);
}

/* Dimmed icon state (e.g. volume hidden) */
.icon-dim {
    opacity: 0.4;
}

/* ---- QA fix batch (post-skin defect sweep) ---- */

/* Charts draw directly on glass — kills the white #fafafa slab that
   styles.css puts behind every chart svg (glaring in dark mode) */
.chart-container svg {
    background: transparent;
    border-color: var(--glass-stroke-quiet);
}

/* Inter for body text — styles.css re-declares the system stack after
   base.css, so the winning assertion lives here in the last layer */
body {
    font-family: var(--font-ui);
}

/* Toasts stack below the sticky header instead of covering its controls;
   the offset is owned by the shell geometry tokens */
.toast-container {
    top: var(--toast-top);
}

/* IPO rows: kill the translucent zebra overlay that lets the blob field
   bleed through as muddy stripes (quiet tables are sacred) */
tbody tr.today-ipo:nth-child(even),
tbody tr.past-ipo:nth-child(even),
tbody tr.future-ipo:nth-child(even) {
    background-image: none;
}

/* Portfolio section banners: soft tinted inset instead of flat bars */
.bg-green-light {
    background-color: var(--status-gain-bg);
    border: 1px solid var(--status-gain-border);
    border-radius: var(--r-md);
}

.bg-gray-light {
    background-color: var(--glass-inset);
    border: 1px solid var(--glass-stroke-quiet);
    border-radius: var(--r-md);
}

/* Save-indicator FAB: 2015-era Material gradient → semantic token */
.save-indicator {
    background: var(--status-gain);
}

/* Purple badge follows the accent instead of hardcoded violet */
.badge-purple {
    background-color: var(--accent-soft);
    color: var(--accent-text);
}

/* Modal glass, round 2: styles.css declares
   `.modal-overlay .modal-content { background: white !important; ... }`
   which nukes the glass recipe on every overlay-pattern modal (welcome,
   confirm, bulk-add). Same specificity + !important from the last layer
   wins the cascade. Dies when that legacy block dies. */
.modal-overlay .modal-content {
    background: var(--glass-modal) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-3) !important;
}

/* Welcome modal preloaded-stock items: --gray-light/--gray-border remap
   in dark already; the hovers hardcode var(--white) which must not */
[data-mode="dark"] .welcome-stock-item:hover,
[data-mode="dark"] .welcome-category-label:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* IPO row/card status tints: styles.css hardcodes light pastels with
   !important (#fef3c7/#f0fdf4/#eff6ff) — blinding on dark surfaces.
   Dark mode swaps them for the translucent status tints. */
[data-mode="dark"] .today-ipo {
    background-color: var(--status-warn-bg) !important;
}

[data-mode="dark"] .past-ipo {
    background-color: var(--status-gain-bg) !important;
}

[data-mode="dark"] .future-ipo {
    background-color: var(--status-info-bg) !important;
}

[data-mode="dark"] .market-mover-card.today-ipo {
    background-color: var(--status-warn-bg);
    border-color: var(--status-warn-border);
    border-left-color: var(--status-warn);
}

[data-mode="dark"] .market-mover-card.past-ipo {
    background-color: var(--status-gain-bg);
    border-color: var(--status-gain-border);
    border-left-color: var(--status-gain);
}

[data-mode="dark"] .market-mover-card.future-ipo {
    background-color: var(--status-info-bg);
    border-color: var(--status-info-border);
    border-left-color: var(--status-info);
}

/* Smooth theme/mode morph on the surfaces that matter */
.unified-header,
.card,
.market-mover-card,
.stat-tile,
.input,
.select,
body {
    transition: background-color var(--dur-theme) var(--ease-in-out),
                border-color var(--dur-theme) var(--ease-in-out),
                color var(--dur-theme) var(--ease-in-out);
}

/* ---- Fallback: no backdrop-filter → tinted translucency ---- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-header: rgba(246, 247, 251, 0.95);
        --glass-panel: rgba(255, 255, 255, 0.95);
        --glass-card: rgba(255, 255, 255, 0.95);
        --glass-modal: rgba(255, 255, 255, 0.97);
    }

    [data-mode="dark"] {
        --glass-header: rgba(11, 14, 26, 0.95);
        --glass-panel: rgba(17, 21, 38, 0.95);
        --glass-card: rgba(19, 23, 41, 0.95);
        --glass-modal: rgba(20, 24, 44, 0.97);
    }
}

/* ---- Reduced transparency: users who asked for no translucency get
   opaque chrome — the blur was decorative, never load-bearing ---- */

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-dock: #F6F7FB;
        --glass-header: #F6F7FB;
        --glass-panel: #ffffff;
        --glass-card: #ffffff;
        --glass-modal: #ffffff;
    }

    [data-mode="dark"] {
        --glass-dock: #10131F;
        --glass-header: #0B0E1A;
        --glass-panel: #111526;
        --glass-card: #131729;
        --glass-modal: #141A2C;
    }

    .shell-brand,
    .nav-buttons,
    .utility-sheet-trigger,
    .utility-satellite,
    .card,
    .market-mover-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---- Forced colors (Windows High Contrast): transparency and shadows are
   stripped by the UA — the 1px borders become the only surface edges, so
   make sure the chrome keeps real ones ---- */

@media (forced-colors: active) {
    .shell-brand,
    .nav-buttons,
    .utility-sheet-trigger,
    .utility-satellite {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid ButtonBorder;
    }

    .nav-buttons .btn.active {
        border: 2px solid Highlight;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .unified-header,
    .card,
    .market-mover-card,
    .stat-tile,
    .input,
    .select,
    body,
    .blobfield {
        transition: none;
    }
}