/* Booking form and assessment flow. Structure ported from the original site's AssessmentFlow,
   re-skinned with the live site's --mk-* tokens (see mk.css). All classes are prefixed wf-. */

.wf-page{padding-block:calc(var(--mk-nav-h) + var(--mk-s-4)) var(--mk-pad)}
.wf-head{max-width:44rem;margin:0 auto var(--mk-s-5)}
/* Assessment intro: heading on the left, "Before we start" card on the right (stacked on narrow screens).
   Once she presses Begin the intro is hidden and the flow takes the full width, centred, so the
   questions read as a single focused column. */
.wf-split{display:grid;gap:var(--mk-s-3);align-items:start;padding-top:var(--mk-s-3)}
.wf-split .wf-head{margin-bottom:0;max-width:none}
.wf-split .wf-head h1{font-size:var(--mk-step-3);max-width:16ch}
.wf-split .wf-head .mk-lede{font-size:var(--mk-step-0)}
.wf-split .wf-flow{width:100%;margin-inline:0}
@media(min-width:56rem){
  .wf-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem)}
  .wf-split .wf-head{position:sticky;top:calc(var(--mk-nav-h) + var(--mk-s-3))}
  .wf-split .wf-flow{max-width:none}
}
.wf-split:has(.wf-intro[hidden]){grid-template-columns:1fr}
.wf-split:has(.wf-intro[hidden]) .wf-head{display:none}
.wf-split:has(.wf-intro[hidden]) .wf-flow{max-width:44rem;margin-inline:auto}
/* Result: score, reading and actions on the left, the per-area breakdown on the right, so the
   next steps are on screen without scrolling. Stacks on narrow screens with actions right
   under the reading. */
.wf-split:has(.wf-intro[hidden]):has(.wf-result) .wf-flow{max-width:66rem}
.wf-result{display:grid;gap:var(--mk-s-4)}
.wf-res-main{display:grid;gap:var(--mk-s-3);align-content:start}
.wf-res-side{display:grid;gap:var(--mk-s-2);align-content:start}
.wf-result .wf-actions,.wf-result .wf-res-sub{margin-top:0}
.wf-result .wf-soft{margin-bottom:0}
.wf-result .wf-risk{margin-top:0}
@media(min-width:56rem){
  .wf-result{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--mk-s-4) clamp(2rem,5vw,4.5rem);align-items:start}
  .wf-result .wf-soft,.wf-result .wf-risk,.wf-result .wf-disclaimer{grid-column:1 / -1}
  .wf-result .wf-ring{width:9.5rem;height:9.5rem}
  .wf-result .wf-res-head h2{font-size:var(--mk-step-2)}
  .wf-result .wf-disclaimer{margin-top:0}
}
.wf-head h1{font-family:var(--mk-font-heading);font-weight:var(--mk-h-weight);letter-spacing:var(--mk-h-track);font-size:var(--mk-step-4);line-height:1.08;margin:.4rem 0 .8rem}
.wf-head .mk-lede{color:var(--mk-muted);max-width:38rem}
.wf-flow{max-width:44rem;margin-inline:auto}
.wf-step[hidden]{display:none}
.wf-step{animation:wf-in .38s var(--mk-ease) both}
@keyframes wf-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wf-step{animation:none}}

/* intro */
.wf-intro{background:var(--mk-card-bg);color:var(--mk-card-fg);border-radius:var(--mk-radius-lg);padding:clamp(1.4rem,3.5vw,2.25rem);box-shadow:var(--mk-shadow-1)}
.wf-intro .mk-eyebrow{margin:0 0 .35rem}
.wf-intro h2{font-family:var(--mk-font-heading);font-size:var(--mk-step-2);line-height:1.15;margin:0 0 var(--mk-s-3)}
.wf-facts{list-style:none;padding:0;margin:0 0 var(--mk-s-3);display:grid;gap:.6rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.wf-facts li{display:grid;align-content:start;gap:.15rem;padding:.9rem 1rem;background:var(--mk-bg);border-radius:var(--mk-radius);color:var(--mk-muted);font-size:.9rem;line-height:1.3}
.wf-facts strong{font-family:var(--mk-font-heading);font-weight:var(--mk-h-weight);font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);white-space:nowrap;line-height:1;color:var(--mk-primary);letter-spacing:var(--mk-h-track)}
.wf-facts small{display:block;font-size:.8rem;opacity:.85}
@media(max-width:30rem){.wf-facts{grid-template-columns:1fr 1fr}.wf-facts li:first-child{grid-column:1 / -1}}
.wf-begin{width:100%;justify-content:center;padding-block:1em;font-size:var(--mk-step-1)}
.wf-begin-hint{margin:.7rem 0 0;text-align:center;font-size:.9rem;color:var(--mk-muted)}
.wf-intro-more{margin-top:var(--mk-s-3);padding-top:var(--mk-s-3);border-top:1px solid #f0cdb8;display:grid;gap:.9rem}
.wf-note,.wf-privacy{margin:0;color:var(--mk-muted);font-size:.92rem;line-height:1.5}
.wf-note strong{display:block;color:var(--mk-fg);font-weight:600;margin-bottom:.15rem}
.wf-intro .wf-error{margin-top:var(--mk-s-2)}

/* progress */
.wf-progress{height:4px;border-radius:2px;background:#f0cdb8;overflow:hidden}
.wf-progress span{display:block;height:100%;width:0;background:var(--mk-primary);transition:width .42s var(--mk-ease)}
.wf-progress-label{display:flex;justify-content:space-between;gap:1rem;margin:.7rem 0 var(--mk-s-4);font-size:.9rem;color:var(--mk-muted)}
.wf-progress-label b{font-weight:600;color:var(--mk-primary)}

/* question */
.wf-q{border:0;padding:0;margin:0;min-inline-size:0}
.wf-q legend{display:block;margin-bottom:var(--mk-s-3);padding:0}
.wf-q-text{display:block;font-family:var(--mk-font-heading);font-size:var(--mk-step-2);line-height:1.25;color:var(--mk-fg)}
.wf-q-help{display:block;margin-top:.6rem;color:var(--mk-muted);font-size:.95rem}
.wf-opts{display:grid;gap:.55rem}
.wf-opt{position:relative;display:block;cursor:pointer}
.wf-opt input{position:absolute;opacity:0;width:1px;height:1px}
.wf-opt-body{display:block;padding:1rem 1.2rem;min-height:56px;background:var(--mk-card-bg);border:1px solid #e6d3c4;border-radius:var(--mk-radius);transition:border-color var(--mk-dur) var(--mk-ease),background-color var(--mk-dur) var(--mk-ease),transform var(--mk-dur) var(--mk-ease)}
.wf-opt:hover .wf-opt-body{border-color:var(--mk-primary);transform:translateX(2px)}
.wf-opt input:checked+.wf-opt-body{border-color:var(--mk-primary);background:#fbeadf;font-weight:500}
.wf-opt input:focus-visible+.wf-opt-body{outline:3px solid var(--mk-primary);outline-offset:3px}
.wf-nav{margin-top:var(--mk-s-3);display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.wf-link{background:none;border:0;padding:0;font:inherit;color:var(--mk-link);text-decoration:underline;cursor:pointer}

/* crisis / helplines */
.wf-risk{margin-top:var(--mk-s-3);padding:1.2rem 1.4rem;border:1px solid var(--mk-primary);border-left-width:4px;border-radius:var(--mk-radius);background:#fbeadf}
.wf-risk h3{font-family:var(--mk-font-body);font-size:var(--mk-step-0);margin:0 0 .4rem}
.wf-risk p{color:var(--mk-muted);font-size:.95rem;margin:0}
.wf-risk ul{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.4rem}
.wf-risk li{font-size:.95rem;color:var(--mk-muted)}
.wf-risk a{color:var(--mk-link);font-weight:600;text-decoration:none}
.wf-risk .wf-risk-cta{margin-top:.8rem}

/* details + booking fields */
.wf-details h2,.wf-form h2{font-family:var(--mk-font-heading);font-size:var(--mk-step-2);margin:0 0 .6rem}
.wf-lede{color:var(--mk-muted);margin:0 0 var(--mk-s-3)}
.wf-fields{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.wf-field{display:grid;gap:.35rem}
.wf-field--full{grid-column:1 / -1}
.wf-field span{font-size:.9rem;color:var(--mk-muted)}
.wf-field input,.wf-field select,.wf-field textarea{width:100%;padding:.85rem 1rem;min-height:48px;font:inherit;color:var(--mk-fg);background:var(--mk-card-bg);border:1px solid #c9b3a2;border-radius:var(--mk-radius)}
.wf-field textarea{min-height:6rem;resize:vertical}
.wf-field input:focus-visible,.wf-field select:focus-visible,.wf-field textarea:focus-visible{outline:3px solid var(--mk-primary);outline-offset:2px}
.wf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wf-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:var(--mk-s-3)}
.wf-consent input{margin-top:.25rem;width:20px;height:20px;flex:none;accent-color:var(--mk-primary)}
.wf-consent span{font-size:.95rem;color:var(--mk-muted)}
.wf-error{margin-top:.9rem;color:#a3271a;font-size:.95rem;font-weight:500}
.wf-error[hidden]{display:none}
.mk-btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* result */
.wf-soft{padding:1.3rem 1.5rem;margin-bottom:var(--mk-s-4);background:#fbeadf;border-radius:var(--mk-radius)}
.wf-soft h3{font-family:var(--mk-font-body);font-size:var(--mk-step-1);margin:0 0 .4rem}
.wf-soft p{color:var(--mk-muted);margin:0}
.wf-soft a{color:var(--mk-link);font-weight:600}
.wf-res-head{display:grid;gap:clamp(1.2rem,4vw,2.4rem);align-items:center}
@media(min-width:40rem){.wf-res-head{grid-template-columns:auto 1fr}}
.wf-ring{position:relative;width:11rem;height:11rem}
.wf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wf-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.wf-ring-track{stroke:#f0cdb8}
.wf-ring-fill{stroke:var(--mk-primary)}
.wf-ring-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--mk-font-heading);font-size:var(--mk-step-4);line-height:1;color:var(--mk-fg);margin:0}
.wf-ring-of{font-size:.95rem;color:var(--mk-muted)}
.wf-res-head h2{font-family:var(--mk-font-heading);font-size:var(--mk-step-3);margin:.3rem 0 .5rem}
.wf-res-body{color:var(--mk-muted);margin:0}
.wf-res-sub{font-family:var(--mk-font-heading);font-size:var(--mk-step-1);margin:var(--mk-s-4) 0 var(--mk-s-2)}
.wf-pills{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.wf-pill{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem}
.wf-pill-label{font-weight:600}
.wf-pill-score{font-family:var(--mk-font-heading);color:var(--mk-primary)}
.wf-pill-score span{color:var(--mk-muted);font-size:.9rem}
.wf-pill-track{grid-column:1 / -1;height:6px;border-radius:3px;background:#f0cdb8;overflow:hidden}
.wf-pill-fill{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--mk-primary),#e8b9a3);transform-origin:left;animation:wf-pill .7s var(--mk-ease) both}
@keyframes wf-pill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.wf-pill-fill{animation:none}}
.wf-pill-band{grid-column:1 / -1;font-size:.9rem;color:var(--mk-muted)}
.wf-next{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.wf-next a{color:var(--mk-fg);text-decoration:none}
.wf-next a strong{color:var(--mk-link)}
.wf-next a:hover{text-decoration:underline}
.wf-actions{margin-top:var(--mk-s-4);display:flex;flex-wrap:wrap;gap:.8rem}
.wf-disclaimer{margin-top:var(--mk-s-4);padding-top:var(--mk-s-3);border-top:1px solid #e6d3c4;color:var(--mk-muted);font-size:.95rem}

/* success (booking) */
.wf-success{padding:1.5rem;background:var(--mk-card-bg);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-1)}
.wf-success h2{font-family:var(--mk-font-heading);margin:0 0 .5rem}

/* hub cards */
.wf-choices{display:grid;gap:var(--mk-s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.wf-choices .mk-card h2{font-family:var(--mk-font-heading);font-size:var(--mk-step-2);margin:.3rem 0 .4rem}
.wf-choices .mk-card p{color:var(--mk-muted)}
.wf-choices .mk-card .mk-btn{margin-top:var(--mk-s-2)}

/* prose pages (privacy) */
.wf-prose{max-width:44rem;margin-inline:auto}
.wf-prose h2{font-family:var(--mk-font-heading);font-size:var(--mk-step-2);margin:var(--mk-s-4) 0 var(--mk-s-2)}
.wf-prose p,.wf-prose li{color:var(--mk-fg)}