/* ============================================================================
   shell.css — sidebar, topbar, main, barra de tempo, split, e os quatro breakpoints.

   O QUE MUDOU EM 27/08/2026 (Helix, fase 2), e e uma inversao e nao um ajuste:

     antes:  a barra de tempo atravessava a largura toda (grid-column:1/-1) e o
             rail de 56px parava em cima dela
     agora:  a SIDEBAR vai de topo a base (grid-row:1/-1) e a barra ocupa so a
             coluna de conteudo

   Nao e gosto. O rodape da sidebar guarda o card do usuario — conta, segundo
   fator, tema e Sair —, e esse rodape nao existe se a barra corta a base.

   CONSEQUENCIA QUE JA CUSTOU TEMPO EM OUTRO LUGAR DESTE ARQUIVO: a sidebar passou
   a ser um pane que ROLA, e ela nunca tinha rolado. O que faz a rolagem
   independente funcionar e min-height:0 e minmax(0,1fr) em TODO nivel do grid.
   Esquecer em um nivel faz o pane transbordar em vez de rolar, e o sintoma aparece
   longe da causa.

   Breakpoints, e o que cada um resolve:
     1280  esconde a coluna menos importante da tabela
     1120  encolhe a ficha e empilha grid de duas colunas
      900  a sidebar vira GAVETA sobreposta com cortina; o shell empilha
      600  grid de indicador vira uma coluna
   ============================================================================ */

/* UMA LINHA, e nao duas.

   O `.app` reservava `[1fr, --bar]`, mas a BARRA DE TEMPO nao e filha dele: ela e
   renderizada dentro do `.main`, que ja tem a propria terceira linha para ela. O
   resultado era a linha do meio medindo 904px numa janela de 950, a barra parando em
   904, e 46px de faixa morta abaixo dela — a barra "estourando" para cima do
   conteudo enquanto sobrava vao no rodape.

   Medido antes: `.app` rows `904px 46px`, `.main` 0-904, `.barra` 858-904. */
.app{height:100%;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);}

/* ----------------------------------------------------------------------------
   A sidebar: 248px aberta, 74px recolhida, de topo a base.

   A largura vem de uma custom property e nao de um valor direto porque a
   transicao precisa animar UMA coisa. Animar `width` em duas regras diferentes
   produz dois tempos ligeiramente distintos entre a coluna do grid e o conteudo.
   ---------------------------------------------------------------------------- */
.sb{grid-row:1 / -1;
  --sb-larg:248px;
  width:var(--sb-larg);
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;
  background:var(--c-app);border-right:1px solid var(--c-line);
  padding:9px 10px 10px;gap:3px;
  transition:width .16s ease;}
.sb--rec{--sb-larg:74px}

/* O rotulo some por largura, e nao por display:none: com display o texto sai do
   fluxo de uma vez e a transicao vira um salto. */
.sb-rot{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  opacity:1;transition:opacity .12s ease;}
.sb--rec .sb-rot{opacity:0;width:0;pointer-events:none}

.sb-topo{display:flex;align-items:center;gap:9px;padding:2px 5px 8px;min-width:0}
.sb-logo{width:30px;height:30px;border-radius:var(--r-sm);flex:none;
  background:var(--c-brand);color:var(--c-on-brand);
  display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.02em;}
.sb-marca{font-weight:700;font-size:14px;letter-spacing:-.02em;color:var(--c-ink);
  min-width:0;overflow:hidden;white-space:nowrap;}
.sb--rec .sb-marca{display:none}
/* So existe na gaveta, abaixo de 900px. */
.sb-fechar{display:none}

.sb-novo{display:flex;align-items:center;gap:11px;flex:none;
  height:36px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--c-brand);color:var(--c-on-brand);font-weight:600;font-size:12.5px;}
.sb-novo:hover{background:var(--c-brand-alt)}
.sb--rec .sb-novo{justify-content:center;padding:0}

/* O pane que rola. `minmax(0,1fr)` na linha do grid + `min-height:0` aqui: os dois,
   sempre — e este e o nivel que nao existia antes de a sidebar ir ate a base. */
.sb-rolo{overflow-y:auto;min-height:0;margin-top:6px;scrollbar-width:thin}

.sb-grupo{padding:6px 0}
.sb-grupo + .sb-grupo{border-top:1px solid var(--c-line)}
.sb-grupo-t{font-size:10.5px;font-weight:600;color:var(--c-ink-3);
  letter-spacing:.01em;margin:2px 0 4px;padding:0 12px;}
/* Recolhida, o titulo do grupo some e sobra a divisoria: sem rotulo, um texto de
   10px vira sujeira, mas a separacao ainda informa qual bloco e qual. */
.sb--rec .sb-grupo-t{display:none}
.sb--rec .sb-grupo{padding:8px 0}

.sb-item{display:flex;align-items:center;gap:11px;width:100%;
  padding:8px 12px;border-radius:var(--r-pill);
  color:var(--c-ink-2);font-size:12.5px;min-width:0;}
.sb-item svg{flex:none;color:var(--c-ink-3);transition:color .15s ease}
.sb-item:hover{background:var(--c-sunken);color:var(--c-ink)}
.sb-item:hover svg{color:var(--c-ink)}
.sb-item[aria-current="page"]{background:var(--c-soft);color:var(--c-brand);font-weight:700}
.sb-item[aria-current="page"] svg{color:var(--c-brand)}
.sb-item[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.sb-item[aria-disabled="true"]:hover{background:transparent;color:var(--c-ink-2)}
.sb-item[aria-disabled="true"]:hover svg{color:var(--c-ink-3)}
.sb--rec .sb-item{justify-content:center;padding-left:0;padding-right:0}

.sb-breve{margin-left:auto;font-size:10px;color:var(--c-ink-3);
  border:1px solid var(--c-line);border-radius:var(--r-pill);padding:0 6px;flex:none;}
.sb--rec .sb-breve{display:none}

/* ---- o rodape: card do usuario e o botao de recolher --------------------- */
.sb-pe{border-top:1px solid var(--c-line);padding-top:8px;display:grid;gap:3px}

.sb-conta{position:relative}
.sb-conta > summary{display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:var(--r-pill);cursor:pointer;list-style:none;min-width:0;}
.sb-conta > summary::-webkit-details-marker{display:none}
.sb-conta > summary:hover{background:var(--c-sunken)}
.sb-conta[open] > summary{background:var(--c-sunken)}
.sb-conta .sb-rot{display:grid;line-height:1.3}
.sb-conta .sb-rot b{font-size:12.5px;font-weight:600;color:var(--c-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-conta .sb-rot em{font-size:11px;font-style:normal;color:var(--c-ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb--rec .sb-conta > summary{justify-content:center;padding-left:0;padding-right:0}

/* Sobe a partir do rodape. `bottom:100%` e nao `top:100%`: o card ja esta na base
   da tela, e um menu que desce sai da viewport. */
.sb-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:70;
  min-width:230px;padding:5px;
  background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r);box-shadow:var(--sh-pop);}
.sb--rec .sb-menu{left:0;min-width:240px}
.sb-menu-cab{display:grid;padding:7px 10px 8px;margin:0 0 4px;
  border-bottom:1px solid var(--c-line);line-height:1.35;}
.sb-menu-cab b{font-size:12.5px;color:var(--c-ink)}
.sb-menu-cab em{font-size:11px;font-style:normal;color:var(--c-ink-3)}
.sb-menu-i{display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 10px;border-radius:var(--r-sm);
  color:var(--c-ink-2);font-size:12.5px;text-align:left;background:none;border:0;cursor:pointer;}
.sb-menu-i:hover{background:var(--c-sunken);color:var(--c-ink)}
.sb-menu-i svg{flex:none;color:var(--c-ink-3)}
.sb-menu-i--sair{color:var(--c-bad)}
.sb-menu-i--sair svg{color:var(--c-bad);transform:rotate(180deg)}
.sb-menu-i--sair:hover{background:var(--c-bad-bg);color:var(--c-bad)}

.sb-recolher button{display:flex;align-items:center;gap:11px;width:100%;
  padding:7px 12px;border-radius:var(--r-pill);
  color:var(--c-ink-3);font-size:12px;background:none;border:0;cursor:pointer;}
.sb-recolher button:hover{background:var(--c-sunken);color:var(--c-ink)}
.sb--rec .sb-recolher button{justify-content:center;padding-left:0;padding-right:0}

/* A cortina da gaveta. Só existe abaixo de 900px. */
.sb-cortina{display:none}

/* ----------------------------------------------------------------------------
   A coluna de conteudo
   ---------------------------------------------------------------------------- */
/* A COLUNA precisa de minmax(0,1fr) tanto quanto as linhas. Sem ela a coluna
   implicita e `auto`, que e max-content: a topbar cheia empurrava o track para
   1091px dentro de um .main de 872px, e a pagina inteira transbordava na
   horizontal a partir de 1120. min-width:0 no proprio .main nao resolve -- quem
   estoura e a FAIXA de dentro dele. Secao 9.3: em todo nivel. */
.main{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--top) minmax(0,1fr) auto;min-width:0;min-height:0}

/* MESMA SUPERFICIE DA SIDEBAR (`--c-app`), e nao a do canvas.

   As duas sao a moldura da aplicacao — a coluna da esquerda e a faixa de cima —,
   e o conteudo e o que fica dentro delas. Com a topbar em `--c-canvas` a moldura
   tinha duas cores e o L que ela forma se partia no canto, como se a faixa de
   cima pertencesse ao conteudo. Agora as duas dividem a superficie e se separam
   do conteudo pela borda, que e o mesmo recurso que a sidebar ja usava a direita.

   Sao tokens nos dois casos, entao o tema escuro acompanha sozinho: `--c-app` e
   #ffffff no claro e #1a171f no escuro. Os textos da topbar usam a rampa
   `--c-ink*`, que e desenhada contra `--c-app` — a sidebar e a prova. */
.top{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;
  border-bottom:1px solid var(--c-line);background:var(--c-app);}
/* Só existe abaixo de 900px, onde a sidebar vira gaveta. */
.top-menu{display:none}
.top-ident{display:flex;align-items:baseline;gap:10px;min-width:0}
.crumb{display:flex;align-items:center;gap:7px;color:var(--c-ink-3);font-size:12.5px;min-width:0}
.crumb a{color:var(--c-ink-2)}
.crumb b{color:var(--c-ink);font-weight:600}
.crumb .sl{color:var(--c-line-2)}
/* O `.top-titulo` SAIU, e o raciocinio que o justificava se contradizia: ele dizia
   "abaixo de 1120 a trilha ja diz o nome da pagina em negrito, e repetir e ruido" —
   e deixava os dois convivendo acima de 1120. A trilha termina no nome da pagina em
   TODA largura, entao repetir era ruido em toda largura.

   O efeito era "Chamados > Novo chamado Novo chamado" em cima de cada tela com mais
   de 1120px, ou seja, praticamente todas. Erro da fase 2, achado ao rever a abertura
   de chamado em 31/08/2026. */

.pager{display:flex;align-items:center;gap:1px;margin-left:4px}
.pager button{width:24px;height:24px;border-radius:var(--r-xs);color:var(--c-ink-3);display:grid;place-items:center}
.pager button:hover{background:var(--c-sunken);color:var(--c-ink)}
.pager span{font-size:12px;color:var(--c-ink-3);padding:0 5px;white-space:nowrap}
.top .grow{flex:1}

/* As acoes da tela, escritas na view e entregues aqui pelo <acoes-da-tela>. */
.top-acoes{display:flex;align-items:center;gap:7px;flex:none}
.top-acoes form{display:contents}

/* Exatamente tres botoes redondos: notificacoes, busca, tema. */
.top-botoes{display:flex;align-items:center;gap:4px;flex:none}
.top-botoes form{display:contents}
.top-btn{width:30px;height:30px;border-radius:var(--r-pill);flex:none;
  color:var(--c-ink-3);display:grid;place-items:center;
  background:none;border:0;cursor:pointer;}
.top-btn:hover{background:var(--c-sunken);color:var(--c-ink)}
.top-btn:disabled{opacity:.38;cursor:not-allowed}
.top-btn:disabled:hover{background:none;color:var(--c-ink-3)}

.ico{width:28px;height:28px;border-radius:var(--r-sm);color:var(--c-ink-3);display:grid;place-items:center;}
.ico:hover{background:var(--c-sunken);color:var(--c-ink)}

.split{display:grid;grid-template-columns:minmax(0,1fr) var(--ficha);min-height:0}
.ficha{overflow-y:auto;min-height:0;border-left:1px solid var(--c-line);background:var(--c-app);}

/* ----------------------------------------------------------------------------
   A barra de tempo: 46px, na coluna de conteudo, nunca sob a sidebar
   ---------------------------------------------------------------------------- */
.barra{display:flex;align-items:center;gap:12px;padding:0 14px;
  height:var(--bar);border-top:1px solid var(--c-line);background:var(--c-app);}
.bplay{width:29px;height:29px;border-radius:var(--r-pill);flex:none;
  border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);
  display:grid;place-items:center;box-shadow:var(--sh-card);}
.bplay:hover{border-color:var(--c-line-2);background:var(--c-sunken)}

/* Correndo: o botao principal veste a marca. Pausado NAO — ele volta ao neutro, porque ali
   ele diz "retomar" e nao "esta rodando". Vestir a marca em pausado faria o estado parecer
   ativo, que e a leitura errada. */
.barra[data-estado="correndo"] .bplay{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-on-brand)}
.barra[data-estado="correndo"] .bplay:hover{background:var(--c-brand-alt);border-color:var(--c-brand-alt)}

/* Os dois botoes juntos, com o mini colado no principal. */
.bacoes{display:flex;align-items:center;gap:5px;flex:none}

/* O mini-botao: menor, sem sombra, e sem preenchimento de estado — ele e a acao
   SECUNDARIA, e competir visualmente com o principal seria mentir sobre a hierarquia. */
.bmini{width:23px;height:23px;border-radius:var(--r-pill);flex:none;
  border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink-2);
  display:grid;place-items:center;}
.bmini:hover{border-color:var(--c-line-2);background:var(--c-sunken);color:var(--c-ink)}
.bt{display:flex;align-items:baseline;gap:10px;min-width:0}

/* O ponto de "está correndo", extraido do `.tmr-dot` do helix. Ele existe porque o relogio
   sozinho nao basta: nos primeiros segundos de um registro a barra mostra 00:00:0x, que a
   um relance nao se distingue de parado.

   `align-self:center` porque `.bt` alinha pela linha de base do texto, e forma geometrica
   nao tem linha de base — sem isso o ponto desce para o pe do numero. */
.bdot{width:7px;height:7px;border-radius:var(--r-pill);flex:none;align-self:center;
  background:var(--c-bad);animation:bate 1.6s ease-in-out infinite}
@keyframes bate{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.78)}}

/* Pausado: ANEL VAZADO, e nao um ponto de outra cor.

   A primeira versao trocava so a cor — --c-warn no lugar de --c-bad — e um teste mediu o
   que o olho nao mede: os dois tokens estao a ΔL* 0,1 no tema claro, luminancia
   praticamente identica. Quem nao separa vermelho de ambar veria o MESMO ponto nos dois
   estados, e a unica diferenca restante seria a pulsacao, que `prefers-reduced-motion`
   desliga. O §9.6 e explicito: identidade nao depende de cor.

   Vazado resolve por FORMA, que sobrevive a daltonismo, a movimento reduzido e a 430px —
   onde o `.bctx` que escreve "Pausado" some pela media query e a forma fica sendo o unico
   sinal. E le certo: cheio esta fluindo, vazado esta parado. */
.bdot--pausado{background:transparent;border:2px solid var(--c-warn);
  width:9px;height:9px;animation:none}

/* Quem pediu menos movimento perde a pulsacao, NAO o ponto: ele e o sinal de estado, e a
   preferencia e sobre animacao. Some-lo transformaria acessibilidade em perda de informacao. */
@media (prefers-reduced-motion:reduce){ .bdot{animation:none} }
.bval{font-size:17px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--c-ink-3);flex:none;}
.barra[data-estado="correndo"] .bval,
.barra[data-estado="pausado"] .bval{color:var(--c-ink)}
.bctx{font-size:12.5px;color:var(--c-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bctx b{color:var(--c-ink);font-weight:600}
.bsep{width:1px;height:19px;background:var(--c-line);flex:none}
.bhoje{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--c-ink-2);white-space:nowrap;flex:none}
.bhoje b{color:var(--c-ink);font-weight:600;font-variant-numeric:tabular-nums}
.bmeter{display:block;width:78px;height:5px;border-radius:var(--r-pill);background:var(--c-sunken);overflow:hidden;flex:none}
.bmeter i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--c-ink-2);transition:width .5s ease}

/* O aviso de lacuna e um LINK para /tempo, onde ela se resolve. Ele veste a cor de
   atencao, e nao a de alarme: lacuna nao e falha, e um buraco a confirmar. */
.bgap{display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:12px;color:var(--c-warn);
  background:var(--c-warn-bg);border:1px solid var(--c-warn-bd);
  border-radius:var(--r-pill);padding:3px 10px;}
.bgap:hover{border-color:var(--c-warn)}
.bgap svg{flex:none}
.barra .grow{flex:1}

.sub{display:flex;align-items:center;gap:8px;padding:0 14px;
  border-bottom:1px solid var(--c-line);background:var(--c-canvas);min-width:0;overflow-x:auto;}
.sub .grow{flex:1}
.blk{display:flex;gap:6px;flex:none}
.build{font-weight:600;font-size:9.5px;letter-spacing:.02em;color:var(--c-ink-3);
  border:1px solid var(--c-line);border-radius:3px;padding:1px 5px;margin-left:8px;white-space:nowrap;}

/* ----------------------------------------------------------------------------
   900px — a sidebar vira gaveta sobreposta

   POR QUE GAVETA E NAO BARRA HORIZONTAL. Ate 27/08 o rail virava uma tira de
   icones rolavel no topo. Com rotulo e tres grupos isso deixa de caber: dezesseis
   itens em pilulas de texto viram uma tira de rolagem horizontal de dois metros,
   e o card do usuario nao tem onde ficar.

   E :target PURO, sem uma linha de JavaScript: o botao do topbar e um link para
   #menu, a cortina e um link para #conteudo. O shell.js so acrescenta fechar no
   Esc. Menu que so abre com script e menu que nao abre.

   AVISO PARA QUEM MEXER AQUI: neste arquivo ja morreu uma regra copiada do mockup
   que escondia os onze itens do rail abaixo de 900px — `.rail .rbtn:not([data-ir])`,
   inerte la e destrutiva aqui. O que no mockup e MECANISMO nao se copia como
   estilo.
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);}

  .sb{position:fixed;top:0;bottom:0;left:0;z-index:70;
    width:284px;--sb-larg:284px;
    transform:translateX(-102%);
    transition:transform .18s ease;
    box-shadow:var(--sh-modal);}
  .sb:target{transform:translateX(0)}
  /* Recolhida perde o sentido na gaveta: ela ja esta sobreposta, e recolher
     deixaria uma tira de icones flutuando sobre o conteudo. */
  .sb--rec{--sb-larg:284px}
  .sb--rec .sb-rot{opacity:1;width:auto}
  .sb--rec .sb-marca,.sb--rec .sb-grupo-t,.sb--rec .sb-breve{display:block}
  .sb--rec .sb-item,.sb--rec .sb-novo,
  .sb--rec .sb-conta > summary,.sb--rec .sb-recolher button{justify-content:flex-start;padding-left:12px;padding-right:12px}
  .sb-recolher{display:none}

  .sb-fechar{display:grid;place-items:center;margin-left:auto;flex:none;
    width:30px;height:30px;border-radius:var(--r-pill);color:var(--c-ink-3);}
  .sb-fechar:hover{background:var(--c-sunken);color:var(--c-ink)}

  .sb-cortina{display:block;position:fixed;inset:0;z-index:69;
    background:rgba(24,20,28,.42);opacity:0;pointer-events:none;
    transition:opacity .18s ease;}
  .sb:target ~ .sb-cortina{opacity:1;pointer-events:auto}

  .top-menu{display:grid;place-items:center;flex:none;
    width:30px;height:30px;margin-left:-4px;
    border-radius:var(--r-pill);color:var(--c-ink-2);}
  .top-menu:hover{background:var(--c-sunken);color:var(--c-ink)}

  .main{grid-template-rows:var(--top) minmax(0,1fr) auto}
  .top{flex-wrap:nowrap;overflow-x:auto}
  .crumb{flex:0 0 auto}
  .crumb a,.crumb .sl,.build{display:none}
  .crumb b{white-space:nowrap}
  .split{grid-template-columns:minmax(0,1fr)}
  .ficha{overflow:visible;border-left:0;border-top:1px solid var(--c-line)}
}

@media (max-width:600px){
  .crumb .hide{display:none}
  .pager span{display:none}
  .bhoje,.bsep,.bgap{display:none}
  .bctx{display:none}
}

/* ----------------------------------------------------------------------------
   Shell da autenticacao — a pagina de antes da sessao.

   Duas colunas: a capa a esquerda, o formulario a direita. Sem rail, sem topbar e
   sem barra de tempo, e isso nao e simplificacao visual: quem nao autenticou nao
   tem escopo para o rail filtrar, nao tem cronometro para a barra ler, e todo item
   de navegacao devolveria 401. Mostrar a moldura da aplicacao antes de haver sessao
   e prometer o que a proxima requisicao nega.

   A coluna do formulario tem largura FIXA e a capa fica com o resto. O contrario —
   as duas em fracao — faria o cartao de login esticar em monitor largo, e campo de
   senha com 600px de largura parece formulario de outra coisa. */
.autent-split{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 468px;overflow:hidden}

.autent{overflow:auto;display:grid;place-items:center;padding:24px 34px;background:var(--c-canvas)}
.autent-caixa{width:100%;max-width:376px}
.autent h1{font-size:15px;font-weight:600;letter-spacing:-.012em}
.autent-sub{font-size:12px;color:var(--c-ink-3);margin-top:4px;line-height:1.45}
.autent-pe{margin-top:13px;font-size:11.5px;color:var(--c-ink-3);line-height:1.5}
.autent-pe a{color:var(--c-brand)}

/* ---- a capa: foto do dia e frase do dia ----------------------------------
   A superficie solida por baixo e o estado normal, nao o de erro: sem chave do
   Unsplash, sem internet, ou com a API fora do ar, e ela que fica — e a frase
   continua legivel porque nunca dependeu da foto. */
.capa{position:relative;overflow:hidden;background:var(--c-sunken);
  display:flex;flex-direction:column;justify-content:flex-end;padding:34px 38px 30px;}
.capa-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Escurecimento LEVE. Era .44, calibrado para o texto ter contraste sozinho — e
     nao tinha: sobre foto branca dava 3,93 e 2,50. Quem garante o piso agora e o
     scrim, que age onde o texto esta; a foto pode voltar a ser vista no resto. */
  filter:brightness(.62) saturate(.94);}

/* O SCRIM, e ele nao e enfeite.

   Escurecer a foto sozinho nao basta: brightness(.44) leva uma foto branca a
   #707070, e sobre #707070 o texto de marca dava 3,93:1 e o credito 2,50:1 —
   reprovam, e reprovam justamente no dia em que a API sorteia uma foto clara.
   Nao da para exigir que a foto do dia seja escura, entao o piso tem que vir de
   uma camada que nao depende dela.

   Isto NAO e o "gradiente sutil" da secao 9.6: aquilo e decoracao sem trabalho.
   Este tem numero — ele e a razao de o contraste da capa ser previsivel, e esta
   conferido em /design-system contra o pior caso. */
.capa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--c-scrim) 0%,var(--c-scrim) 34%,transparent 88%);}

/* z-index porque ::after e gerado como ULTIMO filho: sem isto o scrim pintaria
   por cima do proprio texto que ele existe para tornar legivel. */
.capa-tx{position:relative;z-index:1;max-width:44ch}

.capa-marca{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:12px;font-weight:500;color:var(--c-sobre-midia-2);}
.capa-marca .logo{margin-bottom:0;background:var(--c-sobre-midia);color:var(--c-sobre-midia-marca)}

/* Texto sempre claro, nos dois temas: ele fica sobre a foto, e nao sobre a
   superficie do tema. Trocar de cor no tema claro deixaria branco sobre branco
   nos dias em que a foto sorteada for clara.

   A opacidade saiu de todos os tres. Ela apagava tambem o sublinhado do credito,
   e escondia o valor real da cor atras de uma multiplicacao — o token diz quanto
   e, e da para medir sem abrir o DevTools. */
.capa-frase{font-size:34px;line-height:1.16;font-weight:600;letter-spacing:-.022em;
  color:var(--c-sobre-midia);text-wrap:balance;}
.capa-fonte{margin-top:10px;font-size:12.5px;color:var(--c-sobre-midia-2)}

.capa-credito{position:absolute;right:16px;bottom:12px;z-index:1;
  font-size:10.5px;color:var(--c-sobre-midia-3);}
.capa-credito a{color:inherit;text-decoration:underline}
.capa-credito:hover{color:var(--c-sobre-midia)}

/* O anel de foco da capa NAO pode ser --c-brand.

   O anel global e `outline:2px solid var(--c-brand)`, e no tema claro a marca e
   #4b075c: contra o leito da capa com scrim isso da 1,08:1 — o anel desaparece.
   E ha um focavel ali, o credito do fotografo, que e o primeiro item do Tab na
   pagina de entrada. Quem navega por teclado perderia o cursor logo no comeco.

   Sobre midia o anel e branco, nos dois temas, pelo mesmo motivo do texto. */
.capa :focus-visible{outline-color:var(--c-sobre-midia)}

@media (max-width:1120px){
  .autent-split{grid-template-columns:minmax(0,1fr) 400px}
  .capa-frase{font-size:28px}
}

/* Abaixo disto a capa sai de cena inteira. Espremer a foto numa faixa no topo
   rouba a altura do formulario, que e o que a pessoa veio fazer — e no celular
   com teclado aberto sobra menos da metade da tela. */
@media (max-width:900px){
  .autent-split{grid-template-columns:minmax(0,1fr)}
  .capa{display:none}
  .autent{padding:24px 16px}
}

@media (max-height:560px){
  /* Teclado aberto no celular come metade da altura. Sem isto o cartao centrado
     empurra o campo em foco para fora da tela. */
  .autent{place-items:start center}
}