/* Chairô Intelligence Design 1.3.0 — base compartilhada das paginas do Premio ABC 2026.
   Tokens copiados de assets/tokens.css da skill. Nao editar valores aqui: alterar na fonte
   canonica (site-guia-metodos/design-system/) e redistribuir. */

:root{
  color-scheme: light;
  --chairo-paper:#f1eee7;
  --chairo-ink:#11110f;
  --chairo-muted:#595750;
  --chairo-line:#bcb6ab;
  --chairo-action:#ef5b35;
  --chairo-action-text:#b64225;
  --chairo-intelligence:#b8a7e8;
  --chairo-discovery:#d5dc5f;
  --chairo-surface-2:#e8e4dc;
  --chairo-surface-3:#dfdad1;
  --chairo-font-display:Georgia,"Times New Roman",serif;
  --chairo-font-interface:Arial,Helvetica,"Geist",sans-serif;
  --chairo-space-3:1rem;
  --chairo-space-4:1.5rem;
  --chairo-space-5:2rem;
  --chairo-space-6:3rem;
  --chairo-border:1px solid var(--chairo-line);
  --chairo-border-strong:1px solid var(--chairo-ink);
  --chairo-page-padding:max(4vw,1.25rem);
  --chairo-header-height:82px;
  --chairo-motion-default:220ms;
}

*{box-sizing:border-box}
html{background:var(--chairo-paper);color:var(--chairo-ink);font-family:var(--chairo-font-interface)}
body{margin:0;background:var(--chairo-paper);color:var(--chairo-ink);
  font:16px/1.55 var(--chairo-font-interface);-webkit-text-size-adjust:100%}
:focus-visible{outline:3px solid var(--chairo-action);outline-offset:3px}

.chairo-display{font-family:var(--chairo-font-display);font-weight:400;letter-spacing:-.045em;line-height:.94}
.chairo-label{font-size:12px;line-height:1.45;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.chairo-page{margin-inline:auto;max-width:1440px;padding-inline:var(--chairo-page-padding)}

/* Cabecalho. Sem navegacao global: estas paginas nao pertencem a Central Chairo.
   Ver nota de excecao na entrega. */
.ch-head{position:sticky;top:0;z-index:60;height:var(--chairo-header-height);
  display:flex;align-items:center;gap:18px;
  background:color-mix(in srgb,var(--chairo-paper) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:var(--chairo-border-strong)}
.ch-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex:0 0 auto}
.ch-brand img{display:block;height:26px;width:auto}
.ch-brand .sig{font-size:14px;letter-spacing:.02em;padding-left:14px;border-left:1px solid var(--chairo-line);
  color:var(--chairo-muted)}
.ch-bread{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chairo-muted);text-align:right}
@media (max-width:760px){
  :root{--chairo-header-height:68px;--chairo-page-padding:1.25rem}
  .ch-brand .sig{display:none}
  .ch-bread{font-size:12px}
}

/* Abertura editorial */
.ch-open{padding:clamp(38px,6vw,74px) 0 clamp(26px,3vw,38px);border-bottom:var(--chairo-border-strong)}
.ch-open h1{margin:14px 0 0;font-size:clamp(46px,7.2vw,96px);max-width:16ch}
.ch-open .sub{margin:20px 0 0;max-width:60ch;font-size:clamp(16px,1.5vw,19px);line-height:1.45;color:var(--chairo-muted)}

/* Painel de numeros: tabela editorial, bordas compartilhadas */
.ch-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-left:var(--chairo-border);border-top:var(--chairo-border);margin:clamp(26px,3vw,36px) 0 0}
.ch-nums div{padding:16px 18px;border-right:var(--chairo-border);border-bottom:var(--chairo-border)}
.ch-nums b{display:block;font-family:var(--chairo-font-display);font-weight:400;font-size:34px;line-height:1;
  letter-spacing:-.03em}
.ch-nums span{display:block;margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chairo-muted)}

/* Filtros: capsula so para filtro/estado, preenchimento apenas no ativo */
.ch-bar{position:sticky;top:var(--chairo-header-height);z-index:50;display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;padding:14px 0;border-bottom:var(--chairo-border);
  background:color-mix(in srgb,var(--chairo-paper) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
button.f,.ch-chip{font:inherit;font-size:14px;min-height:38px;padding:7px 16px;
  border:1px solid var(--chairo-muted);
  background:transparent;border-radius:999px;cursor:pointer;color:var(--chairo-ink);
  transition:border-color var(--chairo-motion-default),background var(--chairo-motion-default)}
button.f:hover{border-color:var(--chairo-ink)}
button.f.on{background:var(--chairo-ink);color:#fff;border-color:var(--chairo-ink)}
input#q{font:inherit;font-size:16px;min-height:38px;padding:7px 14px;
  border:1px solid var(--chairo-muted);
  border-radius:999px;background:transparent;color:var(--chairo-ink);width:210px;margin-left:auto}
input#q::placeholder{color:var(--chairo-muted)}

/* Estados. Cada cor cumpre uma funcao; o rotulo em texto acompanha sempre. */
.bd{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.bd.pend{border-color:var(--chairo-action-text);color:var(--chairo-action-text);background:transparent}
.bd.sf{background:var(--chairo-surface-3);color:var(--chairo-ink);border-color:var(--chairo-line)}
.bd.fo{background:var(--chairo-discovery);color:var(--chairo-ink);border-color:var(--chairo-discovery)}
.bd.ok{border-color:var(--chairo-ink);color:var(--chairo-ink);background:transparent}
.bd.neu{border-color:var(--chairo-line);color:var(--chairo-muted);background:transparent}

/* Botao de acao principal */
.ch-btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 22px;
  background:var(--chairo-ink);color:#fff;text-decoration:none;font-size:15px;font-weight:700;
  border:var(--chairo-border-strong)}
.ch-btn:hover{background:#000}
/* Acao editorial: texto com linha inferior */
.ch-link{color:var(--chairo-ink);text-decoration:none;border-bottom:1px solid var(--chairo-ink);
  font-weight:700}
.ch-link:hover{color:var(--chairo-action-text);border-color:var(--chairo-action-text)}

footer{padding:34px 0 0;margin-top:var(--chairo-space-6);border-top:var(--chairo-border);
  color:var(--chairo-muted);font-size:14px}

@media print{
  .ch-head,.ch-bar{position:static;backdrop-filter:none}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    scroll-behavior:auto !important}
}
