@layer components {
  /* Sign-in pages: one card centred on the green of the menu. */
  .login {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--color-side);
  }

  .login__card {
    width: min(100%, 26rem);
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 3rem oklch(0% 0 0 / 25%);

    & h1 { font-size: 1.25rem; margin-block: 0 0.25rem; }
    & .flash { margin-bottom: 1rem; }
  }

  .login__brand {
    margin: 0 0 1.5rem;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.01em;

    & b { color: var(--color-danger); }
    & i { color: var(--color-accent); font-style: normal; }
    & span { font-weight: 500; font-size: 1rem; margin-left: 0.5rem; }
  }

  .login__links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
  }
}