/* ============================================================
   GPTAll — Guias de ferramenta ("A Bancada de Sinal")
   Carrega depois de tokens.css, base.css e app.css (reaproveita
   .gp-topbar/.gp-footer de app.css — não redeclare header/footer
   aqui). Este arquivo estiliza SÓ as classes fixas que o gerador
   token/tools/tutorials/build.py emite (setup-layout, setup-sidebar,
   setup-content, cursor-note, cursor-table, cursor-yes/no/warn,
   setup-list, setup-link) — os nomes de classe não são escolha
   nossa, vêm do gerador; só os valores por trás deles são da marca.
   Usado por cursor.html (fonte à mão do gerador), pelas páginas
   geradas (aider.html, cline.html, ...), pelo hub (ferramentas.html)
   e por setup.html/precos.html (escritas à mão no mesmo shell).
   ============================================================ */

@layer layout, components, utilities;

/* -------------- Layout de duas colunas -------------------------- */
@layer layout {
  .setup-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: var(--stage-max);
    margin: 0 auto;
    padding: clamp(var(--space-lg), 6vw, var(--space-xl)) clamp(1.25rem, 4vw, 3rem) var(--space-2xl);
  }
  @media (min-width: 900px) {
    .setup-layout { grid-template-columns: 240px 1fr; align-items: start; }
  }
}

/* -------------- Sumário lateral ---------------------------------- */
@layer components {
  .setup-sidebar {
    font-family: var(--font-mono);
  }
  @media (min-width: 900px) {
    .setup-sidebar {
      position: sticky;
      top: calc(var(--topbar-h) + var(--space-md));
      max-height: calc(100vh - var(--topbar-h) - var(--space-lg));
      overflow-y: auto;
    }
  }
  .setup-sidebar ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .setup-sidebar a {
    display: block;
    padding: var(--space-half) var(--space-xs);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    border-left: 2px solid transparent;
    transition: color var(--duration-fast) var(--ease-sweep), border-color var(--duration-fast) var(--ease-sweep);
  }
  .setup-sidebar a:hover,
  .setup-sidebar a:focus-visible { color: var(--color-paper); }
  .setup-sidebar a.is-current {
    color: var(--color-signal);
    border-left-color: var(--color-signal);
  }
}

/* -------------- Conteúdo: tipografia de leitura longa -------------- */
@layer components {
  .setup-content section { scroll-margin-top: calc(var(--topbar-h) + var(--space-sm)); margin-bottom: var(--space-xl); }
  .setup-content section:last-child { margin-bottom: 0; }

  .setup-content h1 {
    font-family: var(--font-display);
    font-size: var(--text-headline);
    font-weight: 700;
    line-height: var(--leading-headline);
    color: var(--color-paper);
    margin-bottom: var(--space-sm);
  }
  .setup-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-paper);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .setup-content p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-paper-dim);
    max-width: 75ch;
    margin-bottom: var(--space-sm);
  }
  .setup-content p strong,
  .setup-content li strong { color: var(--color-paper); }
  .setup-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-signal-deep);
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
  }

  .setup-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--space-sm) 0; padding: 0; }
  .setup-list li {
    font-family: var(--font-body);
    color: var(--color-paper-dim);
    padding-left: var(--space-sm);
    position: relative;
  }
  .setup-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-graticule);
  }
  ol.setup-list { counter-reset: setup-step; }
  ol.setup-list li { counter-increment: setup-step; }
  ol.setup-list li::before { content: counter(setup-step) '.'; color: var(--color-signal-deep); font-family: var(--font-mono); }

  .setup-link {
    color: var(--color-signal-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .setup-link:hover,
  .setup-link:focus-visible { color: var(--color-signal); }
}

/* -------------- Nota destacada (cursor-note) ---------------------- */
@layer components {
  /* Destaque por degrau de luminosidade e marca de canto, nunca por faixa
     lateral colorida: a direção resolve ênfase com o painel subindo um degrau
     e o quadrado amarelo-sinal, o mesmo sinal do eyebrow do herói. */
  .cursor-note {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-md) 0;
  }
  .cursor-note::before {
    content: '';
    position: absolute;
    top: var(--space-sm);
    left: 0;
    width: 3px;
    height: 1em;
    background: var(--color-signal);
  }
  /* Medida de leitura: o palco vai a 1440px, então a nota precisa do próprio
     teto — sem isso a linha passa de 130 caracteres em monitor largo. */
  .cursor-note p { color: var(--color-paper-dim); margin: 0; max-width: 75ch; }
  .cursor-note strong { color: var(--color-paper); }
}

/* -------------- Tabela (cursor-table) ------------------------------ */
@layer components {
  .cursor-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-sm) 0 var(--space-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
  }
  .cursor-table th,
  .cursor-table td {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .cursor-table th {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    border-bottom: 1px solid var(--color-graticule);
  }
  .cursor-table td { color: var(--color-paper-dim); }
  .cursor-table td code { white-space: nowrap; }

  /* Estados de "O que funciona" — nunca semáforo verde (Regra do
     DESIGN.md): sucesso é o amarelo-sinal profundo, falha é --danger,
     "depende" é um rótulo neutro em paper. */
  .cursor-yes { font-weight: 700; color: var(--color-signal-deep); }
  .cursor-no { font-weight: 700; color: var(--color-danger); }
  .cursor-warn { font-weight: 700; color: var(--color-paper); }

  @media (max-width: 600px) {
    .cursor-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
}

/* -------------- Bloco de código (páginas geradas: um <pre> só) ----- */
@layer components {
  .setup-content pre {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    color: var(--color-paper);
    padding: var(--space-sm) var(--space-md);
    padding-right: 5.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-code);
    line-height: var(--leading-code);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-sm);
  }
  .setup-content pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 1em;
  }

  /* Injetado em runtime por tabs.js em todo <pre> de .setup-content
     que ainda não tem botão — mesmo padrão do copy-btn da home,
     reaproveitando os tokens em vez do CSS crítico embutido que as
     marcas irmãs usam por página. */
  .copy-btn {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-half) var(--space-xs);
    /* 44px: compromisso de alvo de toque do PRODUCT.md. Era 28px — a
       auditoria T12.4 achou 5 controles abaixo do piso, e justo os que
       mais importam (copiar a chave de API e o nome do modelo). */
    min-height: 44px;
    background: var(--color-void);
  }
  .copy-btn:hover,
  .copy-btn:focus-visible { color: var(--color-signal); border-color: var(--color-signal); }
}

/* -------------- Abas de sistema operacional (cursor.html) ---------- */
@layer components {
  /* Reaproveita .gp-tabs/.gp-tab/.gp-panel (já estilizados pelo
     tabs.js compartilhado do site) — aqui só o necessário para o
     contexto de largura total do miolo de conteúdo. */
  .setup-content .gp-tabs { margin: var(--space-sm) 0 var(--space-xs); }
}

/* -------------- Hub (ferramentas.html) ------------------------------ */
@layer utilities {
  .setup-content .cursor-table td strong { color: var(--color-paper); }
}

/* -------------- Raio por papel de superfície (ver home.css) -------------- */
@layer components {
  /* NÃO acrescente `overflow: hidden` aqui. Este bloco fica no fim do arquivo
     e, com a mesma especificidade, vence por ordem — o shorthand `overflow`
     expandiria para `overflow-x` e anularia o `overflow-x: auto` de
     `.setup-content pre` (:215) e o da media query de `.cursor-table` (:199),
     cortando comando longo sem barra de rolagem. Nenhum destes tem filho
     pintando no canto: o `.copy-btn` fica a 8px de top/right, dentro do arco.
     `.cursor-table` fica de fora do raio de propósito: com `border-collapse:
     collapse` (:169) nenhum navegador aplica raio em <table>, então a regra
     seria inerte e só traria o efeito colateral. */
  .cursor-note,
  .setup-content pre { border-radius: var(--radius-lg); }
  .copy-btn { border-radius: var(--radius-sm); }
}