/* /host, in two steps like /join. First the room on its own, filling the window, rearranged for the setup you pick
   (the tabs, top right), and Continue in the bottom right. Then the room moves left and the request form opens on
   the right (stacked on narrow screens). */
.host { inline-size: min(100% - 2 * var(--gutter), 84rem); margin: 0 auto; padding: 112px 0 16vh; }
.host[data-stage="apply"] { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.host-room { view-transition-name: room; min-inline-size: 0; }
.host[data-stage="apply"] .host-room { position: sticky; inset-block-start: 104px; }
.host-room .space { max-block-size: max(320px, calc(100svh - 280px)); }   /* the room fills the window and Continue stays on screen */
.host-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px; margin-block-end: 12px; }
.host-head h1 { margin: 0 0 6px; font-family: var(--title); font-size: clamp(34px, 3.4vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -.01em; color: var(--strong); }
.host-head p { margin: 0; max-inline-size: 34rem; text-wrap: pretty; }
.host-head .plan-tabs { inline-size: min(100%, 22rem); margin: 0; }
.host[data-stage="apply"] .host-head .plan-tabs { inline-size: min(100%, 20rem); }

/* Under the room: the way on, in the bottom right. */
.host-cta { display: flex; justify-content: flex-end; margin-block-start: 16px; }
.host[data-stage="apply"] .host-cta { display: none; }

.host-apply { view-transition-name: apply; }
.host-apply[hidden] { display: none; }
.host-form-title { margin: 0 0 14px; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--strong); text-wrap: balance; }

::view-transition-group(room), ::view-transition-group(apply) { animation-duration: 550ms; animation-timing-function: var(--ease-out); }
::view-transition-new(apply) { animation: apply-in 550ms var(--ease-out) both; }
@keyframes apply-in { from { opacity: 0; transform: translateX(24px); } }

@media (max-width: 960px) {
  .host[data-stage="apply"] { display: block; }
  .host[data-stage="apply"] .host-room { position: static; }
  .host-apply { inline-size: min(100%, 30rem); margin: 64px auto 0; scroll-margin-block-start: 120px; }
}
@media (max-width: 760px) { .host { padding-block-start: 128px; } .host-head .plan-tabs { inline-size: 100%; } }

/* On the request, under the room: what each setup seats (the picked one outlined) and what comes with the room. */
.host-has { display: grid; gap: 14px; margin-block-start: 28px; }
.host[data-stage="pick"] .host-has { display: none; }
.host-has-title { margin: 0; font-size: 17px; font-weight: 500; color: var(--strong); }
.host-sizes { margin: 0; }
.host-sizes div:not(.is-current) { display: none; }   /* only the setup picked at the top */
.host-sizes div { padding: 12px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px #ffffff1f; }
.host-sizes dt { font-size: 13px; color: var(--faint); }
.host-sizes dd { margin: 2px 0 0; font-size: 15px; color: var(--strong); text-wrap: balance; }
.host-amenities { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; font-size: 14px; }
.host-amenities li { position: relative; padding-inline-start: 14px; }
.host-amenities li::before { content: ""; position: absolute; inset-inline-start: 1px; inset-block-start: .7em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--faint); }
.host-more { margin: 0; font-size: 14px; color: var(--text); }