/* Room & Furniture Planner — the plan gets the width.
 *
 * The plan, its toolbar and the checks take the main column; the catalogue,
 * the inspector and the list of pieces sit beside it on a desktop and under
 * it on a phone. Type and surfaces come from the site preset. The colours
 * inside the plan are fixed: they say what a piece is to the reader's plans
 * (have, buying, trying) and must read the same on every theme and on paper.
 */

.product[data-product="room-planner"] {
  --rp-line: color-mix(in srgb, var(--text) 18%, transparent);
  --rp-focus: #2563eb;
  --rp-good: #15803d;
  --rp-warn: #b45309;
  --rp-bad: #b42318;
}

.rp-plan-pane { max-width: none; }
.rp-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.rp-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1rem;
  align-items: start;
}
.rp-main { display: grid; gap: .6rem; min-width: 0; }
.rp-side { display: grid; gap: .8rem; min-width: 0; }

.rp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  padding: .35rem;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rp-toolgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rp-toolbar-gap { flex: 1 1 auto; }
.rp-toolbar .input { width: auto; min-width: 0; padding-block: .3rem; }
.rp-toolbar input[type="range"] { width: 5.5rem; }
.rp-layout-select { max-width: 14rem; }
.rp-toolbar [aria-pressed="true"] {
  background: color-mix(in srgb, var(--rp-focus) 14%, var(--surface));
  border-color: var(--rp-focus);
}

.rp-modebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .55rem .8rem;
  border-left: 4px solid var(--rp-focus);
  border-radius: calc(var(--radius) / 1.5);
  background: color-mix(in srgb, var(--rp-focus) 9%, var(--surface));
}
.rp-modebar p { margin: 0; flex: 1 1 22rem; }
.rp-modebar .tool-actions { margin: 0; }
.rp-modebar .input { width: 11rem; }
.rp-modebar[hidden] { display: none; }

/* ── The plan ───────────────────────────────────────────────────────── */

.rp-stage {
  position: relative;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f1ea;
}
.rp-canvas {
  display: block;
  width: 100%;
  height: min(72vh, 44rem);
  min-height: 22rem;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.rp-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--rp-focus); }
.rp-canvas.is-panning { cursor: grabbing; }
.rp-canvas[data-hover="item"] { cursor: move; }
.rp-canvas[data-hover="wall"] { cursor: ew-resize; }
.rp-canvas[data-hover="handle"] { cursor: crosshair; }
.rp-canvas.is-drop-target { cursor: copy; box-shadow: inset 0 0 0 3px var(--rp-good); }

.rp-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  pointer-events: none;
  padding: .25rem .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: #1f2933;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.rp-ghost[hidden] { display: none; }

/* ── Cards beside the plan ──────────────────────────────────────────── */

.rp-card {
  display: grid;
  gap: .6rem;
  padding: .9rem;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.rp-card h3 { margin: 0; font-size: 1.05rem; }
.rp-card h4 { margin: .2rem 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rp-card .field-help { margin: 0; }
.rp-card .pane-form { margin: 0; }

.rp-roomform { display: grid; gap: .3rem; }
.rp-roomform-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: .35rem; align-items: center; }
.rp-roomform-row .input { width: 100%; min-width: 0; }

.rp-palette-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.rp-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .35rem; padding-top: .4rem; }
.rp-tile, .rp-chip {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rp-line);
  border-radius: calc(var(--radius) / 1.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.rp-tile {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .3rem .25rem .4rem;
  font-size: .8rem;
  line-height: 1.15;
  text-align: center;
}
.rp-thumb { width: 44px; height: 44px; }
.rp-chip { min-height: 2.1rem; padding: .25rem .6rem; font-size: .85rem; }
.rp-tile:hover, .rp-chip:hover { border-color: var(--rp-focus); }
.rp-tile:focus-visible, .rp-chip:focus-visible { outline: 3px solid var(--rp-focus); outline-offset: 1px; }

.rp-field { display: grid; gap: .2rem; margin: 0; min-width: 0; }
.rp-field .input { width: 100%; min-width: 0; }
.rp-field .field-help { font-size: .82rem; }
.rp-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .4rem; }
.rp-size[aria-invalid="true"] { border-color: var(--rp-bad); }
.rp-turn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem; align-items: end; }
.rp-check { display: inline-flex; gap: .45rem; align-items: center; font-size: .92rem; }
.tone-warn.field-help { color: var(--rp-warn); }

.rp-walls { display: grid; gap: .3rem; }
.rp-wall-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .3rem; align-items: center; padding: .15rem .25rem; border-radius: 4px; }
.rp-wall-row.is-active { background: color-mix(in srgb, var(--rp-focus) 10%, transparent); }
.rp-wall-label { font-size: .85rem; color: var(--muted); white-space: nowrap; }

.rp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; max-height: 22rem; overflow: auto; }
.rp-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name status" "size status";
  gap: 0 .5rem;
  width: 100%;
  padding: .3rem .45rem !important;
  text-align: left;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.rp-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent) !important; }
.rp-item[aria-pressed="true"] { border-color: var(--rp-focus) !important; background: color-mix(in srgb, var(--rp-focus) 10%, transparent) !important; }
.rp-item.tone-bad { border-left: 3px solid var(--rp-bad) !important; }
.rp-item.tone-warn { border-left: 3px solid var(--rp-warn) !important; }
.rp-item-name { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-item-size { grid-area: size; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-chip-status { grid-area: status; align-self: center; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.rp-status-have { background: #e8dcc8; color: #4a3b28; }
.rp-status-buy { background: #d6e6f8; color: #173f75; }
.rp-status-idea { background: #f1ecf8; color: #553a80; }
.rp-status-fixed { background: #e2e4e6; color: #3b434a; }

/* ── Checks ─────────────────────────────────────────────────────────── */

.rp-checks-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; }
.rp-summary { font-weight: 700; }
.rp-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rp-issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  padding: .4rem .6rem;
  font-size: .92rem;
  border-left: 3px solid var(--rp-focus);
  border-radius: 4px;
  background: color-mix(in srgb, var(--rp-focus) 6%, var(--surface));
}
.rp-issue.tone-bad { border-left-color: var(--rp-bad); background: color-mix(in srgb, var(--rp-bad) 8%, var(--surface)); }
.rp-issue.tone-warn { border-left-color: var(--rp-warn); background: color-mix(in srgb, var(--rp-warn) 9%, var(--surface)); }
.rp-issue-mark { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.rp-issue.tone-bad .rp-issue-mark { color: var(--rp-bad); }
.rp-issue.tone-warn .rp-issue-mark { color: var(--rp-warn); }
.rp-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem 1rem; padding-top: .5rem; }

/* ── Pieces and layouts panes ───────────────────────────────────────── */

.rp-spend { margin: 0 0 .6rem; }
.rp-table-wrap { overflow-x: auto; max-width: 100%; }
.rp-table { width: 100%; border-collapse: collapse; margin: .2rem 0 1rem; font-variant-numeric: tabular-nums; }
.rp-table th, .rp-table td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--rp-line); vertical-align: top; }
.rp-table thead th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.rp-table .input { min-width: 7rem; max-width: 10rem; }
.rp-table .tone-warn { color: var(--rp-warn); }
.rp-verdict { min-width: 14rem; }
.rp-steps { margin: .2rem 0 0; padding-left: 1rem; font-size: .85rem; color: var(--muted); }
.rp-steps .tone-bad, .rp-verdict .tone-bad { color: var(--rp-bad); }
.rp-steps .tone-warn, .rp-verdict .tone-warn { color: var(--rp-warn); }
.rp-verdict .tone-good { color: var(--rp-good); }
.rp-linkish { padding: 0 !important; border: 0 !important; background: none !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rp-listing { display: block; font-size: .82rem; }
.rp-subhead { margin: .6rem 0 .2rem; font-size: 1.05rem; }

.rp-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: .8rem; }
.rp-layout {
  display: grid;
  gap: .6rem;
  align-content: start;
  padding: .8rem;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rp-layout.is-active { border-color: var(--rp-focus); box-shadow: 0 0 0 1px var(--rp-focus); }
.rp-layout-thumb { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: #fff; border: 1px solid var(--rp-line); border-radius: calc(var(--radius) / 1.5); }
.rp-facts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-variant-numeric: tabular-nums; }
.rp-facts dt { color: var(--muted); font-size: .88rem; }
.rp-facts dd { margin: 0; font-weight: 600; }
.rp-facts .tone-bad { color: var(--rp-bad); }
.rp-facts .tone-warn { color: var(--rp-warn); }
.rp-current { font-weight: 700; color: var(--rp-focus); align-self: center; }

/* Toolbar and inspector buttons read as buttons, not links: they act on the
   plan in place and a reader looks for them as controls. */
.rp-toolbar .btn-quiet, .rp-card .tool-actions .btn-quiet, .rp-modebar .btn-quiet, .rp-turn .btn-quiet,
.rp-wall-row .btn-quiet, .rp-issue .btn-quiet, .rp-layout .btn-quiet, .rp-item {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: .25rem .65rem;
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rp-line);
  border-radius: calc(var(--radius) / 1.5);
  cursor: pointer;
}
.rp-wall-row .btn-quiet { padding-inline: .45rem; font-size: .82rem; }
.rp-toolbar .btn-quiet:hover, .rp-card .tool-actions .btn-quiet:hover, .rp-issue .btn-quiet:hover { border-color: var(--rp-focus); }
.rp-toolbar .btn-quiet:disabled, .rp-modebar .btn-quiet:disabled { opacity: .5; }
.rp-card .tone-bad, .rp-layout .tone-bad.btn-quiet { color: var(--rp-bad); }

/* ── Phones and narrow windows ──────────────────────────────────────── */

@media (max-width: 960px) {
  .rp-workspace { grid-template-columns: minmax(0, 1fr); }
  .rp-canvas { height: min(62vh, 30rem); }
}
@media (max-width: 520px) {
  .rp-toolbar-gap { display: none; }
  .rp-layout-select { max-width: 100%; }
  .rp-issue { grid-template-columns: minmax(0, 1fr) auto; }
  .rp-issue-mark { grid-column: 1 / -1; }
  .rp-roomform-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rp-roomform-row .btn { grid-column: 1 / -1; }
}

/* ── Print ──────────────────────────────────────────────────────────── */

.rp-print { display: none; }
@media print {
  body[data-printing-scope] .rp-print[data-printing] { display: block; color: #000; font: 10pt/1.35 Helvetica, Arial, sans-serif; }
  .rp-print h1 { font-size: 15pt; margin: 0 0 .4rem; }
  .rp-print h2 { font-size: 12.5pt; margin: .8rem 0 .3rem; }
  .rp-print table { width: 100%; border-collapse: collapse; margin: .3rem 0 .8rem; }
  .rp-print th, .rp-print td { text-align: left; padding: 2pt 4pt; border-bottom: .5pt solid #aaa; }
  .rp-print img { width: 100%; height: auto; max-height: 6.8in; object-fit: contain; }
  .rp-print-page { break-after: page; }
  .rp-print-page:last-child { break-after: auto; }
}
.rp-inspector .tool-actions button { white-space: nowrap; }
.rp-group-list { margin: 0 0 0.5rem; padding-left: 1.2rem; }