/* ============================================================
   INVERSION TAB — REDESIGNED (2-col heatmap layout)
   ============================================================ */

/* ── Inversion-specific tokens ── */
:root {
    --inv-excellent: #2E7DB5;
    --inv-good:      #2f9955;
    --inv-moderate:  #c68a1a;
    --inv-low:       #d97b2a;
    --inv-verylow:   #c0392b;
    --inv-chip-pos-bg: #d4edda;
    --inv-chip-pos-text: #155724;
    --inv-chip-pos-border: #b8d9c3;
    --inv-chip-neg-bg: #fce4e4;
    --inv-chip-neg-text: #8b2020;
    --inv-chip-neg-border: #f0c0c0;
    --inv-bar-good: #4ade80;
    --inv-bar-mid:  #fbbf24;
    --inv-bar-low:  #e5e7eb;
}


/* ============================================================
   2-COLUMN GRID
   ============================================================ */

.wd-inv-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.wd-inv-col-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ============================================================
   CARD BASE (compact)
   ============================================================ */

.wd-inv-card {
    background: var(--wd-bg-card, var(--wd-card));
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    padding: var(--wd-space-lg);
    box-shadow: var(--wd-shadow-sm);
}


/* ============================================================
   SECTION TITLES (compact header row)
   ============================================================ */

.wd-inv-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wd-inv-section-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wd-text-muted);
    margin: 0;
}

.wd-inv-section-badge {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--wd-bg-subtle);
    color: var(--wd-text-muted);
    border: 1px solid var(--wd-border);
}


/* ============================================================
   A. HERO SCORE — stacked layout
   ============================================================ */

.wd-inv-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Score circle — enlarged */
.wd-inv-score-circle {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.wd-inv-score-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.15;
    background: currentColor;
}

.wd-inv-score-circle::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    opacity: 0.3;
}

.wd-inv-score-pct {
    font-family: var(--wd-mono);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    position: relative;
}

.wd-inv-score-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    margin-top: 2px;
    opacity: 0.85;
}

/* Headline area beside circle */
.wd-inv-hero-headline {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wd-inv-window-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wd-inv-window-icon {
    width: 13px;
    height: 13px;
    opacity: 0.4;
    flex-shrink: 0;
}

.wd-inv-window-time {
    font-family: var(--wd-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wd-text-primary);
}

.wd-inv-window-note {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--wd-text-muted);
}

/* Metadata row — inline under score area */
.wd-inv-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--wd-border);
}

.wd-inv-meta-item {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--wd-text-secondary);
    white-space: nowrap;
}

.wd-inv-meta-item strong {
    font-weight: 700;
    color: var(--wd-text-primary);
    font-family: var(--wd-mono);
    font-size: 0.66rem;
}

.wd-inv-conf-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

.wd-inv-conf-dot--high   { background: #3a7d3e; }
.wd-inv-conf-dot--medium { background: #e8a317; }
.wd-inv-conf-dot--low    { background: #c62828; }

/* Driver chips (old layout — kept for backward compat) */
.wd-inv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.wd-inv-chip-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wd-inv-chip--pos .wd-inv-chip-dot { background: var(--inv-chip-pos-text); }
.wd-inv-chip--neg .wd-inv-chip-dot { background: var(--inv-chip-neg-text); }


/* ============================================================
   B. FACTOR BREAKDOWN (old horizontal bars — kept for compat)
   ============================================================ */

.wd-inv-factors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.wd-inv-factor {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wd-inv-factor-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--wd-text-secondary);
    width: 88px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-inv-factor-track {
    flex: 1;
    height: 7px;
    background: #eef0f3;
    border-radius: 4px;
    overflow: hidden;
    min-width: 30px;
}

.wd-inv-factor-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.wd-inv-factor-fill--good { background: var(--inv-bar-good); }
.wd-inv-factor-fill--mid  { background: var(--inv-bar-mid); }
.wd-inv-factor-fill--low  { background: var(--inv-bar-low); }

.wd-inv-factor-score {
    font-family: var(--wd-mono);
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--wd-text-muted);
    width: 34px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   C. 6-NIGHT HEATMAP (old segmented bar style — kept for compat)
   ============================================================ */

/* Time labels header */
.wd-inv-heatmap-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.wd-inv-heatmap-night-spacer {
    flex: 0 0 52px;
}

.wd-inv-heatmap-times {
    flex: 1;
    display: flex;
    padding: 0 1px;
}

.wd-inv-heatmap-times span {
    flex: 1;
    text-align: center;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wd-text-muted);
}

/* Heatmap rows */
.wd-inv-heatmap-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wd-inv-heatmap-row {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 5px;
    transition: transform 0.1s ease;
}

.wd-inv-heatmap-row:hover {
    transform: scale(1.01);
    z-index: 1;
}

/* Night label */
.wd-inv-heatmap-night {
    flex: 0 0 52px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--wd-text-secondary);
    white-space: nowrap;
    padding-right: 4px;
}

/* The segmented bar */
.wd-inv-heatmap-bar {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 30px;
}

.wd-inv-heatmap-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wd-mono);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: filter 0.15s ease;
    cursor: default;
}

.wd-inv-heatmap-seg:first-child { border-radius: 4px 0 0 4px; }
.wd-inv-heatmap-seg:last-child  { border-radius: 0 4px 4px 0; }

.wd-inv-heatmap-seg:hover {
    filter: brightness(0.92);
}

/* Tier backgrounds on segments */
.wd-inv-heatmap-seg.wd-inv-t80 { background: var(--inv-excellent); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t60 { background: var(--inv-good); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t40 { background: var(--inv-moderate); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t20 { background: var(--inv-low); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t0  { background: var(--inv-verylow); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t-empty {
    background: var(--wd-bg-subtle);
    color: var(--wd-text-muted);
    font-weight: 500;
}

/* Best night highlight */
.wd-inv-heatmap-best .wd-inv-heatmap-night {
    color: var(--wd-green);
}

.wd-inv-heatmap-best .wd-inv-heatmap-night::after {
    content: ' \2605';
    font-size: 0.5rem;
}

.wd-inv-heatmap-best .wd-inv-heatmap-bar {
    box-shadow: 0 0 0 2px var(--wd-green), 0 0 0 4px rgba(66, 90, 71, 0.12);
    border-radius: 5px;
}

.wd-inv-heatmap-best .wd-inv-heatmap-seg:first-child { border-radius: 3px 0 0 3px; }
.wd-inv-heatmap-best .wd-inv-heatmap-seg:last-child  { border-radius: 0 3px 3px 0; }


/* ============================================================
   D. PRIMER (collapsible)
   ============================================================ */

.wd-inv-primer {
    border-top: 1px dashed var(--wd-border-strong);
    padding: 8px 0 2px;
    margin-top: 4px;
}

.wd-inv-primer summary {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--wd-text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wd-inv-primer summary::-webkit-details-marker { display: none; }

.wd-inv-primer summary::before {
    content: '\25B6';
    font-size: 0.5rem;
    color: var(--wd-text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
}

.wd-inv-primer[open] summary::before {
    transform: rotate(90deg);
}

.wd-inv-primer-body {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--wd-text-secondary);
    margin-top: 6px;
    padding-left: 16px;
}


/* ============================================================
   E. LEGEND
   ============================================================ */

.wd-inv-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
    margin-top: 4px;
}

.wd-inv-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--wd-text-muted);
    white-space: nowrap;
}

.wd-inv-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}


/* ============================================================
   RESPONSIVE — TABLET (old layout)
   ============================================================ */

@media (max-width: 768px) {

    .wd-inv-two-col {
        grid-template-columns: 1fr;
    }

    .wd-inv-hero-top {
        gap: 12px;
    }

    .wd-inv-score-circle {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }

    .wd-inv-score-pct { font-size: 1.3rem; }

    .wd-inv-meta-row {
        gap: 8px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (old layout)
   ============================================================ */

@media (max-width: 480px) {

    .wd-inv-card {
        padding: 10px 12px;
    }

    .wd-inv-hero-top {
        gap: 10px;
    }

    .wd-inv-score-circle {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }

    .wd-inv-score-pct { font-size: 1.15rem; }
    .wd-inv-score-lbl { font-size: 0.54rem; }

    .wd-inv-meta-row {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }

    .wd-inv-factors-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .wd-inv-factor-name {
        width: 82px;
    }

    .wd-inv-heatmap-bar { height: 26px; }
    .wd-inv-heatmap-seg { font-size: 0.58rem; }
    .wd-inv-heatmap-night { flex: 0 0 46px; font-size: 0.62rem; }
    .wd-inv-heatmap-night-spacer { flex: 0 0 46px; }
}


/* ============================================================
   INVERSION TEASER CARD (Summary tab — keep as-is)
   ============================================================ */

.wd-inv-teaser:hover {
    background: var(--wd-amber-bg);
    transition: background 0.15s ease;
}


/* ================================================================
   ================================================================
   B4 REDESIGN — CONTENT SECTIONS
   All styles below match the B4 preview class names exactly.
   ================================================================
   ================================================================ */


/* ============================================================
   B4 — SECTION CARD & HEADINGS
   ============================================================ */

/* Card chrome (background, border, padding) comes from .wd-card */

.wd-inv-section-heading {
    font-size: var(--wd-font-size-sm, 0.82rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: var(--wd-space-sm, 8px);
}

.wd-inv-heading-meta {
    font-weight: 500;
    opacity: 0.75;
}

.wd-inv-empty {
    font-size: 0.82rem;
    color: var(--wd-text-light, #908a7e);
    margin: 0;
}


/* ============================================================
   B4 — HERO HEATMAP (6-Night Overview)
   ============================================================ */

.wd-inv-hero-heatmap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-hero-night {
    padding: 16px 12px;
    text-align: center;
    background: #f4f4f0;
    border-right: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    position: relative;
    transition: background 0.2s;
}

.wd-inv-hero-night:last-child {
    border-right: none;
}

.wd-inv-hero-night:hover {
    background: #ececea;
}

.wd-inv-hero-night--best,
.wd-inv-hero-night--best:hover {
    background: #eaf3ea;
    box-shadow: inset 0 0 0 2px var(--inv-good, #2f9955);
}

.wd-inv-hero-night--best::after {
    content: 'BEST';
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--inv-good, #2f9955);
    background: rgba(47, 153, 85, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
}

.wd-inv-hero-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 12px;
}

.wd-inv-hero-pct {
    font-family: var(--wd-font, inherit);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.wd-inv-hero-rating {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

/* Vertical fill bar inside each night column */
.wd-inv-hero-bar-wrap {
    width: 24px;
    height: 44px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wd-inv-hero-bar-fill {
    border-radius: 12px;
    min-height: 4px;
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-inv-hero-confidence {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--wd-text-light, #908a7e);
    letter-spacing: 0.03em;
    margin-top: 8px;
    opacity: 0.8;
}

/* Tier colour classes for hero heatmap */
.wd-inv-t80 .wd-inv-hero-pct,
.wd-inv-t80 .wd-inv-hero-rating { color: var(--inv-excellent); }
.wd-inv-t80 .wd-inv-hero-bar-fill { background: var(--inv-excellent); }

.wd-inv-t60 .wd-inv-hero-pct,
.wd-inv-t60 .wd-inv-hero-rating { color: var(--inv-good); }
.wd-inv-t60 .wd-inv-hero-bar-fill { background: var(--inv-good); }

.wd-inv-t40 .wd-inv-hero-pct,
.wd-inv-t40 .wd-inv-hero-rating { color: var(--inv-moderate); }
.wd-inv-t40 .wd-inv-hero-bar-fill { background: var(--inv-moderate); }

.wd-inv-t20 .wd-inv-hero-pct,
.wd-inv-t20 .wd-inv-hero-rating { color: var(--inv-low); }
.wd-inv-t20 .wd-inv-hero-bar-fill { background: var(--inv-low); }

.wd-inv-t0 .wd-inv-hero-pct,
.wd-inv-t0 .wd-inv-hero-rating { color: var(--inv-verylow); }
.wd-inv-t0 .wd-inv-hero-bar-fill { background: var(--inv-verylow); }


/* ============================================================
   B4 — KEY DRIVERS (inline chips)
   ============================================================ */

.wd-inv-drivers-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.wd-inv-driver-sep {
    width: 1px;
    height: 24px;
    background: var(--wd-border, rgba(0,0,0,0.07));
    margin: 0;
}

.wd-inv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.wd-inv-chip--pos {
    background: rgba(107, 201, 127, 0.12);
    color: #2d6b3a;
    border: 1px solid rgba(107, 201, 127, 0.25);
}

.wd-inv-chip--neg {
    background: rgba(220, 90, 90, 0.08);
    color: #8b3a3a;
    border: 1px solid rgba(220, 90, 90, 0.2);
}

.wd-inv-chip-icon {
    font-size: 0.8rem;
}


/* ============================================================
   B4 — EXPLAINER (inline toggle)
   ============================================================ */

.wd-inv-explainer-inline {
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    margin-top: 16px;
    padding-top: 14px;
}

.wd-inv-explainer-toggle {
    font-family: var(--wd-font, system-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wd-green, #425A47);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.wd-inv-explainer-toggle:hover {
    text-decoration: underline;
}

.wd-inv-explainer-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.wd-inv-explainer--open .wd-inv-explainer-arrow {
    transform: rotate(90deg);
}

.wd-inv-explainer-body {
    display: none;
    padding-top: 10px;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--wd-text-mid, #5a5850);
}

.wd-inv-explainer--open .wd-inv-explainer-body {
    display: block;
}


/* ============================================================
   B4 — TONIGHT DETAIL CARD
   ============================================================ */

.wd-inv-tonight-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.wd-inv-tonight-left {
    flex-shrink: 0;
}

.wd-inv-tonight-pct {
    font-family: var(--wd-mono, monospace);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.wd-inv-tonight-sublabel {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.wd-inv-tonight-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wd-inv-tonight-detail-row {
    display: flex;
    gap: 20px;
}

.wd-inv-tonight-detail-item {
    display: flex;
    flex-direction: column;
}

.wd-inv-tonight-detail-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wd-text-light, #908a7e);
}

.wd-inv-tonight-detail-val {
    font-family: var(--wd-mono, monospace);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wd-text, #1a1a18);
}

.wd-inv-tonight-narrative {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--wd-text-mid, #5a5850);
    font-family: Georgia, serif;
    font-style: italic;
    margin-top: 4px;
}


/* ============================================================
   B4 — CLOUD LAYER & SUMMITS (two-column combined card)
   ============================================================ */

.wd-cloud-summits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.wd-cloud-summits-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wd-cloud-summits-sublabel {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 2px;
}

/* Altitude strip (cloud band visual) */
.wd-inv-altitude-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-altitude-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.wd-inv-altitude-info {
    flex: 1;
}

.wd-inv-altitude-primary {
    font-family: var(--wd-mono, monospace);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
}

.wd-inv-altitude-secondary {
    font-size: 0.72rem;
    color: var(--wd-text-light, #908a7e);
    margin-top: 1px;
}

.wd-inv-altitude-visual {
    width: 120px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
}

.wd-inv-altitude-line {
    height: 2px;
    border-radius: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wd-inv-altitude-line-label {
    font-family: var(--wd-mono, monospace);
    font-size: 0.5rem;
    color: var(--wd-text-light, #908a7e);
    white-space: nowrap;
}

.wd-inv-altitude-line-bar {
    flex: 1;
    height: 2px;
    border-radius: 1px;
}

.wd-inv-altitude-cloud-band {
    position: absolute;
    left: 30px;
    right: 0;
    background: rgba(160, 180, 220, 0.2);
    border-radius: 3px;
}

/* Expanded altitude strip inside two-column card */
.wd-cloud-summits-left .wd-inv-altitude-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
}

.wd-cloud-summits-left .wd-inv-altitude-visual {
    width: 100%;
    height: 60px;
}

.wd-cloud-summits-left .wd-inv-altitude-line-label {
    font-size: 0.58rem;
    min-width: 32px;
}

/* Summit list */
.wd-summit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wd-summit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-summit-status {
    font-size: 1rem;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.wd-summit-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wd-text, #1a1a18);
    flex: 1;
}

.wd-summit-elev {
    font-family: var(--wd-mono, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
    flex-shrink: 0;
}

.wd-summit-verdict {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.wd-summit-verdict--above {
    background: rgba(107, 201, 127, 0.12);
    color: #2d6b3a;
    border: 1px solid rgba(107, 201, 127, 0.25);
}

.wd-summit-verdict--within {
    background: rgba(220, 90, 90, 0.08);
    color: #8b3a3a;
    border: 1px solid rgba(220, 90, 90, 0.2);
}

.wd-summit-verdict--below {
    background: rgba(66, 90, 71, 0.08);
    color: var(--wd-green, #425A47);
    border: 1px solid rgba(66, 90, 71, 0.2);
}

.wd-summit-verdict--unknown {
    background: rgba(0, 0, 0, 0.04);
    color: var(--wd-text-light, #908a7e);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}


/* ============================================================
   B4 — INLINE FACTOR BARS (vertical columns)
   ============================================================ */

.wd-inv-factors-inline {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.wd-inv-factor-col {
    text-align: center;
    min-width: 64px;
}

.wd-inv-factor-col-name {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-inv-factor-col-bar {
    width: 36px;
    height: 72px;
    margin: 0 auto 6px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wd-inv-factor-col-fill {
    border-radius: 10px;
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-inv-factor-col-fill--good { background: var(--inv-bar-good); }
.wd-inv-factor-col-fill--mid  { background: var(--inv-bar-mid); }
.wd-inv-factor-col-fill--low  { background: var(--inv-bar-low); }

.wd-inv-factor-col-val {
    font-family: var(--wd-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wd-text-mid, #5a5850);
}


/* ============================================================
   DATA SOURCE STRIP — matches the "5 NIGHT INVERSION OUTLOOK"
   header band (.wd-inv-outlook-hdr) styling exactly
   ============================================================ */

.wd-inv-source-strip {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: var(--wd-font-size-sm, 0.82rem);
    font-weight: 800;
    color: #1f2f27;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: #d4e8d6;
    border: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: 0;
    padding: 6px var(--wd-space-lg, 22px);
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 18px;
}

.wd-inv-source-strip__icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    line-height: 1;
    color: #1f2f27;
}

.wd-inv-source-strip__text {
    flex: 1 1 auto;
}

/* ============================================================
   B3b — DATA SOURCE BREAKDOWN
   ============================================================ */

.wd-inv-sources-breakdown {
    margin-top: 4px;
}

.wd-inv-sources-heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 8px;
}

.wd-inv-sources-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wd-inv-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.wd-inv-source-name {
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
    min-width: 90px;
}

.wd-inv-source-dist {
    font-size: 0.7rem;
    color: var(--wd-text-light, #908a7e);
    min-width: 44px;
    text-align: right;
}

.wd-inv-source-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    overflow: hidden;
    min-width: 40px;
}

.wd-inv-source-bar-fill {
    height: 100%;
    background: var(--wd-green, #5cd88a);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.wd-inv-source-pct {
    font-family: var(--wd-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wd-text-mid, #5a5850);
    min-width: 32px;
    text-align: right;
}


/* ============================================================
   B4 — GOLDEN HOUR TIMELINE
   ============================================================ */

.wd-gh-timeline-wrap {
    position: relative;
    margin-bottom: 8px;
}

/* Photo-backed timeline bar */
.wd-gh-timeline {
    position: relative;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    background: url('../../img/sunrisebar4.png') calc(50% + 2px) center / calc(100% + 10px) auto no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.06);
}

/* Transparent overlay segments — for labels + hover zones only */
.wd-gh-seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 0.2s;
}

/* No segment backgrounds — the photo handles it */
.wd-gh-seg--dark {
    overflow: visible;
}
.wd-gh-seg--dark .wd-gh-seg-label {
    position: absolute;
    left: 36px;
    white-space: nowrap;
}
.wd-gh-seg--twilight {}
.wd-gh-seg--golden {}
.wd-gh-seg--daylight {
    overflow: visible;
}
.wd-gh-seg--daylight .wd-gh-seg-label {
    position: absolute;
    right: 36px;
    white-space: nowrap;
}

.wd-gh-seg-label {
    font-family: var(--wd-mono, monospace);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 3;
    position: relative;
    user-select: none;
}

.wd-gh-seg--dark .wd-gh-seg-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    text-shadow: 0 0 10px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}

.wd-gh-seg--daylight .wd-gh-seg-label {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    text-shadow: 0 0 8px rgba(120,80,20,0.6), 0 1px 3px rgba(80,50,10,0.4);
}

/* Golden hour header with day navigation */
.wd-gh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* Green card header — matches the shared > .wd-section-title rule in unified CSS */
body.page-template-page-forecast-unified #tab-inversion #wd-gh-section > .wd-gh-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: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

#wd-gh-section > .wd-gh-header .wd-section-title {
    flex: 0 0 auto;
    color: #1f2f27;
    margin-bottom: 0;
}

/* Sunrise / Sunset mode toggle pill */
.wd-gh-mode-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(47, 74, 54, 0.2);
    border-radius: 20px;
    padding: 2px;
}

.wd-gh-mode-btn {
    font-family: var(--wd-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: none;
    border: none;
    border-radius: 16px;
    padding: 3px 10px;
    cursor: pointer;
    color: #1f6037;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.wd-gh-mode-btn--active {
    background: #1f6037;
    color: #fff;
}

.wd-gh-day-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.wd-gh-nav-btn {
    background: rgba(0,0,0,0.07);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.12));
    border-radius: var(--wd-radius-sm, 6px);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: var(--wd-text-mid, #5a5850) !important;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
    appearance: none;
}

.wd-gh-nav-btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

#wd-gh-prev::before {
    border-right: 7px solid currentColor;
}

#wd-gh-next::before {
    border-left: 7px solid currentColor;
}

.wd-gh-nav-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.13);
    border-color: rgba(0,0,0,0.2);
}

.wd-gh-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.wd-gh-day-label {
    font-family: var(--wd-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
    min-width: 60px;
    text-align: center;
}

@media (max-width: 640px) {
    body.page-template-page-forecast-unified #tab-inversion #wd-gh-section > .wd-gh-header {
        height: auto;
        min-height: 38px;
        flex-wrap: wrap;
        row-gap: 6px;
        padding-bottom: 8px;
    }

    #wd-gh-section > .wd-gh-header .wd-section-title {
        width: 100%;
    }

    .wd-gh-day-nav {
        margin-left: auto;
    }
}

/* Times row — edges wide, golden cluster centred */
.wd-gh-times-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 8px;
}

.wd-gh-edge {
    font-family: var(--wd-mono, monospace);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wd-text-light, #908a7e);
}

.wd-gh-edge--left {
    margin-right: auto;
}

.wd-gh-edge--right {
    margin-left: auto;
}

/* Golden cluster: start — sunrise — end, kept close */
.wd-gh-golden-cluster {
    display: flex;
    align-items: baseline;
    gap: 80px;
}

.wd-gh-golden-time {
    font-family: var(--wd-mono, monospace);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wd-amber, #b8860b);
}

.wd-gh-sunrise {
    text-align: center;
}

.wd-gh-sunrise-time {
    font-family: var(--wd-mono, monospace);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
    display: block;
    letter-spacing: 0.04em;
}

.wd-gh-sunrise-sub {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wd-amber, #b8860b);
    display: block;
    margin-top: 1px;
}

/* Golden hour bracket — centred, width set by JS */
.wd-gh-bracket-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
}

.wd-gh-bracket-arm {
    width: 280px; /* CSS fallback — JS overrides with exact measurement */
    height: 14px;
    border: 2px solid var(--wd-amber, #b8860b);
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.wd-gh-bracket-text {
    text-align: center;
    margin-top: 5px;
    font-family: var(--wd-mono, monospace);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--wd-amber, #b8860b);
    letter-spacing: 0.04em;
}

/* Sunrise callout box */
.wd-sunrise-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 169, 74, 0.12) 0%, rgba(245, 200, 66, 0.08) 100%);
    border: 1px solid rgba(232, 169, 74, 0.25);
}

.wd-sunrise-callout-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.wd-sunrise-callout-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #7a5a20;
}

.wd-sunrise-callout-sub {
    font-size: 0.72rem;
    font-weight: 400;
    color: #9a7a40;
    margin-top: 2px;
}


/* Sunset bar — same image but horizontally flipped via pseudo-element */
.wd-gh-timeline--sunset {
    background: none;
}

.wd-gh-timeline--sunset::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../img/sunrisebar4.png') calc(50% - 2px) center / calc(100% + 10px) auto no-repeat;
    transform: scaleX(-1);
}

.wd-gh-timeline--sunset .wd-gh-seg {
    position: relative;
    z-index: 1;
}

/* Sunset's dark seg sits at the bar's right edge and daylight on the left —
   swap label anchors so each label stays 36px in from the bar edge. */
.wd-gh-timeline--sunset .wd-gh-seg--dark .wd-gh-seg-label {
    left: auto;
    right: 36px;
}
.wd-gh-timeline--sunset .wd-gh-seg--daylight .wd-gh-seg-label {
    left: 36px;
    right: auto;
}

/* ============================================================
   B4 — BOTTOM GRID: L-shape card + Frequency
   ============================================================ */

.wd-inv-bottom-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
}

/* L-shaped card spans full width on row 1 */
.wd-inv-l-card {
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
}

/* Internal layout: profile left (tall), guide right (top) */
.wd-inv-l-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    align-items: start;
}

.wd-inv-l-profile {
    padding: var(--wd-card-padding, 22px);
}

.wd-inv-l-guide {
    padding: var(--wd-card-padding, 22px);
    border-left: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    background: var(--wd-bg-card, #ffffff);
}

/* Cloud Layers & Summits sits bottom-left */
.wd-inv-cloud-summits-card {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* Stack the internal grid vertically when inside the narrower bottom column */
.wd-inv-cloud-summits-card .wd-cloud-summits-grid {
    grid-template-columns: 1fr;
}

/* Frequency sits bottom-right */
.wd-inv-freq-card {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Atmospheric Profile */
.wd-atmos-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    border: none;
    overflow: visible;
    width: fit-content;
}

.wd-atmos-toggle-wrap .wd-skewt-adiabat-toggle {
    border-radius: 6px !important;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07)) !important;
    position: static !important;
    padding: 6px 16px !important;
    font-family: var(--wd-font, system-ui) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    background: var(--wd-card, #faf8f4) !important;
    color: var(--wd-text-light, #908a7e) !important;
}

.wd-atmos-toggle-btn {
    font-family: var(--wd-font, system-ui);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 16px;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    border-radius: 6px;
    cursor: pointer;
    background: var(--wd-card, #faf8f4);
    color: var(--wd-text-light, #908a7e);
    transition: all 0.15s;
}

.wd-atmos-toggle-btn--active {
    background: var(--wd-green, #425A47);
    color: #fff;
}

.wd-atmos-toggle-btn:not(.wd-atmos-toggle-btn--active):hover {
    background: rgba(0, 0, 0, 0.03);
}

.wd-atmos-subtitle {
    font-size: 0.65rem;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 8px;
}

.wd-atmos-canvas-wrap {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: none;
    background: #fff;
}

.wd-atmos-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
}

.wd-atmos-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.wd-atmos-slider-label {
    font-family: var(--wd-mono, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
    white-space: nowrap;
    min-width: 120px;
}

.wd-atmos-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.08);
    outline: none;
}

.wd-atmos-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wd-green, #425A47);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.wd-atmos-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wd-green, #425A47);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Frequency Bar Chart */
.wd-freq-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 0 4px;
    margin-bottom: 10px;
}

.wd-freq-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.wd-freq-bar-val {
    font-family: var(--wd-mono, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--wd-text-mid, #5a5850);
}

.wd-freq-bar {
    width: 100%;
    max-width: 36px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--wd-green, #425A47) 0%, #c8dbc9 100%);
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 2px;
}

.wd-freq-bar--current {
    background: linear-gradient(180deg, #6bc97f 0%, var(--wd-green, #425A47) 100%);
    box-shadow: 0 0 8px rgba(107, 201, 127, 0.35);
}

.wd-freq-bar-month {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--wd-text-light, #908a7e);
}

.wd-freq-bar-month--current {
    color: var(--wd-green, #425A47);
    font-weight: 800;
}

.wd-freq-note {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--wd-text-mid, #5a5850);
    font-family: Georgia, serif;
    font-style: italic;
    padding-top: 4px;
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}


/* ============================================================
   B4 — HELP GUIDE (inside L-card, right column)
   ============================================================ */

.wd-inv-help-h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-secondary, #5a5850);
    margin: 0 0 4px;
}

.wd-inv-help-h5:not(:first-child) {
    margin-top: 12px;
}

.wd-inv-help-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wd-inv-help-list li {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--wd-text-mid, #5a5850);
}

.wd-inv-help-list li strong {
    font-weight: 700;
}


/* ============================================================
   B4 — RESPONSIVE — TABLET (768px)
   ============================================================ */

@media (max-width: 768px) {

    .wd-inv-section {
        padding: 16px 18px;
    }

    .wd-inv-hero-heatmap {
        grid-template-columns: repeat(3, 1fr);
    }

    .wd-inv-hero-night {
        border-bottom: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    }

    .wd-inv-tonight-card {
        flex-direction: column;
        gap: 14px;
    }

    .wd-inv-factors-inline {
        gap: 16px;
    }

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

    .wd-inv-l-inner {
        grid-template-columns: 1fr;
    }

    .wd-inv-l-profile {
        padding: 16px 18px;
    }

    .wd-inv-l-guide {
        border-left: none;
        border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
        padding: 16px 18px;
    }

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

    .wd-inv-freq-card {
        grid-column: 1;
        grid-row: auto;
    }

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

    .wd-gh-timeline {
        height: 48px;
        border-radius: 8px;
    }

    .wd-summit-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .wd-summit-elev {
        order: 3;
    }

    .wd-summit-verdict {
        order: 4;
    }

    .wd-freq-chart {
        height: 80px;
        gap: 3px;
    }

    .wd-atmos-slider-wrap {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .wd-atmos-slider-label {
        min-width: auto;
    }

    /* wd-inv-bottom-grid handled above in tablet block */
}


/* ============================================================
   B4 — RESPONSIVE — MOBILE (480px)
   ============================================================ */

@media (max-width: 480px) {

    .wd-inv-section {
        padding: 14px 14px;
    }

    .wd-inv-hero-heatmap {
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-inv-factors-inline {
        gap: 12px;
    }

    .wd-gh-seg-label {
        font-size: 0.56rem;
    }

    .wd-gh-timeline {
        height: 40px;
    }

    .wd-gh-golden-cluster {
        gap: 32px;
    }

    .wd-gh-edge,
    .wd-gh-golden-time {
        font-size: 0.76rem;
    }

    .wd-gh-sunrise-time {
        font-size: 0.88rem;
    }

    .wd-freq-bar-month {
        font-size: 0.54rem;
    }

    .wd-freq-bar-val {
        font-size: 0.54rem;
    }
}


/* ── Timeline sparkline bars (pressure + wind) ── */

.wd-skewt-timeline-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 0 2px;
}

.wd-skewt-timeline-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wd-skewt-timeline-label {
    width: 58px;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--wd-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
}

.wd-skewt-timeline-canvas {
    flex: 1;
    height: 28px;
    border-radius: var(--wd-radius-sm, 4px);
    background: var(--wd-bg-subtle, #f5f5f0);
}


/* ============================================================
   INVERSION HEATMAP
   ============================================================ */

.wd-inv-heatmap-section {
    margin-top: var(--wd-space-xl, 24px);
}

.wd-inv-heatmap-subtitle {
    font-size: var(--wd-font-size-sm, 0.82rem);
    color: var(--wd-text-light, #888);
    margin: 0 0 var(--wd-space-md, 12px);
}

.wd-inv-heatmap-map {
    position: relative;
    background: var(--wd-grey-bg, #e8e8e4);
    border-radius: var(--wd-radius-md, 12px);
    overflow: hidden;
    aspect-ratio: 580 / 360;
}

/* Heatmap map grows to fill remaining card height, matching the profile card */
.wd-inv-maps-row .wd-inv-heatmap-map {
    flex: 1;
    aspect-ratio: unset;
    min-height: 180px;
}

.wd-inv-maps-row .wd-atmos-canvas-wrap canvas {
    width: 100%;
    height: auto;
}

.wd-inv-heatmap-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--wd-space-md, 12px);
    padding: var(--wd-space-sm, 8px) 0;
    font-size: var(--wd-font-size-xs, 0.72rem);
    color: var(--wd-text-mid, #666);
}

.wd-inv-heatmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wd-inv-heatmap-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wd-inv-heatmap-meta {
    display: flex;
    justify-content: center;
    gap: var(--wd-space-lg, 16px);
    padding-top: 2px;
}

.wd-inv-heatmap-ts,
.wd-inv-heatmap-countdown {
    font-size: var(--wd-font-size-xs, 0.72rem);
    color: var(--wd-text-light, #999);
}

.wd-inv-heatmap-countdown {
    font-weight: 500;
    color: var(--wd-text-mid, #666);
}

/* IDW canvas overlay */
.wd-idw-canvas {
    opacity: 1;
}

/* Leaflet popup styling */
.wd-inv-popup .leaflet-popup-content {
    font-family: var(--wd-font, system-ui);
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 12px;
}


/* ============================================================
   INVERSION EXPLORER — merged card
   ============================================================ */

.wd-inv-explorer-card {
    margin-bottom: var(--wd-space-lg, 16px);
}

.wd-inv-tooltip {
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 5px 9px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.wd-inv-explorer-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-lg, 20px);
    align-items: start;
}

.wd-inv-explorer-divider {
    display: none;
}

.wd-inv-explorer-panel {
    display: flex;
    flex-direction: column;
}

.wd-inv-explorer-panel--map,
.wd-inv-explorer-panel--profile {
    padding: 0;
}

.wd-inv-explorer-panel--profile.wd-skewt-card {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Map height matches the Skew-T canvas (which auto-sizes based on width) */
.wd-inv-explorer-panel--profile .wd-skewt-canvas {
    width: 100%;
}

.wd-inv-explorer-panel--profile .wd-skewt-unavailable {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wd-inv-panel-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-text-light, #8a8a8a);
    margin-bottom: var(--wd-space-sm, 8px);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wd-inv-panel-label::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--wd-green, #3d6b4f);
    border-radius: 2px;
    flex-shrink: 0;
}

.wd-inv-panel-footer {
    padding-top: var(--wd-space-md, 12px);
    margin-top: var(--wd-space-sm, 8px);
}

.wd-inv-heatmap-legend-wrap {
    text-align: center;
}

.wd-inv-heatmap-legend-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wd-text-light, #8a8a8a);
    margin-bottom: 4px;
}

.wd-inv-heatmap-legend-wrap .wd-inv-heatmap-legend {
    justify-content: center;
}

.wd-inv-explorer-legend-bar {
    text-align: center;
    padding: var(--wd-space-sm, 8px) var(--wd-space-xl, 24px) 0;
}

.wd-inv-explorer-legend-bar .wd-inv-heatmap-legend {
    justify-content: center;
}

.wd-inv-explorer-legend-bar .wd-inv-heatmap-meta {
    justify-content: center;
}

.wd-inv-guide-para {
    font-size: var(--wd-font-size-sm, 0.82rem);
    line-height: 1.7;
    color: var(--wd-text-mid, #555);
    margin: 0;
}

.wd-inv-guide-key .wd-inv-help-list {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
}

.wd-inv-guide-key .wd-inv-help-list li {
    font-size: var(--wd-font-size-xs, 0.72rem);
    line-height: 1.8;
    color: var(--wd-text-mid, #555);
}

/* ============================================================
   LAYOUT B — 5-NIGHT COMPACT STRIP
   ============================================================ */

.wd-inv-night-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    border: 1px solid var(--wd-border, rgba(47,74,54,0.18));
    border-radius: var(--wd-radius-md, 8px);
    margin-bottom: 14px;
    background: var(--wd-bg-card, #fff);
}

/* ── 6 Night Outlook: self-contained card bypassing wd-card cascade ── */
.wd-inv-outlook-wrap {
    background: var(--wd-bg-card, #fff);
    border: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: 0;
    overflow: visible;
    margin-bottom: 6px;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
}

.wd-inv-outlook-hdr {
    font-size: var(--wd-font-size-sm, 0.82rem);
    font-weight: 800;
    color: #1f2f27;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: #d4e8d6;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    padding: 6px var(--wd-space-lg, 22px);
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wd-inv-outlook-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wd-inv-source-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 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;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.wd-inv-source-info__icon {
    display: block;
    line-height: 1;
}

.wd-inv-source-info:hover,
.wd-inv-source-info:focus-visible {
    background: var(--wd-border);
    color: var(--wd-text);
    border-color: var(--wd-text-mid);
    outline: none;
}

.wd-inv-source-info__tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 280px;
    max-width: calc(100vw - var(--wd-space-lg, 22px) * 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-inv-source-info__tip strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text);
}

.wd-inv-source-info:hover .wd-inv-source-info__tip,
.wd-inv-source-info:focus-visible .wd-inv-source-info__tip,
.wd-inv-source-info:focus-within .wd-inv-source-info__tip {
    display: block;
}

.wd-inv-outlook-sub {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(31, 47, 39, 0.68);
    text-align: right;
}

/* Strip sits flush — no margin, no border of its own (wrap clips it) */
.wd-inv-night-strip--inline {
    border: none;
    border-radius: 0;
    margin: 0;
}

/* Fallback for old selector */
.wd-inv-section .wd-inv-night-strip {
    margin-bottom: 0;
}

/* Dynamic time label inside Key Factors title */
.wd-inv-factors-time {
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.88em;
    font-family: var(--wd-mono, monospace);
}

.wd-inv-strip-night {
    padding: 16px 10px 15px;
    text-align: center;
    border-right: 1px solid var(--wd-border, rgba(47,74,54,0.18));
    position: relative;
    background: var(--wd-bg-card, #fff);
    transition: background 0.15s;
}

.wd-inv-strip-night:last-child { border-right: none; }

.wd-inv-strip-night--best { background: #eef6ee; }

.wd-inv-strip-day {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 6px;
}

.wd-inv-strip-pct {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
}

.wd-inv-strip-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.wd-inv-strip-window {
    font-family: var(--wd-mono, monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wd-text-mid, #5a5850);
    line-height: 1.25;
    margin-top: 2px;
}

.wd-inv-strip-bar-wrap {
    width: 18px;
    height: 11px;
    margin: 0 auto;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.wd-inv-strip-bar-fill {
    border-radius: 8px;
    min-height: 2px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-inv-strip-best-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.44rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 1px 4px;
    border-radius: 2px;
}

.wd-inv-strip-night--best {
    box-shadow: inset 0 0 0 2px rgba(46, 125, 181, 0.28);
}

/* Confidence indicator */
.wd-inv-strip-conf {
    font-family: var(--wd-mono, monospace);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--wd-text-light, #908a7e);
    letter-spacing: 0.02em;
    margin-top: 4px;
}

/* Kill the global `.wd-card + .wd-skewt-card { margin-top: 14px }` when inside the maps row */
.wd-inv-maps-row > .wd-skewt-card {
    margin-top: 0;
}

/* Heatmap + Atmospheric Profile side by side — profile gets more width, both stretch to same height */
.wd-inv-maps-row {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 14px;
    align-items: stretch;
}

/* Heatmap section becomes a flex column so the map can fill the full card height */
.wd-inv-maps-row > .wd-inv-explorer-card {
    display: flex;
    flex-direction: column;
}

.wd-inv-maps-row > .wd-inv-explorer-card .wd-inv-heatmap-legend-wrap {
    flex-shrink: 0;
}

/* Best Time card */
.wd-inv-besttime-group {
    margin-bottom: 10px;
}

.wd-inv-besttime-group:last-child {
    margin-bottom: 0;
}

.wd-inv-besttime-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-besttime-label--pos { color: #2d6b3a; }
.wd-inv-besttime-label--neg { color: #8b3a3a; }

.wd-inv-besttime-group .wd-inv-chip {
    display: flex;
    width: fit-content;
    margin: 0 0 var(--wd-space-xs, 6px) 0;
}

.wd-inv-besttime-group .wd-inv-chip:last-child {
    margin-bottom: 0;
}

/* Tier text colours for strip */
.wd-inv-t80 .wd-inv-strip-pct, .wd-inv-t80 .wd-inv-strip-lbl { color: var(--inv-excellent); }
.wd-inv-t60 .wd-inv-strip-pct, .wd-inv-t60 .wd-inv-strip-lbl { color: var(--inv-good); }
.wd-inv-t40 .wd-inv-strip-pct, .wd-inv-t40 .wd-inv-strip-lbl { color: var(--inv-moderate); }
.wd-inv-t20 .wd-inv-strip-pct, .wd-inv-t20 .wd-inv-strip-lbl { color: var(--inv-low); }
.wd-inv-t0 .wd-inv-strip-pct, .wd-inv-t0 .wd-inv-strip-lbl { color: var(--inv-verylow); }
.wd-inv-t-empty .wd-inv-strip-pct, .wd-inv-t-empty .wd-inv-strip-lbl { color: var(--wd-text-light, #908a7e); }


/* ============================================================
   LAYOUT B — SPLIT: SIDEBAR (300px) + MAIN (1fr)
   ============================================================ */

.wd-inv-split {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 14px;
}

.wd-inv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
}

.wd-inv-sidebar .wd-card,
.wd-inv-main .wd-card {
    margin-bottom: 0;
}

.wd-inv-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
}

.wd-inv-sidebar > .wd-card {
    flex: 1;
}

.wd-inv-main > .wd-inv-heatmap-fullwidth {
    flex: 1;
}

.wd-inv-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin: 0 0 14px;
}

.wd-inv-lower-left,
.wd-inv-lower-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.wd-inv-lower-right > .wd-skewt-card {
    flex: 1;
    margin-top: 0;
}

.wd-inv-lower-left > .wd-card,
.wd-inv-lower-right > .wd-card {
    margin-bottom: 0;
}

.wd-inv-freq-lower {
    flex: 1;
}

.wd-inv-atmos-charts-full {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.wd-inv-atmos-charts-full > .wd-card {
    margin-bottom: 0;
}


/* ============================================================
   LAYOUT B — SCORE RINGS (Tonight / Best This Week)
   ============================================================ */

.wd-inv-score-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wd-inv-score-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.wd-inv-score-ring-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--wd-bg-card, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.wd-inv-ring-pct {
    font-family: var(--wd-mono, monospace);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.wd-inv-ring-lbl {
    font-size: 0.46rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.wd-inv-score-detail { flex: 1; min-width: 0; }

.wd-inv-sc-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
    margin-bottom: 3px;
}

.wd-inv-sc-window {
    font-family: var(--wd-mono, monospace);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
}

.wd-inv-sc-sub {
    font-size: 0.62rem;
    color: var(--wd-text-light, #908a7e);
    margin-top: 3px;
    line-height: 1.4;
}


/* ============================================================
   LAYOUT B — SUMMIT CTA (green bar in Best This Week)
   ============================================================ */

.wd-inv-summit-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--wd-green, #425A47);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 14px;
    border-radius: var(--wd-radius-sm, 6px);
}

.wd-inv-summit-cta-icon { font-size: 1rem; flex-shrink: 0; }


/* ============================================================
   LAYOUT B — FACTOR ROWS (horizontal bars in sidebar)
   ============================================================ */

.wd-inv-factor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.wd-inv-factor-row:last-of-type { border-bottom: none; }

.wd-inv-fn {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
    width: 120px;
    flex-shrink: 0;
    line-height: 1.3;
}

.wd-inv-ft {
    flex: 1;
    height: 7px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    overflow: hidden;
    min-width: 30px;
}

.wd-inv-ff {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.wd-inv-fv {
    font-family: var(--wd-mono, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--wd-text-light, #908a7e);
    width: 34px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   LAYOUT B — CLOUD LAYER STATS
   ============================================================ */

.wd-inv-cloud-stats {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-cloud-stats-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wd-text-light, #908a7e);
    margin-bottom: 6px;
}

.wd-inv-cloud-stats-row {
    display: flex;
    gap: 20px;
}

.wd-inv-cloud-dim-lbl {
    font-size: 0.58rem;
    color: var(--wd-text-light, #908a7e);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wd-inv-cloud-dim-val {
    font-family: var(--wd-mono, monospace);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
}


/* ============================================================
   LAYOUT B — DRIVER CHIPS (column layout in sidebar)
   ============================================================ */

.wd-inv-chips-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}


/* ============================================================
   LAYOUT B — ATMOSPHERIC PROFILE KEY + NOTE
   ============================================================ */

.wd-inv-profile-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.wd-inv-pk {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.64rem;
    color: var(--wd-text-light, #908a7e);
}

.wd-inv-pk-sw {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.wd-inv-pk-wind {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.64rem;
    color: var(--wd-text-light, #908a7e);
}

.wd-inv-pk-wind:first-of-type { margin-left: auto; }

.wd-inv-pk-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wd-inv-profile-note {
    margin-top: 10px;
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--wd-text-light, #908a7e);
    padding: 8px 10px;
    background: rgba(0,0,0,0.02);
    border-left: 3px solid var(--inv-excellent, #2E7DB5);
    border-radius: 0 3px 3px 0;
}


/* ============================================================
   LAYOUT B — SLIDER HINT TEXT
   ============================================================ */

.wd-inv-slider-hint {
    font-size: 0.66rem;
    color: var(--wd-text-light, #908a7e);
    white-space: nowrap;
}


/* ============================================================
   LAYOUT B — RARITY BADGE
   ============================================================ */

.wd-inv-rarity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: rgba(46,125,181,0.05);
    border: 1px solid rgba(46,125,181,0.15);
    border-radius: var(--wd-radius-md, 8px);
    margin-bottom: 14px;
}

.wd-inv-rarity-num {
    font-family: var(--wd-mono, monospace);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--inv-excellent, #2E7DB5);
    line-height: 1;
    flex-shrink: 0;
}

.wd-inv-rarity-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wd-text, #1a1a18);
}

.wd-inv-rarity-sub {
    font-size: 0.68rem;
    color: var(--wd-text-light, #908a7e);
    margin-top: 2px;
}


/* ============================================================
   LAYOUT B — BOTTOM 3-COLUMN GRID
   ============================================================ */

.wd-inv-bottom-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.wd-inv-bottom-3 .wd-card {
    margin-bottom: 0;
}

/* Summits card: hide altitude band, just show summit list */
.wd-inv-summits-card .wd-cloud-summits-body { display: none !important; }

/* Dynamic driver pills inside Key Factors */
.wd-inv-besttime-drivers {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wd-border);
}

.wd-inv-driver-pill-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}


/* ============================================================
   LAYOUT B — RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .wd-inv-split {
        grid-template-columns: 1fr;
    }
    .wd-inv-sidebar > .wd-card {
        flex: unset;
    }
    .wd-inv-lower-grid,
    .wd-inv-atmos-charts-full {
        grid-template-columns: 1fr;
    }
    .wd-inv-night-strip {
        grid-template-columns: repeat(3, 1fr);
    }
    .wd-inv-outlook-card .wd-inv-night-strip {
        margin: 10px calc(-1 * var(--wd-card-padding, 16px)) 0;
    }
    .wd-inv-strip-night {
        border-bottom: 1px solid var(--wd-border, rgba(47,74,54,0.18));
    }
    .wd-inv-maps-row {
        grid-template-columns: 1fr;
    }
    .wd-inv-bottom-3 {
        grid-template-columns: 1fr 1fr;
    }
    .wd-inv-pk-wind:first-of-type {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .wd-inv-night-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .wd-inv-bottom-3 {
        grid-template-columns: 1fr;
    }
    .wd-inv-score-ring {
        width: 66px;
        height: 66px;
    }
    .wd-inv-score-ring-inner {
        width: 50px;
        height: 50px;
    }
    .wd-inv-ring-pct { font-size: 0.95rem; }
}


/* ============================================================
   HEATMAP FULL WIDTH
   ============================================================ */

.wd-inv-heatmap-fullwidth {
    display: flex;
    flex-direction: column;
}

.wd-inv-heatmap-fullwidth .wd-inv-heatmap-map {
    flex: 1;
    aspect-ratio: unset;
    min-height: 340px;
}

/* ============================================================
   ANCHOR COVERAGE MAP
   ============================================================ */

.wd-inv-anchor-coverage {
    margin-top: var(--wd-space-lg);
}

.wd-inv-anchor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wd-space-md);
    margin-bottom: var(--wd-space-sm);
}

.wd-inv-anchor-count {
    margin-top: 2px;
    color: var(--wd-text-light);
    font-size: var(--wd-font-size-sm);
    font-weight: 600;
}

.wd-inv-anchor-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
    color: var(--wd-text-light);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
}

.wd-inv-anchor-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wd-inv-anchor-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.75);
}

.wd-inv-anchor-dot--popular { background: #f5d862; }
.wd-inv-anchor-dot--mountain { background: #2E7DB5; }
.wd-inv-anchor-dot--coverage { background: #7a8794; }

.wd-inv-anchor-map {
    width: 100%;
    height: min(62vh, 560px);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, 0.14);
    border-radius: var(--wd-radius-md);
    background: #d8e4d6;
}

.wd-inv-anchor-map .leaflet-container,
.wd-inv-anchor-map.leaflet-container {
    font-family: inherit;
}

.wd-inv-anchor-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--wd-text-light);
    font-size: var(--wd-font-size-sm);
}

@media (max-width: 720px) {
    .wd-inv-anchor-heading {
        display: block;
    }

    .wd-inv-anchor-legend {
        justify-content: flex-start;
        margin-top: var(--wd-space-sm);
    }

    .wd-inv-anchor-map {
        height: 420px;
        min-height: 360px;
    }
}


/* ============================================================
   ATMOSPHERIC DATA: 2-COL ROW (charts left, Skew-T right)
   ============================================================ */

.wd-inv-atmos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.wd-inv-atmos-charts-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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


/* ============================================================
   ATMOSPHERIC DATA TOGGLE (<details>) — kept for legacy
   ============================================================ */

.wd-inv-atmos-details {
    margin-top: 14px;
}

.wd-inv-atmos-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--wd-bg-subtle, #f5f5f0);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    cursor: pointer;
    font-size: var(--wd-font-size-sm, 0.78rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-text-muted);
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.wd-inv-atmos-summary::-webkit-details-marker { display: none; }
.wd-inv-atmos-summary::marker { display: none; }

.wd-inv-atmos-summary:hover {
    background: var(--wd-bg-hover, #eceee8);
    color: var(--wd-text);
}

.wd-inv-atmos-chevron {
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.wd-inv-atmos-details[open] .wd-inv-atmos-chevron {
    transform: rotate(180deg);
}

.wd-inv-atmos-details[open] .wd-inv-atmos-summary {
    border-radius: var(--wd-radius-md) var(--wd-radius-md) 0 0;
    border-bottom-color: transparent;
}

.wd-inv-atmos-charts-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
}

.wd-inv-atmos-chart-container {
    position: relative;
    height: 300px;
}

.wd-inv-atmos-canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .wd-inv-heatmap-fullwidth .wd-inv-heatmap-map {
        min-height: 240px;
    }
    .wd-inv-atmos-chart-container {
        height: 220px;
    }
}


/* ============================================================
   KEY FACTORS INFO BUTTON
   ============================================================ */

.wd-inv-info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 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-weight: 700;
    font-style: normal;
    line-height: 1;
    text-transform: none;
    cursor: help;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-left: auto;
}

.wd-inv-info-btn__icon {
    display: block;
    line-height: 1;
}

.wd-inv-info-btn:hover,
.wd-inv-info-btn:focus-visible {
    background: var(--wd-border);
    color: var(--wd-text);
    border-color: var(--wd-text-mid);
    outline: none;
}

.wd-inv-info-btn__tip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: 280px;
    max-width: calc(100vw - var(--wd-space-lg, 22px) * 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-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: left;
    cursor: default;
    white-space: normal;
}

.wd-inv-info-btn__tip strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text);
}

.wd-inv-info-btn:hover .wd-inv-info-btn__tip,
.wd-inv-info-btn:focus-visible .wd-inv-info-btn__tip,
.wd-inv-info-btn:focus-within .wd-inv-info-btn__tip {
    display: block;
}

/* Factor key list inside the tooltip */
.wd-inv-factors-key {
    margin: 6px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 8px;
    align-items: baseline;
}

.wd-inv-factors-key dt {
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--wd-text);
    white-space: nowrap;
}

.wd-inv-factors-key dd {
    margin: 0;
    font-size: 0.68rem;
    color: var(--wd-text-muted);
}


/* ============================================================
   TWO-UP ROW: Key Drivers + Golden Hour side by side (legacy)
   ============================================================ */

.wd-inv-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-lg, 16px);
}

@media (max-width: 900px) {
    .wd-inv-two-up {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   TOP SPLIT: 66/33 — 6-Night Outlook + Key Drivers
   ============================================================ */

.wd-inv-top-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}

.wd-inv-top-split__main {
    background: #ffffff !important;
}

@media (max-width: 900px) {
    .wd-inv-top-split {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   BOTTOM SPLIT: 50/50 — Golden Hour + Inversion Frequency
   ============================================================ */

.wd-inv-bottom-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .wd-inv-bottom-split {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   COMPACT DATA SOURCES (in top-split side panel)
   ============================================================ */

.wd-inv-sources-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-sources-compact-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wd-text-light, #908a7e);
    margin-right: 2px;
}

.wd-inv-sources-compact-item {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--wd-text-mid, #5a5850);
}

.wd-inv-sources-compact-sep {
    font-size: 0.62rem;
    color: var(--wd-text-light, #908a7e);
}


/* ============================================================
   CLOUD SUMMITS — restore 2-col when standalone (full width)
   ============================================================ */

.wd-inv-cloud-summits-card {
    grid-column: unset;
    grid-row: unset;
}

.wd-inv-cloud-summits-card .wd-cloud-summits-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .wd-inv-cloud-summits-card .wd-cloud-summits-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   HOW TO READ — two-column guide row
   ============================================================ */

.wd-inv-guide-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    margin-top: 0;
}

.wd-inv-guide-col {
    padding: var(--wd-space-lg, 16px) var(--wd-space-xl, 20px) var(--wd-space-xl, 20px);
    display: flex;
    flex-direction: column;
}

.wd-inv-guide-col + .wd-inv-guide-col {
    border-left: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-guide-col-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wd-green, #3d6b4f);
    margin-bottom: var(--wd-space-sm, 8px);
}

.wd-inv-guide-profile-inner {
    display: flex;
    gap: var(--wd-space-lg, 16px);
    align-items: flex-start;
}

.wd-inv-guide-profile-inner .wd-inv-guide-para {
    flex: 1;
}

.wd-inv-guide-key-inline {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: var(--wd-space-lg, 16px);
    border-left: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-guide-key-inline .wd-inv-help-list li {
    line-height: 1.7;
}

.wd-inv-key-swatch {
    display: inline-block;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 2px;
}

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

    .wd-inv-guide-col + .wd-inv-guide-col {
        border-left: none;
        border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    }

    .wd-inv-guide-profile-inner {
        flex-direction: column;
    }

    .wd-inv-guide-key-inline {
        padding-left: 0;
        border-left: none;
        padding-top: var(--wd-space-sm, 8px);
        border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    }
}

/* ============================================================
   SHARED HOURLY SLIDER
   ============================================================ */

.wd-inv-shared-slider {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md, 12px);
    padding: 10px var(--wd-space-md, 12px);
    background: var(--wd-bg-card, #fff);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
    border-radius: var(--wd-radius-md, 8px);
    margin: 0;
}

.wd-inv-slider-label {
    font-size: var(--wd-font-size-sm, 0.82rem);
    font-weight: 600;
    color: var(--wd-text-mid, #666);
    white-space: nowrap;
    min-width: 80px;
}

.wd-inv-slider {
    flex: 1;
    height: 6px;
    cursor: pointer;
    accent-color: var(--wd-green, #5cd88a);
}

.wd-inv-slider-nav-btn {
    background: rgba(0,0,0,0.07);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.12));
    border-radius: var(--wd-radius-sm, 6px);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: var(--wd-text-mid, #5a5850) !important;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
    appearance: none;
}

.wd-inv-slider-nav-btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.wd-inv-slider-prev::before {
    border-right: 7px solid currentColor;
}

.wd-inv-slider-next::before {
    border-left: 7px solid currentColor;
}

.wd-inv-slider-nav-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.13);
    border-color: rgba(0,0,0,0.2);
}

.wd-inv-slider-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}


/* ============================================================
   CLOUD LAYER & SUMMITS — HOURLY (shared — Inversion + Mountain)
   ============================================================ */

.wd-cloud-summits-when {
    font-weight: 500;
    opacity: 0.75;
    margin-left: 6px;
    font-size: 0.88em;
}

.wd-cloud-summits-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed var(--wd-border, rgba(0,0,0,0.12));
    border-radius: 8px;
}

.wd-cloud-summits-jump {
    padding: 5px 12px;
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: 600;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.12));
    border-radius: var(--wd-radius-sm, 6px);
    background: var(--wd-bg-card, #fff);
    color: var(--wd-green, #425A47);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.wd-cloud-summits-jump:hover {
    background: var(--wd-bg-hover, #f5f5f5);
    border-color: rgba(0,0,0,0.2);
}

/* Mountain tab's own slider (separate from inversion's) */
.wd-mtn-cloud-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md, 12px);
    padding: var(--wd-space-sm, 8px) var(--wd-space-md, 12px);
    margin-bottom: var(--wd-space-md, 12px);
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--wd-radius-md, 8px);
    border: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-mtn-cloud-slider-label {
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-text-light, #908a7e);
    white-space: nowrap;
}

.wd-mtn-cloud-slider {
    flex: 1;
    height: 6px;
    cursor: pointer;
    accent-color: var(--wd-green, #425A47);
}

.wd-inv-best-btn {
    padding: 5px 14px;
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.12));
    border-radius: var(--wd-radius-sm, 6px);
    background: rgba(0,0,0,0.07);
    color: var(--wd-text-mid, #666);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.wd-inv-best-btn:hover {
    background: rgba(0,0,0,0.13);
}

.wd-inv-best-btn--active {
    background: var(--wd-green, #5cd88a);
    color: #fff;
    border-color: var(--wd-green, #5cd88a);
}

/* Responsive: stack at tablet */
@media (max-width: 900px) {
    .wd-inv-explorer-panels {
        grid-template-columns: 1fr;
    }

    .wd-inv-explorer-divider {
        display: none;
    }

    .wd-inv-explorer-panel--map {
        padding-right: 0;
    }

    .wd-inv-explorer-panel--profile {
        padding-left: 0;
        border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
        padding-top: var(--wd-space-lg, 16px);
        margin-top: var(--wd-space-lg, 16px);
    }
}