/* ==========================================================================
   PRISMA · components/lista-suspensa.css — A LISTA QUE SE ABRE  (D-018)
   --------------------------------------------------------------------------
   Pedido da autora (19/09/2026, 22h58): "quando a gente abre a lista de série,
   componente e afins, ela é feia, não segue o design". A lista aberta era desenhada
   pelo SISTEMA OPERACIONAL. Agora é do PRISMA, por dois caminhos com a MESMA pele:

   1. <select> — continua nativo (teclado, leitor de tela, celular), com a lista
      estilizada por `appearance: base-select` (Chromium 135+). Navegador que não
      conhece o recurso mostra a lista do sistema: perde beleza, não perde função.
      Basta o select estar dentro de .composer-seletor ou ter a classe .seletor.

   2. Texto livre com sugestões — components/lista-suspensa.js transforma um
      <input list="…"> em combobox ARIA (role=combobox + listbox em popover).
      Sem script, o <datalist> nativo continua funcionando.

   A PELE: vidro frosted escuro (D-003: menu flutuante é vidro), raio 18, linha de 38px,
   selecionado com marca à direita, rótulo de grupo pequeno e calmo. Escura nos dois
   temas, de propósito: a lista flutua sobre foto, cena e folha clara — precisa ler
   sobre qualquer coisa.
   MOVIMENTO (skills animate / emil-design-eng): nasce do gatilho (origem no alto),
   de scale(.97) — nunca de zero —, 160ms, ease-out forte. Aberta por TECLADO não anima.
   ========================================================================== */

:root {
  --lista-fundo: color-mix(in srgb, var(--optico-solido) 86%, transparent);
  --lista-borda: color-mix(in srgb, var(--text-on-destaque) 16%, transparent);
  --lista-texto: var(--text-on-destaque);
  --lista-texto-2: var(--text-on-destaque-3);
  --lista-realce: color-mix(in srgb, var(--text-on-destaque) 10%, transparent);
  --lista-marcado: color-mix(in srgb, var(--brand-blue) 26%, transparent);
  --lista-sombra: 0 24px 60px -18px color-mix(in srgb, var(--surface-destaque-base) 80%, transparent),
                  0 2px 8px color-mix(in srgb, var(--surface-destaque-base) 30%, transparent);
}

/* ---------------------------------------------------------------- a pele, compartilhada */
.lista-suspensa {
  margin: 0; padding: 6px; inset: auto;
  min-width: 15rem; max-width: min(24rem, calc(100vw - 24px)); max-height: min(22rem, 60vh); overflow-y: auto;
  border: 1px solid var(--lista-borda); border-radius: 18px;
  background-color: var(--lista-fundo);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
          backdrop-filter: blur(28px) saturate(140%);
  box-shadow: var(--lista-sombra);
  color: var(--lista-texto);
  font-family: var(--fonte-ui); font-size: var(--label-size);
  scrollbar-width: thin; scrollbar-color: var(--lista-borda) transparent;
  transform-origin: top left;
}
.lista-suspensa:popover-open { position: fixed; display: block; }
.lista-suspensa-grupo {
  margin: 0; padding: 10px 12px 4px; font-size: var(--caption-size); font-weight: 500; color: var(--lista-texto-2);
}
.lista-suspensa-grupo:first-child { padding-top: 6px; }
.lista-suspensa-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3);
  min-height: 38px; padding: 0 12px; border-radius: 11px;
  font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lista-suspensa-opcao[data-ativa] { background-color: var(--lista-realce); }
.lista-suspensa-opcao[aria-selected="true"] { background-color: var(--lista-marcado); }
.lista-suspensa-opcao[aria-selected="true"]::after { content: "✓"; font-size: 12px; opacity: .9; }
.lista-suspensa-vazia { margin: 0; padding: 12px; color: var(--lista-texto-2); white-space: normal; line-height: 1.45; }
.lista-suspensa-vazia b { color: var(--lista-texto); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .lista-suspensa:popover-open:not([data-instantanea]) { animation: lista-abre 160ms var(--easing-enter) both; }
}
@keyframes lista-abre { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 1. <select> com a mesma pele */
@supports (appearance: base-select) {
  /* `html` na frente de propósito: dá precedência sobre o `appearance: none` que composer.css e field.css
     declaram para desenhar a própria seta — sem isso o navegador não entra no modo estilizável e a lista
     abre BRANCA com texto claro (defeito visto em 19/09, 23h05).
     TODAS as listas do sistema (pedido da autora: "todas as listas, tá"):
     as do composer, qualquer select.seletor e o select.entrada dos formulários. */
  html :is(.composer-seletor select, select.seletor, select.entrada), html :is(.composer-seletor select, select.seletor, select.entrada)::picker(select) { appearance: base-select; }
  html :is(.composer-seletor select, select.seletor, select.entrada) { display: inline-flex; align-items: center; }   /* no modo estilizável o select vira caixa flexível: sem isto o texto sobe */
  html :is(.composer-seletor select, select.seletor, select.entrada)::picker-icon { display: none; }                       /* a seta é a do PRISMA, não a do navegador */

  html :is(.composer-seletor select, select.seletor, select.entrada)::picker(select) {
    margin-block: 8px; padding: 6px;
    min-width: 15rem; max-height: min(22rem, 60vh); overflow-y: auto;
    border: 1px solid var(--lista-borda); border-radius: 18px;
    background-color: var(--lista-fundo);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
            backdrop-filter: blur(28px) saturate(140%);
    box-shadow: var(--lista-sombra);
    color: var(--lista-texto);
    font-family: var(--fonte-ui); font-size: var(--label-size);
    scrollbar-width: thin; scrollbar-color: var(--lista-borda) transparent;
    transform-origin: top left;
  }
  html :is(.composer-seletor select, select.seletor, select.entrada) option {
    display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3);
    min-height: 38px; padding: 0 12px; border-radius: 11px;
    background: transparent; color: var(--lista-texto); font-weight: 500;
  }
  html :is(.composer-seletor select, select.seletor, select.entrada) option:hover, html :is(.composer-seletor select, select.seletor, select.entrada) option:focus-visible { background-color: var(--lista-realce); outline: 0; }
  html :is(.composer-seletor select, select.seletor, select.entrada) option:checked { background-color: var(--lista-marcado); }
  html :is(.composer-seletor select, select.seletor, select.entrada) option::checkmark { order: 2; content: "✓"; font-size: 12px; opacity: .9; }     /* marca à DIREITA, só no escolhido */
  html :is(.composer-seletor select, select.seletor, select.entrada) option[value=""] { color: var(--lista-texto-2); font-weight: 400; }               /* "não informado": mais calma */
  html :is(.composer-seletor select, select.seletor, select.entrada) optgroup { padding: 0; background: transparent; color: var(--lista-texto-2); font-size: var(--caption-size); font-weight: 500; }
  html :is(.composer-seletor select, select.seletor, select.entrada) optgroup > legend { padding: 10px 12px 4px; }
  html :is(.composer-seletor select, select.seletor, select.entrada) optgroup option { font-size: var(--label-size); }

  @media (prefers-reduced-motion: no-preference) {
    html :is(.composer-seletor select, select.seletor, select.entrada)::picker(select) {
      opacity: 0; transform: scale(.97) translateY(-4px);
      transition: opacity 160ms var(--easing-enter), transform 160ms var(--easing-enter),
                  overlay 160ms allow-discrete, display 160ms allow-discrete;
    }
    html :is(.composer-seletor select, select.seletor, select.entrada)::picker(select):popover-open { opacity: 1; transform: none; }
    @starting-style { html :is(.composer-seletor select, select.seletor, select.entrada)::picker(select):popover-open { opacity: 0; transform: scale(.97) translateY(-4px); } }
  }
}