/* fields-local.css — neutralizador da casca do Campo na área de texto e foco do controle NATIVO (.sg-field) — PROVISÓRIO (ADR-009).
 *
 * O QUE MUDOU. A caixa do Campo agora vem do DS: design/static/css/widgets/input.css (porte de components/forms/input.card.html, bundle 8cd72241).
 * Lá `.sg-field` é uma CASCA flex (position:relative; display:flex; width:100%; padding:0 12px; line-height:1; overflow:hidden; altura
 * var(--control-h); transição pelos tokens --sg-input-t-*) e `.sg-textarea` tem a caixa própria (min-height:74px; padding:9px 12px). A caixa base
 * que esta folha tinha em `:where()` (0,0,0) perdia da casca em toda propriedade (a casca vale (0,1,0) e carrega depois) e foi apagada.
 * O app continua pondo a classe direto no controle nativo (<input class="sg-field">, <textarea class="sg-field sg-textarea">), e dois efeitos da casca
 * não servem a ele: o foco (desenhado no invólucro por `.is-focus`/`:focus-within`) e a área de texto (altura fixa, sem rolagem).
 *
 * O QUE FICA DA CASCA NO <input> / <select>. Largura 100%, `display:flex`, `overflow:hidden`, `line-height:1` e o padding de 12px são os do DS e
 * ficam: num controle sem filhos eles não cortam nada. O recuo segue a Densidade só onde uma regra de contexto o lê do token (`:where(.form-field)
 * .sg-field` em layout.css, os filtros do Kanban, a barra da tabela): fora desses contextos o <input> nativo tem 12px, como a casca do DS. Esta folha
 * NÃO declara padding, fonte, cor nem largura, de propósito: regras de módulo em `:where()` (0,1,0) como board-rail.css e layout.css perderiam.
 *
 * NEUTRALIZADOR (abaixo). `textarea:is(.sg-field, .sg-textarea)` pesa (0,1,1) e vence a casca (0,1,0) só em `display`, `height` e `overflow`: sem
 * ele `rows` seria ignorado (altura de uma linha) e a barra de rolagem sumiria. Nenhuma regra de módulo declara essas três em (0,1,0).
 * Os <select class="sg-field"> que sobram vivem nas prévias da tela de design e na galeria (dev); no app a lista é o SelectMenu do DS (.sg-selw).
 *
 * Sai quando o DS estático trouxer o foco e a área de texto do Campo nativo: pedido upstream UP-09 da nota de import da onda 1
 * (Vault do projeto, Specs/Claude-Design-Import-DS-Onda1-3f1398fe-2026-10-10), ampliado com Campo.
 * Guardas: design/tests/test_fields_local_css.py (neutralizador e ligação) e test_fields_local_focus_css.py (foco): acusam deriva do DS. */

textarea:is(.sg-field, .sg-textarea){ display:block; height:auto; overflow:auto; }

/* ═══ FOCO ═══════════════════════════════════════════════════════════════════════════════════════════════
 * O contorno global do DS (`:focus-visible`, tokens/base.css: outline 2px, peso 0,1,0) cobre todo campo. Onde o anel
 * da pele aparece junto dele, o campo ficava com DOIS anéis; por isso quem desenha o anel da pele leva `outline:none`.
 * A ÁREA DE TEXTO não precisa de regra aqui: `.sg-textarea:focus` de widgets/input.css (0,2,0) já é o anel do bundle e `.sg-textarea` leva
 * `outline:none`; as 10 peles têm `[data-field="…"] .sg-textarea:focus` (0,3,0), então nunca fica sem indicador (guarda: test_fields_local_focus_css.py).
 *
 * CONTROLE NATIVO — no bundle o foco é desenhado no INVÓLUCRO por `.is-focus`; o app põe `.sg-field` no próprio controle e
 * nunca aplica a classe. São duas camadas, e as duas viram `:focus` aqui:
 *  1. BASE — `.sg-field.is-focus` de Input.jsx, LITERAL (borda + anel). No bundle ela (0,2,0) é injetada DEPOIS do DS e por
 *     isso ganha o empate com a caixa de repouso de TODA pele (0,2,0). Aqui `:is(input, select)` dá peso (0,2,1): o mesmo
 *     resultado, sem depender da ordem das folhas. É ela que dá a borda à «raised», o anel à «instrument» e o anel às três
 *     peles cujo foco próprio é só pseudo-elemento (bracket, ruler, accent: ::before/::after não renderizam em <input>).
 *  2. GÊMEAS — uma por regra `[data-field="…"] .sg-field.is-focus` do DS (tokens/component-variants.css), com as MESMAS
 *     declarações. Peso (0,3,1): vencem a base, como no bundle (0,3,0 contra 0,2,0), e o
 *     `.sg-kanban-filters .sg-field:focus-visible` (0,3,0, filters.css L12).
 * `outline:none` em todas: o indicador é o anel/borda; junto com o contorno global o campo ficava com DOIS. A base sempre
 * deixa um `box-shadow`, então nenhuma pele fica sem indicador. Mesma exclusão de tipos de <input> da caixa (checkbox,
 * radio… seguem com o contorno global).
 * `:focus`, não `:focus-visible`: o bundle marca `.is-focus` em QUALQUER foco. Em campo de texto as duas casam sempre; no
 * <select> `:focus-visible` não casa com clique de mouse (ficaria sem anel, e sem contorno global também). Com `:focus` o
 * select mostra o anel enquanto a lista está aberta; no teclado as duas casam e o `outline:none` evita o anel duplo. */
.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{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[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"])):focus{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[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"])):focus{ outline:none; border-bottom-color:var(--primary); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[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"])):focus{ outline:none; border-bottom-color:var(--primary); box-shadow:0 1.5px 0 0 var(--primary); }
[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"])):focus{ outline:none; border-color:var(--primary); }
[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"])):focus{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[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"])):focus{ outline:none; box-shadow:var(--shadow-md), 0 0 0 var(--ring-width) var(--ring); }
[data-field="instrument"] .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{ outline:none; border-color:var(--primary); }