/* Graph embeddings explainer — WarpDrive-consistent panel/SVG styling */

.tge-scene {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.tge-scene h3 { margin-top: 0; color: var(--text-bright); font-size: 1.1rem; }
.tge-scene .tge-caption { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.6rem; }

.tge-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tge-split.wide-right { grid-template-columns: 2fr 3fr; }
@media (max-width: 820px) { .tge-split, .tge-split.wide-right { grid-template-columns: 1fr; } }

.tge-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
  min-height: 300px;
}
.tge-panel h4 { margin: 0 0 0.4rem; color: var(--text-bright); font-size: 0.95rem; }
.tge-panel .tge-tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border-bright); color: var(--text-dim); margin-left: 0.4rem;
}
.tge-panel .tge-tag.real { color: var(--green); border-color: var(--green); }
.tge-panel .tge-tag.sim { color: var(--warp-bright); border-color: var(--warp-bright); }

.tge-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; }
.tge-controls input[type="text"] {
  flex: 1 1 220px; min-height: 44px; padding: 0.55rem 0.8rem;
  background: var(--void-deep); color: var(--text-bright);
  border: 1px solid var(--border-bright); border-radius: var(--radius);
  font-family: 'Onest', sans-serif; font-size: 0.95rem;
}
.tge-controls input[type="text"]:focus { outline: 2px solid var(--warp-blue); outline-offset: 1px; }

.tge-btn {
  min-height: 44px; min-width: 44px; padding: 0.5rem 1rem;
  background: var(--surface-solid); color: var(--text-bright);
  border: 1px solid var(--border-bright); border-radius: var(--radius);
  font-family: 'Onest', sans-serif; font-size: 0.9rem; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.tge-btn:hover, .tge-btn:focus-visible { border-color: var(--warp-blue); color: var(--warp-streak); }
.tge-btn.primary { background: linear-gradient(135deg, var(--warp-blue), var(--electric)); color: var(--void); border: none; font-weight: 600; }
.tge-btn:disabled { opacity: 0.45; cursor: default; }
.tge-btn:active { transform: translateY(1px); }

.tge-mono { font-family: 'JetBrains Mono', monospace; }

/* --- graph svg --- */
.tge-graph { width: 100%; height: auto; display: block; }
.tge-edge { stroke: var(--text-muted); stroke-opacity: 0.5; fill: none; transition: stroke 0.3s var(--ease-out), stroke-opacity 0.3s var(--ease-out); }
.tge-edge.lit { stroke: var(--warp-blue); stroke-opacity: 1; }
.tge-edge.dim { stroke-opacity: 0.12; }
.tge-edge-label { fill: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.tge-node circle { fill: var(--surface-solid); stroke: var(--border-bright); stroke-width: 1.5; transition: stroke 0.3s var(--ease-out), fill 0.3s var(--ease-out); }
.tge-node text { fill: var(--text); font-size: 11.5px; text-anchor: middle; font-family: 'Onest', sans-serif; }
.tge-node .tge-rank { fill: var(--warp-streak); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
.tge-node.lit circle { stroke: var(--warp-bright); fill: oklch(0.22 0.06 70); }
.tge-node.lit text { fill: var(--text-bright); }
.tge-node.dim { opacity: 0.35; }
.tge-node.new circle { animation: tge-pop 0.45s var(--ease-out); }
@keyframes tge-pop { from { transform: scale(0.3); } to { transform: scale(1); } }
.tge-node { transform-box: fill-box; transform-origin: center; }
.tge-packet { stroke: var(--warp-bright); stroke-opacity: 0.95; stroke-width: 2.5; fill: none; pointer-events: none; }
.tge-text { overflow: hidden; }
.tge-cursor-scan {
  position: absolute; top: 0.6rem; bottom: 0.6rem; left: 0.8rem; width: 2px;
  background: var(--warp-bright); opacity: 0.9; pointer-events: none;
  animation: tge-scan 0.9s var(--ease-out) 1 forwards;
}
@keyframes tge-scan {
  from { left: 0.8rem; opacity: 0.9; }
  to { left: calc(100% - 1rem); opacity: 0; }
}

/* --- matcher --- */
.tge-text {
  font-size: 1.05rem; line-height: 2.1; padding: 0.8rem;
  background: var(--void-deep); border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; min-height: 3.2rem;
}
.tge-text mark {
  background: oklch(0.30 0.10 70 / 0.55); color: var(--warp-streak);
  border-radius: 3px; padding: 0.05em 0.15em;
}
.tge-cursor {
  display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.15em;
  background: var(--warp-bright);
}
.tge-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.tge-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  background: var(--void-deep); border: 1px solid var(--border-bright); color: var(--text);
}
.tge-chip b { color: var(--warp-bright); font-weight: 600; }
.tge-chip.arrow::after { content: " →"; color: var(--text-muted); }
.tge-chip:last-child.arrow::after { content: ""; }

/* --- doc queue + ledger --- */
.tge-queue { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.7rem 0; }
.tge-docrow {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.7rem;
  background: var(--void-deep); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.88rem;
}
.tge-docrow .tge-docid { font-family: 'JetBrains Mono', monospace; color: var(--warp-streak); min-width: 8.5rem; }
.tge-docrow .tge-doctext { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tge-docrow.indexed { border-color: var(--green-dim); }
.tge-docrow.indexed .tge-docid::before { content: "✓ "; color: var(--green); font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.tge-docrow.active { border-color: var(--warp-blue); }

.tge-ledger { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.7rem; }
.tge-ledger th { text-align: left; color: var(--text-dim); font-weight: 500; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.tge-ledger td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; }
.tge-ledger .tge-sum { color: var(--warp-bright); font-weight: 600; }
.tge-ledger tr.top td { color: var(--text-bright); }

.tge-contrib { font-size: 0.8rem; color: var(--text-dim); margin: 0.2rem 0 0.2rem 0.5rem; }
.tge-contrib code { color: var(--warp-streak); }

/* --- pipeline compare --- */
.tge-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 820px) { .tge-cols { grid-template-columns: 1fr; } }
.tge-col { background: var(--void-deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; }
.tge-col h5 { margin: 0 0 0.5rem; color: var(--text-bright); font-size: 0.9rem; }
.tge-step {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem;
  border-left: 2px solid var(--border); margin: 0.35rem 0; font-size: 0.85rem; color: var(--text);
}
.tge-step .fa { color: var(--text-muted); width: 1rem; text-align: center; }
.tge-step.cost { border-left-color: var(--red); color: var(--text-dim); }
.tge-step.free { border-left-color: var(--green); }
.tge-step.flash { border-left-color: var(--warp-bright); color: var(--text-bright); }
.tge-step .tge-time { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--warp-streak); white-space: nowrap; }

/* --- comparison table --- */
.tge-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tge-table th { text-align: left; color: var(--warp-streak); font-weight: 600; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-bright); }
.tge-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.tge-table tr:last-child td { color: var(--text-bright); }
.tge-table td:first-child { color: var(--text-dim); white-space: nowrap; }
.tge-table-wrap { overflow-x: auto; }

/* --- scatter (vector world, illustrative) --- */
.tge-dot { fill: var(--text-muted); opacity: 0.7; transition: fill 0.3s, opacity 0.3s, r 0.3s; }
.tge-dot.lit { fill: var(--electric); opacity: 1; }
.tge-dot.query { fill: var(--warp-bright); }
.tge-ring { fill: none; stroke: var(--electric); stroke-dasharray: 4 4; stroke-opacity: 0.6; }
.tge-sim-label { fill: var(--electric); font-size: 10px; font-family: 'JetBrains Mono', monospace; }

/* --- misc --- */
.tge-note {
  border-left: 3px solid var(--warp-blue); padding: 0.6rem 0.9rem; margin: 1rem 0;
  background: var(--surface); color: var(--text); font-size: 0.9rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.tge-note.red { border-left-color: var(--red); }
.tge-note.green { border-left-color: var(--green); }
.tge-kbd-hint { color: var(--text-muted); font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .tge-edge, .tge-node circle, .tge-node text, .tge-dot, .tge-btn { transition: none; }
  .tge-node.new circle, .tge-cursor-scan { animation: none; }
  .tge-cursor-scan { display: none; }
}