/* The account pages: create or sign in (/play), and reset a password. */

.auth {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(92svh, 54rem);
  padding: var(--space-5) var(--space-3);

  /* A faint gold glow so the card doesn't float on flat black. */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
      50rem 28rem at 50% 0%,
      color-mix(in srgb, var(--gold-500) 9%, transparent),
      transparent 70%
    );
  }

  .card {
    width: min(46rem, 100%);
    padding: var(--space-4) clamp(var(--space-3), 5vw, var(--space-4));
    background: var(--color-surface);
    border: 0.5px solid var(--color-rule);
    border-radius: calc(var(--radius) * 1.4);
  }

  .brand {
    display: block;
    width: fit-content;
    margin: 0 auto var(--space-4);

    img {
      display: block;
      height: 30px;
      width: auto;
    }
  }

  /* The two mode radios are hidden; the labels below act as the tabs. */
  .mode {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-4);
    border-bottom: 0.5px solid var(--color-rule);
  }

  .tab {
    margin-bottom: -0.5px;
    padding: 0.6rem 0;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    /* Chrome, like the header's chips -- and at body size "Create account"
       lands a pixel or two wider than its half of the card on a small
       phone, and breaks across two lines beside a one-line "Log in". */
    font-size: var(--size-ui);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: color var(--transition);

    &:hover {
      color: var(--color-text);
    }
  }

  /* The checked mode lights up its matching tab and reveals its panel. */
  .mode.signup:checked ~ .tabs .tab.signup,
  .mode.login:checked ~ .tabs .tab.login {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  .mode.signup:focus-visible ~ .tabs .tab.signup,
  .mode.login:focus-visible ~ .tabs .tab.login {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  .panel {
    display: none;
  }

  /* Two columns on desktop: credentials beside the social options. */
  .mode.signup:checked ~ .panel.signup,
  .mode.login:checked ~ .panel.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-3), 4vw, var(--space-4));
    align-items: start;
  }

  .form {
    min-width: 0;
  }

  .field {
    margin-bottom: var(--space-2);

    label {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--color-muted);
      font-size: var(--size-small);
    }

    .row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .aux {
      font-size: var(--size-small);
    }

    input {
      width: 100%;
      padding: 0.7rem 0.85rem;
      border: 1px solid var(--color-rule);
      border-radius: var(--radius);
      background: var(--color-bg);
      color: var(--color-text);
      font: inherit;

      &::placeholder {
        color: var(--parchment-500);
      }

      &:focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
      }
    }
  }

  /* Empty until the Turnstile script mounts the widget at launch. */
  .cf-turnstile {
    margin: var(--space-3) 0 var(--space-1);

    &:empty {
      display: none;
    }
  }

  .submit {
    width: 100%;
    margin-top: var(--space-2);
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);

    &:hover {
      background: var(--color-accent-strong);
    }
  }

  .alt {
    min-width: 0;
  }

  .or {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: var(--size-small);

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 0.5px;
      background: var(--color-rule);
    }
  }

  .providers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
  }

  .provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 0.5px solid var(--color-rule);
    border-radius: var(--radius);
    background: var(--color-elevated);
    color: var(--color-text);
    font: inherit;
    font-size: var(--size-small);
    font-weight: 500;
    cursor: pointer;
    transition:
      border-color var(--transition),
      color var(--transition);

    svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    &:hover {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }
  }

  /* A provider the API cannot take from a browser yet: shown, never offered. */
  .provider:disabled {
    opacity: 0.45;
    cursor: not-allowed;

    &:hover {
      border-color: var(--color-rule);
      color: var(--color-text);
    }
  }

  .note {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: var(--size-small);
    text-wrap: balance;
  }

  /* The other half of the card: who you are, once you are someone. */
  .account {
    text-align: center;

    .title {
      margin: 0 0 var(--space-2);
      font-size: var(--size-h3);
      color: var(--color-accent);
    }

    .body {
      margin: 0;
      color: var(--color-muted);
    }

    .username {
      color: var(--color-text);
    }

    .submit {
      width: auto;
      margin-top: var(--space-4);
      padding-inline: var(--space-4);
    }
  }

  .terms {
    margin: var(--space-4) 0 0;
    color: var(--color-muted);
    font-size: var(--size-small);
    text-align: center;
    text-wrap: balance;
  }

  /* --- the password reset pages, which carry one column of their own --- */
  .card.narrow {
    width: min(29rem, 100%);
    text-align: center;
  }

  .heading {
    margin: 0 0 var(--space-2);
    font-size: var(--size-h3);
    color: var(--color-accent);
  }

  .lead {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--size-small);
    text-wrap: balance;
  }

  /* The fields read left-aligned even inside the centred card. */
  .form {
    text-align: left;
  }

  /* The rule the server will hold the password to, said before it does. */
  .rule {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
    font-size: var(--size-small);
  }

  .error {
    margin: var(--space-2) 0 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ember) 45%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ember) 10%, transparent);
    color: var(--parchment-100);
    font-size: var(--size-small);
    text-align: left;
  }

  .submit:disabled {
    opacity: 0.6;
    cursor: progress;
  }

  /* The closing states: a link sent, a password set, a link gone stale. Each
     speaks through the card's one heading rather than raising another. */
  .done,
  .expired {
    .body {
      margin: 0;
      color: var(--color-muted);
      text-wrap: balance;
    }

    /* The way onward wears the submit button it stands in for. */
    .submit {
      display: block;
      margin-top: var(--space-4);
      text-align: center;
      text-decoration: none;
    }
  }

  .aside {
    margin: var(--space-4) 0 0;
    font-size: var(--size-small);
    text-align: center;
  }

  /* Stack to a single column on narrow screens. */
  @media (max-width: 48rem) {
    .card {
      width: min(27rem, 100%);
    }

    .mode.signup:checked ~ .panel.signup,
    .mode.login:checked ~ .panel.login {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .alt {
      margin-top: var(--space-4);
    }

    .providers {
      flex-direction: row;
      /* Three buttons side by side are wider than a small phone, and a flex
         item will not shrink under its own label. The page does not scroll
         sideways, so off the edge means gone: let them wrap instead, which
         also holds however long a locale makes the words. */
      flex-wrap: wrap;
    }

    .provider {
      flex: 1 1 7rem;
      min-width: 0;
    }
  }
}