/* ============ СЛОЙ ОФОРМЛЕНИЯ СТРАНИЦЫ ============
   Полоса прочтения, ссылка «к содержимому», липкие вкладки, подсветка
   карточки под курсором, кнопка возврата наверх, уведомления и печать.
   Разметку для всего этого создаёт js/ui.js — в index.html лежит только
   ссылка пропуска, потому что она должна работать до всякого скрипта. */

/* ---------- ссылка пропуска навигации ---------- */
/* Первый Tab на странице попадает сюда: клавиатурному пользователю не
   нужно проходить поиск, переключатель темы и три вкладки, чтобы
   добраться до содержимого. Видимой становится только в фокусе. */
.skip-link{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-160%);
  padding:10px 16px;border-radius:10px;font-size:13px;font-weight:650;text-decoration:none;
  background:var(--tip-bg);border:1px solid var(--accent-line);color:var(--accent);
  box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.8,.3,1);}
.skip-link:focus{transform:none;outline:2px solid var(--accent);outline-offset:2px;}

/* содержимое строится скриптами: без них честно говорим об этом,
   а не оставляем пустой экран */
.noscript-note{position:relative;z-index:1;max-width:1440px;margin:20px auto 0;
  padding:14px 18px;border-radius:var(--radius-sm);font-size:13px;line-height:1.55;
  color:var(--body);background:var(--surface);border:1px solid var(--stroke);}
#content:focus{outline:none;}
#content:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px;}

/* ---------- полоса прочтения ---------- */
.read-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;
  transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);
  background:linear-gradient(90deg in oklab,var(--accent) 0%,var(--accent-2) 100%);
  box-shadow:0 0 12px -2px var(--accent-line);}

/* ---------- липкие вкладки ---------- */
.tabs-sentinel{height:1px;margin-bottom:-1px;pointer-events:none;}
.tabs{position:sticky;top:10px;z-index:25;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;}
.tabs.is-stuck{
  background:color-mix(in srgb,var(--tip-bg) 92%,transparent);
  border-color:var(--stroke-2);box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);}
/* панель списка партий тоже липкая — опускаем её ниже полосы вкладок,
   иначе карточка партии подъезжала бы под них при прокрутке */
@media(min-width:1051px){
  .side{top:78px;max-height:calc(100vh - 104px);}
}

/* ---------- подсветка карточки под курсором ---------- */
/* Пятно живёт в отдельном слое поверх подложки, но под содержимым:
   так оно не осветляет текст и не мешает кликам. Координаты приходят
   из js/ui.js в --mx/--my; без скрипта слой просто прозрачен.

   z-index:-1 кладёт пятно между фоном карточки и её содержимым, а
   isolation:isolate удерживает его внутри карточки — без своего слоя
   отрицательный индекс ушёл бы под фон и стал невидимым. Собственный
   слой карточки не мешает ни меню экспорта, ни подсказке: оба лежат
   внутри той же карточки и сохраняют свой порядок относительно неё. */
.card{--mx:50%;--my:0%;isolation:isolate;}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(340px circle at var(--mx) var(--my),
    color-mix(in srgb,var(--accent) 10%,transparent) 0%,
    color-mix(in srgb,var(--accent) 5%,transparent) 28%,
    transparent 62%);
  opacity:0;transition:opacity .35s ease;}
.card:hover::after{opacity:1;}
@media(hover:none),(prefers-reduced-motion:reduce){
  .card::after{display:none;}
}

/* ---------- возврат наверх ---------- */
.to-top{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:55;
  width:44px;height:44px;border-radius:14px;cursor:pointer;font-size:17px;line-height:1;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--tip-bg) 92%,transparent);
  border:1px solid var(--stroke-2);color:var(--text);box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1),visibility .25s,
             border-color .16s ease,background .16s ease;}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{border-color:var(--accent-line);color:var(--accent);transform:translateY(-2px);}
.to-top:active{transform:scale(.94);}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- уведомления ---------- */
.toasts{position:fixed;left:50%;bottom:clamp(14px,3vw,28px);transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:min(420px,calc(100vw - 32px));}
.toast{
  pointer-events:auto;cursor:pointer;max-width:100%;
  padding:11px 16px;border-radius:12px;font-size:12.5px;font-weight:550;line-height:1.4;
  color:var(--text);background:color-mix(in srgb,var(--tip-bg) 94%,transparent);
  border:1px solid var(--stroke-2);box-shadow:var(--shadow-lift);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  overflow-wrap:anywhere;text-align:center;
  animation:toast-in .3s cubic-bezier(.2,.9,.3,1) both;}
.toast::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:9px;vertical-align:1px;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}
.toast.bad{border-color:color-mix(in srgb,#f85149 45%,var(--stroke-2));}
.toast.bad::before{background:#f85149;box-shadow:0 0 0 3px rgba(248,81,73,.18);}
.toast.out{animation:toast-out .3s ease both;}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97);}}

@media(max-width:720px){
  /* на узком экране кнопка возврата наверх встала бы прямо на уведомления */
  .toasts{bottom:70px;}
}

/* ---------- печать ---------- */
/* Печатается содержание, а не интерфейс: фон, поиск, вкладки, кнопки
   и подвальная навигация уходят, карточки становятся плоскими рамками
   на белом, ссылки раскрываются адресами. */
@media print{
  .grain,.read-bar,.to-top,.toasts,.tools,.tabs,.tabs-sentinel,
  .chips,.trail-chip,.export-wrap,.conv-select,.data-toggle,
  .foot-col,.tip,.c-tip,.hemi-center{display:none!important;}
  body{background:#fff!important;color:#000;}
  body::after{display:none!important;}
  .shell{max-width:none;padding:0;}
  .panel[hidden]{display:block!important;}
  .card,.stat,.about-card{background:#fff!important;border:1px solid #ccc!important;
    box-shadow:none!important;backdrop-filter:none!important;break-inside:avoid;}
  .card::after,.card::before{display:none!important;}
  .grid,.charts,.about{display:block!important;}
  .card,.stat{margin-bottom:12px;}
  .side{position:static!important;max-height:none!important;}
  .scroll{overflow:visible!important;}
  .about-card a::after{content:" (" attr(href) ")";font-size:10px;color:#555;}
}