/* =========================================================================
   Bellwether Console
   Built on the Atrium design system: warm neutral ladder, Hearth accent,
   dark by default. Tokens are Atrium's verbatim; everything below `Console`
   is this product's own layer.

   Fonts come from Google rather than the .ttf files in the design project.
   Self-hosting them is a follow-up — an external font host is one more thing
   that can be blocked on a corporate network, and one more party that sees
   a request.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=B612+Mono:wght@400;700&family=Inter:wght@400..700&display=swap");

/* ---------- Atrium tokens (dark, default) ------------------------------ */
:root {
  --ink-0: #0a0908; --ink-1: #131110; --ink-2: #1c1916; --ink-3: #26221e;
  --ink-4: #332d28; --ink-5: #433b34; --ink-6: #645b52; --ink-7: #928981;
  --ink-8: #c8c2b9; --ink-9: #ece7df;

  --hearth-50:#f8ece6; --hearth-100:#f1d6c8; --hearth-200:#e3b09a;
  --hearth-300:#d68b6c; --hearth-400:#c66f4b; --hearth-500:#ad5837;
  --hearth-600:#8f472b; --hearth-700:#6e3621; --hearth-800:#4a2519;

  --sage-200:#b3c0ac; --sage-400:#6f8169; --sage-500:#566650; --sage-700:#303a2d;
  --sky-200:#9bbcd1; --sky-300:#6f9bb6; --sky-500:#3c647d; --sky-700:#233a49;

  --ok:#7ea271;      --ok-bg:#1b2418;
  --warn:#d6a24c;    --warn-bg:#2a2014;
  --danger:#c25b4f;  --danger-bg:#2a1815;
  --info:#6f9bb6;    --info-bg:#15212a;

  --bg: var(--ink-0);
  --surface: var(--ink-1);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --well: #0d0b0a;

  --fg: var(--ink-9); --fg-1: var(--ink-9); --fg-2: var(--ink-8);
  --fg-3: var(--ink-7); --fg-4: var(--ink-6);
  --fg-on-accent: #1b0f06;

  --border: var(--ink-4);
  --border-strong: var(--ink-5);
  --border-faint: rgba(232, 230, 225, 0.06);

  --accent: var(--hearth-400);
  --accent-soft: color-mix(in oklab, var(--hearth-400) 18%, transparent);
  --accent-fg: var(--hearth-200);
  --accent-sage: var(--sage-400);
  --accent-sage-soft: color-mix(in oklab, var(--sage-400) 18%, transparent);
  --accent-sage-fg: var(--sage-200);

  --font-ui: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-num: "B612 Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-dense: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "B612 Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-pill:999px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
}

/* ---------- Light theme (Atrium's own override) ------------------------ */
.light, [data-theme="light"] {
  --bg:#f6f3ee; --surface:#fbf8f3; --surface-2:#ffffff; --surface-3:#f0ece4;
  --well:#ebe6dc;
  --fg:#1a1816; --fg-1:#1a1816; --fg-2:#2c2a26; --fg-3:#5a554d; --fg-4:#8a857b;
  --border:#e3ddd0; --border-strong:#cfc7b6; --border-faint:rgba(26,24,22,0.06);
  --accent: var(--hearth-500);
  --accent-soft: color-mix(in oklab, var(--hearth-500) 12%, transparent);
  --accent-fg: var(--hearth-700);
  --fg-on-accent:#fbf8f3;
  --ok-bg:#e6efe0; --warn-bg:#f6e9cf; --danger-bg:#f3d9d3; --info-bg:#d9e6ee;
}

html { color-scheme: dark; }
.light, [data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-dense);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@keyframes bw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Console
   ========================================================================= */

.bw { min-height: 100vh; display: flex; background: var(--bg); color: var(--fg-2); }

/* ---------- Sidebar ---------------------------------------------------- */
.bw-side {
  flex: 0 0 236px; border-right: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.bw-brand { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; }
.bw-mark {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.bw-mark i { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); display: block; }
.bw-brand b { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--fg-1); letter-spacing: -.01em; }

.bw-switch { padding: 0 12px 16px; }
.bw-switch button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: left; color: inherit;
}
.bw-switch button:hover { background: var(--surface-3); }
.bw-switch .org { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-4); font-family: var(--font-ui); font-weight: 700; }
.bw-switch .prod { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--fg-1); margin-top: 2px; }

.bw-nav { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.bw-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border: 0; border-radius: 8px; text-decoration: none;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  background: transparent; color: var(--fg-3); transition: background var(--dur-1) var(--ease-out);
}
.bw-nav a:hover { background: var(--surface-2); color: var(--fg-2); }
.bw-nav a[aria-current="page"] { background: var(--surface-3); color: var(--fg-1); }
.bw-nav .badge { font-family: var(--font-num); font-size: 11px; color: var(--fg-4); }
.bw-nav a[aria-current="page"] .badge { color: var(--fg-2); }

.bw-side-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
.bw-user { display: flex; align-items: center; gap: 8px; padding: 4px 12px 6px; }
.bw-avatar {
  width: 22px; height: 22px; border-radius: 999px; background: var(--surface-3);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: var(--fg-3); flex: 0 0 auto;
}
.bw-user span { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-side-foot a { display: block; padding: 8px 12px; border-radius: 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--fg-4); text-decoration: none; }
.bw-side-foot a:hover { color: var(--fg-2); background: var(--surface-2); }

/* ---------- Main + top bar --------------------------------------------- */
.bw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bw-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  padding: 12px 28px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.bw-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--fg-4); }
.bw-crumb b { color: var(--fg-1); font-weight: 700; }
.bw-live { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; }
.bw-live i { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); animation: bw-pulse 2.6s var(--ease-out) infinite; display: block; }
.bw-live span { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.bw-ghost {
  padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: 12px;
  font-weight: 700; color: var(--fg-3);
}
.bw-ghost:hover { color: var(--fg-1); }

.bw-page { padding: 32px 28px 64px; max-width: 1180px; }
.bw-page.wide { max-width: none; }

/* ---------- Type ------------------------------------------------------- */
.bw-h1 { font-family: var(--font-ui); font-size: 24px; font-weight: 700; color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.bw-h1.lg { font-size: 28px; }
.bw-h1.mono { font-family: var(--font-mono); font-size: 20px; }
.bw-h2 { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--fg-1); margin: 0; }
.bw-h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--fg-1); }
.bw-sub { font-family: var(--font-dense); font-size: 13px; color: var(--fg-3); margin: 4px 0 0; line-height: 1.6; }
.bw-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-4); }
.bw-note { font-family: var(--font-dense); font-size: 12px; color: var(--fg-4); line-height: 1.55; }
.bw-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.bw-mono { font-family: var(--font-mono); }
.bw-back { padding: 0; background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--fg-4); text-decoration: none; }
.bw-back:hover { color: var(--fg-2); }

/* ---------- Status capsule --------------------------------------------
   Always text with a dot, never a bare colour and never an icon alone.
   `stale` and `offline` are hollow and dashed on purpose: the system says
   plainly that a reading is old or a device unreachable rather than showing
   a confident value it cannot stand behind. --------------------------- */
.bw-cap {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.bw-cap i { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; display: block; }
.bw-cap.ok      { background: var(--ok-bg);     color: var(--ok); }
.bw-cap.ok i    { background: var(--ok); }
.bw-cap.warn    { background: var(--warn-bg);   color: var(--warn); }
.bw-cap.warn i  { background: var(--warn); }
.bw-cap.danger  { background: var(--danger-bg); color: var(--danger); }
.bw-cap.danger i{ background: var(--danger); }
.bw-cap.info    { background: var(--info-bg);   color: var(--info); }
.bw-cap.info i  { background: var(--info); }
.bw-cap.neutral { background: var(--surface-3); color: var(--fg-3); }
.bw-cap.neutral i { background: var(--fg-4); }
.bw-cap.stale   { background: transparent; color: var(--fg-3); border: 1px dashed var(--fg-4); }
.bw-cap.stale i { background: var(--fg-4); }
.bw-cap.offline { background: transparent; color: var(--warn); border: 1px dashed var(--warn); }
.bw-cap.offline i { background: var(--warn); }

/* ---------- Cards, panels ---------------------------------------------- */
.bw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-top: 24px; }
.bw-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: 16px; padding: 18px 20px; }
.bw-card.unknown { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.bw-card.bad { border-color: var(--danger); background: var(--danger-bg); }
.bw-card .value { font-family: var(--font-num); font-size: 34px; line-height: 1.1; color: var(--fg-1); margin-top: 10px; }
.bw-card .value.unknown { color: var(--fg-4); }
.bw-card .value.bad { color: var(--danger); }
.bw-card .value .unit { font-size: 18px; color: var(--fg-4); }
.bw-card .sub { font-family: var(--font-dense); font-size: 12px; color: var(--fg-3); margin-top: 6px; }
.bw-card .foot { font-family: var(--font-dense); font-size: 12px; color: var(--fg-4); margin-top: 10px; }

.bw-panel { border: 1px solid var(--border); background: var(--surface-2); border-radius: 16px; overflow: hidden; }
.bw-panel > header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bw-panel > .body { padding: 20px; }
.bw-panel.bad { border-color: var(--danger); background: var(--danger-bg); }

/* A dash is not a zero. */
.bw-dash {
  display: inline-block; padding: 2px 8px; border: 1px dashed var(--border-strong);
  border-radius: 6px; font-family: var(--font-num); font-size: 14px; color: var(--fg-4);
}

.bw-meter { height: 5px; border-radius: 999px; background: var(--well); overflow: hidden; }
.bw-meter > i { display: block; height: 100%; background: var(--ok); }
.bw-meter > i.bad { background: var(--danger); }
.bw-meter > i.warn { background: var(--warn); }
.bw-meter.empty { background: transparent; border: 1px dashed var(--border-strong); }

/* ---------- Tables ------------------------------------------------------ */
.bw-table { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; }
.bw-row { display: grid; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border-faint); background: var(--surface-2); align-items: center; }
.bw-row:last-child { border-bottom: 0; }
.bw-row.head {
  padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-4);
}
a.bw-row { text-decoration: none; color: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
a.bw-row:hover { background: var(--surface-3); }
.bw-right { text-align: right; }

/* ---------- Buttons ----------------------------------------------------- */
.bw-btn {
  padding: 9px 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: 13px;
  font-weight: 700; color: var(--fg-2);
}
.bw-btn:hover { background: var(--surface-3); color: var(--fg-1); }
.bw-btn.primary { background: var(--accent); border-color: transparent; color: var(--fg-on-accent); }
.bw-btn.primary:hover { background: var(--hearth-300); }
.bw-btn[disabled] { opacity: .5; cursor: default; }
.bw-seg { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.bw-seg button {
  padding: 5px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  background: transparent; color: var(--fg-3);
}
.bw-seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--fg-1); }

/* ---------- Shape: the redaction convention ---------------------------
   A redacted value is a dashed chip; an atom keeps the accent because it was
   written in source and survived. The legend under the block explains both,
   so the first Issue somebody opens does not read as corrupted data. ----- */
.bw-shape {
  padding: 20px 18px; font-family: var(--font-mono); font-size: 13px;
  line-height: 2.05; color: var(--fg-2); overflow-x: auto; white-space: pre-wrap;
}
.bw-redacted {
  display: inline-block; padding: 0 5px;
  border: 1px dashed color-mix(in oklab, var(--fg-4) 65%, transparent);
  border-radius: 4px; background: color-mix(in oklab, var(--fg-4) 10%, transparent);
  color: var(--fg-3); font-size: 12px;
}
.bw-atom { color: var(--accent-fg); font-weight: 700; }
.bw-exception { color: var(--danger); }
.bw-legend { display: flex; gap: 24px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.bw-legend > div { display: flex; align-items: center; gap: 10px; }
.bw-legend span.what { font-family: var(--font-dense); font-size: 12px; color: var(--fg-4); }

/* ---------- Empty states ----------------------------------------------
   The success state of this product is an empty list, so it carries the
   evidence behind the silence rather than an apology for it. ------------ */
.bw-quiet { margin-top: 24px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 16px; padding: 36px 32px; }
.bw-quiet .split { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.bw-quiet .prose { flex: 1; min-width: 320px; }
.bw-evidence { flex: 0 0 340px; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bw-evidence > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface); }
.bw-evidence dt { font-family: var(--font-dense); font-size: 13px; color: var(--fg-3); margin: 0; }
.bw-evidence dd { font-family: var(--font-num); font-size: 13px; color: var(--fg-1); margin: 0; }

/* ---------- Flashes ----------------------------------------------------- */
.bw-flashes { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.bw-flash { padding: 10px 14px; border-radius: 8px; font-family: var(--font-dense); font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-2); }
.bw-flash.error { border-color: var(--danger); background: var(--danger-bg); }

/* ---------- Sign in ----------------------------------------------------- */
.bw-signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.bw-signin .box { width: 100%; max-width: 380px; text-align: center; }
.bw-signin .bw-mark { margin: 0 auto 18px; width: 34px; height: 34px; border-radius: 9px; }
.bw-signin .bw-mark i { width: 9px; height: 9px; border-radius: 3px; }