/* Аудит ООТ (AI-3191). Только токены из iiko.css — иначе модуль выпадает
   из палитры приложения (первая версия была на хардкоде и выглядела бледной). */

.audit-list-body, .audit-form-body, .audit-result-body {
  padding: var(--sp-4) 0 var(--sp-6);
}
.audit-point { font-size: 14px; color: var(--ink-muted); margin-bottom: var(--sp-4); }

/* ─── Список аудитов ─────────────────────────────────────────────── */
.audit-start { width: 100%; margin-bottom: var(--sp-5); }
.audit-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.audit-card-tap { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.audit-card-tap:hover { border-color: var(--ink); }
.audit-card-tap:active { transform: scale(0.995); }
.audit-card-draft { background: var(--accent-soft); border-color: var(--accent); }
.audit-card-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--sp-2);
}
.audit-card-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.audit-card-sub { font-size: 13px; color: var(--ink-subtle); margin-top: 2px; }
.audit-card-points { font-size: 13px; color: var(--ink-subtle); font-weight: 500; }
.audit-card-score {
  font-size: 26px; font-weight: 800; color: var(--ink); margin-top: var(--sp-1);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.audit-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.audit-card-sub.is-bad { color: var(--danger); }

/* Незавершённый: действие во всю ширину, удаление — урна в углу, чтобы
   деструктивная кнопка не стояла вровень с основным действием. */
.audit-card-draft { position: relative; }
.audit-card-trash {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 36px; height: 36px; padding: 0; display: flex;
  align-items: center; justify-content: center;
  border: none; border-radius: var(--r-full);
  background: transparent; color: var(--ink-subtle); cursor: pointer;
}
.audit-card-trash:hover { background: var(--danger-bg); color: var(--danger); }
.audit-card-continue { width: 100%; margin-top: var(--sp-4); }

/* Удаление на экране результата — прижата к правому краю шапки. Приглушена в
   покое и краснеет при наведении, как урна на карточке черновика: там и здесь
   это одно и то же деструктивное действие. */
.audit-header-trash { margin-left: auto; color: var(--ink-subtle); }
.audit-header-trash:not(:disabled):hover { background: var(--danger-bg); color: var(--danger); }

/* Завершённый: слева суть, справа круг с баллом во всю высоту карточки. */
.audit-card-done { display: flex; align-items: center; gap: var(--sp-4); }
.audit-card-main { flex: 1; min-width: 0; }
.audit-ring {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: var(--r-full);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.audit-ring-percent { font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.audit-ring-points { font-family: var(--font-mono); font-size: 10px; opacity: .75; }
/* Шкала: до 70% красный, до 85% жёлтый, дальше зелёный. */
.audit-ring-bad  { background: var(--danger-bg);  color: var(--danger); }
.audit-ring-warn { background: var(--warning-bg); color: var(--warning); }
.audit-ring-good { background: var(--success-bg); color: var(--success); }
.audit-ring-none { background: var(--surface-sunken); color: var(--ink-faint); }
.audit-tone-bad  { color: var(--danger); }
.audit-tone-warn { color: var(--warning); }
.audit-tone-good { color: var(--success); }
.audit-verdict {
  display: inline-block; margin-top: var(--sp-2);
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
}
.audit-verdict-ok { background: var(--success-bg); color: var(--success); }
.audit-verdict-critical { background: var(--danger-bg); color: var(--danger); }
.audit-empty, .audit-loading, .audit-error {
  padding: var(--sp-5) 0; color: var(--ink-faint); font-size: 14px;
}
.audit-error { color: var(--danger); }
.audit-history-title {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-subtle);
}

/* ─── Шапка прохождения ──────────────────────────────────────────── */
.audit-head { margin-bottom: var(--sp-5); }
.audit-author {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 15px;
}
.audit-author:focus { outline: none; border-color: var(--accent); }
.audit-progress {
  margin-left: auto; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface-sunken); color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.audit-progress.is-done { background: var(--success-bg); color: var(--success); }

/* ─── Разделы ────────────────────────────────────────────────────── */
.audit-section {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.audit-section-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer; user-select: none;
}
.audit-section-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.audit-section.is-complete .audit-section-num { background: var(--success-bg); color: var(--success); }
.audit-section-title {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25;
}
.audit-section-progress {
  flex-shrink: 0; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-sunken); color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.audit-section.is-complete .audit-section-progress {
  background: var(--success-bg); color: var(--success);
}
.audit-section-body { display: none; padding: 0 var(--sp-5) var(--sp-2); }
.audit-section.is-open .audit-section-body { display: block; }

/* ─── Пункт ──────────────────────────────────────────────────────── */
.audit-item {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
}
.audit-item-text { font-size: 15px; line-height: 1.4; color: var(--ink); margin-bottom: var(--sp-3); }
.audit-item-num { font-weight: 700; color: var(--ink-subtle); margin-right: 4px; }
/* Вес пункта — то, по чему решают, на что тратить внимание: разброс в бланке
   от 0 до 115 баллов. Поэтому плашка читаемая, а не декоративная: было
   --ink-subtle (#8a7e6b) на --surface-sunken (#efe9d8) кеглем 11 — цифру
   приходилось выискивать. */
.audit-item-weight {
  display: inline-block; margin-left: var(--sp-2); padding: 2px 8px;
  border-radius: var(--r-full); background: var(--surface-sunken);
  color: var(--ink-muted); font-family: var(--font-mono); font-size: 13px;
  font-weight: 600; white-space: nowrap; vertical-align: 1px;
}
.audit-hint-toggle {
  width: 20px; height: 20px; padding: 0; margin-left: var(--sp-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-full);
  background: var(--surface-raised); color: var(--ink-subtle);
  font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: 1px;
}
.audit-hint-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.audit-hint {
  display: none; margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.5; color: var(--ink-muted);
  white-space: pre-wrap;
}
.audit-hint a { color: var(--accent-deep); word-break: break-all; }
.audit-item.is-hint-open .audit-hint { display: block; }

.audit-details-toggle {
  display: inline-block; margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-raised); color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.audit-details-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.audit-details { display: none; margin-bottom: var(--sp-3); }
.audit-item.is-details-open .audit-details { display: block; }
.audit-details ul {
  margin: 0; padding-left: 20px;
  font-size: 13px; line-height: 1.5; color: var(--ink-muted);
}
.audit-details ul:empty { display: none; }
.audit-details li { margin-bottom: 3px; }
.audit-details-note {
  margin: var(--sp-3) 0; font-size: 13px; line-height: 1.45;
  color: var(--ink-subtle); font-style: italic;
}

.audit-answers { display: flex; gap: var(--sp-2); }
.audit-answer {
  flex: 1; padding: var(--sp-3) 0;
  background: var(--surface-raised); color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.audit-answer:active { transform: scale(0.98); }
.audit-answer.is-active[data-answer="yes"] {
  background: var(--success-bg); border-color: var(--success); color: var(--success);
}
.audit-answer.is-active[data-answer="no"] {
  background: var(--danger-bg); border-color: var(--danger); color: var(--danger);
}
.audit-answer.is-active[data-answer="na"] {
  background: var(--surface-sunken); border-color: var(--ink-faint); color: var(--ink-muted);
}
/* Красной вертикальной черты у ответа «Нет» больше нет (AI-3427, решение
   пользователя): выбранная кнопка ответа сама несёт цвет, а полоса на всю
   высоту строки делала из обычного ответа тревогу. Класс .is-failed убран и из
   разметки — без этого правила он ничего не значил. */

.audit-note {
  width: 100%; margin-top: var(--sp-3); min-height: 40px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 14px; resize: vertical;
}
.audit-note:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.audit-item.is-unanswered-jump {
  outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-sm);
}

/* ─── Фото ───────────────────────────────────────────────────────── */
.audit-photos { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.audit-photo { position: relative; width: 72px; height: 72px; }
.audit-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--hairline-strong);
}
.audit-confirm-text {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted);
}
.audit-confirm-btn { flex: 1; justify-content: center; }

.audit-photo-view { cursor: zoom-in; }
.audit-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + var(--safe-top));
  padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  background: rgba(26, 26, 26, .92);
}
.audit-lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--r-sm);
}
.audit-lightbox-close {
  position: absolute; top: calc(var(--sp-4) + var(--safe-top)); right: var(--sp-4);
  width: 40px; height: 40px; border: none; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.audit-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: none; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.audit-lightbox-prev { left: var(--sp-4); }
.audit-lightbox-next { right: var(--sp-4); }
.audit-lightbox-counter {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  padding: 4px var(--sp-3); border-radius: var(--r-full);
  background: rgba(255, 255, 255, .15); color: #fff;
  font-family: var(--font-mono); font-size: 12px;
}
/* Узкий экран: стрелки прижаты к краям и не наезжают на снимок. */
@media (max-width: 400px) {
  .audit-lightbox-nav { width: 38px; height: 38px; font-size: 24px; }
  .audit-lightbox-prev { left: 2px; }
  .audit-lightbox-next { right: 2px; }
}
.audit-photo-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-raised);
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-sm);
}
.audit-photo-spinner {
  width: 18px; height: 18px; border: 2px solid var(--accent);
  border-top-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.audit-photo-phase { font-size: 10px; color: var(--ink-subtle); }
.audit-photo-del {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border: 2px solid var(--surface); border-radius: var(--r-full);
  background: var(--danger); color: var(--ink-inverse);
  font-size: 13px; line-height: 1; padding: 0; cursor: pointer;
}
.audit-photo-add {
  display: inline-block; margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-md);
  background: var(--surface-raised); color: var(--ink-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.audit-photo-add:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ─── Наблюдения (AI-3379) ───────────────────────────────────────── */
/* Последний блок формы и статичная часть экрана результата — свободный
   комментарий на весь аудит, не про конкретный пункт (в отличие от
   .audit-note внутри .audit-item). */
.audit-notes { margin-top: var(--sp-6); }
.audit-notes-textarea {
  width: 100%; margin-top: var(--sp-2); min-height: 88px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 14px; resize: vertical;
}
.audit-notes-textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.audit-notes-caption { margin-top: var(--sp-2); font-size: 12px; color: var(--ink-faint); }

/* ─── Футер: как во всех экранах — одна кнопка на всю ширину ─────── */
/* .uses-shell даёт только min-height:100vh, поэтому секция растёт по контенту
   и футер уезжает в конец документа. Фиксируем высоту экрана, как это сделано
   для «Расходников» (iiko.css) — тогда скроллится .app-scroll, а футер прижат. */
#screen-audit-form.is-active.uses-shell {
  height: 100dvh; min-height: 0; max-height: 100dvh;
}
.audit-complete { width: 100%; justify-content: center; }

/* ─── Итог ───────────────────────────────────────────────────────── */
.audit-hero {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.audit-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.audit-hero-percent {
  font-size: 46px; font-weight: 800; line-height: 1; color: var(--ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.audit-hero-points { color: var(--ink-subtle); font-size: 13px; margin-top: var(--sp-2); }
.audit-hero-verdict { margin-top: 0; font-size: 13px; padding: 5px 12px; }
/* Метаданные распределены по ширине: на телефоне 2 колонки, на широком — 4. */
.audit-hero-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3); padding-top: var(--sp-4);
}
@media (min-width: 560px) {
  .audit-hero-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.audit-hero-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.audit-hero-key {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
}
.audit-hero-val { font-size: 14px; font-weight: 600; color: var(--ink); }
.audit-hero-val.is-bad { color: var(--danger); }

.audit-top-failure {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline);
  font-size: 14px; line-height: 1.4;
}

/* Фильтр «Все / Замечания / Хорошо / Н/А» — липнет к верху при прокрутке. */
.audit-filter {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
  padding: var(--sp-4) 0 var(--sp-3);
  background: var(--surface-page);
}
.audit-filter-pill {
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong); background: var(--surface);
  color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.audit-filter-pill.is-active {
  background: var(--surface-inverse); border-color: var(--surface-inverse);
  color: var(--ink-inverse);
}

.audit-res-section {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-3); overflow: hidden;
}
.audit-res-section-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline);
}
.audit-section-num.has-failures { background: var(--danger-bg); color: var(--danger); }
.audit-res-section-score { flex-shrink: 0; text-align: right; font-size: 13px; }
.audit-res-section-score b { font-variant-numeric: tabular-nums; }

.audit-res-item { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--hairline); }
.audit-res-item:first-of-type { border-top: none; }
/* Замечание — заливкой строки: так блок нарушения виден целиком, а не одной
   кромкой. Мутно читалось не из-за самой заливки, а из-за бежевой заметки
   поверх неё (два тёплых слоя друг на друге) — заметка ниже стала белой. */
.audit-res-item.audit-res-no { background: rgba(197, 48, 48, .05); }
.audit-res-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.audit-res-mark {
  flex-shrink: 0; min-width: 42px; text-align: center;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
}
.audit-res-mark-yes { background: var(--success-bg); color: var(--success); }
.audit-res-mark-no { background: var(--danger-bg); color: var(--danger); }
.audit-res-mark-na { background: var(--surface-sunken); color: var(--ink-muted); }
.audit-res-mark-none { background: var(--surface-sunken); color: var(--ink-faint); }
.audit-res-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.audit-res-weight {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; color: var(--ink-muted);
}
/* Два числа в одном чипе (AI-3402): баллы — главное (b), процент от итога
   всего аудита — вторичное под ним (i), мельче и приглушённее. Раньше чип был одной
   строкой без единиц («−5»); теперь баллы всегда с «б.», как у «Да»/«Н/А». */
.audit-res-lost {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--r-md);
  background: var(--danger-bg); color: var(--danger);
  font-family: var(--font-mono); text-align: right; line-height: 1.25;
  display: flex; flex-direction: column; align-items: flex-end;
}
.audit-res-lost b { font-size: 12px; font-weight: 700; }
.audit-res-lost i {
  font-style: normal; font-size: 10px; font-weight: 600; opacity: .75;
}
/* Расшифровка процента под блоком самых дорогих замечаний: title у чипа на
   телефоне не показывается, а без пояснения второе число можно прочесть как
   процент раздела, внутри которого стоит строка. */
.audit-pp-legend {
  margin-top: var(--sp-2); font-size: 12px; line-height: 1.35;
  color: var(--ink-faint);
}

/* Потерянные баллы — главное число строки: по нему решают, за что браться
   первым. Раньше оно было мелким моно-чипом рядом с таким же мелким
   счётчиком «1/18», и оба читались как служебная сноска. */
.audit-rec-lost {
  flex-shrink: 0; text-align: right; line-height: 1.05;
  display: flex; flex-direction: column; align-items: flex-end;
  color: var(--danger);
}
.audit-rec-lost b {
  font-family: var(--font-mono); font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em;
}
/* 10px и text-transform достались от подписи «БАЛЛОВ» — она была служебной,
   а процент это второе значащее число: он крупнее, моно (цифры выравниваются
   с баллами над ними) и без капса, которому в «−5.6%» нечего делать. */
.audit-rec-lost i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; opacity: .8;
}
/* Заметка бывает у любого ответа, не только у «Нет» — это комментарий
   проверяющего, а не описание нарушения. Поэтому нейтральный контрастный
   блок: приглушённый текст на светлой подложке не читался. */
.audit-res-note {
  margin: var(--sp-2) 0 0 calc(42px + var(--sp-3));
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.45; color: var(--ink);
}
/* Внутри красной строки — белая подложка: бежевая на розовом давала грязь. */
.audit-res-no .audit-res-note {
  background: var(--surface); border: 1px solid rgba(197, 48, 48, .18);
}
.audit-res-item .audit-photos { margin-left: calc(42px + var(--sp-3)); }
.audit-failure-where { font-size: 12px; color: var(--ink-faint); margin-top: var(--sp-1); }

/* --- Аналитика --------------------------------------------------------- */
.audit-head-action {
  margin-left: auto; gap: 6px; padding: 0 var(--sp-3); height: 34px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}

.audit-analytics-body { display: flex; flex-direction: column; gap: var(--sp-3); }

.audit-analytics-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.audit-analytics-rhythm {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--ink-muted); font-size: 13px; margin-top: var(--sp-2);
}

.audit-chart-box { height: 220px; margin-top: var(--sp-3); }

.audit-delta { font-size: 13px; font-weight: 600; white-space: nowrap; }
.audit-delta-good { color: var(--success); }
.audit-delta-bad  { color: var(--danger); }
.audit-delta-none { color: var(--ink-subtle); }

.audit-rec-item { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.audit-rec-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
/* Главная строка разбора (AI-3415): сколько раз повторяется и на каком отрезке.
   Заметнее, чем служебная .audit-failure-where под ней — по ней решают, браться
   ли за пункт, а раздел и вес это уже уточнение. */
.audit-rec-span {
  margin-top: var(--sp-2); font-size: 13px; line-height: 1.4;
  color: var(--ink-muted);
}
/* .audit-rec-count и тона .audit-rec-chronic/.audit-rec-fixed убраны вместе с
   корзинами (AI-3415): счётчик не рисовался уже давно, а корзин больше нет. */

.audit-sec-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--hairline);
}
.audit-sec-percent { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Подсказка под заголовком блока: .audit-history-title капслочный, и вложенный
   в него span сливался с ним в одну строку («БАЛЛ ПО АУДИТАМ ТОЧКИ — АУДИТЫ»).
   Поэтому подсказка — отдельный блок обычным регистром. */
.audit-analytics-hint {
  margin-top: calc(-1 * var(--sp-1));
  color: var(--ink-subtle);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.audit-analytics-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  color: var(--ink-subtle);
  font-size: 12px;
}
/* Тот же класс, но первым в карточке: отчерк сверху отделял бы подпись от
   пустоты и давал пустую полосу над текстом. */
.audit-analytics-card > .audit-analytics-note:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}

/* .audit-history-title писался для экрана результата, где заголовки разделяют
   плоские блоки, и несёт margin-top: 24px. Внутри карточки он складывается с её
   padding и даёт 41px воздуха до первой строки. Обнуляем, когда заголовок первый
   в карточке — на экране результата отступ остаётся нужным. */
.audit-analytics-card > .audit-history-title:first-child { margin-top: 0; }

/* Заголовок карточки со справкой под «?» (AI-3415): кнопка в правом углу.
   Обнуление margin у заголовка здесь обязательно — обёртка лишила его
   :first-child в правиле выше, и вернулись бы те самые 41px. */
.audit-card-head {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.audit-card-head .audit-history-title { flex: 1; margin: 0; }
.audit-card-head .audit-hint-toggle { flex-shrink: 0; margin-left: 0; }
.audit-analytics-card.is-hint-open .audit-hint-toggle {
  border-color: var(--accent); color: var(--accent-deep);
}

/* Справка — тултип ПОВЕРХ карточки, а не раскрывающийся блок: он сдвигал вниз
   данные, ради которых блок открывают. Привязан к .audit-card-head (top: 100%),
   а не к карточке с magic-number отступом: высота шапки зависит от кегля
   заголовка, и подобранное вручную число разъехалось бы при первой правке.
   left+right по краям шапки — на 375px тултип по ширине карточки, за экран
   уехать не может. */
.audit-help-pop {
  display: none;
  position: absolute; z-index: 20;
  top: calc(100% + 7px); left: 0; right: 0;
  padding: var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 13px; line-height: 1.5; color: var(--ink);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
/* Уголок к кнопке: она последняя в flex-шапке и прижата к правому краю, ширина
   20px — центр в 10px от края, поэтому уголок 10px стоит на right: 5px. */
.audit-help-pop::before {
  content: ''; position: absolute; top: -6px; right: 5px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--surface-raised);
  border-left: 1px solid var(--hairline-strong);
  border-top: 1px solid var(--hairline-strong);
  border-radius: 2px 0 0 0;
}
.audit-analytics-card.is-hint-open .audit-help-pop { display: block; }

/* Хроника наблюдений (AI-3379) — одна запись на аудит с непустым комментарием. */
.audit-note-entry { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.audit-analytics-card > .audit-note-entry:first-child { padding-top: 0; }
.audit-note-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; color: var(--ink-subtle);
}
.audit-note-author { color: var(--ink-muted); font-weight: 600; }
.audit-note-text {
  margin-top: var(--sp-1); font-size: 14px; color: var(--ink);
  white-space: pre-wrap;
}

/* ── Импорт отчёта УК и тип аудита (AI-3273) ─────────────────────────────── */
/* Цвета только переменными iiko.css: хардкод в прошлых задачах читался
   как «бледно». */

/* Вторичное действие рядом с основным: та же ширина и место, но не второй
   чёрный блок — иначе две кнопки во всю ширину спорят за внимание. */
.audit-import-btn { gap: 6px; }
/* Пара кнопок стоит плотнее, чем блоки списка. */
.audit-import-btn { margin-bottom: var(--sp-3); }

.audit-import-head { margin-bottom: var(--sp-4); }
.audit-import-obj { font-weight: 700; font-size: 15px; color: var(--ink); }
.audit-import-meta { font-size: 13px; color: var(--ink-subtle); margin-top: 2px; }
/* Фон и цвет даёт .audit-ring-bad|warn|good — та же шкала, что в истории. */
.audit-import-score {
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
}
.audit-import-percent {
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.audit-import-points { font-family: var(--font-mono); font-size: 12px; opacity: .75; }
.audit-import-sub {
  font-size: 13px; color: var(--ink-subtle);
  margin-top: var(--sp-3); text-align: center;
}
.audit-import-warn {
  margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--warning-bg); color: var(--warning);
  font-size: 13px; line-height: 1.4;
}
.audit-import-warn-title { font-weight: 700; margin-bottom: var(--sp-2); }
.audit-import-warn ul { margin: 0; padding-left: var(--sp-4); }

/* Тег типа. Карточка УК НЕ повторяет вид .audit-card-draft (accent-soft плюс
   рамка accent) — иначе завершённый аудит УК читается как черновик. Отличаем
   полосой слева. */
.audit-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px var(--sp-2);
  border-radius: var(--r-full); margin-left: var(--sp-2); vertical-align: 1px;
  white-space: nowrap;
}
/* Заливка акцентом, а не accent-soft: на фоне карточки УК (--surface-raised,
   #faf7ef) светлая пилюля не читается вовсе — тег выглядел просто оранжевым
   текстом без плашки, в отличие от нейтрального «Внутренний». */
.audit-tag-uk { background: var(--accent); color: var(--ink-inverse); }
.audit-tag-internal { background: var(--surface-sunken); color: var(--ink-subtle); }
/* Обе карточки БЕЛЫЕ, тип несёт только бейдж (AI-3463, решение пользователя).
   Путь сюда занял три пробы, и результат стоит того, чтобы его не переоткрывали:
   исходная заливка --accent-soft сливалась с фоном страницы (--surface-page) —
   это и была жалоба; AI-3448 сделала карточку чёрной — «выглядит как-то
   слишком»; AI-3463 попробовала --accent — «это сочетание тоже не нравится».
   Итог: подложку не красим вовсе, различают «ВНУТРЕННИЙ» и «АУДИТ УК».

   Цветная подложка стоила двух пар одноразовых токенов (--danger-inverse от
   AI-3448, --ink-muted-on-accent и --danger-on-accent от AI-3463): на насыщенном
   фоне ни одна существующая пара текст/фон не проходила порог 4.5:1, и каждая
   заливка требовала собственной палитры. Все три токена удалены вместе с
   правилами — если цветную карточку когда-нибудь вернут, считать контраст
   придётся заново, старые значения к новому фону отношения не имеют. */
.audit-card-uk,
.audit-card-internal {
  background: var(--surface);
  border-color: var(--hairline);
}

/* Шапка аналитики: два последних аудита рядом (AI-3273). Общий «последний
   балл» скрывал, чей он — УК или наш.

   Без подложек: заливки читались как две отдельные плашки внутри карточки и
   спорили с ней самой. Половины делит волосяная линия. */
.audit-latest-pair {
  display: flex; margin-bottom: var(--sp-4);
}
.audit-latest { flex: 1; min-width: 0; padding-right: var(--sp-4); }
.audit-latest + .audit-latest {
  padding-left: var(--sp-4); padding-right: 0;
  border-left: 1px solid var(--hairline-strong);
}
.audit-latest-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-subtle);
}
.audit-latest-percent {
  font-size: 28px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin-top: 2px;
}
.audit-latest-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: 12px; color: var(--ink-subtle); margin-top: 2px;
}
.audit-latest-empty {
  font-size: 14px; color: var(--ink-faint); margin-top: var(--sp-2);
}
/* Совсем узкий экран: половины друг под другом, и линия из вертикальной
   становится горизонтальной — иначе она разделяла бы не то. */
@media (max-width: 360px) {
  .audit-latest-pair { flex-direction: column; }
  .audit-latest { padding-right: 0; }
  .audit-latest + .audit-latest {
    padding-left: 0; padding-top: var(--sp-3); margin-top: var(--sp-3);
    border-left: none; border-top: 1px solid var(--hairline-strong);
  }
}

/* Форма аудита — от видимой полосы, а не от dvh (AI-3502; про @supports см.
   конец iiko.css). */
@supports (height: 100dvh) {
  #screen-audit-form.is-active.uses-shell {
    height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh);
  }
}