/* ========== DUAL TRACE 19.6 — Graph Node Styles ==========
 * Shared CSS for pill-shaped word nodes rendered by graph-engine.js.
 * Single source of truth — imported by display.html and playback.html.
 * Colors must match the JS color palette in graph-engine.js.
 * ========================================================== */

/* ===== PILL NODE STYLES (used by graph-engine.js) ===== */
.dt-node { z-index: 1; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.dt-node:hover { z-index: 100; }
.dt-pill {
  padding: 10px 20px; border-radius: 25px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 400; white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block; position: relative;
}
.dt-node:hover .dt-pill { transform: scale(1.08); }

/* Size classes — scaled up for projector distance (stage-optimized) */
.dt-node.size-xl .dt-pill { font-size: 32px; padding: 18px 40px; }
.dt-node.size-lg .dt-pill { font-size: 24px; padding: 16px 32px; }
.dt-node.size-md .dt-pill { font-size: 18px; padding: 13px 26px; }
.dt-node.size-sm .dt-pill { font-size: 15px; padding: 11px 22px; }

/* Density adaptation — graph-engine.js adds these classes to container */
.density-high .dt-node.size-xl .dt-pill { font-size: 22px; padding: 12px 24px; }
.density-high .dt-node.size-lg .dt-pill { font-size: 17px; padding: 10px 20px; }
.density-high .dt-node.size-md .dt-pill { font-size: 14px; padding: 8px 16px; }
.density-high .dt-node.size-sm .dt-pill { font-size: 12px; padding: 7px 14px; }
.density-very-high .dt-node.size-xl .dt-pill { font-size: 17px; padding: 9px 18px; }
.density-very-high .dt-node.size-lg .dt-pill { font-size: 14px; padding: 8px 16px; }
.density-very-high .dt-node.size-md .dt-pill { font-size: 12px; padding: 7px 14px; }
.density-very-high .dt-node.size-sm .dt-pill { font-size: 10px; padding: 6px 12px; }
.density-extreme .dt-node.size-xl .dt-pill { font-size: 14px; padding: 7px 14px; }
.density-extreme .dt-node.size-lg .dt-pill { font-size: 12px; padding: 6px 12px; }
.density-extreme .dt-node.size-md .dt-pill { font-size: 10px; padding: 5px 10px; }
.density-extreme .dt-node.size-sm .dt-pill { font-size: 9px; padding: 4px 8px; }
.density-extreme .dt-badge { min-width: 14px; height: 14px; font-size: 7px; top: -5px; right: -5px; }
.density-very-high .dt-badge { min-width: 15px; height: 15px; font-size: 8px; top: -5px; right: -5px; }

/* Frequency badge — shows combined word count across both speakers */
.dt-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 22px; height: 22px; border-radius: 11px;
  padding: 0 5px; box-sizing: border-box;
  font-family: 'Space Mono', monospace; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.dt-node.type-a .dt-badge { background: rgba(59,130,246,0.8); color: #fff; }
.dt-node.type-b .dt-badge { background: rgba(245,158,11,0.8); color: #000; }
.dt-node.type-shared .dt-badge { background: rgba(168,85,247,0.8); color: #fff; }
.dt-node.type-contested .dt-badge { background: rgba(236,72,153,0.8); color: #fff; }

/* Type A — blue (enhanced glow for projection) */
.dt-node.type-a .dt-pill {
  background: rgba(59,130,246,0.10);
  border: 1.5px solid rgba(59,130,246,0.45);
  color: rgba(147,197,253,0.95);
  box-shadow: 0 0 40px rgba(59,130,246,0.28), inset 0 0 20px rgba(59,130,246,0.06);
}
.dt-node.type-a:hover .dt-pill { box-shadow: 0 0 60px rgba(59,130,246,0.45); }

/* Type B — amber (enhanced glow for projection) */
.dt-node.type-b .dt-pill {
  background: rgba(245,158,11,0.10);
  border: 1.5px solid rgba(245,158,11,0.45);
  color: rgba(252,211,77,0.95);
  box-shadow: 0 0 40px rgba(245,158,11,0.28), inset 0 0 20px rgba(245,158,11,0.06);
}
.dt-node.type-b:hover .dt-pill { box-shadow: 0 0 60px rgba(245,158,11,0.45); }

/* Shared — purple (enhanced for projection) */
.dt-node.type-shared .dt-pill {
  background: rgba(168,85,247,0.12);
  border: 2px solid rgba(168,85,247,0.55);
  color: rgba(196,181,253,1);
  box-shadow: 0 0 50px rgba(168,85,247,0.35), inset 0 0 24px rgba(168,85,247,0.08);
}
.dt-node.type-shared:hover .dt-pill { box-shadow: 0 0 70px rgba(168,85,247,0.50); }

/* Contested — pink, dramatic pulsing for stage */
.dt-node.type-contested .dt-pill {
  background: rgba(236,72,153,0.16);
  border: 2px solid rgba(236,72,153,0.65);
  color: rgba(249,168,212,1);
  box-shadow: 0 0 55px rgba(236,72,153,0.45), inset 0 0 20px rgba(236,72,153,0.10);
  animation: contestedPulse 2.5s ease-in-out infinite;
}
.dt-node.type-contested:hover .dt-pill {
  box-shadow: 0 0 80px rgba(236,72,153,0.60);
  animation: none;
}
@keyframes contestedPulse {
  0%,100% { box-shadow: 0 0 55px rgba(236,72,153,0.45), inset 0 0 20px rgba(236,72,153,0.10); }
  50% { box-shadow: 0 0 80px rgba(236,72,153,0.60), inset 0 0 30px rgba(236,72,153,0.12); }
}

/* New arrival — brief bright glow when a word first appears in the analysis */
.dt-node.new-arrival .dt-pill {
  animation: arrivalGlow 4s ease-out forwards;
}
@keyframes arrivalGlow {
  0% { box-shadow: 0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(255,255,255,0.15); filter: brightness(1.5); }
  100% { filter: brightness(1); }
}
/* Don't override contested pulse if both apply */
.dt-node.type-contested.new-arrival .dt-pill {
  animation: arrivalGlow 4s ease-out forwards, contestedPulse 2.5s ease-in-out infinite;
}

/* Mobile — smaller pills for phone screens */
@media (max-width: 480px) {
  .dt-node.size-xl .dt-pill { font-size: 18px; padding: 10px 20px; }
  .dt-node.size-lg .dt-pill { font-size: 15px; padding: 8px 16px; }
  .dt-node.size-md .dt-pill { font-size: 12px; padding: 6px 12px; }
  .dt-node.size-sm .dt-pill { font-size: 10px; padding: 5px 10px; }
  .dt-badge { min-width: 16px; height: 16px; font-size: 8px; top: -6px; right: -6px; }
}