/* Component library for the redesign. Colour ONLY through tokens.css custom
   properties — no literal colour in this file (tests/web/test_ui_design_system.py
   scans for it). Every safety state pairs colour with a word AND a shape, so
   a colour-blind reader (or a black-and-white printout) still reads state. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-sunken);
  color: var(--ink);
  font: var(--text-body)/var(--line-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--airport); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
code, kbd, .mono { font-family: var(--mono); font-size: .9em; }

/* ---- shell / header ---------------------------------------------------- */
.ui-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ui-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.ui-header .brand { font-weight: 700; }
.ui-header nav { display: flex; gap: var(--space-2); margin-left: auto; }
.ui-header nav a {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--text-label);
}
.ui-header nav a[aria-current="page"] { background: var(--surface-2); }
.ui-main { flex: 1; padding: var(--space-3); }

.theme-toggle {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
  cursor: pointer; font-size: var(--text-label);
}

/* ---- status tile -------------------------------------------------------- */
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--space-3);
  box-shadow: var(--shadow);
}
.tile h3 {
  margin: 0 0 var(--space-2); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
}
.tile .value { font-size: var(--text-ops); font-weight: 700; }

/* ---- state badge: word + shape + colour, NEVER colour alone ------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: 999px; font-weight: 600;
  font-size: var(--text-label); border: 1.5px solid transparent;
}
.badge svg { width: 14px; height: 14px; flex: none; }
.badge--quiet {  /* octagon: resting/safe, NOT an alarm colour */
  color: var(--state-quiet-fg); background: var(--state-quiet-bg);
  border-color: var(--state-quiet-line);
}
.badge--armed {  /* dashed outline: getting ready */
  color: var(--state-armed-fg); background: var(--state-armed-bg);
  border: 1.5px dashed var(--state-armed-line);
}
.badge--emit {  /* the ONE loud colour on the whole page */
  color: var(--state-emit-fg); background: var(--state-emit-bg);
  border-color: var(--state-emit-line);
}
.badge--fault {
  color: var(--state-fault-fg); background: var(--state-fault-bg);
  border-color: var(--state-fault-line);
}
.badge--warn {
  color: var(--state-warn-fg); background: var(--state-warn-bg);
  border-color: var(--state-warn-line);
}
.badge--link-ok { color: var(--state-link-ok); background: transparent; border: none; padding-left: 0; }

/* stale/unknown input: grey hatch + literal "?" — never plain grey */
.badge--stale {
  color: var(--state-stale-fg);
  background: repeating-linear-gradient(45deg, var(--state-stale-bg),
    var(--state-stale-bg) 6px, var(--surface) 6px, var(--surface) 10px);
  border: 1.5px dotted var(--state-stale-line);
}
.badge--stale::before { content: "?"; font-weight: 800; }

/* ---- freshness badge (ui.js flips the class past the limit) ------------- */
.freshness { font-size: var(--text-label); font-family: var(--mono); }
.freshness[data-state="fresh"] { color: var(--ink-muted); }
.freshness[data-state="stale"] {
  color: var(--state-stale-fg); background: var(--state-stale-bg);
  border: 1px dotted var(--state-stale-line); border-radius: var(--radius-sm);
  padding: 0 4px;
}
.freshness[data-state="stale"]::before { content: "? "; }

/* ---- veto list ----------------------------------------------------------- */
.veto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; }
.veto-list li {
  background: var(--surface); padding: var(--space-2) var(--space-3);
  display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--space-2);
  align-items: center; font-size: var(--text-body);
}
.veto-list .interlock-id {
  font-family: var(--mono); font-weight: 700; color: var(--ink-muted);
}
.veto-list .raw-code { font-family: var(--mono); font-size: var(--text-label); color: var(--ink-faint); }
.veto-list .age { font-size: var(--text-label); color: var(--ink-faint); white-space: nowrap; }

/* ---- alarm banner --------------------------------------------------------- */
.alarm-banner {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-weight: 600; border: 1.5px solid transparent;
}
.alarm-banner--fault { background: var(--state-fault-bg); color: var(--state-fault-fg); border-color: var(--state-fault-line); }
.alarm-banner--warn { background: var(--state-warn-bg); color: var(--state-warn-fg); border-color: var(--state-warn-line); }
.alarm-banner--quiet { background: var(--state-quiet-bg); color: var(--state-quiet-fg); border-color: var(--state-quiet-line); }

/* ---- folded section -------------------------------------------------------- */
details.fold {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 0;
}
details.fold > summary {
  cursor: pointer; padding: var(--space-2) var(--space-3); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: var(--space-1);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; transition: transform .1s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > .fold-body { padding: 0 var(--space-3) var(--space-3); }

/* ---- table (sticky header) -------------------------------------------------- */
table.ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
table.ui-table th, table.ui-table td {
  text-align: left; padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--line);
}
table.ui-table thead th {
  position: sticky; top: 0; background: var(--surface-2); color: var(--ink-muted);
  font-size: var(--text-label); text-transform: uppercase; letter-spacing: .03em;
}

/* ---- label chip: [M] measured / [O] operator / [D] derived / [G] guess ---- */
.chip { display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: var(--text-label); padding: 0 5px; border-radius: 4px; }
.chip--m { color: var(--chip-m-fg); background: var(--chip-m-bg); }
.chip--o { color: var(--chip-o-fg); background: var(--chip-o-bg); }
.chip--d { color: var(--chip-d-fg); background: var(--chip-d-bg); }
.chip--g { color: var(--chip-g-fg); background: var(--chip-g-bg); }

/* ---- buttons --------------------------------------------------------------- */
button { font: inherit; }
.btn-veto {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-4);
  background: var(--btn-veto-bg); color: var(--btn-veto-fg);
  border: 2px solid var(--btn-veto-border); outline: 2px solid var(--btn-veto-bg);
  border-radius: var(--radius-sm);
  font-weight: 800; letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn-veto:hover { background: var(--btn-veto-hover-bg); }
.btn-veto svg { width: 20px; height: 20px; }
.btn-request {
  min-height: 44px; padding: 0 var(--space-3); background: transparent;
  color: var(--ink); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.btn-request:hover { background: var(--surface-2); }
/* Never build a button from the emit colour: it must mean ONLY "sound is on". */

/* ---- product tints (navigation only) --------------------------------------- */
.tint-airport { color: var(--airport); background: var(--airport-tint); }
.tint-roof { color: var(--roof); background: var(--roof-tint); }

/* ---- style-guide demo helpers ----------------------------------------------- */
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.section { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }

@media print {
  body { background: var(--print-bg); color: var(--print-fg); }
  .ui-header, .theme-toggle, .btn-veto, .btn-request { display: none !important; }
  .tile, details.fold, .veto-list li { border-color: var(--print-line) !important; box-shadow: none !important; }
}