/* Dialog e Drawer — adaptador responsivo PROVISÓRIO (ADR-009) da onda 1 do DS (bundle ds-onda1, projeto 3f1398fe).
 * Carregado DEPOIS dos widgets (ds/widgets/_styles.html). Só @media canônicas e tokens do DS.
 * Os widgets usam as classes dos cards (.md, .dw); o tokens/responsive.css fala os nomes do runtime (.sg-modal, .sg-drawer,
 * .sg-ov__*). O markup dos painéis em overlay carrega as DUAS classes, então já vêm do DS: alça da folha, rodapé em coluna,
 * `overscroll-behavior` do corpo, tela cheia do tamanho lg e o `animation: none` do movimento reduzido. Painéis INLINE
 * (galeria, matriz de eixos) não levam sg-modal/sg-drawer: seguem como prévia no fluxo da página.
 * Aqui fica só o que o DS não alcança. O DS pesa (0,2,0) e vem ANTES dos widgets; as larguras do widget (0,3,0) e os eixos
 * locais (@scope) o vencem, por isso os seletores abaixo pesam (0,5,0)+. Cada bloco diz o que compensa. Sai quando o DS cobrir. */

/* ───────────── tablet e celular ───────────── */
@media (max-width: 1023px) {
  /* Eixo "folha": o widget zera só o respiro de baixo (0,1,0) e `:root .sg-scrim--center` (0,2,0) o devolve, deixando a
   * folha ancorada flutuando 16 px acima da borda. Upstream: o DS devia deixar o estilo decidir o próprio padding. */
  @scope ([data-dialog="sheet"]) to ([data-dialog]) { .sg-scrim.sg-scrim--center:not(.sg-scrim--inline) { padding-bottom: 0; } }
}

/* ───────────── celular ───────────── */
@media (max-width: 599px) {
  /* Dialog → folha inferior. Largura, borda e raio do card ganham do DS por ordem, e os eixos "folha" (460 px) e "compacto"
   * (380 px) fixam largura. Só zera as bordas laterais e a de baixo: a faixa de topo do tom "danger" fica. A entrada usa
   * `sg-r-sheet` do DS (só o nome; duração e curva seguem do widget). Upstream: o responsive.css mira .sg-modal, não o .md. */
  .sg-scrim.sg-scrim--center:not(.sg-scrim--inline) .md.sg-modal {
    width: 100%; max-width: none; margin: 0; border-inline-width: 0; border-bottom-width: 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; animation-name: sg-r-sheet;
  }
  /* lg = tela cheia: o DS já dá height:100dvh e o respiro do entalhe; o card ganha por ordem em max-height, borda e raio.
   * Upstream: as regras de overlay do DS pesam (0,2,0) e carregam ANTES dos widgets; vale :where() nos widgets ou @layer. */
  .sg-scrim.sg-scrim--center:not(.sg-scrim--inline) .md.sg-modal.sg-modal--lg { max-height: none; border-top-width: 0; border-radius: 0; }
  /* Saída da folha: o widget anima `sg-modal-out` (some em escala); a folha desce. Keyframes próprios porque o DS não tem
   * saída. Upstream: o DS não descreve a saída do overlay. */
  @keyframes sg-ov-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
  .sg-scrim.sg-scrim--center.is-closing:not(.sg-scrim--inline) .md.sg-modal { animation-name: sg-ov-sheet-out; }

  /* Drawer → folha inferior. O card fixa largura (320/440 px), altura 100% e borda esquerda com o mesmo peso do DS e vem
   * depois; os eixos "flutuante", "acento", "borda animada/pulsante" e as máscaras de onda decoram a BORDA DIREITA e não
   * fazem sentido numa folha (W-D3: layout vale o DS, visual — cor, sombra, vidro — fica).
   * Upstream: o responsive.css mira .sg-drawer, não o .dw: falta a tabela card→runtime (ou :is(.sg-drawer, .dw)); e as regras
   * de largura do widget (0,3,0) e dos eixos (@scope) vencem o DS por peso e por ordem. */
  .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .dw.sg-drawer {
    width: 100%; max-width: none; height: auto; max-height: var(--sheet-max-h); margin: 0; align-self: auto;
    border-left: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; -webkit-mask: none; mask: none; animation: none;
  }
  .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .w2, .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .w3 { display: none; }
  /* Alça: os eixos "borda animada/pulsante/brilho/listrado" usam o ::before do .dw para a decoração e vencem a alça do DS
   * (mesmo peso, vêm depois). Refaz a alça e apaga a decoração.
   * Upstream: `:root .sg-drawer::before` (alça) colide com o ::before de qualquer drawer decorado; a alça devia usar outro
   * mecanismo (elemento próprio, ou background-image no painel). */
  .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .dw.sg-drawer::before {
    content: ""; position: static; z-index: auto; flex: none; align-self: center; width: var(--space-10); height: var(--space-1);
    margin-top: var(--space-2); padding: 0; border-radius: var(--radius-full); background: var(--border-strong);
    box-shadow: none; -webkit-mask: none; mask: none; animation: none;
  }
  /* Animação do Drawer (eixo data-drawer-fx, 10 jeitos, todos pensados para entrar pela direita): no celular é sempre a
   * folha subindo. As linhas do "escalonado" aparecem na hora. Com movimento reduzido nada daqui vale: o widget troca por
   * um fade (dialog-drawer-motion.css), então os `transform`/`opacity` ficam no bloco "no-preference".
   * Upstream: o DS só descreve a folha por keyframes (sg-r-sheet) e o repo anima por transição (classe is-open); §9 zera a
   * transição com !important em .sg-drawer e só não derruba o fade do widget por ordem de carga (dependência frágil). */
  .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .dw.sg-drawer :is(.dw__head, .dw__row, .dw__foot) { opacity: 1; transform: none; transition: none; }
  @media (prefers-reduced-motion: no-preference) {
    .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .dw.sg-drawer {
      transform: translateY(100%); opacity: 1; filter: none; clip-path: none; transition: transform var(--duration-slow) var(--ease-emphasized);
    }
    .sg-scrim.sg-scrim--right:not(.sg-scrim--inline) .dw.sg-drawer.is-open { transform: none; }
  }

  /* Rodapé das folhas: o `.md__foot`/`.dw__foot` do card mantém `align-items:center` e 13 px de respiro (0,2,0, depois do
   * DS), então os botões não esticam e o último fica sob a barra do iOS. O DS já empilha em coluna invertida (a ação
   * principal em cima) e dá width:100% ao .sg-btn; o botão `.bt` sem .sg-btn (rodapé de página) ganha a mesma largura.
   * O grupo do "mais botões" some da árvore de layout para a pilha ter uma coluna só.
   * Upstream: o rodapé do card repõe align-items/padding DEPOIS do DS (mesma ordem de sempre: :where() ou @layer nos widgets);
   * e o DS só dá largura total ao .sg-btn, não ao `.bt` de rodapé de página. */
  .sg-scrim .sg-ov__foot { align-items: stretch; flex-wrap: nowrap; padding-bottom: max(var(--space-3), var(--safe-bottom)); }
  .sg-scrim .sg-ov__foot .md__foot-grp { display: contents; }
  .sg-scrim .sg-ov__foot .bt { width: 100%; }

  /* Prévia inline (galeria e matriz de eixos): o DS põe `place-items: end stretch` em TODO .sg-scrim--center, e a prévia
   * ficaria colada no canto inferior esquerdo.
   * Upstream: `:root .sg-scrim--center { place-items: end stretch }` devia valer só para o scrim em overlay (position: fixed),
   * não para a prévia inline do mesmo nome de classe. */
  .sg-scrim.sg-scrim--inline.sg-scrim--center { place-items: center; }

  /* Eixo data-elevation="flat": --shadow-xl vira none e invalida a lista inteira de box-shadow das folhas do DS (sombra +
   * fundo escurecido, `…, 0 0 0 100vmax var(--overlay-scrim)`); o fundo some. Refaz só o fundo. O DatePicker tem a mesma
   * correção no próprio adaptador. Upstream: o fundo escurecido não pode depender do token de sombra. */
  :root[data-elevation="flat"] .sg-sel-menu, :root[data-elevation="flat"] .sg-sel-menu.is-up, :root[data-elevation="flat"] .sg-dp__pop {
    box-shadow: 0 0 0 100vmax var(--overlay-scrim);
  }
}

/* ───────────── toque: celular OU ponteiro grosso ───────────── */
@media (max-width: 599px), (pointer: coarse) {
  /* Fechar: o card fixa 28 px (0,2,0, depois do DS, que pede 44 px em .sg-ov__close). Mesma conta do DS: alvo de 44 px
   * e margem negativa que devolve o espaço do cabeçalho. Os eixos "ícone no topo" e "lateral" definem a margem (@scope) e
   * a mantêm. Upstream: o DS devia mirar o .md__x/.dw__x dos cards. */
  .sg-scrim .md__x, .sg-scrim .dw__x {
    width: var(--hit-min); height: var(--hit-min); margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0;
  }
}