/* ДНЖ · днж-практики.рф · обучение (assets/tutorial/tutorial.css)
   Визуал по макетам «Помощник рядом» (М1–М14). Цвета и шрифт берутся из tokens.css сайта.
   Всё под префиксом .dt- и живёт поверх сайта: если папку tutorial не подключать, сайт не меняется. */

:root{ --dt-dim:rgba(33,2,48,.56); --dt-ease:cubic-bezier(.2,.8,.2,1); --dt-z:9000; }

/* ---------- кнопка-помощник (К1) ---------- */
/* кнопка-помощник в правом нижнем углу. Пока обучение не идёт, она под окнами сайта (панели, карточки Премии) и не мешает им */
.dt-helper{position:fixed; z-index:60; bottom:28px; right:28px; translate:0 0;
  width:56px; height:56px; border-radius:50%; background:#fff; border:3px solid var(--violet); color:var(--violet);
  display:inline-flex; align-items:center; justify-content:center; font:800 26px/1 var(--font); cursor:pointer;
  box-shadow:var(--shadow-lift); transition:opacity .7s ease, background .2s ease, color .2s ease, transform .2s var(--dt-ease), translate .5s cubic-bezier(.45,.05,.25,1); padding:0}
.dt-helper:hover, .dt-helper:focus-visible{background:var(--violet); color:#fff; opacity:1 !important; outline:none}
.dt-helper .dt-hlabel{position:absolute; right:68px; top:50%; transform:translate(6px,-50%); opacity:0; pointer-events:none;
  background:#fff; color:var(--violet); border:1.5px solid #E2D5EC; font:700 14px/1.2 var(--font); border-radius:10px; padding:8px 10px;
  white-space:nowrap; box-shadow:var(--shadow); transition:opacity .2s ease, transform .24s var(--dt-ease)}
.dt-helper:hover .dt-hlabel{opacity:1; transform:translate(0,-50%)}
.dt-helper.is-left .dt-hlabel{right:auto; left:68px; transform:translate(-6px,-50%)}
.dt-helper.is-left:hover .dt-hlabel{transform:translate(0,-50%)}
.dt-helper.is-off{display:none}
.dt-helper.is-dim{opacity:.3}
/* при смене страницы: быстро гаснет, затем спокойно проявляется (см. tour-engine.js, APPEAR_DELAY) */
.dt-helper.is-away, .dt-helper.is-away:hover{opacity:0 !important; pointer-events:none; transition:opacity .15s ease}
.dt-helper.is-tour{z-index:calc(var(--dt-z) + 20); background:var(--violet); color:#fff; border-color:var(--violet); font-size:22px; box-shadow:0 0 0 4px #fff, 0 8px 22px rgba(20,2,30,.4); opacity:1}
.dt-helper.is-tour .dt-hlabel{display:none}
.dt-helper .dt-ring{position:absolute; inset:-3px; border-radius:50%; border:8px solid rgba(170,130,187,.35); pointer-events:none; opacity:0}
.dt-helper.is-pulse .dt-ring{animation:dt-pulse 2.4s var(--dt-ease) infinite}
.dt-helper.is-pulse .dt-ring + .dt-ring{animation-delay:1.2s}
@keyframes dt-pulse{0%{transform:scale(1); opacity:.55} 100%{transform:scale(1.7); opacity:0}}
.dt-helper.is-bump{animation:dt-bump .36s var(--dt-ease)}
@keyframes dt-bump{50%{transform:scale(1.12)}}

/* ---------- общая карточка-плашка (К2, К3, К10) ---------- */
.dt-card{position:fixed; z-index:calc(var(--dt-z) + 30); width:420px; max-width:calc(100vw - 32px); background:#fff; border-radius:15px;
  box-shadow:var(--shadow-modal); font-family:var(--font); color:var(--ink); text-align:left}
.dt-card *{box-sizing:border-box}
.dt-card .dt-band{position:relative; display:flex; align-items:center; gap:12px; background:var(--violet-l); border-radius:15px 15px 0 0; padding:14px 16px 14px 18px}
.dt-card .dt-num{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--violet);
  color:#fff; font-size:17px; font-weight:800; flex:none}
.dt-card .dt-sec{flex:1; min-width:0; line-height:1.25}
.dt-card .dt-sec b{display:block; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--violet)}
.dt-card .dt-sec span{display:block; font-size:15px; font-weight:600; color:var(--ink-2)}
.dt-card .dt-exit{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #E2D5EC; color:var(--violet);
  border-radius:10px; padding:8px 12px; font:600 13.5px/1.2 var(--font); white-space:nowrap; cursor:pointer}
.dt-card .dt-exit:hover{border-color:var(--violet)}
.dt-card .dt-x{border:0; background:#fff; border-radius:8px; width:36px; height:36px; color:var(--violet); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.dt-card .dt-prog{height:4px; background:var(--line-2)}
.dt-card .dt-prog i{display:block; height:100%; background:linear-gradient(90deg,var(--violet) 0%,var(--orange) 100%); transition:width .48s var(--dt-ease)}
.dt-card .dt-body{padding:22px 24px 24px}
.dt-card .dt-title{font-size:23px; font-weight:700; color:var(--ink); letter-spacing:-.015em; line-height:1.25}
.dt-card .dt-text p{font-size:18px; line-height:1.6; color:var(--ink-2); margin:10px 0 0}
.dt-card .dt-btns{display:flex; gap:10px; margin-top:22px}
.dt-btn{height:52px; border:0; border-radius:10px; padding:0 22px; font:700 16.5px/1 var(--font); cursor:pointer; white-space:nowrap}
.dt-btn.dt-main{flex:1; min-width:0; background:var(--orange); color:#fff; box-shadow:0 2px 6px rgba(255,93,0,.24)}
.dt-card .dt-btns .dt-btn.dt-main{white-space:normal; line-height:1.2; height:auto; min-height:52px; padding:10px 18px}
.dt-btn.dt-main:hover{background:var(--orange-d)}
/* компактная плашка для невысоких экранов */
.dt-card.is-compact .dt-band{padding:10px 14px 10px 16px}
.dt-card.is-compact .dt-num{width:34px; height:34px; font-size:16px}
.dt-card.is-compact .dt-body{padding:16px 20px 18px}
.dt-card.is-compact .dt-title{font-size:20px}
.dt-card.is-compact .dt-text p{font-size:16px; line-height:1.55; margin-top:8px}
.dt-card.is-compact .dt-btns{margin-top:16px}
.dt-card.is-compact .dt-btn{height:46px; font-size:15.5px}
.dt-card.is-compact .dt-btns .dt-btn.dt-main{min-height:46px; padding:8px 16px}
.dt-btn.dt-sec2{background:var(--violet-l); color:var(--violet)}
.dt-btn.dt-sec2:hover{background:#EADDF2}
.dt-btn[disabled]{opacity:.55; cursor:default}
.dt-check{display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:16px; line-height:1.4; color:var(--ink-2); cursor:pointer; user-select:none}
.dt-check input{appearance:none; -webkit-appearance:none; width:22px; height:22px; border:2px solid var(--lavender); border-radius:6px; background:#fff; flex:none; margin:0; cursor:pointer; position:relative}
.dt-check input:checked{background:var(--violet); border-color:var(--violet)}
.dt-check input:checked::after{content:''; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.dt-tail{position:absolute; width:18px; height:18px; transform:rotate(45deg); border-radius:3px; background:#fff}
.dt-card.is-final .dt-band{background:var(--orange-l); padding:14px 18px}
.dt-card.is-final .dt-num{background:var(--orange)}
.dt-card.is-final .dt-sec b{color:#9E3A00}
.dt-card .dt-img{position:relative; margin-top:16px; border-radius:12px; overflow:hidden; border:1.5px solid var(--line); background:var(--bg-2)}
.dt-card .dt-img img{display:block; width:100%; height:auto}
.dt-card .dt-cap{font-size:14.5px; color:var(--mut); margin-top:8px; line-height:1.45}

/* появление и смена плашки */
.dt-card.dt-anim-in{animation:dt-in .26s var(--dt-ease) both}
@keyframes dt-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.dt-card.dt-nudge{animation:dt-nudge .32s var(--dt-ease)}
@keyframes dt-nudge{50%{transform:translateY(-5px)}}

/* меню помощника (К10) */
.dt-menu-list{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.dt-mi{display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1.5px solid #E2D5EC; border-radius:12px; padding:14px 16px; cursor:pointer; font-family:var(--font); width:100%}
.dt-mi:hover{border-color:var(--violet)}
.dt-mi.is-hot{background:var(--grad-veil-orange); border-color:var(--orange-b)}
.dt-mi .dt-mi-t{flex:1; min-width:0}
.dt-mi .dt-mi-t b{display:block; font-size:16.5px; font-weight:700; color:var(--ink)}
.dt-mi .dt-mi-t span{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-2); margin-top:3px}
.dt-mi .dt-go{width:36px; height:36px; border-radius:50%; background:var(--violet-l); color:var(--violet); display:inline-flex; align-items:center; justify-content:center; flex:none}
.dt-mi.is-hot .dt-go{background:var(--orange); color:#fff}
.dt-done{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-b); border-radius:999px; padding:2px 9px}
.dt-chapters{display:none; flex-direction:column; gap:4px; margin:2px 0 4px 10px}
.dt-chapters.open{display:flex}
.dt-chapters button{text-align:left; background:none; border:0; border-left:2px solid var(--line); padding:6px 10px; font:600 15px/1.35 var(--font); color:var(--violet); cursor:pointer}
.dt-chapters button:hover{border-left-color:var(--orange); color:var(--orange-d)}
.dt-linkbtn{background:none; border:0; padding:4px 0; font:600 14.5px/1.3 var(--font); color:var(--violet); cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* обратная связь */
.dt-fb-kind{display:flex; gap:8px; margin-top:14px}
.dt-fb-kind button{flex:1; border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:10px 8px; font:700 15px/1.25 var(--font); color:var(--ink-2); cursor:pointer}
.dt-fb-kind button.on{border-color:var(--violet); background:var(--violet); color:#fff}
.dt-fb textarea, .dt-fb input[type=text]{width:100%; margin-top:12px; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font:16px/1.5 var(--font); color:var(--ink); resize:vertical}
.dt-fb textarea{min-height:120px}
.dt-fb textarea:focus, .dt-fb input:focus{outline:none; border-color:var(--violet)}
.dt-fb .dt-note{font-size:14px; color:var(--mut); margin-top:8px; line-height:1.45}

/* ---------- затемнение, окно подсветки, блокировка ---------- */
.dt-shade{position:fixed; inset:0; z-index:var(--dt-z); pointer-events:none}
.dt-shade svg{position:absolute; left:0; top:0; width:100%; height:100%}
.dt-shade path{fill:var(--dt-dim)}
.dt-block{position:fixed; inset:0; z-index:calc(var(--dt-z) + 5); background:transparent; cursor:default}
.dt-glow{position:fixed; z-index:calc(var(--dt-z) + 6); pointer-events:none; border-radius:14px;
  box-shadow:0 0 0 3px #550577, 0 0 0 10px rgba(170,130,187,.45), 0 0 40px 8px rgba(202,71,240,.32)}
.dt-glow.on-dark{box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(255,255,255,.22), 0 0 40px 8px rgba(202,71,240,.5)}
.dt-glow.is-orange{box-shadow:0 0 0 3px #fff, 0 0 0 9px rgba(255,93,0,.6), 0 0 40px 12px rgba(255,93,0,.5)}
.dt-glow.is-orange::after{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 9px rgba(255,93,0,.55), 0 0 46px 16px rgba(255,93,0,.55); animation:dt-blink 2.4s ease-in-out infinite}
@keyframes dt-blink{0%,100%{opacity:.35} 50%{opacity:1}}
.dt-glow.is-round{border-radius:50%}
.dt-cursor{position:fixed; z-index:calc(var(--dt-z) + 7); pointer-events:none; width:26px; height:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* метка «Пример» (К7) */
.dt-sample{position:fixed; z-index:calc(var(--dt-z) + 25); right:24px; top:96px; display:flex; align-items:center; gap:12px; background:#fff;
  border-radius:12px; padding:10px 16px 10px 10px; box-shadow:var(--shadow-lift); max-width:520px; font-family:var(--font)}
.dt-sample.at-bottom{top:auto; bottom:24px}
.dt-sample .dt-sb{background:var(--orange); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:8px; padding:7px 10px; flex:none}
.dt-sample .dt-st{line-height:1.35} .dt-sample .dt-st b{display:block; font-size:15px; font-weight:700; color:var(--ink)} .dt-sample .dt-st span{font-size:14px; color:var(--ink-2)}

/* облачка: О.3 и О.7 */
.dt-cloud{position:fixed; z-index:calc(var(--dt-z) + 32); max-width:380px; background:#fff; border:1.5px solid #E2D5EC; border-radius:12px; padding:12px 16px;
  font:15.5px/1.5 var(--font); color:var(--ink); box-shadow:var(--shadow-lift); pointer-events:none; animation:dt-in .24s var(--dt-ease) both}
.dt-cloud .dt-tail{background:#fff; border-right:1.5px solid #E2D5EC; border-top:1.5px solid #E2D5EC; width:16px; height:16px; border-radius:2px}
.dt-cloud.is-warn{display:flex; gap:12px; width:420px; max-width:calc(100vw - 32px); background:var(--warn-bg); border:1px solid var(--warn-b); font-size:16px; padding:14px 16px}
.dt-cloud.is-warn i{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--warn); color:#fff; font:800 15px/1 var(--font); font-style:normal; flex:none}
.dt-cloud.out{opacity:0; transition:opacity .3s ease}

/* подтверждение выхода (К8): поверх плашки */
.dt-confirm-veil{position:absolute; inset:0; border-radius:15px; background:rgba(33,2,48,.4)}
.dt-confirm{position:absolute; left:30px; right:30px; top:70px; background:#fff; border-radius:15px; box-shadow:var(--shadow-modal); padding:24px 24px 22px; animation:dt-pop .24s var(--dt-ease) both}
@keyframes dt-pop{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.dt-confirm h4{font-size:21px; font-weight:700; line-height:1.25; margin:0}
.dt-confirm p{font-size:17px; line-height:1.6; color:var(--ink-2); margin:10px 0 0}
.dt-confirm .dt-cbtns{display:flex; flex-direction:column; gap:8px; margin-top:20px}
.dt-confirm .dt-cbtns .dt-btn{flex:none; width:100%}

/* сердечки на финале */
.dt-heart{position:fixed; z-index:calc(var(--dt-z) + 40); width:30px; height:17px; pointer-events:none; opacity:0}

/* подставные элементы на время обучения */
.dt-fake{outline:none}
.dt-fake-note{display:inline-block; margin-left:8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-d)}
body.dt-active #toast{z-index:calc(var(--dt-z) + 50)}

/* плашка курса (К12) — страница «Теория изменений» */
/* плашка курса на странице «Теория изменений»: вариант «Обложка курса» (макет 1b) */
.dt-course{background:#fff; border-radius:15px; box-shadow:var(--shadow-panel); overflow:hidden; display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); margin:18px 0 6px; font-family:var(--font); color:var(--ink)}
.dt-course .dt-course__cover{background:var(--grad-hero); color:#fff; padding:26px 26px 24px; display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.dt-course .dt-course__tags{display:flex; gap:8px; flex-wrap:wrap}
.dt-course .dt-course__tag{background:rgba(255,255,255,.18); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; color:#fff}
.dt-course .dt-course__name{font-size:19px; font-weight:800; line-height:1.25; letter-spacing:-.015em; text-wrap:pretty; color:#fff}
.dt-course .dt-course__body{padding:28px 32px; display:flex; flex-direction:column; justify-content:center; gap:16px}
.dt-course .dt-course__title{font-size:21px; font-weight:700; letter-spacing:-.015em; line-height:1.3; margin:0; padding:0; color:var(--ink); border:0; text-transform:none}
.dt-course .dt-course__text{font-size:15px; line-height:1.6; color:var(--ink-2); margin:8px 0 0; max-width:56ch; text-wrap:pretty}
.dt-course .dt-course__actions{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.dt-course a.dt-course__btn{display:inline-block; background:var(--orange); color:#fff; border:0; border-radius:999px; padding:14px 26px; font:700 15px/1.2 var(--font); cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--dur, .2s) var(--ease, ease)}
.dt-course a.dt-course__btn:hover{background:var(--orange-d); color:#fff; text-decoration:none}
.dt-course a.dt-course__btn:focus-visible{outline:none; box-shadow:var(--ring)}
.dt-course .dt-course__note{font-size:13px; color:var(--mut)}
@media (max-width:720px){ .dt-course{grid-template-columns:1fr} .dt-course .dt-course__body{padding:22px 20px} }

/* узкий экран (М14) */
@media (max-width: 760px){
  .dt-helper{bottom:16px; right:16px}
  .dt-card.is-sheet{left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; max-width:none; border-radius:18px 18px 0 0}
  .dt-card.is-sheet .dt-band{border-radius:18px 18px 0 0}
  .dt-card.is-sheet .dt-tail{display:none}
  .dt-card .dt-title{font-size:20px}
  .dt-card .dt-text p{font-size:16.5px}
  .dt-card .dt-body{padding:18px 18px 20px}
  .dt-sample{right:16px; left:16px; top:auto; bottom:auto}
  .dt-cloud{max-width:calc(100vw - 32px)}
}
@media (prefers-reduced-motion: reduce){
  .dt-helper.is-pulse .dt-ring, .dt-glow.is-orange::after, .dt-helper.is-bump, .dt-card.dt-nudge{animation:none}
  .dt-card.dt-anim-in, .dt-cloud, .dt-confirm{animation:dt-fade .2s ease both}
  @keyframes dt-fade{from{opacity:0} to{opacity:1}}
}

/* сообщения сайта (например, о переносе мероприятия) видны поверх затемнения, но под плашкой */
body.dt-active #toast{z-index:calc(var(--dt-z) + 26)}

/* смена шага: плашка одна, старый текст гаснет, плашка плавно переезжает и меняет размер, новый текст проявляется */
.dt-card .dt-band > *, .dt-card .dt-body{transition:opacity .2s ease}
.dt-card.is-swap .dt-band > *, .dt-card.is-swap .dt-body{opacity:0; pointer-events:none}
.dt-card .dt-band{transition:background-color .3s ease}
.dt-card.is-glide{transition:left var(--dt-glide, .5s) cubic-bezier(.45,.05,.25,1), top var(--dt-glide, .5s) cubic-bezier(.45,.05,.25,1),
  width var(--dt-glide, .5s) cubic-bezier(.45,.05,.25,1), height var(--dt-glide, .5s) cubic-bezier(.45,.05,.25,1)}
.dt-card > .dt-tail{animation:dt-tail-in .2s ease both}
@keyframes dt-tail-in{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .dt-card.is-glide{transition:none} }

/* во время обучения липкие блоки сайта (итог калькулятора, панель теории изменений, фильтры библиотеки)
   едут вместе со страницей: так подсветка и плашка точно знают, где они окажутся после прокрутки */
body.dt-active .calc-side2, body.dt-active .toc-side, body.dt-active .filters.side{position:relative !important; top:auto !important}
/* невысокий экран: шапка и полоса подразделов на время обучения прокручиваются вместе со страницей */
body.dt-active.dt-short #app > header, body.dt-active.dt-short .subnav{position:relative !important; top:auto !important}
body.dt-active .filters.side{max-height:none !important; overflow:visible !important}