/* Focus Immersion — Radical Cluster Map (/kanji).
   Page-scoped; relies on shared tokens in /styles.css
   (--ink, --cream, --gold, fonts). Pairs with radmap.js. */

.radmap-section { margin: 0 0 3.5rem; }

.radmap-head {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  padding-bottom: 0.7rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(236, 227, 211, 0.1);
}
.radmap-head h2 {
  margin: 0; font-family: var(--ff-disp, "Fraunces", Georgia, serif);
  font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cream);
}
.radmap-head .radmap-jp {
  font-family: "Noto Serif JP", var(--ff-disp), serif;
  color: var(--gold); font-size: 1.1rem;
}
.radmap-intro {
  max-width: 46rem; margin: 0.4rem 0 1rem;
  color: var(--cream); opacity: 0.62;
  font-size: 0.92rem; line-height: 1.6;
}

/* frame that holds the SVG; keeps a stable aspect on resize */
.radmap-frame {
  position: relative;
  border: 1px solid rgba(236, 227, 211, 0.12);
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(196, 163, 92, 0.05), transparent 60%),
    rgba(236, 227, 211, 0.015);
  overflow: hidden;
}
.radmap-svg {
  display: block; width: 100%; height: auto;
  touch-action: manipulation;
  font-family: var(--ff-disp, "Fraunces", "Noto Serif JP", Georgia, serif);
}

/* ---- cluster nodes ------------------------------------------------------ */
.radmap-node { cursor: pointer; }
.radmap-node:focus { outline: none; }

.radmap-disc {
  fill: rgba(236, 227, 211, 0.035);
  stroke: rgba(236, 227, 211, 0.22);
  stroke-width: 1;
  transition: fill 0.18s ease, stroke 0.18s ease;
}
.radmap-node.is-other .radmap-disc {
  stroke-dasharray: 3 4;
  stroke: rgba(236, 227, 211, 0.3);
}
.radmap-glyph {
  fill: var(--cream);
  font-family: "Noto Serif JP", var(--ff-disp), serif;
  pointer-events: none; opacity: 0.9;
  transition: fill 0.18s ease;
}
.radmap-meaning {
  fill: var(--cream); opacity: 0.5;
  font-family: var(--ff-mono, "DM Mono", monospace);
  font-size: 10px; letter-spacing: 0.02em;
  pointer-events: none;
}
.radmap-count {
  fill: var(--gold); opacity: 0.72;
  font-family: var(--ff-mono, "DM Mono", monospace);
  font-size: 9.5px; letter-spacing: 0.04em;
  pointer-events: none;
}

.radmap-node:hover .radmap-disc,
.radmap-node:focus-visible .radmap-disc {
  fill: rgba(196, 163, 92, 0.1);
  stroke: var(--gold);
}
.radmap-node:hover .radmap-glyph,
.radmap-node:focus-visible .radmap-glyph { fill: var(--gold); opacity: 1; }

.radmap-node.is-active .radmap-disc {
  fill: rgba(196, 163, 92, 0.14);
  stroke: var(--gold); stroke-width: 1.5;
}
.radmap-node.is-active .radmap-glyph { fill: var(--gold); opacity: 1; }

.radmap-svg.has-ring .radmap-node.is-mute {
  opacity: 0.22;
  transition: opacity 0.25s ease;
}
.radmap-node { transition: opacity 0.25s ease; }

/* ---- ring (fanned kanji) ------------------------------------------------ */
.radmap-halo {
  fill: none;
  stroke: rgba(196, 163, 92, 0.28);
  stroke-width: 1; stroke-dasharray: 2 5;
}
.radmap-kanji {
  fill: var(--cream);
  font-family: "Noto Serif JP", var(--ff-disp), serif;
  cursor: pointer; opacity: 0.92;
  transition: fill 0.14s ease, opacity 0.14s ease;
  paint-order: stroke;
  stroke: var(--ink); stroke-width: 3px;   /* halo so glyphs read over discs */
}
.radmap-kanji:hover, .radmap-kanji:focus-visible {
  fill: var(--gold); opacity: 1; outline: none;
}

/* simple entrance for the ring */
.radmap-ring { animation: radmap-fade 0.28s ease both; }
@keyframes radmap-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- caption / status --------------------------------------------------- */
.radmap-status {
  margin: 0.7rem 0 0;
  font-family: var(--ff-mono, "DM Mono", monospace);
  font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--cream); opacity: 0.5;
}
.radmap-legend {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin-top: 0.6rem;
  font-family: var(--ff-mono, "DM Mono", monospace);
  font-size: 0.68rem; color: var(--cream); opacity: 0.45;
}
.radmap-legend b { color: var(--gold); font-weight: 500; opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .radmap-ring { animation: none; }
  .radmap-node, .radmap-disc, .radmap-glyph, .radmap-kanji { transition: none; }
}

@media (max-width: 640px) {
  .radmap-meaning { display: none; }   /* declutter small screens */
  .radmap-intro { font-size: 0.86rem; }
}