/* Members area: login, registration, reset, ranking and admin.
   Only what is specific to these pages. Colours, type, spacing, buttons,
   fields, tables, badges and toast come from /css/system.css. */

.page-intro {
  padding-block: var(--s8) var(--s4);
}

.page-intro .lead {
  margin-top: var(--s3);
  color: var(--mute);
  font-weight: var(--w-text);
  font-stretch: var(--stretch-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main {
  padding-bottom: var(--s6);
}

/* Members pages use the same width as the header and footer, so the left edges line up. */
main.wrap--narrow {
  max-width: var(--max);
}

/* A short intro line keeps a readable width and some air before the next block. */
main > .lead {
  max-width: 52rem;
  margin-bottom: var(--s6);
}

/* Forms and notices are wider on tablets and desktops than on a phone. */
@media (min-width: 768px) {
  main > .panel {
    max-width: 760px;
  }

  main > .panel.panel--wide {
    max-width: none;
  }
}

/* Registration: first and last name side by side, everything else full width. */
@media (min-width: 768px) {
  body[data-page="register"] #form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s4);
  }

  body[data-page="register"] #form > * {
    grid-column: 1 / -1;
  }

  body[data-page="register"] #form > .field:nth-child(2),
  body[data-page="register"] #form > .field:nth-child(3) {
    grid-column: auto;
  }
}

/* Pages that fill in after loading keep the footer below the fold, so it does not jump. */
.live {
  min-height: 100svh;
}

.panel .muted {
  min-height: calc(var(--fs-small) * var(--lh-body));
}

.panel h2 {
  margin-bottom: var(--s3);
  font-weight: var(--w-strong);
  font-stretch: var(--stretch-mid);
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: 0;
}

.panel h3 {
  margin: var(--s6) 0 var(--s2);
}

.panel h3:first-child {
  margin-top: 0;
}

/* Forms */

.pw {
  display: flex;
  gap: var(--s2);
}

.pw input {
  flex: 1;
  min-width: 0;
}

.rules {
  /* Room for the six rules the script lists, so the form does not jump. */
  min-height: calc(6 * (var(--fs-small) * var(--lh-body) + 2 * var(--s1)));
  margin: var(--s2) 0 0;
  color: var(--mute);
  font-size: var(--fs-small);
}

.rules li {
  padding: var(--s1) 0;
}

.rules li.ok {
  color: var(--fg);
  font-weight: var(--w-strong);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.links {
  margin-top: var(--s6);
  color: var(--mute);
  font-size: var(--fs-small);
}

.links a {
  display: inline-block;
  padding: var(--s3) 0;
}

/* Admin */

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 var(--s6);
}

.rideform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.rideform .tools {
  grid-column: 1 / -1;
  margin: 0;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.copy {
  width: 100%;
  min-height: var(--field);
  margin-top: var(--s2);
  padding: var(--s3);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font: var(--fs-label) / 1.4 ui-monospace, Menlo, monospace;
}

/* Ranking table with thumbnails */

.thumb {
  width: 120px;
  max-width: 28vw;
  height: auto;
  background: var(--photo-ground);
}

td.pts,
th.pts {
  font-weight: var(--w-display);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-h3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rankrow--top td {
  border-bottom-color: var(--accent);
}

.cell {
  display: flex;
  gap: var(--s3);
  align-items: center;
}

.cell .thumb {
  flex: none;
  width: 96px;
}

/* Gender pick in the admin member list. */
.genderpick {
  min-height: var(--tap);
  padding: var(--s1) var(--s3);
  border: var(--bw) solid var(--fg);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--fs-small);
}

/* "Meine Daten": first and last name side by side from tablet width. */
@media (min-width: 768px) {
  body[data-page="profile"] #form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s4);
  }

  body[data-page="profile"] #form > * {
    grid-column: 1 / -1;
  }

  body[data-page="profile"] #form > .field:nth-child(1),
  body[data-page="profile"] #form > .field:nth-child(2) {
    grid-column: auto;
  }
}