/* Padrão de telas (I-007, I-008 e I-009; regra 8 proposta em 02/11/2026). CSS comum, carregado em base.html depois
   dos demais, só com variáveis do tema (a cor do escritório, I-001, vem de packages/base/theme.py).

   O padrão, de forma verificável (teste estático e de HTML em apps/web/ui/test_screen_standard.py; medição no
   navegador por scripts/ui_audit.js):
   1. Blocos e quadros (.panel, .card, .settings-panel, details.fold-panel): um embaixo do outro, com 18 px
      (--block-gap) entre dois blocos irmãos; dentro da ficha (.case-sheet) o mesmo espaço vem do gap da grade.
      Largura: telas de registro em 1180 px (--sheet-width); formulários em 720 px (.form-card); na Configuração, o
      quadro com tabela vai a 1180 px.
   2. Título de bloco: o <h2> do bloco (direto, no .section-heading/.panel-header ou no <summary> do bloco recolhido),
      16 px (--block-title-size), peso 600, espaçamento de letras -.025em; nas abas da Configuração com a classe
      .settings-section-title, que tem as mesmas medidas. Sem classe própria de tamanho; o sobretítulo é .eyebrow.
   3. Subtítulo de grupo dentro de um bloco: h3.client-subheading (13 px, peso 600, alinhado à esquerda, 18 px acima e
      14 px até a tabela do grupo); ou uma tabela só, com uma linha de grupo por grupo (<tbody class="table-group"> com
      <tr class="table-group-row"><th scope="rowgroup" colspan="…">). Nunca <caption> visível: a <caption> da tabela
      é sempre class="sr-only", para o leitor de tela.
   4. Tabela: <div class="table-wrap"><table class="data-table">, cabeçalho <th scope="col"> (12 px, maiúsculas,
      cor --muted), células com 13 px × 15 px de respiro; no celular (até 760 px) cada linha vira um cartão e cada
      célula mostra o rótulo do data-label, que toda <td> deve ter.
   5. Duas tabelas seguidas no mesmo bloco: separadas por um subtítulo de grupo (item 3), com 18 px entre a tabela e
      o subtítulo seguinte; nunca duas .table-wrap coladas.
   6. Coluna de ações: <th scope="col" class="actions-col">Ações</th> e
      <td class="actions-cell" data-label="Ações"><div class="row-buttons">…</div></td>, com botões pequenos
      ("button ghost small"; "button small" ou "button secondary small" só para a ação principal da linha) e os
      formulários deles numa linha só, alinhados à direita, sem quebrar a linha da tabela; no celular, em linha, com
      quebra controlada entre os botões. Link simples "Abrir" da referência continua em <td class="row-action">.
   7. Selo de situação: <span class="status status-…"> (12 px, peso 700, pílula, sem quebra); o complemento vai em
      <small class="muted"> ao lado do selo (no celular, na mesma coluna do valor, embaixo do selo).
   8. Números e valores (R$, quantidades, saldos): class="num" na <th> e nas <td> da coluna, alinhados à direita, com
      algarismos de largura fixa; no celular, à esquerda, depois do rótulo.
   9. Textos de apoio: .muted (cor --muted); <small> e .table-context nas tabelas em 12 a 13 px; parágrafo de
      explicação do bloco logo abaixo do título.
   10. Modelos sem style=, sem cor hexadecimal e sem medida em px: tudo pelas classes e variáveis deste arquivo e dos
       CSS comuns. Sem rolagem lateral em 375 px.
   11. Ações do título do bloco (10/11/2026): todas do mesmo tipo. Links de texto, como na ficha do caso, ou botões
       pequenos (a principal "button small", as outras "button secondary small" ou "button ghost small"); nunca botão
       e link misturados no mesmo título. No celular, as ações descem para a linha de baixo.
   12. Nada solto entre os blocos (10/11/2026): link, botão ou parágrafo fica dentro de um bloco, nas ações do
       cabeçalho da página ou num aviso (.read-only-note); a explicação da página vai no cabeçalho. Um atalho para
       outra página vira um bloco com título e o botão nas ações (ex.: "Custódia dos casos deste contrato").
   13. Botão dentro do bloco (10/11/2026): a ação do bloco vai na linha do título (.section-heading); a de um grupo,
       na linha do subtítulo (<div class="subgroup-heading"><h3 class="client-subheading">…</h3><a class="button
       small">…</a></div>); o "Voltar" ou a ação final, numa linha de ações (.form-actions). Nunca <p><a
       class="button">…</a></p> numa linha própria.
   Complemento de 12/11/2026 (I-010, telas em cinco dimensões e identidade visual ajustável; regras escritas mais
   abaixo neste arquivo, com o mesmo número):
   14. Alvos de toque: em tela de toque e até 1100 px, todo link de registro, migalha, botão, caixa de marcar, campo e
       título de bloco recolhível tem pelo menos 44 px; link no meio de uma frase fica como está.
   15. Filtros que não cabem numa linha passam para a linha de baixo; nunca saem da tela.
   16. No celular, o cartão da tabela mostra o nome do registro na primeira linha, sem rótulo, e os demais campos em
       seguida; o texto de apoio do nome vai em linha própria.
   17. Nenhuma palavra quebra no meio: rótulo de botão, selo, valor e identificador curto não quebram.
   18. Rolagem lateral só dentro do quadro ou da tabela; a página nunca rola para o lado.
   19. Nenhum código interno de decisão ou nome de chave do servidor no texto da tela; quando o administrador precisa
       dele, vai em <details class="tech-details"> ("Detalhes técnicos").
   20. No formulário de 720 px, campos curtos dividem a linha a partir de 900 px; a ordem dos campos não muda.
   21. Painel de entrada de uma área: um cartão por destino, e o cartão inteiro é o link (.area-card).
   22. Cor, fonte e logotipo vêm só das variáveis da identidade visual (--accent, --canvas, --highlight, --font-body,
       --font-heading e as demais do tema) e da escala de app.css (--fs-…, --radius…); nunca fixos na tela. Valor em
       dinheiro sempre com ponto de milhar (filtro brl ou floatformat:"2g").
   23. A coluna do nome do registro não fica mais estreita que uma palavra comprida.
   As cinco dimensões de conferência (largura × altura, em pixels CSS): 390 × 844 (celular), 820 × 1180 (tablet em pé),
   1470 × 800 (MacBook 13"), 1920 × 845 (monitor de 27") e 1080 × 1685 (monitor de 24" em pé). Em todas: sem rolagem
   lateral, sem palavra quebrada, texto com 12 px ou mais e contraste de 4,5:1 (3:1 em texto grande e em contornos);
   em celular e tablet, nenhum alvo abaixo de 24 px.

   Conferência obrigatória antes de entregar qualquer tela (nova ou alterada): apps/web/ui/test_screen_standard.py e os
   demais testes de tela na suíte; scripts/ui_audit_site.js no servidor de ensaio (todas as telas, 1280 e 375 px); e
   scripts/ui_measure_site.py no mesmo servidor (todas as telas, nas cinco dimensões, como administrador, colaborador
   e leitor), os três com zero desvios. */
:root { --sheet-width: 1180px; --block-gap: 18px; --block-title-size: 16px; --group-title-size: 13px; --row-button-gap: 6px; }

/* 1. Blocos: 18 px entre dois blocos irmãos (o espaço das abas da Configuração passa de 20 para 18 px). Na
   Configuração, o quadro que tem tabela usa a largura da ficha (1180 px), para a tabela caber sem rolar nem empilhar
   os botões; os quadros só de formulário continuam com 720 px. */
.settings-panel { margin-bottom: var(--block-gap); }
.settings-panel:has(.table-wrap) { max-width: var(--sheet-width); }
/* CRM-13: a prévia do workflow é um formulário com tabela de itens (título, responsável e datas em cada linha); usa a
   largura da ficha, como o quadro com tabela da Configuração, para a tabela caber sem rolar. */
.form-card.workflow-preview-form:has(.table-wrap) { max-width: var(--sheet-width); }
@media (min-width: 761px) { .workflow-preview-table td[data-label="Item e título"] .control { min-width: 200px; } }
#conteudo > :is(.panel, .card, .settings-panel) + :is(.panel, .card, .settings-panel) { margin-top: var(--block-gap); }
/* Nos recipientes de fluxo (página de registro .case-workspace e formulário em blocos), o mesmo espaço, com
   especificidade zero: as grades com gap próprio (.case-sheet > * { margin: 0 }, .contract-grid, .insight-grid...)
   não entram nesta regra, porque o gap delas já dá os 18 px. */
:where(#conteudo, .case-workspace, form) > :where(.panel, .card, .settings-panel, .filter-bar, .metric-grid)
  + :where(.panel, .card, .settings-panel, .filter-bar) { margin-top: var(--block-gap); }
/* Os grupos de números (.metric-grid) e as listas de quadros com gap próprio também deixam 18 px. */
.metric-grid:not(.case-finance-totals) { margin-bottom: var(--block-gap); }
.provider-settings-list { gap: var(--block-gap); }

/* 2. Título de bloco: o <h2> de um bloco sem classe própria segue o da ficha do caso (baixa especificidade, para não
   mexer nos títulos com regra própria da Central, das Reuniões e da Ajuda). */
:where(.panel, .card) > h2, :where(.panel, .card) > summary > h2,
:where(.panel, .card) > :where(.section-heading, .panel-header) h2 {
  margin: 0 0 4px; font-size: var(--block-title-size); font-weight: 600; letter-spacing: -.025em; line-height: 1.3;
}
:where(.panel, .card) > :where(.section-heading, .panel-header) h2 { margin: 0; }
:where(.fold-panel) > summary > h2 { margin: 0; }
/* Títulos de bloco que tinham tamanho próprio (encerramento do caso, provedores dos Serviços de IA) passam ao padrão. */
.closing-checks h2, .provider-description h2 { font-size: var(--block-title-size); font-weight: 600; letter-spacing: -.025em; }

/* U-005: telas de Documentos da rc.14 no padrão, sem mexer no documents.css da referência. Títulos de bloco em 16 px/600;
   aviso de mudança com a cor de alerta do tema (a referência usava cores fixas); a ficha do documento numa coluna, de
   cima para baixo (I-009, regra 1), com 18 px entre os blocos; anexo não verificado pelo antivírus sem seleção. */
.source-selection h2, .source-selection .source-selection-heading h2, .context-save-panel h2 {
  font-size: var(--block-title-size); font-weight: 600; letter-spacing: -.025em;
}
.stale-notice {
  background: color-mix(in srgb, var(--warning) 8%, var(--paper)); border-color: color-mix(in srgb, var(--warning) 35%, var(--line));
  color: var(--ink);
}
.document-detail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--block-gap); margin-block: var(--block-gap); }
.document-detail-grid + .panel, .document-preview, .generation-history, .version-history { margin-top: var(--block-gap); }
#conteudo > :is(.panel, .stale-notice, p) + .panel { margin-top: var(--block-gap); }
.source-unavailable p { margin: 0; }
.source-unavailable .read-only-note { margin-top: 8px; }

/* 3 e 5. Subtítulo de grupo e tabelas seguidas. O subtítulo tem 13 px e peso 600 em toda tela (no faturamento do
   contrato era 15 px), 18 px acima quando vem depois de outra parte do bloco (antes, 22 px) e 14 px até a tabela. */
.billing-block .client-subheading { margin: var(--block-gap) 0 14px; font-size: var(--group-title-size); }
.case-sheet .fold-body .client-subheading, .case-parties .party-requests .client-subheading { margin-top: var(--block-gap); }
.table-wrap + :is(.table-wrap, .client-subheading, h3), .table-wrap + .muted + .client-subheading { margin-top: var(--block-gap); }
.client-subheading + .table-wrap { margin-top: 0; }
/* 13. Subtítulo de grupo com a ação do grupo na mesma linha (regra 13): o botão fica à direita do subtítulo, nunca numa
   linha própria; o espaço até a tabela é o do subtítulo. */
.subgroup-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--block-gap) 0 14px; }
.subgroup-heading > .client-subheading { margin: 0; }
.subgroup-heading + .table-wrap { margin-top: 0; }
.data-table .table-group-row > th {
  padding: 10px 15px 8px; background: var(--surface-muted); color: var(--ink-soft); font-size: var(--group-title-size);
  font-weight: 600; letter-spacing: 0; text-transform: none; text-align: left;
}
.data-table .table-group + .table-group .table-group-row > th { border-top: 1px solid var(--line); }
.data-table .table-group-row:hover { background: transparent; }

/* 4. A tabela da lista de tarefas (.task-table, da referência) tinha respiro próprio (11×14 no cabeçalho e 18×14 nas
   células, 20 px nas pontas); com tarefas na lista, a medição do padrão acusava (CRM-13, 11/11/2026). Passa aos 13×15 px. */
.data-table.task-table :is(thead th, tbody td),
.data-table.task-table :is(th:first-child, th:last-child) { padding: 13px 15px; }

/* 6. Coluna de ações. */
.data-table :is(th.actions-col, td.actions-cell) { width: 1%; white-space: nowrap; text-align: right; }
.row-buttons { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: var(--row-button-gap); }
.row-buttons > form { display: inline-flex; margin: 0; }
.row-buttons .button { white-space: nowrap; }

/* 4. Endereços e códigos longos dentro da tabela quebram em vez de empurrar a tabela para fora do quadro. */
.data-table td code { overflow-wrap: anywhere; }
/* 4. O selo de situação na tabela quebra em duas linhas só quando falta espaço (tabela numa metade da ficha, I-006),
   em vez de empurrar a tabela para fora do quadro; o nome do registro continua com as palavras inteiras (onda B, 11/11/2026). */
.data-table td > .status { white-space: normal; }

/* 8. Números e valores. */
.data-table :is(th.num, td.num) { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.num { white-space: nowrap; }
/* Códigos curtos (CNAE, código de serviço) numa linha só, sem alinhar à direita como valor. */
.data-table td.code-cell { white-space: nowrap; }
.data-table td.num .table-context, .data-table td.num small { white-space: normal; }

/* Palavra longa sem espaço (nome de trava, código, endereço) quebra em vez de empurrar a página para o lado. */
.content { overflow-wrap: break-word; }
.content :is(p, li, dd, .read-only-note, .message) { overflow-wrap: anywhere; }

/* Botões do cabeçalho numa linha só em tela larga: o texto ao lado é que se ajusta. */
@media (min-width: 761px) {
  .workspace-header > .header-actions { flex: 0 0 auto; }
  .workspace-header > .header-actions .button { white-space: nowrap; }
}

@media (max-width: 760px) {
  /* No celular, as ações do título do bloco descem para a linha de baixo em vez de vazar pela direita. */
  :is(.panel, .card, .settings-panel) .section-heading, .subgroup-heading { flex-wrap: wrap; }
  :is(.panel, .card, .settings-panel) .section-heading > .header-actions { flex-wrap: wrap; }
  .data-table .table-group-row { margin: var(--block-gap) 0 8px; padding: 0; border: 0; background: transparent; }
  .data-table .table-group:first-of-type .table-group-row { margin-top: 0; }
  .data-table .table-group-row > th { display: block; padding: 0; background: transparent; border: 0; }
  .data-table .table-group + .table-group .table-group-row > th { border-top: 0; }
  .data-table :is(th.actions-col, td.actions-cell) { width: auto; white-space: normal; text-align: left; }
  .row-buttons { flex-wrap: wrap; justify-content: flex-start; }
  .data-table :is(th.num, td.num) { text-align: left; }
  .data-table td.num { white-space: normal; }
  .data-table td > .status { justify-self: start; }
  .data-table td > .status + small { grid-column: 2; }
  /* Texto de apoio depois do conteúdo da célula fica embaixo dele, na coluna do valor, nunca na do rótulo. */
  .data-table td > .table-context { grid-column: 2; margin-top: 0; }
}

/* Ajustes de 12/11/2026 (D-023, itens 1 e 3): a marca "Etapa de …" nas listas, com o link em linha (a lista de
   registros transforma o link em grade), e as etapas do workflow carregado na Nova tarefa e no encaminhamento. */
.stage-mark a { display: inline; color: var(--accent-ink); text-decoration: underline; }
.task-item-main { display: grid; gap: 2px; min-width: 0; }
.task-item-main > small { font-size: var(--fs-sm); }
/* Com as etapas carregadas, a Nova tarefa usa a largura da ficha, como a prévia do workflow, para a tabela caber. */
.task-workspace:has(.task-stage-table) { max-width: var(--sheet-width); }
@media (min-width: 761px) {
  .task-stage-table td[data-label="Etapa"] .control { min-width: 220px; }
  .task-stage-table td[data-label="Responsável"] .control { min-width: 160px; }
}

/* 14. Alvos de toque (I-010, proposta 3; WCAG 2.2, critério 2.5.8, e WCAG 2.1, critério 2.5.5). Em tela de toque e até
   1100 px de largura, todo link de registro, migalha, caixa de marcar, título de bloco recolhível e ação de texto tem
   pelo menos 44 px de altura. Links no meio de uma frase ficam como estão (exceção do próprio critério). */
:root { --touch-target: 44px; }
small { font-size: var(--fs-xs); }
@media (pointer: coarse), (max-width: 1100px) {
  .breadcrumbs a,
  .data-table :is(td, th) > a:not(.button):not(.record-link),
  :is(.record-title, .crm-card-title, .alert-title, .text-action, .ranking-number, .side-action a):not(.record-link),
  .record-list li > a:not(.record-link),
  .auth-card > p:not(.muted) > a:not(.button):only-child, /* U-006 (14/11/2026): "Já tenho acesso — entrar" do cadastro */
  :is(.section-heading, .panel-header, .header-actions, .record-subtitle, .context-heading, .meeting-header-actions) a:not(.button) {
    display: inline-block; min-width: var(--touch-target); padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2));
  }
  /* Links de registro em cabeçalhos de processo, linhas de interação e ações de revisão (varredura como colaborador e leitor). */
  .content :is(.case-proceeding-heading, .interaction-meta, .meeting-review-actions, .meeting-area) > a:not(.button),
  .content :is(.meeting-review-actions) a:not(.button),
  .content li p > a:not(.button):not([class]):only-child {
    display: inline-block; min-width: var(--touch-target); padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2));
  }
  /* O link do registro com nome e texto de apoio empilhados (.record-link) mantém a sua grade; só ganha altura mínima. */
  .record-link { min-height: var(--touch-target); min-width: var(--touch-target); align-content: center; }
  .content :is(dd, li, h2, h3) > a:not(.button):not([class]) { display: inline-block; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
  .data-table td a:is([href^="mailto:"], [href^="tel:"]) { max-width: 100%; overflow-wrap: anywhere; }
  button:is(.alert-title, .filter-submit, .tag-remove) { min-height: var(--touch-target); min-width: var(--touch-target); }
  .button, .button.small { min-height: var(--touch-target); }
  .skip-link:focus { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  :is(.crm-tabs, .settings-tabs, .tabs, .record-tabs, .list-tabs) a { min-height: var(--touch-target); display: inline-flex; align-items: center; }
  label:has(> input[type="checkbox"], > input[type="radio"]) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-target); }
  .content summary { min-height: var(--touch-target); align-content: center; }
  .content :is(.control, select.control) { min-height: var(--touch-target); }
  :is(.message-referral, .clear-filters, .mobile-back) { display: inline-block; min-width: var(--touch-target); padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
  .content :is(strong, span) > a:not(.button):not([class]):only-child { display: inline-block; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
}

@media (pointer: coarse) {
  /* Link que é o único elemento do parágrafo, fora dos textos de apoio (.muted), onde o link vem no meio da frase. */
  .content p:not(.muted) > a:not(.button):not([class]):only-child, .queue-postponed a { display: inline-block; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
  .content :is(dd, div) > a:not(.button):not([class]):only-child { display: inline-block; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
  /* Telefone da ficha que abre a conversa na Central (achado da varredura da TCC-08, com conversa aberta pelo telefone). */
  .client-facts .client-phone > a:not(.button) { display: inline-block; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
  /* Link do caso ou do registro na linha de contexto da célula (texto de apoio): alvo próprio, separado do título. */
  /* Fica na mesma linha do texto (display: inline): o respiro só aumenta a área que responde ao toque. */
  .data-table td :is(small, .table-context, .muted) > a:not(.button):not([class]) { display: inline; padding-block: max(0px, calc((var(--touch-target) - 1lh) / 2)); }
}

/* 15. Barra de filtros (I-010, proposta 1): quando os filtros não cabem numa linha, passam para a linha de baixo em vez
   de sair da tela. As barras de seis ou mais filtros (casos e auditoria) só ficam numa linha a partir de 1401 px. */
@media (min-width: 761px) and (max-width: 1400px) {
  .filter-bar:is(.case-filter-bar, .audit-filter-bar) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .filter-bar:is(.case-filter-bar, .audit-filter-bar) .filter-search { grid-column: span 2; }
  .filter-bar:is(.case-filter-bar, .audit-filter-bar) .filter-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* 16. Cartões das tabelas no celular (I-010, proposta 4): mais curtos. A primeira célula é o nome do registro e ocupa
   a largura toda, sem rótulo; as demais seguem na mesma linha, cada uma com o seu rótulo, e descem quando não cabem. */
@media (max-width: 760px) {
  .content .data-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 10px 12px; }
  .content .data-table tbody td { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; flex: 0 1 auto; max-width: 100%; min-width: 0; padding: 2px 0; grid-template-columns: none; }
  .content .data-table tbody td::before { flex: none; font-weight: 500; }
  .content .data-table tbody td[data-label]:not([data-label=""])::before { content: attr(data-label) ":"; }
  .content .data-table tbody td:first-child:not(.row-action) { display: block; flex: 1 1 100%; padding: 0 0 4px; margin: 0; border: 0; }
  .content .data-table tbody td:first-child:not(.row-action)::before { display: none; }
  .content .data-table tbody td:first-child:not(.row-action) > :is(small, .table-context) { display: block; }
  .content .data-table tbody :is(td.row-action, td.actions-cell) { flex: 1 1 100%; padding-top: 4px; }
  .content .data-table tbody td.row-action a { margin-left: 0; }
  .content .data-table tbody tr.table-group-row, .data-table tbody tr.table-group-row > * { display: block; flex: none; }
}

/* 17. Palavras inteiras (I-010, proposta 1): rótulo de botão pequeno, nota de campos obrigatórios e selo nunca quebram
   no meio; nas listas de registros do celular, o nome ocupa a linha toda e o resto desce. */
.button.small, .row-buttons .button, .record-list .button, .form-required-note, .status, .crm-tag, .crm-value, .data-table code[title] { white-space: nowrap; }
@media (max-width: 760px) {
  .content .record-list li { flex-wrap: wrap; }
  .content .record-list li > :is(a, strong, span, div):first-child { flex: 1 1 100%; min-width: 0; }
  /* Prévia do aviso de privacidade: no celular, cada célula da tabela do aviso ocupa a linha toda. */
  .privacy-notice-preview :is(table, thead, tbody, tr, th, td) { display: block; }
  .privacy-notice-preview :is(th, td) { overflow-wrap: break-word; border-width: 0 0 1px; }
  .privacy-notice-preview tr { margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
}

/* 18. Rolagem lateral só dentro do quadro ou da tabela (I-010, proposta 5). Os textos só para leitor de tela (.sr-only)
   são posicionados de forma absoluta; sem um ancestral posicionado, os que ficam nas colunas fora da vista esticavam a
   página inteira para o lado. O contêiner que rola passa a ser a referência deles. */
.crm-board, .table-wrap, .people-ranking { position: relative; }
.crm-board { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.crm-board > .crm-column { scroll-snap-align: start; }

/* 19. Detalhes técnicos (I-010, proposta 8): código interno de decisão e nome de chave do servidor não entram no texto
   da tela; quando o administrador precisa do nome da chave, ele fica recolhido neste bloco. */
.tech-details { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.tech-details > summary { display: inline-block; cursor: pointer; color: var(--accent-ink); }
.tech-details > p { margin: 4px 0 0; }

/* 20. Campos curtos lado a lado (I-010, proposta 11). A partir de 900 px, dentro do formulário de 720 px, os campos
   curtos (documento, CEP, número, UF, bairro, cidade, datas e números) dividem a linha; os demais continuam com a
   linha inteira. A ordem dos campos não muda; só vale onde os campos são filhos diretos do formulário ou do grupo. */
@media (min-width: 900px) {
  :where(form.form-card, .form-card form, .form-card fieldset, .settings-panel form):has(> .field):not(:has(> .field-row)) {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 18px; align-items: start;
  }
  :where(form.form-card, .form-card form, .form-card fieldset, .settings-panel form):has(> .field):not(:has(> .field-row)) > * { grid-column: 1 / -1; min-width: 0; }
  :where(form.form-card, .form-card form, .form-card fieldset, .settings-panel form):has(> .field):not(:has(> .field-row))
    > .field:has(> :is([name$="cnpj"], [name$="cpf"], [name$="postal_code"], [name$="district"], [name$="city"], input[type="date"], input[type="number"], input[type="time"])) { grid-column: span 3; }
  :where(form.form-card, .form-card form, .form-card fieldset, .settings-panel form):has(> .field):not(:has(> .field-row))
    > .field:has(> :is([name$="street_number"], [name$="state"])) { grid-column: span 2; }
  :where(form.form-card, .form-card form, .form-card fieldset, .settings-panel form):has(> .field):not(:has(> .field-row))
    > .field:has(> [name$="complement"]) { grid-column: span 4; }
}
.settings-nav { max-height: calc(100vh - 32px); overflow-y: auto; }

/* 21. Painel de entrada do Financeiro (I-010, proposta 6): um cartão por área; o cartão inteiro é o link (I-009, regra 6). */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.area-card { display: grid; gap: 4px; align-content: start; min-height: 76px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.area-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.area-title { font-size: var(--fs-md); font-weight: 600; }
.area-value { font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 22. Identidade visual ajustável (I-010, proposta 9). Fonte dos títulos, cor de destaque e logotipo vêm da
   Configuração → Identidade visual; sem escolha, valem a fonte do texto, a cor principal e a inicial do escritório. */
h1, h2, h3, .eyebrow, .nav-label, .settings-section-title { font-family: var(--font-heading, inherit); }
.nav-group a[aria-current="page"], .settings-nav .settings-tabs a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--highlight, var(--accent)); }
.bottom-nav [aria-current="page"] { box-shadow: inset 0 3px 0 var(--highlight, var(--accent)); }
.brand-logo { display: block; width: 100%; max-width: 184px; height: auto; max-height: 56px; object-fit: contain; object-position: left center; }
.brand-symbol { display: block; width: 36px; height: 36px; object-fit: contain; }
.brand .brand-symbol { display: none; }
.brand .brand-symbol.brand-symbol-always { display: block; }
.auth-card .brand-logo { max-width: 280px; max-height: 96px; margin: 0 auto 10px; object-position: center; }
@media (min-width: 761px) and (max-width: 1100px) {
  .shell:not(.nav-open) .brand .brand-logo { display: none; }
  .shell:not(.nav-open) .brand .brand-symbol { display: block; }
}

/* 23. A coluna do nome do registro não fica mais estreita que uma palavra comprida (varredura da I-010): a tabela rola
   dentro do próprio quadro antes de quebrar a palavra. */
@media (min-width: 761px) { .data-table td:has(> .record-title, > .record-link) { min-width: 10em; } }