/* =========================================================================
   Página do produto (/produtos/{slug}): extraído do rascunho aprovado.
   Base (tokens, chips, blocos, tabelas .tbl/.tbl-stack, .ext, .note) em /assets/site.css.
   ========================================================================= */
/* ---- Página do produto ---- */
.prod-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.tracks { margin-top: 1.5rem; }
.stable { display: flex; flex-direction: column; gap: .8rem; position: relative; overflow: hidden; }
.stable .big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -.03em; color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.stable .big.long { font-size: clamp(1.15rem, .8rem + 2vw, 1.9rem); letter-spacing: -.02em; }
.stable .sub { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.stable::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); pointer-events: none; }
.series { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: .45rem; }
.series span { display: flex; justify-content: space-between; gap: .4rem; padding: .4rem .6rem; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); font-size: .74rem; color: var(--muted); font-weight: 600; }
.series b { font-family: var(--font-mono); color: var(--ink-2); font-weight: 600; }
.policy ul { display: grid; gap: .55rem; }
.policy li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.policy li svg { width: 18px; height: 18px; margin-top: .1rem; }
.policy .us svg { color: var(--success); }
.policy h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.fine { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); text-wrap: pretty; }
.ph-prod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1.2rem; align-items: center; }
.ph-prod .ptile { grid-row: 1 / span 2; }
.ph-prod .ph-meta { margin: 0; }
.ph-prod h1 { margin: 0; }
@media (max-width: 600px) { .ph-prod { column-gap: .9rem; } .ph-prod .ptile { --s: 54px; border-radius: 15px; } }
/* Trilhas só com nome e versão (.tbl-2col): a versão perto do nome, não do outro lado da tela */
@media (min-width: 601px) { .tracks .tbl-2col th:first-child { width: 50%; } }
@media (min-width: 901px) { .tracks .tbl-2col th:first-child { width: 24rem; } }
.tbl .tier { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-top: .1rem; }
.series span { align-items: baseline; }
.checker { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); position: relative; }
.checker h3 { font-size: var(--fs-base); display: flex; align-items: flex-start; gap: .5rem; }
/* Ícone na altura da 1ª linha (no celular a pergunta quebra em duas e o ícone ficava no meio delas) */
.checker h3 svg { width: 18px; height: 18px; color: var(--brand-2); flex: 0 0 auto; margin-top: .05em; }
.checker > p { color: var(--muted); font-size: var(--fs-sm); margin: .35rem 0 .8rem; }
.checker form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.checker .text-input { height: 46px; font-family: var(--font-mono); font-size: var(--fs-sm); border-radius: var(--r-pill); padding: 0 1.1rem; }
.checker .btn { height: 46px; }
.checker-out { margin-top: .8rem; }
.checker-out:empty { display: none; }
.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; padding: .85rem 1rem; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.chk > svg { width: 20px; height: 20px; margin-top: .05rem; }
.chk b { color: var(--ink); }
.chk ul { display: grid; gap: .3rem; margin-top: .45rem; }
.chk li a { color: var(--brand-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--brand-2) 35%, transparent); }
.chk.ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.chk.ok > svg { color: var(--success-ink); }
.chk.bad { background: var(--sev-high-bg); border-color: var(--sev-high-line); }
.chk.bad > svg { color: var(--sev-high-fg); }
.chk.unk > svg { color: var(--muted); }
@media (max-width: 420px) { .checker form { grid-template-columns: 1fr; } }
/* Produto: política por plano */
.policy .pol-sec + .pol-sec { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.policy li.rc svg { color: var(--success); }
.policy li.voce svg { color: var(--brand-2); }
.policy li.dica svg { color: var(--muted); }
.policy li.dica { color: var(--muted); }
.policy .fine { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.6; }
.policy .fine > svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .2rem; }
.policy .fine b { color: var(--ink-2); }
/* ---- O que era style="" no rascunho (a CSP não aceita atributo style) ---- */
.prod-stack .block-h h2, .tracks .block-h h2 { font-size: var(--fs-base); }
.stable .block-h { margin: 0; }
.stable .big.txt { font-family: var(--font-display); }
.stable .note { margin-top: 0; }
.series-lead { color: var(--muted); font-size: var(--fs-sm); margin: -.3rem 0 .8rem; }
.prod-hist { padding-bottom: 0; }
.prod-hist .section-head h2 { font-size: var(--fs-lg); }
/* Verificador: o campo (no rascunho, .text-input era do base) e o "e mais N" */
.checker .text-input { width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); transition: border-color var(--t), box-shadow var(--t); }
.checker .text-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--surface); }
.chk .chk-more { margin-top: .35rem; }
/* Sem JS o verificador não funciona: fica escondido */
html:not(.js) .checker { display: none; }

/* brilho no canto de cima, à esquerda (atrás do rótulo da versão) */
.stable::after { right: auto; left: -90px; top: -100px; width: 250px; height: 250px; opacity: .7; }

/* =========================================================================
   Topo empilhado em largura total (decisão do Gustavo, 29/09/2026): o cartão da versão em cima, com a versão à
   esquerda e o resumo dos avisos à direita, e uma faixa embaixo (correções + verificador, ou a lista dos plugins) só
   quando há o que mostrar; "Quem atualiza o quê" embaixo, em duas colunas. Nada de cartão esticado com vão vazio.
   ========================================================================= */
.stable { gap: 1.25rem; }
.stable-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1rem 2rem; align-items: start; }
.stable-main { display: grid; gap: .8rem; min-width: 0; }
/* Explicação do canal em destaque (DirectAdmin: Stable), no formato dos tiers da tabela, colada no rótulo */
.stable-tier { margin-top: -.55rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; line-height: 1.45; }
.stable .block-h { justify-content: flex-start; }
.stable-foot { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.stable-foot .note { margin: 0; }
html:not(.js) .stable-foot.only-checker { display: none; }

/* Resumo dos avisos: avisos da janela por gravidade, último aviso e RSS */
.pfacts { margin-top: .3rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pfacts > div { min-width: 0; }
.pfacts dt { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; line-height: 1.35; }
.pfacts dd { margin-top: .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.pfacts .pf-n { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Contagem numa coluna e os chips em outra: quando os chips quebram ("Sem nota oficial" + 2 gravidades, ou 4 e 5
   chips), a 2ª linha começa embaixo do 1º chip, não embaixo do número. */
.pfacts dd.pf-count { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: .55rem; }
.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.pfacts .pf-sev { padding: .16rem .5rem .16rem .38rem; font-size: .7rem; }
.pfacts .pf-sev svg { width: 12px; height: 12px; }
.pfacts .pf-sev-n { font-variant-numeric: tabular-nums; }
.pfacts .pf-none { color: var(--muted); font-weight: 600; }
.pfacts a { color: var(--brand-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-2) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--t); }
.pfacts a:hover { text-decoration-color: currentColor; }
.pf-rss { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.pf-rss svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* Computador: lista vertical numa caixa ao lado da versão (rótulo à esquerda, valor à direita) */
@media (min-width: 901px) {
  .pfacts { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: .2rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .pfacts > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem 1rem; padding: .7rem 0; }
  .pfacts > div + div { border-top: 1px solid var(--line); }
  .pfacts dt { max-width: 8.5rem; }
  .pfacts dd { margin: 0; justify-content: flex-end; text-align: right; }
  /* A contagem é o número principal e pode ter até 5 chips: rótulo em cima, contagem e chips numa linha embaixo
     (lado a lado, os chips empilhavam à direita com a borda esquerda torta). */
  .pfacts > div:first-child { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .pfacts > div:first-child dt { max-width: none; }
  .pfacts > div:first-child dd { justify-content: flex-start; text-align: left; }
}
@media (max-width: 900px) { .stable-top { grid-template-columns: minmax(0, 1fr); } }
/* Computador: a caixa de fatos (3 linhas) é mais alta que a coluna da versão. A versão fica centrada na altura da caixa:
   rótulo, versão e "Lançada em · site" juntos, com a sobra dividida em cima e embaixo (com align-items: start, a sobra
   inteira virava uma faixa vazia embaixo da versão, e o cartão terminava nela). */
@media (min-width: 901px) { .stable-top { align-items: center; } }
@media (max-width: 520px) { .pfacts { grid-template-columns: 1fr 1fr; } .pfacts > div:first-child { grid-column: 1 / -1; } }

/* Verificador na faixa de baixo: texto à esquerda e formulário à direita, na coluna do resumo de cima */
.stable-foot .checker { margin: 0; padding: 0; border: 0; }
@media (min-width: 901px) {
  .stable-foot .checker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: 2rem; align-items: center; }
  .stable-foot .checker > h3, .stable-foot .checker > p { grid-column: 1; }
  .stable-foot .checker > p { margin-bottom: 0; }
  .stable-foot .checker form { grid-column: 2; grid-row: 1 / span 2; }
  .stable-foot .checker-out { grid-column: 1 / -1; }
}
/* Computador largo: a caixa um pouco mais larga, para "Alta · Média · Sem nota oficial" caberem numa linha ao lado da
   contagem (caixa mais baixa); o formulário do verificador, embaixo, segue a mesma coluna. Abaixo de 1100 px continua
   22rem (a versão longa do CloudLinux precisa da largura). */
@media (min-width: 1100px) {
  .stable-top, .stable-foot .checker { grid-template-columns: minmax(0, 1fr) minmax(0, 23.5rem); }
}

/* Plugins de WordPress: quais plugins tiveram aviso na janela e a partir de qual versão estão corrigidos
   (a maior correção entre todos os avisos do plugin, ProductPageModel::pluginAdvisories) */
.plug-sum { gap: .8rem; }
.plug-sum h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plug-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem .7rem; }
.plug-list li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
@supports not (grid-template-columns: subgrid) { .plug-list li { grid-template-columns: 5.5rem minmax(0, 1fr) auto; column-gap: .7rem; } }
.plug-list .sev { justify-self: start; }
.plug-list .pn-w { min-width: 0; justify-self: start; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* O overflow do corte em 2 linhas recortava o anel de foco do link: o anel vai no próprio .pn-w (o overflow de um
   elemento não recorta o outline dele mesmo), do tamanho do nome (justify-self: start). Como o .row da lista. */
@supports selector(:has(a)) {
  .plug-list .pn:focus-visible { outline: none; }
  .plug-list .pn-w:has(.pn:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
}
.plug-list .pn { font-weight: 700; color: var(--ink); }
.plug-list .pn:hover { color: var(--brand-2); }
.plug-list .pn-n { color: var(--muted); font-weight: 600; white-space: nowrap; }
.plug-list .pf { justify-self: end; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.plug-list .pf b { color: var(--ink-2); }
/* Computador largo, de 4 a 6 plugins (.plug-2col): duas colunas (uma trilha vazia de respiro no meio), preenchidas
   coluna a coluna: a 2ª metade (.c2, marcada no Blade) vai para a direita e o "dense" a sobe para a 1ª linha. Com
   número ímpar, a coluna da direita fica uma linha mais curta. Até 3 plugins: uma coluna, sem esticar até a borda. */
@media (min-width: 1100px) {
  .plug-list.plug-2col { grid-template-columns: auto minmax(0, 1fr) auto .9rem auto minmax(0, 1fr) auto; grid-auto-flow: row dense; }
  .plug-list.plug-2col li { grid-column: 1 / span 3; }
  .plug-list.plug-2col li.c2 { grid-column: 5 / span 3; }
  .plug-list:not(.plug-2col) { max-width: 46rem; }
}
/* Celular: "corrigido na X" embaixo do nome, com um respiro pequeno (o li é grade própria, sem o row-gap da lista) */
@media (max-width: 420px) { .plug-list { grid-template-columns: auto minmax(0, 1fr); } .plug-list li { row-gap: .2rem; } .plug-list .pf { grid-column: 2; justify-self: start; } }
.plug-rest { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.plug-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 2rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.plug-cov { flex: 1 1 32rem; max-width: 78ch; display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; text-wrap: pretty; }
.plug-cov svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .2rem; }
.plug-foot .link-arrow { white-space: nowrap; }

/* "Quem atualiza o quê": os planos lado a lado, a legenda do prazo como rodapé */
.pol-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
.policy .pol-cols .pol-sec + .pol-sec { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 2rem; }
.pol-sec:only-child { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .pol-cols { grid-template-columns: minmax(0, 1fr); }
  .policy .pol-cols .pol-sec + .pol-sec { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
}
.policy li span { text-wrap: pretty; }
/* Com o cartão em largura total, linhas de ~85 a 95 caracteres, não de 140 (a seção única do Ubuntu e a legenda). O "ch"
   da Plus Jakarta Sans (largura do "0") é bem maior que a letra média: 62ch dá ~620 px no texto e 64ch ~600 px na legenda. */
.policy li span { max-width: 62ch; }
.policy .fine > span { max-width: 64ch; }
.lnk { color: var(--brand-2); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-2) 35%, transparent); text-underline-offset: 3px; white-space: nowrap; }
.lnk:hover { text-decoration-color: currentColor; }

/* Cabeçalho: a etiqueta "Cobertura parcial" leva às fontes (/como-funciona#fontes) */
a.tag-partial { transition: border-color var(--t); }
a.tag-partial:hover { border-color: currentColor; }

/* Celular: a lista de plugins (nome, versão, data) em duas linhas por plugin: nome e versão lado a lado, a data
   pequena embaixo. Empilhada com rótulos, eram 15 cartões de ~105 px (1.600 px de rolagem só nessa tabela). */
@media (max-width: 600px) {
  .tbl-stack.tbl-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem 1rem; padding: .65rem .9rem; }
  .tbl-stack.tbl-compact td:first-child { margin: 0; }
  .tbl-stack.tbl-compact td.mono { grid-column: 2; grid-row: 1; display: block; padding: 0; }
  .tbl-stack.tbl-compact td.mono::before { content: none; }
  .tbl-stack.tbl-compact td + td:not(.mono) { grid-column: 1 / -1; justify-content: flex-start; gap: .35rem; padding: 0; font-size: var(--fs-xs); color: var(--muted); }
}