/* The typing surfaces: lessons, tests, practice, games, onboarding and the
   certificate. Kept apart from application.css so the two can change at the
   same time (UX review fixes, 2026-10-11). Loaded after it (:app is
   alphabetical), and every selector here is scoped to its surface. */

/* The lesson focus bar at phone width: the back link never breaks, and the
   new keys give way before anything else does. */
.focus-bar .focus-back { white-space: nowrap; }
/* The back link is a 44px target; the 48px bar has the room, so nothing moves. */
.focus-bar .focus-back { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 479px) { .focus-bar .focus-new { display: none; } }

/* Exercise dots: 12px to see, 24px to tap. The link is the 24px box and the
   dot is drawn inside it, so the gap between dots is the hit area. */
.focus-bar .exercise-dots { gap: 0; }
.focus-bar a.dot-ex { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; background: none; border: 0; border-radius: 50%; box-shadow: none; }
.focus-bar a.dot-ex::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line-2); }
.focus-bar a.dot-ex.done::before { background: var(--ok); border-color: var(--ok); }
.focus-bar a.dot-ex.current::before { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.focus-bar a.dot-ex:hover::before { border-color: var(--accent); }
.focus-bar a.dot-ex:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* The overlay: wide enough that its one line of help stays one line on a
   computer, balanced when it has to wrap, so no word is left alone. */
.typing .overlay-card { max-width: min(36rem, 100%); }
.typing .overlay-sub { text-wrap: balance; }

/* The overlay on a touch screen: what the course needs, and the app. A tablet
   is big on BOTH sides; a phone held sideways (844 by 390) is still a phone. */
.typing .overlay-touch { display: grid; justify-items: center; gap: .55rem; }
.typing .overlay-touch .overlay-sub { margin: 0; }
.typing .overlay-touch .for-tablet { display: none; }
@media (min-width: 601px) and (min-height: 601px) {
  .typing .overlay-touch .for-phone { display: none; }
  .typing .overlay-touch .for-tablet { display: inline; }
}
.typing.touch-idle .typing-text { min-height: 14rem; }
.typing.is-touch .typing-overlay { padding: .75rem; }
.typing .btn { white-space: nowrap; }

/* The welcome form. A .choice is a flex row (radio beside its words), but
   `.form label { display: block }` outranked it, so each layout's radio sat on
   a line of its own above its name. */
.form .choice { display: flex; margin-bottom: 0; }
/* The daily goal: five pills on one row at every width, never three and two.
   Each pill gets a fifth of the row up to its desktop width; on the narrowest
   phones the type steps down, then "min" goes to the screen reader only. */
.choice-row.goal-row { display: grid; grid-template-columns: repeat(5, minmax(0, 6.5rem)); gap: .4rem; container-type: inline-size; }
.goal-row .choice.pill { min-width: 0; padding-inline: .15rem; white-space: nowrap; }
@container (max-width: 290px) { .goal-row .choice.pill { font-size: .8rem; } }
@container (max-width: 255px) { .goal-row .unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* The result panel. */
.typing .result-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--accent); margin-bottom: .2rem; }
.typing .result-complete { display: inline-flex; align-items: center; gap: .35rem; }
.new-badges .new-badge-icon { display: grid; place-items: center; color: var(--gold-ink); font-size: 1rem; flex: none; }
.typing .result-offer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.typing .result-offer-line { margin: 0; font-size: 1.05rem; }
.typing .result-offer-plan { margin: .3rem 0 0; color: var(--ink-2); font-weight: 600; }
.typing .result-offer .btn-row { margin-top: .8rem; }
/* What Checkout commits somebody to, the line /pricing carries under its buttons. */
.typing .result-offer-terms { margin: .8rem auto 0; max-width: 30rem; font-size: .85rem; color: var(--ink-2); }
.typing .result-offer-terms .cl { text-wrap: balance; }
.typing .result-offer form { margin: 0; }
/* At phone width a result's stats sit in columns and its buttons stack, one
   width, the primary on top, rather than wrapping into a ragged row. */
@media (max-width: 480px) {
  .typing .result-inner { min-width: 0; width: 100%; padding: 1.2rem 1rem; }
  .typing .result-inner .stat-row, .result-card .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem .5rem; }
  .result-card .stat-row { grid-template-columns: repeat(2, 1fr); }
  .typing .result-inner .btn-row, .result-card .btn-row { flex-direction: column; align-items: stretch; }
  .typing .result-inner .btn-row > .btn-primary, .result-card .btn-row > .btn-primary { order: -1; }
  .typing .result-inner .btn-row form .btn { width: 100%; }
}

/* The certificate withheld for accuracy: one paragraph, then the next. */
.certificate .cert-accuracy { max-width: 34rem; margin: 0 auto 1rem; }

/* The test result page. */
.result-card .result-cert-note { margin: .4rem 0 0; }

/* Games: on a touch screen with no fine pointer, the start card says the game
   needs a keyboard (the layout's notice stays off these pages). */
.game .overlay-sub { text-wrap: balance; }
.game .touch-only { display: none; margin: .5rem 0 0; }
@media (pointer: coarse) { .game .touch-only { display: block; } }
@media (any-pointer: fine) { .game .touch-only { display: none; } }
.game .touch-only a { text-decoration: underline; text-underline-offset: 2px; }

/* Games: stroke icons where emoji were. */
.game .lives { display: inline-flex; gap: .15rem; color: var(--bad); align-items: center; height: 1.87rem; }
.game .lives .life { fill: var(--bad); transition: opacity .2s; }
.game .lives .life.lost { fill: none; opacity: .35; }
.game .runner { display: grid; place-items: center; line-height: 0; }
.game .runner.you { color: var(--accent); }
.game .runner.ghost { color: var(--muted); }
.focus-bar .focus-best { white-space: nowrap; }

/* The certificate, printed on one landscape page (the print layout sets
   @page). On screen it keeps its own proportions. */
@media print {
  .print-body .certificate { max-width: none; margin: 0; padding: 0; height: 100vh; }
  .print-body .cert-border { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 3rem; }
  .print-body .cert-name { font-size: 3.6rem; }
  .print-body .cert-wpm { font-size: 5rem; }
}