/* ============================================================
   MIND MAP
   The pill toolbar, zoom pill, tooltips and shortcut sheet are shared with the whiteboard (whiteboard.css).
   Topic classes use the mx- prefix so they don't meet the older mm- rules in app.css.
   ============================================================ */

.mm-host { cursor: default; }
.mm-host:focus-visible { box-shadow: none; }
.mm-host[data-pan="1"] .mm-svg { cursor: grabbing; }
.mm-host[data-drag="1"] .mm-svg { cursor: grabbing; }

/* Branch colours in the toolbar */
.mm-colors { gap: 5px; padding-left: 0.5rem; padding-right: 0.5rem; }
.mm-toolbar .mm-colors > .swatch {
    position: relative;
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16) !important;
    cursor: pointer;
    transition: transform 0.1s;
}
.mm-toolbar .mm-colors > .swatch:hover:not(:disabled) { background: var(--swatch) !important; transform: scale(1.15); }
.mm-toolbar .mm-colors > .swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px #ffffff, 0 0 0 4px #0b111a !important; }

/* Topics */
.mx-node { cursor: pointer; transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.26s ease; }
.mx-node.selected .mx-shape, .mx-node.selected .mx-text { cursor: text; }
.mx-node.away { pointer-events: none; }
.mx-node.dragging { transition: none; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(16, 24, 40, 0.3)); }
.mx-node.dragging .mx-add, .mx-node.dragging .mx-toggle, .mx-node.editing .mx-add, .mx-node.editing .mx-toggle { display: none; }
.mx-shape { filter: drop-shadow(0 3px 7px rgba(16, 24, 40, 0.13)); transition: stroke-width 0.12s; }
.mx-node.root .mx-shape { filter: drop-shadow(0 10px 20px rgba(201, 162, 75, 0.42)); }
.mx-node:hover .mx-shape { filter: drop-shadow(0 6px 12px rgba(16, 24, 40, 0.2)); }
.mx-node.root:hover .mx-shape { filter: drop-shadow(0 12px 24px rgba(201, 162, 75, 0.55)); }
.mx-ring { pointer-events: none; }
.mx-text { pointer-events: none; user-select: none; }
.mx-node.drop .mx-shape { stroke: #c9a24b; stroke-width: 3.5; stroke-dasharray: 7 5; filter: drop-shadow(0 0 10px rgba(201, 162, 75, 0.7)); }
.mx-node.editing .mx-shape { stroke-dasharray: none; }

/* Connectors */
.mx-link { transition: d 0.34s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.26s ease; pointer-events: none; }

/* Affordances: add child / add sibling / collapse. They appear on hover and on the selected topic. */
.mx-add, .mx-toggle { opacity: 0; cursor: pointer; transition: opacity 0.14s; }
.mx-node:hover .mx-add, .mx-node.selected .mx-add, .mx-node:hover .mx-toggle, .mx-node.selected .mx-toggle, .mx-toggle.on { opacity: 1; }
.mx-add circle { fill: #0b111a; stroke: #ffffff; stroke-width: 1.5; transition: r 0.12s, fill 0.12s; }
.mx-add:hover circle { fill: #b08a35; r: 12; }
.mx-sibling:hover circle { r: 10.5; }
.mx-toggle circle { filter: drop-shadow(0 2px 4px rgba(16, 24, 40, 0.22)); }
.mx-toggle:hover circle { fill: #f7f3ea; }

/* In-place editor */
.mx-editor {
    position: absolute;
    z-index: 6;
    box-sizing: border-box;
    margin: 0;
    border: 2px solid #c9a24b;
    outline: none;
    resize: none;
    overflow: hidden;
    background: #ffffff;
    color: #1d1f23;
    caret-color: #0b111a;
    font-family: var(--font);
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.28), 0 10px 24px -10px rgba(16, 24, 40, 0.4);
}
.mx-editor::placeholder { color: #9aa1ab; }
.mx-editor-one { font-weight: 700; }
.mx-editor-root { background: #c9a24b; color: #0b111a; border-color: #0b111a; font-family: var(--serif); font-weight: 400; letter-spacing: 0.03em; }
.mx-editor-root::placeholder { color: rgba(11, 17, 26, 0.5); }

@media (max-width: 760px) {
    .mm-colors { flex: none; }
}