/* Account-wide iNaturalist journal: shared responsive layout for the runtime
 * modal.  The content is intentionally wider than the composer because the
 * sighting cards carry photo, taxon, date, location, and an action. */
#kse-inat-modal-root.kse-inat-modal .kse-inat-page[style*="max-width:840px"] {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  padding-inline: clamp(20px, 4vw, 56px) !important;
}

#kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article {
  min-width: 0;
}

#kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article > :nth-child(2) {
  min-width: 0;
}

@media (max-width: 700px), (pointer: coarse) {
  #kse-inat-modal-root.kse-inat-modal .kse-inat-page[style*="max-width:840px"] {
    width: 100% !important;
    max-width: none !important;
    padding: 16px max(14px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article {
    gap: 10px !important;
    padding: 11px !important;
    border-radius: 17px !important;
  }

  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article img,
  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article > div:first-child {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
  }

  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article strong {
    font-size: 16px !important;
    white-space: normal !important;
    line-height: 1.12 !important;
  }

  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article button {
    padding: 9px 10px !important;
    border-width: 2px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 0 #8d481e !important;
  }
}

@media (max-width: 390px) {
  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  #kse-inat-modal-root.kse-inat-modal [data-inat-manager-list] > article > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}