/* ============================================================================
   css/sprint.css -- free quant sprint (quant-interview-practice-test.html)
   Start card + results extras. Run/results views reuse css/mock.css (js/mock.js
   in mode 'sprint'). Fixed-height slots on the start card so the JS paint
   (pool count, personal best, signed-in line) does not shift the page.
   ============================================================================ */
/* Tool page: header, the card, footer. Nothing else, so the card is the centre. */
.sp-page { max-width: 760px; margin: 0 auto; padding: 56px 20px 96px; min-height: calc(100vh - var(--nav-height, 64px) - 40px); }
.sp-head { text-align: center; margin: 0 auto 28px; max-width: 560px; }
.sp-h1 { font: 800 clamp(30px, 4.4vw, 40px)/1.12 var(--font-sans, Inter, system-ui, sans-serif); letter-spacing: -.02em; color: var(--text-bright); margin: 0 0 10px; }
.sp-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.sp { max-width: none; padding: 0; margin: 0; }
.sp .mk-card { margin-bottom: 14px; }
.sp-start { padding: 22px 24px 18px; }
.sp-row { margin-top: 16px; }
.sp-row:first-child { margin-top: 0; }
.sp-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px;
  padding: 11px 12px; border-radius: 12px; border: 1px solid var(--mk-line); background: transparent;
  color: var(--text-primary); text-align: left; cursor: pointer; font-family: var(--font-sans, Inter, system-ui, sans-serif);
  transition: border-color .15s, background .15s;
}
.sp-preset:hover { border-color: var(--accent-border); }
.sp-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-preset__t { font-weight: 800; font-size: 14.5px; color: var(--text-bright); line-height: 1.2; }
.sp-preset__s { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.sp-preset.is-on { border-color: var(--accent); background: var(--mk-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sp-preset.is-on .sp-preset__t { color: var(--accent); }
.sp-row--n { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-row--n .mk-label { margin: 0; }
.sp-go { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mk-line); display: flex; align-items: center; gap: 16px; }
.sp-startbtn { flex: none; min-width: 196px; }
.sp-sum { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); min-height: 21px; }
.sp-sum b { color: var(--text-bright); }
.sp-err { color: var(--mk-bad); }
.sp-best { margin: 12px 0 0; font-size: 13.5px; color: var(--text-secondary); min-height: 20px; }
.sp-best b { color: var(--text-bright); font-family: var(--font-mono, monospace); }
.sp-adv { margin-top: 12px; border-radius: 10px; background: var(--bg-secondary); }
.sp-adv summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 13.5px; color: var(--accent); list-style: none; border-radius: 10px; }
.sp-adv summary::-webkit-details-marker { display: none; }
.sp-adv summary::before { content: "+"; display: inline-block; width: 1.2em; font-family: var(--font-mono, monospace); }
.sp-adv[open] summary::before { content: "-"; }
.sp-adv summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-adv__b { padding: 0 14px 14px; }
.sp-adv__b .mk-sec:first-child { margin-top: 4px; }
.sp-adv__b .mk-sec { margin-top: 16px; }
.sp-adv__note { margin-top: 14px; }
.sp-acct { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; min-height: 20px; }
.sp-acct a, .sp-save a:not(.mk-btn) { color: var(--accent); font-weight: 700; text-decoration: none; }
.sp-acct a:hover, .sp-save a:not(.mk-btn):hover { text-decoration: underline; }

/* results extras */
.sp-pb { margin: 14px 0 0; font-size: 14px; color: var(--text-secondary); }
.sp-pb.is-new { color: var(--mk-ok); font-weight: 700; }
.sp-share { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mk-line); }
.sp-share__row { display: flex; gap: 8px; align-items: stretch; }
.sp-share__in { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.sp-share__in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp .mk-recnote:empty { display: none; }
.sp-share__ok { margin: 6px 0 0; min-height: 18px; font-size: 12.5px; color: var(--text-secondary); }
.sp-save .mk-muted { max-width: 60ch; }
.sp-save .mk-actions { margin-top: 14px; }

/* keep primary link-buttons white whatever the page's link colour */
.sp a.mk-btn--primary, .sp a.mk-btn--primary:hover { color: #fff; }

@media (max-width: 640px) {
  .sp-page { padding: 20px 16px 72px; min-height: 0; }
  .sp-head { margin-bottom: 16px; }
  .sp-h1 { font-size: 27px; margin-bottom: 6px; }
  .sp-lede { font-size: 14.5px; }
  .sp-start { padding: 16px 14px 14px; }
  .sp-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-preset { min-height: 60px; padding: 10px; }
  .sp-go { flex-direction: column; align-items: stretch; gap: 10px; }
  .sp-startbtn { width: 100%; min-width: 0; }
  .sp-sum { min-height: 42px; font-size: 13.5px; }
  .sp-acct { min-height: 40px; }
  .sp-share__row { flex-direction: column; }
}