/* The look follows chriskatzer.com: Switzer for text, Zodiak for headings, ink on white,
   burnt orange as the one accent colour. Yellow stays for moon days and the logo's light.
   Both fonts are self-hosted (fonts/), so no font service sees the visitors. */

@font-face { font-family: 'Switzer'; font-weight: 400; font-display: swap; src: url('fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 500; font-display: swap; src: url('fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 600; font-display: swap; src: url('fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-weight: 700 800; font-display: swap; src: url('fonts/switzer-700.woff2') format('woff2'); }
@font-face { font-family: 'Zodiak'; font-weight: 700; font-display: swap; src: url('fonts/zodiak-700.woff2') format('woff2'); }

/* Day theme: white page, light grey panels, white fields. */
:root {
  --bg: #ffffff;
  --surface: #f7f7f7;
  --field: #ffffff;
  --field-border: #cfcfcf;
  --text: #1a1a1a;
  --muted: #5c5c5c;
  --border: #e3e3e3;
  --ink: #1a1a1a;         /* main buttons */
  --ink-text: #ffffff;
  --accent: #b8410f;
  --accent-deep: #93330b;
  --accent-soft: #fbede6;
  --accent-text: #ffffff;
  --danger: #c4262e;
  --live: #d42f2f;
  --holiday: #7b3f8c;
  --moon: #fff1cc;        /* logo yellow, lightened */
  --moon-edge: #f2c15c;
  --sun: #fed27d;         /* the Stagelight logo's yellow */
  --sun-soft: #fff6e0;    /* its light tint, for highlighted boxes */
  --sun-edge: #f0c766;
  --stage: #0d0d0d;
  --radius: 5px;
  --radius-large: 5px;
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-ui: 'Switzer', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* Night theme, chosen with the switch (js/theme.js). */
:root[data-theme="dark"] {
  --bg: #0d0d0d;
  --surface: #171717;
  --field: #101010;
  --field-border: #3d3d3d;
  --text: #f2f2f2;
  --muted: #a6a6a6;
  --border: #2b2b2b;
  --ink: #f2f2f2;
  --ink-text: #111111;
  --accent: #e2673a;
  --accent-deep: #b8410f;
  --accent-soft: #2e1b12;
  --accent-text: #111111;
  --danger: #e5646a;
  --holiday: #d39be0;
  --moon: #3b3424;
  --moon-edge: #c9a24a;
  --sun-soft: #2a2416;
  --sun-edge: #6e5a2a;
  --stage: #000000;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 20px 56px;
}

/* The bar on top of every app page: logo, page name, state and switches. */
.bar {
  display: flex;
  flex-wrap: wrap; /* on phones the badges and buttons move to a second line instead of widening the page */
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(var(--sun), var(--sun)) left bottom / 72px 3px no-repeat; /* the logo's yellow */
}
.bar h1 { margin-right: auto; min-width: 0; }
@media (max-width: 480px) {
  h1 { font-size: 1.45rem; }
}
.stage-picker { width: auto; max-width: 260px; font-weight: 600; }
.brand-mark { height: 34px; width: 34px; display: block; flex: none; border-radius: 5px; }


h1, h2 { font-family: var(--font-display); font-weight: 700; }
h1 { font-size: 1.75rem; line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; line-height: 1.2; margin: 0; letter-spacing: -0.015em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--accent); text-underline-offset: 0.18em; }
::selection { background: var(--sun); color: #1a1a1a; }

[hidden] { display: none !important; }

/* Small orange label over a heading, with a dot in front (as on chriskatzer.com). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px var(--sun-edge); }

/* --- Day/night switch ------------------------------------------------------ */

.theme-switch {
  position: relative;
  flex: none;
  width: 60px;
  height: 32px;
  padding: 0 3px;
  border: 1px solid var(--field-border);
  border-radius: 5px;
  background: var(--field);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1;
}
.theme-switch span { width: 26px; text-align: center; position: relative; z-index: 1; }
.theme-switch[aria-checked="false"] span:first-child, .theme-switch[aria-checked="true"] span:last-child { color: var(--ink-text); }
.theme-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 0.2s ease;
}
.theme-switch[aria-checked="true"]::before { transform: translateX(28px); }
.theme-switch:hover:not(:disabled) { border-color: var(--ink); }

/* --- Panels, fields and buttons --------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 22px;
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.hint { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 24px;
  max-width: 380px;
  display: grid;
  gap: 10px;
}
.card p { margin: 0; }
.card > label:not(.check) { font-size: 0.88rem; font-weight: 600; margin-bottom: -4px; }

.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field > span, .field-label { font-size: 0.88rem; font-weight: 600; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  transition: border-color 0.15s;
}
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
textarea { resize: vertical; }
/* Tick boxes and choice dots keep their own size next to their label. */
input[type="checkbox"], input[type="radio"] { width: auto; flex: none; accent-color: var(--accent); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .button:focus-visible, .button:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Buttons are pills: outlined by default, ink-filled for the main action. */
button, .button {
  display: inline-block;
  text-decoration: none;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid var(--field-border);
  background: var(--field);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.2s, box-shadow 0.2s;
}
button:hover:not(:disabled), .button:hover { border-color: var(--ink); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary, .button.primary { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
button.primary:hover:not(:disabled), .button.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgb(0 0 0 / 0.18); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.big, .button.big { padding: 12px 26px; font-size: 1rem; }
button.link {
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spaced { margin-top: 16px; }
.hint.flush, .flush { margin: 0; }

/* A text link with an arrow and a line under it that fills orange on hover (chriskatzer.com). */
.txt-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 9px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.txt-cta .arr { color: var(--accent); transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1); }
.txt-cta:hover .arr { transform: translate(3px, -3px); }
.txt-cta::after, .txt-cta::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; }
.txt-cta::after { width: 100%; background: currentColor; opacity: 0.16; }
.txt-cta::before { width: 0; background: var(--accent); transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.txt-cta:hover::before { width: 100%; }
.txt-cta.big { font-size: 1.1rem; }

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 11px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.live { background: var(--live); border-color: var(--live); color: #fff; }
.badge.replay { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.live-timer { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.status { color: var(--muted); min-height: 1.5em; margin: 8px 0 0; }
.error { color: var(--danger); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; }
.check input { margin-top: 4px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.watching { color: var(--muted); font-size: 0.9rem; }
.next-class { margin: 0; font-weight: 600; }

/* --- Setup page: section links, more room between areas -------------------- */

.section-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 10px 2px;
  margin-bottom: 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.section-nav a { color: var(--text); font-weight: 600; font-size: 0.94rem; text-decoration: none; transition: color 0.15s; }
.section-nav a:hover { color: var(--accent); }
.section-nav a[target] { margin-left: auto; font-weight: 500; }
.section-nav ~ .panel { margin-bottom: 36px; scroll-margin-top: 64px; }
.section-nav a:hover { box-shadow: inset 0 -3px var(--sun); }

/* Folding sections: settings made once fold away behind their title, with a note on how they stand.
   The round yellow button opens them; a link or the address to one opens it too (openFolds). */
.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.fold > summary::after { grid-column: 3; }
@media (max-width: 560px) {
  /* On phones the note goes under the title, the button stays on the right. */
  .fold > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .fold > summary > .fold-note { grid-column: 1; grid-row: 2; }
  .fold > summary::after { grid-column: 2; grid-row: 1 / span 2; }
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2, .fold > summary h3 { margin: 0; }
.fold > summary { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .fold > summary { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23f2f2f2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fold > summary::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--sun-edge);
  background: var(--chevron) center / 14px no-repeat, var(--sun-soft);
  transition: transform 0.2s, background-color 0.15s;
}
.fold > summary:hover::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, var(--sun); border-color: var(--sun); }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.fold-note { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.fold-note.warn { color: var(--danger); font-weight: 600; }
.panel.fold { padding-block: 16px; }
.panel.fold[open] { padding-bottom: 22px; }
.panel.fold > summary.panel-head { margin-bottom: 0; }
.panel.fold[open] > summary.panel-head { margin-bottom: 12px; }
.side-card.fold[open] > summary { margin-bottom: 10px; }

/* Emails page: the three automatic emails sit together in one yellow box, apart from "New email". */
.email-group {
  background: var(--sun-soft);
  border: 1px solid var(--sun-edge);
  border-radius: var(--radius-large);
  padding: 20px;
  margin-bottom: 36px;
  scroll-margin-top: 64px;
}
.email-group-head { margin-bottom: 16px; }
.email-group-head .eyebrow { margin-bottom: 6px; }
.email-group-head h2 { font-size: 1.5rem; margin-bottom: 4px; }
.email-group .panel { background: var(--field); border-color: var(--sun-edge); margin-bottom: 10px; scroll-margin-top: 64px; }
.email-group .panel:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .email-group { padding: 14px; } }

/* --- Video ------------------------------------------------------------------ */

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--stage);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The replay's YouTube player, in the video's place. */
.replay-box { position: absolute; inset: 0; background: #000; }
.replay-box iframe { width: 100%; height: 100%; border: 0; display: block; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 16px;
  text-align: center;
  color: #ededed;
  background: var(--stage);
}
.overlay p { margin: 0; max-width: 32em; }
.overlay #message { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.overlay .overlay-hint { margin-top: -6px; font-size: 0.9rem; color: #a6a6a6; }
.overlay a { color: #ededed; }
/* "Join webinar" on the dark video area: red like the Live badge, so it's the one thing to tap. */
.overlay #join { background: var(--live); border-color: var(--live); color: #fff; padding: 12px 28px; font-size: 1.05rem; font-weight: 700; }
.overlay #join:hover:not(:disabled) { background: #b82424; border-color: #b82424; box-shadow: 0 8px 24px rgb(212 47 47 / 0.4); }

.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Class page: the viewer's volume, a speaker button and a slider filled in the logo's yellow. */
.volume { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 4px; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--field); }
.volume-mute { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: none; background: none; color: var(--text); }
.volume-mute:hover:not(:disabled) { color: var(--accent); }
.volume-mute[aria-pressed="true"] { color: var(--danger); }
.volume input[type="range"] {
  --level: 100%;
  width: 120px;
  height: 6px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--sun) var(--level), var(--border) var(--level));
  cursor: pointer;
}
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--field);
  box-shadow: 0 0 0 1px var(--sun-edge);
}
.volume input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--field);
  box-shadow: 0 0 0 1px var(--sun-edge);
}
.volume input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.volume:has(input[hidden]) { padding-right: 4px; }
.unsent-links { align-items: center; }

/* The host's name on the viewers' video, bottom left (like a video call). */
.host-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 90px);
  padding: 4px 10px;
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hearts floating up the right side of the video, and the viewers' heart button. */
.hearts { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.heart {
  position: absolute;
  bottom: 64px;
  width: calc(30px * var(--size, 1));
  height: calc(30px * var(--size, 1));
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
  animation: heart-float 2.8s ease-out forwards;
}
.heart svg { display: block; width: 100%; height: 100%; }
@keyframes heart-float {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  12% { transform: translate(0, -24px) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--drift), -280px) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .heart { animation: heart-fade 1.6s ease-out forwards; }
  @keyframes heart-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
}
.heart-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 11px;
  border: none;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  color: #ff4d6d;
  transition: transform 0.12s ease;
}
.heart-button:hover:not(:disabled) { background: rgb(0 0 0 / 0.65); }
.heart-button:active { transform: scale(0.88); }
.heart-button svg { display: block; width: 100%; height: 100%; }
.heart-count { color: #e04866; font-weight: 600; }

/* Mic level under the microphone picker: green, red near clipping. */
/* Muted mic: red, pulsing button and a sign on the preview. */
@keyframes mute-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(212 47 47 / 0.6); }
  50% { box-shadow: 0 0 0 8px rgb(212 47 47 / 0); }
}
button.muted { background: var(--live); border-color: var(--live); color: #fff; animation: mute-pulse 1.4s ease-in-out infinite; }
.muted-sign {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--live);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  animation: mute-pulse 1.4s ease-in-out infinite;
}
/* Class clock, top centre of the host's preview. */
.class-clock {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  white-space: nowrap;
}
.clock-time { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.clock-note { font-size: 0.8rem; opacity: 0.85; }
.class-clock.soon { background: #c98a00; }
.class-clock.over { background: var(--live); animation: mute-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .class-clock.over { animation: none; } }

/* Recording: a REC sign on the preview, opposite the muted sign. */
.rec-sign {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.6);
  color: #ff5a5a;
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.record-row { align-items: center; margin-top: 0; }
/* Recordings sit in the narrow column next to the video: name on its own line, then state and buttons. */
.recording-list li { flex-wrap: wrap; row-gap: 6px; }
.recording-list .doc-list-name { flex-basis: 100%; white-space: normal; }
.recording-list .status { margin-right: auto; }
.record-row .hint { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  button.muted, .muted-sign { animation: none; }
}

.level { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.level-bar { height: 100%; width: 0; background: #3aa65a; transition: width 0.06s linear; }
.level-bar.loud { background: var(--danger); }

/* Host page: video beside the go-live controls on wide screens. */
.broadcast { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.broadcast .controls { margin-top: 0; }
@media (max-width: 760px) { .broadcast { grid-template-columns: minmax(0, 1fr); } }

/* Studio while live, on wider screens: everything in one window, without scrolling the page. A
   control strip on top; below it the document (or shared screen, or the document list) large on
   the left with who is watching under it, and on the right the camera and the chat, which gets
   all the height it can (it matters most during class). js/host.js sets
   --studio-top (where the studio starts). Phones and narrow windows keep the panels stacked. */
@media (min-width: 900px) {
  .wrap:has(.studio.on-air) { max-width: 1600px; }
  .studio.on-air {
    --side: clamp(310px, 26vw, 420px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "controls controls" "docs camera" "docs chat" "people chat";
    gap: 12px;
    height: calc(100dvh - var(--studio-top, 100px) - 14px);
    min-height: 600px;
  }
  .studio.on-air .studio-broadcast, .studio.on-air .broadcast { display: contents; }
  .studio.on-air .panel { margin: 0; min-height: 0; padding: 12px 14px; }
  .studio.on-air .panel-head { margin-bottom: 8px; }
  .studio.on-air .panel-head h2 { font-size: 1.15rem; }
  .studio.on-air .stage { grid-area: camera; }

  /* The control strip: settings, mic and camera, recording, what's happening, end. */
  .studio.on-air .stack {
    grid-area: controls;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
    background: var(--sun-soft);
    border: 1px solid var(--sun-edge);
    border-radius: var(--radius);
  }
  .studio.on-air .stack > * { margin: 0; }
  .studio.on-air .stack > :is(.next-class, .controls:has(#startCam), #recordHint, .recording-list, .status:empty) { display: none; }
  .studio.on-air .device-settings { order: 1; }
  .studio.on-air .stack > .controls:has(#toggleMic) { order: 2; }
  .studio.on-air .record-row { order: 3; flex-wrap: nowrap; }
  .studio.on-air .record-row .check { display: none; } /* "record automatically" is for going live */
  .studio.on-air #recordInfo { order: 4; }
  .studio.on-air .stack > .status {
    order: 5; flex: 1 1 160px; min-width: 0; font-size: 0.9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .studio.on-air .stack > .controls:has(#endLive) { order: 9; margin-left: auto; }
  .studio.on-air #endLive { padding: 8px 18px; font-size: 1rem; }
  /* Camera and mic settings fold into a button that opens them as a small panel. */
  .studio.on-air .device-settings { position: relative; }
  .studio.on-air .device-settings > summary { display: inline-flex; }
  .studio.on-air .device-settings[open] > .device-fields {
    position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; width: min(380px, 80vw);
    padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.45);
  }

  /* Right column: camera (16:9), then the chat fills the rest. Who is watching sits under the
     document, as a row of name tags. */
  .studio.on-air .studio-people { grid-area: people; max-height: 24dvh; }
  .studio.on-air .people-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
  .studio.on-air .people-list li { border: 1px solid var(--border); border-radius: var(--radius); background: var(--field); padding: 3px 4px 3px 8px; }
  .studio.on-air .people-list li.empty { background: none; border: 0; padding: 0; }
  .studio.on-air .people-list li.is-guest { background: var(--sun-soft); border-color: var(--sun-edge); padding-inline: 8px; }
  .studio.on-air .people-list .person-name { flex: none; max-width: 16em; }
  .studio.on-air .studio-people .panel-head h2 { margin-right: 0; }
  .studio.on-air .studio-people .panel-head .guest-allow { margin-left: auto; }
  .studio.on-air .studio-chat { grid-area: chat; display: flex; flex-direction: column; }
  .studio.on-air .studio-chat .chat-panel { flex: 1 1 0; min-height: 0; }
  .studio.on-air .studio-chat .chat-list { max-height: none; min-height: 0; }
  .studio.on-air .studio-chat .status:empty { display: none; }

  /* Left: the documents. The document (or the shared screen) takes the space; the list of
     documents stays below it, short, so another one is always a click away. */
  .studio.on-air .studio-docs { grid-area: docs; display: flex; flex-direction: column; overflow: hidden; }
  .studio.on-air .studio-docs > .hint { display: none; }
  .studio.on-air .studio-docs > .doc-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  /* While one is shown, the others sit in one scrollable row below it. */
  .studio.on-air .studio-docs > .doc-panel:not([hidden]) ~ .doc-list {
    flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px;
  }
  .studio.on-air .studio-docs > .doc-panel:not([hidden]) ~ .doc-list li { flex: 0 0 auto; max-width: 300px; padding: 4px 6px 4px 10px; }
  .studio.on-air .studio-docs > .doc-panel:not([hidden]) ~ .doc-list .status { display: none; }
  .studio.on-air .studio-docs > .doc-list { overflow: auto; }
  .studio.on-air .studio-docs > .status:empty { display: none; }
  .studio.on-air .studio-docs > .doc-panel { margin: 0; }
  .studio.on-air .doc-frame { flex: 1 1 0; min-height: 0; container-type: size; }
  .studio.on-air .doc-frame .doc-view { --doc-max-h: 100cqh; }
  .studio.on-air .screen-panel video { flex: 1 1 0; min-height: 0; max-height: none; }
  /* The camera is small: the clock goes to the bottom, clear of "Mic muted" and REC. */
  .studio.on-air .class-clock { top: auto; bottom: 10px; }
}
/* Laptop screens: a little less air, so the chat keeps its room. */
@media (min-width: 900px) and (max-height: 820px) {
  .studio.on-air { gap: 8px; }
  .studio.on-air .stack { padding: 6px 10px; }
  .studio.on-air .stack button { padding-block: 6px; }
  .studio.on-air .panel { padding: 10px 12px; }
  .studio.on-air .studio-people { max-height: 22dvh; }
}

/* Camera and mic settings: before class simply part of the column (the toggle is only shown live). */
.device-settings > summary {
  display: none; list-style: none; cursor: pointer; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--field); font-weight: 600; font-size: 0.95rem;
}
.device-settings > summary::-webkit-details-marker { display: none; }
.device-settings > summary::before { content: "⚙"; }
.device-settings > summary::after { content: "▾"; font-size: 0.8em; color: var(--muted); }
.device-fields { display: grid; gap: 14px; }

/* Who is watching, in the studio: a flag for the country they watch from, their name, and
   "Invite" to let them speak as a guest. */
.studio-people { display: flex; flex-direction: column; gap: 8px; }
.studio-people .panel-head { margin-bottom: 0; flex-wrap: wrap; gap: 6px 10px; }
.studio-people .panel-head h2 { margin-right: auto; }
.people-count { color: var(--muted); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; }
select.guest-allow { width: auto; padding: 3px 6px; font-size: 0.82rem; }
.people-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 3.2em; flex: 1 1 auto; display: grid; align-content: start; }
.people-list li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.people-list li:last-child { border-bottom: 0; }
.people-list li.empty { color: var(--muted); border: 0; }
.people-list .flag { width: 1.4em; text-align: center; font-size: 1.15rem; line-height: 1; flex: none; }
.people-list .person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list .invite { padding: 3px 10px; font-size: 0.82rem; }
.people-list .is-guest { background: var(--sun-soft); border-radius: var(--radius); padding-inline: 6px; border-bottom-color: transparent; }
.people-list .person-state { font-size: 0.82rem; font-weight: 700; }
.studio-people .guest-now {
  flex-wrap: nowrap; padding: 6px 8px 6px 10px; background: var(--sun-soft); border: 1px solid var(--sun-edge); border-radius: var(--radius);
}
.studio-people .guest-now strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.studio-people .guest-now button { flex: none; padding: 4px 12px; font-size: 0.85rem; }
.studio-people > .hint { font-size: 0.82rem; line-height: 1.35; }

/* --- Guest speaker -----------------------------------------------------------------
   One viewer the host invited, on camera (or only heard) next to the host. On the class page
   viewers choose: both cameras side by side, or the guest small in a corner. In the studio the
   guest is always small, bottom right of the host's preview. */
.stage .guest-video { position: absolute; z-index: 1; object-fit: cover; background: #111; }
.stage.has-guest[data-cams="split"] > #video { position: absolute; left: 0; top: 0; width: 50%; height: 100%; object-fit: cover; }
.stage.has-guest[data-cams="split"] .guest-video { left: 50%; top: 0; width: 50%; height: 100%; border-left: 2px solid #000; }
.stage.has-guest[data-cams="small"] .guest-video,
.studio .guest-video { right: 12px; top: 12px; width: 30%; height: auto; aspect-ratio: 16 / 9; border-radius: 5px; border: 2px solid rgb(255 255 255 / 0.85); box-shadow: 0 6px 20px rgb(0 0 0 / 0.4); }
.studio .guest-video { top: auto; bottom: 12px; }
/* Guest big: the guest fills the stage, the host moves to the corner. */
.stage.has-guest[data-cams="guest"] .guest-video { inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--stage); }
.stage.has-guest[data-cams="guest"] > #video {
  position: absolute; z-index: 2; right: 12px; top: 12px; width: 30%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 5px; border: 2px solid rgb(255 255 255 / 0.85); box-shadow: 0 6px 20px rgb(0 0 0 / 0.4); background: #111;
}
.stage.has-guest[data-cams="guest"] .guest-tag { left: 12px; bottom: 12px; }
.stage.has-guest[data-cams="guest"] .host-tag { left: auto; bottom: auto; right: 18px; top: calc(12px + 30% - 32px); max-width: 28%; font-size: 0.8rem; z-index: 3; }
.guest-tag {
  position: absolute; z-index: 2; max-width: 45%; padding: 4px 10px; border-radius: var(--radius);
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage.has-guest[data-cams="split"] .guest-tag { left: calc(50% + 12px); bottom: 12px; }
.stage.has-guest[data-cams="small"] .guest-tag { right: 18px; top: calc(12px + 30% - 32px); max-width: 28%; font-size: 0.8rem; } /* the tile's bottom edge: 12px + 30% of the 16:9 stage's height */
.guest-tag.audio-only { left: 12px; top: 12px; max-width: calc(100% - 24px); }
.studio .guest-tag:not(.audio-only) { right: 18px; bottom: 18px; font-size: 0.8rem; max-width: 28%; }
/* The host's own name tag stays on the host's half. */
.stage.has-guest[data-cams="split"] .host-tag { max-width: calc(50% - 24px); }

.guest-invite {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center;
  margin-bottom: 18px; padding: 20px 24px; border-radius: var(--radius-large);
  background: var(--sun-soft); border: 1px solid var(--sun-edge);
}
.guest-invite h2 { font-size: 1.5rem; margin-bottom: 6px; }
.guest-invite .eyebrow { margin-bottom: 8px; }
.guest-invite .error { grid-column: 1 / -1; }
/* The guest's choice: camera and/or microphone, as two toggles. */
.guest-choose { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.guest-choice {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--field);
}
.guest-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.guest-choice:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.guest-choice:has(input:checked) input { accent-color: var(--accent-text); }
.guest-choice:has(input:disabled) { opacity: 0.6; cursor: default; }
.guest-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .guest-invite { grid-template-columns: minmax(0, 1fr); } }
.guest-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px;
  padding: 12px 16px; border-radius: var(--radius-large); background: var(--sun-soft); border: 1px solid var(--sun-edge);
}
.guest-bar-text { font-weight: 600; margin-right: auto; }
.view-bar .view-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: 12px; color: inherit; }
.view-bar .view-group > span { color: var(--muted); margin-right: 2px; }

/* Studio: the guest panel among the controls. */
.guest-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.guest-now strong { margin-right: auto; }

/* --- Schedule calendar (host page) ------------------------------------------ */

.schedule { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .schedule { grid-template-columns: minmax(0, 1fr); } }

.zone-bar { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 6px 16px; align-items: end; margin-bottom: 16px; }
@media (max-width: 640px) { .zone-bar { grid-template-columns: minmax(0, 1fr); } }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head h3 { margin: 0 auto 0 0; font-size: 1.05rem; }
.cal-head button { padding: 5px 11px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekday { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
.cal-day {
  min-height: 62px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--field);
}
.cal-day .day-top { display: flex; justify-content: space-between; align-self: stretch; }
.cal-day .num { font-size: 0.85rem; }
.cal-day .moon { font-size: 0.8rem; line-height: 1.3; color: var(--moon-edge); }
/* Moon days keep their yellow even with a class on them; the blue border shows the class. */
.cal-day.moon-day { background: var(--moon); border-color: var(--moon-edge); }
.cal-day.moon-day.active { border-color: var(--accent); }
.moon-swatch { display: inline-block; width: 12px; height: 10px; border-radius: 2px; background: var(--moon); box-shadow: inset 0 0 0 1px var(--moon-edge); vertical-align: middle; margin-right: 4px; }
.cal-day .holiday {
  max-width: 100%;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--holiday);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.holiday-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--holiday); vertical-align: middle; margin-right: 4px; }
.day-notes { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; color: var(--holiday); }
.cal-day .time {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-text);
}
.cal-day .time.own { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.other-month { visibility: hidden; }
.cal-day.today .num { font-weight: 800; color: var(--accent); }
.cal-day.active { background: var(--accent-soft); border-color: var(--accent); }
.cal-day.selected { outline: 2px solid var(--text); outline-offset: 1px; }
.cal-day.past { opacity: 0.5; }
.cal-day:disabled { opacity: 0.5; cursor: default; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.cal-legend .time { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--accent); vertical-align: middle; margin-right: 4px; }
.cal-legend .time.own { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 480px) {
  .cal-day { min-height: 48px; padding: 3px; }
  .cal-day .holiday { font-size: 0.56rem; }
  .cal-day .time { font-size: 0.62rem; padding: 0 2px; }
}

.side-card {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.side-card h3 { margin: 0 0 10px; font-size: 1rem; }
.side-card.stack h3 { margin: 0; }
.yt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.yt-steps .side-card { margin: 0; }
.video-list a { font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 560px) {
  .video-list li { flex-wrap: wrap; }
  .video-list .doc-list-name { flex-basis: 100%; }
}
.copy-row { display: flex; gap: 6px; align-items: center; }
.copy-row code, .copy-row a {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.class-item {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.class-item:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.class-item .tag { font-size: 0.8rem; color: var(--muted); }

/* --- Emails page ------------------------------------------------------------------ */

.email-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .email-editor { grid-template-columns: minmax(0, 1fr); } }
.email-preview-box { display: grid; gap: 6px; }
.email-preview { width: 100%; height: 620px; border: 1px solid var(--border); border-radius: var(--radius); background: #f7f7f7; }
.email-editor .actions input[type="email"] { width: auto; flex: 1 1 180px; }
.audience { border: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.audience legend { margin-bottom: 4px; }
.sent-title { margin: 22px 0 8px; font-size: 1rem; }
.timer-card { margin-top: 16px; }
.reminder-lead { max-width: 240px; }
code { font-size: 0.88em; }
.format-example {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--field);
  font-size: 0.85rem;
  overflow-x: auto;
}
.import-skipped { margin: 0; padding-left: 20px; font-size: 0.85rem; color: var(--muted); }

/* --- Signup page settings (host page) --------------------------------------- */

.image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.image-list figure {
  margin: 0;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Thumbnails share one box size, but each picture fits inside it whole (never cropped). */
.image-list img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface); display: block; }
.image-list figcaption { display: flex; align-items: center; gap: 6px; padding: 8px; flex-wrap: wrap; }
.image-list figcaption button { padding: 4px 10px; font-size: 0.85rem; }
.image-list .header-tag { font-size: 0.85rem; font-weight: 600; color: var(--accent); margin-right: auto; }

/* --- Documents ---------------------------------------------------------------- */

/* Viewer page. Phones: video, document, chat stacked. Wider screens: chat beside the video,
   or with a document shown, the document large on the left and video over chat on the right. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "doc" "chat";
  gap: 12px;
  align-items: start;
}
.layout > .stage { grid-area: stage; }
.layout > .doc-panel { grid-area: doc; }
/* Chat and the documents list share one column. */
.layout > .side { grid-area: chat; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wrap:has(.layout.with-chat) { max-width: 1240px; }
.wrap:has(.layout.with-doc) { max-width: 1400px; }
@media (min-width: 761px) {
  .layout.with-chat { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "stage chat"; }
  .layout.with-doc { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-areas: "doc stage" "doc chat"; }
  .layout.with-doc.with-chat { grid-template-rows: auto 1fr; }
  /* The viewer's layout choice (watch.js): */
  .layout.with-doc[data-view="equal"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .layout.with-doc[data-view="host"] { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-areas: "stage doc" "stage chat"; }
}

.view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.9rem; }
.view-bar span { color: var(--muted); margin-right: 2px; }
.view-bar button { padding: 4px 10px; font-size: 0.85rem; font-weight: 500; }
.view-bar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
/* Phones stack everything, so only "document shown or not" makes a difference there. */
@media (max-width: 760px) {
  .view-bar [data-view="equal"], .view-bar [data-view="host"] { display: none; }
}

.viewer-docs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.viewer-docs summary { padding: 8px 12px; font-weight: 600; cursor: pointer; }
.viewer-docs[open] summary { border-bottom: 1px solid var(--border); }
.viewer-docs .docs-count { color: var(--muted); font-weight: 400; }
.viewer-docs .doc-list { padding: 8px; gap: 4px; }
.viewer-docs .doc-list li { padding: 5px 8px; gap: 6px; }
.viewer-docs .doc-list-name { color: var(--text); text-decoration: none; }
.viewer-docs .doc-list-name:hover { text-decoration: underline; }
.viewer-docs .doc-list .button { padding: 2px 8px; font-size: 0.8rem; }
.doc-toolbar .button { padding: 5px 10px; font-size: 0.85rem; }

.doc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 12px;
}
.layout .doc-panel { margin: 0; }
.panel .doc-panel { margin: 0 0 12px; }

/* The host's shared screen, where documents go (viewers and the studio). */
.screen-panel video { display: block; width: 100%; max-height: min(75vh, 900px); background: #0d0d0d; object-fit: contain; }
.screen-label { text-align: left; }

/* --- Chat ------------------------------------------------------------------------ */

.chat-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Beside the video (wide screens), the chat fills the column's height; stacked, it keeps its own. */
@media (min-width: 761px) {
  .layout.with-chat:not(.with-doc) .side { align-self: stretch; }
  .layout.with-chat:not(.with-doc) .chat-panel { flex: 1 1 0; min-height: 0; }
}
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.chat-head h2 { font-size: 1rem; }
.chat-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  min-height: 160px;
  max-height: 360px;
  flex: 1;
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}
@media (min-width: 761px) { .layout.with-chat:not(.with-doc) .chat-list { max-height: none; } }
.chat-list .who { font-weight: 700; margin-right: 6px; }
/* The host's name is always a filled label, so their messages stand out at a glance. */
.chat-list .host .who {
  display: inline-block; padding: 0 8px; border-radius: 5px; line-height: 1.5;
  background: var(--accent); color: var(--accent-text);
}
.chat-list .host { background: var(--sun-soft); border-radius: var(--radius); padding: 4px 8px; margin: 0 -8px; }
.chat-list .hidden { opacity: 0.5; text-decoration: line-through; }
.chat-list .empty { color: var(--muted); }
.chat-list .tools { float: right; margin-left: 8px; }
.chat-list .tools button { padding: 1px 8px; font-size: 0.8rem; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; min-width: 0; }
.chat-form button { padding: 8px 12px; }
.chat-panel .error { padding: 0 12px 8px; margin: 0; font-size: 0.88rem; }
.panel .chat-panel .chat-list { max-height: 300px; }

.doc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.doc-toolbar button { padding: 5px 12px; }
.draw-bar { border-top: none; background: var(--accent-soft); }
.draw-bar button[aria-pressed="true"], #docDraw[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.swatch.marker { background: #ffd400; }
.swatch.pen { background: #e0262f; }
.swatch.text { background: none; color: #e0262f; font: 700 13px/12px Helvetica, Arial, sans-serif; text-align: center; }
.draw-saved { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.doc-zoom-group { display: inline-flex; align-items: center; gap: 4px; }
.doc-zoom-group button { padding: 5px 10px; }
.doc-zoom { font-variant-numeric: tabular-nums; font-size: 0.85rem; min-width: 3.2em; text-align: center; }
.doc-page { font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: center; white-space: nowrap; }
/* In a narrower document panel the name would be a few letters: leave it out, so the
   page, zoom and open/download buttons stay on one line. */
.layout .doc-panel { container-type: inline-size; }
@container (max-width: 560px) {
  .doc-toolbar .doc-name { display: none; }
  .doc-toolbar { gap: 6px; }
}
@container (max-width: 420px) {
  .doc-toolbar { gap: 4px; padding: 6px 8px; }
  .doc-toolbar button, .doc-toolbar .button { padding: 4px 8px; }
  .doc-toolbar .page-word { display: none; }
  .doc-page { min-width: 3.2em; }
}
/* Takes whatever room the buttons leave and shortens with …, so the toolbar stays on one line. */
.doc-name {
  flex: 1 1 0;
  min-width: 2em;
  text-align: right;
  color: var(--muted);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The document: pages stacked in one scrolling column (js/pdfview.js). */
/* The window onto the document has the same shape for the host and every viewer (--doc-ratio from
   js/pdfview.js), so everyone sees the same part of the page. It is as wide as its panel, or
   narrower when the window isn't tall enough (--doc-max-h). */
.doc-view {
  --doc-max-h: min(75vh, 900px);
  position: relative; overflow: auto; background: #4d4d4d; cursor: grab;
  scrollbar-gutter: stable; /* the scrollbar coming and going mustn't change the width pages are fitted to */
  aspect-ratio: var(--doc-ratio, 4 / 3);
  width: min(100%, var(--doc-max-h) * var(--doc-ratio, 1.3333));
  margin-inline: auto;
}
.doc-frame { display: flex; justify-content: center; }
.doc-view.dragging { cursor: grabbing; user-select: none; }
.doc-pages { box-sizing: border-box; margin: 0 auto; padding: 8px; }
.doc-page-box { background: #fff; margin-bottom: 8px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35); }
.doc-page-box:last-child { margin-bottom: 0; }
.doc-page-box { position: relative; }
.doc-page-box canvas { display: block; width: 100%; height: 100%; }
/* Markings over the page; marker strokes multiply like a real highlighter. */
.doc-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.doc-marks .mark { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doc-marks .mark.marker { mix-blend-mode: multiply; }
.doc-marks .mark-text { font-family: Helvetica, Arial, sans-serif; white-space: pre; }
.doc-view.drawing { cursor: crosshair; }
.doc-view.writing { cursor: text; }
/* Where a note is typed; looks like the note itself, with a dashed edge while editing. */
.doc-text-editor {
  position: absolute; z-index: 1; box-sizing: content-box; margin: 0; padding: 0 2px;
  min-width: 2em; resize: none; overflow: hidden; white-space: pre;
  font-family: Helvetica, Arial, sans-serif; background: rgb(255 255 255 / 0.6);
  border: 1px dashed currentColor; border-radius: 2px; outline: none;
  transform: translate(-3px, -1px); /* the letters sit exactly where the saved note will */
}
.doc-view.drawing .doc-page-box { touch-action: none; } /* a finger or pen draws instead of scrolling */

/* minmax(0, 1fr): the list keeps its column's width; long names are cut with … instead of widening the page. */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.doc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.doc-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-list .status { min-height: 0; margin: 0; font-size: 0.85rem; }
.doc-list button, .doc-list .button { padding: 4px 10px; font-size: 0.85rem; }
.doc-list .doc-share { font-size: 0.85rem; white-space: nowrap; }
.doc-list .doc-share input { margin-top: 2px; }

/* --- Attendees ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--field); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tr.revoked td { color: var(--muted); text-decoration: line-through; }
tr.revoked td:last-child { text-decoration: none; }
td button { padding: 4px 10px; font-size: 0.85rem; }
td.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
td .icon-button { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; line-height: 1; }
td .icon-button:hover:not(:disabled) { background: var(--sun-soft); border-color: var(--sun-edge); }

/* Admin: an address field with the site in front, e.g. "https://stagelight…/" + "maria". */
.prefix-input { display: flex; align-items: stretch; font-weight: 400; }
.prefix-input > span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prefix-input > input { border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Signup page ---------------------------------------------------------------- */

.narrow { max-width: 460px; }
.narrow .card { max-width: none; }

.signup-page { max-width: 640px; }
.signup-page:has(.signup-layout.with-image) { max-width: 1400px; }
.signup-layout.with-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.signup-layout.with-image .signup-media { position: sticky; top: 20px; } /* stays in view next to the form */
.signup-layout.with-image .hero-image { margin-bottom: 0; }
@media (max-width: 760px) {
  .signup-layout.with-image { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .signup-layout.with-image .signup-media { position: static; }
}
.signup-page .card { max-width: none; }
/* The class name is the page's headline, large and serif like on the landing page. */
.signup-page { padding-top: clamp(24px, 5vw, 56px); }
.signup-page .bar { flex-wrap: nowrap; align-items: flex-start; border-bottom: none; padding-bottom: 0; margin-bottom: 18px; background: none; }
.signup-page h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; }
.signup-page .intro { font-size: 1.05rem; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.signup-page .upcoming { padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 24px; }
/* Images on the signup page keep their own shape: shown whole, never cropped. */
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  margin-bottom: 20px;
}
.intro { margin-bottom: 12px; }

/* Privacy page */
.legal { max-width: 720px; }
.legal h2 { margin: 28px 0 8px; }
.legal h3 { margin: 18px 0 4px; font-size: 1rem; }
.legal p, .legal li { margin: 0 0 10px; }
.legal .operator { white-space: pre-line; font-weight: 600; }
.intro p { margin: 0 0 10px; white-space: pre-line; }
.upcoming { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 4px; }
.upcoming li { color: var(--muted); }
.upcoming li:first-child { color: var(--text); font-weight: 600; }
.upcoming li:first-child { justify-self: start; margin-bottom: 4px; padding: 3px 10px; border-radius: var(--radius); background: var(--sun-soft); border: 1px solid var(--sun-edge); }
#done.card { background: var(--sun-soft); border-color: var(--sun-edge); }
/* Columns rather than a grid, so pictures of different shapes stack without gaps. */
.gallery { columns: 220px; column-gap: 10px; margin-top: 28px; }
.gallery img { width: 100%; height: auto; margin-bottom: 10px; break-inside: avoid; border-radius: 5px; display: block; }

/* --- Watch page ------------------------------------------------------------------ */

.calendar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.calendar-links span { color: var(--muted); font-size: 0.92rem; }

/* --- Landing page (index.html) ------------------------------------------------------ */

/* Top bar: wordmark left, links right; it stays on top and turns frosted once scrolled. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
:root[data-theme="dark"] .site-nav { background: rgb(13 13 13 / 0.85); }
.landing main [id] { scroll-margin-top: 72px; } /* links to a section stop below the bar */
.site-nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.nav-inner nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 0.9rem; }
.nav-inner nav a:not(.txt-cta) { color: var(--text); text-decoration: none; transition: opacity 0.2s; }
.nav-inner nav a:not(.txt-cta):hover { opacity: 0.55; }
.nav-inner .txt-cta { font-size: 0.94rem; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand img { border-radius: 5px; }
@media (max-width: 720px) {
  .nav-inner { gap: 14px; }
  .nav-inner nav { gap: 16px; }
  .nav-inner nav a:not(.txt-cta) { display: none; }
}
/* Very narrow phones: the hero's own "Join a class" is right below, so the bar keeps just the name. */
@media (max-width: 400px) { .nav-inner nav { display: none; } .nav-inner .theme-switch { margin-left: auto; } }

/* Hero: eyebrow, large serif headline and the lead on the left, the two links bottom right. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 48px; padding-top: clamp(36px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 24px; }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.65; color: var(--muted); margin: 0; max-width: 34em; }
.hero-side { display: grid; gap: 18px; justify-items: start; padding-bottom: 6px; }
.hero-more { color: var(--muted); font-size: 0.92rem; font-weight: 500; text-decoration: none; }
.hero-more:hover { color: var(--text); }
@media (max-width: 720px) { .hero { grid-template-columns: minmax(0, 1fr); } }

/* "Now on Stagelight": a card for each Stagelight on this server. */
.now-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; padding-bottom: 0; }
.now-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  padding: 14px 24px 14px 14px;
}
.now-card:not(:has(img:not([hidden]))) { grid-template-columns: minmax(0, 1fr); padding: 24px; }
.now-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.now-card h2 { margin: 0 0 8px; font-size: 1.6rem; }
.now-meta { margin: 0 0 4px; color: var(--muted); font-size: 0.95rem; }
.now-card .txt-cta { margin-top: 14px; }
@media (max-width: 560px) { .now-card { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 20px; } }

/* "How it works": five cards in a pinned stack (js/landing.js), like the strategy stack on the
   CAPITAL site. The track is one screen plus the scroll the cards need (--pin-run, set by the
   script); the pane inside sticks while the next card slides up and the earlier ones pile up
   behind it, their tabs still showing. Without the script, on phones and with reduced motion
   (.static) the cards are a plain list. */
.steps-show { position: relative; height: calc(100vh + var(--pin-run, 0px)); }
.steps-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.steps-stack { position: absolute; left: 0; right: 0; top: 228px; bottom: 28px; width: min(1040px, calc(100% - 40px)); margin: 0 auto; }
.steps-stack > .scard {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 5px;
  transform-origin: top center;
  will-change: transform;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.06);
  filter: brightness(calc(1 - var(--dim, 0))); /* dims as later cards land in front */
}
.steps-stack > .scard:not(:first-child) { transform: translateY(118%); } /* below the fold until the script places it */
.scard--light { background: var(--bg); }
.scard--paper { background: #f6f1ea; }
:root[data-theme="dark"] .scard--light { background: #151515; }
:root[data-theme="dark"] .scard--paper { background: #1d1915; }
.scard--stage { border-color: #3a2a1f; }

.scard-tab { position: relative; z-index: 5; display: flex; align-items: baseline; gap: 16px; padding: 10px 28px 11px; border-bottom: 1px solid var(--border); }
.scard--paper .scard-tab { border-bottom-color: #e6dccd; }
:root[data-theme="dark"] .scard--paper .scard-tab { border-bottom-color: #2e2720; }
.scard--stage .scard-tab { border-bottom-color: rgb(255 236 200 / 0.14); }
.scard-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.scard-num i { font-style: normal; margin: 0 3px; color: var(--accent); }
.scard--stage .scard-num i { color: #f0a06e; }
.scard-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.scard--stage .scard-label { color: rgb(255 244 228 / 0.6); }
/* The tab's orange line fills as its card comes forward. */
.scard-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--fill, 1) * 100%); background: var(--accent); }
.scard--stage .scard-tab::after { background: #f0a06e; }

.scard-body { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: 0; }
.scard-main { align-self: center; display: grid; gap: 16px; padding: clamp(24px, 3.4vw, 48px); }
.scard-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.04; letter-spacing: -0.025em; }
.scard-copy { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.scard--stage .scard-copy { color: rgb(255 244 228 / 0.72); }
.scard-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; font-weight: 500; }
.scard-points li { display: flex; gap: 10px; align-items: baseline; }
.scard-points li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 700; }
.scard--stage .scard-points li::before { color: #f0a06e; }
/* The screenshot sits in the right half, whole, with a soft frame. */
.scard-media { margin: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 36px) 0; }
.scard-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 5px; border: 1px solid rgb(0 0 0 / 0.08); box-shadow: 0 18px 48px rgb(0 0 0 / 0.14); }
/* "On any device": the class on a laptop at the back, a tablet in front on the left and a phone
   on the right. The group keeps its shape and takes whatever room the card has (width or height). */
.scard-media--devices { container-type: size; }
.devices { position: relative; width: min(100cqw, 100cqh * 1.5); aspect-ratio: 3 / 2; }
.device { position: absolute; overflow: hidden; background: #fff; border: clamp(4px, 0.8cqw, 9px) solid #1a1a1a; box-shadow: 0 18px 44px rgb(0 0 0 / 0.32); }
.scard-media .device img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: top left; border: 0; border-radius: 0; box-shadow: none; }
.device-laptop { left: 6%; top: 0; width: 88%; overflow: visible; background: none; border: 0; box-shadow: none; }
.device-screen { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border: clamp(5px, 1cqw, 11px) solid #1a1a1a; border-radius: 10px 10px 0 0; box-shadow: 0 18px 44px rgb(0 0 0 / 0.32); }
.device-base { position: relative; left: -6%; width: 112%; height: clamp(7px, 2.2cqw, 16px); border-radius: 0 0 10px 10px; background: linear-gradient(#e6e6e6, #a8a8a8); box-shadow: 0 10px 24px rgb(0 0 0 / 0.3); }
.device-tablet { left: 0; bottom: 0; width: 30%; aspect-ratio: 3 / 4; border-radius: 12px; }
.device-phone { right: 2%; bottom: 0; width: 15%; aspect-ratio: 9 / 19; border-width: clamp(3px, 0.6cqw, 7px); border-radius: 16px; }

/* The plain list: phones, reduced motion, or before the script runs on narrow screens. */
.steps-show.static { height: auto; }
.steps-show.static .steps-pin { position: static; height: auto; overflow: visible; }
.steps-show.static .steps-stack { position: static; width: auto; display: grid; gap: 20px; padding: 0 20px; max-width: 1080px; margin: 0 auto; }
.steps-show.static .steps-stack > .scard { position: relative; transform: none !important; box-shadow: none; }
.steps-show.static .steps-stack > .scard { filter: none; }
.steps-show.static .scard-media--devices { container-type: inline-size; }
.steps-show.static .devices { width: 100%; }
@media (max-width: 899px) {
  .scard-body { grid-template-columns: minmax(0, 1fr); }
  .scard-media { padding: 0 20px 20px; }
  .scard-media--devices { container-type: inline-size; }
  .devices { width: 100%; }
  .scard-tab { padding: 14px 20px; }
}

/* Box with large serif figures, on the stage background. */
.numbers {
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 5px;
}
.numbers > * { position: relative; }
.numbers .eyebrow { color: #f0a06e; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid rgb(255 236 200 / 0.16); display: flex; }
.number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.number-grid strong { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px; }
.number-grid strong small { font-size: 0.42em; letter-spacing: 0; margin-left: 4px; }
.number-grid h3 { margin: 0 0 6px; font-size: 1rem; }
.number-grid p { margin: 0; color: rgb(255 244 228 / 0.72); font-size: 0.92rem; line-height: 1.55; }

.features, .how-intro { padding-top: clamp(56px, 8vw, 104px); }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.025em; }
.section-head p:not(.eyebrow) { color: var(--muted); margin: 14px 0 0; font-size: 1.05rem; }

/* Feature tiles (as on chriskatzer.com): a 4×4 grid where the hovered tile grows and the
   others shrink to make room. Each tile has its fixed place; hovering only changes the
   column and row sizes, so nothing jumps, it slides. Phones get two plain columns. */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 16px;
  height: clamp(800px, 78vw, 920px);
  transition: grid-template-columns 0.55s cubic-bezier(0.4, 0, 0.2, 1), grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 26px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.3s;
}
.tile:hover { z-index: 1; border-color: #b8b8b8; }
:root[data-theme="dark"] .tile:hover { border-color: #555; }
.tile .tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.tile h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.tile p { margin: auto 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.t-video h3 { font-family: var(--font-display); font-size: 1.85rem; line-height: 1.04; letter-spacing: -0.02em; }
.t-video p { font-size: 0.95rem; max-width: 30ch; }
.t-docs h3, .t-rec h3 { font-size: 1.45rem; }
/* The four small tiles get narrow while a neighbour grows: a little less padding keeps their text in. */
:is(.t-chat, .t-link, .t-schedule, .t-email) { padding: 22px; gap: 8px; }
:is(.t-chat, .t-link, .t-schedule, .t-email) h3 { font-size: 1.12rem; }
.t-cta { justify-content: center; gap: 16px; padding: 30px; border-color: #241a14; } /* background: .stage-bg */
.t-cta:hover { border-color: #5a4330; }
:root[data-theme="dark"] .t-cta:hover { border-color: #5a4330; }
.t-cta h3 { font-family: var(--font-display); font-size: 1.85rem; line-height: 1.04; letter-spacing: -0.02em; }
.t-cta .go { font-weight: 600; font-size: 1.1rem; }
.t-cta .go span { display: inline-block; color: #f0a06e; transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1); }
.t-cta:hover .go span { transform: translate(3px, -3px); }

.t-video { grid-area: 1 / 1 / 3 / 3; }
.t-docs { grid-area: 1 / 3 / 2 / 5; }
.t-chat { grid-area: 2 / 3 / 3 / 4; }
.t-link { grid-area: 2 / 4 / 3 / 5; }
.t-schedule { grid-area: 3 / 1 / 4 / 2; }
.t-email { grid-area: 3 / 2 / 4 / 3; }
.t-rec { grid-area: 4 / 1 / 5 / 3; }
.t-cta { grid-area: 3 / 3 / 5 / 5; }

/* Only on wide screens: narrower, the shrunken tiles would be too small for their text. */
@media (min-width: 1180px) {
  .bento:has(.t-video:hover) { grid-template-columns: 1.42fr 1.42fr 0.78fr 0.78fr; grid-template-rows: 1.4fr 1.4fr 0.8fr 0.8fr; }
  .bento:has(.t-docs:hover) { grid-template-columns: 0.78fr 0.78fr 1.42fr 1.42fr; grid-template-rows: 1.55fr 0.82fr 0.82fr 0.82fr; }
  .bento:has(.t-chat:hover) { grid-template-columns: 0.8fr 0.8fr 1.62fr 0.78fr; grid-template-rows: 0.82fr 1.55fr 0.82fr 0.82fr; }
  .bento:has(.t-link:hover) { grid-template-columns: 0.78fr 0.8fr 0.8fr 1.62fr; grid-template-rows: 0.82fr 1.55fr 0.82fr 0.82fr; }
  .bento:has(.t-schedule:hover) { grid-template-columns: 1.62fr 0.8fr 0.8fr 0.78fr; grid-template-rows: 0.82fr 0.82fr 1.55fr 0.82fr; }
  .bento:has(.t-email:hover) { grid-template-columns: 0.8fr 1.62fr 0.8fr 0.78fr; grid-template-rows: 0.82fr 0.82fr 1.55fr 0.82fr; }
  .bento:has(.t-rec:hover) { grid-template-columns: 1.42fr 1.42fr 0.78fr 0.78fr; grid-template-rows: 0.8fr 0.8fr 0.82fr 1.55fr; }
  .bento:has(.t-cta:hover) { grid-template-columns: 0.78fr 0.78fr 1.42fr 1.42fr; grid-template-rows: 0.78fr 0.78fr 1.36fr 1.36fr; }
}
@media (prefers-reduced-motion: reduce) { .bento { transition: none; } }
/* Medium screens keep the layout without the motion; rows grow to fit their text. */
@media (max-width: 1179px) { .bento { height: auto; grid-template-rows: none; grid-auto-rows: minmax(190px, auto); } }
@media (max-width: 900px) {
  .bento { height: auto; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: auto; }
  .tile { grid-area: auto !important; min-height: 150px; padding: 22px; overflow: visible; }
  .t-video, .t-cta { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) { .bento { grid-template-columns: minmax(0, 1fr) !important; } }


/* "Stage" background, for the numbers box and the Join tile: a warm stage, lit from the top like the
   logo. Soft rays fan out from the light, and a fine dot pattern (like a theatre backdrop) fades out
   towards the edges. The same in day and night mode. Comes after the tile styles, so it wins over their white. */
.stage-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 95% at 50% -25%, rgb(254 210 125 / 0.34), rgb(254 210 125 / 0.08) 55%, transparent 75%),
    linear-gradient(165deg, #3a2a1f 0%, #241a14 55%, #1a1310 100%);
  color: #fff;
}
.stage-bg::before, .stage-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage-bg::before {
  background: repeating-conic-gradient(from 150deg at 50% -18%, rgb(255 222 160 / 0.05) 0deg 2.5deg, transparent 2.5deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, #000 10%, transparent 75%);
}
.stage-bg::after {
  background-image: radial-gradient(circle, rgb(255 236 200 / 0.16) 1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 60%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 60%, #000 25%, transparent 80%);
}

/* Footer: the burnt-orange glow of chriskatzer.com, with the closing call and the links. */
.site-footer {
  margin-top: clamp(64px, 9vw, 120px);
  background: radial-gradient(120% 135% at 50% -15%, #c24813 0%, #a5390f 24%, #862d0b 50%, #5c1e05 76%, #260c03 100%);
  color: #fff;
}
.site-footer .wrap { padding-top: clamp(48px, 6vw, 84px); padding-bottom: 26px; }
.footer-call { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: clamp(40px, 6vw, 72px); }
.footer-call h2 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; }
.footer-call p { margin: 12px 0 0; color: rgb(255 255 255 / 0.75); }
.site-footer .txt-cta { color: #fff; }
.site-footer .txt-cta .arr { color: #fff; }
.site-footer .txt-cta::after { background: #fff; opacity: 0.3; }
.site-footer .txt-cta::before { background: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.18); font-size: 0.88rem; color: rgb(255 255 255 / 0.75); }
.footer-bottom .brand { color: #fff; font-size: 0.95rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.footer-bottom a:not(.brand) { color: rgb(255 255 255 / 0.85); text-decoration: none; }
.footer-bottom a:not(.brand):hover { color: #fff; text-decoration: underline; }

/* --- Consent banner (js/consent.js) ------------------------------------------ */
.consent-banner {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin: 0 auto; padding: 14px 16px;
  display: grid; gap: 12px;
  background: var(--panel, var(--field)); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.18); font-size: 0.9rem;
}
.consent-banner p { margin: 0; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* --- Cloudflare traffic (admin page) ----------------------------------------- */
.usage { display: grid; gap: 10px; margin-bottom: 8px; }
.usage-total { margin: 0; font-size: 1.05rem; }
.usage-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; margin-right: 4px; }
.usage-meter { height: 10px; border-radius: 5px; background: var(--field); border: 1px solid var(--border); overflow: hidden; }
.usage-meter span { display: block; height: 100%; width: 0; background: var(--accent); }
.usage.high .usage-meter span { background: var(--danger); }
.usage-days { display: flex; align-items: flex-end; gap: 3px; height: 70px; padding-top: 4px; border-bottom: 1px solid var(--border); }
.usage-days span { flex: 1; min-width: 3px; max-width: 18px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: 0.85; }
.usage-setup summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.usage-setup ol { padding-left: 20px; display: grid; gap: 4px; margin-bottom: 4px; }

/* --- Become a host (landing page) ----------------------------------------------- */
.become-host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 32px 64px; align-items: start; padding-top: clamp(56px, 8vw, 104px); }
.become-text h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 16px; }
.become-text p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 16px; max-width: 34em; }
.become-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.become-list li { display: flex; gap: 12px; align-items: baseline; }
.become-list li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 700; }
.become-form { max-width: none; background: var(--surface); }
.become-done { gap: 6px; }
.become-done h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; }
.become-done p:last-child { color: var(--muted); }
@media (max-width: 820px) { .become-host { grid-template-columns: minmax(0, 1fr); } }

/* --- Viewer guide (guide.html) ------------------------------------------------------ */
.wrap.guide { max-width: 1040px; }
.guide-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); }
.guide-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; }
.guide-lead { font-size: 1.15rem; line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 18px 0 26px; }
.guide-facts {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.guide-facts li { padding: 16px 18px; border-radius: var(--radius); background: var(--sun-soft); border: 1px solid var(--sun-edge); line-height: 1.45; }
.guide-facts strong { display: block; margin-bottom: 2px; }
.guide-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px clamp(28px, 6vw, 72px);
  align-items: start; padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--border);
}
.guide-step--wide { grid-template-columns: minmax(0, 1fr); }
.guide-text { max-width: 54ch; line-height: 1.55; }
.guide-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 14px 0 12px; }
.guide-text p { margin: 0 0 12px; }
.guide-text ul { margin: 0 0 12px; padding-left: 1.2em; }
.guide-text li { margin-bottom: 6px; }
.guide-num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.guide-shot { margin: 0; }
.guide-shot img {
  display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35); background: var(--surface);
}
.guide-tip { margin-top: 18px; padding: 14px 18px 4px; border-radius: var(--radius); background: var(--sun-soft); border-left: 3px solid var(--sun); }
.guide-tip p { margin-bottom: 6px; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; margin: 0; }
.guide-list div { padding: 14px 0; border-top: 1px solid var(--border); }
.guide-list dt { font-weight: 700; margin-bottom: 4px; }
.guide-list dd { margin: 0; color: var(--muted); line-height: 1.5; }
.guide-faq { padding: clamp(32px, 5vw, 56px) 0 8px; border-top: 1px solid var(--border); max-width: 760px; }
.guide-faq h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; }
.guide-faq details { border-bottom: 1px solid var(--border); }
.guide-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style-position: outside; }
.guide-faq details p { margin: 0 0 16px; line-height: 1.55; color: var(--muted); }
.guide-faq .hint { margin-top: 22px; }
.guide-foot { margin: 28px 0 8px; color: var(--muted); }
@media (max-width: 760px) {
  .guide-step { grid-template-columns: minmax(0, 1fr); }
  .guide-step:not(.guide-step--wide) .guide-shot { max-width: 300px; }
}
.guide-link { margin: 18px 0 0; }
.guide .bar .eyebrow { margin-right: auto; }
.guide-shot img { max-height: 620px; object-fit: cover; object-position: top; }