/* =============================================================
   BASE — reset, tipografia e regras que valem em toda tela
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--fg);
  font-size:var(--fs-base);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* espaço pra barra inferior não cobrir o conteúdo;
     .com-dock (em shell.css) soma o botão de ação quando ele aparece */
  padding-bottom:calc(var(--barra-h) + var(--safe-b) + var(--s6));
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease);
}

/* Todo número do painel é tabular. Coluna que dança ao atualizar
   está errada — CLAUDE.md. */
.mono{
  font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---------- títulos ---------- */
h1{
  font-size:var(--fs-2xl);
  font-weight:700;
  letter-spacing:var(--ls-xtight);
  line-height:1.15;
  margin-bottom:var(--s1);
}
h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--ls-tight);line-height:1.2}
h3{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--ls-tight)}

.sub{
  color:var(--fg-2);
  font-size:var(--fs-base);
  line-height:1.5;
  margin-bottom:var(--s6);
  max-width:46ch;
}

/* rótulo mono de seção — a assinatura visual do painel */
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-tiny);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s3);
  margin-bottom:var(--s3);
}
.eyebrow > span:last-child{color:var(--fg-2);flex:none}

.hint{
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--fg-2);
  margin-top:var(--s2);
}

/* ---------- foco visível, uma regra pra tudo ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* nada de realce cinza do toque no Android */
button,a{-webkit-tap-highlight-color:transparent}

::selection{background:var(--heat);color:#fff}

/* ---------- barra de rolagem discreta (desktop) ---------- */
@media (pointer:fine){
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-thumb{
    background:var(--edge);
    border-radius:var(--r-full);
    border:3px solid var(--bg);
  }
  *::-webkit-scrollbar-track{background:transparent}
}

/* ---------- acessibilidade ---------- */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* CLAUDE.md: animação curta e discreta, e respeitar a preferência. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}