/* Menu global, SelectMenu e grupos de segmentos — o que os arquivos portados não cobrem.
 * Os desenhos vêm byte a byte do bundle 8cd72241 em design/static/css/widgets/selectmenu.css
 * (lista e gatilho, eixos data-menu / data-select-fx / data-checkbox-format) e split.css (layouts
 * dos grupos, data-layout; a pele de cada peça é a do Botão do núcleo, button.css). Aqui ficam
 * só: o encaixe no app (o <select> real escondido, a lista flutuante), a fonte da busca no celular,
 * o movimento reduzido (refeito, ver abaixo), os itens do Menu de ações — copiados do popup de ações
 * do data-table.card e do Menu.jsx, que usam esta mesma lista — e a pilha das peças do grupo.
 * Nada de valor novo. */

/* ── SelectMenu: o <select> que vai no envio fica no DOM (o `required` precisa dele focável) ── */
.sg-selw__native{ position:absolute; left:0; bottom:0; width:1px; height:1px; margin:0; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.sg-selw--block{ display:block; width:100%; }
/* fora do estilo Bolhas as 7 bolhas existem mas não ocupam lugar no flex do gatilho */
.sg-sel > .sg-bub{ position:absolute; pointer-events:none; }
.sg-sel [hidden]{ display:none; }
/* prévia da tela de design: a lista aberta no fluxo, logo abaixo do gatilho (card: top 100% + 6px) */
.sg-sel-menu.is-static{ position:static; margin-top:6px; }
/* Busca da lista no celular — PROVISÓRIO (ADR-009): o campo do card fica em --text-sm (13 px, selectmenu.css:110-112) e o
 * selectmenu.js o FOCA ao abrir; a regra do bundle que leva os campos a --text-md (ds/tokens/responsive.css:94) cobre só
 * .sg-field, .sg-textarea, .sg-cmb__input e .sg-palette__input, e o iOS dá zoom ao focar um campo abaixo de 16 px. Mesma consulta
 * e mesmo `:root` da regra do bundle: (0,2,1) vence o (0,1,1) do porte, que carrega antes; a altura de 44 px já vem de --control-h-sm. */
@media (max-width: 599px){ :root .sg-sel-search input{ font-size:var(--text-md); } }

/* ── Menu de ações (role=menu): a lista do SelectMenu com itens-botão (actpop do data-table.card) ── */
.sg-sel-menu[role="menu"]{ width:auto; min-width:212px; font-family:var(--font-display); }
:is(button, a).sg-sel-opt{ width:100%; border:0; background:transparent; font:inherit; font-size:var(--text-sm);
  font-weight:var(--weight-medium); text-align:left; text-decoration:none; outline:none; }
.sg-sel-opt__ic svg{ width:15px; height:15px; }
.sg-sel-opt__kbd{ flex:none; font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); }
.sg-sel-opt.is-danger{ color:var(--negative-text); }
.sg-sel-opt.is-danger .sg-sel-opt__ic{ color:var(--negative); }
.sg-sel-opt.is-danger.is-active{ background:var(--negative-bg); } /* Menu.jsx: perigo em foco */
.sg-menu__hd{ font-family:var(--font-mono); font-size:10px; color:var(--text-subtle); padding:5px 10px 7px; letter-spacing:.04em; }
.sg-menu__sep{ height:1px; background:var(--border-subtle, var(--border)); margin:4px 6px; }

/* ── Split / grupos: o caret do menu e a pilha das peças emendadas ──
 * Foco, desabilitado e a pele de cada peça são do `.sg-btn` (button.css). Na emenda de -1px a
 * borda do vizinho cobriria o anel de foco e a borda do hover: a peça ativa sobe uma camada, e o
 * foco por teclado uma a mais (senão o pressionado, que vem depois, cortava o anel do vizinho). */
.sg-split{ position:relative; display:inline-flex; vertical-align:top; }
.sg-split [data-menu-trigger] svg:last-child{ transition:transform var(--duration-base) var(--ease-emphasized); }
.sg-split [data-menu-trigger]:not([data-menu-icon-only]).is-open svg:last-child{ transform:rotate(180deg); } /* SplitButton.jsx: o caret gira; o gatilho só-ícone (único svg) não */
.sg-group__seg:is(:hover, :focus-visible, [aria-pressed="true"]){ z-index:1; }
.sg-group__seg:focus-visible{ z-index:2; }
/* Fora do card (ele só desenha o divisor do split em primário e perigo, branco a 28%): no secundário
 * o branco some sobre a superfície e ainda cobre a borda do vizinho; ali o divisor é a borda forte. */
.sg-group:is([data-layout="split"], [data-layout="pill"], [data-layout="compact"]) > .sg-btn--secondary.sg-group__seg:last-child{ border-left-color:var(--border-strong); }
/* O card sempre tem 2 ou mais segmentos: com um só (uma permissão escondeu o resto) o `:last-child`
 * apagava a ponta esquerda; e o Duotom é de 2, com 3 o do meio ficava com o raio do botão. */
.sg-group:not([data-layout="toolbar"]) > .sg-group__seg.sg-group__seg:only-child{ border-radius:var(--radius-md); }
.sg-group[data-layout="duotone"] > .sg-group__seg:not(:first-child, :last-child){ border-radius:0; }

/* ── Movimento reduzido ──
 * O do JSX junta numa lista valores diferentes do mesmo eixo (data-behavior), que o porte não
 * pode reverter byte a byte; aqui ele volta escopado nos eixos do app, com o mesmo efeito, e cobre
 * também os pseudo-elementos da caixa do múltiplo (o `.sg-sel-menu *` do JSX não os alcança, e
 * órbita, onda e bolhas seguiam animando). */
@media (prefers-reduced-motion: reduce){
  .sg-sel, .sg-sel::before, .sg-sel::after, .sg-sel *, .sg-sel-menu, .sg-sel-menu *,
  .sg-sel-menu *::before, .sg-sel-menu *::after, .sg-bub{ animation:none !important; }
  .sg-sel-menu, .sg-sel-menu .sg-sel-opt{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  @scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) {
    .sg-sel-menu .sg-sel-opt.is-selected .sg-sel-opt__box::before{ transform:scale(1.9) !important; border-radius:0 !important; } }
  @scope ([data-select-fx="splash"]) to ([data-select-fx]) { .sg-sel.sg-sel{ border-radius:var(--radius-md); } }
  @scope ([data-select-fx="jelly"]) to ([data-select-fx]) { .sg-sel.sg-sel{ border-radius:var(--radius-md); } }
  @scope ([data-select-fx="gel"]) to ([data-select-fx]) { .sg-sel.sg-sel{ border-radius:var(--radius-md); } }
  @scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel{ border-radius:var(--radius-full); } .sg-sel.sg-sel::before{ display:none; } }
  @scope ([data-select-fx="bubbles"]) to ([data-select-fx]) { .sg-sel.sg-sel{ border-radius:var(--radius-full); } }
  @scope ([data-select-fx="sonar"]) to ([data-select-fx]) { .sg-sel.sg-sel::before, .sg-sel.sg-sel::after{ display:none; } }
  .sg-bub{ display:none; }
}