:root {
  --bg:#f4f5f3; --panel:#ffffff; --ink:#1d2321; --muted:#667069; --line:#e2e5e1; --accent:#1f6f5f; --accent-ink:#fff;
  --crit:#b3261e; --high:#c7641a; --med:#9a7b11; --low:#3b6ea5; --sim:#6b4fbb; --ok:#2b7a3d;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing:border-box }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink) }
.hidden { display:none !important }
.muted { color:var(--muted) } .small { font-size:12px } .err { color:var(--crit); min-height:1em }
code, .mono { font-family:var(--mono); font-size:12px }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer }
button.ghost { background:transparent; color:var(--ink); border-color:var(--line) }
button.danger { background:var(--crit); border-color:var(--crit) }
button.warn { background:var(--high); border-color:var(--high) }
button:disabled { opacity:.45; cursor:not-allowed }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; width:100%; background:#fff }
label { display:block; margin:8px 0 } label > span { display:block; font-size:12px; color:var(--muted); margin-bottom:2px }
textarea { min-height:90px }
.login { min-height:100vh; display:grid; place-items:center }
.login .card { width:360px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:14px }
.card h2, .card h3 { margin:0 0 10px; font-size:15px }
header { display:flex; align-items:center; gap:18px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
.brand { font-weight:700; font-size:16px }
nav { display:flex; gap:4px; flex-wrap:wrap }
nav a { padding:6px 10px; border-radius:6px; cursor:pointer; color:var(--ink) }
nav a.active { background:var(--accent); color:#fff }
.who { margin-left:auto; display:flex; gap:10px; align-items:center }
.banner { background:#efe9fb; border-bottom:1px solid #d8ccf5; padding:8px 20px; font-size:13px }
main { padding:18px 20px; max-width:1400px; margin:0 auto }
.grid { display:grid; gap:14px } .g2 { grid-template-columns:1fr 1fr } .g3 { grid-template-columns:repeat(3,1fr) } .g4 { grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .g2,.g3,.g4 { grid-template-columns:1fr } }
.stat { padding:12px 14px } .stat .n { font-size:26px; font-weight:700; line-height:1.1 } .stat .l { color:var(--muted); font-size:12px } .stat .d { font-size:11px; color:var(--muted); margin-top:4px }
table { width:100%; border-collapse:collapse; font-size:13px } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top } th { color:var(--muted); font-weight:600; font-size:12px }
tr.clickable { cursor:pointer } tr.clickable:hover { background:#f6f8f6 }
.tag { display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; border:1px solid transparent }
.tag.sim { background:#efe9fb; color:var(--sim); border-color:#d8ccf5 }
.tag.live { background:#e4f3e8; color:var(--ok) }
.tag.nc { background:#eee; color:#555 }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; color:#fff; background:var(--muted) }
.pill.critical, .pill.crit { background:var(--crit) } .pill.high { background:var(--high) } .pill.medium { background:var(--med) } .pill.low { background:var(--low) } .pill.none { background:#9aa29d }
.pill.open { background:var(--crit) } .pill.acknowledged { background:var(--high) } .pill.resolved, .pill.completed, .pill.sent_observed, .pill.delivered_reported, .pill.connected, .pill.simulated, .pill.live { background:var(--ok) }
.pill.dismissed, .pill.cancelled, .pill.retired, .pill.not_configured, .pill.registered { background:#9aa29d }
.pill.draft, .pill.pending { background:var(--low) } .pill.in_review { background:var(--med) } .pill.approved, .pill.queued, .pill.sending, .pill.shadow { background:var(--sim) }
.pill.paused, .pill.overdue, .pill.uncertain, .pill.needs_relink, .pill.disconnected { background:var(--high) } .pill.failed { background:var(--crit) }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.right { margin-left:auto }
.evidence { font-family:var(--mono); font-size:12px; background:#f7f8f6; padding:6px 8px; border-radius:6px; white-space:pre-wrap }
.msg { padding:8px 10px; border-bottom:1px solid var(--line) } .msg.out { background:#eef6f2 } .msg .m { color:var(--muted); font-size:11px }
.toast { position:fixed; bottom:18px; right:18px; background:#1d2321; color:#fff; padding:10px 14px; border-radius:8px; max-width:420px; z-index:20 }
.fresh { font-size:11px; color:var(--muted) } .stale { color:var(--high); font-weight:600 }
.bar { height:8px; background:#e9ece8; border-radius:4px; overflow:hidden; display:flex } .bar i { display:block; height:100% } .bar .s { background:var(--ok) } .bar .f { background:var(--crit) } .bar .u { background:var(--high) } .bar .c { background:#9aa29d }
details summary { cursor:pointer; color:var(--accent) }
.note { font-size:12px; color:var(--muted); border-left:3px solid var(--line); padding-left:8px; margin:8px 0 }

/* annotation form and generic dialog forms (task completion, delivery resolve/mark) */
dialog#annDialog, dialog#dlg { width:min(880px, 94vw); max-height:92vh; border:1px solid var(--line); border-radius:12px; padding:0; background:var(--panel); color:var(--ink) }
dialog#annDialog::backdrop, dialog#dlg::backdrop { background:rgba(29,35,33,.45) }
dialog#annDialog form, dialog#dlg form { padding:18px 20px; overflow:auto; max-height:92vh }
.ann-ctx { font-size:12px; border-left:3px solid var(--line); padding-left:8px; margin:6px 0 } .ann-ctx .who { color:var(--muted) }
.ann-target { border:2px solid var(--accent); border-radius:8px; padding:8px 10px; background:#f3f8f6; white-space:pre-wrap }
.choices { display:grid; grid-template-columns:repeat(3,1fr); gap:6px } .choices label { margin:0; border:1px solid var(--line); border-radius:8px; padding:6px 8px; cursor:pointer; display:flex; gap:8px; align-items:flex-start }
.choices label:has(input:checked) { border-color:var(--accent); background:#eef6f3 } .choices input { width:auto; margin-top:3px } .choices small { display:block; color:var(--muted) }
.preds td, .preds th { padding:3px 6px }
.choices.c1 { grid-template-columns:1fr } .choices.c2 { grid-template-columns:1fr 1fr }
.cands { max-height:40vh; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:4px }
.cands label { display:flex; gap:8px; align-items:flex-start; margin:0; padding:6px 8px; border-radius:6px } .cands label:has(input:checked) { background:#eef6f3 } .cands input { width:auto; margin-top:3px }