/* Cor, tipografia e espaçamento vêm dos tokens do RVM.UI (rvm-ui.css, lidos do data-rvm-mode do <html> e do
   RvmThemeProvider — BIND-027). Aqui só se APLICA token ao que o RVM.UI não estiliza sozinho — nada de paleta
   própria. Sem este bloco o texto fora dos componentes cai na fonte serifada do navegador. */

/* Só no body: o tamanho é em rem — no html também, ele encolhia a própria base e o texto todo saía 12,5%
   menor (review de tela do TBIN-018). */
html {
    background: var(--rvm-bg-page);
}

body {
    margin: 0;
    font-family: var(--rvm-font-family);
    font-size: var(--rvm-text-m-size);
    line-height: var(--rvm-text-m-line-height);
    color: var(--rvm-fg);
    background: var(--rvm-bg-page);
}

h1 {
    font-size: var(--rvm-display-xl-size);
    font-weight: var(--rvm-font-weight-medium);
}

/* O FocusOnNavigate põe o foco no h1 a cada navegação (leitor de tela anuncia a página): não é
   controle, não leva anel. */
h1:focus,
#conteudo:focus-visible {
    outline: none;
}

a {
    color: var(--rvm-accent-ink);
}

.inicio {
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

/* ── Topo ─────────────────────────────────────────────────────────────────────────────────── */

/* Quebra linha no celular: com Coleção + Decks + apelido + Sair, a 400 px o topo passava da tela (TBIN-016). */
.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rvm-space-8) var(--rvm-space-16);
    padding: var(--rvm-space-12) var(--rvm-space-24);
    border-bottom: 1px solid var(--rvm-line);
    background: var(--rvm-bg);
}

.topo__marca {
    font-size: var(--rvm-text-l-size);
    font-weight: var(--rvm-font-weight-medium);
    color: var(--rvm-fg);
    text-decoration: none;
}

.topo__conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-8) var(--rvm-space-16);
}

/* Coleção, Decks e Desejos num grupo só: é o alvo do passo "Menu" do tour (BIND-029) e quebra linha junto. */
.topo__menu {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-8) var(--rvm-space-16);
}

.topo__apelido {
    color: var(--rvm-s-text-secondary);
}

.topo__sair {
    margin: 0;
}

.topo__criar {
    padding: var(--rvm-space-8) var(--rvm-space-16);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-accent-500);
    color: var(--rvm-accent-on-fill);
    text-decoration: none;
    font-weight: var(--rvm-font-weight-medium);
}

.topo__criar:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

/* ── Entrar / Criar conta ─────────────────────────────────────────────────────────────────── */

.conta {
    display: flex;
    justify-content: center;
    padding: calc(var(--rvm-space-24) * 2) var(--rvm-space-16);
}

.conta__cartao {
    width: 100%;
    max-width: 26rem;
}

.conta__cartao h1 {
    margin: 0 0 var(--rvm-space-16);
}

.conta__apoio {
    margin: 0 0 var(--rvm-space-24);
    color: var(--rvm-s-text-secondary);
}

.conta__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-16);
    margin-top: var(--rvm-space-16);
}

.conta__rodape {
    margin: var(--rvm-space-24) 0 0;
    text-align: center;
}

/* ── Segurança (verificação em duas etapas) ───────────────────────────────────────────────── */

.conta__cartao--largo {
    max-width: 34rem;
}

.conta__subtitulo {
    font-size: var(--rvm-display-s-size);
    margin: var(--rvm-space-24) 0 var(--rvm-space-8);
}

.conta__passos {
    padding-left: var(--rvm-space-24);
    margin: 0 0 var(--rvm-space-16);
    color: var(--rvm-s-text-secondary);
}

.conta__qr {
    display: flex;
    justify-content: center;
    padding: var(--rvm-space-16);
    background: var(--rvm-white); /* QR precisa de fundo claro para a câmera ler, também no tema escuro */
    border-radius: var(--rvm-radius-8);
    width: fit-content;
    margin: 0 auto var(--rvm-space-16);
}

.conta__chave,
.conta__codigos code {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.05em;
}

.conta__codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rvm-space-8) var(--rvm-space-24);
    list-style: none;
    padding: var(--rvm-space-16);
    margin: 0;
    border: 1px dashed var(--rvm-line-stronger);
    border-radius: var(--rvm-radius-8);
}

/* ── Páginas do colecionador (TBIN-014) — desenhadas primeiro a 400 px (`07`) ─────────────── */

.pagina {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--rvm-space-24) var(--rvm-space-16) calc(var(--rvm-space-24) * 2);
}

.pagina h1 {
    margin: 0 0 var(--rvm-space-8);
}

.pagina__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rvm-space-16);
    margin-bottom: var(--rvm-space-16);
}

.pagina__apoio {
    margin: 0 0 var(--rvm-space-16);
    color: var(--rvm-s-text-secondary);
}

.pagina__voltar {
    margin: 0 0 var(--rvm-space-16);
}

/* Link com cara de botão primário: navegação é <a> (o RvmButton renderiza <button>). */
.botao-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: var(--rvm-space-40);
    padding: 0 var(--rvm-space-16);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-accent-500);
    color: var(--rvm-accent-on-fill);
    font-weight: var(--rvm-font-weight-medium);
    text-decoration: none;
}

.botao-link:focus-visible,
.carta__link:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

/* Campo nativo (busca GET, select e número do lote) com a cara dos campos do RVM.UI. */
.campo {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--rvm-space-40);
    padding: 0 var(--rvm-space-12);
    border: 1px solid var(--rvm-line-stronger);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
    color: var(--rvm-fg);
    font: inherit;
}

.campo:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 1px;
}

.filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rvm-space-12) var(--rvm-space-16);
    margin-bottom: var(--rvm-space-24);
}

.filtro__campo {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
    flex: 1 1 14rem;
    font-weight: var(--rvm-font-weight-medium);
}

.filtro__campo--largo {
    flex-basis: 20rem;
}

/* O select de jogo da coleção (BIND-032): do tamanho do nome mais longo, não metade da linha. */
.filtro__campo--estreito {
    flex: 0 1 12rem;
}

.filtro__opcao {
    display: flex;
    align-items: center;
    gap: var(--rvm-space-8);
    min-height: var(--rvm-space-40);
}

/* Grade de cartas: 2 colunas no celular, quantas couberem a partir daí. */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--rvm-space-16);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--rvm-space-24);
}

.carta__link {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
    height: 100%;
    /* Sem isto, padding + borda passavam 18 px da célula e a carta invadia a linha de baixo (TBIN-016). */
    box-sizing: border-box;
    padding: var(--rvm-space-8);
    border: 1px solid var(--rvm-line);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
    color: var(--rvm-fg);
    text-decoration: none;
}

.carta__link:hover {
    box-shadow: var(--rvm-shadow-soft);
}

.carta__nome {
    font-weight: var(--rvm-font-weight-medium);
    margin-top: var(--rvm-space-4);
}

.carta__detalhe {
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-secondary);
}

.carta__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-8);
    margin-top: auto;
    padding-top: var(--rvm-space-4);
}

.carta__quantidade {
    font-weight: var(--rvm-font-weight-medium);
}

/* Proporção do TCG (63 × 88 mm): a grade não pula enquanto a imagem carrega. */
.imagem-da-carta {
    display: block;
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: contain;
    border-radius: var(--rvm-radius-5);
}

.imagem-da-carta--vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rvm-line-stronger);
    font-size: var(--rvm-text-s-size);
    color: var(--rvm-s-text-secondary);
}

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rvm-space-24);
}

.paginacao__posicao {
    color: var(--rvm-s-text-secondary);
}

/* Adicionar / editar um lote: imagem e formulário lado a lado no desktop, empilhados no celular. */
.lote {
    display: grid;
    gap: var(--rvm-space-24);
}

.lote__imagem {
    max-width: 16rem;
    margin: 0 auto;
}

@media (min-width: 48rem) {
    .lote {
        grid-template-columns: 18rem minmax(0, 32rem);
        align-items: start;
    }

    .lote__imagem {
        max-width: none;
    }
}

.lote__ja-tenho {
    margin-bottom: var(--rvm-space-16);
}

.lote__ja-tenho p {
    margin: 0 0 var(--rvm-space-4);
}

.lote__ja-tenho ul {
    margin: 0 0 var(--rvm-space-8);
    padding-left: var(--rvm-space-24);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-16);
}

.lote__remover {
    margin-top: var(--rvm-space-32);
    padding-top: var(--rvm-space-24);
    border-top: 1px solid var(--rvm-line);
}

/* Revisão de tela do TBIN-014 */

.botao-link--perigo {
    background: var(--rvm-s-danger-fill);
    color: var(--rvm-white);
}

.lote__confirmacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-16);
    margin-top: var(--rvm-space-16);
}

/* O cinza padrão do navegador dá 3,58:1 no tema escuro — abaixo do AA. */
.campo::placeholder {
    color: var(--rvm-s-text-secondary);
    opacity: 1;
}

/* Alvo de toque confortável no celular (a regra mínima de 24 px já passava). */
.paginacao a {
    display: inline-flex;
    align-items: center;
    min-height: var(--rvm-space-40);
    padding: 0 var(--rvm-space-12);
}

/* ── Valor de referência (TBIN-015) ───────────────────────────────────────────────────────── */

.valor {
    margin-bottom: var(--rvm-space-24);
    padding: var(--rvm-space-16);
    border: 1px solid var(--rvm-line);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
}

.valor__titulo,
.precos__titulo {
    margin: 0 0 var(--rvm-space-8);
    font-size: var(--rvm-display-s-size);
}

.valor__brl {
    margin: 0;
    font-size: var(--rvm-display-m-size);
    font-weight: var(--rvm-font-weight-medium);
}

.valor__outras {
    margin: 0 0 var(--rvm-space-8);
    font-weight: var(--rvm-font-weight-medium);
}

.valor__apoio,
.precos__fonte {
    margin: 0;
    /* Texto corrido: no desktop passava de 140 caracteres por linha (revisão de tela do TBIN-016). */
    max-width: 70ch;
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-secondary);
}

/* Variação do valor da coleção (BIND-033): a mesma caixa do painel de valor, com o gráfico de área do RVM.UI. */
.variacao {
    margin-bottom: var(--rvm-space-24);
    padding: var(--rvm-space-16);
    border: 1px solid var(--rvm-line);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
}

.variacao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rvm-space-8) var(--rvm-space-16);
}

.variacao__periodos {
    display: flex;
    gap: var(--rvm-space-8);
}

/* Alvo de pelo menos 24 px (WCAG 2.5.8); o período atual se distingue por peso e sublinhado, não só por cor. */
.variacao__periodo {
    display: inline-block;
    min-height: 24px;
    padding: var(--rvm-space-4) var(--rvm-space-12);
    border: 1px solid var(--rvm-line);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

/* Foco igual ao dos controles do RVM.UI (BIND-037): o outline nativo destoava. */
.variacao__periodo:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

.variacao__periodo--atual {
    border-color: var(--rvm-accent-500);
    font-weight: var(--rvm-font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.variacao__resumo {
    margin: var(--rvm-space-8) 0 var(--rvm-space-16);
    max-width: 70ch;
    font-weight: var(--rvm-font-weight-medium);
}

.variacao__grafico {
    margin: 0 0 var(--rvm-space-16);
}

.variacao__dados summary {
    cursor: pointer;
    min-height: 24px;
}

.variacao__dados table {
    margin-top: var(--rvm-space-8);
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.variacao__dados th,
.variacao__dados td {
    padding: var(--rvm-space-4) var(--rvm-space-12);
    border-bottom: 1px solid var(--rvm-line);
    text-align: right;
    white-space: nowrap;
}

.variacao__dados th[scope="row"],
.variacao__dados thead th:first-child {
    text-align: left;
    font-weight: normal;
}

.carta__valor {
    font-size: var(--rvm-text-m-size);
    font-weight: var(--rvm-font-weight-medium);
}

.precos {
    margin-bottom: var(--rvm-space-24);
}

/* Tabela pode passar da largura no celular: rola dentro da caixa, a página não. */
.precos__tabela {
    overflow-x: auto;
    margin-bottom: var(--rvm-space-8);
}

.precos table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.precos th,
.precos td {
    padding: var(--rvm-space-8) var(--rvm-space-12);
    border-bottom: 1px solid var(--rvm-line);
    text-align: right;
    white-space: nowrap;
}

.precos th:first-child {
    text-align: left;
}

.precos thead th {
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-secondary);
    font-weight: var(--rvm-font-weight-medium);
}

/* ── Decks (TBIN-016) ─────────────────────────────────────────────────────────────────────── */

.pagina--estreita {
    max-width: 36rem;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rvm-space-12);
}

.botao-link--secundario {
    background: transparent;
    border: 1px solid var(--rvm-line-stronger);
    color: var(--rvm-fg);
}

.campo--curto {
    max-width: 8rem;
}

.decks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rvm-space-16);
    list-style: none;
    padding: 0;
    margin: 0;
}

.decks__link {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
    height: 100%;
    box-sizing: border-box;
    padding: var(--rvm-space-16);
    border: 1px solid var(--rvm-line);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
    color: var(--rvm-fg);
    text-decoration: none;
}

.decks__link:hover {
    box-shadow: var(--rvm-shadow-soft);
}

.decks__link:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

.decks__nome {
    font-size: var(--rvm-text-l-size);
    font-weight: var(--rvm-font-weight-medium);
}

.decks__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-8);
    margin-top: var(--rvm-space-8);
}

.resumo__situacao {
    margin: 0 0 var(--rvm-space-4);
    font-size: var(--rvm-text-l-size);
    font-weight: var(--rvm-font-weight-medium);
}

.resumo__valor-titulo {
    margin-top: var(--rvm-space-16);
}

.secao-do-deck__titulo {
    margin: 0 0 var(--rvm-space-12);
    font-size: var(--rvm-display-s-size);
}

.secao-do-deck__contagem {
    font-weight: var(--rvm-font-weight-regular);
    color: var(--rvm-s-text-secondary);
}

/* Carta que falta: borda de aviso — o chip diz quantas, a borda deixa achar de relance. */
.carta--falta .carta__link {
    border-color: var(--rvm-s-warning-fill);
}

/* Botão do formulário de conta na largura do cartão (o RvmButton não tem FullWidth). */
.botao-largo {
    width: 100%;
}

.resumo__desejar {
    margin: var(--rvm-space-8) 0 0;
}

/* ── Importar CSV (TBIN-022) ──────────────────────────────────────────────────────────────── */

.importacao {
    margin-bottom: var(--rvm-space-24);
}

.importacao__titulo {
    margin: 0 0 var(--rvm-space-8);
    font-size: var(--rvm-display-s-size);
}

/* O erro de cabeçalho cita as colunas numa palavra só (jogo;set;numero;…): sem quebra, estoura a tela do celular. */
.importacao__resultado {
    overflow-wrap: anywhere;
}

/* Os formatos de outros apps (BIND-035): separados do botão do modelo, que vem logo antes. */
.importacao__formatos {
    margin-top: var(--rvm-space-16);
}

.campo--arquivo {
    padding: var(--rvm-space-8) var(--rvm-space-12);
}

/* O botão nativo do <input type=file> com a cara do botão contornado do RVM.UI (BIND-037): o RvmFileUpload pede
   interatividade, e esta tela é SSR com formulário multipart. */
.campo--arquivo::file-selector-button {
    margin-right: var(--rvm-space-12);
    padding: var(--rvm-space-4) var(--rvm-space-16);
    border: 1px solid var(--rvm-line-stronger);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.campo--arquivo:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

.importacao__formatos p,
.importacao__formatos ul {
    margin: 0 0 var(--rvm-space-8);
}

.importacao__formatos > :last-child {
    margin-bottom: 0;
}

.importacao__tabela {
    width: 100%;
    border-collapse: collapse;
}

.importacao__tabela th,
.importacao__tabela td {
    padding: var(--rvm-space-8) var(--rvm-space-12);
    border-bottom: 1px solid var(--rvm-line);
    text-align: left;
    vertical-align: top;
}

.importacao__tabela thead th {
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-secondary);
    font-weight: var(--rvm-font-weight-medium);
}

.importacao__tabela tbody th {
    font-weight: var(--rvm-font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.importacao__carta,
.importacao__detalhe,
.importacao__aviso {
    display: block;
}

.importacao__detalhe {
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-secondary);
}

.importacao__erros {
    margin: 0;
    padding-left: var(--rvm-space-16);
    color: var(--rvm-s-text-danger);
}

.importacao__aviso {
    margin-top: var(--rvm-space-4);
    font-size: var(--rvm-text-m-size);
    color: var(--rvm-s-text-warning);
}

.importacao__confirmar {
    margin-bottom: var(--rvm-space-24);
}

/* ── Busca pela foto do celular (BIND-028) ─────────────────────────────────────────────────── */

/* Painel do QR code: código ao lado do texto no computador; empilhado na tela estreita. */
.foto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--rvm-space-24);
    padding: var(--rvm-space-24);
    margin-bottom: var(--rvm-space-24);
    border: 1px solid var(--rvm-line);
    border-radius: var(--rvm-radius-12);
    background: var(--rvm-bg);
}

.foto__qr {
    flex: none;
    display: flex;
    padding: var(--rvm-space-12);
    background: var(--rvm-white); /* QR precisa de fundo claro para a câmera ler, também no tema escuro */
    border-radius: var(--rvm-radius-8);
}

.foto__texto {
    flex: 1 1 18rem;
    min-width: 0;
}

.foto__titulo {
    margin: 0 0 var(--rvm-space-8);
    font-size: var(--rvm-display-s-size);
}

.foto__instrucao {
    margin: 0 0 var(--rvm-space-16);
    font-size: var(--rvm-text-l-size);
}

/* A URL é longa (o token tem 43 caracteres): quebra em qualquer ponto em vez de alargar a página. */
.foto__url {
    font-family: ui-monospace, monospace;
    overflow-wrap: anywhere;
    color: var(--rvm-fg);
}

.foto__estado {
    display: flex;
    align-items: center;
    gap: var(--rvm-space-8);
    margin: 0 0 var(--rvm-space-16);
    font-weight: var(--rvm-font-weight-medium);
}

.foto__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rvm-space-24);
    margin: 0;
}

/* O RvmAlert não traz margem: separa o aviso (lido, expirou, erro) do que vem abaixo. */
.foto__aviso {
    margin-bottom: var(--rvm-space-16);
}

/* Página do celular: rótulo sobre o campo do arquivo (sem o flex-basis do .filtro__campo, que em coluna vira altura). */
.foto-celular__campo {
    display: flex;
    flex-direction: column;
    gap: var(--rvm-space-4);
    font-weight: var(--rvm-font-weight-medium);
}

/* Alvo de pelo menos 24 px (WCAG 2.5.8), como o "← Voltar". */
.foto__links a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
}

/* Link de pulo: primeiro foco da página, visível só com foco. */
.pular {
    position: absolute;
    left: var(--rvm-space-16);
    top: -100px;
    z-index: 10;
    padding: var(--rvm-space-8) var(--rvm-space-16);
    border-radius: var(--rvm-radius-8);
    background: var(--rvm-bg);
    color: var(--rvm-accent-ink);
}

.pular:focus {
    top: var(--rvm-space-8);
}

/* "← Voltar": alvo de pelo menos 24 px (WCAG 2.5.8). */
.pagina__voltar a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Campos nativos dentro do RvmFieldFrame: o kit só desenha uma sombra de 1 px no foco, fácil de perder num select
   (review do BIND-027). Anel igual ao dos outros controles. */
.rvm-field__box:focus-within {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

.rvm-field__box:has(select) {
    cursor: pointer;
}

/* ===== 2ª revisão de tela do RVM.UI (BIND-027) ===== */

/* Borda de controle com 3:1 (WCAG 1.4.11): as linhas do kit (--rvm-line*) ficam em 1,1–2,5:1. Claro: fg-700
   (#868686, ~3,6:1 sobre o branco); escuro: fg-500 (#858C96, 5,1:1). */
:root {
    --borda-controle: var(--rvm-fg-700);
}

@media (prefers-color-scheme: dark) {
    :root {
        --borda-controle: var(--rvm-fg-500);
    }
}

.rvm-field__box {
    box-shadow: inset 0 0 0 1px var(--borda-controle);
}

.rvm-field__box:focus-within {
    box-shadow: inset 0 0 0 1px var(--rvm-accent-line);
}

.campo,
.botao-link--secundario {
    border-color: var(--borda-controle);
}

.rvm-button--outlined {
    box-shadow: inset 0 0 0 1px var(--borda-controle);
}

/* Mesma forma do kit na mesma linha: link-botão em pílula e campo de busca com a altura do RvmButton (48 px). */
.botao-link {
    border-radius: var(--rvm-radius-full);
    min-height: 48px;
}

.campo {
    min-height: 48px;
    border-radius: 12px;
}

/* Texto corrido com largura de leitura (~70 caracteres). */
.pagina__apoio,
.conta__apoio {
    max-width: 70ch;
}

/* Alvos de pelo menos 24 px (WCAG 2.5.8). */
.topo__conta a,
.conta__rodape a,
.lote__confirmacao a,
.lote__ja-tenho a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.filtro__opcao input {
    width: 20px;
    height: 20px;
    accent-color: var(--rvm-accent-500);
}

/* 400 px: o "Sair" não fica sozinho numa linha recuada. */
.topo__conta {
    column-gap: var(--rvm-space-16);
}

.topo__sair {
    margin-left: auto;
}

/* ===== Revisão de tela do tour e da foto (BIND-028/029) ===== */

/* Tema escuro: a cortina do tour (ink-900 a 40%) quase some sobre a página escura (1,04:1) — mais densa aqui. */
@media (prefers-color-scheme: dark) {
    /* Os mesmos seletores onde o kit declara a variável (cada um redeclara): app.css carrega depois e vence. */
    :root,
    [data-rvm-mode],
    [data-rvm-accent],
    .rvm-theme {
        --tutor-overlay: color-mix(in srgb, var(--rvm-ink-900) 72%, transparent);
    }
}

/* Anel de foco do tour com o token de foco do site: o --tutor-accent ficava em 2,87:1 no balão escuro. */
.tutor-popover .tutor-btn:focus-visible,
.tutor-popover .tutor-close:focus-visible,
.foto__links a:focus-visible {
    outline: 2px solid var(--rvm-focus);
    outline-offset: 2px;
}

/* ===== Esqueci a senha e confirmação de e-mail (BIND-030) ===== */

/* Dois links de rodapé seguidos ("Esqueci minha senha" e "Criar conta") sem o espaço grande entre eles. */
.conta__rodape--junto {
    margin-top: var(--rvm-space-8);
}

/* Aviso discreto até confirmar o e-mail: uma faixa com borda, sem cor de alerta — a conta funciona. */
.aviso-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rvm-space-4) var(--rvm-space-16);
    margin: 0 0 var(--rvm-space-24);
    padding: var(--rvm-space-8) var(--rvm-space-16);
    border: 1px solid var(--rvm-line-stronger);
    border-left: 4px solid var(--rvm-accent-500);
    border-radius: var(--rvm-radius-8);
}

.aviso-email__texto {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--rvm-s-text-secondary);
}

.aviso-email__acao {
    margin: 0;
}

.aviso-email__resposta {
    margin: 0 0 var(--rvm-space-24);
}

/* ===== Seus dados: baixar e excluir a conta (BIND-031) ===== */

.conta__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rvm-space-8) var(--rvm-space-12);
    margin: 0 0 var(--rvm-space-24);
}

.conta__apoio--antes {
    margin-top: var(--rvm-space-16);
}