@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,.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-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.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 { 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); }
}
@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;
}
/* ── 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(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.wd-no .wd-no__chart { height: var(--wd-night-chart-height-mobile); }
	.wd-no .wd-no__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.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 {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

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


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

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

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

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

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

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


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

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


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

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

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

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

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

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

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