/* ============================================================
   mindmaps — sketchy design system
   The app and the component book (book.html) both import this.
   Fonts are loaded by the page:
     Patrick Hand (hand), Caveat (script) — Google Fonts
   ============================================================ */

:root {
  /* -- color tokens -- */
  --mm-paper: #f8f3e7;
  --mm-card: #fffdf6;
  --mm-ink: #3a3532;
  --mm-ink-soft: #6f6760;
  --mm-ink-faint: #a39a90;
  --mm-yellow: #ffe66d;
  --mm-pink: #ffd0df;
  --mm-blue: #cdeafd;
  --mm-green: #d9f4c0;
  --mm-marker: #ff8a5c;   /* accent: focus, hints, education */
  --mm-ok: #7bb661;

  /* -- typography -- */
  --mm-font-hand: "Patrick Hand", cursive;
  --mm-font-script: "Caveat", cursive;

  /* -- hand-drawn border radii ("wobbles") -- */
  --mm-wobble-1: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --mm-wobble-2: 225px 25px 255px 25px / 25px 255px 25px 225px;
  --mm-wobble-3: 100px 8px 100px 8px / 8px 100px 8px 100px;
  --mm-wobble-4: 100px 12px 100px 12px / 12px 100px 12px 100px;

  /* -- depth -- */
  --mm-shadow: 2.5px 3.5px 0 rgba(58, 53, 50, .16);
  --mm-shadow-lift: 3.5px 5px 0 rgba(58, 53, 50, .2);
  --mm-shadow-drag: 7px 10px 0 rgba(58, 53, 50, .14);
}

/* ============================================================
   canvas surface
   ============================================================ */

.mm-canvas {
  position: fixed;
  inset: 0;
  background: var(--mm-paper);
}
.mm-canvas::before {
  /* paper grain */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mm-canvas::after {
  /* vignette */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1200px 800px at 50% 40%, transparent 60%, rgba(58, 53, 50, .07));
}

/* ============================================================
   node
   Base class is layout-agnostic (the book shows nodes inline).
   Add .is-placed for absolute canvas positioning via left/top.
   Custom props: --r (rotation), --s (scale, set by states)
   ============================================================ */

.mm-node {
  position: relative;
  display: inline-block;
  transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  padding: 9px 20px 7px;
  font-family: var(--mm-font-hand);
  font-size: 19px;
  line-height: 1.25;
  color: var(--mm-ink);
  width: max-content;
  max-width: 260px;
  /* an empty node (mid-edit) has no line box — never collapse below one line
     (1lh + vertical padding + border; border-box sizing) */
  min-height: calc(1lh + 16px + 4.4px);
  min-width: 64px;
  box-shadow: var(--mm-shadow);
  cursor: grab;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mm-node.is-placed {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1));
}

/* hierarchy variants */
.mm-node--root {
  font-family: var(--mm-font-script);
  font-size: 32px;
  font-weight: 700;
  padding: 10px 28px 8px;
  min-height: calc(1lh + 18px + 4.4px);
  min-width: 110px;
  background: var(--mm-yellow);
  border-radius: var(--mm-wobble-2);
}
.mm-node--leaf {
  font-size: 17px;
  color: var(--mm-ink-soft);
  background: transparent;
  box-shadow: none;
  border-width: 1.8px;
  border-color: rgba(58, 53, 50, .55);
  min-height: calc(1lh + 16px + 3.6px);
}

/* branch colors */
.mm-node.b-yellow { background: var(--mm-yellow); }
.mm-node.b-pink   { background: var(--mm-pink); }
.mm-node.b-blue   { background: var(--mm-blue); }
.mm-node.b-green  { background: var(--mm-green); }

/* -- states -- */

.mm-node:hover,
.mm-node.is-hover {
  --s: 1.03;
  box-shadow: var(--mm-shadow-lift);
}

/* focused: the single keyboard-active node — the node ITSELF changes:
   slightly larger, ink-heavy border, deeper shadow. No ring; orange is
   reserved for hints (keycaps) so the selection is the only bold thing. */
.mm-node.is-focused {
  --s: 1.09;
  /* thicker border simulated with a 0-spread shadow ring: changing
     border-width would shrink the content box and re-wrap the text */
  box-shadow: 0 0 0 1.3px var(--mm-ink), 5px 7px 0 rgba(58, 53, 50, .24);
}

/* selected: part of a multi-selection; calm static outline */
.mm-node.is-selected::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px dashed rgba(58, 53, 50, .45);
  border-radius: var(--mm-wobble-1);
  pointer-events: none;
}

/* editing: text input mode */
.mm-node.is-editing {
  background: #fff;
  border-color: var(--mm-marker);
  cursor: text;
}

/* placeholder while a node is empty: during editing, and on the root even
   when a stray click blurred the editor before any text was typed
   (the :has(br) case covers browsers that pad empty contenteditables) */
.mm-node.is-editing:empty::before,
.mm-node.is-editing:has(> br:only-child)::before,
.mm-node--root:empty::before {
  content: attr(data-ph);
  color: var(--mm-ink-faint);
  opacity: .75;
}

/* dragging */
.mm-node.is-dragging {
  --s: 1.05;
  --r: 1.6deg;
  box-shadow: var(--mm-shadow-drag);
  opacity: .93;
  cursor: grabbing;
}

/* collapsed-children badge, e.g. "+3" */
.mm-badge {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  min-width: 27px;
  height: 27px;
  padding: 1px 5px 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--mm-card);
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 1.5px 2px 0 rgba(58, 53, 50, .2);
  font-family: var(--mm-font-hand);
  font-size: 14px;
  color: var(--mm-ink);
}

/* small helper text under a node ("just start typing to edit") */
.mm-node-note {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  transform: translateX(-50%) rotate(-1.5deg);
  font-family: var(--mm-font-script);
  font-size: 17px;
  color: var(--mm-ink-faint);
  white-space: nowrap;
  pointer-events: none;
}

/* blinking caret for .is-editing (the app renders a real caret;
   this is for demos/placeholders) */
.mm-caret {
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--mm-marker);
  animation: mm-blink 1.1s steps(1) infinite;
}

/* ============================================================
   ghost nodes — keyboard education
   Dashed placeholders showing where Tab/Enter would create.
   .learn-1/.learn-2 fade as the user demonstrates the shortcut.
   ============================================================ */

.mm-ghost {
  position: relative;
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  background: transparent;
  border: 2.2px dashed rgba(58, 53, 50, .3); /* quiet gray — hints, not protagonists */
  border-radius: var(--mm-wobble-1);
  padding: 9px 20px 7px;
  font-family: var(--mm-font-hand);
  font-size: 17px;
  color: var(--mm-ink-faint);
  width: max-content;
  white-space: nowrap;
}
.mm-ghost.is-placed {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.mm-ghost.learn-1 { opacity: .55; }
.mm-ghost.learn-2 { opacity: .25; }

/* handwritten annotation attached to a ghost */
.mm-ghost-note {
  position: absolute;
  white-space: nowrap;
  font-family: var(--mm-font-script);
  font-size: 18px;
  font-weight: 500;
  color: var(--mm-marker);
  pointer-events: none;
}

/* ============================================================
   connectors (SVG) — drawn by sketch.js
   ============================================================ */

.mm-link {
  fill: none;
  stroke: var(--mm-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}
.mm-link--echo {
  stroke-width: 1.6;
  opacity: .18;
}
.mm-link--ghost {
  stroke: rgba(58, 53, 50, .38);
  stroke-dasharray: 7 8;
  opacity: .65;
}
.mm-link.is-hot {
  stroke-width: 3.2;
  opacity: 1;
}

/* ============================================================
   keycaps & hint strip
   ============================================================ */

.mm-kbd {
  display: inline-block;
  font-family: var(--mm-font-hand);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mm-ink);
  background: var(--mm-card);
  border: 1.8px solid var(--mm-ink);
  border-radius: var(--mm-wobble-3);
  box-shadow: 1.5px 2px 0 rgba(58, 53, 50, .25);
  padding: 1px 8px 0;
}
.mm-kbd--accent {
  border-color: var(--mm-marker);
  color: var(--mm-marker);
  box-shadow: 1.5px 2px 0 rgba(255, 138, 92, .3);
}

.mm-hintstrip {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 9px 24px 7px;
  font-family: var(--mm-font-hand);
  font-size: 16px;
  color: var(--mm-ink-soft);
  transform: rotate(-.4deg);
}
.mm-hintstrip span { white-space: nowrap; }
.mm-hintstrip .mm-kbd { margin-right: 6px; }
.mm-hintstrip--fixed {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-.4deg);
  z-index: 10;
}

/* ============================================================
   chrome
   ============================================================ */

.mm-wordmark {
  font-family: var(--mm-font-script);
  font-weight: 700;
  font-size: 30px;
  color: var(--mm-ink);
  transform: rotate(-1.5deg);
  display: inline-block;
}
.mm-wordmark::after { content: "."; color: var(--mm-marker); }
.mm-wordmark .mark {
  height: 30px;
  width: auto;
  vertical-align: -6px;
  margin-right: 7px;
}

.mm-saved {
  font-family: var(--mm-font-script);
  font-size: 18px;
  color: var(--mm-ink-faint);
  transform: rotate(1deg);
  display: inline-block;
}
.mm-saved::before { content: "✓ "; color: var(--mm-ok); }

.mm-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mm-card);
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-3);
  box-shadow: 2px 2.5px 0 rgba(58, 53, 50, .16);
  padding: 5px 12px 3px;
  font-family: var(--mm-font-hand);
  font-size: 16px;
  color: var(--mm-ink-soft);
  transform: rotate(.5deg);
}
.mm-zoom button {
  all: unset;
  cursor: pointer;
  padding: 0 6px;
  font-family: inherit;
  font-size: 18px;
  color: var(--mm-ink-soft);
}
.mm-zoom button:hover { color: var(--mm-ink); }

.mm-help {
  width: 40px;
  height: 40px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 2px 2.5px 0 rgba(58, 53, 50, .16);
  display: inline-grid;
  place-items: center;
  font-family: var(--mm-font-hand);
  font-size: 20px;
  color: var(--mm-ink);
  cursor: pointer;
  transform: rotate(-2deg);
}
.mm-help:hover { box-shadow: var(--mm-shadow-lift); }

/* ============================================================
   context menu
   ============================================================ */

.mm-menu {
  width: 230px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: 20px 8px 24px 8px / 8px 24px 8px 20px;
  box-shadow: var(--mm-shadow-lift);
  padding: 7px;
  font-family: var(--mm-font-hand);
  font-size: 16.5px;
  color: var(--mm-ink);
  transform: rotate(-.3deg);
}
.mm-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 12px 4px;
  border-radius: 14px 5px 16px 5px / 5px 16px 5px 14px;
  cursor: pointer;
}
.mm-menu-item:hover,
.mm-menu-item.is-active { background: rgba(255, 230, 109, .55); }
.mm-menu-item .mm-kbd { font-size: 13px; }
.mm-menu-item--danger { color: #c25b4a; }
.mm-menu-sep {
  border: none;
  border-top: 2px dashed rgba(58, 53, 50, .25);
  margin: 5px 10px;
}

/* ============================================================
   overlay panel (shortcuts screen)
   ============================================================ */

.mm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(58, 53, 50, .25);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 100;
}

.mm-panel {
  width: min(620px, 92vw);
  background: var(--mm-card);
  border: 2.6px solid var(--mm-ink);
  border-radius: var(--mm-wobble-2);
  box-shadow: 5px 7px 0 rgba(58, 53, 50, .18);
  padding: 26px 32px 28px;
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
  transform: rotate(-.4deg);
}
.mm-panel-title {
  font-family: var(--mm-font-script);
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 18px;
}
.mm-panel-title small {
  font-size: 18px;
  font-weight: 500;
  color: var(--mm-ink-faint);
  margin-left: 12px;
}
.mm-panel-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 40px;
}
.mm-panel-group h4 {
  font-family: var(--mm-font-script);
  font-size: 20px;
  font-weight: 700;
  color: var(--mm-marker);
  margin: 12px 0 6px;
}
.mm-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
  font-size: 16.5px;
  color: var(--mm-ink-soft);
}
.mm-shortcut-row .keys { white-space: nowrap; }
.mm-shortcut-row .mm-kbd { margin-left: 4px; }

/* ============================================================
   toast
   ============================================================ */

.mm-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 8px 20px 6px;
  font-family: var(--mm-font-hand);
  font-size: 16.5px;
  color: var(--mm-ink);
  transform: rotate(-.5deg);
  animation: mm-rise .45s ease backwards;
}
.mm-toast--fixed {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) rotate(-.5deg);
  z-index: 50;
}

/* ============================================================
   selection marquee
   ============================================================ */

.mm-marquee {
  position: absolute;
  border: 2px dashed var(--mm-marker);
  border-radius: 6px;
  background: rgba(255, 138, 92, .07);
  pointer-events: none;
}

/* ============================================================
   empty canvas welcome
   ============================================================ */

.mm-empty {
  text-align: center;
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
}
.mm-empty-title {
  font-family: var(--mm-font-script);
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 26px;
  transform: rotate(-1deg);
}
.mm-empty-note {
  font-family: var(--mm-font-script);
  font-size: 20px;
  color: var(--mm-ink-faint);
  margin-top: 24px;
  transform: rotate(-.6deg);
}

/* ============================================================
   mobile controls
   Touch replaces the keyboard: ghosts become tap targets, and
   a contextual action bar sits in the thumb zone.
   ============================================================ */

/* tappable ghost — same dashed placeholder, but it IS the button, so it
   keeps the marker affordance (gray would read as disabled).
   Bigger padding => ≥44px touch target. */
.mm-ghost--tap {
  border-color: var(--mm-marker);
  color: var(--mm-ink-soft);
  background: rgba(255, 138, 92, .08);
  box-shadow: 2px 2.5px 0 rgba(255, 138, 92, .2);
  padding: 12px 20px 10px;
  cursor: pointer;
}
.mm-ghost--tap:active { box-shadow: none; translate: 2px 2px; }

/* contextual action bar (bottom thumb zone when a node is active) */
.mm-actionbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 8px 12px;
  transform: rotate(-.4deg);
}
.mm-action {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 52px;
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  background: var(--mm-card);
  box-shadow: 1.5px 2px 0 rgba(58, 53, 50, .2);
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
  cursor: pointer;
}
.mm-action:active { box-shadow: none; translate: 1.5px 2px; }
.mm-action .glyph { font-size: 17px; line-height: 1.1; }
.mm-action .label { font-size: 11.5px; color: var(--mm-ink-soft); line-height: 1; }
.mm-action--accent { border-color: var(--mm-marker); }
.mm-action--accent .glyph { color: var(--mm-marker); }
.mm-action--danger { border-color: #c25b4a; }
.mm-action--danger .glyph, .mm-action--danger .label { color: #c25b4a; }

/* satellite buttons — round controls floating around the active node */
.mm-satellite {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 2px 2.5px 0 rgba(58, 53, 50, .2);
  display: grid;
  place-items: center;
  font-family: var(--mm-font-hand);
  font-size: 20px;
  color: var(--mm-ink);
  cursor: pointer;
}
.mm-satellite--accent { border-color: var(--mm-marker); color: var(--mm-marker); }
.mm-satellite--danger { border-color: #c25b4a; color: #c25b4a; }
.mm-satellite-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: var(--mm-font-script);
  font-size: 15px;
  color: var(--mm-ink-faint);
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   animations
   ============================================================ */

@keyframes mm-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes mm-pop {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.8); }
}
@keyframes mm-rise {
  from { opacity: 0; translate: 0 10px; }
}