/* Narrow-screen adjustments shared by the feature styles. */

/* Turbo Drive's navigation progress bar (H5 loading states): primary
   content navigations show a thin accent bar while the next page
   loads. JavaScript-only by nature; without JS the browser's own
   spinner is the indicator, so the shell never depends on this. */
.turbo-progress-bar {
  height: 3px;
  background-color: var(--color-accent);
}

@media (max-width: 37.5rem) {
  .site-nav,
  main { width: min(100% - 1.25rem, 56rem); }
  .site-nav { flex-wrap: wrap; padding-block: var(--space-1); }
  .nav-tabs { order: 3; flex-basis: 100%; }
  section { padding: var(--space-3); margin-block: var(--space-5); }
  .list-row { align-items: stretch; flex-direction: column; }
  .list-row > div { justify-content: space-between; }
  .task-frame-content { flex-wrap: wrap; }
  .task-edit-layout { gap: var(--space-2); }
  .task-edit-topline { grid-template-columns: 1fr; gap: var(--space-2); }
  .reorder-actions { width: auto; }
  .reorder-actions form { flex: 0 0 auto; }
  .reorder-actions button { width: auto; }
}