/* Надстройка «подсказки и статистика выбора». Автогенерация из прототипа. */
/* ============ надстройка для formaplus.net ============ */
/* служебные имена полей сайт прячет своим скриптом — прячем стилем */
.same-field{display:none!important}

/* --- токены --------------------------------------------------------------
   блок вопроса var(--brown) (коричневый), таблетки var(--orange-tint), выбранная var(--green)
   подложка подсказки — белый 88 % поверх коричневого = var(--beige)
   ink   var(--ink) 12,7   mute var(--muted) 6,0   act var(--green-dark) 6,7   risk var(--err) 6,5
   шрифт наследуется от сайта (Montserrat)
--------------------------------------------------------------------------- */

/* ---------- доля выбора в варианте ответа ---------- */
/* цвет наследуем от подписи: на персиковой таблетке она тёмная, на выбранной белая */
.dgr-share{position:relative;display:inline-flex;align-items:center;bottom:auto;
  font-size:13px;font-weight:700;color:inherit;font-variant-numeric:tabular-nums;
  padding:0 0 0 8px;margin-left:6px;border-left:1px solid rgba(51,37,29,.32);
  white-space:nowrap;cursor:pointer}
.custom-control-input:checked ~ .custom-control-new .dgr-share{border-left-color:rgba(255,255,255,.55)}
/* всплывашка — СВОЯ (.dgr-tip), не переиспользуем классы сайта .helper-show-body/
   .helper-wrapper: их :hover/::стрелки и правила для выбранного состояния давали
   пустой пузырь на выбранном варианте. Позиционируем в пикселях (position:fixed),
   чтобы не вылезал за край. Открывается по клику (класс .open вешает analytics.js),
   закрывается крестиком: показ по наведению мигал, когда мышь шла по краю бейджа. */
.dgr-share .dgr-tip{position:fixed;top:0;left:0;z-index:60;display:none;
  width:260px;max-width:calc(100vw - 16px);padding:11px 38px 11px 16px;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 26px rgba(51,37,29,.2);
  font-size:14px;font-weight:400;line-height:1.35;text-align:left;color:var(--ink);
  white-space:normal;cursor:default}
.dgr-share .dgr-tip::after,.dgr-share .dgr-tip::before{content:'';position:absolute;top:100%;
  left:var(--dgr-arrow,50%);border:12px solid transparent;border-top-color:#fff;margin-left:-12px}
.dgr-share .dgr-tip::before{border-top-color:var(--line);margin-top:1px}
.dgr-share.open .dgr-tip{display:block}
/* Внутренние span-ы всплывашки попадают под правило сайта «.custom-control-new span»
   (nowrap, line-height 35px, position:relative), поэтому текст не переносился,
   а крестик уезжал в поток. Держим вес селектора выше сайтового. */
.dgr-share .dgr-tip .dgr-tip-tx{display:block;position:static;white-space:normal;
  line-height:1.35;font-size:14px;font-weight:400;text-align:left;transition:none}
/* Всплывашка лежит ВНУТРИ подписи варианта, а у сайта есть правило
   «.custom-radio .custom-control-input:checked ~ .custom-control-new span{color:#fff!important}»
   — на выбранном варианте оно красило текст всплывашки в белый по белому.
   Имя класса намеренно повторено: так вес селектора выше сайтового, и мы не
   привязываемся к его разметке. Сам процент цвет по-прежнему наследует. */
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip,
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-tx{color:var(--ink)!important}
/* крестик: 28×28 — чтобы попасть пальцем на телефоне */
.dgr-share .dgr-tip .dgr-tip-x{position:absolute;top:5px;right:5px;width:28px;height:28px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;line-height:1;cursor:pointer;background:none;
  white-space:nowrap;transition:none}
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-x{color:var(--muted)!important}
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-x:hover{background:var(--ink);color:#fff!important}
.dgr-tip-x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.dgr-share:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
/* тумблер «Выводить статистику выбора ответов» управляет только процентами */
body.dgr-no-calc .dgr-share{display:none}
.new-one-block .radio-line2{max-width:100%}
.custom-control-new{max-width:100%}

/* ---------- строка-подсказка под блоком вопроса ---------- */
/*
 * Полка садится в НИЗ блока вопроса, поэтому её отрицательные отступы и нижние
 * скругления обязаны совпадать с этим блоком. Значения взяты из style-1.css
 * этого сайта:
 *     .new-one-block{padding:30px 25px 30px 25px;border-radius:20px}
 * Раньше здесь стояли числа другого сайта (padding 35/25/20, радиус 10) — из-за
 * этого под полкой оставалась зелёная полоса в 10 px, а её углы были круче
 * углов блока. Проверено замером 25.08.2026: hvostSnizu был 10 px.
 *
 * Если на сайте поменяют отступы .new-one-block — надо поменять и здесь;
 * за этим следит проверка вёрстки (autotests/verstka.php).
 */
/* Отрицательные отступы берём из переменных: их выставляет podskazki.js по
   ФАКТИЧЕСКИМ полям блока вопроса. Числа в fallback — поля блока на широком
   экране; если переменных почему-то нет, останется прежнее поведение. */
.dgr-hint{margin:24px calc(-1 * var(--dgr-pr, 25px)) calc(-1 * var(--dgr-pb, 30px))
    calc(-1 * var(--dgr-pl, 25px));
  padding:14px var(--dgr-pr, 25px) 18px var(--dgr-pl, 25px);background:var(--beige);
  border-top:1px dashed var(--line);border-radius:0 0 20px 20px;text-align:left;
  overflow:visible;color:var(--ink)}
/* .new-one-block задаёт color:#fff — чтобы текст подсказки не наследовал белый,
   держим тёмный цвет на всех текстовых элементах строки */
.dgr-hint .dgr-tx,.dgr-hint .dgr-row,.dgr-hint .dgr-legal,.dgr-hint .dgr-legal p{color:var(--ink)}
.dgr-hint.thin{background:var(--beige)}
body.dgr-no-tips .dgr-hint{display:none!important}
.dgr-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;background:none;border:0;
  font:inherit;padding:0;cursor:pointer;color:var(--ink);text-align:left}
.dgr-row.static{cursor:default}
.dgr-row:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.dgr-dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;color:#fff;background:var(--err);line-height:1}
.dgr-dot.ok{background:var(--green-dark)}
.dgr-dot.info{background:var(--muted)}
.dgr-dot.none{background:var(--muted)}
.dgr-tx{flex:1 1 300px;min-width:0;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.dgr-val{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-weight:700;font-size:12.5px;color:var(--err);font-variant-numeric:tabular-nums;white-space:nowrap;
  background:#fff;border:1.5px solid var(--err);border-radius:999px;padding:8px 10px 8px 16px}
/* Поля таблетки несимметричны намеренно: справа в ней стоит знак «?», и
   лишние 6 px слева уравновешивают его. Без знака та же несимметрия сдвигает
   короткое значение вправо от середины — тогда поля делаем ровными.
   Метку odno-znachenie вешает podskazki.js там же, где прячет «?». */
.dgr-val.odno-znachenie{padding-left:10px}
.dgr-val.ok{color:var(--ink);border-color:var(--line)}
.dgr-val.info{color:var(--ink);border-color:var(--line)}
.dgr-val:empty{display:none}
/* пока вариант не выбран, справа не значение, а призыв «Выберите ответ» —
   пунктир и приглушённый цвет, чтобы его не читали как рассчитанную сумму */
.dgr-val.pick{color:var(--muted);font-weight:700;border-color:var(--line);border-style:dashed;padding-right:16px}
.dgr-hint.idle .dgr-dot{background:var(--muted)}
.dgr-why{width:19px;height:19px;flex:0 0 auto;border-radius:50%;border:1.5px solid currentColor;background:none;
  color:inherit;font:inherit;font-size:11px;font-weight:800;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.dgr-why:hover{background:currentColor}
.dgr-why:hover::first-letter{color:#fff}
.dgr-why:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.dgr-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:350px;max-width:86vw;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-align:left;
  box-shadow:0 18px 44px rgba(54,47,41,.3);white-space:normal;font-weight:600;color:var(--ink);display:none}
.dgr-val.open .dgr-pop{display:block}
.dgr-pop-t{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px}
.dgr-pop-f{font-size:13px;font-weight:700;margin:0 0 12px;line-height:1.5}
.dgr-pop-f b{font-weight:800}
.dgr-pop label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 6px;font-weight:700}
.dgr-pop-row{display:flex;gap:10px;align-items:center}
.dgr-pop input{flex:1 1 auto;min-width:0;border:none;border-radius:10px;padding:0 15px;height:44px;
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);text-align:right;background:var(--beige);
  font-variant-numeric:tabular-nums;outline:none}
.dgr-pop input:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
.dgr-pop button.dgr-apply{flex:0 0 auto;height:44px;padding:0 18px;border:0;border-radius:10px;
  background:var(--green-grad);color:#fff;font-family:'Unbounded',sans-serif;font-size:11px;font-weight:500;
  text-transform:uppercase;cursor:pointer}
.dgr-pop button.dgr-apply:hover{background:var(--green-dark)}
.dgr-pop-src{font-size:11.5px;color:var(--muted);font-weight:600;margin:12px 0 0;padding-top:12px;
  border-top:1px dashed var(--line);line-height:1.5}
.dgr-price{border:0;background:none;padding:0 1px;font:inherit;font-weight:700;color:var(--green-dark);cursor:pointer;
  border-bottom:1px dashed var(--green-dark);line-height:inherit}
.dgr-price:hover{color:var(--ink);border-bottom-color:var(--ink)}
.dgr-price:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:3px}
.dgr-price::after{content:' ✎';font-size:.85em;opacity:.75}
.dgr-more{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--green-dark);display:inline-flex;align-items:center;gap:6px}
.dgr-more::after{content:'';width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .2s ease}
.dgr-hint.open .dgr-more::after{transform:rotate(90deg)}
.dgr-body{display:none;padding-top:13px;margin-top:12px;border-top:1px dashed var(--line)}
.dgr-hint.open .dgr-body{display:block}
.dgr-legal{font-size:13px;font-weight:600;color:var(--ink);line-height:1.6}
.dgr-legal p{margin:0 0 10px;text-align:left}
.dgr-mname{font-size:11.5px!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px!important}
.dgr-note{font-size:12px;color:var(--muted);font-weight:600;line-height:1.55;margin-top:12px!important;
  padding-top:12px;border-top:1px dashed var(--line)}

/* панель настроек */
.dgr-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 24px;margin:0 0 16px}
.dgr-panel-in{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.dgr-panel-t{font-family:'Unbounded',sans-serif;font-weight:600;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;flex:0 0 auto}
/* Вес селектора намеренно выше сайтового: у конструктора label внутри блока
   растянут на всю строку, и тумблеры вставали друг под друга вместо ряда.
   width:auto этого и не даёт. А вот flex:0 0 auto здесь стоять не должен —
   он запрещал сжатие, и на узком экране подпись «Выводить статистику выбора
   ответов» (317 px) вылезала за скруглённый край панели, а на средней ширине
   один выключатель срывался на вторую строку, оставляя заголовок висеть
   посреди первой. Правильно: не растягивать, но сжимать разрешить. */
.dgr-panel .dgr-sw{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;
  color:var(--ink);cursor:pointer;user-select:none;margin:0;min-height:44px;width:auto;
  flex:0 1 auto;min-width:0}
.dgr-sw input{position:absolute;opacity:0;width:0;height:0}
.dgr-sw span{width:44px;height:24px;border-radius:999px;background:#DCD8CC;position:relative;flex:0 0 auto;
  transition:background-color .2s ease}
.dgr-sw span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s ease}
.dgr-sw input:checked + span{background:var(--green)}
.dgr-sw input:checked + span::after{transform:translateX(20px)}
.dgr-sw input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}

/* Порядок «разъезда» панели задаём сами, а не оставляем на волю flex-wrap.
   1240 px: заголовок занимает свою строку, оба выключателя становятся ровной
   парой под ним. 620 px: выключатели встают по одному. Без этих двух правил
   между 768 и 1240 получалась рваная раскладка «заголовок + один выключатель,
   второй под ними». */
@media (max-width:1240px){
  .dgr-panel-t{flex:1 0 100%}
}
@media (max-width:620px){
  .dgr-panel .dgr-sw{flex:1 0 100%}
}

/* до 767px сайт делает подпись варианта блочной (display:block), и процент
   срывается на вторую строку. Возвращаем строку и прижимаем процент вправо.
   .custom-control-new span весит 0-1-1, поэтому селекторы держим выше */
@media (max-width:767px){
  .custom-control-new .edited-btn-block{display:flex;align-items:center;
    justify-content:space-between;gap:12px;width:100%}
  .custom-control-new span.dgr-share{display:inline-flex;flex:0 0 auto;align-self:center;
    padding-left:12px;margin-left:0}
}

@media (max-width:760px){
  /* на телефоне поля блока другие — их так же подставит скрипт */
  .dgr-hint{margin:20px calc(-1 * var(--dgr-pr, 15px)) calc(-1 * var(--dgr-pb, 14px))
      calc(-1 * var(--dgr-pl, 15px));
    padding:12px var(--dgr-pr, 15px);border-radius:0 0 10px 10px}
  .dgr-panel-in{gap:12px}
  .dgr-row{gap:8px}
  .dgr-val{position:static}
  .dgr-hint{position:relative}
  .dgr-pop{position:absolute;left:15px;right:15px;top:calc(100% + 6px);width:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .dgr-why,.dgr-apply,.dgr-sw span,.dgr-sw span::after,.dgr-more::after{transition:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Кнопка «Выбрать типовые ответы» и поп-ап «Устали?» (ТЗ от 17.08.2026)
   Цвета и размеры взяты из style.css сайта, чтобы окна не выбивались:
   зелёная кнопка — тот же градиент, кант окна — тот же var(--orange-tint).
   ═══════════════════════════════════════════════════════════════════════════ */

/* вторичная кнопка: у сайта такой нет, а обе кнопки зелёными делать нельзя —
   тогда не видно, какое действие основное */
.dgr-knopka-vtor{
  display:inline-block;padding:14px 25px;height:55px;line-height:25px;
  font-family:'Mulish',sans-serif;font-size:16px;
  color:var(--green-dark);background:#fff;border:2px solid var(--green);border-radius:5px;
  cursor:pointer;transition:.3s;
}
.dgr-knopka-vtor:hover{background:var(--cream)}
.dgr-dlin{min-width:300px}
.dgr-iz-okna-obertka{margin-top:14px}

/* окна надстройки */
.dgr-okno .modal-header-free{padding-bottom:10px}
.dgr-okno .dgr-uzhe{margin-top:26px}
.dgr-derzh-obertka{margin-top:26px;padding-bottom:14px}
.dgr-derzh-obertka > *{margin-bottom:14px}
/* Заголовок окна — шрифтом заголовков сайта (Unbounded), а не текстовым
   Mulish: у всех остальных окон сайта заголовок именно такой. */
.dgr-ustali-zag{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.25;
  color:var(--ink);text-align:center;margin:10px 0 0;
}
.dgr-ustali-note{margin-top:10px}

/* кнопка, которую надо держать */
.dgr-derzhat{
  position:relative;overflow:hidden;width:100%;max-width:420px;border:none;cursor:pointer;
  font-family:'Mulish',sans-serif;font-size:17px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--err);background:var(--err-bg);border-radius:14px;
  padding:20px 18px;-webkit-user-select:none;user-select:none;touch-action:none;
}
.dgr-derzhat .dgr-zalivka{
  position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(169,68,66,.22);
}
.dgr-derzhat .dgr-nadpis{position:relative}
.dgr-derzhat.dgr-gotovo{background:var(--green-chip);color:var(--green-dark)}
.dgr-derzhat[disabled]{cursor:default}
.dgr-derzh-podskaz{font-size:13px;color:var(--muted);min-height:18px}
/* Тихая вторая кнопка. Раньше здесь не сбрасывался фон, и как только элемент
   стал <button>, браузер рисовал его серым системным — это и было видно в окне
   «Устали?». Сбрасываем всё, оставляя вид ссылки. */
.dgr-prodolzhit{
  display:inline-block;background:none;border:none;padding:0;
  border-bottom:1px solid var(--ink);cursor:pointer;line-height:1.2;font-size:15px;
  font-family:'Mulish',sans-serif;color:var(--ink);
}
.dgr-prodolzhit:hover{border-bottom-color:transparent}
.dgr-prodolzhit:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Ряд кнопок в окнах надстройки: главная во всю ширину, тихая под ней.
   На узком экране порядок тот же, ничего не переносится вбок. */
.dgr-okno-knopki{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin:24px 0 6px;text-align:center;
}
.dgr-okno-glavnaya{width:100%;max-width:420px}

/* ход подстановки */
.dgr-hod{max-width:420px;margin:0 auto}
.dgr-hod-tekst{font-size:14px;color:var(--ink);margin-bottom:7px}
.dgr-hod-shkala{height:8px;background:var(--beige);border-radius:8px;overflow:hidden}
.dgr-hod-shkala span{
  display:block;height:100%;width:0;border-radius:8px;transition:width .3s;
  background:linear-gradient(90deg,var(--green),var(--green));
}

/* пояснение у знака вопроса */
/* Значок «?» — как у подсказок сайта: контурный зелёный кружок, а не
   коричневая заливка (её взяли с другого проекта). */
.dgr-vopros-znak{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:#fff;border:1.5px solid var(--green);color:var(--green);
  font-size:11px;font-weight:800;cursor:help;
  vertical-align:middle;margin-left:5px;position:relative;
}
.dgr-vopros-znak .dgr-vsplyv{
  display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);width:290px;
  background:var(--ink);color:#fff;font-size:13px;line-height:1.45;padding:11px 14px;border-radius:9px;
  text-align:left;font-family:'Mulish',sans-serif;z-index:10;
}
.dgr-vopros-znak:hover .dgr-vsplyv{display:block}

@media (max-width:760px){
  .dgr-dlin{min-width:0;width:100%}
  .dgr-derzhat{font-size:15px;padding:18px 14px}
  .dgr-vopros-znak .dgr-vsplyv{width:230px}
}
@media (prefers-reduced-motion:reduce){
  .dgr-knopka-vtor,.dgr-hod-shkala span{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   Предпросмотр документа в окне скачивания (ТЗ от 21.08.2026, п. 1)

   Вместо картинки-гифки показываем то, что человек уже собрал. Смысл окна
   меняется: раньше оно объясняло, что надо ответить на вопросы, теперь
   показывает, ради чего отвечать.

   ГЛАВНОЕ ПРАВИЛО ЭТОГО БЛОКА: содержимое предпросмотра НЕ ПЕРЕКРАШИВАЕМ
   и НЕ ПЕРЕВЁРСТЫВАЕМ. Ни кегля, ни выключки, ни цвета — всё берётся
   у документа на странице. Прежний предпросмотр (до 25.08.2026) был
   снимком документа и врать не мог по устройству; здесь та же копия,
   поэтому любой !important на текст внутри .dgr-pred-list — ошибка:
   окно начинает показывать не тот документ, который скачают.

   Лист собирается в ширину документа и ужимается целиком (transform
   у .dgr-pred-holst) — уменьшение не меняет ни переносов, ни пропорций,
   ровно как уменьшалась прежняя картинка. Множитель и высоту видимого
   куска считает podskazki.js: они зависят от ширины окна и высоты экрана.

   Обрезаем по высоте, а не по числу пунктов: у разных шаблонов пункты
   разной длины, и «первые три» дали бы то пол-экрана, то простыню.
   ═══════════════════════════════════════════════════════════════════════ */
.dgr-pred{
  position:relative;margin:22px auto 0;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  overflow:hidden;padding:18px 20px 0;
  /* знак без имени сайта: файл ездит между стендом и боевым вместе со стилями */
  background-image:url('/img/vodyanoy-predprosmotr.svg');
  background-repeat:repeat;background-position:center top;
}
/*
 * pointer-events отключены намеренно. Поля документа — живые элементы сайта,
 * и в копии они тянут за собой чужие обработчики: при наведении выскакивали
 * подсказки вроде «Укажите место». Предпросмотр должен быть картинкой, а не
 * второй копией конструктора.
 */
.dgr-pred-list{
  overflow:hidden;
  /* высоту ставит скрипт; потолок здесь — страховка на случай, если скрипт
     не отработал: без неё в окно уехал бы весь документ целиком.
     Держать его НЕ НИЖЕ потолка из скрипта, иначе он молча обрежет то,
     что скрипт разрешил показать. */
  max-height:640px;
  pointer-events:none;user-select:none;
}
.dgr-pred-holst{transform-origin:top left}
/* Затухание вместо резкого обрыва: обрыв читается как поломка вёрстки,
   а плавный уход — как «дальше есть ещё». */
/* Высота затухания. Было 110 px — при ужатом листе это шесть строк
   документа, задавленных белым; на невысоком экране из-за этого и получалось
   «видно восемь строк». 48 px хватает, чтобы обрыв читался как продолжение,
   а не как поломка вёрстки. */
.dgr-pred-tuman{
  position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 62%,#fff 100%);
}
/* Единственное, что прячем, — интерфейс, которого в скачанном документе нет.
   Служебные метки полей сайт прячет скриптом на живой странице; в копии
   скрипта нет, поэтому прячем стилем. Значки .w-ico означают «поле
   заполнено» — это подсказка конструктора, а не часть договора. */
.dgr-pred-list .same-field,
.dgr-pred-list .w-ico{display:none}
/* Поле ввода, заменённое в копии на текст. Единственное отличие от родного
   поля — строка не переносится: <input> текст не переносит, а <span> переносит,
   и дата ложилась в две строки там, где на странице она в одну. Ни цвет, ни
   кегль, ни рамку здесь не задаём — они остаются от классов сайта. */
.dgr-pred-list .dgr-pole{display:inline-block;white-space:nowrap}

/* Подпись под предпросмотром — родной блок сайта (.free-media-new-alert),
   свои цвета и кегли здесь не заводим, только отбивка. */
.dgr-pred-podpis{margin-top:20px}

/* ═══════════════════════════════════════════════════════════════════════
   Стоимость шаблона в правой колонке (ТЗ от 21.08.2026, п. 2)

   Второе место показа цены. Оформлена намеренно спокойно: это справка,
   а не призыв — на кнопку «Инструкция» рядом она перебивать не должна.
   ═══════════════════════════════════════════════════════════════════════ */
/*
 * Ритм колонки задан не мной: каждая карточка отбивается сверху на 30 пикселей
 * (margin-top у соседей, снизу у всех ноль), скругление 10, шрифт Montserrat.
 * Блок цены встаёт в этот же ритм, а не заводит свой: иначе он читается как
 * чужая вставка. Первая версия имела отступ только снизу — и прилипала к
 * кнопке «Инструкция» вплотную.
 *
 * Насыщенного начертания у сайта нет (объявлены только Montserrat-Regular и
 * Montserrat-Medium), поэтому font-weight:700 давал бы синтетический жир.
 * Сумму выделяем начертанием Medium и кеглем, а не весом.
 */
.dgr-cena-blok{
  background:var(--beige);border-radius:10px;padding:18px 22px;
  margin:30px 0 0;font-family:'Mulish',sans-serif;
}
.dgr-cena-podpis{font-size:13px;line-height:1.3;color:var(--muted);margin-bottom:6px}
.dgr-cena-znachenie{display:flex;align-items:center;gap:8px}
.dgr-cena-summa{
  font-family:'Mulish',sans-serif;font-weight:400;
  font-size:18px;line-height:1.2;color:var(--ink);
}
.dgr-cena-vopros{
  position:relative;display:inline-flex;align-items:center;cursor:help;line-height:0;
}
.dgr-cena-vopros img{width:18px;height:18px;display:block}
.dgr-cena-vopros .dgr-vsplyv{
  display:none;position:absolute;bottom:135%;left:50%;transform:translateX(-50%);width:290px;
  background:var(--ink);color:#fff;font-size:13px;line-height:1.45;padding:11px 14px;border-radius:9px;
  text-align:left;font-family:'Mulish',sans-serif;z-index:20;
}
.dgr-cena-vopros:hover .dgr-vsplyv,
.dgr-cena-vopros:focus .dgr-vsplyv{display:block}

@media (max-width:1199px){
  /* В узкой колонке всплывашка упиралась бы в край экрана. */
  .dgr-cena-vopros .dgr-vsplyv{left:auto;right:0;transform:none;width:250px}
}
@media (max-width:760px){
  /* Высоту видимого куска и множитель считает скрипт; здесь только поля
     рамки и высота затухания — на маленьком экране 110 px съедали бы
     половину предпросмотра. */
  .dgr-pred{padding:10px 14px 0}
  .dgr-pred-tuman{height:40px}
}

/* ---------- окна надстройки на узком экране ---------- */
@media (max-width:575px){
  .dgr-okno .modal-header-new{padding:16px 14px 20px}
  .dgr-ustali-zag{font-size:19px}
  .dgr-ustali-note{font-size:14px;line-height:1.5}
  .dgr-okno-glavnaya{max-width:100%}
  .dgr-vopros-znak .dgr-vsplyv{width:min(290px,calc(100vw - 48px))}
}

/* Строка варианта у сайта — flex без переноса и с nowrap. Когда подпись
   длинная, бейджу процента места не остаётся, и он выезжал за правый край
   экрана (на 600 px страница ехала вбок на 9 px). Разрешаем перенос только
   в строках, куда наш скрипт поставил бейдж, — метку .dgr-s-row вешает он же. */
.dgr-s-row{flex-wrap:wrap;white-space:normal;min-width:0}
.dgr-s-row > .dgr-share{flex:0 0 auto}


/* ── окно скачивания: место под документ ───────────────────────────────────
   Правки по замечанию заказчика 27.08.2026 (вечер). Смысл один: в окне видно
   было восемь строк договора, из которых сути не понять. Освобождаем всё,
   что занимало место впустую, и показываем поля так, как они будут в готовом
   файле, а не так, как в конструкторе. */

/* Справка по знаку «?» свёрнута max-height:0, но родные поля 14 px остаются —
   это пустая полоса 28 px над предпросмотром при каждом открытии окна.
   Убираем поля, пока справка свёрнута; при раскрытии они возвращаются вместе
   с высотой, и предпросмотр просто съезжает вниз. */
#myModal7 .open-helper-note{padding:0;
  transition:max-height .3s ease,opacity .3s ease,padding .3s ease}
#myModal7 .open-helper-note.active{padding:14px}

/* Подпись под предпросмотром — родной блок сайта, у него кегль clamp(16…18)
   и поля 20 px. Здесь это две строки крупным текстом на месте, которое нужно
   документу. Уменьшаем только в этом окне, родной блок в других местах
   не трогаем. */
#myModal7 .dgr-pred-podpis .free-media-new-alert{
  font-size:13px;line-height:1.35;padding:11px 14px;gap:11px;border-radius:14px}
#myModal7 .dgr-pred-podpis .free-media-new-alert img{width:20px;height:20px;flex:0 0 auto}

/* Поля документа в предпросмотре.
   В конструкторе поле — цветная плашка с рамкой: это рабочий элемент, по
   нему видно, куда нажимать. В готовом файле его нет: незаполненное поле —
   место под вписывание (подчёркивание), заполненное — обычный текст.
   Предпросмотр показывает документ, а не конструктор, поэтому здесь второе.
   Цвет и кегль не задаём — они остаются документа; линия рисуется
   currentColor, то есть тем же цветом, что и текст рядом. */
.dgr-pred-list .ch-field{
  background:none;box-shadow:none;border:0;border-radius:0;
  padding:0 2px;cursor:default;
  border-bottom:1px solid currentColor}
/* Заполненное поле подчёркивать незачем: там уже стоит то, что впишут в файл.
   !important здесь вынужденный: у сайта .yes-field объявлен с !important
   (style-1.css). Это про фон и рамку — шрифт, кегль, цвет и выключку внутри
   предпросмотра переопределять по-прежнему нельзя. */
.dgr-pred-list .ch-field.yes-field{
  background:none!important;border:0!important;border-radius:0;
  border-bottom:0;padding:0}
/* Поля ввода, заменённые в копии на текст (дата, «ий/ая» и подобные): у них
   родные плашки и стрелка списка — в документе этого не будет. */
.dgr-pred-list .dgr-pole{
  background:none;box-shadow:none;border:0;border-radius:0;
  padding:0 2px;border-bottom:1px solid currentColor;
  -webkit-appearance:none;appearance:none}

/* ── окно скачивания: больше места документу ───────────────────────────────
   Замечание заказчика 27.08.2026 (вечер, второй заход): «полезная площадь
   не увеличилась, опять восемь строк». Заказчик отметил на снимке три
   пустых полосы, которые можно сократить, не увеличивая само окно.
   Замерено на 1440×900 (было → стало):

     над заголовком:  поле шапки 20 + отступ блока 40 + отступ заголовка 30
     заголовок → лист: отступ заголовка снизу 16 + отступ рамки 22
     внутри рамки:     верхнее поле рамки 18
     под листом:       отступ подписи 20, отступ блока кнопок 24

   Итого освобождено около 100 px, и ровно столько же добавляется листу:
   потолок высоты считается как «высота экрана минус всё, что занято не
   предпросмотром» (podskazki.js). Само окно не выросло ни на пиксель.

   Правила висят на #myModal7 — другие окна сайта с теми же классами
   не трогаем. */
#myModal7 .modal-header-new{padding-top:8px}
#myModal7 .free-nice-head{margin-top:18px}
/* mb-3 и mt-4 у сайта — служебные классы бутстрапа с !important, обычным
   правилом их не перебить. Это отступы, а не шрифт: запрет на переопределение
   кегля, цвета и выключки внутри предпросмотра остаётся в силе. */
#myModal7 .modal-reg-title{margin-top:6px;margin-bottom:8px!important}
#myModal7 .dgr-pred{margin-top:10px;padding-top:10px}
#myModal7 .dgr-pred-podpis{margin-top:12px}
#myModal7 .free-nice-head > .text-center{margin-top:14px!important}

/* Ширину окна скачивания НЕ трогаем.
   У сайта #myModal7 — обычный .modal-dialog, 580 px, как у всех окон сайта
   и как было у прежнего окна предпросмотра (#previewModal, убрано
   25.08.2026). Раньше здесь стоял набор правил .dgr-okno-shire, тянувший
   окно до 700 px; заодно он растягивал блок кнопок (у сайта .my-btn-small —
   flex во всю ширину родителя), и «Пример документа» превращалась в полосу
   во всю ширину окна. Убрано 27.08.2026 по замечанию заказчика: окно должно
   быть обычным, а лист договора укладывается в него уменьшением, а не
   раздвиганием окна. Заново не заводить. */