/* Разговорная практика (site/eng-talk/app.js). Страница собрана на общем CSS
   сайта (core/assets.py) — здесь только своё, на тех же токенах, поэтому
   тёмная тема (core/theme.py) работает без отдельных правил. */
.tk{margin:6px 0 10px}
.tk-scr h2{font-family:var(--mono);font-size:18px;margin:0 0 10px}
.tk-roles{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:10px 0 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);max-width:100%}
.tk-roles button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:15px;
  padding:10px 16px;border-radius:999px;cursor:pointer}
.tk-roles button[aria-checked=true]{background:var(--primary);color:var(--on-accent,#fff);
  box-shadow:0 6px 16px -8px var(--primary)}
.tk-roles button:focus-visible,.tk-btn:focus-visible,.tk-mini:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.tk-hidden{border:1px dashed var(--pow);border-radius:14px;padding:12px 14px;margin:6px 0 12px;
  background:var(--surface)}
.tk-cap{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.tk-note,.tk-small{font-size:13.5px;color:var(--muted);line-height:1.5}
.tk-small{margin:6px 0}
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:15px;padding:11px 16px;
  border-radius:14px;cursor:pointer;text-decoration:none;min-height:44px}
.tk-btn:hover{border-color:var(--primary);color:var(--primary-ink)}
.tk-btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-accent,#fff)}
.tk-btn.primary:hover{background:var(--primary-ink);color:var(--on-accent,#fff)}
.tk-btn:disabled{opacity:.5;cursor:default}
.tk-mini{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;
  font-weight:700;padding:5px 10px;border-radius:99px;cursor:pointer}
.tk-top{display:flex;align-items:center;gap:12px;margin:4px 0 4px}
.tk-prog{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.tk-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--pow));
  transition:width .4s}
.tk-count{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.tk-task summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--primary-ink);padding:4px 0}
.tk-task p{margin:4px 0 8px;font-size:14.5px}
.tk-feed{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.tk-b{max-width:88%;padding:10px 14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);
  overflow-wrap:anywhere}
.tk-b.them{align-self:flex-start;border-bottom-left-radius:6px}
.tk-b.me{align-self:flex-end;border-bottom-right-radius:6px;background:var(--primary-soft);
  border-color:transparent}
.tk-who{display:block;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tk-en{margin:4px 0 6px;font-size:16.5px;font-weight:600}
.tk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tk-tr summary{cursor:pointer;font-size:13px;color:var(--primary-ink);font-weight:700}
.tk-tr p{margin:4px 0 0;color:var(--muted);font-size:14px}
.tk-b audio{display:block;width:100%;max-width:280px;height:36px;margin-top:4px}
.tk-flags{font-size:13px;color:var(--hint);margin:6px 0 0}
.tk-fix:empty{display:none}
.tk-fix{margin:8px 0 0;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.tk-fix p{margin:0}
.tk-fix-cap{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok)}
.tk-fix-en{font-size:16px;margin-top:2px!important}
.tk-fix-en b{color:var(--ok);font-weight:800}
.tk-fix-ok{font-size:14px;font-weight:700;color:var(--ok)}
.tk-fix-tip{font-size:13.5px;line-height:1.45;color:var(--ink);margin-top:6px!important}
.tk-fix-wait,.tk-fix-note{font-size:13px;color:var(--muted)}
.tk-fix-wait::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--primary);animation:tkspin .8s linear infinite;vertical-align:-1px}
@keyframes tkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tk-fix-wait::before{animation:none}}
.tk-turn{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--surface);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.tk-turn:empty{display:none}
.tk-goal{margin:0 0 8px;font-size:15.5px;font-weight:600}
.tk-hints{margin:8px 0 0;padding:0 0 0 2px;list-style:none;display:grid;gap:6px;font-size:15px}
.tk-actions{display:flex;flex-wrap:wrap;gap:8px}
.tk-recbox{display:flex;align-items:center;gap:10px}
.tk-level{flex:1;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.tk-level i{display:block;height:100%;width:0;background:var(--ok);transition:width .06s}
.tk-timer{font-family:var(--mono);font-weight:700}
.tk-stage{font-size:13.5px;color:var(--muted);margin:0}
.tk-textlab{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.tk-textlab textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:10px 12px;resize:vertical;min-height:52px;width:100%}
.tk-textlab textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.tk-marks{font-size:15px}
.tk-marks mark,.tk-marks mark{background:var(--hint-bg);color:inherit;border-radius:4px;padding:0 2px}
.tk-foot{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tk-h3{font-family:var(--mono);font-size:17px;margin:22px 0 4px}
.tk-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.tk-score{border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center;font-size:13px;
  color:var(--muted);display:flex;flex-direction:column;gap:2px}
.tk-sv{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--ink)}
.tk-sv small{font-size:13px;color:var(--muted)}
.tk-task-res{padding:10px 12px;border-radius:12px;background:var(--surface-2,#F4F6FC)}
.tk-task-res.tk-yes{background:var(--ok-bg)}
.tk-task-res.tk-no{background:var(--bad-bg)}
.tk-task-res.tk-partly{background:var(--hint-bg)}
.tk-err{padding-left:18px}
.tk-err li{margin:0 0 6px}
@media (max-width:480px){
  .tk-b{max-width:96%}
  .tk-scores{grid-template-columns:1fr}
  .tk-roles button{padding:10px 12px;font-size:14px}
}