:root {
  --bg: #0d1117;
  --panel: #161b22;
  --line: #2a313c;
  --text: #e6e9ef;
  --muted: #8b95a5;
  --accent: #7cb7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1rem; color: var(--muted); margin: 1.5rem 0 .5rem; }
[hidden] { display: none !important; }

header.site {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  align-items: baseline;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.2rem; color: var(--text); }
header nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.account { margin-left: auto; }
.account form { margin: 0; }
.alert { color: #ff9b8e; margin: 0 0 .75rem; }

.signin { display: grid; gap: .75rem; max-width: 320px; }
.signin input {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .4rem .6rem;
}

main { max-width: 1400px; margin: 0 auto; padding: 1rem; }

.hero, .stage img { display: block; width: 100%; height: auto; border-radius: 6px; background: #000; }
.stage { aspect-ratio: 16 / 9; }

.player { position: relative; container-type: inline-size; }
.player:fullscreen { background: #000; }
.player:fullscreen .hero { height: 100%; border-radius: 0; }
.player .clock {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .1rem .5rem;
  border-radius: 4px;
  background: rgb(0 0 0 / .55);
  font-variant-numeric: tabular-nums;
}
.player:has(.overlay:not([hidden])) .clock { display: none; }

.player-buttons { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; }
.player-buttons button {
  font: inherit;
  font-size: .75rem;
  color: var(--text);
  background: rgb(0 0 0 / .55);
  border: 0;
  border-radius: 4px;
  padding: .1rem .5rem;
  cursor: pointer;
}
.player-buttons button[aria-pressed="false"] { color: var(--muted); }

/* The overlay. --u is one unit of the design, which sits at three quarters size on a 1280-wide
   player: everything scales with the player, so it covers the same part of the picture at any size.
   It sits above the video's own controls, and clicks go through it to them. */
.overlay {
  --u: calc(100cqw / 1707);
  --accent: #f0592a;
  --faint: rgb(255 255 255 / .72);
  position: absolute;
  left: calc(32 * var(--u));
  bottom: max(calc(32 * var(--u)), 3.25rem);
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgb(20 20 22 / .7);
  box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .25);
  color: #fff;
  font-size: calc(10 * var(--u));
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.overlay svg { display: block; overflow: visible; }
.overlay text { text-anchor: middle; fill: #fff; }
.overlay-rule { width: calc(1 * var(--u)); align-self: stretch; background: rgb(255 255 255 / .16); }
.overlay-label { font-size: 1em; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--faint); }

.overlay-dial { display: flex; flex-direction: column; align-items: center; gap: .2em; font-size: 1.1em; color: var(--faint); }
.overlay-dial svg { width: calc(200 * var(--u)); }
.overlay .night { fill: none; stroke: rgb(255 255 255 / .14); stroke-width: 8; }
.overlay .daylight { fill: none; stroke: var(--accent); stroke-width: 8; opacity: .85; }
.overlay .ray { stroke: rgb(255 255 255 / .75); stroke-width: 1.4; stroke-linecap: round; }
.overlay .ray-time { font-size: 9px; fill: var(--faint); }
.overlay .sun { fill: #fff; stroke: #141416; stroke-width: 1.5; }
.overlay .sun.down { fill: #8a8a90; }
.overlay .sun-glow { fill: var(--accent); opacity: .3; }
.overlay .sun-glow.down { opacity: 0; }
.overlay .time { font-size: 28px; font-weight: 300; }
.overlay .date { font-size: 9.5px; font-weight: 600; letter-spacing: 1px; fill: rgb(255 255 255 / .78); }

/* A fixed width, or the panel would change size each time the trend's words do. */
.overlay-barometer { display: flex; flex-direction: column; align-items: center; gap: .4em; width: calc(140 * var(--u)); }
.overlay-barometer svg { width: calc(120 * var(--u)); }
.overlay-barometer .overlay-label { font-size: 1.1em; letter-spacing: .02em; text-transform: none; }
.overlay-barometer .overlay-axis { width: calc(120 * var(--u)); }
.overlay .scale { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 1.4; }
.overlay .tick { stroke: rgb(255 255 255 / .6); stroke-width: 1.4; }
.overlay .scale-label { font-size: 8px; fill: rgb(255 255 255 / .66); }
.overlay .needle { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.overlay .ghost { stroke: rgb(255 255 255 / .35); stroke-width: 1; stroke-dasharray: 2 2; }
.overlay .pivot { fill: #fff; }
.overlay .pressure { font-size: 15px; }

.overlay-temps { display: flex; flex-direction: column; gap: .6em; width: calc(350 * var(--u)); }
.overlay-temps svg { width: 100%; }
.overlay-values { display: flex; align-items: center; gap: .5em; }
.overlay-values .key { width: 1.2em; height: .3em; border-radius: 999px; background: #fff; }
.overlay-values .key.roof { background: var(--accent); }
.overlay-values .value { font-size: 1.7em; line-height: 1; margin-right: .2em; white-space: nowrap; }
.overlay-values .value.small { font-size: 1.3em; margin-right: 0; color: rgb(255 255 255 / .85); }
.overlay-values .cpu { margin-left: auto; }
.overlay polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.overlay .roof-day { stroke: var(--accent); stroke-opacity: .25; stroke-width: 1.2; }
.overlay .outside-day { stroke: rgb(255 255 255 / .22); stroke-width: 1.2; }
.overlay .roof-so-far { stroke: var(--accent); stroke-width: 1.8; }
.overlay .outside-so-far { stroke: #fff; stroke-width: 1.8; }
.overlay .pressure-day { stroke: var(--accent); stroke-opacity: .25; stroke-width: 1.2; }
.overlay .pressure-so-far { stroke: var(--accent); stroke-width: 1.8; }
.overlay .pressure-now { fill: var(--accent); }
.overlay .head { stroke: rgb(255 255 255 / .3); }
.overlay .roof-now { fill: var(--accent); }
.overlay .outside-now { fill: #fff; }
.overlay-axis { display: flex; justify-content: space-between; letter-spacing: .06em; color: rgb(255 255 255 / .66); }

/* On a small player the whole panel would be too small to read, so it's the dial alone. */
@container (max-width: 900px) {
  .overlay { --u: min(calc(100cqw / 760), .6px); left: calc(16 * var(--u)); }
  .overlay-rule, .overlay-barometer, .overlay-temps, .overlay-dial div, .overlay .ray-time { display: none; }
}

.readings { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .75rem 0; }
.readings dt { color: var(--muted); font-size: .8rem; }
.readings dd { margin: 0; font-variant-numeric: tabular-nums; }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: .75rem 0; }
.bar form { margin: 0; }
.kept, .notice { color: #7ee2a8; }
.notice { margin: 0 0 .75rem; }

button, select {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .3rem .75rem;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.grid.large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.strip a { flex: 0 0 170px; }
.grid img, .strip img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--panel); }
.grid span, .strip span { display: block; color: var(--muted); font-size: .8rem; padding-top: .1rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.list span { color: var(--muted); }