/* Ambiente de cards da audiência — portado de docs/referencia-cards.html.
 *
 * O que NÃO veio junto, e por quê:
 *   .internal / .preview-tab / .legend — andaimes da apresentação interna. A
 *     faixa amarela descreve qual sinal cada card extrai e não pode aparecer
 *     para a audiência NEM para o dono do evento (R3).
 *   .reveal / .choice.correct / .choice.wrong — revelavam o gabarito depois da
 *     resposta. R2: isto é insumo, não prova. O cliente sequer recebe a resposta
 *     certa, então não teria como marcá-la.
 *   .conf-reveal — mesma coisa no card de confiança.
 *
 * Tema fixo claro, como na referência. Mobile primeiro: a audiência responde no
 * celular, chegando por QR code.
 */

:root{
  color-scheme:light;
  --ground:#f4f5f9; --surface:#ffffff; --surface-2:#fbfbfe;
  --border:#e6e7ef; --border-strong:#d5d7e3;
  --ink:#191a26;
  /* --faint era 2.7:1 no branco e não é decoração: veste os rótulos em mono
     que são INSTRUÇÃO ("How sure are you?", "Do you know this?"). Os dois
     desceram um passo para passar em AA; a hierarquia entre eles nunca veio
     desses 4% de luminosidade, e sim do tamanho, da caixa e do tracking. */
  --muted:#5c5f70; --faint:#6c6f85;
  --accent:#5b50f6; --accent-ink:#3f34d6; --accent-soft:#edecfe; --accent-line:#d9d6fb;
  --good:#0b7a52; --good-soft:#e5f5ed; --good-line:#bfe6d3;
  /* Estavam em hex cru dentro de results.html e cards.html. */
  --bad:#c23b2c; --bad-soft:#fbeceb; --bad-line:#f2ccc7;
  --warn:#8a5d04; --warn-soft:#fbf4e1; --warn-line:#efe1bb;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(24,26,40,.04), 0 8px 24px -12px rgba(24,26,40,.12);
  --font-display:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --font-body:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 20px 96px}
a{color:var(--accent-ink)}
[hidden]{display:none!important}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom:1px solid var(--border);
}
.topbar .row{max-width:720px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:12px}
.brand{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--accent-ink)}
.topbar .tag{
  margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:999px; padding:5px 11px;
}

/* ---------- Hero ---------- */
header.hero{padding:38px 0 24px}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px;
}
h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(27px,5.2vw,40px); line-height:1.06; margin:0 0 14px; text-wrap:pretty;
}
.lede{font-size:17px; color:var(--muted); max-width:64ch; margin:0}
.meta-strip{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; padding-top:20px;
  border-top:1px solid var(--border);
}
.meta-strip div{font-size:13px; color:var(--muted)}
.meta-strip b{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:3px}
.meta-strip span{color:var(--ink); font-weight:500}
.topics{margin-top:20px}
.topics h2, .before h2{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin:0 0 8px}
.topics ul{margin:0; padding-left:20px; max-width:64ch}
.topics li{font-size:15.5px; color:var(--ink); line-height:1.45; margin-bottom:5px}
.topics li::marker{color:var(--accent)}

/* ---------- Antes de começar ---------- */
.before{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:18px}
.before h2{color:var(--accent-ink)}
.before ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.before li{font-size:14.5px; color:var(--muted); line-height:1.5}
.before li b{color:var(--ink); font-weight:600}

/* ---------- Bloco de card ---------- */
.block{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px;
}
.card{padding:18px}
/* `pretty` e não `balance`: balance iguala o comprimento das linhas e por
   isso quebrava o título cedo demais, deixando metade do card vazia.
   pretty só evita órfã na última linha. */
.q{font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px; text-wrap:pretty}
.q .src{display:block; font-size:12.5px; font-family:var(--font-mono); color:var(--faint);
  font-weight:500; margin-top:6px; letter-spacing:0}
.prompt{font-size:15px; color:var(--muted); margin:6px 0 0}

/* ---------- Escolhas ---------- */
.choices{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.choice{
  text-align:left; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; width:100%;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:13px 15px; display:flex; align-items:center; gap:12px;
  transition:border-color .15s, background .15s, transform .06s;
}
/* Hover só onde existe ponteiro de verdade: no toque o :hover gruda depois do
   tap, e a opção debaixo do dedo no card SEGUINTE parecia já escolhida. */
@media (hover:hover){ .choice:hover{border-color:var(--accent); background:var(--accent-soft)} }
.choice:active{transform:translateY(1px)}
.choice .k{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:6px; width:24px; height:24px;
  display:grid; place-items:center; flex:none}
/* Estado "escolhida" — marca a SUA resposta, sem qualquer juízo de certo/errado. */
.choice.chosen{border-color:var(--accent); background:var(--accent-soft)}
.choice.chosen .k{border-color:var(--accent); color:var(--accent-ink)}
.choices.done .choice{cursor:default; pointer-events:none}
.choices.done .choice:not(.chosen){opacity:1; color:var(--muted);
  background:var(--surface); border-color:var(--border)}
.choices.done .choice:not(.chosen) .k{color:var(--muted); border-color:var(--border)}

/* ---------- Botões ---------- */
.btn{font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border-radius:var(--radius-sm);
  padding:11px 14px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink);
  transition:border-color .15s, background .15s, transform .06s}
@media (hover:hover){ .btn:hover{border-color:var(--accent); background:var(--accent-soft)} }
.btn:active{transform:translateY(1px)}
.btn.sel{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
@media (hover:hover){ .btn.primary:hover{background:var(--accent-ink)} }
/* Card respondido é o estado em que a pessoa passa a maior parte do tempo.
   Apagar o botão inteiro levava a escolha DELA a 2.4:1 — mais fraca que as
   opções que ela descartou. Recuar por cor, não por opacidade. */
.btn[disabled]{opacity:1; cursor:default; pointer-events:none;
  color:var(--muted); background:var(--surface); border-color:var(--border)}
.btn.sel[disabled]{color:var(--accent-ink); background:var(--accent-soft);
  border-color:var(--accent)}

/* ---------- Posicionamento (afirmação) ---------- */
.stance{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.stance .btn{flex:1; min-width:110px}
.barwrap{margin-top:16px}
.bar{display:flex; height:38px; border-radius:9px; overflow:hidden; border:1px solid var(--border)}
.bar .seg{display:flex; align-items:center; padding:0 12px; font-size:13px; font-weight:700;
  min-width:44px; white-space:nowrap; overflow:hidden}
.bar .seg.a{background:var(--accent); color:#fff}
.bar .seg.b{background:color-mix(in srgb,var(--accent) 32%, var(--surface-2)); color:var(--ink)}
.bar .seg.c{background:var(--surface-2); color:var(--muted)}
.barnote{font-size:12.5px; color:var(--muted); margin-top:8px; font-family:var(--font-mono)}
.youtag{color:var(--accent-ink); font-weight:700}

/* ---------- Escala ---------- */
.scale{margin-top:18px}
.scale input[type=range]{width:100%; accent-color:var(--accent)}
.scale .ends{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--muted); margin-top:6px}
.scale .val{text-align:center; font-family:var(--font-display); font-weight:700; font-size:30px;
  color:var(--accent-ink); margin-bottom:2px; letter-spacing:-.02em}
.scale .dist{font-size:12.5px; color:var(--faint); text-align:center; font-family:var(--font-mono); margin-top:10px}

/* ---------- Lacuna ---------- */
.fill{margin-top:14px; display:flex; gap:9px; flex-wrap:wrap}
.fill input{flex:1; min-width:180px; font:inherit; font-size:15px; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink)}
.fill input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.blankline{font-family:var(--font-mono); color:var(--accent-ink)}

/* ---------- Ranking ---------- */
.rank{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.rank-item{display:flex; align-items:center; gap:12px; cursor:pointer; font-size:15px; font-weight:500;
  text-align:left; width:100%; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:12px 14px; transition:border-color .15s, background .15s}
@media (hover:hover){ .rank-item:hover{border-color:var(--accent)} }
.rank-item .badge{width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--faint);
  border:1px dashed var(--border-strong)}
.rank-item.picked{border-color:var(--accent-line); background:var(--accent-soft)}
.rank-item.picked .badge{border:none; background:var(--accent); color:#fff}
.rankhint{font-size:12.5px; color:var(--faint); margin-top:10px; font-family:var(--font-mono)}
.rank.done .rank-item{pointer-events:none}

/* ---------- Perguntas com voto ---------- */
.qa{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.qa-item{display:flex; align-items:center; gap:13px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px}
.up{display:flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer; user-select:none;
  border:1px solid var(--border-strong); border-radius:8px; padding:5px 9px; min-width:46px;
  background:var(--surface); font-family:inherit;
  transition:border-color .15s, background .15s, color .15s}
.up:hover{border-color:var(--accent); color:var(--accent-ink)}
.up.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)}
.up .arw{font-size:12px; line-height:1}
.up .cnt{font-family:var(--font-mono); font-weight:600; font-size:14px}
.qa-item .qt{font-size:15px; line-height:1.4}
/* Pergunta da própria pessoa: card separado e em destaque (borda e fundo de
   acento), porque é o único campo aberto da sala e é opcional. */
.block.ask{border:2px solid var(--accent); background:var(--accent-soft)}
.block.ask .card{padding:20px 18px}
.ask-eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px}
.addq{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.addq textarea, .addq input{width:100%; font:inherit; font-size:15px; line-height:1.5; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--accent-line); background:var(--surface);
  color:var(--ink); resize:vertical; min-height:84px}
.addq textarea:focus, .addq input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.addq .btn{align-self:flex-end}
.ask-done{margin:10px 0 0; font-size:14px; font-weight:600; color:var(--good)}

/* ---------- Texto aberto ---------- */
.opentext{margin-top:14px}
.opentext textarea{width:100%; font:inherit; font-size:15px; padding:13px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink); resize:vertical; min-height:78px}
.opentext textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.opentext .row{display:flex; justify-content:flex-end; margin-top:10px}

/* Confirmação de registro. Substitui o antigo `.reveal`: confirma que entrou,
   e nada mais — sem gabarito, sem explicação, sem destaque de alternativa. */
.recorded{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--good);
  font-weight:600; margin-top:13px}
/* Discreto de propósito: é uma saída para o toque errado, não um convite a
   rever tudo. Alvo de toque de 44px mesmo parecendo um link. */
.change-answer{margin-left:auto; font:inherit; font-size:13.5px; font-weight:600; color:var(--accent-ink);
  background:none; border:0; padding:12px 2px; min-height:44px; margin-block:-12px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.changing{font-size:13px; color:var(--muted); margin:12px 0 0}

/* ---------- Autoavaliação (flashcard invertido) ---------- */
/* Sem flip: virar o card É a revelação, e revelar viola R2. A pessoa declara o
   que sabe ANTES de ver qualquer resposta — e continua sem vê-la depois. */
.fc-front{border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); padding:26px 20px; min-height:104px; margin-top:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.fc-front .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.fc-front .txt{font-size:17px; font-weight:600}
.self{display:flex; gap:9px; margin-top:12px; flex-wrap:wrap}
.self .btn{flex:1; min-width:130px}
.fc-after{margin-top:13px; font-size:14px; color:var(--muted); border-left:2px solid var(--accent-line);
  padding:2px 0 2px 14px; line-height:1.5}

/* ---------- Confiança ---------- */
.conf-chips{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap}
.conf-chips .btn{flex:1; min-width:110px; font-size:13.5px}
.conf-step{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-top:16px}

/* ---------- Nuvem de palavras ---------- */
.wc{margin-top:14px}
.wc-cloud{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; min-height:44px; margin-bottom:12px}
.wc-chip{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:999px;
  padding:4px 13px; line-height:1.3}
.wc-add{display:flex; gap:9px; flex-wrap:wrap}
.wc-add input{flex:1; min-width:160px; font:inherit; font-size:14.5px; padding:11px 13px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink)}
.wc-add input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

/* ---------- Erro de envio ---------- */
.sendfail{font-size:13px; color:#c23b2c; margin-top:10px}

/* ---------- Fim da lista ---------- */
.theend{margin-top:30px; padding:24px 20px; text-align:center;
  border-top:1px solid var(--border)}
.theend h2{font-family:var(--font-display); font-weight:600; font-size:19px;
  letter-spacing:-.02em; margin:0 0 10px}
.theend p{margin:0 0 8px; font-size:14.5px; color:var(--muted); line-height:1.55;
  max-width:46ch; margin-left:auto; margin-right:auto}
.theend strong{color:var(--good); font-weight:600}
.finish-btn{display:inline-flex; align-items:center; justify-content:center; margin-top:10px;
  width:100%; max-width:380px; text-decoration:none}
.finish-note{font-size:13px!important}
.finish-err{color:var(--bad)!important; font-size:14px!important; margin-top:12px!important}
/* Card obrigatório que ficou para trás: marcado ao tentar concluir. */
.block.missing{border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
.block.missing .card::before{content:"Needs an answer"; display:block; font-family:var(--font-mono);
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--bad);
  margin-bottom:8px}

/* ---------- Encerrado ---------- */
.closed{position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(25,26,40,.55); padding:20px}
.closed .panel{background:var(--surface); border-radius:var(--radius); padding:26px 24px;
  max-width:340px; text-align:center; box-shadow:var(--shadow)}
.closed h2{font-family:var(--font-display); font-size:19px; margin:0 0 6px}
.closed p{margin:0; font-size:14px; color:var(--muted)}

/* Três botões a 110px mínimos não cabem nos 297px de um card no celular, e a
   terceira opção virava uma faixa inteira — a mais destacada das três, num
   card cujo trabalho é ler a posição da sala SEM empurrá-la. Duas continuam
   lado a lado; três ou mais empilham. */
@media (max-width:430px){
  .stance > .btn:first-child:nth-last-child(n+3),
  .stance > .btn:first-child:nth-last-child(n+3) ~ .btn,
  .conf-chips > .btn:first-child:nth-last-child(n+3),
  .conf-chips > .btn:first-child:nth-last-child(n+3) ~ .btn{ flex:1 1 100%; min-width:0 }
}

/* Topbar é sticky: sem isto, âncora e scrollIntoView param embaixo dela. */
html{scroll-padding-top:70px}

/* 96px de vazio depois do fim da lista parecia página que não carregou. */
@media (max-width:720px){ .wrap{padding-bottom:48px} }

/* O hero comia uma tela e meia antes do primeiro card. Quem chega pelo QR já
   sabe em que palestra está. */
@media (max-width:480px){
  header.hero{padding:26px 0 18px}
  .lede{font-size:15.5px; max-width:none}
  .meta-strip{margin-top:16px; padding-top:14px; gap:8px 18px}
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Foco visível em tudo que recebe foco, não só em button. */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .rank-item:focus-visible, .up:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ═══════════════════════════════════════════════════════════════════════════
   Telas do dono do evento
   ═══════════════════════════════════════════════════════════════════════════
   Estas cinco telas usavam Tailwind por CDN enquanto o resto do produto usava
   o sistema portado da referência: duas fontes, dois roxos parecidos o
   bastante para parecer erro, dois cinzas de fundo e raios em proporção 2×.
   Além disso o CDN é o compilador JIT em runtime — ~100KB de JS bloqueante que
   gera o CSS depois do DOM, com um flash de página sem estilo a cada carga.
   Aqui não há nenhuma cor nova: tudo sai dos tokens que já existiam. */

/* ---------- Estrutura ---------- */
.stack{display:flex; flex-direction:column; gap:16px}
.panel-card{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px}
.panel-card > h2{font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:-.01em; margin:0 0 4px}
.panel-card > p.sub{margin:0 0 16px; font-size:14.5px; color:var(--muted); line-height:1.5}
.panel-card > p.sub:last-child{margin-bottom:0}
.cols{display:grid; gap:16px}
@media (min-width:640px){ .cols.two{grid-template-columns:1fr 1fr} }
.narrow{max-width:440px; margin:0 auto}

/* ---------- Passos do fluxo ---------- */
/* A ordem das etapas já existia no servidor (_STEP_ORDER) e nunca chegava à
   tela: cada página era uma ilha com um "← Voltar" de texto, quando tinha. */
.steps{display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--border)}
.steps a, .steps span{font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  border-radius:999px; padding:6px 11px; white-space:nowrap;
  border:1px solid transparent; color:var(--muted)}
.steps a:hover{background:var(--surface); border-color:var(--border-strong); color:var(--ink)}
.steps [aria-current="step"]{background:var(--accent-soft); border-color:var(--accent-line);
  color:var(--accent-ink)}
.steps .todo{color:var(--faint)}
.steps .sep{color:var(--border-strong); padding:0}
@media (max-width:560px){ .steps{gap:3px} .steps a, .steps span{padding:5px 8px; font-size:10px} }

/* ---------- Formulários ---------- */
.field{margin-bottom:16px}
/* fieldset traz borda e padding do navegador, e legend não é label — sem isto
   o grupo de radios saía com um contorno de formulário de 1998 e um rótulo
   fora do padrão dos outros campos. */
fieldset.field{border:0; padding:0; margin-inline:0; min-inline-size:0}
.field > label, .field > legend{display:block; font-family:var(--font-mono); font-size:11px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  margin-bottom:6px; padding:0}
.field input[type=text], .field input[type=url], .field input[type=password],
.field input[type=email], .field select, .field textarea{
  width:100%; font:inherit; font-size:15px; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink)}
.field textarea{min-height:118px; resize:vertical; line-height:1.55}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent)}
.field .hint{margin:6px 0 0; font-size:13px; color:var(--muted)}
.field .err{margin:6px 0 0; font-size:13px; color:var(--bad)}
.field.has-error input, .field.has-error textarea, .field.has-error select{
  border-color:var(--bad-line)}
/* Especificidade: `.field input[type=text]` tem seletor de atributo e vence
   `.field .mono`, então o font:inherit dele apagava a mono. */
.field input.mono, .field .mono{font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.08em}

/* Radio e checkbox como alvo de toque: criar evento também acontece no celular. */
.pickset{display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.pickset label{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:15px;
  min-height:46px; padding:0 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface-2)}
.pickset label:hover{border-color:var(--accent); background:var(--accent-soft)}
.pickset input{accent-color:var(--accent); width:18px; height:18px; flex:none}
.pickset label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* ---------- Avisos ---------- */
.flash{border-radius:var(--radius-sm); padding:12px 15px; font-size:14.5px; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--ink)}
.flash.success{background:var(--good-soft); border-color:var(--good-line); color:var(--good)}
.flash.danger{background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad)}
.flash.warning{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.note{font-size:14px; line-height:1.5; margin:0}
.note.warn{color:var(--warn)}

/* ---------- Área de upload ---------- */
.drop{display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; cursor:pointer; gap:5px; padding:32px 20px;
  border:2px dashed var(--border-strong); border-radius:var(--radius);
  background:var(--surface-2)}
.drop:hover, .drop:focus-within{border-color:var(--accent); background:var(--accent-soft)}
.drop b{font-size:15px; color:var(--accent-ink); font-weight:600}
.drop span{font-size:13px; color:var(--muted)}
.drop .chosen{font-size:13px; font-weight:600; color:var(--ink)}

/* ---------- Lista de arquivos ---------- */
.filelist{list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden}
.filelist li{display:flex; align-items:center; gap:12px; padding:11px 14px; font-size:14.5px;
  border-bottom:1px solid var(--border)}
.filelist li:last-child{border-bottom:0}
.filelist .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist .warnflag{flex:none; font-size:12px; color:var(--warn)}
.filelist .btn{flex:none; padding:7px 11px; font-size:12px; min-height:36px}
.filelist .btn:hover{border-color:var(--bad-line); color:var(--bad)}
.empty{margin:18px 0 0; padding:22px; text-align:center; font-size:14px; color:var(--muted);
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm)}

/* ---------- Cabeçalho do evento ---------- */
.eventhead{margin-bottom:20px}
.eventhead h1{font-size:clamp(22px,4.4vw,30px); margin:0 0 6px}
.eventhead .who{font-size:15px; color:var(--muted); margin:0}
.eventhead .where{font-size:13.5px; color:var(--faint); margin:3px 0 0}
.eventhead .code{margin:16px 0 0; padding:11px 14px; font-size:14px; line-height:1.5;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--radius-sm); color:var(--accent-ink)}
.eventhead .code strong{font-family:var(--font-mono); letter-spacing:.1em; font-weight:600}

/* ---------- Botões auxiliares ---------- */
.btn.wide{width:100%; justify-content:center}
.btn.tall{padding:13px 16px; font-size:15px}
.btn-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px}
.backlink{display:inline-block; margin-top:20px; font-size:14px; color:var(--muted);
  text-decoration:none}
.backlink:hover{color:var(--accent-ink)}
.stuck{margin:14px 0 0; font-size:13.5px; color:var(--warn); line-height:1.5}
.stuck a{color:var(--accent-ink)}
.spinner{display:inline-block; width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb,#fff 45%, transparent); border-top-color:#fff;
  animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none} }

/* ---------- Materiais de referência ----------
   Mesmo cartão na página da audiência e na prévia do autor. */
.refs{display:grid; gap:12px}
.ref{display:flex; gap:14px; align-items:stretch; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .15s, box-shadow .15s}
.ref:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.ref-thumb{position:relative; flex:none; width:108px; min-height:96px; background:var(--surface-2);
  border-right:1px solid var(--border); overflow:hidden}
.ref-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.ref-thumb.empty{display:grid; place-items:center; background:var(--accent-soft)}
.ref-kind{position:absolute; left:8px; bottom:8px; font-family:var(--font-mono); font-size:10px;
  font-weight:600; letter-spacing:.06em; color:var(--accent-ink); background:var(--surface);
  border:1px solid var(--accent-line); border-radius:5px; padding:2px 6px}
.ref-thumb.empty .ref-kind{position:static; font-size:12px}
.ref-body{display:flex; flex-direction:column; gap:4px; padding:12px 14px 12px 0; min-width:0}
.ref-title{font-weight:600; font-size:15.5px; line-height:1.35; overflow-wrap:anywhere}
.ref-src{font-size:13px; color:var(--muted); overflow-wrap:anywhere}
.ref-go{margin-top:auto; padding-top:4px; font-size:13.5px; font-weight:600; color:var(--accent-ink)}
.ref-admin{display:grid; gap:8px}
.ref-actions{display:flex; gap:8px; flex-wrap:wrap}
.ref-rename{display:flex; gap:8px; flex:1; min-width:0}
.ref-rename input{flex:1; min-width:0; font:inherit; font-size:14px; padding:9px 11px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink)}
.refs-intro{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin:6px 0 18px; box-shadow:var(--shadow)}
.refs-intro.pending{border:2px solid var(--accent); background:var(--accent-soft)}
.refs-intro h2{font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.015em;
  margin:0 0 8px; text-wrap:pretty}
.refs-intro p{margin:0; font-size:15px; color:var(--muted); line-height:1.55}
.refs-intro .eyebrow{margin-bottom:8px}
.refs-intro ul{margin:10px 0 0; padding-left:20px; font-size:15px; color:var(--ink); line-height:1.6}
.refs-intro li::marker{color:var(--accent)}
.refs-intro .must{margin-top:12px; font-weight:700; color:var(--accent-ink)}
.pickset label.unavailable{cursor:default; opacity:.8}
.pickset .warnflag{display:block; margin-top:2px; font-size:12px; color:var(--warn)}

/* ---------- Página de materiais da audiência ---------- */
.passcode{background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; margin-bottom:26px}
.passcode h2, .refs-section > h2{font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.passcode-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.passcode-value{font-family:var(--font-mono); font-size:30px; font-weight:600; letter-spacing:.08em;
  color:var(--accent-ink); user-select:all}
.passcode p{font-size:14px; color:var(--muted); line-height:1.55; margin:12px 0 0}
.passcode a{color:var(--accent-ink)}
.empty-refs{font-size:15px; color:var(--muted)}
.back-room{margin-top:26px; font-size:14px; color:var(--muted); display:flex; flex-direction:column; gap:4px}
.back-room a{color:var(--accent-ink); font-weight:600}
.entercode{max-width:420px}
.inline-code{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.inline-code .btn{min-height:46px}

/* ---------- Progresso das esperas (flipee-progress.js) ---------- */
.progress{margin-top:16px; text-align:left}
.progress-track{height:8px; border-radius:999px; background:var(--accent-soft);
  border:1px solid var(--accent-line); overflow:hidden}
.progress-fill{height:100%; width:0; border-radius:999px; background:var(--accent);
  transition:width .25s linear}
.progress-phrase{margin:10px 0 0; font-size:13.5px; color:var(--muted); min-height:1.5em;
  transition:opacity .22s}
.progress-phrase.swap{opacity:0}
@media (prefers-reduced-motion:reduce){ .progress-fill, .progress-phrase{transition:none} }

/* ---------- Sala em passos (flipee-stepper.js) ---------- */
body.stepper .step-off{display:none!important}
.stephead{padding:18px 0 14px}
.stephead-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px}
.stephead-title{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.stephead-count{flex:none; font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.04em; color:var(--muted)}
.intro-start{margin:4px 0 8px}
.intro-start .btn{width:100%; justify-content:center}
.stepnav{display:flex; align-items:center; gap:10px; margin:4px 0 16px}
.stepnav .step-hint{flex:1; margin:0; text-align:center; font-size:13px; color:var(--muted)}
.stepnav .btn{min-height:46px; padding:0 18px}
.stepnav .step-next:disabled{opacity:.45; cursor:not-allowed}
body.stepper .theend{margin-top:8px; border-top:0}


/* Palavra ou URL longa sem espaço estourava a largura do card. */
.q, .prompt, .lbl-text, .qt, .fc-front .txt{overflow-wrap:anywhere}

/* ---------- Referências do autor: duas colunas no desktop ---------- */
body.pagina-larga .wrap, body.pagina-larga .topbar .row{max-width:1080px}
.refs-layout{display:flex; flex-direction:column; gap:18px; margin-top:4px}
.refs-add{order:1}
.refs-summary{order:2}
.refs-add-title{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.refs-add .panel-card > h3{font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 6px}
.refs-add .panel-card > p.sub{margin:0 0 16px; font-size:14.5px; color:var(--muted); line-height:1.5}
@media (min-width:900px){
  .refs-layout{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; gap:24px}
  .refs-summary{order:0; position:sticky; top:84px}
  .refs-add{order:1}
}
.refs-count{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; margin-left:6px;
  border-radius:999px; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:13px;
  vertical-align:2px}
.refs-empty{font-size:14.5px; color:var(--muted); margin:0 0 14px; line-height:1.5}
.refs-go{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; margin-top:14px}
.refs-go:disabled{opacity:.45; cursor:not-allowed}
.refs-mini{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.refs-mini li{border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; background:var(--surface-2)}
.refs-mini-row{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink)}
.refs-mini-thumb{position:relative; flex:none; width:52px; height:52px; border-radius:7px; overflow:hidden;
  background:var(--accent-soft); display:grid; place-items:center}
.refs-mini-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top}
.refs-mini-thumb span{font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--accent-ink)}
.refs-mini-thumb:not(.empty) span{display:none}
.refs-mini-text{display:flex; flex-direction:column; min-width:0}
.refs-mini-text b{font-size:14.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.refs-mini-text small{font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.refs-mini-actions{display:flex; align-items:flex-start; gap:14px; margin-top:6px; padding-left:62px; flex-wrap:wrap}
.refs-mini-actions details{flex:1; min-width:0}
.refs-mini-actions summary, .linkish{font:inherit; font-size:13px; font-weight:600; color:var(--accent-ink);
  cursor:pointer; background:none; border:0; padding:4px 0; min-height:32px}
.refs-mini-actions summary{list-style:none}
.refs-mini-actions summary::-webkit-details-marker{display:none}
.refs-mini-actions details[open] summary{margin-bottom:6px}
.linkish{color:var(--muted)}
.linkish:hover{color:var(--bad)}