* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #eef0f4; color: #23272e; display: flex; flex-direction: column;
  overflow: hidden;
}

/* top bar */
.rp-header {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: #ffffff; border-bottom: 1px solid #dde0e6; z-index: 10;
}
.rp-header a.rp-back { color: #6b7280; text-decoration: none; font-size: 14px; }
.rp-header a.rp-back:hover { color: #23272e; }
.rp-header h1 { font-size: 16px; margin: 0; font-weight: 600; }
.rp-header .rp-tag {
  font-size: 12px; color: #5b6470; background: #eef2f8;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
@media (max-width: 1080px) { .rp-header .rp-tag { display: none; } }
.rp-header .rp-spacer { flex: 1; }

.rp-btn {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid #d4d8df; background: #fff; color: #23272e; cursor: pointer;
}
.rp-btn:hover { background: #f4f6f9; }
.rp-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.rp-btn.primary:hover { background: #1d4fd8; }
.rp-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.rp-btn:disabled { opacity: 0.45; cursor: default; }

/* main split */
.rp-main { flex: 1; display: flex; min-height: 0; }
.rp-side {
  width: 340px; min-width: 340px; background: #fff; border-right: 1px solid #dde0e6;
  padding: 18px; overflow-y: auto;
}
.rp-view { flex: 1; position: relative; min-width: 0; }
.rp-view canvas { display: block; }

/* forms */
.rp-side h2 { font-size: 14px; margin: 0 0 10px; }
.rp-side .hint { font-size: 12.5px; color: #6b7280; line-height: 1.5; }
.rp-field { margin: 10px 0; }
.rp-field label { display: block; font-size: 12px; color: #4b5563; margin-bottom: 4px; }
.rp-field input, .rp-field select {
  width: 100%; font: inherit; font-size: 14px; padding: 7px 9px;
  border: 1px solid #d4d8df; border-radius: 8px; background: #fff;
}
.rp-row { display: flex; gap: 10px; }
.rp-row .rp-field { flex: 1; }

/* selected-opening inspector (width / height / sill) */
.rp-inspector {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: #4b5563; box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-inspector .t { font-weight: 600; font-size: 12.5px; color: #23272e; }
.rp-inspector label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp-inspector input {
  width: 72px; font: inherit; padding: 3px 6px;
  border: 1px solid #d4d8df; border-radius: 6px;
}
.rp-inspector .btns { display: flex; gap: 6px; margin-top: 2px; }
.rp-inspector .btns .rp-btn { flex: 1; padding: 4px 8px; font-size: 12px; }

/* context menu (right-click / long-press) */
.rp-menu {
  position: absolute; z-index: 8; min-width: 160px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px; padding: 4px;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14);
}
.rp-menu button {
  font: inherit; font-size: 13px; text-align: left; padding: 8px 12px;
  border: none; background: none; border-radius: 7px; cursor: pointer; color: #23272e;
}
.rp-menu button:hover { background: #eef2f8; }


/* zoom / fit controls in the 2D pane */
.rp-zoombar {
  position: absolute; right: 12px; bottom: calc(12px + var(--bars, 0px)); display: flex; gap: 4px; z-index: 5;
  background: #fff; padding: 4px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-zoombar .rp-btn { padding: 4px 11px; font-size: 14px; border: none; }
.rp-zoombar .rp-btn:hover { background: #eef2f8; }

/* clickable dimension labels + inline length editor */
.rp-pane svg text.dim { cursor: pointer; }
.rp-pane svg text.dim:hover { fill: #2563eb; font-weight: 600; }
.rp-dim-input {
  position: absolute; width: 88px; z-index: 6; text-align: center;
  font: 13px "Inter", system-ui, sans-serif; padding: 4px 6px;
  border: 1.5px solid #2563eb; border-radius: 7px; background: #fff;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.12);
}

/* shadows toggle chip, injected by the shared viewer */
.rp-shadow-chip {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  font: inherit; font-size: 12px; color: #6b7280; cursor: pointer;
  background: rgba(255,255,255,0.9); border: 1px solid #dde0e6;
  padding: 5px 11px; border-radius: 99px;
}
.rp-shadow-chip:hover { color: #23272e; }
.rp-shadow-chip[data-on="1"] { color: #1d4fd8; border-color: #93b6f2; background: #eff4fe; }

/* floating HUD label in 3D views */
.rp-hud {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  background: rgba(20, 24, 32, 0.85); color: #fff; font-size: 13px;
  padding: 6px 14px; border-radius: 8px; pointer-events: none; display: none;
  white-space: nowrap;
}

/* export modal */
#rp-export-modal {
  display: none; position: fixed; inset: 0; background: rgba(15, 18, 24, 0.45);
  align-items: center; justify-content: center; z-index: 50;
}
.rp-modal-card {
  background: #fff; border-radius: 14px; padding: 22px; width: min(520px, 92vw);
  display: flex; flex-direction: column; gap: 10px;
}
.rp-modal-card h3 { margin: 0; font-size: 16px; }
.rp-modal-card p { margin: 0; font-size: 13px; color: #6b7280; }
.rp-modal-card textarea {
  font: 12px/1.5 ui-monospace, monospace; height: 300px; border: 1px solid #d4d8df;
  border-radius: 8px; padding: 10px; resize: vertical; white-space: pre;
}
.rp-modal-card .rp-btn { align-self: flex-end; }

/* wizard steps */
.rp-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.rp-step-dot {
  flex: 1; text-align: center; font-size: 11.5px; color: #9aa1ab; padding: 6px 2px;
  border-bottom: 3px solid #e2e5ea;
}
.rp-step-dot.active { color: #2563eb; border-color: #2563eb; font-weight: 600; }
.rp-step-dot.done { color: #4b5563; border-color: #93b6f2; }
.rp-shapes { display: flex; gap: 10px; }
.rp-shape-btn {
  flex: 1; border: 1.5px solid #d4d8df; border-radius: 10px; background: #fff;
  padding: 12px 6px 8px; cursor: pointer; text-align: center; font-size: 12.5px; color: #4b5563;
}
.rp-shape-btn svg { display: block; margin: 0 auto 6px; }
.rp-shape-btn.active { border-color: #2563eb; background: #eff4fe; color: #1d4fd8; }
.rp-nav { display: flex; gap: 10px; margin-top: 18px; }
.rp-nav .rp-btn { flex: 1; }

/* openings list */
.rp-op {
  border: 1px solid #e2e5ea; border-radius: 10px; padding: 10px 12px; margin: 10px 0;
}
.rp-op-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rp-op-head .kind { font-size: 13px; font-weight: 600; }
.rp-op-head .del {
  margin-left: auto; border: none; background: none; color: #b0b6bf;
  font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.rp-op-head .del:hover { color: #dc2626; }
.rp-op .rp-row .rp-field label { font-size: 11px; }
.rp-op input, .rp-op select { padding: 5px 7px; font-size: 13px; }

/* 2D sketcher.
   .rp-topleft stacks the tool bar and the contextual action bar. On a desktop
   it floats over the top-left of the plan; on a phone (see the compact block at
   the bottom of this file) it becomes two bars docked along the bottom edge,
   and --bars carries their height to everything else anchored to the bottom. */
.rp-topleft {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.rp-toolbar, .rp-actions {
  display: flex; gap: 6px; align-items: center;
  background: #fff; padding: 6px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-toolbar .rp-btn, .rp-actions .rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rp-btn .ic { font-style: normal; line-height: 1; }
.rp-toolbar .lbs { display: none; }          /* short labels are phone-only */
.rp-actions .sep { width: 1px; align-self: stretch; background: #e2e5ea; margin: 2px 3px; }
.rp-split { flex: 1; display: flex; min-width: 0; }
.rp-pane { flex: 1; position: relative; min-width: 0; }
.rp-pane + .rp-pane { border-left: 1px solid #dde0e6; }
.rp-pane svg { display: block; width: 100%; height: 100%; cursor: crosshair;
  touch-action: none; -webkit-tap-highlight-color: transparent; }
.rp-pane .pane-label {
  position: absolute; right: 12px; top: 12px; font-size: 11.5px; color: #9aa1ab;
  background: rgba(255,255,255,0.85); padding: 3px 9px; border-radius: 99px; pointer-events: none;
}

/* option C toolbar */
.rp-floatbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; z-index: 5;
  background: #fff; padding: 6px 10px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06); font-size: 13px;
}
.rp-floatbar .sep { width: 1px; height: 22px; background: #e2e5ea; margin: 0 4px; }
.rp-floatbar input { width: 70px; font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid #d4d8df; border-radius: 7px; }

.rp-help {
  position: absolute; bottom: calc(12px + var(--bars, 0px)); left: 12px; font-size: 12px; color: #6b7280;
  background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 10px;
  border: 1px solid #dde0e6; line-height: 1.55;
  max-width: min(340px, calc(100% - 160px)); /* keep clear of the zoom bar */
}
.rp-help b { color: #23272e; }

.rp-help.off { display: none; }
/* A refusal has to be findable: the help box sits bottom-left, which can be a
   long way from the corner the user is actually looking at. Ring it in red for
   the 2.2s the message is up. (On compact the box is full-width at the top and
   .rp-help.show wins the box-shadow, which is fine — it is already prominent.) */
.rp-help.flash { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); }

/* A refusal the user triggered from the keyboard needs to land where they are
   looking, not only in the caption at bottom-left. Kept clear of .pane-label,
   which sits top-right in the same pane. Never shown on compact: the help box
   is already a full-width banner across the top there. */
.rp-toast {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  max-width: min(420px, calc(100% - 200px));
  background: #fff; color: #b3261e; border: 1px solid #f2b8b5;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.16);
  padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  text-align: center; pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity 0.16s ease;
}
.rp-toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rp-toast { transition: none; } }

/* a menu item that cannot run reads as off, and says why on hover */
.rp-menu button:disabled { color: #9aa1ad; cursor: default; background: none; }

/* interaction chrome should never text-select during drags */
.rp-pane, .rp-header, .rp-toolbar, .rp-actions, .rp-zoombar, .rp-inspector, .rp-help {
  -webkit-user-select: none; user-select: none;
}

/* header height field + compact export label on phones */
.rp-ceil .u { font-size: 11px; color: #9aa1ab; margin-left: 4px; }
#export .short { display: none; }

/* details panel rows */
.rp-inspector { min-width: 200px; max-width: 260px; }
.rp-inspector .hint { white-space: normal; }
.rp-inspector .ro { display: flex; justify-content: space-between; gap: 12px; color: #6b7280; }
.rp-inspector .ro span:last-child { color: #23272e; font-variant-numeric: tabular-nums; }
.rp-inspector .chk { display: flex; justify-content: flex-start; gap: 8px; align-items: center; }
.rp-inspector .chk input { width: auto; }
.rp-inspector .hint { font-size: 11px; color: #9aa1ab; margin-top: -3px; }
.rp-inspector .hint.why { color: #b3261e; margin-top: 4px; }

/* details panel: title row, collapse control, collapsed chip */
.rp-inspector .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pn-x { border: none; background: none; color: #9aa1ab; cursor: pointer;
  font-size: 15px; padding: 0 2px; line-height: 1; }
.pn-x:hover { color: #23272e; }
.rp-inspector.min { min-width: 0; padding: 3px; }
.pn-chip { font: inherit; font-size: 12px; color: #6b7280; background: none;
  border: none; padding: 4px 10px; cursor: pointer; border-radius: 8px; }
.pn-chip:hover { background: #eef2f8; color: #23272e; }

/* confirm affordance for uncommitted panel edits */
.rp-inspector .apply-row { display: none; }
.rp-inspector .apply-row.show { display: flex; }

/* settings popup */
.rp-settings {
  position: absolute; top: 54px; right: 12px; z-index: 20;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: #4b5563; box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14);
  min-width: 230px;
}
.rp-settings .t { font-weight: 600; color: #23272e; font-size: 13px; }
.rp-settings .chk { display: flex; gap: 8px; align-items: center; }
#gear { padding: 7px 10px; }

/* accept/cancel pill for animated angle proposals */
.rp-confirm {
  position: absolute; z-index: 9; display: flex; gap: 6px; align-items: center;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 6px 8px 6px 12px; font-size: 12.5px; color: #4b5563;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14); white-space: nowrap;
}
.rp-confirm .rp-btn { padding: 5px 10px; font-size: 12.5px; }

/* per-field lock toggles in the details panel */
.rp-inspector .fw { display: flex; align-items: center; gap: 4px; }
.pn-lock {
  border: 1px solid transparent; background: none; border-radius: 6px;
  padding: 2px 4px; line-height: 1; font-size: 11px; cursor: pointer;
  opacity: 0.3; filter: grayscale(1);
}
.pn-lock:hover { opacity: 0.7; background: #f1f3f7; }
.pn-lock.on {
  opacity: 1; filter: none; background: #fffaf2; border-color: #f0c48a;
}
.rp-inspector .hint.warn { color: #b45309; }

/* scale bar, bottom-left of the plan */
.rp-scale {
  position: absolute; right: 12px; bottom: calc(56px + var(--bars, 0px)); z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.82); border: 1px solid #dde0e6;
  border-radius: 8px; padding: 5px 9px; pointer-events: none;
  font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums;
}
.rp-scale i {
  display: block; height: 7px; border: 1px solid #8a93a1;
  border-top: none; min-width: 12px;
}
/* the compact rule for .rp-scale lives in the block at the end of this file,
   which has to clear
   the taller touch-sized zoom bar it stacks on */

/* segmented choices in the details panel (hinge side, swing direction) */
.rp-inspector .rp-btn.seg {
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px; margin-left: 4px;
}
.rp-inspector .rp-btn.seg.on {
  background: #2563eb; border-color: #2563eb; color: #fff;
}

/* floor material swatches */
.rp-inspector .swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-swatch {
  width: 30px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid #d4d8df; padding: 0;
}
.pn-swatch:hover { border-color: #9aa1ab; }
.pn-swatch.on { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }


/* ==== phone layout — LAST in the file on purpose ====
   Three separate rules (.rp-ceil, .rp-scale, .rp-inspector max-width) each
   quietly beat this block when it sat mid-file. Keeping it last means a
   phone override wins on source order and never needs inflated specificity. */

/* ------------------------------------------------- phones and small tablets.
   The plan is the whole point of the screen, so nothing floats on top of it
   any more: the header collapses to one row and the tools become two docked
   bars along the bottom, where a thumb can reach them. Everything that used
   to be keyboard-only (undo/redo, take back a point, close, cancel) is a
   button in .rp-actions — see updateActions() in editor.html.

   820px is not a round number, it is where the layouts actually stop fitting:
   the top-left toolbar ends at 532px and the details panel starts at
   width − 272px, so they collide below ~804px. iPad portrait (768) lands here
   too, which is what you want on a touch screen anyway. */
@media (max-width: 820px) {
  .rp-header { gap: 8px; padding: 8px 10px; }
  .rp-header h1 { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* wall height also lives in the Room card. Needs the descendant selector to
     outrank the .rp-ceil rule in editor.html's own <style>, which comes after
     this file in the document and would otherwise win. */
  .rp-header .rp-ceil { display: none; }
  #export { padding: 6px 10px; }
  #export .full { display: none; }
  #export .short { display: inline; }

  /* tools + actions dock to the bottom edge, tools nearest the thumb */
  .rp-topleft {
    top: auto; bottom: 0; left: 0; right: 0;
    flex-direction: column-reverse; gap: 0; align-items: stretch;
  }
  .rp-toolbar, .rp-actions {
    border-radius: 0; border: none; border-top: 1px solid #dde0e6;
    box-shadow: none; padding: 5px 6px;
  }
  .rp-toolbar {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    /* On a tablet the full width would stretch five buttons to ~160px each, so
       cap the row at 560px — as PADDING, not max-width, or the bar itself
       shrinks and the plan shows through the gap either side of it. */
    padding-left: max(6px, calc((100% - 560px) / 2));
    padding-right: max(6px, calc((100% - 560px) / 2));
  }
  .rp-toolbar .rp-btn {
    flex-direction: column; gap: 3px; min-height: 50px; padding: 5px 2px;
    border: none; font-size: 10.5px; line-height: 1.1;
  }
  .rp-toolbar .ic { font-size: 17px; }
  .rp-toolbar .lb { display: none; }
  .rp-toolbar .lbs { display: inline; }
  .rp-actions { justify-content: center; gap: 8px; background: #f7f8fa; }
  .rp-actions .rp-btn { min-height: 44px; padding: 6px 14px; }
  .rp-actions .sep { margin: 4px 2px; }

  /* the details card becomes a sheet, and its collapsed chip a pill above it */
  .rp-inspector {
    top: auto; bottom: var(--bars, 0px); left: 0; right: 0;
    min-width: 0; max-width: none; max-height: 46vh; overflow-y: auto;
    border-radius: 14px 14px 0 0; border-left: none; border-right: none;
    border-bottom: none; padding: 12px 14px; gap: 9px; font-size: 13px;
    box-shadow: 0 -4px 20px rgba(20, 24, 32, 0.10);
  }
  /* bottom-LEFT: the zoom bar already owns the bottom-right corner, and both
     were anchoring to it */
  .rp-inspector.min {
    left: 12px; right: auto; bottom: calc(12px + var(--bars, 0px));
    border: 1px solid #dde0e6; border-radius: 99px; max-height: none;
    box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
  }

  /* help is an opt-in sheet here; ? in the header toggles it, and a refusal
     message opens it on its own (revealHelp) */
  /* Anchored to the TOP: the details sheet already owns the bottom edge, and
     a refusal message stacked on it covered the very fields being refused. */
  .rp-help { display: none; }
  .rp-help.show {
    display: block; left: 8px; right: 8px; top: 8px; bottom: auto;
    max-width: none; padding: 12px 14px; font-size: 13px; z-index: 7;
    border-radius: 12px; background: #fff;
    box-shadow: 0 4px 20px rgba(20, 24, 32, 0.14);
  }

  /* fingers, not cursors: everything interactive gets a 44px tap area */
  .pn-lock { padding: 11px; font-size: 15px; }
  .pn-swatch { width: 44px; height: 40px; }
  .rp-inspector .rp-btn.seg { padding: 10px 14px; font-size: 12.5px; }
  .rp-inspector .btns .rp-btn { padding: 11px 8px; font-size: 13px; }
  .rp-inspector input { width: 92px; padding: 8px 10px; font-size: 15px; }
  .pn-x { padding: 8px 12px; font-size: 20px; }
  .pn-chip { padding: 11px 16px; font-size: 13px; }
  .rp-menu button { padding: 13px 14px; font-size: 15px; }
  .rp-zoombar .rp-btn { padding: 11px 16px; font-size: 15px; }
  /* stacked above the zoom bar, which is ~50px tall once its buttons are
     finger-sized — the old 56px offset left the two overlapping */
  .rp-scale { bottom: calc(70px + var(--bars, 0px)); padding: 4px 7px; }
}