/* Linguagem visual da área pública — "Linha de Fundo": a interface desenhada como um diagrama de
 * quadra. Fita sobre a areia, lida chapada no sol.
 *
 * Por que uma folha global e não CSS isolado por componente: estas classes são PRIMITIVAS
 * compartilhadas por dezenas de telas (Home, campeonato e as cinco seções, a conta inteira do
 * atleta, mais os três estados de PublicEmpty/PublicError/PublicSkeleton). Repetir `.pub-row` em
 * cada `.razor.css` seria repetir a decisão de design em cada arquivo — a próxima tela pública
 * nasceria com a sua própria versão do cartão. O que é específico de UMA tela continua em
 * `.razor.css` (PublicField, a súmula do cartão de jogo, o trilho de abas).
 *
 * Prefixo `pub-` porque a folha é carregada em index.html para o app inteiro, e a moldura
 * administrativa é MudBlazor: nenhum nome pode colidir com `.mud-*` nem com utilitária Tailwind.
 * A folha é sem `@layer`, e Tailwind emite as utilitárias dentro de `layer(utilities)` — regra sem
 * camada sempre vence regra em camada, independentemente da ordem do arquivo. É o que garante que
 * `.pub-row` mande no espaçamento mesmo se a marcação também trouxer utilitária de padding.
 *
 * Nenhum hexadecimal: cor sai das variáveis do bloco @theme (DesignTokenTests varre este arquivo).
 *
 * As três decisões que a área pública inteira obedece:
 *   1. Linha, não sombra. Nenhuma superfície é levantada do chão — não há sombra projetada em
 *      nenhum tema. Cada painel de conteúdo é chapado na areia e se separa por PESO DE LINHA: fio
 *      de giz de 1px em volta (`--color-line`) e uma aresta pintada de 2px no topo
 *      (`--color-line-strong`), como o limite de uma quadra.
 *   2. Âmbar (--color-secondary) = a bandeira do juiz de linha: "aqui / agora / esta". Jogo ao
 *      vivo, aba corrente, primeiro colocado, seleção de texto. Marca escassa de propósito;
 *      preenchimento decorativo, nunca texto — quem escreve em cima dele é Ink. O teal
 *      (--color-primary) inunda um lugar só, a faixa da rede no topo de cada tela, e no resto é
 *      estrutura e ação.
 *   3. Voz de súmula. Nome de entidade na fonte display (Anybody), larga e pesada. Posição e a
 *      coluna que decide a ordem também em display; horário e placar na fonte de corpo (Hanken),
 *      todo número em algarismo de largura fixa, porque numa lista 21/18 e 9/21 precisam alinhar.
 *   4. Foco é `outline`; estado nunca é. O fio âmbar de "esta é a escolhida" continua saindo de
 *      `box-shadow: inset` — é o gesto da bandeira do juiz de linha. O que não pode é o ANEL DE
 *      FOCO sair da mesma propriedade: enquanto saía, o estado empatava a especificidade, vencia
 *      pela ordem do arquivo e o anel sumia calado — na linha selecionada de dois assistentes e no
 *      botão primário inteiro da área administrativa (lá a sombra ainda é apagada com `!important`).
 *      Especificidade não resolve isso; só não disputar a mesma propriedade. Anel por dentro usa
 *      `outline-offset` negativo, que desenha onde a sombra interna desenhava.
 */

/* ---------- ritmo da página ---------- */

.pub-content {
    max-width: 60rem;
    margin-inline: auto;
}

/* Cancela a calha de 1rem do <main> do PublicLayout (`px-4`) para um elemento chegar à borda da
   tela. A faixa da rede (`.pub-masthead`) é a consumidora: ela sangra, o resto do conteúdo é
   painel recuado. */
.pub-bleed {
    margin-inline: -1rem;
}

/* Rótulo miúdo de súmula: cabeçalho de coluna, dia da agenda, nome de categoria numa lista de
   duplas. Caixa alta com entreletra aberta separa rótulo de conteúdo sem cor nova nem peso maior. */
.pub-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* ---------- seção ---------- */

.pub-section {
    margin-bottom: 2rem;
}

.pub-section:last-child {
    margin-bottom: 0;
}

/* Cabeçalho de bloco: o rótulo miúdo com um traço de quadra à esquerda (fio de teal da altura da
   maiúscula) e um fio forte embaixo. Sem faixa de cor — a separação entre blocos vem da aresta dos
   painéis, não de uma barra pintada. */
.pub-section-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-line-strong);
}

.pub-section-head::before {
    content: "";
    flex-shrink: 0;
    width: 3px;
    height: 0.85em;
    background-color: var(--color-primary);
}

/* Contagem e ação empurradas para a direita ("8 jogos", "Nova dupla"). */
.pub-count,
.pub-section-action {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.pub-count {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------- masthead: a faixa da rede ---------- */

/* A única superfície do produto onde o teal inunda área. Sangra a calha do <main> pelos dois lados
   e encosta na barra do app no topo; o conteúdo interno volta a alinhar com o resto da página pelo
   `max-width` do `-inner`. Aresta forte embaixo, como a fita da rede vista de lado. */
.pub-masthead {
    margin-inline: -1rem;
    margin-bottom: 1.75rem;
    padding: 1.5rem 0 1.4rem;
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-bottom: 2px solid var(--color-line-strong);
}

/* Só a Home encosta a faixa na barra do app: lá o masthead é sempre o primeiro filho do <main>, e
   o `-1rem` cancela com segurança a calha de topo (`py-4`). Nas telas internas o masthead pode vir
   depois de um link de volta ou de um wrapper, então ele fica com o respiro de 1rem em vez de
   subir por cima do que estiver acima. */
.pub-masthead-hero {
    margin-top: -1rem;
    padding: 2.4rem 0 2.1rem;
}

/* `max-width` de 62rem e não 60rem, mais a calha de 1rem interna: assim a coluna de texto da faixa
   fica com 60rem e alinha com `.pub-content` — que também tem 60rem, mas começa depois do padding
   de 1rem do <main>. Sem isto o título da faixa fica 1rem à esquerda do conteúdo abaixo dela em
   tela larga. */
.pub-masthead-inner {
    position: relative;
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Anybody larga e pesada — letra de camisa de time. `overflow-wrap` porque nome de campeonato pode
   ser um token longo sem espaço (ResponsiveLayoutTests gera exatamente esse caso). */
.pub-masthead-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght" 800, "wdth" 112;
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    line-height: 1.03;
    letter-spacing: -0.005em;
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--color-surface);
}

.pub-masthead-hero .pub-masthead-title {
    font-size: clamp(2rem, 9vw, 3.4rem);
    line-height: 1;
}

/* `<FocusOnNavigate Selector="h1" />` (App.razor) põe foco de programa neste título a cada rota e
   lhe dá `tabindex="-1"`. Não é controle operável por teclado — o retângulo de foco padrão do
   navegador aqui é só ruído sobre a faixa da rede. Escopo estreito: nenhum elemento realmente
   interativo perde o anel. */
.pub-masthead-title:focus {
    outline: none;
}

/* Texto secundário sobre a cor: a própria tinta reversa em 82% de alfa, nunca cinza. */
.pub-masthead-lede {
    max-width: 42ch;
    margin: 1rem 0 0;
    font-size: clamp(0.95rem, 2.2vw, 1.0625rem);
    line-height: 1.5;
    text-wrap: pretty;
    color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

.pub-masthead-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
    margin-top: 0.9rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--color-surface) 82%, transparent);
}

/* Ponto separador desenhado, mesma técnica de `.pub-facts` (não é caractere — um "·" de conteúdo
   entraria no nome acessível do fato e ambiguaria os dois status da tela de pagamento, que hoje
   colidem no texto quando inscrição e pagamento estão os dois "Aguardando pagamento"). Cor própria:
   a faixa é escura, `.pub-facts` supõe superfície clara. */
.pub-masthead-meta > span + span::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 0.85rem;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--color-surface) 55%, transparent);
    vertical-align: middle;
}

/* ---------- lista de linhas ---------- */

/* O painel de quadra: fio de giz de 1px em volta, aresta pintada de 2px no topo. Sem sombra. As
   linhas dentro dividem-se por fio de giz. `overflow: hidden` prende o fundo do hover/foco dentro
   do canto. */
.pub-list {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pub-list > li + li {
    border-top: 1px solid var(--color-line);
}

.pub-row {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: var(--color-ink);
    transition: background-color 160ms ease-out;
}

.pub-row-lg {
    padding-block: 1.15rem 1.25rem;
}

a.pub-row:hover {
    background-color: var(--color-background);
}

/* Anel por dentro: a primeira e a última linha encostam na borda do painel, e um anel externo sairia
   cortado pelo `overflow: hidden` da lista. `outline` com deslocamento negativo desenha exatamente
   onde a sombra interna desenhava, e por uma propriedade que nada mais na linha disputa.

   Era por `box-shadow`, e três telas o apagavam sem querer: `.option-selected` e
   `.search-result-selected` marcam a linha escolhida com o mesmo `box-shadow`, empatam a
   especificidade e vencem pela ordem do arquivo — o `outline: none` daqui ficava valendo e a linha
   sob o cursor de teclado era justamente a que não tinha anel nenhum. Daí a decisão 4 do cabeçalho:
   o estado fica com `box-shadow`, o foco sai dele. */
.pub-row:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.pub-row-name {
    display: inline;
    font-family: var(--font-display);
    font-weight: 700;
    font-variation-settings: "wght" 700, "wdth" 100;
    font-size: clamp(1.05rem, 3.2vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-ink);
    text-wrap: balance;
}

.pub-row-name-lg {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
}

/* Reduzido: linha de lista secundária (integrante da dupla, item que não é o dado principal). */
.pub-row-name-sm {
    font-size: 1rem;
}

/* Linha clicável que é `<button>`, não `<a>` (resultado de busca de parceiro, opção que dispara uma
   ação em vez de navegar): mesmo reset que `a.pub-row` ganha do próprio `<a>`. */
button.pub-row {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-ink);
    cursor: pointer;
}

button.pub-row:hover:not(:disabled) {
    background-color: var(--color-background);
}

button.pub-row:disabled {
    opacity: 0.6;
    cursor: default;
}

.pub-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-top: 0.6rem;
}

/* Fatos separados por ponto desenhado, não por caractere: um "·" de conteúdo entraria no nome
   acessível do link, e PublicAreaFlowTests casa esse nome pelo nome do campeonato. */
.pub-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.55rem;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
}

.pub-facts > span + span::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 0.55rem;
    border-radius: 9999px;
    background-color: var(--color-line-strong);
    vertical-align: middle;
}

/* ---------- selo de estado ---------- */

/* Pílula de contorno: canto redondo total, borda fina na linha forte, caixa alta miúda. A COR de
   fundo/texto vem sempre de DomainStatusPill.Classes (UI-04) — esta classe só decide forma e
   tipografia, e é por isso que ela nunca declara nem `background-color` nem `color`. */
.pub-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1.5px solid var(--color-line-strong);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- números ---------- */

/* Horário, posição e placar: algarismo de largura fixa. É o que faz 09:00 e 14:30 empilharem
   alinhados numa agenda e 21/18 alinhar com 9/21 numa lista de resultados. Fonte de corpo (Hanken)
   e não display: a Anybody entra só onde a forma da letra é identidade (nome, posição), não onde a
   grade de números é o que importa. */
.pub-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* ---------- estados ---------- */

/* Vazio: o mesmo painel de quadra da lista que ele substitui, para a tela não trocar de forma
   entre "sem dado" e "com dado". */
.pub-empty {
    margin: 0 0 0.25rem;
    padding: 2.25rem 1.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-ink-muted);
}

.pub-empty-message {
    max-width: 34ch;
    margin: 0 auto;
    text-wrap: balance;
}

/* Erro: o mesmo painel, recortado pela cor de erro em toda a borda em vez do fio de giz. A
   mensagem fica em tinta normal: quem lê precisa entender o texto, não decifrá-lo em vermelho. */
.pub-error {
    margin: 0 0 1rem;
    padding: 1rem;
    background-color: var(--color-surface);
    border: 2px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-ink);
}

.pub-error-label {
    margin: 0 0 0.3rem;
    color: var(--color-error);
}

.pub-error-message {
    max-width: 62ch;
    margin: 0;
    line-height: 1.55;
}

/* Ação secundária: botão de contorno, borda de linha forte, e a mesma pressão do `.pub-submit` —
   afunda 1px quando apertado. */
.pub-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.9rem;
    padding-inline: 1rem;
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 90ms ease-out, background-color 120ms ease-out;
}

.pub-action:hover {
    background-color: var(--color-background);
}

.pub-action:active {
    transform: translateY(1px);
}

.pub-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary);
}

.pub-action-error {
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Confirmação destrutiva (cancelar dupla, cancelar inscrição): mesma forma de `.pub-submit`, cor de
   erro — a única vez que o botão preenchido da área pública não é a cor de ação. */
.pub-submit-error {
    background-color: var(--color-error);
}

.pub-submit-error:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-error) 88%, black);
}

/* ---------- resultado ---------- */

/* Mesma forma do erro (painel recortado pela cor de estado): a saída de um fluxo — inscrição
   reservada/recusada, pagamento aprovado/em análise/inativo. Três cores possíveis — a mensagem
   nunca depende só da cor, o rótulo em `.pub-outcome-title` sempre acompanha. */
.pub-outcome {
    margin: 0 0 1.25rem;
    padding: 1rem;
    background-color: var(--color-surface);
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.pub-outcome-error {
    border-color: var(--color-error);
}

.pub-outcome-success {
    border-color: var(--color-success);
}

.pub-outcome-warning {
    border-color: var(--color-warning);
}

.pub-outcome-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.pub-outcome-title-error {
    color: var(--color-error);
}

.pub-outcome-title-success {
    color: var(--color-success);
}

.pub-outcome-title-warning {
    color: var(--color-warning);
}

.pub-outcome-text {
    margin: 0;
    line-height: 1.55;
}

/* Esqueleto no formato exato da linha que vai chegar, dentro do mesmo painel de quadra. */
.pub-skeleton {
    margin: 0 0 0.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pub-skeleton-row {
    padding: 1.2rem 1rem 1.3rem;
}

.pub-skeleton-row + .pub-skeleton-row {
    border-top: 1px solid var(--color-line);
}

.pub-skeleton-bar {
    height: 1.4rem;
    border-radius: 3px;
    background-color: var(--color-line);
}

.pub-skeleton-bar-meta {
    height: 0.8rem;
    width: 45%;
    margin-top: 0.75rem;
}

/* Pulso só para quem não pediu menos movimento; sem ele o esqueleto continua legível, só parado. */
@media (prefers-reduced-motion: no-preference) {
    .pub-skeleton-bar {
        animation: pub-pulse 1.6s ease-in-out infinite;
    }
}

@keyframes pub-pulse {
    50% {
        opacity: 0.45;
    }
}

/* ---------- superfícies do navegador ---------- */

/* Seleção de texto = a bandeira do juiz de linha: fundo âmbar, tinta por cima (nunca branco —
   OnAccent sobre âmbar reprova a régua de contraste). */
.pub-masthead ::selection,
.pub-content ::selection {
    background-color: var(--color-secondary);
    color: var(--color-ink);
}

/* ---------- entrada ---------- */

/* Um gesto só: cada painel de conteúdo sobe alguns pixels ao entrar — a fita assentando na areia.
   As linhas dentro do painel não animam sozinhas; o painel inteiro é a unidade. `backwards` mantém
   o estado final para quem desligou a animação. */
@media (prefers-reduced-motion: no-preference) {
    .pub-masthead,
    .pub-list,
    .pub-empty,
    .pub-sheet,
    .pub-skeleton,
    .pub-table-wrap {
        animation: pub-rise 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }
}

@keyframes pub-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* ---------- formulário ---------- */

/* A conta do atleta inteira é formulário único (login, cadastro, perfil, nova dupla, inscrição,
   convite): `EditForm` + `PublicField` + botão + link. */
.pub-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 26rem;
}

/* Preenchido, na cor de ação, com borda de linha forte. Ao ser apertado afunda 1px — o botão de
   placar da quadra. `min-h-touch` continua na marcação: o piso de 44px é regra de layout
   (ResponsiveLayoutTests). */
.pub-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.25rem;
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-surface);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 90ms ease-out, background-color 140ms ease-out, opacity 140ms ease-out;
}

.pub-submit:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-primary) 88%, black);
}

.pub-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.pub-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

.pub-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-primary);
}

/* Erro de formulário: texto direto, sem painel — é uma linha de validação dentro do próprio fluxo,
   não uma interrupção de leitura de conteúdo (essa é `.pub-error`). */
.pub-form-error {
    margin: 0;
    color: var(--color-error);
    line-height: 1.5;
}

/* Confirmação de formulário (e-mail de recuperação enviado, senha redefinida): mesma posição do
   erro, tinta neutra — não é alarme, é o próximo passo. */
.pub-form-note {
    margin: 0;
    color: var(--color-ink);
    line-height: 1.5;
}

.pub-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* `min-height` NÃO vale para caixa inline, e `<a>` é inline: as dez marcações que pedem
   `min-h-touch pub-link` pediam um alvo de 44px que nunca existiu — o link ficava com a altura da
   linha, 21px. Passava despercebido porque a maioria mora dentro de `.pub-link-row`, que é `flex` e
   blocifica o filho; a saída no topo da tela de pagamento não tem pai flex e media 21px de verdade.
   `inline-flex` faz a altura mínima valer sem transformar o link em bloco de largura cheia. Só onde
   a marcação PEDE o alvo de toque: link dentro de frase continua inline. */
.pub-link.min-h-touch {
    display: inline-flex;
    align-items: center;
}

.pub-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary);
    border-radius: 2px;
}

/* Linha de links de apoio sob o botão principal ("Esqueci minha senha", "Criar conta"): miúda,
   porque já não é a ação que a tela pede — é a saída para quem não é o caso comum. */
.pub-link-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.875rem;
}

/* ---------- ficha ---------- */

/* Rótulo miúdo à esquerda, valor à direita, fio entre linhas — a mesma forma da ficha do
   campeonato, compartilhada com o perfil do atleta. Agora no painel de quadra. */
.pub-sheet {
    margin: 0 0 1.75rem;
    padding: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pub-sheet-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
}

.pub-sheet-row + .pub-sheet-row {
    border-top: 1px solid var(--color-line);
}

.pub-sheet-value {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Valor sem espaço onde quebrar (e-mail, endereço): quebra no meio da palavra em vez de esticar a
   linha da ficha e empurrar a página inteira para a rolagem horizontal em 360 px. Aqui e não em
   `.razor.css`: as duas fichas do produto — campeonato e perfil do atleta — precisam dele, e no
   arquivo isolado a regra só valia para a tela que a declarou. */
.pub-sheet-value-break {
    word-break: break-all;
}

/* ---------- não encontrado ---------- */

/* Sem faixa: a faixa é a cara de uma tela que existe, e um endereço errado não tem cara. Uma frase
   e a saída. Compartilhada pelas DUAS telas de "não encontrado" (404 do roteador e campeonato
   inexistente) — era a mesma forma copiada nos dois `.razor.css`, e as cópias já tinham divergido
   em largura de linha e em altura do alvo de toque do link. */
.pub-notfound {
    padding-block: 2.5rem 1rem;
}

.pub-notfound-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* `<FocusOnNavigate Selector="h1" />` foca este título e lhe dá `tabindex="-1"`. Sem controle de
   teclado por trás — o retângulo de foco padrão é só ruído. */
.pub-notfound-title:focus {
    outline: none;
}

.pub-notfound-text {
    max-width: 52ch;
    margin: 0 0 1.25rem;
    line-height: 1.55;
    color: var(--color-ink-muted);
}

.pub-notfound-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.pub-notfound-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- tabela de classificação ---------- */
/* Compartilhada entre PublicStandingsPanel (torneio público) e Standings (área do atleta) — mesma
   súmula, colunas diferentes. A rolagem horizontal acontece DENTRO do painel de quadra. */

.pub-table-note {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
}

.pub-table-wrap {
    margin: 0 0 0.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.pub-table {
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pub-table th,
.pub-table td {
    padding: 0.55rem 0.5rem;
    text-align: left;
    vertical-align: baseline;
}

.pub-table th:first-child,
.pub-table td:first-child {
    padding-left: 1rem;
}

.pub-table th:last-child,
.pub-table td:last-child {
    padding-right: 1rem;
}

/* Cabeçalho de coluna na voz de súmula: caixa alta miúda (via `pub-eyebrow` na marcação), aresta
   pintada embaixo. */
.pub-table thead th {
    border-bottom: 2px solid var(--color-line-strong);
    white-space: nowrap;
}

.pub-table-row + .pub-table-row th,
.pub-table-row + .pub-table-row td {
    border-top: 1px solid var(--color-line);
}

/* Coluna que identifica a linha, presa à esquerda: com nove ou dez colunas a tabela rola na
   horizontal dentro de `.pub-table-wrap`, e sem isto o SS± e o PM chegam sob o dedo sem dizer de
   QUEM são os números. Fundo opaco porque a célula presa passa por cima das que rolam.

   Seletor inteiro em `:where()`, ou seja, especificidade zero: a zebra e o destaque de linha abaixo
   repintam esta mesma célula, e sem o `:where()` seria a cor de superfície daqui que ganharia — a
   coluna presa ficaria branca no meio de uma linha listrada. */
:where(.pub-table-sticky-start) :where(th:first-child) {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background-color: var(--color-surface);
}

/* Zebra na cor da areia: é o mesmo fundo da página, e é o que mantém o olho na linha certa ao
   rolar as colunas na horizontal.

   `:nth-child(even)` dentro de `:where()` para não somar especificidade: a zebra é a camada mais
   baixa da tabela e tem que perder de QUALQUER destaque de linha. Fora do `:where()` ela pesava
   (0,2,1) contra os (0,1,1) do destaque e apagava "esta é a sua dupla" em toda linha par. */
.pub-table-row:where(:nth-child(even)) th,
.pub-table-row:where(:nth-child(even)) td {
    background-color: var(--color-background);
}

/* "Esta é a linha que importa" — líder do grupo na tela pública, a própria dupla na tela do
   atleta: a bandeira âmbar na aresta esquerda da linha, marcada na célula de posição. */
.pub-table-row-leader th,
.pub-table-row-leader td,
.pub-table-row-mine th,
.pub-table-row-mine td {
    background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.pub-table-row-leader th:first-child,
.pub-table-row-mine th:first-child {
    box-shadow: inset 3px 0 0 var(--color-secondary);
}

.pub-table-col-position {
    width: 2.5rem;
}

.pub-table-position {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

.pub-table-row-leader .pub-table-position {
    color: var(--color-primary);
}

/* Vai no <span> do nome, NUNCA na célula: `display: block` num <th> faz o navegador gerar uma célula
   anônima em volta, e a largura mínima e o fundo da linha passam a valer para a caixa de dentro em
   vez da célula — as colunas saem do prumo do cabeçalho. As duas tabelas embrulham o nome. */
.pub-table-team {
    display: block;
    min-width: 9rem;
    line-height: 1.3;
}

/* Nota da linha (desclassificada, empate, critério de desempate): miúda, embaixo do nome. Sem
   `color` própria — quando o estado tem token, a classe de DomainStatusPill.TextClass é que pinta. */
.pub-table-tag {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.pub-table-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Pontos é a coluna que decide a ordem: única em fonte display e em tinta cheia, para o olho parar
   nela antes das outras colunas de número. */
.pub-table-points {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

.pub-table-legend {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
}