/* TheraGrid.
   Light and dark both defined on tokens; the page paints its own background
   so it never borrows the host's. */

:root {
  --ground:#F6F7F9; --surface:#FFFFFF; --raised:#FAFBFC; --sunken:#F0F2F5;
  --ink:#141A21; --muted:#5A6672; --faint:#8C98A4;
  --line:#E2E6EB; --line-soft:#EEF1F4;
  --accent:#1F6F5C; --accent-ink:#FFFFFF; --accent-bg:#E8F3EF;
  --ok:#1B7F5A; --ok-bg:#E7F4EE;
  --bad:#C0392B; --bad-bg:#FBEBE9;
  --wait:#B7791F; --wait-bg:#FBF3E4;
  --radius:10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0E1216; --surface:#161C22; --raised:#1B222A; --sunken:#11161B;
    --ink:#E8ECF1; --muted:#9AA7B4; --faint:#6B7885;
    --line:#242D36; --line-soft:#1D252D;
    --accent:#3FA588; --accent-ink:#06120E; --accent-bg:#14261F;
    --ok:#4BB98D; --ok-bg:#122A21;
    --bad:#E8705F; --bad-bg:#2B1613;
    --wait:#D6A15A; --wait-bg:#2A2113;
  }
}

:root[data-theme="dark"] {
  --ground:#0E1216; --surface:#161C22; --raised:#1B222A; --sunken:#11161B;
  --ink:#E8ECF1; --muted:#9AA7B4; --faint:#6B7885;
  --line:#242D36; --line-soft:#1D252D;
  --accent:#3FA588; --accent-ink:#06120E; --accent-bg:#14261F;
  --ok:#4BB98D; --ok-bg:#122A21;
  --bad:#E8705F; --bad-bg:#2B1613;
  --wait:#D6A15A; --wait-bg:#2A2113;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font:14px/1.5 "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing:antialiased;
}

[hidden] { display:none !important; }

.spinner {
  display:inline-block; width:13px; height:13px; vertical-align:-2px;
  border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; } }

.boot { padding:56px 22px; color:var(--muted); display:flex; gap:9px; align-items:center; justify-content:center; }

/* ----------------------------------------------------------- sign in ---- */

.signin { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }

.signin .card {
  width:100%; max-width:360px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:28px;
  display:flex; flex-direction:column;
}
.signin h1 { margin:0; font-size:23px; font-weight:600; letter-spacing:-.02em; }
.signin h1 span { color:var(--accent); }
.signin .sub { margin:5px 0 22px; color:var(--muted); font-size:13px; }
.signin label { font-size:12px; font-weight:500; color:var(--muted); margin-bottom:5px; }
.signin input {
  border:1px solid var(--line); background:var(--ground); color:var(--ink);
  border-radius:8px; padding:10px 11px; font-size:16px; margin-bottom:15px;
}
.signin input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.err {
  margin:14px 0 0; padding:9px 11px; font-size:13px;
  background:var(--bad-bg); color:var(--bad); border-radius:8px;
}

/* --------------------------------------------------------------- nav ---- */

.appnav { position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--line); }
.appnav-inner {
  max-width:1340px; margin:0 auto; padding:0 20px; min-height:52px;
  display:flex; align-items:stretch; gap:20px;
}
.brand { display:flex; align-items:center; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-.01em; }
.brand span { color:var(--accent); }
.navlinks { display:flex; align-items:stretch; gap:2px; }
.navlink {
  display:flex; align-items:center; padding:0 13px; font-size:13px; font-weight:500;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
  white-space:nowrap; cursor:pointer; background:none; border-top:0; border-left:0; border-right:0;
}
.navlink:hover { color:var(--ink); }
.navlink.current { color:var(--ink); border-bottom-color:var(--accent); }
/* The page must never scroll sideways, and six page names plus a long centre
   name do not fit a narrow window. The signed-in name is what gives way: it is
   the least useful thing in the bar - the same person all day, and repeated in
   full on the Account page - whereas a clipped "Settings" is a link somebody
   cannot find. */
.who {
  margin-left:auto; display:block; font-size:12px; color:var(--faint);
  white-space:nowrap; min-width:0; flex:0 1 auto;
  overflow:hidden; text-overflow:ellipsis; line-height:52px;
}
@media (max-width: 1150px) { .who { display:none; } }

.navlinks { min-width:0; overflow-x:auto; scrollbar-width:none; }
.navlinks::-webkit-scrollbar { display:none; }
.appnav-inner .btn.ghost { white-space:nowrap; flex:none; }

/* ------------------------------------------------------------ shared ---- */

.wrap { max-width:1340px; margin:0 auto; padding:22px 20px 60px; }

.btn {
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:500;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:8px; padding:8px 14px; min-height:38px;
}
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:disabled { opacity:.55; cursor:default; }
.btn.ghost { border:0; color:var(--muted); align-self:center; min-height:0; padding:6px 10px; }

h2 { font-size:17px; font-weight:600; margin:0 0 4px; }
.lead { color:var(--muted); margin:0 0 18px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:11px; }
.tile { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:13px 15px; }
.tile .n { font-size:25px; font-weight:600; line-height:1.1; }
.tile .l { font-size:11px; font-family:"IBM Plex Mono", ui-monospace, monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:3px; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-top:16px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13px; }
.kv dt { color:var(--faint); }
.kv dd { margin:0; }

.pill { display:inline-block; font-size:11px; font-family:"IBM Plex Mono", ui-monospace, monospace; padding:2px 8px; border-radius:99px; background:var(--sunken); color:var(--muted); }
.pill.on { background:var(--ok-bg); color:var(--ok); }
.pill.off { background:var(--bad-bg); color:var(--bad); }

@media (max-width: 760px) {
  .wrap { padding:16px 12px 48px; }
  .appnav-inner { gap:10px; padding:0 12px; overflow-x:auto; }
  .who { display:none; }
}