/* Panels: the standard way module pages show and change information (first used on the member's Settings page).
   White boxes with a deep blue title, two to a row from 992px and one under another below that.
   A panel's Save button sits on its bottom edge, so the buttons line up however much text is above them.

   <div class="panels">
     <form class="panel" method="post" action="..." novalidate>
       <h2 class="panel__title">Your details</h2>
       ...fields...
       <button class="button button--md button--soft panel__save">Save details</button>
     </form>
   </div> */

.panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10) var(--sp-6); /* rows further apart, so a Save button on the edge has room */
}

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

.panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

/* A panel without a Save button (Other) needs no extra room at the bottom. */
.panel:not(:has(.panel__save)) {
  padding-bottom: var(--sp-6);
}

.panel__title {
  font-size: var(--fs-h4);
  color: var(--c-accent-text);
}

/* Half on, half below the bottom edge, on the right. */
.panel__save {
  position: absolute;
  right: var(--sp-6);
  bottom: 0;
  translate: 0 50%;
}

/* First and last name side by side from 576px. */
.panel__pair {
  display: grid;
  gap: var(--sp-4);
}

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

/* When a list in a panel has nothing in it yet. */
.panel__empty {
  color: var(--c-text-muted);
}

/* A short line under the fields: what happens when you save. */
.panel__note {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.panel__note--info {
  color: var(--c-info-text);
}

/* "Forgot your password?": a small text button under the note. */
.panel__forgot {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-accent-text);
  border-radius: var(--radius-1);
}

.panel__forgot:hover {
  text-decoration: underline;
}

/* Delete account: a full-width red button at the bottom of the Other panel. */
.panel__delete {
  width: 100%;
}