/* ==========================================================================
   HADDON — client intake questionnaire
   Loaded after main.css. Reuses its tokens, buttons and pill controls; adds
   the step layout, the card-style choices and the review screen.
   ========================================================================== */

.intake-page{min-height:100vh;display:flex;flex-direction:column}
.iwrap{flex:1;width:min(780px,100% - var(--gut) * 2);margin-inline:auto;padding:calc(var(--hdr) + 48px) 0 80px}
.iwrap__in{width:min(780px,100% - var(--gut) * 2);margin-inline:auto}

/* ---------- header ---------- */
.ihdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--glass);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.ihdr__in{
  width:min(1000px,100% - var(--gut) * 2);margin-inline:auto;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.ihdr__act{display:flex;align-items:center;gap:14px}
.saved{
  font-size:.74rem;letter-spacing:.06em;color:var(--muted);
  opacity:0;transition:opacity .4s var(--ease);
}
.saved.is-on{opacity:1}

.iprog{height:2px;background:var(--line)}
.iprog i{
  display:block;height:100%;width:0;background:var(--grad);
  transition:width .5s var(--ease);
}

/* ---------- intro ---------- */
.istart{padding:clamp(16px,4vw,48px) 0}
.istart__h1{
  font-family:var(--ff-d);font-weight:500;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(2.2rem,5.4vw,3.6rem);
}
.istart__lede{
  margin-top:24px;max-width:54ch;font-size:var(--fs-lede);color:var(--txt-2);line-height:1.75;
}
.istart__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);
  margin:clamp(32px,4vw,44px) 0;
}
.istart__facts li{
  padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);
}
.istart__facts b{display:block;font-family:var(--ff-d);font-weight:500;font-size:.98rem}
.istart__facts span{display:block;font-size:.82rem;color:var(--muted);margin-top:4px}
.istart__cta{display:flex;gap:12px;flex-wrap:wrap}
.istart__alt{margin-top:26px;font-size:.86rem;color:var(--muted)}
.istart__alt a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---------- step chrome ---------- */
.istep__head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(26px,3.5vw,40px)}
.istep__count{display:flex;align-items:baseline;gap:5px;font-size:.82rem;color:var(--muted);flex:none}
.istep__count b{font-family:var(--ff-d);font-size:1.5rem;font-weight:500;color:var(--txt);letter-spacing:-.03em}
.istep__dots{display:flex;gap:5px;flex:1}
.istep__dots li{
  flex:1;height:3px;border-radius:3px;background:var(--line-2);
  transition:background .4s var(--ease);
}
.istep__dots li.is-done{background:var(--grad)}
.istep__dots li.is-on{background:var(--blue)}

/* ---------- steps ---------- */
.istep{display:none}
.istep.is-active{display:block;animation:stepIn .45s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.istep.is-back.is-active{animation-name:stepBack}
@keyframes stepBack{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.istep__h{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;line-height:1.15}
.istep__note{margin-top:12px;color:var(--txt-2);font-size:.98rem;line-height:1.7;max-width:56ch}
.istep > *:not(.istep__h):not(.istep__note){margin-top:22px}
.ihint{
  font-size:.84rem;color:var(--muted);line-height:1.6;
  padding-left:14px;border-left:2px solid var(--line-2);
}

/* ---------- fields ---------- */
.irow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.irow > *{margin-top:0 !important}

.ifield{position:relative}
.ifield input,.ifield textarea{
  width:100%;padding:24px 15px 10px;border-radius:var(--r);background:var(--surf);
  border:1px solid var(--line);font-size:.96rem;resize:vertical;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.ifield textarea{padding-top:28px;line-height:1.65;min-height:88px}
.ifield label{
  position:absolute;left:16px;top:17px;font-size:.94rem;color:var(--muted);
  pointer-events:none;transform-origin:0 50%;
  transition:transform .24s var(--ease),color .24s var(--ease);
}
.ifield label span{font-size:.82em;opacity:.8}
.ifield input:focus,.ifield textarea:focus{outline:none;border-color:var(--blue)}
.ifield input:focus + label,.ifield input:not(:placeholder-shown) + label,
.ifield textarea:focus + label,.ifield textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.76);color:var(--blue);
}
.ifield.is-bad input,.ifield.is-bad textarea{border-color:#F87171}

/* ---------- pill choices (reuses .pick from main.css) ---------- */
.ipick{display:flex;flex-wrap:wrap;gap:8px}
.ipick legend{
  width:100%;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:12px;
}
.ipick legend span{text-transform:none;letter-spacing:0;color:var(--muted);font-size:.92em}
.ipick.is-bad legend{color:#F87171}

/* ---------- card choices ---------- */
.icards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.icards legend{
  width:100%;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:12px;
}
.icards.is-bad legend{color:#F87171}
.icard{cursor:pointer}
.icard input{position:absolute;opacity:0;width:0;height:0}
.icard > span{
  display:block;padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--surf);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.icard > span b{display:block;font-family:var(--ff-d);font-weight:500;font-size:.97rem}
.icard > span em{display:block;font-style:normal;font-size:.82rem;color:var(--muted);margin-top:3px}
.icard:hover > span{border-color:var(--blue);transform:translateY(-2px)}
.icard input:checked + span{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue),0 8px 24px -14px rgba(30,136,255,.7);
}
.icard input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- range ---------- */
.irange{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.irange label{
  grid-column:1/-1;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);
}
.irange input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--line-2);outline-offset:6px;cursor:ew-resize;
}
.irange input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--grad);border:2px solid var(--surf);
  box-shadow:0 2px 10px rgba(30,136,255,.6);transition:transform .2s var(--ease);
}
.irange input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.irange input[type=range]::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;background:#1E88FF;border:2px solid var(--surf);
}
.irange output{
  font-family:var(--ff-d);font-size:1rem;font-weight:500;color:var(--blue);
  min-width:9ch;text-align:right;font-variant-numeric:tabular-nums;
}

/* ---------- privacy notice ---------- */
.inotice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);
  font-size:.88rem;color:var(--txt-2);line-height:1.65;
}
.inotice .ico{width:20px;height:20px;color:var(--blue);margin-top:1px;opacity:.85}

/* with nearly everything optional, mark what is required rather than
   labelling the rest — the inverse convention is far noisier */
.req{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);opacity:.9;
}

/* ---------- review ---------- */
.ireview{display:grid;gap:2px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.ireview__grp{background:var(--surf)}
.ireview__grp > h3{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  padding:16px 18px 8px;
}
.ireview__row{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:16px;
  width:100%;text-align:left;padding:11px 18px;
  border-top:1px solid var(--line);
  transition:background .2s var(--ease);
}
.ireview__row:hover{background:var(--bg-2)}
.ireview__row dt,.ireview__row .k{font-size:.85rem;color:var(--muted)}
.ireview__row dd,.ireview__row .v{font-size:.92rem;color:var(--txt);word-break:break-word}
.ireview__row .v--empty{color:var(--muted);font-style:italic}
.ireview__edit{
  grid-column:1/-1;justify-self:start;margin-top:6px;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);opacity:0;
  transition:opacity .2s var(--ease);
}
.ireview__row:hover .ireview__edit,.ireview__row:focus-visible .ireview__edit{opacity:1}

.iresult{margin-top:20px;font-size:.9rem;text-align:center;color:var(--muted)}
.iresult.is-bad{color:#F87171}
.iresult.is-busy{color:var(--blue)}

/* ---------- nav ---------- */
.istep__nav{
  display:flex;align-items:center;gap:16px;
  margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--line);
}
.istep__title{
  flex:1;text-align:center;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.istep__nav .btn{flex:none;min-width:120px}
.istep__nav .btn:disabled{opacity:.35;pointer-events:none}

/* ---------- done ---------- */
.idone{padding:clamp(40px,8vw,90px) 0;text-align:center}
.idone__tick{
  display:block;width:62px;height:62px;border-radius:50%;margin:0 auto 26px;
  background:var(--grad);position:relative;
  animation:tickPop .6s var(--ease) both;
}
.idone__tick::after{
  content:'';position:absolute;left:21px;top:17px;width:16px;height:28px;
  border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(42deg);
  animation:tickDraw .4s var(--ease) .3s both;
}
@keyframes tickPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tickDraw{from{opacity:0;height:0}to{opacity:1;height:28px}}
.idone h2{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.03em}
.idone p{margin-top:16px;color:var(--txt-2);font-size:var(--fs-lede);line-height:1.7;max-width:52ch;margin-inline:auto}
.idone__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- footer ---------- */
.iftr{border-top:1px solid var(--line);padding:24px 0 30px}
.iftr .iwrap__in{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);
}
.iftr a{color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .irow,.icards,.istart__facts{grid-template-columns:1fr}
  .ireview__row{grid-template-columns:1fr;gap:3px}
  .istep__nav{flex-wrap:wrap}
  .istep__title{order:-1;width:100%;flex:none;text-align:left}
  .istep__nav .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .istep.is-active{animation:none}
  .idone__tick,.idone__tick::after{animation:none}
}

/* ---------- required-field marker ----------
   Sits outside the floating label so it is visible before the field is
   touched — inside the label it only appeared once the label had moved,
   which is precisely when you no longer need telling. */
.ifield--req .req{
  position:absolute;top:9px;right:13px;pointer-events:none;
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);opacity:.7;transition:opacity .22s var(--ease);
}
.ifield--req:focus-within .req{opacity:1}
.ifield--req input,.ifield--req textarea{border-color:var(--line-2)}
/* a hairline accent so required fields read as a set at a glance */
.ifield--req::before{
  content:'';position:absolute;left:0;top:11px;bottom:11px;width:2px;
  border-radius:2px;background:var(--grad);opacity:.55;z-index:1;
}
.ifield--req.is-bad::before{background:#F87171;opacity:1}
.ifield--req.is-bad .req{color:#F87171;opacity:1}