/* =========================================================================
   Thermal Dawn intake (/start/): PROTOTYPE styles, PRD D13, 30 Sep 2026
   Loaded by /start/ only, so nothing else on the site changes.
   Motion = WORKING "Web Designer" table B, PRD IF10: CSS only; lift on hover
   (hover devices), keyboard focus and press; selected stays lifted with a
   tick; reduced motion keeps border, shadow and tick only.
   ========================================================================= */

.intake-page{
  --iq-surface:#15100c;
  --iq-surface-2:#1b1511;
  --iq-line:rgba(255,255,255,.16);
  --iq-ink:#efe6de;
  --iq-muted:#a2968c;
  --iq-lift:0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--td-orange-rgb),.35);
  --iq-lift-sel:0 18px 44px rgba(0,0,0,.55), 0 0 22px rgba(var(--td-orange-rgb),.18);
  --iq-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---- layout: sidebar + form; on phones the sidebar folds into a strip under the form */
.intake-main{padding:28px 0 64px;}
.intake-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;}
@media (min-width:960px){
  .intake-layout{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:48px;}
  .intake-side{position:sticky;top:calc(var(--header-h) + 24px);}
}
.intake-side{order:2;background:var(--iq-surface);border:1px solid rgba(var(--td-orange-rgb),.3);border-radius:var(--radius);padding:22px;display:grid;gap:12px;align-content:start;}
@media (min-width:960px){.intake-side{order:0;}}
.side-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid rgba(var(--td-orange-rgb),.6);display:block;}
.side-line{margin:0;color:var(--iq-ink);font-weight:600;}
.side-talk{font-weight:800;color:var(--td-orange);}
.side-email{display:block;font-size:.85rem;color:var(--iq-muted);}
.side-offer{margin:0;font-size:.92rem;color:var(--iq-ink);}
.intake{max-width:720px;min-width:0;}

/* ---- no-JS: every question shows, results and step controls don't (SPEC rule 11) */
html:not(.js) .iq--jsonly,html:not(.js) .iq__jsonly,html:not(.js) .iq-progress{display:none !important;}
html:not(.js) .iq{margin:0 0 34px;}
.js .iq__nojs-submit{display:none;}
.js .iq__nojsonly{display:none;}
.js .intake.is-stepped .iq{display:none;}
.js .intake.is-stepped .iq.is-current{display:block;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.intake [hidden],.intake-side [hidden]{display:none !important;}   /* the hidden attribute wins over any display rule */

/* ---- frame */
.iq-progress{margin:0 0 26px;}
.iq-progress__top{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;margin-bottom:8px;}
.iq-progress__label{color:var(--td-orange);font-weight:700;}
.iq-progress__count{color:var(--iq-muted);}
.iq-progress__bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.iq-progress__bar li{font-size:.72rem;color:var(--iq-muted);padding-top:9px;border-top:4px solid var(--iq-line);border-radius:2px;}
.iq-progress__bar li.is-done,.iq-progress__bar li.is-on{border-top-color:var(--td-orange);color:var(--iq-ink);}
.iq__q{font-size:clamp(1.5rem,4.2vw,2.05rem);line-height:1.18;margin:0 0 10px;outline:none;}
.iq--intro .iq__q{font-size:clamp(1.8rem,5vw,2.6rem);}
.iq__coach{color:var(--iq-muted);margin:0 0 20px;max-width:60ch;}
.iq__err{color:#ffb4a3;font-weight:600;margin:10px 0 0;}
.iq__skip{margin:14px 0 0;color:var(--iq-muted);}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;color:var(--iq-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.linkbtn:hover{color:var(--td-orange);}
.linkbtn:focus-visible,.iq a:focus-visible{outline:3px solid var(--td-orange);outline-offset:3px;border-radius:4px;}

/* ---- fields */
.iq__fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 6px;}
.fld{display:grid;gap:6px;margin:12px 0 0;}
.fld > span{font-weight:600;color:var(--iq-ink);font-size:.92rem;}
.fld input,.fld textarea{width:100%;min-height:52px;padding:13px 15px;font:inherit;font-size:1.05rem;background:#0f0c0a;color:var(--iq-ink);border:1px solid var(--iq-line);border-radius:var(--radius-sm);}
.fld textarea{min-height:140px;resize:vertical;}
.fld input:focus,.fld textarea:focus{border-color:var(--td-orange);outline:none;box-shadow:0 0 0 3px rgba(var(--td-orange-rgb),.25);}
.fld input[aria-invalid="true"]{border-color:#ff8a70;}
.fld--pc{max-width:180px;}
.iq__consent{margin:22px 0 0;padding:16px;border:1px solid var(--iq-line);border-radius:var(--radius-sm);background:var(--iq-surface);}
.iq__consent p{margin:0 0 10px;}
.tick{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer;color:var(--iq-ink);}
.tick input{width:22px;height:22px;accent-color:var(--td-orange);}
.ph-link{color:var(--iq-muted);}

/* ---- the cards: real radios/checkboxes, lifted (table B) */
.cards{border:0;margin:0;padding:0;display:grid;gap:12px;}
.cards--chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.chips-legend{width:100%;font-weight:700;color:var(--iq-ink);margin:0 0 4px;padding:0;}
.card-opt{
  position:relative;display:grid;gap:4px;min-height:56px;padding:16px 52px 16px 18px;
  background:var(--iq-surface);border:1px solid var(--iq-line);border-radius:var(--radius-sm);
  color:var(--iq-ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .16s var(--iq-ease),box-shadow .16s var(--iq-ease),border-color .16s var(--iq-ease),background-color .16s var(--iq-ease);
}
.card-opt.chip{min-height:48px;padding:12px 16px;display:inline-flex;align-items:center;}
.card-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}   /* still focusable and read out */
.card-opt__t{font-weight:700;font-size:1.02rem;}
.card-opt__s{font-size:.9rem;color:var(--iq-muted);}
.card-opt__tick{position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;border:2px solid var(--iq-line);}
.card-opt__tick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid transparent;border-width:0 3px 3px 0;transform:rotate(45deg);}
@media (hover:hover){
  .card-opt:hover{transform:translateY(-4px);box-shadow:var(--iq-lift);border-color:rgba(var(--td-orange-rgb),.6);}
}
.card-opt:has(input:focus-visible){transform:translateY(-4px);box-shadow:var(--iq-lift);outline:3px solid var(--td-orange);outline-offset:2px;}
.card-opt:active{transform:translateY(-1px) scale(.99);transition-duration:.08s;}
.card-opt:has(input:checked){
  transform:translateY(-4px);box-shadow:var(--iq-lift-sel);
  border:2px solid var(--td-orange);background:var(--iq-surface-2);
}
.card-opt:has(input:checked) .card-opt__tick{background:var(--td-orange);border-color:var(--td-orange);}
.card-opt:has(input:checked) .card-opt__tick::after{border-color:#1c1514;}
.card-opt.chip:has(input:checked)::after{content:"✓";margin-left:8px;font-weight:800;color:var(--td-orange);}

/* ---- screen change: slide in 12 px + fade, 200 ms; Back reverses */
.js .iq.is-entering{animation:iqIn .2s var(--iq-ease) both;}
.js .iq.is-back{animation:iqBack .2s var(--iq-ease) both;}
@keyframes iqIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@keyframes iqBack{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}}

/* ---- S16: drop cards (Nick, 30 Sep: "more like Tractor") */
.uploads{display:grid;gap:18px;}
.upslot{background:var(--iq-surface);border:1px solid var(--iq-line);border-radius:var(--radius);padding:18px;}
.upslot__t{margin:0;font-weight:800;color:var(--iq-ink);font-size:1.05rem;}
.upslot__s{margin:4px 0 14px;color:var(--iq-muted);font-size:.92rem;}
.drop{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 16px;min-height:132px;
  border:2px dashed rgba(255,255,255,.22);border-radius:var(--radius-sm);background:rgba(255,255,255,.02);cursor:pointer;
  transition:border-color .16s var(--iq-ease),background-color .16s var(--iq-ease),transform .16s var(--iq-ease),box-shadow .16s var(--iq-ease);}
.drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.drop__icon{width:34px;height:34px;border-radius:50%;background:rgba(var(--td-orange-rgb),.15);position:relative;}
.drop__icon::before{content:"";position:absolute;left:50%;top:9px;width:2px;height:14px;margin-left:-1px;background:var(--td-orange);}
.drop__icon::after{content:"";position:absolute;left:50%;top:9px;width:9px;height:9px;margin-left:-5px;border:solid var(--td-orange);border-width:2px 0 0 2px;transform:rotate(45deg);}
.drop__main{color:var(--iq-ink);}
.drop__main strong{color:var(--td-orange);}
.drop__meta{color:var(--iq-muted);font-size:.82rem;}
@media (hover:hover){.drop:hover{border-color:rgba(var(--td-orange-rgb),.7);background:rgba(var(--td-orange-rgb),.06);}}
.drop:has(input:focus-visible){outline:3px solid var(--td-orange);outline-offset:2px;border-color:var(--td-orange);}
.drop.is-over{border-color:var(--td-orange);border-style:solid;background:rgba(var(--td-orange-rgb),.1);transform:translateY(-3px);box-shadow:var(--iq-lift);}
.drop.is-busy{opacity:.6;}
.drop__done{display:flex;align-items:center;gap:14px;padding:12px 14px;border:2px solid var(--td-orange);border-radius:var(--radius-sm);background:var(--iq-surface-2);}
.drop__thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none;}
.drop__file{flex:1;min-width:0;color:var(--iq-ink);font-weight:600;overflow-wrap:anywhere;}
.drop__name{display:block;}
.drop__name::before{content:"✓ ";color:var(--td-orange);}
.drop__size{display:block;font-weight:400;color:var(--iq-muted);font-size:.9em;}
.intake .btn:disabled,.intake .linkbtn:disabled{opacity:.55;cursor:wait;}
.upslot__later{margin-top:10px;}
.upslot__note{margin:0;padding:14px;border:1px dashed var(--iq-line);border-radius:var(--radius-sm);color:var(--iq-ink);}
html:not(.js) .drop__done{display:none;}
@media (prefers-reduced-motion:reduce){.drop,.drop.is-over{transform:none !important;transition:none !important;}}

/* ---- buttons */
.intake .btn{white-space:normal;text-align:center;line-height:1.3;justify-content:center;}   /* long SPEC labels wrap instead of overflowing */
.match-actions > *{min-width:0;}
.btn--ghost-light{background:transparent;color:var(--iq-ink);border:1.5px solid rgba(255,255,255,.4);}
.btn--ghost-light:hover{border-color:var(--td-orange);color:#fff;}
.intake a.btn--ghost-light,.intake a.btn--ghost-light:visited{color:var(--iq-ink);}   /* a site link colour otherwise wins */
.btn:focus-visible{outline:3px solid var(--td-orange);outline-offset:3px;}
.iq-nav{display:flex;gap:12px;justify-content:space-between;margin:28px 0 0;}
.iq-nav [data-continue]{margin-left:auto;}
.iq-nav .btn,.match-actions .btn{min-height:52px;}
.iq__nojs-submit{margin:10px 0 0;}
.iq-sending{margin:14px 0 0;color:var(--iq-ink);}

/* ---- match, done, closes */
.match-card{background:var(--iq-surface);border:1px solid rgba(var(--td-orange-rgb),.45);border-radius:var(--radius);padding:22px;margin:18px 0 22px;}
.match-card h3{margin:0 0 10px;font-size:1.2rem;}
.match-card p{margin:0 0 10px;}
.match-why{margin:0 0 12px;padding-left:1.1em;color:var(--iq-ink);}
.match-caveat{color:var(--iq-muted);font-size:.92rem;margin:0 !important;}
.match-actions{display:grid;gap:12px;justify-items:stretch;margin:6px 0 0;}
.match-actions .linkbtn{justify-self:start;}
.close-body{max-width:60ch;}
.done-list{padding-left:1.2em;}
.done-list li{margin:0 0 8px;}
.landlord{margin:10px 0 16px;}

/* ---- footer on every screen */
.iq-foot{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--iq-line);font-size:.9rem;}
.iq-foot p{margin:0 0 6px;}
.iq-foot__privacy{color:var(--iq-muted);font-size:.8rem;}

/* ---- reduced motion: meaning kept (border, shadow, tick), movement dropped */
@media (prefers-reduced-motion:reduce){
  .card-opt,.card-opt:hover,.card-opt:active,.card-opt:has(input:checked),.card-opt:has(input:focus-visible){transform:none !important;transition:none !important;}
  .js .iq.is-entering,.js .iq.is-back{animation:none !important;}
}
/* ---- Nick, 4 Oct: the live form, with only the type and box sizes tuned.
   Colours, orange outlines and motion are the live ones. */
.iq__q{font-size:clamp(1.35rem,3.2vw,1.65rem);font-weight:700;line-height:1.25;}
.iq--intro .iq__q{font-size:clamp(1.6rem,4vw,2.1rem);}
.iq__coach{font-size:.98rem;}
.card-opt{min-height:52px;padding:14px 48px 14px 16px;border-radius:6px;}
.card-opt.chip{min-height:46px;padding:11px 15px;}
.card-opt__t{font-size:1rem;}
.card-opt__s{font-size:.88rem;}
.fld input,.fld textarea{min-height:48px;padding:12px 14px;font-size:1rem;border-radius:6px;}
/* Back stays legible on hover (it turned to dark text on the dark form) */
.intake .btn--ghost-light:hover,.intake .btn--ghost-light:focus-visible{color:var(--iq-ink);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);}
/* The heating notes box (B2): a visible label, the example as hint text */
.fld--notes{display:grid;gap:6px;margin-top:18px;}
.fld--notes > label{font-weight:600;color:var(--iq-ink);font-size:.92rem;}
.fld__opt{font-weight:400;color:var(--iq-muted);}
.fld__hint{margin:0;font-size:.86rem;color:var(--iq-muted);}
.fld--notes textarea{min-height:96px;resize:vertical;}

/* Item 37: keep the primary start action; add a white-outline contact door. */
.iq-start-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
/* Heating choices (Nick, 4 Oct): one column; on desktop each card is one line,
   the subtitle to the right of the title. Phones keep the stacked cards. The
   contact card keeps its place. */
@media (min-width:720px){
  [data-screen="S7"] .card-opt{display:flex;align-items:baseline;gap:14px;min-height:48px;padding:12px 48px 12px 16px;}
  [data-screen="S7"] .card-opt__t{white-space:nowrap;flex:none;}
  [data-screen="S7"] .card-opt{min-width:0;}
  [data-screen="S7"] .card-opt__s{min-width:0;}   /* wraps only if the column is too narrow for one line */
}
