/* Полоса «есть незаконченное задание» над формой конструктора.
   Тёмно-зелёная, как заметки в сводке и шапка ученика: незаконченная работа
   должна бросаться в глаза, а бледная плашка терялась среди белых карточек. */
.hwd-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:16px 0 20px;padding:14px 17px;border-radius:16px;
  background:var(--ever);border:1px solid var(--ever);
  box-shadow:0 10px 30px -22px #172b24}
.hwd-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.hwd-tx b{font:600 14px var(--sans);color:#f4efe2}
.hwd-tx b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:9px;vertical-align:middle}
.hwd-tx span{font:500 12.5px var(--sans);color:#c4cebf}
.hwd-acts{display:flex;gap:8px;flex-wrap:wrap}
/* Кнопки перекрашиваем здесь же: на тёмном фоне обычные утонули бы. */
.hwd-acts .btn-add{background:var(--gold);border-color:var(--gold);color:#23382c}
.hwd-acts .btn-add:hover{background:#d8c9a4;border-color:#d8c9a4}
.hwd-acts .slot-act{background:transparent;border:1px solid #64715f;color:#e6e2d5}
.hwd-acts .slot-act:hover{background:#ffffff14;border-color:var(--gold)}
@media(max-width:600px){
  .hwd-bar{padding:13px 14px}
  .hwd-acts{width:100%}
  .hwd-acts button{flex:1}
}

/* ------------------------------------------------------------------ */
/* Панель «Составить с ИИ».                                            */
/* ------------------------------------------------------------------ */
/* overflow:visible — обязательно. Раскрывающийся список кабинета рисует
   свою панель внутри поля; при overflow:hidden эта панель обрезалась краем
   блока, и последние пункты («11 класс», «Смешанный») просто пропадали.
   Скругление, ради которого стояло hidden, держим на самой строке-заголовке. */
.tk-ai{margin:0 0 20px;border:1px solid #cfe0d2;border-radius:16px;
  background:#f7faf6;overflow:visible}
.tk-ai>summary{display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 18px;list-style:none;color:#23382c;border-radius:15px}
.tk-ai[open]>summary{border-radius:15px 15px 0 0}
.tk-ai>summary::-webkit-details-marker{display:none}
.tk-ai>summary>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font:600 14.5px var(--sans)}
.tk-ai>summary small{font:500 12px var(--sans);color:#7d8f80}
.tk-ai-mark{flex:none;width:30px;height:30px;border-radius:50%;background:#3f5a48;color:#f4efe2;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.tk-ai-chevron{flex:none;color:#7d8f80;font-size:15px;line-height:1;transition:transform .2s}
.tk-ai[open] .tk-ai-chevron{transform:rotate(180deg)}
.tk-ai>summary:hover{background:#f0f5ef}

.tk-ai-body{display:flex;flex-direction:column;gap:13px;
  padding:4px 18px 17px;border-top:1px solid #e3ece2}
.tk-ai-body>label,.tk-ai-options label{display:flex;flex-direction:column;gap:5px;min-width:0;
  font:600 12.5px var(--sans);color:#23211c}
/* display:flex перебивает встроенное [hidden]{display:none} — возвращаем его,
   иначе поле «своими словами» торчало бы всегда. */
.tk-ai-body>label[hidden]{display:none}
.tk-ai-options label[hidden]{display:none}
/* Пункты «Задания» длинные — «Задание 13 — Тригонометрическое уравнение».
   Само поле обычной ширины, а раскрытому списку разрешаем быть шире поля:
   растягивать поле ради длинных пунктов незачем. */
.tk-ai .xsel-pop{right:auto;min-width:100%;width:max-content;max-width:min(560px,86vw)}
.tk-ai .xsel-opt{white-space:normal}
/* Строка под настройками: почему номеров заданий сейчас нет. */
.tk-ai-note{margin:-4px 0 0;font:500 12px/1.5 var(--sans);color:#8a8576}
.tk-ai-note[hidden]{display:none}
.tk-ai-muted{font-style:normal;font-weight:500;color:#8a8576}

/* 260px — минимальная ширина, при которой в список целиком помещаются
   «10–11 класс, ЕГЭ база» и «Несколько ответов»: браузер раскрывает список
   по ширине самого поля и обрезает всё, что длиннее. */
.tk-ai-options{display:grid;gap:10px 12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tk-sel{width:100%;box-sizing:border-box;padding:11px 12px;font:500 13.5px var(--sans);
  color:#23211c;background:#fbfdfa;border:1px solid #d3ddcd;border-radius:11px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6553' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
  text-overflow:ellipsis}
.tk-sel:focus{outline:none;border-color:#7fa07f;background-color:#fff;
  box-shadow:0 0 0 3px rgba(47,107,70,.14)}

.tk-ai-hint{margin:0;font:500 12px/1.55 var(--sans);color:#8a8576}
.tk-ai-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.tk-ai-status{flex:1;min-width:0;font:500 12.5px var(--sans);color:#6c8a74}
.tk-ai-status.error{color:#9a4420}

@media(max-width:520px){
  .tk-ai-options{grid-template-columns:1fr}
  /* «Составляю вопросы…» уходит под кнопки: сбоку строка не помещается
     и обрывается на полуслове. */
  .tk-ai-actions{flex-wrap:wrap}
  .tk-ai-actions button{flex:1;order:1}
  .tk-ai-status{order:2;flex:0 0 100%;text-align:left;margin-top:4px}
}
@media(max-width:600px){
  .tk-ai>summary{padding:13px 14px}
  .tk-ai-body{padding:4px 14px 15px}
  .tk-ai-actions button{flex:1}
}

/* Своего раскрывающегося списка здесь больше нет: в app.js уже есть общий
   на весь кабинет (selUpgrade, классы xsel-*). Второй такой же рисовал рядом
   с первым второе поле — это и были «двойные Класс/Уровень/Формат». */

/* ------------------------------------------------------------------ */
/* Мелочи конструктора                                                 */
/* ------------------------------------------------------------------ */
/* Подпись над предпросмотром условия: без неё серая плашка читается как
   ещё одно поле ввода, а это просто «как увидит ученик». */
.hw-math-cap{display:block;margin-bottom:5px;font:600 10.5px var(--sans);
  color:#a7a293;letter-spacing:.05em;text-transform:uppercase}

/* Пока ИИ составляет вопросы, кнопка гаснет. Она и так не нажимается, но
   выглядела как обычная — по ней жали снова и снова. */
.tk-ai-actions button:disabled{opacity:.45;box-shadow:none;filter:grayscale(.3);
  cursor:default}
.tk-ai-actions button:disabled:hover{transform:none}

/* Пока в поиске домашних заданий что-то набрано, вкладки не показываем:
   найденное лежит во всех трёх сразу, и переключатель только путал. Поле
   очистили — вкладки вернулись. */
.tk-tabrow.is-searching .tk-tabs{display:none}
.tk-tabrow.is-searching{justify-content:flex-end}

/* В mobile-final.css сетка настроек была жёсткой — «1fr 90px 1fr», и длинный
   пункт уровня в неё не помещался. Здесь она снова гибкая, и это правило идёт
   позже, поэтому побеждает. */
.tk-ai-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media(max-width:600px){
  .tk-ai-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
  .tk-ai-options label:last-child{grid-column:auto}
}
@media(max-width:420px){
  .tk-ai-options{grid-template-columns:1fr}
}