.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--booksly-mist);
}

.login-card {
  width: 100%;
  max-width: 396px;
  padding: 30px 40px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--booksly-gold);
  border-radius: var(--radius-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inverse of the header's .brand-mark: on a light card the teal tile is the legible one. Only the
   two colours differ, so the tile keeps its geometry from .brand-mark rather than restating it. */
.login-brand__mark {
  color: var(--booksly-gold);
  background: var(--booksly-teal);
}

.login-brand__word {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--booksly-teal);
}

.login-title {
  margin: 26px 0 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--booksly-teal);
}

/* Google's button is used whole rather than rebuilt: their guidelines sanction only their three
   fills, forbid a monochrome or self-drawn mark, and ship no bare "G" to compose with. That is why
   this is an image and not a .btn, and why nothing here recolours or reproportions it. */
.login-google {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.login-google__button {
  display: inline-flex;
  border-radius: 22px;
  outline: none;
  transition: box-shadow 0.12s ease;
}

/* Hover and focus stay outside the artwork, so neither state alters the button Google approved. */
.login-google__button:hover {
  box-shadow: 0 0 0 4px var(--teal-tint);
}

.login-google__button:focus-visible {
  box-shadow: var(--focus-ring);
}

/* The asset is 180×40; 1.1× is the largest uniform scale that keeps it at --control-lg tall. */
.login-google__img {
  display: block;
  width: 198px;
  height: 44px;
}

/* The slot keeps its 78px whether or not there is a message, so the card never moves. Two wrapped
   lines of the longest copy fit; longer copy would need the height re-checked, not the slot grown. */
.login-error {
  width: fit-content;
  height: 78px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wine-text);
  background: var(--wine-tint);
  border-left: 2px solid var(--booksly-wine);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  text-wrap: pretty;
  opacity: 0;
}

.login-error.is-visible {
  opacity: 1;
}