/* Tokens, layout e controles compartilhados entre o formulário e o painel. */
:root{
  --paper:#EDF0F3; --surface:#FFFFFF; --ink:#18212C; --muted:#5B6776; --line:#D5DBE2;
  --accent:#2447C9; --accent-ink:#FFFFFF;
  --l0:#E3E7EC; --l1:#B9C9F4; --l2:#6D8DEB; --l3:#1F3BA8;
  --ok:#1E7A4F; --warn:#9A5B00; --danger:#B3261E; --interest:#B8860B;
  /* paleta categórica dos gráficos — distinguível também em escala de cinza */
  --c1:#2447C9; --c2:#1E7A4F; --c3:#B8860B; --c4:#8B3FA8; --c5:#0E7C86;
  --c6:#B3261E; --c7:#5B6776; --c8:#C2571A;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#10151C; --surface:#18202A; --ink:#E6EBF1; --muted:#98A4B3; --line:#2A3542;
    --accent:#7B98FF; --accent-ink:#0C1330;
    --l0:#232D39; --l1:#304B8F; --l2:#4F72D9; --l3:#9DB4FF;
    --ok:#55C28F; --warn:#E0A14A; --danger:#FF8A80; --interest:#E3B341;
    --c1:#7B98FF; --c2:#55C28F; --c3:#E3B341; --c4:#C48BE0; --c5:#4FC3CE;
    --c6:#FF8A80; --c7:#98A4B3; --c8:#F0955A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#10151C; --surface:#18202A; --ink:#E6EBF1; --muted:#98A4B3; --line:#2A3542;
  --accent:#7B98FF; --accent-ink:#0C1330;
  --l0:#232D39; --l1:#304B8F; --l2:#4F72D9; --l3:#9DB4FF;
  --ok:#55C28F; --warn:#E0A14A; --danger:#FF8A80; --interest:#E3B341;
  --c1:#7B98FF; --c2:#55C28F; --c3:#E3B341; --c4:#C48BE0; --c5:#4FC3CE;
  --c6:#FF8A80; --c7:#98A4B3; --c8:#F0955A;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}

/* Só para leitor de tela: sai do fluxo visual sem sair da árvore de acessibilidade
   (display:none seria ignorado pelo leitor). */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Atalho para pular a navegação. Fica escondido até receber foco pelo teclado. */
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--accent);
  color:var(--accent-ink);padding:10px 16px;border-radius:0 0 9px 9px;font-weight:700;
  text-decoration:none;transition:top .15s ease-out}
.skip:focus{top:0}

.wrap{max-width:980px;margin:0 auto;padding:24px 20px 80px}
.wrap.wide{max-width:1480px}
header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px}
.brand h1{font-size:clamp(28px,5vw,44px);line-height:1.05;margin:0;font-weight:800;letter-spacing:-.02em}
.brand p{margin:8px 0 0;color:var(--muted);max-width:60ch}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,3.5vw,32px)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label,.field .lbl{font-weight:600;font-size:15px}
.field .hint{color:var(--muted);font-size:13px;margin-top:-2px}
.field input,.field select,.field textarea{background:var(--paper);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;width:100%}
.field textarea{min-height:84px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--paper);border-radius:999px;
  padding:7px 13px;cursor:pointer;font-weight:500;font-size:14px}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.err{color:var(--warn);font-size:14px;margin-top:4px}

.btn{border:1px solid var(--ink);background:transparent;padding:11px 20px;border-radius:9px;
  font-weight:700;cursor:pointer;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.btn.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);filter:brightness(1.08)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.quick{border:1px solid var(--line);background:transparent;border-radius:8px;padding:6px 10px;
  font-size:14px;cursor:pointer;color:var(--muted);min-height:44px;
  transition:border-color .15s ease-out,color .15s ease-out}
.quick:hover{border-color:var(--ink);color:var(--ink)}
.savestate{color:var(--muted);font-size:13px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.notice{border-left:4px solid var(--accent);background:var(--surface);padding:12px 16px;
  border-radius:0 10px 10px 0;margin-bottom:18px;font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{font-size:13px;padding:3px 9px;border-radius:999px;background:var(--l0)}
.pill.l1{background:var(--l1)}.pill.l2{background:var(--l2);color:#fff}
.pill.l3{background:var(--l3);color:#fff}
.pill.int{outline:1.5px solid var(--interest)}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--warn);border-color:var(--warn)}
.tag.danger{color:var(--danger);border-color:var(--danger)}