/* ============================================================
   Крючок «Примерьте отчёт на себя» на странице «Автопортрета».
   Подключается отдельным файлом, чтобы не трогать lichnostny-profil.css.
   Палитра — из дизайн-системы страницы (:root в lichnostny-profil.css).
   ============================================================ */
.hook{padding:34px 0 10px}
.hook-lead{font-size:16px;color:var(--ink2);max-width:700px;margin:-8px 0 18px}
.hook-lead b{color:var(--ink)}

/* ── честная сноска о том, что мы измеряем и чего не измеряем ── */
.hook-honest{display:flex;gap:14px;align-items:flex-start;background:#fffdf3;border:1px solid #efe6c8;
  border-radius:var(--r-sm);padding:15px 18px;font-size:14px;color:var(--ink2);box-shadow:var(--shadow);max-width:760px}
.hook-honest .mk{flex:none;width:24px;height:24px;border-radius:8px;background:#f6ecc9;color:#8a6a12;
  display:grid;place-items:center;font-weight:700;font-size:14px}
.hook-honest b{color:var(--ink)}

/* ── вступление ── */
.hook-start{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
.hook-min{font-size:13px;color:var(--ink3)}

/* ── вопросы ── */
.hook-qtop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.hook-count{font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase}
.hook-bar{height:6px;border-radius:99px;background:#e7e5d8;overflow:hidden;margin-bottom:30px;max-width:760px}
.hook-bar i{display:block;height:100%;background:linear-gradient(90deg,#0aa87e,#06d6a0);transition:width .35s cubic-bezier(.4,0,.2,1)}
.hook-q{font-family:'Unbounded',sans-serif;font-size:clamp(19px,2.6vw,27px);line-height:1.3;margin-bottom:26px;max-width:760px}
.hook-opts{display:grid;gap:9px;max-width:560px}
.hook-opt{display:flex;align-items:center;gap:13px;padding:15px 20px;border-radius:var(--r-sm);background:var(--surface);
  border:1.5px solid var(--line);cursor:pointer;font:500 15.5px/1.3 inherit;color:var(--ink);text-align:left;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.hook-opt:hover{border-color:var(--pine);transform:translateX(3px);box-shadow:0 10px 24px -16px rgba(14,74,56,.55)}
.hook-opt:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.hook-opt .dot{flex:none;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg)}
.hook-opt:hover .dot{border-color:var(--pine);background:var(--pine-soft)}
.hook-qfoot{margin-top:24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hook-back{background:none;border:0;cursor:pointer;font:500 13.5px/1 inherit;color:var(--ink3);padding:6px 0}
.hook-back:hover{color:var(--pine)}
.hook-back[disabled]{opacity:.35;cursor:default}
.hook-note{font-size:13px;color:var(--ink3)}

/* ── результат ── */
.hook-bignum{font-family:'Unbounded',sans-serif;font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:-.03em;
  color:var(--pine);margin:6px 0 12px}
.hook-bignum em{font-style:normal;color:#0aa87e}
.hook-bignum span{font-size:.42em;color:var(--ink3)}
.hook-reslead{font-size:16px;color:var(--ink2);max-width:760px;margin-bottom:22px}
.hook-reslead b{color:var(--ink)}

/* ── разборы «это про меня» ── */
.hook-cards{display:grid;gap:14px;margin-bottom:24px}
.hook-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);
  border-radius:var(--r-sm);padding:20px 22px;box-shadow:var(--shadow)}
.hook-card .ch{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hook-card .ch i{width:11px;height:11px;border-radius:50%;background:var(--c);align-self:center;flex:none}
.hook-card .ch b{font-family:'Unbounded',sans-serif;font-size:16px}
.hook-card .ch em{font-style:normal;font-size:12.5px;color:var(--ink3);margin-left:auto;white-space:nowrap;
  background:var(--bg);border-radius:99px;padding:5px 11px}
.hook-card .lead{font-family:'Unbounded',sans-serif;font-size:clamp(16px,1.8vw,20px);line-height:1.3;
  color:var(--pine);margin-bottom:10px}
.hook-card .quote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--line);font-size:13.5px;color:var(--ink3)}
.hook-card .quote b{color:var(--ink2);font-weight:600}
.hook-card p{margin:0;font-size:15px;color:var(--ink2)}
.hook-card .use{margin-top:10px}
.hook-card .use b{color:var(--ink)}

/* ── матрица 45 граней ── */
.hook-gridwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;
  box-shadow:var(--shadow)}
.hook-gridtop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hook-gridtop b{font-family:'Unbounded',sans-serif;font-size:14.5px}
.hook-gridtop span{font-size:13px;color:var(--ink3)}
.hook-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.hook-col{display:flex;flex-direction:column;gap:7px}
.hook-colhead{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;line-height:1.25;
  color:var(--ink3);margin-bottom:3px;min-height:30px}
.hook-colhead i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.hook-tile{border-radius:10px;padding:7px 9px;border:1px solid var(--line);background:#fbfaf5;height:54px;
  display:grid;grid-template-rows:auto auto;align-content:start;gap:2px;position:relative;overflow:hidden;
  font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}
.hook-tile .tn{font-size:10.5px;font-weight:600;line-height:1.2;color:#b9b5a3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hook-tile.locked:hover{transform:translateY(-2px);border-color:#d9d5c2;box-shadow:0 10px 22px -14px rgba(28,26,26,.3)}
.hook-tile.locked::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(135deg,transparent 46%,rgba(143,140,126,.13) 47%,rgba(143,140,126,.13) 53%,transparent 54%);
  background-size:9px 9px}
.hook-tile .lk{position:absolute;right:7px;bottom:6px;opacity:.55}
.hook-tile.open{background:var(--tint);border:1.5px solid var(--tintline);box-shadow:0 8px 20px -12px rgba(28,26,26,.35)}
.hook-tile.open .tn{color:var(--tink);font-weight:700}
.hook-tile.open .ts{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;line-height:1;
  color:var(--tval);display:flex;align-items:baseline;gap:5px}
.hook-tile.open .ts span{font-family:inherit;font-weight:600;font-size:9.5px;color:var(--tink);opacity:.75}
.hook-tile.ignite{animation:hook-ignite 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes hook-ignite{
  0%{box-shadow:0 0 0 0 hsl(var(--th) 80% 55% / .55)}
  100%{box-shadow:0 0 0 22px hsl(var(--th) 80% 55% / 0)}
}

/* ── покупка ── */
.hook-cta{background:var(--pine);color:#eaf7ef;border-radius:var(--r);padding:28px 30px;margin-top:24px;
  box-shadow:0 30px 70px -34px rgba(14,74,56,.6)}
.hook-cta h3{font-family:'Unbounded',sans-serif;font-size:clamp(19px,2.4vw,25px);line-height:1.2;color:#fff;margin-bottom:10px}
.hook-cta p{font-size:15px;color:#bfe0d0;max-width:660px}
.hook-cta .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.hook-cta .btn-lime{background:var(--lime);color:var(--pine)}
.hook-cta .btn-line{border:1.5px solid rgba(233,255,150,.45);color:#eaf7ef;background:transparent}
.hook-cta .btn-line:hover{border-color:var(--lime)}
.hook-cta .hook-min{color:#9dc6b3;margin-top:14px}
.hook-cta.pulse{animation:hook-pulse 1.4s ease-out 1}
@keyframes hook-pulse{
  0%{box-shadow:0 0 0 0 rgba(233,255,150,.55),0 30px 70px -34px rgba(14,74,56,.6)}
  100%{box-shadow:0 0 0 26px rgba(233,255,150,0),0 30px 70px -34px rgba(14,74,56,.6)}
}

/* ── отказ: не смогли получить результат ── */
.hook-fail{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;
  font-size:15px;color:var(--ink2);max-width:760px;box-shadow:var(--shadow)}
.hook-fail b{color:var(--ink)}
.hook-fail a{font-weight:600}

@media (max-width:820px){
  .hook-gridwrap{padding:16px 14px 18px}
  .hook-grid{gap:6px}
  .hook-tile{height:50px;padding:6px 7px}
  .hook-tile .tn{font-size:9px}
  .hook-tile.open .ts{font-size:16px}
  .hook-colhead{font-size:9.5px;min-height:26px}
  .hook-colhead i{width:7px;height:7px}
}
@media (max-width:600px){
  /* на телефоне клетки становятся квадратами без подписей: важно увидеть все 45 разом,
     а имена трёх открытых и так есть в разборах выше */
  .hook-grid{gap:5px}
  .hook-tile{height:auto;aspect-ratio:1/1;padding:0;place-items:center;border-radius:8px}
  .hook-tile .tn{display:none}
  .hook-tile .lk{position:static;opacity:.5}
  .hook-tile.open .ts{font-size:15px;justify-content:center}
  .hook-tile.open .ts span{display:none}
  .hook-colhead{font-size:8px;line-height:1.1;min-height:30px;align-items:flex-start}
  .hook-colhead i{width:6px;height:6px;margin-top:3px}
  .hook-colhead span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hook-cta{padding:22px 18px}
}
/* Крючок — экранная вещь: в печать он не идёт, остальная страница печатается как раньше */
@media print{.hook{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .hook-opt:hover,.hook-tile.locked:hover{transform:none}
  .hook-tile.ignite{animation:none}
  .hook-cta.pulse{animation:none;outline:3px solid var(--lime);outline-offset:4px}
  .hook-bar i{transition:none}
}