/* O cromo do shell: lateral, barra de menu, toolbar, trilha e barra de status. A T2 monta a
   marcação contra estas classes. */

/* why: **coluna flex, e não grid de duas fileiras.** A moldura existe porque o `100dvh` do shell
   somaria com a altura da faixa de demonstração e empurraria a barra de status para fora da tela.
   A primeira versão resolvia isso com `grid-template-rows: auto 1fr`, e ela dependia de haver
   sempre dois filhos: dispensada a faixa, o shell caía na fileira `auto` e voltava a ser
   dimensionado pelo conteúdo. Medido em 2026-08-11 — com a faixa, lateral de 853px em todas as
   telas; sem a faixa, 368px em Cadastros e 900px no Design System. Uma coluna flex não conta
   filhos: a faixa ocupa o que precisa, o shell fica com o resto, e some a fileira fantasma. */
.page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* why: `min-height: 0` porque item de flex também nasce proibido de encolher abaixo do conteúdo.
   É a mesma licença que `.shell__main` e `.shell__content` precisaram, um nível acima. */
.page > .shell,
.page > .login {
  flex: 1;
  min-height: 0;
}

/* why: **a barra de status para na lateral, e a lateral desce até o rodapé.** A primeira versão a
   fazia irmã do shell, atravessando a largura inteira por baixo da lateral, como o `StatusStrip` do
   head desktop faz numa janela sem coluna à esquerda. Na tela isso quebrava a coluna: a lateral
   terminava no chip e sobrava uma faixa cinza correndo por baixo dela. Pedido por Thiago em
   2026-08-12, a barra virou a última fileira de `.shell__main`, então as duas colunas descem até o
   mesmo rodapé e a página fica alinhada de cima a baixo. */

/* why: `minmax(0, 1fr)` na fileira, e não a fileira implícita `auto`. Uma fileira automática cresce
   com o conteúdo mesmo dentro de um contêiner de altura definida, e era ela que fazia a lateral
   mudar de altura conforme a tela aberta — medido em 2026-08-11: 610px em Cadastros e 3336px no
   Design System, com o chip de sessão 2700px abaixo da dobra. A lateral tem altura fixa porque a
   fileira tem teto, não porque alguém escreveu um número nela. */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.shell__main {
  display: grid;
  /* Trilha, toolbar, conteúdo e barra de status. As duas fileiras `auto` do topo colapsam sozinhas
     quando a tela não preenche a seção, e é assim que a toolbar some numa tela que não a declara,
     sem precisar de uma classe para isso. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  /* why: as duas dimensões, e a altura custou dois defeitos antes de ser escrita. Um item de grid
     nasce com `min-height: auto`, que o proíbe de encolher abaixo do próprio conteúdo — então a
     tela alta esticava a coluna inteira em vez de rolar dentro dela, e `overflow: auto` mais
     abaixo nunca tinha o que rolar. É o `minmax(0, 1fr)` implícito que o CSS Grid não dá de graça,
     nas duas direções. */
  min-width: 0;
  min-height: 0;
  background: var(--backdrop);
}

/* why: `min-height: 0` de novo aqui. A fileira já tem teto, mas o item dentro dela precisa ter
   licença para encolher — sem isso a rolagem volta a ser da página inteira, e a barra de status
   sai da tela junto com o conteúdo. */
.shell__content {
  min-height: 0;
  overflow: auto;
  padding: var(--space-loose);
}

/* why: **a lateral não rola; quem rola é a lista dentro dela.** Com `overflow-y: auto` aqui, o
   menu do chip — que abre para cima a partir do rodapé — estourava a caixa de rolagem, a barra
   aparecia e a lateral saltava a cada abertura. Uma caixa que rola recorta o que sai dela, e o
   menu precisa sair. */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  border-right: 1px solid var(--border);
  min-height: 0;
}

.sidebar__destinations {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* why: **o recuo de cima carrega a trilha que a lateral não tem.** As duas colunas começam na mesma
   altura, mas a da direita gasta uma fileira com a trilha antes da toolbar, e a busca da lateral
   nascia 21px acima do `Ações`, deslocada e sem nada explicando por quê. O recuo soma as duas
   parcelas que separam o topo do shell do primeiro controle da toolbar: a faixa da trilha e o
   respiro de cima da toolbar. As duas são o mesmo token que o outro lado usa, então trocar a escala
   de texto move as duas colunas juntas. */
.sidebar__search {
  padding: calc(var(--chrome-height) + var(--space-tight)) var(--space-snug) var(--space-snug);
}

/* why: um botão que parece campo, e não um `<input>` de verdade. Ele não digita nada — clicar abre
   a paleta, que é onde a busca mora. Um campo real prometeria filtrar a lateral, que é a segunda
   busca que esta tela não deve ter. */
.sidebar__search-field {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  width: 100%;
  min-height: var(--chrome-height);
  padding: var(--space-tight) var(--space-snug);
  border: 1px solid;
  border-color: var(--bevel-shadow-deep) var(--bevel-light) var(--bevel-light)
    var(--bevel-shadow-deep);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar__search-field:hover {
  color: var(--text);
}

/* why: lupa desenhada, e não o caractere de lupa. Mesma lição do farol e dos três pontos — a fonte
   que o sistema resolve não precisa ter o glifo. */
.sidebar__search-glyph {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sidebar__search-hint {
  margin-left: auto;
  padding: 0 var(--space-tight);
  border: 1px solid var(--border);
  font-family: var(--font-code);
  font-size: var(--font-size-small);
}

.sidebar__group {
  margin: var(--space-loose) 0 var(--space-tight);
  padding-inline: var(--space-loose);
  color: var(--text-muted);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* why: `Button` liso e alinhado à esquerda, e não um `ToolStrip` vertical, é a mesma decisão que
   a lateral do desktop tomou: chrome de toolbar num lugar que não é toolbar mente sobre o que a
   superfície faz. */
.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  width: 100%;
  padding: var(--space-tight) var(--space-loose);
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sidebar__item:hover {
  background: var(--surface-band);
}

/* why: o item ativo existe aqui e não existe no head desktop, e a divergência é declarada. O
   browser mostra uma tela por vez; o MDI pode ter três abertas, e marcar uma mentiria sobre as
   outras duas. */
.sidebar__item.active {
  background: var(--selection);
  border-color: var(--border);
  font-weight: 600;
}

/* O chip de sessão é a única superfície não-navegacional da lateral: operador, tema, Sobre e
   Desconectar. Ele ancora no rodapé mesmo com a lista curta. */
.sidebar__session {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-snug);
  border-top: 1px solid var(--border);
}

/* why: o menu do chip abre para cima. Ele mora no rodapé da lateral, e um menu que descesse
   nasceria fora da janela — o Win32 vira a direção pelo mesmo motivo. */
.menu--session {
  bottom: 100%;
  left: var(--space-snug);
  right: var(--space-snug);
  min-width: 0;
}

.session-chip {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  width: 100%;
  padding: var(--space-snug);
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.session-chip:hover {
  background: var(--surface-band);
  border-color: var(--border);
}

/* why: silhueta e nome de acesso, sem e-mail. `User` não tem esse campo, e inventar um para
   espelhar a referência web seria a tela prometendo dado que o domínio não guarda. */
.session-chip__avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-contrast);
}

.operator-avatar {
  width: 18px;
  height: 18px;
}

/* why: um degrau abaixo do texto do shell, porque o nome de acesso é um e-mail e a lateral tem
   208px. No tamanho comum `exemplo@thiagocaja.dev` era elidido no meio do domínio, e um nome de
   acesso cortado não identifica quem está conectado. A elisão continua declarada para o nome que
   for maior que este, com o `title` devolvendo o texto inteiro. */
.session-chip__username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-small);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  min-height: var(--chrome-height);
  padding: var(--space-tight) var(--space-snug);
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
}

.toolbar__separator {
  width: 1px;
  align-self: stretch;
  margin-inline: var(--space-tight);
  background: var(--bevel-shadow);
  border-right: 1px solid var(--bevel-light);
}

.toolbar__spacer {
  flex: 1;
}

/* why: o `.menu` da skin é `position: absolute` e cai no canto da página sem um ancestral
   posicionado. A âncora dá esse ancestral só ao botão `Ações`, em vez de posicionar a toolbar
   inteira e arrastar junto os outros filhos dela.
   why: nasceu com escopo de tela na T7 e subiu para cá na T8, quando ganhou o segundo consumidor.
   Ela é cromo de toolbar como `.toolbar__separator` e `.toolbar__spacer` — o que a T7 sabia era
   só que ainda havia uma tela. */
.toolbar__actions {
  position: relative;
  display: flex;
}

.toolbar__actions-menu {
  top: 100%;
  left: 0;
}

/* why: `Menu / <tela>` em vez de um título repetido. O shell não tem abas nem MDI para mostrar
   onde a pessoa está, e a trilha é o que sobra quando a janela é uma só. */
/* why: a altura é declarada, e não deixada por conta do texto. A busca da lateral se alinha com a
   linha do `Ações` somando esta faixa ao próprio recuo, e um valor que muda com o tamanho da fonte
   desalinharia as duas colunas na primeira troca de escala. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  min-height: var(--chrome-height);
  padding: var(--space-tight) var(--space-snug);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.breadcrumb__current {
  color: var(--text);
  font-weight: 600;
}

/* why: a barra de status virou barra de mensagem quando o chip tomou operador e cor para si.
   Duas superfícies afirmando o mesmo estado divergem no dia em que uma delas for esquecida. */
.status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-hairline);
  min-height: var(--chrome-height);
  padding: var(--space-hairline);
  background: var(--chrome);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-small);
}

.status-bar__field {
  padding: var(--space-hairline) var(--space-snug);
  border: 1px solid;
  border-color: var(--bevel-shadow) var(--bevel-light) var(--bevel-light) var(--bevel-shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-bar__field--message {
  flex: 1;
  min-width: 0;
}

/* why: a faixa de demonstração não é feedback semântico, é aviso permanente sobre o que a página
   é. Ela usa o âmbar do farol porque nada se perdeu e nada está degradado — só há um fato que o
   visitante precisa saber antes de julgar o que vê. */
.demo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  padding: var(--space-snug) var(--space-loose);
  background: var(--surface-band);
  border-bottom: 2px solid var(--status-open);
}

.demo-banner__text {
  flex: 1;
  margin: 0;
  max-width: none;
}

/* why: o Win32 não tem celular, e este é um portfólio público que vai abrir em telefone. A
   fidelidade cede aqui pelo mesmo critério de sempre: a lateral empilha acima do conteúdo em vez
   de espremer a grade contra 208px que a tela não tem. */
@media (max-width: 640px) {
  .page {
    height: auto;
    min-height: 100dvh;
  }

  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* why: no telefone a lista para de rolar por conta própria — a lateral empilha acima do
     conteúdo e a página inteira é que rola. Uma caixa de rolagem aninhada aqui daria duas barras
     concorrentes na mesma direção. */
  .sidebar__destinations {
    overflow-y: visible;
  }
}