/* Health questionnaire form, layered on the b.well site system (styles.css).
   Reuses the site tokens: --paper, --ink, --sand, --line, --eye, --r, etc. */

.q-wrap{max-width:760px;margin:0 auto;padding:clamp(86px,10vh,118px) var(--mx) 80px;}
.q-head .eyebrow{color:var(--eye);}
.q-head h1{font-size:clamp(32px,5vw,56px);}
.q-head h1 .m{color:var(--turn);}
.q-head .lead{margin-top:20px;}
.q-head .fine{margin-top:14px;}

/* subsection heading inside a section (e.g. Emergency contact, Your medical team) */
.qsub{font-family:var(--statement);font-weight:700;font-size:22px;letter-spacing:-.015em;
  color:var(--ink);margin:36px 0 16px;}
.qsub:first-child{margin-top:4px;}

/* section: full-width block, text on the same left spine as the intro.
   padding-bottom:0 cancels the generic `section{padding-bottom:var(--sec)}` (48-80px) from
   styles.css:68 — the section's top margin + padding + divider already space the next heading. */
.qsec{border-top:1px solid var(--line);padding-top:clamp(14px,1.6vw,20px);padding-bottom:0;margin-top:clamp(20px,2.4vw,28px);}
.qsec-body > *:last-child{margin-bottom:0;}
.qbody{font-size:16.5px;line-height:1.62;color:#46423b;margin:0 0 14px;max-width:62ch;}
.qbody:last-child{margin-bottom:0;}
.qsec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;}
.qsec-head .qnum{font-family:var(--statement);font-weight:700;font-size:13px;letter-spacing:.16em;color:var(--eye);}
.qsec-head h2{font-size:clamp(23px,3vw,33px);}
.qsec-head h2 .m{color:#9C9A96;}
.qsec-body{margin-top:18px;}
.qintro{font-size:15px;line-height:1.6;color:var(--eye);margin:0 0 18px;}

/* generic field */
.qfield{margin:0 0 22px;break-inside:avoid;}
.qfield:last-child{margin-bottom:0;}
.qlab{display:block;font-family:var(--statement);font-weight:600;font-size:16px;line-height:1.4;color:var(--ink);margin-bottom:10px;}
.qlab.cond{font-weight:400;font-size:15px;color:var(--eye);}
.qlab .req{color:#a8a49c;font-weight:400;}
.inp{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);
  font-family:var(--serif);font-size:16px;padding:12px 14px;transition:border-color .2s;}
.inp:focus{outline:none;border-color:var(--sand);}
.inp::placeholder{color:#b3afa7;}
.inp-sm{max-width:140px;}
textarea.inp{resize:vertical;min-height:54px;}

/* radio / checkbox option boxes */
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;}
.optrow{display:flex;flex-wrap:wrap;gap:12px 30px;}
.optbox{position:relative;display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-family:var(--serif);font-size:16px;line-height:1.4;color:var(--ink);padding:3px 0;}
.optbox input{position:absolute;opacity:0;width:0;height:0;}
.optbox .box{flex:0 0 auto;width:26px;height:26px;border:2px solid #b9b5ac;background:#fff;margin-top:0;
  transition:border-color .15s,background .15s;}
.optbox input[type=radio] + .box{border-radius:50%;}
.optbox input[type=checkbox] + .box{border-radius:4px;}
.optbox:hover .box{border-color:var(--ink);}
.optbox input:focus-visible + .box{outline:2px solid var(--sand);outline-offset:3px;}
.optbox input:checked + .box{border-color:var(--ink);background:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.6l1.1-1.1L6.5 8.8 11.9 3.4 13 4.5z' fill='%23F1EFEC'/></svg>");
  background-size:15px;background-position:center;background-repeat:no-repeat;}
.optbox input[type=radio]:checked + .box{background-image:none;box-shadow:inset 0 0 0 4px #fff;}

/* 0-10 / 1-10 scale */
.scinline .scname{font-family:var(--statement);font-weight:600;font-size:16px;color:var(--ink);}
.scale{margin-top:10px;}
.scalecaps{display:flex;justify-content:space-between;font-family:var(--statement);font-weight:700;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--eye);margin-bottom:8px;}
.scalerow{display:flex;justify-content:space-between;gap:4px;}
.scaledot{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex:1;}
.scaledot input{position:absolute;opacity:0;width:0;height:0;}
.scaledot .dot{width:26px;height:26px;border:2px solid #b9b5ac;border-radius:50%;background:#fff;transition:.15s;}
.scaledot .dn{font-family:var(--statement);font-size:12px;color:var(--eye);width:24px;text-align:center;}
.scaledot:hover .dot{border-color:var(--ink);}
.scaledot input:focus-visible + .dot{outline:2px solid var(--sand);outline-offset:2px;}
.scaledot input:checked + .dot{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 4px #fff;}

/* yes/no/unsure matrix */
.mtx{width:100%;border-collapse:collapse;margin:0 0 26px;}
.mtx th{font-family:var(--statement);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--eye);padding:0 0 16px;text-align:center;width:74px;}
.mtx th.qh{text-align:left;width:auto;}
.mtx td{font-family:var(--serif);font-size:16.5px;color:var(--ink);padding:11px 0;border-top:1px solid var(--line);line-height:1.35;vertical-align:middle;}
.mtx td.c{text-align:center;}
.mcell{position:relative;display:inline-flex;cursor:pointer;}
.mcell input{position:absolute;opacity:0;width:0;height:0;}
.mcell .box{width:26px;height:26px;border:2px solid #b9b5ac;border-radius:50%;background:#fff;transition:.15s;}
.mcell:hover .box{border-color:var(--ink);}
.mcell input:focus-visible + .box{outline:2px solid var(--sand);outline-offset:2px;}
.mcell input:checked + .box{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 4px #fff;}

/* consent + validation + actions */
.consentfield{padding:16px 0;}
.optbox.consent .txt{font-size:15px;line-height:1.55;color:#2b2926;}
.qfield.invalid{outline:2px solid #d98b7d;outline-offset:6px;border-radius:6px;}
/* actions row: consent sits next to the submit button (consent left, button right) */
.q-actions{margin-top:32px;display:flex;align-items:center;gap:clamp(20px,3vw,40px);}
.q-actions .consentfield{flex:1 1 auto;padding:0;margin:0;}
.q-actions .btn{flex:0 0 auto;padding:16px 48px;font-size:14px;}
.q-actions .fine{margin-top:14px;}
@media(max-width:560px){.q-actions{flex-direction:column;align-items:stretch;gap:20px;}.q-actions .btn{align-self:flex-start;}}
#q-alert{margin:0 0 4px;}
.alert{border-radius:var(--r-sm);padding:13px 16px;margin-bottom:18px;font-family:var(--serif);font-size:15px;}
.alert.err{background:#f7e9e6;border:1px solid #e0b8af;color:#8a3d31;}

/* success state */
.q-done{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(32px,5vw,56px);text-align:center;}
.q-done .eyebrow{color:var(--sand);}
.q-done h2{font-size:clamp(28px,4vw,44px);}
.q-done h2 .m{color:var(--turn);}
.q-done p{margin:18px auto 0;max-width:52ch;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* footer: legal as written (lowercase website + proper-case copyright) */
.foot.dark .legal{text-transform:none;letter-spacing:0;font-size:12px;line-height:1.7;}
.foot.dark .foot-url{margin-top:4px;}

/* footer contact icons = the home-page closer icon-buttons, replicated exactly:
   54px ring, transparent fill, white glyph, 16px gap, "CONTACT" centred over the row.
   The .foot .contact a text-link rules (display:block, grey colour, margin) otherwise win
   on specificity and break the circles, so override them at .foot.dark .contact .icon-btn.
   Glyphs are normalised to one optical size via per-icon viewBox crops in index.html
   (WhatsApp/email 2 2 20 20, Instagram 0 0 24 24) rendered at a uniform 20px.
   Hover/focus/active = colour change ONLY (glyph + ring -> sand); icons stay visible,
   no background fill, no movement. */
/* footer = three zones: brand (left) | contact + icons (centred) | legal © + url (right).
   brand and legal both flex:1 so the contact column lands in the true page centre. */
.foot{padding-top:clamp(32px,4vh,44px);}
.foot .foot-in{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,48px);}
.foot-brand{flex:1 1 0;}
.foot .contact{flex:0 1 auto;text-align:center;}
.icon-row-foot{justify-content:center;gap:16px;margin-top:0;}
.foot-legal{flex:1 1 0;text-align:right;}
.foot-legal a{color:inherit;text-decoration:none;transition:color .2s;}
.foot-legal a:hover{color:var(--sand);}
@media(max-width:560px){.foot .foot-in{flex-direction:column;align-items:center;text-align:center;}.foot-legal{text-align:center;margin-top:26px;}}
.foot.dark .contact .icon-btn{display:inline-flex;margin:0;color:var(--white);
  background:transparent;border-color:rgba(245,244,241,.25);}
.foot.dark .contact .icon-btn svg{width:20px;height:20px;}
.foot.dark .contact .icon-btn:hover,
.foot.dark .contact .icon-btn:focus-visible,
.foot.dark .contact .icon-btn:active{background:transparent;border-color:var(--sand);
  color:var(--sand);transform:none;outline:none;}

@media(max-width:560px){
  .optgrid{grid-template-columns:1fr;}
  .scaledot .dot{width:22px;height:22px;}
  .mtx th{width:58px;font-size:10px;}
}