/* shell-local.css — cola LOCAL sobre o shell da main e o DS (PROVISÓRIO, ADR-009). O shell (7 chromes do eixo data-nav)
 * é o da main: estrutura em templates/shell.html, desenho em shell-nav.css / shell-nav-float.css, nenhum dos dois
 * redesenhado aqui. Esta folha só acerta cascata e encaixe: a moldura de página do DS (.sg-page, ds/patterns/layout.css)
 * dentro do conteúdo do shell, o hover dos links da navegação, o giro do spinner do Botão sob o eixo Movimento (cola de
 * Botão que não cabe no layout.css: leva propriedade customizada) e a impressão do tema escuro. Só tokens do DS. */

/* ── Links da navegação: o `a:hover` do DS (tokens/base.css:42, (0,1,1): sublinhado + --link-hover) vence o
   `text-decoration: none` de UMA classe (0,1,0) do shell-nav*.css. Os chromes do protótipo (e as prévias da Configuração
   de design) são <button> e não sublinham; os do shell real são <a> e passavam a sublinhar no hover. `a:is(…)` fica
   (0,2,1) > (0,1,1); a cor de hover de cada chrome é a do shell-nav*.css, (0,2,0), e já vence o DS — só o item da
   paleta não declara cor de hover e ganha a de texto. Upstream: base.css não sublinhar `a` com classe de chrome. ── */
a:is(.nsb__a, .ntop__a, .nrail__a, .nbn__a, .npill__a, .ndock__a, .ncmd__a):hover { text-decoration: none; }
a.ncmd__a:hover { color: var(--text); }

/* ── Zona utility no trilho (rodapé) e dica do trilho — PROVISÓRIO (ADR-009) ─────────────────────────────────────────
   O bundle desenha a zona utility só na lateral (.nsb__foot, «Configurações») e na dock (último ícone); o trilho
   não tem rodapé no protótipo. Cola mínima: o recipiente da zona utility vai ao pé da coluna (margin-top:auto) com
   o respiro do .nrail__logo (6 px); sem desenho novo, as linhas são as .nrail__row do card. A lista principal rola
   por dentro (shell-nav-float.css) e o overflow cortaria a dica .tip, que sai da coluna de 66 px: ela vira fixed
   na posição que o shell-nav.js calcula no hover (mesmo left:50px / top:50% do card, em coordenadas da janela).
   Brief pendente em design/README.md: zona utility em rail/top/pill/tabs/cmd. ── */
.shell-nrail > [data-nav-zone="utility"] { margin-top: auto; padding-top: 6px; }
.shell-nrail .nrail__a .tip { position: fixed; left: var(--sg-rail-tip-x, 0px); top: var(--sg-rail-tip-y, 0px); }

/* ── Áreas seguras do iPhone (entalhe e indicador de início) ──────────────────────────────────────────────────────
   O base.html declara `viewport-fit=cover` (a página desenha até a borda física; as folhas do ds-onda1 dependem disso
   para usar --safe-*, design/static/ds/tokens/responsive.css:40-43), e o shell da main não reserva essas faixas: em
   paisagem a lateral ficava sob o entalhe, e a barra de abas e a dock sob o indicador de início. Só encaixe, sem
   desenho novo: os --safe-* valem 0 fora de aparelho com entalhe, e aí nada muda. Mesma especificidade das regras do
   shell-nav*.css, que carregam antes. ── */
.shell { padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); }
.shell-nbn { padding-bottom: calc(8px + var(--safe-bottom)); }  /* .nbn__bar: 8px 14px (shell-nav-float.css:34) */
.shell-dock-host { bottom: calc(18px + var(--safe-bottom)); }  /* bottom:18px (shell-nav.css:65) */
.shell-nsb { padding-bottom: calc(14px + var(--safe-bottom)); }  /* rodapé da coluna fixa; .nsb: 14px 12px */
.shell-nrail { padding-bottom: calc(12px + var(--safe-bottom)); }  /* .nrail: 12px 0 (shell-nav-float.css:6) */

/* ── Moldura da página dentro do conteúdo do shell (templates/shell.html, bloco `page`) ────────────────────────────
   1) O respiro é o do .shell-content da main (1,25 rem; 1 rem até 767 px; pílula e dock somam o deles): o .sg-page
      não soma o próprio --page-pad por cima. O teto de largura e o `gap` dele ficam.
   2) O título é o h1 da barra do shell, então o cabeçalho da página leva só migalhas, voltar, subtítulo e ações:
      sem nenhum deles ele sai do fluxo (senão sobraria uma linha vazia + o `gap` do .sg-page).
   3) shell.html sempre emite <div class="sg-page__actions">; sem ações ele fica vazio e, no celular
      (`:root .sg-page__actions { width: 100% }`), viraria uma linha inteira dentro do cabeçalho. `:has(*)` (e não
      `:empty`) também cobre o bloco do filho que renderiza só espaço em branco.
   4) A raiz .sg-overlay do Dialog/Drawer (design/templates/ds/widgets/{dialog,drawer}.html) é um bloco de altura zero
      cujo único filho é o scrim `fixed`; `display: contents` tira a raiz do fluxo sem mexer em x-data nem em eventos.
      O overlay INLINE (galeria, data-sg-inline) fica como está: o scrim dele ocupa o fluxo de propósito. */
.shell-content > .sg-page { padding: 0 0 var(--safe-bottom); }  /* fim da página fora do indicador de início */
.sg-page__head:not(:has(.sg-page__titles > *, .sg-page__actions > *)) { display: none; }
.sg-page__head > .sg-page__actions:not(:has(*)) { display: none; }
.sg-page > .sg-overlay:not([data-sg-inline]) { display: contents; }

/* ── Spinner do Botão em carregamento × eixo Movimento — PROVISÓRIO (ADR-009) ─────────────────────────────
   O giro (widgets/button.css:60, do card: `animation: sg-spin var(--duration-slower) linear infinite`) é um loop
   infinito. Com Movimento «Reduzido» (data-motion="reduced", ds/tokens/motion.css:52) o --duration-slower vale
   0,01 ms e o ícone passa de mil voltas por quadro: pisca em ângulos aleatórios, justo para quem pediu menos
   movimento. O card só cobre o prefers-reduced-motion do sistema (button.css:62, 1,2 s); o eixo ganha o mesmo
   piso, como o próprio motion.css promete («loaders keep their own minimum», linha 51). Só em `no-preference`:
   com o sistema pedindo menos movimento valem o card e o `animation: none` do ds, e esta cola não toca neles.
   Variável por escopo, e não `[data-motion="reduced"] .sg-btn__spin svg`: o escopo MAIS PRÓXIMO manda, como nos
   --duration-* (uma prévia Padrão dentro de um <html> Reduzido gira em 400 ms; uma Reduzida dentro de um <html>
   Padrão, em 1,2 s). As duas regras de escopo têm a mesma especificidade (0,1,0): a Reduzida vem depois e vence
   no mesmo elemento. A variável não pode morar no layout.css (design/tests/test_theme_scope_css.py proíbe ali
   propriedade customizada nova). Guarda: design/tests/test_button_spinner_motion.py. Sai quando o card do Botão
   tratar o eixo (button.css e motion.css são upstream: não editar). ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-motion] { --sg-spin-t: var(--duration-slower); }
  [data-motion="reduced"] { --sg-spin-t: 1.2s; }
  .sg-btn__spin svg { animation-duration: var(--sg-spin-t, var(--duration-slower)); }
}

/* ── Impressão do tema escuro: o navegador não imprime fundos por padrão e o texto do escuro é quase branco; no escuro
   a página sai como na tela (fundo incluso). O claro segue economizando tinta. O painel da tabela Noturno
   (datatable-designs.css, --pnl escuro e --pnl-tx quase branco) é escuro em qualquer tema. ── */
@media print {
  [data-theme="dark"],
  [data-table="night"] .dt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}