/* ══════════════════════════════════════════════════════════════════════════
   CYCLICAL TRADER — sign-in
   ══════════════════════════════════════════════════════════════════════════
   Deliberately says almost nothing. A login screen on a public hostname is
   the one page an unauthenticated stranger can read, so it names no ticker,
   no position, no schedule and no owner -- only enough to prove to the person
   who does own it that they are in the right place.

   Tokens and fonts come from cyclical.css; this file is layout only.
   ══════════════════════════════════════════════════════════════════════════ */

body.login-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background:
    /* A single wash off the top-left, so the ground is not a flat fill. */
    radial-gradient(120% 90% at 8% 0%, rgba(199, 240, 75, 0.05), transparent 62%),
    var(--ground);
}

.login-main {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.login-card {
  width: min(360px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--acid);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem 1.5rem;
}

.login-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.4rem;
}

.login-title {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

.login-field { display: flex; flex-direction: column; gap: 0.4rem; }
.login-field label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

.login-submit { margin-top: 1rem; }

.login-error {
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--rust-wash);
  border: 1px solid var(--rust);
  border-left-width: 3px;
  border-radius: var(--radius);
  color: var(--rust);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.login-note {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.11em;
  line-height: 1.8;
  text-transform: uppercase;
}

.login-foot {
  padding: 0.75rem var(--shell-x);
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}