/* IEMG Development: lead flow (dialog and inline). Load after site.css.
   Site tokens only, so light and dark both work. Markup comes from assets/js/lead-form.js. */

.lf [hidden],.lead-dialog [hidden]{display:none !important}
html.lead-open{overflow:hidden}

/* ---------- dialog ---------- */

.lead-dialog{
  width:calc(100% - 32px);max-width:560px;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  padding:0;border:0;border-radius:0;
  background:var(--bg);color:var(--ink);box-shadow:var(--shadow);
  overflow:auto;overscroll-behavior:contain;
}
.lead-dialog::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lead-dialog__inner{position:relative;padding:32px 40px 40px}
.lead-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;
  display:grid;place-items:center;padding:0;
  background:transparent;color:var(--ink-2);border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.lead-close:hover{color:var(--ink);border-color:var(--line-2)}
.lead-close svg{width:20px;height:20px}

/* ---------- inline ---------- */

.lead-inline{padding:36px 40px 40px;background:var(--bg)}

/* ---------- shared ---------- */

.lf{position:relative}
.lf-dots{display:flex;align-items:center;gap:6px;height:20px}
.lf-dots span{width:6px;height:6px;background:var(--line-2);transition:width .3s var(--ease-out),background-color .3s var(--ease-out)}
.lf-dots .is-on{width:18px;background:var(--gold)}
.lf-dots .is-done{background:var(--ink-3)}

.lf-title{
  margin:16px 0 0;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.lf-title:focus,.lf-done-text:focus{outline:none}

/* path chooser */
.lf-paths{display:grid;gap:12px;margin-top:24px}
.lf-path{
  display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;
  font:inherit;text-align:left;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:0;cursor:pointer;
  transition:border-color .25s var(--ease-out),background-color .25s var(--ease-out),transform .25s var(--ease-out);
}
.lf-path-icon{
  flex:0 0 48px;height:48px;display:grid;place-items:center;
  background:var(--bg-2);color:var(--ink-2);transition:color .25s var(--ease-out);
}
.lf-path:hover,.lf-path[aria-pressed="true"]{border-color:var(--gold)}
.lf-path:hover .lf-path-icon,.lf-path[aria-pressed="true"] .lf-path-icon{color:var(--gold)}
.lf-path[aria-pressed="true"]{background:var(--gold-tint)}
.lf-path:active{transform:translateY(1px)}
.lf-path-title{display:block;font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lf-path-line{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* fields */
.lf-field{min-width:0;margin:20px 0 0;padding:0;border:0}
.lf-title + .lf-field,.lf-title + .lf-pair > .lf-field{margin-top:24px}
.lf-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.lf-label{display:block;margin:0 0 8px;padding:0;font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.4;color:var(--ink-2)}
.lf-input{
  display:block;width:100%;height:48px;margin:0;padding:0 14px;
  font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);border-radius:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
html[data-theme="dark"] .lf-input{color-scheme:dark}
.lf-input::placeholder{color:var(--ink-2)}
.lf-input:hover{border-color:var(--ink-3)}
.lf-input:focus,.lf-input:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.lf-input[aria-invalid="true"]{border-color:var(--gold-ink)}
select.lf-input{
  padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 21px,calc(100% - 16px) 21px;background-size:5px 5px;background-repeat:no-repeat;
}
.lf-textarea{height:auto;min-height:112px;padding:12px 14px;line-height:1.55;resize:vertical}
.lf-help{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.lf-err{margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.4;color:var(--gold-ink)}

/* chips: markets (checkbox), lot and build (radio) */
.lf-chips{display:flex;flex-wrap:wrap;gap:8px}
.lf-chip{position:relative;display:inline-flex}
.lf-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lf-chip span{
  display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;
  font-size:14px;font-weight:500;line-height:1.3;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:0;cursor:pointer;
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out);
}
.lf-chip span:hover{border-color:var(--ink-3);color:var(--ink)}
.lf-chip input:checked + span{border-color:var(--gold);background:var(--gold-tint);color:var(--ink)}
.lf-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.is-invalid .lf-chip span{border-color:var(--gold-ink)}

/* address listbox */
.lf-combo{position:relative}
.lf-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;
  max-height:264px;overflow:auto;margin:0;padding:6px;list-style:none;
  background:var(--bg);border:1px solid var(--line-2);border-radius:0;box-shadow:var(--shadow);
}
.lf-list li{padding:10px 12px;font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
.lf-list li:hover,.lf-list li[aria-selected="true"]{background:var(--bg-2)}
.lf-opt-sub{font-size:13px;color:var(--ink-3)}

/* photos */
.lf-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.lf-add{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;
  font-size:14px;font-weight:500;color:var(--ink);
  border:1px solid var(--line-2);border-radius:0;cursor:pointer;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.lf-add svg{width:18px;height:18px;color:var(--gold)}
.lf-add:hover{border-color:var(--gold)}
.lf-file:focus-visible + .lf-add{outline:2px solid var(--gold);outline-offset:2px}
.lf-file:disabled + .lf-add{opacity:.5;cursor:not-allowed}
.lf-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.lf-thumbs:empty{display:none}
.lf-thumbs li{position:relative;width:72px;height:72px}
.lf-thumbs img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);border-radius:0}
.lf-thumb-x{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;
  display:grid;place-items:center;padding:0;
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:0;cursor:pointer;
}
.lf-thumb-x:hover{border-color:var(--ink)}
.lf-thumb-x svg{width:14px;height:14px}

/* contact step */
.lf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lf-consent{margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.lf-alert{
  margin:20px 0 0;padding:12px 14px;font-size:14px;line-height:1.5;color:var(--ink);
  background:var(--gold-tint);border:1px solid var(--gold);border-radius:0;
}

/* nav: primary button, then Back as a text link */
.lf-nav{display:flex;align-items:center;gap:24px;margin-top:32px}
.lf-next:disabled{opacity:.7;cursor:progress;transform:none}
.lf-back{padding:0 0 2px;font-family:var(--font-body);background:none;border:0;border-bottom:1px solid var(--gold);cursor:pointer}

/* success */
.lf-done-icon{
  width:48px;height:48px;display:grid;place-items:center;
  color:var(--gold);border:1px solid var(--gold);border-radius:0;
}
.lf-done-text{margin:20px 0 0;max-width:40ch;font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.55;color:var(--ink)}
.lf-finish{margin-top:28px}

/* ---------- motion ---------- */

@keyframes lead-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes lead-up{from{transform:translateY(100%)}}
@keyframes lead-fade{from{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .lead-dialog[open]{animation:lead-in .32s var(--ease-out)}
  .lead-dialog[open]::backdrop{animation:lead-fade .32s var(--ease-out)}
  .lf-step{animation:lead-fade .3s var(--ease-out)}
}
@media (prefers-reduced-motion: reduce){
  .lf-path,.lf-dots span,.lf-input,.lf-chip span{transition:none}
}

/* ---------- small screens: the dialog becomes a bottom sheet ---------- */

@media (max-width:640px){
  .lead-dialog{width:100%;max-width:none;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:0}
  .lead-dialog__inner{padding:28px 20px calc(28px + env(safe-area-inset-bottom))}
  .lead-dialog__inner::before{content:"";position:absolute;top:10px;left:50%;width:36px;height:4px;margin-left:-18px;background:var(--line-2)}
  .lead-close{top:12px;right:12px}
  .lead-inline{padding:24px 20px 28px}
  .lf-title{font-size:20px}
  .lf-pair{grid-template-columns:1fr}
  .lf-nav .btn{flex:1}
}
@media (max-width:640px) and (prefers-reduced-motion: no-preference){
  .lead-dialog[open]{animation-name:lead-up}
}