/*
 * Tokens e componentes base.
 *
 * Cumpre o contrato de docs/ux/62-DESIGN-SYSTEM.md §2 sem construir biblioteca
 * visual prematuramente: os tokens existem, os componentes nascem conforme a
 * necessidade real.
 *
 * Sem pipeline de build por opção — a D-001 escolheu Blade + Livewire
 * justamente para não carregar uma segunda cadeia de ferramentas.
 */

:root {
  /* cor — papéis, não nomes de cor */
  --bg: #F4F6F5;
  --surface: #FFFFFF;
  --surface-sunk: #EDF1EF;
  --ink: #141C1A;
  --ink-2: #3D4B47;
  --muted: #5A6B66;
  --rule: #DCE4E1;
  --rule-strong: #7E8D87;

  --surface-2: #EDF1EF;

  --brand: #0A7A64;
  --brand-ink: #FFFFFF;
  --brand-strong: #075343;
  --brand-soft: #E2F0EC;

  /* status — cor NUNCA sozinha; sempre com texto (62 §4) */
  --ok: #0A7A64;
  --ok-soft: #E2F0EC;
  --warn: #8A6412;
  --warn-soft: #F6EEDA;
  --danger: #A32E1B;
  --danger-soft: #F7E3DF;

  --focus: #0A7A64;

  /* espaçamento */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;

  --radius: 6px;
  --radius-sm: 4px;

  /* tipografia — escala fechada (62 §2)
     Ancorada em 15px de corpo, densidade operacional. Não criar tamanho
     fora desta escala: a medição de 02/09 encontrou 39 tamanhos distintos
     em 137 declarações, catorze deles entre 0.65rem e 0.85rem. */
  --text-2xs: 0.6875rem;  /* 11px — microrrótulo, chip de evidência */
  --text-xs: 0.75rem;     /* 12px — texto secundário, meta de tabela */
  --text-sm: 0.8125rem;   /* 13px — corpo denso, célula de tabela */
  --text-base: 0.9375rem; /* 15px — corpo */
  --text-md: 1.0625rem;   /* 17px — ênfase, título de cartão */
  --text-lg: 1.25rem;     /* 20px — título de seção, número de KPI */
  --text-xl: 1.5rem;      /* 24px — título de página */
  /* Figura heroi: o unico numero que um painel lidera. Uma por tela.
     Fora da progressao porque nao e' um degrau de texto — e' um objeto. */
  --text-display: 3rem;   /* 48px */

  /* peso — quatro degraus; 550/650/750/850 são ruído, não hierarquia */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* elevação — hoje a plataforma tem uma unica superficie flutuante,
     o painel lateral. Nao inventar uma escala de tres sombras antes
     de existir a segunda: o cabecalho deste arquivo pede tokens, nao
     biblioteca antecipada. */
  --shadow-overlay: -.75rem 0 2rem rgb(20 28 26 / .18);

  /* breakpoints — custom property não funciona dentro de @media, então o
     contrato vive aqui e os valores literais devem ser exatamente estes
     tres. Sao max-width: a regra descreve o que acontece ao estreitar.

       60rem  reduz grid largo a duas colunas
       52rem  desfaz o lado a lado; grid de duas colunas persiste
       44rem  coluna unica, controles em largura total

     Medicao de 02/09: sete valores em uso (32, 40, 44, 46, 52, 60, 64rem
     e um 760px), tres deles na mesma faixa. Os 52rem nao sao ruido: nos
     blocos de indice de remessa e de operacao, 52 e 44 agem em serie
     sobre os mesmos seletores, formando cascata deliberada. */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Entradas para e-commerce: produto como unidade de trabalho.

   O bloco é isolado pela raiz da fila para substituir apenas sua apresentação
   sem alterar os estilos históricos usados por outras telas. A origem acompanha
   cada valor e as lacunas reutilizam o mesmo âmbar da conferência.
---------------------------------------------------------------------------- */
.topbar-mentions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-mentions:hover { border-color: var(--brand); background: var(--brand-soft); }
.topbar-mentions strong {
  display: inline-grid;
  min-width: 1.35rem;
  min-height: 1.35rem;
  place-items: center;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--surface);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.page:has(.ecommerce-handoff-queue) { max-width: 90rem; }
.ecommerce-handoff-queue { display: grid; gap: var(--s-4); }
.ecommerce-handoff-head { margin-bottom: 0; }
.ecommerce-handoff-head h1 { margin-top: var(--s-1); }
.ecommerce-handoff-head p { max-width: 48rem; }
.ecommerce-handoff-local-note { margin: 0; }
.ecommerce-handoff-queue .ecommerce-handoff-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ecommerce-handoff-queue .ecommerce-handoff-summary .activity-metric-wide { grid-column: auto; }

.ecommerce-handoff-mentions {
  display: grid;
  grid-template-columns: minmax(14rem, .55fr) minmax(20rem, 1.45fr);
  gap: var(--s-4);
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
}
.ecommerce-handoff-mentions h2 { margin: var(--s-1) 0 0; }
.ecommerce-handoff-queue .ecommerce-handoff-mentions ul { margin: 0; }
.ecommerce-handoff-queue .ecommerce-handoff-mentions li {
  justify-content: space-between;
  border-left: 0;
  padding: var(--s-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 24%, transparent);
}
.ecommerce-handoff-queue .ecommerce-handoff-mentions li:last-child { border-bottom: 0; }
.ecommerce-handoff-queue .ecommerce-handoff-mentions li > div { display: flex; gap: var(--s-1); }

.ecommerce-handoff-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 12rem;
  padding: var(--s-6);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--rule));
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34%),
    var(--surface);
}
.ecommerce-handoff-empty h2 { margin: var(--s-1) 0; }
.ecommerce-handoff-empty p { max-width: 52rem; margin-bottom: 0; color: var(--ink-2); }
.ecommerce-handoff-empty > .btn { flex: none; }

.ecommerce-handoff-queue .ecommerce-handoff-list { gap: var(--s-3); }
.eh {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--rule-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
}
.eh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
}
.eh-head h2 { margin: var(--s-1) 0; font-size: var(--text-lg); }
.eh-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}
.eh-marks { color: var(--muted); font-size: var(--text-xs); }
.eh-marks ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.eh-marks li {
  display: inline-flex;
  gap: var(--s-1);
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.eh-marks time { color: var(--muted); }

.eh-facts,
.ecommerce-handoff-operation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.eh-facts > p,
.ecommerce-handoff-operation > section {
  min-width: 0;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--rule);
}
.eh-facts > p:last-child,
.ecommerce-handoff-operation > section:last-child { border-right: 0; }
.eh-facts > p { background: var(--surface-sunk); }
.eh-facts > p.is-pending { box-shadow: inset 0 3px 0 var(--warn); }
.eh-facts span,
.ecommerce-handoff-operation > section > span {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eh-facts strong,
.ecommerce-handoff-operation strong { display: block; overflow-wrap: anywhere; }
.eh-facts small,
.ecommerce-handoff-operation small { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); overflow-wrap: anywhere; }

.eh-photo { display: flex; align-items: center; gap: var(--s-3); }
.eh-photo img,
.eh-photo-empty {
  width: 4.25rem;
  aspect-ratio: 1;
  flex: 0 0 4.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  object-fit: cover;
}
.eh-photo-empty { display: grid; place-items: center; color: var(--muted); }
.eh-photo-copy { min-width: 0; }
.eh-photo-copy > span { margin-bottom: var(--s-1); }

.eh-brief {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.35fr 1.45fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-xs);
}
.eh-brief > span { min-width: 0; }
.eh-brief strong { color: var(--ink); }
.eh-brief small { display: block; margin-top: var(--s-1); color: var(--muted); }
.eh-gaps { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.eh-gaps .bling-grid-tally { font-size: var(--text-2xs); }
.eh-brief .eh-lost {
  grid-column: 1 / -1;
  padding-left: var(--s-2);
  border-left: 3px solid var(--warn);
  color: var(--warn);
}
.eh > .eh-actions {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.ecommerce-handoff-operation > section { min-height: 8rem; }
.ecommerce-handoff-operation a { display: inline-block; margin-top: var(--s-2); font-size: var(--text-xs); }
.ecommerce-handoff-gap-labels { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.ecommerce-handoff-gap-labels .bling-grid-tally { font-size: var(--text-2xs); }
.ecommerce-handoff-pagination { margin-top: var(--s-2); }

.ecommerce-handoff-thread-panel {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-top: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
}
.ecommerce-handoff-thread-panel .section-head { margin-bottom: 0; }
.ecommerce-handoff-thread-panel h3 { margin: var(--s-1) 0 0; }
.ecommerce-handoff-known-pending {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.ecommerce-handoff-known-pending > div { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ecommerce-handoff-known-pending small { color: var(--muted); }
.ecommerce-handoff-thread-mention { display: block; margin-top: var(--s-1); color: var(--muted); }
.ecommerce-handoff-composer { max-width: 58rem; }

@media (max-width: 72rem) {
  .ecommerce-handoff-queue .ecommerce-handoff-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eh-facts,
  .ecommerce-handoff-operation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh-facts > p:nth-child(2),
  .ecommerce-handoff-operation > section:nth-child(2) { border-right: 0; }
  .eh-facts > p:nth-child(n + 3),
  .ecommerce-handoff-operation > section:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .eh-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .ecommerce-handoff-queue .ecommerce-handoff-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh-head,
  .ecommerce-handoff-empty { align-items: stretch; flex-direction: column; }
  .eh-actions { justify-content: flex-start; }
  .ecommerce-handoff-mentions { grid-template-columns: 1fr; }
  .eh-brief { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  .ecommerce-handoff-queue .ecommerce-handoff-summary { grid-template-columns: 1fr; }
  .eh-facts,
  .ecommerce-handoff-operation { grid-template-columns: 1fr; }
  .eh-facts > p,
  .ecommerce-handoff-operation > section { border-right: 0; border-top: 1px solid var(--rule); }
  .eh-facts > p:first-child,
  .ecommerce-handoff-operation > section:first-child { border-top: 0; }
  .topbar-mentions span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html:has(.review-product-drawer),
body:has(.review-product-drawer) { overflow: hidden; }

a { color: var(--brand); transition: color .12s ease; }
a:hover { color: var(--brand-strong); }

/* foco visível sempre — 61-ACCESSIBILITY-WCAG22 */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- estrutura ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand { font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.brand small {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/*
 * Navegacao de secoes.
 *
 * Sao ate onze secoes conforme a permissao de quem entra, e elas nao
 * cabem confortavelmente numa linha. A faixa rola no proprio eixo em vez
 * de quebrar em duas alturas: barra de altura variavel desloca o conteudo
 * da pagina a cada troca de tela.
 *
 * O item atual e' marcado por aria-current no Blade. Aqui ele ganha peso,
 * cor e fundo — tres sinais, porque cor sozinha nao comunica estado.
 */
.topnav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.topnav-grupo {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  align-content: center;
  align-items: center;
  column-gap: var(--s-1);
  row-gap: 0;
}
.topnav-grupo + .topnav-grupo {
  padding-left: var(--s-2);
  border-left: 1px solid var(--rule);
}
.topnav-grupo-rot {
  flex: 1 0 100%;
  padding-inline: var(--s-2);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.topnav a {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.topnav a:hover { background: var(--surface-sunk); color: var(--ink); }
.topnav a[aria-current] {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: var(--fw-semibold);
}

.topbar-user {
  flex: none;
  font-size: var(--text-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.topbar-user form { margin: 0; }

.page { max-width: 60rem; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7); }

/*
 * 60rem e' largura de leitura, certa para formulario e texto corrido.
 * Ela aperta as telas que existem para comparar em paralelo: dentro dela,
 * os tres cartoes de palete lado a lado ficam com cerca de 19rem cada, e
 * os quatro indicadores da remessa com 14rem. O estudo desenhou ambas em
 * 1440px.
 *
 * A largura passa a ser propriedade da tela, nao do layout: so quem
 * compara em paralelo pede `page-dense`. As demais continuam em 60rem,
 * porque esticar linha de texto nao melhora leitura nenhuma.
 */
.page-dense { max-width: 82rem; }

.page-head { margin-bottom: var(--s-5); }
h1 { font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; margin: 0 0 var(--s-2); }
h2 { font-size: var(--text-md); font-weight: var(--fw-semibold); margin: 0 0 var(--s-3); }
.page-head p { color: var(--muted); margin: 0; max-width: 62ch; }

/* ---------- cartão ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.card + .card { margin-top: var(--s-4); }

/* ---------- formulário ---------- */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: var(--fw-medium); font-size: var(--text-sm); margin-bottom: var(--s-2); }
.field .hint { font-size: var(--text-sm); color: var(--muted); margin: calc(-1 * var(--s-1)) 0 var(--s-2); }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=file], select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
}
input::placeholder { color: var(--muted); opacity: 0.7; }

.field-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--s-2); }
input[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  background: var(--brand);
  color: var(--brand-ink);
}
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet { background: transparent; color: var(--brand); padding-inline: 0; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-link-danger { color: var(--danger); }

/*
 * Resposta ao ponteiro.
 *
 * O hover era `filter: brightness(.94)` aplicado a todas as variantes de
 * uma vez. Um filtro unico nao serve superficies diferentes: sobre o
 * secundario, que e' branco, produzia cinza sujo; sobre o discreto, que
 * e' transparente, nao produzia quase nada. Cada variante passa a
 * escurecer na propria cor.
 *
 * `:not([disabled])` porque botao desabilitado nao pode responder ao
 * ponteiro: sugerir acao onde nao ha e' pior do que nao responder.
 *
 * A duracao e' curta de proposito. Isto e' ferramenta operacional, nao
 * vitrine: a transicao existe para confirmar que o alvo foi atingido,
 * nao para ser percebida. A regra de prefers-reduced-motion ja desliga
 * tudo isto.
 */
.btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.btn:not([disabled]):hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-secondary:not([disabled]):hover { background: var(--surface-sunk); border-color: var(--ink-2); color: var(--ink); }
.btn-quiet:not([disabled]):hover { background: transparent; border-color: transparent; color: var(--brand-strong); }
.btn-danger:not([disabled]):hover {
  background: color-mix(in srgb, var(--danger) 86%, var(--ink));
  border-color: color-mix(in srgb, var(--danger) 86%, var(--ink));
}
.btn-link-danger:not([disabled]):hover { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--danger) 86%, var(--ink)); }

/* ---------- status: cor + texto, nunca cor sozinha (62 §4) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-ok { background: var(--ok-soft); color: var(--ok); }
.status-warn,
.status-warning { background: var(--warn-soft); color: var(--warn); }
.status-danger { background: var(--danger-soft); color: var(--danger); }
.status-idle { background: var(--surface-sunk); color: var(--muted); }

/* ---------- avisos ---------- */
.alert {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--s-4);
  font-size: var(--text-base);
  margin-bottom: var(--s-4);
}
.alert-danger { border-left-color: var(--danger); }
/* `warning` é a grafia usada em 7 pontos das telas; vale enquanto elas não
   normalizam para `warn`. Sem isto o aviso renderiza sem cor nenhuma. */
.alert-warn,
.alert-warning { border-left-color: var(--warn); }
.alert-ok { border-left-color: var(--ok); }
.alert strong { display: block; margin-bottom: var(--s-1); }

/* ---------- lista de contas ---------- */
.account-list { list-style: none; padding: 0; margin: 0; }
.account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.account:last-child { border-bottom: 0; padding-bottom: 0; }
.account-name { font-weight: var(--fw-medium); }
.account-meta { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.account-actions { display: flex; align-items: center; gap: var(--s-3); }
.account-actions-expanded { flex-basis: 100%; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Quem tem acesso: RBAC explicado como telas e trabalho, não como siglas.

   A matriz é uma projeção das permissões reais. Cor nunca trabalha sozinha:
   cada estado conserva o rótulo opera, só lê ou não vê.
---------------------------------------------------------------------------- */
.page:has(.user-access-dashboard) { max-width: 92rem; }
.user-access-dashboard { display: grid; gap: var(--s-5); }
.user-access-dashboard > *,
.user-role-matrix .table-scroll { min-width: 0; max-width: 100%; }
.user-access-hero {
  display: grid;
  gap: var(--s-5);
  overflow: visible;
  padding: var(--s-6);
  background:
    radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 30%),
    var(--surface);
}
.user-access-head,
.user-access-section-heading,
.user-member-head,
.user-member-role,
.user-member-foot,
.user-invitations li,
.user-invitation-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.user-access-head > div:first-child { min-width: 0; }
.user-access-head h1 { margin-top: var(--s-1); }
.user-access-head p { max-width: 52rem; margin: 0; color: var(--muted); }

.user-invite { position: relative; flex: none; }
.user-invite > summary { list-style: none; }
.user-invite > summary::-webkit-details-marker { display: none; }
.user-invite[open] > summary { background: var(--brand-strong); }
.user-invite > form {
  position: absolute;
  z-index: 4;
  top: calc(100% + var(--s-2));
  right: 0;
  width: min(30rem, calc(100vw - 2 * var(--s-5)));
  padding: var(--s-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 .75rem 2rem rgb(20 28 26 / .16);
}
.user-invite-copy { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.user-invite-copy span { color: var(--muted); font-size: var(--text-sm); }
.user-invite .field .hint { margin: var(--s-1) 0 0; }

.user-access-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
.user-access-pulse p { margin: 0; padding: var(--s-4); border-right: 1px solid var(--rule); }
.user-access-pulse p:first-child { padding-left: 0; }
.user-access-pulse p:last-child { border-right: 0; }
.user-access-pulse strong { display: block; font-size: var(--text-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.user-access-pulse span { display: block; margin-top: var(--s-2); color: var(--muted); font-size: var(--text-xs); }
.user-access-security-note { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-2); }
.user-access-security-note > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: var(--fw-bold);
}
.user-access-security-note p { margin: 0; font-size: var(--text-sm); }
.user-access-security-note strong { color: var(--ink); }

.user-access-section-heading { align-items: flex-end; margin-bottom: var(--s-3); }
.user-access-section-heading h2 { margin: var(--s-1) 0 0; font-size: var(--text-lg); }
.user-access-section-heading > p { max-width: 34rem; margin: 0; color: var(--muted); font-size: var(--text-sm); text-align: right; }
.user-member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.user-member-card { display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: var(--s-3); margin: 0; padding: var(--s-4); }
.user-member-card.is-suspended { background: var(--surface-sunk); }
.user-member-head { align-items: center; }
.user-member-avatar {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--surface);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.user-member-head > div { min-width: 0; margin-right: auto; }
.user-member-head h3 { margin: 0; font-size: var(--text-md); }
.user-member-head p { overflow: hidden; margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.user-member-role { align-items: flex-end; padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.user-member-role > div { display: grid; gap: var(--s-1); }
.user-member-role > div > span { font-weight: var(--fw-semibold); }
.user-member-role small { color: var(--brand-strong); font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.user-member-role p { flex: none; margin: 0; text-align: right; }
.user-member-role p strong { font-size: var(--text-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.user-member-role p span { color: var(--muted); font-size: var(--text-xs); }
.user-access-meter { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--surface-sunk); }
.user-access-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.is-suspended .user-access-meter > span { background: var(--warn); }
.user-member-description { min-height: 3.9rem; margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.user-capability-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.user-capability-list li {
  padding: .18rem .48rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
}
.user-member-foot { padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--text-xs); }
.user-member-controls { border-top: 1px dashed var(--rule-strong); padding-top: var(--s-2); }
.user-member-controls > summary { cursor: pointer; color: var(--brand-strong); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.user-member-controls > div { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.user-member-controls form:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: end; }
.user-member-controls label { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: var(--fw-medium); }

.user-role-matrix { padding: var(--s-5); }
.user-matrix-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.user-matrix-legend span,
.user-access-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.user-matrix-legend span { padding: .18rem .5rem; }
.user-access-cell::before,
.user-matrix-legend span::before { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; content: ""; }
.user-access-cell.is-edit,
.user-matrix-legend .is-edit { color: var(--brand-strong); }
.user-access-cell.is-read,
.user-matrix-legend .is-read { color: #315F7D; }
.user-access-cell.is-none,
.user-matrix-legend .is-none { color: var(--muted); }
.user-role-matrix table { min-width: 70rem; }
.user-role-matrix thead th:not(:first-child),
.user-role-matrix td { text-align: center; }
.user-role-matrix thead th { vertical-align: bottom; text-transform: none; }
.user-role-matrix thead th small { display: block; margin-top: var(--s-1); color: var(--brand-strong); font-size: var(--text-2xs); }
.user-role-matrix tbody th span,
.user-role-matrix tbody th small { display: block; }
.user-role-matrix tbody th small { color: var(--muted); font-size: var(--text-2xs); font-weight: var(--fw-regular); }
.user-role-matrix tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-sunk) 55%, transparent); }

.user-invitations ul { margin: 0; padding: 0; list-style: none; }
.user-invitations li { align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.user-invitations li:last-child { padding-bottom: 0; border-bottom: 0; }
.user-invitations li > div:first-child { display: grid; gap: var(--s-1); }
.user-invitations li span,
.user-invitations-empty { color: var(--muted); font-size: var(--text-sm); }
.user-invitations-empty { margin: 0; }
.user-invitation-actions { align-items: center; }
.user-invitation-actions form { margin: 0; }

@media (max-width: 70rem) {
  .user-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .user-access-head,
  .user-access-section-heading { align-items: stretch; flex-direction: column; }
  .user-access-section-heading > p { text-align: left; }
  .user-invite { align-self: flex-start; }
  .user-invite > form { right: auto; left: 0; }
  .user-access-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-access-pulse p:nth-child(2) { border-right: 0; }
  .user-access-pulse p:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .user-access-pulse p:nth-child(3) { padding-left: 0; }
  .user-member-grid { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  .user-access-hero { padding: var(--s-4); }
  .user-access-pulse { grid-template-columns: 1fr; }
  .user-access-pulse p,
  .user-access-pulse p:first-child,
  .user-access-pulse p:nth-child(3) { padding-inline: 0; border-top: 1px solid var(--rule); border-right: 0; }
  .user-access-pulse p:first-child { border-top: 0; }
  .user-member-head { flex-wrap: wrap; }
  .user-member-head .status { margin-left: calc(2.65rem + var(--s-4)); }
  .user-member-controls form:first-child { grid-template-columns: 1fr; }
  .user-member-controls label { grid-column: auto; }
  .user-invitations li { align-items: stretch; flex-direction: column; }
}

/* ---------- estado vazio (60 §4) ---------- */
.empty { text-align: center; padding: var(--s-6) var(--s-4); color: var(--muted); }
.empty h2 { color: var(--ink); }
.empty p { max-width: 44ch; margin: 0 auto var(--s-4); }

/* ---------- atividade da operação ---------- */
.page:has(.activity-lanes) { max-width: 96rem; }
.activity-page-head,
.activity-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.activity-page-head > div { min-width: 0; }
.activity-page-head h1 { margin-top: var(--s-1); }
.activity-page-head p { max-width: 52rem; }
.activity-head-status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.activity-head-status small { color: var(--muted); font-size: var(--text-xs); }
.activity-kicker {
  display: block;
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.activity-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--rule);
}
.activity-principles p {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.activity-principles strong { color: var(--ink); }
.activity-filter-card {
  display: grid;
  grid-template-columns: minmax(10rem, .45fr) minmax(0, 1.55fr);
  gap: var(--s-5);
  align-items: end;
}
.activity-filter-card h2 { margin: var(--s-1) 0 0; }
.activity-section-heading { margin-bottom: var(--s-4); }
.activity-section-heading p,
.activity-muted { margin: 0; color: var(--muted); }
.activity-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto;
  gap: var(--s-3);
  align-items: end;
}
.activity-filters .field { margin-bottom: 0; }
.activity-filter-actions { display: flex; gap: var(--s-2); flex-wrap: nowrap; }
.activity-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-4) 0;
}
.activity-lane {
  --activity-lane: var(--brand);
  --activity-lane-soft: var(--brand-soft);
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--activity-lane) 26%, var(--rule));
  border-top: 4px solid var(--activity-lane);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--activity-lane) 13%, transparent), transparent 35%),
    var(--surface);
}
.activity-lane-decision { --activity-lane: #315F7D; --activity-lane-soft: #E5EDF2; }
.activity-lane-physical { --activity-lane: var(--warn); --activity-lane-soft: var(--warn-soft); }
.activity-lane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.activity-lane-head h2 { margin: var(--s-1) 0 0; font-size: var(--text-md); }
.activity-lane-head .activity-kicker { color: var(--activity-lane); }
.activity-lane-days {
  flex: none;
  padding: var(--s-1) var(--s-2);
  border-radius: 999px;
  background: var(--activity-lane-soft);
  color: var(--activity-lane);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}
.activity-lane-number { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-4); }
.activity-lane-number strong {
  color: var(--activity-lane);
  font-size: var(--text-display);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.activity-lane-number span { color: var(--muted); font-size: var(--text-xs); }
.activity-lane-description { min-height: 3.25rem; margin: var(--s-2) 0 var(--s-4); color: var(--ink-2); font-size: var(--text-sm); }
.activity-chart-scroll { overflow-x: auto; padding: var(--s-1) 0 var(--s-2); scrollbar-width: thin; }
.activity-chart-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.activity-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(2.75rem, 1fr);
  align-items: end;
  gap: var(--s-1);
  min-width: 100%;
  height: 11rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-bars-compact { grid-auto-columns: 1.65rem; }
.activity-bars li { display: grid; grid-template-rows: 1.2rem 7rem 2.1rem; min-width: 0; height: 100%; text-align: center; }
.activity-bars li.is-weekend { background: color-mix(in srgb, var(--activity-lane) 5%, transparent); }
.activity-bar-value { overflow: hidden; color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.activity-bar-track {
  display: flex;
  align-items: flex-end;
  min-width: .45rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--rule-strong);
}
.activity-bar-track > span {
  display: block;
  width: clamp(.45rem, 65%, 1.15rem);
  min-height: 0;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
  background: var(--activity-lane);
}
.activity-bars .is-zero .activity-bar-track::after {
  width: .3rem;
  height: .3rem;
  margin: 0 auto .12rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  content: "";
}
.activity-bars .is-today .activity-bar-label { color: var(--activity-lane); font-weight: var(--fw-bold); }
.activity-bar-label { align-self: end; color: var(--muted); font-size: var(--text-2xs); line-height: 1.15; }
.activity-bar-label small { display: block; margin-top: .12rem; color: inherit; font-size: inherit; }
.activity-bars-compact .activity-bar-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.activity-bars-compact .activity-bar-label small { display: none; }
.activity-lane-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.activity-lane-foot > div { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.activity-lane-foot span { display: block; color: var(--muted); font-size: var(--text-2xs); }
.activity-lane-foot strong { display: block; margin-top: var(--s-1); font-size: var(--text-sm); }
.activity-lane-breakdown { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.activity-lane-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-xs);
}
.activity-lane-breakdown li:last-child { border-bottom: 0; }
.activity-lane-breakdown span { color: var(--ink-2); }
.activity-lane-breakdown strong { flex: none; font-variant-numeric: tabular-nums; }
.activity-lane-empty { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--text-sm); }
.activity-learning-note {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--activity-lane);
  background: var(--activity-lane-soft);
}
.activity-learning-note span { color: var(--muted); font-size: var(--text-2xs); }
.activity-learning-note strong { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--text-xs); }
.activity-learning-note b { font-variant-numeric: tabular-nums; }
.activity-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.activity-metric {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.activity-metric span { display: block; color: var(--muted); font-size: var(--text-xs); }
.activity-metric strong { display: block; margin-top: var(--s-1); font-size: var(--text-lg); }
.activity-metric-wide { grid-column: span 2; }
.activity-table-wrap { overflow-x: auto; }
.activity-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.activity-table caption { text-align: left; color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--s-3); }
.activity-table th,
.activity-table td { padding: var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.activity-table thead th { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.activity-table tbody tr:last-child th,
.activity-table tbody tr:last-child td { border-bottom: 0; }
.activity-people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.activity-person { padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.activity-person > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.activity-person h3 { margin: 0 0 var(--s-1); }
.activity-person time { color: var(--muted); font-size: var(--text-xs); }
.activity-person-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.activity-person-work section { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.activity-person-work section > span,
.activity-person-work small { display: block; color: var(--muted); font-size: var(--text-2xs); }
.activity-person-work section > strong { display: block; margin: var(--s-1) 0 var(--s-2); font-size: var(--text-sm); }
.activity-person-work ul { margin: 0; padding-left: var(--s-4); color: var(--ink-2); font-size: var(--text-xs); }
.activity-person-work li b { font-variant-numeric: tabular-nums; }
.activity-event-catalog > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  cursor: pointer;
  list-style: none;
}
.activity-event-catalog > summary::-webkit-details-marker { display: none; }
.activity-event-catalog > summary::after { content: "+"; color: var(--brand); font-size: var(--text-xl); line-height: 1; }
.activity-event-catalog[open] > summary::after { content: "−"; }
.activity-event-catalog > summary > span:first-child { display: grid; gap: var(--s-1); color: var(--muted); font-size: var(--text-sm); }
.activity-event-catalog > summary strong { color: var(--ink); font-size: var(--text-md); }
.activity-event-catalog > summary > span:last-child { margin-left: auto; color: var(--brand-strong); font-size: var(--text-xs); }
.activity-event-catalog-body { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.activity-event-catalog-body > p { color: var(--muted); font-size: var(--text-sm); }
.activity-type-list,
.activity-timeline { list-style: none; padding: 0; margin: 0; }
.activity-type-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.activity-type-list li:last-child { border-bottom: 0; }
.activity-type-list span { display: block; color: var(--muted); font-size: var(--text-xs); }
.activity-type-list b { font-size: var(--text-md); }
.activity-timeline li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.activity-timeline li:last-child { border-bottom: 0; }
.activity-timeline-pagination { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.activity-timeline-pagination .pagination { margin-top: 0; }
.activity-timeline-time { color: var(--muted); font-size: var(--text-xs); }
.activity-timeline-time strong { display: block; color: var(--ink); font-family: var(--mono); }
.activity-timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.activity-timeline-body p { margin: var(--s-1) 0; }
.activity-technical { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.activity-reference { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 0; }
.activity-reference dt { color: var(--muted); }
.activity-reference dd { margin: 0; overflow-wrap: anywhere; }
.daily-operation-head,
.daily-operation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.daily-operation-head > div,
.daily-operation-section-head > div { min-width: 0; }
.daily-operation-section-head { margin-bottom: var(--s-4); }
.daily-operation-section-head p { margin: 0; color: var(--muted); }
.daily-operation-filter {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) auto;
  align-items: end;
  gap: var(--s-3);
}
.daily-operation-filter .field { margin-bottom: 0; }
.daily-operation-filter-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.daily-operation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.daily-product-list { display: grid; gap: var(--s-3); }
.daily-product-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) minmax(11rem, auto);
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.daily-product-primary h3 { margin: var(--s-1) 0; }
.daily-product-primary p,
.daily-product-line,
.daily-product-status time { color: var(--muted); font-size: var(--text-sm); }
.daily-product-status { display: flex; align-items: flex-end; flex-direction: column; gap: var(--s-2); }
.daily-product-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
.daily-product-facts div { min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.daily-product-facts dt { color: var(--muted); font-size: var(--text-xs); }
.daily-product-facts dd { margin: var(--s-1) 0 0; overflow-wrap: anywhere; }
.daily-product-actions { grid-column: 1 / -1; }
.daily-operation-pagination { margin-top: var(--s-4); }

/* ---------------------------------------------------------------------------
   Operação diária: pulso atual, coberturas clicáveis e travas factuais.
--------------------------------------------------------------------------- */
.page:has(.daily-pulse-head) { max-width: 92rem; }
.daily-pulse-head,
.daily-pulse-head-actions,
.daily-pulse-section-title,
.daily-pulse-day-nav,
.daily-pulse-progress-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.daily-pulse-head { margin-bottom: var(--s-5); }
.daily-pulse-head h1 { margin: var(--s-1) 0; }
.daily-pulse-head p,
.daily-pulse-section-title p { margin: 0; color: var(--muted); }
.daily-pulse-head-actions { align-items: center; flex-wrap: wrap; }

.daily-pulse-hero {
  display: grid;
  grid-template-columns: minmax(18rem, .75fr) minmax(28rem, 1.35fr);
  overflow: hidden;
  margin-bottom: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent);
}
.daily-pulse-calendar,
.daily-pulse-backlog { padding: var(--s-6); }
.daily-pulse-calendar {
  color: var(--brand-ink);
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--surface) 16%, transparent), transparent 32%),
    linear-gradient(145deg, var(--brand-strong), var(--brand));
}
.daily-pulse-day-nav { align-items: center; justify-content: flex-start; }
.daily-pulse-day-nav > a:not(.daily-pulse-today) {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--surface) 44%, transparent);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.daily-pulse-day-nav > div { display: grid; min-width: 12rem; gap: var(--s-1); }
.daily-pulse-day-nav > div span { font-weight: var(--fw-semibold); }
.daily-pulse-day-nav > div strong { font-family: var(--mono); font-size: var(--text-sm); opacity: .8; }
.daily-pulse-today { margin-left: auto; color: inherit; font-size: var(--text-xs); }
.daily-pulse-number { margin-top: var(--s-7); }
.daily-pulse-number > strong {
  display: block;
  font-size: clamp(var(--text-display), 7vw, 5rem);
  line-height: .9;
  letter-spacing: -.06em;
}
.daily-pulse-number > span { display: block; margin-top: var(--s-3); font-size: var(--text-md); }
.daily-pulse-number > small { display: block; margin-top: var(--s-2); opacity: .78; }

.daily-pulse-backlog { display: flex; flex-direction: column; justify-content: center; }
.daily-pulse-backlog > span,
.daily-pulse-next > span { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.daily-pulse-backlog > strong {
  margin-top: var(--s-2);
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.daily-pulse-backlog > strong small { color: var(--ink-2); font-size: var(--text-md); letter-spacing: 0; }
.daily-pulse-backlog > p { margin: var(--s-2) 0 var(--s-5); color: var(--muted); }
.daily-pulse-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.daily-pulse-next > span,
.daily-pulse-next > strong,
.daily-pulse-next > small { grid-column: 1; }
.daily-pulse-next > strong { font-size: var(--text-lg); }
.daily-pulse-next > small { color: var(--ink-2); }
.daily-pulse-next > .btn { grid-column: 2; grid-row: 1 / span 3; }

.daily-pulse-ribbon,
.daily-pulse-panel,
.daily-pulse-destinations,
.daily-pulse-worklist {
  margin-bottom: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.daily-pulse-section-title { align-items: center; margin-bottom: var(--s-4); }
.daily-pulse-section-title h2 { margin: var(--s-1) 0; font-size: var(--text-lg); }
.daily-pulse-section-title > small { color: var(--muted); }
.daily-pulse-all {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
}
.daily-pulse-all.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.daily-pulse-bands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}
.daily-pulse-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 5.75rem;
  align-content: start;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-3);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--ink);
  text-decoration: none;
}
.daily-pulse-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rule-strong);
}
.daily-pulse-band > span { min-width: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.daily-pulse-band > strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.daily-pulse-band > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-2xs); line-height: 1.3; }
.daily-pulse-band:hover,
.daily-pulse-band.is-active { border-color: var(--brand); color: var(--ink); }
.daily-pulse-band.is-active { box-shadow: inset 0 -3px 0 var(--brand); }
.daily-pulse-band-waiting { background: var(--warn-soft); }
.daily-pulse-band-waiting::before { background: var(--warn); }
.daily-pulse-band-catalog::before { background: color-mix(in srgb, var(--brand) 38%, var(--rule)); }
.daily-pulse-band-fiscal::before { background: color-mix(in srgb, var(--brand) 55%, var(--rule)); }
.daily-pulse-band-gtin::before { background: color-mix(in srgb, var(--brand) 72%, var(--rule)); }
.daily-pulse-band-weight::before { background: color-mix(in srgb, var(--brand) 86%, var(--rule)); }
.daily-pulse-band-published { background: var(--brand-soft); }
.daily-pulse-band-published::before { background: var(--brand-strong); }

.daily-pulse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  gap: var(--s-4);
}
.daily-pulse-blockers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.daily-pulse-blocker {
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.daily-pulse-blocker.has-alert { border-color: color-mix(in srgb, var(--warn) 48%, var(--rule)); background: var(--warn-soft); }
.daily-pulse-blocker > strong { font-size: var(--text-xl); }
.daily-pulse-blocker > span { margin-top: var(--s-1); font-weight: var(--fw-semibold); }
.daily-pulse-blocker > small { margin: var(--s-3) 0; color: var(--muted); }
.daily-pulse-blocker > a { margin-top: auto; font-size: var(--text-sm); font-weight: var(--fw-semibold); }

.daily-pulse-progress-list { display: grid; gap: var(--s-5); }
.daily-pulse-progress-item > div:first-child { align-items: baseline; }
.daily-pulse-progress-item > div:first-child span { font-weight: var(--fw-semibold); }
.daily-pulse-progress-item > div:first-child strong { font-size: var(--text-lg); }
.daily-pulse-progress {
  height: .7rem;
  margin-top: var(--s-2);
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-sunk);
}
.daily-pulse-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.daily-pulse-progress-item.is-warn .daily-pulse-progress > span { background: var(--warn); }
.daily-pulse-progress-item > small { display: block; margin-top: var(--s-2); color: var(--muted); }

.daily-pulse-destination-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-3);
}
.daily-pulse-destination-list > div { padding: var(--s-3); border-top: 3px solid var(--brand); background: var(--surface-sunk); }
.daily-pulse-destination-list span,
.daily-pulse-destination-list strong,
.daily-pulse-destination-list small { display: block; }
.daily-pulse-destination-list span { color: var(--muted); font-size: var(--text-xs); }
.daily-pulse-destination-list strong { margin-top: var(--s-2); }
.daily-pulse-destination-list small { margin-top: var(--s-1); color: var(--muted); }
.daily-pulse-worklist .daily-product-row { border-left: 3px solid var(--rule-strong); }
.daily-pulse-footnote { color: var(--muted); font-size: var(--text-xs); text-align: right; }

@media (max-width: 60rem) {
  .daily-pulse-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-pulse-grid { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  .daily-pulse-head,
  .daily-pulse-section-title { flex-direction: column; }
  .daily-pulse-hero,
  .daily-pulse-bands,
  .daily-pulse-blockers { grid-template-columns: 1fr; }
  .daily-pulse-calendar,
  .daily-pulse-backlog,
  .daily-pulse-ribbon,
  .daily-pulse-panel,
  .daily-pulse-destinations,
  .daily-pulse-worklist { padding: var(--s-4); }
  .daily-pulse-next { grid-template-columns: 1fr; }
  .daily-pulse-next > span,
  .daily-pulse-next > strong,
  .daily-pulse-next > small,
  .daily-pulse-next > .btn { grid-column: 1; grid-row: auto; }
  .daily-pulse-band { min-height: 0; }
}
.ecommerce-handoff-head,
.ecommerce-handoff-card-head,
.ecommerce-handoff-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.ecommerce-handoff-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
/* ---------------------------------------------------------------------------
   Fila de trabalho do e-commerce — ADR-0054.

   Grade densa: quem passa horas aqui varre uma coluna procurando o desvio, em
   vez de ler cartão por cartão. O painel da conversa abre DEPOIS da grade e a
   grade nao muda de posicao (ADR-0043 §6): em lote a pessoa abre e fecha
   dezenas de itens, e expansao inline faria a lista pular a cada clique.
--------------------------------------------------------------------------- */
.ecommerce-handoff-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.ecommerce-handoff-filters label { display: grid; gap: var(--s-1); }
.ecommerce-handoff-filters span { font-size: var(--text-2xs); color: var(--muted); }
.ecommerce-handoff-search { flex: 1 1 18rem; }
.ecommerce-handoff-search input { width: 100%; }

.ecommerce-handoff-mentions ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.ecommerce-handoff-mentions li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  border-left: 3px solid var(--warn);
  padding-left: var(--s-3);
}

.ecommerce-handoff-table { width: 100%; border-collapse: collapse; }
.ecommerce-handoff-table th,
.ecommerce-handoff-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.ecommerce-handoff-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: var(--text-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ecommerce-handoff-table thead small { display: block; text-transform: none; letter-spacing: 0; }
.ecommerce-handoff-table td small { display: block; font-size: var(--text-2xs); }
.ecommerce-handoff-table tbody tr { transition: background-color .12s ease; }
.ecommerce-handoff-table tbody tr:hover { background: var(--surface-sunk); }
/* Casas decimais alinhadas: comparar preco entre linhas fica de graca. */
.ecommerce-handoff-money { font-variant-numeric: tabular-nums; }

/*
   A regua e' FORMA e POSICAO, nunca cor: quatro degraus, os cheios em tinta
   comum. Quem enxerga em escala de cinza le a mesma coisa (D-109).
*/
.ecommerce-handoff-ruler { display: inline-flex; gap: 2px; margin: var(--s-1) 0; }
.ecommerce-handoff-ruler i {
  width: .5rem;
  height: .75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
}
.ecommerce-handoff-ruler i.is-on { background: var(--ink-2); border-color: var(--ink-2); }
/* O unico vermelho da linha, reservado a fato comprovado. */
.ecommerce-handoff-spread-below { color: var(--danger); font-weight: 600; }
/*
   Perdido nao e' alarme: e' o unico bloco sem acao possivel. Riscado neutro,
   porque vermelho aqui gastaria o alarme que precisa sobrar para o preco.
*/
.ecommerce-handoff-lost { color: var(--muted); }
.ecommerce-handoff-lost strong { display: block; color: var(--ink-2); }

.ecommerce-handoff-panel { margin-top: var(--s-4); }
.ecommerce-handoff-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ecommerce-handoff-thread li { border-left: 3px solid var(--rule); padding-left: var(--s-3); }
.ecommerce-handoff-thread p { margin: var(--s-1) 0; }
.ecommerce-handoff-thread del { color: var(--muted); }
.ecommerce-handoff-retraction { border-left: 3px solid var(--warn); padding-left: var(--s-3); }
.ecommerce-handoff-composer { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.ecommerce-handoff-composer textarea { width: 100%; }
.ecommerce-handoff-composer fieldset { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--s-3); }
.ecommerce-handoff-composer legend { font-size: var(--text-2xs); color: var(--muted); }
.ecommerce-handoff-mention-option { display: inline-flex; align-items: center; gap: var(--s-1); margin-right: var(--s-3); }
.ecommerce-handoff-error { color: var(--danger); }

/*
   No celular a tabela vira ficha, com a MESMA marcacao: o cabecalho sai do
   fluxo e cada celula ganha o rotulo por `data-rotulo`. Sem segunda arvore de
   markup, sem rolagem horizontal em nove colunas.
*/
@media (max-width: 60rem) {
  .ecommerce-handoff-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ecommerce-handoff-table tbody tr {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
  }
  .ecommerce-handoff-table td { border: 0; padding: var(--s-1) 0; }
  .ecommerce-handoff-table td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: var(--text-2xs);
    color: var(--muted);
  }
}

.ecommerce-handoff-list { display: grid; gap: var(--s-4); }
.ecommerce-handoff-card + .ecommerce-handoff-card { margin-top: 0; }
.ecommerce-handoff-card-head p,
.ecommerce-handoff-kicker { color: var(--muted); font-size: var(--text-xs); }
.ecommerce-handoff-card-head h2 { margin: var(--s-1) 0; }
.ecommerce-handoff-card-actions { align-items: center; flex-wrap: wrap; }
.ecommerce-handoff-items { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.ecommerce-handoff-item {
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ecommerce-handoff-item-primary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ecommerce-handoff-item-primary h3 { margin: 0; flex: 1 1 18rem; }
.ecommerce-handoff-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}
.ecommerce-handoff-facts div { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.ecommerce-handoff-facts dt { color: var(--muted); font-size: var(--text-xs); }
.ecommerce-handoff-facts dd { margin: var(--s-1) 0 0; overflow-wrap: anywhere; }
.ecommerce-handoff-reason {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--radius-sm);
}
.ecommerce-handoff-reason strong { display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 44rem) {
  .activity-filters,
  .activity-summary { grid-template-columns: 1fr; }
  .activity-metric-wide { grid-column: auto; }
  .activity-page-head,
  .activity-section-heading,
  .activity-timeline-heading { flex-direction: column; }
  .activity-timeline { display: block; }
  .activity-timeline li { grid-template-columns: 1fr; gap: var(--s-2); }
  .daily-operation-head,
  .daily-operation-section-head { flex-direction: column; }
  .daily-operation-filter,
  .daily-operation-summary,
  .daily-product-row,
  .daily-product-facts,
  .ecommerce-handoff-summary,
  .ecommerce-handoff-facts { grid-template-columns: 1fr; }
  .daily-product-status { align-items: flex-start; }
  .daily-product-facts,
  .daily-product-actions { grid-column: auto; }
  .ecommerce-handoff-head,
  .ecommerce-handoff-card-head { flex-direction: column; }
}

@media (max-width: 60rem) {
  .activity-filter-card { grid-template-columns: 1fr; align-items: start; }
  .activity-lanes { grid-template-columns: 1fr; }
  .activity-lane-description { min-height: 0; }
}

@media (max-width: 44rem) {
  .activity-principles,
  .activity-people-grid,
  .activity-person-work { grid-template-columns: 1fr; }
  .activity-head-status { align-items: flex-start; }
  .activity-filter-card { gap: var(--s-3); }
  .activity-filter-actions { flex-wrap: wrap; }
  .activity-filter-actions .btn { flex: 1; }
  .activity-lane { padding: var(--s-4); }
  .activity-lane-number strong { font-size: var(--text-xl); }
  .activity-lane-head,
  .activity-person > header,
  .activity-event-catalog > summary { align-items: flex-start; flex-direction: column; }
  .activity-event-catalog > summary > span:last-child { margin-left: 0; }
}

/* ---------- galpão: estrutura física e embalagens ---------- */
.page:has(.warehouse-dashboard) { max-width: 96rem; }
.warehouse-dashboard {
  display: grid;
  gap: var(--s-5);
}
.warehouse-kicker {
  display: block;
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.warehouse-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr);
  gap: var(--s-5);
  overflow: hidden;
  padding: var(--s-6);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-strong) 92%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface) 6%, transparent) 0 1px, transparent 1px 22px),
    var(--brand-strong);
  color: var(--surface);
}
.warehouse-hero .warehouse-kicker { color: color-mix(in srgb, var(--surface) 76%, transparent); }
.warehouse-hero-copy h1 {
  margin: var(--s-1) 0 var(--s-2);
  color: inherit;
  font-size: var(--text-display);
  letter-spacing: -.04em;
}
.warehouse-hero-copy p { max-width: 47rem; margin: 0; color: color-mix(in srgb, var(--surface) 82%, transparent); }
.warehouse-hero-state {
  display: flex;
  align-self: start;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--surface) 24%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 9%, transparent);
}
.warehouse-hero-state strong,
.warehouse-hero-state span { display: block; }
.warehouse-hero-state span { margin-top: var(--s-1); color: color-mix(in srgb, var(--surface) 74%, transparent); font-size: var(--text-xs); }
.warehouse-live-dot {
  flex: none;
  width: .65rem;
  height: .65rem;
  margin-top: .25rem;
  border: 2px solid color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--surface) 12%, transparent);
}
.warehouse-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s-2) calc(var(--s-6) * -1) calc(var(--s-6) * -1);
  border-top: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}
.warehouse-metrics > div { padding: var(--s-4) var(--s-6); border-right: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); }
.warehouse-metrics > div:last-child { border-right: 0; }
.warehouse-metrics dt { color: color-mix(in srgb, var(--surface) 68%, transparent); font-size: var(--text-xs); }
.warehouse-metrics dd { margin: var(--s-1) 0; font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.warehouse-metrics small { color: color-mix(in srgb, var(--surface) 68%, transparent); font-size: var(--text-2xs); }
.warehouse-feedback { margin: 0; }

.warehouse-reading,
.warehouse-section {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.warehouse-reading { border-color: color-mix(in srgb, var(--brand) 28%, var(--rule)); }
.warehouse-reading-head,
.warehouse-section-head,
.warehouse-tree-head,
.warehouse-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.warehouse-reading-head h2,
.warehouse-section-head h2 { margin: var(--s-1) 0 0; font-size: var(--text-xl); }
.warehouse-section-head p { max-width: 58rem; margin: var(--s-1) 0 0; color: var(--muted); }
.warehouse-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.warehouse-insight {
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.warehouse-insight-primary { border-color: color-mix(in srgb, var(--brand) 44%, var(--rule)); background: var(--brand-soft); }
.warehouse-insight-warning { border-color: color-mix(in srgb, var(--warn) 36%, var(--rule)); background: var(--warn-soft); }
.warehouse-insight-index { color: var(--muted); font: var(--fw-semibold) var(--text-2xs)/1.2 var(--mono); text-transform: uppercase; }
.warehouse-insight > strong { display: block; margin-top: var(--s-3); font-size: var(--text-md); line-height: 1.3; }
.warehouse-insight p { margin: var(--s-2) 0 0; color: var(--ink-2); }
.warehouse-insight small { display: block; margin: var(--s-2) 0 var(--s-3); color: var(--muted); }
.warehouse-insight .btn { margin-top: auto; }

.warehouse-kind-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--rule);
}
.warehouse-kind {
  display: flex;
  min-width: 0;
  min-height: 7.5rem;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-3);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.warehouse-kind:hover:not([disabled]) { background: var(--brand-soft); }
.warehouse-kind.is-empty { color: var(--muted); background: color-mix(in srgb, var(--surface-sunk) 65%, var(--surface)); }
.warehouse-kind span { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.warehouse-kind strong { margin: auto 0 var(--s-1); font-size: var(--text-lg); }
.warehouse-kind small { overflow-wrap: anywhere; color: var(--muted); font-size: var(--text-2xs); line-height: 1.25; }

.warehouse-structure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(20rem, .58fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.warehouse-tree-card,
.warehouse-editor-card {
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.warehouse-tree-head { padding: var(--s-4); border-bottom: 1px solid var(--rule); }
.warehouse-tree-head strong,
.warehouse-tree-head span { display: block; }
.warehouse-tree-head span { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-xs); }
.warehouse-tree { margin: 0; padding: 0; list-style: none; }
.warehouse-tree-row { position: relative; border-bottom: 1px solid var(--rule); }
.warehouse-tree-row:last-child { border-bottom: 0; }
.warehouse-tree-row > button {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) minmax(7rem, auto) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--tree-depth) * 1.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.warehouse-tree-row > button:hover { background: var(--surface-sunk); }
.warehouse-tree-row.is-selected > button { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.warehouse-tree-row.is-inactive { opacity: .66; }
.warehouse-tree-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s-4) + var(--tree-depth) * 1.5rem - .8rem);
  width: 1px;
  background: var(--rule);
}
.warehouse-tree-row[aria-level="1"] .warehouse-tree-line { display: none; }
.warehouse-node-icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-strong);
}
.warehouse-node-main,
.warehouse-node-main strong,
.warehouse-node-main small,
.warehouse-node-usage strong,
.warehouse-node-usage small { display: block; min-width: 0; }
.warehouse-node-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-node-main small { overflow: hidden; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.warehouse-node-usage { text-align: right; }
.warehouse-node-usage strong { font-size: var(--text-sm); }
.warehouse-node-usage small { color: var(--muted); font-size: var(--text-2xs); }
.warehouse-tree-empty,
.warehouse-editor-placeholder {
  display: grid;
  min-height: 18rem;
  place-items: center;
  align-content: center;
  padding: var(--s-6);
  text-align: center;
}
.warehouse-tree-empty > span,
.warehouse-editor-placeholder > span { color: var(--brand); font-size: var(--text-display); line-height: 1; }
.warehouse-tree-empty h3,
.warehouse-editor-placeholder h3 { margin: var(--s-3) 0 var(--s-1); }
.warehouse-tree-empty p,
.warehouse-editor-placeholder p { max-width: 30rem; margin: 0 0 var(--s-4); color: var(--muted); }

.warehouse-editor-card {
  align-self: start;
  position: sticky;
  top: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-sunk);
}
.warehouse-editor-head h3 { margin: var(--s-1) 0 0; font-size: var(--text-lg); }
.warehouse-editor-head p { margin: var(--s-1) 0 0; color: var(--muted); }
.warehouse-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-lg);
  cursor: pointer;
}
.warehouse-close:hover { border-color: var(--ink-2); }
.warehouse-editor-context { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: var(--s-3) 0 var(--s-4); color: var(--muted); font-size: var(--text-xs); }
.warehouse-form { display: grid; gap: var(--s-3); }
.warehouse-form .field { margin: 0; }
.warehouse-form .field small { display: block; margin-top: var(--s-1); color: var(--muted); }
.warehouse-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.warehouse-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--danger) 22%, var(--rule));
}
.warehouse-danger-zone strong,
.warehouse-danger-zone small { display: block; }
.warehouse-danger-zone small { margin-top: var(--s-1); color: var(--muted); }
.warehouse-editor-note { margin: var(--s-5) 0 0; color: var(--muted); }

.warehouse-packages { overflow: hidden; }
.warehouse-package-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s-5) calc(var(--s-5) * -1) 0;
  border-block: 1px solid var(--rule);
  background: var(--rule);
}
.warehouse-package-principles > div { padding: var(--s-3) var(--s-5); background: var(--surface-sunk); }
.warehouse-package-principles strong,
.warehouse-package-principles span { display: block; }
.warehouse-package-principles strong { font-family: var(--mono); }
.warehouse-package-principles span { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-xs); }
.warehouse-package-form {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--rule));
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.warehouse-package-fields {
  display: grid;
  grid-template-columns: minmax(9rem, .5fr) minmax(15rem, 1fr) minmax(22rem, 1.5fr) minmax(8rem, .5fr);
  gap: var(--s-3);
  align-items: end;
}
.warehouse-package-fields .field { margin: 0; }
.warehouse-field-wide { min-width: 0; }
.warehouse-dimensions {
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) auto minmax(5rem, 1fr) auto minmax(5rem, 1fr);
  align-items: end;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.warehouse-dimensions legend { margin-bottom: var(--s-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.warehouse-dimensions label { color: var(--muted); font-size: var(--text-2xs); }
.warehouse-dimensions input { min-width: 0; margin-top: var(--s-1); }
.warehouse-dimensions > span { padding-bottom: .7rem; color: var(--muted); }

.warehouse-package-empty {
  display: grid;
  grid-template-columns: minmax(16rem, .6fr) minmax(0, 1.4fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-sunk) 55%, var(--surface));
}
.warehouse-package-empty-copy { align-self: center; }
.warehouse-package-empty-copy h3 { margin: var(--s-2) 0; font-size: var(--text-lg); }
.warehouse-package-empty-copy p { margin: 0 0 var(--s-4); color: var(--muted); }
.warehouse-package-blueprint { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--s-3); min-height: 16rem; }
.warehouse-blueprint-band {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.warehouse-blueprint-band > small { color: var(--muted); font: var(--text-2xs)/1.2 var(--mono); }
.warehouse-blueprint-shapes { display: flex; flex: 1; align-items: flex-end; justify-content: space-around; gap: var(--s-3); padding-top: var(--s-4); }
.warehouse-blueprint-shape { display: grid; gap: var(--s-2); min-width: 0; margin: 0; justify-items: center; }
.warehouse-blueprint-shape > span { display: block; border: 2px solid var(--brand); background: repeating-linear-gradient(135deg, transparent 0 7px, var(--brand-soft) 7px 8px); }
.warehouse-blueprint-shape.is-small > span { width: 3rem; height: 2.4rem; }
.warehouse-blueprint-shape.is-medium > span { width: 5rem; height: 3.75rem; }
.warehouse-blueprint-shape.is-large > span { width: 6.4rem; height: 5.35rem; }
.warehouse-blueprint-shape.is-pallet { flex: 1; align-content: end; padding-top: var(--s-4); }
.warehouse-blueprint-shape.is-pallet > span { width: 8rem; max-width: 100%; height: 6.2rem; border-color: var(--warn); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--warn-soft) 8px 9px); }
.warehouse-blueprint-shape figcaption { color: var(--muted); font: var(--text-2xs)/1.35 var(--mono); text-align: center; }
.warehouse-blueprint-shape figcaption strong { display: block; color: var(--ink); }

.warehouse-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.warehouse-package-card {
  display: grid;
  grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.warehouse-package-card.is-selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.warehouse-package-visual { display: grid; min-height: 14rem; place-items: end center; padding: var(--s-4); background: var(--surface-sunk); }
.warehouse-package-visual span {
  display: block;
  width: var(--package-width);
  height: var(--package-height);
  min-height: 2rem;
  border: 2px solid var(--brand);
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--brand-soft) 8px 9px);
}
.warehouse-package-data { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: var(--s-4); }
.warehouse-package-data > div:first-child { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-2); }
.warehouse-package-data > div:first-child small { color: var(--muted); }
.warehouse-package-data > strong { margin-top: var(--s-3); font: var(--fw-bold) var(--text-lg)/1.2 var(--mono); }
.warehouse-package-data > span { color: var(--ink-2); }
.warehouse-package-data dl { display: grid; width: 100%; gap: var(--s-2); margin: var(--s-4) 0; }
.warehouse-package-data dl div { display: flex; justify-content: space-between; gap: var(--s-3); border-bottom: 1px solid var(--rule); }
.warehouse-package-data dt { color: var(--muted); font-size: var(--text-xs); }
.warehouse-package-data dd { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-align: right; }
.warehouse-package-data .btn { margin-top: auto; }
.warehouse-package-revision { background: var(--surface-sunk); }
.warehouse-cubed-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
}
.warehouse-cubed-note > div { padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--rule)); border-radius: var(--radius-sm); background: var(--surface); color: var(--brand-strong); font-family: var(--mono); font-weight: var(--fw-bold); }
.warehouse-cubed-note p { margin: 0; color: var(--ink-2); }

@media (max-width: 60rem) {
  .warehouse-kind-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .warehouse-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-package-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-dimensions { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
  .warehouse-hero { grid-template-columns: 1fr; }
  .warehouse-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-metrics > div:nth-child(2) { border-right: 0; }
  .warehouse-metrics > div:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); }
  .warehouse-insight-grid { grid-template-columns: 1fr; }
  .warehouse-insight { min-height: 0; }
  .warehouse-structure-layout { grid-template-columns: 1fr; }
  .warehouse-editor-card { position: static; }
  .warehouse-package-empty { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  .warehouse-hero,
  .warehouse-reading,
  .warehouse-section { padding: var(--s-4); }
  .warehouse-metrics { margin: var(--s-2) calc(var(--s-4) * -1) calc(var(--s-4) * -1); }
  .warehouse-metrics > div { padding: var(--s-3) var(--s-4); }
  .warehouse-reading-head,
  .warehouse-section-head,
  .warehouse-tree-head,
  .warehouse-editor-head { flex-direction: column; }
  .warehouse-section-head .btn { width: 100%; }
  .warehouse-kind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-kind { min-height: 6.5rem; }
  .warehouse-tree-row > button { grid-template-columns: auto minmax(0, 1fr) auto; }
  .warehouse-node-usage { display: none; }
  .warehouse-package-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(var(--s-4) * -1); }
  .warehouse-package-fields,
  .warehouse-package-grid,
  .warehouse-package-blueprint { grid-template-columns: 1fr; }
  .warehouse-dimensions { grid-template-columns: 1fr; }
  .warehouse-dimensions > span { display: none; }
  .warehouse-package-card { grid-template-columns: 1fr; }
  .warehouse-package-visual { min-height: 10rem; }
  .warehouse-cubed-note { grid-template-columns: 1fr; }
}

/* ---------- destinos: conta Bling → depósito → local físico ---------- */
.page:has(.operational-destinations) { max-width: 96rem; }
.operational-destinations { display: grid; gap: var(--s-5); }
.destination-kicker {
  display: block;
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.destination-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  overflow: hidden;
  padding: var(--s-6);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--surface) 13%, transparent), transparent 24%),
    repeating-linear-gradient(120deg, color-mix(in srgb, var(--surface) 5%, transparent) 0 1px, transparent 1px 30px),
    var(--brand-strong);
  color: var(--surface);
}
.destination-hero .destination-kicker { color: color-mix(in srgb, var(--surface) 75%, transparent); }
.destination-hero-copy h1 { margin: var(--s-1) 0 var(--s-2); color: inherit; font-size: var(--text-display); letter-spacing: -.04em; }
.destination-hero-copy p { max-width: 55rem; margin: 0; color: color-mix(in srgb, var(--surface) 82%, transparent); }
.destination-hero-action { align-self: start; border-color: var(--surface); background: var(--surface); color: var(--brand-strong); }
.destination-hero-action:hover { background: var(--brand-soft); }
.destination-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s-2) calc(var(--s-6) * -1) calc(var(--s-6) * -1);
  border-top: 1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}
.destination-metrics > div { padding: var(--s-4) var(--s-6); border-right: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); }
.destination-metrics > div:last-child { border-right: 0; }
.destination-metrics dt { color: color-mix(in srgb, var(--surface) 68%, transparent); font-size: var(--text-xs); }
.destination-metrics dd { margin: var(--s-1) 0; font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.destination-metrics small { color: color-mix(in srgb, var(--surface) 68%, transparent); font-size: var(--text-2xs); }
.destination-feedback { margin: 0; }

.destination-reading,
.destination-composer,
.destination-editor,
.destination-catalog,
.destination-empty { padding: var(--s-5); }
.destination-reading { border-color: color-mix(in srgb, var(--brand) 30%, var(--rule)); }
.destination-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.destination-section-heading > div { min-width: 0; }
.destination-section-heading h2 { margin: var(--s-1) 0 0; font-size: var(--text-xl); }
.destination-section-heading p { max-width: 60rem; margin: var(--s-1) 0 0; color: var(--muted); }
.destination-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.destination-insight {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.destination-insight.is-warning { border-top-color: var(--warn); background: var(--warn-soft); }
.destination-insight.is-ready { background: var(--brand-soft); }
.destination-insight.is-rule { border-top-color: var(--ink-2); }
.destination-insight > span { color: var(--muted); font: var(--fw-semibold) var(--text-2xs)/1.2 var(--mono); text-transform: uppercase; }
.destination-insight > strong { margin-top: var(--s-3); font-size: var(--text-md); line-height: 1.3; }
.destination-insight p { margin: var(--s-2) 0 0; color: var(--ink-2); }
.destination-insight small { display: block; margin-top: var(--s-2); color: var(--muted); }
.destination-insight a { margin-top: auto; padding-top: var(--s-3); }

.destination-empty { display: flex; align-items: center; gap: var(--s-4); border-style: dashed; }
.destination-empty > span { color: var(--brand); font-size: var(--text-display); }
.destination-empty > div { flex: 1; }
.destination-empty h2 { margin: 0 0 var(--s-1); }
.destination-empty p { margin: 0; color: var(--muted); }
.destination-composer,
.destination-editor { border-color: color-mix(in srgb, var(--brand) 46%, var(--rule)); box-shadow: inset 0 4px 0 var(--brand); }
.destination-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-lg);
  cursor: pointer;
}
.destination-close:hover { border-color: var(--ink-2); }
.destination-composer-form,
.destination-editor-form { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.destination-step,
.destination-editor-choice {
  min-width: 0;
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.destination-step.is-pending { background: color-mix(in srgb, var(--surface-sunk) 62%, var(--surface)); }
.destination-step legend,
.destination-step-label,
.destination-editor-choice legend { padding: 0 var(--s-1); font-size: var(--text-md); font-weight: var(--fw-bold); }
.destination-step legend > span,
.destination-step-label > span {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: var(--s-2);
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  font-size: var(--text-xs);
}
.destination-step-label { display: block; margin-bottom: var(--s-3); }
.destination-account-grid,
.destination-account-strip,
.destination-deposit-grid,
.destination-location-grid { display: grid; gap: var(--s-2); }
.destination-account-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.destination-account-strip { grid-template-columns: repeat(5, minmax(9rem, 1fr)); }
.destination-deposit-grid,
.destination-location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.destination-account-choice,
.destination-choice {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.destination-account-choice { grid-template-rows: auto 1fr; }
.destination-account-choice:hover,
.destination-choice:hover { border-color: var(--brand); background: var(--brand-soft); }
.destination-account-choice.is-selected,
.destination-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.destination-choice-mark {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  grid-row: 1 / span 2;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--surface);
  font-size: var(--text-2xs);
  line-height: 1;
}
.destination-account-choice.is-selected .destination-choice-mark,
.destination-choice:has(input:checked) .destination-choice-mark { border-color: var(--brand); background: var(--brand); }
.destination-choice:has(input:checked) .destination-choice-mark::after { content: "✓"; }
.destination-choice:has(input[type="checkbox"]) .destination-choice-mark { border-radius: .3rem; }
.destination-account-choice strong,
.destination-account-choice small,
.destination-choice strong,
.destination-choice small { display: block; min-width: 0; overflow-wrap: anywhere; }
.destination-account-choice strong { grid-column: 2; }
.destination-account-choice small { grid-column: 2; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.destination-choice small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.destination-choice-none { border-style: dashed; }
.destination-location-help { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--text-xs); }
.destination-step-placeholder { margin: 0; color: var(--muted); }
.destination-name-row { max-width: 42rem; }
.destination-name-row .field,
.destination-editor-form > .field,
.destination-editor-grid .field { margin: 0; }
.destination-name-row small { display: block; margin-top: var(--s-1); color: var(--muted); }

.destination-route-preview {
  display: grid;
  grid-template-columns: minmax(8rem, .75fr) auto minmax(9rem, 1fr) auto minmax(9rem, 1fr) auto minmax(9rem, 1.25fr);
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.destination-route-preview.is-ready { border-color: var(--brand); background: var(--brand-soft); }
.destination-route-preview > div { min-width: 0; padding: var(--s-2); }
.destination-route-preview > div span,
.destination-route-preview > div strong,
.destination-route-preview > div small { display: block; overflow-wrap: anywhere; }
.destination-route-preview > div span { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.destination-route-preview > div strong { margin-top: var(--s-1); font-size: var(--text-sm); }
.destination-route-preview > div small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.destination-route-preview > i { align-self: center; color: var(--brand); font-style: normal; }
.destination-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.destination-form-actions > small { margin-left: auto; color: var(--muted); }
.destination-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }

.destination-catalog { overflow: hidden; }
.destination-catalog-empty { display: grid; min-height: 14rem; place-items: center; align-content: center; margin-top: var(--s-4); padding: var(--s-5); border: 1px dashed var(--rule-strong); text-align: center; }
.destination-catalog-empty > span { color: var(--brand); font-size: var(--text-display); }
.destination-catalog-empty h3 { margin: var(--s-2) 0; }
.destination-catalog-empty p { margin: 0 0 var(--s-4); color: var(--muted); }
.destination-account-sections { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.destination-account-section { min-width: 0; }
.destination-account-section > header { display: flex; align-items: end; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.destination-account-section > header span { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.destination-account-section > header h3 { margin: var(--s-1) 0 0; font-size: var(--text-md); }
.destination-account-section > header small { color: var(--muted); }
.destination-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.destination-route-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.destination-route-card.is-unavailable { background: var(--surface-sunk); }
.destination-route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.destination-route-head span:not(.status) { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.destination-route-head h4 { margin: var(--s-1) 0 0; font-size: var(--text-lg); }
.destination-route-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border-block: 1px solid var(--rule);
  background: var(--surface-sunk);
}
.destination-route-facts > div { min-width: 0; padding: var(--s-3); }
.destination-route-facts > div.is-missing { background: var(--warn-soft); }
.destination-route-facts > div span,
.destination-route-facts > div strong,
.destination-route-facts > div small { display: block; overflow-wrap: anywhere; }
.destination-route-facts > div span { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.destination-route-facts > div strong { margin-top: var(--s-1); font-size: var(--text-sm); }
.destination-route-facts > div small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.destination-route-location-list { display: grid; gap: .2rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.destination-route-location-list li { color: var(--ink-2); font-size: var(--text-2xs); }
.destination-route-location-list li::before { content: "• "; color: var(--brand); }
.destination-route-facts > i { align-self: center; color: var(--brand); font-style: normal; }
.destination-route-card > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding: var(--s-3) var(--s-4); }
.destination-route-card > footer small { color: var(--muted); }

@media (max-width: 60rem) {
  .destination-account-grid,
  .destination-account-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .destination-deposit-grid,
  .destination-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-route-grid { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .destination-hero { grid-template-columns: 1fr; }
  .destination-hero-action { width: fit-content; }
  .destination-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-metrics > div:nth-child(2) { border-right: 0; }
  .destination-metrics > div:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--surface) 18%, transparent); }
  .destination-insights { grid-template-columns: 1fr; }
  .destination-insight { min-height: 0; }
  .destination-route-preview { grid-template-columns: 1fr; }
  .destination-route-preview > i { display: none; }
  .destination-route-preview > div { border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, var(--rule)); }
  .destination-route-preview > div:last-child { border-bottom: 0; }
}

@media (max-width: 44rem) {
  .destination-hero,
  .destination-reading,
  .destination-composer,
  .destination-editor,
  .destination-catalog,
  .destination-empty { padding: var(--s-4); }
  .destination-metrics { margin: var(--s-2) calc(var(--s-4) * -1) calc(var(--s-4) * -1); }
  .destination-metrics > div { padding: var(--s-3) var(--s-4); }
  .destination-section-heading,
  .destination-account-section > header,
  .destination-route-head,
  .destination-route-card > footer,
  .destination-empty { align-items: flex-start; flex-direction: column; }
  .destination-section-heading > .btn,
  .destination-empty > .btn { width: 100%; }
  .destination-account-grid,
  .destination-account-strip,
  .destination-deposit-grid,
  .destination-location-grid,
  .destination-editor-grid { grid-template-columns: 1fr; }
  .destination-route-facts { grid-template-columns: 1fr; }
  .destination-route-facts > i { display: none; }
  .destination-route-facts > div { border-bottom: 1px solid var(--rule); }
  .destination-route-facts > div:last-child { border-bottom: 0; }
  .destination-form-actions > small { width: 100%; margin-left: 0; }
}

/* ---------- passo a passo ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--s-4) 2.1rem;
  color: var(--ink-2);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  display: grid;
  place-items: center;
}
.steps li b { color: var(--ink); font-weight: var(--fw-semibold); }
.steps code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: var(--surface-sunk);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  word-break: break-all;
}

/* ---------- login ---------- */
/* ---------- autenticação ----------
 *
 * Sete telas herdam esta casca: entrar, segundo fator, confirmar senha,
 * esqueci/redefinir e as duas de convite. O painel da esquerda e' identidade
 * e contexto; a direita e' a unica coluna com foco e acao. Nada de
 * interativo mora na aside, entao a ordem do DOM ja e' a ordem de foco.
 */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.auth-aside {
  background: var(--brand-strong);
  color: var(--brand-ink);
  padding: var(--s-6) clamp(var(--s-5), 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
}
.auth-aside .brand { font-size: var(--text-md); color: var(--brand-ink); }
.auth-aside .brand small { color: var(--brand-ink); opacity: .72; }
.auth-claim {
  margin: var(--s-5) 0 0;
  max-width: 18ch;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.auth-traits { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.auth-traits li { display: flex; gap: var(--s-3); align-items: flex-start; opacity: .85; }
.auth-traits svg { flex: none; margin-top: .15em; }

.auth-main { display: grid; place-items: center; padding: var(--s-6) var(--s-5); }
.auth-card { width: 100%; max-width: 22.5rem; }
.auth-card h1 { font-size: var(--text-xl); margin: 0 0 var(--s-1); }
.auth-lead { margin: 0 0 var(--s-5); color: var(--muted); font-size: var(--text-sm); }
.auth-aux {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--text-sm);
}
.auth-aux label { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-regular); color: var(--ink-2); }
.auth-aux input[type="checkbox"] { width: auto; accent-color: var(--brand); }
.auth-foot { margin: var(--s-5) 0 0; font-size: var(--text-xs); color: var(--muted); text-align: center; }

/* Botao que ocupa a linha inteira. Nasceu como style="width:100%;
 * justify-content:center" repetido em cinco telas de autenticacao. */
.btn-block { width: 100%; justify-content: center; min-height: 42px; }

/* Caminho alternativo de autenticacao — hoje o codigo de recuperacao do
 * segundo fator. Fica recolhido: e' saida de excecao, nao a via normal. */
.auth-alt { margin-top: var(--s-4); font-size: var(--text-sm); }
.auth-alt summary { cursor: pointer; color: var(--muted); }
.auth-alt form { margin-top: var(--s-3); }

/* Abaixo de 60rem a aside deixa de ser coluna e vira faixa de topo: a
 * identidade continua presente, sem empurrar o formulario para fora da
 * primeira dobra. */
@media (max-width: 60rem) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { padding: var(--s-5); gap: var(--s-4); }
  .auth-claim { max-width: none; font-size: var(--text-md); margin-top: var(--s-3); }
  .auth-traits { display: none; }
  .auth-main { padding: var(--s-5); align-content: start; }
}

/*
 * Elementos de carregamento nascem ocultos.
 *
 * O Livewire injeta a própria regra, mas só depois que o script dele carrega.
 * Declarar aqui evita que os dois rótulos do botão apareçam juntos no primeiro
 * paint, numa conexão lenta.
 */
[wire\:loading], [wire\:loading\.delay] { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Verificação em duas etapas */
.qr { margin: 1rem 0; padding: 1rem; background: #fff; border: 1px solid #e2e4e8; border-radius: 6px; display: inline-block; }
.qr svg { display: block; width: 12rem; height: 12rem; }
.recovery-codes { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .35rem; }
.recovery-codes code { font-size: var(--text-base); }

/* Confirmação por segundo fator, na linha da conta */
.inline-confirm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.inline-confirm input { width: 7rem; font-family: ui-monospace, monospace; letter-spacing: .12em; }
.inline-confirm .field-error { flex-basis: 100%; margin: 0; }
.disconnect-confirm { flex-basis: 100%; width: min(100%, 38rem); }
.disconnect-confirm .alert { margin-bottom: var(--s-3); }

/* ---------- discovery Bling ---------- */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.section-head h2 { margin-bottom: var(--s-1); }
.section-head p, .muted { margin: 0; color: var(--muted); font-size: var(--text-sm); }

.account-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-2); }
.account-tab {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: var(--s-3);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.account-tab span { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.account-tab small { color: var(--muted); }
.account-tab-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }

.sync-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.sync-strip > div { background: var(--surface-sunk); border-radius: var(--radius-sm); padding: var(--s-3); }
.sync-strip small { display: block; color: var(--muted); margin-top: var(--s-1); }
.sync-label { font-weight: var(--fw-semibold); margin-right: var(--s-2); }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.metric { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--s-4); }
.metric span { display: block; color: var(--muted); font-size: var(--text-sm); }
.metric strong { display: block; font-size: var(--text-lg); margin-top: var(--s-1); }
.metric-primary { border-color: var(--brand); background: var(--brand-soft); }
.metric-danger { border-color: var(--danger); background: var(--danger-soft); }

.diagnostic-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-5); }
.diagnostic-columns h3, .distribution-grid h3 { font-size: var(--text-base); margin: 0 0 var(--s-3); }
.distribution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.stat-list { margin: 0; }
.stat-list div { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.stat-list dt { color: var(--ink-2); }
.stat-list dd { margin: 0; font-weight: var(--fw-semibold); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; }
th { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
td code { font-family: var(--mono); }
.empty-compact { padding-block: var(--s-3); }
.empty-compact p { margin-bottom: 0; }

@media (max-width: 90rem) {
  /* Em notebooks, marca e identidade ficam na primeira faixa; os grupos
     recebem toda a largura na segunda sem abandonar a rolagem horizontal. */
  .topbar { flex-wrap: wrap; row-gap: var(--s-2); }
  .topnav { order: 3; flex-basis: 100%; padding-bottom: var(--s-1); }
  .topbar-user { margin-left: auto; }
}

@media (max-width: 44rem) {
  .page { padding-inline: var(--s-3); }
  .section-head { align-items: stretch; flex-direction: column; }
  .metric-grid, .diagnostic-columns, .distribution-grid, .sync-strip { grid-template-columns: 1fr; }
}

/* Tabela de itens do catálogo */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.data-table th { text-align: left; font-weight: var(--fw-semibold); color: #4a4a4a; border-bottom: 1px solid #e2e4e8; padding: .5rem .75rem .5rem 0; white-space: nowrap; }
.data-table td { padding: .55rem .75rem .55rem 0; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
.data-table .mono { font-family: ui-monospace, monospace; font-size: var(--text-sm); white-space: nowrap; }

/* Paginação da plataforma — ver resources/views/pagination/plataforma.blade.php */
.pagination { margin-top: var(--s-4); }
.pagination-status { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--s-2); }
.pagination-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.pagination-link {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 2.25rem; padding: 0 var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm);
  cursor: pointer; text-decoration: none;
}
.pagination-link { transition: border-color .12s ease, color .12s ease; }
.pagination-link:hover:not(.pagination-off):not(.pagination-current) { border-color: var(--brand); color: var(--brand); }
.pagination-current { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-semibold); }
/* Sem `cursor: pointer`: não é clicável, e o cursor não deve mentir. */
.pagination-off { color: var(--muted); background: var(--surface-sunk); cursor: default; }
.pagination-gap { padding: 0 var(--s-1); color: var(--muted); }

/* Só para leitor de tela: rótulo que a diagramação já entrega visualmente. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Mapa do catálogo: visão macro das camadas e grafo somente sob demanda.

   Representação, sinal, canônico e vínculo são universos diferentes. O layout
   os aproxima sem usar largura proporcional ou funil, que ensinaria uma
   conversão inexistente. Barras percentuais só aparecem dentro do mesmo
   universo: cobertura da conta e partição das suas representações.
---------------------------------------------------------------------------- */
.page:has(.catalog-map) { max-width: 96rem; }
.catalog-map { display: grid; gap: var(--s-4); }
.catalog-map-hero { display: grid; gap: var(--s-5); padding: var(--s-6); overflow: hidden; }
.catalog-map-head,
.catalog-map-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
}
.catalog-map-head > div:first-child,
.catalog-map-section-heading > div { min-width: 0; }
.catalog-map-head h1 { margin: var(--s-1) 0; }
.catalog-map-head p { max-width: 50rem; margin: 0; color: var(--ink-2); }
.catalog-map-kicker,
.catalog-map-layer-step {
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.catalog-map-freshness {
  display: grid;
  flex: none;
  gap: var(--s-1);
  min-width: 14rem;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
}
.catalog-map-freshness span,
.catalog-map-freshness small { color: var(--muted); font-size: var(--text-xs); }
.catalog-map-rule {
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--rule));
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--ink-2);
}
.catalog-map-rule strong { color: var(--ink); }
.catalog-map-section-heading { align-items: end; }
.catalog-map-section-heading h2 { margin: var(--s-1) 0 0; font-size: var(--text-lg); }
.catalog-map-section-heading > p { max-width: 36rem; margin: 0; color: var(--muted); text-align: right; }
.catalog-map-layers {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog-map-layer {
  --catalog-layer-color: var(--rule-strong);
  position: relative;
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--catalog-layer-color) 34%, var(--rule));
  border-top: 4px solid var(--catalog-layer-color);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--catalog-layer-color) 12%, transparent), transparent 38%),
    var(--surface);
}
.catalog-map-layer-observed { --catalog-layer-color: var(--ink-2); }
.catalog-map-layer-signal { --catalog-layer-color: var(--warn); }
.catalog-map-layer-memory { --catalog-layer-color: var(--brand); }
.catalog-map-layer-connected { --catalog-layer-color: var(--brand-strong); }
.catalog-map-layer > strong {
  display: block;
  margin-top: var(--s-3);
  color: var(--catalog-layer-color);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}
.catalog-map-layer h3 { margin: var(--s-1) 0 var(--s-2); font-size: var(--text-md); }
.catalog-map-layer > p { min-height: 3.6rem; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.catalog-map-mini-meters { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.catalog-map-mini-meters > div {
  display: grid;
  grid-template-columns: 3rem minmax(4rem, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}
.catalog-map-mini-meters span,
.catalog-map-mini-meters small { color: var(--muted); font-size: var(--text-2xs); }
.catalog-map-meter {
  height: .45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-sunk);
}
.catalog-map-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.catalog-map-meter-image > span { background: var(--warn); }
.catalog-map-layer-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
}
.catalog-map-layer-pairs > div { padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.catalog-map-layer-pairs dt { color: var(--muted); font-size: var(--text-2xs); }
.catalog-map-layer-pairs dd { margin: var(--s-1) 0 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.catalog-map-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.catalog-map-insight {
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--rule));
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.catalog-map-insight-warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--rule));
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.catalog-map-insight h2 { margin: var(--s-1) 0; font-size: var(--text-md); }
.catalog-map-insight p { margin: 0; color: var(--ink-2); }
.catalog-map-coverage,
.catalog-map-candidates { padding: var(--s-5); }
.catalog-map-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); }
.catalog-map-legend span { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--muted); font-size: var(--text-xs); }
.catalog-map-legend i { width: .75rem; height: .75rem; border-radius: 2px; }
.catalog-map-legend .is-linked,
.catalog-map-relation-bar .is-linked { background: var(--ok); }
.catalog-map-legend .is-candidate,
.catalog-map-relation-bar .is-candidate { background: var(--warn); }
.catalog-map-legend .is-absent,
.catalog-map-relation-bar .is-absent { background: var(--surface-sunk); }
.catalog-map-table { min-width: 76rem; margin-top: var(--s-4); }
.catalog-map-table caption { padding-bottom: var(--s-3); color: var(--muted); font-size: var(--text-sm); text-align: left; }
.catalog-map-table th,
.catalog-map-table td { padding-block: var(--s-3); vertical-align: middle; }
.catalog-map-table tbody th { max-width: 18rem; }
.catalog-map-table tbody th > strong,
.catalog-map-table tbody th > .status,
.catalog-map-table td > small,
.catalog-map-table td > time { display: block; }
.catalog-map-table tbody th > .status { width: fit-content; margin-top: var(--s-1); }
.catalog-map-table td > small,
.catalog-map-table td > time { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.catalog-map-table .catalog-map-meter { min-width: 8rem; }
.catalog-map-cell-status { display: block; width: fit-content; margin-top: var(--s-1); }
.catalog-map-cell-number { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.catalog-map-relation-bar {
  display: flex;
  width: 100%;
  min-width: 16rem;
  height: .7rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-sunk);
}
.catalog-map-relation-bar span { display: block; height: 100%; }
.catalog-map-relation-counts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.catalog-map-relation-counts span { color: var(--muted); font-size: var(--text-2xs); }
.catalog-map-relation-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.catalog-map-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.catalog-map-signal-card {
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--rule));
  border-top: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.catalog-map-signal-strong { border-color: color-mix(in srgb, var(--brand) 34%, var(--rule)); border-top-color: var(--brand); background: var(--brand-soft); }
.catalog-map-signal-card > span { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.catalog-map-signal-card > strong { display: block; margin-top: var(--s-2); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.catalog-map-signal-card p { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.catalog-map-empty-note { padding: var(--s-3); border-left: 3px solid var(--rule-strong); background: var(--surface-sunk); color: var(--muted); }
.catalog-map-candidate-table { margin-top: var(--s-4); }
.catalog-map-candidate-table td:last-child { text-align: right; }

@media (max-width: 60rem) {
  .catalog-map-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-map-table { min-width: 68rem; }
}

@media (max-width: 44rem) {
  .catalog-map-head,
  .catalog-map-section-heading { align-items: stretch; flex-direction: column; }
  .catalog-map-section-heading > p { max-width: none; text-align: left; }
  .catalog-map-freshness { width: auto; min-width: 0; }
  .catalog-map-hero,
  .catalog-map-coverage,
  .catalog-map-candidates { padding: var(--s-4); }
  .catalog-map-layers,
  .catalog-map-insights,
  .catalog-map-signal-grid { grid-template-columns: 1fr; }
  .catalog-map-layer > p { min-height: 0; }
  .catalog-map-legend { justify-content: flex-start; }
}

/* Ramificação de um código — ver partials/catalog-branch.blade.php.
   As linhas são pseudo-elementos: decoração, fora da árvore de acessibilidade. */
.branch { padding: var(--s-4) 0; }
.branch-root {
  display: inline-block; margin: 0 auto; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-semibold);
}
.branch > .branch-root { display: block; width: fit-content; }
.branch-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
  list-style: none; margin: 0; padding: var(--s-4) 0 0; position: relative;
}
/* O tronco que desce do código até a linha dos ramos. */
.branch-list::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--s-4);
  background: var(--rule-strong, var(--rule));
}
/* A barra horizontal liga o tronco aos ramos. Não carrega significado: a
   lista HTML logo abaixo é a representação acessível da mesma relação. */
.branch-list::after {
  content: ""; position: absolute; top: var(--s-4); left: 10%; right: 10%; height: 1px;
  background: var(--rule-strong, var(--rule));
}
.branch-node {
  position: relative; flex: 1 1 15rem; max-width: 22rem;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: var(--s-3); background: var(--surface);
}
/* O ramo que sobe de cada conta até o tronco. */
.branch-node::before {
  content: ""; position: absolute; top: calc(var(--s-4) * -1); left: 50%;
  width: 1px; height: var(--s-4); background: var(--rule-strong, var(--rule));
}
.branch-node h4 { margin: 0 0 var(--s-2); font-size: var(--text-base); }
.branch-node .stat-list dt { font-size: var(--text-sm); }
.branch-verdict { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.branch-verdict p { margin: 0 0 var(--s-2); }

@media (max-width: 44rem) {
  .branch-list { flex-direction: column; }
  .branch-list::before, .branch-list::after, .branch-node::before { display: none; }
}

/* ---------- Dados Bling: saúde, profundidade e qualidade do espelho ---------- */
.page:has(.bling-data-dashboard) { max-width: 96rem; }
.bling-data-dashboard { display: grid; gap: var(--s-4); }
.bling-data-hero {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand) 15%, transparent), transparent 34%),
    var(--surface);
}
.bling-data-hero-head,
.bling-data-section-head,
.bling-data-command-head,
.bling-data-account-top,
.bling-data-detail-head,
.bling-data-quality-list li > div:first-child,
.bling-data-progress-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.bling-data-hero-head > div:first-child,
.bling-data-section-head > div,
.bling-data-command-head > div,
.bling-data-detail-head > div { min-width: 0; }
.bling-data-hero h1 { margin: var(--s-1) 0; }
.bling-data-hero-head p,
.bling-data-section-head p,
.bling-data-command-head p,
.bling-data-subhead p { max-width: 54rem; margin: 0; color: var(--muted); }
.bling-data-kicker {
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bling-data-freshness {
  display: grid;
  flex: none;
  min-width: 17rem;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
}
.bling-data-freshness span,
.bling-data-freshness small { color: var(--muted); font-size: var(--text-xs); }
.bling-data-authority {
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--rule));
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-soft) 58%, var(--surface));
  color: var(--ink-2);
}
.bling-data-authority strong { color: var(--ink); }
.bling-data-global-metrics,
.bling-data-catalog-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--rule);
}
.bling-data-global-metrics > div,
.bling-data-catalog-metrics > div { min-width: 0; padding: var(--s-4); background: var(--surface); }
.bling-data-global-metrics dt,
.bling-data-catalog-metrics dt { color: var(--muted); font-size: var(--text-xs); }
.bling-data-global-metrics dd,
.bling-data-catalog-metrics dd {
  margin: var(--s-1) 0 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.bling-data-global-metrics small,
.bling-data-catalog-metrics small { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.bling-data-catalog-metrics .is-primary { background: var(--brand-soft); }
.bling-data-catalog-metrics .is-primary dd { color: var(--brand-strong); }
.bling-data-catalog-metrics .is-danger { background: var(--danger-soft); }
.bling-data-catalog-metrics .is-danger dd { color: var(--danger); }

.bling-data-account-picker,
.bling-data-command,
.bling-data-catalog,
.bling-data-deposits,
.bling-product-browser { padding: var(--s-5); }
.bling-data-section-head { align-items: end; margin-bottom: var(--s-4); }
.bling-data-section-head h2,
.bling-data-command-head h2 { margin: var(--s-1) 0; font-size: var(--text-lg); }
.bling-data-section-head > time { color: var(--muted); font-size: var(--text-xs); }
.bling-data-account-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}
.bling-data-account {
  display: grid;
  min-width: 0;
  min-height: 9.5rem;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bling-data-account:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface)); }
.bling-data-account:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bling-data-account.is-selected {
  border-color: var(--brand);
  border-top-color: var(--brand-strong);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.bling-data-account.is-historical { border-top-color: var(--rule-strong); background: var(--surface-sunk); }
.bling-data-account-top { align-items: flex-start; }
.bling-data-account-top strong { min-width: 0; overflow-wrap: anywhere; }
.bling-data-account-top .status { flex: none; font-style: normal; }
.bling-data-account-unit { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.bling-data-account-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); color: var(--muted); font-size: var(--text-xs); }
.bling-data-account-facts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bling-data-account > small { align-self: end; margin-top: auto; color: var(--muted); font-size: var(--text-2xs); }
.bling-data-history { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.bling-data-history > summary,
.bling-data-duplicates > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  color: var(--brand-strong);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.bling-data-history > summary::marker,
.bling-data-duplicates > summary::marker { color: var(--brand); }
.bling-data-history > summary small,
.bling-data-duplicates > summary small { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-regular); }
.bling-data-history[open] > summary { margin-bottom: var(--s-3); }

.bling-data-command { display: grid; gap: var(--s-4); }
.bling-data-command-head { align-items: center; }
.bling-data-command-head .btn { flex: none; }
.bling-data-diagnosis {
  --diagnosis: var(--brand);
  --diagnosis-soft: var(--brand-soft);
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--diagnosis) 34%, var(--rule));
  border-left: 4px solid var(--diagnosis);
  border-radius: var(--radius-sm);
  background: var(--diagnosis-soft);
}
.bling-data-diagnosis.is-danger { --diagnosis: var(--danger); --diagnosis-soft: var(--danger-soft); }
.bling-data-diagnosis.is-warn { --diagnosis: var(--warn); --diagnosis-soft: var(--warn-soft); }
.bling-data-diagnosis.is-ok { --diagnosis: var(--ok); --diagnosis-soft: var(--ok-soft); }
.bling-data-diagnosis.is-idle { --diagnosis: var(--rule-strong); --diagnosis-soft: var(--surface-sunk); }
.bling-data-diagnosis > span { color: var(--diagnosis); font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.bling-data-diagnosis > strong { font-size: var(--text-md); }
.bling-data-diagnosis > p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.bling-data-pipeline {
  display: grid;
  grid-template-columns: .75fr 1.1fr 1.45fr;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bling-data-pipeline > li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.bling-data-pipeline > li.is-complete { border-top-color: var(--ok); background: var(--ok-soft); }
.bling-data-pipeline > li.is-running { border-top-color: var(--warn); background: var(--warn-soft); }
.bling-data-pipeline > li.is-blocked { border-top-color: var(--danger); background: var(--danger-soft); }
.bling-data-pipeline-step {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.bling-data-pipeline h3 { margin: 0 0 var(--s-2); font-size: var(--text-sm); }
.bling-data-pipeline li > div > strong,
.bling-data-pipeline li > div > small { display: block; }
.bling-data-pipeline li > div > small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.bling-data-run-row {
  display: grid;
  grid-template-columns: minmax(4rem, .55fr) auto minmax(5.5rem, 1fr);
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule-strong) 30%, transparent);
}
.bling-data-run-row:last-child { border-bottom: 0; }
.bling-data-run-row > span:first-child { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.bling-data-run-row small { color: var(--muted); font-size: var(--text-2xs); text-align: right; }
.bling-data-detail-head { align-items: center; }
.bling-data-detail-head .btn { flex: none; }
.bling-data-progress {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rule-strong) 26%, var(--surface));
}
.bling-data-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.bling-data-pipeline .bling-data-progress { margin-top: var(--s-3); background: color-mix(in srgb, var(--rule-strong) 30%, transparent); }
.bling-data-progress-caption { align-items: center; margin-top: var(--s-2); }
.bling-data-progress-caption small { color: var(--muted); font-size: var(--text-2xs); }

.bling-data-catalog { display: grid; gap: var(--s-5); }
.bling-data-catalog .bling-data-section-head { margin-bottom: 0; }
.bling-data-catalog-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bling-data-quality-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr); gap: var(--s-5); }
.bling-data-subhead h3 { margin: 0 0 var(--s-1); font-size: var(--text-md); }
.bling-data-quality-list { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.bling-data-quality-list li { display: grid; gap: var(--s-1); }
.bling-data-quality-list li > div:first-child { align-items: baseline; }
.bling-data-quality-list li > div:first-child span { font-weight: var(--fw-semibold); }
.bling-data-quality-list li > div:first-child small { margin-right: auto; padding: .1rem .35rem; border-radius: 999px; background: var(--surface-sunk); color: var(--muted); font-size: var(--text-2xs); }
.bling-data-quality-list li > div:first-child strong { font-variant-numeric: tabular-nums; }
.bling-data-quality-list li > small { color: var(--muted); font-size: var(--text-2xs); }
.bling-data-alert-stack { display: grid; gap: var(--s-3); }
.bling-data-risk {
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.bling-data-risk.is-danger { border-color: color-mix(in srgb, var(--danger) 34%, var(--rule)); border-left-color: var(--danger); background: var(--danger-soft); }
.bling-data-risk > span { color: var(--muted); font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.bling-data-risk > strong { display: block; margin-top: var(--s-1); font-size: var(--text-md); }
.bling-data-risk p { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.bling-data-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.bling-data-distributions > section { min-width: 0; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.bling-data-distributions h3 { margin: 0 0 var(--s-3); font-size: var(--text-sm); }
.bling-data-distribution-row { display: grid; grid-template-columns: minmax(4rem, auto) minmax(4rem, 1fr) auto; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.bling-data-distribution-row > span { overflow: hidden; color: var(--ink-2); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.bling-data-distribution-row > strong { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.bling-data-duplicates { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.bling-data-duplicates[open] > summary { margin-bottom: var(--s-3); }
.bling-data-duplicates table { min-width: 30rem; }

.bling-data-deposit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.bling-data-deposit-grid li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-data-deposit-icon { display: block; width: 2rem; height: 2rem; border: .45rem double var(--brand); border-radius: 3px; background: var(--brand-soft); }
.bling-data-deposit-grid strong,
.bling-data-deposit-grid small { display: block; overflow-wrap: anywhere; }
.bling-data-deposit-grid small { margin-top: var(--s-1); color: var(--muted); font-family: var(--mono); font-size: var(--text-2xs); }
.bling-data-deposit-grid .status { justify-self: end; }
.bling-data-deposit-grid .status:last-child { grid-column: 2; justify-self: start; }
.bling-product-browser { display: grid; gap: var(--s-4); }
.bling-product-browser .bling-data-section-head { margin-bottom: 0; }
.bling-browser-total {
  display: grid;
  flex: none;
  min-width: 10rem;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  text-align: right;
}
.bling-browser-total strong { color: var(--brand-strong); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.bling-browser-total span { color: var(--muted); font-size: var(--text-2xs); }
.bling-browser-search {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(15rem, .65fr);
  align-items: end;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.bling-browser-search .field { margin: 0; }
.bling-browser-search input { background: var(--surface); }
.bling-browser-search-state { min-height: 2.75rem; padding: var(--s-3); color: var(--muted); font-size: var(--text-sm); }
.bling-browser-table { min-width: 72rem; }
.bling-browser-table caption { padding-bottom: var(--s-3); color: var(--muted); font-size: var(--text-sm); text-align: left; }
.bling-browser-table th,
.bling-browser-table td { vertical-align: middle; }
.bling-browser-table td > time { color: var(--muted); font-size: var(--text-xs); }
.bling-browser-product-name { min-width: 18rem; max-width: 30rem; }
.bling-browser-signal { display: block; width: fit-content; margin-top: var(--s-1); font-family: sans-serif; }

@media (max-width: 60rem) {
  .bling-data-global-metrics,
  .bling-data-catalog-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bling-data-account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bling-data-pipeline { grid-template-columns: 1fr 1fr; }
  .bling-data-pipeline > li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
  .bling-data-quality-layout { grid-template-columns: 1fr; }
  .bling-data-deposit-grid { grid-template-columns: 1fr; }
  .bling-browser-search { grid-template-columns: 1fr; }
  .bling-browser-search-state { min-height: 0; padding: 0; }
}

@media (max-width: 44rem) {
  .bling-data-hero-head,
  .bling-data-section-head,
  .bling-data-command-head,
  .bling-data-detail-head { align-items: stretch; flex-direction: column; }
  .bling-data-freshness { width: auto; min-width: 0; }
  .bling-data-hero,
  .bling-data-account-picker,
  .bling-data-command,
  .bling-data-catalog,
  .bling-data-deposits,
  .bling-product-browser { padding: var(--s-4); }
  .bling-data-global-metrics,
  .bling-data-catalog-metrics,
  .bling-data-account-grid,
  .bling-data-pipeline,
  .bling-data-distributions { grid-template-columns: 1fr; }
  .bling-data-pipeline > li:last-child { grid-column: auto; }
  .bling-data-command-head .btn,
  .bling-data-detail-head .btn { width: 100%; }
  .bling-browser-total { width: auto; min-width: 0; text-align: left; }
  .bling-data-run-row { grid-template-columns: minmax(4rem, 1fr) auto; }
  .bling-data-run-row small { grid-column: 1 / -1; text-align: left; }
}

/* ---------- esteira de recebimentos ---------- */
.receiving-entry-choice,
.receiving-file-drop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.receiving-entry-choice .account-tab { min-height: 5.25rem; }
.receiving-entry-choice .account-tab span { margin-bottom: var(--s-1); }
.receiving-entry-form-single { display: grid; gap: var(--s-4); }
.receiving-entry-form {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-destination-step:focus { outline: none; }
.receiving-destination-options { display: grid; gap: var(--s-2); }
.receiving-destination-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.receiving-destination-option input { margin-top: .25rem; }
.receiving-destination-option span { min-width: 0; }
.receiving-destination-option strong,
.receiving-destination-option small { display: block; overflow-wrap: anywhere; }
.receiving-destination-option small { color: var(--muted); }
.receiving-destination-summary {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
}
.receiving-destination-summary li {
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--rule));
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-destination-summary strong,
.receiving-destination-summary span { display: block; overflow-wrap: anywhere; }
.receiving-destination-summary span { color: var(--muted); }
.receiving-file-drop > .field {
  padding: var(--s-4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-file-target { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.receiving-file-target-active {
  border-style: solid;
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.receiving-file-selected { margin: var(--s-2) 0 0; color: var(--ok); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.receiving-selected-files { display: grid; gap: var(--s-1); margin: var(--s-2) 0 0; padding: 0; color: var(--ok); list-style: none; }
.receiving-selected-files li { overflow-wrap: anywhere; }
/* Recusa reversivel do reenvio (ADR-0048): aviso, nao erro — o caminho segue
   adiante se a pessoa confirmar. Usa o token de atencao, nao o de perigo. */
.receiving-reimport-confirm {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
}
.receiving-reimport-confirm p { margin: 0 0 var(--s-2); overflow-wrap: anywhere; }
.receiving-reimport-confirm p:last-of-type { margin-bottom: var(--s-3); }
.receiving-reimport-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.receiving-reimport-actions button { flex: 0 0 auto; }
/* O que aconteceu depois do handoff (ADR-0050): mora dentro do item da fila,
   porque "esta pronta?" e "subiu, e o que falta?" sao a mesma pessoa
   perguntando sobre a mesma peca. */
.ecommerce-handoff-publication {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #F7F7F5);
}
.ecommerce-handoff-publication-gap { border-left-color: var(--warn); background: var(--warn-soft); }
.ecommerce-handoff-publication-head { margin: 0 0 var(--s-2); }
.ecommerce-handoff-publication-head small { display: block; color: var(--muted); }
.ecommerce-handoff-steps { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ecommerce-handoff-step {
  padding: 2px var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-sm);
}
.ecommerce-handoff-step-stuck { background: var(--danger-soft, #F7E4E0); color: var(--danger); }
.ecommerce-handoff-publication-gaps { margin: var(--s-2) 0 0; min-width: 0; overflow-wrap: anywhere; }
.ecommerce-handoff-publication-gaps span { display: block; color: var(--muted); }
.ecommerce-handoff-spread { margin: var(--s-2) 0 0; }
.ecommerce-handoff-spread span, .ecommerce-handoff-spread small { display: block; color: var(--muted); }
.ecommerce-handoff-spread-below strong { color: var(--danger); }
/* Perda nao e' pendencia: o palete foi embora sem aquilo. */
.ecommerce-handoff-lost { margin: var(--s-2) 0 0; }
.ecommerce-handoff-lost strong { color: var(--danger); display: block; }
.ecommerce-handoff-lost span, .ecommerce-handoff-lost small { display: block; color: var(--muted); overflow-wrap: anywhere; }
/* A porta da cadeia (ADR-0050), na propria ficha de conferencia. */
.receiving-bling-publish {
  width: 100%;
  margin-top: var(--s-3);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  justify-items: stretch;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.receiving-bling-publish p { margin: 0; }
.receiving-bling-publish strong { display: block; }
.receiving-bling-target {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
.receiving-bling-target > div { min-width: 0; }
.receiving-bling-target small { display: block; color: var(--muted); overflow-wrap: anywhere; }

/* A tela fica verde enquanto a cadeia síncrona trabalha. Os rótulos explicam
   o percurso; a barra é indeterminada porque cada resposta só chega ao fim da
   requisição Livewire e fingir percentuais seria informação falsa. */
.receiving-bling-progress {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgb(7 83 67 / .97);
  color: #FFF;
}
.receiving-bling-progress-panel { width: min(38rem, 100%); display: grid; gap: var(--s-4); }
.receiving-bling-progress-panel > strong { font-size: var(--text-xl); text-align: center; }
.receiving-bling-progress-bar {
  height: .75rem;
  overflow: hidden;
  border: 2px solid #FFF;
  border-radius: 999px;
  background: rgb(255 255 255 / .18);
}
.receiving-bling-progress-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: #FFF;
  animation: receiving-bling-progress 1.25s ease-in-out infinite alternate;
}
.receiving-bling-progress ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style-position: inside;
  font-size: var(--text-sm);
  text-align: center;
}
@keyframes receiving-bling-progress {
  from { transform: translateX(-5%); }
  to { transform: translateX(145%); }
}
@media (prefers-reduced-motion: reduce) {
  .receiving-bling-progress-bar span { animation: none; width: 100%; opacity: .75; }
}

/* Fila compacta do palete: a ficha completa vive apenas na rota do item. */
.receiving-pallet-queue-row {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
    min-height: 5.5rem;
    padding: .75rem 1rem;
}

.receiving-pallet-queue-thumb {
    align-items: center;
    aspect-ratio: 1;
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.receiving-pallet-queue-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.receiving-pallet-match-source {
    background: var(--ink, #1e2926);
    bottom: 0;
    color: var(--surface, #fff);
    font-size: .65rem;
    left: 0;
    padding: .15rem .3rem;
    position: absolute;
}

.receiving-pallet-queue-details,
.receiving-pallet-queue-state {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.receiving-pallet-queue-details strong,
.receiving-pallet-queue-details span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receiving-pallet-queue-state {
    align-items: end;
    justify-items: end;
}

@media (max-width: 48rem) {
    .receiving-pallet-queue-row {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .receiving-pallet-queue-state {
        align-items: start;
        grid-column: 2;
        justify-items: start;
    }
}
@media (max-width: 44rem) {
  .receiving-bling-progress ol { grid-template-columns: 1fr 1fr; text-align: left; }
  .receiving-bling-target { align-items: stretch; flex-direction: column; }
  .receiving-bling-target .btn { width: 100%; }
}
/* O que morre com o palete. Aviso, nao trava: quem esta com pressa publica
   assim mesmo, mas vendo o que esta abrindo mao. */
.receiving-lost-if-skipped {
  margin: 0;
  padding: var(--s-3);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.receiving-lost-if-skipped strong { display: block; }
.receiving-lost-if-skipped span { display: block; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.receiving-lost-if-skipped small { display: block; color: var(--muted); }
/* Sobra bruta (pedido do dono, 04/09): cor NUNCA sozinha — a D-109 exige texto
   junto, e reserva o vermelho a bloqueio comprovado. Preco abaixo do custo e'
   fato; sobra apertada e' julgamento, e julgamento pede atencao, nao alarme. */
.receiving-gross-spread {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #F7F7F5);
}
.receiving-gross-spread-healthy { border-left-color: var(--ok); }
.receiving-gross-spread-tight { border-left-color: var(--warn); background: var(--warn-soft); }
.receiving-gross-spread-below { border-left-color: var(--danger); background: var(--danger-soft, #F7E4E0); }
.receiving-gross-spread strong { display: block; margin-bottom: var(--s-2); }
.receiving-gross-spread dl { display: grid; gap: var(--s-1); margin: 0 0 var(--s-2); }
.receiving-gross-spread dl > div { display: flex; justify-content: space-between; gap: var(--s-3); }
.receiving-gross-spread dt { color: var(--muted); }
.receiving-gross-spread dd { margin: 0; font-weight: var(--fw-semibold); }
.receiving-gross-spread small { display: block; color: var(--muted); }
.receiving-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-3);
}
.receiving-form-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.supplier-layout-review { margin-bottom: var(--s-4); }
.supplier-layout-card { border-left: 3px solid var(--warn); }
.supplier-layout-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.supplier-layout-heading h2, .supplier-layout-heading p { margin: 0; }
.supplier-layout-heading p { margin-top: var(--s-1); color: var(--muted); max-width: 62ch; }
.supplier-layout-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.supplier-layout-meta div { padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.supplier-layout-meta dt { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; }
.supplier-layout-meta dd { margin: var(--s-1) 0 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.supplier-layout-issues { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.supplier-layout-issues li + li { margin-top: var(--s-1); }
.supplier-layout-table th, .supplier-layout-table td { min-width: 10rem; vertical-align: top; }
.supplier-layout-table th:first-child, .supplier-layout-table td:first-child { min-width: 9rem; }
.supplier-layout-table td > strong, .supplier-layout-table td > small { display: block; }
.supplier-layout-table td > small { margin-top: var(--s-1); color: var(--muted); line-height: 1.35; }
.supplier-layout-table td > small.field-error { color: var(--danger); }
.supplier-layout-table select { min-width: 15rem; }
.supplier-layout-samples { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.supplier-layout-samples li { overflow-wrap: anywhere; }
.supplier-layout-empty { color: var(--muted); font-style: italic; }
.supplier-layout-justification { margin-top: var(--s-4); }
.supplier-layout-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.supplier-layout-actions small { flex-basis: 100%; color: var(--muted); }

.receiving-authority-note { margin-bottom: var(--s-5); }
.receiving-index-list { display: grid; gap: var(--s-3); }
.receiving-index-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1.35fr) minmax(12rem, .9fr) minmax(17rem, 1fr);
  gap: var(--s-3) var(--s-5);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-index-identity { min-width: 0; }
.receiving-index-identity h3 { margin: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.receiving-index-identity p,
.receiving-index-state small,
.receiving-index-meta span { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-sm); }
.receiving-index-state { display: grid; justify-items: start; gap: var(--s-1); }
.receiving-index-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
.receiving-index-facts div { min-width: 0; }
.receiving-index-facts dt { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; }
.receiving-index-facts dd { margin: var(--s-1) 0 0; font-weight: var(--fw-semibold); }
.receiving-index-facts small { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-xs); }
.receiving-index-composition {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-size: var(--text-sm);
}
.receiving-index-composition > strong,
.receiving-index-composition > small { flex-basis: 100%; }
.receiving-index-composition > span { overflow-wrap: anywhere; }
.receiving-index-composition > small { color: var(--muted); }
.receiving-index-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.receiving-index-meta span { margin: 0; }

/* diagnóstico operacional exclusivo do índice de recebimentos */
.receiving-diagnostic-page { width: 100%; }
.receiving-diagnostic-list { display: grid; gap: var(--s-5); }
.receiving-diagnostic-card {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.receiving-diagnostic-head,
.receiving-diagnostic-section-head,
.receiving-diagnostic-priority-head,
.receiving-diagnostic-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.receiving-diagnostic-identity,
.receiving-diagnostic-section-head > div,
.receiving-diagnostic-priority-head > div { min-width: 0; }
.receiving-diagnostic-identity h3,
.receiving-diagnostic-identity p,
.receiving-diagnostic-section-head h4,
.receiving-diagnostic-section-head p,
.receiving-diagnostic-priority-head h5,
.receiving-diagnostic-priority-head p { margin: 0; }
.receiving-diagnostic-identity h3 { overflow-wrap: anywhere; }
.receiving-diagnostic-identity p,
.receiving-diagnostic-section-head p,
.receiving-diagnostic-priority-head p,
.receiving-diagnostic-state small,
.receiving-diagnostic-processing p,
.receiving-diagnostic-meta span { color: var(--muted); font-size: var(--text-xs); }
.receiving-diagnostic-state { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink); }
.receiving-diagnostic-state strong,
.receiving-diagnostic-state small { display: block; }
.receiving-diagnostic-state-mark { flex: none; width: .72rem; height: .72rem; margin-top: .32rem; background: var(--brand); }
.receiving-diagnostic-state-circle { border-radius: 50%; }
.receiving-diagnostic-state-triangle {
  width: 0;
  height: 0;
  border-right: .42rem solid transparent;
  border-bottom: .72rem solid var(--warn);
  border-left: .42rem solid transparent;
  background: transparent;
}
.receiving-diagnostic-state-square { border-radius: 1px; background: var(--ok); }
.receiving-diagnostic-processing {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.receiving-diagnostic-processing { display: grid; gap: var(--s-3); }
.receiving-diagnostic-processing p { margin: 0; }
.receiving-diagnostic-headlines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
}
.receiving-diagnostic-headlines div {
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-diagnostic-headlines dt { color: var(--muted); font-size: var(--text-2xs); letter-spacing: .04em; text-transform: uppercase; }
.receiving-diagnostic-headlines dd {
  margin: var(--s-1) 0 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
.receiving-diagnostic-track {
  width: 100%;
  overflow: hidden;
  border-radius: 100px;
  background: var(--brand-soft);
}
.receiving-diagnostic-track { height: .72rem; }
.receiving-diagnostic-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.receiving-diagnostic-track > span { width: var(--receiving-progress); }
.receiving-diagnostic-pallet-strip {
  min-width: 0;
  overflow-x: auto;
}
.receiving-diagnostic-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.receiving-diagnostic-priority {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-diagnostic-priority h5 { font-size: var(--text-base); overflow-wrap: anywhere; }
.receiving-diagnostic-criterion {
  width: fit-content;
  padding: .18rem .45rem;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.receiving-diagnostic-contents { display: grid; gap: var(--s-3); }
.receiving-diagnostic-contents > div,
.receiving-diagnostic-missing { display: grid; gap: var(--s-1); color: var(--ink-2); font-size: var(--text-xs); }
.receiving-diagnostic-contents strong,
.receiving-diagnostic-missing strong { color: var(--ink); }
.receiving-diagnostic-contents ol { margin: 0; padding-left: 1.1rem; }
.receiving-diagnostic-contents li { min-width: 0; }
.receiving-diagnostic-contents .receiving-diagnostic-item-with-photo {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
}
.receiving-diagnostic-item-photo {
  width: 3rem;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-diagnostic-contents li + li { margin-top: var(--s-1); }
.receiving-diagnostic-contents li small { display: block; color: var(--muted); }
.receiving-diagnostic-missing { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.receiving-diagnostic-gap { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.receiving-diagnostic-composition-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
  color: var(--ink-2);
  font-size: var(--text-xs);
}
.receiving-diagnostic-composition-table th,
.receiving-diagnostic-composition-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.receiving-diagnostic-composition-table thead th {
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.receiving-diagnostic-composition-table tbody th { color: var(--ink); }
.receiving-diagnostic-composition-table td span,
.receiving-diagnostic-composition-table td small { display: block; }
.receiving-diagnostic-composition-table td span + span,
.receiving-diagnostic-composition-table td small { margin-top: var(--s-1); }
.receiving-diagnostic-composition-table td small { color: var(--muted); }
.receiving-diagnostic-meta { align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--rule); }

@media (max-width: 60rem) {
  .receiving-diagnostic-headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-diagnostic-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .receiving-diagnostic-card { padding: var(--s-3); }
  .receiving-diagnostic-head,
  .receiving-diagnostic-section-head,
  .receiving-diagnostic-meta { align-items: stretch; flex-direction: column; }
  .receiving-diagnostic-priority-grid { grid-template-columns: minmax(0, 1fr); }
  .receiving-diagnostic-meta .btn { justify-content: center; }
}

/* central de comando compacta do índice de recebimentos */
.receiving-command-head { align-items: end; }
.receiving-command-head h1,
.receiving-command-head p,
.receiving-command-briefing h3,
.receiving-command-briefing p,
.receiving-index-study h4,
.receiving-index-study p,
.receiving-pallet-preview h4,
.receiving-pallet-preview p { margin: 0; }
.receiving-command-eyebrow {
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.receiving-command-authority {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-5);
  color: var(--ink-2);
  font-size: var(--text-xs);
}
.receiving-command-authority > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: var(--fw-bold);
}
.receiving-command-authority p { margin: 0; }
.receiving-command-briefing {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--radius);
  background: var(--brand-strong);
  color: var(--surface);
}
.receiving-command-briefing__head,
.receiving-command-briefing__head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.receiving-command-briefing__head .receiving-command-eyebrow,
.receiving-command-briefing__head small { color: color-mix(in srgb, var(--surface) 76%, transparent); }
.receiving-command-briefing__head h3 { color: var(--surface); }
.receiving-command-pulse {
  width: .72rem;
  height: .72rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ok);
}
.receiving-command-briefing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.receiving-command-signal {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--surface) 24%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 8%, transparent);
}
.receiving-command-signal > div { display: flex; align-items: baseline; gap: var(--s-2); }
.receiving-command-signal > div strong {
  color: var(--surface);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.receiving-command-signal > div span,
.receiving-command-signal p { color: color-mix(in srgb, var(--surface) 82%, transparent); font-size: var(--text-xs); }
.receiving-command-signal a { width: fit-content; color: var(--surface); font-size: var(--text-xs); font-weight: var(--fw-bold); }
.receiving-command-signal.is-attention { background: color-mix(in srgb, var(--warn) 22%, var(--brand-strong)); }
.receiving-command-signal.is-value { background: color-mix(in srgb, var(--ok) 16%, var(--brand-strong)); }

.receiving-diagnostic-list { gap: var(--s-4); }
.receiving-diagnostic-card {
  position: relative;
  gap: var(--s-3);
  padding: var(--s-4);
  overflow: hidden;
  background: var(--surface);
}
.receiving-diagnostic-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .2rem;
  background: var(--brand);
}
.receiving-diagnostic-card-processing::before { background: var(--warn); }
.receiving-diagnostic-card-completed::before { background: var(--ok); }
.receiving-diagnostic-identity { display: grid; gap: var(--s-1); }
.receiving-diagnostic-identity .receiving-diagnostic-state { margin-bottom: var(--s-1); }
.receiving-diagnostic-identity__main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.receiving-diagnostic-identity__copy { min-width: 0; }
.receiving-diagnostic-identity h3 { font-size: var(--text-lg); line-height: 1.2; }
.receiving-diagnostic-head__action {
  display: grid;
  justify-items: end;
  gap: var(--s-2);
  text-align: right;
}
.receiving-diagnostic-head__action > span { color: var(--muted); font-size: var(--text-xs); }
.receiving-diagnostic-headlines { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.receiving-diagnostic-headlines div { padding: var(--s-2) var(--s-3); background: var(--surface-sunk); }
.receiving-diagnostic-headlines dd { font-size: var(--text-base); }
.receiving-diagnostic-processing { gap: var(--s-2); padding: var(--s-3); background: var(--surface-sunk); }
.receiving-diagnostic-processing .receiving-diagnostic-track { height: .55rem; }
.receiving-diagnostic-track--compact { height: .35rem; }

.receiving-diagnostic-gallery {
  display: grid;
  grid-template-columns: repeat(5, 2.35rem) minmax(4.75rem, auto);
  flex: none;
  align-items: center;
  justify-content: start;
  gap: .35rem;
}
.receiving-diagnostic-gallery img,
.receiving-diagnostic-gallery__empty {
  width: 2.35rem;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-diagnostic-gallery img { object-fit: cover; }
.receiving-diagnostic-gallery__empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--muted);
}
.receiving-diagnostic-gallery__remainder {
  display: grid;
  width: 100%;
  height: 2.35rem;
  place-items: center;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.receiving-diagnostic-skyline {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-diagnostic-skyline .receiving-diagnostic-section-head > span { color: var(--muted); font-size: var(--text-xs); }
.receiving-diagnostic-skyline__plot {
  display: grid;
  grid-template-columns: repeat(var(--receiving-pallet-count), minmax(0, 1fr));
  align-items: end;
  gap: clamp(.2rem, .5vw, var(--s-2));
  min-height: 5.7rem;
  padding-bottom: var(--s-1);
}
.receiving-diagnostic-skyline__item { display: grid; gap: var(--s-1); min-width: 0; }
.receiving-diagnostic-skyline__bar {
  display: flex;
  align-items: end;
  width: 100%;
  height: 3.6rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface));
  overflow: hidden;
}
.receiving-diagnostic-skyline__bar > span {
  width: 100%;
  height: var(--receiving-pallet-height);
  min-height: .35rem;
  background: var(--brand-soft);
}
.receiving-diagnostic-skyline__item.is-tone-2 .receiving-diagnostic-skyline__bar > span { background: color-mix(in srgb, var(--brand) 34%, var(--surface)); }
.receiving-diagnostic-skyline__item.is-tone-3 .receiving-diagnostic-skyline__bar > span { background: color-mix(in srgb, var(--brand) 58%, var(--surface)); }
.receiving-diagnostic-skyline__item.is-tone-4 .receiving-diagnostic-skyline__bar > span { background: color-mix(in srgb, var(--brand) 80%, var(--surface)); }
.receiving-diagnostic-skyline__item.is-tone-5 .receiving-diagnostic-skyline__bar > span { background: var(--brand-strong); }
.receiving-diagnostic-skyline__bar:hover > span,
.receiving-diagnostic-skyline__bar:focus-visible > span { outline: 2px solid var(--focus); outline-offset: -2px; }
.receiving-diagnostic-skyline__label {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .18rem;
  min-height: 2.45rem;
  text-align: center;
}
.receiving-diagnostic-skyline__label > a {
  color: var(--ink);
  font-size: clamp(.45rem, .62vw, .68rem);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  white-space: nowrap;
}
.receiving-diagnostic-skyline__label button {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.receiving-pallet-category-thumbnails {
  display: flex !important;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: var(--s-2);
}
.receiving-pallet-category-thumbnails > span {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
}
.receiving-pallet-category-thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  object-fit: cover;
}
.receiving-pallet-value { white-space: nowrap; }
.receiving-pallet-value strong { display: block; color: var(--ink); }
.receiving-pallet-value small { color: var(--muted); font-size: var(--text-2xs); }

.receiving-pallet-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.receiving-pallet-ref button {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-strong);
  cursor: pointer;
  font-weight: var(--fw-bold);
}
.receiving-diagnostic-composition-preview > td { padding: var(--s-3) 0 var(--s-4); }
.receiving-diagnostic-composition-preview .receiving-pallet-preview { position: sticky; left: 0; }

.receiving-diagnostic-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.receiving-diagnostic-next > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--s-2);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.receiving-diagnostic-next span { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.receiving-diagnostic-next strong { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.receiving-diagnostic-next small { color: var(--ink-2); font-size: var(--text-xs); }
.receiving-diagnostic-meta { padding-top: var(--s-2); }
.receiving-diagnostic-meta > div { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--s-2); }
.receiving-diagnostic-cancel-link { color: var(--danger); }
.receiving-diagnostic-cancel-link:hover,
.receiving-diagnostic-cancel-link:focus-visible { border-color: var(--danger); color: var(--danger); }
#batch-reprocess-tools,
#batch-cancel-tools { scroll-margin-top: var(--s-5); }

.receiving-pallet-preview,
.receiving-index-study {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.receiving-pallet-preview__head,
.receiving-index-study__head { display: flex; align-items: start; justify-content: space-between; gap: var(--s-3); }
.receiving-pallet-preview dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.receiving-pallet-preview dl div { padding: var(--s-2); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-pallet-preview dt { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; }
.receiving-pallet-preview dd { margin: var(--s-1) 0 0; font-weight: var(--fw-semibold); }
.receiving-pallet-preview__content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.receiving-pallet-preview__content > div { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-pallet-preview__content p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--text-xs); }
.receiving-pallet-preview > .btn { justify-self: start; }
.receiving-index-study { background: var(--surface-sunk); }
.receiving-index-study__head > div { display: grid; gap: var(--s-1); }
.receiving-index-study__head > div > p:last-child { color: var(--muted); font-size: var(--text-xs); }
.receiving-index-study .receiving-diagnostic-item-photo { object-fit: cover; }

.receiving-factual-snapshot {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--rule));
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 72%, var(--surface)), var(--surface) 52%);
}
.receiving-factual-snapshot__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-3);
}
.receiving-factual-snapshot__head > div { display: grid; gap: var(--s-1); }
.receiving-factual-snapshot h5,
.receiving-factual-snapshot h6,
.receiving-factual-snapshot p { margin: 0; }
.receiving-factual-snapshot h5 { color: var(--ink); font-size: var(--text-base); }
.receiving-factual-snapshot__head p:last-child { color: var(--muted); font-size: var(--text-xs); }
.receiving-factual-snapshot__numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.receiving-factual-snapshot__numbers > div {
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--rule));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.receiving-factual-snapshot__numbers dt,
.receiving-factual-panel__head span {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.receiving-factual-snapshot__numbers dd {
  margin: var(--s-1) 0;
  color: var(--brand-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.receiving-factual-snapshot__numbers small { color: var(--ink-2); font-size: var(--text-2xs); }
.receiving-factual-snapshot__diagnostics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.receiving-factual-snapshot__diagnostics > article {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-factual-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-3);
}
.receiving-factual-panel__head > div { display: grid; gap: .15rem; }
.receiving-factual-panel__head h6 { color: var(--ink); font-size: var(--text-base); }
.receiving-factual-panel__head > strong {
  color: var(--brand-strong);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.receiving-factual-grade ol {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.receiving-factual-grade li { display: grid; gap: var(--s-1); }
.receiving-factual-grade li > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--s-2);
}
.receiving-factual-grade li span,
.receiving-factual-grade li small { color: var(--ink-2); font-size: var(--text-xs); }
.receiving-factual-grade__track {
  display: block;
  height: .32rem;
  overflow: hidden;
  border-radius: 100px;
  background: var(--brand-soft);
}
.receiving-factual-grade__track > span {
  display: block;
  width: var(--receiving-grade-width);
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.receiving-factual-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--ink-2);
  font-size: var(--text-xs);
}
.receiving-factual-insight > span { color: var(--brand-strong); font-size: var(--text-base); font-weight: var(--fw-bold); }
.receiving-factual-empty,
.receiving-factual-physical__reading { color: var(--ink-2); font-size: var(--text-xs); }
.receiving-factual-physical__states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.receiving-factual-physical__states > div {
  padding: var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-factual-physical__states dt { color: var(--muted); font-size: var(--text-2xs); }
.receiving-factual-physical__states dd {
  margin: var(--s-1) 0 0;
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.receiving-factual-measurements { display: grid; gap: var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--rule); }
.receiving-factual-measurements > div { display: grid; gap: var(--s-1); }
.receiving-factual-measurements > div > span { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--text-xs); }
.receiving-factual-measurements small { color: var(--muted); }
.receiving-factual-measurements .receiving-diagnostic-track { height: .38rem; }

@media (max-width: 60rem) {
  .receiving-command-briefing__grid,
  .receiving-diagnostic-next,
  .receiving-pallet-preview__content,
  .receiving-factual-snapshot__diagnostics { grid-template-columns: minmax(0, 1fr); }
  .receiving-diagnostic-headlines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .receiving-diagnostic-skyline__plot {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.25rem, 1fr);
    gap: var(--s-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .receiving-diagnostic-skyline__label > a { font-size: var(--text-2xs); }
}

@media (max-width: 44rem) {
  .receiving-command-briefing { padding: var(--s-3); }
  .receiving-command-briefing__head,
  .receiving-command-briefing__head > div,
  .receiving-pallet-preview__head,
  .receiving-index-study__head,
  .receiving-factual-snapshot__head { align-items: stretch; flex-direction: column; }
  .receiving-diagnostic-headlines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-diagnostic-head__action { justify-items: stretch; text-align: left; }
  .receiving-diagnostic-identity__main { align-items: flex-start; flex-direction: column; gap: var(--s-2); }
  .receiving-diagnostic-gallery { grid-template-columns: repeat(5, 2rem) minmax(4rem, auto); gap: .25rem; max-width: 100%; }
  .receiving-diagnostic-gallery img,
  .receiving-diagnostic-gallery__empty { width: 2rem; }
  .receiving-diagnostic-gallery__remainder { height: 2rem; padding: var(--s-1); font-size: var(--text-2xs); }
  .receiving-pallet-preview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: var(--s-5) 0;
  padding: 0;
}
.pipeline-step {
  position: relative;
  min-width: 0;
  padding-right: var(--s-2);
  color: var(--muted);
}
.pipeline-step::after {
  content: "";
  position: absolute;
  top: .8rem;
  left: 1.7rem;
  right: 0;
  height: 2px;
  background: var(--rule);
}
.pipeline-step:last-child::after { display: none; }
.pipeline-step-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: var(--s-2);
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.pipeline-step strong, .pipeline-step small { display: block; padding-right: var(--s-2); }
.pipeline-step strong { color: var(--ink-2); font-size: var(--text-sm); }
.pipeline-step small { font-size: var(--text-xs); }
.pipeline-step-done .pipeline-step-marker {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}
.pipeline-step-done::after { background: var(--ok); }
.pipeline-step-current .pipeline-step-marker {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}
.pipeline-step-current strong { color: var(--brand); }

.pipeline-progress {
  display: grid;
  grid-template-columns: minmax(12rem, auto) minmax(12rem, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  margin-bottom: var(--s-4);
}
.pipeline-progress strong, .pipeline-progress span { display: block; }
.pipeline-progress span { color: var(--muted); font-size: var(--text-sm); }
.pipeline-progress progress { width: 100%; height: .7rem; accent-color: var(--brand); }
.pipeline-progress > small { color: var(--muted); }
.pipeline-progress-paused { border: 1px solid var(--warn); background: var(--warn-soft); }
.pipeline-progress-control { display: flex; justify-content: flex-end; }

.review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.review-filter-sections {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-4);
}
.review-filter-section { display: grid; gap: var(--s-2); }
.review-filter-section > strong { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }

.workbench-batch-summary {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.workbench-batch-summary h3 { margin: 0; font-size: var(--text-base); }
.workbench-batch-summary > div > p { margin: var(--s-1) 0 var(--s-4); }
.workbench-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.workbench-summary-grid > div {
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.workbench-summary-grid dt { color: var(--muted); font-size: var(--text-xs); }
.workbench-summary-grid dd {
  margin: var(--s-1) 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}
.workbench-summary-grid small { display: block; color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.receiving-report { display: grid; min-width: 0; gap: var(--s-5); }
.receiving-report > .card,
.receiving-report .table-scroll { min-width: 0; max-width: 100%; }
.receiving-report-navigation { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.receiving-report-table { min-width: 46rem; }
.receiving-report-lines { min-width: 72rem; }
.receiving-report-lines th[scope="row"] { min-width: 17rem; }
.receiving-report-lines th[scope="row"] strong,
.receiving-report-lines th[scope="row"] code,
.receiving-report-lines th[scope="row"] small,
.receiving-report-line-number { display: block; }
.receiving-report-line-number,
.receiving-report-lines th[scope="row"] small { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-medium); }
.receiving-report-lines th[scope="row"] code { margin-top: var(--s-1); font-size: var(--text-xs); }
.receiving-report-portions-row td { padding-top: 0; background: var(--surface-sunk); }
.receiving-report-portions-row summary { cursor: pointer; color: var(--ink-2); font-weight: var(--fw-semibold); }
.receiving-report-portions { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.receiving-report-portions li { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.receiving-report-portions li span { color: var(--muted); }
.receiving-report-audit-grid { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); gap: var(--s-5); margin-top: var(--s-5); }
.receiving-report-audit-grid h3 { margin: 0 0 var(--s-3); }
.receiving-report-audit-counts { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.receiving-report-audit-counts li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-report-audit-counts strong { font-variant-numeric: tabular-nums; }
.receiving-report-audit-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.receiving-report-audit-heading small { color: var(--muted); }
.receiving-report-audit-scroll { max-height: 32rem; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.receiving-report-audit-timeline { margin: 0; padding: 0; list-style: none; }
.receiving-report-audit-timeline li { display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--rule); }
.receiving-report-audit-timeline li:last-child { border-bottom: 0; }
.receiving-report-audit-timeline time { color: var(--muted); font-family: var(--mono); font-size: var(--text-2xs); }
.receiving-report-audit-timeline li > div { display: grid; min-width: 0; gap: var(--s-1); }
.receiving-report-audit-timeline span,
.receiving-report-audit-timeline small { color: var(--ink-2); }
.receiving-report-audit-timeline code { overflow-wrap: anywhere; }
.workbench-readiness-summary { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.workbench-readiness-summary h4, .workbench-readiness-summary p { margin: 0; }
.workbench-readiness-summary > div { margin-bottom: var(--s-3); }
.workbench-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.workbench-toolbar p { margin: 0; }
.workbench-toolbar p > span { display: block; margin-top: var(--s-1); font-size: var(--text-xs); }
.workbench-preferences {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) repeat(2, minmax(12rem, auto));
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.workbench-preferences h3, .workbench-preferences p { margin: 0; }
.workbench-preferences fieldset { display: grid; align-content: start; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.workbench-preferences legend { margin-bottom: var(--s-2); font-weight: var(--fw-semibold); }
.workbench-preferences label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); }
.workbench-preferences input { accent-color: var(--brand); }
.workbench-preference-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); grid-column: 1 / -1; }
.inspection-search {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.5fr) auto auto;
  align-items: end;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.inspection-search > div { display: grid; gap: var(--s-1); align-self: center; }
.inspection-search label { color: var(--ink); font-size: var(--text-base); font-weight: var(--fw-bold); }
.inspection-search label + span { color: var(--muted); font-size: var(--text-xs); }
.inspection-search input { min-height: 2.75rem; }
.inspection-search-feedback {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.inspection-search-status { margin: 0; font-size: var(--text-xs); }
.inspection-search-feedback .btn { flex: 0 0 auto; }
.inspection-search .field-error { grid-column: 1 / -1; margin: 0; }
.receiving-rz-summary {
  display: grid;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-rz-summary h3,
.receiving-rz-summary p { margin: 0; }
.receiving-rz-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.receiving-rz-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-2);
  min-width: 13rem;
  border-radius: var(--radius-sm);
  text-align: left;
}
.receiving-rz-filter > strong { overflow-wrap: anywhere; }
.receiving-rz-filter > span { margin: 0; }
.receiving-rz-filter > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-2xs); }

/* ---------- remessa: resumo inteligente em três estados ---------- */
.receiving-batch-workspace { display: grid; gap: var(--s-6); }
.receiving-batch-overview {
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  color: var(--brand-ink);
}
.receiving-batch-overview__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6);
}
.receiving-batch-overview__heading h2,
.receiving-batch-overview__heading p,
.receiving-batch-overview__resolution h3,
.receiving-batch-overview__resolution p,
.receiving-batch-overview__next h3,
.receiving-batch-overview__next p,
.receiving-batch-study__heading h2,
.receiving-batch-study__heading p { margin: 0; }
.receiving-batch-overview__heading h2 { margin-top: var(--s-1); font-size: var(--text-xl); }
.receiving-batch-overview__heading h2 + p { max-width: 46rem; margin-top: var(--s-2); color: var(--brand-soft); }
.receiving-batch-overview__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.receiving-batch-overview__status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 22rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-sm);
  background: var(--brand-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.receiving-batch-overview__numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0 var(--s-6) var(--s-6);
}
.receiving-batch-overview__numbers > div {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--brand-soft);
  border-right: 0;
  background: var(--surface);
  color: var(--ink);
}
.receiving-batch-overview__numbers > div:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.receiving-batch-overview__numbers > div:last-child { border-right: 1px solid var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.receiving-batch-overview__numbers dt { color: var(--muted); font-size: var(--text-xs); }
.receiving-batch-overview__numbers dd {
  margin: var(--s-1) 0;
  font-family: var(--mono);
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -.05em;
}
.receiving-batch-overview__numbers small { color: var(--muted); font-size: var(--text-xs); }
.receiving-batch-overview__resolution {
  padding: var(--s-5) var(--s-6);
  background: var(--surface-sunk);
  color: var(--ink);
}
.receiving-batch-overview__resolution-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.receiving-batch-overview__resolution-heading h3 { margin-top: var(--s-1); font-size: var(--text-lg); }
.receiving-batch-overview__resolution-heading > p { max-width: 31rem; color: var(--muted); font-size: var(--text-xs); text-align: right; }
.receiving-batch-overview__tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.receiving-batch-overview__track { min-width: 0; }
.receiving-batch-overview__track > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.receiving-batch-overview__track strong,
.receiving-batch-overview__track span { font-size: var(--text-sm); }
.receiving-batch-overview__track span { color: var(--muted); font-family: var(--mono); }
.receiving-batch-overview__track small { display: block; color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-overview__next {
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr);
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--surface);
  color: var(--ink);
}
.receiving-batch-overview__next-copy h3 { margin-top: var(--s-1); font-size: var(--text-xl); }
.receiving-batch-overview__next-copy h3 + p { margin-top: var(--s-2); color: var(--ink-2); }
.receiving-batch-overview__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.receiving-batch-overview__study-toggle { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--surface-sunk); color: var(--brand-strong); }
.receiving-batch-overview__study-toggle:hover { background: var(--brand-soft); color: var(--brand-strong); }
.receiving-batch-overview__plus { font-size: var(--text-lg); line-height: 1; }
.receiving-batch-overview__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.receiving-batch-overview__items li { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-batch-overview__thumb {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  background: var(--surface);
  color: var(--rule-strong);
  font-size: var(--text-xl);
}
.receiving-batch-overview__thumb img { width: 100%; height: 100%; object-fit: cover; }
.receiving-batch-overview__items li > div:last-child { display: grid; gap: var(--s-1); padding: var(--s-3); }
.receiving-batch-overview__items strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.receiving-batch-overview__items span,
.receiving-batch-overview__items small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study { display: grid; gap: var(--s-4); scroll-margin-top: var(--s-4); }
.receiving-batch-study__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.receiving-batch-study__heading h2 { margin-top: var(--s-1); font-size: var(--text-lg); }
.receiving-batch-study__heading h2 + p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--text-sm); }
.receiving-batch-study__nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  scrollbar-width: thin;
}
.receiving-batch-study__nav a,
.receiving-batch-study__nav button {
  flex: none;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.receiving-batch-study__nav button { margin-left: auto; cursor: pointer; }
.receiving-batch-study__nav a:hover,
.receiving-batch-study__nav button:hover { background: var(--brand-soft); color: var(--brand-strong); }
.receiving-batch-study__panel,
.receiving-batch-study__technical {
  scroll-margin-top: var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.receiving-batch-study__section-heading,
.receiving-batch-study__technical-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.receiving-batch-study__section-heading h3,
.receiving-batch-study__section-heading p,
.receiving-batch-study__technical-heading h3,
.receiving-batch-study__technical-heading p { margin: 0; }
.receiving-batch-study__section-heading h3,
.receiving-batch-study__technical-heading h3 { margin-top: var(--s-1); font-size: var(--text-lg); }
.receiving-batch-study__section-heading h3 + p,
.receiving-batch-study__technical-heading h3 + p {
  max-width: 50rem;
  margin-top: var(--s-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
.receiving-batch-study__section-heading > span {
  flex: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 100px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}
.receiving-batch-study__gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.receiving-batch-study__gallery li {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-batch-study__gallery-image {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  align-content: center;
  gap: var(--s-1);
  background: var(--surface);
  color: var(--rule-strong);
}
.receiving-batch-study__gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.receiving-batch-study__gallery-image small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__gallery li > div:last-child { display: grid; gap: var(--s-1); padding: var(--s-3); }
.receiving-batch-study__gallery li > div:last-child > span {
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}
.receiving-batch-study__gallery strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receiving-batch-study__gallery li > div:last-child > small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__map-legend {
  display: grid;
  grid-template-columns: minmax(15rem, .7fr) minmax(28rem, 1.3fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-batch-study__map-legend > div { display: grid; gap: var(--s-1); }
.receiving-batch-study__map-legend small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__map-legend ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.receiving-batch-study__map-legend li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--muted);
  font-size: var(--text-2xs);
}
.receiving-batch-study__map-legend i {
  width: .8rem;
  height: .8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.receiving-batch-study__map-legend i.is-tone-1,
.receiving-batch-study__pallet-map li.is-tone-1 a { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.receiving-batch-study__map-legend i.is-tone-2,
.receiving-batch-study__pallet-map li.is-tone-2 a { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }
.receiving-batch-study__map-legend i.is-tone-3,
.receiving-batch-study__pallet-map li.is-tone-3 a { background: color-mix(in srgb, var(--brand) 38%, var(--surface)); }
.receiving-batch-study__map-legend i.is-tone-4,
.receiving-batch-study__pallet-map li.is-tone-4 a { background: color-mix(in srgb, var(--brand) 62%, var(--surface)); }
.receiving-batch-study__map-legend i.is-tone-5,
.receiving-batch-study__pallet-map li.is-tone-5 a { background: var(--brand-strong); }
.receiving-batch-study__pallet-map li.is-tone-0 a { border-style: dashed; background: var(--surface-sunk); }
.receiving-batch-study__pallet-map li.is-tone-5 a,
.receiving-batch-study__pallet-map li.is-tone-5 a p,
.receiving-batch-study__pallet-map li.is-tone-5 a small,
.receiving-batch-study__pallet-map li.is-tone-5 a em,
.receiving-batch-study__pallet-map li.is-tone-5 a > div span,
.receiving-batch-study__pallet-map li.is-tone-5 .receiving-batch-study__map-signal { color: #fff; }
.receiving-batch-study__pallet-map li.is-tone-5 .receiving-diagnostic-track { background: rgb(255 255 255 / 28%); }
.receiving-batch-study__pallet-map li.is-tone-5 .receiving-diagnostic-track > span { background: #fff; }
.receiving-batch-study__pallet-map li.is-tone-5 a:hover { border-color: #fff; }
.receiving-batch-study__pallet-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 3.25rem;
  grid-auto-flow: dense;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.receiving-batch-study__pallet-map li.is-size-1 { grid-row: span 3; }
.receiving-batch-study__pallet-map li.is-size-2 { grid-column: span 2; grid-row: span 3; }
.receiving-batch-study__pallet-map li.is-size-3 { grid-column: span 2; grid-row: span 4; }
.receiving-batch-study__pallet-map li.is-size-4 { grid-column: span 3; grid-row: span 4; }
.receiving-batch-study__pallet-map li.is-size-5 { grid-column: span 3; grid-row: span 5; }
.receiving-batch-study__pallet-map a {
  display: grid;
  height: 100%;
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--ink);
  text-decoration: none;
}
.receiving-batch-study__pallet-map a:hover { border-color: var(--brand-strong); }
.receiving-batch-study__pallet-map a > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.receiving-batch-study__pallet-map a > div span {
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}
.receiving-batch-study__pallet-map p { margin: 0; color: var(--ink-2); font-size: var(--text-xs); }
.receiving-batch-study__pallet-map small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__pallet-map .receiving-batch-study__map-signal {
  color: var(--ink-2);
  font-weight: var(--fw-semibold);
}
.receiving-batch-study__pallet-map em {
  align-self: end;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: var(--fw-semibold);
}
.receiving-batch-study__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.receiving-batch-study__route {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.receiving-batch-study__route li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.receiving-batch-study__route li:last-child { border-bottom: 0; }
.receiving-batch-study__route li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.receiving-batch-study__route li > div { display: grid; min-width: 0; }
.receiving-batch-study__route small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__route a { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.receiving-batch-study__states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.receiving-batch-study__states > div {
  min-width: 0;
  padding: var(--s-3);
  border-top: 3px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-batch-study__states > div.is-active { border-color: var(--brand); }
.receiving-batch-study__states > div.is-warning { border-color: var(--warn); }
.receiving-batch-study__states > div.is-complete { border-color: var(--ok); }
.receiving-batch-study__states > div.is-danger { border-color: var(--danger); }
.receiving-batch-study__states dt { color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__states dd {
  margin: var(--s-1) 0 0;
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}
.receiving-batch-study__coverage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.receiving-batch-study__coverage > div { min-width: 0; }
.receiving-batch-study__coverage > div > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.receiving-batch-study__coverage strong,
.receiving-batch-study__coverage span { font-size: var(--text-sm); }
.receiving-batch-study__coverage span { color: var(--brand-strong); font-family: var(--mono); font-weight: var(--fw-bold); }
.receiving-batch-study__coverage small { display: block; color: var(--muted); font-size: var(--text-2xs); }
.receiving-batch-study__technical {
  padding: 0;
  border-color: var(--brand);
  background: var(--surface-sunk);
}
.receiving-batch-study__technical-heading {
  margin: 0;
  padding: var(--s-5);
  border-bottom: 1px solid var(--brand);
  background: var(--brand-soft);
}
.receiving-batch-study__technical > div:last-child { padding: var(--s-4); }
.receiving-batch-study__tools-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  min-height: 9rem;
  background: var(--surface);
}
.receiving-batch-study__tools-gate > div {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.receiving-batch-study__tools-gate > div > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}
.receiving-batch-study__tools-gate > div > div { display: grid; gap: var(--s-1); }
.receiving-batch-study__tools-gate strong { font-size: var(--text-md); }
.receiving-batch-study__tools-gate p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.receiving-batch-study__empty {
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  min-height: 8rem;
  align-content: center;
  padding: var(--s-5);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.receiving-batch-study__empty p { margin: 0; font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .receiving-batch-overview__numbers,
  .receiving-batch-overview__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-batch-overview__numbers > div { border-right: 1px solid var(--brand-soft); }
  .receiving-batch-overview__numbers > div:first-child,
  .receiving-batch-overview__numbers > div:last-child { border-radius: 0; }
  .receiving-batch-overview__next { grid-template-columns: 1fr; }
  .receiving-batch-study__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .receiving-batch-study__pallet-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .receiving-batch-study__map-legend { grid-template-columns: 1fr; }
  .receiving-batch-study__columns { grid-template-columns: 1fr; }
  .receiving-batch-study__coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .receiving-batch-overview__heading,
  .receiving-batch-overview__resolution-heading,
  .receiving-batch-study__heading,
  .receiving-batch-study__section-heading,
  .receiving-batch-study__technical-heading { align-items: stretch; flex-direction: column; }
  .receiving-batch-overview__heading,
  .receiving-batch-overview__resolution,
  .receiving-batch-overview__next { padding: var(--s-4); }
  .receiving-batch-overview__numbers { grid-template-columns: 1fr; padding: 0 var(--s-4) var(--s-4); }
  .receiving-batch-overview__numbers > div { border-bottom: 0; }
  .receiving-batch-overview__numbers > div:last-child { border-bottom: 1px solid var(--brand-soft); }
  .receiving-batch-overview__numbers dd { font-size: var(--text-xl); letter-spacing: 0; }
  .receiving-batch-overview__tracks,
  .receiving-batch-overview__items { grid-template-columns: 1fr; }
  .receiving-batch-study__gallery,
  .receiving-batch-study__coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-batch-study__pallet-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .receiving-batch-study__pallet-map li[class*="is-size-"] { grid-column: span 1; grid-row: span 1; min-height: 12rem; }
  .receiving-batch-study__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-batch-overview__resolution-heading > p { text-align: left; }
  .receiving-batch-overview__actions,
  .receiving-batch-overview__actions .btn,
  .receiving-batch-overview__next-copy > .btn { width: 100%; }
  .receiving-batch-study__technical-heading .btn { width: 100%; }
}
.unexpected-item-capture,
.unexpected-item-observations {
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
}
.unexpected-item-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.unexpected-item-heading h3,
.unexpected-item-heading p { margin: 0; }
.unexpected-item-heading h3 { font-size: var(--text-base); }
.unexpected-item-heading h3 > span {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  margin-left: var(--s-1);
  padding: 0 .3rem;
  border-radius: 100px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.unexpected-item-heading p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--text-sm); }
.unexpected-item-form {
  display: grid;
  grid-template-columns: minmax(15rem, 2fr) minmax(8rem, .6fr) minmax(7rem, .5fr) minmax(10rem, .8fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.unexpected-item-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.unexpected-item-candidates legend { padding: 0 var(--s-1); font-weight: var(--fw-bold); }
.unexpected-item-candidates > p,
.unexpected-item-candidates > .field-error { grid-column: 1 / -1; margin: 0; }
.unexpected-item-candidate {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.unexpected-item-candidate input { margin-top: .2rem; accent-color: var(--brand); }
.unexpected-item-candidate span { display: grid; gap: var(--s-1); }
.unexpected-item-candidate small { color: var(--ink-2); }
.unexpected-item-error,
.unexpected-item-actions { grid-column: 1 / -1; }
.unexpected-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.unexpected-item-observations { border-color: var(--rule-strong); background: var(--surface-sunk); }
.unexpected-item-observations > ul { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.unexpected-item-observations > ul > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.unexpected-item-observations li > div { display: grid; gap: var(--s-1); }
.unexpected-item-observations li span:not(.status),
.unexpected-item-observations li small { color: var(--ink-2); }
.unexpected-item-observation-state { justify-items: end; text-align: right; }
.review-filter {
  min-height: 2.35rem;
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.review-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  margin-left: var(--s-1);
  padding: 0 .25rem;
  border-radius: 100px;
  background: var(--surface-sunk);
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.review-filter-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-semibold); }

.review-list { border-top: 1px solid var(--rule); }
.review-row { border-bottom: 1px solid var(--rule); }
.review-row-summary {
  display: grid;
  grid-template-columns: 4.5rem 3.25rem minmax(11rem, 1.3fr) minmax(12rem, 1fr) auto 1.5rem;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.review-row-name { transition: color .12s ease; }
.review-row-summary:hover .review-row-name { color: var(--brand); }
.review-row-line, .review-row-identifiers, .review-row-facts { color: var(--muted); font-size: var(--text-xs); }
.review-row-visual {
  display: grid;
  place-items: center;
  width: 3.25rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--muted);
  font-size: var(--text-2xs);
  text-align: center;
}
.review-row-visual img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.review-row-primary { display: grid; gap: var(--s-1); min-width: 0; }
.review-row-name { min-width: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.review-row-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); min-width: 0; overflow-wrap: anywhere; }
.review-row-facts > span { display: block; }
.review-row-toggle { color: var(--brand); font-size: var(--text-md); font-weight: var(--fw-semibold); text-align: center; }
.review-row-selected > .review-row-summary {
  padding-inline: var(--s-3);
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.workbench-density-compact .review-row-summary { gap: var(--s-2); padding: var(--s-2) 0; }
.workbench-density-compact .review-row-line,
.workbench-density-compact .review-row-identifiers,
.workbench-density-compact .review-row-facts { font-size: var(--text-xs); }
.review-row-detail {
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.review-row-detail h3 { margin: 0 0 var(--s-3); font-size: var(--text-base); }
.review-product-drawer {
  position: fixed;
  z-index: 20;
  inset: 0 0 0 auto;
  width: min(58rem, calc(100vw - 2.5rem));
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--surface-sunk);
  box-shadow: var(--shadow-overlay);
}
.review-product-drawer-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--surface);
}
.review-product-drawer-head > div { min-width: 0; }
.review-product-drawer-head .workbench-layer-label { margin-bottom: var(--s-1); }
.review-product-drawer-head h2 { margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }
.review-product-drawer-head p { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.review-product-drawer-close { flex: 0 0 auto; }
.review-product-drawer-body { padding: var(--s-5); }
.inspection-next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.inspection-next-action > div { display: grid; gap: var(--s-1); min-width: 0; }
.inspection-next-action .workbench-layer-label,
.inspection-next-action p { margin: 0; }
.inspection-next-action p { color: var(--ink-2); }
.inspection-next-action .btn { flex: 0 0 auto; }
[id^="canonical-candidates-"],
[id^="external-candidates-"],
[id^="new-product-decision-"],
[id^="receiving-title-"],
[id^="readiness-title-"] { scroll-margin-top: var(--s-6); }
.review-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.workbench-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.workbench-layer {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.workbench-layer-source { border-left: 3px solid var(--ink-2); }
.workbench-layer-current { border-left: 3px solid var(--brand); }
.workbench-layer-label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.workbench-layer p { margin: 0 0 var(--s-3); }
.workbench-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.workbench-group-head h3 { margin: 0 0 var(--s-3); }
.workbench-group-toggle {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .3rem .55rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.workbench-group-toggle { transition: border-color .12s ease, background-color .12s ease; }
.workbench-group-toggle:hover { border-color: var(--brand); background: var(--brand-soft); }
.workbench-availability { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.workbench-availability li {
  padding: .25rem .5rem;
  border-radius: 100px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.readiness-contexts { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.readiness-context {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.readiness-context > span:first-child { display: grid; gap: .2rem; min-width: 0; }
.readiness-context small { color: var(--muted); }
.workbench-policy {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
}
.attribute-proposal-list { display: grid; gap: var(--s-3); }
.attribute-proposal {
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.attribute-proposal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.attribute-proposal-head h4 { margin: 0; font-size: var(--text-sm); }
.attribute-proposal-value { display: block; margin-top: var(--s-2); overflow-wrap: anywhere; }
.attribute-proposal-source { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.attribute-semantic-scope { margin: var(--s-2) 0; color: var(--muted); font-size: var(--text-2xs); font-style: italic; }
.attribute-alternatives { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.attribute-alternative {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.attribute-alternative-current { border-color: var(--brand); background: var(--brand-soft); }
.attribute-alternative > span { min-width: 0; }
.attribute-alternative strong, .attribute-alternative small { display: block; overflow-wrap: anywhere; }
.attribute-alternative small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.attribute-alternative .btn { flex: 0 0 auto; min-height: 2rem; padding: .3rem .55rem; font-size: var(--text-xs); }
.review-match-reason { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--rule-strong); }
.review-classification { margin: 0 0 var(--s-2); font-weight: var(--fw-semibold); }
.review-notes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.candidate-section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.candidate-section > .muted { margin-bottom: var(--s-3); }
.candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.candidate-card { padding: var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface); }
.candidate-card > strong, .candidate-card > span { display: block; }
.candidate-card > strong { font-family: var(--mono); color: var(--brand); }
.candidate-card > span { margin: var(--s-1) 0 var(--s-3); font-weight: var(--fw-semibold); }
.candidate-card .btn { margin-top: var(--s-3); }
.candidate-card-external > strong { font-family: var(--font); color: var(--ink); }
.product-media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.product-media-item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.product-media-item img, .product-media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
}
.product-media-placeholder { padding: var(--s-2); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.product-media-item figcaption { padding: var(--s-2); color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.price-simulation {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
}
.price-simulation-result {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.price-simulation-result span, .price-simulation-result small { color: var(--muted); }
.price-simulation-result strong { font-size: var(--text-lg); }
.price-simulation-inputs { margin-bottom: var(--s-3); }
.price-simulation-formula {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
}
.bling-preparation {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.bling-preparation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.bling-destination-preparation { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.bling-destination-preparation h4, .bling-destination-preparation p { margin: 0; }
.bling-destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.bling-destination-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-destination-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.bling-destination-head > div { display: grid; gap: var(--s-1); }
.bling-destination-head > div > span { color: var(--ink-2); }
.bling-registration-state { display: grid; justify-items: start; gap: var(--s-2); padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.bling-registration-state small { color: var(--muted); }
.bling-progressive-gates { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--rule)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-soft) 34%, var(--surface)); }
.bling-progressive-gates-head { display: grid; gap: var(--s-1); }
.bling-progressive-gates-head small, .bling-progressive-followups small { color: var(--muted); }
.bling-progressive-gates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.bling-progressive-gates-grid article { display: grid; justify-items: start; align-content: start; gap: var(--s-2); min-width: 0; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.bling-progressive-gates-grid article > span:first-child { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
.bling-progressive-gates-grid ul { margin: 0; padding-left: 1.15rem; }
.bling-progressive-followups { display: grid; gap: var(--s-1); padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.bling-progressive-followups p { margin: 0; color: var(--ink-2); }
.bling-technical-state { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.bling-technical-state > span:last-child { display: grid; gap: var(--s-1); }
.bling-technical-state small { color: var(--muted); }
.bling-local-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--rule));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
}
.bling-local-review.is-stale { border-color: var(--warn); background: var(--warn-soft); }
.bling-local-review > div { display: grid; justify-items: start; gap: var(--s-1); min-width: 0; }
.bling-local-review small { color: var(--muted); overflow-wrap: anywhere; }
.bling-completion-fields { display: grid; gap: var(--s-2); margin: 0; }
.bling-completion-fields > div { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.8fr); gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.bling-completion-fields dt { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-bold); }
.bling-completion-fields dd { display: grid; justify-items: start; gap: var(--s-1); margin: 0; overflow-wrap: anywhere; }
.bling-completion-fields small { color: var(--muted); }
.bling-field-alternatives { width: 100%; margin-top: var(--s-1); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.bling-field-alternatives summary { padding: var(--s-2); color: var(--brand); font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; }
.bling-field-alternatives ul { display: grid; gap: var(--s-2); margin: 0; padding: 0 var(--s-3) var(--s-3); list-style: none; }
.bling-field-alternatives li { display: grid; gap: .15rem; padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.bling-field-alternatives li span { overflow-wrap: anywhere; }
.bling-destination-gaps { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--warn-soft); }
.bling-destination-gaps p { margin-top: var(--s-1); color: var(--ink-2); }
.bling-destination-policies { padding: var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.bling-destination-policies p { margin-top: var(--s-1); color: var(--ink-2); }
.bling-preparation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.bling-preparation-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-preparation-card h4, .bling-preparation-card p { margin: 0; }
.bling-prepared-fields { display: grid; gap: var(--s-2); margin: 0; }
.bling-prepared-fields > div {
  display: grid;
  grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.8fr);
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.bling-prepared-fields dt { color: var(--muted); font: 600 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bling-prepared-fields dd { display: grid; justify-items: start; gap: var(--s-1); margin: 0; overflow-wrap: anywhere; }
.bling-prepared-fields small { color: var(--muted); }
.bling-action-scope { padding: var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.bling-action-scope ul { margin: var(--s-2) 0 0; padding-left: 1.15rem; }
.enrichment-source-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}
.enrichment-source-state > span:first-child { min-width: 0; }
.enrichment-source-state strong, .enrichment-source-state small { display: block; }
.enrichment-source-state small { margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.integration-control-plane {
  display: grid;
  gap: var(--s-5);
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--brand) 14%, transparent), transparent 30%),
    var(--surface);
}
.integration-control-head,
.integration-accounts-head,
.integration-account-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.integration-control-head h2,
.integration-control-head p,
.integration-accounts-head h2,
.integration-accounts-head p { margin: 0; }
.integration-control-head p,
.integration-accounts-head p { margin-top: var(--s-1); color: var(--muted); }
.integration-control-head .eyebrow,
.integration-accounts-head .eyebrow {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.integration-control-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--rule);
}
.integration-control-metrics > div {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--surface);
}
.integration-control-metrics dt { color: var(--muted); font-size: var(--text-xs); }
.integration-control-metrics dd { margin: 0; color: var(--ink); font-size: var(--text-xl); font-weight: var(--fw-bold); }
.integration-runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}
.integration-runtime-card {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.integration-runtime-card.is-ok { border-top-color: var(--ok); }
.integration-runtime-card.is-warn { border-top-color: var(--warn); }
.integration-runtime-card > span { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; }
.integration-runtime-card small { color: var(--ink-2); overflow-wrap: anywhere; }
.openai-spend-control {
  display: grid;
  gap: var(--s-5);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand) 32%, var(--rule));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface) 48%),
    var(--surface);
}
.openai-spend-head,
.openai-spend-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.openai-spend-head h2,
.openai-spend-head p { margin: 0; }
.openai-spend-head p { max-width: 54rem; margin-top: var(--s-1); color: var(--muted); }
.openai-spend-head .eyebrow {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--brand-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.openai-budget-meter { display: grid; gap: var(--s-2); }
.openai-budget-copy { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.openai-budget-copy strong { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.openai-budget-copy span,
.openai-budget-meter small,
.openai-spend-actions small { color: var(--muted); }
.openai-budget-track {
  height: .9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--rule));
  border-radius: 999px;
  background: var(--surface-sunk);
}
.openai-budget-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}
.openai-spend-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--rule);
}
.openai-spend-facts > div { min-width: 0; padding: var(--s-3); background: var(--surface); }
.openai-spend-facts dt { color: var(--muted); font-size: var(--text-xs); }
.openai-spend-facts dd {
  margin: var(--s-1) 0 0;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.openai-spend-actions { align-items: center; }
.openai-spend-actions form { margin: 0; }
.openai-spend-actions small { margin-left: auto; text-align: right; }
.integration-accounts-head { margin-bottom: var(--s-4); }
.integration-account-health-list { display: grid; gap: var(--s-3); }
.integration-account-health-list .account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-sunk);
}
.integration-account-health-list .account:last-child { padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.integration-account-health { display: grid; gap: var(--s-3); min-width: 0; }
.integration-account-health-head .account-name { font-size: var(--text-lg); }
.integration-account-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.integration-account-facts > div {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.integration-account-facts dt { color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-bold); }
.integration-account-facts dd { margin: 0; font-weight: var(--fw-semibold); }
.integration-account-facts small { color: var(--muted); overflow-wrap: anywhere; }
.integration-account-health > .alert { margin: 0; }
.integration-setup-head, .integration-setup-card-head, .integration-setup-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.integration-setup-head h2, .integration-setup-head p, .integration-setup-card h3 { margin: 0; }
.integration-setup-head p { margin-top: var(--s-2); color: var(--ink-2); }
.integration-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.integration-setup-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.integration-setup-card-head small, .integration-setup-action small { display: block; color: var(--muted); }
.integration-management-note { display: block; color: var(--muted); }
.integration-setup-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.integration-setup-action { align-items: center; }
.integration-setup-action small { max-width: 26rem; }
.integration-secret-panel {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.integration-secret-panel summary {
  width: fit-content;
  padding: .55rem .85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: var(--fw-bold);
  list-style-position: inside;
}
.integration-secret-panel[open] summary { margin-bottom: var(--s-4); }
.integration-secret-form { display: grid; gap: var(--s-3); }
.integration-secret-form .field { margin: 0; }
.integration-enable-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.integration-enable-option input { width: auto; margin-top: .2rem; }
.integration-enable-option strong, .integration-enable-option small { display: block; }
.integration-enable-option small { margin-top: var(--s-1); color: var(--muted); }
.external-reference-panel { margin-top: var(--s-4); border-left: 3px solid var(--warn); }
.external-reference-list { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.external-reference-card {
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.external-reference-card h4, .external-reference-card p { margin: 0; }
.external-reference-media {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}
.external-reference-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.external-reference-media figcaption, .external-reference-media-state {
  color: var(--muted);
  font-size: var(--text-xs);
}
.external-reference-media-state {
  margin-top: var(--s-3) !important;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--rule-strong);
}
.external-reference-card-head, .external-reference-actions, .manual-research-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.external-reference-card-head { margin-bottom: var(--s-3); }
.external-reference-review-hint {
  margin-top: var(--s-3) !important;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.external-reference-card-head > div, .manual-research-link > span { min-width: 0; }
.external-reference-card-head small, .manual-research-link small, .external-reference-empty small {
  display: block;
  margin-top: var(--s-1);
  color: var(--muted);
  font-size: var(--text-2xs);
}
.external-reference-actions { align-items: center; margin-top: var(--s-3); }
.external-reference-empty {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}
.manual-research-link {
  align-items: center;
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.manual-reference-form {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.manual-reference-form-head, .manual-reference-submit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.manual-reference-form-head h4, .manual-reference-form-head p { margin: 0; }
.manual-reference-form-head p { margin-top: var(--s-1); color: var(--ink-2); }
.manual-reference-fields { display: grid; grid-template-columns: 1.5fr 1.5fr 1fr; gap: var(--s-3); }
.manual-reference-fields label, .manual-reference-form > label { display: grid; gap: var(--s-2); font-weight: var(--fw-medium); }
.manual-reference-field-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.manual-reference-field-options legend { padding: 0 var(--s-1); font-weight: var(--fw-bold); }
.manual-reference-field-options label { display: flex; align-items: center; gap: var(--s-1); }
.manual-reference-submit { align-items: center; }
.manual-reference-submit small { max-width: 48rem; color: var(--muted); }
.candidate-presence { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--text-xs); }
.candidate-flags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.evidence-list { margin: var(--s-3) 0 0; padding-left: 1.1rem; color: var(--muted); font-size: var(--text-xs); }
.new-product-form { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); }

.receiving-inspection { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.receiving-inspection-head { align-items: flex-start; }
.receiving-inspection-head p { margin: var(--s-1) 0 0; color: var(--ink-2); }
.receiving-count-form, .receiving-action-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s-3); align-items: end; }
.receiving-count-form { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.receiving-quantity-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-4); }
.receiving-quantity-grid div { padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-quantity-grid dt { color: var(--ink-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.receiving-quantity-grid dd { margin: var(--s-1) 0 0; font-size: var(--text-md); font-weight: var(--fw-bold); }
.receiving-adjustment { margin-bottom: var(--s-4); }
.receiving-adjustment summary { cursor: pointer; color: var(--brand-strong); font-weight: var(--fw-bold); }
.receiving-adjustment form { margin-top: var(--s-3); }
.receiving-history-list { display: grid; gap: var(--s-2); margin: var(--s-3) 0; padding: 0; list-style: none; }
.receiving-history-list li { display: grid; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-history-list li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.receiving-history-list li > span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.receiving-portions { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.receiving-portion { padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-portion-summary { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.receiving-portion-summary div { display: grid; gap: var(--s-1); }
.receiving-portion-summary span:not(.status) { color: var(--ink-2); }
.receiving-physical-facts { grid-column: 1 / -1; padding: var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-physical-facts summary { cursor: pointer; color: var(--brand-strong); font-weight: var(--fw-bold); }
.receiving-physical-facts .hint { margin: var(--s-2) 0 var(--s-3); }
.receiving-physical-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.receiving-physical-summary { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); color: var(--ink-2); font-size: var(--text-xs); }
.receiving-physical-summary span { padding: .2rem .45rem; border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-proposal, .receiving-approved { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3); border-left: 3px solid var(--brand); background: var(--surface-sunk); }
.receiving-proposal p, .receiving-approved p { margin: 0; }
.receiving-approved span, .receiving-approved small, .receiving-proposal small { color: var(--ink-2); }
.receiving-reopen-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; }

@media (max-width: 52rem) {
  .supplier-layout-heading { flex-direction: column; }
  .supplier-layout-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-file-drop { grid-template-columns: 1fr; }
  .receiving-index-row { grid-template-columns: minmax(0, 1fr) minmax(12rem, auto); }
  .receiving-index-facts { grid-column: 1 / -1; }
  .pipeline-flow { grid-template-columns: 1fr; gap: var(--s-2); }
  .pipeline-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; padding: 0; }
  .pipeline-step::after { top: 1.65rem; bottom: calc(-1 * var(--s-2)); left: .8rem; width: 2px; height: auto; }
  .pipeline-step-marker { grid-row: 1 / 3; margin: 0; }
  .pipeline-progress, .review-detail-grid, .workbench-layers, .candidate-grid, .workbench-preferences, .inspection-search, .unexpected-item-form, .unexpected-item-candidates, .bling-destination-grid, .bling-progressive-gates-grid, .bling-preparation-grid, .integration-setup-grid, .receiving-count-form, .receiving-action-form, .receiving-quantity-grid, .receiving-reopen-form, .receiving-report-audit-grid { grid-template-columns: 1fr; }
  .inspection-search-feedback, .inspection-search .field-error { grid-column: auto; }
  .unexpected-item-candidates, .unexpected-item-error, .unexpected-item-actions { grid-column: auto; }
  .integration-control-metrics,
  .integration-runtime-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-account-health-list .account { grid-template-columns: minmax(0, 1fr); }
  .integration-account-facts { grid-template-columns: 1fr; }
  .integration-setup-head, .integration-setup-card-head, .integration-setup-action { align-items: flex-start; flex-direction: column; }
  .receiving-physical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-preference-actions { grid-column: auto; }
  .workbench-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-product-drawer { right: auto; left: 0; width: 100%; }
  .review-row-summary { grid-template-columns: 4.5rem 3.25rem minmax(9rem, 1fr) auto 1.5rem; }
  .review-row-facts { grid-column: 3; }
  .review-row-summary .status { grid-column: 4; grid-row: 1 / 3; }
  .review-row-toggle { grid-column: 5; grid-row: 1 / 3; }
}

@media (max-width: 44rem) {
  .supplier-layout-meta { grid-template-columns: 1fr; }
  .topbar-user { min-width: 0; }
  .receiving-index-row { grid-template-columns: minmax(0, 1fr); }
  .receiving-index-facts { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receiving-index-meta { grid-column: auto; align-items: stretch; flex-direction: column; }
  .receiving-index-meta .btn { justify-content: center; }
  .receiving-physical-grid { grid-template-columns: 1fr; }
  .receiving-form-row, .receiving-form-row-three { grid-template-columns: 1fr; gap: 0; }
  .receiving-entry-choice { grid-template-columns: 1fr; }
  .workbench-toolbar { align-items: stretch; flex-direction: column; }
  .review-product-drawer-head { align-items: stretch; flex-direction: column; }
  .review-product-drawer-head .btn { width: 100%; justify-content: center; }
  .review-product-drawer-body { padding: var(--s-4); }
  .unexpected-item-heading,
  .unexpected-item-observations > ul > li,
  .inspection-search-feedback,
  .inspection-next-action { align-items: stretch; flex-direction: column; }
  .inspection-search-feedback .btn,
  .inspection-next-action .btn { width: 100%; justify-content: center; }
  .unexpected-item-observation-state { justify-items: start; text-align: left; }
  .review-row-summary { grid-template-columns: 3.8rem 3rem minmax(0, 1fr) 1.5rem; }
  .review-row-visual { width: 3rem; }
  .review-row-primary, .review-row-facts { grid-column: 3; }
  .review-row-summary .status { grid-column: 3; grid-row: auto; width: fit-content; }
  .review-row-toggle { grid-column: 4; grid-row: 1 / 4; }
  .integration-control-metrics,
  .integration-runtime-grid { grid-template-columns: 1fr; }
  .integration-control-head,
  .integration-accounts-head,
  .integration-account-health-head,
  .enrichment-source-state, .external-reference-card-head, .external-reference-actions, .manual-research-link, .manual-reference-form-head, .manual-reference-submit { align-items: flex-start; flex-direction: column; }
  .external-reference-media { grid-template-columns: 1fr; }
  .manual-reference-fields { grid-template-columns: 1fr; }
  .attribute-alternative { align-items: stretch; flex-direction: column; }
  .attribute-alternative .btn { width: 100%; }
  .bling-destination-grid,
  .receiving-portions { grid-template-columns: minmax(0, 1fr); }
  .workbench-group-head,
  .bling-destination-head,
  .receiving-portion-summary { align-items: stretch; flex-direction: column; }
  .workbench-group-head .status,
  .bling-destination-head .status,
  .receiving-portion-summary .status { align-self: flex-start; white-space: normal; }
  .bling-local-review { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .bling-local-review .btn { width: 100%; justify-content: center; }
  .bling-completion-fields > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .bling-destination-card > *,
  .bling-destination-card strong,
  .bling-destination-card small,
  .bling-destination-card span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .bling-completion-fields .status { white-space: normal; }
  .receiving-report-audit-timeline li { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  .workbench-summary-grid { grid-template-columns: 1fr; }
}

/* ---------- visão geral da operação ---------- */
/* ---------- visão geral da operação ----------
 *
 * Painel, nao relatorio: a leitura acontece numa tela, sem rolagem para
 * descobrir se algo exige acao. O topo concentra titulo, recorte e frescor
 * numa faixa so, os indicadores ficam numa fileira, e os blocos seguintes
 * trabalham em duas colunas.
 */
.operation-health { display: grid; gap: var(--s-4); }

.operation-health-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-3) var(--s-4);
}
.operation-health-title h1 { margin: 0; }
.operation-health-eyebrow,
.operation-section-kicker {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.operation-health-controls { display: flex; align-items: end; gap: var(--s-3); }
.operation-health-controls .field { margin: 0; }
.operation-health-freshness {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.operation-health-refreshing { color: var(--brand); font-weight: var(--fw-bold); }

.operation-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.operation-tile {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.operation-tile-lead { background: var(--brand-soft); border-color: var(--brand-soft); }
.operation-tile-label { margin: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
/*
 * Figura proporcional, nao tabular: `tabular-nums` da a cada digito a
 * largura de um zero, e num valor solto grande isso deixa `121` frouxo.
 * Tabular fica reservado a coluna de numero que precisa alinhar.
 */
.operation-tile-value {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.1;
}
/* A figura heroi da tela — uma so. */
.operation-tile-lead .operation-tile-value { font-size: var(--text-display); }
.operation-tile-lead .operation-tile-value span {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}
.operation-tile-note { margin: 0; color: var(--muted); font-size: var(--text-2xs); }

.operation-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.operation-panel {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.operation-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.operation-section-heading h2 { margin: 0; font-size: var(--text-md); }

.operation-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: 1.8rem;
  padding: .25rem .6rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.operation-state-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.operation-state-ok { color: var(--ok); background: var(--ok-soft); }
.operation-state-look { color: var(--warn); background: var(--warn-soft); }
.operation-state-act { color: var(--danger); background: var(--danger-soft); }
.operation-state-act .operation-state-dot { animation: operation-health-pulse 1.7s ease-out infinite; }
@keyframes operation-health-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 36%, transparent); }
  55% { box-shadow: 0 0 0 .42rem transparent; }
}

.operation-attention { border-left-width: .35rem; border-left-color: var(--rule-strong); }
.operation-attention-ok { border-left-color: var(--ok); }
.operation-attention-act { border-left-color: var(--danger); }
.operation-attention-clear { padding: var(--s-4); border-radius: var(--radius-sm); background: var(--ok-soft); }
.operation-attention-clear strong { display: block; font-size: var(--text-md); }
.operation-attention-clear p { margin: var(--s-1) 0 0; color: var(--ink-2); }
.operation-attention-list { display: grid; gap: var(--s-2); }
.operation-attention-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
}
.operation-attention-item h3 { margin: 0; font-size: var(--text-base); }
.operation-attention-item p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.operation-attention-shape {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid var(--danger);
  border-radius: .35rem;
  color: var(--danger);
  font-weight: var(--fw-bold);
}

.operation-sync-accounts { display: grid; gap: var(--s-2); }
.operation-sync-account {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.operation-sync-account h3 { margin: 0; font-size: var(--text-sm); }
.operation-sync-account p { margin: 0; color: var(--muted); font-size: var(--text-2xs); }
.operation-sync-error,
.operation-token-note { margin: var(--s-2) 0 0; padding: var(--s-2); border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--ink-2); font-size: var(--text-2xs); }
.operation-token-note { border-left-color: var(--warn); background: var(--warn-soft); }
.operation-muted { margin: 0; color: var(--muted); font-size: var(--text-xs); }

.operation-findings { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.operation-findings ul { display: grid; gap: var(--s-1); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.operation-findings li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--text-xs); }
.operation-findings b { font-variant-numeric: tabular-nums; }

/*
 * Medidor: a trilha vazia e' um degrau claro da mesma rampa da parte
 * cheia, para o estado ser lido na barra inteira e nao so no preenchido.
 */
.operation-coverage { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.operation-coverage p { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-1); font-size: var(--text-xs); }
.operation-coverage b { font-variant-numeric: tabular-nums; }
.operation-coverage small { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--text-2xs); }
.operation-meter { height: .55rem; border-radius: 100px; background: var(--brand-soft); overflow: hidden; }
.operation-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

.operation-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 2.3rem; margin-top: var(--s-2); }
.operation-sparkline > span {
  flex: 1 1 0;
  min-width: 3px;
  height: var(--spark-height);
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--brand) 34%, transparent);
}
.operation-sparkline > span.is-last { background: var(--brand); }

.operation-movement-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.operation-movement-grid article {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.operation-movement-grid article > span { color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.operation-movement-grid strong { font-size: var(--text-lg); letter-spacing: -.02em; }
.operation-movement-grid small { color: var(--muted); font-size: var(--text-2xs); }

/*
 * Grafico de atividade — tres series categoricas.
 *
 * A paleta anterior era --brand, --warn e --ink-2. Duas coisas erradas:
 * --warn e' cor de status, reservada, e usa-la como serie faz o leitor
 * ler "atencao" onde esta escrito "cadastro"; e o conjunto reprovava em
 * tres checagens do validador, uma delas dura — ΔE 14,6 entre o verde e
 * o ambar, abaixo de 15, dificil de separar mesmo com visao normal.
 *
 * O conjunto atual passa em todas: aqua, azul e violeta, na ordem fixa
 * das series, ancorado no verde da marca. Nenhum e' cor de status. A
 * legenda e' visivel — identidade nunca so por cor — e cada dia carrega
 * a leitura completa para leitor de tela.
 */
.operation-activity-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 9rem;
  border-bottom: 1px solid var(--rule-strong);
}
.operation-activity-day { display: flex; flex: 1 1 0; flex-direction: column-reverse; gap: 2px; min-width: 3px; height: 100%; }
.operation-activity-day i { display: block; min-height: 2px; border-radius: 1px; }
.activity-receiving { background: #1BAF7A; }
.activity-catalog { background: #2A78D6; }
.activity-collection { background: #4A3AA7; }
.operation-chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--text-2xs); }
.operation-chart-legend li { display: flex; align-items: center; gap: var(--s-1); }
.swatch { width: .6rem; height: .6rem; border-radius: 2px; flex: none; }
.swatch-receiving { background: #1BAF7A; }
.swatch-catalog { background: #2A78D6; }
.swatch-collection { background: #4A3AA7; }
.operation-chart-last-point { margin: 0; color: var(--muted); font-size: var(--text-xs); }

.operation-account-details summary { cursor: pointer; color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.operation-account-table-wrap { overflow-x: auto; margin-top: var(--s-3); }
.operation-account-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.operation-account-table caption { padding-bottom: var(--s-2); color: var(--muted); text-align: left; }
.operation-account-table th,
.operation-account-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; }
.operation-account-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.operation-health-footnote { margin: 0; color: var(--muted); font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
  .operation-state-act .operation-state-dot { animation: none; }
}

@media (max-width: 60rem) {
  /* Sem largura para duas colunas, o editor volta a seguir os campos — e
     deixa de ser sticky, porque painel grudado em tela estreita cobre o
     proprio conteudo que a pessoa quer ler. */
  .bling-grid-destination { grid-template-columns: minmax(0, 1fr); }
  .bling-grid-destination > .bling-square-panel { position: static; }
  .operation-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-columns { grid-template-columns: minmax(0, 1fr); }
  .operation-movement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .operation-health-bar { grid-template-columns: minmax(0, 1fr); }
  .operation-health-controls { flex-wrap: wrap; }
  .operation-tiles,
  .operation-movement-grid { grid-template-columns: minmax(0, 1fr); }
  .operation-section-heading { align-items: stretch; flex-direction: column; }
}

.integration-usage-meter {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.integration-usage-meter legend { padding: 0 var(--s-2); font-weight: var(--fw-semibold); }
.integration-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.integration-usage-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.integration-usage-facts > div { padding: var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.integration-usage-facts dt { color: var(--muted); font-size: var(--text-xs); }
.integration-usage-facts dd { margin: .2rem 0 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@media (max-width: 44rem) {
  .integration-usage-grid,
  .integration-usage-facts,
  .openai-spend-facts { grid-template-columns: 1fr; }
  .openai-spend-head,
  .openai-spend-actions,
  .openai-budget-copy { align-items: stretch; flex-direction: column; }
  .openai-spend-actions small { margin-left: 0; text-align: left; }
}

/* Conferência linear por palete: componente novo, sem alterar tokens globais. */
.receiving-pallet-page,
.receiving-pallet-items { display: grid; gap: var(--s-4); }
.receiving-pallet-header,
.receiving-pallet-boundary,
.receiving-pallet-item-head,
.receiving-pallet-item-identity,
.receiving-product-card-legend,
.receiving-catalog-search-controls { display: flex; gap: var(--s-3); }
.receiving-pallet-header,
.receiving-pallet-boundary,
.receiving-pallet-item-head { align-items: center; justify-content: space-between; }
.receiving-pallet-scan { display: grid; gap: var(--s-2); min-width: min(28rem, 100%); }
.receiving-pallet-scan > div,
.receiving-catalog-search-controls { align-items: center; }
.receiving-pallet-scan input,
.receiving-catalog-search-controls input { flex: 1 1 auto; }

/*
 * Leitor nativo: a imagem vive somente no navegador e o componente devolve
 * texto ao campo que ja' e' autoridade da busca. Nao parece uma confirmacao.
 */
.native-barcode-field { display: flex; align-items: stretch; gap: var(--s-2); }
.native-barcode-field > input { flex: 1 1 auto; min-width: 0; }
.native-barcode-scanner { display: inline-flex; flex: 0 0 auto; }
.native-barcode-trigger { white-space: nowrap; }
.native-barcode-trigger > span:first-child { font-size: 1.05em; line-height: 1; }
.native-barcode-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: var(--s-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1rem 3rem rgb(4 28 23 / .24);
}
.native-barcode-dialog::backdrop { background: rgb(4 28 23 / .72); backdrop-filter: blur(3px); }
.native-barcode-dialog-head,
.native-barcode-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.native-barcode-dialog-head h2 { margin: var(--s-1) 0 0; }
.native-barcode-viewport {
  position: relative;
  display: grid;
  min-height: 17rem;
  margin-top: var(--s-4);
  overflow: hidden;
  place-items: center;
  border-radius: var(--radius);
  background: #071f1a;
  color: #fff;
}
.native-barcode-viewport video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.native-barcode-viewport:not(.is-active) video { display: none; }
.native-barcode-viewport > p { max-width: 28rem; margin: 0; padding: var(--s-5); text-align: center; }
.native-barcode-guide {
  position: absolute;
  inset: 50% auto auto 50%;
  display: none;
  width: min(78%, 28rem);
  height: 7rem;
  border: 2px solid #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 999px rgb(0 0 0 / .24);
  transform: translate(-50%, -50%);
}
.native-barcode-viewport.is-active .native-barcode-guide { display: block; }
.native-barcode-help,
.native-barcode-status { margin: var(--s-3) 0 0; }
.native-barcode-help { color: var(--muted); font-size: var(--text-xs); }
.native-barcode-status { min-height: 1.5em; font-weight: var(--fw-semibold); }
.native-barcode-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: var(--s-4); }

@media (max-width: 44rem) {
  .native-barcode-trigger > span:last-child { display: none; }
  .native-barcode-dialog { padding: var(--s-3); }
  .native-barcode-viewport { min-height: 13rem; }
}
.receiving-pallet-boundary {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-pallet-boundary > div { display: grid; gap: var(--s-1); }
.receiving-pallet-boundary span { color: var(--muted); }
.receiving-pallet-item { display: grid; gap: var(--s-4); }
.receiving-item-navigation { display: flex; justify-content: space-between; gap: var(--s-3); }
.receiving-pallet-item-identity { min-width: 0; align-items: center; }
.receiving-pallet-item-identity img,
.receiving-pallet-photo-missing {
  width: 5rem;
  height: 5rem;
  flex: 0 0 5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-sunk);
}
.receiving-pallet-photo-missing { display: grid; place-items: center; color: var(--muted); font-size: var(--text-xs); }
.receiving-pallet-item-identity h3,
.receiving-pallet-item-identity p { margin: 0; }
.receiving-product-card-details { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-product-card-details > summary { padding: var(--s-3); cursor: pointer; }
.receiving-product-card-details > summary strong { margin-right: var(--s-2); }
.receiving-product-card-details > summary span { float: right; color: var(--muted); font-size: var(--text-xs); }
.receiving-product-card-details[open] > summary { border-bottom: 1px solid var(--rule); }
.receiving-product-card { overflow-x: auto; padding: var(--s-3); }
.receiving-product-card-legend { flex-wrap: wrap; margin-bottom: var(--s-3); color: var(--muted); font-size: var(--text-xs); }
.receiving-product-card-legend span::before {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: var(--s-1);
  border-radius: 2px;
  vertical-align: -1px;
}
.receiving-product-card-legend .assurance-human::before { background: var(--ok); }
.receiving-product-card-legend .assurance-source::before { background: color-mix(in srgb, var(--ok) 55%, var(--surface)); }
.receiving-product-card-legend .assurance-proposed::before { background: var(--warn); }
.receiving-product-fields { display: grid; grid-template-columns: repeat(4, minmax(11rem, 1fr)); gap: var(--s-2); min-width: 48rem; margin: 0; }
.receiving-product-field { padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-product-field dt { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--ink); font-size: var(--text-xs); }
.receiving-product-field dt small,
.receiving-product-field dd small { color: var(--muted); font-weight: var(--fw-regular); }
.receiving-product-field dd { display: grid; gap: var(--s-1); margin: var(--s-2) 0 0; overflow-wrap: anywhere; }
.receiving-product-field dd > span { display: block; }
.receiving-product-field.assurance-human_confirmed { border-top: 3px solid var(--ok); }
.receiving-product-field.assurance-source_declared { border-top: 3px solid color-mix(in srgb, var(--ok) 55%, var(--surface)); }
.receiving-product-field.assurance-proposed { border-top: 3px solid var(--warn); }
.receiving-product-field.field-state-missing,
.receiving-product-field.field-state-not_evaluated { border-top-style: dashed; }
.receiving-pallet-completion { display: grid; grid-template-columns: minmax(8rem, .6fr) minmax(9rem, .7fr) minmax(14rem, 1.4fr) auto; gap: var(--s-3); align-items: end; }
.receiving-pallet-completion label,
.receiving-catalog-search form { display: grid; gap: var(--s-1); }
.receiving-physical-location {
  display: grid;
  align-content: end;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-physical-location > span,
.receiving-physical-location > small { color: var(--muted); font-size: var(--text-xs); }
.receiving-physical-location.is-automatic { border-color: var(--brand); background: var(--brand-soft); }
.receiving-physical-location.is-empty { border-style: dashed; }
/*
 * Partes ja destinadas de uma linha.
 *
 * Uma linha pode ir para mais de um deposito. Mostrar o que ja foi
 * destinado evita somar de cabeca e evita destinar a mesma parte duas
 * vezes; o que restou aparece na mesma lista, marcado, em vez de ficar
 * subentendido.
 */
.receiving-allocation-progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}
.receiving-allocation-progress li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  background: var(--surface-sunk);
  font-size: var(--text-xs);
}
.receiving-allocation-progress strong { font-variant-numeric: tabular-nums; }
.receiving-allocation-progress span { color: var(--muted); }
.receiving-allocation-progress .is-pending { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }

/*
 * A grade do que vai para o Bling.
 *
 * SEMAFORO. Ausencia de atributo e' lacuna neutra a preencher, nao falha —
 * "nao falha vermelha", nas palavras do TASK-OPERATION-HEALTH-DASHBOARD. Numa
 * base onde GTIN falta em 73% e peso em 99%, pintar de vermelho tudo que falta
 * deixa a tela vermelha e ensina o operador a ignorar vermelho, que e' o pior
 * desfecho possivel para um semaforo. Aqui vermelho e' reservado ao que
 * BLOQUEIA a acao — identidade externa ambigua — e so a isso.
 *
 * COR NUNCA SOZINHA. Cada quadrado carrega o nome do campo e o estado em
 * texto (61-ACCESSIBILITY §2). A cor confirma; nao informa.
 *
 * A GRADE NAO SE REARRANJA. Se o quadrado clicado crescesse e os outros
 * encolhessem, os alvos andariam debaixo do cursor e cinco decisoes seriam
 * cinco reorganizacoes. O clicado so e' marcado; o editor abre num painel
 * que fica sempre no mesmo lugar.
 */
.bling-grid {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.bling-grid > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.bling-grid h4 { margin: 0; font-size: var(--text-base); }
.bling-grid-summary { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; font-size: var(--text-2xs); }
.bling-grid-tally { padding: .1rem .45rem; border-radius: 100px; font-weight: var(--fw-semibold); }
.bling-grid-tally.is-ready { background: var(--ok-soft); color: var(--ok); }
.bling-grid-tally.is-review { background: var(--warn-soft); color: var(--warn); }
.bling-grid-tally.is-undefined { background: var(--surface); color: var(--muted); border: 1px dashed var(--rule-strong); }
.bling-grid-tally.is-blocked { background: var(--danger-soft); color: var(--danger); }

.bling-grid-destination {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-grid-destination > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.bling-grid-destination > header h5 { margin: 0; font-size: var(--text-sm); }
.bling-grid-destination > header span { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.bling-action-readiness {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-2);
}
.bling-action-readiness > span {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-left-width: .28rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-xs);
}
.bling-action-readiness > span strong { color: var(--ink); font-size: var(--text-sm); }
.bling-action-readiness > .state-ready { border-left-color: var(--ok); background: var(--ok-soft); }
.bling-action-readiness > .state-review_required { border-left-color: var(--warn); background: var(--warn-soft); }
.bling-action-readiness > .state-blocked { border-left-color: var(--danger); background: var(--danger-soft); }
/*
 * Duas colunas: campos a esquerda, editor a direita.
 *
 * Antes o painel abria no fim da coluna unica, entao escolher um campo e
 * edita-lo eram duas telas: a pessoa clicava no quadrado e rolava ate o fim
 * para agir. Lado a lado, o alvo do proximo clique e a edicao do atual ficam
 * visiveis juntos, e o painel acompanha a rolagem em vez de fugir.
 *
 * Exige a largura de `page-dense`: em 60rem as duas colunas se espremem e o
 * remedio vira o problema.
 */
.bling-grid-destination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--s-3) var(--s-4);
  align-items: start;
}
.bling-grid-destination > header,
.bling-grid-destination > .bling-action-readiness { grid-column: 1 / -1; }
.bling-grid-fields { display: grid; gap: var(--s-3); min-width: 0; }
.bling-grid-destination > .bling-square-panel { position: sticky; top: var(--s-4); min-width: 0; }

/*
 * A faixa do cabecalho. Identidade, busca e as duas saidas dividem a largura
 * em vez de empilhar — empilhados, comiam a altura toda antes de o trabalho
 * comecar.
 */
.receiving-pallet-topline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--s-3);
  align-items: start;
}
.receiving-pallet-topline > * { margin: 0; height: 100%; }

.bling-grid-group-head { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--text-xs); }
.bling-grid-group-head small { color: var(--muted); font-family: var(--mono); font-size: var(--text-2xs); }
.bling-field-section,
.bling-stock-entry {
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-field-section + .bling-field-section,
.bling-stock-entry + .bling-stock-entry { margin-top: var(--s-2); }
.bling-field-section > summary,
.bling-stock-entry > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  color: var(--ink);
  font-size: var(--text-xs);
}
.bling-field-section > summary { cursor: pointer; }
.bling-field-section > summary span,
.bling-stock-entry > header span { color: var(--muted); font-size: var(--text-2xs); }
.bling-field-section[open] > summary { margin-bottom: var(--s-2); }
.bling-grid-squares { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-2); }

.bling-square {
  display: grid;
  gap: 2px;
  padding: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.bling-square:hover { border-color: var(--rule); background: var(--surface-sunk); }
.bling-square:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.bling-square-name { color: var(--ink); font-family: var(--mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.bling-square > .bling-square-value { display: block; margin: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.bling-square > .bling-square-value > span { display: block; }
.bling-square-source { color: var(--muted); font-size: var(--text-2xs); overflow-wrap: anywhere; }
.bling-square-state { color: var(--muted); font-size: var(--text-2xs); }

.bling-square.is-missing { background: var(--warn-soft); border-color: var(--warn-soft); }
.bling-square.is-required { border-color: var(--warn); }
.bling-square.state-ready .bling-square-state { color: var(--ok); }
.bling-square.state-review_required { background: var(--warn-soft); }
.bling-square.state-review_required .bling-square-state { color: var(--warn); }
/* Lacuna: neutra e tracejada. Nao e' erro, e nao deve parecer um. */
.bling-square.state-missing,
.bling-square.state-not_evaluated { border-style: dashed; }
.bling-square.state-blocked { border-color: var(--danger); background: var(--danger-soft); }
.bling-square.state-blocked .bling-square-state { color: var(--danger); font-weight: var(--fw-semibold); }
.bling-reference-candidates { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.bling-reference-candidates li {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-size: var(--text-xs);
}
.bling-reference-candidates strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.bling-reference-candidates span { color: var(--muted); font-size: var(--text-2xs); }
.bling-reference-adopt { margin-top: var(--s-1); min-height: 1.9rem; padding: 0 var(--s-3); font-size: var(--text-2xs); }
.bling-reference-note { margin-top: var(--s-1); color: var(--warn); font-size: var(--text-2xs); font-style: italic; }

/*
 * Galeria de imagens observadas.
 *
 * A ordem do clique e' a ordem do anuncio, entao a posicao escolhida aparece
 * no proprio quadro — sem numero, a pessoa nao teria como saber qual sera a
 * principal. E o direito fica embaixo de cada imagem, nao num aviso geral:
 * escolher prepara o payload e nao autoriza publicar, e essa distincao
 * precisa viajar com cada uma.
 */
.bling-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}
.bling-gallery li { display: grid; gap: 2px; min-width: 0; }
.bling-gallery-item {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.bling-gallery-item:hover { border-color: var(--rule-strong); background: var(--surface-sunk); }
.bling-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 2px; background: var(--surface-sunk); }
.bling-gallery-item small { color: var(--muted); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bling-gallery-item.is-chosen { border-color: var(--brand); border-width: 2px; background: var(--brand-soft); }
.bling-gallery-order {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  min-width: 1.15rem;
  padding: 0 .2rem;
  border-radius: 100px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bling-gallery-rights { font-size: var(--text-2xs); color: var(--ok); }
.bling-gallery-rights.is-unknown { color: var(--warn); }
/* Cada anuncio e' um grupo proprio: sem o titulo separando, a foto de um
   produto parecido entraria como se fosse deste. */
.bling-gallery-group { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--rule-strong); }
.bling-gallery-group:first-of-type { border-top: 0; }
.bling-gallery-title { display: grid; gap: 1px; margin: 0; }
.bling-gallery-title strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.bling-gallery-title small { color: var(--muted); font-size: var(--text-2xs); }
/* O alcance de cada decisao precisa ser legivel antes do clique, nao depois. */
.bling-choice-scope { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--text-2xs); }
.bling-choice-scope strong { color: var(--warn); }
.bling-manual-field label small { display: block; color: var(--muted); font-size: var(--text-2xs); font-weight: var(--fw-regular); }

/* Constante do sistema nao convida ao clique da mesma forma. */
.bling-square.kind-constant { background: var(--surface-sunk); }
.bling-square[aria-expanded="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.bling-square-panel {
  min-height: 5rem;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bling-square-panel h5 { margin: 0 0 var(--s-1); font-family: var(--mono); font-size: var(--text-sm); }
.bling-square-panel .muted { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.bling-value-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--text-2xs); }
.bling-square-value { display: grid; gap: 2px; margin: 0 0 var(--s-2); }
.bling-square-value strong { font-size: var(--text-base); overflow-wrap: anywhere; }
.bling-square-value small { color: var(--muted); font-size: var(--text-2xs); }
.bling-current-value { display: grid; gap: 2px; margin: 0 0 var(--s-2); font-size: var(--text-xs); }
.bling-current-value span { color: var(--muted); overflow-wrap: anywhere; }
.bling-reference-candidates { display: grid; gap: var(--s-1); margin: var(--s-2) 0; padding-left: var(--s-4); }
.bling-reference-candidates li { font-size: var(--text-xs); }
.bling-reference-candidates span { display: block; color: var(--muted); }
.bling-manual-field { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.bling-manual-field label { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.bling-manual-field .btn { justify-self: start; }
/*
 * A regua do preco: o anuncio observado, o percentual que a pessoa controla,
 * e a frase que diz qual das duas reguas produziu o numero. O campo fica logo
 * abaixo do valor porque e' ele que muda o resultado.
 */
.bling-price-rule { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); }
.bling-price-rule > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.bling-price-rule strong { font-variant-numeric: tabular-nums; }
.bling-price-rule span { color: var(--muted); font-size: var(--text-xs); }
.bling-price-rule label { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.bling-price-input { display: flex; align-items: center; gap: var(--s-1); max-width: 9rem; }
.bling-price-input input { width: 100%; font-variant-numeric: tabular-nums; text-align: right; }
.bling-price-input span { font-size: var(--text-sm); color: var(--muted); }

/*
 * Fechamento do item.
 *
 * Terminar precisa significar saber. O resumo repete cada campo com o valor
 * e a fonte, marca o que continua vazio em vez de esconder, e mostra ao lado
 * o fato fisico registrado — quantidade, condicao e destino.
 */
.receiving-item-closing {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--ok);
  border-left-width: .35rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.receiving-item-closing > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.receiving-item-closing h4 { margin: 0; font-size: var(--text-base); }
.receiving-item-closing > header span { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.receiving-closing-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s-2);
  margin: 0;
}
.receiving-closing-fields > div {
  min-width: 0;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.receiving-closing-fields dt { color: var(--muted); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; }
.receiving-closing-fields dd { margin: 2px 0 0; min-width: 0; }
.receiving-closing-fields strong { display: block; font-size: var(--text-sm); overflow-wrap: anywhere; }
.receiving-closing-fields small { display: block; color: var(--muted); font-size: var(--text-2xs); }
/* Vazio se declara vazio: esconder lacuna e o que faz ela sobreviver. */
.receiving-closing-fields .is-missing { border-style: dashed; border-color: var(--rule-strong); }
.receiving-closing-empty { color: var(--muted); font-weight: var(--fw-regular); font-style: italic; }
.receiving-closing-constants > div { background: var(--surface); }
.receiving-closing-portions { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.receiving-closing-portions li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.receiving-closing-portions strong { font-variant-numeric: tabular-nums; }
.receiving-closing-portions span { color: var(--ink-2); font-size: var(--text-xs); }
.receiving-closing-pending { margin: 0; padding: var(--s-2); border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: var(--text-xs); }
/* Uma conta Bling por bloco: o mesmo item pode subir para mais de uma, e
   somar tudo num resumo so esconderia qual delas ainda nao pode. */
.receiving-closing-account { display: grid; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.receiving-closing-account:first-of-type { border-top: 0; padding-top: 0; }
.receiving-closing-account-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: 0; font-size: var(--text-sm); }
.receiving-closing-account-head .is-ready { color: var(--ok); font-size: var(--text-2xs); }
.receiving-closing-account-head .is-pending { color: var(--warn); font-size: var(--text-2xs); }

/*
 * Escolha por campo.
 *
 * Cada opcao mostra o valor e a fonte que o afirmou, porque escolher sem
 * saber quem disse nao e' decisao, e' chute. A opcao vigente e' marcada
 * por aria-current e se distingue por borda, fundo e peso.
 */
.receiving-field-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.receiving-field-choice {
  display: grid;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.receiving-field-choice:hover { background: var(--surface-sunk); border-color: var(--ink-2); }
.receiving-field-choice[disabled] { opacity: .55; cursor: not-allowed; }
.receiving-field-choice span { color: var(--ink); font-weight: var(--fw-semibold); }
.receiving-field-choice small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-field-choice[aria-current] {
  border-color: var(--brand);
  border-width: 2px;
  background: var(--brand-soft);
}
.receiving-field-choice[aria-current] span { color: var(--brand-strong); }

/*
 * Navegador de paletes.
 *
 * A faixa rola no proprio eixo: uma remessa real tem dezenas de paletes e
 * quebrar em varias alturas empurraria a conferencia para baixo da dobra,
 * que e' exatamente o que esta tela existe para evitar.
 *
 * O palete corrente e' marcado por aria-current no Blade e se distingue
 * por borda, fundo e peso — nunca so por cor.
 */
.receiving-pallet-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
}
/* A faixa toma a largura inteira e as setas ficam nas pontas: com dezenas de
   paletes, rolar com o dedo no trackpad e' pior do que um alvo fixo. */
.receiving-pallet-nav-strip { grid-column: 2; }
.receiving-pallet-nav-note,
.receiving-pallet-nav-steps { grid-column: 1 / -1; }
.receiving-pallet-nav-arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-md);
  line-height: 1;
  transition: background-color .12s ease, border-color .12s ease;
}
.receiving-pallet-nav-arrow:hover { background: var(--surface-sunk); border-color: var(--ink-2); }
.receiving-pallet-nav-arrow[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.receiving-pallet-nav-strip { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; }
.receiving-pallet-chip {
  display: grid;
  gap: 2px;
  flex: none;
  min-width: 7.5rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-2xs);
  transition: border-color .12s ease, background-color .12s ease;
}
.receiving-pallet-chip:hover { background: var(--surface-sunk); border-color: var(--ink-2); }
.receiving-pallet-chip strong { color: var(--ink); font-size: var(--text-sm); }
.receiving-pallet-chip[aria-current] {
  border-color: var(--brand);
  border-width: 2px;
  background: var(--brand-soft);
}
.receiving-pallet-chip[aria-current] strong { color: var(--brand-strong); font-weight: var(--fw-bold); }
.receiving-pallet-chip-track { display: block; height: .3rem; border-radius: 100px; background: var(--brand-soft); overflow: hidden; }
.receiving-pallet-chip[aria-current] .receiving-pallet-chip-track { background: var(--surface); }
.receiving-pallet-chip-track > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.receiving-pallet-nav-note { margin: 0; color: var(--muted); font-size: var(--text-2xs); }
.receiving-pallet-nav-steps { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.receiving-pallet-image-input { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); }
.receiving-pallet-image-input > div { display: flex; gap: var(--s-2); align-items: center; }
.receiving-market-price { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.receiving-market-price > header { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; }
.receiving-market-price > header > div { display: grid; gap: var(--s-1); }
.receiving-market-price > header > span { font-size: var(--text-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.receiving-market-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-2); }
.receiving-market-offers article { display: grid; gap: var(--s-1); padding: var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-market-offers span,
.receiving-market-offers small,
.receiving-market-price small { color: var(--muted); }
.receiving-catalog-search { position: sticky; bottom: var(--s-3); z-index: 3; display: grid; gap: var(--s-3); }
.receiving-catalog-search.is-inline { position: static; z-index: auto; margin-top: var(--s-2); background: var(--surface-2); }
.receiving-catalog-results { display: grid; gap: var(--s-2); max-height: 22rem; overflow-y: auto; }
.receiving-catalog-results article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.receiving-catalog-results article > div { min-width: 0; display: grid; gap: var(--s-1); }
.receiving-catalog-results article span { color: var(--muted); font-size: var(--text-xs); }
.receiving-catalog-empty { display: grid; gap: var(--s-2); }
.receiving-pallet-search-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); border-color: var(--brand); }
.receiving-pallet-search-result > div { display: grid; gap: var(--s-1); min-width: 0; }
.receiving-pallet-search-result > div span,
.receiving-pallet-search-result li span { color: var(--muted); font-size: var(--text-xs); }
.receiving-pallet-search-result > ul { flex: 1 0 100%; display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.receiving-pallet-search-result li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-pallet-search-result li > div { min-width: 0; display: grid; gap: 2px; }

@media (max-width: 60rem) {
  .receiving-pallet-header,
  .receiving-pallet-boundary,
  .receiving-pallet-item-head { align-items: stretch; flex-direction: column; }
  .receiving-pallet-completion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .receiving-pallet-completion,
  .receiving-catalog-results article { grid-template-columns: 1fr; }
  .receiving-pallet-search-result li { align-items: stretch; flex-direction: column; }
  .receiving-pallet-item-identity { align-items: flex-start; }
  .receiving-market-price > header { align-items: flex-start; flex-direction: column; }
  .receiving-product-card-details > summary span { display: block; float: none; margin: var(--s-1) 0 0 var(--s-4); }
}

/*
 * As duas perguntas do selo de revisao: os obrigatorios do cadastro estao
 * completos, e sobrou proposta esperando alguem. O simbolo carrega o estado
 * junto da cor, porque o selo aparece na tela onde se decide o que sobe.
 */
.receiving-review-tally {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}
.receiving-review-tally li { display: flex; align-items: baseline; gap: var(--s-2); }
/* O simbolo nao encolhe; o texto e' quem quebra em varias linhas. */
.receiving-review-tally li::before { flex: 0 0 auto; font-weight: var(--fw-bold); }
.receiving-review-tally li.is-done { color: var(--ok); }
.receiving-review-tally li.is-done::before { content: "✓"; }
.receiving-review-tally li.is-pending { color: var(--warn); }
.receiving-review-tally li.is-pending::before { content: "•"; }

/*
 * As decisões que não são sobre um valor. Ficam abaixo do campo de digitação
 * porque são a alternativa a ele, e o botão de apagar fica separado dos
 * outros: é o único que destrói dado em sistema de terceiro.
 */
.bling-decision-kinds { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--rule); }
.bling-decision-kinds > p { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.bling-decision-kinds [role="group"] { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bling-decision-kinds label { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.receiving-catalog-note { display: block; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--muted); }

/*
 * O filtro do palete e a marca do proximo item. A marca usa borda E texto:
 * "e o proximo" nao pode depender so de cor.
 */
.receiving-pallet-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.receiving-pallet-filter > button { flex: 0 0 auto; }
.receiving-pallet-filter span { flex: 1 1 12rem; min-width: 0; font-size: var(--text-xs); color: var(--muted); }
.receiving-pallet-item.is-next { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.receiving-pallet-item.is-bling-complete {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  box-shadow: 0 0 0 2px var(--brand);
}
.receiving-pallet-item.is-bling-complete > .receiving-pallet-item-head,
.receiving-pallet-item.is-bling-complete > .receiving-pallet-next { color: #FFF; }
.receiving-pallet-item.is-bling-complete > .receiving-pallet-item-head p,
.receiving-pallet-item.is-bling-complete > .receiving-pallet-item-head span { color: rgb(255 255 255 / .82); }
.receiving-pallet-next { margin: 0 0 var(--s-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--brand-strong); }

/*
 * A identidade sugerida pelo GTIN da nota. O escolhido carrega marca escrita
 * alem da borda, e a opcao descartada continua na lista: quando o mesmo codigo
 * aparece em dois cadastros, esconder o outro seria decidir pelo operador.
 */
.receiving-identity-suggestion { display: grid; gap: var(--s-2); margin: var(--s-3) 0; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); }
.receiving-identity-suggestion > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.receiving-identity-suggestion > p span { font-size: var(--text-xs); color: var(--muted); }
.receiving-identity-suggestion ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.receiving-identity-suggestion li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-identity-suggestion li.is-chosen { border-color: var(--brand); }
/*
 * Nome de produto e' longo por natureza — "Impressora Multifuncional Brother
 * Dcpt830dw Tank Wifi 110v". Sem encolher, ele empurra o botao para fora do
 * cartao; sem quebrar palavra, um codigo comprido estoura a borda.
 */
.receiving-identity-suggestion li > div { flex: 1 1 16rem; min-width: 0; display: grid; gap: 2px; }
.receiving-identity-suggestion li > div strong { overflow-wrap: anywhere; }
.receiving-identity-suggestion li > button { flex: 0 0 auto; }
.receiving-identity-suggestion li span { font-size: var(--text-xs); color: var(--muted); }
/* Especificidade em vez de !important: a marca vence por estar mais fundo. */
.receiving-identity-suggestion li > div > .receiving-identity-mark { font-weight: var(--fw-semibold); color: var(--brand-strong); }
.receiving-identity-warning { margin: 0; font-size: var(--text-xs); color: var(--warn); }

/*
 * O retrato do que sobe ao Bling. Um cadastro por conta, uma entrada por
 * porcao — a forma da lista e' a forma das chamadas que serao feitas.
 */
.receiving-manifest { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); }
.receiving-manifest-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.receiving-manifest-head span { flex: 1 1 14rem; min-width: 0; font-size: var(--text-xs); color: var(--warn); }
.receiving-manifest ul { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.receiving-manifest li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.receiving-manifest li > strong { flex: 0 0 auto; }
.receiving-manifest li span { flex: 1 1 14rem; min-width: 0; font-size: var(--text-xs); color: var(--muted); }
.receiving-manifest small { overflow-wrap: anywhere; }
.receiving-manifest small { font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Transferências — rota, manifesto e saga externa da ADR-0058. */
.transfer-workspace { display: grid; gap: var(--s-5); }
.transfer-hero, .transfer-active-head, .transfer-section-head, .transfer-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); }
.transfer-hero { padding: var(--s-5) 0 var(--s-2); }
.transfer-hero h1 { margin: var(--s-1) 0 var(--s-2); font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.055em; }
.transfer-hero p { max-width: 54rem; margin: 0; color: var(--muted); font-size: var(--text-lg); }
.transfer-route-card, .transfer-active, .transfer-history { overflow: hidden; padding: 0; }
.transfer-section-head { padding: var(--s-5); border-bottom: 1px solid var(--rule); }
.transfer-section-head h2, .transfer-section-head h3 { margin: var(--s-1) 0; }
.transfer-section-head p { margin: 0; color: var(--muted); }
.transfer-step { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font: 700 var(--text-xs)/1 var(--mono); }
.transfer-route-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6); align-items: stretch; }
.transfer-endpoint { min-width: 0; margin: 0; padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); }
.transfer-endpoint legend { padding: 0 var(--s-2); font-weight: var(--fw-bold); }
.transfer-endpoint legend span { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-right: var(--s-1); border-radius: 999px; }
.transfer-endpoint-source legend span { background: var(--danger-soft); color: var(--danger); }
.transfer-endpoint-destination legend span { background: var(--ok-soft); color: var(--ok); }
.transfer-endpoint .field + .field { margin-top: var(--s-4); }
.transfer-endpoint label small { color: var(--muted); font-weight: var(--fw-regular); }
.transfer-route-arrow { align-self: center; display: grid; place-items: center; gap: var(--s-2); min-width: 7rem; color: var(--brand-strong); text-align: center; }
.transfer-route-arrow span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand-soft); font-size: 1.7rem; }
.transfer-route-arrow small { color: var(--muted); font-size: var(--text-xs); }
.transfer-route-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-2); }
.transfer-route-foot p { max-width: 50rem; margin: 0; color: var(--muted); }
.transfer-active-head { padding: var(--s-5); background: linear-gradient(135deg, var(--brand-strong), var(--brand)); color: white; }
.transfer-active-head .eyebrow, .transfer-active-head p { color: rgb(255 255 255 / .78); }
.transfer-active-head h2 { margin: var(--s-1) 0; color: white; }
.transfer-active-head p { margin: 0; }
.transfer-active-head .status { background: white; color: var(--brand-strong); border-color: transparent; }
.transfer-route-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, .3fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.transfer-route-summary > div:not(.transfer-route-line) { display: grid; gap: .2rem; }
.transfer-route-summary > div > span { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.transfer-route-summary small { color: var(--muted); }
.transfer-route-line { height: 2px; background: linear-gradient(90deg, var(--danger), var(--brand)); position: relative; }
.transfer-route-line::after { content: ""; position: absolute; right: 0; top: 50%; width: .55rem; height: .55rem; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); }
.transfer-route-summary dl { display: flex; gap: var(--s-4); margin: 0; }
.transfer-route-summary dl div { display: grid; }
.transfer-route-summary dt { color: var(--muted); font-size: var(--text-xs); }
.transfer-route-summary dd { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-bold); }
.transfer-scan-zone { border-bottom: 1px solid var(--rule); }
.transfer-search-form { padding: var(--s-5); }
.transfer-search-form > label { display: block; margin-bottom: var(--s-2); font-weight: var(--fw-semibold); }
.transfer-search-results { display: grid; gap: 1px; border-top: 1px solid var(--rule); background: var(--rule); }
.transfer-search-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-5); border: 0; background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.transfer-search-result:hover { background: var(--brand-soft); }
.transfer-search-result > span:nth-child(2) { display: grid; gap: .2rem; min-width: 0; }
.transfer-search-result small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.transfer-search-result b { color: var(--brand-strong); }
.transfer-product-thumb { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: white; color: var(--muted); }
.transfer-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.transfer-product-thumb-large { width: 4.5rem; }
.transfer-manifest > .transfer-section-head { border-bottom: 0; }
.transfer-item { display: grid; grid-template-columns: auto minmax(16rem, 1.4fr) minmax(9rem, .35fr) minmax(12rem, .55fr); align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); }
.transfer-item.is-complete { background: color-mix(in srgb, var(--ok-soft) 64%, white); }
.transfer-item-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .75fr); gap: var(--s-4); align-items: center; min-width: 0; }
.transfer-item-main > div, .transfer-identity-resolution, .transfer-item-state { display: grid; gap: .25rem; min-width: 0; }
.transfer-item-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-item-main small, .transfer-item-state small { color: var(--muted); }
.transfer-identity-resolution { padding-left: var(--s-4); border-left: 1px solid var(--rule); font-size: var(--text-sm); }
.transfer-item-quantity label { display: block; color: var(--muted); font-size: var(--text-xs); }
.transfer-item-quantity > div { display: flex; gap: var(--s-2); }
.transfer-item-quantity input { width: 5.5rem; }
.transfer-item-quantity > strong { font-size: var(--text-xl); }
.transfer-item-state { justify-items: start; }
.transfer-empty-manifest { border-top: 1px solid var(--rule); }
.transfer-actions { align-items: center; padding: var(--s-5); border-top: 1px solid var(--rule); background: var(--surface-2); }
.transfer-actions > div { display: grid; justify-items: end; gap: var(--s-2); }
.transfer-actions p, .transfer-actions small { margin: 0; color: var(--muted); }
.transfer-history-list { display: grid; }
.transfer-history-list > button { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); border: 0; border-top: 1px solid var(--rule); background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.transfer-history-list > button:hover, .transfer-history-list > button.is-current { background: var(--brand-soft); }
.transfer-history-list > button > span:not(.status) { display: grid; }
.transfer-history-list small { color: var(--muted); }
.transfer-loading { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; padding: var(--s-5); background: color-mix(in srgb, var(--brand-strong) 94%, black); color: white; }
.transfer-loading > div { width: min(42rem, 100%); }
.transfer-loading .eyebrow, .transfer-loading p { color: rgb(255 255 255 / .72); }
.transfer-loading h2 { margin: var(--s-2) 0 var(--s-5); color: white; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.045em; }
.transfer-loading-bar { height: .55rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .2); }
.transfer-loading-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: white; animation: transfer-progress 1.5s ease-in-out infinite alternate; }
.transfer-loading ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin: var(--s-4) 0; padding: 0; list-style: none; counter-reset: transfer-step; }
.transfer-loading li { color: rgb(255 255 255 / .75); font-size: var(--text-sm); counter-increment: transfer-step; }
.transfer-loading li::before { content: counter(transfer-step, decimal-leading-zero); display: block; margin-bottom: .3rem; color: white; font-weight: var(--fw-bold); }
@keyframes transfer-progress { to { transform: translateX(150%); } }

.pre-purchase-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.pre-purchase-bar { height: .35rem; margin-top: .35rem; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.pre-purchase-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--ok)); }
.pre-purchase-progress { margin: var(--s-5) 0; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); }
.pre-purchase-progress .section-head { margin: 0 0 var(--s-3); }
.pre-purchase-progress h3 { margin: 0; }
.pre-purchase-progress p, .pre-purchase-stage-list { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-sm); }
.pre-purchase-progress > .section-head > strong { color: var(--brand-strong); font-size: var(--text-xl); }
.pre-purchase-progress-track { height: .7rem; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.pre-purchase-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--ok)); transition: width .4s ease; }
.pre-purchase-stage-list { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pre-purchase-list-head { margin-top: var(--s-5); }
.pre-purchase-visuals { display: grid; grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr); gap: var(--s-5); margin-top: var(--s-5); }
.pre-purchase-health-chart { display: grid; justify-items: center; gap: var(--s-3); }
.pre-purchase-health-chart h3 { justify-self: start; margin: 0; }
.pre-purchase-donut { width: 10rem; aspect-ratio: 1; border-radius: 50%; position: relative; }
.pre-purchase-donut::after { content: ""; position: absolute; inset: 1.8rem; border-radius: 50%; background: var(--surface); }
.pre-purchase-legend { display: grid; gap: .35rem; width: 100%; font-size: var(--text-sm); }
.pre-purchase-legend span { display: flex; align-items: center; gap: .45rem; }
.pre-purchase-legend b { margin-left: auto; }
.pre-purchase-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; }
.pre-purchase-dot-ok { color: var(--ok); }
.pre-purchase-dot-danger { color: var(--danger); }
.pre-purchase-dot-warning { color: var(--warn); }
.pre-purchase-dot-cost { color: var(--brand); }
.pre-purchase-dot-sale { color: var(--ok); }
.pre-purchase-financial-chart { display: grid; gap: var(--s-3); }
.pre-purchase-financial-chart .section-head { margin: 0; }
.pre-purchase-chart-key { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.pre-purchase-financial-row { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(10rem, 1.4fr) minmax(7rem, .45fr); align-items: center; gap: var(--s-3); }
.pre-purchase-financial-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-purchase-financial-bars { display: grid; gap: .2rem; }
.pre-purchase-financial-bars span { display: block; height: .42rem; min-width: 2px; border-radius: 999px; }
.pre-purchase-financial-cost { background: var(--brand); }
.pre-purchase-financial-sale { background: var(--ok); }
.pre-purchase-financial-row small { color: var(--muted); text-align: right; white-space: nowrap; }

.receiving-fiscal-attention { display: grid; gap: .25rem; margin-top: var(--s-4); padding: var(--s-3); border-left: .25rem solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.receiving-fiscal-attention strong { color: var(--warn); }
.receiving-fiscal-attention span, .receiving-fiscal-attention small { color: var(--muted); }
.receiving-item-overview { display: flex; justify-content: space-between; gap: var(--s-5); align-items: end; margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.receiving-item-overview h2 { margin: .2rem 0; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.receiving-item-overview p, .receiving-item-overview-score span { margin: 0; color: var(--muted); }
.receiving-item-overview-score { display: grid; gap: .2rem; min-width: 12rem; text-align: right; }
.receiving-item-overview-score strong { color: var(--brand-strong); font-size: var(--text-xl); }
.receiving-item-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-bottom: var(--s-5); }
.receiving-item-steps button { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: inherit; text-align: left; background: var(--surface-2); cursor: pointer; }
.receiving-item-steps button:hover, .receiving-item-steps button:focus-visible { border-color: var(--brand); }
.receiving-item-steps button[aria-current="step"] { border-color: var(--brand); box-shadow: inset 0 -.2rem var(--brand); }
.receiving-pallet-item [x-cloak] { display: none !important; }
.receiving-item-steps strong { color: var(--brand-strong); }
.receiving-item-steps span { font-size: var(--text-sm); }
.receiving-item-overview-panel { display: grid; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); }
.receiving-item-overview-panel > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.receiving-item-overview-panel h3 { margin: .2rem 0 0; font-size: var(--text-base); }
.receiving-item-overview-panel > header > span { color: var(--muted); font-size: var(--text-xs); }
.receiving-item-overview-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-2); margin: 0; }
.receiving-item-overview-fields > div { display: grid; gap: .2rem; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-item-overview-fields dt { color: var(--muted); font-size: var(--text-2xs); }
.receiving-item-overview-fields dd { display: grid; gap: .2rem; margin: 0; }
.receiving-item-overview-fields dd strong { overflow-wrap: anywhere; }
.receiving-item-overview-fields dd small { color: var(--muted); font-size: var(--text-2xs); }
.receiving-item-overview-note { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.receiving-field-choice.is-reference-only { display: grid; gap: .25rem; padding: var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); color: var(--muted); text-align: left; }
.receiving-field-choice.is-reference-only span { color: var(--ink); }
.receiving-field-choice.is-reference-only small { font-size: var(--text-2xs); }

@media (max-width: 760px) {
  .receiving-item-overview { align-items: start; flex-direction: column; }
  .receiving-item-overview-score { min-width: 0; text-align: left; }
  .receiving-item-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .pre-purchase-columns { grid-template-columns: 1fr; }
  .pre-purchase-visuals { grid-template-columns: 1fr; }
  .pre-purchase-health-chart { justify-items: stretch; }
  .pre-purchase-donut { margin-inline: auto; }
}

@media (max-width: 680px) {
  .pre-purchase-financial-row { grid-template-columns: 1fr; gap: .2rem; }
  .pre-purchase-financial-row small { text-align: left; }
  .pre-purchase-chart-key { display: none; }
}

@media (max-width: 960px) {
  .transfer-route-form { grid-template-columns: 1fr; }
  .transfer-route-arrow { transform: rotate(90deg); }
  .transfer-route-foot { grid-column: auto; }
  .transfer-route-summary { grid-template-columns: 1fr; }
  .transfer-route-line { width: 2px; height: 2rem; margin-left: var(--s-3); }
  .transfer-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .transfer-item-main { grid-template-columns: 1fr; }
  .transfer-identity-resolution { padding: var(--s-2) 0 0; border: 0; border-top: 1px solid var(--rule); }
  .transfer-item-state { grid-column: 2 / -1; }
}
@media (max-width: 680px) {
  .transfer-hero, .transfer-active-head, .transfer-route-foot, .transfer-actions { flex-direction: column; align-items: stretch; }
  .transfer-route-form, .transfer-section-head, .transfer-search-form { padding: var(--s-4); }
  .transfer-item { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); }
  .transfer-item-quantity, .transfer-item-state { grid-column: 2; }
  .transfer-history-list > button { grid-template-columns: 1fr auto; }
  .transfer-history-list > button > span:nth-child(3) { grid-column: 1; }
  .transfer-loading ol { grid-template-columns: 1fr 1fr; }
}
.receiving-pallet-loading {
    display: none;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid rgb(7 83 67 / 35%);
    border-inline-start: .25rem solid rgb(7 83 67);
    background: rgb(7 83 67 / 7%);
    color: rgb(7 83 67);
    font-size: var(--text-sm);
}

.receiving-pallet-loading-mark {
    display: inline-grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
}

/* Navegação entre paletes também aparece na ficha; compacta para preservar
   espaço, sem misturar chips de contexto com os dados do item. */
.receiving-pallet-nav.is-compact .receiving-pallet-chip-track { display: none; }
.receiving-pallet-nav.is-compact .receiving-pallet-chip { padding: .2rem .45rem; }
.receiving-pallet-nav.is-compact .receiving-pallet-chip strong { font-size: var(--text-2xs); }

/* Contrato visual da referência da ficha: a fila reserva a miniatura e
   identifica a procedência do casamento no próprio quadro. */
.receiving-queue-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.receiving-queue-thumb { position: relative; width: 2.6rem; height: 2.6rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-sunk); overflow: hidden; display: block; }
.receiving-queue-thumb-source { position: absolute; right: 0; bottom: 0; padding: .08rem .2rem; font: 700 .5rem/1 var(--mono); }
.receiving-queue-thumb-source.is-gtin { background: var(--brand-soft); color: var(--brand-strong); }
.receiving-queue-thumb-source.is-description { background: var(--warn-soft); color: var(--warn); }
.receiving-queue-identity { min-width: 0; }
.receiving-queue-identity h3 { margin: 0; font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receiving-queue-key { display: block; color: var(--muted); font: .6rem/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receiving-queue-key.is-missing { color: var(--warn); }
@media (max-width: 48rem) { .receiving-queue-row { grid-template-columns: 2.6rem minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .receiving-pallet-loading-mark {
        animation: none;
    }
}

/* Fila do palete — a caixa da miniatura manda no tamanho.
   `.receiving-pallet-photo-missing` nasceu no cabeçalho do item, com 5rem
   próprios; dentro da miniatura de 2,6rem ela estourava a linha. Aqui ela
   apenas preenche a caixa, sem trazer medida nenhuma de casa. */
.receiving-queue-thumb .receiving-pallet-photo-missing {
  width: 100%;
  height: 100%;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 700 .5rem/1.05 var(--mono);
  text-align: center;
}
/* Sem foto não é buraco: é a mesma caixa, tracejada. Se ela sumisse, a linha
   encolheria e a lista perderia o alinhamento de cima a baixo. */
.receiving-queue-thumb.is-empty { border-style: dashed; }
/* O número é o que o olho procura na fila; a fonte fica ao lado, em peso normal. */
.receiving-queue-key b { font-weight: 600; color: var(--ink-2); }

/* Na fila do palete o item não é cartão: quem tem borda e respiro é a linha.
   Sem isto, cada linha de 44px vinha embrulhada em 24px de padding do `.card`
   mais dois gaps de 16px — seis linhas ocupavam a tela inteira. */
.receiving-pallet-item.is-queue-row { gap: 0; }
.receiving-pallet-items:has(> .is-queue-row) { gap: var(--s-1); }

/* Na linha da fila, estado e ação ficam LADO A LADO. Empilhados, davam à linha
   o dobro da altura de que ela precisa — e a fila existe para varrer, não para
   ler. Fora da fila o empilhamento continua como estava. */
.receiving-queue-row .receiving-pallet-queue-state {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--s-2);
}

/* A busca pedia 28rem de largura mínima dentro de uma coluna de 18rem: o botão
   "Localizar" saía pela borda do cartão. Na faixa do topo ela cede e quebra. */
.receiving-pallet-topline .receiving-pallet-scan { min-width: 0; }
.receiving-pallet-topline .receiving-pallet-scan > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* O filtro "Só o que precisa de você" saía pela borda do cartão quando a faixa
   do topo apertava a coluna. Ele quebra junto com o resto. */
.receiving-pallet-topline .receiving-pallet-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
/* Sem conteúdo visível, o cabeçalho da página não pode reservar altura. */
.page-head:has(> h1.sr-only:only-child) { margin: 0; padding: 0; }

/* A faixa do topo dividia as três colunas por igual, mas a da busca pede 28rem
   para caber campo, leitor e botão: com 18rem, o filtro saltava por cima do
   cartão vizinho. A busca ganha a largura de que precisa, e o cartão quebra em
   vez de transbordar. */
.receiving-pallet-topline {
  grid-template-columns: minmax(27rem, 1.5fr) minmax(17rem, 1fr) minmax(15rem, 1fr);
}
.receiving-pallet-topline .receiving-pallet-header { flex-wrap: wrap; }
.receiving-pallet-topline .receiving-pallet-header > * { min-width: 0; }
@media (max-width: 62rem) {
  .receiving-pallet-topline { grid-template-columns: 1fr; }
}

/* Os casos da Revisão da remessa continuam inteiros, mas recolhidos: eles não
   mudam nunca, e liam-se uma vez. */
.receiving-pallet-boundary-cases > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--brand-strong);
}
.receiving-pallet-boundary-cases > span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Campo, leitor e botão cabem numa linha só quando o campo cede: em três linhas
   empilhadas, a busca sozinha empurrava a fila 90px para baixo. */
.receiving-pallet-topline .receiving-pallet-scan > div { flex-wrap: nowrap; }
.receiving-pallet-topline .receiving-pallet-scan input { flex: 1 1 8rem; min-width: 0; }
/* Os cartões da faixa não precisam ter todos a altura do maior. */
.receiving-pallet-topline > * { height: auto; }

/* Cabeçalho do palete em duas alturas: identidade e filtro na primeira linha,
   a busca ocupando a largura toda na segunda. */
.receiving-pallet-header-line { flex-wrap: wrap; align-items: flex-start; }
.receiving-pallet-identity-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-width: 0;
  flex: 1 1 100%;
}
.receiving-pallet-identity-line h2 { margin: 0; font-size: var(--text-md); }
.receiving-pallet-identity-line p { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.receiving-pallet-header-line .receiving-pallet-scan { flex: 1 1 100%; margin: 0; }
.receiving-pallet-header-line .receiving-pallet-filter { margin-top: 0; flex: 0 0 auto; }

/* A miniatura a 41px com corte `cover` virava um borrão: quem confere precisa
   reconhecer a peça de relance. Maior, e encaixando a foto inteira em vez de
   cortá-la — foto de catálogo tem fundo branco e o produto no meio. */
.receiving-queue-thumb { width: 3.5rem; height: 3.5rem; }
.receiving-queue-thumb img { object-fit: contain; background: var(--surface); }
.receiving-queue-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; }

/* O campo é o protagonista da busca: ele recebe o bipe. O leitor de câmera e o
   botão são apoio e não devem ser mais largos que ele. */
.receiving-pallet-topline .receiving-pallet-scan input { flex: 4 1 16rem; }
.receiving-pallet-topline .receiving-pallet-scan > div > *:not(input) { flex: 0 0 auto; }
/* Identidade e filtro dividem a primeira linha; a busca fica com a segunda. */
.receiving-pallet-identity-line { flex: 1 1 auto; }
.receiving-pallet-header-line .receiving-pallet-filter { order: 1; margin-left: auto; }
.receiving-pallet-header-line .receiving-pallet-scan { order: 2; }

/* Ordem natural de leitura: identidade, busca, filtro. E o campo ganha a linha
   toda — ele é onde o bipe cai, e disputar largura com o botão da câmera o
   deixava menor que os próprios botões de apoio. */
.receiving-pallet-header-line .receiving-pallet-filter { order: 3; margin-left: 0; }
.receiving-pallet-header-line .receiving-pallet-scan { order: 2; }
.receiving-pallet-identity-line { order: 1; }
.receiving-pallet-topline .receiving-pallet-scan > div { flex-wrap: wrap; }
.receiving-pallet-topline .receiving-pallet-scan input { flex: 1 1 100%; }

/* A imagem precisa de medida própria: sem largura e altura, `object-fit` não
   tem o que ajustar e a foto entra no tamanho original, cortada pela caixa. */
.receiving-queue-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Os cartões de referência no rodapé, discretos. */
.receiving-pallet-reference-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Com os dois cartões de referência no rodapé, a faixa do topo tem um filho só:
   ela deixa de ser grade de três colunas e o cabeçalho ocupa a largura inteira.
   Em barra, identidade, busca e filtro cabem numa linha — o que antes eram seis
   linhas empilhadas num terço da tela. */
.receiving-pallet-topline { grid-template-columns: 1fr; }
.receiving-pallet-header-line {
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.receiving-pallet-header-line .receiving-pallet-identity-line { flex: 0 1 auto; }
.receiving-pallet-header-line .receiving-pallet-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 24rem;
}
.receiving-pallet-header-line .receiving-pallet-scan > div {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  flex: 1 1 20rem;
}
.receiving-pallet-header-line .receiving-pallet-scan input { flex: 1 1 12rem; min-width: 0; }
/* A dica e a contagem descem para uma segunda linha fina, em vez de empurrar a
   busca para baixo. */
.receiving-pallet-header-line .receiving-pallet-scan > small { flex: 1 1 100%; order: 9; }
.receiving-pallet-header-line .receiving-pallet-filter { flex: 0 0 auto; order: 5; margin-top: 0; }

/* Sem `min-width: 0` a linha da busca não encolhe: ela transbordava a própria
   caixa e o "Localizar" ia parar debaixo do filtro. Agora ela cede, e se ainda
   não couber, quebra em vez de sobrepor. */
.receiving-pallet-header-line .receiving-pallet-scan > div {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

/* A busca absorve o espaço livre da barra: sobrava vazio dos dois lados dela
   enquanto o campo — que recebe o bipe — ficava do tamanho do botão de apoio. */
.receiving-pallet-header-line .receiving-pallet-scan { flex-grow: 6; }
.receiving-pallet-header-line .receiving-pallet-scan input { flex: 1 1 16rem; }
.receiving-pallet-header-line .receiving-pallet-scan > small { color: var(--muted); }

/* Sem campo aberto, a grade usa a largura inteira: a coluna do editor aparece
   quando ela tem o que mostrar. O convite "escolha um campo" vira uma linha
   fina no rodapé da grade, em vez de uma coluna de 24rem sempre vazia. */
.bling-grid-destination:not(.has-open-square) { grid-template-columns: 1fr; }
.bling-grid-destination:not(.has-open-square) > .bling-square-panel {
  grid-column: 1 / -1;
  position: static;
  padding: var(--s-2) 0 0;
  border-top: 1px dashed var(--rule);
  font-size: var(--text-xs);
}

/* Na ficha, o chip do palete é só o código: o percentual exigiria a projeção do
   resumo da remessa, que uma ficha não deve pagar. Melhor não mostrar do que
   repetir "progresso não apurado" em todos. */
.receiving-pallet-nav.is-navigation-only .receiving-pallet-chip span { display: none; }
.receiving-pallet-nav.is-navigation-only .receiving-pallet-chip { padding: .3rem .55rem; }

/* Na ficha o chip é só o código: sem a projeção do resumo não há percentual, e
   repetir "progresso não apurado" em todos os chips é ruído, não informação. */
.receiving-pallet-nav.is-compact .receiving-pallet-chip span { display: none; }
.receiving-pallet-nav.is-compact .receiving-pallet-chip { padding: .28rem .5rem; }
.receiving-pallet-nav.is-compact .receiving-pallet-chip strong { font-size: var(--text-2xs); }

/* As três saídas da ficha numa linha: fila, ficha anterior, próxima ficha. */
.receiving-item-navigation { flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* Os opcionais em branco ficam a um clique: eles não têm valor, nem proposta,
   nem decisão — recolher não esconde informação, devolve altura. */
.bling-grid-blank > summary {
  cursor: pointer;
  padding: var(--s-2) 0 0;
  font-size: var(--text-2xs);
  color: var(--brand-strong);
}
.bling-grid-blank[open] > summary { margin-bottom: var(--s-2); }

/* Preço de mercado e tentativa experimental dividem a linha. Empilhados, os dois
   juntos passavam de mil pixels e empurravam a conferência física para fora da
   tela — e nenhum dos dois é formulário: são consulta. */
.receiving-ficha-strips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--s-3);
  align-items: start;
}

/* Densidade da célula, como no desenho: o rótulo é etiqueta, não texto; o valor
   manda; a fonte sussurra. Com sessenta campos na tela, meio ponto em cada
   andar vira uma coluna a mais e várias linhas a menos. */
.bling-grid-squares .bling-square-name {
  font-size: .58rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.bling-grid-squares .bling-square-value { margin: 0; }
.bling-grid-squares .bling-square-value strong { font-size: var(--text-sm); font-weight: 500; }
.bling-grid-squares .bling-square-source { font-size: .56rem; line-height: 1.3; }
.bling-grid-squares .bling-square { padding: .18rem .3rem; gap: 1px; }

/* Descrição longa não pode ditar a altura da grade: duas linhas bastam para
   reconhecer o texto, e o conteúdo inteiro está no editor, a um clique. Sem
   isto, um campo de quinhentos caracteres empurrava os outros cinquenta e nove
   para fora da tela. */
.bling-grid-squares .bling-square-value strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bling-grid-squares .bling-square-source {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nos quadrados da grade, `.bling-square-value` É o <strong> — as regras acima
   miravam um filho que só existe no painel do editor. */
.bling-grid-squares .bling-square-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
}

/* O editor deixa de reorganizar a grade.
 *
 * Antes, abrir um campo transformava a seção em duas colunas: os sessenta
 * quadrados encolhiam, mudavam de lugar, e o campo que a pessoa acabou de
 * clicar ia parar em outro ponto da tela. Editar não pode custar reencontrar
 * o resto.
 *
 * Ele fica ancorado no canto, sempre no mesmo lugar, sobre a grade. A leitura
 * em volta continua válida enquanto se decide.
 */
.bling-grid-destination.has-open-square { grid-template-columns: 1fr; }
.bling-grid-destination.has-open-square > .bling-square-panel {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 60;
  width: min(26rem, calc(100vw - 2 * var(--s-4)));
  max-height: min(32rem, 76vh);
  overflow-y: auto;
  padding: var(--s-3);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(12, 32, 26, .18), 0 1px 3px rgba(12, 32, 26, .10);
}
/* Em tela pequena ele encosta nas bordas e vira gaveta. */
@media (max-width: 40rem) {
  .bling-grid-destination.has-open-square > .bling-square-panel {
    left: var(--s-2);
    right: var(--s-2);
    bottom: var(--s-2);
    width: auto;
    max-height: 70vh;
  }
}

/* Sem âncora visual, o painel no canto não diz de qual campo está falando.
   O quadrado aberto se acende e fica sendo a ligação entre os dois. */
.bling-square[aria-expanded="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

/* O editor vai para o centro, como a tela de envio ao Bling.
 *
 * No canto ele competia com a borda da janela e ficava longe do olhar de quem
 * acabou de clicar no meio da grade. No centro é onde a atenção já está.
 *
 * Fundo branco quase opaco com desfoque atrás: a grade continua legível por
 * baixo — decidir um campo é confrontar com o que está em volta, não isolar-se
 * dele. Por isso não há cortina cobrindo a tela.
 */
.bling-grid-destination.has-open-square > .bling-square-panel {
  right: auto;
  bottom: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 2 * var(--s-4)));
  max-height: min(34rem, 80vh);
  padding: var(--s-4);
  background: rgb(255 255 255 / .94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--brand);
  box-shadow: 0 18px 48px rgb(12 32 26 / .22), 0 2px 6px rgb(12 32 26 / .12);
}
@media (max-width: 40rem) {
  .bling-grid-destination.has-open-square > .bling-square-panel {
    left: var(--s-2);
    right: var(--s-2);
    top: auto;
    bottom: var(--s-2);
    transform: none;
    width: auto;
  }
}

/* Editar um campo é o momento de foco da ficha: a tela inteira recua atrás de um
   véu branco, e só o painel fica nítido. A grade continua visível por baixo —
   recuada, não escondida — porque decidir é confrontar com o que está em volta. */
.bling-grid-destination.has-open-square::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(255 255 255 / .74);
  backdrop-filter: blur(3px);
}
.bling-grid-destination.has-open-square > .bling-square-panel {
  width: min(34rem, calc(100vw - 2 * var(--s-4)));
  max-height: min(38rem, 84vh);
  padding: var(--s-5);
  background: var(--surface);
  backdrop-filter: none;
}
/* O × fica no canto do painel, fora do caminho da leitura. */
.bling-square-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.bling-square-close:hover { color: var(--ink); background: var(--surface-sunk); border-color: var(--rule); }
.bling-square-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* O destino em faixa horizontal.
 *
 * A grade de quatro colunas embrulhava os campos em pares, e cada par empilhava:
 * quantidade em cima de condição, destino em cima da quantidade da porção. Na
 * prática eram duas fileiras onde cabe uma. Aqui todos os controles fluem lado a
 * lado e quebram sozinhos quando a janela aperta. */
.receiving-pallet-completion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}
.receiving-pallet-completion > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  min-width: 0;
  flex: 1 1 auto;
}
.receiving-pallet-completion label { flex: 1 1 9rem; min-width: 0; }
.receiving-pallet-completion .receiving-physical-location { flex: 1 1 14rem; }
.receiving-pallet-completion > button,
.receiving-pallet-completion button[type="submit"] { flex: 0 0 auto; }

/* Sem teto, "Quantidade contada" e "Condição" comiam a faixa inteira e
   empurravam os outros quatro para uma segunda fileira. Cada controle recebe a
   largura que o seu conteúdo pede, e sobra espaço para todos na mesma linha. */
.receiving-pallet-completion label { flex: 1 1 8rem; max-width: 13rem; }
.receiving-pallet-completion .receiving-physical-location { flex: 1 1 11rem; max-width: 17rem; }

/* O aviso da tela de espera: o que fazer se a conexão cair no meio do envio. */
.receiving-bling-progress-note {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgb(255 255 255 / .22);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgb(255 255 255 / .82);
}
.receiving-bling-progress-note strong { color: #FFF; }

/* Os <div> que agrupam os campos deixam de existir para o layout: cada controle
   vira filho direto da faixa e se distribui sozinho. Como blocos, eles quebravam
   em bloco — dois campos passavam para a fileira de baixo mesmo havendo espaço
   para um deles. */
.receiving-pallet-completion > div { display: contents; }

/* O rótulo reserva duas linhas, com ou sem quebra: assim todos os controles da
   faixa começam na mesma altura. Sem isso, "Quantidade contada" quebrava em duas
   linhas e empurrava o campo dela para baixo dos vizinhos. */
.receiving-pallet-completion { align-items: start; }
.receiving-pallet-completion label {
  grid-template-rows: 2.4rem auto auto;
  align-content: start;
}
.receiving-pallet-completion .receiving-physical-location { align-content: start; }

/* Filho de grade não encolhe abaixo do próprio conteúdo sem `min-width: 0`: o
   nome do produto e as descrições longas empurravam a "Criação experimental no
   Bling" para fora da ficha. Palavra comprida quebra em vez de vazar. */
.receiving-ficha-strips > * { min-width: 0; }
.receiving-ficha-strips :where(p, li, dd, dt, span, strong, small, code) { overflow-wrap: anywhere; }
.receiving-ficha-strips :where(ul, ol, dl) { margin: 0; padding-left: 0; list-style-position: inside; }

/* `.receiving-product-fields` exige 48rem — largura pensada para quando a seção
   ocupava a ficha inteira. Dentro de uma coluna da faixa, esse mínimo empurrava
   o conteúdo para fora do cartão. Aqui ela cede e reparte o que tem. */
.receiving-ficha-strips .receiving-product-fields {
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}