/*
 * Phone-width overrides for Administrate's own stylesheet (docs/steps/0198).
 *
 * Administrate lays its pages out as a flex row — a 10rem navigation column beside a .main-content
 * panel carrying `min-width: 800px`. On a 390px screen that forces the page nearly 1000px wide, so
 * the whole thing scrolls sideways and the navigation ends up half off the screen.
 *
 * Loaded after administrate/application.css (Administrate::Engine.add_stylesheet appends, and the
 * layout renders them in order), so these win without !important.
 */
@media (max-width: 48rem) {
  /* Stack the navigation above the content rather than beside it. */
  .app-container {
    display: block;
    padding: 0.75rem;
  }

  /*
   * Twenty section links stacked one per line is twenty lines to scroll past before reaching the
   * page you came for. As a wrapping row of inline links it's three or four lines.
   */
  .navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.6rem;
    padding: 0 0 0.75rem;
  }

  .navigation__link {
    display: inline-block;
    margin-left: 0;
    padding: 0.35rem 0;
  }

  /* The one line that matters: 800px of minimum width on a 390px screen. */
  .main-content {
    min-width: 0;
  }

  .main-content__header,
  .main-content__body {
    padding: 1rem;
  }

  /* The header is a flex row of title + search + buttons, and none of it fits on one line. */
  .main-content__header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .main-content__page-title {
    /* "Edit Camp #980190962" is one long word as far as wrapping is concerned. */
    overflow-wrap: anywhere;
    margin-right: 0;
  }

  .search {
    margin-right: 0;
    max-width: 100%;
  }

  /*
   * Administrate's index tables have a column per attribute and are wider than any phone. Scrolling
   * the panel they sit in keeps the page itself still — the same bargain the app's own wide tables
   * strike, and it needs no override of Administrate's views to do it.
   */
  .main-content__body {
    overflow-x: auto;
  }
}