/* ============================================================
   § 04 · Expertise — interactive neural skills map
   Built on the site's existing tokens (--gold, --violet, --card…)
   plus two extra jewel-tone accents for the 4-identity legend:
   Programmer = topaz (--gold) · Founder = amethyst (--violet)
   Researcher = emerald (--map-r) · Languages = garnet (--map-l)
   ============================================================ */
:root {
  --map-r: #4f9b7c;
  --map-r-deep: #2f7a58;
  --map-l: #c9788a;
  --map-l-deep: #a15267;
  --map-c: var(--gold);
}
[data-theme="light"] {
  --map-r: #2f7a58;
  --map-r-deep: #1f5c40;
  --map-l: #a15267;
  --map-l-deep: #7c3a4d;
  --map-c: var(--gold);
}

.map-panel {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- toolbar ---------- */
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.map-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-family: "Sora", sans-serif; font-size: 0.8rem;
  background: transparent; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.map-chip:hover { color: var(--text); border-color: var(--gold); }
.map-chip.active { color: var(--text); background: var(--card-2); border-color: var(--gold); }
.map-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.map-dot[data-dot="p"] { background: var(--gold); }
.map-dot[data-dot="f"] { background: var(--violet); }
.map-dot[data-dot="r"] { background: var(--map-r); }
.map-dot[data-dot="l"] { background: var(--map-l); }

.map-search-wrap { position: relative; width: 220px; max-width: 100%; }
.map-search {
  width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card-2); color: var(--text); font-family: "Sora", sans-serif; font-size: 0.82rem;
  outline: none; transition: border-color .2s;
}
.map-search::placeholder { color: var(--muted); }
.map-search:focus { border-color: var(--gold); }
.map-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  max-height: 260px; overflow-y: auto; display: none;
  box-shadow: var(--shadow);
}
.map-suggest.show { display: block; }
.map-suggest .opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-family: "Sora", sans-serif; font-size: 0.82rem; color: var(--muted);
  cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.map-suggest .opt:last-child { border-bottom: none; }
.map-suggest .opt:hover, .map-suggest .opt.active { color: var(--text); background: color-mix(in srgb, var(--card) 60%, transparent); }
.map-suggest .opt .grp {
  font-family: "Spline Sans Mono", monospace; font-size: 0.6rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); flex: none;
}

/* ---------- stage ---------- */
.map-stage { position: relative; width: 100%; height: clamp(460px, 62vw, 680px); }
.map-stage svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-stage svg.grabbing { cursor: grabbing; }

.map-edge { fill: none; stroke: var(--line); stroke-width: 1; transition: opacity .3s, stroke .3s, stroke-width .3s; }
.map-edge.dim { opacity: .06; }
.map-edge.on { stroke-width: 2.2; opacity: 1; filter: url(#map-glow); }
.map-neuron { cursor: pointer; }
.map-halo, .map-ncore { transition: opacity .3s; }
.map-nlabel {
  font-family: "Sora", sans-serif; fill: var(--muted); paint-order: stroke;
  stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; pointer-events: none;
  transition: fill .25s, opacity .25s;
}
.map-neuron:hover .map-nlabel { fill: var(--text); }
.map-neuron.sel .map-nlabel, .map-neuron.nbr .map-nlabel { fill: var(--text); font-weight: 500; }
.map-neuron.dim .map-halo, .map-neuron.dim .map-ncore { opacity: .08; }
.map-neuron.dim .map-nlabel { opacity: .12; }
.map-neuron.sel .map-ncore, .map-neuron.sel .map-halo { filter: url(#map-glow); }
.map-neuron:hover .map-ncore { filter: url(#map-glow); }
.map-contour { fill: none; stroke: var(--line); stroke-width: 1.3; opacity: .55; }
.map-ring { fill: none; stroke-width: 1.4; opacity: 0; transition: opacity .25s; }
.map-neuron:hover .map-ring { opacity: .5; }
.map-neuron:hover .map-halo { opacity: .3; }
.map-corepulse { transform-box: fill-box; transform-origin: center; }

@keyframes mapBreathe { 0% { transform: scale(1); opacity: .4; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
@keyframes mapHalo { 0%, 100% { opacity: .8; } 50% { opacity: .48; } }
@keyframes mapFlow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: no-preference) {
  .map-halo { animation: mapHalo 3.8s ease-in-out infinite; }
  .map-edge.on { stroke-dasharray: 5 6; animation: mapFlow 1s linear infinite; }
  .map-corepulse { animation: mapBreathe 4.4s ease-out infinite; }
}

.map-controls { position: absolute; top: 14px; right: 14px; display: flex; gap: 7px; z-index: 20; }
.map-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 75%, transparent); backdrop-filter: blur(10px);
  color: var(--text); font-family: "Fraunces", serif; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s, transform .1s;
}
.map-btn:hover { border-color: var(--gold); color: var(--gold); }
.map-btn:active { transform: scale(.92); }
.map-btn-wide { width: auto; padding: 0 13px; font-family: "Sora", sans-serif; font-size: 0.75rem; }

.map-stats {
  position: absolute; top: 14px; left: 14px; z-index: 15;
  font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 75%, transparent); backdrop-filter: blur(10px);
}

.map-info {
  position: absolute; bottom: 14px; left: 14px; width: 290px; max-width: calc(100% - 28px);
  background: color-mix(in srgb, var(--card-2) 92%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s; z-index: 20;
}
.map-info.show { opacity: 1; transform: none; pointer-events: auto; }
.map-tag {
  display: inline-block; font-family: "Spline Sans Mono", monospace; font-size: 0.62rem;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.map-info h3 { font-family: "Fraunces", serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; padding-right: 20px; }
.map-cnt { font-size: 0.72rem; color: var(--muted); margin-bottom: 12px; }
.map-links { display: flex; flex-wrap: wrap; gap: 6px; }
.map-links .chip { font-size: 0.72rem; padding: 5px 10px; }
.map-iclose {
  position: absolute; top: 12px; right: 12px; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px;
}
.map-iclose:hover { color: var(--gold); }

.map-hint {
  position: absolute; bottom: 14px; right: 14px; z-index: 15;
  font-family: "Sora", sans-serif; font-size: 0.68rem; color: var(--muted); text-align: right;
  line-height: 1.6; max-width: 200px;
}

@media (max-width: 720px) {
  .map-toolbar { padding: 14px 16px; }
  .map-search-wrap { width: 100%; }
  .map-hint { display: none; }
  .map-info { width: calc(100% - 28px); }
}