/* Components for the Lendie Business Loan form.
   All visual values come from tokens.css — never hardcode a colour or size here. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-font);
  -webkit-text-size-adjust: 100%;
}

/* --- Header: wordmark, note and progress bar -----------------------------
   Taken from the reference's own stylesheet, not measured from a screenshot:

     .info-progress { display:grid; grid-template-columns:15% 70% }

   A grid, not a centred max-width band. The wordmark occupies the first 15%
   and the progress column the next 70%, leaving 15% clear on the right. That
   is why no fixed width or single percentage of mine matched at more than one
   window size. */
.lc-header {
  position: fixed;
  inset: 0 0 auto 0;
  padding: 2.5rem 0 0;
  background: var(--lc-bg);
  z-index: 10;
}
.lc-header__band {
  width: var(--lc-band-width);
  max-width: var(--lc-band-max);
  margin: 0 auto;
}
.lc-brand {
  display: block;
  height: var(--lc-size-logo);
  width: auto;
  max-width: 100%;
}
.lc-progress__note {
  margin-top: 1.375rem;
  font-size: var(--lc-size-note);
  color: var(--lc-note);
  text-align: center;
}
.lc-progress__track {
  margin-top: 1.25rem;
  height: var(--lc-progress-height);
  background: var(--lc-track);
  border-radius: 999px;
  overflow: hidden;
}
.lc-progress__fill {
  height: 100%;
  width: 0;
  background: var(--lc-blue);
  border-radius: 999px;
  transition: width var(--lc-transition);
}

/* Back is a plain text link beneath the wordmark, not a button in the action
   row (client feedback, LE1-T136). Sits in the header so it never competes
   visually with the primary action. */
.lc-header__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The reference leaves clear air between the wordmark and Back — ours was
     nearly touching. Measured off the reference at roughly 0.6rem. */
  gap: 0.6rem;
}
.lc-back {
  padding: 0;
  font: inherit;
  font-size: var(--lc-size-note);
  color: var(--lc-blue);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.lc-back:hover { text-decoration: underline; }
.lc-back:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }
.lc-back[hidden] { display: none; }

/* --- Page ---------------------------------------------------------------- */
.lc-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchored below the header rather than centred in the viewport: the
     reference puts the question at a fixed offset, so centring drifted it
     down as the page grew. */
  justify-content: flex-start;
  padding: 15rem var(--lc-gap-md) var(--lc-gap-xl);
  text-align: center;
}
.lc-question {
  font-size: var(--lc-size-question);
  font-weight: var(--lc-weight-question);
  color: var(--lc-text);
  margin: 0 0 2.3rem;
  line-height: 1.2;
}
.lc-hint {
  font-size: var(--lc-size-hint);
  color: var(--lc-muted);
  margin: 0 0 1.3rem;
}

/* --- Fields -------------------------------------------------------------- */
.lc-fields {
  width: 100%;
  max-width: var(--lc-content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.lc-field {
  width: var(--lc-field-container);
  max-width: 100%;
  margin-bottom: 1.125rem;  /* measured gap between fields */
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lc-field > .lc-input { width: var(--lc-field-width); max-width: 100%; }

/* An address needs more room than the name column: the doc's mockup shows a
   noticeably wider field. */
.lc-field--address { width: var(--lc-field-address); }
.lc-field--address > .lc-input { width: 100%; }

/* A build-state note, not page copy — deliberately quieter than .lc-hint so it
   does not read as instructions to the applicant. */
.lc-aside {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--lc-bound);
}

.lc-input {
  width: 100%;
  height: var(--lc-field-height);
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--lc-size-input);
  color: var(--lc-text);
  text-align: center;              /* the reference centres input text */
  background: var(--lc-surface);
  border: var(--lc-border-width) solid var(--lc-border);
  border-radius: var(--lc-radius-input);
  transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
}
/* Mask placeholder: consecutive underscores must read as one continuous rule,
   not separate dashes. DM Sans leaves side bearings on `_`, so pull them
   together — the reference shows unbroken lines. */
.lc-input--mask::placeholder {
  letter-spacing: -0.09em;
  color: var(--lc-text);
  opacity: 0.75;
}
/* No caret hack needed: on focus the mask becomes the value, so the caret sits
   naturally on the first digit slot. The placeholder only shows when the field
   is genuinely untouched and unfocused. */

.lc-input:focus {
  outline: none;
  border-color: var(--lc-blue);
  box-shadow: 0 0 0 3px rgb(26 109 255 / 0.15);
}
/* Error state: the reference turns the border AND the text red, with no
   message — the message is added only when the user tries to submit. */
.lc-input--invalid,
.lc-input--invalid:focus {
  border-color: var(--lc-required);
  color: var(--lc-required);
  box-shadow: none;
}
.lc-input--invalid::placeholder { color: var(--lc-required); opacity: 1; }

.lc-field__label {
  display: block;
  margin-top: var(--lc-gap-xs);
  font-size: var(--lc-size-label);
  color: var(--lc-muted);
  text-align: left;
}
/* Some pages label above the input rather than below — the reference does both,
   so it is per-field rather than global. */
.lc-field__label--above {
  margin-top: 0;
  margin-bottom: var(--lc-gap-xs);
  text-align: center;
  color: var(--lc-text);
}
.lc-required { color: var(--lc-required); }

.lc-error {
  margin-top: 0.5rem;
  font-size: var(--lc-size-label);
  color: var(--lc-required);
  min-height: 1rem;                /* reserve space so validation never shifts layout */
}

/* --- Radio lists ---------------------------------------------------------
   The choice list is NOT the fixed 13.2rem column the text inputs use: that is
   narrow enough to wrap the prompt, and centring each row put every bullet at a
   different x. The block sizes to its longest option and centres as a whole,
   while everything inside it shares one left edge. */
.lc-field--choice {
  width: auto;
  max-width: 100%;
  align-items: flex-start;
  text-align: left;
}
.lc-field--choice .lc-field__label {
  margin-bottom: var(--lc-gap-sm);
  text-align: left;
}
.lc-radio {
  display: flex;
  align-items: center;
  gap: var(--lc-gap-sm);
  padding: 0.35rem 0;
  font-size: 0.95rem;
  color: var(--lc-text);
  cursor: pointer;
}
.lc-radio input { accent-color: var(--lc-blue); margin: 0; }
@media (pointer: coarse) { .lc-radio { padding: 0.6rem 0; } }

select.lc-input { appearance: auto; cursor: pointer; text-align: left; }

/* --- OTP ----------------------------------------------------------------- */
.lc-otp {
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: 1.25rem;
}
.lc-link {
  display: block;
  margin: var(--lc-gap-sm) auto 0;
  padding: 0.25rem;
  font: inherit;
  font-size: var(--lc-size-label);
  color: var(--lc-blue);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Sliders -------------------------------------------------------------
   The reference presents the value as a large blue headline with the slider
   under it and the range captioned at the track's ends. There is no text box:
   the figure is output, the slider is the input. */
.lc-field--slider {
  width: var(--lc-slider-width);   /* wider than the standard field column */
  margin-bottom: 0;
}
.lc-amount {
  font-size: var(--lc-size-amount);
  font-weight: var(--lc-weight-amount);
  color: var(--lc-blue);
  line-height: 1;
  margin: 1.5rem 0 1.375rem;
  /* Tabular figures stop the headline juddering sideways as digits change
     width while dragging. */
  font-variant-numeric: tabular-nums;
}

/* `accent-color` cannot colour the track either side of the thumb
   differently, so the fill is a gradient driven by --lc-slider-pct, which the
   renderer updates on input. */
.lc-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--lc-slider-track);
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--lc-blue) 0 var(--lc-slider-pct, 50%),
    var(--lc-track) var(--lc-slider-pct, 50%) 100%);
  cursor: pointer;
}
.lc-slider:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 6px; }
.lc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--lc-slider-thumb);
  height: var(--lc-slider-thumb);
  border-radius: 50%;
  background: var(--lc-surface);
  border: 2px solid var(--lc-blue);
  box-shadow: 0 1px 3px rgb(22 32 46 / 0.25);
  cursor: pointer;
}
.lc-slider::-moz-range-thumb {
  width: var(--lc-slider-thumb);
  height: var(--lc-slider-thumb);
  border-radius: 50%;
  background: var(--lc-surface);
  border: 2px solid var(--lc-blue);
  box-shadow: 0 1px 3px rgb(22 32 46 / 0.25);
  cursor: pointer;
}
.lc-slider__bounds {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.3rem;
  font-size: var(--lc-size-bound);
  color: var(--lc-bound);
}

/* --- Buttons -------------------------------------------------------------
   Near-black navy, distinctly darker than the heading text. */
.lc-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.lc-btn {
  min-width: var(--lc-button-width);
  height: var(--lc-field-height);
  padding: 0 1.25rem;
  font-family: inherit;
  font-size: var(--lc-size-button);
  font-weight: 500;
  color: var(--lc-on-navy);
  background: var(--lc-navy);
  border: 0;
  border-radius: var(--lc-radius-button);
  cursor: pointer;
  transition: background var(--lc-transition);
}
.lc-btn:hover:not(:disabled) { background: var(--lc-navy-hover); }
.lc-btn:focus-visible { outline: 2px solid var(--lc-blue); outline-offset: 2px; }

/* Inactive until the page validates. A distinct grey palette with its own
   border, matching the reference — not a dimmed version of the navy. */
.lc-btn:disabled {
  background: var(--lc-btn-idle-bg);
  color: var(--lc-btn-idle-text);
  border: var(--lc-border-width) solid var(--lc-btn-idle-border);
  cursor: default;
}

/* Consent / legal copy under the primary action. Deliberately small and muted:
   it must be present and readable, without competing with the question. */
.lc-footnote {
  max-width: 22rem;          /* .disclosure, exact */
  margin: 2rem auto 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
}

/* --- Mobile --------------------------------------------------------------
   The design doc requires touch-friendly scaling; 44px is the tap-target floor. */
@media (max-width: 40rem) {
  :root { --lc-page-inset: 1.25rem; }
  .lc-header { padding-top: 1.25rem; }
  /* A 66% band wastes a third of a phone screen. The reference insets the
     wordmark and bar by about 1rem instead. */
  .lc-header__band { width: auto; margin: 0 1rem; }
  .lc-brand { height: 1.75rem; }
  .lc-progress__note { margin-top: 1.25rem; }
  .lc-progress__track { margin-top: 0.75rem; }
  /* The header is fixed, so this padding IS the gap between the progress bar
     and the question. At 9rem that gap measured 8px on a phone against 72px on
     desktop — the question sat jammed under the bar (Konrad, LE1-T156).
     13rem makes the two identical: the bar ends at 135.8px, +72.2px = 208px. */
  .lc-page { padding-top: 13rem; }
  .lc-question { font-size: 1.75rem; margin-bottom: 1rem; }
  .lc-hint { font-size: 1.0625rem; margin-bottom: 2rem; }
  .lc-fields { gap: 1.25rem; }
  .lc-actions { margin-top: 2.5rem; }
  .lc-btn { min-height: 44px; flex: 1; }
  .lc-actions { width: var(--lc-field-width); max-width: 100%; }
  /* "$1,000,000" at 3.25rem does not fit a 390px screen. */
  :root { --lc-size-amount: 2.25rem; --lc-size-bound: 1rem; }
}

/* --- Terminal page -------------------------------------------------------
   Design doc §6 puts the confirmation in a card, with the reassurance line in
   bold and the support number beneath the Finish button. */
.lc-card {
  width: 100%;
  max-width: var(--lc-content-max);
  padding: 3rem 2rem 2.5rem;
  background: var(--lc-surface);
  border-radius: var(--lc-radius-card);
}
.lc-page--done .lc-question { margin-bottom: 1.5rem; }
/* "You'll hear from us shortly." is the reassurance — the mockup sets it bold
   and in the body colour, unlike the muted hints elsewhere. */
.lc-page--done .lc-hint {
  font-weight: 700;
  color: var(--lc-text);
  margin-bottom: 0.75rem;
}
.lc-done__body { margin: 0 0 2rem; color: var(--lc-muted); }
.lc-done__contact { margin: 1.75rem 0 0; font-size: var(--lc-size-note); color: var(--lc-muted); }
.lc-done__tel { color: inherit; font-weight: 700; text-decoration: none; }
.lc-done__tel:hover { text-decoration: underline; }
/* Finish is a link styled as the primary button, so it needs the centring a
   <button> gets for free. */
a.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --- Address autocomplete ------------------------------------------------
   Our own suggestion list (ADR 0003) — no Google JavaScript in the page. */
.lc-field--address { position: relative; }
.lc-ac {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  text-align: left;
  background: var(--lc-surface);
  border: var(--lc-border-width) solid var(--lc-border);
  border-radius: var(--lc-radius-input);
  box-shadow: 0 6px 18px rgb(22 32 46 / 0.12);
}
.lc-ac[hidden] { display: none; }
.lc-ac__item {
  padding: 0.5rem 0.75rem;
  font-size: var(--lc-size-input);
  color: var(--lc-text);
  cursor: pointer;
}
/* Keyboard highlight and hover share one appearance, so arrowing down looks
   the same as pointing at a row. */
.lc-ac__item.is-active,
.lc-ac__item:hover { background: #eef4fc; }

/* A lookup in flight. Deliberately quiet — a spinner on every pause in typing
   is noise, but silence on a slow network reads as broken. */
.lc-input.is-loading {
  background-image: linear-gradient(90deg, transparent, rgb(0 101 204 / 0.12), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: lc-ac-sweep 900ms ease-in-out infinite;
}
@keyframes lc-ac-sweep {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-input.is-loading { animation: none; }
}

/* A link-button mid-cooldown: visibly inert without shifting the layout. */
.lc-link:disabled { color: var(--lc-bound); cursor: default; text-decoration: none; }

/* --- Searchable list (industry) -----------------------------------------
   Shares the dropdown styling with the address field; both use combobox.js. */
.lc-field--search { position: relative; width: var(--lc-field-search); }
.lc-field--search > .lc-input { width: 100%; }
/* "No matches" is a message, not a choice — it must not look clickable. */
.lc-ac__empty {
  padding: 0.5rem 0.75rem;
  font-size: var(--lc-size-input);
  color: var(--lc-bound);
  cursor: default;
}