/* ============================================================
   Доп. возможности (features.js): квиз, лента времени, навигация,
   поиск по конспектам, заметки и т.п. Стили в духе основного сайта,
   используют те же CSS-переменные (--paper, --ink, --c1..--c9 …).
   ============================================================ */

/* ---- D2: анимация «пласты нарастают сверху вниз» ---- */
@media (prefers-reduced-motion: no-preference){
  .core .band{transform-origin:top center;animation:bandGrow .5s cubic-bezier(.2,.8,.2,1) both}
  .core .band:nth-of-type(1){animation-delay:.02s}
  .core .band:nth-of-type(2){animation-delay:.07s}
  .core .band:nth-of-type(3){animation-delay:.12s}
  .core .band:nth-of-type(4){animation-delay:.17s}
  .core .band:nth-of-type(5){animation-delay:.22s}
  .core .band:nth-of-type(6){animation-delay:.27s}
  .core .band:nth-of-type(7){animation-delay:.32s}
  .core .band:nth-of-type(8){animation-delay:.37s}
  .core .band:nth-of-type(9){animation-delay:.42s}
  @keyframes bandGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
}

/* ---- K3: лента времени ---- */
.timeline{max-width:var(--maxw);margin:0 auto;padding:4px 22px 22px}
.timeline-h{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.tl{display:flex;height:48px;border-radius:9px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 10px 26px -20px rgba(0,0,0,.5)}
.tl-seg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:0 9px;color:#fff;cursor:pointer;border:0;text-align:left;font-family:inherit;min-width:0;
  transition:filter .15s ease}
.tl-seg:hover{filter:brightness(1.13)}
.tl-seg:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.tl-seg.lite{color:#221d12}
.tl-seg .tr{font-family:'Unbounded';font-weight:800;font-size:12.5px;line-height:1}
.tl-seg .ty{font-family:'JetBrains Mono';font-size:9px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-seg.cur{box-shadow:inset 0 0 0 3px var(--ink)}
.tl-seg.cur .tr{text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){
  .timeline{padding:2px 14px 18px}
  .tl{height:40px}
  .tl-seg .ty{display:none}
}

/* ---- C4: мини-керн в верхней панели на десктопе ---- */
@media (min-width:981px){ .kern{display:block} }

/* ---- C2: подэпохи (VI·a–d) в боковой оси ---- */
.axis .subax{list-style:none;margin:3px 0 2px;padding:0 0 0 2px}
.axis .subax li{position:static;padding:0;margin:0}
.axis .subax a{display:block;padding:2px 0;font-size:11px;color:var(--faint);line-height:1.25}
.axis .subax a:hover{color:var(--ink)}
.axis .subax li.on a{color:var(--ink);font-weight:600}

/* ---- C3: плавающая навигация (наверх / эпохи) ---- */
.epnav{position:fixed;right:18px;bottom:20px;z-index:55;display:flex;flex-direction:column;gap:8px}
.epnav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink-2);cursor:pointer;font-size:17px;line-height:1;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.45);transition:transform .14s ease,border-color .14s ease,color .14s ease}
.epnav button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.epnav button:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
@media (max-width:560px){ .epnav{right:12px;bottom:12px} .epnav button{width:38px;height:38px;font-size:15px} }
@media print{ .epnav{display:none} }

/* ---- K2: кнопка «поделиться» в шапке эпохи + тост ---- */
.ep-share{position:absolute;top:6px;right:38px;width:30px;height:30px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--card);color:var(--muted);cursor:pointer;font-size:13px;line-height:1;
  transition:all .15s;z-index:2}
.ep-share:hover{color:var(--ink);border-color:var(--ink)}
.ep-share:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
@media print{ .ep-share{display:none} }

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(18px);
  background:var(--ink);color:var(--paper);padding:11px 20px;border-radius:30px;font-size:14px;font-weight:600;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:400}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- H5 / J1: кнопки действий в hero ---- */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.haction{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:30px;
  padding:9px 16px;transition:transform .14s ease,border-color .14s ease,background .14s ease}
.haction:hover{border-color:var(--ink);transform:translateY(-1px)}
.haction.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.haction.primary:hover{filter:brightness(1.1)}
.haction:focus-visible{outline:2px solid var(--c9);outline-offset:2px}

/* ---- J1: квиз по датам ---- */
.quiz{position:fixed;inset:0;z-index:250;display:none;padding:5vh 18px}
.quiz.open{display:block}
.quiz .veil{position:absolute;inset:0;background:rgba(20,18,14,.55);backdrop-filter:blur(3px)}
.quiz .qpanel{position:relative;max-width:560px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:qpop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes qpop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.quiz .qhead{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.quiz .qhead h3{font-family:'Unbounded';font-weight:600;font-size:18px;flex:1;line-height:1.1}
.quiz .qscore{font-family:'JetBrains Mono';font-size:13px;color:var(--muted);white-space:nowrap}
.quiz .qx{font-family:'JetBrains Mono';font-size:20px;line-height:1;color:var(--muted);cursor:pointer;
  background:none;border:1px solid var(--line-2);border-radius:8px;width:36px;height:36px;flex:none;transition:all .15s}
.quiz .qx:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.quiz .qx:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
.quiz .qbody{padding:22px 24px 26px}
.quiz .qq{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.quiz .qprompt{font-family:'Unbounded';font-weight:600;font-size:23px;line-height:1.2;margin:8px 0 20px}
.quiz .qprompt b{color:var(--c8)}
.quiz .qopts{display:flex;flex-direction:column;gap:10px}
.quiz .qopt{font-family:inherit;font-size:15.5px;text-align:left;cursor:pointer;padding:12px 15px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink-2);transition:all .12s}
.quiz .qopt:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.quiz .qopt:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
.quiz .qopt:disabled{cursor:default}
.quiz .qopt.correct{background:rgba(44,106,82,.18);border-color:#2C6A52;color:var(--ink);font-weight:600}
.quiz .qopt.wrong{background:rgba(204,58,34,.15);border-color:#cc3a22;color:var(--ink)}
.quiz .qnext{margin-top:18px;width:100%;justify-content:center}
@media (prefers-reduced-motion:reduce){ .quiz .qpanel{animation:none} }

/* ---- H4: результаты поиска по тексту конспектов ---- */
.ksearch{margin:6px 0 18px;border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden}
.ksearch-h{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);padding:10px 15px;border-bottom:1px solid var(--line)}
.ksearch .kres{display:flex;flex-direction:column}
.ksearch .kr{text-align:left;cursor:pointer;border:0;background:none;padding:11px 15px;
  border-bottom:1px solid var(--line);font-family:inherit;display:flex;flex-direction:column;gap:3px}
.ksearch .kr:last-child{border-bottom:0}
.ksearch .kr:hover{background:var(--paper-2)}
.ksearch .kr:focus-visible{outline:2px solid var(--c9);outline-offset:-2px}
.ksearch .krt{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.25}
.ksearch .krs{font-size:12.5px;color:var(--muted);line-height:1.45;font-family:'JetBrains Mono'}
.ksearch .krs mark{background:rgba(204,138,44,.34);color:inherit;border-radius:3px;padding:0 1px}

/* ---- H7: источники изображений в подвале ---- */
footer .credits{margin-top:18px;max-width:70ch}
footer .credits summary{cursor:pointer;font-family:'JetBrains Mono';font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);list-style:none}
footer .credits summary::-webkit-details-marker{display:none}
footer .credits summary:before{content:"▸ "}
footer .credits[open] summary:before{content:"▾ "}
footer .credits p{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--muted)}
footer .credits a{color:var(--c9)}

/* ============================================================
   U2 · разгрузка шапки: ☰-меню на узких экранах + кластер иконок.
   Десктоп — иконки в ряд (как было); ≤720px — выпадающее меню.
   ============================================================ */
.top-in{position:relative}                 /* якорь для выпадающего меню */
.menubtn{display:none;align-items:center;justify-content:center}
.hcluster{display:flex;align-items:center;gap:8px}
.icbtn::after{content:attr(data-label);display:none}   /* подпись — только в меню */

@media (max-width:720px){
  .menubtn{display:flex;align-items:center;justify-content:center}
  .hcluster{
    position:absolute;top:calc(100% + 8px);right:0;z-index:130;
    flex-direction:column;align-items:stretch;gap:2px;width:min(80vw,256px);
    padding:7px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;
    box-shadow:0 24px 60px -22px rgba(0,0,0,.55);
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;
    transition:opacity .17s ease,transform .17s ease}
  .hcluster.open{opacity:1;transform:none;pointer-events:auto}
  .hcluster .icbtn{display:flex;align-items:center;width:100%;height:auto;min-height:44px;
    justify-content:flex-start!important;gap:13px;
    border:0;border-radius:9px;padding:9px 13px;background:none;color:var(--ink-2)}
  .hcluster .icbtn:hover{background:var(--paper-2);color:var(--ink)}
  .hcluster .icbtn svg{flex:none;width:19px;height:19px}
  .hcluster .icbtn::after{display:inline;font-family:'Golos Text';font-weight:600;font-size:15.5px;color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){ .hcluster{transition:none} }

/* ============================================================
   U1 · поиск раскрывается в полноэкранный попап (узкие экраны),
   живой список конспектов со словами запроса.
   ============================================================ */
.qpop{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:var(--paper)}
.qpop.open{display:flex}
.qpop-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--card);padding-top:max(12px,env(safe-area-inset-top))}
.qpop-bar input{flex:1;min-width:0;font-family:inherit;font-size:17px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:11px;padding:13px 14px}
.qpop-bar input:focus{outline:none;border-color:var(--c9)}
.qpop-bar input::placeholder{color:var(--faint)}
.qpop-x{flex:none;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink-2);
  background:none;border:0;padding:8px 6px;border-radius:6px}
.qpop-x:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
.qpop-results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 28px}
.qpop-hint{padding:30px 24px;color:var(--muted);font-size:14.5px;line-height:1.6;text-align:center}
.qpop-hint b{color:var(--ink)}
.qr{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;cursor:pointer;border:0;background:none;
  padding:13px 18px;border-bottom:1px solid var(--line);font-family:inherit}
.qr:hover,.qr:focus-visible{background:var(--paper-2);outline:none}
.qr .qre{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--c9)}
.qr .qrt{font-weight:700;color:var(--ink);font-size:16px;line-height:1.3}
.qr .qrs{font-size:12.5px;color:var(--muted);line-height:1.45;font-family:'JetBrains Mono'}
.qr .qrs mark{background:rgba(204,138,44,.34);color:inherit;border-radius:3px;padding:0 1px}
@media (prefers-reduced-motion:no-preference){
  .qpop.open{animation:qpopIn .2s cubic-bezier(.2,.8,.2,1)}
  @keyframes qpopIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ============================================================
   H5 (обновл.) · попап билета: случайный билет открывается на месте,
   без перехода на страницу билетов.
   ============================================================ */
.tpop{position:fixed;inset:0;z-index:260;display:none;padding:5vh 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tpop.open{display:block}
.tpop .veil{position:fixed;inset:0;background:rgba(20,18,14,.55);backdrop-filter:blur(3px)}
.tpanel{position:relative;max-width:620px;margin:0 auto;background:var(--paper);border:1px solid var(--line-2);
  border-radius:14px;overflow:hidden;border-top:4px solid var(--ac,var(--c1));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:qpop .22s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){ .tpanel{animation:none} }
.thead{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.thead .tnum{font-family:'JetBrains Mono';font-size:12px;font-weight:700;color:#fff;background:var(--ac,var(--c1));border-radius:5px;padding:3px 9px;white-space:nowrap}
.thead .tep{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead .tx{font-family:'JetBrains Mono';font-size:19px;line-height:1;color:var(--muted);cursor:pointer;background:none;
  border:1px solid var(--line-2);border-radius:8px;width:36px;height:36px;flex:none;transition:all .15s}
.thead .tx:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.thead .tx:focus-visible{outline:2px solid var(--c9);outline-offset:2px}
.tbody{padding:20px 22px 8px}
.tbody h3{font-family:'Unbounded';font-weight:600;font-size:22px;line-height:1.18;margin-bottom:12px}
.tbody .tg{font-size:16px;color:var(--ink-2);margin-bottom:14px;line-height:1.5}
.tbody .tg b{color:var(--ink)}
.tbody ul.tp{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px;padding:0}
.tbody ul.tp li{position:relative;padding-left:16px;font-size:15px;color:var(--ink-2);line-height:1.45}
.tbody ul.tp li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1px;background:var(--ac,var(--c1));transform:rotate(45deg)}
.tbody ul.tp li b{color:var(--ink)}
.tbody .tdates{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tbody .tdates span{font-family:'JetBrains Mono';font-size:11.5px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.tbody .tw{font-size:14.5px;color:var(--ink-2);background:rgba(204,58,34,.10);border:1px solid rgba(204,58,34,.4);
  border-radius:9px;padding:11px 14px;margin-bottom:6px;line-height:1.45}
.tbody .tw b{color:var(--ink)}
.tbody .tw:before{content:"⚠ ловушка · ";font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.5px;color:#cc3a22;text-transform:uppercase}
.tfoot{display:flex;flex-wrap:wrap;gap:10px;padding:14px 22px 20px}

/* U1 на десктопе: оверлей на весь экран, но содержимое — в центральной колонке */
@media (min-width:721px){
  .qpop-bar{padding-left:max(22px,calc((100% - 760px)/2));padding-right:max(22px,calc((100% - 760px)/2))}
  .qpop-results{max-width:760px;margin:0 auto;width:100%}
  .qpop-bar input{font-size:17px}
}