/* task-screen.css — экран одного таска у ребёнка (blox70 #6, public/task-screen.js).
   Телефон — главный размер (375px): колонка на всю ширину, задание крупно. На ПК та же колонка,
   просто ограничена по ширине — читать задание строкой в 900px неудобно. */

/* плашка на Домашке теперь открывается тапом — она обязана выглядеть нажимаемой уже в покое
   (lingo-ui §12): курсор-рука, а на касание — лёгкое проседание, как у кнопки */
.rect.ropen{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rect.ropen:active{transform:scale(.995)}
.rect.ropen:focus-visible{outline:none;box-shadow:var(--ring)}

.tsc{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding-bottom:28px}

/* ‹ Задание 2 из 5 › — те же стрелки, что листают уроки на Домашке, только по таскам листа */
.tsc-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tsc-arr{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);
  font-size:var(--fs-lg);cursor:pointer;box-shadow:var(--sheet-1)}
.tsc-arr:disabled{color:var(--faint);border-color:var(--line-soft);box-shadow:none;cursor:default}
.tsc-pos{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}

/* «учитель изменил задание — переделай» стоит НАД заданием. Не тревога (красный — только настоящая
   беда, skill §11), поэтому акцентная подложка схемы. «Вернули» — теперь плашка учителя (blox71 #1) */
.tsc-banner{padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--accent-line);
  background:var(--accent-tint);color:var(--ink);font-weight:700;font-size:var(--fs-md)}
/* плашка учителя (blox71 #1, стили — .tplate в style.css) под баннером правки — с зазором */
.tsc-ret{display:flex;flex-direction:column;gap:8px}
.tsc-ret:empty{display:none}

/* шапка — та же «страница с рельсом», что плашка на Домашке: цвет рельса = сдаваемый/нет/челлендж.
   Рельс — не граница, а предмет у левого края (как ::before у .rect), поэтому лестница толщин линий
   его не касается */
.tsc-head{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 16px 26px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--sheet-edge)}
.tsc-head::before{content:'';position:absolute;left:6px;top:10px;bottom:10px;width:7px;
  border-radius:var(--r-2xs);background:var(--rail)}
.tsc-type{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.tsc-chal{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
/* САМО задание — крупно (запрос владельца). Переводы строк учителя сохраняем, длинная ссылка
   переносится, а не распирает экран */
.tsc-text{font-size:clamp(var(--fs-xl), 2.6vw, var(--fs-2xl));line-height:1.4;font-weight:var(--fw-read);color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty}
.tsc-note,.tsc-file{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-md);color:var(--muted);
  overflow-wrap:anywhere;white-space:pre-wrap}
.tsc-file{font-weight:600;white-space:normal}
/* «что делать» — подсказка, не задание: тише, в своей плашке, чтобы не спорить с текстом */
.tsc-how{padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--muted-strong);line-height:1.4}

.tsc-work{display:flex;flex-direction:column;gap:12px}
.tsc-player{width:100%}
/* плеер сам по себе ограничен по ширине (player.css) — на экране таска он стоит во всю колонку,
   иначе на ПК он прижимался влево и выглядел оторванным от задания над ним */
.tsc-player .lp{max-width:none;width:100%;box-sizing:border-box}

/* мини-превью страницы: картинка слева, подпись справа, вся строка — кнопка. Место под картинку
   держит сама рамка (ширина и пропорция страницы), поэтому догрузка скана ничего не сдвигает */
.tsc-page{display:flex;align-items:center;gap:14px;width:100%;padding:10px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:var(--ink);
  font:inherit;cursor:pointer;box-shadow:var(--sheet-1)}
.tsc-thumb{flex:0 0 auto;width:96px;aspect-ratio:3/4;border-radius:var(--r-xs);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line-soft)}
.tsc-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tsc-page-lbl{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;
  font-size:var(--fs-md);font-weight:700;overflow-wrap:anywhere}
.tsc-page-open{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-sm);color:var(--accent-deep)}

.tsc-go{align-self:stretch}
.tsc-host{display:flex;align-items:center;gap:6px;margin-top:-6px;font-size:var(--fs-sm);color:var(--muted);
  overflow-wrap:anywhere}
.tsc-recbtn{align-self:flex-start}

.tsc-state{display:flex;flex-direction:column;gap:12px}
/* «🤔 жду», витрина челленджа и «Мой ответ» — те же классы, что на плашке (.rect), их стили
   живут в style.css рядом с плашкой: один предмет — один класс (lingo-ui §7) */
.tsc-status{font-size:var(--fs-md);font-weight:700;color:var(--muted)}
.tsc-status.ok{color:var(--ok)}
/* главное действие — во всю ширину колонки, под большой палец */
.tsc-bar{display:flex;flex-direction:column;gap:10px}
.tsc-bar .btn{width:100%;min-height:52px;--btn-fs:var(--fs-lg)}