/* ══════════════════════ SIGN IN ══════════════════════

   From claude/designs/"Old Log In.css" -- eleven .lo1-* rules and one
   .sid-fields override, which is the only place the page diverges from the
   drawer's field family. The form itself is shared markup; this is the card
   around it.

   THE DESIGN'S TOKENS ARE ALIASED, NOT COPIED. It writes --surface, --ink,
   --line and the rest, which it inherited from the register page's stylesheet.
   Those are mapped to the --o5-* equivalents here so a change to the skin
   reaches this page instead of leaving it a stale duplicate. --green has no O5
   equivalent and keeps the design's own value; it is used only by the perk
   ticks. */
.o5-login {
  --surface: var(--o5-surface);
  --line: var(--o5-line);
  --ink: var(--o5-ink);
  --ink2: var(--o5-ink2);
  --ink3: var(--o5-ink3);
  --red: #d62133;
  --green: #1f8a5b;
  --display: var(--o5-display);
}

.lo1-wrap{flex:none;padding:56px 24px}
.lo1-card{max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:44px 48px;box-shadow:0 24px 48px -30px rgba(0,0,0,0.15)}
.lo1-card h2{text-align:center;font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:-0.02em;color:var(--ink)}
.lo1-sub{text-align:center;color:var(--ink2);font-size:13.5px;margin:0 0 26px}
.lo1-sso{margin-bottom:20px}
.lo1-or{text-align:center;font-size:12px;color:var(--ink3);margin:18px 0}
.lo1-forgot{align-self:flex-end}
.lo1-submit{width:100%;margin-top:18px}
.lo1-perks{display:flex;justify-content:center;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.lo1-perks span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);font-weight:600}
.lo1-perks svg{color:var(--green)}
.lo1-foot{text-align:center;margin-top:20px;font-size:13px;color:var(--ink2)}
.lo1-foot a{color:var(--red);font-weight:800;text-decoration:none}
.lo1-olf-input{margin-bottom:20px}
.sid-fields{display:flex;flex-direction:column;gap:12px}

/* ── The failure message ──

   The design has no error region; this is the register page's
   duplicate-email pill, so a failure on either account page looks like the
   same product rather than two different ones. Full width, above the fields,
   because it is about the attempt rather than about one input. */
.o5-login .lo1-error {
  display: none; align-items: center; gap: 10px;
  background: #fdecec; border-radius: 999px;
  padding: 12px 18px; margin: 0 0 16px;
}
.o5-login .lo1-error.is-on { display: flex; }
.o5-login .lo1-error .de-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-family: var(--display); font-weight: 800; font-size: 13px;
}
.o5-login .lo1-error .de-line {
  flex: 1; font-family: var(--display); font-size: 12.5px; font-weight: 600;
  letter-spacing: -.005em; color: var(--red); line-height: 1.35;
}

/* The perk ticks are the only use of --green. */
.o5-login .lo1-perks span::before { content: '\2713'; color: var(--green); margin-inline-end: 6px; font-weight: 800; }