/* Mind map canvas (assets/js/mindmap.js) */
.mm {
  position: relative; height: 100%; min-height: 360px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.mm-host { height: min(68vh, 640px); }
.mm-viewport {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; outline: none; touch-action: none;
  background-image: radial-gradient(circle, var(--line-strong) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
}
.mm.has-bar .mm-viewport { top: 44px; }
.mm.recall .mm-bar { display: none; }
.mm.recall.has-bar .mm-viewport { top: 0; }
.mm-viewport.bg-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }
.mm-viewport.bg-lined { background-image: linear-gradient(transparent calc(100% - 1px), rgba(47, 109, 181, 0.22) calc(100% - 1px)); }
.mm-viewport.bg-plain { background-image: none; }
.mm-viewport.panning { cursor: grabbing; }
.mm-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.mm-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.mm-lines { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.mm-line { fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; pointer-events: none; }
.mm-line.dashed { stroke-dasharray: 7 6; }
.mm-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.mm-hit:hover + .mm-label, .mm-hit:hover { stroke: rgba(201, 162, 39, 0.25); }
.mm-label {
  font: 600 12px/1 var(--font); fill: var(--ink-soft); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px; stroke-linejoin: round; cursor: pointer; pointer-events: all;
}
.mm-anim .mm-node { transition: left 0.35s var(--ease), top 0.35s var(--ease); }
.mm-line.temp { stroke: var(--brand); stroke-dasharray: 6 5; pointer-events: none; }

.mm-node {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px 12px; border: 2px solid; border-radius: 14px; font-weight: 600; line-height: 1.25;
  box-shadow: 0 1px 2px rgba(22, 30, 20, 0.08), 0 4px 12px rgba(22, 30, 20, 0.07);
  cursor: grab; user-select: none; overflow-wrap: anywhere; z-index: 2;
  transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.mm-node.root { font-weight: 700; border-radius: 18px; box-shadow: 0 8px 22px rgba(22, 30, 20, 0.22); }
.mm-node.bold { font-weight: 800; }
.mm-node.shape-rect { border-radius: 3px; }
.mm-node.shape-pill { border-radius: 999px; padding-inline: 18px; }
.mm-node.shape-ellipse { border-radius: 50%; padding: 12px 22px; }
.mm-node.shape-note { border-radius: 2px; border-width: 1px; box-shadow: 1px 2px 0 rgba(60, 52, 28, 0.25), 3px 6px 10px -6px rgba(60, 52, 28, 0.5); }
.mm-node.shape-note::after { content: ""; position: absolute; right: -1px; bottom: -1px; border: 7px solid; border-color: transparent rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.14) transparent; }
.mm-marker { position: absolute; left: -9px; top: -11px; font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); pointer-events: none; }
.mm-fold {
  position: absolute; right: -13px; top: 50%; transform: translateY(-50%); z-index: 3;
  min-width: 22px; height: 20px; padding: 0 4px; border-radius: 10px; border: 1.5px solid currentColor;
  background: var(--surface); color: var(--ink-soft); font: 700 11px/1 var(--font); cursor: pointer;
}
.mm-fold.left { right: auto; left: -13px; }
.mm-node .mm-fold { opacity: 0.85; }
.mm-node:hover .mm-fold { opacity: 1; }
.mm-node:hover { box-shadow: 0 6px 18px rgba(22, 30, 20, 0.16); }
.mm-node.dragging { cursor: grabbing; z-index: 5; transform: scale(1.02); box-shadow: 0 10px 26px rgba(22, 30, 20, 0.22); }
.mm-node.selected { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand); z-index: 4; }
.mm-node.editing { cursor: text; z-index: 6; }
.mm-text { outline: none; min-width: 1ch; }
.mm-node.editing .mm-text { cursor: text; user-select: text; }
.mm-handle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; opacity: 0; transition: opacity 0.15s; }
.mm-connect { right: -8px; top: 50%; transform: translateY(-50%); cursor: crosshair; }
.mm-resize { right: -6px; bottom: -6px; border-radius: 4px; cursor: nwse-resize; width: 12px; height: 12px; }
.mm-del {
  position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: #a5432f; color: #fff; font: 700 14px/1 var(--font); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.15s;
}
.mm-node:hover .mm-handle, .mm-node.selected .mm-handle, .mm-node:hover .mm-del, .mm-node.selected .mm-del { opacity: 1; }
.mm-node.root .mm-del { display: none; }

/* Recall mode: hidden labels you reveal one by one */
.mm.recall .mm-node.hidden-label { background: var(--surface-3) !important; color: var(--ink-muted) !important; border-style: dashed; cursor: pointer; font-size: 1.2em !important; }
.mm.recall .mm-node.hidden-label:hover { border-style: solid; transform: scale(1.04); }
.mm-node.just-revealed { animation: mm-pop 0.35s var(--ease); }
@keyframes mm-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }

.mm-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.mm-zbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; }
.mm-zbtn:hover { background: var(--surface-3); color: var(--ink); }
.mm-zlabel { font-size: 0.68rem; font-weight: 600; color: var(--ink-muted); padding: 2px 0; }
.mm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); pointer-events: none; text-align: center; padding: 20px; }
.mm-empty ion-icon { font-size: 2.4rem; color: var(--brand); opacity: 0.7; }
.mm-empty strong { color: var(--ink); }
.mm-menu .danger { color: var(--bad); }
.mm-menu .danger ion-icon { color: var(--bad); }

/* Dark mode: keep node fills readable */
html[data-theme="dark"] .mm-node:not(.root) { filter: brightness(0.92); }

/* Formatting bar */
.mm-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 11;
  display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
  background: #e9e0c4; border-bottom: 1px solid #8f8763; color: #1b2a25;
}
html[data-theme="dark"] .mm-bar { background: #c9bf9a; }
.mm-group { display: inline-flex; align-items: center; gap: 3px; }
.mm-sep { width: 1px; height: 26px; background: #8f8763; box-shadow: 1px 0 0 #fff; flex-shrink: 0; }
.mm-bbtn {
  min-width: 30px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: #d9cfae; color: #1b2a25; border: 1px solid; border-color: #fff #4d4630 #4d4630 #fff; border-radius: 2px;
  box-shadow: inset -1px -1px 0 #8f8763; cursor: pointer; font-size: 0.95rem;
}
.mm-bbtn:hover:not(:disabled) { background: #e6ddc0; }
.mm-bbtn[aria-pressed="true"], .mm-bbtn:active:not(:disabled) { background: #fffdf6; border-color: #4d4630 #fff #fff #4d4630; box-shadow: inset 1px 1px 0 #8f8763; }
.mm-bbtn:disabled { opacity: 0.45; cursor: default; }
.mm-t { font: 600 0.82rem/1 var(--font); display: inline-flex; align-items: center; gap: 3px; }
.mm-t.dash { letter-spacing: 0.1em; }
.mm-chip { width: 16px; height: 16px; border: 1px solid #4d4630; display: inline-grid; place-items: center; font: 800 0.8rem/1 var(--font); }
.mm-chip.ink { border: 0; text-decoration: underline 3px; }
.mm-chip.accent { border-radius: 50%; }
.mm-bselect { height: 28px; max-width: 132px; padding: 0 4px; border: 1px solid #8f8763; border-radius: 2px; background: #fffdf6; color: #1b2a25; font: 0.8rem var(--font); flex-shrink: 0; }
.mm-bselect:disabled { opacity: 0.45; }
.mm-pop {
  position: absolute; z-index: 20; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: 4px 4px 0 rgba(7, 21, 18, 0.18);
}
.mm-pop.link { width: 250px; }
.mm-pop-title { font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.mm-pop-row { display: flex; gap: 6px; justify-content: space-between; }
.mm-pop .danger { color: var(--bad); }
.mm-swatches { display: grid; grid-template-columns: repeat(4, 26px); gap: 5px; align-items: center; }
.mm-swatch { width: 26px; height: 22px; padding: 0; background: var(--c); border: 1px solid; border-color: #4d4630 #fff #fff #4d4630; cursor: pointer; }
.mm-swatch.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.mm-custom { width: 26px; height: 24px; padding: 0; border: 1px solid #8f8763; background: none; cursor: pointer; }