/* Client accounts & cabinet.
 *
 * Self-contained on purpose. These screens share the funnel's visual language (the same
 * brand tokens, the same Space Grotesk / Inter pairing, the same card and button shapes)
 * but NOT its stylesheet: formation-intake.css belongs to the render module, and a cabinet
 * that silently restyles itself when that file is refactored is worse than fifty duplicated
 * declarations.
 *
 * One exception: .lp-progress is the markup fixed by section 4D of the design contract and
 * is styled by both files. Keep the two in step.
 *
 * .lp-cta is the only block that ships inside an ordinary theme page; it sets no
 * typography of its own and inherits the page's.
 */

:root{
  --lp-violet:#6C1BAB;        /* primary brand colour */
  --lp-violet-deep:#4A1276;
  --lp-ink:#1A1229;
  --lp-surface:#F6F2FB;
  --lp-card:#FFFFFF;
  --lp-line:#E4D9F1;
  --lp-line-strong:#CDBBE6;
  --lp-muted:#6B6480;
  --lp-muted-2:#8E86A3;
  --lp-ok:#1E8E6A;
  --lp-danger:#B02A4A;
  --lp-focus:#B98CE6;
  --lp-radius:14px;
  --lp-radius-sm:9px;
  --lp-shadow:0 1px 2px rgba(26,18,41,.05), 0 10px 30px -18px rgba(76,18,118,.35);
  --lp-disp:"Space Grotesk", system-ui, sans-serif;
  --lp-body:"Inter", system-ui, sans-serif;
}

/* ---------- Document ---------- */
body.lp-acc{
  margin:0;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(108,27,171,.07), transparent 60%),
    var(--lp-surface);
  color:var(--lp-ink);
  font-family:var(--lp-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.lp-acc *{box-sizing:border-box}
body.lp-acc [hidden]{display:none !important}

.lp-wrap{max-width:920px;margin:0 auto;padding:0 20px 100px}
.lp-wrap--narrow{max-width:460px;padding-top:40px}

/* ---------- Header ---------- */
.lp-top{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg, rgba(246,242,251,.96), rgba(246,242,251,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lp-line);
}
.lp-top__inner{
  max-width:920px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.lp-brand{display:flex;align-items:center;text-decoration:none}
.lp-brand__logo{display:block;width:auto;height:44px}
.lp-top__user{display:flex;align-items:center;gap:14px;font-size:13px;min-width:0}
.lp-top__name{color:var(--lp-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.lp-top__logout{color:var(--lp-violet);text-decoration:none;font-weight:500;white-space:nowrap}
.lp-top__logout:hover{text-decoration:underline}

/* ---------- Headings ---------- */
.lp-h1{
  font-family:var(--lp-disp);font-weight:700;
  font-size:clamp(24px,3.4vw,34px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 14px;
}
.lp-intro{color:var(--lp-muted);margin:0 0 20px;font-size:14.5px}
.lp-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:40px 0 22px;
}
.lp-head .lp-h1{margin:0}
.lp-newapp{margin:0}

/* ---------- Cards ---------- */
.lp-card{
  background:var(--lp-card);border:1px solid var(--lp-line);
  border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);padding:26px;
}
.lp-card--form{padding:28px 26px 24px}
.lp-card--empty{text-align:center;padding:48px 26px;color:var(--lp-muted)}
.lp-card--empty p{margin:14px auto 0;max-width:42ch}

.lp-note{text-align:center}
.lp-note p{color:var(--lp-muted);margin:12px auto 0;max-width:44ch}
.lp-seal{
  display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(30,142,106,.1);color:var(--lp-ok);margin-bottom:14px;
}
.lp-seal--grey{background:rgba(107,100,128,.1);color:var(--lp-muted)}

.lp-chip{
  display:inline-block;margin:0 0 18px;padding:5px 12px;
  border:1px solid var(--lp-line-strong);border-radius:999px;
  font-size:12.5px;color:var(--lp-violet-deep);background:rgba(108,27,171,.05);
}

/* ---------- Alerts ---------- */
.lp-alert{
  margin:0 0 18px;padding:11px 14px;border-radius:var(--lp-radius-sm);
  background:rgba(176,42,74,.08);border:1px solid rgba(176,42,74,.28);
  color:var(--lp-danger);font-size:13.5px;
}

/* ---------- Forms ---------- */
.lp-form{margin:0}
.lp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.lp-field{margin-bottom:16px}
.lp-label{display:block;font-weight:500;font-size:13.5px;margin-bottom:6px}
.lp-req{color:var(--lp-violet);margin-left:2px}
.lp-hint{font-size:12px;color:var(--lp-muted);margin:5px 0 0;line-height:1.45}
.lp-field__err{font-size:12.5px;color:var(--lp-danger);margin:5px 0 0}

.lp-acc input[type=text],
.lp-acc input[type=email],
.lp-acc input[type=tel],
.lp-acc input[type=password]{
  width:100%;font-family:var(--lp-body);font-size:14px;color:var(--lp-ink);
  background:#fff;border:1.5px solid var(--lp-line-strong);border-radius:var(--lp-radius-sm);
  padding:10px 12px;transition:border-color .15s, box-shadow .15s;
}
.lp-acc input:focus{
  outline:none;border-color:var(--lp-violet);
  box-shadow:0 0 0 3px rgba(108,27,171,.14);
}
.lp-field.is-error input{border-color:var(--lp-danger)}

/* ---------- Phone: country picker (intl-tel-input v25) ----------
 * The library's own stylesheet is printed before this file, on the register screen only.
 * Every colour below is one of this file's tokens, so the kyclp skin re-colours the picker
 * through its token block and needs no rule of its own for it.
 *
 * The <input> itself keeps the rules above — border, radius, focus ring, error colour. The
 * library only writes an inline padding-left sized to the flag + dial-code button, measured
 * at init and on every country change, so the geometry here must not force a padding.
 */
.lp-acc .iti{
  --iti-border-color:var(--lp-line-strong);
  --iti-border-width:1.5px;              /* = the input's border: the button sits inside it */
  --iti-hover-color:var(--lp-surface);
  --iti-dialcode-color:var(--lp-muted);
  --iti-arrow-color:var(--lp-muted);
  --iti-dropdown-bg:var(--lp-card);
  --iti-search-icon-color:var(--lp-muted-2);
  --iti-spacer-horizontal:12px;
  display:block;width:100%;
}
.lp-acc .iti__selected-country{
  border-right:1px solid var(--lp-line);
  border-radius:calc(var(--lp-radius-sm) - 1.5px) 0 0 calc(var(--lp-radius-sm) - 1.5px);
}
.lp-acc .iti__selected-country-primary{
  padding:0 8px 0 12px;
  border-radius:inherit;
}
.lp-acc .iti .iti__selected-dial-code{
  margin:0 10px 0 0;
  font-size:14px;color:var(--lp-ink);
}
.lp-acc .iti__selected-country:focus-visible{
  outline:2px solid var(--lp-focus);outline-offset:-2px;
}

/* Inline dropdown (desktop). On phones the library uses its full-screen popup instead,
   appended to <body> — still inside .lp-acc, so the list rules below reach it too. */
.lp-acc .iti--inline-dropdown .iti__dropdown-content{
  margin-top:6px;
  border:1px solid var(--lp-line-strong);border-radius:var(--lp-radius-sm);
  box-shadow:var(--lp-shadow);
  overflow:hidden;z-index:30;
}
.lp-acc .iti--inline-dropdown .iti__country-list{max-height:240px}

/* The search box is an <input> too: undo the form-field rules (focus ring, error border). */
.lp-acc .iti__search-input,
.lp-field.is-error .iti__search-input{
  width:100%;
  font-family:var(--lp-body);font-size:14px;color:var(--lp-ink);
  background:var(--lp-card);
  padding:11px 12px 11px 32px;
  border:0;border-bottom:1px solid var(--lp-line);border-radius:0;
  box-shadow:none;
}
.lp-acc .iti__search-input:focus{outline:none;box-shadow:none;border-color:var(--lp-line)}
.lp-acc .iti__search-input + .iti__country-list{border-top:0}

.lp-acc .iti__country{font-size:13.5px;color:var(--lp-ink)}
.lp-acc .iti__dial-code{color:var(--lp-muted)}

/* ---------- Buttons ---------- */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--lp-body);font-size:14px;font-weight:600;line-height:1;
  padding:12px 20px;border-radius:var(--lp-radius-sm);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s, border-color .15s, transform .15s;
}
.lp-btn svg{display:block;flex:none}
.lp-btn--primary{background:var(--lp-violet);color:#fff}
.lp-btn--primary:hover{background:var(--lp-violet-deep)}
.lp-btn--ghost{background:#fff;border-color:var(--lp-line-strong);color:var(--lp-violet-deep)}
.lp-btn--ghost:hover{border-color:var(--lp-violet)}
.lp-btn:focus-visible{outline:3px solid var(--lp-focus);outline-offset:2px}
.lp-btn[disabled],.lp-btn.is-busy{opacity:.6;cursor:default;pointer-events:none}
.lp-form .lp-btn{width:100%;margin-top:4px}

.lp-meta{margin:14px 0 0;font-size:13.5px;color:var(--lp-muted);text-align:center}
.lp-meta a{color:var(--lp-violet);text-decoration:none;font-weight:500}
.lp-meta a:hover{text-decoration:underline}
.lp-meta .lp-btn{color:#fff}
.lp-meta .lp-btn:hover{text-decoration:none}

/* ---------- Application cards ---------- */
.lp-apps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lp-app{
  background:var(--lp-card);border:1px solid var(--lp-line);
  border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);padding:22px;
}
.lp-app__meta{display:grid;gap:7px;margin-bottom:18px}
.lp-app__row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lp-app__k{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lp-muted-2);min-width:120px;
}
.lp-app__v{font-family:var(--lp-disp);font-weight:600;font-size:15.5px}
.lp-app__go{margin-top:18px}

/* ---------- Progress bar ----------
 * Markup fixed by the design contract (section 4D); the funnel renderer styles the same
 * class names. The bar names the CURRENT step only — never the other four.
 */
.lp-progress{display:block}
.lp-progress__track{
  height:7px;border-radius:999px;background:var(--lp-line);overflow:hidden;
}
.lp-progress__bar{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--lp-violet),var(--lp-violet-deep));
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.lp-progress__label{
  margin-top:8px;font-size:12.5px;font-weight:500;color:var(--lp-violet-deep);
}
@media (prefers-reduced-motion:reduce){
  .lp-progress__bar{transition:none}
}

/* ---------- Footer ---------- */
.lp-foot{
  max-width:920px;margin:0 auto;padding:26px 20px 40px;
  border-top:1px solid var(--lp-line);
  font-size:12.5px;color:var(--lp-muted-2);
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .lp-grid-2{grid-template-columns:1fr}
  .lp-head{padding:28px 0 18px}
  .lp-newapp,.lp-newapp .lp-btn{width:100%}
  .lp-app__k{min-width:0;width:100%}
  .lp-app__go{width:100%}
  .lp-brand__logo{height:36px}
}

/* ---------- CTA (inside a theme page) ----------
 * Stands where the stage-1 entry form used to be, so it is the same card: the values
 * below are the .lp-fe card's from formation-entry.css. Keep the two in step — a page
 * switched back to the form with LP_FORMATION_ENTRY_MODE should not visibly jump.
 * Font family is inherited from the theme; only sizes and weights are set here.
 */
.lp-cta{
  display:grid;gap:20px;
  max-width:520px;
  margin:22px 0;
  padding:32px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #E4D9F1;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(26,18,41,.05), 0 18px 40px -28px rgba(76,18,118,.45);
  color:#1A1229;
}
.lp-cta p{margin:0}
.lp-cta__head{display:grid;gap:8px}
.lp-cta__title{
  color:#6C1BAB;
  font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.015em;
}
.lp-cta__note{color:#6B6480;font-size:13.5px;line-height:1.6}
.lp-cta__btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;box-sizing:border-box;
  background:#6C1BAB;color:#fff;text-decoration:none;
  font-size:15px;font-weight:600;line-height:1;
  padding:17px 26px;border-radius:10px;
  box-shadow:0 10px 24px -12px rgba(108,27,171,.7);
  transition:background .15s, transform .15s;
}
.lp-cta__btn:hover,.lp-cta__btn:focus{background:#4A1276;color:#fff;text-decoration:none}
.lp-cta__btn:hover{transform:translateY(-1px)}
.lp-cta__btn:focus-visible{outline:3px solid #B98CE6;outline-offset:2px}
.lp-cta__btn svg{display:block;flex:none}
.lp-cta__login{text-align:center;font-size:13.5px;color:#6B6480}
.lp-cta__login a{color:#6C1BAB;font-weight:600}
.lp-cta__foot{
  padding-top:16px;border-top:1px solid #E4D9F1;
  text-align:center;font-size:12.5px;color:#6B6480;
}
@media (max-width:480px){ .lp-cta{padding:24px 20px} }
@media (prefers-reduced-motion:reduce){ .lp-cta__btn{transition:none} .lp-cta__btn:hover{transform:none} }