/* Робота з текстом (js/trainers13.js, 17.10.2026): fix_error (fe-), punctuation (pu-), join_sentences (js-).
   Лише токени теми — світла й темна. Тремтіння й підскок вимикаються при prefers-reduced-motion. */

@keyframes te-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes te-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes te-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes te-nudge { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

/* ====================================================================== fix_error */
.fe-list { display: grid; gap: 16px; margin-top: 14px; }
.fe-item { padding: 16px 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); animation: te-in .3s ease both; transition: border-color .2s, background-color .2s; }
.fe-item.fe-complete { border-color: var(--ok-line); }
.fe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fe-n, .pu-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mag); color: var(--on-mag); font-size: 13px; font-weight: 800; }
.fe-count { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--mag); padding: 4px 10px; border-radius: 999px;
  background: var(--mag-soft); border: 1px solid var(--mag-line); }
.fe-complete .fe-count { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }

.fe-text { font-size: 18px; line-height: 2.25; color: var(--ink); font-weight: 500; }
.fe-w { cursor: pointer; padding: 3px 4px; margin: 0 -1px; border-radius: 8px; transition: background-color .15s, box-shadow .15s, color .15s; }
.fe-w:hover { background: var(--mag-soft); box-shadow: inset 0 -2px 0 var(--mag-line); }
.fe-allfound .fe-w:not(.fe-target), .fe-complete .fe-w { cursor: default; }
.fe-allfound .fe-w:not(.fe-target):hover, .fe-complete .fe-w:hover { background: none; box-shadow: none; }
.fe-w.fe-no { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad-line); animation: te-shake .35s ease; }

.fe-spot { position: relative; white-space: nowrap; }
.fe-target.fe-hit, .fe-target.fe-shownerr { cursor: default; color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad-line); animation: te-pop .3s ease; }
.fe-target.fe-shownerr { box-shadow: inset 0 0 0 2px var(--bad-line), 0 0 0 2px var(--surface-2), 0 0 0 4px var(--mag-line); }
.fe-fixed .fe-target { text-decoration: line-through 2px var(--bad); opacity: .6; background: none; box-shadow: none; animation: none; font-weight: 500; }

.fe-fix { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px; vertical-align: middle; animation: te-in .25s ease both; }
.fe-in { font: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.2; color: var(--mag); background: var(--surface); padding: 6px 10px; min-width: 7ch;
  border: 2px solid var(--mag); border-radius: 12px; box-shadow: 0 3px 0 var(--depth-mag); outline: none; }
.fe-in:focus { box-shadow: 0 3px 0 var(--depth-mag), 0 0 0 4px var(--mag-soft); }
.fe-in::placeholder { color: var(--ink-faint); font-weight: 500; }
.fe-go { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--mag); color: var(--on-mag); box-shadow: 0 3px 0 var(--depth-mag); transition: transform .08s, box-shadow .08s; }
.fe-go:active { transform: translateY(3px); box-shadow: 0 0 0 var(--depth-mag); }
.fe-go:focus-visible { outline: 3px solid var(--mag-line); outline-offset: 2px; }
.fe-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fe-fix.fe-bad .fe-in { border-color: var(--bad); color: var(--bad); box-shadow: 0 3px 0 var(--depth-bad); }
.fe-fix.fe-bad { animation: te-shake .35s ease; }

.fe-new { display: inline-block; margin: 0 4px; padding: 2px 9px; border-radius: 10px; font-weight: 800; line-height: 1.5; animation: te-pop .35s ease; }
.fe-new.fe-good { color: var(--ok); background: var(--ok-soft); box-shadow: 0 3px 0 var(--depth-ok); border: 2px solid var(--ok); }
.fe-new.fe-shown { color: var(--ok); background: var(--surface); border: 2px dashed var(--ok); }

.fe-msg { min-height: 18px; margin-top: 6px; font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }
.fe-msg .hit, .pu-msg .hit, .js-res .hit { color: var(--ok); }
.fe-why { font-weight: 500; color: var(--ink-soft); }

/* ====================================================================== punctuation */
.pu-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pu-legend .tiny { margin-right: 2px; }
.pu-legend-mark { min-width: 30px; height: 30px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 10px; font-size: 20px; font-weight: 800;
  line-height: 1; color: var(--mag); background: var(--mag-soft); border: 1px solid var(--mag-line); }
.pu-list { display: grid; gap: 16px; margin-top: 14px; }
.pu-item { padding: 16px 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); animation: te-in .3s ease both; }
.pu-item.pu-win { border-color: var(--ok-line); background: var(--ok-soft); }
.pu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.pu-text { font-size: 19px; line-height: 2.3; color: var(--ink); font-weight: 500; }
.pu-text.pu-shake { animation: te-shake .35s ease; }
.pu-tok { white-space: nowrap; }
.pu-word { white-space: nowrap; }

.pu-gap, .pu-slot { font: inherit; display: inline-flex; align-items: flex-end; justify-content: center; vertical-align: baseline; position: relative; cursor: pointer;
  padding: 0; margin: 0; border: 0; background: none; color: var(--mag); height: 1.5em; border-radius: 7px;
  transition: background-color .15s, box-shadow .15s, width .15s; }
.pu-gap { width: 18px; margin: 0 1px 0 0; }
.pu-slot { width: 9px; height: 1.25em; }
.pu-gap b, .pu-slot b { font-weight: 900; font-size: 1.15em; line-height: 1.2; }
.pu-slot b { align-self: flex-start; line-height: 1; }
/* порожнє місце — тиха риска, щоб було видно, куди тапати */
.pu-gap:not(.pu-set)::before { content: ""; position: absolute; left: 50%; bottom: .32em; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--line-strong); }
.pu-slot:not(.pu-set)::before { content: ""; position: absolute; left: 50%; top: .1em; width: 2px; height: .45em; margin-left: -1px; border-radius: 2px; background: var(--line-strong); opacity: .8; }
.pu-gap:hover, .pu-slot:hover { background: var(--mag-soft); }
.pu-gap:hover::before, .pu-slot:hover::before { background: var(--mag); }
.pu-gap:focus-visible, .pu-slot:focus-visible { outline: 2px solid var(--mag); outline-offset: 1px; }
.pu-gap.pu-set { width: auto; min-width: 14px; padding: 0 3px; background: var(--mag-soft); box-shadow: inset 0 -2px 0 var(--mag); }
.pu-slot.pu-set { width: auto; min-width: 7px; background: var(--mag-soft); }
.pu-tick { animation: te-pop .22s ease; }

.pu-gap.pu-ok, .pu-slot.pu-ok { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 -2px 0 var(--ok); }
.pu-gap.pu-x, .pu-slot.pu-x { color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.pu-gap.pu-x b, .pu-slot.pu-x b { text-decoration: line-through 2px var(--bad); }
.pu-gap.pu-x::after, .pu-slot.pu-x::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: var(--bad); transform: rotate(-35deg); border-radius: 2px; }
.pu-gap.pu-miss, .pu-slot.pu-miss { color: var(--ok); background: var(--ok-soft); box-shadow: none; outline: 2px dashed var(--ok); outline-offset: -1px; }
.pu-done .pu-gap, .pu-done .pu-slot { cursor: default; }
.pu-done .pu-gap:not(.pu-set)::before, .pu-done .pu-slot:not(.pu-set)::before { opacity: 0; }
.pu-done .pu-gap:not(.pu-set), .pu-done .pu-slot:not(.pu-set) { width: 4px; }
.pu-win .pu-text { animation: te-pop .4s ease; }

.pu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.pu-done .pu-foot .btn { display: none; }
.pu-msg { font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }

/* ====================================================================== join_sentences */
.js-list { display: grid; gap: 18px; margin-top: 14px; }
.js-item { padding: 16px 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); animation: te-in .3s ease both; transition: border-color .2s, background-color .2s; }
.js-item.js-win { border-color: var(--ok-line); background: var(--ok-soft); }
.js-item.js-bad .js-in textarea { border-color: var(--bad); animation: te-shake .35s ease; }
.js-item.js-nudge .js-link { animation: te-nudge .4s ease 2; box-shadow: 0 4px 0 var(--depth-mag), 0 0 0 4px var(--mag-soft); }

.js-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.js-sent { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 16px; background: var(--surface);
  border: 2px solid var(--line-strong); box-shadow: 0 4px 0 var(--depth); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.js-tag { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 900;
  color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line); margin-top: 1px; }
.js-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.js-link { padding: 7px 13px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  color: var(--on-mag); background: var(--mag); box-shadow: 0 4px 0 var(--depth-mag); }
.js-link.js-plus { padding: 4px 12px; font-size: 18px; }
.js-or { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: lowercase; }
.js-win .js-link { background: var(--ok); box-shadow: 0 4px 0 var(--depth-ok); }

.js-in { display: flex; gap: 10px; align-items: flex-start; }
.js-in textarea { flex: 1; margin: 0; resize: none; overflow: hidden; min-height: 50px; }
.js-win .js-in textarea { border-color: var(--ok); background: var(--surface); animation: te-pop .35s ease; }
.js-shown .js-in textarea { opacity: .75; }
.js-win .js-go, .js-shown .js-go { display: none; }
.js-item > .t-key { display: none; }
:root[data-view="teacher"] .js-item > .t-key { display: block; margin: 8px 0 0; }
.js-res { min-height: 18px; margin-top: 8px; font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }

/* ====================================================================== телефон */
@media (max-width: 560px) {
  .fe-item, .pu-item, .js-item { padding: 13px 12px; }
  .fe-text { font-size: 17px; line-height: 2.35; }
  .fe-in { font-size: 16px; }
  .pu-text { font-size: 18px; line-height: 2.4; }
  .pu-gap { width: 22px; }
  .pu-slot { width: 12px; }
  .js-pair { grid-template-columns: 1fr; gap: 8px; }
  .js-mid { flex-direction: row; flex-wrap: wrap; }
  .js-sent { font-size: 16px; }
  .js-in { flex-direction: column; align-items: stretch; }
  .js-in .btn, .pu-foot .btn { flex: 1; }
}
@media (pointer: coarse) {
  .pu-gap { width: 22px; }
  .pu-slot { width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-item, .pu-item, .js-item, .fe-fix, .fe-new, .fe-w.fe-no, .fe-fix.fe-bad, .fe-target, .pu-tick, .pu-text.pu-shake, .pu-win .pu-text,
  .js-item.js-bad .js-in textarea, .js-item.js-nudge .js-link, .js-win .js-in textarea { animation: none !important; }
  .fe-w, .pu-gap, .pu-slot, .fe-go, .fe-item, .js-item { transition: none; }
}

/* апостроф-слоти не розтягують слово: порожній слот нульової ширини, але з широкою зоною для тапу;
   рисочку видно лише при наведенні (17.10.2026) */
.pu-slot:not(.pu-set) { width: 0 !important; min-width: 0; overflow: visible; background: transparent; }
.pu-slot:not(.pu-set)::before { opacity: 0; }
.pu-slot:not(.pu-set)::after { content: ""; position: absolute; left: -5px; right: -5px; top: 0; bottom: 0; }
.pu-slot:not(.pu-set):hover::before, .pu-slot:not(.pu-set):focus-visible::before { opacity: 1; }
.pu-slot.pu-miss { width: auto !important; }