/* FaultLine tenant dashboard — 90s-clean terminal aesthetic.
   Palette anchored on the logo: bg #0F0F0F, fg #E8E8E8, muted #666, border #333,
   one restrained accent (terminal green #3FB950). Everything monospace. */

:root {
  --bg:      #0F0F0F;
  --bg-soft: #161616;
  --fg:      #E8E8E8;
  --muted:   #666666;
  --border:  #333333;
  --accent:  #3FB950;
  --accent-dim: #285e33;
  --danger:  #d1584f;
  --warn:    #d1a34f;
  --mono: 'JetBrains Mono','IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── top status bar ─────────────────────────────────────────── */
.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.statusbar .sep { color: var(--border); }
.statusbar .val { color: var(--fg); }
.status-dot { color: var(--muted); }
.status-dot.online { color: var(--accent); }
.status-dot.demo   { color: var(--warn); }
.statusbar .right { margin-left: auto; }

/* ── header ─────────────────────────────────────────────────── */
header.app-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 7px;
  /* header↔menu separator — accent-driven so the swatch picker controls it (green by default) */
  border-bottom: 2px solid var(--accent);
}
header.app-head .logo { width: 80px; height: auto; display: block; }
header.app-head .title-block { display: flex; flex-direction: column; gap: 1px; }
header.app-head h1 {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}
header.app-head .subtitle { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
header.app-head .head-actions { margin-left: auto; display: flex; gap: 10px; }

/* ── layout shell ───────────────────────────────────────────── */
main { max-width: 1080px; margin: 0 auto; padding: 12px 24px 22px; }

/* ── prompt motif / section labels ──────────────────────────── */
.section-label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--muted);
  margin: 16px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.section-label::before { content: "▸ "; color: var(--accent); }
.prompt::before { content: "$ "; color: var(--accent); }

/* ── tabs ───────────────────────────────────────────────────── */
nav.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
nav.tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
}
nav.tabs button:hover { color: var(--fg); }
nav.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
/* compact in-panel sub-tabs (Users → Active / Removed) — denser than the top nav */
nav.tabs.users-subtabs { margin-top: 2px; margin-bottom: 12px; }
nav.tabs.users-subtabs button { padding: 8px 14px; }
nav.tabs.users-subtabs .nav-count { margin-left: 6px; }

/* ── panels / cards ─────────────────────────────────────────── */
.panel {
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--bg-soft);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px dotted var(--border); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.kv .v { color: var(--fg); text-align: right; word-break: break-all; }

/* seat usage — a PROGRESS bar (rounded track + fill), unmistakably not an input box */
.usage { margin-top: 8px; }
.usage .bar {
  height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--bg-soft);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.usage .bar > span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width .2s ease;
}
.usage .bar.full > span { background: linear-gradient(90deg, #7a2f2a, var(--danger)); }
.usage .cap { font-size: 12px; color: var(--muted); margin-top: 6px; }
:root[data-theme="light"] .usage .bar { background: #e4e4e4; box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); }

/* ── Per-seat usage meters — compact, informative, never dominating ─────────── */
/* Rendered as a full-width sub-row under each seat: memories (primary) + the monthly
   flow meters. Kept low-contrast so it reads as a detail strip, not a headline. */
.usage-row > td { padding: 0 14px 12px; background: var(--bg-soft); border-top: none; }
.seat-usage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px 20px;
  padding-top: 4px;
}
.meter { min-width: 0; }
.meter .m-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; margin-bottom: 3px; }
.meter .m-label { color: var(--muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter .m-val { color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.meter .m-bar { height: 5px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); overflow: hidden; }
.meter .m-bar > span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: width .2s ease; }
.meter.primary { grid-column: 1 / -1; }           /* memories spans the row — the headline meter */
.meter.primary .m-bar { height: 8px; }
.meter.primary .m-label { color: var(--fg); }
.meter.warn .m-bar > span { background: linear-gradient(90deg, #5c4a24, var(--warn)); }
.meter.full .m-bar > span { background: linear-gradient(90deg, #7a2f2a, var(--danger)); }
.meter.full .m-val { color: var(--danger); }
.meter .m-unl { color: var(--accent); }            /* ∞ / unlimited marker */
/* API-CALLS placeholder meter — no per-seat api_calls field yet, so the bar reads as "awaiting
   data": a faint dashed track, muted "— / —" value. Distinct from a real 0-fill meter. */
.meter.api .m-val { color: var(--muted); }
.meter.api .m-bar { background: transparent; box-shadow: none; border: 1px dashed var(--border); height: 5px; }
.seat-usage.unmetered { display: block; color: var(--muted); font-size: 11px; padding: 6px 0 2px; }
:root[data-theme="light"] .meter .m-bar { background: #e4e4e4; box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); }
:root[data-theme="light"] .usage-row > td { background: #f2f2f2; }

/* ── per-seat AGENT CORTEX (the serving agent's OWN operating memory) ──────────────── */
.cortex-row > td { padding: 4px 14px 14px; background: var(--bg-soft); border-top: none; }
:root[data-theme="light"] .cortex-row > td { background: #f2f2f2; }
.cortex-panel { border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; }
.cortex-intro { font-size: 11px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.cortex-intro strong { color: var(--fg); }
.cortex-loading, .cortex-empty { font-size: 12px; padding: 4px 0; }
.cortex-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 10px; }
.cortex-stat { display: flex; flex-direction: column; gap: 1px; }
.cortex-stat .cs-val { font-size: 18px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.cortex-stat .cs-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cortex-stat.primary .cs-val { color: var(--accent); }
.cortex-stat.rule .cs-val { color: var(--accent); }
.cortex-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cortex-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.cortex-chip.has { color: var(--fg); border-color: var(--accent-dim); }
.cortex-chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cortex-chip.cat { color: var(--fg); border-color: var(--accent-dim); }
.cortex-chip.rule { color: #111; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.cortex-notes { display: flex; flex-direction: column; gap: 8px; }
.cortex-note { border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; background: var(--bg); }
:root[data-theme="light"] .cortex-note { background: #fafafa; }
.cortex-note .cn-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.cortex-note .cn-meta { font-size: 10px; margin-left: auto; white-space: nowrap; }
.cortex-note .cn-note { font-size: 12px; color: var(--fg); line-height: 1.5; }
.cortex-note .cn-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.cortex-tag { font-size: 10px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; }
.cortex-actions { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.cortex-msg { font-size: 11px; }
.cortex-msg.ok { color: var(--accent); }
.cortex-msg.err { color: var(--danger); }
.cortex-err { font-size: 12px; padding: 4px 0; }

/* ── dual MEMORY modal — user memory (left) + agent cortex (right), side by side ─ */
.mem-modal { max-width: 960px; width: 94%; }
.mem-modal h3 { margin-bottom: 6px; }
.mem-lead { font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
.mem-lead strong { color: var(--fg); }
.mem-cols { display: flex; gap: 16px; align-items: stretch; }
.mem-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.mem-col-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 9px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.mem-col-h.user { border-left: 3px solid var(--accent); color: var(--fg); }
.mem-col-h.agent { border-left: 3px solid #7a6adf; color: var(--fg); }
:root[data-theme="light"] .mem-col-h.agent { border-left-color: #5f4fd0; }
.mem-col-body { padding: 12px 14px; overflow-y: auto; max-height: 56vh; }
.mem-loading { font-size: 12px; padding: 6px 0; }
.mem-sub-h { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; margin: 12px 0 6px; }
.mem-facts { display: flex; flex-direction: column; gap: 5px; }
.mem-fact { border: 1px solid var(--border); border-radius: 5px; padding: 6px 9px; background: var(--bg); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
:root[data-theme="light"] .mem-fact { background: #fafafa; }
.mem-triple { font-size: 12px; color: var(--fg); font-family: var(--mono); line-height: 1.4; }
.mem-triple .mt-s { color: var(--fg); }
.mem-triple .mt-r { color: var(--muted); }
.mem-triple .mt-o { color: var(--accent); }
.cortex-chip.cls { border-radius: 3px; padding: 1px 6px; margin-left: auto; }
.cortex-chip.cls-a { color: #111; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.cortex-chip.cls-b { color: var(--fg); border-color: var(--accent-dim); }
.cortex-chip.cls-c { color: var(--muted); }
@media (max-width: 680px) { .mem-cols { flex-direction: column; } .mem-col-body { max-height: 34vh; } }

/* ── "What the levels mean" explainer — meter × tier cap table ───────────────── */
.levels-explainer { margin-top: 8px; }
.levels-explainer .lx-intro { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; }
.lx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lx-table th, .lx-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lx-table thead th { color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 1px; }
.lx-table td.num, .lx-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-meter-name { color: var(--fg); font-weight: 600; }
.lx-meter-why { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }
.lx-badge { display: inline-block; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: middle; }
.lx-badge.hard { color: var(--warn); border-color: #5c4a24; }
.lx-badge.soft { color: var(--muted); }
.lx-caption { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.5; }
.lx-scroll { overflow-x: auto; }

/* ── Access control (origin ACL) — add-origin row ───────────────────────────── */
.form-row { display: flex; gap: 8px; align-items: center; }
.form-row input[type="text"] { flex: 1; min-width: 0; }

/* ── Seats page control surface ─────────────────────────────── */
.seats-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.seats-head .btn { white-space: nowrap; flex: 0 0 auto; }
.seat-id { word-break: break-all; }
.seat-cred { margin-top: 5px; }
.badge.muted { color: var(--muted); border-color: var(--border); }
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 12px 14px;
}

/* ── tables ─────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
tr:hover td { background: rgba(255,255,255,0.02); }
td.mono-id { color: var(--muted); font-size: 12px; }
td .badge { font-size: 11px; }
tr.selectable { cursor: pointer; }
tr.selected td { background: rgba(63,185,80,0.08); }
tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  white-space: nowrap;
}
.badge.active   { color: var(--accent); border-color: var(--accent-dim); }
.badge.revoked, .badge.deprovisioned { color: var(--muted); }
.badge.a { color: var(--accent); border-color: var(--accent-dim); }
.badge.b { color: var(--warn);   border-color: #5c4a24; }
.badge.c { color: var(--muted); }

/* ── forms / inputs ─────────────────────────────────────────── */
label.field { display: block; margin-bottom: 14px; }
label.field .lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=email], input[type=number] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  padding: 9px 11px;
}
input:focus { outline: none; border-color: var(--accent); }
/* MFA QR — white quiet-zone box so phone cameras + password managers scan it reliably. */
.mfa-qr { display: block; width: 180px; height: 180px; background: #fff; padding: 10px; border-radius: 6px; image-rendering: pixelated; }
.inline-form { display: flex; gap: 8px; align-items: stretch; }
.inline-form input { flex: 1; }
.inline-form select { flex: 1; min-width: 0; }
.inline-form .btn { white-space: nowrap; }

/* ── buttons ────────────────────────────────────────────────── */
button.btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
button.btn:hover { border-color: var(--fg); }
button.btn.accent { border-color: var(--accent-dim); color: var(--accent); }
button.btn.accent:hover { border-color: var(--accent); background: rgba(63,185,80,0.08); }
button.btn.danger { border-color: #5c2b28; color: var(--danger); }
button.btn.danger:hover { border-color: var(--danger); background: rgba(209,88,79,0.08); }
button.btn.sm { padding: 4px 10px; font-size: 11px; }
button.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── messages / toast ───────────────────────────────────────── */
.msg {
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
  white-space: pre-wrap;
}
.msg.err  { border-left-color: var(--danger); color: var(--danger); }
.msg.ok   { border-left-color: var(--accent); color: var(--accent); }
.msg.info { border-left-color: var(--muted);  color: var(--muted); }
.msg.warn { border-left-color: var(--warn);   color: var(--warn); }
.msg::before { content: "! "; }
.msg.ok::before { content: "✓ "; }
.msg.info::before { content: "· "; }
.msg.warn::before { content: "⚠ "; }

/* one-time secret reveal */
.secret-box {
  border: 1px solid var(--accent-dim);
  background: rgba(63,185,80,0.05);
  padding: 12px 14px;
  margin: 12px 0;
}
.secret-box .warn { color: var(--warn); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.secret-box code {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px;
  color: var(--accent);
  word-break: break-all;
  font-size: 13px;
}
/* The username line inside the shown-once secret box — the COMPLETE login is username + password. */
.secret-box .secret-user { color: var(--fg); font-weight: 500; word-break: break-all; }
/* Login username (email) shown VISIBLY next to the "login: active" badge on the seat/user card. */
.login-email { color: var(--muted); font-size: 11px; word-break: break-all; }

/* ── connect screen ─────────────────────────────────────────── */
.connect-wrap { max-width: 460px; margin: 4vh auto 0; }
.connect-wrap .panel { padding: 26px 28px; }
.connect-wrap .hint { color: var(--muted); font-size: 12px; margin-top: 10px; }
.demo-toggle { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }

/* ── modal (confirm) ────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 22px 24px;
  max-width: 440px;
  width: 90%;
}
.modal h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.modal p { color: var(--muted); font-size: 13px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ── inline help tooltip — a small, tasteful accent-outlined "?" that reveals a
   collapsed explanatory paragraph on hover/focus. Token-based so it follows the
   accent picker + light/dark theme. ──────────────────────────────────────────── */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  cursor: help;
  position: relative;
  margin-left: 7px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  opacity: .78;
  transition: opacity .12s ease, border-color .12s ease, background .12s ease;
}
.tip:hover, .tip:focus-visible {
  opacity: 1;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0; top: 24px;
  width: max-content; max-width: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 12px; font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  z-index: 60;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.tip:hover::after, .tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
/* Right-anchored variant — for tips whose heading sits near the right edge so the
   320px bubble opens leftward instead of overflowing the viewport. */
.tip.tip-left::after { left: auto; right: 0; }

/* ── onboarding modal ───────────────────────────────────────── */
.onboard-modal { max-width: 560px; }
.lbl-sm {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin: 12px 0 5px;
}
.warn-inline {
  border: 1px solid #5c4a24; border-left-width: 3px;
  color: var(--warn); padding: 8px 12px; margin: 10px 0; font-size: 12px;
}
#ob-blob, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px;
  resize: vertical;
  line-height: 1.45;
}
textarea:focus { outline: none; border-color: var(--accent); }
#ob-url { color: var(--accent); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: 12px; padding: 14px 0; text-align: center; }
.pager { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); }
.counts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 8px; }
@media (max-width: 720px) { .counts-grid { grid-template-columns: repeat(2,1fr); } }
.count-cell { border: 1px solid var(--border); padding: 12px; text-align: center; }
.count-cell .n { font-size: 22px; color: var(--fg); }
.count-cell .l { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 4px; }

footer { text-align: center; color: var(--border); font-size: 11px; padding: 30px 0 20px; letter-spacing: 1px; }

/* ══ additions: operator + tenant consoles ═════════════════════════════════════ */

/* console badge in the header (OPERATOR / TENANT) */
.console-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  border: 1px solid var(--border); padding: 2px 8px; color: var(--muted);
}
.console-tag.op { color: var(--accent); border-color: var(--accent-dim); }
.console-tag.tenant { color: var(--warn); border-color: #5c4a24; }

/* ── ALARM banner (locked / panicked account — must look alarming) ───────────── */
.alarm {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  background: rgba(209,88,79,0.10);
  color: var(--danger);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 12px;
  animation: alarmpulse 1.4s ease-in-out infinite;
}
.alarm.panic { border-color: #ff4136; color: #ff6b60; background: rgba(255,65,54,0.13); }
.alarm .a-big { font-size: 15px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
.alarm .right { margin-left: auto; }
@keyframes alarmpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }

/* status pill (account status, prominent) */
.status-pill {
  display: inline-block; padding: 3px 12px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px; border: 1px solid var(--border);
}
.status-pill.active    { color: var(--accent); border-color: var(--accent-dim); }
.status-pill.suspended { color: var(--warn);   border-color: #5c4a24; }
.status-pill.locked    { color: var(--danger); border-color: var(--danger); background: rgba(209,88,79,0.10); }
.status-pill.archived  { color: var(--muted); }

/* ── TRAIN ⇄ SERVE agent-mode toggle ─────────────────────────────────────────── */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch .track {
  width: 92px; height: 24px; border: 1px solid var(--border); background: var(--bg);
  position: relative; display: flex; align-items: center; font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
}
.switch .track .lbl-on, .switch .track .lbl-off {
  flex: 1; text-align: center; color: var(--muted); z-index: 1; pointer-events: none;
}
.switch .knob {
  position: absolute; top: 1px; bottom: 1px; width: 44px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  transition: left 0.12s ease;
}
.switch.on  .knob { left: 1px; }
.switch.off .knob { left: 45px; background: #3a2320; border-color: #5c2b28; }
.switch.on  .lbl-on  { color: var(--accent); }
.switch.off .lbl-off { color: var(--danger); }

/* ── log firehose ────────────────────────────────────────────────────────────── */
.log-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.log-controls .checks { display: flex; gap: 12px; align-items: center; }
.log-controls label.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.log-controls input[type=checkbox] { accent-color: var(--accent); }
.log-controls input[type=text] { flex: 1; min-width: 160px; }
.log-view {
  border: 1px solid var(--border); background: var(--bg); max-height: 460px; overflow-y: auto;
  font-size: 12px; line-height: 1.55;
}
.log-row { display: flex; gap: 10px; padding: 4px 12px; border-bottom: 1px solid rgba(51,51,51,0.5); white-space: nowrap; }
.log-row:hover { background: rgba(255,255,255,0.02); }
.log-row .ts { color: var(--muted); flex-shrink: 0; }
.log-row .lv { flex-shrink: 0; width: 42px; text-transform: uppercase; letter-spacing: 1px; }
.log-row.info .lv { color: var(--muted); }
.log-row.warn .lv { color: var(--warn); }
.log-row.crit .lv { color: var(--danger); font-weight: 500; }
.log-row .tag { color: var(--accent-dim); flex-shrink: 0; }
.log-row .txt { color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.log-row.crit .txt { color: #e88; }
/* "show N more" affordance at the foot of a capped log view */
.log-view .log-more {
  display: block; width: 100%; border: none; border-top: 1px solid var(--border);
  background: transparent; color: var(--accent-dim); padding: 8px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.log-view .log-more:hover { color: var(--fg); background: rgba(255,255,255,0.02); }
/* connection-key table: [Active]/[Revoked] tab row at the top + the ">6 more active" toggle */
.keys-tabs-row td { padding: 0 0 4px; border-bottom: none; }
.keys-subnav { margin: 0; }
.keys-toggle-row td { padding-top: 8px; text-align: center; }

/* ── advanced disclosure ─────────────────────────────────────────────────────── */
details.adv { border: 1px solid var(--border); margin: 14px 0; background: var(--bg); }
details.adv > summary {
  cursor: pointer; padding: 10px 14px; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; list-style: none;
}
details.adv > summary::before { content: "▸ "; color: var(--accent); }
details.adv[open] > summary::before { content: "▾ "; }
details.adv .adv-body { padding: 0 14px 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* account roster cards / selected account */
.roster-row.selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.acct-open { cursor: pointer; }
.roster-row.disabled td { opacity: .62; }
.roster-row.disabled:hover td { opacity: .85; }

/* ── ROSTER: kind grouping (Tenants vs Singles) + accent divider + disabled toggle ───────── */
.roster-filterbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-height: 22px; }
.roster-disabled-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.roster-disabled-toggle input { accent-color: var(--accent); }

.roster-group-head td {
  padding: 12px 8px 6px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px;
}
.roster-group-head .rg-label { color: var(--fg); font-size: 12px; }
.roster-group-head .rg-count {
  margin-left: 8px; font-size: 10px; color: var(--fg); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.roster-group-head .rg-hint { margin-left: 10px; font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: .3px; }
.roster-empty-row .rg-empty { padding: 10px 8px; font-size: 12px; font-style: italic; }

/* Partial-width accent divider BETWEEN the two kind groups (mirrors .seat-divider). */
.roster-divider-row td { padding: 0; border: 0; }
.roster-divider {
  height: 0; width: 72px; border: 0; border-top: 2px solid var(--accent);
  border-radius: 2px; margin: 14px 0 14px 4px; opacity: .85;
}

/* KIND badge — corporate tenant vs the Singles house account. */
.badge.kind { font-size: 10px; letter-spacing: .5px; vertical-align: middle; }
.badge.kind.tenant  { color: var(--muted); border-color: var(--border); }
.badge.kind.team    { color: var(--ok, #2e8b57); border-color: var(--ok, #2e8b57); }
.badge.kind.singles { color: var(--accent); border-color: var(--accent-dim); }
.configured-flag { color: var(--accent); font-size: 12px; }
.notset-flag { color: var(--muted); font-size: 12px; }
.probe-ok { color: var(--accent); }
.probe-fail { color: var(--danger); }

/* sub-nav (within a tab) */
.subnav { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 6px 0 12px; }
.subnav button {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; padding: 8px 14px; cursor: pointer;
}
.subnav button:hover { color: var(--fg); }
.subnav button.active { color: var(--fg); border-bottom-color: var(--accent); }

/* login screen (tenant) */
.login-wrap { max-width: 420px; margin: 4vh auto 0; }
.login-wrap .panel { padding: 28px 30px; }
.mfa-note { color: var(--warn); font-size: 12px; margin-top: 10px; }

/* small helpers */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.row-actions .tier-sel { width: auto; flex: 0 0 auto; padding: 5px 7px; font-size: 12px; }
.row-actions .tier-sel option:disabled { color: var(--muted); }
/* Per-seat recall-voice preset dropdown (its own column) — sized like the tier select. */
.voice-cell { white-space: nowrap; }
.voice-cell .voice-sel { width: auto; max-width: 168px; padding: 5px 7px; font-size: 12px; }
.hint code { color: var(--accent); }
.pill-note { font-size: 11px; color: var(--muted); margin-left: 8px; }
.seat-label { color: var(--fg); }
.seat-label.empty { color: var(--muted); font-style: italic; }
.demo-banner {
  background: rgba(209,163,79,0.10); border-bottom: 1px solid #5c4a24; color: var(--warn);
  text-align: center; font-size: 11px; padding: 5px; letter-spacing: 1px; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — a second CSS-variable theme behind a toggle (persisted to localStorage,
   default = the dark terminal look). The #3FB950 accent is darkened to #2ea043 so it
   stays readable on a light surface; everything else re-maps the same variables.
   ══════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg:      #faf9f7;
  --bg-soft: #ffffff;
  --fg:      #1b1b1b;
  --muted:   #6b6b6b;
  --border:  #d5d3cc;
  --accent:  #2ea043;
  --accent-dim: #8fd19e;
  --danger:  #c0392b;
  --warn:    #b07d10;
}

/* ── accent picker — per-swatch, per-theme shades ─────────────────────────────────
   The highlight color is ALREADY driven everywhere by var(--accent) / var(--accent-dim);
   these blocks just re-point those two vars per chosen swatch. Driven by a data-accent
   attribute on <html>. NO data-accent = the default terminal green defined in :root above.
   DARK shades (default here) are brighter/saturated to pop on near-black; LIGHT shades
   (the [data-theme="light"] pairs, higher specificity so they win) are darker/less-bright
   so they don't wash out on near-white, with a light --accent-dim TINT for gradients. */
:root[data-accent="green"]  { --accent: #3FB950; --accent-dim: #285e33; }  /* explicit = the :root default terminal green */
:root[data-accent="orange"] { --accent: #F0883E; --accent-dim: #7a4a1e; }
:root[data-accent="red"]    { --accent: #F85149; --accent-dim: #7a2620; }
:root[data-accent="blue"]   { --accent: #58A6FF; --accent-dim: #1f4d7a; }
:root[data-accent="purple"] { --accent: #A371F7; --accent-dim: #4a3a7a; }
:root[data-theme="light"][data-accent="green"]  { --accent: #2ea043; --accent-dim: #8fd19e; }  /* = the light-theme default green */
:root[data-theme="light"][data-accent="orange"] { --accent: #C2570C; --accent-dim: #f0b48a; }
:root[data-theme="light"][data-accent="red"]    { --accent: #CF222E; --accent-dim: #f2a9a2; }
:root[data-theme="light"][data-accent="blue"]   { --accent: #0969DA; --accent-dim: #a8ccf0; }
:root[data-theme="light"][data-accent="purple"] { --accent: #8250DF; --accent-dim: #c8b3f0; }

/* the swatch controls themselves (header appearance control) */
.accent-picker { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.accent-picker .swatch {
  width: 15px; height: 15px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--border); background: var(--sw);
  transition: transform .1s ease, box-shadow .1s ease;
}
.accent-picker .swatch:hover { transform: scale(1.18); }
.accent-picker .swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sw);
  border-color: var(--sw);
}

:root[data-theme="light"] tr:hover td,
:root[data-theme="light"] .log-row:hover { background: rgba(0,0,0,0.035); }
:root[data-theme="light"] tr.selected td { background: rgba(46,160,67,0.10); }
:root[data-theme="light"] .switch.off .knob { background: #f2d9d5; border-color: #d8a39c; }
:root[data-theme="light"] footer { color: var(--muted); }
:root[data-theme="light"] .badge.b { color: #9a6b0c; border-color: #d8c48a; }
html { transition: background-color 0.15s ease, color 0.15s ease; }

/* theme toggle button in the header */
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle .ico { color: var(--accent); margin-right: 5px; }

/* ── guided wizard / step lists ──────────────────────────────────────────────────── */
.wizard {
  border: 1px solid var(--accent-dim); background: rgba(63,185,80,0.045);
  padding: 20px 22px; margin-bottom: 18px;
}
.wizard h2 {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; color: var(--fg);
}
.wizard h2::before { content: "▸ "; color: var(--accent); }
.wizard .lead { color: var(--muted); font-size: 13px; margin: 0 0 16px; line-height: 1.6; }
.wizard ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.wizard ol.steps > li {
  counter-increment: step; position: relative; padding: 12px 0 12px 42px;
  border-bottom: 1px dotted var(--border);
}
.wizard ol.steps > li:last-child { border-bottom: none; }
.wizard ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 11px;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  border: 1px solid var(--accent-dim); color: var(--accent); border-radius: 50%; font-size: 12px;
}
.wizard .step-t { color: var(--fg); font-size: 13px; margin-bottom: 4px; }
.wizard .step-d { color: var(--muted); font-size: 12px; line-height: 1.55; }
.wizard .step-d code { color: var(--accent); }
.wizard .step-body { margin-top: 10px; }

/* centered guided empty state ("here's what to do next") */
.guide { text-align: center; padding: 34px 22px; }
.guide .g-mark { font-size: 26px; color: var(--accent-dim); margin-bottom: 10px; }
.guide .g-big { font-size: 15px; color: var(--fg); letter-spacing: 1px; margin-bottom: 8px; }
.guide .g-sub { color: var(--muted); font-size: 13px; margin: 0 auto 18px; max-width: 440px; line-height: 1.6; }
.guide .g-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* per-backend LLM form note */
.backend-note {
  border-left: 3px solid var(--accent-dim); padding: 9px 13px; margin: 12px 0;
  color: var(--muted); font-size: 12px; background: var(--bg); line-height: 1.55;
}
.backend-note strong { color: var(--fg); }

/* generic select — match the input look */
select {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  font-family: var(--mono); font-size: 13px; padding: 9px 11px;
}
select:focus { outline: none; border-color: var(--accent); }

/* field that hides itself per backend */
.field.field-hidden { display: none; }
.req-star { color: var(--danger); margin-left: 3px; }

/* copy-block (endpoint / key display in wizards) */
.copy-block { display: flex; gap: 8px; align-items: stretch; margin: 8px 0; }
.copy-block input { flex: 1; }

/* connect-picker — client selector, styled as a real tab-bar (mirrors nav.tabs / .subnav) */
.connect-picker {
  display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 14px;
  border-bottom: 1px solid var(--border);
}
.connect-picker .pick {
  cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; padding: 9px 16px; background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.connect-picker .pick:hover { color: var(--fg); }
.connect-picker .pick.active { color: var(--fg); border-bottom-color: var(--accent); }
.client-panel.hidden { display: none; }

/* guide / walkthrough PDF download links */
.guide-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 2px; }
.guide-link {
  color: var(--accent); font-size: 12px; text-decoration: none; letter-spacing: 0.5px;
  border-bottom: 1px dotted var(--accent-dim);
}
.guide-link:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* a presented (read-only, not-typed) value — sign-in endpoint + inline shown fields */
.presented-field input[readonly],
input.presented[readonly] {
  background: var(--bg-soft); color: var(--muted); cursor: default;
}

/* header break-glass Panic button — always visible, red, distinct from sign-out */
.head-actions .alarm-btn {
  color: var(--danger); border-color: var(--danger);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 500;
}
.head-actions .alarm-btn:hover { background: var(--danger); color: var(--bg); border-color: var(--danger); }

/* login realm helpers (operator + tenant share these) */
.break-glass { margin-top: 18px; border-top: 1px dotted var(--border); padding-top: 14px; }
.break-glass summary {
  cursor: pointer; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; list-style: none;
}
.break-glass summary::before { content: "▸ "; color: var(--warn); }
.break-glass[open] summary::before { content: "▾ "; }
.role-note {
  border: 1px solid var(--border); border-left: 3px solid var(--accent-dim);
  padding: 10px 14px; margin: 0 0 16px; font-size: 12px; color: var(--muted); line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════════
   OPERATOR LEFT-NAV SHELL (IA redesign) — sidebar + content, prominent client header,
   dismissible help strip, account-type badges. Tenant console is unaffected (it keeps
   its own top tabs).
   ══════════════════════════════════════════════════════════════════════════════════ */
.shell { display: flex; align-items: flex-start; max-width: 1180px; margin: 0 auto; }
.sidenav {
  flex: 0 0 210px; border-right: 1px solid var(--border); min-height: calc(100vh - 160px);
  padding: 18px 0; position: sticky; top: 0;
  /* Independent scroll: pin to the viewport top and let the nav scroll on its OWN when it
     outgrows the screen, regardless of how far the main content is scrolled. */
  max-height: 100vh; overflow-y: auto;
}
.sidenav .nav-group { margin-bottom: 20px; }
.sidenav .nav-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted);
  padding: 0 18px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.sidenav .nav-h .nav-sub {
  display: block; color: var(--accent); font-size: 11px; letter-spacing: 1px;
  text-transform: none; margin-top: 4px; word-break: break-all;
}
.sidenav .nav-item {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  border-left: 2px solid transparent; color: var(--muted); font-family: var(--mono);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 9px 18px; cursor: pointer;
}
.sidenav .nav-item:hover:not(:disabled) { color: var(--fg); }
.sidenav .nav-item.active { color: var(--fg); border-left-color: var(--accent); background: rgba(63,185,80,0.06); }
.sidenav .nav-item .nav-count {
  display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px;
  border-radius: 8px; background: rgba(139,148,158,0.22); color: var(--fg);
  font-size: 10px; line-height: 15px; text-align: center; vertical-align: middle;
}
.sidenav .nav-item:disabled { opacity: 0.35; cursor: not-allowed; }
.sidenav .nav-item.danger-item.active { border-left-color: var(--danger); }
/* External-page nav link (e.g. Benchmarks → bench.html): looks like a nav-item but is a
   plain <a> so app.js's .nav-item click router leaves it alone and it just navigates. */
.sidenav a.nav-ext {
  display: block; width: 100%; text-align: left; color: var(--muted); font-family: var(--mono);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 9px 18px;
  border-left: 2px solid transparent; text-decoration: none; box-sizing: border-box;
}
.sidenav a.nav-ext:hover { color: var(--fg); }
.content { flex: 1; min-width: 0; padding: 20px 24px; }
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidenav { flex-basis: auto; width: 100%; min-height: 0; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; position: static; }
  .sidenav .nav-group { margin-bottom: 4px; }
  .content { padding: 16px 12px; }
}

/* prominent selected-client header */
.client-header {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--bg-soft); padding: 16px 20px; margin-bottom: 18px;
}
.client-header .ch-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.client-header .ch-name { font-size: 22px; color: var(--fg); letter-spacing: 0.5px; }
.client-header .ch-slug { color: var(--muted); font-size: 13px; }
.client-header .ch-bot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.client-header .ch-id { color: var(--muted); font-size: 12px; }
.client-header .ch-metric { color: var(--fg); }
.client-header #ch-alarm-wrap { margin-top: 12px; }
.client-header #ch-alarm-wrap .alarm { margin-bottom: 0; }

/* account-type badge */
.badge.type { color: var(--muted); border-color: var(--border); }
.badge.type.agent { color: var(--accent); border-color: var(--accent-dim); }
.badge.type.expert { color: var(--warn); border-color: #5c4a24; }
.badge.type.advanced { color: var(--fg); }

/* dismissible / expandable help strip */
details.help-strip { border: 1px solid var(--border); background: var(--bg-soft); margin-bottom: 18px; }
details.help-strip > summary {
  cursor: pointer; padding: 10px 16px; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; list-style: none;
}
details.help-strip > summary::before { content: "▸ "; color: var(--accent); }
details.help-strip[open] > summary::before { content: "▾ "; }
details.help-strip .help-body { padding: 4px 16px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
details.help-strip .help-body p { margin: 6px 0; }
details.help-strip .help-body ul { margin: 8px 0 0; padding-left: 18px; }
details.help-strip .help-body li { margin: 3px 0; }
details.help-strip .help-body strong { color: var(--fg); }

/* read-only brain card */
.ro-brain { margin-bottom: 6px; }

/* ── licensing model (migration 139): plan/capacity, bundles, billing, signature ── */
.badge.type.advanced { color: #58a6ff; border-color: #2b4a70; }
.badge.type.expert   { color: #d29922; border-color: #6b5210; }
.pill-note.lock { color: var(--muted); border: 1px dashed var(--border); padding: 0 5px; border-radius: 3px; font-size: 10px; }

.plan-term { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.plan-term strong { color: var(--fg); }

/* ── Plan & Capacity tab — SCOPED tightening (does NOT touch the global .section-label /
      .panel rules that drive every other tab; see change-5 flag in the deliverable). ──── */
[data-panel="plan"] .section-label.plan-top { margin-top: 10px; }        /* tighten tab top */
/* section-label with a right-column action (the tier-guide popup button) */
.section-label.section-label-row { display: flex; align-items: center; }
.section-label.section-label-row .tier-guide-btn { margin-left: auto; letter-spacing: 1px; }
/* Add-capacity: TYPE · QUANTITY · ＋ Add on ONE aligned row + reduced panel padding */
[data-panel="plan"] .cap-panel { padding: 12px 16px; }
[data-panel="plan"] .bundle-panel { padding: 12px 16px; }
.cap-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.cap-row .field.inline { margin-bottom: 0; }
.cap-row .field.inline:nth-of-type(1) { flex: 0 0 180px; }
.cap-row .field.inline:nth-of-type(2) { flex: 0 0 120px; }
.cap-row .btn { flex: 0 0 auto; }

.bundle-list { display: flex; flex-wrap: wrap; gap: 12px; }
.bundle-card {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft);
  padding: 12px; min-width: 200px; flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px;
}
.bundle-card .bundle-t { font-weight: 500; color: var(--fg); }
.bundle-card .bundle-i { font-size: 12px; }
.bundle-card .bundle-p { color: var(--accent); font-size: 15px; }

/* signature-attestation modal */
.attest {
  border-left: 3px solid var(--accent); background: var(--bg-soft);
  padding: 8px 10px; font-size: 12px; color: var(--muted); margin: 8px 0; line-height: 1.5;
}

/* billing document */
.billing-doc { }
.bill-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.bill-head .bill-org { font-size: 16px; color: var(--fg); font-weight: 500; }
.bill-head .bill-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.6; }
.bill-head .bill-meta strong { color: var(--fg); }
table.bill-table { width: 100%; }
table.bill-table tfoot td { border-top: 1px solid var(--border); padding-top: 8px; }
table.bill-table tr.bill-total td { font-weight: 600; color: var(--fg); font-size: 15px; }
table.bill-table tr.bill-base td { color: var(--muted); }
table.bill-table tr.bill-sched td { color: #f85149; }
/* ── Account-history date filter (client-side, deterministic date math) ── */
.bill-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bill-filter .filter-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-right: 2px; }
.bill-filter .filter-range { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bill-filter input.date-in { width: auto; min-width: 130px; padding: 3px 8px; font-size: 11px; color-scheme: dark light; }
.bill-filter button.btn.sm.active { border-color: var(--accent); color: var(--accent); background: rgba(63,185,80,0.08); }
.bill-filter .filter-empty { color: var(--muted); font-size: 12px; margin-left: 8px; }
.hist-period { margin-bottom: 14px; }
.hist-period .hist-h { font-size: 13px; color: var(--fg); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.log-row .right { margin-left: auto; color: var(--fg); padding-left: 12px; }
/* Billing ledger rows reuse .log-row but put a FULL action word ("provision"/"reassign") in
   .lv — the event-log's fixed 42px .lv column truncates the box and the nowrap text overflows
   onto the .tag beside it (green-over-white overlap). In the ledger context: let .lv size to its
   text (with a min-width so tags still line up), let the row wrap gracefully, and keep the
   amount pinned right. Scoped to .hist-period so the event-log column stays aligned. */
.hist-period .log-row { flex-wrap: wrap; white-space: normal; align-items: baseline; row-gap: 2px; }
.hist-period .log-row .lv { width: auto; min-width: 74px; padding-right: 6px; }
.hist-period .log-row .tag { white-space: nowrap; }
.hist-period .log-row .txt { flex: 1 1 200px; min-width: 0; }
.hist-period .log-row .right { flex-shrink: 0; }

/* ── print-to-PDF: when printing a bill, show ONLY the billing document (a clean invoice) ── */
@media print {
  body.printing-bill .statusbar,
  body.printing-bill header.app-head,
  body.printing-bill .sidenav,
  body.printing-bill nav.tabs,
  body.printing-bill footer,
  body.printing-bill .modal-back,
  body.printing-bill .demo-banner,
  body.printing-bill #btn-bill-pdf,
  body.printing-bill .view:not([data-view="billing"]),
  body.printing-bill .tab-panel:not([data-panel="billing"]) { display: none !important; }
  body.printing-bill { background: #fff; color: #111; }
  body.printing-bill .panel, body.printing-bill .billing-doc { background: #fff; border-color: #ccc; box-shadow: none; }
  body.printing-bill .bill-head .bill-org, body.printing-bill table.bill-table tr.bill-total td { color: #111; }
  body.printing-bill .section-label { color: #111; }
}

/* ── INDIVIDUAL ("My Memory") console additions ─────────────────────────────────────────
   Additive ONLY — scoped to elements the operator/tenant consoles do not use, so the two
   existing consoles are never restyled. .console-tag.user reuses the accent treatment;
   the voice-card grid is the single-user analogue of the tenant per-seat voice <select>. */
.console-tag.user { color: var(--accent); border-color: var(--accent-dim); }

.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 4px; }
.voice-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px;
  color: var(--fg); font-family: inherit; transition: border-color .12s ease, background .12s ease;
}
.voice-card:hover { border-color: var(--accent-dim); }
.voice-card.active { border-color: var(--accent); background: var(--accent-bg, rgba(63,185,80,.08)); }
.voice-card .vc-name { font-size: 13px; font-weight: 500; color: var(--fg); }
.voice-card.active .vc-name { color: var(--accent); }
.voice-card .vc-gloss { font-size: 11px; color: var(--muted); }
@media (max-width: 560px) { .voice-grid { grid-template-columns: 1fr; } }

/* memory detail — collapsed by default; capped list scrolls so it never dominates the panel */
.mem-detail-wrap { margin-top: 12px; }
.mem-scroll { max-height: 340px; overflow-y: auto; }
.mem-cap-note { font-size: 11px; padding: 8px 2px 2px; }

/* demo-only governance switcher (user console) — visible only in demo mode */
.demo-ctx {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; padding: 7px 14px;
  background: var(--bg-soft); color: var(--muted); border-bottom: 1px solid var(--border);
}
.demo-ctx select { font-family: var(--mono); font-size: 11px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.demo-ctx .chk { display: inline-flex; align-items: center; gap: 6px; }
.demo-ctx code { color: var(--accent); }

/* ── SEATS: card-per-seat layout (tenant console) ───────────────────────────────────────
   Additive ONLY. Replaces the old wide columnar table with a self-contained card per seat.
   The memories-kept meters (.seat-usage / .meter) are DELIBERATELY untouched — reused verbatim
   inside the card. Scoped to .seat-card* so the operator/user consoles are never affected. */
.seat-cards { display: flex; flex-direction: column; }
.seat-card {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 9px;
}
.seat-card.inactive { opacity: .55; }

/* HEAD — label title + a quiet identity line (UUID ellipsized, not a tall wrap) */
.seat-card-head { display: flex; flex-direction: column; gap: 6px; }
.sc-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sc-label { font-size: 15px; font-weight: 500; color: var(--fg); letter-spacing: .2px; }
.sc-label.empty { color: var(--muted); font-style: italic; font-weight: 400; }
.btn.xs { padding: 2px 7px; font-size: 11px; line-height: 1.25; }
.sc-edit { color: var(--muted); }
.sc-edit:hover { color: var(--accent); border-color: var(--accent-dim); }
.sc-identity { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-identity .seat-id {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  max-width: min(340px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  word-break: normal;
}
.sc-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* SETTINGS group — a labeled control grid */
.seat-settings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px 20px; padding: 14px 0; align-items: start;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.sc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-field.tier { grid-column: span 2; }             /* Tier gets a wider cell so it lines up cleanly */
.sc-flabel { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); }
.sc-fval { display: flex; align-items: center; min-width: 0; min-height: 30px; }   /* even control-row height */
.sc-tier { display: flex; gap: 8px; align-items: center; width: 100%; }
.sc-tier .tier-sel { flex: 1 1 auto; }
.sc-tier .btn { flex: 0 0 auto; }
/* selectors fill their cell so the grid columns line up evenly (no dead space) */
.seat-card .voice-sel, .seat-card .tier-sel { width: 100%; max-width: 100%; padding: 5px 7px; font-size: 12px; }

/* ACTIONS group (legacy button row — retained for any non-redesigned surface) */
.seat-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; }

/* ── SEAT CARD REDESIGN (owner mockup) — header + actions dropdown, labelled config rows, meta ───
   All colour maps to the existing tokens (var(--accent)/--danger/--border/…) so it follows the
   accent picker + light/dark theme. Icons are unicode (▾ ✎ ⚠ ✓) — no external icon font. */
.seat-card-head { display: flex; flex-direction: column; gap: 0; }
.sc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-name-wrap { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.sc-login-email { font-size: 12px; color: var(--muted); word-break: break-all; }
.sc-dot { color: var(--border); }

/* actions ▾ dropdown */
.sc-actions { position: relative; flex: 0 0 auto; }
.sc-actions-btn {
  font-family: var(--mono); background: transparent; border: 1px solid var(--accent-dim);
  color: var(--accent); padding: 6px 13px; border-radius: 6px; font-size: 12px;
  letter-spacing: .04em; cursor: pointer; transition: border-color .12s ease;
}
.sc-actions-btn:hover { border-color: var(--accent); }
.sc-caret { font-size: 11px; }
.sc-actions-menu {
  display: none; position: absolute; right: 0; top: 38px; z-index: 20; min-width: 210px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.sc-actions-menu.open { display: block; }
.sc-mi { padding: 8px 11px; font-size: 12px; color: var(--fg); border-radius: 5px; cursor: pointer; }
.sc-mi:hover { background: var(--bg); }
.sc-mi.danger { color: var(--danger); }
/* token-derived tint (not a mockup hex) — falls back gracefully to the plain hover if unsupported */
.sc-mi.danger:hover { background: var(--bg); }
.sc-mi.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.sc-menu-div { border-top: 1px solid var(--border); margin: 6px 4px; }

/* META row — uuid + tier badge + status + token/login state */
.sc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 11px; }
.sc-meta .sc-uuid { color: var(--muted); font-family: var(--mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sc-meta-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-meta-txt { color: var(--muted); }

/* CONFIGURATION — labelled rows + a right-aligned save */
.sc-config { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.sc-config-label { font-size: 10px; letter-spacing: .14em; color: var(--muted); margin-bottom: 2px; }
/* Compact labelled rows — Recall voice / Own-LLM / [Mode] / Tier / API V1, stacked tight. */
.sc-config-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.sc-config-row:last-of-type { border-bottom: none; }        /* API V1 is the last labelled row */
.sc-crow-label { font-size: 13px; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.sc-crow-val { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.sc-crow-val .voice-sel, .sc-crow-val .tier-sel { width: auto; min-width: 190px; max-width: 260px; padding: 6px 9px; font-size: 12px; }
.sc-save-row { display: flex; justify-content: flex-end; margin-top: 7px; }

/* API V1 row (per-seat reflection of the account-level add-on) — read-only states. */
.sc-api-val { font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.sc-api-val .sc-dot { color: var(--border); }
.sc-api-off { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sc-api-note { color: var(--muted); }
.sc-api-badge { flex: 0 0 auto; }
.sc-api-link { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-api-link:hover { border-bottom-style: solid; }
.sc-api-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Actions-menu group heading (e.g. "API key") — non-interactive label above grouped items. */
.sc-mi-label { padding: 8px 11px 3px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); cursor: default; }

/* Per-card login-action result slot (temp password / ok / err) — sits right under this card's
   action buttons so the shown-once secret lands where it was clicked, never off-screen at the top.
   Empty (no children) → collapses to nothing. */
.seat-msg-slot:not(:empty) { margin-top: 10px; }
/* Operator Users table — per-seat login-action result row (mirrors the .usage-row full-width cell). */
.seat-msg-row > td { padding: 0 14px; border-top: none; }
.seat-msg-row > td:empty { padding: 0; }
.seat-msg-row > td:not(:empty) { padding: 0 14px 10px; }

/* MEMORIES KEPT — wrapper only; the inner .seat-usage grid + meters are unchanged. A top border
   sections it off from the actions above. */
.seat-usage-wrap { padding-top: 9px; margin-top: 0; border-top: 1px solid var(--border); }
/* Quiet identity line under the individual "My Memory" usage bars — the account UUID, styled like
   the seat card's small UUID caption (never a headline). */
.mem-uuid { margin-top: 10px; font-size: 10.5px; letter-spacing: .3px; font-variant-numeric: tabular-nums; word-break: break-all; }
.mem-uuid:empty { display: none; }
.mem-uuid::before { content: "account id · "; opacity: .65; }

/* CENTERED, stylized accent divider BETWEEN cards — a short middle segment that fades out
   symmetrically (not a full-width rule, not left-inset). Token-based; works light + dark.
   `margin: * auto` centers it on the flex column's cross-axis (.seat-cards). */
.seat-divider {
  height: 2px; width: 150px; border: 0; border-radius: 2px;
  margin: 12px auto; opacity: .9; align-self: center;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 65%, transparent) 50%,
    transparent 100%);
}

@media (max-width: 560px) {
  .seat-card { padding: 14px 14px; }
  .seat-settings { grid-template-columns: 1fr; }
  .sc-identity .seat-id { max-width: 100%; }
  /* Stack each config row (label over control) so the selects don't overflow on narrow screens. */
  .sc-config-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .sc-crow-val { justify-content: flex-start; }
  .sc-crow-val .voice-sel, .sc-crow-val .tier-sel { width: 100%; max-width: 100%; min-width: 0; }
  .sc-actions-menu { min-width: 180px; }
}

/* ── TIER palette — a FIXED semantic scale so Standard→Agent are distinguishable at a glance.
   Independent of the user-chosen --accent highlight; AGENT is hard-set green (#3FB950), NOT the
   accent, so it never drifts with the highlight choice. Applies wherever typeBadge() renders. */
/* scoped to .seat-card so the operator/user consoles are never restyled */
.seat-card .badge.type.standard { color: #8b949e; border-color: #3a3f45; }
.seat-card .badge.type.advanced { color: #58A6FF; border-color: #1f4a73; }
.seat-card .badge.type.expert   { color: #A371F7; border-color: #4a327a; }
.seat-card .badge.type.agent    { color: #3FB950; border-color: #285e33; }   /* hard-set green — not the accent */
:root[data-theme="light"] .seat-card .badge.type.standard { color: #57606a; border-color: #d0d7de; }
:root[data-theme="light"] .seat-card .badge.type.advanced { color: #0969da; border-color: #b6d3f2; }
:root[data-theme="light"] .seat-card .badge.type.expert   { color: #8250df; border-color: #d5c6f5; }
:root[data-theme="light"] .seat-card .badge.type.agent    { color: #2ea043; border-color: #a6dbb2; }

/* ── TIER FILTER chips (the "bounding table" above the seat cards) ───────────────────────── */
.tier-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.tier-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; transition: border-color .12s ease, color .12s ease;
}
.tier-chip:hover { border-color: var(--fg); color: var(--fg); }
.tier-chip .tc-count { font-size: 10px; color: var(--fg); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.tier-chip.disabled { opacity: .4; cursor: default; }
.tier-chip.disabled:hover { border-color: var(--border); color: var(--muted); }
/* active state — tinted on the tier's own colour (agent = fixed green) */
.tier-chip.active { color: var(--fg); }
.tier-chip.t-all.active      { border-color: var(--fg); }
.tier-chip.t-standard.active { border-color: #8b949e; color: #8b949e; }
.tier-chip.t-advanced.active { border-color: #58A6FF; color: #58A6FF; }
.tier-chip.t-expert.active   { border-color: #A371F7; color: #A371F7; }
.tier-chip.t-agent.active    { border-color: #3FB950; color: #3FB950; }
:root[data-theme="light"] .tier-chip.t-advanced.active { border-color: #0969da; color: #0969da; }
:root[data-theme="light"] .tier-chip.t-expert.active   { border-color: #8250df; color: #8250df; }
:root[data-theme="light"] .tier-chip.t-agent.active    { border-color: #2ea043; color: #2ea043; }

/* ── Server-utilization quick-view card (operator console only) — additive, reuses .meter ──
   New selectors ONLY. Does not touch the tenant/user consoles or the existing .meter rules. */
.srv-card { margin-bottom: 18px; padding: 14px 16px; }
.srv-card .srv-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.srv-card .srv-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fg); }
.srv-card .srv-title::before { content: "▸ "; color: var(--accent); }
.srv-card .srv-sub { font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.srv-card .srv-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.srv-card .srv-stamp { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.srv-card .srv-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 22px;
}
.srv-card .meter .m-bar { height: 7px; }
.srv-card .srv-note { margin-top: 10px; font-size: 11px; color: var(--muted); }
.srv-card.stale { opacity: .55; transition: opacity .2s ease; }

/* ── Seats: deleted-users toggle + filter bar + locked toggle + wider user memory ────────── */
.seats-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.seats-filterbar .tier-filter { margin-bottom: 0; }
.seat-deleted-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.seat-deleted-toggle input { accent-color: var(--accent); }
/* a non-interactive (locked) segmented toggle — same visual as .switch, clearly not clickable */
.switch.locked { opacity: .55; cursor: default; }
.switch.locked .track { cursor: default; }
/* the individual ("My Memory") console runs a touch wider so the memory view isn't cramped */
.wide-main { max-width: 1280px; }

/* ── Payment settings (operator config surface) ── */
.pay-banner { border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 6px; padding: 10px 14px; font-size: 13px; background: var(--bg-soft); }
.pay-banner.warn { border-left-color: var(--warn); }
.pay-banner.pend { border-left-color: var(--accent-dim); }
.pay-banner.ok   { border-left-color: var(--accent); }
.pay-banner strong { color: var(--fg); }
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.pill-note.ok { color: var(--accent); }

/* ── Guided onboarding TOUR ─────────────────────────────────────────────────
   Fully token-based (follows the accent picker + light/dark). Self-contained,
   no external assets. Reduced-motion honored via the .fl-reduce class. */

/* header launcher button reuses .btn.sm; nothing extra needed. */

/* spotlight overlay */
.fl-tour-root { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none; }
.fl-tour-root.fl-active { display: block; }
.fl-tour-hole {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  border-radius: 4px; opacity: 0;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.66), 0 0 0 2px var(--accent) inset;
  outline: 2px solid var(--accent); outline-offset: 0;
  /* Opacity only — position/size SNAP. Transitioning top/left/width/height made the hole
     swoop from the corner on first paint and lag behind the target during scroll. */
  transition: opacity .18s ease;
  pointer-events: none;
}
.fl-reduce .fl-tour-hole { transition: none; }

.fl-tour-callout {
  position: fixed; width: 340px; max-width: calc(100vw - 28px);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 16px 16px 14px; z-index: 902;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55); pointer-events: auto;
  font-family: var(--mono);
}
.fl-tour-callout.fl-centered {
  top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);
}
.fl-tour-callout:not(.fl-centered) { transform: none; }
.fl-tour-step {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.fl-tour-callout h4 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg);
}
.fl-tour-body { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--fg); }
.fl-tour-readmore { display: inline-block; font-size: 11.5px; color: var(--accent); margin-bottom: 12px; }
.fl-tour-nav { display: flex; gap: 8px; justify-content: flex-end; }
.fl-tour-x {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 11px;
}
.fl-tour-x:hover { color: var(--fg); border-color: var(--fg); }

/* topic picker modal */
.fl-tour-modal-wrap {
  position: fixed; inset: 0; z-index: 950; display: none;
  background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 20px;
}
.fl-tour-modal-wrap.fl-active { display: flex; }
.fl-tour-modal {
  position: relative; width: 520px; max-width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 22px 22px 18px; box-shadow: 0 18px 60px rgba(0,0,0,0.6); font-family: var(--mono);
}
.fl-tour-modal h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
.fl-tour-sub { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.fl-tour-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fl-tour-topic-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 13px; cursor: pointer; color: var(--fg); font-family: var(--mono);
  transition: border-color .12s ease, background .12s ease;
}
.fl-tour-topic-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fl-tour-topic.done .fl-tour-topic-btn { border-left: 3px solid var(--accent); }
.fl-tour-check {
  flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-dim); border-radius: 50%; color: var(--accent); font-size: 11px; font-weight: 700;
}
.fl-tour-topic.done .fl-tour-check { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.fl-tour-topic-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-tour-topic-title { font-size: 12.5px; color: var(--fg); }
.fl-tour-topic-desc { font-size: 11px; color: var(--muted); }
.fl-tour-topic-go { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); opacity: .8; }
.fl-tour-topic.just-done { animation: fl-tour-flash 1.1s ease; }
@keyframes fl-tour-flash { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: none; } }
.fl-reduce .fl-tour-topic.just-done { animation: none; }
.fl-tour-allset {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: 5px; color: var(--accent); font-size: 12px;
}
.fl-tour-modal-foot { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.fl-tour-wiki { font-size: 11.5px; color: var(--accent); }

/* first-run prompt (bottom-right, non-blocking) */
.fl-tour-firstrun {
  position: fixed; right: 20px; bottom: 20px; z-index: 940; width: 300px; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 16px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  font-family: var(--mono); opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.fl-tour-firstrun.fl-active { opacity: 1; transform: translateY(0); }
.fl-reduce .fl-tour-firstrun { transition: none; }
.fl-tour-fr-title { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg); margin-bottom: 6px; }
.fl-tour-fr-body { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fl-tour-fr-row { display: flex; gap: 8px; }

/* ── ACTIVE first-run onboarding checklist (onboarding.js) ─────────────────────
   A docked, NON-BLOCKING card (bottom-right) — the user keeps it open while they
   actually interact with the highlighted control. Token-based (accent + light/dark). */
.fl-onb-card {
  position: fixed; right: 20px; bottom: 20px; z-index: 945;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  font-family: var(--mono); display: none; overflow: hidden;
}
.fl-onb-card.fl-onb-open { display: block; }
.fl-onb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.fl-onb-head-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg); cursor: default; }
.fl-onb-card.fl-onb-min .fl-onb-head-title { cursor: pointer; }
.fl-onb-progress {
  margin-left: auto; font-size: 11px; color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: 10px; padding: 1px 8px;
}
.fl-onb-head-btns { display: flex; gap: 4px; }
.fl-onb-mini, .fl-onb-close {
  width: 22px; height: 22px; line-height: 1; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12px;
}
.fl-onb-mini:hover, .fl-onb-close:hover { color: var(--fg); border-color: var(--fg); }
.fl-onb-body { padding: 12px 12px 14px; max-height: min(66vh, 560px); overflow-y: auto; }
.fl-onb-card.fl-onb-min .fl-onb-body { display: none; }

.fl-onb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fl-onb-step {
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 11px; background: var(--bg-soft);
  transition: border-color .12s ease;
}
.fl-onb-step.active { border-color: var(--accent); border-left: 3px solid var(--accent); padding-left: 9px; }
.fl-onb-step.done { opacity: .72; }
.fl-onb-step.done.active { opacity: 1; }
.fl-onb-step-top { display: flex; align-items: center; gap: 10px; }
.fl-onb-check {
  flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-dim); border-radius: 50%; color: var(--accent);
  font-size: 11px; font-weight: 700;
}
.fl-onb-step.done .fl-onb-check { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.fl-onb-step-title { font-size: 12.5px; color: var(--fg); }
.fl-onb-step-detail { margin: 9px 0 0 30px; }
.fl-onb-step-action { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.fl-onb-step.done .fl-onb-step-action { color: var(--muted); }

.fl-onb-payoff {
  margin: 0 0 10px; padding: 9px 10px; border: 1px dashed var(--accent-dim);
  border-radius: 5px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.fl-onb-say { display: flex; align-items: baseline; gap: 8px; }
.fl-onb-say-lbl { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); width: 54px; }
.fl-onb-say code { font-size: 12px; color: var(--fg); word-break: break-word; }

.fl-onb-step-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fl-onb-manual {
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-family: var(--mono); font-size: 11.5px; text-decoration: underline;
}
.fl-onb-manual:hover { color: var(--fg); }
.fl-onb-learn { font-size: 11.5px; color: var(--accent); }

.fl-onb-allset {
  margin-top: 6px; padding: 10px 12px; border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: 5px; color: var(--accent); font-size: 12px; line-height: 1.5;
}

/* "Replay the walkthrough" (on the all-set banner) + preview bar + its exit button */
.fl-onb-replay {
  display: inline-block; margin-top: 6px; padding: 4px 10px; font-family: var(--mono);
  font-size: 11px; background: transparent; border: 1px solid var(--accent-dim);
  border-radius: 4px; color: var(--accent); cursor: pointer;
}
.fl-onb-replay:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fl-onb-preview-bar {
  margin-bottom: 10px; padding: 8px 11px; border: 1px dashed var(--accent-dim);
  border-radius: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.5;
}
.fl-onb-preview-exit {
  margin-left: 6px; padding: 2px 8px; font-family: var(--mono); font-size: 11px;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg); cursor: pointer;
}
.fl-onb-preview-exit:hover { border-color: var(--fg); }

/* header launcher — mirror the "? Help" tour button, tinted done when finished */
#fl-onboard-btn.fl-onb-btn-done { border-color: var(--accent-dim); color: var(--accent); }

/* pulse ring drawn on the real control after "Take me there" (non-blocking highlight) */
.fl-onb-flash { animation: fl-onb-pulse 1.8s ease; border-radius: 4px; }
@keyframes fl-onb-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  35%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-onb-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* ══ SHARED ALERT STRIP — actionable items (Part A) + broadcasts (Part B) ══════════════
   Compact, non-dominating: rendered ONLY when there's something to show (JS toggles .hidden).
   Sits at the top of the content area on all three consoles. */
.alert-strip { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.alert-strip.hidden { display: none; }
.alert-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px;
  background: var(--bg-soft);
}
.alert-item .alert-msg { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.alert-item .alert-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--muted);
}
.alert-item .alert-cta, .alert-item .alert-dismiss { flex: 0 0 auto; white-space: nowrap; }
.alert-item .alert-dismiss { background: transparent; border-color: var(--border); color: var(--muted); }
.alert-item .alert-dismiss:hover { border-color: var(--muted); color: var(--fg); }
/* severity bands (broadcasts) */
.alert-item.sev-info     { border-left-color: #58a6ff; }
.alert-item.sev-info     .alert-dot { background: #58a6ff; }
.alert-item.sev-warning  { border-left-color: var(--warn); }
.alert-item.sev-warning  .alert-dot { background: var(--warn); }
.alert-item.sev-critical { border-left-color: var(--danger); }
.alert-item.sev-critical .alert-dot { background: var(--danger); }
/* actionable items say "do something" — lean on the accent regardless of severity band */
.alert-item.action { border-left-color: var(--accent); }
.alert-item.action .alert-dot { background: var(--accent); }
/* deep-link target highlight pulse (added briefly by alerts.js after navigate) */
@keyframes fl-alert-pulse {
  0%   { box-shadow: 0 0 0 2px var(--accent); background: rgba(63,185,80,0.10); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
.fl-alert-pulse { animation: fl-alert-pulse 1.3s ease-out 2; border-radius: 6px; }

/* severity badges (broadcast manage list) */
.badge.info     { color: #58a6ff; border-color: #2b4a70; }
.badge.warning  { color: var(--warn); border-color: #5c4a24; }
.badge.critical { color: var(--danger); border-color: #7a2620; }

/* full-width labelled field (broadcast compose subject/message) */
.block-label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 12px; }
.block-label input[type=text], .block-label textarea { margin-top: 4px; width: 100%; }

/* ══ CLINICAL account type (migration 170) — shared by operator (index) + tenant consoles ══
   Governance / key-management / audit UI only — NO medical/PHI styling. Reuses the existing
   card / panel / table / badge / secret-box density; adds only the clinical kind badge, an
   extra-small row-action button, and tight spacing for the sub-admin action cluster. */
.badge.kind.clinical { color: #34b9c4; border-color: #2c7c86; }
/* extra-small button for the per-doctor row-action cluster (suspend / grant-key) — one step
   below .btn.sm so several fit a table cell without wrapping. */
button.btn.xs { padding: 3px 8px; font-size: 10px; }
#cl-doctors-body td:last-child { white-space: nowrap; }
#cl-doctors-body td:last-child .btn.xs { margin-left: 4px; }
#cl-mykey-state .kv, #cl-plan .kv { margin: 2px 0; }

/* ════════════════════════════════════════════════════════════════════════════════════════
   ██ SHARED MOBILE / RESPONSIVE LAYER — ONE source of truth for ALL three consoles ██
   (operator index.html · tenant tenant.html · individual user.html · bench.html)

   Research-driven (2026-07, cited in the deliverable):
   • WCAG 2.1 AAA target-size = 44×44px; Material = 48dp → tap targets bumped to ≥44px on mobile.
   • iOS auto-zooms any <16px form field on focus → inputs go to 16px on mobile (kills the zoom).
   • Dense data tables: horizontal-scroll-in-own-container beats squishing cells (Setproduct/2026).
     The <table> itself becomes the scroll box (display:block; overflow-x:auto) so the PAGE BODY
     never scrolls sideways and column alignment is preserved by the anonymous table box.
   • Card grids: 4→2→1 columns as width drops (already handled per-grid; body-guard added here).
   • Genuinely-impractical dense live widgets (log firehose) → honest "desktop-only" affordance,
     NOT a mangled control. Everything else stays touch-usable.
   CSP-safe: pure CSS. All interactive nav toggles remain external-JS/addEventListener.
   Breakpoints (shared across all consoles + landing): 900px tablet, 600px phone, 480px small.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── desktop-only / mobile-only visibility utilities (CSS-toggled, no JS) ───────────────── */
.desktop-only-note {
  display: none;
  border: 1px dashed var(--border); border-left: 3px solid var(--warn);
  background: var(--bg-soft); color: var(--muted);
  padding: 12px 14px; margin: 10px 0; font-size: 12px; line-height: 1.6;
}
.desktop-only-note strong { color: var(--fg); }
.desktop-only-note::before { content: "▸ "; color: var(--warn); }

/* ── TABLET ≤900px : wide data tables become horizontal-scroll containers ──────────────────
   Applies to real data tables inside the console body of every console. The table box clips
   its own overflow so nothing forces the page wider than the viewport. Header cells + id/
   numeric cells stay on one line so a dense roster scrolls cleanly instead of wrap-mangling. */
@media (max-width: 900px) {
  main table:not(.no-scroll),
  .content table:not(.no-scroll) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main table:not(.no-scroll) th,
  .content table:not(.no-scroll) th,
  main table:not(.no-scroll) td.mono-id,
  .content table:not(.no-scroll) td.mono-id,
  main table:not(.no-scroll) td.num,
  .content table:not(.no-scroll) td.num { white-space: nowrap; }

  /* card / metric grids collapse toward a single readable column */
  .counts-grid { grid-template-columns: repeat(2,1fr); }
  .bundle-list { flex-direction: column; }

  /* input-plus-button rows stack so the control isn't crushed */
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .btn { width: 100%; }
}

/* ── PHONE ≤600px : nav collapse, touch targets, stacking, body horizontal-scroll guard ──── */
@media (max-width: 600px) {
  /* HARD guard: no matter what, the page body never scrolls sideways (all wide content is in
     its own overflow container above). */
  html, body { overflow-x: hidden; }

  main { padding: 10px 12px 20px; }

  /* top status/header bars wrap instead of overflowing */
  .statusbar { flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; }
  .statusbar .right { margin-left: auto; }
  header.app-head { flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; }
  header.app-head .logo { width: 60px; }
  header.app-head .head-actions { margin-left: auto; }

  /* TENANT + INDIVIDUAL top tab bar: wrap to rows so every tab stays reachable (no hidden
     tabs, no hamburger needed for ~7 items) with a ≥44px tap height. */
  nav.tabs { flex-wrap: wrap; }
  nav.tabs button { flex: 1 1 auto; min-height: 44px; padding: 11px 12px; }
  nav.tabs.users-subtabs button { min-height: 40px; }
  .subnav { flex-wrap: wrap; }
  .subnav button { min-height: 40px; }

  /* OPERATOR sidenav (already stacks to a wrap-bar at 760px) — give each item a real tap area */
  .sidenav .nav-item { min-height: 44px; display: flex; align-items: center; }

  /* touch targets: WCAG/Material — buttons, tabs, checkbox labels ≥44px */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; padding: 8px 12px; }
  .btn.xs { min-height: 36px; padding: 6px 10px; }
  .log-controls label.chk { min-height: 40px; }

  /* inputs: 16px prevents iOS focus-zoom; full-width; comfortable height */
  input[type=text], input[type=password], input[type=email], input[type=number],
  input[type=date], select, textarea {
    width: 100%; font-size: 16px; min-height: 44px;
  }
  .bill-filter input.date-in { min-width: 0; width: 100%; }

  /* single-column card/metric grids */
  .counts-grid { grid-template-columns: 1fr; }

  /* desktop-only gating flips ON at phone width */
  .desktop-only { display: none !important; }
  .desktop-only-note { display: block; }
}

/* ── SMALL ≤480px : modals fit the phone, action rows stack full-width ─────────────────────
   (.modal already has max-width:440px/width:90%; here it also can't exceed the viewport height,
   and its confirm/cancel/signature buttons become full-width stacked so they're easy to hit.) */
.modal { max-height: 90vh; overflow-y: auto; }
@media (max-width: 480px) {
  .modal { width: 94%; padding: 18px 16px; }
  .modal .row { flex-direction: column-reverse; gap: 8px; }
  .modal .row .btn { width: 100%; }
}