/*
 * Página /documentacao: documento longo com índice lateral fixo, figuras em SVG próprio, modo
 * apresentação (uma seção por vez) e impressão limpa. Só esta página carrega este arquivo. Sempre
 * com os tokens do design system; as figuras herdam as cores do tema por classes (nada de fill solto).
 */
@layer paginas {
  /* As classes com display vencem o [hidden] da base: aqui o atributo volta a valer. */
  .pagina-doc [hidden] {
    display: none;
  }

  .pagina-doc [data-menu] {
    display: none;
  }

  .doc-corpo {
    display: grid;
    flex: 1;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-8);
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: var(--space-6) var(--gutter) var(--space-8);
  }

  /* Índice fixo: acompanha a rolagem e rola por dentro se a tela for baixa. */
  .doc-indice {
    position: sticky;
    top: calc(var(--target-min) + var(--space-5));
    align-self: start;
    max-height: calc(100vh - var(--target-min) - var(--space-8));
    overflow-y: auto;
    font-size: var(--text-sm);
  }

  .doc-indice__titulo {
    margin-bottom: var(--space-2);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .doc-indice ol {
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-left: 1px solid var(--color-border);
    list-style: none;
  }

  .doc-indice a {
    display: block;
    padding: var(--space-1) var(--space-3);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--color-fg-muted);
    text-decoration: none;
  }

  .doc-indice a:hover {
    color: var(--color-fg);
  }

  .doc-indice a[aria-current] {
    border-left-color: var(--color-accent);
    color: var(--color-fg);
    font-weight: var(--font-weight-semibold);
  }

  .doc-topo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 62ch;
    padding-bottom: var(--space-6);
  }

  .doc-topo h1 {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .doc-topo__texto {
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .doc-meta {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .doc-conteudo {
    min-width: 0;
  }

  .doc-conteudo:focus {
    outline: none;
  }

  /* Seções: respiro generoso e uma régua no topo; o texto corrido fica numa medida legível. ---- */
  .doc-secao {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
    scroll-margin-top: calc(var(--target-min) + var(--space-4));
  }

  .doc-secao > * {
    max-width: 68ch;
  }

  .doc-secao > .doc-largo {
    max-width: none;
  }

  .doc-secao h2 {
    font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .doc-secao h2:focus {
    outline: none;
  }

  .doc-secao h3 {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
  }

  .doc-secao p,
  .doc-secao li {
    line-height: 1.65;
  }

  .doc-secao ul,
  .doc-secao ol:not([class]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
  }

  .doc-num {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  code {
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-2);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  /* Roteiro de fala: o "como explicar em 1 minuto" da seção. ---------------------------------- */
  .doc-fala {
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-accent);
    background-color: var(--color-bg-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  .doc-fala h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Tabelas e grades de fatos. ---------------------------------------------------------------- */
  .doc-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .doc-tabela caption {
    padding-bottom: var(--space-2);
    color: var(--color-fg-muted);
    text-align: left;
  }

  .doc-tabela th,
  .doc-tabela td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .doc-tabela thead th {
    border-bottom: 2px solid var(--color-fg);
    font-weight: var(--font-weight-semibold);
  }

  .doc-rolagem {
    overflow-x: auto;
  }

  .doc-estado {
    display: inline-block;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  /* Figuras SVG: largura própria, rolagem horizontal no celular em vez de texto ilegível. ------ */
  .doc-figura {
    margin: var(--space-2) 0;
  }

  .doc-figura__quadro {
    overflow-x: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .doc-figura svg {
    width: 100%;
    min-width: 40rem;
    height: auto;
  }

  .doc-figura figcaption {
    margin-top: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .f-caixa {
    fill: var(--color-surface);
    stroke: var(--color-border-control);
    stroke-width: 1.5;
  }

  .f-caixa--suave {
    fill: var(--color-bg-muted);
  }

  .f-caixa--acento {
    fill: var(--color-accent);
    stroke: var(--color-accent);
  }

  .f-grupo {
    fill: none;
    stroke: var(--color-border-control);
    stroke-dasharray: 5 4;
    stroke-width: 1.5;
  }

  .f-linha {
    fill: none;
    stroke: var(--color-fg-muted);
    stroke-width: 1.5;
  }

  .f-linha--tracejada {
    stroke-dasharray: 5 4;
  }

  .f-seta {
    fill: var(--color-fg-muted);
  }

  .f-texto {
    fill: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 14px;
  }

  .f-texto--forte {
    font-weight: var(--font-weight-semibold);
  }

  .f-texto--suave {
    fill: var(--color-fg-muted);
    font-size: 12px;
  }

  .f-texto--mono {
    font-family: var(--font-mono);
    font-size: 11.5px;
  }

  .f-texto--acento {
    fill: var(--color-on-accent);
  }

  .f-texto--titulo {
    fill: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  /* Modo apresentação: uma seção por vez, tela toda, texto maior. ------------------------------ */
  .doc-barra {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .doc-barra__estado {
    flex: 1;
    min-width: 12rem;
    font-size: var(--text-sm);
  }

  .doc-apresentando .cabecalho,
  .doc-apresentando .rodape,
  .doc-apresentando .doc-indice,
  .doc-apresentando .doc-topo,
  .doc-apresentando .pular-conteudo {
    display: none;
  }

  .doc-apresentando .doc-corpo {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 6rem;
  }

  .doc-apresentando .doc-secao {
    display: none;
    border-top: 0;
    padding-block: var(--space-5);
    font-size: var(--text-lg);
  }

  .doc-apresentando .doc-secao[data-ativa] {
    display: flex;
  }

  /* Troca de seção na apresentação: informa que o "slide" mudou (efeito funcional). Movimento
     ligado: sobe um pouco e aparece; desligado: só um fundido curto, sem deslocamento. O índice
     lateral só troca de cor (sem deslocamento nos dois estados). Movimento por html[data-movimento]
     (research/ux-ui/movimento-funcional-e-decorativo.md). */
  html.doc-apresentando:where([data-movimento="ligado"]) .doc-secao[data-ativa] {
    animation: doc-entra 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  html.doc-apresentando:where([data-movimento="desligado"]) .doc-secao[data-ativa] {
    animation: doc-fundo 150ms ease-out both;
  }

  :where(html[data-movimento="ligado"]) .doc-indice a {
    transition:
      color 240ms ease,
      border-color 240ms ease;
  }

  :where(html[data-movimento="desligado"]) .doc-indice a {
    transition:
      color 120ms ease,
      border-color 120ms ease;
  }

  @keyframes doc-entra {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes doc-fundo {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .doc-apresentando .doc-secao > * {
    max-width: 80ch;
  }

  .doc-apresentando .doc-secao > .doc-largo {
    max-width: none;
  }

  .doc-apresentando .doc-secao h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  }

  /* O roteiro de fala é de quem apresenta: fica escondido até apertar N. */
  .doc-apresentando .doc-fala {
    display: none;
  }

  .doc-apresentando.doc-com-roteiro .doc-fala {
    display: block;
  }

  @media (width < 60rem) {
    .doc-corpo {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }

    .doc-indice {
      position: static;
      max-height: none;
    }

    .doc-indice ol {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-1);
      border-left: 0;
    }

    .doc-indice a {
      margin: 0;
      padding: var(--space-1) var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
    }

    .doc-indice a[aria-current] {
      border-color: var(--color-accent);
    }
  }

  @media print {
    .cabecalho,
    .rodape,
    .doc-indice,
    .doc-barra,
    .pular-conteudo,
    [data-apresentar] {
      display: none;
    }

    .doc-corpo {
      display: block;
      max-width: none;
      padding: 0;
    }

    .doc-secao {
      padding-block: var(--space-5);
      break-inside: avoid-page;
    }

    .doc-figura,
    .doc-fala,
    .doc-tabela tr {
      break-inside: avoid;
    }

    .doc-figura__quadro {
      overflow: visible;
    }

    .doc-figura svg {
      min-width: 0;
    }

    a {
      color: inherit;
    }
  }
}