/* DatePicker e Combobox — adaptador responsivo PROVISÓRIO (ADR-009) da onda 1 do DS (bundle ds-onda1, 3f1398fe).
 * Carregado DEPOIS dos widgets (ds/widgets/_styles.html). Só @media canônicas e tokens do DS.
 * Os widgets usam as classes dos cards (.cal, .dp, .cbx); o tokens/responsive.css fala os nomes do runtime
 * (.sg-cal*, .sg-dp*, .sg-cmb*). O markup carrega as DUAS classes, então já vêm do DS: dias, setas e atalhos de 44 px,
 * folha inferior do calendário, lista do combobox em linha, opções e "limpar" de 44 px, fonte de 16 px.
 * Aqui fica só o que o DS não alcança. Cada bloco diz o que compensa. Sai quando o DS cobrir (lista "upstream"). */

/* ───────────── toque: celular OU ponteiro grosso ───────────── */
@media (max-width: 599px), (pointer: coarse) {
  /* Dias: o desenho "track" fixa 36 px com o mesmo peso (0,2,0) do .sg-cal__day do DS e vem depois dele.
   * Upstream: o DS devia mirar .cal__day dos cards ou o desenho não fixar altura no toque. */
  :root .cal .cal__day { min-height: var(--hit-min); }
  /* Tablet de toque: sete colunas de 40 px (os 240 px do card dão 34 px por dia). No celular o mês é fluido (abaixo). */
  :root .cal .cal__month { width: calc(var(--space-10) * 7); }
  /* Botão do calendário no campo: o ícone tem 16 px. Mesma conta do .sg-cmb__btn do DS (alvo 44 px, margem negativa
   * devolve o espaço do padding do campo). O DS não descreve a anatomia editável do DatePicker (input + botão). */
  :root .dp__btn { align-items: center; justify-content: center; width: var(--hit-min); height: var(--hit-min); margin-inline: calc(var(--space-3) * -1); }
  /* Remover do chip (combobox múltiplo): o DS não tem regra. Área de 44 px por ::after, sem alterar a altura do chip. */
  :root .cbx .chip button { position: relative; }
  :root .cbx .chip button::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--hit-min); height: var(--hit-min); transform: translate(-50%, -50%); }
  /* "Tentar de novo" do estado de erro da lista: botão de texto de 16 px de altura no card. */
  :root .cbx .none button { min-height: var(--hit-min); padding-inline: var(--space-2); }
}

/* ───────────── celular ───────────── */
@media (max-width: 599px) {
  /* Calendário inline ou dentro da folha: largura toda e mês fluido (o card fixa .cal__month em 240 px e o .cal em
   * inline-block). O DS já cuida de .sg-dp__pop .sg-cal; o inline fica por conta daqui. */
  :root .cal { display: block; width: 100%; }
  :root .cal .cal__month { width: 100%; }
  /* Folha do calendário: o popover local limita a largura (max-width) e a folha precisa rolar quando falta altura
   * (o overflow também recorta os cantos do desenho "solid" no raio da folha). */
  :root .dp__pop { max-width: none; overflow-y: auto; overscroll-behavior: contain; }
  /* Superfície da folha: o DS dá padding à folha (.sg-dp__pop) e tira a borda/raio do .sg-cal de dentro, mas só o .cal tem
   * fundo; o fundo escurecido é sombra externa e não pinta dentro da caixa. Sem isto, as faixas de padding (em cima, nos
   * lados e embaixo, sob a barra do iOS) ficam transparentes e os cantos arredondados da folha sem preenchimento.
   * Mesmo token do .cal. Upstream: o DS devia dar a superfície à própria folha. */
  :root .dp__pop { background: var(--surface); }
  /* Campo de data em largura total no formulário. Espelha .sg-formfield .sg-dp__field do DS; .form-field é o invólucro
   * provisório do app (o .sg-formfield não entra: ele põe .sg-cmbw em flex e a lista em linha cairia ao lado do campo). */
  :root .form-field .dp__field { display: flex; width: 100%; }
  /* Eixo data-elevation="flat": --shadow-xl vira none e invalida a lista inteira de box-shadow da folha do DS
   * (sombra + fundo escurecido). Refaz só o fundo. Upstream: o scrim não pode depender do token de sombra. */
  [data-elevation="flat"] .dp__pop.sg-dp__pop { box-shadow: 0 0 0 100vmax var(--overlay-scrim); }
}