/* Weather Smart – Air Quality widget styles.
 * Same design tokens/shapes as Rain Radar's radar.css (sharp corners for
 * cards, pills for chips, circles for icon buttons) for visual consistency
 * across the whole widget family -- kept as its own copy since there's no
 * shared module system between plugins. */

:root {
	--wsm-blue:         #2563eb;
	--wsm-blue-dark:    #1d4ed8;
	--wsm-text:         #1e293b;
	--wsm-text-muted:   #4a5568;
	--wsm-text-soft:    #718096;
	--wsm-surface:      #ffffff;
	--wsm-surface-alt:  #f1f5f9;
	--wsm-surface-alt-hover: #e2e8f0;
	--wsm-border:       #e2e8f0;
	--wsm-past:         #c2ccd8; /* already measured */
	--wsm-future:       #a9caf7; /* still only forecast -- kept clearly apart
	                                  from --wsm-past, since the colour change
	                                  is now the only thing marking "now" */
	--wsm-boundary:     #94a3b8; /* midnight */
	--wsm-now:          #16a34a; /* measured / forecast divider */
	--wsm-surface-map:  #eef2f5;
	--wsm-radius-pill:  999px;
	/* Rounded again, deliberately (2026-09-01) -- matching radar.css, which
	   carries the full reasoning. Short version: corners were flattened to 0
	   when the widget mixed unrelated radii and zero was the easiest value to
	   be consistent about; the Material 3 timeline is rounded throughout, so
	   sharp panels around it now read as the odd element. One scale, applied
	   everywhere, so the original inconsistency complaint stays fixed. */
	--wsm-radius-btn:   12px; /* icon buttons */
	--wsm-radius-card:  14px; /* legend, dropdown, popover, toast */
	--wsm-radius-map:   14px; /* the map panel itself */
	--wsm-radius-outer: 18px; /* the widget shell */
	--wsm-shadow-float: 0 1px 4px rgba(0, 0, 0, .12);
	--wsm-shadow-pop:   0 4px 16px rgba(0, 0, 0, .18);
	--wsm-ease:         .15s ease;
}

.wsm-wrap {
	position:      relative;
	display:       flex;
	flex-direction: column;
	width:         100%;
	min-height:    280px;
	overflow:      hidden;
	border-radius: var( --wsm-radius-outer );
	margin:        1.5em 0;
	background:    var( --wsm-surface ); /* white like the rows above and
	                                       below -- the map is an inset panel
	                                       now, and the old map-grey showed as
	                                       a band beside it */
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Host-theme shield (2026-09-01). This plugin renders inside whatever
	   markup the site's theme wraps post content in -- on the live site that
	   is `.entry.themeform`, which sets `line-height: 1.6em` (a COMPUTED
	   24px that then inherits into every descendant), plus `font-weight:300`,
	   `color:#666` and its own font family. Our labels are 11px, so a
	   24px inherited line box silently changed their height and spacing, and
	   nothing in this stylesheet said otherwise. Declaring these at the root
	   stops the theme from reaching in; individual small labels below also
	   pin their own line-height so no future theme can either. */
	line-height: 1.45;
	font-weight: 400;
	color:       var( --wsm-text );
}

/* Inset so its own rounding shows, and so the shell's corners are never drawn
 * by a WebGL canvas -- a GPU-composited surface can ignore an ancestor's
 * border-radius clip at the exact edge it touches. The map no longer reaches
 * that edge. */
.wsm-map-area {
	position: relative;
	flex:     1 1 auto;
	min-height: 0;
	overflow: hidden;
	margin:   0 10px;
	border-radius: var( --wsm-radius-map );
}

.wsm-map {
	width:  100%;
	height: 100%;
	flex:   1 1 auto;
	min-height: 0;
}

.wsm-loading,
.wsm-unavailable {
	position:        absolute;
	inset:           0;
	z-index:         10;
	background:      var( --wsm-surface-map );
	display:         flex;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         1.5em;
	color:           var( --wsm-text-muted );
	font-size:       .9375rem;
}

.wsm-spinner {
	width:        34px;
	height:       34px;
	border:       3px solid rgba(45, 55, 72, .15);
	border-top-color: var( --wsm-blue );
	border-radius: 50%;
	animation:    wsm-spin .8s linear infinite;
}

@keyframes wsm-spin { to { transform: rotate(360deg); } }

.wsm-error {
	padding:       .6em 1em;
	border-left:   4px solid #d63638;
	background:    #fff8f8;
	color:         #d63638;
	font-size:     .875rem;
	border-radius: 0 4px 4px 0;
	margin:        1em 0;
}

/* -------------------------------------------------------------------------
 * Search bar -- own row above the map, same pattern as Rain Radar
 * ------------------------------------------------------------------------- */
.wsm-search-bar {
	position:        relative;
	flex:            0 0 auto;
	display:         flex;
	align-items:     center;
	gap:             8px;
	padding:         8px 10px;
	background:      var( --wsm-surface );
}

.wsm-search-box {
	position: relative;
	flex:     1 1 auto;
	max-width: 320px;
}

.wsm-search-input {
	width:           100%;
	box-sizing:      border-box;
	appearance:         none;
	-webkit-appearance: none;
	background:      var( --wsm-surface-alt );
	border:          none;
	border-radius:   var( --wsm-radius-pill );
	padding:         8px 14px;
	font-size:       .8125rem;
	color:           var( --wsm-text );
	transition:      background-color var( --wsm-ease );
}

.wsm-search-input:hover  { background: var( --wsm-surface-alt-hover ); }
.wsm-search-input:focus  { background: var( --wsm-surface ); outline: 2px solid var( --wsm-blue ); outline-offset: 1px; }

.wsm-search-results {
	position:      absolute;
	top:           calc(100% + 4px);
	left:          0;
	right:         0;
	background:    var( --wsm-surface );
	border-radius: var( --wsm-radius-card );
	box-shadow:    var( --wsm-shadow-pop );
	max-height:    220px;
	overflow-y:    auto;
	display:       none;
	z-index:       4;
}

.wsm-search-results.is-open { display: block; }

.wsm-search-item {
	padding:    8px 12px;
	font-size:  .8125rem;
	cursor:     pointer;
	border-bottom: 1px solid #f1f1f1;
}

.wsm-search-item:last-child { border-bottom: none; }
.wsm-search-item:hover      { background: #f5f8ff; }

.wsm-icon-btn {
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border:          none;
	border-radius:   var( --wsm-radius-btn );
	width:           34px;
	height:          34px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	box-shadow:      var( --wsm-shadow-float );
	font-size:       15px;
	line-height:     1;
	flex-shrink:     0;
	transition:      background-color var( --wsm-ease ), transform var( --wsm-ease );
}

.wsm-icon-btn:hover  { background: var( --wsm-surface ); }
.wsm-icon-btn:active { transform: scale(.92); }
.wsm-icon-btn svg    { color: var( --wsm-blue ); }

.wsm-search-bar .wsm-icon-btn { background: var( --wsm-surface-alt ); backdrop-filter: none; box-shadow: none; }
.wsm-search-bar .wsm-icon-btn:hover { background: var( --wsm-surface-alt-hover ); }

.wsm-geo-status {
	position:        absolute;
	top:             100%;
	left:            10px;
	right:           10px;
	margin-top:      6px;
	z-index:         5;
	background:      rgba(30, 41, 59, .92);
	color:           #fff;
	font-size:       .75rem;
	padding:         6px 12px;
	border-radius:   var( --wsm-radius-card );
	opacity:         0;
	pointer-events:  none;
	transform:       translateY(-4px);
	transition:      opacity .2s ease, transform .2s ease;
}

.wsm-geo-status.is-visible { opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------------------
 * Layer-loading badge -- small, non-blocking corner badge shown only while
 * the currently-selected tile layer is still fetching (mirrors Rain Radar's
 * .rdr-rain-loading badge/pattern, radar.js -- ported here so air-quality,
 * pollen, and UV finally show *something* instead of an empty map while
 * tiles load in).
 * ------------------------------------------------------------------------- */
.wsm-layer-loading {
	position:        absolute;
	top:             10px;
	left:            10px;
	z-index:         3;
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border-radius:   var( --wsm-radius-pill );
	padding:         5px 10px;
	font-size:       .6875rem;
	color:           var( --wsm-text-muted );
	box-shadow:      var( --wsm-shadow-float );
	opacity:         0;
	visibility:      hidden;
	transition:      opacity .15s ease;
}

.wsm-layer-loading.is-visible {
	opacity:    1;
	visibility: visible;
}

.wsm-layer-loading-spinner {
	width:            11px;
	height:           11px;
	border:           2px solid rgba(45, 55, 72, .2);
	border-top-color: var( --wsm-blue );
	border-radius:    50%;
	animation:        wsm-spin .8s linear infinite;
	flex-shrink:      0;
}

/* -------------------------------------------------------------------------
 * On-map overlays: legend (top-right), zoom (bottom-right), attribution
 * (bottom-left) -- compact, small enough to float over the map itself.
 * ------------------------------------------------------------------------- */
.wsm-legend {
	position:        absolute;
	top:             10px;
	right:           10px;
	z-index:         3;
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border-radius:   var( --wsm-radius-card );
	padding:         9px 11px;
	box-shadow:      var( --wsm-shadow-float );
	font-size:       .6875rem;
	color:           var( --wsm-text );
}

.wsm-legend-item {
	display:     flex;
	align-items: center;
	gap:         6px;
	padding:     3px 0;
	white-space: nowrap;
}

.wsm-legend-swatch {
	width:         10px;
	height:        10px;
	flex-shrink:   0;
}

/* One segmented control rather than two loose buttons -- the pair is a single
 * idea, and every map product draws it joined. */
.wsm-zoom-group {
	position:    absolute;
	right:       10px;
	bottom:      10px;
	z-index:     3;
	display:     flex;
	flex-direction: column;
	gap:         0;
	border-radius: var( --wsm-radius-btn );
	overflow:    hidden;
	box-shadow:  var( --wsm-shadow-float );
}

.wsm-zoom-group .wsm-icon-btn {
	border-radius: 0;
	box-shadow:    none;
}

.wsm-zoom-group .wsm-icon-btn + .wsm-icon-btn {
	border-top: 1px solid rgba(0, 0, 0, .09);
}

.wsm-zoom-btn { font-size: 16px; font-weight: 700; }

.wsm-attrib-wrap {
	position: absolute;
	left:     10px;
	bottom:   10px;
	z-index:  3;
}

.wsm-attribution-btn { color: var( --wsm-blue ); font-weight: 700; font-size: 16px; }

.wsm-attribution-panel {
	position:      absolute;
	left:          0;
	bottom:        calc(100% + 8px);
	z-index:       5;
	background:    var( --wsm-surface );
	border-radius: var( --wsm-radius-card );
	box-shadow:    0 4px 16px rgba(0, 0, 0, .2);
	padding:       12px 14px;
	font-size:     .75rem;
	color:         var( --wsm-text );
	width:         max-content;
	max-width:     min(280px, calc(100vw - 40px));
	display:       none;
}

.wsm-attribution-panel.is-open { display: block; }
.wsm-attribution-panel ul { margin: 8px 0 0; padding: 0 0 0 16px; }
.wsm-attribution-panel li { margin-bottom: 4px; }
.wsm-attribution-panel a  { color: var( --wsm-blue ); }

/* -------------------------------------------------------------------------
 * Bottom control row: pollutant picker + lead-hour scrubber
 * ------------------------------------------------------------------------- */
/* The scrubber is the only thing in this row (2026-09-01). The variable
 * picker used to share it and the two genuinely did not fit -- the picker's
 * labels are full plain-language sentences, deliberately so after real
 * feedback that bare codes meant nothing, which left the scrubber a squeezed
 * remainder. Stacking them into two rows was tried first and looked worse:
 * a lone dropdown in an empty row reads as a stray form field. The picker
 * moved onto the map instead, where a layer control belongs. */
.wsm-controls {
	flex:            0 0 auto;
	background:      var( --wsm-surface );
	padding:         8px 12px 10px;
	display:         flex;
	align-items:     center;
	gap:             10px;
}

/* Layer picker -- an on-map control, top-left, with its own menu.
 *
 * Shared by BOTH selectors that exist: Air Quality's pollutants and Pollen's
 * species. The class name says "pollutant" only because Air Quality shipped
 * first; it is the same control in both.
 *
 * The native <select> this replaced could not be styled where it mattered:
 * its dropdown is drawn by the operating system, so long plain-language
 * labels opened as a bare system list with nothing of the widget about it.
 * The panel below is ours, so it matches -- and the option rows can show the
 * short name and the full explanation together, which a native list could
 * never do. */
/* Stretched to the full height of the map area on purpose, so the menu below
 * can size itself against it. The map area clips its own rounded corners with
 * overflow:hidden, which means a menu taller than the map is silently cut off
 * -- caught in a render check, not in review. Bounding the menu to the space
 * that actually exists makes that impossible at any configured map height,
 * and it scrolls internally instead. pointer-events are handed back only to
 * the parts that are really there, so this full-height box never swallows a
 * drag aimed at the map. */
.wsm-layer-pick {
	position: absolute;
	top:      10px;
	left:     10px;
	bottom:   10px;
	z-index:  4; /* above the legend, since its menu overlaps the map */
	display:  flex;
	flex-direction: column;
	align-items: flex-start;
	gap:      6px;
	pointer-events: none;
}

/* Button fixed, menu takes what is left and scrolls -- so the menu is bounded
 * by the space that genuinely exists, at any configured map height. An
 * earlier attempt stretched this box and left the menu absolutely positioned
 * at top:100%, which then resolved against the full height and dropped the
 * menu clean out of the map. Flex removes the arithmetic entirely. */
.wsm-layer-btn  { flex: 0 0 auto; pointer-events: auto; }
.wsm-layer-menu { flex: 0 1 auto; min-height: 0; pointer-events: auto; }

.wsm-layer-btn {
	display:         flex;
	align-items:     center;
	gap:             6px;
	background:      rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	border:          none;
	border-radius:   var( --wsm-radius-btn );
	padding:         8px 12px;
	box-shadow:      var( --wsm-shadow-float );
	cursor:          pointer;
	font:            inherit;
	line-height:     1.2;
	transition:      background var( --wsm-ease );
}

.wsm-layer-btn:hover { background: #fff; }
.wsm-layer-btn:focus-visible { outline: 2px solid var( --wsm-blue ); outline-offset: 2px; }

.wsm-layer-name {
	font-size:   .8125rem;
	font-weight: 600;
	line-height: 1.2;
	color:       var( --wsm-text );
	white-space: nowrap;
}

.wsm-layer-caret {
	color: var( --wsm-text-soft );
	flex:  0 0 auto;
	transition: transform var( --wsm-ease );
}

.wsm-layer-pick.is-open .wsm-layer-caret { transform: rotate(180deg); }

.wsm-layer-menu {
	min-width:     220px;
	max-width:     min(320px, 70vw);
	overflow-y:    auto;
	overscroll-behavior: contain; /* scrolling the list must not pan the map */
	background:    var( --wsm-surface );
	border-radius: var( --wsm-radius-card );
	box-shadow:    var( --wsm-shadow-pop );
	padding:       5px;
	display:       flex;
	flex-direction: column;
	gap:           2px;
}

.wsm-layer-menu[hidden] { display: none; }

/* Each row carries the short name AND the full wording. The short name is
 * what the map shows once chosen; the sentence is why it was written in plain
 * language in the first place. A native option list could only ever show one
 * of the two. */
.wsm-layer-opt {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1px;
	width:          100%;
	background:     transparent;
	border:         none;
	border-radius:  10px;
	padding:        7px 9px;
	cursor:         pointer;
	text-align:     left;
	font:           inherit;
	transition:     background var( --wsm-ease );
}

.wsm-layer-opt:hover { background: var( --wsm-surface-alt ); }
.wsm-layer-opt:focus-visible { outline: 2px solid var( --wsm-blue ); outline-offset: -2px; }

.wsm-layer-opt.is-on { background: var( --wsm-surface-alt ); }
.wsm-layer-opt.is-on .wsm-layer-opt-short { color: var( --wsm-blue ); }

.wsm-layer-opt-short {
	font-size:   .8125rem;
	font-weight: 600;
	line-height: 1.25;
	color:       var( --wsm-text );
}

.wsm-layer-opt-full {
	font-size:   .6875rem;
	font-weight: 400;
	line-height: 1.35;
	color:       var( --wsm-text-soft );
	white-space: normal;
}

/* Lead-hour scrubber -- Material 3 track, bold day labels, two-tone rail
 * (2026-09-01 redesign, chosen from three live prototypes).
 *
 * What was wrong before: the original version labelled all 17 lead hours
 * along one axis, which cannot fit at phone width by simple arithmetic --
 * ~25px of track per label for text needing ~35px -- so labels physically
 * overlapped, and the first mitigation (hiding the whole time row under
 * 480px) removed information instead of fixing the layout.
 *
 * Three things carry the load now, each answering exactly one question:
 *   - the badge rides the thumb and answers "which exact moment"
 *   - one bold label per day, centred over that day's own span, answers
 *     "which day" -- at most 5 labels, so they cannot collide
 *   - a hard line at every midnight marks the boundary itself
 *
 * That last one matters more than it looks. A day label is ~50px of text
 * while a boundary is a single point, so whichever edge of the text you
 * align to it, the eye still reads the text's middle and sees a mismatch.
 * Giving the boundary its own line frees the label to sit where it reads
 * best, and the alignment stops being approximate. */
.wsm-lead-track {
	flex:           1;
	position:       relative;
	padding-top:    40px; /* clears the badge AND the thumb, which rises 7px
	                         above the rail (11px while dragging) -- at 26px
	                         the two overlapped, which is what put the slider
	                         on top of the green badge on the live site */
	padding-bottom: 28px; /* rail -> hairline -> day label, with air between */
}

/* ---- the rail, split at "now" ----
 * Left of the divider is already measured, right of it is still only
 * forecast -- a distinction the widget previously never showed anywhere.
 * There is deliberately NO fill-to-thumb here: filling from the left means
 * "progress so far", which is a media-player idea. Nobody progresses through
 * a forecast; they pick a moment in it. */
.wsm-lead-rail {
	position:      relative;
	height:        16px;
	border-radius: 8px;
	background:    var( --wsm-future );
	overflow:      hidden;
}

.wsm-rail-past {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0; /* real value set by paintLeadMarks(), in px */
	background: var( --wsm-past );
}

/* ---- marks drawn over the rail ---- */
.wsm-lead-marks {
	position: absolute;
	left: 0; right: 0;
	top: 40px;
	height: 16px;
	pointer-events: none;
}

/* Material 3 marks a discrete slider's real stops; these are the lead hours
 * the manifest actually carries. */
.wsm-mark-dot {
	position:  absolute;
	top:       50%;
	width:     3px;
	height:    3px;
	border-radius: 50%;
	background: var( --wsm-surface );
	opacity:   .5;
	transform: translate(-50%, -50%);
}

.wsm-mark-day { /* midnight -- the element that owns the day boundary */
	position:  absolute;
	top:       50%;
	width:     2px;
	height:    26px; /* taller than the rail on purpose -- a divider flush with
	                    the rail reads as part of it, not as a boundary */
	border-radius: 1px;
	background: var( --wsm-boundary );
	transform: translate(-50%, -50%);
}

/* No separate "now" line any more (2026-09-01). One was drawn here, and it
 * landed exactly where the thumb rests by default -- so the very first thing
 * every visitor saw was a blue handle and a green line stacked on top of each
 * other, reading as a rendering fault. The boundary was already being stated
 * twice over anyway: the rail changes colour at that point, and the badge
 * turns green when the handle is on it. The colour change is the marker;
 * the contrast below is tuned so it reads on its own. */
.wsm-mark-now { display: none; }

/* ---- the slider itself: invisible track, Material 3 bar thumb ----
 * The native input is kept purely for what it is genuinely good at --
 * keyboard support, focus handling, touch behaviour -- with its own track
 * made transparent so the styled rail above shows through. Only the thumb
 * is painted. */
.wsm-lead-slider {
	position:   absolute;
	left: 0; right: 0;
	top:        40px;
	width:      100%;
	height:     16px;
	margin:     0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	outline:    none;
	cursor:     pointer;
}

.wsm-lead-slider::-webkit-slider-runnable-track { height: 16px; background: transparent; }
.wsm-lead-slider::-moz-range-track            { height: 16px; background: transparent; }

.wsm-lead-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:  4px; /* markX()'s THUMB_W must match this */
	height: 30px;
	margin-top: -7px; /* centre the 30px bar on the 16px track */
	border-radius: var( --wsm-radius-pill );
	background: var( --wsm-blue-dark );
	box-shadow: 0 0 0 3px var( --wsm-surface );
	cursor: pointer;
	transition: height var( --wsm-ease ), width var( --wsm-ease );
}

.wsm-lead-slider::-moz-range-thumb {
	width:  4px;
	height: 30px;
	border: none;
	border-radius: var( --wsm-radius-pill );
	background: var( --wsm-blue-dark );
	box-shadow: 0 0 0 3px var( --wsm-surface );
	cursor: pointer;
}

/* M3: the handle slims and grows while held, so a fingertip doesn't hide it */
.wsm-lead-slider:active::-webkit-slider-thumb { width: 2px; height: 38px; margin-top: -11px; }
.wsm-lead-slider:active::-moz-range-thumb     { width: 2px; height: 38px; }

.wsm-lead-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var( --wsm-surface ), 0 0 0 5px var( --wsm-blue ); }
.wsm-lead-slider:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var( --wsm-surface ), 0 0 0 5px var( --wsm-blue ); }

/* ---- badge ---- */
.wsm-lead-badge {
	line-height: 1.3;
	position:    absolute;
	top:         0;
	left:        0; /* real value set by positionLeadBadge(), in px */
	transform:   translateX(-50%);
	background:  var( --wsm-blue );
	color:       #fff;
	font-size:   .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums; /* no width jitter while dragging */
	padding:     3px 9px;
	border-radius: var( --wsm-radius-pill );
	white-space: nowrap;
	pointer-events: none; /* must never eat a drag aimed at the slider */
}

.wsm-lead-badge::after { /* pointer tying the badge to the thumb */
	content:   '';
	position:  absolute;
	top:       100%;
	left:      50%;
	transform: translateX(-50%);
	border:    4px solid transparent;
	border-top-color: var( --wsm-blue );
}

.wsm-lead-badge.is-now { background: var( --wsm-now ); }
.wsm-lead-badge.is-now::after { border-top-color: var( --wsm-now ); }

/* ---- day labels ---- */
.wsm-lead-days {
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 18px;
	pointer-events: none;
}

/* No transform here on purpose -- buildDayMarkersHtml() sets a per-label
 * translateX(-X%) inline matching its own left:X%, which keeps edge labels
 * inside the track. */
.wsm-lead-day {
	position:       absolute;
	top:            0;
	font-size:      .6875rem;
	font-weight:    700;
	line-height:    1; /* never inherit the host theme's line box */
	letter-spacing: .05em;
	text-transform: uppercase;
	color:          var( --wsm-text );
	white-space:    nowrap;
}

/* Hairline tying each label to its own band. It sits at the same percentage
 * of the label's width as the label's anchor, so it points exactly at the
 * band centre no matter which way the label had to shift to stay on screen. */
.wsm-lead-day::before {
	content:   '';
	position:  absolute;
	left:      var( --wsm-hair, 50% );
	bottom:    100%;
	width:     1px;
	height:    6px;
	background: var( --wsm-boundary );
	opacity:   .5;
}

/* First degradation step when labels would collide: the day name alone is
 * about half the width, and is the half that matters. */
.wsm-lead-days.is-compact .wsm-lead-date { display: none; }
	line-height:    1;

.wsm-lead-date {
	font-weight:    500;
	letter-spacing: .02em;
	text-transform: none;
	color:          var( --wsm-text-soft );
	margin-left:    5px;
}

/* -------------------------------------------------------------------------
 * Mobile.
 *
 * Note what is deliberately NOT here any more: the old breakpoint had to
 * HIDE tick labels outright below 480px because they overlapped. Nothing
 * needs hiding at any width now -- the day labels top out at five and the
 * exact time lives in the badge, so every lead hour stays reachable on the
 * narrowest phone.
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Nothing to reflow here any more: the picker is on the map and the
	   scrubber has its row to itself at every width. */
	.wsm-layer-pick { padding: 6px 10px; }
}

@media (max-width: 480px) {
	.wsm-legend     { display: none; }
	.wsm-search-box { max-width: none; }
}

/* -------------------------------------------------------------------------
 * Host-theme defence for form controls (2026-09-01)
 *
 * WordPress themes routinely reset buttons and inputs, and this site's does:
 *
 *     .themeform button,
 *     .themeform input[type="text"] { border-radius: 0; box-sizing: border-box; }
 *
 * `.themeform button` is one class plus one element (0,1,1); a bare
 * `.wsm-icon-btn` is one class (0,1,0), so the THEME WINS and every button
 * in this widget rendered square while the surrounding panels stayed rounded.
 * That is exactly the "buttons are still square" report, and it is invisible
 * from inside this stylesheet -- nothing here is wrong, it is simply outranked.
 *
 * Re-asserted below at two classes (0,2,0), which outranks any
 * single-class-plus-element theme rule. Scoped to this widget's own root so
 * nothing leaks outward into the host page.
 * ------------------------------------------------------------------------- */
.wsm-wrap .wsm-icon-btn,
.wsm-wrap .wsm-layer-pick {
	border-radius: var( --wsm-radius-btn );
	box-sizing:    border-box;
}

.wsm-wrap .wsm-search-input {
	border-radius: var( --wsm-radius-pill );
	box-sizing:    border-box;
}

/* Segments inside the joined zoom control stay square on purpose -- three
 * classes (0,3,0) so this beats the rule above rather than fighting it. */
.wsm-wrap .wsm-zoom-group .wsm-icon-btn {
	border-radius: 0;
}