/* The recorded week, opened from the walk-in. The replay's own stylesheet
   still draws the town and every control; this file only places things and
   sets the type. The town is full bleed, the controls float at its foot, the
   residents and the feed sit in a panel on the right, and the guide keeps
   talking from its board at the bottom left. */

.rp { --side-w: 23rem; margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #f3ede3; font-family: var(--display); }
.rp-main { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; } /* the replay's stylesheet sets every main to reading width */
.rp .townmap { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; z-index: 0; } /* its own layer: the names and bubbles over the 3D town stack inside it, under every panel */
.rp .townmap > svg { width: 100%; height: 100%; }
.rp .townmap.is3d .stage3d { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.rp .viewpick { top: calc(74px + var(--safe-t)); left: 16px; }
.rp .mapui { top: calc(124px + var(--safe-t)); left: 16px; right: auto; }
.rp .mapcard { top: calc(74px + var(--safe-t)); left: 76px; bottom: auto; z-index: 3; font-family: var(--display); }
.rp .mapcard q { font-family: var(--voice); font-style: italic; }

/* the bar */
.rp-title { margin: 0 auto 0 0; font: 700 .98rem/1 var(--display); color: var(--ink-2); background: rgb(251 241 220 / .92); padding: 10px 14px 8px; border-radius: var(--pill); box-shadow: 0 2px 0 rgb(71 48 26 / .16); white-space: nowrap; }
.rp #join { margin-left: 0; }
.rp .btn-quiet { color: var(--wood); background: rgb(251 241 220 / .94); box-shadow: inset 0 0 0 2px rgb(109 69 38 / .3), 0 2px 0 rgb(71 48 26 / .12); }
.rp .btn-quiet:hover { box-shadow: inset 0 0 0 2px var(--wood), 0 2px 0 rgb(71 48 26 / .12); }
.rp .topbar .btn:focus-visible, .rp .wordmark:focus-visible { outline-color: var(--wood); }

/* residents and the feed: introductions, bids and talk */
.rp-side {
  position: fixed; top: calc(70px + var(--safe-t)); right: 14px; bottom: calc(14px + var(--safe-b)); width: var(--side-w); z-index: 4;
  overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 14px 18px 18px; border-radius: 20px;
  background: rgb(251 241 220 / .96); box-shadow: 0 3px 0 rgb(71 48 26 / .14), 0 18px 40px -22px rgb(42 32 24 / .45);
}
.rp-side-close {
  position: sticky; top: 0; float: right; z-index: 1; width: 40px; height: 40px; margin: -4px -8px 0 8px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(109 69 38 / .1); color: var(--wood); font: 700 1.5rem/1 var(--display);
}
.rp-side-close:focus-visible { outline: 3px solid var(--wood); outline-offset: 2px; }
.rp-side h2 { margin: 6px 0 10px; font: 800 1.12rem/1 var(--display); color: var(--ink); letter-spacing: -.005em; text-transform: none; }
.rp-side section + section { margin-top: 20px; }
.rp .feed { max-height: none; }

/* the player */
.rp .controls {
  position: fixed; left: 16px; right: calc(var(--side-w) + 30px); bottom: calc(14px + var(--safe-b)); top: auto; z-index: 5;
  margin: 0; padding: 8px 12px; border-radius: var(--pill); flex-wrap: nowrap;
  background: rgb(251 241 220 / .96); box-shadow: 0 3px 0 rgb(71 48 26 / .16), 0 14px 30px -16px rgb(42 32 24 / .45);
}
.rp:has(.rp-side[hidden]) .controls { right: 16px; }
.rp .controls input[type=range] { flex: 1; min-width: 5rem; }
.rp .controls .mono, .rp .clockface { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the guide */
.rp-guide { position: fixed; left: 16px; bottom: calc(84px + var(--safe-b)); width: min(31rem, calc(100vw - var(--side-w) - 64px)); z-index: 5; }
.rp:has(.rp-side[hidden]) .rp-guide { width: min(31rem, calc(100vw - 32px)); }
.rp-guide .talk-card { padding: 28px 20px 16px; }
.rp-guide .talk-line { min-height: 0; font-size: clamp(1rem, .92rem + .3vw, 1.15rem); }
/* the days of the week, and the key moments of the day the replay is in */
.rp-days { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .8rem/1 var(--display); color: rgb(255 243 214 / .72); }
.rp-daylist { display: flex; gap: 5px; }
.rp-day {
  width: 30px; height: 30px; padding: 2px 0 0; border: 0; border-radius: 50%; cursor: pointer;
  font: 700 .86rem/1 var(--display); color: var(--cream); background: rgb(255 243 214 / .07); box-shadow: inset 0 0 0 1.5px rgb(255 243 214 / .26);
  font-variant-numeric: tabular-nums;
}
.rp-day:hover { background: rgb(255 243 214 / .15); }
.rp-day[aria-current="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: 0 2px 0 var(--gold-edge); }
.rp-day:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.rp-guide .talk-line { min-height: 2.9em; }
.rp-moments {
  position: relative; display: flex; flex-wrap: nowrap; gap: 8px; margin: 12px -20px 0; padding: 0 20px 6px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 20px; scrollbar-width: thin; scrollbar-color: rgb(255 243 214 / .3) transparent;
}
.rp-moment { flex: none; transition: opacity .2s, background-color .2s; }
.rp-moment.passed { opacity: .62; }
.rp-moment {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 46px; box-sizing: border-box;
  padding: 8px 12px 6px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: 700 .9rem/1.1 var(--display); color: var(--cream); background: rgb(255 243 214 / .08); box-shadow: inset 0 0 0 1.5px rgb(255 243 214 / .3);
}
.rp-moment:hover { background: rgb(255 243 214 / .15); }
.rp-moment[aria-current="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: 0 2px 0 var(--gold-edge); opacity: 1; }
.rp-moment:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.rp-when { font: 600 .75rem/1 var(--display); opacity: .8; font-variant-numeric: tabular-nums; }

@media (max-width: 56rem) {
  .rp { --side-w: 0px; }
  /* on a phone who's who is a sheet over the lower screen, and the guide steps aside while it is open */
  .rp-side { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(74px + var(--safe-b)); height: min(66vh, calc(100dvh - 150px)); z-index: 6; background: var(--paper); border-radius: 20px; padding: 12px 16px 16px; }
  .rp:has(.rp-side:not([hidden])) .rp-guide { visibility: hidden; }
  .rp .controls { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); gap: 8px; padding: 7px 10px; }
  .rp .controls select { width: 4.9rem; flex: none; }
  .rp .clockface { white-space: nowrap; font-size: .82rem; flex: none; }
  .rp-guide { left: 8px; right: 8px; width: auto; bottom: calc(72px + var(--safe-b)); }
  .rp-title, .rp #pos { display: none; }
  .rp-guide .talk-card { padding: 22px 15px 10px; }
  .rp-moments { margin: 10px -15px 0; padding: 0 15px 4px; scrollbar-width: none; }
  .rp-day { width: 32px; height: 32px; }
  .rp-guide .talk-line { min-height: 0; }
  .rp .mapcard { left: 10px; top: auto; bottom: calc(250px + var(--safe-b)); }
}
@media (max-width: 30rem) {
  .rp .wordmark { display: none; }
  .rp .topbar { gap: 6px; }
  .rp .btn-small { padding: .1em .75em 0; font-size: .875rem; }
}

/* ---- folding the guide and the player into a cloud ---- */
.rp-min {
  position: absolute; top: 10px; right: 10px; width: 42px; height: 34px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; background: rgb(255 243 214 / .08); box-shadow: inset 0 0 0 1.5px rgb(255 243 214 / .28);
}
.rp-min svg { width: 26px; height: 17px; fill: var(--cream); }
.rp-min:hover { background: rgb(255 243 214 / .16); }
.rp-min:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.rp-cloud {
  position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); translate: -50% 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 7px 18px 7px 7px;
  background: #fffaf0; border-radius: 999px;
  filter: drop-shadow(0 3px 0 rgb(71 48 26 / .16)) drop-shadow(0 12px 18px rgb(42 32 24 / .22));
}
.rp-cloud::before, .rp-cloud::after { content: ""; position: absolute; z-index: -1; background: inherit; border-radius: 50%; pointer-events: none; }
.rp-cloud::before { width: 44px; height: 44px; left: 26%; top: -17px; }
.rp-cloud::after { width: 34px; height: 34px; left: 50%; top: -12px; }
.rp-cloud.puff { animation: puff .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes puff { 40% { transform: scale(1.07); } }
.rp-cloud-play {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  font: 700 1rem/1 var(--display); color: var(--gold-ink); background: var(--gold); box-shadow: 0 2px 0 var(--gold-edge);
}
.rp-cloud-play:focus-visible, .rp-cloud-open:focus-visible { outline: 3px solid var(--wood); outline-offset: 2px; }
.rp-cloud-open {
  display: grid; justify-items: start; gap: 2px; min-width: 0; min-height: 42px; align-content: center; padding: 0 22px 0 2px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; text-align: left; position: relative;
}
.rp-cloud-open::after { /* opens upward */
  content: ""; position: absolute; right: 2px; top: 50%; margin-top: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--ink-3);
}
.rp-cloud-when { font: 700 .74rem/1 var(--display); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-cloud-what { font: 800 .98rem/1.15 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(58vw, 22rem); }
.rp.min .rp-guide, .rp.min .controls { display: none; }
.rp.min .mapcard { bottom: calc(96px + var(--safe-b)); }
@media (max-width: 56rem) {
  .rp.min .rp-side { bottom: calc(96px + var(--safe-b)); }
}

/* four buttons on a phone: the town's name steps aside earlier than on the walk-in */
@media (max-width: 30rem) { .rp .topbar .btn { font-size: .74rem; padding-inline: 7px; } .rp .topbar { gap: 5px; } }

/* A bidder's stated reason, while the replay passes the ask it came with: a
   thought bubble under the guide's line, trailing two small puffs up to it. */
.rp-thought { position: relative; margin: 12px 0 2px; padding: 9px 13px 10px; border-radius: 16px; background: color-mix(in srgb, #f2a93b 18%, #fffaf2); box-shadow: inset 0 0 0 1px rgb(58 36 16 / .1); }
.rp-thought::before, .rp-thought::after { content: ""; position: absolute; border-radius: 50%; background: inherit; box-shadow: inherit; }
.rp-thought::before { width: 11px; height: 11px; left: 18px; top: -7px; }
.rp-thought::after { width: 6px; height: 6px; left: 11px; top: -14px; }
.rp-thought figcaption { font: 700 .8rem / 1.25 var(--display); color: #7a4d06; }
.rp-thought blockquote { margin: 3px 0 0; font: italic 400 .95rem / 1.42 var(--voice); color: #2b241d; }
@media (max-width: 40rem) { .rp-thought blockquote { font-size: .88rem; } }