/**
 * Barra de progresso e apoios recentes.
 *
 * ────────────────────────────────────────────────────────────────────────
 * AS DUAS REGRAS QUE O CHECKOUT ENSINOU, DA PIOR FORMA
 * ────────────────────────────────────────────────────────────────────────
 *
 * 1. NADA DE `currentColor` COMO FUNDO.
 *    No checkout, `background: currentColor` com `color: Canvas` produziu um
 *    botão branco sobre fundo branco — contraste 1.00, invisível. O botão
 *    existia, era clicável, e ninguém o via. Só apareceu quando o Wil pintou a
 *    página de azul para procurá-lo.
 *    Cor de fundo aqui é sempre literal, nunca herdada.
 *
 * 2. NADA DE `opacity` EM TEXTO.
 *    `opacity: .7` num texto derrubou o contraste para 2,92:1 — reprovado no
 *    WCAG AA, que exige 4,5:1. "Cinza discreto" se faz com uma cor cinza
 *    escolhida e medida, não apagando preto.
 *
 * As duas foram encontradas medindo contraste na página real, não lendo o CSS.
 */

.ds-progress {
	--ds-accent: #1a7f4b;
	--ds-accent-ink: #ffffff;
	--ds-track: #e3e6e8;
	--ds-muted: #5b6166;   /* 6,4:1 sobre branco — medido, não estimado */

	margin: 0 0 1.75rem;
	font: inherit;
}

/* ── As caixas de número ─────────────────────────────────────────────── */

.ds-stats {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1rem;
}

.ds-stat {
	flex: 1 1 6rem;
	padding: .7rem .5rem;
	border: 1px solid var(--ds-track);
	border-radius: .4rem;
	text-align: center;
	background: transparent;
}

.ds-stat strong {
	display: block;
	font-size: 1.35em;
	line-height: 1.2;
}

.ds-stat span {
	display: block;
	margin-top: .15rem;
	font-size: .85em;
	color: var(--ds-muted);
}

/* ── O valor arrecadado ──────────────────────────────────────────────── */

.ds-raised {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .5rem;
}

.ds-raised strong {
	font-size: 1.5em;
	color: var(--ds-accent);
}

.ds-goal {
	font-size: .9em;
	color: var(--ds-muted);
}

/* ── A barra ─────────────────────────────────────────────────────────── */

.ds-bar {
	height: .65rem;
	border-radius: .35rem;
	background: var(--ds-track);
	overflow: hidden;
}

.ds-bar-fill {
	height: 100%;
	background: var(--ds-accent);
	border-radius: inherit;
	transition: width .4s ease;
	/* Largura mínima visível: 0,3% de uma meta de $1,6 mi ainda é dinheiro de
	   alguém, e uma barra de zero pixel diz que não houve apoio nenhum. */
	min-width: 2px;
}

.ds-remaining {
	margin: .5rem 0 0;
	font-size: .92em;
	color: var(--ds-muted);
}

.ds-reached {
	color: #007017;
	font-weight: 600;
}

.ds-closed {
	margin: .6rem 0 0;
	padding: .5rem .7rem;
	border-left: 3px solid #8a6d00;
	background: rgba( 138, 109, 0, .08 );
	color: #6b5400;
	font-size: .9em;
	border-radius: .25rem;
}

/* ── Apoios recentes ─────────────────────────────────────────────────── */

.ds-recent { margin: 1.75rem 0; }

.ds-recent h3 { margin: 0 0 .6rem; font-size: 1.1em; }

.ds-recent ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ds-track);
}

.ds-recent li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--ds-track);
}

.ds-recent-name { flex: 1 1 8rem; font-weight: 600; }

.ds-recent-amount { color: #1a7f4b; font-weight: 600; }

.ds-recent-when {
	flex-basis: 100%;
	font-size: .82em;
	color: var(--ds-muted);
}

@media (min-width: 30rem) {
	.ds-recent-when { flex-basis: auto; min-width: 7rem; text-align: right; }
}

/* v0.56.0 — a foto do UMP de quem apoiou como membro, ou a silhueta de um
   avatar geral para os anônimos (sem conta, pediu anonimato, ou Guest/Grace). */
.ds-recent.ds-recent > ul > li { align-items: center; }
.ds-recent-foto {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	background: var(--ds-track, #e8e8e8);
}
.ds-recent-silhueta { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ds-recent-silhueta svg { width: 32px; height: 32px; fill: #a3aab3; display: block; }

@media (prefers-reduced-motion: reduce) {
	.ds-bar-fill { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
 * PÁGINA DO SOWER E INSCRIÇÃO
 * ─────────────────────────────────────────────────────────────────── */

.ds-sower,
.ds-team,
.ds-signup {
	--ds-accent: #1a7f4b;
	--ds-accent-ink: #ffffff;
	--ds-track: #e3e6e8;
	--ds-muted: #5b6166;
	margin: 0 0 1.75rem;
}

.ds-sower-titulo {
	margin: 0 0 .25rem;
	font-size: 1.75em;
	line-height: 1.15;
}

.ds-sower-campanha {
	margin: 0 0 .25rem;
	font-size: .9em;
	color: var(--ds-muted);
}

.ds-sower-nome { margin: 0 0 .8rem; }

/* A foto (máscara antes da chave, retrato depois). Quadrada e recortada em
   círculo: os avatares SVG vêm quadrados e as fotos do UMP não vêm em tamanho
   nenhum em especial — sem `object-fit`, um retrato em pé sairia esticado. */
.ds-sower-foto {
	margin: 0 0 .6rem;
}

.ds-sower-foto img {
	width: 128px;
	height: 128px;
	max-width: 40vw;
	max-height: 40vw;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* A linha que diz de quem é a parte somada, depois do Celebration Day. */
.ds-sponsor-soma {
	margin: .35rem 0 0;
	font-size: .9em;
	color: var(--ds-muted);
}

.ds-sower-historia {
	margin: 0 0 1.25rem;
	padding-left: .9rem;
	border-left: 3px solid var(--ds-track);
}

/* O link do Sower é para ser COPIADO, não só lido: quebra em qualquer ponto
   para caber na tela, e ganha caixa própria para a pessoa achar de longe. */
.ds-signup-link {
	padding: .6rem .8rem;
	border: 1px dashed var(--ds-track);
	border-radius: .4rem;
	word-break: break-all;
	font-size: .95em;
}

.ds-signup-nota {
	margin: 0 0 1rem;
	color: var(--ds-muted);
	font-size: .95em;
}

.ds-signup h3 { margin: 0 0 .5rem; }

/* ─────────────────────────────────────────────────────────────────────
 * PÁGINA DO TIME
 * ─────────────────────────────────────────────────────────────────── */

.ds-team-titulo {
	margin: 1.5rem 0 .6rem;
	font-size: 1.05em;
}

.ds-team-titulo small {
	color: var(--ds-muted);
	font-weight: 400;
}

/* A linha do Lead Sower. Ele é o único membro que aparece por nome — ver o
   cabeçalho de Sower/Team.php. */
.ds-team-lead-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin: 0 0 1.5rem;
}

.ds-team-conta { color: var(--ds-muted); font-size: .92em; }

/* As duas listas, lado a lado quando há largura. Sem abas: abas escondem
   metade do que a página tem a dizer atrás de um clique, e sem JavaScript
   não há o que falhar. */
.ds-listas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem 2rem;
	margin: 1.75rem 0;
}

.ds-listas .ds-recent { margin: 0; }

/* ---------------------------------------------------------------------
 * A grade da campanha: os blocos AOS PARES.
 *
 * Decisão do Wil em 21/09/2026: *"ficando 4 do mesmo tamanho"* — Top Teams,
 * Top Sowers, Sponsor Teams e Recent Supports.
 *
 * ⚠️ Com o `auto-fit` de cima, a campanha dava **três** colunas em 1280px e o
 * quarto bloco caía sozinho na linha de baixo, com o triplo da altura. Medido:
 * três de 371px e um de 687px de altura. "Quatro do mesmo tamanho" virava três
 * iguais e um diferente.
 *
 * Quatro colunas numa linha só resolveria a largura e estragaria a leitura: em
 * 272px, "Recent supports" quebra nome, valor e tempo em três linhas cada.
 * Aos pares, cada bloco fica com o dobro da largura e os quatro têm a mesma.
 *
 * ⚠️ Só a grade da campanha usa esta classe. A página do Sower e a do time têm
 * duas listas e continuam com o `auto-fit`, que já é o certo para duas.
 * ------------------------------------------------------------------ */
@media (min-width: 35rem) {
	.ds-listas-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ds-nota-anonimo {
	margin: .6rem 0 0;
	font-size: .82em;
	color: var(--ds-muted);
}

/* Fundo próprio e não `currentColor`, e sem `opacity` — as duas coisas já
   falharam aqui, medidas: `currentColor` como fundo some sobre si mesmo, e
   `opacity` em texto derruba o contraste abaixo do mínimo. */
.ds-team-lead {
	padding: .1rem .45rem;
	border-radius: .8rem;
	background: #e6f2ec;
	color: #14603a;          /* 6,4:1 sobre #e6f2ec — medido */
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── A escolha de time na inscrição ──────────────────────────────────── */

.ds-team-escolha {
	border: 1px solid var(--ds-track);
	border-radius: .4rem;
	padding: .8rem 1rem;
}

.ds-team-escolha legend {
	padding: 0 .35rem;
	font-weight: 600;
	font-size: .95em;
}

.ds-radio {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .2rem 0;
}

.ds-team-select,
.ds-team-nome {
	width: 100%;
	margin: .15rem 0 .5rem 1.6rem;
	max-width: calc( 100% - 1.6rem );
}

.ds-signup-time {
	margin: .6rem 0 0;
	font-size: .95em;
	color: var(--ds-muted);
}

/* ── O time de quem já é Sower ────────────────────────────────────────── */

.ds-team-bloco {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-track);
}

.ds-team-bloco h3 { margin: 0 0 .5rem; }

/* v0.76.5: no painel, as caixas do Guest (Sponsor, Lead, Grace), do número
   e dos Primes ganham a mesma linha que separa "Your team" — antes o título
   "Your Guest-Dreamer" encostava no texto do time. */
.ds-signup > * + .ds-sponsor {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-track);
}

/* Cada ação é um `form` próprio (POST, com nonce), então elas não podem
   simplesmente virar `inline` — precisam respirar entre si e quebrar em
   telas estreitas sem grudar. */
.ds-team-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: .6rem 0 0;
}

.ds-team-form input[type="text"] { flex: 1 1 12rem; }

.ds-team-form small {
	flex: 1 1 100%;
	color: var(--ds-muted);
	font-size: .85em;
}

/* Fundo próprio e borda visível: um botão secundário que só se distingue
   por `opacity` perde contraste em fundo escuro — já falhou aqui uma vez. */
.ds-secondary {
	padding: .5rem .9rem;
	border: 1px solid var(--ds-track);
	border-radius: .4rem;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ds-secondary:hover { border-color: var(--ds-muted); }
.ds-secondary:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }

/* ── Aviso para quem edita o site ────────────────────────────────────── */

.ds-aviso-editor {
	margin: 1rem 0;
	padding: .8rem 1rem;
	border-left: 3px solid #8a6d00;
	background: rgba( 138, 109, 0, .08 );
	color: #6b5400;          /* 6,1:1 sobre o fundo claro — medido */
	border-radius: .25rem;
	font-size: .92em;
	line-height: 1.5;
}

.ds-aviso-editor code {
	background: rgba( 0, 0, 0, .06 );
	padding: .1em .35em;
	border-radius: .2rem;
	font-size: .95em;
}

.ds-aviso-editor ul { list-style: disc; }

/* ─────────────────────────────────────────────────────────────────────
 * O QUADRO — Top Teams e Top Sowers
 * ─────────────────────────────────────────────────────────────────── */

.ds-board {
	--ds-accent: #1a7f4b;
	--ds-track: #e3e6e8;
	--ds-muted: #5b6166;
	margin: 2rem 0;
}

.ds-quadro h3 { margin: 0 0 .6rem; font-size: 1.1em; }

/* `list-style: none` num `<ol>` é deliberado: o marcador automático do
   navegador contaria 1, 2, 3, 4 e desmentiria o empate. Dois times empatados
   mostram "2º" os dois, e o seguinte mostra "4º" — quem numera é a nossa
   regra, não o contador do navegador. O `<ol>` fica porque a lista é
   ordenada de verdade, e é isso que um leitor de tela anuncia. */
.ds-rank {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	border-top: 1px solid var(--ds-track);
}

.ds-rank-linha {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--ds-track);
}

/* ---------------------------------------------------------------------
 * A foto do time na linha do quadro.
 *
 * `align-items: center` acima e não `baseline`: com uma imagem de 40px na
 * linha, alinhar pela base do texto joga a foto para cima e desencontra tudo.
 *
 * O espaço reservado (`.ds-rank-sem-foto`) existe para os times criados antes
 * da v0.23.0, que não têm foto: sem ele, uma linha sem imagem teria o nome 40px
 * à esquerda das outras e a lista pareceria desalinhada — não "sem foto".
 * ------------------------------------------------------------------ */
.ds-rank-foto {
	--ds-selo: 40px;
	flex: 0 0 var(--ds-selo);
	box-sizing: border-box;
	width: var(--ds-selo);
	height: var(--ds-selo);
	/* Redondo desde 21/09, como o logo da página do time e o do quadro dos
	   Sponsors: três telas mostrando a mesma marca de três formas diferentes
	   fazem o site parecer montado por pessoas que não se falam. */
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/*
 * ⚠️ O selo de um time é o LOGO desde 20/09, e marca não se recorta.
 *
 * `cover` acima é o certo para retrato de grupo: preenche os 40px e corta as
 * sobras. Aplicado a uma marca, come as bordas e a descaracteriza — que é a
 * mesma razão de `.ds-team-logo` usar `contain` na página do time.
 *
 * ⚠️ E o recuo é a MESMA conta do logo grande: um quadrado inscrito num círculo
 * tem lado = diâmetro ÷ √2, sobrando ~14,5% de cada lado. Sem ele, `border-radius`
 * come os quatro cantos da marca — o contrário do que `contain` está aqui para
 * garantir.
 */
.ds-rank-marca {
	object-fit: contain;
	padding: calc(var(--ds-selo) * 0.145);
	background: #fff;
	border: 2px solid var(--ds-track);
}

/*
 * O círculo vazio de quem não tem imagem nenhuma (pedido do Wil em 21/09).
 *
 * Ele não é enfeite: sem um lugar ocupado, o nome sobe 40px para a esquerda e a
 * lista parece desalinhada em vez de "sem logo". O mesmo papel do
 * `.ds-sponsor-time-sem` no quadro dos Sponsors.
 */
.ds-rank-sem-foto {
	background: var(--ds-track);
	border: 2px solid var(--ds-track);
}

/* Largura fixa para as posições ficarem alinhadas em coluna: "10º" e "3º"
   com larguras diferentes fazem os nomes dançarem de linha em linha. */
.ds-rank-pos {
	flex: 0 0 2.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ds-accent);
}

/* Quem ainda não arrecadou não tem número — a célula continua ocupando o
   espaço, para o nome dele alinhar com os demais em vez de encostar na
   margem e parecer outra lista. */
.ds-rank-sem .ds-rank-pos { color: var(--ds-muted); }

.ds-rank-nome { flex: 1 1 8rem; }

.ds-rank-nome a { font-weight: 600; }

.ds-rank-valor {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ds-accent);
	white-space: nowrap;
}

.ds-rank-sem .ds-rank-valor { color: var(--ds-muted); font-weight: 400; }

/* ── A linha de posição, na página do time e na do Sower ─────────────── */

.ds-posicao {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	margin: 0 0 1.25rem;
	color: #5b6166;
	font-size: .95em;
}

.ds-posicao-num {
	font-size: 1.15em;
	font-weight: 700;
	color: #1a7f4b;
	font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
 * ETAPA 1 — ESCOLHER COMO SEMEAR (v0.33.0)
 *
 * Quatro cartões, um por modalidade. O cartão inteiro é o link: alvo grande
 * no celular, e o nome, a explicação e o requisito vão juntos dentro dele —
 * foi ler o nome sem a explicação que fazia a pessoa escolher errado.
 * ─────────────────────────────────────────────────────────────────── */

.ds-semear-titulo { margin: 0 0 .3rem; }

.ds-semear-ajuda {
	margin: 0 0 1.25rem;
	color: var(--ds-muted, #5b6166);
}

.ds-modos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.ds-modo-link {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1rem 1.1rem;
	border: 1px solid #d9dde0;
	border-radius: .75rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

a.ds-modo-link:hover,
a.ds-modo-link:focus-visible {
	border-color: #1a7f4b;
	background: #f6fbf8;
}

.ds-modo-marca {
	flex: 0 0 auto;
	color: #1a7f4b;
	line-height: 0;
}

.ds-modo-texto { display: block; }

.ds-modo-titulo {
	display: block;
	font-weight: 700;
	font-size: 1.05em;
	margin-bottom: .2rem;
}

.ds-modo-frase {
	display: block;
	line-height: 1.5;
}

.ds-modo-exige {
	display: block;
	margin-top: .35rem;
	font-size: .85em;
	color: var(--ds-muted, #5b6166);
}

.ds-modo-vagas {
	display: block;
	margin-top: .35rem;
	font-size: .85em;
	font-weight: 600;
	color: #1a7f4b;
	font-variant-numeric: tabular-nums;
}

.ds-modo-seta {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: center;
	color: #1a7f4b;
	line-height: 0;
}

/* No celular a coluna do ícone e a seta comiam um terço da linha, e a
   explicação — que é o motivo do cartão existir — saía em tiras de três
   palavras. Aqui o ícone vira um selo em cima e o texto ocupa a largura toda;
   a seta some, porque o cartão inteiro já é o link. */
@media (max-width: 520px) {
	.ds-modo-link { flex-wrap: wrap; gap: .5rem; }
	.ds-modo-texto { flex: 1 1 100%; }
	.ds-modo-seta { display: none; }
}

/* ── O portão: modalidade ainda não liberada ──────────────────────────── */

/* Trancado é cinza ESCOLHIDO, nunca `opacity`. Um rótulo apagado com
   `opacity` já reprovou no contraste aqui uma vez — e este em particular é a
   frase que explica por que a pessoa não consegue se inscrever. Ela precisa
   ser legível, não discreta. */
.ds-modo-trancado .ds-modo-link {
	background: #f4f5f6;
	border-style: dashed;
	cursor: not-allowed;
}

.ds-modo-trancado .ds-modo-marca { color: #5b6166; }

.ds-trancado {
	display: block;
	margin-top: .35rem;
	color: #6b5400;          /* 6,1:1 sobre branco — medido */
	font-size: .85em;
	font-weight: 600;
}

.ds-radio small {
	flex-basis: 100%;
	margin-left: 1.6rem;
	color: #5b6166;
	font-size: .85em;
}

/* ── Etapa 2: de onde eu vim, e o que escolhi ─────────────────────────── */

.ds-semear-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: .6rem;
}

.ds-semear-voltar {
	font-size: .9em;
	color: #1a7f4b;
}

.ds-semear-escolhido {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	color: #1a7f4b;
}

.ds-semear-escolhido .ds-modo-icone { width: 24px; height: 24px; }

.ds-semear-frase {
	margin: 0 0 1.25rem;
	line-height: 1.55;
	color: var(--ds-muted, #5b6166);
}

/* ---------------------------------------------------------------------
 * O quadro dos times de Sponsor — sem colocação, em duas colunas.
 *
 * ⚠️ `<ul>` e não `<ol>`, e nenhum número: **não há colocação entre eles**
 * (decisão do Wil em 21/09/2026). O que este quadro diz é "estes times têm
 * Sponsor"; quanto cada um arrecadou se vê clicando no nome.
 *
 * Duas colunas porque o bloco precisa ficar da mesma altura dos outros três da
 * fileira. Com uma coluna só, ele seria metade — e quatro blocos em que um tem
 * metade do tamanho deixam de ser uma fileira.
 * ------------------------------------------------------------------ */
.ds-sponsor-times {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55rem .9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ds-sponsor-time a {
	display: flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: inherit;
	/* 44px de alvo com a marca; sem ela, o nome sozinho ainda tem altura de
	   toque — esta lista é para o dedo tanto quanto para o olho. */
	min-height: 2.75rem;
}

.ds-sponsor-time a:hover .ds-sponsor-time-nome,
.ds-sponsor-time a:focus-visible .ds-sponsor-time-nome {
	text-decoration: underline;
}

/* A marca em miniatura segue a regra do logo grande: redonda, com borda clara,
   e `contain` para não cortar a marca. Mesma conta do quadrado inscrito — o
   recuo é 14,5% do diâmetro. */
.ds-sponsor-time-marca {
	--ds-marca: 38px;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--ds-marca);
	height: var(--ds-marca);
	padding: calc(var(--ds-marca) * 0.145);
	object-fit: contain;
	background: #fff;
	border: 2px solid var(--ds-track);
	border-radius: 50%;
}

/* O lugar da marca quando o time ainda não enviou logo. Ver `Board`. */
.ds-sponsor-time-sem {
	background: var(--ds-track);
	border-color: var(--ds-track);
}

.ds-sponsor-time-nome {
	font-size: .95em;
	line-height: 1.25;
	/* Quebra por palavra: nome de time é nome próprio, e cortar no meio da
	   palavra com reticências esconde justamente o que identifica. */
	overflow-wrap: anywhere;
}

/* No celular a coluna do bloco já é estreita: uma coluna só. */
@media (max-width: 30rem) {
	.ds-sponsor-times { grid-template-columns: 1fr; }
}

/* O quadro dos Top Graces, que só existe depois do Celebration Day. Fundo
   próprio e borda literal — nunca `currentColor`, que já sumiu sobre si mesmo
   uma vez neste projeto. */
.ds-quadro-graces {
	padding: .9rem 1rem;
	border: 1px solid #e6dcc2;
	border-radius: .5rem;
	background: #fdfaf2;
}

.ds-quadro-graces .ds-rank-pos,
.ds-quadro-graces .ds-rank-valor { color: #8a6d00; }  /* 5,3:1 sobre #fdfaf2 */

/* ─────────────────────────────────────────────────────────────────────
   A identidade de campanha — o bloco onde o Guest-Dreamer e o Grace Guest
   veem e trocam o nome fictício e o avatar exclusivo.

   O avatar aparece grande de propósito: é ele que a pessoa precisa OLHAR
   para perceber que desenhou algo parecido demais com o avatar de sempre.
   Um quadradinho de 24px não deixaria ninguém notar isso.
   ────────────────────────────────────────────────────────────────── */
.ds-identidade {
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid var(--ds-track);
	border-radius: 10px;
}

.ds-identidade h3 { margin: 0 0 .4rem; }

.ds-identidade-atual {
	display: flex;
	gap: .9rem;
	align-items: center;
	margin: .9rem 0;
}

.ds-identidade-atual img {
	width: 96px;
	height: 96px;
	max-width: 30vw;
	max-height: 30vw;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.ds-sem-avatar {
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px dashed var(--ds-track);
	border-radius: 50%;
	font-size: .8em;
	color: var(--ds-muted);
	padding: .4rem;
	box-sizing: border-box;
}

/* O primeiro nome e o sobrenome travado, lado a lado — a tela mostra que o
   segundo não se digita em vez de explicar isso numa frase. */
.ds-nome-ficticio {
	display: flex;
	gap: .5rem;
	align-items: center;
}

.ds-nome-ficticio input[disabled] {
	background: var(--ds-track);
	color: var(--ds-muted);
	width: 7em;
	cursor: not-allowed;
}

.ds-ok { color: #007017; }

/* ---------------------------------------------------------------------
 * A foto no topo da página do time.
 *
 * `max-height` e não altura fixa: a foto vem da câmera de alguém, em qualquer
 * proporção, e recortar o retrato de um grupo pelo meio é pior do que deixá-lo
 * mais baixo do que o previsto.
 *
 * ⚠️ ELA OCUPA A LARGURA INTEIRA DESDE 20/09 — E O DEFEITO DA v0.23.0 CONTINUA
 * ESPREITANDO.
 *
 * O Wil pediu a foto alinhada com as bordas laterais da página. Antes daqui
 * havia `width: auto` e um comentário explicando por que **não** podia ser
 * `width: 100%`: uma caixa fixa obriga toda imagem a preenchê-la, inclusive as
 * que não têm pixel para isso, e no staging isso esticou um PNG de 250×250
 * para 420px, visivelmente borrado.
 *
 * As duas coisas são verdade ao mesmo tempo, e por isso o teto **não mora
 * aqui**: `Sower\TeamPage` escreve `max-width: <largura real>px` na própria
 * tag, com o número que só o PHP conhece. A folha estica; o PHP diz até onde.
 * Tirar um dos dois lados traz o borrão de volta — ver `Team::largura_real`.
 *
 * Sem `object-fit` e sem `max-height`: nada é cortado, e a proporção é a do
 * arquivo. A consequência aceita junto é que uma foto **em pé** fica alta na
 * página — mas recortar o retrato de um grupo pelo meio é pior do que isso, e
 * o campo se chama "foto panorâmica" na tela de quem envia.
 * ------------------------------------------------------------------ */
.ds-team-foto {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	/* ⚠️ `auto` nas laterais: o teto em pixels vem do PHP (`Team::largura_real`),
	   então uma foto menor que a coluna sobra espaço — e sobrando espaço, ela
	   fica no MEIO. Encostada à esquerda sob um logo centralizado parecia
	   desalinho. Pedido do Wil em 21/09. */
	margin: 0 auto .8rem;
}

/* O campo de arquivo nos formulários de time. */
.ds-team-foto-campo {
	display: block;
	margin: .5rem 0;
}

.ds-team-foto-campo span {
	display: block;
	font-size: .9rem;
	margin-bottom: .25rem;
}

/* ---------------------------------------------------------------------
 * A seção das 100 fotos — os times dos Sponsors.
 *
 * Grade que se ajusta sozinha: `auto-fill` com `minmax` dá quatro colunas no
 * desktop, duas no celular, sem media query e sem contar quantos são. Com um
 * número que vai de 3 a 100 ao longo da campanha, uma grade de colunas fixas
 * ficaria certa num dia e errada no outro.
 *
 * `aspect-ratio: 1` nas fotos: a parede só se lê como parede se os quadrinhos
 * tiverem o mesmo tamanho. Aqui o recorte é aceitável — e diferente da página
 * do time, onde a foto é o assunto e cortá-la seria perder o retrato.
 * ------------------------------------------------------------------ */
.ds-sponsors {
	margin: 1.6rem 0;
}

.ds-sponsors-grade {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .9rem;
}

.ds-sponsor-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ds-sponsor-foto {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: var(--ds-track);
}

.ds-sponsor-nome {
	display: block;
	margin-top: .4rem;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.25;
}

/* ---------------------------------------------------------------------
 * O logo do time e o cartão do Fundraiser Sponsor.
 *
 * O logo é uma MARCA: `object-fit: contain` e fundo neutro, porque cortar uma
 * marca pelas bordas a descaracteriza. A foto do time (`.ds-team-foto`) usa
 * `cover`, que é o certo para um retrato de grupo — são regras opostas de
 * propósito, e é por isso que os dois campos são separados no banco.
 * ------------------------------------------------------------------ */
/*
 * ⚠️ `margin: 0 auto` — o logo é centralizado (pedido do Wil em 20/09), e a
 * foto logo abaixo vai de borda a borda. A marca no meio e a foto cheia formam
 * um eixo só; o logo encostado à esquerda sobre uma foto larga parecia um
 * descuido de montagem.
 *
 * `width: auto` continua aqui, e pelo motivo oposto ao da foto: a marca não
 * deve ser esticada em hipótese nenhuma, nem até a borda. Um logo pequeno
 * aparece pequeno.
 */
/* ---------------------------------------------------------------------
 * O bloco de identidade do time: logo, frase e nome no MESMO EIXO.
 *
 * ⚠️ O alinhamento mora no PAI, e isso não é preciosismo.
 *
 * A alternativa era centralizar `.ds-sower-campanha` e `.ds-sower-nome` uma a
 * uma — e essas duas classes são **compartilhadas com a página do Sower**.
 * Centralizá-las por classe mexeria numa tela que ninguém pediu para mexer, e
 * a correção viraria uma disputa de especificidade com a pele da moldura
 * (`.ds-moldura .ds-sower-nome`, mesmo peso), decidida pela ORDEM em que as
 * duas folhas carregam — que neste plugin não é confiável (ver o cabeçalho de
 * `moldura.css`).
 *
 * Com o alinhamento herdado do bloco, não há regra concorrente nenhuma: o que
 * está dentro do `<header>` da página do time centraliza; o resto do site não
 * fica sabendo.
 * ------------------------------------------------------------------ */
.ds-team-identidade {
	text-align: center;
	margin-bottom: 1rem;
}

.ds-team-logo {
	/* O diâmetro numa variável: a conta do recuo depende dele, e dois números
	   soltos divergem na primeira vez que alguém mudar o tamanho. */
	--ds-logo: 200px;

	display: block;
	box-sizing: border-box;
	width: var(--ds-logo);
	height: var(--ds-logo);

	/* ⚠️ O RECUO É A CONTA QUE FAZ O QUADRADO CABER NO CÍRCULO.
	 *
	 * Um logo quadrado inscrito num círculo tem lado = diâmetro ÷ √2 ≈ 0,707d;
	 * o resto é margem. Daí 14,5% de cada lado: sem isso, `border-radius: 50%`
	 * cortaria os quatro cantos da marca — que é exatamente o que `contain`
	 * existe para impedir. Redondo é a moldura, não o desenho. */
	padding: calc(var(--ds-logo) * 0.145);
	object-fit: contain;

	background: #fff;
	border: 5px solid #e3e6e8;
	border-radius: 50%;

	margin: 0 auto .8rem;
}

@media (max-width: 480px) {
	.ds-team-logo { --ds-logo: 150px; border-width: 4px; }
}

.ds-sponsor-cartao {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 1rem 0;
	padding: .9rem;
	border: 1px solid var(--ds-track);
	border-radius: 8px;
}

/* Menor que o logo, como o Wil pediu: a marca identifica o time, o rosto
   acompanha. */
.ds-sponsor-retrato {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}

.ds-sponsor-sobre p { margin: 0 0 .5rem; }
.ds-sponsor-sobre p:last-child { margin-bottom: 0; }

.ds-sponsor-rede a { font-weight: 600; }
/* v0.58.7: o ícone da rede, na linha da frase. */
.ds-sponsor-rede a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ds-sponsor-rede .ds-rede-texto { text-decoration: underline; text-underline-offset: 2px; }
.ds-sponsor-rede .ds-rede-icone { font-size: 20px; width: 20px; height: 20px; line-height: 1; text-decoration: none; }

/* A paginação da parede. */
.ds-sponsors-paginas {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .9rem;
}

.ds-sponsors-paginas a,
.ds-sponsors-paginas .ds-pagina-atual {
	min-width: 2rem;
	padding: .25rem .5rem;
	text-align: center;
	border: 1px solid var(--ds-track);
	border-radius: 4px;
	text-decoration: none;
}

.ds-sponsors-paginas .ds-pagina-atual {
	font-weight: 700;
	background: var(--ds-track);
}

/* ─────────────────────────────────────────────────────────────────────
   O QUADRO DO SOCIAL SOWER — o convite de quem chamou os cem (v0.39.0)

   Pedido do Wil em 22/09/2026, a partir do cartão que está no ar na campanha
   do Give: texto de um lado, retrato do outro, com o nome e o papel embaixo
   da foto, e um botão para o treinamento.

   ⚠️ Duas colunas só a partir de 52rem. Abaixo disso o texto ficaria com ~20
   caracteres por linha ao lado de uma foto de 250px — que é o jeito mais
   rápido de tornar ilegível um texto que a pessoa precisa ler inteiro.
   ────────────────────────────────────────────────────────────────── */
.ds-social {
	margin: 1.5rem 0 0;
	padding: 1.2rem 1.25rem;
	border: 1px solid var(--ds-track);
	border-radius: .5rem;
	background: #fff;
}

.ds-social-titulo {
	margin: 0 0 1rem;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.2;
}

.ds-social-corpo {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 52rem) {
	.ds-social-corpo { grid-template-columns: 1.3fr .8fr; }
}

.ds-social-texto p { margin: 0 0 .8rem; line-height: 1.6; }
.ds-social-texto p:last-child { margin-bottom: 0; }

.ds-social-pessoa {
	margin: 0;
	justify-self: center;
	text-align: center;
}

/* 250px é o tamanho do cartão que já está no ar. O `min()` é o celular: uma
   foto fixa de 250px numa tela de 320px encosta nas duas margens. */
.ds-social-foto {
	display: block;
	width: min(250px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
	margin: 0 auto .6rem;
}

.ds-social-nome { display: block; font-weight: 700; font-size: 1.15em; }
.ds-social-papel { display: block; font-size: .95em; color: var(--ds-muted); }

.ds-social-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	border-radius: .75rem;
	background: var(--ds-accent);
	color: var(--ds-accent-ink);
	font-weight: 700;
	text-decoration: none;
}

.ds-social-cta:hover,
.ds-social-cta:focus { color: var(--ds-accent-ink); filter: brightness(.94); }

.ds-social-seta { font-size: 1.1em; line-height: 1; }

/* ─────────────────────────────────────────────────────────────────────
   O formulário de login do UMP, dentro do nosso bloco (v0.40.0).

   Fora da moldura a folha do tema manda no formulário, e está certo: ele é
   uma tela de conta, não uma peça da campanha. O que fica aqui é só o
   espaço em volta e o teto de largura.
   ────────────────────────────────────────────────────────────────── */
.ds-login {
	max-width: 420px;
	margin: .8rem auto 0;
}

/* ─────────────────────────────────────────────────────────────────────
   O bloco da inscrição, centralizado (v0.41.0).

   Pedido do Wil em 22/09/2026: *"todos os três blocos abaixo da home estão à
   esquerda — centralize todos eles"*. São o formulário de login, a escolha do
   caminho e a situação de quem já se inscreveu: o mesmo `.ds-signup` nos três
   casos, então uma regra resolve.

   Fora da moldura o bloco não tem largura máxima e ocupa a coluna inteira —
   as margens automáticas não fazem nada ali, e é por isso que elas podem ficar
   aqui sem estragar quem desliga a moldura.
   ────────────────────────────────────────────────────────────────── */
.ds-signup {
	margin-left: auto;
	margin-right: auto;
}

.ds-semear-titulo,
.ds-semear-ajuda { text-align: center; }

/* O convite para entrar: frase curta + formulário. Aqui o texto acompanha a
   centralização do bloco — é uma linha só, e ela anuncia o formulário logo
   abaixo. (Os outros dois blocos têm texto corrido e ficam alinhados à
   esquerda de propósito: ver a regra do `.ds-semear-titulo`.) */
.ds-signup-entrar { text-align: center; }
.ds-signup-entrar .ds-login { text-align: left; }

/* ─────────────────────────────────────────────────────────────────────
   A BUSCA DOS QUADROS E O DIRETÓRIO DOS SOWERS (v0.43.0)

   Pedido do Wil em 23/09/2026: campo de busca no topo de cada quadro e, logo
   abaixo da capa, a lista inteira dos Sowers em cartões, com páginas.

   ⚠️ Sem JavaScript: o campo é um `GET` com botão. O print que inspirou a tela
   filtra enquanto se digita; aqui isso custaria uma tela que não funciona com
   JavaScript bloqueado — a mesma decisão da busca dos 100 do Sponsor.
   ────────────────────────────────────────────────────────────────── */
.ds-busca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .9rem;
}

.ds-busca-campo {
	flex: 1 1 12rem;
	min-width: 0;
	box-sizing: border-box;
	padding: .55rem .7rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--ds-track, #e3e6e8);
	border-radius: 8px;
}

.ds-busca-botao {
	padding: .55rem .9rem;
	font: inherit;
	font-weight: 600;
	color: var(--ds-accent-ink, #fff);
	background: var(--ds-accent, #1a7f4b);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.ds-busca-limpar {
	font-size: .9em;
	color: var(--ds-muted, #5b6166);
}

.ds-busca-vazia {
	margin: .4rem 0 0;
	color: var(--ds-muted, #5b6166);
}

/* ── O diretório ─────────────────────────────────────────────────────── */
.ds-diretorio {
	--ds-accent: #1a7f4b;
	--ds-track: #e3e6e8;
	--ds-muted: #5b6166;

	margin: 0 0 1.75rem;
}

.ds-diretorio-topo { text-align: center; }
.ds-diretorio-topo h3 { margin: 0 0 .3rem; font-size: 1.9em; line-height: 1.15; }

.ds-diretorio-conta {
	margin: 0 0 .8rem;
	color: var(--ds-muted);
	font-size: .95em;
}

/* ─────────────────────────────────────────────────────────────────────
   OS CARTÕES — HORIZONTAIS E PRÓXIMOS (v0.43.1)

   Pedido do Wil em 23/09/2026: *"deixe os frames mais próximos um do outro e
   os deixe mais horizontais; para celular coloque um abaixo do outro; deixe o
   botão View Sower mais estreito"*.

   Avatar numa coluna, o resto na outra.

   ⚠️ COLUNAS FIXAS, E NÃO `auto-fill` (v0.43.2). Com oito por página
   (pedido do Wil), `auto-fill` dava três colunas em telas médias: 3 + 3 + 2,
   uma fileira manca em toda página. Quatro colunas no computador (2 × 4 = 8),
   duas no tablet (4 × 2 = 8), uma no celular — que recebe quatro por página
   do servidor (ver `Diretorio::quantos`). Cada tamanho de tela fecha as suas
   fileiras inteiras.
   ────────────────────────────────────────────────────────────────── */
.ds-cartoes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* 8px desde a v0.43.3 — pedido do Wil: "deixe os frames mais próximos". */
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * O cartão em pé, com o TOPO deitado — o desenho do print do Wil.
 *
 * ⚠️ A borda tem 2px e um cinza mais escuro (v0.43.3). Com 1px no tom claro de
 * antes, o Wil mediu no telefone: *"no celular não estão visíveis"* — a tela
 * do celular, com brilho ao ar livre, apagava a linha contra o fundo creme.
 */
.ds-cartao {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	box-sizing: border-box;
	padding: .85rem 1rem;
	background: #fff;
	border: 2px solid #cfd4d8;
	border-radius: 12px;
}

.ds-cartao-topo {
	display: flex;
	align-items: center;
	gap: .7rem;
}

/*
 * A borda do avatar — pedido do Wil (v0.43.1).
 *
 * Um anel, e não uma borda grossa colada na imagem: o branco por dentro separa
 * o desenho do verde. `box-sizing` segura os 56px — sem ele a borda soma ao
 * tamanho e o nome ao lado desalinha.
 */
.ds-cartao-foto {
	box-sizing: border-box;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--ds-accent);
	object-fit: cover;
	background: var(--ds-track);
}

.ds-cartao-sem-foto { display: inline-block; }

.ds-cartao-nome { min-width: 0; font-weight: 600; line-height: 1.25; }
.ds-cartao-nome a { text-decoration: none; color: inherit; }
.ds-cartao-nome a:hover { text-decoration: underline; }

.ds-cartao-valor {
	margin: 0;
	font-size: .88em;
	color: var(--ds-muted);
}

.ds-cartao-valor strong { color: var(--ds-accent); font-size: 1.05em; }
.ds-cartao-meta::before { content: "· "; }

.ds-cartao-barra {
	height: 6px;
	border-radius: 999px;
	background: var(--ds-track);
	overflow: hidden;
}

.ds-cartao-barra span {
	display: block;
	height: 100%;
	background: var(--ds-accent);
}

/* Estreito: do tamanho do texto, encostado à esquerda — não mais uma faixa da
   largura do cartão. */
.ds-cartao-botao {
	align-self: flex-start;
	margin-top: .2rem;
	padding: .35rem .9rem;
	font-size: .88em;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ds-accent-ink, #fff);
	background: var(--ds-accent);
	border-radius: 6px;
}

/* Quatro por fileira só com largura para o cartão horizontal respirar
   (~280px cada, dentro dos 1168px da moldura). */
@media (min-width: 1200px) {
	.ds-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* No celular, um abaixo do outro — e mais longe das bordas.
 *
 * Pedido do Wil em 23/09 (v0.43.5): *"no celular os frames estão muito perto
 * das laterais, diminua ao menos 10px de cada lado"*. Medido no staging: 20px
 * da borda da tela. O recuo vai na SEÇÃO inteira, e não só nos cartões, para a
 * busca e as setas continuarem alinhadas com eles — um campo mais largo que os
 * cartões embaixo parece erro de montagem. Com 12px, ficam a 32px da borda. */
@media (max-width: 559px) {
	.ds-cartoes { grid-template-columns: minmax(0, 1fr); }
	.ds-diretorio { padding-left: 12px; padding-right: 12px; }
}

/* ── As páginas: ‹ Page 2 of 17 › ─────────────────────────────────── */
.ds-paginas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: 1rem;
}

.ds-paginas .ds-pagina-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.3em;
	line-height: 1;
	text-decoration: none;
	color: var(--ds-accent-ink, #fff);
	background: var(--ds-accent);
	border-radius: 50%;
}

.ds-paginas .ds-pagina-morta {
	color: var(--ds-muted);
	background: var(--ds-track);
	opacity: .6;
}

.ds-pagina-onde {
	min-width: 7rem;
	text-align: center;
	font-size: .92em;
	color: var(--ds-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   ⚠️ O RECUO QUE VINHA DO TEMA (v0.43.4)

   Medido no staging em 23/09/2026: TODO `<li>` das nossas listas ganhava
   `margin-left: 24px` — os cartões do diretório, o ranking, a parede dos
   Sponsors, os apoios recentes, os passos do checkout. A regra é do Thrive:

       ul > li:not(.thrv-styled-list-item, .thrive-dynamic-styled-list-item)
       { margin-left: 1.5em }

   O Wil viu o sintoma sem saber a causa: *"você aproximou a parte de baixo,
   falta as laterais"*. Os 8px entre colunas eram 32px na tela dele; na bancada
   (outro tema) eram 8 mesmo. É o caso 11 outra vez, em miniatura: a medição
   respondia certo sobre o lugar errado.

   ⚠️ ESPECIFICIDADE. A do Thrive é (0,1,2) — o `:not()` conta pelo argumento
   mais forte, uma classe. `.ds-rank > li` é (0,1,1) e PERDE. Por isso a classe
   repetida (`.ds-rank.ds-rank > li`, 0,2,1): vence sem depender da ordem em que
   as folhas carregam, que neste site não é confiável. Não é enfeite — tirar a
   repetição devolve o recuo.

   Só as NOSSAS listas. Uma lista que o autor escrever no texto da campanha
   continua com o recuo do tema, que é o certo para ela.
   ────────────────────────────────────────────────────────────────── */
.ds-cartoes.ds-cartoes > li,
.ds-rank.ds-rank > li,
.ds-sponsor-times.ds-sponsor-times > li,
.ds-sponsors-grade.ds-sponsors-grade > li,
.ds-modos.ds-modos > li,
.ds-guests.ds-guests > li,
.ds-revelacao-lista.ds-revelacao-lista > li,
.ds-revelacao-apoios.ds-revelacao-apoios > li,
.ds-prime-grade.ds-prime-grade > li,
.ds-recent.ds-recent > ul > li {
	margin-left: 0;
}

/* v0.65.0 — os Prime Nine no painel do Guest: nove caixas, três por linha,
   com a foto real, o nome e o botão (pedido do Wil, 30/09). */
.ds-prime-grade.ds-prime-grade {
	list-style: none;
	padding: 0;
	margin: .75em 0 1.25em;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.ds-prime-grade.ds-prime-grade > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 16px 10px;
	border: 1px solid #E3E0D8;
	border-radius: 12px;
	background: #FFFFFF;
	min-width: 0;
}

.ds-prime-foto {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.ds-prime-silhueta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EEF3F0;
	fill: #9DB5A9;
}

.ds-prime-nome {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ds-prime-botoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

/* A vaga aberta: tracejada, com o número dela no círculo. */
.ds-prime-grade.ds-prime-grade > li.ds-prime-vaga {
	border-style: dashed;
	background: transparent;
}

.ds-prime-foto-vazia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #C9C4B8;
	color: #8A857A;
	font-weight: 700;
	font-size: 20px;
	box-sizing: border-box;
}

.ds-prime-vaga .ds-prime-nome {
	color: #8A857A;
	font-weight: 500;
}

@media (max-width: 480px) {
	.ds-prime-grade.ds-prime-grade { gap: 8px; }
	.ds-prime-grade.ds-prime-grade > li { padding: 12px 6px; }
	.ds-prime-foto { width: 56px; height: 56px; }
	.ds-prime-nome { font-size: 13px; }
	.ds-prime .ds-prime-form button { padding: 6px 10px; font-size: 13px; }
}

.ds-prime-form {
	display: inline-block;
	margin: 0;
}

/* Os botões no verde da marca: cheio para o que avança, contorno para o resto. */
.ds-prime .ds-prime-form button {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid #1E6F50;
	background: #FFFFFF;
	color: #1E6F50;
	cursor: pointer;
}

.ds-prime .ds-prime-form button.ds-prime-principal {
	background: #1E6F50;
	color: #FFFFFF;
}

.ds-prime .ds-prime-form button:hover,
.ds-prime .ds-prime-form button:focus-visible {
	outline: 2px solid #1E6F50;
	outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────
   ⚠️ O QUE O THRIVE FAZ NOS ELEMENTOS DE DENTRO DAS NOSSAS TELAS (v0.44.0)

   Varredura no staging em 23/09/2026: cada folha de estilo que não é nossa
   foi desligada, o estilo calculado de cada elemento do plugin foi comparado
   com e sem ela, e cada diferença foi atribuída à regra que a causou. Do
   tema vieram quatro regras que alcançam TODAS as nossas telas:

     p                     { margin: 0; padding: 5px 0 10px }
     p, li, blockquote, …  { font-size: 1rem; line-height: 1.75;
                             color: rgba(10,10,10,.85); font-weight: 400 }
     h1, h2, …, h6         { margin: 0; padding: 0; line-height: 1.4em;
                             font-weight: 600; color: #0a0a0a }
     a                     { text-decoration: none }

   Todo parágrafo nosso ganhava 15px de altura (é parte do tamanho dos
   cartões), a história do Sower perdia o espaço entre parágrafos, o texto
   dos cartões encolhia de 17 para 16px, o título da parede dos Sponsors
   colava nos rostos. Nada disso aparecia na bancada: o tema dela é outro.

   ⚠️ A ESPECIFICIDADE É O CONSERTO, E É ESTREITA DE PROPÓSITO.

   As regras do tema são (0,0,1). As nossas regras de componente são (0,1,0)
   para cima. A defesa precisa ficar ENTRE as duas:

     html :where(…) :is(p, li)   →   (0,0,2)

   Mais forte que o tema, em qualquer ordem de carga. Mais fraca que QUALQUER
   classe nossa — `.ds-cartao-valor { font-size: .88em }` continua mandando.
   Se esta regra fosse `.ds-x p` (0,1,1), ela passaria por cima das nossas
   próprias regras de tamanho e margem, e o conserto viraria o próximo defeito.

   `revert` devolve o valor do navegador — o mesmo da bancada, onde as telas
   foram desenhadas e medidas. `inherit` onde o navegador não tem opinião e o
   tema tem (cor, tamanho e entrelinha do texto).

   Onde vale: dentro de qualquer elemento nosso (`class` começando com `ds-`)
   MENOS o corpo da moldura, que é onde mora o texto que o Wil escreve na
   campanha. O texto dele segue o tema; as nossas telas, não.
   ────────────────────────────────────────────────────────────────── */
html :where([class^="ds-"]:not(.ds-moldura, .ds-moldura-corpo)) :is(p, li) {
	margin-top: revert;
	margin-bottom: revert;
	padding-top: revert;
	padding-bottom: revert;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}

html :where([class^="ds-"]:not(.ds-moldura, .ds-moldura-corpo)) :is(h1, h2, h3, h4, h5, h6) {
	margin-top: revert;
	margin-bottom: revert;
	padding: revert;
	font-weight: revert;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

html :where([class^="ds-"]:not(.ds-moldura, .ds-moldura-corpo)) a,
html a:where([class^="ds-"]) {
	text-decoration: revert;
}

/* v0.51.0 — o selo "Qualified" (Classified Ranking, cartões e página do Guest).
   Verde-escuro sobre fundo claro: 6,1:1. */
.ds-selo-qualified {
	display: inline-block;
	margin: 4px 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e7f4ea;
	color: #1e6b34;
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .02em;
}
.ds-rank-valor.ds-selo-qualified { margin: 0; }

/* v0.55.2 — a medalha antes da palavra (Wil, 27/09), em todo lugar onde o
   selo aparece: um lugar só no CSS, e a palavra continua traduzível. O leitor
   de tela lê só "Qualified" (texto alternativo vazio, onde o navegador
   entende a segunda forma). */
.ds-selo-qualified::before {
	content: "\1F3C5";
	content: "\1F3C5" / "";
	margin-right: .35em;
	font-weight: 400;
}

/* v0.51.1 — a descida até a classificação ("Left to qualify: $X"). */
.ds-cartao-falta { margin: 4px 0; font-size: .9em; color: var(--ds-muted, #555); }
.ds-cartao-falta strong { color: var(--ds-accent); font-variant-numeric: tabular-nums; }
.ds-rank-falta { display: block; font-weight: 400; font-size: .78em; color: var(--ds-muted, #555); line-height: 1.3; }
.ds-rank-falta strong { font-variant-numeric: tabular-nums; }
.ds-rank-nome .ds-selo-qualified { display: table; margin: 2px 0 0; padding: 0 6px; font-size: .72em; }
.ds-cartao .ds-selo-qualified,
.ds-progress .ds-selo-qualified { align-self: flex-start; width: fit-content; }

/* v0.52.0 — a página da revelação (o segundo clique do Celebration Day). */
.ds-revelacao-topo { text-align: center; margin-bottom: 1.5rem; }
.ds-revelacao-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ds-revelacao-guest { border: 1px solid var(--ds-track, #e5e2da); border-radius: 12px; padding: 1rem; background: #fff; }
.ds-revelacao-eu { border-color: var(--ds-accent); box-shadow: 0 0 0 2px rgba(30,107,52,.12); }
.ds-revelacao-quem { display: flex; align-items: center; gap: .75rem; }
.ds-revelacao-pos { font-weight: 700; color: var(--ds-muted, #555); min-width: 2rem; }
.ds-revelacao-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ds-revelacao-sem-foto { display: inline-block; background: #e5e7eb; }
.ds-revelacao-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.ds-revelacao-nome .ds-selo-qualified { display: table; margin-top: 2px; font-size: .72em; }
.ds-revelacao-total { font-weight: 700; color: var(--ds-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-revelacao-apoios { list-style: none; margin: .75rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--ds-track, #e5e2da); font-size: .9em; }
.ds-revelacao-apoios li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem 0; }
.ds-revelacao-apoios strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-revelacao-apoiador { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ds-revelacao-apoiador img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.ds-revelacao-apoiador small { color: var(--ds-muted, #555); }
.ds-revelacao-escolha { margin-top: .75rem; padding: .75rem; background: #f6f8f6; border-radius: 8px; font-size: .9em; }
.ds-revelacao-escolha label { display: block; margin: .5rem 0; }
.ds-revelacao-previa { background: #fff8e5; border: 1px solid #f0d58a; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9em; }

/* v0.64.0 — na página da campanha, no lugar do formulário e da inscrição.
   (As telas próprias — .ds-tela — moram em moldura.css.) */
.ds-tela-chamada {
	text-align: center;
	margin: 32px auto;
}

/* O botão de dentro não herda a largura cheia do formulário que ele
   substituiu: com `width: 100%` + padding, passava da tela no celular. */
.ds-tela-chamada .ds-primary {
	display: inline-block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* v0.67.0 — o Guest do Sponsor, no painel dele: como as caixas dos Prime
   Nine. Antes da revelação, avatar + spot + nome fictício; depois, a foto
   e o nome reais (pedido do Wil, 30/09). */
.ds-sponsor-guest {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	max-width: 240px;
	margin: 12px auto 16px;
	padding: 20px 16px;
	border: 1px solid #E3E0D8;
	border-radius: 12px;
	background: #FFFFFF;
}

.ds-sponsor-guest-foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.ds-sponsor-guest-vazia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EEF3F0;
	fill: #9DB5A9;
}

.ds-sponsor-guest-vaga {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1E6F50;
}

.ds-sponsor-guest-nome {
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ds-sponsor-guest-nome:hover {
	text-decoration: underline;
}

.ds-sponsor-guest-era {
	font-size: 13px;
	color: #55635C;
}

/* v0.68.0 — no painel do Sponsor: a foto e o nome dele no topo, e o logo
   com o nome do time na seção do time (pedido do Wil, 30/09). */
.ds-sponsor-eu {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 0 20px;
	margin: 0 0 20px;
	border-bottom: 1px solid #E3E0D8;
}

.ds-sponsor-eu-foto {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.ds-sponsor-eu-texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-sponsor-eu-papel {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1E6F50;
}

.ds-sponsor-eu-nome {
	font-size: 22px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.ds-signup-time-marca {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 8px 0 10px;
}

.ds-signup-time-logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: 12px;
	border: 1px solid #E3E0D8;
	background: #FFFFFF;
	padding: 4px;
	box-sizing: border-box;
	flex: none;
}

.ds-signup-time-nome {
	font-size: 18px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* v0.74.0 — no painel do Grace, a foto real no topo vem com o aviso de que
   só ele a vê. */
.ds-sponsor-eu-so-voce {
	font-size: 13px;
	color: #55635C;
}