/* Lifted verbatim from cheerios-v2 app/api/routes/tv_autopilot_dashboard.py, which used
   to render this page server-side. Dark by default: this is a back-of-house screen. */
:root { color-scheme: dark; --bg:#12141a; --panel:#1b1e26; --line:#2b3040; --ink:#e8eaf0;
        --dim:#9aa3b8; --ok:#4ec9a5; --warn:#e2b341; --off:#6b7280; --hot:#7aa2f7; }
* { box-sizing: border-box; }
body { margin:0; padding:24px; background:var(--bg); color:var(--ink);
       font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
h1 { font-size:18px; margin:0 0 4px; letter-spacing:.02em; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim);
     margin:26px 0 8px; font-weight:600; }
.sub { color:var(--dim); margin-bottom:18px; }
.cards { display:flex; flex-wrap:wrap; gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px;
        padding:12px 14px; min-width:180px; }
.card .k { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.card .v { font-size:18px; margin-top:4px; }
table { border-collapse:collapse; width:100%; background:var(--panel);
        border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
tr:last-child td { border-bottom:none; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px;
        border:1px solid var(--line); }
.on { color:var(--ok); border-color:#2b5c4c; } .offp { color:var(--off); }
.stay { color:var(--dim); } .switch { color:var(--hot); } .manual { color:var(--warn); }
.stale { color:var(--off); } .foot { color:var(--dim); margin-top:26px; font-size:12px; }

/* sign-in: the page is useless without an account, so keep it plain and obvious */
/* an author `display` beats the hidden attribute (which is only UA `display:none`), so
   anything with a display rule has to opt back out explicitly or it never hides */
[hidden] { display: none !important; }
#signin { display:flex; flex-direction:column; gap:1vh; max-width:22rem; margin-bottom:1rem; }
#signin input, #signin button { font:inherit; padding:.5rem .6rem; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); }
#signin button, #signout { background:var(--panel); cursor:pointer; }
#signin button:hover, #signout:hover { border-color:var(--hot); color:var(--hot); }
#signout { font:inherit; padding:.2rem .5rem; margin-left:.6rem; border:1px solid var(--line);
  border-radius:6px; background:var(--panel); color:var(--dim); }