/* CIRRUS THEME
   Every design value lives here as a CSS custom property: colors,
   gradients, shadows, radii, spacing, type, and durations.
   Component stylesheets only reference these tokens. */

:root {
  /* ---- Type ---- */
  /* M PLUS Rounded 1c: free rounded gothic, the closest free match to the
     rounded console system face the references use. */
  --font-ui: 'M PLUS Rounded 1c', Helvetica, Arial, sans-serif;
  --font-digital: "DSEG7 Classic", 'M PLUS Rounded 1c', sans-serif;

  /* ---- Sky behind the desktop Home menu (day / night) ---- */
  --focus-ring-night: rgba(140, 200, 255, 0.9);
  --focus-ring-day: rgba(255, 255, 255, 0.95);
  --sky-night: linear-gradient(to bottom,
      #2258cc 0%,
      #1640a8 20%,
      #0e2578 45%,
      #050f48 75%,
      #010820 100%);
  --sky-day: linear-gradient(to bottom,
      rgba(31, 111, 208, 0.88) 0%,
      rgba(58, 146, 228, 0.82) 30%,
      rgba(90, 177, 240, 0.76) 62%,
      rgba(156, 212, 250, 0.68) 85%,
      rgba(191, 230, 255, 0.62) 100%);
  --sky-day-opacity: 0.92;
  --sky-base-night: #010820;
  --sky-base-day: #3a92e4;
  --focus-ring: var(--focus-ring-night);
  --sky-base: var(--sky-base-night);

  /* ---- Cyan pill controls ---- */
  --wii-pill-rest-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(54, 195, 242, 0.25),
    0 0 0 1px rgba(54, 195, 242, 0.35),
    0 3px 9px rgba(0, 0, 0, 0.32);
  --wii-searching-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(54, 195, 242, 0.25),
    0 0 0 1.5px rgba(52, 190, 237, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.28),
    0 0 10px 2px rgba(52, 190, 237, 0.42),
    0 0 18px 4px rgba(52, 190, 237, 0.26);

  /* ---- Alerts: red for warnings, orange for watches and advisories ---- */
  --alert-text: #ffffff;
  --alert-warning-face: linear-gradient(180deg, #ec5045 0%, #bb1a10 42%, #8e0e07 100%);
  --alert-warning-strip: linear-gradient(180deg, #a5150c 0%, #6c0a05 100%);
  --alert-warning-edge: #4f0703;
  --alert-watch-face: linear-gradient(180deg, #f6a43a 0%, #b35600 42%, #8f4400 100%);
  --alert-watch-strip: linear-gradient(180deg, #a35000 0%, #6d3500 100%);
  --alert-watch-edge: #4e2600;
  --alert-bar-font: 17px;
  --alert-icon-size: 22px;
  --alert-more-border: rgba(255, 255, 255, 0.85);
  --alert-list-width: 720px;
  --alert-detail-width: 820px;
  --alert-tile-height: 72px;
  --alert-meta-text: #ffe0dc;
  --alert-instruction-bg: rgba(6, 18, 70, 0.6);
  --alert-instruction-border: rgba(255, 170, 160, 0.55);
  --alert-instruction-accent: #e0584f;
  --alert-instruction-accent-width: 5px;
  --sev-warning-bg: #e0584f;
  --sev-warning-text: #3a0c0a;
  --sev-watch-bg: #ef9f27;
  --sev-watch-text: #4a2a02;
  --sev-advisory-bg: #e0b000;
  --sev-advisory-text: #463600;
  --sev-statement-bg: #36c3f2;
  --sev-statement-text: #0c3247;
  --sev-unknown-bg: #c8d2dc;
  --sev-unknown-text: #2a3844;
  --badge-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* ---- Motion ---- */
  --nintendo-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nintendo-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Springs: real damped-spring curves (sampled into linear() below) with
     overshooting cubic-bezier fallbacks for browsers without linear().
     pop: buttons and cards landing (about 13% overshoot)
     slide: views arriving (about 5%)
     hover: things growing under the pointer (about 10%) */
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-slide: cubic-bezier(0.25, 1.2, 0.5, 1);
  --spring-hover: cubic-bezier(0.3, 1.45, 0.6, 1);
  --dur-spring-pop: 560ms;
  --dur-spring-slide: 720ms;
  --dur-spring-hover: 420ms;
  /* things leaving speed up as they go; reduced motion uses plain fades */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-fade: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-exit: 180ms;
  --dur-fade-quick: 200ms;
  /* a view slide: fast away, a little past the spot, then settle back */
  --ease-slide: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-view-slide: 640ms;
  /* easter eggs: the winking sun and snow caps on the frame */
  --sun-face-size: 34%;
  --sun-face-ink: #6b3a00;
  --sun-face-cheek: rgba(255, 120, 90, 0.55);
  --sun-face-stroke: 2.2;
  --dur-wink: 900ms;
  --snow-cap-height: 9px;
  --snow-cap-inset: 7%;
  --snow-cap-pill-inset: 20%;
  --snow-cap:
    linear-gradient(#ffffff, #ffffff) top / 100% 45% no-repeat,
    radial-gradient(circle at 50% 30%, #ffffff 62%, rgba(255, 255, 255, 0) 66%) 0 0 / 14px 100% repeat-x;
  --snow-cap-shadow: drop-shadow(0 1px 1px rgba(60, 90, 130, 0.6)) drop-shadow(0 2px 2px rgba(60, 90, 130, 0.25));
  --dur-snow-settle: 6s;
  /* idle attract: the satellite picture slowly zooms in and pans, then back */
  --dur-attract-pan: 40s;
  --attract-zoom: 1.12;
  --attract-pan-x: -4%;
  --attract-pan-y: 2%;
  /* launching a channel: the tile grows into the frame, Home zooms past */
  --dur-launch: 600ms;
  --ease-launch: cubic-bezier(0.65, 0, 0.25, 1);
  --launch-zoom-past: 1.15;
  --launch-splash-bg: var(--sky-night);
  --launch-tile-width: 220px;
  --launch-tile-ratio: 380 / 205;
  --launch-tile-font: 26px;
  --launch-tile-icon: 52px;
  --launch-tile-glow: 0 0 30px 6px rgba(52, 190, 237, 0.45);
  --dur-none: 0.01ms;
  --dur-fast: 200ms;
  --dur-medium: 350ms;
  --dur-slow: 600ms;
  --dur-fade: 1200ms;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --hairline: 1px;
  --rule: 2px;
  --rule-thick: 3px;
  --touch-min: 44px;

  /* ---- Pointer: Cirrus's own hand cursor (fingertip hotspot), with
         a PNG and the system pointer as fallbacks ---- */
  --cursor-point: url("cursors/hand.svg") 10 2, url("cursors/hand.png") 10 2, pointer;
  /* the drawn hand (pointer.js): the same picture, a little bigger */
  --soft-cursor-size: 40px;
  --soft-cursor-hot-x: 12.5px;
  --soft-cursor-hot-y: 2.5px;
  --soft-cursor-shadow: drop-shadow(0 3px 3px rgba(0, 10, 40, 0.35));
  --soft-cursor-poke: 0 2px;
  --soft-cursor-poke-scale: 0.9;
  --ripple-size: 72px;
  --ripple-face: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(140, 220, 255, 0.45) 45%, rgba(140, 220, 255, 0) 70%);

  /* ---- Focus ---- */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-ring-on-light: #0a5fa3;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Type scale ---- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-body: 1.45;
  --tracking-caps: 0.06em;
  --tracking-tight: -0.03em;

  /* ---- Frame: silver button rows ---- */
  --frame-row-height: 64px;
  --frame-btn-font: 20px;
  --frame-tri-size: 16px;
  --frame-columns: 1fr 1.35fr 1fr;
  --frame-bg: #b9c1c8;
  --frame-btn-face: linear-gradient(180deg, #ffffff 0%, #f2f4f6 46%, #dfe3e7 100%);
  --frame-btn-face-hover: linear-gradient(180deg, #ffffff 0%, #f7f9fa 46%, #e9edf0 100%);
  --frame-btn-face-active: linear-gradient(180deg, #6fd6fb 0%, #2aaee9 34%, #0d76bd 52%, #0a64aa 100%);
  --frame-btn-text: #2f3337;
  --frame-btn-text-muted: #5b646c;
  --frame-btn-text-active: #ffffff;
  --frame-btn-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(110, 125, 140, 0.22);
  --frame-btn-shadow-active:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(0, 40, 90, 0.35);
  --frame-btn-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  --frame-btn-text-shadow-active: 0 1px 2px rgba(0, 30, 70, 0.55);
  --frame-divider: #a7b0b8;
  --frame-divider-light: rgba(255, 255, 255, 0.9);
  --frame-edge: #2c7bd4;
  --frame-clock-text: #3c4247;
  --frame-clock-font: 30px;
  --frame-clock-meridiem-font: 13px;

  /* ---- Frame: green header strip ---- */
  --frame-header-height: 64px;
  --header-strip: linear-gradient(180deg, #2b8c22 0%, #166a10 100%);
  --header-strip-edge: #0d4f08;
  --title-block: linear-gradient(180deg, #33a826 0%, #1a7a12 50%, #0f5c0a 100%);
  --title-block-width: 310px;
  --title-font: 30px;
  --title-font-long: 22px;
  --title-text: #ffffff;
  --title-text-shadow: 0 2px 2px rgba(0, 30, 0, 0.5);
  --pill-face: linear-gradient(180deg, #a8f78c 0%, #5cd84c 30%, #2aa820 58%, #1d8f15 100%);
  --pill-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100%);
  --pill-border: #0e6a09;
  --pill-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(0, 60, 0, 0.3),
    0 2px 4px rgba(0, 30, 0, 0.35);
  --pill-text: #ffffff;
  --pill-font: 30px;
  --pill-inset: 8px;
  --search-field-bg: #ffffff;
  --search-field-text: #12361a;
  --search-field-placeholder: #4f6b54;
  /* Search: a white well pressed into the lime pill, plus a raised silver Go button */
  --search-pad: 5px;
  --search-font: 26px;
  --search-well-face: linear-gradient(180deg, #dcebd8 0%, #f6fbf4 30%, #ffffff 55%, #ffffff 100%);
  --search-well-rim: #0b5a07;
  --search-well-shadow:
    inset 0 2px 4px rgba(4, 50, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.4);
  --search-well-focus-rim: #0a76c4;
  --search-well-focus-glow: 0 0 0 2px #34beed, 0 0 14px 3px rgba(52, 190, 237, 0.6);
  --search-icon: #2f7d27;
  --search-icon-size: 26px;
  --search-icon-stroke: 2.6;
  --search-caret: #0a76c4;
  --search-go-width: 124px;
  --search-go-font: 22px;
  --search-go-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(54, 195, 242, 0.3),
    0 2px 4px rgba(0, 40, 0, 0.45);
  --search-go-glow: 0 0 0 2px #34beed, 0 0 14px 3px rgba(52, 190, 237, 0.55);
  --search-go-hit: 6px;

  /* ---- Frame: royal blue panel ---- */
  --panel-face: linear-gradient(160deg, #2d68e2 0%, #1b4cc4 36%, #1038a4 68%, #0a2682 100%);
  --panel-streaks:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 18%,
      rgba(255, 255, 255, 0.07) 21%,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.05) 61%,
      rgba(255, 255, 255, 0) 64%),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 5px,
      rgba(255, 255, 255, 0.025) 5px,
      rgba(255, 255, 255, 0.025) 6px);
  --panel-sat-opacity: 0.42;
  --panel-text: #ffffff;
  --panel-text-soft: rgba(255, 255, 255, 0.9);
  --panel-text-shadow: 0 2px 3px rgba(0, 10, 50, 0.6);
  --panel-pad-x: clamp(24px, 6vw, 96px);
  --panel-pad-top: clamp(16px, 6vh, 64px);
  --panel-footer-space: 104px;

  /* ---- Panel readouts ---- */
  --temp-current: #ffffff;
  --temp-high: #ffd21c;
  --temp-low: #7cecff;
  --temp-shadow: 0 4px 0 rgba(0, 20, 80, 0.35), 0 8px 18px rgba(0, 10, 50, 0.45);
  --temp-high-shadow: 0 4px 0 #8a6400, 0 8px 18px rgba(0, 10, 50, 0.45);
  --hero-temp-size: clamp(96px, 17vh, 168px);
  --hero-day-temp-size: clamp(96px, 17vh, 168px);
  --hero-cond-size: clamp(22px, 3.8vh, 36px);
  --hero-icon-size: clamp(130px, 26vh, 240px);
  --hero-icon-shadow: drop-shadow(0 10px 18px rgba(0, 10, 50, 0.5));
  --wind-font: clamp(26px, 4.6vh, 42px);
  --wind-band: linear-gradient(to right, rgba(5, 22, 86, 0) 0%, rgba(5, 22, 86, 0.78) 34%, #061a66 100%);
  --asof-strip: linear-gradient(to right, rgba(200, 20, 60, 0) 0%, #b8102f 34%, #d42a55 100%);
  --asof-font: 15px;
  --credit-font: 12px;
  --credit-text: rgba(255, 255, 255, 0.92);

  /* ---- Page dots ---- */
  --dots-right: 4px;
  --dots-gutter: 48px;
  --dot-hit-width: 40px;
  --dot-hit-height: 40px;
  --dot-size: 11px;
  --dot-current-scale: 1.65;
  --dot-face: rgba(255, 255, 255, 0.75);
  --dot-border: rgba(0, 20, 80, 0.35);
  --dot-shadow: 0 1px 3px rgba(0, 10, 50, 0.45);
  --dot-current-face: linear-gradient(180deg, #a6ecff 0%, #36c3f2 45%, #0d8fd6 100%);
  --dot-current-border: #ffffff;
  --dot-current-glow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 12px 3px rgba(52, 190, 237, 0.7);
  --dot-tip-face: rgba(4, 18, 70, 0.88);
  --dot-tip-font: 14px;

  /* ---- Reading bubbles (feels like, humidity, rain chance, ...) ---- */
  --reading-gap: 10px;
  --reading-top: 28px;
  --reading-min-width: 148px;
  --reading-pad-y: 9px;
  --reading-pad-x: 18px;
  --reading-face:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0) 49%),
    rgba(6, 24, 92, 0.6);
  --reading-border: rgba(255, 255, 255, 0.38);
  --reading-shadow: 0 4px 10px rgba(0, 10, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --reading-icon: var(--temp-low);
  --reading-icon-size: 30px;
  --reading-icon-stroke: 2;
  --reading-icon-shadow: drop-shadow(0 1px 1px rgba(0, 10, 50, 0.5));
  --reading-value-font: clamp(18px, 2.7vh, 25px);
  --reading-label-font: 14px;

  /* ---- 5-Day columns ---- */
  --fiveday-gap: 10px;
  --fiveday-col-face: linear-gradient(180deg, #3f7fea 0%, #2559cc 55%, #1b47b2 100%);
  --fiveday-col-face-hover: linear-gradient(180deg, #5591f0 0%, #2f66d8 55%, #2050bc 100%);
  --fiveday-col-border: rgba(170, 205, 255, 0.6);
  --fiveday-col-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 10, 50, 0.35);
  --fiveday-head-face: linear-gradient(180deg, #16357f 0%, #0a1d55 100%);
  --fiveday-head-font: clamp(22px, 4vh, 34px);
  --fiveday-icon-size: clamp(64px, 14vh, 128px);
  --fiveday-high-font: clamp(44px, 9.5vh, 88px);
  --fiveday-low-font: clamp(40px, 8vh, 76px);
  --weekend-text: var(--temp-high);
  --panel-footer-slim: 48px;
  --fiveday-max-height: 100%;

  /* ---- 6-Hour tiles ---- */
  --sixhour-strip-face: linear-gradient(to right, #0a1d55 0%, rgba(10, 29, 85, 0.85) 60%, rgba(10, 29, 85, 0) 100%);
  --sixhour-strip-font: clamp(18px, 3vh, 26px);
  --sixhour-tile-face:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 46%,
      rgba(255, 255, 255, 0) 47%),
    linear-gradient(180deg, #78b4f2 0%, #3f86e2 46%, #1d55bf 47%, #173f9c 100%);
  --sixhour-tile-border: rgba(210, 230, 255, 0.85);
  --sixhour-tile-shadow: 0 6px 14px rgba(0, 10, 50, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --sixhour-icon-size: clamp(90px, 19vh, 176px);
  --sixhour-time-font: clamp(16px, 2.6vh, 23px);
  --sixhour-temp-font: clamp(20px, 3.6vh, 32px);
  --sixhour-gap: 18px;

  /* ---- UV index (WHO colors) ---- */
  --uv-low: #3ea72d;
  --uv-moderate: #fff300;
  --uv-high: #f18b00;
  --uv-very-high: #e53210;
  --uv-extreme: #b567a4;
  --uv-value-font: clamp(110px, 22vh, 200px);
  --uv-category-font: clamp(28px, 5vh, 48px);
  --uv-band-height: 22px;
  --uv-scale-width: 720px;
  --uv-band-active-height: 34px;
  --uv-band-border: rgba(255, 255, 255, 0.85);
  --uv-band-font: 15px;
  --uv-advice-font: clamp(17px, 2.6vh, 22px);

  /* ---- Globe ---- */
  --globe-space: radial-gradient(ellipse at 50% 120%, #1d4fc4 0%, #0b2a86 45%, #04124a 100%);
  --globe-ocean: #1d4ea8;
  --globe-glow: rgba(120, 190, 255, 0.55);
  --globe-atmosphere: #9fd4ff;
  --globe-glow-edge: rgba(120, 190, 255, 0);
  --globe-badge-font: clamp(16px, 2.6vh, 24px);
  --globe-label-font: 15px;
  --globe-label-bg: rgba(4, 18, 70, 0.72);
  --globe-label-bg-hover: #0d76bd;
  --globe-dot-size: 12px;
  --globe-dot: #ffe14a;
  --globe-dot-glow: 0 0 6px 3px rgba(255, 225, 74, 0.75);
  --globe-dot-pending: rgba(255, 255, 255, 0.65);
  --globe-marker-icon: 34px;
  --globe-status-bottom: 56px;

  /* ---- Panel status pills (loading / error) ---- */
  --status-face: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 55%), rgba(6, 24, 92, 0.82);
  --status-border: rgba(255, 255, 255, 0.35);
  --status-error-face: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 55%), rgba(150, 16, 40, 0.9);
  --status-shadow: 0 6px 18px rgba(0, 10, 50, 0.4);

  /* ---- Loading dots and the error card ---- */
  --loading-scrim: rgba(6, 22, 86, 0.55);
  --loading-font: clamp(18px, 2.8vh, 24px);
  --loader-dot-size: 18px;
  --loader-dot-gap: 14px;
  --loader-dot-1: var(--temp-high);
  --loader-dot-2: #ffffff;
  --loader-dot-3: var(--temp-low);
  --loader-dot-shadow: 0 4px 8px rgba(0, 10, 50, 0.45), inset 0 -3px 3px rgba(0, 30, 80, 0.2);
  --loader-dot-size-small: 8px;
  --loader-dot-gap-small: 5px;
  --loading-delay: 150ms;
  --dur-dot: 900ms;
  --motion-dot-jump: -16px;
  --motion-dot-stretch: scale(0.9, 1.1);
  --motion-dot-squash: scale(1.2, 0.8);
  --ease-dot-up: cubic-bezier(0.25, 0.7, 0.45, 1);
  --ease-dot-down: cubic-bezier(0.55, 0, 0.85, 0.35);
  --dot-dim: 0.35;
  --dur-shake: 420ms;
  --motion-shake: 9px;
  --error-card-width: 520px;
  --error-card-face: linear-gradient(180deg, #ffffff 0%, #f1f5f8 60%, #e1e8ee 100%);
  --error-card-border: rgba(255, 255, 255, 0.9);
  --error-card-shadow: 0 10px 28px rgba(0, 10, 50, 0.5), inset 0 -3px 4px rgba(110, 125, 140, 0.25);
  --error-card-text: #2f3337;
  --error-font: clamp(17px, 2.4vh, 21px);
  --error-btn-width: 180px;

  /* ---- Silver buttons inside the panel (recent cities, choices) ---- */
  --chip-face: var(--frame-btn-face);
  --chip-border: rgba(255, 255, 255, 0.85);
  --chip-shadow: 0 3px 8px rgba(0, 10, 50, 0.35), inset 0 -2px 3px rgba(110, 125, 140, 0.22);
  --chip-height: 52px;
  --chip-font: 18px;
  --chip-min-width: 220px;
  --settings-cards-width: 1080px;
  --settings-card-face:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 31%),
    rgba(6, 24, 92, 0.5);
  --settings-card-border: rgba(255, 255, 255, 0.35);
  --settings-card-shadow: 0 8px 20px rgba(0, 10, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --settings-card-title-font: 24px;
  --settings-label-font: 17px;

  /* ---- Desktop Home (channel menu) ---- */
  --home-globe-opacity: 0.17;
  --home-gutter: 32px;
  --home-grid-width: 900px;
  --home-grid-margin: 85px;
  --home-letterbox-height: 84px;
  --home-letterbox-face: rgba(0, 0, 0, 0.52);
  --home-letterbox-edge: rgba(255, 255, 255, 0.1);
  --home-letterbox-shine: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --home-scan-dark: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0 1px, transparent 1px 3px);
  --home-scan-light: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px);
  --home-title-text: #eef4f9;
  --home-title-font: 20px;
  --home-title-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  --home-sub-text: #9ddcff;
  --home-sub-font: 12px;
  --home-input-width: 260px;
  --home-input-face: linear-gradient(to bottom, #e9eef2 0%, #ffffff 40%);
  --home-input-text: #1c3a66;
  --home-input-placeholder: #5d7086;
  --home-input-shadow: inset 0 2px 4px rgba(20, 50, 110, 0.18), 0 0 0 1px rgba(54, 195, 242, 0.35);
  --home-input-font: 16px;
  --cyan-rim: #36c3f2;
  --cyan-rim-hover: #4fd0fb;
  --cyan-rim-width: 1.5px;
  --cyan-glow: 0 0 0 3px #34beed, 0 0 18px 4px rgba(52, 190, 237, 0.5);
  --pill-silver-face: linear-gradient(180deg, #fdffff 0%, #eef4f7 50%, #d6e2e9 100%);
  --pill-silver-text: #3a3a3a;
  --pill-silver-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  --pill-gloss-cap: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15));
  --pill-gloss-cap-radius: 999px 999px 60% 60% / 999px 999px 22px 22px;
  --home-status-font: 15px;
  --home-prompt-text: rgba(255, 255, 255, 0.9);
  --home-prompt-font: clamp(17px, 2vw, 22px);
  --home-prompt-shadow: 0 1px 5px rgba(0, 8, 42, 0.8);
  --home-prompt-width: 560px;
  --home-hint-text: rgba(255, 255, 255, 0.9);
  --home-hint-font: 13px;
  --tile-gap: 13px;
  --tile-radius: 10px;
  --tile-frame: rgb(203, 203, 203);
  --tile-ring: 0 0 0 3px rgb(180, 180, 180);
  --tile-scan: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
  --tile-today-face: linear-gradient(to bottom, #2b63d4 0%, #1c45a8 55%, #0b2266 100%);
  --tile-today-title-font: 14px;
  --tile-today-temp-font: 30px;
  --tile-day-face: linear-gradient(180deg, #3a78dd 0%, #2a62c8 55%, #1f4fae 100%);
  --tile-day-head: linear-gradient(180deg, #16357f 0%, #0a1d55 100%);
  --tile-day-label-font: 15px;
  --tile-day-high-font: 20px;
  --tile-day-low-font: 15px;
  --tile-day-low-text: #eaf7ff;
  --tile-icon-size: 36px;
  --tile-text-shadow: 0 1px 3px rgba(0, 10, 40, 0.6);
  --tile-empty-face: radial-gradient(30% 65% at 50% 50%, rgba(255, 255, 255, 0.3), transparent);
  --tile-empty-scan: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, rgba(255, 255, 255, 0.1) 2px 3px);
  --tile-empty-title: #b3b3b3;
  --tile-empty-sub: #a9a9a9;
  --tile-empty-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  --tray-height: 150px;
  --tray-fill: rgb(225, 226, 230);
  --tray-shade: rgba(0, 0, 0, 0.05);
  --tray-rim: rgb(54, 191, 237);
  --tray-crt-dark: rgba(0, 0, 0, 0.16);
  --tray-crt-light: rgba(255, 255, 255, 0.35);
  --tray-groove: rgb(217, 217, 217);
  --tray-groove-ring: rgb(179, 181, 187);
  --tray-groove-shine: rgba(255, 255, 255, 0.7);
  --tray-button-size: 88px;
  --tray-button-face: rgb(217, 217, 217);
  --tray-button-text: #5f5e63;
  --tray-button-shadow:
    0 0 0 4px rgb(52, 190, 237),
    inset -4px -4px 10px rgba(0, 0, 0, 0.26),
    10px 12px 2px -2px rgb(188, 189, 195);
  --tray-button-shadow-active:
    0 0 0 4px rgb(52, 190, 237),
    inset -4px -4px 10px rgba(0, 0, 0, 0.26),
    10px 12px 2px -2px rgb(188, 189, 195),
    0 0 16px 4px rgba(52, 190, 237, 0.55);
  --tray-crescent: rgb(228, 228, 228);
  --tray-clock-text: #626263;
  --tray-clock-shadow: 0 1px 0 #ffffff;
  --tray-clock-font: 40px;
  --tray-date-font: 22px;

  /* ---- Weather effects inside the panel ---- */
  --atmo-fade: 600ms;
  --atmo-rain-fade: 500ms;
  --atmo-rain-filter: contrast(1.15) brightness(1.05);
  --atmo-strike-height: 58vh;
  --atmo-strike-glow: drop-shadow(0 0 24px rgba(170, 215, 255, 0.65));
  --atmo-flash: rgba(195, 220, 255, 0.14);
  --atmo-snow:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0 0.9px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.1px);
  --atmo-snow-size: 52px 52px, 38px 38px, 64px 64px;
  --atmo-snow-offset: 0 0, 16px 24px, 8px 40px;
  --atmo-snow-drift: 12px;
  --atmo-snow-speed: 6s;
  --atmo-sleet-speed: 4s;
  --atmo-fog: linear-gradient(180deg, rgba(200, 210, 230, 0.18) 0%, rgba(180, 195, 220, 0.28) 45%, rgba(160, 175, 200, 0.22) 100%);
  --atmo-fog-speed: 12s;
  --atmo-clouds:
    radial-gradient(ellipse 42% 18% at 20% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 36% 14% at 72% 22%, rgba(255, 255, 255, 0.1) 0%, transparent 68%),
    radial-gradient(ellipse 50% 20% at 48% 38%, rgba(220, 230, 245, 0.12) 0%, transparent 72%);
  --atmo-clouds-heavy:
    radial-gradient(ellipse 55% 22% at 15% 25%, rgba(210, 220, 240, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 48% 18% at 65% 20%, rgba(200, 215, 235, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 60% 24% at 42% 42%, rgba(190, 205, 225, 0.2) 0%, transparent 72%),
    linear-gradient(180deg, rgba(120, 140, 170, 0.08) 0%, transparent 60%);
  --atmo-clouds-speed: 22s;
  --atmo-clouds-heavy-speed: 18s;

  /* ---- Motion distances and timings ---- */
  --dur-entrance: 700ms;
  --dur-squash: 460ms;
  --dur-press-glow: 620ms;
  --dur-bob: 3.2s;
  /* weather icon idle motion */
  --dur-sun-turn: 80s;
  --dur-sun-pulse: 3.2s;
  --motion-sun-pulse: 1.06;
  --dur-cloud-drift: 6s;
  --motion-drift: 6px;
  --dur-moon-glow: 4.5s;
  --moon-dim: 0.86;
  --dur-fog-drift: 9s;
  --motion-fog-drift: 8px;
  --fog-dim: 0.8;
  --dur-snow-sway: 5s;
  --motion-snow-sway: 2.5deg;
  --glow-inset: 14%;
  --glow-dim: 0.5;
  --glow-small: 0.92;
  --glow-big: 1.1;
  --sun-glow: radial-gradient(circle, rgba(255, 224, 110, 0.6) 0%, rgba(255, 200, 70, 0.22) 45%, rgba(255, 200, 70, 0) 70%);
  --moon-glow: radial-gradient(circle, rgba(225, 238, 255, 0.55) 0%, rgba(200, 220, 255, 0.2) 45%, rgba(200, 220, 255, 0) 70%);
  --dur-drip: 1.7s;
  --dur-flake: 3.4s;
  --motion-drip-fall: 120%;
  --drip-top: 62%;
  --drip-side: 26%;
  --drip-height: 26%;
  --rain-drops:
    radial-gradient(ellipse 2px 7px at 15% 10%, rgba(185, 225, 255, 0.95) 55%, rgba(185, 225, 255, 0) 100%),
    radial-gradient(ellipse 2px 7px at 55% 30%, rgba(185, 225, 255, 0.95) 55%, rgba(185, 225, 255, 0) 100%),
    radial-gradient(ellipse 2px 7px at 88% 5%, rgba(185, 225, 255, 0.95) 55%, rgba(185, 225, 255, 0) 100%);
  --rain-drops-2:
    radial-gradient(ellipse 2px 7px at 32% 25%, rgba(185, 225, 255, 0.95) 55%, rgba(185, 225, 255, 0) 100%),
    radial-gradient(ellipse 2px 7px at 72% 0%, rgba(185, 225, 255, 0.95) 55%, rgba(185, 225, 255, 0) 100%);
  --snow-flakes:
    radial-gradient(circle 3px at 18% 15%, #ffffff 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 3px at 60% 35%, #ffffff 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 3px at 90% 10%, #ffffff 55%, rgba(255, 255, 255, 0) 100%);
  --snow-flakes-2:
    radial-gradient(circle 3px at 38% 25%, #ffffff 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 3px at 76% 5%, #ffffff 55%, rgba(255, 255, 255, 0) 100%);
  --dur-hint: 2s;
  --dur-blink: 2s;
  --dur-scan-drift: 10s;
  --dur-scan-static: 8s;
  --dur-freeze: 1.6s;
  --dur-shiver: 0.3s;
  --dur-heat: 0.4s;
  --stagger-step: 60ms;
  --stagger-gap: 110ms;
  --motion-pop-from: translateY(10px) scale(0.82);
  --motion-field-from: scaleX(0.9);
  --motion-bob: translateY(-8px);
  --motion-hint: translateY(-4px);
  --motion-squash-down: translateY(3px) scale(1.06, 0.9);
  --motion-scan-drift: translateY(3px);
  /* how much things grow and lift under the pointer */
  --grow: 1.05;
  --grow-wide: 1.015;
  --grow-col: 1.04;
  --grow-label: 1.1;
  --grow-dot: 1.45;
  --grow-marker: 1.1;
  --grow-tile: 1.06;
  --grow-search: 1.03;
  --grow-tray: 1.05;
  --lift: 0 -2px;
  --lift-tray: 0 -3px;
  /* the press: a quick dip, then the spring brings it back */
  --ease-press: cubic-bezier(0.2, 0.7, 0.4, 1);
  /* the shine that sweeps across glossy buttons on hover */
  --shine-band: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  --shine-width: 45%;
  --shine-skew: -20deg;
  --shine-travel: 330%;
  --dur-shine: 700ms;
  --motion-shiver: 1.2px;
  --motion-wiggle: 14deg;
  --dur-wiggle: 700ms;
  --heat-amp-default: 0.5px;
  --press-glow:
    inset 0 2px 5px rgba(20, 50, 110, 0.22),
    0 0 0 1.5px rgba(52, 190, 237, 0.7),
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 8px 2px rgba(52, 190, 237, 0.75),
    0 0 22px 6px rgba(52, 190, 237, 0.55);

  /* ---- Layering ---- */
  --z-sat: 0;
  --z-atmosphere: 1;
  --z-view: 2;
  --z-footer: 3;
  --z-screen: 4;
  --z-status: 5;
  --z-frame: 10;
  --z-home-returning: 11;
  --z-launch: 50;
  --z-cursor: 1000;
}

/* Phones: same frame, shorter rows and smaller type. */
@media (max-width: 767px) {
  :root {
    --frame-row-height: 54px;
    --frame-btn-font: 15px;
    --frame-tri-size: 12px;
    --frame-clock-font: 20px;
    --frame-clock-meridiem-font: 11px;
    --frame-header-height: 58px;
    --title-block-width: 38%;
    --title-font: 19px;
    --title-font-long: 15px;
    --pill-font: 19px;
    --pill-inset: 6px;
    --search-pad: 4px;
    --search-font: 17px;
    --search-icon-size: 17px;
    --search-go-width: 60px;
    --search-go-font: 16px;
    --panel-pad-x: 20px;
    --panel-pad-top: 20px;
    --panel-footer-space: 88px;
    --hero-temp-size: clamp(72px, 13vh, 112px);
    --hero-day-temp-size: clamp(60px, 10vh, 84px);
    --hero-cond-size: clamp(18px, 2.8vh, 24px);
    --hero-icon-size: clamp(96px, 16vh, 140px);
    --wind-font: clamp(22px, 3.6vh, 30px);
    --asof-font: 13px;
    --credit-font: 11px;
    --dots-right: 1px;
    --dots-gutter: 14px;
    --dot-hit-width: 12px;
    --dot-hit-height: 16px;
    --dot-size: 6px;
    --reading-gap: 8px;
    --reading-top: 18px;
    --reading-pad-x: 12px;
    --reading-icon-size: 22px;
    --reading-value-font: 16px;
    --reading-label-font: 12px;
    --chip-height: 48px;
    --chip-font: 16px;
    --settings-card-title-font: 20px;
    --settings-label-font: 15px;
    --loader-dot-size: 14px;
    --loader-dot-gap: 11px;
    --motion-dot-jump: -12px;
    --fiveday-gap: 5px;
    --fiveday-head-font: 15px;
    --fiveday-icon-size: clamp(48px, 8vh, 64px);
    --fiveday-high-font: clamp(28px, 5vh, 40px);
    --fiveday-low-font: clamp(24px, 4.2vh, 34px);
    --panel-footer-slim: 44px;
    --fiveday-max-height: 300px;
    --sixhour-strip-font: 18px;
    --uv-value-font: clamp(96px, 16vh, 140px);
    --uv-category-font: 26px;
    --uv-band-font: 11px;
    --uv-advice-font: 16px;
    --alert-bar-font: 14px;
    --alert-icon-size: 18px;
    --alert-tile-height: 64px;
    --globe-label-font: 13px;
    --globe-badge-font: 15px;
    --globe-marker-icon: 28px;
    --globe-dot-size: 10px;
    --sixhour-icon-size: clamp(60px, 10vh, 84px);
    --sixhour-time-font: 14px;
    --sixhour-temp-font: 18px;
    --sixhour-gap: 12px;
  }
}

/* Browsers that understand linear() get the real spring curves. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-pop: linear(0, 0.034, 0.12, 0.24, 0.378, 0.52, 0.655, 0.778, 0.883, 0.968, 1.033, 1.079, 1.108, 1.123, 1.126, 1.12, 1.108, 1.092, 1.075, 1.057, 1.04, 1.025, 1.012, 1.002, 0.994, 0.989, 0.986, 0.984, 0.984, 0.985, 0.987, 0.989, 0.991, 0.993, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);
    --spring-slide: linear(0, 0.022, 0.079, 0.16, 0.255, 0.357, 0.459, 0.558, 0.649, 0.731, 0.804, 0.865, 0.917, 0.958, 0.991, 1.015, 1.033, 1.044, 1.051, 1.054, 1.054, 1.051, 1.048, 1.043, 1.037, 1.032, 1.026, 1.021, 1.016, 1.012, 1.009, 1.006, 1.003, 1.001, 1, 0.999, 0.998, 0.997, 0.997, 0.997, 1);
    --spring-hover: linear(0, 0.028, 0.101, 0.204, 0.322, 0.447, 0.568, 0.682, 0.783, 0.87, 0.941, 0.997, 1.038, 1.067, 1.085, 1.093, 1.095, 1.09, 1.083, 1.072, 1.061, 1.049, 1.038, 1.027, 1.018, 1.01, 1.004, 0.999, 0.995, 0.993, 0.992, 0.991, 0.991, 0.992, 0.992, 0.993, 0.995, 0.996, 0.997, 0.998, 1);
  }
}

body.theme-day {
  --focus-ring: var(--focus-ring-day);
  --sky-base: var(--sky-base-day);
}