/* Typing Speed Test. Functional layout before the design pass; existing tokens only.
   Characters: untyped --ink-2, typed right --ink, wrong and extra --state-wrong with an underline
   (D6: never color alone), letters left out of a finished word underlined with a dotted line. The
   caret and the current word's highlight take no width, so nothing moves while typing. The field is a
   real <input> laid over the text, invisible, at 16px so iOS doesn't zoom on focus. */

.b-typing { padding-block: var(--s3) var(--s7); }
.b-typing__intro { margin-bottom: var(--s3); }
.b-typing__intro h1 { font-size: 24px; }
.b-typing__intro p { margin-top: var(--s1); max-width: 60ch; }

/* ---------- test card ---------- */
.b-typing__game { max-width: 760px; display: grid; gap: var(--s3); padding: var(--s3); }
@media (min-width: 400px) { .b-typing__game { padding: var(--s4); } }
.b-typing__game:focus { outline: none; }
.b-typing__settings { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); border: 0; margin: 0; padding: 0; min-width: 0; }
.b-typing__settings:disabled { opacity: .6; }
.b-typing__settings .seg span { min-width: 44px; }
.b-typing__bar { display: flex; align-items: center; gap: var(--s2) var(--s4); min-height: 44px; }
.b-typing__bar .stat { min-width: 64px; }
.b-typing__hint { flex: 1; min-width: 0; color: var(--ink-2); font-size: 14px; }
.b-typing__bar .btn { touch-action: manipulation; }

.b-typing__toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 15px; }
.b-typing__toggle:has(input:disabled) { opacity: .6; }
/* ---------- text (D6) ---------- */
.b-typing__text {
  --lh: 40px;
  position: relative; height: calc(3 * var(--lh)); overflow: hidden;
  padding-inline: var(--s1); border-radius: 8px;
  font-size: 22px; font-stretch: 100%; line-height: var(--lh); color: var(--ink-2);
}
@media (max-width: 400px) { .b-typing__text { --lh: 34px; font-size: 19px; } }
.b-typing__text:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.b-typing[data-phase="aborted"] .b-typing__text { opacity: .5; }
.b-typing__line { height: var(--lh); white-space: nowrap; }
.b-typing__line-in { display: inline-block; }
.b-typing__word { display: inline-block; margin-right: .5em; border-radius: 4px; }
.b-typing__word.is-current { box-shadow: 0 0 0 3px var(--surface-2); background: var(--surface-2); }
.b-typing__word .is-ok { color: var(--ink); }
.b-typing__word .is-bad, .b-typing__word .is-extra { color: var(--state-wrong); text-decoration: underline 2px; text-underline-offset: 4px; }
.b-typing__word .is-missed { text-decoration: underline dotted 2px; text-underline-offset: 4px; }
.b-typing__word.is-wrong { text-decoration: underline 2px var(--state-wrong); text-underline-offset: 4px; }
.b-typing__word .is-caret { box-shadow: inset 2px 0 0 var(--ink); }
.b-typing__word.is-caret-end::after {
  content: ''; display: inline-block; width: 0; height: 1.1em; margin-right: -2px;
  border-right: 2px solid var(--ink); vertical-align: -0.2em;
}

.b-typing__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; cursor: text;
}

.b-typing__source { font-size: 14px; margin-top: calc(-1 * var(--s2)); }

/* ---------- results (D9) ---------- */
.b-typing__results { display: grid; gap: var(--s3); padding-top: var(--s2); }
.b-typing__results:focus, .b-typing__results h2:focus { outline: none; }
.b-typing__chart .history-chart { display: block; width: 100%; height: auto; max-width: 560px; }
.b-typing__legend { font-size: 14px; }
.b-typing__best { font-weight: 700; }

.b-typing__past { display: grid; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.b-typing__history { border-collapse: collapse; font-size: 14px; }
.b-typing__history th, .b-typing__history td { text-align: left; padding: 4px var(--s3) 4px 0; border-bottom: 1px solid var(--line); }
.b-typing__history th { font-weight: 600; color: var(--ink-2); }
.b-typing__history .num { font-variant-numeric: tabular-nums; }

/* ---------- about ---------- */
.b-typing__about { max-width: 68ch; margin-top: var(--s7); }
.b-typing__about h2 { margin-top: var(--s6); }
.b-typing__about h3 { margin-top: var(--s5); }
.b-typing__about p, .b-typing__about ol, .b-typing__about ul { margin-top: var(--s3); }
.b-typing__about li + li { margin-top: var(--s1); }
.b-typing__keys { border-collapse: collapse; font-size: 15px; margin-top: var(--s3); } /* as 2048's */
.b-typing__keys th, .b-typing__keys td { text-align: left; padding: 6px var(--s4) 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.b-typing__keys th { font-weight: 600; white-space: nowrap; }