/* Login page.
   Loaded on top of style.css so it inherits the panel's colour tokens
   (--accent-1/--accent-2/--surface/...) and stays visually continuous with
   the panel a customer lands in after signing in. */

.lg-body {
  min-height: 100dvh;                 /* dvh, not vh: mobile browser chrome
                                         otherwise pushes the card off-screen */
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

/* ---------- atmosphere ---------- */
.lg-bg, .lg-grid, .lg-orb { position: fixed; pointer-events: none; }

.lg-bg {
  inset: 0;
  background:
    radial-gradient(70vw 70vh at 12% -15%, rgba(110, 168, 254, .20), transparent 62%),
    radial-gradient(60vw 60vh at 105% 8%, rgba(167, 139, 250, .17), transparent 60%),
    radial-gradient(50vw 50vh at 50% 115%, rgba(34, 211, 238, .10), transparent 60%);
}

.lg-grid {
  inset: 0;
  opacity: .30;
  background-image:
    linear-gradient(rgba(120, 140, 190, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 190, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  /* Fade the grid out toward the edges so it reads as depth, not wallpaper. */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 35%, transparent 100%);
}

/* Two slow-drifting blurred orbs. Kept to two, and animated on transform
   only, so this stays on the compositor and never repaints on scroll. */
.lg-orb {
  width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(90px); opacity: .30;
  will-change: transform;
}
.lg-orb-a {
  top: -18vmax; inset-inline-start: -14vmax;
  background: radial-gradient(circle, var(--accent-1, #6ea8fe), transparent 68%);
  animation: lgDriftA 22s ease-in-out infinite alternate;
}
.lg-orb-b {
  bottom: -20vmax; inset-inline-end: -16vmax;
  background: radial-gradient(circle, var(--accent-2, #a78bfa), transparent 68%);
  animation: lgDriftB 26s ease-in-out infinite alternate;
}
@keyframes lgDriftA { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.10); } }
@keyframes lgDriftB { to { transform: translate3d(-6vmax, -4vmax, 0) scale(1.06); } }

/* ---------- card ---------- */
.lg-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  padding: 24px;
  animation: lgRise .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes lgRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.lg-card {
  position: relative;
  padding: 34px 30px 28px;
  border-radius: 20px;
  background: var(--card-glass);
  border: 1px solid rgba(120, 140, 190, .17);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
/* Gradient hairline along the top edge - the detail that reads as "designed"
   rather than "default card". */
.lg-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent,
              var(--accent-1, #6ea8fe), var(--accent-2, #a78bfa), transparent);
  opacity: .85;
}

.lg-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.lg-logo {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-1, #6ea8fe), var(--accent-2, #a78bfa));
  box-shadow: 0 8px 22px rgba(110, 168, 254, .32);
}
.lg-title h1 {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(135deg, #fff, #b9c6e4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lg-title span { font-size: 11.5px; color: var(--text-faint, #6f7d99); }

/* ---------- fields ---------- */
.lg-form { display: flex; flex-direction: column; gap: 15px; }
.lg-field { display: flex; flex-direction: column; gap: 7px; }
.lg-label { font-size: 12px; font-weight: 600; color: var(--text-dim, #a9b4cc); }

.lg-input {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 0 13px;
  background: var(--inset-bg);
  border: 1px solid rgba(120, 140, 190, .17);
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.lg-input > svg { color: var(--text-faint, #6f7d99); flex-shrink: 0; transition: color .16s ease; }
.lg-input:focus-within {
  border-color: var(--accent-1, #6ea8fe);
  background: var(--inset-bg);
  box-shadow: 0 0 0 3.5px rgba(110, 168, 254, .14);
}
.lg-input:focus-within > svg { color: var(--accent-1, #6ea8fe); }

.lg-input input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  padding: 13px 0;
  font-family: inherit; font-size: 14px; color: var(--text, #e7ecf6);
}
.lg-input input::placeholder { color: rgba(111, 125, 153, .55); }
/* Chrome's autofill repaints the field bright blue and undoes everything
   above; the huge inset shadow is the only reliable way to override it. */
.lg-input input:-webkit-autofill,
.lg-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text, #e7ecf6);
  -webkit-box-shadow: 0 0 0 1000px rgba(16, 20, 32, 1) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.lg-eye {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-faint, #6f7d99); display: grid; place-items: center;
  border-radius: 7px; transition: color .15s ease, background .15s ease;
}
.lg-eye:hover { color: var(--text, #e7ecf6); background: rgba(120, 140, 190, .12); }
.lg-eye.on { color: var(--accent-1, #6ea8fe); }

.lg-opt { font-style: normal; color: var(--text-faint, #6f7d99); font-weight: 400; }
.lg-hint { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-faint, #6f7d99); }

/* Trial badge + referral banner - ported from trial.css (retired alongside
   /trial, 2026-10-12) now that /signup is what advertises the free window. */
.lg-badge {
  display: inline-block; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--green, #34d399); background: var(--green-bg, rgba(52,211,153,.12));
  border: 1px solid rgba(52, 211, 153, .3);
}
.lg-ref {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 18px; padding: 11px 14px;
  border-radius: var(--radius-md, 14px);
  font-size: 12.8px; line-height: 1.9;
  color: var(--green, #34d399);
  background: var(--green-bg, rgba(52,211,153,.12));
  border: 1px solid rgba(52, 211, 153, .3);
}
.lg-ref svg { flex: 0 0 auto; margin-top: 3px; }
.lg-ref span { color: var(--text-dim, #a9b4cc); }
.lg-ref b { color: var(--text, #e7ecf6); }

.lg-chk {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-dim, #a9b4cc); user-select: none;
}
.lg-chk input {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent-1, #6ea8fe);
  cursor: pointer;
}

/* ---------- submit ---------- */
.lg-submit {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink);
  background: linear-gradient(135deg, var(--accent-1, #6ea8fe), var(--accent-2, #a78bfa));
  box-shadow: 0 10px 26px rgba(110, 168, 254, .26);
  transition: transform .14s ease, box-shadow .18s ease, filter .16s ease;
}
.lg-submit:hover { filter: brightness(1.07); box-shadow: 0 13px 32px rgba(110, 168, 254, .34); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit:disabled { opacity: .75; cursor: wait; }
.lg-submit-arrow { transition: transform .18s ease; }
.lg-submit:hover .lg-submit-arrow { transform: translateX(-3px); }   /* RTL: toward the text */
.lg-submit.busy .lg-submit-arrow { animation: lgSpin .7s linear infinite; }
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ---------- error ---------- */
.lg-error {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 18px; padding: 11px 13px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.6;
  background: rgba(239, 68, 68, .11);
  border: 1px solid rgba(239, 68, 68, .34);
  color: #fecaca;
  animation: lgShake .34s cubic-bezier(.36, .07, .19, .97) both;
}
.lg-error svg { flex-shrink: 0; }
@keyframes lgShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.lg-foot {
  margin: 20px 0 0; padding-top: 17px;
  border-top: 1px solid rgba(120, 140, 190, .11);
  font-size: 11.5px; color: var(--text-faint, #6f7d99); text-align: center;
}

.lg-meta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 16px 0 0; font-size: 11px; color: rgba(111, 125, 153, .8);
}

/* ---------- small screens ---------- */
@media (max-width: 460px) {
  .lg-wrap { padding: 16px; }
  .lg-card { padding: 28px 22px 24px; border-radius: 17px; }
  .lg-title h1 { font-size: 19px; }
  .lg-logo { width: 42px; height: 42px; }
}

/* Motion is decoration here; anyone who has asked the OS to stop it should
   still get a perfectly usable, static login. */
@media (prefers-reduced-motion: reduce) {
  .lg-orb, .lg-wrap, .lg-error, .lg-submit.busy .lg-submit-arrow { animation: none; }
  .lg-submit, .lg-submit-arrow, .lg-input { transition: none; }
}

/* The trial link is the only call to action for someone who is not a customer
   yet, so it has to read as a link rather than as fine print. */
.lg-foot a {
  color: var(--accent-1, #6ea8fe);
  font-weight: 600;
  text-decoration: none;
}
.lg-foot a:hover { text-decoration: underline; }

/* Login and trial have no chrome to hang the toggle on, so it floats in the
   corner rather than being forced into the card, where it would compete with
   the submit button for attention. */
.lg-theme { position: fixed; top: 18px; inset-inline-end: 18px; z-index: 30; }