/**
 * A CASCA — cabecalho de uma linha + barra de escopo em chips.
 *
 * Especificacao: docs/design/sintese/dashboard.html (linhas 66-131 dos estilos,
 * 309-364 da marcacao) e sintese/analitico.html (260-313). As duas telas do
 * prototipo tem cabecalho e barra IDENTICOS — e isso que os torna "a casca", e
 * era a peca que a rodada anterior restilizou em vez de substituir.
 *
 * Racional: docs/design/DECISAO.md secoes 2 (chassi da Direcao 2: escopo unico,
 * facetas com contagem, densidade por remocao de cromo), 4-5 (papeis de cor e
 * linguagem) e 7 (Fase 1 e Fase 3).
 *
 * ## POR QUE ESTA FOLHA E A ULTIMA DA LISTA
 *
 * As regras antigas de `.tab-button` vivem em `analitico.css:21-43` e
 * `responsive.css:148-164`. `analitico.css` e de outro worker nesta rodada e nao
 * podia ser tocado; a marcacao nova mantem a classe `tab-button` porque
 * `main.js:switchTab` e `analitico.js:setupListListeners` casam por ela. Com
 * especificidade empatada (0,1,0 contra 0,1,0), quem vem depois vence — por isso
 * `topbar.css` e carregada por ultimo em `index.html` e por isso as regras de
 * `.tab` aqui repetem, explicitamente, cada propriedade que as antigas setavam
 * (background, border, border-bottom, padding, font-size, font-weight, color).
 * Nao e redundancia: e o mecanismo de vitoria.
 *
 * O que ficou inerte por remocao de marcacao (nao ha o que sobrescrever):
 * `.dashboard-header`, `.header-content`, `.header-left`, `.header-right`,
 * `.header-divider`, `.header-app-name`, `.logo`, `.tabs-navigation`,
 * `.tabs-container`, `.tab-icon`, `.scope-head`, `.scope-body`,
 * `.scope-controls`, `.scope-sel`, `.scope-chip`, `.scope-toggle`. Elas ficam
 * nas folhas de origem como codigo morto — limpa-las e uma passada de faxina
 * separada, que atravessa arquivos de outro worker.
 *
 * ## PALETA
 *
 * Nenhuma cor literal. Tudo em tokens de `main.css`, que ja tem os tres escopos
 * de tema (`:root`, `@media (prefers-color-scheme: dark)` com guarda, e
 * `:root[data-theme="dark"]`) — o interruptor vence a preferencia do SO nos dois
 * sentidos, e as familias de contraste corrigidas na rodada anterior continuam
 * valendo aqui porque sao as mesmas variaveis.
 *
 * Papeis (DECISAO.md secao 4): `--act` (azul ISAC) e EXCLUSIVO de escolha do
 * usuario — chip com filtro, foco, link. O chip sem filtro e cromo neutro
 * (`--rule-2`). O botao primario do cabecalho e TINTA (`--ink`), nao acento:
 * emitir relatorio nao e um recorte.
 */

/* ============================================================================
   1. CABECALHO — uma linha
   ========================================================================= */

.top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--rule-2);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* O wordmark em texto. Saiu o `ISAC_horizontal.png`: um PNG nao le token, era a
   unica peca do cabecalho que nao respondia ao tema, e os 67 px de altura dele
   eram o que ditava a altura da faixa. `ISAC` em 800/17px + o nome do produto em
   Archivo condensada, caixa alta, 10px — a hierarquia por largura de eixo
   variavel que a DECISAO adota (secao 5). */
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  white-space: nowrap;
  flex: 0 0 auto;
}

.brand b {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.brand span {
  font-family: var(--font-primary);
  font-stretch: 80%;
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Navegacao: links de texto, dentro do cabecalho --- */

nav.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 1 auto;
  min-width: 0;
}

nav.tabs::-webkit-scrollbar { display: none; }

/* Cada propriedade aqui existe para vencer `.tab-button` de analitico.css —
   ver o cabecalho desta folha. */
.top .tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.top .tab:hover:not(.active) {
  background: var(--surface-2);
  border-color: var(--rule);
  color: var(--ink);
}

/* A aba corrente e TINTA invertida, nao azul: onde eu estou nao e uma escolha de
   recorte, e um fato da tela. O azul fica reservado ao escopo. */
.top .tab.active {
  background: var(--ink);
  border-color: var(--ink);
  border-bottom-color: var(--ink);
  color: var(--on-ink);
}

/* --- Acoes da direita --- */

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* Usuario + papel, como no prototipo ("Ana Ribeiro · Coordenação de
   Comunicação"). O papel vem do perfil de RBAC (auth.js). */
.top-user {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
  white-space: nowrap;
  min-width: 0;
}

.top-user .user-name {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-user .user-role {
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

.top-actions .btn {
  padding: 7px 13px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: var(--font-semibold);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.top-actions .btn:hover { border-color: var(--ink-3); }

.top-actions .btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.top-actions .btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

.top-actions .btn .caret { font-size: 9px; }

/* --- Menu de emissao --- */

.emit { position: relative; }

.emit-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 232px;
  padding: var(--space-2) 0;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  z-index: 200;
}

.emit-menu[hidden] { display: none; }

.emit-group + .emit-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}

.emit-group > .lbl {
  display: block;
  padding: 2px var(--space-4) 4px;
}

.emit-menu button {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: 6px var(--space-4);
  background: none;
  border: none;
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: var(--font-medium);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.emit-menu button:hover:not(:disabled) { background: var(--sunken); }

/* Formato indisponivel: NAO desaparece e NAO finge funcionar — fica apagado com
   o motivo escrito ao lado. Mesmo principio do "sem periodo anterior
   equivalente" e do "sem linha de base". */
.emit-menu button:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}

.emit-why {
  margin-left: auto;
  font-family: var(--font-numbers);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ============================================================================
   2. BARRA DE ESCOPO — chips numa linha
   ========================================================================= */

/* A barra deixa de ser um cartao flutuante no corpo e passa a ser a SEGUNDA
 * FAIXA DA CASCA, colada ao cabecalho — no prototipo `.scope` e
 * `background: var(--surface)` + `border-bottom`, sem raio e sem margem, logo
 * abaixo de `.top`. Duas bandas contiguas, nao "um cabecalho e um cartao".
 *
 * SEM MARGEM NEGATIVA (defeito corrigido em 2026-08-19; DEV-LOG tem a medicao
 * antes/depois). Ate aqui, `margin: -32px -24px 20px` desfazia o padding do
 * container onde a barra estava montada — e SO FUNCIONAVA enquanto `.container`
 * acompanhasse a janela. Acima de ~1488px de viewport `.container` batia no
 * `max-width` e parava de crescer; a margem negativa continuava alcancando
 * exatamente a borda de `.container` (nunca mais longe que isso), so que essa
 * borda tinha parado de ser a da janela. A 1920px a barra ficava recuada
 * 160px de cada lado; a 2536px, 474px — enquanto o cabecalho, que nunca esteve
 * dentro de `.container`, continuava de ponta a ponta.
 *
 * A correcao nao troca a margem negativa por outra conta — troca de MECANISMO.
 * `.scope` agora e um item da grade de sangria do pai (`#dashboard-content` ou
 * `.analitico-container`; ver `.sangria` em main.css), marcado com
 * `grid-column: 1 / -1`. Essa grade nunca teve `max-width`: ela e quem decide
 * onde fica a coluna de conteudo (`min(--page-max, ...)`), entao `.scope`
 * alcanca a borda real da viewport em QUALQUER largura, nao so ate o container
 * bater no teto. O padding abaixo faz o mesmo papel que antes — alinhar o
 * conteudo da barra com o `.top` e com a coluna de conteudo — so que agora e a
 * UNICA fonte da folga lateral (a margem que cancelava padding de ancestral
 * deixou de existir). `var(--page-gutter)` e o mesmo token que a coluna de
 * conteudo usa (main.css), entao os dois nunca podem desalinhar por engano. */
.scope {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--page-gutter) var(--space-4);
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--rule-2);
  border-radius: 0;
}

/* A LINHA. Oito chips + a contagem em ~1.180 px uteis a 1280.
 *
 * `flex-wrap: wrap` com a contagem como ULTIMO item e `margin-left: auto`: numa
 * tela larga tudo cabe numa linha (a leitura do prototipo); quando nao cabe, o
 * item que desce e a contagem — sozinha e ainda alinhada a direita — em vez de
 * quatro chips descerem com ela. Os chips ficam numa linha nos dois casos.
 *
 * `overflow: visible` e de proposito: os popovers sao filhos absolutos daqui. O
 * prototipo usa `overflow-x: auto` para nunca quebrar a linha, mas isso forca
 * `overflow-y: auto` junto e recortaria todo popover — e um seletor recortado e
 * pior que uma linha que quebra.
 */
.scope-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  min-width: 0;
  overflow: visible;
}

.scope-lbl { flex: 0 0 auto; margin-right: 1px; }

.scope-count {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

.scope-count b { color: var(--ink); font-weight: var(--font-semibold); }
.scope-count .pair { color: var(--ink-3); font-weight: var(--font-regular); }

/* --- O CHIP --- */

.sel-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

/* SEM ESTA LINHA, `wrap.hidden = true` NAO ESCONDE NADA.
   O `display: none` do atributo `hidden` vem da folha do agente de usuario, e
   qualquer `display` de autor — o `inline-flex` logo acima, com especificidade
   de classe — vence. O chip de Revisao ficou 117x27 px na barra com o atributo
   posto, dizendo "Todas 1", e a verificacao que eu tinha escrito
   (`[data-chip-wrap]:not([hidden])`) media o ATRIBUTO, nunca o pixel: ela
   confirmava a bandeira que o proprio codigo acabara de erguer.
   O arquivo ja tinha o mesmo cuidado em `.emit-menu[hidden]` e
   `.scope-pop[hidden]`; faltava aqui. Toda peca com `display` de autor e
   alternada por `hidden` precisa da sua. */
.sel-wrap[hidden] { display: none; }

/* O chip: `.sel` no prototipo. Chave condensada em caixa alta, valor em
   semibold, contagem em mono, chevron. */
.sel {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 236px;
  /* 4px/7px em vez dos 5px/10px do prototipo: sao 8 chips onde o prototipo tem
     5, e os 5 px por chip que isto economiza sao o que faz a linha caber. */
  padding: 4px 7px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.sel:hover:not(:disabled) { border-color: var(--ink-3); }

.sel .k {
  flex: 0 0 auto;
  font-family: var(--font-primary);
  font-stretch: 78%;
  font-weight: var(--font-semibold);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sel .v {
  font-weight: var(--font-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel .c {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--ink-3);
}

.sel .caret { font-size: 8px; color: var(--ink-3); }

/* CHIP COM FILTRO = escolha do usuario = azul (DECISAO.md secao 4: o azul e
   demovido de "cor de tudo" a "cor exclusiva de escolha do usuario"). E o unico
   croma desta faixa, e por isso ele consegue ser visto. */
.sel.on {
  border-color: var(--act);
  color: var(--act);
  background: transparent;
}

.sel.on .k,
.sel.on .c,
.sel.on .caret { color: var(--act); }

.sel.on:hover { background: var(--act-soft); }

/* Uma unica unidade acessivel: nao ha escolha a fazer, o chip sai da familia da
   escolha e vira rotulo. */
.sel:disabled { cursor: default; }
.sel.locked { border-style: dashed; color: var(--ink-2); }

/* "Limpar escopo" no fim da linha: mesma silhueta dos chips, sem chave nem
   contagem — e uma acao sobre a linha, e o lugar dela e o fim dela. */
.sel-clear {
  font-weight: var(--font-semibold);
  font-size: 12px;
  color: var(--ink-2);
}

.sel-clear:disabled {
  color: var(--ink-3);
  border-style: dashed;
  cursor: default;
}

/* O chip de periodo: o gatilho do MonthPicker recebe `className: 'sel'`, entao
   ja nasce com o desenho acima; a chave e injetada dentro dele em scope.js. */
[data-chip-wrap="periodo"] .mp-trigger {
  min-width: 0;
  width: auto;
  justify-content: flex-start;
}

[data-chip-wrap="periodo"] .mp-trigger-text { font-weight: var(--font-semibold); }

/* O chevron do picker e um SVG de 12 px, nao o glifo de 8 px dos outros chips.
   Reduzido para que os oito chips tenham a mesma silhueta. */
[data-chip-wrap="periodo"] .mp-trigger-icon {
  width: 9px;
  height: 9px;
  color: var(--ink-3);
}

[data-chip-wrap="periodo"] .mp-trigger.on {
  border-color: var(--act);
  color: var(--act);
  background: transparent;
}

[data-chip-wrap="periodo"] .mp-trigger.on .k,
[data-chip-wrap="periodo"] .mp-trigger.on .mp-trigger-icon { color: var(--act); }

/* --- O POPOVER DE CADA CHIP --- */

.scope-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 300;
  width: 272px;
  max-width: min(272px, calc(100vw - 24px));
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
}

.scope-pop[hidden] { display: none; }

/* Perto da borda direita da janela, ancora pelo outro lado (scope.js mede). */
.scope-pop.align-right { left: auto; right: 0; }

.pop-search,
.pop-input {
  width: 100%;
  padding: 5px var(--space-2);
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  color: var(--ink);
}

.pop-list {
  max-height: 264px;
  overflow-y: auto;
  margin-top: var(--space-2);
}

/* Sem busca no grupo, a lista nao precisa do respiro de cima. */
.pop-search + .pop-list { margin-top: var(--space-2); }
.scope-pop > .pop-list:first-child { margin-top: 0; }

.pop-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.pop-opt:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }

.pop-opt .pop-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-opt .n {
  margin-left: auto;
  padding-left: var(--space-2);
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
}

/* A opcao escolhida — azul, familia da escolha, coerente com o chip. */
.pop-opt.on {
  color: var(--act);
  font-weight: var(--font-semibold);
}

.pop-opt.on .n { color: var(--act); }

/* Valor que este recorte zerou: apagado, NUNCA removido. Desaparecer esconderia
   a informacao de que ele existe. */
.pop-opt.zero { color: var(--ink-3); }
.pop-opt.zero .n { color: var(--ink-3); }
.pop-opt.zero:disabled { cursor: default; }

.pop-note {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2);
  font-size: 11px;
  color: var(--ink-3);
}

.scope-pop-text .pop-note { margin-top: var(--space-2); }

/* --- O PE DA BARRA: medida e comparacao --- */

/* "Medir por" e "Comparar" nao sao filtros: nao mudam QUAIS registros estao no
   escopo, mudam como se le o que ja esta. Por isso saem da linha de chips (onde
   um controle azul faria o olho ler um filtro inexistente) e ficam aqui,
   embaixo, do lado dos numeros que governam. "Limpar escopo" vem com eles: e
   acao sobre a linha, nao um chip a mais nela.

   Uma linha so, a 1280. Os textos longos (a nota da medida e o motivo da
   comparacao indisponivel) truncam com reticencias e mantem o texto inteiro no
   `title` — a alternativa era uma terceira e uma quarta faixa de cromo. */
.scope-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  row-gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}

.scope-measure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Base maior que a do bloco de comparacao: a nota da medida explica o que os
     dois numeros do toggle significam, e essa e a frase que o usuario le uma vez
     e nunca mais. O motivo da comparacao indisponivel pode truncar antes. */
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
  flex-wrap: nowrap;
}

.scope-measure-note {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scope-cmp-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
}

.scope-foot .scope-cmp-why { flex: 0 1 auto; min-width: 0; }

.scope-foot .sel-clear { flex: 0 0 auto; margin-left: auto; }

/* A nota da faixa vira um item da propria legenda (era um `<p>` embaixo dela).
   O prototipo faz exatamente isso: `.band-legend .note { margin-left: auto }`.
   Aqui ela fica ANTES do par de NSS, que continua sendo a ponta direita. */
.scope-band-legend .scope-band-note {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   3. IMPRESSAO
   ========================================================================= */

/* `components.css` esconde `.tabs-navigation` no papel; esse elemento nao existe
   mais. O papel nao tem navegacao nem botao — mas o RECORTE fica, porque no
   papel a linha de chips e a legenda do que se esta olhando. */
@media print {
  .top,
  .emit-menu,
  .scope-pop,
  .scope-foot,
  .sel-clear {
    display: none !important;
  }

  .scope {
    border: 1px solid #ccc;
    padding: 8px 10px;
  }

  .sel { border-color: #ccc; }
  .sel .caret { display: none; }
}

/* ============================================================================
   4. RESPONSIVO
   ========================================================================= */

/* Cabe menos: o papel do usuario e o sufixo dos botoes saem antes do resto —
   sao os dois textos cuja ausencia nao impede a acao. */
@media (max-width: 1100px) {
  .top { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .top-user .user-role { display: none; }
}

/* A folga lateral de `.scope` ja acompanha `--page-gutter` sozinha (a regra
   base, acima) — `--page-gutter` e quem muda de degrau em responsive.css
   (24px ate aqui, 16px daqui pra baixo, 12px a partir de 768px), e a coluna de
   conteudo usa o MESMO token. So o padding vertical precisa de um ajuste
   proprio aqui: comprime de 12/16 (topo/base) pra 12/12 uniforme — o mesmo
   valor que a regra de 768px ja usava, agora sem repetir. */
@media (max-width: 1024px) {
  .scope {
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 900px) {
  .top-actions .btn-label { display: none; }
  .top-user .user-name { max-width: 12ch; }
}

@media (max-width: 768px) {
  /* A nota da faixa e a da medida deixam de truncar e simplesmente saem: numa
     tela estreita a reticencia nao caberia nem para dizer que ha texto. O
     conteudo continua no `title`. */
  .scope-band-legend .scope-band-note,
  .scope-measure-note { display: none; }

  .scope-count { margin-left: 0; width: 100%; }

  /* `padding-bottom` ja veio do degrau de 1024px (ele se aplica aqui tambem,
     768px e subconjunto de 1024px); `--page-gutter` (12px daqui pra baixo)
     cobre o resto sozinho — nada a redeclarar. */

  .top { padding: var(--space-2) var(--space-3); gap: var(--space-2); }

  /* O nome do produto sai do wordmark: `ISAC` sozinho continua identificando, e
     a navegacao precisa da largura. */
  .brand span { display: none; }

  nav.tabs { order: 3; width: 100%; }

  .top .tab { padding: 5px 10px; font-size: 12.5px; }

  .scope-pop { width: 244px; }
}

@media (max-width: 480px) {
  .top-user { display: none; }
  .sel { max-width: 168px; }
  .scope-row { gap: 5px; }
}