/* ============================================================================
   Comms Readiness Scorecard. Layered on styles.css for brand tokens.
   Deliberately restrained — this audience is senior comms leadership, so it
   reads as a benchmarking instrument, not a quiz. No points, no badges.
   ========================================================================= */

.sc {
  max-width: 780px;
  margin: 0 auto;
  background: rgba(251, 244, 233, .05);
  border: 1px solid rgba(251, 244, 233, .14);
  border-radius: var(--radius);
  padding: 40px 34px;
}
@media (max-width: 700px) { .sc { padding: 28px 20px; } }

/* ---------- intro ---------- */
.sc-intro { text-align: center; }
.sc-intro h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 900; line-height: 1.12; margin-bottom: 14px; }
.sc-sub { color: var(--cream-dim); max-width: 46em; margin: 0 auto 26px; font-size: 1.02rem; line-height: 1.55; }
.sc-note { margin-top: 16px; font-size: .8rem; color: var(--cream-dim); opacity: .8; letter-spacing: .02em; }

/* ---------- progress ---------- */
.sc-progress { margin-bottom: 26px; }
.sc-bar { height: 4px; border-radius: 4px; background: rgba(251, 244, 233, .12); overflow: hidden; }
.sc-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--magenta), var(--coral), var(--gold));
  transition: width .3s ease;
}
.sc-count { margin-top: 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); }

/* ---------- question ---------- */
.sc-q { border: none; }
.sc-q legend {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.32;
  margin-bottom: 22px; color: var(--cream);
}
.sc-options { display: flex; flex-direction: column; gap: 9px; }
.sc-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border-radius: 12px; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: .99rem; color: var(--cream);
  background: rgba(251, 244, 233, .05);
  border: 1px solid rgba(251, 244, 233, .16);
  transition: border-color .16s, background .16s, transform .12s;
}
.sc-opt:hover { border-color: var(--gold); background: rgba(237, 179, 67, .1); }
.sc-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sc-opt.is-on { border-color: var(--gold); background: rgba(237, 179, 67, .18); transform: translateX(2px); }
/* plain radio affordance — no score shown, so nobody games the assessment */
.sc-optdot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(251, 244, 233, .35);
  position: relative; transition: border-color .16s;
}
.sc-opt:hover .sc-optdot { border-color: var(--gold); }
.sc-opt.is-on .sc-optdot { border-color: var(--gold); }
.sc-opt.is-on .sc-optdot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold);
}
.sc-opttext { line-height: 1.35; flex: 1; }
/* keyboard hint, shown only where a keyboard is likely */
.sc-optkey {
  flex: none; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--cream-dim); opacity: .45; padding-left: 8px;
}
/* Hide on touch devices, and on narrow screens regardless — the hint is noise
   at phone widths even where a keyboard exists. `hover: none` alone is not
   enough: a resized desktop window still reports hover capability. */
@media (hover: none), (max-width: 620px) { .sc-optkey { display: none; } }

.sc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.sc-nav .btn-ghost { padding: 10px 20px; font-size: .92rem; }
.sc-nav .btn-ghost:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ---------- result ---------- */
.sc-score {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid rgba(251, 244, 233, .12);
}
.sc-dial {
  --pct: 0;
  flex: none; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background:
    conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(251,244,233,.12) 0);
}
.sc-dial::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--charcoal-2);
}
.sc-num { position: relative; font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--cream); }
.sc-den { position: relative; font-size: .82rem; color: var(--cream-dim); margin-top: 2px; }
.sc-band { flex: 1; min-width: 220px; }
.sc-band p { color: var(--cream-dim); line-height: 1.55; font-size: 1rem; }

.sc-bench {
  padding: 14px 18px; margin-bottom: 26px; border-radius: 12px;
  background: rgba(237, 179, 67, .1); border: 1px solid rgba(237, 179, 67, .32);
}
.sc-bench p { font-size: .95rem; color: var(--cream); }

.sc-result h3 { font-size: 1.12rem; font-weight: 900; margin-bottom: 14px; }
.sc-recs { margin-bottom: 30px; }
.sc-reclist { display: grid; gap: 10px; }
.sc-rec {
  display: block; padding: 16px 18px; border-radius: 12px; text-decoration: none;
  background: rgba(251, 244, 233, .05); border: 1px solid rgba(251, 244, 233, .14);
  transition: border-color .18s, transform .18s;
}
.sc-rec:hover { border-color: var(--gold); transform: translateY(-2px); }
.sc-recnum { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--gold); }
.sc-rectitle { display: block; font-size: 1.02rem; font-weight: 700; margin: 5px 0 3px; }
.sc-recwhy { display: block; font-size: .82rem; color: var(--cream-dim); }

.sc-breakdown { margin-bottom: 30px; }
.sc-blist { list-style: none; }
.sc-blist li {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(251, 244, 233, .08);
  font-size: .92rem;
}
.sc-bq { color: var(--cream-dim); flex: 1; line-height: 1.4; }
.sc-ba { flex: none; text-align: right; color: var(--cream); max-width: 42%; line-height: 1.4; }
.sc-ba b { color: var(--gold); margin-left: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .sc-blist li { flex-direction: column; gap: 4px; }
  .sc-ba { text-align: left; max-width: 100%; }
}

.sc-gate {
  padding: 26px 24px; border-radius: var(--radius); text-align: center;
  background: linear-gradient(150deg, rgba(92, 22, 56, .55), rgba(34, 26, 32, .85));
  border: 1px solid rgba(237, 179, 67, .4);
}
.sc-gate h3 { font-size: 1.28rem; margin-bottom: 10px; }
.sc-gate p { color: var(--cream-dim); max-width: 40em; margin: 0 auto 18px; font-size: .97rem; line-height: 1.5; }

/* readers who already have access don't need the unlock prompt */
body.unlocked .sc-gate { display: none; }

/* ---------- home-page section wrapper ---------- */
.scorecard-band { padding: 96px 5vw; background: var(--charcoal-2); }