/*
================================================
The weather page (issue #681)
================================================

A week strip of tiles - one per day, its expected kWh as the headline and a bar on the week's
scale - then the selected day in detail beside a column of plain sentences on when the sun is
worth using. The tiles are links (?day=N), so choosing a day needs no script and no form.

Kept out of style.css (the template's own stylesheet, identical in both modules) so this stays
reviewable and easy to drop. Loaded for every page from common/commonHead.xhtml; every class is
prefixed wx- so nothing leaks onto other pages.
*/

.wx-subtitle {
	margin: -8px 0 16px;
	color: #5b6478;
	font-size: 14px;
}

.wx-muted {
	color: #5b6478;
	font-size: 13px;
}

.wx-empty .card-body {
	color: #5b6478;
}

/* --- the week strip ---------------------------------------------------------------------- */

.wx-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.wx-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 2px solid transparent;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(27, 34, 51, .06);
	color: #1b2233;
	text-decoration: none;
	transition: border-color .15s;
}

.wx-tile:hover,
.wx-tile:focus-visible {
	border-color: #b9c6f2;
	color: #1b2233;
	text-decoration: none;
}

.wx-tile:focus-visible {
	outline: 3px solid #2f5bea;
	outline-offset: 2px;
}

.wx-tile-on,
.wx-tile-on:hover {
	border-color: #2f5bea;
	background: #f2f5ff;
}

.wx-tile-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	color: #5b6478;
}

.wx-tile-head b {
	font-size: 15px;
	color: #1b2233;
}

.wx-tile-head b.wx-today {
	color: #2f5bea;
}

.wx-tile-mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wx-temps {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 13px;
	color: #5b6478;
}

.wx-temps b {
	font-size: 17px;
	color: #1b2233;
}

.wx-kwh {
	font-size: 13px;
	color: #5b6478;
}

.wx-kwh b {
	font-size: 24px;
	font-weight: 600;
	color: #1b2233;
	font-variant-numeric: tabular-nums;
}

.wx-bar {
	display: block;
	flex: none;
	height: 8px;
	border-radius: 4px;
	background: #eef0f5;
	overflow: hidden;
}

.wx-bar i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: #e9a70f;
}

.wx-bar i.wx-bar-weak {
	background: #b8bfcd;
}

.wx-bar i.wx-bar-produced {
	background: #1d3faf;
}

.wx-caption {
	font-size: 12px;
	line-height: 1.35;
	color: #5b6478;
}

.wx-chip {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e6ecfd;
	color: #1d3faf;
	font-size: 12px;
	font-weight: 500;
}

/* --- the selected day and the side column --------------------------------------------------- */

.wx-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}

.wx-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wx-side .card,
.wx-detail {
	margin-bottom: 0;
}

.wx-h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 600;
}

.wx-h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.wx-detail-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}

.wx-stats {
	display: flex;
	gap: 24px;
	margin: 0;
	text-align: right;
}

.wx-stats dt {
	font-size: 12px;
	font-weight: 400;
	color: #5b6478;
}

.wx-stats dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wx-stats dd small {
	font-size: 12px;
	font-weight: 500;
	color: #5b6478;
}

.wx-stats dd.wx-produced {
	color: #1d3faf;
}

/* the hours under the chart: one column per hour, the same hours for every day */
.wx-hours-wrap {
	overflow-x: auto;
	margin-top: 12px;
	border-top: 1px solid #eef0f5;
	padding-top: 8px;
}

.wx-hours {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.wx-hours th {
	font-weight: 400;
	color: #5b6478;
	text-align: center;
}

.wx-hours tbody th {
	text-align: left;
	white-space: nowrap;
	padding-right: 8px;
}

.wx-hours td {
	min-width: 36px;
	padding: 0;
	text-align: center;
}

.wx-hours td span {
	display: block;
	padding: 5px 0;
	border-radius: 5px;
	color: #1b2233;
}

.wx-hours td span.wx-dry {
	color: #aeb6c7;
}

.wx-hours td span.wx-hot {
	font-weight: 700;
	color: #b4471a;
}

.wx-footnote {
	margin: 10px 0 0;
	font-size: 12px;
	color: #5b6478;
}

.wx-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
}

.wx-hints {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wx-hint {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
}

.wx-hint-icon {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fdf3dc;
}

.wx-hint-cloud .wx-hint-icon {
	background: #e9ecf3;
}

.wx-hint-rain .wx-hint-icon {
	background: #e6ecfd;
}

.wx-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 13px;
}

.wx-check > span:first-child {
	flex: 0 0 72px;
	color: #5b6478;
}

.wx-check .wx-bar {
	flex: 1 1 auto;
	height: 10px;
}

.wx-check b {
	flex: 0 0 76px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wx-check-verdict {
	margin: 6px 0 0;
	font-size: 14px;
}

.wx-daylight {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.wx-daylight-value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.wx-daylight-value b {
	font-size: 18px;
	font-weight: 600;
}

/* --- narrower screens --------------------------------------------------------------------- */

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

/* a phone scrolls the week sideways rather than squeezing seven tiles into its width */
@media (max-width: 768px) {
	.wx-week {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 132px;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x mandatory;
	}

	.wx-tile {
		scroll-snap-align: start;
	}

	.wx-stats {
		text-align: left;
	}
}