/* ═══════════════════════════════════════════════════════════════════
   scoutselect.css — ScoutSelect (robotics world: carbon pink)
   Field intelligence. The maths is set as instruments, the product is
   shown as it ships, and the engine runs live on the bench. Inside the
   engine three hues carry meaning: pink is you, volt is probability,
   jade is live.
   ═════════════════════════════════════════════════════════════════ */

.chapter-body > .body-text, .chapter-body > .body-quote { max-width: 66ch; }


/* ── the product, as it ships ─────────────────────────────────────── */

/* ── chapter one: three mathematical instruments ──────────────────── */
@media (max-height: 860px) { .math-head { position: static; } }
.math-strip { display: grid; gap: 12px; margin-top: 6px; }
.math-cell {
  gap: 12px; padding: 18px 20px 18px; border-radius: 0; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 22px),
    var(--bg-raise);
}
.math-cell::after {   /* the instrument's lit top edge */
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.math-viz { width: 120px; height: 44px; overflow: visible; }
.math-viz .mv-dot circle { fill: var(--text-3); }
.math-viz .mv-hot circle, .math-viz .mv-hotdot { fill: var(--accent); }
.math-viz .mv-br, .math-viz .mv-ln, .math-viz .mv-ring { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-linecap: round; }
.math-viz .mv-dash { stroke-dasharray: 2 3; }
.math-viz .mv-prior { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 3 3; }
.math-viz .mv-post { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.math-formula {
  font: 500 clamp(15px, 0.8rem + 0.4vw, 19.5px)/1.45 var(--f-mono); color: var(--text);
  overflow-wrap: anywhere;
}
.math-desc { font: 500 11.5px/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
html[lang="zh-CN"] .math-desc { letter-spacing: 0.04em; }

/* ── chapter two: six systems, eight parts, one live URL ──────────── */
.systems .card { border-radius: 0; }
.sys-ico {
  width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px;
  border-radius: 0; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.sys-ico svg { width: 21px; height: 21px; }
.feat-sub { font: 500 12.5px/1.55 var(--f-mono); color: var(--text-3); }
.stack-head { margin: clamp(72px, 9vw, 128px) 0 22px; }
.spec-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .spec-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .spec-4 { grid-template-columns: minmax(0, 1fr); } }

.live-callout {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 0;
  background:
    radial-gradient(70% 140% at 0% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 48px),
    var(--bg-raise);
  box-shadow: 0 40px 100px -50px color-mix(in srgb, var(--accent) 55%, transparent);
}
.live-text { flex: 1 1 300px; display: grid; gap: 8px; min-width: 0; }
.live-label { font: 600 11.5px/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em; color: var(--accent); }
html[lang="zh-CN"] .live-label { letter-spacing: 0.04em; }
.live-url { font: 700 clamp(30px, 1.2rem + 2.4vw, 58px)/1 var(--f-disp); letter-spacing: -0.045em; color: var(--text); overflow-wrap: anywhere; }
.live-sub { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.live-btn { flex: none; }

/* ── chapter three: in competition ────────────────────────────────── */
.usage { border-radius: 0; margin-top: 6px; }
.live-p { --gold: var(--accent); }
.live-p a[style] { background: none; padding-bottom: 0; }
.comp-timeline { margin-top: 0.8em; }
.comp-timeline .row-t { font-size: clamp(17px, 0.9rem + 0.5vw, 22px); }

/* ── what this proves ─────────────────────────────────────────────── */
.insights .card { border-radius: 0; }
.insight-card .insight-num {
  font: 700 clamp(40px, 1.6rem + 1.6vw, 56px)/1 var(--f-disp); letter-spacing: -0.05em; text-transform: none;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ── the engine: #simTerminal, an instrument on the bench ─────────── */
.ss-demo { background: radial-gradient(60% 45% at 82% 16%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.sim-terminal {
  --c-you: var(--accent); --c-prob: var(--w-research); --c-live: var(--w-community);
  font-variant-numeric: tabular-nums;
}
.sim-terminal::before {   /* a faint plotting grid under the whole instrument */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.45;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000, transparent 90%);
  mask-image: radial-gradient(90% 80% at 50% 30%, #000, transparent 90%);
}
.sim-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}
.sim-header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.sim-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.sim-live-badge {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 11px; border-radius: var(--r-pill);
  font: 600 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-live);
  border: 1px solid color-mix(in srgb, var(--c-live) 40%, transparent); background: color-mix(in srgb, var(--c-live) 10%, transparent);
}
.sim-live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ss-pulse 2s ease-in-out infinite; }
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.sim-event-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--f-mono); color: var(--text-2); }
.sim-countdown { font: 500 12px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--text-3); }
.sim-refresh-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); font: 600 12px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.sim-refresh-btn::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--accent); border-right-color: transparent; }
.sim-refresh-btn:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sim-refresh-btn.spinning::before { animation: ss-spin 0.65s linear; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
html[lang="zh-CN"] :is(.sim-live-badge, .sim-refresh-btn) { letter-spacing: 0.04em; }

/* KPI strip */
.sim-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.sim-kpi { padding: 18px 20px; background: var(--bg-raise); transition: background-color 0.3s; }
.sim-kpi:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg-raise)); }
.sim-kpi-lbl { margin-bottom: 10px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.sim-kpi-val { font: 700 clamp(24px, 1rem + 1.2vw, 34px)/1 var(--f-disp); letter-spacing: -0.04em; color: var(--text); }
.sim-kpi-val.gold { color: var(--c-you); }
.sim-kpi-val.cyan { color: var(--c-prob); }
.sim-kpi-val.green { color: var(--c-live); }
.sim-kpi-sub { margin-top: 8px; font: 500 12px/1.3 var(--f-mono); color: var(--text-3); }

/* body: role detection | picks + win probability */
.sim-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); border-bottom: 1px solid var(--line); }
.sim-col { min-width: 0; }
.sim-col:first-child { border-right: 1px solid var(--line); }
.sim-panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 2.5%, transparent);
  font: 600 11px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.sim-panel-hd span + span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--text-3); text-align: right; }
.sim-role-tbl { width: 100%; border-collapse: collapse; }
.sim-role-tbl th { padding: 10px 14px; background: transparent; border-bottom: 1px solid var(--line); font: 500 10.5px/1.2 var(--f-mono); letter-spacing: 0.12em; color: var(--text-3); }
.sim-row td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background-color 0.2s; }
.sim-row:last-child td { border-bottom: 0; }
.sim-row:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.sim-row.sim-me td { background: color-mix(in srgb, var(--c-you) 10%, transparent); }
.sim-row.sim-me td:first-child { box-shadow: inset 2px 0 0 var(--c-you); }
/* the ported rows carry legacy inline sizes; set the data in mono, legibly */
.sim-row td:nth-child(1), .sim-row td:nth-child(3), .sim-row td:nth-child(n+5) { font-family: var(--f-mono) !important; font-size: 13px !important; }
.sim-row td:nth-child(n+5) { color: var(--text-2) !important; }
.sim-row sup { font: 600 10px/1 var(--f-mono) !important; letter-spacing: 0.1em; }
.sim-role-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.rb-cap { color: var(--c-you); border-color: color-mix(in srgb, var(--c-you) 40%, transparent); background: color-mix(in srgb, var(--c-you) 10%, transparent); }
.rb-first { color: var(--c-prob); border-color: color-mix(in srgb, var(--c-prob) 36%, transparent); background: color-mix(in srgb, var(--c-prob) 8%, transparent); }
.rb-second { color: var(--text-2); border-color: var(--line-2); }
.rb-bubble { color: var(--text-3); border-color: var(--line); }

.sim-right-col { display: flex; flex-direction: column; }
.sim-pick-body { display: grid; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sim-pick-item { display: grid; grid-template-columns: 26px 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sim-pick-rank { font: 600 12px/1 var(--f-mono); color: var(--text-3); }
.sim-pick-team { font: 700 16px/1 var(--f-disp); letter-spacing: -0.02em; color: var(--text); }
.sim-pick-bars { display: grid; gap: 6px; }
.sim-pick-bar-meta { display: flex; justify-content: space-between; align-items: baseline; }
.sim-pick-bar-lbl { font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.sim-pick-bar-val { font: 700 12.5px/1 var(--f-mono); color: var(--c-prob); }
.sim-pick-track { height: 4px; border-radius: 0; background: var(--line); overflow: hidden; }
.sim-pick-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c-prob) 35%, transparent), var(--c-prob)); transition: width 1s var(--ease); }
.sim-pick-delta { font: 700 14px/1 var(--f-disp); color: var(--c-live); white-space: nowrap; }
.sim-prob-body { flex: 1; padding: 18px 20px 20px; }
.sim-prob-vs { margin-bottom: 10px; font: 500 12.5px/1.4 var(--f-mono); color: var(--text-3); }
.sim-prob-num { margin-bottom: 12px; font: 700 clamp(44px, 1.6rem + 2.6vw, 68px)/0.95 var(--f-disp); letter-spacing: -0.05em; color: var(--c-prob); }
.sim-prob-track { height: 8px; margin-bottom: 10px; border-radius: 0; background: var(--line); overflow: hidden; }
.sim-prob-fill { position: relative; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c-prob) 30%, transparent), var(--c-prob)); transition: width 1.2s var(--ease); }
.sim-prob-fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.8; }
.sim-prob-ci { font: 500 12px/1.5 var(--f-mono); color: var(--text-3); }

/* Monte Carlo distribution + snake draft */
.sim-mc-row { padding: 14px 20px 18px; }
.sim-mc-lbl { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.sim-mc-lbl span:last-child { letter-spacing: 0.04em; text-transform: none; white-space: nowrap; }
.sim-mc-svg { display: block; width: 100%; height: 64px; }
.sim-mc-svg .mc-bar { fill: color-mix(in srgb, var(--c-prob) 22%, transparent); }
.sim-mc-svg .mc-win { fill: color-mix(in srgb, var(--c-prob) 62%, transparent); }
.sim-mc-svg .mc-mid { stroke: var(--text-3); vector-effect: non-scaling-stroke; }
.sim-draft-row { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.sim-draft-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; font: 600 11px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.sim-draft-hd span + span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--text-3); }
.sim-draft-rounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sim-draft-round { min-width: 0; }
.sim-draft-round-lbl { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.sim-draft-round-lbl em { font-style: normal; color: var(--accent); }
.sim-draft-slots { display: grid; gap: 6px; }
.sim-draft-slot { display: grid; grid-template-columns: 30px 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 0; border: 1px solid var(--line); transition: background-color 0.25s; }
.sim-draft-slot.taken { background: color-mix(in srgb, var(--c-prob) 6%, transparent); border-color: color-mix(in srgb, var(--c-prob) 18%, var(--line)); }
.sim-draft-slot.my-pick { background: color-mix(in srgb, var(--c-you) 12%, transparent); border-color: color-mix(in srgb, var(--c-you) 50%, transparent); }
.sim-draft-slot.future { border-style: dashed; }
.sd-pick-num { font: 500 11.5px/1 var(--f-mono); color: var(--text-3); text-align: right; }
.sd-team-num { font: 700 16px/1 var(--f-disp); letter-spacing: -0.02em; color: var(--text-2); }
.my-pick .sd-team-num { color: var(--c-you); }
.future .sd-team-num { color: var(--text-3); }
.sd-opr-col { display: grid; gap: 3px; min-width: 0; }
.sd-cap-tag, .sd-opr-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.2 var(--f-mono); color: var(--text-3); }
.taken .sd-opr-val { color: var(--c-prob); }
.my-pick .sd-opr-val { color: var(--c-you); }
.sd-badge { padding: 4px 8px; border-radius: var(--r-pill); font: 600 10px/1 var(--f-mono); letter-spacing: 0.1em; white-space: nowrap; }
.sd-badge-taken { color: var(--c-prob); background: color-mix(in srgb, var(--c-prob) 12%, transparent); }
.sd-badge-yours { color: var(--on-accent); background: var(--c-you); }
.sd-badge-future { color: var(--text-3); border: 1px solid var(--line-2); }
.sim-draft-note { margin-top: 14px; font: 500 12.5px/1.6 var(--f-mono); color: var(--text-3); }
.sim-draft-note strong { color: var(--text); font-weight: 600; }
@keyframes simValFlash { 0% { opacity: 0.25; } 100% { opacity: 1; } }
.sim-val-in { animation: simValFlash 0.4s var(--ease); }

@media (max-width: 900px) {
  .sim-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-body { grid-template-columns: minmax(0, 1fr); }
  .sim-col:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .sim-role-tbl th:nth-child(n+5), .sim-row td:nth-child(n+5) { display: none; }
  .sim-draft-rounds { grid-template-columns: minmax(0, 1fr); }
  .sim-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-header { padding-left: 14px; }
  .sim-header-left { flex-basis: 100%; }
}