/* sg-combobox — CSS do widget (P02, ADR-003/004). Seção 1 portada 1:1 do <style> de components/forms/combobox.card.html
 * (bundle 8cd72241), sem o chrome do card (.head, .smc*, .grid, .scheme*, .demo). Mesmo movimento do P01 (CSS do card portado 1:1).
 * Ajustes ao portar (cada um registrado na spec Specs/Widgets/Combobox.md):
 *  - classes genéricas do card (.ic .opt .oic .otxt .ottl .ometa .ock .grouplbl .none .chips .chip .kbd) ganham o prefixo
 *    ".cbx " para não vazar para outros widgets; os elementos casados são os mesmos (todos vivem dentro de .cbx).
 *  - body[data-field="…"] vira [data-field="…"]: no app o eixo vive no <html> (context processor) ou no palco da galeria.
 *  - a classe de variação dN fica na própria raiz .cbx (no card ela está num ancestral); ".dN .x" casa igual.
 * Seção 2 só POSICIONA (flutuar o popover, 375 px, chips que quebram linha); seção 3 traz estados do Combobox.jsx/d.ts
 * que o card não desenha, escritos só com tokens. Nada aqui define cor, raio ou fonte novos. */

/* ════ 1. COMBOBOX BASE — verbatim do card ════ */
.cbx{ width:280px; max-width:100%; }
.cbx-field{ display:flex; align-items:center; gap:8px; height:var(--control-h); padding:0 12px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-inset); }
.cbx-field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
.cbx .ic{ color:var(--text-subtle); display:flex; flex:none; }
.cbx .ic svg{ width:16px; height:16px; }
.cbx-field input{ all:unset; flex:1; min-width:0; font:inherit; font-size:var(--control-font); color:inherit; }
.cbx-field input::placeholder{ color:var(--text-subtle); }
.cbx-pop{ margin-top:6px; background:var(--surface-elevated); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:5px; max-height:220px; overflow:auto; }
.cbx .opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; color:var(--text); font-size:13px; }
.cbx .opt:hover, .cbx .opt.act{ background:var(--surface-hover); }
.cbx .opt.sel{ background:var(--primary-bg); }
.cbx .opt .oic{ color:var(--text-subtle); display:flex; flex:none; }
.cbx .opt .oic svg{ width:16px; height:16px; }
.cbx .opt .otxt{ flex:1; min-width:0; }
.cbx .opt .ottl{ display:block; }
.cbx .opt .ometa{ display:block; font-size:11px; color:var(--text-subtle); font-family:var(--font-mono); }
.cbx .opt mark{ background:transparent; color:var(--primary-text); font-weight:700; }
.cbx .opt .ock{ color:var(--primary); opacity:0; flex:none; display:flex; }
.cbx .opt.sel .ock{ opacity:1; }
.cbx .grouplbl{ font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); padding:9px 10px 4px; }
.cbx .none{ padding:12px 10px; font-size:12px; color:var(--text-subtle); }
.cbx .chips{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; flex:1; min-width:0; }
.cbx .chip{ display:inline-flex; align-items:center; gap:5px; background:var(--primary-bg); color:var(--primary-text); border-radius:var(--radius-sm); padding:2px 4px 2px 8px; font-size:12px; }
.cbx .chip button{ border:0; background:transparent; color:inherit; cursor:pointer; display:flex; padding:1px; border-radius:var(--sg-combobox-r-3); }
.cbx .chip button:hover{ background:color-mix(in srgb,var(--primary) 18%,transparent); }
.cbx .chip button svg{ width:12px; height:12px; }
.cbx .kbd{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--sg-combobox-r-4); padding:0 5px; margin-left:auto; flex:none; }

/* ════ MODELO DO CAMPO ([data-field]) — designs do Input; o card só desenha estes 3 (o eixo do app tem 10) ════ */
[data-field="filled"] .cbx-field{ background:var(--surface-sunken); border-color:transparent; border-bottom:2px solid var(--border-strong); border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:none; }
[data-field="filled"] .cbx-field:focus-within{ border-bottom-color:var(--primary); box-shadow:none; }
[data-field="underline"] .cbx-field{ background:transparent; border:none; border-bottom:1.5px solid var(--border-strong); border-radius:0; box-shadow:none; padding-left:2px; padding-right:2px; }
[data-field="underline"] .cbx-field:focus-within{ border-bottom-color:var(--primary); box-shadow:none; }
[data-field="pill"] .cbx-field{ border-radius:var(--radius-full); padding:0 16px; }

/* ════ 10 DESIGNS (do popover/resultado) — verbatim do card; o ".dN" fica na raiz .cbx ════ */
.d4 .cbx-pop{ box-shadow:var(--shadow-xl); border-radius:var(--radius-lg); }   /* agrupado: cartão flutuante */
.d7 .opt{ border:1px solid var(--border-subtle); margin-bottom:4px; border-radius:var(--radius-md); }  /* cartões */
.d7 .opt:last-child{ margin-bottom:0; }
.d8 .cbx-field, .d8 .opt{ font-family:var(--font-mono); }  /* comando */
.d8 .opt .ottl{ font-family:var(--font-mono); font-size:12.5px; }
.d10 .opt .ottl{ font-family:var(--font-display); font-size:15px; font-weight:600; }  /* editorial */
.d10 .opt{ padding:10px; }

/* ════ 2. POSICIONAMENTO (ADR-015) — o card mostra o popover em fluxo; no widget ele flutua sob o campo ════ */
.cbx{ position:relative; }
.cbx--block{ width:100%; }
.cbx-pop{ position:absolute; top:100%; left:0; right:0; z-index:60; overscroll-behavior:contain; }
.cbx-pop.is-up{ top:auto; bottom:100%; margin-top:0; margin-bottom:6px; }  /* sem espaço embaixo: abre para cima */
.cbx--inline .cbx-pop{ position:static; }  /* prévia da galeria: em fluxo, exatamente como no card */
.cbx--multi .cbx-field{ height:auto; min-height:var(--control-h); }  /* chips quebram linha em vez de vazar */
.cbx--multi .chips{ padding:4px 0; }
.cbx [hidden]{ display:none !important; }  /* .opt/.grouplbl têm display próprio, que venceria o atributo */
.cbx-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ════ 3. ESTADOS do Combobox.jsx/d.ts que o card não desenha — só tokens ════ */
.cbx--sm .cbx-field{ height:var(--control-h-sm); padding:0 var(--control-pad-x-sm); }
.cbx--lg .cbx-field{ height:var(--control-h-lg); }
.cbx.is-error .cbx-field{ border-color:var(--negative); }
.cbx.is-error .cbx-field:focus-within{ box-shadow:0 0 0 var(--ring-width) var(--ring-error); }
.cbx.is-disabled .cbx-field{ cursor:not-allowed; opacity:.55; background:var(--surface-sunken); }
.cbx .opt[aria-disabled="true"]{ color:var(--text-disabled); cursor:not-allowed; }
.cbx .none b{ color:var(--text); font-weight:var(--weight-medium); }
.cbx .none button{ border:0; background:transparent; padding:0; margin-left:6px; font:inherit; color:var(--primary-text); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cbx-clear{ flex:none; display:flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; background:transparent; color:var(--text-subtle); cursor:pointer; border-radius:var(--radius-full); }
.cbx-clear:hover{ color:var(--text); background:color-mix(in srgb,currentColor 12%,transparent); }
.cbx-clear svg{ width:14px; height:14px; }