/* ===========================================================================
   Casco do produto: tokens, corpo e o cabeçalho da Observabilidade.

   Este arquivo existe porque a tela nasceu dentro de um painel maior e herdava
   dele a paleta, a fonte, o corpo da página e a barra de cima. Fora daquele
   painel a tela abria sem nenhuma cor definida (todo var(--...) caía no vazio) e
   sem cabeçalho nenhum. O que está aqui é, então, o mínimo que a tela consome e
   mais o cabeçalho do produto: marca, seletor de ambiente, quem está olhando e
   sair. Nada de menu de outras telas, nada de link para fora do produto.

   Os nomes dos tokens são os mesmos de antes de propósito: o CSS grande da tela
   (que é o valor real do trabalho) cita cada um deles dezenas de vezes, e
   renomear token não deixa a tela mais autônoma, só aumenta a chance de um
   var() órfão pintar transparente sem ninguém perceber.
   =========================================================================== */

/* A fonte vem do próprio produto, não do Google: a tela pode rodar dentro de um
   cluster sem saída para a internet, e fonte que não chega troca a métrica do
   texto inteiro depois do primeiro desenho. */
@font-face{font-family:Inter; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(inter-latin.woff2) format('woff2');}

:root{
  color-scheme:dark;
  /* superfícies opacas e fundo agrupado, como uma tela de ajustes: o que é cartão
     tem cor própria, o que é fundo não disputa atenção com o número */
  --bg:#0b1220; --card:#151e33; --card2:#1f2a44;
  --fill:rgba(126,150,200,.18); --fillh:rgba(126,150,200,.09); --toque:rgba(126,150,200,.3);
  --sep:rgba(126,150,200,.2);
  --label:#f4f6fa; --label2:rgba(228,236,250,.64); --label3:rgba(228,236,250,.58);
  /* cores de ESTADO. Elas nunca viram série de gráfico e nunca aparecem sozinhas:
     sempre com ícone e rótulo, senão a tela passa a depender de quem enxerga cor. */
  --blue:#3d8fdb; --green:#5dc46d; --orange:#f9883e; --red:#df6565; --purple:#c068d5;
  --yellow:#f7b438; --teal:#4ab6c8;
  /* o cinza do NÃO MEDIDO. É um token separado das cores de estado por decisão: cego
     não é um estado bom nem ruim, é ausência de medição, e precisa ser distinguível
     de zero medido em qualquer lugar da tela. */
  --cinza:#8fa0bd;
  --sombra:0 18px 50px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --flutua:0 2px 6px rgba(0,0,0,.35), 0 14px 38px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.35);
  /* no claro a profundidade vem da sombra escura sobre fundo claro; no escuro isso não
     funciona (sombra preta sobre #0b1220 quase não aparece), então aqui ela vem de três
     camadas: um fio de luz de meio pixel na volta, a sombra curta que descola e a longa
     que dá altura. É o mesmo desenho do claro, lido ao contrário. */
  --sombra2:0 0 0 .5px rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.5),
            0 8px 22px rgba(0,0,0,.36);
  --lamina:rgba(29,41,68,.55); --lamina2:rgba(126,150,200,.16);
  --brilho1:rgba(255,255,255,.28); --brilho2:rgba(255,255,255,.04);
  --realce:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.02);
  --realce2:inset 0 0 0 .5px rgba(255,255,255,.07);
  --pousa:0 10px 30px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.28);
  /* trilha do seletor e botão escolhido: no escuro o escolhido precisa clarear, senão
     fica quase da cor do próprio grupo */
  --segbg:rgba(126,150,200,.14); --segsel:rgba(255,255,255,.22); --segsel-txt:#f4f6fa;
  --segsulco:inset 0 1px 3px rgba(0,0,0,.38), inset 0 0 0 .5px rgba(255,255,255,.04);
  --segelev:0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16);
  --segpastilha:0 2px 6px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.28);
  /* uma escala só de cantos, do menor ao maior: o que está dentro usa o degrau de baixo,
     para os cantos ficarem concêntricos em vez de cada bloco inventar o seu */
  --r1:8px;    /* etiqueta, marca miúda */
  --r2:12px;   /* botão, campo, item de menu */
  --r3:16px;   /* bloco dentro de um cartão */
  --r4:22px;   /* cartão, popover, caixa flutuante */
  --r5:28px;   /* caixa grande */
  --rp:999px;  /* pílula e círculo */
  --sobre:#fff;   /* texto sobre acento cheio, nos dois temas */
  --raio:var(--r4); --raio2:var(--r3);
  --mola:cubic-bezier(.32,.72,0,1);
  /* dois tempos só, para tudo andar no mesmo compasso: o curto é para o que muda de
     estado sem sair do lugar, o longo para o que se desloca ou abre e fecha */
  --t1:.14s; --t2:.34s;
  /* grade e eixo dos gráficos desenhados à mão pela tela */
  --g-grade:rgba(126,150,200,.16); --g-eixo:var(--label3);
}
:root.claro{
  color-scheme:light;
  --bg:#eef1f7; --card:#fff; --card2:rgba(27,47,98,.08);
  --fill:rgba(27,47,98,.1); --fillh:rgba(27,47,98,.05); --toque:rgba(27,47,98,.17);
  --sep:rgba(27,47,98,.2);
  --label:#16223c; --label2:#48587a; --label3:#5f6d90;
  /* no claro cada acento ganha versão mais fechada: as do escuro somem no branco, e
     o piso de contraste vale para texto de estado também */
  --blue:#0a5fb0; --green:#1b7a2f; --orange:#b34700; --red:#c22a2a; --purple:#93309f;
  --yellow:#8a5d00; --teal:#0b7183;
  --cinza:#4d5c78;
  --sombra:0 18px 44px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
  --flutua:0 2px 6px rgba(27,47,98,.1), 0 14px 34px rgba(27,47,98,.18), 0 0 0 .5px rgba(27,47,98,.1);
  --sombra2:0 1px 2px rgba(0,0,0,.05);
  --lamina:rgba(255,255,255,.78); --lamina2:#fff;
  --brilho1:rgba(255,255,255,.6); --brilho2:rgba(27,47,98,.09);
  --realce:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.16);
  --realce2:inset 0 0 0 .5px rgba(27,47,98,.12);
  --pousa:0 10px 26px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
  --segbg:rgba(27,47,98,.09); --segsel:rgba(255,255,255,.95); --segsel-txt:#16223c;
  --segsulco:inset 0 1px 3px rgba(27,47,98,.12), inset 0 0 0 .5px rgba(27,47,98,.07);
  --segelev:0 2px 6px rgba(27,47,98,.16), 0 1px 2px rgba(27,47,98,.1), inset 0 1px 0 rgba(255,255,255,.95);
  --segpastilha:0 2px 6px rgba(27,47,98,.16), 0 1px 2px rgba(27,47,98,.1);
  --g-grade:rgba(27,47,98,.12); --g-eixo:var(--label3);
}

*{box-sizing:border-box}
html{background:var(--bg); scrollbar-gutter:stable;}
body{margin:0; min-height:100vh; color:var(--label); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.4; letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
  padding:18px clamp(16px,2.6vw,44px) 44px;}
.tela{max-width:1440px; margin:0 auto;}
h1{font-size:clamp(25px,3vw,31px); font-weight:700; letter-spacing:-.032em; margin:0; line-height:1.1;}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}

/* ---------- seletor segmentado ----------
   A trilha é um sulco e o escolhido é uma pastilha que sobe: é essa diferença que dá a
   profundidade. Serve ao seletor de ambiente do cabeçalho e ao de janela da barra de
   filtros, que é o mesmo componente em dois lugares. */
.seg{position:relative; display:inline-flex; width:max-content; border-radius:var(--rp); padding:2px;
  gap:2px; background:var(--segbg); box-shadow:var(--segsulco);}
.seg button, .seg a{z-index:1; position:relative; display:inline-flex; align-items:center;
  min-height:26px; border:0; background:transparent; color:var(--label2); font:inherit;
  font-size:13px; font-weight:500; padding:5px 13px; border-radius:var(--rp); cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:background-color var(--t1) var(--mola), color var(--t2) var(--mola),
    transform var(--t1) var(--mola);}
/* o item escolhido NÃO muda de peso de fonte: peso 600 deixa o texto mais largo e a trilha
   inteira cresce a cada troca. O destaque vem da pastilha, da cor e de um falso negrito por
   sombra do próprio texto, que engrossa o traço sem mexer na métrica. */
/* a pastilha é desenhada no próprio botão escolhido, e não numa peça que desliza por trás:
   a peça que desliza precisa de JS medindo a barra a cada troca, e uma barra que nasce
   escondida (o seletor só aparece com mais de um ambiente) mede zero e deixa a pastilha
   fora do lugar. Aqui o estado escolhido é CSS puro e não tem como sair do lugar. */
.seg button[aria-pressed="true"], .seg a[aria-current="page"]{color:var(--segsel-txt);
  background:var(--segsel); box-shadow:var(--segpastilha);
  text-shadow:0 0 .32px currentColor, 0 0 .32px currentColor;}
.seg button:active, .seg a:active{transform:scale(.96);}
.seg button[aria-disabled="true"]{color:var(--label3); cursor:default;}
@media (hover:hover) and (pointer:fine){
  .seg button:not([aria-pressed="true"]):not([aria-disabled="true"]):hover{color:var(--label);}
}
.rot{font-size:12.5px; color:var(--label2); margin-right:2px;}

/* ---------- cabeçalho do produto ----------
   Três coisas e nada mais: de quem é o produto (marca), QUAL ambiente está sendo mostrado,
   e quem está olhando. O seletor de ambiente mora aqui, e não no meio da página, porque
   trocar de ambiente troca a ORIGEM de todo número da tela; não é um filtro. */
.topo{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px;
  min-height:58px; padding-block:10px 14px; border-bottom:.5px solid var(--sep);
  --btopo:30px; --captopo:34px;}
.topo .marca{display:flex; align-items:center; gap:10px; flex:none; min-width:0;
  text-decoration:none; color:inherit;}
.topo .marca .logo{display:flex; align-items:center;}
.topo .marca .logo svg, .topo .marca .logo img{display:block; width:auto; height:26px;
  max-width:132px;}
.topo .marca .logo:empty{display:none}
/* o nome do produto em duas alturas: a marca em cima (é ela que troca no white label) e a
   palavra do produto embaixo, que não troca nunca */
.topo .marca .nome{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.topo .marca .nome b{font-size:14.5px; font-weight:650; letter-spacing:-.01em; color:var(--label);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topo .marca .nome span{font-size:12px; color:var(--label2);}
/* separador entre a marca e o seletor: some quando a barra quebra em duas linhas */
.topo .risco{width:1px; height:26px; background:var(--sep); flex:0 0 auto;}
.topo .dir{margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0;}
.acoes{display:inline-flex; align-items:center; gap:2px; padding:2px; flex:none;
  background:var(--segbg); box-shadow:var(--segsulco); border-radius:var(--rp);}
.tema{width:var(--btopo,32px); height:var(--btopo,32px); border-radius:var(--rp); color:var(--label2);
  border:0; font:inherit; font-size:14px; cursor:pointer; line-height:1; padding:0;
  position:relative; background:var(--segbg); box-shadow:var(--realce2);
  display:inline-flex; align-items:center; justify-content:center;}
.acoes .tema{background:transparent; box-shadow:none;}
.tema .ico{display:block; width:15px; height:15px; flex:none;}
.tema .lua{display:none;}
.claro .tema .sol{display:none;}
.claro .tema .lua{display:block;}
.tema:disabled{opacity:.55; cursor:default;}
/* giro de releitura: ciclo contínuo, fora dos dois tempos do resto da interface */
.tema.girando{animation:gira .8s linear infinite;}
@keyframes gira{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){
  .tema:hover{color:var(--label); background:var(--toque);}
}
.fsair{display:contents;}   /* só carrega o POST de sair: quem desenha é o botão */
.quem{display:inline-flex; align-items:center; gap:8px; height:var(--captopo,32px); font-size:13px;
  color:var(--label2); background:var(--segbg); box-shadow:var(--realce2); border-radius:var(--rp);
  padding:0 13px; min-width:0; flex:none;}
.quem b{font-weight:600; color:var(--label); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;}
/* o papel não é enfeite: é ele que diz por que um botão de correção aparece para uma pessoa
   e não para outra. O ponto colorido separa quem só vê de quem também escreve. */
.quem .papel{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  color:var(--label2);}
.quem .papel::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cinza);}
.quem .papel.escreve::before{background:var(--green);}
.quem .papel i{font-style:normal;}
.quem .ini{display:none; font-weight:600; color:var(--label); font-size:12.5px; letter-spacing:.02em;}

/* logo padrão da casa: as classes vêm do arquivo SVG e as cores ficam aqui, para o desenho
   acompanhar o tema em vez de nascer preto no claro e sumir no escuro */
.logo-msb .cls-1{fill:none} .logo-msb .cls-2{fill:#fff} .logo-msb .cls-3{fill:#01aeed}
.logo-msb .cls-4{fill:#a6cd43}
.claro .logo-msb .cls-2{fill:#1b2f62}

/* ---------- título da página ---------- */
.titpag{margin:0 0 22px;}
.titpag h1{margin:0;}
.sub{color:var(--label2); font-size:14.5px; margin:4px 0 0; max-width:62ch;}

/* ---------- releitura em curso ----------
   Enquanto a página relê, o que já está desenhado esmaece em vez de sumir: número velho
   datado é informação, tela branca não é. */
body[aria-busy="true"] .velavel{opacity:.45; pointer-events:none;}
.velavel{transition:opacity var(--t1) var(--mola);}
.esqueleto{border-radius:var(--r3); height:62px;
  background:linear-gradient(90deg,var(--fillh),var(--fill),var(--fillh));
  background-size:200% 100%;
  animation:brilha 1.5s linear infinite;}
@keyframes brilha{from{background-position:200% 0}to{background-position:-200% 0}}
.spin{display:inline-block; width:var(--t,15px); height:var(--t,15px); border-radius:50%;
  border:2px solid var(--fill); border-top-color:var(--blue);
  animation:gira .8s linear infinite; vertical-align:-2px; flex:none;}

/* ---------- barra estreita ----------
   Os degraus vão do menos essencial para o mais: primeiro o botão cresce para o dedo,
   depois o nome de quem está olhando vira iniciais, e o papel vira só o ponto de cor. O
   seletor de ambiente nunca some, porque sem ele a tela não diz de onde é o número. */
@media (max-width:900px){
  .topo{gap:10px;}
  .topo .risco{display:none;}
  .topo #o-ambientes{order:3; flex:1 1 100%; max-width:100%; overflow-x:auto;
    scrollbar-width:none;}
  .topo #o-ambientes::-webkit-scrollbar{display:none;}
}
@media (max-width:620px), (pointer:coarse){
  .topo{--btopo:40px; --captopo:44px;}
  .acoes{padding:3px; gap:1px;}
  .tema{font-size:16px;}
  .tema .ico{width:17px; height:17px;}
}
@media (max-width:620px){
  .quem b{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  .quem .ini{display:inline;}
  .quem{padding:0 12px;}
}
@media (max-width:520px){
  .quem .papel i{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  .topo .marca .logo svg, .topo .marca .logo img{height:22px; max-width:96px;}
}
@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:1.8s;}
  *{transition:none!important; animation:none!important}
}