/* One slide design for beamer, run preview and editor preview. Sizes scale with the slide width. */
.slide {
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--ink); border-radius: var(--radius-lg);
}
.slide.framed { aspect-ratio: 16 / 9; width: 100%; box-shadow: var(--shadow); }
.slide-bar {
  display: flex; justify-content: center; align-items: center; gap: .6cqw; flex-wrap: wrap;
  padding: .9cqw 2cqw; background: var(--bg); color: var(--muted); font-size: 1.35cqw; font-weight: 500;
}
.slide-bar b { color: var(--ink); font-weight: 750; }
.slide-bar .slide-bar-code { padding: .1cqw .7cqw; border-radius: .5cqw; background: #fff; letter-spacing: .08em; }
.slide-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 3cqw 4.5cqw 2.2cqw; }
.slide-eyebrow { font-size: 1.2cqw; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.slide-title { margin-top: .6cqw; font-size: 3.6cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: anywhere; }
.slide-title.long { font-size: 2.6cqw; }
.slide-content { flex: 1; min-height: 0; margin-top: 2.6cqw; display: flex; flex-direction: column; }
.slide-foot { position: absolute; right: 1.6cqw; bottom: 1.2cqw; display: flex; align-items: center; gap: .5cqw; color: var(--faint); font-size: 1.3cqw; font-weight: 700; }
.slide-foot .icon { width: 1.6cqw; height: 1.6cqw; }
.slide-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.2cqw; padding: .3cqw 1cqw; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 1.15cqw; font-weight: 700; }
.slide-note.locked { background: var(--danger-soft); color: #b3262b; }

/* Waiting for answers */
.waiting { flex: 1; display: grid; place-content: center; justify-items: center; gap: .6cqw; text-align: center; }
.waiting-count { font-size: 9cqw; font-weight: 800; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.waiting-label { font-size: 2cqw; font-weight: 700; }
.waiting-dots { display: flex; gap: .8cqw; margin-top: 1.2cqw; }
.waiting-dots span { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--tone); animation: bounce 1.2s infinite; }
.waiting-dots span:nth-child(2) { animation-delay: .15s; }
.waiting-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.8cqw); } }

/* Choice: vertical columns */
.columns { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 2.4cqw; padding: 0 2cqw; }
.column { flex: 1 1 0; max-width: 15cqw; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.column-value { font-size: 2.2cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.column-track { position: relative; flex: 1; width: 100%; margin-top: .5cqw; border-bottom: .2cqw solid var(--line); }
.column-bar { position: absolute; left: 0; right: 0; bottom: 0; min-height: .35cqw; border-radius: .7cqw .7cqw 0 0; background: var(--tone); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.column-label { margin-top: 1cqw; width: 100%; font-size: 1.55cqw; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Word cloud */
.cloud { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: .2cqw 1.8cqw; overflow: hidden; }
.cloud-word { color: var(--tone); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; animation: pop .4s ease-out; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* Open answers: cards */
.cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(21cqw, 1fr)); grid-auto-rows: min-content; gap: 1.2cqw; overflow: hidden; align-content: start; }
.answer-card { padding: 1.2cqw 1.4cqw; border-radius: .9cqw; background: color-mix(in srgb, var(--tone) 14%, #fff); border-top: .45cqw solid var(--tone); font-size: 1.5cqw; font-weight: 600; line-height: 1.3; white-space: pre-line; overflow-wrap: anywhere; animation: pop .4s ease-out; }

/* Scale */
.scale { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr auto auto auto; padding: 0 4cqw; }
.scale-grid { display: grid; grid-template-columns: repeat(var(--steps), 1fr); }
.scale-hist { align-items: stretch; min-height: 0; }
.scale-col { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 0 .8cqw; }
.scale-col-count { font-size: 1.4cqw; font-weight: 700; color: var(--muted); }
.scale-col-track { position: relative; flex: 1; width: 100%; max-width: 6cqw; }
.scale-col-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: .6cqw .6cqw 0 0; background: color-mix(in srgb, var(--brand) 22%, #fff); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.scale-line { position: relative; height: 3.2cqw; margin-top: .6cqw; }
.scale-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .35cqw; border-radius: 999px; background: var(--line); transform: translateY(-50%); }
.scale-average { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 7cqw; height: 3.2cqw; padding: 0 1cqw; border-radius: 999px; background: var(--brand); color: #fff; font-size: 1.6cqw; font-weight: 800; box-shadow: 0 .4cqw 1.2cqw rgb(91 91 246 / 35%); transition: left .6s cubic-bezier(.2, .8, .2, 1); }
.scale-ticks { margin-top: .6cqw; text-align: center; font-size: 1.5cqw; font-weight: 700; }
.scale-ends { display: flex; justify-content: space-between; gap: 2cqw; margin-top: .4cqw; color: var(--muted); font-size: 1.3cqw; font-weight: 600; }

/* Start slide */
.lobby { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 4cqw; padding: 3cqw 6cqw; }
.lobby-step { font-size: 2.2cqw; font-weight: 600; color: var(--muted); }
.lobby-host { margin: .3cqw 0 2cqw; font-size: 4.4cqw; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.lobby-code { margin-top: .4cqw; font-size: 8.5cqw; font-weight: 800; line-height: 1; letter-spacing: .04em; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-qr { justify-self: center; display: grid; justify-items: center; gap: 1cqw; width: min(100%, 26cqw); }
.lobby-qr svg { width: 100%; height: auto; padding: 1cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0 0 .2cqw var(--line); }
.lobby-qr p { font-size: 1.4cqw; font-weight: 600; color: var(--muted); }
.lobby-title { position: absolute; left: 6cqw; bottom: 1.4cqw; font-size: 1.5cqw; font-weight: 700; color: var(--faint); }

/* Pause and messages */
.slide-center { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1.2cqw; padding: 4cqw; text-align: center; }
.slide-center h1 { font-size: 5cqw; font-weight: 800; }
.slide-center p { font-size: 2cqw; color: var(--muted); }
.pause-mark { display: flex; gap: 1.2cqw; }
.pause-mark span { width: 2.4cqw; height: 8cqw; border-radius: 999px; background: var(--brand); }
.pause-mark span:nth-child(2) { background: var(--tone-1); }
.empty-note { flex: 1; display: grid; place-items: center; color: var(--faint); font-size: 1.8cqw; font-weight: 600; }