/* /mind-map-maker/ page styles. Built from /assets/polyatic.css tokens only (no new fonts or theme colours).
   Branch colours are the visitor's own content (Okabe-Ito set), set on the SVG by app.js as attributes. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.mm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mm-head .sub{margin-bottom:1rem}
@media(max-width:520px){.mm-head h1{font-size:1.5rem;margin-bottom:0.125rem}.mm-head .sub{font-size:0.875rem;margin-bottom:0.625rem}}
.mm-page .k{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* layout: phone = map, outline, side; desktop = outline + side on the left, the map large on the right */
.mm-duo{display:grid;gap:0.875rem;align-items:start;grid-template-areas:"map" "outline" "side"}
.mm-mapcard{grid-area:map}.mm-outcard{grid-area:outline}.mm-side{grid-area:side}
@media(min-width:920px){.mm-duo{grid-template-columns:minmax(17rem,21rem) minmax(0,1fr);grid-template-areas:"outline map" "side map";grid-template-rows:auto 1fr;gap:1.25rem 1.5rem}}
.mm-mapcard,.mm-outcard,.mm-side{min-width:0}
.mm-outcard,.mm-side{display:grid;gap:0.625rem;align-content:start}
@media(max-width:520px){.mm-mapcard,.mm-outcard,.mm-side{padding:0.75rem}}
@media(min-width:920px){.mm-mapcard{position:sticky;top:1rem}}

.mm-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.mm-help:empty{display:none}
.mm-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.mm-row .btn{flex:1 1 auto}
.mm-row select{flex:1 1 7rem;min-width:0}
.mm-inline{font-size:0.8125rem;color:var(--muted)}
.mm-side .field>.k{display:block;margin-bottom:0.375rem}
.mm-side .field{display:grid;gap:0.5rem}
.mm-side .field>.k{margin-bottom:0}
.mm-modes{margin-bottom:0}
.mm-filebtn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#importfile:focus-visible+.mm-filebtn,.mm-filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.mm-row input[type=text]{flex:1 1 12rem;min-width:0;font-family:var(--mono);font-size:0.75rem}

.mm-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.mm-notice[hidden]{display:none}
.mm-notice .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.mm-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}

/* toolbar */
.mm-tools{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;margin-bottom:0.5rem}
.mm-tools .chip{padding:0.375rem 0.625rem;font-size:0.8125rem;min-width:2.25rem}
.mm-tools .chip:disabled{opacity:.45;cursor:default}
.mm-grow{flex:1 1 0}
@media(max-width:520px){.mm-tools{flex-wrap:nowrap;gap:0.3125rem}.mm-tools .chip{padding:0.375rem 0.5rem}.mm-tools .mm-zoom{display:none}}

/* the map */
.mm-stage{position:relative;height:17.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);overflow:hidden}
@media(min-width:521px){.mm-stage{height:24rem}}
@media(min-width:920px){.mm-stage{height:min(38rem,calc(100vh - 13rem))}}
.mm-svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;font-family:var(--sans)}
.mm-svg.is-dragging{cursor:grabbing}
.mm-maphelp{margin-top:0.375rem}
.mm-edge{fill:none;stroke-linecap:round}
.mm-node{cursor:pointer;outline:none}
.mm-shape{stroke-width:2}
.mm-dn .mm-shape{fill:var(--surface)}
.mm-root .mm-shape{fill:var(--ink);stroke:none}
.mm-root .mm-text{fill:var(--bg);font-weight:600}
.mm-d1 .mm-shape{stroke-width:0}
.mm-d1 .mm-text{font-weight:500}
.mm-line .mm-shape{fill:transparent;stroke:none}
.mm-uline{stroke-width:2.5;stroke-linecap:round;fill:none}
.mm-text{text-anchor:middle;pointer-events:none}
.mm-line .mm-text,.mm-dn .mm-text{fill:var(--ink)}
.mm-node.is-sel .mm-shape,.mm-node:focus-visible .mm-shape{stroke:var(--accent);stroke-width:3}
.mm-root.is-sel .mm-shape,.mm-root:focus-visible .mm-shape{stroke:var(--accent);stroke-width:3}
.mm-node.is-drop .mm-shape{stroke:var(--accent);stroke-width:4;stroke-dasharray:5 3}
.mm-node.is-dragging{opacity:.75}
.mm-toggle{cursor:pointer}
.mm-toggle circle{fill:var(--surface);stroke-width:1.5}
.mm-toggle.is-folded circle{fill:var(--accent-soft)}
.mm-ttext{fill:var(--ink);font-size:11px;text-anchor:middle;pointer-events:none;font-family:var(--mono)}

/* node editor */
.mm-editor{display:grid;gap:0.5rem;margin-top:0.625rem;padding:0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface)}
.mm-editor[hidden]{display:none}
.mm-editor .field[hidden]{display:none}
.mm-editor input[type=text],.mm-editor textarea{width:100%}
.mm-editor textarea{min-height:2.75rem;resize:vertical;font-family:var(--sans);font-size:0.875rem}
.mm-editor .field>.k{display:block;margin-bottom:0.25rem}
.mm-editor .chip{padding:0.375rem 0.625rem;font-size:0.8125rem}
.mm-editor .chip:disabled{opacity:.45;cursor:default}
.mm-editor .mm-row .btn{flex:0 0 auto;margin-left:auto;min-height:2.25rem;padding:0.375rem 1rem}
.mm-swatches{display:flex;flex-wrap:wrap;gap:0.375rem}
.mm-swatch{width:2.25rem;height:2.25rem;padding:0.25rem;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mm-swatch svg{width:100%;height:100%;display:block}
.mm-auto{width:auto;padding:0 0.5rem;font:inherit;font-size:0.75rem;color:var(--ink)}
.mm-swatch[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:1px}

/* outline */
.mm-outhead{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.375rem}
.mm-ind{display:flex;gap:0.375rem}
.mm-ind .chip{padding:0.3125rem 0.625rem;font-size:0.8125rem}
.mm-outcard textarea{width:100%;height:7.5rem;min-height:5rem;resize:vertical;font-family:var(--mono);font-size:0.8125rem;line-height:1.5;tab-size:2;white-space:pre;overflow-x:auto}
@media(min-width:920px){.mm-outcard textarea{height:20rem}}
.mm-pre{font-family:var(--mono);font-size:0.8125rem;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.75rem 1rem;overflow-x:auto;max-width:100%}
.explainer code{font-family:var(--mono);font-size:0.8125rem}
@media (prefers-reduced-motion:reduce){.mm-node{transition:none}}