/* Resultados da competicao — CSS proprio, so com os tokens --cr-* de tokens.css.
   Nada de classe Tailwind nova: assim a pagina nao depende de `npm run build:css` para existir,
   e os dois temas (noite por padrao, dia em html.day) saem de graca pelos tokens. */

.res-pagina { padding: 2rem 0 4rem; }

/* --- capa ------------------------------------------------------------------------------- */
.res-capa { border-bottom: 1px solid var(--cr-hairline); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.res-chapeu { margin: 0; color: var(--cr-accent); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: .75rem; }
.res-titulo { margin: .25rem 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15;
  color: var(--cr-ink); }
.res-sub { margin: 0; color: var(--cr-ink-muted); font-size: .95rem; }
.res-vazio { color: var(--cr-ink-muted); padding: 2rem 0; }

/* --- faixa de chamada ------------------------------------------------------------------- */
.res-faixa { background: var(--cr-bg-alt); border-left: 3px solid var(--cr-accent);
  padding: .85rem 1rem; margin: 0 0 1.75rem; color: var(--cr-ink); font-size: .95rem; }
.res-faixa a { color: var(--cr-accent); text-decoration: underline; }
.res-faixa--neutra { border-left-color: var(--cr-hairline); }

/* --- categoria e rodada ----------------------------------------------------------------- */
.res-categoria { margin-bottom: 2.5rem; }
.res-categoria__nome { font-size: 1.35rem; color: var(--cr-ink); margin: 0 0 .25rem;
  border-bottom: 2px solid var(--cr-accent); display: inline-block; padding-bottom: .2rem; }
.res-rodada { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--cr-ink-muted); margin: 1.25rem 0 .5rem; font-weight: 700; }

/* --- lista de duplas -------------------------------------------------------------------- */
.res-lista { list-style: none; margin: 0; padding: 0; }
.res-item { border-bottom: 1px solid var(--cr-hairline); }
.res-item--minha { background: color-mix(in srgb, var(--cr-accent) 8%, transparent); }

.res-dupla__topo { display: grid; grid-template-columns: 3rem 4rem 1fr auto; gap: .75rem;
  align-items: center; padding: .85rem .5rem; cursor: pointer; list-style: none; }
.res-dupla__topo::-webkit-details-marker { display: none; }
.res-dupla__topo:hover { background: var(--cr-bg-alt); }
.res-dupla__topo:focus-visible { outline: 2px solid var(--cr-accent); outline-offset: -2px; }

.res-pos { font-weight: 800; color: var(--cr-accent); font-variant-numeric: tabular-nums; }
.res-num { color: var(--cr-ink-muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.res-nome { color: var(--cr-ink); font-weight: 600; min-width: 0; }
.res-soma { font-weight: 800; color: var(--cr-ink); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; }

.res-etiqueta { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .4rem; margin-left: .4rem; border-radius: var(--cr-radius-pill);
  background: var(--cr-accent); color: var(--cr-bg); vertical-align: middle; }
.res-etiqueta--aviso { background: var(--cr-accent-2); color: #fff; }

/* --- detalhe: as 8 notas ---------------------------------------------------------------- */
.res-detalhe { padding: .25rem .5rem 1.25rem; }
.res-notas { width: 100%; border-collapse: collapse; }
.res-notas__cap { caption-side: top; text-align: left; color: var(--cr-ink-muted);
  font-size: .8rem; padding-bottom: .5rem; }
.res-notas th { text-align: left; font-weight: 500; color: var(--cr-ink-soft); font-size: .9rem;
  padding: .4rem .5rem .4rem 0; }
.res-nota { padding: .4rem .5rem; text-align: right; white-space: nowrap; }
.res-jurado { display: block; font-size: .72rem; color: var(--cr-ink-muted); }
.res-valor { font-weight: 700; color: var(--cr-ink); font-variant-numeric: tabular-nums; }

/* --- bloco privado ---------------------------------------------------------------------- */
.res-privado { margin-top: 1.25rem; border: 1px dashed var(--cr-accent); padding: .9rem 1rem;
  background: var(--cr-bg-alt); }
.res-privado__aviso { margin: 0 0 .75rem; font-size: .8rem; font-weight: 700; color: var(--cr-accent);
  text-transform: uppercase; letter-spacing: .06em; }

.res-jurado-bloco { padding: .6rem 0; border-top: 1px solid var(--cr-hairline); }
.res-jurado-bloco:first-of-type { border-top: 0; }
.res-jurado-bloco__titulo { margin: 0 0 .35rem; font-size: .95rem; color: var(--cr-ink);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.res-jurado-bloco__crit { color: var(--cr-ink-muted); font-weight: 400; font-size: .85rem; }
.res-jurado-bloco__nota { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }

.res-comentario { margin: .25rem 0 .5rem; color: var(--cr-ink); font-size: .95rem; line-height: 1.5; }

.res-erro { margin: .5rem 0 .5rem .75rem; padding-left: .75rem;
  border-left: 2px solid var(--cr-hairline); }
.res-erro__topo { margin: 0; display: flex; gap: .6rem; align-items: baseline; font-size: .8rem; }
.res-erro__musica { color: var(--cr-ink-muted); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; }
.res-erro__valor { color: var(--cr-accent); font-weight: 800; font-variant-numeric: tabular-nums; }

/* `preload="none"` no HTML e obrigatorio: uma dupla pode ter ate 192 audios (24 por jurado x 8).
   Sem ele, abrir a propria dupla no celular baixaria tudo de uma vez. */
.res-audio { display: block; width: 100%; max-width: 22rem; margin: .4rem 0; height: 2.25rem; }

@media (max-width: 40rem) {
  .res-dupla__topo { grid-template-columns: 2.5rem 1fr auto; row-gap: .25rem; }
  .res-num { grid-column: 2; }
  .res-nome { grid-column: 2 / -1; }
  .res-soma { grid-row: 1; grid-column: 3; }
}

/* Variantes do bloco privado: a cor diz de que porta veio o acesso.
   dono = a justificativa e sobre voce; admin = voce ve de todos; jurado = voce escreveu. */
.res-privado--admin { border-style: solid; border-color: var(--cr-ink-muted); }
.res-privado--admin .res-privado__aviso { color: var(--cr-ink-soft); }
.res-privado--jurado { border-style: solid; border-color: var(--cr-accent-2); }
.res-privado--jurado .res-privado__aviso { color: var(--cr-accent-2); }

/* --- detalhamento por estilo ------------------------------------------------------------- */
/* O toggle nao usa JavaScript: um checkbox real + seletor de irmao. A pagina inteira ja
   funciona sem JS (`<details>` nativo); um toggle com script seria o unico ponto frageis aqui.
   O checkbox fica fora da vista mas FOCAVEL -- `display:none` o tiraria do teclado. */
.res-toggle__caixa { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.res-toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  margin: 0 0 1.5rem; padding: .55rem .9rem; border: 1px solid var(--cr-hairline);
  border-radius: var(--cr-radius-pill); color: var(--cr-ink); font-size: .9rem;
  background: var(--cr-bg-alt); user-select: none; }
.res-toggle::before { content: ""; flex: none; width: 2.2rem; height: 1.2rem;
  border-radius: var(--cr-radius-pill); background: var(--cr-hairline);
  box-shadow: inset .55rem 0 0 -.15rem var(--cr-ink-muted); transition: .15s; }
.res-toggle__caixa:checked + .res-toggle::before { background: var(--cr-accent);
  box-shadow: inset -.55rem 0 0 -.15rem var(--cr-bg); }
.res-toggle__caixa:focus-visible + .res-toggle { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.res-toggle__dica { color: var(--cr-ink-muted); font-size: .78rem; }

/* As linhas nascem escondidas e aparecem com o toggle. `~` alcanca as categorias porque o
   checkbox e irmao delas dentro de .res-pagina. */
.res-estilo { display: none; }
.res-toggle__caixa:checked ~ .res-categoria .res-estilo { display: table-row; }
.res-toggle__caixa:checked ~ .res-categoria span.res-estilo { display: block; }

.res-estilo__nome { font-weight: 400 !important; font-size: .78rem !important;
  color: var(--cr-ink-muted) !important; padding-left: 1rem !important;
  text-transform: uppercase; letter-spacing: .04em; }
.res-estilo__valor { padding: .15rem .5rem; text-align: right; font-size: .85rem;
  color: var(--cr-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-estilo__zero { color: var(--cr-ink-muted); }
.res-original { font-size: .72rem; color: var(--cr-ink-muted); }