/* Folha do guia de arquivamento do /voz.
 *
 * Mora fora do HTML porque o bloco /voz/ do Nginx manda
 * `style-src 'self'`: um <style> embutido na pagina seria bloqueado pela
 * CSP e o guia — que e visual — chegaria sem estilo nenhum.
 */

  :root {
    color-scheme: light dark;
    --bg: #ffffff; --fg: #15151a; --mut: #6b6b74; --linha: #e3e3e8;
    --acc: #2563eb; --bad: #b3261e; --painel: #f7f7f9; --bolha-eu: #2563eb;
    --realce: #f59e0b;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #121213; --fg: #e9e9ea; --mut: #9a9aa2; --linha: #2c2c30;
      --acc: #5b8def; --bad: #ff6b6b; --painel: #1e1e22; --bolha-eu: #2f6fe4;
      --realce: #fbbf24;
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0 auto; padding: 24px 16px 56px; max-width: 980px;
    background: var(--bg); color: var(--fg);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  header { border-bottom: 1px solid var(--linha); padding-bottom: 18px; margin-bottom: 8px; }
  h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 8px; }
  h2 { font-size: 1.1rem; margin: 0 0 6px; }
  p { margin: 0 0 12px; }
  .sub { color: var(--mut); margin: 0; }

  .aviso {
    border: 1px solid var(--acc); border-left-width: 5px; border-radius: 12px;
    padding: 14px 16px; margin: 20px 0 28px; background: var(--painel);
  }
  .aviso h2 { color: var(--acc); }
  .aviso p:last-child { margin-bottom: 0; }

  ol.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
  li.passo {
    counter-increment: passo; display: grid; gap: 14px 24px; align-items: start;
    grid-template-columns: 1fr; padding: 22px 0; border-top: 1px solid var(--linha);
  }
  @media (min-width: 720px) {
    li.passo { grid-template-columns: 300px 1fr; }
    li.passo .texto { padding-top: 6px; }
  }
  li.passo h2::before {
    content: counter(passo); display: inline-grid; place-items: center;
    width: 1.7em; height: 1.7em; margin-right: 10px; border-radius: 50%;
    background: var(--acc); color: #fff; font-size: .8em; font-weight: 700;
  }
  figure { margin: 0; }
  figure svg { width: 100%; max-width: 300px; height: auto; display: block; }
  figcaption { color: var(--mut); font-size: .85rem; margin-top: 8px; max-width: 300px; }

  /* ---- desenho das telas ---- */
  .moldura { fill: var(--bg); stroke: var(--linha); stroke-width: 2; }
  .barra { fill: var(--painel); }
  .divisa { stroke: var(--linha); stroke-width: 1.5; }
  .rotulo { fill: var(--fg); font: 600 13px -apple-system, "Segoe UI", Roboto, sans-serif; }
  .miudo { fill: var(--mut); font: 11px -apple-system, "Segoe UI", Roboto, sans-serif; }
  .acao-txt { fill: var(--acc); font: 600 12px -apple-system, "Segoe UI", Roboto, sans-serif; }
  .perigo-txt { fill: var(--bad); font: 600 13px -apple-system, "Segoe UI", Roboto, sans-serif; }
  .caixa { fill: none; stroke: var(--linha); stroke-width: 1.5; }
  .pilula { fill: var(--painel); }
  .bolha-ele { fill: var(--painel); }
  .bolha-eu { fill: var(--bolha-eu); }
  .icone { fill: none; stroke: var(--fg); stroke-width: 1.7; }
  .icone-acc { fill: none; stroke: var(--acc); stroke-width: 1.7; }
  .cheio { fill: var(--fg); stroke: none; }
  .realce-anel { fill: none; stroke: var(--realce); stroke-width: 3; stroke-dasharray: 5 4; }
  .realce-txt { fill: var(--realce); font: 700 12px -apple-system, "Segoe UI", Roboto, sans-serif; }
  .veu { fill: #000; opacity: .45; }

  footer { border-top: 1px solid var(--linha); margin-top: 28px; padding-top: 18px; color: var(--mut); }
  code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }