/* Segment tree page — extends maxflow.css base */

.segtree-page { /* alias: same as .suite-page */
  display: grid;
  grid-template-columns: 1fr 380px;
  height: calc(100vh - 38px);
}

.segtree-stage {
  background:
    radial-gradient(circle at 1px 1px, oklch(0.85 0.01 80) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  overflow: auto;
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top bar with title and op chooser */
.segtree-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

/* Array row — same look as fenwick cells, but 0-indexed */
.array-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.array-row .cell {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.array-row .cell .idx {
  font-family: 'system-ui', monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.array-row .cell .box {
  width: 100%;
  aspect-ratio: 1;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'system-ui', monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.array-row .cell input {
  width: 56px;
  text-align: center;
  font-size: 14px;
  padding: 6px 4px;
  font-family: 'system-ui', monospace;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}
.array-row .cell.in-range .box {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.array-row .cell.touched .box {
  background: var(--cool-soft);
  border-color: var(--cool);
}
.array-row .cell.updated .box {
  background: var(--good-soft);
  border-color: var(--good);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px oklch(0.4 0.1 145 / 0.4);
}

/* Tree SVG canvas */
.segtree-svg-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow: hidden;
}
.segtree-svg {
  width: 100%;
  display: block;
  font-family: 'system-ui', monospace;
}

/* Tree edges */
.tree-edge {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  fill: none;
  transition: stroke 0.18s, stroke-width 0.18s;
}
.tree-edge.on-path {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.tree-edge.recursed {
  stroke: var(--cool);
  stroke-width: 2;
}

/* Tree nodes */
.tree-node {
  transition: opacity 0.18s;
}
.tree-node rect {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  rx: 6;
  transition: fill 0.18s, stroke 0.18s, stroke-width 0.18s;
}
.tree-node .val {
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}
.tree-node .range {
  font-size: 9.5px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.02em;
}
.tree-node .idx {
  font-size: 8.5px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: central;
}
.tree-node.empty rect { fill: oklch(0.97 0.005 80); stroke-dasharray: 3 3; }
.tree-node.empty .val { fill: var(--muted); }

/* States */
.tree-node.visited rect { fill: var(--cool-soft); stroke: var(--cool); }
.tree-node.current rect { fill: var(--cool); stroke: var(--cool); stroke-width: 2.5; }
.tree-node.current .val,
.tree-node.current .range,
.tree-node.current .idx { fill: white; }
.tree-node.full-overlap rect { fill: var(--good-soft); stroke: var(--good); stroke-width: 2.5; }
.tree-node.no-overlap rect { fill: oklch(0.97 0.01 80); stroke: oklch(0.82 0.01 80); opacity: 0.85; }
.tree-node.no-overlap .val,
.tree-node.no-overlap .range { opacity: 0.6; }
.tree-node.on-update-path rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; }
.tree-node.just-combined rect {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.tree-node.leaf-updated rect { fill: var(--good); stroke: var(--good); }
.tree-node.leaf-updated .val,
.tree-node.leaf-updated .range,
.tree-node.leaf-updated .idx { fill: white; }

/* Tooltip-ish range arrow above the array indicating the query span */
.query-bracket {
  fill: var(--accent);
  opacity: 0.85;
}
.query-bracket-label {
  font-family: 'system-ui', monospace;
  font-size: 11px;
  fill: var(--accent-deep);
  font-weight: 600;
}

/* Op bar (similar to fenwick) */
.segtree-opbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.segtree-opbar .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.segtree-opbar .field label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.segtree-opbar input { width: 72px; }
.segtree-opbar .divider { border-left: 1px solid var(--line); height: 40px; }
.segtree-opbar select { width: auto; }

/* Op chips */
.op-chip-row {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px;
}
.op-chip {
  font-family: 'system-ui', sans-serif;
  font-size: 12px;
  background: transparent;
  border: none;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink-soft);
}
.op-chip.active {
  background: var(--ink);
  color: var(--bg);
}

/* Result readout */
.result-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'system-ui', monospace;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}
.result-readout .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: 'system-ui', sans-serif;
  font-weight: 600;
}
.result-readout .val { font-size: 22px; font-weight: 600; }
.result-readout .pending { color: var(--muted); }
.result-readout .complexity {
  margin-left: auto;
  font-size: 11px;
  color: var(--good);
  background: var(--good-soft);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Iterative-style flat array, shown when "bottom-up" tab is active */
.iter-flat {
  display: grid;
  gap: 4px;
  font-family: 'system-ui', monospace;
  font-size: 12px;
}
.iter-flat .iter-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}
.iter-flat .iter-cell .idx {
  font-size: 9.5px;
  color: var(--muted);
}
.iter-flat .iter-cell .box {
  width: 100%;
  height: 32px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iter-flat .iter-cell.used .box { background: var(--good-soft); border-color: var(--good); }
.iter-flat .iter-cell.boundary .box { background: var(--cool); border-color: var(--cool); color: white; }
.iter-flat .iter-cell.leaf-shaded .box { background: oklch(0.96 0.01 80); }

/* Tabs for top-down / bottom-up styles */
.tab-row {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.tab-row .tab {
  font-family: 'system-ui', sans-serif;
  font-size: 12px;
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-soft);
}
.tab-row .tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

/* (compare-link moved to maxflow.css for sharing) */