/* ── Гайд по тестам работодателей (test-guide.js) ─────────────────────────────
   Токены страницы: --card, --card2, --text, --muted, --faint, --line, --line2,
   --purple, --blue, --amber, --green, --ease, --fd. Они есть и на /responses/
   (responses.css), и в кабинете v3 (cabinet.css). Сцены внутри рисует
   hiw-demo.css своими --hd-* токенами — им ничего не нужно.               */

.tgm{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.tgm.show{opacity:1;pointer-events:auto}
.tgm-back{position:absolute;inset:0;background:rgba(8,10,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tgm.first .tgm-back{cursor:default}
.tgm-card{position:relative;z-index:1;width:100%;max-width:820px;max-height:min(92vh,720px);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);min-height:460px;
  background:var(--card2);border:1px solid var(--line2);border-radius:var(--r,16px);
  box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden;
  transform:translateY(10px) scale(.985);transition:transform .32s var(--ease)}
.tgm.show .tgm-card{transform:none}
.tgm-x{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);background:var(--card);border:1px solid var(--line)}
.tgm-x svg{width:16px;height:16px}
.tgm-x:hover{color:var(--text);background:var(--hover,rgba(255,255,255,.04))}

/* ── сцена ─────────────────────────────────────────────────────────────── */
.tgm-stage{position:relative;background:var(--logbg,var(--card));border-right:1px solid var(--line);
  padding:22px 22px 18px;display:grid;place-items:center;min-height:360px}
.tgm-scene{position:absolute;inset:22px 22px 18px;display:grid;place-items:center;
  opacity:0;transform:translateX(16px);transition:opacity .32s var(--ease),transform .32s var(--ease);pointer-events:none}
/* pointer-events сцене не нужны: иначе закрытая (прозрачная) модалка
   перехватывала бы клики по странице в своей середине. */
.tgm-scene.on{opacity:1;transform:none}
.tgm-scene.past{transform:translateX(-16px)}
.tgm-scene .hiw-demo{width:100%;max-width:400px;border-radius:14px;background:transparent}
/* внутри модалки стена стейджа не нужна: карточка сцены сама и есть картинка */
.tgm-scene .hiw-demo{--hd-bg0:transparent}

/* ── текст и шаги ──────────────────────────────────────────────────────── */
.tgm-body{padding:28px 28px 24px;display:flex;flex-direction:column;min-width:0}
.tgm-body.swap .tgm-kicker,.tgm-body.swap .tgm-title,.tgm-body.swap .tgm-text{animation:tgmIn .38s var(--ease) both}
.tgm-body.swap .tgm-title{animation-delay:.04s}
.tgm-body.swap .tgm-text{animation-delay:.08s}
@keyframes tgmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tgm-kicker{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.tgm-title{font-family:var(--fd,'Unbounded',sans-serif);font-size:22px;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;margin:10px 0 0}
.tgm-text{color:var(--muted);font-size:14px;line-height:1.6;margin:12px 0 0;max-width:46ch}
.tgm-foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:14px}

/* Точки шагов: пройденные — залиты, текущая — вытягивается и заливается
   градиентом слева направо, пока идёт шаг. */
.tgm-dots{display:flex;gap:7px;align-items:center}
.tgm-dots i{position:relative;display:block;width:8px;height:8px;border-radius:8px;background:var(--line2);
  overflow:hidden;transition:width .4s var(--ease),background .3s var(--ease)}
.tgm-dots i::after{content:"";position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(90deg,var(--blue),var(--purple));transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.tgm-dots i.on{width:26px}
.tgm-dots i.on::after{transform:scaleX(1)}
.tgm-dots i.done{background:var(--purple)}

.tgm-actions{display:flex;gap:8px;flex-wrap:wrap}
.tgm-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:var(--r-xs,10px);
  font-size:14px;font-weight:600;border:1px solid transparent;transition:.15s;cursor:pointer}
.tgm-btn:active{transform:scale(.975)}
.tgm-btn:focus-visible,.tgm-x:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.tgm-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;min-width:120px}
.tgm-primary:hover{filter:brightness(1.09)}
.tgm-secondary{border-color:var(--line2);color:var(--text)}
.tgm-secondary:hover{background:var(--hover,rgba(255,255,255,.04))}

/* ── иконка «?» рядом с кнопками ───────────────────────────────────────── */
.tg-help{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex:none;
  color:var(--muted);border:1px solid var(--line2);background:transparent;cursor:pointer;transition:.15s;vertical-align:middle}
.tg-help svg{width:16px;height:16px}
.tg-help:hover{color:var(--purple);border-color:var(--purple);background:var(--soft)}

/* ── кирпичи сцен (поверх hiw-demo.css) ───────────────────────────────── */
.hiw-demo .tg-chip{display:inline-flex;align-items:center;font-size:8.5px;font-weight:700;padding:3px 7px;border-radius:6px;
  vertical-align:middle;flex:none;line-height:1.3}
.hiw-demo .tg-chip.amber{background:color-mix(in srgb,var(--hd-amber) 18%,transparent);color:var(--hd-amber)}
.hiw-demo .hiw-h .tg-chip{margin-left:6px}
.hiw-demo .hiw-vac .tg-chip{align-self:flex-start}
.hiw-demo .tg-qs{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.hiw-demo .tg-q{position:relative;padding:8px 26px 8px 10px;border-radius:9px;border:1.5px solid var(--hd-line);
  background:var(--hd-card2);min-height:40px;transition:border-color .25s var(--hd-ease),background .25s var(--hd-ease)}
.hiw-demo .tg-q .tq{display:block;font-size:8.5px;color:var(--hd-faint);line-height:1.35}
.hiw-demo .tg-q .ta{display:block;font-size:9.5px;color:var(--hd-text);line-height:1.45;margin-top:3px;min-height:12px}
.hiw-demo .tg-q .tk{position:absolute;right:8px;top:9px;width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;background:var(--hd-green);color:#04231a;opacity:0;transform:scale(.6);
  transition:opacity .22s var(--hd-ease),transform .22s var(--hd-ease)}
.hiw-demo .tg-q .tk svg{width:8px;height:8px}
.hiw-demo .tg-q.on{border-color:color-mix(in srgb,var(--hd-green) 45%,transparent)}
.hiw-demo .tg-q.on .tk{opacity:1;transform:none}
.hiw-demo .tg-q.typing{border-color:var(--hd-purple)}
.hiw-demo .tg-q.unknown{border-color:color-mix(in srgb,var(--hd-amber) 60%,transparent);
  background:color-mix(in srgb,var(--hd-amber) 8%,var(--hd-card2))}
.hiw-demo .tg-q.unknown .ta{color:var(--hd-amber);font-weight:600}
.hiw-demo .tg-note{display:flex;gap:7px;align-items:flex-start;margin-top:10px;font-size:9.5px;line-height:1.5;color:var(--hd-muted)}
.hiw-demo .tg-note svg{width:12px;height:12px;flex:none;color:var(--hd-amber);margin-top:1px}

/* мини-кабинет */
.hiw-demo .tg-top{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px;border-bottom:1px solid var(--hd-line)}
.hiw-demo .tg-logo{font-family:var(--font-display,'Unbounded',sans-serif);font-weight:800;font-size:11px;letter-spacing:-.01em}
.hiw-demo .tg-topbtn{position:relative;font-size:9.5px;font-weight:600;padding:6px 11px;border-radius:7px;
  border:1px solid var(--hd-line2);transition:transform .14s var(--hd-ease)}
.hiw-demo .tg-topbtn.press{transform:scale(.96)}
.hiw-demo .tg-dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:#ef4444;
  border:2px solid var(--hd-card);opacity:0;transform:scale(.4);transition:opacity .25s var(--hd-ease),transform .35s var(--hd-ease)}
.hiw-demo .tg-dot.show{opacity:1;transform:none;animation:tgPulse 2.2s ease-in-out infinite}
@keyframes tgPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
.hiw-demo .tg-shell{display:flex;gap:10px;margin-top:10px;flex:1;min-height:0}
.hiw-demo .tg-side{width:118px;flex:none;display:flex;flex-direction:column;gap:3px}
.hiw-demo .tg-nav{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:8px;font-size:9.5px;font-weight:600;
  color:var(--hd-muted);transition:background .25s var(--hd-ease),color .25s var(--hd-ease)}
.hiw-demo .tg-nav svg{width:12px;height:12px;flex:none}
.hiw-demo .tg-nav.on{background:var(--hd-soft);color:var(--hd-text)}
.hiw-demo .tg-nav.press{transform:scale(.97)}
.hiw-demo .tg-bdg{margin-left:auto;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#ef4444;color:#fff;
  font-size:8px;font-weight:700;display:grid;place-items:center;opacity:0;transform:scale(.5);
  transition:opacity .25s var(--hd-ease),transform .35s var(--hd-ease)}
.hiw-demo .tg-bdg.show{opacity:1;transform:none}
.hiw-demo .tg-main{flex:1;min-width:0;padding:4px 2px}
.hiw-demo .tg-ph{font-family:var(--font-display,'Unbounded',sans-serif);font-weight:700;font-size:13px;margin-bottom:10px}
.hiw-demo .tg-sk{height:10px;border-radius:5px;background:var(--hd-card2);margin-bottom:7px}
.hiw-demo .tg-sk.w60{width:60%}
.hiw-demo .tg-sk.w80{width:80%}

/* «ждут вас» */
.hiw-demo .tg-wait{display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 11px;border-radius:10px;
  background:var(--hd-card2);border:1px solid var(--hd-line)}
.hiw-demo .tg-wait .vi{width:28px;height:28px;border-radius:8px;background:var(--hd-card);display:grid;place-items:center;color:var(--hd-faint);flex:none}
.hiw-demo .tg-wait .vi svg{width:14px;height:14px}
.hiw-demo .tg-wait .wt{flex:1;min-width:0}
.hiw-demo .tg-wait .vt{display:block;font-size:10.5px;font-weight:600;line-height:1.3}
.hiw-demo .tg-wait .vm{display:block;font-size:8.5px;color:var(--hd-faint);margin-top:3px}
.hiw-demo .tg-btn-sm{flex:none;font-size:9px;font-weight:600;color:#fff;padding:7px 10px;border-radius:7px;
  background:linear-gradient(135deg,var(--hd-blue),var(--hd-purple));transition:transform .14s var(--hd-ease)}
.hiw-demo .tg-btn-sm.press{transform:scale(.96)}

/* форма дозаполнения */
.hiw-demo .tg-mhead{padding-bottom:9px;border-bottom:1px solid var(--hd-line);margin-bottom:4px}
.hiw-demo .tg-memp{display:block;font-size:8.5px;color:var(--hd-faint)}
.hiw-demo .tg-mtitle{display:block;font-family:var(--font-display,'Unbounded',sans-serif);font-weight:700;font-size:12.5px;margin-top:2px}
.hiw-demo .tg-fq{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font-size:9.5px;font-weight:600;line-height:1.35}
.hiw-demo .tg-fq .n{flex:none;width:15px;height:15px;border-radius:50%;background:var(--hd-card2);border:1px solid var(--hd-line2);
  font-size:7.5px;display:grid;place-items:center;color:var(--hd-muted)}
.hiw-demo .tg-fq .t{flex:1;min-width:0}
.hiw-demo .tg-fq.need .t{color:var(--hd-text)}
.hiw-demo .tg-fa{margin:4px 0 0 22px;font-size:9.5px;color:var(--hd-muted);line-height:1.45}
.hiw-demo .tg-opts{display:flex;gap:5px;margin:5px 0 0 22px}
.hiw-demo .tg-opt{font-size:9px;font-weight:600;padding:4px 9px;border-radius:12px;border:1px solid var(--hd-line2);color:var(--hd-muted)}
.hiw-demo .tg-opt.on{background:var(--hd-soft);border-color:var(--hd-purple);color:var(--hd-purple)}
.hiw-demo .tg-field{margin:6px 0 0 22px;height:32px;font-size:10px;border-color:color-mix(in srgb,var(--hd-amber) 60%,transparent)}
.hiw-demo .tg-field.focus{border-color:var(--hd-purple)}

/* ── телефон ───────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .tgm{padding:0;align-items:flex-end}
  .tgm-card{grid-template-columns:1fr;max-width:none;max-height:94vh;min-height:0;border-radius:20px 20px 0 0;border-bottom:0;overflow:auto}
  .tgm-stage{border-right:0;border-bottom:1px solid var(--line);min-height:0;padding:16px 16px 12px}
  .tgm-scene{position:relative;inset:auto;display:none;width:100%}
  .tgm-scene.on{display:grid}
  .tgm-scene .hiw-demo{max-width:360px}
  .tgm-body{padding:20px 20px 18px}
  .tgm-title{font-size:19px}
  .tgm-actions .tgm-btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .tgm,.tgm-card,.tgm-scene,.tgm-dots i,.tgm-dots i::after{transition:none}
  .tgm-body.swap .tgm-kicker,.tgm-body.swap .tgm-title,.tgm-body.swap .tgm-text{animation:none}
  .hiw-demo .tg-dot.show{animation:none}
}