:root {
            --ws-forecast-good: var(--ws-success, #10B981);
            --ws-forecast-marginal: var(--ws-warning, #FBBF24);
            --ws-forecast-poor: var(--ws-gray-500, #64748B);
            --ws-card-bg: var(--ws-bg-card-solid);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, var(--ws-bg-page) 0%, var(--ws-bg-page-secondary) 50%, var(--ws-bg-page) 100%);
            min-height: 100vh;
            color: var(--ws-text-primary);
        }
        
        /* Animated background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at 20% 20%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(20, 184, 166, 0.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        /* Full width on desktop (Jeff, 2026-10-07): the hour table is the page, and at 1200px a
           1920 screen showed 1.6 days of it; full width shows 2.7 without a sideways scroll. */
        .container {
            max-width: none;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        
        /* Site Navigation */
        .site-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .logo-text {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--ws-text-bright);
        }
        
        .logo-text .stoke {
            background: linear-gradient(135deg, var(--ws-primary-blue), var(--ws-teal));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .site-nav-links {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .site-nav-link {
            color: var(--ws-text-secondary);
            text-decoration: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.3s;
        }
        
        .site-nav-link:hover {
            color: var(--ws-text-primary);
            background: var(--ws-bg-card);
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--ws-text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
        }
        
        /* Header */
        .forecast-header {
            text-align: center;
            padding: 24px 20px 16px;
        }

        /* ── Profile Selector — unified card component ── */
        .profile-selector {
            position: relative;
            display: inline-block;
            margin-bottom: 16px;
        }

        .profile-selector-row {
            display: inline-flex;
            align-items: center;
            gap: 0;
            background: rgba(14, 165, 233, 0.08);
            border: 1px solid rgba(14, 165, 233, 0.2);
            border-radius: 16px;
            padding: 4px 4px 4px 0;
            transition: all 0.2s ease;
        }

        .profile-selector-row:hover {
            border-color: rgba(14, 165, 233, 0.35);
            background: rgba(14, 165, 233, 0.12);
            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.1);
        }

        [data-theme="light"] .profile-selector-row {
            background: rgba(14, 165, 233, 0.06);
            border-color: rgba(14, 165, 233, 0.2);
        }

        [data-theme="light"] .profile-selector-row:hover {
            background: rgba(14, 165, 233, 0.1);
            border-color: rgba(14, 165, 233, 0.35);
        }

        .profile-name-link {
            text-decoration: none;
            padding: 8px 8px 8px 20px;
            border-radius: 12px 0 0 12px;
            transition: all 0.2s ease;
        }

        .profile-name-link:hover .profile-name {
            opacity: 0.85;
        }

        .profile-dropdown-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: var(--ws-overlay-medium);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .profile-dropdown-btn:hover {
            background: var(--ws-overlay-strong);
            border-color: var(--ws-border-default);
        }

        .profile-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.6rem;
            font-weight: 800;
            color: #FFFFFF;
        }

        [data-theme="light"] .profile-name {
            color: #0F172A;
        }

        .profile-selector-arrow {
            font-size: 0.75rem;
            color: var(--ws-text-muted);
            transition: transform 0.2s;
        }

        .profile-dropdown-btn:hover .profile-selector-arrow {
            color: var(--ws-text-primary);
        }

        .profile-selector.open .profile-selector-arrow {
            transform: rotate(180deg);
        }

        /* Profile Dropdown */
        .profile-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            min-width: 240px;
            background: var(--ws-bg-card-solid);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--ws-border-default);
            border-radius: 14px;
            padding: 6px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 200;
        }

        .profile-selector.open .profile-dropdown {
            opacity: 1;
            visibility: visible;
        }

        .profile-option {
            display: block;
            width: 100%;
            padding: 12px 16px;
            background: transparent;
            border: none;
            border-radius: 10px;
            color: var(--ws-text-secondary);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .profile-option:hover {
            background: rgba(14, 165, 233, 0.1);
            color: var(--ws-text-primary);
        }

        .profile-option.active {
            background: rgba(14, 165, 233, 0.12);
            color: var(--ws-primary-blue);
            font-weight: 600;
        }

        /* ── Criteria + Model Meta Line ── */
        .forecast-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 0.8rem;
            color: var(--ws-text-muted);
            margin-bottom: 4px;
        }

        .meta-separator {
            color: var(--ws-border-default);
            font-size: 0.5rem;
        }

        /* A pin from the map (forecast.php pinFromUrl): the place, and the two ways back. */
        .pin-strip {
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 12px;
            margin: 6px 0 4px;
            font-size: 0.8rem;
            color: var(--ws-text-muted);
        }
        .pin-strip[hidden] { display: none; }
        .pin-strip-place { color: var(--ws-text-primary); font-weight: 600; }
        .pin-strip a { color: var(--ws-primary-blue); font-weight: 600; text-decoration: none; }
        .pin-strip a:hover { text-decoration: underline; }

        .meta-criteria {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: var(--ws-overlay-light);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 8px;
            font-size: 0.75rem;
            color: var(--ws-text-secondary);
        }

        .meta-criteria .value {
            color: var(--ws-text-primary);
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
        }

        /* The wave floor's second reading, when the rider's units and the page's differ. Muted
           and lighter than the number it explains — it is a basis, not a second criterion. */
        .meta-basis {
            font-family: inherit;
            font-weight: 500;
            color: var(--ws-text-muted);
            font-size: 0.68rem;
        }

        /* ── WIND / SURF — which number leads ──
           A segmented pair, not a picker: there are exactly two and both are worth showing, so
           the reader can see what the other one is without opening anything. */
        .lead-toggle {
            display: inline-flex;
            padding: 3px;
            gap: 2px;
            background: var(--ws-overlay-light);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 12px;
        }
        .lead-opt {
            appearance: none;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 6px 14px;
            border-radius: 9px;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            color: var(--ws-text-muted);
            transition: background 0.15s ease, color 0.15s ease;
        }
        .lead-opt:hover { color: var(--ws-text-secondary); }
        .lead-opt.on {
            background: var(--ws-primary-blue);
            color: #fff;
        }
        .lead-opt:focus-visible {
            outline: 2px solid var(--ws-primary-blue);
            outline-offset: 2px;
        }

        /* ── Model Toggle — styled chip selector ── */
        .model-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 10px;
            border: 1px solid var(--ws-border-default);
            background: var(--ws-overlay-light);
            color: var(--ws-text-primary);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .model-toggle-btn:hover {
            background: var(--ws-overlay-medium);
            border-color: var(--ws-border-strong);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .model-toggle-btn.open {
            color: var(--ws-primary-blue);
            border-color: rgba(14, 165, 233, 0.4);
            background: rgba(14, 165, 233, 0.08);
            box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
        }
        .model-toggle-arrow {
            font-size: 0.6rem;
            transition: transform 0.2s;
            color: var(--ws-text-muted);
        }
        .model-toggle-btn.open .model-toggle-arrow {
            transform: rotate(180deg);
            color: var(--ws-primary-blue);
        }

        /* ── Model Options Panel ── */
        .model-options-panel {
            display: none;
            margin-top: 14px;
            padding: 16px 20px;
            background: var(--ws-overlay-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 14px;
            border: 1px solid var(--ws-border-subtle);
            flex-direction: column;
            gap: 14px;
        }
        .model-options-panel.open {
            display: flex;
        }
        .model-options-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .model-options-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--ws-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            min-width: 90px;
        }

        /* ── Styled Select Dropdowns ── */
        .model-select,
        .wave-select {
            padding: 8px 32px 8px 14px;
            border-radius: 10px;
            border: 1px solid var(--ws-border-default);
            background-color: var(--ws-overlay-medium);
            color: var(--ws-text-primary);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }

        .model-select:hover,
        .wave-select:hover {
            border-color: var(--ws-border-strong);
            background-color: var(--ws-overlay-strong);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .model-select:focus,
        .wave-select:focus {
            outline: none;
            border-color: var(--ws-primary-blue);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
        }

        .model-select option,
        .wave-select option {
            background: var(--ws-bg-card-solid);
            color: var(--ws-text-primary);
            padding: 8px;
        }

        /* Advanced Toggle */
        .advanced-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--ws-text-muted);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            margin-left: 8px;
        }
        
        .advanced-toggle:hover {
            color: var(--ws-text-secondary);
            background: var(--ws-bg-card);
        }
        
        .advanced-toggle.open {
            color: var(--ws-primary-blue);
        }
        
        .advanced-toggle .toggle-arrow {
            transition: transform 0.2s;
            font-size: 0.65rem;
        }
        
        .advanced-toggle.open .toggle-arrow {
            transform: rotate(180deg);
        }
        
        /* Advanced Panel */
        .advanced-panel {
            display: none;
            margin-top: 12px;
            padding: 12px 16px;
            background: var(--ws-overlay-medium);
            border-radius: 10px;
            border: 1px solid var(--ws-border-subtle);
        }
        
        .advanced-panel.open {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .advanced-panel-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .advanced-label {
            font-size: 0.75rem;
            color: var(--ws-text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        /* wave-select styles now in shared .model-select, .wave-select block above */
        .wave-select option {
            background: var(--ws-bg-card-solid);
            color: var(--ws-text-primary);
        }
        
        .wave-model-info {
            font-size: 0.75rem;
            color: var(--ws-text-muted);
            font-style: italic;
        }
        
        /* Compare Models Toggle */
        .model-recommendation {
            margin: 6px 0 2px;
            padding: 6px 12px;
            font-size: 0.7rem;
            color: var(--ws-text-muted);
            text-align: center;
            line-height: 1.4;
        }

        .model-recommendation .rec-highlight {
            color: var(--ws-success);
            font-weight: 600;
        }

        .model-recommendation .rec-detail {
            display: block;
            margin-top: 2px;
            font-size: 0.65rem;
            opacity: 0.8;
        }

        .model-rec-rankings {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 6px;
            flex-wrap: wrap;
        }

        .model-rec-rankings .rank-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.65rem;
            color: var(--ws-text-muted);
        }

        .model-rec-rankings .rank-label {
            font-size: 0.6rem;
            opacity: 0.7;
            margin-bottom: 2px;
        }

        .model-rec-rankings .rank-model {
            font-weight: 600;
            color: var(--ws-text-primary);
        }

        .model-rec-rankings .rank-stat {
            font-size: 0.6rem;
            opacity: 0.7;
        }

        .compare-toggle-row {
            display: flex;
            justify-content: center;
            margin-top: 6px;
        }

        .compare-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid rgba(14, 165, 233, 0.3);
            background: rgba(14, 165, 233, 0.1);
            color: var(--ws-primary-blue);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .compare-toggle:hover {
            background: rgba(14, 165, 233, 0.2);
            border-color: rgba(14, 165, 233, 0.5);
        }
        
        .compare-toggle.active {
            background: linear-gradient(135deg, var(--ws-primary-blue), var(--ws-teal));
            border-color: transparent;
            color: white;
            box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
        }
        
        .compare-toggle .toggle-icon {
            font-size: 0.9rem;
        }
        
        .compare-toggle .premium-badge {
            font-size: 0.6rem;
            background: rgba(249, 115, 22, 0.2);
            color: var(--ws-accent-coral);
            padding: 1px 4px;
            border-radius: 4px;
            margin-left: 2px;
        }
        
        .compare-toggle.active .premium-badge {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        /* Compare Teaser (Free users) */
        .comparison-insights {
            display: none;
            padding: 16px 20px;
            margin-bottom: 16px;
        }
        
        .comparison-insights.active {
            display: block;
        }
        
        .insights-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .insights-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ws-text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .confidence-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .confidence-badge.high {
            background: rgba(16, 185, 129, 0.15);
            color: var(--ws-success);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .confidence-badge.medium {
            background: rgba(251, 191, 36, 0.15);
            color: var(--ws-warning);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }
        
        .confidence-badge.low {
            background: rgba(239, 68, 68, 0.15);
            color: var(--ws-error);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        .insights-grid {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .insight-card {
            flex: 1;
            min-width: 280px;
            padding: 14px 16px;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }
        
        .insight-card.confident {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(20, 184, 166, 0.08) 100%);
            border: 1px solid rgba(16, 185, 129, 0.25);
        }
        
        .insight-card.uncertain {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
            border: 1px solid rgba(251, 191, 36, 0.25);
        }
        
        .insight-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
        }
        
        .insight-card.confident::before {
            background: linear-gradient(90deg, var(--ws-success), var(--ws-teal));
        }
        
        .insight-card.uncertain::before {
            background: linear-gradient(90deg, var(--ws-warning), var(--ws-accent-coral));
        }
        
        .insight-icon {
            font-size: 1.2rem;
            margin-right: 8px;
        }
        
        .insight-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        
        .insight-card.confident .insight-title {
            color: var(--ws-success);
        }
        
        .insight-card.uncertain .insight-title {
            color: var(--ws-warning);
        }
        
        .insight-message {
            font-size: 0.9rem;
            color: var(--ws-text-primary);
            line-height: 1.4;
            margin-bottom: 10px;
        }
        
        .insight-models {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .model-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            background: var(--ws-overlay-strong);
            border: 1px solid var(--ws-border-default);
        }
        
        .model-chip .model-name {
            color: var(--ws-text-secondary);
        }
        
        .model-chip .model-value {
            color: var(--ws-text-primary);
        }
        
        .model-chip.hrrr { border-left: 2px solid var(--ws-primary-blue); }
        .model-chip.nws { border-left: 2px solid var(--ws-success); }
        .model-chip.gfs { border-left: 2px solid var(--ws-accent-coral); }
        .model-chip.ecmwf { border-left: 2px solid #8B5CF6; }
        
        .insights-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 24px;
            color: var(--ws-text-muted);
            font-size: 0.85rem;
        }
        
        .insights-loading .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(14, 165, 233, 0.3);
            border-top-color: var(--ws-primary-blue);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Day Selector - Sticky */
        /* ───────────────────────────────────────────────────────────────
           SPOT CHIPS — which spot, above the day selector's which day.
           Phone only: the desktop stack already shows every spot at once,
           and a switcher there would hide four cards to save no scrolling.
           The dot carries the same tier the card tint uses, so the row
           answers "which of mine is on" before anything is tapped.
           ─────────────────────────────────────────────────────────────── */
        .spot-selector-wrapper { display: none; }

        @media (max-width: 768px) {
            .spot-selector-wrapper {
                display: block;
                padding: 4px 0 10px;
            }
            .spot-selector {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding: 2px 20px;
                margin: 0 -20px;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .spot-selector::-webkit-scrollbar { display: none; }
        }

        .spot-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            flex: 0 0 auto;
            max-width: 62vw;
            padding: 8px 14px;
            background: var(--ws-overlay-light);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 999px;
            color: var(--ws-text-secondary);
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .spot-btn-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .spot-btn-dot {
            width: 7px;
            height: 7px;
            flex: 0 0 auto;
            border-radius: 50%;
            background: var(--ws-text-muted);
            opacity: 0.5;
        }
        .spot-btn.tier-fire .spot-btn-dot     { background: #C084FC; opacity: 1; }
        .spot-btn.tier-solid .spot-btn-dot    { background: #FB923C; opacity: 1; }
        .spot-btn.tier-go .spot-btn-dot       { background: #4ADE80; opacity: 1; }
        .spot-btn.tier-marginal .spot-btn-dot { background: var(--ws-text-secondary); opacity: 0.7; }
        .spot-btn.active {
            background: var(--ws-bg-card);
            border-color: var(--ws-primary-blue);
            color: var(--ws-text-bright);
        }
        .spot-btn:focus-visible {
            outline: 2px solid var(--ws-primary-blue);
            outline-offset: 2px;
        }

        .day-selector-wrapper {
            position: sticky;
            top: 0;
            z-index: 90;
            background: var(--ws-nav-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 15px 0 20px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--ws-border-subtle);
        }

        @media (min-width: 769px) {
            .day-selector-wrapper {
                top: 53px; /* Below sticky header */
            }
        }
        
        .day-selector {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: nowrap;
            padding: 4px 0;
        }
        
        /* Only enable scrolling when we have many days */
        .day-selector.scrollable {
            justify-content: flex-start;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 4px 20px;
            margin: 0 -20px;
            scrollbar-width: thin;
            scrollbar-color: var(--ws-primary-blue) var(--ws-scrollbar-track);
            -webkit-overflow-scrolling: touch;
        }

        .day-selector.scrollable::-webkit-scrollbar {
            height: 6px;
        }

        .day-selector.scrollable::-webkit-scrollbar-track {
            background: var(--ws-scrollbar-track);
            border-radius: 3px;
        }
        
        .day-selector.scrollable::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--ws-primary-blue), var(--ws-teal));
            border-radius: 3px;
        }
        
        .day-btn {
            padding: 10px 16px;
            background: var(--ws-overlay-light);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 12px;
            color: var(--ws-text-secondary);
            cursor: pointer;
            transition: all 0.25s ease;
            min-width: 85px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Top accent bar — mirrors dashboard .week-day::before */
        .day-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 4px;
            right: 4px;
            height: 2px;
            background: transparent;
            transition: background 0.25s;
            border-radius: 0 0 2px 2px;
        }

        .day-btn:hover {
            background: var(--ws-overlay-medium);
            border-color: var(--ws-border-default);
            transform: translateY(-1px);
        }

        .day-btn.active {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(20, 184, 166, 0.1));
            border-color: var(--ws-primary-blue);
            color: var(--ws-text-bright);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
        }
        .day-btn.active::before {
            background: linear-gradient(90deg, var(--ws-primary-blue), var(--ws-teal));
        }
        
        .day-btn.has-conditions {
            position: relative;
        }
        
        .day-btn.has-conditions::after {
            content: '';
            position: absolute;
            top: 6px;
            right: 6px;
            width: 8px;
            height: 8px;
            background: var(--ws-forecast-good);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--ws-forecast-good);
        }
        
        /* Off-day marker — day is outside the user's ride-days (days_of_week).
           Forecast page still shows the true tier + all data; this is just a flag. */
        .day-btn .off-day-dot {
            position: absolute;
            top: 5px;
            left: 6px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--ws-text-muted, #8a93a3);
            opacity: 0.75;
        }
        .day-selector-legend {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.65rem;
            color: var(--ws-text-muted);
            margin-top: 6px;
            padding-left: 2px;
        }
        .day-selector-legend .off-day-dot {
            position: static;
            display: inline-block;
        }

        /* Callback indicator - past fire/epic session matched */
        .day-btn.has-callback {
            border-color: rgba(249, 115, 22, 0.5);
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
        }
        
        .day-btn.has-callback.active {
            border-color: var(--ws-accent-coral);
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(251, 191, 36, 0.15));
        }
        
        .day-btn .callback-indicator {
            font-size: 0.7rem;
            margin-top: 2px;
            opacity: 0.9;
        }
        
        .day-name {
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 2px;
        }
        
        .day-date {
            font-size: 0.7rem;
            opacity: 0.7;
        }

        .day-confidence {
            font-size: 0.5rem;
            font-weight: 600;
            margin-top: 3px;
            line-height: 1;
        }
        .day-confidence.high { color: var(--ws-forecast-good, #22C55E); }
        .day-confidence.medium { color: var(--ws-warning, #FBBF24); }
        .day-confidence.low { color: var(--ws-error); }
        .day-status-icon { font-size: 0.7rem; }
        /* Tier colors — matched exactly to dashboard .week-day tiers */
        /* Day sparkline — the week's shape on the chips, so a rider picks a day
           before scrolling to it. Each bar is coloured by the hour ramp (windRamp() /
           waveRamp(), inline from updateDayIndicators(), 2026-10-04), so the strip reads as
           seven wind rows at a glance with the rider's floor baked in — the glance Windguru's
           table gives. The chip's status colour stays on its frame and dot; it no longer
           tints the bars (it did until 10-04: one verdict colour per day). */
        .day-spark {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 1px;
            height: 14px;
            margin: 4px 0 2px;
        }
        .day-spark i {
            flex: 1 1 0;
            min-width: 0;
            border-radius: 1px;
            background: var(--ws-text-muted);   /* only when the ramp has no value for the hour */
            opacity: 0.9;
        }
        .day-spark .dsp-gap { height: 2px; opacity: 0.15; }
        .day-btn.active .day-spark i { opacity: 1; }

        .day-btn.status-fire {
            border-color: rgba(192, 132, 252, 0.5);
            background: linear-gradient(180deg, rgba(192, 132, 252, 0.15) 0%, rgba(192, 132, 252, 0.05) 100%);
            box-shadow: 0 4px 12px rgba(192, 132, 252, 0.15), inset 0 1px 0 rgba(192, 132, 252, 0.2);
        }
        .day-btn.status-fire .day-name {
            color: #C084FC;
            text-shadow: 0 0 8px rgba(192, 132, 252, 0.4);
        }
        .day-btn.status-fire:hover {
            box-shadow: 0 6px 20px rgba(192, 132, 252, 0.25), inset 0 1px 0 rgba(192, 132, 252, 0.3);
            transform: translateY(-2px);
        }
        .day-btn.status-fire::before {
            background: linear-gradient(90deg, #C084FC, #A855F7);
        }
        .day-btn.status-fire.active {
            background: linear-gradient(180deg, rgba(192, 132, 252, 0.25) 0%, rgba(192, 132, 252, 0.1) 100%);
            border-color: #C084FC;
            box-shadow: 0 6px 20px rgba(192, 132, 252, 0.3);
        }

        .day-btn.status-solid {
            border-color: rgba(251, 146, 60, 0.4);
            background: linear-gradient(180deg, rgba(251, 146, 60, 0.1) 0%, rgba(251, 146, 60, 0.03) 100%);
        }
        .day-btn.status-solid::before { background: #FB923C; }
        .day-btn.status-solid .day-name { color: #FB923C; }
        .day-btn.status-solid:hover {
            box-shadow: 0 4px 14px rgba(251, 146, 60, 0.15);
            transform: translateY(-2px);
        }
        .day-btn.status-solid.active {
            background: linear-gradient(180deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.08) 100%);
            border-color: #FB923C;
            box-shadow: 0 4px 14px rgba(251, 146, 60, 0.2);
        }

        /* go is GREEN and eyes YELLOW: the ladder has to cool as it descends, and
           a green day sitting under a yellow one read as the better of the two. */
        .day-btn.status-go {
            border-color: rgba(74, 222, 128, 0.35);
            background: linear-gradient(180deg, rgba(74, 222, 128, 0.08) 0%, rgba(74, 222, 128, 0.02) 100%);
        }
        .day-btn.status-go::before { background: #4ADE80; }
        .day-btn.status-go .day-name { color: #4ADE80; }
        .day-btn.status-go:hover {
            box-shadow: 0 4px 14px rgba(74, 222, 128, 0.15);
            transform: translateY(-2px);
        }
        .day-btn.status-go.active {
            background: linear-gradient(180deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.05) 100%);
            border-color: #4ADE80;
            box-shadow: 0 4px 14px rgba(74, 222, 128, 0.2);
        }

        .day-btn.status-eyes {
            border-color: rgba(250, 204, 21, 0.3);
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.06) 0%, rgba(250, 204, 21, 0.02) 100%);
        }
        .day-btn.status-eyes::before { background: #FACC15; }
        .day-btn.status-eyes .day-name { color: #EAB308; }
        .day-btn.status-eyes:hover {
            box-shadow: 0 4px 14px rgba(250, 204, 21, 0.12);
            transform: translateY(-2px);
        }
        .day-btn.status-eyes.active {
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.12) 0%, rgba(250, 204, 21, 0.04) 100%);
            border-color: #FACC15;
        }

        .day-btn.status-sleep {
            border-color: rgba(100, 116, 139, 0.15);
            background: rgba(100, 116, 139, 0.03);
            opacity: 0.7;
        }
        .day-btn.status-sleep:hover {
            opacity: 0.85;
        }

        .peak-day-label {
            font-weight: 400;
            opacity: 0.7;
            font-size: 0.65rem;
            margin-left: 2px;
        }

        /* Location Cards — glassmorphism matching dashboard */
        .locations-grid {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .location-card {
            background: var(--ws-overlay-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--ws-shadow-card);
            transition: all 0.3s ease;
            animation: cardEntrance 0.5s ease-out both;
        }

        .location-card:hover {
            box-shadow: var(--ws-shadow-card), 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .location-card:nth-child(1) { animation-delay: 0.05s; }
        .location-card:nth-child(2) { animation-delay: 0.15s; }
        .location-card:nth-child(3) { animation-delay: 0.25s; }
        .location-card:nth-child(4) { animation-delay: 0.35s; }

        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .location-card { animation: none; }
        }

        /* Tier-aware card accents — matched to dashboard tiers */
        .location-card.tier-fire {
            border-color: rgba(192, 132, 252, 0.35);
            box-shadow: var(--ws-shadow-card), 0 0 24px rgba(192, 132, 252, 0.08);
        }
        .location-card.tier-fire .location-header {
            background: linear-gradient(135deg, rgba(192, 132, 252, 0.1) 0%, var(--ws-bg-page-secondary) 100%);
        }
        .location-card.tier-fire .peak-value {
            color: #C084FC;
            text-shadow: 0 0 12px rgba(192, 132, 252, 0.3);
        }

        .location-card.tier-solid {
            border-color: rgba(251, 146, 60, 0.3);
        }
        .location-card.tier-solid .location-header {
            background: linear-gradient(135deg, rgba(251, 146, 60, 0.07) 0%, var(--ws-bg-page-secondary) 100%);
        }
        .location-card.tier-solid .peak-value {
            color: #FB923C;
        }

        .location-card.tier-go {
            border-color: rgba(74, 222, 128, 0.25);
        }
        .location-card.tier-go .location-header {
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, var(--ws-bg-page-secondary) 100%);
        }
        .location-card.tier-go .peak-value {
            color: #4ADE80;
        }

        .location-card.tier-marginal {
            border-color: rgba(250, 204, 21, 0.2);
        }
        .location-card.tier-marginal .location-header {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.04) 0%, var(--ws-bg-page-secondary) 100%);
        }
        .location-card.tier-marginal .peak-value {
            color: #EAB308;
        }

        .location-card.tier-poor {
            border-color: rgba(100, 116, 139, 0.15);
        }

        .location-header {
            background: linear-gradient(135deg, var(--ws-bg-page), var(--ws-bg-page-secondary));
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .location-name {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--ws-text-bright);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .location-type-badge {
            font-size: 0.7rem;
            padding: 4px 10px;
            background: rgba(14, 165, 233, 0.2);
            border-radius: 20px;
            color: var(--ws-primary-blue);
            font-weight: 600;
        }
        
        /* Forecast Accuracy Section */
        .accuracy-section {
            margin-top: 8px;
        }
        
        .accuracy-header {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        
        .accuracy-header:hover {
            opacity: 0.8;
        }
        
        .accuracy-toggle {
            font-size: 0.6rem;
            color: var(--ws-text-secondary);
            transition: transform 0.2s;
        }
        
        .accuracy-badge {
            font-size: 0.65rem;
            padding: 3px 10px;
            background: rgba(16, 185, 129, 0.15);
            border-radius: 20px;
            color: var(--ws-success);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .accuracy-badge.marginal {
            background: rgba(251, 191, 36, 0.15);
            color: var(--ws-warning);
        }
        
        .accuracy-badge.low {
            background: rgba(239, 68, 68, 0.15);
            color: var(--ws-error);
        }
        
        .accuracy-badge.community {
            background: rgba(148, 163, 184, 0.15);
            color: var(--ws-text-secondary);
        }
        
        .accuracy-badge .accuracy-icon {
            font-size: 0.7rem;
        }
        
        .accuracy-badge .accuracy-sessions {
            font-size: 0.55rem;
            opacity: 0.8;
            margin-left: 2px;
        }
        
        .accuracy-details {
            margin-top: 10px;
            padding: 12px 16px;
            background: rgba(15, 23, 42, 0.6);
            border-radius: 10px;
            border: 1px solid var(--ws-border-default);
        }
        
        .accuracy-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--ws-border-subtle);
        }
        
        .accuracy-detail-row:last-of-type {
            border-bottom: none;
        }
        
        .accuracy-detail-row .detail-label {
            font-size: 0.75rem;
            color: var(--ws-text-secondary);
        }
        
        .accuracy-detail-row .detail-value {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--ws-text-primary);
            font-family: 'JetBrains Mono', monospace;
        }
        
        .accuracy-detail-row .detail-value.under {
            color: var(--ws-warning);
        }
        
        .accuracy-detail-row .detail-value.over {
            color: var(--ws-primary-blue);
        }
        
        .accuracy-detail-row.lead-times {
            flex-direction: row;
            justify-content: space-around;
            padding: 10px 0;
            gap: 8px;
        }
        
        .lead-time-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        
        .lead-time-item .lead-label {
            font-size: 0.6rem;
            color: var(--ws-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .lead-time-item .lead-value {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--ws-text-primary);
            font-family: 'JetBrains Mono', monospace;
        }
        
        .accuracy-meta {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--ws-border-subtle);
            font-size: 0.6rem;
            color: var(--ws-text-muted);
            text-align: center;
        }
        
        .peak-summary {
            display: flex;
            gap: 24px;
            align-items: center;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 8px;
            transition: background 0.2s;
        }

        .peak-summary:hover {
            background: rgba(14, 165, 233, 0.08);
        }
        
        .peak-item {
            text-align: center;
        }
        
        .peak-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--ws-text-muted);
            margin-bottom: 4px;
        }
        
        .peak-value {
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--ws-primary-blue-light);
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: -0.02em;
        }

        .peak-value.good {
            color: var(--ws-forecast-good);
            text-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
        }
        
        /* Timeline - Continuous 7-day scroll */
        .timeline-container {
            padding: 16px 0 16px 0;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: var(--ws-primary-blue) var(--ws-scrollbar-track);
            position: relative;
        }

        .timeline-container::-webkit-scrollbar {
            height: 8px;
        }

        .timeline-container::-webkit-scrollbar-track {
            background: var(--ws-scrollbar-track);
            border-radius: 4px;
        }
        
        .timeline-container::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--ws-primary-blue), var(--ws-teal));
            border-radius: 4px;
        }
        
        .forecast-table {
            display: table;
            border-collapse: collapse;
        }
        
        .table-row {
            display: table-row;
        }
        
        .row-label-cell {
            display: table-cell;
            position: sticky;
            left: 0;
            z-index: 10;
            background: var(--ws-bg-card-solid);
            padding: 0 12px;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--ws-text-secondary);
            white-space: nowrap;
            vertical-align: middle;
            text-align: right;
            border-right: 1px solid var(--ws-border-subtle);
            box-shadow: 2px 0 8px rgba(0,0,0,0.3);
        }
        
        .row-label-cell .icon {
            margin-right: 4px;
        }
        
        .day-header-cell {
            display: table-cell;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--ws-text-secondary);
            background: rgba(15, 23, 42, 0.6);
            text-align: center;
            padding: 8px 0;
            border-bottom: 2px solid var(--ws-border-default);
            border-left: 3px solid rgba(100, 116, 139, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .day-header-cell.today {
            background: rgba(16, 185, 129, 0.15);
            color: var(--ws-success);
            border-bottom-color: var(--ws-success);
        }
        
        .day-header-cell:first-of-type {
            border-left: none;
        }
        
        .hours-cell {
            display: table-cell;
            vertical-align: bottom;
            padding: 6px 0;
            border-left: 3px solid rgba(100, 116, 139, 0.4);
            background: rgba(15, 23, 42, 0.3);
        }
        
        .hours-cell:first-of-type {
            border-left: none;
        }
        
        .hours-container {
            display: flex;
            gap: 1px;
            position: relative;
        }
        
        .hour-cell {
            width: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding: 2px 0;
        }
        
        /* Bar styles */
        .bar-container {
            width: 24px;
            height: 60px;
            background: rgba(51, 65, 85, 0.5);
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        
        .bar-fill {
            width: 100%;
            border-radius: 4px 4px 0 0;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: height 0.3s ease;
        }
        
        .bar-fill.gust { 
            background: rgba(14, 165, 233, 0.4); 
            z-index: 1;
        }
        
        /* Neutral mode: /explore has no rider profile, so a bar's height still
           encodes speed but its colour must not imply good/marginal/poor. Reads as
           data, deliberately not as a verdict — see assets/js/ws-forecast-view.js. */
        .bar-fill.neutral {
            background: linear-gradient(to top, #1D4E77, #38BDF8);
            z-index: 2;
            position: absolute;
            bottom: 0;
        }

        .bar-fill.poor { 
            background: linear-gradient(to top, #475569, #64748B); 
            z-index: 2;
            position: absolute;
            bottom: 0;
        }
        .bar-fill.marginal { 
            background: linear-gradient(to top, #D97706, #FBBF24); 
            z-index: 2;
            position: absolute;
            bottom: 0;
            box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
        }
        .bar-fill.good { 
            background: linear-gradient(to top, #059669, #10B981, #34D399); 
            box-shadow: 0 0 12px rgba(16,185,129,0.5), 0 0 20px rgba(16,185,129,0.3); 
            z-index: 2;
            position: absolute;
            bottom: 0;
            animation: good-pulse 2s ease-in-out infinite;
        }
        
        @keyframes good-pulse {
            0%, 100% { box-shadow: 0 0 12px rgba(16,185,129,0.5), 0 0 20px rgba(16,185,129,0.3); }
            50% { box-shadow: 0 0 16px rgba(16,185,129,0.7), 0 0 28px rgba(16,185,129,0.4); }
        }
        
        .wind-arrow {
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.65rem;
            color: var(--ws-text-primary);
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            line-height: 1;
            font-weight: bold;
            z-index: 3;
            pointer-events: none;
        }
        
        /* Value label */
        .cell-value {
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--ws-text-primary);
            font-family: 'JetBrains Mono', monospace;
            margin-top: 3px;
            line-height: 1;
        }
        
        .cell-sub {
            font-size: 0.5rem;
            color: var(--ws-primary-blue-light);
            line-height: 1;
        }
        
        /* Time labels row */
        .time-row .hours-cell {
            vertical-align: top;
            padding: 2px 0;
        }
        
        /* Temp row specific */
        .temp-cell {
            width: 24px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .temp-value {
            font-size: 0.6rem;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .temp-value.cold { color: #3B82F6; }
        .temp-value.cool { color: #06B6D4; }
        .temp-value.warm { color: #F59E0B; }
        .temp-value.hot { color: var(--ws-error); }
        
        /* Sky cell */
        .sky-cell {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .sky-row .hour-cell {
            justify-content: center;
        }

        /* Precip cell */
        .precip-cell {
            width: 28px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7px;
            font-weight: 600;
            letter-spacing: -0.03em;
            color: var(--ws-text-secondary);
            opacity: 0.55;
        }

        .precip-cell.precip-high { color: #ef4444; opacity: 1; }
        .precip-cell.precip-med { color: #f97316; opacity: 0.9; }
        .precip-cell.precip-warn { color: #facc15; opacity: 0.8; }
        .precip-cell.precip-low { opacity: 0.45; }

        .precip-row .hour-cell {
            justify-content: center;
        }
        
        /* Night overlay sits on top of cells */
        .night-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
            border-radius: 4px;
        }
        
        /* Time label styling for 12-hour format */
        .time-label {
            width: 28px;
            font-size: 0.65rem;
            color: var(--ws-text-secondary);
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
        }
        
        .time-label.night {
            color: var(--ws-text-muted);
        }
        
        /* Row-specific heights */
        .sky-row .hours-cell { padding: 4px 0; }
        .wind-row .hours-cell { padding: 6px 0; }
        .wave-row .hours-cell { padding: 6px 0; }
        .temp-row .hours-cell { padding: 4px 0; }

        /* ───────────────────────────────────────────────────────────────
           PHONE HOUR LIST — the transposed timeline
           Hours run down the page, one full-width row each, instead of
           across in 28px columns. Hidden above 600px; the table is hidden
           below it. The left band is the rideable window drawn as one
           continuous stripe, so a rider sees the shape of the day before
           reading a single number — it is the only loud thing in the row.
           ─────────────────────────────────────────────────────────────── */
        .hour-list { display: none; }

        .hour-day + .hour-day { margin-top: 20px; }

        .hour-day-head {
            display: flex;
            align-items: baseline;
            gap: 12px;
            padding: 0 4px 6px;
            border-bottom: 1px solid var(--ws-border-subtle);
            margin-bottom: 2px;
        }
        .hour-day-head.today .hday-label { color: var(--ws-text-bright); }
        .hday-label {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--ws-text-primary);
        }
        /* The day's daytime air temperature, once — the one-line rows carry no temp. */
        .hday-temp { font-size: 0.72rem; color: var(--ws-text-muted); font-variant-numeric: tabular-nums; }
        .hday-verdict { margin-left: auto; }
        .hday-on    { font-size: 0.75rem; color: var(--ws-forecast-good); font-weight: 600; }
        .hday-brief { font-size: 0.75rem; color: var(--ws-forecast-marginal); font-weight: 600; }
        .hday-off   { font-size: 0.75rem; color: var(--ws-text-muted); }

        /* Night rows are collapsed until asked for — a 24-row day is otherwise
           eight rows of nothing. */
        .hour-rows .hour-row.is-night { display: none; }
        .hour-rows.show-night .hour-row.is-night { display: grid; }

        .hour-row {
            display: grid;
            /* time · sky+rain · lead · secondary. ONE LINE per row (2026-10-06): the
               sub-line that sat under the number (direction, gust, rain, temp) now sits
               beside it, rain moved under the sky icon and temperature into the day head.
               One hour per row (the run collapse was tried and taken out the same day —
               see groupHourRuns() in forecast.php), so the time column fits "12pm". The
               lead column is minmax(0,1fr) and its text is what gives way (.hour-sub
               ellipsis), never the secondary number. The 10px left inset is where a 4px
               verdict band and its gap sat until 2026-10-06; the bar's ramp carries the
               verdict now (WS_RAMP in forecast.php), so the band said the same thing
               twice and went. */
            grid-template-columns: 48px 22px minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 6px;
            padding: 6px 8px 6px 10px;
            border-bottom: 1px solid var(--ws-border-subtle);
            position: relative;
        }
        .hour-row:last-child { border-bottom: none; }

        .hour-time {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--ws-text-secondary);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
            padding-left: 4px;
            white-space: nowrap;
        }
        .hour-row.is-on .hour-time { color: var(--ws-text-primary); }

        /* ── THE LEAD COLUMN ──
           `.hour-primary` is the wide (1fr) cell and `.hour-secondary` the compact one; WHICH
           QUANTITY sits in each is the wind/surf toggle's whole job (hourRowHTML()). The
           layout is addressed by position and the quantity keeps its own class wherever it
           lands, so a rule about wind stays a rule about wind rather than becoming a rule
           about "the fourth column". */
        .hour-primary {
            display: flex;
            align-items: baseline;
            column-gap: 5px;
            min-width: 0;
        }
        .hour-arrow {
            font-size: 0.95rem;
            line-height: 1;
            color: var(--ws-text-secondary);
        }
        .hour-kt {
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--ws-text-primary);
            font-variant-numeric: tabular-nums;
        }
        .hour-row.is-on .hour-kt { color: var(--ws-forecast-good); }

        .hour-unit {
            font-size: 0.68rem;
            color: var(--ws-text-muted);
            font-weight: 500;
        }
        /* Gust and direction are modifiers on the wind number, not peers — beside it,
           and the first thing to give way (ellipsis) on a narrow phone. */
        .hour-sub {
            flex: 0 1 auto;
            min-width: 0;
            font-size: 0.68rem;
            color: var(--ws-text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Sky, with the run's rain chance under it. Same icon set as the table's Sky row
           (WS_SKY_ICONS / skyIconFor), one map with two callers, drawn small enough to
           sit beside the clock; the icon and the figure stack inside the row's height. */
        .hour-sky {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            row-gap: 1px;
            line-height: 0;
        }
        .hour-sky svg { width: 16px; height: 16px; }

        /* ── Wind strength as colour: windRamp() in forecast.php ──
           The bar is the magnitude channel and the left band is the verdict channel.
           They must not merge: a bar that turns green when the hour passes would say
           the same thing twice and leave strength unsaid. The hexes come from the
           script, not from here — it is the ramp that owns them. */
        /* A fixed width, so a bar's length is comparable down the column. When the row
           is short of room the bar gives first — shrink 100 against the sub-line's 1,
           because flex shrinks in proportion and at 10 the sub-line still lost 4px of a
           direction while the bar had 8px to give — down to 16px, before a direction or
           gust loses a letter. */
        .hour-bar {
            display: block;
            flex: 0 100 48px;
            width: 48px;
            min-width: 16px;
            height: 6px;
            border-radius: 3px;
            background: rgba(148, 163, 184, 0.10);
            overflow: hidden;
            align-self: center;
        }
        .hour-bar i {
            display: block;
            height: 100%;
            border-radius: 3px;
        }

        /* Rain sits under the sky icon as a figure, on the same bands as the table's
           .precip-cell — shown from 1%, because "no rain shown" should mean no rain. */
        .hour-precip {
            font-size: 0.55rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.01em;
            color: var(--ws-text-secondary);
            font-variant-numeric: tabular-nums;
        }
        .hour-precip.precip-high { color: #ef4444; }
        .hour-precip.precip-med  { color: #f97316; }
        .hour-precip.precip-warn { color: #facc15; }
        .hour-precip.precip-low  { opacity: 0.6; }

        /* NOW. The table's .now-indicator lives inside .timeline-container, which is
           hidden on a phone — this is the hour list's own present tense. */
        /* Tint plus the tag, and deliberately NOT a left edge: the left 4px is the
           rideable band, and a second mark in the same pixels would make a rideable
           hour and the present hour one indistinguishable stripe. */
        .hour-row.is-now { background: rgba(14, 165, 233, 0.09); }
        .hour-row.is-now .hour-time { color: var(--ws-text-bright); }
        .hour-now-tag {
            display: block;
            font-size: 0.55rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            color: var(--ws-primary-blue);
        }

        .hour-secondary {
            display: flex;
            align-items: baseline;
            column-gap: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ws-text-secondary);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .hour-val { flex: 0 0 auto; white-space: nowrap; }
        .hour-val .hour-unit { margin-left: 2px; }
        /* Surf lead: the wind is the secondary and carries a direction range and a gust
           ("12–13 kt WNW–NW g 15", ~130px), while the lead cell needs only a wave, a short
           bar and a period — both single values, because the run was collapsed on them.
           The secondary track is capped (a px cap: a % max-width on an auto track is
           cyclic and gave the lead cell 74px) so the period never gives way; past the cap
           the gust — last in the secondary — loses letters first. */
        .hour-row.lead-wave { grid-template-columns: 48px 22px minmax(0, 1fr) minmax(0, 132px); }
        .hour-row.lead-wave .hour-secondary { justify-self: end; min-width: 0; max-width: 100%; }
        .hour-row.lead-wave .hour-bar { flex-basis: 40px; min-width: 12px; }

        .hour-night-toggle {
            display: block;
            width: 100%;
            margin-top: 6px;
            padding: 8px;
            background: transparent;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 8px;
            color: var(--ws-text-muted);
            font-size: 0.72rem;
            font-family: inherit;
            cursor: pointer;
        }
        .hour-night-toggle:hover { color: var(--ws-text-secondary); }
        .hour-night-toggle:focus-visible {
            outline: 2px solid var(--ws-primary-blue);
            outline-offset: 2px;
        }

        /* ONE mobile boundary, 768px. It used to be 600 here and 768 for the page's own
           mobile chrome, so 601–768px got the sideways-scrolling table AND the phone
           layout at the same time. If this number moves, the .no-hour-list rule below
           moves with it — it is the fallback that gives the table back. */
        @media (max-width: 768px) {
            /* .no-hour-list is set by safeHourList()'s catch: if the phone list
               failed to build, the table comes back rather than nothing. */
            html:not(.no-hour-list) .timeline-container { display: none; }
            .hour-list { display: block; }

            /* ONE SPOT AT A TIME. Five stacked cards is why a rider could not reach
               the fourth. Visibility only — never remove or reorder a card, because
               everything downstream addresses them by array position. The fallback:
               if the chip row never rendered (one spot, or a JS failure before
               generateSpotSelector()), .spot-switch is never set and every card shows
               as it did before — an empty page is not an acceptable failure here. */
            .locations-grid.spot-switch .location-card { display: none; }
            .locations-grid.spot-switch .location-card.is-active { display: block; }
        }

        /* Below ~360px the columns close up; the lead cell's sub-line is what gives. */
        @media (max-width: 360px) {
            .hour-row { grid-template-columns: 44px 20px minmax(0, 1fr) auto; column-gap: 5px; padding-left: 8px; }
            .hour-time { font-size: 0.66rem; padding-left: 2px; }
        }

        /* Tide row — SVG curve + High/Low strip (ocean spots only) */
        .tide-row .hours-cell { padding: 4px 0; vertical-align: top; }
        .tide-cell {
            display: block; /* override flex; single SVG child sized to grid width */
        }
        .tide-svg {
            display: block;
        }
        .tide-svg .tide-line {
            fill: none;
            stroke: var(--ws-primary-blue, #0EA5E9);
            stroke-width: 1.5;
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        .tide-svg .tide-dot.high { fill: var(--ws-primary-blue, #0EA5E9); }
        .tide-svg .tide-dot.low  { fill: var(--ws-text-muted, #94A3B8); }
        .tide-svg text {
            font-size: 8px;
            font-family: inherit;
        }
        .tide-svg .tide-lbl-type { font-weight: 700; }
        .tide-svg .tide-lbl-type.high { fill: var(--ws-primary-blue, #0EA5E9); }
        .tide-svg .tide-lbl-type.low  { fill: var(--ws-text-secondary, #CBD5E1); }
        .tide-svg .tide-lbl-time { fill: var(--ws-text-muted, #94A3B8); }

        /* Now indicator - vertical line showing current time */
        .now-indicator {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--ws-accent-coral), var(--ws-warning));
            z-index: 20;
            box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
            pointer-events: none;
        }
        
        .now-indicator::before {
            content: 'NOW';
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            font-weight: 700;
            color: var(--ws-accent-coral);
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        
        /* Live link in header */
        .live-link {
            margin-left: 12px;
            color: var(--ws-primary-blue);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 500;
            padding: 4px 8px;
            background: rgba(14, 165, 233, 0.1);
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .live-link:hover {
            background: rgba(14, 165, 233, 0.2);
        }
        
        .wave-legend {
            font-size: 0.75rem;
            color: var(--ws-text-secondary);
            text-align: center;
            padding: 12px 24px;
            border-top: 1px solid var(--ws-border-subtle);
        }
        
        /* Day Narrative — buddy commentary */
        .day-narrative {
            background: var(--ws-overlay-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 16px;
            padding: 20px 24px;
            margin-bottom: 24px;
            animation: cardEntrance 0.4s ease-out both;
            position: relative;
            overflow: hidden;
        }

        /* Top accent bar — gradient appears based on day quality */
        .day-narrative::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--ws-primary-blue), var(--ws-teal));
            opacity: 0.6;
        }

        .day-narrative.tier-fire::before {
            background: linear-gradient(90deg, #C084FC, #A855F7);
            opacity: 1;
        }
        .day-narrative.tier-solid::before {
            background: #FB923C;
            opacity: 0.8;
        }
        .day-narrative.tier-go::before {
            background: #4ADE80;
            opacity: 0.7;
        }

        .day-narrative-text {
            font-size: 0.95rem;
            color: var(--ws-text-secondary);
            line-height: 1.65;
        }

        .day-narrative-text strong {
            color: var(--ws-text-bright);
            font-weight: 600;
        }

        .day-narrative-text .nar-wind {
            color: var(--ws-primary-blue-light);
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
        }

        .day-narrative-text .nar-wave {
            color: var(--ws-teal);
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
        }

        .day-narrative-text .nar-good {
            color: var(--ws-success);
            font-weight: 600;
        }

        .day-narrative-text .nar-warn {
            color: var(--ws-warning);
            font-weight: 600;
        }

        .day-narrative-text .nar-fire {
            color: #C084FC;
            font-weight: 700;
        }

        .day-narrative-label {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ws-text-muted);
            margin-bottom: 8px;
        }

        /* Session Callback Card */
        .callback-card {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(20, 184, 166, 0.04) 100%);
            border: 1px solid rgba(16, 185, 129, 0.25);
            border-radius: 12px;
            padding: 16px 20px;
            margin: 0 24px 16px;
            position: relative;
            overflow: hidden;
            animation: callbackSlideIn 0.3s ease-out;
        }
        
        @keyframes callbackSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .callback-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--ws-success), var(--ws-teal));
        }
        
        .callback-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .callback-emoji {
            font-size: 1.4rem;
        }
        
        .callback-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ws-success);
        }
        
        .callback-when {
            font-size: 0.75rem;
            color: var(--ws-text-secondary);
            margin-left: auto;
        }
        
        .callback-conditions {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
            color: var(--ws-text-primary);
            margin-bottom: 8px;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .callback-note {
            font-size: 0.85rem;
            color: var(--ws-text-primary);
            font-style: italic;
            padding: 10px 14px;
            background: var(--ws-overlay-light);
            border-radius: 8px;
            border-left: 3px solid rgba(16, 185, 129, 0.4);
        }
        
        .callback-note::before {
            content: '"';
        }
        
        .callback-note::after {
            content: '"';
        }
        
        .callback-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.7rem;
            padding: 3px 8px;
            background: rgba(16, 185, 129, 0.15);
            border-radius: 12px;
            color: var(--ws-success);
            margin-top: 8px;
        }
        
        /* Wave Section */
        .wave-section {
            padding: 0 0 24px;
            border-top: 1px solid var(--ws-border-default);
            margin-top: 10px;
        }
        
        .wave-section .timeline-container {
            padding: 0 24px 0;
        }
        
        .wave-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 24px;
            color: var(--ws-text-primary);
            font-weight: 600;
        }
        
        .wave-unavailable {
            color: var(--ws-text-secondary);
            font-style: italic;
            font-size: 0.9rem;
            padding: 12px;
            background: var(--ws-overlay-light);
            border-radius: 8px;
            text-align: center;
            margin: 0 24px;
        }
        
        /* Wave Details Summary */
        .wave-details-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
            padding: 16px;
            background: linear-gradient(135deg, var(--ws-bg-page), var(--ws-bg-page-secondary));
            border-radius: 12px;
        }
        
        .wave-detail-item {
            text-align: center;
        }
        
        .wave-detail-label {
            font-size: 0.7rem;
            color: var(--ws-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        
        .wave-detail-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--ws-text-primary);
        }
        
        .wave-detail-value.highlight {
            color: var(--ws-primary-blue);
        }
        
        .wave-detail-sub {
            font-size: 0.75rem;
            color: var(--ws-text-muted);
            margin-top: 2px;
        }
        
        /* Direction Arrow */
        .dir-arrow {
            display: inline-block;
            font-size: 1rem;
            margin-right: 4px;
        }
        
        /* Swell Section */
        .swell-section {
            margin-top: 16px;
            padding: 16px;
            background: rgba(14, 165, 233, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(14, 165, 233, 0.2);
        }
        
        .swell-header {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--ws-primary-blue);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .swell-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .swell-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .swell-type {
            font-size: 0.75rem;
            color: var(--ws-text-muted);
            text-transform: uppercase;
        }
        
        .swell-data {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }
        
        .swell-height {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--ws-text-primary);
        }
        
        .swell-period {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
            color: var(--ws-text-muted);
        }
        
        .swell-dir {
            font-size: 0.85rem;
            color: var(--ws-text-muted);
        }
        
        /* Wave type badges */
        .wave-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .wave-type-badge.swell {
            background: rgba(20, 184, 166, 0.15);
            color: var(--ws-teal);
        }
        
        .wave-type-badge.wind-wave {
            background: rgba(249, 115, 22, 0.15);
            color: var(--ws-accent-coral);
        }
        
        /* Period indicator */
        .period-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(100, 116, 139, 0.1);
            border-radius: 8px;
            font-size: 0.8rem;
        }
        
        .period-indicator.long-period {
            background: rgba(16, 185, 129, 0.15);
            color: var(--ws-success);
        }
        
        .period-indicator.short-period {
            background: rgba(251, 191, 36, 0.15);
            color: var(--ws-warning);
        }
        
        /* Loading State */
        .loading {
            text-align: center;
            padding: 80px 20px;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(14, 165, 233, 0.2);
            border-top-color: var(--ws-primary-blue);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Error State */
        .error-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--ws-text-secondary);
        }
        
        .error-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: var(--ws-bg-card);
            border-radius: 20px;
            border: 2px dashed var(--ws-border-default);
        }
        
        .empty-icon {
            font-size: 4rem;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            color: var(--ws-text-bright);
            margin-bottom: 10px;
        }
        
        .empty-state p {
            color: var(--ws-text-muted);
            margin-bottom: 20px;
        }
        
        .cta-btn {
            display: inline-block;
            padding: 14px 28px;
            background: linear-gradient(135deg, var(--ws-primary-blue), var(--ws-teal));
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(14, 165, 233, 0.4);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .site-nav-links {
                display: none;
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                background: var(--ws-bg-page);
                flex-direction: column;
                padding: 20px;
                border-radius: 12px;
                box-shadow: var(--ws-shadow-card);
                z-index: 1000;
            }
            .site-nav-links.active { display: flex; }
            .mobile-menu-toggle { display: block; }
            .site-nav-link { width: 100%; text-align: center; }
            
            .profile-name {
                font-size: 1.4rem;
            }
            
            .profile-dropdown {
                min-width: 180px;
            }
            
            .forecast-meta {
                font-size: 0.8rem;
            }
            
            .day-selector {
                gap: 6px;
            }
            
            .day-btn {
                min-width: 70px;
                padding: 10px 12px;
            }
            
            /* The peak summary's three items measured wider than a 374px box and
               spilled. It wraps now, and nothing in it may impose a min-width. */
            .peak-summary {
                flex-wrap: wrap;
                gap: 12px 16px;
                max-width: 100%;
                min-width: 0;
            }
            .peak-summary .peak-item { min-width: 0; }

            /* The header was centred while the hour list under it is left-aligned, so
               the card read as two pages stapled together. One edge. */
            .location-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                text-align: left;
            }

            /* Model comparison behind a disclosure — the five toggles and the chart's
               own minimum width are what made the whole page scroll sideways. */
            /* Qualified, not bare: the base `.cmp-disclosure { display: none }` is
               declared further down this file and would otherwise win on order. */
            .comparison-chart-container .cmp-disclosure { display: flex; }
            .comparison-chart-container .cmp-body { display: none; }
            .comparison-chart-container .cmp-body.open { display: block; }
            .comparison-chart-container { padding: 12px 0 0; }
            .model-toggles { justify-content: flex-start; }

            .hour-block {
                width: 35px;
            }
        }
        
        /* ========== Source fold (2026-10-04) ==========
           What served (the attribution line, Open-Meteo requirement) is the summary; the Lab
           receipt, the model and wave pickers and Compare sit folded under it. They were the
           control bar above the forecast until the cut — a choice the Lab exists to make. */
        .source-fold {
            margin: 0 0 24px;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 12px;
            background: var(--ws-overlay-light);
        }
        .source-summary {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            list-style: none;
            font-size: 0.8rem;
            line-height: 1.5;
            color: var(--ws-text-muted);
        }
        .source-summary::-webkit-details-marker { display: none; }
        .source-summary-text { flex: 1 1 auto; }
        .source-summary a {
            color: var(--ws-text-secondary);
            text-decoration: none;
            border-bottom: 1px dotted currentColor;
        }
        .source-summary a:hover { color: var(--ws-text-primary); }
        /* The summary's Compare handle (Premium): the one tap target in the line. */
        .source-compare-handle { font-weight: 600; white-space: nowrap; }
        .source-summary-caret { font-size: 0.8rem; transition: transform 0.2s; }
        .source-fold[open] .source-summary-caret { transform: rotate(180deg); }
        .source-body {
            position: relative;   /* the picker menus anchor here on a phone */
            z-index: 100;
            padding: 4px 14px 14px;
            border-top: 1px solid var(--ws-border-subtle);
        }
        .source-pickers {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        .ws-lab-receipt-host { margin-top: 10px; }
        .compare-note {
            margin: 12px 0 0;
            font-size: 0.8rem;
            line-height: 1.5;
            color: var(--ws-text-secondary);
        }
        .compare-note a { color: var(--dn-accent); font-weight: 600; text-decoration: none; }
        /* Spelled-out form of the '+' for the hybrid models, whose source string already
           contains a '+' of its own. See updateAttribution() in forecast.php. */
        .source-summary .ws-enhanced-tag {
            display: inline-block;
            margin-left: 6px;
            padding: 1px 6px;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 10px;
            font-size: 0.68rem;
            letter-spacing: 0.02em;
        }

        /* ========== Comparison Chart Styles ========== */
        .comparison-chart-container {
            display: none;
            padding: 16px;
        }
        
        .comparison-chart-container.active {
            display: block;
        }
        
        /* Disclosure for the comparison chart. Hidden above the phone breakpoint,
           where the chart has room and hiding it would only cost a click. */
        .cmp-disclosure {
            display: none;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
            background: transparent;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 8px;
            color: var(--ws-text-secondary);
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
        }
        .cmp-disclosure[aria-expanded="true"] .cmp-caret { transform: rotate(180deg); }
        .cmp-caret { display: inline-block; transition: transform 0.2s; }

        .model-toggles {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        
        .model-toggle {
            padding: 6px 14px;
            border-radius: 8px;
            border: 1px solid transparent;
            background: var(--ws-bg-card);
            color: var(--ws-text-muted);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .model-toggle:hover {
            background: var(--ws-border-default);
            color: var(--ws-text-secondary);
        }
        
        .model-toggle.active {
            color: var(--ws-text-primary);
        }
        
        .model-toggle.active.hrrr {
            background: rgba(14, 165, 233, 0.2);
            border-color: rgba(14, 165, 233, 0.5);
        }
        
        .model-toggle.active.nws {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.5);
        }
        
        .model-toggle.active.gfs {
            background: rgba(249, 115, 22, 0.2);
            border-color: rgba(249, 115, 22, 0.5);
        }
        
        .model-toggle.active.ecmwf {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
        }
        
        .model-toggle.active.avg {
            background: var(--ws-border-strong);
            border-color: var(--ws-border-strong);
        }
        
        .toggle-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .toggle-dot.hrrr { background: var(--ws-primary-blue); }
        .toggle-dot.nws { background: var(--ws-success); }
        .toggle-dot.gfs { background: var(--ws-accent-coral); }
        .toggle-dot.ecmwf { background: #8B5CF6; }
        .toggle-dot.avg { background: var(--ws-navy-light); }
        [data-theme="dark"] .toggle-dot.avg { background: #FFFFFF; }
        
        .comparison-chart-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }
        
        .comparison-chart-scroll::-webkit-scrollbar {
            height: 6px;
        }
        
        .comparison-chart-scroll::-webkit-scrollbar-track {
            background: var(--ws-scrollbar-track);
            border-radius: 3px;
        }

        .comparison-chart-scroll::-webkit-scrollbar-thumb {
            background: var(--ws-scrollbar-thumb);
            border-radius: 3px;
        }
        
        .comparison-chart-wrapper {
            height: 240px;
            position: relative;
            min-width: 100%;
        }
        
        .chart-legend {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 12px;
            font-size: 0.7rem;
            color: var(--ws-text-muted);
            flex-wrap: wrap;
        }
        
        .chart-legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .legend-line {
            width: 16px;
            height: 2px;
            border-radius: 1px;
        }
        
        .legend-line.avg { background: var(--ws-navy-light); }
        [data-theme="dark"] .legend-line.avg { background: white; }
        .legend-line.threshold { 
            background: var(--ws-warning); 
            border-style: dashed;
        }
        
        .legend-band {
            width: 16px;
            height: 10px;
            border-radius: 2px;
            background: rgba(14, 165, 233, 0.3);
        }
        
        .legend-marker {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.8);
            border: 2px solid var(--ws-success);
        }
        
        .comparison-insight-summary {
            text-align: center;
            padding: 12px 16px;
            margin-top: 12px;
            background: var(--ws-overlay-light);
            border-radius: 10px;
            font-size: 0.85rem;
            color: var(--ws-text-secondary);
        }
        
        .comparison-insight-summary.confident {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            color: var(--ws-success);
        }
        
        .comparison-insight-summary.uncertain {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.2);
            color: var(--ws-warning);
        }
        
        .comparison-insight-summary.divergent {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: var(--ws-error);
        }

        /* ==========================================
           LIGHT MODE OVERRIDES
           ========================================== */
        [data-theme="light"] .day-header-cell {
            background: linear-gradient(180deg, #EFF6FF, #F8FAFC);
            color: #334155;
            border-left-color: #E2E8F0;
            border-bottom-color: #CBD5E1;
        }

        [data-theme="light"] .day-header-cell.today {
            background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
        }

        [data-theme="light"] .hours-cell {
            background: #FFFFFF;
            border-left-color: #E2E8F0;
        }

        [data-theme="light"] .bar-container {
            background: linear-gradient(180deg, #E2E8F0, #EFF2F6);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .accuracy-details {
            background: linear-gradient(135deg, #F8FAFC, #F0F9FF);
            border-color: #E2E8F0;
        }

        [data-theme="light"] .teaser-cta {
            background: rgba(248, 250, 252, 0.85);
        }

        [data-theme="light"] .teaser-text {
            color: var(--ws-text-secondary);
        }

        [data-theme="light"] .site-nav-links {
            background: #FFFFFF;
        }

        /* Header controls — light mode */
        [data-theme="light"] .profile-dropdown-btn {
            background: #FFFFFF;
            border-color: #E2E8F0;
        }

        [data-theme="light"] .profile-dropdown {
            background: #FFFFFF;
            border-color: #E2E8F0;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        [data-theme="light"] .meta-criteria {
            background: rgba(241, 245, 249, 0.8);
            border-color: #E2E8F0;
            color: #475569;
        }

        [data-theme="light"] .meta-criteria .value {
            color: #1E293B;
        }

        [data-theme="light"] .model-toggle-btn {
            background: rgba(241, 245, 249, 0.8);
            border-color: #E2E8F0;
            color: #1E293B;
        }

        [data-theme="light"] .model-toggle-btn:hover {
            background: #F1F5F9;
            border-color: #CBD5E1;
        }

        [data-theme="light"] .model-toggle-btn.open {
            background: rgba(14, 165, 233, 0.08);
            border-color: rgba(14, 165, 233, 0.4);
            color: var(--ws-primary-blue);
        }

        [data-theme="light"] .model-options-panel {
            background: rgba(248, 250, 252, 0.95);
            border-color: #E2E8F0;
        }

        [data-theme="light"] .model-select,
        [data-theme="light"] .wave-select {
            background-color: #FFFFFF;
            border-color: #E2E8F0;
            color: #1E293B;
        }

        [data-theme="light"] .model-select:hover,
        [data-theme="light"] .wave-select:hover {
            border-color: #CBD5E1;
            background-color: #FFFFFF;
        }

        [data-theme="light"] .model-select:focus,
        [data-theme="light"] .wave-select:focus {
            border-color: var(--ws-primary-blue);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
        }

        [data-theme="light"] .model-select option,
        [data-theme="light"] .wave-select option {
            background: #FFFFFF;
            color: #1E293B;
        }

        [data-theme="light"] .day-narrative {
            background: rgba(248, 250, 252, 0.9);
            border-color: #E2E8F0;
        }

        [data-theme="light"] .location-card {
            background: rgba(255, 255, 255, 0.85);
            border-color: #E2E8F0;
        }

        [data-theme="light"] .day-btn {
            background: rgba(248, 250, 252, 0.8);
            border-color: #E2E8F0;
        }

        [data-theme="light"] .day-btn.active {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(20, 184, 166, 0.08));
            border-color: var(--ws-primary-blue);
        }

        /* ============================================================
           PHASE 1 — Unified control bar + custom pickers
           ============================================================ */

        /* Profile pill: name is the switcher; gear opens settings */
        .profile-switch-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px 8px 8px 20px;
            border-radius: 14px 0 0 14px;
            font-family: inherit;
            color: inherit;
        }
        .profile-selector[data-multi="0"] .profile-switch-btn { cursor: default; }
        .profile-selector[data-multi="0"] .profile-selector-arrow { display: none; }

        .profile-settings-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin-left: 2px;
            border-radius: 10px;
            font-size: 1rem;
            line-height: 1;
            text-decoration: none;
            color: var(--ws-text-muted);
            background: var(--ws-overlay-medium);
            border: 1px solid var(--ws-border-subtle);
            transition: all 0.2s ease;
        }
        .profile-settings-btn:hover {
            color: var(--ws-text-primary);
            background: var(--ws-overlay-strong);
            border-color: var(--ws-border-default);
        }

        /* Control bar container.
           position + z-index are required: the backdrop-filter below creates a
           stacking context, so without lifting the whole bar its open picker menu
           (z-index:200, trapped in this context) would paint behind the sticky
           day-selector (z-index:90) and the cards that follow it in the DOM. */
        .forecast-controls {
            position: relative;
            z-index: 100;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 14px auto 0;
            padding: 10px;
            background: var(--ws-overlay-light);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--ws-border-subtle);
            border-radius: 16px;
        }

        /* ── Custom picker — skins a hidden <select> ── */
        .ws-picker { position: relative; text-align: left; }

        .ws-picker-trigger {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            min-width: 160px;
            border-radius: 12px;
            border: 1px solid var(--ws-border-default);
            background: var(--ws-overlay-medium);
            color: var(--ws-text-primary);
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ws-picker-trigger:hover {
            border-color: var(--ws-border-strong);
            background: var(--ws-overlay-strong);
        }
        .ws-picker.open .ws-picker-trigger {
            border-color: rgba(14, 165, 233, 0.45);
            background: rgba(14, 165, 233, 0.08);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
        }
        .ws-picker-trigger:focus-visible {
            outline: none;
            border-color: var(--ws-primary-blue);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
        }

        .ws-picker-caption {
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ws-text-muted);
        }
        .ws-picker-value {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--ws-text-bright);
            margin-right: auto;
        }
        .ws-picker-caret {
            font-size: 0.65rem;
            color: var(--ws-text-muted);
            transition: transform 0.2s;
        }
        .ws-picker.open .ws-picker-caret {
            transform: rotate(180deg);
            color: var(--ws-primary-blue);
        }

        /* Menu */
        .ws-picker-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 260px;
            background: var(--ws-bg-card-solid);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--ws-border-default);
            border-radius: 14px;
            padding: 6px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-4px);
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
            z-index: 200;
        }
        .ws-picker.open .ws-picker-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
            .ws-picker-menu { transition: none; }
        }

        .ws-picker-group-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 12px 2px;
        }
        .ws-picker-group-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ws-text-muted);
        }
        .ws-picker-rec {
            font-size: 0.58rem;
            font-weight: 700;
            color: var(--ws-primary-blue);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        /* On a free rider's menu every model but NWS carries this; the tap goes to pricing
         * rather than silently serving NWS under the chosen name. */
        .ws-picker-premium {
            font-size: 0.58rem;
            font-weight: 700;
            color: #F97316;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-left: 6px;
        }
        .ws-picker-group-sub {
            padding: 0 12px 6px;
            font-size: 0.68rem;
            line-height: 1.4;
            color: var(--ws-text-muted);
        }

        .ws-picker-option {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 9px 12px;
            border: none;
            border-radius: 10px;
            background: transparent;
            cursor: pointer;
            text-align: left;
            font-family: 'Space Grotesk', sans-serif;
            transition: background 0.15s ease;
        }
        .ws-picker-option:hover,
        .ws-picker-option:focus-visible {
            outline: none;
            background: rgba(14, 165, 233, 0.1);
        }
        .ws-picker-option.active {
            background: rgba(14, 165, 233, 0.12);
        }
        .ws-picker-option-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--ws-text-secondary);
        }
        .ws-picker-option:hover .ws-picker-option-name,
        .ws-picker-option:focus-visible .ws-picker-option-name {
            color: var(--ws-text-primary);
        }
        .ws-picker-option.active .ws-picker-option-name {
            color: var(--ws-primary-blue);
        }
        .ws-picker-option-horizon {
            font-size: 0.68rem;
            color: var(--ws-text-muted);
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
        }

        /* Contextual detail line at the bottom of the menu */
        .ws-picker-detail {
            margin-top: 4px;
            padding: 8px 12px;
            border-top: 1px solid var(--ws-border-subtle);
            font-size: 0.7rem;
            line-height: 1.4;
            color: var(--ws-text-secondary);
            min-height: 1em;
        }

        /* Visually-hidden native selects (kept as the a11y source of truth) */
        .ws-visually-hidden {
            position: absolute !important;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Control bar — mobile */
        @media (max-width: 768px) {
            .forecast-controls {
                display: flex;
                width: 100%;
                margin-top: 12px;
            }
            .ws-picker { flex: 1 1 auto; }
            .ws-picker-trigger { width: 100%; min-width: 0; }
            /* The menu is 260px wide and anchored to a picker that starts halfway
               across a 400px screen, so it hung ~20px past the right edge and the whole
               page scrolled sideways — while CLOSED, because visibility:hidden still
               takes layout. Anchor it to the control bar instead of to its own picker
               (the bar is already position:relative for its stacking context). */
            .ws-picker { position: static; }
            .ws-picker-menu { left: 10px; right: 10px; min-width: 0; }
            .source-pickers .compare-toggle { flex: 1 1 100%; justify-content: center; }
        }

        /* Light mode */
        [data-theme="light"] .profile-settings-btn {
            background: #FFFFFF;
            border-color: #E2E8F0;
            color: #64748B;
        }
        [data-theme="light"] .forecast-controls {
            background: rgba(248, 250, 252, 0.9);
            border-color: #E2E8F0;
        }
        [data-theme="light"] .ws-picker-trigger {
            background: #FFFFFF;
            border-color: #E2E8F0;
            color: #1E293B;
        }
        [data-theme="light"] .ws-picker-trigger:hover {
            border-color: #CBD5E1;
        }
        [data-theme="light"] .ws-picker-value { color: #0F172A; }
        [data-theme="light"] .ws-picker-menu {
            background: #FFFFFF;
            border-color: #E2E8F0;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }
        [data-theme="light"] .ws-picker-option-name { color: #475569; }
        [data-theme="light"] .ws-picker-option.active .ws-picker-option-name { color: var(--ws-primary-blue); }
        [data-theme="light"] .ws-picker-detail { color: #475569; }

        /* ============================================================
           Forecast Lab receipt — what actually served, in the model menu
           ------------------------------------------------------------
           Replaces the old "Best for this spot" row, which was a BUTTON offering a
           switch away from Lab. This is a statement, not an offer: nothing here is
           clickable, because there is nothing to act on. See renderLabReceipt().
           ============================================================ */
        .ws-lab-receipt {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 9px 12px;
            border: 1px solid rgba(14, 165, 233, 0.3);
            border-radius: 10px;
            background: rgba(14, 165, 233, 0.08);
            text-align: left;
            font-family: 'Space Grotesk', sans-serif;
            cursor: default;
        }
        .ws-picker-rec-badge {
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--ws-primary-blue);
        }
        /* Each spot gets its own heading only when more than one is loaded — a receipt
           that names no spot on a multi-spot page is a receipt for nothing in particular. */
        .ws-lab-spot {
            margin-top: 5px;
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--ws-text-bright);
        }
        .ws-lab-spot:first-of-type { margin-top: 0; }
        .ws-lab-line {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 2px 8px;
        }
        .ws-lab-win {
            flex: 0 0 auto;
            min-width: 62px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.64rem;
            color: var(--ws-text-muted);
        }
        .ws-lab-model {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--ws-text-bright);
        }
        .ws-lab-stat {
            font-size: 0.64rem;
            color: var(--ws-text-muted);
            font-family: 'JetBrains Mono', monospace;
        }
        .ws-lab-note {
            font-size: 0.64rem;
            color: var(--ws-text-muted);
            font-style: italic;
        }
        [data-theme="light"] .ws-lab-receipt { background: rgba(14, 165, 233, 0.06); }


        /* ========== The day figure (2026-10-04) ==========
           One statement of the selected day. Wind lead: the Breakdown, with the surf call folded
           under a one-line summary. Surf lead: the same one-liner alone, Breakdown hidden —
           since 2026-10-06 the fold is closed at rest in BOTH leads and only the rider opens it. */
        .day-figure { margin: 0 0 20px; }
        .day-figure .day-narrative { margin-bottom: 10px; }
        .surf-fold { margin: 0; }
        .surf-fold-summary {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 12px;
            background: var(--ws-overlay-light);
            cursor: pointer;
            list-style: none;
            font-size: 0.85rem;
            color: var(--ws-text-secondary);
        }
        .surf-fold-summary::-webkit-details-marker { display: none; }
        .surf-fold-label { font-weight: 700; color: var(--ws-text-primary); }
        .surf-fold-text { flex: 1 1 auto; }
        .surf-fold-caret { font-size: 0.8rem; transition: transform 0.2s; }
        .surf-fold[open] .surf-fold-caret { transform: rotate(180deg); }
        .surf-fold[open] > .surf-fold-summary { margin-bottom: 8px; }
        /* In surf lead the one-liner IS the day's statement, so its text reads as primary. */
        .surf-fold.is-lead .surf-fold-text { color: var(--ws-text-primary); }

        /* ========== Beyond the week ==========
           Days 8+ as a folded strip of daily peaks under the hour view, named for the model. */
        .beyond-week { margin: 10px 0 0; border-top: 1px solid var(--ws-border-subtle); }
        .beyond-week > summary {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 4px;
            cursor: pointer;
            list-style: none;
            font-size: 0.8rem;
            color: var(--ws-text-secondary);
        }
        .beyond-week > summary::-webkit-details-marker { display: none; }
        .beyond-label { font-weight: 700; color: var(--ws-text-primary); white-space: nowrap; }
        .beyond-sub { flex: 1 1 auto; color: var(--ws-text-muted); }
        .beyond-caret { transition: transform 0.2s; }
        .beyond-week[open] .beyond-caret { transform: rotate(180deg); }
        .beyond-rows { padding: 0 4px 8px; }
        .beyond-row {
            display: grid;
            grid-template-columns: 6em 1fr auto;
            gap: 10px;
            padding: 5px 0;
            font-size: 0.85rem;
            color: var(--ws-text-secondary);
            border-top: 1px dashed var(--ws-border-subtle);
        }
        .beyond-row:first-child { border-top: none; }
        .beyond-day { color: var(--ws-text-muted); }
        .beyond-lead { font-weight: 600; color: var(--ws-text-primary); }
        .beyond-row.is-on .beyond-lead { color: var(--ws-forecast-good); }
        .beyond-rest { color: var(--ws-text-muted); }
        .beyond-toggle {
            display: inline-block;
            margin: 0 4px 10px;
            padding: 6px 12px;
            font: inherit;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--ws-text-primary);
            background: transparent;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 8px;
            cursor: pointer;
        }
        .beyond-toggle:hover { border-color: var(--ws-text-muted); }
        .beyond-open-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 10px 0 0;
            padding: 10px 4px 0;
            border-top: 1px solid var(--ws-border-subtle);
            font-size: 0.8rem;
            color: var(--ws-text-muted);
        }
        .beyond-open-line .beyond-toggle { margin: 0 0 0 auto; }

        /* ========== The glimpse and the one ask (free riders) ========== */
        .bias-line { margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: var(--ws-text-secondary); }
        .bias-line b { font-weight: 600; color: var(--ws-text-primary); }
        .premium-ask[hidden] { display: none; }   /* display:flex would otherwise beat [hidden] */
        .premium-ask {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 16px;
            margin: 8px 0 20px;
            padding: 14px 16px;
            border: 1px solid var(--ws-border-subtle);
            border-radius: 12px;
            background: var(--ws-overlay-light);
        }
        .premium-ask p {
            flex: 1 1 260px;
            margin: 0;
            font-size: 0.88rem;
            line-height: 1.5;
            color: var(--ws-text-secondary);
        }
        .premium-ask-btn {
            flex: 0 0 auto;
            padding: 9px 16px;
            border-radius: 10px;
            background: var(--dn-accent);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            text-decoration: none;
        }
        /* Share a day as a group-chat card (shareDay(), includes/share-card.php). Quiet: it sits
           after the day's verdict and must not compete with it. */
        .hday-share {
            margin-left: 4px; padding: 2px 8px; border: 1px solid var(--ws-border-default); border-radius: 8px;
            background: none; color: var(--ws-text-secondary); font: inherit; font-size: 0.72rem; font-weight: 600;
            cursor: pointer; align-self: center;
        }
        .hday-share:hover { color: var(--ws-text-primary); border-color: var(--ws-text-muted); }
        .hday-share:disabled { opacity: 0.6; cursor: default; }