/* ─────────────────────────────────────────────────────────────
   FloorPlanScene — unified canvas chrome
   Replaces the 5 ad-hoc canvas hosts. One layout, three viewports,
   four roles. All chrome anchors to the scene, not to the app shell.
   ───────────────────────────────────────────────────────────── */

/* The scene fills its host. Hosts may be: app-shell main, mobile-shell
   main, design-canvas artboard, or print/PDF frame. */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  font-family: inherit;
  color: var(--text-primary);
}

/* ── Scene top-bar — minimal, just identity + close ── */
.scene-top {
  display: flex; align-items: center; gap: var(--space-base);
  padding: var(--space-md) var(--space-base);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
  flex-shrink: 0;
  min-height: 56px;
}
/* Two-row layout on desktop/tablet — keeps title clear of breadcrumbs */
.scene-top--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base) var(--space-md);
  min-height: 0;
}
.scene-top__row {
  display: flex; align-items: center; gap: var(--space-base);
  min-width: 0;
}
.scene-top__row--crumbs {
  min-height: 20px;
}
.scene-top__row--main {
  gap: var(--space-base);
}
.scene-top__row--main .scene-top__title {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.scene-top__row--main .scene-top__title h1 {
  font-size: var(--text-20); line-height: 1.2;
}
.scene-top__row--main .scene-top__title small {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.scene-top__row--main .scene-top__actions { flex-shrink: 0; }
.scene-top__crumbs {
  font-size: var(--text-13); color: var(--text-tertiary);
  display: flex; align-items: center; gap: var(--space-xs);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scene-top__crumbs > a { color: var(--text-tertiary); }
.scene-top__crumbs > a:hover { color: var(--text-primary); }
.scene-top__crumbs > svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.scene-top__crumb-current { color: var(--text-primary); font-weight: 600; }
.scene-top__title {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: var(--space-sm);
}
.scene-top__title h1 {
  font-size: var(--text-18); font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scene-top__title small {
  font-size: var(--text-13); color: var(--text-secondary); font-weight: 500;
}
.scene-top__role {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  background: var(--surface-soft);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-12); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.scene-top__actions { display: flex; gap: var(--space-sm); align-items: center; flex-shrink: 0; }
/* Role-specific primary action (design: visit → "Bezoek afronden") lives in the scene top bar. */
.scene-top__actions .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Mobile header: icon-only square primary so the action stays reachable without crowding the title. */
.scene-top__primary-compact { padding: 0; width: 36px; height: 36px; flex-shrink: 0; }
.scene-top__primary-compact svg { width: 18px; height: 18px; }

/* ── Plan tabs — sit below top-bar ── */
.plan-tabs {
  display: flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-base);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.plan-tabs::-webkit-scrollbar { display: none; }
.plan-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-13); font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.plan-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.plan-tab.is-active {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: var(--border-subtle);
}
.plan-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.plan-tab.is-active .plan-tab__count { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); }
.plan-tab--add {
  color: var(--primary);
  border-style: dashed; border-color: var(--border);
}
.plan-tab--add:hover { background: var(--surface-soft); border-color: var(--primary); }

/* ── Main canvas row — canvas + side affordances ── */
.scene-main {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  background: var(--page-bg);
}

/* The canvas viewport itself — the only thing that grows */
.canvas-host {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  /* Reserved CSS hook for inverse-scaling pins once Epic 7's pan/zoom lands.
     JS will set --scene-zoom on this element; pin transforms can divide by it
     to stay screen-size-constant under a CSS transform on .plan-paper. */
  --scene-zoom: 1;
  background:
    radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0) 0 0 / 28px 28px,
    var(--page-bg);
}
.canvas-host__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}

/* The plattegrond paper — fixed aspect, scaled to fit */
.plan-paper {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),
    0 8px 28px rgba(0,0,0,0.18);
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
}
[data-theme="light"] .plan-paper {
  box-shadow:
    0 1px 2px rgba(15,25,23,0.06),
    0 8px 28px rgba(15,25,23,0.08);
  border: 1px solid var(--border-subtle);
}

/* Armed tool (depot/advice placement primed): crosshair cursor over the paper. */
.plan-paper[data-armed="true"] {
  cursor: crosshair;
}

/* Background-upload dialog (FloorPlanBackgroundUploadDialog) */
.bg-upload__pick {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}
.bg-upload__picked {
  margin: var(--space-sm) 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.bg-upload__warn {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--status-orange-soft);
  color: var(--status-orange);
  font-size: 0.875rem;
}
.bg-upload__error {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--status-red-soft);
  color: var(--status-red);
  font-size: 0.875rem;
}

/* Plattegrond mock — black-line rooms (matches your existing samples) */
.plan-paper__title {
  position: absolute; top: 14px; left: 18px;
  font-size: 11px; font-weight: 700;
  color: #1B2421;
  letter-spacing: 0.06em;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.plan-room {
  position: absolute;
  border: 1.5px solid #1B2421;
  color: #1B2421;
  font-size: 9px;
  font-weight: 600;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 4px 6px;
  letter-spacing: 0.04em;
  background: transparent;
}
.plan-room--filled { background: rgba(15,25,23,0.04); }

/* ── Tool rail (desktop + tablet) ── */
.toolrail {
  width: 56px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-xs);
  gap: 2px;
  position: relative;
  z-index: 5;
}
.toolrail__group {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; align-items: center;
}
.toolrail__sep {
  width: 32px; height: 1px;
  background: var(--border-subtle);
  margin: var(--space-xs) 0;
}
.toolrail__spacer { flex: 1; }
.tool-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tool-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}
.tool-btn.is-active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn__kbd {
  position: absolute;
  bottom: 1px; right: 2px;
  font-size: 9px; font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tool-btn.is-active .tool-btn__kbd { color: rgba(255,255,255,0.7); }
.tool-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-12); font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 30;
}

/* ── Loaded-tool indicator (sits at top of canvas) ── */
.loaded-tool {
  position: absolute;
  top: var(--space-base); left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 6px 8px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: var(--text-13);
  z-index: 4;
  max-width: calc(100% - 32px);
}
.loaded-tool__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
}
.loaded-tool__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.loaded-tool__label { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.loaded-tool__config {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--text-12); font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.loaded-tool__config:hover { background: var(--surface-hover); }
.loaded-tool__config svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.loaded-tool__hint {
  font-size: var(--text-12);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.loaded-tool__dismiss {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
}
.loaded-tool__dismiss:hover { background: var(--surface-hover); color: var(--text-primary); }
.loaded-tool__dismiss svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* Pulsing "ready to place" ring when tool is loaded */
.canvas-host[data-armed="true"] {
  cursor: crosshair;
}
.canvas-host[data-armed="true"]::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--primary);
  opacity: 0.55;
  border-radius: 0;
  animation: armed-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes armed-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.55; }
}

/* ── Legend & filter panel ── */
.legend {
  width: 256px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.legend__head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-base);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.legend__head h2 {
  flex: 1;
  font-size: var(--text-13); font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.legend__body { flex: 1; overflow-y: auto; padding: var(--space-base); display: flex; flex-direction: column; gap: var(--space-lg); }
.legend__section { display: flex; flex-direction: column; gap: var(--space-sm); }
.legend__label {
  font-size: var(--text-12); font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.legend-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-12); font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.legend-chip:hover { background: var(--surface-hover); }
.legend-chip.is-active {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.legend-chip__swatch { width: 8px; height: 8px; border-radius: 50%; }
.legend-chip__count { color: var(--text-tertiary); font-weight: 500; font-variant-numeric: tabular-nums; }
.legend-chip.is-active .legend-chip__count { color: var(--primary); }

/* Collapse toggle — hidden by default; only the tablet shell surfaces it (rules below).
   The chevron points right (collapse toward the edge) and rotates 180° when collapsed. */
.legend__toggle {
  display: none;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.legend__toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.legend__toggle svg { transition: transform var(--dur-fast) var(--ease-out); }

/* ── Tablet: compact legend + collapse-to-rail (issue #254) ── */
.scene--tablet .legend { width: 208px; }
.scene--tablet .legend__head { padding: var(--space-sm) var(--space-base); }
.scene--tablet .legend__body { padding: var(--space-sm) var(--space-base); gap: var(--space-md); }
.scene--tablet .legend__toggle { display: inline-flex; }

.scene--tablet .legend--collapsed { width: 44px; }
.scene--tablet .legend--collapsed .legend__head { justify-content: center; padding: var(--space-sm); }
.scene--tablet .legend--collapsed .legend__head h2 { display: none; }
.scene--tablet .legend--collapsed .legend__body { display: none; }
.scene--tablet .legend--collapsed .legend__toggle svg { transform: rotate(180deg); }

/* ── Pin styles (3 richness levels × 3 color modes × states) ─────
   All pins are absolutely positioned children of .plan-paper. */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  --pin-bg: #6B7280;
  border: none;
  background: transparent;
  padding: 0;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 4; }

/* Level 1 — minimal dot */
.pin--l1 {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pin-bg);
  box-shadow: 0 0 0 1.5px #fff, var(--shadow-sm);
}
.pin--l1.is-selected {
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 4px var(--primary), var(--shadow-sm);
}
.pin--l1 .pin__label { display: none; }
.pin--l1:hover .pin__label {
  display: block;
  position: absolute;
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* Level 2 — medium chip with code */
.pin--l2 {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--pin-bg);
  color: #fff;
  font-size: 10px; font-weight: 700;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.pin--l2.is-selected {
  box-shadow: 0 0 0 3px var(--primary), var(--shadow-md);
}
.pin--l2.is-registered::after {
  content: "";
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--status-green);
  border: 2px solid var(--surface);
}
.pin--l2.has-advice::before {
  content: "!";
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--status-red);
  color: #fff;
  font-size: 9px; font-weight: 800; line-height: 12px; text-align: center;
  border: 2px solid var(--surface);
}

/* Level 3 — true teardrop pin (single SVG shape).
   Anchor: the tip is at (x, y); the pin container is translated so its
   bottom-center sits on the depot's coordinate. */
.pin--l3 {
  width: 28px; height: 38px;
  background: transparent;
  padding: 0;
  border: none;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.pin--l3:hover { transform: translate(-50%, -100%) scale(1.08); z-index: 4; }
.pin--l3 .pin__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: var(--pin-bg);
  stroke: #fff;
  stroke-width: 2.5;
}
.pin--l3 .pin__head {
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px; font-weight: 700;
  pointer-events: none;
}
.pin--l3 .pin__stem { display: none; }
.pin--l3.is-selected .pin__svg {
  stroke: var(--primary);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 0 1px #fff);
}
.pin--l3.is-registered::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--status-green);
  border: 2.5px solid #fff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7l2.5 2.5L10.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.pin--l3.has-advice::before {
  content: "!";
  position: absolute;
  top: -4px; left: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--status-red);
  color: #fff;
  font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
  border: 2.5px solid #fff;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 2;
}
.pin--l3.is-moving { opacity: 0.6; }
.pin--l3.is-moving .pin__svg { stroke-dasharray: 4 3; }

/* Advice pin (always rich, color = status) */
.advice-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  transition: transform var(--dur-fast) var(--ease-out);
  --pin-bg: var(--status-red);
  border: none;
  background: transparent;
  padding: 0;
}
.advice-pin:hover { transform: translate(-50%, -100%) scale(1.08); z-index: 4; }
.advice-pin__bubble {
  width: 30px; height: 28px;
  background: var(--pin-bg);
  border: 2.5px solid #fff;
  border-radius: 10px 10px 10px 4px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  line-height: 1;
}
.advice-pin__tail {
  position: absolute;
  bottom: -7px; left: 4px;
  width: 0; height: 0;
  border-left: 0 solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--pin-bg);
}
.advice-pin.is-selected .advice-pin__bubble { box-shadow: 0 0 0 3px var(--primary); }

/* Cluster */
.pin-cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--primary);
  color: var(--primary);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}
.pin-cluster::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0.25;
}

/* ── Canvas-anchored zoom cluster ── */
.canvas-zoom {
  position: absolute;
  bottom: var(--space-base); right: var(--space-base);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 4;
}
.canvas-zoom button {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.canvas-zoom button:hover { background: var(--surface-hover); }
.canvas-zoom button + button { border-top: 1px solid var(--border-subtle); }
.canvas-zoom button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.canvas-zoom__level {
  display: flex; align-items: center; justify-content: center;
  width: 36px; min-height: 26px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  letter-spacing: 0.04em;
  user-select: none;
}

/* ── Depot popover (desktop) ── */
.depot-popover {
  position: absolute;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  overflow: hidden;
  /* --pin-x/--pin-y resolve the pin's position in the .canvas-host frame (set inline by
     ScenePopoverGeometry). The popover opens 24px to the RIGHT of the pin by default; when it
     would overflow the canvas' right edge, fitOpenPopover() (JS) sets data-flip="left" and it
     opens to the LEFT instead, so it is never clipped by .canvas-host { overflow: hidden }. */
  left: calc(var(--pin-x) + 24px);
  top: var(--pin-y);
  transform: translateY(-50%);
}
.depot-popover[data-flip="left"] {
  left: calc(var(--pin-x) - 280px - 24px);
}
.depot-popover[data-flip="left"] .depot-popover__arrow {
  left: auto; right: -8px; top: 50%; margin-left: 0; margin-top: -7px;
  transform: rotate(45deg);
}
.depot-popover__head {
  padding: var(--space-base);
  display: flex; align-items: flex-start; gap: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.depot-popover__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: var(--text-12); font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.depot-popover__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.depot-popover__code { font-size: var(--text-15); font-weight: 700; color: var(--text-primary); }
.depot-popover__type { font-size: var(--text-12); color: var(--text-secondary); }
.depot-popover__close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.depot-popover__close:hover { background: var(--surface-hover); color: var(--text-primary); }
.depot-popover__close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.depot-popover__meta {
  padding: var(--space-md) var(--space-base);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.depot-popover__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.depot-popover__field-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.depot-popover__field-value {
  font-size: var(--text-13); font-weight: 600; color: var(--text-primary);
}
.depot-popover__obs {
  padding: var(--space-md) var(--space-base);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
}
.depot-popover__obs-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-12);
  color: var(--text-secondary);
}
.depot-popover__obs-row b {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.depot-popover__actions {
  padding: var(--space-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
}
.depot-popover__action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-13); font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.depot-popover__action:hover { background: var(--surface-hover); }
.depot-popover__action svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.depot-popover__action--primary {
  grid-column: 1 / -1;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}
.depot-popover__action--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.depot-popover__action--danger { color: var(--status-red); }

/* Popover arrow / pointer */
.depot-popover__arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-bottom: none; border-right: none;
  transform: rotate(-135deg);
  left: 50%; top: -8px;
  margin-left: -7px;
}
.depot-popover[data-arrow="left"] .depot-popover__arrow {
  left: -8px; top: 50%; margin-left: 0; margin-top: -7px;
  transform: rotate(-45deg);
}

/* ── Mobile scene ── */
.scene--mobile { background: #0E1413; }
[data-theme="light"] .scene--mobile { background: #E8EEED; }
.scene--mobile .canvas-host { background: var(--page-bg); }
.scene--mobile .scene-main { flex-direction: column; }
.scene--mobile .toolrail {
  width: 100%;
  height: auto;
  flex-direction: row;
  border-left: none;
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-sm);
  justify-content: space-around;
}
.scene--mobile .toolrail__sep { display: none; }
.scene--mobile .toolrail__group { flex-direction: row; }
.scene--mobile .toolrail__spacer { display: none; }
.scene--mobile .tool-btn { width: 48px; height: 48px; }
.scene--mobile .tool-btn__kbd { display: none; }

/* Mobile floating pill nav */
.scene--mobile .scene-top {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm); right: var(--space-sm);
  z-index: 8;
  min-height: 44px;
  padding: 6px 6px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.scene--mobile .scene-top__crumbs { display: none; }
.scene--mobile .scene-top__title h1 { font-size: var(--text-14); }
.scene--mobile .scene-top__title small { display: none; }

/* ── Mobile shell takeover ──
   When a mobile scene is mounted inside the global MobileShell, the scene owns
   the whole viewport: hide the app TopBar + BottomNav and drop the shell's page
   padding so the scene goes full-bleed. Pure CSS via :has() — no JS, and it
   reverts automatically when the scene unmounts (back-pill → navigate away). */
.mobile-shell:has(.scene--mobile) .topbar,
.mobile-shell:has(.scene--mobile) .bottomnav { display: none; }
.mobile-shell:has(.scene--mobile) .mobile-shell__main {
  padding-bottom: 0;
  overflow: hidden;
}
.mobile-shell:has(.scene--mobile) .mobile-shell__page {
  padding: 0;
  height: 100%;
}

/* ── Embedded scene host (visit wizard / onboarding canvas step) ──
   Unlike the standalone scene-pages (.scene-host full-bleed escape), these hosts keep their
   own chrome (e.g. the wizard back/report toolbar) above the scene. The scene fills the
   remaining space: a flex column at viewport-height-minus-page-padding on desktop/tablet, and
   the full page when the mobile takeover has already zeroed the page padding. */
.scene-embed {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--space-xl) * 2);
  min-height: 0;
}
.scene-embed__canvas {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.mobile-shell:has(.scene--mobile) .scene-embed { height: 100%; }

/* Onboarding canvas step: the scene shares the onboarding shell (header + step nav), so it fills a
   bounded region rather than taking over the viewport. The reserved space approximates the shell
   header + nav + page padding; the floor keeps the canvas usable on short viewports. */
.onboarding-canvas-host {
  position: relative;
  height: calc(100vh - 13rem);
  min-height: 420px;
}
.mobile-shell:has(.scene--mobile) .onboarding-canvas-host { height: calc(100vh - 9rem); }

/* ── Undo toast ──
   Transient "<action> — [Undo]" banner shown for 4s after any undoable action, on every host. */
.scene-toast {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(100% - var(--space-xl));
  padding: var(--space-sm) var(--space-base);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: var(--text-13);
  color: var(--text-primary);
}
.scene-toast__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-toast__undo {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--primary);
}
.scene-toast__undo:hover { color: var(--primary-hover); }

/* The floating pill (.scene-top, position:absolute) overlays the top of the
   scene. Push the first in-flow chrome (plan-tabs / canvas) clear of it. */
.scene--mobile .scene-main { padding-top: 60px; }

/* Plan-tabs are kept on mobile (spec: "Plan-tab-bar across all viewports").
   Float them just under the pill so the canvas stays full-bleed. */
.scene--mobile .plan-tabs {
  position: absolute;
  top: 56px; left: var(--space-sm); right: var(--space-sm);
  z-index: 7;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
}
/* When plan-tabs are present they need more top clearance than the pill alone:
   pill (56px) + floating tab strip (32px tab + 16px padding + 2px border = 50px)
   at top:56px reaches 106px, so clear it with a small gap. */
.scene--mobile:has(.plan-tabs) .scene-main { padding-top: 108px; }

/* Mobile config sheet */
.mob-sheet {
  background: var(--surface);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
}
.mob-sheet__handle {
  width: 36px; height: 4px;
  background: var(--text-tertiary);
  opacity: 0.4;
  border-radius: var(--radius-pill);
  margin: var(--space-sm) auto;
}
.mob-sheet__head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0 var(--space-base) var(--space-sm);
}
.mob-sheet__head h2 { flex: 1; font-size: var(--text-15); font-weight: 700; }
.mob-sheet__body {
  padding: var(--space-md) var(--space-base);
  display: flex; flex-direction: column; gap: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

/* ── State overlays (empty / loading / error) ── */
.state-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  background: var(--page-bg);
}
.state-overlay__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-base);
}
.state-overlay__icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.state-overlay h3 {
  font-size: var(--text-18); font-weight: 700; color: var(--text-primary);
  margin-bottom: 6px;
}
.state-overlay p {
  font-size: var(--text-13); color: var(--text-secondary);
  max-width: 320px;
  margin-bottom: var(--space-base);
}
.state-overlay--loading .state-overlay__icon {
  background: transparent; border: 3px solid var(--surface-2);
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}
.state-overlay--loading .state-overlay__icon svg { display: none; }
.state-overlay--error .state-overlay__icon { background: var(--status-red-soft); color: var(--status-red); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tweaks panel ── */
.tweaks-panel {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 264px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  font-size: var(--text-13);
  display: none;
}
.tweaks-panel.is-open { display: block; }
.tweaks-panel__head {
  padding: var(--space-md) var(--space-base);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}
.tweaks-panel__head h3 { flex: 1; font-size: var(--text-14); font-weight: 700; }
.tweaks-panel__close {
  width: 24px; height: 24px;
  background: transparent; border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor: pointer;
}
.tweaks-panel__close:hover { background: var(--surface-hover); }
.tweaks-panel__body { padding: var(--space-base); display: flex; flex-direction: column; gap: var(--space-base); }
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-row__label { font-size: var(--text-12); font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.tweak-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2px; gap: 2px; }
.tweak-seg__item {
  flex: 1;
  background: transparent; border: none;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--text-12); font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor: pointer;
  text-transform: capitalize;
}
.tweak-seg__item.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* --- Scene config-sheet primitives (depot + advice sheets) --- */
.cfg-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-base);
}

.cfg-section > label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover:not(.chip--active) {
  border-color: var(--primary);
}

.chip--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 500;
}

.chip--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.num-input {
  width: 5rem;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cfg-banner {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-base);
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.cfg-loading {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

/* Advice placement sheet: standard-text dropdown + photo thumbnails. */
.cfg-select {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
}
.cfg-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.cfg-photo {
  position: relative;
  width: 64px; height: 64px;
}
.cfg-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.cfg-photo__remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 11px; line-height: 1;
  cursor: pointer;
}
.cfg-photo__remove:hover { background: var(--surface-hover); color: var(--text-primary); }
.cfg-photo-error {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--status-red-soft);
  color: var(--status-red);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
/* Add-photo tile — a clearly-tappable affordance so it's obvious more than one photo
   can be attached (the bare native file input did not invite a second pick). */
.cfg-photo-add {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 64px; height: 64px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cfg-photo-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface-hover);
}
.cfg-photo-add input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cfg-photo-add__icon { font-size: 1.3rem; font-weight: 300; line-height: 1; }
.cfg-photo-add__label { font-size: 0.65rem; text-align: center; line-height: 1.1; padding: 0 var(--space-2xs); }
.cfg-photo-hint {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

/* ── SPIKE (Epic 7): Fabric background canvas behind the Blazor pin overlay ──
   The <floorplan-canvas> renders only the background image and owns pan/zoom.
   JS mirrors its viewportTransform onto .plan-paper (left/top/width/height +
   CSS matrix + --scene-zoom), so the percentage-positioned pins track the
   background. The paper chrome (white bg, shadow, fit-to-container sizing) is
   dropped in canvas mode; the canvas surface owns the visuals. */
.canvas-host__inner--canvas { padding: 0; }
.canvas-host__inner--canvas floorplan-canvas {
  position: absolute; inset: 0; display: block;
}
.canvas-host__inner--canvas .plan-paper {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: none;
  aspect-ratio: auto;
  width: 0; height: 0;            /* JS overrides once the viewport syncs */
  pointer-events: none;           /* canvas owns pan/zoom/placement... */
}
[data-theme="light"] .canvas-host__inner--canvas .plan-paper {
  box-shadow: none; border: none;
}
.canvas-host__inner--canvas .plan-paper .pin,
.canvas-host__inner--canvas .plan-paper .advice-pin {
  pointer-events: auto;           /* ...but pins + advice stay clickable for selection */
}
/* Counter-scale by the live zoom so glyphs stay screen-size-constant, while PRESERVING each
   pin type's anchor: base .pin (l1/l2) is centre-anchored (-50%,-50%); .pin--l3 depot teardrops
   and .advice-pin bubbles are tip-anchored (-50%,-100%) so the tip sits on the stored coordinate.
   (.pin--l3 must follow the .pin rule — equal specificity, source order decides.) */
.canvas-host__inner--canvas .plan-paper .pin {
  transform: translate(-50%, -50%) scale(calc(1 / var(--scene-zoom, 1)));
}
.canvas-host__inner--canvas .plan-paper .pin--l3 {
  transform: translate(-50%, -100%) scale(calc(1 / var(--scene-zoom, 1)));
}
.canvas-host__inner--canvas .plan-paper .advice-pin {
  transform: translate(-50%, -100%) scale(calc(1 / var(--scene-zoom, 1)));
}