/* ═══════════════════════════════════════════════════════════════════════
   LIQUID-GLASS.CSS  —  app-wide Apple "Liquid Glass" skin (generated)
   ───────────────────────────────────────────────────────────────────────
   Recipe ADOPTED FROM GlinUI (@glinui/tokens, Apple Liquid Glass / WWDC'25
   spec) so the app matches the GlinUI components: a frosted surface paired
   with saturate(180%), a 1px border whose TOP edge is brighter (the light-
   refraction edge), and a soft drop shadow. Tuned to read on a WHITE light
   background (higher surface opacity, edge + shadow do the work — no heavy
   colored aurora). Dark theme uses light-on-dark translucency.

   Applied to ~258 surveyed card containers; each `html `-prefixed so
   it wins over later route-chunk CSS (their :hover still wins). --gx-blur
   tracks --glass-blur so the global transparency control still drives it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Glass tokens (GlinUI recipe), per theme ──────────────────────────── */
:root, [data-theme="light"] {
    --gx-blur: var(--glass-blur, 20px);
    --gx-sat: 180%;
    --gx-surface: rgb(255 255 255 / 0.5);                 /* translucent — lets tint/content show */
    --gx-border: rgb(15 23 42 / 0.10);                     /* faint dark hairline = visible edge on white */
    --gx-top: rgb(255 255 255 / 0.95);                    /* bright inset top edge (refraction) */
    --gx-inset: rgb(255 255 255 / 0.45);                  /* faint inner outline */
    /* diagonal specular gloss — the signature liquid-glass reflection */
    --gx-gloss: linear-gradient(135deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.18) 26%, rgb(255 255 255 / 0) 60%);
    --gx-shadow: 0 12px 32px -8px rgba(28, 24, 60, 0.20), 0 3px 10px -2px rgba(28, 24, 60, 0.10);
}
[data-theme="dark"] {
    --gx-blur: var(--glass-blur, 22px);
    --gx-sat: 180%;
    --gx-surface: rgb(255 255 255 / 0.06);
    --gx-border: rgb(255 255 255 / 0.14);
    --gx-top: rgb(255 255 255 / 0.30);
    --gx-inset: rgb(255 255 255 / 0.06);
    --gx-gloss: linear-gradient(135deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.03) 28%, rgb(255 255 255 / 0) 60%);
    --gx-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.38);
}
[data-theme="brand"] {
    --gx-blur: var(--glass-blur, 24px);
    --gx-sat: 185%;
    --gx-surface: rgb(255 255 255 / 0.08);
    --gx-border: rgb(255 200 245 / 0.18);
    --gx-top: rgb(255 220 250 / 0.32);
    --gx-inset: rgb(255 200 245 / 0.08);
    --gx-gloss: linear-gradient(135deg, rgb(255 230 252 / 0.14) 0%, rgb(255 230 252 / 0.04) 28%, rgb(255 230 252 / 0) 60%);
    --gx-shadow: 0 20px 48px rgba(40, 6, 60, 0.55), 0 5px 16px rgba(40, 6, 60, 0.38);
}

/* ── Liquid frost on every card surface ───────────────────────────────────
   Sets its OWN translucent fill so it's glass regardless of original bg. */
html .ai-builder,
html .ai-review,
html .aij-empty-state,
html .aij-side-card,
html .ap-cta,
html .ar-begin-card,
html .ar-cash-card,
html .ar-chart-panel,
html .ar-equity-card,
html .ar-onboarding-card,
html .ar-podium-card,
html .ar-recent-card,
html .ar-share-card,
html .ar-shares,
html .ar-statcard,
html .asset-card,
html .asset-deck,
html .at-hero,
html .at-hero-explainer,
html .at-kpi-card,
html .at-panel,
html .at-tabs,
html .az-card,
html .az-vbox,
html .beez-cs-vendor,
html .beez-widget-suggestion,
html .br-info-box,
html .br-stat-card,
html .bw-arch-card,
html .bw-archive-card,
html .bw-expl-card,
html .bw-locked-card,
html .bw-reveal-card,
html .bw-reveal-diagram-card,
html .bw-reveal-score-card,
html .bw-share-card,
html .bw-today-card,
html .cagr-benchmark,
html .cagr-card,
html .cagr-formula-box,
html .cagr-formula-hero,
html .cagr-result-hero,
html .cagr-settings,
html .card,
html .cca-peers,
html .cft-info-box,
html .cft-stat-card,
html .cfx-card,
html .cfx-chart-card,
html .cfx-error-box,
html .cfx-help-card,
html .cfx-modal,
html .cfx-note-box,
html .cfx-summary-card,
html .cfx-toast,
html .cgt-info-box,
html .cgt-stat-card,
html .chart-indicator-panel,
html .chart-popover,
html .chat-box,
html .content-box,
html .dash-prod,
html .dash2-card,
html .dash2-greet,
html .dash2-tip,
html .dca-info-box,
html .dca-stat-card,
html .difference-banner,
html .dom-panel,
html .dp-card,
html .dp-decomp-box,
html .dp-metric-card,
html .dp-vbox,
html .dp-wc-card,
html .dsc-info-box,
html .dsc-payoff-card,
html .dsc-stat-card,
html .edu-popup,
html .edu-tip,
html .efc-stat-card,
html .fgt-compare-card,
html .fgt-dash-stat,
html .fgt-empty,
html .fgt-notes-card,
html .fgt-output-stat,
html .fhs-breakdown,
html .fhs-card,
html .fhs-hero,
html .filter-box,
html .fl-card,
html .fl-card-coming,
html .fl-card-locked,
html .fmd-card,
html .fmd-modal,
html .fmd-summary-card,
html .fmd-summary-note,
html .fmd-trend-box,
html .game-chart,
html .ggc-hero-mini,
html .ggc-note-card,
html .gm-hero-box,
html .grey-box,
html .hac-card,
html .hac-stat,
html .hm-skeleton,
html .hm-summary,
html .icon-container,
html .iev-card,
html .iev-card-chart,
html .iev-goal-card,
html .iev-goal-empty,
html .iev-insights-empty,
html .iev-insights-wrap,
html .iev-kpi-card,
html .iev-stat-card,
html .iev-summary-card,
html .iq-dash-card,
html .iqm-card,
html .iqm-hero,
html .lab-tab,
html .lab-tile,
html .legal-article,
html .lesson-box,
html .lg-alpha-side,
html .lg-bigstat,
html .lg-card,
html .lg-empty-state,
html .lg-fin-graphic,
html .lg-no-matches,
html .lg-onboarding-card,
html .lg-opt,
html .lg-q-popover,
html .lg-ranks-hero,
html .lg-ranks-stat,
html .lg-stat-mini,
html .lg-stat-tile,
html .lg-term-card,
html .lg-tier-card-here,
html .lid-stat-card,
html .ln-bc,
html .ln-bm-card,
html .ln-bs,
html .ln-level-tab,
html .ln-lib-overview,
html .ln-ot,
html .ln-pause-modal,
html .ln-saved-path,
html .ln-tc,
html .ln-tools-card,
html .lob-bigstat,
html .mbp-card,
html .mcr-card,
html .mcr-chart-card,
html .mcr-method-card,
html .mcr-placeholder,
html .mcr-saved-card,
html .mcr-stat,
html .mf-card,
html .mf-vbox,
html .news-feed,
html .nwt-action-card,
html .nwt-card,
html .nwt-chart,
html .nwt-confirm-box,
html .nwt-stat,
html .osv-be-card,
html .osv-chart-card,
html .osv-kv,
html .osv-learn-card,
html .osv-leg,
html .osv-panel,
html .osv-scenario-summary,
html .pd-modal,
html .pf-action-box,
html .pf-card,
html .pf-dialog,
html .pf-gauge-explainer,
html .pf-journey-step,
html .pf-option,
html .pf-primary-card,
html .pf-vbox,
html .pl-card,
html .pl-vbox,
html .prc-tip,
html .prem-card,
html .ps-card,
html .ps-kpi,
html .ps-modal,
html .ps-pos-card,
html .ps-ticker,
html .pv-card,
html .pv-edu-box,
html .pv-hero,
html .pv-journey,
html .pv-modal,
html .pv-section,
html .pv-stat-card,
html .result-card,
html .resume-card,
html .resume-card-toast,
html .rpr-chart-card,
html .rpr-detail-card,
html .rpr-hero,
html .rpr-interpretation,
html .rpr-stat,
html .rrc-card,
html .rrc-improve,
html .rrc-section,
html .rvb-assumptions,
html .rvb-chart-card,
html .rvb-section,
html .rvb-stat-card,
html .rvb-verdict,
html .sb-sim,
html .scrn-intro,
html .scrn-progress,
html .sct-card,
html .sct-empty,
html .sd-alert-form,
html .sd-card,
html .section-box,
html .sets-card,
html .sets-chart,
html .sets-home-card,
html .sets-kpi,
html .sets-run-banner,
html .sets-run-stat,
html .sgt-stat-card,
html .sl-bench,
html .sl-bench-empty,
html .sl-card,
html .sl-cash-events,
html .sl-loading,
html .sl-perticker,
html .sl-trade-table-wrap,
html .spending-card,
html .spending-modal,
html .spending-stat-card,
html .sr-card,
html .sr-chart-card,
html .sr-metric-card,
html .sr-pause-modal,
html .static-pricing-card-brand,
html .subtrack-card,
html .subtrack-modal,
html .tj-auto-panel,
html .tj-hero-card,
html .tutorial-card,
html .upcoming-events-box,
html .us-dropdown,
html .widget,
html .xirr-banner,
html .xirr-chart-card,
html .xirr-control-card,
html .xirr-edu-card,
html .xirr-hero-card,
html .xirr-interp,
html .xirr-metric-card {
    /* diagonal gloss sheen layered over the frosted fill */
    background: var(--gx-gloss), var(--gx-surface);
    border: 1px solid var(--gx-border);
    background-clip: padding-box;
    -webkit-backdrop-filter: saturate(var(--gx-sat)) blur(var(--gx-blur));
    backdrop-filter: saturate(var(--gx-sat)) blur(var(--gx-blur));
    /* float shadow + bright inset top edge (refraction) + faint inner outline */
    box-shadow: var(--gx-shadow), inset 0 1px 0 var(--gx-top), inset 0 0 0 1px var(--gx-inset);
}

/* ── Safety pins — pop-ups / native controls stay opaque & legible ─────── */
.dropdown-menu,
.offcanvas,
select,
option,
[role="menu"],
[role="listbox"] {
    background-color: var(--color-bg, #fff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] select,
[data-theme="dark"] option,
[data-theme="dark"] [role="menu"],
[data-theme="dark"] [role="listbox"] {
    background-color: var(--ds-slate-800) !important;
}

/* ── Accessibility: reduced transparency → near-opaque, no blur ────────── */
@media (prefers-reduced-transparency: reduce) {
    :root, [data-theme="light"] { --gx-surface: rgb(255 255 255 / 0.96); --gx-blur: 0px; }
    [data-theme="dark"] { --gx-surface: rgb(22 24 30 / 0.97); --gx-blur: 0px; }
    [data-theme="brand"] { --gx-surface: rgb(28 12 36 / 0.97); --gx-blur: 0px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root, [data-theme="light"] { --gx-surface: rgb(255 255 255 / 0.95); }
    [data-theme="dark"] { --gx-surface: rgb(22 24 30 / 0.96); }
}