/*
 * The sign-in page (templates/accounts/login.html): two cards side by side on a wide
 * screen, stacked on a phone. Everything comes from tokens.css and the kit in
 * components.css; this file only lays the two cards out and tunes the dark one.
 */

.auth {
  --auth-card-max: 32.5rem;
  --auth-card-basis: 25rem;
  --auth-field-min: 12.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}

.auth-card {
  flex: 1 1 var(--auth-card-basis);
  min-width: 0;
  max-width: var(--auth-card-max);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lift);
}

.auth-card h1,
.auth-card h2 {
  font-size: var(--fs-xl);
}

.auth-card > p,
.auth-card form > p {
  font-size: var(--fs-sm);
}

.auth-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

/* "or with your work e-mail": a rule on each side of the words. */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* The Google mark keeps the colours Google prescribes for it. */
.google {
  --google-blue: #4285f4;
  --google-green: #34a853;
  --google-yellow: #fbbc05;
  --google-red: #ea4335;
}

.google .g-blue {
  fill: var(--google-blue);
}

.google .g-green {
  fill: var(--google-green);
}

.google .g-yellow {
  fill: var(--google-yellow);
}

.google .g-red {
  fill: var(--google-red);
}

/* ---- The dark card: join ------------------------------------------------------------- */

.auth-card-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--on-dark);
}

.auth-card-dark h2,
.auth-card-dark .lb {
  color: var(--on-dark-strong);
}

.auth-card-dark .auth-eyebrow,
.auth-card-dark .auth-points svg,
.auth-card-dark .auth-done svg {
  color: var(--accent-on-dark);
}

/* The kit's error colour is made for a light ground; here it is the tint of the same red. */
.auth-card-dark .err {
  color: var(--danger-tint);
}

.auth-card-dark .in[aria-invalid="true"] {
  border-color: var(--danger-line);
  box-shadow: 0 0 0 1px var(--danger-line);
}

.auth-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.auth-points svg {
  flex: none;
  margin-top: var(--sp-0);
}

/* Agency, CIF, name and phone share rows when the card is wide enough; the e-mail is full width. */
.auth-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--auth-field-min), 100%), 1fr));
  align-items: start;
  gap: var(--sp-3);
}

.auth-done {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 480px is --bp-narrow; custom properties cannot be read inside @media. */
@media (max-width: 480px) {
  .auth-card {
    padding: var(--sp-5);
  }
}