/* ═══════════════════════════════════════════════════════════════
   diag-v2.css · слой поверх базовых стилей диагностики.

   Задача: привести страницу к системе главной v2.0 (Lora плюс Inter, охра
   единственным акцентом, радиус 3px, тень только на кнопке действия),
   НЕ трогая разметку и встроенный калькулятор.

   Земля светлая по решению Дмитрия от 20.08. Это не расхождение с главной:
   там светлые секции набраны ровно этими же токенами (--paper #FAF8F4,
   вторая поверхность #F2EFE8). Длинную форму на 14 блоков на тёмном фоне
   заполнять тяжелее, а диагностика это рабочий инструмент, а не витрина.

   Почему слоем, а не переписыванием: на странице живёт рабочий расчёт
   на 14 блоков с сохранением в браузере, и любая правка разметки рискует
   его сломать. Базовые стили построены на токенах с теми же именами, что
   у главной, поэтому палитра переворачивается переопределением токенов.

   Подключается ПОСЛЕДНИМ, после diag.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* земли и поверхности: те же, что у светлых секций главной */
  --paper:#FAF8F4;
  --fog:#F2EFE8;
  --card:#FFFFFF;
  --wash:rgba(168,84,31,.07);

  /* текст: --ink в базовых стилях означает основной цвет текста */
  --ink:#0F0E0C;
  --text:#3F3A34;
  --text2:#4A443D;
  --stone:#6B665E;
  /* Приглушённый текст затемнён против исходного #918b81: на светлой земле
     он давал контраст 3.19 при норме 4.5 для мелкого кегля. Замер до и после
     на боевой странице: 14 элементов ниже порога -> 0. Стало 4.96. */
  --ash:#726B62;
  /* Волосяная затемнена против исходного #E4DFD6 по правке Дмитрия 21.08.2026:
     на бумаге она давала контраст 1.25, на белой карточке 1.33, и контур
     карточки на скриншоте не читался вовсе. Стало 1.76 и 1.86. Это осознанно
     ниже порога 3:1: волосяная держит структуру, а не очерчивает элемент. */
  --hair:#C6BDAB;
  /* Кант элементов, с которыми человек работает: поля ввода, кнопки, карточка
     ввода выручки, шкала оценок. Здесь порог WCAG 1.4.11 обязателен, поэтому
     значение подобрано так, чтобы 3:1 держалось на ВСЕХ светлых поверхностях
     сайта разом: бумага 3.47, белая карточка 3.68, вторая поверхность 3.20,
     тёплая подложка 3.08, палитра B 3.40 и 3.15. Один токен на весь сайт. */
  --edge:#8F8471;

  /* акцент наследуется с главной без изменений */
  --ochre:#A8541F;
  --ochre-deep:#7A3A12;
  --ok:#4E8C5F;
  --shadow:rgba(168,84,31,.26);

  /* геометрия по системе главной: радиус не больше 3px */
  --r:3px;
  --r-s:3px;
}

html,body{background:var(--paper);color:var(--ink)}

/* ── типографика по главной ─────────────────────────────────── */
h1,.dg-h1{
  font:500 clamp(2.1rem,4.4vw,4.9rem)/0.98 Lora,Georgia,serif;
  letter-spacing:-.021em;color:var(--ink);
}
h2{
  font:500 clamp(1.9rem,3.5vw,3.35rem)/1.06 Lora,Georgia,serif;
  letter-spacing:-.014em;color:var(--ink);max-width:22ch;
}
h3{font:600 clamp(1.15rem,1.5vw,1.4rem)/1.3 Inter,sans-serif;letter-spacing:-.005em;color:var(--ink)}
body{font:400 clamp(.95rem,1.02vw,1.08rem)/1.66 Inter,system-ui,sans-serif}
.lede,.dg-lede{color:var(--stone)}
.dim,.dg-note{color:var(--ash)}

/* надзаголовки и микро-подписи: единый кегль, как на главной */
.dg-kicker,.dg-eyebrow,.kicker,.eyebrow,.dg-sec > .nm,.dg-toc-sep{
  font:500 12px/1.3 Inter,sans-serif !important;
  text-transform:uppercase;letter-spacing:.14em;color:var(--stone);
}
.ask{font-family:Lora,Georgia,serif;font-style:italic;color:var(--ochre)}
/* надзаголовок секции: на главной он нейтральный микро-кегль, а не охряный курсив.
   Охра там появляется не более двух раз на экран и остаётся акцентом. */
.dg-kicker,.dg-eyebrow,.kicker,.eyebrow,.dg-sec > .nm{color:var(--stone) !important;font-style:normal !important}
.dg-hero .ask,.dg-intro .ask{
  font:500 12px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-style:normal;color:var(--stone);display:block;
}

/* ── кнопки ─────────────────────────────────────────────────── */
.btn{border-radius:var(--r);font-weight:500;letter-spacing:.02em}
/* специфичность поднята: базовые стили задают .top .btn-p и перебивают простой селектор */
.btn-p,.top .btn-p,.dg-sticky .btn-p,.dg-act .btn-p,a.btn.btn-p{
  background:var(--ochre) !important;color:#FAF8F4 !important;border-color:transparent !important;
  box-shadow:0 14px 34px var(--shadow);
}
.btn-p:hover{background:var(--ochre);filter:brightness(1.06);transform:translateY(-2px)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--edge)}
/* подписи внутри охряной кнопки: наследуют цвет кнопки, иначе тонут в фоне */
.btn-p *,.btn-p small,.btn-p span,.btn-p .dim{color:rgba(250,248,244,.82) !important}
/* кнопка действия в шапке и в липкой панели тоже охряная, как на главной */
.sitenav .btn,.dg-sticky .btn,.dg-act .btn{border-radius:var(--r)}
.sitenav .btn-s,.dg-sticky .btn-s{background:var(--ochre);color:#FAF8F4;border-color:transparent}
.sitenav .btn-s:hover,.dg-sticky .btn-s:hover{filter:brightness(1.06);background:var(--ochre)}
.btn-s:hover{border-color:var(--ink);background:var(--fog)}
.btn:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* ── поверхности: карточки перестают быть карточками ────────── */
.dg-sec,.dg-card,.dg-block,.card,.dg-case,.dg-client,.dg-k{
  background:transparent;border-radius:var(--r);box-shadow:none;
}
.dg-case,.dg-client,.dg-k,.dg-block{
  border:0;border-top:1px solid var(--hair);
}
.dg-panel,.dg-result,.dg-sticky,.dg-summary{
  background:var(--fog);border:1px solid var(--hair);border-radius:var(--r);box-shadow:none;
}

/* поля ввода и оценки.
   Кант полей переведён с волосяной на --edge (правка Дмитрия 21.08.2026):
   поле ввода это элемент интерфейса, его граница обязана проходить 3:1.
   На боевой странице поле выручки давало 1.16 и выглядело как заливка без
   рамки, что и было на скриншоте. */
input,select,textarea{
  background:var(--fog) !important;color:var(--ink);border:1px solid var(--edge) !important;
  border-radius:var(--r) !important;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink) !important}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ochre);outline-offset:2px;border-color:transparent}
input::placeholder{color:var(--ash)}

/* цифры результата: крупно, серифом, как показатели на главной */
.dg-delta,.dg-k .v,.dg-num,.v{
  font-family:Lora,Georgia,serif;font-weight:500;letter-spacing:-.02em;color:var(--ink);
}
.dg-delta{color:var(--ochre)}

/* ── линии вместо рамок ─────────────────────────────────────── */
hr,.sep,.dg-toc-sep{border:0;border-top:1px solid var(--hair)}
table,th,td{border-color:var(--hair)}

/* ── шапка и навигация ──────────────────────────────────────── */
.sitenav,.top,header{background:var(--paper);border-bottom:1px solid var(--hair)}
.sitenav a,.top a{color:var(--stone)}
.sitenav a:hover,.top a:hover{color:var(--ink)}

/* ── мессенджеры: фирменные цвета, как на главной ───────────── */
.msg-btn,.m-tg,.m-wa,.m-max{border-radius:var(--r);color:#fff;border-color:transparent}
.m-tg{background:linear-gradient(135deg,#2AABEE,#229ED9)}
.m-wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.m-max{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.msg-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ── картинки кейсов: единый спокойный тон, как на светлых секциях главной ── */
.dg-case img,.dg-client img,.gallery img{
  filter:grayscale(.55) contrast(1.02);border-radius:var(--r);
}
.dg-case:hover img,.dg-client:hover img{filter:grayscale(.15) contrast(1.04)}

/* ── печать остаётся светлой: отчёт печатают на бумаге ──────── */
@media print{
  :root{--paper:#fff;--card:#fff}
  html,body{background:#fff}
  .dg-case img,.dg-client img{filter:none}
}


/* ═══ 1. Итог виден целиком ═══
   Описание уровня системы было обрезано на четвёртой строке
   (-webkit-line-clamp:4), поэтому вывод обрывался на полуслове. */
.dg-k .s.clamp,.dg-k .s{
  display:block !important;-webkit-line-clamp:none !important;overflow:visible !important;
}

/* ═══ 2. Раскрывающиеся пункты видно, что они раскрываются ═══
   Были неотличимы от обычной строки: люди их просто не замечали. */
.dg-more{
  display:inline-flex !important;align-items:center;gap:10px;
  padding:10px 16px;margin-top:2px;
  background:var(--fog);border:1px solid var(--edge);border-radius:var(--r);
  color:var(--ochre);font:500 13px/1.2 Inter,sans-serif;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.dg-more:hover,.dg-more:focus-visible{
  background:var(--wash);border-color:var(--ochre);color:var(--ochre);
}
.dg-more .chev{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--ochre);color:#FAF8F4;font-size:10px;line-height:1;
  transform:rotate(90deg);transition:transform .2s;
}
.dg-more[aria-expanded="true"] .chev,.dg-more.open .chev{transform:rotate(-90deg)}

/* ═══ 3. Панель итога после последнего блока ═══ */
/* нижний отступ учитывает липкую панель расчёта, иначе она перекрывает конец итога */
.dg-final{padding:var(--s7,64px) 0 calc(var(--s7,64px) + 120px);border-top:1px solid var(--hair);background:var(--fog)}
.dg-final[hidden]{display:none}
.dg-final.is-new{animation:dgFinalIn .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes dgFinalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dg-final-kicker{
  font:500 12px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ochre);display:block;margin-bottom:14px;
}
.dg-final-h{margin:0 0 26px}
/* колонки шире и с явным зазором: при minmax 190px длинные суммы
   «18 000 000 ₽» и «47 из 70» вставали вплотную и читались как одно число */
.dg-final-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px 44px;border-top:1px solid var(--hair);padding-top:22px;
}
.dg-final-num{white-space:nowrap}
.dg-final-lab{
  display:block;font:500 12px/1.3 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;color:var(--stone);margin-bottom:10px;
}
.dg-final-num{
  font:500 clamp(1.6rem,3vw,2.6rem)/1 Lora,Georgia,serif;
  letter-spacing:-.02em;color:var(--ochre);display:block;
}
.dg-final-band{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair)}
.dg-final-level{font:500 clamp(1.3rem,2.2vw,1.9rem)/1.2 Lora,Georgia,serif;color:var(--ink);display:block}
.dg-final-desc{margin-top:12px;max-width:70ch;color:var(--text)}

/* ── Итог: чтение уровня на языке отрасли, правка Дмитрия 21.08.2026 ──────
   Абзац отбит слева охряной чертой, потому что это не описание уровня (оно
   выше), а вывод для конкретной компании. Без отбивки два абзаца подряд
   читаются как один длинный, и вывод теряется. */
.dg-final-sense{
  margin-top:16px;max-width:70ch;color:var(--text);
  border-left:2px solid var(--ochre);padding-left:16px;
}

/* ── Итог: разбивка по четырём модулям ───────────────────────────────────
   Стоит перед тремя слабыми местами: сначала карта участков, потом точки. */
.dg-final-mods{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair)}
.dg-final-mods[hidden]{display:none}
.dg-final-mods-list{
  margin-top:16px;display:grid;gap:14px;
}
@media(min-width:760px){.dg-final-mods-list{grid-template-columns:1fr 1fr;gap:16px 34px}}
.dg-mb-i{min-width:0}
.dg-mb-i .nm{font:500 1.02rem/1.3 Inter,sans-serif;color:var(--ink)}
.dg-mb-i .sc{
  margin-top:3px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  color:var(--stone);font-size:.94rem;font-variant-numeric:tabular-nums;
}
/* Словесная оценка модуля. Цветом различаем только провал и сильную сторону:
   три цвета на одной шкале превращают итог в светофор и мешают читать. */
.dg-mb-i .vd{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.dg-mb-i .vd-bad{color:var(--ochre)}
.dg-mb-i .vd-mid{color:var(--ochre-deep)}
.dg-mb-i .vd-ok{color:var(--stone)}
.dg-mb-i .vd-top{color:var(--ok)}
.dg-mb-i .bar{
  margin-top:8px;height:6px;background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
}
.dg-mb-i .bar i{display:block;height:100%;background:var(--ochre)}
/* Вывод по самому слабому участку: это единственная строка итога, которая
   говорит, что делать в понедельник, поэтому набрана крупнее остального. */
.dg-final-next{
  margin-top:20px;max-width:74ch;color:var(--ink);
  font-size:1.04rem;line-height:1.6;
}

.dg-final-weak{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair)}
.dg-final-note{margin-top:26px;max-width:74ch;color:var(--ash);font-size:.94em}
@media print{.dg-final{background:#fff}}


/* ═══ 4. Убраны два блока по правке Дмитрия от 20.08 ═══

   Оба скрыты визуально, но ОСТАЮТСЯ в документе: скрипт итога читает из них
   значения (#t-loss, #t-band-desc, #weakspots-list, #method-text).
   Удалить их из разметки значило бы обесточить панель итога. */

/* Панель показателей под полем выручки. В начале, когда ничего не заполнено,
   она показывает «не задано» четыре раза и только мешает. Живой пересчёт
   по ходу заполнения остаётся в липкой панели внизу (.dg-bar). */
.dg-kpi{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Секция «Три места, куда смотреть первыми»: её содержимое теперь целиком
   входит в панель итога, а два одинаковых блока подряд читаются как ошибка. */
#slabye{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ═══ 5. Пояснение про источник цифры внутри итога ═══ */
.dg-final-method{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair)}
.dg-final-method h3{
  font:500 12px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--stone);margin:0 0 12px;
}
.dg-final-method p{max-width:74ch;color:var(--text);white-space:pre-line}

/* пункт навигации на итог появляется вместе с самим итогом */
.nav-itog{display:none !important}
.dg-done .nav-itog{display:flex !important}


/* ═══ 6. Перелив на раскрывающихся пунктах ═══
   Правка Дмитрия от 20.08: сделать так, чтобы их точно заметили.
   Правка Дмитрия от 21.08: «оставить только на первом блоке, на остальных
   убрать».

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

   Ограничения оставлены прежние:
   1) блеск гаснет, как только пункт раскрыли;
   2) гаснет при наведении и фокусе: человек уже нашёл элемент;
   3) полностью отключается при prefers-reduced-motion.
   Стало четвёртое: работает только на первой карточке первого модуля. */

.dg-more{position:relative;overflow:hidden;isolation:isolate}

/* Слой блеска заведён у всех плашек, но по умолчанию стоит за кадром
   (background-position 180%) и не анимирован. Держать слой у всех дешевле,
   чем городить отдельную разметку под одну карточку, и ничего не рисует. */
.dg-more::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 0%, transparent 38%,
    rgba(168,84,31,.16) 47%,
    rgba(168,84,31,.30) 50%,
    rgba(168,84,31,.16) 53%,
    transparent 62%, transparent 100%);
  background-size:260% 100%;background-position:180% 0;
}
@keyframes dgSheen{
  0%   {background-position:180% 0}
  38%  {background-position:-80% 0}
  100% {background-position:-80% 0}   /* пауза между проходами */
}
@keyframes dgChev{
  0%,26%,100%{transform:rotate(90deg) scale(1)}
  32%{transform:rotate(90deg) scale(1.18)}
  40%{transform:rotate(90deg) scale(1)}
}

/* Единственная карточка, которая переливается: первая в первом модуле.
   Селектор привязан к #mod-1, а не к «первой .dg-q на странице»: модули
   рисуются отдельными секциями, и без этой привязки под правило попала бы
   первая карточка КАЖДОГО модуля, то есть четыре штуки вместо одной. */
#mod-1 .dg-q:first-of-type .dg-more::after{animation:dgSheen 3.6s ease-in-out infinite}
#mod-1 .dg-q:first-of-type .dg-more .chev{animation:dgChev 3.6s ease-in-out infinite}

/* нашли, навели, раскрыли: блеск больше не нужен */
.dg-more:hover::after,.dg-more:focus-visible::after,
.dg-q.open .dg-more::after{animation:none;opacity:0}
.dg-more:hover .chev,.dg-more:focus-visible .chev,
.dg-q.open .dg-more .chev{animation:none}
.dg-q.open .dg-more{background:transparent;border-color:var(--hair);color:var(--stone)}

@media(prefers-reduced-motion:reduce){
  .dg-more::after,.dg-more .chev{animation:none !important}
  .dg-more::after{opacity:0}
}
@media print{.dg-more::after{display:none}}

/* ═══ Видимый кант, правка Дмитрия 21.08.2026 ═══
   Дословно: «нужно сделать более чёткие границы, то есть контур должен стать
   более видимым, иначе вообще не видно на белом фоне».

   Замер боевой страницы до правки, скрипт `_tools/border-audit.mjs`:
   67 видов контуров ниже 3:1, из них поле выручки и карточка ввода 1.16 и 1.25.
   На светлой бумаге это ноль читаемости, что и было на скриншоте.

   Разделение осознанное, а не по одному значению на всё:
   - --hair держит структуру (линии секций, канты карточек-вопросов), 1.76;
   - --edge очерчивает то, с чем человек работает руками, и обязан пройти
     3:1 по WCAG 1.4.11: поля, кнопки, шкала оценок, навигация, прогресс.
   Заливка страницы не менялась: земля остаётся светлой, как просил Дмитрий. */

/* карточка ввода: та самая, на которую указывала стрелка на скриншоте */
.dg-meta{border:1px solid var(--edge)}

/* шкала оценок: 70 кнопок, по ним и идёт вся работа на странице */
.dg-scale button{border-color:var(--edge)}

/* навигация по модулям слева и полоса прогресса */
.dg-toc a{border-color:var(--edge)}
.dg-toc-track{border-color:var(--edge)}

/* таблицы: видимые границы это уже общий стандарт клиентских артефактов */
table,th,td{border-color:var(--edge)}

/* Раскрытый пункт возвращался на волосяную и снова пропадал.
   Состояние «открыто» показывается цветом текста, а не исчезновением канта. */
.dg-q.open .dg-more{background:transparent;border-color:var(--edge);color:var(--stone)}

@media print{
  /* В печати кант тоньше не нужен, но и темнее бумаги он не должен быть:
     принтер добавляет свой контраст. Оставляем структуру на волосяной. */
  .dg-meta,.dg-scale button,.dg-toc a,table,th,td{border-color:var(--hair)}
}

/* ═══ Второе поле шапки: адрес сайта, правка Дмитрия 21.08.2026 ═══
   Базовая сетка .dg-meta от 700px это две колонки, а выручка занимает обе.
   Одно поле в половину ширины рядом с полем во всю выглядело бы обрывком,
   поэтому сайт тоже во всю ширину и стоит вторым: сначала цифра, ради
   которой человек пришёл, потом необязательное. */
.dg-f.dg-site{grid-column:1 / -1}
.dg-f.dg-site label{color:var(--stone)}
.dg-f-note{color:var(--ash);font-size:.86rem;line-height:1.45}

/* Кант поля выручки восстановлен. Базовые стили задавали ему 1.5px чернилами
   («выручка выделена не свечением, а кантом»), но общее правило input в этом
   же файле шло с !important и молча стирало выделение: на боевой странице
   главное поле формы было обведено тем же невидимым волоском, что и всё
   остальное. Специфичность поднята, чтобы правило не зависело от порядка. */
.dg-meta .dg-f.dg-rev input{border:1.5px solid var(--ink) !important}
.dg-meta .dg-f.dg-rev input:focus{border-color:transparent !important}

/* Строка адреса в печатном отчёте: на экране её нет, поле выше уже видно. */
.print-site{display:none}
@media print{
  .print-site{display:block !important;margin-top:6pt;font-size:10pt;color:#333}
  .print-site b{color:#111;font-weight:600}
}

/* ═══ Нижний закреп убран, правка Дмитрия 21.08 ═══
   Разметка `#totalbar` намеренно оставлена в документе. Причина не в
   осторожности вообще, а в конкретной механике: `updateTotal` пишет цифры в
   `b-loss`, `b-score`, `b-band` и `b-note`. Сейчас `setText` молча пропускает
   отсутствующий узел, но удаление разметки превратило бы обратимую правку слоя
   в правку кода расчёта, а он на этой странице самое дорогое место.
   Призыв не потерян: в теле страницы остаются две кнопки «Отправить результат
   и получить разбор», обе зовут ту же `onCta()`.
   Общий `assets/diag.css` не тронут: на нём живут checklist, profit и raschet. */
.dg-bar{display:none}