/* ====================================================================
   settr — Client login (simplified)
   Single centered form. No trust pane. Boxed inputs. Minimal chrome.
   ==================================================================== */

.lg-page .nav.lg-nav{ border-bottom: 1px solid var(--line); }
.lg-page .nav-cta-link{
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lg-page .nav-cta-link:hover{
  color: var(--fg);
  border-color: var(--line-strong);
  background: var(--canvas-tint);
}

/* ====================================================================
   Shell — single centered column
   ==================================================================== */
.lg-shell{
  padding: 96px 0 120px;
  background: var(--canvas-tint);
  border-bottom: 1px solid var(--line);
  min-height: calc(100vh - 200px);
}
.lg-shell .container{
  display: flex;
  justify-content: center;
}
.lg-card{
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

/* ====================================================================
   Form
   ==================================================================== */
.lf-form{
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.lf-head{
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.lf-back{
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 8px;
  transition: color .15s ease;
}
.lf-back:hover{ color: var(--fg); }

.lf-step{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.lf-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.lf-title .email{
  font-family: var(--font-mono);
  font-size: 0.5em;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0;
  vertical-align: middle;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-badge);
  background: var(--surface);
  display: inline-block;
  margin-top: 6px;
}

.lf-lede{
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 44ch;
}
.lf-lede strong{ color: var(--fg); font-weight: 500; }

/* ----- field: boxed input ----- */
.lf-field{
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
}
.lf-field .lf-k{
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0;
}
.lf-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lf-input-wrap:focus-within{
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg) 10%, transparent);
}
.lf-field.err .lf-input-wrap{
  border-color: var(--state-danger);
}
.lf-field.err .lf-input-wrap:focus-within{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--state-danger) 15%, transparent);
}
.lf-field input{
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg);
  background: transparent;
  border: 0;
  padding: 12px 14px;
  outline: none;
  width: 100%;
  letter-spacing: -0.005em;
}
.lf-field input::placeholder{ color: var(--faint); }
.lf-toggle{
  background: transparent;
  border: 0;
  padding: 0 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 100%;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.lf-toggle:hover{ color: var(--fg); }

.lf-hint{
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}
.lf-hint.err{ color: var(--state-danger); }

/* ----- forgot link inline with password label ----- */
.lf-label-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.lf-label-row .lf-link{
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.lf-label-row .lf-link:hover{
  color: var(--fg);
  text-decoration-color: var(--fg);
}

/* ----- submit ----- */
.lf-submit{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--fg);
  color: #FAFAF8;
  border: 1px solid var(--fg);
  padding: 13px 20px;
  border-radius: var(--r-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background .15s ease, opacity .15s ease;
  margin-top: 4px;
}
.lf-submit:hover:not(:disabled){ background: #2a2a2a; }
.lf-submit:disabled{ opacity: 0.55; cursor: not-allowed; }
.lf-submit.ghost{
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.lf-submit.ghost:hover:not(:disabled){
  background: var(--canvas-tint);
  border-color: var(--fg);
}

.lf-cta-row{
  display: flex; gap: 10px;
}
.lf-cta-row .lf-submit{ flex: 1; margin-top: 0; }

/* ----- divider with "or" ----- */
.lf-or{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lf-or::before,
.lf-or::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ----- SSO button ----- */
.lf-sso{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 12px 16px;
  border-radius: var(--r-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  transition: background .15s ease, border-color .15s ease;
}
.lf-sso:hover{ background: var(--surface); border-color: var(--fg); }

/* ----- foot ----- */
.lf-foot{
  display: flex;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  flex-wrap: wrap;
}
.lf-foot a{
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.lf-foot a:hover{ text-decoration-color: var(--fg); }

/* ----- banner ----- */
.lf-banner{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-btn);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--surface);
}
.lf-banner .dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  margin-top: 7px;
  flex: 0 0 6px;
}
.lf-banner.err{
  border-color: color-mix(in oklab, var(--state-danger) 35%, transparent);
  background: color-mix(in oklab, var(--state-danger) 5%, var(--surface));
}
.lf-banner.err .dot{ background: var(--state-danger); }
.lf-banner.err span:last-child{ color: var(--fg); }
.lf-banner.ok{
  border-color: color-mix(in oklab, var(--state-pos) 35%, transparent);
  background: color-mix(in oklab, var(--state-pos) 5%, var(--surface));
}
.lf-banner.ok .dot{ background: var(--state-pos); }
.lf-banner.ok span:last-child{ color: var(--fg); }

/* ----- sent-screen meta ----- */
.lf-sent{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  overflow: hidden;
}
.lf-sent-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 11px 14px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lf-sent-row:last-child{ border-bottom: 0; }
.lf-sent-row .k{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lf-sent-row .v{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg);
  word-break: break-all;
}

/* ----- rules list (reset password) ----- */
.lf-rules{
  display: flex; flex-direction: column; gap: 8px;
}
.lf-rules ul{
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-rules li{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-sans);
  transition: color .15s ease;
}
.lf-rules li.ok{ color: var(--fg); }
.lf-rules li .box{
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--ghost);
  flex: 0 0 16px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lf-rules li.ok .box{
  background: var(--state-pos);
  border-color: var(--state-pos);
  color: #FAFAF8;
}

/* ----- done mark ----- */
.lf-done-mark{
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--state-pos);
  color: #FAFAF8;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 720px){
  .lg-shell{ padding: 48px 0 64px; }
  .lf-title{ font-size: 26px; }
  .lf-cta-row{ flex-direction: column; }
}