/* ============================================================
   Atlas — Setup page light/mono theme
   Extends tokens from styles.v2.css.
   ============================================================ */

.setup-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  color: var(--text-primary, var(--ink-blue));
}

@media (min-width: 900px) {
  .setup-layout { grid-template-columns: 240px 1fr; }
  .setup-sidebar {
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

.setup-sidebar ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.setup-sidebar a {
  display: block;
  padding: .6rem .9rem;
  border-radius: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted, var(--text-muted));
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}

.setup-sidebar a:hover {
  background: color-mix(in oklab, var(--on-surface) 13%, transparent);
  color: var(--text-primary, var(--ink-blue));
  border-color: color-mix(in oklab, var(--on-surface) 16%, transparent);
}

.setup-sidebar a.is-current {
  background: color-mix(in oklab, var(--on-surface) 16%, transparent);
  color: var(--text-primary, var(--ink-blue));
  border-color: color-mix(in oklab, var(--on-surface) 20%, transparent);
}

.setup-content section { scroll-margin-top: 6rem; margin-bottom: 3rem; }

.setup-content h1,
.setup-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text-primary, var(--ink-blue));
}

.setup-content p {
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--text-muted, var(--text-muted));
}

.setup-content code {
  background: color-mix(in oklab, var(--on-surface) 13%, transparent);
  color: var(--text-primary, var(--ink-blue));
  padding: .12em .35em;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}

.setup-content pre {
  position: relative;
  background: var(--ink-blue);
  border: 3px solid var(--ink-blue);
  color: var(--ink-paper);
  padding: 1rem 1.25rem;
  border-radius: 0;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 14%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.setup-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.copy-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: .7rem;
  padding: .25rem .6rem;
  border-radius: 0;
  background: color-mix(in oklab, var(--ink-paper-100) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink-paper-100) 28%, transparent);
  color: var(--ink-paper);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.copy-btn:hover {
  background: var(--ink-paper);
  color: var(--ink-blue);
}

.os-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.os-tab {
  padding: .5rem 1rem;
  border: 3px solid var(--border-hairline, var(--on-surface));
  border-radius: 0;
  background: var(--surface-inset);
  color: var(--text-muted, var(--text-muted));
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.os-tab:hover {
  background: color-mix(in oklab, var(--on-surface) 12%, transparent);
  border-color: color-mix(in oklab, var(--on-surface) 28%, transparent);
  color: var(--text-primary, var(--ink-blue));
}

.os-tab.is-active {
  background: var(--on-surface);
  border-color: transparent;
  color: var(--surface-page);
}

.os-panel { display: none; }
.os-panel.is-active { display: block; }

/* ============================================================
   ESTRUTURA das páginas de guia — migrada do <style> inline.

   setup.html e comparar.html traziam um <style> no <head> que
   misturava duas coisas: o tema antigo cravado (tratado no bloco
   seguinte) e a ESTRUTURA de componentes que só existia ali.
   O <style> das duas saiu; a estrutura mudou de casa para cá.

   Estas regras não têm prefixo `body` de propósito: são a base
   (0,1,0) e devem perder para o tema, não brigar com ele.

   ⚠ `.tool-panel { display: none }` é FUNCIONAL, não cosmético:
   sem ela os painéis de Claude Code e Codex renderizam os dois ao
   mesmo tempo. Era a única regra do site que a definia.
   ============================================================ */

/* Seletor de ferramenta (Claude Code | Codex) */
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1.75rem;
}

.tool-tab {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.6rem;
  line-height: 1;
  padding: 0.7rem 1.1rem;
  transition: background 0.2s, border-color 0.2s;
}

.tool-tab__engine { font-size: var(--t-micro); }

.tool-panel { display: none; }
.tool-panel.is-active { display: block; }

/* Links e listas do conteúdo */
.setup-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.setup-list {
  line-height: 1.9;
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

.footer__copy { font-size: var(--t-label); }

/* Avisos: a caixa. A tinta vem do bloco de tema abaixo. */
.setup-note,
.cursor-note {
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem 1.1rem;
}

.setup-note { margin: 1rem 0 1.25rem; }
.cursor-note { margin: 1.25rem 0; }

/* Tabela comparativa. A régua era fio de cabelo de 1px, que
   DESIGN.md nomeia como anti-referência: vai para 2px, e o
   cabeçalho para 3px para manter o salto de peso. */
.cursor-table {
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1rem 0 1.5rem;
  width: 100%;
}

.cursor-table th,
.cursor-table td {
  border-bottom: 2px solid var(--on-surface);
  padding: 0.7rem 0.75rem;
  text-align: left;
}

.cursor-table th { border-bottom-width: 3px; font-weight: 700; }
.cursor-table td code { white-space: nowrap; }

.cursor-yes,
.cursor-no,
.cursor-warn { font-weight: 700; }

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

/* ============================================================
   Neutralização do <style> inline das páginas por FERRAMENTA.

   setup.html e comparar.html já não têm <style> inline — a
   estrutura subiu para o bloco acima e o tema antigo foi apagado
   na fonte. Mas outras 14 páginas linkam este arquivo e AINDA
   trazem o <style> com o tema cravado: #FFFFFF, #111111, #fff,
   #3A3A3A, #595959, rgba(0,0,0,.03/.04/.55) e raios de .75rem.
   É near-black + branco + cinza, as duas anti-referências
   nomeadas em DESIGN.md, e nada disso vira no tema escuro: o
   seletor de ferramenta ficava branco-sobre-branco à noite.

   Por isso o prefixo `body` CONTINUA necessário aqui. Resolvido
   por ESPECIFICIDADE, sem !important: os seletores inline são de
   uma classe (0,1,0) e dois de duas (0,2,0); prefixar `body` dá
   (0,1,1) e (0,2,1), que vencem por especificidade e não por
   ordem — o <style> inline carrega DEPOIS deste arquivo.

   Páginas que ainda dependem deste bloco: aider, claude-desktop,
   cline, codex-cli, continue, crush, cursor, ferramentas, goose,
   kilo-code, opencode, qwen-code, roo-code, trae.
   Quando o <style> sair das 14, este bloco perde o prefixo e se
   funde com o de cima.
   ============================================================ */

/* Seletor de ferramenta: era branco com tinta near-black */
body .tool-tab {
  background: var(--surface-inset);
  border: 3px solid var(--on-surface);
  border-radius: 0;
  color: var(--text-primary);
}

body .tool-tab:hover { background: color-mix(in oklab, var(--on-surface) 8%, transparent); }

body .tool-tab.is-active {
  background: var(--on-surface);
  border-color: var(--on-surface);
  box-shadow: var(--misregister);
  color: var(--surface-page);
}

/* opacity em texto é risco de contraste: a hierarquia vem da tinta */
body .tool-tab__engine,
body .tool-tab.is-active .tool-tab__engine {
  font-weight: 600;
  opacity: 1;
}

body .tool-tab .tool-tab__engine { color: var(--text-muted); }
body .tool-tab.is-active .tool-tab__engine { color: var(--surface-page); }

/* Links e rodapé do conteúdo */
body .setup-link { color: var(--text-primary); }
body .setup-link:hover { color: var(--accent-text); }
body .footer__copy { color: var(--text-faint); }

/* Avisos: campo chapado com régua, não caixa cinza arredondada */
body .setup-note,
body .cursor-note {
  background: color-mix(in oklab, var(--on-surface) 8%, transparent);
  border: 3px solid var(--on-surface);
  border-radius: 0;
}

body .setup-note strong,
body .cursor-note strong { color: var(--text-primary); }

/* Tabela comparativa */
body .cursor-table th,
body .cursor-table td { border-bottom-color: var(--on-surface); }
body .cursor-table th { color: var(--text-primary); }
body .cursor-table td { color: var(--text-muted); }

/* .cursor-yes é o único dos três em uso (7x), e sempre acompanhado
   de texto descritivo — a cor é reforço, não a informação. Vai para
   tinta cheia: distingue do corpo diluído sem depender de matiz.
   .cursor-no/.cursor-warn estão declarados no HTML e nunca usados. */
body .cursor-yes { color: var(--text-primary); }
body .cursor-no { color: var(--status-no); }
body .cursor-warn { color: var(--text-primary); }