/* Shared variables + TV view. Target 1920x1080, readable at 3 metres. Sizes use vh so it scales.
   Design for calm, predictable, visual cues: one clear NOW, one clear NEXT, a path of the whole day,
   slow gentle motion only, no flashing, no alarm red. */
:root {
  --bg: #0f1424;
  --card: #1a2138;
  --card2: #232c49;
  --fg: #ffffff;
  --muted: #9aa5c4;
  --accent: #4da3ff;
  --warn: #ffb454;
  --ok: #5ad19a;
  --safe: 2.8vh 3.5vw; /* overscan safe margin */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ---------- TV ---------- */
body.tv {
  overflow: hidden;
  font-size: 3vh;
  background: radial-gradient(120% 90% at 50% 0%, #1d2850 0%, var(--bg) 62%);
}

body.tv #app {
  height: 100vh;
  padding: var(--safe);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2.2vh;
}

/* header: analog clock, greeting, digital time */
.top { display: flex; align-items: center; gap: 2.4vw; }
.analog { height: 14vh; width: 14vh; flex: none; filter: drop-shadow(0 0.6vh 1.2vh rgba(0,0,0,.35)); }
.analog .face { fill: #fdfdff; }
.analog .tick { stroke: #2a3350; stroke-width: 1.2; stroke-linecap: round; }
.analog .num { fill: #2a3350; font-size: 9px; font-weight: 800; font-family: inherit; }
.analog .hh { stroke: #2a3350; stroke-width: 4.5; stroke-linecap: round; }
.analog .mh { stroke: #4da3ff; stroke-width: 3; stroke-linecap: round; }
.analog .hub { fill: #2a3350; }
.hello { flex: 1; }
.greet { font-size: 6vh; font-weight: 800; }
.date { font-size: 3.2vh; color: var(--muted); margin-top: 0.4vh; }
.digital { font-size: 10vh; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.digital small { font-size: 3.6vh; font-weight: 700; color: var(--muted); }

/* NOW and NEXT */
.stage { display: grid; grid-template-columns: 2.15fr 1fr; gap: 2vw; min-height: 0; }

.now, .next {
  --c: #4da3ff;
  border-radius: 3vh;
  background: color-mix(in srgb, var(--c) 20%, var(--card));
  border: 0.7vh solid color-mix(in srgb, var(--c) 75%, transparent);
  min-height: 0;
  overflow: hidden;
}
.enter { animation: enter 0.7s ease-out both; }

.badge {
  display: inline-block;
  background: var(--c);
  color: #10131f;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 2.6vh;
  padding: 0.7vh 1.8vh;
  border-radius: 5vh;
  justify-self: start;
}

.now { padding: 2.6vh 2.4vw; display: grid; grid-template-columns: 1fr auto; gap: 2vw; align-items: center; }
.now .main { display: grid; gap: 1.8vh; align-content: center; min-width: 0; }
.headline { display: flex; align-items: center; gap: 2vw; }
.now .icon { font-size: 15vh; line-height: 1; animation: float 3.4s ease-in-out infinite; }
.now h1 { font-size: 9vh; line-height: 1.02; margin: 0; font-weight: 800; }
.range { font-size: 3.6vh; color: #d9e0f7; margin-top: 0.8vh; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1vh 2vw; font-size: 3.5vh; }
.checks.two { grid-template-columns: 1fr 1fr; }
.checks li { display: flex; align-items: center; gap: 1.2vw; }
.checks .box {
  flex: none; width: 4.4vh; height: 4.4vh; border-radius: 1.2vh;
  border: 0.45vh solid color-mix(in srgb, var(--c) 80%, white);
  display: grid; place-items: center; font-weight: 800; color: #10131f; font-size: 3vh;
}
.checks li.done { color: var(--muted); text-decoration: line-through; }
.checks li.done .box { background: var(--ok); border-color: var(--ok); }

.side { display: grid; justify-items: center; gap: 1.2vh; }
.timer { height: 30vh; width: 30vh; }
.timer .track { fill: rgba(255, 255, 255, 0.1); }
.timer .pie { fill: var(--c); transition: fill 1s; }
.count { text-align: center; }
.count .n { font-size: 10vh; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.count .u { font-size: 3vh; color: #d9e0f7; }
.now.waiting .count .n { font-size: 14vh; }
.now.almost { border-color: var(--warn); }
.now.almost .timer .pie { fill: var(--warn); }
.now.almost .count .n { color: var(--warn); }

.now.idle { grid-template-columns: 1fr; }
.now.idle h1 { font-size: 12vh; }
.now.idle .icon { font-size: 22vh; }

.next { display: grid; justify-items: center; align-content: center; gap: 1.2vh; text-align: center; padding: 2vh 1.5vw; }
.next .icon { font-size: 12vh; line-height: 1; }
.next h2 { font-size: 5.6vh; margin: 0; line-height: 1.08; }
.next .at { font-size: 3.6vh; color: #d9e0f7; }
.next.none { border-style: dashed; background: transparent; border-color: rgba(255,255,255,.25); }
.tomorrow { font-size: 4.6vh; font-weight: 800; color: var(--muted); }

/* dynamic movement panel (replaces the checklist while the animation is on) */
.now.move-on { grid-template-columns: 1fr 22vh; }
.now.move-on .main { gap: 1.2vh; }
.now.move-on .icon { font-size: 8vh; }
.now.move-on h1 { font-size: 5.4vh; white-space: nowrap; }
.now.move-on .range { font-size: 3vh; margin-top: 0.2vh; }
.now.move-on .timer { height: 21vh; width: 21vh; }
.now.move-on .count .n { font-size: 7.4vh; }
.now.move-on .count .u { font-size: 2.4vh; }
.move { display: grid; grid-template-columns: auto 1fr; gap: 2vw; align-items: center; }
.stagefig { background: rgba(255, 255, 255, 0.07); border-radius: 2.4vh; padding: 0.8vh 1vh; }
.fig { height: 26vh; width: 30vh; display: block; }
.mday { font-size: 2.4vh; color: #d9e0f7; }
.mname { font-size: 4.8vh; font-weight: 800; line-height: 1.05; margin: 0.5vh 0; }
.mcue { font-size: 2.8vh; line-height: 1.22; color: #e8ecfa; }
.msteps { display: flex; flex-wrap: wrap; gap: 0.8vh 0.9vw; margin-top: 1.4vh; }
.mstep { padding: 0.6vh 1.4vh; border-radius: 5vh; background: rgba(255, 255, 255, 0.1); font-size: 2.3vh; font-weight: 700; white-space: nowrap; }
.mstep.on { background: var(--c); color: #10131f; }
.mstep.done { opacity: 0.55; }

/* shown only when the TV is running on a test clock */
.testpill { position: fixed; left: 1.6vw; bottom: 1.2vh; z-index: 5; font-size: 2.2vh; font-weight: 800; letter-spacing: 0.1em; color: #10131f; background: var(--warn); border-radius: 5vh; padding: 0.8vh 1.8vh; }

/* the "turn sound on" button: small and tucked in the corner */
.soundpill { position: fixed; right: 1.6vw; bottom: 1.2vh; z-index: 5; font: inherit; font-size: 2.2vh; color: #d9e0f7; background: rgba(255, 255, 255, 0.1); border: 0; border-radius: 5vh; padding: 0.8vh 1.8vh; cursor: pointer; }
.soundpill.on { opacity: 0.35; }

/* the path of the day */
.journey { position: relative; display: flex; padding-bottom: 0.5vh; }
.journey .track {
  position: absolute; top: 4.6vh; height: 1vh; border-radius: 1vh;
  left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2);
  background: rgba(255, 255, 255, 0.14);
}
.journey .fill { height: 100%; width: 0; border-radius: 1vh; background: var(--ok); transition: width 1s linear; }
.stone { --c: #4da3ff; flex: 1; text-align: center; position: relative; padding: 0 0.4vw; min-width: 0; }
.stone .dot {
  position: relative; margin: 0 auto 2.2vh; width: 9.2vh; height: 9.2vh; border-radius: 50%;
  display: grid; place-items: center; font-size: 5vh;
  background: var(--card2); border: 0.8vh solid var(--c);
}
.stone .t { font-size: 2.4vh; color: var(--muted); font-variant-numeric: tabular-nums; }
.stone .nm { font-size: 2.7vh; font-weight: 700; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stone.later .dot { opacity: 0.6; }
.stone.later .nm { color: #cdd5ee; }
.stone.done .dot { background: color-mix(in srgb, var(--c) 45%, var(--card2)); }
.stone.done .emo { opacity: 0.85; }
.stone.done .nm, .stone.done .t { color: var(--muted); }
.stone .tick {
  position: absolute; right: -0.8vh; top: -0.8vh; width: 3.8vh; height: 3.8vh; border-radius: 50%;
  background: var(--ok); color: #10131f; font-size: 2.6vh; font-weight: 800; display: grid; place-items: center;
}
.stone.current .dot { transform: scale(1.22); background: var(--c); animation: glow 2.8s ease-in-out infinite; }
.stone.current .nm { color: #fff; }
.stone.soon .dot { animation: glow 2.8s ease-in-out infinite; }

/* celebration (finished): a few slow falling shapes */
.fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.conf { position: absolute; top: -8vh; font-size: 5vh; animation: fall 8s linear 2 both; }

@keyframes enter { from { opacity: 0; transform: translateY(2vh) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4vh); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } 50% { box-shadow: 0 0 0 1.6vh color-mix(in srgb, var(--c) 32%, transparent); } }
@keyframes fall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(115vh) rotate(180deg); opacity: 1; } }

/* calm mode: ?calm in the URL, or the device's "reduce motion" setting */
body.calm *, body.calm *::before { animation: none !important; transition: none !important; }
body.calm .fx { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.tv *, body.tv *::before { animation: none !important; transition: none !important; }
  body.tv .fx { display: none; }
}