/* Layout: the page container and a simple column grid. Mobile first. */

/* Holds content to a comfortable width, centred, with side margins on every screen. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 576px)  { .container { max-width: var(--container-sm); } }
@media (min-width: 768px)  { .container { max-width: var(--container-md); } }
@media (min-width: 992px)  { .container { max-width: var(--container-lg); } }
@media (min-width: 1200px) { .container { max-width: var(--container-xl); } }
@media (min-width: 1400px) { .container { max-width: var(--container-xxl); } }

/* The main area of every page: space above and below it, and between the blocks inside it. */
.page {
  padding-block: var(--sp-8);
}

.page > * + *,
.area__page > * + * {
  margin-top: var(--sp-4);
}

/* /admin, /staff, /user: the area's menu above the page on phones, beside it from 992px. */
.area {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* so a long word (an email address in a heading) wraps instead of widening the page */
  gap: var(--sp-8);
  padding-block: var(--sp-8);
}

.area__menu,
.area__links {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

@media (min-width: 992px) {
  .area {
    grid-template-columns: var(--area-menu-w) minmax(0, 1fr);
  }
}

/* Sign-in pages: one narrow column in the middle of the screen. */
.page--auth {
  max-width: var(--auth-w);
}

/* A form's fields and button, one under another. */
.form {
  display: grid;
  gap: var(--sp-4);
}

/* In an area, a form keeps the sign-in pages' width instead of stretching beside the menu. */
.area__page .form {
  max-width: var(--auth-w);
}

/* A group of radios or checkboxes under a heading (<fieldset class="choices"><legend class="choices__legend">). */
.choices {
  display: grid;
  gap: var(--sp-2);
}

.choices__legend {
  margin-bottom: var(--sp-2);
}

/* Users module: a member has no modules, so their tick boxes hide while "Member" is chosen. */
.form:has(input[name="role"][value="member"]:checked) .choices--staff {
  display: none;
}

/* Users module: the list of accounts, each email with its role beside it. */
.users {
  display: grid;
  gap: var(--sp-2);
}

.users__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--sp-4);
}

.users__email {
  min-width: 0;
  overflow-wrap: anywhere; /* long addresses break instead of pushing the page sideways */
}

/* A checkbox with its label beside it; the whole label is clickable. */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}

/* One column on phones; .grid--2/3/4 add columns as the screen grows. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}