/* One palette, one name per value. --line was a byte-identical duplicate of --hairline split by
   component vintage, so a palette change had to be made twice to avoid splitting the console's
   borders in two. --warn is declared because the flow diagram was already using it through a
   fallback that no token backed. */
:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --good: #006300;
  --bad: #d03b3b;
  --warn: #d98b2b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.topbar nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.topbar nav a {
  flex: 0 0 auto;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
}

.topbar nav a:hover { color: var(--ink); background: var(--border); }
.topbar nav a.active { color: var(--ink); font-weight: 600; }

.session .user-email {
  color: var(--ink-2);
  display: block;
  max-width: clamp(72px, 16vw, 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.session .logout button { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.session .logout button:hover { color: var(--ink); background: var(--border); }

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
main.wide { max-width: none; }

h1 { font-size: 20px; margin: 0; }
h2 { font-size: 15px; margin: 28px 0 10px; }
h3 { font-size: 13px; margin: 0 0 10px; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.muted { color: var(--muted); }

/* Reference prose the board needs available but not in the way. Collapsed, the summary is one quiet
   line; open, it reads as the paragraphs it replaced. */
.note { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.note > summary { cursor: pointer; list-style: none; }
.note > summary::-webkit-details-marker { display: none; }
.note > summary::before { content: "\203A "; display: inline-block; width: 12px; transition: transform 0.12s ease; }
.note[open] > summary::before { transform: rotate(90deg); }
.note > p { margin: 8px 0 0; max-width: 90ch; }

a { color: var(--accent); }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

pre {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}


.tile-label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
}

.tile-value {
  font-size: 26px;
  font-weight: 600;
}

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}

table.data th, table.data td {
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

table.data thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

/* Tables where a client-side sort would be wrong rather than merely useless: a server-paginated
   page, a cross-tab, parent/detail row pairs, or unit-suffixed numeric columns. They must not
   advertise an affordance they do not have. */
table.data[data-sort="off"] thead th { cursor: default; }

/* For state whose only visual carrier is a coloured dot. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

table.data thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 9px; color: var(--muted); }
table.data thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: 9px; color: var(--muted); }

table.data.fixed { table-layout: fixed; }
table.data.fixed td { overflow-wrap: break-word; }

/* The people a signal's own evidence document named, hung under the signal row. */
table.data tr.subrow td {
  padding-top: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-2);
}

table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody th { font-weight: 500; color: var(--ink-2); width: 220px; }

th.num, td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.status { white-space: nowrap; }

.status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--muted);
  vertical-align: baseline;
}

.status[data-status="running"]::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent); opacity: 1; }
  70% { box-shadow: 0 0 0 5px transparent; opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* Every running lane pulses at once, which on /operations is dozens of dots. flow.js and
   metric_inspector.js both honour this query already; the dot was the one thing that did not. */
@media (prefers-reduced-motion: reduce) {
  .status[data-status="running"]::before { animation: none; }
}
.status[data-status="succeeded"]::before { background: var(--good); }
.status[data-status="failed"]::before { background: var(--bad); }
/* Warning is its own colour, not the grey of "stopped". While every open alarm painted the same red
   dot the severity column carried no information at all, which is the whole reason a board of
   twenty-five reads as one undifferentiated wall. */
.status[data-status="warning"]::before { background: var(--warn); }
.status[data-status="stopped"]::before { background: var(--muted); }
.status[data-status="confirmed"]::before { background: var(--good); }
.status[data-status="overturned"]::before { background: var(--bad); }
.status[data-status=""]::before { display: none; }

button.small { padding: 3px 8px; font-size: 12px; }
td.verdict-cell, td.label-cell, td.controls { white-space: nowrap; }

.search { display: flex; gap: 8px; margin-bottom: 16px; }

input[type="search"], input[type="text"], input[type="number"], select, textarea {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 9px;
  font: inherit;
}

input[type="search"] { width: 320px; }
.input-narrow { width: 80px; }

textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.45;
}

button {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { filter: none; }

.pager { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.pager-status { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

tr.row-hidden { display: none; }

.pager { display: flex; gap: 14px; align-items: baseline; margin-top: 12px; }

.run-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.run-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
}

.run-form label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }

#runs-table tbody tr[data-run-id] { cursor: pointer; }
#runs-table tbody tr[data-run-id]:hover td { background: var(--border); }

#llm-fleet tr[data-instance] { cursor: pointer; }
#llm-fleet tr[data-instance]:hover td { background: var(--border); }
#llm-fleet tr.selected td { background: var(--border); }
#llm-fleet tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.fleet-inactive { margin-top: 10px; }
.fleet-inactive > summary {
  width: fit-content;
  padding: 4px 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.fleet-inactive > table { margin-top: 6px; }

/* Each window is three columns wide; without a rule between the groups the ten numbers read as one
   undifferentiated row and it is easy to compare a 1m figure against a 24h one by mistake. */
#llm-throughput-table th:nth-child(2), #llm-throughput-table td:nth-child(2),
#llm-throughput-table th:nth-child(5), #llm-throughput-table td:nth-child(5),
#llm-throughput-table th:nth-child(8), #llm-throughput-table td:nth-child(8) { border-left: 1px solid var(--hairline); }

#llm-throughput-table tfoot td { border-top: 1px solid var(--hairline); border-bottom: none; font-weight: 600; }

/* Two figures per cell: the per-minute rate reads across windows, the total below it is what the
   window actually burned. Stacked rather than side by side so the columns stay narrow enough for
   three windows to fit on one screen. */
#llm-throughput-table td .rate { display: block; }
#llm-throughput-table td .total { display: block; color: var(--muted); font-size: 11px; }

/* The address sits under the name it belongs to rather than in a column of its own: it identifies
   the same box, and an ops page that names a machine is usually one step from reaching it. */
td .endpoint-host { display: block; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

#run-log { min-height: 160px; max-height: 480px; overflow-y: auto; }

.feed {
  min-height: 200px;
  max-height: 520px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.error { color: var(--bad); }
.notice { color: var(--ink-2); }

#monitor-panel > h3, #monitor-panel > .page-head { margin-top: 30px; }
#monitor-panel > .page-head:first-child { margin-top: 0; }

ul.drift {
  list-style: none;
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 12.5px;
}

ul.drift li { margin: 2px 0; }
ul.drift li code { margin-right: 6px; }

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.quick-form {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
}

.quick-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.form-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.form-message.ok { color: var(--good); }
.form-message.error { color: var(--bad); }

.gpu-save-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-top: 12px;
}

.gpu-save-controls label {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 3px;
  color: var(--ink-2);
  font-size: 12px;
}

#gpu-capacity-table input[type="number"] { width: 84px; }
#gpu-manifest-digest { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
#gpu-status-table td:last-child { color: var(--bad); overflow-wrap: anywhere; }

.file-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

.file-tabs a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.file-tabs a:hover { color: var(--ink); background: var(--border); }
.file-tabs a.active { color: var(--ink); background: var(--surface); border-color: var(--hairline); font-weight: 600; }

/* The settings tabs are links because a file selection is a page load. The corrections views switch
   by fetch, so that strip is buttons and needs the same tab appearance rather than the console's
   solid action button. */
.file-tabs button {
  color: var(--ink-2);
  background: transparent;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.file-tabs button:hover { color: var(--ink); background: var(--border); filter: none; }
.file-tabs button.active { color: var(--ink); background: var(--surface); border-color: var(--hairline); font-weight: 600; }

.corrections-note { width: 150px; margin-right: 6px; }

.trajectory {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px 16px 10px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.traj-caption { font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }

.traj-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 640px;
}

.traj-node {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 4px;
}

.traj-node::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--hairline);
  z-index: 0;
}

.traj-node:first-child::before { display: none; }

.traj-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--muted);
}

.traj-num { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.traj-label { font-size: 11px; color: var(--ink-2); line-height: 1.2; }

.traj-node[data-state="past"] .traj-dot { background: var(--good); border-color: var(--good); }
.traj-node[data-state="past"]::before { background: var(--good); }
.traj-node[data-state="current"]::before { background: var(--good); }
.traj-node[data-state="current"] .traj-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--border); }
.traj-node[data-state="current"] .traj-num { color: var(--ink); }
.traj-node[data-state="current"] .traj-label { color: var(--ink); font-weight: 600; }

.traj-current { margin-bottom: 18px; }
.traj-current-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

.traj-badge {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
}

.chip {
  display: inline-block;
  font-size: 12px;
  background: var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
}

.chip-gap { background: transparent; border: 1px dashed var(--muted); color: var(--ink-2); }


.traj-thesis { margin: 8px 0 0; color: var(--ink-2); }




.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 320px; padding: 24px; }
.login-card h1 { margin-top: 0; }
.login-card label { display: block; margin: 12px 0; }
.login-card input { width: 100%; padding: 8px; box-sizing: border-box; }

.check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* --- Network graph: full-bleed dark viewport with floating glass panels --- */
.graph-page { position: fixed; inset: 52px 0 0 0; background: #0d0d0d; overflow: hidden; }
#graph-canvas { position: absolute; inset: 0; }
#graph-canvas canvas { display: block; outline: none; }
#graph-overlays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.graph-hub-label {
  position: absolute;
  transform: translate(-50%, -150%);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f4f4f0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  text-align: center;
}
.graph-hub-label small { display: block; font-weight: 400; font-size: 10.5px; color: #b9c4d4; }

.graph-panel {
  position: absolute;
  z-index: 5;
  background: rgba(20, 22, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: #e8e8e3;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.graph-controls {
  top: 16px; left: 16px; width: 250px;
  padding: 14px 15px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.graph-panel-head { font-size: 15px; font-weight: 600; color: #fff; }
.graph-search {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 7px 10px;
}
.graph-search::placeholder { color: #9a9a93; }
.graph-group { display: flex; flex-direction: column; gap: 7px; }
.graph-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #9a9a93; }
.graph-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.graph-filters { display: flex; flex-direction: column; gap: 6px; }
.graph-toggle, .graph-filter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #dcdcd6; cursor: pointer; }
.graph-toggle input, .graph-filter input { accent-color: #3987e5; margin: 0; }
.graph-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.graph-filter-count { margin-left: auto; font-size: 11px; color: #8f8f88; font-variant-numeric: tabular-nums; }
.graph-hint { font-size: 11px; color: #8f8f88; line-height: 1.4; }
.graph-slider { width: 100%; accent-color: #3987e5; }
.graph-actions { gap: 9px; }
.graph-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e3;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 6px 10px;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.graph-btn:hover { background: rgba(255, 255, 255, 0.16); }
.graph-btn-mini { padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: 5px; letter-spacing: 0.04em; }
.graph-btn-mini:disabled { opacity: 0.4; cursor: default; }
.graph-legend { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.graph-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfcfc8; }
.graph-legend-ramp { display: flex; gap: 3px; align-items: center; }
.graph-ramp-cell { width: 15px; height: 10px; border-radius: 2px; }
.graph-status { font-size: 11.5px; color: #8f8f88; }

.graph-detail {
  top: 16px; right: 16px; width: 300px;
  padding: 16px 17px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
}
.graph-detail-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #9a9a93; }
.graph-detail-title { font-size: 17px; font-weight: 600; color: #fff; margin: 3px 22px 12px 0; line-height: 1.25; }
.graph-detail-title a { color: #6da7ec; text-decoration: none; }
.graph-detail-title a:hover { text-decoration: underline; }
.graph-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.graph-detail dt { color: #9a9a93; font-size: 12px; }
.graph-detail dd { margin: 0; color: #e4e4de; font-size: 12.5px; }
.graph-detail .gd-block { margin-top: 12px; }
.graph-detail .gd-block h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #9a9a93; font-weight: 600; }
.graph-detail .gd-block p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #d6d6cf; }
.graph-detail .gd-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #9a9a93; font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.graph-detail .gd-close:hover { color: #fff; }
.graph-flag { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: #c98500; border-radius: 5px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.graph-detail dd a { color: #6da7ec; text-decoration: none; word-break: break-word; }
.graph-detail dd a:hover { text-decoration: underline; }
.graph-detail .gd-note { margin: 12px 0 0; font-size: 12px; color: #8f8f88; }
.graph-detail .gd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.graph-detail .gd-list li { display: flex; flex-direction: column; gap: 1px; }
.graph-detail .gd-list a { color: #6da7ec; text-decoration: none; }
.graph-detail .gd-list a:hover { text-decoration: underline; }
.graph-detail .gd-item-name { font-size: 12.5px; color: #e4e4de; word-break: break-word; }
.graph-detail .gd-item-meta { font-size: 11px; color: #8f8f88; word-break: break-word; }
.graph-detail .gd-tag { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #cfcfc8; background: rgba(255, 255, 255, 0.10); border-radius: 4px; padding: 0 5px; margin-left: 5px; vertical-align: middle; }
.graph-detail .gd-tag-ok { color: #0d0d0d; background: #4bb3a6; }
.graph-detail .gd-profile-link { font-size: 12.5px; font-weight: 600; color: #6da7ec; text-decoration: none; }
.graph-detail .gd-profile-link:hover { text-decoration: underline; }

.scene-tooltip { color: #fff !important; font: 13px/1.4 system-ui, -apple-system, sans-serif !important; }
.gtip { background: rgba(18, 20, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 7px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.gtip b { display: block; font-size: 13px; }
.gtip span { display: block; font-size: 11.5px; color: #b9b9b2; }

/* --- Portfolio dashboard: stage x archetype heatmap + distributions --- */
.heatmap-wrap { overflow-x: auto; margin-bottom: 6px; }
table.heatmap { border-collapse: separate; border-spacing: 3px; width: auto; }
table.heatmap thead th { font-weight: 500; color: var(--ink-2); text-align: center; padding: 4px 8px 6px; vertical-align: bottom; border: none; }
table.heatmap thead th:first-child { text-align: left; }
table.heatmap .hcol small { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
table.heatmap th.harch { text-align: left; font-weight: 500; color: var(--ink); padding-right: 12px; white-space: nowrap; border: none; }
table.heatmap td.hcell {
  text-align: center;
  min-width: 48px;
  padding: 11px 8px;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
table.heatmap td.hcell.dark { color: #ffffff; }
table.heatmap td.htotal { text-align: right; padding-left: 12px; font-weight: 600; border: none; font-variant-numeric: tabular-nums; }
.heatmap-legend { margin: 4px 0 24px; font-size: 12px; }

.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 8px; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; }
.bar-label { font-size: 12px; color: var(--ink-2); }
.bar-track { background: var(--border); border-radius: 5px; height: 16px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 5px; min-width: 2px; }
.bar-count { font-size: 12px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.partition {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin: 12px 0; }
.chart-heading { margin-top: 28px; margin-bottom: 10px; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.chart-controls label { font-size: 12px; color: var(--ink-2); }
.chart-controls select { padding: 4px 8px; font-size: 12px; }
.chart { position: relative; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
.chart figcaption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.chart canvas { width: 100%; height: 170px; display: block; }
.llm-charts { grid-template-columns: minmax(0, 1fr); }
.slm-charts { grid-template-columns: minmax(0, 1fr); }
.chart-legend { margin-top: 4px; font-size: 11px; color: var(--muted); }
.legend-item { margin-right: 8px; white-space: nowrap; }
.legend-item i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 1px; }
.chart-tip { position: absolute; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 4px 7px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; box-shadow: 0 2px 6px var(--border); font-size: 11px; color: var(--ink); white-space: nowrap; }
.chart-tip-head { display: flex; align-items: center; gap: 5px; }
.chart-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.chart-tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip-at { color: var(--muted); font-size: 10px; }
.chart-tip[hidden] { display: none; }
.chart-dot { position: absolute; z-index: 6; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--surface); transform: translate(-50%, -50%); pointer-events: none; }

[data-metric-id] { cursor: pointer; }
span[data-metric-id], strong[data-metric-id], b[data-metric-id], td[data-metric-id],
.rail-value[data-metric-id], .tile-value[data-metric-id] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}
[data-metric-id]:focus { outline: none; }
[data-metric-id]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
td[data-metric-id]:hover, table td [data-metric-id]:hover {
  background: var(--border);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-metric-id].metric-inspector-trigger-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
tr[data-metric-id].metric-inspector-trigger-selected > td,
td[data-metric-id].metric-inspector-trigger-selected {
  background: var(--border);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.metric-inspector {
  margin: 12px 0 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  scroll-margin-top: 12px;
}
.metric-inspector[hidden] { display: none; }
/* The metric inspector and the flow detail panel were built independently and their head, kind and
   fact-grid rules were byte-identical copies. One declaration each; only the column count differs. */
.metric-inspector-head, .flow-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.metric-inspector-kind, .flow-detail-kind { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.metric-inspector-head h2 { margin: 0; font-size: 18px; }
.metric-inspector-selection { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 5px 0 0; font-size: 12px; }
.metric-inspector-selection strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-inspector-definition { max-width: 900px; margin: 16px 0; color: var(--ink-2); font-size: 15px; }
.metric-inspector-facts, .flow-source-facts, .topic-facts { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.metric-inspector-facts div, .flow-source-facts div, .topic-facts div { min-width: 0; padding: 10px 12px; background: var(--surface); }
.metric-inspector-facts dt, .flow-source-facts dt, .topic-facts dt { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.metric-inspector-facts dd, .flow-source-facts dd, .topic-facts dd { margin: 0; overflow-wrap: anywhere; }
.metric-inspector-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 14px; }
.metric-inspector-note { margin: 8px 0; padding: 10px 12px; background: var(--page); border-left: 3px solid var(--accent); }
.metric-inspector-note.caution { border-left-color: var(--bad); }
.metric-inspector-note h3 { margin: 0 0 3px; color: var(--ink-2); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.metric-inspector-note p { margin: 0; }
.metric-inspector-history-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.metric-inspector-history-head h3 { margin: 0; }
.metric-inspector-status { margin: 10px 0; }
.metric-inspector-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.metric-inspector-summary div { min-width: 0; padding: 10px 12px; background: var(--page); border: 1px solid var(--hairline); border-radius: 6px; }
.metric-inspector-summary span, .metric-inspector-summary small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.metric-inspector-summary strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-inspector-summary small { margin-top: 2px; letter-spacing: 0; text-transform: none; }
.metric-inspector-chart { margin-top: 10px; }
.metric-inspector-pending { margin-top: 18px; }
.metric-inspector-pending h3 { margin: 0 0 4px; }
.metric-inspector-pending > p { margin: 0 0 10px; }
.metric-inspector-pending-group + .metric-inspector-pending-group { margin-top: 16px; }
.metric-inspector-pending-stamp { margin: 0 0 6px; }
.metric-inspector-pending-group > p:last-child { margin: 8px 0 0; }

.signal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.signal-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
.signal-name { font-size: 15px; font-weight: 600; color: var(--ink); }

/* Flow: fixed-coordinate block diagram. Colour is never the only channel - every node also
   carries its state as a text value and a hover title. */
.rail { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 4px; margin-bottom: 12px; }
.rail-item { display: flex; flex-direction: column; gap: 2px; }
.rail-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rail-value { font-variant-numeric: tabular-nums; }
.flow-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 4px; }
#flow-canvas { width: 100%; min-width: 1000px; display: block; }

.wire { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.wire-produce { stroke-dasharray: 4 3; }
.wire-consume { stroke: var(--accent); }
.wire-persist { stroke: var(--hairline); }
.wire-bypass { stroke-dasharray: 2 4; }
.wire-unrouted { stroke: var(--muted); opacity: 0.35; }
.wire-lagging { stroke: var(--warn); stroke-width: 2.5; }
.wire-label { font: 10px ui-monospace, monospace; fill: var(--muted); text-anchor: middle; }

.node { cursor: pointer; }
.node rect { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; }
.node-label { font: 12px ui-monospace, monospace; fill: var(--ink); }
.node-value { font: 11px ui-monospace, monospace; fill: var(--muted); text-anchor: end; }
.node[data-state="working"] rect { stroke: var(--accent); stroke-width: 2; }
.node[data-state="failing"] rect { stroke: var(--bad); stroke-width: 2; }
.node[data-state="unconsumed"] rect { stroke: var(--bad); stroke-dasharray: 3 2; }
.node[data-state="unrouted"] rect { stroke: var(--muted); stroke-dasharray: 3 2; opacity: 0.55; }
.node[data-state="unrouted"] .node-label { fill: var(--muted); }
.node[data-state="disabled"] rect { stroke: var(--muted); opacity: 0.55; }
.node-sink rect { fill: var(--hairline); }
.node:hover rect, .node:focus rect { stroke-width: 2.5; }
.node:focus { outline: none; }
.node.node-selected rect { stroke-width: 3; filter: drop-shadow(0 0 3px var(--accent)); }

.flow-detail { margin-top: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; scroll-margin-top: 12px; }
.flow-detail-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.flow-detail-title h2 { margin: 0; font-size: 18px; }
.flow-source-description { max-width: 900px; margin: 4px 0 18px; color: var(--ink-2); font-size: 15px; }
.flow-source-summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 12px; margin-bottom: 12px; }
.flow-source-summary section, .flow-source-limitations { padding: 12px 14px; background: var(--page); border: 1px solid var(--hairline); border-radius: 6px; }
.flow-source-summary h3, .flow-source-live h3, .flow-source-limitations h3 { margin: 0 0 8px; color: var(--ink-2); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.flow-source-summary ul, .flow-source-limitations ul { margin: 0; padding-left: 18px; }
.flow-source-summary li + li, .flow-source-limitations li + li { margin-top: 4px; }
.flow-source-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 18px; }
.flow-source-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.flow-source-live { margin-bottom: 12px; }
.flow-source-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.flow-source-metrics div { min-width: 0; padding: 10px 12px; background: var(--page); border: 1px solid var(--hairline); border-radius: 6px; }
.flow-source-metrics span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.flow-source-metrics strong { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flow-source-error { margin: 8px 0 0; padding: 8px 10px; color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); border-left: 3px solid var(--bad); }
.flow-source-limitations { margin-bottom: 18px; }
.flow-detail .chart { margin-top: 4px; }

@media (max-width: 700px) {
  .metric-inspector-facts { grid-template-columns: minmax(0, 1fr); }
  .metric-inspector-history-head { align-items: flex-start; flex-direction: column; }
  .metric-inspector-history-head .chart-controls { justify-content: flex-start; }
  .flow-source-summary, .flow-source-facts, .topic-facts { grid-template-columns: minmax(0, 1fr); }
  .flow-source-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.topic-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 14px; }
#bus-topic-carries { max-width: 900px; margin: 4px 0 14px; color: var(--ink-2); font-size: 15px; }
#bus-topics tr[data-topic] { cursor: pointer; }
#bus-topics tr[data-topic]:hover td { background: var(--border); }
#bus-topics tr.active td { background: var(--border); }
#bus-messages tr[data-ref] { cursor: pointer; }
#bus-messages tr[data-ref]:hover td { background: var(--border); }
#bus-messages tr.detail pre, .metric-inspector-pending tr.detail pre { margin: 0; }