/* Конструктор тестов, часть 2 задания 06: плитки формата, ошибки у полей,
   постоянная панель настроек, предпросмотр-экран ученика и телефонный режим.
   Старые правила редактора лежат в library-workspace.css — здесь только новое. */

/* ——— Формат вопроса плитками (B-4) */
.test-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; margin: 0 0 16px; }
.test-type-tile {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.test-type-tile .test-type-icon { grid-row: 1 / 3; align-self: start; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.test-type-tile .test-type-icon svg { width: 18px; height: 18px; }
.test-type-tile strong { font-size: 14px; font-weight: 700; line-height: 1.25; }
.test-type-tile small { color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.test-type-tile:hover { border-color: var(--accent); }
.test-type-tile[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.test-type-tile[aria-pressed="true"] .test-type-icon { background: var(--accent); color: var(--on-accent, #fff); }

/* Кнопка «Дублировать вопрос» — такая же спокойная, как «Удалить». */
.test-editor .test-question-copy {
  width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important;
  padding: 0 !important; border-radius: 11px !important; display: flex; align-items: center; justify-content: center;
  align-self: center !important; margin: 0 !important;
  background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none;
}
.test-editor .test-question-copy:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ——— Ошибки у полей (B-5) */
.test-editor .is-invalid,
.test-editor .is-invalid input,
.test-editor .is-invalid textarea,
.test-editor .is-invalid select { border-color: var(--danger, #c0392b); }
.test-editor textarea.is-invalid, .test-editor input.is-invalid, .test-editor select.is-invalid { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger, #c0392b) 45%, transparent); }
.test-editor .test-answer-flag.is-invalid { border-color: var(--danger, #c0392b) !important; }
.test-question-problems { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border-radius: 13px; background: color-mix(in srgb, var(--danger, #c0392b) 9%, transparent); }
.test-problem { margin: 0; color: var(--danger, #c0392b); font-size: 14px; line-height: 1.4; }
.test-outline-problem { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; margin-left: auto; border-radius: 50%; background: color-mix(in srgb, var(--danger, #c0392b) 16%, transparent); color: var(--danger, #c0392b); }
.test-outline-problem svg { width: 16px; height: 16px; }
.test-problem-jump { display: block; width: 100%; text-align: left; }

/* ——— Настройки теста: панель, а не <details> (B-7, C-2) */
.test-settings { padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-card); overflow: hidden; }
.test-settings-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.test-settings-toggle::after { content: '▾'; margin-left: 4px; color: var(--ink-soft); transition: transform .15s; }
.test-settings[data-open="false"] .test-settings-toggle::after { transform: rotate(-90deg); }
.test-settings-toggle .test-settings-label { font-weight: 700; flex: none; }
.test-settings-toggle .test-settings-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.test-settings-toggle .test-settings-subject::before { content: '· '; }
.test-settings-toggle .test-settings-percent { margin-left: auto; flex: none; color: var(--ink-soft); }
.test-settings-body { padding: 0 14px 14px; }
.test-editor .test-settings .test-meta-panel { margin: 0; gap: 12px; grid-template-columns: 1fr 1fr; }
.test-points-total { margin: 2px 0 0; }
.test-question-extra { margin: 0 0 14px; }
.test-extra-toggle { padding: 6px 0 !important; border: 0 !important; background: none !important; color: var(--ink-soft) !important; font-size: 14px !important; }
.test-extra-toggle[aria-expanded="true"] { color: var(--accent) !important; }
.test-question-extra-body { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* ——— Предпросмотр = экран ученика (B-6) */
.test-preview-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.test-preview-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.test-preview-devices { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.test-preview-device { padding: 5px 10px !important; min-height: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--ink-soft) !important; font-size: 13px !important; }
.test-preview-device[aria-pressed="true"] { background: var(--paper-card) !important; color: var(--ink) !important; box-shadow: var(--shadow-tight); }
/* Рамка ведёт себя как страница теста: на компьютере — колонка 860 px, как
   .test-shell у ученика, на телефоне — 390 px. */
.test-preview-frame { flex: 1; min-height: 0; overflow: auto; padding: 4px 4px 24px; border-radius: 16px; background: var(--paper); }
.test-preview-frame > * { width: min(860px, 100%); margin-inline: auto; }
.test-preview-frame[data-device="phone"] > * { width: min(390px, 100%); }
/* Шапка окна библиотеки — flex, а внутри предпросмотра <header> теста должен
   остаться колонкой, иначе плашки уезжают за край. */
.test-preview-frame .test-hero { display: grid; gap: 8px; align-items: start; padding: 0; border: 0; background: none; }
.test-preview-frame .test-hero h1 { font-size: 1.6rem; margin: 0; }
.test-preview-frame .test-meta { flex-wrap: wrap; }
.test-preview-frame .test-form { display: grid; gap: 12px; margin-top: 16px; }
.test-preview-frame .test-question { padding: 20px 18px; border-radius: 16px; }
.test-preview-frame .test-actions { position: static; }
/* «Телефон» должен показывать именно телефонную раскладку. Правила test.css —
   медиазапросы по ширине окна, внутри узкой панели они не срабатывают, поэтому
   повторяем их для рамки предпросмотра. */
.test-preview-frame[data-device="phone"] .test-question { padding: 18px 14px; border-radius: 18px; }
.test-preview-frame[data-device="phone"] .test-actions { align-items: stretch; flex-direction: column; }
.test-preview-frame[data-device="phone"] .test-actions .btn { width: 100%; min-height: 48px; }
.test-preview-frame[data-device="phone"] .test-question__top { display: grid; grid-template-columns: auto 1fr auto; align-items: start; }
.test-preview-frame[data-device="phone"] .test-question__number { grid-column: 1 / 3; }
.test-preview-frame[data-device="phone"] .test-question__points { grid-column: 3; grid-row: 1; }
.test-preview-frame[data-device="phone"] .test-question__top > span:nth-child(2) { grid-column: 1 / -1; }
.test-preview-frame .test-question--focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Включённый предпросмотр отдаёт экрану ученика всё окно. Вернуться —
   переключателем «Редактор» в панели сверху, она остаётся на месте. */
.test-desktop--preview { grid-template-columns: minmax(0, 1fr); }
.test-desktop--preview > .test-desktop-sidebar,
.test-desktop--preview > .test-desktop-main { display: none; }

/* Переключатель «Редактор / Как увидит ученик» */
.test-modes { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.test-mode { white-space: nowrap; padding: 7px 13px !important; min-height: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--ink-soft) !important; font-size: 14px !important; }
.test-mode[aria-pressed="true"] { background: var(--paper-card) !important; color: var(--ink) !important; box-shadow: var(--shadow-tight); }

/* ——— Список вопросов: перетаскивание указателем (B-9) */
.test-outline-grip { display: flex; align-items: center; justify-content: center; width: 30px; height: 27px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); cursor: grab; touch-action: none; }
/* Ширина — как у стрелок ↑↓: колонка списка ровно 30px, шире вылезает полоса прокрутки. */
.test-outline-grip svg { width: 18px; height: 18px; }
.test-outline-grip:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.test-outline-row.is-dragging { opacity: .75; cursor: grabbing; box-shadow: var(--shadow-soft); }

/* ——— Панель над вопросом и телефонные элементы (B-10) */
.test-editor-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex: none; }
.test-preview-toggle { margin-left: auto; }
.test-outline-open { display: none; }
.test-mobile-nav { display: none; gap: 8px; margin-top: 14px; }
.test-more-wrap { position: relative; }
.test-more { min-width: 44px; }
.test-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; gap: 2px; min-width: 232px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-card); box-shadow: var(--shadow-soft); }
.test-more-item { display: block; width: 100%; padding: 9px 11px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; text-align: left; }
.test-more-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent) !important; }
.test-outline-sheet { width: min(520px, calc(100vw - 20px)); max-height: 80dvh; }
.test-outline-sheet .test-outline { max-height: 62dvh; overflow: auto; }
.test-paste-area { width: 100%; min-height: 220px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; line-height: 1.5; }

/* ——— Вопросы кабинета вместо window.confirm */
.ask-dialog { width: min(440px, calc(100vw - 28px)); }
.ask-dialog h2 { margin: 0 0 8px; font-size: 1.15rem; }
.ask-actions { margin-top: 18px; flex-wrap: wrap; }
.ask-danger { border-color: var(--danger, #c0392b) !important; background: var(--danger, #c0392b) !important; color: #fff !important; }

@media (max-width: 700px) {
  /* Экран одного вопроса: список вопросов уезжает в лист «Вопросы (7)». */
  .test-editor .test-desktop-sidebar > h3,
  .test-editor .test-desktop-sidebar > .test-outline { display: none; }
  .test-outline-open { display: inline-flex; }
  .test-editor-bar { flex-wrap: nowrap; }
  .test-mode { padding: 7px 9px !important; font-size: 13px !important; }
  .test-outline-open { padding: 8px 10px !important; font-size: 13px !important; white-space: nowrap; }
  /* Сначала вопрос, настройки — под ним. */
  .test-editor .test-desktop-main { order: 1; }
  .test-editor .test-desktop-sidebar { order: 2; }
  .test-sheet-add { width: 100%; margin-top: 12px; }
  .test-mobile-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .test-type-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  /* На телефоне у плитки только название: со значком слева длинные слова
     («Соответствие») ломались посередине. */
  .test-type-tile { grid-template-columns: minmax(0, 1fr); padding: 10px 9px; min-height: 46px; align-content: center; }
  .test-type-tile .test-type-icon { display: none; }
  .test-type-tile strong { font-size: 13px; line-height: 1.25; }
  .test-type-tile small { display: none; }
  .test-editor .test-settings .test-meta-panel { grid-template-columns: 1fr; }
  .test-editor-footer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  .test-editor-footer .library-primary { grid-column: 1; min-height: 48px !important; font-size: 15px !important; }
  .test-editor-footer .test-footer-save { display: none; }
  .test-editor-footer .test-more-wrap { grid-column: 2; }
  .test-more-menu { right: 0; min-width: 210px; }
  /* Фон под окном не прокручивается вместе с редактором. */
  .test-editor { overscroll-behavior: contain; }
}