/* ===================== The living look (round 5) =====================
   One attribute paints the app: html[data-period] = morning | day | sunset | night, chosen from
   the user's local time and today's real sunrise/sunset (js/livingTheme.js; the pre-paint script
   in index.html sets it before the first frame). Each period has its own page, hero, cards,
   accents, garden sky and celestial body — four looks you can tell apart at a glance:
     morning  soft peach and pale cream, a low sun, terracotta accent
     day      clean mint, sky blue and warm cream, a bright sun, teal-green accent
     sunset   apricot, blush and gentle lavender, the sun on the hills, rose accent
     night    calm navy and lavender with warm cream cards, a moon and stars, periwinkle accent
   Weather is a thin layer on top, only from current data (html[data-sky], html[data-temp]): rain
   greys the sky a little and draws soft rain on the garden, heat warms the accents, cool and cold
   cool them. The period always sets the base (a rainy night is still night).

   Contrast (WCAG AA, test/livingTheme.test.mjs recomputes it from this file): white text on
   --accent ≥ 5:1 and on --accent-strong ≥ 7:1 in every period; --accent-strong on --accent-light
   ≥ 5.7:1; the garden's text (--g-text, --g-muted, --g-ink) ≥ 4.5:1 on every part of its sky;
   --text-secondary ≥ 4.5:1 on every surface. At night the page is navy only behind the signed-in
   app (login text sits on the page itself); cards stay warm cream there.
   Colour changes fade (the colours are registered with @property in app.css); the rain and cloud
   layers only move transform/opacity and stop with reduced motion. */

/* ---- 1. Period palettes (base values) ---- */
html[data-period="morning"] {
  --lv-bg-top: #FFE6D2; --lv-bg-bottom: #FBF0E3;
  --lv-hero-top: #FFD4B8; --lv-hero-bottom: #FFEEDD;
  --lv-surface: #FFFBF6; --lv-surface-soft: #FCEDE0; --lv-surface-muted: #F6E2D1;
  --lv-glass: rgba(255, 251, 246, 0.9); --lv-glass-strong: #FFFDF9; --lv-nav: rgba(255, 250, 244, 0.97);
  --lv-accent: #B5502D; --lv-accent-strong: #943F20; --lv-accent-2: #F3B08E; --lv-accent-light: #FFE4D4;
  --lv-sky-1: #FFD9BF; --lv-sky-2: #FFEBDA; --lv-sky-3: #FFF6EC;
  --lv-hill-back: #F3E7CE; --lv-hill-front: #E4EACD; --lv-grass: #86B77C; --lv-stem: #74AA72;
  --lv-g-text: #823417; --lv-g-muted: #5E4A3E; --lv-g-ink: #2A2019; --lv-g-line: #EFCBB2;
  --lv-sky-glow: radial-gradient(110% 80% at 0% 0%, rgba(255, 190, 140, 0.42), transparent 58%);
  --lv-sun: radial-gradient(circle at 50% 50%, #FFF1C9 0 34%, rgba(255, 205, 140, 0.55) 38%, rgba(255, 196, 150, 0) 70%);
  --lv-plant-glow: rgba(255, 196, 150, 0.5);
  --deco-a: #FFC94D; --deco-b: #FFFFFF; --deco-c: #FF9E86;
  --lv-chrome: #FFE6D2;
}
html[data-period="day"] {
  --lv-bg-top: #E1F3F1; --lv-bg-bottom: #F7F4EA;
  --lv-hero-top: #CCEAF2; --lv-hero-bottom: #EDF7EC;
  --lv-surface: #FFFEFA; --lv-surface-soft: #ECF5EF; --lv-surface-muted: #E1ECE5;
  --lv-glass: rgba(255, 254, 250, 0.9); --lv-glass-strong: #FFFFFF; --lv-nav: rgba(255, 254, 250, 0.97);
  --lv-accent: #18775F; --lv-accent-strong: #125E4B; --lv-accent-2: #8DD2BD; --lv-accent-light: #DCF1EA;
  --lv-sky-1: #CDEBF7; --lv-sky-2: #E4F5F2; --lv-sky-3: #F5FAEF;
  --lv-hill-back: #D6EFDC; --lv-hill-front: #BFE4CA; --lv-grass: #5DB57E; --lv-stem: #53A974;
  --lv-g-text: #135F4C; --lv-g-muted: #4A5A54; --lv-g-ink: #1E2A24; --lv-g-line: #B2DCCB;
  --lv-sky-glow: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.6), transparent 60%);
  --lv-sun: radial-gradient(circle at 50% 50%, #FFF8D8 0 32%, rgba(255, 232, 140, 0.6) 36%, rgba(255, 236, 160, 0) 70%);
  --lv-plant-glow: rgba(255, 255, 230, 0.55);
  --deco-a: #FFE08A; --deco-b: #FFFFFF; --deco-c: #7CCB8A;
  --lv-chrome: #E1F3F1;
}
html[data-period="sunset"] {
  --lv-bg-top: #FFD9C4; --lv-bg-bottom: #F0E4EF;
  --lv-hero-top: #FFCBB0; --lv-hero-bottom: #F2D6E6;
  --lv-surface: #FFFAF7; --lv-surface-soft: #FBECEE; --lv-surface-muted: #F3DFE4;
  --lv-glass: rgba(255, 250, 247, 0.9); --lv-glass-strong: #FFFDFB; --lv-nav: rgba(255, 249, 247, 0.97);
  --lv-accent: #A8446A; --lv-accent-strong: #873553; --lv-accent-2: #F0A6B8; --lv-accent-light: #FBE0E8;
  --lv-sky-1: #FFC8A6; --lv-sky-2: #F8CDD8; --lv-sky-3: #E7DDF3;
  --lv-hill-back: #E6D6E6; --lv-hill-front: #D7CAE2; --lv-grass: #7FA88F; --lv-stem: #6F9E84;
  --lv-g-text: #792B48; --lv-g-muted: #5B4552; --lv-g-ink: #2B1E26; --lv-g-line: #E9BFCD;
  --lv-sky-glow: radial-gradient(120% 70% at 88% 100%, rgba(255, 160, 110, 0.38), transparent 62%);
  --lv-sun: radial-gradient(circle at 50% 50%, #FFD8A0 0 36%, rgba(255, 150, 110, 0.55) 40%, rgba(255, 150, 120, 0) 70%);
  --lv-plant-glow: rgba(255, 170, 140, 0.5);
  --deco-a: #FFB8A1; --deco-b: #FFFFFF; --deco-c: #C7A6E8;
  --lv-chrome: #FFD9C4;
}
html[data-period="night"] {
  /* Login / onboarding (text right on the page): a light moonlit lavender. */
  --lv-bg-top: #E9E8F6; --lv-bg-bottom: #DEDDF0;
  --lv-hero-top: #243168; --lv-hero-bottom: #34427A;
  --lv-surface: #FFF9F0; --lv-surface-soft: #F6EFE5; --lv-surface-muted: #EDE5D9;
  --lv-glass: rgba(255, 249, 240, 0.96); --lv-glass-strong: #FFFCF6; --lv-nav: rgba(255, 249, 240, 0.97);
  --lv-accent: #5257BE; --lv-accent-strong: #3F439F; --lv-accent-2: #AEB2EE; --lv-accent-light: #E5E5FA;
  --lv-sky-1: #C3C4EE; --lv-sky-2: #D8D2F3; --lv-sky-3: #ECE6F4;
  --lv-hill-back: #D3D8F0; --lv-hill-front: #C2C9E8; --lv-grass: #74A596; --lv-stem: #6A9F8E;
  --lv-g-text: #343890; --lv-g-muted: #3F4366; --lv-g-ink: #1E2440; --lv-g-line: #C3CBEA;
  --lv-sky-glow: radial-gradient(1.6px 1.6px at 58% 14%, #FFFFFF 98%, transparent), radial-gradient(1.4px 1.4px at 71% 30%, #FFFFFF 98%, transparent),
    radial-gradient(1.8px 1.8px at 46% 8%, #FFF6D8 98%, transparent), radial-gradient(1.3px 1.3px at 64% 45%, #FFFFFF 98%, transparent),
    radial-gradient(1.5px 1.5px at 38% 26%, #FFFFFF 98%, transparent), radial-gradient(70% 60% at 92% 6%, rgba(255, 236, 180, 0.3), transparent 70%);
  --lv-sun: radial-gradient(circle at 38% 40%, #FFF6D8 0 44%, rgba(255, 246, 216, 0) 47%);
  --lv-plant-glow: rgba(190, 200, 255, 0.55);
  --deco-a: #FFE08F; --deco-b: #C8CEFF; --deco-c: #8E99E6;
  --hero-text: #F4F2FF; --hero-text-muted: #C9CEF3; --hero-chip: rgba(255, 255, 255, 0.14);
  --lv-chrome: #E9E8F6;
}
/* Behind the signed-in app: the calm navy page. The brand, the page-level text and the nav keep
   ≥ 4.5:1 on it. */
html[data-period="night"]:has(#app-content:not([style*="none"])) {
  --lv-bg-top: #1B2650; --lv-bg-bottom: #2B3766;
  --brand-color: #D6DCFF; --brand-mark-bg: rgba(255, 255, 255, 0.12); --brand-mark-ink: #D6DCFF; --page-text-muted: #C9CEF3;
  --lv-chrome: #1B2650;
}
/* Daytime periods: dark hero text (the night band's light text must not leak into a morning). */
html[data-period="morning"], html[data-period="day"], html[data-period="sunset"] {
  --hero-text: var(--text-primary); --hero-text-muted: #474F4A; --hero-chip: rgba(255, 255, 255, 0.72); /* muted ≥ 4.5:1 on every hero tint */
}

/* ---- 2. Weather layer (defaults: nothing) ---- */
html[data-period] {
  --lv-wx-tint: #B7C4D3; --lv-wx-page: 0%; --lv-wx-sky: 0%;
  --lv-temp-tint: #FFFFFF; --lv-temp-page: 0%; --lv-temp-soft: 0%;
  --lv-temp-accent: #9A4A1C; --lv-temp-accent-amt: 0%; --lv-temp-strong: #7A3812;
  --lv-heat: none;
}
html[data-period][data-sky="cloudy"] { --lv-wx-tint: #C9D1DA; --lv-wx-page: 10%; --lv-wx-sky: 18%; }
html[data-period][data-sky="fog"] { --lv-wx-tint: #D6DBE0; --lv-wx-page: 14%; --lv-wx-sky: 26%; }
html[data-period][data-sky="rain"] { --lv-wx-tint: #A9B9CC; --lv-wx-page: 16%; --lv-wx-sky: 30%; }
html[data-period][data-sky="storm"] { --lv-wx-tint: #8E9CB4; --lv-wx-page: 20%; --lv-wx-sky: 36%; }
html[data-period][data-sky="snow"] { --lv-wx-tint: #E4EEF7; --lv-wx-page: 18%; --lv-wx-sky: 34%; }
/* At night the page is already dark: rain only deepens it a touch (never greys the navy out); the
   garden's light sky gets a pale grey-lavender veil instead (its text is dark). */
html[data-period="night"][data-sky] { --lv-wx-tint: #B9BED6; --lv-wx-sky-tint: #B9BED6; }
html[data-period="night"][data-sky="snow"] { --lv-wx-tint: #E4EEF7; --lv-wx-sky-tint: #E4EEF7; }
/* Only the navy app page is deepened; the light night login / onboarding page gets the pale veil. */
html[data-period="night"][data-sky]:has(#app-content:not([style*="none"])) { --lv-wx-tint: #3A4468; }
html[data-period="night"][data-sky="snow"]:has(#app-content:not([style*="none"])) { --lv-wx-tint: #9AA6D0; }
/* Temperature: warmer or cooler accents and soft surfaces. */
html[data-period][data-temp="hot"] {
  --lv-temp-tint: #FFD29A; --lv-temp-page: 10%; --lv-temp-soft: 30%;
  --lv-temp-accent: #A8521A; --lv-temp-strong: #83400F; --lv-temp-accent-amt: 28%;
  --lv-heat: radial-gradient(85% 70% at 100% 0%, rgba(255, 186, 102, 0.34), transparent 62%);
}
html[data-period][data-temp="warm"] { --lv-temp-tint: #FFE2BA; --lv-temp-page: 5%; --lv-temp-soft: 14%; --lv-temp-accent: #A8521A; --lv-temp-strong: #83400F; --lv-temp-accent-amt: 12%; }
html[data-period][data-temp="cool"] {
  --lv-temp-tint: #CFE2F2; --lv-temp-page: 10%; --lv-temp-soft: 28%;
  --lv-temp-accent: #2E6190; --lv-temp-strong: #214A70; --lv-temp-accent-amt: 22%;
}
html[data-period][data-temp="cold"] {
  --lv-temp-tint: #D4E6F7; --lv-temp-page: 16%; --lv-temp-soft: 40%;
  --lv-temp-accent: #2E6190; --lv-temp-strong: #214A70; --lv-temp-accent-amt: 34%;
  --lv-heat: radial-gradient(90% 60% at 50% 0%, rgba(225, 240, 255, 0.55), transparent 65%);
}
html[data-period="night"][data-temp] { --lv-temp-page: 0%; } /* the navy page keeps its calm */

/* ---- 3. The one mapping: every theme token the app uses comes from the period + weather ---- */
html[data-period] {
  --app-bg-top: color-mix(in srgb, color-mix(in srgb, var(--lv-bg-top), var(--lv-wx-tint) var(--lv-wx-page)), var(--lv-temp-tint) var(--lv-temp-page));
  --app-bg-bottom: color-mix(in srgb, color-mix(in srgb, var(--lv-bg-bottom), var(--lv-wx-tint) var(--lv-wx-page)), var(--lv-temp-tint) var(--lv-temp-page));
  --hero-top: color-mix(in srgb, var(--lv-hero-top), var(--lv-wx-tint) var(--lv-wx-page));
  --hero-bottom: color-mix(in srgb, var(--lv-hero-bottom), var(--lv-wx-tint) var(--lv-wx-page));
  --surface: var(--lv-surface);
  --surface-soft: color-mix(in srgb, var(--lv-surface-soft), var(--lv-temp-tint) calc(var(--lv-temp-soft) / 2));
  --surface-muted: var(--lv-surface-muted);
  --surface-glass: var(--lv-glass); --surface-glass-strong: var(--lv-glass-strong);
  --nav-bg: var(--lv-nav);
  --accent: color-mix(in srgb, var(--lv-accent), var(--lv-temp-accent) var(--lv-temp-accent-amt));
  --accent-strong: color-mix(in srgb, var(--lv-accent-strong), var(--lv-temp-strong) var(--lv-temp-accent-amt));
  --accent-2: var(--lv-accent-2);
  --accent-light: color-mix(in srgb, var(--lv-accent-light), var(--lv-temp-tint) var(--lv-temp-soft));
  --nav-active-bg: var(--accent-light);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
}
/* Night: the page is navy, where a dark focus ring alone is ~1.6:1 — a light halo keeps it visible. */
html[data-period="night"] :where(button, a, summary, [role="button"], [tabindex]):focus-visible { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92); }

/* ---- 4. Today hero: the sky strip with the weather chip ---- */
.living-bar { position: relative; z-index: 3; display: flex; justify-content: flex-end; align-items: center; min-height: 44px; margin: -4px 0 -10px; pointer-events: none; }
.living-bar > * { pointer-events: auto; }
/* A 44 px tap box (the app's touch-target rule) around a small 28 px pill. */
button.wx-chip {
  width: auto; min-height: 44px; max-width: 100%; margin: 0; padding: 0 2px; border-radius: var(--radius-pill);
  background: transparent; color: var(--hero-text); box-shadow: none; display: inline-flex; align-items: center;
}
button.wx-chip:hover { background: transparent; }
.wx-pill {
  display: inline-block; min-height: 28px; box-sizing: border-box; padding: 5px 11px; border-radius: var(--radius-pill); max-width: 100%;
  background: var(--hero-chip); color: var(--hero-text); font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: 0.005em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-text) 12%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 150ms ease;
}
button.wx-chip:hover .wx-pill { background: color-mix(in srgb, var(--hero-chip) 70%, #FFFFFF); }
/* Night: a dark backing like the hero date chip (a light veil over the navy hero, near a festival glow,
   took the pale label to ~3.9:1). */
html[data-period="night"] .wx-pill { background: rgba(8, 12, 36, 0.45); color: #E6E9FC; box-shadow: 0 0 0 1px rgba(230, 233, 252, 0.18); }
html[data-period="night"] button.wx-chip[data-kind] .wx-pill { color: #E6E9FC; }
html[data-period="night"] button.wx-chip:hover .wx-pill { background: rgba(8, 12, 36, 0.62); }
button.wx-chip[data-kind="ask"] .wx-pill, button.wx-chip[data-kind="city"] .wx-pill, button.wx-chip[data-kind="none"] .wx-pill { font-weight: 600; color: var(--hero-text-muted); }
button.wx-chip:focus-visible { outline: none; box-shadow: none; }
button.wx-chip:focus-visible .wx-pill { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
html[data-period="night"] button.wx-chip:focus-visible .wx-pill { outline-color: #FFFFFF; }
/* The hero gradient follows the period (and shows a little more of it around the cards). */
html[data-period] .world-hero.today-hero { padding: 4px 10px 10px; }
/* Festival days and a visible moon keep their band above the sky strip (the chip never covers them). */
html[data-period][data-event] .world-hero.today-hero, html[data-period] .world-hero.today-hero:has(.adp-moon, .deco-moon) { padding-top: 17px; }
@media (min-width: 700px) { html[data-period][data-event] .world-hero.today-hero, html[data-period] .world-hero.today-hero:has(.adp-moon, .deco-moon) { padding-top: 20px; } }
html[data-period] .world-hero { background: var(--lv-heat), linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%); }
html[data-period][data-adaptive]:not([data-adaptive="static"]) .world-hero {
  background: var(--lv-heat), radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--adp-glow, transparent) 60%, transparent), transparent 60%),
    linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}
html[data-period="night"][data-adaptive]:not([data-adaptive="static"]) .world-hero {
  background: radial-gradient(70% 55% at 90% 0%, color-mix(in srgb, var(--adp-glow, transparent) 35%, transparent), transparent 70%),
    linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}

/* ---- 5. The garden card: the period's sky, hills and light ---- */
html[data-period] .garden-card {
  --g-bg: linear-gradient(172deg,
    color-mix(in srgb, var(--lv-sky-1), var(--lv-wx-sky-tint, var(--lv-wx-tint)) var(--lv-wx-sky)) 0%,
    color-mix(in srgb, var(--lv-sky-2), var(--lv-wx-sky-tint, var(--lv-wx-tint)) var(--lv-wx-sky)) 52%,
    color-mix(in srgb, var(--lv-sky-3), var(--lv-wx-sky-tint, var(--lv-wx-tint)) calc(var(--lv-wx-sky) / 2)) 100%);
  --g-hill-back: var(--lv-hill-back); --g-hill-front: var(--lv-hill-front); --g-grass: var(--lv-grass); --g-stem: var(--lv-stem);
  --g-text: var(--lv-g-text); --g-muted: var(--lv-g-muted); --g-ink: var(--lv-g-ink); --g-line: var(--lv-g-line);
  background: var(--lv-heat), var(--lv-sky-glow), var(--g-bg);
  isolation: isolate; /* the sun and the weather sit behind the content, above the sky */
  transition: background 800ms ease;
}
html[data-period="night"] .garden-card { --g-leaf: #4F9C7E; --g-leaf-soft: #9DCDBB; }
/* The sun or the moon: top right by day, low on the hills at sunset. */
html[data-period] .garden-card::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  top: 6px; right: 10px; width: 46px; height: 46px; background: var(--lv-sun); opacity: 0.95;
  transition: opacity 800ms ease, transform 800ms ease;
}
html[data-period="morning"] .garden-card::before { top: 16px; right: 16px; width: 44px; height: 44px; }
html[data-period="sunset"] .garden-card::before { top: auto; bottom: 46px; right: 22px; width: 64px; height: 64px; }
html[data-period="night"] .garden-card::before { top: 9px; right: 14px; width: 26px; height: 26px; box-shadow: 0 0 16px 5px rgba(255, 240, 196, 0.35); }
html[data-period][data-sky="cloudy"] .garden-card::before, html[data-period][data-sky="fog"] .garden-card::before { opacity: 0.55; }
html[data-period][data-sky="rain"] .garden-card::before, html[data-period][data-sky="storm"] .garden-card::before,
html[data-period][data-sky="snow"] .garden-card::before { opacity: 0.22; }
/* The weather on the garden: soft rain lines, drifting cloud puffs, a fog veil or snow dots. */
html[data-period] .garden-card::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity 800ms ease;
}
html[data-period][data-sky="rain"] .garden-card::after, html[data-period][data-sky="storm"] .garden-card::after {
  inset: -28px 0 0 0; opacity: 0.9;
  background: repeating-linear-gradient(104deg, transparent 0 13px, rgba(92, 122, 164, 0.24) 13px 14.4px, transparent 14.4px 29px),
    repeating-linear-gradient(104deg, transparent 0 21px, rgba(92, 122, 164, 0.16) 21px 22px, transparent 22px 41px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  animation: lv-rain 1.6s linear infinite;
}
html[data-period="night"][data-sky="rain"] .garden-card::after, html[data-period="night"][data-sky="storm"] .garden-card::after { opacity: 0.75; }
html[data-period][data-sky="cloudy"] .garden-card::after {
  opacity: 1; inset: 0 -20px 0 0;
  background: radial-gradient(38px 15px at 72% 16%, rgba(255, 255, 255, 0.78) 98%, transparent), radial-gradient(22px 16px at 75% 12%, rgba(255, 255, 255, 0.78) 98%, transparent),
    radial-gradient(30px 11px at 44% 9%, rgba(255, 255, 255, 0.62) 98%, transparent), radial-gradient(16px 12px at 46% 6%, rgba(255, 255, 255, 0.62) 98%, transparent);
  animation: lv-drift 26s ease-in-out infinite alternate;
}
html[data-period="night"][data-sky="cloudy"] .garden-card::after { opacity: 0.55; }
html[data-period][data-sky="fog"] .garden-card::after {
  opacity: 1;
  background: linear-gradient(180deg, transparent 8%, rgba(255, 255, 255, 0.38) 30%, transparent 46%, rgba(255, 255, 255, 0.3) 66%, transparent 84%);
}
html[data-period][data-sky="snow"] .garden-card::after {
  inset: -30px 0 0 0; opacity: 0.9;
  background: radial-gradient(2px 2px at 12px 10px, #FFFFFF 98%, transparent) 0 0 / 36px 30px,
    radial-gradient(1.6px 1.6px at 28px 22px, #FFFFFF 98%, transparent) 0 0 / 36px 30px;
  animation: lv-snow 6s linear infinite;
}
@keyframes lv-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-7px, 28px, 0); } }
@keyframes lv-drift { from { transform: translateX(0); } to { transform: translateX(-14px); } }
@keyframes lv-snow { from { transform: translateY(0); } to { transform: translateY(30px); } }
/* A heavy storm darkens the sky a touch more; no flashes (lightning is never drawn). */
html[data-period][data-sky="storm"] .garden-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 18px rgba(43, 50, 70, 0.14); }
@media (prefers-reduced-motion: reduce) { html[data-period] .garden-card::after { animation: none !important; } }
html[data-motion="reduced"][data-period] .garden-card::after, html[data-motion="off"][data-period] .garden-card::after { animation: none !important; }

/* ---- 6. The plant: a soft light of the period behind its leaves ---- */
html[data-period] .mascot-slot[data-mascot-anchor="today"]::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 2%; right: 2%; top: -4%; height: 56%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lv-plant-glow), transparent);
  transition: background 800ms ease;
}