/* Solstice — the long day, from first light to dusk.
   Light-first: warm cream paper, deep plum ink, a sunrise run of apricot → magenta → dusk indigo. Syne display
   type, Plus Jakarta Sans for reading, DM Mono for labels and figures. Rounded "pebble" panels with a sunrise
   hairline, soft coloured light under them. New-platform motion, all on the compositor: a header that becomes
   a floating pill as you scroll (scroll-driven), a slowly turning sun behind the page, pop-ups that open from
   @starting-style, and a page marker in the rail that stretches like a drop as it travels (theme-solstice.js,
   Web Animations). Dark mode is the same day after sunset. All motion stops under prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="solstice"] {
  color-scheme: light;
  --so-sun: #ff6a3d; --so-rose: #e23d8a; --so-dusk: #6a4cff; --so-ink: #1d1530; --so-cream: #fbf6ef;
  --tint: #ff6a3d; --accent: #e8552a; --accent-2: #d22f7e; --accent-3: #5b3df0;
  --font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --so-display: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
  --so-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --bg: #fbf6ef; --panel: #ffffff; --panel-2: #fff8f1; --border: #eadfd2;
  --text: #1d1530; --muted: #74687f; --input-bg: #ffffff; --link: #c4421c;
  --green: #12875a; --red: #d22a4d; --amber: #b86a00; --orange: #d4511d;
  --radius: 24px; --radius-btn: 14px; --radius-input: 12px;
  --surface: #ffffff; --surface-border-color: #efe4d7;
  --grad-brand: linear-gradient(90deg, #ff8a3d, #e23d8a 55%, #6a4cff);
  --grad-primary: linear-gradient(120deg, #ff7a3d, #e8457f);
  --grad-primary-hover: linear-gradient(120deg, #ff8d55, #ef5a90);
  --grad-success: linear-gradient(120deg, #2fbf7f, #12875a);
  --grad-danger: linear-gradient(120deg, #ef4f6e, #c81e45);
  --grad-warn: linear-gradient(120deg, #ffb347, #f08a12);
  --grad-info: linear-gradient(120deg, #8a74ff, #5b3df0);
  --btn-soft: linear-gradient(180deg, #ffffff, #fff4ea);
  --btn-soft-hover: linear-gradient(180deg, #fff7f0, #ffe9da);
  --app-bg: #fbf6ef;
  --elev: 0 1px 2px rgba(60, 30, 40, .05), 0 18px 40px -28px rgba(160, 60, 40, .35);
  --shadow: 0 18px 40px -28px rgba(160, 60, 40, .35);
  --shadow-glow: 0 0 0 1px rgba(232, 85, 42, .22), 0 16px 34px -18px rgba(226, 61, 138, .4);
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --so-hair: rgba(29, 21, 48, .07);
  --so-lift: 0 26px 50px -24px rgba(226, 61, 138, .38), 0 10px 22px -16px rgba(255, 106, 61, .35);
  --so-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.2%, 1);
  --so-out: cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="solstice"][data-mode="dark"] {
  color-scheme: dark;
  --accent: #ff8a5c; --accent-2: #ff5fa8; --accent-3: #9a87ff; --link: #ffa27d; --tint: #ff8a5c;
  --bg: #120d1c; --panel: #1b1428; --panel-2: #221a31; --border: #322743;
  --text: #f7efe8; --muted: #a596b3; --input-bg: #150f20;
  --green: #4fdc9c; --red: #ff6283; --amber: #ffbd5c; --orange: #ff8a4c;
  --surface: linear-gradient(180deg, #1e162c, #191226); --surface-border-color: #2f2440;
  --btn-soft: linear-gradient(180deg, #241b34, #1e162c); --btn-soft-hover: linear-gradient(180deg, #2c2140, #241b34);
  --app-bg: #120d1c;
  --elev: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 46px -28px rgba(0, 0, 0, .8);
  --shadow-glow: 0 0 0 1px rgba(255, 138, 92, .3), 0 16px 34px -18px rgba(255, 95, 168, .45);
  --so-hair: rgba(255, 255, 255, .07);
  --so-lift: 0 28px 54px -26px rgba(255, 95, 168, .4), 0 12px 24px -16px rgba(255, 138, 92, .35);
}

/* ---------- Motion vocabulary (transform / opacity only) ---------- */
@keyframes so-bloom { from { opacity: 0; transform: translateY(14px) scale(.965); } }
@keyframes so-turn { to { transform: rotate(1turn); } }
@keyframes so-breathe { 50% { opacity: .35; transform: scale(1.18); } }
@keyframes so-rise { from { transform: scaleY(0); opacity: 0; } }
@keyframes so-pill { to { opacity: 1; transform: none; } }
@keyframes so-glint { 0% { opacity: .5; transform: translateY(5px); } }

/* ---------- Page: cream paper under a slowly turning sun ---------- */
html[data-theme="solstice"][data-mode] body { background: var(--app-bg); letter-spacing: -.003em; }
html[data-theme="solstice"][data-mode] ::selection { background: #ffd8c4; color: var(--so-ink); }
html[data-theme="solstice"][data-mode="dark"] ::selection { background: #5a2a4a; color: #fff; }
/* The sun: one disc painted once (a conic sunrise behind a radial fade), then only rotated. */
html[data-theme="solstice"][data-mode] body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none; inset: auto; right: -18vmax; top: -24vmax;
  width: 64vmax; height: 64vmax; border-radius: 50%; mix-blend-mode: normal; opacity: .55; will-change: transform;
  background: conic-gradient(from 0deg, #ffd0a8, #ffb3c9, #d9ccff, #ffe1b8, #ffd0a8);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: so-turn 90s linear infinite;
}
html[data-theme="solstice"][data-mode="dark"] body::before {
  opacity: .3; background: conic-gradient(from 0deg, #ff7a4a, #c43f8a, #4b3aa8, #ff9a5c, #ff7a4a);
}
html[data-theme="solstice"][data-mode] body::after { content: none; }
html[data-theme="solstice"][data-mode] :is(#app-view, #login-view, #modal-root) { position: relative; z-index: 1; }
html[data-theme="solstice"][data-mode] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="solstice"][data-mode] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, var(--panel-2)); border-radius: 99px; border: 3px solid var(--bg); }
html[data-theme="solstice"][data-mode] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header: open at the top, a floating pill once you scroll (scroll-driven) ---------- */
html[data-theme="solstice"][data-mode] .topbar {
  position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 0; box-shadow: none; isolation: isolate;
}
html[data-theme="solstice"][data-mode] .topbar::before {
  content: ""; position: absolute; inset: 6px 12px; z-index: -1; pointer-events: none; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--surface-border-color);
  box-shadow: var(--elev); opacity: 0; transform: scale(.97, .8);
}
@supports (animation-timeline: scroll()) {
  html[data-theme="solstice"][data-mode] .topbar::before { animation: so-pill linear both; animation-timeline: scroll(root block); animation-range: 0 90px; }
}
@supports not (animation-timeline: scroll()) {
  html[data-theme="solstice"][data-mode] .topbar::before { opacity: 1; transform: none; }
}
html[data-theme="solstice"][data-mode] .brand {
  font-family: var(--so-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor; display: inline-flex; align-items: center; gap: 10px;
}
html[data-theme="solstice"][data-mode] .brand::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 120%, #6a4cff 0 30%, transparent 31%), linear-gradient(180deg, #ffb347, #ff6a3d 55%, #e23d8a);
}
html[data-theme="solstice"][data-mode] .crumb.current { background: var(--so-ink); color: var(--so-cream); border-radius: 999px; }
html[data-theme="solstice"][data-mode="dark"] .crumb.current { background: var(--accent); color: #1a0f16; }
html[data-theme="solstice"][data-mode] .crumb-back { border-radius: 999px; }
html[data-theme="solstice"][data-mode] .so-daylight {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--so-mono); font-size: 12px; color: var(--muted); letter-spacing: .02em;
}
html[data-theme="solstice"][data-mode] .so-daylight .so-arc { position: relative; width: 54px; height: 6px; border-radius: 99px; background: var(--so-hair); overflow: hidden; }
html[data-theme="solstice"][data-mode] .so-daylight .so-arc i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(var(--so-day, 0)); transition: transform 1.2s var(--so-out); }
@media (max-width: 760px) { html[data-theme="solstice"][data-mode] .so-daylight { display: none; } }

/* ---------- Type ---------- */
html[data-theme="solstice"][data-mode] :is(h1, h2, h3) { font-family: var(--so-display); letter-spacing: -.02em; font-weight: 800; }
html[data-theme="solstice"][data-mode] .section-head h2 {
  font-size: clamp(30px, 3.6vw, 52px); line-height: .98; letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--text) 40%, var(--accent-2) 75%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="solstice"][data-mode] :is(.stat .label, .sc-bal-label, table thead th, .sc-day, .ov-l) { font-family: var(--so-mono); letter-spacing: .04em; }
html[data-theme="solstice"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }

/* ---------- Surfaces: pebbles with a sunrise hairline and coloured light underneath ---------- */
html[data-theme="solstice"][data-mode] .card {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius);
  box-shadow: var(--elev); transition: transform .55s var(--so-spring), border-color .3s, box-shadow .35s var(--so-out);
}
html[data-theme="solstice"][data-mode] .card::before { height: 3px; opacity: .9; background: var(--grad-brand); }
html[data-theme="solstice"][data-mode] .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 30%, var(--surface-border-color)); box-shadow: var(--so-lift); }
html[data-theme="solstice"][data-mode] .card:active { transform: translateY(-1px) scale(.995); transition-duration: .15s; }
@supports (animation-timeline: view()) {
  html[data-theme="solstice"][data-mode] .station-main .card:not(.station-card) {
    animation: so-bloom linear both; animation-timeline: view(); animation-range: entry 0% entry 50%;
  }
}
html[data-theme="solstice"][data-mode] .stat { border-radius: 20px; border: 1px solid var(--surface-border-color); background: var(--surface); box-shadow: var(--elev); }
html[data-theme="solstice"][data-mode] .stat .value { font-family: var(--so-display); font-weight: 800; letter-spacing: -.03em; }
html[data-theme="solstice"][data-mode] .stat .label { text-transform: uppercase; font-size: 10.5px; }
/* Syne runs wide: the narrow side rail sets its figures in the reading face so long totals fit */
html[data-theme="solstice"][data-mode] .station-rail-right .stat .value { font-family: var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }

/* ---------- Controls ---------- */
html[data-theme="solstice"][data-mode] .btn { border-radius: var(--radius-btn); font-weight: 700; transition: transform .45s var(--so-spring), background .2s, border-color .2s, color .2s; }
html[data-theme="solstice"][data-mode] .btn:hover { transform: translateY(-2px); box-shadow: none; }
html[data-theme="solstice"][data-mode] .btn:active { transform: scale(.97); transition-duration: .12s; }
html[data-theme="solstice"][data-mode] .btn.primary { color: #fff; box-shadow: 0 12px 26px -14px rgba(226, 61, 138, .7); }
html[data-theme="solstice"][data-mode] .btn.ghost:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
html[data-theme="solstice"][data-mode] :is(input, select, textarea) { border-radius: var(--radius-input); transition: border-color .2s, box-shadow .2s; }
html[data-theme="solstice"][data-mode] :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }
html[data-theme="solstice"][data-mode] :is(.chip, .badge) { border-radius: 999px; }

/* ---------- Tables ---------- */
html[data-theme="solstice"][data-mode] table thead th { text-transform: uppercase; font-size: 10.5px; color: var(--muted); font-weight: 500; }
html[data-theme="solstice"][data-mode] table tbody tr { transition: background .15s; }
html[data-theme="solstice"][data-mode] table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
html[data-theme="solstice"][data-mode] .live-gal { color: var(--accent-3); font-family: var(--so-mono); }

/* ---------- Station rail: a sunrise drop marks the open page and stretches as it travels ---------- */
html[data-theme="solstice"][data-mode] .station-rail-left { border-radius: 26px; }
html[data-theme="solstice"][data-mode] .station-tabs-v { position: relative; }
html[data-theme="solstice"][data-mode] .station-tabs-v .tab {
  border-radius: 14px; border: 0; box-shadow: none; background: transparent; position: relative; z-index: 1;
  transition: color .25s, transform .45s var(--so-spring);
}
html[data-theme="solstice"][data-mode] .station-tabs-v .tab:hover { background: transparent; color: var(--text); transform: translateX(3px); }
html[data-theme="solstice"][data-mode] .station-tabs-v .tab.so-on { background: transparent; color: #fff; box-shadow: none; font-weight: 700; }
html[data-theme="solstice"][data-mode] .station-tabs-v .tab.active:not(.so-on) { background: transparent; box-shadow: none; color: var(--text); font-weight: 700; }
html[data-theme="solstice"][data-mode] .station-tabs-v .tab.so-on .muted { color: inherit; opacity: .8; }
html[data-theme="solstice"][data-mode] .so-drop {
  position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; border-radius: 14px;
  background: var(--grad-primary); box-shadow: 0 10px 22px -12px rgba(226, 61, 138, .6);
  transform-origin: 50% 50%; will-change: transform;
}

/* ---------- Calendar: today is a small sun ---------- */
html[data-theme="solstice"][data-mode] .cal .day { border-radius: 18px; transition: transform .5s var(--so-spring), border-color .2s; }
html[data-theme="solstice"][data-mode] .cal .day:hover { transform: translateY(-3px); }
html[data-theme="solstice"][data-mode] .cal .day .num { font-family: var(--so-display); font-weight: 700; }
html[data-theme="solstice"][data-mode] .cal .day.today .num {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: linear-gradient(180deg, #ffb347, #ff6a3d 55%, #e23d8a); box-shadow: 0 6px 16px -8px rgba(226, 61, 138, .8);
}

/* ---------- Dashboard: each station is a morning paper ---------- */
html[data-theme="solstice"][data-mode] .station-grid > * { animation: so-bloom .75s var(--so-spring) backwards; }
html[data-theme="solstice"][data-mode] .station-grid > :nth-child(2) { animation-delay: .08s; }
html[data-theme="solstice"][data-mode] .station-grid > :nth-child(n+3) { animation-delay: .16s; }
html[data-theme="solstice"][data-mode] .station-card { padding: 24px; }
html[data-theme="solstice"][data-mode] .station-card h3 { font-size: 22px; }
html[data-theme="solstice"][data-mode] .station-card .sc-badge { border-radius: 999px; font-family: var(--so-mono); font-weight: 500; }
html[data-theme="solstice"][data-mode] .sc-owed { border-radius: 999px; font-family: var(--so-mono); }
html[data-theme="solstice"][data-mode] .sc-balance.sc-live {
  border-radius: 20px; border: 1px solid var(--so-hair); padding: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, #ffb347 10%, var(--panel-2)), var(--panel-2) 60%);
}
html[data-theme="solstice"][data-mode="dark"] .sc-balance.sc-live { background: linear-gradient(160deg, color-mix(in srgb, #ff8a5c 10%, var(--panel-2)), var(--panel-2) 60%); }
html[data-theme="solstice"][data-mode] .sc-live .sc-bal-num { font-family: var(--so-display); font-weight: 800; font-size: 31px; letter-spacing: -.035em; color: var(--text); }
html[data-theme="solstice"][data-mode] .sc-live .sc-bal-suffix { font-family: var(--so-mono); font-weight: 500; color: var(--muted); font-size: 12px; }
html[data-theme="solstice"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: so-glint .8s var(--so-spring); }
html[data-theme="solstice"][data-mode] .sc-spark rect { transform-box: fill-box; transform-origin: 50% 100%; animation: so-rise .9s var(--so-spring) backwards; }
html[data-theme="solstice"][data-mode] .sc-spark rect:nth-child(3n+2) { animation-delay: .05s; }
html[data-theme="solstice"][data-mode] .sc-spark rect:nth-child(3n+3) { animation-delay: .1s; }
html[data-theme="solstice"][data-mode] .sc-spark rect { fill: color-mix(in srgb, #ff9a4d 40%, transparent); }
html[data-theme="solstice"][data-mode] .sc-spark rect.now { fill: #ff8a3d; }
html[data-theme="solstice"][data-mode] .sc-spark.store rect { fill: color-mix(in srgb, var(--accent-3) 32%, transparent); }
html[data-theme="solstice"][data-mode] .sc-spark.store rect.now { fill: var(--accent-3); }
html[data-theme="solstice"][data-mode] .sc-cash-box { border-radius: 14px; border-color: var(--so-hair); background: var(--panel); }
html[data-theme="solstice"][data-mode] .sc-cash-box.now { border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 8%, var(--panel)); }
html[data-theme="solstice"][data-mode] .station-card .sc-live .sc-cash-v.sc-bal-num { font-family: var(--so-display) !important; font-size: 18px !important; color: var(--text); }
html[data-theme="solstice"][data-mode] .station-card .sc-live .sc-cash-box.now .sc-cash-v.sc-bal-num { color: var(--green); }
html[data-theme="solstice"][data-mode] .sc-flag { border-radius: 999px; font-family: var(--so-mono); }
/* a void or no-sale this shift: a rose chip with a soft halo that breathes */
html[data-theme="solstice"][data-mode] .sc-flag.hot { position: relative; isolation: isolate; color: #fff; background: linear-gradient(120deg, #ef4f6e, #d22f7e); border-color: transparent; }
html[data-theme="solstice"][data-mode] .sc-flag.hot::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, #ef4f6e 45%, transparent); animation: so-breathe 2.6s ease-in-out infinite;
}
html[data-theme="solstice"][data-mode] .sc-live .sc-day { border-top: 1px dashed var(--so-hair); }
html[data-theme="solstice"][data-mode] .sc-prices .gp { border-radius: 999px; font-family: var(--so-mono); }

/* ---------- Feature pages ---------- */
html[data-theme="solstice"][data-mode] .pay-hist-chips > * { border-radius: 999px; }
html[data-theme="solstice"][data-mode] .pay-hist-total { font-family: var(--so-display); letter-spacing: -.03em; }
html[data-theme="solstice"][data-mode] .pump-card { border-radius: 20px; }
html[data-theme="solstice"][data-mode] .pump-progress-track { border-radius: 99px; overflow: hidden; }
html[data-theme="solstice"][data-mode] .pump-progress-fill { border-radius: 99px; }

/* ---------- Pop-ups open from @starting-style: no keyframes, no script ---------- */
html[data-theme="solstice"][data-mode] .modal {
  border-radius: 28px; border: 1px solid var(--surface-border-color);
  transition: opacity .3s var(--so-out), transform .5s var(--so-spring);
}
@starting-style { html[data-theme="solstice"][data-mode] .modal { opacity: 0; transform: translateY(18px) scale(.96); } }
html[data-theme="solstice"][data-mode] .modal-backdrop { background: color-mix(in srgb, var(--so-ink) 32%, transparent); transition: opacity .25s ease-out; }
@starting-style { html[data-theme="solstice"][data-mode] .modal-backdrop { opacity: 0; } }
html[data-theme="solstice"][data-mode] .login-card { border-radius: 30px; animation: so-bloom .7s var(--so-spring); }

/* ---------- Page entrance (content only; the layout holding sticky parts never moves) ---------- */
html[data-theme="solstice"][data-mode] .station-main > * { animation: so-bloom .6s var(--so-out) backwards; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="solstice"][data-mode] .section-head h2 { font-size: clamp(26px, 8vw, 38px); }
  html[data-theme="solstice"][data-mode] .sc-live .sc-bal-num { font-size: 26px; }
  html[data-theme="solstice"][data-mode] body::before { animation: none; }
}

/* ---------- Own motion, not the shared "sculpted forms" layer ----------
   styles.css gives every theme a bevel shadow and quick generic transitions with !important. This theme brings its
   own depth and spring motion, so it opts out here (:root lifts these rules just above that shared block). */
html[data-theme="solstice"][data-mode]:root { --form-shadow: var(--elev); --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="solstice"][data-mode]:root :is(.card, .stat, .station-card, .add-card, .cal .day:not(.empty)) { transition: transform .55s var(--so-spring), border-color .25s !important; }
html[data-theme="solstice"][data-mode]:root :is(.card, .station-card, .add-card):hover { transform: translateY(-4px) !important; --form-shadow: var(--so-lift); }
html[data-theme="solstice"][data-mode]:root .cal .day:not(.empty):hover { transform: translateY(-3px) !important; }
html[data-theme="solstice"][data-mode]:root :is(.btn, .tab, .seg button) { transition: transform .45s var(--so-spring), color .2s, background-color .2s, border-color .2s !important; }
html[data-theme="solstice"][data-mode]:root .btn:active { transform: scale(.96) !important; transition-duration: .12s !important; }
html[data-theme="solstice"][data-mode]:root .btn.primary { box-shadow: 0 12px 26px -14px rgba(226, 61, 138, .7) !important; }
html[data-theme="solstice"][data-mode]:root .station-tabs-v .tab { box-shadow: none !important; }
html[data-theme="solstice"][data-mode]:root .station-tabs-v .tab:active { transform: scale(.98) !important; }

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="solstice"] *, html[data-theme="solstice"] *::before, html[data-theme="solstice"] *::after { animation: none !important; transition: none !important; }
  html[data-theme="solstice"][data-mode] .topbar::before { opacity: 1; transform: none; }
}


/* ---------- Pointers: this theme's own arrow, and a ring for anything you can press (the shared rule in
   styles.css reads --cur-hand everywhere and keeps the I-beam in text fields) ---------- */
html[data-theme="solstice"] { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb347'/%3E%3Cstop offset='1' stop-color='%23e23d8a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3 L4 24 L9.6 18.6 L13.6 27 L17.4 25.4 L13.6 17.2 L21 17.2 Z' fill='url(%23g)' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="solstice"] :is(a, button, .btn, [role="button"], .tab, select, summary, label, .station-card, .add-card, .cal .day:not(.empty), .chip, input[type="checkbox"], input[type="radio"], input[type="range"]) { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffb347' stroke='%23e23d8a' stroke-width='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(0 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(45 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(90 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(135 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(180 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(225 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(270 16 16)'/%3E%3Cline x1='16' y1='3' x2='16' y2='6' stroke='%23e23d8a' stroke-width='2' stroke-linecap='round' transform='rotate(315 16 16)'/%3E%3C/svg%3E") 16 16; }


/* ---------- Selected segment / tab / pill: the theme's pill colour with text that reads on it, in light and dark
   (the shared style puts white text on --grad-primary, which vanishes on a light pill) ---------- */
html[data-theme="solstice"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--grad-primary); color: #1d1530; text-shadow: none; }