/* ------- Tree View — minimalist canvas ------- */
:root {
  --bg: #fafaf7;
  --bg-2: #f4f4f0;
  --dot: #d6d6cf;
  --dot-strong: #b8b8b0;
  --ink: #1a1a1a;
  --ink-2: #2c2c2c;
  --muted: #6b6b66;
  --muted-2: #8a8a85;
  --line: #1a1a1a;
  --line-soft: #c8c8c0;
  --node-bg: #ffffff;
  --node-border: #1a1a1a;
  --node-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 16px -8px rgba(0,0,0,0.18);
  --accent: #1a1a1a;
  --accent-soft: #ececea;
  --selection: #1a1a1a;
  --danger: #a23a2a;
  --tag-bg: #efefea;
  --check-fill: #1a1a1a;
  --panel-bg: #ffffff;
  --panel-border: #1a1a1a;
  --hairline: #1a1a1a;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

/* ---- App shell ---- */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar canvas";
  background: var(--bg);
}

/* ---- Top bar ---- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  z-index: 30;
}
.topbar .brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.topbar .brand-mark {
  width: 16px; height: 16px;
}
.topbar .tree-name-input {
  font: inherit; font-size: 13px; font-weight: 500;
  border: none; outline: none; background: transparent;
  padding: 4px 6px; border-radius: 4px;
  color: var(--ink); min-width: 120px;
}
.topbar .tree-name-input:hover { background: var(--accent-soft); }
.topbar .tree-name-input:focus { background: var(--accent-soft); }
.topbar .spacer { flex: 1; }
.topbar .btn-row { display: flex; gap: 6px; align-items: center; }
.topbar .divider { width: 1px; height: 20px; background: var(--line-soft); margin: 0 4px; }
.topbar .meta { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms ease, border-color 80ms ease;
  user-select: none;
}
.btn:hover { background: var(--accent-soft); }
.btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn.primary:hover { background: #000; }
.btn.outline { border-color: var(--hairline); }
.btn.outline:hover { background: var(--accent-soft); }
.btn.icon { width: 28px; padding: 0; justify-content: center; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: #f5e8e6; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Sidebar ---- */
.sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--hairline);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 16px;
}
.tree-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: background 80ms ease;
  user-select: none;
}
.tree-item:hover { background: var(--accent-soft); }
.tree-item.active {
  background: var(--ink);
  color: #fff;
}
.tree-item.active .tree-item-meta { color: rgba(255,255,255,0.6); }
.tree-item-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-item-meta {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tree-item-rename {
  font: inherit; font-size: 13px;
  background: transparent;
  border: none; outline: none;
  color: inherit;
  width: 100%;
  padding: 0;
}

.sidebar-footer {
  border-top: 1px solid var(--hairline);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Canvas ---- */
.canvas-wrap {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at center, var(--dot-strong) 1.1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(circle at center, var(--dot) 0.9px, transparent 1.2px) 11px 11px / 22px 22px,
    var(--bg);
  cursor: grab;
}
.canvas-wrap.panning { cursor: grabbing; }
.canvas-wrap.connecting { cursor: crosshair; }

.canvas-inner {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* SVG layer for edges */
.edges {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.edge-path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.4;
  pointer-events: stroke;
  cursor: pointer;
}
.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}
.edge-path.dim { stroke: var(--line-soft); }
.edge-path.preview { stroke-dasharray: 4 4; stroke: var(--ink); opacity: 0.6; }
.edge-arrow {
  fill: var(--line);
}

/* ---- Node ---- */
.node {
  position: absolute;
  min-width: 96px;
  max-width: 240px;
  padding: 9px 14px;
  background: var(--node-bg);
  color: var(--ink);
  border: 1.4px solid var(--node-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-align: center;
  box-shadow: var(--node-shadow);
  cursor: grab;
  user-select: none;
  transition: box-shadow 100ms ease, transform 60ms ease;
  white-space: nowrap;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: translate(-50%, -50%);
}
.node .node-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node.shape-rect {
  border-radius: 10px;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  max-width: 220px;
  min-height: 36px;
  text-overflow: clip;
}
.node.shape-card {
  border-radius: 12px;
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
  text-align: left;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 260px;
  gap: 6px;
}
.node:hover { box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 24px -10px rgba(0,0,0,0.22); }
.node.selected {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.node.dragging { cursor: grabbing; opacity: 0.92; }

/* Status colors */
/* Solid-fill status colors. The whole node becomes the swatch. */
.node.status-red    { background: #d4533a; border-color: #b8442e; color: #fff; }
.node.status-yellow { background: #f1c84b; border-color: #d4a82f; color: #2a1f00; }
.node.status-green  { background: #4ca566; border-color: #2f8a4f; color: #fff; }
.node.status-red .node-value-inline,
.node.status-green .node-value-inline,
.node.status-yellow .node-value-inline {
  background: rgba(255,255,255,0.85);
}
.node.status-red .node-value-inline    { color: #8e2f1d; }
.node.status-yellow .node-value-inline { color: #6f5316; }
.node.status-green .node-value-inline  { color: #1c5832; }
/* Card-shape text + checks need to stay legible on a colored fill. */
.node.status-red .node-value-card,
.node.status-red .node-checks,
.node.status-green .node-value-card,
.node.status-green .node-checks { color: rgba(255,255,255,0.92); }
.node.status-yellow .node-value-card,
.node.status-yellow .node-checks { color: #2a1f00; }

/* Hover action buttons — appear ABOVE the node, side-by-side */
.node { isolation: isolate; }
.node-actions {
  position: absolute;
  left: 50%;
  bottom: 100%;
  display: flex;
  gap: 6px;
  /* Bottom padding is the invisible hover bridge between the buttons and
     the node beneath them. */
  padding: 2px 6px 8px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 28px) scale(0.94);
  transform-origin: 50% 110%;
  transition:
    transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 160ms ease;
}
.node:hover .node-actions,
.node.selected .node-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
/* When the context menu is open anywhere, suppress every hover row so it
   doesn't compete with the menu. */
.app.menu-open .node:hover .node-actions,
.app.menu-open .node.selected .node-actions {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 28px) scale(0.94);
}
.node-action {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  border: 1.2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.node-action:hover {
  background: var(--ink);
  color: #fff;
}
.node-action.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Solid-color swatch buttons (red / yellow / green) */
.node-action.color {
  border-color: rgba(0,0,0,0.18);
}
.node-action.color-red    { background: #d4533a; }
.node-action.color-yellow { background: #f1c84b; }
.node-action.color-green  { background: #4ca566; }
.node-action.color-red:hover    { background: #b8442e; border-color: #b8442e; }
.node-action.color-yellow:hover { background: #d4a82f; border-color: #d4a82f; }
.node-action.color-green:hover  { background: #2f8a4f; border-color: #2f8a4f; }
/* When the node already has that status, ring the swatch so it reads as the
   current pick (and clicking it clears). */
.node-action.color.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.4px var(--ink);
}

/* Halo layer behind nodes */
.halos {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.halo-rect {
  fill: none;
  stroke: none;
}
.edges { z-index: 1; }
.node { z-index: 2; }
.node.collapsed-host::after {
  content: attr(data-childcount);
  position: absolute;
  right: -10px; bottom: -10px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  width: 20px; height: 20px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

.node-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node.shape-rect .node-title,
.node.shape-card .node-title {
  white-space: normal;
}
.node-title-edit {
  font: inherit;
  font-weight: 500;
  background: transparent;
  border: none; outline: none;
  color: inherit;
  width: 100%;
  text-align: inherit;
  padding: 0;
  resize: none;
}

.node-emoji { font-size: 14px; line-height: 1; }
.node-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.node-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--tag-bg);
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 999px;
}
.node-checks {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 4px;
}

/* Money / value badge */
.node-value-inline {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}
.node.shape-circle.has-value {
  flex-direction: column;
  gap: 4px;
  border-radius: 18px;
  padding: 8px 14px;
}
.node.shape-circle.has-value .node-title { white-space: nowrap; }
.node.shape-rect.has-value {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.node-value-card {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.node-value-inline.subtotal {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.node-value-card.subtotal {
  color: var(--ink);
  font-weight: 700;
  border-top: 1px dashed var(--line-soft);
  padding-top: 6px;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Connection handle */
.node-handle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--ink);
  border: 2px solid var(--bg);
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  cursor: crosshair;
  opacity: 0;
  transition: opacity 100ms ease, transform 80ms ease;
  z-index: 2;
}
.node:hover .node-handle,
.node.selected .node-handle { opacity: 1; }
.node-handle:hover { transform: translateX(-50%) scale(1.2); }

/* Collapse toggle */
.node-collapse {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--bg);
  border: 1.4px solid var(--ink);
  color: var(--ink);
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  font-variant-numeric: tabular-nums;
  padding: 0; line-height: 1;
}
.node-collapse:hover { background: var(--ink); color: #fff; }

/* ---- Inspector panel ---- */
.inspector {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 320px;
  max-height: calc(100% - 32px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}
.inspector-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.inspector-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.inspector-body {
  padding: 14px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.input, .textarea {
  font: inherit; font-size: 13px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  outline: none;
  width: 100%;
  resize: vertical;
}
.input:focus, .textarea:focus {
  border-color: var(--ink);
  background: #fff;
}
.textarea { min-height: 76px; line-height: 1.5; }

/* shape picker */
.shape-row { display: flex; gap: 6px; }
.shape-opt {
  flex: 1;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--bg-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.shape-opt:hover { background: #fff; }
.shape-opt.selected { background: var(--ink); }
.shape-opt.selected svg { color: #fff; }
.shape-opt svg { color: var(--ink); }

/* checklist */
.checklist { display: flex; flex-direction: column; gap: 4px; }
.check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.check-box {
  width: 16px; height: 16px;
  border: 1.4px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.check-box.done { background: var(--ink); }
.check-box.done svg { color: #fff; }
.check-row input[type=text] {
  flex: 1; font: inherit; font-size: 13px;
  background: transparent;
  border: none; outline: none;
  color: var(--ink);
  padding: 2px 0;
}
.check-row input[type=text].done {
  text-decoration: line-through;
  color: var(--muted);
}
.check-row .x {
  opacity: 0; cursor: pointer;
  border: none; background: transparent;
  color: var(--muted); padding: 2px;
  display: flex; align-items: center;
}
.check-row:hover .x { opacity: 1; }

/* tags */
.tag-input-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  background: var(--tag-bg);
  color: var(--ink-2);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.tag-pill .x {
  cursor: pointer; border: none; background: transparent;
  color: var(--muted); padding: 0;
  display: flex; align-items: center;
}
.tag-input {
  flex: 1; min-width: 80px;
  font: inherit; font-size: 12px;
  background: transparent; border: none; outline: none;
  padding: 3px 4px;
}

/* link rows */
.link-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: var(--bg-2);
  border-radius: 6px;
  font-size: 12px;
}
.link-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .x { border: none; background: transparent; cursor: pointer; color: var(--muted); padding: 2px; display: flex; }

.link-picker {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-radius: 6px;
  max-height: 160px; overflow-y: auto;
  border: 1px solid var(--hairline);
}
.link-picker-row {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.link-picker-row:last-child { border-bottom: none; }
.link-picker-row:hover { background: #fff; }

/* ---- Floating toolbars ---- */
.zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex; align-items: center; gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.18);
}
.zoom-controls .btn { height: 26px; }
.zoom-controls .zoom-readout {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding: 0 8px;
  min-width: 44px; text-align: center;
}

.canvas-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 11px;
  color: var(--muted);
  z-index: 5;
  pointer-events: none;
  font-feature-settings: "tnum";
  display: flex; gap: 14px;
}
.canvas-hint kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  color: var(--ink);
}

/* ---- Empty state ---- */
.empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  color: var(--muted);
  gap: 14px;
}
.empty-state .empty-title {
  font-size: 18px; font-weight: 500; color: var(--ink-2);
  letter-spacing: -0.01em;
}
.empty-state .empty-sub { font-size: 13px; max-width: 320px; text-align: center; line-height: 1.5; }
.empty-state .btn { pointer-events: auto; }

/* ---- Context menu ---- */
.ctx-menu {
  position: fixed;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.3);
  padding: 4px;
  z-index: 50;
  min-width: 200px;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}
.ctx-item:hover { background: var(--accent-soft); }
.ctx-item.danger { color: var(--danger); }
.ctx-item .shortcut {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.ctx-sep { height: 1px; background: var(--hairline); margin: 4px 0; }

/* Inline color-swatch row inside the context menu */
.ctx-color-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
}
.ctx-color-label {
  font-size: 11px;
  color: var(--muted);
  margin-right: auto;
}
.ctx-color {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1.2px solid rgba(0,0,0,0.18);
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform 80ms ease, box-shadow 100ms ease;
}
.ctx-color.color-red    { background: #d4533a; }
.ctx-color.color-yellow { background: #f1c84b; }
.ctx-color.color-green  { background: #4ca566; }
.ctx-color.clear        { background: #fff; }
.ctx-color.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.4px var(--ink);
}

/* ---- Hidden ---- */
.sr { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* scrollbars */
.sidebar-list::-webkit-scrollbar,
.inspector-body::-webkit-scrollbar { width: 8px; }
.sidebar-list::-webkit-scrollbar-thumb,
.inspector-body::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 4px; }
.sidebar-list::-webkit-scrollbar-track,
.inspector-body::-webkit-scrollbar-track { background: transparent; }

/* Export dropdown */
.export-menu { position: relative; display: inline-flex; }
.export-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.25);
  padding: 4px;
  min-width: 200px;
  transform: translateY(-4px);
  animation: export-pop-in 140ms ease forwards;
  z-index: 40;
}
@keyframes export-pop-in {
  to { transform: translateY(0); }
}
.export-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
}
.export-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}
.export-menu-item:hover { background: var(--accent-soft); }

/* ---- Auth / sync menu ---- */
.auth-menu { position: relative; }
.auth-menu .btn.sync-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.auth-menu .btn.sync-on:hover { background: var(--ink-2); }
.auth-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.2);
  z-index: 50;
}
.auth-pop-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.auth-title { font-size: 13px; font-weight: 600; }
.auth-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.auth-input {
  font: inherit; font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  outline: none;
  background: var(--bg);
  color: var(--ink);
}
.auth-input:focus { border-color: var(--ink); }
.auth-btn { width: 100%; justify-content: center; padding: 7px 10px; font-size: 12px; }
.auth-ok { font-size: 12px; color: #2f8a4f; }
.auth-err { font-size: 12px; color: var(--danger); }
.auth-foot { font-size: 11px; color: var(--muted-2); border-top: 1px solid var(--line-soft); padding-top: 8px; }
.auth-row { display: flex; align-items: center; gap: 10px; }
.auth-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.auth-id { flex: 1; min-width: 0; }
.auth-id-email { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-id-sub { font-size: 11px; color: var(--muted); }
.auth-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; cursor: pointer;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.auth-toggle input { margin: 0; accent-color: var(--ink); }
.auth-actions { display: flex; gap: 6px; }
.auth-btn-sm { font-size: 11px; padding: 6px 8px; flex: 1; justify-content: center; }
.auth-signout {
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  width: 100%; justify-content: center;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 11px;
}
.auth-signout:hover { color: var(--danger); }
.btn.ghost { background: transparent; border: 1px solid transparent; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); }
.btn.primary[disabled] { opacity: 0.6; cursor: default; }

/* OAuth buttons in the auth popover */
.oauth-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  border: 1.2px solid var(--ink);
}
.oauth-btn:hover { background: var(--ink); color: #fff; }
.auth-email-form { display: flex; flex-direction: column; gap: 8px; }

/* Sync-conflict modal */
.conflict-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 18, 0.42);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: conflict-fade 180ms ease;
}
@keyframes conflict-fade { from { opacity: 0; } to { opacity: 1; } }
.conflict-card {
  width: 100%;
  max-width: 560px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.35);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.conflict-head { display: flex; flex-direction: column; gap: 4px; }
.conflict-title { font-size: 15px; font-weight: 600; }
.conflict-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.conflict-sub em { font-style: normal; font-weight: 600; color: var(--ink); }
.conflict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.conflict-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  padding: 14px;
  border: 1.2px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.conflict-choice:hover {
  border-color: var(--ink);
}
.conflict-choice.primary {
  border-color: var(--ink);
  background: var(--accent-soft);
}
.conflict-choice.primary:hover { background: var(--ink); color: #fff; }
.conflict-choice-title { font-size: 13px; font-weight: 600; margin-top: 2px; }
.conflict-choice-meta { font-size: 11px; color: var(--muted); font-weight: 500; }
.conflict-choice-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.conflict-choice.primary:hover .conflict-choice-meta,
.conflict-choice.primary:hover .conflict-choice-sub { color: #d8d8d2; }
.conflict-foot { font-size: 11px; color: var(--muted-2); text-align: center; }

@media (max-width: 600px) {
  .conflict-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile / touch — sidebar drawer, bottom-sheet inspector,
   pinch-friendly canvas, compact topbar, larger touch targets.
   ============================================================ */

/* Hamburger button — only visible on mobile. */
.sidebar-toggle { display: none; }

/* Backdrop element exists always; only painted when drawer open on mobile. */
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  /* App becomes one column; sidebar floats above as a drawer. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 48px 1fr;
    grid-template-areas:
      "topbar"
      "canvas";
  }

  /* ---- Topbar: keep essentials, drop labels ---- */
  .sidebar-toggle {
    display: inline-flex;
    margin-left: -4px;
    flex: 0 0 auto;
  }
  /* Overflow visible so absolutely-positioned dropdowns (auth, export)
     aren't clipped to the 48 px topbar. */
  .topbar { gap: 8px; padding: 0 10px 0 8px; overflow: visible; }
  .topbar .brand-text { display: none; }
  .topbar .meta { display: none; }
  .topbar .divider { display: none; }
  .topbar .tree-name-input { min-width: 0; flex: 1 1 60px; font-size: 14px; }
  .topbar .btn-row { gap: 4px; flex: 0 0 auto; }
  /* Icon-only buttons: hide the text label inside .btn elements after the icon. */
  .topbar .btn-row .btn {
    padding: 0 8px;
    height: 32px;
    font-size: 0; /* hides text */
  }
  .topbar .btn-row .btn svg { width: 16px; height: 16px; }
  /* Keep auth button text visible (it's short and meaningful) */
  .topbar .auth-menu > .btn { font-size: 11px; padding: 0 8px; }
  .topbar .auth-menu > .btn svg { width: 13px; height: 13px; }

  /* ---- Sidebar as drawer ---- */
  .sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    width: min(280px, 78vw);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 0 24px -4px rgba(0,0,0,0.22);
  }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 48px 0 0 0;
    background: rgba(20, 20, 18, 0.32);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .app.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- Canvas: let us own all touch gestures (pan/pinch handled in JS) ---- */
  .canvas-wrap {
    touch-action: none;
    overscroll-behavior: contain;
  }

  /* ---- Inspector as bottom sheet ---- */
  .inspector {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 14px 14px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    animation: sheet-up 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .inspector::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--line-soft);
    border-radius: 4px;
    margin: 8px auto 0;
  }

  /* ---- Bigger touch targets on nodes ---- */
  .node-action { width: 30px; height: 30px; flex-basis: 30px; }
  .node-action svg { width: 14px; height: 14px; }
  .node-actions { gap: 8px; }

  /* ---- Hide keyboard-shortcut hint (irrelevant on touch) ---- */
  .canvas-hint { display: none; }

  /* ---- Zoom controls: more compact, lower-right with safe-area inset ---- */
  .zoom-controls {
    bottom: calc(12px + env(safe-area-inset-bottom, 0));
    right: 12px;
    padding: 3px;
  }
  .zoom-controls .btn { height: 30px; width: 30px; padding: 0; }
  .zoom-controls .zoom-readout { min-width: 38px; font-size: 10px; }

  /* ---- Inputs at 16px so iOS doesn't auto-zoom on focus ---- */
  .node-title-edit,
  .auth-input,
  .inspector .input,
  .inspector textarea,
  .tag-input {
    font-size: 16px !important;
  }

  /* ---- Auth popover detaches from topbar overflow and anchors to viewport. ---- */
  .auth-pop {
    position: fixed;
    top: 52px;
    right: 8px;
    left: auto;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  /* Same treatment for the export menu so its dropdown isn't clipped either. */
  .export-menu-pop {
    position: fixed;
    top: 52px;
    right: 8px;
    left: auto;
    min-width: 220px;
  }

  /* ---- Conflict modal: stack tighter ---- */
  .conflict-card { padding: 18px; gap: 12px; max-width: 100%; }
  .conflict-title { font-size: 16px; }
  .conflict-choice { padding: 12px; }
}

/* Tall but narrow phones (landscape orientation) */
@media (max-height: 480px) and (max-width: 900px) {
  .inspector { max-height: 80vh; }
}