/* =============================================================
   app.css — слой приложения.

   Сборка страницы из примитивов ui.css. Здесь живёт только то,
   чего нет в дизайн-системе: каркас и колонка текста.
   Токенов здесь нет — они все в theme.css.

   Раскладка одноколонная: вся навигация сайта стоит в верхней
   полосе, боковой панели нет. Полоса и колонка текста делят
   одну ширину и одну вертикальную ось — --shell-text.

   Разделы: каркас · верхняя полоса · вкладки групп · документ ·
            страница · адаптив · палец · принудительные цвета ·
            печать
   ============================================================= */

/* ссылка в обход полосы — видна только с клавиатуры.
   :focus добавлен к :focus-visible: в Safari (весь iPhone) при
   переходе по якорю :focus-visible не срабатывает, и ссылка
   прокручивала страницу, оставаясь невидимой */
.skip-link{
  position:fixed;top:var(--space-2);left:var(--space-2);
  z-index:var(--z-tooltip);
  transform:translateY(-250%);
  transition:transform var(--duration) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible{transform:none}

/* =============================================================
   КАРКАС
   Одна колонка: полоса сверху, документ под ней. Лист виден на
   всю ширину окна, ступень 1.22 отделяет его от полосы.
   ============================================================= */
.app{
  display:flex;flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  background:var(--surface-page);
}

/* =============================================================
   ВЕРХНЯЯ ПОЛОСА
   Знак · вкладки групп · тема. Полоса — часть обвязки, а не
   листа: шов с документом даёт ступень 1.22, границы не нужно.

   Внутренний ограничитель повторяет ширину колонки текста,
   поэтому знак, вкладки, надстрока и h1 стоят на одной оси.
   В rem, а не в em: полоса набрана 14px, колонка 16px —
   в em они разъехались бы на 12%.
   ============================================================= */
.topbar{
  position:sticky;top:0;z-index:var(--z-sticky);
  flex:0 0 auto;
  background:var(--surface-desk);
}
.topbar__inner{
  display:flex;align-items:center;gap:var(--space-3);
  width:100%;
  max-width:calc(var(--shell-text) + 2 * var(--page-pad));
  margin-inline:auto;
  min-height:var(--topbar-h);
  padding-inline:var(--page-pad);
}

/* знак отделения: единственный след прежней шапки панели.
   Кольцо по краю — без него светлый круг растворяется в полосе. */
.topbar__mark{
  display:grid;place-items:center;flex:0 0 auto;
  width:var(--row-h);height:var(--row-h);
  border-radius:var(--radius-full);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  font-variant-numeric:tabular-nums;
  color:var(--text-muted);
}
.topbar__mark img{display:block;width:100%;height:100%}
/* для незнакомого отделения знака нет — плитка с номером группы */
.topbar__mark--text{
  border-radius:var(--radius-md);
  background:var(--brand);color:var(--text-on-brand);
  box-shadow:none;
}

.topbar__theme{margin-left:auto;flex:0 0 auto}

/* переключатель темы показывает ту иконку, на которую переключит */
#theme-btn .icon-moon{display:none}
:root[data-theme="dark"] #theme-btn .icon-sun{display:none}
:root[data-theme="dark"] #theme-btn .icon-moon{display:block}

/* =============================================================
   ВКЛАДКИ ГРУПП
   Переключатель из пяти пунктов — то, ради чего раньше держали
   боковую панель во весь экран. Выбранная вкладка залита
   фирменным: это единственное сплошное пятно цвета на странице.
   ============================================================= */
.tabs{
  display:flex;align-items:center;gap:var(--space-1);
  min-width:0;flex:0 1 auto;
  /* пять вкладок не влезают в телефон — полоса прокручивается.
     Своей полосы прокрутки не рисуем: обрезанный край последней
     вкладки сам говорит, что там ещё есть. */
  overflow-x:auto;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:var(--space-2) var(--space-1);
  margin-inline:calc(-1 * var(--space-1));
}
.tabs::-webkit-scrollbar{display:none}

.tab{
  display:inline-flex;align-items:center;flex:0 0 auto;
  height:var(--row-h);
  padding-inline:var(--space-3);
  border-radius:var(--radius-md);
  color:color-mix(in oklab, var(--text-muted) 70%, var(--text));
  font-size:var(--text-sm);line-height:var(--leading-sm);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;text-decoration:none;
  scroll-snap-align:start;
  outline:none;
  transition:background-color var(--duration) var(--ease-in-out),
             color var(--duration) var(--ease-in-out);
}
.tab:hover{background:var(--surface-hover);color:var(--text)}
.tab:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.tab[aria-current="page"]{
  background:var(--brand);           /* к полосе ......... 7.72 / 6.76 */
  color:var(--text-on-brand);        /* на бренде ........ 9.01 / 6.45 */
  font-weight:var(--weight-semibold);
}
.tab[aria-current="page"]:hover{
  background:var(--brand-press);     /* к полосе ......... 9.76 / 9.85 */
  color:var(--text-on-brand);
}

.tabs__ghost{width:4.5rem;height:var(--row-h);flex:0 0 auto}

/* =============================================================
   ДОКУМЕНТ
   Шапка страницы: надстрока с заведением, h1 из main.md, дата
   правки. Ниже — разделы из манифеста и подвал с почтой.
   Раньше разделы и почта жили в боковой панели; на телефоне она
   была закрыта, и о них нельзя было догадаться.
   ============================================================= */
.doc-kicker{
  margin:0 0 var(--space-2);
  font-size:var(--text-sm);line-height:var(--leading-sm);
  font-weight:var(--weight-medium);
  color:var(--text-muted);
}
.doc-stamp{
  display:block;
  margin:calc(-1 * var(--flow-h-bot) + var(--space-1)) 0 var(--flow-p);
  font-size:var(--text-sm);
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

/* раздел документа: материалы, общая информация и всё прочее
   из manifest.panel */
.doc-section{
  margin-top:var(--flow-h-top);
  padding-top:var(--space-6);
  border-top:1px solid var(--line);
}
/* специфичность нарочно выше .ui-prose h2 и .page__body h2:
   это подпись раздела, а не заголовок текста — ни кегля
   заголовка, ни линейки под ним ей не нужно */
.page__body .doc-section > .doc-section__title{
  margin:0 0 var(--space-3);
  padding:0;border:0;
  font-size:var(--text-sm);line-height:var(--leading-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-muted);
}
/* свёрнутый раздел: тот же заголовок, но кликается */
details.doc-section > summary.doc-section__title{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);
  list-style:none;cursor:pointer;
  border-radius:var(--radius-md);
  outline:none;
}
details.doc-section > summary::-webkit-details-marker{display:none}
details.doc-section > summary:hover{color:var(--text)}
details.doc-section > summary:focus-visible{
  outline:var(--focus-ring);outline-offset:var(--focus-offset);
}
.doc-section__chevron{
  width:var(--icon);height:var(--icon);flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--duration) var(--ease-in-out);
}
details.doc-section[open] > summary .doc-section__chevron{transform:rotate(180deg)}

/* подвал: почта. Раньше стояла в подвале панели. */
.doc-foot{
  margin-top:var(--flow-h-top);
  padding-top:var(--space-6);
  border-top:1px solid var(--line);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.doc-mail{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--row-h);
  margin-inline:calc(-1 * var(--space-2));
  padding:var(--space-1_5) var(--space-2);
  border-radius:var(--radius-md);
  color:var(--text-muted);
  text-decoration:none;
  transition:background-color var(--duration) var(--ease-in-out),
             color var(--duration) var(--ease-in-out);
}
/* .ui-prose a красит ссылки синим с подчёркиванием — подвалу
   это лишнее: о том, что строка кликается, говорят иконка
   и подложка. Специфичность нарочно выше .ui-prose a. */
.ui-prose a.doc-mail{color:var(--text-muted);text-decoration:none}
.ui-prose a.doc-mail:hover,
.doc-mail:hover{background:var(--surface-hover);color:var(--text)}
.doc-mail:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.doc-mail svg{
  width:var(--icon);height:var(--icon);flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- строка файла -----------------------------------
   Голая подчёркнутая ссылка не говорит, что за ней PDF, поэтому
   вложение собирается в строку: иконка, название, тип справа. */
.file-list{list-style:none;margin:0;padding-left:0}
.file-list > li{margin:0;padding-left:0}
.file-list > li::before{display:none}
/* .ui-prose ul даёт втяжку под маркеры — списку файлов она мешает */
.ui-prose .file-list{padding-left:0;margin-bottom:0}

.file-row{
  display:flex;align-items:center;gap:var(--space-2);
  min-height:var(--row-h);
  margin-inline:calc(-1 * var(--space-2));
  padding:var(--space-1_5) var(--space-2);
  border-radius:var(--radius-md);
  color:var(--text);
  font-size:var(--text-sm);line-height:var(--leading-sm);
  text-decoration:none;
  transition:background-color var(--duration) var(--ease-in-out),
             color var(--duration) var(--ease-in-out);
}
.file-row:hover{background:var(--surface-hover)}
.file-row:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}
/* .ui-prose красит ссылки синим с подчёркиванием — здесь это лишнее:
   о том, что строка кликается, говорят иконка и подложка */
.ui-prose a.file-row{color:var(--text);text-decoration:none}

.file-row__icon{
  width:var(--icon);height:var(--icon);flex:0 0 auto;
  color:var(--text-muted);
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:color var(--duration) var(--ease-in-out);
}
.file-row:hover .file-row__icon{color:var(--brand)}
.file-row__name{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-row__ext{
  flex:0 0 auto;
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  letter-spacing:.03em;
  color:var(--text-muted);
}

/* числовая колонка в таблицах разделов — по правому краю.
   tabular-nums: иначе 40% и 60% стоят разной ширины */
.doc-section th:last-child,
.doc-section td:last-child{
  text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* =============================================================
   СТРАНИЦА
   Одна колонка по центру окна. Полоса и текст делят одну ось.
   ============================================================= */
.page{
  flex:1 1 auto;
  width:100%;
  max-width:calc(var(--shell-text) + 2 * var(--page-pad));
  margin-inline:auto;
  padding:var(--space-8) var(--page-pad) var(--space-12);
}

.page__body{
  /* --shell-text = 37rem = 592px ≈ 68 знаков кириллицы.
     Прежний clamp(60ch, 34rem + 12vw, 72ch) давал 80—83 знака
     на любом мониторе от 1280 до 2560: обе границы промахивались. */
  width:100%;
  font-size:var(--text-base);
  line-height:var(--leading-prose);
  --flow-p:1.5em;   /* в колонке абзац отбит шире, чем в разделах */
}
.page__body:focus{outline:none}   /* цель skip-link, не интерактивна */

.page__body > h1:first-child,
.doc-kicker + h1{
  font-size:var(--text-h1);   /* rem, не em: заголовок не едет за кеглем колонки */
  letter-spacing:-.014em;     /* было -.022em = -0.66px — частокол на кириллице */
  line-height:var(--leading-tight);
  margin:0 0 var(--flow-h-bot);
}

.page__body h2{
  margin-top:var(--flow-h-top);
  padding-bottom:.3em;
  border-bottom:1px solid var(--line);
}

/* формулы: в строке чуть крупнее текста, блоком — заметно крупнее */
.page__body .katex{font-size:1.05em !important}
.page__body .eq .katex{font-size:1.25em !important}

/* пустое состояние: flex включается точечно, только когда в
   колонке действительно пусто */
.page__body:has(> .ui-empty:only-child){
  display:flex;flex-direction:column;min-height:min(28rem, 60vh);
}

/* =============================================================
   АДАПТИВ
   Структурных переломов больше нет: колонка одна, полоса одна,
   обе просто сужаются вместе с окном. Осталась типографика.
   Перелом продублирован из --bp-narrow: в @media var() не работает.
   ============================================================= */
@media (max-width: 47.5em){          /* = --bp-narrow, 760px */
  /* кегль колонки НЕ понижается: было 14px при телефонной
     аудитории, то есть 14px и был основным кеглем сайта */
  .page__body{
    hyphens:auto;
    hyphenate-limit-chars:8 4 4;   /* «дистанционной» — 13 знаков ≈ 100px
                                      при колонке 343px: без переноса
                                      в строке дыра в четверть меры */
  }
}

/* =============================================================
   ПАЛЕЦ, А НЕ МЫШЬ
   Все классы кликаемого были ровно 32px при рекомендованных 44.
   ============================================================= */
@media (pointer: coarse){
  .file-row,
  .doc-mail,
  details.doc-section > summary.doc-section__title{padding-block:var(--space-3)}
  .tab{height:auto;min-height:var(--tap);padding-block:var(--space-3)}
  .ui-button[data-size="icon-sm"]{width:var(--tap);height:var(--tap)}
}

/* =============================================================
   ПРИНУДИТЕЛЬНЫЕ ЦВЕТА (Windows High Contrast)
   ============================================================= */
@media (forced-colors: active){
  .tab[aria-current="page"]{outline:2px solid Highlight;outline-offset:-2px}
  .ui-tooltip-trigger::after{border:1px solid CanvasText}
  :focus-visible{outline-color:Highlight}
}

/* =============================================================
   ПЕЧАТЬ
   ============================================================= */
@media print{
  /* сдвоенный селектор обязателен: простой :root проиграет
     :root[data-theme="dark"] по специфичности, и лист уйдёт чёрным */
  :root,
  :root[data-theme="dark"]{
    --surface-page:#fff;    --surface-desk:#fff;
    --surface-sunk:#F4F5F7; --surface-hover:transparent; --surface-press:transparent;
    --text:#111827;         /* на белом 17.74 */
    --text-muted:#4B5563;   /* на белом  7.56 */
    --line:#D7DAE0;         /* на белом  1.40 */
    --edge:#8A8F99;         /* на белом  3.25 */
    --brand:#1C3E9E;        /* на белом  9.41 */
    --danger:#B0141A; --danger-solid:#B0141A; --danger-soft:#FBEBEB;
    --text-on-brand:#fff; --text-on-danger:#fff;
  }
  .skip-link{display:none !important}

  /* от полосы на бумаге остаётся только номер группы: вкладки —
     это навигация, печатать её незачем */
  .topbar{position:static;background:none}
  .topbar__inner{padding:0 0 var(--space-3);min-height:0;max-width:none}
  .topbar__mark,.topbar__theme{display:none}
  .tabs{overflow:visible;padding:0;margin:0}
  .tab{display:none}
  .tab[aria-current="page"]{
    display:inline-flex;padding:0;
    background:none;color:var(--text);
    font-weight:var(--weight-semibold);
  }

  .app{display:block;background:none}
  .page{display:block;padding:0;max-width:none}

  @page{ margin:18mm 16mm }
  .page__body{
    /* 37.4em при 11pt = 68 знаков. max-width:none давал ~100 на A4 */
    max-width:145mm;
    font-size:11pt;line-height:1.5;
    hyphens:auto;
  }
  /* свёрнутый раздел на бумаге раскрыт: иначе часть страницы
     просто не попадёт на лист */
  details.doc-section > .doc-section__body{display:block !important}
  details.doc-section .doc-section__chevron{display:none}

  /* на бумаге полосы прокрутки нет: всё, что шире колонки,
     обрезается по правому краю безвозвратно */
  .ui-prose-scroll,.ui-prose pre,.ui-prose .eq{overflow:visible}
  .ui-prose-scroll > table{width:100%}
  .ui-prose .eq{text-align:left}
  .page__body a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:.85em;word-break:break-all;
  }
  .page__body h1,.page__body h2,.page__body h3{break-after:avoid}
  .page__body li,.page__body .eq,.page__body table,.page__body pre{break-inside:avoid}
}