/* Red Light, Green Light: a traffic light is the tap target. The whole screen turns green, red, or yellow,
   with big white text, so color is never the only signal. */
:root {
  --accent: var(--stop);
  --go-full: #17794f;
  --stop-full: #c8203a;
  --housing: #1d2333;
  --housing-line: #1d2333;
  --pill-line: var(--go);
  --pill-on: var(--go);
  --pill-on-fg: var(--on-go);
  --pill-focus: var(--stop);
}
@media (prefers-color-scheme: dark) {
  :root { --go-full: #146c46; --stop-full: #a3172b; --housing: #0b1020; --housing-line: #3a4766; }
}
h1 { font-size: 2.2rem; line-height: 1.05; text-wrap: balance; }
body.go { background: var(--go-full); }
body.stop { background: var(--stop-full); }
body.slow { background: var(--sun); }
.go, .stop { --lit-fg: #fff; --lit-muted: #e6f4ec; }
.stop { --lit-muted: #ffe3e6; }
.slow { --lit-fg: #1d2333; --lit-muted: #1d2333; }
.lit h1, .lit .status, .lit .back, .lit .count { color: var(--lit-fg); }
.lit .sub, .lit .round, .lit .seg > span, .lit .mode-note { color: var(--lit-muted); }
.lit .status { font-size: 2.6rem; letter-spacing: 1px; min-height: 0; }
.lit .main-btn { background: #fff; color: #1d2333; }
.lit .seg button[aria-pressed="true"] { border-color: #fff; }
.lit .back:focus-visible, .lit .main-btn:focus-visible { outline-color: var(--lit-fg); }

.light-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  width: min(50vw, 200px); aspect-ratio: 1; max-width: 100%; border-radius: 24px;
}
.light-btn:focus-visible { outline: 4px solid var(--stop); outline-offset: 6px; }
.lit .light-btn:focus-visible { outline-color: var(--lit-fg); }
.light-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.housing { fill: var(--housing); stroke: var(--housing-line); stroke-width: 4; }
.visor { fill: none; stroke: #4a5470; stroke-width: 6; stroke-linecap: round; }
.lamp { transition: opacity .2s; transform-box: fill-box; transform-origin: center; }
.bulb { stroke: transparent; stroke-width: 5; transition: stroke .2s; }
.face { opacity: 0; fill: #1d2333; stroke: #1d2333; stroke-width: 3.5; stroke-linecap: round; }
.face path { fill: none; }
.lit .lamp { opacity: .2; }
.go .lamp-g, .stop .lamp-r, .slow .lamp-y { opacity: 1; }
.go .lamp-g .bulb, .stop .lamp-r .bulb, .slow .lamp-y .bulb { stroke: #fff; }
.go .lamp-g .face, .stop .lamp-r .face, .slow .lamp-y .face { opacity: 1; }
.go .lamp-g { animation: pulse .6s ease-in-out infinite alternate; }
.stop .lamp-r { animation: pop .25s ease-out 1; }
.slow .lamp-y { animation: pulse 1.6s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes pop { from { transform: scale(1.3); } to { transform: scale(1); } }

.walk {
  width: 100%; background: var(--card); border: 3px dashed var(--sun); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.walk .label { font-size: .75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.walk p { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.15; text-wrap: balance; }

.count { font-family: var(--display); font-size: 1.1rem; color: var(--muted); min-height: 1.4em; margin: -6px 0 0; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none !important; }
  body { transition: none; }
}