:root {
  color-scheme: dark;
  --bg: #060a0f;
  --panel: #0e141b;
  --panel-2: #17212c;
  --line: #233140;
  --line-2: #2f4357;
  --text: #eef3f8;
  --muted: #93a3b3;
  --accent: #2aa8e0;
  --accent-deep: #1577b8;
  --silver: #c8ced6;
  --working: #45c08a;
  --staged: #4aa6e8;
  --progress: #e0a93f;
  --blocked: #e06464;
  --planned: #9aa6bd;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(600px 120px at 0% 0%, rgba(42,168,224,0.10), transparent 70%),
    linear-gradient(180deg, #0c1219, #0a0f15);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -0.3px;
  background: linear-gradient(90deg, var(--silver), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.summary span {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23,33,44,0.6), rgba(14,20,27,0.6));
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  min-height: 0;
}

.workspace.detail-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.detail-collapse,
.detail-rail {
  position: absolute;
  top: 12px;
  z-index: 40; /* above the detail panel (z-30) so it stays clickable */
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}

.detail-collapse {
  right: 12px;
  width: 26px;
  height: 26px;
  font-size: 15px;
}

.detail-rail {
  right: 10px;
  height: 34px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.detail-collapse:hover,
.detail-rail:hover {
  background: var(--line);
}

.tree-wrap {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.tree-scroll {
  overflow: auto;
  min-height: 0;
  cursor: grab;
  position: relative;
  z-index: 1;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    #101215;
  background-size: 84px 84px;
}

.tree-scroll.panning {
  cursor: grabbing;
}

.tree-scroll.panning * {
  cursor: grabbing !important;
}

.tree-canvas {
  position: relative;
}

.tree-links {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.tree-links path {
  fill: none;
}

.tree-links path.edge-normal {
  stroke: #44505b;
  stroke-width: 1.5;
}

.tree-links path.edge-critical {
  stroke: #f2c15d;
  stroke-width: 2;
}

.tree-links path.edge-touch {
  stroke: #c98bff;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.9;
}

/* "expected connections": what the OS reaches for but may not be wired yet */
.tree-links path.edge-expect {
  stroke: #4fb477;
  stroke-width: 1.4;
  stroke-dasharray: 2 5;
  opacity: 0.5;
  fill: none;
}

.tree-links path.edge-expect.is-active {
  stroke: #6fe09a;
  stroke-width: 2;
  opacity: 1;
}

.zoom-sizer {
  position: relative;
  /* trailing pad so the right/bottom of the diagram can be dragged clear of the
     side panel; content-box so the padding adds real scroll room */
  box-sizing: content-box;
  padding: 40px 55vw 55vh 40px;
}

.zoom-btn {
  min-width: 34px;
  padding: 0 8px;
}

.flow-col-head {
  position: absolute;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.flow-col-head .flow-col-step {
  color: #6fb0ff;
  font-weight: 700;
  font-size: 10px;
}

.flow-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: #1a2026;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  overflow: hidden;
}

.flow-node.is-selected {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.flow-node.os-kelvin {
  background: #15201b;
}

.flow-node.os-macos {
  background: #161c24;
}

/* bowtie: the OS root (right) and the center spine (shared subsystems) */
.flow-node.bow-os {
  background: #182a20;
  border-width: 2px;
  border-left-width: 5px;
  font-weight: 750;
  box-shadow: 0 0 0 1px #4fb47766, 0 6px 16px rgba(0,0,0,0.32);
}

.flow-node.bow-center {
  border-color: #c98bff55;
  border-left-color: #c98bff;
}

/* a center (OS-facing) subsystem with NO OS link yet — what we're missing */
.flow-node.bow-center.bow-missing {
  border-style: dashed;
  border-color: #6b7280aa;
  border-left-color: #f2994a;
  opacity: 0.78;
  background: #1b1712;
}
.flow-node.bow-center.bow-missing .flow-label { color: #d8c7a8; }

/* connected/missing tally overlay (sticky in the bowtie scroll area) */
.bow-legend {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 7px 12px;
  margin: 0;
  background: rgba(16, 18, 22, 0.92);
  border-bottom: 1px solid #2a2f37;
  font-size: 12px;
  backdrop-filter: blur(3px);
  width: max-content;
  max-width: 100%;
  border-radius: 0 0 8px 0;
  pointer-events: none;
}
.bow-legend-title { font-weight: 700; color: #cfe7d6; }
.bow-legend-item { color: #aab2bd; }
.bow-legend-item.ok { color: #4fb477; }
.bow-legend-item.miss { color: #f2994a; }
.bow-legend-item b { color: inherit; }
.bow-legend-hint { color: #7d8794; font-style: italic; }

/* firmware protocols section (RE'd message/ring/command ABIs) */
.proto-list { display: flex; flex-direction: column; gap: 8px; }
.proto-item {
  border-left: 3px solid #b08bff;
  background: #1a1622;
  border-radius: 0 6px 6px 0;
  padding: 7px 10px;
}
.proto-name { font-weight: 650; color: #d8c7f5; font-size: 12.5px; }

/* unverified (m1n1-lineage) markers — not confirmed on t8132 */
.unverified-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: #f2994a;
  background: #2a1f12;
  border: 1px solid #6b4a22;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.info-row.row-unverified { border-left: 2px solid #f2994a55; }
.tool-btn.tool-btn-on { background: #2a1f12; border-color: #6b4a22; color: #f2994a; }
.proto-item.proto-unverified { border-left-color: #f2994a; background: #1f1812; }
.proto-detail { color: #b6bdc8; font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
.proto-src {
  color: #7d8794;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  margin-top: 3px;
}

/* chip → subsystem → register → value → API → OS flow */
.rf-node { font-size: 12px; }
.rf-node .rf-sub-line {
  display: block;
  font-size: 10px;
  color: #8b93a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-node.rf-chip {
  background: #11161d;
  border: 2px solid #4f7fb4;
  border-left-width: 5px;
  font-weight: 750;
}
.flow-node.rf-sub { border-left-width: 4px; cursor: pointer; }
.flow-node.rf-reg {
  background: #14181f;
  border-color: #3a4150;
  border-left-color: #7aa2c4;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
}
.flow-node.rf-val {
  background: #131a16;
  border-color: #2f4338;
  border-left-color: #5bb98a;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
}
.flow-node.rf-api {
  background: #1a1622;
  border-color: #6b4f8a;
  border-left-color: #b08bff;
  font-family: ui-monospace, Menlo, monospace;
}
/* edge tints per stage */
.rf-edge-reg, .rf-edge-val, .rf-edge-toapi, .rf-edge-subapi { stroke: #5a6472; opacity: 0.6; }
.rf-edge-chip { stroke: #4f7fb4; opacity: 0.5; }

.flow-node.on-critical {
  box-shadow: 0 0 0 1px #f2c15d55, 0 4px 12px rgba(0,0,0,0.22);
}

/* a node with no known connection — a gap to wire up */
.flow-node.flow-gap {
  border-style: dashed;
  opacity: 0.72;
}

.flow-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #1a2026;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  white-space: nowrap;
}

.tree-node.kind-chip {
  background: #2a323b;
  border-color: #51607080;
  font-weight: 750;
  font-size: 13px;
}

.tree-node.kind-group {
  background: #20262d;
  border-left: 4px solid #5b6b78;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  color: #cdd6dd;
}

.tree-node.kind-subsystem {
  border-left-width: 5px;
}

.tree-node.kind-reg,
.tree-node.kind-gate,
.tree-node.kind-expected {
  background: #141a1f;
  border-style: dashed;
  border-color: #2c343d;
  color: var(--muted);
  font-size: 11.5px;
  width: max-content;
  max-width: 560px;
  overflow: visible;
}

.tree-node.kind-gate {
  border-color: #3a342c;
}

.tree-node.kind-expected {
  border-color: #2c4435;
  background: #121b16;
}

/* leaf value shows in full, right after the name (not truncated) */
.tree-node.kind-reg .tree-val,
.tree-node.kind-gate .tree-val,
.tree-node.kind-expected .tree-val {
  margin-left: 8px;
  overflow: visible;
  text-overflow: clip;
  color: #f2c15d;
}

.tree-node.kind-gate .tree-val {
  color: #d8a441;
}

.tree-node.kind-expected .tree-val {
  color: #6fe09a;
}

.tree-node.kind-reg .tree-label,
.tree-node.kind-gate .tree-label,
.tree-node.kind-expected .tree-label {
  flex: none;
  color: #9fb0bd;
}

/* a small "=" cue so known-good responses read as expected reads */
.tree-node.kind-expected .tree-label::after {
  content: " ✓";
  color: #6fe09a;
}

.tree-node.on-critical {
  box-shadow: 0 0 0 1px #f2c15d55, 0 4px 12px rgba(0,0,0,0.2);
}

.tree-node.is-selected {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.tree-toggle {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #00000033;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-chip {
  flex: none;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 750;
  padding: 2px 5px;
  border-radius: 4px;
  color: #0d1114;
  background: var(--planned);
}

.tree-val {
  flex: none;
  margin-left: auto;
  color: #f2c15d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-count {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  background: #00000033;
  border-radius: 9px;
  padding: 1px 7px;
}

.status-working.kind-subsystem .tree-chip { background: var(--working); }
.status-staged.kind-subsystem .tree-chip { background: var(--staged); }
.status-progress.kind-subsystem .tree-chip { background: var(--progress); }
.status-blocked.kind-subsystem .tree-chip { background: var(--blocked); }
.status-planned.kind-subsystem .tree-chip { background: var(--planned); }

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* wrap controls within the column instead of overflowing under the detail panel */
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0c1218, #0a0f15);
}

.tool-btn {
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.tool-btn:hover {
  background: #1d2935;
  border-color: var(--line-2);
}

/* unified focus ring for all controls */
.toolbar input:focus-visible,
.toolbar select:focus-visible,
.tool-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 168, 224, 0.25);
}

.tool-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--line);
}

.exp-select {
  height: 36px;
  max-width: 240px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
}

.tree-note-dot {
  flex: none;
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
}

.chip-panel {
  width: 270px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 22, 26, 0.95);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.chip-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}

.chip-panel-heading strong {
  color: var(--text);
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.chip-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #151a1f;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.chip-grid strong {
  color: var(--text);
  font-size: 15px;
}

.toolbar input,
.toolbar select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  padding: 0 11px;
  font: inherit;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.toolbar input::placeholder { color: #5d6b78; }
.toolbar select:hover,
.toolbar input:hover { border-color: var(--line-2); }

.toolbar input {
  width: 260px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
}

.kelvin-node {
  width: 238px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: 8px;
  padding: 11px 12px;
  background: #1a2026;
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  cursor: pointer;
}

.kelvin-node.is-selected,
.kelvin-node:focus {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.node-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.node-topline strong {
  color: #0d1114;
  border-radius: 5px;
  padding: 3px 5px;
  background: var(--planned);
}

.node-title {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 730;
}

.node-meta {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.status-working {
  border-left-color: var(--working);
}

.status-staged {
  border-left-color: var(--staged);
}

.status-progress {
  border-left-color: var(--progress);
}

.status-blocked {
  border-left-color: var(--blocked);
}

.status-planned {
  border-left-color: var(--planned);
}

.status-working .node-topline strong,
.detail.status-working .detail-heading span {
  background: var(--working);
}

.status-staged .node-topline strong,
.detail.status-staged .detail-heading span {
  background: var(--staged);
}

.status-progress .node-topline strong,
.detail.status-progress .detail-heading span {
  background: var(--progress);
}

.status-blocked .node-topline strong,
.detail.status-blocked .detail-heading span {
  background: var(--blocked);
}

.status-planned .node-topline strong,
.detail.status-planned .detail-heading span {
  background: var(--planned);
}

.react-flow__edge.edge-normal path {
  stroke: #6e7c88;
  stroke-width: 2;
}

.react-flow__edge.edge-critical path {
  stroke: #f2c15d;
  stroke-width: 3;
}

.react-flow__edge path.react-flow__edge-path {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}

.react-flow__minimap {
  background: var(--panel);
  border: 1px solid var(--line);
}

.detail {
  overflow: auto;
  min-height: 0;
  height: 100%;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: 22px;
  /* keep the detail panel above the (panned) diagram so it's never covered */
  position: relative;
  z-index: 30;
  box-shadow: -10px 0 24px rgba(0, 0, 0, 0.35);
}

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

.detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.detail-heading span {
  color: #11161a;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 750;
}

.detail h2 {
  font-size: 23px;
  line-height: 1.12;
  margin-bottom: 18px;
  letter-spacing: 0;
}

.detail section {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.detail h3 {
  color: #dce3e8;
  font-size: 13px;
  margin-bottom: 8px;
}

.note-backend {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  vertical-align: middle;
}

.note-backend.backend-db {
  color: #0d1114;
  background: var(--working);
}

.note-backend.backend-local {
  color: var(--muted);
  background: #00000033;
  border: 1px solid var(--line);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
}

.link-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #151a1f;
}

.link-list a {
  color: #6fb0ff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.link-list a:hover {
  text-decoration: underline;
}

.link-list code {
  color: #9fb0bd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.link-del {
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: #00000033;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.link-del:hover {
  background: var(--blocked);
  color: #11161a;
}

.link-add {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.link-add input {
  flex: 1 1 120px;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #11161a;
  color: var(--text);
  padding: 0 9px;
  font: inherit;
  font-size: 13px;
}

.muted-hint {
  color: #74808a !important;
  font-size: 12px !important;
  margin-bottom: 8px;
}

.touch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.touch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #5a4577;
  border-radius: 6px;
  background: #1c1726;
  color: #d8c6ef;
  font-size: 12px;
  cursor: pointer;
}

.touch-chip:hover {
  background: #271d36;
}

.touch-kind {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #c98bff;
  border: 1px solid #5a4577;
  border-radius: 4px;
  padding: 1px 4px;
}

.op-list {
  margin: 0 0 10px;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}

.op-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  background: #151a1f;
}

.op-kind {
  font-size: 9.5px;
  font-weight: 750;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0d1114;
  background: var(--muted);
}

.op-write .op-kind { background: var(--progress); }
.op-read .op-kind { background: var(--staged); }
.op-wait .op-kind,
.op-poll .op-kind { background: var(--blocked); }
.op-delay .op-kind { background: #b08; color: #fff; }
.op-power .op-kind { background: var(--working); }

.op-target { color: #f2c15d; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.op-value { color: #9ad9a0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.op-cond { color: #e7a5a5; font-size: 12px; }
.op-note { color: var(--muted); font-size: 12px; }

.op-add {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.op-add input,
.op-add select {
  flex: 1 1 90px;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #11161a;
  color: var(--text);
  padding: 0 8px;
  font: inherit;
  font-size: 12.5px;
}

.detail p,
.detail li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.file-list {
  padding-left: 18px;
  margin: 0;
}

.fact-list {
  padding-left: 18px;
  margin: 0;
}

.fact-list li + li {
  margin-top: 7px;
}

.current-status {
  border-top: 0;
  padding-top: 0;
}

.current-status p {
  color: #dce3e8;
  border-left: 3px solid var(--progress);
  background: #151a1f;
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
}

.banned-list li {
  color: #e7a5a5;
}

.adt-list li {
  color: #8fa6b6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.probe-block {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11161a;
  overflow-x: auto;
}

.probe-block code {
  color: #9ad9a0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-table {
  display: grid;
  gap: 8px;
}

.info-row {
  display: grid;
  /* name column grows to fit (long IDs like G16_ID_HDR_REGION_PTR0) instead of overflowing a
     fixed track and overlapping the value; both columns can shrink+wrap (min-width 0). */
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 5px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151a1f;
}

.info-row-click {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 0.1s, border-color 0.1s;
}

.info-row-click:hover {
  background: #1c2630;
  border-color: #3f4f5d;
}

.hint-inline {
  font-size: 10px;
  font-weight: 600;
  color: #6fb0ff;
  text-transform: none;
  letter-spacing: 0;
}

.reg-detail-val {
  color: #f2c15d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.info-row strong {
  color: #dce3e8;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* register name reads as a link in the clickable rows (it navigates the tree to that node) */
.info-row-click strong {
  color: #8fc6ff;
}
.info-row-click:hover strong {
  text-decoration: underline;
}

.info-row code {
  color: #f2c15d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.info-row span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

textarea {
  width: 100%;
  min-height: 156px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11161a;
  color: var(--text);
  padding: 12px;
  font: inherit;
  line-height: 1.45;
}

textarea::placeholder {
  color: #74808a;
}

@media (max-width: 980px) {
  /* stacked layout: let the page scroll normally instead of fixed columns */
  main {
    height: auto;
    overflow: visible;
  }

  header {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .tree-wrap {
    min-height: 66vh;
  }

  .tree-scroll {
    min-height: 66vh;
  }

  .detail {
    min-height: auto;
    height: auto;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar input {
    width: 230px;
  }
}

/* chip selector — the map is specific to one Apple Silicon die */
.chip-select {
  font-weight: 650;
  color: var(--silver);
  background: linear-gradient(180deg, rgba(42,168,224,0.12), rgba(21,119,184,0.06));
  border-color: #2c4f66;
}

/* ── modern polish ──────────────────────────────────────────────── */
/* brand-blue selection instead of a stark white outline */
.flow-node.is-selected,
.tree-node.is-selected,
.kelvin-node.is-selected,
.kelvin-node:focus {
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 168, 224, 0.28), 0 8px 22px rgba(0, 0, 0, 0.35);
}
/* smooth node hover (no transform — keeps SVG edges aligned to positions) */
.flow-node, .tree-node { transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.flow-node:hover, .tree-node:hover {
  border-color: var(--line-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}
/* thin modern scrollbars */
.tree-scroll::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 11px; height: 11px; }
.tree-scroll::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb {
  background: #20303f; border-radius: 7px; border: 3px solid transparent; background-clip: content-box;
}
.tree-scroll::-webkit-scrollbar-thumb:hover, .detail::-webkit-scrollbar-thumb:hover {
  background: #2d465b; background-clip: content-box;
}
.tree-scroll::-webkit-scrollbar-track, .detail::-webkit-scrollbar-track { background: transparent; }
/* detail panel: subtle gradient surface + brand heading + crisper rows */
.detail { background: linear-gradient(180deg, #0d141b, #0a1015); }
.detail h2 {
  background: linear-gradient(90deg, var(--silver), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.info-row-click { transition: background 0.12s, border-color 0.12s; }
.info-row-click:hover { border-color: var(--line-2); }

/* SiliconPeel brand mark in the app header */
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  width: 46px; height: 46px; object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(42, 168, 224, 0.30));
}
.brand-eyebrow { font-size: 13px; font-weight: 750; letter-spacing: 0.2px; margin-bottom: 4px; }
.brand-eyebrow b { color: var(--silver); }
.brand-eyebrow span { color: var(--accent); }

/* focus-flow: when a node is selected, everything outside its flow dims back */
.flow-node, .tree-node { transition: opacity 0.18s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.tree-links path { transition: opacity 0.18s ease; }
.flow-node.dimmed, .tree-node.dimmed { opacity: 0.1; }
.tree-links path.dimmed { opacity: 0.06; }

/* live-verified on t8132 silicon — the positive counterpart to the unverified badge */
.verified-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: #56d39a;
  background: #0f2419;
  border: 1px solid #2f6b4c;
  border-radius: 4px;
  vertical-align: middle;
}
.info-row.row-verified { border-left: 2px solid #2f6b4c; }

/* badge colors must beat `.info-row span` (0,1,1) which otherwise mutes them */
.info-row .verified-badge { color: #56d39a; }
.info-row .unverified-badge { color: #f2994a; }


/* ── Search Panel ──────────────────────────────────────────────── */
.search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(6, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 24px 24px;
  overflow-y: auto;
}

.search-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 640px;
  margin-bottom: 16px;
}

.search-panel-header h3 {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.search-panel-input {
  width: 100%;
  max-width: 640px;
  height: 48px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 0 16px;
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 20px;
}

.search-panel-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 168, 224, 0.25);
}

.search-results {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-group h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.12s, border-color 0.12s;
}

.search-result-item:hover {
  background: #1d2935;
  border-color: var(--line-2);
}

.search-result-item strong {
  color: var(--text);
  white-space: nowrap;
}

.search-meta {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-status {
  flex: none;
  font-size: 10px;
}

.search-status.status-working { color: var(--working); }
.search-status.status-staged { color: var(--staged); }
.search-status.status-progress { color: var(--progress); }
.search-status.status-blocked { color: var(--blocked); }
.search-status.status-planned { color: var(--planned); }

/* ── Create/Edit Node Modal ────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(6, 10, 15, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-content {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--silver), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11161a;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
}

.modal-field textarea {
  height: auto;
  min-height: 60px;
  padding: 8px 10px;
  resize: vertical;
}

.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 168, 224, 0.2);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}

.modal-save-btn {
  background: var(--accent-deep) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 650;
}

.modal-save-btn:hover {
  background: var(--accent) !important;
}

/* ── Danger Zone ───────────────────────────────────────────────── */
.danger-zone {
  border-top-color: #4a2020 !important;
}

.danger-zone h3 {
  color: #e06464;
}

.danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.danger-btn {
  border-color: #4a2020 !important;
  color: #e8a0a0 !important;
  background: #1a1010 !important;
  font-size: 12px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

.danger-btn:hover {
  background: #2a1515 !important;
  border-color: #7a3030 !important;
}

.danger-btn-red {
  background: #3a1515 !important;
  border-color: #7a2020 !important;
  color: #ff8080 !important;
  font-weight: 700;
}

.danger-btn-red:hover {
  background: #5a2020 !important;
}