/* ============================================================================
   polarity-radar.css — THE SIGNATURE. The F.P.A. polarity field, alive.
   Bad-ass at a glance, legible in one second. Brand tokens only.
   ============================================================================ */
.pe-radar-wrap {
  display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-6, 32px);
  align-items: center; padding: var(--sp-5, 24px);
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--panel, #15171b);
  border: 1px solid var(--line, #2a2e36); border-radius: var(--r-lg, 14px);
}
@media (max-width: 720px){ .pe-radar-wrap { grid-template-columns: 1fr; } }

.pr-stage { position: relative; }
.pr-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* grid: quiet, structural */
.pr-ring { fill: none; stroke: var(--line-soft, #1e2228); stroke-width: 1; }
.pr-spoke { stroke: var(--line-soft, #1e2228); stroke-width: 1; }

/* THE SHAPE — draws itself in, then breathes */
.pr-shape {
  stroke: var(--accent-hi, #ff6f3d); stroke-width: 2;
  transform-origin: center;
  animation: pr-draw 900ms cubic-bezier(.16,1,.3,1) both, pr-breathe 6s ease-in-out 1.1s infinite;
}
@keyframes pr-draw {
  0%   { transform: scale(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pr-breathe {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.12); }
}

/* vertices — each pulses at its OWN intensity (high axes burn hotter) */
.pr-vertex {
  fill: var(--accent, #E85A2C);
  stroke: var(--ground, #0a0608); stroke-width: 1.5;
  opacity: calc(0.4 + var(--inten) * 0.6);
  filter: drop-shadow(0 0 calc(var(--inten) * 12px) var(--accent-hi, #ff6f3d));
  animation: pr-vertex-in 500ms cubic-bezier(.34,1.56,.64,1) both,
             pr-vertex-pulse calc(2s + (1 - var(--inten)) * 2s) ease-in-out 800ms infinite;
  transition: r .2s ease;
}
@keyframes pr-vertex-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pr-vertex-pulse {
  0%,100% { opacity: calc(0.4 + var(--inten) * 0.4); }
  50%     { opacity: calc(0.6 + var(--inten) * 0.4); }
}
.pr-vertex.pr-sel { stroke: var(--accent-hi); stroke-width: 2.5; }

/* labels — Fraunces names, mono band/score */
.pr-label { animation: pr-fade 500ms ease both; }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }
.pr-label-name {
  font-family: var(--display, 'Fraunces', serif); font-size: 13px; font-weight: 600;
  fill: var(--bone, #f1ece4); letter-spacing: .01em;
}
.pr-label-band {
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .12em;
  fill: var(--muted, #7a7468); text-transform: uppercase;
}
.pr-label.pr-sel .pr-label-name { fill: var(--accent-hi, #ff6f3d); }

/* THE READOUT — the NotebookLM "explains itself" panel */
.pr-readout {
  border-left: 2px solid var(--accent, #E85A2C); padding-left: var(--sp-4, 16px);
}
.pr-readout-eyebrow {
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-hi, #ff6f3d); margin-bottom: 8px;
}
.pr-readout-name {
  font-family: var(--display, serif); font-size: 22px; font-weight: 600;
  color: var(--bone, #f1ece4); line-height: 1.1; margin-bottom: 10px;
}
.pr-readout-charge {
  font-size: 12.5px; color: var(--bone-dim, #b6b0a4); font-style: italic;
  line-height: 1.5; margin-bottom: 14px;
}
.pr-readout-read {
  font-size: 14px; color: var(--bone, #f1ece4); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--line, #2a2e36);
}
.pr-readout-hint {
  margin-top: 16px; font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: .1em; color: var(--muted, #7a7468);
}
.pr-readout-flip { animation: pr-flip 360ms cubic-bezier(.16,1,.3,1) both; }
@keyframes pr-flip { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pr-shape, .pr-vertex, .pr-label, .pr-readout-flip { animation: none !important; }
}