/*  Variables */
:root {
	--app-background-color: #fffbf6;

	/* Band 1 fill is set dynamically by JS (daylight gradient) */
	--band1-divider-color: #aaaaaa;
	--band1-divider-width: 0px;

	--band2-divider-color: #888888;
	--band2-divider-width: 0px;

	/* Arc borders — inner/outer circular edges of each band */
	--arc-border-color: #555555;
	--arc-border-width: 1px;

	--hour-hand-color: #cc2200;
	--hour-hand-width: 10px;

	--minute-hand-color: #cc2200;
	--minute-hand-width: 1.5px;
}

/*  Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*  Base */
body {
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
	background-color: var(--app-background-color);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow-x: scroll;
}

/*  Page frame */
#frame {
	position: relative;
	width: 100%;
	max-width: 620px;
	/* 428px = iPhone 12 Pro Max width */
	margin: 0 auto 0 auto;
	overflow: hidden;
	overflow-x: scroll;
}

h1 {
	text-align: center;
	font-size: 1.42em;
	margin: 1em 0;
}

#frame>h2,
.inner {
	margin: 0 8%;
}

/*  Forecast load state */
/* Applied before data loads and on location change; removed after build. */
.forecast-hidden {
	opacity: 0;
	transition: none;
}

/* Applied after all DOM is built — triggers the fade-in. */
.forecast-ready {
	opacity: 1;
	transition: opacity 120ms ease;
}

#frame>h2 {
	margin-top: 2em;
}

.rain-icon {
	height: 1.2em;
	width: auto;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
	margin-left: 0.1em;
}

/*  SVG wheel */
#chart-container {
	width: 100%;
	aspect-ratio: 1 / 1;
	text-align: center;
	position: absolute;
	top: 0;
	z-index: 100;
}

#wheel {
	width: 100%;
	height: 100%;
}

/* Segment fills — set via el.style.fill in JS */
.band1-segment,
.band2-segment {
	stroke: none;
}

/* Radial dividers */
.band1-divider {
	stroke: var(--band1-divider-color);
	stroke-width: var(--band1-divider-width);
}

.band2-divider {
	stroke: var(--band2-divider-color);
	stroke-width: var(--band2-divider-width);
}

/* Arc borders (circular inner/outer edges) */
.arc-border {
	stroke: var(--arc-border-color);
	stroke-width: var(--arc-border-width);
}

/* Clock hands */
.hour-hand {
	stroke: var(--hour-hand-color);
	stroke-width: var(--hour-hand-width);
	stroke-linecap: butt;
}

.minute-hand {
	stroke: var(--minute-hand-color);
	stroke-width: var(--minute-hand-width);
	stroke-linecap: round;
}

/*  Forecast — now */
#forecast--now {
	position: relative;
	width: 68%;
	max-width: 340px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

#now-overlay {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}

#forecast--now .temp-bound {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1;
}

#temp-high {
	color: #e85d26;
}

#temp-low {
	color: #2563eb;
}

#now-reading {
	font-size: 2.75rem;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	margin: 0;
}

.has-degrees {
	position: relative;
	display: inline-block;
}

.has-degrees::after {
	content: "°";
	position: absolute;
	left: 100%;
	top: 0;
	font-size: 0.92em;
}

/* Kelvin: replace ° with K on elements that use CSS-driven suffix */
html[data-temp-scale="k"] .has-degrees::after {
	content: "K";
	font-size: 1em;
	position: relative;
	left: 0;
}

/* #temp-now   { font-size: 70px; } */
#temp-now {
	font-size: 50px;
}

#feels-like {
	font-size: 18px;
}

.has-line::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 2px;
	top: 100%;
	background: red;
}

#temp-low.has-line::before {
	top: unset;
	bottom: 100%;
	background: blue;
}

/*  Forecast — description */
#forecast--description p {
	font-size: 1.26em;
}

/*  Forecast — hourly */
#forecast--hourly {
	margin-top: 1.25em;
	/* min-height: 320px; */
	min-height: 220px;
}

/* 4-col grid. Row-gap must be 0 so the sky stripe is seamless. */
.hourly-row {
	display: grid;
	grid-template-columns: 24px 56px 1fr 1fr;
	align-items: center;
	column-gap: 0;
	row-gap: 0;
	min-height: 32px;
}

/* Col 1 — sky-condition colour stripe */
.col-sky {
	align-self: stretch;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}

.hourly-row:first-child .col-sky {
	border-radius: 4px 4px 0 0;
	border-top: 1px solid #eee;
}

.hourly-row:last-child .col-sky {
	border-radius: 0 0 4px 4px;
	border-bottom: 1px solid #eee;
}

/* Col 2 — time label */
.col-time {
	text-align: right;
	font-size: 1.05em;
	font-weight: 500;
	word-spacing: -0.1em;
	white-space: nowrap;
	padding: 5px 8px 5px 0;
}

.col-time.is-now {
	font-weight: 700;
}

.solar-icon {
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
}

/* Col 3 — short condition description */
.col-desc {
	font-size: 0.92em;
	color: #777;
	position: relative;
	isolation: isolate;
	/* keeps z-index:-1 pseudo-element behind text */
}

.col-desc span {
	background-color: var(--app-background-color);
	padding: 0 4px 0 0;
}

.col-desc::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	border-top: 1px dotted #d0d0d0;
	z-index: -1;
}

/* Col 4 — temperature badge on a dotted track */
.col-temp-track {
	position: relative;
	height: 30px;
}

.col-temp-track::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--badge-pos, 50%);
	border-top: 1px dotted #d0d0d0;
	transition: width 350ms ease;
}

/* In hybrid/feels views the track extends to the shared-scale temp position */
#forecast--hourly.view-hybrid .col-temp-track::before,
#forecast--hourly.view-feels .col-temp-track::before {
	width: var(--badge-pos-shared, 50%);
}

.temp-badge,
.feels-badge {
	position: absolute;
	top: 50%;
	left: var(--badge-pos);
	transform: translate(-50%, -50%);
	/* background: #e2e2e2; */
	background: #fff;
	color: #111;
	font-size: 0.95em;
	font-weight: 600;
	padding: 3px 4px 3px 6px;
	border-radius: 999px;
	white-space: nowrap;
	border: 1.2px solid #bbb;
	z-index: 2;
	transition: left 350ms ease, opacity 200ms ease;
}

/*  Feels-like badge */
.feels-badge {
	background: #f5f5f5;
	color: #555;
	opacity: 0;
	z-index: 1;
}

.feels-badge[data-dir="warm"] {
	background: rgba(232, 93, 38, 0.1);
	border-color: #e85d26;
	color: #e85d26;
}

.feels-badge[data-dir="cold"] {
	/* background: rgba(37, 99, 235, 0.1); */
	background: aliceblue;
	border-color: #a7c3ff;
	color: #2563eb;
}

/* Hybrid: temp badge shifts to shared scale; feels badge moves to its position, value hidden */
#forecast--hourly.view-hybrid .temp-badge {
	left: var(--badge-pos-shared);
}

#forecast--hourly.view-hybrid .feels-badge {
	left: var(--feels-pos);
	opacity: 1;
	z-index: 1;
}

#forecast--hourly.view-hybrid .feels-badge .badge-val {
	/* opacity: 0; */
}

/* Feels Like: temp badge shifts to shared scale, value hidden; feels badge above */
#forecast--hourly.view-feels .temp-badge {
	left: var(--badge-pos-shared);
	z-index: 1;
}

#forecast--hourly.view-feels .temp-badge .badge-val {
	/* opacity: 0; */
	color: #666;
}

#forecast--hourly.view-feels .feels-badge {
	left: var(--feels-pos);
	opacity: 1;
	z-index: 3;
}

/* Temp: feels badge returns to temp-only position and fades (transition handles it) */
#forecast--hourly.view-temp .feels-badge {
	left: var(--badge-pos);
	opacity: 0;
}

/*  Hourly view toggle buttons */
#forecast--hourly-views {
	margin-top: 1.2em;
}

#hourly-view-btns {
	display: flex;
	gap: 8px;
	margin: 0 9%;
}

.view-btn {
	flex: 1;
	padding: 6px 8px;
	font-size: 1em;
	/* 0.78em; */
	font-weight: 500;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: transparent;
	color: #555;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 150ms, color 150ms, border-color 150ms;
}

.view-btn.is-active {
	background: #333;
	color: #fff;
	border-color: #333;
}

/*  Temperature scale toggle */
#settings-temperature-scales {
	margin-top: 1.2em;
}

#scale-btns {
	display: flex;
	gap: 8px;
	margin: 0 16%;
}

/*  Forecast — future (7-day) */
#forecast--future {
	padding: 0;
	margin-top: 2em;
	min-height: 336px;
	overflow: hidden;
}

.forecast-row {
	display: grid;
	grid-template-columns: 50px 42px 1fr;
	align-items: center;
	gap: 12px;
	padding: 5px 0;
}

.col-day {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.f-day-name {
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.f-precip {
	font-size: 0.82em;
	color: #4477aa;
	display: flex;
	align-items: center;
	gap: 2px;
}

.precip-icon {
	height: 1em;
	width: auto;
	flex-shrink: 0;
}

.col-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.f-icon {
	width: 38px;
	height: 38px;
}

.col-range {
	position: relative;
}

.range-track {
	position: relative;
	height: 20px;
	/* bar centred within + overflow for labels */
	margin-left: 10px;
}

.range-bar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	border-radius: 999px;
	/* background set inline by JS via tempColor(low/high) */
}

.range-low,
.range-high {
	position: absolute;
	top: 50%;
	/* font-size: 0.85em; */
	font-size: 1em;
	font-weight: 600;
	white-space: nowrap;
	background-color: var(--app-background-color);
	color: #111;
}

/* low label sits just left of the bar start */
.range-low {
	transform: translate(-100%, -50%);
	padding-right: 3px;
	border: 3px solid var(--app-background-color);
	border-radius: 10px;
	border-right: 0;
}

/* high label sits just right of the bar end */
.range-high {
	transform: translateY(-50%);
	padding-left: 3px;
}

/*  Footer */
#site-footer {
	background: #111;
	color: #999;
	font-size: 0.78em;
	line-height: 1.6;
	margin-top: 4em;
	padding: 1.5em 8%;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.footer-location {
	color: #ccc;
	font-weight: 600;
}

#site-footer a {
	color: #aaa;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*  Responsive */
@media (max-width: 500px) {
	#frame {
		height: auto;
		/* padding-bottom: 3em; */
	}
}