/* ==========================================================================
   Sales Coach — /sales-coach. Sits on tokens.css + labs.css; this file only adds
   what the drill needs: the steps strip, the typographic product picker, the
   rubric, the buyer window's overlays, and the scorecard. No icons, no emoji —
   Raleway for words, Montserrat (.cw-num) for numbers, Roboto Mono for labels,
   and the green→teal signature only where Labs already uses it. Every var
   carries a fallback so a missing token degrades to the brand hex, not to nothing.
   ========================================================================== */

/* ----------------------------------------------------------------- hero */
.sc-hero { padding-bottom: clamp(28px, 4vh, 48px); }
.sc-hero p { max-width: 60ch; }
.sc-hero .exp-tag span { white-space: nowrap; }
.sc-hero h1 em { transition: color 200ms ease; }

.sc-steps {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none;
}
.sc-steps li {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13.5px/1 var(--cw-font-sans, 'Raleway', sans-serif); color: var(--cw-fg-2, #55565A);
}
.sc-step-n {
  font: 500 11px/1 var(--cw-font-mono, 'Roboto Mono', monospace); letter-spacing: 0.1em;
  color: var(--cw-teal-dark, #00828F);
}

/* ------------------------------------------------------------ drill band */
.sc-band { background: var(--cw-bg-1, #F6F7FB); border-top: 1px solid #ECEEF2; border-bottom: 1px solid #ECEEF2; }
.sc-drill {
  display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  padding: clamp(40px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 96px);
  max-width: 1280px; margin: 0 auto;
}
@media (max-width: 880px) {
  .sc-drill { grid-template-columns: 1fr; }
  .sc-window { order: -1; }
}

.sc-block + .sc-block { margin-top: 34px; }
.sc-label {
  margin: 0 0 12px;
  font: 700 11px/1 var(--cw-font-mono, 'Roboto Mono', monospace);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-fg-2, #55565A);
}
.sc-label-gap { margin-top: 22px; }
.sc-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--cw-fg-4, #9699A6); max-width: 46ch; }

/* --------------------------------------------------------- product select */
.sc-select-wrap {
  position: relative; display: block;
  background: #fff; border: 1.5px solid #D6DAE1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sc-select-wrap:hover { border-color: var(--cw-ink-2, #323031); }
.sc-select-wrap:focus-within { border-color: var(--cw-teal-dark, #00828F); box-shadow: var(--cw-ring-focus, 0 0 0 3px rgba(0, 176, 194, 0.35)); }
.sc-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: 14px 44px 14px 16px; border: 0; background: transparent; cursor: pointer;
  font: 600 15px/1.2 var(--cw-font-sans, 'Raleway', sans-serif); color: var(--cw-ink-2, #323031);
}
.sc-select:focus { outline: none; }
.sc-select-caret {
  position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--cw-teal-dark, #00828F); border-bottom: 2px solid var(--cw-teal-dark, #00828F);
  transform: translateY(-70%) rotate(45deg);
}

/* The product is decided once a drill starts: lock the picker. `data-stage` is set on <main> by app.js. */
.sc:not([data-stage="idle"]) .sc-select-wrap { pointer-events: none; opacity: 0.55; }

/* ---------------------------------------------------------------- rubric */
.sc-rubric { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sc-rubric li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--cw-fg-2, #55565A); }
.sc-rubric li strong { color: var(--cw-ink-2, #323031); }
.sc-rubric-pts {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; min-width: 34px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #12a150, #00919f);
}

/* ---------------------------------------------------------------- window */
.sc-window { box-shadow: 0 1px 2px rgba(20, 24, 33, 0.05), 0 32px 64px -28px rgba(20, 24, 33, 0.35); }
/* overflow:hidden on the BODY, not just the figure: the veil is absolutely positioned inside the
   body, so on a narrow screen its stacked contents used to spill upward over the title bar. */
.sc-window .window-body { background: #101215; overflow: hidden; min-height: 300px; }
.sc-window .window-veil { gap: 12px; }
@media (max-width: 640px) {
  .sc-window .window-body { aspect-ratio: 4 / 3; }
  .sc-window .btn-speak { padding: 13px 20px; font-size: 14px; }
  .sc-window .window-note { font-size: 12px; text-align: center; padding: 0 16px; }
}
.sc-video { width: 100%; height: 100%; object-fit: cover; background: #101215; }
.sc-window[data-stage="idle"] .sc-video,
.sc-window[data-stage="starting"] .sc-video,
.sc-window[data-stage="grading"] .sc-video { opacity: 0.35; }
/* A quiet gradient behind the veil while idle, so the empty window reads as a stage, not a hole. */
.sc-window[data-stage="idle"] .window-body::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(0, 176, 194, 0.22), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(105, 215, 87, 0.12), transparent 70%);
}
.sc-self {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 22%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: #000; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}
.sc-veil-product {
  margin: 0 0 6px; font: 500 15px/1.4 var(--cw-font-sans, 'Raleway', sans-serif); color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.sc-veil-product strong { font-weight: 800; color: #fff; }
.sc-window[data-stage="grading"] .window-veil { justify-content: center; background: rgba(10, 12, 14, 0.7); }
.sc-window[data-stage="grading"] .window-note::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: sc-spin 0.8s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.hud-end { background: rgba(223, 47, 74, 0.85); border-color: transparent; }
.hud-end:hover { background: rgba(223, 47, 74, 1); }

/* ------------------------------------------------------------- scorecard */
.sc-result {
  max-width: 1040px; margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(64px, 10vh, 120px);
}
.sc-result-head {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 560px) { .sc-result-head { grid-template-columns: 1fr; justify-items: start; } }

/* The ring: a conic sweep in the brand signature, driven by --sc-pct (0-100) from app.js. */
.sc-ring {
  --sc-pct: 0;
  --sc-ring-color: var(--cw-teal-dark, #00828F);
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--sc-ring-color) calc(var(--sc-pct) * 1%), #E7EAF0 0);
}
.sc-ring::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: #fff;
}
.sc-ring > * { position: relative; }
.sc-ring-pass { --sc-ring-color: var(--cw-teal-dark, #00828F); }
.sc-ring-fail { --sc-ring-color: #B3273F; }
.sc-score-num { display: block; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--cw-ink-2, #323031); }
.sc-score-of { display: block; margin-top: 6px; font: 600 11px/1 var(--cw-font-mono, 'Roboto Mono', monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-fg-4, #9699A6); }

.sc-result-copy { display: grid; gap: 14px; justify-items: start; }
.sc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--cw-font-mono, 'Roboto Mono', monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; color: #fff; background: #9699A6;
}
.sc-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
.sc-badge-pass { background: var(--cw-success-dark, #116846); }
.sc-badge-fail { background: #B3273F; }
.sc-verdict { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; font-weight: 600; color: var(--cw-ink-2, #323031); max-width: 56ch; }

.sc-result-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 5fr); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 880px) { .sc-result-grid { grid-template-columns: 1fr; } }

.sc-deductions { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sc-deductions li {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border: 1px solid #E3E6EC; border-radius: 12px; background: #fff;
}
.sc-ded-pts {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 8px; font-size: 15px; font-weight: 800;
  color: #B3273F; background: #FBE9EC;
}
.sc-ded-reason { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cw-ink-2, #323031); }
.sc-ded-quote {
  margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid #D6DAE1;
  font: italic 14px/1.55 var(--cw-font-sans, 'Raleway', sans-serif); color: var(--cw-fg-2, #55565A);
}
.sc-strengths { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sc-strengths li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--cw-fg-2, #55565A); }
.sc-strengths li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg, #12a150, #00919f);
}
.sc-strengths li::after {
  content: ''; position: absolute; left: 4.5px; top: 8px; width: 6px; height: 3.5px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg);
}
.sc-note { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--cw-ink-2, #323031); }
.sc-again { margin-top: 40px; }
.sc-result-error { border-top: 1px solid #ECEEF2; }
.sc-result-error .sc-verdict { margin-bottom: 20px; }