/* ————— Vitality Stacks consultation —————
   Loaded after commerce.css on the quiz route only. The concept's light
   system (tokens in commerce.css, shared with the theme): chips are the
   concept .chip — 1.5px line, 12px radius, ink fill when pressed — the
   progress line is a 2px green rule, results are 12px cards, the medication
   note is the amber caution (.call.warn), support resources the green
   callout (.call), and the order button the ink pill. Every class name here
   is one assets/consultation.js renders or templates/page-quiz.php prints;
   this sheet only draws them. Mobile first; one question at a time inside
   the 680px article column. */

/* Author styles beat the UA [hidden] rule, so make our toggles stick. */
#vs-consult [hidden],
#vs-consult-intro[hidden],
.js-consult-start[hidden] { display: none !important; }
/* The hero start button: above the fold, so nobody scrolls past 132 words of
   intro hunting for the thing they already clicked in the nav. */
.hero .hero-start { margin: 26px 0 12px; }
.hero .hero-start + .fine { margin-top: 0; }

/* Anything marked .vs-consult-intro collapses once the visitor has started
   (the resources block is re-rendered under the results, so nothing
   sensitive is lost). */
body.vs-consult-active .vs-consult-intro { display: none; }

#vs-consult { scroll-margin-top: 92px; }

.vs-consult {
  max-width: var(--col);
  margin: 0 auto;
  padding: 40px 0 96px;
  scroll-margin-top: 92px;
}

/* ---- the intro (templates/page-quiz.php) ---------------------------------- */
.quiz-intro { padding: 56px 0 72px; }
.quiz-intro .split { align-items: start; gap: 64px; }
.quiz-intro .intro > p { font-size: 17px; color: var(--slate); line-height: 1.6; margin: 0 0 16px; max-width: 58ch; }
.quiz-intro .intro > p:first-child { font-size: 18px; color: var(--ink); }
.quiz-intro .demo { margin-top: 32px; }
.quiz-intro .demo .q { font-family: 'Montserrat', system-ui, sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 14px; }
.quiz-intro .covers { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.quiz-intro .covers li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.quiz-intro .covers svg { color: var(--green); flex: none; margin-top: 3px; }
.quiz-intro .start { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.quiz-intro .start .vs-consult-start { margin: 0; }
.quiz-intro .start .btn { width: 100%; }
.quiz-intro .start .fine { margin-top: 12px; text-align: center; line-height: 1.5; }
.quiz-intro .start .fine a { color: var(--green); font-weight: 600; }
.quiz-intro .side .ph { aspect-ratio: 3/2; border-radius: 20px; }
.quiz-intro .side .call { margin: 24px 0 0; }
.quiz-intro .side .call:first-child { margin-top: 0; }

/* Support / crisis lines — the same block on the intro (server-rendered,
   also carries .call) and under the results (cloned, or built by the script
   without .call), so it is drawn fully here. */
.vs-resources {
  border-radius: 14px; padding: 22px 24px; margin: 24px 0 0;
  font-size: 16px; line-height: 1.6; background: var(--sage); border-left: 3px solid var(--green); color: var(--ink);
}
.vs-resources h2, .vs-resources h3, .vs-resources-title {
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin: 0 0 10px; color: var(--ink);
}
.vs-resources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs-resources li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.vs-resources strong, .vs-resource-label { display: block; font-weight: 600; color: var(--ink); }
.vs-resource-detail { display: block; color: var(--slate); font-size: 15px; }
.vs-resources a { color: var(--green); font-weight: 600; }
.vs-resources a:hover { color: var(--ink); }
.vs-resource-link { display: inline-block; margin-top: 4px; font-size: 14px; }
.vs-resources p { margin: 4px 0 0; }

/* ---- top line + progress -------------------------------------------- */
.vs-consult-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 13px; font-weight: 600; color: var(--mute);
}
.vs-consult-flow { color: var(--green); }
.vs-consult-progress { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-consult-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 14px 0 36px; }
.vs-consult-fill { display: block; height: 100%; width: 0; background: var(--green); border-radius: 2px; transition: width .45s ease; }

/* ---- the question ------------------------------------------------------ */
.vs-consult-body { position: relative; }
.vs-consult-body > * { animation: vs-consult-fade .28s ease both; }
.vs-consult-body.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

.vs-consult-q {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 26px; outline: none; color: var(--ink);
}
.vs-consult-q:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 4px; }

.vs-consult-options { display: grid; grid-template-columns: 1fr; gap: 9px; }

/* the chips: concept .chip */
.vs-consult-opt,
.vs-consult-check {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 14px 18px; text-align: left; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.35;
  color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; position: relative; transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.vs-consult-opt:hover,
.vs-consult-check:hover { border-color: var(--ink); }
.vs-consult-opt[aria-pressed="true"],
.vs-consult-check.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vs-consult-opt:disabled,
.vs-consult-check.is-busy { cursor: default; }
.vs-consult-opt-main { flex: 1 1 auto; }
.vs-consult-opt-sub { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--slate); padding-left: 36px; line-height: 1.45; }
.vs-consult-opt[aria-pressed="true"] .vs-consult-opt-sub,
.vs-consult-check.is-on .vs-consult-opt-sub { color: #a9bcb5; }

/* number-key badge: keyboard affordance, hidden on touch */
.vs-consult-key {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--mute); background: var(--sage);
  font-variant-numeric: tabular-nums;
}
.vs-consult-opt[aria-pressed="true"] .vs-consult-key,
.vs-consult-check.is-on .vs-consult-key { background: rgba(255, 255, 255, .14); color: #fff; }

/* multi-choice: native checkbox stays for a11y, drawn as a custom box */
.vs-consult-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vs-consult-check:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.vs-consult-check .vs-consult-opt-sub { padding-left: 66px; }
.vs-consult-box {
  flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px; background: #fff;
  position: relative; transition: background .15s, border-color .15s;
}
.vs-consult-check:hover .vs-consult-box { border-color: var(--ink); }
.vs-consult-check.is-on .vs-consult-box { background: #fff; border-color: #fff; }
.vs-consult-check.is-on .vs-consult-box::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.vs-consult-hint { font-size: 13px; color: var(--mute); margin: 18px 0 0; }

/* the reflection line: a quiet aside after certain answers */
.vs-consult-live:empty { display: none; }
.vs-consult-reflect {
  margin: 18px 0 0; padding: 18px 22px;
  border-left: 3px solid var(--green); border-radius: 14px;
  background: var(--sage); color: var(--ink); font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 19px; line-height: 1.45; letter-spacing: -0.005em;
  animation: vs-consult-fade .3s ease both;
}
.vs-consult-body .vs-consult-reflect { margin: -8px 0 22px; }

/* validation / api messages: the amber caution */
.vs-consult-alert { margin-top: 18px; }
.vs-consult-alert-msg {
  margin: 0; padding: 16px 20px; border-radius: 14px; border-left: 3px solid var(--amber);
  background: var(--amber-bg); color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5;
}

/* ---- nav ----------------------------------------------------------------- */
.vs-consult-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; }
.vs-consult-back {
  background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--slate);
  transition: color .15s;
}
.vs-consult-back::before { content: '\2190\00a0'; }
.vs-consult-back:hover { color: var(--ink); }
.vs-consult-back:disabled { visibility: hidden; }
.vs-consult-continue { font-family: inherit; cursor: pointer; margin-left: auto; }
.vs-consult-continue::after { content: '\00a0\2192'; }
.vs-consult-continue:disabled { opacity: .4; cursor: not-allowed; }
.vs-consult-continue:disabled:hover { background: var(--ink); }

/* text-style buttons (Start over, Copy link, Change an answer) */
.vs-consult-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--green); text-decoration: underline; text-underline-offset: 3px;
}
.vs-consult-link:hover { color: var(--ink); }

/* ---- loading ------------------------------------------------------------- */
.vs-consult-loading { text-align: center; padding: 56px 16px 32px; color: var(--slate); }
.vs-consult-spin {
  width: 32px; height: 32px; margin: 0 auto 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--green);
  animation: vs-consult-spin .8s linear infinite;
}
.vs-consult-loading-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--green); }
.vs-consult-loading-lines { list-style: none; margin: 18px 0 0; padding: 0; font-size: 16px; }
.vs-consult-loading-lines li { color: var(--line); margin: 6px 0; animation: vs-consult-lit .5s ease forwards; }

/* ---- error --------------------------------------------------------------- */
.vs-consult-error {
  border-radius: 14px; border-left: 3px solid var(--amber);
  background: var(--amber-bg); padding: 22px 24px; outline: none;
}
.vs-consult-error:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 14px; }
.vs-consult-error-msg { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.5; }
.vs-consult-error-sub { margin: 6px 0 0; color: var(--slate); font-size: 14px; }
.vs-consult-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 18px; }
.vs-consult-actions .vs-btn { font-family: inherit; cursor: pointer; }

/* ---- results ------------------------------------------------------------- */
.vs-results-head { display: flex; align-items: flex-start; gap: 28px; }
.vs-results-copy { min-width: 0; flex: 1 1 auto; }
.vs-results-media { flex: 0 0 180px; width: 180px; margin: 0; background: var(--sage); border-radius: 16px; overflow: hidden; }
.vs-results-media img { display: block; width: 100%; height: auto; }
.vs-consult-results .vs-eyebrow { margin-bottom: 12px; }
.vs-consult-result-h {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(32px, 4vw, 50px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.06; margin: 0; outline: none;
}
.vs-consult-result-h:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 4px; }
.vs-consult-result-desc { font-size: 18px; color: var(--slate); max-width: 56ch; margin: 14px 0 0; line-height: 1.5; }

/* the medication note: the amber caution (.call.warn) */
.vs-consult-mednote {
  margin: 32px 0 0; padding: 22px 24px; border-radius: 14px; border-left: 3px solid var(--amber);
  background: var(--amber-bg); color: var(--ink); font-size: 16px; line-height: 1.6;
}
.vs-consult-mednote strong { display: block; margin-bottom: 6px; font-weight: 600; }
.vs-consult-mednote p { margin: 0; }

/* the stack: 12px cards */
.vs-consult-stack { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.vs-consult-item { border: 1.5px solid var(--line); border-radius: 12px; padding: 20px 22px; background: #fff; display: grid; gap: 6px; }
.vs-consult-item p { margin: 0; }
.vs-consult-item-head { display: flex; align-items: baseline; gap: 12px; }
.vs-consult-item-num { font-size: 12px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.vs-consult-item-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
.vs-consult-item-dose { font-size: 14px; font-weight: 600; color: var(--green); }
.vs-consult-item-desc { font-size: 15px; color: var(--slate); line-height: 1.55; }
.vs-consult-item-foryou { font-size: 15px; color: var(--ink); line-height: 1.55; padding-left: 20px; position: relative; }
.vs-consult-item-foryou::before { content: '\21B3'; position: absolute; left: 0; color: var(--green); }
.vs-consult-cats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vs-consult-cats li { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--sage); color: var(--slate); }

/* price + order: a sage panel */
.vs-consult-order {
  margin: 28px 0 0; padding: 28px 30px; border-radius: 22px; background: var(--sage);
  display: flex; flex-direction: column; gap: 22px;
}
.vs-consult-price { flex: 1 1 220px; min-width: 0; }
.vs-consult-price-num { display: flex; align-items: baseline; gap: 8px; }
.vs-consult-price-num .vs-per { white-space: nowrap; }
.vs-consult-price-pending { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
.vs-consult-price-meta { margin: 6px 0 0; }
.vs-consult-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vs-consult-order-btn { font-family: inherit; }
.vs-consult-pending { margin: -4px 0 0; font-size: 13px; color: var(--mute); }
/* A recommended compound the backend cannot sell right now: still listed, visibly held back. */
.vs-consult-item.is-unavailable { background: var(--sage, #f1f4f0); }
.vs-consult-item-soon { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--slate); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.vs-consult-soon { margin: 10px 0 0; font-size: 13px; color: var(--slate); }
.vs-consult-save { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.vs-consult-save-link { font-weight: 600; font-size: 14px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.vs-consult-save-link:hover { color: var(--ink); }
.vs-consult-save-help { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--mute); }

.vs-consult-results .vs-resources { margin-top: 28px; }

.vs-consult-foot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 28px 0 0; }

/* ---- motion -------------------------------------------------------------- */
@keyframes vs-consult-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vs-consult-spin { to { transform: rotate(360deg); } }
@keyframes vs-consult-lit { to { color: var(--ink); } }

@media (prefers-reduced-motion: reduce) {
  .vs-consult *, .vs-consult *::before, .vs-consult *::after { animation: none !important; transition: none !important; }
  .vs-consult-loading-lines li { color: var(--ink); }
}

/* ---- touch: drop keyboard-only affordances ------------------------------ */
@media (pointer: coarse) {
  .vs-consult-key, .vs-consult-hint { display: none; }
  .vs-consult-opt-sub { padding-left: 0; }
  .vs-consult-check .vs-consult-opt-sub { padding-left: 30px; }
}

/* ---- wider screens ------------------------------------------------------- */
@media (min-width: 640px) {
  .vs-consult-order { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; }
  .vs-consult-cta { flex: 0 0 auto; max-width: 60%; align-items: flex-end; text-align: right; }
  .vs-consult-save { justify-content: flex-end; }
  .vs-consult-save-help { text-align: right; }
}

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 900px) {
  .quiz-intro { padding: 40px 0 56px; }
  .quiz-intro .split { gap: 36px; }
  .vs-consult { padding: 24px 0 64px; }
}
@media (max-width: 560px) {
  .vs-results-head { flex-direction: column; gap: 18px; }
  .vs-results-media { width: 140px; flex-basis: auto; }
  .vs-consult-order { padding: 22px; }
}