/* Relay status page. Same token discipline as the appliance: every colour,
   size and radius is declared here in :root and used by name. */
:root {
  --bg: #12161c;
  --surface: #1a1f27;
  --surface-2: #222833;
  --edge: #2b323d;
  --ink: #eef1f5;
  --ink-2: #a8b0bc;
  --ink-3: #767e8a;
  --accent: #eaa33f;
  --good: #58c07c;
  --bad: #e4685a;
  --pending: #8b93a0;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 19px; --fs-xl: 24px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --tap: 44px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-md)/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: var(--sp-4);
  max-width: 760px;
  margin-inline: auto;
}
.hidden { display: none !important; }
h1 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-3); }
.muted, .note { color: var(--ink-2); font-size: var(--fs-sm); }
.note b { color: var(--ink); font-weight: 600; }
.boot { padding: var(--sp-6); text-align: center; color: var(--ink-3); }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }

.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.login { display: grid; place-items: center; min-height: 70vh; }
.login .card { max-width: 420px; width: 100%; }

label { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-1); }
input {
  width: 100%; min-height: var(--tap);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: 0 var(--sp-3); font-size: var(--fs-md); margin-bottom: var(--sp-3);
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button { font: inherit; cursor: pointer; min-height: var(--tap); border-radius: var(--r-sm); }
.primary { background: var(--accent); color: #1b1206; border: none; padding: 0 var(--sp-4); font-weight: 600; }
.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--edge); padding: 0 var(--sp-4); }
.link-btn { background: none; border: none; color: var(--ink-2); text-decoration: underline; min-height: auto; padding: var(--sp-1) var(--sp-2); }
.link-btn.danger { color: var(--bad); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.inline-form { display: grid; gap: 0; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--edge);
}
.rows li:first-child { border-top: none; }
.rows.compact li { padding: var(--sp-2) 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-weight: 600; font-size: var(--fs-md); }
.row-sub { display: block; color: var(--ink-2); font-size: var(--fs-xs); }

.badge {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); white-space: nowrap;
}
.badge.ok { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.badge.bad { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.badge.pending { background: var(--surface-2); color: var(--pending); }

[role="status"] { font-size: var(--fs-sm); color: var(--ink-2); min-height: 1.2em; }