/* The Interrupter — shared design system. ONE place for tokens + components.
   Served at /app.css (Hono route, identical local + Vercel). Every page links this;
   pages carry only page-specific layout, never tokens or base component styles. */

:root {
  /* palette */
  --bg:#0f1220; --card:#181c2e; --card-2:#0c0f1c; --ink:#eef1ff; --muted:#9aa3c7;
  --line:#2a3050; --accent:#7c5cff; --accent-ink:#fff;
  /* stoplight (Ben's default; per-person configurable): green=act now, red=ignore, blue=escalate */
  --green:#37d67a; --red:#ff5c72; --blue:#4aa8ff; --amber:#f5a524;
  /* severity → color, overridable per-person at runtime (see /app.js Stoplight.apply) */
  --sev-drop_everything:var(--green); --sev-drop_everything-bg:rgba(55,214,122,.15);
  --sev-can_wait:var(--red);          --sev-can_wait-bg:rgba(255,92,114,.15);
  --sev-needs_decision:var(--blue);   --sev-needs_decision-bg:rgba(74,168,255,.15);
  /* scale */
  --r-sm:8px; --r:10px; --r-lg:16px; --gap:12px;
  --shadow:0 10px 40px #0006;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 var(--font); background:var(--bg); color:var(--ink); }

/* ── layout ── */
.wrap { width:100%; max-width:760px; margin:0 auto; }
.center { min-height:100vh; display:grid; place-items:center; padding:20px; }
.stack { display:flex; flex-direction:column; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.push { margin-left:auto; }

/* ── typography ── */
h1 { margin:0; font-size:20px; letter-spacing:-.3px; }
h1 b, .brand { color:var(--accent); }
h2 { margin:0 0 1.1rem; font-size:1.35rem; }
a { color:var(--muted); text-decoration:none; }
a:hover { color:var(--ink); }
.hint { color:var(--muted); font-size:13px; margin-top:10px; }
.err { color:var(--red); font-size:.85rem; min-height:1.2em; margin-top:.5rem; }
.muted { color:var(--muted); }
kbd { background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:12px; }

/* ── card ── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow); }
.card--flush { box-shadow:none; }

/* ── form controls ── */
.input, input.field, textarea, select {
  width:100%; background:var(--card-2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); padding:.7rem .8rem; font-size:.95rem; font-family:inherit;
}
.input:focus, input.field:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,255,.25);
}
textarea { resize:vertical; }
select { width:auto; }

/* ── buttons ── */
.btn { font-size:.95rem; font-weight:600; border-radius:var(--r); border:1px solid var(--line);
  padding:.7rem 1rem; cursor:pointer; background:var(--card-2); color:var(--ink); }
.btn:hover { border-color:var(--accent); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:progress; }
.btn--primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn--primary:hover { border-color:transparent; filter:brightness(1.06); }
.btn--block { width:100%; }

/* segmented tabs */
.tabs { display:flex; gap:.5rem; margin-bottom:1rem; }
.tabs .btn { flex:1; color:var(--muted); }
.tabs .btn.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* ── pills: stoplight + tags ── */
.pill { display:inline-block; padding:3px 11px; border-radius:999px; font-weight:700; font-size:12px; }
.pill.sev-drop_everything { background:var(--sev-drop_everything-bg); color:var(--sev-drop_everything); }
.pill.sev-can_wait       { background:var(--sev-can_wait-bg); color:var(--sev-can_wait); }
.pill.sev-needs_decision { background:var(--sev-needs_decision-bg); color:var(--sev-needs_decision); }
.tag { display:inline-block; background:var(--card-2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:2px 10px; font-size:12px; margin:4px 4px 0 0; }
.tag--alarm { color:var(--red); border-color:var(--red); }

/* ── code ── */
code, pre { background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.5rem; display:block; font-size:.8rem; color:#a9f; word-break:break-all; }
pre { white-space:pre-wrap; }