/* TrailLab v284 · la «X» de cerrar deja de irse al hacer scroll
   ------------------------------------------------------------------------
   El fallo: `.modal` es a la vez el contenedor con `overflow-y:auto` y el bloque
   contenedor de `.close`, que estaba en `position:absolute`. Un absoluto dentro del
   propio contenedor de scroll se desplaza con el contenido, así que en cualquier modal
   largo —y en móvil son casi todos— el botón se va por arriba y no hay forma de cerrar
   más que con Escape o tocando fuera. En móvil eso es quedarse encerrado.

   El arreglo: `position:sticky`. Sigue EN FLUJO, así que hace falta que `.close` sea el
   primer hijo de `.modal` (lo es en los 51 modales que lo llevan; la suite lo fija) y que
   no ocupe alto: se le da un `margin-bottom` negativo que cancela exactamente su altura,
   de modo que el contenido empieza donde empezaba antes y el botón lo solapa, igual que
   hacía el absoluto. `margin-left:auto` lo alinea a la derecha.

   Las cuentas, para que nadie tenga que rehacerlas:
   · modal normal (padding 26px 24px): margen -10px arriba y -8px a la derecha devuelve el
     botón a los 16px/16px del borde de siempre. Vertical: -10 + 38 - 28 = 0.
   · modal sin padding (`padding:0!important`): margen +16px arriba y a la derecha para los
     mismos 16px/16px. Vertical: 16 + 38 - 54 = 0.

   Por eso hay dos reglas y no una. La segunda lista los cinco modales que anulan el
   padding —son los que llevan arte a sangre o cabecera propia— y la suite comprueba que
   esa lista siga cubriendo a TODOS los que redefinen `>.close` en cualquier CSS del
   proyecto: si mañana aparece un modal de arte nuevo y no se añade aquí, el test cae. */

.modal > .close {
  position: sticky;
  top: 16px;
  right: auto;
  z-index: 7;
  width: 38px;
  height: 38px;
  margin: -10px -8px -28px auto;
  flex: none;
}

/* Los modales a sangre (padding:0): mismo resultado visual, otras cuentas. */
.summit-detail-v223 > .close,
.summit-detail-v227 > .close,
.europe-detail-v234 > .close,
.ts-editor-modal > .close,
.ts-pick-modal > .close,
.ts-detail-modal > .close,
.session-modal > .close {
  margin: 16px 16px -54px auto;
}

/* En pantallas pequeñas el modal ocupa casi todo y el botón se agradece un poco más grande
   y algo más separado del borde, que es donde está el pulgar. */
@media (max-width: 480px) {
  .modal > .close {
    top: 10px;
  }
}