:root {
  /* Brand palette — slate primary, orange CTA, warm neutrals.
     Slate                Orange              Neutrals
     #2F4156 deep         #E8602C orange      #F5F0EB warm off-white
     #4A6274 mid          #D94F1E orange-h    #E8DDD4 warm light gray
     #6B8499 light                            #1A2A36 slate-near-black */
  --slate-deep: #2F4156;
  --slate-mid: #4A6274;
  --slate-light: #6B8499;
  --orange: #E8602C;
  --orange-strong: #D94F1E;
  --warm-white: #F5F0EB;
  --warm-gray: #E8DDD4;
  --slate-ink: #1A2A36;

  /* Background gradient — soft warm wash on the body */
  --bg-grad-1: #FBF7F2;
  --bg-grad-2: #F5F0EB;
  --bg-grad-3: #EFE5DA;
  --surface: #ffffff;
  --surface-2: #FBF9F6;
  --border: #E8DDD4;
  --border-strong: #D4C7B7;
  --text: #1A2A36;
  --text-muted: #4A6274;

  /* Accent = orange CTA. Selection / focus also flow through these. */
  --accent: #E8602C;
  --accent-soft: rgba(232, 96, 44, 0.10);
  --accent-strong: #D94F1E;

  /* Grid (canvas-only). Slate-tinted instead of pure cool blue. */
  --grid-blue: #6B8499;
  --grid-blue-strong: #4A6274;
  --canvas-bg: #F5F0EB;

  /* Shadows — slate undertone instead of cool navy */
  --shadow-sm: 0 1px 2px rgba(26, 42, 54, 0.05);
  --shadow-md: 0 4px 16px rgba(26, 42, 54, 0.10);

  /* Reusable header-band gradient. The original theme used a purple-blue
     wash on every active mode pill, palette header, modal header, etc.;
     centralizing it here keeps the rest of the app pinned to the brand. */
  --header-band: linear-gradient(135deg, #F5F0EB 0%, #E8DDD4 100%);
  --header-band-hover: linear-gradient(135deg, #EFE5DA 0%, #DBCDBA 100%);

  /* CTA button gradient (replaces the purple gradient on prominent buttons) */
  --cta-grad: linear-gradient(135deg, #E8602C 0%, #D94F1E 100%);
  --cta-grad-hover: linear-gradient(135deg, #D94F1E 0%, #B84517 100%);

  --radius: 10px;
  --radius-sm: 6px;
  --topbar-h: 60px;
  /* Shared height for every box that sits in the topbar — control groups,
     the mode switch, the File button, the Tour / Feedback buttons — so they
     line up as one row instead of each sizing to its own content. */
  --topbar-ctl-h: 36px;
  --sidebar-w: 260px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  font-size: 14px;
  background:
    radial-gradient(1200px 600px at 0% 0%, var(--bg-grad-3) 0%, transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, var(--bg-grad-2) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

button { font-family: inherit; font-size: inherit; color: inherit; }
input, select { font-family: inherit; font-size: inherit; color: inherit; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar canvas";
  height: 100vh;
  width: 100vw;
}

/* ---------- Topbar ---------- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Plan + Buy Pro sit as two stacked chips beside the logo. */
.brand-plan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
  /* The PNG already has transparent canvas around the compass-and-EZ mark,
     so we can let it sit directly against the topbar without a tile/badge. */
  object-fit: contain;
}

/* Plan badge — pill next to the logo that reads "Free" until the
   visitor's session resolves to an active "base" entitlement, at which
   point it flips to "Pro". js/auth.js drives the class swap. */
.plan-badge {
  display: block;
  text-align: center;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.plan-badge-free {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
.plan-badge-pro {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-strong);
}
/* "Buy Pro →" — the second stacked chip under the plan badge, a filled
   accent button. Hidden cleanly via [hidden] once the visitor's
   entitlement check resolves to active. */
.buy-pro-link {
  display: block;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent);
  text-decoration: none;
  padding: 2px 9px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.buy-pro-link:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.buy-pro-link[hidden] { display: none; }

.topbar-menus {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  height: var(--topbar-ctl-h);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 2px;
  gap: 2px;
}

.mode-btn {
  height: 100%;
  padding: 0 14px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 120ms ease, color 120ms ease;
}
.mode-btn:hover { color: var(--accent-strong); }
.mode-btn.active {
  background: var(--header-band);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--topbar-ctl-h);
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.menu-trigger:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.menu-trigger.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.menu-caret {
  font-size: 10px;
  color: var(--text-muted);
}

.topbar-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 12;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.topbar-menu.hidden { display: none; }

.menu-item {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  color: var(--text);
}
.menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.menu-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.menu-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Signed-in email shown above Log Out in the File menu — a non-interactive
   label, not a menu item. */
.menu-label {
  padding: 2px 10px 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* Take-the-Tour button — filled accent so a first-time user's eye lands
   on it. Carries the margin-left:auto that right-aligns the whole
   tour + feedback button pair (feedback-btn just sits beside it). */
.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--topbar-ctl-h);
  padding: 0 12px;
  margin-left: auto;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  /* Keep the label on one line and never let the flex row squeeze the
     button below its content — without these the text wraps inside the
     fixed-height pill and clips into an unreadable stack. */
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tour-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.tour-btn:active { transform: translateY(1px); }
.tour-btn svg { flex-shrink: 0; }

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--topbar-ctl-h);
  padding: 0 12px;
  margin-left: 8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.feedback-btn:hover {
  background: var(--accent);
  color: #ffffff;
}
.feedback-btn:active { transform: translateY(1px); }
.feedback-btn svg { flex-shrink: 0; }

/* ---------- Topbar — responsive ---------- */
/* The topbar is a single fixed-height row, so as the window narrows it has
   to give up width gracefully rather than overflow. Three steps:
   tighten spacing → drop the control captions → collapse the
   Tour / Feedback buttons to icon-only. */
@media (max-width: 1400px) {
  .topbar { gap: 14px; padding: 0 12px; }
  .topbar-controls { gap: 9px; }
  .control-group { gap: 6px; padding: 0 8px; }
  /* "ZOOM" / "GRID" / "Opacity" captions — the controls read without them,
     and dropping them keeps the groups at full size (no squeeze) well
     before the topbar would run out of room. */
  .control-label,
  .control-sublabel { display: none; }
}
@media (max-width: 1160px) {
  /* Collapse the Tour / Feedback buttons to icon-only squares. */
  .tour-btn span,
  .feedback-btn span { display: none; }
  .tour-btn,
  .feedback-btn {
    width: var(--topbar-ctl-h);
    padding: 0;
    justify-content: center;
  }
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-ctl-h);
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* A control group is a fixed-content box — never let the topbar flex
     squeeze it, which would wrap / clip the controls inside. */
  flex-shrink: 0;
}

.control-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-right: 2px;
}

.control-suffix {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.readout {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 44px;
  text-align: center;
}

.control-group input[type="number"] {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  outline: none;
}
.control-group input[type="number"]:focus { border-color: var(--accent); }

.control-group select {
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  outline: none;
  min-width: 110px;
}
.control-group select:focus { border-color: var(--accent); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--accent); }

.control-divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 2px;
  display: inline-block;
}

.control-sublabel {
  font-size: 11px;
  color: var(--text-muted);
}

.grid-opacity {
  width: 70px;
  accent-color: var(--accent);
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent-strong);
}

.btn-block {
  width: 100%;
  justify-content: flex-start;
  padding: 0 12px;
  height: 32px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  grid-area: sidebar;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 18px;
  /* Scroll the whole rail when content overflows — plan mode stacks several
     sections (Sheets / Sheet Setup / Title Block / Notes) that easily
     outgrow the viewport. Keep horizontal overflow hidden so wide content
     never pushes the layout sideways. */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-layers {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each row holds one or two tools; paired tools split the width evenly. */
.tool-row {
  display: flex;
  gap: 4px;
}
.tool-row > .tool {
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
  padding: 0 7px;
}
/* Reclaim a little width in the tighter paired rows. */
.tool-row > .tool .tool-key { padding: 3px 4px; min-width: 0; }

.tool {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.tool:hover { background: var(--accent-soft); }
.tool.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}
.tool svg { flex-shrink: 0; }
.tool span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keyboard-shortcut badge, pinned to the right edge of each tool row.
   margin-left:auto pushes it past the label so every key lines up in a
   column regardless of label length. */
.tool-key {
  margin-left: auto;
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 5px;
  min-width: 18px;
  text-align: center;
}
.tool.active .tool-key {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.tool.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}
.tool.disabled:hover {
  background: transparent;
  border-color: var(--border);
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-status {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  gap: 4px;
  flex-shrink: 0;
  margin-top: auto;
}
.status-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 4px;
}
.status-row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Canvas area ---------- */
.canvas-wrap {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
}

/* Plan mode — suppress draw-mode chrome (floating panels, contextual modals,
   status hint) and swap the sidebar contents to the sheet list. The canvas
   grid itself is hidden from the renderer in render.js, not via CSS. */
body.mode-plan .draw-only { display: none !important; }
body.mode-draw .plan-only { display: none !important; }
body.mode-plan #board { cursor: grab; }
body.mode-plan #board:active { cursor: grabbing; }
body.mode-plan .palette-panel,
body.mode-plan .hint,
body.mode-plan .dim-modal,
body.mode-plan .line-modal,
body.mode-plan .measure-modal,
body.mode-plan .floor-modal,
body.mode-plan .island-modal,
body.mode-plan .text-modal,
body.mode-plan .stairs-modal,
body.mode-plan .cabinet-modal,
body.mode-plan .layer-hint-modal,
body.mode-plan .text-inline-editor {
  display: none !important;
}

/* ---------- Sheet list (plan mode sidebar) ---------- */
.sheet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 2px;
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.sheet-row:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.sheet-row.active {
  background: var(--header-band);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
/* In draw view, schedule / index (non-drawing) pages have no drawing region to
   position over the canvas, so their rows are inert — dimmed and unclickable.
   They stay fully editable in plan view, where their content lives. */
body.mode-draw .sheet-row.non-drawing {
  opacity: 0.5;
  pointer-events: none;
}

.sheet-number {
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 42px;
}

.sheet-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-row .icon-btn {
  visibility: hidden;
}
.sheet-row:hover .icon-btn,
.sheet-row.active .icon-btn {
  visibility: visible;
}

/* ---------- Sheet properties (plan mode sidebar) ---------- */
.prop-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 2px;
}

.prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prop-row > label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex: 0 0 78px;
}

.prop-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  outline: none;
}
.prop-input:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* General Notes — multi-line, so it overrides the fixed input height and the
   row aligns its label to the top. Kept compact so the title-block column
   doesn't balloon. */
.prop-textarea {
  height: auto;
  min-height: 56px;
  padding: 5px 8px;
  line-height: 1.35;
  resize: vertical;
}
.prop-row-notes {
  align-items: flex-start;
}
.prop-row-notes > label {
  padding-top: 5px;
}

.prop-toggle {
  display: inline-flex;
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.prop-toggle button {
  flex: 1;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.prop-toggle button:hover { color: var(--accent-strong); }
.prop-toggle button.active {
  background: var(--header-band);
  color: var(--accent-strong);
}
.prop-toggle button + button {
  border-left: 1px solid var(--border-strong);
}

/* ---------- Notes editor (plan mode sidebar) ---------- */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}

.note-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.note-num {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

.note-text {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 32px;
}
.note-text:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}

.note-row .icon-btn {
  margin-top: 4px;
}

.notes-empty {
  padding: 8px 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Sheet layer tree (plan mode) ---------- */
.sheet-layer-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px;
}

.sheet-story {
  display: flex;
  flex-direction: column;
}

.sheet-story-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(232, 96, 44, 0.06);
  border: 1px solid rgba(232, 96, 44, 0.12);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.sheet-story-header.global-hidden,
.sheet-sub-row.global-hidden {
  opacity: 0.45;
}

.sheet-story-header input[type="checkbox"],
.sheet-sub-row input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.sheet-story-header .sheet-story-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-sub-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 4px 10px;
  padding-left: 6px;
  border-left: 1px dashed var(--border-strong);
}

.sheet-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.sheet-sub-row:hover {
  background: var(--accent-soft);
}

.sheet-sub-row .color-bubble {
  width: 12px;
  height: 12px;
  margin-right: 0;
  pointer-events: none;
}

.sheet-sub-row .sheet-sub-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#board {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.canvas-wrap.tool-pan #board { cursor: grab; }
.canvas-wrap.tool-pan.panning #board { cursor: grabbing; }
.canvas-wrap.panning #board { cursor: grabbing; }
.canvas-wrap.tool-select #board { cursor: default; }

.hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

kbd {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text);
}

/* ---------- Layer Tree ---------- */
.btn-mini {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-mini:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.layer-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 2px 0;
}

.story {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(232, 96, 44, 0.06);
  border: 1px solid rgba(232, 96, 44, 0.12);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.story-name {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 0;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.icon-btn.muted {
  opacity: 0.35;
}

.expand-btn {
  transition: transform 150ms ease;
}
.story.collapsed .expand-btn {
  transform: rotate(-90deg);
}

.sub-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 4px 10px;
  padding-left: 6px;
  border-left: 1px dashed var(--border-strong);
}

.story.collapsed .sub-list {
  display: none;
}

.sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  border: 1px solid transparent;
  user-select: none;
}
.sub-row:hover {
  background: var(--accent-soft);
}
.sub-row.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.sub-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Action row (icon buttons) ---------- */
.sidebar-actions { flex-shrink: 0; }

.action-row {
  display: flex;
  gap: 6px;
}

.action-icon {
  flex: 1;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.action-icon:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.action-icon:active { transform: translateY(1px); }

.action-icon.action-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  gap: 5px;
}
/* The Undo/Redo shortcut badge sits beside the label, centred with it —
   not pushed to the edge the way the full-width tool rows do it. */
.action-row .tool-key { margin-left: 0; }

/* ---------- Floating panels (Layers + Doors/Windows palette) ---------- */
.palette-panel {
  position: absolute;
  width: 280px;
  height: 380px;
  min-width: 220px;
  min-height: 90px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 6;
  user-select: none;
}
.palette-panel.hidden { display: none; }

#layers-panel {
  top: 16px;
  right: 16px;
  width: 300px;
  height: 420px;
}

#palette-panel {
  top: 452px;
  right: 16px;
}

#layers-panel .palette-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px 8px;
}

#layers-panel .palette-header { gap: 8px; }
#layers-panel .palette-header .btn-mini { font-size: 11px; padding: 3px 8px; }
.palette-panel.minimized {
  height: auto !important;
  min-height: 0;
}
.palette-panel.minimized .palette-body,
.palette-panel.minimized .palette-resize { display: none !important; }

.palette-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--header-band);
  border-bottom: 1px solid var(--border);
  cursor: move;
  flex-shrink: 0;
}
.palette-panel.minimized .palette-header { border-bottom: none; }

.palette-title {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.palette-min {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 4px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.palette-min:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

.palette-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}

.palette-section { display: flex; flex-direction: column; }

.palette-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.palette-section-header:hover { background: var(--accent-soft); color: var(--accent-strong); }
.palette-section-header svg { transition: transform 150ms ease; flex-shrink: 0; }
.palette-section.collapsed .palette-section-header svg { transform: rotate(-90deg); }
.palette-section.collapsed .palette-section-content { display: none; }

.palette-section-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 4px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: grab;
  font-size: 12px;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
  touch-action: none;
}
.palette-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.palette-item:active { cursor: grabbing; }

.palette-item-icon {
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.palette-item-icon svg { width: 100%; height: 100%; display: block; }

.palette-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Edit pencil shown next to custom-built furniture pieces. Stays muted
   until hover so it doesn't pull focus away from the palette icon. */
.palette-item-edit {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.palette-item-edit:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.palette-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--border-strong) 50%, var(--border-strong) 58%, transparent 58%, transparent 70%, var(--border-strong) 70%, var(--border-strong) 78%, transparent 78%);
  z-index: 1;
}

/* ---------- Dimension Modal ---------- */
.dim-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  z-index: 7;
  min-width: 200px;
}
.dim-modal.hidden { display: none; }

.dim-row { display: flex; align-items: center; gap: 8px; }

.dim-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dim-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  font-variant-numeric: tabular-nums;
  width: 100px;
}
.dim-input:focus { border-color: var(--accent); background: var(--surface); }

/* Door / window width stepper — minus / readout / plus. Replaces the
   free-text size input so a non-technical user never has to know the
   3'-0" architectural format. */
.dim-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.dim-step-btn {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dim-step-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.dim-step-btn:active { transform: translateY(0.5px); }
.dim-width-readout {
  flex: 1;
  min-width: 70px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dim-flip-row { margin-top: 6px; }
.dim-flip-row.hidden { display: none; }

.flip-group {
  display: flex;
  gap: 4px;
  flex: 1;
}

.flip-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.flip-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.flip-btn:active { transform: translateY(0.5px); }
.flip-icon { font-size: 14px; line-height: 1; }

.dim-hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}
.dim-hint code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
}

.canvas-wrap.placing #board { cursor: copy; }

/* ---------- Layer color bubble + picker popup ---------- */
.color-bubble {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  padding: 0;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.color-bubble:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--accent);
}

.color-popup {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(6, 24px);
  gap: 6px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 9;
}
.color-popup.hidden { display: none; }

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-strong);
  padding: 0;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.color-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--accent);
}
.color-swatch.selected {
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 2px #fff;
}

/* ---------- Line stroke modal ---------- */
.line-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  z-index: 7;
}
.line-modal.hidden { display: none; }

.stroke-group {
  display: flex;
  gap: 4px;
}

.stroke-btn {
  width: 38px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.stroke-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.stroke-btn.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

/* ---------- Wall thickness picker (in line modal) ---------- */
.wall-thickness-row { margin-top: 6px; }
.wall-thickness-row.hidden { display: none; }

.line-modal { min-width: 220px; }
.line-modal .dim-row.hidden { display: none; }

.wall-thickness-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}

.wall-thickness-btn {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.wall-thickness-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.wall-thickness-btn.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

.wall-thickness-input {
  flex: 1;
  min-width: 70px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.wall-thickness-input:focus { border-color: var(--accent); background: var(--surface); }

/* ---------- Measure type modal ---------- */
.measure-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  z-index: 7;
}
.measure-modal.hidden { display: none; }

/* ---------- Floor pattern modal ---------- */
.floor-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  z-index: 7;
}
.floor-modal.hidden { display: none; }
.floor-modal .dim-input {
  width: auto;
  min-width: 168px;
}

.measure-type-group {
  display: flex;
  gap: 4px;
  flex: 1;
}

.measure-type-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.measure-type-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.measure-type-btn.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

/* The cent sign is the closest typographic stand-in for the architectural
   centerline symbol — vertical strike through a C. Slight serif font reads
   cleaner at small sizes. */
.centerline-symbol {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* ---------- Island modal ---------- */
.island-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  z-index: 7;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.island-modal.hidden { display: none; }
.island-modal .dim-row.hidden { display: none; }

.island-modal select.dim-input {
  cursor: pointer;
  width: 130px;
}

/* ---------- Furniture builder modal ---------- */
.builder-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 42, 54, 0.45);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-modal.hidden { display: none; }

.builder-window {
  width: min(1040px, 92vw);
  height: min(720px, 88vh);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(26, 42, 54, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.builder-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--header-band);
  border-bottom: 1px solid var(--border);
}
.builder-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.builder-header input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.builder-header input[type="text"]:focus { border-color: var(--accent); }

.builder-save-btn {
  background: var(--cta-grad);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.builder-save-btn:hover {
  background: var(--cta-grad-hover);
  color: #fff;
  border-color: transparent;
}

.builder-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.builder-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.builder-tool:hover { background: var(--accent-soft); }
.builder-tool.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.builder-divider {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  margin: 0 4px;
}
.builder-flex { flex: 1; }
.builder-zoom-readout {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.builder-zoom-readout:hover { color: var(--text); }
.builder-stage.cursor-grab canvas { cursor: grab; }
.builder-stage.cursor-grabbing canvas { cursor: grabbing; }
.builder-readout {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 100px;
  text-align: right;
}

.builder-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--canvas-bg);
  display: flex;
}
.builder-stage canvas {
  flex: 1;
  display: block;
  cursor: crosshair;
}
.builder-stage.cursor-default canvas { cursor: default; }
.builder-stage.cursor-move canvas { cursor: move; }

.builder-props {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 200px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.builder-props.hidden { display: none; }
.builder-props .dim-row { gap: 8px; }
.builder-props label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.builder-props .builder-prop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.builder-props input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.builder-props input[type="text"] {
  width: 70px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.builder-prop-readonly {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.builder-status {
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--surface-2);
}

/* ---------- Text modal ---------- */
.text-modal {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.text-modal.hidden { display: none; }

.text-modal .dim-input {
  flex: 1;
  width: auto;
}

.text-modal select.dim-input {
  cursor: pointer;
}

/* ---------- Inline text editor ----------
   A transparent textarea overlaid exactly where the note renders on the
   canvas, so typing IS the live preview. Font / size / color / alignment are
   set from the shape in JS (syncTextInlineEditor) and the canvas suppresses
   the shape's own draw while this is open. */
.text-inline-editor {
  position: absolute;
  background: transparent;
  /* Outline (not border) so the dashed edit affordance adds no layout box —
     the textarea's content top-left lands exactly on the note's anchor. */
  border: none;
  padding: 0;
  margin: 0;
  outline: 1px dashed var(--accent);
  outline-offset: 1px;
  z-index: 8;
  resize: none;
  overflow: hidden;
  white-space: pre;
  box-sizing: content-box;
  line-height: 1.2;
  caret-color: var(--accent);
  transform-origin: top left;
}
.text-inline-editor.hidden { display: none; }

/* ---------- Text note color swatches (in the text modal) ---------- */
.text-color-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
}
.text-color-swatches .color-swatch {
  width: 20px;
  height: 20px;
}

/* ---------- Text alignment button group (in the text modal) ---------- */
.text-align-group {
  display: flex;
  gap: 4px;
  flex: 1;
}
.text-align-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 5px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--slate-ink, #1A2A36);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.text-align-btn:hover { border-color: var(--accent); }
.text-align-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Stairs modal ---------- */
.stairs-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.stairs-modal.hidden { display: none; }

/* Traditional / Spiral tab strip at the top of the stairs modal. */
.stairs-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.stairs-tab {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.stairs-tab:hover { color: var(--text); }
.stairs-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.stairs-tab-panel { display: flex; flex-direction: column; gap: 6px; }
.stairs-tab-panel.hidden { display: none; }

/* "Stairs hug wall" toggle row. */
.stairs-hug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  margin-top: 2px;
}
.stairs-hug-row input { margin: 0; cursor: pointer; }

/* Numeric stepper (value + stacked up/down arrows) used by the spiral tab. */
.num-stepper {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.num-stepper-input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: center;
}
.num-stepper-btns {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  overflow: hidden;
}
.num-stepper-btn {
  appearance: none;
  background: var(--surface-2, #f3f4f6);
  border: none;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1;
  padding: 0 6px;
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.num-stepper-btn:first-child { border-bottom: 1px solid var(--border); }
.num-stepper-btn:hover { background: var(--border); color: var(--text); }

.stairs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.stairs-build-btn {
  background: var(--cta-grad);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.stairs-build-btn:hover {
  background: var(--cta-grad-hover);
  color: #fff;
  border-color: transparent;
}

/* ---------- Cabinet builder modal ---------- */
.cabinet-modal {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px 14px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}
.cabinet-modal.hidden { display: none; }

/* While the cabinet builder is active, the modal lives inside the palette body
   instead of floating over the canvas — gives the user the full canvas area
   to click nodes. Strip the absolute positioning and shadow. */
.cabinet-modal.in-palette {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  box-shadow: none;
  background: var(--header-band);
  border-color: var(--accent);
  z-index: auto;
}

.cabinet-modal-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.cabinet-modal-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.cabinet-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.cabinet-finish-btn {
  background: var(--cta-grad);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.cabinet-finish-btn:hover {
  background: var(--cta-grad-hover);
  color: #fff;
  border-color: transparent;
}

.cabinet-side-group {
  display: flex;
  gap: 4px;
  flex: 1;
}

.cabinet-side-btn {
  flex: 1;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cabinet-side-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.cabinet-side-btn.active {
  background: var(--header-band);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ---------- Layer hint modal ---------- */
.layer-hint-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 11;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  max-width: 360px;
  overflow: hidden;
}
.layer-hint-modal.hidden { display: none; }

.layer-hint-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--header-band);
  border-bottom: 1px solid var(--border);
}
.layer-hint-title {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.layer-hint-close {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.layer-hint-close:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.layer-hint-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.layer-hint-text {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.layer-hint-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.layer-hint-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.layer-hint-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.layer-hint-item .color-bubble {
  margin-right: 0;
  cursor: pointer;
}
.layer-hint-item-story {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Inline delete button on layer rows / story headers */
.delete-btn {
  color: var(--text-muted);
}
.delete-btn:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

/* Cabinet builder tool button at the top of the kitchen palette */
.palette-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin: 4px 0 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--header-band);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 60ms ease;
}
.palette-tool-btn:hover {
  background: var(--header-band-hover);
}
.palette-tool-btn:active { transform: translateY(0.5px); }
.palette-tool-btn svg { flex-shrink: 0; }

/* ---------- Right-click context menu ---------- */
.ctx-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(26, 42, 54, 0.18);
  padding: 4px;
  z-index: 50;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  user-select: none;
}
.ctx-menu.hidden { display: none; }

.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
}
.ctx-item:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.ctx-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ctx-shortcut {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 16px;
}
.ctx-item:hover:not(:disabled) .ctx-shortcut { color: var(--accent-strong); }

.ctx-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Floating combine bar — shown when 2+ area callouts are selected. */
.area-total-box {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 40;
  font-size: 13px;
  color: var(--text);
}
.area-total-box.hidden { display: none; }
.area-total-text { font-weight: 600; white-space: nowrap; }
.area-total-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.area-total-btn:hover { background: var(--accent-strong); }

/* ---------- In-app Help (File → Help) ---------- */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 42, 54, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.help-overlay.hidden { display: none; }
.help-panel {
  display: flex;
  flex-direction: column;
  width: min(900px, 94vw);
  height: min(82vh, 760px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.help-title { font-size: 15px; font-weight: 700; color: var(--text); }
.help-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
}
.help-close:hover { background: var(--accent-soft); color: var(--accent-strong); }
.help-content { display: flex; flex: 1; min-height: 0; }
.help-nav {
  flex: 0 0 196px;
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.help-nav a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.help-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 8px 24px 28px;
  color: var(--text);
}
.help-body section { padding-top: 14px; }
.help-body h3 { font-size: 14.5px; margin: 10px 0 6px; color: var(--text); }
.help-body p { font-size: 13px; line-height: 1.55; margin: 6px 0; }
.help-body ul { margin: 6px 0; padding-left: 20px; }
.help-body li { font-size: 13px; line-height: 1.5; margin: 4px 0; }
.help-body code {
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.help-link-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
}
.help-link-btn:hover { background: var(--accent-strong); }
.help-keys { width: 100%; border-collapse: collapse; margin-top: 8px; }
.help-keys td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: top;
}
.help-keys td:last-child { white-space: nowrap; color: var(--text-muted); }
.help-overlay kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg, #fff);
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
}

/* ---------- Print pipeline ----------
   The export flow renders each sheet to an offscreen-resized canvas and
   stuffs the resulting PNGs into #print-stage. Only that container is
   visible during print; everything else gets visibility:hidden so the page
   layout stays intact (print preview can use absolute positions of the
   stage children) while the on-screen UI doesn't print. */
@media screen {
  #print-stage { display: none; }
}

@media print {
  /* Hide the whole app, then unhide just the print stage. visibility lets
     the absolutely-positioned stage cover the page without DOM acrobatics. */
  body * { visibility: hidden; }
  #print-stage, #print-stage * { visibility: visible; }

  #print-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .print-page {
    page-break-after: always;
    page-break-inside: avoid;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
  }
  .print-page:last-child { page-break-after: auto; }

  .print-page img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Zero printer margins — our title block / border are part of the
     rendered image and shouldn't be inset by the browser's defaults. */
  @page { margin: 0; }
}

/* ============================================================
   Demo mode — minimal UI for the embedded marketing widget.
   Activated by adding `demo-mode` class to <body> from
   js/demo-mode.js when ?demo=<name> is in the URL. Outside of
   demo mode none of these rules apply.
   ============================================================ */

body.demo-mode .topbar,
body.demo-mode .sidebar,
body.demo-mode #layers-panel,
body.demo-mode #palette-panel,
body.demo-mode .hint,
body.demo-mode #ctx-menu,
body.demo-mode #file-menu,
body.demo-mode #layer-hint-modal {
  display: none !important;
}

/* ============================================================
   Walkthrough — first-time-user tour. js/tour.js inserts a
   .tour-card at the bottom of the viewport and adds .tour-target
   to the element it wants the user to look at next. The card stays
   put across steps; only its copy + the highlighted target change.

   The first step (and any step flagged as "spotlight") gets a
   centered, scaled-up presentation with a dim backdrop and a
   glowing pulse — that's the impossible-to-miss landing card the
   non-tech-savvy audience needs as their first impression.
   ============================================================ */

.tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 24, 36, 0.45);
  z-index: 999;
  opacity: 0;
  transition: opacity 220ms ease;
  /* Only the welcome / spotlight step wants the backdrop to actually catch
     clicks. The element is created at tour start and reused across every
     step, so leaving it click-eating at all times silently disables the
     canvas on non-spotlight steps — the user clicks to draw a wall, the
     invisible backdrop swallows the pointerdown, and they bail with Esc
     (which marks the tour completed and stops it from auto-firing again).
     pointer-events flips on with .visible to dodge that whole class of bug. */
  pointer-events: none;
}
.tour-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.tour-card {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(26, 42, 54, 0.18), var(--shadow-md);
  padding: 14px 18px 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  user-select: none;
  transition: transform 260ms ease, bottom 260ms ease, top 260ms ease,
              padding 220ms ease, box-shadow 220ms ease;
}

/* While the walkthrough is running, any editing popup that opens (line/wall
   thickness, dimensions, text, measurements, etc.) must sit above the tour
   card (z-index 1000) and backdrop (999) so it isn't hidden behind them. The
   bump is scoped to .tour-running so normal popup stacking is left untouched. */
body.tour-running .dim-modal,
body.tour-running .line-modal,
body.tour-running .measure-modal,
body.tour-running .island-modal,
body.tour-running .text-modal,
body.tour-running .stairs-modal,
body.tour-running .cabinet-modal,
body.tour-running .color-popup,
body.tour-running .layer-hint-modal {
  z-index: 1001;
}

/* Spotlight presentation — used for the welcome step. Centers the card,
   bumps padding / type size, and runs a glowing pulse around the border
   so the user immediately knows where to look. */
.tour-card.tour-card-spotlight {
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 40px));
  padding: 28px 32px 24px;
  border-color: var(--accent);
  box-shadow: 0 24px 60px rgba(13, 24, 36, 0.35),
              0 0 0 6px rgba(232, 96, 44, 0.15);
  animation: tour-card-pulse 2.2s ease-in-out infinite;
}
.tour-card.tour-card-spotlight .tour-card-title {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.tour-card.tour-card-spotlight .tour-card-body {
  font-size: 15px;
  line-height: 1.6;
}
.tour-card.tour-card-spotlight .tour-card-step {
  font-size: 11px;
}
.tour-card.tour-card-spotlight .tour-card-next {
  padding: 10px 22px;
  font-size: 14px;
}

@keyframes tour-card-pulse {
  0%, 100% {
    box-shadow: 0 24px 60px rgba(13, 24, 36, 0.35),
                0 0 0 6px rgba(232, 96, 44, 0.15),
                0 0 0 14px rgba(232, 96, 44, 0.0);
  }
  50% {
    box-shadow: 0 24px 60px rgba(13, 24, 36, 0.35),
                0 0 0 10px rgba(232, 96, 44, 0.30),
                0 0 0 24px rgba(232, 96, 44, 0.10);
  }
}

.tour-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tour-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.tour-card-step {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-card-body {
  color: var(--text);
}

.tour-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.tour-card-skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
}
.tour-card-skip:hover { color: var(--text); }

.tour-card-next {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.tour-card-next:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.tour-card-next:active { transform: translateY(1px); }

/* Glow around whatever element the current step is asking the user to
   interact with. Uses outline + box-shadow ONLY — no `position` or
   `z-index` here. Setting `position: relative` would override the
   `position: absolute` on already-floating targets like .palette-panel
   and yank them into normal flow, sending them off-screen. The outline
   is visible regardless of stacking context. */
.tour-target {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  animation: tour-target-pulse 1.6s ease-in-out infinite;
}
@keyframes tour-target-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(232, 96, 44, 0.30);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(232, 96, 44, 0.55);
  }
}

/* In demo-mode the tour stays out of the way — the marketing widget has
   its own onboarding hint pill and the full tour would crowd the embed. */
body.demo-mode .tour-card { display: none !important; }

/* ============================================================
   In-app dialogs — branded replacement for native alert/
   confirm/prompt. Container (.app-dialog) is the dimmed
   backdrop; .app-dialog-window is the centered card that
   gets focus-trapped when the dialog is up. js/dialogs.js
   builds the window contents per call.
   ============================================================ */

.app-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 42, 54, 0.45);
  z-index: 1200;
}
.app-dialog.hidden { display: none; }

.app-dialog-window {
  width: min(440px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(26, 42, 54, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-dialog-title {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.app-dialog-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-dialog-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

.app-dialog-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.app-dialog-input:focus {
  border-color: var(--accent);
  background: #fff;
}

.app-dialog-actions {
  padding: 10px 14px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.app-dialog-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.app-dialog-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.app-dialog-btn:active { transform: translateY(1px); }
.app-dialog-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.app-dialog-btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.app-dialog-btn.primary.danger {
  background: #c53030;
  border-color: #c53030;
}
.app-dialog-btn.primary.danger:hover {
  background: #9b2c2c;
  border-color: #9b2c2c;
}

/* ============================================================
   Settings modal — File → Settings… opens a centered card with
   the unit-system toggle (and any future global preferences).
   ============================================================ */

.settings-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 42, 54, 0.45);
  z-index: 1100;
}
.settings-modal.hidden { display: none; }

.settings-window {
  width: min(480px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(26, 42, 54, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.settings-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.settings-section {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section + .settings-section {
  border-top: 1px solid var(--border);
}
.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.settings-section-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.settings-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  font-size: 13px;
  color: var(--text);
}
.settings-radio:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.settings-radio input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-radio strong { font-weight: 600; }


body.demo-mode .app {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "canvas";
}

body.demo-mode .canvas-wrap {
  grid-area: canvas;
  position: relative;
}

#demo-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(26, 42, 54, 0.12);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(26, 42, 54, 0.10);
  z-index: 10;
}

.demo-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #4a6274;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: 600 13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 0.15s ease, color 0.15s ease;
}

.demo-tool:hover {
  background: #f5f0eb;
  color: #2f4156;
}

.demo-tool.active {
  background: #2f4156;
  color: #ffffff;
}

#demo-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #2f4156;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(26, 42, 54, 0.18);
  font: 500 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 240px;
  z-index: 10;
  pointer-events: none;
}

.demo-hint-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  color: #f47b3e;
}

.demo-hint-tips {
  display: grid;
  gap: 4px;
  line-height: 1.4;
}

.demo-hint-tips b { color: #f47b3e; font-weight: 700; }

#demo-fullcta {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #e8602c;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  font: 600 13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(232, 96, 44, 0.25);
  transition: background 0.15s ease, transform 0.1s ease;
  z-index: 10;
}

#demo-fullcta:hover {
  background: #d94f1e;
  transform: translateY(-1px);
}

/* Compact layout for narrow embeds (mobile or small iframe). The hint pill
   is the first thing to drop because it's "nice-to-have" copy; the toolbar
   and CTA stay at full size since they're functional. */
@media (max-width: 640px) {
  #demo-hint { display: none; }
  #demo-toolbar { top: 8px; left: 8px; }
  #demo-fullcta { bottom: 8px; right: 8px; padding: 8px 12px; font-size: 12px; }
}

/* ============================================================
   Feedback modal — Give Feedback button in the topbar opens this.
   Visual style mirrors the settings modal so the two read as
   the same family of dialog.
   ============================================================ */

.feedback-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 42, 54, 0.45);
  z-index: 1100;
}
.feedback-modal.hidden { display: none; }

.feedback-window {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(26, 42, 54, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.feedback-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.feedback-hint {
  margin: 0;
  padding: 14px 18px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.feedback-textarea {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.feedback-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 96, 44, 0.15);
}

.feedback-meta {
  padding: 10px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feedback-meta-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.link-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent-strong);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--accent); }

.feedback-report {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.feedback-report.hidden { display: none; }

.feedback-status {
  padding: 0 18px;
  min-height: 18px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.feedback-status.error { color: #c0392b; }
.feedback-status.success { color: #15803d; }

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  margin-top: 12px;
}
.feedback-submit-btn {
  padding: 8px 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.feedback-submit-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.feedback-submit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}