/* ==========================================================
 * WeatherDuck Unified — Core Styles
 * Version: 1.0
 * ========================================================== */

/* ─── CSS VARIABLES ─── */
:root {
    /* ── Canonical design-system tokens ── */

    /* Brand */
    --wd-green: #425A47;
    --wd-green-light: #D4E8D6;
    --wd-green-hover: #354a39;
    --wd-blue-astro: #1B2E4C;

    /* Text */
    --wd-text-primary: #141414;
    --wd-text-secondary: #555;
    --wd-text-muted: #888;
    --wd-text-on-green: #ffffff;

    /* Backgrounds */
    --wd-bg-page: #fafaf8;
    --wd-bg-card: #faf8f4;
    --wd-bg-subtle: #f5f5f3;
    --wd-bg-warm: #f9f8f5;

    /* Borders */
    --wd-border-light: rgba(0,0,0,0.08);
    --wd-border-strong: rgba(0,0,0,0.16);

    /* Semantic */
    --wd-error: #c62828;
    --wd-warning: #e8a317;
    --wd-success: #3a7d3e;

    /* Score palette */
    --wd-score-excellent: #d6b3ff;
    --wd-score-good: #b3ffcc;
    --wd-score-fair: #fff5b3;
    --wd-score-poor: #ffcc99;
    --wd-score-bad: #ffb3b3;
    --wd-score-past: #f0f0ee;

    /* Typography */
    --wd-font: 'Inter', system-ui, -apple-system, sans-serif;
    --wd-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    --wd-font-size-xs: 0.72rem;
    --wd-font-size-sm: 0.82rem;
    --wd-font-size-md: 0.92rem;
    --wd-font-size-lg: 1.1rem;
    --wd-font-size-xl: 1.25rem;
    --wd-font-size-2xl: 1.5rem;

    /* Spacing (4px base) */
    --wd-space-xs: 4px;
    --wd-space-sm: 8px;
    --wd-space-md: 12px;
    --wd-space-lg: 16px;
    --wd-space-xl: 20px;
    --wd-space-2xl: 28px;
    --wd-space-3xl: 40px;

    /* Radius */
    --wd-radius-sm: 8px;
    --wd-radius-md: 12px;
    --wd-radius-lg: 16px;
    --wd-radius-pill: 999px;

    /* Shadows */
    --wd-shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --wd-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --wd-shadow-lg: 0 14px 34px rgba(0,0,0,0.10);

    /* Controls */
    --wd-control-h: 44px;

    /* ── Legacy aliases (backward-compat) ── */
    --wd-brand: var(--wd-green);
    --wd-brand-dark: var(--wd-green-hover);
    --wd-brand-light: var(--wd-green-light);
    --wd-cream: var(--wd-bg-page);
    --wd-card: var(--wd-bg-card);
    --wd-border: #E2E2DD;
    --wd-text: var(--wd-text-primary);
    --wd-text-mid: var(--wd-text-secondary);
    --wd-text-light: var(--wd-text-muted);

    /* Semantic colours (unchanged) */
    --wd-green-bg: #E9F5ED;
    --wd-amber: #C68A1A;
    --wd-amber-bg: #FEF6E4;
    --wd-red: #C0392B;
    --wd-red-bg: #FDECEB;
    --wd-blue: #2E7DB5;
    --wd-blue-bg: #E8F1F8;
    --wd-purple: #7B5EA7;
    --wd-purple-bg: #F0EAF6;
    --wd-grey: #BBBBB6;
    --wd-grey-bg: #F2F2EE;

    /* Layout */
    --wd-max: 1120px;
    --wd-hero-map-w: 170px;
    --wd-hero-map-h: 96px;
    --wd-hero-map-gap: 16px;
    --wd-hero-map-inset-y: 6px;
}

/* ─── Full-width breakout on the unified template ───
 * Hello Elementor often wraps content in a constrained container.
 * This forces the unified page to behave like the preview (full-bleed cream background).
 */
body.page-template-page-forecast-unified {
    background: #f0ebe3;
}

.page-template-page-forecast-unified .wd-page {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Kill Elementor/Hello container padding in CONTENT area only (not header/footer) */
.page-template-page-forecast-unified .site-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.page-template-page-forecast-unified .site-main .entry-content,
.page-template-page-forecast-unified .site-main .elementor-widget-theme-post-content,
.page-template-page-forecast-unified .site-main .elementor-element,
.page-template-page-forecast-unified .site-main .e-con,
.page-template-page-forecast-unified .site-main .elementor-widget-container,
.page-template-page-forecast-unified .site-main .elementor-column-wrap,
.page-template-page-forecast-unified .site-main .elementor-widget-wrap,
.page-template-page-forecast-unified .site-main .elementor-section-wrap,
.page-template-page-forecast-unified .site-main .elementor-section,
.page-template-page-forecast-unified .site-main .elementor-container,
.page-template-page-forecast-unified .site-main .elementor-column,
.page-template-page-forecast-unified .site-main .elementor-inner,
.page-template-page-forecast-unified .site-main .elementor-row,
.page-template-page-forecast-unified .site-main .e-con-inner,
.page-template-page-forecast-unified .site-main .page-content,
.page-template-page-forecast-unified .site-main article.page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ─── RESET — Override Elementor/Hello theme defaults ─── */
.wd-page *,
.wd-page *::before,
.wd-page *::after {
    box-sizing: border-box;
}

.wd-page {
    font-family: var(--wd-font);
    background: #f0ebe3;
    min-height: 100vh;
    color: var(--wd-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wd-page h1,
.wd-page h2,
.wd-page h3,
.wd-page p {
    margin: 0;
    padding: 0;
}


/* Header/footer dark chrome is now in site-dark-chrome.css (loaded globally) */

/* ─── HERO (C6 redesign: dark green, map bg, NOW section) ─── */
.wd-hero {
    position: relative;
    overflow: hidden;
    background: var(--wd-green-hover);
    color: #fff;
    padding: 0;
    border-bottom: none;
}

/* Background map behind hero */
#wd-hero-bg-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #2d3d32; /* match overlay so no flash */
}
#wd-hero-bg-map .leaflet-control-attribution {
    font-size: 6px !important;
    opacity: 0.1;
    background: transparent !important;
}
.wd-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(30, 43, 34, 0.92);
    pointer-events: none;
}

/* All hero content above map */
.wd-location-at-glance,
.wd-hero__metrics,
.wd-tabs,
.wd-now { position: relative; z-index: 2; }

/* Hero main grid: left zone (active location) | metrics table | right map */
.wd-hero__main {
    max-width: calc(var(--wd-max) + 48px);
    margin: 0 auto;
    padding: 24px 24px 20px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(320px, 390px) minmax(172px, 1fr);
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.wd-hero__left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.wd-hero__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Active location block */
.wd-location-at-glance {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.wd-location-at-glance__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.62);
}
.wd-location-at-glance__name,
.wd-page .wd-location-at-glance__name,
h1.wd-location-at-glance__name {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: normal;
    color: #fff !important;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}
.wd-location-at-glance__meta {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}
.wd-location-at-glance__updated {
    font-size: 0.78rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.54);
}

/* Compact hero metrics table */
.wd-hero__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    justify-self: center;
    align-self: center;
    width: min(100%, 390px);
    min-height: 76px;
    transform: translateX(44px);
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
}
.wd-hero-metric {
    min-width: 0;
    padding: 3px 9px 2px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.wd-hero-metric:last-child {
    border-right: 0;
}
.wd-hero-metric__label {
    margin-bottom: 7px;
    font-family: var(--wd-font);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.wd-hero-metric__value {
    font-family: var(--wd-font);
    font-size: 1.36rem;
    font-weight: 700;
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.wd-hero-metric__value--text {
    font-size: 1.12rem;
    line-height: 1.08;
}
.wd-hero-metric__sub {
    margin-top: 6px;
    font-family: var(--wd-font);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.62);
}
.wd-hero-metric__sub--up { color: #b9f3df; }
.wd-hero-metric__sub--down { color: #ffc3bd; }
.wd-hero-metric__sub--neutral { color: rgba(255, 255, 255, 0.48); }
.wd-hero-metric__symbol {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wd-hero-metric__symbol img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
}
.wd-hero-metric__symbol span {
    font-size: 1.9rem;
    line-height: 1;
}
.wd-hero-metric--condition .wd-hero-metric__label {
    margin-bottom: 0;
}
.wd-hero-metric--condition .wd-hero-metric__sub {
    margin-top: 0;
}
.wd-hero-score[hidden] {
    display: none;
}
.wd-hero-metric--score .wd-hero-score {
    transform: translateY(1.5px);
}

@media (max-width: 1080px) {
    .wd-hero__main {
        grid-template-columns: 1fr;
    }
    .wd-hero__metrics {
        width: 100%;
        transform: none;
    }
    .wd-hero__right {
        align-items: stretch;
    }
    .wd-now__map {
        width: 100%;
        height: 96px;
    }
}

/* At a Glance label */
.wd-now__label {
    max-width: calc(var(--wd-max) + 48px);
    margin: 0 auto;
    padding: 0 24px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.25);
    position: relative;
    z-index: 2;
}

/* Legacy weather text styles, retained for older preview fragments. */
.wd-now__condition {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
    margin-bottom: 0;
}
.wd-now__temp {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.15;
    margin-bottom: 2px;
}
.wd-now__feels { opacity: 0.5; }
.wd-now__wind { font-size: 0.88rem; opacity: 0.7; line-height: 1.35; }
.wd-now__score { text-align: center; }
.wd-now__score-num {
    font-family: var(--wd-font, inherit);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: #b3ffcc;
}
.wd-now__score-num--text { font-size: 1.6rem; line-height: 1.1; }
.wd-now__score-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.55; margin-top: 4px; }
.wd-now__score-sub { font-size: 0.78rem; font-weight: 600; opacity: 0.85; margin-top: 2px; }

/* NOW map card */
.wd-now__map {
    width: 172px;
    height: 108px;
    border-radius: var(--wd-radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: #d4daa0; /* OSM-ish green so no white flash */
}
.wd-now__map .leaflet-control-attribution {
    font-size: 6px !important;
    opacity: 0.15;
    background: transparent !important;
}

/* Legacy hero classes — hide if still rendered */
.wd-hero__layout,
.wd-hero__inner,
.wd-hero__location,
.wd-hero__sun,
.wd-hero__map,
.wd-hero__title,
.wd-hero__subtitle,
.wd-hero__astroline { display: none; }


/* ─── TABS (dark theme) ─── */
.wd-tabs {
    max-width: calc(var(--wd-max) + 48px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 0;
    width: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wd-tabs::after {
    content: "";
    display: none;
}

.wd-tabs__btn {
    padding: 9px 16px 8px;
    font-size: var(--wd-font-size-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-family: var(--wd-font);
    transition: all 0.15s;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0 !important;
    position: relative;
    z-index: 1;
}

.wd-tabs__btn--active {
    font-weight: 700;
    color: var(--wd-text-primary);
    background: #f0ebe3 !important;
    border-radius: 8px 8px 0 0 !important;
}

.wd-tabs__btn:hover:not(.wd-tabs__btn--active) {
    color: rgba(255,255,255,0.6);
    background: transparent !important;
}

.wd-tabs .wd-tabs__btn:active,
.wd-tabs .wd-tabs__btn:focus {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    outline: none;
    box-shadow: none;
}

.wd-tabs .wd-tabs__btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.3);
    outline-offset: -2px;
}

.wd-tabs .wd-tabs__btn.wd-tabs__btn--active:hover,
.wd-tabs .wd-tabs__btn.wd-tabs__btn--active:active,
.wd-tabs .wd-tabs__btn.wd-tabs__btn--active:focus,
.wd-tabs .wd-tabs__btn.wd-tabs__btn--active:focus-visible {
    color: var(--wd-text-primary) !important;
    background: #f0ebe3 !important;
    box-shadow: none;
}


/* ─── CONTENT AREA ─── */
.wd-content {
    --wd-content-pad-x: 24px;
    max-width: calc(var(--wd-max) + 48px);
    margin: 0 auto;
    padding: 14px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ─── TAB PANELS ─── */
.wd-tab-panel {
    display: none;
}

.wd-tab-panel--active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Prevent margin + gap double-spacing inside tab panels */
.wd-tab-panel > .wd-seo-prose,
.wd-tab-panel > .wd-seo-explainer,
.wd-tab-panel > .wd-inv-explorer-card {
    margin: 0;
}


/* ─── CARDS ─── */
.wd-card {
    background: var(--wd-card);
    border-radius: 0;
    border: 1px solid var(--wd-border);
    padding: var(--wd-space-lg);
}

.wd-card + .wd-card {
    margin-top: 0;
}

/* Grid rows should not inherit stacked-card spacing. */
.wd-grid-3 > .wd-card,
.wd-grid-2 > .wd-card {
    margin-top: 0 !important;
    height: 100%;
}

.wd-card--headline {
    border-top: 3px solid var(--wd-blue);
    padding: var(--wd-space-lg);
}


/* ─── SECTION TITLES ─── */
.wd-section-title {
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    color: var(--wd-text-light);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: var(--wd-space-sm);
}

.wd-section-sub {
    font-size: 0.72rem;
    color: var(--wd-text-light);
    margin: -4px 0 var(--wd-space-sm);
    letter-spacing: 0.3px;
}

/* Card system: Montserrat font + green border across all unified tabs */
body.page-template-page-forecast-unified #tab-forecast .wd-card,
body.page-template-page-forecast-unified #tab-inversion .wd-card,
body.page-template-page-forecast-unified #tab-stargazing .wd-card:not(.sg-card--dark),
body.page-template-page-forecast-unified #tab-grounds .wd-card {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    border-color: rgba(47, 74, 54, 0.18);
}
body.page-template-page-forecast-unified #tab-forecast .wd-card:not(.wd-activity-score-card) > .wd-section-title,
body.page-template-page-forecast-unified #tab-inversion .wd-card:not(.wd-activity-score-card) > .wd-section-title,
body.page-template-page-forecast-unified #tab-stargazing .wd-card:not(.wd-activity-score-card) > .wd-section-title,
body.page-template-page-forecast-unified #tab-grounds .wd-card:not(.wd-activity-score-card) > .wd-section-title {
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md);
    padding: 6px var(--wd-space-lg);
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    color: #1f2f27;
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
body.page-template-page-forecast-unified #tab-forecast .wd-gear__header {
    margin: calc(-1 * var(--wd-card-padding)) calc(-1 * var(--wd-card-padding)) var(--wd-space-md);
    padding: 6px var(--wd-card-padding);
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.page-template-page-forecast-unified #tab-forecast .wd-gear__title {
    margin-bottom: 0;
    color: #1f2f27;
    line-height: 1;
}
body.page-template-page-forecast-unified #tab-forecast .wd-gear__subtitle {
    color: rgba(31, 47, 39, 0.82);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62%;
}
body.page-template-page-forecast-unified #tab-forecast .wd-radar-header {
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md);
    padding: 6px var(--wd-space-lg);
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
body.page-template-page-forecast-unified #tab-forecast .wd-radar-header .wd-section-title {
    margin-bottom: 0;
    color: #1f2f27;
}
body.page-template-page-forecast-unified #tab-forecast .wd-radar-updated {
    color: rgba(31, 47, 39, 0.78);
}


/* ─── GRIDS ─── */
.wd-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--wd-space-md);
}

.wd-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-md);
}

.wd-grid-6040 {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: var(--wd-space-md);
}

.wd-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--wd-space-xs);
    text-align: center;
}


/* ─── WEEK STRIP ─── */
.wd-weekday {
    padding: var(--wd-space-sm) 2px;
    border-radius: var(--wd-radius-sm);
    text-align: center;
}

.wd-weekday--today {
    background: var(--wd-brand-light);
}

.wd-weekday__name {
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-mid);
}

.wd-weekday__emoji {
    font-size: var(--wd-font-size-xl);
    margin: var(--wd-space-xs) 0;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wd-weekday__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.wd-weekday__temp {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-light);
    font-family: var(--wd-mono);
    margin-top: 3px;
    margin-bottom: 2px;
}
.wd-weekday__wind {
    font-size: 0.65rem;
    color: var(--wd-text-muted);
    font-family: var(--wd-mono);
    margin-bottom: var(--wd-space-xs);
}

/* ─── WRITTEN SUMMARY ─── */
.wd-summary-written {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-xl);
}

.wd-summary-written__label {
    font-size: var(--wd-font-size-md);
    font-weight: 800;
    color: var(--wd-text);
    margin-bottom: var(--wd-space-xs);
}

.wd-summary-written__text,
.wd-summary-written__text p {
    margin: 0;
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    line-height: 1.65;
}

.wd-summary-summit-row {
    display: flex;
    justify-content: space-between;
    gap: var(--wd-space-md);
    padding: 6px 0;
    border-bottom: 1px solid var(--wd-grey-bg);
}

.wd-summary-summit-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wd-summary-summit-name {
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text);
}

.wd-summary-summit-name {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
}

.wd-summary-summit-meta {
    font-family: var(--wd-mono);
    font-size: 0.75rem;
    color: var(--wd-text-muted);
    white-space: nowrap;
}

/* ─── METRICS BAR (C6) ─── */
.wd-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--wd-bg-card);
    border-radius: var(--wd-radius-md);
    border: 1px solid var(--wd-border-light);
    overflow: hidden;
}
.wd-metrics__item {
    padding: 14px 18px;
    border-right: 1px solid var(--wd-border-light);
}
.wd-metrics__item:last-child { border-right: none; }
.wd-metrics__label {
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wd-text-muted);
    margin-bottom: 4px;
}
.wd-metrics__value {
    font-family: var(--wd-mono);
    font-size: var(--wd-font-size-2xl);
    font-weight: 700;
}
.wd-metrics__sub {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    margin-top: 1px;
}

/* ─── SCORE DOTS (week strip, C6 style) ─── */
.wd-score-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--wd-mono);
    font-size: 0.7rem;
    font-weight: 800;
}
.wd-score-dot--excellent { background: var(--wd-score-excellent); color: var(--wd-score-excellent-text); }
.wd-score-dot--good      { background: var(--wd-score-good);      color: var(--wd-score-good-text); }
.wd-score-dot--fair      { background: var(--wd-score-fair);       color: var(--wd-score-fair-text); }
.wd-score-dot--poor      { background: var(--wd-score-poor);       color: var(--wd-score-poor-text); }
.wd-score-dot--terrible  { background: var(--wd-score-bad);        color: var(--wd-score-bad-text); }

/* ─── TWO-COL SUMMARY LAYOUT (C6) ─── */
.wd-summary-2col {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    margin-top: 0;
}
.wd-summary-2col__left,
.wd-summary-2col__right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── OUTLOOK TEXT (C6) ─── */
.wd-outlook-text {
    font-family: Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--wd-text-secondary);
    font-style: italic;
}
.wd-outlook-text p { margin: 0; }

/* ─── TOGGLE WRAP (fog/UV in sidebar) ─── */
.wd-toggle-wrap {
    display: inline-flex;
    background: rgba(0,0,0,0.04);
    border-radius: var(--wd-radius-pill);
    padding: 2px;
}

/* ─── INVERSION TEASER (C6) ─── */
.wd-inv-teaser {
    background: linear-gradient(135deg, var(--wd-bg-card), #f5f0e6) !important;
    cursor: pointer;
    transition: transform 0.15s;
    border-top: none !important;
}
.wd-inv-teaser:hover { transform: translateY(-1px); }
.wd-inv-teaser__link {
    color: var(--wd-green);
    font-weight: 700;
    font-size: var(--wd-font-size-sm);
    margin-top: 6px;
}

/* ─── BEST TIME TO HEAD OUT ─── */
.wd-best-window { padding: var(--wd-card-padding); }
.wd-best-window__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md);
    margin-bottom: var(--wd-space-sm);
    flex-wrap: wrap;
}
.wd-best-window__title,
.wd-best-window__label {
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--wd-text-muted);
}
.wd-best-window__days {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wd-best-window__detail {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-muted);
    margin-top: 4px;
    margin-left: 30px;
}
.wd-best-window__bar {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 56px;
    margin-bottom: 2px;
}
.wd-best-window__cell {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.wd-best-window__cell-fill {
    width: 100%;
    border-radius: 3px;
    transition: opacity 0.15s;
    min-height: 4px;
}
.wd-best-window__cell-fill--past {
    background: #c2c9c5;
    opacity: 1;
}
.wd-best-window__cell--peak .wd-best-window__cell-fill {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 1px;
}
.wd-best-window__fill--excellent { background: var(--wd-blue); }
.wd-best-window__fill--good      { background: #2f9955; }
.wd-best-window__fill--fair      { background: #c68a1a; }
.wd-best-window__fill--poor      { background: #d97b2a; }
.wd-best-window__fill--terrible  { background: #c0392b; }
.wd-best-window__cell:hover .wd-best-window__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}
.wd-best-window__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--wd-text-primary);
    color: #fff;
    font-size: 0.62rem;
    font-family: var(--wd-mono);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.12s;
    z-index: 2;
}
.wd-best-window__labels {
    display: flex;
    gap: 2px;
}
.wd-best-window__label-cell {
    flex: 1;
    text-align: center;
    font-size: 0.68rem;
    font-family: var(--wd-mono);
    color: var(--wd-text-secondary);
    font-weight: 600;
    line-height: 1;
    padding-top: 4px;
    min-height: 14px;
}
.wd-best-window__summary {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
    margin-top: var(--wd-space-md);
}
.wd-best-window__summary-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wd-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    font-weight: 700;
}
.wd-best-window__summary-text {
    font-size: var(--wd-font-size-md);
    color: var(--wd-text-primary);
    font-weight: 600;
}

/* ─── FORECAST TABLE DAY FOLDER-TABS ─── */
.wd-fc-day-tabs {
    display: flex;
    gap: 2px;
    /* padding-left is set in JS to match the fixed label column width */
    padding-left: 113px;
    margin-bottom: -1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}
.wd-fc-day-tab {
    flex: 0 0 auto;
    padding: 6px 14px 8px;
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-sm);
    font-weight: 600;
    color: var(--wd-text-secondary);
    background: rgba(46, 125, 75, 0.06);
    border: 1px solid var(--wd-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    /* No transition on bg/color so active swap during scroll feels snappy */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.15;
    white-space: nowrap;
    position: relative;
}
.wd-fc-day-tab:hover {
    color: var(--wd-text-primary);
    background: rgba(46, 125, 75, 0.12) !important;
}
.wd-fc-day-tab--active,
.wd-fc-day-tab--active:hover,
.wd-fc-day-tab--active:focus,
.wd-fc-day-tab--active:active {
    background: var(--wd-brand-light) !important;
    color: var(--wd-brand-dark) !important;
    font-weight: 800;
    border-color: var(--wd-border);
    z-index: 3;
    outline: none;
    box-shadow: none;
}
/* Override Hello-Elementor / browser default pink button:focus + button:hover */
.wd-fc-day-tab:focus,
.wd-fc-day-tab:focus-visible,
.wd-fc-day-tab:active {
    outline: none;
    box-shadow: none;
}
.wd-fc-day-tab:not(.wd-fc-day-tab--active):focus,
.wd-fc-day-tab:not(.wd-fc-day-tab--active):active {
    background: rgba(46, 125, 75, 0.06) !important;
    color: var(--wd-text-secondary) !important;
}
.wd-fc-day-tab--active:hover {
    background: var(--wd-brand-light);
    color: var(--wd-brand-dark);
}
.wd-fc-day-tab__label {
    font-size: var(--wd-font-size-xs);
    letter-spacing: 0.2px;
}
.wd-fc-day-tab__score {
    font-size: 0.78rem;
    font-weight: 700;
    color: inherit;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
.wd-fc-day-tab--active .wd-fc-day-tab__score { opacity: 1; }

/* (top-left corner of the table card stays rounded — tabs are offset to start
   to the right of the labels column so they don't need a square corner.)
   Pull the card up an extra 2px to hide the inset-shadow border under the
   active tab so they appear truly flush. Parent .wd-tab-panel uses
   gap: 14px which creates space between every child. */
.wd-card--forecast-tabbed {
    margin-top: calc(-1 * var(--wd-space-md, 14px) - 2px) !important;
    border-radius: var(--wd-radius-md) !important;
}

/* ─── BEST WINDOW SCORING-MODE BADGE ─── */
.wd-bw-mode-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
    color: var(--wd-text-secondary);
    transition: all 0.15s;
    white-space: nowrap;
}
.wd-bw-mode-badge--custom {
    background: rgba(46, 125, 181, 0.10);
    border-color: rgba(46, 125, 181, 0.35);
    color: var(--wd-blue);
}

/* Wrap that holds badge + the (i) info button. Position relative so the
   tooltip can anchor to the button. */
.wd-bw-mode-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* Small (i) info button — only visible when the badge is in default mode
   (the WeatherDuck-scoring explanation is for the canonical scoring,
   not the user's custom config). */
.wd-bw-mode-wrap .wd-bw-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--wd-border);
    border-radius: 999px;
    background: var(--wd-bg-subtle);
    color: var(--wd-text-secondary);
    font-family: var(--wd-font);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    cursor: help;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.wd-bw-mode-wrap .wd-bw-info__icon {
    display: block;
    line-height: 1;
}
.wd-bw-mode-wrap .wd-bw-info:hover,
.wd-bw-mode-wrap .wd-bw-info:focus-visible {
    background: var(--wd-border);
    color: var(--wd-text);
    border-color: var(--wd-text-mid);
    outline: none;
}
.wd-bw-mode-badge--custom ~ .wd-bw-info {
    display: none;
}

/* Tooltip: hidden by default, revealed on hover/focus of the button. */
.wd-bw-info__tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: 280px;
    max-width: calc(100vw - var(--wd-space-lg) * 2);
    padding: var(--wd-space-md);
    background: var(--wd-card-bg, #fff);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    box-shadow: var(--wd-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    color: var(--wd-text);
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-xs);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: left;
    cursor: default;
    white-space: normal;
}
.wd-bw-info__tip strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text);
}
.wd-bw-info:hover .wd-bw-info__tip,
.wd-bw-info:focus-visible .wd-bw-info__tip,
.wd-bw-info:focus-within .wd-bw-info__tip {
    display: block;
}

/* ─── BEST WINDOW DAY-SWITCHER BUTTONS ─── */
.wd-bw-day-btn {
    --bw-tint: var(--wd-text-mid);
    border: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
    border-radius: var(--wd-radius-sm);
    padding: 4px 10px 6px;
    font-family: var(--wd-font);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    line-height: 1.1;
}
.wd-bw-day-btn__label {
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    color: var(--wd-text-secondary);
    letter-spacing: 0.2px;
    line-height: 1;
}
.wd-bw-day-btn__score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bw-tint);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.wd-bw-day-btn:hover {
    /* Override Hello-Elementor's pink button:hover/focus default */
    background: var(--wd-bg-subtle) !important;
    color: var(--wd-text-primary) !important;
}
.wd-bw-day-btn:focus,
.wd-bw-day-btn:focus-visible,
.wd-bw-day-btn:active {
    outline: none;
    box-shadow: none;
    background: var(--wd-bg-subtle) !important;
    color: var(--wd-text-primary) !important;
}
/* Inner spans keep their bucket-driven colours on focus/active */
.wd-bw-day-btn:focus .wd-bw-day-btn__label,
.wd-bw-day-btn:active .wd-bw-day-btn__label {
    color: var(--wd-text-secondary) !important;
}
.wd-bw-day-btn:focus .wd-bw-day-btn__score,
.wd-bw-day-btn:active .wd-bw-day-btn__score {
    color: var(--bw-tint) !important;
}
/* Keep bucket-tinted hover/focus/active bg for each colour */
.wd-bw-day-btn--excellent:hover,
.wd-bw-day-btn--excellent:focus,
.wd-bw-day-btn--excellent:active { background: rgba(46, 125, 181, 0.18) !important; }
.wd-bw-day-btn--good:hover,
.wd-bw-day-btn--good:focus,
.wd-bw-day-btn--good:active      { background: rgba(47, 153, 85, 0.18)  !important; }
.wd-bw-day-btn--fair:hover,
.wd-bw-day-btn--fair:focus,
.wd-bw-day-btn--fair:active      { background: rgba(198, 138, 26, 0.18) !important; }
.wd-bw-day-btn--poor:hover,
.wd-bw-day-btn--poor:focus,
.wd-bw-day-btn--poor:active      { background: rgba(217, 123, 42, 0.18) !important; }
.wd-bw-day-btn--terrible:hover,
.wd-bw-day-btn--terrible:focus,
.wd-bw-day-btn--terrible:active  { background: rgba(192, 57, 43, 0.18)  !important; }
/* Active button keeps its bucket bg even on hover/focus */
.wd-bw-day-btn--active,
.wd-bw-day-btn--active:hover,
.wd-bw-day-btn--active:focus,
.wd-bw-day-btn--active:active {
    color: var(--wd-text-primary) !important;
    box-shadow: inset 0 0 0 1px var(--bw-tint) !important;
}
.wd-bw-day-btn--active.wd-bw-day-btn--excellent,
.wd-bw-day-btn--active.wd-bw-day-btn--excellent:hover { background: rgba(46, 125, 181, 0.20) !important; }
.wd-bw-day-btn--active.wd-bw-day-btn--good,
.wd-bw-day-btn--active.wd-bw-day-btn--good:hover      { background: rgba(47, 153, 85, 0.20) !important; }
.wd-bw-day-btn--active.wd-bw-day-btn--fair,
.wd-bw-day-btn--active.wd-bw-day-btn--fair:hover      { background: rgba(198, 138, 26, 0.22) !important; }
.wd-bw-day-btn--active.wd-bw-day-btn--poor,
.wd-bw-day-btn--active.wd-bw-day-btn--poor:hover      { background: rgba(217, 123, 42, 0.22) !important; }
.wd-bw-day-btn--active.wd-bw-day-btn--terrible,
.wd-bw-day-btn--active.wd-bw-day-btn--terrible:hover  { background: rgba(192, 57, 43, 0.22) !important; }
.wd-bw-day-btn--excellent { --bw-tint: var(--wd-blue); border-color: rgba(46, 125, 181, 0.35); background: rgba(46, 125, 181, 0.10); }
.wd-bw-day-btn--good      { --bw-tint: #2f9955;        border-color: rgba(47, 153, 85, 0.35);  background: rgba(47, 153, 85, 0.10); }
.wd-bw-day-btn--fair      { --bw-tint: #c68a1a;        border-color: rgba(198, 138, 26, 0.35); background: rgba(198, 138, 26, 0.10); }
.wd-bw-day-btn--poor      { --bw-tint: #d97b2a;        border-color: rgba(217, 123, 42, 0.35); background: rgba(217, 123, 42, 0.10); }
.wd-bw-day-btn--terrible  { --bw-tint: #c0392b;        border-color: rgba(192, 57, 43, 0.35);  background: rgba(192, 57, 43, 0.10); }
.wd-bw-day-btn--none      { --bw-tint: var(--wd-text-mid); }
.wd-bw-day-btn--active {
    border-width: 1px;
    border-color: var(--bw-tint);
    padding: 4px 10px 6px;
    box-shadow: inset 0 0 0 1px var(--bw-tint);
}
.wd-bw-day-btn--active .wd-bw-day-btn__label {
    color: var(--wd-text-primary);
}
.wd-bw-day-btn--active.wd-bw-day-btn--excellent { background: rgba(46, 125, 181, 0.20); }
.wd-bw-day-btn--active.wd-bw-day-btn--good      { background: rgba(47, 153, 85, 0.20); }
.wd-bw-day-btn--active.wd-bw-day-btn--fair      { background: rgba(198, 138, 26, 0.22); }
.wd-bw-day-btn--active.wd-bw-day-btn--poor      { background: rgba(217, 123, 42, 0.22); }
.wd-bw-day-btn--active.wd-bw-day-btn--terrible  { background: rgba(192, 57, 43, 0.22); }

/* In the merged Forecast tab the customiser shows ONE variable at a time
   (chosen via the dropdown picker), with a summary line listing the current
   settings for all four. The grid becomes a single-column container. */
.wd-fc-top-grid .wd-customiser-grid {
    grid-template-columns: 1fr;
    gap: 0;
}
.wd-fc-top-grid .wd-customiser-var {
    display: none;
}
.wd-fc-top-grid .wd-customiser-var--visible {
    display: flex;
}

/* Header row: title + variable dropdown picker on opposite ends */
.wd-customiser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md);
    flex-wrap: wrap;
}
.wd-customiser-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wd-customiser-picker__label {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wd-customiser-picker__select {
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-primary);
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    padding: 4px 10px;
    cursor: pointer;
}
.wd-customiser-picker__select:focus {
    outline: 2px solid var(--wd-brand-light);
    outline-offset: 1px;
}
.wd-customiser-collapse-btn {
    display: none;
    border: 1px solid rgba(47, 74, 54, 0.28);
    background: rgba(255, 255, 255, 0.78);
    color: #1f2f27;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* Footer row: Reset button on the left, summary 2x2 grid on the right.
   Fixed-column grid prevents horizontal reflow when chip text changes. */
.wd-customiser-footer {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md);
    margin-top: var(--wd-space-md);
    flex-wrap: wrap;
}
.wd-customiser-footer .wd-customiser-reset {
    margin-top: 0;
    flex: 0 0 auto;
}

/* Summary 2x2 grid of all four var settings */
.wd-customiser-summary {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--wd-space-lg);
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-secondary);
    line-height: 1.4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--wd-space-md);
    row-gap: 2px;
    align-items: center;
}
.wd-customiser-summary [data-summary-var] {
    font-weight: 600;
}
.wd-customiser-summary [data-summary-var].wd-customiser-summary__item--off {
    color: var(--wd-text-muted);
    opacity: 0.7;
    font-weight: 400;
}

/* Unified activity-score module at the top of the Forecast tab. */
.wd-activity-score-card {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    padding: 0;
    overflow: hidden;
    border-radius: 0 !important;
}
.wd-activity-score__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md);
    height: 32px;
    min-height: 32px;
    padding: 4px var(--wd-card-padding);
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
}
.wd-activity-score__header .wd-best-window__title {
    color: #1f2f27;
}
.wd-activity-score__header .wd-bw-mode-wrap {
    flex: 0 0 auto;
}
.wd-activity-score__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.wd-activity-score__forecast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
    padding: 0;
}
.wd-bw-col-left,
.wd-bw-col-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wd-activity-score__customiser {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
    padding: 8px var(--wd-card-padding);
    border-top: 1px solid var(--wd-border);
    background: rgba(245, 242, 235, 0.32);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
    grid-template-areas:
        "header footer"
        "presets footer"
        "control footer";
    align-items: center;
    column-gap: var(--wd-space-lg);
    row-gap: 8px;
}
.wd-fc-top-grid .wd-best-window__days {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 8px calc(var(--wd-card-padding) + 12px) 0;
    margin-bottom: var(--wd-space-md);
}
.wd-fc-top-grid .wd-best-window__bar {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    min-height: 60px;
    max-height: 100px;
    padding: 12px calc(var(--wd-card-padding) + 24px) 0 calc(var(--wd-card-padding) + 24px);
    background-clip: content-box;
    background-image:
        linear-gradient(to bottom, transparent calc(20% - 0.5px), rgba(47, 74, 54, 0.18) 20%, transparent calc(20% + 0.5px)),
        linear-gradient(to bottom, transparent calc(40% - 0.5px), rgba(47, 74, 54, 0.18) 40%, transparent calc(40% + 0.5px)),
        linear-gradient(to bottom, transparent calc(60% - 0.5px), rgba(47, 74, 54, 0.18) 60%, transparent calc(60% + 0.5px)),
        linear-gradient(to bottom, transparent calc(80% - 0.5px), rgba(47, 74, 54, 0.18) 80%, transparent calc(80% + 0.5px));
}
.wd-best-window__axis {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 26px;
    margin-right: var(--wd-card-padding);
    color: var(--wd-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}
.wd-best-window__axis span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
}
.wd-best-window__axis span:nth-child(1) { top: 20%; }
.wd-best-window__axis span:nth-child(2) { top: 40%; }
.wd-best-window__axis span:nth-child(3) { top: 60%; }
.wd-best-window__axis span:nth-child(4) { top: 80%; }
.wd-fc-top-grid .wd-best-window__labels {
    grid-column: 1;
    grid-row: 3;
    padding: 0 calc(var(--wd-card-padding) + 24px) var(--wd-space-md) calc(var(--wd-card-padding) + 24px);
}
.wd-fc-top-grid .wd-best-window__summary,
.wd-fc-top-grid .wd-best-window__detail {
    grid-column: 2;
    min-width: 0;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    padding-left: var(--wd-card-padding);
    padding-right: var(--wd-card-padding);
    border-left: 1px solid var(--wd-border);
    background: rgba(245, 242, 235, 0.42);
}
.wd-fc-top-grid .wd-best-window__summary {
    grid-row: 1;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--wd-space-sm);
    margin-top: 0;
    padding-top: 8px;
}
.wd-fc-top-grid .wd-best-window__summary-icon {
    display: none;
}
.wd-fc-top-grid .wd-best-window__summary::before {
    content: 'Peak window';
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--wd-text-light);
}
.wd-fc-top-grid .wd-best-window__summary-text {
    color: var(--wd-green);
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
}
.wd-fc-top-grid .wd-best-window__detail {
    grid-row: 2 / span 3;
    margin-top: 0;
    margin-left: 0;
    padding-top: var(--wd-space-sm);
    padding-bottom: var(--wd-space-md);
}
.wd-best-window__metric + .wd-best-window__metric {
    margin-top: var(--wd-space-xl);
}
.wd-best-window__metric-label {
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--wd-text-light);
}
.wd-best-window__metric-label span {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--wd-text-muted);
}
.wd-best-window__metric-value {
    margin-top: var(--wd-space-sm);
    color: var(--wd-text-primary);
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1.1;
}
.wd-best-window__metric-value span {
    margin-left: 3px;
    color: var(--wd-text-mid);
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
}
.wd-best-window__metric-sub {
    margin-top: 5px;
    color: var(--wd-text-muted);
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
}
.wd-best-window__factor-title {
    margin-top: var(--wd-space-sm);
    color: #a66a12;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.wd-best-window__factor-text {
    margin-top: 5px;
    color: var(--wd-text-secondary);
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 0.76rem;
    line-height: 1.45;
}
.wd-activity-score-card .wd-best-window__label-cell,
.wd-activity-score-card .wd-best-window__tooltip,
.wd-activity-score-card .wd-bw-day-btn,
.wd-activity-score-card .wd-bw-day-btn__label,
.wd-activity-score-card .wd-bw-day-btn__score,
.wd-activity-score-card .wd-bw-mode-badge,
.wd-activity-score-card .wd-bw-info,
.wd-activity-score-card .wd-section-title,
.wd-activity-score-card button,
.wd-activity-score-card .wd-customiser-picker__select,
.wd-activity-score-card .wd-customiser-presets__select,
.wd-activity-score-card .wd-customiser-presets__name,
.wd-activity-score-card .wd-customiser-presets__status,
.wd-activity-score-card .wd-customiser-label,
.wd-activity-score-card .wd-customiser-vals,
.wd-activity-score-card .wd-customiser-summary,
.wd-activity-score-card .wd-customiser-reset {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
}
.wd-fc-top-grid .wd-customiser-header {
    grid-area: header;
    margin-bottom: var(--wd-space-md);
}
.wd-fc-top-grid .wd-customiser-header .wd-section-title {
    color: #1f2f27;
    margin-bottom: 0;
}
.wd-fc-top-grid .wd-customiser-picker__label {
    color: rgba(31, 47, 39, 0.72);
}
.wd-fc-top-grid .wd-customiser-picker__select {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(47, 74, 54, 0.22);
}
.wd-activity-score__customiser .wd-customiser-header {
    align-items: center;
    align-self: end;
    gap: 10px;
    margin-bottom: 0;
}
.wd-activity-score__customiser .wd-customiser-picker {
    margin-left: auto;
}
.wd-activity-score__customiser .wd-customiser-picker__label {
    font-size: 0.66rem;
}
.wd-activity-score__customiser .wd-customiser-picker__select {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 0.74rem;
}
.wd-activity-score__customiser .wd-customiser-intro {
    display: none;
}
.wd-activity-score__customiser .wd-customiser-presets {
    grid-area: presets;
    min-width: 0;
}
.wd-activity-score__customiser .wd-customiser-grid {
    grid-area: control;
}
.wd-activity-score__customiser .wd-customiser-var--visible {
    display: grid;
    grid-template-columns: minmax(128px, 0.3fr) minmax(200px, 1fr) minmax(168px, 0.42fr);
    align-items: center;
    gap: 12px;
}
.wd-activity-score__customiser .wd-customiser-label {
    display: block;
    gap: 0;
    line-height: 1.15;
    min-width: 0;
}
.wd-activity-score__customiser .wd-customiser-vals {
    display: block;
    margin-top: 2px;
    color: var(--wd-text-muted);
    font-size: 0.66rem;
    line-height: 1.2;
}
.wd-activity-score__customiser .wd-customiser-dual-range {
    height: 14px;
}
.wd-activity-score__customiser .wd-customiser-dual-range::before,
.wd-activity-score__customiser .wd-customiser-track-fill {
    height: 3px;
}
.wd-activity-score__customiser .wd-customiser-dual-range input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
}
.wd-activity-score__customiser .wd-customiser-dual-range input[type="range"]::-moz-range-track {
    height: 3px;
}
.wd-activity-score__customiser .wd-customiser-dual-range input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    margin-top: -3px;
}
.wd-activity-score__customiser .wd-customiser-dual-range input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
}
.wd-activity-score__customiser .wd-customiser-impact button {
    padding: 3px 0;
    font-size: 0.66rem;
}
.wd-activity-score__customiser .wd-customiser-footer {
    grid-area: footer;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wd-space-md);
    margin-top: 0;
    padding-left: var(--wd-space-md);
    border-left: 1px solid rgba(47, 74, 54, 0.14);
}
.wd-activity-score__customiser .wd-customiser-reset {
    width: fit-content;
    padding: 3px 8px;
    font-size: 0.66rem;
    flex: 0 0 auto;
}
.wd-activity-score__customiser .wd-customiser-summary {
    flex: 1 1 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    font-size: 0.6rem;
    line-height: 1.25;
    text-align: left;
}
.wd-activity-score__customiser .wd-customiser-summary > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right panel (Peak Window / Day Average / Limiting Factors):
   unified font family across labels + values + body sentences */
.wd-fc-top-grid .wd-best-window__summary,
.wd-fc-top-grid .wd-best-window__summary-text,
.wd-fc-top-grid .wd-best-window__detail,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-label,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-value,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-value span,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-sub,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__factor-title,
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__factor-text {
    font-family: var(--wd-font);
}

/* Right panel: 3 distinct chunks — tight within, generous between */
.wd-fc-top-grid .wd-best-window__summary {
    gap: 2px;
    padding-bottom: var(--wd-space-md);
}
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-value {
    margin-top: 3px;
}
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric-sub {
    margin-top: 3px;
}
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__factor-title {
    margin-top: 3px;
}
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__factor-text {
    margin-top: 3px;
}
.wd-fc-top-grid .wd-best-window__detail .wd-best-window__metric + .wd-best-window__metric {
    margin-top: var(--wd-space-md);
}

/* Day pills: tighten the gap below them, kill the auto-stretch above the bars */
.wd-fc-top-grid .wd-best-window__days {
    margin-bottom: 0;
    padding-bottom: var(--wd-space-xs);
}
.wd-activity-score__body {
    min-height: 0;
}

/* Gridlines: extend past the bars to almost meet the y-axis labels */
.wd-fc-top-grid .wd-best-window__bar {
    background-image: none;
    isolation: isolate;
}
.wd-fc-top-grid .wd-best-window__bar::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 0;
    left: calc(var(--wd-card-padding) + 24px);
    right: calc(var(--wd-card-padding) + 18px);
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(95, 103, 99, 0.56), rgba(95, 103, 99, 0.56)),
        linear-gradient(rgba(95, 103, 99, 0.56), rgba(95, 103, 99, 0.56)),
        linear-gradient(rgba(95, 103, 99, 0.56), rgba(95, 103, 99, 0.56));
    background-size: 100% 1px, 100% 1px, 100% 1px;
    background-position: left top, left 50%, left bottom;
    background-repeat: no-repeat;
}
.wd-fc-top-grid .wd-best-window__bar > .wd-best-window__cell {
    z-index: 1;
}
.wd-fc-top-grid .wd-best-window__axis {
    top: 12px;
    bottom: 0;
    left: calc(var(--wd-card-padding) - 10px);
    right: auto;
    width: 30px;
    margin-right: 0;
    text-align: right;
    color: rgba(53, 66, 60, 0.88);
    z-index: 3;
}
.wd-fc-top-grid .wd-best-window__axis span {
    position: absolute;
    right: 0;
    line-height: 1;
    opacity: 1;
    visibility: visible;
    transform: translateX(-2px) translateY(-50%);
}
.wd-fc-top-grid .wd-best-window__axis span:nth-child(1) { top: 0; }
.wd-fc-top-grid .wd-best-window__axis span:nth-child(2) { top: 50%; }
.wd-fc-top-grid .wd-best-window__axis span:nth-child(3) { top: 100%; }
.wd-fc-top-grid .wd-best-window__axis span:nth-child(4) { display: none; }
.wd-fc-top-grid .wd-best-window__cell-fill {
    opacity: 1 !important;
}
.wd-fc-top-grid .wd-best-window__cell:not(.wd-best-window__cell--peak) .wd-best-window__fill--excellent { background: #4a90c0; }
.wd-fc-top-grid .wd-best-window__cell:not(.wd-best-window__cell--peak) .wd-best-window__fill--good      { background: #48a86a; }
.wd-fc-top-grid .wd-best-window__cell:not(.wd-best-window__cell--peak) .wd-best-window__fill--fair      { background: #cd9834; }
.wd-fc-top-grid .wd-best-window__cell:not(.wd-best-window__cell--peak) .wd-best-window__fill--poor      { background: #df8c42; }
.wd-fc-top-grid .wd-best-window__cell:not(.wd-best-window__cell--peak) .wd-best-window__fill--terrible  { background: #c94e40; }
.wd-fc-top-grid .wd-best-window__cell--peak .wd-best-window__fill--excellent { background: var(--wd-blue); }
.wd-fc-top-grid .wd-best-window__cell--peak .wd-best-window__fill--good      { background: #2f9955; }
.wd-fc-top-grid .wd-best-window__cell--peak .wd-best-window__fill--fair      { background: #c68a1a; }
.wd-fc-top-grid .wd-best-window__cell--peak .wd-best-window__fill--poor      { background: #d97b2a; }
.wd-fc-top-grid .wd-best-window__cell--peak .wd-best-window__fill--terrible  { background: #c0392b; }

/* Customiser header: dropdown sits next to title (not pushed far right) */
.wd-activity-score__customiser .wd-customiser-header {
    justify-content: flex-start;
    gap: var(--wd-space-lg);
}
.wd-activity-score__customiser .wd-customiser-picker {
    margin-left: 0;
}

/* Slider row: shrink label column (now just values) so slider takes more space */
.wd-activity-score__customiser .wd-customiser-var--visible {
    grid-template-columns: minmax(64px, auto) minmax(140px, 1fr) minmax(140px, auto);
}

/* Peak Window: keep the metric-sub line tight to the time range above */
.wd-fc-top-grid .wd-best-window__summary .wd-best-window__metric-sub {
    margin-top: 3px;
}

/* ─── TODAY'S WRITTEN SUMMARY ─── */
.wd-today-summary { padding: var(--wd-card-padding); border-left: 5px solid var(--wd-score-fair); }
.wd-today-summary--excellent { border-left-color: var(--wd-score-excellent); }
.wd-today-summary--good      { border-left-color: var(--wd-score-good); }
.wd-today-summary--fair      { border-left-color: var(--wd-score-fair); }
.wd-today-summary--poor      { border-left-color: var(--wd-score-poor); }
.wd-today-summary--terrible  { border-left-color: var(--wd-score-bad); }
.wd-today-summary__text {
    font-size: var(--wd-font-size-md);
    color: var(--wd-text-secondary);
    line-height: 1.65;
}

/* ─── CONDITIONS RIBBON ─── */
.wd-ribbon {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    background: var(--wd-bg-card);
    border-radius: var(--wd-radius-md);
    border: 1px solid var(--wd-border);
    overflow: hidden;
}
.wd-ribbon__chip {
    padding: 14px 16px;
    border-right: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.wd-ribbon__chip:last-child { border-right: none; }
.wd-ribbon__chip:hover { background: var(--wd-bg-subtle); }
.wd-ribbon__chip::after {
    content: '\2192';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--wd-text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}
.wd-ribbon__chip:hover::after { opacity: 0.6; }
.wd-ribbon__chip-label {
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wd-text-muted);
    margin-bottom: 4px;
}
.wd-ribbon__chip-value {
    font-family: var(--wd-mono);
    font-size: var(--wd-font-size-2xl);
    font-weight: 700;
}
.wd-ribbon__chip-detail {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    margin-top: 2px;
}
.wd-ribbon__chip-extra {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-muted);
    margin-top: 1px;
    line-height: 1.4;
}

/* ─── TOMORROW PREVIEW (Summary tab only) ─── */
.wd-tomorrow { background: var(--wd-bg-subtle); padding: var(--wd-card-padding); }
.wd-tomorrow__header {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md);
    margin-bottom: var(--wd-space-sm);
}
.wd-tomorrow__day {
    font-size: var(--wd-font-size-lg);
    font-weight: 700;
    color: var(--wd-text-primary);
}
.wd-tomorrow__prose {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    line-height: 1.65;
}

/* ─── DAY DESCRIPTORS (Forecast tab Tomorrow + Day-After cards) ─── */
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-grid {
    margin-top: var(--wd-space-md);
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-carousel {
    position: relative;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-carousel--nav {
    padding: 0 56px;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--wd-green);
    background: var(--wd-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(22, 40, 30, 0.22);
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav--prev { left: -5px; }
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav--next { right: -5px; }
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav:hover {
    background: var(--wd-green-hover);
    border-color: var(--wd-green-hover);
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav:disabled {
    opacity: 0.42;
    cursor: default;
    box-shadow: none;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief--hidden {
    display: none;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief {
    padding: 0;
    overflow: hidden;
    border-color: rgba(47, 74, 54, 0.18);
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px var(--wd-space-lg);
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__date {
    font-size: 0.73rem;
    font-weight: 800;
    color: #1f2f27;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
    gap: 16px;
    padding: 14px;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__headline {
    margin: 0 0 8px;
    font-size: 1.04rem;
    line-height: 1.25;
    font-weight: 800;
    color: #1f3a2b;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__prose {
    color: var(--wd-text-secondary);
    font-size: 0.93rem;
    line-height: 1.55;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__prose p {
    margin: 0;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__right {
    border-left: 1px solid rgba(47, 74, 54, 0.14);
    padding-left: 12px;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(47, 74, 54, 0.13);
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric:last-child {
    border-bottom: 0;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric-label {
    font-size: 0.69rem;
    font-weight: 800;
    color: #6b786f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1f3027;
    text-align: right;
}

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-carousel--nav {
        padding: 0 30px;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav--prev { left: -3px; }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-nav--next { right: -3px; }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief-grid {
        grid-template-columns: 1fr;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__body {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 10px 12px 11px;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__top {
        height: 28px;
        min-height: 28px;
        padding: 5px 12px;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__date {
        font-size: 0.68rem;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__headline {
        margin-bottom: 5px;
        font-size: 0.98rem;
        line-height: 1.18;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__prose {
        font-size: 0.86rem;
        line-height: 1.42;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__right {
        border-left: 0;
        border-top: 1px solid rgba(47, 74, 54, 0.14);
        padding-left: 0;
        padding-top: 4px;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric {
        padding: 5px 0;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric-label {
        font-size: 0.62rem;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__metric-value {
        font-size: 0.8rem;
    }
}

/* ─── GEAR RECOMMENDATIONS ─── */
.wd-gear { padding: var(--wd-card-padding); }
.wd-gear__header { margin-bottom: var(--wd-space-md); }
.wd-gear__title {
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--wd-text-muted);
    margin-bottom: 2px;
}
.wd-gear__subtitle {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
}
.wd-gear__days {
    display: flex;
    gap: 4px;
    margin-bottom: var(--wd-space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wd-gear__day-btn {
    border: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
    border-radius: var(--wd-radius-sm);
    padding: 6px 12px;
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    color: var(--wd-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.wd-gear__day-btn:hover { background: var(--wd-bg-card); color: var(--wd-text-primary); }
.wd-gear__day-btn--active {
    background: var(--wd-green);
    color: #fff;
    border-color: var(--wd-green);
}
.wd-gear__day-btn--active:hover { background: var(--wd-green-hover); }
/* Gear table — !important overrides to beat Elementor/Hello theme defaults */
.wd-gear__table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: var(--wd-font-size-sm) !important;
    border: 1px solid var(--wd-border) !important;
    border-radius: var(--wd-radius-sm) !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-family: var(--wd-font) !important;
}
.wd-gear__table thead th,
.wd-gear__table thead td {
    font-size: var(--wd-font-size-xs) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--wd-text-muted) !important;
    text-align: left !important;
    padding: 10px 14px !important;
    background: var(--wd-bg-subtle) !important;
    border-bottom: 2px solid var(--wd-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-family: var(--wd-font) !important;
    line-height: 1.4 !important;
}
.wd-gear__table thead th:last-child { text-align: center !important; width: 36px !important; }
.wd-gear__table tbody tr { transition: background 0.1s !important; background: transparent !important; }
.wd-gear__table tbody tr:nth-child(even) { background: rgba(0,0,0,0.018) !important; }
.wd-gear__table tbody tr:hover { background: rgba(66, 90, 71, 0.05) !important; }
.wd-gear__table tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: top !important;
    background: transparent !important;
    font-family: var(--wd-font) !important;
    font-size: var(--wd-font-size-sm) !important;
    color: var(--wd-text-primary) !important;
    line-height: 1.5 !important;
}
.wd-gear__table tbody tr:last-child td { border-bottom: none !important; }
.wd-gear__table-zone {
    font-weight: 800 !important;
    font-size: var(--wd-font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--wd-green) !important;
    width: 60px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.wd-gear__table-item {
    font-weight: 700 !important;
    color: var(--wd-text-primary) !important;
    font-size: var(--wd-font-size-md) !important;
}
.wd-gear__table-material {
    font-size: var(--wd-font-size-xs) !important;
    color: var(--wd-text-secondary) !important;
    font-style: italic !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}
.wd-gear__table-material strong {
    font-style: normal !important;
    color: var(--wd-red) !important;
    font-weight: 700 !important;
}
.wd-gear__table-reason {
    color: var(--wd-text-muted) !important;
    font-size: var(--wd-font-size-xs) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}
.wd-gear__table-dot {
    text-align: center !important;
    vertical-align: middle !important;
}
.wd-gear__dot {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
.wd-gear__dot--essential { background: var(--wd-red) !important; }
.wd-gear__dot--recommended { background: var(--wd-amber) !important; }
.wd-gear__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wd-space-lg);
    margin-top: var(--wd-space-md);
    flex-wrap: wrap;
}
.wd-gear__legend {
    display: flex;
    gap: var(--wd-space-lg);
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-muted);
    flex-shrink: 0;
}
.wd-gear__legend-item { display: flex; align-items: center; gap: 4px; }
.wd-gear__legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.wd-gear__legend-dot--essential { background: var(--wd-red); }
.wd-gear__legend-dot--recommended { background: var(--wd-amber); }
.wd-gear__disclaimer {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-muted);
    line-height: 1.5;
    text-align: right;
    max-width: 440px;
}
.wd-gear__disclaimer a { color: var(--wd-green); text-decoration: none; font-weight: 600; }
.wd-gear__disclaimer a:hover { text-decoration: underline; }

/* ─── SUMMITS LINK ─── */
.wd-summits__link {
    display: inline-block;
    margin-top: var(--wd-space-sm);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-green);
    text-decoration: none;
    cursor: pointer;
}
.wd-summits__link:hover { text-decoration: underline; }

/* ─── ZONE 3 GRID ─── */
.wd-zone3-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ─── SUN & MOON STRIP (C6 visual style) ─── */
.wd-sunmoon-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    font-family: var(--wd-mono);
    font-size: 0.7rem;
    text-align: center;
    color: var(--wd-text-secondary);
}
.wd-sunmoon-strip__col {
    padding: 8px 4px;
    border-right: 1px solid var(--wd-border-light);
}
.wd-sunmoon-strip__col:last-child { border-right: none; }
.wd-sunmoon-strip__col--today {
    background: var(--wd-green-light);
    border-radius: 6px;
}
.wd-sunmoon-strip__day {
    font-family: var(--wd-font);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-text-muted);
    margin-bottom: 4px;
}
.wd-sunmoon-strip__col--today .wd-sunmoon-strip__day { color: var(--wd-green); }
.wd-sunmoon-strip__line { line-height: 1.6; }
.wd-sunmoon-strip__daylight { color: var(--wd-amber); font-weight: 700; }

/* ─── CARD DETAIL TEXT (replaces inline styles) ─── */
.wd-card__heading {
    font-size: var(--wd-font-size-xl);
    font-weight: 800;
    color: var(--wd-text);
}

.wd-card__detail {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    line-height: 1.55;
    margin-top: var(--wd-space-xs);
}

.wd-card__big-value {
    font-size: var(--wd-font-size-2xl);
    font-weight: 800;
}

.wd-card__sub {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-light);
}

/* ─── TOGGLE BUTTONS (UV / Fog) ─── */
.wd-toggle-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
    color: var(--wd-text-light);
    padding: 6px var(--wd-space-sm);
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wd-toggle-btn--active {
    font-weight: 800;
    color: var(--wd-text);
}

.wd-sunmoon-wrap {
    overflow-x: auto;
}

.wd-sunmoon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wd-font-size-sm);
    font-family: var(--wd-font);
}

.wd-sunmoon-table th,
.wd-sunmoon-table td {
    padding: 7px var(--wd-space-sm);
    text-align: left;
    border-bottom: 1px solid var(--wd-border);
    white-space: nowrap;
}

.wd-sunmoon-table th {
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    color: var(--wd-text);
}

.wd-sunmoon-table td {
    color: var(--wd-text-mid);
}

.wd-sunmoon-table tbody tr:last-child td {
    border-bottom: none;
}

.wd-sunmoon-row--today .wd-sunmoon-day {
    font-weight: 800;
    color: var(--wd-text);
}

.wd-sunmoon-daylight {
    font-family: var(--wd-mono);
    color: var(--wd-text) !important;
}


/* ─── MONOSPACE ─── */
.wd-mono {
    font-family: var(--wd-mono);
}


/* ─── SCORE PILLS ─── */
.wd-pill {
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    font-family: var(--wd-mono);
    padding: 1px 7px;
    border-radius: 5px;
    display: inline-block;
}

.wd-pill--green { color: var(--wd-green); background: var(--wd-green-bg); }
.wd-pill--amber { color: var(--wd-amber); background: var(--wd-amber-bg); }
.wd-pill--red   { color: var(--wd-red);   background: var(--wd-red-bg);   }

/* Activity score 5-band scale */
.wd-pill--excellent { color: var(--wd-score-excellent-text); background: var(--wd-score-excellent); }
.wd-pill--good      { color: var(--wd-score-good-text);      background: var(--wd-score-good); }
.wd-pill--fair      { color: var(--wd-score-fair-text);       background: var(--wd-score-fair); }
.wd-pill--poor      { color: var(--wd-score-poor-text);       background: var(--wd-score-poor); }
.wd-pill--terrible  { color: var(--wd-score-bad-text);        background: var(--wd-score-bad); }


/* ─── TAGS ─── */
.wd-tag {
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--wd-space-xs);
    display: inline-block;
}

.wd-tag--green  { color: var(--wd-green);  background: var(--wd-green-bg);  }
.wd-tag--amber  { color: var(--wd-amber);  background: var(--wd-amber-bg);  }
.wd-tag--red    { color: var(--wd-red);    background: var(--wd-red-bg);    }
.wd-tag--purple { color: var(--wd-purple); background: var(--wd-purple-bg); }
.wd-tag--blue   { color: var(--wd-blue);   background: var(--wd-blue-bg);   }


/* ─── SCORE CIRCLE ─── */
.wd-score-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wd-score-circle__value {
    font-size: var(--wd-font-size-2xl);
    font-weight: 800;
    font-family: var(--wd-mono);
}

.wd-score-circle__label {
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    margin-top: var(--wd-space-xs);
}


/* ─── FACTOR BARS ─── */
.wd-factors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
}

.wd-factor {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
}

.wd-factor__name {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    width: 90px;
    flex-shrink: 0;
}

.wd-factor__track {
    flex: 1;
    height: 7px;
    background: var(--wd-grey-bg);
    border-radius: 4px;
    overflow: hidden;
}

.wd-factor__fill {
    height: 100%;
    border-radius: 4px;
}

.wd-factor__fill--green { background: var(--wd-green); }
.wd-factor__fill--amber { background: var(--wd-amber); }
.wd-factor__fill--grey  { background: var(--wd-grey);  }

.wd-factor__score {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-light);
    width: 34px;
    text-align: right;
    font-family: var(--wd-mono);
}


/* ─── TOGGLE BUTTONS ─── */
.wd-toggle {
    display: flex;
    gap: 4px;
}

.wd-toggle__btn {
    padding: 5px 12px;
    font-size: 13.5px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--wd-font);
}

.wd-toggle__btn--active {
    font-weight: 800;
    background: var(--wd-brand-dark);
    color: #fff;
    border: none;
}

.wd-toggle__btn--inactive {
    font-weight: 500;
    background: var(--wd-grey-bg);
    color: var(--wd-text-mid);
    border: 1px solid var(--wd-border);
}


/* ─── TABLES ─── */
.wd-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
}


.wd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--wd-font);
}

.wd-table thead tr {
    background: var(--wd-brand-light);
}

.wd-table th {
    padding: 7px 10px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--wd-text);
    white-space: nowrap;
}

.wd-table td {
    padding: 6px 14px;
    text-align: center;
    font-size: 14px;
    color: var(--wd-text-mid);
    border-bottom: 1px solid var(--wd-border);
    white-space: nowrap;
    font-family: var(--wd-mono);
}

/* Forecast table: zebra striping removed in favour of row-group tinting
   (see .wd-fc-grp--conditions / --tempwind / --detail below). */
.wd-table--forecast tbody tr { background: transparent; }

.wd-table__sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 700;
    font-family: var(--wd-font);
}

.wd-table thead .wd-table__sticky { background: var(--wd-brand-light); }

/* ─── Forecast row groups + forced row alignment ───
   The labels and data sides are separate tables, so browsers compute
   row heights independently. Force identical heights via maximally
   specific !important rules that beat .wd-table__rowlabel + .wd-table__temp. */

/* All grp rows: 36px on both sides — leaves room for the 28px condition icon. */
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp td,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp td.wd-table__rowlabel,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp td.wd-table__temp,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp td.wd-table__feels {
    height: 30px !important;
    box-sizing: border-box !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.wd-table__rowlabel.wd-table__rowlabel--condition {
    height: 40px !important;
}

/* Condition icon back to 28px (was shrunk during alignment fix). */
.wd-card--forecast .wd-fc-data .wd-table__icon img {
    width: 34px !important;
    height: 34px !important;
    vertical-align: middle;
}

/* Group header rows: 20px on both sides */
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grouphead,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grouphead td,
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grouphead td.wd-table__rowlabel {
    height: 20px !important;
    box-sizing: border-box !important;
    background: var(--wd-brand-light) !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: var(--wd-text-secondary) !important;
    font-weight: 800 !important;
    text-align: left !important;
    padding: 0 14px !important;
    border-top: 1px solid var(--wd-border) !important;
    border-bottom: 1px solid var(--wd-border) !important;
    font-family: var(--wd-font) !important;
    line-height: 20px !important;
    min-width: 0 !important;
}
.wd-fc-grp--conditions td:not(.wd-table__rowlabel) {
    background-color: rgba(74, 144, 192, 0.05);
}
.wd-fc-grp--tempwind td:not(.wd-table__rowlabel) {
    background-color: rgba(217, 123, 42, 0.05);
}
.wd-fc-grp--detail td:not(.wd-table__rowlabel) {
    background-color: transparent;
}


/* ─── FORECAST TABLE ─── */
.wd-table--forecast {
    width: auto;
    min-width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}


.wd-table--forecast td,
.wd-table--forecast th {
    /* Hard reset to stop Elementor/theme table borders */
    border: none !important;
    border-bottom: 1px solid var(--wd-border) !important;
    padding: 6px 10px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-family: var(--wd-mono);
    color: var(--wd-text-mid);
    background-clip: padding-box;
}


/* Row label (sticky left column) — same fill + border as data cells */
.wd-table__rowlabel {
    text-align: left !important;
    font-family: var(--wd-font) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--wd-text) !important;
    padding-right: 16px !important;
    white-space: nowrap;
    min-width: 85px;
    /* No vertical divider in the preview mock */
    border-right: none;
}

.wd-table__colhead {
    font-family: var(--wd-mono) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--wd-text) !important;
}

/* Temp row */
.wd-table__temp,
.wd-table__feels {
    color: var(--wd-text) !important;
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.wd-table__temp {
    font-weight: 800 !important;
}
.wd-table__feels {
    font-weight: 500 !important;
}

/* Condition row — custom icon images */
.wd-table__icon {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1;
}

.wd-table__icon img {
    display: block;
    margin: 0 auto;
    width: 34px;
    height: 34px;
}

.wd-table__temp strong {
    color: var(--wd-text);
    font-weight: 800;
}

/* Day+time header rows — green-tinted */
.wd-table__dayrow {
    background: var(--wd-brand-light) !important;
}

.wd-table__dayrow td {
    border: none !important;
    border-bottom: 2px solid var(--wd-border) !important;
}

.wd-table__dayrow .wd-table__sticky {
    background: var(--wd-brand-light) !important;
}

.wd-table__dayhead {
    font-family: var(--wd-font);
    font-size: 13px;
    font-weight: 800;
    color: var(--wd-brand-dark);
    text-align: left !important;
    padding: 0 !important;
    position: relative;
    background: var(--wd-brand-light);
}

.wd-table__daylabel {
    display: inline-block;
    vertical-align: top;
    z-index: 2;
    padding: 0 !important;
    line-height: 28px !important;
    background: var(--wd-brand-light);
    white-space: nowrap;
    position: sticky;
    left: 0;
}

/* Day divider */
.wd-table__daybreak {
    border-left: 0 !important;
}

.wd-table__dayrow .wd-table__daybreak {
    box-shadow: none;
}

.wd-table__dayend {
    border-right: 1px solid rgba(90, 90, 85, 0.32) !important;
    box-shadow: none;
}

.wd-table__dayhead:not(:last-child) {
    border-right: 1px solid rgba(90, 90, 85, 0.32) !important;
    box-shadow: none;
}

/* Split layout: fixed labels + scrollable data */
.wd-fc-split {
    display: flex;
    align-items: stretch;
}

.wd-fc-labels {
    flex-shrink: 0;
    width: auto;
    min-width: 0 !important;
}

.wd-fc-split > .wd-table-wrap {
    flex: 1;
    min-width: 0;
}

.wd-fc-labels td {
    border-right: none !important;
    box-shadow: none !important;
}

/* Condition label row — must match icon-bearing data cell.
   Icon img is 34px tall + 4px padding top/bottom → row renders at ~42px in the data table.
   Higher specificity + !important needed to beat the broader .wd-fc-grp height: 30px rule above. */
.wd-card--forecast .wd-fc-split tbody tr.wd-fc-grp td.wd-table__rowlabel.wd-table__rowlabel--condition {
    height: 42px !important;
    line-height: 1.2 !important;
}

/* Condition label row — match icon (34px) + padding (4+4) = 42px */
.wd-fc-labels tbody tr:nth-child(1) td {
    height: 42px !important;
}
/* Temp + Feels label rows — match the data-cell height (rows 4 and 5 in tbody) */
.wd-fc-labels tbody tr:nth-child(4) td,
.wd-fc-labels tbody tr:nth-child(5) td {
    height: 34px !important;
}

/* Forecast card — rounded with clipped overflow, no extra padding */
.wd-card--forecast {
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    box-shadow: 0 0 0 1px var(--wd-border) inset;
}

.wd-card--forecast .wd-table-wrap {
    margin: 0;
}

/* Last row — no bottom border */
.wd-table--forecast tr:last-child td {
    border-bottom: 1px solid var(--wd-border) !important;
}

.wd-cell--empty {
    color: var(--wd-grey);
    font-weight: 500;
}

/* Score row in forecast table */
.wd-table__scorerow {
    /* keep as structural hook */
}

.wd-table__scorerow td {
    border-top: 2px solid var(--wd-border) !important;
    border-bottom: 1px solid var(--wd-border) !important;
}

.wd-table__score {
    font-family: var(--wd-mono);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 6px !important;
}

/* ─── SCORE PIP COLOURS (preview-aligned) ─── */
.wd-score-pip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--wd-mono);
    line-height: 1.2;
}

/* 5-band score palette */
.wd-score-pip--8,
.wd-score-pip--9,
.wd-score-pip--10 {
    color: var(--wd-score-excellent-text);
    background: var(--wd-score-excellent);
}

.wd-score-pip--6,
.wd-score-pip--7 {
    color: var(--wd-score-good-text);
    background: var(--wd-score-good);
}

.wd-score-pip--4,
.wd-score-pip--5 {
    color: var(--wd-score-fair-text);
    background: var(--wd-score-fair);
}

.wd-score-pip--2,
.wd-score-pip--3 {
    color: var(--wd-score-poor-text);
    background: var(--wd-score-poor);
}

.wd-score-pip--0,
.wd-score-pip--1 {
    color: var(--wd-score-bad-text);
    background: var(--wd-score-bad);
}

/* ─── ACTIVITY SCORE BAR CHART ─── */
.wd-act-bars-card {
    padding: var(--wd-space-lg);
}

.wd-act-bars-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wd-space-xl);
    align-items: stretch;
}

.wd-act-bars-pane,
.wd-act-bars-desc {
    min-width: 0;
}

.wd-act-bars-pane {
    display: flex;
    flex-direction: column;
}

.wd-act-bars-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    line-height: 1.7;
}

.wd-act-bars-desc p + p {
    margin-top: var(--wd-space-sm);
}

.wd-act-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--wd-space-sm);
    margin-bottom: var(--wd-space-lg);
}

.wd-act-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wd-space-xs);
}

.wd-act-bar-day {
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-mid);
    font-family: var(--wd-font);
}

.wd-act-bar-track {
    width: 100%;
    height: 68px;
    background: var(--wd-grey-bg);
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.wd-act-bar-fill {
    width: 100%;
    min-height: 2px;
    border-radius: 0 0 6px 6px;
    transition: height 0.4s ease;
}

.wd-act-bar-fill--excellent { background: var(--wd-blue); opacity: 0.7; }
.wd-act-bar-fill--good      { background: #2f9955; opacity: 0.7; }
.wd-act-bar-fill--fair      { background: #c68a1a; opacity: 0.7; }
.wd-act-bar-fill--poor      { background: #d97b2a; opacity: 0.7; }
.wd-act-bar-fill--terrible  { background: #c0392b; opacity: 0.7; }

.wd-act-bar-score {
    font-size: var(--wd-font-size-md);
    font-weight: 800;
    font-family: var(--wd-mono);
}

.wd-act-bar-score--excellent { color: var(--wd-blue); }
.wd-act-bar-score--good      { color: #2f9955; }
.wd-act-bar-score--fair      { color: #b17613; }
.wd-act-bar-score--poor      { color: #c46812; }
.wd-act-bar-score--terrible  { color: #b63a31; }

/* ─── ACTIVITY SCORE TABLE ─── */
.wd-act-table-card {
    overflow: hidden;
}

.wd-score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--wd-font);
    background: transparent;
}

.wd-score-table thead tr {
    background: transparent;
}

.wd-score-table th {
    padding: var(--wd-space-sm) 10px;
    text-align: center;
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    color: var(--wd-text);
    white-space: nowrap;
    border-bottom: 1px solid var(--wd-border);
    border-left: 0;
    border-right: 0;
    background: transparent;
}

.wd-score-table tbody tr {
    background: transparent;
}

.wd-score-table td {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid var(--wd-border);
    border-left: 0;
    border-right: 0;
    background: transparent;
    white-space: nowrap;
}

.wd-score-table__day {
    text-align: left !important;
    padding-left: 12px !important;
    font-weight: 700;
    color: var(--wd-text);
    font-family: var(--wd-font) !important;
    width: 80px;
}

.wd-score-table__avg {
    font-weight: 800;
    width: 54px;
}

.wd-cell--empty {
    color: var(--wd-grey);
    font-weight: 500;
}

.wd-act-note {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    line-height: 1.55;
    margin-top: var(--wd-space-md);
}

/* ─── SCORE LEGEND ─── */
.wd-score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-space-sm);
    justify-content: center;
    margin-top: var(--wd-space-xs);
}

.wd-score-legend__item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--wd-font-size-xs);
    font-family: var(--wd-font);
    color: var(--wd-text-mid);
}

.wd-score-legend__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.wd-legend-dot--excellent { background: var(--wd-blue); opacity: 0.7; }
.wd-legend-dot--good      { background: #2f9955; opacity: 0.7; }
.wd-legend-dot--fair      { background: #c68a1a; opacity: 0.7; }
.wd-legend-dot--poor      { background: #d97b2a; opacity: 0.7; }
.wd-legend-dot--terrible  { background: #c0392b; opacity: 0.7; }

/* ─── SCORE CUSTOMISER ─── */
.wd-customiser-card {
    font-family: var(--wd-font);
}

.wd-customiser-intro {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-mid);
    line-height: 1.5;
    margin: 0 0 var(--wd-space-lg) 0;
}

.wd-customiser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wd-space-xl);
}

.wd-customiser-var {
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-sm);
}

.wd-customiser-label {
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text);
    display: flex;
    align-items: baseline;
    gap: var(--wd-space-sm);
}

.wd-customiser-vals {
    font-weight: 400;
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-mid);
    text-transform: none;
    letter-spacing: 0;
}

/* On/Off colour cue: the variable label above each slider turns green
   when its impact is Low/Med/High, and grey when impact is Off. */
.wd-customiser-label--on,
.wd-customiser-label--on .wd-customiser-vals {
    color: var(--wd-green);
}
.wd-customiser-label--off,
.wd-customiser-label--off .wd-customiser-vals {
    color: var(--wd-text-muted);
}

/* Dual-thumb range slider */
.wd-customiser-dual-range {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

.wd-customiser-dual-range input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.wd-customiser-dual-range input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.wd-customiser-dual-range input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.wd-customiser-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand, #2E7DB5);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -6px;
    position: relative;
    z-index: 3;
}

.wd-customiser-dual-range input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand, #2E7DB5);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
}

/* Track background and fill */
.wd-customiser-dual-range::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--wd-grey-bg, #E8E8E4);
    border-radius: 3px;
    z-index: 0;
}

.wd-customiser-track-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--wd-brand, #2E7DB5);
    opacity: 0.35;
    border-radius: 3px;
    z-index: 1;
    pointer-events: none;
}

/* Impact button group */
.wd-customiser-impact {
    display: flex;
    gap: 0;
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    border: 1px solid var(--wd-border, #D5D5CE);
}

.wd-customiser-impact button {
    flex: 1;
    padding: 5px 0;
    font-size: var(--wd-font-size-xs);
    font-family: var(--wd-font);
    font-weight: 500;
    background: var(--wd-card-bg, #fff);
    color: var(--wd-text-mid);
    border: none;
    border-right: 1px solid var(--wd-border, #D5D5CE);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wd-customiser-impact button:last-child {
    border-right: none;
}

.wd-customiser-impact button:hover {
    background: var(--wd-grey-bg, #F3F3EF);
}

.wd-customiser-impact button.active {
    background: var(--wd-brand, #2E7DB5);
    color: #fff;
    font-weight: 600;
}

/* Reset button */
.wd-customiser-reset {
    display: inline-block;
    margin-top: var(--wd-space-lg);
    padding: var(--wd-space-sm) var(--wd-space-lg);
    font-size: var(--wd-font-size-xs);
    font-family: var(--wd-font);
    font-weight: 500;
    color: var(--wd-text-mid);
    background: var(--wd-grey-bg, #F3F3EF);
    border: 1px solid var(--wd-border, #D5D5CE);
    border-radius: var(--wd-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.wd-customiser-reset:hover {
    background: var(--wd-border, #D5D5CE);
}

/* Responsive */
@media (max-width: 1024px) {
    .wd-customiser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wd-customiser-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── SKELETONS ─── */
.wd-skeleton {
    padding: 40px;
    text-align: center;
    color: var(--wd-text-light);
    font-size: 15px;
}

.wd-skeleton-block {
    background: linear-gradient(90deg, var(--wd-grey-bg) 25%, #E8E8E4 50%, var(--wd-grey-bg) 75%);
    background-size: 200% 100%;
    animation: wd-shimmer 1.5s infinite;
    border-radius: 6px;
}

@keyframes wd-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ─── CHART CONTAINER ─── */
.wd-chart {
    width: 100%;
    height: 380px;
    background: var(--wd-cream);
    border-radius: 8px;
    border: 1px solid var(--wd-border);
    position: relative;
    overflow: hidden;
}


/* ─── TIME SLIDER ─── */
.wd-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0 4px;
}

.wd-slider input[type="range"] {
    flex: 1;
    accent-color: var(--wd-brand);
}

.wd-slider__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--wd-text);
}

.wd-slider__sublabel {
    font-size: 13px;
    color: var(--wd-text-light);
}


/* ─── METEOR BANNER ─── */
.wd-meteor-banner {
    background: var(--wd-purple-bg);
    border: 1px solid #D4C4E8;
    border-radius: 10px;
    padding: 18px;
}


/* ─── FOOTER ─── */
.wd-footer {
	border-top: none;
	background: transparent;
	max-width: calc(var(--wd-max) + 48px);
	margin: 0 auto;
	padding: 20px 24px;
	text-align: center;
	font-size: var(--wd-font-size-xs);
	color: var(--wd-text-muted);
}

/* Footer dark chrome is now in site-dark-chrome.css (loaded globally) */


/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {

    .wd-grid-3 {
        grid-template-columns: 1fr;
    }

    .wd-grid-2,
    .wd-grid-6040 {
        grid-template-columns: 1fr;
    }

    .wd-factors {
        grid-template-columns: 1fr;
    }

    .wd-content {
        max-width: 100%;
        padding: 12px 14px 30px;
    }

    .wd-hero {
        padding: 12px 14px 0;
    }

    .wd-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero-text"
            "hero-map"
            "hero-tabs";
        row-gap: 8px;
    }

    .wd-hero__inner {
        display: block;
    }

    .wd-hero__sun {
        text-align: left;
    }

    .wd-hero__map {
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        align-self: auto;
        padding-block: 0;
    }

    .wd-hero__location {
        max-width: none;
    }

    .wd-tabs {
        padding-right: 0;
    }

    .wd-hero__map .wd-location-map {
        height: 110px !important;
    }

    .wd-hero__map .wd-fc-header__col--map {
        height: 110px !important;
    }

    .wd-tabs__btn {
        padding: 10px 12px;
        font-size: 14.5px;
    }

    .wd-chart {
        height: 300px;
    }

    .wd-card {
        padding: 14px;
    }

    .wd-card--headline {
        padding: 12px;
    }

    .wd-grid-7 {
        gap: 2px;
    }

    .wd-summary-written {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wd-sunmoon-table th,
    .wd-sunmoon-table td {
        padding: 6px 8px;
        font-size: 13.5px;
    }

    .wd-act-bars-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wd-act-bars-desc {
        justify-content: flex-start;
    }

    .wd-weekday__temp {
        font-size: 12px;
    }

    .wd-weekday__emoji {
        font-size: 19px;
    }
}


/* ==========================================================
 * GROUNDS TAB — RainX Inline Styles
 * ========================================================== */

/* Wrap — let it fill the content area */
#tab-grounds .wd-rainx-wrap {
    max-width: 100%;
}

/* Panel header */
.wd-grounds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-lg);
    margin-bottom: var(--wd-space-lg);
}

.wd-grounds-meta {
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-mid);
    white-space: nowrap;
}

.wd-grounds-err {
    margin-left: var(--wd-space-sm);
    color: var(--wd-red);
    font-weight: 800;
}

/* Main 2-column grid (map left, chart+summary right) */
.wd-grounds-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--wd-space-lg);
    align-items: start;
}

/* Right column stack */
.wd-grounds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-lg);
    min-width: 0;
}

/* Search tools */
.wd-grounds-tools {
    display: flex;
    gap: var(--wd-space-sm);
    align-items: center;
    padding: var(--wd-space-sm) var(--wd-space-lg);
    border-top: 1px solid var(--wd-border);
    background: var(--wd-card);
}

.wd-grounds-tools input {
    flex: 1;
    min-width: 140px;
    padding: var(--wd-space-sm) var(--wd-space-md);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    font-size: var(--wd-font-size-md);
    font-family: var(--wd-font);
    outline: none;
    color: var(--wd-text);
    background: var(--wd-card);
}

.wd-grounds-tools input:focus {
    border-color: var(--wd-brand);
    box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.12);
}

.wd-grounds-tools button {
    padding: var(--wd-space-sm) var(--wd-space-md);
    border-radius: var(--wd-radius-sm);
    border: 1px solid var(--wd-border);
    background: var(--wd-card);
    cursor: pointer;
    font-weight: 800;
    font-size: var(--wd-font-size-md);
    font-family: var(--wd-font);
    color: var(--wd-text);
}

.wd-grounds-tools button:hover {
    background: var(--wd-cream);
}

/* Map container */
.wd-grounds-map {
    height: 520px;
}

/* Leaflet focus outline fix */
#tab-grounds .leaflet-container,
#tab-grounds .leaflet-container:focus {
    outline: none !important;
}

/* Chart wrapper */
.wd-grounds-chartwrap {
    padding: var(--wd-space-lg);
    background: var(--wd-cream);
    height: 374px;
}

.wd-grounds-chartwrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Note text */
.wd-grounds-note {
    padding: var(--wd-space-sm) var(--wd-space-lg);
    font-size: var(--wd-font-size-xs);
    line-height: 1.3;
    color: var(--wd-text-mid);
    font-style: italic;
    background: var(--wd-cream);
}

/* Station summary key-value grid */
.wd-grounds-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-xs) var(--wd-space-lg);
    margin-top: var(--wd-space-md);
    border-top: 1px solid var(--wd-border);
    padding: var(--wd-space-sm) 0;
}

.wd-grounds-row {
    display: flex;
    justify-content: space-between;
    gap: var(--wd-space-sm);
    padding: var(--wd-space-sm) 0;
    border-bottom: 1px solid var(--wd-border);
}

.wd-grounds-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.wd-grounds-k {
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-mid);
    white-space: nowrap;
}

.wd-grounds-v {
    font-size: var(--wd-font-size-md);
    font-weight: 800;
    color: var(--wd-text);
    text-align: right;
    word-break: break-word;
}

/* Map marker dots (used by rainx-map.js DivIcon) */
.wd-rainx-pin {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.wd-rainx-pin.is-selected {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.95);
}


/* ─── GROUNDS TAB RESPONSIVE ─── */
@media (max-width: 980px) {
    .wd-grounds-grid {
        grid-template-columns: 1fr;
    }

    .wd-grounds-map {
        height: 420px;
    }

    .wd-grounds-chartwrap {
        height: 320px;
    }

    .wd-grounds-summary {
        grid-template-columns: 1fr;
    }

    .wd-grounds-row:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--wd-border);
    }

    .wd-grounds-row:last-child {
        border-bottom: none;
    }

    .wd-grounds-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wd-grounds-meta {
        white-space: normal;
    }

    .wd-grounds-tools {
        flex-wrap: wrap;
    }

    .wd-grounds-tools input {
        flex-basis: 100%;
        min-width: 0;
    }
}


/* ═══════════════════════════════════════════════════════════
   MOUNTAIN TAB — Side-by-Side Row (Inversion + Skew-T)
   ═══════════════════════════════════════════════════════════ */

.wd-mountain-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-lg);
    align-items: start;
}

.wd-mountain-row > .wd-card,
.wd-mountain-row > .wd-skewt-card {
    margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   MOUNTAIN TAB — Skew-T Atmospheric Profile
   ═══════════════════════════════════════════════════════════ */

.wd-skewt-card {
    background: var(--wd-card);
    border-radius: var(--wd-radius-md);
    border: 1px solid var(--wd-border);
    padding: var(--wd-space-lg);
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.wd-skewt-card + .wd-card,
.wd-card + .wd-skewt-card {
    margin-top: 14px;
}

/* ── Mode toggle row (toggle + help button) ── */
.wd-skewt-mode-row {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
    margin-bottom: var(--wd-space-sm);
    position: relative;
}

/* ── Help button ── */
.wd-skewt-help-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--wd-border);
    background: var(--wd-cream);
    font-weight: 800;
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-mid);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.wd-skewt-help-btn:hover {
    background: var(--wd-grey-bg);
    color: var(--wd-text);
}

/* ── Help popover ── */
.wd-skewt-help-popover {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 50;
    width: 340px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--wd-card);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    padding: var(--wd-space-lg) 18px;
    box-shadow: var(--wd-shadow-md);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--wd-text-mid);
}

.wd-skewt-help-popover[hidden] {
    display: none;
}

.wd-skewt-help-popover .wd-skewt-guide-title {
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--wd-text);
}

.wd-skewt-help-popover h5 {
    margin: 12px 0 4px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--wd-text);
}

.wd-skewt-help-popover p {
    margin: 4px 0;
}

.wd-skewt-help-popover ul {
    margin: 2px 0 6px 14px;
    padding: 0;
}

.wd-skewt-help-popover li {
    margin-bottom: 3px;
}

.wd-skewt-help-popover .wd-skewt-guide-note {
    margin-top: 10px !important;
    font-size: 0.75rem;
    color: var(--wd-text-light);
    font-style: italic;
}

/* ── Mode toggle (Vertical / Skew-T) ── */
.wd-skewt-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    width: fit-content;
}

.wd-skewt-mode-btn {
    padding: var(--wd-space-sm) var(--wd-space-lg);
    font: 500 12px var(--wd-font);
    border: none;
    background: var(--wd-cream);
    color: var(--wd-text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wd-skewt-mode-btn:not(:last-child) {
    border-right: 1px solid var(--wd-border);
}

.wd-skewt-mode-btn.active {
    background: var(--wd-brand);
    color: #fff;
    font-weight: 700;
}

.wd-skewt-mode-btn:hover:not(.active) {
    background: var(--wd-grey-bg);
}

/* ── Canvas container ── */
.wd-skewt-wrap {
    position: relative;
}

.wd-skewt-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wd-radius-sm);
    border: 1px solid var(--wd-border);
    background: var(--wd-card);
    touch-action: none;
}

/* ── Attribution ── */
.wd-skewt-attribution {
    margin-top: var(--wd-space-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wd-text-light);
    text-align: center;
}

/* ── Fallback (no pressure-level data) ── */
.wd-skewt-unavailable {
    padding: var(--wd-space-3xl) var(--wd-space-xl);
    text-align: center;
    background: var(--wd-cream);
    border-radius: var(--wd-radius-md);
    border: 1px dashed var(--wd-border);
}

.wd-skewt-unavailable p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--wd-text-mid);
    line-height: 1.5;
}

/* ── Time slider ── */
.wd-skewt-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md);
    padding: var(--wd-space-sm) var(--wd-space-lg);
    background: var(--wd-card);
    border-radius: 0 0 var(--wd-radius-sm) var(--wd-radius-sm);
    border: 1px solid var(--wd-border);
    border-top: none;
}

.wd-skewt-slider-time {
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    color: var(--wd-text);
    white-space: nowrap;
    min-width: 80px;
    font-variant-numeric: tabular-nums;
    font-family: var(--wd-mono);
}

.wd-skewt-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--wd-grey-bg);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.wd-skewt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.wd-skewt-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   MOUNTAIN TAB — PeakWind Exposure Map
   ═══════════════════════════════════════════════════════════ */

.wd-peakwind-card .wd-peakwind-wrap {
    margin: 0;
}

.wd-peakwind-map {
    position: relative;
    background: var(--wd-grey-bg);
    border-radius: var(--wd-radius-md);
    overflow: hidden;
}

/* Canvas overlay (created by JS) */
.wd-peakwind-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Legend (created by JS) */
.wd-peakwind-legend {
    background: rgba(255, 255, 255, 0.92);
    padding: var(--wd-space-sm) var(--wd-space-md);
    border-radius: var(--wd-radius-sm);
    box-shadow: var(--wd-shadow-sm);
    font-size: var(--wd-font-size-sm);
    line-height: 1.4;
}

.wd-peakwind-legend-title {
    font-weight: 500;
    font-size: var(--wd-font-size-lg);
    margin-bottom: var(--wd-space-sm);
    text-align: center;
}

.wd-peakwind-legend-bar {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
}

.wd-peakwind-legend-gradient {
    width: 100px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(
        to right,
        rgba(76, 175, 80, 0.7),
        rgba(139, 195, 74, 0.7),
        rgba(255, 235, 59, 0.7),
        rgba(255, 152, 0, 0.7),
        rgba(244, 67, 54, 0.7)
    );
}

.wd-peakwind-legend-label {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-mid);
    white-space: nowrap;
}

/* Compass (created by JS) */
.wd-peakwind-compass {
    position: relative;
    width: 60px;
    border: none !important;
    background: transparent;
}

.wd-peakwind-compass-dial {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: var(--wd-shadow-sm);
}

.wd-peakwind-compass-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    transition: transform 0.4s ease-out;
}

.wd-peakwind-compass-label {
    text-align: center;
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-mid);
    margin-top: var(--wd-space-xs);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Exposure toggle (created by JS) */
.wd-peakwind-toggle {
    display: block;
    background: var(--wd-card);
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--wd-space-xs);
    padding: 5px var(--wd-space-sm);
    font-size: var(--wd-font-size-xs);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-family: var(--wd-font);
    white-space: nowrap;
}

.wd-peakwind-toggle:hover {
    background: var(--wd-cream);
}

/* Elevation note (created by JS) */
.wd-peakwind-elevation {
    background: rgba(255, 255, 255, 0.92);
    padding: var(--wd-space-sm);
    border-radius: var(--wd-radius-sm);
    box-shadow: var(--wd-shadow-sm);
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text);
    line-height: 1.4;
}

/* Loading indicator (created by JS) */
.wd-peakwind-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: var(--wd-space-md) var(--wd-space-xl);
    border-radius: var(--wd-radius-sm);
    font-size: var(--wd-font-size-md);
    z-index: 1000;
    box-shadow: var(--wd-shadow-sm);
    pointer-events: none;
    color: var(--wd-text-mid);
}

/* Fallback toast (created by JS) */
.wd-peakwind-fallback {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wd-amber-bg);
    color: var(--wd-text);
    padding: var(--wd-space-sm) var(--wd-space-lg);
    border-radius: var(--wd-radius-sm);
    font-size: var(--wd-font-size-sm);
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
}

/* Error text */
.wd-peakwind-error {
    color: var(--wd-red);
    font-style: italic;
    padding: 1rem;
}

/* Time slider */
.wd-peakwind-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md);
    padding: var(--wd-space-sm) var(--wd-space-lg);
    background: var(--wd-card);
    border-radius: 0 0 var(--wd-radius-md) var(--wd-radius-md);
    border-top: 1px solid var(--wd-border);
}

.wd-peakwind-slider-time {
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    color: var(--wd-text);
    white-space: nowrap;
    min-width: 80px;
    font-variant-numeric: tabular-nums;
    font-family: var(--wd-mono);
}

.wd-peakwind-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--wd-grey-bg);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.wd-peakwind-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.wd-peakwind-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-brand);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Leaflet focus outline fix */
#tab-mountain .leaflet-container,
#tab-mountain .leaflet-container:focus {
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOUNTAIN TAB — UK Locations Map
   ═══════════════════════════════════════════════════════════ */

.wd-uklocations-map {
    position: relative;
    background: var(--wd-grey-bg);
    border-radius: var(--wd-radius-md);
    overflow: hidden;
}

/* ─── Mountain info cards (freezing level, AQ, pollen) ─── */
.wd-mountain-info {
    padding: var(--wd-space-md) var(--wd-space-lg);
}
.wd-mountain-info__value {
    font-family: var(--wd-mono);
    font-size: var(--wd-font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
}
.wd-mountain-info__label {
    font-size: var(--wd-font-size-sm);
    font-weight: 400;
    margin-left: var(--wd-space-xs);
    color: var(--wd-text-secondary);
}
.wd-mountain-info__range {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-muted);
    margin-top: var(--wd-space-xs);
}
.wd-mountain-info__detail {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    margin-top: var(--wd-space-xs);
}
.wd-mountain-info__metrics {
    display: flex;
    gap: var(--wd-space-lg);
    margin-top: var(--wd-space-sm);
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-muted);
}
.wd-mountain-info__tomorrow {
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-muted);
    margin-top: var(--wd-space-xs);
}
.wd-pollen-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-space-xs) var(--wd-space-md);
    margin-top: var(--wd-space-sm);
    font-size: var(--wd-font-size-xs);
    color: var(--wd-text-secondary);
}
.wd-pollen-type strong {
    color: var(--wd-text-primary);
}


/* ═══════════════════════════════════════════════════════════
   MOUNTAIN TAB — Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .wd-mountain-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wd-skewt-card {
        padding: 14px;
    }

    .wd-skewt-unavailable {
        padding: 28px 14px;
    }

    .wd-skewt-help-popover {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .wd-skewt-attribution {
        font-size: 0.75rem;
    }

    .wd-skewt-slider-wrap,
    .wd-peakwind-slider-wrap {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .wd-skewt-slider-time,
    .wd-peakwind-slider-time {
        text-align: center;
    }
}

/* ==========================================================
 * Patch v2 — Pixel-match tweaks from real-world render
 * - Remove vertical gridlines forced by theme/Elementor table styles
 * - Make score pills match the JSX preview (green/amber/red text + tinted bg)
 * - Ensure table links (e.g. precip) inherit text colour
 * ========================================================== */

/* 1) Kill theme/Elementor table borders (preview uses row separators only) */
.wd-card--forecast .wd-table--forecast,
.wd-card--forecast .wd-table--forecast th,
.wd-card--forecast .wd-table--forecast td {
  border: none !important;
}

.wd-card--forecast .wd-table--forecast th,
.wd-card--forecast .wd-table--forecast td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--wd-border) !important;
}

/* Header cells should look like the mock (Segoe UI), not mono */
.wd-card--forecast .wd-table--forecast thead th {
  font-family: var(--wd-font) !important;
}

/* Keep last row clean */
.wd-card--forecast .wd-table--forecast tbody tr:last-child td {
  border-bottom: none !important;
}

/* 2) Make any links inside table inherit the cell colour (no default blue) */
.wd-card--forecast .wd-table--forecast a,
.wd-card--forecast .wd-table--forecast a:visited,
.wd-card--forecast .wd-table--forecast a:hover,
.wd-card--forecast .wd-table--forecast a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* 3) Score pills — match preview thresholds (8+ green, 6+ amber, else red) */
.wd-score-pip {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--wd-mono);
  padding: 1px 7px;
  border-radius: 5px;
  line-height: 1.35;
  color: var(--wd-text-mid);
  background: var(--wd-grey-bg);
}

/* 8+ */
.wd-score-pip--8,
.wd-score-pip--9,
.wd-score-pip--10 {
  color: var(--wd-score-excellent-text) !important;
  background: var(--wd-score-excellent) !important;
}

/* 6–7.9 */
.wd-score-pip--6,
.wd-score-pip--7 {
  color: var(--wd-score-good-text) !important;
  background: var(--wd-score-good) !important;
}

/* 4–5.9 */
.wd-score-pip--4,
.wd-score-pip--5 {
  color: var(--wd-score-fair-text) !important;
  background: var(--wd-score-fair) !important;
}

/* 2–3.9 */
.wd-score-pip--2,
.wd-score-pip--3 {
  color: var(--wd-score-poor-text) !important;
  background: var(--wd-score-poor) !important;
}

/* < 2 */
.wd-score-pip--0,
.wd-score-pip--1 {
  color: var(--wd-score-bad-text) !important;
  background: var(--wd-score-bad) !important;
}

/* Optional: slightly tighter table rows like the mock */
.wd-card--forecast .wd-table--forecast td,
.wd-card--forecast .wd-table--forecast th {
  line-height: 1.25;
}

/* Optional: nicer horizontal scrollbar (Chrome/Edge) */
.wd-card--forecast .wd-table-wrap {
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: #8A8A85 transparent;
}
.wd-card--forecast .wd-table-wrap::-webkit-scrollbar { height: 10px; }
.wd-card--forecast .wd-table-wrap::-webkit-scrollbar-track { background: transparent; }
.wd-card--forecast .wd-table-wrap::-webkit-scrollbar-thumb { background: #8A8A85; border-radius: 999px; }

/* ==========================================================
 * WeatherDuck Unified — Forecast Table Overrides (v4)
 * - Remove score row
 * - Scrollbar flush + taller
 * - Remove border between date-row and time-row
 * - Consistent outer border (no thickness change while scrolling)
 * - Ensure zebra fills full width
 * - Day boundary vertical rule (thin, matches row rules)
 * ========================================================== */

/* 1) Remove score row entirely (keep your data generation untouched) */
.wd-table--forecast .wd-table__scorerow {
    display: none !important;
}
/* Extra safety: if the score row is the only place pills appear, hide that row too */
.wd-table--forecast tbody tr:has(.wd-score-pip) {
    display: none !important;
}

/* 2) Make the forecast card border consistent and identical to row rules */
.wd-card--forecast {
    border: 1px solid var(--wd-border) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--wd-card) !important;
}

/* 3) Scroll container: no padding/gap, scrollbar a bit taller */
.wd-card--forecast .wd-table-wrap {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Firefox */
    scrollbar-width: auto;
    scrollbar-color: var(--wd-grey) var(--wd-grey-bg);
}

.wd-card--forecast .wd-table-wrap::-webkit-scrollbar {
    height: 14px; /* taller */
}
.wd-card--forecast .wd-table-wrap::-webkit-scrollbar-track {
    background: var(--wd-grey-bg);
}
.wd-card--forecast .wd-table-wrap::-webkit-scrollbar-thumb {
    background: var(--wd-grey);
    border-radius: 999px;
    border: 4px solid var(--wd-grey-bg);
}

/* 4) Ensure the table always fills the scroll viewport when it's short */
.wd-table--forecast {
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
}

/* Lock the labels table to a fixed width — prevents the 100% min-width from .wd-table--forecast */
.wd-fc-labels.wd-table--forecast {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    flex-shrink: 0;
    margin-bottom: 15px !important;
}

/* Compact labels toggle button — mobile only */
.wd-fc-compact-btn,
.wd-fc-compact-btn:hover,
.wd-fc-compact-btn:focus,
.wd-fc-compact-btn:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 18px !important;
    color: var(--wd-green, #2f6b3a) !important;
    padding: 2px 4px !important;
    line-height: 1;
    display: inline-block;
    font-weight: 800;
}

/* In compact mode, hide the group-header label text so it can't force
   the labels column wider than the 55px target. The coloured band stays. */
.wd-fc-labels--compact .wd-fc-grouphead .wd-table__rowlabel {
    font-size: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Compact state — narrow labels column with abbreviated text.
   table-layout: fixed forces the browser to honour the explicit
   width (default 'auto' lets cell content blow past max-width). */
.wd-fc-labels--compact.wd-fc-labels.wd-table--forecast {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    table-layout: fixed !important;
}

.wd-fc-labels--compact .wd-table__rowlabel {
    font-size: 11.5px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Force both dayrow header rows to match exactly */
.wd-fc-split .wd-table__dayrow td {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 10px !important;
    box-sizing: border-box;
}

/* 5) Remove the horizontal separator between the date header row and the time header row */
.wd-table__dayrow td,
.wd-table__dayrow th {
    border-bottom: 0 !important;
}

/* 6) Day boundary vertical line — between days only, not on first-left or last-right */
.wd-card--forecast .wd-table--forecast td.wd-table__dayend:not(:last-child) {
    border-right: 1px solid rgba(90, 90, 85, 0.32) !important;
}

.wd-card--forecast .wd-table--forecast td.wd-table__dayhead:not(:last-child) {
    border-right: 1px solid rgba(90, 90, 85, 0.32) !important;
}

/* 7) Make zebra row fills airtight (avoid any inherited cell backgrounds).
   Temp + Feels cells are exempted so their inline temperature-bg fills the cell. */
.wd-table--forecast tbody tr:nth-child(odd)  td:not(.wd-table__temp):not(.wd-table__feels),
.wd-table--forecast tbody tr:nth-child(odd)  th {
    background: transparent !important;
}
.wd-table--forecast tbody tr:nth-child(even) td:not(.wd-table__temp):not(.wd-table__feels),
.wd-table--forecast tbody tr:nth-child(even) th {
    background: transparent !important;
}

/* keep sticky label cell painted correctly */
.wd-table--forecast tbody tr:nth-child(odd)  .wd-table__sticky { background: var(--wd-card) !important; }
.wd-table--forecast tbody tr:nth-child(even) .wd-table__sticky { background: var(--wd-cream) !important; }

/* 8) Ensure last visible row sits tight above the scrollbar */
.wd-table--forecast tr:last-child td,
.wd-table--forecast tr:last-child th {
    border-bottom: 1px solid var(--wd-border) !important;
}

/* ==========================================================
 * Activity Score Bands (8/6/4/2/0) - final override
 * ========================================================== */
.wd-score-pip--8,
.wd-score-pip--9,
.wd-score-pip--10 {
  color: var(--wd-score-excellent-text) !important;
  background: var(--wd-score-excellent) !important;
}

.wd-score-pip--6,
.wd-score-pip--7 {
  color: var(--wd-score-good-text) !important;
  background: var(--wd-score-good) !important;
}

.wd-score-pip--4,
.wd-score-pip--5 {
  color: var(--wd-score-fair-text) !important;
  background: var(--wd-score-fair) !important;
}

.wd-score-pip--2,
.wd-score-pip--3 {
  color: var(--wd-score-poor-text) !important;
  background: var(--wd-score-poor) !important;
}

.wd-score-pip--0,
.wd-score-pip--1 {
  color: var(--wd-score-bad-text) !important;
  background: var(--wd-score-bad) !important;
}

/* ==========================================================
 * Forecast table readability tweak
 * ========================================================== */
.wd-card--forecast .wd-table--forecast tbody td {
  font-size: 14.5px !important;
}

/* ==========================================================
 * Stargazing Tab — v6 (Compact Hero + Night Accordion)
 * ========================================================== */

/* ── Night sky tokens (scoped to stargazing) ── */
#tab-stargazing {
  --sg-indigo: #2c3e6b;
  --sg-indigo-soft: rgba(44, 62, 107, 0.08);
  --sg-indigo-mid: rgba(44, 62, 107, 0.15);
  --sg-gold: #c49a2a;
  --sg-gold-soft: rgba(196, 154, 42, 0.10);
  --sg-gold-mid: rgba(196, 154, 42, 0.18);
  --sg-teal: #2a8f85;
  --sg-teal-soft: rgba(42, 143, 133, 0.08);
  --sg-coral: #c0524d;
  --sg-coral-soft: rgba(192, 82, 77, 0.08);
  --sg-score-excellent: #2E7DB5;
  --sg-score-good:      #2f9955;
  --sg-score-fair:      #b17613;
  --sg-score-poor:      #c46812;
  --sg-score-terrible:  #b63a31;
}

/* ── Score color classes (match Activity Score palette) ── */
.sg-score--excellent { color: var(--sg-score-excellent); }
.sg-score--good      { color: var(--sg-score-good); }
.sg-score--fair      { color: var(--sg-score-fair); }
.sg-score--poor      { color: var(--sg-score-poor); }
.sg-score--terrible  { color: var(--sg-score-terrible); }

/* ════════════════════════════════════════════════════
   TONIGHT'S STARGAZING + AURORA — side-by-side cards (C4a v2)
   ════════════════════════════════════════════════════ */

/* Two-column row */
.sg-tonight2-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--wd-space-md);
  align-items: stretch;
}

.sg-tonight2-card {
  display: flex;
  flex-direction: column;
  padding: var(--wd-space-xl);
}

body.page-template-page-forecast-unified #tab-stargazing .wd-card.sg-tonight2-card > .wd-section-title {
  margin: calc(-1 * var(--wd-space-xl)) calc(-1 * var(--wd-space-xl)) var(--wd-space-md);
  padding-left: var(--wd-space-xl);
  padding-right: var(--wd-space-xl);
}

/* Section title with optional inline live tag */
.sg-tonight2-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wd-space-sm);
}
.sg-tonight2-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
}
.sg-tonight2-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wd-success);
  box-shadow: 0 0 0 3px rgba(58,125,62,0.15);
  animation: sg-blink 2.2s ease-in-out infinite;
}
@keyframes sg-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.sg-tonight2-sub {
  font-size: 12.5px;
  color: var(--wd-text-muted);
  margin: 4px 0 var(--wd-space-lg);
  line-height: 1.4;
}

/* ── Tonight top row: ring + meta ── */
.sg-tonight2-top {
  display: flex;
  align-items: center;
  gap: var(--wd-space-lg);
  padding-bottom: var(--wd-space-lg);
  margin-bottom: var(--wd-space-sm);
}

.sg-tonight2-ring {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.sg-tonight2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sg-tonight2-ring .ring-bg { fill: none; stroke: #eceae4; stroke-width: 6; }
.sg-tonight2-ring .ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }

.sg-tonight2-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sg-tonight2-ring__val {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sg-tonight2-ring__denom {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--wd-text-muted);
}

.sg-tonight2-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-tonight2-quality {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--wd-radius-pill);
  align-self: flex-start;
}
.sg-tonight2-tagline {
  font-size: 14px;
  color: var(--wd-text-secondary);
  line-height: 1.45;
}

.sg-quality--excellent { color: var(--wd-score-excellent-text); background: rgba(46,125,181,0.1); }
.sg-quality--good      { color: var(--wd-score-good-text);      background: rgba(47,153,85,0.1); }
.sg-quality--fair      { color: var(--wd-score-fair-text);      background: rgba(177,118,19,0.1); }
.sg-quality--poor      { color: var(--wd-score-poor-text);      background: rgba(196,104,18,0.1); }
.sg-quality--terrible  { color: var(--wd-score-bad-text);       background: rgba(182,58,49,0.1); }

/* ── Facts: 2-col grid with vertical hairline divider ── */
.sg-tonight2-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--wd-space-2xl);
  row-gap: 0;
  flex: 1;
  position: relative;
}
.sg-tonight2-facts::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--wd-border) 10%, var(--wd-border) 90%, transparent 100%);
}

.sg-tonight2-fact {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: var(--wd-space-md);
  align-items: center;
  padding: 14px 0;
  border-top: 1px dashed var(--wd-border);
}
.sg-tonight2-fact:nth-child(1),
.sg-tonight2-fact:nth-child(2) {
  border-top: none;
  padding-top: 4px;
}

.sg-tonight2-fact__icon {
  font-size: 18px;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wd-bg-page);
  border-radius: 50%;
  flex-shrink: 0;
}
.sg-tonight2-fact__label {
  font-size: 13.5px;
  color: var(--wd-text-secondary);
  font-weight: 500;
}
.sg-tonight2-fact__val {
  font-size: 15px;
  font-weight: 700;
  color: var(--wd-text-primary);
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sg-tonight2-fact__val .sg-dim {
  font-weight: 500;
  color: var(--wd-text-muted);
}
.sg-tonight2-fact__unit {
  font-weight: 500;
  color: var(--wd-text-muted);
  font-size: 12.5px;
}

.sg-lightpoll-link {
  font-weight: 600;
  color: var(--wd-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(66,90,71,0.3);
  font-size: 13px;
}
.sg-lightpoll-link:hover { border-bottom-color: var(--wd-green); }

/* Fog risk colours (applied to Sky Clarity value) */
.sg-fog--clear    { color: var(--wd-success); }
.sg-fog--low      { color: var(--wd-score-fair-text); }
.sg-fog--moderate { color: #c97a1a; }
.sg-fog--high     { color: var(--wd-score-poor-text); }

/* ── Aurora hero (Kp gradient pod) ── */
.sg-aurora2-hero {
  display: flex;
  align-items: center;
  gap: var(--wd-space-md);
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(232,163,23,0.08), rgba(91,155,213,0.06));
  border-radius: var(--wd-radius-sm);
  margin-bottom: var(--wd-space-sm);
}
.sg-aurora2-hero__num {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  color: var(--wd-text-primary);
}
.sg-aurora2-hero__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.sg-aurora2-hero__label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wd-text-muted);
}
.sg-aurora2-hero__bucket {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--wd-radius-pill);
  background: rgba(232,163,23,0.18);
  color: #8a5a0c;
  align-self: flex-start;
}

.sg-aurora2-outlook {
  font-size: 13px;
  line-height: 1.45;
  color: var(--wd-text-secondary);
  padding: 14px 0 4px;
  font-style: italic;
}
.sg-aurora2-footer {
  font-size: 10.5px;
  color: var(--wd-text-muted);
  text-align: right;
  margin-top: var(--wd-space-sm);
}

/* ════════════════════════════════════════════════════
   6-NIGHT OUTLOOK STRIP
   ════════════════════════════════════════════════════ */
.sg-nights-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.sg-ncard {
  background: var(--wd-bg-card, #fff);
  border: 1px solid var(--wd-border, rgba(0,0,0,0.08));
  border-radius: var(--wd-radius-md, 12px);
  padding: 14px 10px 12px;
  text-align: center;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}

.sg-ncard:hover { box-shadow: var(--wd-shadow-sm, 0 2px 8px rgba(0,0,0,0.05)); transform: translateY(-1px); }

.sg-ncard--tonight {
  border-color: var(--sg-indigo);
  border-width: 1.5px;
}

.sg-ncard--tonight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--wd-radius-md, 12px);
  background: linear-gradient(135deg, rgba(44,62,107,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.sg-ncard-day { font-size: 11px; font-weight: 700; color: var(--wd-text-secondary, #555); margin-bottom: 6px; letter-spacing: 0.02em; }
.sg-ncard--tonight .sg-ncard-day { color: var(--sg-indigo); }
.sg-ncard-moon { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }
.sg-ncard-phase { font-size: 9px; color: var(--wd-text-muted, #888); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ncard-score { font-size: 1.8rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.sg-ncard-score--good { color: var(--sg-score-good); }
.sg-ncard-score--fair { color: var(--sg-score-fair); }
.sg-ncard-score--poor { color: var(--sg-score-poor); }
.sg-ncard-cloud { font-size: 10px; color: var(--wd-text-muted, #888); font-weight: 500; }
.sg-ncard-moontime { font-size: 9px; color: var(--wd-text-light, #aaa); margin-top: 4px; line-height: 1.4; }

/* ════════════════════════════════════════════════════
   TWO-COLUMN GRID
   ════════════════════════════════════════════════════ */
.sg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wd-space-md);
}

.sg-card {
  overflow: hidden;
  padding: 0; /* override wd-card's 16px — header/body have own padding */
}

.sg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--wd-border, rgba(0,0,0,0.08));
}
.sg-card-header .wd-section-title { margin-bottom: 0; }

.sg-card-body { padding: 16px 20px 18px; }

/* ════════════════════════════════════════════════════
   KP 3-DAY CHART
   ════════════════════════════════════════════════════ */
/* Dark card variant for aurora/space content */
.sg-card--dark {
  background: #0c1222;
  border-color: rgba(100, 150, 220, 0.15);
}
.sg-card--dark .sg-card-header {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(100, 150, 220, 0.12);
}
.sg-card--dark .sg-card-header .wd-section-title { color: rgba(180, 200, 230, 0.6); }
.sg-card--dark .sg-card-header span:not(.wd-section-title) { color: rgba(180, 200, 230, 0.4) !important; }
.sg-card--dark .sg-card-body { color: #c0cee0; }

/* Kp chart dark overrides */
.sg-card--dark .sg-kp-yaxis span { color: rgba(180, 200, 230, 0.5); }
.sg-card--dark .sg-kp-gridline { background: rgba(255,255,255,0.06); }
.sg-card--dark .sg-kp-bar-val { color: #e4ecf5; }
.sg-card--dark .sg-kp-time { color: rgba(180, 200, 230, 0.5); }
.sg-card--dark .sg-kp-day-labels { border-top-color: rgba(255,255,255,0.08); }
.sg-card--dark .sg-kp-day-label { color: #c0cee0; }
.sg-card--dark .sg-kp-legend-item { color: rgba(180, 200, 230, 0.5); }

/* Aurora map dark overrides */
.sg-card--dark .sg-map-label { color: rgba(180, 200, 230, 0.5); }
.sg-card--dark .sg-map-footer { color: rgba(180, 200, 230, 0.35); }

.sg-kp-chart-area {
  display: flex;
  gap: 0;
  align-items: flex-end;
  height: 130px;
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.sg-kp-yaxis { position: absolute; left: 0; top: 0; bottom: 18px; width: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.sg-kp-yaxis span { font-size: 9px; color: var(--wd-text-muted, #888); text-align: right; font-weight: 500; }

.sg-kp-grid { position: absolute; left: 24px; right: 0; top: 0; bottom: 18px; }
.sg-kp-gridline { position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.04); }

.sg-kp-bars { display: flex; gap: 2px; align-items: flex-end; flex: 1; height: 112px; padding-bottom: 18px; position: relative; z-index: 1; }

.sg-kp-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: flex-end; height: 100%; }

.sg-kp-bar { width: 100%; min-height: 3px; border-radius: 3px 3px 1px 1px; transition: filter 0.15s; cursor: default; position: relative; }
.sg-kp-bar:hover { filter: brightness(1.12); }

.sg-kp-bar-val { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: var(--wd-text-secondary, #555); opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.sg-kp-col:hover .sg-kp-bar-val { opacity: 1; }

.sg-kp-time { font-size: 8px; color: var(--wd-text-muted, #888); font-weight: 500; }

.sg-kp-day-labels { display: flex; padding-left: 24px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 6px; }
.sg-kp-day-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--wd-text-secondary, #555); }

.sg-kp-legend { display: flex; gap: 14px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.sg-kp-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--wd-text-muted, #888); font-weight: 500; }
.sg-kp-legend-swatch { width: 8px; height: 8px; border-radius: 2px; }

/* ════════════════════════════════════════════════════
   AURORA MAPS
   ════════════════════════════════════════════════════ */
.sg-aurora-maps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-map-panel { text-align: center; }
.sg-map-panel img { width: 100%; border-radius: 8px; background: #000; }
.sg-map-panel canvas { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #000; }
.sg-map-label { font-size: 10px; color: var(--wd-text-muted, #888); margin-top: 6px; font-weight: 500; }
.sg-map-footer { text-align: center; font-size: 10px; color: var(--wd-text-light, #aaa); margin-top: 10px; }

/* ════════════════════════════════════════════════════
   VIRTUALSKY
   ════════════════════════════════════════════════════ */
.sg-skymap-controls { display: flex; justify-content: center; margin-bottom: 10px; }

.sg-skymap-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #0d0d2b; border-radius: 999px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.sg-skymap-btn {
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.sg-skymap-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sg-skymap-btn--day { color: rgba(255,255,255,0.45); font-weight: 500; }
.sg-skymap-btn--day:hover { color: rgba(255,255,255,0.75); }

.sg-skymap-time {
  font-size: 13px; font-weight: 700; color: #fff;
  padding: 0 12px; min-width: 80px; text-align: center;
  letter-spacing: 0.5px;
}

.sg-skymap-canvas {
  width: 100%; height: 350px;
  background: #0a0a1a; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .sg-skymap-canvas { height: 220px; }
}

/* ════════════════════════════════════════════════════
   METEOR SHOWERS — Grid
   ════════════════════════════════════════════════════ */
.sg-meteor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.sg-mcard {
  background: var(--wd-bg-card, #fff);
  border: 1px solid var(--wd-border, rgba(0,0,0,0.08));
  border-radius: var(--wd-radius-md, 12px);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.sg-mcard::before {
  content: '';
  position: absolute;
  top: -15px; right: -15px;
  width: 70px; height: 70px;
  background: radial-gradient(circle, rgba(196,154,42,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.sg-mcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sg-mcard-name { font-size: 13px; font-weight: 700; color: var(--wd-text, #141414); }

.sg-mcard-status { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.sg-mcard-status--active { color: var(--sg-score-good); background: rgba(58,138,79,0.1); }
.sg-mcard-status--upcoming { color: var(--sg-gold); background: var(--sg-gold-soft); }
.sg-mcard-status--past { color: var(--wd-text-muted, #888); background: rgba(0,0,0,0.04); }

.sg-mcard-dates { font-size: 10.5px; color: var(--wd-text-secondary, #555); margin-bottom: 3px; }
.sg-mcard-note { font-size: 10.5px; color: var(--wd-text-muted, #888); line-height: 1.4; }

/* Group labels between hero / upcoming / past */
.sg-meteor-grouplabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
  margin: var(--wd-space-lg) 0 var(--wd-space-xs);
}

/* Muted past cards */
.sg-mcard--past {
  opacity: 0.55;
  background: transparent;
  border-style: dashed;
}
.sg-mcard--past::before { display: none; }

/* Active hero — full-width dark card above the regular grid */
.sg-mcard--hero {
  background: linear-gradient(135deg, #1f3a64 0%, #142845 100%);
  border: 1px solid rgba(243,193,74,0.3);
  border-radius: var(--wd-radius-md);
  padding: var(--wd-space-xl);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wd-space-lg);
  align-items: center;
  margin-bottom: var(--wd-space-sm);
}
.sg-mcard--hero::before { display: none; }
.sg-mcard--hero::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(243,193,74,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.sg-mcard-hero-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.sg-mcard-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sg-mcard-hero-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.sg-mcard-hero-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-moon, #f3c14a);
  color: #2a1a00;
  white-space: nowrap;
}
.sg-mcard-hero-dates {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.sg-mcard-hero-note {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  max-width: 540px;
}
.sg-mcard-hero-peak {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(243,193,74,0.4);
  border-radius: var(--wd-radius-sm);
  padding: 10px 16px;
  text-align: center;
  position: relative;
  z-index: 1;
  min-width: 90px;
}
.sg-mcard-hero-peak__count {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--wd-moon, #f3c14a);
  line-height: 1;
}
.sg-mcard-hero-peak__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════
   LIGHT POLLUTION
   ════════════════════════════════════════════════════ */
.sg-lightpoll {
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 500px;
  border-radius: var(--wd-radius-md);
}
#sg-lightpoll-leaflet {
  width: 100%;
  height: 100%;
}
.sg-lp-legend {
  background: rgba(20,20,20,0.82);
  border-radius: 6px;
  padding: 6px 10px 8px;
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  min-width: 160px;
}
.sg-lp-legend__title {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sg-lp-legend__bar {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(to right, #0a0a1a, #1a1a6e, #2b7a3d, #d4a017, #e05c00, #c0392b, #f0a0c0);
  margin-bottom: 4px;
}
.sg-lp-legend__labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  opacity: 0.85;
}

/* Mobile — meteor hero stacks vertically */
@media (max-width: 768px) {
  .sg-mcard--hero {
    grid-template-columns: 1fr;
    gap: var(--wd-space-md);
    padding: var(--wd-space-lg);
  }
  .sg-mcard-hero-name { font-size: 18px; }
  .sg-mcard-hero-peak { padding: 8px 12px; }
  .sg-mcard-hero-peak__count { font-size: 22px; }
}

/* ════════════════════════════════════════════════════
   NIGHT ACCORDION
   ════════════════════════════════════════════════════ */
.sg-nights-accordion { }

.sg-night-row {
  display: block !important;
  background: var(--wd-bg-card, #fff);
  border: 1px solid var(--wd-border, rgba(0,0,0,0.08));
  border-radius: var(--wd-radius-md, 12px);
  margin-bottom: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.sg-night-row:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.04); }

.sg-night-summary {
  display: grid !important;
  grid-template-columns: 72px 36px minmax(120px, 1fr) 54px 54px 22px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 12px;
  min-height: 48px;
}
.sg-night-summary:hover { background: var(--wd-bg-subtle, #f5f5f3); }

.sg-night-day { font-size: 14px !important; font-weight: 700 !important; color: var(--wd-text, #141414) !important; white-space: nowrap; }
.sg-night-moon-emoji { font-size: 1.2rem; text-align: center; line-height: 1; }
.sg-night-phase { font-size: 12px !important; color: var(--wd-text-secondary, #555) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-night-row-score { font-size: 1.1rem !important; font-weight: 800 !important; text-align: center; }
.sg-night-row-cloud { font-size: 12px !important; color: var(--wd-text-secondary, #555) !important; text-align: center; white-space: nowrap; }
.sg-night-chevron { color: var(--wd-text-secondary, #555) !important; text-align: center; transition: transform 0.2s; font-size: 14px !important; cursor: pointer; }
.sg-night-row.sg-night--open .sg-night-chevron { transform: rotate(180deg); }

.sg-night-detail-panel {
  display: none !important;
  padding: 0 16px 14px !important;
  border-top: 1px solid var(--wd-border, rgba(0,0,0,0.08));
}
.sg-night-row.sg-night--open .sg-night-detail-panel { display: block !important; }

.sg-night-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding-top: 12px;
  margin-bottom: 12px;
}

.sg-night-detail-cell { text-align: center; }
.sg-night-detail-key { display: block !important; font-size: 9px !important; color: var(--wd-text-muted, #888) !important; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; font-weight: 600; }
.sg-night-detail-val { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--wd-text, #141414) !important; }

/* Cloud strip */
.sg-night-cloud-strip { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)) !important; gap: 2px !important; }
.sg-ncloud-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sg-ncloud-bar { width: 100%; height: 24px; border-radius: 3px; position: relative; overflow: hidden; background: #e8f5e9; }
.sg-ncloud-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; background: #90a4ae; border-radius: 3px 3px 0 0; }
.sg-ncloud-bar-pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8px; font-weight: 700; opacity: 0; transition: opacity 0.15s; }
.sg-ncloud-slot:hover .sg-ncloud-bar-pct { opacity: 1; }
.sg-ncloud-hour { font-size: 8px; color: var(--wd-text-muted, #888); font-weight: 500; }
.sg-ncloud-slot.sg-ncloud--clear .sg-ncloud-bar { background: #c8e6c9; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — Stargazing Tab
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sg-nights-strip { grid-template-columns: repeat(3, 1fr); }
  .sg-grid-2 { grid-template-columns: 1fr; }
  .sg-meteor-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-tonight2-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sg-nights-strip { grid-template-columns: repeat(2, 1fr); }
  .sg-night-summary { grid-template-columns: 60px 28px minmax(80px, 1fr) 44px 44px 18px !important; gap: 4px !important; padding: 10px 12px !important; }
  .sg-night-detail-grid { grid-template-columns: 1fr 1fr; }
  .sg-aurora-maps-grid { grid-template-columns: 1fr; }
  .sg-meteor-grid { grid-template-columns: 1fr; }
  .sg-tonight2-top { flex-direction: column; align-items: flex-start; }
  .sg-tonight2-facts { grid-template-columns: 1fr; column-gap: 0; }
  .sg-tonight2-facts::before { display: none; }
  .sg-tonight2-fact:nth-child(2) { border-top: 1px dashed var(--wd-border); padding-top: 14px; }
}


/* ==========================================================
 * Cloud Inversion Tab — Redesign (Concept B)
 * ========================================================== */

/* Tab-specific padding removed — tabs inherit from .wd-tab-panel */


/* Legacy inversion CSS removed — all styles now in inversion.css (B4 redesign) */


/* ==========================================================
 * SEO CONTENT — Prose & Explainer Blocks
 * ========================================================== */

.wd-seo-prose {
    background: var(--wd-bg-warm);
    border: 1px solid var(--wd-border-light);
    border-left: 3px solid var(--wd-green);
    border-radius: var(--wd-radius-sm);
    padding: var(--wd-space-lg) var(--wd-space-xl);
    margin-bottom: var(--wd-space-lg);
}

.wd-seo-prose p {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    line-height: 1.72;
    margin: 0;
}

.wd-seo-prose p + p {
    margin-top: var(--wd-space-sm);
}

.wd-seo-heading {
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    color: var(--wd-text-primary);
    margin: 0 0 var(--wd-space-sm) 0;
    letter-spacing: -0.01em;
}

.wd-seo-prose--advice {
    border-left-color: var(--wd-amber);
    background: var(--wd-amber-bg);
}

.wd-seo-prose--advice p {
    color: var(--wd-text-primary);
}

/* Explainer (collapsible) */
.wd-seo-explainer {
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border-light);
    border-radius: var(--wd-radius-sm);
    margin-top: var(--wd-space-lg);
    margin-bottom: var(--wd-space-lg);
    overflow: hidden;
}

.wd-seo-explainer > summary {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
    padding: var(--wd-space-md) var(--wd-space-lg);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.15s ease;
}

.wd-seo-explainer > summary::-webkit-details-marker {
    display: none;
}

.wd-seo-explainer > summary::before {
    content: '\25B6';
    font-size: 0.6em;
    color: var(--wd-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.wd-seo-explainer[open] > summary::before {
    transform: rotate(90deg);
}

.wd-seo-explainer > summary:hover {
    background: var(--wd-border-light);
}

.wd-seo-explainer__body {
    padding: 0 var(--wd-space-xl) var(--wd-space-lg) var(--wd-space-xl);
    border-top: 1px solid var(--wd-border-light);
}

.wd-seo-explainer__body p {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    line-height: 1.72;
    margin: var(--wd-space-md) 0 0 0;
}

.wd-seo-explainer__body p:first-child {
    margin-top: var(--wd-space-lg);
}

.wd-seo-explainer__body ul {
    margin: var(--wd-space-sm) 0;
    padding-left: var(--wd-space-xl);
}

.wd-seo-explainer__body li {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    line-height: 1.72;
    margin-bottom: var(--wd-space-xs);
}

.wd-seo-explainer__body li strong {
    color: var(--wd-text-primary);
}


/* ─── C6 HERO + SUMMARY RESPONSIVE ─── */
@media (max-width: 768px) {
    .wd-location-at-glance__name { font-size: 1.3rem !important; }
    .wd-location-at-glance__meta { font-size: 0.78rem; }
    .wd-tabs {
        padding: 8px 18px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .wd-tabs::-webkit-scrollbar {
        display: none;
    }
    .wd-tabs__btn[data-mobile-label] {
        font-size: 0;
    }
    .wd-tabs__btn[data-mobile-label]::after {
        content: attr(data-mobile-label);
        font-size: 0.82rem;
    }
    /* Stack the hero zones vertically on mobile */
    .wd-hero__main {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 18px 18px;
    }
    .wd-hero__right { justify-content: flex-start; }
    .wd-hero__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 70px;
        overflow: visible;
    }
    .wd-hero-metric {
        padding: 2px 8px;
    }
    .wd-hero-metric__label {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }
    .wd-hero-metric__value {
        font-size: 1.18rem;
    }
    .wd-hero-metric__value--text {
        font-size: 1rem;
    }
    .wd-hero-metric__sub {
        font-size: 0.66rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wd-hero-metric__symbol {
        min-height: 30px;
    }
    .wd-hero-metric__symbol img {
        width: 32px;
        height: 32px;
    }
    .wd-now__temp { font-size: 1.6rem; }
    .wd-now__score { display: flex; align-items: center; gap: 12px; }
    .wd-now__score-num { font-size: 2.2rem; }
    .wd-now__map { width: 100%; height: 96px; border-radius: 10px; }
    .wd-metrics { grid-template-columns: 1fr 1fr; }
    .wd-metrics__item:nth-child(2) { border-right: none; }
    .wd-metrics__item:nth-child(1),
    .wd-metrics__item:nth-child(2) { border-bottom: 1px solid var(--wd-border-light); }
    .wd-summary-2col { grid-template-columns: 1fr; }
    .wd-summary-written { grid-template-columns: 1fr; gap: 14px; }
    .wd-sunmoon-strip { grid-template-columns: repeat(3, 1fr); }

    /* New summary components — tablet */
    .wd-ribbon { grid-template-columns: repeat(2, 1fr); }
    .wd-zone3-grid { grid-template-columns: 1fr; }
    .wd-gear__footer { flex-direction: column; }
    .wd-gear__disclaimer { text-align: left; }
}

@media (max-width: 480px) {
    /* New summary components — mobile */
    .wd-ribbon { grid-template-columns: 1fr; }
    .wd-ribbon__chip { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
    .wd-ribbon__chip:last-child { border-bottom: none; }
    .wd-best-window__bar { height: 40px; }
    .wd-best-window__label-cell { font-size: 0.55rem; }
    .wd-gear__table-reason,
    .wd-gear__table-material { display: none; }
    .wd-gear__table thead th:nth-child(3),
    .wd-gear__table thead th:nth-child(4) { display: none; }
    .wd-sunmoon-strip__col:nth-child(n+4) { display: none; }
    .wd-sunmoon-strip__col:nth-child(3) { border-right: none; }
}

/* ─── MOBILE OPTIMISATION PASS — P0 + P1 ─── */
@media (max-width: 768px) {
    /* Page-level safety net: never let anything cause horizontal page scroll */
    .wd-page { overflow-x: clip; }

    /* P0: Stack hero score + map vertically (kills the squished-map sliver) */
    .wd-hero__right {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .wd-hero__scores { width: 100%; text-align: left; }
    .wd-now__score { justify-content: flex-start; gap: 14px; }
    .wd-now__map { width: 100%; height: 100px; }

    /* P0: Stop grid-cell cards blowing out their parent (Best Window, Gear, etc.) */
    .wd-grid-2 > .wd-card,
    .wd-grid-3 > .wd-card,
    .wd-grid-6040 > .wd-card,
    .wd-zone3-grid > .wd-card { min-width: 0; }

    /* New 3-card row (Freezing/Air/Pollen) stacks on mobile */
    .wd-grid-3 { grid-template-columns: 1fr; }
    .wd-best-window,
    .wd-fc-top-grid .wd-best-window,
    .wd-gear { min-width: 0; overflow: hidden; }
    .wd-activity-score__header {
        align-items: flex-start;
        flex-direction: column;
    }
    .wd-activity-score__body {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .wd-fc-top-grid .wd-best-window__days,
    .wd-fc-top-grid .wd-best-window__bar,
    .wd-fc-top-grid .wd-best-window__labels,
    .wd-fc-top-grid .wd-best-window__summary,
    .wd-fc-top-grid .wd-best-window__detail,
    .wd-activity-score__customiser {
        grid-column: 1;
        grid-row: auto;
    }
    .wd-fc-top-grid .wd-best-window__summary,
    .wd-fc-top-grid .wd-best-window__detail {
        border-left: 0;
    }
    .wd-fc-top-grid .wd-best-window__summary {
        border-top: 1px solid var(--wd-border);
    }
    .wd-activity-score__customiser {
        border-left: 0;
        border-top: 1px solid var(--wd-border);
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "control"
            "footer";
    }
    .wd-activity-score__customiser .wd-customiser-var--visible {
        grid-template-columns: 1fr;
    }
    .wd-activity-score__customiser .wd-customiser-footer {
        padding-left: 0;
        border-left: 0;
    }
    .wd-best-window__bar,
    .wd-best-window__labels { width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
    /* P0: Tighter day pills so 7 days fit without horizontal scroll */
    .wd-bw-day-btn { min-width: 44px; padding: 5px 8px 6px; gap: 3px; }
    .wd-bw-day-btn__label { font-size: 0.62rem; }
    .wd-bw-day-btn__score { font-size: 0.78rem; }
    .wd-fc-top-grid .wd-best-window__bar { min-height: 48px; max-height: none; }

    /* P1: Shrink only the LARGE hero typography (small labels untouched) */
    .wd-location-at-glance__name { font-size: 1.12rem !important; }
    .wd-location-at-glance__label { font-size: 0.62rem; }
    .wd-location-at-glance__meta { font-size: 0.74rem; }
    .wd-location-at-glance__updated { font-size: 0.7rem; }
    .wd-hero__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 62px;
        overflow: visible;
    }
    .wd-hero-metric { padding: 1px 5px; }
    .wd-hero-metric__label {
        margin-bottom: 5px;
        font-size: 0.5rem;
        letter-spacing: 0.06em;
    }
    .wd-hero-metric__value { font-size: 1.02rem; }
    .wd-hero-metric__value--text { font-size: 0.88rem; }
    .wd-hero-metric__sub { margin-top: 4px; font-size: 0.58rem; }
    .wd-hero-metric__symbol { min-height: 26px; }
    .wd-hero-metric__symbol img { width: 28px; height: 28px; }
    .wd-now__temp { font-size: 1.3rem; }                 /* mood line */
    .wd-now__score-num { font-size: 2rem !important; }

    /* P1: Tab bar — tighter padding/font, scroll cleanly if still wider */
    .wd-tabs__btn { padding: 8px 11px; font-size: 0.82rem; }
}

@media (max-width: 380px) {
    .wd-hero__main {
        padding-left: 14px;
        padding-right: 14px;
    }
    .wd-hero-metric { padding-left: 3px; padding-right: 3px; }
    .wd-hero-metric__label { font-size: 0.46rem; letter-spacing: 0.04em; }
    .wd-hero-metric__value { font-size: 0.94rem; }
    .wd-hero-metric__value--text { font-size: 0.8rem; }
    .wd-hero-metric__sub { font-size: 0.54rem; }
    .wd-hero-metric__symbol img { width: 26px; height: 26px; }
}

/* Activity Score split-card layout. Two sibling cards sit flush so the module
   reads as one surface while the dense score controls stay isolated left. */
.wd-activity-score-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 40%);
    gap: 0;
    align-items: stretch;
}
.wd-activity-score-shell > .wd-card {
    min-width: 0;
    margin-top: 0 !important;
    align-self: stretch;
    height: auto;
}
.wd-activity-score-shell .wd-activity-score-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
}
.wd-activity-score-card--left {
    border-right: 0;
}
.wd-activity-score-card--right {
    border-left: 0;
}
.wd-activity-score-shell .wd-activity-score__header {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
}
.wd-activity-score__header--right {
    justify-content: flex-end;
}
.wd-activity-score-shell .wd-activity-score__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.wd-activity-score-shell .wd-activity-score__forecast {
    display: block;
    grid-template-columns: none;
    padding: 0;
}
.wd-activity-score-shell .wd-bw-col-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wd-activity-score-shell .wd-activity-score__side-panel {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    background: rgba(245, 242, 235, 0.42);
    border-left: 1px solid var(--wd-border);
}
.wd-activity-score-shell .wd-best-window__summary,
.wd-activity-score-shell .wd-best-window__detail {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    border-left: 0;
    border-top: 0;
    background: transparent;
    padding-left: var(--wd-card-padding);
    padding-right: var(--wd-card-padding);
}
.wd-activity-score-shell .wd-best-window__summary {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: var(--wd-space-md);
}
.wd-activity-score-shell .wd-best-window__detail {
    grid-row: auto;
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: var(--wd-space-md);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 10px;
}
.wd-activity-score-shell .wd-best-window__summary-text,
.wd-activity-score-shell .wd-best-window__metric-value,
.wd-activity-score-shell .wd-best-window__metric-value span {
    font-size: 1.05rem;
    line-height: 1.15;
}
.wd-activity-score-shell .wd-best-window__metric-value span {
    color: var(--wd-text-primary);
    font-weight: 800;
}
.wd-activity-score-shell .wd-best-window__detail .wd-best-window__metric-value {
    margin-top: 1px;
}
.wd-activity-score-shell .wd-best-window__detail .wd-best-window__metric + .wd-best-window__metric {
    margin-top: 0;
}
.wd-activity-score-card--left .wd-activity-score__customiser {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.7fr);
    grid-template-areas:
        "header  footer"
        "presets footer"
        "control footer";
    align-items: stretch;
    column-gap: var(--wd-space-lg);
    row-gap: 8px;
    padding: 8px var(--wd-card-padding) 10px;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-header {
    align-self: auto;
    flex-wrap: nowrap;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-grid {
    display: grid;
    align-items: center;
    min-width: 0;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-var--visible {
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
    grid-template-areas:
        "label slider"
        "impact impact";
    column-gap: 10px;
    row-gap: 6px;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-label {
    grid-area: label;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-dual-range {
    grid-area: slider;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-impact {
    grid-area: impact;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--wd-space-sm);
    margin-top: 0;
    padding: 0 0 0 var(--wd-space-md);
    border-left: 1px solid rgba(47, 74, 54, 0.14);
    border-top: 0;
    min-width: 0;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-reset {
    flex: 0 0 auto;
    width: auto;
    align-self: center;
    margin-top: 4px;
    min-height: 24px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-summary {
    grid-template-columns: 1fr 1fr;
    align-content: center;
    row-gap: 2px;
    min-width: 0;
}
.wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-summary > span {
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 900px) {
    .wd-activity-score-shell {
        grid-template-columns: 1fr;
    }
    .wd-activity-score-card--left {
        border-right: 1px solid var(--wd-border);
        border-bottom: 0;
    }
    .wd-activity-score-card--right {
        border-left: 0;
        border-top: 0;
    }
    .wd-activity-score__header--right {
        justify-content: flex-start;
    }
    .wd-activity-score-shell .wd-activity-score__side-panel {
        border-left: 0;
    }
}

@media (max-width: 768px) {
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-var--visible {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "slider"
            "impact";
    }
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-collapse-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        white-space: nowrap;
    }
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .wd-activity-score-card--left .wd-activity-score__customiser {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "presets"
            "control"
            "footer";
    }
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed {
        grid-template-areas: "header";
    }
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed .wd-customiser-intro,
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed .wd-customiser-presets,
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed .wd-customiser-grid,
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed .wd-customiser-footer {
        display: none;
    }
    .wd-activity-score-card--left .wd-activity-score__customiser.wd-activity-score__customiser--collapsed .wd-customiser-header {
        margin-bottom: 0;
    }
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(47, 74, 54, 0.14);
    }
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-summary {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .wd-activity-score-card--left .wd-activity-score__customiser .wd-customiser-summary {
        grid-template-columns: 1fr;
    }
}

/* Forecast Activity Score A2.1: compact decision-first layout with day score rail. */
.wd-activity-score-shell--a21 {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.wd-activity-score-shell--a21 .wd-activity-score-card {
    border-radius: 0 !important;
    box-shadow: 0 5px 16px rgba(31, 47, 39, 0.06);
}

.wd-activity-score-shell--a21 .wd-activity-score-card--left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.wd-activity-score-shell--a21 .wd-activity-score-card--right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.wd-activity-score-shell--a21 .wd-activity-score__header {
    height: 44px;
    min-height: 44px;
    padding: 8px 16px;
}

.wd-activity-score-shell--a21 .wd-activity-score__header--left {
    justify-content: space-between;
}

.wd-activity-score__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.wd-activity-score__actions .wd-bw-mode-wrap--inline {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: 0;
    padding: 0 9px 0 10px;
    border: 1px solid rgba(47, 74, 54, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

.wd-activity-score__actions .wd-bw-mode-wrap--inline .wd-bw-mode-badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1f2f27;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.wd-activity-score__actions .wd-bw-mode-wrap--inline .wd-bw-mode-badge--custom {
    color: var(--wd-blue);
}

.wd-activity-score__actions .wd-bw-mode-wrap--inline .wd-bw-info {
    width: 16px;
    height: 16px;
    border-color: rgba(47, 74, 54, 0.2);
    background: rgba(31, 47, 39, 0.06);
    color: rgba(31, 47, 39, 0.72);
    font-size: 10px;
}

.wd-activity-score-card--a21 .wd-customiser-collapse-btn {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(47, 74, 54, 0.28) !important;
    color: #1f2f27 !important;
    box-shadow: none !important;
}

.wd-activity-score-card--a21 .wd-customiser-collapse-btn:hover,
.wd-activity-score-card--a21 .wd-customiser-collapse-btn:focus,
.wd-activity-score-card--a21 .wd-customiser-collapse-btn:focus-visible,
.wd-activity-score-card--a21 .wd-customiser-collapse-btn[aria-expanded="true"] {
    background: #ffffff !important;
    border-color: rgba(66, 90, 71, 0.58) !important;
    color: #1f2f27 !important;
    outline: 2px solid rgba(66, 90, 71, 0.12);
    outline-offset: 0;
}

.wd-customiser-collapse-btn__chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.16s ease;
}

.wd-customiser-collapse-btn[aria-expanded="true"] .wd-customiser-collapse-btn__chevron {
    transform: translateY(2px) rotate(225deg);
}

.wd-activity-score-card--a21 .wd-activity-score__forecast {
    display: block;
}

.wd-activity-score-card--a21 .wd-bw-col-left {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 16px 12px;
    display: grid;
    grid-template-columns: minmax(340px, 0.32fr) minmax(0, 1fr) minmax(360px, 0.36fr);
    grid-template-areas:
        "decision days days"
        "bar      bar  description"
        "labels   labels description";
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
}

.wd-activity-score__decision {
    margin-bottom: 14px;
}

.wd-activity-score-card--a21 .wd-activity-score__decision {
    grid-area: decision;
    min-width: 0;
    margin-bottom: 0;
}

.wd-activity-score__decision-grid {
    display: flex;
    align-items: flex-start;
    gap: 10px 28px;
    flex-wrap: wrap;
}

.wd-activity-score__decision-block {
    min-width: 0;
    flex: 0 1 auto;
}

.wd-activity-score__decision-block--best {
    padding-left: 22px;
    border-left: 1px solid rgba(47, 74, 54, 0.14);
}

.wd-activity-score-card--a21 .wd-activity-score__decision-grid {
    align-items: center;
    gap: 6px 16px;
}

.wd-activity-score-card--a21 .wd-activity-score__decision-block--best {
    padding-left: 0;
    border-left: 0;
}

.wd-activity-score__decision-title {
    margin: 0;
    color: #1f2f27;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: 0;
}

.wd-activity-score-card--a21 .wd-activity-score__decision-title {
    font-size: 1rem;
}

.wd-activity-score__inline-score {
    color: #2f9955;
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.wd-activity-score__inline-score--excellent { color: var(--wd-blue); }
.wd-activity-score__inline-score--good { color: #2f9955; }
.wd-activity-score__inline-score--fair { color: #c68a1a; }
.wd-activity-score__inline-score--poor { color: #d97b2a; }
.wd-activity-score__inline-score--terrible { color: #c0392b; }
.wd-activity-score__inline-score--none { color: var(--wd-text-muted); }

.wd-activity-score-shell--a21 .wd-fc-top-grid .wd-best-window__days,
.wd-activity-score-shell--a21 .wd-best-window__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(66px, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
}

.wd-activity-score-card--a21 .wd-best-window__days {
    grid-area: days;
    justify-self: end;
    margin-left: auto;
    width: min(100%, 740px);
    grid-template-columns: repeat(7, minmax(72px, 1fr));
}

.wd-activity-score-card--a21 .wd-best-window__days-wrap {
    grid-area: days;
    justify-self: end;
    width: min(100%, 820px);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.wd-activity-score-card--a21 .wd-best-window__days-wrap .wd-best-window__days {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
    grid-template-columns: repeat(7, minmax(66px, 1fr));
}

.wd-activity-score-card--a21 .wd-bw-score-toggle {
    flex: 0 0 66px;
    min-height: 50px;
    padding: 4px 6px;
    border: 1px solid rgba(47, 74, 54, 0.2) !important;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: none !important;
    color: #1f2f27 !important;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.08;
    text-align: center;
    text-transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    white-space: normal;
    outline: 0 !important;
    -webkit-text-fill-color: currentColor;
}

.wd-activity-score-card--a21 .wd-bw-score-toggle:hover:not([aria-pressed="true"]) {
    background: rgba(47, 74, 54, 0.08) !important;
    border-color: rgba(47, 74, 54, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 74, 54, 0.06) !important;
    color: #1f2f27 !important;
}

.wd-activity-score-card--a21 .wd-bw-score-toggle:focus {
    outline: 0 !important;
}

.wd-activity-score-card--a21 .wd-bw-score-toggle:focus-visible {
    outline: 2px solid rgba(47, 153, 85, 0.28) !important;
    outline-offset: 2px;
}

.wd-activity-score-card--a21 .wd-bw-score-toggle[aria-pressed="true"] {
    background: rgba(47, 153, 85, 0.12) !important;
    border-color: rgba(47, 153, 85, 0.36) !important;
    color: #1f2f27 !important;
}

.wd-activity-score-card--a21 .wd-bw-score-toggle[aria-pressed="true"]:hover {
    background: rgba(47, 153, 85, 0.2) !important;
    border-color: rgba(47, 153, 85, 0.48) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 153, 85, 0.12) !important;
    color: #1f2f27 !important;
}

.wd-bw-day-scroll-btn {
    display: none !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn {
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 50px;
    padding: 6px 6px 5px;
    background: #fff !important;
    border-color: rgba(47, 74, 54, 0.16) !important;
    border-radius: 0;
    box-shadow: none !important;
    text-align: center;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--excellent {
    background: rgba(46, 125, 181, 0.10) !important;
    border-color: rgba(46, 125, 181, 0.24) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--good {
    background: rgba(47, 153, 85, 0.10) !important;
    border-color: rgba(47, 153, 85, 0.24) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--fair {
    background: rgba(198, 138, 26, 0.12) !important;
    border-color: rgba(198, 138, 26, 0.26) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--poor {
    background: rgba(217, 123, 42, 0.12) !important;
    border-color: rgba(217, 123, 42, 0.26) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--terrible {
    background: rgba(192, 57, 43, 0.10) !important;
    border-color: rgba(192, 57, 43, 0.24) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--none {
    background: rgba(47, 74, 54, 0.06) !important;
    border-color: rgba(47, 74, 54, 0.16) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn:active {
    background: #f8fbf7 !important;
    border-color: rgba(47, 74, 54, 0.28) !important;
    box-shadow: none !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--excellent:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--excellent:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--excellent:active {
    background: rgba(46, 125, 181, 0.14) !important;
    border-color: rgba(46, 125, 181, 0.34) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--good:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--good:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--good:active {
    background: rgba(47, 153, 85, 0.14) !important;
    border-color: rgba(47, 153, 85, 0.34) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--fair:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--fair:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--fair:active {
    background: rgba(198, 138, 26, 0.16) !important;
    border-color: rgba(198, 138, 26, 0.36) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--poor:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--poor:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--poor:active {
    background: rgba(217, 123, 42, 0.16) !important;
    border-color: rgba(217, 123, 42, 0.36) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--terrible:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--terrible:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--terrible:active {
    background: rgba(192, 57, 43, 0.14) !important;
    border-color: rgba(192, 57, 43, 0.34) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--none:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--none:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn.wd-bw-day-btn--none:active {
    background: rgba(47, 74, 54, 0.09) !important;
    border-color: rgba(47, 74, 54, 0.24) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn__label {
    order: 1;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn__score {
    order: 2;
    margin-top: 3px;
    color: var(--wd-text-primary) !important;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn__note {
    order: 3;
    max-width: 100%;
    margin-top: 3px;
    color: var(--wd-text-secondary);
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active {
    background: rgba(47, 153, 85, 0.10) !important;
    border-color: #2f9955 !important;
    box-shadow: inset 0 0 0 1px #2f9955 !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active:active {
    background: rgba(47, 153, 85, 0.12) !important;
    border-color: #2f9955 !important;
    box-shadow: inset 0 0 0 1px #2f9955 !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--excellent,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--excellent:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--excellent:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--excellent:active {
    background: rgba(46, 125, 181, 0.12) !important;
    border-color: var(--wd-blue) !important;
    box-shadow: inset 0 0 0 1px var(--wd-blue) !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--fair,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--fair:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--fair:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--fair:active {
    background: rgba(198, 138, 26, 0.12) !important;
    border-color: #c68a1a !important;
    box-shadow: inset 0 0 0 1px #c68a1a !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--poor,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--poor:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--poor:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--poor:active {
    background: rgba(217, 123, 42, 0.12) !important;
    border-color: #d97b2a !important;
    box-shadow: inset 0 0 0 1px #d97b2a !important;
}

.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--terrible,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--terrible:hover,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--terrible:focus,
.wd-activity-score-shell--a21 .wd-bw-day-btn--active.wd-bw-day-btn--terrible:active {
    background: rgba(192, 57, 43, 0.12) !important;
    border-color: #c0392b !important;
    box-shadow: inset 0 0 0 1px #c0392b !important;
}

.wd-activity-score-shell--a21 .wd-best-window__bar {
    grid-area: bar;
    min-height: 88px;
    max-height: 88px;
    padding: 8px calc(var(--wd-card-padding) + 26px) 0 calc(var(--wd-card-padding) + 30px);
}

.wd-activity-score-shell--a21 .wd-best-window__bar::before {
    top: 8px;
}

.wd-activity-score-shell--a21 .wd-best-window__cell-fill {
    border-radius: 3px 3px 0 0;
}

.wd-activity-score-shell--a21 .wd-best-window__cell--peak .wd-best-window__cell-fill {
    outline: 0;
    box-shadow: inset 0 0 0 2px #1f2f27;
}

.wd-activity-score-shell--a21 .wd-best-window__labels {
    grid-area: labels;
    padding-bottom: 0;
}

.wd-activity-score-card--a21 .wd-best-window__description {
    grid-area: description;
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 6px 4px;
}

.wd-activity-score-card--a21 .wd-best-window__description strong {
    color: #1f2f27;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

.wd-activity-score-card--a21 .wd-best-window__description span {
    color: rgba(31, 47, 39, 0.64);
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.38;
}

.wd-activity-score-shell--a21 .wd-activity-score-card--right .wd-activity-score__header {
    justify-content: flex-end;
    padding-left: 16px;
    padding-right: 16px;
}

.wd-activity-score-shell--a21 .wd-activity-score__side-panel {
    padding: 0;
    background: rgba(245, 242, 235, 0.42);
    border-left: 1px solid var(--wd-border);
}

.wd-activity-score-shell--a21 .wd-best-window__detail {
    padding-left: 16px;
    padding-right: 16px;
}

.wd-activity-score-shell--a21 .wd-best-window__detail {
    padding-top: 16px;
    padding-bottom: 12px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser {
    border-top: 1px solid var(--wd-border);
    padding: 12px 16px 14px;
    background: rgba(251, 250, 246, 0.88);
    grid-template-columns: minmax(320px, 340px) minmax(0, 1fr);
    grid-template-areas:
        "header control"
        "presets control"
        "footer control";
    align-items: start;
    column-gap: 16px;
    row-gap: 8px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser--collapsed {
    display: none;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-header {
    margin-bottom: 10px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-grid {
    grid-area: control;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-var {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "label"
        "slider"
        "impact";
    align-content: start;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(47, 74, 54, 0.14);
    background: #fff;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-label {
    grid-area: label;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-label strong {
    color: #1f2f27;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-vals {
    color: rgba(31, 47, 39, 0.76);
    font-weight: 600;
    white-space: nowrap;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-dual-range {
    grid-area: slider;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact {
    grid-area: impact;
    border-color: rgba(47, 74, 54, 0.18);
    background: rgba(255, 255, 255, 0.62);
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(47, 74, 54, 0.14) !important;
    box-shadow: none !important;
    color: #2f3e34 !important;
    font-weight: 600;
    outline: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    -webkit-text-fill-color: currentColor;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button:not(.active):hover {
    background: rgba(47, 74, 54, 0.08) !important;
    border-color: rgba(47, 74, 54, 0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 74, 54, 0.06) !important;
    color: #1f2f27 !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(47, 153, 85, 0.26) !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button.active {
    background: #3f5f45 !important;
    border-color: #3f5f45 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 700;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button.active:hover {
    background: #4a6c51 !important;
    border-color: #4a6c51 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-footer {
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0;
    border-left: 0;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-reset {
    min-height: 28px;
    padding: 0 10px;
    background: rgba(182, 54, 44, 0.08);
    border-color: rgba(182, 54, 44, 0.26);
    color: #7a2c26;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-reset:hover,
.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-reset:focus {
    background: rgba(182, 54, 44, 0.14);
    border-color: rgba(182, 54, 44, 0.42);
    outline: 2px solid rgba(182, 54, 44, 0.12);
    outline-offset: 0;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-picker__label {
    color: rgba(31, 47, 39, 0.74);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-picker__select {
    min-height: 34px;
    padding: 0 34px 0 12px;
    border: 1px solid rgba(47, 74, 54, 0.28);
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.78);
    color: #1f2f27;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-picker__select:focus {
    border-color: rgba(66, 90, 71, 0.58);
    outline: 2px solid rgba(66, 90, 71, 0.14);
    outline-offset: 0;
}

.wd-activity-score-card--a21 .wd-customiser-presets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}

.wd-activity-score-card--a21 .wd-customiser-presets__group {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wd-activity-score-card--a21 .wd-customiser-presets__group label {
    flex: 0 0 auto;
    color: rgba(31, 47, 39, 0.74);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.wd-activity-score-card--a21 .wd-customiser-presets__select,
.wd-activity-score-card--a21 .wd-customiser-presets__name {
    min-width: 0;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(47, 74, 54, 0.24);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    color: #1f2f27;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

.wd-activity-score-card--a21 .wd-customiser-presets__select {
    flex: 1 1 150px;
}

.wd-activity-score-card--a21 .wd-customiser-presets__name {
    flex: 1 1 112px;
}

.wd-activity-score-card--a21 .wd-customiser-presets__select:focus,
.wd-activity-score-card--a21 .wd-customiser-presets__name:focus {
    border-color: rgba(66, 90, 71, 0.58);
    outline: 2px solid rgba(66, 90, 71, 0.14);
    outline-offset: 0;
}

.wd-activity-score-card--a21 .wd-customiser-preset-btn {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(47, 74, 54, 0.24);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    color: #1f2f27 !important;
    -webkit-text-fill-color: #1f2f27;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.wd-activity-score-card--a21 .wd-customiser-preset-btn--primary {
    background: rgba(47, 153, 85, 0.10);
    border-color: rgba(47, 153, 85, 0.32);
}

.wd-activity-score-card--a21 .wd-customiser-preset-btn:hover,
.wd-activity-score-card--a21 .wd-customiser-preset-btn:focus {
    background: #fff;
    border-color: rgba(66, 90, 71, 0.58);
    outline: 2px solid rgba(66, 90, 71, 0.12);
    outline-offset: 0;
}

.wd-activity-score-card--a21 .wd-customiser-preset-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.wd-activity-score-card--a21 .wd-customiser-presets__status {
    grid-column: 1 / -1;
    min-height: 13px;
    color: rgba(31, 47, 39, 0.62);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-reset,
.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact button,
.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-preset-btn {
    border-radius: 0;
}

@media (max-width: 1180px) {
    .wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .wd-activity-score-shell--a21 {
        grid-template-columns: 1fr;
    }

    .wd-activity-score-card--a21 .wd-bw-col-left {
        grid-template-columns: 1fr;
        grid-template-areas:
            "decision"
            "days"
            "bar"
            "labels"
            "description";
        align-items: stretch;
    }

    .wd-activity-score-card--a21 .wd-best-window__description {
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(47, 74, 54, 0.14);
    }

    .wd-activity-score-card--a21 .wd-best-window__days-wrap {
        width: 100%;
    }

    .wd-activity-score-card--a21 .wd-customiser-presets {
        grid-template-columns: 1fr;
    }

    .wd-activity-score-card--a21 .wd-customiser-presets__group {
        flex-wrap: wrap;
    }

    .wd-activity-score-card--a21 .wd-activity-score__customiser {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "presets"
            "control"
            "footer";
    }

    .wd-activity-score-shell--a21 .wd-activity-score__header {
        height: auto;
        min-height: 44px;
        align-items: flex-start;
        flex-direction: column;
    }

    .wd-activity-score__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .wd-activity-score__actions .wd-bw-mode-wrap--inline {
        margin-left: 0;
    }

    .wd-activity-score-card--a21 .wd-activity-score__decision-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .wd-activity-score-card--a21 .wd-activity-score__decision-block--best {
        padding-left: 0;
        padding-top: 0;
        border-left: 0;
        border-top: 0;
    }

    .wd-activity-score-shell--a21 .wd-activity-score-card--left,
    .wd-activity-score-shell--a21 .wd-activity-score-card--right {
        border-radius: 0 !important;
    }

    .wd-activity-score-shell--a21 .wd-activity-score-card--right {
        border-top: 0;
    }

    .wd-activity-score-shell--a21 .wd-activity-score__side-panel {
        border-left: 0;
    }

    .wd-activity-score-shell--a21 .wd-activity-score__header--right {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .wd-activity-score-shell--a21 .wd-best-window__days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-activity-score-card--a21 .wd-best-window__days-wrap .wd-best-window__days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-activity-score-card--a21 .wd-best-window__days-wrap {
        align-items: stretch;
    }

    .wd-activity-score-card--a21 .wd-bw-score-toggle {
        flex-basis: 68px;
    }

    .wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .wd-activity-score-shell--a21 .wd-best-window__days {
        grid-template-columns: 1fr;
    }

    .wd-activity-score-card--a21 .wd-best-window__days-wrap .wd-best-window__days {
        grid-template-columns: 1fr;
    }

    .wd-activity-score-card--a21 .wd-best-window__days-wrap {
        flex-direction: column;
    }

    .wd-activity-score-card--a21 .wd-bw-score-toggle {
        flex-basis: auto;
        min-height: 30px;
        width: 100%;
    }

    .wd-activity-score-card--a21 .wd-customiser-presets__select,
    .wd-activity-score-card--a21 .wd-customiser-presets__name {
        flex-basis: 100%;
    }
}

/* Forecast tab mobile pass: keep the activity-window picker as one quick row. */
@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21.wd-card {
        padding: 0;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-col-left {
        padding: 10px 14px 12px;
        row-gap: 8px;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-best-window__description {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-best-window__days-wrap {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        grid-template-areas: "prev days next";
        align-items: stretch;
        gap: 5px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-best-window__days-wrap .wd-best-window__days {
        display: flex !important;
        grid-template-columns: none !important;
        grid-area: days;
        flex: 1 1 auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
        justify-self: stretch;
        margin-left: 0;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        padding: 0;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-best-window__days-wrap .wd-best-window__days::-webkit-scrollbar {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-day-scroll-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        min-width: 28px;
        min-height: 44px;
        padding: 0;
        border: 1px solid rgba(47, 74, 54, 0.22) !important;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: none !important;
        color: #1f2f27 !important;
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1;
        -webkit-text-fill-color: currentColor;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-day-scroll-btn--prev {
        grid-area: prev;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-day-scroll-btn--next {
        grid-area: next;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-day-scroll-btn:disabled {
        opacity: 0.34;
        cursor: default;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-bw-day-btn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        min-height: 42px;
        padding: 5px 3px 4px;
        gap: 1px;
        scroll-snap-align: start;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-bw-day-btn__note {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-bw-day-btn__label {
        font-size: 0.6rem;
        line-height: 1.05;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-bw-day-btn__score {
        margin-top: 3px;
        font-size: 0.76rem;
        line-height: 1;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-score-toggle {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-best-window__bar {
        min-height: 60px;
        max-height: 60px;
        padding-top: 6px;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-shell--a21 .wd-best-window__bar::before {
        top: 6px;
    }
}

@media (min-width: 769px) {
    body.page-template-page-forecast-unified #tab-forecast .wd-activity-score-card--a21 .wd-bw-day-scroll-btn {
        display: none !important;
    }
}

/* Forecast table mobile header: make day navigation read as a control, not a table edge. */
@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tabs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(46px, 1fr);
        width: 100%;
        padding-left: 0 !important;
        margin: 0 0 -1px;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tabs::-webkit-scrollbar {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab {
        min-width: 0;
        width: 100%;
        min-height: 32px;
        justify-content: center;
        padding: 6px 4px 7px;
        border: 1px solid rgba(47, 74, 54, 0.18);
        border-right: 0;
        border-bottom: 1px solid var(--wd-border);
        border-radius: 7px 7px 0 0;
        background: rgba(255, 255, 255, 0.72);
        color: #55625b;
        box-shadow: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab:last-child {
        border-right: 1px solid rgba(47, 74, 54, 0.18);
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab--active,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab--active:hover,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab--active:focus,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab--active:active {
        background: #d4e8d6 !important;
        border-color: rgba(47, 153, 85, 0.38);
        border-bottom-color: #d4e8d6;
        color: #1f2f27 !important;
        transform: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.66rem;
        font-weight: 750;
        letter-spacing: 0;
        line-height: 1;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-card--forecast-tabbed {
        margin-top: calc(-1 * var(--wd-space-md, 14px) - 1px) !important;
        border-top: 0 !important;
        border-radius: 0 !important;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-compact-btn {
        visibility: visible;
        opacity: 0.8;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-grouphead--conditions {
        display: none !important;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-split .wd-table__dayrow td {
        height: 30px !important;
        line-height: 30px !important;
    }
}