/* supercluster operator console: refined-minimalist enterprise UI.
   IBM Plex Sans / IBM Plex Mono. Light theme. No gradients, no floating
   ornaments. Dense informational tables. Designed for the daily
   operator. */

/* Self-hosted because the CSP is font-src 'self'; a font CDN cannot
   load here. index.html used to link fonts.googleapis.com, which
   default-src 'self' blocked outright, so no webfont ever arrived and
   every screen rendered in whatever the OS supplied, differing per
   machine. These four faces are the ones the stylesheets actually use:
   400 and 500 across app.css, 600 across data-console.css, and mono for
   identifiers and code.

   ponytail: no 700 face. data-console.css asks for it once, on an 11px
   uppercase letter-spaced nav label, where the browser falling back to
   the loaded 600 is not visible. Add IBMPlexSans-Bold.woff2 if a real
   bold ever appears at a size where it reads. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surface */
  --bg:        #F7F8FA;
  --surface:   #FFFFFF;
  --surface-2: #FBFCFD;
  --surface-3: #F2F4F7;

  /* ink */
  --ink:    #0B1221;
  --ink-2:  #334155;
  --ink-3:  #5B6678;
  --ink-4:  #8A93A6;
  --ink-5:  #B8C0CD;

  /* lines */
  --line:        #E6E8EE;
  --line-strong: #D5D9E1;
  --line-faint:  #EFF1F5;

  /* accents (status: restrained, monotone-leaning) */
  --accent:        #1E3A8A;   /* corporate navy */
  --accent-2:      #2C4DAE;
  --accent-tint:   #EEF2FF;

  --ok:        #0E7C5C;
  --ok-tint:   #ECFDF5;
  --warn:      #92580B;
  --warn-tint: #FFFBEB;
  --err:       #B11F1F;
  --err-tint:  #FEF2F2;
  --info:      #1D4ED8;
  --info-tint: #EFF6FF;
  --slate:     #475569;
  --slate-tint:#F1F5F9;
  --violet:    #6B41B0;
  --violet-tint:#F5F1FB;

  /* sizing */
  --nav-w: 248px;
  --header-h: 56px;
  --radius: 4px;
  --radius-2: 6px;

  /* type: IBM Plex Sans / IBM Plex Mono, loaded above. Plex's metrics
     are slightly lighter than Roboto's, which the weights and
     line-heights below were originally calibrated against. */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular",
               Consolas, monospace;

  /* shadow: very subtle, used only on raised drawer/modal */
  --shadow-1: 0 1px 0 rgba(11, 18, 33, 0.04);
  --shadow-2: 0 1px 2px rgba(11, 18, 33, 0.06),
              0 8px 24px rgba(11, 18, 33, 0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit; cursor: pointer;
  background: none; border: 0;
}
input, select, textarea {
  font: inherit; color: inherit;
}
code, pre, .mono { font-family: var(--font-mono); font-feature-settings: "ss01", "zero"; }

/* ---------- App shell ---------- */

.app {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height: 100vh;
}

aside.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.sidebar .brand .mark {
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.sidebar .brand .name {
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 15px;
}

.sidebar nav.primary {
  padding: 12px 8px;
  flex: 1;
  overflow-y: auto;
}

.nav-section {
  padding: 14px 10px 6px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--ink-4);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
  position: relative;
}
.nav-link svg { width: 14px; height: 14px; opacity: 0.75; }
.nav-link:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.nav-link.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}
.nav-link.is-active svg { opacity: 1; }
.nav-link .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.nav-link.is-active .count { color: var(--accent-2); }

.sidebar .footer {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar .footer .ok { color: var(--ok); }
.sidebar .footer .warn { color: var(--warn); }
.sidebar .footer .err { color: var(--err); }

/* ---------- Top header ---------- */

main.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

header.app-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 8;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.crumbs .sep { color: var(--ink-5); }
.crumbs .root { color: var(--ink-3); }
.crumbs .leaf { color: var(--ink); font-weight: 500; }

.app-header .grow { flex: 1; }

.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--surface-2);
}
.env-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(14, 124, 92, 0.12);
}
.env-pill.is-down     .dot { background: var(--err);  box-shadow: 0 0 0 3px rgba(177, 31, 31, 0.12); }
.env-pill.is-demo     .dot { background: var(--violet); box-shadow: 0 0 0 3px rgba(107, 65, 176, 0.12); }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  border: 1px solid transparent;
}
.icon-btn:hover { color: var(--ink); background: var(--surface-3); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Page region ---------- */

.view {
  padding: 24px 28px 56px;
  flex: 1;
  min-width: 0;
}

.view-head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.view-head h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.view-head .grow { flex: 1; }
.view-blurb {
  margin: 4px 0 0; font-size: 13px; color: var(--ink-3); max-width: 70ch;
}

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 14px;
}
/* Sortable headings. The button carries the click target so the heading
   stays a th for assistive tech rather than becoming a div that looks
   like one. */
.tbl th.sortable { padding: 0; }
.tbl th.sortable .th-sort {
  display: inline-flex; align-items: center; gap: 4px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 8px 10px; text-align: left;
}
.tbl th.sortable .th-sort:hover { background: var(--surface-3); }
.tbl th.sortable .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tbl th.is-sorted .th-sort { color: var(--ink); font-weight: 600; }
.tbl th .th-arrow { font-size: 10px; color: var(--ink-4); }
.tbl th.is-sorted .th-arrow { color: var(--accent); }
.tbl th.sortable.right .th-sort { justify-content: flex-end; }

.toolbar-lead {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-4); margin-right: 2px;
}
.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.toolbar input,
.toolbar select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 12px;
  background: var(--surface);
  height: 28px;
  outline: none;
}
.toolbar input:focus,
.toolbar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.toolbar input.id-input { font-family: var(--font-mono); width: 200px; }
.toolbar .grow { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.btn:hover { background: var(--surface-3); }
.btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn.primary:hover { background: #1A2238; }
.btn.danger {
  background: var(--surface);
  border-color: var(--err);
  color: var(--err);
}
.btn.danger:hover { background: var(--err-tint); }
.btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.btn.ghost:hover { background: var(--surface-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- KPI grid ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 14px 14px 12px;
  position: relative;
}
.kpi .label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.kpi .value {
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  font-weight: 500;
  color: var(--ink);
}
.kpi .delta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.kpi.danger .value { color: var(--err); }
.kpi.warn .value   { color: var(--warn); }
.kpi.ok .value     { color: var(--ok); }

/* ---------- Banner ---------- */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-2);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 18px;
  font-size: 13px;
}
.banner.warn { border-color: rgba(146, 88, 11, 0.35); background: var(--warn-tint); color: #5C3F0A; }
.banner.err  { border-color: rgba(177, 31, 31, 0.35); background: var(--err-tint);  color: #6F1717; }
.banner.info { border-color: rgba(29, 78, 216, 0.25); background: var(--info-tint); color: #14306C; }
.banner .grow { flex: 1; }

/* ---------- Cards / panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  margin-bottom: 18px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.panel-head h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.panel-head .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.panel-head .actions { display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 12px 14px; }
.panel-body.dense { padding: 0; }
.panel-body.flush { padding: 0; }

.split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- Table ---------- */

.tbl-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  font-weight: 500;
}
.tbl tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-faint);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.is-selectable { cursor: pointer; }
.tbl tbody tr.is-selectable:hover { background: var(--surface-3); }
.tbl tbody tr.is-active { background: var(--accent-tint); }
.tbl td.mono, .tbl th.mono { font-family: var(--font-mono); font-size: 12px; }
.tbl td.right, .tbl th.right { text-align: right; }
.tbl td.dim { color: var(--ink-3); }
.tbl tbody tr.empty td {
  text-align: center;
  color: var(--ink-3);
  padding: 28px;
  font-size: 12px;
}

/* density modifiers (toggled by Settings.display.density) */
body.density-compact .tbl tbody td { padding: 5px 12px; font-size: 12px; }
body.density-compact .tbl thead th { padding: 7px 12px; }
body.density-spacious .tbl tbody td { padding: 13px 16px; }
body.density-spacious .tbl thead th { padding: 14px 16px; }

/* ---------- Status pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-weight: 500;
  white-space: nowrap;
}
.pill.ok    { color: var(--ok);    background: var(--ok-tint);    border-color: rgba(14,124,92,0.18); }
.pill.err   { color: var(--err);   background: var(--err-tint);   border-color: rgba(177,31,31,0.20); }
.pill.warn  { color: var(--warn);  background: var(--warn-tint);  border-color: rgba(146,88,11,0.22); }
.pill.info  { color: var(--info);  background: var(--info-tint);  border-color: rgba(29,78,216,0.18); }
.pill.slate { color: var(--slate); background: var(--slate-tint); border-color: rgba(71,85,105,0.18); }
.pill.violet{ color: var(--violet);background: var(--violet-tint);border-color: rgba(107,65,176,0.18); }
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.classpill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface-2);
}

.copyable {
  cursor: copy;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.copyable:hover { background: var(--accent-tint); }
.truncated { display: inline-block; max-width: 16ch; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; }

.dim { color: var(--ink-4); }

/* ---------- Sensitivity matrix ---------- */

.matrix {
  display: grid;
  grid-template-columns: 140px repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--surface);
}
.matrix .cell {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 13px;
}
.matrix .cell:nth-child(4n) { border-right: 0; }
.matrix .row-end { border-bottom: 0; }
.matrix .head {
  background: var(--surface-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--ink-3);
}
.matrix .row-label {
  background: var(--surface-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.matrix .cell.allow             { color: var(--ok); }
.matrix .cell.deny              { color: var(--err); }
.matrix .cell.requires_override { color: var(--warn); }
.matrix .cell .decision {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 4px;
}
.matrix .cell .note { color: var(--ink-3); font-size: 12px; }

/* ---------- DAG renderer ---------- */

.dag {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 16px;
  overflow: auto;
}
.dag svg { display: block; }
.dag .node-rect {
  fill: var(--surface-2);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.dag .node-rect.completed  { fill: var(--ok-tint);  stroke: rgba(14,124,92,0.5); }
.dag .node-rect.dispatched { fill: var(--info-tint);stroke: rgba(29,78,216,0.5); }
.dag .node-rect.failed     { fill: var(--err-tint); stroke: rgba(177,31,31,0.5); }
.dag .node-rect.pending    { fill: var(--surface-3);stroke: var(--line-strong); }
.dag .node-rect.aggregator { stroke-dasharray: 3 3; stroke-width: 1.5; stroke: var(--accent); }
.dag .node-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  fill: var(--ink);
}
.dag .node-state {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  fill: var(--ink-3);
}
.dag .edge {
  stroke: var(--line-strong);
  stroke-width: 1;
  fill: none;
  marker-end: url(#dag-arrow);
}
.dag .edge.completed { stroke: rgba(14,124,92,0.55); }

/* ---------- Audit chain visualisation ---------- */

.chain-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0;
  position: relative;
  padding: 8px 0 8px 0;
  border-bottom: 1px dashed var(--line);
}
.chain-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.chain-rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.chain-rail .node {
  position: relative;
  width: 8px; height: 8px;
  background: var(--surface);
  border: 2px solid var(--ink-3);
  border-radius: 50%;
  margin-top: 6px;
  z-index: 1;
}
.chain-rail .node.success { border-color: var(--ok); }
.chain-rail .node.fail    { border-color: var(--err); }
.chain-rail .node.allow   { border-color: var(--info); }

.chain-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  padding: 0 14px;
}
.chain-body .top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.chain-body .top .seq {
  font-family: var(--font-mono);
  color: var(--ink-3);
  font-size: 11px;
}
.chain-body .top .event {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 500;
}
.chain-body .ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.chain-body .reason {
  color: var(--ink-3);
  font-size: 12px;
}
.chain-body .hashes {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.chain-body .hashes b { color: var(--ink-3); font-weight: 500; }

/* ---------- Drawer (right slide-over for detail) ---------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(620px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 160ms ease;
  z-index: 12;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-head h3 { font-size: 14px; font-weight: 500; }
.drawer-head .id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.drawer-head .grow { flex: 1; }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 32px;
}
.drawer-body section { margin-bottom: 22px; }
.drawer-body section h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 500;
}

.kv-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 6px;
  column-gap: 16px;
  font-size: 13px;
}
.kv-list .k { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.kv-list .v { font-family: var(--font-mono); font-size: 12px; color: var(--ink); word-break: break-word; }
.kv-list .v.muted { color: var(--ink-4); }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 33, 0.30);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Toast ---------- */

.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  pointer-events: auto;
  box-shadow: var(--shadow-2);
  max-width: 360px;
}
.toast.err { background: var(--err); }
.toast.ok  { background: var(--ok); }

/* ---------- Misc ---------- */

.hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hash-chunk {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.hash-chunk b { color: var(--ink); font-weight: 500; }

.outcome-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px 14px;
}
.outcome-bar .item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-2);
}
.outcome-bar .item .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.outcome-bar .item .num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* simple bar: used for outcome breakdown widget */
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}
.bar-row .name { font-family: var(--font-mono); color: var(--ink-2); }
.bar-row .num  { font-family: var(--font-mono); text-align: right; color: var(--ink-3); }
.bar-row .bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%;
  background: var(--ink-2);
}
.bar-row.ok .bar-fill   { background: var(--ok); }
.bar-row.deny .bar-fill { background: var(--err); }
.bar-row.allow .bar-fill{ background: var(--info); }

/* selector tabs (governance subtabs, settings subtabs) */
.tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tabs button {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  border-right: 1px solid var(--line);
}
.tabs button:last-child { border-right: 0; }
.tabs button.is-active {
  background: var(--ink);
  color: #fff;
}

/* code block */
pre.code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow: auto;
  font-size: 12px;
  color: var(--ink);
  max-height: 320px;
}

/* keyboard hint */
kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink-2);
  background: var(--surface-2);
}

/* skeleton loading shimmer-free placeholder */
.skel {
  background: var(--surface-3);
  border-radius: 3px;
  display: inline-block;
  height: 12px;
}

/* form pair (used in the governance residency editor) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.form-grid .row { display: grid; gap: 4px; }
.form-grid label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 12px;
  background: var(--surface);
  outline: none;
  width: 100%;
}
.form-grid textarea {
  font-family: var(--font-mono);
  resize: vertical;
  min-height: 80px;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-grid .full { grid-column: 1 / -1; }

/* link-styled action */
.link {
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.link:hover { color: var(--accent-2); text-decoration: underline; }

/* ---------- Settings page ---------- */

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 880px) {
  .settings-layout { grid-template-columns: 1fr; }
}

.settings-nav {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 8px;
  font-size: 13px;
}
.settings-nav button {
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-weight: 400;
}
.settings-nav button:hover { background: var(--surface-3); color: var(--ink); }
.settings-nav button.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}
.settings-nav .group {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 12px 10px 4px;
}

.settings-section { display: flex; flex-direction: column; gap: 18px; }

.field-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 16px 18px;
}
.field-group h3 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.field-group .desc {
  color: var(--ink-3);
  font-size: 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.field-group .desc.warn { color: var(--warn); }
.field-group .desc code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
}
.field-group .row + .row { margin-top: 12px; }
.field-group .field-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line-faint);
  padding-top: 12px;
}
.field-group .field-actions .grow { flex: 1; }

.danger-zone {
  border-color: rgba(177, 31, 31, 0.30);
  background: var(--err-tint);
}
.danger-zone h3 { color: var(--err); }

.field-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
  padding: 10px 0;
}
.field-row + .field-row { border-top: 1px solid var(--line-faint); }
.field-row .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.field-row .label .req {
  color: var(--err);
  margin-left: 2px;
}
.field-row .label .help {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.field-row .control { min-width: 0; }
.field-row .control input[type="text"],
.field-row .control input[type="password"],
.field-row .control input[type="email"],
.field-row .control input[type="number"],
.field-row .control input[type="url"],
.field-row .control select,
.field-row .control textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--surface);
  outline: none;
}
.field-row .control textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 86px;
  resize: vertical;
}
.field-row .control input:focus,
.field-row .control select:focus,
.field-row .control textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field-row .control .helptext {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.field-row .control .inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.field-row .control .inline input { flex: 1 1 0%; min-width: 0; }
.field-row .control .check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.field-row .control .check input { transform: translateY(0); }
.field-row.compact { padding: 6px 0; }
@media (max-width: 720px) {
  .field-row { grid-template-columns: 1fr; }
}

.secret-input { position: relative; }
.secret-input input { padding-right: 60px; }
.secret-input .peek {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
}
.secret-input .peek:hover { color: var(--ink); }

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 8px;
  background: var(--surface);
  min-height: 36px;
}
.tag-input .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-3);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.tag-input .tag button {
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1;
}
.tag-input .tag button:hover { color: var(--err); }
.tag-input input {
  flex: 1 1 80px;
  min-width: 80px;
  border: 0;
  outline: none;
  font-size: 12px;
  background: transparent;
  font-family: var(--font-mono);
}

.empty-state {
  text-align: center;
  padding: 32px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--surface-2);
}
.empty-state h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.empty-state p {
  color: var(--ink-3);
  font-size: 12px;
  max-width: 480px;
  margin: 0 auto 14px;
  line-height: 1.5;
}

/* offline / banner-like callouts */
.callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.callout strong { color: var(--ink); font-weight: 500; }
.callout.warn   { background: var(--warn-tint); border-color: rgba(146, 88, 11, 0.30); color: #5C3F0A; }
.callout.warn strong { color: #4A3309; }
.callout.info   { background: var(--info-tint); border-color: rgba(29, 78, 216, 0.20); color: #14306C; }
.callout.info strong { color: #0E2459; }

/* Confirm dialog */
.confirm-scrim {
  position: fixed; inset: 0;
  background: rgba(11, 18, 33, 0.40);
  display: grid;
  place-items: center;
  z-index: 25;
}
.confirm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  width: min(440px, 92vw);
  box-shadow: var(--shadow-2);
}
.confirm-card .head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.confirm-card .body {
  padding: 16px 18px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.confirm-card .body .field {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}
.confirm-card .body .field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.confirm-card .body .field input,
.confirm-card .body .field textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  width: 100%;
}
.confirm-card .body .field input:focus,
.confirm-card .body .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.confirm-card .body .field textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 60px;
  resize: vertical;
}
.confirm-card .actions {
  border-top: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}