/* 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);
}

/* 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)); }
}

/* Setting up a code generator: numbered steps, the QR code and the key to type by hand. */
.steps {
  display: grid;
  gap: var(--sp-4);
  padding-left: var(--sp-6);
}

.qr {
  display: block;
  width: var(--qr-size);
  height: var(--qr-size);
  margin-top: var(--sp-2);
  image-rendering: pixelated; /* sharp squares on high-density screens, so phones scan it first time */
}

.qr[hidden] {
  display: none;
}

.secret {
  display: block;
  margin-top: var(--sp-2);
  overflow-wrap: anywhere;
  letter-spacing: 0.1em;
}

/* The backup codes: two columns, easy to copy. */
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--c-surface);
  border-radius: var(--radius-1);
}

/* Activity module: one event per row, a line between them. */
.activity {
  display: grid;
}

.activity__item {
  padding-block: var(--sp-3);
  border-bottom: var(--border-1) solid var(--c-line);
  overflow-wrap: anywhere; /* long addresses and IPv6 break instead of pushing the page sideways */
}

.activity__who,
.activity__when {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* A plain list of records (Pages, Enquiries): one per row, with small grey details under each. */
.list {
  display: grid;
}

.list__item {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-bottom: var(--border-1) solid var(--c-line);
  overflow-wrap: anywhere; /* long email addresses wrap instead of pushing the page sideways */
}

.list__meta,
.form__help {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.area__page .form--wide {
  max-width: var(--text-w);
}

/* About, Terms, Privacy on the site (views/pages/page.php). */
.text-page {
  max-width: var(--text-w);
}

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

.text-page ul {
  padding-left: var(--sp-6);
  list-style: disc;
}

.text-page__updated {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* Enquiries module: one message, kept to a readable width; long words and links wrap. */
.enquiry {
  max-width: var(--text-w);
  overflow-wrap: anywhere;
}

/* A page's heading with its buttons beside it (under it on phones, when they do not fit). */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* People and Clinics: the kinds of people (or each partner's clinics), as links above the list; the one showing is filled in. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filters__link {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-text);
  text-decoration: none;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

.filters__link:hover {
  border-color: var(--c-menu-button);
}

.filters__link[aria-current="page"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

/* People, inviting someone: "For" (a partner or clinic) only shows for a partner or clinic login. */
.form--invite:not(:has(#as option[value="partner"]:checked, #as option[value="clinic"]:checked)) .field--organisation {
  display: none;
}

/* Partner area: a login with its "Send link again" button beside it (under it on phones, when it does not fit). */
.logins__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.list__item > form {
  justify-self: start; /* a small button keeps its own width */
}

/* A request waiting for a super admin (a clinic its partner asked to remove), with its two answers. */
.request {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--text-w);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-warning-text);
  background-color: var(--c-warning-bg);
  border: var(--border-1) solid var(--c-warning-border);
  border-radius: var(--radius-2);
}

.request__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}