/* Look Up. One stylesheet, no build step. Always dark (it's used at night); "red" mode swaps the tokens for red-only light. */

:root {
	--bg: #070b16;
	--surface: #0f1628;
	--surface-2: #16203a;
	--text: #e6ebf5;
	--muted: #95a0b8;
	--line: #222d48;
	--accent: #f2d27a;
	--link: #9cc2ff;
	--clear: #3fb67d;
	--patchy: #c9a23b;
	--cloudy: #4a5470;
	--good: #6fe0a4;
	--maybe: #f2d27a;
	--radius: 12px;
	color-scheme: dark;
}

/* Red light mode: nothing but dim reds, so your eyes stay dark-adapted. */
:root.red {
	--bg: #000000;
	--surface: #140000;
	--surface-2: #1f0000;
	--text: #ff4a3a;
	--muted: #b3261e;
	--line: #3a0a06;
	--accent: #ff4a3a;
	--link: #ff6a5a;
	--clear: #d0301f;
	--patchy: #7a1a10;
	--cloudy: #2e0804;
	--good: #ff4a3a;
	--maybe: #c0281a;
}
:root.red img { filter: grayscale(1) sepia(1) saturate(8) hue-rotate(-50deg) brightness(0.6); }

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
h1, h2 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.05rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.topbar { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.topbar-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.red-toggle { margin-left: 4px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.topbar-inner > .red-toggle:nth-child(2) { margin-left: auto; }
.red-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--text); }

main { padding: 20px 16px 8px; }

.hero { padding: 12px 0 20px; }
.hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.hero-good h1 { color: var(--good); }
.where { color: var(--muted); margin: 0 0 6px; }
.where a { margin-left: 6px; font-size: 0.9rem; }
.sub { color: var(--muted); font-size: 1.05rem; margin: 0 0 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card.narrow { max-width: 560px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.grid .card { margin-bottom: 0; }
.lead { font-size: 1.1rem; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }
.ok { color: var(--good); }
.or { color: var(--muted); margin: 14px 0; }

.button {
	display: inline-block; background: var(--accent); color: #111; border: 0; border-radius: 10px;
	padding: 11px 18px; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
:root.red .button { color: #000; }
.button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.link { background: none; border: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px; }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type="search"], select {
	width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
	padding: 10px 12px; font: inherit;
}
.search .row { display: flex; gap: 8px; }
.search .row input { flex: 1; min-width: 0; }
.results { list-style: none; padding: 0; margin: 12px 0; }
.results li + li { margin-top: 6px; }
.result {
	width: 100%; text-align: left; background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
	border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer;
}
.result span { color: var(--muted); font-size: 0.9rem; display: block; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--accent); }
.check strong { display: block; }
.check span { color: var(--muted); }
.check strong { color: var(--text); }
.prefs .button { margin-top: 18px; }

/* Hour by hour: a bar per hour, taller for more cloud. */
.hours { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.hour { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.75rem; }
.hour .bar {
	width: 100%; height: 64px; border-radius: 6px; background: var(--surface-2); position: relative; overflow: hidden;
}
.hour .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(var(--cloud), 6%); background: var(--cloudy); }
.hour.clear .bar::after { background: var(--clear); height: 100%; opacity: calc(1 - var(--cloud) * 0.01 * 1.6); }
.hour.patchy .bar::after { background: var(--patchy); }
.hour:not(.dark) .bar { opacity: 0.55; }
.hour.past { opacity: 0.35; }
.hour .pct { font-variant-numeric: tabular-nums; color: var(--muted); }
.hour .moon-dot { height: 1em; color: var(--accent); }
.hour .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.legend { color: var(--muted); font-size: 0.85rem; margin: 8px 0 0; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: middle; }
.key:first-child { margin-left: 0; }
.key.clear { background: var(--clear); }
.key.patchy { background: var(--patchy); }
.key.cloudy { background: var(--cloudy); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.list { margin: 0; padding-left: 18px; }
.list li + li { margin-top: 6px; }
.list li.past { opacity: 0.45; }
.big { font-size: 1.3rem; font-weight: 700; margin: 0 0 8px; }
.big.good { color: var(--good); }
.big.maybe { color: var(--maybe); }
.level { padding: 1px 8px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--surface-2); }
.level-yellow { color: #f2d27a; }
.level-amber { color: #ffab40; }
.level-red { color: #ff6b6b; }

.push [hidden] { display: none; }
.push .button + .link { margin-left: 8px; }

.footer { color: var(--muted); font-size: 0.8rem; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.footer p { margin: 4px 0; }

@media (max-width: 520px) {
	.nav a { padding: 6px 8px; }
	.brand { font-size: 1rem; }
	.hero h1 { font-size: 1.9rem; }
}

/* Spots */
.map-card { padding: 0; overflow: hidden; }
.map-card .legend { padding: 8px 14px 12px; }
.map { height: min(58vh, 460px); background: #05070d; }
.night-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.75) contrast(0.9); }
:root.red .night-tiles { filter: invert(1) grayscale(1) brightness(0.5) sepia(1) saturate(6) hue-rotate(-50deg); }
:root.red .leaflet-image-layer { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-50deg) brightness(0.8); }
.leaflet-container { font: inherit; }
.leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.leaflet-control-attribution { background: rgb(0 0 0 / 55%) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--link); }
.pin { display: grid; place-items: center; }
.pin span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; border: 2px solid var(--bg); }
.pin-home span { background: var(--link); color: #06122a; }
.pin-spot span { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
.pin-best span { background: var(--accent); color: #111; }
.key.dark-key { background: linear-gradient(90deg, #3c78c8, #3caa50, #dcd23c, #f09628, #e64628); width: 30px; }
.key.cloud-key { background: linear-gradient(90deg, rgb(235 240 255 / 25%), rgb(235 240 255 / 55%), #ebf0ff); width: 30px; }
.key.spot-key { background: var(--accent); border-radius: 50%; }
.spots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.spots .card { margin: 0; }
.spot h3 { margin: 0 0 10px; font-size: 1.15rem; }
.spot .rank { margin: 0 0 2px; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.spot-best { border-color: var(--accent); }
.spot-best .rank { color: var(--accent); }
.spot .go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.inline { display: inline; margin: 0; }
.warn { color: #ffab40; }
:root.red .warn { color: var(--text); }
.trip { border-color: var(--good); }
.trip p { margin: 0; }
.trip form { margin-top: 6px; }
.loading { color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cloud playback under the map */
.playback { display: flex; align-items: center; gap: 12px; padding: 10px 14px 0; }
.playback[hidden] { display: none; }
.playback .play {
	flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--accent); color: #111; font-size: 0.95rem; line-height: 1;
}
.playback input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.frame-label { flex: none; min-width: 11.5em; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--muted); }
.playback[data-kind="now"] .frame-label { color: var(--good); font-weight: 600; }
.playback[data-kind="sat"] .frame-label { color: var(--link); }
@media (max-width: 520px) {
	.playback { flex-wrap: wrap; }
	.frame-label { min-width: 0; width: 100%; order: 3; }
}