/* /join, in two steps. First the room on its own, full width. Once you pick the lit desk,
   the room moves left and the form opens on the right (stacked on narrow screens). */
.join { inline-size: min(100% - 2 * var(--gutter), 84rem); margin: 0 auto; padding: 104px 0 16vh; }
.join[data-stage="apply"] {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.join-room { view-transition-name: room; min-inline-size: 0; }
.join-room .space { margin-block-start: 8px; max-block-size: max(320px, calc(100svh - 340px)); }   /* keeps Continue on screen */
/* Under the room: how many are open, and the way on. */
.room-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-block-start: 12px; }
.room-hint { margin: 0; color: var(--text); text-wrap: pretty; }
.join[data-stage="apply"] .room-cta .button { display: none; }
.join[data-stage="apply"] .join-room { position: sticky; inset-block-start: 104px; }

/* Pricing cards above the room. The chosen one gets a brighter outline; they double as the plan's radio buttons. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block-end: 8px; }
.plan-card {
  position: relative; display: grid; align-content: start; gap: 2px; padding: 18px 20px 20px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px #ffffff14; cursor: pointer;
  transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.plan-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.plan-card:has(input:checked) { box-shadow: inset 0 0 0 1px #ffffff5c; background: #ffffff06; }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--faint); outline-offset: 3px; }
.plan-card:has(input:disabled) { cursor: default; }
.plan-name { color: var(--strong); font-size: 15px; }
.plan-price { margin-block: 6px 8px; font-size: 13px; color: var(--faint); }
.plan-amount { font-size: 26px; letter-spacing: -.01em; color: var(--strong); font-variant-numeric: tabular-nums; }
.plan-blurb { font-size: 14px; line-height: 1.5; text-wrap: pretty; }
/* Committing for longer: the month-to-month price, struck through, after the new one. */
.plan-was { margin-inline-start: 8px; color: var(--faint); text-decoration-thickness: 1px; opacity: 0; transition: opacity 200ms var(--ease-out); }
.plan-card.discounted .plan-was { opacity: 1; }
/* How long, on the form: what 3 months and 1 year take off, in the lamp's colour. */
.chip-off { margin-inline-start: 8px; color: var(--lamp); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip input:checked + span .chip-off { color: inherit; opacity: .6; }
.plan-card:not(:has(input:checked)) :is(.plan-name, .plan-amount, .plan-blurb) { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .plan-card:hover:not(:has(input:disabled)) { box-shadow: inset 0 0 0 1px #ffffff33; } .plan-card:has(input:checked):hover { box-shadow: inset 0 0 0 1px #ffffff5c; } }

.apply { view-transition-name: apply; }
.apply[hidden] { display: none; }
.apply-title { margin: 0 0 22px; font-size: 17px; font-weight: 500; color: var(--strong); }
.apply .pick { margin-block-end: 12px; }
.apply-details { flex: 1 1 14rem; margin: 0; font-size: 13px; line-height: 1.5; color: var(--faint); text-wrap: pretty; }
.apply .form { margin-block-start: 30px; }
.members-link { margin: 36px 0 0; font-size: 14px; color: var(--faint); }

::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); } }

body.joined .plan-card:not(:has(input:checked)) { opacity: .3; }
body.joined .plan-tabs { display: none; }
body.joined .apply-title, body.joined .apply-details { display: none; }

@media (max-width: 960px) {
  .join[data-stage="apply"] { display: block; }
  .join[data-stage="apply"] .join-room { position: static; }
  .join[data-stage="apply"] .space { aspect-ratio: 2 / 1; }
  .apply { inline-size: min(100%, 30rem); margin: 64px auto 0; scroll-margin-block-start: 120px; }
}
@media (max-width: 760px) {
  .join { padding-block-start: 128px; }
  .join[data-stage="apply"] .space { aspect-ratio: 4 / 5; }
  /* Phones: one plan to a row, its name on the left and the price on the right, so a long name never pushes its
     price out of line with the others. */
  .plans { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plan-card { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 6px; }
  .plan-name { font-size: 14px; }
  .plan-amount { font-size: 19px; }
  .plan-price { margin: 0; white-space: nowrap; }
  .plan-per, .plan-was { display: none; }
  .plan-price::after { content: "/mo"; }
  .plan-blurb { display: none; }
}
@media (prefers-reduced-motion: reduce) { .plan-card, .plan-was { transition: none; } }