/* === Fonts === */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dm-sans.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dm-sans-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/lexend.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/lexend-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/lexend-deca.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/lexend-deca-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/space-mono.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/space-mono-700.woff2') format('woff2');
}

/* === CSS Variables — Light Mode (default) === */
:root {
    --bg: #f0f2f5;
    --card-bg: #ffffff;
    --text: #1a1a2e;
    --text-muted: #6b7280;
    --banner-h: 0px;
    --text-secondary: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --header-bg: #1a5276;
    --header-text: #ffffff;
    --search-bg: #ffffff;
    --search-border: #d1d5db;
    --area-header-bg: #f3f4f6;
    --area-header-text: #1a5276;
    --link-color: #1a5276;
    --link-active-bg: #e8f0fe;
    --temp-pos: #dc2626;
    --temp-neg: #2563eb;
    --temp-zero: #6b7280;
    --day-header-bg: #e8edf2;
    --day-header-border: #2980b9;
    --table-alt-bg: #fafbfc;
    --stale-bg: #fef3c7;
    --stale-text: #92400e;
}

/* === Dark Mode — auto (system preference) === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #111827;
        --card-bg: #1f2937;
        --text: #e5e7eb;
        --text-muted: #9ca3af;
        --text-secondary: #6b7280;
        --border: #374151;
        --border-light: #1f2937;
        --header-bg: #0f2d44;
        --header-text: #e5e7eb;
        --search-bg: #1f2937;
        --search-border: #4b5563;
        --area-header-bg: #1f2937;
        --area-header-text: #93c5fd;
        --link-color: #60a5fa;
        --link-active-bg: #1e3a5f;
        --temp-pos: #ef4444;
        --temp-neg: #60a5fa;
        --temp-zero: #9ca3af;
        --day-header-bg: #0f172a;
        --day-header-border: #3b82f6;
        --table-alt-bg: #172033;
        --stale-bg: #451a03;
        --stale-text: #fbbf24;
    }
}
/* === Dark Mode — manual override === */
:root[data-theme="dark"] {
    --bg: #111827;
    --card-bg: #1f2937;
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --text-secondary: #6b7280;
    --border: #374151;
    --border-light: #1f2937;
    --header-bg: #0f2d44;
    --header-text: #e5e7eb;
    --search-bg: #1f2937;
    --search-border: #4b5563;
    --area-header-bg: #1f2937;
    --area-header-text: #93c5fd;
    --link-color: #60a5fa;
    --link-active-bg: #1e3a5f;
    --temp-pos: #ef4444;
    --temp-neg: #60a5fa;
    --temp-zero: #9ca3af;
    --day-header-bg: #0f172a;
    --day-header-border: #3b82f6;
    --table-alt-bg: #172033;
    --stale-bg: #451a03;
    --stale-text: #fbbf24;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Header === */
.header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 6px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Forecast page: column layout so banner sits above the main row */
.header-forecast {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
}
.header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    min-width: 0;
}
.header h1 {
    font-family: 'Lexend', sans-serif;
    font-size: 18px;
    font-weight: 600;
}
.header a {
    color: var(--header-text);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.header .station-name {
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
/* Air quality indicator in header */
.aq-status {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.aq-leaf {
    display: flex;
    align-items: center;
    margin-right: 4px;
    line-height: 1;
}
.aq-leaf svg { display: block; }
.aq-leaf-gray { opacity: 0.5; }
.aq-param {
    font-family: 'Lexend', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.2;
    background: rgba(0,0,0,0.45);
}
/* EEA Air Quality Index colors on dark pill (rgba(0,0,0,0.45)) */
.aq-param.aq-moderate { color: #fde047; }   /* Yellow — EEA #F0E641 */
.aq-param.aq-poor     { color: #fdba74; }   /* Orange — EEA #FF5050 */
.aq-param.aq-verypoor { color: #fca5a5; }   /* Red    — EEA #960032 */
.aq-param.aq-extpoor  { color: #d8b4fe; }   /* Purple — EEA #7D2181 */

/* UV index indicator in header — matches .aq-param style */
.uv-badge {
    font-family: 'Lexend', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.2;
    flex-shrink: 0;
    cursor: default;
    background: rgba(0,0,0,0.45);
}
.uv-gray   { color: #d1d5db; }
.uv-green  { color: #4ade80; }
.uv-yellow { color: #fde047; }
.uv-orange { color: #fdba74; }
.uv-red    { color: #fca5a5; }
.uv-violet { color: #d8b4fe; }

/* Theme toggle button */
.theme-toggle {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.8;
    font-size: 16px;
    line-height: 1;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle {
    color: var(--header-text);
}

/* Autotrack button (forecast page) — rounded square */
#autotrack-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    color: var(--header-text);
    transition: background 0.2s;
}
#autotrack-btn:hover { background: rgba(255,255,255,0.22); }
#autotrack-btn.active {
    background: transparent;
    color: #fffb14;
    animation: autotrack-btn-glow 2s ease-in-out infinite;
}
@keyframes autotrack-btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 20, 0.548); transform: scale(1); }
    50%       { box-shadow: 0 0 0 5px rgba(255,20,147,0); transform: scale(1.08); }
}

/* Autotrack banner — lives inside the sticky header */
#autotrack-banner {
    display: none;
    background: #27ae60;
    color: white;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    font-size: 13px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.3;
}
#autotrack-banner.autotrack-active {
    display: flex;
}

.autotrack-pulse {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    flex-shrink: 0;
    animation: autotrack-pulse 1.5s ease-out infinite;
}
@keyframes autotrack-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

/* === Sticky header+search wrapper (index page) === */
.sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
}
.sticky-wrap .header {
    position: static;
}
.sticky-wrap .search-box {
    position: static;
}

/* === Search === */
.search-box {
    padding: 8px 12px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 40px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-box input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--search-border);
    border-radius: 8px;
    font-size: 16px; /* prevents iOS zoom */
    font-family: 'DM Sans', sans-serif;
    background: var(--search-bg);
    color: var(--text);
    outline: none;
}
.search-box input:focus {
    border-color: var(--header-bg);
    box-shadow: 0 0 0 2px rgba(26, 82, 118, 0.15);
}
#locate-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--search-border);
    border-radius: 8px;
    background: var(--search-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#locate-btn:hover {
    color: var(--link-color);
    border-color: var(--header-bg);
}
#locate-btn.active {
    background: var(--header-bg);
    color: #fff;
    border-color: var(--header-bg);
}
#locate-btn.loading svg {
    animation: locate-spin 1s linear infinite;
}
@keyframes locate-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* === Station List === */
.area-group { }
.area-group h2,
.recent-group h2 {
    font-family: 'Lexend', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--area-header-text);
    padding: 10px 16px 6px 13px;
    background: var(--area-header-bg);
    border-left: 3px solid var(--area-header-text);
    margin-top: 4px;
}
.area-group ul { list-style: none; }
.area-group li { border-bottom: 1px solid var(--border-light); }
.area-group li a {
    display: block;
    padding: 10px 16px 10px 22px;
    color: var(--link-color);
    text-decoration: none;
    font-size: 16px;
}
.area-group li a:active {
    background: var(--link-active-bg);
}

/* === Map overview: compact per-station weather chips === */
#map-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#map-days {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;          /* still scrolls if the labels ever grow */
    scrollbar-width: none;
}
#map-days::-webkit-scrollbar { display: none; }
#map-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wx-day {
    /* Sized to their label — equal widths clipped "Á morgun" on a 360px phone */
    flex: 0 1 auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 6px;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.wx-day-active {
    background: var(--header-bg);
    border-color: var(--header-bg);
    color: #fff;
}
#map-hide-btn,
#map-top-btn {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--link-color);
    cursor: pointer;
    display: flex;
    align-items: center;
}
#map-top-btn.active,
#map-hide-btn.active { background: var(--link-active-bg); border-color: var(--link-color); }
/* Icon toggle — keeps the day tabs roomy */
#map-hide-btn {
    color: var(--text-muted);
    padding: 5px 9px;
    display: flex;
    align-items: center;
}
#map-hide-btn.active { color: var(--link-color); }
#map-hide-btn .wx-eye-off { display: none; }
#map-hide-btn.active .wx-eye { display: none; }
#map-hide-btn.active .wx-eye-off { display: block; }

/* The station name is the one link out of a callout; tapping elsewhere closes it */
a.wx-name { color: var(--link-color); text-decoration: none; }
a.wx-name:active { text-decoration: underline; }

#map-container { flex: 1; position: relative; }
#map-status {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
}
#map-status[hidden] { display: none; }

#map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}
#map-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-key { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wx-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#map-status-line { display: flex; gap: 6px; white-space: nowrap; margin-left: auto; }
#map-status-line span:not(:empty) ~ span:not(:empty)::before { content: '· '; }

/* "How is this rated?" — info button in the legend row + its modal */
#map-info-btn {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Lexend', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
#map-info-btn:hover { color: var(--link-color); border-color: var(--link-color); }

#map-info-modal {
    position: absolute;
    inset: 0;
    z-index: 1200;   /* above the sheet, which is above Leaflet's controls */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#map-info-modal[hidden] { display: none; }
#map-info-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
#map-info-box {
    position: relative;
    background: var(--card-bg);
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 16px;
    max-width: 340px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}
#map-info-box h3 {
    font-family: 'Lexend', sans-serif;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
#map-info-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 0.7;
    cursor: pointer;
    padding: 0 2px;
}
#map-info-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.wx-info-note { font-size: 12px !important; }
.wx-info-factors { list-style: none; margin-bottom: 12px; }
.wx-info-factors li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.wx-info-factors b { font-weight: 700; }
.wx-info-weight {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--area-header-text);
}
.wx-info-factors small { grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); }
.wx-info-bands { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 12px; }
.wx-info-bands td { padding: 3px 4px; }
.wx-info-bands td:first-child { width: 16px; }
.wx-info-bands td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--text-muted); width: 56px; }
.wx-info-bands i { display: block; width: 11px; height: 11px; border-radius: 50%; }
/* Ceiling tables: value on the left, the cap it imposes on the right. */
.wx-info-caps { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.wx-info-caps caption {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--area-header-text);
    padding-bottom: 3px;
}
.wx-info-caps td { padding: 3px 4px; font-variant-numeric: tabular-nums; }
.wx-info-caps td:last-child { text-align: right; color: var(--text-muted); }
.wx-info-cap { font-size: 13px; margin-bottom: 10px; }

/* Frost swatches are half-and-half, matching the dots on the map. */
.wx-info-frost { font-size: 13px; margin-bottom: 8px; }
.wx-info-frosttiers i { width: 13px; height: 13px; }
.wx-info-frosttiers td:first-child { width: 18px; }

/* Ranked "where should I go" panel */
#map-top-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Leaflet puts its attribution/controls at z-index 1000, and #map-container
       is not a stacking context, so the sheet has to clear that itself. */
    z-index: 1100;
    transition: transform 0.18s ease-out;
    max-height: 62%;
    background: var(--card-bg);
    border-top: 2px solid var(--header-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.22);
    padding: 12px 0 0;
    /* Column layout with only the list scrolling, so the grab handle and the
       heading can never scroll out of reach. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#map-top-panel[hidden] { display: none; }

/* Drag handle — flick the sheet down to get the map back */
#map-top-grab {
    display: block;
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    margin: -6px 0 0;
    padding: 0;
    border: none;
    background: none;
    position: relative;
    cursor: grab;
    touch-action: none;     /* we handle the gesture, the browser must not scroll */
}
#map-top-grab::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 9px;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.15s;
}
#map-top-grab:hover::before,
#map-top-grab:active::before { background: var(--text-muted); }
#map-top-panel h3 {
    flex-shrink: 0;
    padding: 0 14px;
    font-family: 'Lexend', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--area-header-text);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
#map-top-panel h3 small { font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); text-transform: none; }
#map-footer { flex-wrap: wrap; }
#map-top-list {
    list-style: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the list must not pan the map */
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 18px;
}
#map-top-list .wx-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}
#map-top-list .wx-top-row:active { background: var(--link-active-bg); }

/* Region heading — Norðurland, Suðurland, … */
#map-top-list .wx-region {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 4px 2px 3px;
    border-bottom: 2px solid var(--border);
}
#map-top-list .wx-region:first-child { margin-top: 0; }
.wx-region-name {
    font-family: 'Lexend', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
}
.wx-region-best { font-size: 11px; font-weight: 700; margin-left: auto; }
.wx-region-count {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}
.wx-top-score {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wx-top-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.wx-top-name small { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); }
.wx-outlook { display: inline-flex; gap: 2px; }
.wx-outlook i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.wx-outlook .wx-out-none { background: var(--border); }
.wx-top-temps { display: flex; gap: 7px; font-size: 13px; font-variant-numeric: tabular-nums; }

/* The chip itself — icon / temperature / wind at 06, 12 and 18 */
.wx-chip-wrap { background: none; border: none; overflow: visible; }
.wx-chip {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--wx-band, var(--border));
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    padding: 3px 5px 4px;
    font-family: 'DM Sans', sans-serif;
    line-height: 1;
    cursor: pointer;
    width: 104px;
    box-sizing: border-box;
}
.wx-chip::after { /* pointer to the station location */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--card-bg);
}
.wx-chip-selected { border-color: var(--wx-band); box-shadow: 0 0 0 2px var(--wx-band), 0 2px 8px rgba(0,0,0,0.3); }
.wx-chip-head { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.wx-name {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wx-score {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: var(--wx-band);
    border-radius: 4px;
    padding: 1px 3px;
}
.wx-slots { display: flex; gap: 1px; }
.wx-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.wx-slot img { display: block; }
.wx-slot-empty { color: var(--text-secondary); font-size: 11px; align-self: center; }
.wx-hour { font-size: 8px; color: var(--text-muted); }
.wx-temp { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* TEMPORARY diagnostic readout, index.php?mapdebug=1. Remove with the flag. */
.wx-debug {
    position: absolute;
    left: 50px;              /* clear of the zoom buttons */
    right: 6px;
    top: 6px;
    z-index: 900;
    cursor: pointer;         /* tap it to get it out of the way */
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(17, 24, 39, 0.88);
    color: #e8f0fe;
    font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    overflow-x: auto;
}

/* Raunhiti on its own line under the reading, centred with it. Beside the
   reading it collided with the degree sign and read as noise, and two
   temperatures side by side forced the card wider than it needed to be. */
.wx-feels {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.1;
    margin-top: 1px;
}
.wx-t-cold { color: var(--temp-neg); }
.wx-t-mild { color: var(--text); }
.wx-t-warm { color: var(--temp-pos); }
.wx-wind {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 8px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.wx-wind-strong { color: var(--temp-pos); font-weight: 700; }
.wx-wind i {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 6px solid currentColor;
}

/* Country zoom: drop the name row, keep icon + temperature.
   Fixed height because the wind row is conditional here — the declutter pass
   reserves one box size per tier and must be able to trust it. */
.wx-chip-compact { width: 64px; height: 46px; padding: 2px 2px 3px; }
.wx-chip-compact .wx-temp { font-size: 11px; }
/* The raunhiti line takes the row the wind figure used to have, so a compact
   chip keeps its height. A frost column ("(−18°)" under "−12°") needs width. */
.wx-chip-compact.wx-chip-feels { width: 68px; }
.wx-chip-compact.wx-chip-feels-wide { width: 76px; }
.wx-chip-compact .wx-feels { font-size: 8px; margin-top: 0; }

/* === Recently viewed stations === */
.recent-group[hidden] { display: none; }
.recent-group ul { list-style: none; }
.recent-group li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}
.recent-group li a {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 10px 4px 10px 22px;
    color: var(--link-color);
    text-decoration: none;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-group li a:active { background: var(--link-active-bg); }
.recent-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    line-height: 0;
}
.recent-remove:hover { color: #c0392b; }
.recent-remove:active { color: #c0392b; }

/* === Proximity list (geolocation mode) === */
#proximity-list {
    list-style: none;
}
#proximity-list li {
    border-bottom: 1px solid var(--border-light);
}
#proximity-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--link-color);
    text-decoration: none;
    font-size: 16px;
}
#proximity-list li a:active {
    background: var(--link-active-bg);
}
.distance-badge {
    font-size: 16px;
    font-weight: 700;
    min-width: 62px;
    flex-shrink: 0;
}
.dist-near { color: #27ae60; }
.dist-mid  { color: #e67e22; }
.dist-far  { color: var(--text-muted); }

/* Geolocation error toast */
.locate-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 46, 0.92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
}

/* === Forecast Page === */
.forecast-meta {
    padding: 4px 16px 8px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.forecast-meta .source-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--area-header-bg);
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Stale data warning */
.stale-banner {
    padding: 6px 16px;
    background: var(--stale-bg);
    color: var(--stale-text);
    font-size: 12px;
    text-align: center;
}

/* === Day Sections === */
.day-section {
    margin-top: 0;
}
.day-header {
    font-family: 'Lexend', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px 6px;
    background: var(--day-header-bg);
    border-left: 8px solid var(--day-header-border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: calc(40px + var(--banner-h));
    z-index: 5;
}
.day-header > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sun-times {
    font-family: 'Lexend Deca', 'Lexend Deca Fallback', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.sun-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* === Aurora Badge === */
.aurora-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #a855f7;
    white-space: nowrap;
    flex-shrink: 0;
}
.aurora-icon {
    vertical-align: middle;
    flex-shrink: 0;
}
.aurora-pct {
    font-family: 'Lexend Deca', 'Lexend Deca Fallback', sans-serif;
    font-variant-numeric: tabular-nums;
}

/* === Forecast Table === */
.forecast-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    table-layout: fixed;
}
.forecast-table thead {
    position: sticky;
    top: calc(74px + var(--banner-h));
    z-index: 4;
}
.forecast-table thead th {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    white-space: nowrap;
}
.forecast-table thead th:first-child { border-left: 8px solid transparent; padding-left: 8px; }
.forecast-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    background: var(--card-bg);
}
.forecast-table tbody td {
    padding: 10px 6px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
}
.forecast-table tbody td:first-child { padding-left: 16px; }

/* Alert left band — applied to first cell since border on tr is unreliable */
.forecast-table tbody tr[data-alert] td:first-child {
    border-left: 8px solid transparent;
    padding-left: 8px;
}
.forecast-table tbody tr[data-alert="yellow"] td:first-child {
    border-left-color: #FFD700;
}
.forecast-table tbody tr[data-alert="orange"] td:first-child {
    border-left-color: #FF8C00;
}
.forecast-table tbody tr[data-alert="red"] td:first-child {
    border-left-color: #DC143C;
}

/* Header alert color */
.header.alert-yellow { background: #C5A600; }
.header.alert-orange { background: #D47600; }
.header.alert-red { background: #B01030; }
/* Column styles */
.col-time {
    font-family: 'Lexend Deca', 'Lexend Deca Fallback', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
}
.col-icon {
    width: 34px;
}
.col-icon svg,
.col-icon .weather-icon {
    display: block;
    margin: 0 auto;
}
.weather-icon {
    width: 36px;
    height: 36px;
}
.col-temp {
    white-space: nowrap;
}
.temp-pos { color: var(--temp-pos); }
.temp-neg { color: var(--temp-neg); }
.temp-zero { color: var(--temp-zero); }

.col-wind {
    font-size: 16px;
}
.col-wind > span,
.col-wind > svg {
    vertical-align: middle;
}
.col-wind .wind-arrow {
    margin-right: 3px;
}
.wind-arrow {
    display: inline-block;
    vertical-align: middle;
}

.col-precip {
    font-size: 16px;
    color: var(--text-muted);
}
.col-precip.has-precip {
    color: #4A90D9;
}


/* Value numbers: Lexend bold, slightly bigger */
.val {
    font-family: 'Lexend', 'Lexend Fallback', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
/* Unit text: DM Sans, smaller */
.unit {
    font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin-left: 1px;
    color: var(--text-muted);
}
.col-precip.has-precip .unit {
    color: #4A90D9;
}
.col-temp .unit {
    color: inherit;
}

/* === Error State === */
.error-page {
    text-align: center;
    padding: 60px 20px;
}
.error-page h2 {
    font-family: 'Lexend', sans-serif;
    font-size: 18px;
    margin-bottom: 8px;
}
.error-page p {
    color: var(--text-muted);
    margin-bottom: 16px;
}
.error-page a {
    color: var(--link-color);
}

/* === No results === */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    display: none;
}

/* === Alert Panel (bottom slide-up) === */
.alert-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.alert-panel-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.alert-panel-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.alert-panel-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.3;
}
.alert-panel-text {
    flex: 1;
    min-width: 0;
}
.alert-panel-yellow { background: #b8960a; }
.alert-panel-orange { background: #c06800; }
.alert-panel-red { background: #a00e2a; }
[data-theme="dark"] .alert-panel-yellow { background: #8a7008; }
[data-theme="dark"] .alert-panel-orange { background: #944f00; }
[data-theme="dark"] .alert-panel-red { background: #7a0a1f; }

/* === Info Panel (AQ/UV details) === */
.info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.info-panel-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.info-panel-inner {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    border-top: 3px solid var(--header-bg);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh;
    overflow-y: auto;
    position: relative;
}
.info-panel-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
}
.info-panel-close:hover { color: var(--text); background: var(--border-light); }
.info-section {
    margin-bottom: 8px;
}
.info-section:last-child { margin-bottom: 0; }
.info-title {
    font-family: 'Lexend', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1px;
}
.info-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.info-param {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--bg);
    border-radius: 4px;
    border-left: 3px solid var(--border);
}
.info-param-header {
    font-family: 'Lexend', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
.info-val {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}
.info-sep {
    color: var(--text-muted);
    margin: 0 2px;
    font-weight: 400;
}
.info-param-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}
.info-level {
    font-size: 10px;
    font-weight: 600;
    margin-left: 2px;
}
.info-param-advice {
    font-size: 11px;
    color: var(--text);
    margin-top: 2px;
    font-weight: 500;
    line-height: 1.4;
}
.info-param-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}
.info-sources {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.info-sources li::before {
    content: '•';
    margin-right: 4px;
    color: var(--text-muted);
}
.info-source-tag {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
    font-style: italic;
}
.info-wind-tag {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 2px;
    font-size: 10px;
    color: #6b7280;
    font-style: italic;
}
.info-wind-arrow {
    display: block;
    flex-shrink: 0;
}
.info-uv-advice {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    margin-top: 6px;
}
/* Clickable indicator styles */
.aq-clickable, .uv-clickable { cursor: pointer; }

/* Safety net: prevent horizontal overflow at any zoom */
body { overflow-x: hidden; }

/* === Wider screens === */
@media (min-width: 600px) {
    .forecast-table { font-size: 17px; }
}

/* === Tier 1: Moderate zoom / OS scaling === */
@media (max-width: 400px) {
    /* Header: tighten spacing */
    .header { gap: 6px; padding: 4px 8px; }
    .header-forecast { padding: 0; gap: 0; }
    .header-main { gap: 6px; padding: 4px 8px; }
    #autotrack-banner { padding: 4px 8px; }
    .header a { font-size: 16px; }
    .header .station-name { font-size: 13px; }
    .theme-toggle { width: 22px; height: 22px; font-size: 13px; }
    #autotrack-btn { width: 26px; height: 26px; }

    /* Day header: hide sunrise/sunset, compact */
    .day-header { padding: 6px 10px 4px; font-size: 11px; top: calc(30px + var(--banner-h)); }
    .sun-times { display: none; }

    /* Table: reduce sizes */
    .forecast-table { font-size: 14px; }
    .forecast-table thead { top: calc(55px + var(--banner-h)); }
    .forecast-table thead th { padding: 2px 3px; }
    .forecast-table tbody td { padding: 6px 3px; }
    .forecast-table tbody td:first-child { padding-left: 8px; }
    .col-time { font-size: 14px; }
    .val { font-size: 15px; }
    .unit { font-size: 10px; }
    .weather-icon { width: 28px; height: 28px; }
}

/* === Tier 1.5: Very small screens — hide non-essential header buttons === */
@media (max-width: 320px) {
    #autotrack-btn, .theme-toggle { display: none; }
}

/* === Tier 2: Extreme zoom / accessibility scaling === */
@media (max-width: 260px) {
    /* Header: hide back arrow, extreme compact */
    .header { padding: 3px 6px; }
    .header-forecast { padding: 0; gap: 0; }
    .header-main { padding: 3px 6px; }
    #autotrack-banner { padding: 3px 6px; }
    .header a { display: none; }
    .header .station-name { font-size: 12px; }

    /* Day header: tighter */
    .day-header { padding: 4px 6px 3px; border-left-width: 4px; top: calc(28px + var(--banner-h)); }
    .forecast-table thead { top: calc(50px + var(--banner-h)); }

    /* Table: hide precipitation column */
    .col-precip,
    .forecast-table thead th:nth-child(5) { display: none; }
    .forecast-table colgroup col:nth-child(1) { width: 20% !important; }
    .forecast-table colgroup col:nth-child(2) { width: 18% !important; }
    .forecast-table colgroup col:nth-child(3) { width: 25% !important; }
    .forecast-table colgroup col:nth-child(4) { width: 37% !important; }
    .forecast-table colgroup col:nth-child(5) { width: 0% !important; }

    /* Table: further size reductions */
    .col-time { font-size: 13px; }
    .val { font-size: 13px; }
    .weather-icon { width: 22px; height: 22px; }
    .forecast-table tbody td { padding: 4px 2px; }

    /* Alert row border: match thinner day-header */
    .forecast-table tbody tr[data-alert] td:first-child { border-left-width: 4px; padding-left: 4px; }
}

/* User location marker on map */
.user-location-dot {
    background: #ff1493;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ff1493;
    animation: location-pulse 2s ease-out infinite;
}
@keyframes location-pulse {
    0%   { box-shadow: 0 0 0 0px rgba(255,20,147,0.6); }
    100% { box-shadow: 0 0 0 14px rgba(255,20,147,0); }
}