:root {
  color-scheme: light;
  --bg: #f4f5f1;
  --surface: #ffffff;
  --surface-2: #eef4f0;
  --ink: #18201f;
  --muted: #66716d;
  --line: #d8ded8;
  --teal: #087c76;
  --teal-dark: #045f5a;
  --blue: #315d9b;
  --amber: #a26414;
  --red: #ad3434;
  --shadow: 0 8px 28px rgba(24, 32, 31, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: #fbfcf9;
  border-bottom: 1px solid var(--line);
}

.product {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
}

.subline {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.segmented {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.segment {
  height: 38px;
  min-width: 90px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segment:last-child {
  border-right: 0;
}

.segment.active {
  background: var(--teal);
  color: #ffffff;
}

.top-actions,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.button,
.icon-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button.primary,
.button:hover,
.icon-button:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
}

.button.ghost {
  background: transparent;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, 0.8fr) minmax(380px, 1fr) minmax(280px, 0.75fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcf9;
}

h1,
h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.transcript-feed,
.queue-list,
.caption-grid {
  min-height: 0;
  overflow: auto;
}

.transcript-feed {
  flex: 1;
  padding: 10px 14px;
}

.transcript-line {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0ed;
}

.transcript-line time {
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}

.transcript-line p {
  margin: 0;
  line-height: 1.45;
}

.manual-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fbfcf9;
}

input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--ink);
  background: #ffffff;
}

.queue-list {
  padding: 10px;
}

.queue-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #ffffff;
}

.queue-item.selected {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 var(--teal);
}

.queue-top,
.queue-item footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.queue-top span {
  color: var(--teal-dark);
  font-weight: 700;
}

.queue-item p {
  margin: 10px 0;
  color: #2d3432;
  line-height: 1.35;
  font-size: 14px;
}

.queue-item footer {
  color: var(--muted);
  font-size: 12px;
}

.output-panel {
  background: #f9fbf8;
}

.slide-preview,
.live-output {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 16px;
}

.live-head {
  border-top: 1px solid var(--line);
}

.slide-card {
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 34px 42px;
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(8, 124, 118, 0.96), rgba(49, 93, 155, 0.96)),
    #145f70;
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(8, 33, 42, 0.22);
}

.slide-reference {
  font-size: 23px;
  font-weight: 800;
}

.slide-text {
  font-size: 30px;
  line-height: 1.24;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.slide-version {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

.blackout {
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: #050606;
  font-weight: 800;
}

.side-panel {
  background: #fbfcf9;
}

.caption-grid {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.caption-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.caption-card strong {
  color: var(--blue);
}

.caption-card p {
  margin: 8px 0 0;
  line-height: 1.35;
}

.settings {
  border-top: 1px solid var(--line);
  padding-bottom: 12px;
}

.settings label {
  display: grid;
  gap: 6px;
  margin: 12px;
  color: var(--muted);
  font-size: 12px;
}

.settings label input {
  color: var(--ink);
  font-size: 14px;
}

.settings .check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ink);
  font-size: 14px;
}

.settings .check-row input,
.check-row input {
  width: 18px;
  min-height: 18px;
}

.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: #18201f;
  font-size: 14px;
  font-weight: 700;
}

.settings > .button {
  margin: 0 12px;
  width: calc(100% - 24px);
}

.empty {
  color: var(--muted);
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
}

.attendee-body {
  background: #101616;
  color: #f7fbf8;
}

.attendee-shell {
  width: min(920px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  padding: 18px;
}

.attendee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.attendee-live {
  min-height: 220px;
  padding: 24px;
  border-radius: 8px;
  background: #f7fbf8;
  color: #16201f;
}

.attendee-reference {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.attendee-live p {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.attendee-captions {
  display: grid;
  gap: 12px;
}

.attendee-captions article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.attendee-captions p {
  margin: 8px 0 0;
  line-height: 1.35;
}

@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .topbar,
  .workspace {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: stretch;
  }

  .top-actions .button {
    flex: 1;
  }

  .slide-preview,
  .live-output {
    min-height: 210px;
  }

  .slide-card {
    padding: 22px;
  }

  .slide-text {
    font-size: 21px;
  }
}

.phone-body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, #0b3b3c 0, #145a58 220px, #f6f4ee 220px, #f6f4ee 100%);
  color: #18201f;
}

.phone-app {
  width: min(480px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  color: #ffffff;
}

.phone-brand {
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
}

.phone-status {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.phone-screen {
  display: none;
  padding-top: 16px;
}

.phone-screen.active {
  display: block;
}

.hero-block {
  padding: 28px 0 22px;
  color: #ffffff;
}

.hero-block h1 {
  margin: 0;
  max-width: 410px;
  font-size: 38px;
  line-height: 1.04;
  font-weight: 850;
}

.hero-block p {
  margin: 14px 0 0;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.4;
}

.mode-stack {
  display: grid;
  gap: 12px;
}

.mode-button,
.join-card,
.session-code,
.listener-now,
.phone-feed,
.verse-strip,
.billing-banner,
.language-roster {
  width: 100%;
  border: 1px solid rgba(24, 32, 31, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(18, 32, 30, 0.1);
}

.mode-button {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}

.mode-button span {
  font-size: 19px;
  font-weight: 800;
}

.mode-button small {
  color: #66716d;
  font-size: 14px;
  line-height: 1.3;
}

.screen-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  margin-bottom: 18px;
}

.screen-head h2 {
  font-size: 22px;
}

.phone-small,
.phone-primary,
.phone-secondary,
.phone-ghost {
  min-height: 44px;
  border: 1px solid rgba(24, 32, 31, 0.12);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
}

a.phone-small,
a.phone-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.phone-primary,
a.phone-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.phone-small {
  min-height: 36px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
}

.phone-primary {
  background: #0b6f69;
  border-color: #0b6f69;
  color: #ffffff;
  font-weight: 750;
}

.phone-secondary {
  background: #ffffff;
  color: #18201f;
  font-weight: 700;
}

.phone-ghost {
  background: transparent;
  border-color: rgba(17, 24, 39, 0.16);
  color: #374151;
  font-weight: 600;
}

.phone-ghost[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.phone-ghost .ghost-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.split-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.phone-field {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  color: #4f5b57;
  font-size: 13px;
  font-weight: 700;
}

.phone-field input,
.phone-field select,
.phone-form input,
.join-card input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8ded8;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #18201f;
}

.phone-field select {
  appearance: none;
}

.join-card,
.session-code {
  padding: 14px;
  margin: 12px 0;
}

.session-code {
  display: grid;
  gap: 8px;
  text-align: center;
}

.billing-banner {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  margin: 12px 0;
  background: #edf7f4;
  border-color: rgba(8, 124, 118, 0.18);
  box-shadow: none;
}

.billing-banner strong {
  color: #075f5a;
  font-size: 14px;
}

.billing-banner span {
  color: #4f5b57;
  font-size: 13px;
  line-height: 1.32;
}

.billing-banner.listener-pay {
  background: #fff7e8;
  border-color: rgba(162, 100, 20, 0.22);
}

.billing-banner.listener-pay strong {
  color: #8a530f;
}

.billing-banner.personal {
  background: #eef4fb;
  border-color: rgba(49, 93, 155, 0.2);
}

.billing-banner.personal strong {
  color: #315d9b;
}

.language-roster {
  display: grid;
  gap: 4px;
  padding: 12px;
  margin: 12px 0;
  background: #ffffff;
  box-shadow: none;
}

.language-roster:empty {
  display: none;
}

.language-roster strong {
  color: #18201f;
  font-size: 14px;
}

.language-roster span {
  color: #66716d;
  font-size: 13px;
  line-height: 1.35;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.setup-grid .phone-field {
  margin: 0;
}

.cost-card span {
  display: block;
}

.verse-preview {
  gap: 8px;
}

.verse-preview .phone-field {
  margin: 0;
}

.verse-preview p {
  margin: 0;
  color: #33403c;
  line-height: 1.35;
}

.verse-preview button {
  width: 100%;
}

.language-requests {
  gap: 8px;
}

.request-list {
  display: grid;
  gap: 8px;
}

.language-request-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
}

.language-request-card div {
  display: grid;
  gap: 3px;
}

.language-request-card b {
  color: #18201f;
}

.language-request-card .phone-primary,
.language-request-card .phone-secondary {
  min-height: 38px;
}

.session-code span {
  color: #66716d;
  font-size: 13px;
}

.session-code strong {
  font-size: 44px;
  letter-spacing: 4px;
}

.invite-qr {
  width: 180px;
  height: 180px;
  justify-self: center;
  border: 1px solid #d8ded8;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.session-code small {
  color: #66716d;
  overflow-wrap: anywhere;
}

.overlay-controls {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #edf0ed;
}

.overlay-controls .phone-field {
  margin: 0;
  text-align: left;
}

.overlay-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
  text-align: left;
}

.overlay-panel strong {
  color: #18201f;
  font-size: 14px;
  letter-spacing: 0;
}

.overlay-panel small {
  color: #66716d;
  line-height: 1.35;
}

.language-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 8px;
  align-items: end;
}

.language-picker .phone-field {
  margin: 0;
}

.language-picker .phone-secondary {
  min-height: 46px;
  padding-inline: 14px;
  white-space: nowrap;
}

.language-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.language-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  padding: 6px 7px 6px 12px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.05);
  cursor: pointer;
}

.language-chip span {
  font-weight: 800;
}

.language-chip b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.language-chip:hover b {
  background: #111827;
  color: #ffffff;
}

.capture-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.realtime-toggle-row {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(58, 83, 128, 0.06);
  border-radius: 8px;
  font-size: 13px;
}

.realtime-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
}

.realtime-status[data-state="connected"] {
  background: rgba(34, 197, 94, 0.12);
  color: #14532d;
}

.realtime-status[data-state="error"],
.realtime-status[data-state="disconnected"],
.realtime-status.is-error {
  background: rgba(239, 68, 68, 0.12);
  color: #7f1d1d;
}

/* AI overlay theme panel (lives in the booth Setup tab) */
#hostOverlayThemePrompt {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  box-sizing: border-box;
}

.bx-theme-preview,
.overlay-theme-preview {
  width: 100%;
  height: 180px;
  margin-top: 10px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  border-radius: 12px;
  background: #0f172a;
  display: block;
}

/* Overlay theme template library */
.bx-template-save {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.bx-template-save input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(58, 83, 128, 0.18);
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
}

.bx-template-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bx-template-empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.bx-template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(58, 83, 128, 0.06);
}

.bx-template-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-template-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Auth tabs on the booth login screen */
.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(58, 83, 128, 0.08);
  border-radius: 10px;
  margin: 0 0 14px;
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  border-radius: 7px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.auth-tab.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.auth-only,
.demo-only {
  display: none;
}
[data-auth-current="signin"] [data-auth-pane~="signin"],
[data-auth-current="signup"] [data-auth-pane~="signup"],
[data-auth-current="demo"] [data-auth-pane~="demo"] {
  display: flex;
}
.auth-error {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #7f1d1d;
  border-radius: 8px;
  font-size: 13px;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.account-row .account-label {
  flex: 1;
  font-size: 13px;
  color: #475569;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.danger-button {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.danger-button:hover { background: #fecaca; }

.phone-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 12px 0;
}

.phone-feed,
.verse-strip {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  margin-top: 12px;
}

.phone-line {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #edf0ed;
  border-radius: 8px;
  background: #fbfcf9;
}

.phone-line time {
  color: #66716d;
  font-size: 12px;
}

.phone-line p {
  margin: 0;
  line-height: 1.35;
}

/* The in-progress (not-yet-finalized) utterance line — subtle green tint so it
   reads as "live, still being spoken" vs the settled lines below it. */
.phone-line--live {
  background: rgba(34, 161, 110, 0.07);
  border-color: rgba(34, 161, 110, 0.32);
}

.phone-line--live time {
  color: #1f9d63;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.verse-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #d8ded8;
  background: #fffdfa;
}

.verse-chip strong {
  color: #0b6f69;
}

.verse-chip span {
  color: #a26414;
  font-weight: 800;
}

.verse-chip p {
  grid-column: 1 / -1;
  margin: 0;
  color: #33403c;
  line-height: 1.35;
}

.verse-approve {
  grid-column: 1 / -1;
  width: 100%;
}

.listener-now {
  min-height: 170px;
  padding: 20px;
  margin: 14px 0;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(11, 111, 105, 0.96), rgba(49, 93, 155, 0.96)),
    #155e70;
}

.listener-now span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
}

.listener-now p {
  margin: 0;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.phone-empty {
  min-height: 80px;
  display: grid;
  place-items: center;
  color: #66716d;
  text-align: center;
}

@media (max-width: 380px) {
  .phone-app {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-block h1 {
    font-size: 33px;
  }

  .listener-now p {
    font-size: 22px;
  }

  .session-code strong {
    font-size: 36px;
  }
}

.split-body {
  min-height: 100vh;
  background: #0b3b3c;
}

.split-shell {
  min-height: 100vh;
  padding: 18px;
}

.split-header {
  width: min(1120px, 100%);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #ffffff;
}

.split-layout {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.split-device {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #f6f4ee;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
}

.split-device-bar {
  padding: 12px 14px;
  color: #ffffff;
  background: #18201f;
  font-weight: 800;
}

.split-device-body {
  padding: 14px;
}

@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }

  .language-request-card {
    grid-template-columns: 1fr;
  }
}

.overlay-body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}

.overlay-body.preview {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    #24302f;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  background-size: 32px 32px;
}

.caption-overlay {
  position: fixed;
  left: 50%;
  bottom: max(46px, env(safe-area-inset-bottom));
  width: min(1540px, calc(100vw - 120px));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  padding: 24px 32px 28px;
  color: #ffffff;
  background: rgba(10, 19, 19, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

.caption-overlay-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
}

.caption-overlay-text {
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.08;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.caption-overlay.multi-overlay .caption-overlay-text {
  font-size: clamp(28px, 3.1vw, 52px);
  line-height: 1.12;
}

.overlay-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.22fr) 1fr;
  gap: 18px;
  align-items: baseline;
}

.overlay-row + .overlay-row {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.overlay-row span {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 850;
}

.overlay-row p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.caption-overlay.verse-overlay {
  width: min(1680px, calc(100vw - 120px));
}

.caption-overlay.verse-overlay .caption-overlay-text {
  font-size: clamp(30px, 3.8vw, 58px);
  line-height: 1.16;
}

.caption-overlay.verse-overlay .overlay-row {
  grid-template-columns: 1fr;
  gap: 8px;
}

.caption-overlay.is-waiting {
  opacity: 0.7;
}

/* ── Browser-source presets ────────────────────────────────────────────────
   Tune this overlay URL for dropping into third-party presentation software
   (ProPresenter "Web Fill", OBS/vMix "Browser source", EasyWorship/FreeShow
   web items). All opt-in via URL params — the booth defaults above are intact.
   Selectors are .overlay-body-scoped so they out-specify the AI theme CSS,
   which only targets the bare .caption-overlay/#overlayText selectors. */

/* clean=1 → caption-only: drop the small source label. */
.overlay-body.source-clean .caption-overlay-meta { display: none; }

/* chroma=<colour> → JS sets the real key colour inline on <body>; this is just
   the safety default so a chroma URL is never accidentally transparent. */
.overlay-body.chroma { background: #00ff00; }

/* box=0 → bare text, no panel bar. A heavy outline keeps captions legible
   composited over ANY video background (no dark glass to rely on). */
.overlay-body.bare .caption-overlay {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 32px;
}
.overlay-body.bare .caption-overlay-text,
.overlay-body.bare .caption-overlay-meta {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(0, 0, 0, 0.6);
}

/* pos=top|center|bottom → vertical anchor (default stays bottom lower-third). */
.overlay-body.pos-top .caption-overlay {
  top: max(46px, env(safe-area-inset-top));
  bottom: auto;
}
.overlay-body.pos-center .caption-overlay {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* Light app shell: white operational panels, soft shadows, minimal color. */
.phone-body {
  background: #f4f5f7;
  color: #111827;
}

.phone-app {
  width: min(540px, 100%);
}

.phone-top,
.hero-block,
.screen-head,
.mode-button,
.join-card,
.session-code,
.listener-now,
.phone-feed,
.verse-strip,
.billing-banner,
.language-roster,
.overlay-panel,
.split-device {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.phone-top {
  min-height: 64px;
  padding: 12px 14px;
  color: #111827;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-brand {
  color: #111827;
}

.phone-status {
  color: #6b7280;
}

.hero-block {
  padding: 24px;
  color: #111827;
}

.hero-block h1 {
  font-size: 34px;
}

.hero-block p {
  color: #4b5563;
}

.listener-site .phone-app {
  width: min(620px, 100%);
}

.listener-site .phone-screen {
  padding-top: 14px;
}

.join-hero,
.church-entry {
  display: grid;
  gap: 10px;
  padding: 28px 24px;
  margin-bottom: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.join-hero h1,
.church-entry h1 {
  margin: 0;
  color: #111827;
  font-size: 40px;
  line-height: 1.02;
  font-weight: 850;
  letter-spacing: 0;
}

.join-hero p,
.church-entry p {
  margin: 0;
  color: #4b5563;
  font-size: 18px;
  line-height: 1.42;
}

.join-code-card {
  display: grid;
  gap: 12px;
}

.join-code-card .phone-field {
  margin: 0;
}

.join-code-card #joinCode {
  min-height: 64px;
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.church-site {
  background: #f6f7f9;
}

.church-site .phone-app {
  width: min(1280px, calc(100% - 40px));
  padding: 18px 0 36px;
}

.church-site .phone-top {
  min-height: 58px;
  padding: 0 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.church-site .phone-brand {
  font-size: 25px;
}

.church-site .phone-status {
  font-size: 13px;
}

.church-site .top-actions .phone-small {
  min-height: 38px;
  box-shadow: none;
}

.church-site .booth-screen.active {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "status status"
    "tabs page";
  align-items: start;
  align-content: start;
  gap: 16px 18px;
  min-height: 0;
  padding: 20px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
}

.church-site .screen-head {
  grid-area: head;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.church-site .screen-head h2 {
  font-size: 22px;
}

.church-site .screen-head .phone-small {
  min-height: 36px;
  padding-inline: 12px;
  box-shadow: none;
}

.service-status-strip {
  grid-area: status;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #f9fafb;
}

/* Booth "now live" pinned cards — sit above the tab content so the technician
   never has to leave Live to approve a verse or see what's on the projector. */
.booth-pinned {
  display: grid;
  gap: 10px;
  margin: 12px 0 6px;
}

.booth-pinned:empty,
.booth-pinned[hidden] {
  display: none;
}

.pinned-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.pinned-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.pinned-card header strong {
  font-size: 18px;
  color: #111827;
}

.pinned-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}

.pinned-tag--live {
  background: #dcfce7;
  color: #166534;
}

.pinned-tag--warn {
  background: #fef3c7;
  color: #92400e;
}

.pinned-tag--idle {
  background: #e5e7eb;
  color: #4b5563;
}

.pinned-meta {
  color: #6b7280;
  font-size: 13px;
}

.pinned-verse-text,
.pinned-caption-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: #111827;
}

.pinned-verse--pending {
  border-color: #f59e0b;
  background: #fffbeb;
}

.pinned-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-status-strip article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid rgba(17, 24, 39, 0.08);
  background: transparent;
  box-shadow: none;
}

.service-status-strip article:last-child {
  border-right: 0;
}

.live-summary-grid article,
.overlay-preview-card {
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.service-status-strip span,
.live-summary-grid span,
.overlay-preview-card small,
.bible-version-row small {
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.service-status-strip strong,
.live-summary-grid strong {
  min-width: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.service-status-strip article[data-state="live"] strong {
  color: #166534;
}

.service-status-strip article[data-state="warn"] strong {
  color: #92400e;
}

.service-status-strip article[data-state="idle"] strong {
  color: #6b7280;
}

.service-status-strip article[data-state="warn"] {
  background: #fffbeb;
}

.service-status-strip article[data-state="live"] {
  background: #f0fdf4;
}

.live-summary-grid,
.overlay-preview-grid {
  display: grid;
  gap: 10px;
}

.live-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.live-summary-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 100px;
  padding: 12px;
}

.overlay-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overlay-preview-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.overlay-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.overlay-preview-head strong {
  color: #111827;
  font-size: 14px;
}

.overlay-preview-head span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.mini-overlay {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 12px;
  border-radius: 12px;
  color: #ffffff;
  background: #111827;
}

.mini-overlay div + div {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mini-overlay span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 850;
}

.mini-overlay p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.bible-mini p {
  font-size: 14px;
  line-height: 1.28;
}

.bible-version-controls {
  display: grid;
  gap: 8px;
}

.bible-version-row {
  gap: 6px;
  margin: 0;
}

.bible-version-row > span {
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.mode-button {
  min-height: 88px;
  border-color: rgba(17, 24, 39, 0.08);
}

.mode-button small,
.session-code span,
.session-code small,
.language-roster span,
.billing-banner span,
.overlay-panel small,
.phone-line time {
  color: #6b7280;
}

.screen-head {
  grid-template-columns: auto 1fr;
  padding: 12px;
  color: #111827;
}

.screen-head h2 {
  color: #111827;
}

.phone-small,
.phone-secondary {
  border-color: rgba(17, 24, 39, 0.1);
  background: #ffffff;
  color: #111827;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}

.phone-primary {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.18);
}

.phone-ghost {
  border-color: rgba(17, 24, 39, 0.14);
  background: transparent;
  color: #4b5563;
  box-shadow: none;
}

.phone-ghost[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.phone-primary:disabled,
.phone-secondary:disabled,
.phone-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.church-site .bx-primary:disabled,
.church-site .bx-secondary:disabled,
.church-site .bx-quiet:disabled,
.church-site .bx-ghost:disabled,
.church-site .bx-danger:disabled,
.church-site .bx-panic:disabled {
  opacity: 0.55;
  cursor: wait;
}

.phone-field {
  color: #374151;
}

.phone-field input,
.phone-field select,
.phone-form input,
.join-card input {
  border-color: rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  background: #ffffff;
}

.phone-field select {
  appearance: auto;
  cursor: pointer;
}

.listener-screen .listener-now {
  min-height: 250px;
  display: grid;
  align-content: center;
  margin-top: 0;
  color: #111827;
  background: #ffffff;
}

.listener-now span {
  color: #6b7280;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.listener-now p {
  color: #111827;
  font-size: 30px;
  line-height: 1.18;
}

.listener-controls {
  grid-template-columns: 1.15fr 0.85fr 0.9fr;
}

.advanced-action {
  color: #4b5563;
}

.listener-language-field,
.compact-form,
.listener-billing {
  margin-top: 12px;
}

.billing-banner {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.08);
}

.church-site .billing-banner,
.church-site .language-roster,
.church-site .overlay-panel,
.church-site .phone-feed,
.church-site .verse-strip,
.church-site .session-code {
  box-shadow: none;
}

.church-site .overlay-panel,
.church-site .language-roster,
.church-site .phone-feed,
.church-site .verse-strip,
.church-site .session-code {
  border-radius: 12px;
}

.church-site .overlay-panel {
  background: #ffffff;
}

.church-site .phone-primary,
.church-site .phone-secondary {
  box-shadow: none;
}

.church-site .split-buttons {
  margin: 0;
}

.billing-banner strong,
.billing-banner.personal strong,
.billing-banner.listener-pay strong {
  color: #111827;
}

.language-roster,
.phone-feed,
.verse-strip {
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
}

.phone-line,
.language-request-card,
.verse-chip {
  border-color: rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

.verse-chip strong {
  color: #111827;
}

.verse-chip span {
  color: #9a6700;
}

.split-body {
  background: #f4f5f7;
}

.split-header {
  width: min(1220px, calc(100% - 32px));
  padding: 12px 14px;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
}

.split-layout {
  width: min(1220px, calc(100% - 32px));
  grid-template-columns: minmax(520px, 1.1fr) minmax(360px, 0.9fr);
}

.split-device {
  border-radius: 16px;
  background: #ffffff;
}

.split-device-bar {
  color: #111827;
  background: #ffffff;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.split-device-body {
  background: #f9fafb;
}

.booth-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: start;
  margin-bottom: 0;
  padding: 5px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #f7f8fa;
}

.booth-tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.booth-tab.active {
  color: #ffffff;
  background: #111827;
  border-color: #111827;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
}

.booth-tab:focus-visible,
.phone-primary:focus-visible,
.phone-secondary:focus-visible,
.phone-small:focus-visible,
.language-chip:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.18);
  outline-offset: 2px;
}

.booth-page {
  display: none;
  gap: 12px;
  padding-top: 2px;
}

.booth-page.active {
  display: grid;
  grid-area: page;
}

.booth-screen .booth-tabs {
  margin: 0;
}

.booth-screen .booth-page {
  margin-top: 0;
}

.church-site .booth-page[data-host-panel="service"].active {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 14px;
}

.church-site .booth-page[data-host-panel="service"] > .split-buttons {
  grid-column: 1;
  grid-template-columns: minmax(220px, 280px) minmax(180px, 220px);
  justify-content: start;
  margin: 0;
}

.church-site .booth-page[data-host-panel="service"] > .split-buttons .phone-primary,
.church-site .booth-page[data-host-panel="service"] > .split-buttons .phone-secondary {
  min-height: 44px;
  box-shadow: none;
}

.church-site .booth-page[data-host-panel="service"] .billing-banner {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: none;
}

.church-site .compact-session-code {
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, 1fr) 80px minmax(160px, 190px);
  grid-template-rows: auto auto auto;
  align-items: center;
  text-align: left;
  gap: 12px;
  margin: 0;
  padding: 12px;
  box-shadow: none;
}

.church-site .booth-page[data-host-panel="setup"].active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.church-site .booth-page[data-host-panel="setup"] .setup-grid,
.church-site .booth-page[data-host-panel="setup"] .language-approval-row,
.church-site .booth-page[data-host-panel="setup"] #hostSaveSetupButton {
  grid-column: 1 / -1;
}

.church-site .compact-session-code span {
  grid-column: 1;
  grid-row: 1;
}

.church-site .compact-session-code strong {
  grid-column: 1;
  grid-row: 2;
  font-size: 34px;
  line-height: 1;
}

.church-site .compact-session-code small {
  grid-column: 1;
  grid-row: 3;
}

.church-site .compact-session-code .invite-qr {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 72px;
  height: 72px;
}

.church-site .compact-session-code #copyInviteButton {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
}

.church-site .compact-session-code #downloadOverlayLink {
  grid-column: 3;
  grid-row: 2 / span 2;
  min-height: 40px;
  width: 100%;
}

.church-site .booth-page[data-host-panel="outputs"].active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.church-site .booth-page[data-host-panel="outputs"] .language-requests,
.church-site .booth-page[data-host-panel="outputs"] .overlay-preview-grid {
  grid-column: 1 / -1;
}

.compact-session-code {
  min-height: 0;
}

.split-device .session-code,
.split-device .overlay-panel,
.split-device .billing-banner,
.split-device .language-roster,
.split-device .phone-feed,
.split-device .verse-strip,
.split-device .listener-now {
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}

@media (max-width: 900px) {
  .split-header,
  .split-layout {
    width: min(100%, calc(100% - 20px));
  }

  .church-site .phone-app {
    width: min(100%, calc(100% - 20px));
  }

  .church-site .booth-screen.active {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "status"
      "tabs"
      "page";
    min-height: 0;
    padding: 14px;
  }

  .booth-tabs {
    flex-direction: row;
    overflow-x: auto;
  }

  .booth-tab {
    min-width: 110px;
    text-align: center;
  }

  .service-status-strip,
  .live-summary-grid,
  .overlay-preview-grid,
  .church-site .booth-page[data-host-panel="service"].active,
  .church-site .booth-page[data-host-panel="setup"].active,
  .church-site .booth-page[data-host-panel="outputs"].active {
    grid-template-columns: 1fr;
  }

  .church-site .booth-page[data-host-panel="service"] .billing-banner {
    grid-column: auto;
    grid-row: auto;
  }

  .service-status-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  }

  .service-status-strip article:last-child {
    border-bottom: 0;
  }

  .church-site .booth-page[data-host-panel="service"] > .split-buttons,
  .church-site .compact-session-code {
    grid-template-columns: 1fr;
  }

  .church-site .compact-session-code .invite-qr,
  .church-site .compact-session-code small {
    grid-column: auto;
    grid-row: auto;
  }

  .listener-controls {
    grid-template-columns: 1fr;
  }

  .language-picker {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .split-shell {
    height: 100vh;
    overflow: hidden;
  }

  .split-layout {
    height: calc(100vh - 104px);
  }

  .split-device {
    max-height: 100%;
  }

  .split-device-body {
    height: calc(100% - 50px);
    overflow: hidden;
  }

  .split-device .booth-page.active {
    height: calc(100% - 52px);
    min-height: 0;
  }

  .booth-page[data-split-panel="live"].active,
  .booth-page[data-split-panel="bible"].active {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .booth-page .phone-feed,
  .booth-page .verse-strip {
    max-height: none;
    min-height: 0;
  }

  .booth-page[data-split-panel="bible"] .verse-strip {
    overflow: hidden;
  }
}

/* Listener state hooks: hide post-join controls until a session is active,
   and hide pre-join chrome once joined. */
body[data-listener-state="idle"] .post-join-only {
  display: none !important;
}

body[data-listener-state="joined"] .pre-join-only {
  display: none !important;
}

/* Once joined, the live screen wants to own the viewport — trim the generous
   pre-join padding so the translation box can fill it without a second scrollbar. */
body[data-listener-state="joined"] main.lv-app {
  padding-top: 14px;
  padding-bottom: 16px;
}

.other-language,
.advanced-disclosure {
  margin: 8px 0;
  font-size: 13px;
  color: #4b5563;
}

.other-language > summary,
.advanced-disclosure > summary {
  cursor: pointer;
  padding: 6px 2px;
  font-weight: 600;
  color: #4b5563;
  list-style: none;
}

.other-language > summary::-webkit-details-marker,
.advanced-disclosure > summary::-webkit-details-marker {
  display: none;
}

.other-language[open] > summary,
.advanced-disclosure[open] > summary {
  color: #111827;
}

.advanced-disclosure {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.advanced-hint {
  margin: 6px 2px 10px;
  color: #6b7280;
  line-height: 1.4;
}

/* Audio toggle as a ghost icon button — keep label predictable. */
.listener-screen .listener-controls {
  grid-template-columns: 1.4fr 0.85fr;
}

.listener-controls .phone-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Live Bible verse card — sits between the live caption and the scrubber.
   Visible only when the booth has approved a verse to put on the projector. */
.verse-card {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #fffaf0;
  display: grid;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}

.verse-card[hidden] {
  display: none;
}

.verse-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verse-card-icon {
  font-size: 18px;
  line-height: 1;
}

.verse-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verse-card-meta strong {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.verse-card-meta span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
}

.verse-card-text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.45;
  color: #111827;
}

/* Scrubber row — sits under the live caption card, lets the listener
   drag back through caption history. */
.scrubber-row {
  margin: 14px 4px 4px;
  touch-action: none;
}

.scrubber {
  position: relative;
  height: 28px;
  cursor: grab;
  user-select: none;
}

.scrubber:active {
  cursor: grabbing;
}

.scrubber-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(17, 24, 39, 0.1);
}

.scrubber-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111827;
  border-radius: 2px;
}

.scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
}

.return-to-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 4px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
}

.return-to-live[hidden] {
  display: none;
}

.return-to-live .rtl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111827;
}

.return-to-live .rtl-behind {
  color: #6b7280;
  font-weight: 500;
}

/* Footer actions on the listener — share + ask */
.listener-footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.listener-footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* Ask-panel: chat-with-sermon */
.ask-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: #ffffff;
  display: grid;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.ask-panel[hidden] {
  display: none;
}

.ask-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ask-panel-head strong {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.ask-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-panel-export {
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.ask-panel-export[hidden] {
  display: none;
}

.ask-panel-close {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
}

.ask-panel-thread {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 4px 2px;
}

.ask-panel-thread:empty::before {
  content: "Ask anything about what was said. The answer comes from this sermon's transcript.";
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
}

.ask-msg {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ask-msg--user {
  background: #f3f4f6;
  color: #111827;
  align-self: end;
  max-width: 88%;
}

.ask-msg--assistant {
  background: #fffaf0;
  color: #111827;
  border: 1px solid rgba(146, 64, 14, 0.12);
}

.ask-msg p {
  margin: 0 0 6px;
}

.ask-citations {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

.ask-citations li + li {
  margin-top: 3px;
}

.ask-panel-form {
  display: flex;
  gap: 8px;
}

.ask-panel-form input {
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #fafbff;
  color: #111827;
}

.ask-panel-hint {
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.4;
}

/* --- Setup grouping (fieldsets) ---------------------------------------- */
.setup-group {
  margin: 0;
  padding: 14px 14px 6px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

.setup-group + .setup-group {
  margin-top: 10px;
}

.setup-group > legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

.setup-group .phone-field {
  margin: 8px 0;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* --- Service tab section heading --------------------------------------- */
.booth-section-heading {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}

/* --- Outputs panel: header + action row -------------------------------- */
.overlay-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.overlay-panel-hint {
  color: #6b7280;
  font-size: 12px;
}

.overlay-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.overlay-actions .phone-primary {
  min-width: 96px;
}

.overlay-link-action {
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.overlay-link-action:hover {
  color: #111827;
}

.overlay-link-action--danger {
  color: #b91c1c;
}

.overlay-link-action--danger:hover {
  color: #7f1d1d;
}

.caption-pop {
  animation: caption-pop 180ms ease-out;
}

@keyframes caption-pop {
  from {
    transform: translateX(-50%) translateY(8px);
    opacity: 0.72;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .caption-overlay {
    width: calc(100vw - 32px);
    bottom: 22px;
    padding: 18px 20px 20px;
  }

  .caption-overlay-text {
    font-size: 32px;
  }

  .overlay-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================================
   Listener app — visual parity with the native LiveScreen (Mock-4 blue minimal)
   All classes are `lv-*` so they don't collide with the older listener CSS.
   ============================================================================ */

:root {
  --lv-bg: #ffffff;
  --lv-ink: #0f172a;
  --lv-ink-soft: #475569;
  --lv-ink-muted: #94a3b8;
  --lv-rule: rgba(15, 23, 42, 0.08);
  --lv-blue: #5b7cb5;
  --lv-blue-soft: #dde6f3;
  --lv-blue-wash: #f3f6fb;
  --lv-blue-ink: #3a5380;
  --lv-warm-wash: #fdf6ec;
  --lv-warm-ink: #92400e;
}

/* The listener body becomes a full-width white canvas, mobile-first.
   Override the older .phone-body chrome so the new design owns the screen. */
.listener-site,
.listener-site .phone-body {
  background: var(--lv-bg) !important;
  color: var(--lv-ink);
}

.listener-site .phone-app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  background: var(--lv-bg);
  box-shadow: none;
  min-height: 100vh;
}

.listener-site main.lv-app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 28px;
  background: var(--lv-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

.legacy-listener-pieces { display: none !important; }

/* ----- Shared primitives ------------------------------------------------- */

.lv-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--lv-ink-soft);
  text-transform: uppercase;
}

.lv-serif-h1 {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--lv-ink);
  margin: 6px 0 0;
}

.lv-sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lv-ink-soft);
}

/* ----- Pre-join screen --------------------------------------------------- */

.lv-join {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lv-join-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}

.lv-join-hero .lv-kicker { color: var(--lv-blue-ink); }

.lv-mode-pills {
  display: inline-flex;
  align-self: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 3px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  background: #f8fafc;
}

.lv-mode-pill {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-mode-pill.is-active {
  background: var(--lv-ink);
  color: #ffffff;
}

.lv-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.listener-site[data-listener-mode="listener"] .lv-join > .lv-field-group:not(.listener-only-block) {
  display: none;
}

.listener-site[data-listener-mode="personal"] .lv-join > .lv-field-group:not(.listener-only-block) {
  display: flex;
}

.listener-site[data-listener-mode="listener"] .personal-only-block {
  display: none !important;
}

.lv-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--lv-ink-soft);
  text-transform: uppercase;
}

.lv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-chip {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-chip.is-active {
  background: var(--lv-blue-wash);
  border-color: var(--lv-blue-soft);
  color: var(--lv-blue-ink);
}

.lv-other-lang {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lv-other-lang input {
  flex: 1;
  height: 44px;
  border: 1px solid var(--lv-rule);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  background: #fafbff;
  color: var(--lv-ink);
}

.lv-other-lang-btn {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 12px;
  padding: 0 16px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-code-card {
  margin: 0;
}

.lv-code-card input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--lv-rule);
  border-radius: 14px;
  padding: 0 18px;
  font-size: 22px;
  letter-spacing: 6px;
  font-weight: 600;
  color: var(--lv-ink);
  text-align: center;
  background: #fafbff;
  text-transform: uppercase;
  box-sizing: border-box;
}

.lv-error {
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
}

.lv-primary {
  appearance: none;
  border: 0;
  height: 54px;
  border-radius: 14px;
  background: var(--lv-ink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.lv-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lv-secondary {
  appearance: none;
  border: 1px solid var(--lv-rule);
  min-height: 48px;
  border-radius: 14px;
  background: #ffffff;
  color: var(--lv-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.lv-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lv-demo-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--lv-rule);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(20, 32, 54, 0.08);
}

.lv-demo-card h2 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--lv-ink);
}

.lv-demo-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--lv-rule);
  border-radius: 13px;
  padding: 0 13px;
  box-sizing: border-box;
  background: #fafbff;
  color: var(--lv-ink);
  font-size: 14px;
  font-weight: 600;
}

.lv-demo-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(140px, 1.2fr);
  gap: 10px;
}

.lv-demo-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lv-demo-preview,
.lv-demo-video {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--lv-rule);
  background: #0b1020;
  aspect-ratio: 16 / 9;
}

.lv-demo-preview[hidden],
.lv-demo-video[hidden] { display: none; }

.lv-demo-preview iframe,
.lv-demo-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lv-demo-video {
  margin: 0 0 10px;
  flex-shrink: 0;
}

.lv-error[data-tone="info"] { color: var(--lv-ink-muted); }

.lv-quiet-link {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  color: var(--lv-ink-muted);
  text-decoration: none;
  padding: 16px 0 4px;
}

/* ----- Live screen ------------------------------------------------------- */

.lv-live {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lv-live-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px;
  gap: 12px;
}

.lv-leave {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--lv-ink-soft);
  padding: 6px 10px;
  cursor: pointer;
}

/* Compact live tools: reading size, verse visibility, save, and optional chat. */
.lv-top-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--lv-rule);
  border-radius: 999px;
  background: #f8fafc;
}

/* Reading-size stepper (A− / A+) — small A on the left, big A on the right. */
.lv-textsize {
  display: inline-flex;
  gap: 2px;
  padding-right: 3px;
  margin-right: 3px;
  border-right: 1px solid var(--lv-rule);
}
.lv-text-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-width: 34px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--lv-ink-soft);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lv-text-btn:active { transform: scale(0.96); }
.lv-text-btn:hover { background: #ffffff; }
.lv-text-smaller { font-size: 12px; }
.lv-text-larger { font-size: 17px; }
.lv-tool-btn[hidden] { display: none; }

/* Bible-verse on/off — book icon. Tinted blue when on, muted/strike when off. */
.lv-verse-toggle,
.lv-transcript-toggle { color: var(--lv-blue-ink); padding: 0; position: relative; overflow: hidden; }
.lv-verse-toggle.is-off,
.lv-transcript-toggle.is-off { color: var(--lv-ink-muted); background: var(--lv-blue-wash); }
.lv-verse-toggle.is-off::after,
.lv-transcript-toggle.is-off::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 1.6px;
  background: var(--lv-ink-muted);
  transform: rotate(-22deg);
}

/* Compact identity strip: small logo + (dot · kicker / title) + language pill. */
.lv-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
}

.lv-head-id {
  flex: 1;
  min-width: 0;
}

.lv-logo-circle {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--lv-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lv-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lv-blue);
}

body[data-scrub="back"] .lv-live-dot {
  background: var(--lv-ink-muted);
}

/* ----- Connection banner (loud, human failure states) ------------------- */
.lv-conn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.lv-conn-banner[hidden] { display: none; }
.lv-conn-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.9; }
.lv-conn-banner[data-tone="info"] { background: var(--lv-blue-wash); color: var(--lv-blue-ink); }
.lv-conn-banner[data-tone="warn"] { background: var(--lv-warm-wash); color: var(--lv-warm-ink); }
.lv-conn-banner[data-tone="bad"]  { background: #fdecea; color: #b91c1c; }
.lv-conn-banner[data-tone="warn"] .lv-conn-dot,
.lv-conn-banner[data-tone="bad"] .lv-conn-dot { animation: lv-conn-blink 1.1s ease-in-out infinite; }
@keyframes lv-conn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .lv-conn-banner .lv-conn-dot { animation: none; } }
.lv-conn-retry {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 700;
}
.lv-conn-retry:hover { background: rgba(185, 28, 28, 0.2); }

/* The live dot mirrors connection health. */
body[data-conn="reconnecting"] .lv-live-dot { background: var(--lv-warm-ink); }
body[data-conn="offline"] .lv-live-dot { background: #b91c1c; }
body[data-conn="ended"] .lv-live-dot,
body[data-conn="budget-paused"] .lv-live-dot,
body[data-conn="audio-paused"] .lv-live-dot { background: var(--lv-ink-muted); }

.lv-sermon-title {
  text-align: left;
  margin: 1px 0 0;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lv-record-notice {
  text-align: left;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #c0362c;
}

.lv-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--lv-blue-wash);
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-blue-ink);
  cursor: pointer;
  min-width: 0;
  max-width: 42%;
}

.lv-lang-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Translation hero card -------------------------------------------- */

.lv-card {
  flex: 1;
  min-height: 260px;
  background: var(--lv-blue-wash);
  border-radius: 20px;
  padding: 22px;
  margin: 4px 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.lv-card .lv-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lv-blue-ink);
}

.lv-card .lv-card-text {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(19px * var(--lv-tscale, 1));
  line-height: 1.55;
  color: var(--lv-ink);
  margin: 0;
}

/* ----- "Choose your language" prompt (shown before a lane is picked) ------- */
.lv-lang-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 6px;
}

.lv-lang-prompt-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lv-blue-ink);
}

.lv-lang-prompt-title {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 24px;
  line-height: 1.25;
  color: var(--lv-ink);
}

.lv-lang-prompt-sub {
  margin: 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lv-ink-muted);
}

.lv-lang-prompt-btn {
  appearance: none;
  border: 0;
  margin-top: 6px;
  height: 48px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--lv-ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.lv-lang-prompt-btn:active {
  transform: translateY(1px);
}

/* ----- Live transcript (scrollable, paragraph-grouped, inline verses) ------ */
.lv-card.lv-transcript {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  /* Grow to nearly fill the screen, but stay viewport-bounded so the box scrolls
     internally instead of pushing the audio bar + footer off the page. When a
     verse card is also on screen, yield some height so both fit without scroll. */
  min-height: 200px;
  max-height: min(62dvh, 700px);
  gap: 0;
  scroll-behavior: smooth;
  -webkit-user-select: text;
  user-select: text;
}

/* When a verse card shares the screen, cap the box lower so both fit. */
body[data-verse-live="1"] .lv-card.lv-transcript {
  max-height: min(42dvh, 440px);
}

.lv-tline {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(19px * var(--lv-tscale, 1));
  line-height: 1.55;
  color: var(--lv-ink);
  margin: 0 0 12px;
  padding: 4px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-user-select: text;
  user-select: text;
}

.lv-tline.is-para-break {
  margin-top: 22px;
}

.lv-tline:last-child { margin-bottom: 2px; }

/* The in-progress sentence still being spoken/translated. */
.lv-tline.is-live {
  color: var(--lv-blue-ink);
  cursor: default;
}

/* Listener-tapped highlight — light tint, never an opaque block. */
.lv-tline.is-marked {
  background: rgba(245, 200, 66, 0.28);
  box-shadow: inset 0 0 0 1px rgba(214, 158, 23, 0.35);
}
.lv-tline.is-marked.is-live { background: transparent; box-shadow: none; }

.lv-verse-inline {
  margin: 14px 0 18px;
  padding: 13px 14px;
  background: var(--lv-warm-wash);
  border: 1px solid #f3e1c1;
  border-left: 4px solid var(--lv-warm-ink);
  border-radius: 14px;
  color: var(--lv-ink);
  -webkit-user-select: text;
  user-select: text;
}

.lv-verse-inline.is-para-break {
  margin-top: 22px;
}

.lv-verse-inline-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 5px;
}

.lv-verse-inline-ref {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(16px * var(--lv-tscale, 1));
  font-weight: 700;
}

.lv-verse-inline-version {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lv-warm-ink);
}

.lv-verse-inline p {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(15px * var(--lv-tscale, 1));
  line-height: 1.5;
}

.lv-verse-inline-open {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lv-verse-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--lv-blue-ink, #1b3a5b);
  background: rgba(43, 108, 176, 0.12);
  border: 1px solid rgba(43, 108, 176, 0.22);
  -webkit-tap-highlight-color: transparent;
}

.lv-verse-open:active {
  background: rgba(43, 108, 176, 0.22);
}

.lv-verse-open--alt {
  color: var(--lv-blue-ink, #1b3a5b);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.lv-transcript-empty {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: calc(17px * var(--lv-tscale, 1));
  color: var(--lv-blue-ink);
  opacity: 0.72;
  margin: auto 0;
}

.lv-scrubber[hidden] { display: none; }

/* Original (no-translation) mode: it's read-only text, so hide the AI-voice bar. */
body[data-transcript-mode="source"] .lv-audio-bar { display: none; }

/* "Original" entry in the language picker gets a subtle emphasis. */
.lv-chip-original { font-weight: 700; }
.lv-sheet-row-original span:first-child { font-weight: 700; }

/* ----- Verse card (warm cream, only when a verse is live) ---------------- */

.lv-verse-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--lv-warm-wash);
  border: 1px solid #f3e1c1;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lv-verse-card[hidden] { display: none; }

.lv-verse-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lv-verse-ref {
  font-size: 15px;
  font-weight: 700;
  color: var(--lv-ink);
}

.lv-verse-version {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lv-warm-ink);
}

.lv-verse-text {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lv-ink);
}

/* ----- Audio bar (scrubber + small play button) ------------------------- */

.lv-audio-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 0;
  margin-top: 2px;
}

/* Volume slider — iOS-style: thin rounded track, large white thumb. Adjusts the
   AI-voice output gain (the system volume itself isn't web-settable on iOS). */
.lv-volume {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--lv-blue-soft);
  outline: none;
  cursor: pointer;
}
.lv-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: grab;
}
.lv-volume::-webkit-slider-thumb:active { cursor: grabbing; }
.lv-volume::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--lv-blue-soft);
}
.lv-volume::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: grab;
}

.lv-scrubber {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.lv-scrubber:active { cursor: grabbing; }

.lv-scrubber-track {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: var(--lv-blue-soft);
}

.lv-scrubber-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--lv-blue);
  border-radius: 2px;
}

.lv-scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--lv-blue);
  border: 3px solid #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.lv-audio-button {
  appearance: none;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--lv-blue);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv-audio-button:active { transform: scale(0.97); }
.lv-audio-button.is-off { background: var(--lv-ink-muted); }

/* ----- Return-to-live pill ---------------------------------------------- */

.lv-return-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: var(--lv-blue-wash);
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-blue-ink);
  cursor: pointer;
}

.lv-return-pill[hidden] { display: none; }

.lv-return-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv-blue);
}

.lv-return-behind {
  color: var(--lv-ink-soft);
  font-weight: 500;
}

/* ----- Footer actions --------------------------------------------------- */

.lv-footer-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.lv-footer-btn {
  appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--lv-rule);
  border-radius: 12px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-footer-btn[hidden] { display: none; }

/* ----- Ask (chat) panel ------------------------------------------------- */

.lv-ask-panel {
  margin-top: 14px;
  padding: 14px 14px 16px;
  border: 1px solid var(--lv-rule);
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lv-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lv-ask-head strong {
  font-size: 14px;
  font-weight: 700;
}

.lv-ask-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lv-ask-save {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

.lv-ask-save[hidden] { display: none; }

.lv-ask-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--lv-ink-muted);
  cursor: pointer;
  padding: 2px 6px;
}

.lv-ask-hint {
  margin: 0;
  font-size: 12px;
  color: var(--lv-ink-muted);
}

.lv-ask-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

.lv-ask-message {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.lv-ask-message.user {
  background: var(--lv-blue-wash);
  color: var(--lv-blue-ink);
  align-self: flex-end;
  max-width: 90%;
}

.lv-ask-message.assistant {
  background: #f8fafc;
  color: var(--lv-ink);
}

.lv-ask-citations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--lv-ink-soft);
}

.lv-ask-form {
  display: flex;
  gap: 8px;
}

.lv-ask-form input {
  flex: 1;
  height: 40px;
  border: 1px solid var(--lv-rule);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--lv-ink);
  background: #ffffff;
}

.lv-ask-submit {
  appearance: none;
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  border-radius: 10px;
  padding: 0 16px;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-soft);
  cursor: pointer;
}

/* ----- Language sheet --------------------------------------------------- */

.lv-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 50;
}

.lv-sheet-backdrop[hidden] { display: none; }

.lv-sheet-tap {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lv-sheet {
  max-height: 70vh;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lv-sheet-title {
  padding: 0 22px;
}

.lv-sheet-list {
  flex: 1;
  overflow-y: auto;
}

.lv-sheet-row {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 22px;
  font-size: 16px;
  color: var(--lv-ink);
  border-top: 1px solid var(--lv-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.lv-sheet-row.is-active {
  color: var(--lv-blue-ink);
  font-weight: 600;
}

.lv-sheet-row .lv-sheet-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lv-blue);
}

/* Flags + layout for the session-driven language picker. */
.lv-chip-flag { margin-right: 6px; font-size: 15px; }
.lv-sheet-row-flag { font-size: 18px; line-height: 1; margin-right: 10px; }
.lv-sheet-row-label { margin-right: auto; }

/* "Available now" / "Ask the booth to add" section headers in the sheet. */
.lv-sheet-group {
  padding: 16px 22px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lv-ink-soft);
}
.lv-sheet-group:first-child { padding-top: 6px; }

/* Request-only languages: muted, with an "Ask →" / "Requested ⏳" pill instead of a dot. */
.lv-sheet-row--request { color: var(--lv-ink-soft); }
.lv-sheet-row-ask {
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-blue);
  background: var(--lv-blue-wash);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Request confirmation — shown before asking the booth to add a language. */
.lv-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.35);
}

.lv-confirm-backdrop[hidden] { display: none; }

.lv-confirm {
  width: min(360px, 100%);
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv-confirm h3 {
  margin: 0;
  color: var(--lv-ink);
  font-size: 22px;
  line-height: 1.2;
}

.lv-confirm p {
  margin: 0;
  color: var(--lv-ink-soft);
  font-size: 15px;
  line-height: 1.45;
}

.lv-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.lv-confirm-primary,
.lv-confirm-secondary {
  appearance: none;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.lv-confirm-primary { background: var(--lv-ink); color: #ffffff; }
.lv-confirm-secondary { background: #ffffff; color: var(--lv-ink-soft); border-color: var(--lv-rule); }
.lv-confirm-primary:disabled,
.lv-confirm-secondary:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Save transcript sheet — compact, explicit export choices for phones. */
.lv-save-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.35);
}

.lv-save-backdrop[hidden] { display: none; }

.lv-save-tap {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lv-save {
  width: min(100%, 480px);
  align-self: center;
  max-height: 82vh;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-save-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lv-save h3 {
  margin: 4px 0 0;
  color: var(--lv-ink);
  font-size: 22px;
  line-height: 1.2;
}

.lv-save-close {
  appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink-soft);
  cursor: pointer;
  font-weight: 700;
}

.lv-save-meta {
  margin: 0;
  color: var(--lv-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.lv-save-scope {
  margin: 0;
  padding: 0;
  border: 1px solid var(--lv-rule);
  border-radius: 14px;
  overflow: hidden;
}

.lv-save-scope legend {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lv-save-scope label {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-top: 1px solid var(--lv-rule);
  font-size: 15px;
  font-weight: 600;
  color: var(--lv-ink);
}

.lv-save-scope label:first-of-type { border-top: 0; }
.lv-save-scope label[hidden] { display: none; }

.lv-save-scope input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--lv-blue);
}

.lv-save-actions {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 10px;
}

.lv-save-primary,
.lv-save-secondary {
  appearance: none;
  min-height: 48px;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

.lv-save-primary {
  border: 0;
  background: var(--lv-ink);
  color: #ffffff;
}

.lv-save-secondary {
  border: 1px solid var(--lv-rule);
  background: #ffffff;
  color: var(--lv-ink-soft);
}

.lv-save-primary:disabled,
.lv-save-secondary:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Service recording archive sheet — simple native audio controls + verse jumps. */
.lv-archive-backdrop {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.35);
}

.lv-archive-backdrop[hidden] { display: none; }

.lv-archive-tap {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lv-archive {
  width: min(100%, 520px);
  align-self: center;
  max-height: 86vh;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  overflow: auto;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-archive-head,
.lv-archive-service-head,
.lv-archive-track-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lv-archive h3 {
  margin: 4px 0 0;
  color: var(--lv-ink);
  font-size: 22px;
  line-height: 1.2;
}

.lv-archive-close {
  appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink-soft);
  cursor: pointer;
  font-weight: 700;
}

.lv-archive-meta,
.lv-archive-empty,
.lv-archive-sidecar {
  margin: 0;
  color: var(--lv-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.lv-archive-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lv-archive-service {
  border: 1px solid var(--lv-rule);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lv-archive-service-head strong,
.lv-archive-track-head strong {
  color: var(--lv-ink);
  font-size: 15px;
}

.lv-archive-service-head span,
.lv-archive-track-head span {
  color: var(--lv-ink-soft);
  font-size: 13px;
}

.lv-archive-track {
  padding-top: 12px;
  border-top: 1px solid var(--lv-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lv-archive-track:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.lv-archive-audio {
  width: 100%;
  min-height: 38px;
}

.lv-archive-download {
  align-self: flex-start;
  color: var(--lv-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.lv-archive-missing {
  color: var(--lv-ink-soft);
  font-size: 13px;
}

.lv-archive-verses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-archive-verse {
  appearance: none;
  border: 1px solid #d6e0ee;
  border-radius: 999px;
  background: var(--lv-blue-wash);
  color: var(--lv-ink);
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.lv-archive-verse small {
  color: var(--lv-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

/* ========================================================================
   BOOTH v2 — technician control surface (scoped under .church-site)
   A calm, light, desktop-first console that matches the listener app.
   Two live tabs (Translation / Bible verses) + setup behind a gear.
   Every rule is scoped to .church-site so other pages are untouched.
   ===================================================================== */

.church-site {
  --bx-canvas: #f5f6f8;
  --bx-card: #ffffff;
  --bx-rule: rgba(15, 23, 42, 0.09);
  --bx-rule-soft: rgba(15, 23, 42, 0.06);
  --bx-ink: #0f172a;
  --bx-soft: #475569;
  --bx-muted: #94a3b8;
  --bx-wash: #f6f8fb;
  --bx-blue: #3a5380;
  --bx-blue-soft: #dde6f3;
  --bx-blue-wash: #eef3fa;
  --bx-live: #0f766e;
  --bx-live-wash: #e7f4f1;
  --bx-warn: #b45309;
  --bx-warn-wash: #fdf3e6;
  --bx-danger: #b42318;
  --bx-radius: 16px;
  --bx-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* Flat light canvas — drop the old teal gradient + narrow phone column. */
body.church-site {
  background: var(--bx-canvas);
  color: var(--bx-ink);
}

.church-site .phone-app {
  width: min(1240px, calc(100% - 40px));
  max-width: none;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 56px;
  background: transparent;
  box-shadow: none;
}

.church-site .phone-top {
  min-height: 0;
  align-items: flex-start;
  padding: 4px 4px 18px;
  border: 0;
  background: transparent;
  color: var(--bx-ink);
}

.church-site .phone-brand {
  font-family: Georgia, "Source Serif Pro", "Noto Serif", serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bx-ink);
}

.church-site .phone-status {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--bx-muted);
}

.church-site .top-actions { display: flex; gap: 8px; align-items: center; }

.church-site .top-actions .phone-small {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

/* ---- Booth shell ------------------------------------------------------- */

.church-site #hostScreen { padding-top: 0; }
.church-site #hostScreen.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Buttons ----------------------------------------------------------- */

.church-site .bx-primary,
.church-site .bx-secondary,
.church-site .bx-ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.church-site .bx-primary:active,
.church-site .bx-secondary:active,
.church-site .bx-ghost:active { transform: translateY(0.5px); }

.church-site .bx-primary {
  background: var(--bx-ink);
  color: #ffffff;
}
.church-site .bx-primary:hover { background: #1e293b; }

.church-site .bx-secondary {
  background: var(--bx-card);
  border-color: var(--bx-rule);
  color: var(--bx-ink);
}
.church-site .bx-secondary:hover { background: var(--bx-wash); }

.church-site .bx-ghost {
  background: transparent;
  border-color: var(--bx-rule);
  color: var(--bx-soft);
}
.church-site .bx-ghost:hover { background: var(--bx-wash); }

.church-site .bx-quiet {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
}
.church-site .bx-quiet:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-quiet--danger { color: var(--bx-danger); }
.church-site .bx-quiet--danger:hover { background: #fdeceb; color: var(--bx-danger); }

.church-site .bx-danger {
  appearance: none;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #f3c7c2;
  background: #fdeceb;
  color: var(--bx-danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-danger:hover { background: #fbdcd8; }

/* ---- Plan & billing ---------------------------------------------------- */

.church-site .bx-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
}
.church-site .bx-plan-badge[data-plan="free"] { background: var(--bx-wash); color: var(--bx-muted); }

.church-site .bx-billing-note {
  margin: 0;
  font-size: 13px;
  color: var(--bx-muted);
  line-height: 1.45;
}

.church-site .bx-cadence-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
}
.church-site .bx-cadence-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.church-site .bx-cadence-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-cadence-save {
  font-size: 10px;
  font-weight: 700;
  color: var(--bx-live);
  background: var(--bx-live-wash);
  padding: 1px 6px;
  border-radius: 999px;
}

.church-site .bx-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .church-site .bx-plan-grid { grid-template-columns: 1fr; }
}

.church-site .bx-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--bx-rule);
  border-radius: var(--bx-radius);
  background: var(--bx-card);
}
.church-site .bx-plan.is-current {
  border-color: var(--bx-blue);
  background: var(--bx-blue-soft);
}
.church-site .bx-plan-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-plan-price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: var(--bx-ink);
  line-height: 1.1;
}
.church-site .bx-plan-price span { font-size: 13px; color: var(--bx-muted); }
.church-site .bx-plan-langs { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-plan-blurb { font-size: 12px; color: var(--bx-muted); line-height: 1.4; flex: 1; }
.church-site .bx-plan .bx-primary { margin-top: 6px; width: 100%; justify-content: center; }
.church-site .bx-plan-current {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bx-blue);
}
.church-site .bx-manage-billing { align-self: flex-start; }

/* Usage meter (monthly language-hours) */
.church-site .bx-usage { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--bx-ink);
  font-weight: 600;
}
.church-site .bx-usage-overage {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 7px;
  border-radius: 999px;
}
.church-site .bx-usage-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  overflow: hidden;
}
.church-site .bx-usage-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--bx-blue);
  transition: width 0.3s ease;
}
.church-site .bx-usage-fill[data-level="warn"] { background: #d97706; }
.church-site .bx-usage-fill[data-level="over"] { background: var(--bx-danger); }

/* Overage-vs-stop choice */
.church-site .bx-overage { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-overage-q { font-size: 12px; color: var(--bx-muted); }
.church-site .bx-overage-opts {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
}
.church-site .bx-overage-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
}
.church-site .bx-overage-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}

/* ---- Recording & archive ----------------------------------------------- */

.church-site .bx-record-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #c0362c;
  animation: bx-rec-pulse 1.6s ease-in-out infinite;
}
@keyframes bx-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.church-site .bx-record-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: var(--bx-wash);
  border: 1px solid var(--bx-rule);
  align-self: flex-start;
  margin-top: 4px;
}
.church-site .bx-record-opt {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  cursor: pointer;
}
.church-site .bx-record-opt.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-record-opt[data-record="on"].is-active { color: #c0362c; }
.church-site .bx-record-opt:disabled { opacity: 0.5; cursor: default; }
.church-site .bx-record-consent {
  font-size: 12px;
  line-height: 1.45;
  color: var(--bx-muted);
  margin: 8px 0 0;
}

.church-site .bx-archive { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.church-site .bx-archive-empty { font-size: 12px; color: var(--bx-muted); margin: 0; }
.church-site .bx-archive-item {
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  padding: 12px;
  background: var(--bx-wash);
}
.church-site .bx-archive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.church-site .bx-archive-title { font-weight: 650; font-size: 13px; color: var(--bx-ink); }
.church-site .bx-archive-when { font-size: 11px; color: var(--bx-muted); white-space: nowrap; }
.church-site .bx-archive-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid var(--bx-rule);
}
.church-site .bx-archive-tracklabel { font-size: 12px; color: var(--bx-muted); min-width: 120px; }
.church-site .bx-archive-track audio { height: 32px; max-width: 220px; flex: 1; }
.church-site .bx-archive-dl { font-size: 12px; font-weight: 600; color: var(--bx-accent, #3a5380); text-decoration: none; }
.church-site .bx-archive-missing { font-size: 12px; color: var(--bx-muted); font-style: italic; }

/* Recording chip in the live service-status grid. */
.church-site .bx-host-service-status article[data-state="rec"],
.church-site article[data-state="rec"].bx-status-rec {
  --status-accent: #c0362c;
}
.church-site article[data-state="rec"].bx-status-rec strong { color: #c0362c; }

/* ---- Session header ---------------------------------------------------- */

.church-site .bx-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bx-blue);
}

.church-site .bx-qr {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  border: 1px solid var(--bx-rule);
  background: #fff;
  flex-shrink: 0;
}

/* ---- Status chips ------------------------------------------------------ */

.church-site .bx-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.church-site .bx-status article {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .bx-status span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-status strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bx-ink);
  line-height: 1.25;
}
.church-site .bx-status article[data-state="live"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-status article[data-state="live"] strong { color: var(--bx-live); }
.church-site .bx-status article[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f3ddb8; }
.church-site .bx-status article[data-state="warn"] strong { color: var(--bx-warn); }

/* ---- Pinned "do this now" alerts -------------------------------------- */

.church-site .bx-pinned { display: flex; flex-wrap: wrap; gap: 12px; }
.church-site .bx-pinned:empty { display: none; }
.church-site .pinned-card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--bx-rule);
  border-radius: 14px;
  background: var(--bx-card);
  box-shadow: var(--bx-shadow);
}
.church-site .pinned-verse--pending { border-color: #f3ddb8; background: var(--bx-warn-wash); }
.church-site .pinned-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.church-site .pinned-card header strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--bx-ink);
}
.church-site .pinned-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bx-wash);
  color: var(--bx-soft);
}
.church-site .pinned-tag--live { background: var(--bx-live-wash); color: var(--bx-live); }
.church-site .pinned-tag--warn { background: #fbe7c8; color: var(--bx-warn); }
.church-site .pinned-tag--idle { background: var(--bx-wash); color: var(--bx-muted); }
.church-site .pinned-meta { font-size: 12px; color: var(--bx-muted); }
.church-site .pinned-verse-text,
.church-site .pinned-caption-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bx-soft);
}
.church-site .pinned-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.church-site .pinned-actions .phone-primary,
.church-site .pinned-actions .phone-ghost {
  appearance: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site .pinned-actions .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site .pinned-actions .phone-ghost { background: transparent; border-color: var(--bx-rule); color: var(--bx-soft); }

/* ---- Tabs -------------------------------------------------------------- */

.church-site .bx-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.church-site .bx-tabs-main {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #eceef2;
  border-radius: 12px;
}
.church-site .bx-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-tab:hover { color: var(--bx-ink); }
.church-site .bx-tab.active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.church-site .bx-gear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-gear:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-gear.active {
  background: var(--bx-blue-wash);
  border-color: var(--bx-blue-soft);
  color: var(--bx-blue);
}

/* ---- Panels + grid ----------------------------------------------------- */

.church-site .bx-panel { display: none; }
.church-site .bx-panel.active { display: block; }

.church-site .bx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.church-site .bx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.church-site .bx-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
}
.church-site .bx-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.church-site .bx-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--bx-ink);
}
.church-site .bx-card-hint { font-size: 12px; color: var(--bx-muted); text-align: right; }
/* Panic control: one-tap revert to the known-good OpenAI engine. Light amber tint
   (never a dark/opaque fill) so it reads as a safety action without alarming. */
.church-site .bx-panic {
  margin-top: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(193, 120, 23, 0.5);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  color: #9a6207;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-panic:hover { background: rgba(245, 158, 11, 0.2); }

/* ---- Form fields ------------------------------------------------------- */

.church-site .phone-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--bx-soft);
}
.church-site .phone-field input,
.church-site .phone-field select,
.church-site .phone-field textarea {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .phone-field input[type="range"] { padding: 0 2px; accent-color: var(--bx-blue); }
.church-site .phone-field textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
.church-site .phone-field small {
  color: var(--bx-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.church-site .phone-field input:focus,
.church-site .phone-field select:focus,
.church-site .phone-field textarea:focus {
  outline: none;
  border-color: var(--bx-blue);
  box-shadow: 0 0 0 3px var(--bx-blue-wash);
}
.church-site .bx-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.church-site .bx-overlay-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.church-site .bx-overlay-presets button {
  appearance: none;
  min-height: 40px;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  background: var(--bx-wash);
  color: var(--bx-soft);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-overlay-presets button:hover { border-color: var(--bx-blue-soft); color: var(--bx-ink); }
.church-site .bx-overlay-presets button.is-active {
  border-color: var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
}
.church-site .bx-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-check input { width: 17px; height: 17px; accent-color: var(--bx-blue); }
.church-site .bx-setup-actions { display: flex; justify-content: flex-end; }
.church-site .bx-hint { margin: 0; font-size: 12.5px; color: var(--bx-muted); line-height: 1.45; }

/* ---- AI voice toggle --------------------------------------------------- */

.church-site .bx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.church-site .bx-toggle input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.church-site .bx-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.church-site .bx-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.church-site .bx-toggle input:checked + .bx-toggle-track { background: var(--bx-live); }
.church-site .bx-toggle input:checked + .bx-toggle-track::after { transform: translateX(16px); }
.church-site .bx-toggle-text { font-size: 12.5px; font-weight: 600; color: var(--bx-soft); }

/* ---- Capture + manual -------------------------------------------------- */

.church-site .bx-capture { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.church-site .bx-manual { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.church-site .bx-live-manual {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--bx-rule-soft);
}
.church-site .bx-manual input {
  min-height: 44px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .bx-live-manual input {
  min-height: 40px;
  border: 1px solid var(--bx-rule);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--bx-ink);
  background: var(--bx-card);
}
.church-site .bx-live-manual .bx-secondary { min-height: 40px; border-radius: 10px; padding: 0 14px; }
.church-site .bx-manual input:focus,
.church-site .bx-live-manual input:focus { outline: none; border-color: var(--bx-blue); box-shadow: 0 0 0 3px var(--bx-blue-wash); }
.church-site .realtime-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-muted);
  padding: 2px 0;
}
.church-site .realtime-status[data-state="connected"] { color: var(--bx-live); }
.church-site .realtime-status[data-state="error"],
.church-site .realtime-status[data-state="disconnected"] { color: var(--bx-danger); }

/* ---- Transcript feed --------------------------------------------------- */

.church-site .bx-card--grow { min-height: 0; }
.church-site .bx-feed {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.church-site .phone-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .phone-line:last-child { border-bottom: 0; }
.church-site .phone-line time { font-size: 12px; color: var(--bx-muted); padding-top: 2px; }
.church-site .phone-line p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--bx-ink); }
.church-site .phone-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--bx-muted);
  background: var(--bx-wash);
  border-radius: 12px;
}

/* ---- Live summary ------------------------------------------------------ */

.church-site .bx-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.church-site .bx-summary:empty { display: none; }
.church-site .bx-summary article {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
  min-width: 0;
}
.church-site .bx-summary span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-summary strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--bx-ink);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- Languages + roster + requests ------------------------------------ */

.church-site .bx-roster { display: flex; flex-direction: column; gap: 2px; }
.church-site .bx-roster:empty { display: none; }
.church-site .bx-roster strong { font-size: 14px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-roster span { font-size: 13px; color: var(--bx-soft); }
.church-site .bx-requests { display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-requests > strong { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-requests > span { font-size: 13px; color: var(--bx-muted); line-height: 1.45; }
.church-site .request-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.church-site .language-request-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f3ddb8;
  border-radius: 12px;
  background: var(--bx-warn-wash);
}
.church-site .language-request-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.church-site .language-request-card b { font-size: 14px; color: var(--bx-ink); }
.church-site .language-request-card span { font-size: 12px; color: var(--bx-soft); }
.church-site .language-request-card .phone-primary,
.church-site .language-request-card .phone-secondary {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site .language-request-card .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site .language-request-card .phone-secondary { background: #fff; border-color: var(--bx-rule); color: var(--bx-soft); }

.church-site .bx-request-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(21, 30, 45, 0.22);
  backdrop-filter: blur(10px);
}

.church-site .bx-request-panel[hidden] { display: none; }

.church-site .bx-request-panel-card {
  width: min(560px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--bx-rule);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(21, 30, 45, 0.2);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.church-site .bx-request-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* ---- Output pickers + chips + actions --------------------------------- */

.church-site .bx-picker { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.church-site .bx-demo-source-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: stretch;
}
.church-site .bx-demo-listener-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 12px;
  background: var(--bx-blue-wash);
}
.church-site .bx-demo-listener-card[hidden] { display: none; }
.church-site .bx-demo-listener-card .bx-qr {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fff;
}
.church-site .bx-demo-listener-card div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.church-site .bx-demo-listener-card strong {
  font-size: 12.5px;
  color: var(--bx-ink);
}
.church-site .bx-demo-listener-card small {
  font-size: 11px;
  color: var(--bx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.church-site .bx-youtube-preview {
  overflow: hidden;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0b1020;
  aspect-ratio: 16 / 9;
}
.church-site .bx-youtube-preview[hidden] { display: none; }
.church-site .bx-youtube-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.church-site .bx-fmt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; margin-top: 8px; }
.church-site .bx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.church-site .bx-chips:empty { display: none; }
.church-site .language-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .language-chip b { font-weight: 700; opacity: 0.55; font-style: normal; }
.church-site .language-chip:hover b { opacity: 1; color: var(--bx-danger); }
.church-site .bx-out-actions { display: flex; align-items: center; gap: 8px; }
.church-site .bx-out-actions .bx-primary { min-height: 40px; padding: 0 20px; }
.church-site .bx-versions { display: flex; flex-direction: column; gap: 10px; }
.church-site .bible-version-row { gap: 6px; }
.church-site .bible-version-row > span { font-size: 12px; font-weight: 600; color: var(--bx-soft); }
.church-site .bible-version-row small { font-size: 11.5px; color: var(--bx-muted); font-weight: 500; }

/* ---- Overlay previews -------------------------------------------------- */

.church-site .bx-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-wash);
}
.church-site .overlay-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.church-site .overlay-preview-head strong { font-size: 12px; font-weight: 700; color: var(--bx-ink); }
.church-site .overlay-preview-head span { font-size: 11px; color: var(--bx-muted); }
.church-site .mini-overlay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: #0f1b2d;
}
.church-site .mini-overlay div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 8px; }
.church-site .mini-overlay span { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.church-site .mini-overlay p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #fff; font-weight: 600; }
.church-site .bx-preview > small { font-size: 11.5px; color: var(--bx-muted); }
.church-site .bx-theme-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0f1b2d;
}

/* ---- Bible verse hero + history --------------------------------------- */

.church-site .bx-card--hero { background: var(--bx-blue-wash); border-color: var(--bx-blue-soft); }
.church-site .bx-verse-hero { display: flex; flex-direction: column; gap: 10px; }
.church-site .bx-verse-hero > strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--bx-blue);
}
.church-site .bx-verse-hero > span { font-size: 12.5px; color: var(--bx-soft); margin-top: -4px; }
.church-site .bx-verse-hero .phone-field { background: var(--bx-card); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bx-blue-soft); }
.church-site .bx-verse-hero .phone-field input { border-color: var(--bx-rule); font-family: Georgia, serif; font-size: 18px; }
.church-site .bx-verse-hero > p {
  margin: 0;
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bx-ink);
}
.church-site .bx-verse-hero .phone-primary {
  appearance: none;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--bx-live);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-verse-hero .phone-primary:hover { background: #0b5f59; }

.church-site .bx-approved {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
}
.church-site .bx-approved small { font-size: 13px; color: var(--bx-soft); }

.church-site .bx-verses { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.church-site .verse-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  padding: 13px 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .verse-chip strong { font-family: Georgia, serif; font-size: 16px; font-weight: 600; color: var(--bx-ink); }
.church-site .verse-chip > span { font-size: 12px; font-weight: 600; color: var(--bx-muted); justify-self: end; }
.church-site .verse-chip p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--bx-soft); }
.church-site .verse-chip .verse-approve {
  grid-column: 1 / -1;
  appearance: none;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--bx-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.church-site .verse-chip .verse-approve:hover { background: #1e293b; }

/* ---- Billing + cost ---------------------------------------------------- */

.church-site .bx-billing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bx-blue-wash);
  border: 1px solid var(--bx-blue-soft);
}
.church-site .bx-billing.listener-pay { background: var(--bx-warn-wash); border-color: #f3ddb8; }
.church-site .bx-billing strong { font-size: 13px; color: var(--bx-ink); }
.church-site .bx-billing span { font-size: 12.5px; color: var(--bx-soft); line-height: 1.4; }
.church-site .bx-cost { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--bx-wash); }
.church-site .bx-cost strong { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--bx-soft); }
.church-site .bx-cost span { font-size: 12.5px; color: var(--bx-soft); }

/* ---- Account ----------------------------------------------------------- */

.church-site .bx-account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.church-site .bx-account-label { font-size: 13px; color: var(--bx-soft); }
.church-site .bx-referral-share {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-wash);
}
.church-site .bx-referral-code {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--bx-ink);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .church-site .bx-referral-share {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- Login screen polish ---------------------------------------------- */

.church-site #churchLoginScreen.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: 8px auto 0;
}
.church-site .church-entry h1 { font-family: Georgia, "Source Serif Pro", serif; font-size: 28px; font-weight: 600; color: var(--bx-ink); }
.church-site .church-entry p { font-size: 15px; color: var(--bx-soft); line-height: 1.5; }
.church-site .auth-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #eceef2; border-radius: 12px; align-self: flex-start; }
.church-site .auth-tab { appearance: none; border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--bx-soft); cursor: pointer; }
.church-site .auth-tab.is-active { background: #fff; color: var(--bx-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.church-site .auth-tab[hidden],
.church-site [data-auth-pane][hidden] {
  display: none !important;
}
.church-site .auth-guidance {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bx-soft);
}
.church-site .auth-only,
.church-site .demo-only {
  display: none;
}
.church-site [data-auth-current="signin"] [data-auth-pane~="signin"],
.church-site [data-auth-current="signup"] [data-auth-pane~="signup"],
.church-site [data-auth-current="demo"] [data-auth-pane~="demo"] {
  display: flex;
}
.church-site .join-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--bx-card); border: 1px solid var(--bx-rule); border-radius: var(--bx-radius); box-shadow: var(--bx-shadow); }
.church-site .auth-error { margin: 0; font-size: 13px; color: var(--bx-danger); }
.church-site .split-buttons { display: flex; gap: 8px; }
.church-site #churchLoginForm .phone-primary,
.church-site #churchLoginForm .phone-secondary {
  appearance: none;
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.church-site #churchLoginForm .phone-primary { background: var(--bx-ink); color: #fff; }
.church-site #churchLoginForm .phone-secondary { background: #fff; border-color: var(--bx-rule); color: var(--bx-soft); }
.church-site #churchLoginScreen .billing-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bx-blue-wash);
  border: 1px solid var(--bx-blue-soft);
}
.church-site #churchLoginScreen .billing-banner strong { font-size: 13px; color: var(--bx-ink); }
.church-site #churchLoginScreen .billing-banner span { font-size: 12.5px; color: var(--bx-soft); }

/* ---- Responsive: collapse to a single column on narrow screens -------- */

@media (max-width: 880px) {
  .church-site .bx-grid { grid-template-columns: 1fr; }
  .church-site .bx-status { grid-template-columns: repeat(2, 1fr); }
  .church-site .bx-summary { grid-template-columns: 1fr; }
  .church-site .bx-field-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   BOOTH v2.1 — header removed, two pages only; hero mic; compact code.
   ===================================================================== */

/* Slim the chrome so the tabs are the first real thing on screen. */
.church-site .phone-top { padding: 2px 4px 12px; }
.church-site #hostScreen.active { gap: 14px; }

/* Tabs are now the top-level nav — give the bar a touch more presence. */
.church-site .bx-tab { position: relative; padding: 10px 22px; font-size: 14.5px; }
.church-site .bx-tab[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ---- Mic — a compact red control that sits in the tab bar -------------- */

.church-site .bx-tabs-side { display: inline-flex; align-items: center; gap: 8px; }
/* All four booth controls share one line in the top bar. */
.church-site .bx-live-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.church-site .bx-live-controls[hidden] { display: none !important; }
.church-site:not([data-church-auth="signed-in"]) .top-actions { display: none !important; }

/* Square icon buttons — the Setup gear and the Listener-site phone. */
.church-site .bx-iconbtn,
.church-site .top-actions .phone-small.bx-iconbtn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.church-site .bx-iconbtn svg { width: 18px; height: 18px; }
/* "Projecting" state on the booth Project button — reuses the live teal wash. */
.church-site .bx-iconbtn.is-active {
  background: var(--bx-live-wash);
  border-color: #bfe3dc;
  color: var(--bx-live);
}

.church-site .bx-mic {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  background: #dc2626;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.20);
  transition: background 0.15s ease;
}
.church-site .bx-mic::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.church-site .bx-mic:hover { background: #c01c1c; }
.church-site .bx-mic.is-recording { animation: bx-mic-pulse 1.5s ease-out infinite; }
.church-site .bx-mic.is-recording::before { animation: bx-dot-blink 1s steps(1, end) infinite; }

@keyframes bx-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45), 0 4px 12px rgba(220, 38, 38, 0.20); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0), 0 4px 12px rgba(220, 38, 38, 0.20); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 4px 12px rgba(220, 38, 38, 0.20); }
}
@keyframes bx-dot-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .church-site .bx-mic.is-recording { animation: none; }
  .church-site .bx-mic.is-recording::before { animation: none; }
}

/* ---- Session code — chip in the top bar, QR drops in a popover --------- */

.church-site .bx-session { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.church-site .bx-session-plan {
  min-height: 40px;
  padding-inline: 12px;
  white-space: nowrap;
}
.church-site .bx-session-create { min-height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 11px; }

.church-site .bx-code-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px 0 15px;
  border-radius: 11px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  cursor: pointer;
}
.church-site .bx-code-chip:hover { filter: brightness(0.98); }
.church-site .bx-code-chip-kicker {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
}
.church-site .bx-code-chip strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.church-site .bx-code-chip-caret { transition: transform 0.15s ease; opacity: 0.6; }
.church-site .bx-code-chip[aria-expanded="true"] .bx-code-chip-caret { transform: rotate(180deg); }

.church-site .bx-session-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 300px;
  max-width: min(86vw, 340px);
  padding: 16px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}
.church-site .bx-session-pop .bx-codebox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.church-site .bx-session-pop .bx-qr {
  width: 168px;
  height: 168px;
  align-self: center;
  border-radius: 10px;
}
.church-site .bx-session-pop .bx-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-muted);
}
.church-site .bx-session-pop .bx-codebox-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.church-site .bx-session-pop .bx-codebox-main small { font-size: 11.5px; color: var(--bx-soft); word-break: break-all; }
/* Three actions now (Show on screen / Download PNG / Copy invite) — stack them. */
.church-site .bx-session-pop .bx-codebox-actions { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-session-pop .bx-codebox-actions > * { width: 100%; text-align: center; }
.church-site .bx-quiet--accent { color: var(--bx-blue); font-weight: 700; }
.church-site .bx-quiet.is-active { background: var(--bx-live-wash); border-color: #bfe3dc; color: var(--bx-live); }

@media (max-width: 720px) {
  .church-site .bx-code-chip-kicker { display: none; }
  .church-site .bx-session-pop { right: auto; left: 0; }
}

/* ---- Output menu — the Project button drops a destination picker ---------
   Two destinations: External display (we push a stage) and Overlay (a URL other
   software pulls). Each group has an Edit entry point for its designer. */
.church-site .bx-project-wrap { position: relative; display: inline-flex; align-items: center; }

.church-site .bx-project-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 300px;
  max-width: min(86vw, 340px);
  padding: 8px;
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.church-site .bx-proj-group { padding: 4px; }
.church-site .bx-proj-grouphead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 9px;
}
.church-site .bx-proj-grouptitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bx-muted);
}
.church-site .bx-proj-grouptitle small {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bx-soft);
}
.church-site .bx-proj-edit {
  appearance: none;
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid var(--bx-rule);
  border-radius: 9px;
  background: transparent;
  color: var(--bx-blue);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.church-site .bx-proj-edit:hover { background: var(--bx-blue-wash); border-color: var(--bx-blue-soft); }

.church-site .bx-proj-list { display: flex; flex-direction: column; gap: 4px; }
.church-site .bx-proj-row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}
.church-site .bx-proj-row:hover { background: var(--bx-wash); }
.church-site .bx-proj-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.church-site .bx-proj-row-name { font-size: 13px; font-weight: 600; color: var(--bx-ink); }
.church-site .bx-proj-row-sub { font-size: 11px; color: var(--bx-soft); }
.church-site .bx-proj-row-state { font-size: 11px; font-weight: 700; color: var(--bx-muted); flex-shrink: 0; }
.church-site .bx-proj-row.is-live { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-proj-row.is-live .bx-proj-row-name,
.church-site .bx-proj-row.is-live .bx-proj-row-state { color: var(--bx-live); }
.church-site .bx-proj-empty {
  margin: 4px 0 0;
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bx-soft);
}

.church-site .bx-proj-divider { height: 1px; background: var(--bx-rule); margin: 8px 4px; }

/* Captions vs Verses — segmented control governing both the copy-link and the
   stage caption layer. */
.church-site .bx-proj-modes {
  display: inline-flex;
  gap: 4px;
  margin: 0 8px 9px;
  padding: 3px;
  background: var(--bx-wash);
  border-radius: 10px;
}
.church-site .bx-proj-mode {
  appearance: none;
  border: 0;
  padding: 5px 14px;
  border-radius: 7px;
  background: transparent;
  color: var(--bx-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.church-site .bx-proj-mode.is-active {
  background: var(--bx-card);
  color: var(--bx-ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.church-site .bx-proj-copy {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px 4px;
  padding: 9px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 10px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.church-site .bx-proj-copy:hover { filter: brightness(0.97); }
.church-site .bx-proj-copy.is-live {
  border-color: #bfe3dc;
  background: var(--bx-live-wash);
  color: var(--bx-live);
}
.church-site .bx-proj-copy.is-live svg { color: var(--bx-live); }

@media (max-width: 720px) {
  .church-site .bx-project-pop { right: auto; left: 0; }
}

/* ========================================================================
   BOOTH v2.2 — live translation panel beside the transcript.
   Each active language as a badge + what it is being translated to now.
   ===================================================================== */

.church-site .bx-hide { display: none; }

.church-site .bx-langlive { display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-langcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: var(--bx-card);
}
.church-site .bx-langbadge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  border: 1px solid var(--bx-blue-soft);
}
.church-site .bx-langtext {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bx-ink);
}
.church-site .bx-langcard--waiting { background: var(--bx-wash); }
.church-site .bx-langcard--waiting .bx-langbadge {
  background: var(--bx-card);
  color: var(--bx-muted);
  border-color: var(--bx-rule);
}
.church-site .bx-langcard--waiting .bx-langtext { color: var(--bx-muted); font-style: italic; }

/* Requests card carries its own rendered heading — no card-head needed. */
.church-site .bx-requests-card:has(.bx-requests:empty) { display: none; }

/* ========================================================================
   BOOTH v2.3 — the transcript header IS the language switcher.
   Pills = active languages; blinking pill = a listener request; "+" adds one.
   Clicking a pill swaps the feed to that language's running translation.
   ===================================================================== */

.church-site .bx-transcript { gap: 0; }
.church-site .bx-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-pills-list { display: contents; }

.church-site .bx-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.church-site .bx-pill:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-pill.active {
  background: var(--bx-ink);
  border-color: var(--bx-ink);
  color: #ffffff;
}

.church-site .bx-pill--request {
  border-color: #f0c8a8;
  background: var(--bx-warn-wash);
  color: var(--bx-warn);
  animation: bx-pill-blink 1.2s ease-in-out infinite;
}
.church-site .bx-pill--request:hover { background: #fbe7c8; color: var(--bx-warn); }
.church-site .bx-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes bx-pill-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .church-site .bx-pill--request { animation: none; } }

.church-site .bx-request-bell {
  position: relative;
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: #ffffff;
  color: var(--bx-soft);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.church-site .bx-request-bell.has-requests {
  border-color: #f0b3b3;
  background: #fff1f1;
  color: #b91c1c;
  animation: bx-request-ring 1.1s ease-in-out infinite;
}

.church-site .bx-request-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.church-site .bx-request-badge[hidden] { display: none; }

@keyframes bx-request-ring {
  0%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.22); }
  30% { transform: rotate(-8deg); box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.08); }
  60% { transform: rotate(8deg); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .church-site .bx-request-bell.has-requests { animation: none; }
}

.church-site .bx-pill--add {
  position: relative;
  overflow: hidden;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 700;
  border-style: dashed;
  color: var(--bx-muted);
}
.church-site .bx-pill--add:hover {
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  border-color: var(--bx-blue-soft);
}
.church-site .bx-pill--add select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

/* Flag emoji prefix on a language badge — makes the language recognisable at a glance. */
.church-site .bx-pill-flag { font-size: 14px; line-height: 1; margin-right: 1px; }

/* Per-language listener count, sitting on the right edge of a language badge. */
.church-site .bx-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--bx-wash);
  color: var(--bx-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.church-site .bx-pill-count.is-active { background: rgba(34, 161, 110, 0.14); color: #1f9d63; }
/* Legible on the dark active pill. */
.church-site .bx-pill.active .bx-pill-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Tap-to-switch engine badge inside a language pill. "G" = Gemini, "AI" = OpenAI. */
.church-site .bx-pill-engine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.church-site .bx-pill-engine:hover { filter: brightness(1.06); transform: translateY(-0.5px); }
.church-site .bx-engine-openai { background: rgba(16, 163, 127, 0.16); color: #0e8c6d; }      /* OpenAI green */
.church-site .bx-engine-gemini { background: rgba(66, 109, 244, 0.16); color: #3b62d6; }       /* Gemini blue */
/* Keep legible on the dark active pill. */
.church-site .bx-pill.active .bx-engine-openai { background: rgba(255, 255, 255, 0.22); color: #d7fff0; }
.church-site .bx-pill.active .bx-engine-gemini { background: rgba(255, 255, 255, 0.22); color: #dce6ff; }

/* The × that removes a language from the service — subtle until hovered. */
.church-site .bx-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  margin-right: -4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--bx-muted);
  opacity: 0.5;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.church-site .bx-pill-remove:hover { opacity: 1; background: rgba(192, 57, 43, 0.12); color: #c0392b; }
.church-site .bx-pill.active .bx-pill-remove { color: rgba(255, 255, 255, 0.7); }
.church-site .bx-pill.active .bx-pill-remove:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Far-right headline: total people listening across every language. */
.church-site .bx-listener-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.church-site .bx-listener-total.is-active {
  border-color: rgba(34, 161, 110, 0.32);
  background: rgba(34, 161, 110, 0.08);
  color: #1f9d63;
}
.church-site .bx-listener-total-icon { font-size: 13px; line-height: 1; }

.church-site .bx-feed--tall { max-height: min(58vh, 560px); }

/* ========================================================================
   BOOTH v2.4 — live-audio probe (green dot) + booth monitor (speaker).
   A pulsing green dot on a pill = that language is actively casting voice.
   The speaker button monitors the selected language's translated audio.
   ===================================================================== */

.church-site .bx-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-transcript-head .bx-pills {
  flex: 1;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Green "casting live audio" dot on an active-language pill. */
.church-site .bx-pill-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: bx-live-pulse 1.6s ease-out infinite;
}
.church-site .bx-pill.active .bx-pill-live { background: #4ade80; }
@keyframes bx-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .church-site .bx-pill-live { animation: none; } }

/* Speaker / monitor button — listen to the selected language on the booth. */
.church-site .bx-monitor {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.church-site .bx-monitor:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-monitor.is-listening {
  background: var(--bx-live-wash);
  border-color: #bfe3dc;
  color: var(--bx-live);
}
.church-site .bx-monitor.is-listening svg { animation: bx-monitor-pulse 1.2s ease-in-out infinite; }
@keyframes bx-monitor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .church-site .bx-monitor.is-listening svg { animation: none; } }

/* ========================================================================
   BOOTH v2.6 — confidence (always-on health strip) + audio preflight.
   The cockpit is never silent: audio in · AI voice/relay · languages ·
   listeners · last-caption age · budget. Per-chip state colours reuse the
   live/warn/danger tokens; "good" = teal, "warn" = amber, "bad" = red.
   ===================================================================== */

/* "Check audio" button — quiet companion to the red mic button. */
.church-site .bx-checkaudio {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 11px;
  background: var(--bx-card);
  color: var(--bx-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.church-site .bx-checkaudio:hover { background: var(--bx-blue-wash); color: var(--bx-blue); border-color: var(--bx-blue-soft); }
.church-site .bx-checkaudio svg { flex-shrink: 0; }
@media (max-width: 560px) { .church-site .bx-checkaudio span { display: none; } .church-site .bx-checkaudio { padding: 0 11px; } }

.church-site .bx-pause-input {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #f0c8a8;
  border-radius: 11px;
  background: var(--bx-warn-wash);
  color: var(--bx-warn);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.church-site .bx-pause-input:hover { background: rgba(245, 158, 11, 0.18); }
.church-site .bx-pause-input.is-paused {
  border-color: #bfe3dc;
  background: var(--bx-live-wash);
  color: var(--bx-live);
}
.church-site .bx-pause-input svg { flex-shrink: 0; }
.church-site .bx-pause-input[hidden] { display: none; }

.church-site .bx-live-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  min-width: 158px;
  padding: 0 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 11px;
  background: var(--bx-card);
  color: var(--bx-soft);
  flex-shrink: 0;
}
.church-site .bx-live-meter[hidden] { display: none; }
.church-site .bx-live-meter-label {
  min-width: 72px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-live-meter.is-paused .bx-live-meter-label { color: var(--bx-warn); }
.church-site .bx-live-meter-track {
  width: 62px;
  height: 9px;
  border-radius: 999px;
  background: var(--bx-wash);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-live-meter-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--bx-live);
  transition: width 0.09s linear;
}
.church-site .bx-live-meter-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-live-meter-fill[data-state="bad"] { background: var(--bx-danger); }
.church-site .bx-live-meter-fill[data-state="paused"] { background: var(--bx-warn); }
@media (max-width: 760px) {
  .church-site .bx-live-meter { min-width: 104px; padding: 0 10px; }
  .church-site .bx-live-meter-label { display: none; }
}
@media (max-width: 560px) {
  .church-site .bx-pause-input span { display: none; }
  .church-site .bx-pause-input { padding: 0 11px; }
}

/* Always-on confidence strip. */
.church-site .bx-confidence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding: 2px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bx-rule-soft);
}
.church-site .bx-confidence[hidden] { display: none; }

.church-site .bx-conf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-card);
  min-height: 32px;
}
.church-site .bx-conf-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.church-site .bx-conf-text b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bx-muted); }
.church-site .bx-conf-text i { font-size: 13px; font-weight: 600; font-style: normal; color: var(--bx-ink); }

.church-site .bx-conf-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bx-muted); flex-shrink: 0;
}

/* VU meter inside the audio chip. */
.church-site .bx-conf-vu {
  width: 40px; height: 8px; border-radius: 4px; background: var(--bx-wash);
  overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-conf-vu-fill {
  display: block; height: 100%; width: 0%; border-radius: 4px; background: var(--bx-live);
  transition: width 0.09s linear;
}
.church-site .bx-conf-vu-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-conf-vu-fill[data-state="bad"] { background: var(--bx-danger); }

/* Per-state chip tints — light washes, never opaque blocks. */
.church-site .bx-conf-chip[data-state="good"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-conf-chip[data-state="good"] .bx-conf-dot { background: var(--bx-live); }
.church-site .bx-conf-chip[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f0c8a8; }
.church-site .bx-conf-chip[data-state="warn"] .bx-conf-dot { background: var(--bx-warn); }
.church-site .bx-conf-chip[data-state="warn"] .bx-conf-text i { color: var(--bx-warn); }
.church-site .bx-conf-chip[data-state="bad"] { background: #fdecea; border-color: #f3b9b2; }
.church-site .bx-conf-chip[data-state="bad"] .bx-conf-dot { background: var(--bx-danger); animation: bx-pill-blink 1.1s ease-in-out infinite; }
.church-site .bx-conf-chip[data-state="bad"] .bx-conf-text i { color: var(--bx-danger); }
@media (prefers-reduced-motion: reduce) { .church-site .bx-conf-chip[data-state="bad"] .bx-conf-dot { animation: none; } }

/* Alert banner — prominent warn/critical/stopped/relay-down notice above the
   live page. Shared by the budget banner and the relay/fallback alert. */
.church-site .bx-alert-banner {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 13px;
  border: 1px solid #f0c8a8;
  background: var(--bx-warn-wash);
}
.church-site .bx-alert-banner[hidden] { display: none; }
.church-site .bx-alert-banner strong { font-size: 14px; font-weight: 700; color: var(--bx-warn); }
.church-site .bx-alert-banner span { font-size: 13px; line-height: 1.45; color: var(--bx-soft); }
.church-site .bx-alert-banner[data-state="bad"],
.church-site .bx-alert-banner[data-state="critical"],
.church-site .bx-alert-banner[data-state="stopped"] {
  border-color: #f3b9b2;
  background: #fdecea;
}
.church-site .bx-alert-banner[data-state="bad"] strong,
.church-site .bx-alert-banner[data-state="critical"] strong,
.church-site .bx-alert-banner[data-state="stopped"] strong { color: var(--bx-danger); }

/* Audio preflight modal — light frosted glass, never a dark scrim. */
.church-site .bx-preflight {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(244, 245, 241, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.church-site .bx-preflight[hidden] { display: none; }
.church-site .bx-preflight-card {
  width: min(440px, 100%);
  background: var(--bx-card);
  border: 1px solid var(--bx-rule);
  border-radius: 18px;
  box-shadow: var(--bx-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.church-site .bx-preflight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.church-site .bx-preflight-head .bx-card-title { display: block; font-size: 17px; }
.church-site .bx-preflight-head .bx-card-hint { display: block; margin-top: 3px; text-align: left; }
.church-site .bx-preflight-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--bx-muted); padding: 4px;
}
.church-site .bx-preflight-x:hover { color: var(--bx-ink); }

.church-site .bx-preflight-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 13px;
  font-size: 15.5px;
  font-weight: 700;
  background: var(--bx-wash);
  color: var(--bx-soft);
}
.church-site .bx-preflight-verdict::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.85;
}
.church-site .bx-preflight-verdict[data-state="good"] { background: var(--bx-live-wash); color: var(--bx-live); }
.church-site .bx-preflight-verdict[data-state="warn"] { background: var(--bx-warn-wash); color: var(--bx-warn); }
.church-site .bx-preflight-verdict[data-state="bad"] { background: #fdecea; color: var(--bx-danger); }

.church-site .bx-preflight-meter { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-preflight-meter-label,
.church-site .bx-preflight-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bx-muted); }
.church-site .bx-preflight-track {
  height: 14px; border-radius: 7px; background: var(--bx-wash);
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--bx-rule-soft);
}
.church-site .bx-preflight-fill {
  height: 100%; width: 0%; border-radius: 7px; background: var(--bx-live);
  transition: width 0.08s linear;
}
.church-site .bx-preflight-fill[data-state="warn"] { background: var(--bx-warn); }
.church-site .bx-preflight-fill[data-state="bad"] { background: var(--bx-danger); }

.church-site .bx-preflight-preview { display: flex; flex-direction: column; gap: 6px; }
.church-site .bx-preflight-transcript {
  margin: 0;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bx-wash);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bx-ink);
}
.church-site .bx-preflight-transcript.is-empty { color: var(--bx-muted); font-style: italic; }
.church-site .bx-preflight-transcript.is-empty::before { content: "Say a few words — they'll appear here…"; }
.church-site .bx-preflight-transcript.is-empty:not(:empty)::before { content: none; }
.church-site .bx-preflight-actions { display: flex; justify-content: flex-end; }
.church-site .bx-preflight-actions .bx-primary { min-height: 42px; padding: 0 22px; }

body.bx-modal-open { overflow: hidden; }

/* ========================================================================
   BOOTH v2.5 — Bible page: transcript | four-verse picker + live screen.
   ===================================================================== */

.church-site .bx-bible-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.church-site .bx-bible-pick { display: flex; flex-direction: column; gap: 14px; }

.church-site .bx-verse-manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: var(--bx-wash);
}
.church-site .bx-ref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}
.church-site .bx-ref-row .bx-secondary,
.church-site .bx-ref-row .bx-primary {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 14px;
  white-space: nowrap;
}
.church-site .bx-verse-manual-preview {
  padding: 10px 12px;
  border: 1px solid var(--bx-blue-soft);
  border-radius: 11px;
  background: #ffffff;
}
.church-site .bx-verse-manual-preview[data-state="error"] {
  border-color: #f3b9b2;
  background: #fdecea;
}
.church-site .bx-verse-manual-preview[data-state="warn"] {
  border-color: #f0c8a8;
  background: var(--bx-warn-wash);
}
.church-site .bx-manual-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.church-site .bx-manual-preview-head strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  color: var(--bx-ink);
}
.church-site .bx-manual-preview-head span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bx-muted);
  text-align: right;
}
.church-site .bx-verse-manual-preview p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bx-soft);
}

/* Four verse boxes — a 2×2 grid you click to put a verse on screen. */
.church-site .bx-vboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.church-site .bx-vbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: var(--bx-card);
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.church-site .bx-vbox:hover {
  border-color: var(--bx-blue-soft);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.church-site .bx-vbox:focus-visible { outline: 2px solid var(--bx-blue); outline-offset: 2px; }
.church-site .bx-vbox.is-live {
  border-color: var(--bx-live);
  background: var(--bx-live-wash);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.16);
}
.church-site .bx-vbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.church-site .bx-vbox-head strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--bx-ink);
}
.church-site .bx-vbox-conf { font-size: 11px; font-weight: 700; color: var(--bx-muted); }
.church-site .bx-vbox-livetag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--bx-live);
  padding: 2px 7px;
  border-radius: 999px;
}
.church-site .bx-vbox p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bx-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.church-site .bx-vbox-muted { font-style: italic; color: var(--bx-muted); }
.church-site .bx-vbox-nav { display: flex; gap: 6px; margin-top: auto; }
.church-site .bx-vbox-arrow {
  appearance: none;
  flex: 1;
  min-height: 30px;
  border: 1px solid var(--bx-live);
  border-radius: 8px;
  background: var(--bx-card);
  color: var(--bx-live);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.church-site .bx-vbox-arrow:hover { background: var(--bx-live); color: #fff; }
.church-site .bx-vbox-action {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--bx-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.church-site .bx-vbox-action.is-live {
  background: var(--bx-live);
  color: #fff;
}

/* Live screen — the real projected overlay, embedded so you watch it update. */
.church-site .bx-bible-live {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.church-site .bx-bible-liveframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--bx-rule);
  border-radius: 12px;
  background: #0b1120;
}

@media (max-width: 900px) {
  .church-site .bx-bible-split { grid-template-columns: 1fr; }
  .church-site .bx-vboxes { grid-template-columns: 1fr; }
  .church-site .bx-ref-row,
  .church-site .bx-live-manual { grid-template-columns: 1fr; }
  .church-site .bx-ref-row .bx-secondary,
  .church-site .bx-ref-row .bx-primary,
  .church-site .bx-live-manual .bx-secondary { width: 100%; }
}

/* ========================================================================
   PROJECTOR OVERLAY — bottom-right join QR (toggled from the booth).
   Not scoped to .church-site: this renders on live-overlay.html.
   ===================================================================== */

.overlay-join {
  position: fixed;
  right: 4vmin;
  bottom: 4vmin;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.overlay-join[hidden] { display: none; }
.overlay-join-qr { width: 132px; height: 132px; display: block; border-radius: 8px; }
.overlay-join-meta { display: flex; flex-direction: column; gap: 6px; }
.overlay-join-meta span { font-size: 18px; font-weight: 600; color: #475569; }
.overlay-join-meta strong {
  font-family: Georgia, "Source Serif Pro", serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #0f172a;
  line-height: 1;
}
/* In the booth's small preview iframe, scale the join card down a touch. */
.preview .overlay-join { right: 2vmin; bottom: 2vmin; gap: 12px; padding: 12px 14px; }
.preview .overlay-join-qr { width: 84px; height: 84px; }
.preview .overlay-join-meta span { font-size: 12px; }
.preview .overlay-join-meta strong { font-size: 24px; }

/* ========================================================================
   BOOTH v2.6 — full-height app shell. The live page fills the viewport and
   never scrolls the page; only the transcript feed scrolls inside its card.
   ===================================================================== */

.church-site .phone-app {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 0 14px;
}
.church-site .phone-top { flex-shrink: 0; padding: 2px 4px 10px; }

/* The active screen fills the shell. Login scrolls if a short window clips it. */
.church-site .phone-screen.active { flex: 1; min-height: 0; }
.church-site #churchLoginScreen.active { overflow-y: auto; }

.church-site #hostScreen.active {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 10px;
}

/* Live page fills + never scrolls. Setup scrolls inside. */
.church-site .bx-panel[data-host-panel="service"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.church-site .bx-panel[data-host-panel="setup"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Settings: a fixed category sidebar + a scrolling content column. */
.church-site .bx-setup { flex: 1; min-height: 0; display: flex; gap: 16px; }
.church-site .bx-setup-nav {
  flex-shrink: 0;
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  border-right: 1px solid var(--bx-rule);
  padding-right: 10px;
}
.church-site .bx-setup-tab {
  appearance: none;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-soft);
  cursor: pointer;
}
.church-site .bx-setup-tab:hover { background: var(--bx-wash); color: var(--bx-ink); }
.church-site .bx-setup-tab.active { background: var(--bx-blue-wash); color: var(--bx-blue); }
.church-site .bx-setup-content {
  flex: 1;
  width: min(100%, 1120px);
  max-width: 1120px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}
.church-site .bx-setup-pane { display: none; flex-direction: column; gap: 14px; }
.church-site .bx-setup-pane.active { display: flex; }
.church-site .bx-setup-content .bx-setup-actions { margin-top: 2px; }
.church-site .bx-setup-summary {
  width: 100%;
  gap: 16px;
  padding: 20px 22px;
}
.church-site .bx-setup-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.church-site .bx-setup-summary-head > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.church-site .bx-setup-summary-head strong {
  font-size: 21px;
  line-height: 1.18;
  font-weight: 750;
  color: var(--bx-ink);
}
.church-site .bx-setup-summary-head small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bx-soft);
}
.church-site .bx-setup-summary-code {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.church-site .bx-setup-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--bx-rule-soft);
}
.church-site .bx-setup-summary-grid article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.church-site .bx-setup-summary-grid article span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-setup-summary-grid article strong {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--bx-soft);
  overflow-wrap: anywhere;
}
.church-site .bx-setup-summary-grid article[data-state="live"] strong { color: var(--bx-live); }
.church-site .bx-setup-summary-grid article[data-state="warn"] strong { color: var(--bx-warn); }
.church-site .bx-preflight-card { gap: 14px; }
.church-site .bx-preflight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.church-site .bx-preflight-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.church-site .bx-preflight-head strong {
  min-width: 0;
  font-size: 17px;
  font-weight: 750;
  color: var(--bx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.church-site .bx-preflight-code {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bx-blue-soft);
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.church-site .bx-preflight-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.church-site .bx-preflight-grid article {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--bx-rule);
  background: var(--bx-wash);
}
.church-site .bx-preflight-grid article[data-state="live"] { background: var(--bx-live-wash); border-color: #bfe3dc; }
.church-site .bx-preflight-grid article[data-state="warn"] { background: var(--bx-warn-wash); border-color: #f4d7ae; }
.church-site .bx-preflight-grid article span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bx-muted);
}
.church-site .bx-preflight-grid article strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--bx-ink);
}
.church-site .bx-upcoming {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.church-site .bx-upcoming-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--bx-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.church-site .bx-upcoming-list {
  display: grid;
  gap: 8px;
}
.church-site .bx-upcoming-row {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bx-rule);
  border-radius: 8px;
  background: var(--bx-card);
  color: var(--bx-ink);
  text-align: left;
  cursor: pointer;
}
.church-site .bx-upcoming-row:hover,
.church-site .bx-upcoming-row.is-active {
  border-color: var(--bx-blue-soft);
  background: var(--bx-blue-wash);
}
.church-site .bx-upcoming-row strong {
  grid-row: span 2;
  align-self: center;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.church-site .bx-upcoming-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.church-site .bx-upcoming-row small {
  min-width: 0;
  color: var(--bx-muted);
}

/* The two live panels stretch to the full height of the page. */
.church-site .bx-bible-split {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.church-site .bx-bible-split > .bx-card { min-height: 0; max-height: 100%; }

/* Left: transcript card — header fixed, feed flexes + scrolls. */
.church-site .bx-transcript { overflow: hidden; }
.church-site .bx-transcript-head { flex-shrink: 0; }
.church-site .bx-transcript .bx-feed--tall { flex: 1; min-height: 0; max-height: none; }

/* Right: the live screen stays a fixed 16:9 pinned at the bottom; the verse
   boxes take the space above and scroll if there are ever too many. */
.church-site .bx-bible-pick { overflow: hidden; }
.church-site .bx-bible-pick .bx-card-head { flex-shrink: 0; }
.church-site .bx-bible-pick .bx-vboxes {
  flex: 0 0 auto;
  min-height: 118px;
  max-height: 230px;
  overflow-y: auto;
  align-content: start;
}
.church-site .bx-bible-live { flex-shrink: 0; }
.church-site .bx-bible-liveframe { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; }

/* ---- Stage designer ----------------------------------------------------- */
.church-site .bx-panel[data-host-panel="stage"].active {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.church-site .bx-stage-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.church-site .bx-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.church-site .bx-stage-head .bx-card-title { display: block; font-size: 17px; }
.church-site .bx-stage-head .bx-card-hint { display: block; text-align: left; margin-top: 3px; max-width: 64ch; }
.church-site .bx-stage-body {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr); gap: 18px;
}

/* Left: the live 16:9 preview of the real stage. */
.church-site .bx-stage-preview-wrap { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.church-site .bx-stage-canvas {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #05070d; box-shadow: inset 0 0 0 1px var(--bx-rule), 0 12px 40px rgba(15, 23, 42, 0.18);
}
.church-site .bx-stage-canvas iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* Right: a scrolling rail of control cards. */
.church-site .bx-stage-controls { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.church-site .bx-stage-controls .bx-card { gap: 10px; }
.church-site .bx-stage-controls input[type="color"] {
  width: 100%; height: 38px; padding: 2px; border: 1px solid var(--bx-rule);
  border-radius: 10px; background: var(--bx-card); cursor: pointer;
}
.church-site .bx-field-label { font-size: 12px; font-weight: 600; color: var(--bx-soft); }

.church-site .bx-stage-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.church-site .bx-stage-template {
  appearance: none; text-align: left; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--bx-rule); background: var(--bx-card); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.church-site .bx-stage-template strong { font-size: 13px; color: var(--bx-ink); }
.church-site .bx-stage-template small { font-size: 11px; color: var(--bx-soft); }
.church-site .bx-stage-template:hover { background: var(--bx-wash); }
.church-site .bx-stage-template.is-active { border-color: var(--bx-blue); background: var(--bx-blue-wash); }

.church-site .bx-stage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.church-site .bx-stage-chip {
  appearance: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bx-rule);
  background: var(--bx-card); color: var(--bx-soft); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.church-site .bx-stage-chip:hover { background: var(--bx-wash); }
.church-site .bx-stage-chip.is-on { border-color: var(--bx-blue); background: var(--bx-blue-wash); color: var(--bx-blue); }

.church-site .bx-anchor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 132px; }
.church-site .bx-anchor-dot {
  appearance: none; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--bx-rule);
  background: var(--bx-wash); cursor: pointer; position: relative;
}
.church-site .bx-anchor-dot::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--bx-muted); }
.church-site .bx-anchor-dot:hover { background: var(--bx-blue-wash); }
.church-site .bx-anchor-dot.is-on { border-color: var(--bx-blue); background: var(--bx-blue-wash); }
.church-site .bx-anchor-dot.is-on::after { background: var(--bx-blue); }

/* On-screen: two co-equal choices (translation / Bible verse). */
.church-site .bx-check--lead { font-weight: 700; color: var(--bx-ink); font-size: 14.5px; }
.church-site .bx-stage-suboptions { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 28px; }
.church-site .bx-soft-rule { border: 0; border-top: 1px solid var(--bx-rule); margin: 12px 0 4px; }
/* Reveal-style segmented control (reuses .bx-proj-mode) with a small sub-label. */
.church-site .bx-reveal-modes { margin: 0; align-self: flex-start; }
.church-site .bx-reveal-modes .bx-proj-mode { display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 6px 14px; }
.church-site .bx-reveal-modes .bx-proj-mode small { font-size: 9.5px; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }

/* Phones: relax the shell so two stacked panels aren't crushed into one screen. */
@media (max-width: 900px) {
  .church-site .phone-app { height: auto; min-height: 100dvh; overflow: visible; }
  .church-site #hostScreen.active { overflow: visible; }
  .church-site .bx-panel[data-host-panel="stage"].active { overflow-y: auto; }
  .church-site .bx-stage-body { grid-template-columns: 1fr; }
  .church-site .bx-panel[data-host-panel="service"].active { overflow: visible; }
  .church-site .bx-transcript .bx-feed--tall { max-height: min(58vh, 560px); flex: none; }
  .church-site .bx-bible-liveframe { aspect-ratio: 16 / 9; height: auto; flex: none; }
  .church-site .bx-panel[data-host-panel="setup"].active { overflow-y: auto; }
  .church-site .bx-setup { flex-direction: column; }
  .church-site .bx-setup-nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--bx-rule); padding-right: 0; padding-bottom: 10px; }
  .church-site .bx-preflight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .church-site .bx-overlay-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================================================
   BOOTH v3 — beta-church trust pass.
   A simpler operator flow: login is one calm card, live mode is a checklist
   plus translation-first console, and Bible tools read as secondary.
   ===================================================================== */

.church-site {
  --bx-canvas: #f4f6f8;
  --bx-card: #ffffff;
  --bx-rule: rgba(26, 38, 57, 0.11);
  --bx-rule-soft: rgba(26, 38, 57, 0.07);
  --bx-ink: #111827;
  --bx-soft: #526075;
  --bx-muted: #8a97aa;
  --bx-wash: #f7f9fc;
  --bx-blue: #2f5f9f;
  --bx-blue-soft: #d6e4f5;
  --bx-blue-wash: #edf4fc;
  --bx-live: #0d7a5f;
  --bx-live-wash: #e8f6f1;
  --bx-warn: #a76506;
  --bx-warn-wash: #fff5e6;
  --bx-danger: #b42318;
  --bx-radius: 14px;
  --bx-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 14px 36px rgba(17, 24, 39, 0.06);
}

body.church-site {
  background: var(--bx-canvas);
}

.church-site .phone-app {
  width: min(1480px, calc(100% - 48px));
  padding: 16px 0 20px;
}

.church-site .phone-top {
  align-items: center;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--bx-rule-soft);
  margin-bottom: 14px;
}

.church-site .phone-brand {
  font-size: 25px;
  line-height: 1.05;
}

.church-site .phone-status {
  font-size: 13px;
  color: var(--bx-muted);
}

/* Login */
.church-site #churchLoginScreen.active {
  max-width: 380px;
  gap: 14px;
  padding: clamp(18px, 4vh, 52px) 0 28px;
  justify-content: center;
}

.church-site #churchLoginScreen .church-entry {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.church-site .auth-eyebrow {
  display: none;
}

.church-site .church-entry h1 {
  margin: 0;
  font-family: inherit;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

.church-site .church-entry p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bx-soft);
  text-align: center;
}

.church-site .auth-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.church-site .auth-tab {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  background: transparent;
}

.church-site .auth-tab.is-active {
  background: var(--bx-ink);
  color: #ffffff;
  box-shadow: none;
}

.church-site .auth-tab[data-auth-mode="demo"] {
  color: var(--bx-muted);
}

.church-site .auth-guidance {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--bx-soft);
  text-align: center;
}

.church-site .join-card {
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
}

.church-site #churchLoginForm .phone-field {
  gap: 7px;
  font-size: 12px;
}

.church-site #churchLoginForm .phone-field input {
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
}

.church-site #churchLoginForm .phone-primary,
.church-site #churchLoginForm .phone-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 12px;
}

.church-site #churchLoginForm .phone-primary {
  flex: 0 0 auto;
  align-self: center;
  min-width: 132px;
  padding: 0 22px;
  background: var(--bx-ink);
}

.church-site #churchLoginForm .google-login {
  gap: 10px;
  color: var(--bx-ink);
  font-weight: 700;
}

.church-site #churchLoginForm .auth-only,
.church-site #churchLoginForm .demo-only {
  display: none;
}

.church-site #churchLoginScreen[data-auth-current="signin"] #churchLoginForm [data-auth-pane~="signin"],
.church-site #churchLoginScreen[data-auth-current="signup"] #churchLoginForm [data-auth-pane~="signup"],
.church-site #churchLoginScreen[data-auth-current="demo"] #churchLoginForm [data-auth-pane~="demo"] {
  display: flex;
}

.church-site #churchLoginScreen[data-auth-current="signin"] #churchLoginForm .auth-divider,
.church-site #churchLoginScreen[data-auth-current="signup"] #churchLoginForm .auth-divider {
  display: flex;
}

.church-site .google-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.church-site .auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bx-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.church-site .auth-divider::before,
.church-site .auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--bx-rule-soft);
}

.church-site #churchLoginScreen .billing-banner {
  display: none;
}

/* Header controls */
.church-site .bx-live-controls {
  gap: 10px;
}

.church-site .bx-live-controls[hidden],
.church-site:not([data-church-auth="signed-in"]) .bx-live-controls,
.church-site:not([data-church-auth="signed-in"]) .top-actions {
  display: none !important;
}

.church-site .top-actions a.phone-small.bx-iconbtn,
.church-site .bx-live-controls > a.phone-small.bx-iconbtn {
  display: none;
}

.church-site .bx-session-create,
.church-site .bx-code-chip,
.church-site .bx-checkaudio,
.church-site .bx-pause-input,
.church-site .bx-iconbtn,
.church-site .top-actions .phone-small.bx-iconbtn {
  min-height: 42px;
  border-radius: 12px;
}

.church-site .bx-session-create {
  background: var(--bx-blue);
}

.church-site .bx-session-create:hover {
  background: #244d82;
}

.church-site .bx-checkaudio {
  background: #ffffff;
}

.church-site .bx-checkaudio--setup {
  align-self: flex-start;
  width: auto;
}

.church-site .bx-mic {
  min-height: 42px;
  border-radius: 12px;
  background: var(--bx-live);
  box-shadow: 0 8px 18px rgba(13, 122, 95, 0.16);
}

.church-site .bx-mic:hover {
  background: #09694f;
}

.church-site .bx-mic.is-recording {
  background: var(--bx-danger);
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}

.church-site .bx-mic.is-recording:hover {
  background: #991f16;
}

/* Live checklist */
.church-site .bx-runway {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.church-site .bx-runway-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--bx-rule);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.church-site .bx-runway-step b {
  grid-row: span 2;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bx-blue-wash);
  color: var(--bx-blue);
  font-size: 12px;
}

.church-site .bx-runway-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--bx-ink);
}

.church-site .bx-runway-step small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bx-muted);
  font-size: 11px;
  font-weight: 650;
}

/* Service state is a compact rail, not a stack of dashboard cards. */
.church-site .bx-status {
  display: none;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.church-site .bx-status article {
  min-width: 0;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 13px;
  box-shadow: none;
}

.church-site .bx-status span {
  font-size: 10px;
  letter-spacing: 0.09em;
}

.church-site .bx-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.church-site .bx-pinned {
  margin-bottom: 8px;
}

.church-site .bx-pinned:empty {
  display: none;
}

.church-site .pinned-langs {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.church-site .pinned-langs header {
  flex: 1;
  min-width: 0;
}

.church-site .pinned-langs .pinned-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.church-site .pinned-langs .pinned-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.church-site .bx-confidence {
  display: none;
}

.church-site .bx-conf-chip {
  min-height: 34px;
  padding: 6px 11px;
  box-shadow: none;
}

/* Translation first, Bible second. */
.church-site .bx-bible-split {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.78fr);
  gap: 18px;
}

.church-site .bx-card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.church-site .bx-transcript {
  padding: 18px 18px 14px;
}

.church-site .bx-transcript-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.church-site .bx-pill {
  min-height: 38px;
  padding: 7px 14px;
}

.church-site .bx-pill.active {
  background: var(--bx-ink);
}

.church-site .bx-feed {
  background: #fbfcfe;
  border: 1px solid var(--bx-rule-soft);
  border-radius: 14px;
  padding: 8px 14px;
}

.church-site .bx-feed:has(.phone-empty) {
  overflow: hidden;
}

.church-site .bx-transcript .phone-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--bx-muted);
  font-size: 15px;
}

.church-site .bx-live-manual {
  padding-top: 10px;
  margin-top: 10px;
}

.church-site .bx-bible-pick {
  background: #fbfcfe;
  gap: 12px;
}

.church-site .bx-bible-pick .bx-card-head {
  padding-bottom: 2px;
}

.church-site .bx-bible-pick .bx-quiet--danger {
  color: #9f2f24;
}

.church-site .bx-verse-manual {
  background: #ffffff;
}

.church-site .bx-bible-pick .phone-empty {
  background: #ffffff;
  border: 1px dashed var(--bx-rule);
}

.church-site .overlay-preview-head {
  align-items: center;
}

.church-site .overlay-preview-head strong {
  font-size: 12.5px;
}

.church-site .overlay-preview-head span {
  font-size: 11.5px;
}

.church-site .bx-bible-liveframe {
  border-radius: 14px;
  border-color: rgba(17, 24, 39, 0.16);
  background: #101820;
}

/* The booth preview should look finished, not like a transparency debug grid. */
.overlay-body.preview {
  background: #101820;
}

.overlay-body.preview .caption-overlay.is-waiting {
  opacity: 1;
}

.overlay-body.preview .caption-overlay.is-waiting .caption-overlay-meta {
  opacity: 0.58;
}

.overlay-body.preview .caption-overlay.is-waiting .caption-overlay-text {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1100px) {
  .church-site .phone-app {
    width: min(100% - 28px, 900px);
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .church-site .phone-top {
    align-items: stretch;
    gap: 12px;
    flex-direction: column;
  }

  .church-site .top-actions {
    width: 100%;
  }

  .church-site .bx-live-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    width: 100%;
    justify-content: stretch;
    align-items: stretch;
  }

  .church-site .bx-session {
    grid-column: 1 / -1;
    width: 100%;
  }

  .church-site .bx-session > .bx-code-chip,
  .church-site .bx-session > .bx-session-create,
  .church-site .bx-session > .bx-session-plan,
  .church-site .bx-checkaudio,
  .church-site .bx-mic {
    width: 100%;
  }

  .church-site .bx-iconbtn,
  .church-site .top-actions .phone-small.bx-iconbtn {
    width: 46px;
    min-width: 46px;
  }

  .church-site .bx-runway,
  .church-site .bx-status,
  .church-site .bx-bible-split {
    grid-template-columns: 1fr;
  }

  .church-site .bx-runway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .church-site .phone-app {
    width: min(100% - 20px, 460px);
    padding-top: 10px;
  }

  .church-site .phone-top {
    border-bottom: 0;
    margin-bottom: 6px;
  }

  .church-site .phone-brand {
    font-size: 22px;
  }

  .church-site .auth-tabs {
    grid-template-columns: 1fr;
  }

  .church-site .bx-runway {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .church-site .bx-runway-step {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 8px 4px;
  }

  .church-site .bx-runway-step b {
    grid-row: auto;
    width: 22px;
    height: 22px;
  }

  .church-site .bx-runway-step span {
    white-space: normal;
    text-align: center;
    font-size: 11px;
    line-height: 1.15;
  }

  .church-site .bx-runway-step small {
    display: none;
  }

  .church-site .join-card {
    padding: 16px;
  }
}

@media (max-width: 760px) {
  .church-site .bx-demo-source-grid,
  .lv-demo-row {
    grid-template-columns: 1fr;
  }
}

/* Anti-compression guardrails -------------------------------------------------
   Booth UI is used under pressure. Critical labels must wrap or stack rather
   than collapse into clipped status boxes. */
.church-site .bx-card,
.church-site .bx-status article,
.church-site .bx-summary article,
.church-site .bx-runway-step,
.church-site .bx-conf-chip,
.church-site .bx-upcoming-row,
.church-site .language-request-card,
.church-site .bx-demo-listener-card,
.church-site .bx-setup-summary-grid article {
  min-width: 0;
}

.church-site .bx-card-head {
  flex-wrap: wrap;
  align-items: flex-start;
}

.church-site .bx-card-head .bx-card-hint {
  text-align: left;
  overflow-wrap: anywhere;
}

.church-site .bx-status,
.church-site .bx-summary,
.church-site .bx-preflight-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.church-site .bx-runway {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.church-site .bx-status strong,
.church-site .bx-summary strong,
.church-site .bx-runway-step span,
.church-site .bx-runway-step small,
.church-site .pinned-langs .pinned-meta,
.church-site .bx-preflight-grid article strong,
.church-site .bx-upcoming-row span,
.church-site .bx-upcoming-row small,
.church-site .bx-demo-listener-card small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  overflow-wrap: anywhere;
}

.church-site .bx-upcoming-row {
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 4px 12px;
  min-height: 66px;
}

.church-site .bx-live-controls {
  align-items: stretch;
}

.church-site .bx-session,
.church-site .bx-code-chip,
.church-site .bx-session-create,
.church-site .bx-mic {
  flex-shrink: 0;
}

.church-site .bx-code-chip,
.church-site .bx-session-create {
  min-width: 150px;
}

.church-site .bx-mic {
  min-width: 148px;
}

@media (max-width: 820px) {
  .church-site .bx-setup-summary-head,
  .church-site .bx-account-row,
  .church-site .bx-archive-head,
  .church-site .pinned-langs {
    flex-direction: column;
    align-items: stretch;
  }

  .church-site .bx-setup-summary-code {
    align-self: flex-start;
  }

  .church-site .bx-picker,
  .church-site .bx-manual,
  .church-site .bx-live-manual,
  .church-site .bx-ref-row,
  .church-site .language-request-card {
    grid-template-columns: 1fr;
  }
}