/* The highlight "stage": used full-screen by the live screen and at 16:9 by the preview in the app.
   Everything is sized in container units (cqw/cqh), so the preview is an exact miniature of the projector. */
.stage {
  --bg: #121110; --panel: #1d1b19; --ink: #f4f1ea; --ink-2: #b9b3a6; --ink-3: #807a6f; --line: #302d29;
  --accent: #ff6a42; --accent-soft: rgba(255,106,66,.14); --good: #4cc38a;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  container-type: size; position: relative; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font);
}
.stage.light {
  --bg: #f6f4ef; --panel: #ffffff; --ink: #1b1a17; --ink-2: #4e4b44; --ink-3: #8f8b81; --line: #e2ded4;
  --accent: #e8502b; --accent-soft: #fde9e2;
}
.stage .frame { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 3.2cqh 4cqw 4.4cqh; gap: 3cqh; }

/* top bar: session logo + title top-left, counter top-right (same as the Q&A presenter) */
.stage .bar { --title-size: 4.4cqh; --title-line: calc(var(--title-size) * 1.15);
  display: flex; align-items: flex-start; gap: 1.6cqw; flex: none; min-width: 0; border-bottom: .25cqh solid var(--line); padding-bottom: 2.2cqh; }
.stage .bar h1 { margin: 0; font-size: var(--title-size); letter-spacing: -.02em; line-height: 1.15; flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage .brand-slot { display: flex; flex: none; height: var(--title-line); }
.stage .brand { height: 100%; aspect-ratio: 1; border-radius: calc(var(--title-line) * .24); background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--title-line) * .36); letter-spacing: -.02em; }
.stage .brand.logo { background: none; aspect-ratio: auto; width: auto; border-radius: 0; }
.stage .brand.logo img { height: var(--title-line); width: auto; max-width: 30cqw; object-fit: contain; object-position: left center; display: block; }
.stage .stat { color: var(--ink-3); font-size: 2.2cqh; white-space: nowrap; flex: none; min-height: var(--title-line);
  display: flex; align-items: center; gap: 1.4cqw; font-variant-numeric: tabular-nums; }
.stage .stat b { color: var(--ink-2); }
.stage .dot { display: inline-block; width: 1.1cqh; height: 1.1cqh; border-radius: 50%; background: var(--good); margin-right: .6cqh; }
.stage .dot.off { background: #e0a030; }
.stage .paused { color: var(--accent); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 1.8cqh; }

/* slides: two stacked layers for cross-fading */
.stage .slides { flex: 1; min-height: 0; position: relative; }
.stage .slide { position: absolute; inset: 0; display: grid; grid-template-columns: 58fr 42fr; gap: 3.2cqw; opacity: 0; transition: opacity .9s ease, transform .9s ease; }
.stage .slide.on { opacity: 1; }
.stage.t-slide .slide { transform: translateX(4cqw); }
.stage.t-slide .slide.on { transform: none; }
.stage.t-slide .slide.gone { transform: translateX(-4cqw); }
.stage.t-none .slide { transition: none; }

.stage .pic { position: relative; border-radius: 2cqh; overflow: hidden; background: var(--panel); min-height: 0; }
.stage .pic .blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(4cqh) brightness(.55) saturate(1.1); }
.stage.light .pic .blur { filter: blur(4cqh) brightness(1.05) saturate(.9) opacity(.6); }
.stage .pic img, .stage .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Esther Lab logo + the screen's address under the QR code (as on the Q&A presenter screen) */
.stage .urlRow { display: flex; align-items: center; gap: .5em; font-size: 2.6cqh; font-weight: 800; line-height: 1.15; color: var(--ink); margin-top: 1.6cqh; min-width: 0; flex: none; }
.stage .urlRow .url { min-width: 0; overflow-wrap: break-word; letter-spacing: -.01em; }
.stage .elogo { flex: none; height: 2.4em; width: auto; display: block; }
.stage .elogo .ring { stroke: var(--ink); }
.stage.light .elogo .ring { stroke: none; }
/* QR code size (session setting) */
.stage.qr-small .qr { width: 13cqh; height: 13cqh; }
.stage.qr-large .qr { width: 27cqh; height: 27cqh; padding: 1.3cqh; }
/* On the live screen, leave room under the text column for the control buttons (bottom-right). */
.stage.has-ctl .info { padding-bottom: calc(clamp(36px, 5vh, 52px) + 12px); }
.stage .pichint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 3cqh; font-weight: 600; border: .4cqh dashed var(--line); border-radius: 2cqh; }
.stage .info { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 1.8cqh; }
.stage .info .name { --fs: 5.6cqh; font-size: var(--fs); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0; padding-bottom: .06em; overflow-wrap: anywhere; flex: none; max-height: 30cqh; overflow: hidden; }
.stage .info .who { font-size: 2.6cqh; font-weight: 700; color: var(--accent); line-height: 1.25; flex: none; overflow-wrap: anywhere; }
.stage .info .text { --fs: 3.4cqh; font-size: var(--fs); line-height: 1.38; color: var(--ink-2); overflow: hidden; flex: 1 1 auto; min-height: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.stage .scan { display: flex; align-items: center; gap: 1.8cqw; flex: none; margin-top: auto; padding-top: 1.6cqh; border-top: .2cqh solid var(--line); }
.stage .qr { background: #fff; border-radius: 1.4cqh; padding: 1cqh; width: 19cqh; height: 19cqh; flex: none; }
.stage .qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.stage .scan .cap { font-size: 2.3cqh; font-weight: 700; line-height: 1.25; color: var(--ink); }
.stage .scan .cap small { display: block; font-weight: 500; color: var(--ink-3); font-size: 1.9cqh; margin-top: .6cqh; overflow-wrap: anywhere; }

/* progress bar along the bottom */
.stage .progress { position: absolute; left: 0; right: 0; bottom: 0; height: .7cqh; background: var(--line); }
.stage .progress i { display: block; height: 100%; width: 0; background: var(--accent); }

.stage .emptyMsg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: 3.4cqh; padding: 0 10cqw; line-height: 1.35; }
.stage .emptyMsg b { display: block; color: var(--ink); font-size: 5cqh; margin-bottom: 1.2cqh; }

/* portrait screens (e.g. a tablet on a stand): picture on top, text below */
@container (orientation: portrait) {
  .stage .slide { grid-template-columns: 1fr; grid-template-rows: 46fr 54fr; gap: 2.4cqh; }
  .stage .bar { --title-size: 2.8cqh; }
  .stage .info .name { --fs: 3.6cqh; }
  .stage .info .who { font-size: 2cqh; }
  .stage .info .text { --fs: 2.4cqh; }
  .stage .qr, .stage.qr-medium .qr { width: 12cqh; height: 12cqh; }
  .stage.qr-small .qr { width: 9cqh; height: 9cqh; }
  .stage.qr-large .qr { width: 15cqh; height: 15cqh; padding: 1cqh; }
  .stage .scan .cap { font-size: 1.9cqh; }
  .stage .scan .cap small { font-size: 1.6cqh; }
}