/* mindmap: radial research-landscape */
.mindmap-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 60%),
    var(--bg-sunken);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mindmap-svg {
  display: block;
  width: 100%;
  aspect-ratio: 1420 / 900;
  height: auto;
  user-select: none;
  touch-action: none;
  cursor: grab;
}
.mindmap-svg.is-grabbing { cursor: grabbing; }

.mm-edge {
  fill: none;
  stroke-width: 1.4;
  opacity: 0.5;
  transition: opacity var(--t-med) var(--ease), stroke-width var(--t-fast);
}
.mm-edge--leaf { stroke-width: 1; opacity: 0.35; }
.mm-edge--synth { stroke-dasharray: 5 5; stroke-width: 2; opacity: 0.85; }

.mm-node { cursor: pointer; }
.mm-node circle {
  transition: r var(--t-fast) var(--ease), filter var(--t-fast);
}
.mm-node:hover circle, .mm-node:focus-visible circle { filter: brightness(1.35); }
.mm-node:focus { outline: none; }
.mm-node:focus-visible circle { stroke: var(--fg); stroke-width: 2; }

.mm-label {
  fill: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
  pointer-events: none;
}
.mm-sublabel { fill: var(--fg-soft); font-size: 10px; pointer-events: none; }
.mm-leaf-label {
  fill: var(--fg-soft);
  font-size: 10.5px;
  pointer-events: none;
}
.mm-leaf-year { fill: var(--fg-mute); font-size: 9px; }

.mm-center-title { fill: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.mm-center-sub { fill: var(--accent); font-size: 10.5px; letter-spacing: 0.06em; }

.mm-branch, .mm-leafgroup { transition: opacity var(--t-med) var(--ease); }
.mm-leafgroup[data-open="false"] { opacity: 0; pointer-events: none; }
.mm-leafgroup[data-open="true"] { opacity: 1; }

.mm-dim { opacity: 0.18 !important; }

/* detail card overlay */
.mm-card {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  max-width: 480px;
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--sp-3);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
}
.mm-card[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.mm-card__close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  background: none;
  border: none;
  color: var(--fg-mute);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.mm-card__close:hover { color: var(--fg); }
.mm-card h4 { font-size: 0.98rem; color: var(--fg); padding-right: 1.4rem; }
.mm-card .mm-card__meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); margin-bottom: 0.3rem; display: block; }
.mm-card p { font-size: var(--fs-small); margin-top: 0.35rem; }

/* controls */
.mm-controls {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  gap: var(--sp-1);
}
.mm-btn {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.mm-btn:hover { border-color: var(--accent); color: var(--accent); }

.mm-legend {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--fg-soft);
}
.mm-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.mm-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* step nav arrows: theme-inverted, fade/slide with zoom state */
.mm-nav {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 5;
  opacity: 0.4;
  transition: opacity 0.5s var(--ease);
}
.mm-nav[data-zoomed="true"] { opacity: 1; }
.mm-nav__btn {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  border: none;
  background: var(--fg);
  color: var(--bg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-bottom: 0.2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(6px) scale(0.92);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), background 0.2s;
}
.mm-nav[data-zoomed="true"] .mm-nav__btn { transform: none; }
.mm-nav__btn:hover { transform: translateY(-2px) scale(1.06); background: var(--accent); color: #fff; }
.mm-nav[data-zoomed="false"] .mm-nav__btn:hover { transform: translateY(2px) scale(1.02); }

.mm-hint {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--fg-mute);
  pointer-events: none;
}

@media (max-width: 700px) {
  .mm-legend, .mm-hint { display: none; }
  .mm-card { left: var(--sp-2); right: var(--sp-2); bottom: 4.2rem; }
}