/* Homelab Infra Explorer — terminal/dashboard hybrid */

:root {
  --bg: #0b0d0c;
  --bg-2: #111411;
  --surface: #171c18;
  --surface-2: #202720;
  --surface-3: #273027;
  --border: #2b342e;
  --border-strong: #435043;
  --text: #edf4ef;
  --text-2: #b9c7bc;
  --muted: #829084;
  --dim: #535f55;

  --accent: #69e6a2;
  --accent-2: #69a7ff;
  --accent-warm: #f2b84b;
  --accent-soft: color-mix(in oklch, var(--accent) 30%, transparent);
  --accent-bg: color-mix(in oklch, var(--accent) 12%, var(--surface));

  --ok: oklch(0.82 0.13 145);
  --warn: oklch(0.82 0.14 75);
  --idle: oklch(0.68 0.02 80);
  --focus: oklch(0.82 0.10 220);
  --priv: oklch(0.78 0.14 30);

  --edge: oklch(0.38 0.008 80);
  --grid-line: oklch(0.24 0.007 80);
  --band: oklch(0.19 0.006 80);
  --band-dim: oklch(0.175 0.005 80);

  --rail-w: 304px;
  --inspector-w: 372px;
  --radius: 6px;
}

.no-grid { --grid-line: transparent; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#root { height: 100%; }

code, .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--inspector-w);
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.workbench-shell {
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 4%, transparent), transparent 28%),
    var(--bg);
}

.app.density-compact {
  --rail-w: 280px;
  --inspector-w: 320px;
  font-size: 12px;
}

/* ====== Left rail ====== */
.rail {
  background: linear-gradient(180deg, #131914 0%, var(--bg-2) 42%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.rail-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent);
  font-size: 22px;
  letter-spacing: -2px;
}
.brand-title { font-weight: 700; font-size: 14px; letter-spacing: 0; }
.brand-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }

.mobile-brand {
  display: none;
}

.search {
  position: relative;
  margin: 14px 14px 4px;
}
.search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px 8px 30px;
  border-radius: var(--radius);
  font: inherit;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.search input:focus { border-color: var(--accent); background: var(--surface-2); }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 14px;
}
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px;
  width: 22px; height: 22px; border-radius: 4px;
}
.search-clear:hover { color: var(--text); background: var(--surface-2); }

.rail-section { padding: 16px 14px 10px; border-bottom: 1px solid var(--border); }
.rail-section h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
  font-weight: 600;
}
.rail-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 10px;
}
.rail-group-title span {
  color: var(--dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  white-space: nowrap;
}
.rail-hint { font-size: 11px; color: var(--muted); margin: -6px 4px 10px; }

.view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.view-tab {
  background: color-mix(in oklch, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  color: var(--text-2);
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
}
.view-tab:hover { background: var(--surface); color: var(--text); }
.view-tab.active {
  background: var(--accent-bg);
  border-color: var(--accent-soft);
  color: var(--accent);
}

.flow-list { display: flex; flex-direction: column; gap: 6px; }
.flow-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: color-mix(in oklch, var(--surface) 64%, transparent);
  border: 1px solid var(--border);
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-2);
  font: inherit;
  transition: all 0.12s;
}
.flow-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.flow-row.active {
  background: var(--accent-bg);
  border-color: var(--accent-soft);
}
.flow-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.flow-dot.none { background: var(--dim); box-shadow: none; }
.flow-row.active .flow-title { color: var(--accent); }
.flow-title { font-weight: 600; font-size: 12px; color: var(--text); }
.flow-summary {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.layer-list { display: flex; flex-direction: column; gap: 2px; }
.layer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12px; color: var(--text-2);
}
.layer-row:hover { background: var(--surface); }
.layer-row.off { color: var(--muted); }
.layer-row.off .layer-tag { opacity: 0.4; }
.layer-row input { accent-color: var(--accent); margin: 0; }
.layer-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.layer-tag.big { font-size: 13px; padding: 6px 10px; }
.layer-name { font-size: 12px; }

.rail-foot { padding: 14px; margin-top: auto; }
.privacy-note {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 12px;
  background: color-mix(in oklch, var(--priv) 5%, var(--surface));
}
.privacy-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--priv);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.privacy-note p { margin: 0; font-size: 11px; color: var(--text-2); line-height: 1.5; }
.privacy-note code {
  background: var(--surface-2);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.build-ver {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--dim);
  margin-top: 10px;
  letter-spacing: 0.03em;
}

/* ====== Topbar ====== */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 54px;
  padding: 10px 16px;
  background: color-mix(in oklch, var(--bg-2) 92%, transparent);
  border-bottom: 1px solid var(--border);
  flex: none;
  backdrop-filter: blur(16px);
}
.commandbar {
  box-shadow: 0 1px 0 color-mix(in oklch, var(--accent) 8%, transparent);
}
.crumbs { display: flex; gap: 8px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted); }
.crumb { color: var(--text-2); }
.crumb-active { color: var(--accent); }
.crumb-sep { color: var(--dim); }
.topbar-right { display: flex; gap: 14px; align-items: center; }
.counter {
  min-width: 68px;
  font-size: 11px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.counter b { color: var(--text); font-weight: 600; margin-right: 4px; }
.counter-q code { color: var(--accent); }
.kbd-hint { font-size: 10.5px; color: var(--muted); }
kbd {
  font-family: "JetBrains Mono", monospace;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text);
  margin: 0 2px;
}

/* ====== Canvas ====== */
.canvas-wrap {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  background:
    radial-gradient(circle at 30% 0%, color-mix(in oklch, var(--accent-2) 9%, transparent), transparent 38%),
    linear-gradient(180deg, #101410 0%, var(--bg) 72%);
}
.diagram-wrap {
  flex: 1; min-height: 0;
  overflow: hidden;
  position: relative;
}
.diagram-wrap::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 28%, transparent), transparent);
  pointer-events: none;
}
.diagram {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.zoom-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  line-height: 1;
  padding: 0;
}

.zoom-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.zoom-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text);
}

.zoom-fit { font-size: 11px; }

.layer-band rect {
  transition: fill 0.2s, opacity 0.2s;
  stroke: color-mix(in oklch, var(--border) 76%, transparent);
  stroke-width: 1;
}
.layer-band.dim rect { opacity: 0.5; }
.layer-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  fill: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.layer-label .layer-tag {
  fill: var(--accent);
  font-size: 10px;
}
.layer-hint {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  fill: var(--muted);
}

.edge {
  stroke: var(--edge);
  stroke-width: 1.6;
  transition: opacity 0.25s, stroke 0.2s;
  opacity: 0.74;
}
.edge-dim { opacity: 0.10; }
.edge-flow { stroke: var(--accent); stroke-width: 1.9; opacity: 1; }

.flow-line {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 50%, transparent));
  animation: flow-march 1.2s linear infinite;
  opacity: 0.9;
}
@keyframes flow-march {
  to { stroke-dashoffset: -28; }
}

.node {
  cursor: pointer;
  transition: transform 0.18s, opacity 0.2s;
}
.node-bg {
  fill: var(--surface);
  stroke: color-mix(in oklch, var(--border-strong) 82%, transparent);
  stroke-width: 1;
  transition: fill 0.15s, stroke 0.15s;
  filter: drop-shadow(0 6px 12px oklch(0 0 0 / 0.22));
}
.node-accent {
  fill: var(--dim);
  transition: fill 0.15s;
}
.node-ok    .node-accent { fill: var(--ok); }
.node-warn  .node-accent { fill: var(--warn); }
.node-idle  .node-accent { fill: var(--idle); }
.node-focus .node-accent { fill: var(--focus); }

.node-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.node-tech {
  fill: var(--text-2);
  font-size: 10px;
  font-family: "Inter", sans-serif;
}
.node-id {
  fill: var(--muted);
  font-size: 9.5px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
.node-dot {
  fill: var(--ok);
  filter: drop-shadow(0 0 4px color-mix(in oklch, var(--ok) 70%, transparent));
}
.node-warn  .node-dot { fill: var(--warn); filter: drop-shadow(0 0 4px color-mix(in oklch, var(--warn) 70%, transparent)); }
.node-idle  .node-dot { fill: var(--idle); filter: none; }
.node-focus .node-dot { fill: var(--focus); filter: drop-shadow(0 0 5px color-mix(in oklch, var(--focus) 80%, transparent)); }

.node-priv-tag {
  fill: var(--priv);
  font-size: 8.5px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.no-priv .node-priv-tag { display: none; }

.node:hover .node-bg,
.node-hov .node-bg { fill: var(--surface-2); stroke: var(--accent-soft); }
.node-sel .node-bg {
  fill: var(--accent-bg);
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px color-mix(in oklch, var(--accent) 25%, transparent));
}
.node-sel .node-label { fill: var(--accent); }

.node-dim { opacity: 0.25; }
.node-dim .node-bg { fill: var(--bg-2); }

.topology-edge {
  stroke: color-mix(in oklch, var(--edge) 70%, var(--accent-2));
  stroke-width: 2.2;
  opacity: 0.84;
  transition: opacity 0.2s, stroke 0.2s;
}

.topology-edge.edge-dim {
  opacity: 0.10;
}

.topology-edge.topology-flow {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--accent) 42%, transparent));
}

.topology-edge.topology-flow.edge-dim {
  opacity: 0.10;
  filter: none;
}

.topology-count circle {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.topology-count text {
  fill: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}

.topology-node {
  cursor: pointer;
  transition: opacity 0.18s;
}

.topology-card {
  fill: color-mix(in oklch, var(--surface-2) 84%, var(--bg));
  stroke: color-mix(in oklch, var(--border-strong) 88%, transparent);
  stroke-width: 1.2;
  filter: drop-shadow(0 10px 22px oklch(0 0 0 / 0.28));
}

.topology-accent {
  fill: var(--accent-2);
}

.topology-node:hover .topology-card,
.topology-node:focus-visible .topology-card {
  fill: color-mix(in oklch, var(--surface-3) 88%, var(--accent-bg));
  stroke: var(--accent);
}

.topology-node.topology-flow .topology-card {
  stroke: var(--accent);
  stroke-width: 1.8;
}

.topology-node.topology-sel .topology-card {
  fill: var(--accent-bg);
  stroke: var(--accent);
  stroke-width: 2;
}

.topology-node.topology-flow .topology-accent {
  fill: var(--accent);
}

.topology-node.topology-sel .topology-accent {
  fill: var(--accent-warm);
}

.topology-tag,
.topology-meta,
.topology-drill {
  font-family: "JetBrains Mono", monospace;
}

.topology-tag {
  fill: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.topology-label {
  fill: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.topology-summary {
  fill: var(--text-2);
  font-size: 11.5px;
}

.topology-meta {
  fill: var(--muted);
  font-size: 10px;
}

.topology-drill {
  fill: var(--accent-warm);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ====== Inspector ====== */
.inspector {
  background: linear-gradient(180deg, #131914 0%, var(--bg-2) 46%);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 0 0 24px;
}
.inspector-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.empty-card {
  text-align: center;
  max-width: 260px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  border-radius: 8px;
  padding: 28px 24px;
}
.empty-glyph {
  font-size: 36px;
  color: var(--dim);
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
}
.empty-card h2 {
  font-size: 14px; margin: 0 0 6px;
  color: var(--text);
}
.empty-card p {
  font-size: 12px; color: var(--muted);
  margin: 0 0 20px;
}
.empty-meta {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  text-align: left;
}
.empty-meta > div {
  display: flex; justify-content: space-between;
  font-size: 11px;
}
.empty-meta span:first-child {
  font-family: "JetBrains Mono", monospace;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.empty-meta .muted { color: var(--muted); }

.ins-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  background: color-mix(in oklch, var(--surface) 42%, transparent);
}
.ins-kind {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 700;
}
.ins-head h2 { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ins-head .x {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; border-radius: 4px;
  font-size: 16px;
}
.ins-head .x:hover { color: var(--text); background: var(--surface); }

.ins-id {
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.ins-id code {
  font-size: 11px;
  background: var(--surface);
  color: var(--text-2);
  padding: 3px 7px;
  border-radius: 3px;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.pill-ok    { color: var(--ok);    border-color: color-mix(in oklch, var(--ok) 40%, var(--border)); }
.pill-warn  { color: var(--warn);  border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); }
.pill-idle  { color: var(--idle); }
.pill-focus { color: var(--focus); border-color: color-mix(in oklch, var(--focus) 40%, var(--border)); }
.pill-confirmed { color: var(--ok);   border-color: color-mix(in oklch, var(--ok) 30%, var(--border)); }
.pill-medium    { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, var(--border)); }
.pill-abstract  { color: var(--dim);  }

.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.status-dot.status-warn { background: var(--warn); }
.status-dot.status-idle { background: var(--idle); }
.status-dot.status-focus { background: var(--focus); }

.ins-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.ins-section h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.ins-section.privacy h3 { color: var(--priv); }
.ins-section.privacy p { color: var(--text-2); }

.ins-action {
  width: 100%;
  min-height: 36px;
  margin-top: 14px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.ins-action:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, var(--surface)); }
.ins-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ins-layer { display: flex; gap: 12px; align-items: center; }
.ins-layer-name { font-weight: 600; font-size: 13px; }
.ins-layer-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }

.tech-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 3px 9px;
  border-radius: 12px;
}

.ins-note {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

.conn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.conn-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface);
}
.conn-list a {
  color: inherit;
  text-decoration: none;
}
.conn-list a:hover {
  color: var(--accent);
}
.conn-dir { color: var(--accent); font-family: "JetBrains Mono", monospace; font-weight: 700; }
.conn-label {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conn-id { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--muted); }

.path-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.path-list li {
  display: grid;
  grid-template-columns: 28px 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--surface);
  border-radius: 4px;
  border-left: 2px solid var(--accent);
  font-size: 12px;
  position: relative;
}
.step-n { font-family: "JetBrains Mono", monospace; color: var(--muted); font-size: 10.5px; }
.step-tag {
  font-family: "JetBrains Mono", monospace;
  background: var(--bg);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
}
.step-label { font-weight: 500; }

.ins-summary {
  padding: 10px 18px 0;
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0;
}

.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.src-list li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--surface);
}
.src-kind {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  text-align: center;
  background: var(--bg);
  color: var(--accent);
  padding: 2px 0;
  border-radius: 3px;
  letter-spacing: 0.08em;
}
.src-list li span:nth-child(2) {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-2);
}
.src-date { color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 10.5px; }

/* scrollbars */
.rail::-webkit-scrollbar,
.inspector::-webkit-scrollbar,
.diagram-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.rail::-webkit-scrollbar-thumb,
.inspector::-webkit-scrollbar-thumb,
.diagram-wrap::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 6px;
  border: 2px solid var(--bg-2);
}
.rail::-webkit-scrollbar-thumb:hover,
.inspector::-webkit-scrollbar-thumb:hover,
.diagram-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* compact density */
.density-compact .rail-section { padding: 12px 12px 6px; }
.density-compact .ins-section { padding: 10px 14px; }
.density-compact .rail-head { padding: 14px; }
.density-compact .flow-row { padding: 6px 8px; }
.density-compact .layer-row { padding: 4px 8px; }

/* ──────────────────────────────────────────────
   Inspector — responsive drawer
────────────────────────────────────────────── */

/* Backdrop — clickable scrim behind drawer on narrow screens */
.inspector-backdrop {
  display: none;
  position: fixed;
  inset: 0 0 0 var(--rail-w);
  z-index: 199;
  background: oklch(0 0 0 / 0.42);
  animation: bd-in 0.18s ease forwards;
  cursor: pointer;
}
@keyframes bd-in { from { opacity: 0; } to { opacity: 1; } }
.inspector-backdrop.active { display: block; }

/* Toggle button — visible on wide screens only */
.inspector-toggle-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 26px; height: 26px;
  border-radius: 4px;
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.inspector-toggle-btn:hover { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.inspector-toggle-btn:focus-visible { outline: none; border-color: var(--accent); }

/* Narrow and tablet: inspector becomes a fixed right-side drawer */
@media (max-width: 1279px) {
  .app {
    grid-template-columns: var(--rail-w) 1fr;
  }
  .inspector {
    position: fixed;
    top: 0; right: 0;
    width: var(--inspector-w);
    height: 100vh;
    z-index: 200;
    transform: translateX(calc(var(--inspector-w) + 4px));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease;
    box-shadow: none;
    border-left: 1px solid var(--border-strong);
  }
  .inspector.is-open {
    transform: translateX(0);
    box-shadow: -16px 0 48px oklch(0 0 0 / 0.6);
  }
}

/* Desktop: grid column stays, toggle button available */
@media (min-width: 1280px) {
  .inspector-backdrop { display: none !important; }
  .inspector-toggle-btn { display: flex; }
  .app.inspector-off {
    grid-template-columns: var(--rail-w) 1fr;
  }
  .app.inspector-off #inspector { display: none; }
}

.edge-kind-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.edge-kind-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  min-width: 0;
}

.edge-kind-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-kind-toggle input {
  accent-color: var(--accent);
  flex: none;
}

.edge-kind-traffic { stroke: #38bdf8; }
.edge-kind-control-plane { stroke: #a78bfa; }
.edge-kind-physical { stroke: #94a3b8; }
.edge-kind-wireless { stroke: #22c55e; }
.edge-kind-observability { stroke: #f59e0b; }
.edge-kind-backup { stroke: #f97316; }
.edge-kind-source-of-truth { stroke: #e879f9; }
.edge-kind-automation { stroke: #14b8a6; }
.edge-kind-management { stroke: #60a5fa; }
.edge-kind-dependency { stroke: #cbd5e1; }

.edge.edge-flow {
  stroke: var(--accent);
  stroke-width: 1.9;
  opacity: 1;
}

.taxonomy-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.conn-kind,
.conn-edge-label {
  font-size: 0.75rem;
  opacity: 0.85;
}

.source-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.source-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* ──────────────────────────────────────────────
   Responsive command surfaces
────────────────────────────────────────────── */

.mobile-actions,
.controls-backdrop {
  display: none;
}

.rail-panel {
  scroll-margin-block: 12px;
}

.view-tab:focus-visible,
.flow-row:focus-visible,
.layer-row:focus-within,
.edge-kind-toggle:focus-within,
.topology-node:focus-visible,
.search input:focus-visible,
.search-clear:focus-visible,
.mobile-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  :root {
    --rail-w: 0px;
    --inspector-w: calc(100vw - 20px);
  }

  html,
  body,
  .app {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
  }

  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .rail {
    display: contents;
  }

  .rail-head,
  .rail-foot {
    display: none;
  }

  .mobile-brand {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 9px 12px;
    background: color-mix(in oklch, var(--bg-2) 94%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
  }

  .mobile-brand .brand-title {
    font-size: 13px;
  }

  .mobile-brand .brand-sub {
    font-size: 10px;
  }

  .rail-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 230;
    max-height: min(72dvh, 620px);
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 -18px 60px oklch(0 0 0 / 0.64);
    transform: translateY(calc(100% + 96px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease;
  }

  .search.rail-panel {
    margin: 0;
    padding: 12px;
  }

  .rail-section.rail-panel {
    padding: 14px;
  }

  .rail-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .controls-backdrop {
    position: fixed;
    inset: 0;
    z-index: 220;
    background: oklch(0 0 0 / 0.45);
    cursor: pointer;
  }

  .controls-backdrop.active {
    display: block;
  }

  .mobile-actions {
    position: fixed;
    left: 8px;
    right: auto;
    width: min(calc(100vw - 16px), 374px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 240;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    overflow: hidden;
    background: color-mix(in oklch, var(--bg-2) 94%, transparent);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 10px 36px oklch(0 0 0 / 0.58);
    backdrop-filter: blur(14px);
  }

  .mobile-action {
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .mobile-action span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-action-icon {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1;
  }

  .mobile-action[aria-expanded="true"] {
    color: var(--accent);
    background: var(--accent-bg);
    border-color: var(--accent-soft);
  }

  .canvas-wrap {
    min-width: 0;
    width: 100vw;
    padding-top: 58px;
  }

  .topbar {
    min-height: 42px;
    padding: 8px 10px;
    gap: 8px;
    overflow: hidden;
  }

  .crumbs {
    display: none;
  }

  .topbar-right {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 374px;
    gap: 5px;
    min-width: 0;
  }

  .counter {
    min-width: 0;
    text-align: center;
    font-size: 9.5px;
    padding: 3px 4px;
    overflow: hidden;
    white-space: nowrap;
  }

  .kbd-hint,
  .inspector-toggle-btn {
    display: none !important;
  }

  .diagram-wrap {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .zoom-controls {
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .zoom-btn {
    width: 44px;
    height: 44px;
  }

  .inspector-backdrop {
    inset: 0;
  }

  .inspector {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-height: min(72dvh, 620px);
    height: auto;
    z-index: 250;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    transform: translateY(calc(100% + 96px));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease;
    box-shadow: none;
  }

  .inspector.is-open {
    transform: translateY(0);
    box-shadow: 0 -18px 60px oklch(0 0 0 / 0.64);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --rail-w: clamp(240px, 30vw, 280px);
    --inspector-w: min(360px, 84vw);
  }

  .app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: 100vh;
    grid-template-rows: 100dvh;
    height: 100vh;
    height: 100dvh;
  }

  .mobile-actions,
  .controls-backdrop {
    display: none !important;
  }

  .rail-head {
    padding: 14px;
  }

  .rail-section {
    padding: 12px 12px 6px;
  }

  .kbd-hint {
    display: none;
  }

  .topbar {
    padding: 9px 14px;
  }

  .topbar-right {
    gap: 10px;
  }

  .inspector-backdrop {
    inset: 0;
  }

  .inspector {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--inspector-w);
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    transform: translateX(calc(var(--inspector-w) + 4px));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease;
    box-shadow: none;
    border-left: 1px solid var(--border-strong);
  }

  .inspector.is-open {
    transform: translateX(0);
    box-shadow: -16px 0 48px oklch(0 0 0 / 0.6);
  }
}

@media (min-width: 1280px) {
  .app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--inspector-w);
    grid-template-rows: 100vh;
    grid-template-rows: 100dvh;
    height: 100vh;
    height: 100dvh;
  }

  .mobile-actions,
  .controls-backdrop {
    display: none !important;
  }

  .inspector {
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
    box-shadow: none !important;
    border-left: 1px solid var(--border);
  }

  .inspector-backdrop {
    display: none !important;
  }

  .inspector-toggle-btn {
    display: flex;
  }

  .topbar {
    min-width: 0;
  }

  .topbar-right {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .app {
    --rail-w: 280px;
    --inspector-w: 320px;
  }

  .kbd-hint {
    display: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .kbd-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .flow-line {
    animation: none !important;
    stroke-dasharray: none;
  }
}