/* Самопроверка к аудиту торговой сети, план подготовки и «Что взять к аудиту» (journals/audit_check.py).
   Только токены ui.css — светлая и тёмная тема берутся оттуда. */

.audit-page { max-width: 860px; margin-top: var(--ui-s4); }

/* Вопросы: зона — рамка, внутри вопросы с кнопками-ответами */
.audit-zones { display: grid; gap: 16px; }
.audit-zone { margin: 0; padding: 6px 18px 10px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); min-width: 0; }
.audit-zone__title { padding: 0 6px; font-weight: 700; font-size: var(--ui-fs-md); }
.audit-q { padding: 12px 0; }
.audit-q + .audit-q { border-top: 1px solid var(--ui-line); }
.audit-q__text { margin: 0 0 4px; font-weight: 500; }
.audit-q__hint { margin: 0 0 8px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.audit-q__answers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.audit-answer { position: relative; display: inline-flex; }
.audit-answer input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.audit-answer span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-pill); background: var(--ui-surface); font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer; }
.audit-answer input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.audit-answer--yes input:checked + span { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok); }
.audit-answer--partly input:checked + span { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn); }
.audit-answer--no input:checked + span { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); color: var(--ui-bad); }

.audit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.audit-error { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--ui-bad-line); border-radius: var(--ui-radius); background: var(--ui-bad-bg); color: var(--ui-bad); font-weight: 500; }

/* Результат */
.audit-result { display: grid; gap: 6px; }
.audit-result__score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.audit-result__percent { font-size: 44px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.audit-result__label { color: var(--ui-muted); }
.audit-meter { height: 10px; border-radius: var(--ui-radius-pill); background: var(--ui-neutral-bg); overflow: hidden; margin: 4px 0 6px; }
.audit-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ui-warn); }
.audit-result--ok .audit-meter span { background: var(--ui-ok); }
.audit-result--bad .audit-meter span { background: var(--ui-bad); }
.audit-result__title { margin: 0; font-weight: 700; font-size: var(--ui-fs-lg); }
.audit-result__text, .audit-result__counts { margin: 0; }
.audit-result__counts { color: var(--ui-muted); font-size: var(--ui-fs-sm); }

.audit-gaps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.audit-gap { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.audit-gap__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audit-gap__zone { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.audit-gap__text { margin: 8px 0 0; font-weight: 500; }
.audit-gap__doc { margin: 6px 0 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.audit-gap__links { margin: 8px 0 0; font-size: var(--ui-fs-sm); }
.audit-gap__close { color: var(--ui-muted); }

/* «Что взять к аудиту» */
.audit-offer { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); overflow: hidden; }
.audit-offer__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 12px 16px; }
.audit-offer__row + .audit-offer__row { border-top: 1px solid var(--ui-line); }
.audit-offer__name { display: block; font-weight: 600; }
.audit-offer__desc { display: block; margin-top: 2px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.audit-offer__price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-offer__price b { font-size: var(--ui-fs-md); }
.audit-offer__price small { display: block; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.audit-offer__total { margin: 0; padding: 12px 16px; border-top: 1px dashed var(--ui-line-strong); font-size: var(--ui-fs-sm); }
.audit-offer-head { margin-top: 28px; }

/* Хаб поставщиков: приглашение к самопроверке */
.audit-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border: 1px solid var(--ui-primary-line); border-radius: var(--ui-radius-lg); background: var(--ui-primary-tint); }
.audit-teaser__copy { display: grid; gap: 6px; max-width: 60ch; }
.audit-teaser__copy p { margin: 0; }
.audit-cta { margin-top: 20px; }
.audit-backlink { margin: 0 0 6px; }

/* План подготовки в кабинете */
.audit-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }
.audit-plan .audit-offer__row { grid-template-columns: 1fr; }
.audit-plan .audit-offer__price { text-align: left; }
.audit-folder__text { margin: 0; }
.audit-recheck > summary { cursor: pointer; list-style: none; }
.audit-recheck > summary::-webkit-details-marker { display: none; }

@media (max-width: 900px) {
  .audit-plan { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .audit-zone { padding: 4px 12px 8px; }
  .audit-offer__row { grid-template-columns: 1fr; }
  .audit-offer__price { text-align: left; }
  .audit-result__percent { font-size: 36px; }
}