/* ==========================================================================
   Rentee - sign in
   A split screen: the portfolio pitch on the left, the form on the right.
   ========================================================================== */

:root {
  --lg-ink:   #0D2026;
  --lg-ink2:  #33505A;
  --lg-mute:  #7B949C;
  --lg-card:  #FFFFFF;
  --lg-bg:    #F3F7F8;
  --lg-line:  #DCE7EA;
  --lg-sunk:  #EFF5F7;
  --lg-brand: #0A5C6B;
  --lg-crit:  #E4574C;
}
.dark {
  --lg-ink:   #EAF4F6;
  --lg-ink2:  #C3D6DC;
  --lg-mute:  #7E9AA3;
  --lg-card:  #13232A;
  --lg-bg:    #0A1417;
  --lg-line:  #243C45;
  --lg-sunk:  #0E1B21;
  --lg-brand: #2FBBD0;
}

.lg-body {
  margin: 0; min-height: 100vh; background: var(--lg-bg); color: var(--lg-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lg-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 940px) { .lg-split { grid-template-columns: 1fr; } }

/* ---------- brand side ---------- */

.lg-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 46px 52px;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(20, 165, 184, .32) 0%, transparent 55%),
    linear-gradient(150deg, #0A5C6B 0%, #084B58 45%, #06323C 100%);
  color: #EAF7F9;
}
/* a faint plan-like grid, so the panel is not a flat wash */
.lg-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 70% 30%, #000 0%, transparent 75%);
}
.lg-brand-inner, .lg-foot { position: relative; z-index: 1; }

.lg-wordmark { display: block; margin-bottom: 54px; }
.lg-wordmark b {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #fff;
}
.lg-wordmark span {
  display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(234, 247, 249, .62);
}

.lg-lede {
  margin: 0; max-width: 15ch;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.035em; color: #fff; text-wrap: balance;
}
.lg-sub {
  margin: 18px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.6;
  color: rgba(234, 247, 249, .74);
}

.lg-points { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 18px; }
.lg-points li { display: flex; align-items: flex-start; gap: 14px; }
.lg-points i {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: inline-grid; place-items: center; font-size: 18px;
  background: rgba(255, 255, 255, .1); color: #7FE3F0;
}
.lg-points span { display: flex; flex-direction: column; font-size: 12.5px; color: rgba(234,247,249,.62); }
.lg-points b { font-size: 13.5px; font-weight: 620; color: #fff; margin-bottom: 2px; }

.lg-foot { margin: 0; font-size: 11.5px; color: rgba(234, 247, 249, .5); }
.lg-foot span { margin-left: 8px; opacity: .75; }

/* ---------- form side ---------- */

.lg-panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 46px 28px;
}

.lg-theme {
  position: absolute; top: 22px; right: 24px;
  width: 38px; height: 38px; border: 0; border-radius: 12px; cursor: pointer;
  display: inline-grid; place-items: center; font-size: 18px;
  background: transparent; color: var(--lg-mute);
  transition: background .14s ease, color .14s ease;
}
.lg-theme:hover { background: var(--lg-sunk); color: var(--lg-brand); }

.lg-card {
  width: 100%; max-width: 392px;
  background: var(--lg-card); border: 1px solid var(--lg-line);
  border-radius: 22px; padding: 34px 32px 28px;
  box-shadow: 0 24px 60px -30px rgba(9, 40, 48, .34);
}

.lg-mark {
  width: 46px; height: 46px; border-radius: 15px; margin-bottom: 20px;
  display: inline-grid; place-items: center; font-size: 22px;
  background: color-mix(in srgb, var(--lg-brand) 12%, transparent); color: var(--lg-brand);
}

.lg-title { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.03em; color: var(--lg-ink); }
.lg-hint  { margin: 6px 0 26px; font-size: 13px; color: var(--lg-mute); }

/* why the previous session ended - shown once, above the form */
.lg-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: -14px 0 22px; padding: 11px 13px;
  border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--lg-brand) 9%, transparent);
  color: var(--lg-ink);
}
.lg-note i { flex: none; margin-top: 1px; font-size: 15px; color: var(--lg-brand); }

.lg-field { display: block; margin-bottom: 17px; }
.lg-lbl {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 620; color: var(--lg-ink2);
}

.lg-input {
  display: flex; align-items: center; gap: 10px;
  padding: 0 13px; border-radius: 13px;
  border: 1px solid var(--lg-line); background: var(--lg-sunk);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.lg-input:focus-within {
  border-color: var(--lg-brand); background: var(--lg-card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-brand) 16%, transparent);
}
.lg-input.is-bad {
  border-color: var(--lg-crit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-crit) 14%, transparent);
}
.lg-input > i { font-size: 17px; color: var(--lg-mute); flex: none; }
.lg-input:focus-within > i { color: var(--lg-brand); }
.lg-input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  padding: 13px 0; font-family: inherit; font-size: 14.5px; color: var(--lg-ink);
}
.lg-input input::placeholder { color: var(--lg-mute); opacity: .8; }
/* the browser's autofill wash fights the control's own surface */
.lg-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--lg-ink);
  -webkit-box-shadow: 0 0 0 40px var(--lg-sunk) inset;
}

.lg-eye {
  border: 0; background: none; cursor: pointer; flex: none;
  padding: 6px; border-radius: 9px; font-size: 17px; color: var(--lg-mute);
}
.lg-eye:hover { color: var(--lg-brand); }

.lg-caps {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11.5px; color: #B7791F;
}
.lg-caps[hidden] { display: none; }

.lg-btn {
  width: 100%; margin-top: 8px; padding: 14px 18px;
  border: 0; border-radius: 13px; cursor: pointer;
  background: var(--lg-brand); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 640; letter-spacing: .01em;
  box-shadow: 0 12px 26px -14px var(--lg-brand);
  transition: filter .14s ease, transform .1s ease;
}
.lg-btn:hover:not(:disabled) { filter: brightness(1.07); }
.lg-btn:active:not(:disabled) { transform: translateY(1px); }
.lg-btn:disabled { cursor: default; opacity: .72; box-shadow: none; }
/* login.js swaps in its own utility classes while posting */
.lg-btn.bg-slate-150 { background: var(--lg-sunk); color: var(--lg-ink2); }

.lg-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--lg-line);
  font-size: 11.5px; line-height: 1.55; color: var(--lg-mute);
}
.lg-note i { font-size: 15px; color: var(--lg-brand); flex: none; margin-top: -1px; }

.lg-small { margin: 0; font-size: 11px; color: var(--lg-mute); }

@media (max-width: 940px) {
  .lg-brand { padding: 34px 28px 30px; }
  .lg-wordmark { margin-bottom: 26px; }
  .lg-points { display: none; }
  .lg-sub { margin-top: 12px; }
  .lg-foot { margin-top: 24px; }
}
@media (max-width: 480px) {
  .lg-card { padding: 26px 22px 22px; border-radius: 18px; }
  .lg-panel { padding: 30px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-btn, .lg-input, .lg-theme { transition: none; }
}