/* Mobile presentation for the Pets and Creatures data browsers. The Specials
   table already has a useful compact layout and intentionally remains alone. */
@media (max-width: 639px) {
  .evo-main-shell {
    min-height: 0;
  }

  html[data-view="pets"] .evo-main-shell > .space-y-3.p-2 > .flex.gap-3.items-start,
  html[data-view="creatures"] .evo-main-shell > .space-y-3.p-2 > .flex.gap-3.items-start {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-view="pets"] .evo-main-shell > .space-y-3.p-2 > .flex.gap-3.items-start > .w-52,
  html[data-view="creatures"] .evo-main-shell > .space-y-3.p-2 > .flex.gap-3.items-start > .w-48 {
    order: -1;
    width: 100%;
    flex-shrink: 1;
  }

  html[data-view="pets"] .evo-main-shell .overflow-hidden:has(.section-header.grid),
  html[data-view="creatures"] .evo-main-shell .overflow-hidden:has(.section-header.grid) {
    max-height: none;
    overflow: visible;
  }

  html[data-view="pets"] .evo-main-shell .section-header.grid,
  html[data-view="creatures"] .evo-main-shell .section-header.grid {
    display: none;
  }

  html[data-view="pets"] .evo-main-shell .grid[class*="grid-cols-"]:not(.section-header),
  html[data-view="creatures"] .evo-main-shell .grid[class*="grid-cols-"]:not(.section-header) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }

  html[data-view="pets"] .evo-main-shell .grid[class*="grid-cols-"]:not(.section-header) > :last-child {
    grid-column: 1 / -1;
  }

  html[data-view="pets"] .evo-main-shell form,
  html[data-view="creatures"] .evo-main-shell form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  html[data-view="pets"] .evo-main-shell form > :first-child,
  html[data-view="pets"] .evo-main-shell form > :nth-child(2),
  html[data-view="pets"] .evo-main-shell form > :last-child,
  html[data-view="creatures"] .evo-main-shell form > :first-child,
  html[data-view="creatures"] .evo-main-shell form > :last-child {
    grid-column: 1 / -1;
  }

  html[data-view="pets"] .evo-main-shell select,
  html[data-view="pets"] .evo-main-shell input[type="text"],
  html[data-view="creatures"] .evo-main-shell select,
  html[data-view="creatures"] .evo-main-shell input[type="text"] {
    min-height: 38px;
  }
}