/* ==========================================================================
   MM Mojo — Value Gap Scorecard V2.6 · component styles only
   --------------------------------------------------------------------------
   Reuses the live Stage 3 design system in styles.css as the source of truth
   for typography, colour tokens, buttons, spacing and responsive behaviour.
   No second :root token set and no new font system are introduced here.
   Legacy brief name -> live Stage 3 token used below:
     gold  -> var(--soft-gold)  (accents var(--warm-gold) / var(--muted-gold))
     ink   -> var(--ink)        (live token; NOT hard-coded #151515)
     stone -> var(--warm-neutral)  (secondary body text -> var(--muted))
     radius-card -> var(--r)
     heading font -> "Fraunces", Georgia, serif
     body font    -> "DM Sans", system-ui, sans-serif
   ========================================================================== */

#scorecard-app{
  /* Single scoped error colour (kept out of component rules as a raw hex). */
  --error:#C0392B;
  display:block;
  background:var(--parchment);
  padding:72px 0 104px;
}

.sc-wrap{max-width:780px;}

/* ---- panels: only the active step is shown ---- */
.sc-panel{display:none;}
.sc-panel.active{display:block;animation:sc-fade .35s var(--ease);}
@keyframes sc-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---- card ---- */
.sc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:calc(var(--r) * 3);
  padding:44px 44px 40px;
  box-shadow:0 24px 60px rgba(8,9,12,.06);
}
.sc-card h1{font-size:clamp(28px,4.4vw,40px);}
/* Fraunces ships 300–500 here; use the top of that range on card headings so
   checkpoint/question/form titles read with clear hierarchy in ink (not pale). */
.sc-card h2{font-size:clamp(22px,3vw,28px);color:var(--ink);font-weight:500;}
.sc-eyebrow{display:inline-block;font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-gold);margin-bottom:14px;}
.sc-sub{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--muted-gold);font-size:20px;margin-top:12px;}
/* Non-intro steps use .sc-sub for important body copy (the checkpoint framing,
   step intros). Render those as readable dark DM Sans so they don't read pale.
   The intro keeps its gold editorial sub (composition unchanged). */
[data-step="checkpoint"] .sc-sub,
[data-step="reflections"] .sc-sub,
[data-step="opens"] .sc-sub,
[data-step="linkedin"] .sc-sub{
  font-family:"DM Sans",system-ui,sans-serif;font-style:normal;color:var(--text);
  font-size:16px;line-height:1.6;
}
.sc-body{margin-top:18px;color:var(--text);}

/* ---- intro ---- */
.sc-panel--intro .btn{margin-top:28px;}
.sc-fineprint{font-size:12px;color:var(--warm-neutral);margin-top:14px;}

/* ---- progress bar + two-level meta ---- */
.sc-progress{
  height:4px;width:100%;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb, var(--warm-neutral) 30%, transparent);
}
.sc-progress-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--soft-gold);transition:width .45s var(--ease);
}
.sc-progress-meta{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
.sc-progress-label{
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--warm-neutral);
}
.sc-lenssteps{list-style:none;display:flex;gap:8px;margin:0;padding:0;}
.sc-lenssteps li{
  font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-neutral);padding:3px 9px;border:1px solid var(--line);border-radius:999px;
}
.sc-lenssteps li.active{color:var(--ink);border-color:var(--soft-gold);background:color-mix(in srgb, var(--soft-gold) 18%, transparent);}

/* ---- question text ---- */
.sc-question{
  font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(23px,3vw,27px);line-height:1.35;letter-spacing:-.005em;
  margin-top:20px;color:var(--ink);
}
.sc-help{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--muted);margin-top:12px;}

/* ---- rating control: tiles + anchors share one constrained width on desktop ---- */
.sc-rating{width:max-content;max-width:100%;margin-top:26px;}
.sc-scale{border:0;padding:0;margin:0;display:flex;gap:14px;}
.sc-tile{position:relative;}
.sc-tile-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.sc-tile-face{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:var(--r);
  border:1px solid var(--warm-neutral);background:transparent;
  font-family:"DM Sans",sans-serif;font-size:17px;color:var(--text);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.sc-tile-face:hover{border-color:var(--soft-gold);}
.sc-tile-input:checked + .sc-tile-face{
  background:var(--soft-gold);border-color:var(--soft-gold);color:var(--ink);font-weight:500;
}
.sc-tile-input:focus-visible + .sc-tile-face{outline:2px solid var(--muted-gold);outline-offset:3px;}
/* per-option anchor text: hidden on desktop (the .sc-endpoints row is used);
   revealed only in the mobile vertical list beside options 1 and 5. */
.sc-tile-text{display:none;}

/* ---- per-question endpoint labels above the tile row (desktop) ---- */
.sc-endpoints{display:flex;justify-content:space-between;gap:18px;margin-bottom:12px;width:0;min-width:100%;}
.sc-endpoint{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.02em;color:var(--warm-neutral);}
.sc-endpoint--right{text-align:right;}

/* ---- navigation row ---- */
.sc-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:32px;}
.sc-back{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--muted);cursor:pointer;transition:color .2s;background:none;border:0;}
.sc-back:hover{color:var(--muted-gold);}
.sc-back[hidden]{display:none;}
.sc-next{margin-left:auto;}
.sc-next:disabled{opacity:.4;cursor:not-allowed;}
.sc-next:disabled:hover{transform:none;box-shadow:none;background:var(--soft-gold);}

/* ---- forms (checkpoint, reflections, opens, linkedin) ---- */
form{margin-top:26px;}
.sc-field{margin-bottom:20px;}
.sc-field > label{
  display:block;font-family:"DM Sans",sans-serif;font-size:13.5px;font-weight:500;
  letter-spacing:.02em;color:var(--ink);margin-bottom:7px;
}
.sc-opt{color:var(--warm-neutral);font-weight:400;}
.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field select,
.sc-field textarea{
  width:100%;font-family:"DM Sans",sans-serif;font-size:15px;color:var(--text);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.sc-field textarea{resize:vertical;line-height:1.55;}
.sc-field input:focus,.sc-field select:focus,.sc-field textarea:focus{
  outline:none;border-color:var(--soft-gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--soft-gold) 28%, transparent);
}
.sc-field--split{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.sc-consent .sc-checkbox{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.sc-consent .sc-checkbox input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--muted-gold);}
.sc-consent .sc-checkbox span{font-family:"DM Sans",sans-serif;font-size:14px;color:var(--text);line-height:1.5;}
.sc-privacy{font-size:12.5px;color:var(--muted);line-height:1.55;margin:4px 0 8px;}
.sc-privacy a{color:var(--muted-gold);text-decoration:underline;text-underline-offset:2px;}
.sc-error{font-size:12px;color:var(--error);margin-top:6px;}
.sc-error[hidden]{display:none;}

/* ---- honeypot (positioning-only hide; bot-opaque) ---- */
.honeypot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ==========================================================================
   RESULTS
   ========================================================================== */
.sc-mirror{font-family:"Fraunces",Georgia,serif;font-size:clamp(19px,2.6vw,23px);line-height:1.4;color:var(--ink);}
.sc-band-pill{
  display:inline-block;margin-top:18px;
  background:var(--soft-gold);color:var(--ink);
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
}

/* ---- visualisation block ---- */
.sc-viz{margin-top:28px;text-align:center;}
.sc-radar{max-width:420px;margin:0 auto;}
.sc-radar svg{width:100%;height:auto;display:block;overflow:visible;}
.sc-radar-label{font-family:"DM Sans",sans-serif;font-size:12px;fill:var(--muted);}
.sc-bars{display:none;}
.sc-viz-key{display:flex;justify-content:center;gap:22px;margin-top:14px;font-family:"DM Sans",sans-serif;font-size:12.5px;color:var(--muted);}
.sc-viz-key span{display:inline-flex;align-items:center;gap:7px;}
.sc-viz-key span::before{content:"";width:14px;height:0;border-top-width:2px;border-top-style:solid;}
.sc-viz-key .k-current::before{border-top-color:var(--muted-gold);}
.sc-viz-key .k-designed::before{border-top-color:var(--warm-neutral);border-top-style:dashed;}

/* ---- mobile bars (driver rows) ---- */
.sc-barlist{list-style:none;margin:0;padding:0;}
.sc-bar-row{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:10px;padding:7px 0;}
.sc-bar-name{font-family:"DM Sans",sans-serif;font-size:13px;color:var(--text);text-align:left;}
.sc-bar-track{position:relative;height:10px;border-radius:999px;background:color-mix(in srgb, var(--warm-neutral) 24%, transparent);overflow:visible;}
.sc-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--soft-gold);}
.sc-bar-designed{position:absolute;top:-3px;width:0;height:16px;border-left:2px dashed var(--warm-neutral);}
.sc-bar-score{font-family:"DM Sans",sans-serif;font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}

/* ---- dominant lens pattern ---- */
.sc-pattern{margin-top:24px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:18px;line-height:1.45;color:var(--ink);}

.sc-divider{border:0;border-top:1px solid var(--warm-neutral);opacity:.45;margin:26px 0;}
.sc-divider[hidden]{display:none;}
.sc-section-label{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}

/* ---- gaps ---- */
.sc-gap{margin-bottom:22px;}
.sc-gap:last-child{margin-bottom:0;}
.sc-gap-head{font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:500;color:var(--muted-gold);}
.sc-gap-body{font-family:"DM Sans",sans-serif;font-size:15.5px;color:var(--ink);line-height:1.62;margin-top:7px;}

/* ---- cost of the gap ---- */
.sc-cost[hidden]{display:none;}
.sc-cost .sc-block-label{font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.sc-cost-line{font-family:"DM Sans",sans-serif;font-size:15.5px;color:var(--text);line-height:1.62;margin-top:10px;}
.sc-cost-line:first-of-type{margin-top:0;}

/* ---- mojo gauge ---- */
.sc-mojo{text-align:center;}
.sc-gauge{max-width:320px;margin:0 auto;}
.sc-gauge svg{width:100%;height:auto;display:block;}
.sc-gauge-num{font-family:"Fraunces",Georgia,serif;font-size:34px;font-weight:600;fill:var(--ink);}
.sc-index{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:10px;margin-top:10px;text-align:left;}
.sc-index-label{font-family:"DM Sans",sans-serif;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.sc-index-track{height:8px;border-radius:999px;background:color-mix(in srgb, var(--warm-neutral) 24%, transparent);overflow:hidden;}
.sc-index-fill{display:block;height:100%;border-radius:999px;background:var(--muted-gold);}
.sc-index-val{font-family:"DM Sans",sans-serif;font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}
.sc-mojo-band{font-family:"Fraunces",Georgia,serif;font-size:22px;color:var(--ink);margin-top:18px;}
.sc-mojo-capstone{font-family:"DM Sans",sans-serif;font-size:15.5px;color:var(--text);line-height:1.62;margin-top:10px;max-width:640px;margin-left:auto;margin-right:auto;}

/* ---- results CTA ---- */
.sc-cta{text-align:center;}
.sc-cta-lead{font-family:"Fraunces",Georgia,serif;font-size:clamp(19px,2.4vw,22px);line-height:1.45;color:var(--ink);max-width:640px;margin:0 auto;}
.sc-cta .btn{margin-top:20px;}
.sc-cta-reassure{font-family:"DM Sans",sans-serif;font-size:14.5px;color:var(--muted);margin-top:14px;}
.sc-cta-note{font-family:"DM Sans",sans-serif;font-size:13px;color:var(--muted-gold);margin-top:12px;}
.sc-cta-note[hidden]{display:none;}
.sc-apply.is-disabled{opacity:.85;}
.sc-restart{
  display:block;margin:18px auto 0;background:none;border:0;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-size:14.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.sc-restart:hover{color:var(--muted-gold);}

.sc-email-confirm{margin-top:24px;text-align:center;font-family:"DM Sans",sans-serif;font-size:13px;color:var(--muted-gold);opacity:0;transition:opacity .5s var(--ease);}
.sc-email-confirm.show{opacity:1;}
.sc-email-confirm[hidden]{display:none;}
.sc-email-error{margin-top:24px;text-align:center;font-family:"DM Sans",sans-serif;font-size:13px;color:var(--error);}
.sc-email-error[hidden]{display:none;}

/* ---- accessibility helper ---- */
.sc-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:768px){
  #scorecard-app{padding:48px 0 72px;}
  .sc-card{padding:32px 24px 30px;border-radius:calc(var(--r) * 2);}
  .sc-field--split{grid-template-columns:1fr;gap:0;}
}

/* Rating scale becomes a vertical five-choice list at/below 600px (§17). The
   per-question anchors sit beside options 1 and 5; the separate endpoint row is
   removed; the whole row/label activates the radio. Results radar → bars. */
@media(max-width:600px){
  .sc-rating{width:auto;}
  .sc-endpoints{display:none;}
  .sc-scale{flex-direction:column;gap:14px;}
  .sc-tile{display:flex;align-items:center;gap:16px;width:100%;}
  .sc-tile-face{width:48px;height:48px;font-size:17px;flex:none;}
  .sc-tile-text{display:block;font-family:"DM Sans",sans-serif;font-size:15px;color:var(--warm-neutral);}

  .sc-radar{display:none;}
  .sc-bars{display:block;}
  .sc-viz-key{flex-wrap:wrap;gap:10px 22px;}

  .sc-cta .btn{display:flex;width:100%;justify-content:center;}
}

@media(max-width:430px){
  .sc-card{padding:26px 18px 26px;}
  .sc-bar-row{grid-template-columns:64px 1fr 30px;gap:8px;}
}

/* ==========================================================================
   FINAL READABILITY OVERRIDES — question + checkpoint screens.
   Placed last (after every earlier rule, including the media queries) so the
   result is unambiguous at all widths, including 375px. Colour only: no
   opacity / filter / transform / inherited fade on the card or its content.
   Intro and Results styling are untouched.
   ========================================================================== */
/* Headings + question text → ink */
[data-step="checkpoint"] .sc-card h2,
.sc-card h2.sc-question,
.sc-question{color:var(--ink);}
/* Normal supporting copy + form labels → text (readable, not pale) */
.sc-help,
.sc-field > label,
[data-step="checkpoint"] .sc-sub{color:var(--text);}
/* Rating anchors — desktop endpoints + mobile per-option text → text */
.sc-endpoint,
.sc-tile-text{color:var(--text);}
/* Enabled Back link → text (hover keeps the gold accent) */
.sc-back{color:var(--text);}
.sc-back:hover{color:var(--muted-gold);}
/* Secondary metadata → muted (never the palest warm-neutral) */
.sc-progress-label,
.sc-lenssteps li,
.sc-privacy{color:var(--muted);}
/* Active lens chip keeps ink emphasis */
.sc-lenssteps li.active{color:var(--ink);}

/* ==========================================================================
   PDF SNAPSHOT (browser print-to-PDF) — zero dependency, no network.
   The button is a quiet outlined secondary action so it never competes with the
   gold application CTA. #sc-pdf-snapshot is built from the real on-screen result
   and is hidden on screen; the @media print block shows only it, on one A4 page.
   ========================================================================== */
.sc-pdf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:14px;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:11px 22px;
  transition:border-color .2s,color .2s;
}
.sc-pdf-btn:hover{border-color:var(--muted-gold);color:var(--muted-gold);}

#sc-pdf-snapshot{display:none;}

@media(max-width:600px){
  .sc-pdf-btn{display:flex;width:100%;}
}

@media print{
  /* show only the snapshot, on a clean A4 page */
  body > *{display:none !important;}
  #sc-pdf-snapshot{display:block !important;}
  html,body{background:#fff !important;}
  @page{size:A4;margin:14mm;}

  #sc-pdf-snapshot{color:var(--ink);font-family:"DM Sans",sans-serif;}
  .sc-pdf-head{text-align:center;}
  .sc-pdf-brand{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-gold);}
  .sc-pdf-head h2{font-family:"Fraunces",Georgia,serif;font-weight:500;color:var(--ink);font-size:26px;margin:6px 0 0;}
  .sc-pdf-for{font-size:13px;color:var(--muted);margin-top:4px;}
  .sc-pdf-band{display:inline-block;margin-top:12px;background:var(--soft-gold);color:var(--ink);
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sc-pdf-viz{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;}
  .sc-pdf-radar{flex:0 1 92mm;max-width:92mm;}
  .sc-pdf-radar svg{width:100%;height:auto;overflow:visible;}
  .sc-pdf-gauge{flex:0 1 70mm;max-width:70mm;text-align:center;}
  .sc-pdf-gauge svg{width:100%;height:auto;}
  .sc-pdf-mojo{font-family:"Fraunces",Georgia,serif;font-size:16px;margin-top:2px;}
  .sc-pdf-gaps{margin-top:18px;text-align:center;}
  .sc-pdf-gaps .sc-pdf-label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .sc-pdf-gaps p{font-family:"Fraunces",Georgia,serif;font-size:16px;color:var(--muted-gold);margin-top:4px;}
  .sc-pdf-foot{margin-top:22px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-neutral);}
  /* keep gold fills/strokes in print */
  #sc-pdf-snapshot svg, #sc-pdf-snapshot .sc-index-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}