/* sg-combobox — as 10 peles do Campo no invólucro .cbx-field — PROVISÓRIO (ADR-009).
 *
 * O combobox.css é porte verbatim do card (guarda: test_widgets_combobox.py) e o card só desenha 3 peles do campo
 * (filled · underline · pill, combobox.css L42-46); o eixo `data-field` do app tem 10. O invólucro agora leva também
 * `sg-field` (combobox.html), então a pele do DS (`[data-field="…"] .sg-field`, tokens/component-variants.css L110-168)
 * casa o <div>, onde ::before/::after renderizam (no <input> nativo não renderizam: fields-native-local.css).
 *
 * CASCATA. A pele do DS vale (0,2,0) e vem ANTES de todo widget; o `.cbx-field` do card vale (0,1,0): em REPOUSO a pele
 * vence sozinha (fundo, borda, raio, sombra, clip-path, família mono). O que sobra aqui é só o que o card empata ou vence:
 *  1. FOCO. `.cbx-field:focus-within` (combobox.css L15, (0,2,0), depois da pele) é o mesmo anel da base `.sg-field.is-focus`
 *     de Input.jsx no bundle e vence a caixa de toda pele por ordem. No bundle cada pele ainda ganha a própria regra
 *     `.sg-field.is-focus` (0,3,0); o app não aplica `.is-focus` neste invólucro, então as GÊMEAS abaixo espelham cada uma,
 *     com as MESMAS declarações, em `:focus-within` (0,3,0 — vencem o foco genérico do card). Bracket, régua e acento têm
 *     foco só em pseudo-elemento: as gêmeas ficam nos ::before/::after (e o anel da base do card aparece junto, como no bundle).
 *  2. ERRO. `.cbx.is-error .cbx-field` (combobox.css L71, (0,3,0)) empataria com as gêmeas de foco e perderia por ordem; o
 *     espelho de `[data-field] .sg-field.is-error` (component-variants.css L171) em (0,4,0) devolve a borda de erro ao foco.
 *     O anel de erro do foco (combobox.css L72, (0,4,0)) já vence as gêmeas.
 *  3. TAMANHO. `.cbx--sm .cbx-field` (combobox.css L69, (0,2,0), depois da pele) trocaria o respiro lateral da pílula e do
 *     acento; a gêmea de repouso devolve só o `padding` que a pele define (no bundle a pele vence o `.sg-field--sm`).
 *
 * SUBLINHADO fica do card: o `underline` do combobox.css (L44-45) é desenho específico do combobox e vence a pele. Só difere
 * do DS no foco (`box-shadow:none` contra `0 1.5px 0 0 var(--primary)`); por isso NÃO há gêmea dele aqui. Se o dono quiser o
 * foco do DS, basta a gêmea (0,3,0) nesta folha: nada no card muda.
 *
 * DATEPICKER não precisa de folha para repouso e foco: o campo (datepicker/_field.html) já leva sg-field e alterna `.is-focus`,
 * então a pele e o foco do DS chegam sem gêmeas (guardas: design/tests/test_widgets_combobox_field.py). Só o ERRO nas marcas
 * das peles sem borda tem folha própria: datepicker-field.css (guarda: design/tests/test_widgets_datepicker_field.py).
 *
 * Só tokens do DS. Sai quando o card do Combobox desenhar as 10 peles (pedido upstream: ampliar combobox.card.html). */

/* ════ 1. FOCO — gêmeas de `.sg-field.is-focus` (as mesmas declarações da pele) ════ */
[data-field="outline"] .cbx-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[data-field="highlight"] .cbx-field:focus-within{ border-bottom-color:var(--primary); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[data-field="notch"] .cbx-field:focus-within{ border-color:var(--primary); }
[data-field="pill"] .cbx-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
[data-field="raised"] .cbx-field:focus-within{ box-shadow:var(--shadow-md), 0 0 0 var(--ring-width) var(--ring); }
[data-field="instrument"] .cbx-field:focus-within{ border-color:var(--primary); }

/* foco só em pseudo-elemento: colchetes, régua e acento */
[data-field="bracket"] .cbx-field:focus-within::before, [data-field="bracket"] .cbx-field:focus-within::after{ border-color:var(--primary); }
[data-field="ruler"] .cbx-field:focus-within::after{ border-top-color:var(--primary); }
[data-field="accent"] .cbx-field:focus-within::before{ height:70%; background:var(--primary); }

/* ════ 2. ERRO — a borda de erro continua vencendo o foco, em toda pele ════ */
[data-field] .cbx.is-error .cbx-field{ border-color:var(--negative); }
/* colchetes e régua não têm borda e o acento a tem transparente: o erro aparece na MARCA, como no Campo nativo
   (fields-native-local.css troca --sg-field-mark por --negative); (0,4,1) vence as gêmeas de foco (0,3,1) */
[data-field="bracket"] .cbx.is-error .cbx-field::before, [data-field="bracket"] .cbx.is-error .cbx-field::after{ border-color:var(--negative); }
[data-field="ruler"] .cbx.is-error .cbx-field::after{ border-top-color:var(--negative); }
[data-field="accent"] .cbx.is-error .cbx-field::before{ background:var(--negative); }

/* ════ 3. TAMANHO — o respiro lateral que a pele define vence o `.cbx--sm` do card ════ */
[data-field="pill"] .cbx-field{ padding-left:16px; padding-right:16px; }
[data-field="accent"] .cbx-field{ padding-left:14px; }