/* Login page. The one view outside the app shell: no sidebar, no topbar, just a
   centred card. Everything visual — surfaces, borders, the teal primary button,
   the error banner — comes from app.css, so this file carries only the centring
   and the few sizes the shared components do not know about. No colour literals:
   the palette stays in app.css's --rl-* tokens. */

body {
  /* app.css already sets margin, min-height, colour and the page gradient. */
  display: grid;
  place-items: center;
  padding: 1.1rem;
}

.login-card {
  width: min(100%, 27rem);
  /* .panel carries a bottom margin for stacked panels; a centred card wants none. */
  margin: 0;
  padding: 1.35rem 1.2rem 1.15rem;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
  /* Smaller than the shared h2 ramp: this is a brand lockup, not a page title. */
  font-size: 1.25rem;
}

/* The "RL" medallion. Solid brand fill, so the glyph rides the same contrast
   budget the suite already enforces for --rl-brand on a white panel. */
.login-brand::before {
  content: "RL";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--rl-brand);
  color: var(--rl-btn-success-text);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.login-intro {
  margin: 0 0 1rem;
  color: var(--rl-text-soft);
  font-size: 0.9rem;
}

/* Pico stretches a bare <button>, but app.css's .btn-sm-less primary chain does
   not, so the width has to be asked for. */
.login-card button[type="submit"] {
  width: 100%;
  margin-top: 0.3rem;
}