@import url("/wp-content/themes/hello-elementor/style.css");/**
 * WeatherDuck self-hosted fonts.
 * Latin subset only. Replaces Google Fonts CDN.
 *
 * Roboto and Montserrat are variable fonts — one file per family with a
 * weight axis spanning 100-900. Single @font-face per family with a weight
 * range lets the browser render any requested weight from the variable axis.
 */

@font-face{ 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/wp-content/themes/hello-elementor-child/fonts/Roboto-latin-variable.woff2') format('woff2');
 }

@font-face{ 
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/hello-elementor-child/fonts/RobotoSlab-latin-400.woff2') format('woff2');
 }

@font-face{ 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/themes/hello-elementor-child/fonts/Montserrat-latin-variable.woff2') format('woff2');
 }
/* Location browsing shared by the forecast directory, forecasts and area guides. */
.wd-location-links {
	margin-block: var(--wd-space-2xl);
	padding: var(--wd-card-padding);
	border: 1px solid var(--wd-border);
	border-radius: 0;
	background: var(--wd-bg-card);
	color: var(--wd-text-primary);
	min-width: 0;
}

.wd-location-links h2 {
	margin: 0 0 var(--wd-space-xs);
	font-size: var(--wd-font-size-2xl);
}

.wd-location-links .wd-location-links__intro {
	margin: 0 0 var(--wd-space-lg);
	color: var(--wd-text-secondary);
	font-size: var(--wd-font-size-md);
}

.wd-location-links__jump {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wd-space-md);
	margin-bottom: var(--wd-space-2xl);
}

.wd-location-links__country + .wd-location-links__country {
	margin-top: var(--wd-space-3xl);
}

.wd-location-links__country > h3 {
	margin: 0 0 var(--wd-space-lg);
	font-size: var(--wd-font-size-xl);
}

.wd-location-links__regions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wd-space-2xl);
}

.wd-location-links__region {
	min-width: 0;
	border-top: 1px solid var(--wd-border);
	padding-top: var(--wd-space-lg);
}

.wd-location-links__region h3,
.wd-location-links__region h4 {
	margin: 0 0 var(--wd-space-sm);
	font-size: var(--wd-font-size-lg);
}

.wd-location-links .wd-location-links__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wd-space-2xl);
	row-gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wd-border);
}

.wd-location-links__list li {
	min-width: 0;
	margin: 0;
	border-bottom: 1px solid var(--wd-border);
}

.wd-location-links a {
	color: var(--wd-green);
	text-decoration: underline;
	text-underline-offset: var(--wd-space-xs);
	overflow-wrap: anywhere;
}

.wd-location-links__jump a {
	display: block;
	padding-block: var(--wd-space-sm);
	font-size: var(--wd-font-size-md);
}

/* Band rows: bold name left, green chevron right, hairline between. */
.wd-location-links__list a,
.wd-location-links__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wd-space-md);
	min-height: var(--wd-control-h);
	padding: var(--wd-space-sm) 0;
	color: var(--wd-text-primary);
	font-size: var(--wd-font-size-md);
	font-weight: 700;
	text-decoration: none;
}

.wd-location-links__list a::after,
.wd-location-links__all::after {
	content: '';
	flex: none;
	width: .55em;
	height: .55em;
	margin-right: .3em;
	border-right: 2px solid var(--wd-green);
	border-bottom: 2px solid var(--wd-green);
	transform: rotate(-45deg);
}

.wd-location-links a:hover {
	color: var(--wd-green-hover);
}

.wd-location-links a:focus-visible {
	outline: 2px solid var(--wd-green);
	outline-offset: var(--wd-space-xs);
}

/* Browse other: the last row of the left column so its chevron lines up. */
.wd-location-links__all {
	width: calc((100% - var(--wd-space-2xl)) / 2);
	margin: 0;
	border-bottom: 1px solid var(--wd-border);
	color: var(--wd-green);
}

.wd-location-links [id],
.wd-location-links[id] {
	scroll-margin-top: calc(var(--wd-space-3xl) * 3);
}

@media (max-width: 768px) {
	.wd-location-links__regions {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.wd-location-links {
		padding: var(--wd-space-lg);
	}
	.wd-location-links .wd-location-links__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.wd-location-links__all {
		width: auto;
	}
}

/* === Forecast entrance: approved country and area chooser === */
.wd-dir { margin: 0; color: var(--wd-text-primary); min-width: 0; }
.wd-dir__head { margin-bottom: var(--wd-space-xl); }
.wd-dir__head h2 { margin: 0; font-size: var(--wd-font-size-2xl); font-weight: 650; line-height: 1.3; letter-spacing: var(--wd-mkt-h2-tracking); }
.wd-dir__intro, .wd-dir__coverage { margin: var(--wd-space-sm) 0 0; max-width: 80ch; font-size: var(--wd-font-size-md); line-height: 1.65; color: var(--wd-text-secondary); }
.wd-dir__coverage { font-size: var(--wd-font-size-sm); }
.wd-dir__jump { display: flex; gap: var(--wd-space-2xl); border-bottom: 1px solid var(--wd-border-strong); }
.wd-dir__jump a { padding: var(--wd-space-md) 0; min-height: var(--wd-control-h); border-bottom: var(--wd-page-header-focus-width) solid transparent; font-size: var(--wd-font-size-md); color: var(--wd-text-secondary); }
.wd-dir__jump a[aria-selected="true"] { color: var(--wd-green); font-weight: 700; border-bottom-color: var(--wd-green); }
.wd-dir__country-title { font-size: var(--wd-font-size-lg); margin-top: var(--wd-space-xl); }
.wd-dir--enhanced .wd-dir__country-title { display: none; }
.wd-dir__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wd-space-2xl); align-items: start; }
.wd-dir__area { border-bottom: 1px solid var(--wd-border); scroll-margin-top: var(--wd-space-xl); }
.wd-dir__area summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-lg); min-height: var(--wd-control-h); padding: var(--wd-space-md) var(--wd-space-sm); list-style: none; }
.wd-dir summary { list-style: none; }
.wd-dir summary::-webkit-details-marker { display: none; }
.wd-dir__area summary h3 { font-size: var(--wd-font-size-md); font-weight: 550; line-height: 1.35; }
.wd-dir__area summary:hover { background: var(--wd-bg-subtle); }
.wd-dir__chevron { width: var(--wd-space-lg); height: var(--wd-space-lg); flex: none; fill: none; stroke: var(--wd-green); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.wd-dir__area[open] > summary > .wd-dir__chevron { transform: rotate(90deg); }
.wd-dir__area[open] { background: var(--wd-bg-subtle); }
.wd-dir__area[open] summary h3 { color: var(--wd-green); font-weight: 700; }
.wd-dir__area-body { padding: 0 var(--wd-space-sm) var(--wd-space-md); }
.wd-dir__place-group { display: grid; grid-template-columns: calc(var(--wd-space-3xl) * 3) minmax(0, 1fr); align-items: start; gap: var(--wd-space-md); }
.wd-dir__place-group + .wd-dir__place-group { margin-top: var(--wd-space-sm); }
.wd-dir__place-group h4 { font-size: var(--wd-font-size-xs); font-weight: 500; line-height: 1.4; color: var(--wd-text-secondary); padding-top: var(--wd-space-sm); }
.wd-dir__flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--wd-space-sm); }
.wd-dir__place-group li { max-width: 100%; }
.wd-dir__place-group a { display: flex; align-items: center; min-height: calc(var(--wd-control-h) - var(--wd-space-md)); padding: var(--wd-space-xs); color: var(--wd-green); font-size: var(--wd-font-size-md); line-height: 1.35; text-decoration: underline; text-decoration-color: var(--wd-border-strong); text-underline-offset: var(--wd-space-xs); overflow-wrap: anywhere; }
.wd-dir__place-group a:hover { text-decoration-color: var(--wd-green); background: var(--wd-green-light); }
.wd-dir__foot { margin: var(--wd-space-md) 0; color: var(--wd-text-secondary); font-size: var(--wd-font-size-sm); text-align: center; line-height: 1.65; }
.wd-dir__foot a { color: var(--wd-green); text-decoration: underline; text-underline-offset: var(--wd-space-xs); }
.wd-dir__jump a { display: block; text-decoration: none; line-height: 1.5; }
.wd-dir__area summary { cursor: pointer; }
.wd-dir__area summary h3, .wd-dir__place-group h4 { margin: 0; }
.wd-dir__flow { list-style: none; margin: 0; padding: 0; }
.wd-dir__flow li { margin: 0; }
.wd-dir__country[hidden] { display: none; }
.wd-dir a:focus-visible, .wd-dir summary:focus-visible { outline: var(--wd-page-header-focus-width) solid var(--wd-green); outline-offset: var(--wd-space-xs); }
.wd-dir[id], .wd-dir [id] { scroll-margin-top: calc(var(--wd-space-3xl) * 3); }
@media (max-width: 768px) {
    .wd-dir__areas { grid-template-columns: minmax(0, 1fr); }
    .wd-dir__place-group { grid-template-columns: 1fr; gap: 0; }
    .wd-dir__place-group h4 { padding-top: var(--wd-space-xs); }
}
@media (max-width: 480px) {
    .wd-dir__head h2 { font-size: var(--wd-font-size-xl); }
    .wd-dir__jump { justify-content: center; gap: var(--wd-space-3xl); }
    .wd-dir__jump a { font-size: var(--wd-font-size-sm); }
}
@media print{.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}
}/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.5.1
	Stable tag: 3.5.1
	Requires at least: 6.0
	Tested up to: 7.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Child theme for Hello Elementor
Author: Your Name
Template: hello-elementor
Version: 1.0.0
*/

/* Import parent theme styles */


/* Site header: white background + contrasting menu toggle */
#site-header,
.site-header,
.elementor-location-header,
.elementor-location-header .elementor-section {
    background-color: #ffffff !important;
}

/* Keep mobile/menu toggle high contrast on white header */
.site-navigation-toggle-holder .site-navigation-toggle,
.elementor-menu-toggle {
    background-color: #4A6741 !important;
    color: #ffffff !important;
    border-color: #4A6741 !important;
}

.site-navigation-toggle-holder .site-navigation-toggle-icon:before,
.site-navigation-toggle-holder .site-navigation-toggle-icon:after {
    background-color: #ffffff !important;
}
/* WeatherDuck unified tabs CSS 10-base.css: 01-core.css.
   Regrouped from 01-core.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * WeatherDuck Unified — Core Styles
 * Version: 1.0
 * ========================================================== */

/* Tokens: all --wd-* custom properties live in mu-plugins/weatherduck/assets/css/design-tokens.css
   (the legacy block that sat here until 2026-09-14 was moved there; its duplicated entries were dead). */

/* ─── 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;
    --wd-font: var(--wd-card-font);
    --wd-mono: var(--wd-card-num-font);
}

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

/* Elementor CSS is dequeued on this template (wd-perf-dequeue.php), so the
   hidden Theme Builder header template needs hiding here instead. */
.page-template-page-forecast-unified .elementor-location-header {
    display: none !important;
}

/* 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: var(--wd-font-size-xs) !important;
    opacity: 1;
    background: var(--wd-bg-card) !important;
    color: var(--wd-text-secondary);
}
.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__meta .wd-ui-icon--daylight {
    width: var(--wd-ui-icon-size, 18px);
    height: 1em;
    overflow: visible;
    vertical-align: -0.12em;
}
.wd-location-at-glance__meta .wd-ui-icon--daylight .wd-ui-icon__img {
    width: var(--wd-ui-icon-size, 18px);
    height: var(--wd-ui-icon-size, 18px);
    max-width: none;
    max-height: none;
}
.wd-location-at-glance__updated {
    font-size: 0.78rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.54);
}
.wd-location-at-glance__source {
    color: var(--wd-text-on-green);
    font-size: var(--wd-font-size-xs);
    line-height: 1.4;
}
.wd-location-at-glance__source a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: var(--wd-space-xs);
}

/* Favourites: the star sits on the heading line and fills amber once saved.
   The hover and focus copies of the rule exist to beat the parent theme's
   button reset; the button stays hidden until favourites.js reveals it. */
.wd-page .wd-fav-toggle,
.wd-page .wd-fav-toggle:hover,
.wd-page .wd-fav-toggle:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wd-page-header-control-h);
    height: var(--wd-page-header-control-h);
    margin: calc(var(--wd-space-md) * -1) calc(var(--wd-space-sm) * -1) calc(var(--wd-space-md) * -1) 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--wd-text-on-dark-muted);
    font-size: inherit;
    vertical-align: middle;
    cursor: pointer;
}
.wd-page .wd-fav-toggle[hidden] {
    display: none;
}
.wd-page .wd-fav-toggle[aria-pressed="true"] {
    color: var(--wd-amber);
}
.wd-page .wd-fav-toggle .wd-fav-star {
    width: 0.8em;
    height: 0.8em;
}
.wd-page .wd-fav-toggle[aria-pressed="true"] .wd-fav-star path {
    fill: currentColor;
}
.wd-page .wd-fav-toggle:focus-visible {
    outline: var(--wd-page-header-focus-width) solid var(--wd-text-on-green);
    outline-offset: calc(var(--wd-space-xs) * -1);
}
.wd-page .wd-fav-note {
    grid-column: 1 / -1;
    margin: var(--wd-space-xs) 0 0;
    font-size: var(--wd-font-size-xs);
    line-height: 1.35;
    color: var(--wd-text-on-dark-muted);
}

/* 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: 46px;
    height: 46px;
    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 {
    max-width: 100%;
    padding: var(--wd-space-xs);
    font-size: var(--wd-font-size-xs) !important;
    line-height: 1.2;
    white-space: normal;
    opacity: 1;
    background: var(--wd-bg-card) !important;
    color: var(--wd-text-secondary);
    text-align: right;
}
.wd-now__map .leaflet-control-attribution a {
    color: var(--wd-green-hover);
}

/* 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;
    --wd-content-pad-bottom: calc(var(--wd-space-3xl) + var(--wd-space-sm));
    max-width: calc(var(--wd-max) + var(--wd-content-pad-x) + var(--wd-content-pad-x));
    margin: 0 auto;
    padding: var(--wd-space-lg) var(--wd-content-pad-x) var(--wd-content-pad-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-lg);
}


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

.wd-tab-panel--active {
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-lg);
}

/* 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;
}

/* WeatherDuck unified tabs CSS 20-safety.css: 02-safety.css.
   Regrouped from 02-safety.css on 2026-09-14; parts keep their internal order. */
/* --- OUTDOOR SAFETY + DATA SOURCES (the /safety-and-data/ page only) ---
   Flat theme, 15 Sep 2026: no shadows, no rounded corners, no stripe and
   no rules inside the sections. The notice sits on the light green tint
   with the warning icon inline in its title; the sources are open, a
   heading block over a wide two column grid. Rules that fight the element
   typography in wd-article.css carry the .wd-safety-page prefix so they
   win on specificity. */
.wd-safety-notice {
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--wd-green-bg);
    color: var(--wd-text-primary);
}

.wd-safety-notice--full {
    padding: var(--wd-space-xl);
}

.wd-safety-notice__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--wd-amber);
    line-height: 1;
}

.wd-safety-notice__icon .wd-ui-icon,
.wd-safety-notice__icon .wd-ui-icon__img {
    display: block;
    width: var(--wd-ui-icon-size);
    height: var(--wd-ui-icon-size);
}

.wd-safety-notice__content {
    min-width: 0;
}

.wd-safety-page .wd-safety-notice__title {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
    margin: 0 0 var(--wd-space-md);
    padding-top: 0;
    border-top: 0;
    color: var(--wd-chrome);
    font-size: var(--wd-font-size-xl);
    font-weight: 800;
    line-height: 1.3;
}

.wd-safety-page .wd-safety-notice--full p {
    margin: 0 0 var(--wd-space-xl);
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-md);
    line-height: 1.6;
}

.wd-safety-notice--full a,
.wd-data-sources a,
.wd-rainfall-attribution a {
    color: var(--wd-green);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--wd-space-xs);
}

.wd-safety-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-space-sm) var(--wd-space-xl);
    margin-top: var(--wd-space-lg);
}

.wd-safety-notice__actions a {
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    text-decoration: none;
}

.wd-safety-notice__actions a:hover,
.wd-safety-notice__actions a:focus-visible {
    text-decoration: underline;
}

.wd-safety-notice__actions .wd-feedback-button {
    color: var(--wd-text-muted);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.wd-safety-notice__actions .wd-feedback-button:hover,
.wd-safety-notice__actions .wd-feedback-button:focus {
    color: var(--wd-green);
}

.wd-safety-notice__actions .wd-feedback-button:focus-visible {
    outline: none;
    box-shadow: var(--wd-focus-ring);
}

.wd-data-sources {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.wd-safety-notice + .wd-data-sources {
    margin-top: var(--wd-space-3xl);
}

.wd-data-sources__header {
    margin-bottom: var(--wd-space-2xl);
}

.wd-safety-page .wd-data-sources__eyebrow {
    margin: 0 0 var(--wd-space-xs);
    color: var(--wd-green);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.wd-safety-page .wd-data-sources__header h2 {
    margin: 0 0 var(--wd-space-sm);
    padding-top: 0;
    border-top: 0;
    color: var(--wd-chrome);
    font-size: var(--wd-font-size-xl);
    font-weight: 800;
    line-height: 1.2;
}

.wd-safety-page .wd-data-sources__header > p {
    max-width: 68ch;
    margin: var(--wd-space-xs) 0 0;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-md);
    line-height: 1.5;
}

.wd-data-sources__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wd-space-2xl) var(--wd-space-3xl);
}

.wd-safety-page .wd-data-sources__group h3 {
    margin: 0 0 var(--wd-space-sm);
    color: var(--wd-chrome);
    font-size: var(--wd-font-size-lg);
    font-weight: 700;
    line-height: 1.3;
}

.wd-safety-page .wd-data-sources__group p {
    margin: 0;
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-sm);
    line-height: 1.6;
}

.wd-safety-page .wd-data-sources__group p + p {
    margin-top: var(--wd-space-sm);
}

.wd-rainfall-attribution {
    margin: 0;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    line-height: 1.5;
}

/* Reading block spacing under the page head. */
.wd-safety-page .wd-article {
    margin-top: var(--wd-space-2xl);
    padding-bottom: var(--wd-space-3xl);
}

@media (max-width: 768px) {
    .wd-safety-notice--full {
        padding: var(--wd-space-lg);
    }

    .wd-safety-notice__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .wd-safety-notice + .wd-data-sources {
        margin-top: var(--wd-space-2xl);
    }

    .wd-data-sources__grid {
        grid-template-columns: 1fr;
        gap: var(--wd-space-xl);
    }
}

/* --- Safety + credits strip (bottom of the tabs page, every tab) ---
   Two stacked blocks, no card. Top: dark green band, warning sentence
   left, link pair right, white text. Bottom: white foot with the credits
   as an inline list with trailing dot separators, so a wrapped line never
   starts with a dot. Night colourway for the foot lives with the
   stargazing rules (body.wd-night-tab); the band stays green. */
.wd-safety-strip {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wd-text-primary);
    line-height: 1.5;
}

.wd-safety-strip__safety {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md) var(--wd-space-2xl);
    padding: var(--wd-space-lg) var(--wd-card-padding);
    background: var(--wd-chrome);
    color: var(--wd-text-on-green);
}

.wd-safety-strip__text {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: var(--wd-font-size-md);
}

.wd-safety-strip__text strong {
    color: inherit;
    font-weight: 700;
}

.wd-safety-strip__icon {
    display: inline-flex;
    margin-right: var(--wd-space-md);
    vertical-align: middle;
}

.wd-safety-strip__icon .wd-ui-icon,
.wd-safety-strip__icon .wd-ui-icon__img {
    display: block;
    width: var(--wd-ui-icon-size);
    height: var(--wd-ui-icon-size);
}

.wd-safety-strip__links {
    display: flex;
    flex: 0 0 auto;
    gap: var(--wd-space-xl);
}

.wd-safety-strip__links a,
.wd-safety-strip__links a:visited,
.wd-safety-strip__links a:focus {
    color: var(--wd-text-on-green);
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--wd-space-xs);
    white-space: nowrap;
}

.wd-safety-strip__links a:hover {
    color: var(--wd-text-on-green);
    text-decoration-thickness: 2px;
}

.wd-safety-strip__credits {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wd-space-xs) var(--wd-space-sm);
    margin: 0;
    padding: var(--wd-space-md) var(--wd-card-padding);
    border: 1px solid var(--wd-border);
    border-top: 0;
    background: var(--wd-bg-card);
    list-style: none;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    line-height: 1.7;
}

.wd-safety-strip__credits li {
    margin: 0;
    padding: 0;
}

/* Dots between the credits; the licences link runs on in green at the end. */
.wd-safety-strip__credits li:not(:last-child)::after {
    content: "\00b7";
    margin-left: var(--wd-space-sm);
}

.wd-safety-strip__credits li:last-child a {
    color: var(--wd-green);
    font-weight: 700;
}

.wd-safety-strip__credits a,
.wd-safety-strip__credits a:visited {
    color: var(--wd-text-secondary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--wd-space-xs);
}

.wd-safety-strip__credits a:hover,
.wd-safety-strip__credits li:last-child a:hover {
    color: var(--wd-green-hover);
}

/* Tablet and phone: links drop beneath the sentence, flush left */
@media (max-width: 768px) {
    .wd-safety-strip__safety {
        flex-wrap: wrap;
        padding: var(--wd-card-padding-mobile);
    }

    .wd-safety-strip__text,
    .wd-safety-strip__links {
        flex-basis: 100%;
    }

    .wd-safety-strip__credits {
        padding-inline: var(--wd-card-padding-mobile);
    }
}

/* Phone: credits stack one per line */
@media (max-width: 480px) {
    .wd-safety-strip__credits {
        flex-direction: column;
        gap: var(--wd-space-xs);
    }

    .wd-safety-strip__credits li:not(:last-child)::after {
        display: none;
    }
}

/* --- Standalone safety & data page (/safety-and-data/) --- */
.wd-static-page__intro {
    padding: var(--wd-space-xl) 0 var(--wd-space-xs);
}

.wd-static-page__intro h1 {
    margin: 0 0 var(--wd-space-xs);
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-2xl);
    font-weight: 800;
    line-height: 1.2;
}

.wd-static-page__intro p {
    margin: 0;
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-md);
    line-height: 1.5;
}

/* 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 + rounded corners across all
   unified tabs. One radius token so the title bands can match the card. */
body.page-template-page-forecast-unified {
    --wd-uc-card-radius: var(--wd-radius-md);
}
@media (max-width: 768px) {
    body.page-template-page-forecast-unified {
        --wd-uc-card-radius: var(--wd-radius-sm);
    }
}
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,
body.page-template-page-forecast-unified #tab-grounds .wd-card {
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    border-color: var(--wd-border);
    border-radius: var(--wd-uc-card-radius);
}
/* Shared green title band. Top corners follow the card radius so the band
   sits inside the rounded frame instead of poking out of it. */
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: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
    background: var(--wd-green-light);
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
    color: #1f2f27;
    height: var(--wd-card-header-height);
    min-height: var(--wd-card-header-height);
    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-gear-padding)) calc(-1 * var(--wd-gear-padding)) var(--wd-space-md);
    padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
    background: var(--wd-green-light);
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
    height: var(--wd-card-header-height);
    min-height: var(--wd-card-header-height);
    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: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
    background: var(--wd-green-light);
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
    height: var(--wd-card-header-height);
    min-height: var(--wd-card-header-height);
    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);
}


/* WeatherDuck unified tabs CSS 30-forecast-a-grids-week-bestwindow.css: 03-summary-forecast-a.css.
   Regrouped from 03-summary-forecast-a.css on 2026-09-14; parts keep their internal order. */
/* ─── 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;
    /* without this, cells refuse to shrink below the text width on narrow
       phones and the labels drift right of their bars by the end of the row */
    min-width: 0;
    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 ─── */
body.page-template-page-forecast-unified #tab-forecast {
    --wd-fc-selected-border: color-mix(in srgb, var(--wd-green) 38%, transparent);
    --wd-fc-selected-fill: var(--wd-brand-light);
}

.wd-fc-day-tabs {
    display: flex;
    gap: 2px;
    /* padding-left is set in JS to match the fixed label column width */
    padding-left: 113px;
    /* Keep the selected join inside the horizontal scroll area. */
    padding-bottom: calc(var(--wd-space-xs) / 4);
    margin-bottom: calc(var(--wd-space-xs) / -4);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 100;
}
.wd-fc-day-tab {
    flex: 0 0 auto;
    padding: 8px 14px 10px;
    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: 1px solid transparent;
    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: row;
    align-items: center;
    gap: 8px;
    line-height: 1.15;
    white-space: nowrap;
    position: relative;
    z-index: 101;
}
.wd-fc-day-tab__icon img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.wd-fc-day-tab__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.wd-fc-day-tab__temp,
.wd-fc-day-tab__pop {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.wd-fc-day-tab__temp {
    font-weight: 700;
}
.wd-fc-day-tab__lo {
    color: var(--wd-text-muted);
    font-weight: 600;
}
.wd-fc-day-tab__pop {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--wd-blue);
    font-weight: 600;
}
.wd-fc-day-tab__pop .wd-ui-icon {
    opacity: 0.85;
}
.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-fc-selected-fill) !important;
    color: var(--wd-brand-dark) !important;
    font-weight: 800;
    border-color: var(--wd-fc-selected-border);
    border-bottom-color: transparent;
    z-index: 110;
    outline: none;
    box-shadow: none;
}
/* Join the selected tab to the table: cover the card outline row under it and
   carry the tab's side borders down to meet that outline at the corners. */
.wd-fc-day-tab--active::after {
    content: '';
    position: absolute;
    left: -1px;   /* matches the 1px tab border so the side lines continue */
    right: -1px;
    bottom: calc(var(--wd-space-xs) / -2);
    height: calc(var(--wd-space-xs) / 2);
    background: var(--wd-fc-selected-fill);
    border-left: 1px solid var(--wd-fc-selected-border);
    border-right: 1px solid var(--wd-fc-selected-border);
    pointer-events: 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-fc-selected-fill);
    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.)
   Cancel the panel gap here; the desktop tabs use the table border as their
   shared baseline, while mobile retains a one-pixel overlap. */
.wd-card--forecast-tabbed {
    margin-top: calc(-1 * var(--wd-space-lg)) !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: 220px;
    max-width: calc(100vw - var(--wd-space-lg) * 2);
    padding: var(--wd-space-sm);
    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.4;
    text-align: left;
    cursor: default;
    white-space: normal;
}
.wd-bw-info__tip strong {
    display: block;
    margin-bottom: 2px;
    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: var(--wd-green-light);
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
}
.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;
}

/* WeatherDuck unified tabs CSS 31-forecast-b-tomorrow-gear-detail.css: 04-summary-gear.css.
   Regrouped from 04-summary-gear.css on 2026-09-14; parts keep their internal order. */
/* ─── 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 {
    /* Same 16px inner padding as every other card on the tab. */
    --wd-gear-padding: var(--wd-space-lg);
    padding: var(--wd-gear-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 .wd-gear__day-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--wd-control-h) - var(--wd-space-md));
    border: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
    border-radius: var(--wd-radius-sm);
    padding: 6px 12px;
    appearance: none;
    box-shadow: none;
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    color: var(--wd-text-secondary);
    cursor: pointer;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.wd-gear .wd-gear__day-btn:hover {
    background: var(--wd-bg-card);
    color: var(--wd-text-primary);
}
.wd-gear .wd-gear__day-btn:focus,
.wd-gear .wd-gear__day-btn:active {
    outline: 0;
    box-shadow: none;
}
.wd-gear .wd-gear__day-btn:focus-visible {
    box-shadow: var(--wd-focus-ring);
}
.wd-gear .wd-gear__day-btn--active,
.wd-gear .wd-gear__day-btn--active:hover,
.wd-gear .wd-gear__day-btn--active:focus,
.wd-gear .wd-gear__day-btn--active:active {
    background: var(--wd-green);
    color: var(--wd-text-on-green);
    border-color: var(--wd-green);
}
/* 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);
}


/* WeatherDuck unified tabs CSS 32-forecast-c-tables-scores-customiser.css: 05-tables-scores.css.
   Regrouped from 05-tables-scores.css on 2026-09-14; parts keep their internal order. */
/* ─── 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-card--forecast-tabbed {
    position: relative;
    box-shadow: none;
    /* The ::after outline is the top edge; the faint card border above it
       showed as a hairline gap under the day tabs. Mobile already drops it. */
    border-top: 0 !important;
}

.wd-card--forecast.wd-card--forecast-tabbed::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid var(--wd-fc-selected-border);
    border-radius: inherit;
}

.wd-card--forecast.wd-card--forecast-tabbed.wd-card--forecast-labels-compact::after {
    border-left-color: transparent;
}

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

.wd-card--forecast .wd-fc-split thead tr:first-child td {
    border-bottom-color: transparent !important;
}

/* 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: green = comfy zone (no penalty),
   soft red = outside the range (hours there lose points) */
.wd-customiser-dual-range::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--wd-score-bad, #ffb3b3);
    border-radius: 3px;
    z-index: 0;
}

.wd-customiser-track-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--wd-score-good-strong, #5cd88a);
    opacity: 0.8;
    border-radius: 3px;
    z-index: 1;
    pointer-events: none;
}

.wd-customiser-single-range input[type="range"] {
    pointer-events: auto;
}

.wd-customiser-var[data-var="sky"] .wd-customiser-vals {
    white-space: normal;
    text-align: right;
}

/* 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;
    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 ─── */
/* All footer styles live in mu-plugins site-footer.css + 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 {
        /* Matches the 16px the title bands pull out by, so bands stop
           overhanging the card border by 1px on phones. */
        padding: var(--wd-card-padding-mobile);
    }

    .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;
    }
}


/* WeatherDuck unified tabs CSS 40-grounds-a-rainx.css: 06-grounds.css.
   Regrouped from 06-grounds.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * GROUNDS TAB — RainX Inline Styles
 * Layout: gauge dossier (identity, totals, history chart) on
 * the left, station-explorer map on the right. Search box and
 * colour key float on the Leaflet map (z-index above Leaflet's
 * controls, which top out at 1000).
 * ========================================================== */

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

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

/* Two-column layout: dossier left, map right */
.wd-gauge-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--wd-space-xl);
    align-items: start;
}

.wd-gauge-dossier,
.wd-gauge-map-col {
    min-width: 0;
}

/* Selected gauge identity */
.wd-gauge-id__kicker {
    margin: 0 0 var(--wd-space-xs);
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
}

.wd-gauge-id__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wd-space-sm);
    margin: 0;
    font-size: var(--wd-font-size-xl);
    line-height: 1.2;
}

.wd-ref-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--wd-space-sm);
    border: 1px solid var(--wd-border-strong);
    border-radius: var(--wd-radius-pill);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* Health chip — coloured via data-health set by rainx-map.js */
.wd-gauge-status {
    display: inline-flex;
    align-items: center;
    gap: var(--wd-space-xs);
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wd-gauge-status::before {
    content: '';
    width: var(--wd-space-sm);
    height: var(--wd-space-sm);
    border-radius: var(--wd-radius-pill);
    background: currentColor;
}

.wd-gauge-status[data-health="active"]  { color: var(--wd-success); }
.wd-gauge-status[data-health="delayed"] { color: var(--wd-warning); }
.wd-gauge-status[data-health="offline"] { color: var(--wd-error); }

/* Rain totals — typographic rows with hairlines, no boxes */
.wd-rainfigs {
    display: grid;
    margin: var(--wd-space-lg) 0;
}

.wd-rainfig {
    min-width: 0;
    padding: var(--wd-space-md) 0;
}

.wd-rainfig + .wd-rainfig {
    border-top: 1px solid var(--wd-border);
}

.wd-rainfig__label {
    display: block;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
}

.wd-rainfig__value {
    display: block;
    margin-top: var(--wd-space-xs);
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.wd-rainfig__value--time {
    font-size: var(--wd-font-size-lg);
}

/* History chart */
.wd-gauge-chart__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--wd-space-md);
    margin-bottom: var(--wd-space-sm);
}

.wd-gauge-chart__head h3 {
    margin: 0;
    font-size: var(--wd-font-size-md);
}

.wd-gauge-chart__head span {
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
}

.wd-gauge-chartwrap {
    height: 260px;
}

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

/* Legend chips — swatches mirror the live chart + map colours */
.wd-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wd-space-xs) var(--wd-space-lg);
    margin-top: var(--wd-space-sm);
}

.wd-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--wd-space-xs);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
}

.wd-legend__swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.wd-legend__swatch--rain {
    background: rgba(54, 162, 235, 0.8); /* rainx-chart.js bar colour */
}

.wd-legend__swatch--now {
    width: 2px;
    height: 12px;
    border-radius: 0;
    background: #e74c3c; /* rainx-chart.js now-line colour */
}

.wd-legend__swatch--checkin {
    width: 2px;
    height: 12px;
    border-radius: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0 2px, /* rainx-chart.js check-in colour */
        transparent 2px 5px
    );
}

/* 10px dots mirror the live .wd-rainx-pin markers */
.wd-legend__swatch--dot {
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--wd-radius-pill);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Pin colours from rainx-map.js healthColor() */
.wd-legend__swatch--dry     { background: #2ecc71; }
.wd-legend__swatch--wet     { background: #3498db; }
.wd-legend__swatch--delayed { background: #e74c3c; }

/* Meta footer */
.wd-gauge-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wd-space-xs) var(--wd-space-sm);
    margin-top: var(--wd-space-lg);
    padding-top: var(--wd-space-md);
    border-top: 1px solid var(--wd-border);
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
}

.wd-gauge-foot b {
    color: var(--wd-text-secondary);
    font-weight: 700;
}

.wd-gauge-foot__sep {
    color: var(--wd-border-strong);
}

/* Map column */
.wd-gauge-map-wrap {
    position: relative;
}

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

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

/* Floating search — sits above Leaflet controls */
.wd-gauge-map-search {
    position: absolute;
    z-index: 1100;
    top: var(--wd-space-sm);
    right: var(--wd-space-sm);
    left: 56px; /* clear of Leaflet's top-left zoom control */
    display: flex;
    gap: var(--wd-space-xs);
    max-width: 26rem;
    margin-left: auto;
    padding: var(--wd-space-xs);
    border: 1px solid var(--wd-border-strong);
    border-radius: var(--wd-radius-sm);
    background: color-mix(in srgb, var(--wd-bg-card) 94%, transparent);
    box-shadow: var(--wd-shadow-md);
}

.wd-gauge-map-search input {
    flex: 1;
    min-width: 0;
    min-height: calc(var(--wd-control-h) - var(--wd-space-sm));
    padding: var(--wd-space-xs) var(--wd-space-sm);
    border: 0;
    background: transparent;
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-sm);
    font-family: var(--wd-font);
    outline: none;
}

.wd-gauge-map-search input::placeholder {
    color: var(--wd-text-muted);
}

.wd-gauge-map-search button {
    min-height: calc(var(--wd-control-h) - var(--wd-space-sm));
    padding: var(--wd-space-xs) var(--wd-space-md);
    border: 0;
    border-radius: calc(var(--wd-radius-sm) - 2px);
    background: var(--wd-bg-subtle);
    color: var(--wd-text-primary);
    cursor: pointer;
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    font-family: var(--wd-font);
    white-space: nowrap;
}

.wd-gauge-map-search button:hover {
    background: var(--wd-cream);
}

.wd-gauge-map-search button.is-primary {
    background: var(--wd-green);
    color: var(--wd-text-on-green);
}

.wd-gauge-map-search button.is-primary:hover {
    background: var(--wd-green-hover);
}

/* Floating colour key — kept clear of Leaflet's attribution strip */
.wd-gauge-map-key {
    position: absolute;
    z-index: 1100;
    bottom: calc(var(--wd-space-sm) + var(--wd-space-lg));
    left: var(--wd-space-sm);
    margin-top: 0;
    padding: var(--wd-space-xs) var(--wd-space-md);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-pill);
    background: color-mix(in srgb, var(--wd-bg-card) 92%, transparent);
    box-shadow: var(--wd-shadow-sm);
    gap: var(--wd-space-xs) var(--wd-space-md);
}

.wd-gauge-map-hint {
    margin-top: var(--wd-space-sm);
    color: var(--wd-text-mid);
    font-size: var(--wd-font-size-xs);
    line-height: 1.4;
}

/* 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: 768px) {
    .wd-gauge-grid {
        grid-template-columns: 1fr;
        gap: var(--wd-space-lg);
    }

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

    .wd-gauge-chartwrap {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .wd-gauge-map-search {
        flex-wrap: wrap;
    }

    .wd-gauge-map-search input {
        flex-basis: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   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;
    }
}

/* WeatherDuck unified tabs CSS 41-forecast-d-table-overrides.css: 07-forecast-overrides.css.
   Regrouped from 07-forecast-overrides.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * 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, let group headings use the empty band to their right. */
.wd-fc-labels--compact {
    position: relative;
    z-index: 3;
}

.wd-fc-labels--compact .wd-fc-grouphead .wd-table__rowlabel {
    position: relative;
    z-index: 4;
    font-size: 9px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 8px !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: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    table-layout: fixed !important;
}

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

.wd-card--forecast .wd-fc-labels--compact.wd-table--forecast td.wd-table__rowlabel {
    border-left: 1px solid var(--wd-fc-selected-border) !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;
}

/* Divider beneath the day-header ("Thu 4 Jun") row. The labels and data sides
   are separate tables, so a translucent line (rgba black) anti-aliases to a
   different shade on each at fractional DPI — one looks greyer than the other.
   A solid green renders identically on both and tones in with the header band. */
.wd-card--forecast .wd-fc-split table.wd-table--forecast tr.wd-table__dayrow:first-child > td {
    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: var(--wd-font-size-sm) !important;
}

/* WeatherDuck unified tabs CSS 50-stargazing.css: 08-stargazing.css.
   Regrouped from 08-stargazing.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * 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 + TONIGHT'S AURORA
   Two equal cards with matching title bars
   ════════════════════════════════════════════════════ */

.sg-tonight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wd-space-lg);
  align-items: stretch;
}

.sg-tonight-grid > .wd-card {
  height: 100%;
  margin-top: 0;
}

.sg-tn3-card {
  display: grid;
  align-items: stretch;
  padding: var(--wd-space-lg);
}

.sg-tn3-card--stargazing {
  grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1.6fr);
}

.sg-tn3-card--aurora {
  grid-template-columns: minmax(0, 1fr);
}

.sg-tn3-card > .wd-section-title {
  grid-column: 1 / -1;
}

.sg-tn3-zone {
  min-width: 0;
}

.sg-tn3-card--stargazing .sg-tn3-zone {
  padding: 0 var(--wd-space-md);
}

.sg-tn3-card--stargazing .sg-tn3-zone--score {
  padding-left: 0;
}

.sg-tn3-card--stargazing .sg-tn3-zone--facts {
  padding-right: 0;
  border-left: 1px solid var(--wd-border);
}

.sg-tn3-zone--aurora {
  display: flex;
  flex-direction: column;
}

/* ── Score zone ── */
.sg-tn3-zone--score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--wd-space-sm);
}

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

.sg-tn3-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-tn3-ring__val {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sg-tn3-score-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sg-tn3-quality {
  font-size: var(--wd-font-size-xs);
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--wd-radius-pill);
}
.sg-tn3-tagline {
  font-size: var(--wd-font-size-xs);
  font-weight: 500;
  color: var(--wd-text-secondary);
  line-height: 1.4;
}

.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); }

/* ── Zone titles (small uppercase labels) ── */
.sg-tn3-zone__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wd-space-sm);
  font-size: var(--wd-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
  margin-bottom: var(--wd-space-sm);
}
.sg-tn3-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-tn3-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; }
}

/* ── Fact rows (shared by tonight + aurora zones) ── */
.sg-tn3-facts {
  display: flex;
  flex-direction: column;
}
.sg-tn3-fact {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--wd-space-sm);
  align-items: center;
  padding: 5px 0;
  border-top: 1px dashed var(--wd-border);
}
.sg-tn3-fact:first-child { border-top: none; padding-top: 0; }

.sg-tn3-fact__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sg-tn3-fact__label {
  font-size: var(--wd-font-size-xs);
  color: var(--wd-text-secondary);
  font-weight: 500;
}
.sg-tn3-fact__val {
  font-size: var(--wd-font-size-sm);
  font-weight: 700;
  color: var(--wd-text-primary);
  line-height: 1.25;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sg-tn3-fact__val .sg-dim {
  font-weight: 500;
  color: var(--wd-text-muted);
}
.sg-tn3-fact__unit {
  font-weight: 500;
  color: var(--wd-text-muted);
  font-size: var(--wd-font-size-xs);
}

.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: var(--wd-font-size-sm);
}
.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 zone: Kp strip ── */
.sg-tn3-kp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  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-tn3-kp__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--wd-text-primary);
}
.sg-tn3-kp__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--wd-text-muted);
}
.sg-tn3-kp__bucket {
  margin-left: auto;
  font-size: var(--wd-font-size-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--wd-radius-pill);
  background: rgba(232,163,23,0.18);
  color: #8a5a0c;
}

.sg-tn3-outlook {
  font-size: var(--wd-font-size-xs);
  color: var(--wd-text-secondary);
  line-height: 1.4;
  margin-top: var(--wd-space-sm);
}
.sg-tn3-footer {
  font-size: 10px;
  color: var(--wd-text-muted);
  text-align: right;
  margin-top: var(--wd-space-xs);
}

/* ════════════════════════════════════════════════════
   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-lg);
}

.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;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sky-border, rgba(100, 140, 200, 0.15));
  border-radius: 10px;
  padding: 10px 10px 8px;
}
.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: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200, 214, 229, 0.7);
  margin-top: 8px;
}
.sg-map-footer { text-align: center; font-size: 10px; color: rgba(200, 214, 229, 0.5); 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: var(--sky-mid, #131d35); border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid var(--sky-border, rgba(100, 140, 200, 0.15));
  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.18);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--wd-font-size-xs); font-weight: 600;
  color: rgba(255,255,255,0.85);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sg-skymap-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); color: #fff; }
.sg-skymap-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.96); }
.sg-skymap-btn:focus-visible { outline: 2px solid var(--sky-accent, #5b9bd5); outline-offset: 2px; }
.sg-skymap-btn--day { color: rgba(255,255,255,0.65); font-weight: 500; }
.sg-skymap-btn--day:hover { color: #fff; }

.sg-skymap-time {
  font-size: var(--wd-font-size-sm); 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: var(--sky-deep, #0c1425); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--sky-border, rgba(100, 140, 200, 0.15));
}
@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: var(--wd-font-size-sm); 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: 1.4rem;
  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: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  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: var(--wd-font-size-lg); }
  .sg-mcard-hero-peak { padding: 8px 12px; }
  .sg-mcard-hero-peak__count { font-size: 1.4rem; }
}

/* ════════════════════════════════════════════════════
   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); }
}

@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; }
}

@media (max-width: 768px) {
  .sg-tonight-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .sg-tn3-card--stargazing {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-tn3-card--stargazing .sg-tn3-zone {
    padding: var(--wd-space-md) 0;
  }

  .sg-tn3-card--stargazing .sg-tn3-zone--score {
    padding-top: 0;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: var(--wd-space-md);
  }

  .sg-tn3-card--stargazing .sg-tn3-zone--facts {
    padding-bottom: 0;
    border-top: 1px solid var(--wd-border);
    border-left: 0;
  }

  .sg-tn3-ring {
    width: 68px;
    height: 68px;
  }

  .sg-tn3-ring__val {
    font-size: 1.4rem;
  }

  .sg-tn3-score-meta {
    align-items: flex-start;
  }

  .sg-tn3-fact {
    padding: 7px 0;
  }

  .sg-tn3-fact:first-child {
    padding-top: 0;
  }
}

/* ════════════════════════════════════════════════════
   STARGAZING TAB — NIGHT THEME
   Every card on this tab uses the shared --sky-* palette
   (stargazing-table.css). This block re-skins surfaces and
   text; interaction states live with their components.
   ════════════════════════════════════════════════════ */
body.page-template-page-forecast-unified #tab-stargazing .wd-card {
  background: var(--sky-deep, #0c1425);
  border-color: var(--sky-border, rgba(100, 140, 200, 0.15));
  color: var(--sky-text, #c8d6e5);
}

/* Night backdrop: while the stargazing tab is active (body class set by
   weatherduck-tabs.js) the whole page behind the content column becomes a
   deep-blue starfield — full viewport width, not just the panel. Tiled
   radial-gradient layers at differing sizes avoid a visible repeat. */
body.page-template-page-forecast-unified.wd-night-tab {
  background-color: #0d1a33;
  background-image:
    radial-gradient(1px 1px at 18px 28px, rgba(255, 255, 255, 0.30), transparent 100%),
    radial-gradient(1px 1px at 92px 130px, rgba(255, 255, 255, 0.20), transparent 100%),
    radial-gradient(1.5px 1.5px at 156px 62px, rgba(255, 255, 255, 0.14), transparent 100%),
    radial-gradient(1px 1px at 210px 180px, rgba(255, 255, 255, 0.24), transparent 100%),
    radial-gradient(1px 1px at 68px 214px, rgba(255, 255, 255, 0.16), transparent 100%),
    radial-gradient(1.5px 1.5px at 248px 100px, rgba(255, 255, 255, 0.10), transparent 100%);
  background-size: 280px 280px, 340px 340px, 420px 420px, 300px 300px, 380px 380px, 460px 460px;
}

/* Title strips: the same pale-green band as the other tabs, including the two
   dark aurora cards, so every card on the site reads the same way. The
   generic band rule above covers the plain cards; this handles .sg-card-header. */
#tab-stargazing .sg-card-header {
  background: var(--wd-green-light);
  border-bottom-color: rgba(47, 74, 54, 0.18);
  border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
  padding: var(--wd-card-header-pad-y) 20px;
  height: var(--wd-card-header-height);
  min-height: var(--wd-card-header-height);
  box-sizing: border-box;
}
#tab-stargazing .sg-card-header .wd-section-title { color: #1f2f27; }
#tab-stargazing .sg-card-header span:not(.wd-section-title) { color: rgba(31, 47, 39, 0.78) !important; }

/* Safety strip sits outside the panels and shows on every tab — same
   layout, night colourway while the stargazing backdrop is up. */
/* Safety strip: the green band stays as it is; only the credits foot takes the night colours. */
body.wd-night-tab .wd-safety-strip__credits { border-color: rgba(255, 255, 255, 0.12); background: var(--sky-deep, #0c1425); color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
body.wd-night-tab .wd-safety-strip__credits a { color: var(--sky-text, #c8d6e5); }
body.wd-night-tab .wd-safety-strip__credits li:last-child a { color: #7ed09b; }

/* ── Tonight's Stargazing card ── */
#tab-stargazing .sg-tn3-ring .ring-bg { stroke: rgba(255, 255, 255, 0.10); }
#tab-stargazing .sg-tn3-tagline { color: rgba(200, 214, 229, 0.8); }
#tab-stargazing .sg-tn3-zone__title,
#tab-stargazing .sg-tn3-live { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-tn3-fact { border-top-color: rgba(255, 255, 255, 0.10); }
#tab-stargazing .sg-tn3-fact__label { color: rgba(200, 214, 229, 0.75); }
#tab-stargazing .sg-tn3-fact__val { color: var(--sky-text-bright, #e8eef5); }
#tab-stargazing .sg-tn3-fact__val .sg-dim,
#tab-stargazing .sg-tn3-fact__unit { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-tn3-fact__icon img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35)); }
#tab-stargazing .sg-tn3-card--stargazing .sg-tn3-zone--facts { border-left-color: rgba(255, 255, 255, 0.10); }

/* Fog colours re-tuned for dark (must follow the __val rule above) */
#tab-stargazing .sg-fog--clear    { color: #66c685; }
#tab-stargazing .sg-fog--low      { color: #e8a317; }
#tab-stargazing .sg-fog--moderate { color: #f0964a; }
#tab-stargazing .sg-fog--high     { color: #f06b48; }

/* Quality pills — bright-on-dark score palette */
#tab-stargazing .sg-quality--excellent { color: #5cb8e8; background: rgba(92, 184, 232, 0.15); }
#tab-stargazing .sg-quality--good      { color: #66c685; background: rgba(102, 198, 133, 0.15); }
#tab-stargazing .sg-quality--fair      { color: #e8a317; background: rgba(232, 163, 23, 0.15); }
#tab-stargazing .sg-quality--poor      { color: #f06b48; background: rgba(240, 107, 72, 0.15); }
#tab-stargazing .sg-quality--terrible  { color: #d8432f; background: rgba(216, 67, 47, 0.15); }

/* ── Tonight's Aurora card ── */
#tab-stargazing .sg-tn3-kp__num { color: var(--sky-text-bright, #e8eef5); }
#tab-stargazing .sg-tn3-kp__label { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-tn3-outlook { color: var(--sky-text, #c8d6e5); }
#tab-stargazing .sg-tn3-footer { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }

/* Kp bucket pill coloured by activity, matching the 3-day badges */
#tab-stargazing .sg-tn3-kp__bucket { background: rgba(255, 255, 255, 0.08); color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-kpb--quiet     { background: rgba(116, 198, 157, 0.16); color: #74c69d; }
#tab-stargazing .sg-kpb--unsettled { background: rgba(255, 209, 102, 0.16); color: #ffd166; }
#tab-stargazing .sg-kpb--active    { background: rgba(244, 162, 97, 0.16);  color: #f4a261; }
#tab-stargazing .sg-kpb--storm     { background: rgba(230, 57, 70, 0.16);   color: #e63946; }

/* Light pollution link on dark */
#tab-stargazing .sg-lightpoll-link { color: #7ed09b; border-bottom-color: rgba(126, 208, 155, 0.4); }
#tab-stargazing .sg-lightpoll-link:hover { border-bottom-color: #7ed09b; }

/* ── Meteor shower cards ── */
#tab-stargazing .sg-mcard:not(.sg-mcard--hero) { background: rgba(255, 255, 255, 0.03); border-color: var(--sky-border, rgba(100, 140, 200, 0.15)); }
#tab-stargazing .sg-mcard--past { background: transparent; opacity: 0.6; }
#tab-stargazing .sg-mcard-name { color: var(--sky-text-bright, #e8eef5); }
#tab-stargazing .sg-mcard-dates { color: rgba(200, 214, 229, 0.75); }
#tab-stargazing .sg-mcard-note { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-mcard-status--active   { color: #66c685; background: rgba(102, 198, 133, 0.15); }
#tab-stargazing .sg-mcard-status--upcoming { color: #ffd166; background: rgba(255, 209, 102, 0.14); }
#tab-stargazing .sg-mcard-status--past     { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); background: rgba(255, 255, 255, 0.06); }
#tab-stargazing .sg-meteor-grouplabel { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .sg-mcard .wd-ui-icon__img,
#tab-stargazing .sg-mcard-hero-name .wd-ui-icon__img { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35)); }

/* ── SEO explainer — sits outside any card, needs its own solid dark surface ── */
#tab-stargazing .wd-seo-explainer { background: var(--sky-deep, #0c1425); border-color: var(--sky-border, rgba(100, 140, 200, 0.15)); }
#tab-stargazing .wd-seo-explainer > summary { color: var(--sky-text-bright, #e8eef5); }
#tab-stargazing .wd-seo-explainer > summary::before { color: var(--sky-muted, rgba(200, 214, 229, 0.5)); }
#tab-stargazing .wd-seo-explainer > summary:hover { background: rgba(255, 255, 255, 0.06); }
#tab-stargazing .wd-seo-explainer__body { border-top-color: var(--sky-border, rgba(100, 140, 200, 0.15)); color: var(--sky-text, #c8d6e5); }
#tab-stargazing .wd-seo-explainer__body p { color: var(--sky-text, #c8d6e5); }
#tab-stargazing .wd-seo-explainer__body strong { color: var(--sky-text-bright, #e8eef5); }

/* Mobile: stacked facts divider goes light-on-dark */
@media (max-width: 480px) {
  #tab-stargazing .sg-tn3-card--stargazing .sg-tn3-zone--facts {
    border-top-color: rgba(255, 255, 255, 0.10);
  }
}


/* ==========================================================
 * 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) */


/* WeatherDuck unified tabs CSS 60-seo-prose.css: 09-seo-prose.css.
   Regrouped from 09-seo-prose.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * 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);
}


/* WeatherDuck unified tabs CSS 70-responsive-mobile-pass.css: 10-responsive-mobile-pass.css.
   Regrouped from 10-responsive-mobile-pass.css on 2026-09-14; parts keep their internal order. */
/* ─── 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__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;
    }
}

/* WeatherDuck unified tabs CSS 71-forecast-e-activity-score-customiser-v2.css: 11-activity-score-customiser.css.
   Regrouped from 11-activity-score-customiser.css on 2026-09-14; parts keep their internal order. */
/* 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;
}

/* A21 is a single full-width card, so it takes the same rounded frame and
   full border as every other card. The split-card corner trims and the
   dropped right border only make sense for the two-column shell. */
.wd-activity-score-shell--a21 .wd-activity-score-card {
    border-radius: var(--wd-uc-card-radius) !important;
    box-shadow: 0 5px 16px rgba(31, 47, 39, 0.06);
}

.wd-activity-score-shell--a21 .wd-activity-score-card--left {
    border-right: 1px solid var(--wd-border);
}

.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-mode {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    align-items: stretch;
}

.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;
    /* height:auto + stretch lets the chart fill whatever row height the
       taller "What this shows" column creates, instead of floating at a
       fixed 88px with dead space above the hour labels */
    height: auto;
    min-height: 88px;
    max-height: none;
    align-self: stretch;
    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;
    /* top-aligned so the hours hug the chart's 0-line instead of
       centring in whatever row height the description column forces;
       negative margin pulls them through most of the 10px grid row-gap */
    align-self: start;
    margin-top: -6px;
    padding-bottom: 0;
    /* must mirror the bar row's padding exactly or labels drift off their bars */
    padding-left: calc(var(--wd-card-padding) + 30px);
    padding-right: calc(var(--wd-card-padding) + 26px);
}

.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-card--a21 .wd-best-window__description .wd-best-window__formula {
    color: rgba(31, 47, 39, 0.8);
    font-weight: 600;
}

.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(250px, 270px) 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(3, 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-var[data-var="sky"] .wd-customiser-vals {
    white-space: normal;
    text-align: right;
}

.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;
}

/* ═══ Score Customiser v2: factor cards + "not counted" tray ═══
   Each counted factor is a card (name + remove ×, comfy range, matters dots).
   Removed factors hide and surface as "+ chips" in the tray below the grid. */

/* Header copy of "Reset to default" — same 30px inline-flex geometry as the
   Customise score button and badge beside it, so all three centre-align */
.wd-activity-score-card--a21 .wd-customiser-reset--header {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0 10px !important;
    border: 1px solid rgba(182, 54, 44, 0.36) !important;
    border-radius: 6px !important;
    background: rgba(182, 54, 44, 0.12) !important;
    color: #7a2c26 !important;
    -webkit-text-fill-color: #7a2c26;
    font-family: var(--wd-font) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: none !important;
    outline: 0;
    cursor: pointer;
}

.wd-activity-score-card--a21 .wd-customiser-reset--header:hover,
.wd-activity-score-card--a21 .wd-customiser-reset--header:focus {
    background: rgba(182, 54, 44, 0.18) !important;
    border-color: rgba(182, 54, 44, 0.5) !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-var {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px 10px;
    border-radius: var(--wd-radius-sm);
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-var--removed {
    display: none;
}

.wd-customiser-var__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wd-customiser-var__name {
    color: #1f2f27;
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.1;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-var__remove {
    border: 0 !important;
    background: none !important;
    color: var(--wd-text-muted) !important;
    -webkit-text-fill-color: currentColor;
    font-family: var(--wd-font) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    padding: 2px 7px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0;
    cursor: pointer;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-var__remove:hover {
    color: var(--wd-text-primary) !important;
    background: var(--wd-bg-subtle) !important;
}

.wd-customiser-micro {
    display: block;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
    white-space: nowrap;
}

.wd-customiser-rangehead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: -3px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-rangehead .wd-customiser-vals {
    white-space: normal;
    text-align: right;
}

.wd-customiser-matters .wd-customiser-micro {
    margin-bottom: 5px;
}

/* Importance dots: filled up to the active level (1-3), hollow after it */
.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact--dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border: 0;
    background: none;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact--dots button {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 50% !important;
    border: 2px solid #3f5f45 !important;
    background: #3f5f45 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact--dots button.active ~ button {
    background: rgba(255, 255, 255, 0.9) !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact--dots button:not(.active):hover {
    background: #4a6c51 !important;
    border-color: #3f5f45 !important;
    transform: scale(1.12);
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact--dots button.active ~ button:hover {
    background: rgba(63, 95, 69, 0.18) !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-impact__word {
    font-size: 0.68rem !important;
    font-weight: 700;
    color: #2f3e34;
    margin-left: 2px;
    white-space: nowrap;
}

/* Legend: one quiet line above the cards */
.wd-customiser-legend {
    grid-column: 1 / -1;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(31, 47, 39, 0.72);
}

.wd-customiser-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

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

.wd-customiser-legend__swatch--ok {
    background: var(--wd-score-good-strong, #5cd88a);
    opacity: 0.8;
}

.wd-customiser-legend__swatch--bad {
    background: var(--wd-score-bad, #ffb3b3);
}

/* "Not counted" tray */
.wd-customiser-tray {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(47, 74, 54, 0.14);
}

.wd-customiser-tray[hidden] {
    display: none;
}

.wd-customiser-tray .wd-customiser-micro {
    margin-bottom: 6px;
}

.wd-customiser-tray__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-chip {
    font-family: var(--wd-font) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #2f3e34 !important;
    -webkit-text-fill-color: #2f3e34;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px dashed rgba(47, 74, 54, 0.34) !important;
    border-radius: var(--wd-radius-pill) !important;
    padding: 5px 11px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: 0;
    cursor: pointer;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-chip:hover {
    color: #1f2f27 !important;
    -webkit-text-fill-color: #1f2f27;
    border-color: rgba(47, 74, 54, 0.6) !important;
    background: #fff !important;
}

.wd-activity-score-card--a21 .wd-activity-score__customiser .wd-customiser-chip[hidden] {
    display: none !important;
}

@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 {
        /* Same rounded frame as every other card, at every width. */
        border-radius: var(--wd-uc-card-radius) !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-mode {
        width: 100%;
    }

    .wd-activity-score-card--a21 .wd-bw-score-toggle {
        flex: 1 1 auto;
        min-height: 30px;
    }

    .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: 0px 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(70px, 1fr);
        width: calc(100% - 2px);
        padding-left: 0 !important;
        padding-bottom: 0;
        margin: 0px 1px calc(var(--wd-space-xs) / -4);
        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: 48px;
        justify-content: center;
        gap: 6px;
        padding: 6px 6px 7px;
        border: 1px solid rgba(47, 74, 54, 0.18);
        border-right: 0;
        border-bottom: 1px solid var(--wd-fc-selected-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__icon img {
        width: 22px;
        height: 22px;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab__temp,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab__pop {
        font-size: 0.62rem;
    }

    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:not(.wd-fc-day-tab--active):hover,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab:not(.wd-fc-day-tab--active):focus,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab:not(.wd-fc-day-tab--active):focus-visible,
    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab:not(.wd-fc-day-tab--active):active {
        background: rgba(255, 255, 255, 0.72) !important;
        color: #55625b !important;
    }

    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: var(--wd-fc-selected-fill) !important;
        border-color: var(--wd-fc-selected-border);
        border-right: 1px solid var(--wd-fc-selected-border);
        border-bottom-color: var(--wd-fc-selected-fill);
        color: var(--wd-brand-dark) !important;
        transform: none;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-fc-day-tab--active::after {
        content: 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-lg)) !important;
        border-top: 0 !important;
        /* Tucked under the day tabs, so only the bottom corners round. */
        border-radius: 0 0 var(--wd-uc-card-radius) var(--wd-uc-card-radius) !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;
        vertical-align: middle;
    }

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

/* WeatherDuck unified tabs CSS 80-card-typography.css: 12-card-typography.css.
   Regrouped from 12-card-typography.css on 2026-09-14; parts keep their internal order. */
/* ==========================================================
 * Unified forecast-tab card typography
 * ========================================================== */
body.page-template-page-forecast-unified .wd-content .wd-card,
body.page-template-page-forecast-unified .wd-content .wd-card *,
body.page-template-page-forecast-unified .wd-inv-outlook-wrap,
body.page-template-page-forecast-unified .wd-inv-outlook-wrap * {
    font-family: var(--wd-card-font) !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
    font-style: normal !important;
    vertical-align:middle;
}

body.page-template-page-forecast-unified .wd-content .wd-card,
body.page-template-page-forecast-unified .wd-inv-outlook-wrap {
    font-variant-numeric: tabular-nums;
}

body.page-template-page-forecast-unified .wd-content .wd-card > .wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-card > h2.wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-card > h3.wd-section-title,
body.page-template-page-forecast-unified #tab-forecast .wd-activity-score__header,
body.page-template-page-forecast-unified #tab-forecast .wd-gear__header,
body.page-template-page-forecast-unified #tab-forecast .wd-radar-header,
body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__top,
body.page-template-page-forecast-unified #tab-stargazing .sg-card-header,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-header,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr {
    min-height: var(--wd-card-header-height) !important;
    height: var(--wd-card-header-height) !important;
    padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x) !important;
    background: #d4e8d6 !important;
    border-bottom: 1px solid rgba(47, 74, 54, 0.18) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    color: #1f2f27 !important;
    font-family: var(--wd-card-font) !important;
    font-size: var(--wd-card-header-font-size) !important;
    font-weight: var(--wd-card-header-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--wd-card-header-letter-spacing) !important;
    text-transform: uppercase !important;
}

body.page-template-page-forecast-unified .wd-content .wd-card > .wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-card > h2.wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-card > h3.wd-section-title {
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md) !important;
}

body.page-template-page-forecast-unified #tab-forecast .wd-gear__header,
body.page-template-page-forecast-unified #tab-forecast .wd-radar-header,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-header {
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md) !important;
}

body.page-template-page-forecast-unified #tab-forecast .wd-gear__header {
    margin: calc(-1 * var(--wd-gear-padding)) calc(-1 * var(--wd-gear-padding)) var(--wd-space-md) !important;
}

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-forecast .wd-gear {
        --wd-gear-padding: var(--wd-card-padding-mobile);
        padding: var(--wd-gear-padding);
    }
}

body.page-template-page-forecast-unified #tab-forecast .wd-day-brief__top {
    margin: 0 !important;
}

body.page-template-page-forecast-unified #tab-stargazing .sg-card-header {
    justify-content: space-between;
}

body.page-template-page-forecast-unified #tab-forecast .wd-activity-score__header {
    margin: 0 !important;
}

body.page-template-page-forecast-unified .wd-content .wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-gear__title,
body.page-template-page-forecast-unified .wd-content .wd-best-window__title,
body.page-template-page-forecast-unified .wd-content .wd-day-brief__date,
body.page-template-page-forecast-unified .wd-content .sg-card-header .wd-section-title,
body.page-template-page-forecast-unified .wd-content .wd-inv-outlook-title {
    margin-bottom: 0 !important;
    color: #1f2f27 !important;
    font-family: var(--wd-card-font) !important;
    font-size: var(--wd-card-header-font-size) !important;
    font-weight: var(--wd-card-header-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--wd-card-header-letter-spacing) !important;
    text-transform: uppercase !important;
}

body.page-template-page-forecast-unified .wd-content .wd-card :where(
    .wd-section-sub,
    .wd-card__sub,
    .wd-card__detail,
    .wd-radar-updated,
    .wd-gear__subtitle,
    .wd-gear__legend,
    .wd-gear__disclaimer,
    .wd-customiser-summary,
    .wd-best-window__metric-sub,
    .wd-best-window__factor-text,
    .wd-day-brief__prose,
    .wd-inv-heatmap-legend,
    .wd-inv-heatmap-meta,
    .wd-inv-heatmap-ts,
    .wd-inv-heatmap-countdown,
    .wd-inv-profile-note,
    .wd-inv-slider-hint,
    .wd-inv-insight-time,
    .wd-inv-insight-empty,
    .wd-inv-rarity-sub,
    .wd-freq-note,
    .wd-freq-illustrative,
    .wd-ground-sources,
    .wd-ground-sources-meta,
    .wd-ground-src-hdr,
    .wd-ground-src-vals,
    .wd-rainx-meta,
    .wd-rainx-footnote,
    .sg-map-footer,
    .sg-map-label,
    .sg-source,
    .sg-aurora-updated,
    .sg-tn3-outlook,
    .sg-tn3-footer,
    .sg-tn3-tagline,
    .sg-mcard-dates,
    .sg-mcard-note,
    .sg-mcard-hero-dates,
    .sg-mcard-hero-note,
    .sg-kpf-meta__hint,
    .sg-no-controls,
    .sg-no-chart-xaxis
) {
    font-family: var(--wd-card-font) !important;
    font-size: var(--wd-card-meta-font-size) !important;
    font-weight: var(--wd-card-meta-font-weight) !important;
    line-height: var(--wd-card-meta-line-height) !important;
    letter-spacing: 0 !important;
    font-style: normal !important;
}

body.page-template-page-forecast-unified .wd-content .wd-card :where(
    .wd-best-window__metric-label,
    .wd-customiser-picker__label,
    .wd-customiser-label,
    .wd-day-brief__metric-label,
    .wd-gear__table-zone,
    .wd-gear__table thead th,
    .wd-table__rowlabel,
    .wd-table__colhead,
    .wd-fc-grouphead,
    .wd-inv-fn,
    .wd-inv-besttime-label,
    .wd-inv-panel-label,
    .wd-inv-cloud-stats-label,
    .wd-inv-cloud-dim-lbl,
    .wd-inv-surface-pressure__title,
    .wd-freq-bar-month,
    .wd-ground-sources-label,
    .wd-ground-sources-subtitle,
    .wd-ground-src-tag,
    .wd-rainx-k,
    .sg-kpf-meta__peak-label,
    .sg-no-cloud-lbl,
    .sg-no-stat__lbl,
    .sg-tn3-fact__label,
    .sg-tn3-live,
    .sg-tn3-zone__title,
    .sg-tn3-kp__label,
    .sg-meteor-grouplabel,
    .sg-mcard-status,
    .sg-mcard-hero-status,
    .sg-mcard-hero-peak__label,
    .sg-ncard-day
) {
    font-family: var(--wd-card-font) !important;
    font-size: var(--wd-card-label-font-size) !important;
    font-weight: var(--wd-card-label-font-weight) !important;
    line-height: 1.2 !important;
    letter-spacing: var(--wd-card-label-letter-spacing) !important;
    text-transform: uppercase !important;
}

body.page-template-page-forecast-unified .wd-content .wd-card :where(
    .wd-card__big-value,
    .wd-weekday__temp,
    .wd-sunmoon-strip,
    .wd-mountain-info__value,
    .wd-table__temp,
    .wd-table__feels,
    .wd-bw-day-btn__score,
    .wd-best-window__metric-value,
    .wd-day-brief__metric-value,
    .wd-inv-strip-pct,
    .wd-inv-strip-window,
    .wd-inv-strip-ct,
    .wd-inv-strip-conf,
    .wd-inv-fv,
    .wd-inv-ring-pct,
    .wd-inv-ring-lbl,
    .wd-inv-sc-window,
    .wd-inv-rarity-num,
    .wd-inv-rank,
    .wd-inv-anchor-leader-score,
    .wd-inv-range-score,
    .wd-inv-surface-pressure__current,
    .wd-freq-bar-val,
    .wd-gh-day-label,
    .wd-gh-edge,
    .wd-gh-golden-time,
    .wd-gh-sunrise-time,
    .wd-gh-bracket-text,
    .wd-ground-score-num,
    .wd-ground-src-vals,
    .wd-rainx-v,
    .sg-score-num,
    .sg-sw-val,
    .sg-kpf-meta__peak-val,
    .sg-kpf-meta__peak-time,
    .sg-kpf-yaxis,
    .sg-kpf-xaxis,
    .sg-kpf-peak-label,
    .sg-no-tab__score,
    .sg-no-panel__score,
    .sg-no-cloud-cell,
    .sg-no-stat__val,
    .sg-tn3-ring__val,
    .sg-tn3-fact__val,
    .sg-tn3-kp__num,
    .sg-mcard-hero-peak__count,
    .sg-skymap-time
) {
    font-family: var(--wd-card-num-font) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified .wd-content :where(
    .wd-ribbon__chip-value,
    .wd-ribbon__chip-extra,
    .wd-score-suffix
) {
    font-family: var(--wd-card-num-font) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified .wd-score-suffix {
    margin-left: 1px;
    color: var(--wd-text-muted);
    font-family: var(--wd-card-font);
    font-size: 0.6em;
    font-weight: 500;
    line-height: 1;
}

body.page-template-page-forecast-unified .wd-fc-emphasis {
    color: var(--wd-text-primary);
    font-family: var(--wd-card-num-font);
    font-size: inherit;
    font-weight: var(--wd-card-value-font-weight);
    font-variant-numeric: tabular-nums;
}

body.page-template-page-forecast-unified .wd-fc-emphasis--soft {
    font-weight: 600;
}

body.page-template-page-forecast-unified .wd-fc-emphasis--fog,
body.page-template-page-forecast-unified .wd-fc-emphasis--rain {
    color: var(--wd-blue);
}

body.page-template-page-forecast-unified .wd-freq-illustrative {
    margin-bottom: 8px;
    color: var(--wd-text-light);
}

/* WeatherDuck unified tabs CSS 81-forecast-f-day-briefing.css: 13-forecast-day-briefing.css.
   Regrouped from 13-forecast-day-briefing.css on 2026-09-14; parts keep their internal order. */
/* ═══════════════════════════════════════════════
   FORECAST TAB — DAY BRIEFING LAYOUT
   Briefing card | radar + rain-tease column,
   then full-width What to Wear.
   ═══════════════════════════════════════════════ */
.wd-fc-brief-grid {
    display: grid;
    /* minmax(0,…): a bare fr's MINIMUM is min-content, and the briefing
       day rail (7 fixed-width cards) has a big one — without the 0 floor
       it blows the track out wider than the viewport */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--wd-space-lg);
    align-items: stretch;
    margin-top: 0;
}

/* Equalise the two columns on desktop: the radar card flexes and its map
   soaks up any height difference so both column bottoms align. The map is
   absolutely positioned inside the wrap, so radar-map.js calls
   invalidateSize() after layout settles. */
@media (min-width: 769px) {
    .wd-fc-radar-col > .wd-card:first-child {
        display: flex;
        flex-direction: column;
    }
    .wd-fc-radar-col .wd-radar-wrap {
        flex: 1 1 auto;
        min-height: 340px;
    }
    .wd-fc-radar-col #wd-radar-map {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 0;
    }
}

.wd-brief__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md);
    flex-wrap: wrap;
}

/* Desktop: same tinted band as the radar/gear card headers, so the two
   columns read as siblings (mobile gets its own recipe in the V2 block) */
@media (min-width: 769px) {
    #tab-forecast .wd-brief__header {
        margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md);
        padding: var(--wd-card-header-pad-y, 6px) var(--wd-space-lg);
        min-height: var(--wd-card-header-height, 32px);
        height: var(--wd-card-header-height, 32px);
        box-sizing: border-box;        background: var(--wd-green-light);
        border-bottom: 1px solid rgba(47, 74, 54, 0.18);
        border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
        flex-wrap: nowrap;
    }
    #tab-forecast .wd-brief__header .wd-section-title { color: #1f2f27; }
}

/* Day rail: one mini forecast card per day (icon + day + high/low),
   scrollable when it overflows; right-edge fade hints at more days. */
.wd-brief__dayrail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: var(--wd-space-sm);
    padding: 0 14px 4px 0;
    scrollbar-width: none;
    /* fade width == right padding: covers empty space when everything fits,
       only bites into cards once the rail actually scrolls */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
}
.wd-brief__dayrail::-webkit-scrollbar { display: none; }

/* Scoped under .wd-brief — the parent theme reset ([type="button"]) loads
   later and ties single-class specificity, stripping background/border. */
.wd-brief .wd-brief__day-btn {
    flex: 1 0 64px;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
    border-radius: 10px;
    padding: 8px 4px 7px;
    font-family: var(--wd-font);
    color: var(--wd-text-primary);
    cursor: pointer;
}
.wd-brief .wd-brief__day-btn { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }

/* Parent reset paints button:focus/:hover pink (#c36) at (0,2,0) and loads
   after this file; every state below is (0,3,0) so ours always win. Order
   matters: focus < hover < active < active:hover. */
.wd-brief .wd-brief__day-btn:focus,
.wd-brief .wd-brief__day-btn:active {
    outline: 0;
    box-shadow: none;
    background: var(--wd-bg-subtle);
    color: var(--wd-text-primary);
}
.wd-brief .wd-brief__day-btn:hover {
    background: var(--wd-green-light);
    border-color: var(--wd-green);
    color: var(--wd-text-primary);
    box-shadow: var(--wd-shadow-sm);
}
.wd-brief .wd-brief__day-btn--active,
.wd-brief .wd-brief__day-btn--active:focus,
.wd-brief .wd-brief__day-btn--active:active {
    background: var(--wd-green);
    color: #fff;
    border-color: var(--wd-green);
    box-shadow: 0 3px 10px rgba(66, 90, 71, 0.35);
}
.wd-brief .wd-brief__day-btn--active:hover { background: var(--wd-green-hover); }
.wd-brief .wd-brief__day-btn:focus-visible { box-shadow: var(--wd-focus-ring); }
.wd-brief__day-icon { display: block; width: 26px; height: 26px; }
.wd-brief__day-name {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.wd-brief__day-hilo {
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wd-brief__day-lo { font-weight: 600; color: var(--wd-text-muted); }
.wd-brief .wd-brief__day-btn--active .wd-brief__day-lo { color: rgba(255, 255, 255, 0.75); }

/* Hero: condition icon beside headline + high/low meta line */
.wd-brief__hero {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md);
    margin-top: var(--wd-space-md);
}
.wd-brief__hero-icon { display: block; width: 48px; height: 48px; flex: none; }
.wd-brief__hero-text { min-width: 0; }
.wd-brief__headline {
    font-size: var(--wd-font-size-lg);
    font-weight: 700;
    color: var(--wd-text-primary);
    margin: 0;
}
.wd-brief__hero-meta {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    margin-top: 1px;
}
.wd-brief__hero-meta strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--wd-text-primary);
    font-variant-numeric: tabular-nums;
}

.wd-brief__prose {
    font-size: var(--wd-font-size-sm);
    color: var(--wd-text-secondary);
    line-height: 1.55;
    margin-top: var(--wd-space-sm);
}
.wd-brief__prose p { margin: 0; }

/* "More ▾" prose toggle — only ever unhidden by JS on mobile, where the
   prose clamps to three lines. No display property here: [hidden] must win. */
.wd-brief .wd-brief__more {
    background: none;
    border: 0;
    padding: 4px 0 0;
    font-family: var(--wd-font);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wd-green);
    cursor: pointer;
}

/* "More detail" fold — desktop always shows the detail, so the toggle hides */
.wd-brief .wd-brief__disclose { display: none; }

/* Conditions strip: icon-topped tiles (High/Low lives in the hero) */
.wd-brief__strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: var(--wd-space-md);
}
.wd-brief__tile {
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border);
    border-radius: 10px;
    padding: var(--wd-space-md) 10px;
    text-align: center;
    min-width: 0;
}
.wd-brief__tile-icon {
    display: block;
    margin: 0 auto 6px;
    padding: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wd-green-light) 55%, var(--wd-bg-card));
}
.wd-brief__tile-value { font-size: var(--wd-font-size-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.wd-brief__tile-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
    margin-top: 2px;
}
.wd-brief__tile-small { font-size: 0.7rem; color: var(--wd-text-muted); margin-top: 1px; }

.wd-brief__group-title {
    display: flex;
    align-items: center;
    gap: var(--wd-space-sm);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
    margin: var(--wd-space-lg) 0 var(--wd-space-xs);
}
.wd-brief__group-title::after { content: ''; flex: 1; height: 1px; background: var(--wd-table-border); }

/* Atmosphere ledger: two columns of dotted-leader rows */
.wd-brief__ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
}
.wd-brief__lrow { display: flex; align-items: baseline; gap: var(--wd-space-sm); padding: 7px 0; min-width: 0; }
.wd-brief__lrow-icon { align-self: center; }
.wd-brief__lrow-label { font-size: 0.78rem; font-weight: 600; color: var(--wd-text-secondary); white-space: nowrap; }
.wd-brief__lrow-fill { flex: 1; min-width: 10px; border-bottom: 1px dotted var(--wd-border-strong); transform: translateY(-3px); }
.wd-brief__lrow-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wd-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wd-brief__lrow-small { font-size: 0.68rem; font-weight: 400; color: var(--wd-text-muted); margin-left: 5px; }

/* Sun & Moon band: single 4-cell strip */
.wd-brief__band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: var(--wd-space-xs);
}
.wd-brief__bcell { padding: 11px 8px; text-align: center; min-width: 0; }
.wd-brief__bcell + .wd-brief__bcell { border-left: 1px solid var(--wd-border); }
.wd-brief__bcell-icon { display: block; margin: 0 auto 5px; }
.wd-brief__bcell-value { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd-brief__bcell-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
    margin-top: 2px;
}
.wd-brief__bcell-small { font-size: 0.66rem; color: var(--wd-text-muted); }

.wd-brief__links {
    display: flex;
    gap: var(--wd-space-md);
    flex-wrap: wrap;
    margin-top: var(--wd-space-lg);
}

.wd-brief .wd-brief__link {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wd-bg-card);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    box-shadow: var(--wd-shadow-sm);
    padding: 10px 14px;
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
    color: var(--wd-text-primary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.wd-brief .wd-brief__link:hover,
.wd-brief .wd-brief__link:focus {
    background: var(--wd-green-light);
    color: var(--wd-green);
    border-color: var(--wd-green);
}
.wd-brief .wd-brief__link:hover {
    transform: translateY(-1px);
    box-shadow: var(--wd-shadow-sm);
}
.wd-brief .wd-brief__link:focus-visible {
    box-shadow: var(--wd-focus-ring);
}
.wd-brief__link-label { flex: 1; text-align: left; }
.wd-brief__link-arrow { color: var(--wd-green); font-weight: 700; }

/* Radar column: radar card + rain-tease tiles */
.wd-fc-radar-col {
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-lg);
}

/* Ground conditions teaser card — mini version of the Ground tab's dryness
   gauge (same gradient stops as .wd-ground-scale-bar in rainx ground.css).
   --wd-fcg-ink is set inline per dryness bucket from the --wd-dryness-* tokens. */
.wd-fc-ground { --wd-fcg-ink: var(--wd-dryness-4); }

/* Green title band, same recipe as the radar/gear headers; the dryness chip
   rides inside the band on the right. */
.wd-fc-ground__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md);
    padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
    height: var(--wd-card-header-height);
    min-height: var(--wd-card-header-height);
    box-sizing: border-box;
    background: var(--wd-green-light);
    border-bottom: 1px solid rgba(47, 74, 54, 0.18);
    border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
}
.wd-fc-ground__title {
    font-size: var(--wd-card-header-font-size);
    font-weight: var(--wd-card-header-font-weight);
    letter-spacing: var(--wd-card-header-letter-spacing);
    line-height: 1;
    text-transform: uppercase;
    color: #1f2f27;
}
.wd-fc-ground__chip {
    margin-left: auto;
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wd-fcg-ink) 18%, var(--wd-bg-card));
    color: var(--wd-fcg-ink);
}

.wd-fc-ground__scale { margin-top: var(--wd-space-lg); position: relative; }
.wd-fc-ground__scale-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--wd-dryness-0) 0%,
        var(--wd-dryness-2) 12%,
        var(--wd-dryness-4) 38%,
        var(--wd-dryness-6) 56%,
        var(--wd-dryness-8) 78%,
        var(--wd-dryness-10) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.wd-fc-ground__scale-marker {
    position: absolute;
    top: -3px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--wd-bg-card);
    border: 2.5px solid var(--wd-fcg-ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translateX(-50%);
}
.wd-fc-ground__scale-labels,
.wd-fc-ground__scale-numbers { display: flex; justify-content: space-between; }
.wd-fc-ground__scale-labels {
    margin-top: 7px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
}
.wd-fc-ground__scale-numbers {
    margin-top: 2px;
    font-size: 0.58rem;
    color: var(--wd-text-light);
    font-variant-numeric: tabular-nums;
}

.wd-fc-ground__verdict { display: flex; align-items: center; gap: 12px; margin-top: var(--wd-space-md); }
.wd-fc-ground__score {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--wd-fcg-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.wd-fc-ground__line { font-size: var(--wd-font-size-md); font-weight: 800; }
.wd-fc-ground__sub { font-size: var(--wd-font-size-sm); color: var(--wd-text-secondary); line-height: 1.5; margin-top: 3px; }

.wd-fc-ground__lockrow { display: flex; align-items: center; gap: 10px; margin-top: var(--wd-space-md); }
.wd-fc-ground__lockrow svg { width: 26px; height: 26px; flex-shrink: 0; fill: var(--wd-green); }
.wd-fc-ground__lock-title { font-size: var(--wd-font-size-md); font-weight: 800; }
.wd-fc-ground__blurline {
    display: inline-block;
    width: 84px;
    height: 0.7em;
    border-radius: 4px;
    background: var(--wd-fcg-ink);
    opacity: 0.5;
    filter: blur(5px);
}
.wd-fc-ground__lock-sub { font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); margin-top: 2px; }

.wd-fc-ground__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wd-space-sm);
    margin-top: var(--wd-space-md);
}
.wd-fc-ground__stat {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border);
    border-radius: 10px;
    padding: 9px 12px;
}
.wd-fc-ground__stat-value { font-size: var(--wd-font-size-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.wd-fc-ground__stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
}
.wd-fc-ground__src { font-size: 0.66rem; color: var(--wd-text-muted); margin-top: var(--wd-space-sm); }

.wd-fc-ground .wd-fc-ground__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--wd-space-md);
    padding: 12px 16px;
    background: var(--wd-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--wd-font);
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(66, 90, 71, 0.28);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.wd-fc-ground .wd-fc-ground__cta:hover {
    background: var(--wd-green-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(66, 90, 71, 0.35);
}
.wd-fc-ground__cta-arrow { font-weight: 800; }
.wd-fc-ground__hooks { text-align: center; font-size: 0.66rem; color: var(--wd-text-muted); margin-top: var(--wd-space-sm); }

.wd-gear--full { margin-top: 0; }

@media (max-width: 768px) {
    .wd-fc-brief-grid { grid-template-columns: minmax(0, 1fr); }
}

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

/* WeatherDuck unified tabs CSS 82-forecast-g-mobile-v2.css: 14-mobile-layout-v2.css.
   Regrouped from 14-mobile-layout-v2.css on 2026-09-14; parts keep their internal order. */
/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT V2 (Jul 2026) — approved forecast-tab mockup.
   Everything below is mobile-only (≤768px); desktop must render
   identically with this section removed. Keep it at file end so
   it wins cascade ties against the older mobile passes above.
   ═══════════════════════════════════════════════════════════════ */

/* The ground teaser strip folded into the radar card exists only on mobile;
   desktop keeps the standalone .wd-fc-ground card below the radar. */
.wd-radar-groundstrip { display: none; }

@media (max-width: 768px) {

    /* ── Cards: square corners (chips/buttons keep their radius) ── */
    .wd-page .wd-card { border-radius: 0; }

    /* ── HERO: "Updated" sits beside the eyebrow; meta on one line ── */
    .wd-page .wd-location-at-glance {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
    }
    /* eyebrow row gets clear air below it; name+meta stay a tight pair,
       so the block fills the header space evenly */
    .wd-page .wd-location-at-glance__label   { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
    .wd-page .wd-location-at-glance__updated { grid-column: 2; grid-row: 1; margin-bottom: 12px; }
    .wd-page .wd-location-at-glance__name {
        grid-column: 1 / -1; grid-row: 2;
        text-align: center;
    }
    .wd-page .wd-location-at-glance__meta {
        grid-column: 1 / -1; grid-row: 3;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wd-page .wd-location-at-glance__source {
        grid-column: 1 / -1;
        grid-row: 4;
        text-align: center;
    }
    /* Favourites confirmation follows the centred name and meta */
    .wd-page .wd-fav-note {
        grid-row: 5;
        text-align: center;
    }
    /* Keep the daylight icon compact and on the meta text baseline. */
    .wd-page .wd-location-at-glance__meta .wd-ui-icon--daylight,
    .wd-page .wd-location-at-glance__meta .wd-ui-icon--daylight .wd-ui-icon__img {
        width: var(--wd-ui-icon-size, 18px);
    }
    .wd-page .wd-location-at-glance__meta .wd-ui-icon--daylight {
        height: 1em;
        overflow: visible;
    }
    .wd-page .wd-location-at-glance__meta .wd-ui-icon--daylight .wd-ui-icon__img {
        height: var(--wd-ui-icon-size, 18px);
    }
    .wd-page .wd-location-at-glance__meta .wd-ui-icon--daylight { vertical-align: -3px; }

    /* ── HERO: metric chips overlaid on a taller map (glass bar) ── */
    .wd-page .wd-hero__main { position: relative; padding-top: 2px; }
    .wd-page .wd-location-at-glance__meta { margin-bottom: 2px; }
    .wd-page .wd-now__map { height: 170px; border-radius: var(--wd-radius-md); }
    .wd-page .wd-hero__metrics {
        position: absolute;
        left: 18px; right: 18px; bottom: 18px;
        z-index: 1100; /* above Leaflet panes/controls (≤1000) */
        width: auto;
        min-height: 0;
        padding: 7px 0 8px;
        background: rgba(35, 52, 40, 0.82);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    /* ── Day briefing v3: day-card rail + folded detail (Jul 2026 mockup,
       "Option 2 — day cards + tucked detail") ── */

    /* Day briefing gets the same green header band as the radar/gear cards
       (recipe mirrors .wd-radar-header at :670); the day rail sits directly
       below it, so the band's own bottom margin goes */    #tab-forecast .wd-brief__header {
        margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) 0;
        padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
        background: var(--wd-green-light);
        border-bottom: 1px solid rgba(47, 74, 54, 0.18);
        border-radius: calc(var(--wd-uc-card-radius) - 1px) calc(var(--wd-uc-card-radius) - 1px) 0 0;
        height: var(--wd-card-header-height);
        min-height: var(--wd-card-header-height);
        box-sizing: border-box;
    }
    #tab-forecast .wd-brief__header .wd-section-title {
        margin-bottom: 0;
        color: #1f2f27;
    }

    /* day rail bleeds to the card edges; cards stop stretching and scroll.
       Rail always overflows on phones, so the fade widens as a swipe hint. */
    #tab-forecast .wd-brief__dayrail {
        margin: 0 calc(-1 * var(--wd-space-lg));
        padding: 10px var(--wd-space-lg) 12px;
        border-bottom: 1px solid var(--wd-border);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    #tab-forecast .wd-brief .wd-brief__day-btn { flex: 0 0 64px; }

    /* hero tightens */
    #tab-forecast .wd-brief__hero { gap: 10px; }
    #tab-forecast .wd-brief__hero-icon { width: 40px; height: 40px; }
    #tab-forecast .wd-brief__headline { font-size: 1rem; }
    #tab-forecast .wd-brief__hero-meta { font-size: 0.78rem; }
    #tab-forecast .wd-brief__hero-meta strong { font-size: 0.95rem; }

    /* narrative clamps to three lines until "More" opens it (JS unhides the
       button only when the text actually overflows) */
    #tab-forecast .wd-brief__prose[data-brief-prose]:not(.wd-brief__prose--open) {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* atmosphere + sun & moon fold behind the disclose toggle */
    #tab-forecast .wd-brief .wd-brief__disclose {
        width: 100%;
        margin-top: var(--wd-space-md);
        padding: 9px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--wd-space-sm);
        background: var(--wd-bg-subtle);
        border: 1px solid var(--wd-border);
        border-radius: var(--wd-radius-sm);
        font-family: var(--wd-font);
        font-size: var(--wd-font-size-xs);
        font-weight: 700;
        color: var(--wd-text-primary);
        cursor: pointer;
        text-align: left;
    }
    #tab-forecast .wd-brief__disclose-chev { color: var(--wd-green); font-weight: 800; transition: transform 0.15s; }
    #tab-forecast .wd-brief .wd-brief__disclose[aria-expanded="true"] .wd-brief__disclose-chev { transform: rotate(180deg); }
    #tab-forecast .wd-brief__detail:not(.wd-brief__detail--open) { display: none; }

    /* conditions tiles tighten to key-strip numbers */
    #tab-forecast .wd-brief__strip { gap: 6px; }
    #tab-forecast .wd-brief__tile { padding: 8px 4px; }
    #tab-forecast .wd-brief__tile-value { font-size: 0.84rem; font-weight: 800; white-space: nowrap; }
    #tab-forecast .wd-brief__tile-label { font-size: 0.56rem; white-space: normal; }
    #tab-forecast .wd-brief__tile-small { font-size: 0.6rem; }

    /* atmosphere ledger → label/value hairline rows; dotted leaders drop */
    #tab-forecast .wd-brief__ledger { column-gap: 18px; }
    #tab-forecast .wd-brief__lrow { border-top: 1px solid var(--wd-border); padding: 7px 0; }
    #tab-forecast .wd-brief__lrow-label { font-size: 0.7rem; }
    #tab-forecast .wd-brief__lrow-fill { border-bottom: 0; }
    #tab-forecast .wd-brief__lrow-value { font-size: 0.74rem; font-weight: 800; }
    #tab-forecast .wd-brief__lrow-small {
        display: block;
        font-size: 0.6rem;
        text-align: right;
        margin-left: 0;
    }

    /* sun & moon → borderless hairline band; times wrap at the "/" */
    #tab-forecast .wd-brief__band {
        background: none;
        border: 0;
        border-radius: 0;
        border-top: 1px solid var(--wd-border);
        padding-top: 10px;
        overflow: visible;
    }
    #tab-forecast .wd-brief__bcell { position: relative; padding: 0 2px; }
    #tab-forecast .wd-brief__bcell + .wd-brief__bcell { border-left: 0; }
    #tab-forecast .wd-brief__bcell + .wd-brief__bcell::before {
        content: '';
        position: absolute;
        left: 0; top: 12%; bottom: 12%;
        width: 1px;
        background: var(--wd-border);
    }
    #tab-forecast .wd-brief__bcell-value { font-size: 0.7rem; font-weight: 800; white-space: normal; }
    #tab-forecast .wd-brief__bcell-label { font-size: 0.54rem; white-space: normal; }
    #tab-forecast .wd-brief__bcell-small { font-size: 0.6rem; }

    /* cross-tab links → tidy 3-across row */
    #tab-forecast .wd-brief__links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    #tab-forecast .wd-brief .wd-brief__link {
        min-width: 0;
        justify-content: center;
        gap: 6px;
        padding: 8px 4px;
        font-size: 0.7rem;
        text-align: center;
    }
    /* icons are a desktop nicety; phones keep the compact text + arrow row */
    #tab-forecast .wd-brief__link-icon { display: none; }
    #tab-forecast .wd-brief__link-label { flex: 0 1 auto; }

    /* ── Radar: ground teaser strip lives inside the card; standalone card hides ── */
    #tab-forecast .wd-radar-groundstrip {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--wd-bg-subtle);
        border: 1px solid var(--wd-border);
        border-radius: var(--wd-radius-sm);
        padding: 11px 12px;
        margin-top: var(--wd-space-md);
        cursor: pointer;
        text-decoration: none;
        color: var(--wd-text-primary);
        --wd-fcg-ink: var(--wd-dryness-4);
    }
    #tab-forecast .wd-radar-groundstrip:hover { border-color: var(--wd-green); }
    #tab-forecast .wd-radar-groundstrip__dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
        background: color-mix(in srgb, var(--wd-fcg-ink) 35%, var(--wd-bg-card));
        box-shadow: inset 0 0 0 2px var(--wd-fcg-ink);
    }
    #tab-forecast .wd-radar-groundstrip__lock {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        fill: var(--wd-green);
    }
    #tab-forecast .wd-radar-groundstrip__text { min-width: 0; display: block; }
    #tab-forecast .wd-radar-groundstrip__verdict { display: block; font-size: 0.78rem; font-weight: 800; }
    #tab-forecast .wd-radar-groundstrip__sub {
        display: block;
        font-size: 0.66rem;
        color: var(--wd-text-muted);
        margin-top: 1px;
    }
    #tab-forecast .wd-radar-groundstrip__go {
        margin-left: auto;
        font-size: var(--wd-font-size-xs);
        font-weight: 800;
        color: var(--wd-green);
        white-space: nowrap;
    }
    #tab-forecast .wd-fc-ground { display: none; }

    /* ── What to wear: stacked rows with the "why" restored ── */
    #tab-forecast .wd-gear__table { display: block; }
    #tab-forecast .wd-gear__table thead { display: none; }
    #tab-forecast .wd-gear__table tbody { display: block; }
    #tab-forecast .wd-gear__table tbody tr {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) 14px;
        column-gap: 10px;
        align-items: center;
        border-top: 1px solid var(--wd-border);
        padding: 8px 0;
    }
    #tab-forecast .wd-gear__table td { display: block; border: 0; padding: 0; }
    #tab-forecast .wd-gear__table-zone {
        grid-column: 1;
        grid-row: 1 / span 2;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--wd-text-muted);
    }
    #tab-forecast .wd-gear__table-item {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.78rem;
        font-weight: 700;
    }
    /* td qualifier needed: the td{display:block} rule above is (1,1,1) and
       would outrank a bare class selector's display:none */
    #tab-forecast .wd-gear__table td.wd-gear__table-material { display: none; }
    #tab-forecast .wd-gear__table-reason {
        display: block;
        grid-column: 2;
        grid-row: 2;
        font-size: 0.62rem;
        color: var(--wd-text-muted);
    }
    #tab-forecast .wd-gear__table-dot {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 380px) {
    /* hero__main side padding drops to 14px here — keep the glass bar flush */
    .wd-page .wd-hero__metrics { left: 14px; right: 14px; }
}


/* WeatherDuck unified tabs CSS 83-forecast-h-what-to-wear-mobile.css: 15-what-to-wear-mobile.css.
   Regrouped from 15-what-to-wear-mobile.css on 2026-09-14; parts keep their internal order. */
/* ═══════════════════════════════════════════════════════════════
   WHAT TO WEAR — compact trailhead plan (mobile)
   Desktop retains the detailed BMC-style table. Phones group the
   same recommendations by the action a walker needs to take.
   ═══════════════════════════════════════════════════════════════ */
.wd-gear__mobile { display: none; }
.wd-gear__day-scroll { display: none !important; }

@media (max-width: 480px) {
    body.page-template-page-forecast-unified .wd-gear {
        padding: var(--wd-card-padding-mobile);
    }

    body.page-template-page-forecast-unified .wd-gear__table,
    body.page-template-page-forecast-unified .wd-gear__footer {
        display: none !important;
    }

    body.page-template-page-forecast-unified .wd-gear__mobile {
        display: block;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-nav {
        display: flex;
        align-items: center;
        gap: var(--wd-space-xs);
        min-width: 0;
        margin-bottom: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__days {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__days::-webkit-scrollbar {
        display: none;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn {
        flex: 0 0 auto !important;
        min-height: calc(var(--wd-control-h) - var(--wd-space-sm)) !important;
        padding: var(--wd-space-sm) var(--wd-space-md) !important;
        border: 1px solid var(--wd-border) !important;
        border-radius: var(--wd-radius-sm) !important;
        background: var(--wd-bg-subtle) !important;
        box-shadow: none !important;
        color: var(--wd-text-secondary) !important;
        font-family: var(--wd-font) !important;
        font-size: var(--wd-font-size-xs) !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        appearance: none !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn:hover {
        background: var(--wd-bg-card) !important;
        color: var(--wd-text-primary) !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn:focus,
    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn:active {
        outline: 0 !important;
        box-shadow: none !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn:focus-visible {
        box-shadow: var(--wd-focus-ring) !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn--active,
    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn--active:hover,
    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn--active:focus,
    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-btn--active:active {
        border-color: var(--wd-green) !important;
        background: var(--wd-green) !important;
        color: var(--wd-text-on-green) !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: calc(var(--wd-control-h) - var(--wd-space-sm)) !important;
        min-width: calc(var(--wd-control-h) - var(--wd-space-sm)) !important;
        height: calc(var(--wd-control-h) - var(--wd-space-sm)) !important;
        padding: 0 !important;
        border: 1px solid var(--wd-border) !important;
        border-radius: var(--wd-radius-pill) !important;
        background: var(--wd-bg-card) !important;
        box-shadow: none !important;
        color: var(--wd-green) !important;
        cursor: pointer;
        font-family: var(--wd-font) !important;
        line-height: 1 !important;
        appearance: none !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll span {
        font-size: var(--wd-font-size-xl);
        font-weight: 700;
        line-height: 1;
        transform: translateY(-0.04em);
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll:hover:not(:disabled) {
        border-color: var(--wd-green) !important;
        background: var(--wd-green-light) !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll:focus,
    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll:active {
        outline: 0 !important;
        box-shadow: none !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll:focus-visible {
        box-shadow: var(--wd-focus-ring) !important;
    }

    body.page-template-page-forecast-unified .wd-gear .wd-gear__day-scroll:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .wd-gear__plan-intro {
        margin-bottom: var(--wd-space-sm);
        padding: var(--wd-space-sm) var(--wd-space-sm);
        border-left: var(--wd-space-xs) solid var(--wd-green);
        background: color-mix(in srgb, var(--wd-green-light) 42%, transparent);
        color: var(--wd-green-hover);
        font-size: var(--wd-font-size-xs);
        font-weight: 600;
        line-height: 1.4;
    }

    .wd-gear__plan-intro strong { font-weight: 800; }

    .wd-gear__plan {
        display: grid;
        gap: var(--wd-space-sm);
    }

    .wd-gear__plan-group {
        overflow: hidden;
        border: 1px solid var(--wd-border);
        border-radius: var(--wd-radius-sm);
    }

    .wd-gear__plan-group-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--wd-space-sm);
        min-height: var(--wd-space-2xl);
        padding: var(--wd-space-xs) var(--wd-space-sm);
        background: var(--wd-bg-subtle);
    }

    .wd-gear__plan-group-title {
        min-width: 0;
        color: var(--wd-green);
        font-size: calc(var(--wd-font-size-xs) * 0.84);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .wd-gear__plan-group-note {
        min-width: 0;
        color: var(--wd-text-muted);
        font-size: calc(var(--wd-font-size-xs) * 0.78);
        font-weight: 600;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .wd-gear__plan-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .wd-gear .wd-gear__plan-item {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: calc(var(--wd-space-3xl) + var(--wd-space-md)) !important;
        padding: var(--wd-space-sm) !important;
        overflow: hidden;
        border: 0 !important;
        border-top: 1px solid var(--wd-border) !important;
        border-right: 1px solid var(--wd-border) !important;
        border-radius: 0 !important;
        background: var(--wd-bg-card) !important;
        box-shadow: none !important;
        color: var(--wd-text-primary) !important;
        cursor: pointer;
        font-family: var(--wd-font) !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        appearance: none !important;
    }

    .wd-gear .wd-gear__plan-item:nth-child(even),
    .wd-gear .wd-gear__plan-item--wide {
        border-right: 0 !important;
    }

    .wd-gear .wd-gear__plan-item--wide { grid-column: 1 / -1; }

    .wd-gear .wd-gear__plan-item:hover,
    .wd-gear .wd-gear__plan-item--open {
        background: color-mix(in srgb, var(--wd-green-light) 25%, var(--wd-bg-card)) !important;
    }

    .wd-gear .wd-gear__plan-item:focus-visible {
        position: relative;
        z-index: 1;
        outline: 0;
        box-shadow: var(--wd-focus-ring);
    }

    .wd-gear__plan-item-top {
        display: flex;
        align-items: center;
        gap: var(--wd-space-xs);
        margin-bottom: var(--wd-space-xs);
    }

    .wd-gear__plan-dot {
        display: inline-block;
        flex: 0 0 auto;
        width: var(--wd-space-sm);
        height: var(--wd-space-sm);
        border-radius: var(--wd-radius-pill);
        background: var(--wd-warning);
    }

    .wd-gear__plan-dot--essential { background: var(--wd-error); }

    .wd-gear__plan-zone {
        color: var(--wd-text-muted);
        font-size: calc(var(--wd-font-size-xs) * 0.75);
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .wd-gear__plan-name {
        display: block;
        min-width: 0;
        max-width: 100%;
        color: var(--wd-text-primary);
        font-size: var(--wd-font-size-xs);
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
        white-space: normal !important;
        word-break: normal;
    }

    .wd-gear__plan-reason {
        display: none;
        margin-top: var(--wd-space-xs);
        color: var(--wd-text-muted);
        font-size: calc(var(--wd-font-size-xs) * 0.84);
        line-height: 1.4;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .wd-gear__plan-item--open .wd-gear__plan-reason { display: block; }

    .wd-gear__plan-hint {
        margin: var(--wd-space-xs) 0 var(--wd-space-sm);
        color: var(--wd-text-muted);
        font-size: calc(var(--wd-font-size-xs) * 0.82);
        line-height: 1.4;
        text-align: right;
    }

    .wd-gear__mobile-note {
        margin: 0 calc(-1 * var(--wd-card-padding-mobile)) calc(-1 * var(--wd-card-padding-mobile));
        border-top: 1px solid var(--wd-border);
        background: var(--wd-bg-subtle);
        color: var(--wd-text-muted);
        font-size: calc(var(--wd-font-size-xs) * 0.88);
        line-height: 1.45;
    }

    .wd-gear__mobile-note-summary {
        display: flex;
        align-items: center;
        gap: var(--wd-space-xs);
        padding: var(--wd-space-sm) var(--wd-card-padding-mobile) var(--wd-space-xs);
        font-weight: 600;
    }

    .wd-gear__mobile-note p {
        margin: 0;
        padding: 0 var(--wd-card-padding-mobile) var(--wd-space-sm);
    }

    .wd-gear__mobile-note a {
        color: var(--wd-green);
        font-weight: 700;
        text-decoration: none;
    }
}


/* WeatherDuck unified tabs CSS 84-forecast-i-best-window-split.css: 16-best-window-split.css.
   Regrouped from 16-best-window-split.css on 2026-09-14; parts keep their internal order. */
/* ═══════════════════════════════════════════════════════════════
   BEST ACTIVITY WINDOW — split layout (Jul 2026)
   Desktop (≥769px): original A21 layout — header buttons, decision
   line, tinted day boxes. Mobile (≤768px): B1 redesign — banner
   (day average leads, best window in the white inset), fixed 7-day
   tab strip, Day avg/Best avg toggle, full-width Customise row.
   .wd-bw-desk = desktop-only, .wd-bw-mob = mobile-only.
   Keep at file end so it wins cascade ties against older passes.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .wd-bw-desk { display: none !important; }
}
@media (min-width: 769px) {
    .wd-bw-mob { display: none !important; }
}

/* ── Banner (mobile-only element) ── */
.wd-bw-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-md);
    padding: 14px 16px;
    border-radius: var(--wd-radius-md);
    transition: background 0.3s ease;
}
.wd-bw-banner--excellent { background: var(--wd-score-excellent); color: var(--wd-score-excellent-text); }
.wd-bw-banner--good      { background: var(--wd-score-good);      color: var(--wd-score-good-text); }
.wd-bw-banner--fair      { background: var(--wd-score-fair);      color: var(--wd-score-fair-text); }
.wd-bw-banner--poor      { background: var(--wd-score-poor);      color: var(--wd-score-poor-text); }
.wd-bw-banner--terrible  { background: var(--wd-score-bad);       color: var(--wd-score-bad-text); }
.wd-bw-banner--none      { background: var(--wd-score-past);      color: var(--wd-text-secondary); }
.wd-bw-banner__txt { min-width: 0; }
.wd-bw-banner__label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
}
#wd-bw-banner .wd-bw-banner__big {
    margin-top: 1px;
    color: inherit;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
#wd-bw-banner .wd-bw-banner__big small {
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.7;
}
.wd-bw-banner__sub {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.85;
}
.wd-bw-banner__win {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
}
.wd-bw-banner__win-cap {
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wd-text-muted);
}
.wd-bw-banner__win-time {
    margin-top: 2px;
    color: var(--wd-text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
#wd-bw-banner .wd-bw-banner__win-avg {
    margin-top: 2px;
    color: var(--wd-text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
}

/* ── 7-day tab strip (mobile-only element) ── */
.wd-bw-tabs {
    display: flex;
    margin-top: var(--wd-space-md);
    border-bottom: 1px solid var(--wd-border);
}
.wd-bw-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 8px;
    background: none !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
}
.wd-bw-tab:hover,
.wd-bw-tab:focus,
.wd-bw-tab:active {
    background: none !important;
    box-shadow: none !important;
    outline: 0;
}
.wd-bw-tab:focus-visible {
    outline: 2px solid rgba(66, 90, 71, 0.35);
    outline-offset: -2px;
}
.wd-bw-tab__label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--wd-text-muted);
}
.wd-bw-tab__score {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--wd-text-secondary);
}
.wd-bw-tab__dot {
    width: 7px;
    height: 7px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--wd-score-past);
}
.wd-bw-tab--excellent .wd-bw-tab__dot { background: var(--wd-score-excellent-strong); }
.wd-bw-tab--good      .wd-bw-tab__dot { background: var(--wd-score-good-strong); }
.wd-bw-tab--fair      .wd-bw-tab__dot { background: var(--wd-score-fair-strong); }
.wd-bw-tab--poor      .wd-bw-tab__dot { background: var(--wd-score-poor-strong); }
.wd-bw-tab--terrible  .wd-bw-tab__dot { background: var(--wd-score-bad-strong); }
.wd-bw-tab--active { border-bottom-color: var(--wd-green) !important; }
.wd-bw-tab--active .wd-bw-tab__label { color: var(--wd-text-primary); font-weight: 700; }
.wd-bw-tab--active .wd-bw-tab__score { color: var(--wd-text-primary); }

/* ── Full-width Customise row (mobile-only element).
      !important guards against the parent theme's reset.css button
      rules ([type="button"] sets inline-block/1rem/centered) and
      Elementor kit button styles — both load after this sheet. ── */
.wd-bw-customise-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--wd-space-sm) !important;
    min-height: 44px !important;
    margin: 0 14px 14px !important;
    padding: 10px 12px 10px 14px !important;
    border: 1px solid rgba(47, 74, 54, 0.28) !important;
    border-radius: var(--wd-radius-sm) !important;
    background: var(--wd-bg-subtle) !important;
    box-shadow: none !important;
    color: var(--wd-text-primary) !important;
    -webkit-text-fill-color: currentColor;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
}
.wd-bw-customise-row:hover,
.wd-bw-customise-row:focus,
.wd-bw-customise-row:active,
.wd-bw-customise-row[aria-expanded="true"] {
    background: #ffffff !important;
    border-color: rgba(66, 90, 71, 0.58) !important;
    box-shadow: none !important;
    color: var(--wd-text-primary) !important;
    outline: 0;
}
.wd-bw-customise-row:focus-visible {
    outline: 2px solid rgba(66, 90, 71, 0.35);
    outline-offset: 2px;
}
.wd-bw-customise-row .wd-bw-mode-badge {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
    background: var(--wd-green-light);
    color: var(--wd-green);
}
.wd-bw-customise-row .wd-bw-mode-badge--custom {
    background: rgba(46, 125, 181, 0.10);
    color: var(--wd-blue);
}
.wd-bw-customise-row .wd-customiser-collapse-btn__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
}
.wd-bw-customise-row[aria-expanded="true"] .wd-customiser-collapse-btn__chevron {
    transform: translateY(2px) rotate(225deg);
}

/* ── "What this shows" dropdown toggle (mobile-only element) ── */
.wd-bw-desc-toggle {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--wd-space-sm) !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--wd-text-primary) !important;
    -webkit-text-fill-color: currentColor;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
}
.wd-bw-desc-toggle:hover,
.wd-bw-desc-toggle:focus,
.wd-bw-desc-toggle:active {
    background: none !important;
    box-shadow: none !important;
    color: var(--wd-text-primary) !important;
    outline: 0;
}
.wd-bw-desc-toggle:focus-visible {
    outline: 2px solid rgba(66, 90, 71, 0.35);
    outline-offset: 2px;
}
.wd-bw-desc-toggle .wd-customiser-collapse-btn__chevron {
    flex: 0 0 auto;
}
.wd-bw-desc-toggle[aria-expanded="true"] .wd-customiser-collapse-btn__chevron {
    transform: translateY(2px) rotate(225deg);
}

/* Mobile-only: the display:flex !important rules on the customise row and
   desc toggle above outrank the generic .wd-bw-mob desktop guard (same
   specificity, earlier in file), so hide both explicitly on desktop — the
   header button replaces the customise row there, and the description is
   always expanded with its own bold heading. Must stay BELOW both blocks. */
@media (min-width: 769px) {
    .wd-bw-customise-row,
    .wd-bw-desc-toggle { display: none !important; }
}

/* Description body: on desktop behaves as before (direct flex children
   of the description column); collapsed/expanded only on mobile. */
.wd-best-window__description-body {
    display: contents;
}

/* Safety net: collapsed panel hidden (duplicates the A21 rule) */
.wd-bw-shell .wd-activity-score__customiser--collapsed { display: none; }

/* ── Mobile pass for SHARED elements. Heavy prefix so these outrank
      the legacy A21 mobile pass (body.page… #tab-forecast …) above ── */
@media (max-width: 768px) {
    /* header stays one row: title left, badge chip right */
    #tab-forecast .wd-bw-shell .wd-activity-score__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-col-left {
        display: block;
        padding: 12px 14px 14px;
    }

    /* legacy pass hides the description on mobile — B1 keeps it */
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description {
        display: block;
        margin-top: var(--wd-space-md);
        padding: 0;
        border: 0;
        font-size: var(--wd-font-size-xs);
        color: var(--wd-text-secondary);
        line-height: 1.5;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description strong {
        display: block;
        margin-bottom: 2px;
        color: var(--wd-text-primary);
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__formula {
        display: block;
        margin-top: 4px;
        color: var(--wd-text-muted);
    }

    /* description body starts collapsed; the toggle button opens it */
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description-body {
        display: none;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description-body.wd-bw-desc-body--open {
        display: block;
        padding: 2px 2px 4px;
    }

    /* chart: taller bars, desktop-style 0/5/10 gridlines via the shared
       ::before overlay, axis LEFT of the bars, every-3rd hour label */
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__bar {
        position: relative;
        display: flex;
        height: 96px;
        min-height: 96px;
        max-height: none;
        gap: 3px;
        /* generous top margin: the "10" axis label pokes ~5px above the
           chart and needs clear air below the day-tab strip */
        margin: 18px 0 0;
        padding: 0 0 0 30px;
        border-bottom: 0;
        background-image: none;
    }
    /* gridlines start right of the 22px axis gutter so they never run
       under the 0/5/10 labels; line pattern inherits from the desktop
       .wd-fc-top-grid ::before rule */
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__bar::before {
        content: '';
        top: 0;
        bottom: 0;
        left: 26px;
        right: 0;
    }
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__labels {
        display: flex;
        gap: 3px;
        margin-top: 3px;
        padding: 0 0 0 30px;
    }
    .wd-bw-shell .wd-best-window__label-cell { visibility: hidden; }
    .wd-bw-shell .wd-best-window__label-cell:nth-child(3n+1) { visibility: visible; }
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__axis {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        margin: 0;
        width: 22px;
    }
    /* labels sit centred on their gridlines, same as desktop */
    .wd-bw-shell .wd-best-window__axis span:nth-child(1) { top: 0; }
    .wd-bw-shell .wd-best-window__axis span:nth-child(2) { top: 50%; }
    .wd-bw-shell .wd-best-window__axis span:nth-child(3) { top: 100%; }
    /* past hours as low stubs, like the preview (inline style needs the !important) */
    body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__cell-fill--past {
        height: 12% !important;
    }
}

/* ── Small phones: tighten the banner ── */
@media (max-width: 400px) {
    .wd-bw-banner { padding: 12px; }
    .wd-bw-banner__win { min-width: 100px; padding: 8px 10px; }
}

/* Ground card-title metadata keeps the canonical title band. */
body.page-template-page-forecast-unified #tab-grounds .wd-gauge-title-meta {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

/* Approved compact Best Activity Window: retain the desktop layout. */
.wd-bw-shell .wd-customiser-var__controls {
	display: contents;
}

@media (max-width: 768px) {
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell {
		--wd-bw-line: calc(var(--wd-space-xs) / 4);
		--wd-bw-outline: calc(var(--wd-space-xs) / 2);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-activity-score__header {
		min-height: var(--wd-control-h) !important;
		height: auto !important;
		padding: 0 0 0 var(--wd-space-md) !important;
		gap: var(--wd-space-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-activity-score__actions {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-help {
		display: grid;
		place-items: center;
		flex: 0 0 var(--wd-control-h);
		min-height: var(--wd-control-h);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--wd-green);
		box-shadow: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-help svg,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-mobile-actions svg {
		width: var(--wd-space-lg);
		height: var(--wd-space-lg);
		flex-shrink: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-col-left {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: var(--wd-space-sm) var(--wd-space-md) var(--wd-space-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tabs {
		order: 0;
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: var(--wd-space-xs);
		margin: 0;
		border: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab {
		--wd-bw-day-fill: var(--wd-score-past);
		--wd-bw-day-edge: var(--wd-text-secondary);
		/* Parent theme reset.css ([type="button"]) forces inline-block after this
		   sheet loads, which lays the label and score side by side. Re-assert the
		   column stack here so the score sits below the day abbreviation. */
		display: flex !important;
		flex-direction: column !important;
		align-items: center;
		justify-content: center;
		min-height: calc(var(--wd-control-h) + var(--wd-space-xs));
		padding: var(--wd-space-xs) 0 !important;
		gap: calc(var(--wd-space-xs) / 2);
		border: var(--wd-bw-line) solid color-mix(in srgb, var(--wd-bw-day-edge) 30%, var(--wd-bg-card)) !important;
		background: color-mix(in srgb, var(--wd-bw-day-fill) 50%, var(--wd-bg-card)) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		line-height: 1.2;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--excellent {
		--wd-bw-day-fill: var(--wd-score-excellent);
		--wd-bw-day-edge: var(--wd-score-excellent-text);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--good {
		--wd-bw-day-fill: var(--wd-score-good);
		--wd-bw-day-edge: var(--wd-score-good-text);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--fair {
		--wd-bw-day-fill: var(--wd-score-fair);
		--wd-bw-day-edge: var(--wd-score-fair-text);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--poor {
		--wd-bw-day-fill: var(--wd-score-poor);
		--wd-bw-day-edge: var(--wd-score-poor-text);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--terrible {
		--wd-bw-day-fill: var(--wd-score-bad);
		--wd-bw-day-edge: var(--wd-score-bad-text);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab--active {
		border-color: var(--wd-bw-day-edge) !important;
		box-shadow: inset 0 0 0 var(--wd-bw-line) var(--wd-bw-day-edge) !important;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab__label {
		color: var(--wd-text-secondary);
		font-size: calc(var(--wd-font-size-xs) * 0.92);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab__score {
		color: var(--wd-text-primary);
		font-size: var(--wd-font-size-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tab__dot {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner {
		order: 1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: var(--wd-space-md);
		padding: var(--wd-space-md) 0;
		background: transparent;
		border-radius: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner__label,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner__win-cap {
		font-size: var(--wd-font-size-xs);
		font-weight: 600;
		color: var(--wd-text-secondary);
		letter-spacing: 0;
		text-transform: none;
		opacity: 1;
		line-height: 1.2;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell #wd-bw-banner .wd-bw-banner__big {
		font-size: calc(var(--wd-font-size-2xl) + var(--wd-font-size-xs) / 4);
		line-height: 1.15;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell #wd-bw-banner .wd-bw-banner__big small {
		font-size: var(--wd-font-size-xs);
		color: var(--wd-text-secondary);
		font-weight: 500;
		opacity: 1;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner__sub {
		font-size: var(--wd-font-size-xs);
		font-weight: 500;
		color: var(--wd-text-secondary);
		line-height: 1.4;
		opacity: 1;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner__win {
		min-width: 0;
		padding: var(--wd-space-sm) var(--wd-space-md);
		text-align: left;
		background: color-mix(in srgb, var(--wd-green-light) 35%, var(--wd-bg-card));
		border-radius: var(--wd-radius-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-banner__win-time {
		font-size: var(--wd-font-size-md);
		color: var(--wd-green-hover);
		line-height: 1.6;
		white-space: normal;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell #wd-bw-banner .wd-bw-banner__win-avg {
		font-size: var(--wd-font-size-xs);
		font-weight: 500;
		color: var(--wd-green);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__bar {
		order: 2;
		height: calc(var(--wd-space-md) * 6);
		min-height: calc(var(--wd-space-md) * 6);
		margin: var(--wd-space-sm) 0 0;
		padding-left: var(--wd-space-2xl);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__bar::before {
		left: calc(var(--wd-space-2xl) - var(--wd-space-xs));
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__labels {
		order: 3;
		padding-left: var(--wd-space-2xl);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description {
		order: 4;
		margin: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-best-window__description-body.wd-bw-desc-body--open {
		padding: var(--wd-space-md) 0 var(--wd-space-xs);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-hours-hidden .wd-best-window__bar,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-hours-hidden .wd-best-window__labels {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-mobile-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		border-top: var(--wd-bw-line) solid var(--wd-border);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-mobile-actions > button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: var(--wd-control-h) !important;
		margin: 0 !important;
		padding: var(--wd-space-xs) var(--wd-space-sm) !important;
		gap: var(--wd-space-xs);
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--wd-green) !important;
		-webkit-text-fill-color: currentColor;
		font-family: var(--wd-font) !important;
		font-size: var(--wd-font-size-xs) !important;
		font-weight: 650 !important;
		line-height: 1.2 !important;
		box-shadow: none !important;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-mobile-actions > .wd-bw-customise-row {
		border-left: var(--wd-bw-line) solid var(--wd-border) !important;
		background: var(--wd-bg-subtle) !important;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-customise-row > span:first-of-type {
		flex: 0 1 auto;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-customise-row .wd-customiser-collapse-btn__chevron {
		margin-left: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-activity-score__customiser:not(.wd-activity-score__customiser--collapsed) {
		display: flex;
		flex-direction: column;
		gap: var(--wd-space-md);
		padding: var(--wd-space-md);
		background: var(--wd-bg-subtle);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-header .wd-section-title,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-legend {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-intro {
		font-size: var(--wd-font-size-xs);
		margin: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-presets,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-grid {
		margin: 0;
		gap: var(--wd-space-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-presets__group {
		flex-wrap: wrap;
		gap: var(--wd-space-sm);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-presets__group--select {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-presets__select,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-presets__name {
		min-width: 0;
		min-height: var(--wd-control-h);
		font-size: calc(var(--wd-font-size-3xl) / 2);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-preset-btn,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-chip,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-reset {
		min-height: var(--wd-control-h);
		font-size: var(--wd-font-size-xs);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var--collapsible {
		gap: 0;
		padding: 0;
		border: 0;
		border-top: var(--wd-bw-line) solid var(--wd-border-strong);
		border-radius: 0;
		background: transparent;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var__head {
		gap: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var__toggle {
		display: flex;
		align-items: center;
		flex: 1;
		gap: var(--wd-space-sm);
		min-width: 0;
		min-height: var(--wd-control-h);
		padding: var(--wd-space-sm) 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--wd-text-primary);
		font: inherit;
		font-size: var(--wd-font-size-xs);
		text-align: left;
		box-shadow: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var__summary {
		margin-left: auto;
		color: var(--wd-text-secondary);
		font-weight: 500;
		text-align: right;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var__indicator {
		color: var(--wd-green);
		font-size: var(--wd-font-size-lg);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var--collapsible:not(.wd-customiser-var--open) .wd-customiser-var__controls,
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var--collapsible:not(.wd-customiser-var--open) .wd-customiser-var__remove {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var--open .wd-customiser-var__controls {
		display: flex;
		flex-direction: column;
		gap: var(--wd-space-sm);
		padding-bottom: var(--wd-space-md);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-var__remove {
		min-height: var(--wd-control-h) !important;
		min-width: var(--wd-control-h);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-micro {
		font-size: var(--wd-font-size-xs);
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-impact--dots {
		display: flex;
		gap: var(--wd-space-xs);
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-impact--dots button {
		flex: 1;
		width: auto;
		height: auto;
		min-height: var(--wd-control-h);
		padding: var(--wd-space-xs);
		border: var(--wd-bw-line) solid var(--wd-border-strong) !important;
		border-radius: var(--wd-radius-sm) !important;
		background: var(--wd-bg-card) !important;
		color: var(--wd-green);
		font-size: var(--wd-font-size-xs);
		transform: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-impact--dots button.active {
		background: var(--wd-green-light) !important;
		font-weight: 700;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-customiser-impact__word {
		display: none;
	}
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell button:focus-visible {
		outline: var(--wd-bw-outline) solid var(--wd-green) !important;
		outline-offset: calc(-1 * var(--wd-bw-outline));
	}
}

@media (max-width: 480px) {
	body.page-template-page-forecast-unified #tab-forecast .wd-bw-shell .wd-bw-tabs {
		gap: calc(var(--wd-space-xs) / 2);
	}
}


/* WeatherDuck unified tabs CSS 90-grounds-b-compact.css: 17-grounds-compact.css.
   Regrouped from 17-grounds-compact.css on 2026-09-14; parts keep their internal order. */
/* Approved compact Ground Conditions cards. Shared header and other tabs keep their layout. */
#tab-grounds .wd-grounds-compact { display: grid; gap: var(--wd-space-lg); }
#tab-grounds .wd-grounds-compact .wd-grounds-err { margin: 0; font-size: var(--wd-font-size-sm); }
#tab-grounds .wd-grounds-err:empty { display: none; }
#tab-grounds .wd-grounds-title-note { margin-left: auto; font-size: var(--wd-font-size-xs); font-weight: 500; letter-spacing: normal; text-transform: none; text-align: right; }
#tab-grounds .wd-grounds-dry-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wd-space-2xl); align-items: center; }
#tab-grounds .wd-grounds-verdict { display: flex; gap: var(--wd-space-md); align-items: baseline; flex-wrap: wrap; }
#tab-grounds .wd-grounds-verdict h3, #tab-grounds .wd-grounds-verdict > span { font: 800 var(--wd-font-size-2xl)/1.2 var(--wd-card-font); }
#tab-grounds .wd-grounds-verdict > span { color: var(--wd-ground-score-color, var(--wd-text-secondary)); white-space: nowrap; }
#tab-grounds #wd-ground-score { font: inherit; color: inherit; }
#tab-grounds .wd-grounds-advice { margin-top: var(--wd-space-sm); font-size: var(--wd-font-size-sm); line-height: 1.6; }
#tab-grounds .wd-ground-compact .wd-ground-scale { margin-top: var(--wd-space-lg); padding: 0; }
#tab-grounds .wd-ground-compact .wd-ground-scale-bar { height: var(--wd-space-sm); background: linear-gradient(90deg, var(--wd-dryness-0), var(--wd-dryness-2), var(--wd-dryness-4), var(--wd-dryness-6), var(--wd-dryness-8), var(--wd-dryness-10)); }
#tab-grounds .wd-ground-compact .wd-ground-scale-labels { margin-top: var(--wd-space-xs); font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); }
#tab-grounds .wd-ground-compact .wd-ground-scale-marker { top: calc(-1 * var(--wd-space-xs)); bottom: auto; height: var(--wd-space-lg); width: 2px; background: var(--wd-text-primary); border: 0; border-radius: 0; transform: translateX(-50%); }
#tab-grounds .wd-ground-compact .wd-ground-scale-marker::after { display: none; }
#tab-grounds .wd-grounds-expect { border-left: 1px solid var(--wd-border); padding-left: var(--wd-space-2xl); }
#tab-grounds .wd-grounds-expect h3 { font-size: var(--wd-font-size-md); font-weight: 700; margin-bottom: var(--wd-space-xs); }
#tab-grounds .wd-grounds-expect p { display: flex; justify-content: space-between; gap: var(--wd-space-md); border-bottom: 1px solid var(--wd-border); padding: var(--wd-space-sm) 0; font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-expect p:last-child { border-bottom: 0; }
#tab-grounds .wd-grounds-expect p > span { color: var(--wd-text-secondary); }
#tab-grounds .wd-grounds-expect strong { text-align: right; }
#tab-grounds .wd-grounds-details { margin-top: var(--wd-space-lg); border-top: 1px solid var(--wd-border); }
#tab-grounds .wd-grounds-details summary, #tab-grounds .wd-grounds-gauges summary { font-size: var(--wd-font-size-xs); font-weight: 700; cursor: pointer; padding: var(--wd-space-md) 0; }
#tab-grounds .wd-grounds-details > div { color: var(--wd-text-secondary); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-details p + p { margin-top: var(--wd-space-sm); }
#tab-grounds .wd-grounds-mobile-expect { display: none; }
#tab-grounds .wd-grounds-note { font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); margin-top: var(--wd-space-sm); }
#tab-grounds .wd-grounds-teaser-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--wd-space-2xl); align-items: center; }
#tab-grounds .wd-grounds-teaser h3 { max-width: 18ch; font-size: var(--wd-font-size-2xl); line-height: 1.2; font-weight: 800; margin-bottom: var(--wd-space-sm); }
#tab-grounds .wd-grounds-teaser p { font-size: var(--wd-font-size-sm); line-height: 1.6; color: var(--wd-text-secondary); }
#tab-grounds .wd-grounds-teaser-preview { border-left: 1px solid var(--wd-border); padding-left: var(--wd-space-2xl); }
#tab-grounds .wd-grounds-teaser-preview h4 { margin: 0 0 var(--wd-space-md); font-size: var(--wd-font-size-sm); font-weight: 700; color: var(--wd-green); }
#tab-grounds .wd-grounds-spectrum { height: var(--wd-space-sm); border-radius: var(--wd-radius-sm); background: linear-gradient(90deg, var(--wd-dryness-0), var(--wd-dryness-2), var(--wd-dryness-4), var(--wd-dryness-6), var(--wd-dryness-8), var(--wd-dryness-10)); }
#tab-grounds .wd-grounds-scale-ends { display: flex; justify-content: space-between; font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); margin-top: var(--wd-space-xs); }
#tab-grounds .wd-grounds-teaser-preview ul { padding-left: var(--wd-space-lg); margin: var(--wd-space-md) 0 0; color: var(--wd-text-secondary); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-teaser-preview li { padding: var(--wd-space-xs) 0; }
#tab-grounds .wd-grounds-account-actions { display: flex; gap: var(--wd-space-lg); flex-wrap: wrap; align-items: center; margin-top: var(--wd-space-lg); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-account-actions a { color: var(--wd-text-primary); text-underline-offset: var(--wd-space-xs); }
#tab-grounds .wd-grounds-account-actions .wd-grounds-account-primary { display: inline-flex; align-items: center; min-height: var(--wd-control-h); padding: var(--wd-space-sm) var(--wd-space-lg); background: var(--wd-green); color: var(--wd-text-on-green); border: 1px solid var(--wd-green); border-radius: var(--wd-radius-sm); text-decoration: none; font-size: var(--wd-font-size-sm); font-weight: 700; }
#tab-grounds .wd-grounds-account-primary:hover { background: var(--wd-green-hover); }
#tab-grounds .wd-grounds-teaser .wd-grounds-account-note { margin-top: var(--wd-space-xs); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-teaser-mobile { display: none; }
#tab-grounds .wd-grounds-rain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: var(--wd-space-xl); align-items: start; }
#tab-grounds .wd-grounds-rain-main { min-width: 0; }
#tab-grounds .wd-grounds-station { margin-bottom: var(--wd-space-md); font-size: var(--wd-font-size-sm); }
#tab-grounds .wd-grounds-station > span { color: var(--wd-text-secondary); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-compact .wd-rainfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wd-space-md); padding: 0; border: 0; margin: 0 0 var(--wd-space-lg); background: transparent; }
#tab-grounds .wd-grounds-compact .wd-rainfig { padding: 0; border: 0; min-width: 0; }
#tab-grounds .wd-grounds-compact .wd-rainfig__label { text-transform: none; letter-spacing: normal; font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); }
#tab-grounds .wd-grounds-compact .wd-rainfig__value { font-size: var(--wd-font-size-xl); line-height: 1.6; font-weight: 800; overflow-wrap: anywhere; }
#tab-grounds .wd-grounds-compact .wd-rainfig__value--time { font-size: var(--wd-font-size-md); }
#tab-grounds .wd-grounds-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wd-space-sm); align-items: baseline; font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); }
#tab-grounds .wd-grounds-chart-head h3 { font-size: var(--wd-font-size-xs); font-weight: 600; }
#tab-grounds .wd-grounds-compact .wd-gauge-chartwrap { height: calc(var(--wd-space-3xl) * 5); margin-top: var(--wd-space-sm); }
#tab-grounds .wd-grounds-chart-note { font-size: var(--wd-font-size-xs); color: var(--wd-text-secondary); margin-top: var(--wd-space-sm); }
#tab-grounds .wd-grounds-gauges { border-left: 1px solid var(--wd-border); padding-left: var(--wd-space-xl); min-width: 0; }
#tab-grounds .wd-grounds-gauges summary { padding-top: 0; }
#tab-grounds .wd-grounds-gauges input { display: block; width: 100%; min-width: 0; min-height: var(--wd-control-h); margin-bottom: var(--wd-space-sm); padding: var(--wd-space-sm) var(--wd-space-md); background: var(--wd-bg-page-warm); color: var(--wd-text-primary); border: 1px solid var(--wd-border-strong); border-radius: var(--wd-radius-sm); font: inherit; font-size: var(--wd-font-size-sm); }
#tab-grounds .wd-grounds-gauge-button { display: block; width: 100%; padding: var(--wd-space-md) var(--wd-space-sm); background: transparent; color: var(--wd-text-primary); border: 0; border-bottom: 1px solid var(--wd-border); border-radius: 0; text-align: left; font: inherit; font-size: var(--wd-font-size-xs); cursor: pointer; }
#tab-grounds .wd-grounds-gauge-button[aria-pressed="true"] { background: var(--wd-green-light); border-radius: var(--wd-radius-sm); font-weight: 700; }
#tab-grounds .wd-grounds-gauge-button span { display: block; color: var(--wd-text-secondary); margin-top: var(--wd-space-xs); font-size: var(--wd-font-size-xs); font-weight: 400; }
#tab-grounds .wd-grounds-gauge-note { color: var(--wd-text-secondary); margin-top: var(--wd-space-sm); font-size: var(--wd-font-size-xs); }
@media (max-width: 768px) {
  #tab-grounds .wd-grounds-dry-grid, #tab-grounds .wd-grounds-teaser-grid, #tab-grounds .wd-grounds-rain-grid { grid-template-columns: 1fr; gap: var(--wd-space-md); }
  #tab-grounds .wd-grounds-expect, #tab-grounds .wd-grounds-teaser-preview { display: none; }
  #tab-grounds .wd-grounds-mobile-expect, #tab-grounds .wd-grounds-teaser-mobile { display: block; }
  #tab-grounds .wd-grounds-teaser-mobile { margin-top: var(--wd-space-md); }
  #tab-grounds .wd-grounds-teaser h3 { max-width: 20ch; }
  #tab-grounds .wd-grounds-account-actions .wd-grounds-account-primary { font-size: var(--wd-font-size-xs); padding-inline: var(--wd-space-md); }
  #tab-grounds .wd-grounds-compact .wd-rainfigs { gap: var(--wd-space-sm); }
  #tab-grounds .wd-grounds-compact .wd-rainfig__value { font-size: var(--wd-font-size-lg); }
  #tab-grounds .wd-grounds-compact .wd-rainfig__value--time { font-size: var(--wd-font-size-sm); }
  #tab-grounds .wd-grounds-gauges { border-left: 0; border-top: 1px solid var(--wd-border); padding: 0; }
  #tab-grounds .wd-grounds-gauges summary { padding: var(--wd-space-md) 0; min-height: var(--wd-control-h); }
  #tab-grounds .wd-grounds-gauges input { font-size: var(--wd-space-lg); }
  #tab-grounds .wd-grounds-evidence-card .wd-grounds-title-note { display: none; }
  #tab-grounds .wd-grounds-compact .wd-gauge-chartwrap { height: calc(var(--wd-space-3xl) * 4); }
}

/* Ground layout uses the shared card surfaces, spacing and green title bands. */
#tab-grounds .wd-grounds-compact { margin: 0; padding: 0; grid-template-columns: minmax(0,1fr); }
#tab-grounds .wd-grounds-compact > * { min-width: 0; }
#tab-grounds .wd-grounds-compact [hidden] { display: none !important; }
#tab-grounds .wd-grounds-verdict h3, #tab-grounds .wd-grounds-verdict > span { font-size: var(--wd-font-size-3xl); }
#tab-grounds .wd-ground-compact .wd-ground-scale-bar, #tab-grounds .wd-grounds-spectrum { display: flex; gap: var(--wd-space-xs); background: transparent; overflow: hidden; }
#tab-grounds .wd-ground-scale-bar > span, #tab-grounds .wd-grounds-spectrum > span { flex: 1; }
#tab-grounds .wd-ground-scale-bar > span:nth-child(1), #tab-grounds .wd-grounds-spectrum > span:nth-child(1) { background: linear-gradient(90deg,var(--wd-dryness-0),var(--wd-dryness-2)); }
#tab-grounds .wd-ground-scale-bar > span:nth-child(2), #tab-grounds .wd-grounds-spectrum > span:nth-child(2) { background: linear-gradient(90deg,var(--wd-dryness-2),var(--wd-dryness-4)); }
#tab-grounds .wd-ground-scale-bar > span:nth-child(3), #tab-grounds .wd-grounds-spectrum > span:nth-child(3) { background: linear-gradient(90deg,var(--wd-dryness-4),var(--wd-dryness-6)); }
#tab-grounds .wd-ground-scale-bar > span:nth-child(4), #tab-grounds .wd-grounds-spectrum > span:nth-child(4) { background: linear-gradient(90deg,var(--wd-dryness-6),var(--wd-dryness-8)); }
#tab-grounds .wd-ground-scale-bar > span:nth-child(5), #tab-grounds .wd-grounds-spectrum > span:nth-child(5) { background: linear-gradient(90deg,var(--wd-dryness-8),var(--wd-dryness-10)); }
#tab-grounds .wd-grounds-history { border-top: 1px solid var(--wd-border); padding-top: var(--wd-space-xl); margin-top: var(--wd-space-xl); min-width: 0; }
#tab-grounds .wd-grounds-history .wd-ground-chart-wrap, #tab-grounds .wd-grounds-history .wd-ground-layers-wrap { position: relative; width: 100%; height: calc(var(--wd-space-3xl) * 6); min-height: 0; max-height: none; margin: var(--wd-space-sm) 0 var(--wd-space-lg); padding: 0; border: 0; }
#tab-grounds .wd-grounds-history .wd-ground-layers-wrap { height: calc(var(--wd-space-3xl) * 4.5); }
#tab-grounds .wd-grounds-history #wd-ground-layers-chart { height: 100% !important; max-height: none; }
#tab-grounds .wd-ground-compact .wd-ground-scale-labels { text-transform: none; letter-spacing: normal; }
#tab-grounds .wd-grounds-map-col { min-width: 0; border-left: 1px solid var(--wd-border); padding-left: var(--wd-space-xl); }
#tab-grounds .wd-grounds-map-col .wd-grounds-map { height: calc(var(--wd-space-3xl) * 7); margin-top: var(--wd-space-md); border-radius: var(--wd-radius-sm); border: 1px solid var(--wd-border); z-index: 0; }
#tab-grounds .wd-grounds-map-key, #tab-grounds .wd-grounds-rain-key { flex-wrap: wrap; gap: var(--wd-space-sm) var(--wd-space-md); margin-top: var(--wd-space-md); font-size: var(--wd-font-size-xs); }
#tab-grounds .wd-grounds-key-forecast { background: var(--wd-moon); }
#tab-grounds .wd-grounds-key-location { background: var(--wd-moon); border: 1px solid var(--wd-chrome); }
#tab-grounds .wd-grounds-rain-key .wd-legend__swatch--checkin { border-top: 2px dotted var(--wd-text-primary); }
#tab-grounds .wd-grounds-gauges { border-left: 0; border-top: 1px solid var(--wd-border); padding: var(--wd-space-xl) 0 0; margin-top: var(--wd-space-xl); }
#tab-grounds .wd-grounds-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-lg); margin-bottom: var(--wd-space-md); }
#tab-grounds .wd-grounds-chooser-head h3 { font-size: var(--wd-font-size-md); margin: 0; }
#tab-grounds .wd-grounds-search-controls { display: flex; flex: 0 1 55%; gap: var(--wd-space-sm); min-width: 0; }
#tab-grounds .wd-grounds-search-controls input { margin: 0; background: var(--wd-bg-subtle); }
#tab-grounds .wd-grounds-compact button { cursor: pointer; }
#tab-grounds .wd-grounds-search-controls button, #tab-grounds #wd-rainx-nearest-btn { border: 1px solid var(--wd-border-strong); background: var(--wd-bg-card); color: var(--wd-text-primary); border-radius: var(--wd-radius-sm); padding: var(--wd-space-sm) var(--wd-space-md); font: inherit; font-size: var(--wd-font-size-xs); }
#tab-grounds #wd-rainx-search-btn { background: var(--wd-green); color: var(--wd-text-on-green); font-weight: 700; }
#tab-grounds #wd-rainx-gauge-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--wd-space-sm); }
#tab-grounds .wd-grounds-gauge-button { padding: var(--wd-space-md); border: 1px solid var(--wd-border); border-radius: var(--wd-radius-sm); overflow-wrap: anywhere; }
#tab-grounds .wd-grounds-gauge-button:hover { background: var(--wd-bg-subtle); }
#tab-grounds #wd-rainx-reading-note:empty { display: none; }
#tab-grounds .wd-grounds-compact button:focus-visible { outline: 2px solid var(--wd-green); outline-offset: var(--wd-space-xs); }
#tab-grounds .wd-grounds-compact input:focus { outline: none; border-color: var(--wd-search-focus-border); box-shadow: var(--wd-search-focus-ring); }
@media (max-width: 768px) {
  #tab-grounds .wd-grounds-verdict h3, #tab-grounds .wd-grounds-verdict > span { font-size: var(--wd-font-size-2xl); }
  #tab-grounds .wd-grounds-map-col { border-left: 0; border-top: 1px solid var(--wd-border); padding: var(--wd-space-lg) 0 0; }
  #tab-grounds .wd-grounds-chooser-head { align-items: stretch; flex-direction: column; }
  #tab-grounds .wd-grounds-search-controls { flex-basis: auto; }
  #tab-grounds #wd-rainx-gauge-list { grid-template-columns: 1fr; }
  #tab-grounds .wd-grounds-history .wd-ground-chart-wrap { height: calc(var(--wd-space-3xl) * 5.5); }
}
/* ========================================================= 
   Weather Duck — RainX Panel (wd-rainx-*) — FULL CSS v3.3
   ========================================================= */

.wd-rainx-wrap{
  max-width: 1240px;
  margin: 0;
  color: var(--wd-text-primary);
}

.wd-rainx-panel{
  background: var(--wd-bg-card);
  border-radius: var(--wd-radius-lg);
  padding: 0;
  box-shadow: var(--wd-shadow-lg);
  border: 1px solid var(--wd-border);
  overflow: hidden;
}

/* =========================================================
   Header
   ========================================================= */

.wd-rainx-panelhead{
  padding: var(--wd-card-padding) 20px;
  border-bottom: 1px solid var(--wd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, var(--wd-bg-card) 0%, var(--wd-bg-subtle) 100%);
}

.wd-rainx-title{
  font-size: var(--wd-font-size-xl);
  font-weight: 900;
  color: var(--wd-text-primary);
}

.wd-rainx-meta{
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--wd-text-secondary);
  opacity: 0.95;
  white-space: nowrap;
}

.wd-rainx-err{
  margin-left: 10px;
  color: #b00020;
  font-weight: 900;
}

/* =========================================================
   Main layout
   ========================================================= */

.wd-rainx-grid{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--wd-space-xl);
  padding: var(--wd-card-padding);
  align-items: start;
}

.wd-rainx-stack{
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-xl);
  min-width: 0;
}

/* =========================================================
   Cards
   ========================================================= */

.wd-rainx-card{
  background: var(--wd-bg-card);
  border-radius: 16px;
  border: 1px solid var(--wd-border);
  box-shadow: var(--wd-shadow-md);
  overflow: hidden;
}

.wd-rainx-cardhead{
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--wd-text-primary);
  border-bottom: 1px solid var(--wd-border);
}

.wd-rainx-cardnote{
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--wd-text-muted);
  font-style: italic;
  border-top: 1px solid var(--wd-border);
  background: var(--wd-bg-subtle);
}

/* Ground State (and any card where rows are direct children) */
.wd-rainx-card .wd-rainx-row{
  padding-left: 14px;
  padding-right: 14px;
}

/* =========================================================
   Map
   ========================================================= */

.wd-rainx-map{
  height: 520px;
}

/* Fix Leaflet focus outline that looks like black bars */
.wd-rainx-wrap .leaflet-container{
  outline: none !important;
}
.wd-rainx-wrap .leaflet-container:focus{
  outline: none !important;
}

/* =========================================================
   Chart
   ========================================================= */

.wd-rainx-chartwrap{
  padding: 14px 16px;
  background: #f4f7f6;
  height: var(--wd-rainx-chart-h, 374px);
}

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

/* =========================================================
   Selected station — header + compact grid
   ========================================================= */

.wd-rainx-selhead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wd-rainx-selhead-left{
  font-weight: 900;
  color: var(--wd-text-primary);
}

.wd-rainx-selhead-right{
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--wd-text-primary);
  opacity: 0.95;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

.wd-rainx-dot{
  opacity: 0.5;
  margin: 0 8px;
}

.wd-rainx-sel{
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.wd-rainx-sel-compact{
  padding: 8px 14px;
  gap: 6px 14px;
}

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

.wd-rainx-sel-compact .wd-rainx-row{
  padding: 6px 0;
}

/* remove borders on the last row of each column on desktop grid */
.wd-rainx-row:nth-last-child(-n+2){
  border-bottom: none;
}

.wd-rainx-k{
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--wd-text-secondary);
  white-space: nowrap;
}

.wd-rainx-sel-compact .wd-rainx-k{
  font-size: 0.86rem;
}

.wd-rainx-v{
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--wd-text-primary);
  text-align: right;
  word-break: break-word;
}

.wd-rainx-sel-compact .wd-rainx-v{
  font-size: 0.9rem;
}

/* =========================================================
   Bottom row
   ========================================================= */

.wd-rainx-bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wd-space-xl);
  padding: 0 var(--wd-card-padding) var(--wd-card-padding);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px){
  .wd-rainx-panelhead{
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
  }

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

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

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

  .wd-rainx-chartwrap{
    height: var(--wd-rainx-chart-h, 320px);
  }

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

  .wd-rainx-selhead-right{
    max-width: 100%;
  }

  /* on single-column layout, don't try to do the “last 2 rows” border trick */
  .wd-rainx-row:nth-last-child(-n+2){
    border-bottom: 1px solid var(--wd-border);
  }
  .wd-rainx-row:last-child{
    border-bottom: none;
  }

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

}

/* =========================================================
   RainX — Map search UI + marker dots (moved from inline)
   ========================================================= */

.wd-rainx-tools{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid var(--wd-border);
  background:var(--wd-bg-card);
}

.wd-rainx-tools input{
  flex:1;
  min-width: 180px;
  padding:10px 12px;
  border:1px solid var(--wd-border-strong);
  border-radius:var(--wd-radius-sm);
  font-size:14px;
  outline:none;
}

.wd-rainx-tools input:focus{
  border-color: var(--wd-search-focus-border);
  box-shadow: var(--wd-search-focus-ring);
}

.wd-rainx-tools button{
  padding:10px 12px;
  border-radius:var(--wd-radius-sm);
  border:1px solid rgba(0,0,0,0.18);
  background:var(--wd-bg-card);
  cursor:pointer;
  font-weight:700;
}

.wd-rainx-tools button:hover{ background:rgba(0,0,0,0.03); }
.wd-rainx-tools button:active{ transform: translateY(1px); }

/* Mobile: stack nicely */
@media (max-width: 980px){
  .wd-rainx-tools{ flex-wrap:wrap; }
  .wd-rainx-tools input{ flex-basis:100%; min-width:0; }
}

/* DivIcon marker dots */
.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);
}

/* (Optional) stop Leaflet focus outline “black bars” */
.wd-rainx-wrap .leaflet-container,
.wd-rainx-wrap .leaflet-container:focus{
  outline: none !important;
}

/* Unified forecast-card typography override */
body.page-template-page-forecast-unified #tab-grounds .wd-rainx-wrap,
body.page-template-page-forecast-unified #tab-grounds .wd-rainx-wrap * {
  font-family: var(--wd-card-font, 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif) !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified #tab-grounds :where(
  .wd-rainx-meta,
  .wd-rainx-footnote,
  .wd-rainx-tools input,
  .wd-rainx-selhead-right
) {
  font-size: var(--wd-card-meta-font-size, 0.72rem) !important;
  font-weight: var(--wd-card-meta-font-weight, 600) !important;
  line-height: var(--wd-card-meta-line-height, 1.35) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

body.page-template-page-forecast-unified #tab-grounds :where(
  .wd-rainx-k,
  .wd-rainx-paneltitle,
  .wd-rainx-selhead
) {
  font-size: var(--wd-card-label-font-size, 0.68rem) !important;
  font-weight: var(--wd-card-label-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--wd-card-label-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
}

body.page-template-page-forecast-unified #tab-grounds :where(
  .wd-rainx-v,
  .wd-rainx-row-value
) {
  font-family: var(--wd-card-num-font, var(--wd-card-font, 'Montserrat', 'Roboto', sans-serif)) !important;
  font-variant-numeric: tabular-nums !important;
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/wp-content/mu-plugins/weatherduck/assets/vendor/leaflet/1.9.4/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/wp-content/mu-plugins/weatherduck/assets/vendor/leaflet/1.9.4/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/wp-content/mu-plugins/weatherduck/assets/vendor/leaflet/1.9.4/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}[tabindex]:not([tabindex="-1"]):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){box-shadow:none;outline:none}
.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw;overflow-x:hidden;width:100vw}.alignfull img{width:100%}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{display:block;position:relative}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{margin:50px auto;max-width:500px}.post-password-form p{align-items:flex-end;display:flex;width:100%}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#eee;clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{max-height:500px;-o-object-fit:cover;object-fit:cover;width:100%}@media(max-width:991px){.post .wp-post-image{max-height:400px}}@media(max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{font-size:.9em;list-style:none;margin:0;padding:0}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{border-block-end:1px solid #ccc;display:flex;flex-direction:column;padding-block-end:30px;padding-block-start:30px;padding-inline-end:0;padding-inline-start:60px}#comments .comment .avatar,#comments .pingback .avatar{border-radius:50%;left:0;margin-inline-end:10px;position:absolute}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{list-style:none;margin:0;padding-inline-start:30px;position:relative}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{content:"↪";display:inline-block;font-size:1em;font-weight:400;left:0;line-height:1;position:absolute;top:45px;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media(min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media(max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{float:left;position:inherit}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-end:auto;margin-inline-start:auto;width:100%}@custom-media --hello-screen-xs-and-below (width < 576px);@custom-media --hello-screen-xs-and-above (width >= 576px);@custom-media --hello-screen-xs-only (0 <= width < 576px);@custom-media --hello-screen-sm-and-below (width < 768px);@custom-media --hello-screen-sm-and-above (width >= 768px);@custom-media --hello-screen-sm-only (576px <= width < 768px);@custom-media --hello-screen-md-and-below (width < 992px);@custom-media --hello-screen-md-and-above (width >= 992px);@custom-media --hello-screen-md-only (768px <= width < 992px);@custom-media --hello-screen-xl-and-below (width < 1200px);@custom-media --hello-screen-xl-and-above (width >= 1200px);@custom-media --hello-screen-xl-only (992px <= width < 1200px);@media(max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-end:10px;padding-inline-start:10px}}@media(min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media(min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}
/* ═══════════════════════════════════════════════════════════════
   WEATHERDUCK DESIGN TOKENS
   Loaded globally before all module stylesheets.
   All modules should use var(--wd-*) instead of hardcoded values.
   ═══════════════════════════════════════════════════════════════ */

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

  /* Site chrome + primary marketing action */
  --wd-chrome:              #1e2b22;
  --wd-chrome-raised:       #2b3a2e;
  --wd-chrome-border:       rgba(255, 255, 255, 0.16);
  --wd-text-on-dark-muted:   rgba(255, 255, 255, 0.72);
  --wd-text-on-dark-subtle:  rgba(255, 255, 255, 0.56);
  --wd-cta:                 #6bc97f;
  --wd-cta-hover:           #5db96f;

  /* ── 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-page-warm: #f0ebe3; /* forecast app ground; mirrors .wd-page in weatherduck-unified.css */
  --wd-bg-card:   #ffffff;
  --wd-bg-subtle: #f5f5f3;

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

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

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

  /* ── Score palette (strong) — same hues, more saturated for heatmaps ── */
  --wd-score-excellent-strong: #2E7DB5;
  --wd-score-good-strong:      #5cd88a;
  --wd-score-fair-strong:      #f5d862;
  --wd-score-poor-strong:      #f5a54a;
  --wd-score-bad-strong:       #f07070;

  /* ── Score text (dark companions for pastel backgrounds) ── */
  --wd-score-excellent-text: #1a4a6e;
  --wd-score-good-text:      #1a5c30;
  --wd-score-fair-text:      #6b5a10;
  --wd-score-poor-text:      #7a4400;
  --wd-score-bad-text:       #7a2020;

  /* ── Ground dryness gradient (mirrors DRYNESS_GRADIENT_STOPS in ground-chart.js
        and .wd-ground-scale-bar in ground.css — keep all three in sync) ── */
  --wd-dryness-0:  #1f5d8c; /* saturated — submerged blue */
  --wd-dryness-2:  #4a90c0; /* wet — surface blue / bog */
  --wd-dryness-4:  #6fa86b; /* damp — blue-green */
  --wd-dryness-6:  #6c8d4a; /* firm — damp olive */
  --wd-dryness-8:  #a89357; /* dry — tan */
  --wd-dryness-10: #8b6f47; /* bone dry — deep brown */
  --wd-dryness-firm:      #d9dcc4; /* pastel of drynessColor(6.9) rgb(135,144,80) */
  --wd-dryness-firm-text: #4a4f2c;

  /* ── Typography ── */
  --wd-font: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --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;
  --wd-font-size-3xl: 2rem;
  --wd-font-size-4xl: 3rem;
  --wd-letter-spacing-kicker: 0.14em;

  /* ── Spacing ── */
  --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;

  /* ── Focus ── */
  --wd-focus-ring: 0 0 0 3px rgba(66, 90, 71, 0.15);

  /* Search boxes: one focus look site-wide. Border turns CTA green, faint glow, no outline ring. */
  --wd-search-focus-border: var(--wd-cta);
  --wd-search-focus-ring:   0 0 0 3px rgba(107, 201, 127, 0.22);

  /* ── Cards ── */
  --wd-card-padding: 22px;
  --wd-card-padding-mobile: 16px;

  /* Content widths */
  --wd-content-max: 1180px;
  --wd-copy-max: 760px;

  /* ── Table borders (softer than general borders) ── */
  --wd-table-border: #e0e0de;

  /* ── Accent blue (sliders, toggles — replacing Google blue) ── */
  --wd-blue-accent: #3b7dd8;
}

/* ═══════════════════════════════════════════════════════════════
   MARKETING SURFACE (--wd-mkt-*)
   Shared rhythm + type ladder for the acquisition pages:
   the Elementor homepage (home.css) and the specialist landings
   (specialist-landing.css). Values are the approved homepage
   design; both stylesheets consume these so the two surfaces
   cannot drift apart again.

   Deliberately SEPARATE from the --wd-font-size-* / --wd-radius-*
   families, which are the in-app scale used by the unified tabs
   and every module. Marketing copy reads larger than app copy —
   do not collapse the two.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Rhythm (mobile-first; grows at the two breakpoints below) ── */
  --wd-mkt-section-y: 48px;
  --wd-mkt-hero-y:    44px;
  --wd-mkt-gutter:    20px;

  /* ── Type ladder ── */
  --wd-mkt-h1:          clamp(2.05rem, 8.4vw, 3.3rem);
  --wd-mkt-h1-tracking: -.018em;
  --wd-mkt-h1-lh:       1.08;
  --wd-mkt-h1-compact:  clamp(1.85rem, 6.4vw, 2.6rem);   /* section-tier hero title */

  --wd-mkt-h2:          clamp(1.6rem, 5.6vw, 2.15rem);
  --wd-mkt-h2-tracking: -.012em;
  --wd-mkt-h2-lh:       1.14;

  --wd-mkt-h3:          1.08rem;

  /* Base reading size. Marketing copy is 16px, not the 0.92rem app size. */
  --wd-mkt-base:    16px;
  --wd-mkt-base-lh: 1.55;

  /* Lede / intro paragraph. */
  --wd-mkt-lede:    1rem;
  --wd-mkt-lede-lh: 1.62;

  /* Copy inside cards. */
  --wd-mkt-copy:    .89rem;
  --wd-mkt-copy-sm: .84rem;
  --wd-mkt-copy-lh: 1.58;

  /* ── Card treatment: square, hairline, flat ── */
  --wd-mkt-card-radius: 0;
  --wd-mkt-card-border: rgba(47, 74, 54, .18);
  --wd-mkt-card-pad:    var(--wd-space-xl);
  --wd-mkt-card-shadow: none;

  /* Section opener — the paragraph directly under an h2. */
  --wd-mkt-lede-lg: 1.12rem;

  /* FAQ: question and answer are reading copy, not table copy. */
  --wd-mkt-faq-q: 1rem;
  --wd-mkt-faq-a: .94rem;

  /* ── Controls ── */
  --wd-mkt-btn-radius: 6px;
  --wd-mkt-btn-h:      52px;
  --wd-mkt-btn-size:   .88rem;
}

@media (min-width: 769px) {
  :root {
    --wd-mkt-section-y: 72px;
    --wd-mkt-hero-y:    66px;
    --wd-mkt-gutter:    32px;
    --wd-mkt-lede:      1.04rem;
  }
}

@media (min-width: 1025px) {
  :root {
    --wd-mkt-section-y: 88px;
    --wd-mkt-hero-y:    80px;
  }
}

/* Shared landing / secondary header scale, based on the cloud and ground heroes. */
:root {
  --wd-page-header-title: 2.5rem;
  --wd-page-header-title-compact: 2rem;
  --wd-page-header-control-h: 48px;
  --wd-page-header-photo-h: 240px;
  --wd-page-header-focus-width: 2px;
}

@media (max-width: 480px) {
  :root {
    --wd-page-header-title: 1.875rem;
    --wd-page-header-title-compact: 1.5rem;
  }
}

/* Homepage hero: approved compact mobile layout. Other surfaces keep their scale. */
:root {
  --wd-home-hero-mobile-title: clamp(1.75rem, 8.46vw, 2.0625rem);
  --wd-home-hero-mobile-lede: .9375rem;
  --wd-home-hero-mobile-small: .6875rem;
  --wd-home-hero-mobile-button: .75rem;
  --wd-home-hero-mobile-helper-h: 34px;
  --wd-home-hero-mobile-photo-h: 190px;
  --wd-home-hero-mobile-muted: #c7d0c9;
  --wd-home-hero-mobile-input-border: #536357;
}

/* Homepage inversion card: approved desktop and mobile layout. */
:root {
  --wd-home-inv-title: 1.875rem;
  --wd-home-inv-mobile-title: 1.625rem;
  --wd-home-inv-label: .9375rem;
  --wd-home-inv-small: .8125rem;
  --wd-home-inv-kicker: .75rem;
  --wd-home-inv-title-tracking: -.025em;
  --wd-home-inv-kicker-tracking: .095em;
  --wd-home-inv-copy-lh: 1.65;
  --wd-home-inv-row-gap: 5px;
  --wd-home-inv-copy-gap: 14px;
  --wd-home-inv-block-gap: 24px;
  --wd-home-inv-column-gap: 32px;
  --wd-home-inv-list-pad: 18px;
  --wd-home-inv-photo-min-h: 185px;
  --wd-home-inv-meter-w: 54px;
  --wd-home-inv-meter-h: 6px;
}

/* Homepage planning overview: four features, compact mobile rows. */
:root {
  --wd-home-planning-title: 1.875rem;
  --wd-home-planning-mobile-title: 1.625rem;
  --wd-home-planning-copy: .9375rem;
  --wd-home-planning-small: .84375rem;
  --wd-home-planning-kicker: .75rem;
  --wd-home-planning-title-tracking: -.025em;
  --wd-home-planning-kicker-tracking: .095em;
  --wd-home-planning-icon: 36px;
  --wd-home-planning-glyph: 22px;
  --wd-home-planning-row-gap: 6px;
  --wd-home-planning-mobile-pad: 18px;
  --wd-home-planning-block-gap: 24px;
  --wd-home-planning-copy-gap: 14px;
}

/* Nightly Outlook palette and responsive plot dimensions. */
:root {
  --wd-night-raised: #1a2744;
  --wd-night-text: #e8eef5;
  --wd-night-muted: #b0bfd2;
  --wd-night-border: #34425b;
  --wd-night-moon: #f6efd6;
  --wd-night-cloud: #b9ccdf;
  --wd-night-dawn: #f4a261;
  --wd-night-best: #66c685;
  --wd-night-best-fill: #22463e;
  --wd-night-chart-height: 310px;
  --wd-night-chart-height-mobile: 262px;
}

/* Atmospheric chart series and the monthly inversion card. */
:root {
  --wd-atmos-level-1000: #b12a26;
  --wd-atmos-level-975: #9a6a00;
  --wd-atmos-level-950: #16804a;
  --wd-atmos-level-925: #006db1;
  --wd-atmos-level-900: #8b46a6;
  --wd-atmos-level-850: #33424d;
  --wd-atmos-chart-height: 290px;
  --wd-atmos-info-width: 360px;
  --wd-atmos-info-max-height: 480px;
  --wd-atmos-key-width: 22px;
  --wd-atmos-key-width-mobile: 18px;
  --wd-atmos-info-icon-size: 18px;
  --wd-freq-chart-height: 144px;
  --wd-freq-bar-end: #c8dbc9;
  --wd-freq-current-glow: 0 0 8px rgba(107, 201, 127, 0.35);
}

/* === Unified in-app legacy tokens (moved from the unified stylesheet on 2026-09-14) ===
   These 42 names were only ever defined in the old weatherduck-unified.css :root block.
   The rest of that block duplicated the canonical tokens above and was dead (this file
   loads later and wins), so it was removed. Values are verbatim. === */
:root {
  --wd-amber: #C68A1A;
  --wd-amber-bg: #FEF6E4;
  --wd-bg-warm: #f9f8f5;
  --wd-blue: #2E7DB5;
  --wd-blue-bg: #E8F1F8;
  --wd-border-light: rgba(0,0,0,0.08);
  --wd-brand: var(--wd-green);
  --wd-brand-dark: var(--wd-green-hover);
  --wd-brand-light: var(--wd-green-light);
  --wd-card: var(--wd-bg-card);
  --wd-card-font: 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
  --wd-card-header-font-size: var(--wd-font-size-sm);
  --wd-card-header-font-weight: 800;
  --wd-card-header-height: 38px;
  --wd-card-header-letter-spacing: 0.8px;
  --wd-card-header-pad-x: var(--wd-space-lg);
  --wd-card-header-pad-y: 6px;
  --wd-card-label-font-size: 0.68rem;
  --wd-card-label-font-weight: 700;
  --wd-card-label-letter-spacing: 0.06em;
  --wd-card-meta-font-size: var(--wd-font-size-xs);
  --wd-card-meta-font-weight: 600;
  --wd-card-meta-line-height: 1.35;
  --wd-card-num-font: var(--wd-card-font);
  --wd-card-value-font-weight: 700;
  --wd-cream: var(--wd-bg-page);
  --wd-green-bg: #E9F5ED;
  --wd-grey: #BBBBB6;
  --wd-grey-bg: #F2F2EE;
  --wd-hero-map-gap: 16px;
  --wd-hero-map-h: 96px;
  --wd-hero-map-inset-y: 6px;
  --wd-hero-map-w: 170px;
  --wd-max: 1120px;
  --wd-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
  --wd-purple: #7B5EA7;
  --wd-purple-bg: #F0EAF6;
  --wd-red: #C0392B;
  --wd-red-bg: #FDECEB;
  --wd-text: var(--wd-text-primary);
  --wd-text-light: var(--wd-text-muted);
  --wd-text-mid: var(--wd-text-secondary);
}
.wd-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wd-ui-icon-size, 20px);
    height: var(--wd-ui-icon-size, 20px);
    line-height: 1;
    vertical-align: -0.2em;
    flex: 0 0 auto;
}

.wd-ui-icon__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wd-ui-icon--cloud-layer {
    position: relative;
    padding-bottom: calc(var(--wd-ui-icon-size, 20px) * 0.16);
}

.wd-ui-icon--cloud-layer .wd-ui-icon__img {
    height: calc(var(--wd-ui-icon-size, 20px) * 0.82);
}

.wd-ui-icon__layer-line {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 0;
    height: max(2px, calc(var(--wd-ui-icon-size, 20px) * 0.12));
    border-radius: 999px;
    background: #222426;
}

.wd-ui-icon--inline {
    margin-right: 0.3em;
}

.wd-ui-icon--section {
    width: 1.1em;
    height: 1.1em;
}

.wd-ui-icon--chip {
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
}

.wd-ui-icon--fact {
    width: 22px;
    height: 22px;
}

.wd-ui-icon--table-heading {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
/* ============================================================
   WEATHER DUCK — LOCATION HEADER (COMPACT)
   ============================================================ */

.wd-location-header {
    font-family: var(--wd-font);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
}

/* ============================================================
   CITY
   ============================================================ */

.wd-location-city {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--wd-green);
    line-height: 1.15;              /* tighter */
    margin-bottom: 2px;
}

/* ============================================================
   COORDINATES + FORECAST
   ============================================================ */

.wd-location-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;                       /* tighter */
    font-size: 0.92rem;
    color: var(--wd-text-secondary);
    line-height: 1.25;
    margin-bottom: 4px;
}

.wd-location-meta .coords {
    font-weight: 500;
}

.wd-location-meta .forecast-label {
    font-weight: 500;
    color: var(--wd-text-primary);
}

/* ============================================================
   SUN INFO
   ============================================================ */

.wd-location-sun {
    display: flex;
    flex-direction: column;
    gap: 4px;                       /* tighter */
    margin-top: 8px;                /* less vertical jump */
    font-size: 0.92rem;
    color: var(--wd-text-primary);
    line-height: 1.3;
}

.sun-row {
    display: flex;
    align-items: center;
    gap: 6px;                       /* tighter */
}

.sun-row .icon {
    width: 1.2em;
    text-align: center;
    opacity: 0.9;
}

.sun-row .label {
    min-width: 62px;                /* smaller */
    font-weight: 500;
    color: var(--wd-text-secondary);
}

.sun-row .value {
    font-weight: 700;
    color: var(--wd-text-primary);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .wd-location-city {
        font-size: 1.3rem;
    }

    .wd-location-meta,
    .wd-location-sun {
        font-size: 0.88rem;
    }
}
/* ============================================================
   WEATHER DUCK — WEATHER WARNING BANNERS
   Fully aligned with PHP + JS toggle logic
   ============================================================ */

/* ============================================================
   BASE BANNER
   ============================================================ */
.wind-warning-banner {
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--wd-radius-sm);
    line-height: 1.35;
    border-left: 6px solid;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* ============================================================
   SEVERITY COLOURS
   ============================================================ */
.wind-warning-banner.yellow {
    background: #fff6c7;
    border-color: #f5c400;
    color: #614a00;
}

.wind-warning-banner.amber {
    background: #ffe1b3;
    border-color: #ff9900;
    color: #6a3d00;
}

.wind-warning-banner.red {
    background: #ffd2d2;
    border-color: #e60000;
    color: #7a0000;
}

/* ============================================================
   HEADER (TITLE LEFT — TOGGLE RIGHT)
   ============================================================ */
.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* ============================================================
   TOGGLE BUTTON
   ============================================================ */
.alert-toggle {
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    color: inherit;
    transition: opacity 0.2s ease;
}

.alert-toggle:hover {
    opacity: 0.7;
}

/* ============================================================
   COLLAPSIBLE CONTENT
   (Collapsed by default — JS controls expansion)
   ============================================================ */
.alert-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

/* ============================================================
   SECTION TITLES INSIDE CONTENT
   ============================================================ */
.alert-type-header {
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 4px;
}

/* ============================================================
   EVENT ITEMS
   ============================================================ */
.alert-content > div {
    margin-left: 2px;
    margin-bottom: 3px;
}

/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {

    .wind-warning-banner {
        font-size: 0.9rem;
        padding: 9px 12px;
    }

    .alert-toggle {
        font-size: 18px;
    }

    .alert-content > div {
        margin-bottom: 2px;
    }
}

/* ============================================================
   MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    .wind-warning-banner {
        font-size: 0.85rem;
        padding: 8px 10px;
        line-height: 1.3;
    }

    .alert-header {
        margin-bottom: 4px;
    }

    .alert-toggle {
        font-size: 17px;
        padding: 0 4px;
    }

    .alert-type-header {
        margin-top: 5px;
        margin-bottom: 3px;
    }
}

/* ============================================================
   SMALL MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px) {

    .wind-warning-banner {
        font-size: 0.88rem;
        padding: 7px 9px;
        line-height: 1.25;
    }

    .alert-toggle {
        font-size: 18px;
        padding: 0 3px;
    }

    .alert-type-header {
        font-size: 0.82rem;
        margin-top: 4px;
        margin-bottom: 3px;
    }

    .alert-content > div {
        margin-left: 1px;
        margin-bottom: 2px;
    }
}
/* =========================================================
   WEATHERDUCK — HEADER DESKTOP (CLEAN FINAL)
   - BG: #FAF9F5
   - Brand green: #425A47
   - Taller header via outer padding only
   - Controls fixed height
   - EVEN spacing: input → CTA equals CTA → Forecast
   - Placeholder slightly less faint
   - Shop parent items show a dropdown arrow (rotates when opened)
   - Shop sub-menu hidden until click (JS toggles .sub-open)
   ========================================================= */

/* Local aliases — inherits from design-tokens.css */
:root{
  --wd-bg: var(--wd-green-light);
  --wd-astro-blue: var(--wd-blue-astro);

  --wd-text: var(--wd-text-primary);

  --wd-shadow: var(--wd-shadow-lg);

  --wd-header-font-size: var(--wd-font-size-sm);

  --wd-gap-main: var(--wd-space-2xl);
  --wd-gap-brand-search: 44px;
  --wd-gap-actions: var(--wd-space-lg);
  --wd-gap-input-cta: var(--wd-space-sm);
}

/* Header bar */
.wdh.wdh--desktop{
  width: 100%;
  background: var(--wd-bg);
  position: relative;
  z-index: 9999;

  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--wd-header-font-size);
}

/* 1200px container + taller via padding only */
.wdh__wrap{
  width: 1168px;
  max-width: 100%;
  margin: 0 auto;

  padding: 40px 0;
  display: flex;
  align-items: center;
  gap: var(--wd-gap-main);
}

/* Brand */
.wdh__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}

.wdh__logo{
  width: 48px;
  height: 48px;
  display: block;
  image-rendering: pixelated;
}

.wdh__wordmark{
  font-weight: 900;
  font-size: 25px;
  letter-spacing: .03em;
  color: var(--wd-green);
  line-height: 1;
}

/* Search */
.wdh__search{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;

  /* This gap controls input -> CTA spacing */
  gap: 8px;
}

.wdh__input{
  flex: 0 1 400px;
  width: 400px;
  max-width: 100%;

  height: var(--wd-control-h);
  padding: 0 16px;

  border: 1px solid var(--wd-border-strong);
  border-radius: var(--wd-radius-lg);
  outline: none;

  background: var(--wd-bg-card);
  color: var(--wd-text);

  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;

  line-height: 1;
}

.wdh__input::placeholder{
  text-transform: none;
  font-size: 13px;
  letter-spacing: normal;

  /* less faint + slightly bolder */
  color: rgba(0,0,0,.58);
  font-weight: 600;
}

.wdh__input:focus{
  border-color: var(--wd-search-focus-border);
  box-shadow: var(--wd-search-focus-ring);
}

/* Buttons */
.wdh__btn{
  height: var(--wd-control-h);
  padding: 0 16px;
  border-radius: var(--wd-radius-lg);

  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  border: 1px solid transparent;
  background: transparent;
  color: var(--wd-text);

  line-height: 1;
}

.wdh__btn--primary{
  background: var(--wd-green);
  color: var(--wd-text-on-green);
}
.wdh__btn--primary:hover{ filter: brightness(.96); }

.wdh__btn--ghost{
  background: var(--wd-bg-page);
  border-color: var(--wd-border-strong);
  color: var(--wd-text);
}
.wdh__btn--ghost:hover{ background: var(--wd-bg-subtle); }

.wdh__btn--summary{
  list-style: none;
}
.wdh__btn--summary::-webkit-details-marker{ display:none; }

/* Right actions */
.wdh__actions{
  display: flex;
  align-items: center;

  /* This gap controls CTA -> Forecast spacing */
  gap: var(--wd-gap-actions);

  flex: 0 0 auto;
}

/* Dropdown */
.wdh__drop{
  position: relative;
}

.wdh__panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);

  min-width: 240px;
  background: var(--wd-bg-card);

  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-lg);
  box-shadow: var(--wd-shadow);

  padding: 10px;
}

/* Menu list */
.wdh__menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdh__menu li{ margin: 0; }

.wdh__menu a{
  display: block;
  padding: 12px 12px;
  border-radius: var(--wd-radius-md);
  text-decoration: none;

  color: var(--wd-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wdh__menu a:hover{ background: var(--wd-bg-subtle); }

/* Group children: always visible, indented under their heading */
.wdh__menu .sub-menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdh__menu .sub-menu a{
  padding-left: 20px;
  font-weight: 650;
  color: rgba(0,0,0,.86);
}

/* Group headings (menu items with the wd-menu-heading class) */
.wdh__menu li.wd-menu-heading{
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 6px;
}

.wdh__menu li.wd-menu-heading:first-child{
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.wdh__menu li.wd-menu-heading > a{
  pointer-events: none;
  cursor: default;
  padding: 12px 12px 6px;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--wd-green);
}

/* Separator above a menu item (e.g. Pricing) */
.wdh__menu li.wd-menu-sep{
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 6px;
}

/* Icon + caret */
.wdh__icon{
  display: inline-flex;
  align-items: center;
  opacity: .95;
}
.wdh__caret{
  opacity: .8;
}


/* Auth menu visibility — hidden until JS sets body class */
.wd-guest-only,
.wd-member-only { display: none; }
.wd-logged-out .wd-guest-only { display: list-item; }
.wd-logged-in .wd-member-only  { display: list-item; }

/* Separator line before auth items */
.wd-logged-out .wd-auth-first.wd-guest-only,
.wd-logged-in .wd-auth-first.wd-member-only {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Hide desktop on mobile */
@media (max-width: 900px){
  .wdh.wdh--desktop{ display:none; }
}
/* =========================================================
   WEATHERDUCK — HEADER MOBILE (FINAL v6)
   - Bright green bg: #72DD84
   - Iconic WD green: #425A47
   - No green outline on inactive tabs
   - Bigger wordmark + logo
   - Burger: WD green, bigger, thicker lines, wider spacing (SVG 6/12/18)
   - Tabs fill width, touch bottom rule, no slider bar
   ========================================================= */

/* Local aliases — inherits from design-tokens.css */
:root{
  --wdm-green: var(--wd-green-light);

  --ink: var(--wd-text-primary);
  --panel-shadow: 0 16px 36px rgba(0,0,0,.22);

  --tab-bg: var(--wd-bg-subtle);
  --tab-border: var(--wd-border-strong);
  --radius-top: var(--wd-radius-sm);
}

/* Header */
.wdm-header--mobile{
  width: 100%;
  background: var(--wdm-green);
  position: relative;
  z-index: 9999;

  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .03em;

  /* Bottom green rule */
  border-bottom: 0px solid var(--wd-green);
}

/* TOP BAR (tight to bring tabs closer) */
.wdm-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 14px 4px; /* less space above tabs */
  border: 0;
  box-shadow: none;
}

/* Wordmark */
.wdm-left{ flex: 1 1 33%; }

.wdm-wordmark{
  line-height: 1.05;
  font-weight: 900;
  font-size: 20px;          /* bigger */
  letter-spacing: .03em;
  color: var(--wd-green);
}
.wdm-wordmark-line{ display:block; }

/* Center logo */
.wdm-center{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wdm-logo{
  width: 46px;              /* bigger */
  height: 46px;
  display: block;
  image-rendering: pixelated;
}

/* Burger */
.wdm-right{
  flex: 1 1 33%;
  display: flex;
  justify-content: flex-end;
}

.wdm-burger{ position: relative; }

.wdm-burger-btn{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border-radius: var(--wd-radius-sm);
  background: transparent;
  border: 0;

  color: var(--wd-green);   /* WD green */
}

.wdm-burger-btn::-webkit-details-marker{ display:none; }

.wdm-burger-ico{
  display: block;
  width: 36px;
  height: 36px;
  opacity: .95;
}

.wdm-burger-ico path{
  stroke: currentColor;
  stroke-width: 3.6;        /* bolder */
  stroke-linecap: round;
}

/* Burger dropdown (fully opaque) */
.wdm-burger-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);

  min-width: 240px;
  max-width: 85vw;

  background: var(--wd-bg-card);
  border: 1px solid var(--wd-border-strong);
  border-radius: var(--wd-radius-md);
  box-shadow: var(--panel-shadow);
  padding: 10px;

  z-index: 10000;
}

/* Do not rely on the browser's native closed-details rendering alone. */
.wdm-burger:not([open]) > .wdm-burger-panel{
  display: none;
}

.wdm-burger[open] > .wdm-burger-panel{
  display: block;
}

.wdm-burger-menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdm-burger-menu li{ margin: 0; }

.wdm-burger-menu a{
  display: block;
  padding: 12px 12px;
  border-radius: var(--wd-radius-sm);
  text-decoration: none;

  color: var(--wd-text-primary);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wdm-burger-menu a:hover{ background: var(--wd-bg-subtle); }

.wdm-burger-menu .sub-menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdm-burger-menu .sub-menu a{
  padding-left: 20px;
  font-weight: 700;
  color: rgba(0,0,0,.86);
}

/* Group headings (menu items with the wd-menu-heading class) */
.wdm-burger-menu li.wd-menu-heading{
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 6px;
}

.wdm-burger-menu li.wd-menu-heading:first-child{
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.wdm-burger-menu li.wd-menu-heading > a{
  pointer-events: none;
  cursor: default;
  padding: 12px 12px 6px;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--wd-green);
}

/* Separator above a menu item (e.g. Pricing) */
.wdm-burger-menu li.wd-menu-sep{
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 6px;
}

/* TABS BAR (NO bottom padding so tabs touch the green rule) */
.wdm-tabsbar{
  display: flex;
  align-items: flex-end;

  gap: 8px;
  padding: 4px 12px 0; /* bottom = 0 */
  border: 0;
  background: transparent;
}

/* Forecasts label smaller */
.wdm-tabs-label{
  font-weight: 700;
  font-size: 11px;          /* smaller */
  color: var(--wd-green);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Tabs fill width, no slider bar */
.wdm-tabs{
  flex: 1;
  display: flex;
  align-items: flex-end;

  gap: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Tabs expand evenly */
.wdm-tab{
  flex: 1 1 0;
  min-width: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 6px;

  border: 1px solid var(--tab-border);
  border-bottom: 0;
  border-radius: var(--radius-top) var(--radius-top) 0 0;

  background: var(--tab-bg);
  color: rgba(0,0,0,.78);

  text-decoration: none;
  font-weight: 700;         /* less bold to fit */
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove double borders between touching tabs */
.wdm-tab + .wdm-tab{ border-left: 0; }

/* Active tab */
.wdm-tab.is-active{
  background: var(--wd-green);
  border-color: rgba(0,0,0,.22);
  color: #fff;
}

/* SEARCH BAR */
.wdm-search{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 14px;
  margin: 0;
}

.wdm-search-wrap{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.wdm-search-input{
  width: 100%;
  height: var(--wd-control-h);
  padding: 0 14px;

  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--wd-radius-md);
  background: var(--wd-bg-card);

  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
  text-transform: none;

  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.wdm-search-input:focus{
  border-color: var(--wd-search-focus-border);
  box-shadow: var(--wd-search-focus-ring);
}

.wdm-search-input::placeholder{
  color: rgba(0,0,0,.38);
  font-weight: 400;
}

.wdm-search-btn{
  flex: 0 0 auto;
  height: var(--wd-control-h);
  padding: 0 14px;

  border: 0;
  border-radius: var(--wd-radius-md);
  background: var(--wd-green);
  color: var(--wd-text-on-green);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.wdm-search-btn:active{
  opacity: .85;
}

/* Autocomplete dropdown position for mobile search */
.wdm-search-wrap .wdh__autocomplete{
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

/* Auth menu visibility — hidden until JS sets body class */
.wd-guest-only,
.wd-member-only { display: none; }
.wd-logged-out .wd-guest-only { display: list-item; }
.wd-logged-in .wd-member-only  { display: list-item; }

/* Separator line before auth items */
.wd-logged-out .wd-auth-first.wd-guest-only,
.wd-logged-in .wd-auth-first.wd-member-only {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* Mobile only */
@media (min-width: 901px){
  .wdm-header--mobile{ display: none; }
}
/* =========================================================
   WEATHERDUCK — DARK CHROME (Global)
   Dark green header + footer applied site-wide.
   Loaded after sitemenu-desktop.css & sitemenu-mobile.css
   to override the default light-green styles.
   ========================================================= */


html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DESKTOP HEADER
   ============================================================ */

.wdh.wdh--desktop {
    background: #1e2b22 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-top: 0;
    padding-bottom: 0;
}

/* Match content area width: 1120 + 48 = 1168px */
.wdh__wrap {
    width: 1168px !important;
    max-width: 100% !important;
    padding: 14px 24px !important;
}

/* Brand */
.wdh__brand-text,
.wdh__wordmark {
    color: #fff !important;
}

/* Search input — narrower + dark theme */
.wdh__search-wrap {
    flex: 0 1 240px !important;
    width: 240px !important;
}

.wdh__input {
    flex: 0 1 240px !important;
    width: 240px !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

.wdh__input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

/* CTA button — green on dark */
.wdh__cta,
.wdh__btn--primary,
.wdh__btn--primary:hover,
.wdh__btn--primary:focus,
.wdh__btn--primary:active {
    background: #6bc97f !important;
    color: #1e2b22 !important;
    filter: none !important;
}

.wdh__cta:hover,
.wdh__btn--primary:hover {
    background: #5db96f !important;
}

/* Ghost button (MENU) — dark-aware */
.wdh__btn--ghost {
    background: transparent !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.8) !important;
}

.wdh__btn--ghost:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Nav links */
.wdh__link,
.wdh__menu-link {
    color: rgba(255,255,255,0.7) !important;
}

.wdh__link:hover,
.wdh__menu-link:hover {
    color: #fff !important;
}

/* Caret */
.wdh__caret {
    color: rgba(255,255,255,0.6);
}


/* ============================================================
   MOBILE HEADER
   ============================================================ */

.wdm-header--mobile {
    background: #1e2b22 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

.wdm-wordmark {
    color: #fff !important;
}

.wdm-topbar .wdm-logo img {
    filter: brightness(1.2);
}

/* Burger icon — SVG uses currentColor via stroke */
.wdm-burger-btn {
    color: #fff !important;
}

/* Mobile search */
.wdm-search-input {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

.wdm-search-input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.wdm-search-btn {
    background: #6bc97f !important;
    color: #1e2b22 !important;
}


/* ============================================================
   SITE FOOTER — dark green to match header
   ============================================================ */

.elementor-location-footer,
.elementor-location-footer > footer.e-con,
.elementor-location-footer > .elementor-element,
.site-footer,
.site-footer.dynamic-footer,
footer.elementor-section,
footer#colophon,
.footer-widget-area {
    background: #1e2b22 !important;
    color: rgba(255,255,255,0.6) !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
}

.elementor-location-footer,
.site-footer,
footer.elementor-section,
footer#colophon {
    margin-top: auto !important;
    flex-shrink: 0;
}

.elementor-location-footer {
    overflow-x: clip;
}

.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .elementor-widget-wrap {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Constrain footer inner content to match header/content width */
.elementor-location-footer > .elementor-element,
.elementor-location-footer > .e-con,
.elementor-location-footer > .elementor-section > .elementor-container,
.elementor-location-footer .elementor-container,
.site-footer .footer-inner {
    max-width: 1168px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.site-footer:not(.dynamic-footer) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(24px, calc((100vw - 1168px) / 2 + 24px)) !important;
    padding-right: max(24px, calc((100vw - 1168px) / 2 + 24px)) !important;
}

/* Links */
.elementor-location-footer a,
.site-footer a,
.site-footer .site-title,
.site-footer .site-title a,
.site-footer .site-description,
.site-footer .copyright,
.site-footer .copyright p,
footer.elementor-section a,
footer#colophon a {
    color: rgba(255,255,255,0.7) !important;
}

.elementor-location-footer a:hover,
.site-footer a:hover,
footer.elementor-section a:hover,
footer#colophon a:hover {
    color: #fff !important;
}

/* Text widgets */
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer .elementor-icon-list-text {
    color: rgba(255,255,255,0.6) !important;
}

/* Icon list icons */
.elementor-location-footer .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg {
    color: rgba(255,255,255,0.4) !important;
    fill: rgba(255,255,255,0.4) !important;
}

/* Social icons — circular, properly sized */
.elementor-location-footer .elementor-social-icon {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.elementor-location-footer .elementor-social-icon i {
    color: rgba(255,255,255,0.7) !important;
    font-size: 16px !important;
}

.elementor-location-footer .elementor-social-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: rgba(255,255,255,0.7) !important;
}

.elementor-location-footer .elementor-social-icon:hover {
    background: rgba(255,255,255,0.2) !important;
}


/* ============================================================
   FOOTER — match header chrome (mobile)
   Footer is rendered by Elementor (template post 47), so we can't
   add our own BEM classes like the header. Target Elementor's
   generic classes + structural selectors only — never hashed IDs.
   ============================================================ */

/* Kill Elementor's green-box burger toggle, mirror .wdm-burger-btn */
.elementor-location-footer .elementor-menu-toggle,
.elementor-location-footer .elementor-menu-toggle.elementor-active {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    border-radius: 6px !important;
}

.elementor-location-footer .elementor-menu-toggle svg,
.elementor-location-footer .elementor-menu-toggle i {
    width: 24px !important;
    height: 24px !important;
    fill: #fff !important;
    color: #fff !important;
    font-size: 20px !important;
}

.elementor-location-footer .elementor-menu-toggle:hover,
.elementor-location-footer .elementor-menu-toggle:focus {
    background: rgba(255,255,255,0.08) !important;
}

/* Wordmark — stronger presence, twin the header's WEATHERDUCK weight */
.elementor-location-footer p.elementor-heading-title {
    color: rgba(255,255,255,0.8) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* Replace dotted/faint divider with the same 1px hairline used on header */
.elementor-location-footer .elementor-widget-divider .elementor-divider-separator,
.elementor-location-footer hr {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

/* Top row containing burger + wordmark — first child container of the
   footer's inner. Structural selector (not hashed ID) so it survives
   Elementor template re-saves. */
.elementor-location-footer .e-con-inner > .e-con:first-child {
    align-items: center !important;
    padding: 14px 24px !important;
    border-bottom: 1px dotted rgba(255,255,255,0.25) !important;
}

.elementor-location-footer .e-con-inner > .e-con {
    border-top: 0 !important;
}

/* Burger dropdown panel — continue the dark-green chrome */
.elementor-location-footer .elementor-nav-menu--dropdown {
    background: #1e2b22 !important;
    border: 0 !important;
}

/* Menu items inside the dropdown */
.elementor-location-footer .elementor-nav-menu--dropdown a.elementor-item {
    color: rgba(255,255,255,0.85) !important;
    background: transparent !important;
    padding: 14px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-left: 3px solid transparent !important;
}

.elementor-location-footer .elementor-nav-menu--dropdown li:first-child > a.elementor-item {
    border-top: 0 !important;
}

.elementor-location-footer .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-location-footer .elementor-nav-menu--dropdown a.elementor-item:focus {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

/* Active page (e.g. Forecast when on /forecast/) — green accent */
.elementor-location-footer .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    background: transparent !important;
    color: #fff !important;
    border-left-color: #6bc97f !important;
}


/* ============================================================
   HEADER REFINEMENTS — match the homepage design language
   Crisp 6px controls (same as footer burger toggle), dark-aware
   focus rings, hover states, dark dropdown panels to twin the
   footer's dark dropdown treatment.
   ============================================================ */

/* Crisper hairline under both headers */
.wdh.wdh--desktop {
    border-bottom-color: rgba(255,255,255,0.10) !important;
}

.wdm-header--mobile {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Controls: 6px radius across the chrome (was 12-16px) */
.wdh__input,
.wdh__btn,
.wdm-search-input,
.wdm-search-btn {
    border-radius: 6px !important;
}

/* Smooth interactive transitions */
.wdh__input,
.wdh__btn,
.wdh__link,
.wdh__menu-link,
.wdm-search-input,
.wdm-search-btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Focus: the token ring is dark-green — invisible on dark chrome.
   Use the bright CTA green instead. */
.wdh__input:focus,
.wdm-search-input:focus {
    border-color: var(--wd-search-focus-border) !important;
    box-shadow: var(--wd-search-focus-ring) !important;
}

.wdh__btn:focus-visible,
.wdm-search-btn:focus-visible,
.wdm-burger-btn:focus-visible {
    outline: 2px solid #6bc97f;
    outline-offset: 2px;
}

/* Mobile CTA gets a proper hover to match desktop */
.wdm-search-btn:hover {
    background: #5db96f !important;
}

/* Dropdown panels — dark chrome, twinned with the footer dropdown */
.wdh__panel,
.wdm-burger-panel {
    background: #1e2b22 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 6px !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.35) !important;
}

.wdh__menu a,
.wdm-burger-menu a {
    color: rgba(255,255,255,0.85) !important;
    border-radius: 4px !important;
}

.wdh__menu a:hover,
.wdm-burger-menu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

.wdh__menu .sub-menu,
.wdm-burger-menu .sub-menu {
    border-top-color: rgba(255,255,255,0.14) !important;
}

/* Group headings + separators inside the dark panels */
.wdh__menu li.wd-menu-heading,
.wdm-burger-menu li.wd-menu-heading,
.wdh__menu li.wd-menu-sep,
.wdm-burger-menu li.wd-menu-sep {
    border-top-color: rgba(255,255,255,0.14) !important;
}

.wdh__menu li.wd-menu-heading > a,
.wdm-burger-menu li.wd-menu-heading > a {
    color: #6bc97f !important;
}

.wdh__menu li.wd-menu-heading > a:hover,
.wdm-burger-menu li.wd-menu-heading > a:hover {
    background: transparent !important;
}

.wdh__menu .sub-menu a,
.wdm-burger-menu .sub-menu a {
    color: rgba(255,255,255,0.7) !important;
}

.wdh__menu .sub-menu a:hover,
.wdm-burger-menu .sub-menu a:hover {
    color: #fff !important;
}

/* Auth separator inside dark panels */
.wd-logged-out .wdh__menu .wd-auth-first.wd-guest-only,
.wd-logged-in .wdh__menu .wd-auth-first.wd-member-only,
.wd-logged-out .wdm-burger-menu .wd-auth-first.wd-guest-only,
.wd-logged-in .wdm-burger-menu .wd-auth-first.wd-member-only {
    border-top-color: rgba(255,255,255,0.14) !important;
}

/* Elementor Theme Builder header/footer templates are unpublished and the
   MU partials render the real chrome. If a template is ever re-published,
   keep it out of the way on every page, with or without Elementor CSS. */
.elementor-location-header,
.elementor-location-footer {
    display: none !important;
}
/* Selected header: desktop C with inline search; mobile A. */
html { scroll-padding-top: calc(var(--wd-control-h) + var(--wd-space-2xl) + var(--wp-admin--admin-bar--height, 0px)); }
.wd-sitebar { position: sticky; top: 0; z-index: 1000; background: var(--wd-chrome); color: var(--wd-text-on-green); border-bottom: 1px solid var(--wd-chrome-border); font-family: var(--wd-font); }
/* Leaflet control wrappers (.leaflet-top/.leaflet-bottom) are z-index 1000, same as the sticky header. Isolate every map so its internal layers never tie with page chrome. */
.leaflet-container { isolation: isolate; }
.wd-sitebar * { box-sizing: border-box; }
.wd-sitebar__row { width: min(calc(100% - (var(--wd-mkt-gutter) * 2)), var(--wd-content-max)); margin: auto; padding: calc(var(--wd-space-sm) * 1.75) 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'brand search actions'; align-items: center; gap: var(--wd-space-2xl); }
.wd-sitebar a, .wd-sitebar summary { color: var(--wd-text-on-green); text-decoration: none; }
.wd-sitebar__brand { grid-area: brand; display: flex; align-items: center; gap: var(--wd-space-md); font-size: calc(var(--wd-font-size-xl) * 1.25); font-weight: 900; letter-spacing: .03em; line-height: 1; white-space: nowrap; }
.wd-sitebar__brand img { width: calc(var(--wd-space-md) * 4); height: calc(var(--wd-space-md) * 4); object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.wd-sitebar summary { list-style: none; cursor: pointer; }
.wd-sitebar summary::-webkit-details-marker { display: none; }
.wd-sitebar .wd-sitebar__control { display: flex; align-items: center; justify-content: center; gap: var(--wd-space-sm); min-height: var(--wd-control-h); padding: var(--wd-space-md) var(--wd-space-lg); border: 1px solid var(--wd-chrome-border); border-radius: var(--wd-mkt-btn-radius); background: transparent; color: var(--wd-text-on-green); font-family: var(--wd-font); font-size: var(--wd-font-size-sm); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; line-height: 1; cursor: pointer; }
.wd-sitebar__control:hover, .wd-sitebar details[open] > .wd-sitebar__control { background: var(--wd-chrome-raised); }
.wd-sitebar__actions { grid-area: actions; display: flex; align-items: stretch; }
.wd-sitebar__actions > details { position: relative; }
.wd-sitebar .wd-sitebar__account > summary { border-radius: var(--wd-mkt-btn-radius) 0 0 var(--wd-mkt-btn-radius); }
.wd-sitebar .wd-sitebar__menu > summary { border-radius: 0 var(--wd-mkt-btn-radius) var(--wd-mkt-btn-radius) 0; border-left: 0; }
.wd-sitebar__menu > summary svg { width: var(--wd-space-lg); height: var(--wd-space-lg); }
.wd-sitebar__popover { position: absolute; top: calc(100% + var(--wd-space-sm)); right: 0; width: calc(var(--wd-space-3xl) * 6.5); max-height: 75dvh; overflow-y: auto; padding: var(--wd-space-sm); border: 1px solid var(--wd-chrome-border); border-radius: var(--wd-mkt-btn-radius); background: var(--wd-chrome-raised); box-shadow: var(--wd-shadow-lg); z-index: 5; }
.wd-sitebar__popover a, .wd-sitebar__popover summary { display: block; padding: var(--wd-space-md); font-size: var(--wd-font-size-sm); line-height: 1.4; font-weight: 600; }
.wd-sitebar__popover a:hover { background: var(--wd-green); }
.wd-sitebar__popover details { border-bottom: 1px solid var(--wd-chrome-border); }
.wd-sitebar__popover details summary { display: flex; justify-content: space-between; }
.wd-sitebar__popover details a { padding-left: var(--wd-space-xl); }
.wd-sitebar__menu-auth, .wd-sitebar .wd-sitebar__search-toggle { display: none; }
.wd-sitebar__search { grid-area: search; min-width: 0; width: 100%; max-width: calc(var(--wd-space-3xl) * 10); justify-self: center; }
.wd-sitebar__search-heading, .wd-sitebar__search-hint, .wd-sitebar__places { display: none; }
.wd-sitebar__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wd-sitebar__search-row { display: flex; gap: var(--wd-space-sm); }
.wd-sitebar__input-wrap { position: relative; flex: 1; min-width: 0; }
.wd-sitebar input[type='search'] { width: 100%; min-width: 0; min-height: var(--wd-control-h); padding: var(--wd-space-md); border: 1px solid var(--wd-chrome-border); border-radius: var(--wd-mkt-btn-radius); background: var(--wd-chrome-raised); color: var(--wd-text-on-green); font-family: var(--wd-font); font-size: var(--wd-font-size-sm); }
.wd-sitebar input::placeholder { color: var(--wd-text-on-dark-muted); }
.wd-sitebar__submit { padding: var(--wd-space-sm) var(--wd-space-md); border: 1px solid var(--wd-cta); border-radius: var(--wd-mkt-btn-radius); background: var(--wd-cta); color: var(--wd-chrome); font-family: var(--wd-font); font-size: var(--wd-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; cursor: pointer; }
.wd-sitebar__submit:hover { background: var(--wd-cta-hover); }
.wd-sitebar :is(a, button, summary):focus-visible { outline: 2px solid var(--wd-cta); outline-offset: 2px; }
.wd-sitebar input[type='search']:focus { outline: none; border-color: var(--wd-search-focus-border); box-shadow: var(--wd-search-focus-ring); }
.admin-bar .wd-sitebar { top: var(--wp-admin--admin-bar--height, 32px); }
.wd-signup-label-short { display: none; }
@media (max-width: 1024px) {
 .wd-sitebar__row { width: auto; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'brand toggle actions'; padding: var(--wd-space-sm) var(--wd-space-lg); gap: var(--wd-space-sm); }
 .wd-sitebar__brand { font-size: var(--wd-font-size-xl); gap: var(--wd-space-sm); }
 .wd-sitebar__brand img { width: calc(var(--wd-space-lg) * 2); height: calc(var(--wd-space-lg) * 2); }
 .wd-sitebar__account { display: none; }
 .wd-sitebar .wd-sitebar__search-toggle { grid-area: toggle; display: flex; padding: var(--wd-space-sm); font-size: var(--wd-font-size-xs); gap: var(--wd-space-xs); }
 .wd-sitebar .wd-sitebar__menu > summary { width: var(--wd-control-h); height: var(--wd-control-h); padding: 0; border: 1px solid var(--wd-chrome-border); border-radius: var(--wd-mkt-btn-radius); }
 .wd-sitebar__menu > summary svg { width: calc(var(--wd-space-md) * 2); height: calc(var(--wd-space-md) * 2); }
 .wd-sitebar__menu-label { display: none; }
 .wd-sitebar__menu-auth { display: block; border-top: 1px solid var(--wd-chrome-border); }
 .wd-sitebar__popover { width: min(calc(var(--wd-space-3xl) * 6.5), calc(100vw - var(--wd-space-2xl))); }
 .wd-sitebar__search { display: none; position: absolute; top: 100%; left: 0; right: 0; max-width: none; padding: var(--wd-space-lg) var(--wd-mkt-gutter) var(--wd-space-xl); background: var(--wd-chrome-raised); border-bottom: 1px solid var(--wd-chrome-border); box-shadow: var(--wd-shadow-lg); }
 .wd-sitebar--search-open .wd-sitebar__search { display: block; }
 .wd-sitebar__search-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-space-md); max-width: calc(var(--wd-space-3xl) * 16.5); margin: 0 auto var(--wd-space-sm); }
 .wd-sitebar__search-heading h2 { margin: 0; color: var(--wd-text-on-green); font-size: var(--wd-font-size-lg); line-height: 1.3; font-weight: 700; }
 .wd-sitebar__search-heading button { width: var(--wd-control-h); height: var(--wd-control-h); border: 1px solid var(--wd-chrome-border); border-radius: var(--wd-mkt-btn-radius); background: transparent; color: var(--wd-text-on-green); font-size: var(--wd-font-size-2xl); padding: 0; cursor: pointer; }
 .wd-sitebar__search form { max-width: calc(var(--wd-space-3xl) * 16.5); margin: auto; }
 .wd-sitebar__search-label { display: block; position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: var(--wd-space-sm); font-size: var(--wd-font-size-sm); font-weight: 700; }
 .wd-sitebar input[type='search'] { min-height: calc(var(--wd-control-h) + var(--wd-space-xs)); font-size: var(--wd-mkt-base); background: var(--wd-chrome); }
 .wd-sitebar__search-hint { display: block; margin: var(--wd-space-md) 0 0; color: var(--wd-text-on-dark-muted); font-size: var(--wd-font-size-xs); }
 /* Saved places under the search row (favourites.js), in place of the hint; flat rows split by hairlines */
 .wd-sitebar__places:not([hidden]) { display: block; max-width: calc(var(--wd-space-3xl) * 16.5); margin: var(--wd-space-md) auto 0; }
 .wd-sitebar__search:has(> .wd-sitebar__places:not([hidden])) .wd-sitebar__search-hint { display: none; }
 .wd-sitebar__places-title { margin: var(--wd-space-sm) 0 var(--wd-space-xs); color: var(--wd-text-on-dark-muted); font-size: var(--wd-font-size-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
 .wd-sitebar__places-list { margin: 0; padding: 0; list-style: none; max-height: calc(var(--wd-space-3xl) * 10); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--wd-chrome-border) transparent; }
 .wd-sitebar__places-list li + li { border-top: 1px solid var(--wd-chrome-border); }
 .wd-sitebar__places-list a, .wd-sitebar__places-list a:hover { display: flex; align-items: center; gap: var(--wd-space-md); min-height: calc(var(--wd-control-h) + var(--wd-space-sm)); padding: var(--wd-space-sm) 0; color: var(--wd-text-on-green); font-size: var(--wd-font-size-sm); font-weight: 700; line-height: 1.3; text-decoration: none; }
 .wd-sitebar__place-star { flex: none; color: var(--wd-cta); }
 .wd-sitebar__place-name { flex: 1; min-width: 0; }
 .wd-sitebar__place-area { display: block; color: var(--wd-text-on-dark-muted); font-size: var(--wd-font-size-xs); font-weight: 500; }
 .wd-sitebar__place-go { flex: none; color: var(--wd-text-on-dark-subtle); }
 .wd-sitebar__places-empty { display: flex; align-items: center; gap: var(--wd-space-sm); margin: 0; color: var(--wd-text-on-dark-muted); font-size: var(--wd-font-size-xs); }
}
@media (max-width: 480px) {
 .wd-sitebar__row { gap: var(--wd-space-xs); padding-inline: var(--wd-space-sm); }
 .wd-sitebar__brand { gap: var(--wd-space-xs); font-size: clamp(var(--wd-font-size-xs), calc(7vw - var(--wd-space-sm) * 1.25), var(--wd-font-size-lg)); }
 .wd-sitebar .wd-sitebar__search-toggle { padding-inline: calc(var(--wd-space-xs) * 1.5); }
 .wd-signup-label-full { display: none; }
 .wd-signup-label-short { display: inline; }
 .admin-bar .wd-sitebar { top: 0; }
}
/* =========================================================
   WEATHERDUCK — SITE FOOTER (MU)
   Two-tier layout: brand row + page links on top,
   legal links + company details below the rule.
   Dark chrome to match the header (site-dark-chrome.css).
   ========================================================= */

.wd-footer {
  background: #1e2b22;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: auto;
  font-family: var(--wd-font);
}

.wd-footer__wrap {
  width: 1168px;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 24px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "brand    nav      social"
    "rule     rule     rule"
    "copyline copyline copyline"
    "company  company  company"
    "credits  credits  credits";
  align-items: center;
  column-gap: 24px;
}

/* Brand row — logo + one-line wordmark + socials */
.wd-footer__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wd-footer__logo {
  width: 38px;
  height: 38px;
  display: block;
}

.wd-footer__wordmark {
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.wd-footer__social {
  grid-area: social;
  display: flex;
  gap: 10px;
  justify-self: end;
}

.wd-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d2d6d3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e2b22;
}

.wd-footer__social a:hover {
  background: #fff;
}

.wd-footer__social svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Page links — bold tier */
.wd-footer__nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
}

.wd-footer__nav a {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.wd-footer__nav a:hover {
  color: #fff;
}

/* Rule */
.wd-footer__rule {
  grid-area: rule;
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255,255,255,.14);
  margin: 20px 0 16px;
}

/* Small print — one centred stack, two lines:
   © + legal links, then the company line. */
.wd-footer__copyline {
  grid-area: copyline;
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
}

.wd-footer__copyright {
  white-space: nowrap;
}

.wd-footer__copyline a {
  color: rgba(255,255,255,.6);
  font-weight: 500;
  text-decoration: none;
}

.wd-footer__copyline a:hover {
  color: rgba(255,255,255,.9);
}

/* "Cookie settings" is a <button> (it reopens the Complianz banner),
   reset so it sits in the legal row like the links around it. */
.wd-footer__cookies {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: rgba(255,255,255,.6);
  cursor: pointer;
}

/* Hello Elementor's reset.css paints button:hover / button:focus with a
   pink (#c36) background, so the background reset must be repeated here. */
.wd-footer__cookies:hover,
.wd-footer__cookies:focus {
  background: none;
  color: rgba(255,255,255,.9);
}

.wd-footer__dot {
  color: rgba(255,255,255,.22);
  margin: 0 8px;
}

.wd-footer__company {
  grid-area: company;
  margin: 6px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.28);
  line-height: 1.6;
}

/* Data credits — Open-Meteo attribution (CC BY 4.0) + sources link */
.wd-footer__credits {
  grid-area: credits;
  margin: 2px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.28);
  line-height: 1.6;
}

.wd-footer__credits a {
  color: rgba(255,255,255,.4);
  font-weight: 400;
  text-decoration: none;
}

.wd-footer__credits a:hover {
  color: rgba(255,255,255,.7);
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .wd-footer__wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "social"
      "nav"
      "rule"
      "copyline"
      "company"
      "credits";
    padding: 26px 24px 16px;
  }

  .wd-footer__brand {
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }

  .wd-footer__logo {
    width: 48px;
    height: 48px;
  }

  .wd-footer__social {
    justify-content: center;
    justify-self: stretch;
    margin-top: 12px;
  }

  .wd-footer__nav {
    margin-top: 22px;
    gap: 8px 20px;
    justify-content: center;
  }

  .wd-footer__nav a {
    font-size: 15px;
    padding: 4px 0;
  }

  .wd-footer__copyline {
    line-height: 2;
  }

  /* © + company name on its own line, legal links beneath */
  .wd-footer__copyright {
    display: block;
  }

  .wd-footer__dot--lead {
    display: none;
  }

  /* Reserved space so the cookie banner + reCAPTCHA badge
     sit below the links instead of covering them */
  .wd-footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
/* ==========================================================
   WEATHERDUCK — Location Autocomplete Dropdown
   Uses design tokens from sitemenu-desktop.css
   ========================================================== */

/* Wrapper: positioned context for the dropdown */
.wdh__search-wrap{
  position: relative;
  flex: 0 1 400px;
  width: 400px;
  max-width: 100%;
}

/* Input inherits full width from the wrapper now */
.wdh__search-wrap .wdh__input{
  flex: none;
  width: 100%;
}

/* Dropdown list */
.wdh__autocomplete{
  position: absolute;
  top: calc(var(--wd-control-h) + 6px);
  left: 0;
  right: 0;
  z-index: 10000;

  margin: 0;
  padding: 6px;
  list-style: none;

  background: var(--wd-bg-card);
  border: 1px solid var(--wd-border);
  border-radius: 16px;
  box-shadow: var(--wd-shadow);

  max-height: 280px;
  overflow-y: auto;
}

.wdh__autocomplete[hidden]{
  display: none;
}

/* Result item */
.wdh__autocomplete-item{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;

  font-size: 13px;
  font-weight: 600;
  color: var(--wd-text);
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.4;
}

.wdh__autocomplete-item:hover,
.wdh__autocomplete-item[aria-selected="true"]{
  background: rgba(0,0,0,.06);
}

/* Type badge (Peak, etc.) */
.wdh__autocomplete-type{
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  color: rgba(0,0,0,.40);
  margin-left: 6px;
  vertical-align: middle;
}

/* State / region sub-text */
.wdh__autocomplete-state{
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0,0,0,.50);
  letter-spacing: .02em;
  margin-top: 1px;
}

/* Empty + loading messages */
.wdh__autocomplete-empty,
.wdh__autocomplete-loading{
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(0,0,0,.45);
  text-align: center;
  text-transform: none;
}

/* "Recent searches" heading above cached local suggestions */
.wdh__autocomplete-heading{
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.40);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Clear-recents action row */
.wdh__autocomplete-clear{
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;

  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,.45);
  text-align: center;
}

.wdh__autocomplete-clear:hover{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.65);
}

/* ── Shortcode form autocomplete wrapper ──────────────────── */
.wd-form-input-wrap{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.wd-form-input-wrap .wdh__autocomplete{
  top: calc(100% + 4px);
}

/* ── Mobile drop-up ────────────────────────────────────────
   Opt in with data-wd-dropup on the combobox wrapper: the specialist
   landing-page forms and the [wd_location_form] shortcode carry it,
   and location-autocomplete.js stamps it on the Elementor-built
   homepage hero. On phones the list then opens ABOVE the input so
   the on-screen keyboard cannot cover it. location-autocomplete.js
   sets --wd-ac-dropup-space to the free height above the input
   (visual viewport minus sticky header) so the list shrinks and
   scrolls instead of running off the top. [role=combobox] and
   :not([hidden]) lift specificity over the per-page top: rules in
   home.css and specialist-landing.css. */
@media (max-width: 768px) {
  [data-wd-dropup][role="combobox"] .wdh__autocomplete:not([hidden]) {
    top: auto;
    bottom: calc(100% + var(--wd-space-xs));
    max-height: min(calc(var(--wd-space-3xl) * 7), var(--wd-ac-dropup-space, calc(var(--wd-space-3xl) * 7)));
    overscroll-behavior: contain;
  }
}
/* Shared plain clear button; the original input and dropdown keep their behaviour. */
.wd-search-field {
	--wd-search-clear-color: var(--wd-green);
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.wd-sitebar .wd-search-field,
.wdh__search-wrap .wd-search-field,
.wdm-search-wrap .wd-search-field,
.wd-home.on-dark .wd-search-field,
.wd-specialist-search .wd-search-field {
	--wd-search-clear-color: var(--wd-text-on-green);
}

.wd-inversion-quick-check .wd-search-field {
	--wd-search-clear-color: var(--wd-green);
}

/* Reserve space even where individual page rules override input padding. */
.wd-search-field > input {
	padding-inline-end: calc(var(--wd-control-h) + var(--wd-space-xs)) !important;
}

.wd-search-field > input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.wd-search-field > .wd-search-clear,
#tab-grounds .wd-search-field > .wd-search-clear {
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--wd-control-h);
	height: var(--wd-control-h);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wd-radius-sm);
	background: transparent;
	box-shadow: none;
	color: var(--wd-search-clear-color);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-2xl);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.wd-search-field > .wd-search-clear:hover,
#tab-grounds .wd-search-field > .wd-search-clear:hover {
	background: transparent;
	color: var(--wd-search-clear-color);
}

.wd-search-field > .wd-search-clear:focus-visible {
	outline: 2px solid var(--wd-cta);
	outline-offset: -2px;
}

.wd-search-field > .wd-search-clear[hidden],
#tab-grounds .wd-search-field > .wd-search-clear[hidden] {
	display: none;
}
/* Location search loading state, driven by search-loading.js: busy button or place link, header bar, then a panel over the page. */

/* === Busy button or link: label kept but hidden so the width holds === */
:is(a, button).wd-search-busy[aria-busy='true'] { display: inline-grid; place-items: center; cursor: progress; text-decoration: none; }
.wd-search-busy > span { grid-area: 1 / 1; }
.wd-search-busy__label { visibility: hidden; }
.wd-search-busy__status { display: inline-flex; align-items: center; gap: var(--wd-space-sm); white-space: nowrap; }
.wd-search-busy__spinner, .wd-search-busy-row::after { width: var(--wd-space-lg); height: var(--wd-space-lg); flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wd-search-spin .7s linear infinite; }
.wd-search-form--loading input[name='weather_location'] { opacity: .6; }

/* === Busy list row (drawer places): the trailing arrow turns into the spinner, the row keeps its layout === */
.wd-search-busy-row { cursor: progress; }
.wd-search-busy-row > :last-child { display: none; }
.wd-search-busy-row::after { content: ''; box-sizing: border-box; }

/* === Header bar: creeps to 85% like a browser's, the next page replaces it === */
.wd-sitebar--loading::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--wd-space-xs) * .75); background: var(--wd-cta); transform-origin: left; animation: wd-search-creep 8s cubic-bezier(.1, .7, .2, 1) forwards; }

/* === Panel over the old page, under the sticky header === */
.wd-search-loading { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wd-space-xs); padding: var(--wd-space-xl); background: color-mix(in srgb, var(--wd-bg-page) 88%, transparent); font-family: var(--wd-font); text-align: center; animation: wd-search-fade .2s ease-out; }
.wd-search-loading img { margin-bottom: var(--wd-space-sm); animation: wd-search-bob .9s ease-in-out infinite alternate; }
.wd-search-loading__title { margin: 0; color: var(--wd-text-primary); font-size: var(--wd-font-size-lg); font-weight: 800; line-height: 1.3; }
.wd-search-loading__hint { margin: 0; color: var(--wd-text-secondary); font-size: var(--wd-font-size-sm); }
.wd-night-tab .wd-search-loading { background: color-mix(in srgb, var(--wd-chrome) 90%, transparent); }
.wd-night-tab .wd-search-loading__title { color: var(--wd-text-on-green); }
.wd-night-tab .wd-search-loading__hint { color: var(--wd-text-on-dark-muted); }

@keyframes wd-search-spin { to { transform: rotate(360deg); } }
@keyframes wd-search-creep { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes wd-search-fade { from { opacity: 0; } }
@keyframes wd-search-bob { to { transform: translateY(calc(var(--wd-space-xs) * -1.5)); } }

@media (prefers-reduced-motion: reduce) {
  .wd-search-loading, .wd-search-loading img { animation: none; }
}
/* ── WD Radar Map ── */

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

.wd-radar-header .wd-section-title {
    margin-bottom: 0;
}

.wd-radar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wd-radar-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1;
}

.wd-radar-live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: wd-radar-pulse 1.5s ease-in-out infinite;
}

@keyframes wd-radar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.wd-radar-updated {
    font-size: 12px;
    color: var(--wd-text-faint, #777);
    font-variant-numeric: tabular-nums;
}

.wd-radar-wrap {
    position: relative;
    border-radius: var(--wd-radius-md);
    overflow: hidden;
}

#wd-radar-map {
    width: 100%;
    height: 400px;
    min-height: 300px;
    z-index: 0;
}

#wd-radar-map .leaflet-tile-pane .leaflet-layer {
    transition: opacity 0.4s ease;
}

.wd-radar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 0;
}

.wd-radar-controls .wd-radar-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--wd-bg-card, #fff);
    border: 1px solid var(--wd-border-strong, rgba(0, 0, 0, 0.16));
    color: var(--wd-green, #425A47);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.wd-radar-controls .wd-radar-btn:hover {
    border-color: var(--wd-green, #425A47);
    background: var(--wd-bg-subtle, #f5f5f3);
}

.wd-radar-controls .wd-radar-btn:active { transform: scale(0.94); }

.wd-radar-btn svg { width: 14px; height: 14px; fill: currentColor; }

.wd-radar-controls .wd-radar-btn--play {
    width: 42px;
    height: 42px;
    background: var(--wd-green, #425A47);
    border-color: var(--wd-green, #425A47);
    color: #fff;
    box-shadow: 0 3px 10px rgba(66, 90, 71, 0.35);
}

.wd-radar-controls .wd-radar-btn--play:hover {
    background: var(--wd-green-hover, #354a39);
    border-color: var(--wd-green-hover, #354a39);
}

.wd-radar-btn--play svg { width: 16px; height: 16px; }
.wd-radar-btn--play .wd-radar-ic-pause { display: none; }
.wd-radar-btn--play.is-playing .wd-radar-ic-play { display: none; }
.wd-radar-btn--play.is-playing .wd-radar-ic-pause { display: block; }

/* Scrubber: green progress fill up to the thumb (--wd-progress set by JS) */
#wd-radar-scrubber {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
    background: linear-gradient(to right,
        var(--wd-green, #425A47) var(--wd-progress, 100%),
        var(--wd-border, rgba(0, 0, 0, 0.08)) var(--wd-progress, 100%));
}

#wd-radar-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wd-bg-card, #fff);
    border: 3px solid var(--wd-green, #425A47);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
}

#wd-radar-scrubber::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wd-bg-card, #fff);
    border: 3px solid var(--wd-green, #425A47);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
}

#wd-radar-time {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    background: var(--wd-bg-subtle, #f5f5f3);
    border: 1px solid var(--wd-border, rgba(0, 0, 0, 0.08));
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--wd-text-primary, #141414);
    white-space: nowrap;
    min-width: 58px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wd-radar-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wd-font-size-sm, 13px);
    color: var(--wd-text-mid, #aaa);
    pointer-events: none;
    z-index: 500;
}

.wd-radar-credit {
    font-size: 11px;
    color: var(--wd-text-faint, #777);
    text-align: right;
    padding-top: 6px;
}

.wd-radar-credit a {
    color: var(--wd-text-mid, #aaa);
    text-decoration: none;
}

.wd-radar-credit a:hover {
    text-decoration: underline;
}

/* ── Rainfall intensity key ── */

.wd-radar-key {
    padding-top: 12px;
}

/* Smooth gradient approximating the RainViewer colour scheme the tiles use
   (COLOR_SCHEME 2: light blue through blue and yellow to orange and red) */
.wd-radar-key__bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(
        to right,
        #a8d5f2 0%,
        #6faee6 28%,
        #efe14e 52%,
        #ef8a2e 76%,
        #e04020 100%
    );
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.wd-radar-key__labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--wd-text-faint, #777);
    padding-top: 3px;
}

@media (max-width: 480px) {
    #wd-radar-map {
        height: 26vh;
        min-height: 220px;
    }
}
/* ============================================================
   WEATHER DUCK — Forecast Page Header  (v5.2)
   Scoped to .wd-fc-header__* + .wd-fc-astro-* — no leakage

   Desktop (≥1100px): fixed 160px-tall 5-column grid
     Col 1: Location  |  Col 2: Map  |  Col 3: Today  |  Col 4: Tomorrow  |  Col 5: Sun & Moon

   Mobile: flex column, natural DOM order
     Location → Map → Today → Tomorrow → Sun & Moon

   WeatherDuck green: #425A47
   ============================================================ */


/* ----------------------------------------------------------
 * Section wrapper
 * ---------------------------------------------------------- */
.wd-fc-header {
    font-family: var(--wd-font);
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
 * Main row
 * ---------------------------------------------------------- */
.wd-fc-header__row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1100px) {
    .wd-fc-header__row {
        display: grid;
        grid-template-columns: 140px 190px 1fr 1fr 1.4fr;
        grid-template-rows: 128px;
        align-items: stretch;
        gap: 0 20px;
    }
}


/* ----------------------------------------------------------
 * All columns — desktop: fill row height as flex column
 * ---------------------------------------------------------- */
@media (min-width: 1100px) {
    .wd-fc-header__col {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}


/* ----------------------------------------------------------
 * Col 1: Location — CENTRED vertically + horizontally
 * ---------------------------------------------------------- */
.wd-fc-header__col--loc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__col--loc {
        justify-content: center;
    }
}

.wd-fc-header__location {
    display: block;
    font-size: var(--wd-font-size-xl);
    font-weight: 700;
    color: var(--wd-green);
    line-height: 1.15;
}

.wd-fc-header__county {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wd-green);
}

.wd-fc-header__coords {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--wd-text-primary);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.wd-fc-header__updated {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--wd-text-secondary);
    line-height: 1.4;
}


/* ----------------------------------------------------------
 * Col 2: Mini map
 * ---------------------------------------------------------- */
.wd-fc-header__col--map {
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

@media (max-width: 1099px) {
    .wd-fc-header__col--map {
        height: 144px;
    }
}

@media (min-width: 1100px) {
    .wd-fc-header__col--map {
        height: 128px;
    }
}

/* Force Leaflet container to fill regardless of nesting — zero
   padding/margin so no grey bars leak through the background. */
.wd-fc-header__col--map > div,
.wd-fc-header__col--map .wd-location-map {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wd-fc-header__col--map > div > div {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wd-fc-header__col--map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}


/* ----------------------------------------------------------
 * Col 3 & 4: Today / Tomorrow — CENTRED text
 * ---------------------------------------------------------- */
.wd-fc-header__col--today,
.wd-fc-header__col--tomorrow {
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__col--today,
    .wd-fc-header__col--tomorrow {
        padding-top: 10px;
        overflow: hidden;
    }
}

/* Summary wrapper — centres its children */
.wd-fc-header__summary-wrap {
    text-align: center;
}

/* Day title heading — Title Case, bolder, green */
.wd-fc-header__daytitle {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--wd-green);
    margin: 0 0 5px;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

/* Narrative summary text — centred, 3-line clamp */
.wd-fc-header__summary-text {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-primary);
    line-height: 1.45;
    margin: 0 0 4px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Score line */
.wd-fc-header__score-line {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-secondary);
    margin: 4px 0 0;
    flex-shrink: 0;
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__score-line {
        margin-top: auto;
        padding-bottom: 10px;
    }
}

.wd-fc-header__score-val {
    font-weight: 700;
    color: var(--wd-text-primary);
}

.wd-fc-header__score-val.wd-fc-header__score--excellent { color: var(--wd-score-excellent-text); }
.wd-fc-header__score-val.wd-fc-header__score--good      { color: var(--wd-score-good-text); }
.wd-fc-header__score-val.wd-fc-header__score--fair       { color: var(--wd-score-fair-text); }
.wd-fc-header__score-val.wd-fc-header__score--poor       { color: var(--wd-score-poor-text); }
.wd-fc-header__score-val.wd-fc-header__score--terrible   { color: var(--wd-score-bad-text); }


/* ----------------------------------------------------------
 * Col 5: Sun & Moon — compact, NO borders/shading
 * ---------------------------------------------------------- */
@media (min-width: 1100px) {
    .wd-fc-header__col--astro {
        padding-top: 8px;
        overflow: hidden;
    }
}

/* Astro title — "SUN & MOON — NEXT 5 DAYS" */
.wd-fc-header__astro-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wd-green);
    margin: 0 0 4px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Scroll wrapper */
.wd-fc-header__astro-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
}
.wd-fc-header__astro-scroll::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}

@media (min-width: 1100px) {
    .wd-fc-header__astro-scroll {
        overflow: visible;
        flex: 1;
    }
}

/* ── Astro table — structural only, zero borders ── */
.wd-fc-astro-table {
    width: 100%;
    min-width: 260px;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
    border: 0;
}

.wd-fc-astro-table th,
.wd-fc-astro-table td {
    border: 0;
    background: none;
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Headers — icon + text, very compact */
.wd-fc-astro-table th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--wd-green);
    padding: 0 3px 3px 0;
    line-height: 1.15;
    text-align: center;
}

/* Icon inside header */
.wd-fc-astro-table th span[aria-hidden] {
    font-size: 0.72rem;
    margin-right: 1px;
    vertical-align: baseline;
}

/* Text label beside icon */
.wd-fc-astro__thtext {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Day column header — no icon, just "Day", left-aligned */
.wd-fc-astro__th-day {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
}

/* Cells — tight */
.wd-fc-astro-table td {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--wd-text-primary);
    padding: 1px 3px 1px 0;
    line-height: 1.15;
    text-align: center;
}

/* Day column — bold, left-aligned */
.wd-fc-astro__td-day {
    font-weight: 700;
    color: var(--wd-text-primary);
    text-align: left;
}

/* Daylight column — green accent */
.wd-fc-astro__td-dl {
    color: #2e5c38;
    font-weight: 600;
}

/* Today row — green day label */
.wd-fc-astro__tr--today .wd-fc-astro__td-day {
    color: var(--wd-green);
}


/* ----------------------------------------------------------
 * LEGACY class neutralisation
 * The old wd-fc-header__astro-table / __th / __td classes
 * are no longer output by PHP, but if they appear in cached
 * HTML, zero out their borders so nothing leaks.
 * ---------------------------------------------------------- */
.wd-fc-header__astro-table,
.wd-fc-header__th,
.wd-fc-header__td {
    border: 0 !important;
}
.wd-fc-header__astro-table tbody tr + tr .wd-fc-header__td {
    border: 0 !important;
}

/* Legacy .wd-fc-header__col-label — no longer used by astro,
   kept for any other callers that may still reference it. */
.wd-fc-header__col-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-green);
    margin: 0 0 6px;
    line-height: 1.2;
    flex-shrink: 0;
}


/* ==============================================================
 * MOBILE-ONLY OVERRIDES (≤ 767px)
 * ============================================================== */

/* ----------------------------------------------------------
 * A) Summaries: remove 3-line clamp so full text shows
 * ---------------------------------------------------------- */
@media (max-width: 767px) {
    .wd-fc-header__summary-text {
        display: block;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
}

/* ----------------------------------------------------------
 * B) Map: shorter on mobile
 * ---------------------------------------------------------- */
@media (max-width: 767px) {
    .wd-fc-header__col--map {
        height: 69px;
    }
}

/* ----------------------------------------------------------
 * C) Astro toggle: button + table switching (mobile only)
 * ---------------------------------------------------------- */

/* Astro header row — title + button side by side */
.wd-fc-astro__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.wd-fc-astro__header .wd-fc-header__astro-title {
    margin: 0;
}

/* Toggle button — hidden on desktop, shown on mobile */
.wd-fc-astro__toggle {
    display: none;
}

@media (max-width: 767px) {
    .wd-fc-astro__toggle {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--wd-text-on-green);
        background: var(--wd-green);
        border: 1px solid var(--wd-green-hover);
        border-radius: 4px;
        padding: 3px 8px;
        cursor: pointer;
        line-height: 1.3;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .wd-fc-astro__toggle:hover,
    .wd-fc-astro__toggle:focus {
        background: var(--wd-green-hover);
    }

    /* Hide the full desktop table, show mobile toggle tables */
    .wd-fc-astro__desktop {
        display: none;
    }
}

/* Mobile toggle tables — hidden on desktop */
.wd-fc-astro__tables {
    display: none;
}
@media (max-width: 767px) {
    .wd-fc-astro__tables {
        display: block;
    }
}
/* ============================================================
   WEATHER DUCK — Day Carousel  (v1.0)
   Scoped to .wd-dc* — no leakage.

   Compact single-day-at-a-time view with prev/next arrows.
   Falls back to showing Today only when JS doesn't load.
   ============================================================ */


/* ----------------------------------------------------------
 * Wrapper
 * ---------------------------------------------------------- */
.wd-dc {
    font-family: var(--wd-font);
    text-align: center;
    max-width: 460px;          /* keeps it compact even in wide containers */
    margin: 0 auto;
}


/* ----------------------------------------------------------
 * Nav row: [<]  Day Label  [>]
 * ---------------------------------------------------------- */
.wd-dc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Day label */
.wd-dc__label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--wd-green);
    line-height: 1.25;
    letter-spacing: 0.01em;
    min-width: 7em;            /* prevents layout shift when label changes */
}

/* Arrows — hidden until JS adds .wd-dc--js (graceful degradation) */
.wd-dc__arrow {
    display: none;             /* hidden without JS */
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #b5c4b8;
    border-radius: 4px;
    background: #f4f7f5;
    color: var(--wd-green);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

/* JS has loaded — show arrows */
.wd-dc--js .wd-dc__arrow {
    display: inline-flex;
}

.wd-dc__arrow:hover:not(:disabled),
.wd-dc__arrow:focus-visible:not(:disabled) {
    background: #e0ebe3;
    border-color: #8ea793;
    outline: none;
}

.wd-dc__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


/* ----------------------------------------------------------
 * Day panels — only the active one is visible
 * ---------------------------------------------------------- */
.wd-dc__panel {
    display: none;
}

.wd-dc__panel--active {
    display: block;
}

/* Summary text — matches existing header typography */
.wd-dc__summary {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-primary);
    line-height: 1.45;
    margin: 0 0 4px;
}

.wd-dc__summary--empty {
    color: var(--wd-text-muted);
    font-style: italic;
}


/* ----------------------------------------------------------
 * Dashed separator between day summary and score
 * ---------------------------------------------------------- */
.wd-dc__separator {
    border-top: 1px dashed rgba(66, 90, 71, 0.25);
    margin: 8px 0 6px;
}


/* ----------------------------------------------------------
 * Score panels — toggled in sync with day panels
 * ---------------------------------------------------------- */
.wd-dc__score {
    display: none;
}

.wd-dc__score--active {
    display: block;
}

/* Re-use existing score-line styles from forecast-header.css.
   Only override the margin to keep things tight in carousel context. */
.wd-dc .wd-fc-header__score-line {
    margin: 0;
}
/* ============================================================
   WEATHER DUCK — Location Search Form (Vertical)
   Clean, centred, intentional
   ============================================================ */

.wd-weather-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    font-family: var(--wd-font);
}

/* Label */
.wd-form-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--wd-text-primary);
    text-align: center;
}

/* Input + Button wrapper */
.wd-form-group {
    display: flex;
    flex-direction: column;          /* key change */
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 360px;                /* slightly tighter, feels focused */
}

/* Input */
.wd-form-input {
    padding: 10px 14px;
    border: 1px solid var(--wd-border-strong);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    height: var(--wd-control-h);
    box-sizing: border-box;
}

.wd-form-input:focus {
    outline: none;
    border-color: var(--wd-search-focus-border);
    box-shadow: var(--wd-search-focus-ring);
}

/* Button */
.wd-form-button {
    display: flex;                   /* guarantees perfect centring */
    align-items: center;
    justify-content: center;

    padding: 10px 16px;
    height: var(--wd-control-h);
    width: 100%;

    border: none;
    border-radius: 6px;
    background-color: var(--wd-green);
    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.wd-form-button:hover {
    background-color: var(--wd-green-hover);
}

/* ============================================================
   MOBILE TUNING
   ============================================================ */

@media (max-width: 600px) {

    .wd-form-group {
        max-width: 100%;
        gap: 8px;
    }

    .wd-form-input {
        font-size: 0.95rem;
    }

    .wd-form-button {
        font-size: 0.95rem;
    }
}

/* ============================================================
   WEATHER DUCK — Astronomy Location Search Form (Vertical)
   IDENTICAL to wd-weather-form
   Only class names changed
============================================================ */

/* Wrapper */
.wd-astro-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    font-family: var(--wd-font);
}

/* Label */
.wd-astro-form-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--wd-text-primary);
    text-align: center;
}

/* Input + Button wrapper */
.wd-astro-form-group {
    display: flex;
    flex-direction: column;          /* SAME */
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 360px;
}

/* Input */
.wd-astro-form-input {
    padding: 10px 14px;
    border: 1px solid var(--wd-border-strong);
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    height: var(--wd-control-h);
    box-sizing: border-box;
}

.wd-astro-form-input:focus {
    outline: none;
    border-color: var(--wd-search-focus-border);
    box-shadow: var(--wd-search-focus-ring);
}

/* Button */
.wd-astro-form-button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 16px;
    height: var(--wd-control-h);
    width: 100%;

    border: none;
    border-radius: 6px;
    background-color: var(--wd-blue-astro);
    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.wd-astro-form-button:hover {
    background-color: #2E4A77;
}

/* ============================================================
   MOBILE TUNING (UNCHANGED)
============================================================ */

@media (max-width: 600px) {

    .wd-astro-form-group {
        max-width: 100%;
        gap: 8px;
    }

    .wd-astro-form-input {
        font-size: 0.95rem;
    }

    .wd-astro-form-button {
        font-size: 0.95rem;
    }
}
/* ============================================================
   WEATHER DUCK — STARGAZING PAGE (Night-Sky Redesign)
   Unified styles for all astronomy tab components
============================================================ */

/* ------------------------------------------------------------
   NIGHT SKY DESIGN TOKENS
------------------------------------------------------------ */
:root {
  --sky-deep:    #0c1425;
  --sky-mid:     #131d35;
  --sky-surface: #1a2744;
  --sky-border:  rgba(100, 140, 200, 0.15);
  --sky-text:    #c8d6e5;
  --sky-text-bright: #e8eef5;
  --sky-accent:  #5b9bd5;
  --sky-accent-dim: rgba(91, 155, 213, 0.35);
  --sky-muted:   rgba(200, 214, 229, 0.5);
}

/* ============================================================
   DARK CARD — shared base for night-sky sections
============================================================ */
.sg-dark-card {
  background: var(--sky-deep);
  border: 1px solid var(--sky-border);
  border-radius: var(--wd-radius-md, 12px);
  padding: 20px;
  color: var(--sky-text);
  position: relative;
  overflow: hidden;
  font-family: var(--wd-font);
}

/* Subtle star field texture */
.sg-dark-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 80%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 10%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 70%, rgba(255,255,255,0.16) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.sg-dark-card > * { position: relative; z-index: 1; }

/* Light card variant */
.sg-light-card {
  background: var(--wd-bg-card, #ffffff);
  border: 1px solid var(--wd-border, rgba(0,0,0,0.08));
  border-radius: var(--wd-radius-md, 12px);
  padding: 20px;
  font-family: var(--wd-font);
}

/* Section header */
.sg-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sg-section-icon {
  font-size: 18px;
  line-height: 1;
}

.sg-section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sg-dark-card .sg-section-title { color: var(--sky-text-bright); }

.sg-section-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(91, 155, 213, 0.15);
  color: var(--sky-accent);
}

/* ============================================================
   1. STARGAZING OUTLOOK — Cloud Cover Bars + Night Cycling
============================================================ */

/* Nav arrows */
.sg-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sg-nav__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sky-accent);
  min-width: 11em;
  text-align: center;
}

.sg-nav__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--sky-border);
  border-radius: 6px;
  background: var(--sky-surface);
  color: var(--sky-accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.sg-outlook--js .sg-nav__arrow {
  display: inline-flex;
}

.sg-nav__arrow:hover:not(:disabled) {
  background: rgba(91, 155, 213, 0.2);
  border-color: var(--sky-accent);
}

.sg-nav__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Hide per-row day label when JS nav active */
.sg-outlook--js .sg-night-day { display: none; }

/* Night row layout */
.sg-night-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

.sg-night-row[hidden] { display: none !important; }

/* Left info panel */
.sg-night-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sg-night-day {
  font-size: 14px;
  font-weight: 700;
  color: var(--sky-text-bright);
}

.sg-moon-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-moon-icon { font-size: 22px; }

.sg-moon-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sky-text-bright);
}

.sg-moon-illum {
  font-size: 11px;
  color: var(--sky-muted);
  font-weight: 500;
}

.sg-time-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--sky-muted);
}

.sg-time-row span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Score ring */
.sg-score-wrap {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sg-score-ring {
  width: 48px;
  height: 48px;
  position: relative;
}

.sg-score-ring svg {
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
}

.sg-score-ring circle {
  fill: none;
  stroke-width: 4;
}

.sg-score-ring .ring-bg {
  stroke: var(--sky-surface);
}

.sg-score-ring .ring-fg {
  stroke: var(--sky-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.sg-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--sky-text-bright);
  font-family: var(--wd-mono, monospace);
}

.sg-score-caption {
  font-size: 11px;
  color: var(--sky-muted);
  line-height: 1.3;
}

.sg-score-caption strong {
  color: var(--sky-text-bright);
  font-weight: 600;
}

/* Cloud bars */
.sg-bars-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-cloud-avg {
  font-size: 12px;
  font-weight: 600;
  color: var(--sky-accent);
}

.sg-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.sg-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.sg-bar-pct {
  font-size: 9px;
  font-weight: 600;
  color: var(--sky-muted);
  margin-bottom: 3px;
  font-family: var(--wd-mono, monospace);
  height: 13px;
  display: flex;
  align-items: flex-end;
}

.sg-bar {
  width: 100%;
  height: 80px;
  border-radius: 3px 3px 0 0;
  position: relative;
  overflow: hidden;
  background: var(--sky-surface);
}

.sg-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #6b7b8d, #8a9bae);
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.sg-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(91,155,213,0.08), transparent);
  pointer-events: none;
}

.sg-bar-hour {
  margin-top: 4px;
  font-size: 10px;
  color: var(--sky-muted);
  font-family: var(--wd-mono, monospace);
  font-weight: 500;
}

/* ============================================================
   2. KP 3-DAY FORECAST
============================================================ */
.sg-kp-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sg-kp-chart {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.sg-kp-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  padding-bottom: 22px;
  flex-shrink: 0;
  width: 18px;
}

.sg-kp-yaxis span {
  font-size: 9px;
  font-family: var(--wd-mono, monospace);
  color: var(--sky-muted);
  text-align: right;
}

.sg-kp-bars {
  display: flex;
  gap: 2px;
  flex: 1;
  align-items: flex-end;
  position: relative;
}

.sg-kp-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.sg-kp-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.4s ease;
  position: relative;
}

.sg-kp-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.12), transparent);
  border-radius: 3px 0 0 0;
}

.sg-kp-time {
  margin-top: 4px;
  font-size: 9px;
  font-family: var(--wd-mono, monospace);
  color: var(--sky-muted);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  height: 18px;
  overflow: hidden;
}

.sg-kp-day-labels {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  padding-left: 22px;
}

.sg-kp-day-label {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--sky-muted);
  padding-top: 6px;
  border-top: 1px solid var(--sky-border);
}

.sg-kp-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sg-kp-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--sky-muted);
}

.sg-kp-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   3. AURORA OVERVIEW
============================================================ */
.sg-aurora-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sg-aurora-metric {
  background: var(--sky-surface);
  border-radius: 8px;
  padding: 12px;
}

.sg-aurora-metric--full {
  grid-column: 1 / -1;
}

.sg-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sky-muted);
  margin-bottom: 4px;
}

.sg-metric-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--wd-mono, monospace);
  color: var(--sky-text-bright);
  line-height: 1;
}

.sg-metric-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--sky-muted);
}

.sg-metric-sub {
  font-size: 11px;
  color: var(--sky-muted);
  margin-top: 2px;
}

.sg-aurora-bar {
  height: 6px;
  background: var(--sky-surface);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--sky-border);
}

.sg-aurora-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4caf50, #ffc107, #ff5722);
  transition: width 0.5s ease;
}

.sg-kp-blocks {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}

.sg-kp-block {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: rgba(100,140,200,0.15);
  transition: background 0.3s;
}

.sg-kp-block.active {
  background: #ffa726;
}

.sg-sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.sg-sw-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}

.sg-sw-key {
  color: var(--sky-muted);
}

.sg-sw-val {
  font-weight: 600;
  font-family: var(--wd-mono, monospace);
  color: var(--sky-text-bright);
}

.sg-aurora-updated {
  text-align: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--sky-muted);
}

/* ============================================================
   4. AURORA MAP
============================================================ */
.sg-aurora-maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sg-map-panel {
  text-align: center;
}

.sg-map-panel img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.sg-map-panel canvas {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  display: block;
  background: #000;
}

.sg-map-label {
  font-size: 11px;
  color: var(--sky-muted);
  margin-top: 6px;
}

.sg-map-footer {
  text-align: center;
  font-size: 11px;
  color: var(--sky-muted);
  margin-top: 10px;
  line-height: 1.4;
}

/* ============================================================
   5. LIGHT POLLUTION MAP
============================================================ */
.sg-lp-embed iframe {
  width: 100%;
  height: 380px;
  border: none;
  border-radius: 8px;
  display: block;
}

/* ============================================================
   6. STAR MAP
============================================================ */
.sg-starmap-wrap {
  width: 100%;
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   LOADING STATE
============================================================ */
.sg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--sky-muted);
  font-size: 12px;
}

@keyframes sg-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.sg-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-accent);
  animation: sg-pulse 1.2s ease-in-out infinite;
}

.sg-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.sg-loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ============================================================
   SOURCE FOOTER
============================================================ */
.sg-source {
  font-size: 11px;
  color: var(--sky-muted);
  text-align: center;
  margin-top: 6px;
}

.sg-source a {
  color: var(--sky-accent);
  text-decoration: none;
}

.sg-source a:hover { text-decoration: underline; }

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 680px) {
  .sg-night-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .sg-night-row[hidden] { display: none !important; }

  .sg-aurora-grid {
    grid-template-columns: 1fr;
  }

  .sg-aurora-maps {
    grid-template-columns: 1fr;
  }

  .sg-bar { height: 56px; }

  .sg-kp-time { font-size: 8px; }

  .sg-metric-value { font-size: 22px; }
}

/* Unified forecast-card typography override */
body.page-template-page-forecast-unified #tab-stargazing .wd-card,
body.page-template-page-forecast-unified #tab-stargazing .wd-card * {
  font-family: var(--wd-card-font, 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif) !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-map-footer,
  .sg-map-label,
  .sg-source,
  .sg-aurora-updated,
  .sg-loading,
  .sg-sw-key,
  .sg-night-phase,
  .sg-night-cloud
) {
  font-size: var(--wd-card-meta-font-size, 0.72rem) !important;
  font-weight: var(--wd-card-meta-font-weight, 600) !important;
  line-height: var(--wd-card-meta-line-height, 1.35) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-night-day,
  .sg-metric-label,
  .sg-sw-item,
  .sg-map-label
) {
  font-size: var(--wd-card-label-font-size, 0.68rem) !important;
  font-weight: var(--wd-card-label-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--wd-card-label-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-score-num,
  .sg-sw-val,
  .sg-metric-value,
  .sg-night-row-score
) {
  font-family: var(--wd-card-num-font, var(--wd-card-font, 'Montserrat', 'Roboto', sans-serif)) !important;
  font-variant-numeric: tabular-nums !important;
}
/* Nightly Outlook: shared moon/cloud/hour timeline, approved September 2026. */
.wd-no {
	color: var(--wd-night-text);
	font-family: var(--wd-font);
}
.wd-no .wd-no__night[hidden] { display: none; }
.wd-no .wd-no__days {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--wd-space-xs);
	margin-bottom: var(--wd-space-lg);
}
.wd-no .wd-no__day {
	min-width: 0;
	min-height: var(--wd-control-h);
	padding: var(--wd-space-xs);
	border: 1px solid var(--wd-night-border);
	border-radius: var(--wd-radius-sm);
	background: var(--wd-night-raised);
	color: var(--wd-night-text);
	font: 600 var(--wd-font-size-xs)/1.4 var(--wd-font);
	text-align: center;
	cursor: pointer;
}
.wd-no .wd-no__day span { display: block; color: var(--wd-night-muted); font-weight: 400; }
.wd-no .wd-no__day[aria-pressed="true"] { background: var(--wd-night-best-fill); border-color: var(--wd-night-best); }
.wd-no .wd-no__day:hover { border-color: var(--wd-night-text); }
.wd-no .wd-no__day:focus-visible { outline: 2px solid var(--wd-night-best); outline-offset: 2px; }
.wd-no .wd-no__head { display: flex; justify-content: space-between; align-items: center; gap: var(--wd-space-md); margin-bottom: var(--wd-space-md); }
.wd-no .wd-no__head h3 { margin: 0 0 var(--wd-space-xs); color: var(--wd-night-text); font-size: var(--wd-font-size-md); font-weight: 600; line-height: 1.4; }
.wd-no .wd-no__phase { color: var(--wd-night-muted); margin: 0; font-size: var(--wd-font-size-xs); }
.wd-no .wd-no__score { color: var(--wd-night-best); font-size: var(--wd-font-size-2xl); font-weight: 700; white-space: nowrap; }
.wd-no .wd-no__score small { color: var(--wd-night-muted); font-size: var(--wd-font-size-xs); font-weight: 400; }
.wd-no .wd-no__score--excellent { color: var(--wd-score-excellent); }
.wd-no .wd-no__score--fair { color: var(--wd-score-fair-strong); }
.wd-no .wd-no__score--poor { color: var(--wd-score-poor-strong); }
.wd-no .wd-no__score--terrible { color: var(--wd-score-bad-strong); }
.wd-no .wd-no__window { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wd-space-xs) var(--wd-space-md); margin-bottom: var(--wd-space-md); font-size: var(--wd-font-size-sm); }
.wd-no .wd-no__window strong { color: var(--wd-night-best); font-weight: 600; }
.wd-no .wd-no__window span { color: var(--wd-night-muted); font-size: var(--wd-font-size-xs); }
.wd-no .wd-no__window--poor strong { color: var(--wd-score-poor); }
.wd-no .wd-no__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wd-space-xs) var(--wd-space-md); margin-bottom: var(--wd-space-sm); font-size: var(--wd-font-size-xs); color: var(--wd-night-moon); }
.wd-no .wd-no__legend .wd-no__best-key { color: var(--wd-night-best); }
.wd-no .wd-no__legend .wd-no__daylight-key { color: var(--wd-night-dawn); }
.wd-no .wd-no__chart { display: block; width: 100%; height: var(--wd-night-chart-height); overflow: hidden; }
.wd-no .wd-no__chart text { font-family: var(--wd-font); font-size: var(--wd-font-size-xs); fill: var(--wd-night-text); }
.wd-no .wd-no__chart .wd-no__muted { fill: var(--wd-night-muted); }
.wd-no .wd-no__chart .wd-no__moon-text { fill: var(--wd-night-moon); }
.wd-no .wd-no__chart .wd-no__best-text { fill: var(--wd-night-best); font-weight: 600; }
.wd-no .wd-no__sky, .wd-no .wd-no__below { fill: var(--wd-night-raised); }
.wd-no .wd-no__daylight { fill: var(--wd-night-dawn); opacity: .14; }
.wd-no .wd-no__best-band { fill: var(--wd-night-best); opacity: .28; }
.wd-no .wd-no__best-edge { fill: var(--wd-night-best); }
.wd-no .wd-no__guide, .wd-no .wd-no__grid { stroke: var(--wd-night-border); stroke-width: 1; }
.wd-no .wd-no__guide { opacity: .6; }
.wd-no .wd-no__horizon { stroke: var(--wd-night-muted); stroke-width: 1; stroke-dasharray: 3 4; }
.wd-no .wd-no__arc { fill: none; stroke: var(--wd-night-moon); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wd-no .wd-no__moon-point { fill: var(--wd-night-moon); }
.wd-no .wd-no__cloud-bar { fill: var(--wd-night-cloud); }
.wd-no .wd-no__caption { margin: var(--wd-space-xs) 0 var(--wd-space-md); text-align: right; font-size: var(--wd-font-size-xs); color: var(--wd-night-muted); }
.wd-no .wd-no__events { display: flex; flex-wrap: wrap; gap: var(--wd-space-xs) var(--wd-space-lg); padding-top: var(--wd-space-md); border-top: 1px solid var(--wd-night-border); color: var(--wd-night-muted); font-size: var(--wd-font-size-xs); }
.wd-no .wd-no__events strong { color: var(--wd-night-moon); font-weight: 500; }
.wd-no .wd-no__details { margin-top: var(--wd-space-sm); }
.wd-no .wd-no__details summary { cursor: pointer; min-height: var(--wd-control-h); padding: var(--wd-space-sm) 0; color: var(--wd-night-text); font-size: var(--wd-font-size-xs); }
.wd-no .wd-no__table { border-collapse: collapse; width: 100%; font-size: var(--wd-font-size-xs); color: var(--wd-night-text); }
.wd-no .wd-no__table caption { padding-bottom: var(--wd-space-sm); text-align: left; color: var(--wd-night-muted); font-size: var(--wd-font-size-xs); }
.wd-no .wd-no__table th, .wd-no .wd-no__table td { padding: var(--wd-space-sm) var(--wd-space-xs); border: 0; border-bottom: 1px solid var(--wd-night-border); background: transparent; text-align: left; }
.wd-no .wd-no__table th { font-weight: 500; color: var(--wd-night-muted); }
.wd-no .wd-no__table th:last-child, .wd-no .wd-no__table td:last-child { text-align: right; }
.wd-no .wd-no__table .wd-no__best-row { background: var(--wd-night-best-fill); }
.wd-no .wd-no__chart, .wd-no .wd-no__score, .wd-no .wd-no__table { font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
	.wd-no .wd-no__days { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.wd-no .wd-no__chart { height: var(--wd-night-chart-height-mobile); }
	.wd-no .wd-no__day span { display: inline; margin-left: var(--wd-space-xs); }
}
/* ============================================================
   WEATHER DUCK — Kp 3-Day Forecast (3 stacked day rows)
   Replaces the old single-row 24-bar chart.
   Each day = a row with meta (peak, badge, hint) + 8-bar chart.
   Uses --sky-* tokens from stargazing-table.css and --wd-* from
   design-tokens.css.
============================================================ */

.sg-kpf-section {
  /* Section-local Kp activity palette — matches the bar bucket coloring */
  --kpf-quiet:     #74c69d;     /* Kp 0–2 */
  --kpf-unsettled: #ffd166;     /* Kp 3–4 */
  --kpf-active:    #f4a261;     /* Kp 5–6 */
  --kpf-storm:     #e63946;     /* Kp 7+ */
  --kpf-bright:    #e8eef5;     /* sky text bright */

  font-family: var(--wd-font);
}
/* Restore card padding — .sg-card sets padding:0 expecting a separate
   .sg-card-body wrapper, which this layout doesn't use. Two-class
   selector beats .sg-card single-class specificity. */
.wd-card.sg-kpf-section {
  /* Same 16px inner padding as every other card on the tab. */
  padding: var(--wd-space-lg, 16px);
}
@media (max-width: 768px) {
  .wd-card.sg-kpf-section {
    padding: var(--wd-card-padding-mobile, 16px);
  }
  .sg-kpf-header {
    margin: calc(-1 * var(--wd-card-padding-mobile, 16px)) calc(-1 * var(--wd-card-padding-mobile, 16px)) var(--wd-space-md);    padding: var(--wd-card-header-pad-y, 6px) var(--wd-card-header-pad-x, 16px);
  }
}

/* ── Header ── */
/* Full-bleed title strip: the same pale-green band every unified card uses
   (negative margins cancel the card padding; top corners follow the card
   radius so the band sits inside the rounded frame). */
.sg-kpf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wd-space-md);
  margin: calc(-1 * var(--wd-space-lg, 16px)) calc(-1 * var(--wd-space-lg, 16px)) var(--wd-space-md);
  padding: var(--wd-card-header-pad-y, 6px) var(--wd-card-header-pad-x, 16px);
  background: var(--wd-green-light, #d4e8d6);
  border-bottom: 1px solid rgba(47, 74, 54, 0.18);
  border-radius: calc(var(--wd-uc-card-radius, 12px) - 1px) calc(var(--wd-uc-card-radius, 12px) - 1px) 0 0;
  height: var(--wd-card-header-height, 38px);
  min-height: var(--wd-card-header-height, 38px);
  box-sizing: border-box;
}
.sg-kpf-title.wd-section-title {
  color: #1f2f27;
  margin-bottom: 0;
}
.sg-kpf-source {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 47, 39, 0.78);
}
.sg-kpf-sub {
  font-size: 10.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  line-height: 1.4;
  margin-bottom: 10px;
}
.sg-kpf-sub b {
  color: var(--sky-text, #c8d6e5);
  font-weight: 600;
}

/* ── Day card ── */
.sg-kpf-day {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--wd-radius-sm);
  padding: 16px 20px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;        /* 50/50 split: info | chart */
  gap: 20px;
  align-items: stretch;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sg-kpf-day:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.sg-kpf-day:last-child { margin-bottom: 0; }

/* Featured: an active or storm day gets warm tint to draw the eye */
.sg-kpf-day--featured {
  background: rgba(244, 162, 97, 0.06);
  border-color: rgba(244, 162, 97, 0.22);
}

/* ── Meta column ── */
.sg-kpf-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}
.sg-kpf-meta__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sg-kpf-meta__head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sg-kpf-meta__day {
  font-size: 14px;
  font-weight: 700;
  color: var(--sky-text-bright, var(--kpf-bright));
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.sg-kpf-meta__date {
  font-size: 10.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
}
.sg-kpf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--wd-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.sg-kpf-badge--quiet     { background: rgba(116, 198, 157, 0.15); color: var(--kpf-quiet); }
.sg-kpf-badge--unsettled { background: rgba(255, 209, 102, 0.18); color: var(--kpf-unsettled); }
.sg-kpf-badge--active    { background: rgba(244, 162, 97, 0.18);  color: var(--kpf-active); }
.sg-kpf-badge--storm     { background: rgba(230, 57, 70, 0.18);   color: var(--kpf-storm); }

.sg-kpf-meta__peak {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sg-kpf-meta__peak-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
}
.sg-kpf-meta__peak-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sky-text-bright, var(--kpf-bright));
}
.sg-kpf-meta__peak-time {
  font-size: 10px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.sg-kpf-meta__hint {
  font-size: 10.5px;
  color: var(--sky-text, #c8d6e5);
  line-height: 1.35;
  border-left: 2px solid var(--kpf-quiet);
  padding-left: 7px;
}
.sg-kpf-day--featured .sg-kpf-meta__hint { border-left-color: var(--kpf-active); }

/* ── Chart column ── */
.sg-kpf-chart {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 5px;
}
.sg-kpf-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 3px 14px 0;
  font-size: 9px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sg-kpf-canvas {
  position: relative;
  height: 88px;
}
.sg-kpf-svg { display: block; width: 100%; height: 100%; }

.sg-kpf-xaxis {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 0;
  font-size: 8.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
}
.sg-kpf-xaxis span { flex: 1; text-align: center; }
.sg-kpf-xaxis span:first-child { text-align: left; }
.sg-kpf-xaxis span:last-child  { text-align: right; }

/* Peak marker label inside the chart */
.sg-kpf-peak-label {
  position: absolute;
  font: 700 9.5px/1 var(--wd-font);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.7);
  color: var(--sky-text-bright, var(--kpf-bright));
  border: 1px solid var(--kpf-quiet);
  padding: 1px 5px;
  border-radius: 3px;
  transform: translate(-50%, -135%);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.sg-kpf-day--featured .sg-kpf-peak-label { border-color: var(--kpf-active); }

/* No-data fallback */
.sg-kpf-empty {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--sky-muted, #888);
}

/* ── Mobile ── */
@media (max-width: 720px) {
  .sg-kpf-day {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sg-kpf-meta {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-right: 0;
    padding-bottom: 10px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .sg-kpf-meta__day,
  .sg-kpf-meta__date { display: inline-block; margin-right: 8px; }
  .sg-kpf-meta__peak { flex-direction: row; align-items: baseline; gap: 6px; margin-left: auto; }
  .sg-kpf-meta__peak-val { font-size: 22px; }
  .sg-kpf-meta__hint { width: 100%; margin-top: 6px; }
}

/* Unified forecast-card typography override */
body.page-template-page-forecast-unified #tab-stargazing .sg-kpf-section,
body.page-template-page-forecast-unified #tab-stargazing .sg-kpf-section * {
  font-family: var(--wd-card-font, 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif) !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-kpf-sub,
  .sg-kpf-meta__hint,
  .sg-kpf-meta__peak-time,
  .sg-kpf-yaxis,
  .sg-kpf-xaxis,
  .sg-kpf-empty
) {
  font-size: var(--wd-card-meta-font-size, 0.72rem) !important;
  font-weight: var(--wd-card-meta-font-weight, 600) !important;
  line-height: var(--wd-card-meta-line-height, 1.35) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-kpf-meta__day,
  .sg-kpf-meta__date,
  .sg-kpf-meta__peak-label,
  .sg-kpf-badge,
  .sg-kpf-source
) {
  font-size: var(--wd-card-label-font-size, 0.68rem) !important;
  font-weight: var(--wd-card-label-font-weight, 700) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--wd-card-label-letter-spacing, 0.06em) !important;
  text-transform: uppercase !important;
}

body.page-template-page-forecast-unified #tab-stargazing :where(
  .sg-kpf-meta__peak-val,
  .sg-kpf-meta__peak-time,
  .sg-kpf-yaxis,
  .sg-kpf-xaxis,
  .sg-kpf-peak-label
) {
  font-family: var(--wd-card-num-font, var(--wd-card-font, 'Montserrat', 'Roboto', sans-serif)) !important;
  font-variant-numeric: tabular-nums !important;
}
/* ============================================================
   ACTIVITY SCORE — CARD
   ============================================================ */

.wd-activity-card {
    background: var(--wd-bg-card);
    border-radius: var(--wd-radius-lg);
    padding: var(--wd-card-padding);
    max-width: 1240px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--wd-border);
    box-shadow: var(--wd-shadow-lg);
    overflow: hidden;
}

.wd-activity-title {
    margin: 0 0 12px;
    font-size: var(--wd-font-size-xl);
    font-weight: 800;
    color: var(--wd-text-primary);
}


/* ============================================================
   TABLE SCROLL ZONE
   ============================================================ */
.wd-activity-table-wrap {
    max-width: 800px;            /* visual rail */
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

/* ============================================================
   ACTIVITY SCORE — TABLE
   ============================================================ */

.wd-activity-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed; /* required for column control */
}


/* ============================================================
   BASE CELL STYLES
   ============================================================ */

.wd-activity-table th,
.wd-activity-table td {
    border: 1px solid var(--wd-table-border);
    padding: 6px 4px;              /* tighter horizontally */
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}


/* ============================================================
   COLUMN WIDTH CONTROL
   Order:
   1 = Day
   2 = Avg
   3+ = Time slots
   ============================================================ */

.wd-activity-table th:nth-child(1),
.wd-activity-table td:nth-child(1) {
    width: 72px;                   /* Day */
}

.wd-activity-table th:nth-child(2),
.wd-activity-table td:nth-child(2) {
    width: 58px;                   /* Avg */
}

.wd-activity-table th:nth-child(n+3),
.wd-activity-table td:nth-child(n+3) {
    width: 44px;                   /* score cells */
}


/* ============================================================
   HEADERS
   ============================================================ */

.wd-activity-table th {
    background: var(--wd-bg-subtle);
    font-weight: 700;
    color: var(--wd-text-primary);
    border-top: none;
}


/* ============================================================
   AVG COLUMN DIVIDER
   ============================================================ */

.wd-activity-table th:nth-child(2),
.wd-activity-table td:nth-child(2) {
    border-right: 4px solid #b5b5b5;
    font-weight: 800;
    background: var(--wd-bg-subtle);
}


/* ============================================================
   SPECIAL CELLS
   ============================================================ */

.wd-activity-table td.empty,
.wd-activity-table td.past-grey {
    background: var(--wd-bg-subtle);
    color: var(--wd-text-muted);
}


/* ============================================================
   SCORE COLOUR SCALE
   ============================================================ */

.score-cell {
    transition: background-color 0.15s ease;
}

.score-9,
.score-10 { background: var(--wd-score-excellent) !important; }

.score-7,
.score-8 { background: var(--wd-score-good) !important; }

.score-5,
.score-6 { background: var(--wd-score-fair) !important; }

.score-3,
.score-4 { background: var(--wd-score-poor) !important; }

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


/* ============================================================
   DESCRIPTION
   ============================================================ */

.wd-activity-desc {
    margin-top: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--wd-text-secondary);
    font-weight: 500;
}

.wd-activity-note {
    margin-top: 8px;
    padding-top: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wd-text-muted);
    border-top: 1px dashed var(--wd-border-strong);
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {

    .wd-activity-title {
        font-size: 1.15rem;
    }

    .wd-activity-table th,
    .wd-activity-table td {
        font-size: 0.84rem;
        padding: 5px 4px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .wd-activity-card {
        padding: var(--wd-card-padding-mobile);
    }

    .wd-activity-table {
        min-width: 640px;
    }

    .wd-activity-table th:nth-child(1),
    .wd-activity-table td:nth-child(1) {
        width: 64px;
    }

    .wd-activity-table th:nth-child(2),
    .wd-activity-table td:nth-child(2) {
        width: 52px;
    }

    .wd-activity-table th:nth-child(n+3),
    .wd-activity-table td:nth-child(n+3) {
        width: 40px;               /* tighter on mobile */
    }
}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .wd-activity-table {
        min-width: 480px;
    }
	
    .wd-activity-table th,
    .wd-activity-table td {
        font-size: 0.76rem;
        padding: 4px 3px;
    }
	
	    .wd-activity-table th:nth-child(1),
    .wd-activity-table td:nth-child(1) {
        width: 35px;
    }

    .wd-activity-table th:nth-child(2),
    .wd-activity-table td:nth-child(2) {
        width: 25px;
    }

    .wd-activity-table th:nth-child(n+3),
    .wd-activity-table td:nth-child(n+3) {
        width: 25px;
    }
}


/* ============================================================
   SCORE LEGEND
   ============================================================ */

.wind-key-horizontal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px auto 0;
    font-size: 0.85rem;
}

.key-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 2px solid #ccc;
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-subtle);
}

.color-box {
    width: 16px;
    height: 16px;
    border: 1px solid var(--wd-text-muted);
    border-radius: 4px;
}
/* WeatherDuck Cloud Inversion CSS, part 01 of 8: inversion tokens, old 2-column layout A to E, old responsive, summary teaser card.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   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);
}

/* v11 — rescue badge + "prime overnight" note on the Atmospheric Profile card */
.wd-inv-rescue-badge {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(66, 90, 71, 0.12);
    color: var(--wd-green, #425A47);
    border: 1px solid var(--wd-green, #425A47);
}
.wd-inv-prime-note {
    margin: 4px 0 0;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--wd-green, #425A47);
}


/* ============================================================
   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-t65,
.wd-inv-heatmap-seg.wd-inv-t60 { background: var(--inv-good); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t45,
.wd-inv-heatmap-seg.wd-inv-t40 { background: var(--inv-moderate); color: #fff; }
.wd-inv-heatmap-seg.wd-inv-t25,
.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.
   ================================================================
   ================================================================ */


/* WeatherDuck Cloud Inversion CSS, part 02 of 8: B4 section cards, key drivers, explainer, tonight detail, cloud layer and summits, factor bars, data sources, golden hour, bottom grid, help guide, B4 responsive.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   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 — 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;
    min-height: 136px;
}

/* Photo-backed timeline bar */
.wd-gh-timeline {
    position: relative;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    background: #263848 url('/wp-content/mu-plugins/weatherduck/assets/img/sunrisebar4.png') calc(50% + 2px) center / calc(100% + 10px) 100% 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;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

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

body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn:hover,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn:active {
    background: transparent !important;
    border: 0 !important;
    color: #1f6037 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn--active,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn--active:hover,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn--active:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn--active:active {
    background: #1f6037 !important;
    color: #fff !important;
}

.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;
    min-height: 82px;
    height: 82px;
    box-sizing: border-box;
    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: #263848 url('/wp-content/mu-plugins/weatherduck/assets/img/sunrisebar4.png') calc(50% - 2px) center / calc(100% + 10px) 100% no-repeat;
    transform: scaleX(-1);
}

@media (max-width: 640px) {
    .wd-sunrise-callout {
        height: auto;
    }
}

.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;
}

.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);
}

/* Monthly Inversion Chance Bar Chart */
.wd-freq-illustrative:not(.wd-freq-illustrative--chance) {
    display: none;
}

.wd-freq-chart-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    width: min(100%, 650px);
    margin: 0 auto 10px;
}

.wd-freq-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 46px;
    padding: 2px 0 18px;
    border-right: 1px solid rgba(47, 74, 54, 0.16);
    color: var(--wd-text-light, #908a7e);
}

.wd-freq-axis span {
    display: block;
    max-width: 46px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wd-freq-axis span:first-child {
    color: var(--wd-green, #425A47);
}

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

.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 {
        /* Matches the 16px the title bands pull out by, so bands stop
           overhanging the card border by 1px on phones. */
        padding: var(--wd-card-padding-mobile, 16px);
    }

    .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);
}


/* WeatherDuck Cloud Inversion CSS, part 03 of 8: inversion heatmap, explorer card, outlook periods, mobile outlook hero.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   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: #dfe9e2;
    border-radius: var(--wd-radius-md, 12px);
    overflow: hidden;
    aspect-ratio: 580 / 360;
}

.wd-inv-heatmap-map.leaflet-container {
    background: #dfe9e2;
    font-family: inherit;
}

.wd-inv-heatmap-map .leaflet-tile-pane,
.wd-inv-anchor-map .leaflet-tile-pane {
    opacity: .8;
    filter: saturate(.9) contrast(.96) brightness(1.04);
}

/* The heatmap bakes its greyscale tone into each OSM tile in JavaScript.
   Keeping this pane filter-free avoids Chromium's one-pixel compositor seams
   at Leaflet tile boundaries. The separate anchor map retains its CSS tone. */
.wd-inv-heatmap-map .leaflet-tile-pane {
    filter: none;
}

.wd-inv-heatmap-map .leaflet-control-zoom a,
.wd-inv-anchor-map .leaflet-control-zoom a {
    color: var(--wd-text, #17211c);
    border-color: var(--wd-border, #dbe4dd);
}

.wd-inv-heatmap-map .leaflet-control-attribution,
.wd-inv-anchor-map .leaflet-control-attribution {
    font-size: 10px;
    color: var(--wd-text-light, #66756d);
}

/* 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;
}

/* Ladder colours = the classic inversion tier set (--inv-*), matching the
   JS TIERS array. Class names keep their historical tier words. */
.wd-inv-heatmap-legend-dot--strong {
    background: var(--inv-excellent);
}

.wd-inv-heatmap-legend-dot--good {
    background: var(--inv-good);
}

.wd-inv-heatmap-legend-dot--possible {
    background: var(--inv-moderate);
}

.wd-inv-heatmap-legend-dot--unlikely {
    background: var(--inv-verylow);
}

/* The key and its map-view control are one compact instrument row. The
   segmented control is intentionally unrelated to Forecast / Observed. */
.wd-inv-heatmap-legend-wrap {
    margin-top: var(--wd-space-sm);
}

.wd-inv-heatmap-key-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--wd-space-md);
    padding-top: var(--wd-space-sm);
    border-top: 1px solid var(--wd-border);
}

.wd-inv-heatmap-key-row .wd-inv-heatmap-legend {
    justify-content: flex-start;
    gap: var(--wd-space-xs) var(--wd-space-md);
    min-width: 0;
    padding: 0;
}

.wd-inv-heatmap-legend[hidden] {
    display: none !important;
}

.wd-inv-view-switch {
    display: inline-grid;
    grid-auto-flow: column;
    gap: calc(var(--wd-space-xs) / 2);
    padding: calc(var(--wd-space-xs) / 2);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    background: var(--wd-bg-subtle);
}

.wd-inv-view-switch-btn {
    appearance: none;
    min-height: calc(var(--wd-control-h) - var(--wd-space-md));
    padding: var(--wd-space-xs) var(--wd-space-sm);
    border: 0;
    border-radius: var(--wd-radius-sm);
    background: transparent;
    color: var(--wd-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    line-height: 1;
    text-transform: none;
}

.wd-inv-view-switch-btn:hover {
    background: var(--wd-bg-card);
    color: var(--wd-text-primary);
}

.wd-inv-view-switch-btn[aria-pressed="true"] {
    background: var(--wd-green);
    color: var(--wd-text-on-green);
    box-shadow: var(--wd-shadow-sm);
}

.wd-inv-view-switch-btn[aria-pressed="true"]:hover {
    background: var(--wd-green-hover);
    color: var(--wd-text-on-green);
}

.wd-inv-view-switch-btn:focus-visible {
    outline: 2px solid var(--wd-green);
    outline-offset: 2px;
}

/* Active Areas: qualitative tier rail. The labelled chip keeps colour and
   meaning together; the row stays one large target with an explicit map action. */
.wd-inv-areacard {
    --wd-inv-area-tier: var(--inv-moderate);
    --wd-inv-area-tier-ink: var(--wd-score-fair-text);
    cursor: pointer;
}

.wd-inv-areacard--likely {
    --wd-inv-area-tier: var(--inv-good);
    --wd-inv-area-tier-ink: var(--wd-score-good-text);
}

.wd-inv-areacard--strong {
    --wd-inv-area-tier: var(--inv-excellent);
    --wd-inv-area-tier-ink: var(--wd-score-excellent-text);
}

.wd-inv-areacard:hover {
    background: var(--wd-bg-subtle);
}

.wd-inv-areacard:focus-visible {
    outline: 2px solid var(--wd-green);
    outline-offset: var(--wd-space-2xs);
}

.wd-inv-areacard .wd-inv-range-main {
    grid-area: main;
}

.wd-inv-area-tier {
    grid-area: tier;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: var(--wd-space-xs) var(--wd-space-sm);
    border-radius: var(--wd-radius-pill);
    background: color-mix(in srgb, var(--wd-inv-area-tier) 14%, var(--wd-bg-card));
    color: var(--wd-inv-area-tier-ink);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    line-height: var(--wd-card-meta-line-height);
    white-space: nowrap;
}

.wd-inv-areacard .wd-inv-range-meta {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: var(--wd-card-meta-line-height);
}

.wd-inv-area-action {
    grid-area: action;
    align-self: end;
    justify-self: end;
    color: var(--wd-green);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    white-space: nowrap;
}

.wd-inv-insight-empty.wd-inv-areas-empty {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wd-space-sm);
    min-height: calc(var(--wd-space-3xl) * 4);
    padding: var(--wd-space-xl) var(--wd-space-md);
    color: var(--wd-text-secondary);
    line-height: var(--wd-card-meta-line-height);
    text-align: center;
    box-sizing: border-box;
}

.wd-inv-areas-empty strong {
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-sm);
}

.wd-inv-areas-empty span {
    display: block;
    max-width: calc(var(--wd-space-3xl) * 6);
}

.wd-inv-heatmap-legend--areas {
    padding: var(--wd-space-sm) 0;
}

.wd-inv-heatmap-legend-blob {
    width: calc(var(--wd-space-xl) + var(--wd-space-xs));
    height: var(--wd-space-md);
    border: 2px solid currentColor;
    border-radius: var(--wd-radius-pill);
    flex-shrink: 0;
}

.wd-inv-heatmap-legend-blob--possible {
    border-color: var(--inv-moderate);
    background: color-mix(in srgb, var(--inv-moderate) 80%, var(--wd-bg-card));
}

.wd-inv-heatmap-legend-blob--likely {
    border-color: var(--inv-good);
    background: color-mix(in srgb, var(--inv-good) 80%, var(--wd-bg-card));
}

.wd-inv-heatmap-legend-blob--strong {
    border-color: var(--inv-excellent);
    background: color-mix(in srgb, var(--inv-excellent) 80%, var(--wd-bg-card));
}

.wd-inv-blob-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* History/admin footprint comparison. Production uses the selected canonical
   footprint without exposing this testing control. */
.wd-inv-terrain-control {
    min-width: calc(var(--wd-space-3xl) * 5);
    max-width: calc(var(--wd-space-3xl) * 7);
    overflow: hidden;
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
    background: var(--wd-bg-card);
    box-shadow: var(--wd-shadow-sm);
    color: var(--wd-text-primary);
    font-family: var(--wd-font);
}

.wd-inv-terrain-control[hidden],
.wd-inv-terrain-control__wind[hidden] {
    display: none !important;
}

.wd-inv-terrain-control__head,
.wd-inv-terrain-control__wind {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-space-sm);
    padding: var(--wd-space-sm);
}

.wd-inv-terrain-control__head {
    border-bottom: 1px solid var(--wd-border);
    background: var(--wd-bg-subtle);
}

.wd-inv-terrain-control__title {
    font-size: var(--wd-card-label-font-size);
    font-weight: var(--wd-card-label-font-weight);
    letter-spacing: var(--wd-card-label-letter-spacing);
    line-height: var(--wd-card-meta-line-height);
    text-transform: uppercase;
}

.wd-inv-terrain-control__tag {
    padding: calc(var(--wd-space-xs) / 2) var(--wd-space-xs);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-pill);
    background: var(--wd-bg-card);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: var(--wd-card-meta-font-weight);
    line-height: 1;
    white-space: nowrap;
}

.wd-inv-terrain-control__modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--wd-space-xs) / 2);
    padding: var(--wd-space-xs);
}

.wd-inv-terrain-control button {
    appearance: none;
    min-width: 0;
    padding: var(--wd-space-xs);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-card);
    color: var(--wd-text-secondary);
    font-family: inherit;
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    line-height: var(--wd-card-meta-line-height);
    cursor: pointer;
}

.wd-inv-terrain-control button:hover {
    border-color: var(--wd-green);
    color: var(--wd-text-primary);
}

.wd-inv-terrain-control button[aria-pressed="true"] {
    border-color: var(--wd-green);
    background: var(--wd-green);
    color: var(--wd-bg-card);
}

.wd-inv-terrain-control button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 calc(var(--wd-space-xs) / 2) var(--wd-bg-card),
        0 0 0 var(--wd-space-xs) var(--wd-green);
}

.wd-inv-terrain-control__wind {
    border-top: 1px solid var(--wd-border);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: var(--wd-card-meta-font-weight);
}

.wd-inv-terrain-control__wind > div {
    display: flex;
    gap: calc(var(--wd-space-xs) / 2);
}

.wd-inv-terrain-control__wind button {
    padding-inline: var(--wd-space-sm);
}

.wd-inv-terrain-control__status {
    display: block;
    min-height: var(--wd-space-lg);
    padding: 0 var(--wd-space-sm) var(--wd-space-sm);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    font-weight: var(--wd-card-meta-font-weight);
    line-height: var(--wd-card-meta-line-height);
}

.wd-inv-terrain-control__status[data-state="error"] {
    color: var(--inv-verylow);
}

.wd-inv-terrain-control--best .wd-inv-terrain-control__status {
    color: var(--wd-text-muted);
}

/* A diamond means "observed viewpoint", deliberately unlike both the purple
   search dot and the coloured weather footprint. The tooltip clarifies that
   this point is evidence of nearby conditions, not the cloud-mask boundary. */
.wd-inv-evidence-icon {
    border: 0;
    background: none;
}

.wd-inv-evidence-marker {
    position: absolute;
    inset: 0;
    display: block;
    border: 2px solid var(--wd-bg-card);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-green);
    box-shadow: var(--wd-shadow-sm);
    transform: rotate(45deg);
}

.wd-inv-evidence-icon--negative .wd-inv-evidence-marker {
    background: var(--inv-verylow);
}

.wd-inv-evidence-icon--uncertain .wd-inv-evidence-marker {
    background: var(--inv-moderate);
}

.wd-inv-evidence-tooltip {
    max-width: calc(var(--wd-space-3xl) * 7);
}

.wd-inv-terrain-mask {
    pointer-events: none;
}

@media (max-width: 480px) {
    .wd-inv-terrain-control {
        width: calc(100vw - var(--wd-space-3xl));
        min-width: 0;
        max-width: none;
    }

    .wd-inv-terrain-control__modes {
        gap: calc(var(--wd-space-xs) / 2);
    }

    .wd-inv-terrain-control__wind {
        align-items: flex-start;
        flex-direction: column;
    }

    .wd-inv-terrain-control__wind > div {
        width: 100%;
    }

    .wd-inv-terrain-control__wind button {
        flex: 1 1 0;
    }
}

.wd-inv-heatmap-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wd-space-md);
    margin-left: auto;
    padding-top: 0;
    white-space: nowrap;
    text-transform: none !important;
}

.wd-inv-heatmap-ts,
.wd-inv-heatmap-countdown {
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: var(--wd-card-meta-font-weight);
    color: var(--wd-text-secondary);
}

/* 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;
}

.wd-inv-tooltip.leaflet-tooltip {
    min-width: 190px;
    max-width: 280px;
    padding: 9px 10px;
    border: 1px solid rgba(23, 33, 28, .16);
    border-radius: 8px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 32px rgba(20, 30, 26, .18);
    color: var(--wd-text-mid, #66756d);
    white-space: normal;
}

.wd-inv-tooltip strong {
    display: block;
    color: var(--wd-text, #17211c);
    font-size: 0.86rem;
    margin-bottom: 2px;
}

.wd-inv-tooltip span {
    display: block;
    color: var(--wd-text-mid, #66756d);
    font-size: 0.76rem;
    line-height: 1.35;
}

.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 atmospheric profile 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-key-row .wd-inv-heatmap-legend {
    justify-content: flex-start;
}

.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);
}

/* ============================================================
   INVERSION OUTLOOK — EQUAL CALENDAR-HALF PERIODS
   ============================================================ */

.wd-inv-night-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 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);
}

/* Self-contained outlook card bypassing the 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;
}

/* Heatmap card: the info button lives in the green section-title band. Lay the
   title out as a flex row so the "i" sits centred next to the text, and lift the
   tooltip above the Leaflet map layers (the shared z-index:100 would sit behind). */
body.page-template-page-forecast-unified #tab-inversion .wd-section-title--info {
    display: flex;
    align-items: center;
    gap: var(--wd-space-xs);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-card .wd-inv-source-info__tip {
    z-index: 1200;
}

/* Leaflet makes the map container focusable; suppress the browser focus ring it draws
   around the whole heatmap on click. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-map:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-map:focus-visible,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-map :focus,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-map :focus-visible {
    outline: none;
}

.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;
}

/* Limited access becomes the final Outlook cell instead of a banner above the
   forecast. It marks the edge of the visible horizon while keeping the row at
   the natural height of the forecast periods. */
.wd-inv-outlook-access-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wd-space-md);
    box-sizing: border-box;
    height: calc((var(--wd-space-3xl) * 4) + var(--wd-space-lg));
    min-width: 0;
    padding: var(--wd-space-lg);
    background: color-mix(in srgb, var(--wd-green-light) 24%, var(--wd-bg-card));
    text-align: center;
}

.wd-inv-outlook-access-copy {
    display: grid;
    gap: var(--wd-space-xs);
    min-width: 0;
}

.wd-inv-outlook-access-eyebrow {
    color: var(--wd-green);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wd-inv-outlook-access-title {
    max-width: calc(var(--wd-space-3xl) * 4);
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-md);
    font-weight: 700;
    line-height: 1.4;
}

.wd-inv-outlook-access-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--wd-control-h) - var(--wd-space-sm));
    padding: 0 var(--wd-space-md);
    border: 1px solid var(--wd-green);
    border-radius: var(--wd-radius-sm);
    background: transparent;
    color: var(--wd-green) !important;
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
}

.wd-inv-outlook-access-button:hover,
.wd-inv-outlook-access-button:focus-visible {
    border-color: var(--wd-green-hover);
    background: var(--wd-green-light);
    color: var(--wd-green-hover) !important;
}

.wd-inv-outlook-access-button:focus-visible {
    outline: none;
    box-shadow: var(--wd-focus-ring);
}

.wd-inv-night-strip--periods-1 { --wd-inv-visible-periods: 1; }
.wd-inv-night-strip--periods-2 { --wd-inv-visible-periods: 2; }
.wd-inv-night-strip--periods-3 { --wd-inv-visible-periods: 3; }
.wd-inv-night-strip--periods-4 { --wd-inv-visible-periods: 4; }
.wd-inv-night-strip--periods-5 { --wd-inv-visible-periods: 5; }
.wd-inv-night-strip--periods-6 { --wd-inv-visible-periods: 6; }

/* 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 {
    position: relative;
    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto
        auto
        minmax(0, 1fr)
        auto;
    row-gap: 0;
    align-items: stretch;
    box-sizing: border-box;
    height: calc((var(--wd-space-3xl) * 4) + var(--wd-space-lg));
    min-width: 0;
    padding: calc(var(--wd-space-lg) + var(--wd-space-sm)) var(--wd-space-md) var(--wd-space-lg);
    border-right: 1px solid var(--wd-border, rgba(47,74,54,0.18));
    background: var(--wd-bg-card, #fff);
    text-align: center;
    transition: background 0.15s;
}

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

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

.wd-inv-strip-day {
    display: grid;
    grid-row: 1;
    place-items: center;
    min-width: 0;
    margin-bottom: var(--wd-space-sm);
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wd-text-light, #908a7e);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-inv-strip-likelihood {
    grid-row: 4;
    align-self: center;
    font-family: 'Montserrat', 'Roboto', var(--wd-font), sans-serif;
    font-size: var(--wd-font-size-lg);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Pending state: hide server-rendered per-location values until the region
   JS fills the real (region) numbers — stops the score "flash" on load.
   The class is added by a parse-time script in tab-inversion.php (so no-JS
   visitors keep the server values) and removed after the fill, with an 8s
   timeout fallback. */
.wd-inv-outlook--pending .wd-inv-strip-likelihood,
/* The timing line is server-rendered per-location too, so it must hide with
   the rest — otherwise it is the one value seen visibly rewriting itself. */
.wd-inv-outlook--pending .wd-inv-strip-window,
.wd-inv-outlook--pending .wd-inv-strip-meta,
.wd-inv-outlook--pending .wd-inv-strip-best-badge,
.wd-inv-outlook--pending .wd-inv-outlook-hero > *,
.wd-inv-outlook--pending .wd-inv-outlook-taphint {
    visibility: hidden;
}

.wd-inv-strip-meta {
    display: grid;
    grid-row: 7;
    grid-template-rows: repeat(2, auto);
    row-gap: var(--wd-space-xs);
    align-items: center;
    min-width: 0;
    min-height: 0;
}

/* Unified detail gate — the template sets this when there is no qualifying
   timing window (so it holds even if the region fill never runs), and
   fillOutlookPeriodsRegion() re-toggles it from the region series. The
   confidence line always stays because it grades the forecast, not the event. */
.wd-inv-strip--nodetail .wd-inv-strip-ct {
    display: none;
}

/* Unfilled lines (JS skipped the card, or pre-fill fallback reveal) must not
   leave phantom flex-gap spacing in the meta column. */
.wd-inv-strip-window:empty,
.wd-inv-strip-conf:empty,
.wd-inv-strip-stability:empty {
    display: none;
}

.wd-inv-strip-window {
    display: flex;
    grid-row: 2;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: var(--wd-green);
    font-size: var(--wd-font-size-xs);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: pre-line;
}

.wd-inv-strip--nodetail .wd-inv-strip-window {
    color: var(--wd-text-muted);
    font-weight: 600;
}

/* Cloud-top band under the window line — rendered whenever the server found
   a peak window; visibility rides the unified detail gate above. */
.wd-inv-strip-ct {
    font-family: var(--wd-mono, monospace);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--wd-text-mid, #5a5850);
    line-height: 1.2;
    margin-top: 0;
}

.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;
    background: var(--wd-bg-subtle);
    color: var(--wd-text-secondary);
}

.wd-inv-t80 .wd-inv-strip-best-badge { color: var(--inv-excellent); }
.wd-inv-t65 .wd-inv-strip-best-badge,
.wd-inv-t60 .wd-inv-strip-best-badge { color: var(--inv-good); }
.wd-inv-t45 .wd-inv-strip-best-badge,
.wd-inv-t40 .wd-inv-strip-best-badge { color: var(--inv-moderate); }
.wd-inv-t25 .wd-inv-strip-best-badge,
.wd-inv-t20 .wd-inv-strip-best-badge { color: var(--inv-low); }

.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-size: var(--wd-font-size-xs);
    font-weight: 700;
    color: var(--wd-text-light, #908a7e);
    letter-spacing: 0;
    margin-top: 0;
    white-space: nowrap;
}

.wd-inv-strip-stability {
    max-width: 100%;
    overflow: hidden;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-inv-outlook-wrap .wd-inv-empty {
    padding: var(--wd-space-lg);
}

/* === Mobile outlook hero (V2 layout, 2026-07-09) ===
   The hero block + tap hint are mobile-only furniture: desktop keeps the
   5-column strip and hides both. Styled in the accepted-mobile section
   (@media max-width: 768px) further down. syncOutlookHero() in
   inversion-heatmap.js mirrors the selected strip card into the hero. */
.wd-inv-outlook-hero,
.wd-inv-outlook-taphint {
    display: none;
}

/* The hero badge reuses the strip badge styling, just inline in the flow */
.wd-inv-hero-when .wd-inv-strip-best-badge {
    position: static;
}

.wd-inv-strip-best-badge.wd-inv-hero-badge--off {
    display: none;
}

/* 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;
}

/* Profile region/anchor dropdowns — sit just under the title, out of the heading text */
.wd-skewt-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-space-sm, 8px);
    margin: 0 0 var(--wd-space-sm, 8px);
}
.wd-skewt-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wd-font-size-xs, 12px);
    color: var(--wd-text-muted, #6f7468);
}
.wd-skewt-ctrl > span {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wd-skewt-ctrl select {
    font: inherit;
    font-size: var(--wd-font-size-sm, 13px);
    font-weight: 600;
    color: var(--wd-text, #2c3328);
    background: var(--wd-bg-card, #fff);
    border: 1px solid var(--wd-border, #d9d3c7);
    border-radius: var(--wd-radius-sm, 6px);
    padding: 3px 8px;
    max-width: 220px;
}

/* Second (profile) timeline slider — sits under the dropdowns, syncs with the top one;
   extra breathing room beneath it */
.wd-skewt-shared-slider {
    margin: var(--wd-space-sm, 8px) 0 var(--wd-space-md, 14px);
}

/* Breathing room beneath the skew-T diagram (before the surface-pressure strip) */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card .wd-atmos-canvas-wrap {
    margin-bottom: var(--wd-space-md, 14px);
}

/* Key Factors + Atmospheric Profile: equal height (a JS script locks both to the
   tallest state) so Key Factors stops jumping as driver pills populate with the slider */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-key-factors-card,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card {
    align-self: stretch;
}

/* Key Factors verdict list: one fixed line per factor (tick / cross / neutral),
   always the same rows so the card never changes height as the slider scrubs */
.wd-inv-verdict-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--wd-space-sm, 8px);
    padding-top: var(--wd-space-sm, 8px);
    border-top: 1px solid var(--wd-border, rgba(0,0,0,0.07));
}

.wd-inv-verdict {
    display: grid;
    grid-template-columns: 1.2em minmax(0, 1fr);
    align-items: center;
    gap: var(--wd-space-xs, 4px);
    padding: 3px 0;
    font-size: var(--wd-card-label-font-size, 0.68rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--wd-text-mid, #5a5850);
}

.wd-inv-verdict-mark {
    text-align: center;
    font-weight: 700;
}

/* Never wrap: a second line would change the card height */
.wd-inv-verdict-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-inv-verdict--pos   { color: var(--inv-chip-pos-text, #155724); }
.wd-inv-verdict--neg   { color: var(--inv-chip-neg-text, #8b2020); }
.wd-inv-verdict--mid   { color: var(--wd-text-mid, #5a5850); }
.wd-inv-verdict--stale { color: var(--wd-text-light, #908a7e); font-weight: 500; }
/* Monthly Inversion Chance — title pinned at top; the rest centres in the space below */
.wd-inv-freq-lower {
    display: flex;
    flex-direction: column;
}
.wd-inv-freq-lower .wd-freq-illustrative--chance {
    margin-top: auto;
}
.wd-inv-freq-lower .wd-freq-note {
    margin-bottom: auto;
}

/* Heatmap + Atmospheric Profile side by side — profile gets more width, both stretch to same height */
.wd-inv-maps-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
    gap: 14px;
    align-items: stretch;
    flex: 1;
    min-height: 440px;
}

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

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

.wd-inv-maps-row > .wd-inv-heatmap-card .wd-inv-heatmap-map {
    flex: 1;
    min-height: 280px;
}

.wd-inv-maps-row > .wd-skewt-card .wd-atmos-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}

/* 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 the qualitative Outlook labels. Legacy t20/t25
   classes also resolve to Unlikely so cached markup cannot show a fifth tier. */
.wd-inv-t80 .wd-inv-strip-likelihood { color: var(--inv-excellent); }
.wd-inv-t65 .wd-inv-strip-likelihood,
.wd-inv-t60 .wd-inv-strip-likelihood { color: var(--inv-good); }
.wd-inv-t45 .wd-inv-strip-likelihood,
.wd-inv-t40 .wd-inv-strip-likelihood { color: var(--inv-moderate); }
.wd-inv-t25 .wd-inv-strip-likelihood,
.wd-inv-t20 .wd-inv-strip-likelihood,
.wd-inv-t0 .wd-inv-strip-likelihood { color: var(--inv-verylow); }
.wd-inv-t-empty .wd-inv-strip-likelihood { color: var(--wd-text-light, #908a7e); }

/* Same tier map for the mobile hero (tier class mirrored from the strip card). */
.wd-inv-t80 .wd-inv-hero-likelihood { color: var(--inv-excellent); }
.wd-inv-t65 .wd-inv-hero-likelihood,
.wd-inv-t60 .wd-inv-hero-likelihood { color: var(--inv-good); }
.wd-inv-t45 .wd-inv-hero-likelihood,
.wd-inv-t40 .wd-inv-hero-likelihood { color: var(--inv-moderate); }
.wd-inv-t25 .wd-inv-hero-likelihood,
.wd-inv-t20 .wd-inv-hero-likelihood,
.wd-inv-t0 .wd-inv-hero-likelihood { color: var(--inv-verylow); }
.wd-inv-t-empty .wd-inv-hero-likelihood { color: var(--wd-text-light, #908a7e); }


/* WeatherDuck Cloud Inversion CSS, part 04 of 8: layout B sidebar split, tall rail, merged heatmap command card, rings, CTA, factor rows, chips, profile key, rarity badge, bottom grid, responsive.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   LAYOUT B — SPLIT: SIDEBAR (300px) + MAIN (1fr)
   ============================================================ */

.wd-inv-split {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.wd-inv-sidebar {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr) minmax(300px, 1fr);
    gap: 14px;
    align-items: stretch;
    order: 2;
    min-height: 0;
}

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

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

.wd-inv-sidebar > .wd-card {
    min-width: 0;
}

.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-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

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

.wd-inv-lower-grid--single .wd-inv-lower-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.wd-inv-lower-grid--single .wd-inv-lower-left > .wd-card {
    height: 100%;
}

.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;
}

/* Humidity/Temp charts were promoted directly under the rail; trim the gap a
   touch so it reads as one rhythm step rather than rail-margin + card-gap. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail + .wd-inv-atmos-charts-full {
    margin-top: 0;
}

/* Full-width answer-first guide below the live inversion tools. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide {
    /* The tab's own row gap spaces this card, same as every row above it. */
    margin-top: 0;
    scroll-margin-top: var(--wd-space-xl);
}

/* Two columns: the explainer keeps a readable measure on the left, the Q&A
   accordion fills the right so the card is not two thirds empty. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--wd-space-xl) var(--wd-space-2xl);
    align-items: start;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__copy {
    display: grid;
    gap: var(--wd-space-md);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__copy h3 {
    margin: 0;
    font-size: var(--wd-font-size-xl);
    line-height: 1.25;
    color: var(--wd-text-primary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__copy > p {
    margin: 0;
    color: var(--wd-text-secondary);
}

/* Q&A panel. Answers stay in the HTML when collapsed, so crawlers and answer
   engines read all four whether or not a visitor opens them. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__faq {
    padding: var(--wd-space-lg);
    background: var(--wd-bg-subtle);
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius-md);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__faq-title {
    margin: 0 0 var(--wd-space-sm);
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--wd-text-muted);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__item {
    border-top: 1px solid var(--wd-border);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__item:first-of-type {
    border-top: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__summary {
    display: flex;
    gap: var(--wd-space-sm);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--wd-space-sm) 0;
    list-style: none;
    cursor: pointer;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__summary::-webkit-details-marker {
    display: none;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__summary::after {
    content: '\25B8';
    color: var(--wd-green);
    transition: transform 0.18s ease;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__item[open] .wd-inv-guide__summary::after {
    transform: rotate(90deg);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__q {
    margin: 0;
    font-size: var(--wd-font-size-md);
    font-weight: 800;
    line-height: 1.4;
    color: var(--wd-text-primary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__a {
    margin: 0;
    padding-bottom: var(--wd-space-sm);
    font-size: var(--wd-font-size-sm);
    line-height: 1.55;
    color: var(--wd-text-secondary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__answer strong {
    color: var(--wd-text-primary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__sections {
    display: grid;
    gap: var(--wd-space-xl);
    max-width: none;
    margin-top: var(--wd-space-sm);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__section {
    padding-top: var(--wd-space-lg);
    border-top: 1px solid var(--wd-border);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__section h4 {
    margin: 0 0 var(--wd-space-sm);
    font-size: var(--wd-font-size-md);
    font-weight: 800;
    line-height: 1.4;
    color: var(--wd-text-primary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__section p {
    margin: 0;
    color: var(--wd-text-secondary);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__section p + p {
    margin-top: var(--wd-space-sm);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__link {
    font-weight: 800;
    color: var(--wd-green);
    text-underline-offset: var(--wd-space-xs);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__link {
    width: fit-content;
}

/* Panel drops below the copy before the columns get too tight to read. */
@media (max-width: 1024px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-guide__copy h3 {
        font-size: var(--wd-font-size-lg);
    }
}

/* Keep Cloud Inversion cards on one visual spacing rhythm. The tab panel's
   own row gap (rail, chart pair, lower grid, guide) follows the same token as
   the gaps inside those groups: 16px desktop, 12px tablet, 8px phone. */
body.page-template-page-forecast-unified #tab-inversion.wd-tab-panel--active {
    gap: var(--wd-inv-card-gap);
}

body.page-template-page-forecast-unified #tab-inversion {
    --wd-inv-card-gap: var(--wd-space-lg);
    --wd-inv-insight-card-height: calc((var(--wd-space-3xl, 40px) * 8) + var(--wd-space-xl, 20px));
    /* Observed (near-analysis) accent — brighter blue-slate, paired with --wd-green. */
    --wd-inv-observed-accent: #5b86c5;
    /* History-forecast accent — what we forecast for now-elapsed hours (Forecast mode). */
    --wd-inv-forecast-past-accent: #e08a3c;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-wrap,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-split,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-lower-grid,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full {
    margin-top: 0;
    margin-bottom: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-split,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-sidebar,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-main,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-maps-row,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-lower-grid,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-lower-left,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-lower-right,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full {
    gap: var(--wd-inv-card-gap);
}

body.page-template-page-forecast-unified #tab-inversion .wd-skewt-card {
    border-radius: 0 !important;
}


/* ============================================================
   TALL-RAIL LAYOUT
   Outlook + slider + heatmap fill the wide left columns; the alert preview
   fills the top-right cell; Top Regions starts level with the slider and
   continues beside the heatmap. Key Factors + Atmospheric Profile share the
   row beneath. The legacy .wd-inv-split / -sidebar /
   -main / -maps-row wrappers are flattened with display:contents so their
   cards become direct grid items of .wd-inv-rail (DOM order unchanged).
   ============================================================ */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail {
    display: grid;
    grid-template-columns:
        minmax(320px, 384px)
        minmax(0, 1fr)
        calc(var(--wd-space-3xl) * 7);
    grid-template-areas:
        "outlook outlook alerts"
        "heatmap heatmap heatmap"
        "kf      profile profile";
    /* The heatmap card is the merged command card: map full-bleed, timeline
       docked beneath it, key beneath that, Active Areas rail on its right.
       The old separate slider + Top Regions rail rows are gone. */
    gap: var(--wd-inv-card-gap, 14px);
    align-items: start;
    margin-bottom: 0;
}

/* Flatten the legacy layout wrappers — their cards bubble up to the rail grid */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-split,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-sidebar,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-main,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-maps-row {
    display: contents;
}

/* Card → grid-area placement (by existing class names) */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap {
    grid-area: outlook;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card     { grid-area: heatmap; }
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-alert-stack      { grid-area: alerts; }
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-key-factors-card { grid-area: kf; }
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card           { grid-area: profile; }

/* The rail wrapper is structural only; its children become grid items. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-rail-col {
    display: contents;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-alert-stack {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--wd-space-sm, 8px);
    min-width: 0;
    min-height: 0;
}

/* Match the Outlook card to the alert stack in their shared desktop grid row.
   The strip itself grows too, so the added height becomes useful breathing
   room inside each period instead of an empty band below the cells. */
@media (min-width: 769px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap .wd-inv-night-strip--inline {
        flex: 1 1 auto;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap .wd-inv-strip-night,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap .wd-inv-outlook-access-cell {
        height: auto;
        min-height: calc((var(--wd-space-3xl) * 4) + var(--wd-space-lg));
    }
}

/* The 72h outlook can hold six periods. Auto-flow columns make wrapping
   structurally impossible — cells squeeze to share the row instead. Scoped to
   the 3-column rail (901px+); the 769–900px band keeps the generic 3-across
   grid of full cards from the max-width:900px rule. */
@media (min-width: 901px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap .wd-inv-night-strip--inline {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    /* Squeezed cells: ease the likelihood word down towards --wd-font-size-md
       as the rail narrows instead of clipping at a hard breakpoint. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-outlook-wrap .wd-inv-strip-likelihood {
        font-size: clamp(var(--wd-font-size-md), 1.5vw, var(--wd-font-size-lg));
    }
}

/* No-JS / pre-dock fallback: until the placement script moves the shared slider
   into the heatmap card it is a bare grid item — let it span the full row. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail > .wd-inv-shared-slider,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-main > .wd-inv-shared-slider {
    grid-column: 1 / -1;
}

/* ============================================================
   MERGED HEATMAP COMMAND CARD (28 Jul 2026)
   One card: title strip, then a two-column body — the map filling the whole
   left column edge-to-edge with the timeline docked directly beneath it and
   the key beneath that; the Active Areas rail down the right, its rows split
   by hairline dividers rather than boxes.
   ============================================================ */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card {
    padding: 0;
    overflow: hidden;
}
/* The green title strip normally bleeds out of the card padding with negative
   margins — this card has no padding, so zero them or the strip clips. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card > .wd-section-title {
    margin: 0 !important;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--wd-space-3xl) * 6), calc(var(--wd-space-3xl) * 7));
    min-height: 0;
    border-top: 1px solid var(--wd-border);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-main .wd-inv-heatmap-map {
    border-radius: 0;
    min-height: calc(var(--wd-space-3xl) * 10);
}
/* The docked timeline is a strip of the card, not a floating card of its own */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-main .wd-inv-shared-slider {
    border: 0;
    border-top: 1px solid var(--wd-border);
    border-radius: 0;
    background: var(--wd-bg-card, #fff);
    padding: var(--wd-space-sm) var(--wd-card-padding, 16px);
}
/* Card footer beneath the timeline: key and Areas/Points pill split by a
   vertical hairline. Update timing now lives in the title strip. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-main .wd-inv-heatmap-legend-wrap {
    margin-top: 0;
    padding: 0;
    border-top: 1px solid var(--wd-border);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: stretch;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer > * {
    display: flex;
    align-items: center;
    padding: var(--wd-space-sm) var(--wd-space-md);
    min-height: calc(var(--wd-space-3xl) - var(--wd-space-xs));
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer > * + * {
    border-left: 1px solid var(--wd-border);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key {
    justify-content: center;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key .wd-inv-heatmap-legend--scores,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key .wd-inv-heatmap-legend--areas {
    color: var(--wd-text-secondary);
    font-family: var(--wd-card-font) !important;
    font-size: var(--wd-card-meta-font-size) !important;
    font-weight: var(--wd-card-meta-font-weight) !important;
    line-height: var(--wd-card-meta-line-height) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key .wd-inv-heatmap-legend--areas {
    flex-wrap: nowrap;
    gap: var(--wd-space-sm);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key .wd-inv-heatmap-legend--areas .wd-inv-heatmap-legend-item {
    white-space: nowrap;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-toggle {
    justify-content: flex-end;
    padding-inline: var(--wd-space-sm);
}

/* Areas/Points pill: same grammar as Past Forecast/Observed, its own colours —
   green = Areas (map display), charcoal = Points. Never orange/blue, so the two
   switches can't be mistaken for one another. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill {
    margin-left: 0;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill .wd-inv-mode-switch-vis {
    background: var(--wd-green, #2f9955);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill .wd-inv-mode-switch-input:checked ~ .wd-inv-mode-switch-vis {
    background: var(--wd-text-mid, #5a5850);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill:has(.wd-inv-mode-switch-input:not(:checked)) .wd-inv-mode-switch-end--areas {
    color: var(--wd-green, #2f9955);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill:has(.wd-inv-mode-switch-input:checked) .wd-inv-mode-switch-end--points {
    color: var(--wd-text, #1a1a18);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-pill .wd-inv-mode-switch-input:focus-visible ~ .wd-inv-mode-switch-vis {
    outline: 2px solid var(--wd-green, #2f9955);
    outline-offset: 2px;
}

/* Active Areas rail — right-hand column of the card */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail {
    border-left: 1px solid var(--wd-border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--wd-space-lg);
    gap: 0;
    background: var(--wd-bg-card, #fff);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wd-space-sm);
    min-height: var(--wd-card-header-height);
    height: var(--wd-card-header-height);
    margin: calc(-1 * var(--wd-space-lg)) calc(-1 * var(--wd-space-lg)) var(--wd-space-md) !important;
    padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x);
    border-bottom: 1px solid var(--wd-border);
    background: transparent;
    box-sizing: border-box;
    text-align: center;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-row.wd-inv-areacard {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main tier"
        "main action";
    gap: var(--wd-space-sm) var(--wd-space-md);
    align-items: start;
    width: 100%;
    border-bottom: thin solid var(--wd-table-border);
    box-sizing: border-box;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-row.wd-inv-areacard:last-child {
    border-bottom: 0;
}
/* The list absolutely fills a flex-grown wrapper, so a long list scrolls to the
   map's height instead of inflating the card. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-scroll {
    position: relative;
    flex: 1 1 0;
    min-height: calc(var(--wd-space-3xl) * 5);
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-scroll .wd-inv-insight-list {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    gap: 0;
    padding-right: 6px;
}

/* Heatmap is now alone in the left stack — fill the freed width + a sensible height */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card .wd-inv-heatmap-map {
    flex: 1;
    min-height: 320px;
}

/* Atmospheric Profile in the bottom row keeps its flex-column behaviour */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
}
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card .wd-atmos-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Inversion tab: let the Skew-T fill the full profile card width
   (overrides the standalone Skew-T's 650px cap + auto-centring from skewt.css) */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card .wd-skewt-wrap {
    max-width: none;
    margin: 0;
}

/* Stack everything into one column on small screens (reuse the module's 900px breakpoint) */
@media (max-width: 900px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "outlook"
            "heatmap"
            "alerts"
            "kf"
            "profile";
    }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-alert-stack {
        align-self: auto;
    }
    /* Card body stacks: map + timeline + key, then the Active Areas rail below */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-body {
        grid-template-columns: 1fr;
    }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail {
        border-left: 0;
        border-top: 1px solid var(--wd-border);
    }
    /* Footer cells stack: key, then the pill; the hairline rotates. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer {
        grid-template-columns: 1fr;
    }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer > * + * {
        border-left: 0;
        border-top: 1px solid var(--wd-border);
    }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-toggle {
        justify-content: center;
    }
    /* Back to normal flow when stacked — the rail isn't height-constrained here */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-scroll {
        position: static;
        flex: none;
        min-height: 0;
    }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-scroll .wd-inv-insight-list {
        position: static;
        inset: auto;
        overflow-y: visible;
        padding-right: 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;
}

/* Sits compactly after the slider time label, matching its type but bolder;
   the range input takes the leftover space, so no dead gaps around this. */
.wd-inv-user-readout {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    font-size: var(--wd-font-size-sm, 0.82rem);
    white-space: nowrap;
}

.wd-inv-user-readout-loc {
    font-weight: 800;
    color: var(--wd-text-dark, #2a2925);
}

.wd-inv-user-readout-score {
    font-weight: 800;
}

.wd-inv-sc-seatype {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--wd-green, #2c7a4b);
    background: var(--wd-green-bg, rgba(44, 122, 75, 0.08));
    border: 1px solid var(--wd-green-border, rgba(44, 122, 75, 0.25));
    border-radius: var(--wd-radius-sm, 4px);
    padding: 2px 7px;
    margin-top: 4px;
    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-key-factors-card .wd-inv-factor-row {
    padding: 3px 0;
}

.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 {
    width: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Key Factors: three-step bars from the row's state, never a number */
.wd-inv-factor-row[data-state="neg"] .wd-inv-ff { width: 25%; background: var(--inv-verylow); }
.wd-inv-factor-row[data-state="mid"] .wd-inv-ff { width: 50%; background: var(--inv-moderate); }
.wd-inv-factor-row[data-state="pos"] .wd-inv-ff { width: 100%; background: var(--inv-good); }

.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-surface-pressure {
    margin-top: 10px;
    padding: 7px 10px 6px;
    border: 1px solid var(--wd-border, rgba(0,0,0,0.08));
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.015);
}

.wd-inv-surface-pressure__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.wd-inv-surface-pressure__title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wd-text-light, #908a7e);
}

.wd-inv-surface-pressure__current {
    font-family: var(--wd-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--wd-text-mid, #5a5850);
    text-align: right;
}

.wd-inv-surface-pressure__track {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 30px;
    flex: 0 0 30px;
    padding: 2px 0 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: content-box;
    overflow: hidden;
}

.wd-inv-surface-pressure__seg {
    flex: 1 1 0;
    min-width: 1px;
    max-height: 26px;
    border-radius: 2px 2px 0 0;
    background: var(--wd-pressure-seg-color, #78aeca);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
    opacity: 0.9;
    transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wd-inv-surface-pressure__seg--active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 0 0 1px rgba(22,77,114,0.28);
    filter: saturate(1.15) brightness(0.95);
    opacity: 1;
}

.wd-inv-surface-pressure__marker {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: #164d72;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
    transform: translateX(-1px);
    pointer-events: none;
}

.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-key-factors-card,
.wd-inv-hourly-leaders-card,
.wd-inv-range-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wd-inv-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wd-inv-insight-time {
    font-family: var(--wd-mono, monospace);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--wd-text-light, #908a7e);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.wd-inv-insight-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 88, 80, 0.38) transparent;
}

.wd-inv-insight-list::-webkit-scrollbar {
    width: 7px;
}

.wd-inv-insight-list::-webkit-scrollbar-track {
    background: transparent;
}

.wd-inv-insight-list::-webkit-scrollbar-thumb {
    background: rgba(90, 88, 80, 0.32);
    border-radius: 999px;
}

.wd-inv-hourly-leaders-card,
.wd-inv-range-card {
    height: var(--wd-inv-key-factors-height, var(--wd-inv-insight-card-height));
    max-height: var(--wd-inv-key-factors-height, var(--wd-inv-insight-card-height));
    overflow: hidden;
}

.wd-inv-insight-empty {
    display: flex;
    align-items: center;
    min-height: 92px;
    color: var(--wd-text-light, #908a7e);
    font-size: 0.76rem;
}

.wd-inv-anchor-leader-row,
.wd-inv-range-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.045);
}

.wd-inv-anchor-leader-row:last-child,
.wd-inv-range-row:last-child {
    border-bottom: 0;
}

.wd-inv-rank {
    width: 28px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    color: var(--wd-text-mid, #5a5850);
    font-size: 0.62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wd-inv-rank--medal {
    width: 32px;
    color: #1f211d;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: none;
    text-shadow: none;
}

.wd-inv-rank--gold {
    background: #f3c542;
}

.wd-inv-rank--silver {
    background: #c7d0d8;
}

.wd-inv-rank--bronze {
    background: #c98245;
}

.wd-inv-anchor-leader-main,
.wd-inv-range-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wd-inv-anchor-leader-name,
.wd-inv-range-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wd-text, #1a1a18);
    font-size: 0.76rem;
    font-weight: 700;
}

.wd-inv-anchor-leader-area,
.wd-inv-range-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wd-text-light, #908a7e);
    font-size: 0.64rem;
    font-weight: 600;
}

.wd-inv-anchor-leader-score,
.wd-inv-range-score {
    font-family: var(--wd-mono, monospace);
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
    padding: 7px 4px;
    background: rgba(0,0,0,0.045);
    border-radius: var(--wd-radius-sm, 6px);
}

.wd-inv-range-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    overflow: hidden;
    margin-top: 2px;
}

.wd-inv-range-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}


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

@media (max-width: 1180px) {
    .wd-inv-sidebar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .wd-inv-range-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .wd-inv-split {
        gap: 14px;
    }
    .wd-inv-sidebar {
        grid-template-columns: 1fr;
    }
    .wd-inv-hourly-leaders-card,
    .wd-inv-range-card {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .wd-inv-insight-list {
        overflow: visible;
        padding-right: 0;
    }
    .wd-inv-sidebar > .wd-card {
        flex: unset;
    }
    .wd-inv-lower-grid,
    .wd-inv-atmos-charts-full {
        grid-template-columns: 1fr;
    }
    .wd-inv-lower-grid--single .wd-inv-lower-left {
        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;
        min-height: 0;
    }
    .wd-inv-bottom-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@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; }
}


/* WeatherDuck Cloud Inversion CSS, part 05 of 8: heatmap full width, anchor coverage map, atmospheric data row and toggle, key factors button, split rows, compact data sources, how to read.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   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: #dfe9e2;
}

.wd-inv-anchor-map .leaflet-container,
.wd-inv-anchor-map.leaflet-container {
    background: #dfe9e2;
    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, profile 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));
    }
}

/* WeatherDuck Cloud Inversion CSS, part 06 of 8: shared hourly slider, cloud layer and summits hourly.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   SHARED HOURLY SLIDER
   ============================================================ */

.wd-inv-shared-slider {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    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;
    min-width: 0;
}

/* Row 1: live readout (time + location + score) + slider name. Isolated from the
   track so its changing width never shifts the slider thumb. */
.wd-inv-slider-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wd-inv-slider-info-row .wd-inv-slider-label {
    flex: 0 0 92px;
    min-width: 92px;
    text-align: left;
}

.wd-inv-slider-info-row .wd-inv-slider-hint {
    margin-left: auto;
}

/* Region names can be long — let the name truncate with an ellipsis while the
   score (and Timeline label) stay fully visible. */
.wd-inv-slider-info-row .wd-inv-user-readout {
    flex: 0 1 auto;
    min-width: 0;
}

.wd-inv-slider-info-row .wd-inv-user-readout-loc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.wd-inv-slider-info-row .wd-inv-user-readout-score {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Row 2: controls + track + Best. Only the track flexes; everything else is a
   fixed width, so nothing reflows as the score on row 1 changes length. */
.wd-inv-slider-control-row {
    display: flex;
    align-items: center;
    gap: var(--wd-space-md, 12px);
    min-width: 0;
}

.wd-inv-slider-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 108px;
    font-size: var(--wd-font-size-sm, 0.82rem);
    font-weight: 600;
    color: var(--wd-text-mid, #666);
    white-space: nowrap;
    min-width: 108px;
    text-align: center;
}

.wd-inv-slider-track-wrap {
    flex: 1;
    min-width: 120px;
    position: relative;
    padding-bottom: calc(var(--wd-space-xl) + var(--wd-space-xs));
}

.wd-inv-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    border-radius: 3px;
    /* Three-zone track (seams set by JS): observed/blue from 0 to --wd-inv-obs,
       past-forecast/orange from --wd-inv-obs to --wd-inv-now, future/green
       after. In Forecast mode --wd-inv-obs is 0 so the whole past reads orange. */
    background: linear-gradient(to right,
        var(--wd-inv-observed-accent, #5b86c5) 0%,
        var(--wd-inv-observed-accent, #5b86c5) var(--wd-inv-obs, 0%),
        var(--wd-inv-forecast-past-accent, #e08a3c) var(--wd-inv-obs, 0%),
        var(--wd-inv-forecast-past-accent, #e08a3c) var(--wd-inv-now, 50%),
        var(--wd-green, #5cd88a) var(--wd-inv-now, 50%),
        var(--wd-green, #5cd88a) 100%);
}

.wd-inv-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.wd-inv-slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.wd-inv-slider::-moz-range-progress {
    background: transparent;
}

/* Hourglass / playhead thumb — white infill + dark border (matching the old
   circular handle) so it's clearly visible, pinched at the waist so the narrow
   point marks the exact hour. Drawn as an inline SVG so the border follows the
   hourglass outline; taller than the 6px track so it stands proud of the zones. */
.wd-inv-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 16px;
    margin-top: -5px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2016'%3E%3Cpolygon%20points='1,1%2011,1%206,8%2011,15%201,15%206,8'%20fill='%23fff'%20stroke='%232b2b2b'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    box-shadow: none;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
    cursor: pointer;
}

.wd-inv-slider::-moz-range-thumb {
    width: 12px;
    height: 16px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2016'%3E%3Cpolygon%20points='1,1%2011,1%206,8%2011,15%201,15%206,8'%20fill='%23fff'%20stroke='%232b2b2b'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    box-shadow: none;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
    cursor: pointer;
}

.wd-inv-slider-ruler {
    position: absolute;
    top: var(--wd-space-sm);
    right: var(--wd-space-sm);
    bottom: 0;
    left: var(--wd-space-sm);
    pointer-events: none;
}

.wd-inv-slider-tick {
    position: absolute;
    top: 0;
    left: var(--wd-inv-tick-position);
    width: 1px;
    height: var(--wd-space-xs);
    background: var(--wd-border-strong);
    transform: translateX(-50%);
}

.wd-inv-slider-tick--major {
    height: var(--wd-space-sm);
}

.wd-inv-slider-tick--boundary {
    width: 2px;
    height: var(--wd-space-sm);
    background: var(--wd-green);
}

.wd-inv-slider-tick-label {
    position: absolute;
    top: var(--wd-space-md);
    left: 50%;
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

.wd-inv-slider-tick--first .wd-inv-slider-tick-label {
    left: 0;
    transform: none;
}

.wd-inv-slider-tick--last .wd-inv-slider-tick-label {
    right: 0;
    left: auto;
    transform: none;
}

.wd-inv-slider-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.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;
    -webkit-tap-highlight-color: transparent;
}

.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-play::before {
    display: none;
    content: none;
}

.wd-inv-slider-play {
    width: 74px;
    min-width: 74px;
    padding: 0 10px;
    gap: 6px;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

.wd-inv-slider-play--active::before {
    display: none;
    content: none;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-nav-btn,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-nav-btn:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-nav-btn:active {
    background: rgba(0,0,0,0.07) !important;
    border-color: var(--wd-border, rgba(0,0,0,0.12)) !important;
    color: var(--wd-text-mid, #5a5850) !important;
    box-shadow: none !important;
    outline: none !important;
}

.wd-inv-slider-nav-btn:hover:not(:disabled),
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-nav-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.13);
    border-color: rgba(0,0,0,0.2);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play:active {
    width: 74px !important;
    min-width: 74px !important;
    background: rgba(0,0,0,0.07) !important;
    color: var(--wd-text-mid, #5a5850) !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play--active,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play--active:hover,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play--active:focus,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play--active:active {
    background: var(--wd-green, #425A47) !important;
    border-color: var(--wd-green, #425A47) !important;
    color: #fff !important;
}

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

@media (max-width: 700px) {
    .wd-inv-slider-hint {
        display: none;
    }

    .wd-inv-slider-tick-label--midday {
        display: none;
    }
}


/* ============================================================
   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);
}

/* Track zone colours are sized by seams, not swapped: the blue (observed) zone
   is bounded by --wd-inv-obs, which JS collapses to 0 in Forecast mode so the
   past reads all-orange. Accent tokens live on #tab-inversion; future is green. */

/* Forecast / Observed switch on the heatmap slider. The track is always split —
   blue-slate (observed) up to "now", green (forecast) after — and this switch
   flips what the PAST half shows: what actually happened vs what we forecast. */
.wd-inv-mode-switch {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    flex: 0 0 auto;
}

.wd-inv-mode-switch-end {
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: 600;
    color: var(--wd-text-muted, #999);
    transition: color 0.15s;
    white-space: nowrap;
}

.wd-inv-mode-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wd-inv-mode-switch-vis {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: var(--wd-inv-forecast-past-accent, #e08a3c);
    transition: background 0.18s;
    flex: 0 0 auto;
}

.wd-inv-mode-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.18s;
}

/* Checked = Observed: track blue-slate, knob right. */
.wd-inv-mode-switch-input:checked ~ .wd-inv-mode-switch-vis {
    background: var(--wd-inv-observed-accent, #5b86c5);
}

.wd-inv-mode-switch-input:checked ~ .wd-inv-mode-switch-vis .wd-inv-mode-switch-knob {
    transform: translateX(16px);
}

/* Emphasise the active end label (Chromium :has — Edge/Chrome targets). */
.wd-inv-mode-switch:has(.wd-inv-mode-switch-input:not(:checked)) .wd-inv-mode-switch-end--fcst {
    color: var(--wd-inv-forecast-past-accent, #e08a3c);
}

.wd-inv-mode-switch:has(.wd-inv-mode-switch-input:checked) .wd-inv-mode-switch-end--obs {
    color: var(--wd-inv-observed-accent, #5b86c5);
}

.wd-inv-mode-switch-input:focus-visible ~ .wd-inv-mode-switch-vis {
    outline: 2px solid var(--wd-inv-observed-accent, #5b86c5);
    outline-offset: 2px;
}

/* "Capturing latest…" loading pulse shown next to the heatmap status while a
   capture run is in progress (until all anchors are collected). */
.wd-inv-loading-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--wd-inv-observed-accent, #5b7a99);
    vertical-align: middle;
    animation: wd-inv-loading-pulse 1s ease-in-out infinite;
}

@keyframes wd-inv-loading-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

.wd-inv-alerts-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 14px;
    font-size: var(--wd-font-size-xs, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--wd-green, #425A47);
    border-radius: var(--wd-radius-sm, 6px);
    background: var(--wd-green, #425A47);
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.wd-inv-alerts-btn:hover {
    background: #304436;
    border-color: #304436;
}

/* Sample-email "paper": clean white bordered panel with green accents tying it to the button. */
.wd-inv-alert-email {
    display: flex;
    flex-direction: column;
    /* Gaps shaved to 7px (−1px × 4 = −4px) so the card keeps symmetric 8px outer
       padding (header top = footer bottom) AND its 165px height that aligns to the
       Outlook card. Trade-off: divider lines land ~1px off perfect-centre — imperceptible. */
    gap: calc(var(--wd-space-sm) - 1px);
    min-width: 0;
    padding: var(--wd-space-sm) var(--wd-space-md);
    border: 1px solid var(--wd-border-light);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-card, #fff);
}

/* On desktop, grow the panel to the bottom of the 5 Day Outlook card. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-alert-stack .wd-inv-alert-email {
    flex: 1 1 auto;
}

.wd-inv-alert-email__bar {
    display: flex;
    align-items: center;
    gap: var(--wd-space-xs);
    padding-bottom: var(--wd-space-sm);
    border-bottom: 1px solid var(--wd-border-light);
    color: var(--wd-text-secondary);
    font-size: var(--wd-card-label-font-size);
    font-weight: 800;
    letter-spacing: var(--wd-card-label-letter-spacing);
    text-transform: uppercase;
}

.wd-inv-alert-email__icon {
    color: var(--wd-green);
    font-size: 0.95rem;
    line-height: 1;
}

.wd-inv-alert-email__subject {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wd-space-sm);
    min-width: 0;
}

.wd-inv-alert-email__area {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wd-text-primary);
    font-size: var(--wd-font-size-sm);
    font-weight: 700;
}

.wd-inv-alert-email__score {
    flex: 0 0 auto;
    /* Band word, so it must wear the band's colour — the sample says
       "Very likely", which is the blue tier everywhere else on the page. */
    color: var(--inv-excellent);
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    line-height: 1;
}

.wd-inv-alert-email__body {
    margin: 0;
    color: var(--wd-text-secondary);
    font-size: var(--wd-card-meta-font-size);
    line-height: var(--wd-card-meta-line-height);
}

.wd-inv-alert-email__cta {
    color: var(--wd-green);
    font-size: var(--wd-card-meta-font-size);
    font-weight: 700;
}

/* Scoped to outrank the theme's `.wd-page p` reset (which zeroes p padding/margin
   with higher specificity). Equal 8px above (flex gap) and below (padding-top) the
   divider, mirroring the header divider so both lines in the card match. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-email__note {
    margin: 0;
    padding-top: var(--wd-space-sm);
    border-top: 1px solid var(--wd-border-light);
    color: var(--wd-text-muted);
    font-size: var(--wd-card-label-font-size);
    font-weight: 600;
    line-height: var(--wd-card-meta-line-height);
}

.wd-inv-alert-email__note strong {
    color: var(--wd-text-secondary);
    font-weight: 700;
}

/* One-tap social signup row under the alerts CTA (renders logged-out only).
   Sits in the alert stack, so it inherits the stack's own gap for spacing.
   Side by side at every size, matching the CTA's height per breakpoint:
   30px on desktop, tap height on mobile (media query below).
   !important mirrors the landing-hero overrides: Nextend ships its own rules
   and inline styles for these buttons. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social {
    min-width: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container-buttons {
    width: 100% !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--wd-space-sm) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container-buttons > a,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container-buttons > div {
    width: 100% !important;
    margin: 0 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--wd-space-xs);
    width: 100% !important;
    max-width: none !important;
    /* 30px matches .wd-inv-alerts-btn above, which hardcodes the same value. */
    min-height: 30px !important;
    border-radius: var(--wd-radius-sm) !important;
    box-shadow: none !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button-svg-container {
    padding: 0 !important;
    margin: 0 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-container svg {
    width: 16px !important;
    height: 16px !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button-label-container {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: var(--wd-space-xs) 0 !important;
    font-family: var(--wd-font) !important;
    font-size: var(--wd-font-size-md) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button-google {
    border: 1px solid var(--wd-border-strong) !important;
    background: var(--wd-bg-card) !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button-google .nsl-button-label-container {
    color: var(--wd-text-primary) !important;
}

/* Labels arrive pre-split into full/short spans (wd_membership_social_split_labels);
   this box shows the provider name only, at every width. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .wd-signup-label-full {
    display: none;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .wd-signup-label-short {
    display: inline;
}

/* Unify every piece of slider text to one type style (size/weight/case/spacing).
   Font family is already Montserrat from the tab-wide rule. Colours are left as-is:
   the score keeps its tier colour. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider :where(
    .wd-inv-slider-label,
    .wd-inv-user-readout,
    .wd-inv-user-readout-loc,
    .wd-inv-user-readout-score,
    .wd-inv-slider-play-text,
    .wd-inv-slider-hint
) {
    font-size: var(--wd-card-label-font-size, 0.68rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--wd-card-label-letter-spacing, 0.06em) !important;
    text-transform: uppercase !important;
}

@media (max-width: 1100px) {
    .wd-inv-slider-hint {
        display: none;
    }
}

/* 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);
    }
}

/* WeatherDuck Cloud Inversion CSS, part 07 of 8: unified forecast-card typography override.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   Unified forecast-card typography override
   ============================================================ */
body.page-template-page-forecast-unified {
    --wd-card-font: 'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
    --wd-card-num-font: var(--wd-card-font);
    --wd-card-header-font-size: var(--wd-font-size-sm, 0.82rem);
    --wd-card-header-font-weight: 800;
    --wd-card-header-letter-spacing: 0.8px;
    --wd-card-header-height: 38px;
    --wd-card-header-pad-x: var(--wd-space-lg, 16px);
    --wd-card-header-pad-y: 6px;
    --wd-card-meta-font-size: var(--wd-font-size-xs, 0.72rem);
    --wd-card-meta-font-weight: 600;
    --wd-card-meta-line-height: 1.35;
    --wd-card-label-font-size: 0.68rem;
    --wd-card-label-font-weight: 700;
    --wd-card-label-letter-spacing: 0.06em;
}

/* A compact role-based type scale for this data-heavy tab. Structural labels
   and supporting copy now share sizes intentionally instead of drifting through
   a run of near-identical one-off values. */
body.page-template-page-forecast-unified #tab-inversion {
    --wd-inv-body-font-size: var(--wd-font-size-sm);
    --wd-inv-meta-font-size: var(--wd-font-size-xs);
    --wd-inv-label-font-size: var(--wd-font-size-xs);
    --wd-inv-value-font-size: var(--wd-font-size-sm);
    --wd-inv-status-font-size: var(--wd-font-size-lg);
    --wd-inv-body-line-height: 1.55;
    --wd-inv-meta-line-height: 1.4;
    --wd-inv-label-tracking: 0.04em;
    --wd-inv-title-tracking: 0.06em;
    --wd-inv-card-radius: var(--wd-radius-md);
    --wd-card-header-letter-spacing: var(--wd-inv-title-tracking);
    --wd-card-label-font-size: var(--wd-inv-label-font-size);
    --wd-card-label-letter-spacing: var(--wd-inv-label-tracking);
    --wd-card-meta-line-height: var(--wd-inv-meta-line-height);
}

body.page-template-page-forecast-unified #tab-inversion,
body.page-template-page-forecast-unified #tab-inversion *,
body.page-template-page-forecast-unified .wd-inv-outlook-wrap,
body.page-template-page-forecast-unified .wd-inv-outlook-wrap * {
    font-family: var(--wd-card-font) !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

/* Outer panels use one surface treatment. Nested controls and inset panels keep
   the smaller radius, so the hierarchy remains obvious without extra colour. */
body.page-template-page-forecast-unified #tab-inversion .wd-card,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-wrap {
    background: var(--wd-bg-card);
    border-color: var(--wd-border) !important;
    border-radius: var(--wd-inv-card-radius) !important;
    box-shadow: var(--wd-shadow-sm);
}

.wd-inv-heatmap-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--wd-space-lg);
    color: var(--wd-text-muted);
    font-size: var(--wd-inv-meta-font-size);
    font-weight: 600;
    line-height: var(--wd-inv-meta-line-height);
    text-align: center;
}

body.page-template-page-forecast-unified #tab-inversion .wd-card > .wd-section-title,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-header,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr {
    min-height: var(--wd-card-header-height) !important;
    height: var(--wd-card-header-height) !important;
    padding: var(--wd-card-header-pad-y) var(--wd-card-header-pad-x) !important;
    background: var(--wd-green-light) !important;
    border-bottom: 1px solid var(--wd-border) !important;
    border-radius:
        calc(var(--wd-inv-card-radius) - 1px)
        calc(var(--wd-inv-card-radius) - 1px)
        0
        0;
    color: var(--wd-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--wd-space-sm);
    box-sizing: border-box !important;
    font-size: var(--wd-card-header-font-size) !important;
    font-weight: var(--wd-card-header-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--wd-card-header-letter-spacing) !important;
    text-transform: uppercase !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-card > .wd-section-title,
body.page-template-page-forecast-unified #tab-inversion .wd-gh-header {
    margin: calc(-1 * var(--wd-space-lg, 16px)) calc(-1 * var(--wd-space-lg, 16px)) var(--wd-space-md, 12px) !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-section-title,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-title {
    color: var(--wd-text-primary) !important;
    font-size: var(--wd-card-header-font-size) !important;
    font-weight: var(--wd-card-header-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--wd-card-header-letter-spacing) !important;
    text-transform: uppercase !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-wrap > .wd-inv-night-strip--inline {
    border-radius:
        0
        0
        calc(var(--wd-inv-card-radius) - 1px)
        calc(var(--wd-inv-card-radius) - 1px);
}

/* Body copy: comfortable reading size, sentence case, and one line height. */
body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-guide-para,
    .wd-freq-note,
    .wd-sunrise-callout-text,
    .wd-skewt-unavailable,
    .wd-skewt-unavailable p
) {
    font-size: var(--wd-inv-body-font-size) !important;
    font-weight: 500 !important;
    line-height: var(--wd-inv-body-line-height) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
}

/* Supporting copy and controls: one compact sentence-case role. */
body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-heatmap-legend,
    .wd-inv-heatmap-meta,
    .wd-inv-heatmap-ts,
    .wd-inv-heatmap-countdown,
    .wd-inv-profile-note,
    .wd-inv-slider-hint,
    .wd-inv-insight-time,
    .wd-inv-insight-empty,
    .wd-inv-rarity-sub,
    .wd-freq-illustrative,
    .wd-inv-source-info__tip,
    .wd-inv-info-btn__tip,
    .wd-inv-factors-key dd,
    .wd-inv-profile-key,
    .wd-inv-pk,
    .wd-sunrise-callout-sub,
    .wd-inv-outlook-sub,
    .wd-inv-factors-time,
    .wd-inv-strip-window,
    .wd-inv-strip-ct,
    .wd-inv-strip-conf,
    .wd-inv-strip-stability,
    .wd-inv-anchor-leader-area,
    .wd-inv-range-meta,
    .wd-inv-alert-email__body,
    .wd-inv-alert-email__cta,
    .wd-inv-alert-email__note,
    .wd-skewt-ctrl,
    .wd-inv-mode-switch-end,
    .wd-inv-view-switch-btn,
    .wd-inv-slider-tick-label,
    .wd-gh-mode-btn
) {
    font-size: var(--wd-inv-meta-font-size) !important;
    font-weight: var(--wd-card-meta-font-weight) !important;
    line-height: var(--wd-inv-meta-line-height) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
}

/* Structural labels: the only small text that stays uppercase. */
body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-fn,
    .wd-inv-besttime-label,
    .wd-inv-panel-label,
    .wd-inv-cloud-stats-label,
    .wd-inv-cloud-dim-lbl,
    .wd-inv-surface-pressure__title,
    .wd-inv-strip-day,
    .wd-freq-bar-month,
    .wd-gh-sunrise-sub,
    .wd-mtn-cloud-slider-label,
    .wd-inv-alerts-btn,
    .wd-inv-alert-email__bar,
    .wd-inv-outlook-access-eyebrow,
    .wd-skewt-ctrl > span,
    .wd-inv-band-label,
    .wd-inv-hm-rail-title,
    .wd-freq-axis span
) {
    font-size: var(--wd-inv-label-font-size) !important;
    font-weight: var(--wd-card-label-font-weight) !important;
    line-height: 1.2 !important;
    letter-spacing: var(--wd-inv-label-tracking) !important;
    text-transform: uppercase !important;
}

/* Names and measurements share one value style. Larger headline readings are
   handled separately below. */
body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-alert-email__area,
    .wd-inv-alert-email__score,
    .wd-inv-outlook-access-title,
    .wd-inv-anchor-leader-name,
    .wd-inv-range-name,
    .wd-inv-anchor-leader-score,
    .wd-inv-range-score,
    .wd-inv-rank,
    .wd-inv-fv,
    .wd-inv-surface-pressure__current,
    .wd-freq-bar-val,
    .wd-gh-day-label,
    .wd-gh-edge,
    .wd-gh-golden-time,
    .wd-gh-bracket-text,
    .wd-atmos-slider-label,
    .wd-skewt-timeline-label,
    .wd-skewt-ctrl select
) {
    font-size: var(--wd-inv-value-font-size) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-strip-likelihood,
    .wd-inv-hero-likelihood,
    .wd-gh-sunrise-time
) {
    font-size: var(--wd-inv-status-font-size) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-fn {
    width: calc(var(--wd-space-3xl) * 3 + var(--wd-space-md));
    white-space: nowrap;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail-head {
    border-radius: 0;
}

body.page-template-page-forecast-unified #tab-inversion :where(
    .wd-inv-strip-window,
    .wd-inv-strip-ct,
    .wd-inv-strip-conf,
    .wd-inv-fv,
    .wd-inv-ring-pct,
    .wd-inv-sc-window,
    .wd-inv-rarity-num,
    .wd-inv-rank,
    .wd-inv-anchor-leader-score,
    .wd-inv-range-score,
    .wd-inv-surface-pressure__current,
    .wd-freq-bar-val,
    .wd-gh-day-label,
    .wd-gh-edge,
    .wd-gh-golden-time,
    .wd-gh-sunrise-time,
    .wd-gh-bracket-text,
    .wd-atmos-slider-label,
    .wd-skewt-timeline-label
) {
    font-family: var(--wd-card-num-font) !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "zero" 0 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-freq-illustrative {
    margin-bottom: var(--wd-space-sm);
    color: var(--wd-text-muted);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-bottom .wd-freq-illustrative,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-bottom .wd-freq-note {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* WeatherDuck Cloud Inversion CSS, part 08 of 8: mobile inversion polish, accepted mobile outlook and timeline layouts, timeline cleanup.
   Split from inversion.css on 2026-09-14 in original order; every part loads on the page and the order matters. */
/* ============================================================
   MOBILE INVERSION POLISH
   Keeps every section and datum, but makes the phone layout read as a set of
   usable panels instead of one very long desktop rail.
   ============================================================ */

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion {
        --wd-inv-card-gap: var(--wd-space-md);
        --wd-inv-card-radius: var(--wd-radius-sm);
        --wd-inv-mobile-map-min: calc(
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) +
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl)
        );
        --wd-inv-mobile-region-max: calc(
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) +
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) +
            var(--wd-space-3xl) + var(--wd-space-lg)
        );
    }

    /* Everything the merged card holds (map, timeline, key, Active Areas)
       stacks inside the "heatmap" row — no separate slider or rail rows. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail {
        grid-template-areas:
            "outlook"
            "heatmap"
            "alerts"
            "kf"
            "profile";
        gap: var(--wd-inv-card-gap);
        margin-bottom: 0;
    }

    /* The primary shared slider is a flat strip inside the heatmap card now, so
       only the Skew-T mirror keeps the boxed-slider radius here. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-wrap,
    body.page-template-page-forecast-unified #tab-inversion .wd-skewt-shared-slider,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-card,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full > .wd-card,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-lower-grid .wd-card {
        border-radius: var(--wd-radius-sm) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-wrap {
        overflow: hidden;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-strip-night {
        height: auto;
        min-height: calc(var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-xl));
        padding: var(--wd-space-md) var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-strip-likelihood {
        font-size: var(--wd-font-size-lg) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-strip-meta {
        min-height: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-stack {
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-alerts-btn {
        min-height: var(--wd-control-h);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-social .nsl-button {
        min-height: var(--wd-control-h) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-alert-email {
        padding: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider {
        padding: var(--wd-space-md);
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-info-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wd-space-sm);
        align-items: stretch;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-info-row .wd-inv-slider-label {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-mode-switch {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        padding: var(--wd-space-xs) var(--wd-space-sm);
        border: 1px solid var(--wd-border);
        border-radius: var(--wd-radius-sm);
        background: var(--wd-bg-subtle);
        box-sizing: border-box;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-control-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-controls {
        justify-content: center;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-nav-btn {
        width: var(--wd-control-h);
        height: var(--wd-control-h);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play:focus,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-play:active {
        width: min(calc(var(--wd-control-h) + var(--wd-control-h) + var(--wd-space-xl)), 44vw) !important;
        min-width: min(calc(var(--wd-control-h) + var(--wd-control-h) + var(--wd-space-xl)), 44vw) !important;
        height: var(--wd-control-h);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-track-wrap {
        min-width: 0;
        padding-bottom: calc(var(--wd-space-xl) + var(--wd-space-sm));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-heatmap-card .wd-inv-heatmap-map {
        min-height: var(--wd-inv-mobile-map-min);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-legend {
        justify-content: center;
        gap: var(--wd-space-sm);
        text-align: center;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        text-align: right;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-scroll {
        max-height: var(--wd-inv-mobile-region-max);
        overflow-y: auto;
        overscroll-behavior: auto;
        padding-right: var(--wd-space-xs);
        scrollbar-width: thin;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-scroll .wd-inv-insight-list {
        overflow: visible;
        padding-right: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-row {
        grid-template-columns: minmax(var(--wd-space-2xl), auto) minmax(0, 1fr) minmax(var(--wd-space-3xl), auto);
        gap: var(--wd-space-sm);
        padding: var(--wd-space-sm) 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rank {
        width: var(--wd-space-2xl);
        height: var(--wd-space-2xl);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-score {
        min-width: var(--wd-space-3xl);
        padding: var(--wd-space-sm) var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-meta {
        white-space: normal;
        line-height: var(--wd-card-meta-line-height);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-inv-key-factors-card,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-rail .wd-skewt-card {
        min-height: auto !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-factor-row {
        display: grid;
        grid-template-columns: 106px minmax(0, 1fr) minmax(32px, auto);
        gap: var(--wd-space-sm);
        padding: 3px 0;
        border-bottom: none;
    }

    /* Sentence-case single-line labels (overrides the global uppercase label block) */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-fn {
        width: auto;
        font-size: var(--wd-card-label-font-size, 0.68rem) !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-key-factors-card .wd-inv-ft {
        height: 5px;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-chip {
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-skewt-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-skewt-ctrl {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-skewt-ctrl select {
        width: 100%;
        max-width: none;
        min-height: var(--wd-control-h);
        padding: var(--wd-space-xs) var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-surface-pressure__head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-surface-pressure__current {
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full {
        gap: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-chart-container {
        height: calc(var(--wd-inv-mobile-map-min) - var(--wd-space-3xl) - var(--wd-space-xl));
    }
}

@media (max-width: 480px) {
    body.page-template-page-forecast-unified #tab-inversion {
        --wd-inv-card-gap: var(--wd-space-sm);
        --wd-inv-mobile-map-min: calc(
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) +
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-md)
        );
        --wd-inv-mobile-region-max: calc(
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) +
            var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-3xl)
        );
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-strip-night {
        min-height: calc(var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-sm));
        padding: var(--wd-space-md) var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--wd-space-xs) var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-range-row {
        grid-template-columns: var(--wd-space-2xl) minmax(0, 1fr) var(--wd-space-3xl);
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-skewt-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-template-page-forecast-unified #tab-inversion #wd-gh-section > .wd-gh-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        height: auto !important;
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion #wd-gh-section > .wd-gh-header .wd-section-title {
        width: auto;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-toggle {
        width: 100%;
        box-sizing: border-box;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-gh-mode-btn {
        flex: 1 1 0;
        min-height: calc(var(--wd-control-h) - var(--wd-space-md));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-gh-day-nav {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-freq-chart-wrap {
        gap: var(--wd-space-sm);
    }
}

/* === Accepted mobile outlook + timeline layouts === */
@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title info"
            "sub info";
        align-items: center;
        gap: var(--wd-space-2xs) var(--wd-space-sm);
        height: auto !important;
        min-height: calc(var(--wd-control-h) + var(--wd-space-xs));
        padding: var(--wd-space-xs) var(--wd-space-md) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-title {
        display: contents !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-title > span:first-child {
        grid-area: title;
        min-width: 0;
        font-size: var(--wd-card-header-font-size) !important;
        font-weight: var(--wd-card-header-font-weight) !important;
        line-height: 1;
        letter-spacing: var(--wd-card-header-letter-spacing) !important;
        text-transform: uppercase;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-title .wd-inv-source-info {
        grid-area: info;
        justify-self: end;
        align-self: center;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 18px !important;
        min-width: 18px;
        height: 18px !important;
        padding: 0 !important;
        border: 1px solid var(--wd-border) !important;
        border-radius: 999px !important;
        background: var(--wd-bg-subtle) !important;
        color: var(--wd-text-secondary) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: none !important;
        box-sizing: border-box;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr .wd-inv-source-info__tip {
        right: 0;
        left: auto;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-sub {
        grid-area: sub;
        justify-self: start;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        color: var(--wd-text-light, #908a7e);
        font-family: var(--wd-mono, monospace) !important;
        font-size: var(--wd-card-meta-font-size) !important;
        font-weight: var(--wd-card-meta-font-weight) !important;
        line-height: var(--wd-card-meta-line-height) !important;
        letter-spacing: 0 !important;
        text-align: left;
        text-overflow: ellipsis;
        text-transform: none;
        white-space: nowrap;
    }

    /* The mini strip sizes itself to the real period count (periods-N class);
       gated users' access end-cap then occupies one compact full row below. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip.wd-inv-night-strip--inline {
        display: grid !important;
        grid-template-columns: repeat(var(--wd-inv-visible-periods, 5), minmax(0, 1fr)) !important;
        gap: 0 !important;
        overflow: visible;
    }

    /* Six premium periods: two tidy rows of three — a single row would squeeze
       cells to ~50px on phones. Row 1 gets a dividing hairline; row-end cells
       (3rd and 6th) drop their right border. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip.wd-inv-night-strip--inline.wd-inv-night-strip--periods-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* Premium row (gated users): 16px gutters line up with the hero above,
       12px between copy and button, 40px button so it stops crowding the
       card edge. Same values at 480px (no narrower override). */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-outlook-access-cell {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--wd-space-md);
        align-items: center;
        height: auto;
        min-height: 0;
        padding: var(--wd-space-md) var(--wd-space-lg);
        border-top: 1px solid var(--wd-border);
        background: color-mix(in srgb, var(--wd-green-light) 24%, var(--wd-bg-card));
        box-shadow: none;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-outlook-access-copy {
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-outlook-access-title {
        max-width: none;
        font-size: var(--wd-font-size-sm);
        line-height: 1.3;
        text-wrap: balance;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-outlook-access-button {
        min-height: calc(var(--wd-control-h) - var(--wd-space-xs));
        padding-inline: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-night {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: calc(var(--wd-space-3xl) + var(--wd-space-lg)) !important;
        padding: var(--wd-space-sm) var(--wd-space-2xs) !important;
        border-right: 1px solid var(--wd-border);
        border-bottom: 0 !important;
        border-top: 3px solid transparent;
        cursor: pointer;
        transition: background 0.15s, border-top-color 0.15s;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-night:nth-child(2n) {
        border-right: 1px solid var(--wd-border);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-night:last-child {
        border-right: 0;
    }

    /* Gated strip: the last period mini sits at the row's right edge (the tap
       hint and the premium row span the full width below it), so no divider.
       Position-independent so it holds whether or not the hint renders. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-strip-night:has(+ .wd-inv-outlook-taphint),
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--with-access .wd-inv-strip-night:has(+ .wd-inv-outlook-access-cell) {
        border-right: 0;
    }

    /* Two-row (periods-6) strip: hairline between the rows, no trailing border
       on each row's last cell. Must out-rank the border-bottom: 0 !important on
       the base mini cell rule above. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline.wd-inv-night-strip--periods-6 .wd-inv-strip-night:nth-child(-n+3) {
        border-bottom: 1px solid var(--wd-border) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline.wd-inv-night-strip--periods-6 .wd-inv-strip-night:nth-child(3n) {
        border-right: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-day {
        font-size: 0 !important;
        line-height: 1.1;
        letter-spacing: 0.02em;
        margin-bottom: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-day::before {
        content: attr(data-mobile-label);
        font-size: var(--wd-card-label-font-size);
    }

    /* Heatmap card title shortens on mobile: "Cloud Inversion Heatmap" → "Inversion Heatmap" */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-card > .wd-section-title > span[data-mobile-label] {
        font-size: 0 !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-card > .wd-section-title > span[data-mobile-label]::before {
        content: attr(data-mobile-label);
        font-size: var(--wd-card-header-font-size);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-likelihood {
        align-self: center;
        margin-top: var(--wd-space-2xs);
        font-size: var(--wd-font-size-sm) !important;
        line-height: 1.1;
    }

    /* ── V2 hero + mini strip: detail lives in the hero; strip cards become
       tappable day + qualitative-likelihood minis ── */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-window,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-meta {
        display: none;
    }

    /* Best cue on a mini is just the badge — the tinted panel becomes selection */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-night--best {
        background: var(--wd-bg-card);
        box-shadow: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-outlook-period--sel {
        background: var(--wd-bg-subtle);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t80.wd-inv-outlook-period--sel { border-top-color: var(--inv-excellent); }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t65.wd-inv-outlook-period--sel,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t60.wd-inv-outlook-period--sel { border-top-color: var(--inv-good); }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t45.wd-inv-outlook-period--sel,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t40.wd-inv-outlook-period--sel { border-top-color: var(--inv-moderate); }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t25.wd-inv-outlook-period--sel,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t20.wd-inv-outlook-period--sel { border-top-color: var(--inv-low); }
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-t0.wd-inv-outlook-period--sel { border-top-color: var(--inv-verylow); }

    /* While the wrap is pending, selection visuals stay off too — the early
       init() sync marks the server-best cell, but its tier/selection can move
       when the region fill lands, and the reveal must be a single paint. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook--pending .wd-inv-outlook-period--sel {
        background: var(--wd-bg-card);
        border-top-color: transparent;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hero {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--wd-space-xs) var(--wd-space-lg);
        align-items: center;
        box-sizing: border-box;
        /* Constant height so the mini strip never jumps under the user's finger.
           Sized for day, timing, confidence and stability lines at 360px. */
        min-height: calc(var(--wd-space-3xl) + var(--wd-space-3xl) + var(--wd-space-2xl) + var(--wd-space-lg));
        padding: var(--wd-space-lg) var(--wd-space-lg) var(--wd-space-md);
        border-bottom: 1px solid var(--wd-border);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-score {
        text-align: center;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-likelihood {
        font-size: var(--wd-font-size-lg);
        font-weight: 800;
        letter-spacing: 0.06em;
        line-height: 1.1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-when {
        display: flex;
        align-items: center;
        gap: var(--wd-space-sm);
        min-width: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-day {
        font-size: var(--wd-font-size-md);
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-detail {
        margin-top: var(--wd-space-2xs);
        font-size: var(--wd-font-size-xs);
        font-weight: 600;
        color: var(--wd-text-mid, #5a5850);
        line-height: 1.55;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-window {
        color: var(--wd-green);
        font-size: var(--wd-font-size-sm);
        font-weight: 800;
        white-space: pre-line;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-conf {
        color: var(--wd-text-light, #908a7e);
        font-weight: 700;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-stability {
        color: var(--wd-text-muted);
        font-weight: 600;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-none {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-window:empty,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-conf:empty,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero-stability:empty {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero--nodetail .wd-inv-hero-window,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero--nodetail .wd-inv-hero-ct {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-hero--nodetail .wd-inv-hero-none {
        display: block;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-taphint {
        display: block;
        padding: var(--wd-space-xs) 0 var(--wd-space-sm);
        border-top: 1px solid var(--wd-border);
        color: var(--wd-text-light, #908a7e);
        font-size: calc(var(--wd-font-size-xs) - 0.1rem);
        text-align: center;
    }

    /* Gated users: the hint renders inside the strip grid, between the period
       minis and the premium row, so it has to span every column. */
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline > .wd-inv-outlook-taphint {
        grid-column: 1 / -1;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "time readout"
            "mode controls"
            "track track";
        align-items: center;
        gap: var(--wd-space-sm);
        padding: var(--wd-space-md) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-info-row,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-control-row {
        display: contents !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-label {
        grid-area: time;
        align-self: end;
        min-width: 0;
        max-width: 100%;
        font-size: var(--wd-font-size-sm);
        line-height: 1.1;
        text-align: left;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout {
        grid-area: readout;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-self: end;
        min-width: 0;
        max-width: calc(var(--wd-space-3xl) * 3);
        gap: var(--wd-space-2xs);
        text-align: right;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-loc {
        max-width: 100%;
        overflow: hidden;
        font-size: var(--wd-card-label-font-size);
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-score {
        font-size: var(--wd-font-size-sm);
        line-height: 1;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch {
        grid-area: mode;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: var(--wd-space-2xs) var(--wd-space-xs);
        border-radius: var(--wd-radius-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end--fcst {
        font-size: 0 !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end--fcst::after {
        content: 'Past';
        font-size: var(--wd-font-size-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end--obs {
        font-size: var(--wd-font-size-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-controls {
        grid-area: controls;
        justify-self: end;
        width: auto;
        min-width: 0;
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-nav-btn {
        width: calc(var(--wd-control-h) - var(--wd-space-sm));
        height: calc(var(--wd-control-h) - var(--wd-space-sm));
        min-width: calc(var(--wd-control-h) - var(--wd-space-sm));
        border-radius: var(--wd-radius-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play {
        width: calc(var(--wd-control-h) + var(--wd-space-sm));
        min-width: calc(var(--wd-control-h) + var(--wd-space-sm));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-track-wrap {
        grid-area: track;
        width: 100%;
        padding-bottom: calc(var(--wd-space-xl) + var(--wd-space-2xs));
    }
}

@media (max-width: 480px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-day {
        letter-spacing: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-night-strip--inline .wd-inv-strip-likelihood {
        font-size: var(--wd-font-size-sm) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "time readout"
            "mode mode"
            "controls controls"
            "track track";
        gap: var(--wd-space-sm);
        padding: var(--wd-space-sm) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch {
        min-height: calc(var(--wd-control-h) - var(--wd-space-sm));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout {
        max-width: calc(var(--wd-space-3xl) * 2.35);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-controls {
        display: grid;
        grid-template-columns:
            calc(var(--wd-control-h) - var(--wd-space-xs))
            minmax(0, 1fr)
            calc(var(--wd-control-h) - var(--wd-space-xs));
        gap: var(--wd-space-xs);
        justify-self: stretch;
        width: 100%;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-nav-btn {
        width: 100%;
        height: calc(var(--wd-control-h) - var(--wd-space-xs));
        min-width: 0;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play {
        width: 100% !important;
        min-width: 0 !important;
        height: calc(var(--wd-control-h) - var(--wd-space-xs));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-track-wrap {
        margin-top: var(--wd-space-2xs);
    }
}

/* === Mobile timeline cleanup after review === */
@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr .wd-inv-source-info {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        padding: 0 !important;
        border: 1px solid var(--wd-border) !important;
        border-radius: 999px !important;
        background: var(--wd-bg-subtle) !important;
        color: var(--wd-text-secondary) !important;
        font-family: var(--wd-font) !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-transform: none !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-outlook-hdr .wd-inv-source-info__icon {
        display: block;
        line-height: 1;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "time readout readout"
            "mode controls controls"
            "track track track";
        align-items: center;
        gap: var(--wd-space-sm);
        padding: var(--wd-space-md) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-label {
        align-self: center;
        font-size: var(--wd-font-size-sm);
        font-weight: 700;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout {
        align-self: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-self: stretch;
        max-width: none;
        gap: var(--wd-space-xs);
        width: 100%;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-loc {
        font-size: calc(var(--wd-card-label-font-size) - 0.04rem);
        min-width: 0;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-score {
        font-size: calc(var(--wd-card-label-font-size) - 0.02rem);
        font-weight: 800;
        letter-spacing: 0.02em;
        text-align: right;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch {
        display: inline-flex;
        grid-area: mode;
        align-items: center;
        justify-self: start;
        justify-content: flex-start;
        width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
        min-width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
        max-width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
        min-height: calc(var(--wd-control-h) - var(--wd-space-xs));
        gap: var(--wd-space-xs);
        padding: var(--wd-space-xs);
        border: 1px solid var(--wd-border);
        border-radius: var(--wd-radius-sm);
        background: var(--wd-bg-subtle);
        box-sizing: border-box;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end {
        order: 1;
        font-size: var(--wd-font-size-xs) !important;
        font-weight: 700;
        line-height: 1;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end--fcst {
        font-size: var(--wd-font-size-xs) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-end--fcst::after {
        content: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch:has(.wd-inv-mode-switch-input:checked) .wd-inv-mode-switch-end--fcst,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch:has(.wd-inv-mode-switch-input:not(:checked)) .wd-inv-mode-switch-end--obs {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch-vis {
        order: 0;
        justify-self: center;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-controls {
        display: grid;
        grid-area: controls;
        grid-template-columns:
            calc(var(--wd-control-h) - var(--wd-space-xs))
            minmax(calc(var(--wd-control-h) + var(--wd-space-xl)), calc(var(--wd-control-h) + var(--wd-control-h) + var(--wd-space-xl)))
            calc(var(--wd-control-h) - var(--wd-space-xs));
        justify-content: end;
        justify-self: end;
        gap: var(--wd-space-xs);
        width: min(100%, calc(var(--wd-control-h) + var(--wd-control-h) + var(--wd-control-h) + var(--wd-space-xl) + var(--wd-space-sm)));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-nav-btn {
        width: 100%;
        height: calc(var(--wd-control-h) - var(--wd-space-xs));
        min-width: 0;
        border-radius: var(--wd-radius-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play:focus,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play:active {
        width: 100% !important;
        min-width: 0 !important;
        height: calc(var(--wd-control-h) - var(--wd-space-xs));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-track-wrap {
        grid-area: track;
        min-width: 0;
        width: 100%;
        margin-top: var(--wd-space-xs);
        padding-right: var(--wd-space-sm);
        padding-bottom: calc(var(--wd-space-xl) + var(--wd-space-sm));
        padding-left: var(--wd-space-sm);
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        grid-template-columns: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl)) minmax(0, 1fr) auto;
        gap: var(--wd-space-xs);
        padding: var(--wd-space-sm) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout {
        max-width: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch {
        width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
        min-width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
        max-width: calc(var(--wd-control-h) + var(--wd-space-3xl) * 2 + var(--wd-space-xl));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-controls {
        grid-template-columns:
            calc(var(--wd-control-h) - var(--wd-space-sm))
            minmax(calc(var(--wd-control-h) + var(--wd-space-md)), calc(var(--wd-control-h) + var(--wd-control-h)))
            calc(var(--wd-control-h) - var(--wd-space-sm));
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-key-row {
        gap: var(--wd-space-xs);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-key-row .wd-inv-heatmap-legend {
        gap: calc(var(--wd-space-xs) / 2) var(--wd-space-xs);
        justify-content: flex-start;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-heatmap-legend-blob {
        width: var(--wd-space-lg);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-view-switch-btn {
        padding-inline: var(--wd-space-xs);
    }
}

/* Approved inversion-tab controls, hourly ruler and conditional list scrolling. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-footer-key:only-child {
    grid-column: 1 / -1;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-range-scroll,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-insight-list {
    overscroll-behavior-y: auto;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-hm-rail .wd-inv-can-scroll {
    overscroll-behavior-y: contain;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-tick {
    background: var(--wd-text-muted);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-tick--major,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-tick--boundary {
    background: var(--wd-green);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-tick-label--midday {
    display: block;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-slider-tick-label[hidden] {
    display: none;
}

/* Mobile layout B: region, time/mode/likelihood, ruler, then playback. */
.wd-inv-slider-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "region region region"
            "time mode score"
            "track track track"
            "controls controls controls";
        gap: var(--wd-space-sm);
        padding: var(--wd-space-lg) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout {
        display: contents;
        white-space: normal;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) :is(.wd-inv-user-readout-loc, .wd-inv-slider-label, .wd-inv-user-readout-score) {
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 1.5 !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-loc {
        grid-area: region;
        min-width: 0;
        max-width: 100%;
        font-size: var(--wd-font-size-sm) !important;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        text-align: left;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-label {
        grid-area: time;
        min-width: 0;
        justify-content: flex-start;
        justify-self: start;
        font-size: var(--wd-font-size-md) !important;
        color: var(--wd-text-primary);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-user-readout-score {
        grid-area: score;
        justify-self: end;
        align-self: center;
        font-size: var(--wd-font-size-xs) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) :is(.wd-inv-user-readout-separator, .wd-inv-slider-play-text) {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-track-wrap {
        grid-area: track;
        margin: 0;
        padding: 0 0 var(--wd-space-2xl);
        --wd-inv-mobile-track: linear-gradient(to right,
            var(--wd-inv-observed-accent) 0%,
            var(--wd-inv-observed-accent) var(--wd-inv-obs, 0%),
            var(--wd-inv-forecast-past-accent) var(--wd-inv-obs, 0%),
            var(--wd-inv-forecast-past-accent) var(--wd-inv-now, 50%),
            var(--wd-green) var(--wd-inv-now, 50%),
            var(--wd-green) 100%);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider {
        height: var(--wd-space-2xl);
        background: transparent;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider::-webkit-slider-runnable-track {
        background: var(--wd-inv-mobile-track);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider::-moz-range-track {
        background: var(--wd-inv-mobile-track);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider::-webkit-slider-thumb {
        width: calc(var(--wd-space-md) + var(--wd-space-xs) / 2);
        height: var(--wd-space-xl);
        margin-top: calc((var(--wd-space-sm) - var(--wd-space-xs) / 2 - var(--wd-space-xl)) / 2);
        border: calc(var(--wd-space-xs) / 2) solid var(--wd-green);
        border-radius: calc(var(--wd-radius-sm) / 2);
        background: var(--wd-bg-card);
        filter: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider::-moz-range-thumb {
        width: calc(var(--wd-space-md) + var(--wd-space-xs) / 2);
        height: var(--wd-space-xl);
        border: calc(var(--wd-space-xs) / 2) solid var(--wd-green);
        border-radius: calc(var(--wd-radius-sm) / 2);
        background: var(--wd-bg-card);
        filter: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-ruler {
        top: var(--wd-space-xl);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-controls {
        grid-area: controls;
        grid-template-columns: var(--wd-control-h) minmax(0, 1fr) var(--wd-control-h);
        justify-self: stretch;
        width: 100%;
        gap: var(--wd-space-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-nav-btn {
        height: var(--wd-control-h);
        border-radius: var(--wd-radius-sm);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-nav-btn::before {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-mobile-chevron {
        display: inline;
        font-size: var(--wd-font-size-2xl);
        line-height: 1;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play:focus,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play:active {
        width: 100% !important;
        min-width: 0 !important;
        height: var(--wd-control-h);
        background: var(--wd-green) !important;
        border-color: var(--wd-green) !important;
        color: var(--wd-text-on-green) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-mobile-start,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play[aria-pressed="true"] .wd-inv-slider-mobile-pause {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--wd-space-sm);
        font-size: var(--wd-font-size-xs);
        font-weight: 600;
        line-height: 1;
        text-transform: none;
        white-space: nowrap;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-slider-play[aria-pressed="true"] .wd-inv-slider-mobile-start {
        display: none;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch {
        grid-area: mode;
        justify-self: center;
        width: calc(var(--wd-space-3xl) * 3 + var(--wd-space-sm));
        min-width: 0;
        max-width: 100%;
        min-height: var(--wd-control-h);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) .wd-inv-mode-switch .wd-inv-mode-switch-end {
        color: var(--wd-text-muted);
        font-weight: 500 !important;
    }
}

@media (max-width: 480px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-shared-slider:not(.wd-skewt-shared-slider) {
        column-gap: var(--wd-space-xs);
        padding-inline: var(--wd-space-md) !important;
    }
}

/* Approved atmospheric charts: compact linked legends and floating help. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wd-space-xl);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower {
    --wd-inv-readability-padding: var(--wd-card-padding);
    padding: var(--wd-inv-readability-padding);
    min-width: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card {
    position: relative;
    overflow: visible;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card.wd-inv-atmos-help-open {
    z-index: 5;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card > .wd-inv-atmos-heading,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower > .wd-section-title {
    height: auto !important;
    min-height: 38px;
    padding: 6px var(--wd-inv-readability-padding) !important;
    margin: calc(-1 * var(--wd-inv-readability-padding)) calc(-1 * var(--wd-inv-readability-padding)) var(--wd-inv-readability-padding) !important;
    line-height: 1.3 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-heading h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: var(--wd-font-size-sm);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: inherit;
    text-transform: uppercase;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-heading {
    position: relative;
}

/* Specificity also protects these controls from the parent theme button reset. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card button {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wd-text-secondary);
    font: inherit;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card button:focus-visible {
    outline: 2px solid var(--wd-green);
    outline-offset: 1px;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--wd-control-h);
    width: var(--wd-control-h);
    height: var(--wd-control-h);
    padding: 0;
    margin: calc(-1 * var(--wd-space-sm)) calc(-1 * var(--wd-space-sm)) calc(-1 * var(--wd-space-sm)) 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-info span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wd-atmos-info-icon-size);
    height: var(--wd-atmos-info-icon-size);
    border: 1px solid var(--wd-border-strong);
    border-radius: var(--wd-radius-pill);
    background: var(--wd-bg-subtle);
    font-size: var(--wd-font-size-xs);
    font-weight: 700;
    line-height: 1;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-info:hover span,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-info[aria-expanded="true"] span {
    background: var(--wd-green);
    color: var(--wd-text-on-green);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-help {
    position: absolute;
    top: calc(100% + var(--wd-space-xs));
    right: var(--wd-space-lg);
    z-index: 6;
    box-sizing: border-box;
    width: var(--wd-atmos-info-width);
    max-width: calc(100% - var(--wd-space-lg) * 2);
    max-height: min(70vh, var(--wd-atmos-info-max-height));
    overflow: auto;
    padding: var(--wd-space-xl);
    border: 1px solid var(--wd-border-strong);
    border-radius: var(--wd-radius-sm);
    background: var(--wd-bg-card);
    box-shadow: var(--wd-shadow-lg);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-sm);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-help[hidden] {
    display: none;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-help strong {
    color: var(--wd-text-primary);
    font-weight: 700;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-help p {
    margin: var(--wd-space-md) 0 0;
    font-size: inherit;
    line-height: inherit;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-close,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-reset {
    padding: var(--wd-space-xs) 0;
    color: var(--wd-green);
    text-decoration: underline;
    font-size: var(--wd-font-size-xs);
    flex-shrink: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-close {
    margin-top: var(--wd-space-md);
    font-size: var(--wd-font-size-sm);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wd-space-xs);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wd-space-xs);
    min-width: 0;
    min-height: var(--wd-control-h);
    padding: var(--wd-space-sm) var(--wd-space-xs);
    text-align: center;
    transition: background-color 140ms, color 140ms, opacity 140ms;
}

.wd-inv-atmos-level--1000 { --wd-atmos-key-colour: var(--wd-atmos-level-1000); }
.wd-inv-atmos-level--975 { --wd-atmos-key-colour: var(--wd-atmos-level-975); }
.wd-inv-atmos-level--950 { --wd-atmos-key-colour: var(--wd-atmos-level-950); }
.wd-inv-atmos-level--925 { --wd-atmos-key-colour: var(--wd-atmos-level-925); }
.wd-inv-atmos-level--900 { --wd-atmos-key-colour: var(--wd-atmos-level-900); }
.wd-inv-atmos-level--850 { --wd-atmos-key-colour: var(--wd-atmos-level-850); }

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-key {
    width: var(--wd-atmos-key-width);
    height: var(--wd-space-md);
    flex: 0 0 var(--wd-atmos-key-width);
    overflow: visible;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-key line {
    stroke: var(--wd-atmos-key-colour);
    stroke-width: 3;
    stroke-linecap: round;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-level strong,
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-level small {
    display: block;
    font-size: var(--wd-font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-level small {
    font-size: var(--wd-font-size-xs);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-has-selection .wd-inv-atmos-level[aria-pressed="false"],
body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-reset:disabled {
    opacity: .45;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-reset:disabled {
    cursor: default;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-level[aria-pressed="true"] {
    background: var(--wd-green-light);
    color: var(--wd-green);
    opacity: 1;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-level[aria-pressed="true"] strong {
    font-weight: 750;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-level[aria-pressed="true"] line {
    stroke-width: 4;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-level[aria-pressed="false"]:focus-visible {
    background: var(--wd-bg-subtle);
    opacity: 1;
}

@media (hover: hover) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-level[aria-pressed="false"]:hover {
        background: var(--wd-bg-subtle);
        color: var(--wd-text-primary);
        opacity: 1;
    }
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-legend-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wd-space-sm);
    margin: var(--wd-space-sm) 0 var(--wd-space-md);
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    line-height: 1.4;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-chart-container {
    height: var(--wd-atmos-chart-height);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-canvas {
    font-size: var(--wd-font-size-xs);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-note {
    margin: var(--wd-space-md) 0 0;
    color: var(--wd-text-secondary);
    font-size: var(--wd-font-size-xs);
    line-height: 1.5;
}

.wd-inv-atmos-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Original monthly chart, with room for the axis and a separate note. */
body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower > .wd-section-title {
    font-size: var(--wd-font-size-sm) !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-illustrative--chance {
    margin: 0 0 var(--wd-space-xl);
    color: var(--wd-text-muted);
    font-size: var(--wd-font-size-md) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-chart-wrap {
    grid-template-columns: max-content minmax(0, 1fr);
    width: 100%;
    margin: 0;
    gap: var(--wd-space-lg);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-axis {
    width: auto;
    padding: var(--wd-space-xs) 0 calc(var(--wd-space-sm) + var(--wd-font-size-sm) * 1.3);
    border: 0;
    color: var(--wd-text-muted);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-axis span {
    max-width: none;
    font-size: var(--wd-font-size-sm) !important;
    line-height: 1.25 !important;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-chart {
    height: var(--wd-freq-chart-height);
    min-width: 0;
    gap: var(--wd-space-xs);
    padding: 0;
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-bar-col {
    min-width: 0;
    gap: var(--wd-space-sm);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-bar {
    background: linear-gradient(180deg, var(--wd-green), var(--wd-freq-bar-end));
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-bar--current {
    background: linear-gradient(180deg, var(--wd-cta), var(--wd-green));
    box-shadow: var(--wd-freq-current-glow);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-bar-month {
    flex-shrink: 0;
    font-size: var(--wd-font-size-sm) !important;
    line-height: 1.3 !important;
    color: var(--wd-text-muted);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-bar-month--current {
    color: var(--wd-green);
}

body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-note {
    margin: var(--wd-space-xl) 0 0;
    padding-top: var(--wd-space-lg);
    font-size: var(--wd-font-size-lg) !important;
    line-height: 1.65 !important;
    color: var(--wd-text-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-charts-full {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card,
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower {
        --wd-inv-readability-padding: var(--wd-card-padding-mobile);
    }
}

@media (max-width: 480px) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-key {
        width: var(--wd-atmos-key-width-mobile);
        flex-basis: var(--wd-atmos-key-width-mobile);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-chart-wrap {
        gap: var(--wd-space-md);
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-axis span {
        font-size: var(--wd-font-size-xs) !important;
    }

    body.page-template-page-forecast-unified #tab-inversion .wd-inv-freq-lower .wd-freq-note {
        font-size: var(--wd-font-size-md) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-template-page-forecast-unified #tab-inversion .wd-inv-atmos-card .wd-inv-atmos-level {
        transition: none;
    }
}
/* ===========================================================
   WeatherDuck — Membership styles
   Paywall card + header account dropdown.
   Design tokens only (--wd-*). No hardcoded values.
   =========================================================== */

/* ──── Paywall card ──── */
/* === In-app (TWA) purchase-link suppression === */

/*
 * Google Play allows a consumption-only app to say where Premium is sold,
 * but not to link to the checkout. site-pwa.php puts `wd-in-app` on <html>
 * before first paint, so the swap happens with no flash of a dead button.
 * Web visitors are unaffected — they never get the class.
 */

.wd-inapp-note {
	display: none;
	margin: var(--wd-space-md) 0 0;
	color: var(--wd-text-muted);
	font-size: var(--wd-font-size-sm);
	line-height: 1.5;
}

/*
 * `!important` is deliberate. This is a Play policy rule, not a style choice:
 * a checkout link must never survive into the app. Page-level rules routinely
 * out-specify a plain (0,2,0) selector — `body.wd-pricing-page
 * .wd-pricing-card__button` in pms-auth.css is (0,2,1) and silently won —
 * so any new styled `wd-paid-cta` would quietly reopen the hole.
 */
.wd-in-app .wd-paid-cta { display: none !important; }
.wd-in-app .wd-inapp-note { display: block !important; }
.wd-in-app .wd-inapp-note--inline { display: inline !important; margin: 0; font-size: inherit; color: inherit; }

/*
 * Same rule, applied to markup we don't render ourselves. Register form: only
 * the Free plan is offered in the app, so the paid plan rows and the payment
 * section (method picker + Stripe card fields) never appear. Account page:
 * every panel and form that ends at a card form. Homepage: the Elementor
 * buttons that point at the pricing page.
 */
.wd-in-app .pms-subscription-plan:has(input[name="subscription_plans"]:not([data-price="0"])),
.wd-in-app .pms-paygates-holder,
.wd-in-app .wd-plan-action--change,
.wd-in-app .wd-plan-action--renew,
.wd-in-app .wd-plan-action--retry,
.wd-in-app #pms-change-subscription-form,
.wd-in-app #pms-upgrade-subscription-form,
.wd-in-app #pms-renew-subscription-form,
.wd-in-app #pms-retry-payment-subscription-form,
.wd-in-app .elementor-button[href$="/pricing/"] { display: none !important; }

/*
 * The iOS shell offers email sign-in only. Google refuses OAuth inside an
 * embedded web view, and Apple requires Sign in with Apple wherever a
 * third-party login is shown, so the social buttons stay off in-app.
 * site-pwa.php adds wd-in-native alongside wd-in-app.
 */
.wd-in-native .wd-social-auth,
.wd-in-native .wd-social-email-divider { display: none !important; }

.wd-paywall-card {
	margin-top: var(--wd-space-lg);
	text-align: center;
}
.wd-paywall-card__inner {
	padding: var(--wd-space-xl) var(--wd-space-lg);
	max-width: 560px;
	margin: 0 auto;
}
.wd-paywall-card__title {
	font-size: var(--wd-font-size-xl);
	color: var(--wd-text-base);
	margin: 0 0 var(--wd-space-sm);
}
.wd-paywall-card__subtitle {
	font-size: var(--wd-font-size-md);
	color: var(--wd-text-light);
	margin: 0 0 var(--wd-space-lg);
	line-height: 1.5;
}
.wd-paywall-card__pricing {
	display: flex;
	gap: var(--wd-space-md);
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 var(--wd-space-md);
}
.wd-paywall-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: var(--wd-space-md) var(--wd-space-lg);
	border-radius: var(--wd-radius-md);
	text-decoration: none;
	min-width: 180px;
	transition: transform 0.1s ease;
}
.wd-paywall-btn:hover { transform: translateY(-2px); }
.wd-paywall-btn--primary {
	background: var(--wd-green);
	color: var(--wd-text-on-green);
}
.wd-paywall-btn--secondary {
	background: var(--wd-bg-soft);
	color: var(--wd-text-base);
	border: 1px solid var(--wd-border);
}
.wd-paywall-btn__price {
	font-size: var(--wd-font-size-xl);
	font-weight: 700;
}
.wd-paywall-btn__period {
	font-size: var(--wd-font-size-sm);
	opacity: 0.85;
}
.wd-paywall-card__guarantee {
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-light);
	margin: 0 0 var(--wd-space-md);
}
.wd-paywall-card__downsell {
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-light);
	margin: 0;
}
.wd-paywall-card__downsell a {
	color: var(--wd-green);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.wd-paywall-card__pricing { flex-direction: column; }
	.wd-paywall-btn { width: 100%; min-width: 0; }
}

/* ──── Header account dropdown ──── */
.wd-header-account {
	display: inline-flex;
	align-items: center;
	gap: var(--wd-space-sm);
	position: relative;
}
.wd-header-account__login,
.wd-header-account__signup {
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-base);
	text-decoration: none;
	padding: var(--wd-space-xs) var(--wd-space-sm);
	border-radius: var(--wd-radius-sm);
}
.wd-header-account__signup {
	background: var(--wd-green);
	color: var(--wd-text-on-green);
}
.wd-header-account__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wd-space-xs);
	background: transparent;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-sm);
	padding: var(--wd-space-xs) var(--wd-space-sm);
	cursor: pointer;
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-base);
}
.wd-header-account__badge {
	font-size: var(--wd-font-size-xs);
	background: var(--wd-green);
	color: var(--wd-text-on-green);
	padding: 1px var(--wd-space-xs);
	border-radius: var(--wd-radius-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
}
.wd-header-account__menu {
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--wd-bg-card);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	box-shadow: var(--wd-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
	min-width: 180px;
	list-style: none;
	padding: var(--wd-space-xs) 0;
	margin: var(--wd-space-xs) 0 0;
	z-index: 1000;
}
.wd-header-account__menu[hidden] { display: none; }
.wd-header-account__menu li a {
	display: block;
	padding: var(--wd-space-sm) var(--wd-space-md);
	color: var(--wd-text-base);
	text-decoration: none;
}
.wd-header-account__menu li a:hover {
	background: var(--wd-bg-soft);
}

/* Compact entitlement prompts inside otherwise usable tools. */
.wd-access-prompt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wd-space-lg);
	padding: var(--wd-space-md) var(--wd-space-lg);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	background: var(--wd-bg-subtle);
	color: var(--wd-text-primary);
}
.wd-access-prompt__copy {
	display: grid;
	gap: var(--wd-space-xs);
	min-width: 0;
}
.wd-access-prompt__eyebrow {
	color: var(--wd-green);
	font-size: var(--wd-font-size-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wd-access-prompt__title {
	font-size: var(--wd-font-size-md);
	line-height: 1.25;
}
.wd-access-prompt__body {
	color: var(--wd-text-secondary);
	font-size: var(--wd-font-size-sm);
	font-weight: 600;
	line-height: 1.4;
}
.wd-access-prompt__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: var(--wd-control-h);
	padding: 0 var(--wd-space-lg);
	border-radius: var(--wd-radius-sm);
	background: var(--wd-green);
	color: var(--wd-text-on-green);
	font-size: var(--wd-font-size-sm);
	font-weight: 800;
	text-decoration: none;
}
.wd-access-prompt__button:hover,
.wd-access-prompt__button:focus {
	background: var(--wd-green-hover);
	color: var(--wd-text-on-green);
}
.wd-inv-outlook-wrap > .wd-access-prompt {
	margin: var(--wd-space-md);
}
.wd-customiser-presets > .wd-access-prompt {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}

@media (max-width: 480px) {
	.wd-access-prompt {
		align-items: stretch;
		flex-direction: column;
	}
	.wd-access-prompt__button {
		width: 100%;
	}
}

/* === Email verification notices === */
.wd-verify-notice,
.wd-verify-banner {
	margin: 0 0 var(--wd-space-lg);
	padding: var(--wd-space-md) var(--wd-space-lg);
	border-radius: var(--wd-radius-md);
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-primary);
}
.wd-verify-notice {
	background: var(--wd-green-light);
	border: 1px solid var(--wd-green);
}
/* Something went wrong (expired link, cooldown, bad key) must not be dressed
   as a confirmation — same card, warning edge. */
.wd-verify-notice--warn {
	background: var(--wd-bg-card);
	border-color: var(--wd-warning);
}
/* Routes onward under a notice: every reset/verify state offers at least one.
   Two classes, so it outweighs the `.wd-verify-notice p { margin: 0 }` above
   without reaching for !important. */
.wd-verify-notice .wd-auth-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wd-space-md);
	margin-top: var(--wd-space-sm);
}
.wd-auth-notice__action {
	color: var(--wd-green);
	font-weight: 700;
}
/* The cure for a mistyped signup address, kept quieter than "resend". */
.wd-verify-banner__fix {
	color: var(--wd-text-secondary);
}
.wd-verify-banner {
	background: var(--wd-bg-card);
	border: 1px solid var(--wd-warning);
}
.wd-verify-notice p,
.wd-verify-banner p {
	margin: 0;
}
.wd-verify-banner p + p {
	margin-top: var(--wd-space-sm);
}
.wd-verify-banner a {
	color: var(--wd-green);
	font-weight: 700;
}
/* Housekeeping note: present, but not competing with the call to action. */
.wd-verify-banner .wd-verify-banner__ttl {
	color: var(--wd-text-muted);
	font-size: var(--wd-font-size-xs);
}
/* Shared landing and secondary headers. Opt in with .wd-page-header.
   Homepage and location forecast data headers retain their own layouts. */

.wd-page-header {
	--wd-page-header-font-size: var(--wd-page-header-title);
	font-family: var(--wd-font);
	text-align: left;
	color: var(--wd-text-on-green);
}

.wd-page-header,
.wd-page-header.wd-specialist-hero,
.wd-empty-state .wd-page-header {
	padding: var(--wd-space-2xl) 0 var(--wd-space-3xl);
	background: var(--wd-chrome);
}

.wd-page-header,
.wd-page-header * {
	box-sizing: border-box;
}

.wd-page-header.wd-page-header--compact {
	--wd-page-header-font-size: var(--wd-page-header-title-compact);
}

.wd-page-header__shell,
.wd-page-header > :is(.wd-specialist-shell, .wd-empty-state__wrap),
.wd-empty-state .wd-page-header > .wd-empty-state__wrap {
	width: min(calc(100% - (var(--wd-mkt-gutter) * 2)), var(--wd-content-max));
	max-width: var(--wd-content-max);
	margin-inline: auto;
	padding-inline: 0;
}

.wd-page-header :is(.wd-specialist-hero__grid, .wd-blog-hero__grid) {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--wd-space-3xl);
	align-items: center;
}

.wd-page-header--single :is(.wd-specialist-hero__grid, .wd-blog-hero__grid) {
	grid-template-columns: minmax(0, 1fr);
}

.wd-page-header .wd-specialist-hero__copy {
	min-width: 0;
	max-width: var(--wd-copy-max);
}

.wd-page-header h1,
.wd-page-header.wd-specialist-hero h1,
.wd-empty-state .wd-page-header .wd-empty-state__title {
	max-width: var(--wd-copy-max);
	margin: 0 0 var(--wd-space-lg);
	font-family: var(--wd-font);
	font-size: var(--wd-page-header-font-size);
	font-weight: 800;
	letter-spacing: var(--wd-mkt-h1-tracking);
	line-height: 1.1;
	text-wrap: initial;
	overflow-wrap: anywhere;
	color: var(--wd-text-on-green);
}

.wd-page-header h1 span {
	display: block;
	color: var(--wd-cta);
}

.wd-page-header :is(.wd-specialist-kicker, .wd-page-header__kicker),
.wd-empty-state .wd-page-header .wd-empty-state__kicker {
	margin: 0 0 var(--wd-space-sm);
	font-size: var(--wd-font-size-sm);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: var(--wd-letter-spacing-kicker);
	text-transform: uppercase;
	color: var(--wd-cta);
}

.wd-page-header :is(.wd-specialist-hero__lede, .wd-page-header__lede),
.wd-empty-state .wd-page-header .wd-empty-state__lede {
	max-width: var(--wd-copy-max);
	margin: 0 0 var(--wd-space-xl);
	font-size: var(--wd-mkt-lede);
	font-weight: 400;
	line-height: var(--wd-mkt-lede-lh);
	color: var(--wd-text-on-dark-muted);
}

.wd-page-header__shell > :last-child,
.wd-page-header .wd-specialist-hero__copy > :last-child {
	margin-bottom: 0;
}

.wd-page-header .wd-page-header__note {
	margin: 0 0 var(--wd-space-lg);
	font-size: var(--wd-font-size-sm);
	color: var(--wd-text-on-dark-muted);
}

/* Breadcrumb layout and colours are shared site-wide (breadcrumbs.css). */
.wd-page-header .wd-breadcrumbs {
	margin: 0 0 var(--wd-space-lg);
}

.wd-page-header .wd-specialist-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wd-space-sm) var(--wd-space-xl);
}

.wd-page-header .wd-specialist-button {
	min-height: var(--wd-control-h);
	max-width: 100%;
	padding: var(--wd-space-md) var(--wd-space-lg);
	border-radius: var(--wd-mkt-btn-radius);
	font-size: var(--wd-font-size-sm);
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

.wd-page-header .wd-specialist-search {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wd-space-sm);
}

.wd-page-header .wd-specialist-search :is(.wd-specialist-search__input, .wd-specialist-search__button) {
	min-height: var(--wd-page-header-control-h);
	padding-inline: var(--wd-space-md);
	border-radius: var(--wd-mkt-btn-radius);
	font-size: var(--wd-font-size-sm);
	letter-spacing: normal;
	text-transform: none;
}

.wd-page-header .wd-specialist-text-link {
	display: inline-flex;
	min-height: var(--wd-control-h);
	align-items: center;
	gap: var(--wd-space-sm);
	margin: 0;
	font-size: var(--wd-font-size-sm);
	color: var(--wd-cta);
}

.wd-page-header :is(a, button, input):focus-visible {
	outline: var(--wd-page-header-focus-width) solid var(--wd-cta);
	outline-offset: var(--wd-space-xs);
}

.wd-page-header :is(.wd-about-photo, .wd-method-photo) {
	width: 100%;
	min-width: 0;
	margin: 0;
}

.wd-page-header :is(.wd-about-photo, .wd-method-photo) img {
	width: 100%;
	border-radius: var(--wd-radius-md);
}

/* The overview's three destinations form one compact white summary card. */
.wd-page-header__record {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: var(--wd-card-padding);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	background: var(--wd-bg-card);
	box-shadow: var(--wd-shadow-sm);
}

.wd-page-header__record a {
	display: flex;
	flex-direction: column;
	gap: var(--wd-space-sm);
	min-width: 0;
	padding: var(--wd-space-sm);
	border-left: 1px solid var(--wd-border);
	font-size: var(--wd-font-size-sm);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: var(--wd-text-primary);
}

.wd-page-header__record a:first-child { border-left: 0; }
.wd-page-header__record a:hover { color: var(--wd-green); }
.wd-page-header__record strong { font-size: var(--wd-font-size-3xl); color: var(--wd-green); }

/* Detailed archive summaries sit with the content below the opening band. */
.wd-page-header-summary,
.wd-page-header-featured,
.wd-page-header-stats {
	margin-bottom: var(--wd-space-2xl);
}

.wd-page-header-summary.wd-evidence-tally,
.wd-page-header-summary.wd-evidence-standard {
	padding: var(--wd-card-padding);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-md);
	background: var(--wd-bg-card);
	box-shadow: var(--wd-shadow-sm);
	color: var(--wd-text-primary);
}

.wd-page-header-summary :is(h2, dd),
.wd-page-header-summary.wd-evidence-tally li > span,
.wd-page-header-summary.wd-evidence-tally li a {
	color: var(--wd-text-primary);
}

.wd-page-header-summary :is(.wd-evidence-tally__head, .wd-evidence-standard__head),
.wd-page-header-summary.wd-evidence-tally li {
	border-color: var(--wd-border);
}

.wd-page-header-summary :is(.wd-evidence-tally__head, .wd-evidence-standard__head) p,
.wd-page-header-summary.wd-evidence-tally li small {
	color: var(--wd-text-secondary);
}

.wd-page-header-summary :is(strong, dt),
.wd-page-header-summary.wd-evidence-tally li > strong {
	color: var(--wd-green);
}

.wd-page-header-summary.wd-evidence-tally ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wd-space-lg) var(--wd-space-2xl);
}

.wd-page-header-summary.wd-evidence-tally li {
	border: 0;
}

.wd-page-header-featured .wd-blog-featured {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-radius: var(--wd-radius-md);
	overflow: hidden;
	box-shadow: var(--wd-shadow-sm);
}

.wd-page-header-featured .wd-blog-featured__media {
	height: 100%;
}

.wd-page-header-featured .wd-blog-featured__body { grid-column: 1 / -1; }
.wd-page-header-featured .wd-blog-featured__media + .wd-blog-featured__body { grid-column: auto; }

.wd-report-keystats.wd-page-header-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wd-page-header-stats > div {
	border: 1px solid var(--wd-border);
	background: var(--wd-bg-card);
	box-shadow: var(--wd-shadow-sm);
}

.wd-page-header-stats strong { font-size: var(--wd-font-size-3xl); color: var(--wd-green); }
.wd-page-header-stats span { color: var(--wd-text-secondary); opacity: 1; }

/* Location guides: one DOM order, with the map ahead of signup on phones. */
.wd-page-header--location .wd-specialist-hero__grid {
	grid-template-areas: 'copy map' 'signup map';
	align-items: start;
	row-gap: var(--wd-space-xl);
}

.wd-page-header--location .wd-specialist-hero__copy { grid-area: copy; }
.wd-page-header--location .wd-inv-location-map-card { grid-area: map; margin: 0; }
.wd-page-header__signup { grid-area: signup; min-width: 0; }
.wd-page-header__signup .wd-inversion-hero-signup { margin: 0; padding-top: 0; }

/* Match the cloud hub's two social buttons; Nextend ships important layout rules. */
.wd-page-header__signup .wd-social-auth .nsl-container.nsl-container-block .nsl-container-buttons {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--wd-space-sm);
}

.wd-page-header__signup .nsl-button {
	min-width: 0 !important;
	justify-content: center !important;
}

.wd-page-header__signup .nsl-button-label-container {
	margin-inline: var(--wd-space-xs) !important;
	font-size: var(--wd-font-size-sm) !important;
}

/* Match the hub's desktop wording using the labels rendered before first paint. */
.wd-page-header__signup .wd-signup-label-full { display: inline; }
.wd-page-header__signup .wd-signup-label-short { display: none; }
.wd-page-header__signup :is(.wd-inversion-signup-offer, .wd-social-auth__terms) { text-align: center; }

.wd-page-header--location #wd-local-map-title {
	scroll-margin-top: calc(var(--wd-control-h) + var(--wd-space-2xl));
}

/* Policy content keeps its reading layout beneath a short shared header. */
.wd-article-page.wd-page-header-reading {
	padding: 0 0 var(--wd-space-3xl);
}

.wd-page-header-reading > .wd-article {
	width: min(calc(100% - (var(--wd-mkt-gutter) * 2)), var(--wd-content-max));
	margin: var(--wd-space-2xl) auto 0;
}

body.wd-pricing-page #content.site-main {
	max-width: none;
	padding: 0;
}

body.wd-pricing-page,
body.wd-pricing-page #content.site-main,
body.wd-pricing-page .page-content {
	background: var(--wd-bg-page);
}

body.wd-pricing-page .wd-pricing {
	width: min(calc(100% - (var(--wd-mkt-gutter) * 2)), var(--wd-content-max));
	max-width: var(--wd-content-max);
	margin: var(--wd-space-2xl) auto var(--wd-space-3xl);
}

/* Forecast entrance uses the same search control scale as the landing pages. */
.wd-empty-state .wd-page-header .wd-form-group {
	gap: var(--wd-space-sm);
	max-width: 660px; /* same cap as .wd-specialist-search on the landing pages */
}

.wd-empty-state .wd-page-header :is(.wd-form-input, .wd-form-button) {
	height: auto;
	min-height: var(--wd-page-header-control-h);
	padding: var(--wd-space-md);
	border-radius: var(--wd-mkt-btn-radius);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-sm);
}

.wd-empty-state .wd-page-header .wd-form-input {
	border: 1px solid var(--wd-chrome-border);
	background: var(--wd-chrome-raised);
	color: var(--wd-text-on-green);
}

.wd-empty-state .wd-page-header .wd-form-input::placeholder { color: var(--wd-text-on-dark-muted); }
.wd-empty-state .wd-page-header .wd-form-button { color: var(--wd-chrome); text-transform: none; letter-spacing: normal; }

@media (max-width: 1024px) {
	.wd-page-header__signup .wd-signup-label-full { display: none; }
	.wd-page-header__signup .wd-signup-label-short { display: inline; }
}

@media (max-width: 768px) {
	.wd-page-header :is(.wd-specialist-hero__grid, .wd-blog-hero__grid) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wd-space-2xl);
	}

	.wd-page-header--location .wd-specialist-hero__grid {
		grid-template-areas: 'copy' 'signup' 'map';
	}

	.wd-page-header-featured .wd-blog-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.wd-page-header :is(.wd-about-photo, .wd-method-photo) img {
		max-height: var(--wd-page-header-photo-h);
		object-fit: cover;
	}

	.wd-report-keystats.wd-page-header-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.wd-page-header,
	.wd-page-header.wd-specialist-hero,
	.wd-empty-state .wd-page-header {
		padding: var(--wd-space-lg) 0 var(--wd-space-2xl);
	}

	.wd-page-header .wd-specialist-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wd-space-xs);
	}

	.wd-page-header .wd-specialist-hero__actions > a {
		width: 100%;
		justify-content: center;
	}

	.wd-page-header__record,
	.wd-page-header-summary.wd-evidence-tally,
	.wd-page-header-summary.wd-evidence-standard {
		padding: var(--wd-card-padding-mobile);
	}

	.wd-page-header__record a { padding-inline: var(--wd-space-xs); font-size: var(--wd-font-size-xs); }
	.wd-page-header .wd-specialist-search .wd-specialist-search__input { font-size: var(--wd-mkt-base); }
	.wd-page-header .wd-specialist-search__button { font-size: var(--wd-font-size-xs); }
	.wd-page-header-summary.wd-evidence-tally ul { grid-template-columns: minmax(0, 1fr); gap: var(--wd-space-sm); }
	.wd-empty-state .wd-page-header .wd-form-group { flex-direction: row; }
	.wd-empty-state .wd-page-header .wd-form-input { font-size: var(--wd-mkt-base); }
	.wd-empty-state .wd-page-header .wd-form-button { width: auto; font-size: var(--wd-font-size-xs); }
}
input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 526px; --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: #f2f2f2; --cmplz_banner_border_width: 0px 0px 0px 0px ; --cmplz_banner_border_radius: 12px 12px 12px 12px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 163px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #425a47; --cmplz_hyperlink_color: #1E73BE; --cmplz_text_font_size: 12px; --cmplz_link_font_size: 12px; --cmplz_category_body_font_size: 12px; --cmplz_button_accept_background_color: #425a47; --cmplz_button_accept_border_color: #1E73BE; --cmplz_button_accept_text_color: #ffffff; --cmplz_button_deny_background_color: #f9f9f9; --cmplz_button_deny_border_color: #f2f2f2; --cmplz_button_deny_text_color: #222222; --cmplz_button_settings_background_color: #f9f9f9; --cmplz_button_settings_border_color: #f2f2f2; --cmplz_button_settings_text_color: #333333; --cmplz_button_border_radius: 6px 6px 6px 6px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #425a47; --cmplz_slider_inactive_color: #F56E28; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}#cmplz-manage-consent .cmplz-manage-consent { left: 40px; right: initial;}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner .cmplz-preferences,.cmplz-manage-consent-container .cmplz-preferences { display: none;}#cmplz-manage-consent .cmplz-manage-consent { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}#cmplz-manage-consent .cmplz-manage-consent { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;} .cmplz-blocked-content-container.recaptcha-invisible, .cmplz-blocked-content-container.g-recaptcha { max-width: initial !important; height: 80px !important; margin-bottom: 20px; } @media only screen and (max-width: 400px) { .cmplz-blocked-content-container.recaptcha-invisible, .cmplz-blocked-content-container.g-recaptcha { height: 100px !important } } .cmplz-blocked-content-container.recaptcha-invisible .cmplz-blocked-content-notice, .cmplz-blocked-content-container.g-recaptcha .cmplz-blocked-content-notice { max-width: initial; padding: 7px; }/* ═══════════════════════════════════════════════════
   EMPTY STATE — /forecast/ with no location
   "Duck Dark" landing: dark chrome hero flowing from
   the site header, GB watermark + spot dots, search,
   search examples, outlook choices and area browsing.
   Design: forecast-directions.php, approved version B.
   ═══════════════════════════════════════════════════ */

.wd-page--empty {
	padding: 0;
	min-height: 0; /* Avoid an empty viewport below the directory. */
	background: var(--wd-bg-card);
}

.wd-empty-state {
	--wd-empty-map-height: 508px;
}

/* Use the same content column as the shared landing header. */
.wd-empty-state__wrap {
	width: min(calc(100% - (var(--wd-mkt-gutter) * 2)), var(--wd-content-max));
	max-width: var(--wd-content-max);
	margin-inline: auto;
	padding-inline: 0;
}

/* ── Hero (dark chrome, seamless with the header) ──
   Band padding, type scale and colours come from the shared landing
   header (.wd-page-header, page-headers.css). This sheet adds the
   watermark plumbing and the hero rhythm below. */
.wd-empty-state__hero {
	position: relative;
	/* Clip only the watermark's horizontal bleed. `overflow: hidden`
	   also clipped the autocomplete panel at the hero's bottom edge. */
	overflow-x: clip;
	overflow-y: visible;
	/* Keep autocomplete above the outlook choices below the hero. */
	z-index: 1;
	background: var(--wd-chrome);
	color: #fff;
}

/* soft green glow, upper left */
.wd-empty-state__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(620px 340px at 18% 0%, rgba(107, 201, 127, .10), transparent 70%);
}

.wd-empty-state__hero .wd-empty-state__wrap {
	position: relative;
	z-index: 1;
	max-width: var(--wd-content-max);
}

/* Hero rhythm, matched to the cloud inversion landing hero
   (specialist-landing.css): kicker 12px above the title, title 28px
   above the lede; 8px / 20px on phones. page-headers.css sets the
   type scale and its own margins at (0,3,0), so these selectors match
   that weight and win on source order (this sheet loads last). */
.wd-empty-state .wd-empty-state__hero .wd-empty-state__kicker {
	margin-bottom: var(--wd-space-md);
}

.wd-empty-state .wd-empty-state__hero .wd-empty-state__title {
	margin-bottom: var(--wd-space-2xl);
}

/* ── Search form (restyles the wd_location_form shortcode) ── */

/* Lift the search block so the autocomplete panel drops over the
   trust line and chips. Mirrors the home.css hero fix. */
.wd-empty-state__search {
	position: relative;
	z-index: 2;
}

.wd-empty-state .wd-weather-form {
	display: block;
	margin: 0;
}

.wd-empty-state .wd-form-label {
	display: none;
}

.wd-empty-state .wd-form-group {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 520px;
}

.wd-empty-state .wd-form-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

/* Same look as the sticky site bar search (header-compact.css). */
.wd-empty-state .wd-form-input {
	width: 100%;
	min-height: var(--wd-control-h);
	padding: var(--wd-space-md);
	border: 1px solid var(--wd-chrome-border);
	border-radius: var(--wd-mkt-btn-radius);
	background: var(--wd-chrome-raised);
	color: var(--wd-text-on-green);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-sm);
}

.wd-empty-state .wd-form-input::placeholder {
	color: var(--wd-text-on-dark-muted);
}

.wd-empty-state .wd-form-input:focus {
	outline: none;
	border-color: var(--wd-search-focus-border);
	box-shadow: var(--wd-search-focus-ring);
}

.wd-empty-state .wd-form-button {
	width: auto;
	padding: var(--wd-space-sm) var(--wd-space-md);
	border: 1px solid var(--wd-cta);
	border-radius: var(--wd-mkt-btn-radius);
	background: var(--wd-cta);
	color: var(--wd-chrome);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-xs);
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.wd-empty-state .wd-form-button:hover,
.wd-empty-state .wd-form-button:focus {
	background: var(--wd-cta-hover);
	color: var(--wd-chrome);
}

/* Phones and tablets: the site bar search lives in the drawer at this width, sized 48px / 16px. */
@media (max-width: 1024px) {
	.wd-empty-state .wd-form-input,
	.wd-empty-state .wd-form-button {
		min-height: calc(var(--wd-control-h) + var(--wd-space-xs));
	}

	.wd-empty-state .wd-form-input {
		font-size: var(--wd-mkt-base);
	}
}

.wd-empty-state__examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wd-space-sm) var(--wd-space-md); margin-top: var(--wd-space-lg); font-size: var(--wd-font-size-sm); color: var(--wd-text-on-dark-muted); }
.wd-empty-state__examples a { color: var(--wd-text-on-green); text-decoration: underline; text-underline-offset: var(--wd-space-xs); }
.wd-empty-state__examples a:focus-visible { outline: var(--wd-page-header-focus-width) solid var(--wd-text-on-green); outline-offset: var(--wd-space-xs); }

/* ── Your places ──
   Favourites saved in this browser take this same row over (favourites.js
   swaps the contents), so the links keep the styling above and only the
   label, the remove controls and the Edit link are new. */
.wd-fav-places .wd-fav-places__label { display: inline-flex; align-items: center; gap: var(--wd-space-xs); }
.wd-fav-places .wd-fav-star { width: 1em; height: 1em; }
.wd-fav-places .wd-fav-star path { fill: var(--wd-amber); stroke: var(--wd-amber); }
.wd-fav-places .wd-fav-item { display: inline-flex; align-items: baseline; gap: var(--wd-space-xs); }
.wd-fav-places .wd-fav-edit,
.wd-fav-places .wd-fav-edit:hover,
.wd-fav-places .wd-fav-edit:focus { margin-left: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wd-text-on-dark-muted); font: inherit; font-size: var(--wd-font-size-xs); text-decoration: underline; text-underline-offset: var(--wd-space-xs); cursor: pointer; }
.wd-fav-places .wd-fav-remove,
.wd-fav-places .wd-fav-remove:hover,
.wd-fav-places .wd-fav-remove:focus { display: inline-flex; align-items: center; justify-content: center; width: var(--wd-space-lg); height: var(--wd-space-lg); padding: 0; border: 0; border-radius: 0; background: none; color: var(--wd-text-on-dark-muted); cursor: pointer; }
.wd-fav-places .wd-fav-remove[hidden] { display: none; }
.wd-fav-places .wd-fav-cross { width: 100%; height: 100%; }
.wd-fav-places .wd-fav-edit:focus-visible,
.wd-fav-places .wd-fav-remove:focus-visible { outline: var(--wd-page-header-focus-width) solid var(--wd-text-on-green); outline-offset: var(--wd-space-xs); }

@media (max-width: 480px) {
	.wd-fav-places { row-gap: var(--wd-space-md); }
}

/* ── GB watermark + spot dots ──
   Container must keep the watermark viewBox aspect (242.8:385.6),
   or the Mercator-calibrated dot percentages drift off the coast. */
.wd-empty-state__map-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.wd-empty-state__map {
	position: absolute;
	z-index: 0;
	top: 50%;
	/* Track the content column: overlap its right edge by ~80px on wide
	   screens instead of hugging the viewport; clamp to the old bleed
	   position once the column fills the viewport. */
	right: max(-30px, calc(50% - 504px));
	width: 320px;
	height: var(--wd-empty-map-height);
	transform: translateY(-50%);
	pointer-events: none;
}

.wd-empty-state__map-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(107, 201, 127, .34) 0%, rgba(107, 201, 127, .23) 60%, rgba(107, 201, 127, .12) 100%);
	-webkit-mask: url('/wp-content/mu-plugins/weatherduck/assets/img/inversion/gb-outline-watermark.svg') center / contain no-repeat;
	mask: url('/wp-content/mu-plugins/weatherduck/assets/img/inversion/gb-outline-watermark.svg') center / contain no-repeat;
}

.wd-empty-state__dot {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wd-cta);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 0 rgba(107, 201, 127, .55);
	animation: wdEsPulse 2.6s infinite;
}

.wd-empty-state__dot:nth-of-type(2) { animation-delay: .5s; }
.wd-empty-state__dot:nth-of-type(3) { animation-delay: .9s; }
.wd-empty-state__dot:nth-of-type(4) { animation-delay: 1.4s; }
.wd-empty-state__dot:nth-of-type(5) { animation-delay: 1.8s; }
.wd-empty-state__dot:nth-of-type(6) { animation-delay: 2.2s; }

.wd-empty-state__dot-label {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, .82);
}

@keyframes wdEsPulse {
	0%   { box-shadow: 0 0 0 0 rgba(107, 201, 127, .55); }
	70%  { box-shadow: 0 0 0 11px rgba(107, 201, 127, 0); }
	100% { box-shadow: 0 0 0 0 rgba(107, 201, 127, 0); }
}

/* Outlook cards: each explains one outlook and offers example places that
   open that tab directly. Only the place links are interactive; titles are
   plain headings and hairline tops echo the directory's band rows, so the
   cards no longer read as buttons. Link styling matches .wd-dir__place-group. */
.wd-empty-state__below { padding-block: var(--wd-space-3xl); background: var(--wd-bg-card); }
.wd-empty-state__outlooks { margin-bottom: var(--wd-space-3xl); scroll-margin-top: calc(var(--wd-space-3xl) * 3); }
.wd-empty-state__outlooks h2 { margin: 0; font-size: var(--wd-font-size-2xl); font-weight: 650; line-height: 1.3; letter-spacing: var(--wd-mkt-h2-tracking); }
.wd-empty-state__outlooks-intro { margin: var(--wd-space-sm) 0 0; max-width: 80ch; font-size: var(--wd-font-size-sm); line-height: 1.65; color: var(--wd-text-secondary); }
.wd-empty-state__outlook-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--wd-space-3xl); margin-top: var(--wd-space-xl); }
.wd-empty-state__outlook { display: flex; align-items: flex-start; gap: var(--wd-space-lg); padding: var(--wd-space-lg) var(--wd-space-sm); border-top: 1px solid var(--wd-border); }
.wd-empty-state__outlook-icon { display: block; width: var(--wd-space-3xl); height: var(--wd-space-3xl); object-fit: contain; flex: none; }
.wd-empty-state__outlook-body { flex: 1; min-width: 0; }
.wd-empty-state__outlook-body h3 { margin: 0; font-size: var(--wd-font-size-md); font-weight: 650; line-height: 1.35; color: var(--wd-text-primary); }
.wd-empty-state__outlook-body p { margin: var(--wd-space-xs) 0 0; font-size: var(--wd-font-size-sm); line-height: 1.5; color: var(--wd-text-secondary); }
.wd-empty-state__outlook-places { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--wd-space-sm); }
.wd-empty-state__outlook-body p.wd-empty-state__outlook-places { margin-top: var(--wd-space-sm); }
.wd-empty-state__outlook-places span { font-size: var(--wd-font-size-sm); color: var(--wd-text-secondary); }
.wd-empty-state__outlook-places a { display: inline-flex; align-items: center; min-height: calc(var(--wd-control-h) - var(--wd-space-md)); padding: var(--wd-space-xs); color: var(--wd-green); font-size: var(--wd-font-size-md); line-height: 1.35; text-decoration: underline; text-decoration-color: var(--wd-border-strong); text-underline-offset: var(--wd-space-xs); }
.wd-empty-state__outlook-places a:hover { text-decoration-color: var(--wd-green); background: var(--wd-green-light); }
.wd-empty-state__outlook-places a:focus-visible { outline: var(--wd-page-header-focus-width) solid var(--wd-green); outline-offset: var(--wd-space-xs); }

@media (prefers-reduced-motion: reduce) {
	.wd-empty-state__dot { animation: none; }
}

/* ── Responsive ── */
@media (min-width: 1025px) {
	.wd-empty-state .wd-empty-state__hero.wd-page-header {
		min-height: calc(var(--wd-empty-map-height) + var(--wd-space-2xl) * 2);
		padding-block: var(--wd-mkt-hero-y);
		display: flex;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.wd-empty-state__below { padding-block: var(--wd-space-2xl); }
	.wd-empty-state__outlook-options { column-gap: var(--wd-space-xl); }
	.wd-empty-state__outlook { gap: var(--wd-space-sm); padding-inline: var(--wd-space-xs); }
	.wd-empty-state__map {
		width: 260px;
		height: 413px;
		right: -70px;
		opacity: .85;
	}

	/* The text column spans the full width here, so every dot lands
	   behind copy on some phone width. The watermark stays; dots go. */
	.wd-empty-state__dot {
		display: none;
	}
}

@media (max-width: 480px) {
	.wd-empty-state .wd-empty-state__hero .wd-empty-state__kicker {
		margin-bottom: var(--wd-space-sm);
	}

	.wd-empty-state .wd-empty-state__hero .wd-empty-state__title {
		margin-bottom: var(--wd-space-xl);
	}

	.wd-empty-state__map {
		width: 220px;
		height: 350px;
		right: -70px;
		opacity: .75;
	}

	.wd-empty-state .wd-form-group {
		flex-direction: column;
		max-width: 100%;
	}

	.wd-empty-state .wd-form-input,
	.wd-empty-state .wd-form-button {
		width: 100%;
	}

	.wd-empty-state__outlooks h2 { font-size: var(--wd-font-size-xl); }
	.wd-empty-state__outlook-options { grid-template-columns: 1fr; }
	.wd-empty-state__outlook { gap: var(--wd-space-lg); }
}