/* Your session: Zoom on top (the Meeting SDK mounts in .ss-stage), notes underneath. Light paper, one border style, plum only on the button. */
.ss-main { max-width: calc(960px + 2 * var(--gutter)); margin-inline: auto; padding-top: 128px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ss-head { display: grid; gap: 8px; }
.ss-when { font-size: var(--text-letter); color: var(--ink-2); }
.ss-zoom { margin-top: 40px; }
.ss-stage { display: grid; place-content: center; justify-items: center; gap: 12px; aspect-ratio: 16 / 9; padding: 32px; border-radius: var(--radius); border: 1.5px solid #F2EEEE; text-align: center;
  background: linear-gradient(135deg, #EFEAEA 0%, #E2DBDB 100%); }
.ss-romee { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--field); }
.ss-wait { margin-top: 8px; font-family: var(--display); font-weight: 300; font-size: var(--text-h3); line-height: 1.2; }
.ss-sub { max-width: 30em; color: var(--ink-2); }
.ss-fallback { margin-top: 12px; font-size: var(--text-label); color: var(--ink-2); }
.ss-notes { display: grid; gap: 12px; margin-top: 56px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); border: 1.5px solid #F2EEEE; background: #FCFAFA; }
.ss-hint { color: var(--ink-2); }
.ss-notes textarea { width: 100%; min-height: 220px; resize: vertical; margin-top: 8px; padding: 20px 22px; border: 1.5px solid #F2EEEE; border-radius: var(--radius); background: #FFFFFF; color: var(--ink);
  font: 400 var(--text-letter)/1.6 var(--serif); }
.ss-notes textarea::placeholder { color: var(--ink-2); }
.ss-notes textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 8px; }
.ss-status { font-size: var(--text-small); color: var(--ink-2); }
@media (max-width: 640px) {
  .ss-main { padding-top: 104px; }
  .ss-head, .ss-zoom, .ss-notes { text-align: center; justify-items: center; }
  .ss-stage { aspect-ratio: 3 / 4; }
  .ss-notes { padding: 28px 16px; }
  .ss-notes textarea { text-align: start; }
  .ss-notes textarea::placeholder { text-align: center; }
  .ss-actions { flex-direction: column-reverse; justify-content: center; }
}
.ss-notes .jr-h2 { text-wrap: balance; }

/* Zoom in the page: the idle card, the join button, and the live meeting filling the stage. */
.ss-idle { display: grid; justify-items: center; gap: 12px; }
.ss-join { margin-top: 16px; }
.ss-join:disabled { opacity: 0.7; cursor: progress; }
.ss-stage.is-live { display: block; aspect-ratio: auto; height: clamp(520px, 72vh, 800px); padding: 0; overflow: hidden; background: #FCFAFA; }
.ss-app { width: 100%; height: 100%; }
.ss-app[hidden], .ss-idle[hidden] { display: none; }
@media (max-width: 640px) { .ss-stage.is-live { height: clamp(480px, 78vh, 720px); } }