/*
 * Shared styles for the hand-rolled SVG "sonar" competency radar (radar.js) and
 * the small band pills + ring sigil it pairs with. Loaded by the dashboard,
 * compare, feedback and landing surfaces. Inherits tokens from styles.css.
 */

.radar-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* soft sonar field behind the grid — atmosphere, not a flat fill */
.radar-field {
    fill: radial-gradient(circle, transparent 0%, transparent 100%); /* fallback ignored by SVG */
    fill: color-mix(in srgb, var(--accent-green) 8%, transparent);
    opacity: 0.7;
}
.radar-ring { fill: none; stroke: var(--bg-soft); stroke-width: 1; }
.radar-spoke { stroke: var(--bg-soft); stroke-width: 1; transition: stroke 0.2s ease, stroke-width 0.2s ease; }
.radar-target {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}
.radar-prev {
    fill: none;
    stroke: var(--accent-purple-deep);
    stroke-width: 1.5;
    opacity: 0.6;
    stroke-linejoin: round;
}
.radar-you {
    fill: color-mix(in srgb, var(--accent-green-deep) 22%, transparent);
    stroke: var(--accent-green-deep);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
}
.radar-vertex {
    fill: var(--accent-green-deep);
    stroke: var(--bg-card);
    stroke-width: 1.5;
    transition: r 0.2s ease, fill 0.2s ease;
}
.radar-deficit {
    stroke: var(--accent-pink-deep);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.75;
}
.radar-axis-label {
    font-size: 0.72rem;
    font-weight: 700;
    fill: var(--text-secondary);
    dominant-baseline: middle;
    transition: fill 0.2s ease;
}
.radar-axis-dim { fill: var(--text-light); opacity: 0.55; }

/* ── sonar center-out draw-in on first reveal ── */
.radar-you {
    animation: radarSonar 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.radar-vertex { animation: radarDot 0.4s ease both; animation-delay: 0.45s; }
.radar-field { animation: radarPing 0.9s ease-out both; }
@keyframes radarSonar {
    from { transform: scale(0.04); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes radarDot { from { opacity: 0; } to { opacity: 1; } }
@keyframes radarPing {
    from { opacity: 0; transform-origin: center; }
    to   { opacity: 0.7; }
}

/* ── interactive axis hotspots (declarative hover/focus, works via innerHTML) ── */
.radar-hotspot { cursor: pointer; outline: none; }
.radar-hit { fill: transparent; }
.radar-tip { opacity: 0; pointer-events: none; transition: opacity 0.16s ease; }
.radar-hotspot:hover .radar-tip,
.radar-hotspot:focus-visible .radar-tip,
.radar-hotspot:focus .radar-tip { opacity: 1; }
.radar-tip-bg {
    fill: var(--text-primary);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.22));
}
.radar-tip-name {
    fill: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.radar-tip-sub {
    fill: rgba(255, 255, 255, 0.82);
    font-size: 0.64rem;
    font-weight: 600;
}
/* highlight the hovered/focused spoke + its vertex */
.radar-hotspot:hover ~ .radar-spoke,
.radar-hotspot:focus ~ .radar-spoke { /* not reliable cross-order; use :has below */ }
.radar-svg:has(.radar-hotspot[data-axis="0"]:hover) .radar-spoke[data-spoke="0"],
.radar-svg:has(.radar-hotspot[data-axis="0"]:focus) .radar-spoke[data-spoke="0"],
.radar-svg:has(.radar-hotspot[data-axis="1"]:hover) .radar-spoke[data-spoke="1"],
.radar-svg:has(.radar-hotspot[data-axis="1"]:focus) .radar-spoke[data-spoke="1"],
.radar-svg:has(.radar-hotspot[data-axis="2"]:hover) .radar-spoke[data-spoke="2"],
.radar-svg:has(.radar-hotspot[data-axis="2"]:focus) .radar-spoke[data-spoke="2"],
.radar-svg:has(.radar-hotspot[data-axis="3"]:hover) .radar-spoke[data-spoke="3"],
.radar-svg:has(.radar-hotspot[data-axis="3"]:focus) .radar-spoke[data-spoke="3"],
.radar-svg:has(.radar-hotspot[data-axis="4"]:hover) .radar-spoke[data-spoke="4"],
.radar-svg:has(.radar-hotspot[data-axis="4"]:focus) .radar-spoke[data-spoke="4"],
.radar-svg:has(.radar-hotspot[data-axis="5"]:hover) .radar-spoke[data-spoke="5"],
.radar-svg:has(.radar-hotspot[data-axis="5"]:focus) .radar-spoke[data-spoke="5"] {
    stroke: var(--accent-green-deep);
    stroke-width: 2.5;
}
.radar-svg:has(.radar-hotspot[data-axis="0"]:hover) .radar-vertex[data-vx="0"],
.radar-svg:has(.radar-hotspot[data-axis="1"]:hover) .radar-vertex[data-vx="1"],
.radar-svg:has(.radar-hotspot[data-axis="2"]:hover) .radar-vertex[data-vx="2"],
.radar-svg:has(.radar-hotspot[data-axis="3"]:hover) .radar-vertex[data-vx="3"],
.radar-svg:has(.radar-hotspot[data-axis="4"]:hover) .radar-vertex[data-vx="4"],
.radar-svg:has(.radar-hotspot[data-axis="5"]:hover) .radar-vertex[data-vx="5"] {
    r: 5.5;
    fill: var(--text-primary);
}

/* ── ring sigil (orb echo) ── */
.ring-sigil { display: inline-block; vertical-align: -0.18em; }
.ring-sigil .rs-ring { fill: none; stroke: var(--accent-green-deep); }
.ring-sigil .rs-ring-3 { opacity: 0.45; stroke-width: 1; }
.ring-sigil .rs-ring-2 { opacity: 0.7; stroke-width: 1.2; }
.ring-sigil .rs-core { fill: var(--accent-green-deep); }

/* Radar legend + auto-caption */
.radar-legend {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.rl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.rl::before {
    content: '';
    width: 14px;
    height: 0;
    border-top-width: 3px;
    border-top-style: solid;
}
.rl-you::before { border-top-color: var(--accent-green-deep); }
.rl-target::before { border-top-style: dashed; border-top-color: var(--text-muted); }
.rl-prev::before { border-top-color: var(--accent-purple-deep); }
.radar-caption {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    margin: 0.7rem auto 0;
    max-width: 30rem;
}
.radar-caption strong { color: var(--text-primary); }
.radar-hint {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    margin: 0.35rem auto 0;
    letter-spacing: 0.01em;
}

/* Shared small band pill (best lines, stability, landing chips) */
.bandpill {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.18rem 0.5rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.bandpill-outstanding { background: color-mix(in srgb, var(--accent-green) 45%, #fff); color: #14532d; }
.bandpill-solid { background: color-mix(in srgb, var(--accent-green) 28%, #fff); color: #166534; }
.bandpill-borderline { background: color-mix(in srgb, #F6C453 40%, #fff); color: #7c5e00; }
.bandpill-poor { background: color-mix(in srgb, #E07A3F 22%, #fff); color: #9a3412; }
.bandpill-cannot_determine { background: var(--bg-soft); color: var(--text-light); }

@media (prefers-reduced-motion: reduce) {
    .radar-you, .radar-vertex, .radar-field { animation: none; }
    .radar-tip, .radar-spoke, .radar-vertex { transition: none; }
}