/* layout.css — grid do shell + login + provisórios do P02 (código PRÓPRIO do sig2).
 *
 * Consome tokens semânticos do DS (var(--...)) sem definir nenhum: cor, fonte,
 * raio e sombra vêm de ds/styles.css (bundle 8cd72241, ADR-004). Os fallbacks
 * neutros abaixo só evitam tela ilegível caso o DS falte em dev. Exceção única, no
 * fim: os apelidos --elevation-* recalculados por escopo (mesmos valores do DS).
 * Os CHROMES de navegação (7 modos do eixo data-nav) vivem em
 * shell-nav.css / shell-nav-float.css; a moldura da página (.sg-page*) vem de
 * ds/patterns/layout.css e a cola dela está em shell-local.css. */

[x-cloak] { display: none !important; }

html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg, #f5f5f4);
    color: var(--text, #1c1917);
    font-family: var(--font-sans, system-ui, sans-serif);
}

.shell { display: flex; min-height: 100vh; }
.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shell-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0 1rem;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e7e5e4);
}
.shell-page-title { font-size: 1.125rem; margin: 0; font-family: var(--font-display, inherit); }
.shell-content { flex: 1; padding: 1.25rem; }
.shell-nav-toggle {
    display: none;
    border: 1px solid var(--border, #e7e5e4);
    background: transparent;
    color: inherit;
    border-radius: var(--radius-md, var(--sg-shell-r-4));
    padding: 0.25rem 0.6rem;
    font-size: 1.1rem;
    cursor: pointer;
}
.shell-scrim { display: none; }
.shell-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
    .shell-content { padding: 1rem; }
}

/* ── Login (página sem shell) ────────────────────────────── */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    /* safe areas: a meta viewport tem viewport-fit=cover e o login não usa o shell nem a .sg-page */
    padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
        max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}
.auth-card { width: 100%; max-width: 22rem; }
.auth-card h1 { font-size: 1.25rem; margin-bottom: 1rem; }

/* ── Provisórios até os widgets do P02 (cards = contrato) ─────
   O DS define a pele dos campos ([data-field] .sg-field); a caixa do cartão
   e do campo de formulário abaixo é decisão provisória autoral usando tokens.
   O botão já saiu daqui: a base .sg-btn é a do Buttons.card
   (design/static/css/widgets/button.css). */
.surface-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e5e4);
    border-radius: var(--radius-lg, var(--sg-shell-r-8));
    box-shadow: var(--elevation-card, none);
    padding: 1.5rem;
}
.form-field { margin-bottom: 1rem; }
/* Dentro da grade do DS (.sg-form-grid, ds/patterns/layout.css) quem espaça as linhas é o `gap`
   (--field-gap): sem isto a margem acima somaria ao gap e o espaço entre campos dobraria
   (16 px → 34 px no desktop). (0,2,0) também vence `.ch-check` (0,1,0) do city-halls.css, que
   é um `.form-field` marcado. Fora da grade (login, formulários de página sem grade) a margem fica. */
.sg-form-grid .form-field { margin-bottom: 0; }
.form-field label { display: block; margin-bottom: 0.375rem; font-weight: 500; }
.form-field .sg-field {
    width: 100%;
    height: var(--control-h, 36px);
}
/* Fonte, padding e cor entram com especificidade (0,1,0): `:where()` zera só o
   `.form-field`, a classe `.sg-field` continua contando. Fica abaixo do piso de
   16 px do DS no celular (`:root .sg-field`, (0,2,0), tokens/responsive.css) e
   acima de seletores de elemento, então o piso vence sem reordenar os links.
   Regra nova que declare `font`/`font-size` em `.sg-field` com (0,1,0) depois
   do DS passa a competir com o piso por ordem — não faça isso (há guarda em
   design/tests/test_responsive_cascade.py).
   FLD-02: `padding`, `font-family` (dentro de `font`) e `color` também ficam
   aqui, e não na regra forte de cima: a pele do Campo (`[data-field] .sg-field`,
   (0,2,0), ds/tokens/component-variants.css, carregada ANTES) perdia por ordem
   para uma regra de contexto de mesmo peso — a Pílula perdia os 16 px, o Acento
   os 14 px e o Instrumento a fonte mono. Em (0,1,0) a pele vence e, onde ela
   não fala, esta regra segue valendo (e vence a casca do DS, (0,1,0), de
   design/static/css/widgets/input.css). Forte fica só a caixa: largura e altura
   (guarda: design/tests/test_field_context_cascade.py).
   SHAPELITERALS-1: recuo e tamanho da fonte seguem o eixo Densidade, como a caixa do Input
   do bundle (.design-bundle/components/forms/Input.jsx:8 `padding:0 var(--control-pad-x)` e
   :11 `font-size:var(--control-font)`). `font-size` vem DEPOIS do atalho `font` (que o devolveria à
   herança) e `padding` lê o token, igual ao textarea (city-halls.css). O literal antigo
   (`0 .75rem`) não apertava em Compacta/Condensada e deixava o input 2 px fora do textarea.
   Cola PROVISÓRIA (ADR-009), como o bloco todo (guarda: design/tests/test_form_field_density.py). */
:where(.form-field) .sg-field { font: inherit; font-size: var(--control-font); padding: 0 var(--control-pad-x); color: inherit; }
.auth-card .sg-btn--primary { width: 100%; }
/* Botão-âncora (Button.jsx `as="a"`): o `a:hover` do ds (0,1,1) venceria o text-decoration e a
   cor do .sg-btn (0,1,0), sublinhando o rótulo. Só acerto de cascata — os valores são os do card.
   `:where(a)` mantém a especificidade de uma classe, para ajuste de página ainda poder vencer. */
:where(a).sg-btn:hover { text-decoration: none; }
:where(a).sg-btn--primary:hover { color: var(--on-primary); }
:where(a).sg-btn--secondary:hover, :where(a).sg-btn--ghost:hover { color: var(--text); }
:where(a).sg-btn--tint:hover { color: var(--primary-text); }
:where(a).sg-btn--danger:hover { color: var(--negative-on); }
/* Rodapé do Dialog/Drawer: os botões `.bt` levam `.sg-btn` + a variante para os eixos de botão
   valerem (dialog-actions.css, escopo `:where(.sg-scrim)`). No foco por teclado valeriam DOIS
   indicadores: o contorno do card (`.bt:focus-visible`, outline 2px + offset 3px) e o anel do
   Botão (`.sg-btn:focus-visible`, box-shadow). Fica o do Botão, igual ao de todo botão de página
   (o anel vermelho do `--danger` inclusive): a cola (0,4,0) só apaga o contorno do card. Manter o
   contorno e zerar a sombra exigiria devolver a sombra de repouso de cada eixo (no «elevated» o
   primário achatava no foco). */
.sg-scrim .bt.sg-btn:focus-visible { outline: none; }
/* Secundário dentro de overlay («Comentar» da gaveta, «Cancelar» de «Excluir lista»): o card do Dialog não tem
   `.bt--secondary` e o `.bt` dele (`border:1px solid transparent`, 0,1,0, carregado depois) apagava a borda do
   `.sg-btn--secondary`. A cola (0,2,0) devolve a borda do Botão e perde para o hover dele (0,3,0), que a escurece.
   PROVISÓRIO (ADR-009): sai com o UP-33, quando o card do Dialog usar o Botão oficial. */
:where(.sg-scrim) .bt.sg-btn--secondary { border-color: var(--border-strong); }
/* Subtítulo do Dialog e do Drawer com texto de usuário (nome do anexo, da lista, do quadro): o card não declara quebra
   (dialog-modal.css:16, dialog-drawer.css:14) e um nome sem espaço (`Oficio_Circular_n_015.pdf`) passava sob o botão Fechar e era cortado
   pelo `overflow: hidden` do painel. `anywhere` quebra só quando o texto não cabe numa linha; cabendo, nada muda. O seletor leva o ancestral
   `.sg-scrim` (contexto, não a caixa crua de uma classe do layout.css) e não há regra do card em `overflow-wrap`, então não há disputa de cascata.
   PROVISÓRIO (ADR-009) — pedido upstream: overflow-wrap no sub do Dialog/Drawer. */
.sg-scrim .md__sub, .sg-scrim .dw__sub { overflow-wrap: anywhere; }
/* Botão desabilitado mantém a FORMA do comportamento. O ds para a animação de todo botão
   desabilitado; em Gel e Splash a forma mora só nos keyframes, e o botão voltava a ser retângulo
   no meio dos blobs (na Órbita a pílula é regra estática e já ficava). A forma é o 1º quadro de
   sgfx-goo / sgfx-flow do ds, parada. Em movimento reduzido vale o ds: Gel e Splash no raio
   padrão. Desvio do bundle, registrado nas pendências do design/README. */
@media (prefers-reduced-motion: no-preference) {
    [data-btn-fx="gel"] .sg-btn:is([disabled], [aria-disabled="true"]) { border-radius: 46% 54% 56% 44% / 54% 46% 54% 46%; }
    [data-btn-fx="splash"] .sg-btn:is([disabled], [aria-disabled="true"]) { border-radius: 58% 42% 52% 48% / 56% 60% 40% 44%; }
}
.field-error { color: var(--negative-text, #b3261e); font-size: 0.875rem; margin-top: 0.375rem; }
.field-error p { margin: 0; }

/* ── Tema por escopo (PROVISÓRIO, ADR-009) ───────────────────── */
/* O DS só troca tokens no tema escuro e não declara color-scheme: barra de rolagem, seta do select, relógio do
   campo de hora, «x» da busca e «Escolher arquivo» saíam claros sobre o campo escuro. Especificidade zero e o escuro
   depois: a página escura casa as duas e fica escura; um escopo claro dentro dela (prévias) volta ao claro. */
:where(:root, [data-theme="light"]) { color-scheme: light; }
:where([data-theme="dark"]) { color-scheme: dark; }
/* Os apelidos de elevação moram só em `:root, [data-theme="light"]` (ds/tokens/semantic.css:102-105). Custom
   property com var() resolve onde é declarada: num escopo escuro eles chegavam já resolvidos do <html> e ignoravam
   o data-elevation do escopo (Em camadas e Plana iguais nas prévias). Recalculados aqui, com os MESMOS valores;
   no <html> e no escopo claro a regra do DS (0,1,0) continua valendo. */
:where([data-theme="dark"], [data-elevation]) {
    --elevation-card: var(--shadow-sm);
    --elevation-raised: var(--shadow-md);
    --elevation-pop: var(--shadow-lg);
    --elevation-modal: var(--shadow-xl);
}