/* Trie page */

.trie-stage {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trie-svg-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
  min-height: 280px;
  max-height: 52vh;   /* deep tries scroll inside instead of pushing controls off-screen */
}
.trie-svg { display: block; font-family: 'system-ui', monospace; }

/* Reserve space for the query result so it doesn't shove layout when it pops in */
.result-readout-slot { min-height: 42px; display: flex; align-items: center; }

.trie-edge {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  fill: none;
  transition: stroke 0.18s, stroke-width 0.18s;
}
.trie-edge.on-path {
  stroke: var(--accent);
  stroke-width: 3;
}
.trie-edge.just-created {
  stroke: var(--good);
  stroke-width: 3;
}

.trie-node circle {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  transition: fill 0.18s, stroke 0.18s, stroke-width 0.18s;
}
.trie-node .letter {
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
  pointer-events: none;
}
.trie-node .count {
  font-size: 10px;
  fill: var(--ink-soft);
  text-anchor: middle;
  font-family: 'system-ui', monospace;
  pointer-events: none;
}
.trie-node.root circle { fill: var(--ink); stroke: var(--ink); }
.trie-node.root .letter { fill: var(--bg); }
.trie-node.current circle {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.trie-node.current .letter { fill: white; }
.trie-node.on-path circle {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.trie-node.just-created circle {
  fill: var(--good);
  stroke: var(--good);
}
.trie-node.just-created .letter { fill: white; }
.trie-node.word-end circle {
  stroke: var(--good);
  stroke-width: 3;
  stroke-dasharray: none;
}
.trie-node.word-end::after {
  content: '✓';
}

/* Words list */
.words-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.word-chip {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'system-ui', monospace;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.word-chip .del {
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 0;
  font-size: 14px; line-height: 1;
}
.word-chip .del:hover { color: oklch(0.55 0.18 30); }