/**
 * standby.css — the screen the TV shows most of the time.
 *
 * The dashboard runs for about an hour a day; standby has the other
 * twenty-three, so it should be worth looking at rather than a holding
 * message. A large clock, the daylight arc between real sunrise and sunset,
 * today's weather, and what the children need to wear.
 *
 * Ported from frontend/lab/10-ambient.html, cut to what the app actually has
 * data for.
 */

.no-session.standby-rich {
  /* tv.js sets display:flex inline here, so the layout lives on .sb-wrap. */
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.sb-wrap {
  --sb-text: #e2e8f0;
  --sb-muted: #64748b;
  --sb-accent: #14fdce;
  --sb-amber: #eab308;
  --sb-display: 'Rajdhani', sans-serif;
  --sb-mono: 'Share Tech Mono', monospace;

  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 2vh 4vw;
  padding: 5vh 5vw;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
}

.sb-brand {
  grid-column: 1 / -1;
  font: 2vh var(--sb-mono);
  letter-spacing: .5em;
  color: var(--sb-muted);
  text-transform: uppercase;
}
.sb-brand b { color: var(--sb-accent); font-weight: 400; }

/* ── Clock ──────────────────────────────────────────────────────── */

.sb-left { align-self: center; }

.sb-clock {
  display: flex;
  align-items: baseline;
  gap: 1vw;
}
.sb-hm {
  font: 700 22vh/0.85 var(--sb-display);
  color: var(--sb-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sb-ss {
  font: 6vh var(--sb-mono);
  color: var(--sb-accent);
  font-variant-numeric: tabular-nums;
}
.sb-date {
  margin-top: .5vh;
  font: 3vh var(--sb-display);
  font-weight: 600;
  color: var(--sb-muted);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.sb-mode {
  margin-top: 2.5vh;
  font: 1.9vh var(--sb-mono);
  letter-spacing: .3em;
  color: var(--sb-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .8vw;
}
.sb-mode i {
  width: 1.1vh; height: 1.1vh;
  border-radius: 50%;
  background: var(--sb-accent);
  animation: sb-pulse 2.4s ease-in-out infinite;
}
@keyframes sb-pulse { 50% { opacity: .25; } }

/* ── Right column ───────────────────────────────────────────────── */

.sb-right { align-self: center; display: flex; flex-direction: column; gap: 3vh; }

.sb-panel {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(100, 116, 139, .22);
  border-radius: .8vh;
  padding: 2vh 1.6vw;
}
.sb-h {
  font: 1.7vh var(--sb-mono);
  letter-spacing: .35em;
  color: var(--sb-muted);
  text-transform: uppercase;
  margin-bottom: 1.4vh;
}

/* Daylight arc */
.sb-sun svg { width: 100%; height: auto; display: block; }
.sb-sun .arc { fill: none; stroke: rgba(100, 116, 139, .3); stroke-width: 2; }
.sb-sun .lit { fill: none; stroke: var(--sb-amber); stroke-width: 3; stroke-linecap: round; }
.sb-sun .horizon { stroke: rgba(100, 116, 139, .3); stroke-width: 1; stroke-dasharray: 4 5; }
.sb-sun .dot { fill: var(--sb-amber); }
.sb-sun .halo { fill: var(--sb-amber); opacity: .22; }
.sb-sun .lbl { font: 13px var(--sb-mono); fill: var(--sb-muted); }
.sb-sun.night .lit { stroke: #64748b; }
.sb-sun.night .dot, .sb-sun.night .halo { fill: #94a3b8; }

/* Weather */
.sb-wx { display: flex; align-items: center; gap: 1.6vw; }
.sb-temp {
  font: 700 9vh/1 var(--sb-display);
  color: var(--sb-text);
  font-variant-numeric: tabular-nums;
}
.sb-temp sup { font-size: 3vh; vertical-align: super; color: var(--sb-muted); }
.sb-wxtext { display: flex; flex-direction: column; gap: .6vh; }
.sb-sum { font: 2.6vh var(--sb-display); font-weight: 600; color: var(--sb-text); }
.sb-hl { font: 2vh var(--sb-mono); color: var(--sb-muted); letter-spacing: .1em; }
.sb-hl b { color: var(--sb-text); font-weight: 400; }

/* What to wear */
.sb-wear { display: flex; flex-wrap: wrap; gap: .6vw; }
.sb-wear span {
  display: inline-flex;
  align-items: center;
  gap: .45vw;
  font: 1.8vh var(--sb-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sb-text);
  border: 1px solid rgba(100, 116, 139, .35);
  border-radius: .4vh;
  padding: .5vh .7vw;
}
.sb-wear i { color: var(--sb-accent); font-style: normal; }
.sb-wear .none { border: 0; color: var(--sb-muted); padding-left: 0; }

/* ── Footer: the pairing buttons, kept but quietened ────────────── */

.sb-wrap .standby-buttons {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  gap: 1vw;
  opacity: .45;
  transition: opacity .3s;
}
.sb-wrap .standby-buttons:hover { opacity: 1; }

/* The old standby markup is replaced wholesale; hide anything left over. */
.no-session.standby-rich > h1,
.no-session.standby-rich > p,
.no-session.standby-rich > .standby-clock { display: none; }

@media (max-height: 800px) {
  .sb-hm { font-size: 17vh; }
  .sb-temp { font-size: 7vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-mode i { animation: none; }
}