/* Linguagem visual do IntelectGrid.
   A rampa de autoridade é a espinha: escala ordinal fria→quente, porque frio
   lê como certo e quente como incerto. Todo o resto do cromo é neutro — a cor
   aqui é semântica, não decoração.

   A paleta é a do okovia.com. Os neutros e os semânticos vêm de lá tal e
   qual; a RAMPA é derivada, porque eles têm três estados (good, warning,
   danger) e o produto precisa de cinco.

   A derivação usa a escala deles e não inventa hue: `accent-strong` → `accent`
   → um passo interpolado → `warning` → `danger`. Duas correções, cada uma com
   um motivo medido:

     · o topo é `accent-strong` aprofundado 30% na direção do texto. Sem isso
       `accent` e `accent-strong` ficam a ΔE 6, e cinco degraus que não se
       distinguem não são uma rampa;
     · `measured` recua 10%, porque `accent` puro dava 4,2:1 sobre o fundo
       claro — e `--ok` é cor de TEXTO, não só de bolinha.

   Com as duas, todo degrau passa de 4,5:1 sobre fundo e sobre painel, nos dois
   temas, e nenhum par vizinho fica abaixo de ΔE 13. */
:root {
  --ground: #F3F5F4; --surface: #FFFFFF; --sunk: #EEF1EF;
  --line: #DDE3E0; --line-strong: #A6B0AB;
  --ink: #16201A; --ink-soft: #404D46; --ink-faint: #62716A;
  --auth-authoritative: #395446; --auth-measured: #507461;
  --auth-derived: #7D692C; --auth-estimated: #9A5B00; --auth-inferred: #B42318;
  --ok: #507461; --warn: #9A5B00; --bad: #B42318; --focus: #486A59;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0A0C0B; --surface: #141917; --sunk: #0E110F;
    --line: #262E2A; --line-strong: #536059;
    --ink: #EDF3EF; --ink-soft: #B7C3BC; --ink-faint: #8B9C93;
    --auth-authoritative: #ADCDBD; --auth-measured: #6F9B86;
    --auth-derived: #B5A55A; --auth-estimated: #E0A030; --auth-inferred: #F2685C;
    --ok: #6F9B86; --warn: #E0A030; --bad: #F2685C; --focus: #92BDA8;
  }
}
:root[data-theme="dark"] {
  --ground: #0A0C0B; --surface: #141917; --sunk: #0E110F;
  --line: #262E2A; --line-strong: #536059;
  --ink: #EDF3EF; --ink-soft: #B7C3BC; --ink-faint: #8B9C93;
  --auth-authoritative: #ADCDBD; --auth-measured: #6F9B86;
  --auth-derived: #B5A55A; --auth-estimated: #E0A030; --auth-inferred: #F2685C;
  --ok: #6F9B86; --warn: #E0A030; --bad: #F2685C; --focus: #92BDA8;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
a { color: var(--focus); text-underline-offset: 2px; }
code, kbd { font-family: var(--mono); font-size: 0.88em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

header { border-bottom: 1px solid var(--line); background: var(--surface); }
.head-inner {
  max-width: 1180px; margin: 0 auto; padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline;
}
.head-inner h1 { font-size: 22px; }

/* O logo no cabeçalho do produto. `align-self: center` porque a linha é
   `align-items: baseline`, e a baseline de uma imagem é a borda de baixo dela
   — o monograma ficaria pendurado abaixo do texto, não ao lado.

   O raio acompanha o do próprio desenho (rx 14 num viewBox de 64, ou 0.22 do
   lado): ele existe para aparar o serrilhado da borda, não para arredondar
   um quadrado. Escalar o lado sem escalar o raio devolve o serrilhado.

   O painel escuro é do SVG e é constante — o logo não muda de cor porque o
   papel em volta mudou, e por isso não há versão clara dele. */
.head-inner .logo {
  width: 32px; height: 32px; border-radius: 7px; display: block;
}

/* O logo e o título são UM conjunto, não dois itens da mesma linha. Soltos no
   flex do cabeçalho eles herdavam o `column-gap` de 28px — que é a distância
   entre blocos, e larga demais entre uma marca e o nome dela. */
.head-inner .marca { display: flex; align-items: center; gap: 12px; }

/* O monograma leva à página inicial. `display: flex` porque um `<a>` é inline
   por padrão, e a linha de base do inline reservaria espaço abaixo do desenho —
   o alinhamento que a `.marca` acabou de acertar voltaria a escorregar por um
   par de pixels. O raio acompanha o do desenho para que o anel de foco contorne
   o monograma, e não um retângulo maior que ele. */
.marca-inicio { display: flex; border-radius: 7px; text-decoration: none; }
nav { display: flex; gap: 18px; margin-left: auto; font-size: 14px; }
nav a { color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; }
nav a:hover { color: var(--ink); }
nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--focus); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 24px 72px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.panel + .panel { margin-top: 16px; }
.panel > h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--sunk);
}
.panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.auth { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 7px; vertical-align: 1px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--sunk);
  color: var(--ink-soft); font-family: var(--mono); font-size: 12px; line-height: 1.65;
}
button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 8px 14px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--focus); color: var(--focus); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--focus); border-color: var(--focus); color: var(--surface); }
button.primary:hover:not(:disabled) { color: var(--surface); filter: brightness(1.08); }

select, input[type="text"], input[type="number"] {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 7px 9px; width: 100%;
}
label.lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 5px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- identidade da sessão no cabeçalho ------------------------------------
   O nome da organização fica visível em toda página de propósito: num produto
   multi-tenant, agir sobre o catálogo errado é um erro caro e silencioso, e a
   única defesa barata é a pessoa estar vendo em qual organização está. */
.conta { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.conta-nome { font-size: 13px; color: var(--ink-soft); }
.conta-tenant {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line); color: var(--ink);
}
button.sair {
  padding: 4px 9px; font-size: 10.5px; border-color: var(--line);
  color: var(--ink-faint);
}
button.sair:hover { color: var(--bad); border-color: var(--bad); }

.fora-do-ar {
  max-width: 520px; margin: 14vh auto; padding: 0 24px;
  font-family: var(--sans); color: var(--ink);
}
.fora-do-ar h1 { font-size: 22px; margin-bottom: 10px; }
.fora-do-ar p { color: var(--ink-soft); max-width: 62ch; }
.fora-do-ar pre { margin: 14px 0 18px; }

/* Alvo de toque confortável no celular, sem inchar o desktop. Ponteiro
   grosseiro é o sinal certo: um tablet com caneta continua fino. */
@media (pointer: coarse) {
  button, select, input[type="text"], input[type="email"],
  input[type="password"], input[type="number"] { min-height: 44px; }
}

/* Quem navega por teclado precisa alcançar o conteúdo sem percorrer o menu
   inteiro em toda página. Visível só quando recebe foco. */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--focus); border-radius: var(--r);
  padding: 10px 14px; font-size: 13px;
}
.pular:focus { left: 12px; top: 12px; }

/* --- seletor de idioma ----------------------------------------------------
   Discreto de propósito: quem já está no idioma certo não precisa vê-lo, e
   quem não está procura no canto — que é onde a convenção o colocou. */
select.seletor-idioma {
  width: auto; padding: 4px 7px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint);
  border-color: var(--line); background: transparent;
}
select.seletor-idioma:hover { color: var(--ink); border-color: var(--line-strong); }
.idioma-canto { position: fixed; top: 14px; right: 16px; z-index: 10; }
header .idioma { margin-left: 10px; }