/* OSV Live rooms and host console (public/live/). Mobile first: one column
   with the chat under the video; the video and chat sit side by side on wide
   screens. Builds on site.css tokens and components. */

/* Several site components set their own display, which would beat [hidden]. */
.live-room [hidden],
.live-console [hidden],
.live-console[hidden],
.live-host-login[hidden] {
  display: none !important;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

.p-live .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.live-head {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}
/* The meeting pages are tools with no painting in their heading, so the
   site's hills under it read as an empty band. They keep the soft sky only. */
.p-live main > .has-hills,
.p-live main > .has-hills--text {
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.p-live .page-hills {
  display: none;
}
/* The host console's name: the same font, larger. */
.p-live-host .live-head h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}
.live-section {
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.5rem, 5vw, 3.5rem);
}
.live-hint {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Room ---- */
.live-room {
  display: grid;
  gap: 1.25rem;
  max-width: 760px;
  margin-inline: auto;
}
.live-room > * {
  min-width: 0;
}
.live-room h2 {
  margin-top: 0;
}
.live-panel.form-card {
  width: 100%;
}
.live-notice {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.live-notice > :last-child {
  margin-bottom: 0;
}
/* The next meeting, as the site's "Save your seat" ticket: the date on the
   navy part, Add to calendar on the stub, a notch at each end. */
.live-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  margin: 1.35rem 0;
  padding: 0;
  border-radius: 18px;
  color: var(--on-dark);
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 100%);
  box-shadow: 0 18px 30px -22px rgba(20, 32, 58, 0.85);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, transparent 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 97%, #000) 100% 0 / 51% 100% no-repeat;
}
.live-next-words {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: 0.95rem 1.1rem 0.95rem 1.6rem;
}
.live-next-label {
  justify-self: start;
  font-family: var(--f-hand);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--gold);
  rotate: -2deg;
  transform-origin: left bottom;
}
.live-next-when {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
}
.live-next .live-next-add {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.9rem 1.5rem 0.9rem 0;
  white-space: nowrap;
}
.live-next-add .live-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.live-next::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: 0;
  margin-left: -1.1rem;
  border-left: 2px dashed rgba(239, 233, 218, 0.3);
}
@media (max-width: 559px) {
  .live-next {
    grid-template-columns: 1fr;
    overflow: hidden;
    -webkit-mask: none;
    mask: none;
  }
  .live-next-words {
    padding: 1rem 1.15rem 0.85rem;
  }
  .live-next .live-next-add {
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
    margin: 0;
    padding-block: 0.85rem;
    border-radius: 0;
    box-shadow: none;
  }
  .live-next::after {
    display: none;
  }
}
/* Notes in the join card: why there's no passcode to type (a personal
   link), or when the waiting room opens. */
.live-invite-note,
.live-closed-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
}
.live-invite-note {
  background: #fbf1d6;
  box-shadow: inset 0 0 0 1.5px rgba(180, 134, 31, 0.38);
}
.live-closed-note {
  background: var(--mist-soft);
  box-shadow: inset 0 0 0 1.5px rgba(143, 165, 198, 0.6);
}
.live-invite-note .live-icon,
.live-closed-note .live-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
}
.live-invite-note .live-icon {
  color: var(--gold-ink, #8e6614);
}
.live-precall {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1.5px dashed rgba(122, 91, 19, 0.3);
  font-size: 0.95rem;
  color: var(--muted);
}
.live-precall .live-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: var(--gold-ink, #8e6614);
}
.live-join-btn {
  min-width: 12rem;
  justify-content: center;
}
@media (max-width: 559px) {
  .live-join-btn {
    width: 100%;
  }
}
.live-leave-row {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
.live-stage {
  display: grid;
  gap: 1rem;
}
.live-stage-head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}
.live-stage-head p {
  margin: 0;
  color: var(--muted);
}
.live-stage-head .live-presenter-note {
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--navy);
}

/* ---- Video ---- */
.live-video {
  display: grid;
  gap: 0.75rem;
}
.live-video-note {
  margin: 0;
  padding: 0.95rem 1.15rem;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-card);
  background: var(--mist-soft);
  color: var(--navy);
  font-weight: 700;
}
div.live-video-note {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
div.live-video-note p {
  margin: 0;
}
div.live-video-note .live-video-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* The UI kit's <rtk-meeting> defaults to position: fixed over the whole
   window. live-video.js sets mode="fill"; the mount is also its containing
   block (contain: layout paint) and its own stacking context below the site
   header and the chat, so nothing from the call can cover the page. */
.live-video-mount {
  position: relative;
  z-index: 0;
  isolation: isolate;
  contain: layout paint;
  width: 100%;
  min-height: 340px;
  height: clamp(340px, 64vh, 720px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fffcf5;
  box-shadow: var(--shadow-card);
}
.live-video-mount:empty {
  display: none;
}
/* The UI kit places rtk-header, rtk-stage and rtk-controlbar in the light DOM
   of <rtk-meeting> and sizes the stage with flex: 1, so the element must stay a
   flex column. display: block collapsed the stage (and every tile) to 0 px. */
.live-video-mount rtk-meeting {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  /* Village colors for the call (the Village square look Taylor picked,
     2026-10-24): warm paper and cream surfaces, navy words, gold buttons
     with ink text, a brick red for Leave, Mulish for the words, and softer
     corners like the rest of the site. The UI kit reads --rtk-* variables as
     "R G B" triples (it adds the alpha itself) and writes the preset's theme
     onto <rtk-meeting> as inline styles, so these need !important to win.
     Every shadow component inherits them from here; live-look.js adds the
     rest of the look (round buttons, the tiles' gold edge) inside the kit. */
  --rtk-border-radius-sm: 8px !important;
  --rtk-border-radius-md: 12px !important;
  --rtk-border-radius-lg: 18px !important;
  --rtk-font-family: var(--font-body, "Mulish", "Segoe UI", system-ui, sans-serif) !important;
  --rtk-colors-background-1000: 255 252 245 !important;
  --rtk-colors-background-900: 247 241 226 !important;
  --rtk-colors-background-800: 239 230 207 !important;
  --rtk-colors-background-700: 229 217 187 !important;
  --rtk-colors-background-600: 216 201 163 !important;
  --rtk-colors-video-bg: 226 233 242 !important;
  --rtk-colors-brand-300: 233 200 132 !important;
  --rtk-colors-brand-400: 215 164 62 !important;
  --rtk-colors-brand-500: 215 164 62 !important;
  --rtk-colors-brand-600: 190 143 48 !important;
  --rtk-colors-brand-700: 160 119 36 !important;
  --rtk-colors-text-1000: 29 44 76 !important;
  --rtk-colors-text-900: 29 44 76 / 0.88 !important;
  --rtk-colors-text-800: 29 44 76 / 0.76 !important;
  --rtk-colors-text-700: 29 44 76 / 0.64 !important;
  --rtk-colors-text-600: 29 44 76 / 0.52 !important;
  --rtk-colors-text-on-brand-1000: 31 42 64 !important;
  --rtk-colors-text-on-brand-900: 31 42 64 / 0.88 !important;
  --rtk-colors-text-on-brand-800: 31 42 64 / 0.76 !important;
  --rtk-colors-text-on-brand-700: 31 42 64 / 0.64 !important;
  --rtk-colors-text-on-brand-600: 31 42 64 / 0.52 !important;
  --rtk-colors-danger: 169 84 47 !important;
}
.live-rtk-warning {
  margin: 0;
  border-color: #a4442a;
  background: #fbeee9;
  color: #6b2a17;
  font-weight: 700;
}

/* ---- Chat ---- */
.live-chat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.live-chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.live-chat-title {
  margin: 0;
  font-size: 1.15rem;
}
.live-chat-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}
.live-chat-status:empty {
  display: none;
}
.live-chat-scroll {
  min-height: 14rem;
  max-height: min(55vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  border-radius: 14px;
  background: var(--cream);
}
.live-chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.live-chat-empty {
  margin: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.live-msg {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: var(--white);
}
.live-msg--host {
  background: var(--gold-soft);
}
.live-msg-meta {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}
.live-msg-name {
  margin-right: 0.35rem;
  font-weight: 800;
  color: var(--navy);
}
.live-msg-text {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.live-msg-delete {
  justify-self: start;
  min-height: 32px;
  margin-top: 0.2rem;
  padding: 0.15rem 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  color: #a4442a;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}
.live-chat-form {
  display: flex;
  gap: 0.5rem;
}
.live-chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.live-chat-form input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(143, 165, 198, 0.35);
}
.live-chat-notice {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6f4e08;
}
.live-chat-notice:empty {
  display: none;
}


/* ---- Index ---- */
.live-test-note {
  margin-top: 0;
  max-width: 760px;
}
.live-room-cards {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.live-room-cards .live-room-card {
  display: grid;
  gap: 0.35rem;
  height: 100%;
}
.live-room-card img {
  width: 112px;
  height: auto;
}
.live-room-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
}
.live-room-card-line {
  color: var(--muted);
}
.live-steps {
  max-width: 62ch;
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
}
.live-facts {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}
.live-operator {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
/* Privacy and what to expect, on the room pages: each fact on its own paper
   card with a picture. */
.live-privacy-head {
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
.live-privacy-head .eyebrow {
  transform-origin: center bottom;
}
.live-privacy-head h2 {
  margin: 0;
}
.live-facts--cards {
  max-width: 1000px;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
  gap: 12px;
}
.live-facts--cards li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 18px 14px 14px;
  border-radius: 18px;
  background: var(--paper, #fffcf5);
  box-shadow: 0 0 0 1px var(--line), 0 12px 22px -18px rgba(20, 32, 58, 0.45);
  line-height: 1.5;
  color: var(--ink);
}
.live-fact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--navy);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1.5px rgba(180, 134, 31, 0.3);
}
.live-fact-icon .live-icon {
  width: 21px;
  height: 21px;
}
.live-facts--cards + .live-operator {
  text-align: center;
}
@media (min-width: 760px) {
  .live-facts--cards {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
}
@media (min-width: 680px) {
  .live-room-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Host console ---- */
.live-host-login {
  margin-inline: auto;
}
.live-console {
  display: grid;
  gap: 1.25rem;
}
.live-console-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.live-console-bar form {
  margin: 0;
}
.live-host-signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.live-host-who {
  font-size: 0.9rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.live-host-access {
  margin: 1rem 0 0;
}
.live-host-login .form-status:empty {
  display: none;
}
.live-room-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
}
.live-room-switch button {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 800;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.live-room-switch button[aria-pressed="true"] {
  background: var(--navy);
  color: var(--cream);
}
.live-host-notice,
.live-host-connection {
  margin: 0;
  font-weight: 700;
}
.live-host-notice:empty {
  display: none;
}
.live-host-notice {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--mist-soft);
  color: var(--navy);
}
.live-host-connection {
  color: #6f4e08;
}
.live-console-grid {
  display: grid;
  gap: 1rem;
}
.live-console-card {
  min-width: 0;
  padding: 1.25rem;
}
.live-console-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}
.live-console-card > :last-child {
  margin-bottom: 0;
}
.live-session-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-weight: 800;
  color: var(--navy);
}
.live-session-state::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--muted);
}
.live-session-state[data-live-session-state="live"]::before {
  background: #2f8a57;
}
.live-attendees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  /* Rows lay out by the list's own width, not the window's: beside the
     video the list is narrow even on a wide screen. */
  container-type: inline-size;
}
.live-attendee {
  display: grid;
  gap: 0.3rem 0.75rem;
  padding: 0.75rem 0.85rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.live-attendee-name {
  font-weight: 800;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.live-attendee-meta {
  font-size: 0.88rem;
  color: var(--muted);
}
.live-attendee[data-connected="false"] .live-attendee-meta {
  color: #6f4e08;
}
.live-attendee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.live-empty {
  margin: 0;
  color: var(--muted);
}
.live-passcode-form {
  margin-top: 0.75rem;
}
/* Name and buttons side by side only when the list has room for both;
   otherwise the buttons go under the name. */
@container (min-width: 540px) {
  .live-attendee {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .live-attendee-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
.live-waiting-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.live-waiting-head h2 {
  margin: 0;
}
@media (min-width: 760px) {
  .live-console-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Meeting invites and recordings (host console) ---- */
.live-meetings-card,
.live-recordings-card,
.live-library-card {
  grid-column: 1 / -1;
}
.live-meetings {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.live-meeting {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}
.live-meeting p {
  margin: 0;
}
.live-meeting-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  color: var(--navy);
}
.live-meeting-open {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.8rem;
  font-weight: 700;
}
.live-meeting-code {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--muted);
}
.live-meeting-passcode {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.live-meeting .btn-row {
  gap: 0.5rem;
}
.live-meeting-text summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
}
.live-recording-meta {
  color: var(--muted);
}
.live-meeting-text textarea {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  resize: vertical;
}

/* ---- Recordings saved on the website (host console, Village Hall) ---- */
.live-library {
  grid-template-columns: 1fr;
}
.live-library-item .live-meeting-when strong {
  font-size: 1.05rem;
}
.live-library-status {
  color: var(--navy);
  font-weight: 600;
}
.live-library-note {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: #fbf1d6;
  box-shadow: inset 0 0 0 1px rgba(180, 134, 31, 0.35);
  color: var(--navy);
  font-size: 0.9rem;
}
.live-library-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  color: #2f6b3b;
  font-weight: 700;
}
.live-library-saved::before {
  content: "\2713";
}
.live-library-send {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px dashed rgba(122, 91, 19, 0.38);
  border-radius: 12px;
  background: var(--paper, #fffdf7);
}
.live-library-send .live-hint {
  margin: 0;
}
.live-library-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.live-library-consent input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.12rem;
  accent-color: var(--navy);
}
.live-library-people summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
}
.live-library-people ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.live-library-people li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
}

/* ---- Support group emails (host console, group room) ---- */
.live-group-card {
  grid-column: 1 / -1;
}
.live-group-card h3 {
  margin: 1.1rem 0 0.5rem;
  font-size: 1rem;
  color: var(--navy);
}
.live-group-state {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--navy);
}
.live-group-state[data-group-emails="off"] {
  color: #6f4e08;
}
.live-group-grid {
  display: grid;
  gap: 0 1.5rem;
}
.live-group-col {
  min-width: 0;
}
.live-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.live-group-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy);
}
.live-group-meta {
  font-size: 0.88rem;
  color: var(--muted);
}
.live-group-form {
  margin-top: 0.75rem;
}
.live-group-card .live-attendee-meta {
  overflow-wrap: anywhere;
}
.live-group-card .live-meeting-text {
  margin-top: 0.6rem;
}
@media (min-width: 900px) {
  .live-group-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Personal links (host console) ---- */
.live-invite-when {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.live-invite-when legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: 700;
}
.live-invite-when label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  font-weight: 600;
}
.live-invite-when input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--navy);
}
.live-invite-result {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}
.live-invite-result input {
  width: 100%;
  font-size: 0.85rem;
}
.live-approve-all {
  margin: 0.75rem 0 0;
}

/* ---- Meeting layout ----
   While a call is on screen (html.live-in-call, set by live-video.js), the
   call gets the window: the page heading and the phone's bottom buttons step
   aside, the site header scrolls away instead of sticking, and the video is
   as tall as the window. Full view (.live-full on the page's
   [data-live-stage] area, also from live-video.js) pins the video and chat,
   and for hosts the waiting room, over the whole page until the person
   leaves it. The call itself stays inside its mount either way. */
:root {
  --live-call-h: max(320px, calc(100vh - 4.5rem));
}
@supports (height: 100dvh) {
  :root {
    --live-call-h: max(320px, calc(100dvh - 4.5rem));
  }
}
html.live-in-call .live-head,
html.live-in-call .thumb-bar {
  display: none !important;
}
html.live-in-call .site-header {
  position: static;
}
html.live-in-call .live-section {
  padding-top: 0.75rem;
}
html.live-in-call .live-section > .container {
  max-width: 1680px;
}
/* The call's buttons (Full view, and for hosts Record, the waiting room and
   End session) sit in the call's own control bar. This row only shows them
   if the call couldn't take them (live-call-buttons.js). */
.live-video-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
}
.live-video-tools[hidden] {
  display: none;
}
.live-call-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.live-call-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}
.live-call-icon svg {
  width: 100%;
  height: 100%;
}
.live-call-tool--red {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}
.live-call-tool--alert {
  box-shadow: 0 0 0 3px var(--gold);
}
.live-video:not([data-live-video-status="ready"]) .live-video-tools {
  display: none;
}
html.live-in-call .live-video[data-live-video-status="ready"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: var(--live-call-h);
}
html.live-in-call .live-video[data-live-video-status="ready"] .live-video-mount {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
[data-live-stage] {
  scroll-margin-top: 0.5rem;
}

/* Room page: the chat sits beside the video on wide screens and fills the
   same height; on phones it follows the video. */
.live-room[data-live-state="approved"] {
  max-width: none;
}
@media (min-width: 900px) {
  .live-room[data-live-state="approved"] {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
  }
  .live-room[data-live-state="approved"] .live-leave-row {
    grid-column: 1 / -1;
  }
  .live-room[data-live-state="approved"] .live-chat-scroll {
    max-height: min(55vh, 32rem);
  }
  /* In a call: the video takes the left column at the call's full height,
     the chat fills the right column, and Leave sits under the chat. */
  html.live-in-call .live-room[data-live-state="approved"] {
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--live-call-h);
    gap: 0.5rem 1rem;
    align-items: stretch;
  }
  html.live-in-call .live-room[data-live-state="approved"] > .live-video[data-live-video-status="ready"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
  }
  html.live-in-call .live-room[data-live-state="approved"] > .live-stage {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  html.live-in-call .live-room[data-live-state="approved"] > .live-leave-row {
    grid-column: 2;
    grid-row: 2;
  }
  html.live-in-call .live-room[data-live-state="approved"] .live-chat {
    min-height: 0;
  }
  html.live-in-call .live-room[data-live-state="approved"] .live-chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* Host console: the session controls and the video on the left, the waiting
   room, chat and who's in on the right. Passcode and personal links sit
   below. Until the host opens their video, a placeholder holds its place. */
.live-console-stage {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.live-console-main,
.live-console-side {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
}
.live-session-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.live-session-card h2,
.live-session-card .live-session-state,
.live-session-card .btn-row,
.live-session-card .live-hint {
  margin: 0;
}
.live-session-card .btn-row {
  gap: 0.6rem;
}
.live-session-card .live-hint {
  flex-basis: 100%;
}
html.live-in-call .live-session-card .live-hint {
  display: none;
}
.live-video-placeholder {
  display: none;
}
.live-video[hidden] + .live-video-placeholder {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 34vh, 380px);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  box-shadow: var(--shadow-card);
  color: var(--cream);
  text-align: center;
}
.live-video-placeholder p {
  margin: 0;
  max-width: 34ch;
}
.live-video-placeholder strong {
  color: var(--gold);
}
.live-console-side .live-chat-scroll {
  min-height: 10rem;
  max-height: min(42vh, 26rem);
}
/* The video leaves room for the session controls above it: one row on wide
   screens, two on tablets and phones. */
html.live-in-call .live-console-main .live-video[data-live-video-status="ready"] {
  height: calc(var(--live-call-h) - 6rem);
}
@media (min-width: 1000px) {
  html.live-in-call .live-console-main .live-video[data-live-video-status="ready"] {
    height: calc(var(--live-call-h) - 4.5rem);
  }
}
@media (min-width: 1000px) {
  .live-console-stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  }
  .live-session-card .btn-row {
    margin-left: auto;
  }
}

/* ---- Full view: the village square ----
   Once a person joins, the call fills the window (.live-full on the page's
   [data-live-stage], from live-video.js), like Zoom, dressed as the Village
   square look Taylor picked (2026-10-24): a sky, bunting across the top, the
   village scene along the bottom, and the call on a paper card between them.
   The bunting and the scene (.live-scenery) are drawn at their own shape, so
   the flags never stretch. As in Zoom, the call's Chat button (and for hosts,
   Participants) opens a panel on the right (.live-chat-open,
   .live-people-open); on a tablet or phone it slides over the call. */
html.live-full-open {
  overflow: hidden;
}
.live-scenery {
  display: none;
}
.live-full {
  --live-call-h: max(300px, calc(100vh - 1rem));
  /* The card's edges, and the space inside it. */
  --card-top: clamp(26px, 3.4vw, 52px);
  --card-side: clamp(10px, 1.8vw, 28px);
  --card-bottom: min(15vw, 24vh);
  --card-pad: clamp(10px, 1.3vw, 20px);
  --panel-w: clamp(290px, 25vw, 360px);
  position: fixed;
  inset: 0;
  z-index: 200;
  max-width: none;
  margin: 0;
  padding: calc(var(--card-top) + var(--card-pad)) calc(var(--card-side) + var(--card-pad)) calc(var(--card-bottom) + var(--card-pad) * 0.6);
  overflow: hidden;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #d9e5f1 0%, #e9eff3 34%, #fdf3e2 66%, #fdf3e2 100%);
}
@supports (height: 100dvh) {
  .live-full {
    --live-call-h: max(300px, calc(100dvh - 1rem));
  }
}
.live-full::before {
  content: "";
  position: absolute;
  top: var(--card-top);
  right: var(--card-side);
  bottom: var(--card-bottom);
  left: var(--card-side);
  z-index: -1;
  border-radius: 30px;
  background: #fffcf5;
  box-shadow: 0 30px 60px -30px rgba(20, 32, 58, 0.45), 0 0 0 1px rgba(29, 44, 76, 0.06);
}
.live-full > .live-scenery {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.live-bunting {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(60, 40, 10, 0.16));
}
.live-bunting--narrow {
  display: none;
}
.live-scene {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}
.live-scene picture,
.live-scene img {
  display: block;
  width: 100%;
  height: auto;
}
/* Phones get fewer, smaller flags and a closer view of the houses. */
@media (max-width: 699px) {
  .live-full {
    --card-top: 22px;
    --card-side: 8px;
    --card-bottom: clamp(70px, 13vh, 120px);
    --card-pad: 8px;
  }
  .live-full::before {
    border-radius: 22px;
  }
  .live-bunting--wide {
    display: none;
  }
  .live-bunting--narrow {
    display: block;
  }
  .live-scene img {
    width: auto;
    max-width: none;
    height: calc(var(--card-bottom) * 1.6);
    margin-left: 50%;
    translate: -50% 0;
  }
}
/* A phone on its side, or a very short window: the call gets all of it. */
@media (max-height: 520px) {
  .live-full {
    --card-top: 6px;
    --card-bottom: 6px;
  }
  .live-full > .live-scenery {
    display: none;
  }
}

/* The call on the card: no frame of its own, the full height of the card. */
.live-full .live-video[data-live-video-status="ready"],
html.live-in-call .live-full .live-video[data-live-video-status="ready"] {
  height: 100%;
  min-height: 0;
  gap: 0;
}
.live-full .live-video-mount {
  border-radius: 18px;
  box-shadow: none;
}

/* Attendees: the call, and the chat panel beside it. */
.live-room.live-full,
html.live-in-call .live-room.live-full[data-live-state="approved"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--card-pad);
  height: auto;
  align-items: stretch;
}
.live-room.live-full > .live-video,
html.live-in-call .live-room.live-full[data-live-state="approved"] > .live-video[data-live-video-status="ready"] {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
}
.live-room.live-full .live-leave-row,
.live-room.live-full .live-stage-head:not([data-live-fresh]) {
  display: none;
}
.live-room.live-full > .live-stage {
  display: none;
}
.live-room.live-full.live-chat-open > .live-stage {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
}
.live-room.live-full.live-chat-open > .live-stage > .live-chat {
  flex: 1 1 auto;
}
/* The welcome, and a new presenter's note, show over the video for a few
   seconds (live-room.js), without catching taps. */
.live-room.live-full .live-stage-head[data-live-fresh] {
  position: absolute;
  top: calc(var(--card-top) + var(--card-pad) + 3.5rem);
  left: 50%;
  z-index: 12;
  display: block;
  width: min(34rem, calc(100% - 2.5rem));
  padding: 0.7rem 1rem;
  translate: -50% 0;
  border-radius: 14px;
  background: rgba(20, 32, 58, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.live-room.live-full .live-stage-head[data-live-fresh] h2 {
  display: none;
}
.live-room.live-full .live-stage-head[data-live-fresh] p {
  color: var(--cream);
}
.live-room.live-full .live-stage-head[data-live-fresh] .live-presenter-note {
  color: var(--gold);
}

/* Hosts: the call, with the Participants and Chat panels beside it (both can
   be open: Participants above, the chat below, as in Zoom). The Session card
   steps aside, since End is in the call's own buttons. */
.live-console-stage.live-full {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--card-pad);
  align-items: stretch;
}
.live-console-stage.live-full .live-console-main {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.live-in-call .live-console-stage.live-full .live-console-main .live-video[data-live-video-status="ready"] {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.live-console-stage.live-full .live-session-card,
.live-console-stage.live-full .live-video-placeholder {
  display: none;
}
.live-people-head {
  display: none;
}
.live-console-stage.live-full .live-console-side {
  display: none;
}
.live-console-stage.live-full.live-people-open .live-console-side,
.live-console-stage.live-full.live-chat-open .live-console-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.live-console-stage.live-full .live-console-side > * {
  flex: 0 0 auto;
}
.live-console-stage.live-full .live-console-side > .live-chat {
  order: 3;
}
.live-console-stage.live-full:not(.live-people-open) .live-console-side > :not(.live-chat),
.live-console-stage.live-full:not(.live-chat-open) .live-console-side > .live-chat {
  display: none;
}
.live-console-stage.live-full.live-people-open .live-people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.25rem 0 0.5rem;
}
.live-console-stage.live-full .live-people-head h2 {
  margin: 0;
  font-size: 1.2rem;
}
.live-console-stage.live-full .live-console-side > .live-console-card {
  padding: 0.9rem 1rem;
  box-shadow: none;
}
.live-console-stage.live-full .live-console-side > .live-console-card h2 {
  font-size: 1.05rem;
}
.live-console-stage.live-full.live-chat-open:not(.live-people-open) .live-console-side > .live-chat {
  flex: 1 1 auto;
}
.live-console-stage.live-full.live-chat-open.live-people-open .live-console-side > .live-chat {
  min-height: 22rem;
}
/* Wide screens: the panels take a column on the card. */
@media (min-width: 1000px) {
  .live-room.live-full.live-chat-open,
  html.live-in-call .live-room.live-full.live-chat-open[data-live-state="approved"],
  .live-console-stage.live-full.live-people-open,
  .live-console-stage.live-full.live-chat-open {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
  }
}
/* Tablets and phones: the panel slides over the call, from the right (the
   whole card on a phone), the way Zoom's phone app opens its chat. */
@media (max-width: 999px) {
  .live-room.live-full.live-chat-open > .live-stage,
  .live-console-stage.live-full.live-people-open .live-console-side,
  .live-console-stage.live-full.live-chat-open .live-console-side {
    position: absolute;
    top: var(--card-top);
    right: var(--card-side);
    bottom: var(--card-bottom);
    z-index: 8;
    /* Placed by the card's edges, not a grid column. */
    grid-column: auto;
    grid-row: auto;
    width: min(400px, calc(100% - 2 * var(--card-side)));
    padding: var(--card-pad);
    border-radius: 30px;
    background: #fffcf5;
    box-shadow: -14px 0 36px -18px rgba(20, 32, 58, 0.55);
  }
}
@media (max-width: 699px) {
  .live-room.live-full.live-chat-open > .live-stage,
  .live-console-stage.live-full.live-people-open .live-console-side,
  .live-console-stage.live-full.live-chat-open .live-console-side {
    left: var(--card-side);
    width: auto;
    border-radius: 22px;
    box-shadow: none;
  }
}

/* The chat as a panel in the call: cream, with the messages as bubbles and
   the box to write in at the bottom, like Zoom's chat panel. */
.live-full .live-chat {
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cream);
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(29, 44, 76, 0.16);
}
.live-full .live-chat-head {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.6rem 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(29, 44, 76, 0.14);
}
.live-full .live-chat-title {
  font-size: 1.2rem;
}
.live-full .live-chat-status {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-chat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0 auto;
}
.live-chat-tools:not(:has(> :not([hidden]))) {
  display: none;
}
.live-full .live-chat-tools {
  flex-wrap: nowrap;
}
.live-full .live-chat-tool {
  min-height: 34px;
  padding: 0.15rem 0.8rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.live-panel-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.live-chat-tools + .live-panel-close {
  margin-left: 0;
}
.live-panel-close svg {
  width: 20px;
  height: 20px;
}
.live-panel-close:hover,
.live-panel-close:focus-visible {
  background: rgba(29, 44, 76, 0.08);
}
.live-panel-close[hidden] {
  display: none;
}
.live-full .live-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0.8rem 1rem;
  border-radius: 0;
  background: transparent;
}
.live-full .live-chat-log {
  gap: 0.75rem;
}
.live-full .live-msg {
  justify-items: start;
  gap: 0.2rem;
  padding: 0;
  background: transparent;
}
.live-full .live-msg-text {
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 0.8rem;
  border-radius: 4px 14px 14px 14px;
  background: #fffcf5;
  box-shadow: inset 0 0 0 1px rgba(29, 44, 76, 0.14);
  font-size: 0.95rem;
}
.live-full .live-msg--host .live-msg-name {
  color: var(--gold-dark, #7a5b13);
}
.live-full .live-msg--host .live-msg-text {
  background: #fbeccb;
  box-shadow: inset 0 0 0 1px rgba(180, 134, 31, 0.3);
}
.live-full .live-chat-form {
  padding: 0.75rem;
  border-top: 1px solid rgba(29, 44, 76, 0.14);
}
/* Phones zoom into text boxes under 16px, so the message box stays at 1rem. */
.live-full .live-chat-form input {
  min-height: 46px;
  font-size: 1rem;
  border-radius: 14px;
}
.live-full .live-chat-notice {
  padding: 0 1rem 0.75rem;
}
.live-full .live-chat-empty {
  margin: 0;
}

/* A new message while the chat is closed: its first words over the video,
   bottom right, for a few seconds. Selecting it opens the chat. */
.live-chat-preview {
  display: none;
}
.live-full .live-chat-preview:not([hidden]) {
  position: absolute;
  right: calc(var(--card-side) + var(--card-pad) + 12px);
  bottom: calc(var(--card-bottom) + var(--card-pad) + 6.5rem);
  z-index: 9;
  display: flex;
  gap: 0.45rem;
  max-width: min(24rem, calc(100% - 2 * (var(--card-side) + var(--card-pad) + 12px)));
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
  color: var(--cream);
  background: rgba(20, 32, 58, 0.94);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.live-chat-preview-name {
  flex: 0 0 auto;
  font-weight: 800;
  color: #e9c26e;
}
.live-chat-preview-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Notes over the video for hosts (top right of the call): what an action
   did, the connection, and who is waiting, with Let in and See waiting room,
   the way Zoom does. */
.live-console-float {
  display: contents;
}
.live-console-float > * {
  grid-column: 1 / -1;
}
.live-console-stage.live-full .live-console-float {
  position: absolute;
  top: calc(var(--card-top) + var(--card-pad) + 3.75rem);
  right: calc(var(--card-side) + var(--card-pad) + 0.75rem);
  z-index: 15;
  display: grid;
  gap: 0.5rem;
  width: min(24rem, calc(100% - 2 * (var(--card-side) + var(--card-pad)) - 1.5rem));
  pointer-events: none;
}
@media (min-width: 1000px) {
  .live-console-stage.live-full.live-people-open .live-console-float,
  .live-console-stage.live-full.live-chat-open .live-console-float {
    right: calc(var(--card-side) + var(--card-pad) * 2 + var(--panel-w) + 0.75rem);
  }
}
/* Where a panel covers the call, the notes wait under it. */
@media (max-width: 999px) {
  .live-console-stage.live-full.live-people-open .live-console-float,
  .live-console-stage.live-full.live-chat-open .live-console-float {
    z-index: 7;
  }
}
.live-console-stage.live-full .live-console-float > * {
  pointer-events: auto;
}
.live-console-stage.live-full .live-host-notice {
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.live-console-stage.live-full .live-host-connection {
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: #fff4d6;
}
.live-waiting-toast {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 2.6rem 0.9rem 1rem;
  border-radius: 16px;
  background: #fdf3d8;
  color: var(--ink);
  box-shadow: 0 16px 30px -16px rgba(20, 32, 58, 0.55), 0 0 0 1px rgba(180, 134, 31, 0.25);
}
.live-waiting-toast[hidden] {
  display: none;
}
.live-waiting-toast-text {
  margin: 0;
  font-weight: 800;
  color: var(--navy);
}
.live-waiting-toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.live-toast-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.live-toast-close:hover,
.live-toast-close:focus-visible {
  background: rgba(29, 44, 76, 0.08);
}

/* The call's End, for hosts: end the session for everyone, or only leave. */
.live-end-choice {
  width: min(30rem, calc(100% - 2rem));
  padding: 1.4rem 1.5rem 1.5rem;
  color: var(--ink);
  background: #fffcf5;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgba(20, 32, 58, 0.55);
}
.live-end-choice::backdrop {
  background: rgba(20, 32, 58, 0.45);
}
.live-end-choice h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}
.live-end-choice p {
  margin: 0 0 1.1rem;
  line-height: 1.5;
}
.live-end-actions {
  display: grid;
  gap: 0.6rem;
}
.live-end-actions .btn {
  width: 100%;
  justify-content: center;
}
.btn.live-end-all {
  --edge: #7d3a1e;
  color: #fff;
  background: #a9542f;
  border-color: #a9542f;
}
.btn.live-end-all:hover,
.btn.live-end-all:focus-visible {
  color: #fff;
  background: #8f4424;
  border-color: #8f4424;
}

/* The call's name at the top left of the call (live-video.js puts it in the
   call's header): a handwritten "Live from the village" and the room. */
.live-call-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  padding-left: 0.35rem;
  white-space: nowrap;
}
.live-call-eyebrow {
  font-family: "Patrick Hand", var(--font-display), cursive;
  font-size: 1.2rem;
  line-height: 1;
  color: #7a5b13;
}
.live-call-name {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  color: var(--navy);
}
@media (max-width: 699px) {
  .live-call-eyebrow {
    display: none;
  }
  .live-call-name {
    font-size: 1.1rem;
  }
}

/* The hidden video the browser's own picture-in-picture plays (live-mini.js). */
.live-mini-video {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}
.live-video {
  position: relative;
}
.live-call-tool--on {
  background: var(--navy);
  color: var(--cream);
}

/* ---- Before the call: the village square ----
   The join form, the waiting room and the notes after it sit in the same
   village square as the call (Taylor, 2026-10-24: "this needs to be prettier
   too"): sky, bunting, the village along the bottom and a paper card in the
   middle. In the room (approved) the page changes to the call. */
.live-head .live-when {
  margin-top: 1.1rem;
}
.live-head .live-when .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.9);
  color: var(--navy);
  font: 600 15px/1.2 var(--f-display);
  letter-spacing: 0;
  box-shadow: 0 0 0 1px var(--line), 0 6px 12px -10px rgba(29, 44, 76, 0.5);
}
.live-head .live-when .pill--gold {
  background: var(--navy);
  color: var(--paper, #fffcf5);
  box-shadow: 0 3px 0 var(--navy-deep);
}
.live-head .live-when .pill--gold::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(215, 164, 62, 0.3);
}
.live-room[data-live-state]:not([data-live-state^="approved"]) {
  --card-bottom: clamp(150px, 19vw, 230px);
  position: relative;
  isolation: isolate;
  max-width: 1080px;
  padding: clamp(80px, 8.6vw, 112px) clamp(14px, 4vw, 48px) var(--card-bottom);
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #d9e5f1 0%, #e9eff3 30%, #fdf3e2 62%, #fdf3e2 100%);
  box-shadow: 0 0 0 1px rgba(29, 44, 76, 0.06), 0 30px 60px -36px rgba(20, 32, 58, 0.45);
}
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-scenery {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.35rem, 4vw, 2.75rem);
  border: 0;
  border-radius: 26px;
  background: var(--paper, #fffcf5);
  box-shadow: 0 0 0 1px rgba(29, 44, 76, 0.07), 0 28px 50px -30px rgba(20, 32, 58, 0.55);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
}
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-panel h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  margin-bottom: 0.7rem;
}
/* The join card fills the square (Taylor, 2026-10-24: "really tiny and too
   much open space"): what it is on the left, the name (and passcode) on the
   right in a cream well like the site's sign-up cards, and the next meeting's
   ticket across the bottom. On a phone it is one column, with the ticket
   before the form. */
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-panel.form-card {
  display: flex;
  flex-direction: column;
  max-width: 980px;
}
.live-panel.form-card > .live-join-about {
  order: 1;
}
.live-panel.form-card > .live-next {
  order: 2;
  margin: 1.15rem 0 1.35rem;
}
.live-panel.form-card > .live-join-act {
  order: 3;
}
.live-panel.form-card > .live-precall {
  order: 4;
}
.live-join-about::after {
  content: "";
  display: block;
  clear: both;
}
.live-join-about > p:last-child {
  margin-bottom: 0;
}
.live-join-act .live-hint {
  font-size: 0.9em;
}
@media (min-width: 900px) {
  .live-room[data-live-state]:not([data-live-state^="approved"]) > .live-panel.form-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.25rem);
    align-items: start;
    padding: clamp(2rem, 3.4vw, 3rem);
  }
  .live-panel.form-card > .live-join-about {
    grid-column: 1;
    grid-row: 1;
  }
  .live-panel.form-card > .live-join-act {
    grid-column: 2;
    grid-row: 1;
  }
  .live-panel.form-card > .live-next {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 1.75rem 0 0;
  }
  .live-panel.form-card > .live-precall {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .live-join-about > p {
    margin-bottom: 0.9rem;
  }
  .live-join-act {
    padding: 1.6rem 1.6rem 1.25rem;
    border-radius: 22px;
    background: var(--cream, #f7f1e2);
    box-shadow: inset 0 0 0 1.5px rgba(122, 91, 19, 0.14);
  }
  .live-join-act label {
    font-size: 1.05rem;
  }
  .live-join-act input {
    min-height: 3.4rem;
    font-size: 1.125rem;
  }
  .live-join-act .live-join-btn {
    width: 100%;
    min-height: 3.4rem;
    font-size: 1.1rem;
  }
  .live-join-act .form-status:empty {
    display: none;
  }
  .live-next-when {
    font-size: 1.4rem;
  }
}
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-leave-row {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  justify-content: center;
}
.live-room[data-live-state]:not([data-live-state^="approved"]) > .live-leave-row .btn {
  background: rgba(255, 252, 245, 0.94);
}
/* The place's picture on the card, like the site's round "plots". */
.live-plot {
  float: right;
  display: grid;
  place-items: center;
  width: clamp(76px, 12vw, 104px);
  aspect-ratio: 1;
  margin: -0.35rem -0.35rem 0.6rem 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, var(--gold-soft), var(--cream) 70%);
  box-shadow: inset 0 0 0 6px var(--paper, #fffcf5), 0 0 0 2px var(--gold-soft);
}
.live-plot img {
  width: 72%;
  height: auto;
}
.live-panel .live-next,
.live-panel .live-invite-note,
.live-panel .live-closed-note,
.live-panel form,
.live-panel .live-precall {
  clear: both;
}
/* The waiting room: three lanterns that glow in turn while the page waits. */
.live-lanterns {
  display: flex;
  gap: 10px;
  margin: 1.1rem 0 0;
}
.live-lanterns span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(215, 164, 62, 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .live-lanterns span {
    animation: live-lantern 1.8s ease-in-out infinite;
  }
  .live-lanterns span:nth-child(2) {
    animation-delay: 0.3s;
  }
  .live-lanterns span:nth-child(3) {
    animation-delay: 0.6s;
  }
}
@keyframes live-lantern {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 699px) {
  .live-room[data-live-state]:not([data-live-state^="approved"]) {
    --card-bottom: 128px;
    margin-inline: -8px;
    padding-top: 62px;
    border-radius: 24px;
  }
}