/* Верхняя «таблетка» · Sasha B.B.B
 *
 * Одно определение на весь сайт: и для styles.css (37 страниц),
 * и для studio.css (4 страницы v2). Раньше их было две копии, и они
 * разъехались — в studio на телефоне навигация пряталась целиком,
 * а в styles уже была прокруткой. Нашёл Codex 30.08.2026.
 *
 * Материал — Liquid Glass, как в iOS 26. Четыре слоя, каждый делает
 * свою работу; подробности в комментариях ниже.
 */

/* ---------- Верхняя «таблетка», как в iOS ----------
   Перенесена со studio.css (страницы v2). Цвета через переменные из tokens.css: с 30.08 набор один на весь сайт,
   и var() отсюда больше не даёт пустоту. Отличие от оригинала одно: там на узком экране
   nav скрывался целиком — на текстовых страницах это оставляло телефон без
   навигации. Здесь он превращается в прокручиваемую строку. */
.pill{position:fixed;inset-inline:0;top:1rem;z-index:20;display:flex;justify-content:center;pointer-events:none}
.pill>div{
  position:relative;isolation:isolate;
  pointer-events:auto;display:flex;align-items:center;gap:1.5rem;
  border:0;border-radius:999px;
  padding:.4rem .45rem .4rem 1.15rem;
  max-width:calc(100vw - 2rem);

  /* СЛОЙ 1 — само стекло, матовое.
     Было 58 % бумаги и saturate(190%). На айфоне поверх геройского фото
     читать было нечего: проблема не в средней контрастности, а в её разбросе —
     цвета снимка проступали ПОД буквами и менялись от места к месту.
     Стало 88 %: материал по-прежнему стеклянный (размытие и подхват цвета
     никуда не делись), но буквы лежат на почти сплошной подложке.
     brightness убран совсем — он подсвечивал фон и съедал остаток контраста. */
  background:color-mix(in oklch, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
  /* Здесь стоял contain:paint ради отзывчивости при прокрутке. Снят 30.08:
     paint-containment делает элемент опорой для position:fixed потомков и
     режет их по своим границам — панель меню обрезалась бы по таблетке.
     Правильность вида важнее экономии перерисовки на элементе такого размера. */

  /* СЛОЙ 2 — толщина и блик.
     Первые две тени — то, как предмет лежит над страницей.
     Две внутренние — то, что делает пластину толстой: яркая линия по верхней
     кромке (прямой свет) и слабая по нижней (отражённый от страницы). */
  box-shadow:
    0 1px 2px oklch(17% .012 55 / .05),
    0 10px 30px -10px oklch(17% .012 55 / .18),
    inset 0 1px 0 oklch(100% 0 0 / .80),
    inset 0 -1px 0 oklch(100% 0 0 / .22);
  transition:background var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
/* СЛОЙ 3 — преломляющая кромка.
   Обычная рамка одинакова по кругу. У стекла край ловит свет неравномерно:
   сверху слева ярко, снизу справа темнее. Рисуется градиентом, из которого
   маской вырезана середина — остаётся кольцо толщиной в пиксель. */
.pill>div::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,
    oklch(100% 0 0 / .95) 0%,
    oklch(100% 0 0 / .28) 32%,
    oklch(17% .012 55 / .10) 58%,
    oklch(100% 0 0 / .62) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;z-index:-1;
}

/* СЛОЙ 4 — зеркальный отблеск.
   Мягкое пятно света от верхнего левого угла. Без него стекло выглядит
   ровно закрашенным; с ним видно, что у поверхности есть кривизна. */
.pill>div::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(125% 90% at 18% -10%,
    oklch(100% 0 0 / .26) 0%, oklch(100% 0 0 / 0) 62%);
  pointer-events:none;z-index:-1;
}

/* Браузер без backdrop-filter получит плотную бумагу вместо стекла:
   читаемость важнее эффекта. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pill>div{background:color-mix(in oklch, var(--paper) 96%, var(--ink));
            border:1px solid var(--rule)}
}
.pill .mark{font-family:var(--display);font-size:1.05rem;
  white-space:nowrap;text-decoration:none;color:var(--ink)}
.pill .mark i{font-style:normal;color:var(--subtle)}
.pill>div>nav{display:flex;gap:1rem;font-size:.9rem;font-weight:400;letter-spacing:normal;
  text-transform:none;justify-content:flex-start}   /* гасим общее правило nav{} */
/* Было var(--muted) — 44 % яркости. Поверх фотографии это край читаемости.
   ink-2 (30 %) даёт запас на любом фоне, а разница с активным пунктом
   остаётся видимой. */
.pill>div>nav a{text-decoration:none;color:var(--ink-2);white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out)}
.pill>div>nav a:hover{color:var(--ink)}
.pill>div>nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.pill .book{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem;border-radius:999px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:.875rem;white-space:nowrap;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .22),
    inset 0 -1px 0 oklch(0% 0 0 / .18),
    0 1px 2px oklch(17% .012 55 / .18);
  transition:background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
/* Блик на кнопке — та же логика, что на таблетке, только короче. */
.pill .book::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg, oklch(100% 0 0 / .18), oklch(100% 0 0 / 0) 52%);
  pointer-events:none;z-index:-1;
}
.pill .book:hover{background:var(--accent);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .28),
    inset 0 -1px 0 oklch(0% 0 0 / .16),
    0 2px 10px -2px var(--accent)}
.pill .book:active{transform:translateY(1px)}
/* Таблетка висит поверх — контенту нужен отступ, иначе первый заголовок под ней. */
body:has(.pill) .page{padding-top:6.5rem}
@media (max-width:52rem){
  /* Ссылки в строке прятались за горизонтальную прокрутку: жест неочевиден,
     половина сайта была недостижима с телефона. Убираем строку целиком —
     на узком экране остаются марка, «Menu» и «Book», а весь сайт живёт
     в панели, которую видно, что можно открыть. */
  .pill>div{gap:.6rem;padding-left:.9rem}
  .pill>div>nav{display:none}   /* только строка ссылок; .menu-cols не трогаем */
  .pill .mark i{display:none}
}
@media (max-width:22rem){
  .pill .menu-label{display:none}
  .pill .menu-btn{padding:0 .7rem}
}

/* ============================================================================
   ПОЛНОЕ МЕНЮ
   ----------------------------------------------------------------------------
   Зачем. До 30.08.2026 на 42 страницах было ПЯТНАДЦАТЬ разных наборов ссылок
   в таблетке: с одной страницы виден один кусок сайта, с другой — другой,
   а с телефона ссылки прятались за горизонтальной прокруткой, о которой
   человек не догадывается. Половина страниц была недостижима.

   Стало: в таблетке остаётся только самое ходовое, всё остальное — в панели,
   которую видно, что можно открыть. Один набор ссылок на весь сайт, поэтому
   разъехаться заново ему негде.

   Ссылки лежат в разметке настоящим текстом, а не собираются скриптом:
   без этого их не увидят ни поисковик, ни языковые модели — а на видимость
   в них этот проект и работает.
   ========================================================================= */

/* Основа — <details>, а не кнопка со скриптом: меню раскрывается даже если
   скрипт не загрузился, и с клавиатуры работает само по себе. Скрипт ниже
   добавляет только удобства: Esc, щелчок мимо, запрет прокрутки фона. */
/* БЕЗ position:relative. С ним <details> становится опорой для панели, и она
   центруется по кнопке «Menu», а не по таблетке: на широком экране правый
   край уезжал за пределы окна (замер: панель 960 px начиналась с 207 при
   окне 1002). Опорой должна быть сама таблетка — у неё position:relative уже
   есть. */
.pill .menu{display:flex}
.pill summary.menu-btn{list-style:none}
.pill summary.menu-btn::-webkit-details-marker{display:none}
.pill .menu-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:0 .95rem;border:0;border-radius:999px;
  background:color-mix(in oklch, var(--ink) 7%, transparent);
  color:var(--ink);font:inherit;font-size:.875rem;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out);
}
.pill .menu-btn:hover{background:color-mix(in oklch, var(--ink) 12%, transparent)}
.pill .menu-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Две черты, складывающиеся в крест. Значок сам показывает, что произойдёт:
   закрыто — «здесь список», открыто — «нажми, чтобы убрать». */
.menu-btn .bars{position:relative;display:block;width:15px;height:11px;flex:none}
.menu-btn .bars i{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:currentColor;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
}
.menu-btn .bars i:first-child{top:1px}
.menu-btn .bars i:last-child{bottom:1px}
.pill .menu[open] .bars i:first-child{transform:translateY(3.75px) rotate(45deg)}
.pill .menu[open] .bars i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* Затемнение страницы. Панель — не всплывашка сбоку, а слой поверх сайта,
   и это должно быть видно, иначе непонятно, куда делся текст. */
.menu-scrim{
  position:fixed;inset:0;z-index:19;border:0;padding:0;
  background:oklch(17% .012 55 / .34);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out);
}
.menu-scrim[data-open]{opacity:1}

/* Панель. Материал тот же, но плотнее таблетки: здесь читают, а не скользят
   взглядом, и просвечивающая фотография мешала бы сильнее. */
/* Панель считается от таблетки, а не от экрана, и это не небрежность.
   backdrop-filter у таблетки делает её опорой для position:fixed — панель
   с fixed получала ширину таблетки (замер: 241 px вместо 343). Поэтому
   absolute от самой таблетки: она уже centered и уже fixed, значит панель
   висит там же, где нужно, и ездит вместе с ней. */
.site-menu{
  position:absolute;z-index:21;top:calc(100% + .55rem);
  left:50%;transform:translateX(-50%);
  width:min(60rem, calc(100vw - 2rem));
  display:flex;justify-content:center;
}
.site-menu>div{
  width:100%;
  max-height:calc(100dvh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;
  border-radius:22px;padding:1.5rem 1.6rem 1.2rem;
  background:color-mix(in oklch, var(--paper) 94%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
  box-shadow:
    0 1px 2px oklch(17% .012 55 / .06),
    0 24px 60px -18px oklch(17% .012 55 / .30),
    inset 0 1px 0 oklch(100% 0 0 / .70);
  transform-origin:top center;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-menu>div{background:color-mix(in oklch, var(--paper) 98%, var(--ink))}
}

/* Появление: короткое и сверху вниз — панель «выезжает» из таблетки,
   а не возникает ниоткуда. */
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.985)}
                   to{opacity:1;transform:none}}
.site-menu>div{animation:menu-in var(--dur-short) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .site-menu>div{animation:none}
  .menu-btn .bars i{transition:none}
  .menu-scrim{transition:none}
}

.menu-cols{
  display:grid;gap:1.4rem 1.4rem;
  /* 10rem, а не 11.5: при 11.5 пять групп не влезали в один ряд и «Languages»
     оставалась одна во второй строке рядом с пустотой. */
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  align-items:start;   /* иначе колонки в одной строке разъезжаются по высоте */
  /* Тема набирает ссылки навигации капителью с разрядкой. В строке таблетки
     это уместно, в колонках меню — нет: заголовки перестают отличаться от
     ссылок, а высота растёт вдвое. Строка таблетки гасит это у себя,
     здесь гасим отдельно. */
  text-transform:none;letter-spacing:normal;font-weight:400;
}
.menu-cols h2{
  font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--subtle);
  margin:0 0 .55rem;padding:0;border:0;
}
.menu-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.menu-cols a{
  text-transform:none;letter-spacing:normal;font-weight:400;
  /* Явно разрешаем перенос. Общее правило темы ставит ссылкам навигации
     white-space:nowrap — в строке таблетки это правильно, а в колонках меню
     превращает длинную подпись в неразрывную полосу: сетка переставала
     сжиматься и вылезала за панель (замер: колонки 225+217 в поле 300). */
  white-space:normal;
  display:block;padding:.42rem 0;text-decoration:none;
  color:var(--ink);font-size:.98rem;line-height:1.35;
  transition:color var(--dur-fast) var(--ease-out);
}
.menu-cols a:hover{color:var(--accent)}
.menu-cols a[aria-current="page"]{font-weight:600}
.menu-cols a small{display:block;font-size:.78rem;color:var(--muted);font-weight:400}

.menu-foot{
  margin-top:1.35rem;padding-top:.95rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.35rem 1.05rem;align-items:center;
}
.menu-foot a,.menu-foot button{
  font-size:.8rem;color:var(--muted);text-decoration:none;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
}
.menu-foot a:hover,.menu-foot button:hover{color:var(--ink)}
.menu-foot .book{margin-left:auto;font-size:.85rem}

@media (max-width:52rem){
  .site-menu>div{padding:1.25rem 1.2rem 1rem;border-radius:20px}
  /* Две колонки, а не одна. В один столбец 22 ссылки давали 1400 px
     прокрутки — меню, которое надо листать, перестаёт быть картой сайта.
     В две всё помещается на экран целиком. Подписи под ссылками здесь же
     снимаем: на телефоне они не помогают, а высоту удваивают. */
  .menu-cols{grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
  .menu-cols a{padding:.34rem 0;font-size:.94rem}
  .menu-cols a small{display:none}
  .menu-foot .book{margin-left:0;width:100%;justify-content:center;margin-top:.5rem}
}
/* Одна колонка только на совсем узких экранах — уже iPhone SE. */
@media (max-width:20rem){
  .menu-cols{grid-template-columns:1fr}
}

/* Пока панель открыта, страница под ней не прокручивается: иначе на телефоне
   уезжает фон, а панель остаётся — выглядит как поломка.
   Только на узком экране: на широком снятие прокрутки убирает полосу справа
   и вся страница дёргается на её ширину. */
@media (max-width:52rem){
  body[data-menu-open]{overflow:hidden}
}