/* ==========================================================================
   SKILLS-VIZ.CSS — premium skill visualization: view switcher, radar chart,
   technology constellation. Layered on top of the existing bar-chart
   skill-cards (js/skills-viz.js), same panel/bracket-frame/mono language
   as the rest of the HUD, same accent-color system.
   ========================================================================== */

.skills-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin:20px 0 28px;
}
.skills-viewswitch{ display:flex; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; }
.skills-view-btn{
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim);
  background:none; border:none; padding:7px 16px; border-radius:var(--radius-full);
  cursor:pointer; transition:all .2s ease;
}
.skills-view-btn:hover{ color:var(--text); }
.skills-view-btn.is-active{ background:var(--accent); color:var(--void); font-weight:600; }

.skills-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.skills-filter-chip{
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:7px 14px; cursor:pointer; transition:all .2s ease;
}
.skills-filter-chip:hover{ border-color:var(--accent); color:var(--text); }
.skills-filter-chip.is-active{ border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.1); }

/* ---- radar view ---- */
.skills-radar-view{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center;
  padding:28px; min-height:380px;
}
.skills-radar-chart{ display:flex; justify-content:center; }
.radar-svg{ width:100%; max-width:380px; overflow:visible; }
.radar-ring{ fill:none; stroke:var(--border-soft); stroke-width:1; }
.radar-axis{ stroke:var(--border-soft); stroke-width:1; }
.radar-label{ font-family:var(--font-mono); font-size:9px; fill:var(--text-mute); text-transform:uppercase; letter-spacing:.03em; }
.radar-fill{
  fill:rgba(var(--accent-rgb),.16); stroke:var(--accent); stroke-width:2;
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.4));
  transition:fill .4s ease, stroke .4s ease;
}
.radar-svg.is-animated .radar-fill{ animation:radar-pulse 4s ease-in-out infinite; }
@keyframes radar-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.82; } }
.radar-dot{
  fill:var(--dot-color, var(--accent)); stroke:var(--void); stroke-width:1.5;
  cursor:pointer; transition:r .2s ease;
}
.radar-dot:hover, .radar-dot:focus{ r:7.5; outline:none; }

.skills-radar-detail{
  padding:18px 20px; background:var(--panel-2); border:1px solid var(--border-soft);
  border-radius:var(--radius-m); min-height:130px; display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.skills-radar-hint{ color:var(--text-mute); font-size:.82rem; }
.skills-radar-detail-name{ font-size:1.1rem; font-weight:600; }
.skills-radar-detail-meta{ font-size:.76rem; color:var(--text-mute); }

/* ---- constellation view ---- */
.skills-constellation-view{ padding:28px; min-height:420px; display:flex; justify-content:center; position:relative; }
.skills-constellation{ width:100%; max-width:480px; position:relative; }
.const-svg{ width:100%; overflow:visible; }
.const-hub{ fill:var(--hub-color); filter:drop-shadow(0 0 8px var(--hub-color)); }
.const-hub-label{ font-family:var(--font-mono); font-size:11px; fill:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.const-line{ stroke:rgba(var(--line-color), .35); stroke-width:1; }
.const-node{ cursor:pointer; }
.const-node-glow{ fill:rgba(var(--node-color), .18); transition:all .25s ease; }
.const-node.is-active .const-node-glow, .const-node:hover .const-node-glow{ fill:rgba(var(--node-color), .38); }
.const-node-core{
  fill:var(--node-color);
  filter:drop-shadow(0 0 4px var(--node-color));
  transition:transform .25s var(--ease-spring);
  transform-box:fill-box; transform-origin:center;
}
.const-node.is-active .const-node-core, .const-node:hover .const-node-core{ transform:scale(1.35); }
.const-node-label{ font-family:var(--font-mono); font-size:9px; fill:var(--text-mute); }
.const-tooltip{
  position:absolute; top:8px; right:8px; background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--radius-s); padding:10px 14px; font-size:.82rem; color:var(--text);
  box-shadow:var(--shadow-m); pointer-events:none; max-width:200px;
}
.const-tooltip[hidden]{ display:none; }

@media (max-width:768px){
  .skills-radar-view{ grid-template-columns:1fr; padding:22px 16px; }
  .skills-constellation-view{ padding:20px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .radar-svg.is-animated .radar-fill{ animation:none; }
  .const-node-core{ transition:none; }
}