/* English book additions to the engine's cards. Load after engine.css.
   Amber = the error, green = fixed, coral = a wrong tap or a wrong letter (books/english/BOOK.md). */

/* the typed-answer control, cloned from site/french/ch02 (accent keys removed; the one key left replays the word) */
.typed { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; }
.typed .box { width: 11ch; height: 64px; margin: 0; padding: 0 14px; font: 500 40px "Iowan Old Style", Palatino, Georgia, serif; text-align: left; vertical-align: baseline; }
.typed .box::placeholder { color: var(--good); opacity: .45; }
.akey { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; height: 64px; padding: 0 12px; border-radius: 14px;
  border: 2px solid var(--edge); background: var(--board, #1d2b27); color: var(--chalk); font: 500 36px/1 "Iowan Old Style", Palatino, Georgia, serif; cursor: pointer; }
.akey small { font: 600 11px/1 "Avenir Next", "Segoe UI", Arial, sans-serif; color: var(--dim); margin-top: 4px; }
.akey:hover:not(:disabled) { border-color: var(--quiz); }
.akey:disabled { opacity: .3; cursor: default; }
.en-replay svg { width: 30px; height: 30px; color: var(--quiz); }
.screen .typed .box { height: 84px; font-size: 52px; }
.screen .akey { height: 84px; min-width: 84px; font-size: 46px; }

/* the sentence to fix, and the wide box under it */
.en-sent { margin: 0 0 14px; text-align: center; font: 500 34px/1.35 "Iowan Old Style", Palatino, Georgia, serif; color: var(--chalk); }
.screen .en-sent { font-size: 44px; margin-bottom: 26px; }
.en-fix .box { width: min(100%, 30ch); font-size: 32px; }
.screen .en-fix .box { width: min(100%, 34ch); font-size: 40px; }

/* the reader's attempt, letter by letter (or token by token), with one place ringed or pointed at */
.en-attempt, .en-answer { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 12px; font: 500 36px/1.2 "Iowan Old Style", Palatino, Georgia, serif; color: var(--chalk); }
.en-attempt[hidden], .en-answer[hidden] { display: none; }
.en-line { font-size: 28px; }
.screen .en-attempt, .screen .en-answer { font-size: 46px; }
.screen .en-line { font-size: 34px; }
.en-attempt .l, .en-answer .l { display: inline-block; min-width: .4em; padding: 0 .06em; border-radius: 10px; text-align: center; }
.en-attempt .ring { box-shadow: 0 0 0 3px var(--bad); color: var(--bad); animation: pop .3s ease-out; }
.en-attempt .ptr { box-shadow: inset 0 -4px 0 var(--task); color: var(--task); position: relative; animation: pop .3s ease-out; }
.en-attempt .ptr::after { content: "\25B2"; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font: 700 16px/1 var(--ui); color: var(--task); }
.en-attempt .gap { color: var(--faint); }
.en-attempt.good, .en-answer { color: var(--good); }

/* tap the wrong tokens: pills, the look of french.js pill() and the sentence blocks */
.en-toks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.en-tok { display: inline-flex; align-items: center; min-height: 56px; padding: 6px 22px; border-radius: 999px; border: 2px solid var(--edge); background: var(--board, #1d2b27);
  color: var(--chalk); font: 500 30px "Iowan Old Style", Palatino, Georgia, serif; cursor: pointer; }
.en-tok kbd { margin: 0 .5em 0 0; font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.en-tok.slot { color: var(--faint); }
.en-tok:hover:not(:disabled) { border-color: var(--dim); }
.en-tok.on { border-color: var(--task); color: var(--task); }
.en-tok.bad { border-color: var(--bad); color: var(--bad); animation: shake .45s ease-out; }
.en-tok.miss { box-shadow: 0 0 0 4px var(--task); }
.en-tok.good { border-color: var(--good); color: var(--good); }
.en-tok:disabled { cursor: default; opacity: 1; }
.band .body.en-tap { max-width: 600px; }
.band .en-toks { gap: 8px; }
.band .en-tok { min-height: 48px; font-size: 26px; padding: 4px 16px; }
.band:has(.en-tap) .acts { flex-direction: column; align-items: stretch; gap: 8px; }
.band:has(.en-tap) .acts .btn { padding: 8px 22px; font-size: 20px; }
.screen .en-tok { font-size: 38px; min-height: 72px; padding: 8px 28px; }

@media (prefers-reduced-motion: reduce) { .en-attempt .ring, .en-attempt .ptr, .en-tok.bad { animation: none; } }