/* The sign-in screens of the portal, in the platform's design language
   (design/DESIGN_LANGUAGE.md): loaded after design-tokens.css and
   fw-components.css, and every value comes from a --fw-* token. One card in
   the middle of a grey page: the logo, a title, one line, one action. */

.pt-signin {
  margin: 0;
  background: var(--fw-bg);
  color: var(--fw-text);
  font: var(--fw-fs-base) / var(--fw-lh-body) var(--fw-font);
}

.pt-signin__page {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fw-space-6) var(--fw-space-4);
}

.pt-signin__card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: var(--fw-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-6);
}

.pt-signin__logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 auto;
}

.pt-signin__head {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-2);
  text-align: center;
}

.pt-signin__title {
  margin: 0;
  color: var(--fw-text);
  font: var(--fw-fw-semibold) var(--fw-fs-2xl) / var(--fw-lh-tight) var(--fw-font-display);
  letter-spacing: var(--fw-tracking-title);
}

.pt-signin__lead {
  margin: 0;
  color: var(--fw-text-secondary);
  font-size: var(--fw-fs-md);
}

.pt-signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-4);
  margin: 0;
}

.pt-signin__field .fw-label { margin-bottom: var(--fw-space-2); }

.pt-signin__remember .fw-check__hint { display: block; }

/* Until .fw-btn--block lands: the one action fills the card. */
.pt-signin__action { width: 100%; }

.pt-signin__foot {
  margin: 0;
  color: var(--fw-text-secondary);
  font-size: var(--fw-fs-sm);
  text-align: center;
}

.pt-signin__foot a { color: var(--fw-accent); }

/* A phone: the card fills the width, with less padding. */
@media (max-width: 480px) {
  .pt-signin__card { padding: var(--fw-space-6) var(--fw-space-5); }
  .pt-signin__title { font-size: var(--fw-fs-xl); }
}