/* ═══════════════════════════════════════════════════════
   Triforce UI — Universal depth colors + breadcrumb
   ═══════════════════════════════════════════════════════ */

:root {
  --level-trunk:  #6366f1;
  --level-branch: #14b8a6;
  --level-leaf:   #f59e0b;
  --triforce-color: var(--level-trunk);
}

/* ── Depth-aware panel accents ── */
.triforce-trunk .dp-window  { --dp-color: var(--level-trunk); }
.triforce-branch .dp-window { --dp-color: var(--level-branch); }
.triforce-leaf .dp-window   { --dp-color: var(--level-leaf); }

.triforce-trunk .dp-header  { border-left-color: var(--level-trunk); }
.triforce-branch .dp-header { border-left-color: var(--level-branch); }
.triforce-leaf .dp-header   { border-left-color: var(--level-leaf); }

/* Override for panels that declare their own depth */
.dp-window[data-depth="1"] { --dp-color: var(--level-trunk); }
.dp-window[data-depth="2"] { --dp-color: var(--level-branch); }
.dp-window[data-depth="3"] { --dp-color: var(--level-leaf); }
.dp-window[data-depth="1"] .dp-header { border-left-color: var(--level-trunk); }
.dp-window[data-depth="2"] .dp-header { border-left-color: var(--level-branch); }
.dp-window[data-depth="3"] .dp-header { border-left-color: var(--level-leaf); }

/* ── Depth-aware dice cubes ── */
.triforce-trunk .dice-cube  { --dice-color: var(--level-trunk); }
.triforce-branch .dice-cube { --dice-color: var(--level-branch); }
.triforce-leaf .dice-cube   { --dice-color: var(--level-leaf); }

/* ── Breadcrumb ── */
.triforce-bc {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px; height: 100%; font-size: 11px;
}
.tbc-seg {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  cursor: pointer; transition: all .15s;
  color: rgba(200,215,230,.5);
}
.tbc-seg:hover { color: rgba(200,215,230,.9); background: rgba(255,255,255,.04); }
.tbc-seg-active { color: var(--seg-color); font-weight: 600; }
.tbc-seg-root .tbc-label { font-weight: 700; }
.tbc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--seg-color);
  opacity: .6;
}
.tbc-seg-active .tbc-dot { opacity: 1; box-shadow: 0 0 6px var(--seg-color); }
.tbc-sep { color: rgba(200,215,230,.2); font-size: 10px; }

/* ── Level transition animation ── */
html.triforce-trunk  { --triforce-bg-tint: rgba(99,102,241,.02); }
html.triforce-branch { --triforce-bg-tint: rgba(20,184,166,.02); }
html.triforce-leaf   { --triforce-bg-tint: rgba(245,158,11,.02); }

body { background: linear-gradient(180deg, var(--triforce-bg-tint, transparent) 0%, transparent 200px); transition: background .3s ease; }

/* ═══════════════════════════════════════════════════════
   Navigation Tree
   ═══════════════════════════════════════════════════════ */
.nt-node {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; cursor: pointer; transition: background .1s;
  white-space: nowrap; overflow: hidden;
}
.nt-node:hover { background: rgba(255,255,255,.04); }
.nt-active { background: rgba(255,255,255,.06); }
.nt-active .nt-label { font-weight: 700; color: var(--text, #e0e6ed); }
.nt-focused { background: rgba(59,130,246,.12); border-left: 2px solid #3b82f6; }
.nt-focused .nt-label { font-weight: 700; color: #fff; }
.nt-focused .nt-dot { box-shadow: 0 0 6px #3b82f6; }
.nt-chevron { font-size: 9px; width: 12px; text-align: center; cursor: pointer; flex-shrink: 0; }
.nt-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.nt-active .nt-dot { box-shadow: 0 0 4px currentColor; }
.nt-label { font-size: 10px; color: rgba(200,215,230,.6); overflow: hidden; text-overflow: ellipsis; }
.nt-depth-0 .nt-label { font-size: 11px; font-weight: 700; color: rgba(200,215,230,.8); }
.nt-depth-1 .nt-label { font-size: 10px; font-weight: 600; }
.nt-depth-2 .nt-label { font-size: 10px; }
.nt-depth-3 .nt-label { font-size: 9px; color: rgba(200,215,230,.45); }
.nt-empty { padding: 16px; text-align: center; color: rgba(200,215,230,.3); font-size: 10px; }

/* ═══════════════════════════════════════════════════════
   Arc Overlay
   ═══════════════════════════════════════════════════════ */
.relay-arc-overlay { pointer-events: none; }