/* ---------------------------------------------------------------------------
   Desktop responsiveness. The window can be 1024x680 at its smallest and is
   commonly 1440x970. Two real breakpoints, both of which change layout rather
   than only hiding text.
   --------------------------------------------------------------------------- */

/* Constrained desktop: the rail collapses to icons only. The button itself
   shrinks to a square -- hiding the label alone would leave a narrow rail full
   of wide buttons, which is the bug the previous stylesheet shipped. */
@media (max-width: 1280px) {
  :root {
    --nav-w: var(--nav-w-collapsed);
    --page-pad: 16px;
  }

  .nav__scroll {
    padding: var(--space-4) var(--space-2);
    align-items: center;
  }

  .nav__item {
    width: 36px;
    padding: 0;
    justify-content: center;
    align-self: center;
  }

  .nav__label,
  .nav__section-label {
    display: none;
  }

  /* Section boundaries still need to read, so the label is replaced by a rule. */
  .nav__section + .nav__section {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-soft);
  }

  .nav__flag {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .nav__foot {
    align-items: center;
    padding: var(--space-2);
  }

  .nav__user-text,
  .nav__version {
    display: none;
  }

  .nav__connection .status__label {
    display: none;
  }
}

/* Short window: the map and tables are what the height is for, so the header
   gives up its description and some padding rather than the content giving up
   rows. At 1024x680 this returns roughly 60px to the content area. */
@media (max-height: 800px) {
  .page-head {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .page-head__desc {
    display: none;
  }

  .page-title {
    font-size: var(--text-xl);
  }

  .session-strip {
    padding-bottom: var(--space-3);
  }

  .panel__head {
    min-height: 38px;
  }
}

/* Only wrap the header actions when they genuinely cannot fit. Above this the
   rail is already collapsed, so there is room to keep them on the title line. */
@media (max-width: 860px) {
  .page-head {
    flex-wrap: wrap;
  }

  .page-head__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Wide displays: give the extra width to the map, tables and grids, but stop
   prose from running to unreadable line lengths. */
@media (min-width: 1900px) {
  :root {
    --page-pad: 28px;
    --card-min: 240px;
  }

  .page-head__desc {
    max-width: 110ch;
  }
}