/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Блок «Предложено разобрать» в полосе «Входящие» (pult/js/screens/queue-triage.js): группы разбора, строки с флажком, чипы доказательств, «почему так».
   Макет — блок .triage в docs/queue-system/queue-system.css (имена и значения переведены на классы экрана и токены tokens.css).
   Подключён в index.html после queue.css: плитка .qp и общие .qp-prop, .qp__* описаны там, здесь — то, что относится к .qt-*.
   Блок живёт в узкой полосе (около 15 rem на 1440) и на всю ширину на 390: ничего не зависит от ширины окна, кроме касаний (≤47.9375rem — не ниже 44 px).
   Движение — только transform (стрелка группы); при prefers-reduced-motion переходов нет. */

.qt.tile { padding: var(--space-4); }
.qt .qp__b { gap: var(--space-4); }
.qt .qp__s { padding-block: var(--space-1); }

/* ---------- Группа: заголовок-кнопка, действия, раскрывающееся тело ---------- */
.qt-group { gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-line); min-width: 0; }
.qt-group:first-child, .qt-group:first-of-type { padding-top: 0; border-top: 0; }
.qt-group > * { min-width: 0; }
.qt-group > .qp-wave__t { color: var(--color-ink); }
.qt-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; margin-inline: 0; padding-inline: 0;
  color: var(--color-ink); text-align: left; white-space: normal; overflow-wrap: anywhere;
  font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.qt-toggle:hover { color: var(--color-ink); text-decoration: none; }
.qt-toggle::after {
  content: ""; flex: none; width: var(--space-2); height: var(--space-2); margin-inline-end: var(--space-1);
  border-inline-end: var(--size-focus-width) solid currentColor; border-block-end: var(--size-focus-width) solid currentColor;
  color: var(--color-ink2); transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-out);
}
.qt-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.qt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.qt-acts .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.qt-acts .btn[aria-pressed="true"] { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-on-dark); }
.qt-acts .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.qt-acts .qp__hint { flex: 1 1 100%; margin: 0; }
.qt-gb { display: grid; gap: var(--space-3); min-width: 0; }
.qt-gb > * { margin: 0; min-width: 0; }

/* ---------- Строки: флажок и текст, чипы доказательств, «почему так» ---------- */
.qt-row { gap: var(--space-2); padding-block: var(--space-3); }
.qt-row > :is(p, label) { overflow-wrap: anywhere; color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.qt-row .qz-field--check { align-items: flex-start; gap: var(--space-3); min-height: var(--size-touch-min); padding-block: var(--space-2); cursor: pointer; }
.qt-row .qz-check { margin-top: var(--space-1); }
.qt-row > :not(:first-child) { margin-inline-start: 0; }
.qt-row:has(.qz-check) > :not(:first-child) { margin-inline-start: calc(var(--size-icon) + var(--space-3)); }
.qt-row > .qt-chips { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.qt-chip { white-space: normal; }
.qt-chip[data-mark="ok"] > [aria-hidden] { color: var(--color-ok-text); }
.qt-chip[data-mark="no"] > [aria-hidden] { color: var(--color-warn-text); }
.qt-why { min-width: 0; }
.qt-why > summary {
  display: inline-flex; align-items: center; min-height: var(--size-ctl-sm); border-radius: var(--radius-xs);
  color: var(--color-ink2); cursor: pointer; text-decoration: underline; text-underline-offset: var(--space-1);
}
.qt-why > summary:hover { color: var(--color-ink); }
.qt-why[open] > summary { margin-bottom: var(--space-1); }
.qt-why > p { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; }
.qt-row > .btn { justify-self: start; max-width: 100%; white-space: normal; text-align: center; }

@media (max-width: 47.9375rem), (pointer: coarse) {
  .qt-why > summary { min-height: var(--size-touch-min); }
  .qt-acts .btn { min-height: var(--size-touch-min); }
}

@media (prefers-reduced-motion: reduce) {
  .qt-toggle::after { transition: none; }
}