@layer app {
  /* ============================================================
     Misc components
     ============================================================ */

  .auth-card {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
  }

  .magic-link-code {
    letter-spacing: 0.45em;
    padding-left: calc(1rem + 0.45em);
    font-variant-numeric: tabular-nums;
  }

  .locale-switcher {
    display: inline-flex;
    gap: 0.125rem;

    .locale-link {
      --locale-link-fg: color-mix(in srgb, var(--color-dark) 55%, transparent);
      --locale-link-bg: transparent;

      padding: 0.25rem 0.5rem;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--locale-link-fg);
      background: var(--locale-link-bg);
      text-decoration: none;
      transition: all 0.2s ease;
      text-transform: uppercase;

      &:hover {
        --locale-link-fg: var(--color-primary);
        --locale-link-bg: color-mix(in srgb, var(--color-primary) 8%, transparent);
      }

      &.active {
        --locale-link-fg: var(--color-primary);
        --locale-link-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
      }
    }
  }

  .flash-message {
    border: none;
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* The hero fills whatever is left under the navbar. It used to subtract a
     hardcoded 72px navbar from the viewport, which was wrong twice over: the
     navbar is 61px, and the subtraction ignored main's own 24px of padding
     above and below. The page therefore overflowed by 37px and the landing
     page scrolled for no reason. Flexing against main (see base.css) needs no
     measurement at all, so the padding can stay without costing a scrollbar. */
  .hero-section {
    flex: 1 1 auto;
  }

  .hero-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-weight: 400;
    color: color-mix(in srgb, var(--color-dark) 65%, transparent);
  }

  .profile-avatar-wrapper {
    position: relative;
    display: inline-block;

    .avatar-upload-label {
      --avatar-upload-bg: var(--color-primary);

      position: absolute;
      bottom: 4px;
      right: 4px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--avatar-upload-bg);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.875rem;
      border: 2px solid #fff;
      transition: all 0.2s ease;

      &:hover {
        --avatar-upload-bg: var(--primary-hover);
        transform: scale(1.05);
      }
    }
  }

  /* Bootstrap sets outline: 0 on a focused accordion button and hangs the whole
     focus indicator on its box shadow, so a mouse click leaves the ring behind.
     Suppress it for pointer focus only; keyboard focus keeps Bootstrap's ring,
     the same split _buttons.scss draws for .btn:focus-visible. */
  .accordion-button:focus:not(:focus-visible) {
    box-shadow: none;
  }
}