/* weather.css — styles for the weather card CONTENTS ONLY (collapsed
 * summary row, popup, daily/hourly views, radar). No page-level chrome
 * here — the card wrapper itself is the wedding app's own .settings-card
 * (pwa-style.css), and the page shell (header/nav/background) is
 * whatever page loads this (weather.html). This file used to include a
 * body/.container.inner block reintroducing a GAOS-style standalone-page
 * layout; removed — that's not this file's job. */

/* .wx-tooltip / .wx-tooltip-content - moved here from lookup.css. This isn't
 * a weather-specific concept, but weather is the ONLY page that
 * actually uses it (confirmed by grepping lookup.php and
 * transport.php for "tooltip" - zero matches in either), so it was a
 * hidden cross-file dependency: nothing in weather's own files hinted
 * that this class was defined elsewhere, which cost real diagnostic
 * time earlier in this project chasing a bug whose actual cause was
 * invisible from here. The matching rules should be removed from
 * lookup.css once this lands, to avoid keeping two copies in sync.
 */
.wx-tooltip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.wx-tooltip .wx-tooltip-content {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 100%;
	left: 0;
	display: inline-block;
	width: max-content;
	max-width: 60vw;
	background-color: #333;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
	z-index: 10;
	pointer-events: none;
}
.wx-tooltip:focus .wx-tooltip-content, .wx-tooltip:active .wx-tooltip-content {
	visibility: visible;
	opacity: 1;
}

		.weather-summary-card {
			background-color: rgba(255, 255, 255, 0.08) !important;
		}
		.weather-summary-card:active {
			background-color: rgba(255, 255, 255, 0.22) !important;
		}
		@media (hover: hover) {
			.weather-summary-card:hover {
				background-color: rgba(255, 255, 255, 0.22) !important;
			}
		}
		.weather-alert {
			position: relative;
		}
		.weather-alert .alert-summary {
			padding: 20px;
			color: white;
		}
		.weather-alert h2, .weather-alerts h3 {
			margin: 0 0 10px 0;
			font-size: 18px;
			display: flex;
			align-items: center;
		}
		.weather-alert .fa-solid {
  			margin-top: 0px;
			margin-right: 10px;
			color: white;
		}
		 .weather-alert .wi {
		 	margin: 0 10px 4px 0;
			color: white;
		 }
		.weather-alert .toggle-button {
			position: absolute;
  			right: 5px;
  			top: 18px;
			background: white;
  			color: black;
		}
		.weather-alert .warning { 
			background-color: #d8232a;
			background-image: linear-gradient(#d8232a, #a6171d);
		}
		.weather-alert .watch { 
			background-color: #ffdc00;
			background-image: linear-gradient(#ffdc00, #e0a800);
			color: #5c4200;
		}
		 .weather-alert .watch .wi, .weather-alert .watch .fa-solid{
		 	color: #5c4200;
		 }
		.weather-alert .advisory { 
			background-color: #8a6b9e;
			background-image: linear-gradient(#8a6b9e, #6b4f7e);
		}
		.weather-alert .noalerts { 
			background-color: rgba(200, 200, 200, 0.2);
			/* This translucent gray was designed to sit on the old dark
			   navy popup — the .alert-summary rule above sets white
			   text globally, which worked fine there. Now that the
			   card underneath is the lighter tan, white-on-this-gray
			   has nowhere near enough contrast. The other severities
			   (warning/watch/advisory) have their own solid,
			   appropriately-contrasted colors already, so this is
			   specifically a .noalerts fix, not a global one. */
			color: #333;
		}
		.weather-alert .noalerts .fa-solid {
			color: #333;
		}
		.weather-alerts .weather-alert:first-of-type .alert-summary {
  			border-radius: 0;
		}
		.alert-summary {
			border-bottom: 1px solid black;
		}
		.alert-summary.noalerts  {
			border-bottom: none;
		}
		.alert-details {
			padding: 10px 20px;
			background-color: rgba(200, 200, 200, 0.2);
		}
		.weather-alerts .weather-alert:last-of-type .alert-details,.weather-alerts .weather-alert:last-of-type .alert-summary {
  			border-radius: 0;
		}
		.weather-alerts .weather-alert:only-of-type .alert-summary {
		  border-radius: 0;
		}
		.alert-details p {
			margin: 0;
		}
		 .alert-details a {
		 	color: #fff;
		 }
		.weather-card {
        	border-radius: 15px;
       		color: #333;
        	text-align: center;
			margin: 0 0 20px 0;
			width: 100%;
    	}
		.weather-card p, .hourly-entry p { 
			margin: 10px 0 0 0;
		}
    	.city-name {
        	font-size: 30px;
        	font-weight: bold;
			line-height: 30px;
    	}
		.city-name .fa-arrow-up-right-from-square{
			font-size: 13px;
  			color: #777;
			margin: 0;
		}
		.city-time {
			margin-bottom:5px !important;
		}
		.eclipse-data {
			background: #c1cbe1;
	  		margin: 10px;
	  		padding: 5px;
	  		border-radius: 10px;
	  	}
		/* The solar eclipse row is 4 columns (icon + 3 data cells)
		   crammed into one row with no gap between them, unlike the
		   standard 2-column icon+value rows used everywhere else -
		   the shared table.details td padding:0 rule left nothing
		   separating "Starts:", "Ends:", and "Obscuration:", so their
		   values wrapped straight into each other. */
		.eclipse-data table.details td:not(:first-child) {
			padding-left: 10px;
			vertical-align: middle;
			text-align: left;
		}
		.eclipse-data table.details td:first-child {
			vertical-align: middle;
			width: 25%;
		}
    	.temperature {
        	font-size: 35px;
        	font-weight: bold;
    	}
		.temperature span { 
			text-decoration: underline;
			text-decoration-thickness: 5px; 
		}
    	p.feels-like {
        	font-size: 14px;
        	color: #777;
			margin: 5px 0 10px 0;	
    	}
    	.description {
        	font-size: 18px;
        	color: #777;
    	}
    	.icon {
        	font-size: 40px;
       		width: 40px;
        	height: 40px;
        	display: inline-block;
    	}
		.forecast-container {
			display: flex;
			justify-content: space-between;
			gap: 7px;
			border-radius: 15px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			width:100%;
			overflow-x: auto;	
			margin: 0 ;
    	}
		@media only screen and (min-width: 500px) {
			.forecast-container {max-width:98%;}
			.weather-card {max-width:350px;}
		}
		.calendar {
			border: 1px solid #c1c1c1;
			border-radius: 5px;
			font-weight: normal;
			width: 85px;
			margin: 10px auto;
			padding-bottom: 5px;
			background:#f1f3f7;
			line-height: 1.5;
		}
		.calendar span.month {
			background-color: #EF2B4F;
			color: white;
			width: 100%;
			display: inline-block;
			padding: 3px 0 3px 0;
			text-transform: uppercase;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}
		.calendar span.date {
			font-size: 35px;
			color: #000;
			line-height: 45px;
		}
		.calendar span.day {
			color: #000;
			font-size: 14px;
			text-transform: uppercase;	
		}
		.forecast-day {
			flex: 1;
			min-width: 145px;
			text-align: center;
			padding: 5px 5px 10px 5px;
			/* Top corners removed everywhere .forecast-day is used
			   (Current view, Daily cards, Hourly pinned headers) —
			   whatever sits above it (toggle bar, calendar badge, etc.)
			   has square corners, so a rounded top edge here left a
			   gap for the background behind to show through. */
			border-radius: 0 0 10px 10px;
			/* Was #d0dae5 (light blue-gray). Several flat-color attempts
			   (--ast-global-color-10 cream, #e6d0bb tan, various grays/
			   greens/lavenders) either clashed with the outer white
			   background or read as too flat/dull/orange on their own.
			   Landed on #e6d0bb at partial opacity (found by live-
			   adjusting in DevTools against the white
			   .accordion-content.weather background below it) — the
			   alpha blend softens it into a muted dusty tan that
			   neither flat attempt hit. First try (54% alpha) was too
			   soft — made the moon icon (already a pale color) hard to
			   see again; 75% keeps enough of the tan's own depth to
			   avoid that. Wraps both the Current view's data AND every
			   daily forecast card. The two pinned hourly-view
			   sub-headers further down share this same value for
			   visual continuity with the card they scroll within —
			   updated alongside this. */
			background-color: rgba(230, 208, 187, 0.75); 
		}
    	.forecast-day h3 {
			padding: 5px 0 5px 0;
			font-size: 18px;
			color: #333;
			margin: 0;
    	}
    	.forecast-day img {
        	width: 60px;
        	height: 60px;
    	}
		.is_windy::after {
			content: "\f050";
			font-size: 20px;
			font-weight: bold;
  			margin-left: 5px;
			color: #9e9e9e;
		}
		.is_hot::after {
			content: "\f055";
			font-size: 20px;
  			margin-left: 5px;
			color: #d8232a;
		}
		.is_windy.is_hot::after {
			content: "\f050 \f055";
			font-size: 20px;
			color: #d8232a;
			margin-left: 0px;
		}
		.is_cold::after {
			content: "\f055";
			font-size: 20px;
  			margin-left: 5px;
			color: #528D97;
		}
		.is_windy.is_cold::after {
			content: "\f050 \f055";
			font-size: 20px;
			color: #528D97;
			margin-left: 0px;
		}
		.is_hurricane::after {
			content: "\f073";
			color: #d8232a;
			font-size: 35px;
			margin-left: 5px;
		}
		.max-min-thermometer {
		  display: flex;
		  flex-direction: column;
		  align-items: stretch;
		  gap: 2px;
		  margin: 10px 0;
		  width: 100%;
		}
		.temp-labels {
		  display: flex;
		  justify-content: space-between;
		  font-weight: bold;
		  font-size: 22px;
		  color: #555;
		  width: 100%;
		  margin: 0;        
		}
		.temp-labels .left {
		  text-align: left;   
		   margin-left: 2px;
		}
		.temp-labels .feels-like {
			font-size: 14px;
			color: #777;
			display: block;
			margin-top: -4px;
		}
		.temp-labels .right {
		  text-align: right;   
		  margin-right: 2px;
		}
		.thermometer-bar {
		  height: 12px;
		  border-radius: 10px;
		  background: gray; 
		  width: 100%;
		}
		.thermometer-bar-container {
		  position: relative;
		  width: 100%;
		  height: 12px;
		  overflow: visible;
		}
		.thermometer-bar {
		  height: 12px;
		  border-radius: 10px;
		  width: 100%;
		}
		.current-temp-dot {
		  position: absolute;
		  top: 50%;
		  transform: translate(-50%, -50%);
		  width: 10px;
		  height: 10px;
		  background: black;
		  border-radius: 50%;
		  z-index: 2;
		}
		.current-temp-dot.center {
		  transform: translate(-50%, -50%);
		}
		.current-temp-dot.left-edge {
		  transform: translate(0%, -50%);
		}
		.current-temp-dot.right-edge {
		  transform: translate(-100%, -50%);
		}	
    	.forecast-temps {
			color: #555;
			margin: 5px 0 5px 0;
    	}
		.forecast-temps .max {
			font-weight: bold;
			text-decoration: underline;
			text-decoration-thickness: 3px; 
			font-size: 17px;
		}
		.forecast-temps .min {
			text-decoration: underline;
			text-decoration-thickness: 3px; 
			font-size: 14px;
		}
		.forecast-description {
        	font-size: 14px;
        	color: #777;
			height: 65px;
			overflow-y: auto;
			padding: 5px;
			margin-top: 0;
			display: flex;
			flex-direction: column;
    	}
		.forecast-description > span {
			margin: auto 0;
		}
		.dst-change {
			text-align: center; 
			position:absolute; 
			top: 0px; 
			background: green; 
			width: 100%; 
			font-size:16px;
			padding:0 20px;
		}
		.wi {
			vertical-align: middle;
		}
		.wi-hot {
			color: #d8232a;
		}
		.wi-day-sunny, .wi-day-cloudy, .wi-day-windy {
		  	color: #e8af04;
		}
		 .wi-night-clear {
		 	color: #F6F1D5;
		 }
		.wi-day-cloudy-high, .wi-day-cloudy-gusts {
			color: #fff;
		}
		.wi-cloudy, .wi-night-alt-cloudy-high, .wi-night-alt-cloudy, .wi-cloudy-gusts, .wi-night-alt-cloudy-gusts {
	  		color: #9e9e9e;
		}	
		.wi-showers,.wi-sprinkle,.wi-rain,.wi-rain-mix {
		  color: #2196f3;
		}
		.wi-snow,.wi-sleet,.wi-snow-wind,.wi-hail, .wi-snow-wind {
		  color: #44b5c1;
		}
		.wi-fog {
  			color: #bdbdbd;
		}
		.wi-thunderstorm,.wi-storm-showers {
  			color: #607d8b;
		}
		.wi-strong-wind, .wi-na {
  			color: #757575;
		}
		.wi-lunar-eclipse {
			font-size: 50px;
			color: #8B0000; 
			text-shadow: 0 0 6px #FFB300, 0 0 12px #FFB300;
		}
		.wi-solar-eclipse {
			font-size: 35px;
    		color: #444;
    		text-shadow: 0 0 5px #FFB300;
		}
		.fa-earth-americas {
			color: #006994;
			font-size: 23px;
		}
		.moon-icon {
			color: #F6F1D5;
			font-size: 35px;
		}
		.southern {
    		transform: scaleX(-1);
    		display: inline-block; 
		}
		.harvest {
			color: #FFB347;
		}
		.bluemoon {
			color: #64c1e2;
		}
		.details {
			color: #777;
		}
		table.details, p.details, table.hourly-details {
			margin: 0 0 5px 0;
			font-size: 15px;
			/* Neither table had an explicit width before — each auto-sized
			   independently based on its OWN longest text content. Since
			   .details-icon-cell is a PERCENTAGE (40%) of whatever a given
			   table computes to, two tables with different actual widths
			   (this one has just "gusts"/"1025.6 hPa (Very High)"/etc.,
			   the short Rain/Wind table above the dial has much less
			   text) got different actual icon-column pixel widths — each
			   internally consistent, but misaligned with each other.
			   width:100% removes the content-dependence entirely, so
			   every .details table always matches its container's actual
			   width regardless of what text happens to be in it. */
			width: 100%;
		}
		table.hourly-details {
			margin: 25px 0 5px 0;
		}
		table.details td, table.hourly-details td {
			border: none;
  			padding: 0;
			vertical-align: middle;
		}
		/* Shared width for every icon-column cell, across BOTH the
		   Rain/Wind table and the main details table below it - this
		   is what actually guarantees the icon columns line up with
		   each other, both within a table (each row shares its
		   table's own column width automatically) and BETWEEN the two
		   separate tables (both using the same 40% keeps them
		   consistent with each other too, rather than each table
		   computing its own column width independently). */
		.details-icon-cell {
			width: 40%;
		}
		/* The wind dial's own cell only, not every row — the shared
		   table.details td rule just above forces padding:0 on every
		   cell, which is right for a single line of text but left the
		   dial (a much taller graphic) sitting flush against the rows
		   above/below it once it moved into a normal row instead of its
		   own spaced-out colspan row. table.details td.wind-dial-cell
		   (1 element + 2 classes) is needed to outweigh that shared
		   rule's own table.details td (1 element + 1 class) — the same
		   specificity trap already called out for .details-icon-cell
		   and tr.daily-icon-row above. */
		table.details td.wind-dial-cell {
			padding-top: 20px;
			padding-bottom: 20px;
		}
		 table.hourly-details td {
		 	height: 30px;
		 }
		table.details tr, table.hourly-details tr {
			background: transparent;
			color: #777;	
		}
		table.details tr {
			height: 32px;
		}
		/* Taller row for the icon+label rows (Visibility/UV/AQI's
		   MIN/MAX sub-label under the icon) - these need more height
		   than the standard 32px row to fit both lines with breathing
		   room. Height added to the whole row/cell, not as margin on
		   the label itself, so vertical-align:middle centers both
		   this row's cells symmetrically - a margin on just the label
		   would make ITS cell's content box taller than the dot's,
		   throwing off their relative centering instead.
		   table.details tr.daily-icon-row (not just .daily-icon-row)
		   - same specificity trap as .details-icon-cell earlier:
		   table.details tr is 1 class + 2 elements, which beats a
		   bare single-class selector regardless of source order. */
		table.details tr.daily-icon-row {
			height: 48px;
		}
		table.details sup {
			font-size:8px
		}
		.details .wi-raindrops {
  			font-size: 35px;
		}
		p.details .wi-raindrops, p.details .wi-snowflake{
			margin-right: 10px;
		}
		.details .wi-umbrella {
  			font-size: 20px;
		}
		.details .wi-humidity {
  			font-size: 22px;
			color: #2196f3;
		}
		.details .wi-barometer {
			font-size: 25px;
		}
		.details .wi-cloud {
			font-size: 25px;
			color: #9e9e9e;
		}
		.details .wi-dust {
			font-size: 25px;
		}
		.details .wi-snowflake-cold { 
			font-size: 28px;
			color: #fff;
		}
		.details .wi-day-sunny {
		 	font-size: 20px;
		}
		/* fa-sun replaced wi-day-sunny for UV specifically (matching
		   the icon already used in the hourly view's UV graph) - same
		   20px weight as what it replaced. wi-day-sunny above is left
		   in place for other, non-UV uses of that icon (general sunny
		   weather conditions). */
		.details .fa-sun {
			font-size: 20px;
			/* lookup.css's global "i.fa-solid, i.fa-regular {
			   margin-right: 10px; }" rule (meant for icons sitting
			   before adjacent text elsewhere on the page) also
			   applies here, throwing this icon's position off from
			   its sibling rows' icons (which are all Weather Icons,
			   not Font Awesome, so never had this margin at all).
			   We've hit this exact same lookup.css side-effect
			   several times now with other fa-solid icons. */
			margin-right: 0;
		}
		.details .wi-strong-wind {
			font-size: 20px;
		}
		.details .wi-windy {
			font-size: 20px;
		}
		/* Visibility's icon (wi-fog) was never added to this per-icon
		   size-tuning list when it was introduced, so it fell back to
		   the table's own base 15px - visibly smaller than every
		   neighboring icon here (20-28px). 25px matches the cluster
		   most of its neighbors (barometer/cloud/dust) already use.
		   Shared .details class, so this applies to both the Current
		   Weather and "Weather for the Show" cards, which both use it. */
		.details .wi-fog {
			font-size: 25px;
		}
		/* .weather-card .wi-windy { margin-left: -170px; } removed -
		   this was a hack compensating for wi-windy's old position as
		   a standalone <p> heading (which needed pulling far left to
		   line up with the table's icon column below it). Now that
		   it's a genuine cell in that same table, it aligns naturally
		   via .details-icon-cell and this margin only pushed it
		   wrongly off to the left. Confirmed nothing else depends on
		   this rule - .weather-card is used in exactly one place in
		   the whole page (the Current Weather card), and the daily
		   forecast's own wi-windy usage lives outside it entirely. */
		.details .wind-icon {
			font-size: 30px;
		}
		.details .wi-sunrise, .details .wi-sunset {
			color: orange;
			font-size: 23px;
			vertical-align: middle;
		}
		.details .wi-moonrise, .details .wi-moonset {
			color: #F6F1D5;
			font-size: 23px;
			vertical-align: middle;
		}
		.wi-lightning {
			margin-left: 7px;
			color: #607d8b;
			font-size: 25px;
		}
		.day-container {
			padding-top: 10px;
  			background-color: skyblue;
			border-radius: 10px 10px 0 0;
			color: #777;
  		}
		.day-container.pm {
			border-radius: 0;
		}
		p.day-container-am-pm {
			margin: 5px 0 10px 0;
		}
		.weather-card .day-container, .weather-card .night-container {
			border-radius: 10px;
			margin: 0px 50px;
			padding: 20px;
		}
		.weather-card .night-container .description {
			color: #fff;
		}
		.day-container .forecast-description {
			margin-bottom: 0;
		}
		.night-container {
			background-color: #3c3636;
  			padding-top: 15px;
			border-radius: 0 0 10px 10px;
		}
		.night-container .forecast-description {
			color: #fff;
			font-size:12px;
			margin: 0;
			height: 50px;
		}
		.night-container .icon {
			font-size: 30px;
  			width: 30px;
  			height: 30px;
		}
		.wind-outer-container {
			height: 75px;
  			vertical-align: middle;
  			display: inline-block;
  			position: relative;
  			bottom: 50%;
  		}
		/* This component's every position is a precise pixel transform()
		   relative to .wind-dial-container's own box, computed to match
		   GAOS's rendering — a page that never loaded Bootstrap.
		   Bootstrap's CSS reboot sets line-height:1.5 globally, which
		   none of the rules below override; that extra line-height
		   padding around the arrow glyph's inline box shifts where it
		   visually sits relative to the circle, even with every other
		   rule byte-identical to the source. Resetting line-height back
		   to a plain 1 here, scoped to just this component, restores
		   the non-Bootstrap layout these transforms were tuned for.
		*/
		.wind-dial-container, .wind-dial-container * {
			line-height: 1;
		}
		.wind-dial-container {
			position: relative;			
			width: 48px; 
			height: 50px;
			display: inline-block;
			vertical-align: middle; 
		}
		.wind-dial-circle {
  			width: 40px;
  			height: 40px;
  			border: 2px solid #777;
  			border-radius: 50%;
  			display: flex;
  			align-items: center;
			justify-content: center;
			position: absolute;
			top: 50%;
  			left: 50%;
  			transform: translate(-50%, -50%);
			z-index: 1;
		}
		.wind-arrow {
  			position: absolute;
  			top: 50%;
  			left: 50%;
  			transform: translate(-50%, -40px);
  			transform-origin: center bottom;
  			font-size: 30px;
  			color: #777;
  			z-index: 2;
		}
		.wind-direction-text {
  			position: absolute;
  			top: 50%;
  			left: 50%;
 			transform: translate(-50%, -48px);
  			font-size: 12px;
  			font-weight: bold;
  			z-index: 3;
			color: #777;
		}
		.wind-speed {
  			font-size: 15px;
  			font-weight: bold;
			color: #777;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			line-height: 1;
		}
		.wind-speed-unit {
			font-size: 8px;
		}
		
		.weather-card .forecast-day {
			padding: 15px;
		}
		.forecast-day h3.hourly-date-header {
			padding: 0;
			font-size: inherit;
		}
		.hourly-date-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			max-width: 230px;
			margin: 0 auto;
		}
		.hourly-date-header-pinned {
			position: fixed;
			left: 0;
			right: 0;
			/* Was 1000, tying with .bottom-menu (pwa-style.css) — same fix as
			   .accordion-content.weather above; this is also position:fixed
			   so it competes directly with the nav bar's own stacking, not
			   just the popup's. */
			z-index: 2001;
			/* Was the same rgba(...,0.75) as .forecast-day, but this
			   element is position:fixed and stays pinned while content
			   scrolls underneath it — a semi-transparent background let
			   that scrolling content visibly show through, which looks
			   broken for something meant to visually cover what's below
			   it. Full opacity here; .forecast-day itself (not pinned,
			   never has anything scrolling behind it) keeps the 0.75. */
			background-color: rgba(230, 208, 187, 1);
			padding-top: 5px;
			border-radius: 10px 10px 0 0;
		}
		/* The .calendar box is the same shared markup used in Daily
		   view's own day cards too, where its normal 10px top/bottom
		   margin (from weather.css) is fine - but stacked on top of
		   this pinned header's own padding, it gave the calendar a
		   different total vertical position in Hourly vs Daily,
		   which is what caused the visible "jump" switching between
		   the two. Zeroed only in this specific context, scoped so
		   Daily view's own cards are untouched. */
		.hourly-date-header .calendar {
			margin: 15px auto;
		}
		.hourly-tabs-pinned {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 2001;
			/* Same fix as .hourly-date-header-pinned above — full
			   opacity since this is also pinned over scrolling content. */
			background-color: rgba(230, 208, 187, 1);
			margin: 0;
			padding: 8px 15px;
		}
		.hourly-date-label {
			flex: 1;
			text-align: center;
		}
		.hourly-nav-prev, .hourly-nav-next, .hourly-nav-placeholder {
			width: 48px;
			flex-shrink: 0;
		}
		.hourly-nav-prev, .hourly-nav-next {
			background: none;
			border: none;
			color: inherit;
			font-size: 40px;
			font-family: inherit;
			cursor: pointer;
			padding: 0;
			width: 48px;
		}
		.forecast-hourly-details {
			display: flex;
			margin-top: 5px;
			color:#777;
			overflow-x: auto;
			cursor: pointer;
		}
		.forecast-summary {
			cursor: pointer;
		}
		.hourly-entry {
			flex-shrink: 0; 
			padding: 8px;
  			border-right: 1px solid #333;
			width: 250px;
			scroll-margin-top: 60px;
		}
		.forecast-hourly-details .hourly-entry:last-of-type {
			border-right: none;
		}
		.is-day0 {
			background: #3c3636;
			padding: 20px;
			border-radius: 5px;
			margin: 5px auto !important;
 			width: 75%;
		}
		.is-day1 {
			background: skyblue;
			padding: 20px;
			border-radius: 5px;
			margin: 5px auto !important;
 			width: 75%;
		}	
		.hourly-entry .time {
			font-size: 30px;
			font-weight: bold;
			color: #555;
			margin: 10px 0;
		}
		.hourly-entry .icon {	
			font-size: 40px;
			width: 40px;
			height: 40px;
		}
		.forecast-hourly-details .forecast-temps {
			margin: 5px 0 5px 0;
		}
		.hourly-details .wi {
			font-size: 20px;
		}
		.hourly-entry .wi-thermometer {
			margin-right: 5px; 
			font-size: 20px;
		}
		.hourly-entry .wi-raindrops {
			font-size: 32px;
		}
		.hourly-entry .wi-humidity {
			color: #2196f3;
		}
		.hourly-entry .wi-wind {
			font-size: 25px;
		}
		.hourly-entry .wi-cloud {
			color: #9e9e9e;
		}
		.toggle-hourly {
			margin: 0 0 10px 0;	
		}
		.toggle-hourly a{
			color: #fff;
			text-decoration: none;
		}  
		.forecast-view-tabs {
			display: flex;
			gap: 8px;
			margin-bottom: 10px;
		}
		.forecast-view-tab {
			background: none;
			border: none;
			color: rgb(200,200,200);
			padding: 12px 0;
			font-size: 15px;
			cursor: pointer;
			flex: 1;
		}
		.forecast-view-tab.active {
			background: none;
			color: #e07b39;
			font-weight: 700;
		}
		.forecast-container-outer {
			overflow-y: auto;
			position:relative;
		}	
		.accordion-content {
			display: none;
			overflow: hidden;
			padding: 5px 0;
		}
		.accordion-content.weather {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow-y: auto;
			/* Was 1000 — exactly equal to the wedding app's own .bottom-menu
			   nav bar (pwa-style.css). At equal z-index the later DOM
			   element wins, and .bottom-menu (in the page's <footer>,
			   after <main> where this popup lives) was winning — painting
			   over this popup's own bottom tab bar. This is meant to be a
			   full-screen takeover, so it needs to clearly outrank the
			   persistent nav while open, not tie with it. */
			z-index: 2000;
			/* Was #2c437a (GAOS navy), then #fbeee0 (too close to
			   .forecast-day's own tan, clashing in the gaps between/
			   around cards). White is a real palette color
			   (--ast-global-color-5) and gives clean, unambiguous
			   separation from the tan cards without needing to
			   fine-tune two custom shades against each other. */
			background-color: var(--ast-global-color-5);
			/* Was 15px 0 (top and bottom) — the top half was redundant
			   once .weather-current-view/.weather-forecast-view got
			   their own padding-top sized to clear the fixed sticky
			   header: these paddings stack (nested elements), so the
			   two combined pushed content down by MORE than the header
			   actually needs, showing as a persistent extra gap no
			   matter how the header-clearance padding itself was tuned.
			   Bottom padding, meanwhile, was left far too SMALL: the
			   fixed .weather-bottom-tabs bar sitting on top of this
			   scrollable content is calc(var(--footer-height) +
			   safe-area) tall (64px+), but this only reserved 15px —
			   so the last ~50px of actual content (the weather-agency
			   Met Office link) was permanently hidden underneath the
			   bar with no way to scroll it into view or click it.
			   Matching the bar's real height (plus a little breathing
			   room) instead of a flat guess. */
			padding: 0 0 calc(var(--footer-height) + env(safe-area-inset-bottom, 0) + 15px) 0;
		}
		.weather-popup-backdrop {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 999;
		}
		.weather-popup-backdrop.open {
			display: block;
		}
		.weather-popup-close-row {
			position: sticky;
			top: 0;
			z-index: 1001;
			text-align: right;
			pointer-events: none;
		}
		.weather-popup-close-row .weather-popup-close {
			pointer-events: auto;
		}
		.weather-popup-close {
			background: none;
			color: #fff;
			border: none;
			font-size: 20px;
			line-height: 1;
			padding: 12px 0;
			cursor: pointer;
			z-index: 1001;
			flex: 1;
		}
		.accordion-header {
			cursor: pointer;
		}
		.accordion-header:focus-visible {
			outline: 2px solid #4291ce;
			outline-offset: 2px;
		}

		.accordion-header.weather {
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-top: 5px;
			margin-bottom: 5px;
		}
		.weather-row {
			display: flex;
			align-items: center;
			width: 100%;
		}
		.weather-row.weather-top {
			justify-content: space-between;
		}
		.accordion-header.weather .city {
  			align-items: center;
			display:flex;
			font-size: 24px;
			margin: 0;
			font-weight: bold;
			color: #fff;
		}
		/* Summary card's flag - smaller than the detailed view's 24px (was
		   too big at that size here), between that and the original 20px.
		   Wider gap than the detailed view's 5px too - too tight next to
		   the city name at this size. .city itself is display:flex with
		   align-items:center (above), so no vertical-align needed here
		   the way the block-layout detailed view needs it. */
		.accordion-header.weather .city .flag {
			width: 22px;
			height: 22px;
			margin-right: 8px;
		}
		.weather-alert-icon-row {
			display: none;
			margin-top: -6px;
			margin-left: 4px;
		}
		.weather-preview {
			justify-content: space-between;
			align-items: flex-end;
			gap: 15px;
		}
		.now {
			display: flex;
			flex-direction: column;
			gap: 2px;
			flex-shrink: 0;
		}
		.now-main {
			display: flex;
			align-items: center;
			gap: 12px;
			color: #fff;
			font-weight: normal;
		}
		.now-main .wi {
			font-size: 46px;
			width: 52px;
			height: 52px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		.now-temp-cell {
			font-size: 34px;
			font-weight: 700;
			color: #fff;
			white-space: nowrap;
		}
		.now-degree-unit {
			display: inline-flex;
			flex-direction: column;
			align-items: flex-start;
			vertical-align: 6%;
		}
		.now-degree {
			font-size: 19px;
			line-height: 1;
			color: #fff;
		}
		.now-temp-unit {
			font-size: 12px;
			line-height: 1;
			font-weight: 400;
			color: rgba(255,255,255,0.85);
			margin-top: -10px;
			margin-left: 2px;
		}
		.now-feels-like {
			font-size: 14px;
			color: rgba(255,255,255,0.85);
		}
		.hours-preview {
			display: flex;
			gap: 16px;
			overflow-x: auto;
			scrollbar-width: none;
		}
		.hours-preview::-webkit-scrollbar {
			display: none;
		}
		.hour-preview {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
			flex-shrink: 0;
			min-width: 40px;
			color: rgba(255,255,255,0.85);
			font-weight: normal;
			font-size: 12px;
		}
		.hour-preview .wi {
			font-size: 22px;
			width: 26px;
			height: 26px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.hour-preview .hour-time {
			font-size: 11px;
			opacity: 0.85;
		}
		.hour-preview .hour-temp {
			font-size: 14px;
			font-weight: 700;
			color: #fff;
		}
		@media only screen and (max-width: 500px) {
			.now-main .wi {
				font-size: 36px;
				width: 42px;
				height: 42px;
			}
			.now-temp-cell {
				font-size: 28px;
			}
			.now-degree {
				font-size: 25px;
			}
			.now-temp-unit {
				font-size: 10px;
			}
			.hours-preview {
				gap: 10px;
			}
			.accordion-header.weather .city {
				font-size: 20px;
			}
		}
		.accordion-header.weather .city .fa-solid {
			font-size: 14px;
			color: #fff;
		}
		/* Collapsed summary card backgrounds, reflecting current
		   conditions (AccuWeather-style) instead of a fixed color —
		   weather-display.js adds one of these as a class on the
		   .settings-card wrapper based on weather_bg_tier in the
		   fragment response. .weather-card-wrapper in the selector
		   gives these enough specificity to override .settings-card's
		   own cream background/orange border (pwa-style.css) cleanly.
		   All five approved together as white-text-on-every-tier in a
		   mockup before implementing, rather than guessed individually. */
		.weather-card-wrapper.weather-tier-night-clear {
			background-color: #3c3636;
			border-left: none;
		}
		.weather-card-wrapper.weather-tier-night-cloudy {
			background-color: #4a4a52;
			border-left: none;
		}
		.weather-card-wrapper.weather-tier-day-overcast {
			background-color: #717f8c;
			border-left: none;
		}
		.weather-card-wrapper.weather-tier-day-partly-cloudy {
			background-color: #4a78b0;
			border-left: none;
		}
		.weather-card-wrapper.weather-tier-day-clear {
			background-color: #4a90d9;
			border-left: none;
		}
		.weather-alert-icon {
			display: flex;
			align-items: center;
			gap: 6px;
			color: #f0e208;
		}
		.weather-alert-icon i {
			font-size: 21px;
			color: #f0e208;
			margin-left: 0;
			margin-right: 0;
		}
		.weather-alert-title {
			font-size: 13px;
			font-weight: bold;
			color: #f0e208;
			white-space: normal;
		}
		.weather-alert-more {
			font-size: 12px;
			font-weight: normal;
			color: rgb(200,200,200);
			margin-left: 4px;
			white-space: nowrap;
		}
		@media only screen and (max-width: 500px) {
			.weather-alert-title {
				font-size: 12px;
			}
			.weather-alert-more {
				font-size: 11px;
			}
		}
		.city-icon {
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 16px;
			margin-left: 12px;
			flex-shrink: 0;
		}
		.weather-agency {
			margin-top: 20px;
			text-align:right;
			font-size:10px;
			/* No horizontal padding at all before — since content is
			   right-aligned, it sat flush against the popup's very
			   right edge with no breathing room. */
			padding-right: 1rem;
		}
		.weather-agency img {
			max-width:33%;
			max-height:50px;
		}

/* --- Additions below (from GAOS's weather-v2 redesign) --- */

.weather-bottom-tabs {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	/* Was a thin 12px-padded row sitting flush at the very bottom edge —
	   looked "stuck to the bottom" and risked getting clipped by the
	   home-indicator/gesture-bar area on notched phones. Matches
	   .bottom-menu's own height + safe-area formula (pwa-style.css)
	   exactly, so this occupies the same visual slot the real nav bar
	   does underneath it, rather than a shorter strip below that. */
	height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0));
	padding-bottom: env(safe-area-inset-bottom, 0);
	background-color: var(--ast-global-color-1);
	border-top: 1px solid rgba(255,255,255,0.15);
	/* Was 1001 — also position:fixed (escapes the popup's own DOM
	   containment, so it stacks against the WHOLE page, not just within
	   the popup), and 1001 sat BELOW the popup's own background
	   (bumped to 2000 above) once that was raised past .bottom-menu.
	   This is the actual Current/Daily/Hourly tab bar the popup is
	   built around — it needs to clearly outrank the popup's own
	   background, not just barely tie with the old .bottom-menu value. */
	z-index: 2001;
}
.weather-current-view, .weather-forecast-view {
	/* Was a hardcoded 35px, hand-tuned to roughly clear the old sticky
	   header's height. Now derived from the same --header-height
	   variable the header itself uses below, so it always clears it
	   correctly regardless of device safe-area, instead of drifting out
	   of sync if that height ever changes again. */
	padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0));
}

/* Weather/Radar toggle, inside the Current view only - reuses the same
   pill-tab visual language as .forecast-view-tab (active = orange accent
   text) so it reads as consistent with the Daily/Hourly tabs elsewhere
   in this popup, without being the same control. */
.weather-current-toggle {
	display: flex;
	gap: 0;
	margin: 0;
}
.weather-current-toggle-btn {
	background-color: var(--ast-global-color-10);
	border: none;
	color: var(--ast-global-color-3);
	padding: 12px 0 12px;
	font-size: 14px;
	cursor: pointer;
	flex: 1;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.weather-current-toggle-btn i {
	margin-right: 5px;
}
.weather-current-toggle-btn.active {
	background-color: var(--ast-global-color-9);
	color: #fff;
	font-weight: 500;
}
.weather-current-radar-view {
	margin-bottom: 10px;
}
.weather-radar-status {
	color: rgb(60,60,60);
	font-size: 13px;
	margin-bottom: 6px;
	text-align: center;
}
.weather-radar-map {
	height: 480px;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
}
.weather-radar-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}
.weather-radar-play-btn {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background-color: var(--ast-global-color-9);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.weather-radar-play-btn:disabled {
	background-color: rgb(200,200,200);
	cursor: default;
}
.weather-radar-slider {
	flex: 1 1 auto;
	width: 100%;
}
/* The two radar frame tile layers (weather.js) swap which one is visible
   by toggling this opacity - Leaflet changes a layer's opacity with a
   plain, instant style write, so without this transition the swap is a
   hard cut, and any imprecision in exactly when the browser paints that
   write (several things tried and tested this session, all swapped
   instantly) reads as a flash. A real CSS transition hands the fade to
   the browser's own compositor instead of relying on our JS timing being
   exactly right: even if the two layers' opacity writes land a frame or
   two apart, the result is a smooth cross-dissolve, not a flash. */
.weather-radar-frame-layer {
	transition: opacity 300ms linear;
}
/* Boosts the Clouds tile images themselves so genuinely light cloud cover
   shows up clearly against the base map, rather than relying on the
   Leaflet layer's own opacity (which only scales the tile's existing
   alpha — it can't add visibility the source pixels don't have). Not
   applied to RainViewer's radar tiles, which are already vivid enough on
   their own, nor to the Pressure/Wind/Temp layers, whose tiles are already
   solid, saturated color bands. */
.owm-tile-boost {
	filter: saturate(2) contrast(1.3) brightness(1.05);
}
/* Checkbox row for the OpenWeather tab — several layers can be ticked on
   at once (unlike Radar, which only ever shows one), so this needs to read
   as a set of independent toggles rather than another row of tab buttons. */
.weather-owm-layers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	/* Leaflet's attribution links sit inside the map's own bottom-right
	   corner (an overlay on the map div, not separate flow beneath it),
	   so this row was sitting right up against them with nothing but the
	   map's own edge between the two. margin-top pushes this row clear of
	   that corner instead. */
	margin-top: 10px;
	margin-bottom: 8px;
	font-size: 13px;
	color: rgb(60,60,60);
}
.weather-owm-layers label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}
/* The label text itself lives in this span, not directly in the <label> —
   the site's base styles set a dark color on <label> elements for ordinary
   form fields elsewhere, and that beat even an !important color set here
   on .weather-owm-layers label directly. Styling a plain span instead,
   with no same-tag rule anywhere else to compete against, sidesteps that
   fight rather than escalating it further. */
.weather-owm-layer-label {
	color: rgb(60,60,60);
}
.weather-owm-layers input[type="checkbox"] {
	margin: 0;
}
.weather-radar-note {
	color: rgb(160,160,160);
	font-size: 12px;
	text-align: center;
	margin: 8px 0 0 0;
}
.weather-radar-note a {
	color: rgb(200,200,200);
}
.weather-sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Was 1001 — same fix as .weather-bottom-tabs above. */
	z-index: 2001;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Guarantees minimum spacing between the (possibly truncated) name
	   and the external-link icon — justify-content:space-between alone
	   adds no gap once the name fills all available width via ellipsis. */
	gap: 8px;
	background-color: var(--ast-global-color-1);
	height: calc(var(--header-height) + env(safe-area-inset-top, 0));
	padding: 0.25rem 1rem;
	padding-top: env(safe-area-inset-top, 0);
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.weather-sticky-header .city-name-row {
	/* Was display:flex — text-overflow only applies to BLOCK-level
	   overflow per spec, not flex containers, which is exactly why the
	   ellipsis fix wasn't actually rendering (text was just clipping
	   raw, with the icon beside it visually overlapping the cut-off
	   end). The flag/globe icon here is already an inline <img> or <i>
	   with its own right margin (get_country_flag_html()), so a plain
	   block-level text flow doesn't need flex to lay them out inline. */
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}
/* Flag sizing/spacing lives entirely here, not in get_country_flag_html()'s
   markup — the same <img class="flag"> is shared between this detailed
   sticky header and the summary card's collapsed h2.city (below), and the
   two need different sizes. This is the detailed view's size (confirmed
   correct as-is); the summary card gets a smaller override next to it.
   vertical-align:middle matters here specifically because .city-name-row
   is display:block (see its own comment above) - a block-level inline
   image otherwise sits at the text's baseline, not centered against it,
   which is what made the flag look uncentered next to the city name. */
.weather-sticky-header .city-name-row .flag {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;
}
.weather-sticky-header .city-name-row img,
.weather-sticky-header .city-name-row i {
	vertical-align: middle;
}
.weather-sticky-header a {
	color: rgb(200,200,200);
	font-size: 14px;
	flex-shrink: 0;
}
.current-time-heading {
	font-size: 22px !important;
	font-weight: bold;
}
.weather-agency {
	padding-bottom: 55px;
}
/* Was a plain <a> opening external maps - now a button that switches
   to the Current tab instead, since the city name/external map link
   moved to the sticky header above. */
.weather-goto-current {
	background: none;
	border: none;
	color: #777;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

/* --- Hourly view (moved out of hourly.js's inline
   styles - only genuinely data-driven values like bar width/color,
   day/night icon background, and wind rotation stay inline in JS) --- */
.hourly-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* Avoids a doubled separator line where the switcher list meets the
   first trend section below it: that section already draws its own
   border-top (see .hourly-trend-section), so the last row's own
   border-bottom here is redundant right at that one junction - between
   rows themselves it's still needed and untouched. */
.hourly-row:last-child {
	border-bottom: none;
}
.hourly-time {
	width: 84px;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	color: #555;
}
.hourly-time .wi {
	font-size: 25px;
}
.hourly-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 50px;
	border-radius: 8px;
	flex: 0 0 50px;
}
.hourly-icon-box .wi {
	font-size: 30px;
}
/* Same icons/sizes as the daily and current-weather views (unchanged
   there) - just pulled left to overlap with the main weather icon,
   since this box is too narrow to fit both side by side the way
   larger icon contexts can. Only covers is_hot/is_cold/is_windy
   individually - the combined is_windy.is_hot / is_windy.is_cold
   rules (two icons concatenated, already at margin-left:0 rather
   than 5px) and is_hurricane (a separate 35px icon, unrelated to
   hot/cold/windy) are NOT covered here yet - flagged separately
   rather than guessing a value for those. */
.hourly-icon-box .is_hot::after,
.hourly-icon-box .is_cold::after {
	margin-left: -5px;
}
.hourly-icon-box .is_windy::after {
	margin-left: -23px;
}
.hourly-icon-box .is_windy.is_hot::after,
.hourly-icon-box .is_windy.is_cold::after {
	margin-left: -32px;
}
.hourly-icon-box .is_hurricane::after {
	margin-left: -15px;
}
.hourly-bar-track {
	flex: 1;
	height: 14px;
	background: rgba(0,0,0,0.08);
	border-radius: 3px;
}
.hourly-bar-fill {
	height: 100%;
	border-radius: inherit;
}
.hourly-primary-value {
	font-size: 18px;
	font-weight: 500;
	color: #333;
	white-space: nowrap;
}
.hourly-secondary-value {
	font-size: 15px;
	color: #777;
	text-align: right;
	white-space: nowrap;
}
.hourly-wind-arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #777;
	flex: 0 0 26px;
}
.hourly-wind-arrow {
	font-size: 13px;
	color: #777;
}
.hourly-category-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}
/* Square, equal-width tabs instead of wide text pills - the old pills
   (padding: 6px 16px, full text labels like "Rain / snow") didn't fit
   3 of them in the popup's width, forcing an unwanted horizontal
   scroll (flex: 0 0 auto let each pill size to its own content,
   rather than sharing the available width). flex: 1 here divides the
   row evenly between however many tabs exist (3 categories + the view
   toggle), with no overflow regardless of screen width. */
.hourly-category-tab {
	background: none;
	border: 1px solid rgba(120,120,120,0.5);
	color: #777;
	padding: 8px 4px;
	border-radius: 8px;
	font-size: 11px;
	cursor: pointer;
	flex: 1;
	min-width: 0;
}
.hourly-category-tab.active {
	background-color: rgba(120,120,120,0.5);
	color: #fff;
	border-color: transparent;
}
.hourly-trend-section {
	border-top: 1px solid rgba(0,0,0,0.1);
	margin-top: 14px;
	padding-top: 12px;
}
.hourly-trend-heading {
	padding-left: 8px;
}
.hourly-trend-heading {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: #777;
	margin: 0 0 4px;
	cursor: pointer;
}
.hourly-trend-heading i {
	margin: 0;
	font-size: 20px;
}
/* wi-raindrops renders visually smaller/thinner than the other trend
   heading icons (wi-thermometer, wi-windy, etc.) at the SAME nominal
   font-size - a glyph-design quirk of that particular icon within the
   Weather Icons font, not a CSS sizing mismatch. Bumped up to
   compensate so it reads as the same visual weight as its neighbors. */
.hourly-trend-heading .wi-raindrops {
	font-size: 26px;
}
.hourly-trend-label {
	flex: 0 0 auto;
}
.hourly-trend-now {
	color: #555;
	font-weight: 500;
}
.hourly-trend-chevron {
	margin-left: auto !important;
	font-size: 14px !important;
	color: #999;
	transition: transform 0.15s;
}
.hourly-trend-chevron-open {
	transform: rotate(180deg);
}
.hourly-wind-arrow-badge i {
	margin: 0;
}
.hourly-category-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
.hourly-category-tab i {
	margin: 0;
	font-size: 15px;
}
/* Same fix as the trend heading icon - wi-raindrops just reads
   smaller than its neighbors (wi-thermometer, wi-windy) at an
   identical font-size. Uses transform:scale() here instead of a
   bigger font-size (which is what the trend heading uses) - this tab
   stacks icon above label (flex-direction: column), so a literal
   font-size increase grows the icon's actual layout box and pushes
   the "Rain" label further down beneath it, misaligning it against
   the other tabs' labels. scale() enlarges the glyph visually in
   place without changing its box size, so the label underneath stays
   put. 1.73 = 26/15, the same visual size the heading version uses. */
.hourly-category-tab .wi-raindrops {
	display: inline-block;
	transform: scale(1.73);
}
/* Narrower than the 3 equal category tabs (icon-only, no label) -
   toggles between the hour-by-hour list and the combined graph view
   for Temperature/Rain/Wind. */
.hourly-view-toggle {
	flex: 0 0 40px;
}
.hourly-expanded-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	grid-auto-flow: column;
	gap: 4px 8px;
	margin-top: 8px;
}
.hourly-expanded-grid span {
	display: block;
	padding: 2px 0;
	font-size: 13px;
	color: #777;
}
.hourly-expanded-grid b {
	color: #333;
	font-weight: 500;
}
.hourly-quarter-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #999;
	margin-top: 2px;
}
.hourly-pollen-legend {
	display: flex;
	gap: 12px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.hourly-pollen-legend-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #777;
}
.hourly-pollen-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
/* Small "MAX"/"MIN" label sitting under the icon on the daily card's
   UV/AQI/Visibility rows - these rows now have two stacked lines
   (icon + label) inside a single table row still sized for one, so
   without this the rows read as almost touching, making it unclear
   which label belongs to which icon/dot. */
.daily-icon-sublabel {
	font-size: 11px;
	margin: 0;
}
/* Daily card's simplified UV/AQI/Visibility indicators - color alone
   carries the severity (matching each metric's existing color
   scale), no number or tooltip, since the point is just "check the
   hourly view for detail" rather than showing the reading itself. */
.daily-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	/* vertical-align:middle aligns to the baseline + half the
	   parent's x-height, not the true visual center of the full text
	   line - a well-known CSS quirk that tends to sit a dot like this
	   slightly high relative to the text next to it. The small
	   negative value nudges it down to compensate. */
	vertical-align: -1px;
}
/* Pollen's dots work differently - color identifies WHICH type
   (matching the per-type colors already used in the hourly pollen
   legend), so severity needs a different channel: size. Only shown
   for types that were above Low at some point that day. */
.daily-pollen-dot {
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}
.daily-pollen-dot.moderate {
	width: 10px;
	height: 10px;
}
.daily-pollen-dot.high {
	width: 14px;
	height: 14px;
}
.daily-pollen-dot.very-high {
	width: 18px;
	height: 18px;
}

.hourly-bar-track {
	position: relative;
}
.hourly-bar-marker {
	position: absolute;
	top: -3px;
	width: 3px;
	height: 20px;
	background: #333;
	border-radius: 2px;
	/* Centers the marker ON its left:X% position instead of using it
	   as the marker's own left edge - without this, a marker near
	   100% (a high feels-like or gust reading) had its entire 3px
	   width extend past the track's right boundary and visually
	   escape into whatever sits next to it, since the track has no
	   overflow:hidden. This does mean a marker at the very 0% or 100%
	   extreme now overflows its OWN half-width (1.5px) on one side
	   instead - the same trade-off any centered range-slider-style
	   marker makes - but that's a couple of pixels, not the marker's
	   whole body escaping the row.  */
	transform: translateX(-50%);
}

/* Temperature row only - stacks real feel small underneath the main
   value instead of as a separate right-aligned label, freeing that
   width for a longer bar instead. */
.hourly-value-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 46px;
	flex: 0 0 46px;
	line-height: 1.3;
}
.hourly-value-stack-wide {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 72px;
	flex: 0 0 72px;
	line-height: 1.3;
}
.hourly-value-unit-small {
	white-space: nowrap;
	font-size: 12px;
	color: #777;
}