/* Ajustes para móvil y pantallas táctiles. Va el último: gana a las reglas base de cada componente. */
/*
 * Objetivos de toque más grandes (WCAG 2.2 pide 24 px como mínimo; aquí 34–36 px) y controles de
 * formulario a 16 px (si no, iOS amplía la página al enfocarlos).
 */
@media (max-width: 640px), (pointer: coarse) {
  .btn,
  .seg__btn,
  .chip {
    min-height: 36px;
  }

  .fn-select__input,
  input[type='number'],
  select {
    font-size: 16px;
  }

  input[type='range'] {
    min-height: 32px;
  }

  summary {
    padding-block: 6px;
  }

  .ctrl--range input[type='range'] {
    width: min(52vw, 220px);
  }
}

/* Estrecho: cada deslizador ocupa su fila y se estira (etiqueta · barra · valor), sin salirse de la pantalla. */
@media (max-width: 640px) {
  .ctrl--range {
    width: 100%;
  }

  .ctrl--range input[type='range'] {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .bench__group {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .page__summary {
    font-size: 0.96rem;
  }

  .card,
  .takeaway {
    padding: var(--space-3) var(--space-4);
  }

  .bench__controls {
    gap: var(--space-2) var(--space-3);
  }

  .readouts {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En la cabecera estrecha el selector de función se queda con su fórmula: la etiqueta larga sobra. */
  .fn-select__input {
    max-width: 11rem;
  }
}