/* Styles for the standalone sign-in page (registration/login.html).

   The page is the app's chrome taken full-bleed: navy field, the brand mark on it
   in chrome ink, and the sign-in card as the light "workspace" floating on top —
   the same relationship layout.css's token block describes for the sidebar/topbar
   L. Flat navy on purpose; the chrome is flat everywhere else, and a gradient on
   body is sized against the <html> box rather than the viewport, so it drifts.

   The load-bearing rule here is layout.css's first token rule, and this is the one
   page in the app where both sides of it appear at once: anything on the navy uses
   --color-chrome-* ink, anything inside the card uses --color-text-*. They are
   never mixed. --color-text-primary is byte-identical to --color-chrome-bg, so
   getting it wrong renders navy on navy — invisible, not merely low-contrast. */

/* Root-scoped so the viewport scrollbar can be recoloured: WebKit resolves
   viewport scrollbar pseudo-elements against <html> first, so a body-scoped rule
   can lose to layout.css's unscoped one — which is --color-border, a near-white
   stripe on navy. Same problem .sidebar__nav solves, same values reused. */
.login-page { background: var(--color-chrome-bg); }
.login-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.login-page::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

.login-page body {
  /* layout.css's body is the app shell — display:flex in the row direction, and
     color:--color-text-primary. Both have to go, or the brand block lands beside
     the card instead of above it, painted navy on navy. */
  flex-direction: column;
  padding: 32px 20px;
  background: var(--color-chrome-bg);
  color: var(--color-chrome-ink);
}

/* margin:auto rather than justify-content:center — a flex container's scrollable
   overflow region excludes start-direction overflow, so centring that way makes
   the top of the brand block unreachable on a short viewport (landscape phone). */
.login-shell {
  margin: auto;
  width: 100%;
  max-width: 400px;
}

/* ─── Brand: the sidebar mark at hero scale ──────────────────────── */
.login-brand { text-align: center; margin-bottom: 28px; }

/* The full Phoenix Smartlocks lockup beside "AMP" — the same idea
   .sidebar__brand pairs at chrome-row scale (see that rule for why the
   wordmark is an image rather than typeset text), but sized up for the hero
   rather than sharing its exact divider/type values. */
.login-brand__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.login-brand__logo { height: 56px; width: auto; object-fit: contain; }

.login-brand__divider {
  width: 1.5px;
  height: 48px;
  background: rgba(255, 255, 255, .25);
  flex-shrink: 0;
}

.login-brand__amp {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-chrome-ink);
  line-height: 1;
}

.login-brand__sub {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-chrome-ink-muted);
}

/* ─── Card: a light sheet on the navy ────────────────────────────────
   No border, only --shadow-md — the same reasoning documented on
   .sidebar-user-menu, the other light surface floating on this navy: at this
   contrast a border reads as a bright halo, so the shadow does the separating.
   Ink inside reverts to the content --color-text-* family. */
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  color: var(--color-text-primary);
}

.login-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}

/* The fields themselves come from layout.css's .form-field rules, via
   _form_field.html. Deliberately not .form-fields: that carries a
   padding-bottom:24px meant for the form-card footer, which here would read as
   dead space above the button. */
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Same shape as .confirm-delete__blocked so the app has one visual language for a
   page-level danger panel rather than two. */
.login-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-danger-bg);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-danger-strong);
}

/* .btn--primary supplies the pill, the accent fill and the hover darkening — all
   three used to be duplicated here. Only the sizing is login-specific. The height
   coexists with .btn's padding because of the global border-box reset. */
.login-submit {
  margin-top: 4px;
  width: 100%;
  height: 44px;
  justify-content: center;
  font-size: var(--text-base);   /* .btn is 13.5px; this keeps the button's previous 14px */
}

.login-foot {
  margin-top: 20px;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--color-chrome-ink-subtle);
}

@media (max-width: 420px) {
  .login-card { padding: 24px 20px; }
  .login-brand__lockup { gap: 14px; }
  .login-brand__logo { height: 46px; }
  .login-brand__divider { height: 40px; }
  .login-brand__amp { font-size: 28px; }
}