/* ============================================================================
   «Сборник» – страница статьи (views/articles/show.php) и версия (version.php).
   Сверху одна строка: название слева, состояние и главная кнопка справа;
   руководителю и администратору под ней – невыполненное (одна строка – один
   пункт), статья листами прямо на сером поле, ниже – одна строка
   «Оригинальность [80] % [Комментарий] [Сохранить]». Студенту – статья и чат.
   Окна: «Одобрить» (недочёты и выбор), «История версий». Чат – area-chat.css.
   Каркас (.sb-article-grid, порядок блоков до 1200 px) – theme.css.
   ========================================================================== */

/* ---- шапка: «← Назад», название, состояние, кнопки, «Ещё» ---- */
.sb-a-head { margin-bottom: 1.25rem; }
.sb-a-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.sb-a-top > .sb-article-h1 { flex: 1 1 20rem; min-width: 0; max-width: 46rem; margin: 0; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
.sb-a-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.sb-a-acts > .sb-status { margin-right: .5rem; }
.sb-a-acts .sb-count { margin-left: .375rem; }
.sb-a-head > form { display: none; }          /* формы решений: их кнопки – в строке и в нижней панели */
.sb-a-note { margin: .375rem 0 0; color: var(--sb-ink-2); font-size: .875rem; }
.sb-a-note.is-when { font-size: .8125rem; color: var(--sb-muted); }    /* дата – одной мелкой строкой */
/* состояние статьи сменил другой (чат это видит) – одна строка под шапкой */
.sb-a-head > .chat-stale { margin-top: .75rem; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); background: #fff; }

/* «Ещё»: опасные пункты – красным; действия-формы выглядят как пункты меню */
.sb-a-acts .dropdown-menu form { margin: 0; }
.sb-a-acts .dropdown-menu form .dropdown-item,
.sb-a-acts .dropdown-menu button.dropdown-item { width: 100%; text-align: left; }

/* длинное название на телефоне – три строки, по нажатию целиком (app.js) */
@media (max-width: 767.98px) {
  .sb-a-top > .sb-article-h1 { flex-basis: 100%; }
  .sb-a-top > .sb-article-h1.is-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; cursor: pointer; }
  .sb-a-acts { width: 100%; justify-content: flex-start; }
  .sb-a-acts > .dropdown { margin-left: auto; }
  /* главные действия и «Чат» – в нижней панели, здесь их не повторяем */
  .sb-a-acts .sb-in-bar { display: none; }
}
/* нижняя панель: «Чат» по тексту, решения делят остальное; длинная подпись – в две строки */
.sb-action-bar.sb-a-bar { grid-template-columns: auto; }
.sb-a-bar .btn { white-space: normal; line-height: 1.2; }

/* ---- блоки над и под листами – ровно по ширине листа: тот же шаг, что у листа в doc.css
   (лист А4 210 мм; в колонке до 860 px – ×0,86, до 740 – ×0,74, до 560 – ×0,62, до 480 –
   во всю ширину; на экране до 900 px лист всегда во всю ширину) ---- */
.sb-a-fit { container-type: inline-size; }
.sb-a-fit > * { max-width: 210mm; margin-left: auto; margin-right: auto; }
@container (max-width: 860px) { .sb-a-fit > * { max-width: calc(210mm * .86); } }
@container (max-width: 740px) { .sb-a-fit > * { max-width: calc(210mm * .74); } }
@container (max-width: 560px) { .sb-a-fit > * { max-width: calc(210mm * .62); } }
@container (max-width: 480px) { .sb-a-fit > * { max-width: none; } }
@media (max-width: 900px) { .sb-a-fit > * { max-width: none; } }

/* ---- невыполненное (руководителю и администратору): светлая плашка, пункт – строка ---- */
.sb-a-todo { margin-bottom: var(--sb-gap); }
.sb-a-todo-box {
  display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem;
  border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); background: var(--sb-surface-2); color: var(--sb-ink); font-size: .875rem;
}
.sb-a-todo-box > .sb-ic { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--sb-warn-icon); }
.sb-a-todo-box.is-advice > .sb-ic { color: var(--sb-muted); }           /* только советы – значок серый */
.sb-a-list { list-style: none; margin: 0; padding: 0; min-width: 0; line-height: 1.45; }
.sb-a-list > li + li { margin-top: .25rem; }
.sb-a-list > li.is-advice { color: var(--sb-muted); }

/* ---- статья листами – прямо на сером поле страницы ---- */
.sb-a-paper.doc-wrap { background: none; border: 0; border-radius: 0; padding: 0; }

/* ---- «Оригинальность [80] % [Комментарий] [Сохранить]» – одна строка, поля одной высоты ---- */
.sb-a-fit.sb-a-more { margin-top: var(--sb-gap); }
.card.sb-a-plag { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 0; margin-bottom: 0; padding: var(--sb-pad); }
.sb-a-plag-l { margin: 0; color: var(--sb-ink); }
.sb-a-plag-pct { display: inline-flex; align-items: center; gap: .375rem; color: var(--sb-ink-2); }
.sb-a-plag-pct > .form-control { width: 4.5rem; text-align: right; }
.sb-a-plag > .sb-a-plag-note { flex: 1 1 12rem; width: auto; min-width: 0; }
.sb-a-plag > .btn, .sb-a-plag > .sb-a-plag-file { flex: none; }
@media (max-width: 575.98px) {
  .sb-a-plag > .sb-a-plag-note, .sb-a-plag > .btn { flex: 1 1 100%; }
}

/* ---- окно «Одобрить»: недочёты строками, галочка служебной записки, выбор ---- */
#approve-modal { --bs-modal-width: 42rem; }                            /* три кнопки выбора – в одну строку */
#approve-modal .modal-body > p { margin: 0; color: var(--sb-ink); }
html:not(.sb-kbd) .sb-a-memo .form-check-input:focus { box-shadow: none; }   /* окно ставит курсор на галочку – без рамки от мыши */
#approve-modal .sb-a-self { margin-right: auto; }                       /* «Исправить самому» – слева */
@media (max-width: 767.98px) { #approve-modal .sb-a-self { margin-right: 0; } }
.sb-a-memo { margin: .75rem 0 0; padding: .625rem .75rem .625rem 2.25rem; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); }
.sb-a-memo .form-check-label { line-height: 1.4; }
/* окно замечаний: предупреждение над полем */
.sb-a-hint { margin: 0 0 .75rem; padding: .625rem .75rem; border: 1px solid var(--sb-line); border-radius: var(--sb-radius-lg); color: var(--sb-ink-2); }

/* ---- окно «История версий»: строка – дата, кто и что мелко; вся строка нажимается ---- */
.sb-a-vers { list-style: none; margin: 0 -.5rem; padding: 0; }
.sb-a-vers a {
  display: flex; align-items: center; gap: .25rem .75rem; min-height: 40px; padding: .375rem .5rem;
  border-radius: var(--sb-radius); color: var(--sb-ink); text-decoration: none;
}
.sb-a-vers a:hover { background: var(--sb-surface-2); color: var(--sb-ink); text-decoration: none; }
.sb-a-vers-when { flex: none; font-weight: 500; }
.sb-a-vers-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--sb-muted); }
@media (max-width: 767.98px) { .sb-a-vers a { min-height: 44px; } }