/* ==========================================================================
   themes.css — switchable visual styles ("skins").

   Load AFTER styles.css. Two attributes on <html> drive everything:
     data-theme  light | dark | (absent = follow prefers-color-scheme)
     data-skin   liquid | glass | aurora | brutal | (absent = classic)
   Classic is the absence of data-skin, so nothing below touches it — every
   rule here is scoped under :root[data-skin="…"] (or the swatch selectors of
   the appearance popover at the very end).

   How a skin is built:
   1. Tokens. Each skin overrides the same custom properties styles.css
      defines (--bg, --surface, --text, --accent, --chart-*, --shadow …) for
      light and for dark — dark twice, once for an explicit data-theme="dark"
      and once for the system preference, exactly like styles.css does.
      Charts read these at draw time, so they follow automatically.
      Rules that must hold whatever the skin:
        · --text stays a 6-digit hex: charts.js appends a hex alpha to it.
        · --accent stays in the red family: it IS the "over / at risk" colour.
   2. Skin-only tokens, all prefixed --sk-: the backdrop colours (--sk-c*),
      the big-surface fill (--sk-glass), its opaque fallback, the popover/
      dialog fill (--sk-pop), the text colour on accent fills, and so on.
   3. Decoration rules for the big surfaces and the overlays.

   Hard constraints honoured here:
   · backdrop-filter only on big surfaces (panels, tiles, day cards, the
     header's own ::before, drawers, menus) — chips and rows stay cheap.
   · Never a filter / backdrop-filter / transform on <header> or <dialog>:
     on phones the bottom nav and More sheet are fixed children of the
     header, and the select/date popups are fixed children of the dialog.
     The header's glass lives on header::before; the dialog's frost comes
     from dialog::backdrop blurring the page behind it.
   · Body text ≥ 4.5:1 in every skin × mode, checked against the backdrop
     colours composited under each surface (worst case, no blur).
   · @supports fallbacks swap every translucent fill for an opaque one.
   · All motion stops under prefers-reduced-motion.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Classic tokens for the popover swatch only. The page itself never needs
   them (classic = styles.css untouched); the swatch does, because it has to
   show classic while some other skin is active on <html>.
   --------------------------------------------------------------------------- */

.ap-sw[data-sw="classic"] {
  --bg: #f4f3f1;
  --surface: #ffffff;
  --sk-glass: #ffffff;
  --border: #e4e1dd;
  --border-strong: #d3cfc9;
  --text: #14110f;
  --accent: #af2127;
  --chart-1: #af2127;
  --chart-2: #c96a63;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(20 16 14 / 0.04);
  --sk-backdrop: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ap-sw[data-sw="classic"] {
    --bg: #0a0a0a;
    --surface: #131212;
    --sk-glass: #131212;
    --border: #262323;
    --border-strong: #363232;
    --text: #f2efec;
    --accent: #c9353c;
    --chart-1: #c9353c;
    --chart-2: #9c4a4a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] .ap-sw[data-sw="classic"] {
  --bg: #0a0a0a;
  --surface: #131212;
  --sk-glass: #131212;
  --border: #262323;
  --border-strong: #363232;
  --text: #f2efec;
  --accent: #c9353c;
  --chart-1: #c9353c;
  --chart-2: #9c4a4a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}


/* ===========================================================================
   LIQUID — "Liquid Glass". Very translucent surfaces with a strong blur and
   saturation boost, a bright specular rim (inset highlight in --shadow plus a
   gradient hairline drawn by ::after), soft depth, pill-shaped controls, and a
   vivid five-colour backdrop for the glass to refract. Charts move to an
   indigo ramp so the crimson accent reads as the only alarm on the page.
   =========================================================================== */

:root[data-skin="liquid"],
.ap-sw[data-sw="liquid"] {
  --bg: #e9edf8;
  --surface: rgba(255, 255, 255, 0.6);
  --sunken: rgba(40, 46, 120, 0.075);
  --border: rgba(255, 255, 255, 0.62);
  --border-strong: rgba(40, 46, 120, 0.22);

  --text: #0d0f1e;
  --dim: #393c5a;

  --accent: #a8122c;
  --accent-soft: rgba(255, 214, 222, 0.55);

  --chart-1: #4f46e5;
  --chart-2: #0b8fb3;
  --chart-3: #a29ef5;
  --chart-4: #d9d7fc;

  --ink-1: #0d0f1e;
  --ink-2: #353956;
  --ink-3: #6a6e8c;
  --ink-4: #a6aacb;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(30, 34, 90, 0.06), 0 10px 26px -10px rgba(30, 34, 90, 0.2);
  --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(30, 34, 90, 0.08), 0 24px 50px -14px rgba(30, 34, 90, 0.32);

  --sk-base-2: #f5eef9;
  --sk-c1: #ff9cc6;
  --sk-c2: #84c8ff;
  --sk-c3: #c7b3ff;
  --sk-c4: #ffd585;
  --sk-c5: #8eeed4;
  --sk-glass: rgba(255, 255, 255, 0.3);
  --sk-glass-solid: #f6f7fd;
  --sk-pop: rgba(255, 255, 255, 0.72);
  --sk-rim-hi: rgba(255, 255, 255, 0.95);
  --sk-rim-lo: rgba(255, 255, 255, 0.4);
  --sk-veil: rgba(28, 32, 80, 0.16);
  --sk-blur: 24px;
  --sk-sat: 190%;
  --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(30, 34, 90, 0.1);
  --sk-on-accent: #ffffff;
  --sk-on-chart: #ffffff;
  --sk-backdrop:
    radial-gradient(48% 42% at 10% 14%, var(--sk-c1) 0%, transparent 72%),
    radial-gradient(44% 40% at 90% 10%, var(--sk-c2) 0%, transparent 72%),
    radial-gradient(52% 46% at 82% 90%, var(--sk-c3) 0%, transparent 72%),
    radial-gradient(46% 42% at 14% 92%, var(--sk-c4) 0%, transparent 72%),
    radial-gradient(34% 30% at 52% 50%, var(--sk-c5) 0%, transparent 72%),
    linear-gradient(150deg, var(--bg) 0%, var(--sk-base-2) 100%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="liquid"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) .ap-sw[data-sw="liquid"] {
    --bg: #07080f;
    --surface: rgba(36, 38, 62, 0.58);
    --sunken: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.22);

    --text: #f4f5fc;
    --dim: #cfd2e6;

    --accent: #ff7d84;
    --accent-soft: rgba(110, 18, 32, 0.4);

    --chart-1: #8b84ff;
    --chart-2: #2fc3e3;
    --chart-3: #5a55c4;
    --chart-4: #2d2a5e;

    --ink-1: #f4f5fc;
    --ink-2: #b8bcd6;
    --ink-3: #80849e;
    --ink-4: #4b4e6a;

    --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
    --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.45), 0 26px 54px -14px rgba(0, 0, 0, 0.75);

    --sk-base-2: #0e0a1d;
    --sk-c1: #5a1fb8;
    --sk-c2: #094470;
    --sk-c3: #951a57;
    --sk-c4: #1d3aa6;
    --sk-c5: #0c5a4c;
    --sk-glass: rgba(18, 20, 36, 0.4);
    --sk-glass-solid: #11131f;
    --sk-pop: rgba(22, 24, 42, 0.76);
    --sk-rim-hi: rgba(255, 255, 255, 0.3);
    --sk-rim-lo: rgba(255, 255, 255, 0.1);
    --sk-veil: rgba(0, 0, 0, 0.42);
    --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.4);
    --sk-on-accent: #1d0508;
    --sk-on-chart: #0a0a1c;
    color-scheme: dark;
  }
}

:root[data-skin="liquid"][data-theme="dark"],
:root[data-theme="dark"] .ap-sw[data-sw="liquid"] {
  --bg: #07080f;
  --surface: rgba(36, 38, 62, 0.58);
  --sunken: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text: #f4f5fc;
  --dim: #cfd2e6;

  --accent: #ff7d84;
  --accent-soft: rgba(110, 18, 32, 0.4);

  --chart-1: #8b84ff;
  --chart-2: #2fc3e3;
  --chart-3: #5a55c4;
  --chart-4: #2d2a5e;

  --ink-1: #f4f5fc;
  --ink-2: #b8bcd6;
  --ink-3: #80849e;
  --ink-4: #4b4e6a;

  --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.45), 0 26px 54px -14px rgba(0, 0, 0, 0.75);

  --sk-base-2: #0e0a1d;
  --sk-c1: #5a1fb8;
  --sk-c2: #094470;
  --sk-c3: #951a57;
  --sk-c4: #1d3aa6;
  --sk-c5: #0c5a4c;
  --sk-glass: rgba(18, 20, 36, 0.4);
  --sk-glass-solid: #11131f;
  --sk-pop: rgba(22, 24, 42, 0.76);
  --sk-rim-hi: rgba(255, 255, 255, 0.3);
  --sk-rim-lo: rgba(255, 255, 255, 0.1);
  --sk-veil: rgba(0, 0, 0, 0.42);
  --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sk-on-accent: #1d0508;
  --sk-on-chart: #0a0a1c;
  color-scheme: dark;
}


/* ===========================================================================
   GLASS — classic glassmorphism. Frosted white panels with a 1px light border
   over a soft pastel gradient mesh, plus two crisp gradient orbs (body::after)
   so the frost visibly does something. Calmer than Liquid: smaller blur,
   gentler saturation, ordinary rounded-rectangle controls. Blue chart ramp.
   =========================================================================== */

:root[data-skin="glass"],
.ap-sw[data-sw="glass"] {
  --bg: #eef0f7;
  --surface: rgba(255, 255, 255, 0.66);
  --sunken: rgba(50, 60, 120, 0.07);
  --border: rgba(255, 255, 255, 0.7);
  --border-strong: rgba(50, 60, 120, 0.2);

  --text: #10142a;
  --dim: #3f4560;

  --accent: #b01f2b;
  --accent-soft: rgba(255, 220, 226, 0.5);

  --chart-1: #2f56d0;
  --chart-2: #13897f;
  --chart-3: #8ca5ee;
  --chart-4: #d2dbf7;

  --ink-1: #10142a;
  --ink-2: #3a4060;
  --ink-3: #6b7190;
  --ink-4: #a8afcb;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(31, 38, 100, 0.05), 0 8px 24px -8px rgba(31, 38, 135, 0.14);
  --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(31, 38, 100, 0.06), 0 20px 44px -12px rgba(31, 38, 135, 0.24);

  --sk-base-2: #f6f0f6;
  --sk-c1: #bccdff;
  --sk-c2: #ffcde0;
  --sk-c3: #c4efe1;
  --sk-c4: #ffdfbd;
  --sk-c5: #d9caff;
  --sk-c6: #a9bcff;
  --sk-c7: #f6b3d0;
  --sk-glass: rgba(255, 255, 255, 0.48);
  --sk-glass-solid: #f9fafe;
  --sk-pop: rgba(255, 255, 255, 0.78);
  --sk-rim-hi: rgba(255, 255, 255, 0.85);
  --sk-rim-lo: rgba(255, 255, 255, 0.55);
  --sk-veil: rgba(40, 46, 90, 0.2);
  --sk-blur: 14px;
  --sk-sat: 140%;
  --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(31, 38, 100, 0.08);
  --sk-on-accent: #ffffff;
  --sk-on-chart: #ffffff;
  --sk-backdrop:
    radial-gradient(56% 52% at 0% 0%, var(--sk-c1) 0%, transparent 70%),
    radial-gradient(50% 46% at 100% 0%, var(--sk-c2) 0%, transparent 70%),
    radial-gradient(56% 52% at 100% 100%, var(--sk-c3) 0%, transparent 70%),
    radial-gradient(50% 50% at 0% 100%, var(--sk-c4) 0%, transparent 70%),
    radial-gradient(40% 40% at 50% 46%, var(--sk-c5) 0%, transparent 72%),
    linear-gradient(160deg, var(--bg) 0%, var(--sk-base-2) 100%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) .ap-sw[data-sw="glass"] {
    --bg: #0b0d18;
    --surface: rgba(64, 72, 116, 0.42);
    --sunken: rgba(255, 255, 255, 0.055);
    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.2);

    --text: #eef0fa;
    --dim: #c2c8dc;

    --accent: #ff98a0;
    --accent-soft: rgba(110, 18, 32, 0.38);

    --chart-1: #7f9cff;
    --chart-2: #33c2b3;
    --chart-3: #3f5aa8;
    --chart-4: #23305a;

    --ink-1: #eef0fa;
    --ink-2: #b6bcd4;
    --ink-3: #7c829c;
    --ink-4: #474d6a;

    --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px -8px rgba(0, 0, 0, 0.5);
    --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4), 0 22px 48px -12px rgba(0, 0, 0, 0.65);

    --sk-base-2: #120c1d;
    --sk-c1: #1f2d66;
    --sk-c2: #4a1d55;
    --sk-c3: #0c3a3a;
    --sk-c4: #2c2266;
    --sk-c5: #4d2338;
    --sk-c6: #30287a;
    --sk-c7: #561d45;
    --sk-glass: rgba(255, 255, 255, 0.06);
    --sk-glass-solid: #181c2c;
    --sk-pop: rgba(30, 34, 58, 0.82);
    --sk-rim-hi: rgba(255, 255, 255, 0.24);
    --sk-rim-lo: rgba(255, 255, 255, 0.12);
    --sk-veil: rgba(0, 0, 0, 0.45);
    --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.35);
    --sk-on-accent: #22060a;
    --sk-on-chart: #0a0d1c;
    color-scheme: dark;
  }
}

:root[data-skin="glass"][data-theme="dark"],
:root[data-theme="dark"] .ap-sw[data-sw="glass"] {
  --bg: #0b0d18;
  --surface: rgba(64, 72, 116, 0.42);
  --sunken: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.2);

  --text: #eef0fa;
  --dim: #c2c8dc;

  --accent: #ff98a0;
  --accent-soft: rgba(110, 18, 32, 0.38);

  --chart-1: #7f9cff;
  --chart-2: #33c2b3;
  --chart-3: #3f5aa8;
  --chart-4: #23305a;

  --ink-1: #eef0fa;
  --ink-2: #b6bcd4;
  --ink-3: #7c829c;
  --ink-4: #474d6a;

  --shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px -8px rgba(0, 0, 0, 0.5);
  --shadow-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4), 0 22px 48px -12px rgba(0, 0, 0, 0.65);

  --sk-base-2: #120c1d;
  --sk-c1: #1f2d66;
  --sk-c2: #4a1d55;
  --sk-c3: #0c3a3a;
  --sk-c4: #2c2266;
  --sk-c5: #4d2338;
  --sk-c6: #30287a;
  --sk-c7: #561d45;
  --sk-glass: rgba(255, 255, 255, 0.06);
  --sk-glass-solid: #181c2c;
  --sk-pop: rgba(30, 34, 58, 0.82);
  --sk-rim-hi: rgba(255, 255, 255, 0.24);
  --sk-rim-lo: rgba(255, 255, 255, 0.12);
  --sk-veil: rgba(0, 0, 0, 0.45);
  --sk-control-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.35);
  --sk-on-accent: #22060a;
  --sk-on-chart: #0a0d1c;
  color-scheme: dark;
}


/* ===========================================================================
   AURORA — a slow drifting aurora behind solid-ish surfaces. The light moves
   (two fixed layers, transform-only animation, so it stays on the
   compositor); the surfaces deliberately do NOT blur, so nothing has to be
   re-filtered every frame. Depth comes from a faint coloured glow carried in
   --shadow. Green chart ramp, rose-red accent.
   =========================================================================== */

:root[data-skin="aurora"],
.ap-sw[data-sw="aurora"] {
  --bg: #f1f5fa;
  --surface: rgba(255, 255, 255, 0.9);
  --sunken: rgba(20, 40, 80, 0.06);
  --border: rgba(20, 40, 80, 0.1);
  --border-strong: rgba(20, 40, 80, 0.2);

  --text: #0b1322;
  --dim: #3c475d;

  --accent: #c0283c;
  --accent-soft: rgba(200, 40, 60, 0.09);

  --chart-1: #0b7a62;
  --chart-2: #6a5af0;
  --chart-3: #5cc0a0;
  --chart-4: #c2ecde;

  --ink-1: #0b1322;
  --ink-2: #374259;
  --ink-3: #687389;
  --ink-4: #a9b2c3;

  --radius: 14px;
  --radius-sm: 10px;
  --sk-glow: rgba(56, 190, 160, 0.24);
  --sk-glow-2: rgba(120, 110, 250, 0.16);
  --shadow: 0 1px 2px rgba(20, 40, 80, 0.06), 0 10px 30px -14px var(--sk-glow);
  --shadow-lift: 0 2px 6px rgba(20, 40, 80, 0.08), 0 20px 44px -14px var(--sk-glow), 0 0 0 1px var(--sk-glow-2);

  --sk-base-2: #eef1fb;
  --sk-c1: #bff0dd;
  --sk-c2: #c9d2ff;
  --sk-c3: #ecd0ff;
  --sk-c4: #c4ecff;
  --sk-ray-1: rgba(120, 230, 190, 0.5);
  --sk-ray-2: rgba(170, 180, 255, 0.32);
  --sk-ray-3: rgba(230, 170, 255, 0.36);
  --sk-glass: rgba(255, 255, 255, 0.8);
  --sk-glass-solid: #fbfcfe;
  --sk-pop: #ffffff;
  --sk-rim-hi: rgba(255, 255, 255, 0.9);
  --sk-rim-lo: rgba(20, 40, 80, 0.1);
  --sk-veil: rgba(20, 30, 60, 0.28);
  --sk-on-accent: #ffffff;
  --sk-on-chart: #ffffff;
  --sk-backdrop:
    radial-gradient(70% 42% at 20% 0%, var(--sk-c1) 0%, transparent 70%),
    radial-gradient(60% 46% at 86% 8%, var(--sk-c2) 0%, transparent 72%),
    radial-gradient(60% 46% at 62% 100%, var(--sk-c3) 0%, transparent 72%),
    radial-gradient(50% 40% at 0% 72%, var(--sk-c4) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--sk-base-2) 100%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="aurora"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) .ap-sw[data-sw="aurora"] {
    --bg: #050a14;
    --surface: rgba(16, 24, 40, 0.88);
    --sunken: rgba(255, 255, 255, 0.05);
    --border: rgba(160, 220, 255, 0.12);
    --border-strong: rgba(160, 220, 255, 0.2);

    --text: #eef4fb;
    --dim: #ced7e7;

    --accent: #ff7a83;
    --accent-soft: rgba(255, 110, 125, 0.14);

    --chart-1: #3fd9a8;
    --chart-2: #8f84ff;
    --chart-3: #1f8a6c;
    --chart-4: #12382e;

    --ink-1: #eef4fb;
    --ink-2: #b2bfd2;
    --ink-3: #7a879c;
    --ink-4: #3f4b5e;

    --sk-glow: rgba(56, 230, 180, 0.2);
    --sk-glow-2: rgba(140, 120, 255, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px -14px var(--sk-glow);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 48px -14px var(--sk-glow), 0 0 0 1px var(--sk-glow-2);

    --sk-base-2: #070b1c;
    --sk-c1: #053a35;
    --sk-c2: #2a1f9e;
    --sk-c3: #5a1280;
    --sk-c4: #142a86;
    --sk-ray-1: rgba(40, 220, 160, 0.12);
    --sk-ray-2: rgba(120, 90, 255, 0.2);
    --sk-ray-3: rgba(40, 150, 230, 0.1);
    --sk-glass: rgba(12, 18, 32, 0.8);
    --sk-glass-solid: #0c1220;
    --sk-pop: #0e1424;
    --sk-rim-hi: rgba(160, 240, 220, 0.18);
    --sk-rim-lo: rgba(160, 220, 255, 0.12);
    --sk-veil: rgba(0, 0, 0, 0.5);
    --sk-on-accent: #23060a;
    --sk-on-chart: #04120e;
    color-scheme: dark;
  }
}

:root[data-skin="aurora"][data-theme="dark"],
:root[data-theme="dark"] .ap-sw[data-sw="aurora"] {
  --bg: #050a14;
  --surface: rgba(16, 24, 40, 0.88);
  --sunken: rgba(255, 255, 255, 0.05);
  --border: rgba(160, 220, 255, 0.12);
  --border-strong: rgba(160, 220, 255, 0.2);

  --text: #eef4fb;
  --dim: #ced7e7;

  --accent: #ff7a83;
  --accent-soft: rgba(255, 110, 125, 0.14);

  --chart-1: #3fd9a8;
  --chart-2: #8f84ff;
  --chart-3: #1f8a6c;
  --chart-4: #12382e;

  --ink-1: #eef4fb;
  --ink-2: #b2bfd2;
  --ink-3: #7a879c;
  --ink-4: #3f4b5e;

  --sk-glow: rgba(56, 230, 180, 0.2);
  --sk-glow-2: rgba(140, 120, 255, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px -14px var(--sk-glow);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 22px 48px -14px var(--sk-glow), 0 0 0 1px var(--sk-glow-2);

  --sk-base-2: #070b1c;
  --sk-c1: #053a35;
  --sk-c2: #2a1f9e;
  --sk-c3: #5a1280;
  --sk-c4: #142a86;
  --sk-ray-1: rgba(40, 220, 160, 0.12);
  --sk-ray-2: rgba(120, 90, 255, 0.2);
  --sk-ray-3: rgba(40, 150, 230, 0.1);
  --sk-glass: rgba(12, 18, 32, 0.8);
  --sk-glass-solid: #0c1220;
  --sk-pop: #0e1424;
  --sk-rim-hi: rgba(160, 240, 220, 0.18);
  --sk-rim-lo: rgba(160, 220, 255, 0.12);
  --sk-veil: rgba(0, 0, 0, 0.5);
  --sk-on-accent: #23060a;
  --sk-on-chart: #04120e;
  color-scheme: dark;
}


/* ===========================================================================
   BRUTAL — neo-brutalism. Flat opaque fills, thick ink borders, hard offset
   shadows with no blur anywhere, chunky weights and uppercase labels, bright
   sticker fills on the summary tiles and today's card. In dark mode the ink
   flips to cream so the borders and shadows still read; the sticker fills
   stay bright and carry their own dark text.
   =========================================================================== */

:root[data-skin="brutal"],
.ap-sw[data-sw="brutal"] {
  --bg: #fff3d6;
  --surface: #ffffff;
  --sunken: #f3ead2;
  --border: #111111;
  --border-strong: #111111;

  --text: #111111;
  --dim: #4a4436;

  --accent: #c8102e;
  --accent-soft: #ffe1de;

  --chart-1: #2f4bff;
  --chart-2: #ffad0a;
  --chart-3: #8d9bff;
  --chart-4: #d5dbff;

  --ink-1: #111111;
  --ink-2: #2f2a20;
  --ink-3: #6b6453;
  --ink-4: #b0a78f;

  --radius: 10px;
  --radius-sm: 7px;
  --sk-ink: #111111;
  --sk-shade: #111111;
  --shadow: 3px 3px 0 0 var(--sk-shade);
  --shadow-lift: 6px 6px 0 0 var(--sk-shade);

  --sk-fill-1: #ffd43b;
  --sk-fill-2: #8ee3ff;
  --sk-fill-3: #ffadc8;
  --sk-fill-4: #bdf37e;
  --sk-on-fill: #111111;
  --sk-on-fill-dim: #3b3628;
  --sk-dot: rgba(17, 17, 17, 0.16);
  --sk-glass: #ffffff;
  --sk-glass-solid: #ffffff;
  --sk-pop: #ffffff;
  --sk-veil: rgba(17, 17, 17, 0.45);
  --sk-on-accent: #ffffff;
  --sk-on-chart: #ffffff;
  --sk-backdrop: radial-gradient(circle at 2px 2px, var(--sk-dot) 1.4px, transparent 1.9px) 0 0 / 22px 22px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="brutal"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) .ap-sw[data-sw="brutal"] {
    --bg: #161512;
    --surface: #24221d;
    --sunken: #1c1b17;
    --border: #efe8d6;
    --border-strong: #efe8d6;

    --text: #f8f4ea;
    --dim: #cbc4b1;

    --accent: #ff5f5f;
    --accent-soft: #3d1d1c;

    --chart-1: #7d8cff;
    --chart-2: #ffc23d;
    --chart-3: #4c58a8;
    --chart-4: #2b3058;

    --ink-1: #f8f4ea;
    --ink-2: #d6cfbd;
    --ink-3: #948c78;
    --ink-4: #5d574a;

    --sk-ink: #efe8d6;
    --sk-shade: #efe8d6;
    --sk-dot: rgba(255, 255, 255, 0.09);
    --sk-glass: #24221d;
    --sk-glass-solid: #24221d;
    --sk-pop: #24221d;
    --sk-veil: rgba(0, 0, 0, 0.6);
    --sk-on-accent: #160606;
    --sk-on-chart: #0d0f24;
    color-scheme: dark;
  }
}

:root[data-skin="brutal"][data-theme="dark"],
:root[data-theme="dark"] .ap-sw[data-sw="brutal"] {
  --bg: #161512;
  --surface: #24221d;
  --sunken: #1c1b17;
  --border: #efe8d6;
  --border-strong: #efe8d6;

  --text: #f8f4ea;
  --dim: #cbc4b1;

  --accent: #ff5f5f;
  --accent-soft: #3d1d1c;

  --chart-1: #7d8cff;
  --chart-2: #ffc23d;
  --chart-3: #4c58a8;
  --chart-4: #2b3058;

  --ink-1: #f8f4ea;
  --ink-2: #d6cfbd;
  --ink-3: #948c78;
  --ink-4: #5d574a;

  --sk-ink: #efe8d6;
  --sk-shade: #efe8d6;
  --sk-dot: rgba(255, 255, 255, 0.09);
  --sk-glass: #24221d;
  --sk-glass-solid: #24221d;
  --sk-pop: #24221d;
  --sk-veil: rgba(0, 0, 0, 0.6);
  --sk-on-accent: #160606;
  --sk-on-chart: #0d0f24;
  color-scheme: dark;
}


/* ===========================================================================
   Shared scaffolding for every non-classic skin
   =========================================================================== */

/* The backdrop: one fixed layer under everything. body's own background
   (--bg, from styles.css) still paints the canvas behind it. */
:root[data-skin] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sk-backdrop);
  background-color: var(--bg);
}

/* Full-screen overlays paint --bg in styles.css; give them the same backdrop
   (static — it never animates here) so they read as part of the skin. */
:root[data-skin] :is(.zen, .help) {
  background: var(--sk-backdrop);
  background-color: var(--bg);
}

/* styles.css hard-codes #fff on accent and chart-1 fills. Dark skins use a
   bright accent so it stays readable as text, which needs dark text on top of
   it when it is a fill. :is() takes #btn-add's id weight, so this beats every
   hover variant of these selectors too. */
:root[data-skin] :is(#btn-add, .dialog-actions button:first-child, .tag-risk, .xs-cal-on,
  .ask-book, .rf-armed, .rf-pill-on, .help-try, .demo-fresh) {
  color: var(--sk-on-accent);
}
:root[data-skin] .win-bar.win-fits,
:root[data-skin] .chip-done-on { color: var(--sk-on-chart); }
:root[data-skin] .chip-done-on:hover { color: var(--bg); }

/* Small labels that styles.css paints in --chart-1, sometimes on a --chart-2
   tint. Skin chart ramps are tuned for bars, not for 9px text, so pull the
   label toward --text: darker in light mode, lighter in dark mode. */
:root[data-skin] :is(.window, .window-say, .zen-win-min, .zen-streak, .day:hover .sub .free) {
  color: color-mix(in srgb, var(--chart-1) 35%, var(--text));
}

/* Skins below restyle .day; the drag-and-drop target must still shout. */
:root[data-skin] .day.day-drop { border-color: var(--accent); }

/* Header as a card on desktop for the skins that want one. The glass itself
   lives on header::before (see the note at the top of the file). */
@media (min-width: 761px) {
  :root:is([data-skin="liquid"], [data-skin="glass"], [data-skin="brutal"]) header {
    position: relative;
    z-index: 0;
    padding: 0.5rem 0.55rem 0.5rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
}


/* ===========================================================================
   Glass surfaces — shared by LIQUID and GLASS
   =========================================================================== */

:root:is([data-skin="liquid"], [data-skin="glass"]) :is(.panel, .tile, .day, .detail, .filterbar, .hist-controls, .pin) {
  background: var(--sk-glass);
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
  backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
}
:root:is([data-skin="liquid"], [data-skin="glass"]) :is(.risk-banner, .demo-banner) {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--sk-glass);
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
  backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
}

/* The header's glass, at every width. A pseudo-element may carry the
   backdrop-filter without turning <header> into a containing block. */
:root:is([data-skin="liquid"], [data-skin="glass"]) header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--sk-glass);
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
  backdrop-filter: blur(var(--sk-blur)) saturate(var(--sk-sat));
}

/* Drawers, menus and toasts sit over busy content: the more opaque --sk-pop
   plus a blur of their own. */
:root:is([data-skin="liquid"], [data-skin="glass"]) :is(.chat, .xs-popup, .toast) {
  background: var(--sk-pop);
  -webkit-backdrop-filter: blur(20px) saturate(var(--sk-sat));
  backdrop-filter: blur(20px) saturate(var(--sk-sat));
}

/* Dialogs: never a filter on <dialog> itself (its select/date popups are
   position:fixed children). The ::backdrop frosts the page instead, and the
   dialog's own translucent fill sits on that. ::backdrop custom-property
   inheritance is recent, hence the literal fallbacks. */
:root:is([data-skin="liquid"], [data-skin="glass"]) dialog {
  background: var(--sk-pop);
}
:root:is([data-skin="liquid"], [data-skin="glass"]) dialog::backdrop {
  background: var(--sk-veil, rgb(20 24 60 / 0.22));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

@media (min-width: 761px) {
  :root:is([data-skin="liquid"], [data-skin="glass"]) .palette-veil {
    background: var(--sk-veil, rgb(20 24 60 / 0.22));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
  :root:is([data-skin="liquid"], [data-skin="glass"]) .palette {
    background: var(--sk-pop);
    border-color: var(--border);
  }
}

/* Real buttons (not the many button-elements that are rows and cells) get
   the rim highlight. */
:root:is([data-skin="liquid"], [data-skin="glass"]) :is(.header-tools > button, .actions > button,
  .dialog-actions button, .ghost, .ask-book, .help-try, .chat-send, .rf-mini) {
  box-shadow: var(--sk-control-shadow);
}


/* ===========================================================================
   LIQUID specifics
   =========================================================================== */

/* Pill-shaped controls. :where() keeps this at element weight, so every
   component class that sets its own radius (chips, cells, menu rows) wins. */
:where(:root[data-skin="liquid"]) :is(button, input, select) { border-radius: 999px; }
:root[data-skin="liquid"] :is(#scope, .xs-trigger, .panel-select, .qa-search, .chat-send) { border-radius: 999px; }
:root[data-skin="liquid"] .chat-input { border-radius: 18px; }

/* Desktop: a floating glass toolbar that the page scrolls underneath. */
@media (min-width: 761px) {
  :root[data-skin="liquid"] header {
    position: sticky;
    top: 0.75rem;
    z-index: 30;
    border-radius: 26px;
  }
  :root[data-skin="liquid"] dialog { border-radius: 28px; }
  :root[data-skin="liquid"] .palette { border-radius: 24px; }
  :root[data-skin="liquid"] .chat { border-radius: 26px 0 0 26px; }
}
:root[data-skin="liquid"] .xs-popup { border-radius: 18px; }
:root[data-skin="liquid"] .toast { border-radius: 18px; }
:root[data-skin="liquid"] .tabs { box-shadow: inset 0 1px 2px rgba(20, 24, 60, 0.08); }

/* The specular rim's second half: a gradient hairline, bright top-left,
   clear through the middle, catching light again bottom-right. Drawn by a
   masked ::after over the 1px border so it follows the radius exactly. */
:root[data-skin="liquid"] :is(.panel, .day, .detail) { position: relative; }
:root[data-skin="liquid"] :is(.panel, .day, .detail)::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, var(--sk-rim-hi) 0%, transparent 32%, transparent 62%, var(--sk-rim-lo) 82%, var(--sk-rim-hi) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@media (min-width: 761px) {
  :root[data-skin="liquid"] :is(header, .chat)::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(140deg, var(--sk-rim-hi) 0%, transparent 32%, transparent 62%, var(--sk-rim-lo) 82%, var(--sk-rim-hi) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}


/* ===========================================================================
   GLASS specifics
   =========================================================================== */

/* Two crisp gradient orbs floating over the mesh — the thing the frost is
   visibly frosting. Static: blurred panels over a moving layer would have to
   re-filter every frame. */
:root[data-skin="glass"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 11vmax at 84% 22%, color-mix(in srgb, var(--sk-c6) 55%, var(--bg)) 0%, var(--sk-c6) 98%, transparent 100%),
    radial-gradient(circle 14vmax at 12% 78%, color-mix(in srgb, var(--sk-c7) 55%, var(--bg)) 0%, var(--sk-c7) 98%, transparent 100%);
}
@media (min-width: 761px) {
  :root[data-skin="glass"] dialog { border-radius: 20px; }
  :root[data-skin="glass"] .palette { border-radius: 18px; }
}


/* ===========================================================================
   AURORA specifics
   =========================================================================== */

/* The drift. Both layers are oversized so their edges never show while they
   move; the animation is transform/opacity only. */
:root[data-skin="aurora"] body::before {
  inset: -18vmax;
  animation: sk-aurora-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-skin="aurora"] body::after {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(22% 46% at 30% 30%, var(--sk-ray-1) 0%, transparent 70%),
    radial-gradient(20% 42% at 64% 26%, var(--sk-ray-2) 0%, transparent 70%),
    radial-gradient(30% 34% at 50% 66%, var(--sk-ray-3) 0%, transparent 70%);
  animation: sk-aurora-sway 31s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes sk-aurora-drift {
  from { transform: translate3d(-4%, -3%, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.08); }
}
@keyframes sk-aurora-sway {
  0%   { transform: translate3d(6%, 0, 0) skewX(-8deg); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: translate3d(-6%, 2%, 0) skewX(8deg); opacity: 0.7; }
}
/* Nobody is looking at the sky while a dialog, the palette or a full-screen
   overlay covers it — stop spending frames on it. */
:root[data-skin="aurora"]:has(dialog[open], .zen, .help, .palette-veil) body::before,
:root[data-skin="aurora"]:has(dialog[open], .zen, .help, .palette-veil) body::after {
  animation-play-state: paused;
}

:root[data-skin="aurora"] :is(.panel, .tile, .day, .detail, .filterbar, .hist-controls, .pin) {
  background: var(--sk-glass);
}
:root[data-skin="aurora"] :is(.risk-banner, .demo-banner) {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--sk-glass);
}
:root[data-skin="aurora"] .day.day-today:not(.day-drop) {
  border-color: color-mix(in srgb, var(--chart-1) 45%, var(--border));
}
:root[data-skin="aurora"] :is(dialog, .chat, .xs-popup, .toast) { background: var(--sk-pop); }
:root[data-skin="aurora"] dialog::backdrop { background: var(--sk-veil, rgb(10 16 30 / 0.4)); }
@media (min-width: 761px) {
  :root[data-skin="aurora"] .palette { background: var(--sk-pop); }
  :root[data-skin="aurora"] .palette-veil { background: var(--sk-veil, rgb(10 16 30 / 0.4)); }
}


/* ===========================================================================
   BRUTAL specifics
   =========================================================================== */

:root[data-skin="brutal"] body { font-weight: 500; }

/* No blur anywhere. */
:root[data-skin="brutal"] dialog::backdrop {
  background: var(--sk-veil, rgb(17 17 17 / 0.45));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-skin="brutal"] .more-veil { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Chunky type. */
:root[data-skin="brutal"] :is(.tile-value, .big-num, .detail-big-num, .zen-big-num, .donut-centre,
  .dstat-value, .hist-hours-big, .drow-num-big, .tp-hours, .chip-side-h) {
  font-weight: 800;
  letter-spacing: -0.03em;
}
:root[data-skin="brutal"] :is(.chip-title, .drow-title, .hist-title, .zen-row-title, .ritual-title,
  .rf-title, .hi-head, .pin-title, .risk-item-title, .ask-head, .qa-card-label, .help-card-title,
  .tp-label, dialog h2, .detail-day) {
  font-weight: 700;
}
:root[data-skin="brutal"] :is(.panel-title, .tile-label, .windows-label, .day-head h2, .zen-col-label,
  .help-section-label, .detail-label, .done-label, dialog h3, label, .risk-word, .pin-word) {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The wordmark as a sticker. Not at ≤420px, where styles.css swaps the
   wordmark for the app icon drawn as h1's background. */
@media (min-width: 421px) {
  :root[data-skin="brutal"] h1 {
    padding: 0.12rem 0.55rem;
    border: 2px solid var(--sk-ink);
    border-radius: 6px;
    background: var(--sk-fill-1);
    color: var(--sk-on-fill);
    box-shadow: 2px 2px 0 0 var(--sk-shade);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}
/* On phones h1 grows to fill the bar; a sticker should hug its text. */
@media (min-width: 421px) and (max-width: 760px) {
  :root[data-skin="brutal"] h1 { flex: 0 1 auto; margin-right: auto; }
}

/* Thick ink borders and hard shadows on every card-like surface. --border
   is ink in this skin, so only the widths change here; the semantic left
   edges (risk, done, chart colour) keep their colours from styles.css. */
:root[data-skin="brutal"] :is(.panel, .tile, .day, .detail, .filterbar, .hist-controls, .hi-card, .tp-card) {
  border-width: 3px;
}
:root[data-skin="brutal"] :is(.chip, .hist-row, .drow, .zen-row, .ritual-row, .rf-row, .qa-card,
  .help-card, .zen-promise, .pin, .risk-banner, .demo-banner, .stranded, .dstat) {
  border-width: 2px;
}
:root[data-skin="brutal"] :is(.chip, .hist-row, .drow, .zen-row, .pin, .risk-banner, .stranded, .hi-card) {
  border-left-width: 7px;
}
:root[data-skin="brutal"] :is(.zen-row, .help-card, .zen-promise, .ritual-row, .rf-row) { box-shadow: var(--shadow); }
:root[data-skin="brutal"] .risk-banner { border-color: var(--accent); box-shadow: 3px 3px 0 0 var(--accent); }
:root[data-skin="brutal"] .tag { border: 1.5px solid var(--sk-ink); font-weight: 700; }
:root[data-skin="brutal"] .chip-done { border-width: 2px; }
:root[data-skin="brutal"] .window { border: 2px solid var(--sk-ink); }
:root[data-skin="brutal"] :is(.bar, .daybar-track, .detail-bar) { border: 2px solid var(--sk-ink); }
:root[data-skin="brutal"] .bar { height: 15px; }
:root[data-skin="brutal"] .detail-bar { height: 22px; }

/* Summary tiles become sticker fills (the risk tile stays white and keeps a
   fat red edge so it still reads as the alarm). */
:root[data-skin="brutal"] .tile::before { display: none; }
:root[data-skin="brutal"] .tile-risk::before { display: block; width: 8px; }
:root[data-skin="brutal"] .summary > .tile:nth-child(4n+1):not(.tile-risk) { background: var(--sk-fill-1); }
:root[data-skin="brutal"] .summary > .tile:nth-child(4n+2):not(.tile-risk) { background: var(--sk-fill-2); }
:root[data-skin="brutal"] .summary > .tile:nth-child(4n+3):not(.tile-risk) { background: var(--sk-fill-3); }
:root[data-skin="brutal"] .summary > .tile:nth-child(4n+4):not(.tile-risk) { background: var(--sk-fill-4); }
:root[data-skin="brutal"] .summary > .tile:not(.tile-risk) { color: var(--sk-on-fill); }
:root[data-skin="brutal"] .summary > .tile:not(.tile-risk) :is(.tile-label, .tile-note) { color: var(--sk-on-fill-dim); }

/* Today: a yellow title band across the top of its card. */
:root[data-skin="brutal"] .day.day-today { border-color: var(--sk-ink); box-shadow: var(--shadow); }
:root[data-skin="brutal"] .day.day-today.day-drop { border-color: var(--accent); }
:root[data-skin="brutal"] .day-today > .day-head {
  margin: -0.95rem -1rem 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--sk-fill-1);
  color: var(--sk-on-fill);
  border-bottom: 3px solid var(--sk-ink);
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}
:root[data-skin="brutal"] .day-today .day-date { color: var(--sk-on-fill); }

/* Buttons that are buttons: ink outline, hard shadow, press-down. */
:root[data-skin="brutal"] :is(.header-tools > button, .actions > button, .dialog-actions button, .ghost,
  .ask-book, .help-try, .chat-send, .rf-mini, .report-copy, .hist-export) {
  border-width: 2px;
  border-style: solid;
  border-color: var(--sk-ink);
  box-shadow: 2px 2px 0 0 var(--sk-shade);
  font-weight: 700;
}
:root[data-skin="brutal"] :is(.header-tools > button, .actions > button, .dialog-actions button, .ghost,
  .ask-book, .help-try, .chat-send, .rf-mini, .report-copy, .hist-export):active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
:root[data-skin="brutal"] #scope {
  border: 2px solid var(--sk-ink);
  box-shadow: 2px 2px 0 0 var(--sk-shade);
  font-weight: 700;
}
:where(:root[data-skin="brutal"]) :is(input, select, textarea) { border-width: 2px; border-color: var(--sk-ink); }
:where(:root[data-skin="brutal"]) :is(input, select, textarea):focus { box-shadow: 3px 3px 0 0 var(--accent); }
:root[data-skin="brutal"] .xs-trigger { border-width: 2px; border-color: var(--sk-ink); }
:root[data-skin="brutal"] :is(.xs-popup, .toast) {
  border: 2px solid var(--sk-ink);
  box-shadow: 4px 4px 0 0 var(--sk-shade);
}
:root[data-skin="brutal"] .toast { border-left: 7px solid var(--accent); }

/* Tabs: the active one is a yellow sticker, at every width. */
:root[data-skin="brutal"] .tab { font-weight: 700; }
:root[data-skin="brutal"] .tab-active,
:root[data-skin="brutal"] .tab-active:hover {
  background: var(--sk-fill-1);
  color: var(--sk-on-fill);
  box-shadow: inset 0 0 0 2px var(--sk-ink);
}
:root[data-skin="brutal"] .tab-active::before { display: none; }
:root[data-skin="brutal"] .seg { border: 2px solid var(--sk-ink); background: var(--surface); }
:root[data-skin="brutal"] .seg-on,
:root[data-skin="brutal"] .seg-on:hover { background: var(--sk-fill-1); color: var(--sk-on-fill); box-shadow: none; }

@media (hover: hover) {
  :root[data-skin="brutal"] .day:hover { transform: translate(-2px, -2px); }
  :root[data-skin="brutal"] .day.day-today:hover { box-shadow: var(--shadow-lift); }
  :root[data-skin="brutal"] :is(.header-tools > button, .actions > button, .dialog-actions button, .ghost,
    .ask-book, .help-try, .chat-send, .rf-mini, .report-copy, .hist-export):hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 0 var(--sk-shade);
  }
}

@media (min-width: 761px) {
  :root[data-skin="brutal"] header { border-width: 3px; background: var(--surface); }
  :root[data-skin="brutal"] .tabs {
    background: var(--surface);
    border: 2px solid var(--sk-ink);
    box-shadow: 2px 2px 0 0 var(--sk-shade);
  }
  :root[data-skin="brutal"] dialog {
    border: 3px solid var(--sk-ink);
    border-radius: var(--radius);
    box-shadow: 8px 8px 0 0 var(--sk-shade);
  }
  :root[data-skin="brutal"] .palette-veil {
    background: var(--sk-veil, rgb(17 17 17 / 0.45));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root[data-skin="brutal"] .palette {
    border: 3px solid var(--sk-ink);
    border-radius: var(--radius);
    box-shadow: 8px 8px 0 0 var(--sk-shade);
  }
  :root[data-skin="brutal"] .chat {
    border-left: 3px solid var(--sk-ink);
    box-shadow: -6px 0 0 0 var(--sk-shade);
  }
}


/* ===========================================================================
   Phones (≤ 760px, matching styles.css's phone layout). The header there is a
   sticky full-bleed bar and the stacking context for the bottom nav, the
   More sheet and its veil — no filters on it, ever. Its glass comes from
   header::before (above), so its own background just has to step aside.
   =========================================================================== */

@media (max-width: 760px) {
  :root:is([data-skin="liquid"], [data-skin="glass"]) header { background: transparent; }
  :root[data-skin="aurora"] header { background: var(--sk-glass-solid); }
  :root[data-skin="brutal"] header { background: var(--surface); border-bottom: 3px solid var(--sk-ink); }

  /* Bottom nav and More sheet: fixed bars over scrolling content. */
  :root:is([data-skin="liquid"], [data-skin="glass"]) :is(.tabs, .actions) {
    background: var(--sk-pop);
    -webkit-backdrop-filter: blur(20px) saturate(var(--sk-sat));
    backdrop-filter: blur(20px) saturate(var(--sk-sat));
  }
  :root[data-skin="aurora"] :is(.tabs, .actions) { background: var(--sk-pop); }
  :root[data-skin="brutal"] .tabs { border-top: 3px solid var(--sk-ink); border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
  :root[data-skin="brutal"] .actions { border-top: 3px solid var(--sk-ink); }
  :root[data-skin="brutal"] dialog { border-top: 3px solid var(--sk-ink); }

  /* The sticky action bar of a bottom-sheet dialog sits over the scrolling
     form, so it must not let the fields show through. */
  :root[data-skin]:not([data-skin="brutal"]) .dialog-actions { background: var(--sk-glass-solid); }

  /* The full-screen palette paints --surface over the page with no blur. */
  :root[data-skin] .palette-veil {
    background: var(--sk-backdrop);
    background-color: var(--bg);
  }
}


/* ===========================================================================
   No backdrop-filter support: every glass fill goes opaque, so text never
   sits on an unblurred, busy page.
   =========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:is([data-skin="liquid"], [data-skin="glass"]) :is(.panel, .tile, .day, .detail, .filterbar,
    .hist-controls, .pin, dialog, .chat, .xs-popup, .toast, .palette, .ap-pop) {
    background: var(--sk-glass-solid);
  }
  :root:is([data-skin="liquid"], [data-skin="glass"]) header::before { background: var(--sk-glass-solid); }
  :root:is([data-skin="liquid"], [data-skin="glass"]) .risk-banner {
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--sk-glass-solid);
  }
  @media (max-width: 760px) {
    :root:is([data-skin="liquid"], [data-skin="glass"]) :is(.tabs, .actions) { background: var(--sk-glass-solid); }
  }
}


/* ===========================================================================
   Reduced motion. styles.css's `*` rule does not reach pseudo-elements, so
   the aurora layers are stopped here explicitly.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body::before,
  :root[data-skin] body::after { animation: none !important; transform: none !important; }
  .ap-pop, .ap-scrim { animation: none !important; }
  :root[data-skin="brutal"] .day:hover,
  :root[data-skin="brutal"] :is(.header-tools > button, .actions > button, .dialog-actions button, .ghost,
    .ask-book, .help-try, .chat-send, .rf-mini, .report-copy, .hist-export):is(:hover, :active) {
    transform: none;
  }
}


/* ===========================================================================
   The appearance popover (ui/appearance.js) — every skin, classic included.
   Anchored under the header's theme button on desktop; a bottom sheet at the
   phone breakpoint (the JS adds .ap-sheet).
   =========================================================================== */

.ap-scrim { display: none; }

.ap-pop {
  position: fixed;
  z-index: 1400;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) + 4px);
  background: var(--sk-pop, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-lift);
  transform-origin: top right;
  animation: ap-in 0.2s var(--ease) both;
}
@keyframes ap-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ap-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }

.ap-grip { display: none; }
.ap-section + .ap-section { margin-top: 0.85rem; }
.ap-h {
  margin: 0.1rem 0.25rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.ap-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sunken);
}
.ap-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 32px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}
.ap-mode:hover { background: transparent; color: var(--text); }
.ap-mode[aria-checked="true"],
.ap-mode[aria-checked="true"]:hover {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.ap-mode-glyph { font-size: 0.875rem; line-height: 1; }

.ap-skins { display: flex; flex-direction: column; gap: 3px; }
.ap-skin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 50px;
  padding: 0.4rem 0.6rem 0.4rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.ap-skin:hover { background: var(--sunken); border-color: transparent; }
.ap-skin[aria-checked="true"],
.ap-skin[aria-checked="true"]:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.ap-skin-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.ap-skin-name { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.ap-skin-note { font-size: 0.6875rem; line-height: 1.35; color: var(--dim); }
.ap-check { font-size: 0.8125rem; font-weight: 600; color: var(--accent); opacity: 0; }
.ap-skin[aria-checked="true"] .ap-check { opacity: 1; }

.ap-mode:focus-visible,
.ap-skin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The live swatch: a miniature of the skin in the current mode, built from
   that skin's own tokens (the token blocks above also match .ap-sw). */
.ap-sw {
  position: relative;
  flex: none;
  width: 48px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--sk-backdrop, none);
  background-color: var(--bg);
}
.ap-sw-card {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 8px;
  bottom: -6px;
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: var(--sk-glass, var(--surface));
  box-shadow: var(--shadow);
}
.ap-sw-card::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 56%;
  height: 4px;
  border-radius: 99px;
  background: var(--chart-1);
}
.ap-sw-card::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  width: 36%;
  height: 3px;
  border-radius: 99px;
  background: var(--text);
  opacity: 0.55;
}
.ap-sw-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.ap-sw[data-sw="liquid"] .ap-sw-card,
.ap-sw[data-sw="glass"] .ap-sw-card {
  -webkit-backdrop-filter: blur(3px) saturate(170%);
  backdrop-filter: blur(3px) saturate(170%);
}
.ap-sw[data-sw="liquid"] .ap-sw-card { border-color: var(--sk-rim-hi); border-radius: 9px 9px 0 0; }
.ap-sw[data-sw="brutal"] .ap-sw-card {
  border: 1.5px solid var(--sk-ink);
  border-radius: 3px 3px 0 0;
  box-shadow: 2px 2px 0 0 var(--sk-shade);
}
.ap-sw[data-sw="brutal"] .ap-sw-card::before { background: var(--sk-fill-1); height: 5px; }

/* The popover in each skin. */
:root:is([data-skin="liquid"], [data-skin="glass"]) .ap-pop {
  border-color: var(--border);
  -webkit-backdrop-filter: blur(22px) saturate(var(--sk-sat));
  backdrop-filter: blur(22px) saturate(var(--sk-sat));
}
:root[data-skin="liquid"] .ap-pop { border-radius: 24px; }
:root[data-skin="liquid"] .ap-skin { border-radius: 16px; }
:root[data-skin="brutal"] .ap-pop {
  border: 3px solid var(--sk-ink);
  box-shadow: 6px 6px 0 0 var(--sk-shade);
}
:root[data-skin="brutal"] .ap-modes { border: 2px solid var(--sk-ink); background: var(--surface); }
:root[data-skin="brutal"] .ap-mode { font-weight: 700; }
:root[data-skin="brutal"] .ap-mode[aria-checked="true"],
:root[data-skin="brutal"] .ap-mode[aria-checked="true"]:hover {
  background: var(--sk-fill-1);
  color: var(--sk-on-fill);
  box-shadow: inset 0 0 0 2px var(--sk-ink);
}
:root[data-skin="brutal"] .ap-h { font-weight: 800; }
:root[data-skin="brutal"] .ap-skin[aria-checked="true"],
:root[data-skin="brutal"] .ap-skin[aria-checked="true"]:hover {
  border: 2px solid var(--sk-ink);
  background: var(--sunken);
}
:root[data-skin="brutal"] .ap-skin-name { font-weight: 700; }

/* Phone: a bottom sheet over a scrim. */
.ap-scrim.ap-sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1399;
  background: rgb(10 8 8 / 0.34);
  animation: ap-fade 0.24s var(--ease) both;
}
.ap-pop.ap-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: min(100%, 40rem);
  max-width: none;
  max-height: 85vh;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  transform-origin: bottom center;
  animation: ap-up 0.3s var(--ease) both;
}
.ap-sheet .ap-grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0.15rem auto 0.75rem;
  border-radius: 99px;
  background: var(--border-strong);
}
.ap-sheet .ap-mode { min-height: 44px; font-size: 0.875rem; }
.ap-sheet .ap-skin { min-height: 56px; }
.ap-sheet .ap-skin-name { font-size: 0.9375rem; }
:root[data-skin="brutal"] .ap-pop.ap-sheet { border-bottom: 0; box-shadow: none; }