/* v9: time is horizontal; category bands and type stay in screen space.
   Layer this after network.css. Node movement never changes the date anchor. */
#relations-view { --network-label-width: 84px; --network-axis-y: 88px; }
#relations-view .network-heading {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-100) var(--spacing-300);
  margin-bottom: var(--spacing-200);
}
.network-heading > div:first-child { flex: 1 1 280px; }
.network-heading .network-orientation {
  max-width: 420px;
  font: 400 var(--text-xs)/var(--line-sm) var(--sans);
  color: var(--muted);
  margin: 0;
}
.network-era, .network-heading label:has(#network-era) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-75);
  flex: 0 0 auto;
  font: 400 var(--text-xs)/var(--line-sm) var(--sans);
  color: var(--muted);
}
#network-era {
  min-height: 40px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  font: 500 var(--text-xs)/var(--line-sm) var(--sans);
}
#relations-view .network-workspace {
  min-height: 600px;
  height: max(600px, calc(100dvh - 276px));
  max-height: 880px;
  background: var(--paper);
}
.network-canvas-wrap { min-height: 600px; container-type: inline-size; }
.network-canvas-wrap::before { display: none; }
#network-svg > rect[fill="url(#network-dots)"] { display: none; }
#network-svg { background: var(--paper); touch-action: pan-y; }
.network-tools { top: 12px; left: 12px; right: 12px; align-items: center; gap: 8px; }
.network-tools .network-search { width: min(280px, 35%); flex: 0 1 280px; }
.network-tools > button {
  min-width: 40px;
  height: 40px;
  padding: 0;
  background: var(--paper);
}
.network-tools > button:hover, .network-zoom button:hover { background: var(--surface-hover); }
#network-current {
  position: absolute;
  top: 12px;
  left: 420px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: 500 14px/20px var(--sans);
  text-align: left;
  z-index: 2;
}
#network-current span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#network-current .ui-icon { flex: 0 0 auto; margin-left: auto; }
#network-current:hover { border-color: var(--line); }
#network-current:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#network-links {
  position: absolute;
  left: 204px;
  bottom: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  white-space: nowrap;
  font: 500 var(--text-xs)/var(--line-sm) var(--sans);
}
#network-links[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#network-links:focus-visible, #network-era:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Axes stay legible while the visible time window changes. */
.network-axis { pointer-events: none; }
.network-axis text {
  font: 400 12px/16px var(--mono);
  fill: var(--muted);
  stroke: none;
  letter-spacing: 0;
}
.network-axis path, .network-axis line { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.network-grid { pointer-events: none; }
.network-grid line, .network-grid path { stroke: var(--line); stroke-width: 1; opacity: .55; fill: none; vector-effect: non-scaling-stroke; }
.network-bands { pointer-events: none; }
.network-bands rect { fill: var(--panel); stroke: none; opacity: .42; }
.network-bands > g:nth-child(even) rect { opacity: .16; }
.network-bands text { fill: var(--muted); stroke: none; font: 500 12px/16px var(--sans); }
.network-bands .band-label { fill: var(--ink); }
.network-bands .band-count { font: 400 10px/14px var(--mono); fill: var(--muted); }
.network-bands .band-divider { stroke: var(--line); stroke-width: 1; fill: none; }

/* Small marks retain precise dates; only the display label can be moved. */
.network-node { cursor: grab; }
.network-node text { stroke: none; user-select: none; pointer-events: none; }
.network-node .node-dot {
  r: 6px;
  fill: var(--lane, var(--ink));
  stroke: var(--paper);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.network-node .node-label {
  fill: var(--ink);
  font: 500 12px/16px var(--sans);
  letter-spacing: 0;
  /* Knock out the relationship line behind type without changing the glyph. */
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.network-node .node-year { fill: var(--muted); font: 400 12px/16px var(--mono); }
.network-node .node-pin { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.network-node.is-selected .node-dot { r: 7px; stroke: var(--ink); stroke-width: 2; }
.network-node.is-selected .node-label { font-weight: 600; }
.network-node.is-neighbor .node-dot { stroke: var(--paper); stroke-width: 2; }
.network-node.is-muted { opacity: .55; }
.network-node:hover, .network-node:focus-visible, .network-node.is-dragging { opacity: 1; }
.network-node:hover .node-dot, .network-node:focus-visible .node-dot { stroke: var(--ink); stroke-width: 2; }
.network-node.is-dragging .node-dot { stroke: var(--ink); stroke-width: 3; }
.network-node.is-dragging { cursor: grabbing; }
.network-node .node-hit, .network-node .node-target { fill: transparent; stroke: none; pointer-events: all; }

.network-cluster { cursor: zoom-in; outline: none; }
.network-cluster .cluster-dot {
  r: 15px;
  fill: color-mix(in srgb, var(--lane, var(--muted)) 5%, var(--paper));
  stroke: var(--lane, var(--muted));
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.network-cluster .cluster-count {
  fill: var(--ink);
  stroke: none;
  font: 600 12px/16px var(--mono);
  text-anchor: middle;
  dominant-baseline: auto;
  pointer-events: none;
}
.network-cluster:hover .cluster-dot, .network-cluster:focus-visible .cluster-dot { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.network-cluster .cluster-range { fill: var(--muted); stroke: none; font: 400 12px/16px var(--mono); pointer-events: none; }
.network-cluster .cluster-hit { fill: transparent; stroke: none; pointer-events: all; }
.network-anchors { pointer-events: none; }
.network-anchors line, .network-anchors path { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; vector-effect: non-scaling-stroke; }
.network-anchors circle { fill: var(--paper); stroke: var(--muted); stroke-width: 1; opacity: .8; }
.network-anchors .is-selected line, .network-anchors .is-selected path { stroke: var(--ink); opacity: .85; }
.network-edge .edge-visible { stroke: var(--muted); stroke-width: 1.25; opacity: .3; vector-effect: non-scaling-stroke; }
.network-edge.is-related .edge-visible { stroke: var(--muted); stroke-width: 1.5; opacity: .7; }
.network-edge.is-selected .edge-visible { stroke: var(--ink); stroke-width: 2; opacity: 1; }
.network-edge:hover .edge-visible { stroke: var(--ink); stroke-width: 2; opacity: 1; }
.network-edge .edge-hit { stroke-width: 14; }
.network-edge text { fill: var(--ink); stroke: var(--paper); stroke-width: 3; paint-order: stroke; font: 500 12px/16px var(--sans); pointer-events: none; }

/* Six-band overview remains a map of dates, independent of node offsets. */
.network-mini {
  display: block;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 40px;
  width: calc(100% - 24px);
  height: 42px;
  overflow: visible;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
}
.network-mini text { font: 400 10px/14px var(--mono); fill: var(--muted); stroke: none; }
.network-mini path, .network-mini line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.network-mini .mini-band, .network-mini .mini-lane { stroke: var(--line); opacity: .5; }
.network-mini .mini-dot, .network-mini .mini-node { fill: var(--lane, var(--muted)); stroke: none; opacity: .7; }
.network-mini .mini-window, .network-mini .network-mini-window, .network-mini rect[data-window] {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}
.network-zoom { left: 12px; bottom: 96px; }
.network-zoom output { min-width: 96px; padding-inline: 8px; font-size: 12px; }
.network-status { bottom: 12px; left: 12px; right: 12px; align-items: center; font-size: 12px; gap: 4px 12px; }
.network-status > span:last-child { display: inline; }
.same-day-node { display: block; width: 100%; min-height: 44px; padding: 12px 0; text-align: left; font: 400 14px/20px var(--sans); border-bottom: 1px solid var(--line); }
.same-day-node:hover { color: var(--accent); }
.same-day-node:last-child { border-bottom: 0; }
.network-inspector { scrollbar-gutter: stable; }
.network-filters select { font: 400 14px/20px var(--sans); min-height: 40px; }
.network-selected-actions button { min-height: 44px; }
.network-connections .network-connection { min-height: 56px; }
.network-connection .edge-evidence-button { min-width: 44px; }
#network-evidence a { min-height: 44px; }

.network-cluster.llm, .network-bands .llm, .network-mini .llm { --lane: var(--red); }
.network-cluster.vision, .network-bands .vision, .network-mini .vision { --lane: var(--blue); }
.network-cluster.world, .network-bands .world, .network-mini .world { --lane: var(--green); }
.network-cluster.agents, .network-bands .agents, .network-mini .agents { --lane: #aa6e38; }
.network-cluster.protocols, .network-bands .protocols, .network-mini .protocols { --lane: #7f6fa5; }
.network-cluster.decisions, .network-bands .decisions, .network-mini .decisions { --lane: #3f8b87; }
html[data-style="terminal"] :is(.network-workspace, .network-mini, #network-era, #network-links, #network-current) { border-radius: 0; }
html[data-style="terminal"] .network-node .node-label { font-family: var(--mono); }

@media (max-width: 1050px) {
  .network-tools .network-search { width: auto; flex: 0 1 280px; }
}
@media (max-width: 700px) {
  #relations-view { padding: 16px 12px; }
  #relations-view .network-heading { align-items: center; column-gap: 12px; row-gap: 8px; margin-bottom: 16px; }
  .network-heading > div:first-child { flex: 1 1 100%; }
  .network-heading .network-orientation { flex: 1 1 120px; max-width: none; font-size: 12px; line-height: 20px; }
  .network-heading h1 { font-size: 24px; line-height: 32px; }
  #network-era { min-height: 44px; max-width: 150px; padding: 8px; }
  .network-era, .network-heading label:has(#network-era) { font-size: 12px; gap: 4px; }
  #relations-view .network-workspace { height: auto; max-height: none; min-height: 0; }
  .network-canvas-wrap { height: 600px; min-height: 600px; }
  .network-tools { top: 8px; left: 8px; right: 8px; gap: 4px; }
  .network-tools .network-search { flex: 1 1 100px; padding: 0 8px; gap: 4px; }
  #network-query { height: 44px; font-size: 12px; }
  .network-tools > button { width: 44px; min-width: 44px; height: 44px; }
  #network-links { left: 180px; bottom: 96px; width: auto; min-width: 0; height: 44px; padding: 0 8px; gap: 4px; font-size: 12px; }
  #network-results { width: min(320px, calc(100vw - 64px)); }
  .network-mini { left: 8px; right: 8px; bottom: 40px; width: calc(100% - 16px); }
  .network-zoom { left: 8px; bottom: 96px; }
  .network-zoom button { width: 44px; height: 44px; }
  .network-zoom output { min-width: 72px; font-size: 12px; padding-inline: 4px; }
  .network-status { left: 8px; right: 8px; bottom: 8px; font-size: 12px; max-width: none; text-align: left; flex-wrap: wrap; gap: 0 8px; }
  .network-status > span { gap: 4px; }
  .network-status > span:last-child { font-size: 12px; }
  .network-bands text { font-size: 12px; }
  .network-bands .band-count { display: none; }
  .network-inspector { scrollbar-gutter: auto; }
  .network-filters select { min-height: 44px; }
  .network-connections { grid-template-columns: 1fr; }
  .network-connection strong { font-size: 14px; line-height: 20px; }
  .network-connection .edge-evidence-button { width: 44px; }
}
@container (max-width: 600px) {
  #network-current { top: 64px; left: 12px; right: 12px; height: 44px; padding-inline: 8px; font-size: 12px; }
  .network-tools .network-search { width: auto; flex: 1 1 100px; }
}
@container (min-width: 601px) {
  .network-tools .network-search { width: 280px; flex: 0 1 280px; }
}
@media (max-width: 360px) {
  .network-tools .network-search > .ui-icon { display: none; }
  #network-query { font-size: 12px; }
  .network-status { bottom: 8px; right: 8px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-node, .network-cluster, .network-mini { transition: none; }
}