/* Interim TV styling, sized for 1920x1080 and scaled with the viewport.
   Will be replaced by the ChatGPT design package. 1vw = 19.2px at 1080p. */
:root {
  --bg: #0b0d10;
  --panel: #15181d;
  --line: #262b33;
  --text: #f4f6f8;
  --muted: #9aa3ad;
  --accent: #d7262e;
  --green: #22c55e;
  --yellow: #facc15;
  --red: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; cursor: none; }
body { font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#app { position: fixed; inset: 0; padding: 2.5vw; display: flex; flex-direction: column; gap: 1.4vw; }

.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vw; text-align: center; }
.muted { color: var(--muted); }
.big { font-size: 2.2vw; }
.code { font-size: 9vw; font-weight: 800; letter-spacing: 1.2vw; color: var(--text); }

header { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 0.2vw solid var(--accent); padding-bottom: 0.8vw; }
header .title { font-size: 2.6vw; font-weight: 800; }
header .title .brand { color: var(--accent); margin-right: 1vw; }
header .meta { font-size: 1.5vw; color: var(--muted); text-align: right; }
header .meta.stale { color: var(--red); font-weight: 600; }

.banner { background: #3b2f06; color: var(--yellow); font-size: 1.5vw; padding: 0.7vw 1.2vw; border-radius: 0.5vw; }
.banner.error { background: #3b0b0b; color: #fca5a5; }

.grid { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2vw; min-height: 0; }
.panel { background: var(--panel); border: 0.1vw solid var(--line); border-radius: 0.8vw; padding: 1.3vw 1.5vw; display: flex; flex-direction: column; min-height: 0; }
.panel h2 { font-size: 1.5vw; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1vw; margin-bottom: 0.6vw; }
.hero { grid-row: span 2; justify-content: center; }
.hero .pct { font-size: 8.4vw; font-weight: 800; line-height: 1; white-space: nowrap; }
.arrow { font-size: 0.45em; vertical-align: 0.35em; margin-right: 0.15em; }
.hero .label { font-size: 1.8vw; color: var(--muted); margin-top: 0.5vw; }
.hero .rows { margin-top: 2vw; display: grid; gap: 0.8vw; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; font-size: 1.6vw; }
.row .k { color: var(--muted); }
.row .v { font-weight: 600; }
.stat { font-size: 4.6vw; font-weight: 800; line-height: 1.05; }
.stat.sm { font-size: 3.4vw; white-space: nowrap; }
.sub { font-size: 1.5vw; color: var(--muted); margin-top: 0.3vw; }
.green { color: var(--green); } .yellow { color: var(--yellow); } .red { color: var(--red); } .none { color: var(--muted); }

.chart { grid-column: span 2; }
.chart svg { flex: 1; width: 100%; min-height: 0; }
.legend { display: flex; gap: 2vw; font-size: 1.5vw; color: var(--muted); }
.legend i { display: inline-block; width: 1.2vw; height: 1.2vw; border-radius: 0.2vw; margin-right: 0.5vw; vertical-align: -0.15vw; }