/* ==========================================================================
   MM Mojo — Value by Design Scorecard · component styles only
   --------------------------------------------------------------------------
   Reuses the Stage 2 design system from styles.css as the source of truth for
   typography, colour tokens, buttons, spacing and responsive behaviour.
   No second :root token system and no new font system are introduced here.
   Token map used below (legacy brief name -> existing Stage 2 token):
     gold  -> var(--soft-gold)  (accents var(--warm-gold) / var(--muted-gold))
     ink   -> var(--ink)
     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). */
  --scorecard-error:#C0392B;
  display:block;
  background:var(--parchment);
  padding:72px 0 104px;
}

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

/* ---- 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);}
.sc-card h2{font-size:clamp(22px,3vw,28px);}
.sc-sub{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--muted-gold);font-size:20px;margin-top:12px;}
.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 ---- */
.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-label{
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm-neutral);text-align:right;margin-top:10px;
}

/* ---- layer badge (outlined pill) ---- */
.sc-badge{
  display:inline-block;margin-top:18px;
  border:1px solid var(--soft-gold);color:var(--soft-gold);
  font-family:"DM Sans",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;background:transparent;
}

/* ---- question text ---- */
.sc-question{
  font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(22px,3vw,26px);line-height:1.35;letter-spacing:-.01em;
  margin-top:18px;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 shrinks to the natural tile-row width; the anchors are forced to
   that same width via width:0 + min-width:100% so they no longer stretch across
   the whole card). On mobile/tablet this reverts to full width (see media). ---- */
.sc-rating{width:max-content;max-width:100%;margin-top:26px;}

/* ---- rating scale: native radios styled as tiles ---- */
.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 endpoint 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;}

/* ---- universal endpoint labels: sit ABOVE the tile row, constrained to the
   rating-control width on desktop and full width on mobile. Never wrap. ---- */
.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);white-space:nowrap;}
.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;}
/* Keep Next pinned right on every question — including Layer 1 where Back is
   hidden — so it never shifts left when it is the only item in the row. */
.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);}

/* ---- form ---- */
#sc-form{margin-top:26px;}
.sc-field{margin-bottom:20px;}
.sc-field > label{
  display:block;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.02em;color:var(--text);margin-bottom:7px;
}
.sc-field input[type="text"],
.sc-field input[type="email"]{
  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 input:focus{
  outline:none;border-color:var(--soft-gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--soft-gold) 28%, transparent);
}
.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:12px;color:var(--warm-neutral);line-height:1.55;margin:4px 0 8px;}
.sc-error{font-size:12px;color:var(--scorecard-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-band-pill{
  display:inline-block;
  background:var(--soft-gold);color:var(--ink);
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
}
.sc-result-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(30px,4.6vw,40px);margin-top:18px;}
.sc-result-headline{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(20px,2.6vw,24px);color:var(--warm-neutral);margin-top:12px;line-height:1.3;}
.sc-result-body{font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.65;margin-top:18px;color:var(--text);}

.sc-divider{border:0;border-top:1px solid var(--warm-neutral);opacity:.45;margin:24px 0;}

.sc-block-label{font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-neutral);}
.sc-block-layer{font-family:"Fraunces",Georgia,serif;font-size:18px;color:var(--soft-gold);margin-top:6px;}
.sc-block-line{font-family:"DM Sans",sans-serif;font-size:15px;color:var(--ink);line-height:1.6;margin-top:6px;}

/* ---- layer score summary ---- */
.sc-summary{list-style:none;margin:0;padding:0;}
.sc-summary li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:"DM Sans",sans-serif;font-size:13px;color:var(--text);
  padding:8px 0;border-bottom:1px solid var(--line);
}
.sc-summary li:last-child{border-bottom:0;}
.sc-summary .sc-row-name{flex:1;}
.sc-summary .sc-row-score{color:var(--muted);font-variant-numeric:tabular-nums;}
.sc-summary .sc-row-band{font-size:12px;letter-spacing:.04em;}
/* Band treatments — no green for strong (ink / antique-gold), gold, muted stone */
.sc-band-strong{color:var(--ink);font-weight:500;}
.sc-band-strengthen{color:var(--muted-gold);}
.sc-band-waiting{color:var(--warm-neutral);}

.sc-total{font-family:"DM Sans",sans-serif;font-size:13px;color:var(--muted);margin-top:14px;}

/* ---- results CTA ---- */
.sc-cta h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:22px;}
.sc-cta p{font-family:"DM Sans",sans-serif;font-size:15px;color:var(--muted);margin-top:8px;}
.sc-cta .btn{margin-top:18px;}
.sc-restart{
  display:block;margin-top:16px;background:none;border:0;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.sc-restart:hover{color:var(--muted-gold);}

.sc-email-confirm{
  margin-top:24px;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;}

/* ---- 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);}

  /* Mobile rating scale: vertical five-choice list. The endpoint language now
     sits beside options 1 and 5, so the separate endpoint row is removed. Each
     1–5 choice becomes its own full-width row — numbered tile on the left, any
     descriptive text to its right — and the whole label activates the radio. */
  .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);}
}

@media(max-width:430px){
  .sc-card{padding:26px 18px 26px;}
  /* rating scale stays a spacious vertical list at 375px (see max-width:768) */
  .sc-cta .btn{display:flex;width:100%;justify-content:center;}
  /* compact stacked layer summary on small screens */
  .sc-summary li{flex-wrap:wrap;gap:2px 12px;}
  .sc-summary .sc-row-name{flex:1 0 100%;}
}