/* MetricFit Core — quiz + result UI
   Tokens: VI mint #80D8D0 / charcoal #404040 / accent orange #E85828 (candidate palette, adjustable)
   Locked spec: transition all .3s cubic-bezier(.25,1,.5,1); hover translateY(-4px)+shadow;
   options >=44px (actual 56px); progress bar 8px; fade 250ms */
:root{
  --rq-brand:#80D8D0; --rq-brand-2:#50D0C8; --rq-brand-3:#A8F8F0;
  --rq-ink:#404040; --rq-accent:#E85828; --rq-paper:#FFFFFF;
  --rq-muted:#6B7280; --rq-line:rgba(64,64,64,.18); --rq-line-2:rgba(64,64,64,.32);
  --rq-bg:#F7FCFB;
  --rq-r-opt:12px; --rq-r-card:16px; --rq-r-btn:999px;
  --rq-ease:cubic-bezier(0.25, 1, 0.5, 1);
  --rq-fade:250ms;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
.rq-body{ font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--rq-bg); color:var(--rq-ink); font-size:16px; line-height:1.6; }
button{ font-family:inherit; }

/* ---------- viewport-locked container ---------- */
.rq-quiz{ position:fixed; inset:0; z-index:60; background:var(--rq-bg);
  display:flex; flex-direction:column; padding:64px 16px 16px; gap:16px; overflow-y:auto; }

/* ---------- back-to-home (fixed pill in the reserved strip above the viewport lock) ---------- */
.rq-home{ position:fixed; top:14px; left:16px; z-index:70;
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  background:rgba(247,252,251,.9); border:1px solid var(--rq-line-2);
  border-radius:999px; color:var(--rq-ink); font-size:.875rem; font-weight:600;
  text-decoration:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:all 0.3s var(--rq-ease); }
.rq-home:hover{ border-color:var(--rq-brand-2); color:var(--rq-brand-2);
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(13,44,34,.08); }

/* ---------- progress bar ---------- */
.rq-progress{ height:8px; border-radius:999px; background:rgba(64,64,64,.10); flex:0 0 auto; }
.rq-progress__bar{ height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--rq-brand-2), var(--rq-brand));
  transition:width var(--rq-fade) var(--rq-ease); }
.rq-progress__meta{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--rq-muted); }

/* ---------- screen skeleton ---------- */
.rq-screen{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  max-width:680px; width:100%; margin:0 auto; animation:rq-fade var(--rq-fade) var(--rq-ease);
  padding:20px 4px; }
@keyframes rq-fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.rq-eyebrow{ font-size:.75rem; letter-spacing:.14em; color:var(--rq-brand-2); font-weight:600; margin:0 0 10px; }
.rq-progress__meta{ display:flex; justify-content:space-between; align-items:center;
  font-size:.8125rem; color:var(--rq-muted); margin-bottom:10px; }
.rq-progress{ height:8px; border-radius:999px; background:rgba(64,64,64,.10); flex:0 0 auto;
  margin-bottom:30px; }
.rq-progress__bar{ height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--rq-brand-2), var(--rq-brand));
  transition:width var(--rq-fade) var(--rq-ease); }
.rq-question{ font-family:"Source Serif 4",Georgia,serif; font-weight:600;
  font-size:clamp(1.625rem, 5.5vw, 2.125rem); line-height:1.45; color:var(--rq-ink);
  margin:0 0 18px; letter-spacing:.01em; }
.rq-desc{ font-size:.9375rem; line-height:1.75; color:var(--rq-muted); margin:0 0 22px; }
.rq-why{ font-size:.875rem; line-height:1.8; color:var(--rq-muted); background:rgba(80,208,200,.09);
  border-left:3px solid var(--rq-brand); padding:12px 16px; border-radius:0 10px 10px 0; margin:0 0 30px; }
.rq-why b{ color:var(--rq-ink); font-weight:600; }

/* ---------- option cards ---------- */
.rq-options{ display:grid; gap:14px; }
.rq-option{ min-height:60px; display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:16px 20px; border:1px solid var(--rq-line-2); border-radius:var(--rq-r-opt);
  background:var(--rq-paper); color:var(--rq-ink); font-size:1rem; line-height:1.6; cursor:pointer;
  transition:all 0.3s var(--rq-ease); }
.rq-option:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(13,44,34,0.05); border-color:var(--rq-brand-2); }
.rq-option.is-selected{ background:var(--rq-brand); border-color:var(--rq-brand-2); color:#153f3a; font-weight:600; }
.rq-option__mark{ flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--rq-line-2); display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.3s var(--rq-ease); background:var(--rq-paper); }
.rq-option__mark--check{ border-radius:6px; }
.rq-option.is-selected .rq-option__mark{ border-color:#153f3a; background:#153f3a; }
.rq-option.is-selected .rq-option__mark::after{ content:"✓"; color:#fff; font-size:12px; line-height:1; }
.rq-group-label{ font-size:.75rem; font-weight:600; color:var(--rq-muted); margin:14px 0 6px;
  letter-spacing:.08em; text-transform:uppercase; }
.rq-groups{ display:flex; flex-direction:column; }

/* ---------- text inputs ---------- */
.rq-input{ width:100%; min-height:56px; padding:14px 18px; font-size:1rem; color:var(--rq-ink);
  border:1px solid var(--rq-line-2); border-radius:var(--rq-r-opt); background:var(--rq-paper);
  transition:all 0.3s var(--rq-ease); }
.rq-input:focus{ outline:none; border-color:var(--rq-brand-2); box-shadow:0 0 0 3px rgba(80,208,200,.18); }
.rq-inputwrap{ position:relative; }
.rq-inputwrap .rq-input{ padding-right:56px; }
.rq-unit{ position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--rq-muted); font-size:.9375rem; pointer-events:none; }
.rq-search{ margin-bottom:12px; }
details.rq-group{ border:1px solid var(--rq-line); border-radius:var(--rq-r-opt); background:var(--rq-paper);
  margin-bottom:10px; overflow:hidden; }
details.rq-group summary{ list-style:none; cursor:pointer; padding:12px 16px; font-weight:600;
  font-size:.9375rem; color:var(--rq-ink); min-height:44px; display:flex; align-items:center;
  transition:background 0.3s var(--rq-ease); }
details.rq-group summary::-webkit-details-marker{ display:none; }
details.rq-group summary::after{ content:"▾"; margin-left:auto; color:var(--rq-muted); transition:transform 0.3s var(--rq-ease); }
details.rq-group[open] summary::after{ transform:rotate(180deg); }
details.rq-group summary:hover{ background:var(--rq-brand-3); }
details.rq-group .rq-options{ padding:4px 12px 12px; }
.rq-option.is-locked{ opacity:.45; cursor:not-allowed; }
.rq-option.is-locked:hover{ transform:none; box-shadow:none; }
/* drug search typeahead */
.rq-drugsearch{ position:relative; margin-bottom:10px; }
.rq-drug-sugs{ position:absolute; z-index:10; left:0; right:0; top:100%; background:#fff;
  border:1px solid var(--rq-line); border-radius:0 0 10px 10px; max-height:240px; overflow-y:auto;
  box-shadow:0 12px 28px rgba(13,44,34,.12); }
.rq-drug-sug{ display:block; width:100%; text-align:left; padding:10px 16px; border:none;
  background:none; font-size:.9375rem; color:var(--rq-ink); cursor:pointer;
  transition:background 0.2s var(--rq-ease); min-height:40px; }
.rq-drug-sug:hover{ background:rgba(128,216,208,.12); }

/* ---------- button row ---------- */
.rq-actions{ display:flex; gap:12px; margin-top:24px; }
.rq-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px;
  padding:0 28px; border-radius:var(--rq-r-btn); font-weight:600; font-size:1rem;
  cursor:pointer; border:1px solid transparent; transition:all 0.3s var(--rq-ease); text-decoration:none; }
.rq-btn--primary{ background:var(--rq-ink); color:#fff; }
.rq-btn--ink{ background:var(--rq-ink); color:#fff; }
.rq-btn--primary:hover:not(:disabled){ transform:translateY(-4px); box-shadow:0 10px 20px rgba(13,44,34,0.05); }
.rq-btn--accent{ background:var(--rq-accent); color:#fff; }
.rq-btn--accent:hover:not(:disabled){ transform:translateY(-4px); box-shadow:0 10px 20px rgba(13,44,34,0.05); }
.rq-btn--ghost{ background:transparent; border-color:var(--rq-line-2); color:var(--rq-ink); }
.rq-btn--ghost:hover{ border-color:var(--rq-ink); }
.rq-btn:disabled{ opacity:.35; cursor:not-allowed; }
.rq-back{ background:none; border:none; color:var(--rq-muted); font-size:.875rem; cursor:pointer;
  padding:8px 0; min-height:44px; transition:color 0.3s var(--rq-ease); }
.rq-back:hover{ color:var(--rq-ink); }

/* ---------- consent screen ---------- */
.rq-consent__box{ background:var(--rq-paper); border:1px solid var(--rq-line); border-radius:var(--rq-r-card); padding:24px; }
.rq-consent__box h1{ font-family:"Source Serif 4",Georgia,serif; font-weight:600;
  font-size:clamp(1.5rem,5.5vw,2rem); margin:0 0 12px; }
.rq-consent__box ul{ margin:12px 0 16px; padding-left:18px; color:var(--rq-muted); font-size:.875rem; }
.rq-checkline{ display:flex; gap:10px; align-items:flex-start; font-size:.875rem; margin:12px 0; cursor:pointer; }
.rq-checkline input{ width:20px; height:20px; margin-top:2px; accent-color:var(--rq-brand-2); flex:0 0 auto; }
.rq-brandmark{ text-align:center; margin-bottom:18px; }
.rq-brandmark img{ display:block; height:44px; width:auto; margin:0 auto; }

/* ---------- loading animation ---------- */
.rq-loading{ position:fixed; inset:0; z-index:70; background:var(--rq-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px; }
.rq-loading__pulse{ width:52px; height:52px; border-radius:50%;
  border:3px solid rgba(80,208,200,.25); border-top-color:var(--rq-brand-2);
  animation:rq-spin 1s linear infinite; }
@keyframes rq-spin{ to{ transform:rotate(360deg);} }
.rq-loading__text{ font-family:"Source Serif 4",Georgia,serif; font-size:1.125rem; margin:0; }
.rq-loading__sub{ font-size:.8125rem; color:var(--rq-muted); margin:0; }

/* ---------- result page ---------- */
.rq-result{ max-width:760px; margin:0 auto; padding:32px 20px 80px; }
.rq-result__hero{ text-align:center; margin:8px 0 28px; }
.rq-result__hero h1{ font-family:"Source Serif 4",Georgia,serif; font-weight:600;
  font-size:clamp(1.625rem,6vw,2.25rem); margin:0 0 8px; }
.rq-result__hero p{ color:var(--rq-muted); font-size:.9375rem; margin:0; }
.rq-card{ background:var(--rq-paper); border:1px solid var(--rq-line); border-radius:var(--rq-r-card);
  padding:24px; margin:0 0 16px; transition:all 0.3s var(--rq-ease); }
.rq-card:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(13,44,34,0.05); }
.rq-card h2{ font-size:1.125rem; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.rq-card h2::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rq-brand-2); }
.rq-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rq-chip{ display:inline-flex; align-items:center; min-height:32px; padding:4px 14px; border-radius:999px;
  background:var(--rq-brand-3); color:#155e56; font-size:.8125rem; font-weight:600; }
.rq-chip--hot{ background:var(--rq-accent); color:#fff; }
.rq-lifeitem{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--rq-line); }
.rq-lifeitem:last-child{ border-bottom:none; }
.rq-lifeitem__tag{ flex:0 0 auto; font-size:.75rem; font-weight:600; color:var(--rq-brand-2);
  border:1px solid var(--rq-brand); border-radius:999px; padding:2px 10px; height:fit-content; margin-top:2px; }
.rq-lifeitem p{ margin:0; font-size:.9375rem; }
.rq-offer{ display:grid; gap:6px; }
.rq-offer__title{ font-weight:700; }
.rq-offer__match{ font-size:.8125rem; color:var(--rq-brand-2); font-weight:600; margin:0; }
.rq-offer__desc{ font-size:.875rem; color:var(--rq-muted); margin:0; }
.rq-offer__placeholder{ font-size:.75rem; color:var(--rq-muted); border:1px dashed var(--rq-line-2);
  border-radius:8px; padding:6px 10px; display:inline-block; }
.rq-disclaimer{ font-size:12.5px; color:var(--rq-muted); margin:28px 0 0; }
.rq-email{ margin-top:24px; }
.rq-email__row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rq-email__row .rq-input{ flex:1 1 220px; min-height:50px; }
.rq-email__note{ font-size:12px; color:var(--rq-muted); margin:8px 0 0; }
.rq-email__ok{ color:#0e7a4f; font-weight:600; }
/* Persona reference: centered underline input + opt-out microcopy + dark pill */
.rq-email__head{ font-family:"Source Serif 4",Georgia,serif; font-weight:600; text-align:center; }
.rq-email .rq-offer__desc{ text-align:center; max-width:30em; margin-left:auto; margin-right:auto; }
.rq-input--line{ border:none; border-bottom:1.5px solid var(--rq-line-2); border-radius:0;
  text-align:center; background:transparent; }
.rq-input--line:focus{ box-shadow:none; border-bottom-color:var(--rq-brand-2); }
.rq-email__optout{ text-align:center; font-size:.8125rem; color:var(--rq-muted); margin:14px 0 4px; }
.rq-secure{ text-align:center; font-size:12px; color:var(--rq-muted); margin:18px 0 0; }
.rq-secure a{ color:var(--rq-muted); }
.rq-email .rq-actions{ margin-top:20px; }

/* ---------- blocked screen ---------- */
.rq-blocked{ max-width:640px; margin:0 auto; padding:48px 24px; text-align:center; }
.rq-blocked h1{ font-family:"Source Serif 4",Georgia,serif; font-size:clamp(1.5rem,6vw,2rem); margin:0 0 16px; }
.rq-blocked .rq-chips{ justify-content:center; margin:16px 0; }
.rq-blocked p{ color:var(--rq-muted); }

/* ---------- empty result page ---------- */
.rq-result-empty{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.rq-result-empty__card{ max-width:480px; text-align:center; background:var(--rq-paper);
  border:1px solid var(--rq-line); border-radius:var(--rq-r-card); padding:40px 28px; }
.rq-result-empty__card h1{ font-family:"Source Serif 4",Georgia,serif; margin:0 0 12px; }
.rq-result-empty__card p{ color:var(--rq-muted); margin:0 0 24px; }

/* ---------- desktop / motion preferences ---------- */
@media (min-width:769px){ .rq-quiz{ padding:76px 40px 32px; } }
@media (prefers-reduced-motion: reduce){
  .rq-screen{ animation:none; }
  .rq-option:hover,.rq-btn:hover,.rq-card:hover{ transform:none; }
}