/* ============================================================================
   WRITING SPRINT  (URL: /writing/sprint)   — a Monkeytype-style typing trainer
   tuned for IELTS. Theme-aware: every colour comes from the shared tokens in
   00-base.css, so dark/light "just work". Rendered by 23-writing-sprint.js.
   ============================================================================ */

/* ---- takeover: hide the rest of the site, keep the top nav, drop the footer -- */
body.sprint-mode > section:not(#writing-sprint-page),
body.sprint-mode > #home{ display:none !important; }
body.sprint-mode{ position:relative; }
body.sprint-mode > header{ position:relative; z-index:50; }
body.sprint-mode > #writing-sprint-page{ position:relative; z-index:1; }
body.sprint-mode > footer{ display:none !important; }

#writing-sprint-page{
  --ws-err:   #ff6b7a;   /* mistyped letter  */
  --ws-extra: #d6455a;   /* extra letter     */
  --ws-dim:   color-mix(in srgb, var(--muted) 62%, transparent);
  min-height: calc(100vh - 70px);
  padding: 8px 20px 60px;
}
:root[data-theme="light"] #writing-sprint-page{ --ws-err:#e11d48; --ws-extra:#be123c; }

.ws-wrap{ max-width: 1000px; margin: 0 auto; }

/* ------------------------------- header ----------------------------------- */
.ws-head{
  display:flex; align-items:center; gap:18px;
  padding: 14px 0 10px; position:relative;
}
.ws-back{
  position:absolute; left:0; top:10px;
  font-size:13px; font-weight:600; color:var(--muted);
  text-decoration:none; padding:6px 10px; border-radius:10px;
  border:1px solid transparent; transition:.18s;
}
.ws-back:hover{ color:var(--text); border-color:var(--glass-line); background:var(--glass); }

.ws-brand{ display:flex; align-items:center; gap:14px; margin:0 auto; text-align:left; }
.ws-logo{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  font-size:26px; border-radius:16px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--lime) 22%,transparent), color-mix(in srgb,var(--cyan) 18%,transparent));
  border:1px solid var(--glass-line);
  box-shadow: 0 10px 26px -12px color-mix(in srgb,var(--lime) 60%, transparent);
}
.ws-brand h1{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800;
  font-size:24px; line-height:1.05; letter-spacing:-.5px;
  background:linear-gradient(100deg,var(--lime),var(--cyan) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ws-brand p{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* live HUD (top-right) */
.ws-live{
  position:absolute; right:0; top:6px;
  display:flex; align-items:center; gap:14px;
  padding:8px 14px; border-radius:14px;
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter: blur(8px);
}
.ws-live-left{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:22px;
  color:var(--lime); min-width:34px; text-align:center; font-variant-numeric:tabular-nums;
}
.ws-live-left.urgent{ color:var(--ws-err); animation: wsPulse .5s ease infinite; }
.ws-live-sep{ width:1px; height:24px; background:var(--glass-line); }
.ws-live-metric{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.ws-live-metric b{ font-size:16px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.ws-live-metric i{ font-size:10px; font-style:normal; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-top:3px; }

@keyframes wsPulse{ 50%{ transform:scale(1.14); } }

/* ------------------------------ config bar -------------------------------- */
.ws-config{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  margin: 8px auto 26px; max-width:920px;
}
.ws-seg{
  display:inline-flex; align-items:center; gap:2px; padding:4px;
  border-radius:14px; background:var(--glass); border:1px solid var(--glass-line);
}
.ws-seg.ws-modes{ padding:5px; }
.ws-pill{
  appearance:none; border:0; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--muted);
  padding:7px 13px; border-radius:10px; background:transparent;
  transition:.16s; white-space:nowrap; line-height:1;
}
.ws-pill.sm{ font-size:12px; padding:6px 10px; }
.ws-pill:hover{ color:var(--text); background:var(--chip-bg-hover); }
.ws-pill[aria-pressed="true"]{
  color:var(--on-lime); background:var(--lime);
  box-shadow:0 4px 14px -6px color-mix(in srgb,var(--lime) 80%,transparent);
}
.ws-modes .ws-pill[aria-pressed="true"]{ font-weight:700; }
.ws-toggles .ws-pill[aria-pressed="true"]{ background:var(--cyan); color:var(--on-lime); }
.ws-edit-custom{ color:var(--cyan); }

/* ------------------------------ typing stage ------------------------------ */
.ws-stage{ position:relative; min-height:220px; }

.ws-surface{
  position:relative; max-width:900px; margin:0 auto;
  height:170px; overflow:hidden; outline:none; cursor:text;
  padding:6px 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%);
}
.ws-hidden-input{
  position:absolute; opacity:0; pointer-events:none; width:1px; height:1px;
  top:0; left:0; z-index:-1;
}
.ws-words{
  position:relative; display:flex; flex-wrap:wrap; align-content:flex-start;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, 'Cascadia Code', 'Native Emoji', monospace;
  font-size:29px; line-height:1.55; letter-spacing:.2px;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.ws-word{ display:inline-flex; margin: 0 .55ch 6px 0; padding-bottom:2px; }
.ws-word.skipped{ box-shadow: inset 0 -2px 0 color-mix(in srgb,var(--ws-err) 70%,transparent); }
.ws-l{ color:var(--ws-dim); transition: color .06s; }
.ws-l.correct{ color:var(--text); }
.ws-l.incorrect{ color:var(--ws-err); }
.ws-l.extra{ color:var(--ws-extra); opacity:.85; }

/* caret — the hero of the motion: buttery glide + smooth idle blink */
.ws-caret{
  position:absolute; left:0; top:0; width:3px; height:34px;
  background:var(--lime); border-radius:3px; z-index:3;
  box-shadow: 0 0 10px color-mix(in srgb,var(--lime) 75%,transparent);
  transition: transform .12s cubic-bezier(.25,.55,.35,1), height .12s ease;
  animation: wsBlink 1.1s ease-in-out infinite;
}
.ws-stage.running .ws-caret{ animation:none; }   /* solid while actively typing */
@keyframes wsBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* focus-lost veil */
.ws-blur-note{
  position:absolute; inset:0; display:none; place-items:center;
  font-size:14px; font-weight:600; color:var(--muted);
  background:color-mix(in srgb,var(--bg) 45%,transparent); backdrop-filter:blur(3px);
  border-radius:12px; z-index:4;
}
.ws-stage.blurred .ws-words{ filter:blur(4px); opacity:.5; }
.ws-stage.blurred .ws-caret{ opacity:0; }
.ws-stage.blurred .ws-blur-note{ display:grid; }

/* ------------------------------ footnote ---------------------------------- */
.ws-footnote{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px;
  margin-top:30px; font-size:12px; color:var(--muted);
}
.ws-footnote b{
  display:inline-block; padding:2px 7px; border-radius:6px; color:var(--text);
  background:var(--glass); border:1px solid var(--glass-line);
  font-size:11px; font-weight:700; margin-right:4px;
}
.ws-footnote .ws-tip{ opacity:.75; }

/* ============================== FREE MODES ================================= */
.ws-free{ max-width:900px; margin:0 auto; }
.ws-free-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.ws-free-badge{
  font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px;
  background:color-mix(in srgb,var(--lime) 16%,transparent); color:var(--lime);
  border:1px solid color-mix(in srgb,var(--lime) 34%,transparent);
}
.ws-free-badge.zen{ background:color-mix(in srgb,var(--violet) 16%,transparent); color:var(--violet); border-color:color-mix(in srgb,var(--violet) 34%,transparent); }
.ws-free-stats{ display:flex; gap:16px; font-size:13px; color:var(--muted); }
.ws-free-stats b{ color:var(--text); font-size:16px; font-variant-numeric:tabular-nums; }
.ws-free-stats .ws-f-clock b{ color:var(--cyan); }

.ws-target{ margin-bottom:10px; }
.ws-target-bar{ height:8px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line); overflow:hidden; }
.ws-target-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--lime),var(--cyan)); transition:width .4s ease; }
.ws-target-lbl{ display:inline-block; margin-top:6px; font-size:12px; color:var(--muted); }
.ws-target-lbl.met{ color:var(--lime); font-weight:700; }

.ws-textarea{
  width:100%; min-height:340px; resize:vertical;
  font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; font-size:18px; line-height:1.7;
  color:var(--text); background:var(--input-bg); border:1px solid var(--card-border);
  border-radius:16px; padding:20px 22px; outline:none; transition:.18s;
}
.ws-textarea:focus{ border-color:color-mix(in srgb,var(--lime) 55%,transparent); background:var(--input-bg-focus); box-shadow:0 0 0 4px var(--ring-lime); }
.ws-free-foot{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }

/* -------------------------------- buttons --------------------------------- */
.ws-btn{
  appearance:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:12px; color:var(--text);
  background:var(--glass); border:1px solid var(--glass-line); transition:.16s;
}
.ws-btn:hover{ background:var(--chip-bg-hover); transform:translateY(-1px); }
.ws-btn.primary{ background:var(--lime); color:var(--on-lime); border-color:transparent; box-shadow:0 10px 26px -12px color-mix(in srgb,var(--lime) 80%,transparent); }
.ws-btn.primary:hover{ filter:brightness(1.05); }
.ws-hint{ font-size:12px; color:var(--muted); }

/* ================================ RESULTS ================================= */
.ws-results{ max-width:760px; margin:0 auto; animation: wsFade .4s ease; }
@keyframes wsFade{ from{ opacity:0; transform:translateY(8px); } }

.ws-res-top{ display:flex; align-items:stretch; gap:18px; margin-bottom:20px; }
.ws-res-hero{
  flex:1; padding:18px 22px; border-radius:20px; position:relative;
  background:var(--card-bg); border:1px solid var(--card-border);
}
.ws-res-hero.alt{ flex:.8; }
.ws-res-k{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
.ws-res-v{
  font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; letter-spacing:-1px;
  font-size:64px; line-height:1; color:var(--lime); font-variant-numeric:tabular-nums;
}
.ws-res-hero.alt .ws-res-v{ color:var(--cyan); font-size:52px; }
.ws-pb{
  position:absolute; top:16px; right:18px; font-size:11px; font-weight:700;
  padding:4px 9px; border-radius:999px; color:var(--muted);
  background:var(--glass); border:1px solid var(--glass-line);
}
.ws-pb.new{ color:var(--on-lime); background:var(--lime); border-color:transparent; animation: wsPop .5s ease .6s both; }
@keyframes wsPop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); } }

/* chart */
.ws-chart{ position:relative; margin-bottom:18px; padding:14px 8px 6px; border-radius:18px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.ws-chart-svg{ width:100%; height:190px; display:block; }
.ws-grid{ stroke:var(--glass-line); stroke-width:1; }
.ws-axis{ fill:var(--muted); font-size:10px; font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; }
.ws-line-raw{ fill:none; stroke:color-mix(in srgb,var(--cyan) 55%,transparent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.7; }
.ws-line-wpm{ fill:none; stroke:var(--lime); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--lime) 45%,transparent)); }
.ws-chart-legend{ position:absolute; top:12px; right:16px; display:flex; gap:12px; font-size:11px; }
.ws-chart-legend span{ display:flex; align-items:center; gap:5px; color:var(--muted); }
.ws-chart-legend span::before{ content:''; width:12px; height:3px; border-radius:2px; }
.ws-chart-legend .lg-wpm::before{ background:var(--lime); }
.ws-chart-legend .lg-raw::before{ background:color-mix(in srgb,var(--cyan) 55%,transparent); }
.ws-chart-empty{ padding:36px; text-align:center; color:var(--muted); font-size:14px; }

/* stat tiles */
.ws-res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.ws-tile{ padding:14px 16px; border-radius:16px; background:var(--card-bg-soft); border:1px solid var(--card-border); }
.ws-tile-k{ font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:5px; }
.ws-tile-v{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:700; font-size:26px; color:var(--text); font-variant-numeric:tabular-nums; }
.ws-chars{ font-size:20px; }
.ws-chars .cc{ color:var(--text); } .ws-chars .ic{ color:var(--ws-err); }
.ws-chars .ex{ color:var(--ws-extra); } .ws-chars .mi{ color:var(--muted); }

.ws-res-mode{ text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:20px; text-transform:lowercase; letter-spacing:.3px; }
.ws-res-actions{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ------------------------------ responsive -------------------------------- */
@media (max-width: 680px){
  .ws-brand{ display:none; }
  .ws-head{ justify-content:space-between; padding-top:8px; }
  .ws-back{ position:static; }
  .ws-live{ position:static; }
  .ws-words{ font-size:23px; }
  .ws-surface{ height:150px; }
  .ws-res-top{ flex-direction:column; }
  .ws-res-v{ font-size:52px; }
  .ws-res-grid{ grid-template-columns:repeat(2,1fr); }
  /* The 6-mode segment is ~400px wide and bled off both screen edges on a
     phone. Let the pills wrap inside the segment instead of overflowing. */
  .ws-config{ padding-inline:12px; }
  .ws-seg{ flex-wrap:wrap; justify-content:center; max-width:100%; }
}
/* Finger-sized pills on touch devices (they are 27px tall by default — well
   under the ~44px comfortable tap target). Mouse users keep the compact look;
   the max-width arm also covers phone-width viewports on any pointer type. */
@media (pointer:coarse), (max-width:900px){
  .ws-pill{ padding:11px 15px; }
  .ws-pill.sm{ padding:10px 13px; }
}

/* ============================================================================
   MOTION & POLISH  — entrance, focus-dim, per-key feedback, results flair
   ============================================================================ */

/* ---- entrance: staggered fade-up on open ---------------------------------- */
@keyframes wsEnter{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.ws-head{     animation: wsEnter .6s cubic-bezier(.22,.61,.36,1) both; }
.ws-config{   animation: wsEnter .6s cubic-bezier(.22,.61,.36,1) .07s backwards; }
.ws-stage{    animation: wsEnter .6s cubic-bezier(.22,.61,.36,1) .14s backwards; }
.ws-footnote{ animation: wsEnter .6s cubic-bezier(.22,.61,.36,1) .21s backwards; }

@keyframes wsWordsIn{ from{ opacity:0; transform:translateY(6px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }
.ws-words{ animation: wsWordsIn .45s cubic-bezier(.22,.61,.36,1) backwards; }

/* ---- focus mode: fade the chrome away while typing (Monkeytype-style) ------ */
.ws-config, .ws-brand, .ws-footnote, .ws-back{ transition: opacity .55s ease; }
#writing-sprint-page.ws-focus .ws-config,
#writing-sprint-page.ws-focus .ws-brand,
#writing-sprint-page.ws-focus .ws-footnote,
#writing-sprint-page.ws-focus .ws-back{ opacity:.28; }
#writing-sprint-page.ws-focus .ws-config:hover{ opacity:1; }        /* reveal on hover */

/* ---- speed-reactive ambient glow behind the words ------------------------- */
.ws-stage{ position:relative; }
.ws-stage::before{
  content:''; position:absolute; left:8%; right:8%; top:-6%; bottom:-6%; z-index:-1; pointer-events:none;
  background: radial-gradient(58% 74% at 50% 50%, color-mix(in srgb, var(--lime) 26%, transparent), transparent 72%);
  filter: blur(42px);
  opacity: calc(.04 + var(--speed, 0) * .34);   /* subtle; driven by recent pace */
  transition: opacity 1.1s ease;
}

/* ---- caret: a touch more glow --------------------------------------------- */
.ws-caret{ box-shadow: 0 0 14px 1px color-mix(in srgb, var(--lime) 85%, transparent); }

/* ---- live progress bar along the bottom of the surface -------------------- */
.ws-progress{ position:absolute; left:0; right:0; bottom:0; height:2px; }
.ws-progress i{ display:block; height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--lime), var(--cyan));
  box-shadow:0 0 10px color-mix(in srgb,var(--lime) 80%,transparent); transition: width .3s linear; }

/* ---- results: staggered entrance ------------------------------------------ */
.ws-results{ position:relative; }
.ws-res-hero{ animation: wsEnter .5s ease both; }
.ws-res-hero.alt{ animation-delay:.08s; }
.ws-chart{ animation: wsEnter .5s ease .12s both; }
.ws-res-grid .ws-tile{ animation: wsEnter .5s ease both; }
.ws-res-grid .ws-tile:nth-child(1){ animation-delay:.16s; }
.ws-res-grid .ws-tile:nth-child(2){ animation-delay:.22s; }
.ws-res-grid .ws-tile:nth-child(3){ animation-delay:.28s; }
.ws-res-grid .ws-tile:nth-child(4){ animation-delay:.34s; }

/* ---- results: premium STATIC gradient hero numbers (no distracting loop) --- */
.ws-res-v{
  background:linear-gradient(125deg, var(--lime), #dff59a 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ws-res-hero.alt .ws-res-v{
  background:linear-gradient(125deg, var(--cyan), #b8f6ff 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- results: personal-best shine sweep ----------------------------------- */
.ws-res-hero.pb-new{ overflow:hidden; }
.ws-res-hero.pb-new::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,var(--lime) 34%,transparent), transparent);
  transform:skewX(-18deg); animation: wsShine 1.5s ease .45s 1;
}
@keyframes wsShine{ from{ left:-70%; } to{ left:150%; } }

/* ---- results chart: area fill + glowing end dot --------------------------- */
.ws-area{ opacity:0; animation: wsAreaIn .9s ease .35s forwards; }
.ws-dot{ fill:var(--lime); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--lime) 90%,transparent));
  opacity:0; animation: wsAreaIn .4s ease 1.05s forwards, wsDotPulse 1.9s ease-in-out 1.5s infinite; }
@keyframes wsAreaIn{ to{ opacity:1; } }
@keyframes wsDotPulse{ 0%,100%{ r:3.4; } 50%{ r:4.5; } }

/* ---- confetti burst on a new personal best -------------------------------- */
.ws-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:6; }
.ws-confetti i{ position:absolute; top:-14px; width:8px; height:13px; border-radius:2px; opacity:.95;
  animation: wsFall cubic-bezier(.4,.15,.6,1) forwards; }
@keyframes wsFall{
  0%{ transform: translateY(0) translateX(0) rotate(0); opacity:1; }
  100%{ transform: translateY(440px) translateX(var(--dx,0)) rotate(600deg); opacity:0; }
}

/* ---- respect reduced-motion preferences ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ws-head,.ws-config,.ws-stage,.ws-footnote,.ws-words,
  .ws-res-hero,.ws-chart,.ws-res-grid .ws-tile,.ws-area,.ws-dot,.ws-caret{ animation:none !important; }
  .ws-res-v{ animation:none; background:none; color:var(--lime); -webkit-text-fill-color:var(--lime); }
  .ws-res-hero.alt .ws-res-v{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); }
  .ws-stage::before{ display:none; }
}