/* Таблица значений в тексте вопроса. */
.qtbl-wrap{overflow-x:auto;margin:10px 0 2px;-webkit-overflow-scrolling:touch}
.qtbl{border-collapse:collapse;font:500 13.5px var(--sans);color:#23211c;background:#fffefb}
.qtbl th,.qtbl td{border:1px solid #d3ddcd;padding:7px 14px;text-align:center;
  white-space:nowrap;min-width:44px}
.qtbl th{background:#f2f6f1;font-weight:600;color:#23382c}
.qtbl tbody tr:nth-child(even) td{background:#fbfdfa}

/* Текст вопроса теперь многострочный — поле должно расти, а не прятать строки. */
.tk-qtextarea{min-height:46px}

/* Таблица под полем вопроса — как прикреплённая картинка: её видно,
   но чёрточек разметки в поле ввода нет. */
.qtbl-att{margin:9px 0 0;padding:10px 12px 12px;border:1px solid #d3ddcd;border-radius:12px;
  background:#fbfdfa}
.qtbl-att-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:4px}
.qtbl-att-head span{font:600 11px var(--sans);color:#8a8576;letter-spacing:.05em;
  text-transform:uppercase}
.qtbl-att-x{border:0;background:none;cursor:pointer;color:#a7a293;font-size:13px;
  width:24px;height:24px;border-radius:7px}
.qtbl-att-x:hover{background:#f6efe9;color:#9a4420}
.qtbl-att .qtbl-wrap{margin:0}

/* Чертёж и таблица открываются во весь экран: в карточке вопроса это
   миниатюра, по которой ничего не разобрать. */
.tk-qimg img{cursor:zoom-in}
.qz-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:rgba(18,28,21,.86);
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.qz-back img{max-width:100%;max-height:100%;border-radius:10px;background:#fffefb}
.qz-x{position:absolute;top:16px;right:18px;border:0;background:#ffffff1f;color:#f4efe2;
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:16px}
.qz-x:hover{background:#ffffff33}

@media(max-width:600px){
  .qtbl th,.qtbl td{padding:6px 10px;font-size:13px}
}

/* Кнопки под вопросом переносятся, а не вылезают за карточку. */
.tk-qattachrow{flex-wrap:wrap}

/* ------------------------------------------------------------------ */
/* Чертёж к вопросу у ученика                                          */
/*                                                                     */
/* В styles.css картинка вопроса ограничена 240 пикселями по высоте —   */
/* это разумно для фотографии, но чертёж из построителя (900×600) при   */
/* такой высоте выходит шириной в треть карточки: подписи осей и        */
/* деления на диаграмме уже не прочитать. Даём чертежу всю ширину       */
/* карточки и ограничиваем только по высоте экрана; по нажатию он       */
/* по-прежнему открывается во весь экран.                              */
/* ------------------------------------------------------------------ */
.q-image{text-align:center;margin:10px 0 16px}
.q-image img{max-width:100%;width:auto;height:auto;max-height:min(64vh,560px);
  border-radius:12px;border:1px solid #e3ebdf;background:#fffefb;cursor:zoom-in;
  display:inline-block}
@media(max-width:820px){
  /* На телефоне ширина карточки и есть весь экран — растягиваем во всю. */
  .q-image img{width:100%;max-height:none}
}

/* ------------------------------------------------------------------ */
/* Карточка вопроса в конструкторе на узком экране                     */
/*                                                                     */
/* Кнопки и переключатели раньше вставали «лесенкой»: разной ширины,   */
/* по одной-две в ряд, с рваным правым краем. На телефоне это первое,  */
/* что бросается в глаза. Всюду, где кнопки идут рядом, делаем их      */
/* одинаковыми: либо равные доли ряда, либо во всю ширину.             */
/* ------------------------------------------------------------------ */
@media(max-width:700px){
  /* Три вида вопроса — один ряд, равные доли: «Один ответ | Несколько |
     Открытый». Раньше третий срывался на вторую строку. */
  .tk-qseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .tk-qseg .tk-qtype{width:100%;padding-left:6px;padding-right:6px;
    font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* «Прикрепить картинку» и «Чертёж и таблица» — во всю ширину, друг под
     другом: рядом их подписи не помещаются и обрезаются. */
  .tk-qattachrow{display:grid;grid-template-columns:1fr;gap:8px}
  .tk-qattachrow>button{width:100%;justify-content:center}

  /* То же самое у «Загрузить фото примера» и «Снять фото». */
  .tk-ai-photo-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .tk-ai-photo-actions>button{width:100%;justify-content:center}
}

/* Поле условия растёт под текст (высоту ставит q-table.js). Ограничение
   сверху — чтобы очень длинное условие не выталкивало кнопки с экрана. */
.tk-qtextarea{overflow-y:auto;max-height:50vh}

/* Поле баллов лежит внутри белой плашки, и своя зелёная обводка на нём
   читалась как подсветка ошибки. Подсвечиваем всю плашку, мягко. */
.tk-num:focus{box-shadow:none;border-color:transparent;background:transparent}
.tk-qpts:focus-within{border-color:#7fa07f;box-shadow:0 0 0 3px rgba(47,107,70,.10)}

/* Группа, которой сейчас нельзя выдавать задание (идёт набор, занятия
   закончены, отменена), остаётся видна, но выключена — иначе её начинают
   искать глазами и думают, что она пропала. */
.tk-stu.is-off{opacity:.5;filter:grayscale(.35);cursor:default}
.tk-stu.is-off:hover{transform:none;box-shadow:none;border-color:#e3ebdf}

/* ------------------------------------------------------------------ */
/* Чертёж в проверке задания и в результате                            */
/*                                                                     */
/* Было 280 px в ширину — на диаграмме не прочитать ни одной подписи.  */
/* И по картинке не видно, что её можно открыть во весь экран, хотя    */
/* нажатие работает. Даём ширину и подписываем прямо под рисунком:     */
/* значок лупы в углу теряется, а строчка текста — нет.                */
/* ------------------------------------------------------------------ */
.tk-rqimg{margin-left:34px;max-width:min(100%,620px);border:0;overflow:visible}
.tk-rqimg img{max-width:100%;width:auto;height:auto;max-height:min(52vh,460px);
  display:block;border-radius:10px;border:1px solid #e3ebdf;cursor:zoom-in}
.q-image img,.tk-rqimg img{cursor:zoom-in}
.q-image::after,.tk-rqimg::after{content:"Нажмите, чтобы увеличить";display:block;
  margin-top:5px;font:500 11.5px var(--sans);color:#a7a293}
.q-image:empty::after,.tk-rqimg:empty::after{content:none}
@media(max-width:820px){
  .tk-rqimg{margin-left:0;max-width:100%}
  .tk-rqimg img{width:100%;max-height:none}
}