/* LP Confidential — shell styles layered on app-shell.css (docs/requirements/lp-portal-shell.md,
   app-shell-identity.md §4–§5). Every class is lp- prefixed and was grepped against public/ before
   landing (the prototype's .lpc-app / .lpc-board collided twice). Tokens only: --lc-* / --df-*.
   House rules: Title Case labels, no text under 12px, no ink lighter than #555, no modals for forms. */
[hidden] { display: none !important; }

/* ── sidebar: the identity card, its panel, the ⋯ menu body, the self-scrolling nav and the drawer are plan 01's
   (identity-card.js + app-shell.css; contracts A13) — nothing here restyles them. Only LP-specific touches: ── */
.lp-app .lc-sidebar__user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the LP entity is longer than an org name (identity §3) */
.lp-app .lc-sidebar__link:focus-visible { outline: 2px solid var(--lc-text); outline-offset: -2px; }
.lp-app .lc-sidebar__group-label { font-size: 12px; }
.lp-app .lc-user-menu__item { text-decoration: none; }

/* ── topbar: breadcrumb left, lender name + portal chip right (shell §2.4) ── */
.lp-app .lc-topbar { gap: 16px; justify-content: flex-start; }
.lp-app .lc-topbar__breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the crumb's root in the shell's secondary ink, never lighter than the floor (style-guide §0.1, P-4) */
.lp-crumb__root { color: var(--lc-shell-ink-3); }
.lp-app .lc-topbar__actions { flex: none; margin-left: auto; }
.lp-lender { font: 500 13px var(--lc-font); color: var(--lc-text-secondary); white-space: nowrap; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; background: var(--lc-dark-1); color: var(--df-bg-base); font: 600 12.5px/1 var(--lc-font); white-space: nowrap; }
.lp-chip i { width: 8px; height: 5px; border-radius: 1px; background: var(--lc-accent); flex: none; }

/* ── page furniture (shell §3) ── */
/* the prototype's ink ramp and page ground (allocation-v2 --la-*), named once for the LP shell so pages without .la-page
   read the same values */
.lp-app { --lp-ink: #191918; --lp-ink-2: #3f3f3d; --lp-ink-3: #555553; --lp-hair: #e5e5e5; --lp-page-bg: #ffffff; --lp-elev: #f5f5f5; --lp-gold-deep: #8a5e07;
  --lp-btn-line: var(--df-border); --lc-surface-page: var(--lp-page-bg); }
body:has(> .lp-app) { --lp-page-bg: #ffffff; background: var(--lp-page-bg); }
.lp-lede { font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); max-width: 760px; margin: 6px 0 0; }
.lp-lede b { font: 600 .96em var(--lc-font-mono); letter-spacing: -.01em; color: var(--lp-ink); }
/* the confidentiality line sits in the content column, as the prototype's .lpc-conf does inside the page */
#lpFooter { padding: 0 var(--lc-space-6); }
.lp-footer { font-size: 12px; line-height: 1.5; color: var(--lp-ink-3); padding: 4px 0 16px; max-width: 920px; margin: 0; }
@media (max-width: 768px) { #lpFooter { padding: 0 var(--lc-space-4); } }

/* buttons: the prototype's .la-btn (13px, 6px corner, 9px 14px, one hairline) on LP pages only — reset.css .lc-btn stays
   as it is for every other page (ruling 2026-10-07, rows 0.6 / 0.7) */
.lp-app .lc-btn { font-size: 13px; font-weight: 500; line-height: normal; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--lp-btn-line); }
.lp-app .lc-btn--primary { border-color: var(--lc-btn-primary-bg); }
.lp-app .lc-btn--secondary, .lp-app .lc-btn--ghost { background: var(--lc-bg-surface); color: var(--lp-ink); border-color: var(--lp-btn-line); }
.lp-app .lc-btn--ghost::after { display: none; }
.lp-app .lc-btn:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
/* five-layer KPI tile (shell §3; contracts A7): display:grid is required — allocation-v2.css makes the cell flex */
.lp-strip .la-econ__cell.lp-cell { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
/* a strip folded to one column draws its hairlines between cells, never above the first (prototype lpc.css ≤480px) */
.lp-app .la-econ > .la-econ__cell:first-child { border-top: 0; }
.lp-link { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; font: 600 12.5px/16px var(--lc-font); color: var(--lc-text); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; white-space: nowrap; }
.lp-link:hover, .lp-link:focus-visible { text-decoration-color: currentColor; }
.lp-link:focus-visible { outline: 2px solid var(--lc-text); outline-offset: 2px; }
.lp-link--risk { color: #A8443E; }

/* ── forms (sign-in, settings, team) ── */
.lp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-field__l { font: 600 12.5px var(--lc-font); color: var(--lc-text-secondary); }
.lp-field__hint { font-size: 12px; color: #555; line-height: 1.4; }
.lp-input { appearance: none; -webkit-appearance: none; font: 500 13px var(--lc-font); color: var(--lc-text); border: 1px solid var(--df-border); border-radius: 6px; padding: 8px 12px; background: #fff; outline: none; min-width: 0; width: 100%; box-sizing: border-box; }
.lp-input::placeholder { color: #777; }
.lp-input:focus-visible { border-color: var(--lc-text); outline: 2px solid var(--lc-text); outline-offset: 1px; }
.lp-input.is-locked, .lp-input[readonly] { background: #f5f5f5; color: var(--lc-text-secondary); }
.lp-err { font: 500 12.5px var(--lc-font); color: #A8443E; }
.lp-err:empty { display: none; }
.lp-acts { display: flex; gap: 8px; }
.lp-tag { display: inline-block; margin-left: 10px; font: 500 12px/1 var(--lc-font); color: var(--lc-accent-ink); border: 1px solid var(--lc-accent); border-radius: 4px; padding: 3px 6px; vertical-align: 1px; white-space: nowrap; }

/* ── View as LP: the lender looking through one LP's eyes (shell §5; prototype .lpc-shadow) ── */
.lp-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 24px; background: var(--lc-dark-1); color: var(--df-bg-base); font: 400 12.5px/1.45 var(--lc-font); }
.lp-banner b { font-weight: 600; }
.lp-banner__exit { appearance: none; -webkit-appearance: none; flex: none; font: 500 12.5px var(--lc-font); color: var(--df-bg-base); background: transparent; border: 1px solid rgba(255,254,242,.5); border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.lp-banner__exit:hover { background: rgba(255,254,242,.12); border-color: var(--df-bg-base); }
.lp-banner__exit:focus-visible { outline: 2px solid var(--df-bg-base); outline-offset: 2px; }

/* ── narrow screens (shell §2.4, §7.8). The ≤1024px drawer and the ≤860px page-name-only breadcrumb are plan 01's
   app-shell.css / app-shell.js; the LP topbar only drops the lender name and tightens the banner. ── */
@media (max-width: 860px) {
  .lp-lender { display: none; }
  .lp-banner { padding: 8px 16px; }
}

/* ── the page's one as-of (contracts A12) in the prototype's box (allocation-v2 .la-asof), whatever page CSS it sits on ── */
.lp-app .la-asof { font: 500 12px/1 var(--lc-font-mono); letter-spacing: 0; color: var(--lp-ink-2); white-space: nowrap; border: 1px solid var(--df-border); border-radius: 6px; padding: 11px 12px; background: var(--lc-bg-surface); }
.lp-app .la-asof b { color: var(--lp-ink); font-weight: 600; }

/* ── a panel's head: title and sub left, its tools right (prototype .lpc-phead) ── */
.lp-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-phead__t { min-width: 0; flex: 1 1 420px; }
.lp-phead__t .la-panel__sub { max-width: 640px; }
.lp-phead__tools { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.lp-phead__tools .bk-search { margin-left: 0; }
@media (max-width: 860px) { .lp-phead__tools { flex: 1 1 100%; } }

/* ── tabs under a page head (Settings: General | Team; prototype lpc.css .lpc-tabs) ── */
.lp-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--df-border); }
.lp-tabs button { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 10px 14px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 500 14px/1.2 var(--lc-font); color: var(--lp-ink-3); cursor: pointer; }
.lp-tabs button:hover { color: var(--lp-ink); }
.lp-tabs button.active { color: var(--lp-ink); font-weight: 600; border-bottom-color: var(--lp-ink); }
.lp-tabs button:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: -2px; border-radius: 4px; }
.lp-tabs button[hidden], .lp-tabbody[hidden] { display: none; }
.lp-tabbody { margin-bottom: 20px; }

/* ── Settings panels: the prototype's .la-panel (white, one hairline, no coloured edge; style-guide §3).
   --lc-bg-surface resolves to #fff inside .lc-main, where every panel lives. ── */
.lp-setpanel { background: var(--lc-bg-surface); border: 1px solid var(--df-border); border-radius: var(--lc-radius-md); padding: 18px 20px 16px; margin-bottom: 16px; min-width: 0; }
.lp-setpanel .la-panel__title { font: 600 15px/1.3 var(--lc-font); color: var(--lp-ink); }
.lp-setpanel .la-panel__sub { font-size: 13px; line-height: 1.45; color: var(--lp-ink-2); margin-top: 3px; }
.lp-setpanel > .lc-btn, .lp-setpanel #lpTeamInvite > .lc-btn { margin-top: 12px; }

/* ── sign-in and accept-invite: no sidebar, no topbar (shell §4.1; prototype .lpc-sign) ── */
/* the prototype's auth mode: a white body, the content ground in the brand cream (#fffef2 = --df-bg-base) with no padding of
   its own, and the column centred inside it */
body.lp-signin-body { --lp-sign-body: #ffffff; --lp-sign-ink-3: #555553; margin: 0; min-height: 100vh; background: var(--lp-sign-body); }
.lp-signin-main { display: flex; min-height: 100vh; padding: 0; background: var(--df-bg-base); }
.lp-signin { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 48px 16px; box-sizing: border-box; }
.lp-sign { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.lp-sign__brand { color: var(--df-text-primary); }
.lp-sign__card { background: #fff; border: 1px solid var(--df-border); border-radius: var(--lc-radius-md); padding: 28px 28px 24px; display: flex; flex-direction: column; align-items: flex-start; }
.lp-sign__h { margin: 18px 0 0; font: 600 22px/1.25 var(--lc-font); letter-spacing: -.02em; color: var(--lc-text); text-wrap: balance; }
.lp-sign__p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--lc-text-secondary); }
.lp-sign__p b { font-weight: 600; color: var(--lc-text); overflow-wrap: anywhere; }
.lp-sign__form { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.lp-sign__in { font-size: 14px; padding: 10px 12px; }
.lp-sign__go { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; text-decoration: none; text-align: center; box-sizing: border-box; }
/* the prototype's button (la-btn la-btn--primary): an ink border and a 6px corner, on this page only (ruling 2026-10-06) */
.lp-sign .lc-btn.lp-sign__go { border: 1px solid var(--lc-btn-primary-bg); border-radius: 6px; padding: 11px 16px; font-size: 14px; font-weight: 500; line-height: normal; }
.lp-sign__alt { margin-top: 16px; }
.lp-sign__help { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--lc-text-secondary); }
.lp-sign__gap { margin-top: 20px; }
.lp-sign__foot { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--lp-sign-ink-3); }
.lp-sign__code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lp-sign__digit { text-align: center; font: 600 20px/1 var(--lc-font-mono); padding: 12px 0; }
.lp-sign__alts { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 16px; }
.lp-sign__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lc-text-secondary); }
.lp-sign__note:empty { display: none; }
.lp-sign__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 420px) { .lp-sign__pair { grid-template-columns: minmax(0, 1fr); } }

/* ── Settings › Profile (prototype .lpc-setcard / .lpc-setgrid) ── */
.lp-setcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--df-border); border-radius: 8px; margin-bottom: 16px; }
.lp-setcard__av { width: 44px; height: 44px; font-size: 15px; flex: none; }
.lp-setcard__who { display: grid; gap: 2px; min-width: 0; }
.lp-setcard__who b { font: 600 15px/1.3 var(--lc-font); color: var(--lc-text); }
.lp-setcard__who span:not(.lp-tag) { font-size: 13px; color: var(--lc-text-secondary); overflow-wrap: anywhere; }
.lp-setcard__who .lp-tag { margin-left: 0; justify-self: start; margin-top: 4px; }
.lp-setgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lp-setform .lp-acts { margin-top: 16px; }
.lp-setform .lp-err { margin-top: 8px; }
@media (max-width: 720px) { .lp-setgrid { grid-template-columns: minmax(0, 1fr); } }

/* ── Settings › Access & Security (prototype .lpc-see / .lpc-pwform) ── */
.lp-seelist { border-top: 1px solid var(--df-border); }
.lp-see { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--df-border); }
.lp-see__n { font: 600 14px/1.35 var(--lc-font); color: var(--lc-text); }
.lp-see__d { font-size: 12.5px; line-height: 1.5; color: var(--lc-text-secondary); margin-top: 1px; max-width: 760px; }
.lp-see__r { display: flex; align-items: center; gap: 14px; flex: none; }
.lp-see__s { font: 500 12.5px var(--lc-font); color: #555; }
.lp-pwform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: start; margin-top: 14px; }
.lp-pwform .lp-acts, .lp-pwform .lp-err, .lp-pwform__note { grid-column: 1 / -1; }
.lp-pwform__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lc-text-secondary); }
@media (max-width: 720px) { .lp-see { grid-template-columns: minmax(0, 1fr); } .lp-pwform { grid-template-columns: minmax(0, 1fr); } }

/* ── My Team (prototype .lpc-member / .lpc-members__list--settings) ── */
.lp-members { list-style: none; margin: 0 0 10px; padding: 0; }
.lp-member { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--df-border); font-size: 13px; }
.lp-member__n { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--lc-text); }
.lp-member__n .lp-tag { margin-left: 0; }
.lp-member__t { color: var(--lc-text-secondary); min-width: 0; overflow-wrap: anywhere; }
.lp-member__l { color: #555; font-size: 12.5px; white-space: nowrap; }
.lp-member__acts { display: flex; gap: 14px; justify-content: flex-end; }
.lp-member__acts:empty { display: none; }
.lp-teamnote { font-size: 12.5px; line-height: 1.5; color: #555; margin: 14px 0 0; }
@media (max-width: 720px) { .lp-member { grid-template-columns: 1fr; gap: 2px; } .lp-member__acts { justify-content: flex-start; } }
.lp-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px 16px; align-items: end; margin-top: 4px; }
.lp-invite .lp-err { grid-column: 1 / -1; }
.lp-invite__open { margin-top: 12px; }
@media (max-width: 1024px) { .lp-invite { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-invite .lp-acts { grid-column: 1 / -1; } }
@media (max-width: 720px) { .lp-invite { grid-template-columns: minmax(0, 1fr); } }

/* 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; }

/* P-3 (QA): the one line under a KPI strip that says why its figures do not add up the obvious way (Loan Lifecycle,
   Loan Risk & Yield) - the page's caption type, words only */
.lp-strip-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--lc-text-tertiary); }
