/* Hallmark · shape: app screen · genre: editorial · theme: brand (spec 2026-11-06, the couple's wedding site)
 * paper: oklch(98.5% 0.004 122) · accent: oklch(55.7% 0.056 122) · display: Ms Madi · body: Lato
 * nav: none on the guest page, a sticky bar on the gallery, header and tabs on the moderator · signature: the couple's names in the same script as their wedding site, over an olive line under the date, and the telão waiting screen in the site's olive band · states: inicio, enviando, fechada, encerrada, galeria, ampliada, telao foto, telao espera, telao encerrada, login, moderador
 * axes: light/handwritten/chromatic-olive · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, a thin script reads poorly small; Ms Madi is kept to the names and the big titles, Lato carries every working line */
/* Hallmark · dismissed 40 · the flagged pair is a progress bar against its track, a graphic held to 3:1, which it clears */
/* Hallmark · dismissed 25 · the notice under the closed or ended party is one or two short sentences, centred in a phone-width card */

/* ---------- fonts, served by the app itself (OFL, see fonts/LICENCA.txt) ---------- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Ms Madi"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ms-madi-400.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-saida: 400ms; --dur-entrada: 600ms;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  --color-paper: oklch(98.5% 0.004 122); --color-paper-2: oklch(96% 0.010 122); --color-paper-3: oklch(92% 0.016 122);
  --color-ink: oklch(36% 0.018 245); --color-ink-2: oklch(42% 0.016 245); --color-muted: oklch(52% 0.010 245);
  --color-rule: oklch(88% 0.014 122);
  --color-accent: oklch(55.7% 0.056 122); --color-accent-2: oklch(47.6% 0.047 122); --color-accent-ink: oklch(99% 0.004 122); --color-focus: oklch(50% 0.12 122);
  --color-error: oklch(52% 0.19 27); --color-error-2: oklch(46% 0.18 27); --color-success: oklch(50% 0.12 150); --color-espera: oklch(48% 0.10 70);
  --color-oliva-escuro: oklch(31% 0.035 122); --color-oliva-escuro-2: oklch(25% 0.03 122);
  --color-sobre-oliva: oklch(98.5% 0.004 122); --color-sobre-oliva-2: oklch(88% 0.03 115);
  --color-overlay: oklch(22% 0.025 122 / 0.97);
  --color-erro-claro: oklch(80% 0.11 30);
  --color-alerta-fundo: oklch(22% 0.025 122 / 0.55);
  --color-seta: oklch(22% 0.025 122 / 0.6); --color-seta-2: oklch(30% 0.03 122 / 0.85);

  --font-display: "Ms Madi", cursive; --font-body: "Lato", ui-sans-serif, system-ui, sans-serif;
  --radius: 4px; --radius-pill: 999px; --rule-hair: 1px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-body); font-weight: 400; font-synthesis: none; color: var(--color-ink); line-height: 1.15; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }

/* the script, only where it is large */
.nomes, .telao-nomes, .telao-espera h1, .galeria-cabeca h1, .aviso-festa h2, .topo-nomes, .login-nomes { font-family: var(--font-display); font-weight: 400; color: var(--color-accent-2); line-height: 1.1; letter-spacing: 0; overflow-wrap: break-word; min-width: 0; }

/* ---------- controls ---------- */
.botao { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; min-height: 56px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius); font: 700 var(--text-lg)/1 var(--font-body); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.botao:active { transform: translateY(1px); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.botao.compacto { width: auto; min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
.botao.principal { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.botao.principal:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.botao.secundario { background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); }
.botao.secundario:hover { background: var(--color-paper-2); }
.botao.perigo { background: var(--color-error); color: var(--color-sobre-oliva); border-color: var(--color-error); }
.botao.perigo:hover { background: var(--color-error-2); border-color: var(--color-error-2); }
.botao.perigo-contorno { background: transparent; color: var(--color-error); border-color: currentColor; }
.botao.perigo-contorno:hover { background: color-mix(in oklab, var(--color-error) 10%, transparent); }

.campo-grupo { display: grid; gap: var(--space-xs); }
.campo-grupo label { font-size: var(--text-md); color: var(--color-ink); }
.campo-grupo label span { color: var(--color-muted); }
.campo { width: 100%; min-height: 56px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); }
.campo::placeholder { color: var(--color-muted); }
.campo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

progress { appearance: none; width: 100%; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; color: var(--color-accent); }
progress::-webkit-progress-bar { background: var(--color-paper-3); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: var(--radius-pill); }
progress::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-pill); }

/* ---------- guest page ---------- */
.tela { min-height: 100dvh; }
.pagina { width: 100%; max-width: 30rem; margin-inline: auto; padding-bottom: var(--space-2xl); }
.conteudo { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-md) 0; }

.capa { display: grid; }
.capa-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-3); }
.capa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.capa-texto { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md) 0; text-align: center; }
.nomes { font-size: clamp(3.2rem, 15vw, 4.2rem); }
.data { font-weight: 700; color: var(--color-ink-2); }
.data::after { content: ""; display: block; width: 4rem; height: 2px; margin: var(--space-sm) auto 0; background: var(--color-accent); }

.intro { display: grid; gap: var(--space-xs); }
.boas-vindas { text-align: center; margin-inline: auto; font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); max-width: 26ch; }
.orienta { color: var(--color-ink-2); max-width: 36ch; }
.acoes { display: grid; gap: var(--space-sm); }
.aviso { font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); max-width: 42ch; }

/* while photos upload, the cover steps back and the welcome gives way to the queue */
.rotulo-mais { display: none; }
.com-envio .rotulo-inicio, .com-envio .intro, .com-envio .campo-grupo { display: none; }
.com-envio .rotulo-mais { display: inline; }
.com-envio .capa-foto { aspect-ratio: 5 / 2; }

.envio { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius); }
.envio-topo { display: grid; gap: var(--space-2xs); }
.envio-topo h2 { font-size: var(--text-xl); font-weight: 700; }
.envio-topo p { color: var(--color-ink-2); }
.envio-total { height: 6px; }
.fila { list-style: none; margin: 0; padding: 0; display: grid; }
.fila li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.fila li:first-child { border-top: 0; }
.fila-mini { width: 56px; height: 56px; border-radius: var(--radius); background: var(--color-paper-3); overflow: hidden; }
.fila-mini img { width: 100%; height: 100%; object-fit: cover; }
.fila-info { display: grid; gap: var(--space-2xs); min-width: 0; }
.fila-nome { color: var(--color-ink); }
.fila-estado { font-size: var(--text-sm); color: var(--color-muted); }
.fila-estado.ok { color: var(--color-success); font-weight: 700; }
.fila-estado.espera { color: var(--color-espera); font-weight: 700; }
.fila-estado.erro { color: var(--color-error); font-weight: 700; }
.fila progress { height: 4px; }
.fila-apagar { min-height: 40px; font-size: var(--text-sm); }
.fila li.apagada .fila-mini { opacity: 0.4; }
.fila li.apagada .fila-nome { color: var(--color-muted); }
.fila-estado.apagada { color: var(--color-muted); font-weight: 700; }

.mensagem-festa { padding: var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-lg); }

.aviso-festa { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius); text-align: center; }
.aviso-festa h2 { font-size: clamp(2.6rem, 12vw, 3.2rem); }
.aviso-festa p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 34ch; }

/* ---------- gallery ---------- */
.topo { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-xs) var(--space-md); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.topo-nomes { font-size: var(--text-3xl); text-decoration: none; }
.galeria-cabeca { display: grid; gap: var(--space-2xs); padding: var(--space-xl) var(--space-md) var(--space-md); text-align: center; }
.galeria-cabeca h1 { font-size: clamp(3rem, 14vw, 3.6rem); }
.galeria-cabeca p { color: var(--color-muted); }
.vazia { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--color-muted); }
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.miniatura { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius); aspect-ratio: 1; background: var(--color-paper-3); cursor: zoom-in; overflow: hidden; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-short) var(--ease-out); }
.miniatura:hover img { opacity: 0.88; }
.miniatura:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }

.overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--color-overlay); color: var(--color-sobre-oliva); }
.overlay-barra { display: flex; justify-content: flex-end; padding: var(--space-sm); }
/* a foto tem o próprio tamanho: tocar no fundo escuro em volta fecha, tocar na foto não */
/* a linha de altura definida é o que faz o max-height: 100% da foto valer; sem ela a foto em pé passava por cima do rodapé */
.overlay-palco { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; padding-inline: var(--space-xs); }
.overlay-palco img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; touch-action: pan-y; }
.seta { position: absolute; top: 50%; z-index: var(--z-raised); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; transform: translateY(-50%); border: 1px solid color-mix(in oklab, var(--color-sobre-oliva) 45%, transparent); border-radius: var(--radius-pill); background: var(--color-seta); color: var(--color-sobre-oliva); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.seta:hover { background: var(--color-seta-2); }
.seta:active { transform: translateY(-50%) scale(0.94); }
.seta:focus-visible { outline: 2px solid var(--color-sobre-oliva); outline-offset: 2px; }
.seta-anterior { left: var(--space-xs); }
.seta-proxima { right: var(--space-xs); }
.overlay-rodape { display: grid; gap: var(--space-sm); justify-items: center; padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); }
.overlay-legenda { text-align: center; color: var(--color-sobre-oliva); }
/* só nas fotos deste aparelho */
.minha-foto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); color: var(--color-sobre-oliva-2); font-size: var(--text-sm); }
.botao.apagar-minha { min-height: 44px; background: transparent; color: var(--color-erro-claro); border-color: var(--color-erro-claro); }
.botao.apagar-minha:hover { background: color-mix(in oklab, var(--color-erro-claro) 14%, transparent); }
.fechar { min-height: 48px; padding: 0 var(--space-lg); border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: var(--color-sobre-oliva); font: 700 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.fechar:hover { background: color-mix(in oklab, var(--color-sobre-oliva) 14%, transparent); }

@media (min-width: 40rem) {
  .pagina-galeria { max-width: 64rem; }
  .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- telão ---------- */
.tela-telao { height: 100dvh; overflow: hidden; background: var(--color-oliva-escuro); color: var(--color-sobre-oliva); cursor: none; }
.telao { display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 23%, 30rem); height: 100%; }
.telao-palco { display: grid; place-items: center; min-width: 0; min-height: 0; padding: var(--space-xl); container-type: size; }
.telao-foto { display: grid; justify-items: center; gap: var(--space-sm); margin: 0; transition: opacity var(--dur-entrada) var(--ease-out); }
/* troca de foto: telao.js põe .saindo, espera a saída (SAIDA_MS = --dur-saida), troca a imagem e tira .saindo quando ela carrega */
.telao-foto.saindo { opacity: 0; transition-duration: var(--dur-saida); transition-timing-function: var(--ease-in); }
/* the photo fills the stage at its own proportion; telao.js sets --ar (width / height) when each photo loads */
/* content-box: a proporção vale para a foto, dentro da moldura; com border-box sobrava uma faixa do fundo
 * entre a foto e a moldura (em cima e embaixo nas fotos em pé, dos lados nas deitadas). cover e não contain:
 * com a proporção igual, o arredondamento corta no máximo 1 px da foto em vez de deixar 1 px de fundo; o fundo
 * branco garante que a borda da foto, em posição fracionária de pixel, se misture com a moldura e não com o fundo escuro */
.telao-foto img { --moldura: clamp(6px, 0.5vw, 12px); box-sizing: content-box; width: min(100cqw - 2 * var(--moldura), (100cqh - 4rem - 2 * var(--moldura)) * var(--ar, 1.5)); height: auto; aspect-ratio: var(--ar, 1.5); object-fit: cover; background: var(--color-sobre-oliva); border: var(--moldura) solid var(--color-sobre-oliva); border-radius: var(--radius); box-shadow: 0 24px 48px -24px var(--color-oliva-escuro-2); }
.legenda { font-size: clamp(1rem, 1.6vw, 1.75rem); color: var(--color-sobre-oliva-2); text-align: center; }
.telao-lado { display: grid; align-content: space-between; gap: var(--space-xl); padding: var(--space-xl); border-left: var(--rule-hair) solid color-mix(in oklab, var(--color-sobre-oliva) 22%, transparent); text-align: center; }
.telao-nomes { font-size: clamp(2.5rem, 4.4vw, 5rem); color: var(--color-sobre-oliva); }
.telao-data { margin-top: var(--space-xs); font-size: clamp(0.9rem, 1.2vw, 1.25rem); font-weight: 700; color: var(--color-sobre-oliva-2); }
.telao-data::after { content: ""; display: block; width: 3rem; height: 2px; margin: var(--space-sm) auto 0; background: var(--color-sobre-oliva-2); }
.qr-cartao { display: grid; gap: var(--space-sm); justify-items: center; padding: var(--space-md); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); text-align: center; }
.qr-cartao img { width: 100%; max-width: 15rem; aspect-ratio: 1; mix-blend-mode: multiply; }
.qr-cartao p { font-size: clamp(1rem, 1.5vw, 1.6rem); line-height: 1.2; color: var(--color-ink); }
.qr-cartao p + p { font-size: clamp(0.8rem, 1vw, 1.05rem); color: var(--color-muted); }

/* waiting for the first photo, and after the party: the site's olive band */
.telao-espera { display: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-3xl); height: 100%; padding: var(--space-3xl) clamp(var(--space-2xl), 8%, var(--space-4xl)); background: var(--color-accent); }
.espera .telao { display: none; }
.espera .telao-espera { display: grid; }
.telao-espera h1 { font-size: clamp(4rem, 7.5vw, 8.5rem); color: var(--color-sobre-oliva); }
.espera-texto { margin-top: var(--space-lg); font-size: clamp(1.25rem, 2.2vw, 2.25rem); line-height: 1.25; color: var(--color-sobre-oliva); max-width: 22ch; }
.telao-espera .qr-cartao { justify-self: center; padding: var(--space-xl); }
.telao-espera .qr-cartao img { max-width: 26rem; }
.encerrada .telao-espera { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.encerrada .espera-texto { margin-inline: auto; }
.encerrada .qr-grande { display: none; }

/* ---------- moderator ---------- */
.mod { max-width: 30rem; padding: 0 0 var(--space-4xl); }
.mod-topo { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md) var(--space-md); }
.mod-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.mod-topo h1 { font-size: var(--text-2xl); font-weight: 700; }
.estado { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-accent-2); font-size: var(--text-sm); font-weight: 700; }
.estado-fechada, .estado-encerrada { background: var(--color-paper-3); color: var(--color-ink); }
.mod-contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 2px solid var(--color-accent); }
.mod-contadores p { padding: var(--space-sm) var(--space-sm) 0; border-left: 1px solid var(--color-rule); font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mod-contadores p:first-child { padding-left: 0; border-left: 0; }
.mod-processando { color: var(--color-espera); }
.mod-processando b { color: var(--color-espera); }

.aviso-sessao { display: block; padding: var(--space-md); background: var(--color-error); color: var(--color-sobre-oliva); font-size: var(--text-lg); font-weight: 700; text-align: center; text-decoration: none; }
.mod-alerta { display: grid; gap: var(--space-md); margin: 0 var(--space-md) var(--space-md); padding: var(--space-md); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink); }

.abas { display: flex; gap: var(--space-lg); padding: 0 var(--space-md); border-bottom: 1px solid var(--color-rule); }
.aba { min-height: 48px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-muted); font: 400 var(--text-md)/1 var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.aba:hover { color: var(--color-ink); }
.aba.ativa { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 700; }
.aba .num { color: var(--color-muted); font-weight: 400; }

.novas { display: flex; justify-content: center; margin: var(--space-sm) var(--space-md) 0; }
.novas:has(#novas[hidden]) { display: none; }
.form-selecao .vazia { display: block; }
.form-selecao:has(.tile) .vazia { display: none; }
.mod-grade { margin-top: var(--space-sm); }
.tile { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius); background: var(--color-paper-3); overflow: hidden; cursor: pointer; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.tile input { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-raised); width: 28px; height: 28px; margin: 0; accent-color: var(--color-accent); }
.tile:has(input:checked) { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.tile:has(input:checked) img { opacity: 0.72; transform: scale(0.9); }
.tile:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.tile.com-erro { display: grid; place-items: center; padding: var(--space-xs); }
.selo { font-size: var(--text-xs); line-height: 1.3; text-align: center; color: var(--color-error); font-weight: 700; }
.selo::first-letter { text-transform: uppercase; }
/* na aba Apagadas: o próprio convidado apagou (o moderador pode restaurar) */
.selo-convidado { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-raised); padding: var(--space-2xs) var(--space-xs); background: var(--color-oliva-escuro); color: var(--color-sobre-oliva); font-size: var(--text-xs); line-height: 1.3; text-align: center; }
.selo-convidado::first-letter { text-transform: uppercase; }

/* the action bar stays under the thumb while the grid scrolls */
.mod-barra { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-accent-2); color: var(--color-sobre-oliva); }
.mod-barra .contagem { font-weight: 700; color: var(--color-sobre-oliva); }
.mod-barra .botao { width: auto; min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
.botao.barra-quieto { background: transparent; color: var(--color-sobre-oliva); border-color: color-mix(in oklab, var(--color-sobre-oliva) 55%, transparent); }
.botao.barra-quieto:hover { border-color: var(--color-sobre-oliva); }
.botao.restaurar { background: var(--color-sobre-oliva); color: var(--color-accent-2); border-color: var(--color-sobre-oliva); }
.botao.restaurar:hover { background: var(--color-paper-2); }

.mod-festa { display: grid; gap: var(--space-md); margin: var(--space-2xl) var(--space-md) 0; padding-top: var(--space-md); border-top: 2px solid var(--color-accent); }
.mod-festa h2 { font-size: var(--text-xl); font-weight: 700; }
.mod-festa-linha { display: grid; gap: var(--space-xs); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.mod-festa-linha p { font-size: var(--text-sm); color: var(--color-muted); }
.mod-esvaziar { margin: var(--space-xl) var(--space-md) 0; }

@media (min-width: 40rem) {
  .mod { max-width: 64rem; }
  .mod-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- confirmações (SweetAlert2 em js/vendor, aberto pelo js/confirmar.js) ----------
 * o CSS da biblioteca chega depois deste (carregado sem bloquear a página): as regras daqui vencem pela
 * especificidade, nunca pela ordem; as variáveis ficam no próprio container, acima das do :root dela */
.swal2-container { --swal2-backdrop: var(--color-alerta-fundo); --swal2-width: 26rem; font-family: var(--font-body); }
.swal2-popup.alerta { padding: var(--space-lg); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
.swal2-popup .alerta-titulo { padding: 0; font: 700 var(--text-xl)/1.25 var(--font-body); color: var(--color-ink); text-wrap: balance; }
.swal2-popup .alerta-texto { margin: var(--space-sm) 0 0; padding: 0; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); }
.swal2-popup .alerta-acoes { flex-wrap: nowrap; gap: var(--space-sm); width: 100%; margin: var(--space-lg) 0 0; padding: 0; }
.swal2-popup .alerta-acoes .botao { flex: 1 1 0; width: auto; min-width: 0; min-height: 48px; margin: 0; padding: 0 var(--space-md); font-size: var(--text-md); }
.swal2-icon.alerta-icone { margin: 0 auto var(--space-md); }
.swal2-icon.alerta-icone.swal2-warning { border-color: var(--color-error); color: var(--color-error); }
.swal2-icon.alerta-icone.swal2-question { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- moderator login ---------- */
.login { display: grid; min-height: 100dvh; align-content: center; padding-inline: var(--space-md); }
.login-caixa { display: grid; gap: var(--space-lg); }
.login-nomes { font-size: clamp(2.6rem, 12vw, 3.2rem); text-align: center; }
.login-caixa h1 { font-size: var(--text-2xl); font-weight: 700; text-align: center; }
.login-form { display: grid; gap: var(--space-md); }
.erro-login { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-error); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .swal2-container, .swal2-container * { animation: none !important; transition: none !important; }
  .botao, .miniatura img, .fechar, .aba, .tile img, .telao-foto, .seta { transition: none; }
  .seta:active { transform: translateY(-50%); }
  .botao:active, .tile:has(input:checked) img { transform: none; }
}