/* ============================================================
   STORMSCOPE — Apple Glassmorphism Design System
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
    /* Background — animated by JS via setProperty */
    --bg-layer-1: #1e3a8a38;
    --bg-layer-2: #0ea5e938;
    --bg-layer-3: #0f766e28;
    --bg-bottom-a: #09090b;
    --bg-bottom-b: #0c0c0e;
    --bg-bottom-c: #09090b;
    --bg-angle: 180deg;
    --bg-pos-1x: 12%;
    --bg-pos-1y: 8%;
    --bg-pos-2x: 88%;
    --bg-pos-2y: 10%;
    --bg-pos-3x: 50%;
    --bg-pos-3y: 85%;

    /* Glass card system */
    --card-bg:          rgba(28, 28, 30, 0.60);
    --card-border:      rgba(255, 255, 255, 0.10);
    --card-shadow:      0 2px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --card-blur:        blur(24px) saturate(180%);

    /* Inner tile */
    --tile-bg:          rgba(44, 44, 46, 0.55);
    --tile-border:      rgba(255, 255, 255, 0.08);

    /* Inputs */
    --input-bg:         rgba(28, 28, 30, 0.70);
    --input-border:     rgba(255, 255, 255, 0.12);
    --input-focus:      #0A84FF;

    /* Divider */
    --divider:          rgba(255, 255, 255, 0.07);

    /* Apple iOS text hierarchy */
    --fg:               #ffffff;
    --fg-muted:         rgba(235, 235, 245, 0.60);
    --fg-subtle:        rgba(235, 235, 245, 0.30);

    /* Accent — Apple blue (dark mode) */
    --accent:           #0A84FF;
    --accent-glow:      rgba(10, 132, 255, 0.28);
    --accent-surface:   rgba(10, 132, 255, 0.12);

    /* SVG chart — referenced directly in SVG attributes */
    --chart-grid:       rgba(255, 255, 255, 0.07);
    --chart-axis:       rgba(235, 235, 245, 0.30);

    /* Radii */
    --radius-xs:   0.375rem;
    --radius-sm:   0.75rem;
    --radius-md:   0.875rem;
    --radius-lg:   1.25rem;
    --radius-pill: 999px;

    /* Z-scale */
    --z-topbar: 90;
    --z-nav:    100;
    --z-toast:  120;

    /* iOS system palette — vivid tier */
    --color-green:  #30d158;
    --color-yellow: #ffd60a;
    --color-orange: #ff9f0a;
    --color-red:    #ff453a;
    --color-cyan:   #64d2ff;
    --color-lime:   #a3e635;
    --color-pink:   #ff375f;

    /* Readable text tier (dark theme = same as vivid) */
    --color-green-text:  var(--color-green);
    --color-yellow-text: var(--color-yellow);
    --color-orange-text: var(--color-orange);
    --color-red-text:    var(--color-red);
    --color-cyan-text:   var(--color-cyan);
    --color-lime-text:   var(--color-lime);
    --color-pink-text:   var(--color-pink);

    /* Secondary accent — replaces old hardcoded #5ac8fa */
    --accent-soft: #5ac8fa;

    /* Liquid glass recipe (floating nav, top bar, toasts, pull-to-refresh) */
    --glass-bg:           rgba(24, 24, 28, 0.52);
    --glass-bg-strong:    rgba(24, 24, 28, 0.68);
    --glass-rim:          rgba(255, 255, 255, 0.12);
    --glass-highlight:    rgba(255, 255, 255, 0.16);
    --glass-blur:         blur(28px) saturate(190%);
    --glass-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30);
}

html.theme-dark { color-scheme: dark; }

html.theme-light {
    color-scheme: light;

    --bg-layer-1: #bfdbfe28;
    --bg-layer-2: #bae6fd28;
    --bg-layer-3: #ccfbf118;
    --bg-bottom-a: #e8f0ff;
    --bg-bottom-b: #dde9ff;
    --bg-bottom-c: #e8f0ff;

    /* Frosted white glass */
    --card-bg:          rgba(255, 255, 255, 0.65);
    --card-border:      rgba(0, 0, 0, 0.08);
    --card-shadow:      0 2px 40px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.80) inset;
    --card-blur:        blur(24px) saturate(160%);

    --tile-bg:          rgba(255, 255, 255, 0.55);
    --tile-border:      rgba(0, 0, 0, 0.07);

    --input-bg:         rgba(255, 255, 255, 0.82);
    --input-border:     rgba(0, 0, 0, 0.12);
    --input-focus:      #007AFF;

    --divider:          rgba(0, 0, 0, 0.06);

    --fg:               #1c1c1e;
    --fg-muted:         rgba(60, 60, 67, 0.60);
    --fg-subtle:        rgba(60, 60, 67, 0.36);

    --accent:           #007AFF;
    --accent-glow:      rgba(0, 122, 255, 0.22);
    --accent-surface:   rgba(0, 122, 255, 0.10);

    --chart-grid:       rgba(0, 0, 0, 0.06);
    --chart-axis:       rgba(60, 60, 67, 0.36);

    /* iOS system palette — vivid tier (light theme; lime/pink unchanged from dark) */
    --color-green:  #34c759;
    --color-yellow: #ffcc00;
    --color-orange: #ff9500;
    --color-red:    #ff3b30;
    --color-cyan:   #32ade6;

    /* Readable text tier (light theme) */
    --color-green-text:  #1a7f37;
    --color-yellow-text: #9a6700;
    --color-orange-text: #c24d00;
    --color-red-text:    #d92b2b;
    --color-cyan-text:   #0071a4;
    --color-lime-text:   #538a00;
    --color-pink-text:   #9a003a;

    --accent-soft: var(--accent);

    --glass-bg:           rgba(250, 250, 252, 0.60);
    --glass-bg-strong:    rgba(250, 250, 252, 0.78);
    --glass-rim:          rgba(0, 0, 0, 0.07);
    --glass-highlight:    rgba(255, 255, 255, 0.85);
    --glass-blur:         blur(28px) saturate(180%);
    --glass-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ── 2. Base Reset & Body ─────────────────────────────────── */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(circle at var(--bg-pos-1x) var(--bg-pos-1y), var(--bg-layer-1) 0%, transparent 44%),
        radial-gradient(circle at var(--bg-pos-2x) var(--bg-pos-2y), var(--bg-layer-2) 0%, transparent 36%),
        radial-gradient(circle at var(--bg-pos-3x) var(--bg-pos-3y), var(--bg-layer-3) 0%, transparent 42%),
        linear-gradient(var(--bg-angle), var(--bg-bottom-a) 0%, var(--bg-bottom-b) 45%, var(--bg-bottom-c) 100%);
    background-attachment: fixed;
    color: var(--fg);
    transition: background 600ms ease;
    min-height: 100dvh;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── 3. Glass Component System ────────────────────────────── */

/* Primary card — main section container */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    -webkit-backdrop-filter: var(--card-blur);
    backdrop-filter: var(--card-blur);
    isolation: isolate;
}

/* Inner tile / stat box */
.tile {
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Utility glass panel (AI output, search dropdown) */
.glass-panel {
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-radius: var(--radius-md);
}


/* ── 4. Inputs & Selects ──────────────────────────────────── */
.inp {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--fg);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
    width: 100%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.inp:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.inp::placeholder { color: var(--fg-subtle); }

select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(235,235,245,0.40)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
    cursor: pointer;
}
html.theme-light select.inp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(60,60,67,0.50)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* ── 5. Button System ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 150ms, border-color 150ms, color 150ms, box-shadow 150ms, opacity 150ms, transform 150ms ease;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

/* Ghost — frosted translucent */
.btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--fg-muted);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--fg);
}
html.theme-light .btn-ghost {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.09);
    color: var(--fg-muted);
}
html.theme-light .btn-ghost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.13);
    color: var(--fg);
}

/* Outline — accent blue glass */
.btn-outline {
    background: var(--accent-surface);
    border-color: rgba(10, 132, 255, 0.32);
    color: var(--accent-soft);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-outline:hover:not(:disabled) {
    background: rgba(10, 132, 255, 0.20);
    border-color: rgba(10, 132, 255, 0.55);
    color: #fff;
}
html.theme-light .btn-outline {
    border-color: rgba(0, 122, 255, 0.35);
    background: var(--accent-surface);
}
html.theme-light .btn-outline:hover:not(:disabled) {
    background: rgba(0, 122, 255, 0.16);
    border-color: var(--accent);
    color: #003eb3;
}

/* Danger outline */
.btn-outline-danger {
    background: rgba(255, 69, 58, 0.08);
    border-color: rgba(255, 69, 58, 0.32);
    color: #ff6961;
}
.btn-outline-danger:hover:not(:disabled) {
    background: rgba(255, 69, 58, 0.15);
    border-color: rgba(255, 69, 58, 0.55);
}
html.theme-light .btn-outline-danger { color: #d00; border-color: rgba(220, 38, 38, 0.38); }

/* Success outline */
.btn-success {
    background: rgba(48, 209, 88, 0.08);
    border-color: rgba(48, 209, 88, 0.32);
    color: #30d158;
}
.btn-success:hover:not(:disabled) {
    background: rgba(48, 209, 88, 0.15);
    border-color: rgba(48, 209, 88, 0.55);
}
html.theme-light .btn-success { color: #15803d; border-color: rgba(21, 128, 61, 0.38); }

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Pressed / active feedback (Liquid feel) — kept out of reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .btn:active:not(:disabled),
    .chip:active,
    .chip-go:active,
    .chip-del:active,
    .seg-btn:active,
    .ai-quick:active:not(:disabled),
    .compact-icon-btn:active,
    .compact-city-btn:active,
    .toggle-label:active {
        transform: scale(0.97);
    }
    .daily-row:active:not(:disabled) { transform: scale(0.995); }
}


/* ── 6. Status & Storm Risk ───────────────────────────────── */
.status-info  { color: var(--accent-soft); }
.status-ok    { color: var(--color-green-text); }
.status-error { color: var(--color-red-text); }

.risk-low {
    border-color: rgba(48, 209, 88, 0.28) !important;
    border-color: color-mix(in srgb, var(--color-green) 28%, transparent) !important;
}
.risk-medium {
    border-color: rgba(255, 214, 10, 0.38) !important;
    border-color: color-mix(in srgb, var(--color-yellow) 38%, transparent) !important;
}
.risk-high {
    border-color: rgba(255, 159, 10, 0.48) !important;
    border-color: color-mix(in srgb, var(--color-orange) 48%, transparent) !important;
    box-shadow: var(--card-shadow), 0 0 32px rgba(255, 159, 10, 0.12) !important;
    box-shadow: var(--card-shadow), 0 0 32px color-mix(in srgb, var(--color-orange) 12%, transparent) !important;
}
.risk-extreme {
    border-color: rgba(255, 69, 58, 0.58) !important;
    border-color: color-mix(in srgb, var(--color-red) 58%, transparent) !important;
    animation: riskPulse 2.4s ease-in-out infinite;
}
@keyframes riskPulse {
    0%, 100% { box-shadow: var(--card-shadow); }
    50% {
        box-shadow: var(--card-shadow), 0 0 44px rgba(255, 69, 58, 0.22);
        box-shadow: var(--card-shadow), 0 0 44px color-mix(in srgb, var(--color-red) 22%, transparent);
    }
}


/* ── 7. AQI Colors ────────────────────────────────────────── */
.aqi-good      { color: var(--color-green-text); }
.aqi-fair      { color: var(--color-lime-text); }
.aqi-moderate  { color: var(--color-yellow-text); }
.aqi-poor      { color: var(--color-orange-text); }
.aqi-very-poor { color: var(--color-red-text); }
.aqi-extreme   { color: var(--color-pink-text); }


/* ── 8. Skeleton Loading ──────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; color: transparent !important; }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xs);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.11) 37%,
        rgba(255, 255, 255, 0.04) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.5s ease infinite;
}
html.theme-light .skeleton::after {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.09) 37%,
        rgba(0, 0, 0, 0.04) 63%
    );
    background-size: 400% 100%;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }


/* ── 9. Scrollbar ─────────────────────────────────────────── */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.scrollbar-thin::-webkit-scrollbar { height: 4px; width: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
html.theme-light .scrollbar-thin {
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
html.theme-light .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
}

/* Pulse dot */
.pulse-dot { animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%       { opacity: 1; transform: scale(1); }
}


/* ── 10. Hourly list rows ──────────────────────────────────── */
.hourly-list { display: flex; flex-direction: column; }

.hourly-row {
    display: grid;
    grid-template-columns: 3rem 1.75rem 2.5rem minmax(0, 1fr) minmax(0, 1fr) 3.25rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--divider);
}
.hourly-row:last-child { border-bottom: none; }

.hourly-row-now {
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0 -0.5rem;
}
html.theme-light .hourly-row-now { background: rgba(0,0,0,0.03); }

.hourly-time {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg-subtle);
    white-space: nowrap;
}
.hourly-row-now .hourly-time { color: var(--accent); font-weight: 600; }

.hourly-src-dot {
    font-size: 0.5rem;
    color: var(--accent);
    margin-left: 0.2rem;
    vertical-align: super;
}

.hourly-icon { width: 1.75rem; height: 1.75rem; }

.hourly-temp {
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.hourly-precip,
.hourly-wind {
    font-size: 0.75rem;
    color: var(--fg-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hourly-humidity {
    font-size: 0.75rem;
    color: var(--fg-subtle);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .hourly-row { gap: 0.4rem; }
    .hourly-precip, .hourly-wind { font-size: 0.6875rem; }
}

@media (max-width: 400px) {
    .hourly-row { grid-template-columns: 2.5rem 1.6rem 2.25rem minmax(0, 1fr) minmax(0, 1fr); }
    .hourly-humidity { display: none; }
    .hourly-time { font-size: 0.75rem; }
    .hourly-temp { font-size: 0.875rem; }
}


/* ── 11. Radar Map ────────────────────────────────────────── */
#rainviewerMap { min-height: 430px; }


/* ── 12. Trend Chart ──────────────────────────────────────── */
#trendChart {
    width: 100%;
    height: auto;
    display: block;
    cursor: crosshair;
    touch-action: pan-y;
}

.trend-tooltip {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    transform: translate(-50%, -115%);
    white-space: nowrap;
    border-radius: 0.625rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.72rem;
    line-height: 1.2rem;
    background: rgba(28, 28, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--fg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 100ms ease;
}
html.theme-light .trend-tooltip {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--fg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}


/* ── 13. Segment Buttons ──────────────────────────────────── */
.seg-btn {
    border-radius: var(--radius-sm);
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    color: var(--fg-muted);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 120ms, color 120ms, border-color 120ms, transform 150ms ease;
}
.seg-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--fg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html.theme-light .seg-btn.is-active {
    background: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.09);
    color: var(--fg);
}


/* ── 14. AI Chat Bubbles ──────────────────────────────────── */
.ai-bubble {
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    max-width: 92%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ai-bubble-user {
    margin-left: auto;
    background: var(--accent-surface);
    border: 1px solid rgba(10, 132, 255, 0.28);
    color: rgba(235, 235, 245, 0.90);
}
.ai-bubble-ai {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--tile-border);
    color: var(--fg);
}
html.theme-light .ai-bubble-user {
    background: rgba(0, 122, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.22);
    color: #1c3a6e;
}
html.theme-light .ai-bubble-ai {
    background: rgba(0, 0, 0, 0.04);
}
.ai-caret::after {
    content: "▋";
    margin-left: 1px;
    animation: caretBlink 1s step-end infinite;
    color: var(--accent);
}
@keyframes caretBlink { 50% { opacity: 0; } }


/* ── 15. AI Quick-Action Buttons ──────────────────────────── */
.ai-quick {
    border-radius: var(--radius-pill);
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg-muted);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 150ms, color 150ms, border-color 150ms, transform 150ms ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.ai-quick:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--fg);
}
.ai-quick:disabled { opacity: 0.40; cursor: not-allowed; }
html.theme-light .ai-quick {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.09);
}
html.theme-light .ai-quick:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    color: var(--fg);
}


/* ── 16. Saved Location Chips ─────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--tile-border);
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 150ms, color 150ms, border-color 150ms, transform 150ms ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.chip:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--fg);
}
.chip.is-active {
    background: var(--accent-surface);
    color: var(--accent-soft);
    border-color: rgba(10, 132, 255, 0.32);
}
html.theme-light .chip { background: rgba(0, 0, 0, 0.04); }
html.theme-light .chip:hover { background: rgba(0, 0, 0, 0.08); }
html.theme-light .chip.is-active {
    background: var(--accent-surface);
    border-color: rgba(0, 122, 255, 0.28);
}


/* ── 17. Search Results ───────────────────────────────────── */
.search-result-item {
    border-radius: 0.5rem;
    color: var(--fg);
    transition: background 100ms;
}
.search-result-item:hover,
.search-result-item[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.08);
}
html.theme-light .search-result-item:hover,
html.theme-light .search-result-item[aria-selected="true"] {
    background: rgba(0, 0, 0, 0.06);
}


/* ── 18. Protocol Notice ──────────────────────────────────── */
#protocolNotice {
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: #fcd34d;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
html.theme-light #protocolNotice { background: #fef3c7; border-color: rgba(217, 119, 6, 0.40); color: #78350f; }
html.theme-light #protocolNotice strong { color: #92400e; }
html.theme-light #protocolNotice code {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(217, 119, 6, 0.30);
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    color: #7c2d12;
}


/* Warning & error surfaces (ČHMÚ CTA, inline fetch errors) */
.warning-cta {
    background: rgba(255, 214, 10, 0.08);
    background: color-mix(in srgb, var(--color-yellow) 8%, transparent);
    border: 1px solid rgba(255, 214, 10, 0.25);
    border: 1px solid color-mix(in srgb, var(--color-yellow) 25%, transparent);
}
.warning-cta-title { color: var(--color-yellow-text); }

.error-panel {
    background: rgba(255, 69, 58, 0.08);
    background: color-mix(in srgb, var(--color-red) 8%, transparent);
    border: 1px solid rgba(255, 69, 58, 0.25);
    border: 1px solid color-mix(in srgb, var(--color-red) 25%, transparent);
    color: var(--fg-muted);
}


/* ── 19. Keyboard Shortcut Labels ─────────────────────────── */
kbd {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    padding: 0.125rem 0.4rem;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: var(--fg-muted);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
html.theme-light kbd {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.05);
}


/* ── 20. Details / Summary ────────────────────────────────── */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }


/* ── 21. Utility Classes ──────────────────────────────────── */

/* Header badge */
.badge-accent {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(10, 132, 255, 0.28);
    background: rgba(10, 132, 255, 0.10);
    padding: 0.2rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-soft);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html.theme-light .badge-accent {
    border-color: rgba(0, 122, 255, 0.25);
    background: rgba(0, 122, 255, 0.08);
}

/* AI section icon */
.ai-icon-wrap {
    display: grid;
    place-items: center;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    border: 1px solid rgba(10, 132, 255, 0.22);
    background: var(--accent-surface);
    font-size: 1.125rem;
    color: var(--accent-soft);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Toggle label (auto-refresh, auto-brief) */
.toggle-label {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--tile-border);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 150ms, color 150ms, transform 150ms ease;
}
.toggle-label:hover { background: rgba(255, 255, 255, 0.09); color: var(--fg); }
html.theme-light .toggle-label { background: rgba(0, 0, 0, 0.04); }
html.theme-light .toggle-label:hover { background: rgba(0, 0, 0, 0.08); }

/* Divider */
.divider { height: 1px; background: var(--divider); }


/* ── 22. Mobile Responsive Overrides ─────────────────────── */
@media (max-width: 767px) {
    /* Cards get reduced padding on small screens */
    .card { padding: 1.1rem 1rem !important; }

    /* AI section icon slightly smaller */
    .ai-icon-wrap { height: 2.25rem; width: 2.25rem; font-size: 1rem; }

    /* 16px floor stops iOS Safari auto-zooming the page on input focus */
    .inp { font-size: 1rem; }
}


/* ── 23. App layout ───────────────────────────────────────── */
.app-main {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 1.5rem;
}

@media (min-width: 768px) {
    .app-main {
        padding: 2rem 1.5rem 2rem;
    }
}

/* Mobile: top bar replaces top padding, extra bottom padding for floating nav pill */
@media (max-width: 767px) {
    .app-main {
        padding-top: 0.5rem;
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }
}


/* ── 24. Header card / sticky glass top bar ───────────────── */
.header-card { padding: 0.875rem 1.125rem !important; }

/* 1×1px probe: leaves the viewport as soon as the page scrolls,
   flips the sticky top bar into its "scrolled" glass state */
#topBarSentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Sticky compact top bar: city name + date + icons (mobile only) */
.mobile-top-bar { display: none; }

@media (max-width: 767px) {
    .mobile-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        position: sticky;
        top: 0;
        z-index: var(--z-topbar);
        padding: calc(env(safe-area-inset-top, 0px) + 0.625rem) 1rem 0.625rem;
        background: transparent;
        border-bottom: 1px solid transparent;
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }

    .mobile-top-bar.is-scrolled {
        background: var(--glass-bg-strong);
        border-bottom-color: var(--glass-rim);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
    }
}

.compact-loc { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.compact-city-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--fg);
    font-family: inherit;
    touch-action: manipulation;
    transition: transform 150ms ease;
}

.compact-city-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.compact-date {
    font-size: 0.75rem;
    color: var(--fg-muted);
    line-height: 1;
}

.compact-icon-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--fg-muted);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 150ms, color 150ms, transform 150ms ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.compact-icon-btn:hover { background: rgba(255,255,255,0.13); color: var(--fg); }
html.theme-light .compact-icon-btn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.09);
}

@keyframes spin-refresh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.compact-icon-btn.is-refreshing svg {
    animation: spin-refresh 0.8s linear infinite;
    transform-origin: center;
}
.compact-icon-btn.is-refreshing {
    color: var(--fg);
    pointer-events: none;
}

/* Full header content */
.header-expanded { display: block; }

/* Header card itself is hidden on mobile until the top bar opens it */
@media (max-width: 767px) {
    .header-card { display: none; }
    .header-card.is-open { display: block; }
}

@media (min-width: 768px) {
    .header-card { padding: 1.5rem !important; }
}


/* ── 25. Tab panel system ─────────────────────────────────── */
@media (max-width: 767px) {
    .tab-panel { display: none; }
    .tab-panel.is-active { display: block; animation: panelIn 280ms cubic-bezier(0.32, 0.72, 0, 1); }
}

@media (min-width: 768px) {
    .tab-panel { display: block !important; }
}

@keyframes panelIn {
    from { opacity: 0; transform: translateY(8px); }
}


/* ── 26. Weather hero card ────────────────────────────────── */
.weather-hero-card {
    padding: 1.25rem 1.125rem !important;
}

@media (min-width: 768px) {
    .weather-hero-card { padding: 1.75rem !important; }
}

/* Refresh-in-flight feedback: gentle pulse on the numbers being replaced */
@keyframes updatingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.weather-hero-card.is-updating .hero-temp,
.weather-hero-card.is-updating .metrics-grid {
    animation: updatingPulse 1.6s ease-in-out infinite;
}

.hero-main-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-temp-group { flex: 1; min-width: 0; }

.hero-temp {
    font-size: clamp(4.25rem, 22vw, 5.5rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--fg);
}

.temp-unit {
    font-size: 0.38em;
    font-weight: 400;
    letter-spacing: 0;
    vertical-align: top;
    margin-top: 0.25em;
    display: inline-block;
}

.hero-condition {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--fg);
    margin-top: 0.35rem;
}

.hero-subtext {
    font-size: 0.875rem;
    color: var(--fg-muted);
    margin-top: 0.25rem;
}

.hero-feels-desktop {
    font-size: 0.875rem;
    color: var(--fg-muted);
    margin-top: 0.35rem;
    display: none;
}

@media (min-width: 768px) {
    .hero-feels-desktop { display: block; }
    .hero-subtext { display: none; }
}

.hero-icon-group { flex-shrink: 0; margin-left: 0.75rem; }

.hero-icon {
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
}

@media (min-width: 768px) {
    .hero-icon { width: 7rem; height: 7rem; }
}

.hero-last-update {
    font-size: 0.72rem;
    color: var(--fg-subtle);
    margin-top: 0.5rem;
}


/* ── 27. Storm pill banner ────────────────────────────────── */
.storm-pill-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    margin-top: 1rem;
    border: 1px solid rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.06);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.pill-dot-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
    animation: pulseDot 2s ease-in-out infinite;
}

.pill-cape {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-muted);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Storm pill risk states */
.storm-pill-banner.risk-low {
    border-color: rgba(48, 209, 88, 0.28);
    border-color: color-mix(in srgb, var(--color-green) 28%, transparent);
    background: rgba(48, 209, 88, 0.07);
    background: color-mix(in srgb, var(--color-green) 7%, transparent);
}
.storm-pill-banner.risk-low .pill-dot-indicator { background: var(--color-green); }

.storm-pill-banner.risk-medium {
    border-color: rgba(255, 214, 10, 0.35);
    border-color: color-mix(in srgb, var(--color-yellow) 35%, transparent);
    background: rgba(255, 214, 10, 0.07);
    background: color-mix(in srgb, var(--color-yellow) 7%, transparent);
}
.storm-pill-banner.risk-medium .pill-dot-indicator { background: var(--color-yellow); }

.storm-pill-banner.risk-high {
    border-color: rgba(255, 159, 10, 0.45);
    border-color: color-mix(in srgb, var(--color-orange) 45%, transparent);
    background: rgba(255, 159, 10, 0.08);
    background: color-mix(in srgb, var(--color-orange) 8%, transparent);
}
.storm-pill-banner.risk-high .pill-dot-indicator { background: var(--color-orange); }

.storm-pill-banner.risk-extreme {
    border-color: rgba(255, 69, 58, 0.55);
    border-color: color-mix(in srgb, var(--color-red) 55%, transparent);
    background: rgba(255, 69, 58, 0.09);
    background: color-mix(in srgb, var(--color-red) 9%, transparent);
    animation: riskPulse 2.4s ease-in-out infinite;
}
.storm-pill-banner.risk-extreme .pill-dot-indicator { background: var(--color-red); }


/* ── 28. Metrics grid ─────────────────────────────────────── */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 1.25rem;
    }
}

/* Hide secondary tiles on mobile */
.metric-secondary { display: none; }

@media (min-width: 768px) {
    .metric-secondary { display: block; }
    .metric-span2 { grid-column: span 2; }
}

.metric-tile { padding: 0.875rem !important; }

@media (min-width: 768px) {
    .metric-tile { padding: 1rem !important; }
}

.metric-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-subtle);
}

.metric-value {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--fg);
    margin-top: 0.375rem;
    line-height: 1.15;
}

.metric-sub-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.wind-compass {
    width: 2.75rem;
    height: 2.75rem;
    opacity: 0.75;
    flex-shrink: 0;
}


/* ── 29. Daily list rows (Apple Weather style) ────────────── */
.daily-list { display: flex; flex-direction: column; }

.daily-row {
    display: grid;
    grid-template-columns: 3.25rem 2rem 3rem 1fr 5.5rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1.25rem 0.6rem 0;
    border-bottom: 1px solid var(--divider);
    /* Reset for the <button> element this row now is */
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    transition: background 150ms, transform 150ms ease;
}

.daily-row:last-child { border-bottom: none; }
.daily-row:hover { background: rgba(255,255,255,0.03); }
html.theme-light .daily-row:hover { background: rgba(0,0,0,0.02); }

.daily-row:disabled { cursor: default; }
.daily-row:disabled:hover { background: none; }

.daily-chevron {
    position: absolute;
    right: 0.1rem;
    top: 50%;
    translate: 0 -50%;
    font-size: 0.7rem;
    color: var(--fg-subtle);
    transition: transform 0.2s ease;
    pointer-events: none;
}
.daily-row[aria-expanded="true"] .daily-chevron { transform: translateY(-50%) rotate(180deg); }

.daily-expand { padding: 0.5rem 0 0.75rem; border-bottom: 1px solid var(--divider); }
.daily-expand:last-child { border-bottom: none; }
.daily-expand[hidden] { display: none; }
.daily-expand-source { margin-top: 0.375rem; font-size: 0.6875rem; color: var(--fg-subtle); }

.daily-row-today {
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    margin: 0 -0.5rem;
}
html.theme-light .daily-row-today { background: rgba(0,0,0,0.03); }

.daily-day {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fg);
    white-space: nowrap;
}

.daily-icon { width: 1.875rem; height: 1.875rem; }

.daily-pp {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    min-width: 2.5rem;
}

.daily-bar-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--tile-border);
    position: relative;
    overflow: visible;
}

.daily-bar-fill {
    position: absolute;
    inset-block: 0;
    border-radius: 3px;
    background: linear-gradient(to right, var(--color-cyan), var(--color-orange));
    min-width: 6px;
}

.daily-bar-now {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    background: var(--fg);
    border: 2px solid #000;
    border-radius: 50%;
    translate: -50% -50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.35);
    pointer-events: none;
}
html.theme-light .daily-bar-now { border-color: #fff; }

.daily-temps {
    font-size: 0.9375rem;
    text-align: right;
    white-space: nowrap;
}

.daily-min { color: var(--fg-muted); }
.daily-max { color: var(--fg); font-weight: 500; }

@media (max-width: 400px) {
    .daily-row { grid-template-columns: 2.75rem 1.75rem 2.5rem 1fr 4.75rem; gap: 0.45rem; }
    .daily-day { font-size: 0.875rem; }
    .daily-temps { font-size: 0.875rem; }
}


/* ── 30. Bottom navigation (Liquid Glass floating pill) ───── */
.bottom-nav { display: none; }

@media (max-width: 767px) {
    .bottom-nav {
        --nav-index: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.625rem);
        margin-inline: auto;
        max-width: 26rem;
        z-index: var(--z-nav);
        padding: 0.375rem;
        border-radius: var(--radius-pill);
        background: var(--glass-bg);
        border: 1px solid var(--glass-rim);
        box-shadow: var(--glass-shadow-float), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        isolation: isolate;
    }

    .bottom-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 42%);
        pointer-events: none;
    }

    html.theme-light .bottom-nav::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), transparent 46%);
    }
}

.nav-indicator {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    width: calc((100% - 0.75rem) / 5);
    height: calc(100% - 0.75rem);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateX(calc(var(--nav-index, 0) * 100%));
    transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}

html.theme-light .nav-indicator {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.10);
}

.nav-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.6rem 0.25rem 0.55rem;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    color: var(--fg-subtle);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    touch-action: manipulation;
    transition: color 150ms, transform 150ms ease;
    min-height: 3.375rem;
}

.nav-btn.is-active { color: var(--accent); }
.nav-btn.is-active svg {
    stroke-width: 2.1;
    transform: translateY(-0.5px) scale(1.06);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), stroke-width 300ms;
}
.nav-btn:not(.is-active):hover { color: var(--fg-muted); }

html.theme-light .nav-btn.is-active { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
    .nav-btn:active { transform: scale(0.90); }
}


/* ── 31. Toasts ────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    z-index: var(--z-toast);
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: min(92vw, 24rem);
    pointer-events: none;
}

@media (max-width: 767px) {
    .toast-stack { top: calc(env(safe-area-inset-top, 0px) + 3.6rem); }
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-rim);
    box-shadow: var(--glass-shadow-float), inset 0 1px 0 var(--glass-highlight);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1), transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast.is-bounce { animation: toastBounce 220ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes toastBounce {
    0%, 100% { transform: none; }
    50%       { transform: scale(1.03); }
}

.toast-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.toast-ok .toast-dot    { background: var(--color-green); }
.toast-error .toast-dot { background: var(--color-red); }
.toast-info .toast-dot  { background: var(--accent); }

.toast-text { flex: 1; min-width: 0; }

.toast-action {
    border: none;
    background: none;
    color: var(--accent-soft);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}


/* ── 32. AI Forecast Cards ───────────────────────────────────── */
.aif-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-subtle);
}

.aif-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aif-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.aif-temp {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.2;
    display: inline-block;
    min-width: 4.5rem;
}

.aif-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    font-size: 0.75rem;
    color: var(--fg-subtle);
}

.aif-ai-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--fg-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ── 33. Pull to refresh (mobile only) ────────────────────── */
.ptr-indicator { display: none; }

@media (max-width: 767px) {
    /* Blocks the browser's own native overscroll/PTR gesture so it never
       fights with the custom one driven by js/pull-refresh.js. */
    body { overscroll-behavior-y: contain; }

    .ptr-indicator {
        --ptr-pull: 0px;
        --ptr-progress: 0;
        display: grid;
        place-items: center;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 0.25rem);
        left: 50%;
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -1.25rem;
        border-radius: var(--radius-pill);
        background: var(--glass-bg-strong);
        border: 1px solid var(--glass-rim);
        box-shadow: var(--glass-shadow-float), inset 0 1px 0 var(--glass-highlight);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        color: var(--fg-muted);
        z-index: var(--z-topbar);
        opacity: var(--ptr-progress);
        transform: translateY(calc(var(--ptr-pull) - 100%));
        pointer-events: none;
    }

    .ptr-indicator svg {
        transform: rotate(calc(var(--ptr-progress) * 180deg));
    }

    .ptr-indicator.is-armed { color: var(--accent); }

    .ptr-indicator.is-refreshing {
        opacity: 1;
        transform: translateY(0.75rem);
        transition: transform 200ms ease;
    }
    .ptr-indicator.is-refreshing svg {
        animation: spin-refresh 0.8s linear infinite;
        transform-origin: center;
    }

    .ptr-indicator.is-settling {
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity 220ms ease, transform 220ms ease;
    }
}


/* ── 34. Tabular numerals ──────────────────────────────────── */
/* Fixed-width digits so refreshing values don't jitter the layout. */
.hero-temp,
.metric-value,
.hourly-temp,
.hourly-precip,
.hourly-wind,
.hourly-humidity,
.daily-temps,
.pill-cape,
.aif-temp,
.compact-date {
    font-variant-numeric: tabular-nums;
}


/* ── 35. Desktop hover lift ────────────────────────────────── */
@media (hover: hover) and (min-width: 768px) {
    .card {
        transition: transform 200ms ease;
    }
    .card:hover {
        transform: translateY(-2px);
    }
}


/* ── 36. Rain nowcast (15min precipitation breakdown) ────────── */
.nowcast-card {
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem 0.625rem;
    margin-top: 0.625rem;
    border: 1px solid rgba(10, 132, 255, 0.22);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    background: rgba(10, 132, 255, 0.06);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.nowcast-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nowcast-icon { font-size: 0.9rem; flex-shrink: 0; }

.nowcast-headline {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
}

.nowcast-bars {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 0.25rem;
    height: 3.25rem;
    margin-top: 0.625rem;
}

.nowcast-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.25rem;
}

.nowcast-bar {
    width: 100%;
    max-width: 1.25rem;
    height: var(--h, 6%);
    border-radius: 3px;
    background: var(--fg-subtle);
    transition: height 300ms ease;
}

.nowcast-bar-light  { background: color-mix(in srgb, var(--color-cyan) 45%, transparent); }
.nowcast-bar-moderate { background: color-mix(in srgb, var(--color-cyan) 75%, transparent); }
.nowcast-bar-heavy { background: var(--accent); }

.nowcast-bar-label {
    font-size: 0.5625rem;
    color: var(--fg-subtle);
    font-variant-numeric: tabular-nums;
}

/* Only the first, a middle and the last bar get a visible time label to avoid clutter. */
.nowcast-bar-col:not(:first-child):not(:nth-child(5)):not(:last-child) .nowcast-bar-label {
    visibility: hidden;
}