/* App-specific styles layered on top of the Nord design system. */

/* No body margin, so nord-layout's top bar and sidebar reach the viewport
   edges. */
html,
body {
  margin: 0;
  padding: 0;
  block-size: 100%;
}

nord-layout {
  min-block-size: 100vh;
}

main {
  display: block;
  max-inline-size: 72rem;
}

/* Shared pagination controls — see templates/_pagination.html. */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: var(--n-space-m);
}

/* Header actions collapse to their icons on narrow screens — see
   templates/courses/form.html. The row is four buttons wide, which wraps and
   pushes the form down the page on a phone. "Back to courses" deliberately
   keeps its label: it is the way out of the page, and a bare arrow is the one
   icon here nobody should have to guess at. 720px matches the breakpoint
   preview.html already uses. */
@media (max-width: 720px) {
  .action-label {
    display: none;
  }

  /* nord-button lays out [start slot][content] as a flex row with an 8px gap.
     Hiding the label empties the content slot but not the gap, which leaves the
     icon sitting half a gap left of centre — so take that gap back. */
  .action-icon {
    margin-inline-end: calc(var(--n-space-s) * -1);
  }
}