/* «Арсенал ИИ» — собственная стилистика взрослого курса.
   Детский курс: неон, мята, игровая энергия.
   Взрослый: графит, янтарь, ощущение рабочего инструмента — сдержанно, плотно, по делу.
   Подключать ПОСЛЕ site.css. */

:root{
  /* графитовая база — холоднее и строже детской */
  --bg:#0C1017; --bg2:#111722; --card:#151C28; --card2:#1A2231;
  --line:#222C3D; --line2:#2E3A4F;
  /* янтарь — главное действие взрослого курса */
  --amber:#E9A23B; --amber-d:#C9832A; --amber-glow:rgba(233,162,59,.2);
  --steel:#7FA6D9;               /* ссылки и пояснения */
  --sage:#5FBF9B;                /* «верно», честный результат */
  --clay:#E0705F;                /* ошибка, подстановка выдумки */
  --white:#EEF2F8; --text:#CFD8E6; --muted:#8B99AD; --dim:#63708A;
  --green:var(--sage);           /* переопределяем токены сайта под курс */
  --blue:var(--steel);
  --gold:var(--amber);
  --red:var(--clay);
}

/* главное действие курса — янтарное */
.btn.primary{background:linear-gradient(180deg,var(--amber),var(--amber-d));color:#20140A;
  box-shadow:0 10px 28px rgba(233,162,59,.24),inset 0 1px 0 rgba(255,255,255,.28);}
.btn.primary:hover{color:#20140A;box-shadow:0 14px 36px rgba(233,162,59,.36);}
.sec-glow::before{background:radial-gradient(closest-side,var(--amber-glow),transparent 72%);}
.kicker::before,.kick::before{background:var(--amber);box-shadow:0 0 10px var(--amber);}
.kicker,.kick{color:var(--amber);}

/* типографика делового курса: плотнее, спокойнее */
body{font-size:17px;line-height:1.68;}
h1{letter-spacing:-.03em;}
h2{letter-spacing:-.025em;}
.lead{font-size:clamp(17px,1.7vw,19.5px);color:var(--text);}

/* ── опорная информация: теория рядом с задачей, а не до неё ── */
.support{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);overflow:hidden;}
.support>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;color:var(--white);background:rgba(233,162,59,.06);}
.support>summary::-webkit-details-marker{display:none;}
.support>summary::before{content:'';width:8px;height:8px;border-right:2px solid var(--amber);
  border-bottom:2px solid var(--amber);transform:rotate(-45deg);transition:transform .18s;flex:0 0 auto;}
.support[open]>summary::before{transform:rotate(45deg);}
.support>summary small{margin-left:auto;color:var(--muted);font-weight:600;font-size:13px;}
.support .support-in{padding:6px 22px 22px;border-top:1px solid var(--line);}
.support h4{font-family:var(--disp);font-size:16px;color:var(--white);margin:20px 0 8px;letter-spacing:-.02em;}
.support p,.support li{color:var(--text);font-size:16px;}

/* ─────────────── тренажёр ─────────────── */
#trainer{margin-top:26px;}

/* рельса стадий петли */
.tr-rail{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tr-stage{display:flex;align-items:center;gap:9px;padding:9px 14px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.02);
  color:var(--dim);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .15s;}
.tr-stage i{font-style:normal;font-family:var(--mono);font-size:12px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.07);}
.tr-stage:hover{border-color:var(--line2);color:var(--text);}
.tr-stage.ok{color:var(--sage);border-color:rgba(95,191,155,.35);}
.tr-stage.ok i{background:rgba(95,191,155,.18);}
.tr-stage.cur{color:#20140A;background:var(--amber);border-color:var(--amber);}
.tr-stage.cur i{background:rgba(0,0,0,.18);}
/* шаги, до которых человек ещё не дошёл: рельса не заперта, но видно, что это
   не «просто вкладка» — порядок шагов здесь часть метода */
.tr-stage.far{opacity:.45;border-style:dashed;}
.tr-stage.far:hover{opacity:.75;}
.tr-railwarn{border:1px dashed var(--line2);border-radius:var(--r-lg);
  padding:14px 16px;margin:-6px 0 16px;background:rgba(255,255,255,.02);}
.tr-railwarn b{display:block;font-size:13px;margin-bottom:4px;color:var(--white);}
.tr-railwarn p{margin:0 0 10px;font-size:15px;color:var(--text);max-width:70ch;}
/* честная подпись у кнопки перехода: шаг открыт, но не засчитан */
.tr-foot-note{margin-left:12px;font-size:13.5px;color:var(--dim);align-self:center;}

.tr-card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line2);
  border-radius:var(--r-lg);padding:clamp(20px,2.8vw,32px);box-shadow:var(--sh);}
.tr-title{font-size:clamp(20px,2.3vw,26px);margin:0 0 14px;}
.tr-intro{color:var(--text);margin:0 0 18px;max-width:72ch;}
.tr-fine{font-size:13.5px;color:var(--dim);margin:8px 0 14px;}

/* рабочая ситуация — как записка от руководителя */
.tr-situation{border-left:3px solid var(--amber);background:rgba(233,162,59,.07);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;font-size:16.5px;line-height:1.6;
  color:var(--white);margin-bottom:16px;}
.tr-task{font-weight:700;color:var(--white);margin:0 0 12px;}

/* выдача «инструмента» — намеренно похожа на окно сервиса */
.tr-tool,.tr-assembled{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--bg);}
.tr-tool-head{padding:10px 16px;background:rgba(127,166,217,.1);border-bottom:1px solid var(--line);
  font:700 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
.tr-tool-body{padding:16px 18px;font-size:15.5px;line-height:1.65;color:var(--text);}
.tr-tool-tag{margin:0 18px 16px;display:inline-block;padding:5px 12px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.tr-tool-tag.ok{background:rgba(95,191,155,.16);color:var(--sage);}
.tr-tool-tag.bad{background:rgba(224,112,95,.16);color:var(--clay);}
.tr-tool-tag.warn{background:rgba(233,162,59,.16);color:var(--amber);}

/* мысли мастера: слева строка решения, справа — почему */
.tr-mine{border:1px dashed var(--line2);border-radius:var(--r);padding:14px 18px;margin-bottom:18px;
  background:rgba(127,166,217,.06);color:var(--text);font-size:15.5px;}
.tr-mine-head{font:800 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px;}
.tr-msol{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:10px;}
.tr-msol-line{padding:16px 18px;background:var(--bg2);display:flex;gap:12px;align-items:flex-start;
  font-size:16px;color:var(--white);line-height:1.55;}
.tr-msol-line i{font-style:normal;font-family:var(--mono);font-size:12px;color:#20140A;background:var(--amber);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px;}
.tr-msol-think{padding:16px 18px;border-left:1px solid var(--line);background:rgba(255,255,255,.015);
  font-size:15px;color:var(--muted);line-height:1.6;}

/* конструктор и дриллы */
.tr-slot{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  background:rgba(255,255,255,.02);margin-bottom:10px;}
.tr-slot-name{font:800 11.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;}
.tr-slot-opts{display:flex;flex-wrap:wrap;gap:8px;}
.tr-chip{padding:11px 15px;min-height:44px;border:1px solid var(--line2);border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:14.5px;cursor:pointer;
  transition:all .14s;text-align:left;}
.tr-chip:hover{border-color:var(--amber);}
.tr-chip.sel{background:var(--amber);border-color:var(--amber);color:#20140A;font-weight:700;}
.tr-chip.sm{font-size:13.5px;padding:9px 13px;min-height:40px;}
.tr-drill{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px;
  background:rgba(255,255,255,.02);}
.tr-drill-q{font-size:15px;color:var(--white);margin-bottom:11px;line-height:1.55;}

/* разбор */
.tr-out{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.tr-note{border-left:3px solid var(--line2);background:rgba(255,255,255,.03);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 16px;}
.tr-note.good{border-left-color:var(--sage);background:rgba(95,191,155,.07);}
.tr-note.warn{border-left-color:var(--clay);background:rgba(224,112,95,.07);}
.tr-note b{display:block;font-size:13px;margin-bottom:4px;color:var(--white);}
.tr-note p{margin:0;font-size:15.5px;color:var(--text);}
.tr-insight{border:1px solid rgba(233,162,59,.32);background:rgba(233,162,59,.07);
  border-radius:var(--r-sm);padding:14px 17px;color:var(--white);font-size:15.5px;margin-top:12px;}
.tr-foot{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
#trainer textarea{margin-bottom:12px;background:var(--bg);}

@media (max-width:760px){
  .tr-msol{grid-template-columns:1fr;}
  .tr-msol-think{border-left:0;border-top:1px solid var(--line);}
  .tr-rail{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none;}
  .tr-rail::-webkit-scrollbar{display:none;}
  .tr-stage{padding:9px 11px;font-size:12px;flex:0 0 auto;}
  .tr-stage span{display:inline;}
  .tr-stage.far span{display:none;}   /* до чего не дошли — только номер */
}

/* оценка уровнем вместо приговора */
.tr-level{border:1px solid var(--line2);border-radius:var(--r);padding:14px 17px;background:var(--bg2);}
.tr-level-name{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.02em;
  text-transform:capitalize;}
.lv-черновой .tr-level-name{color:var(--clay);}
.lv-рабочий .tr-level-name{color:var(--amber);}
.lv-надёжный .tr-level-name{color:var(--sage);}
.tr-level-score{float:right;font:600 13px var(--mono);color:var(--muted);}
.tr-crit{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.tr-crit-i{font-size:12.5px;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line2);}
.tr-crit-i.ok{color:var(--sage);border-color:rgba(95,191,155,.35);background:rgba(95,191,155,.08);}
.tr-crit-i.no{color:var(--dim);}
.tr-note.step{border-left-color:var(--amber);background:rgba(233,162,59,.08);}
.tr-crit-i.full{color:var(--sage);border-color:rgba(95,191,155,.35);background:rgba(95,191,155,.08);}
.tr-crit-i.partial{color:var(--amber);border-color:rgba(233,162,59,.35);background:rgba(233,162,59,.08);}
.tr-was{border:1px dashed var(--line2);border-radius:var(--r);padding:14px 18px;margin-bottom:16px;
  background:rgba(224,112,95,.05);}
.tr-was-q{color:var(--text);font-size:15px;margin-bottom:9px;}
.tr-was-v{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);}
.tr-was-v.bad{background:rgba(224,112,95,.16);color:var(--clay);}
.tr-was-v.ok{background:rgba(95,191,155,.16);color:var(--sage);}

/* ── микротеория: разобранный пример запроса с подсказками ── */
.mt{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);margin-bottom:18px;overflow:hidden;}
.mt-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;min-height:52px;border:0;cursor:pointer;font:inherit;font-weight:700;
  color:var(--white);background:rgba(233,162,59,.07);text-align:left;}
.mt-head i{font-style:normal;font-size:13px;font-weight:600;color:var(--amber);}
.mt-head.open{background:rgba(233,162,59,.12);}
.mt-body{padding:6px 20px 20px;border-top:1px solid var(--line);}
.mt-intro{color:var(--text);margin:14px 0;}
.mt-label{font:800 11.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 10px;}
.mt-struct{display:flex;flex-direction:column;gap:6px;}
.mt-line{position:relative;display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg2);
  transition:border-color .14s,background .14s;}
.mt-line.has-tip{cursor:help;}
.mt-line.has-tip:hover,.mt-line.has-tip:focus{border-color:var(--amber);background:rgba(233,162,59,.06);outline:none;}
.mt-tag{font:800 11px/1.5 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--amber);}
.mt-text{color:var(--white);font-size:15.5px;line-height:1.55;}
.mt-tip{display:none;grid-column:1/-1;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line2);color:var(--muted);font-size:14.5px;line-height:1.6;}
.mt-line.has-tip:hover .mt-tip,.mt-line.has-tip:focus .mt-tip{display:block;}
.mt-copy{margin-top:12px;}
.mt-tips{margin:0;padding-left:20px;color:var(--text);font-size:15px;}
.mt-tips li{margin-bottom:7px;}
.mt-warn{margin-top:16px;padding:12px 15px;border-left:3px solid var(--clay);
  background:rgba(224,112,95,.07);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15px;}
@media(max-width:600px){
  .mt-line{grid-template-columns:1fr;gap:6px;}
  .mt-line.has-tip .mt-tip{display:block;}   /* на телефоне наведения нет — показываем сразу */
}

/* ── «Своя задача — сборщик запроса» (arsenal26): три состояния на одной странице ── */
#bld{margin-top:26px;}
.bld-step[hidden]{display:none;}
.bld-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;}
.bld-actions .tr-fine{margin:0;}
.bld-left{font-size:13.5px;color:var(--muted);}
.bld-left.spent{color:var(--clay);}
.bld-privacy{margin-top:14px;}
.bld-privacy p{font-size:15px;}

/* спокойные плашки вместо alert */
.bld-msg{margin-top:14px;}
.bld-plate{border-left:3px solid var(--line2);background:rgba(255,255,255,.03);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 16px;margin-top:14px;}
.bld-plate.warn{border-left-color:var(--amber);background:rgba(233,162,59,.08);}
.bld-plate.stop{border-left-color:var(--clay);background:rgba(224,112,95,.08);}
.bld-plate b{display:block;font-size:13px;margin-bottom:4px;color:var(--white);}
.bld-plate p{margin:0 0 6px;font-size:15.5px;color:var(--text);}
.bld-plate p:last-child{margin-bottom:0;}
.bld-plate ul,.bld-plate ol{margin:8px 0 0;padding-left:20px;color:var(--text);font-size:15px;}

/* как понята задача */
.bld-understood{border:1px dashed var(--line2);border-radius:var(--r);padding:14px 18px;
  margin-bottom:16px;background:rgba(127,166,217,.06);}
.bld-understood-t{color:var(--white);font-size:16px;line-height:1.6;}
.bld-fix{margin-bottom:18px;}
.bld-fix textarea{margin-bottom:12px;background:var(--bg);}

/* таблица вопросов: слева вопрос и «зачем», справа ответ и пример */
.bld-qs{display:flex;flex-direction:column;gap:10px;}
.bld-q{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--bg2);}
.bld-q-l{padding:15px 18px;min-width:0;}
.bld-q-head{display:flex;gap:11px;align-items:flex-start;color:var(--white);
  font-size:16px;line-height:1.5;}
.bld-q-head i{font-style:normal;font-family:var(--mono);font-size:12px;color:#20140A;
  background:var(--amber);width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px;}
.bld-q-why{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--muted);}
.bld-q-why b{color:var(--steel);font-weight:700;}
.bld-q-r{padding:15px 18px;border-left:1px solid var(--line);
  background:rgba(255,255,255,.015);min-width:0;}
.bld-q-r textarea.bld-q-a{min-height:64px;margin:0;background:var(--bg);font-size:15.5px;}
.bld-q-hint{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--dim);}
.bld-q-hint b{color:var(--dim);font-weight:700;}

/* списки «вручную» / «на повтор» */
.bld-list{display:flex;flex-direction:column;gap:8px;}
.bld-item{border-left:3px solid var(--line2);background:rgba(255,255,255,.03);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 15px;}
.bld-item.warn{border-left-color:var(--clay);background:rgba(224,112,95,.07);}
.bld-item.good{border-left-color:var(--sage);background:rgba(95,191,155,.07);}
.bld-item-t{color:var(--white);font-size:15.5px;line-height:1.5;}
.bld-item-w{margin-top:5px;color:var(--muted);font-size:14.5px;line-height:1.6;}
.bld-cols{margin-top:4px;align-items:start;}
.bld-col{min-width:0;}
.bld-col .mt-label{margin-top:18px;}

/* готовый запрос */
.bld-prompt{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--bg);}
.bld-prompt-t{margin:0;padding:16px 18px;font-family:var(--mono);font-size:14.5px;line-height:1.7;
  color:var(--text);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%;}

/* разбор по строкам: одна колонка, пояснение всегда видно */
.bld-line{grid-template-columns:1fr;gap:8px;cursor:default;}
.bld-line .mt-text{word-break:break-word;overflow-wrap:anywhere;}
.bld-line-why{color:var(--muted);font-size:14.5px;line-height:1.6;
  padding-top:9px;border-top:1px dashed var(--line2);}

/* нумерованные шаги и проверки */
.bld-steps{margin:0;padding-left:22px;color:var(--text);font-size:15.5px;}
.bld-steps li{margin-bottom:8px;}
.bld-foot{margin-top:22px;}

@media (max-width:760px){
  .bld-q{grid-template-columns:1fr;}
  .bld-q-r{border-left:0;border-top:1px solid var(--line);}
  .bld-q-l,.bld-q-r{padding:14px 15px;}
  .bld-actions .btn{width:100%;}
  .bld-left{width:100%;}
}

/* ── Материалы задачи в тренажёре (ревизия 28.07.2026) ───────────────────────
   Раньше данные мира не показывались вообще, и ловушку в числах было не найти. */
.tr-mat{border:1px solid var(--line2);border-radius:12px;margin:16px 0;overflow:hidden;
  background:rgba(255,255,255,.02);}
.tr-mat-head{display:block;width:100%;text-align:left;padding:12px 16px;border:0;cursor:pointer;
  font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--amber);background:rgba(233,162,59,.08);}
.tr-mat-head:hover{background:rgba(233,162,59,.14);}
.tr-mat-body{padding:6px 16px 16px;}
.tr-mat-note{font-size:13.5px;color:var(--dim);margin:10px 0 6px;}
.tr-mat-h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px;}
.tr-mat-t{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--text);
  white-space:pre-wrap;word-break:break-word;margin:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18);
  max-height:420px;overflow:auto;}
@media(max-width:600px){.tr-mat-t{font-size:11.5px;max-height:320px;}}

/* ── Живая демонстрация /demo (28.07.2026) ──────────────────────────────────
   Модель работает по-настоящему, сверку делает код. Отчёт подаём спокойно,
   как выдачу инструмента; красным/зелёным помечаем только результат сверки. */
.dm-plate{margin-top:16px;border-left:3px solid var(--line2);background:rgba(255,255,255,.03);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 16px;}
.dm-plate.warn{border-left-color:var(--amber);background:rgba(233,162,59,.08);}
.dm-plate.stop{border-left-color:var(--clay);background:rgba(224,112,95,.08);}
.dm-plate b{display:block;font-size:13px;margin-bottom:4px;color:var(--white);}
.dm-plate p{margin:0;font-size:15.5px;color:var(--text);}

/* два запроса рядом */
.dm-reqs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;align-items:start;}
.dm-req{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);
  padding:18px 20px;min-width:0;display:flex;flex-direction:column;}
.dm-req-t{font-size:18px;margin:0 0 12px;color:var(--white);}
.dm-req .tr-mat-t{max-height:260px;}
.dm-req-why{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);}
.dm-req-foot{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.dm-wait{font-size:13.5px;color:var(--amber);}
.dm-wait[hidden]{display:none;}

/* один прогон */
.dm-run{border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);
  margin-top:22px;overflow:hidden;}
.dm-run-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);}
.dm-run-n{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--dim);
  text-transform:uppercase;}
.dm-run-l{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--white);}

.dm-report{padding:18px;}
.dm-report-h,.dm-verify-h{font:800 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;}
.dm-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.dm-num{border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.02);
  padding:12px 14px;min-width:0;}
.dm-num-k{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;}
.dm-num-v{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;color:var(--white);word-break:break-word;}
.dm-report-t{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:var(--text);}

.dm-verify{padding:18px;border-top:1px solid var(--line);background:rgba(0,0,0,.16);}
.dm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  border:1px solid var(--line);border-radius:var(--r-sm);}
.dm-tab{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;}
.dm-tab th,.dm-tab td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5;}
.dm-tab thead th{font:800 11px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.03);white-space:nowrap;}
.dm-tab tbody tr:last-child th,.dm-tab tbody tr:last-child td{border-bottom:0;}
.dm-tab-k{color:var(--white);font-weight:700;white-space:nowrap;}
.dm-tab-said,.dm-tab-true{font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--text);}
.dm-tab-note{color:var(--muted);min-width:200px;}
.dm-tab tbody tr.bad{background:rgba(224,112,95,.08);}
.dm-tab tbody tr.bad .dm-tab-said{color:var(--clay);}
.dm-tab tbody tr.bad .dm-tab-true{color:var(--sage);}
.dm-tab tbody tr.ok{background:rgba(95,191,155,.07);}
.dm-tab tbody tr.ok .dm-tab-said,.dm-tab tbody tr.ok .dm-tab-true{color:var(--sage);}
.dm-total{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:var(--text);}
.dm-total.bad{color:var(--clay);}
.dm-total.ok{color:var(--sage);}

@media(max-width:760px){
  .dm-reqs{grid-template-columns:1fr;}
  .dm-nums{grid-template-columns:1fr;}
  .dm-req-foot .btn{width:100%;}
  .dm-report,.dm-verify{padding:15px;}
  .dm-tab{font-size:13.5px;min-width:520px;}
}

/* ── Корпоративный слой: коды, свидетельство, сводка ─────────────────────── */
.corp-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;}
.corp-form .tr-input{flex:1 1 260px;min-width:220px;font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase;}
.corp-steps{counter-reset:cs;list-style:none;padding:0;margin:18px 0 0;
  display:flex;flex-direction:column;gap:14px;}
.corp-steps li{position:relative;padding-left:46px;font-size:15.5px;color:var(--text);}
.corp-steps li::before{counter-increment:cs;content:counter(cs);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:900;font-size:15px;color:var(--amber);
  border:1px solid rgba(233,162,59,.4);background:rgba(233,162,59,.08);}
.corp-sum{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin:18px 0 12px;
  padding:14px 16px;border:1px solid var(--line2);border-radius:12px;
  background:rgba(255,255,255,.02);}
.corp-sum b{font-size:16px;color:var(--white);}
.corp-sum span{font-size:14px;color:var(--muted);}
.corp-cert{margin-top:22px;}
.corp-cert-head{padding:20px 22px;border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,var(--card),var(--card2));}
.corp-cert-org{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);}
.corp-cert-head h2{margin:6px 0 10px;font-size:25px;letter-spacing:-.02em;}
.corp-cert-code{font-family:var(--mono);font-size:13px;color:var(--dim);}
.corp-weak{margin:12px 0 0;padding-left:20px;font-size:14.5px;color:var(--text);}
.corp-weak li{margin-bottom:6px;}
@media print{
  .gdnav,.site-foot,.btn{display:none !important;}
  body{background:#fff !important;color:#111 !important;}
  .corp-cert-head,.corp-sum,.dm-tab{border-color:#bbb !important;background:#fff !important;}
  .corp-cert-head h2,.corp-sum b{color:#111 !important;}
}

/* ═══ карта курса с выбором роли (/map) ═══════════════════════ */
.mp-roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;}
.mp-role{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;
  padding:18px 20px;border:1px solid var(--line2);border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),var(--card2));
  transition:border-color .15s,transform .15s;}
.mp-role:hover{border-color:var(--green);transform:translateY(-2px);}
.mp-role-i{font-size:26px;line-height:1;}
.mp-role-txt{display:block;min-width:0;}
.mp-role-txt b{display:block;font-family:var(--disp);font-size:17px;color:var(--white);
  letter-spacing:-.02em;line-height:1.25;}
.mp-role-who{display:block;font-size:14px;color:var(--muted);margin-top:5px;}
.mp-role-time{grid-column:2;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);}
.mp-role-wide{grid-template-columns:auto 1fr auto;margin-top:10px;}
.mp-role-wide .mp-role-time{grid-column:auto;}
.mp-sep{margin:26px 0 0;font-size:14.5px;color:var(--dim);}

.mp-head{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;
  justify-content:space-between;}
.mp-head-t{min-width:0;}
.mp-head-t h2{margin:0 0 6px;}
.mp-head-who{margin:0;font-size:14.5px;color:var(--muted);}
.mp-change{flex:0 0 auto;}

.mp-steps{display:flex;flex-direction:column;gap:16px;margin-top:26px;}
.mp-step{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  background:linear-gradient(180deg,var(--card),var(--card2));}
.mp-step-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;}
.mp-step-n{font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:.14em;
  color:var(--blue);}
.mp-step-h h3{margin:0;font-size:21px;letter-spacing:-.02em;}
.mp-step-time{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--gold);
  white-space:nowrap;}
.mp-step-note{margin:10px 0 0;font-size:14.5px;color:var(--muted);}
.mp-sub{margin:18px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);}

.mp-items{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px;}
.mp-item{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:baseline;}
.mp-item-b{min-width:0;}
.mp-item-b a{display:inline-block;font-size:15.5px;font-weight:700;color:var(--text);
  letter-spacing:-.01em;}
.mp-item-b a:hover{color:var(--green);}
.mp-item.track .mp-item-b a{color:var(--white);}
.mp-gain{display:block;font-size:14px;color:var(--muted);margin-top:2px;}
.mp-tick{display:inline-block;width:20px;height:20px;line-height:19px;text-align:center;
  border:1px solid var(--line2);border-radius:6px;font-size:12px;color:var(--dim);}
.mp-tick.done{border-color:var(--green);color:var(--green);}
.mp-tick.part{border-color:var(--gold);color:var(--gold);}

.mp-all{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:16px 20px;}
.mp-all>summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:17px;
  color:var(--white);letter-spacing:-.02em;}
.mp-all>summary:hover{color:var(--green);}
.mp-all-in{margin-top:14px;}
.mp-all-in h3{margin:20px 0 8px;font-size:16px;}
.mp-all-in ul{margin:0;padding-left:20px;font-size:14.5px;color:var(--muted);}
.mp-all-in li{margin-bottom:6px;}

@media(max-width:760px){
  .mp-roles{grid-template-columns:1fr;}
  .mp-role,.mp-role-wide{grid-template-columns:auto 1fr;}
  .mp-role-wide .mp-role-time{grid-column:2;}
  .mp-step{padding:18px 16px;}
  .mp-step-time{margin-left:0;flex-basis:100%;}
  .mp-head{align-items:flex-start;}
  .mp-change{width:100%;}
}
.corp-next-h{margin:14px 0 6px;font-weight:800;color:var(--white);font-size:14.5px;}
.corp-next{margin:0 0 14px;padding-left:20px;font-size:14.5px;}
.corp-next li{margin-bottom:5px;}


/* ═══════════ ХАБ КУРСА (/arsenal) — префикс hb- ═══════════
   Ревизия 29.07.2026. У страницы две разные работы, и они оформлены по-разному:
   экран 1 — выбор («куда мне пойти»), поэтому карточки: объём, подсветка, наведение;
   экран 2 — сравнение («как курс устроен»), поэтому таблица: сетка, линии, липкие
   опоры, никакого объёма. Экран 3 — справочник с фильтром. Экран 4 — три плашки. */

/* ── экран 1: входы. Карточки, а не плитки карты ── */
/* Две колонки, а не три. Раньше здесь стояло три: входов было четыре — главный
   во всю ширину и три под ним. Четвёртый («обучить отдел») убран, и в трёхколоночной
   сетке два оставшихся прижимались влево, оставляя пустую треть справа. */
.hb-entries{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px;}
.hb-entry{grid-column:span 1;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
  align-items:start;padding:22px 22px 18px;
  border:1px solid var(--line2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:var(--sh-sm);
  transition:border-color .15s,transform .15s,box-shadow .15s;}
.hb-entry:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--sh);}
.hb-e-i{grid-row:1/3;font-size:26px;line-height:1.1;width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:14px;
  border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--amber);}
.hb-e-txt{display:block;min-width:0;}
.hb-entry b{display:block;font-family:var(--disp);font-size:18px;line-height:1.28;
  color:var(--white);letter-spacing:-.02em;}
.hb-e-d{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--muted);}
.hb-e-go{grid-column:2;align-self:end;padding-top:14px;
  font-size:13.5px;font-weight:800;color:var(--amber);}
.hb-entry:hover .hb-e-go{color:var(--white);}

/* главный вход — живая демонстрация: во всю ширину, ярче, первым.
   Внутри своя раскладка: значок · текст · призыв справа по центру. Так широкая
   карточка не выглядит растянутым вариантом узкой, а призыв не уезжает
   в дальний нижний угол, куда взгляд приходит последним. */
.hb-entry-main{grid-column:1/-1;border-color:rgba(233,162,59,.5);
  background:linear-gradient(180deg,rgba(233,162,59,.1),var(--card2));
  box-shadow:0 14px 40px rgba(233,162,59,.12);
  grid-template-columns:auto 1fr auto;align-items:center;gap:0 22px;
  padding:24px 26px;}
.hb-entry-main .hb-e-i{grid-row:auto;background:var(--amber);color:#20140A;
  border-color:var(--amber);font-size:22px;width:54px;height:54px;border-radius:16px;}
.hb-entry-main .hb-e-txt{grid-column:2;}
.hb-entry-main b{font-size:22px;}
.hb-entry-main .hb-e-d{font-size:15.5px;max-width:62ch;margin-top:8px;}
.hb-entry-main .hb-e-go{grid-column:3;align-self:center;padding-top:0;white-space:nowrap;
  border:1px solid rgba(233,162,59,.55);border-radius:999px;padding:11px 20px;
  background:rgba(233,162,59,.1);transition:background .15s,color .15s;}
.hb-entry-main:hover .hb-e-go{background:var(--amber);color:#20140A;}

.hb-sub{margin-top:16px;font-size:14px;color:var(--dim);}
.hb-sub a{color:var(--steel);}

/* ── экран 2: карта. Оформлена таблицей, а не набором карточек ── */
.hb-legend{font-size:14.5px;color:var(--muted);margin:0 0 16px;max-width:78ch;}
.hb-legend b{color:var(--text);font-weight:700;}
.hb-legend a{color:var(--steel);}

.hb-map{display:grid;grid-template-columns:236px repeat(4,minmax(190px,1fr));
  min-width:996px;}

/* шапка уровней держится наверху контейнера */
.hb-head{position:sticky;top:0;z-index:3;padding:11px 14px 10px;
  background:var(--bg2);border-bottom:1px solid var(--line2);}
.hb-head b{display:block;font-family:var(--disp);font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber);}
.hb-head span{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--dim);}
.hb-corner{left:0;z-index:4;border-right:1px solid var(--line2);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);}

.hb-row{display:contents;}
.hb-cells{display:contents;}

/* первая колонка держится слева при прокрутке вбок */
.hb-dir{position:sticky;left:0;z-index:2;list-style:none;cursor:default;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:14px 14px;border-left:3px solid var(--amber);
  border-right:1px solid var(--line2);border-bottom:1px solid var(--line);}
.hb-dir::-webkit-details-marker{display:none;}
.hb-dir b{font-family:var(--disp);font-weight:800;font-size:15.5px;line-height:1.22;
  color:var(--white);letter-spacing:-.02em;}
.hb-dir-why{font-size:12.8px;line-height:1.45;color:var(--muted);}
.hb-dir-go{margin-top:2px;font-size:12.5px;font-weight:800;color:var(--steel);
  align-self:flex-start;}
.hb-dir-go:hover{color:var(--amber);}

.hb-cell{display:flex;flex-direction:column;gap:5px;padding:13px 14px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.hb-cells .hb-cell:last-child{border-right:0;}

/* заметное чередование строк — иначе глаз теряет строку */
.hb-row .hb-dir,.hb-row .hb-cell{background:var(--bg2);}
.hb-row:nth-of-type(even) .hb-dir,.hb-row:nth-of-type(even) .hb-cell{background:var(--card);}
.hb-cell:hover{background:var(--card2);}

.hb-c-main{display:block;color:var(--text);}
.hb-c-main b{display:block;font-size:14.5px;line-height:1.3;color:var(--white);
  letter-spacing:-.01em;}
.hb-c-main span{display:block;margin-top:4px;font-size:12.8px;line-height:1.45;color:var(--muted);}
.hb-c-main:hover b{color:var(--amber);}

/* постепенное раскрытие: остальные тренажёры клетки — по нажатию, внутри клетки */
.hb-tr{margin-top:auto;padding-top:9px;}
.hb-tr>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  padding:4px 11px;border:1px solid var(--line2);border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;color:var(--steel);background:rgba(255,255,255,.02);}
.hb-tr>summary::-webkit-details-marker{display:none;}
.hb-tr>summary::after{content:'';width:5px;height:5px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .16s;}
.hb-tr[open]>summary::after{transform:rotate(-135deg) translateY(-1px);}
.hb-tr>summary:hover,.hb-tr>summary:focus-visible{color:var(--white);border-color:var(--steel);}
.hb-tr ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.hb-tr li{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:baseline;
  font-size:12.5px;line-height:1.4;}
.hb-tr li a{color:var(--steel);}
.hb-tr li a:hover{color:var(--amber);}

/* ── экран 3: справочник с фильтром по трекам ── */
.hb-all{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:16px 20px;margin-top:8px;}
.hb-all>summary{cursor:pointer;font-family:var(--disp);font-weight:800;font-size:16.5px;
  color:var(--white);letter-spacing:-.02em;}
.hb-all>summary:hover{color:var(--amber);}
.hb-all-in{margin-top:12px;}
.hb-filter{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:6px;margin-bottom:6px;
  border-bottom:1px solid var(--line);}
.hb-f{padding:8px 13px;min-height:38px;border:1px solid var(--line2);border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);color:var(--muted);font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .14s;}
.hb-f:hover{border-color:var(--amber);color:var(--text);}
.hb-f.on{background:var(--amber);border-color:var(--amber);color:#20140A;}
.hb-grp[hidden]{display:none;}
.hb-all-in h3{margin:20px 0 8px;font-size:15.5px;}
.hb-all-in h3 a{color:var(--white);}
.hb-all-in h3 a:hover{color:var(--amber);}
.hb-all-in ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
/* строка справочника: код фиксированной ширины, дальше название и уточнение
   в одну строку. Раньше здесь была сетка из двух колонок, и уточнение —
   третий по счёту элемент — падало на новую строку столбцом */
.hb-all-in li{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;
  font-size:14.5px;color:var(--muted);}
.hb-all-in li>.hb-code{flex:0 0 44px;}
.hb-code{font-family:var(--mono);font-size:12px;color:var(--dim);}
/* уточнение идёт за названием в той же строке. Без обёртки текстовый узел
   становился третьим элементом сетки и падал на новую строку столбцом */
.hb-ref-w{font-style:normal;font-size:13px;color:var(--dim);}
.hb-ref-w::before{content:'— ';}

/* ── экран 4: три плашки ── */
.hb-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;}
.hb-fact{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  background:var(--card);}
.hb-fact b{display:block;font-family:var(--disp);font-size:16px;color:var(--white);
  letter-spacing:-.02em;margin-bottom:6px;}
.hb-fact p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55;}

/* ── планшет ── */
@media(max-width:1080px){
  .hb-entries{grid-template-columns:1fr 1fr;}
  .hb-facts{grid-template-columns:1fr;}
}

/* ── телефон: таблицу таблицей не показываем — карта складывается по направлениям ── */
@media(max-width:860px){
  .hb-entries{grid-template-columns:1fr;}
  .hb-entry{padding:18px 17px 15px;}
  .hb-entry-main b{font-size:19px;}
  /* главный вход на телефоне складывается обратно в столбик: призыв справа
     от текста на узком экране даёт две тесные колонки */
  .hb-entry-main{grid-template-columns:auto 1fr;align-items:start;padding:20px 18px 17px;}
  .hb-entry-main .hb-e-i{grid-row:1/3;width:46px;height:46px;font-size:20px;}
  .hb-entry-main .hb-e-go{grid-column:2;align-self:start;justify-self:start;
    margin-top:14px;padding:10px 18px;}
  .hb-map{display:flex;flex-direction:column;gap:10px;min-width:0;}
  .hb-head{display:none;}
  .hb-row{display:block;border:1px solid var(--line);border-radius:var(--r);
    background:var(--card);overflow:hidden;}
  .hb-dir{position:relative;cursor:pointer;border-right:0;border-bottom:0;border-radius:0;
    padding:14px 38px 14px 15px;}
  .hb-dir::after{content:'';position:absolute;right:15px;top:20px;width:8px;height:8px;
    border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
    transform:rotate(45deg);transition:transform .18s;}
  .hb-row[open] .hb-dir::after{transform:rotate(-135deg);}
  .hb-cells{display:flex;flex-direction:column;gap:8px;padding:4px 12px 14px;}
  .hb-cell{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;}
  .hb-row .hb-cell,.hb-row:nth-of-type(even) .hb-cell{background:var(--bg2);}
  .hb-row .hb-dir,.hb-row:nth-of-type(even) .hb-dir{background:rgba(233,162,59,.06);}
  .hb-tr{margin-top:6px;}
}

/* ═══════ КАРТА-ДОРОЖКИ: линии, узлы, прогресс (правка 29.07.2026) ═══════
   Дописано в конец намеренно: перекрывает базовые правила карты выше.
   Значок кодирует ТОЛЬКО состояние прогресса — тип материала пишется словом.
   Линии рисуют порядок уровней внутри направления и ничего больше:
   вертикальных связей между направлениями в курсе нет. */

/* карта живёт шире текста — четыре колонки должны читаться без прищура */
.hb-wide{max-width:1400px;}

/* ── сетка ── */
.hb-map{grid-template-columns:260px repeat(4,minmax(220px,1fr));min-width:1160px;}
.hb-cell{gap:6px;padding:14px 14px 15px;}

/* ── узел состояния. Чистый CSS, никаких картинок ── */
.hb-node{box-sizing:border-box;width:17px;height:17px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line2);background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
.hb-node.is-started{border-color:var(--amber);}
.hb-node.is-started::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--amber);}
.hb-node.is-done{background:var(--amber);border-color:var(--amber);}
.hb-node.is-done::after{content:'✓';font-family:var(--body);font-size:10px;font-weight:800;
  line-height:1;color:#20140A;}
.hb-node-s{width:13px;height:13px;border-width:1.5px;}
.hb-node-s.is-started::after{width:5px;height:5px;}
.hb-node-s.is-done::after{font-size:8px;}

/* ── дорожка: сквозная линия через четыре клетки ── */
.hb-track{position:relative;display:flex;align-items:center;height:20px;
  margin:-3px -14px 5px;padding:0 14px;}
.hb-track::before{content:'';position:absolute;left:0;right:0;top:50%;margin-top:-1px;
  height:2px;background:var(--line2);}
.hb-cells .hb-cell:first-child .hb-track::before{left:22px;border-radius:2px 0 0 2px;}
.hb-cells .hb-cell:last-child .hb-track::before{right:22px;border-radius:0 2px 2px 0;}
.hb-track>.hb-node{position:relative;z-index:1;}
.hb-cell.is-done>.hb-track::before{background:var(--amber);}
.hb-cell.is-started>.hb-track::before{
  background:linear-gradient(90deg,var(--amber) 0 45%,var(--line2) 55% 100%);}

/* ── подпись типа материала: то, что можно сказать словами, значком не кодируем ── */
.hb-c-kind{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim);}
/* ритм «серое → тёплое» слева направо совпадает со смыслом «теория → практика» */
.hb-c-kind-p{color:var(--amber-d);}
/* код — служебная метка, а не часть названия: моноширинный и приглушённый */
.hb-c-main b .hb-c-code{display:inline;font-family:var(--mono);font-size:11.5px;
  font-weight:400;letter-spacing:.06em;color:var(--dim);margin-right:7px;}
.hb-c-main:hover b .hb-c-code{color:var(--amber-d);}
.hb-c-d{display:block;margin-top:4px;font-size:12.8px;line-height:1.45;color:var(--muted);}

/* ── состав клетки видимыми чипами вместо свёрнутых details ── */
.hb-chips{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:9px;}
.hb-chip{display:grid;grid-template-columns:auto 32px 1fr;gap:7px;align-items:center;
  min-height:30px;padding:5px 10px 5px 7px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:rgba(255,255,255,.02);
  font-size:12px;line-height:1.3;color:var(--steel);}
.hb-chip:hover{border-color:var(--amber);color:var(--white);background:rgba(233,162,59,.07);}
.hb-chip-c{font-family:var(--mono);font-size:10.5px;color:var(--dim);}
.hb-chip-t{min-width:0;}

/* ── счётчик направления в первой колонке ── */
.hb-dir-prog{display:flex;flex-direction:column;gap:5px;margin-top:7px;}
.hb-dir-prog[hidden]{display:none;}
.hb-dir-num{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--amber);}
.hb-dir-bar{display:block;height:3px;border-radius:2px;background:var(--line2);overflow:hidden;}
.hb-dir-bar>i{display:block;height:100%;width:0;border-radius:2px;background:var(--amber);}

/* обязательная строка помечена цветом и словом — отдельная сноска не нужна */
.hb-must{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--clay);padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid rgba(224,112,95,.6);background:rgba(224,112,95,.16);}
.hb-row-must>.hb-dir{border-left-color:var(--clay);}

/* ── общая полоса. Скрыта целиком, пока прогресса нет ── */
.hb-total{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 16px;
  padding:12px 16px;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);}
.hb-total[hidden]{display:none;}
.hb-total-num{font-family:var(--mono);font-size:13px;color:var(--white);}
.hb-total-bar{flex:1 1 200px;min-width:150px;height:6px;border-radius:3px;
  background:var(--line2);overflow:hidden;}
.hb-total-bar>i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--amber-d),var(--amber));}
.hb-total-go{font-weight:800;font-size:13.5px;color:var(--amber);}
.hb-total-go:hover{color:var(--white);}
.hb-total-go[hidden]{display:none;}

/* ── легенда узлов под картой, одной строкой ── */
.hb-keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:14px 0 0;
  font-size:13.5px;color:var(--muted);}
.hb-key{display:inline-flex;align-items:center;gap:8px;}
.hb-key-x a{color:var(--steel);}
.hb-key-x a:hover{color:var(--amber);}

/* ── блок «дальше» внизу страниц курса: ровно две ссылки ── */
.hb-nx{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.hb-nx-a{flex:1 1 260px;display:flex;flex-direction:column;gap:5px;padding:15px 18px;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--card);
  color:var(--text);transition:border-color .15s,transform .15s;}
.hb-nx-a:hover{border-color:var(--amber);transform:translateY(-2px);}
.hb-nx-main{border-color:rgba(233,162,59,.45);}
.hb-nx-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);}
.hb-nx-t{font-family:var(--disp);font-weight:800;font-size:16px;line-height:1.3;
  color:var(--white);letter-spacing:-.02em;}

/* ── телефон: дорожка становится вертикальной, узлы слева ── */
@media(max-width:860px){
  .hb-wide{max-width:none;}
  .hb-map{min-width:0;}
  .hb-cells{padding:6px 12px 14px 40px;}
  .hb-cell{position:relative;}
  .hb-cell::before{content:'';position:absolute;left:-18px;top:-8px;bottom:-8px;
    width:2px;background:var(--line2);}
  .hb-cells .hb-cell:first-child::before{top:8px;}
  .hb-cells .hb-cell:last-child::before{bottom:8px;}
  .hb-cell.is-done::before{background:var(--amber);}
  .hb-cell.is-started::before{
    background:linear-gradient(180deg,var(--amber) 0 45%,var(--line2) 55% 100%);}
  .hb-track{position:absolute;left:-26px;top:12px;height:auto;width:auto;
    margin:0;padding:0;z-index:1;}
  .hb-track::before{display:none;}
  .hb-cells .hb-cell:first-child .hb-track::before,
  .hb-cells .hb-cell:last-child .hb-track::before{display:none;}
  .hb-chip{grid-template-columns:auto 32px 1fr;}
}

/* ═══════ РОАДМАП КАРТЫ (правка 29.07.2026) ═══════════════════════════
   Было — таблица: общие границы клеток, шапка колонок, липкая первая
   колонка. Стало — холст со свободными карточками и связями-линиями.
   Дописано в самый конец намеренно: перекрывает всё, что выше.
   Линии внутри ветки рисует hub.js в слое <svg>; CSS отвечает только за
   то, чтобы карточки стояли поверх линий и были непрозрачными.
   Дальше по файлу правил карты нет — этот блок последний. */

.hb-wide{max-width:1460px;}
.hb-legend{max-width:78ch;}

/* ── холст: полотно во всю ширину окна, едет только вбок ──
   Не коробка с рамкой и внутренним вертикальным скроллом: вертикально
   страница просто становится длиннее, вбок полотно тянут мышью. Свою полосу
   прокрутки прячем — положение показывает .hb-pos под картой. */
.hb-stage{position:relative;}
.hb-canvas{position:relative;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/26px 26px,
    var(--bg);}
.hb-canvas::-webkit-scrollbar{display:none;}
.hb-canvas:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
/* перетаскивание включает скрипт, только если в системе есть мышь */
.hb-canvas.is-draggable{cursor:grab;}
.hb-canvas.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;}

/* шторки у краёв: показывают, что полотно продолжается. Зажигает hub.js */
.hb-fade{position:absolute;top:0;bottom:0;width:56px;pointer-events:none;
  opacity:0;transition:opacity .2s;z-index:2;}
.hb-fade-l{left:0;background:linear-gradient(90deg,var(--bg),rgba(0,0,0,0));}
.hb-fade-r{right:0;background:linear-gradient(270deg,var(--bg),rgba(0,0,0,0));}
.hb-fade.is-on{opacity:1;}

/* где мы на полотне: бегунок шириной с видимый кусок */
.hb-pos{height:3px;border-radius:2px;background:var(--line2);margin-top:14px;}
.hb-pos>i{display:block;height:100%;border-radius:2px;background:var(--amber);}
.hb-pos[hidden]{display:none;}

.hb-map{--rm-c1:250px;--rm-gap:46px;
  position:relative;display:flex;flex-direction:column;gap:30px;
  width:max-content;min-width:100%;margin:0 auto;
  padding:24px clamp(16px,4vw,48px) 40px;background:none;}

/* слой связей — под карточками, кликам не мешает */
.hb-lines{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;}
.hb-ln{fill:none;stroke:var(--line2);stroke-width:2;stroke-linecap:round;}
.hb-ln-started{stroke:rgba(233,162,59,.5);}
.hb-ln-done{stroke:var(--amber);}
.hb-ln-tw{stroke-width:1.6;stroke:var(--line2);}         /* ответвление к тренажёру */
.hb-ln-cross{stroke:var(--steel);stroke-width:1.5;stroke-dasharray:5 6;opacity:.75;}
.hb-lbl{fill:var(--steel);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;}

/* ── ветка: метка слева, узлы по порядку вправо ──
   Сетку вешаем на .hb-cells, а метку кладём слева абсолютом. Так layout не
   зависит от того, заворачивает ли браузер содержимое <details> в служебную
   обёртку ::details-content (Chrome 131+) — display:contents там ненадёжен. */
.hb-row{display:block;position:relative;z-index:1;
  border:0;border-radius:0;background:none;overflow:visible;}
/* колонок ровно столько, сколько узлов в ветке: ветка другой длины
   раскладку не ломает */
.hb-cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,280px);
  column-gap:var(--rm-gap);align-items:start;min-height:120px;
  margin-left:calc(var(--rm-c1) + var(--rm-gap));padding:0;}
.hb-row .hb-dir,.hb-row .hb-cell,
.hb-row:nth-of-type(even) .hb-dir,.hb-row:nth-of-type(even) .hb-cell{background:none;}

/* метка направления: кружок с символом и название */
.hb-dir{position:absolute;left:0;top:0;width:var(--rm-c1);
  list-style:none;cursor:default;display:flex;gap:13px;
  align-items:flex-start;padding:12px 6px 0 0;border:0;background:none;}
.hb-dir::-webkit-details-marker{display:none;}
.hb-dir-badge{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;color:var(--steel);
  /* нейтральные: семь одинаковых янтарных кружков забирали внимание там, где
     ничего не происходит. Цвет оставлен обязательной ветке, прогрессу и
     капстоуну — то есть тому, что действительно требует взгляда */
  border:1.5px solid var(--line2);background:var(--bg2);}
.hb-dir-txt{display:flex;flex-direction:column;gap:5px;min-width:0;}
.hb-row-must>.hb-dir .hb-dir-badge{color:var(--clay);border-color:rgba(224,112,95,.55);
  background:radial-gradient(circle at 32% 26%,rgba(224,112,95,.2),rgba(224,112,95,.04)),var(--bg2);
  box-shadow:0 0 0 6px rgba(224,112,95,.05);}
.hb-row-must>.hb-dir{border-left:0;}
.hb-must{align-self:flex-start;}

/* ── узел уровня: карточка на холсте ── */
.hb-cell{display:flex;flex-direction:column;gap:9px;padding:0;border:0;
  position:relative;z-index:1;}
.hb-cell:hover{background:none;}
.hb-card{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:14px 15px 13px 17px;border:1px solid var(--line2);border-radius:14px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:border-color .15s,transform .15s,box-shadow .15s;}
.hb-card:hover{border-color:rgba(233,162,59,.5);transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.38);}
/* пройденное — фон, начатое — фигура: вернувшийся должен находить не то,
   что уже сделал, а то, на чём остановился */
.hb-cell.is-done>.hb-card{border-color:rgba(233,162,59,.25);}
.hb-cell.is-started>.hb-card{border-color:rgba(233,162,59,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 1px rgba(233,162,59,.2);}
.hb-card-cap{border-color:rgba(233,162,59,.5);
  box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 1px rgba(233,162,59,.3),
             0 0 24px rgba(233,162,59,.12);}
/* обязательная ветка отличается по всей длине, а не только подписью */
.hb-row-must .hb-card{border-left:2px solid rgba(224,112,95,.4);}
.hb-cap-pill{align-self:flex-start;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid rgba(233,162,59,.5);background:rgba(233,162,59,.1);}

/* узел состояния сидит на левой кромке карточки — линия ветки входит в него */
.hb-card>.hb-track{position:absolute;left:-9px;top:16px;z-index:2;
  display:block;width:auto;height:auto;margin:0;padding:0;}
.hb-card>.hb-track::before{display:none;}
.hb-node{background:var(--bg2);}

/* ── ответвление к тренажёрам: чипы под карточкой со сдвигом вправо ── */
.hb-chips{display:flex;flex-direction:column;gap:6px;margin:0 0 0 34px;padding-top:2px;}
.hb-chip{background:var(--card);border-color:var(--line2);}
.hb-chip:hover{background:rgba(233,162,59,.1);}
/* словесная пометка перекрёстной связи: видна, пока линий нет */
.hb-cross-w{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--steel);
  white-space:nowrap;}
.hb-map.has-lines .hb-cross-w{display:none;}

/* ── подсказка про перетаскивание ── */
.hb-hint{display:flex;align-items:center;gap:7px;margin:10px 0 0;
  font-size:12.5px;color:var(--dim);}
.hb-hint[hidden]{display:none;}
.hb-hint::before{content:'⇔';color:var(--steel);font-size:14px;}

/* ── узкий экран: роадмап складывается в вертикальные ветки ── */
@media(max-width:860px){
  .hb-wide{max-width:none;}
  .hb-canvas{overflow:visible;background:none;cursor:auto;}
  .hb-map{display:flex;flex-direction:column;gap:12px;
    width:auto;min-width:0;margin:0;padding:0;}
  .hb-lines,.hb-hint,.hb-fade,.hb-pos{display:none;}

  .hb-row{display:block;border:1px solid var(--line);border-radius:var(--r);
    background:var(--card);overflow:hidden;}
  .hb-dir{position:relative;width:auto;cursor:pointer;padding:14px 38px 14px 15px;
    background:rgba(233,162,59,.06);}
  .hb-dir-badge{width:38px;height:38px;font-size:17px;box-shadow:none;}
  .hb-dir::after{content:'';position:absolute;right:15px;top:22px;width:8px;height:8px;
    border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
    transform:rotate(45deg);transition:transform .18s;}
  .hb-row[open] .hb-dir::after{transform:rotate(-135deg);}

  /* линия ветки становится вертикальной — чистый CSS, без svg */
  .hb-cells{display:flex;flex-direction:column;gap:14px;position:relative;
    margin-left:0;min-height:0;padding:10px 13px 16px 32px;}
  .hb-cells::before{content:'';position:absolute;left:13px;top:2px;bottom:18px;
    width:2px;border-radius:2px;background:var(--line2);}
  .hb-cell{position:relative;padding:0;border:0;}
  .hb-card{padding:12px 13px;box-shadow:none;}
  .hb-card::before{content:'';position:absolute;left:-8px;top:21px;width:8px;height:2px;
    background:var(--line2);}
  .hb-card>.hb-track{left:-25px;top:14px;}
  .hb-chips{position:relative;margin-left:18px;padding-top:8px;}
  .hb-chips::before{content:'';position:absolute;left:-9px;top:0;bottom:14px;width:2px;
    border-radius:2px;background:var(--line);}
}

/* ── ПРИЁМКА и ПРАВКА: новые типы упражнений ─────────────────────────── */
.tr-check{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin:7px 0;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  cursor:pointer;font-size:15px;line-height:1.45;}
.tr-check:hover{border-color:var(--line2);}
.tr-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--amber);}
.tr-sub{margin:18px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);}
.tr-verdicts{display:flex;gap:9px;flex-wrap:wrap;}
.tr-spot{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:10px 0;
  background:rgba(255,255,255,.02);}
.tr-spot-was{font-family:var(--mono);font-size:13.5px;color:var(--red,#e2685f);
  margin-bottom:6px;line-height:1.5;}
.tr-spot-hint{font-size:13.5px;color:var(--muted);margin-bottom:9px;}
.tr-spot textarea{width:100%;min-height:52px;}

/* ══════════ ГЛАВНЫЙ ТРЕК В КАРТЕ ══════════
   «Среда» стоит последней строкой и должна читаться как вершина карты,
   а не как ещё одно направление. Свечение изумрудное: в палитре курса
   зелёный уже значит «верно, проверено», поэтому оно к месту. */
:root{ --emerald:#3FE0A8; --emerald-d:#1FA97B; --emerald-glow:rgba(63,224,168,.30); }

/* Метка направления в этой раскладке абсолютная (см. .hb-dir выше) —
   position НЕ трогаем, иначе ветка съедет вниз. Рамку кладём отдельным
   слоем ::before: скруглённая, со свечением, под текстом. */
.hb-row-hero .hb-dir{ padding:12px 14px 14px 12px; }
.hb-row-hero .hb-dir::before{
  content:'';position:absolute;inset:2px 0 -2px 0;pointer-events:none;z-index:0;
  border:1px solid rgba(63,224,168,.40);
  border-radius:var(--r);
  background:
    radial-gradient(130% 150% at 0% 50%, rgba(63,224,168,.12), rgba(63,224,168,0) 72%),
    linear-gradient(180deg, rgba(63,224,168,.055), rgba(63,224,168,.015));
  box-shadow:0 0 20px -10px var(--emerald-glow), inset 0 0 26px -18px var(--emerald);
}
.hb-row-hero .hb-dir-badge,
.hb-row-hero .hb-dir-txt{ position:relative; z-index:1; }
.hb-row-hero .hb-dir b{
  color:#EAFFF7;
  text-shadow:0 0 22px rgba(63,224,168,.45);
}
.hb-row-hero .hb-dir-why{ color:#B7D8CC; }
.hb-row-hero .hb-dir-badge{
  color:var(--emerald);
  border-color:rgba(63,224,168,.5);
  background:radial-gradient(circle at 32% 26%,rgba(63,224,168,.18),rgba(63,224,168,.03)),var(--bg2);
  box-shadow:0 0 0 6px rgba(63,224,168,.05), 0 0 18px -6px var(--emerald-glow);
  font-size:19px;
}

/* ярлык «Главный трек» — мигает мягко, чтобы тянуть взгляд вниз карты */
.hb-flag{
  align-self:flex-start;
  font-family:var(--disp);font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:#06231A;background:linear-gradient(180deg,var(--emerald),var(--emerald-d));
  padding:3px 9px;border-radius:var(--r-pill);
  box-shadow:0 0 18px -2px var(--emerald-glow);
  animation:hbFlagPulse 3.4s ease-in-out infinite;
}
@keyframes hbFlagPulse{
  0%,100%{ box-shadow:0 0 14px -3px var(--emerald-glow); }
  50%    { box-shadow:0 0 26px 1px var(--emerald-glow); }
}

/* ячейки строки: изумрудные узлы линии и подсветка при наведении */
.hb-row-hero .hb-cell{ border-bottom-color:rgba(63,224,168,.16); }
.hb-row-hero .hb-cell:hover{ background:rgba(63,224,168,.07); }
.hb-row-hero .hb-node{ border-color:rgba(63,224,168,.55);
  box-shadow:0 0 12px -2px var(--emerald-glow); }
.hb-row-hero .hb-node.is-started{ border-color:var(--emerald); }
.hb-row-hero .hb-node.is-started::after{ background:var(--emerald); }
.hb-row-hero .hb-node.is-done{ background:var(--emerald); border-color:var(--emerald); }
.hb-row-hero .hb-node.is-done::after{ color:#06231A; }
.hb-row-hero .hb-track::before{ background:rgba(63,224,168,.32); }
.hb-row-hero .hb-cell.is-done>.hb-track::before{ background:var(--emerald); }
.hb-row-hero .hb-cell.is-started>.hb-track::before{
  background:linear-gradient(90deg,var(--emerald) 0 45%,rgba(63,224,168,.32) 55% 100%); }
.hb-row-hero .hb-c-main b{ color:#F2FFFA; }
.hb-row-hero .hb-c-kind{ color:rgba(63,224,168,.75); }
.hb-row-hero .hb-c-kind-p{ color:var(--emerald); }

@media (max-width:900px){
  .hb-row-hero{ border-color:rgba(63,224,168,.38);
    box-shadow:0 0 30px -12px var(--emerald-glow); }
  .hb-row-hero .hb-dir::before{ inset:6px 8px; border-radius:var(--r-sm); }
}
@media (prefers-reduced-motion:reduce){
  .hb-flag{ animation:none; }
}

/* тот же трек в справочном списке внизу карты */
.hb-grp-hero h3 a{ color:#EAFFF7; text-shadow:0 0 18px rgba(63,224,168,.35); }
.hb-grp-hero{ border-left:2px solid rgba(63,224,168,.45); padding-left:12px; }
.hb-grp-hero .hb-code{ color:var(--emerald); }