/* AGI Агроном — слой раздела.
   Только токены var(--agi-*) из home/inc/tokens.css (SPR-000): ни одного hex-литерала,
   ни одного px-литерала радиуса, тени и размера шрифта, ни одного :root.
   Иконки — SVG (home/agronom/icons.php); emoji в роли иконок запрещены.
   Раздел спроектирован от телефона: мобильные правила — базовые, десктоп — в медиазапросе. */

/* ── каркас ───────────────────────────────────────────────────────────────── */
/* Шрифт задаётся явно из токена, а не наследуется от глобальных стилей сайта:
   раздел должен выглядеть одинаково и на странице с хромом, и без него. */
.ag-wrap, .ag-wrap input, .ag-wrap select, .ag-wrap button, .ag-wrap table { font-family: var(--agi-font-sans); }
.ag-wrap { max-width: var(--agi-max-content); margin: 0 auto; padding: 0 16px; color: var(--agi-text-body); }
.ag-sum, .ag-sum input, .ag-sum select, .ag-sum button, .ag-sum table { font-family: var(--agi-font-sans); }

.ag-hero { padding: 28px 0 18px; }
.ag-hero h1 { font-size: var(--agi-fs-3xl); line-height: 1.2; margin: 0 0 8px; color: var(--agi-ink); letter-spacing: -.01em; }
.ag-hero p { margin: 0; color: var(--agi-text-muted); font-size: var(--agi-fs-md); line-height: 1.55; max-width: 62ch; }

/* ── строка задачи: точка входа вместо списка инструментов ─────────────────── */
.ag-ask { position: relative; margin: 18px 0 6px; }
.ag-ask-row { display: flex; gap: 8px; align-items: stretch; }
.ag-ask input {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 14px 14px 42px;
  font-size: var(--agi-fs-md); font-family: inherit; color: var(--agi-ink);
  background: var(--agi-bg) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center / 18px 18px;
  border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius);
  transition: border-color var(--agi-dur) var(--agi-ease), box-shadow var(--agi-dur) var(--agi-ease);
}
.ag-ask input:focus { outline: none; border-color: var(--agi-green); box-shadow: var(--agi-shadow-focus); }
.ag-ask-hint { margin: 8px 0 0; font-size: var(--agi-fs-sm); color: var(--agi-text-muted); line-height: 1.5; }
.ag-ask-hint b { color: var(--agi-text-body); font-weight: 600; }

/* ── карточки сценариев ───────────────────────────────────────────────────── */
.ag-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }
.ag-card {
  display: block; padding: 16px; text-decoration: none; color: inherit;
  background: var(--agi-bg); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-card); box-shadow: var(--agi-shadow-sm);
  transition: border-color var(--agi-dur) var(--agi-ease), box-shadow var(--agi-dur) var(--agi-ease), transform var(--agi-dur) var(--agi-ease);
}
.ag-card:hover, .ag-card:focus-visible { border-color: var(--agi-green); box-shadow: var(--agi-shadow-md); transform: translateY(-1px); }
.ag-card:focus-visible { outline: 2px solid var(--agi-green); outline-offset: 2px; }
.ag-card-t { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--agi-fs-lg); color: var(--agi-ink); }
.ag-card-t svg { flex: 0 0 auto; color: var(--agi-green); }
.ag-card-d { margin: 6px 0 0; font-size: var(--agi-fs-base); line-height: 1.5; color: var(--agi-text-muted); }

/* ── рабочая область сценария ─────────────────────────────────────────────── */
/* minmax(0, 1fr), а НЕ 1fr: «1fr» это minmax(auto, 1fr), и auto не даёт колонке
   сжаться ниже min-content содержимого. Из-за этого на телефоне вся панель
   раздувалась по самому широкому элементу внутри — на «Технике» документ
   получался 528 px при экране 390, и страница ползала вбок. Классическая
   ловушка grid, и видна она только на узком экране. */
.ag-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0 32px; }

/* лента шагов (на мобильном — горизонтальная прокрутка) */
.ag-ctx { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ag-ctx[hidden] { display: none; }
.ag-ctx-i {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; font-size: var(--agi-fs-sm);
	color: var(--agi-green-cta); background: var(--agi-green-l2);
	border: 1px solid var(--agi-green-l1, var(--agi-green-l2)); border-radius: var(--agi-radius-pill);
}
.ag-ctx-i.is-empty { color: var(--agi-text-muted); background: var(--agi-surface); border-color: var(--agi-border); }
.ag-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 0; list-style: none; scrollbar-width: thin; }
.ag-step {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; font-size: var(--agi-fs-base); color: var(--agi-text-muted);
  background: var(--agi-surface); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-pill); cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: all var(--agi-dur) var(--agi-ease);
}
.ag-step:hover { border-color: var(--agi-border-strong); color: var(--agi-text-body); }
.ag-step[aria-current="step"] { background: var(--agi-ink); border-color: var(--agi-ink); color: var(--agi-bg); font-weight: 600; }
.ag-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; border-radius: var(--agi-radius-pill);
  background: var(--agi-border); color: var(--agi-text-body); font-size: var(--agi-fs-xs); font-weight: 700;
}
.ag-step[aria-current="step"] .ag-step-n { background: var(--agi-green); color: var(--agi-bg); }
.ag-step.is-done .ag-step-n { background: var(--agi-green-l2); color: var(--agi-green-cta); }

/* панель шага */
.ag-panel {
  background: var(--agi-bg); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-card); padding: 18px;
}
.ag-panel h2 { margin: 0 0 4px; font-size: var(--agi-fs-xl); color: var(--agi-ink); }
.ag-panel-sub { margin: 0 0 16px; font-size: var(--agi-fs-base); line-height: 1.55; color: var(--agi-text-muted); }

/* поля: спрашиваем только то, чего не знаем */
.ag-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ag-f label { display: block; margin-bottom: 5px; font-size: var(--agi-fs-sm); font-weight: 600; color: var(--agi-text-body); }
.ag-f-hint { display: block; margin-top: 4px; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); line-height: 1.45; }
/* Перечислять типы поштучно опасно: у «Что не так на поле» тип search, он в
   список не попал и остался с браузерным оформлением — 13 px и вдавленная
   рамка вместо 16 px и общей. Поэтому берём все текстовые типы разом, а
   исключаем те, у которых своё оформление (флажки, кнопки, ползунки). */
.ag-f input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
.ag-f select {
  /* Без border-box поле с width:100% вылезает за контейнер на свои поля и
     рамку — 26 px. У search браузер ставит border-box сам, у text и number
     нет, отчего строки и разъезжались по ширине. */
  box-sizing: border-box;
  width: 100%; padding: 11px 12px; font-size: var(--agi-fs-md); font-family: inherit; color: var(--agi-ink);
  background: var(--agi-bg); border: 1px solid var(--agi-border-strong);
  border-radius: var(--agi-radius-sm); transition: border-color var(--agi-dur) var(--agi-ease), box-shadow var(--agi-dur) var(--agi-ease);
  -webkit-appearance: none; appearance: none;   /* Safari рисует search капсулой */
}
.ag-f input:focus, .ag-f select:focus { outline: none; border-color: var(--agi-green); box-shadow: var(--agi-shadow-focus); }

/* степпер: в перчатках клавиатура не работает */
.ag-stepper { display: flex; align-items: stretch; }
.ag-stepper input { border-radius: 0; text-align: center; }
.ag-stepper button {
  flex: 0 0 auto; width: 2.75rem; font-size: var(--agi-fs-xl); line-height: 1; color: var(--agi-text-body);
  background: var(--agi-surface); border: 1px solid var(--agi-border-strong); cursor: pointer;
  font-family: inherit; transition: background var(--agi-dur) var(--agi-ease);
}
.ag-stepper button:hover { background: var(--agi-surface-icon); }
.ag-stepper button:first-child { border-radius: var(--agi-radius-sm) 0 0 var(--agi-radius-sm); border-right: 0; }
.ag-stepper button:last-child { border-radius: 0 var(--agi-radius-sm) var(--agi-radius-sm) 0; border-left: 0; }

/* прогрессивное раскрытие: базовые поля видны, остальные — под «Уточнить» */
.ag-more { margin-top: 16px; border-top: 1px solid var(--agi-border); padding-top: 12px; }
.ag-more > summary {
  cursor: pointer; font-size: var(--agi-fs-base); font-weight: 600; color: var(--agi-green-cta);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.ag-more > summary::-webkit-details-marker { display: none; }
.ag-more > summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--agi-dur) var(--agi-ease);
}
.ag-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ag-more .ag-fields { margin-top: 14px; }

/* ── компоненты баковой смеси: drag&drop с клавиатурной альтернативой ─────── */
.ag-mix { display: grid; gap: 8px; }
.ag-mix-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--agi-surface); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-sm);
}
.ag-mix-item.is-drag { opacity: .5; }
.ag-mix-item.is-over { border-color: var(--agi-green); background: var(--agi-green-l); }
.ag-mix-grip { display: flex; color: var(--agi-text-muted); cursor: grab; }
.ag-mix-name { display: block; font-size: var(--agi-fs-md); font-weight: 600; color: var(--agi-ink); line-height: 1.3; }
.ag-mix-meta { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-top: 3px; line-height: 1.45; }
.ag-mix-ctl { display: flex; gap: 4px; }
.ag-mix-ctl button {
  /* 2.75rem = 44px — минимальная цель касания: в поле работают в перчатках */
  width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--agi-bg); border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius-sm);
  color: var(--agi-text-body); cursor: pointer; font-family: inherit;
}
.ag-mix-ctl button:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-mix-ctl button[disabled] { opacity: .35; cursor: default; }

/* Кнопка со скрытым состоянием ДОЛЖНА исчезать: display у класса перебивал
   атрибут hidden, и «Готово» с «Убрать контур» висели на экране до всякого
   рисования, а «Указать поле на карте» не убиралась после нажатия. */
.ag-btn[hidden] { display: none; }
.ag-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
  font-size: var(--agi-fs-md); font-weight: 600; font-family: inherit; cursor: pointer;
  border-radius: var(--agi-radius-sm); border: 1px solid var(--agi-border-strong);
  background: var(--agi-bg); color: var(--agi-text-body); text-decoration: none;
  transition: all var(--agi-dur) var(--agi-ease);
}
.ag-btn:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-btn-primary { background: var(--agi-green-cta); border-color: var(--agi-green-cta); color: var(--agi-bg); }
.ag-btn-primary:hover { background: var(--agi-green-cta-h); border-color: var(--agi-green-cta-h); color: var(--agi-bg); }
.ag-btn-sm { padding: 6px 12px; font-size: var(--agi-fs-sm); }

/* ── строки состояния расчёта ──────────────────────────────────────────────
   Одна говорит, чей расчёт открыт, вторая — что смесь убрана вместе со сменой
   культуры. Обе спокойные: это не ошибки, а объяснение того, что произошло. */
.ag-resumed[hidden], .ag-dropped[hidden] { display: none; }
.ag-resumed, .ag-dropped {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 13px;
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  background: var(--agi-surface);
  font-size: var(--agi-fs-sm); color: var(--agi-text-muted);
}
.ag-resumed span, .ag-dropped span { flex: 1 1 15rem; min-width: 0; }
.ag-dropped { border-color: var(--agi-soon-fg); background: var(--agi-soon-bg); color: var(--agi-soon-fg); }

/* ── сводка: закреплена и пересчитывается на каждое изменение ──────────────── */
.ag-sum {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--agi-bg); border-top: 1px solid var(--agi-border-strong);
  box-shadow: var(--agi-shadow-lg); max-height: 76vh; display: flex; flex-direction: column;
}
.ag-sum-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  background: none; border: 0; width: 100%; text-align: left; font-family: inherit;
}
.ag-sum-key { flex: 1 1 auto; min-width: 0; }
.ag-sum-key .v { font-size: var(--agi-fs-2xl); font-weight: 700; color: var(--agi-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ag-sum-key .l { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-top: 2px; }
.ag-sum-toggle { flex: 0 0 auto; color: var(--agi-text-muted); transition: transform var(--agi-dur) var(--agi-ease); }
.ag-sum.is-open .ag-sum-toggle { transform: rotate(180deg); }
.ag-sum-next { padding: 0 16px 12px; }
.ag-sum-next .ag-btn { width: 100%; justify-content: center; }
.ag-sum-next[hidden] { display: none; }
@media (min-width: 900px) { .ag-sum-next .ag-btn { width: auto; min-width: 12rem; } }
.ag-sum-body { display: none; overflow-y: auto; padding: 0 16px 16px; }
.ag-sum.is-open .ag-sum-body { display: block; }

/* KPI живут и в узкой сводке, и в широких панелях сценариев: сетка по ширине
   содержимого, а не по фиксированному числу колонок. */
.ag-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 8px; margin-bottom: 12px; }
.ag-kpi { padding: 10px 12px; background: var(--agi-surface); border-radius: var(--agi-radius-sm); }
/* Два написания одного и того же: разметка сводки в index.php использует .v/.l,
   а рендереры на JS — .ag-kpi-v/.ag-kpi-l. Второй набор стилей не имел вовсе, и
   числа в KPI сценариев шли обычным текстом — выделения не было ни в «Защите»,
   ни в новых сценариях. Оба написания стилизуются одинаково. */
.ag-kpi .v, .ag-kpi-v { font-size: var(--agi-fs-lg); font-weight: 700; color: var(--agi-ink); font-variant-numeric: tabular-nums; }
.ag-kpi .l, .ag-kpi-l { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-top: 2px; line-height: 1.3; }

/* подсветка изменившегося значения: связь «моё действие → этот результат» */
@keyframes ag-flash { from { background: var(--agi-green-l2); } to { background: transparent; } }
.ag-kpi.is-changed { animation: ag-flash var(--agi-dur-slow) var(--agi-ease); }

.ag-rows { width: 100%; border-collapse: collapse; font-size: var(--agi-fs-sm); }
.ag-rows th, .ag-rows td { padding: 7px 0; text-align: left; border-bottom: 1px solid var(--agi-border); }
.ag-rows td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-rows tr:last-child td { border-bottom: 0; }
.ag-rows tfoot td { font-weight: 700; color: var(--agi-ink); border-top: 2px solid var(--agi-border-strong); }

/* ── замечания: различимы не только цветом ────────────────────────────────── */
.ag-notes { display: grid; gap: 8px; margin: 12px 0; }
.ag-note {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  padding: 10px 12px; font-size: var(--agi-fs-sm); line-height: 1.5;
  border-radius: var(--agi-radius-sm); border: 1px solid var(--agi-border);
  background: var(--agi-surface); color: var(--agi-text-body);
}
.ag-note svg { flex: 0 0 auto; margin-top: .1rem; }
.ag-note-high { background: var(--agi-danger-bg); border-color: var(--agi-danger); color: var(--agi-danger-fg); }
.ag-note-medium { background: var(--agi-soon-bg); border-color: var(--agi-soon-fg); color: var(--agi-soon-fg); }
.ag-note-ok { background: var(--agi-green-l); border-color: var(--agi-green-b); color: var(--agi-green-cta); }
.ag-note-src { display: block; margin-top: 3px; font-size: var(--agi-fs-xs); opacity: .8; }

/* ── «Как это посчитано»: ни одной цифры без обоснования ───────────────────── */
.ag-how { margin-top: 12px; }
.ag-how > summary {
  cursor: pointer; font-size: var(--agi-fs-sm); font-weight: 600; color: var(--agi-text-muted);
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
}
.ag-how > summary::-webkit-details-marker { display: none; }
.ag-how ul { margin: 8px 0 0; padding-left: 1.1rem; font-size: var(--agi-fs-sm); line-height: 1.6; color: var(--agi-text-muted); }
.ag-how li { margin-bottom: 5px; }

/* ── визуализация бака: столбик в разрезе ─────────────────────────────────── */
.ag-viz { margin: 14px 0; }
/* Ширину задаёт сам элемент, а не это правило: раньше «width: 100%» тянуло
   разрез бака во всю колонку, и рядом с ним для легенды оставалась полоска
   в три буквы. */
.ag-viz svg { display: block; max-width: 100%; }
.ag-viz-cap { margin-top: 6px; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }

.ag-legal {
  margin: 20px 0 0; padding: 12px 14px; font-size: var(--agi-fs-xs); line-height: 1.55;
  color: var(--agi-text-muted); background: var(--agi-surface); border-radius: var(--agi-radius-sm);
}

.ag-pad { height: 88px; }  /* место под закреплённую сводку на мобильном */

/* ── десктоп ──────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .ag-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ag-fields { grid-template-columns: repeat(2, 1fr); }
  .ag-app { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  /* Сценарий без закреплённой сводки: одна колонка на всю ширину. Иначе
     единственная панель уезжает в колонку 320 px, отведённую под сводку. */
  .ag-app.is-single { grid-template-columns: minmax(0, 1fr); }
  .ag-main { grid-column: 1; }
  .ag-steps { grid-column: 1 / -1; }

  .ag-sum {
    position: sticky; top: calc(var(--agi-header-h) + 12px); grid-column: 2;
    left: auto; right: auto; bottom: auto; max-height: none;
    border: 1px solid var(--agi-border); border-radius: var(--agi-radius-card);
    box-shadow: var(--agi-shadow-sm);
  }
  .ag-sum-head { cursor: default; padding: 14px 16px 6px; }
  .ag-sum-toggle { display: none; }
  .ag-sum-body { display: block; }
  /* Столбик — только для KPI ВНУТРИ СВОДКИ: там колонка 320 px, и два в ряд не
     влезают. Правило без ограничения по родителю растягивало KPI в столбик и в
     панелях сценариев на всю ширину страницы. */
  .ag-sum .ag-kpis { grid-template-columns: 1fr; }
  .ag-pad { display: none; }
}

/* ── доступность ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ag-card, .ag-step, .ag-btn, .ag-sum-toggle, .ag-more > summary::after { transition: none; }
  .ag-kpi.is-changed { animation: none; }
}

/* заголовки блоков — классами, а не инлайн-стилем: инлайн font-size обходит
   слой токенов и учитывается гейтом design-lint как визуальный долг */
.ag-h  { font-size: var(--agi-fs-lg); margin: 26px 0 0; color: var(--agi-ink); }
.ag-h3 { font-size: var(--agi-fs-md); margin: 20px 0 8px; color: var(--agi-ink); }
.ag-panel-sub.ag-tight { margin-bottom: 10px; }

/* ── Шаги 2–3: подбор по реестру ─────────────────────────────────────────── */
.ag-f-wide { grid-column: 1 / -1; }
.ag-f-wide input[type="text"],
.ag-f-wide select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--agi-ink);
  background: var(--agi-bg);
  border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-sm);
}
.ag-f-wide input:focus-visible,
.ag-f-wide select:focus-visible { outline: var(--agi-shadow-focus, 2px solid var(--agi-green)); outline-offset: 2px; }

.ag-pick-card {
  border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-card);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--agi-bg);
}
.ag-pick-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ag-pick-head b { font-size: var(--agi-fs-md, 1rem); color: var(--agi-ink); }
.ag-chip {
  font-size: var(--agi-fs-xs, .75rem);
  padding: 2px 7px;
  border-radius: var(--agi-radius-pill);
  background: var(--agi-surface);
  color: var(--agi-text-muted);
}
.ag-pick-mfr { margin-left: auto; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-muted); }
.ag-pick-ai { margin-top: 6px; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body); }
.ag-pick-rate { margin-top: 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ag-pick-rate b { font-size: var(--agi-fs-lg, 1.125rem); color: var(--agi-green-cta); }
.ag-pick-method { font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-muted); }
.ag-pick-src { margin-top: 8px; }

/* Происхождение данных видно всегда: карточка без подтверждения каталогом
   не должна читаться как регламент производителя (решение владельца OD-A2). */
.ag-src { font-size: var(--agi-fs-xs, .75rem); padding: 3px 8px; border-radius: var(--agi-radius-sm); }
.ag-src-ok   { background: var(--agi-green-l); color: var(--agi-green-cta); }
.ag-src-warn { background: var(--agi-soon-bg); color: var(--agi-soon-fg); }

/* ЛЕСТНИЦА ДОВЕРИЯ. У каждой цифры видно, чем она подкреплена: закон, норматив,
   международная классификация или наш расчёт. Порядок важнее оформления — человек
   должен различать «так написано в законе» и «так посчитала система», иначе он
   либо верит всему одинаково, либо не верит ничему. Слабый уровень называется
   слабым: одна выдуманная ссылка обесценивает все настоящие. */
.ag-lvl {
	display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
	font-size: var(--agi-fs-xs, .75rem); font-weight: 600; white-space: nowrap;
	padding: 2px 7px; border-radius: var(--agi-radius-sm); margin-left: 6px;
}
.ag-lvl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.ag-lvl-law { background: var(--agi-green-l2, var(--agi-green-l)); color: var(--agi-green-cta); }
.ag-lvl-law::before { background: var(--agi-green-cta); }
.ag-lvl-norm { background: var(--agi-surface); color: var(--agi-text-body); border: 1px solid var(--agi-border-strong); }
.ag-lvl-norm::before { background: var(--agi-text-body); }
.ag-lvl-klass { background: var(--agi-surface); color: var(--agi-text-muted); border: 1px solid var(--agi-border); }
.ag-lvl-klass::before { background: var(--agi-text-muted); }
.ag-lvl-calc { background: transparent; color: var(--agi-text-muted); }
.ag-lvl-calc::before { background: var(--agi-border-strong); }
.ag-kpi .ag-lvl { margin: 4px 0 0; }
.ag-lvl-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); }
.ag-lvl-key span { display: inline-flex; align-items: center; gap: 5px; }
.ag-lvl-key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* Уровень источника нормы. Государственный реестр выделен сильнее каталога:
   это не оформление, а разница в юридическом весе утверждения. */
.ag-src-gov {
  background: var(--agi-green-l2, var(--agi-green-l));
  color: var(--agi-green-cta);
  font-weight: 650;
}

/* Как культура и объект записаны в источнике: по этой строке норму находят
   в самом документе. Тише основной нормы — это сноска, а не значение. */
.ag-pick-printed {
	margin-top: 6px;
	font-size: var(--agi-fs-xs, .75rem);
	line-height: 1.45;
	color: var(--agi-text-muted);
}

/* ── вкладки шага «Чем»: защита и питание ────────────────────────────────────
   Это разные решения и разные источники нормы, поэтому они разведены, а не
   смешаны в одном списке. */
.ag-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--agi-border); }
.ag-tab {
  padding: 9px 16px; font-size: var(--agi-fs-base); font-family: inherit; font-weight: 600;
  color: var(--agi-text-muted); background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color var(--agi-dur) var(--agi-ease), border-color var(--agi-dur) var(--agi-ease);
}
.ag-tab:hover { color: var(--agi-text-body); }
.ag-tab.is-on { color: var(--agi-ink); border-bottom-color: var(--agi-green); }
.ag-tab:focus-visible { outline: 2px solid var(--agi-green); outline-offset: -2px; }

/* Как найдена запись питания. Норма на группу культур и норма на саму культуру —
   утверждения разной точности, и различие названо словами, а не оттенком. */
.ag-via {
  font-size: var(--agi-fs-xs, .75rem); padding: 3px 8px; border-radius: var(--agi-radius-sm);
  margin-right: 6px;
}
.ag-via-name  { background: var(--agi-green-l); color: var(--agi-green-cta); }
.ag-via-group { background: var(--agi-surface); color: var(--agi-text-body); }
.ag-via-all   { background: var(--agi-surface); color: var(--agi-text-muted); }

/* Ограничения регламента: срок ожидания до уборки, предел кратности, срок
   выхода на поле. Заметнее сноски об источнике — это условия применения,
   а не примечание. */
.ag-pick-limits {
	margin-top: 6px;
	font-size: var(--agi-fs-sm, .875rem);
	line-height: 1.45;
	color: var(--agi-text-body);
}

/* ── справочник препаратов ────────────────────────────────────────────────── */
.ag-crumbs { margin: 14px 0 0; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-muted); }
.ag-crumbs a { color: var(--agi-green-cta); text-decoration: none; }
.ag-crumbs a:hover { text-decoration: underline; }

.ag-prep-row {
	/* Знак слева, содержимое справа: в перечне из трёх тысяч позиций тип
	   препарата должен читаться раньше названия. */
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
	padding: 13px 14px; margin-bottom: 8px; text-decoration: none; color: inherit;
	background: var(--agi-bg); border: 1px solid var(--agi-border);
	border-radius: var(--agi-radius-card);
	transition: border-color var(--agi-dur) var(--agi-ease), box-shadow var(--agi-dur) var(--agi-ease);
}
.ag-prep-row:hover, .ag-prep-row:focus-visible { border-color: var(--agi-green); box-shadow: var(--agi-shadow-sm); }
.ag-prep-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ── знак препарата ────────────────────────────────────────────────────────
   Фото упаковки с сайта изготовителя брать нельзя (авторское право), да и в
   списке оно проигрывает: цвет и буква говорят тип с одного взгляда. */
.ag-prep-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.ag-prep-mark svg { display: block; }
.ag-prep-kind {
	font-size: var(--agi-fs-xs); color: var(--agi-text-muted);
	text-transform: lowercase; letter-spacing: .01em;
}
/* Знак и подпись типа занимают строку целиком — на узком экране они не должны
   выталкивать название за край. */
.ag-prep-row > .ag-prep-main,
.ag-prep-row > .ag-prep-ai,
.ag-prep-row > .ag-prep-meta,
.ag-prep-row > .ag-expired { grid-column: 2; }
.ag-prep-mark { grid-row: 1 / span 4; }
.ag-prep-main b { color: var(--agi-ink); font-size: var(--agi-fs-md, 1rem); }
.ag-prep-mfr { font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-muted); }
.ag-prep-ai { display: block; margin-top: 3px; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body); }
.ag-prep-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px;
	font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); }

/* Факты карточки: определение слева, значение справа — так их сравнивают
   глазами, не перечитывая. */
.ag-facts { display: grid; grid-template-columns: 1fr; gap: 10px 18px; margin: 0; }
.ag-facts dt { font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ag-facts dd { margin: 2px 0 0; font-size: var(--agi-fs-base, .9375rem); color: var(--agi-ink); }

.ag-reg { padding: 12px 0; border-top: 1px solid var(--agi-border); }
.ag-reg:first-of-type { border-top: 0; }
.ag-reg-head { font-size: var(--agi-fs-base, .9375rem); color: var(--agi-text-body); }
.ag-reg-head b { color: var(--agi-ink); }
.ag-reg-rate { margin-top: 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ag-reg-rate b { font-size: var(--agi-fs-lg, 1.125rem); color: var(--agi-green-cta); }

@media (min-width: 720px) {
	.ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Истёкшая регистрация — не примечание, а запрет: препарат остаётся в выдаче
   (он может лежать на складе), но сказано об этом до нормы, а не под ней. */
.ag-expired {
	display: block; margin-top: 6px;
	padding: 6px 10px; border-radius: var(--agi-radius-sm);
	background: var(--agi-soon-bg); color: var(--agi-soon-fg);
	font-size: var(--agi-fs-sm, .875rem); line-height: 1.4; font-weight: 600;
}
.ag-expired-big { margin: 14px 0; padding: 12px 14px; font-size: var(--agi-fs-md, 1rem); }
.ag-expired-inline { color: var(--agi-soon-fg); }

/* ── сравнение препаратов ────────────────────────────────────────────────── */
.ag-cmp-bar {
	position: sticky; top: 0; z-index: 5;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 12px 0; padding: 10px 12px;
	background: var(--agi-surface); border: 1px solid var(--agi-border);
	border-radius: var(--agi-radius-card); font-size: var(--agi-fs-sm, .875rem);
}
.ag-cmp-bar button {
	padding: 7px 14px; font-family: inherit; font-size: var(--agi-fs-sm, .875rem); font-weight: 600;
	color: var(--agi-bg); background: var(--agi-green-cta); border: 0;
	border-radius: var(--agi-radius-sm); cursor: pointer;
}
.ag-cmp-bar .ag-cmp-clear { color: var(--agi-text-body); background: none; border: 1px solid var(--agi-border-strong); }

.ag-cmp-pick {
	margin-left: auto; padding: 4px 10px; font-family: inherit; font-size: var(--agi-fs-xs, .75rem);
	color: var(--agi-text-body); background: var(--agi-bg);
	border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius-pill); cursor: pointer;
}
.ag-cmp-pick.is-on { color: var(--agi-bg); background: var(--agi-green-cta); border-color: var(--agi-green-cta); }

/* Таблица прокручивается внутри себя: страница по горизонтали не едет. */
.ag-cmp-scroll { overflow-x: auto; }
.ag-cmp { width: 100%; border-collapse: collapse; font-size: var(--agi-fs-sm, .875rem); }
.ag-cmp th, .ag-cmp td { padding: 10px 12px; text-align: left; vertical-align: top;
	border-top: 1px solid var(--agi-border); }
.ag-cmp th { color: var(--agi-text-muted); font-weight: 600; white-space: nowrap; }
.ag-cmp td { color: var(--agi-ink); min-width: 9rem; }
.ag-cmp td a { color: var(--agi-ink); text-decoration: none; }
.ag-cmp td a:hover { text-decoration: underline; }
/* Строки, по которым решение и принимается, выделены — остальные справочные. */
.ag-cmp-key td { font-weight: 600; }
.ag-cmp-sub { display: block; margin-top: 2px; font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); font-weight: 400; }
.ag-cmp-warn { margin-bottom: 12px; }

/* ── совместимость баковой смеси ─────────────────────────────────────────── */
.ag-compat { display: grid; gap: 6px; margin-top: 12px; }
.ag-compat-row {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 9px 11px; border-radius: var(--agi-radius-sm);
	font-size: var(--agi-fs-sm, .875rem); line-height: 1.45;
}
.ag-compat-row svg { flex: 0 0 auto; margin-top: 1px; }
.ag-compat-high   { background: var(--agi-soon-bg); color: var(--agi-soon-fg); font-weight: 600; }
.ag-compat-medium { background: var(--agi-surface); color: var(--agi-text-body); }
/* Обязательная проверка в банке — не тревога, а правило работы: она не должна
   кричать громче настоящих рисков. */
.ag-compat-info   { background: var(--agi-green-l); color: var(--agi-green-cta); }

/* Перенос препарата из подбора в баковую смесь: связь реестра со сценарием.
   Кнопка стоит в шапке карточки, рядом с названием, — решение принимают,
   глядя на препарат, а не долистав до низа. */
.ag-take {
	margin-left: auto; padding: 9px 16px;
	font-family: inherit; font-size: var(--agi-fs-base, .9375rem); font-weight: 600;
	color: var(--agi-bg); background: var(--agi-green-cta); border: 0;
	border-radius: var(--agi-radius-sm); cursor: pointer; white-space: nowrap;
	box-shadow: var(--agi-shadow-sm);
}
.ag-take:hover { filter: brightness(1.06); }
.ag-take[aria-pressed="true"] { color: var(--agi-green-cta); background: var(--agi-green-l); }
.ag-take-no { margin-left: auto; font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); }
.ag-pick-card.is-picked { border-color: var(--agi-green); }

/* ── поле на карте ───────────────────────────────────────────────────────────
   Карта появляется по кнопке: тем, кто знает кадастровый номер, она не нужна,
   а грузится мегабайтом. */
.ag-map-wrap { margin-top: 14px; }
.ag-map-ctl { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
#ag-map {
	/* Крупнее: поле обводят по снимку, и на маленькой карте край пашни не
	   различить — приходится зумить, теряя контекст. На десктопе ниже задан
	   ещё больший размер. */
	height: 30rem; margin-top: 10px;
	border: 1px solid var(--agi-border); border-radius: var(--agi-radius-card);
	overflow: hidden;
}
#ag-map[hidden] { display: none; }
/* Когда карта не поднялась, пустая рамка вводит в заблуждение — человек ждёт
   загрузки того, чего не будет. Убираем её и оставляем текст причины. */
#ag-map.is-off { display: none; }
.ag-btn-line { color: var(--agi-text-body); background: var(--agi-bg); border: 1px solid var(--agi-border-strong); }
/* Ряд явных действий под планом (ADR-038): КП и заказ — единственные кнопки,
   рождающие лид; ссылки-кнопки не наследуют вид текстовых ссылок. */
.ag-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ag-cta-row .ag-btn { text-decoration: none; }

/* Карточка раздела, которого ещё нет: не ссылка, потому что вести некуда.
   Кликабельная карточка, возвращающая на ту же страницу, читается как поломка. */
.ag-card.is-soon { cursor: default; opacity: .72; }
.ag-card.is-soon:hover { border-color: var(--agi-border); box-shadow: var(--agi-shadow-sm); transform: none; }

/* Сколько препаратов уже перенесено в смесь. Без этого счётчика действие
   выглядело безрезультатным: карточка подсвечивалась, но сказать, что
   произошло дальше, было некому. */
.ag-picked-note {
	display: inline-block; margin-top: 6px;
	color: var(--agi-green-cta); font-weight: 600;
}
.ag-golink {
	font-family: inherit; font-size: inherit; font-weight: 600;
	color: var(--agi-green-cta); background: none; border: 0; padding: 0;
	text-decoration: underline; cursor: pointer;
}

/* ── выбор нескольких проблем ────────────────────────────────────────────────
   На поле редко одна проблема: обработку планируют против комплекса. Выбранное
   всегда на виду и снимается одним нажатием — выпадающий список этого не давал. */
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ag-chip-sel {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 10px 6px 12px; font-family: inherit; font-size: var(--agi-fs-sm, .875rem); font-weight: 600;
	color: var(--agi-bg); background: var(--agi-green-cta); border: 0;
	border-radius: var(--agi-radius-pill); cursor: pointer;
}
.ag-chip-sel span { font-size: var(--agi-fs-md, 1rem); line-height: 1; opacity: .85; }

/* Кнопки внутри групп, поэтому контейнер выкладывает группы столбцом, а
   строку кнопок раскладывает уже сама группа. Высота выросла: с заголовками
   видов пятнадцати рем не хватало и на две группы. */
.ag-oblist { display: block; margin-top: 8px; max-height: 24rem; overflow-y: auto; }
/* Вопросы контекста (ротация групп, вода) — блок с кнопками-выборами и
   пояснением под ними. */
.ag-ask-block { margin: 0 0 20px; }
.ag-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ag-choice {
	font-family: inherit; font-size: var(--agi-fs-sm); padding: 8px 14px;
	color: var(--agi-text-body); background: var(--agi-bg);
	border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius-pill); cursor: pointer;
}
.ag-choice:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-choice.is-on { color: var(--agi-bg); background: var(--agi-green-cta); border-color: var(--agi-green-cta); }
/* Заметка-разбор под вопросами контекста. СВОЙ класс: .ag-note уже занят
   компонентом предупреждений сводки (иконка + текст сеткой), и переопределять
   его здесь значило бы сломать все предупреждения раздела. */
.ag-qnote {
	display: block;
	margin-top: 12px; padding: 12px 14px; font-size: var(--agi-fs-sm); line-height: 1.55;
	background: var(--agi-surface); border-left: 3px solid var(--agi-green);
	border-radius: 0 var(--agi-radius-md, .5rem) var(--agi-radius-md, .5rem) 0;
}
.ag-qnote p { margin: 0 0 6px; }
.ag-qnote p:last-child { margin-bottom: 0; }
.ag-src-note { color: var(--agi-text-muted); font-size: var(--agi-fs-xs, .75rem); }

/* Документы работ: три листа под трёх читателей + гейт входа. */
.ag-doc-navi { font-size: var(--agi-fs-sm); margin: 0 0 12px; }
.ag-doc-navi a { color: var(--agi-green-cta); font-weight: 600; }
.ag-docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ag-doc {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 12px; background: var(--agi-surface);
	border: 1px solid var(--agi-border); border-radius: var(--agi-radius-md, .5rem);
}
.ag-doc b { display: block; font-size: var(--agi-fs-base); }
.ag-doc span { display: block; font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-doc-lock { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); white-space: nowrap; }
.ag-doc-gate {
	font-size: var(--agi-fs-sm); line-height: 1.55; color: var(--agi-text-body);
	background: var(--agi-surface); border-left: 3px solid var(--agi-green);
	padding: 12px 14px; border-radius: 0 var(--agi-radius-md, .5rem) var(--agi-radius-md, .5rem) 0;
}
.ag-doc-gate-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-doc-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }

/* Поиск препарата в реестре при сборке смеси. */
/* Методика: то, по чему профессионал решает, доверять ли инструменту. */
.ag-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 14px; margin-bottom: 12px; }
.ag-method-i { background: var(--agi-surface); border: 1px solid var(--agi-border); border-radius: var(--agi-radius-lg); padding: 16px 18px; }
.ag-method-i h3 { font-size: var(--agi-fs-base); margin: 0 0 6px; color: var(--agi-ink); }
.ag-method-i p { font-size: var(--agi-fs-sm); line-height: 1.6; color: var(--agi-text-body); margin: 0; }
.ag-method-note { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 0 0 24px; }

/* Фасеты справочника: счётчик у каждого фильтра говорит, есть ли там что
   искать, ещё до нажатия. */
.ag-facets { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; }
.ag-facet h3 { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); font-weight: 600; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.ag-facet-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-facet-b {
	display: inline-flex; align-items: center; gap: 6px; font: inherit;
	font-size: var(--agi-fs-sm); padding: 5px 11px; cursor: pointer;
	color: var(--agi-text-body); background: var(--agi-bg);
	border: 1px solid var(--agi-border); border-radius: var(--agi-radius-pill);
}
.ag-facet-b:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-facet-b.is-on { background: var(--agi-green-cta); border-color: var(--agi-green-cta); color: var(--agi-bg); font-weight: 600; }
.ag-facet-b span { font-size: var(--agi-fs-xs, .75rem); opacity: .75; font-variant-numeric: tabular-nums; }
.ag-facet-reset { margin: 2px 0 0; }

/* Группы способов внесения в питании: 120 записей подряд — стена, а вопрос
   агронома звучит как «чем подкормить по листу». */
.ag-feed-group { margin-bottom: 18px; }
.ag-feed-group-t {
	display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
	font-size: var(--agi-fs-base); color: var(--agi-ink);
}
.ag-feed-group-t span {
	font-size: var(--agi-fs-xs, .75rem); font-weight: 600; color: var(--agi-green-cta);
	background: var(--agi-green-l2, var(--agi-green-l)); border-radius: var(--agi-radius-pill);
	padding: 2px 8px;
}
.ag-pick-ai { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin-bottom: 6px; }

.ag-addbox { margin-top: 10px; padding: 12px; background: var(--agi-surface); border: 1px solid var(--agi-border); border-radius: var(--agi-radius-md, .5rem); }
.ag-addbox[hidden] { display: none; }
.ag-addbox input[type="search"] { width: 100%; }
.ag-addrow {
	display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
	padding: 8px 10px; margin-top: 6px; cursor: pointer; font: inherit; color: var(--agi-text-body);
	background: var(--agi-bg); border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
}
.ag-addrow:hover { border-color: var(--agi-green); }
.ag-addrow b { font-size: var(--agi-fs-base); }
.ag-addrow span { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }

/* Печатный лист. Экрану он не нужен вовсе, поэтому по умолчанию скрыт; при
   печати остаётся ТОЛЬКО он — печать всей страницы сценария дала бы двадцать
   листов с полями ввода, в которых пилот не найдёт задания.
   Цвета — те же токены, что на экране: вторая палитра «для печати» разошлась бы
   с разделом, а ратчет её и ловит. */
#ag-print { display: none; }
@media print {
  body.ag-printing > *:not(#ag-print) { display: none !important; }
  body.ag-printing #ag-print { display: block; }
  #ag-print h1 { font-size: var(--agi-fs-xl); margin: 0 0 .6rem; }
  #ag-print h2 { font-size: var(--agi-fs-lg); margin: 1.1rem 0 .4rem; }
  #ag-print table { width: 100%; border-collapse: collapse; margin: .3rem 0 .6rem; }
  #ag-print td { padding: .35rem .4rem; border-bottom: 1px solid var(--agi-border); vertical-align: top; }
  #ag-print td.n { text-align: right; white-space: nowrap; }
  #ag-print .ag-print-req td:first-child { color: var(--agi-text-muted); width: 40%; }
  #ag-print .ag-print-date { color: var(--agi-text-muted); font-size: var(--agi-fs-sm); margin: .2rem 0 1rem; }
  #ag-print .ag-print-note { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin: .5rem 0; }
  @page { margin: 14mm; }
}
}

/* Карта поля с ветром: направление сноса читается картинкой, а не таблицей. */
.ag-windmap { margin: 0 0 16px; }
.ag-windmap[hidden] { display: none; }
.ag-windmap-box { position: relative; border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius-md, .5rem); overflow: hidden; }
.ag-windmap-box canvas { display: block; width: 100%; height: 15rem; }
.ag-windmap-hud {
	position: absolute; left: 8px; top: 8px; padding: 5px 9px; border-radius: var(--agi-radius-sm);
	background: rgba(18,24,18,.72); color: var(--agi-bg); font-size: var(--agi-fs-xs, .75rem); line-height: 1.35;
	font-variant-numeric: tabular-nums; pointer-events: none;
}
.ag-windmap-v {
	position: absolute; right: 8px; top: 8px; padding: 5px 9px; border-radius: var(--agi-radius-sm);
	font-size: var(--agi-fs-xs, .75rem); font-weight: 700; color: var(--agi-bg);
}
.ag-windmap-v.is-ok { background: var(--agi-green-cta); }
.ag-windmap-v.is-no { background: var(--agi-soon-fg); }
.ag-windmap input[type="range"] { width: 100%; margin: 10px 0 4px; accent-color: var(--agi-green); }
.ag-windmap-ticks { display: flex; gap: 1px; margin-bottom: 6px; }
.ag-windmap-ticks i { flex: 1; height: 8px; background: var(--agi-border); border-radius: var(--agi-radius-sm); }
.ag-windmap-ticks i.is-ok { background: var(--agi-green); }
.ag-windmap-ticks i.is-now { outline: 2px solid var(--agi-ink); outline-offset: 1px; }
.ag-qnote-warn { color: var(--agi-soon-fg, var(--agi-ink)); }
.ag-obg { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; }
.ag-obg-t { grid-column: 1 / -1; }
/* Карточка вредного объекта: фото для сверки, числа реестра, происхождение.
   Пилюли с одним названием не давали агроному опознать объект в поле. */
.ag-obc {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--agi-bg); border: 1px solid var(--agi-border-strong);
	border-radius: var(--agi-radius-lg);
}
.ag-obc.is-on { border-color: var(--agi-green-cta); box-shadow: var(--agi-shadow-focus); }
.ag-obc.is-vendor { border-style: dashed; }
.ag-obc-main {
	display: flex; align-items: center; gap: 10px; padding: 10px;
	font-family: inherit; text-align: left; background: none; border: 0; cursor: pointer; width: 100%;
}
.ag-obc-pic { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; object-fit: cover; border-radius: var(--agi-radius-md, .5rem); background: var(--agi-surface); }
.ag-obc-pic.is-empty { display: block; border: 1px dashed var(--agi-border); }
.ag-obc-body { display: flex; flex-direction: column; min-width: 0; }
.ag-obc-src { font-size: var(--agi-fs-xs, .75rem); text-transform: uppercase; letter-spacing: .04em; color: var(--agi-text-muted); }
.ag-obc-t { font-size: var(--agi-fs-base); color: var(--agi-text-body); }
.ag-obc.is-on .ag-obc-t { color: var(--agi-green-cta); }
.ag-obc-n { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-obc-i {
	font-family: inherit; font-size: var(--agi-fs-sm); color: var(--agi-green-cta);
	background: var(--agi-surface); border: 0; border-top: 1px solid var(--agi-border);
	padding: 8px 10px; cursor: pointer; text-align: left;
}
.ag-obc-i:hover { background: var(--agi-green-l2); }
.ag-obg-t { width: 100%; }
.ag-ob {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 11px; font-family: inherit; font-size: var(--agi-fs-sm, .875rem);
	color: var(--agi-text-body); background: var(--agi-bg);
	border: 1px solid var(--agi-border-strong); border-radius: var(--agi-radius-pill); cursor: pointer;
}
.ag-ob:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-ob.is-on { color: var(--agi-bg); background: var(--agi-green-cta); border-color: var(--agi-green-cta); }
.ag-ob-n { font-size: var(--agi-fs-xs, .75rem); opacity: .7; }

/* Кнопка «что это» рядом с объектом + карточка-шторка с фото (паритет со смотровой) */
.ag-ob-wrap { display: inline-flex; align-items: stretch; }
.ag-ob-wrap .ag-ob { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ag-ob-i {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2rem; padding: 0 9px; margin-left: -1px;
	font-family: inherit; font-size: var(--agi-fs-sm, .875rem); font-weight: 700;
	color: var(--agi-text-muted); background: var(--agi-surface);
	border: 1px solid var(--agi-border-strong);
	border-top-right-radius: var(--agi-radius-pill); border-bottom-right-radius: var(--agi-radius-pill);
	cursor: pointer;
}
.ag-ob-i:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-sheet-ov {
	position: fixed; inset: 0; z-index: 1000; display: none;
	align-items: flex-end; justify-content: center;
	background: rgba(0,0,0,.45); padding: 0;
}
.ag-sheet-ov.is-open { display: flex; }
.ag-sheet {
	position: relative; width: 100%; max-width: 32rem; max-height: 88vh; overflow-y: auto;
	background: var(--agi-bg); border-radius: var(--agi-radius-lg) var(--agi-radius-lg) 0 0;
	padding: 24px 20px 28px; box-shadow: var(--agi-shadow-lg, 0 -8px 40px rgba(0,0,0,.2));
}
@media (min-width: 640px) {
	.ag-sheet-ov { align-items: center; }
	.ag-sheet { border-radius: var(--agi-radius-lg); }
}
.ag-sheet-x {
	position: absolute; top: 12px; right: 12px; width: 2.25rem; height: 2.25rem;
	font-size: var(--agi-fs-lg); line-height: 1; color: var(--agi-text-muted);
	background: var(--agi-surface); border: 1px solid var(--agi-border);
	border-radius: var(--agi-radius-md, .5rem); cursor: pointer;
}
.ag-sheet-t { font-size: var(--agi-fs-lg); font-weight: 700; margin: 0 2.5rem 2px 0; }
.ag-sheet-sub { color: var(--agi-text-muted); font-size: var(--agi-fs-sm); margin: 0 0 14px; }
.ag-obj-photo { margin: 0 0 14px; }
.ag-obj-photo img { width: 100%; max-height: 15rem; object-fit: cover; border-radius: var(--agi-radius-md, .5rem); display: block; }
.ag-obj-photo figcaption { font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); margin-top: 6px; }
.ag-sheet-desc { font-size: var(--agi-fs-base); line-height: 1.55; margin: 0 0 12px; }
.ag-sheet-meta { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 0; }

/* Против чего именно работает препарат — первый вопрос к карточке. Метками, а
   не строкой через запятую: в списке из шестидесяти карточек серая строка
   внизу не читается. */
.ag-covers {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin-top: 8px; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-muted);
}
.ag-covers-t { color: var(--agi-text-muted); }
.ag-covers.is-multi .ag-covers-t { color: var(--agi-green-cta); font-weight: 600; }
.ag-cov {
	padding: 3px 9px; font-size: var(--agi-fs-xs, .75rem); font-weight: 600;
	border-radius: var(--agi-radius-pill); border: 1px solid transparent;
	color: var(--agi-text-body); background: var(--agi-surface);
}
/* Цвет метки = вид объекта: против болезни и против вредителя работают
   по-разному и в разные сроки, и это различие должно читаться до чтения. */
.ag-cov.is-disease { color: var(--agi-danger-fg);  background: var(--agi-danger-bg); }
.ag-cov.is-insect  { color: var(--agi-soon-fg);    background: var(--agi-soon-bg); }
.ag-cov.is-weed    { color: var(--agi-instock-fg); background: var(--agi-instock-bg); }
.ag-cov.is-growth  { color: var(--agi-text-muted); background: var(--agi-surface); }

/* Виды объектов в графе «Что не так на поле». */
.ag-obg { width: 100%; margin-bottom: 12px; }
.ag-obg-t {
	display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
	font-size: var(--agi-fs-xs, .75rem); font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: var(--agi-text-muted);
}
.ag-obg-n {
	padding: 1px 7px; font-size: var(--agi-fs-xs, .75rem); font-weight: 700;
	text-transform: none; letter-spacing: 0;
	color: var(--agi-text-body); background: var(--agi-surface);
	border-radius: var(--agi-radius-pill);
}
.ag-obg.is-disease .ag-obg-t { color: var(--agi-danger-fg); }
.ag-obg.is-insect  .ag-obg-t { color: var(--agi-soon-fg); }
.ag-obg.is-weed    .ag-obg-t { color: var(--agi-instock-fg); }
.ag-obg-more {
	display: inline-block; margin-left: 4px;
	font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted);
}

/* ── подбор сгруппирован по числу закрытых проблем ───────────────────────────
   Сортировки мало: в сплошном списке из шестидесяти карточек не видно границы
   между теми, кто закрывает весь комплекс, и теми, кто закрывает одну проблему
   из трёх. А это главное различие при выборе. */
.ag-grp { margin-bottom: 18px; }
.ag-grp-t {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; padding-bottom: 8px;
	font-size: var(--agi-fs-base, .9375rem); font-weight: 600; color: var(--agi-text-muted);
	border-bottom: 1px solid var(--agi-border);
}
.ag-grp-n {
	margin-left: auto; padding: 2px 9px;
	font-size: var(--agi-fs-xs, .75rem); font-weight: 700;
	color: var(--agi-text-body); background: var(--agi-surface);
	border-radius: var(--agi-radius-pill);
}
/* Группа, закрывающая весь комплекс, — то, ради чего агроном сюда пришёл. */
.ag-grp.is-best .ag-grp-t { color: var(--agi-green-cta); border-bottom-color: var(--agi-green); }
.ag-grp.is-best .ag-grp-n { color: var(--agi-bg); background: var(--agi-green-cta); }

/* Поле, ушедшее в платную часть: видно, что возможность есть, но она выключена.
   Убрать его совсем — значит скрыть, что она существует. */
.ag-f.is-locked input, .ag-f.is-locked button { opacity: .55; cursor: not-allowed; }
.ag-pro {
	display: inline-block; margin-left: 8px; padding: 2px 8px;
	font-size: var(--agi-fs-xs, .75rem); font-weight: 700; text-transform: none;
	color: var(--agi-soon-fg); background: var(--agi-soon-bg);
	border-radius: var(--agi-radius-pill); vertical-align: middle;
}

/* ── справка о полётах над полем ─────────────────────────────────────────────
   Светофор задаёт рамку и подложку всего блока, а не одну плашку внутри: в
   калькуляторе цветной была только строка вердикта, и в общем потоке текста
   она терялась. Уровень должен читаться до чтения — с расстояния.
   Цвета — статусные токены (склад/скоро/опасность), своих hex нет. */
.ag-flight {
	margin-top: 16px; padding: 16px 18px;
	background: var(--agi-surface); border: 1px solid var(--agi-border);
	border-left: 4px solid var(--agi-border-strong);
	border-radius: var(--agi-radius-card);
}
.ag-flight.is-ok   { border-left-color: var(--agi-green-cta); background: var(--agi-instock-bg); }
.ag-flight.is-warn { border-left-color: var(--agi-soon-fg);   background: var(--agi-soon-bg); }
.ag-flight.is-bad  { border-left-color: var(--agi-danger);    background: var(--agi-danger-bg); }

.ag-fl-head {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	font-size: var(--agi-fs-base, .9375rem); color: var(--agi-ink);
}
.ag-fl-pt { font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted); font-family: var(--agi-font-mono); }

.ag-fl-verdict {
	display: flex; align-items: center; gap: 9px; margin: 8px 0 12px;
	font-size: var(--agi-fs-md, 1rem); font-weight: 600; color: var(--agi-ink);
}
.ag-fl-dot { width: .875rem; height: .875rem; border-radius: var(--agi-radius-pill); flex: 0 0 auto; background: var(--agi-border-strong); }
.ag-flight.is-ok   .ag-fl-dot { background: var(--agi-green-cta); }
.ag-flight.is-warn .ag-fl-dot { background: var(--agi-soon-fg); }
.ag-flight.is-bad  .ag-fl-dot { background: var(--agi-danger); }

/* Срок — главная величина блока: обработку срывает не запрет, а нехватка дней
   на согласование. Поэтому он набран крупно и стоит выше подробностей. */
.ag-fl-lead {
	display: flex; align-items: center; gap: 9px;
	margin-bottom: 12px; padding: 9px 12px;
	background: var(--agi-bg); border-radius: var(--agi-radius-sm);
	font-size: var(--agi-fs-base, .9375rem); color: var(--agi-text-body);
}
.ag-fl-lead b { font-size: var(--agi-fs-xl, 1.25rem); color: var(--agi-ink); }
.ag-fl-lead span:last-child { color: var(--agi-text-muted); }

.ag-fl-row {
	display: flex; gap: 9px; align-items: flex-start;
	padding: 7px 0; border-top: 1px solid var(--agi-border);
	font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body); line-height: 1.45;
}
.ag-fl-tx b { color: var(--agi-ink); }
.ag-fl-i { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; color: var(--agi-text-muted); }
.ag-fl-i svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.ag-fl-do {
	margin: 12px 0 6px;
	font-size: var(--agi-fs-sm, .875rem); font-weight: 600; color: var(--agi-ink);
}
.ag-fl-steps {
	margin: 0 0 12px; padding-left: 1.25rem;
	font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body); line-height: 1.5;
}
.ag-fl-steps li { margin-bottom: 3px; }

.ag-fl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ag-fl-links .ag-btn { text-decoration: none; }

/* Предложение внизу, а не вверху: сначала человек получает ответ, и только
   потом узнаёт, что эту работу можно отдать нам. Наоборот — это реклама. */
.ag-fl-offer {
	margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--agi-border);
	font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body);
}

@media (min-width: 900px) {
	#ag-map { height: 38rem; }
}

/* Практика применения — из каталога изготовителя, не из государственного
   реестра. Подпись источника обязательна: норма и практика — утверждения
   разной силы, и слить их в одну строку значит выдать одно за другое. */
.ag-pick-practice {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 4px; font-size: var(--agi-fs-sm, .875rem); color: var(--agi-text-body);
}
.ag-pick-practice-src {
	padding: 1px 7px; font-size: var(--agi-fs-xs, .75rem);
	color: var(--agi-text-muted); background: var(--agi-surface);
	border-radius: var(--agi-radius-pill);
}

/* Чувствительность выбранного объекта к препарату — по каталогу изготовителя.
   Регламент выдан на класс сорняков и подмаренник от вьюнка не отличает;
   производитель отличает, и это различие решает исход обработки. */
.ag-susc {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin-top: 6px; font-size: var(--agi-fs-sm, .875rem);
}
.ag-susc-t { color: var(--agi-text-muted); }
.ag-su {
	padding: 3px 9px; font-size: var(--agi-fs-xs, .75rem); font-weight: 600;
	border-radius: var(--agi-radius-pill); color: var(--agi-text-body);
	background: var(--agi-surface); border: 1px solid var(--agi-border);
}
.ag-su i { font-style: normal; font-weight: 400; opacity: .8; }
.ag-su.is-ok  { color: var(--agi-instock-fg); background: var(--agi-instock-bg); border-color: transparent; }
.ag-su.is-mid { color: var(--agi-soon-fg);    background: var(--agi-soon-bg);    border-color: transparent; }
.ag-su.is-low { color: var(--agi-danger-fg);  background: var(--agi-danger-bg);  border-color: transparent; }
.ag-su.is-no  { color: var(--agi-danger-fg);  background: var(--agi-danger-bg);  border-color: var(--agi-danger); }

/* Вид, названный изготовителем, а не реестром. Подбор по нему опирается на
   оценку производителя, а не на регламент, и различие должно быть видно ДО
   выбора: пунктир — не украшение, а признак другого источника. */
.ag-ob.is-vendor { border-style: dashed; }
.ag-ob.is-vendor.is-on { border-style: solid; }

/* Почему в бак льют не до полного. Полёт кончается по разряженной батарее, а
   не по пустому баку: лишний раствор — это вес, съедающий короткий полёт. */
.ag-fill-note {
	margin: 10px 0 0; padding: 10px 12px;
	font-size: var(--agi-fs-sm, .875rem); line-height: 1.5;
	border-radius: var(--agi-radius-sm);
	color: var(--agi-text-body); background: var(--agi-surface);
	border-left: 3px solid var(--agi-border-strong);
}
/* Атрибут hidden должен побеждать: у блока задан свой display, и без этой
   строки заметка от предыдущей модели остаётся на экране. На кнопках
   «Готово»/«Убрать контур» эта же ловушка уже срабатывала. */
.ag-fill-note[hidden] { display: none; }
.ag-fill-note b { color: var(--agi-ink); }
.ag-fill-note.is-battery { background: var(--agi-instock-bg); border-left-color: var(--agi-green-cta); }
.ag-fill-note.is-unknown { background: var(--agi-soon-bg);    border-left-color: var(--agi-soon-fg); }

/* Таблица заправки по нормам: текущая строка выделена, остальные — справка. */
.ag-fill-wrap { margin-top: 12px; }
/* Отступ между ячейками обязателен: без него «40 л» и «бак — выльет весь»
   слипались в «40 лбак», и строка переставала читаться. */
.ag-fill-tab td, .ag-fill-tab th {
	font-size: var(--agi-fs-sm, .875rem);
	padding: 5px 8px 5px 0;
}
.ag-fill-tab td:last-child, .ag-fill-tab th:last-child { padding-right: 0; padding-left: 8px; }
.ag-fill-tab tr.is-cur { background: var(--agi-instock-bg); }
.ag-fill-tab tr.is-cur td { color: var(--agi-instock-fg); font-weight: 600; }

/* Смесительный узел: замес и вся работа. */
.ag-st-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
.ag-st-kpi {
	flex: 1 1 8rem; padding: 9px 12px;
	background: var(--agi-surface); border-radius: var(--agi-radius-sm);
}
.ag-st-kpi b { display: block; font-size: var(--agi-fs-lg); color: var(--agi-ink); }
.ag-st-kpi span { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }
.ag-st-tab td, .ag-st-tab th { font-size: var(--agi-fs-sm, .875rem); padding: 5px 8px 5px 0; }
.ag-st-tab td:last-child, .ag-st-tab th:last-child { padding-right: 0; padding-left: 8px; }

/* Замес и заправка: две колонки рядом — полная и последняя неполная. Порознь
   их не понять: вопрос «а последняя?» возникает сразу, и ответ должен быть
   рядом, а не строкой ниже. */
/* auto-fit по ширине контейнера, а не медиазапрос по окну: блок живёт и в
   широкой панели шага, и в узкой колонке сводки, и во второй две колонки
   рядом не помещаются — текст обрезался. */
.ag-mixcols {
	display: grid; gap: 12px; margin: 10px 0 6px;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ag-mixcol {
	padding: 12px 14px;
	background: var(--agi-surface); border-radius: var(--agi-radius-sm);
	border-left: 3px solid var(--agi-green-cta);
}
.ag-mixcol.is-last { border-left-color: var(--agi-soon-fg); background: var(--agi-soon-bg); }
.ag-mixcol-h {
	margin-bottom: 6px; font-size: var(--agi-fs-base); font-weight: 600; color: var(--agi-ink);
}
.ag-mixcol-h span {
	display: block; font-size: var(--agi-fs-xs); font-weight: 400; color: var(--agi-text-muted);
}

/* Разрез бака: картинка слева, подписи справа. Внутри картинки надписей нет —
   при тонких слоях они наезжали друг на друга. */
.ag-viz-row { display: flex; gap: 14px; align-items: flex-start; }
.ag-viz-svg { flex: 0 0 8.25rem; width: 8.25rem; height: 11.875rem; }
.ag-viz-leg { flex: 1 1 auto; min-width: 0; }
.ag-viz-cap { font-size: var(--agi-fs-base); font-weight: 600; color: var(--agi-ink); margin-bottom: 6px; }
.ag-viz-leg ul { margin: 0 0 6px; padding: 0; list-style: none; }
.ag-viz-leg li {
	display: flex; align-items: center; gap: 8px; padding: 3px 0;
	font-size: var(--agi-fs-sm); color: var(--agi-text-body);
}
.ag-viz-leg li b { margin-left: auto; color: var(--agi-ink); }
.ag-viz-dot { width: .75rem; height: .75rem; border-radius: var(--agi-radius-sm); flex: 0 0 auto; }

/* Разрез бака на узком экране — тоже столбиком: 8 рем картинки плюс легенда
   в полосу шириной с ладонь не читаются. */
@media (max-width: 460px) {
	.ag-viz-row { flex-direction: column; }
	.ag-viz-svg { flex: 0 0 auto; }
}

/* ── замесы узла: переключатель, разрез, инструкция ─────────────────────────
   Замесов бывает десяток, и простынёй они не читаются. Переключатель ставит
   перед глазами ровно тот, который сейчас готовят. */
.ag-batches {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin: 10px 0 12px; font-size: var(--agi-fs-sm); color: var(--agi-text-muted);
}
.ag-bt {
	min-width: 2.25rem; padding: 6px 10px; font-family: inherit;
	font-size: var(--agi-fs-sm); font-weight: 600; color: var(--agi-text-body);
	background: var(--agi-bg); border: 1px solid var(--agi-border-strong);
	border-radius: var(--agi-radius-sm); cursor: pointer;
	transition: all var(--agi-dur) var(--agi-ease);
}
.ag-bt:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
.ag-bt.is-on { background: var(--agi-green-cta); border-color: var(--agi-green-cta); color: var(--agi-bg); }
/* Последний замес неполный — помечен ещё до нажатия, чтобы не искать. */
.ag-bt.is-last { border-style: dashed; }
.ag-bt.is-last.is-on { background: var(--agi-soon-fg); border-color: var(--agi-soon-fg); }
.ag-bt-of { margin-left: 4px; }

.ag-mixviz { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.ag-mixviz-tank { text-align: center; }
.ag-mixviz-cap {
	margin-bottom: 6px; font-size: var(--agi-fs-base); color: var(--agi-text-body);
}
.ag-mixviz-cap b { color: var(--agi-ink); }
/* Высота схемы зависит от числа шагов, поэтому задаётся не жёстко: у смеси из
   двух компонентов и из пяти она разная. */
.ag-mixviz-svg { width: 16.25rem; height: auto; max-width: 100%; }
.ag-mixviz-note { font-size: var(--agi-fs-xs, .75rem); color: var(--agi-text-muted);
	margin: 6px auto 0; max-width: 17.5rem; }

/* Инструкция по шагам: номер, цвет компонента, что делать. Порядок загрузки
   ошибиться легко, а последствие — осадок и забитые форсунки. */
.ag-steps-mix { margin: 0; padding: 0; list-style: none; counter-reset: mixstep; }
.ag-steps-mix li {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 8px 0; border-top: 1px solid var(--agi-border);
}
.ag-steps-mix li:first-child { border-top: 0; }
.ag-steps-mix li > div { flex: 1 1 auto; min-width: 0; }
.ag-steps-mix b {
	display: block; font-size: var(--agi-fs-base); color: var(--agi-ink); font-weight: 600;
}
.ag-steps-mix span:last-child {
	display: block; font-size: var(--agi-fs-sm); color: var(--agi-text-muted); line-height: 1.45;
}
/* Номер шага в кружке — тот же, что на схеме: связь между картинкой и
   списком должна читаться без объяснений. */
.ag-step-dot {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; margin-top: 1px;
	border-radius: var(--agi-radius-pill);
	font-size: var(--agi-fs-xs); font-weight: 700; color: var(--agi-bg);
}

@media (min-width: 640px) {
	/* Колонка бака шириной со схему, не шире. Была `auto`, и её раздувала
	   подпись «Высоты слоёв условные…» под баком: длинная строка тянула
	   колонку на себя, а инструкция по шагам справа сжималась в столбик
	   шириной в одно слово. minmax(0,…) в обеих колонках — чтобы длинное
	   название препарата не повторило тот же трюк. */
	.ag-mixviz { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); }
}

/* Сухие компоненты: масса без слоя в разрезе. Их объём в растворе неизвестен —
   плотность препарата не публикует никто, — и рисовать их одной шкалой с
   литрами значит складывать килограммы с литрами. */
.ag-dry {
	margin-top: 8px; padding: 8px 10px;
	font-size: var(--agi-fs-sm); color: var(--agi-text-body);
	background: var(--agi-surface); border-radius: var(--agi-radius-sm); text-align: left;
}
.ag-dry span { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }

/* ── шаг «Когда»: погодное окно ────────────────────────────────────────────
   Час — минимальная единица показа: за смену условия меняются полностью, и
   суточная лента из 24 клеток говорит больше, чем «завтра ясно». Цвет —
   единственный носитель смысла в ленте, поэтому у клетки есть и подпись
   часа: по одному цвету работать нельзя. */
.ag-wx-best {
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--agi-green); border-radius: var(--agi-radius-md);
  background: var(--agi-green-l);
}
.ag-wx-best.is-none { border-color: var(--agi-border-strong); background: var(--agi-surface); }
.ag-wx-best-l { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ag-wx-best-v { font-size: var(--agi-fs-xl); font-weight: 700; color: var(--agi-ink); line-height: 1.2; }
.ag-wx-best-s { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin-top: 2px; }
.ag-wx-notes { margin: 8px 0 0; padding-left: 18px; font-size: var(--agi-fs-sm); color: var(--agi-text-body); }
.ag-wx-notes li { margin-top: 3px; }
.ag-wx-clean { margin: 6px 0 0; font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }

.ag-wx-tw { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin: 0 0 12px; }
.ag-wx-tw.is-bad { color: var(--agi-danger-fg); }

.ag-wx-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-bottom: 8px; }
.ag-wx-lg { width: .75rem; height: .75rem; border-radius: var(--agi-radius-xs); display: inline-block; margin-left: 10px; }
.ag-wx-lg:first-child { margin-left: 0; }
.ag-wx-lg.is-good { background: var(--agi-green); }
.ag-wx-lg.is-ok   { background: var(--agi-soon-fg); }
.ag-wx-lg.is-no   { background: var(--agi-border-strong); }

.ag-wx-day { margin-bottom: 10px; }
.ag-wx-date { display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--agi-fs-sm); font-weight: 600; color: var(--agi-ink); margin-bottom: 3px; }
.ag-wx-date span { font-weight: 400; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }
/* Полоса суток прокручивается вбок на узком экране, а не ломает страницу. */
.ag-wx-strip { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.ag-wx-h {
  flex: 1 0 1.4rem; min-width: 1.4rem; height: 2.1rem; padding: 0;
  border: 0; border-radius: var(--agi-radius-xs); cursor: pointer; font-family: inherit;
  font-size: var(--agi-fs-xs); line-height: 1; color: var(--agi-bg);
  display: flex; align-items: flex-end; justify-content: center;
}
.ag-wx-h span { padding-bottom: 2px; opacity: .9; }
.ag-wx-h.is-good { background: var(--agi-green); }
.ag-wx-h.is-ok   { background: var(--agi-soon-fg); }
.ag-wx-h.is-no   { background: var(--agi-border-strong); color: var(--agi-text-muted); }
.ag-wx-h:hover, .ag-wx-h:focus-visible { outline: 2px solid var(--agi-ink); outline-offset: 1px; }

.ag-wx-list { margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--agi-fs-sm); }
.ag-wx-list li { padding: 6px 0; border-top: 1px solid var(--agi-border); }
.ag-wx-list li:first-child { border-top: 0; }
.ag-wx-len { color: var(--agi-text-muted); margin-left: 6px; }
.ag-wx-tag { margin-left: 8px; padding: 1px 7px; border-radius: var(--agi-radius-pill);
  background: var(--agi-soon-bg); color: var(--agi-soon-fg); font-size: var(--agi-fs-xs); }

.ag-wx-hour { margin: 12px 0; padding: 12px 14px; border-radius: var(--agi-radius-md);
  border: 1px solid var(--agi-border-strong); background: var(--agi-surface); }
.ag-wx-hour.is-good { border-color: var(--agi-green); background: var(--agi-green-l); }
.ag-wx-hour.is-ok   { border-color: var(--agi-soon-fg); background: var(--agi-soon-bg); }
.ag-wx-hour-h { font-size: var(--agi-fs-md); color: var(--agi-ink); margin-bottom: 8px; }
.ag-wx-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 8px; }
.ag-wx-val b { display: block; font-size: var(--agi-fs-lg); color: var(--agi-ink);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.ag-wx-val span { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }
.ag-wx-why { margin: 10px 0 0; padding-left: 18px; font-size: var(--agi-fs-sm); }
.ag-wx-why li { margin-top: 4px; color: var(--agi-text-body); }
.ag-wx-why li.is-high { color: var(--agi-danger-fg); font-weight: 600; }

/* ── сколько бортов, чтобы успеть ──────────────────────────────────────────
   Строка = вариант флота. Рекомендация выделена рамкой, а не только цветом:
   на дешёвых экранах в поле зелёный и серый сливаются. */
.ag-fleet-sum { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin: 0 0 8px; }
.ag-fleet { margin: 0 0 12px; padding: 0; list-style: none; }
.ag-fleet li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  margin-top: 6px; font-size: var(--agi-fs-sm);
}
.ag-fleet li b { color: var(--agi-ink); }
.ag-fleet li.is-nofit { color: var(--agi-text-muted); }
.ag-fleet li.is-nofit .ag-fleet-verdict { color: var(--agi-danger-fg); }
.ag-fleet li.is-fit .ag-fleet-verdict { color: var(--agi-green-cta); font-weight: 600; }
.ag-fleet li.is-rec { border-color: var(--agi-green); background: var(--agi-green-l); }
.ag-fleet-rec {
  margin-left: auto; padding: 1px 8px; border-radius: var(--agi-radius-pill);
  background: var(--agi-green-cta); color: var(--agi-bg); font-size: var(--agi-fs-xs); font-weight: 600;
}

/* ── разбор строки задачи на рабочем столе ─────────────────────────────────
   Показываем не только то, что поняли, но и то, чего не поняли: молча
   проглоченный фрагмент означает, что агроном считает его учтённым. */
.ag-ask-out[hidden] { display: none; }
.ag-ask-out { margin-top: 12px; }
.ag-parsed { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 8px; }
.ag-parsed-i {
  padding: 8px 12px; border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  background: var(--agi-surface);
}
.ag-parsed-l { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.ag-parsed-i b { display: block; color: var(--agi-ink); font-size: var(--agi-fs-md); line-height: 1.25; }
.ag-parsed-n { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-top: 2px; }
.ag-parsed-none { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin: 0; }
.ag-parsed-unknown { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 10px 0 0; }
.ag-parsed-unknown span {
  display: inline-block; padding: 1px 7px; margin: 0 2px;
  border-radius: var(--agi-radius-pill); background: var(--agi-soon-bg); color: var(--agi-soon-fg);
}
.ag-parsed-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ── размер реестра под заголовком ─────────────────────────────────────────
   Отвечает на первый вопрос человека, впервые открывшего раздел: есть ли здесь
   чем пользоваться. Числа приходят из реестра, не из вёрстки. */
.ag-stats[hidden] { display: none; }
.ag-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.ag-flow-next { display: flex; justify-content: flex-end; margin: 20px 0 0; }
.ag-flow-next[hidden] { display: none; }
.ag-flow-next .ag-btn { min-width: 12rem; justify-content: center; }
@media (max-width: 640px) { .ag-flow-next .ag-btn { width: 100%; } }
.ag-cta[hidden] { display: none; }
.ag-cta { border: 1px solid var(--agi-border); border-radius: var(--agi-radius-lg); padding: 24px; margin: 24px 0 0; background: var(--agi-surface); }
.ag-cta-t { font-size: var(--agi-fs-lg); font-weight: 700; margin: 0 0 6px; }
.ag-cta-s { color: var(--agi-text-muted); font-size: var(--agi-fs-sm); line-height: 1.55; margin: 0 0 16px; }
.ag-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-more-wrap { display: flex; justify-content: center; margin: 20px 0 4px; }
.ag-stats-note { margin-top: 12px; color: var(--agi-text-muted); font-size: var(--agi-fs-sm); }
.ag-authwall { border: 1px solid var(--agi-border); border-radius: var(--agi-radius-lg); padding: 24px; text-align: center; background: var(--agi-surface); }
.ag-authwall-t { font-size: var(--agi-fs-lg); font-weight: 600; margin: 0 0 6px; }
.ag-authwall-s { color: var(--agi-text-muted); font-size: var(--agi-fs-sm); margin: 0 0 16px; }
.ag-stat { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-stat b { color: var(--agi-ink); font-variant-numeric: tabular-nums; }

/* ── справочник вредных объектов ───────────────────────────────────────────
   Карточка = объект: фото, имя, латынь, одна строка сути. Счётчиков реестра
   на витрине нет — они отвечают на вопрос реестра, а не агронома. */
.ag-obj-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 0 0 16px; }
/* Плоская цветная плитка-фильтр: цвет = цвет бейджа вида в карточках,
   с фото-карточками объектов не спутать. */
.ag-obj-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-card);
  transition: all var(--agi-dur) var(--agi-ease);
}
.ag-obj-tile.is-disease { background: var(--agi-danger-bg); color: var(--agi-danger-fg); }
.ag-obj-tile.is-insect  { background: var(--agi-soon-bg); color: var(--agi-soon-fg); }
.ag-obj-tile.is-weed    { background: var(--agi-green-l2); color: var(--agi-instock-fg); }
.ag-obj-tile:hover { border-color: currentColor; box-shadow: var(--agi-shadow-sm); }
.ag-obj-tile.is-on { border-color: currentColor; box-shadow: var(--agi-shadow-md); }
.ag-obj-tile.is-on .ag-obj-tile-arr svg { transform: rotate(-180deg); }
.ag-obj-tile-i { flex: none; display: flex; }
.ag-obj-tile-t { min-width: 0; }
.ag-obj-tile-t b { display: block; font-size: var(--agi-fs-base); }
.ag-obj-tile-t i { display: block; font-style: normal; font-size: var(--agi-fs-xs); opacity: .8; }
.ag-obj-tile-arr { margin-left: auto; flex: none; display: flex; }
.ag-obj-tile-arr svg { transition: transform var(--agi-dur) var(--agi-ease); }

/* Страница одного объекта (SSR): та же типографика, что у модалки. */
.ag-objpage h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-objpage-latin { margin: -6px 0 14px; font-style: italic;
  font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-objpage .ag-obj-photo img { max-height: 22rem; }
.ag-objpage .ag-obj-desc { max-width: 46rem; }
.ag-objgrid-rel { margin-bottom: 6px; }
.ag-objgrid-rel .ag-objcard { text-decoration: none; }

/* Скелетон вместо «Загружаем…»: сетка не прыгает, глаз не дёргается. */
.ag-skel { border: 1px solid var(--agi-border); border-radius: var(--agi-radius-card);
  height: 12rem; background: var(--agi-surface-icon); animation: ag-skel 1.1s ease-in-out infinite alternate; }
@keyframes ag-skel { from { opacity: .45; } to { opacity: 1; } }

.ag-objgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 12px; margin: 4px 0 0; }
.ag-objcard {
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  font-family: inherit; background: var(--agi-surface);
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-card);
  transition: all var(--agi-dur) var(--agi-ease); display: flex; flex-direction: column;
}
.ag-objcard:hover { border-color: var(--agi-green); box-shadow: var(--agi-shadow-md); transform: translateY(-2px); }
.ag-objcard-ph { display: block; height: 6.5rem; background: var(--agi-surface-icon); overflow: hidden; }
.ag-objcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--agi-dur-slow) var(--agi-ease); }
.ag-objcard:hover .ag-objcard-ph img { transform: scale(1.07); }
.ag-objcard-noph {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 0 10px; text-align: center; font-style: italic;
  font-size: var(--agi-fs-xs); color: var(--agi-text-muted);
}
.ag-objcard-noph.is-disease { background: var(--agi-danger-bg); color: var(--agi-danger-fg); }
.ag-objcard-noph.is-insect  { background: var(--agi-soon-bg); color: var(--agi-soon-fg); }
.ag-objcard-noph.is-weed    { background: var(--agi-green-l2); color: var(--agi-instock-fg); }
.ag-objcard-b { display: block; padding: 9px 12px 11px; }
.ag-objcard-b b { display: block; color: var(--agi-ink); font-size: var(--agi-fs-base); }
.ag-objcard-b i { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); }
.ag-objcard-b span { display: block; margin-top: 5px; font-size: var(--agi-fs-xs);
  color: var(--agi-text-body); line-height: 1.45; }
.ag-obj-tail { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 14px 0 0; }

/* Карточка объекта — модальное окно: страница не прыгает, фокус на объекте.
   Затемнение кликабельно, Esc закрывает, прокрутка страницы блокируется (JS). */
#ag-obj-detail { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(0, 0, 0, .55); }
#ag-obj-detail[hidden] { display: none; }
#ag-obj-detail .ag-obj-body {
  position: relative; width: 100%; max-width: 40rem; max-height: 86vh; overflow: auto;
  padding: 16px 18px; background: var(--agi-bg); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-card); box-shadow: var(--agi-shadow-lg);
}
.ag-noscroll { overflow: hidden; }
.ag-obj-close {
  position: absolute; top: 8px; right: 10px; padding: 2px 8px; cursor: pointer;
  background: none; border: 0; font-family: inherit; font-size: var(--agi-fs-lg);
  color: var(--agi-text-muted);
}
.ag-obj-close:hover { color: var(--agi-ink); }
.ag-obj-title { margin: 0 24px 10px 0; font-size: var(--agi-fs-md); }
.ag-obj-title b { color: var(--agi-ink); }
.ag-obj-title i { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-obj-desc { font-size: var(--agi-fs-base); color: var(--agi-text-body);
  line-height: 1.55; margin: 0 0 6px; }
.ag-obj-src { font-size: var(--agi-fs-xs); color: var(--agi-text-faint); margin: 0 0 12px; }
.ag-obj-cropshead { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 0 0 8px; }

.ag-obj-k {
  padding: 1px 8px; border-radius: var(--agi-radius-pill);
  font-size: var(--agi-fs-xs); background: var(--agi-surface-icon); color: var(--agi-text-muted);
}
.ag-obj-k.is-disease { background: var(--agi-danger-bg); color: var(--agi-danger-fg); }
.ag-obj-k.is-insect  { background: var(--agi-soon-bg); color: var(--agi-soon-fg); }
.ag-obj-k.is-weed    { background: var(--agi-green-l2); color: var(--agi-instock-fg); }
.ag-obj-crops { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-obj-crop {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  background: var(--agi-bg); color: var(--agi-text-body); text-decoration: none;
  font-size: var(--agi-fs-sm); transition: all var(--agi-dur) var(--agi-ease);
}
.ag-obj-crop:hover { border-color: var(--agi-green); color: var(--agi-green-cta); }
/* Свёрнутый хвост культур широкого объекта: контейнер прозрачен для флекса,
   кнопка «Ещё N культур» выглядит чипом, но читается как действие. */
.ag-obj-crops-rest { display: contents; }
.ag-obj-crops-rest[hidden] { display: none; }
.ag-obj-crop.is-more { cursor: pointer; font-family: inherit; background: none;
  border-style: dashed; color: var(--agi-green-cta); }
/* Кнопка, которая читается как ссылка: «Искать по всем видам» — действие, а не
   переход, но по смыслу для человека это одно и то же. */
.ag-link {
  padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit;
  color: var(--agi-green-cta); text-decoration: underline; cursor: pointer;
}
.ag-link:hover { color: var(--agi-green-cta-h); }

/* Строка задачи на внутренних страницах: узкая полоса, без пояснений — там она
   не главный элемент, а способ начать заново, не выходя из работы. */
.ag-ask.is-compact { margin-bottom: 12px; }
.ag-ask.is-compact .ag-ask-row input { font-size: var(--agi-fs-base); }
.ag-parsed-applied {
  margin: 0; padding: 9px 13px; font-size: var(--agi-fs-sm);
  border: 1px solid var(--agi-green); border-radius: var(--agi-radius-sm);
  background: var(--agi-green-l); color: var(--agi-text-body);
}

/* ── сценарий «Техника»: таблица моделей ───────────────────────────────────
   Рекомендация без альтернатив — не выбор, а указание, и проверить его нечем.
   Поэтому все модели видны целиком, а рекомендованная выделена. */
/* min-width: 0 — чтобы прокручиваемая обёртка сама не раздувала grid-колонку:
   без него overflow-x не спасает, потому что min-content обёртки равен ширине
   таблицы. */
.ag-tk-wrap { overflow-x: auto; min-width: 0; margin: 14px 0 10px; }
.ag-tk { width: 100%; border-collapse: collapse; font-size: var(--agi-fs-sm); }
.ag-tk th, .ag-tk td { padding: 8px 10px; border-bottom: 1px solid var(--agi-border); text-align: left; }
.ag-tk th { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); font-weight: 600; white-space: nowrap; }
.ag-tk td b { color: var(--agi-ink); }
.ag-tk-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-tk tr.is-best td { background: var(--agi-green-l); }
/* Полоса слева — рамкой, а не тенью: литерал тени design-lint считает долгом,
   и справедливо — тени должны идти из токенов. Рамка того же вида. */
.ag-tk tr.is-best td:first-child { border-left: 3px solid var(--agi-green-cta); }
.ag-tk-spec { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin-top: 2px; }
.ag-tk-note { display: block; font-size: var(--agi-fs-xs); color: var(--agi-text-muted); font-weight: 400; }
.ag-tk-warn { font-size: var(--agi-fs-sm); color: var(--agi-soon-fg); margin: 0 0 10px; }
.ag-tk-alt { font-size: var(--agi-fs-sm); color: var(--agi-text-body); margin: 10px 0 0; }
.ag-tk tr.is-min td { background: var(--agi-surface); }
.ag-tk-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: var(--agi-radius-pill); background: var(--agi-surface-icon);
  color: var(--agi-text-muted); font-size: var(--agi-fs-xs); font-weight: 400;
}
/* Откуда пришло значение — часть ответа: человек должен видеть, что площадь
   подставлена из другого сценария, а не появилась сама. */
.ag-tk-from { font-size: var(--agi-fs-sm); color: var(--agi-text-muted); margin: 10px 0; }
.ag-tk-best td { background: var(--agi-green-l2); }

/* ── начатая работа на рабочем столе ──────────────────────────────────────
   Появляется только когда есть что продолжать: пустой блок «ваши расчёты» —
   обещание, которого никто не давал. */
.ag-resume[hidden] { display: none; }
.ag-resume {
  margin: 16px 0 4px; padding: 14px 16px;
  border: 1px solid var(--agi-green); border-radius: var(--agi-radius-md);
  background: var(--agi-green-l);
}
.ag-resume-h { font-size: var(--agi-fs-xs); color: var(--agi-text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.ag-resume-v { font-size: var(--agi-fs-lg); color: var(--agi-ink); line-height: 1.35; margin-top: 2px; }
.ag-resume-go { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ag-resume-n { font-size: var(--agi-fs-xs); color: var(--agi-text-muted); margin: 8px 0 0; }

/* ── палец вместо курсора ──────────────────────────────────────────────────
   Раздел для работы В ПОЛЕ, и телефон здесь главный экран. Проверка на 390 и
   360 px нашла цели высотой 16–30 px: хлебные крошки, «К сравнению», фильтры
   видов, кнопки сравнения. По курсору попасть в них легко, пальцем в перчатке
   на солнце — нет.

   Порог 900 px, а не 640: планшет держат в руках, и палец там тот же. Аудит на
   768 px показал, что при пороге 640 крошки и «К сравнению» так и остались 16 и
   25 px высотой. Выше 900 px раздел становится двухколоночным — там мышь, и те
   же 40 px раздули бы плотные списки, где строк по триста. */
@media (max-width: 899px) {
  .ag-crumbs a,
  .ag-crumbs span { display: inline-block; padding: 10px 2px; }
  .ag-cmp-pick,
  .ag-cmp-bar button,
  .ag-btn-sm,
  .ag-link { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  /* Плитки видов на телефоне: без подсказки и стрелки — три в ряд. */
  .ag-obj-tiles { gap: 8px; }
  .ag-obj-tile { padding: 10px 10px; gap: 7px; }
  .ag-obj-tile-t i, .ag-obj-tile-arr { display: none; }
  .ag-objgrid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 8px; }
  .ag-parsed-go,
  .ag-resume-go { gap: 10px; }
}
/* Подпись строки задачи на внутренних страницах: рядом стоит второе поле поиска,
   и без подписи на телефоне они читались как одно и то же. */
.ag-ask-label {
  font-size: var(--agi-fs-xs); font-weight: 600; color: var(--agi-text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}

/* ── расшифровка знаков препаратов ─────────────────────────────────────────
   Знак без расшифровки — ребус. Легенда стоит над списком: увидев цветную
   плашку, человек должен тут же понять, что она значит, а не искать. */
.ag-legend[hidden] { display: none; }
.ag-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  background: var(--agi-surface); font-size: var(--agi-fs-sm);
}
.ag-legend-l { flex: 1 1 100%; color: var(--agi-text-body); font-weight: 600; }
.ag-legend-i { display: inline-flex; align-items: center; gap: 7px; color: var(--agi-text-muted); }
/* Знак в легенде мельче, чем в списке: здесь он подпись к слову, а не метка
   строки, и в полный размер перетягивал бы внимание на себя. */
.ag-legend-i .ag-prep-mark { width: 22px; height: 22px; }
.ag-legend-i .ag-prep-mark svg { width: 22px; height: 22px; }
.ag-legend-note { flex: 1 1 100%; color: var(--agi-text-muted); font-size: var(--agi-fs-xs); }

/* ── расшифровка знаков ────────────────────────────────────────────────────
   Знак слева от препарата кодирует тип цветом и буквой. Без подписи это ребус:
   догадаться, что «Г» — гербицид, можно, а что пустой знак значит «тип не
   определён» — нет. Легенда свёрнута, но стоит рядом со списком: сноска, до
   которой надо доскроллить, не работает. */
.ag-legend { margin: 0 0 14px; }
.ag-legend > summary {
  cursor: pointer; font-size: var(--agi-fs-sm); color: var(--agi-green-cta);
  padding: 6px 0; list-style: none;
}
.ag-legend > summary::-webkit-details-marker { display: none; }
.ag-legend > summary:hover { color: var(--agi-green-cta-h); }
.ag-legend-body {
  display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px;
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-sm);
  background: var(--agi-surface);
}
.ag-legend-i { display: inline-flex; align-items: center; gap: 8px; font-size: var(--agi-fs-sm); }
.ag-legend-note {
  flex: 1 1 100%; margin: 4px 0 0; font-size: var(--agi-fs-xs);
  color: var(--agi-text-muted); line-height: 1.5;
}

/* ── окно заявки («Заказать обработку» / «Получить КП») ────────────────────
   Кнопки раньше вели на /contacts/ и теряли расчёт; теперь открывают форму
   поверх расчёта, чтобы человек не уходил со страницы и видел, что именно
   уйдёт менеджеру. Отступы в пикселях и цвета из существующих токенов —
   как в соседних правилах этого файла. */
.ag-req-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: flex-start; justify-content: center; padding: 16px;
  background: rgb(0 0 0 / 45%); overflow-y: auto; }
.ag-req-modal[hidden] { display: none; }
body.ag-req-open { overflow: hidden; }
.ag-req-box { position: relative; width: 100%; max-width: 30rem; margin: 32px 0 48px;
  padding: 24px; background: var(--agi-bg); color: var(--agi-text-body);
  border: 1px solid var(--agi-border); border-radius: var(--agi-radius-lg);
  box-shadow: var(--agi-shadow-lg); }
.ag-req-box h3 { margin: 0 0 8px; font-size: var(--agi-fs-xl); color: var(--agi-ink); }
.ag-req-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border: 0; border-radius: var(--agi-radius-sm); background: transparent;
  color: var(--agi-text-muted); font-size: var(--agi-fs-xl); line-height: 1; cursor: pointer; }
.ag-req-x:hover { background: var(--agi-bg2); color: var(--agi-ink); }
.ag-req-calc { margin: 12px 0 16px; padding: 12px; border-radius: var(--agi-radius-sm);
  background: var(--agi-bg2); color: var(--agi-text-muted); font-size: var(--agi-fs-sm);
  line-height: 1.5; }
.ag-req-box .ag-f { display: block; margin-bottom: 12px; }
.ag-req-box .ag-f > span { display: block; margin-bottom: 4px;
  font-size: var(--agi-fs-sm); color: var(--agi-text-muted); }
.ag-req-box .ag-f em { font-style: normal; color: var(--agi-text-faint); }
.ag-req-box input, .ag-req-box textarea { width: 100%; padding: 10px 12px;
  font: inherit; font-size: var(--agi-fs-md); color: var(--agi-ink);
  background: var(--agi-bg); border: 1px solid var(--agi-border);
  border-radius: var(--agi-radius-sm); }
.ag-req-box input:focus, .ag-req-box textarea:focus { outline: none;
  border-color: var(--agi-green); box-shadow: var(--agi-shadow-focus); }
.ag-req-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.ag-req-act .ag-f-hint.is-warn { color: var(--agi-danger-fg); }
/* Ловушка для ботов: человек её не видит и фокус на неё не ставит. */
.ag-req-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── шкала pH воды ─────────────────────────────────────────────────────────
   Цифра «7,8» ничего не говорит тому, кто не держит в голове рабочий
   диапазон. Полоса показывает, где стоит вода и далеко ли до зоны 5,5–6,5.
   Цвета — из токенов: зелёная зона рабочая, жёлтая пограничная, красные края. */
.ag-ph-scale { margin: 0 0 14px; }
.ag-ph-bar { position: relative; display: flex; height: 26px;
  border-radius: var(--agi-radius-sm); overflow: hidden; }
.ag-ph-z { position: relative; display: flex; align-items: center; justify-content: center; }
.ag-ph-z i { font-style: normal; font-size: var(--agi-fs-xs); color: var(--agi-text-on-dark);
  white-space: nowrap; padding: 0 4px; }
.ag-ph-z.is-acid { background: var(--agi-danger); }
.ag-ph-z.is-ok-l { background: var(--agi-green-l); }
.ag-ph-z.is-ok   { background: var(--agi-green); }
.ag-ph-z.is-warn { background: var(--agi-star); }
.ag-ph-z.is-alk  { background: var(--agi-danger); }
/* Метка значения: тонкая колонка с подписью, чтобы её было видно на любой зоне. */
.ag-ph-mark { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--agi-ink-deep); transform: translateX(-1px); }
.ag-ph-mark b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  padding: 1px 6px; font-size: var(--agi-fs-xs); color: var(--agi-text-on-dark);
  background: var(--agi-ink-deep); border-radius: var(--agi-radius-xs); white-space: nowrap; }
.ag-ph-scale.is-empty .ag-ph-bar { opacity: .45; }
.ag-ph-ax { display: flex; justify-content: space-between; margin-top: 4px;
  font-size: var(--agi-fs-xs); color: var(--agi-text-faint); }