/* Аудит YML-фида — локальные стили (префикс ym-).
   Все общие компоненты — в css/tool-page.css; здесь только уникальное. */

[hidden] { display: none !important; }

.ym-form-note { margin: 0; font-size: var(--fc-fs-xs); color: var(--ink-500); }

/* — раскладка: полоса ввода сверху, результат на всю ширину снизу — */
.ym-layout { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* строка ввода фида — горизонтальная полоса */
.ym-inputbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
}
.ym-inputbar .fc-mode { flex: none; }
.ym-inputbar-field { flex: 1 1 320px; min-width: 240px; }
.ym-inputbar-field .fc-field { margin: 0; }
/* .fc-btn-primary в общей библиотеке имеет flex:1 — в полосе кнопка не должна тянуться */
.ym-inputbar #ym-submit { flex: 0 0 auto; }

/* результат — на всю ширину; min-width:0 гасит распирание колонки длинным контентом */
.ym-results { min-width: 0; }
.fc-results { min-width: 0; }
.fc-results-head { flex-wrap: wrap; }
.ym-pane { min-width: 0; }

/* — дроп-зона файла (компактная, в одну строку внутри полосы) — */
.ym-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px dashed var(--ink-300); border-radius: var(--fc-r-2);
  color: var(--ink-600); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.ym-drop:hover, .ym-drop.is-over { border-color: var(--lime); background: var(--lime-100); }
.ym-drop-text { font-size: var(--fc-fs-sm); }
.ym-drop-name { font-size: var(--fc-fs-xs); color: var(--ink-950); word-break: break-all; }

/* — сводка: оценка и вердикт — */
.ym-score { display: flex; align-items: center; gap: 18px; padding: 6px 0 16px; flex-wrap: wrap; }
.ym-score-num { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ym-verdict {
  font-family: var(--font-mono); font-size: var(--fc-fs-xs); text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill); background: var(--ink-150); color: var(--ink-600);
}
.ym-verdict[data-state="ready"] { background: var(--lime); color: var(--ink-900); }
.ym-verdict[data-state="risky"] { background: #fff3d6; color: #8a5a00; }
.ym-verdict[data-state="bad"] { background: #ffe3e3; color: #b40000; }

.ym-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ym-stat { background: var(--ink-50); border: 1px solid var(--ink-150); border-radius: var(--fc-r-3); padding: 10px 12px; }
.ym-stat-num { font-family: var(--font-display); font-size: var(--fc-fs-xl); font-weight: 600; }
.ym-stat-label { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }

.ym-passport { border-top: 1px dashed var(--ink-200); padding-top: 12px; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: var(--fc-fs-sm); }
.ym-passport dt { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-500); text-transform: uppercase; }
.ym-passport dd { margin: 0; color: var(--ink-800); word-break: break-word; }

/* — карточки проблем — */
.ym-issue { border: 1px solid var(--ink-150); border-radius: var(--fc-r-3); padding: 12px 14px; margin-bottom: 10px; background: var(--white); }
.ym-issue-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ym-issue-title { flex: 1; font-weight: 600; font-size: var(--fc-fs-md); min-width: 160px; }
.ym-level {
  font-family: var(--font-mono); font-size: var(--fc-fs-xs); text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--ink-150); color: var(--ink-600); flex: none;
}
.ym-level[data-level="critical"] { background: #ffe3e3; color: #b40000; }
.ym-level[data-level="warning"] { background: var(--ink-800); color: var(--white); }
.ym-issue-count { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-500); }
.ym-issue-desc { margin: 6px 0 0; font-size: var(--fc-fs-sm); color: var(--ink-600); }
.ym-examples { margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-600); display: flex; flex-direction: column; gap: 2px; }
.ym-examples li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-issue-doc { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-500); border-bottom: 1px solid var(--ink-200); }
.ym-issue-doc:hover { color: var(--ink-800); border-bottom-color: var(--lime); }

/* блок «как надо» — правильный пример */
.ym-fix { margin: 10px 0 0; border-left: 3px solid var(--lime-400); background: var(--lime-100); border-radius: 0 var(--fc-r-2) var(--fc-r-2) 0; padding: 8px 12px; }
.ym-fix-label { display: block; font-family: var(--font-mono); font-size: var(--fc-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-700); margin-bottom: 4px; }
.ym-fix-code { margin: 0; font-family: var(--font-mono); font-size: var(--fc-fs-sm); color: var(--ink-950); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* подвал карточки: документация + «показать все» */
.ym-issue-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ym-issue-all { padding: 4px 10px; font-size: var(--fc-fs-xs); flex: none; }

/* — пройденные проверки — */
.ym-passed { margin-top: 18px; }
.ym-passed-title { font-family: var(--font-mono); font-size: var(--fc-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin: 0 0 8px; }
.ym-passed-item {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fc-fs-xs);
  color: var(--ink-600); background: var(--ink-50); border: 1px solid var(--ink-150);
  border-radius: var(--r-pill); padding: 4px 10px; margin: 0 6px 6px 0;
}
.ym-passed-item svg { color: #10b981; }

/* Единый скролл: панель результата растёт вместе со страницей, а не клиппится
   в собственный 70vh-бокс. Внутренние блоки скроллятся только по горизонтали
   (широкие таблицы, длинные строки кода) — вертикальный скролл один, страничный. */
.fc-output { max-height: none; overflow: visible; }

/* — таблицы (поля, товары) — */
.ym-table-wrap { overflow-x: auto; }
.ym-table-wrap table { border-collapse: collapse; width: 100%; font-size: var(--fc-fs-sm); }
.ym-table-wrap th {
  background: var(--ink-50);
  font-family: var(--font-mono); font-size: var(--fc-fs-xs); text-transform: uppercase;
  color: var(--ink-500); text-align: left;
}
.ym-table-wrap th, .ym-table-wrap td { border: 1px solid var(--ink-150); padding: 5px 8px; }
.ym-bar { height: 4px; background: var(--ink-150); border-radius: var(--r-pill); overflow: hidden; min-width: 80px; }
.ym-bar span { display: block; height: 100%; background: var(--lime-600); }

/* — исходный код оффера (по кнопке) — */
.ym-code {
  background: var(--ink-950); color: var(--ink-100); border-radius: var(--fc-r-3);
  padding: 14px; overflow-x: auto; margin: 8px 0 0;
  font-family: var(--font-mono); font-size: var(--fc-fs-xs); line-height: 1.6; white-space: pre;
}

/* — поиск товаров и карточки офферов — */
.ym-search { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ym-search-input { flex: 1; min-width: 220px; }
.ym-search-status { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-500); white-space: nowrap; }

.ym-offers-results { display: flex; flex-direction: column; gap: 8px; }
.ym-offer { border: 1px solid var(--ink-150); border-radius: var(--fc-r-3); background: var(--white); overflow: hidden; }
.ym-offer-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; flex-wrap: wrap; }
.ym-offer-id { color: var(--ink-500); flex: none; }
.ym-offer-name { font-weight: 600; font-size: var(--fc-fs-md); flex: 1; min-width: 140px; }
.ym-offer-meta { font-family: var(--font-mono); font-size: var(--fc-fs-xs); color: var(--ink-600); }
.ym-offer-toggle { flex: none; padding: 4px 8px; font-size: var(--fc-fs-xs); }
.ym-offer .ym-code { margin: 0; border-radius: 0; border-top: 1px solid var(--ink-800); }

/* — экспорт — */
.ym-export { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.ym-export .fc-btn { justify-content: flex-start; }
.ym-tab-count { font-family: var(--font-mono); }

/* — CTA под отчётом — */
.ym-cta {
  margin-top: 18px; padding: 16px 18px; background: var(--accent); color: var(--accent-on);
  border-radius: var(--fc-r-4); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ym-cta p { margin: 0; flex: 1; font-size: var(--fc-fs-sm); min-width: 220px; }
/* .fc-btn-primary sets flex:1 for its usual form-foot context; here it would
   stretch the button to match the paragraph's width, so pin it back to
   content-sized like a normal row-end CTA button. */
.ym-cta .fc-btn-primary { flex: none; }

/* — модалка «все товары с ошибкой» — */
.ym-modal-panel { max-width: 920px; min-width: 0; }
.ym-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ym-modal-count { font-family: var(--font-mono); font-size: var(--fc-fs-sm); color: var(--ink-700); }
.ym-modal-table { min-width: 0; }
.ym-modal-table td { max-width: 320px; }
.ym-modal-url { color: var(--ink-600); border-bottom: 1px solid var(--ink-200); word-break: break-all; }
.ym-modal-url:hover { color: var(--ink-950); border-bottom-color: var(--lime); }