/* tools.css — страничная специфика инструментов (/tools/) и файлового
   кабинета (/files/), переписана с нуля на токены (Task 5). Старый файл был
   набором точечных заплаток поверх Bootstrap; вместе со снятием Bootstrap
   заплатки тоже сняты. Токены и шрифты не объявляет — берёт их из site.css,
   который подключает базовый шаблон раньше этого файла. Компонент
   .checklist/.check* сюда не входит: он общесайтовый и уже переехал в
   site.css в Task 2 (дублировать его здесь запрещено, см. task-5-brief).

   Bootstrap отдавал сетку через .row/.col-*, поэтому здесь вместо них —
   обычный CSS grid/flex по месту: у каждого блока разметки своя раскладка,
   не общий 12-колоночный грид. */

/* === Общий контекст страницы (заголовки, отступы между блоками) === */
/* .container.section — сама раскладка; .tool-page донастраивает типографику
   поверх канона: h1/h2 у канона без отступов (вёрстка сама решает, где они
   нужны), а на длинных страницах результата без этого заголовки слипаются
   с текстом. */
.tool-page h1 { margin: 0 0 16px; }
/* :not(.tool-card__title) — без него этот потомковый селектор («класс +
   тег», вес 0,1,1) перебивал бы собственный margin:0 заголовка карточки
   инструмента (.tool-card__title ниже, вес всего «один класс», 0,1,0)
   независимо от порядка правил в файле: специфичность выше побеждает
   всегда, а не только когда объявлена позже. На практике это раздвигало
   каждую карточку на /tools/ на 32px сверху и добавляло лишний отступ до
   тизера — заголовок карточки не имеет отношения к «заголовку секции
   результата», для которого это правило вообще написано. */
.tool-page h2:not(.tool-card__title) { margin: 32px 0 12px; }
.tool-page h2 + p { margin-top: 8px; }
/* Ширина текстовой страницы «слишком много запросов» — как у .prose, но без
   его remove-scroll/overflow-wrap правил: там нет длинных слов и таблиц. */
.container.measure { max-width: var(--measure); }

/* === Хлебная крошка над h1 === */
.crumbs { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }

/* === Карточки инструментов (tools/index.html) === */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 24px 0 48px; }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tool-card__title { margin: 0; font-size: 19px; }
.tool-card__title a { color: var(--ink); text-decoration: none; }
.tool-card__title a:hover { text-decoration: underline; }
/* Замена Bootstrap .stretched-link: вся карточка кликабельна через невидимый
   псевдоэлемент на ссылке заголовка, а не через JS-обработчик на div (CSP
   запрещает инлайновые обработчики, да и вешать их незачем). */
.tool-card__title a::after { content: ""; position: absolute; inset: 0; }
.tool-card__teaser { margin: 0; color: var(--ink-2); }

/* === Форма инструмента (tools/form.html) === */
.tool-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; margin-top: 24px; }
.tool-form { display: flex; flex-direction: column; gap: 20px; }
.tool-form__errors { margin: 0; }
.tool-form__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 20px; }
/* Модификатор для полей, которым тесно в сетке (файл, вставленная таблица,
   загрузка файлов в /files/) — растягивает поле на всю ширину формы. */
.tool-form__field--wide { grid-column: 1 / -1; }
.tool-form__field { display: flex; flex-direction: column; gap: 6px; }
/* Имена .form-label/.form-text/.form-control (ниже) достались от Bootstrap,
   но переименовывать их нельзя: .form-label и .form-text прописаны строками
   в шаблонах (templates/tools/form.html, templates/tools/search_queries/
   fields.html, templates/files/collection_detail.html), а .form-control —
   в Python, в attrs={"class": …} внутри apps/tools/unit_economics/forms.py,
   apps/tools/metrika_check/forms.py, apps/tools/search_queries/forms.py и
   apps/files/forms.py. Переименуешь здесь — поля форм на сайте останутся
   без стилей молча, без ошибки. */
.form-label { font-weight: 600; font-size: 14px; }
.form-text { color: var(--ink-2); font-size: 13px; }
.field-error { color: var(--red); font-size: 13px; }
/* Поля формы — тот же внешний вид, что у .lead-form (site.css), но без
   привязки к конкретному компоненту: здесь их полей вдвое больше и они не
   всегда в одну колонку. */
.form-control { display: block; width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.form-control:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); border-color: var(--ink); }
textarea.form-control { min-height: 120px; resize: vertical; }
.tool-intro { color: var(--ink-2); }
.tool-intro p { margin: 0 0 1em; }
.tool-intro p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .tool-layout { grid-template-columns: 1fr; }
}

/* === Результат: вердикт и плитки со сводкой === */
.verdict { font-size: 1.2rem; margin-top: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; }
.stat-label { color: var(--ink-2); font-size: 13px; }
/* .stat-value — замена связки Bootstrap fs-3 + .num (маркер-подсветка числа
   из public.css/prognoz-zayavok.css, токен переименован под канон). */
.stat-value { margin-top: 4px; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(transparent 62%, var(--yellow) 62%); }

/* === Текст рядом с результатом === */
.muted { color: var(--ink-2); }
.muted-sm { color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.tool-note { margin: 10px 0 12px; }
.foot-note { color: var(--ink-2); font-size: 13px; margin-top: 24px; }
.copy-status { color: var(--ink-2); font-size: 13px; margin-left: 8px; }
.recalc-row { margin-top: 24px; }
.recalc-note { color: var(--ink-2); font-size: 13px; margin-left: 8px; }
.tool-details { margin-top: 16px; }

/* === Таблицы результатов и /files/ === */
/* Голые table/th/td, а не класс вроде Bootstrap .table: tools.css грузится
   только на страницах инструментов и файлов, глобальная утечка невозможна. */
.tool-page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-page th, .tool-page td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tool-page thead th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.tool-page tbody tr:hover { background: var(--bg); }
.num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Замена Bootstrap .table-responsive: сама прокрутка плюс явный tabindex="0"
   в разметке — без него правая часть широкой таблицы недостижима с клавиатуры
   (WCAG 2.1.1, D4-M1 — см. tests/test_tools_views.py). */
.table-responsive { overflow-x: auto; }
/* Замена Bootstrap .table-sm.w-auto: сводная таблица unit-экономики короче
   контейнера, тянуть её на всю ширину незачем. */
.kv-table { width: auto; min-width: 280px; }
.candidates-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 16px; }
.copy-btn { margin-top: 8px; }
@media (max-width: 860px) {
  .candidates-layout { grid-template-columns: 1fr; }
}

/* === /files/: кабинет коллекций === */
.upload-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 20px 0; }
.upload-form .tool-form__field { flex: 1; min-width: 220px; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.rename-form { display: flex; gap: 8px; align-items: center; }
.plain-list { list-style: none; margin: 16px 0 0; padding: 0; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
/* Замена Bootstrap .align-middle на таблице с чекбоксами и превью: без неё
   голый vertical-align:top (общее правило выше) прижимал бы миниатюру и имя
   файла к верху строки. */
.assets-table td { vertical-align: middle; }
.asset-thumb { object-fit: cover; border-radius: 4px; }
/* Замена Bootstrap .badge.text-bg-warning: используем уже заведённый .tag
   (site.css) — он и по цвету, и по смыслу подходит для предупреждения. */

/* Замена Bootstrap .alert для django messages на /files/: тегов три
   (success/warning/error), у каждого свой акцент, а не один общий вид, как
   у .card--warn (тот занят под ошибку формы ниже). */
.notice { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 14px; }
.notice--error { background: var(--red-bg); border-color: var(--red); }
.notice--warning { background: var(--bg); border-left: 4px solid var(--yellow); }
.notice--success { background: var(--green-bg); border-color: var(--green); }
/* Замена Bootstrap .btn-outline-danger: модификатор поверх канонического
   .btn-ghost, а не отдельная кнопка — красная обводка на кнопке удаления. */
.btn-ghost.btn-danger { color: var(--red); border-color: var(--red); }
.btn-ghost.btn-danger:hover { background: var(--red-bg); }