/* Lavish Home Decor — Room Render Tool (beta UI)
   Tokens mirror css/lavish.css so the app reads as the same brand.
   Phone-first. Radius 0, no shadows, ghost buttons only. */

:root {
  --greige: #C7BFB2;
  --cream: #F4F1EC;
  --charcoal: #363636;
  --white: #FFFFFF;
  /* Semantic status only (not brand accents): used solely for rule feedback. */
  --alert: #A23B2A;
  --clear: #4F6B4A;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body: 'Schibsted Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Rethink Sans', 'Schibsted Grotesk', sans-serif;

  --fs-h1: clamp(2rem, 6vw, 2.75rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.1rem);
  --fs-h3: 1.35rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;
  --tracking-label: 0.16em;
  --lh-body: 1.6;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; display: block; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.15; margin: 0 0 0.4em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 400; }
::selection { background: var(--charcoal); color: var(--cream); }
:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
[hidden] { display: none !important; }

.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.eyebrow { display: block; margin-bottom: 0.5rem; opacity: 0.75; }
.muted { opacity: 0.7; }
.p-sm { font-size: var(--fs-small); line-height: 1.55; }
.italic { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }

/* ---------- Header ---------- */
.app-header {
  background: var(--greige);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--gutter);
}
.flex-appnav { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.brand-wordmark { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.04em; text-decoration: none; color: var(--charcoal); white-space: nowrap; }
.brand-wordmark span { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-left: 10px; opacity: 0.7; }
.flex-applinks { display: flex; gap: 18px; align-items: center; }
.app-link {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  padding: 4px 0;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.app-link:hover, .app-link[aria-current="page"] { border-bottom-color: var(--charcoal); }

/* ---------- Layout ---------- */
.view { padding: clamp(1.5rem, 5vw, 3rem) var(--gutter); }
.skinny { max-width: 720px; margin-left: auto; margin-right: auto; }
.wide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack-tight { display: flex; flex-direction: column; gap: 0.6rem; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-plan { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 992px) {
  .grid-plan { grid-template-columns: 3fr 2fr; align-items: start; }
  .plan-side { position: sticky; top: 76px; }
}
.rule { border: none; border-top: 1px solid rgba(54,54,54,0.2); margin: 0.5rem 0; }
.band { background: var(--greige); padding: 1rem var(--gutter); margin: 0 calc(-1 * var(--gutter)); }
.band-white { background: var(--white); padding: 1rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field > label, .field > .label { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.field .hint { font-size: var(--fs-small); opacity: 0.7; }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea {
  font-family: var(--font-body);
  font-size: 16px; /* prevents iOS zoom */
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--charcoal);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(54,54,54,0.5); }
input:disabled { opacity: 0.5; }
.ftin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ftin .unit { display: flex; align-items: center; gap: 8px; }
.ftin .unit span { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--charcoal); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--charcoal);
  border-radius: 0;
  padding: 14px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--charcoal); color: var(--cream); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--charcoal); }
.btn-solid { background: var(--charcoal); color: var(--cream); }
.btn-solid:hover { background: transparent; color: var(--charcoal); }
.btn-frost { color: var(--white); border-color: var(--white); }
.btn-frost:hover { background: var(--white); color: var(--charcoal); }
.btn-sm { padding: 9px 14px; font-size: 0.66rem; }
.btn-block { width: 100%; }
.text-link { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--charcoal); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.text-link:hover { opacity: 0.6; }

/* ---------- Bottom action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--greige);
  border-top: 1px solid rgba(54,54,54,0.15);
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.action-bar .step { font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.75; }
.action-bar .row { flex-wrap: nowrap; }

/* ---------- Cards / lists ---------- */
.card-room { display: block; text-decoration: none; color: var(--charcoal); background: var(--white); padding: 1.1rem 1.2rem; border: 1px solid transparent; }
.card-room:hover { border-color: var(--charcoal); }
.card-room h3 { margin-bottom: 0.15rem; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list li { padding: 0.75rem 0; border-bottom: 1px solid rgba(54,54,54,0.18); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.list li:last-child { border-bottom: none; }
.list .meta { font-size: var(--fs-small); opacity: 0.7; }
.tag { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--charcoal); padding: 3px 8px; white-space: nowrap; }
.tag-alert { border-color: var(--alert); color: var(--alert); }
.tag-clear { border-color: var(--clear); color: var(--clear); }
.tag-soft { border-color: rgba(54,54,54,0.35); opacity: 0.7; }

.violation { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0.8rem 0; border-bottom: 1px solid rgba(54,54,54,0.18); }
.violation:last-child { border-bottom: none; }
.violation .dot { width: 8px; height: 8px; background: var(--alert); flex-shrink: 0; margin-top: 2px; }
.violation p { margin: 0; font-size: var(--fs-small); }
.violation .rule-ref { display: block; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 2px; }
.all-clear { display: flex; align-items: center; gap: 10px; color: var(--clear); font-family: var(--font-display); font-size: 1.2rem; }

/* ---------- Photos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid .ph { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--greige); }
.photo-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .ph button { position: absolute; top: 4px; right: 4px; background: var(--cream); border: 1px solid var(--charcoal); width: 26px; height: 26px; font-size: 14px; line-height: 1; cursor: pointer; }
.photo-add { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px dashed var(--charcoal); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: center; padding: 8px; }
.photo-add input { display: none; }

/* ---------- Plan (SVG) ---------- */
.plan-wrap { background: var(--white); padding: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.plan-wrap svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
body.is-dragging, body.is-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing; }
/* Outlines are clipped to the footprint, so only the inner half of each stroke shows: widths here are double the visible line. */
.plan-item { fill: var(--greige); stroke: var(--charcoal); stroke-width: 3; cursor: grab; }
.plan-item.is-rug { fill: rgba(199,191,178,0.35); stroke-dasharray: 4 3; }
/* selection is drawn by .plan-select, so the piece outline stays the same weight */
.plan-item.is-selected { }
.plan-select { fill: none; stroke: #2F6FED; stroke-width: 1px; pointer-events: none; }
.plan-item.is-bad { fill: rgba(162,59,42,0.18); stroke: var(--alert); stroke-width: 5; }
/* While dragging: outline and measurements answer live, fill waits for release. */
.plan-item { transition: fill 220ms ease, stroke 120ms ease; }
.plan-item.is-live-bad { stroke: var(--alert); stroke-width: 5; }
.plan-item.is-live-ok { stroke: var(--clear); stroke-width: 5; }
.plan-item.is-snapped { stroke-width: 6; }
body.is-dragging .plan-item { transition: none; }
#planLive .plan-dim-text { pointer-events: none; }
/* No font-size on the SVG text classes: the plan sets it per drawing in inch units. */
.plan-label { font-family: var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--charcoal); pointer-events: none; }
.plan-front { stroke: var(--charcoal); stroke-width: 5; pointer-events: none; }
.plan-door { fill: none; stroke: var(--charcoal); stroke-width: 1.2; stroke-dasharray: 3 3; }
.plan-door-leaf { stroke: var(--charcoal); stroke-width: 2.5; }
.plan-window { stroke: var(--cream); stroke-width: 6; }
.plan-window-glass { stroke: var(--charcoal); stroke-width: 1; }
.plan-dim { stroke: var(--alert); stroke-width: 1; }
.plan-dim-text { font-family: var(--font-ui); letter-spacing: 0.06em; fill: var(--alert); text-transform: uppercase; pointer-events: none; font-weight: 500; }
.plan-dim-text.is-ok { fill: var(--clear); }
.plan-dim.is-ok { stroke: var(--clear); }
.plan-wallnote { font-family: var(--font-display); font-style: italic; fill: rgba(54,54,54,0.6); pointer-events: none; }
.plan-wallnote.is-editable { pointer-events: auto; cursor: text; }
.plan-wallnote.is-editable:hover { fill: var(--charcoal); text-decoration: underline; }
.plan-wallnote.is-bad { fill: var(--alert); }
.plan-seg { stroke: rgba(54,54,54,0.55); stroke-width: 1; }
.plan-seg.is-bad { stroke: var(--alert); }
.plan-seg-text { font-family: var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; fill: rgba(54,54,54,0.65); pointer-events: none; }
.plan-seg-text.is-bad { fill: var(--alert); }
.plan-hint { font-size: var(--fs-small); opacity: 0.7; margin-top: 8px; }

/* ---------- Catalog picker ---------- */
.catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow: auto; }
.catalog button { text-align: left; background: var(--white); border: 1px solid transparent; padding: 10px 12px; cursor: pointer; font-family: var(--font-body); color: var(--charcoal); }
.catalog button:hover { border-color: var(--charcoal); }
.catalog .nm { display: block; font-size: var(--fs-small); }
.catalog .dm { display: block; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; margin-top: 2px; }

/* ---------- Inspector (bottom sheet on phone) ---------- */
.inspector { background: var(--white); padding: 1rem; }
@media (max-width: 991px) {
  .inspector.is-open { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); z-index: 30; max-height: 55vh; overflow: auto; border-top: 1px solid var(--charcoal); }
}

/* ---------- Render mock ---------- */
.render-frame { background: var(--white); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.render-frame .italic { max-width: 34ch; }
.dark { background: var(--charcoal); color: var(--cream); padding: 1.5rem; }
.dark h3 { color: var(--white); }

/* ---------- Settings: rules table ---------- */
.rules-list { list-style: none; margin: 0; padding: 0; }
.rules-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 0.7rem 0; border-bottom: 1px solid rgba(54,54,54,0.15); font-size: var(--fs-small); }
.rules-list li.is-off .rule-body { opacity: 0.45; }
.rules-list .n { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.08em; opacity: 0.6; padding-top: 3px; }
.rule-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.rule-body .tag { align-self: flex-start; }
.rule-nums { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-left: 1.6rem; }
.rule-num { display: flex; flex-direction: column; gap: 0.2rem; }
.rule-num > span:first-child { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.rule-num-wrap { display: inline-flex; align-items: center; border: 1px solid var(--charcoal); }
.rule-num-wrap input[type="number"] { width: 72px; padding: 6px 8px; font-size: 14px; border: none; }
.rule-unit { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.08em; padding: 0 8px; opacity: 0.7; border-left: 1px solid rgba(54,54,54,0.2); align-self: stretch; display: inline-flex; align-items: center; }
/* Collapsible per-area groups */
.rule-groups { display: flex; flex-direction: column; }
.rule-group { border-top: 1px solid var(--charcoal); }
.rule-group:last-child { border-bottom: 1px solid var(--charcoal); }
.rule-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 0.9rem 0; font-family: var(--font-display); font-size: 1.25rem; }
.rule-group > summary::-webkit-details-marker { display: none; }
.rule-group > summary::after { content: '+'; font-family: var(--font-ui); font-size: 1rem; margin-left: 0.75rem; }
.rule-group[open] > summary::after { content: '\2212'; }
.rule-group .rule-count { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-left: auto; }
.rule-group .rules-list { padding-bottom: 0.5rem; }
.rule-group .rules-list li:last-child { border-bottom: none; }
.rule-tools { flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--fs-small); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(10px); background: var(--charcoal); color: var(--cream); padding: 12px 18px; font-size: var(--fs-small); opacity: 0; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); z-index: 60; max-width: min(92vw, 420px); text-align: center; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Log ---------- */
.stat { background: var(--white); padding: 1rem; }
.stat .big { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; } /* feet/inch pairs need the full width on a phone */
  .flex-applinks { gap: 12px; }
  .brand-wordmark { font-size: 1.05rem; }
  .brand-wordmark span { display: none; }
  #newRoomNav { display: none; } /* the home screen has its own New room button */
  .app-link { font-size: 0.66rem; letter-spacing: 0.12em; }
  .catalog { grid-template-columns: 1fr; }
  body { overflow-x: hidden; }
}

@media print {
  .app-header, .action-bar, .plan-side, .toast, .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
  .plan-wrap { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Settings: vendors ---------- */
.vendor-list { list-style: none; margin: 0; padding: 0 0 0.5rem; }
.vendor-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 0.9rem 0; border-bottom: 1px solid rgba(54,54,54,0.15); font-size: var(--fs-small); }
.vendor-row:last-child { border-bottom: none; }
.vendor-row.is-off .vendor-main { opacity: 0.45; }
.vendor-on { padding-top: 8px; }
.vendor-main { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.vendor-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.vendor-head input[type="text"] { font-family: var(--font-display); font-size: 1.15rem; padding: 4px 8px; border-color: transparent; background: transparent; max-width: 320px; }
.vendor-head input[type="text"]:hover, .vendor-head input[type="text"]:focus { border-color: var(--charcoal); background: var(--white); }
.vendor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 1rem; }
.vendor-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.vendor-field > span { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.vendor-field input { padding: 6px 8px; font-size: 14px; }
.vendor-field-wide { grid-column: 1 / -1; }
.vendor-foot { justify-content: space-between; }

.import-row { flex-wrap: nowrap; }
.import-row .btn { white-space: nowrap; }

/* ---------- Context menu (right-click / long-press on a piece) ---------- */
.ctx-menu { position: fixed; z-index: 70; background: var(--white); border: 1px solid var(--charcoal); min-width: 168px; padding: 4px 0; display: flex; flex-direction: column; }
.ctx-menu > button { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; width: 100%; text-align: left; background: none; border: none; padding: 9px 14px; font-family: var(--font-body); font-size: var(--fs-small); color: var(--charcoal); cursor: pointer; }
.ctx-menu > button:hover, .ctx-menu > button:focus-visible { background: var(--cream); outline: none; }
.ctx-menu > button.is-danger { color: var(--alert); }
.ctx-menu .ctx-hint { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.plan-item { -webkit-touch-callout: none; }
.toast.has-action { pointer-events: auto; display: flex; gap: 16px; align-items: center; }
.toast-action { background: none; border: none; color: var(--cream); font-family: var(--font-ui); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 0; }

/* ---------- Wall editor (double-click a wall label) ---------- */
.wall-editor { min-width: 300px; max-width: min(92vw, 360px); padding: 14px; gap: 10px; }
.wall-editor .field { gap: 0.3rem; }
.wall-editor input[type="text"] { padding: 8px 10px; font-size: 15px; }
.wall-editor-head { display: flex; justify-content: space-between; align-items: baseline; }
.wall-editor-fix { border: 1px solid var(--alert); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.wall-editor-fix .p-sm { color: var(--alert); }
.wall-editor .hint { font-size: 0.72rem; opacity: 0.7; }
.wall-editor .p-sm.muted { margin: 0; }

/* ---------- Room builder ---------- */
.builder > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.builder > summary::-webkit-details-marker { display: none; }
.builder-toggle::after { content: '+'; font-family: var(--font-ui); font-size: 1rem; }
.builder[open] .builder-toggle::after { content: '\2212'; }
.builder-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.builder-tools .tool { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: var(--cream); border: 1px solid transparent; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); cursor: grab; touch-action: none; }
.builder-tools .tool svg { width: 26px; height: 26px; }
.builder-tools .tool:hover { border-color: var(--charcoal); }
.builder-tools .tool.is-on { background: var(--charcoal); color: var(--cream); }
.builder .hint { font-size: 0.72rem; opacity: 0.7; line-height: 1.5; }
.plan-wrap.is-placing { cursor: crosshair; }
.plan-wrap.is-placing .plan-item { cursor: crosshair; }
.plan-floor { fill: var(--cream); stroke: none; }
.plan-room { fill: none; stroke: var(--charcoal); stroke-width: 12; }
.plan-open.is-editable { cursor: ew-resize; }
.plan-open-grab { fill: transparent; }
.plan-open.is-editable:hover .plan-window-glass, .plan-open.is-editable:hover .plan-door-leaf { stroke: #2F6FED; }
.plan-bump-body { fill: transparent; cursor: move; }
.plan-bump-handle { fill: transparent; }
.plan-bump-handle.is-ns { cursor: ns-resize; }
.plan-bump-handle.is-ew { cursor: ew-resize; }
[data-bump]:hover .plan-bump-body { fill: rgba(47,111,237,0.08); }
/* Hanging lights: a lighter footprint that floats over the furniture */
.plan-item.is-ceiling { fill: rgba(199,191,178,0.35); stroke-dasharray: 2 2; opacity: 0.8; }
body.is-dragging .plan-item.is-ceiling { opacity: 0.55; }
.plan-item.is-ceiling.is-bad { fill: rgba(162,59,42,0.12); }

/* faint line drawing inside each piece so a bed reads as a bed at a glance */
.plan-glyph { fill: none; stroke: var(--charcoal); stroke-width: 1px; opacity: 0.22; pointer-events: none; }

/* ---------- Product reference line under each piece in the room list ---------- */
.list li.item-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.item-row.is-selected { box-shadow: inset 3px 0 0 #2F6FED; padding-left: 10px; }
.item-row.is-over { background: var(--cream); }
.item-name { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--fs-small); text-decoration: none; }
.item-row.has-ref .item-name::after { content: ' \2713'; color: var(--clear); font-family: var(--font-ui); font-size: 0.75rem; }
.ref-line { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.ref-line input[type="url"] { padding: 6px 8px; font-size: 13px; min-width: 0; }
.ref-drop { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; border: 1px dashed rgba(54,54,54,0.35); padding: 3px; }
.item-row.is-over .ref-drop { border-color: var(--charcoal); }
.ref-thumb { position: relative; width: 26px; height: 26px; }
.ref-thumb img { width: 26px; height: 26px; object-fit: cover; display: block; }
.ref-x { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; line-height: 12px; text-align: center; background: var(--charcoal); color: var(--cream); border: none; padding: 0; cursor: pointer; font-size: 10px; }
.ref-add { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; cursor: pointer; white-space: nowrap; }
.ref-add:hover { opacity: 1; }
.ref-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 0.5rem 0; }
.ref-strip figure { margin: 0; width: 120px; }
.ref-thumbs { display: flex; gap: 2px; }
.ref-thumbs img { width: 38px; height: 38px; object-fit: cover; }
.ref-strip figcaption { font-size: 0.72rem; opacity: 0.75; margin-top: 4px; }

/* Selected piece box in the side column */
.plan-side .inspector { border-left: 3px solid #2F6FED; }
.plan-side .inspector[hidden] { display: none; }
.plan-side .inspector .grid-3 .field input { padding: 6px 8px; font-size: 14px; }

/* orientation marks: arrow to the front, heavy edge at the back of wall pieces */
.plan-arrow { fill: none; stroke: var(--charcoal); stroke-width: 1.6; opacity: 0.75; pointer-events: none; }
.plan-back { stroke: var(--charcoal); stroke-width: 9; pointer-events: none; }
.plan-item.is-bad ~ .plan-arrow { stroke: var(--alert); }