/* ═══════════════════════════════════════════════════════════════════════════
   wit-aurora-light.css - Witline "Aurora" LIGHT theme (HarmonyOS-inspired)
   ---------------------------------------------------------------------------
   Scope: [data-theme="light"] ONLY. The dark theme is untouched and
   remains exactly as it is. Loaded last so it beats the legacy light rules.

   In light mode: airy light canvas, one blue accent, soft depth (no glow),
   rounded geometry, system sans (no mono chrome), pastel app icons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Note: html/body specificity (0,1,1) beats the legacy `:root` dark block (0,1,0),
   so these light tokens win even though the shell re-injects the theme CSS later. */
html[data-theme="light"],
body[data-theme="light"] {
    /* Aurora tokens */
    --wa-font: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
    --wa-canvas: #eef3fb;
    --wa-canvas-2: #e6ecf6;
    --wa-surface: #ffffff;
    --wa-surface-muted: #f5f7fb;
    --wa-on-surface: #131926;
    --wa-on-surface-variant: #5b6472;
    --wa-outline: rgba(19, 25, 38, 0.12);
    --wa-outline-variant: rgba(19, 25, 38, 0.07);
    --wa-accent: #1f6feb;
    --wa-accent-container: #dbeafe;
    --wa-on-accent: #ffffff;
    --wa-success: #177245;
    --wa-warning: #8a5a00;
    --wa-danger: #b3261e;
    --wa-elev-1: 0 2px 10px rgba(6, 14, 33, 0.08);
    --wa-elev-2: 0 6px 22px rgba(6, 14, 33, 0.10);
    --wa-radius-sm: 10px;
    --wa-radius-md: 14px;
    --wa-radius-lg: 20px;
    --wa-radius-xl: 28px;

    /* Remap the legacy tokens so every existing component reads Aurora in light */
    --holo-bg: var(--wa-canvas);
    --holo-bg-darker: var(--wa-canvas-2);
    --holo-surface: var(--wa-surface);
    --holo-surface-hover: var(--wa-surface-muted);
    --holo-surface-elevated: var(--wa-surface);
    --holo-border: var(--wa-outline);
    --holo-border-active: var(--wa-accent);
    --holo-border-subtle: var(--wa-outline-variant);
    --holo-glow: none;
    --holo-glow-strong: none;
    --holo-glow-cyan: none;

    --neon-primary: var(--wa-accent);
    --neon-secondary: #0f766e;
    --neon-cyan: var(--wa-accent);
    --neon-blue: var(--wa-accent);
    --neon-purple: #6d28d9;
    --neon-success: var(--wa-success);
    --neon-warning: var(--wa-warning);
    --neon-danger: var(--wa-danger);

    --text-primary: var(--wa-on-surface);
    --text-secondary: var(--wa-on-surface-variant);
    --text-dim: #7b8494;
    --text-inverse: #ffffff;

    --font-sans: var(--wa-font);
    --font-mono: var(--wa-font);
}

/* ---- Base canvas (light only) ---- */
/* Match the html element (JS-set) and, reliably, the shell element that carries the
   Blazor-bound data-theme. body:has() covers the document background when only the
   shell element is marked (html stays "cyberpunk" in the initial render). */
html[data-theme="light"],
body[data-theme="light"],
body:has([data-theme="light"]) {
    background: linear-gradient(180deg, var(--wa-canvas) 0%, var(--wa-canvas-2) 100%) !important;
    color: var(--wa-on-surface) !important;
    font-family: var(--wa-font) !important;
    -webkit-font-smoothing: antialiased;
}

/* Light mode is not a starfield: hide the sci-fi canvas. */
[data-theme="light"] .starfield-canvas,
body[data-theme="light"] .starfield-canvas,
body:has([data-theme="light"]) .starfield-canvas { display: none !important; }

/* The shell container itself carries the dark HUD gradient in
   wit-overrides.css:15 (`body, .app-shell { background: linear-gradient(#0a0a1a...) }`).
   That is the canvas. Make it follow the theme in light mode. */
.app-shell[data-theme="light"],
body[data-theme="light"] .app-shell {
    background: linear-gradient(180deg, var(--wa-canvas) 0%, var(--wa-canvas-2) 100%) !important;
    color: var(--wa-on-surface) !important;
}

/* Headings/text: the HUD overrides set light text globally; make them dark in light. */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6,
[data-theme="light"] .holo-main h1, [data-theme="light"] .holo-main h2,
[data-theme="light"] .holo-main h3, [data-theme="light"] .holo-main h4,
[data-theme="light"] .card-header,
body[data-theme="light"] .app-shell .holo-main {
    color: var(--wa-on-surface) !important;
}

/* ---- Shell chrome ---- */
[data-theme="light"] .top-bar,
[data-theme="light"] .top-bar-left,
[data-theme="light"] .top-bar-right {
    background: var(--wa-surface) !important;
    border-bottom: 1px solid var(--wa-outline-variant) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--wa-on-surface) !important;
}

/* ---- Left / right panels ---- */
[data-theme="light"] .category-tree-panel,
[data-theme="light"] .subjectmatter-panel {
    background: var(--wa-surface) !important;
    color: var(--wa-on-surface) !important;
    border-right: 1px solid var(--wa-outline-variant);
}
[data-theme="light"] .tree-panel-header { border-bottom: 1px solid var(--wa-outline-variant) !important; }
[data-theme="light"] .tree-panel-title { color: var(--wa-on-surface) !important; }
[data-theme="light"] .tree-search { border-bottom: 1px solid var(--wa-outline-variant) !important; }
[data-theme="light"] .tree-search-input {
    background: var(--wa-surface-muted) !important;
    border: 1px solid var(--wa-outline) !important;
    color: var(--wa-on-surface) !important;
}
[data-theme="light"] .tree-node-header:hover,
[data-theme="light"] .tree-leaf:hover { background: rgba(31, 111, 235, 0.06) !important; }
[data-theme="light"] .tree-node-header.expanded { background: rgba(31, 111, 235, 0.05) !important; }
[data-theme="light"] .tree-node-label { color: var(--wa-on-surface) !important; }
[data-theme="light"] .tree-node-count {
    color: var(--wa-on-surface-variant) !important;
    background: var(--wa-surface-muted) !important;
}
[data-theme="light"] .tree-leaf.active {
    background: var(--wa-accent-container) !important;
    color: var(--wa-accent) !important;
    border-right: 2px solid var(--wa-accent) !important;
}

/* ---- Cards / panels ---- */
[data-theme="light"] .card,
[data-theme="light"] .glass-panel,
[data-theme="light"] .holo-card {
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-outline-variant) !important;
    border-radius: var(--wa-radius-lg) !important;
    box-shadow: var(--wa-elev-1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---- Controls ---- */
[data-theme="light"] .btn,
[data-theme="light"] .neon-btn {
    border-radius: var(--wa-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--wa-font) !important;
    font-weight: 600;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control {
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-outline) !important;
    border-radius: var(--wa-radius-sm) !important;
    color: var(--wa-on-surface) !important;
    box-shadow: none !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .form-control:focus {
    border-color: var(--wa-accent) !important;
    box-shadow: 0 0 0 3px var(--wa-accent-container) !important;
}

/* ---- Nav ---- */
[data-theme="light"] .nav-link { box-shadow: none !important; }
[data-theme="light"] .nav-link.active {
    background: var(--wa-accent-container) !important;
    color: var(--wa-accent) !important;
    border-radius: var(--wa-radius-sm);
}

/* ═══ Aurora home components (opt-in wa-* classes; light mode only) ═══ */
[data-theme="light"] .wa-home {
    padding: 26px 30px 30px;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--wa-on-surface);
    font-family: var(--wa-font);
}
[data-theme="light"] .wa-greeting { font-size: 15px; color: var(--wa-on-surface-variant); margin-bottom: 2px; }
[data-theme="light"] .wa-clock { font-size: 54px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
[data-theme="light"] .wa-date { font-size: 14px; color: var(--wa-on-surface-variant); margin-top: 4px; }

[data-theme="light"] .wa-capsule {
    display: flex; align-items: center; gap: 14px;
    background: var(--wa-surface);
    border-radius: var(--wa-radius-xl);
    padding: 15px 18px;
    box-shadow: var(--wa-elev-1);
    margin: 18px 0;
}
[data-theme="light"] .wa-capsule .wa-badge {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--wa-accent); color: var(--wa-on-accent);
    display: flex; align-items: center; justify-content: center; flex: none;
}
[data-theme="light"] .wa-capsule .wa-t { font-weight: 600; font-size: 16px; }
[data-theme="light"] .wa-capsule .wa-s { color: var(--wa-on-surface-variant); font-size: 13px; }

[data-theme="light"] .wa-widgets {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
[data-theme="light"] .wa-widget {
    background: var(--wa-surface); border-radius: var(--wa-radius-lg);
    padding: 16px; box-shadow: var(--wa-elev-1);
}
[data-theme="light"] .wa-widget .wa-k {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wa-on-surface-variant); margin-bottom: 10px;
}
[data-theme="light"] .wa-widget .wa-big { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
[data-theme="light"] .wa-widget .wa-sub { font-size: 13px; color: var(--wa-on-surface-variant); margin-top: 3px; }

[data-theme="light"] .wa-section-title {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wa-on-surface-variant); margin: 6px 0 12px;
}
[data-theme="light"] .wa-grid {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px 14px; margin-bottom: 20px;
}
@media (max-width: 1100px) { [data-theme="light"] .wa-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 820px)  { [data-theme="light"] .wa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

[data-theme="light"] .wa-app {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 12px; color: var(--wa-on-surface); cursor: pointer; text-align: center;
}
[data-theme="light"] .wa-app .wa-icon {
    width: 62px; height: 62px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
[data-theme="light"] .wa-app:hover .wa-icon { transform: translateY(-3px); box-shadow: var(--wa-elev-2); }

[data-theme="light"] .wa-dock {
    display: flex; gap: 14px; justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid var(--wa-outline-variant);
    border-radius: var(--wa-radius-xl); padding: 14px;
}
[data-theme="light"] .wa-dock .wa-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}

/* ── Icon contrast (Aurora) ───────────────────────────────────────────────
   The HUD theme paints chrome icons with pale/neon values and glow shadows,
   which wash out on light surfaces. In light mode icons take the dark
   on-surface (or the accent when active), like HarmonyOS. Semantic colours
   set inline (success/warning/danger) are left alone. */
[data-theme="light"] .top-bar-btn,
[data-theme="light"] .top-bar-menu-btn,
[data-theme="light"] .top-bar-panel-btn,
[data-theme="light"] .holo-icon,
[data-theme="light"] .holo-title,
[data-theme="light"] .holo-collapse-btn,
[data-theme="light"] .tree-node-icon,
[data-theme="light"] .tree-caret,
[data-theme="light"] .command-prefix,
[data-theme="light"] .suggestion-icon,
[data-theme="light"] .ds-search-icon,
[data-theme="light"] .ds-prompt-icon,
[data-theme="light"] .ds-fleet-icon,
[data-theme="light"] .holo-nav-icon,
[data-theme="light"] .holo-domain-chip i {
    color: var(--wa-on-surface-variant) !important;
    text-shadow: none !important;
}
[data-theme="light"] .top-bar-btn i,
[data-theme="light"] .top-bar-btn .fa-solid,
[data-theme="light"] .top-bar-btn .bi { text-shadow: none !important; }

/* Active / primary icons use the accent (contrast > 5:1 on white). */
[data-theme="light"] .top-bar-menu-btn i,
[data-theme="light"] .top-bar-panel-btn i {
    color: var(--wa-on-surface) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
[data-theme="light"] .top-bar-menu-btn.active i,
[data-theme="light"] .top-bar-panel-btn.active i,
[data-theme="light"] .top-bar-btn.active,
[data-theme="light"] .top-bar-btn.active i,
[data-theme="light"] .holo-nav-item.active .holo-nav-icon,
[data-theme="light"] .tree-leaf.active i,
[data-theme="light"] .nav-link.active i,
[data-theme="light"] .tree-node-header.expanded .tree-caret,
[data-theme="light"] .ds-tab.active i,
[data-theme="light"] .ds-mode-chip.active i {
    color: var(--wa-accent) !important;
}

/* Kill the neon text-glow that reads as a halo on light surfaces. */
[data-theme="light"] .ambient-text.neon-text,
[data-theme="light"] .neon-text { text-shadow: none !important; }

/* Icon tiles keep a saturated glyph on their pastel tile. */
[data-theme="light"] .wa-icon i,
[data-theme="light"] .wa-icon svg { color: inherit !important; }

/* ── Content surfaces and their icons ─────────────────────────────────────
   wit-overrides.css sets pale text (#e2e8f0 !important) on cards, tables and
   panels, and icons inherit it, so they wash out on light. Make surface text
   dark and their icons dark/neutral in light mode. */
[data-theme="light"] .card,
[data-theme="light"] .glass-panel,
[data-theme="light"] .holo-card,
[data-theme="light"] .dash-card,
[data-theme="light"] [class*="bg-white"],
[data-theme="light"] .table,
[data-theme="light"] .wit-table,
[data-theme="light"] .dash-table,
[data-theme="light"] [data-wit-component] .table,
[data-theme="light"] [data-wit-component] .wit-table,
[data-theme="light"] [data-wit-component] .dash-table,
[data-theme="light"] .list-group-item,
[data-theme="light"] .dropdown-menu {
    color: var(--wa-on-surface) !important;
}
[data-theme="light"] .card i, [data-theme="light"] .card .bi,
[data-theme="light"] .card .fa-solid, [data-theme="light"] .card [class^="fa-"], [data-theme="light"] .card [class*=" fa-"],
[data-theme="light"] .glass-panel i, [data-theme="light"] .glass-panel .bi,
[data-theme="light"] .holo-card i, [data-theme="light"] .holo-card .bi,
[data-theme="light"] .dash-card i, [data-theme="light"] .dash-card .bi,
[data-theme="light"] .table i, [data-theme="light"] .table .bi,
[data-theme="light"] .wit-table i, [data-theme="light"] .wit-table .bi,
[data-theme="light"] .list-group-item i, [data-theme="light"] .dropdown-menu i {
    color: var(--wa-on-surface-variant) !important;
    text-shadow: none !important;
}
[data-theme="light"] .table thead th,
[data-theme="light"] .wit-table thead th,
[data-theme="light"] .dash-table thead th {
    color: var(--wa-on-surface-variant) !important;
    background: var(--wa-surface-muted) !important;
    border-color: var(--wa-outline-variant) !important;
}
[data-theme="light"] .table td,
[data-theme="light"] .wit-table td,
[data-theme="light"] .dash-table td,
[data-theme="light"] .list-group-item,
[data-theme="light"] .dropdown-item {
    color: var(--wa-on-surface) !important;
    border-color: var(--wa-outline-variant) !important;
}

/* Icons: keep full opacity in light (the HUD theme dims them, which reads as low contrast). */
[data-theme="light"] .fa-solid, [data-theme="light"] .fa-regular, [data-theme="light"] .fa-light,
[data-theme="light"] .fas, [data-theme="light"] .far, [data-theme="light"] .bi {
    opacity: 1 !important;
}

/* ── Panels (left / right) ──────────────────────────────────────────────── */
[data-theme="light"] .holo-panel {
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-outline-variant) !important;
    border-radius: var(--wa-radius-lg);
    box-shadow: var(--wa-elev-1);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    margin: 8px;
}
[data-theme="light"] .holo-panel::before { display: none !important; } /* kill the neon top line */
[data-theme="light"] .holo-panel-header,
[data-theme="light"] .tree-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wa-outline-variant) !important;
}
[data-theme="light"] .holo-title,
[data-theme="light"] .tree-panel-title { font-weight: 600; font-size: 15px; color: var(--wa-on-surface) !important; }
[data-theme="light"] .holo-section { padding: 12px; }
[data-theme="light"] .holo-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--wa-on-surface-variant) !important; }
[data-theme="light"] .tree-leaf,
[data-theme="light"] .holo-nav-item,
[data-theme="light"] .holo-domain-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--wa-radius-sm);
    color: var(--wa-on-surface) !important; text-align: left;
}
[data-theme="light"] .tree-leaf:hover,
[data-theme="light"] .holo-nav-item:hover,
[data-theme="light"] .holo-domain-chip:hover { background: rgba(31, 111, 235, 0.06) !important; }
[data-theme="light"] .tree-leaf.active,
[data-theme="light"] .holo-nav-item.active,
[data-theme="light"] .holo-domain-chip.active {
    background: var(--wa-accent-container) !important;
    color: var(--wa-accent) !important;
    border: 1px solid transparent !important;
    border-right: none !important;
    font-weight: 600;
}
[data-theme="light"] .tree-node-header { border-radius: var(--wa-radius-sm); }
[data-theme="light"] .tree-node-header:hover { background: rgba(31, 111, 235, 0.05) !important; }
[data-theme="light"] .tree-node-label,
[data-theme="light"] .holo-nav-label { color: var(--wa-on-surface) !important; }
[data-theme="light"] .tree-node-count,
[data-theme="light"] .holo-badge {
    background: var(--wa-surface-muted) !important; color: var(--wa-on-surface-variant) !important;
    border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
[data-theme="light"] .tree-search-input { border-radius: var(--wa-radius-sm) !important; }

/* ── Taskbar (bottom dock) ──────────────────────────────────────────────── */
[data-theme="light"] .task-bar {
    background: rgba(255, 255, 255, 0.86) !important;
    border-top: 1px solid var(--wa-outline-variant) !important;
    box-shadow: 0 -2px 16px rgba(6, 14, 33, 0.06) !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 60px;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .task-bar-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 56px; min-height: 48px; padding: 6px 10px;
    border-radius: var(--wa-radius-md);
    color: var(--wa-on-surface-variant) !important;
    background: transparent !important; box-shadow: none !important;
}
[data-theme="light"] .task-bar-btn:hover { background: rgba(31, 111, 235, 0.07) !important; color: var(--wa-on-surface) !important; }
[data-theme="light"] .task-bar-btn .task-btn-icon { font-size: 17px; line-height: 1; }
[data-theme="light"] .task-bar-btn .task-btn-label { font-size: 10.5px; line-height: 1.1; color: currentColor; }
[data-theme="light"] .task-bar-btn.primary {
    background: var(--wa-accent) !important;
    color: var(--wa-on-accent) !important;
    box-shadow: var(--wa-elev-1) !important;
}
[data-theme="light"] .taskbar-toggle {
    color: var(--wa-on-surface-variant) !important;
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-outline-variant);
    border-radius: 999px;
}

/* ── Home centre search: ChatGPT-style input ────────────────────────────── */
[data-theme="light"] .ds-search-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 26px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    padding: 16px 18px 12px !important;
}
[data-theme="light"] .ds-search-box.has-results { border-radius: 26px 26px 0 0 !important; }
[data-theme="light"] .ds-search-row { gap: 10px; }
[data-theme="light"] .ds-search-input {
    border: none !important; background: transparent !important;
    color: var(--wa-on-surface) !important; font-size: 16px !important; box-shadow: none !important;
}
[data-theme="light"] .ds-search-input::placeholder { color: #9aa0a6 !important; }
[data-theme="light"] .ds-search-icon { color: #9aa0a6 !important; }
[data-theme="light"] .ds-mic-btn { color: #6b7280 !important; background: transparent !important; }
[data-theme="light"] .ds-clear-btn { color: #6b7280 !important; }
[data-theme="light"] .ds-search-btn {
    width: 36px; height: 36px; border-radius: 999px !important;
    background: #0d0d0d !important; color: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important;
}
[data-theme="light"] .ds-search-btn:disabled { background: #e5e7eb !important; color: #b6bcc4 !important; }
[data-theme="light"] .ds-mode-chip {
    border-radius: 999px !important; background: var(--wa-surface-muted) !important;
    color: var(--wa-on-surface-variant) !important; border: 1px solid var(--wa-outline-variant) !important;
}
[data-theme="light"] .ds-mode-chip.active { background: var(--wa-accent-container) !important; color: var(--wa-accent) !important; }
[data-theme="light"] .ds-results-dropdown {
    background: #ffffff !important; border: 1px solid #e5e7eb !important;
    border-top: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .ds-result-title { color: var(--wa-on-surface) !important; }
[data-theme="light"] .ds-result-line2, [data-theme="light"] .ds-section-header { color: var(--wa-on-surface-variant) !important; }

/* ── Favourites row (Android-style, directly under the search bar) ──────── */
[data-theme="light"] .ds-favourites {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 20px 0 8px;
}
[data-theme="light"] .ds-fav {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer; padding: 0;
}
[data-theme="light"] .ds-fav-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; box-shadow: var(--wa-elev-1);
    transition: transform .15s ease;
}
[data-theme="light"] .ds-fav:hover .ds-fav-icon { transform: translateY(-2px); }
[data-theme="light"] .ds-fav-label { font-size: 11px; color: var(--wa-on-surface-variant); }

@media (prefers-reduced-motion: reduce) {
    [data-theme="light"] * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}