:root {
  color-scheme: dark;
  --fg: #fff;
  --dim: #9aa0a6;
  --line: #2a2d31;
  --btn: #121417;
  --good: #34d27b;
  --fair: #ffc53d;
  --bad: #ff5c5c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #6aa8ff; outline-offset: 2px; }

#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top { display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 6px 16px 0; }
.gps { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--dim); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fair); }
.gps.good .dot { background: var(--good); }
.gps.bad .dot { background: var(--bad); }

/* The number is sized from the space it has: container units, digits in --d (set by app.js). */
.dial {
  container-type: size;
  min-height: 0;
  overflow: hidden; /* the font's empty space above the digits must not spill out when HUD flips it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.speed {
  --d: 2;
  font-size: min(calc(90cqw / (var(--d) * 0.66)), calc(100cqh - 60px));
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.speed.stale { color: #5f6368; }
.unit {
  min-height: 44px;
  min-width: 88px;
  padding: 0 20px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--btn);
  color: var(--dim);
  font-size: 20px;
  font-weight: 600;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 6px 8px; width: 100%; max-width: 640px; justify-self: center; }
.label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.val { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { font-size: 15px; font-weight: 400; color: var(--dim); margin-left: 4px; }

.bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 8px 12px 14px; }
.bar button {
  min-height: 44px;
  min-width: 64px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--btn);
  font-size: 16px;
}
.bar button[aria-pressed="true"] { background: var(--fg); color: #000; border-color: var(--fg); }

/* HUD: phone flat on the dash, screen up, top toward the windshield (the way you'd read it):
   the windshield shows it upside down, so flip it top to bottom and it reads right at night. */
body.hud .dial, body.hud .stats { transform: scaleY(-1); }
body.hud .top { visibility: hidden; }

/* Phone on its side: number left, trip and buttons right. */
@media (orientation: landscape) and (max-height: 600px) {
  #app { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; }
  .top { grid-column: 1 / -1; }
  .dial { grid-column: 1; grid-row: 2 / 4; }
  .stats { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; align-content: center; gap: 12px; padding: 0 20px; width: auto; max-width: none; justify-self: stretch; }
  .bar { grid-column: 2; grid-row: 3; flex-direction: column; align-items: stretch; padding: 8px 20px 12px; }
}

.sheet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
}
.sheet[hidden] { display: none; }
.card { max-width: 340px; text-align: center; }
.card h1 { margin: 0 0 8px; font-size: 30px; }
.card p { margin: 0 0 22px; font-size: 17px; line-height: 1.4; color: var(--dim); }
.primary {
  min-height: 52px;
  min-width: 180px;
  padding: 0 28px;
  border: 0;
  border-radius: 26px;
  background: var(--good);
  color: #000;
  font-size: 19px;
  font-weight: 700;
}
a.primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }