/* Карточка сделки — копия карточки amoCRM.
 *
 * Значения не подобраны на глаз: они сняты с живой amo Playwright'ом
 * (`amo-эталон/замеры/`) и сверяются снимком (`tools/shots.py`). Правка
 * «чтобы покрасивее» здесь — это расхождение с эталоном, а эталон у нас
 * договорной: Алексей работает в amo и сравнивает.
 *
 * Единственный шрифт карточки — PT Sans, тот же, что в amo. Лежит рядом,
 * в `static/fonts/`: на сервере CDN недоступен.
 */

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/pt-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/pt-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/pt-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/pt-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

.amo *,
.amo *::before,
.amo *::after {
  box-sizing: border-box;
}

.amo [hidden] {
  display: none !important;
}

.amo {
  --ink: #363b44;          /* основной текст */
  --quiet: #92989b;        /* подписи полей, даты */
  --grey-ink: #6b6d72;     /* «показать полностью», контекстное меню */
  --top: #203d49;          /* шапка карточки и вкладки */
  --top-quiet: #687a82;    /* тихий текст на тёмном */
  --top-dim: #16303b;      /* непройденные сегменты полосы этапов */
  --canvas: #f5f5f5;       /* полотно ленты */
  --line: #e4e4e4;
  --link: #4c8bf7;
  --blue: #1a86d0;         /* кнопка «Сохранить» */
  --out: #0084c0;          /* исходящее сообщение */
  --alarm: #e8397f;        /* просрочка */
  --off: #b3b6bd;          /* выключенная кнопка */

  position: fixed;
  inset: 0 0 0 53px;       /* 53px — док пульта; правее начинается карточка */
  display: flex;
  align-items: stretch;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: normal;
  color: var(--ink);
  background: var(--canvas);
}

/* ---------- левая колонка ---------- */

.amo-fields {
  position: relative;   /* якорь для списка этапов и панели сохранения */
  width: 414px;
  min-width: 414px;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.amo-top {
  background: var(--top);
  padding: 17px 29px 19px;
  flex: none;
  position: relative;
}

.amo-top__line {
  display: flex;
  align-items: flex-start;
}

.amo-back {
  color: var(--top-quiet);
  text-decoration: none;
  font-size: 20px;
  line-height: 31px;
  position: absolute;
  left: 12px;
  flex: none;
}

.amo-name {
  flex: 1;
  font-size: 23px;
  font-weight: 600;
  line-height: 31px;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  resize: none;
  overflow: hidden;
}

/* Название правится на месте, как в amo, — но выглядеть оно должно
   полем, иначе в него печатают, приняв за заголовок, и «Сохранить»
   переименовывает сделку текстом заметки. При наведении показываем
   рамку, при вводе — линию. */
.amo-name:hover { box-shadow: inset 0 0 0 1px var(--top-quiet); }

.amo-name:focus {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--top-quiet);
}

.amo-dots {
  color: var(--top-quiet);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 2px;
}

.amo-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--top-quiet);
}

.amo-tag {
  font-size: 11px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--top-quiet);
  border: 1px solid var(--top-quiet);
  border-radius: 3px;
  padding: 3px 7px;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.amo-stage {
  margin-top: 16px;
  position: relative;
}

.amo-stage__pipeline {
  font-size: 14px;
  color: var(--top-quiet);
  line-height: 18px;
}

.amo-stage__now {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 19px;
  cursor: pointer;
}

.amo-stage__label {
  font-weight: 700;
  color: #fff;
}

.amo-stage__age {
  color: var(--top-quiet);
}

.amo-stage__chevron {
  margin-left: auto;
  color: var(--top-quiet);
  font-size: 12px;
}

.amo-bar {
  display: flex;
  gap: 1px;
  margin-top: 6px;
}

.amo-bar__seg {
  height: 4px;
  flex: 1;
  background: var(--top-dim);
}

/* Список этапов — раскрывается поверх полей, как в amo. Стоит он в своей
   форме (перевод этапа — отдельное действие, тащить с ним недописанные
   поля незачем), поэтому место ему считает `amo.js`: иначе список
   отсчитывался бы от страницы и разъезжался при длинном названии. */
.amo-stage__list {
  position: absolute;
  left: 21px;
  right: 21px;
  top: 96px;
  z-index: 20;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.amo-stage__list li button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 7px 16px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
}

.amo-stage__list li button:hover {
  filter: brightness(0.95);
}

.amo-stage__list .amo-stage__head {
  padding: 8px 16px;
  color: var(--quiet);
  border-bottom: 1px solid var(--line);
}

/* Причина отказа и «почему отменяем победу» — в столбик, а не в строку.
   В узкой колонке карточки три элемента в ряд обрезали собственную
   кнопку: перед закрытием сделки на 270 000 человек видел «За… сд…». */
.amo-stage__why {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
}

.amo-stage__why select,
.amo-stage__why input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  padding: 5px 6px;
}

.amo-stage__why .amo-btn {
  white-space: nowrap;
}

.amo-stage__tick {
  float: left;
  margin-left: -10px;
  font-size: 12px;
}

/* вкладки */
.amo-tabs {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  background: var(--top);
  padding: 0 29px;
  flex: none;
  height: 29px;
}

.amo-tabs a {
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  color: var(--top-quiet);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.amo-tabs a.on {
  color: #fff;
  border-bottom-color: #fff;
}

/* поля */
/* Форма занимает колонку целиком и сама становится столбцом.

   Без этого правила `.amo-body` прокруткой не был: колонка — флекс, но
   её флекс-элемент это `<form>`, а поля лежат внутри неё. Форма при
   `min-height: auto` не ужимается до колонки, `.amo-body` растёт вслед
   за содержимым, прокручивать ему нечего — и всё, что не влезло,
   `.amo-fields` срезает `overflow: hidden`. На ноутбуке 1280×720 у
   карточки сделки так пропадало 293px: телефон, почта и город клиники,
   которые сюда и перенесены, чтобы не ходить за ними перед звонком.
   Нашёл прогон по живому продукту, замером, а не глазами. */
.amo-fields > form:has(.amo-body) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.amo-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 72px;
  min-height: 0;
}

.amo-group {
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line);
}

.amo-row {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 30px;
}

.amo-row__label {
  width: 136px;
  min-width: 136px;
  font-size: 15px;
  color: var(--quiet);
  padding-right: 8px;
}

.amo-row__value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
}

.amo-row__value input,
.amo-row__value select,
.amo-row__value textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 4px 0;
  border-radius: 0;
}

.amo-row__value input::placeholder,
.amo-row__value textarea::placeholder {
  color: var(--quiet);
}

.amo-row__value input:hover,
.amo-row__value select:hover {
  border-bottom-color: var(--line);
}

.amo-row__value input:focus,
.amo-row__value select:focus,
.amo-row__value textarea:focus {
  outline: none;
  border-bottom-color: #9fb0b7;
}

.amo-row__value select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2392989b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 14px;
}

.amo-row__static {
  padding: 4px 0;
}

/* Поле со «спутниками»: единица измерения и кнопки набора номера. */
/* Многострочное поле карточки: «Последний разговор». Тот же вид, что у
   строки, но текст виден целиком — в узком `input` он обрывался на
   полуслове и читался как поломка. */
.amo-row__note {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  resize: vertical;
  padding: 0;
  line-height: 18px;
}

.amo-row__input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amo-row__unit {
  color: var(--ink);
  flex: none;
  margin-left: -6px;   /* вплотную к числу, как «150 000 ₽» в amo */
}

/* Поле с единицей измерения не растягивается на всю колонку: иначе «₽»
   уезжает к правому краю и перестаёт читаться как часть суммы. */
.amo-row__input:has(.amo-row__unit) input {
  flex: 0 1 auto;
  width: 7em;
  field-sizing: content;   /* где поддерживается — растёт по числу */
  min-width: 4em;
  max-width: 9em;
}

.amo-row__act {
  flex: none;
  color: var(--grey-ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 24px;
  width: 24px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
}

.amo-row__act:hover {
  color: #fff;
  background: var(--blue);
}

.amo-cal {
  flex: none;      /* в строке поля даты кнопка не должна тянуться */
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}

.amo-row__static a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(54, 59, 68, 0.25);
}

/* карточка связанной записи: контакт, компания */
.amo-state .amo-row__value {
  font-weight: 700;
}

/* Сделка без следующего шага — это диагноз, а не пустое поле. */
.amo-state_none {
  color: var(--alarm) !important;
  font-weight: 400 !important;
}

.amo-linked {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.amo-linked__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 29px 12px;
}

.amo-linked__pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e6e6e6;
  flex: none;
}

.amo-linked__kind {
  font-size: 10px;
  font-weight: 700;
  color: var(--quiet);
  text-transform: uppercase;
  line-height: 13px;
}

.amo-linked__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.amo-linked__name a {
  color: var(--ink);
  text-decoration: none;
}

.amo-linked__name a:hover {
  text-decoration: underline;
}

.amo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 6px;
  margin-top: 2px;
}

.amo-more {
  display: inline-block;
  font-size: 12px;
  color: var(--quiet);
  border-bottom: 1px dashed var(--quiet);
  cursor: pointer;
  margin: 8px 0 0 29px;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 0;
  font-family: inherit;
}

/* панель сохранения — всплывает, как только что-то тронули */
.amo-save {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 414px;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 29px;
  display: none;
  align-items: center;
  gap: 20px;
  z-index: 15;
}

.amo-fields.dirty .amo-save {
  display: flex;
}

.amo-btn {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
}

.amo-btn[disabled] {
  background: var(--off);
  cursor: default;
}

.amo-btn_quiet {
  background: none;
  color: var(--grey-ink);
  font-weight: 400;
  padding: 10px 0;
}

/* статистика */
.amo-stat__big {
  font-size: 48px;
  line-height: 56px;
  color: var(--link);
  padding: 0 29px;
}

.amo-stat__cap {
  color: var(--link);
  padding: 0 29px 12px;
}

.amo-stat__row {
  display: flex;
  padding: 4px 29px;
}

.amo-stat__row span:last-child {
  margin-left: auto;
}

/* ---------- лента ---------- */

.amo-feed {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  overflow: hidden;
}

.amo-feed__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 0;
  /* Пол ленты. Правая колонка прибита к окну (`.amo` — `position: fixed`),
     и лишнее `.amo-feed` просто срезает: `overflow: hidden` не даёт ни
     полосы, ни колеса. Пока пола не было, длинный шаг скрипта ужимал
     ленту до десяти пикселей и уносил за край всё, что ниже. */
  min-height: 120px;
}

.amo-month {
  text-align: center;
  font-size: 13px;
  color: var(--quiet);
  margin: 12px 0;
}

.amo-note {
  position: relative;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 11px 16px 12px 57px;
  min-height: 60px;
}

.amo-note_pinned {
  border: 1px solid #f5b83d;
  margin: 0 -6px 10px;
}

.amo-note__icon {
  position: absolute;
  left: 11px;
  top: 12px;
  color: #9aa1a8;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--grey-ink);
}

.amo-note__head {
  font-size: 13px;
  color: var(--quiet);
  line-height: 20px;
}

.amo-note__author {
  margin-left: 8px;
}

/* Правленая запись помечает себя: карточка — доказательство, и молча
   переписать в ней слова клиента нельзя. */
.amo-note__edited {
  font-style: italic;
}

.amo-note__text {
  font-size: 15px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}

.amo-note__file {
  color: var(--link);
  text-decoration: none;
}

/* Плеер записи разговора. Ширину задаём сами: родная ширина у него
   300px, а колонка ленты бывает уже — в узкой карточке он вылезал бы за
   край вместе с ползунком перемотки. Высота родная: своя обрезает кнопки
   у части браузеров. */
.amo-note__play {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
}

.amo-note__menu {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: rgba(235, 235, 235, 0.9);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}

.amo-note:hover .amo-note__menu,
.amo-note:focus-within .amo-note__menu {
  display: flex;
}

.amo-note__menu button {
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--grey-ink);
  cursor: pointer;
  padding: 0;
}

.amo-note__menu button:hover {
  color: var(--ink);
}

.amo-note__menu form {
  display: inline;
}

/* Длинная заметка складывается, как в amo: разговор на двадцать строк
   иначе выталкивает из ленты всё остальное. */
.amo-note__text_clamped {
  max-height: 80px;
  overflow: hidden;
}

.amo-note__more {
  font-size: 13px;
  color: var(--grey-ink);
  background: none;
  border: 0;
  padding: 4px 0 0;
  cursor: pointer;
  font-family: inherit;
}

.amo-note__edit textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  margin-top: 8px;
  resize: vertical;
}

.amo-note__edit-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* задача в ленте */
.amo-task {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 11px 16px 12px 57px;
  position: relative;
}

.amo-task_expired {
  border-color: var(--alarm);
  background: #fff;
}

.amo-task__icon {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #b9bec4;
  color: #6b6d72;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amo-task_expired .amo-task__icon {
  border-color: var(--alarm);
  color: var(--alarm);
}

.amo-task_done .amo-task__icon {
  border-color: #58b98f;
  color: #58b98f;
}

.amo-task__head {
  font-size: 13px;
  color: var(--grey-ink);
  line-height: 20px;
}

.amo-task__expired {
  color: var(--alarm);
  font-weight: 700;
}

.amo-task__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
  margin-bottom: 8px;
}

.amo-task_done .amo-task__name {
  text-decoration: line-through;
  font-weight: 400;
}

.amo-task__do {
  display: flex;
  gap: 10px;
}

.amo-task__do input[type='text'] {
  flex: 1;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
}

.amo-task__do button {
  width: 110px;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.amo-task__do button[disabled] {
  background: var(--off);
  cursor: default;
}

.amo-task__tick {
  width: 38px !important;
  background: #fff !important;
  color: #58b98f !important;
  border: 1px solid var(--line) !important;
  font-size: 16px !important;
}

.amo-task {
  position: relative;
}

.amo-task:hover .amo-note__menu,
.amo-task:focus-within .amo-note__menu {
  display: flex;
}

/* У задачи меню жмётся к верхнему углу: на всю высоту, как у заметки, оно
   накрывало бы кнопку «Выполнить» — то есть пряталo бы главное действие
   ради второстепенного. */
.amo-task .amo-note__menu {
  top: 0;
  bottom: auto;
  gap: 16px;
  padding: 8px 14px;
  border-radius: 0 4px 0 4px;
}

.amo-task__move {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.amo-task__move input {
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
}

/* панель записи */
.amo-compose {
  flex: none;
  background: #fff;
  border-radius: 4px;
  margin: 0 20px 20px;
  padding: 11px 16px;
  border: 1px solid transparent;
}

.amo-compose:focus-within {
  border-color: #cfd8dc;
}

/* Цвет режима сильнее цвета фокуса: панель в момент набора всегда в
   фокусе, и без этого зелёная рамка задачи не показывалась никогда. */
.amo-compose.amo-compose_task,
.amo-compose.amo-compose_task:focus-within {
  border-color: #7dd0a5;
}

.amo-compose.amo-compose_call,
.amo-compose.amo-compose_call:focus-within {
  border-color: #f0b429;
}

.amo-compose__line {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 15px;
  position: relative;
}

.amo-compose__kind {
  color: var(--link);
  border-bottom: 1px dashed var(--link);
  cursor: pointer;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
}

.amo-compose__colon {
  color: #b5b5b5;
}

.amo-compose__hint {
  color: var(--quiet);
  margin-left: 6px;
}

/* Свёрнутая панель — одна строка «Примечание: введите текст», как в amo.
   Разворачивается кликом: пока не пишешь, лента длиннее на четыре
   строки, а это четыре записи истории. */
.amo-compose_folded textarea,
.amo-compose_folded .amo-compose__foot,
.amo-compose_folded .amo-compose__call,
.amo-compose_folded .amo-compose__task {
  display: none;
}

.amo-compose_folded {
  cursor: text;
}

.amo-compose textarea {
  width: 100%;
  border: 0;
  resize: none;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  padding: 8px 0 0;
  min-height: 44px;
}

.amo-compose textarea:focus {
  outline: none;
}

.amo-compose__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.amo-compose__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--grey-ink);
}

.amo-compose__clip {
  cursor: pointer;
  font-size: 18px;
}

.amo-compose__file {
  font-size: 13px;
  color: var(--quiet);
}

/* строка задачи в панели: «Задача на [Сегодня] для [Алексей]: Позвонить» */
.amo-compose__task {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 15px;
}

.amo-compose__task input[type='text'],
.amo-compose__task select {
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
  padding: 3px 6px;
  background: #fff;
}

.amo-compose__task select {
  border-color: transparent;
  color: var(--link);
  cursor: pointer;
}

.amo-compose__call {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--quiet);
}

.amo-compose__call label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amo-compose__pick {
  color: var(--link);
  font-size: 10px;
  margin: 0 2px 0 1px;
}

.amo-compose__now {
  color: var(--quiet);
  font-size: 13px;
}

.amo-compose__call select,
.amo-compose__call input {
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 3px 6px;
  background: #fff;
}

/* переключатель типа записи: без единой строчки JS, как причина отказа */
.amo-compose input[name='mode'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.amo-compose__types {
  position: absolute;
  left: 0;
  bottom: 100%;          /* раскрывается вверх: панель прижата к низу окна */
  z-index: 30;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  padding: 6px 0;
  margin-bottom: 6px;
  min-width: 160px;
}

.amo-compose__types label {
  display: block;
  padding: 6px 20px;
  cursor: pointer;
  font-size: 15px;
}

.amo-compose__types label:hover {
  background: var(--canvas);
}

.amo-error {
  background: #fdecef;
  border: 1px solid #f2b8c6;
  color: #a01b3c;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 0 20px 10px;
  font-size: 14px;
}

.amo-error_offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.amo-error_offer .amo-btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* «Это уже наш клиент» — предупреждение, а не поломка. Красным его
   красить нельзя: красная полоса на карточке читается как «что-то
   сломалось» и её проскакивают, а сказать она должна ровно обратное —
   остановись и прочитай карточку. */
.amo-error_ours {
  background: #fff6e0;
  border-color: #f0d089;
  color: #6b4a05;
  font-weight: 600;
}

.amo-capped {
  padding: 8px 20px 0;
  text-align: center;
}

.amo-empty {
  color: var(--quiet);
  text-align: center;
  padding: 40px 0;
}

.amo-note__hint {
  color: var(--quiet);
  font-size: 13px;
}

/* меню карточки */
.amo-menu {
  position: absolute;
  right: 16px;
  top: 44px;
  z-index: 30;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  padding: 6px 0;
  min-width: 200px;
}

.amo-menu button,
.amo-menu a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 20px;
  cursor: pointer;
  text-decoration: none;
}

.amo-menu button:hover,
.amo-menu a:hover {
  background: var(--canvas);
}

/* --- печать -------------------------------------------------------------
   «Печать» в меню карточки печатает карточку, а не снимок экрана: без
   этого на бумагу уходил док, панель ввода с кнопками и обрезанная по
   высоте окна лента — то есть половина истории просто не печаталась. */
@media print {
  /* На бумагу уходит карточка, а не снимок экрана: галочки фильтра ленты
     и строка действий на печати ни о чём не говорят, а место занимают.
     Меню приложения прячет `amo-app.css` — там же, где оно и живёт. */
  .amo-log__filter,
  .amo-acts,
  .amo-next {
    display: none !important;
  }

  .amo {
    position: static;
    inset: auto;
    left: 0;
    display: block;
  }

  .amo-fields,
  .amo-feed {
    width: auto;
    min-width: 0;
    overflow: visible;
  }

  .amo-body,
  .amo-feed__scroll {
    overflow: visible;
    height: auto;
  }

  .amo-top,
  .amo-tabs {
    background: #fff !important;
    color: #000;
  }

  .amo-name,
  .amo-stage__label {
    color: #000 !important;
  }

  .amo-compose,
  .amo-save,
  .amo-note__menu,
  .amo-task__do,
  .amo-menu,
  .amo-more,
  .amo-row__act {
    display: none !important;
  }

  .amo-note,
  .amo-task {
    break-inside: avoid;
    border: 1px solid #ddd;
  }

  /* Поля, спрятанные под «еще», на бумаге нужны не меньше: печатают
     карточку, чтобы взять её с собой, а не чтобы посмотреть половину. */
  .amo [data-more][hidden] {
    display: block !important;
  }
}

/* Дата с временем одной строкой — поле «Перезвонить» карточки клиники. */
.amo-row__time {
  width: 54px;
  flex: none;
  margin-left: 4px;
}

/* «Следующая клиника» — кнопка очереди над лентой. */
/* Подсказка, включающая галочку фильтра: выглядит ссылкой, работает как
   `<label for>` — без единой строчки JS, как и сам фильтр. */
.amo-note__link {
  color: #0057a9;
  text-decoration: underline;
  cursor: pointer;
}

.amo-next {
  padding: 10px 20px 0;
  display: flex;
  justify-content: flex-end;
}

/* Очередь пройдена. Тихо, но словами: исчезнувшая кнопка читается как
   поломка, а не как «на сегодня всё». */
.amo-next_done {
  font-size: 13px;
  color: #6b7280;
  gap: 6px;
}

/* Пункты меню карточки, которые ведут на другой экран. */
.amo-menu a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.amo-menu a:hover { background: var(--canvas); }

/* Тихая подсказка в строке-фразе панели записи. */
.amo-compose__note {
  font-size: 12px;
  color: var(--quiet);
  margin-left: 6px;
}

/* ---------- фильтр ленты ----------
 *
 * Чекбоксы стоят рядом с лентой и прячут записи правилом `:has()`, без
 * перезагрузки: над лентой панель записи, и клик по фильтру не имеет
 * права стереть надиктованное. Браузер без `:has()` покажет всё — это
 * шумно, но ничего не ломает.
 */

.amo-log__filter {
  display: flex;
  gap: 14px;
  padding: 10px 20px 0;
  font-size: 13px;
  color: var(--quiet);
  flex: none;
}
.amo-log__filter label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.amo-log__filter input { margin: 0; }

.amo-feed:has(#log-note:not(:checked)) .amo-log_note { display: none; }
.amo-feed:has(#log-task:not(:checked)) .amo-log_task { display: none; }
.amo-feed:has(#log-file:not(:checked)) .amo-log_file { display: none; }
.amo-feed:has(#log-change:not(:checked)) .amo-log_change { display: none; }

/* Сняты все четыре галочки — лента пуста не потому, что записей нет. */
.amo-log__none { display: none; }
.amo-feed:has(#log-note:not(:checked)):has(#log-task:not(:checked)):has(#log-file:not(:checked)):has(#log-change:not(:checked)) .amo-log__none {
  display: block;
}

/* Подпись у ряда галочек над лентой: без неё они висят в воздухе. */
.amo-log__word { color: var(--quiet); }

/* Действия карточки строкой под шапкой: «+ Контакт», «+ Сделка». */
.amo-acts {
  display: flex;
  gap: 14px;
  padding: 0 29px 10px;
  background: var(--top);
}
.amo-acts a {
  font-size: 13px;
  color: var(--top-quiet);
  text-decoration: none;
}
.amo-acts a:hover { color: #fff; }

/* Спокойная строка «вот что мы сделали сами» — не отказ, а объяснение. */
.amo-said {
  margin: 12px 20px 0;
  padding: 9px 12px;
  border-radius: 4px;
  background: #eef4ff;
  border: 1px solid #c8dbff;
  color: #1e4a8f;
  font-size: 14px;
}

/* Просроченное обещание в шапке карточки — не план. */
.amo-state_late { color: var(--alarm); }

/* --- скрипт звонаря ------------------------------------------------------
   Шаг = реплика + кнопки ответов клиента. Показ одного шага держит CSS:
   радио спрятано, узел рядом с отмеченным радио виден. Кнопка-переход —
   label к радио следующего шага, кнопке-финалу помогает script.js.
   Браузер без соседнего селектора покажет все шаги подряд — некрасиво,
   но читается как текст скрипта: тот же компромисс, что у панели. */
.amo-script {
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 4px;
  margin: 10px 20px 0;
}
.amo-script > summary {
  list-style: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.amo-script > summary::-webkit-details-marker { display: none; }
.amo-script > summary::before { content: '▸ '; color: var(--link); }
.amo-script[open] > summary::before { content: '▾ '; }
.amo-script__crumbs {
  font-weight: 400;
  font-size: 12px;
  color: #92989b;
}
.amo-script__nodes { padding: 0 16px 12px; }
/* Шаг скрипта прокручивается внутри панели, а не выталкивает соседей.

   Жалоба с боевого звучала как «заблокировалось окно и прокрутка»: на
   ноутбуке 1280×720 шаг «Мини-презентация» — семь строк реплики плюс
   четыре абзаца заметок — вырастал до 900px в колонке высотой 720. Всё,
   что не влезло, срезалось `overflow: hidden` у `.amo-feed`, и за краем
   оставались сами кнопки «Что ответила клиника»: разговор упирался в
   стену ровно там, где надо выбрать ответ. Прокрутить было нечего —
   ни страница, ни колонка не прокручиваются по построению.

   Панель остаётся прибитой к верху (суфлёр не имеет права уезжать
   посреди разговора), а прокручивается её нутро. Только на карточке:
   в тренажёре колонки нет, там страница прокручивается сама.

   Прокручивается сама панель, а не её нутро: содержимое `<details>`
   Chrome кладёт в свой слот (`::details-content`), и флекс-раскладка,
   выставленная на самом `details`, до `.amo-script__nodes` не достаёт —
   панель послушно ужималась до 348px, а шаг внутри оставался 864px и
   торчал наружу ровно как прежде. Шапка панели при этом липнет к верху:
   название скрипта и хлебные крошки отвечают на «где я сейчас», и
   уезжать вместе с текстом они не должны. */
.amo-feed > .amo-script { min-height: 0; }
.amo-feed > .amo-script[open] {
  /* Пока скрипт открыт, свободное место в колонке принадлежит ЕМУ, а не
     ленте. Жалоба второго дня с боевого: «скрипт нормально не вижу,
     чтобы по нему идти». На ноутбуке 1280×720 реплика показывалась двумя
     строками и обрывалась на полуслове, а под ней стояла пустая лента во
     весь экран — у новой клиники в ней нет ни одной записи. Читают вслух
     реплику, а не пустоту: место распределяется по тому, на что смотрят. */
  flex: 1 1 auto;
  overflow-y: auto;
  /* Докрутив шаг до конца, колесом не уносим соседей под панелью. */
  overscroll-behavior: contain;
}
/* Лента на время разговора ужимается до полоски — она всё равно
   прокручивается, и во время звонка в неё не смотрят. Совсем убирать
   нельзя: по ней видно, о чём говорили в прошлый раз. */
.amo-feed:has(> .amo-script[open]) .amo-feed__scroll {
  flex: 0 1 auto;
  min-height: 64px;
  max-height: 30vh;
}
/* На ноутбуке во время разговора колонка принадлежит скрипту целиком.

   Считать пришлось по месту, а не на глаз. Рабочая высота у Георгия —
   около 600 точек; из них полоса «идёт сделка» 37, фильтры ленты 27,
   панель записи 164. Что ни отдай скрипту из остатка, реплика упирается
   в три строки и обрывается на полуслове, а лента, ужатая до строки,
   показывает половину записи и сама выглядит поломкой.

   Поэтому на низком экране лента и её фильтры на время разговора
   убираются, и панель получает всю колонку: реплика показывается
   девятью строками, ответов видно пять. Лента возвращается одним
   щелчком по треугольнику — тем же, которым скрипт открыли; перед
   звонком карточку и так читают с закрытым скриптом.

   Порог по высоте, а не по ширине: на большом экране места хватает
   обоим, и прятать историю разговоров там не за что. */
@media (max-height: 780px) {
  .amo-feed:has(> .amo-script[open]) .amo-feed__scroll,
  .amo-feed:has(> .amo-script[open]) .amo-log__filter {
    display: none;
  }
  .amo-feed:has(> .amo-script[open]) .amo-log__folded {
    display: block;
  }
}
/* Складывание поля «о чём говорили» живёт в `amo.js`, а не здесь.

   Правило `:not(:focus-within) textarea { height: 34px }` стояло тут и
   съедало ПЕРВЫЙ КЛИК по «Звонок ▾»: `mousedown` давал фокус, поле
   разжималось, панель прибита к низу колонки — кнопка уезжала вверх на
   четырнадцать точек, и `mouseup` попадал уже в форму. Браузер такой
   клик кнопке не отдаёт вовсе. Выпадашка открывалась со второго раза, а
   это единственный вход к «Примечанию» и «Задаче» с карточки клиники.

   Разметка, которая двигается от наведения фокуса, всегда съедает клик:
   это не про эту кнопку, а про приём в целом. */
.amo-feed > .amo-script[open] > summary {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}
/* Полоса прокрутки у панели показывается всегда. На макбуке полосы
   всплывающие: их не видно, пока не крутанёшь, — и аккуратно
   заканчивающаяся панель читается как «кнопок ответа нет», то есть та
   же жалоба, только тише. Здесь полоса — единственный знак, что шаг
   длиннее экрана. */
/* Кнопки ответов прибиты к низу панели, прокручивается реплика над ними.

   Одной прокрутки было мало: на маке полосы всплывающие — их не видно,
   пока не крутанёшь, — и аккуратно кончающаяся панель читается как
   «кнопок ответа нет». Это та же жалоба, только тише. Ответ на вопрос
   «что сказала клиника» — то, ради чего шаг открыт, и он всегда на
   экране; сама подсказка при этом остаётся суфлёром и листается.

   Свой потолок у блока: у длинных шагов ответов бывает шестнадцать, и
   без него они заняли бы всю панель, спрятав реплику, которую читают
   вслух. Прибивается только на карточке — в тренажёре прокручивается
   страница целиком, и прибивать не к чему. */
.amo-feed > .amo-script[open] .amo-script__answer {
  position: sticky;
  bottom: 0;
  background: #fff;
  /* Потолок в долях окна, а не в процентах: процент считается от шага,
     высота у него своя, и `55%` не связывали ничего — блок из
     шестнадцати ответов занимал панель целиком, а реплика, которую
     читают вслух, уходила с экрана вовсе.

     Двадцати процентов было мало: на экране Георгия (1280×720, минус
     шапка браузера и панель задач — около 600 точек рабочей высоты) это
     124 точки, то есть два с половиной ответа из шестнадцати. Сорок
     оказалось много: ответы съедали панель целиком, и реплики оставалось
     67 точек — две с половиной строки, оборванные на полуслове. Это и
     была жалоба «скрипт нормально не вижу, чтобы по нему идти».

     Поэтому не доля, а вычет: панели достаётся окно минус шапка, минус
     фильтры, минус лента и панель записи. Снизу — три ответа, иначе
     нужный придётся искать прокруткой посреди разговора; сверху — потолок,
     чтобы на большом экране ответы не расползались на весь столбец. */
  max-height: clamp(132px, calc(100vh - 430px), 300px);
  overflow-y: auto;
  padding-top: 4px;
  box-shadow: 0 -8px 12px -8px rgba(32, 61, 73, 0.35);
}
.amo-script__nodes input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.amo-script__node { display: none; }
.amo-script__nodes input[type="radio"]:checked + .amo-script__node {
  display: block;
}
/* Линейка этапов: «где я и сколько до цели». Пройденное тускнеет,
   текущий этап — чипом. У прощальных шагов вместо линейки плашка. */
.amo-script__rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 8px;
  font-size: 11px;
  color: #a3a9b3;
}
.amo-script__st + .amo-script__st::before {
  content: '›';
  margin: 0 5px;
  color: #c9cdd4;
}
.amo-script__st_done { color: #6b6d72; }
.amo-script__st_here {
  font-weight: 700;
  color: #2f5fad;
  background: #eef4fe;
  border-radius: 10px;
  padding: 2px 8px;
}
.amo-script__over {
  font-size: 11px;
  font-weight: 700;
  color: #b03a3a;
  background: #fdf2f2;
  border-radius: 10px;
  padding: 2px 8px;
}
.amo-script__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
/* Шаг-развилка без реплики: вопрос задаёт сам заголовок — крупнее. */
.amo-script__title_ask { font-size: 17px; }
/* Реплика — суфлёр: крупно, с воздухом, в своей плоскости. Читается
   вслух, поэтому крупнее любого другого текста панели. */
.amo-script__say {
  background: #f6f9fd;
  border-left: 3px solid #2f5fad;
  border-radius: 0 4px 4px 0;
  padding: 10px 14px 11px;
  margin-bottom: 10px;
}
.amo-script__saylabel {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #2f5fad;
  margin-bottom: 4px;
}
.amo-script__reply {
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
/* Заметка себе — глазами, не вслух: тихий серый рядом с громкой репликой. */
.amo-script__hint {
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.5;
  color: #6b6d72;
  margin-bottom: 10px;
}
.amo-script__ask {
  font-size: 12px;
  font-weight: 700;
  color: #6b6d72;
  margin: 2px 0 6px;
}
.amo-script__btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px;
}
.amo-script__go,
.amo-script__end {
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  padding: 9px 12px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: border-color 140ms ease-out, transform 140ms ease-out;
}
.amo-script__go:active,
.amo-script__end:active { transform: scale(0.98); }
/* Стрелка только у переходов: финал узнаётся по её отсутствию и цвету.
   Галочки у финала нет намеренно: «✓» новичок прочёл как «уже выбрано». */
.amo-script__go::after {
  content: '›';
  float: right;
  margin-left: 8px;
  opacity: .55;
}
/* Тона кнопок — смысл ответа клиента с одного взгляда:
   go — обычный следующий шаг, warn — возражение или разговор вбок,
   bad — разговор кончается, good — итог, ради которого звонили,
   mute — звонок кончился, но путь не закрыт. Чернила на каждой заливке
   не ниже 4.5:1 — список читают весь рабочий день. */
.amo-script__b_go   { background: #f2f7ff; border-color: #bcd2f7; color: #2f5fad; }
.amo-script__b_go:hover   { border-color: #2f5fad; }
.amo-script__b_warn { background: #fff7e8; border-color: #ecd9ab; color: #7d5a14; }
.amo-script__b_warn:hover { border-color: #b8912f; }
.amo-script__b_bad  { background: #fdf2f2; border-color: #eccaca; color: #a63838; }
.amo-script__b_bad:hover  { border-color: #a63838; }
.amo-script__b_good { background: #f1faf1; border-color: #b7dcb9; color: #2e7d32; }
.amo-script__b_good:hover { border-color: #2e7d32; }
.amo-script__b_mute { background: #f5f6f8; border-color: #d9dde3; color: #5f6470; }
.amo-script__b_mute:hover { border-color: #9aa0ab; }
.amo-script__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.amo-script__step {
  font: inherit;
  font-size: 12px;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.amo-script__miss { margin-left: auto; font-size: 12px; }
.amo-script__miss > summary {
  list-style: none;
  color: #92989b;
  border-bottom: 1px dashed #92989b;
  cursor: pointer;
  display: inline;
}
.amo-script__miss > summary::-webkit-details-marker { display: none; }
.amo-script__miss[open] { margin-top: 6px; }
.amo-script__miss textarea {
  display: block;
  width: 260px;
  margin: 6px 0;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #e7eaf0;
  border-radius: 4px;
}
.amo-script__miss button {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #e7eaf0;
  border-radius: 4px;
  background: #fff;
  color: var(--link);
  cursor: pointer;
}
.amo-script__saved { color: #2e7d32; margin-left: 8px; }

/* Запасной ответ шага — свёрнут: он нужен, когда первый заход не зашёл,
   а развёрнутым удваивал бы текст и топил кнопки ответов. */
.amo-script__more { margin: -4px 0 10px; }
.amo-script__more > summary {
  list-style: none;
  display: inline;
  font-size: 12px;
  color: #92989b;
  border-bottom: 1px dashed #92989b;
  cursor: pointer;
}
.amo-script__more > summary::-webkit-details-marker { display: none; }
.amo-script__more[open] > summary { color: var(--ink); }
/* Запасной ответ — тоже реплика вслух: та же плоскость суфлёра, но с
   жёлтым корешком — видно, что это второй заход, а не основной. */
.amo-script__more > .amo-script__say {
  margin-top: 8px;
  border-left-color: #b8912f;
  background: #fdfaf2;
}

/* Плашка финала: в тренажёре — учебная, в бою — отклик «итог подставлен».
   Красится тоном нажатой кнопки: зелёное «молодец» на отказе спорило с
   текстом. Без тона — нейтральная. */
.amo-script__finish {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #f5f6f8;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.amo-script__finish b { display: block; color: #3b3f46; }
.amo-script__finish_good { border-color: #b7dcb9; background: #f1faf1; }
.amo-script__finish_good b { color: #2e7d32; }
.amo-script__finish_bad { border-color: #eccaca; background: #fdf2f2; }
.amo-script__finish_bad b { color: #a63838; }
.amo-script__finish_warn { border-color: #ecd9ab; background: #fff7e8; }
.amo-script__finish_warn b { color: #7d5a14; }
.amo-script__finish_mute { border-color: #d9dde3; background: #f5f6f8; }
.amo-script__finish_mute b { color: #5f6470; }
/* Заметка внутри запасного ответа — тише и мельче основной. */
.amo-script__hint_more { font-size: 12px; margin: 6px 0 4px; }

/* --- Тренажёр звонаря -------------------------------------------------
   Живёт в оболочке приложения (.amo-app), а не карточки (.amo), поэтому
   токены карточки объявляются здесь заново: панель скрипта и её кнопки
   написаны на var(--ink)/var(--link), и без этого блока они красились
   наследованием — вслепую. */
.amo-train {
  --ink: #363b44;
  --quiet: #92989b;
  --grey-ink: #6b6d72;
  --line: #e4e4e4;
  --link: #4c8bf7;
  --blue: #1a86d0;
  --alarm: #e8397f;
  /* Боковой отступ даёт .amo-work_pad — общий на настройки,
     аналитику и тренажёр: два источника одного отступа разъезжаются
     на первой же правке. */
  margin: 0;
  max-width: 1160px;
}
.amo-train .amo-script { margin: 0; }

/* Верхний ряд: возражение дня + слабые шаги. Две карточки с разным
   весом — точка притяжения экрана, а не стена вводного текста. */
.amo-train__top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 12px;
  /* Карточки по содержимому, не в растяжку: пустая колонка «слабых
     шагов» в рост соседа была мёртвой белой зоной. */
  align-items: start;
  margin-bottom: 14px;
}
@media (max-width: 1180px) {
  .amo-train__top { grid-template-columns: minmax(0, 1fr); }
}
.amo-train__daily {
  background: #eef5ff;
  border: 1px solid #cfe0f7;
  border-radius: 4px;
  padding: 16px 18px 14px;
}
.amo-train__title { margin: 8px 0 10px; font-size: 20px; line-height: 1.25; }
.amo-train__daily .amo-script__reply { margin-bottom: 12px; }
.amo-train__go { display: inline-block; }
.amo-train__side {
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 4px;
  padding: 14px 16px;
}
.amo-train__head { margin: 0 0 8px; font-size: 15px; }
.amo-train__note { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--grey-ink); }
.amo-train__today {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #eef0f3;
  font-size: 13px;
  color: var(--grey-ink);
}
.amo-train__today b { color: var(--ink); }
.amo-train__note_run { margin: 0 0 6px; }
/* Цифра дня — кейс в пару к возражению дня, внутри той же голубой
   карточки: тихая строка, не вторая плашка. */
.amo-train__case {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.amo-train__casefit { display: block; color: var(--grey-ink); }
/* Полка плейбука: корень возражения над своими карточками. */
.amo-train__shelf {
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--grey-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* «Как тренироваться» — три шага одной строкой над прогоном. */
.amo-train__how {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--grey-ink);
}
.amo-train__how1 b {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: #eef4fe;
  color: #2f5fad;
  font-size: 12px;
  margin-right: 4px;
}
.amo-train__fall {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #eef0f3;
  font-size: 14px;
}
.amo-train__fallname { min-width: 0; }
.amo-train__count { margin-left: auto; color: #b4285c; font-size: 13px; white-space: nowrap; }
/* «Повторить» и «Отработать» — label к радио шага в прогоне: без JS
   просто переключают показанный узел, с JS ещё сбрасывают путь. */
.amo-train__redo {
  font-size: 13px;
  color: var(--link);
  border-bottom: 1px dashed var(--link);
  cursor: pointer;
  white-space: nowrap;
}
.amo-train__redo:hover { color: #2f5fad; border-bottom-style: solid; }

@media (prefers-reduced-motion: no-preference) {
  .amo-train .amo-script__go,
  .amo-train .amo-script__end { transition: transform .12s ease, border-color .12s ease; }
  .amo-train .amo-script__go:hover,
  .amo-train .amo-script__end:hover { transform: translateY(-1px); }
  .amo-train .amo-script__go:active,
  .amo-train .amo-script__end:active { transform: scale(.98); }
  .amo-train .amo-script__nodes input:checked + .amo-script__node { animation: amo-train-in .16s ease; }
  @keyframes amo-train-in { from { opacity: .4; } to { opacity: 1; } }
}
/* Плейбук — сетка карточек с превью ответа: закрытая полоса без единого
   слова ответа не зовёт кликнуть. Превью прячется у раскрытой. */
.amo-train__book {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 1180px) {
  .amo-train__book { grid-template-columns: minmax(0, 1fr); }
}
.amo-play {
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 4px;
  padding: 0 16px 4px;
}
.amo-play:hover { border-color: var(--link); }
.amo-play > summary {
  list-style: none;
  padding: 12px 0 10px;
  cursor: pointer;
}
.amo-play > summary::-webkit-details-marker { display: none; }
.amo-play__name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.amo-play__name::before { content: '▸ '; color: var(--link); }
.amo-play[open] .amo-play__name::before { content: '▾ '; }
.amo-play__peek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grey-ink);
}
.amo-play[open] .amo-play__peek { display: none; }
.amo-play .amo-train__redo { display: inline-block; margin: 2px 0 10px; }
.amo-play__day {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff4e0;
  color: #a05a00;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3px;
  vertical-align: 1px;
}
.amo-play__more {
  margin: 4px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #92989b;
}

/* Строка «история скрыта» видна ровно тогда, когда лента и правда убрана —
   на низком экране при открытом скрипте. В остальное время её нет: подпись
   к тому, что и так на экране, читается как ошибка. */
.amo-log__folded {
  display: none;
  margin: 8px 20px 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #6b6b78;
  font-size: 12px;
  line-height: 1.4;
}