/* ========= TYPING AREA — 2-row scroll ========= */
#word-display-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 20px;
  cursor: text;
  transition: border-color .3s;
  border-bottom: none;
  overflow: hidden;
  height: 96px; /* default md: 2 × 48px — overridden by body[data-fontsize] */
  position: relative;
}
#word-display-wrap.active-typing { border-color: var(--accent); }

/* The scrollable inner track */
#word-display-track {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  padding: 0 20px;
}

/* Each row */
.word-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 48px;
  overflow: hidden;
  gap: 0;
}
.word-row.row-past   { opacity: .22; }
.word-row.row-active { opacity: 1; }
.word-row.row-next   { opacity: .55; }

#word-display { display: none; } /* legacy hidden */

/* Characters */
.word-char {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 48px;
  color: var(--text3);
  position: relative;
  white-space: pre;
}
/* Font size — scales entire page via html base font-size (all rem values follow) */
body[data-fontsize="sm"] { font-size: 14px; }
body[data-fontsize="md"] { font-size: 16px; }
body[data-fontsize="lg"] { font-size: 18px; }

/* Text box rows also need explicit heights since they use px not rem */
body[data-fontsize="sm"] .word-char { font-size: 1.1rem;  line-height: 40px; }
body[data-fontsize="sm"] .word-row  { height: 40px; }
body[data-fontsize="sm"] #word-display-wrap,
body[data-fontsize="sm"] #text-gen-loader { height: 80px; }

body[data-fontsize="md"] .word-char { font-size: 1.35rem; line-height: 48px; }
body[data-fontsize="md"] .word-row  { height: 48px; }
body[data-fontsize="md"] #word-display-wrap,
body[data-fontsize="md"] #text-gen-loader { height: 96px; }

body[data-fontsize="lg"] .word-char { font-size: 1.6rem;  line-height: 56px; }
body[data-fontsize="lg"] .word-row  { height: 56px; }
body[data-fontsize="lg"] #word-display-wrap,
body[data-fontsize="lg"] #text-gen-loader { height: 112px; }

.word-char.correct { color: var(--correct); }
.word-char.wrong   { color: var(--wrong); text-decoration: underline; text-decoration-color: var(--wrong); }

/* ── Word wrapping for non-dashboard typing zones ──
   The dashboard uses a fixed 2-row scroll system (word-char white-space:pre is intentional).
   All other zones wrap naturally — override white-space so spans flow onto new lines. */
#race-word-display .word-char,
#import-typing-zone .word-char,
.lesson-exercise-zone .ex-text .word-char {
  white-space: normal;
  display: inline;
  line-height: 2;
}
#race-word-display {
  overflow-wrap: break-word;
  word-break: break-word;
}
#import-typing-zone {
  overflow-wrap: break-word;
  word-break: break-word;
}
.lesson-exercise-zone .ex-text {
  overflow-wrap: break-word;
  word-break: break-word;
}
body[data-caret="line"] .word-char.current::after,
body:not([data-caret]) .word-char.current::after {
  content: '';
  position: absolute;
  left: 0; top: 16%; bottom: 16%;
  width: 2px;
  background: var(--cursor);
  border-radius: 2px;
  animation: blink .75s step-end infinite;
}

/* ── CARET: block ── */
body[data-caret="block"] .word-char.current {
  background: var(--cursor);
  color: var(--bg);
  border-radius: 2px;
}

/* ── CARET: underline ── */
body[data-caret="underline"] .word-char.current::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--cursor);
  border-radius: 2px;
  animation: blink .75s step-end infinite;
}

/* ── CARET: word highlight ──
   Connected pill across the current word.
   .word-first / .word-last added by renderText for rounded caps.
   .current is the cursor position (solid accent block).
   .in-current-word is the rest of the word ahead.
*/
body[data-caret="word"] .word-char.current {
  background: var(--cursor);
  color: var(--bg);
  border-radius: 0;
}
body[data-caret="word"] .word-char.in-current-word {
  background: rgba(0,229,200,.13);
  color: var(--text);
  border-radius: 0;
}
/* Rounded left cap on first char of current word (which is .current) */
body[data-caret="word"] .word-char.word-start {
  border-radius: 3px 0 0 3px;
}
/* Rounded right cap on last char */
body[data-caret="word"] .word-char.word-end {
  border-radius: 0 3px 3px 0;
}
/* Single-char word: full pill */
body[data-caret="word"] .word-char.word-start.word-end {
  border-radius: 3px;
}
/* Theme overrides for in-current-word tint */
[data-theme="light"]  body[data-caret="word"] .word-char.in-current-word { background: rgba(0,179,160,.13); }
[data-theme="ember"]  body[data-caret="word"] .word-char.in-current-word { background: rgba(255,107,53,.13); }
[data-theme="forest"] body[data-caret="word"] .word-char.in-current-word { background: rgba(57,217,106,.13); }
[data-theme="ocean"]  body[data-caret="word"] .word-char.in-current-word { background: rgba(0,207,255,.13); }
/* No cursor ::after in word mode */
body[data-caret="word"] .word-char.current::after { display: none; }
/* Already-typed chars inside the word: keep correct/wrong colours, no highlight bg */
body[data-caret="word"] .word-char.correct,
body[data-caret="word"] .word-char.wrong { background: none; border-radius: 0; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Countdown timer overlay (shared across all typing pages) ── */
.typing-countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 5500;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(4px);
}
.typing-countdown-overlay.show { display: flex; }
.tco-num {
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  animation: tcoPop .6s cubic-bezier(.34,1.56,.64,1);
}
.tco-num.go { color: var(--success); }
.tco-label {
  font-size: 1.1rem;
  color: var(--text2);
  letter-spacing: 4px;
  text-transform: uppercase;
}
@keyframes tcoPop {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
/* Timer chip shown inside each typing stats bar */
.typing-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text2);
  padding: 4px 10px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: color .3s, border-color .3s;
  cursor: pointer;
  user-select: none;
}
.typing-timer-chip.running { color: var(--accent); border-color: rgba(0,229,200,.3); }
.typing-timer-chip.urgent  { color: var(--danger);  border-color: var(--danger);
  animation: blink .6s step-end infinite; }
.typing-timer-chip .tc-icon { font-size: .85rem; }

#typing-input-wrap {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  transition: border-color .3s;
}
#typing-input-wrap.active-typing {
  border-color: var(--accent);
  border-top-color: rgba(0,229,200,.3);
  box-shadow: 0 4px 20px rgba(0,229,200,.08);
}
#typing-input-wrap .input-icon {
  font-size: 1rem;
  color: var(--text3);
  flex-shrink: 0;
}
#typing-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  caret-color: var(--accent);
  outline: none;
}
#typing-input::placeholder { color: var(--text3); }
#typing-input-wrap .input-status {
  font-size: .72rem;
  color: var(--text3);
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}
.typing-hint {
  font-size: .72rem;
  color: var(--text3);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.typing-hint kbd {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text2);
}