/* Lucia sign-in - the page layout and its form (L-07).
   Source: Lucia-Login-dev-package-2026-10-09-v6, source/css/login.css (ported; the prototype's photo alternates and ledger are not carried over).
   Every class here is prefixed ln- so nothing collides with the shell (app-shell.css) or the family sheet.

   Layout after the family's other split pages: a stage on the left that says what the product is (a photograph behind a frosted
   demo card), a narrow form column on the right. The form column has three fixed rows - a top line
   (Create an Account), the form, a foot line - and the foot line is where the one quiet entry for limited partners lives. It is
   pinned to the bottom of the column, so whatever is added above it later (the Borrower / Applicant switch) never moves it.

   Rules held on this page: Inter + JetBrains Mono, nothing under 12px, nothing lighter than #555553, gold only as a surface,
   a rule or #8a5e08 text, status colour only for real status (the one red is an error), Title Case labels, no modal. */
:root {
  --ln-paper: #fffef2; --ln-paper-2: #f3f2e7; --ln-paper-3: #eceadf;
  --ln-ink: #191918; --ln-ink-2: #3a3936; --ln-ink-3: #555553;
  --ln-line: #e3e2d8; --ln-line-2: #d3d0be;
  --ln-gold: #fcaa2d; --ln-gold-ink: #8a5e08; --ln-gold-wash: #f9f5e2;
  --ln-err: #a8443e; --ln-err-ink: #8f362f; --ln-err-wash: #f8ece8;
  --ln-ease: cubic-bezier(.22, .8, .2, 1); --ln-spring: cubic-bezier(.34, 1.4, .44, 1);
  --ln-pad: clamp(24px, 4.2vw, 72px);                   /* the form column's side padding, shared by its three rows */
}
body[data-view="signin"] { background: var(--ln-paper); }
.ln[hidden], .ln [hidden], .ln-proto [hidden] { display: none !important; }
.ln svg { flex: none; }
.ln :focus-visible { outline: 2px solid var(--ln-ink); outline-offset: 3px; border-radius: 6px; }
@keyframes ln-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ln-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ln-in { from { opacity: 0; } to { opacity: 1; } }

.ln { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); min-height: 100vh; font-family: var(--lc-font); color: var(--ln-ink); -webkit-font-smoothing: antialiased; }

/* ---------- the lockup: Lucia by eSapiens, exactly the family standard (mark 28 · name Inter 700/18 · by eSapiens Inter 500/13 #3a3936) ---------- */
.ln-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ln-ink); border-radius: 6px; }
.ln-lockup svg, .ln-lockup img { width: 28px; height: 28px; flex: none; }
.ln-lockup__name { display: inline-flex; align-items: baseline; gap: 6px; }
.ln-lockup__word { font: 700 18px/1 var(--lc-font); letter-spacing: -.02em; }
.ln-lockup__by { font: 500 13px/1 var(--lc-font); letter-spacing: 0; color: var(--ln-ink-2); white-space: nowrap; transition: color .16s ease; }
.ln-lockup:hover .ln-lockup__by { color: var(--ln-ink); }

/* ---------- the form column ---------- */
.ln-side { display: flex; flex-direction: column; min-height: 100vh; padding: 22px var(--ln-pad) 22px; background: var(--ln-paper); }   /* 22 + half of the 44px top row = the lockup's centre line (30 + 14) */
.ln-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; font-size: 14.5px; color: var(--ln-ink-2); }
.ln-top a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ln-ink); text-decoration: none; }
.ln-top a svg { width: 16px; height: 16px; transition: transform .3s var(--ln-ease); }
.ln-top a:hover svg { transform: translateX(3px); }
.ln-top a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* top-aligned, not centred: the heading keeps its place whatever the view below it (the Borrower / Applicant switch, an error line, a code step) adds in height; the foot stays pinned under it */
.ln-box { width: 100%; max-width: 400px; margin: 0 auto; padding: clamp(36px, 13vh, 120px) 0 32px; flex: 1 1 auto; }
.ln-view { position: relative; }
.ln-view > * { animation: ln-up .45s var(--ln-ease) both; }
.ln-view > *:nth-child(1) { animation-delay: .02s; } .ln-view > *:nth-child(2) { animation-delay: .06s; } .ln-view > *:nth-child(3) { animation-delay: .1s; }
.ln-view > *:nth-child(4) { animation-delay: .14s; } .ln-view > *:nth-child(5) { animation-delay: .18s; } .ln-view > *:nth-child(6) { animation-delay: .22s; }
.ln-view.still > * { animation: none; }   /* switching Lender / Borrower / Applicant redraws the form in place; the heading and the switch do not fade in again */
.ln-h1 { margin: 0; font: 650 clamp(32px, 3vw, 40px)/1.08 var(--lc-font); letter-spacing: -.035em; color: var(--ln-ink); text-wrap: balance; }
.ln-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ln-ink-2); }
.ln-sub b { font-weight: 600; color: var(--ln-ink); overflow-wrap: anywhere; }

/* the switch for the people who share this door with the lender — Borrower / Applicant, when that portal exists. It takes the row between the
   heading and the form (the live page had its tabs here); nothing below the form depends on it. */
.ln-seg { display: flex; gap: 2px; margin: 26px 0 0; padding: 3px; background: rgba(25, 25, 24, .055); border-radius: 8px; }
.ln-h1 + .ln-seg { margin-top: 28px; }
.ln-seg button { flex: 1 1 0; min-width: 0; height: 36px; border: 0; border-radius: 6px; background: transparent; font: 600 14px/1 var(--lc-font); color: var(--ln-ink-3); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; }
.ln-seg button:hover { color: var(--ln-ink); }
.ln-seg button[aria-selected="true"] { background: #fff; color: var(--ln-ink); box-shadow: 0 1px 2px rgba(25, 25, 24, .1); }
.ln-seg + .ln-form, .ln-seg + .ln-alert { margin-top: 22px; }

/* ---------- form ---------- */
.ln-form { display: grid; gap: 16px; margin-top: 28px; }
.ln-field { display: grid; gap: 7px; }
.ln-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ln-field label, .ln-label { font: 600 14px/1.3 var(--lc-font); color: var(--ln-ink); }
.ln-fg { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: 600 14px/1.3 var(--lc-font); color: var(--ln-gold-ink); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.ln-fg:hover, .ln-fg:focus-visible { text-decoration-color: currentColor; }
.ln-inp { position: relative; }
.ln-inp > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ln-ink-3); pointer-events: none; transition: color .2s ease; }
.ln-inp input { width: 100%; height: 48px; padding: 0 46px 0 42px; border: 1px solid var(--ln-line-2); border-radius: 8px; background: #fff; font: 400 15px/1 var(--lc-font); color: var(--ln-ink); transition: border-color .2s ease, box-shadow .25s var(--ln-ease); }
.ln-inp input::placeholder { color: var(--ln-ink-3); }
.ln-inp input:hover { border-color: #b9b5a0; }
.ln-inp input:focus { outline: none; border-color: var(--ln-ink); box-shadow: 0 0 0 3px rgba(252, 170, 45, .32); }
.ln-inp:focus-within > svg { color: var(--ln-ink); }
.ln-eye { position: absolute; right: 6px; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ln-ink-3); cursor: pointer; transition: background .2s ease, color .2s ease; }
.ln-eye:hover { background: var(--ln-paper-2); color: var(--ln-ink); }
.ln-eye svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .2s ease, transform .3s var(--ln-ease); }
.ln-eye .off { opacity: 0; transform: scale(.6); }
.ln-eye[aria-pressed="true"] .on { opacity: 0; transform: scale(.6); }
.ln-eye[aria-pressed="true"] .off { opacity: 1; transform: none; }
.ln-msg, .ln-caps { display: none; font-size: 13px; line-height: 1.4; }
.ln-msg { color: var(--ln-err-ink); }
.ln-caps { color: var(--ln-gold-ink); font-weight: 500; }
.ln-caps.show { display: block; animation: ln-up .3s var(--ln-ease); }
.ln-field.err .ln-inp input { border-color: var(--ln-err); box-shadow: 0 0 0 3px rgba(168, 68, 62, .14); }
.ln-field.err .ln-msg { display: block; }
.ln-field.err .ln-inp { animation: ln-shake .4s ease; }
@keyframes ln-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.ln-chk { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ln-ink-2); cursor: pointer; user-select: none; }
.ln-chk input { position: absolute; opacity: 0; pointer-events: none; }
.ln-chk i { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--ln-line-2); background: #fff; display: grid; place-items: center; transition: background .2s ease, border-color .2s ease; }
.ln-chk i svg { width: 13px; height: 13px; color: var(--ln-paper); transform: scale(0); transition: transform .3s var(--ln-spring); }
.ln-chk input:checked + i { background: var(--ln-ink); border-color: var(--ln-ink); }
.ln-chk input:checked + i svg { transform: none; }
.ln-chk input:focus-visible + i { outline: 2px solid var(--ln-ink); outline-offset: 2px; }

/* the one dark button: loading is a spinner in place, done is the same ink with a gold check */
.ln-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-top: 4px; border: 0; border-radius: 8px; background: var(--ln-ink); color: var(--ln-paper); font: 600 15px/1 var(--lc-font); letter-spacing: -.005em; cursor: pointer; overflow: hidden; transition: transform .3s var(--ln-ease), box-shadow .3s ease; }
.ln-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(25, 25, 24, .65); }
.ln-go:disabled { cursor: default; }
.ln-go > svg { width: 17px; height: 17px; transition: transform .3s var(--ln-ease); }
.ln-go:hover:not(:disabled) > svg { transform: translateX(3px); }
.ln-go .ld, .ln-go .ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .2s ease; }
.ln-go .ld { font: 600 15px/1 var(--lc-font); }
.ln-go .ld i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 254, 242, .3); border-top-color: var(--ln-paper); }
.ln-go.busy .ld i { animation: ln-spin .8s linear infinite; }   /* it turns only while the button is working, not all the time behind the label */
@keyframes ln-spin { to { transform: rotate(360deg); } }
.ln-go .ok svg { width: 18px; height: 18px; color: var(--ln-gold); }
.ln-go.busy > span:not(.ld):not(.ok), .ln-go.busy > svg, .ln-go.done > span:not(.ld):not(.ok), .ln-go.done > svg { opacity: 0; }
.ln-go.busy .ld { opacity: 1; }
.ln-go.done .ok { opacity: 1; animation: ln-pop .4s var(--ln-spring); }
.ln-go--ghost { background: #fff; color: var(--ln-ink); border: 1px solid var(--ln-line-2); }
.ln-go--ghost:hover:not(:disabled) { border-color: var(--ln-ink); box-shadow: none; }

/* a status line above the form: the one red on the page is an error, and an error names what to do next */
.ln-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; padding: 12px 14px; border-radius: 8px; background: var(--ln-err-wash); border: 1px solid rgba(168, 68, 62, .28); color: var(--ln-err-ink); font-size: 14px; line-height: 1.45; }
.ln-alert svg { width: 18px; height: 18px; margin-top: 1px; }
.ln-alert__x { display: block; margin-top: 6px; appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: 600 14px/1.3 var(--lc-font); color: var(--ln-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ln-note-line { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; padding: 12px 14px; border-radius: 8px; background: var(--ln-paper-2); border: 1px solid var(--ln-line); color: var(--ln-ink-2); font-size: 14px; line-height: 1.45; }
.ln-note-line svg { width: 18px; height: 18px; margin-top: 1px; color: var(--ln-ink); }
.ln-sent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--ln-paper-2); border: 1px solid var(--ln-line); color: var(--ln-ink); font-size: 14.5px; line-height: 1.5; }
.ln-sent svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ln-ink); }
.ln-sent b { font-weight: 600; overflow-wrap: anywhere; }
.ln-help { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ln-ink-3); }
.ln-link { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: 600 14.5px/1.3 var(--lc-font); color: var(--ln-ink); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-align: left; }
.ln-link:hover, .ln-link:focus-visible { text-decoration-color: currentColor; }
.ln-alts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
/* the way back sits in the space above the heading rather than pushing it down, so the heading stays where it is on the sign-in view */
.ln-back { position: absolute; left: 0; top: -40px; display: inline-flex; align-items: center; gap: 6px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: 600 14.5px/1.3 var(--lc-font); color: var(--ln-ink); cursor: pointer; }
.ln-back svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .3s var(--ln-ease); }
.ln-back:hover svg { transform: rotate(180deg) translateX(3px); }

/* the six boxes of the one-time code */
.ln-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ln-code input { width: 100%; height: 52px; box-sizing: border-box; padding: 0; text-align: center; border: 1px solid var(--ln-line-2); border-radius: 8px; background: #fff; font: 600 22px/1 var(--lc-font-mono); color: var(--ln-ink); transition: border-color .2s ease, box-shadow .25s var(--ln-ease); }
.ln-code input:hover { border-color: #b9b5a0; }
.ln-code input:focus { outline: none; border-color: var(--ln-ink); box-shadow: 0 0 0 3px rgba(252, 170, 45, .32); }
.ln-code.err input { border-color: var(--ln-err); box-shadow: 0 0 0 3px rgba(168, 68, 62, .14); }
.ln-code.err { animation: ln-shake .4s ease; }
.ln-note { min-height: 20px; margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--ln-ink-3); }

/* ---------- the foot of the column: the legal line, and the one quiet entry for limited partners ---------- */
.ln-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; min-height: 34px; font-size: 13px; color: var(--ln-ink-3); }
.ln-foot__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ln-foot .ln-chip { margin-left: auto; }   /* wrapped or not, the way in stays at the right end of the foot */
.ln-foot a { color: inherit; text-decoration: none; }
.ln-foot a:hover { color: var(--ln-ink); text-decoration: underline; text-underline-offset: 3px; }
/* The mark LP Confidential wears in its own portal (an ink pill with the mark's gold block), worn here as the way in. It is the same
   chip in both states — a link that goes to the LP sign-in, and, once you are there, the plain marker of where you are. */
.ln-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; background: var(--ln-ink); color: var(--ln-paper); font: 600 12.5px/1 var(--lc-font); letter-spacing: .005em; white-space: nowrap; text-decoration: none; }
.ln-chip i { width: 8px; height: 5px; border-radius: 1px; background: var(--ln-gold); flex: none; }
.ln-chip svg { width: 13px; height: 13px; margin-left: 2px; transition: transform .3s var(--ln-ease); }
a.ln-chip:hover { color: var(--ln-paper); text-decoration: none; background: #2d2d2b; }
.ln-foot a.ln-chip, .ln-foot a.ln-chip:hover { color: var(--ln-paper); text-decoration: none; }
a.ln-chip:hover svg { transform: translateX(3px); }
a.ln-chip:focus-visible { outline-offset: 3px; }
/* ---------- narrower and shorter screens ---------- */
@media (max-height: 800px) and (min-width: 901px) {
  .ln-side { padding-top: 18px; }
  .ln-box { padding-top: clamp(24px, 9vh, 72px); }
  .ln-form { margin-top: 22px; gap: 13px; }
}
@media (max-width: 900px) {
  /* one column: the banner row keeps its height and only the form column takes the window's spare height, so a shorter
     view (Borrower / Applicant has no password) moves neither the title nor the LP chip (designer §15.8). The box grows
     with its content top-aligned, which keeps the foot at the bottom of the window while the page fits in it. */
  .ln { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ln-side { min-height: 0; padding: 20px 20px 24px; }
  .ln-top { justify-content: center; }
  .ln-box { padding: 18px 0 30px; flex: 1 0 auto; }
  .ln-back { position: static; margin: 0 0 18px; }
  .ln-foot { justify-content: center; flex-direction: column-reverse; gap: 14px; margin-top: 8px; }
  .ln-foot__legal { justify-content: center; }
  .ln-foot .ln-chip { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ln *, .ln *::before, .ln *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}

/* The LP email step's title stays on one line (user 2026-10-10): sized from the form box's own width. */
.ln-box { container-type: inline-size; }
.ln-h1--one { white-space: nowrap; font-size: min(clamp(32px, 3vw, 40px), 8.6cqi); }

/* The brand: LP Confidential with "Confidential" in italic (user 2026-10-10). !important because several
   components reset em to normal inside their own headings (lp-ai.css .lai-lp .lp-ai-h em, lucia-ai.css .hero h1 em). */
em.lc-conf { font-style: italic !important; }