/* ============================================================
   Dynamic storefront — additions on top of /styles.css.
   Everything generic (tokens, buttons, option cards, fields, checkout, success)
   comes from the shared sheet; this file only covers what the schema-driven
   renderer needs and the shared flows never had.
   ============================================================ */

/* Loading / unavailable states */
.sf-loading{min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:40px 22px;}
.sf-loading .processing-ring{margin:0;}
.sf-unavailable{min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 22px;}
.sf-unavailable .headline{margin-top:10px;}
.sf-unavailable .sub{max-width:420px;}
.sf-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px;}

/* Product hero */
.sf-hero-img{
  width:100%;max-width:280px;aspect-ratio:1/1;object-fit:contain;border-radius:22px;
  margin:6px auto 14px;display:block;background:var(--panel);
}
/* Left-aligned, not centred: GEN's descriptions are long-form prose, and centring ragged
   text on both edges is what made this read as a wall. Clamped to six lines with the same
   Read more the index cards use, so the price and the CTA stay above the fold. */
.sf-hero-desc{
  max-width:460px;margin:8px auto 4px;color:var(--muted);font-size:14px;line-height:1.55;
  text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.sf-hero-desc.open{display:block;-webkit-line-clamp:none;overflow:visible;white-space:pre-line;}
.sf-hero-more{margin:0 auto 14px;display:block;}

/* Schema-driven questions -----------------------------------------------------
   Type scale, and why it differs from the shared sheet's .field-label:

   A hand-built flow gives each question its own screen, so the question IS the Oswald
   headline and .field-label is only ever a short caption over an input — "MOBILE NUMBER",
   "PROMO CODE" — which is why that class is mono, all-caps and tracked out at .09em.

   A GEN section holds up to ten questions, so they cannot each be a headline, and GEN's
   labels are full sentences: this catalogue runs to 143 characters ("If you selected
   Chronic kidney disease, what stage…"). Set in caps mono a sentence that long becomes a
   shouting block that also fights the Oswald heading directly above it. So a question gets
   the body face in sentence case, one clear step above the option text under it, and
   .field-label is left to the captions it was drawn for (the signature prompt still uses it).

     section heading   Oswald  30    uppercase   .headline, from the shared sheet
     question          Inter   16/700 sentence   .q-label
     helper text       Inter   12.5   sentence   .q-help
     option            Inter   14.5/600          .opt .ttl                         */
.q-block{margin-bottom:24px;}
/* A GEN section often has no description, so without this the first question sits 8px
   under the Oswald heading and the two read as one block. The hand-built flows never show
   it because there a .sub line always separates the heading from the first control. */
.headline + .q-block,
.sf-section-desc + .q-block{margin-top:20px;}
.q-label{
  display:block;margin-bottom:10px;font-family:var(--body);font-size:16px;font-weight:700;
  line-height:1.45;letter-spacing:normal;text-transform:none;color:var(--ink);text-wrap:pretty;
}
.q-label .req{color:var(--teal);margin-left:2px;font-weight:700;}
.q-help{font-size:12.5px;color:var(--muted);margin:-4px 0 10px;line-height:1.5;}
/* Shown under an answer copied from the About You screen. */
.q-prefilled{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--teal);font-weight:600;}
.q-prefilled[hidden]{display:none;}
/* A section holding one question renders like a hand-built flow: the section title becomes
   the eyebrow and the question becomes the Oswald headline. Oswald is condensed, so a
   question past ~45 characters steps down rather than filling the screen. */
.headline.q-ask-long{font-size:25px;line-height:1.14;}

/* A follow-up is subordinate to the answer that revealed it, so it steps down a size. */
.q-child .q-label{font-size:15px;}
.q-child .q-help{font-size:12px;}
.q-unsupported{
  border:1px dashed var(--border-strong);border-radius:14px;padding:12px 14px;
  font-size:13px;color:var(--muted);line-height:1.45;background:var(--panel);
}
.q-unsupported b{color:var(--ink);}
.sf-section-desc{font-size:14px;color:var(--muted);margin:-6px 0 18px;line-height:1.5;}

/* File upload */
.upload-box{
  border:1.5px dashed var(--border-strong);border-radius:16px;padding:18px 16px;text-align:center;
  background:var(--panel);cursor:pointer;transition:border-color .18s ease, background .18s ease;
}
.upload-box:hover{border-color:var(--teal);}
.upload-box input[type=file]{display:none;}
.upload-box .upload-cta{font-weight:700;color:var(--teal);font-size:14px;}
.upload-box .upload-hint{font-size:12px;color:var(--muted);margin-top:4px;}
.upload-box.done{border-style:solid;border-color:var(--teal);}
.upload-name{font-family:var(--mono);font-size:12px;color:var(--ink);margin-top:8px;word-break:break-all;}
.upload-box.busy{opacity:.6;pointer-events:none;}
.upload-preview{max-width:140px;max-height:140px;border-radius:10px;margin:0 auto 8px;display:block;object-fit:cover;}

/* Success: requirement checklist */
.sf-req-list{width:100%;max-width:420px;margin:14px auto 0;text-align:left;}
.sf-req{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid rgba(var(--surface-rgb),0.08);font-size:13.5px;color:var(--ink);}
.sf-req:first-child{border-top:none;}
.sf-req .dot{width:18px;height:18px;border-radius:50%;flex:0 0 18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.sf-req.done .dot{background:var(--teal);color:var(--on-accent);}
.sf-req.todo .dot{border:2px solid var(--border-strong);}
.sf-req .lbl{flex:1;}
.sf-req .lbl small{display:block;color:var(--muted);font-size:12px;}

/* Conditional follow-ups ------------------------------------------------------
   GEN nests a question under the answer that triggers it (167 of them across this
   catalogue). A child is indented against a rule so the patient can see it belongs to
   the answer above; it is hidden with [hidden], never removed, so typing is not lost. */
.q-child{
  margin-left:14px;padding-left:14px;border-left:2px solid var(--border-strong);
  animation:sfReveal .22s ease both;
}
.q-child .q-child{margin-left:12px;padding-left:12px;}
@keyframes sfReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .q-child{animation:none;} }

/* Consent / disclosure prose (richtext). Long legal copy scrolls inside its own box so
   it never buries the control underneath it. */
.q-richtext{
  max-height:300px;overflow-y:auto;border:1px solid var(--border-strong);border-radius:14px;
  padding:14px 16px;background:var(--panel);font-size:13px;line-height:1.6;color:var(--ink);
  margin-bottom:12px;-webkit-overflow-scrolling:touch;
}
.q-richtext p{margin:0 0 9px;}
.q-richtext p:last-child{margin-bottom:0;}
.q-richtext strong,.q-richtext b{font-weight:700;}
.q-richtext ul,.q-richtext ol{margin:0 0 9px;padding-left:20px;}
.q-richtext li{margin-bottom:5px;}
.q-richtext li p{margin:0;}
.q-richtext a{color:var(--teal);text-decoration:underline;}
.q-richtext h1,.q-richtext h2,.q-richtext h3,.q-richtext h4{font-size:13.5px;font-weight:800;margin:12px 0 6px;}
.q-richtext hr{border:none;border-top:1px solid var(--border-strong);margin:10px 0;}

/* Screening ------------------------------------------------------------------
   An answer GEN marks disqualifying shows under that question and disables Continue,
   so the intake stops before the payment screen rather than after the charge. */
.q-disqualify:empty{display:none;}
.q-disqualify .alert{margin:10px 0 0;}
.q-disqualify .alert a{color:inherit;text-decoration:underline;}
/* Sits just above Continue, so a patient who has scrolled past the flagged answer still
   sees why the button is dead. The copy lives in the markup, not in a ::before — generated
   content can't be selected, read reliably by a screen reader, or translated. */
.sf-blocked{
  margin:4px 0 18px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.5;
  background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--ink);
}