/* Squadrats Club, "folha do clube". Tokens de cor, grelha de fundo e as
   primitivas partilhadas por todas as páginas. Ligado por <link href> em cada
   página (nas geradas, via templates dos stubs).

   Aliasa os nomes de token antigos (--fundo, --suave, ...) para o CSS
   espalhado por 100+ ficheiros continuar a funcionar enquanto o rollout anda
   página a página.

   Fontes auto-alojadas em fonts/ (ver fonts/README.txt). Prosa em IBM Plex
   Sans, números/labels/datas em IBM Plex Mono, títulos em Bricolage Grotesque.
   Regenerar os woff2: subsets latin do Google Fonts. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* chão: tinta-violeta escura, não preto; a grelha assenta por cima */
  --ch-0: #14131b;
  --ch-1: #1b1926;
  --ch-2: #252235;
  --rule: #37334a;   /* divisórias reais */
  --hair: #242232;   /* fios de tabela, mais ténues */

  --tinta: #eceaf4;
  --tinta-2: #a29cb4;
  --tinta-3: #8f88a6;  /* texto pequeno (rodapés, th, meta): 4.5:1 nos três chãos */

  --marca: #663399;  /* roxo Squadrats: SÓ traços (sublinhado, aresta, foco) */
  --ganho: #3ad17f;  /* delta positivo, captura */
  --vazio: #211f2c;  /* célula não capturada */
  --ouro:  #e6bd63;  /* usado só na marca de região disputada */

  /* aliases dos nomes antigos, para não partir o que ainda não foi mexido */
  --fundo: var(--ch-0);
  --cartao: var(--ch-1);
  --cartao-alto: var(--ch-2);
  --borda: var(--rule);
  --linha: var(--hair);
  --texto: var(--tinta);
  --suave: var(--tinta-2);
  --fraco: var(--tinta-3);

  --f-txt:  "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --f-tit:  "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
}

* { box-sizing: border-box; }

/* --- foco de teclado (a11y) --- */
/* Anel na cor da marca (o roxo, reservado para traços/foco no plano) mais um
   fio quase-branco colado ao elemento: o roxo sozinho sobre o chão
   tinta-violeta fica em ~2,2:1, abaixo do 3:1 que a 1.4.11 pede para o anel.
   Só :focus-visible, para o rato não o disparar. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  box-shadow: 0 0 0 1px var(--tinta);
}
/* dentro de tabelas / contentores com overflow o offset positivo é cortado */
tr:focus-visible, td:focus-visible, th:focus-visible { outline-offset: -2px; }

/* --- movimento reduzido (a11y) --- */
/* Só há transições de hover e a expansão de linhas; com a preferência ligada
   passam a instantâneas, o site fica igual mas sem animação. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* texto só para leitores de ecrã (nomes de placeholders opacos como o "·") */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

html { background: var(--ch-0); }
body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--f-txt);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* papel quadriculado visto com pouca luz: 28px, traço quase invisível */
  background-color: var(--ch-0);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(124, 110, 168, .07) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(124, 110, 168, .07) 27px 28px);
  background-attachment: fixed;
}

/* números, datas, contadores: sempre mono e tabulares */
.mono, .num, .fig, time,
td.num, td.uni, td.pct, .reg-rank th {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- primitivas ---- */

/* tile: quadrado de cor do atleta. */
.tile {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 1px; background: var(--tinta-2);
  vertical-align: -1px; flex: 0 0 auto;
}

/* tira: quota dentro do grupo (NÃO magnitude). Uma <i> por célula na cor
   herdada do style inline (cor do atleta). */
.tira { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.tira i { width: 7px; height: 12px; border-radius: 1px; background: currentColor; }

/* cobertura: bloco de células, N preenchidas na cor herdada. */
.cobertura { display: inline-grid; gap: 1px; vertical-align: middle; }
.cobertura i { width: 100%; aspect-ratio: 1 / 1; background: var(--vazio); border-radius: .5px; }
.cobertura i.on { background: currentColor; }

/* secção: ordinal mono + rótulo em frase + fio. Sem maiúsculas espaçadas. */
.sec {
  display: flex; align-items: baseline; gap: 10px;
  margin: 32px 0 14px; padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.sec .n { font-family: var(--f-mono); font-size: 12px; color: var(--tinta-3); letter-spacing: .04em; }
.sec .t {
  font-family: var(--f-tit); font-weight: 600; font-size: 16.5px;
  color: var(--tinta); line-height: 1; letter-spacing: -.005em;
}
.sec .x { margin-left: auto; font-size: 12px; align-self: center; }

/* meta: dl empilhado, rótulo mono à esquerda + valor. Sem string com pontos médios. */
.meta {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 16px;
  margin: 9px 0 0; font-size: 12px;
}
.meta dt { font-family: var(--f-mono); color: var(--tinta-3); white-space: nowrap; }
.meta dd { color: var(--tinta-2); margin: 0; }

/* links: texto quase-branco, sublinhado roxo. Sem setas. */
a, .lig {
  color: var(--tinta); text-decoration: underline;
  text-decoration-color: var(--marca);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
a:hover, .lig:hover { text-decoration-color: var(--tinta); }
.voltar::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin-right: 7px; vertical-align: 1px;
  background: var(--tinta-3); border-radius: 1px;
}

h1 {
  font-family: var(--f-tit); font-weight: 800; letter-spacing: -.015em;
  font-size: 27px; line-height: 1.08; margin: 0;
}
h2, h3 { font-family: var(--f-tit); font-weight: 600; }

/* barras de aviso no topo (shared.js: avisoDadosVelhos, avisoPorClassificar) */
#aviso-stale, #aviso-classificar {
  padding: 8px 14px; font-size: 12.5px; line-height: 1.45; text-align: center;
}
#aviso-stale {
  position: sticky; top: 46px; z-index: 2500;
  background: #2c2513; border-bottom: 1px solid #574517; color: var(--ouro);
}
#aviso-stale.overlay { position: fixed; left: 0; right: 0; top: 0; z-index: 5000; }
/* "por classificar" = alguém foi a um sítio que precisa de trabalho manual
   no pipeline. Tom mais alaranjado para distinguir do "dados velhos". Não
   sticky: é um FYI, não precisa de ficar preso ao scroll. */
#aviso-classificar {
  background: #331c10; border-bottom: 1px solid #6b3a1c; color: #e8a06a;
}
#aviso-classificar.overlay { position: fixed; left: 0; right: 0; top: 0; z-index: 5000; }
#aviso-classificar a { color: inherit; }

/* erro de carregamento de dados (shared.js mostrarErroDados) */
.erro-dados {
  color: #e88a6a; font-size: 13px; line-height: 1.6;
  max-width: 60ch; margin: 44px auto; padding: 0 18px; text-align: center;
}
.erro-dados a { color: inherit; }

/* "ver no mapa": alvo desenhado em CSS (anel + ponto), sem glifo. <button> no
   leaderboard do club.html (salta o mapa local), <a> na página de lugar
   (regiao.js, navega para o club.html#c=x,y porque não há mapa na página). */
.lb-saltar {
  flex: 0 0 auto; display: inline-block; box-sizing: border-box;
  width: 13px; height: 13px; padding: 0; margin: 0 0 0 2px;
  background: none; border: 1.5px solid var(--tinta-3); border-radius: 50%;
  cursor: pointer; position: relative; vertical-align: middle;
}
.lb-saltar::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--tinta-3); border-radius: 50%;
}
.lb-saltar:hover, .lb-saltar:focus-visible { border-color: var(--marca); }
.lb-saltar:hover::after, .lb-saltar:focus-visible::after { background: var(--marca); }

/* legenda dos emojis de evento (histórico + páginas de lugar). <details> para
   funcionar no toque (não há hover no telemóvel): o resumo mostra sempre os
   símbolos; toque/clique/Enter expande os significados. */
.legenda { margin: 14px 0; }
.legenda > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 4px 0; font-size: 13px; color: var(--tinta-3);
}
.legenda > summary::-webkit-details-marker { display: none; }
.legenda > summary::marker { content: ""; }
.legenda > summary .lg-q {
  font-size: 11px; text-decoration: underline;
  text-decoration-color: var(--marca); text-underline-offset: 3px;
}
.legenda[open] > summary .lg-q { color: var(--tinta-2); }
.legenda .lg-corpo {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 7px 0 2px; font-size: 11.5px; color: var(--tinta-3); line-height: 1.55;
}
.legenda .lg-corpo b { color: var(--tinta-2); font-weight: 500; }