/* Approved compact selections, shared across list, detail and live lifecycle.
 *
 * Esta folha é a última do documento, então a ordem da cascata já resolve os
 * conflitos com style.css e `!important` só sobra onde a regra concorrente
 * também é `!important`. Cores vêm dos tokens: escritas à mão, os cartões
 * ignoravam o tema escuro e o modo de contraste alto, que redefinem os tokens.
 * Espaçamento na escala de 4; três tamanhos de texto por cartão. */
.fixture[open]{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}.fixture>.expanded{background:var(--inset)}.fixture-heading{background:var(--panel)}

/* Quatro em uma linha; seis em duas de três. Cinco ocupa as duas linhas por
 * inteiro, em vez de deixar uma coluna vazia ao lado do último par. */
/* Seis linhas compartilhadas por todos os cartões da fileira: mercado, número,
 * equipe, apuração, conferência e rodapé. Sem isso cada cartão resolvia a própria
 * altura, e um título que quebra em três linhas empurrava o número para baixo só
 * naquele cartão: a fileira inteira saía torta em cascata. `1fr` na conferência
 * é o que absorve a diferença de conteúdo, deixando o rodapé no mesmo pé. */
.compact-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
 grid-template-rows:auto auto auto auto 1fr auto;
 /* O padrão precisa se repetir nas linhas implícitas, senão a segunda fileira de
  * cartões cai em linhas `auto` e volta a resolver a própria altura. */
 grid-auto-rows:auto auto auto auto 1fr auto}
.compact-insight-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-insight-grid[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
/* O número é o centro do cartão. Alinhado à esquerda numa coluna só, ele
 * deixava uma faixa vazia à direita que nenhum ajuste de tamanho resolvia. */
.card-analysis-insight{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 16px;min-height:0;display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;text-align:center;position:relative;overflow:hidden}
/* Três vãos, e só três. Os anteriores eram 8, 0, 6 e 0, com o espaço ENTRE
 * grupos menor que o espaço DENTRO do grupo: num cartão sem borda interna nem
 * fundo de seção, o vão é o único agrupador que sobra, e invertido ele agrupava
 * errado. v1 costura o que é a mesma coisa, v2 separa irmãos, v3 separa os três
 * grupos: o que é a seleção, o que ela fez nos jogos recentes, e o registro. */
/* O ritmo agora é do grid: row-gap cobre a transição entre blocos, e os vãos
 * internos de cada bloco continuam nos tokens. */
.card-analysis-insight{--v1:4px;--v2:8px;--v3:20px;row-gap:var(--v2)}
.card-analysis-insight .insight-check-slot{margin-top:var(--v2)}
.card-analysis-insight .insight-period{font-size:11px;color:var(--muted);line-height:1.3;font-weight:600;text-transform:none;letter-spacing:0}
.card-analysis-insight h3{font-size:32px;line-height:1.05;letter-spacing:-1.2px;margin:0;font-weight:690;font-variant-numeric:tabular-nums}
.card-analysis-insight .insight-period{margin-bottom:0}
.card-analysis-insight .insight-who{font-size:11px;color:var(--muted);line-height:1.3;min-height:1.3em;margin-top:0}

/* Conferência retrospectiva: uma linha por equipe, com o denominador real. */
.insight-check{margin-top:0}
/* Alvo de toque: sem o preenchimento vertical o botão media 15px de altura,
 * abaixo do mínimo de 24px, e num cartão que também é usado no celular. */
.insight-check-label{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:4px;min-height:24px;margin-bottom:var(--v1);font:inherit;font-size:10px;letter-spacing:.4px;text-transform:uppercase;font-weight:650;color:var(--muted);cursor:help;border-radius:6px}
.insight-check-label:hover{background:var(--inset)}
.insight-check-hint{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--line);font-size:9px;line-height:1}
.insight-check-label:hover .insight-check-hint,.insight-check-label:focus-visible .insight-check-hint{border-color:var(--accent);color:var(--accent)}
.insight-check-rows{display:flex;flex-direction:column;gap:var(--v2);margin-top:0}
.insight-check-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--v1) 6px;align-items:baseline;text-align:left}
.ic-eq{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-vl{font-size:11px;font-variant-numeric:tabular-nums;font-weight:650}
.ic-tr{grid-column:1/3;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.ic-tr i{display:block;height:100%;background:var(--accent);border-radius:2px}
.insight-note{max-width:min(30rem,90vw);border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);padding:14px 16px;font-size:13px;line-height:1.5;text-align:left}
.insight-note::backdrop{background:transparent}

.compact-odd{display:inline-flex;align-items:baseline;gap:5px}.compact-odd small{font-size:11px;color:var(--muted)}.compact-odd b{font-size:12px;color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}.compact-no-odd{font-size:11px;color:var(--muted)}
/* O rodapé volta ao fim do cartão, mas agora com conteúdo dos dois lados:
 * o vazio anterior vinha de empurrar um link solitário para baixo. */
.compact-insight-footer{margin-top:0;padding-top:var(--v2);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;border:0}.compact-insight-footer a{font-size:11px;color:var(--muted);min-height:24px;display:inline-flex;align-items:center}.card-analysis-preview{padding:12px}.insight-live-progress{width:100%;font-size:11px}.insight-live-progress .insight-settlement{font-size:11px;display:inline-flex;gap:4px;padding:0;background:none;border:0}.insight-progress-track{display:block;height:4px;background:var(--line);border-radius:4px;margin-top:4px;overflow:hidden}.insight-progress-track i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .25s ease}

/* Uma coluna só. Em duas ou três, cada insight virava uma coluna estreita demais
 * para o bilhete caber ao lado da leitura, e o layout horizontal colapsava para
 * empilhado dentro de cada célula: o pior dos dois, alto e apertado ao mesmo
 * tempo. Empilhados, cada um usa a largura inteira e fica horizontal de fato. */
.analysis-list{display:flex;flex-direction:column;gap:12px}/* Bilhete à esquerda, leitura à direita. Empilhado, o cartão crescia até o
 * leitor perder de vista o número que o texto explica. A coluna do bilhete tem
 * largura fixa porque ele já tem medida própria: elástico, deformava a cada
 * texto vizinho de tamanho diferente. */
.emission-insight{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel)}
/* Fora da grade de cartões o subgrid não tem linhas de onde herdar, e o bilhete
 * esticava até a altura da leitura. Aqui ele volta a resolver a própria altura. */
.emission-insight .card-analysis-insight{display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none;align-self:start;margin:0}
.emission-insight .card-analysis-insight .insight-period{margin-bottom:var(--v2)}
.emission-insight .card-analysis-insight .insight-who{margin-top:var(--v1)}
.emission-insight .card-analysis-insight .insight-observado{margin-top:var(--v2)}
.emission-insight .card-analysis-insight .insight-check-slot{margin-top:var(--v3)}
.emission-insight .card-analysis-insight .compact-insight-footer{margin-top:var(--v3)}
.emission-leitura{min-width:0;display:flex;flex-direction:column;gap:12px;padding-top:4px}
.emission-leitura-topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
@media(max-width:820px){
 /* Abaixo disso a leitura cairia em linhas de quatro palavras ao lado do
  * bilhete, então elas empilham e o bilhete centraliza. */
 .emission-insight{grid-template-columns:1fr;gap:14px;justify-items:center}
 .emission-insight .card-analysis-insight{max-width:260px;width:100%}
 .emission-leitura{width:100%;padding-top:0}
}.emission-insight .visible-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.emission-insight .visible-heading strong{font-size:20px;flex-basis:100%;font-variant-numeric:tabular-nums}.emission-insight .market{font-size:13px;color:var(--muted);flex-basis:100%}.insight-ai-summary{font-size:15px;line-height:1.55;margin:0}/* A seta acompanha o texto. Com space-between numa coluna larga ela ficava
 * sozinha no canto direito, a meia tela do rótulo que ela abre. */
.insight-explanation summary{cursor:pointer;display:inline-flex;justify-content:flex-start;gap:6px;color:var(--accent);font-size:13px;font-weight:600;padding:10px 0;list-style:none;min-height:24px;align-items:center}
.emission-insight .insight-explanation{border-top:1px solid var(--line);margin-top:4px}.insight-explanation summary::-webkit-details-marker{display:none}.insight-explanation[open] summary span{transform:rotate(180deg)}.insight-explanation .analysis-copy{font-size:13px;animation:analysis-reveal .2s ease}

.analysis-gate{position:relative;min-height:220px;border-radius:14px;overflow:hidden;isolation:isolate;margin:12px}.analysis-gate-blur{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;filter:blur(5px);opacity:.7;pointer-events:none;user-select:none;padding:12px}.gate-placeholder{height:172px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 16px}.gate-placeholder i{display:block;width:65%;height:12px;background:color-mix(in srgb,var(--muted) 35%,var(--line));border-radius:4px;margin:12px 0}.gate-placeholder i:nth-child(2){width:90%;height:8px}.gate-placeholder i:nth-child(3){width:35%;height:8px}.analysis-gate-invite{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(90deg,color-mix(in srgb,var(--inset) 56%,transparent),color-mix(in srgb,var(--inset) 93%,transparent),color-mix(in srgb,var(--inset) 56%,transparent));text-align:center;padding:20px;gap:8px}.analysis-gate-invite strong{font-size:18px}.analysis-gate-invite p{font-size:13px;margin:0;color:var(--muted)}.analysis-gate-invite .primary{display:inline-flex;gap:20px;align-items:center;background:var(--accent);color:var(--bg);border-radius:9px;padding:12px 16px;font-size:13px;font-weight:600;min-height:44px;animation:analysis-reveal .3s ease;transition:transform .18s,box-shadow .18s}.analysis-gate-invite .primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 24%,transparent)}.gate-login{font-size:12px;color:var(--accent)}.gate-lock{font-size:20px;color:var(--accent)}.analysis-loading{padding:20px;text-align:center;color:var(--muted);font-size:13px}.analysis-loader{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:analysis-spin 1s linear infinite;vertical-align:middle;margin-right:8px}.analysis-loading-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.analysis-loading-cards i{height:100px;border-radius:12px;background:linear-gradient(100deg,var(--inset) 25%,var(--panel) 50%,var(--inset) 75%);background-size:200% 100%;animation:analysis-shimmer 1.8s linear infinite}
@keyframes analysis-spin{to{transform:rotate(360deg)}}@keyframes analysis-shimmer{to{background-position:-200% 0}}@keyframes analysis-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){.compact-insight-grid,.compact-insight-grid[data-count="5"],.compact-insight-grid[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}.card-analysis-insight{padding:12px 10px}.card-analysis-insight h3{font-size:27px}.analysis-gate-blur{grid-template-columns:repeat(2,1fr)}.gate-placeholder:nth-child(n+3){display:none}.analysis-loading-cards{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.analysis-loader,.analysis-loading-cards i,.analysis-copy,.analysis-gate-invite .primary{animation:none!important;transition:none!important}.insight-progress-track i{transition:none}}
.analysis-list{grid-template-columns:repeat(4,minmax(0,1fr))}.analysis-list[data-count="5"],.analysis-group{min-width:0}.emission-insight{min-width:0}.emission-insight .analysis-copy{overflow-wrap:anywhere}.emission-insight .visible-heading{padding:0}.card-analysis-insight .insight-settlement{margin:0}
@media(max-width:700px){.analysis-list,.analysis-list[data-count="5"],.analysis-list[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}.emission-insight{padding:12px}.emission-insight .visible-heading strong{font-size:18px}.insight-ai-summary,.insight-explanation .analysis-copy{font-size:12px}.insight-explanation summary{font-size:12px}}

/* Selo de canto. O veredicto responde SE aconteceu; a linha sob a seleção
 * responde O QUÊ. Separados, não competem. Só o que se confirmou fica sólido e
 * invertido: erro e andamento usam fundo suave com o símbolo forte, o que dá
 * clareza sem transformar cada cartão perdido em alerta. */
.insight-marca{position:absolute;top:0;right:0;width:46px;height:46px;pointer-events:none;
 clip-path:polygon(100% 0,100% 100%,0 0);background:var(--inset);
 display:flex;align-items:flex-start;justify-content:flex-end;padding:5px 7px 0 0}
.insight-marca i{font-style:normal;font-size:13px;line-height:1;color:var(--muted)}
.card-analysis-insight.acertou .insight-marca{background:var(--accent)}
.card-analysis-insight.acertou .insight-marca i{color:var(--panel)}
.card-analysis-insight.errou .insight-marca{background:var(--negativo-suave)}
.card-analysis-insight.errou .insight-marca i{color:var(--negativo);font-weight:700}
.card-analysis-insight.acontecendo .insight-marca{background:var(--andamento-suave)}
.card-analysis-insight.acontecendo .insight-marca i{color:var(--andamento);font-size:11px;padding-top:1px}
/* O recuo do mercado existe por causa do selo, então só vale onde há selo: em
 * pré-jogo, que é o estado mais comum, ele espremeria o texto sem motivo. */
.card-analysis-insight:has(.insight-marca) .insight-period{padding:0 22px}
/* O bloco existe sempre; o valor é que aparece ou não. Um cartão sem apuração
 * mantém a linha reservada, e o de baixo não sobe sozinho. */
.insight-observado{min-height:0}
.insight-observado-valor{display:block;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.acertou .insight-observado-valor{color:var(--accent)}
.errou .insight-observado-valor{color:var(--negativo)}
.acontecendo .insight-observado-valor{color:var(--andamento)}
/* Mercado descritivo: o valor do jogo ao lado da média, e nada além disso. Cor
 * neutra e nenhuma fita de canto porque não há veredicto a dar; escrita à mão
 * mesmo sendo igual ao padrão, para que uma mudança no valor neutro do resto
 * do cartão não pinte de acerto ou erro o que é só observação. */
.observado .insight-observado-valor{color:var(--muted)}
/* Largura explícita: como item de um flex em coluna a trilha encolhia para o
 * conteúdo, que é vazio, e renderizava com zero de largura sem erro nenhum. */
.insight-obs-trilho{display:block;width:96px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin:6px auto 0;align-self:center}
.insight-obs-trilho i{display:block;height:100%;border-radius:2px;background:var(--andamento)}
@media(max-width:700px){
 .card-analysis-insight{--v3:16px;padding:16px 12px}
 .insight-marca{width:34px;height:34px;padding:3px 5px 0 0}
 .insight-marca i{font-size:10px}
 .card-analysis-insight.acontecendo .insight-marca i{font-size:8px}
 .card-analysis-insight:has(.insight-marca) .insight-period{padding:0 36px}
 .compact-insight-footer{flex-wrap:wrap;gap:4px;justify-content:center}
}

/* Favoritar à esquerda, entrar na partida à direita. Lado a lado, os dois CTAs
 * disputavam o mesmo canto e o "Raio X do confronto" competia com o caminho
 * principal, que é abrir o jogo. */
.fixture-tools{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fixture-tools-left{display:inline-flex;align-items:center}