/* Pilot-to-Production Scorecard.

   Every class here is prefixed sc- deliberately. The header CTA overflow that
   cost an afternoon was .cta in site.css colliding with .cta on a panel — the
   prefix means a rule in this file cannot reach anything in site.css, and a
   rule there cannot silently reach in here. */

.sc-main{padding:56px 0 96px;min-height:70vh}

/* One step visible at a time. Hidden steps are display:none rather than
   visually hidden, so a keyboard user never tabs into a question that is not
   on screen. */
/* padding:0 is deliberate, not redundant. site.css styles bare `section` with
   88px of vertical padding for the homepage's stacked sections, and every step
   here is a <section> — so without this each step sits 88px lower than the
   rule in this file says it does. Checking what else already matches the
   element is the lesson the .cta collision taught. */
.sc-step{display:none;padding:0}
.sc-step.is-active{display:block;animation:sc-in .28s ease-out}
@keyframes sc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sc-step h1{font-family:var(--serif);font-size:clamp(30px,5vw,46px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 20px;max-width:16em}
.sc-step h2{font-family:var(--serif);font-size:clamp(23px,3.4vw,32px);line-height:1.24;letter-spacing:-.015em;margin:6px 0 14px;max-width:19em}

.sc-lede{font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:34em;margin:0 0 22px}
.sc-hint{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:34em;margin:0 0 18px}
.sc-fine{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--ink-soft);max-width:36em;margin:22px 0 0}
.sc-fine a{color:var(--ink-soft)}

/* The five gates, stated before a single question is asked. A respondent who
   knows the frame answers a sharper version of every question below. */
.sc-gates{border-top:1.5px solid var(--ink);margin:0 0 26px;max-width:36em}
.sc-gate{display:flex;gap:18px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.sc-gate-k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);flex:0 0 5.6em}

.sc-prog{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:20px}

.sc-bar{height:3px;background:var(--paper-dark);margin:-12px 0 26px;overflow:hidden}
.sc-bar-in{height:100%;width:0;background:var(--ink);transition:width .3s ease-out}

/* Yes/No. Sized for a thumb — a four-minute instrument is answered on a phone
   as often as not. */
.sc-opts{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
.sc-opt{font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:17px 0;width:150px;cursor:pointer;transition:all .13s}
.sc-opt:hover{background:var(--ink);color:var(--paper)}
.sc-opt.is-sel{background:var(--ink);color:var(--paper)}

.sc-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.sc-step button.btn{font-family:var(--mono);cursor:pointer}
.sc-step button.btn[disabled]{opacity:.45;cursor:not-allowed}

.sc-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin:20px 0 7px}

.sc-step textarea,.sc-step input{width:100%;max-width:34em;display:block;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream);border:1.5px solid var(--line-dark);padding:13px 14px;transition:border-color .13s}
.sc-step textarea{resize:vertical}
.sc-step textarea:focus,.sc-step input:focus{outline:none;border-color:var(--ink)}

.sc-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);max-width:34em;text-align:right;margin-top:6px}
.sc-count.is-full{color:var(--red)}

.sc-err{font-family:var(--mono);font-size:13px;color:var(--red);margin:18px 0 0;max-width:34em}

/* ---- result ---- */

.sc-idx{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;border-bottom:1.5px solid var(--ink);padding-bottom:18px;margin-bottom:24px}
.sc-idx-n{font-family:var(--serif);font-size:clamp(56px,11vw,92px);line-height:.9;letter-spacing:-.03em}
.sc-idx-of{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sc-band{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid currentColor;padding:8px 14px}
.sc-band-1{color:var(--red)}
.sc-band-2{color:var(--amber)}
.sc-band-3{color:var(--green)}

.sc-cap{font-size:16px;line-height:1.6;color:var(--ink-soft);border-left:2.5px solid var(--amber);padding-left:16px;margin:0 0 28px;max-width:34em}

/* Five bars of one hue. Five categories of the same measure is a magnitude
   comparison, not five identities — colouring them differently would invent a
   distinction that is not in the data. */
.sc-dims{max-width:36em;margin:0 0 30px}
.sc-dim{display:grid;grid-template-columns:5.6em 1fr 2.8em;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.sc-dim-k{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase}
/* Both are spans, and an inline element ignores width and height — so the
   fill rendered at zero size and every bar came back empty. The track is a
   grid item and gets blockified for free; the fill has to be told. */
.sc-dim-track{display:block;height:9px;background:var(--paper-dark)}
.sc-dim-fill{display:block;height:100%;background:var(--ink-soft)}
.sc-dim.is-weakest .sc-dim-fill{background:var(--red)}
.sc-dim.is-weakest .sc-dim-k{color:var(--red)}
.sc-dim-v{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-align:right}

/* ---- the written assessment ---- */

.sc-writing{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:22px;margin-top:8px;max-width:36em}
.sc-writing-dot{flex:0 0 auto;width:8px;height:8px;background:var(--red);animation:sc-pulse 1.3s ease-in-out infinite}
@keyframes sc-pulse{0%,100%{opacity:1}50%{opacity:.2}}

.sc-r-title{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);line-height:1.2;letter-spacing:-.015em;margin:26px 0 10px;max-width:18em}
.sc-r-headline{font-size:18px;line-height:1.55;color:var(--ink);margin:0 0 22px;max-width:34em}
.sc-r-para{font-size:16.5px;line-height:1.68;color:var(--ink-soft);margin:0 0 16px;max-width:34em}
.sc-r-h{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;margin:34px 0 16px;padding-bottom:9px;border-bottom:1.5px solid var(--ink);max-width:36em}
.sc-r-finding{border-left:2.5px solid var(--line-dark);padding:2px 0 2px 16px;margin:0 0 20px;max-width:34em}
.sc-r-finding h4{font-size:16.5px;margin:0 0 6px}
.sc-r-finding p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0}
.sc-r-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-dark);padding:2px 7px;margin-top:9px}
.sc-r-step{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);max-width:36em}
.sc-r-step h4{font-size:16.5px;margin:0 0 5px}
.sc-r-step p{font-size:15.5px;line-height:1.62;color:var(--ink-soft);margin:0}
.sc-r-when{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.sc-r-link{margin-top:26px}

.sc-ff4{border-top:1px solid var(--line);margin-top:34px;padding-top:22px;max-width:36em}
.sc-ff4-thanks{font-family:var(--mono);font-size:12.5px;color:var(--green)}

/* Only shown once a result exists — an "assessment written by a model" note
   sitting under an empty screen would be describing nothing. */
.sc-prov{display:none;margin-top:38px;padding-top:16px;border-top:1px solid var(--line);max-width:36em}
.sc-step.is-active .sc-prov.is-shown{display:block}
.sc-prov-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sc-prov p{font-size:13.5px;line-height:1.62;color:var(--ink-soft);margin-top:9px}

@media(max-width:640px){
  .sc-main{padding:36px 0 72px}
  .sc-r-step{grid-template-columns:1fr;gap:5px}
  .sc-opt{flex:1 1 auto;width:auto;min-width:130px}
  .sc-gate{flex-direction:column;gap:4px}
  .sc-gate-k{flex:none}
}