/* Funnel map canvas engine. Each canvas sets the --fm-* tokens on :root. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fm-bg); color: var(--fm-ink); }
body { font-family: var(--fm-text-font, Georgia, serif); -webkit-font-smoothing: antialiased; }

.fm-viewport { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.fm-viewport [contenteditable] { -webkit-user-select: text; user-select: text; }
.fm-viewport.is-dragging { cursor: grabbing; }
.fm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Boards: absolutely placed artboards with a header row above, like a design canvas */
.fm-board { position: absolute; background: var(--fm-board-bg); box-shadow: var(--fm-board-shadow, none); }
.fm-board-head {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 30px;
  display: flex; align-items: center; gap: 8px; padding: 0 2px;
  font-family: var(--fm-mono-font, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em;
  color: var(--fm-muted); white-space: nowrap; user-select: none;
}
.fm-board-head .fm-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fm-board-head .fm-tag { margin-left: auto; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; opacity: .85; }
.fm-board-head button, .fm-board-head a {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; text-decoration: none; opacity: .7;
}
.fm-board-head button:hover, .fm-board-head a:hover { opacity: 1; }
.fm-board-head svg { width: 13px; height: 13px; }

[data-edit][contenteditable] { outline: none; cursor: text; border-radius: 2px; }
[data-edit][contenteditable]:hover { box-shadow: 0 0 0 1px var(--fm-line); }
[data-edit][contenteditable]:focus { box-shadow: 0 0 0 1px var(--fm-accent); }
[data-edit].is-edited { box-shadow: inset 0 -1px 0 var(--fm-accent); }

/* HUD */
.fm-hud {
  position: fixed; z-index: 10; display: flex; align-items: center; gap: 6px;
  font-family: var(--fm-mono-font, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em;
}
.fm-hud-top { top: 14px; left: 14px; right: 14px; justify-content: space-between; pointer-events: none; }
.fm-hud-top > * { pointer-events: auto; }
.fm-hud-group { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fm-hud-bg); border: 1px solid var(--fm-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fm-hud button, .fm-hud select {
  font: inherit; letter-spacing: inherit; color: var(--fm-ink); background: none; border: 0;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.fm-hud button:hover { background: var(--fm-hover); }
.fm-hud button.is-primary { box-shadow: inset 0 0 0 1px var(--fm-accent); color: var(--fm-accent); }
.fm-hud select { appearance: none; -webkit-appearance: none; max-width: 210px; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; }
.fm-hud select option { color: #111; }
.fm-brand { padding: 7px 14px; color: var(--fm-ink); max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-zoom { min-width: 52px; text-align: center; color: var(--fm-muted); }
.fm-hud-top { flex-wrap: wrap; row-gap: 8px; }
.fm-tabs { display: flex; gap: 2px; flex-basis: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; font-family: var(--fm-mono-font, ui-monospace, monospace); font-size: 12px; }
.fm-tabs a { padding: 7px 12px; border-radius: 999px; color: var(--fm-muted); text-decoration: none; white-space: nowrap; }
.fm-tabs a:hover { background: var(--fm-hover); color: var(--fm-ink); }
.fm-tabs a.is-on { color: var(--fm-ink); box-shadow: inset 0 0 0 1px var(--fm-accent); }

.fm-minimap { position: fixed; z-index: 10; right: 14px; bottom: 14px; border-radius: 10px; background: var(--fm-hud-bg); border: 1px solid var(--fm-line); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fm-caption {
  position: fixed; z-index: 10; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 260px)); padding: 10px 18px; border-radius: 999px;
  background: var(--fm-hud-bg); border: 1px solid var(--fm-line); text-align: center;
  font-family: var(--fm-mono-font, ui-monospace, monospace); font-size: 12px; letter-spacing: .06em; color: var(--fm-ink);
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fm-caption.is-on { opacity: 1; }

.fm-toast { position: fixed; z-index: 20; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 16px; border-radius: 8px; background: var(--fm-hud-bg); border: 1px solid var(--fm-accent); color: var(--fm-ink); font-family: var(--fm-mono-font, monospace); font-size: 12px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.fm-toast.is-on { opacity: 1; }

@media (max-width: 640px) {
  .fm-hud-top { flex-wrap: wrap; gap: 6px; left: 16px; right: 16px; }
  .fm-hide-sm { display: none !important; }
  .fm-hud select { max-width: 150px; }
  .fm-tab-long { display: none; }
  .fm-minimap { display: none; }
  .fm-caption { max-width: calc(100vw - 32px); bottom: 16px; border-radius: 14px; }
}

/* Recording mode (?clean): only the canvas and the caption */
body.fm-clean .fm-hud, body.fm-clean .fm-minimap { display: none; }
body.fm-clean .fm-board-head .fm-tag, body.fm-clean .fm-board-head button, body.fm-clean .fm-board-head a { display: none; }

/* Capture panel: the shots you framed, in order, ready to copy */
.fm-shots { position: fixed; z-index: 15; left: 14px; bottom: 14px; width: min(460px, calc(100vw - 28px)); padding: 14px; border-radius: 12px; background: var(--fm-hud-bg); border: 1px solid var(--fm-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--fm-mono-font, ui-monospace, monospace); color: var(--fm-ink); }
.fm-shots-head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; margin-bottom: 8px; }
.fm-shots-head span { color: var(--fm-muted); }
.fm-shots textarea { width: 100%; height: 150px; resize: vertical; background: rgba(0,0,0,.25); color: var(--fm-ink); border: 1px solid var(--fm-line); border-radius: 6px; padding: 8px; font: 11px/1.5 var(--fm-mono-font, ui-monospace, monospace); }
.fm-shots-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fm-shots-act button { font: 12px var(--fm-mono-font, ui-monospace, monospace); color: var(--fm-ink); background: none; border: 1px solid var(--fm-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.fm-shots-act button:hover { background: var(--fm-hover); }
.fm-shots p { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--fm-muted); }
body.fm-clean .fm-shots { display: none; }

/* The tour plays clean: the minimap steps aside */
.fm-minimap { transition: opacity .6s ease; }
body.fm-playing .fm-minimap { opacity: 0; pointer-events: none; }

/* Ember pointer (P or ?pointer): no system cursor anywhere, the canvas draws its own */
.fm-ember { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; }
html.fm-ember-on, html.fm-ember-on * { cursor: none !important; }