/*
 * dbs-layout.css — grade e tipografia comuns do dbslice.net (01/11/2026).
 * Carregado em TODAS as páginas, depois do site.css e do CSS da página (blog.css, guide.css, home2.css…),
 * para que nenhuma página tenha largura própria. Documentação: docs/LAYOUT.md.
 *
 * Regra única: todo conteúdo começa na mesma borda esquerda do logo e termina na mesma borda direita do
 * botão "Buy dbSlice" (container de 1200 px). Páginas de leitura usam a grade "texto + coluna lateral".
 */

/* ---- Fonte: Inter variável, servida pelo próprio site (antes caía na fonte do sistema, diferente em cada SO) ---- */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Medidas (tokens) ---- */
:root{
  --dbs-container:1200px;                    /* largura do cabeçalho, do conteúdo e do rodapé */
  --dbs-gutter:24px;                         /* margem lateral mínima da tela */
  --dbs-aside:17rem;                         /* coluna lateral (sumário, tags, busca) */
  --dbs-gap:clamp(1.5rem,4vw,3.5rem);        /* espaço entre texto e coluna lateral */
  --dbs-measure:72ch;                        /* largura máxima de um parágrafo */
  --dbs-hero-title:clamp(2.1rem,4.6vw,3.2rem);
  --dbs-page-y:clamp(1.8rem,4vw,2.8rem);     /* respiro vertical do corpo da página */
}
@media(max-width:760px){:root{--dbs-gutter:16px}}

/* ---- Container único ---- */
.shell,.dbs-wrap{width:min(var(--dbs-container),calc(100% - 2 * var(--dbs-gutter)));max-width:none;margin-inline:auto}
/* Larguras próprias antigas (860, 980, 1100, 800 px) deixam de existir: tudo segue o container. */
.legal-shell,.guide-shell,.blog-narrow,.support-page,.guide-layout{max-width:none}

/* ---- Hero: alinhado à esquerda do container, título e resumo com largura de leitura ---- */
.legal-hero h1,.guide-hero h1,.blog-hero h1{max-width:52rem;font-size:var(--dbs-hero-title)}
.legal-hero p:not(.eyebrow),.guide-hero p,.blog-hero p{max-width:46rem}

/* ---- Grade de leitura: texto + coluna lateral (a coluna existe mesmo vazia, para o texto ter sempre a mesma largura) ---- */
.dbs-page,.guide-layout,.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--dbs-aside);gap:var(--dbs-gap);padding-block:var(--dbs-page-y)}
.dbs-page>.dbs-main,.guide-layout>.guide-body,.blog-layout>.blog-main{min-width:0;grid-column:1}
.dbs-aside,.guide-toc,.blog-side{grid-column:2;align-self:start;position:sticky;top:6rem}
.legal-content.dbs-main{padding:0}
.dbs-main>*:first-child{margin-top:0}
.dbs-main p,.dbs-main li{max-width:var(--dbs-measure)}
.dbs-main table p,.dbs-main table li,.dbs-main .support-cards p{max-width:none}
/* Variante "full": página sem conteúdo lateral (about, suporte, contato, FAQ) usa a largura toda do container;
   texto, caixas, cartões e formulários vão de borda a borda do container. */
.dbs-page.dbs-page-full{grid-template-columns:minmax(0,1fr)}
/* Na variante full, texto e caixas vão até a borda direita do container, alinhados com os cartões abaixo. */
.dbs-page-full .dbs-main p,.dbs-page-full .dbs-main li{max-width:none}
@media(max-width:900px){
  .dbs-page,.guide-layout,.blog-layout{grid-template-columns:minmax(0,1fr)}
  .dbs-aside,.guide-toc,.blog-side{grid-column:1;position:static;order:-1}
}

/* ---- Sumário lateral ("On this page") ---- */
.dbs-toc{font-size:.9rem}
.dbs-toc summary{margin:0 0 .6rem;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;list-style:none;cursor:default}
.dbs-toc summary::-webkit-details-marker{display:none}
.dbs-toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
.dbs-toc li{margin:0;max-width:none}
.dbs-toc a{display:block;padding:.32rem 0 .32rem .85rem;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35}
.dbs-toc a:hover,.dbs-toc a:focus-visible{color:var(--blue);border-left-color:var(--blue)}
@media(max-width:900px){.dbs-toc{padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff}.dbs-toc summary{margin:0;cursor:pointer;list-style:revert}.dbs-toc details[open] summary{margin-bottom:.6rem}}

/* ---- Âncoras não ficam escondidas sob o cabeçalho fixo ---- */
main h2[id],main h3[id]{scroll-margin-top:6rem}

/* ---- Faixas de largura total (CTA, relacionados): conteúdo no container ---- */
.dbs-cta .dbs-wrap,.dbs-related .dbs-wrap{width:min(var(--dbs-container),calc(100% - 2 * var(--dbs-gutter)))}