/* The "on a wall" preview built by Poster.RoomView (rooms.js). Used by the studio and by the
   download page, so colours fall back from the site's tokens to the studio's. */
.room {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.room-view {
  position: relative; overflow: hidden;
  aspect-ratio: 1336 / 891;
  min-height: 0;
  background: #eee8dc;
}
.room-photo {
  position: absolute;
  display: block; max-width: none;
  user-select: none; -webkit-user-drag: none;
}
.room-poster {
  position: absolute;
  display: flex;
  border: 0 solid;
  box-sizing: border-box;
  background: #fff;
}
.room-poster canvas { position: absolute; display: block; }
.room-light { position: absolute; inset: 0; pointer-events: none; }
.room-card {
  position: absolute; left: 0; top: 0;
  display: block;
  transform-origin: 0 0;
  mix-blend-mode: multiply;
}

.room-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.room-caption { margin: 0; color: var(--color-muted, var(--muted)); font-weight: 500; font-size: 14px; line-height: 20px; }
.room-picks { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--color-surface, var(--paper)); }
.room-picks button {
  padding: 6px 9px;
  border: 1px solid transparent; border-radius: 5px;
  background: none; color: var(--color-muted, var(--muted)); font: inherit; font-size: 12px; line-height: 18px; cursor: pointer;
}
.room-picks button:hover { border-color: var(--color-line, var(--line)); }
.room-picks button[aria-pressed="true"] { color: var(--color-ink, var(--ink)); background: var(--color-paper, var(--paper)); border-color: var(--color-line, var(--line)); }
.room-picks button[hidden], .room-picks:not(:has(button:not([hidden]))) { display: none; }