/* Окно-плеер и приглашение промо-ролика (promo-video.js). Отдельным файлом: CSP
   разрешает <style> только по хешу, а вставленный скриптом блок стилей браузер отбросит. */
.hrp-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,8,11,.82);backdrop-filter:blur(4px)}
.hrp-dialog{position:relative;width:min(1040px,100%);max-height:100%;overflow:auto;background:#101318;color:#eef0f2;border:1px solid rgba(240,192,116,.35);border-radius:16px;box-shadow:0 24px 80px #000a;padding:14px}
.hrp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 4px 10px}
.hrp-head h2{margin:0;font-size:17px;font-weight:800;line-height:1.3}
.hrp-head small{display:block;color:#a7adb5;font-weight:500;font-size:12px}
.hrp-x{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #3a404a;background:#1a1f27;color:#eef0f2;font-size:22px;line-height:1;cursor:pointer}
.hrp-stage{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:10px;overflow:hidden}
.hrp-stage video{display:block;width:100%;height:100%;background:#000}
.hrp-chapters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 2px 2px}
.hrp-chapters button{min-height:36px;padding:6px 11px;border-radius:999px;border:1px solid #3a404a;background:#171b22;color:#e3e6ea;font:600 12.5px/1.2 inherit;cursor:pointer}
.hrp-chapters button b{color:#f0c074;font-weight:700;margin-left:4px}
.hrp-chapters button:hover,.hrp-chapters button.on{border-color:#f0c074}
.hrp-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;background:linear-gradient(180deg,rgba(8,10,13,.55),rgba(8,10,13,.86))}
.hrp-end h3{margin:0 0 4px;font-size:clamp(18px,3vw,26px);font-weight:800}
.hrp-end .hrp-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hrp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid #4a505a;background:#1a1f27;color:#eef0f2;font:700 14px/1.2 inherit;text-decoration:none;cursor:pointer}
.hrp-btn.brass{background:linear-gradient(180deg,#f3c97d,#d9a24f);border-color:#e7b765;color:#1a1408}
.hrp-overlay :focus-visible,.hrp-invite :focus-visible{outline:2px solid #f0c074;outline-offset:2px}
.hrp-lang{margin:8px 4px 0;color:#a7adb5;font-size:12px}
.hrp-invite{position:fixed;inset:0;z-index:2147482990;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,10,13,.72);backdrop-filter:blur(3px)}
.hrp-card{width:min(520px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,#1a1f27,#12161c);color:#eef0f2;border:1px solid rgba(240,192,116,.4);border-radius:18px;padding:22px;box-shadow:0 22px 70px #000a}
.hrp-card h2{margin:0 0 6px;font-size:20px;font-weight:800;line-height:1.3}
.hrp-card p{margin:0 0 14px;color:#b4bac2;font-size:13.5px;line-height:1.5}
.hrp-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid #3a404a;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.hrp-cover img{display:block;width:100%;height:100%;object-fit:cover}
.hrp-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:linear-gradient(180deg,#f3c97d,#d9a24f);color:#1a1408;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 30px #0009}
.hrp-cover .hrp-dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;font-weight:700}
.hrp-card .hrp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hrp-card .hrp-actions .hrp-btn{flex:1 1 180px}
@media (max-width:820px){
  .hrp-overlay{padding:0;align-items:stretch}
  .hrp-dialog{width:100%;min-height:100%;border-radius:0;border:0;padding:max(10px,env(safe-area-inset-top,0px)) 10px max(12px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hrp-overlay,.hrp-invite{backdrop-filter:none}}
/* Класс с display перебивает атрибут hidden — без этого финальный призыв закрывал плеер сразу. */
.hrp-overlay [hidden],.hrp-invite [hidden]{display:none!important}

/* ===== Уроки (d63): общий плеер, раздел «Обучение», кнопка «▶ Видео-урок» ===== */
.hrp-head h2{min-width:0;flex:1 1 auto}
.hrp-head h2 [data-hrp-title]{display:block;overflow-wrap:anywhere}
.hrp-quality{display:flex;align-items:center;gap:4px;flex:0 0 auto;font-size:12px;color:#a7adb5}
.hrp-quality button{min-height:32px;padding:4px 9px;border-radius:8px;border:1px solid #3a404a;background:#171b22;color:#e3e6ea;font:700 12px/1 inherit;cursor:pointer}
.hrp-quality button[aria-pressed="true"]{border-color:#f0c074;color:#f3c97d}
.hrp-search{display:block;width:100%;max-width:360px;margin:10px 2px 0;min-height:36px;padding:6px 10px;border-radius:9px;border:1px solid #3a404a;background:#0c0f14;color:#eef0f2;font:13px/1.3 inherit}
.hrp-chapters.hrp-chapters-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px;max-height:170px;overflow:auto;padding-right:2px}
.hrp-chapters.hrp-chapters-list button{display:flex;gap:8px;align-items:flex-start;text-align:left;border-radius:9px;min-height:34px;padding:6px 9px;font-weight:600;font-size:12.5px;line-height:1.3}
.hrp-chapters.hrp-chapters-list button b{margin:0;flex:0 0 auto;font-variant-numeric:tabular-nums}
.hrp-chapters.hrp-chapters-list button span{min-width:0;overflow-wrap:anywhere}
.hrp-chapters button.on{background:rgba(240,192,116,.16);border-color:#f0c074}
.hrp-next{flex-direction:column;gap:2px}
.hrp-next span{font-weight:600;font-size:12.5px}
.hrp-link{background:none;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){
  .hrp-head{flex-wrap:wrap}
  .hrp-quality{order:3;width:100%}
  .hrp-chapters.hrp-chapters-list{grid-template-columns:minmax(0,1fr);max-height:28vh}
}

/* Раздел «Обучение» */
.tut-section{margin:6px 0 22px}
.tut-section > h2{margin:0 0 4px}
.tut-section > p{margin:0 0 12px}
.tut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tut-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line,#2c323b);border-radius:14px;overflow:hidden;background:var(--s2,#151a21)}
.tut-card-intro{grid-column:1/-1;flex-direction:row}
.tut-card-intro .tut-cover{flex:0 0 min(48%,520px)}
.tut-card.is-done{border-color:rgba(117,221,160,.45)}
.tut-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer}
.tut-cover img{display:block;width:100%;height:100%;object-fit:cover}
.tut-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:linear-gradient(180deg,#f3c97d,#d9a24f);color:#1a1408;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 8px 26px #0009}
.tut-dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700}
.tut-done{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(20,90,55,.9);color:#e6fff0;font-size:12px;font-weight:700}
.tut-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;min-width:0}
.tut-num{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-l,#f0c074)}
.tut-card-badge{border-color:rgba(240,192,116,.65);box-shadow:0 0 0 1px rgba(240,192,116,.25)}
.tut-badge{display:inline-block;padding:1px 7px;border-radius:999px;background:rgba(240,192,116,.16);color:var(--brass-l,#f0c074);letter-spacing:.04em}
.tut-body h3{margin:0;font-size:16px;line-height:1.3}
.tut-body p{margin:0;color:var(--muted,#a7adb5);font-size:13px;line-height:1.45}
.tut-progress{height:5px;border-radius:99px;background:rgba(127,127,127,.25);overflow:hidden;margin-top:auto}
.tut-progress i{display:block;height:100%;background:linear-gradient(90deg,#d9a24f,#f3c97d)}
.tut-actions{display:flex;flex-wrap:wrap;gap:8px}
.tut-actions button{min-height:38px}
.tut-error{color:var(--muted,#a7adb5)}
@media (max-width:640px){.tut-card-intro{flex-direction:column}.tut-card-intro .tut-cover{flex:none}}

/* «▶ Видео-урок» на страницах — скромная кнопка рядом с меню разделов */
.tut-ctx{position:relative;display:inline-block}
.tut-ctx > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 11px;border:1px solid rgba(240,192,116,.45);border-radius:10px;color:var(--brass-l,#f3c97d);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.tut-ctx > summary::-webkit-details-marker{display:none}
.tut-ctx-play{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#f3c97d,#d9a24f);color:#1a1408;font-size:8px}
.tut-ctx-menu{position:absolute;z-index:13050;top:calc(100% + 6px);left:0;display:grid;gap:4px;width:min(320px,calc(100vw - 24px));padding:8px;border:1px solid rgba(240,192,116,.35);border-radius:12px;background:var(--s1,#12161c);box-shadow:0 18px 50px #0008}
.tut-ctx-menu button,.tut-ctx-menu a{display:grid;gap:2px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;border:1px solid transparent;background:none;color:var(--ink,#eef0f2);font:inherit;cursor:pointer;text-decoration:none}
.tut-ctx-menu button:hover,.tut-ctx-menu a:hover,.tut-ctx-menu button:focus-visible{border-color:rgba(240,192,116,.45);background:rgba(240,192,116,.08)}
.tut-ctx-menu small{color:var(--muted,#a7adb5);font-size:11.5px}
.tut-ctx-menu a{color:var(--brass-l,#f0c074);font-weight:700}
/* В шапке редактора на узких экранах — только значок ▶, чтобы не теснить навигацию. */
@media (max-width:1180px){.topnav .tut-ctx > summary{padding:6px 9px}.topnav .tut-ctx .tut-ctx-label{display:none}}
@media (max-width:560px){.tut-ctx > summary{padding:6px 9px;font-size:12px}.tut-ctx-menu{position:fixed;left:12px;right:12px;top:auto;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}