/* ─────────────────────────────────────────────────────────────
   SF Dojo — site público (direção B · Manual técnico)
   Origem: docs/design/prototipo.html (direção B).

   Regras da casa:
   - Celular primeiro. Breakpoints: 600, 720, 1000 e 1200px.
   - Tema: segue o sistema; [data-theme="light"|"dark"] no <html> força um lado (tema.js / site.js).
   - Escala tipográfica 1,25 (terça maior), mínimo de 14px. Duas famílias: IBM Plex Sans
     (títulos 600, texto 400, interface 500) e IBM Plex Mono só em código.
   - Nada de estilo inline: a CSP bloqueia. Tudo por classe.
   ───────────────────────────────────────────────────────────── */

@layer reset, base, components, utilities;

/* ---------- fontes (OFL, hospedadas aqui; licença em /assets/fonts/OFL-IBMPlex.txt) ---------- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexMono-500.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* famílias */
  --f-body:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* escala 1,25, fluida entre 390 e 1280px de largura (px: 14 · 17–18 · 20–22,4 · 24–28 · 28–35,2 · 36–56) */
  --fs-sm:.875rem;
  --fs-base:clamp(1.0625rem, 1.035rem + .1124vw, 1.125rem);
  --fs-h4:clamp(1.25rem, 1.184rem + .2697vw, 1.4rem);
  --fs-h3:clamp(1.5rem, 1.39rem + .4494vw, 1.75rem);
  --fs-h2:clamp(1.75rem, 1.553rem + .809vw, 2.2rem);
  --fs-h1:clamp(2.25rem, 1.702rem + 2.247vw, 3.5rem);
  --lh-body:1.65; --lh-head:1.15; --lh-tight:1.1;
  --measure:38rem;

  /* espaço */
  --gutter:clamp(16px, 5vw, 56px);
  --band-pad:clamp(3rem, 7vw, 5.5rem);
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem;

  /* faixas (dificuldade): iguais nos dois temas */
  --belt-branca:#FFFFFF; --belt-amarela:#E2B12C; --belt-verde:#23774A; --belt-marrom:#74462A; --belt-preta:#15171C;

  /* código: painel sempre escuro */
  --code-fg:#E4E7EE; --tk-c:#949DAE; --tk-s:#E7C27D; --tk-k:#9BBBFF; --tk-f:#7FD4BB;
  --tk-v:#F3A882; --tk-n:#D6B6FF; --tk-d:#FF9384; --tk-t:#AEB8C8;

  /* cores: tema claro */
  --bg:#F7F8FA; --band:#E8ECF2; --ink:#0E1626; --muted:#4A5568; --mark:#2347A0;
  --link:#2347A0; --accent:#B4302A; --accent-text:#A8291F; --focus:#2347A0; --ok:#17673F;
  --rule:color-mix(in srgb, #2347A0 13%, transparent);
  --code-bg:#0E1626; --code-inline:color-mix(in srgb, #2347A0 10%, transparent);
  --zebra:color-mix(in srgb, #0E1626 5%, transparent);
  --field-bg:#FFFFFF; --field-edge:#AEB7C6; --choice-on:#E5ECFA; --chip-bg:#E8ECF2;
  --btn-bg:#2347A0; --btn-fg:#FFFFFF; --btn-hover:#1A3881;
  --foot:#0E1626; --on-foot:#E2E7EF; --on-foot-muted:#A0ABBD;
  --ph-bg:#FFF0BF; --ph-edge:#8A6A00;
  --swatch-edge:color-mix(in srgb, #0E1626 55%, transparent);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1019; --band:#141B28; --ink:#E2E7EF; --muted:#9CA8BA; --mark:#8EADF2;
    --link:#8EADF2; --accent:#FF7B6B; --accent-text:#FF8E80; --focus:#8EADF2; --ok:#74D4A0;
    --rule:color-mix(in srgb, #8EADF2 10%, transparent);
    --code-bg:#05080E; --code-inline:color-mix(in srgb, #8EADF2 14%, transparent);
    --zebra:color-mix(in srgb, #E2E7EF 5%, transparent);
    --field-bg:#070B12; --field-edge:#3A4558; --choice-on:#16233D; --chip-bg:#141B28;
    --btn-bg:#8EADF2; --btn-fg:#0B1019; --btn-hover:#B2C8F7;
    --foot:#05080E; --on-foot:#E2E7EF; --on-foot-muted:#97A2B4;
    --ph-bg:#3B3010; --ph-edge:#D9B44A;
    --swatch-edge:color-mix(in srgb, #E2E7EF 55%, transparent);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1019; --band:#141B28; --ink:#E2E7EF; --muted:#9CA8BA; --mark:#8EADF2;
  --link:#8EADF2; --accent:#FF7B6B; --accent-text:#FF8E80; --focus:#8EADF2; --ok:#74D4A0;
  --rule:color-mix(in srgb, #8EADF2 10%, transparent);
  --code-bg:#05080E; --code-inline:color-mix(in srgb, #8EADF2 14%, transparent);
  --zebra:color-mix(in srgb, #E2E7EF 5%, transparent);
  --field-bg:#070B12; --field-edge:#3A4558; --choice-on:#16233D; --chip-bg:#141B28;
  --btn-bg:#8EADF2; --btn-fg:#0B1019; --btn-hover:#B2C8F7;
  --foot:#05080E; --on-foot:#E2E7EF; --on-foot-muted:#97A2B4;
  --ph-bg:#3B3010; --ph-edge:#D9B44A;
  --swatch-edge:color-mix(in srgb, #E2E7EF 55%, transparent);
  color-scheme:dark;
}

/* ---------- reset ---------- */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,h4,p,figure,blockquote,ol,ul,dl,dd,pre,fieldset,legend{margin:0}
  ol,ul{padding:0;list-style:none}
  fieldset{border:0;padding:0;min-width:0}
  legend{padding:0}
  img,svg{display:block;max-width:100%}
  button,input,textarea,select{font:inherit;color:inherit}
  a{color:inherit}
  table{border-collapse:collapse}
  [hidden]{display:none!important}
}

/* ---------- base ---------- */
@layer base{
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--ink);font-family:var(--f-body);
    font-size:var(--fs-base);line-height:var(--lh-body);
    overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
  :where(h1,h2,h3,legend){text-wrap:balance;line-height:var(--lh-head)}
  p{text-wrap:pretty}
  code,kbd,pre{font-family:var(--f-mono)}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
}

/* ---------- componentes ---------- */
@layer components{
  .wrap{
    max-width:78rem;margin-inline:auto;
    padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .band{padding-block:var(--band-pad)}
  .band--alt{background:var(--band)}
  .grid-paper{
    background-color:var(--bg);
    background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size:28px 28px;
  }
  .skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--ink);color:var(--bg);padding:.6rem 1rem;
    &:focus{left:1rem}}
  .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* papéis tipográficos */
  .display{font-weight:600;letter-spacing:-.015em;line-height:var(--lh-head)}
  .h-xl{font-size:var(--fs-h1);line-height:var(--lh-tight)}
  .h-l{font-size:var(--fs-h2)}
  .label{font:600 var(--fs-sm)/1.35 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .label--accent{color:var(--accent-text)}
  .lead{font-size:var(--fs-h4);line-height:1.45;max-width:34rem;color:var(--muted)}
  .meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;font:400 var(--fs-sm)/1.4 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums}
  .more{font-weight:600;color:var(--link);text-underline-offset:.25em;text-decoration-thickness:2px}
  .muted{color:var(--muted)}
  .crumbs{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font:400 var(--fs-sm)/1.4 var(--f-body);color:var(--muted);
    & li + li::before{content:"›";margin-right:.5rem}
    & a{text-decoration:none;&:hover{text-decoration:underline}}}
  .sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 2rem;margin-bottom:2rem;
    & > div{display:grid;gap:.5rem}}

  /* cabeçalho */
  .hdr{position:relative;z-index:4;background:var(--band)}
  .hdr__in{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;padding-block:1rem}
  .logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto;
    & .enso{width:1.75rem;height:1.75rem;color:var(--mark);flex:none}}
  .logo__word{font-size:var(--fs-h4);line-height:1;font-weight:600;letter-spacing:-.01em;
    & span{color:var(--muted);font-weight:400}}
  .enso circle{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:84 16;transform:rotate(-62deg);transform-origin:center}
  .hdr__tools{display:flex;align-items:center;gap:.5rem}
  .lang{display:flex;align-items:center;font:500 var(--fs-sm)/1 var(--f-body);
    & a{text-decoration:none;padding:.6rem .4rem;color:var(--muted)}
    & a[aria-current]{color:var(--ink);font-weight:600}
    & span{color:var(--muted)}}
  .icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;
    &:hover{background:color-mix(in srgb, var(--ink) 9%, transparent)}
    & svg{width:1.25rem;height:1.25rem}}
  .menu-btn{min-height:2.75rem;padding:.6rem .9rem;border:0;border-radius:4px;cursor:pointer;
    background:color-mix(in srgb, var(--ink) 8%, transparent);font:500 var(--fs-sm)/1 var(--f-body);
    &[aria-expanded="true"]{background:var(--ink);color:var(--bg)}}

  /* menu: sem JS, aparece aberto embaixo do logo; com JS, vira painel que abre no botão */
  .hdr__menu{flex-basis:100%;display:grid;gap:.75rem;order:3}
  .js .hdr__menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);
    padding:1rem max(var(--gutter), env(safe-area-inset-right, 0px)) 1.25rem max(var(--gutter), env(safe-area-inset-left, 0px));
    box-shadow:0 18px 30px -18px rgb(0 0 0 / .35)}
  .js .hdr__menu[data-aberto]{display:grid}
  .nav{display:grid;font:500 var(--fs-base)/1.3 var(--f-body);
    & a{text-decoration:none;padding:.7rem 0;color:var(--muted);
      &:hover{color:var(--ink)}
      &[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;text-decoration-color:var(--accent)}}}
  .search{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 .75rem;border-radius:2px;background:var(--field-bg);color:var(--muted);
    box-shadow:inset 0 0 0 1px var(--field-edge);
    & svg{width:1rem;height:1rem;flex:none}
    & input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 var(--fs-base)/1.2 var(--f-body);padding:.6rem 0;
      &:focus{outline:none}
      &::placeholder{color:var(--muted)}}
    &:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}}

  /* selo de faixa */
  .belt{display:inline-flex;align-items:center;gap:.5em;font:500 var(--fs-sm)/1.3 var(--f-body);white-space:nowrap;text-decoration:none;
    --belt-edge:color-mix(in srgb, currentColor 45%, transparent);
    &::before{content:"";inline-size:1.9em;block-size:.55em;border-radius:1px;background:var(--belt);box-shadow:inset 0 0 0 1px var(--belt-edge)}}
  a.belt:hover{text-decoration:underline;text-underline-offset:.2em}
  .belt--branca{--belt:var(--belt-branca)} .belt--amarela{--belt:var(--belt-amarela)} .belt--verde{--belt:var(--belt-verde)}
  .belt--marrom{--belt:var(--belt-marrom)} .belt--preta{--belt:var(--belt-preta)}
  /* amostra de cor: a branca tem borda visível no claro; a preta, no escuro */
  .swatch{display:block;height:.75rem;background:var(--belt);border-radius:1px;box-shadow:inset 0 0 0 1px var(--swatch-edge)}
  .swatch--wide{height:.875rem;max-width:var(--measure)}

  /* blocos de código: rolam sozinhos, nunca empurram a página nem cortam linha */
  .code{background:var(--code-bg);color:var(--code-fg);border-radius:2px;min-width:0;max-width:100%;margin:0}
  .code__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .55rem .55rem 1rem;
    font:400 var(--fs-sm)/1.3 var(--f-mono);color:var(--tk-c)}
  .code pre{overflow-x:auto;padding:.25rem 1rem 1.1rem;font:400 var(--fs-sm)/1.65 var(--f-mono);tab-size:2;
    scrollbar-color:color-mix(in srgb, var(--code-fg) 35%, transparent) transparent;
    &:focus-visible{outline:2px solid var(--tk-k);outline-offset:-2px}}
  .code code{font:inherit}
  .copy{background:transparent;color:var(--code-fg);border:1px solid color-mix(in srgb, var(--code-fg) 32%, transparent);
    font:500 var(--fs-sm)/1 var(--f-body);padding:.5rem .75rem;border-radius:4px;cursor:pointer;min-height:2.25rem;
    &:hover{background:color-mix(in srgb, var(--code-fg) 12%, transparent)}
    &:focus-visible{outline-color:var(--tk-k)}
    &.is-done{color:var(--tk-f);border-color:currentColor}}
  .tabs{display:flex;background:color-mix(in srgb, var(--code-fg) 7%, transparent);overflow-x:auto}
  .tab{border:0;background:transparent;color:var(--tk-c);font:400 var(--fs-sm)/1 var(--f-mono);padding:.85rem 1rem;cursor:pointer;white-space:nowrap;
    &[aria-selected="true"]{color:var(--code-fg);background:var(--code-bg);box-shadow:inset 0 2px 0 var(--tk-d)}
    &:focus-visible{outline:2px solid var(--tk-k);outline-offset:-2px}}
  .tk-c{color:var(--tk-c);font-style:italic} .tk-s{color:var(--tk-s)} .tk-k{color:var(--tk-k);font-weight:500}
  .tk-f{color:var(--tk-f)} .tk-v{color:var(--tk-v)} .tk-n{color:var(--tk-n)} .tk-d{color:var(--tk-d)} .tk-t{color:var(--tk-t)}

  /* texto corrido */
  .prose{min-width:0;counter-reset:h2;
    & > p, & > ul, & > h2, & > h3, & > .tip{max-width:var(--measure)}
    & > * + *{margin-top:1.1em}
    & > :first-child{margin-top:0}
    & > h2{margin-top:2.4em}
    & > h3{margin-top:1.9em}
    & > h2 + *, & > h3 + *{margin-top:.7em}
    & > .code, & > .tbl-scroll, & > .tip{margin-top:1.6em}
    & > .code + *, & > .tbl-scroll + *, & > .tip + *{margin-top:1.6em}
    & h2{font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.015em;counter-increment:h2;padding-top:2rem;
      background:linear-gradient(var(--ink), var(--ink)) top left / 2.5rem 4px no-repeat;
      &::before{content:counter(h2) ". ";color:var(--muted)}}
    & h3{font-weight:600;font-size:var(--fs-h3);line-height:1.2}
    & ul{padding-left:1.25em;list-style:disc;display:grid;gap:.6em}
    & li::marker{color:var(--accent)}
    & a{color:var(--link);text-underline-offset:.2em}
    & :not(pre) > code{font-size:.875em;background:var(--code-inline);padding:.12em .35em;border-radius:3px;overflow-wrap:anywhere}
  }
  .tbl-scroll{overflow-x:auto;max-width:100%}
  .params{width:100%;min-width:30rem;font-size:var(--fs-sm);line-height:1.5;
    & th{text-align:left;font-weight:600;color:var(--muted);padding:.75rem .9rem;background:var(--band)}
    & td{padding:.8rem .9rem;vertical-align:top}
    & tbody tr:nth-child(odd){background:var(--zebra)}
    & td:first-child{font-family:var(--f-mono);white-space:nowrap}}
  .tip{background:var(--band);padding:1.25rem 1.4rem;
    & > * + *{margin-top:.5em}
    & .tip__label{font:600 var(--fs-sm)/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}}

  /* tabela zebrada; abaixo de 720px cada linha vira um bloco */
  .tbl{width:100%;line-height:1.45;
    & th{text-align:left;font:600 var(--fs-sm)/1.3 var(--f-body);color:var(--muted);padding:.8rem 1rem;background:var(--band)}
    & td{padding:1rem;vertical-align:baseline}
    & tbody tr:nth-child(even){background:var(--zebra)}
    & .c-date, & .c-min, & .c-n{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
    & .c-type{font-size:var(--fs-sm);white-space:nowrap}
    & .c-prod{font-size:var(--fs-sm)}
    & .c-title a{font-weight:600;text-decoration:none;&:hover{color:var(--link);text-decoration:underline}}}
  .band--alt .tbl th{background:var(--bg)}

  /* Principais Erros: nível (crítico, médio, comum) e resumo na lista */
  .nivel{--nivel:var(--muted);display:inline-flex;align-items:center;gap:.5em;color:var(--nivel);
    &::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--nivel);flex:none}}
  .nivel--critico{--nivel:var(--accent-text)} .nivel--medio{--nivel:var(--ph-edge)} .nivel--comum{--nivel:var(--muted)}
  p.meta .nivel{font-weight:600}
  .tbl--erros .c-title .c-resumo{display:block;margin-top:.3rem;font-size:var(--fs-sm);color:var(--muted);max-width:var(--measure)}
  .erros-secao h2 .nivel{color:var(--ink);&::before{width:.45em;height:.45em}}

  /* formulários */
  .field{display:grid;gap:.4rem;min-width:0;
    & label, & .field__label{font-weight:600;line-height:1.4}
    & .hint{color:var(--muted);font-size:var(--fs-sm);line-height:1.45}}
  .input{width:100%;min-height:3rem;padding:.75rem .9rem;background:var(--field-bg);color:var(--ink);
    border:2px solid var(--field-edge);border-radius:2px;font-size:var(--fs-base);line-height:1.4;
    &:focus{border-color:var(--link);outline:none}
    &:focus-visible{outline:3px solid var(--focus);outline-offset:2px}}
  textarea.input{min-height:7.5rem;resize:vertical}
  .choices{display:grid;gap:.5rem}
  .choices--grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr))}
  .choice{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;border-radius:2px;background:var(--field-bg);cursor:pointer;border:2px solid transparent;line-height:1.45;
    & input{margin:.25rem 0 0;accent-color:var(--link);width:1.1rem;height:1.1rem;flex:none}
    & span{min-width:0}
    & b{display:block;font-weight:600}
    & small{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
    &:has(input:checked){border-color:var(--link);background:var(--choice-on)}
    &:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.8rem 1.35rem;border:0;border-radius:2px;
    background:var(--btn-bg);color:var(--btn-fg);font:600 var(--fs-base)/1.2 var(--f-body);text-decoration:none;cursor:pointer;
    &:hover{background:var(--btn-hover)}
    &:disabled{cursor:not-allowed;opacity:.55}}
  .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--field-edge);
    &:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}}
  .actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
  .note{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}

  /* dúvidas */
  .qa-list{display:grid}
  .qa{padding:1.35rem 1rem;
    &:nth-child(odd){background:var(--zebra)}
    & summary{cursor:pointer;list-style:none;display:grid;gap:.5rem}
    & summary::-webkit-details-marker{display:none}
    & h3{font-weight:600;font-size:var(--fs-h4);line-height:1.3;max-width:var(--measure)}
    & summary h3::before{content:"P. ";color:var(--accent-text)}
    & summary:hover h3{color:var(--link);text-decoration:underline}
    & h3 a{text-decoration:none;&:hover{color:var(--link);text-decoration:underline}}
    & .qa__body{padding-top:1rem;display:grid;gap:1rem;max-width:var(--measure)}
    & .qa__body code:not(pre code){font-size:.875em;background:var(--code-inline);padding:.12em .35em;border-radius:3px}
    & .qa__help{color:var(--muted);font-size:var(--fs-sm);& a{color:var(--link)}}}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem}
  .chip{border:0;cursor:pointer;padding:.55rem .9rem;min-height:2.75rem;border-radius:999px;background:var(--chip-bg);color:var(--ink);font:500 var(--fs-sm)/1 var(--f-body);
    &[aria-pressed="true"]{background:var(--ink);color:var(--bg)}}

  /* diagnóstico */
  .steps{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;font:500 var(--fs-sm)/1.4 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;
    & li[aria-current="step"]{color:var(--ink);font-weight:600}
    & li.is-done{color:var(--ink)}}
  .diag{display:grid;gap:2rem;align-items:start}
  .diag__form{display:grid;gap:1.75rem;min-width:0;
    & > fieldset{display:grid;gap:1.1rem}
    & legend{font-weight:600;font-size:var(--fs-h3);line-height:1.2;margin-bottom:1rem}
    & fieldset fieldset legend{font-size:var(--fs-base);margin-bottom:.4rem}}
  .diag__grupo{display:grid;gap:1.1rem}
  .diag__ferramenta{font:600 var(--fs-sm)/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .js .diag__ferramenta{display:none}
  .diag__side{background:var(--band);padding:1.25rem 1.25rem 1.5rem;display:grid;gap:1rem}
  .summary{display:grid;gap:.9rem;
    & dt{font:600 var(--fs-sm)/1.3 var(--f-body);color:var(--muted)}
    & dd{margin-top:.2rem}}

  /* rodapé */
  .foot{background:var(--foot);color:var(--on-foot);
    & a{color:var(--on-foot);text-decoration:none;&:hover{text-decoration:underline}}
    & :focus-visible{outline-color:var(--on-foot)}
    & .logo__word span{color:var(--on-foot-muted)}
    & .enso{color:var(--on-foot)}}
  .foot__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr))}
  .foot__brand{display:grid;gap:.75rem;max-width:26rem;align-content:start;
    & p{color:var(--on-foot-muted)}}
  .foot h2{font:600 var(--fs-sm)/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--on-foot-muted);margin-bottom:.9rem}
  .foot ul{display:grid;gap:.55rem}
  .foot__legal{margin-top:3.5rem;padding-top:1.5rem;color:var(--on-foot-muted);font-size:var(--fs-sm);line-height:1.5;display:grid;gap:.35rem;
    background:linear-gradient(var(--on-foot-muted), var(--on-foot-muted)) top left / 3rem 2px no-repeat}
  .foot--min{padding-block:2rem;& .foot__legal{margin-top:0}}

  /* ---------- páginas ---------- */

  /* home: hero */
  .hero .wrap{display:grid;gap:2.5rem;align-items:center}
  .hero__text{display:grid;gap:1.4rem;min-width:0}
  .stats{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font:400 var(--fs-sm)/1.4 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;
    & b{color:var(--ink);font-weight:600}}
  .hero .code{box-shadow:0 30px 60px -35px rgb(0 0 0 / .55)}

  /* home: faixas */
  .beltstrip{--band-pad:clamp(1.75rem, 4vw, 2.5rem)}
  .beltstrip__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.25rem;margin-bottom:1.1rem}
  .beltstrip__title{font:600 var(--fs-h4)/1.2 var(--f-body)}
  .beltstrip__text{color:var(--muted);flex:1 1 18rem;min-width:0}
  .beltstrip__list{display:grid;gap:.15rem}
  .beltstrip__list a{display:grid;grid-template-columns:2.5rem auto minmax(0, 1fr);align-items:center;gap:.25rem .75rem;padding-block:.55rem;text-decoration:none;
    &:hover .beltstrip__name{color:var(--link);text-decoration:underline}}
  .beltstrip__name{font-weight:600}
  .beltstrip__who{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}

  /* home: índice por plataforma */
  .rows{display:grid}
  .rows li:nth-child(odd){background:var(--zebra)}
  .rows__item{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.3rem 1.25rem;padding:1.1rem 1rem;align-items:baseline}
  .rows__code{font-weight:600;color:var(--link);letter-spacing:.02em}
  .rows__name{font-weight:600;font-size:var(--fs-h4);line-height:1.25}
  .rows__desc{grid-column:2;color:var(--muted)}
  .rows__count{grid-column:2;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}

  /* home: dúvidas + autor */
  .ask{display:grid;gap:2.5rem}
  .author{display:grid;gap:1.25rem}
  .author__note{max-width:var(--measure);display:grid;gap:.9em}
  .askform{display:grid;gap:1.1rem}

  /* documento (artigo, faixas, sobre) */
  .docs{display:grid;gap:2rem;padding-block:2rem 4rem}
  .doc{min-width:0;display:grid;gap:1.25rem;align-content:start}
  .side{display:none;font:400 var(--fs-sm)/1.4 var(--f-body);
    & h2{font:600 var(--fs-sm)/1.3 var(--f-body);color:var(--ink);margin:1.5rem 0 .5rem;padding-inline:.75rem}
    & h2:first-child{margin-top:0}
    & ul{display:grid;gap:.1rem}
    & a{display:block;padding:.45rem .75rem;text-decoration:none;color:var(--muted);border-radius:2px;
      &:hover{color:var(--ink);background:var(--zebra)}
      &[aria-current="page"]{color:var(--ink);background:var(--bg);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}}}
  .docnav{background:var(--band);
    & summary{cursor:pointer;padding:.9rem 1rem;font:500 var(--fs-sm)/1.3 var(--f-body)}
    & .side{display:block;padding:0 1rem 1rem}}
  .toc{display:grid;gap:.6rem;align-content:start;font:400 var(--fs-sm)/1.45 var(--f-body);
    & h2{font:600 var(--fs-sm)/1.3 var(--f-body);color:var(--ink)}
    & ol{display:grid;gap:.45rem}
    & a{text-decoration:none;color:var(--muted);&:hover{color:var(--ink)}}}
  .toc--inline{background:var(--band);padding:1rem 1.1rem}
  .toc--side{display:none}
  .pager{display:grid;gap:2px;margin-top:3rem;
    & a{display:grid;gap:.25rem;padding:1.1rem 1.25rem;background:var(--band);text-decoration:none;
      & span{font-size:var(--fs-sm);color:var(--muted)}
      & b{font-weight:600;color:var(--link)}
      &:hover b{text-decoration:underline}}
    & a + a{text-align:right}}
  .aside-help{display:grid;gap:.75rem;margin-top:3rem;padding:1.5rem 1.4rem;background:var(--band);
    & p{max-width:var(--measure)}
    & a{color:var(--link)}}
  .page-head .wrap{display:grid;gap:1.1rem}
  .page-head h1{max-width:20ch}

  /* faixas */
  .howto{background:var(--band);padding:1.25rem 1.4rem;display:grid;gap:.6rem;max-width:var(--measure);
    & ul{padding-left:1.25em;list-style:disc;display:grid;gap:.4em}
    & li::marker{color:var(--accent)}}
  .howto__title{font:600 var(--fs-h4)/1.2 var(--f-body)}
  .prose > .beltsec{margin-top:3.5rem}
  .prose > .beltsec:first-child{margin-top:1rem}
  .beltsec{display:grid;gap:.9rem;scroll-margin-top:1rem;
    & > p, & > ul{max-width:var(--measure)}
    & h2{background:none;padding-top:0}
    & h3{font-size:var(--fs-h4);line-height:1.25;margin-top:.9rem}
    & .tbl{margin-top:.25rem}}
  .beltsec__who b{font-weight:600}

  /* sobre */
  .intro{display:grid;gap:1.25rem;align-items:start}
  .photo{width:8.5rem;aspect-ratio:4 / 5;max-width:100%;display:grid;place-items:center;border:2px dashed var(--field-edge);background:var(--band);
    color:var(--muted);font-size:var(--fs-sm)}
  .intro__text{display:grid;gap:.75rem;min-width:0;max-width:var(--measure)}
  .facts{display:grid;max-width:var(--measure);
    & > div{display:grid;gap:.15rem;padding:.8rem 1rem}
    & > div:nth-child(odd){background:var(--zebra)}
    & dt{font-weight:600}
    & dd{margin:0;min-width:0}}
  /* texto a preencher pelo autor: visível de propósito */
  .ph{background:var(--ph-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ph-edge);padding:.05em .35em;border-radius:2px;font-weight:500;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .tbl.certs td{white-space:normal}
  .certs .c-title{font-weight:400}

  /* páginas dinâmicas */
  .lang__atual{padding:.6rem .4rem;color:var(--ink);font-weight:600}
  a.rows__item{text-decoration:none;
    &:hover .rows__name{color:var(--link);text-decoration:underline}}
  .toc__sub{padding-left:1rem}
  .relacionados{display:grid;gap:1.25rem;margin-top:3rem}
  .resposta{display:grid;gap:.75rem}
  .lista{display:grid;grid-template-columns:minmax(0, 1fr);gap:2rem}
  a.chip{display:inline-flex;align-items:center;text-decoration:none;
    &[aria-current="page"]{background:var(--ink);color:var(--bg)}}
  .vazio{padding:2rem 1.25rem;background:var(--band);color:var(--muted);max-width:var(--measure)}
  .paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;font-weight:500;
    & a{color:var(--link);min-height:2.75rem;display:inline-flex;align-items:center}
    & span{color:var(--muted);font-size:var(--fs-sm)}}
  .photo--img{object-fit:cover;height:auto;border-style:solid;border-width:0}
  .intro__bio{display:grid;gap:.75rem}

  /* formulários públicos */
  .hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
  .field__erro{color:var(--accent-text);font-size:var(--fs-sm);font-weight:600;line-height:1.45}
  .input[aria-invalid="true"]{border-color:var(--accent-text)}
  .form-erros{background:var(--field-bg);box-shadow:inset 4px 0 0 var(--accent-text);padding:1rem 1.25rem;display:grid;gap:.5rem;
    & ul{padding-left:1.1em;list-style:disc;display:grid;gap:.3rem}
    & a{color:var(--accent-text);font-weight:600}
    &:focus-visible{outline:3px solid var(--focus);outline-offset:2px}}
  .form-erros__titulo{font-weight:600}
  .form-alerta{background:var(--ph-bg);color:var(--ink);padding:.9rem 1.1rem;box-shadow:inset 0 0 0 1px var(--ph-edge)}
  .diag__grupos{display:grid;gap:1.1rem;&:focus-visible{outline:3px solid var(--focus);outline-offset:4px}}
  .diag__form > fieldset:focus-visible, #d-seguir:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
  .consent .choice{background:transparent;padding-inline:0}
  .consent a{color:var(--link)}
  .pergunta__grid{display:grid;gap:1.5rem}
  .pergunta .askform{max-width:44rem}
  .pergunta__linha{display:grid;gap:1.1rem}
  .obrigado__links{display:grid;gap:.5rem}

  /* em breve e erro */
  .embreve{min-height:60vh;display:grid;align-items:center}
  .embreve .wrap{display:grid;gap:1.25rem}
  .embreve h1{max-width:22ch}
  .status-pill{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;font:500 var(--fs-sm)/1.3 var(--f-body);color:var(--ink);
    background:var(--band);padding:.4rem .8rem;border-radius:999px;
    &::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}}
}

/* ---------- breakpoints (na mesma camada, depois das regras base) ---------- */
@layer components{
@media (max-width: 479.98px){
  /* no celular estreito o logo vira só "sfdojo" (o nome completo continua no aria-label) */
  .hdr .logo__word span{display:none}
  .hdr__tools{gap:.25rem}
}
@media (min-width: 600px){
  .rows__item{grid-template-columns:4rem minmax(0,1fr) auto}
  .rows__count{grid-column:3;grid-row:1}
  .pager{grid-template-columns:1fr 1fr}
  .intro{grid-template-columns:8.5rem minmax(0, 1fr)}
  .intro--sem-foto{grid-template-columns:minmax(0, 1fr)}
  .pergunta__linha{grid-template-columns:1fr 1fr}
  .facts > div{grid-template-columns:12rem minmax(0, 1fr);column-gap:1.5rem}
}
@media (max-width: 719.98px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl, .tbl tbody{display:block}
  .tbl tr{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:1rem}
  .tbl td{padding:0}
  .tbl .c-title{flex-basis:100%;order:-1}
}
@media (min-width: 1000px){
  .hero .wrap{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);column-gap:3.5rem}
  .ask{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);column-gap:3.5rem}
  .docs{grid-template-columns:15rem minmax(0, 1fr) 13rem;column-gap:3.5rem;padding-block:0 5rem}
  .docs > .side{display:block;background:var(--band);padding:2rem 1rem;
    margin-left:calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));padding-left:max(var(--gutter), env(safe-area-inset-left, 0px))}
  .docs > .doc{padding-top:2.5rem}
  .docs.docs--toc{grid-template-columns:minmax(0, 1fr) 14rem}
  .docs.docs--solo{grid-template-columns:minmax(0, 1fr)}
  .pergunta__grid{grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);column-gap:3.5rem}
  .docnav, .toc--inline{display:none}
  .toc--side{display:grid;position:sticky;top:1.5rem;padding-top:2.5rem}
  .diag{grid-template-columns:minmax(0,1fr) 20rem;column-gap:3rem}
  .diag__side{position:sticky;top:1.5rem}
  .beltstrip__list{grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:1.5rem}
  .beltstrip__list a{grid-template-columns:minmax(0, 1fr);gap:.4rem;align-items:start}
}
@media (min-width: 1200px){
  .hdr__menu, .js .hdr__menu, .js .hdr__menu[data-aberto]{display:flex;position:static;flex-basis:auto;order:0;align-items:center;gap:1.5rem;padding:0;background:none;box-shadow:none}
  .nav{display:flex;gap:1.2rem;
    & a{padding:.35rem 0}}
  .hdr__in{column-gap:1rem}
  .search{width:9.5rem}
  .menu-btn{display:none}
}
}

@layer utilities{
  .mt-l{margin-top:clamp(2rem, 5vw, 3rem)}
  .stack-s{display:grid;gap:.75rem}
}

/* ── Banner de cookies (LGPD) e link "Preferências de cookies" ───────────────── */
@layer components{
  .cookies{position:fixed;inset-inline:0;bottom:0;z-index:50;background:var(--band);color:var(--ink);
    border-top:3px solid var(--ink);box-shadow:0 -8px 24px rgb(0 0 0 / .12)}
  .cookies[hidden]{display:none}
  .cookies__in{display:grid;gap:var(--s-3);padding-block:var(--s-4);
    @media (min-width: 720px){grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-5)}}
  .cookies__texto{min-width:0;
    & h2{font-size:var(--fs-base);line-height:var(--lh-head);margin:0 0 .25rem}
    & p{font-size:var(--fs-sm);line-height:1.55;margin:0;max-width:72ch;overflow-wrap:anywhere}
    & a{color:var(--link)}}
  /* Os dois botões iguais: recusar não pode ser mais difícil que aceitar. */
  .cookies__acoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);
    @media (min-width: 720px){display:flex}}
  .cookies__acoes .btn{min-width:8rem}
  .linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;
    &:focus-visible{outline:2px solid var(--focus);outline-offset:2px}}
  .linklike[hidden]{display:none}
}

/* ── Menu: submenu "Plataformas" e chamada "Travou em algo?" ─────────────────── */
@layer components{
  .nav__drop{position:relative;
    & > summary{list-style:none;cursor:pointer;padding:.7rem 0;color:var(--muted);display:flex;align-items:center;gap:.4rem;
      &::-webkit-details-marker{display:none}
      &::after{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
        transform:translateY(-.15rem) rotate(45deg);transition:transform .15s}
      &:hover{color:var(--ink)}
      &:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
      &.is-atual{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;text-decoration-color:var(--accent)}}
    &[open] > summary::after{transform:translateY(.1rem) rotate(-135deg)}}
  .nav__sub{list-style:none;margin:0;padding:0 0 .5rem .75rem;display:grid;
    & a{display:grid;grid-template-columns:3.25rem minmax(0,1fr);align-items:baseline;gap:.75rem;padding:.55rem 0;
      text-decoration:none;color:var(--muted);
      &:hover{color:var(--ink)}
      &[aria-current="page"]{color:var(--ink)}
      & b{font-weight:600;color:var(--ink)}
      & span{font-size:var(--fs-sm);min-width:0;overflow-wrap:anywhere}}}
  .nav .nav__cta{color:var(--ink);font-weight:600}
}
@media (min-width: 1200px){
  .nav__drop > summary{padding:.35rem 0}
  /* No desktop o submenu flutua sob o item, sem empurrar a barra. */
  .nav__sub{position:absolute;top:calc(100% + .6rem);left:-1rem;z-index:40;min-width:19rem;padding:.5rem 1rem;
    background:var(--bg);border-top:3px solid var(--ink);box-shadow:0 18px 30px -18px rgb(0 0 0 / .35)}
  .nav .nav__cta{padding:.35rem .8rem;box-shadow:inset 0 0 0 2px var(--ink);border-radius:2px;
    &:hover{background:var(--ink);color:var(--bg)}
    &[aria-current="page"]{background:var(--ink);color:var(--bg);text-decoration:none}}
}