/* ==========================================================
   Wall previewer
   Everything on the wall is drawn to real-world scale: each
   scene carries a pixels-per-inch figure, so a 20x30 next to
   a sofa is the size a 20x30 would actually be.
   ========================================================== */

.pv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
  padding-block: clamp(18px, 3vw, 30px) clamp(40px, 6vw, 70px);
}

/* ---------- the room ---------- */

.pv-stage { position: sticky; top: calc(var(--nav-h) + 18px); }

.pv-room {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
  background: #e8e6e1;
  border: 1px solid var(--line);
}
.pv-room > img.pv-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* one hung print: black moulding, optional white mat, soft shadow */
.pv-art {
  position: absolute;
  box-sizing: border-box;
  background: #0d0e0f;
  /* a tight cast shadow, barely displaced: contact line, short cast, and a
     small amount of ambient. A frame sits close to the wall. */
  box-shadow:
    0 1px 1px rgba(24, 21, 17, .34),
    1px 2px 4px rgba(24, 21, 17, .22),
    2px 5px 10px rgba(24, 21, 17, .12);
  transition: opacity .18s ease, outline-color .18s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
}
.pv-art.no-frame {
  background: transparent;
  box-shadow: 0 1px 1px rgba(24,21,17,.24), 1px 2px 5px rgba(24,21,17,.16);
}
.pv-art .mat {
  position: absolute;
  inset: 0;
  background: #f7f6f2;
  display: grid;
  place-items: center;
  /* the moulding casts a short shadow onto the white, just inside the frame:
     tight, and following the same light as the outer shadow */
  box-shadow:
    inset 0 2px 3px rgba(24, 21, 17, .20),
    inset 2px 0 3px rgba(24, 21, 17, .11),
    inset -1px 0 2px rgba(24, 21, 17, .06);
}
.pv-art.no-mat .mat { background: transparent; }
.pv-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a very soft shadow inside the opening, so the picture sits under the mat
   rather than floating on top of it */
.pv-art .well {
  position: absolute;
  pointer-events: none;
  box-shadow:
    inset 0 1px 2.5px rgba(24, 21, 17, .34),
    inset 1px 2px 5px rgba(24, 21, 17, .16);
  z-index: 2;
}
.pv-art.is-picked { outline-color: #121314; }
.pv-art .tag {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #2a2924;
  background: rgba(255,255,255,.92);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}
.pv-room.show-tags .pv-art .tag, .pv-art:hover .tag { opacity: 1; }

/* the measuring bar under the arrangement */
.pv-rule {
  position: absolute;
  border-top: 1px solid rgba(18,19,20,.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.pv-room.show-rule .pv-rule { opacity: 1; }
.pv-rule span {
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .08em;
  color: #2a2924;            /* the room is always light, --ink is not */
  background: rgba(255,255,255,.9);
  padding: 1px 6px;
  white-space: nowrap;
}

.pv-empty {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #3a3934;
  font-size: clamp(14px, 2.4vw, 16px);
  background: rgba(255,255,255,.72);
  padding: 14px 20px;
  max-width: 60%;
}

.pv-scenes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pv-scenes button {
  flex: 1 1 0;
  min-width: 96px;
  padding: 10px 12px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.pv-scenes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- the panel ---------- */

.pv-panel { display: flex; flex-direction: column; gap: 20px; }

.pv-block { border-top: 1px solid var(--line); padding-top: 14px; }
.pv-block > h2 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.pv-block > h2 em { font-style: normal; color: var(--ink); }

.pv-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pv-cats button {
  padding: 7px 11px;
  background: none;
  border: 1px solid var(--line);
  color: var(--mute);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.pv-cats button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.pv-grid button {
  padding: 0;
  border: 0;
  background: #eceae5;
  cursor: pointer;
  aspect-ratio: 1;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .14s ease;
}
.pv-grid button:hover, .pv-grid button:focus-visible { outline-color: var(--ink); }
.pv-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the list of what is on the wall */
.pv-items { display: flex; flex-direction: column; gap: 8px; }
.pv-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
}
.pv-item.is-picked { border-color: var(--ink); }
.pv-item img { width: 46px; height: 46px; object-fit: cover; display: block; }
.pv-item .who { min-width: 0; }
.pv-item .who b { display: block; font-weight: 500; font-size: 13.5px; }
.pv-item .who span { font-size: 12px; color: var(--mute); }
.pv-item select {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.pv-item .acts { display: flex; gap: 4px; }
.pv-item .acts button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.pv-item .acts button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pv-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pv-row label { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); min-width: 78px; }
.pv-row input[type="range"] { flex: 1; accent-color: #121314; }
.pv-row output { font-size: 12.5px; min-width: 54px; text-align: right; }

.pv-seg { display: flex; gap: 0; }
.pv-seg button {
  flex: 1;
  padding: 8px 6px;
  background: none;
  border: 1px solid var(--line);
  border-right-width: 0;
  color: var(--mute);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.pv-seg button:last-child { border-right-width: 1px; }
.pv-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pv-toggles { display: flex; flex-wrap: wrap; gap: 14px; }
.pv-toggles label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.pv-toggles input { accent-color: #121314; width: 16px; height: 16px; }

.pv-note { font-size: 12.5px; line-height: 1.5; color: var(--mute); margin: 8px 0 0; }
.pv-note.warn { color: #a3261c; }

.pv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-acts button, .pv-acts a {
  padding: 11px 15px;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.pv-acts .primary { background: var(--ink); color: var(--paper); }
.pv-acts button:hover, .pv-acts a:hover { background: var(--ink); color: var(--paper); }
.pv-acts .ghost:hover { background: none; color: var(--ink); opacity: .6; }

@media (max-width: 1000px) {
  .pv { grid-template-columns: 1fr; }
  .pv-stage { position: static; }
  .pv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 200px; }
}
@media (max-width: 620px) {
  .pv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv-item { grid-template-columns: 40px 1fr; }
  .pv-item .acts { grid-column: 2; justify-content: flex-end; }
}

/* the boundary box: the clear run of wall that clears the furniture */
.pv-safe {
  position: absolute;
  border: 1px dashed rgba(18, 19, 20, .38);
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.pv-room.show-safe .pv-safe { opacity: 1; }
.pv-safe span {
  position: absolute;
  left: 0; top: -20px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #2a2924;
  background: rgba(255,255,255,.9);
  padding: 1px 6px;
  white-space: nowrap;
}

/* the measure always shows: it is the point of the thing */
.pv-rule { opacity: 1; }

.pv-grid.is-full button { opacity: .32; cursor: not-allowed; }
.pv-grid button:disabled:hover { outline-color: transparent; }

/* take one down straight from the wall */
.pv-art .kill {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(12, 13, 14, .86);
  color: #fff;
  border: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease;
  z-index: 3;
}
.pv-art:hover .kill, .pv-art.is-picked .kill, .pv-art:focus-within .kill { opacity: 1; }
.pv-art .kill:hover { background: #a3261c; }
@media (hover: none) { .pv-art .kill { opacity: 1; } }

/* dragging one to a new place in the run */
.pv-art { touch-action: none; }
.pv-art.is-dragging { opacity: .55; outline-color: #121314; z-index: 4; }
.pv-room.is-sorting { cursor: grabbing; }
.pv-room.is-sorting .pv-art { cursor: grabbing; }

/* the picker swaps rather than adds while a frame is selected */
.pv-grid.is-swapping button:hover { outline-color: #a3261c; }


/* the size picker that appears on a selected frame */
.pv-art .tag.size-pick {
  opacity: 1;
  pointer-events: auto;
  font-family: var(--mono);
  border: 1px solid #121314;
  background: #fff;
  color: #121314;
  padding: 3px 6px;
  cursor: pointer;
  z-index: 3;
}