/* sg-datepicker — o erro nas marcas das peles sem borda (Colchetes · Régua · Acento) e o hover por pele do Campo de data — PROVISÓRIO (ADR-009).
 *
 * O erro do datepicker é só `border-color` (datepicker.css L162; o do DS, component-variants.css L171, também). Colchetes e Régua
 * não têm borda no invólucro (`border:none`, component-variants.css L128 e L137) e o Acento a tem transparente (L154): sem borda,
 * trocar a cor não pinta nada, e a marca da pele (::before/::after em `--border-strong`, L129-131, L138 e L155) fica neutra. O
 * campo de data leva `sg-field` (datepicker/_field.html L3) para seguir o eixo `data-field`; no bundle ele não leva (.sg-dp__field
 * tem borda própria, _ds_bundle.js L4302-4310), então a falha nasce do gancho que o app acrescentou. Aqui a MARCA fica vermelha,
 * como no Campo nativo (fields-native-local.css L75-80, `--sg-field-mark`) e no combobox (combobox-field.css L44-50), com as
 * MESMAS declarações do combobox. O hover do Campo, pela mesma causa, está na seção HOVER, depois das regras de erro.
 *
 * CASCATA. A marca em foco é `.sg-field.is-focus::before/::after` (component-variants.css L132, L139 e L156), (0,3,1); o Alpine
 * põe `.is-focus` e `.is-error` no mesmo <div>. As regras abaixo valem (0,4,1) (atributo da pele + `.dp__field` + `.sg-field` +
 * `.is-error` + pseudo-elemento): o erro vence o foco em qualquer ordem de folhas e a marca continua vermelha com o campo focado.
 * A borda e o anel de erro no foco NÃO precisam de gêmea, ao contrário do combobox (que não leva `.is-focus`): `[data-field]
 * .sg-field.is-error` (0,3,0, depois de todo foco do DS) e `.is-error.is-focus` (0,4,0, L171-172) já vencem o
 * `.dp__field:focus-within` e o `.dp__field.open` do card (0,2,0).
 *
 * Só tokens do DS. Sai quando o DS estático desenhar o erro e o hover também nas peles do Campo de data: é 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á. Guardas: design/tests/test_widgets_datepicker_field.py (erro) e design/tests/test_widgets_datepicker_hover.py + test_widgets_datepicker_hover_cascade.py (hover). */

[data-field="bracket"] .dp__field.sg-field.is-error::before, [data-field="bracket"] .dp__field.sg-field.is-error::after{ border-color:var(--negative); }
[data-field="ruler"] .dp__field.sg-field.is-error::after{ border-top-color:var(--negative); }
[data-field="accent"] .dp__field.sg-field.is-error::before{ background:var(--negative); }

/* ═══ HOVER por pele — PROVISÓRIO (ADR-009): espelha a seção HOVER de fields-native-local.css, que espelha o `.shell:hover` de input.card.html (L77) e a variação de cada pele ═══
 * (L99 Realçado, L115 Colchetes, L124 Régua, L141 Acento, L146 Elevado, L150 Instrumento).
 * POR QUÊ. O card do Campo de data tem um hover só, `.dp__field:hover{ border-color:var(--gray-400) }` (date-picker.card.html L156; porte em datepicker.css:137), pensado
 * para a pele Contorno. Em input.card.html o hover genérico (L77) vem ANTES das peles e cada uma (L99-150), com o mesmo peso, o sobrescreve com o seu. Aqui o campo leva `sg-field`:
 * a pele do DS (`[data-field=X] .sg-field`, (0,2,0), ds/styles.css) carrega antes do datepicker.css e empata em peso com o `.dp__field:hover` (0,2,0), que vence por ordem
 * e cai por cima da pele. Sem esta seção: no Realçado a linha de base cinzifica e a banda não engrossa; no Acento e no Elevado surge um contorno de 1 px que o repouso não tem; no
 * Colchetes e na Régua o campo não reage (sem borda, `border-color` não pinta nada); no Instrumento o tracejado clareia. O `.dp__field.is-disabled:hover` (datepicker.css:164, (0,3,0))
 * pinta --border-strong e faz o mesmo contorno surgir no Acento e no Elevado desabilitados.
 * PELES SEM REGRA. Contorno, Entalhe e Pílula (borda inteira) e Sublinhado (só a linha de baixo) já coincidem com o Campo nativo: o hover do card é o --gray-400 dele e o desabilitado
 * volta a --border-strong, o repouso dessas peles.
 * O QUE CADA REGRA FAZ (as declarações do Campo nativo). Realçado: a linha de base fica na mistura da pele e a banda engrossa (58% → 52%, 10% → 17%); Acento: só a barra vai a --gray-400,
 * sem contorno; Elevado: a sombra sobe a --shadow-md, sem contorno; Colchetes e Régua: as marcas vão a --gray-500; Instrumento: nada muda (no card o tracejado do .d10 vence o hover).
 * As regras que DEVOLVEM a borda ao repouso (Realçado, Acento, Elevado, Instrumento) valem também com o campo desabilitado, para vencer o datepicker.css:164.
 * CEDE a `.is-focus` (o Alpine o põe junto com `.open`), a `.open` e a `.is-error`, como o nativo cede a :focus e ao erro; a banda do Realçado só cede ao `.is-disabled` (foco e erro não mexem
 * no fundo), e a sombra do Elevado e as marcas cedem também ao `.is-disabled`.
 * PESOS. Borda, sombra e banda: atributo da pele + `.dp__field` + `.sg-field` + `:hover` + `:not()` = (0,5,0): acima do hover do card (0,2,0), do desabilitado (0,3,0), da pele (0,2,0) e
 * do foco do DS (0,3,0), em qualquer ordem de folhas. Marcas: `:where()` zera o atributo da pele e `.sg-field` fica de fora, então `.dp__field` + `:hover` + `:not()` + pseudo-elemento =
 * (0,3,1): acima do repouso da marca (0,2,1), igual à marca de foco do DS (0,3,1), que o `:not(.is-focus)` já tira, e abaixo do erro (0,4,1) acima. Por isso o erro vence a marca sem
 * `.is-error` nestes seletores (com ele, o detector error_marks() do teste leria estas regras como regras de erro). */
[data-field="highlight"] .dp__field.sg-field:hover:not(.is-focus, .open, .is-error){ border-bottom-color:color-mix(in srgb, var(--primary) 50%, var(--border-strong)); }
[data-field="highlight"] .dp__field.sg-field:hover:not(.is-disabled){ background:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--primary) 17%, transparent) 52%); }
[data-field="accent"] .dp__field.sg-field:hover:not(.is-focus, .open, .is-error), [data-field="raised"] .dp__field.sg-field:hover:not(.is-focus, .open, .is-error){ border-color:transparent; }
[data-field="raised"] .dp__field.sg-field:hover:not(.is-focus, .open, .is-error, .is-disabled){ box-shadow:var(--shadow-md); }
[data-field="instrument"] .dp__field.sg-field:hover:not(.is-focus, .open, .is-error){ border-color:var(--border-strong); }
:where([data-field="accent"]) .dp__field:hover:not(.is-focus, .open, .is-disabled)::before{ background:var(--gray-400); }
:where([data-field="bracket"]) .dp__field:hover:not(.is-focus, .open, .is-disabled)::before, :where([data-field="bracket"]) .dp__field:hover:not(.is-focus, .open, .is-disabled)::after{ border-color:var(--gray-500); }
:where([data-field="ruler"]) .dp__field:hover:not(.is-focus, .open, .is-disabled)::after{ border-top-color:var(--gray-500); }