/* fields-native-local.css — marcas das peles «Colchetes», «Régua» e «Acento», erro, desabilitado, hover e placeholder no controle NATIVO do Campo — PROVISÓRIO (ADR-009).
 *
 * POR QUÊ. No DS estático (design/static/ds/tokens/component-variants.css) `.sg-field` é um INVÓLUCRO <div>; o app põe a classe direto no
 * <input>/<select> (cabeçalho de fields-local.css). Três peles desenham a marca só em ::before/::after, que NÃO renderizam em <input>/<select>:
 * «bracket» (L128-132, cantos de 11x11 px), «ruler» (L137-139, régua de 7 px no rodapé) e «accent» (L154-156, barra de 3 px à esquerda).
 * Sem esta folha, Colchetes e Régua ficavam invisíveis em toda busca, filtro e formulário, e o Acento perdia a barra.
 * O hint do eixo promete «o erro sempre vence», mas o DS só estiliza erro em `.sg-field.is-error` (L171-172) e o app marca erro com
 * aria-invalid="true" (city_halls/forms.py, kanban/forms_admin/base.py). O desabilitado do bundle (.design-bundle/components/forms/Input.jsx
 * L21 e L51) pede `.is-disabled`, que o app nunca aplica: ele usa o atributo `disabled`.
 * O placeholder do bundle é `.sg-field input::placeholder{color:var(--text-subtle)}` (Input.jsx L33): só casa com o <input> DENTRO do invólucro,
 * e o DS estático não tem regra de placeholder. A dica caía na cor do navegador (cinza ~2,3:1 no Safari, opacity .54 no Firefox), fora de token
 * e de tema; só combobox.css L19, datepicker.css L160 e o Noturno da tabela (datatable-extras.css L60) pintavam a sua.
 *
 * COMO. A marca vira `background-image` do próprio controle (funciona em <input> e em <select>, que mantém a seta), em LONGHANDS: o shorthand
 * `background` apagaria a cor de fundo e as próprias marcas. A cor mora em `--sg-field-mark` (registrada com @property para a troca animar,
 * como o DS anima a borda do pseudo-elemento); o :focus e o erro só trocam essa propriedade. As medidas são as do DS: o `*::after` do DS é
 * border-box (tokens/base.css L6), então a régua tem 7 px NO TOTAL (linha de 1,5 px no topo + 5,5 px de marcas). Fica de fora o raio de 2 px
 * da barra do Acento (um gradiente não arredonda). O foco de borda/anel continua nas gêmeas de fields-local.css.
 *
 * CASCATA. Cabeça `[data-field="…"] .sg-field:is(input, select)` + a MESMA exclusão de tipos de fields-local.css = (0,2,1): acima da pele do
 * DS (0,2,0). O :focus das marcas vale (0,3,1). O erro vence toda pele e as gêmeas de foco (0,3,1): dobra a classe
 * (`.sg-field.sg-field`, +1 classe) para não depender da ordem das folhas. O desabilitado fica em (0,2,1): vence a caixa da pele e a
 * cola dos módulos ((0,2,0)) e não precisa de mais, porque campo desabilitado não recebe foco. O placeholder fica em (0,0,1): `:where()` zera o
 * controle e a exclusão de tipos, sobra o pseudo-elemento. Só o Noturno (L60) disputa o mesmo ::placeholder: vence na cor e recebe daqui o
 * `opacity:1`. O combobox (L19) e o datepicker (L160) pintam um <input> sem `.sg-field` e não concorrem.
 * O :hover fica em (0,2,1) como o repouso e o desabilitado: acima da pele e da cola dos módulos (0,2,0), abaixo do foco (0,3,1) e do erro (0,4,1), e
 * vem DEPOIS das marcas, então ganha delas por ordem. O `:where(:hover:not(:disabled, :focus, [aria-invalid="true"]))` não pesa. O :hover do
 * controle nativo vive AQUI (seção HOVER). A TRANSIÇÃO das três marcas repete a lista da casca do DS (`.sg-field` em widgets/input.css: borda, sombra, fundo e
 * transform pelos tokens --sg-input-t-*) e acrescenta a da cor da marca: o `transition` da marca (0,2,1) substitui o da casca (0,1,0), e sem repetir a lista borda e sombra deixariam de animar.
 * Só <input>: o bundle não estiliza o ::placeholder de `.sg-textarea` (só :hover, :focus, .is-error e :disabled). `opacity:1` segue o
 * datepicker.css L160 e neutraliza o 0,54 que o Firefox aplica, para a dica ter a mesma cor do token em todo navegador.
 *
 * Sai quando o DS estático desenhar a marca, o erro, o desabilitado, o hover e o placeholder também no controle nativo: é a extensão do pedido upstream UP-09 (caixa
 * do Campo) da nota de import da onda 1 (Vault do projeto, Specs/Claude-Design-Import-DS-Onda1-3f1398fe-2026-10-10); registrar lá.
 * Guarda: design/tests/test_fields_native_css.py (compara cada medida com o DS e prova os pesos de cascata),
 * design/tests/test_fields_native_hover_css.py (hover, contra o card e o Noturno) e design/tests/test_fields_native_placeholder_css.py (placeholder). */

@property --sg-field-mark{ syntax:"<color>"; inherits:false; initial-value:transparent; }

/* ═══ COLCHETES · bracket — cantos de 11x11 px, traço de 2 px (DS L128-132); foco → var(--primary) ═══ */
[data-field="bracket"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])){
  --sg-field-mark:var(--border-strong);
  background-image:
    linear-gradient(var(--sg-field-mark), var(--sg-field-mark)),
    linear-gradient(var(--sg-field-mark), var(--sg-field-mark)),
    linear-gradient(var(--sg-field-mark), var(--sg-field-mark)),
    linear-gradient(var(--sg-field-mark), var(--sg-field-mark));
  background-position:left top, left top, right bottom, right bottom;
  background-size:11px 2px, 2px 11px, 11px 2px, 2px 11px;
  background-repeat:no-repeat;
  transition: border-color var(--sg-input-t-160) var(--ease-standard), box-shadow var(--sg-input-t-160) var(--ease-standard), background-color var(--sg-input-t-160) var(--ease-standard), transform var(--sg-input-t-200) var(--ease-spring), --sg-field-mark var(--duration-fast) var(--ease-standard);
}
[data-field="bracket"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):focus{ --sg-field-mark:var(--primary); }

/* ═══ RÉGUA · ruler — linha de 1,5 px sobre marcas a cada 6 px, 7 px no total (DS L137-139); no foco só a linha vira var(--primary) ═══ */
[data-field="ruler"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])){
  --sg-field-mark:var(--border-strong);
  background-image:
    linear-gradient(var(--sg-field-mark), var(--sg-field-mark)),
    repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 6px);
  background-position:left 0 bottom 5.5px, left 0 bottom 0;
  background-size:100% 1.5px, 100% 5.5px;
  background-repeat:no-repeat;
  transition: border-color var(--sg-input-t-160) var(--ease-standard), box-shadow var(--sg-input-t-160) var(--ease-standard), background-color var(--sg-input-t-160) var(--ease-standard), transform var(--sg-input-t-200) var(--ease-spring), --sg-field-mark var(--duration-fast) var(--ease-standard);
}
[data-field="ruler"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):focus{ --sg-field-mark:var(--primary); }

/* ═══ ACENTO · accent — barra de 3 px x 46% à esquerda, centrada; no foco 70% e var(--primary) (DS L154-156) ═══ */
[data-field="accent"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])){
  --sg-field-mark:var(--border-strong);
  background-image:linear-gradient(var(--sg-field-mark), var(--sg-field-mark));
  background-position:left center;
  background-size:3px 46%;
  background-repeat:no-repeat;
  transition: border-color var(--sg-input-t-160) var(--ease-standard), box-shadow var(--sg-input-t-160) var(--ease-standard), background-color var(--sg-input-t-160) var(--ease-standard), transform var(--sg-input-t-200) var(--ease-spring), --sg-field-mark var(--duration-fast) var(--ease-standard), background-size var(--duration-base) var(--ease-spring);
}
[data-field="accent"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):focus{ --sg-field-mark:var(--primary); background-size:3px 70%; }

/* ═══ ERRO · aria-invalid="true" — espelha `.sg-field.is-error` e `.is-error.is-focus` do DS (L171-172) ═══
 * Peso (0,4,1) / (0,5,1) contra (0,3,1) das gêmeas de foco: o erro vence a pele, o anel normal e o `.sg-kanban-filters .sg-field:focus-visible`. */
[data-field] .sg-field.sg-field[aria-invalid="true"]:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])){ border-color:var(--negative); --sg-field-mark:var(--negative); }
[data-field] .sg-field.sg-field[aria-invalid="true"]:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):focus{ box-shadow:0 0 0 var(--ring-width) var(--ring-error); }
[data-field] .sg-textarea.sg-textarea[aria-invalid="true"]{ border-color:var(--negative); }
[data-field] .sg-textarea.sg-textarea[aria-invalid="true"]:focus{ box-shadow:0 0 0 var(--ring-width) var(--ring-error); }

/* ═══ DESABILITADO — `.sg-field.is-disabled` e `.sg-textarea:disabled` do bundle (Input.jsx L21, L51) ═══
 * `background-color` (não o shorthand `background`): as marcas de background-image continuam. */
.sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):disabled{ background-color:var(--surface-sunken); color:var(--text-disabled); cursor:not-allowed; box-shadow:none; }
textarea.sg-textarea:disabled{ background-color:var(--surface-sunken); color:var(--text-disabled); cursor:not-allowed; box-shadow:none; }

/* ═══ HOVER — PROVISÓRIO (ADR-009): `.shell:hover` do input.card.html (L77) e a variação de cada pele (L99 Realçado, L106 Sublinhado, L115 Colchetes, L124 Régua, L141 Acento, L146 Elevado) ═══
 * O DS estático não traz :hover de Campo (component-variants.css L107-172). Só <input>/<select>: o card não desenha o hover da área de texto (`.ta`) nem o do combobox.
 * Contorno, Entalhe e Pílula (L77) trocam a borda para --gray-400; o Sublinhado, só a linha de baixo; as marcas de Colchetes e Régua (--gray-500) e do Acento (--gray-400) trocam
 * o --sg-field-mark; o Elevado sobe a sombra para --shadow-md; o Realçado engrossa a banda de marca-texto (58% → 52%, 10% → 17%). O Instrumento não tem regra: no card
 * o tracejado (.d10) vence o hover. Sem transição nova: as peles já animam border-color, box-shadow e --sg-field-mark (a banda troca seca, como no card).
 * A exclusão `:disabled, :focus, [aria-invalid]` segue Input.jsx L17 (`:not(.is-disabled)`) e tira o hover de onde o foco e o erro já pintam a mesma propriedade. A banda do
 * Realçado só tira o desabilitado: foco e erro não mexem no fundo, e no card a banda de hover continua com o campo focado ou inválido.
 * NOTURNO (datatable-extras.css L62): a barra remapeia tokens do controle (--surface, --border-strong…), nunca pinta borda ou fundo por cima; as regras abaixo só escrevem
 * tons --gray-* e --primary (que o Noturno remapeia para --pnl-hi, L72), então acompanham o painel escuro: a borda sobe de --gray-500 (3,4:1 sobre --pnl-2) para --gray-400 (5,8:1).
 * Colchetes e Régua usam --gray-500, o tom de repouso do Noturno: lá o hover é nulo, nunca claro demais. O Elevado também quase some no Noturno (--shadow-md sobre o
 * painel escuro): resíduo aceito, a resolver no pedido upstream. O gatilho do SelectMenu dos filtros do Kanban (`button.sg-sel`) tem o seu hover no DS (widgets/selectmenu.css).
 * O hover do Campo de data (`<div class="dp__field sg-field">`, que não é <input> nem <select>) mora em design/static/css/widgets/datepicker-field.css (seção HOVER), com as mesmas
 * declarações por pele: o `.dp__field:hover` do card (datepicker.css:137) empata com a pele e cairia por cima dela. Guarda: design/tests/test_widgets_datepicker_hover.py. */
[data-field="outline"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ border-color:var(--gray-400); }
[data-field="highlight"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled)){ background-image:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--primary) 17%, transparent) 52%); }
[data-field="underline"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ border-bottom-color:var(--gray-400); }
[data-field="bracket"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ --sg-field-mark:var(--gray-500); }
[data-field="ruler"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ --sg-field-mark:var(--gray-500); }
[data-field="notch"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ border-color:var(--gray-400); }
[data-field="pill"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ border-color:var(--gray-400); }
[data-field="accent"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ --sg-field-mark:var(--gray-400); }
[data-field="raised"] .sg-field:is(input, select):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])):where(:hover:not(:disabled, :focus, [aria-invalid="true"])){ box-shadow:var(--shadow-md); }

/* ═══ PLACEHOLDER — `.sg-field input::placeholder` do bundle (Input.jsx L33), só no <input> (a área de texto não tem regra no bundle) ═══ */
:where(input.sg-field:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"]))::placeholder{ color:var(--text-subtle); opacity:1; }