/* mh.css — the shared design grammar for every monsterhouse surface.
 *
 * SINGLE SOURCE OF TRUTH. Do not fork. Each Worker copies this into its own
 * public/ at deploy time (wrangler [build] hook) and links it BEFORE its own
 * styles.css, so surface stylesheets layer on top of one vocabulary. Served
 * same-origin to satisfy each surface's `default-src 'self'` CSP.
 *
 * Owns: design tokens (color, type, mono) + primitives common to all surfaces
 * (toggle switch, status banner, badge). Surface-specific layout lives in each
 * surface's styles.css. */

:root {
  --bg: #0a0a0c;
  --bg-soft: #0d0e11;
  --panel: #0f1014;
  --fg: #e6e8ed;
  --muted: #9aa0af;
  --muted-2: #828892;
  --accent: #ef2b2b;      /* brand red — one accent across every surface */
  --accent-hv: #ff4a4a;
  --ok: #34d27b;
  --warn: #f5c451;
  --down: #ff6b6b;
  --border: #1c1f26;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ── toggle switch — one control, no explainer ────────── */
.switch {
  appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 22px;
  cursor: pointer; background: var(--border); border: none; position: relative; flex: none;
  transition: background .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }

/* ── status banner — glanceable health / notice line ──── */
.banner {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 15px;
  margin: 14px 0 4px; font-size: 13px;
}
.banner.ok  { border-color: rgba(52,210,123,.35); background: rgba(52,210,123,.07); color: var(--ok); }
.banner.bad { border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.08); color: var(--down); }

/* ── badge / tag — small status token ─────────────────── */
.mh-badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px;
  letter-spacing: .3px; border: 1px solid var(--border); color: var(--muted);
}
.mh-badge.ok  { color: var(--ok);  border-color: rgba(52,210,123,.4); }
.mh-badge.bad { color: var(--down); border-color: rgba(255,107,107,.4); }