/* ============================================================================
   chrome.css — ОБВЯЗКА САЙТА: шапка, меню, подвал, skip-link.
   Единственное место, где они описаны. Подключается КАЖДОЙ страницей.

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ КУСОК styles.css. Печатные листы не грузят
   styles.css: у них своя типографика и свои правила печати, и смешивать
   их нельзя. Пока шапка жила в styles.css, у /sheets/ была ВТОРАЯ шапка,
   своей вёрстки, со своим меню — и в этом меню не было половины разделов.
   Женя: «как будто совсем другой сайт открывается». Причина была не в
   забывчивости, а в том, что шапок было две.

   СВОИ ИМЕНА ПЕРЕМЕННЫХ (--ch-*), И ЭТО ГЛАВНОЕ РЕШЕНИЕ ФАЙЛА.
   sheet.css переопределяет :root-токены с теми же именами, что и
   styles.css (--ink, --line, --coral). Обвязка, написанная на общих
   именах, на печатных листах перекрасилась бы: --line там чёрный.
   Namespace делает её невосприимчивой к тому, что грузит раздел, — и
   именно поэтому шапка одинакова ВЕЗДЕ, а не «почти везде».

   Добавляешь раздел — правишь deploy/siw_chrome.py, а не эти стили и не
   разметку страниц. Разметку перепишет deploy/build_chrome.py, а
   deploy/audit.py уронит заливку, если где-то осталась старая.
   ========================================================================== */

:root {
  --ch-bg: #fbf9f4;
  --ch-fg: #1a1d1f;
  --ch-fg-2: #5b6360;
  --ch-fg-3: #606a66;
  --ch-line: #d8d0c0;
  --ch-hover: #f3efe5;
  --ch-sel: #f6e3df;
  --ch-accent: #ad3c2c;
  --ch-teal: #4a7a7e;
  --ch-radius: 5px;
  --ch-f-d: "Anton", Impact, system-ui, sans-serif;
  --ch-f-t: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ch-f-m: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ch-bg: #191d20;
    --ch-fg: #e9e4d9;
    --ch-fg-2: #a2aba7;
    --ch-fg-3: #9ba7a1;
    --ch-line: #2b3236;
    --ch-hover: #222829;
    --ch-sel: #332624;
    --ch-accent: #f0796b;
    --ch-teal: #6fa3a7;
  }
}
:root[data-theme="dark"] {
  --ch-bg: #191d20;
  --ch-fg: #e9e4d9;
  --ch-fg-2: #a2aba7;
  --ch-fg-3: #9ba7a1;
  --ch-line: #2b3236;
  --ch-hover: #222829;
  --ch-sel: #332624;
  --ch-accent: #f0796b;
  --ch-teal: #6fa3a7;
}
:root[data-theme="light"] {
  --ch-bg: #fbf9f4;
  --ch-fg: #1a1d1f;
  --ch-fg-2: #5b6360;
  --ch-fg-3: #606a66;
  --ch-line: #d8d0c0;
  --ch-hover: #f3efe5;
  --ch-sel: #f6e3df;
  --ch-accent: #ad3c2c;
  --ch-teal: #4a7a7e;
}

/* ── переход к содержимому ───────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  padding: 10px 14px; border-radius: var(--ch-radius);
  background: var(--ch-fg); color: var(--ch-bg);
  font: 500 13px/1 var(--ch-f-t); text-decoration: none;
}
.skip-link:focus-visible { top: 8px; }

/* ── ШАПКА ───────────────────────────────────────────────────────────── */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 14px;
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-line);
  font-family: var(--ch-f-t);
  /* Шапка не участвует в переходе между страницами как часть общего
     снимка — она остаётся на месте, пока меняется всё под ней. Без
     этого меню «мигает» на каждом переходе. */
  view-transition-name: siw-bar;
}
.app-bar .brand {
  font: 400 17px/1 var(--ch-f-d);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  color: var(--ch-fg); text-decoration: none;
}
.app-bar .brand:hover { text-decoration: none; }
.app-bar .brand b { color: var(--ch-accent); font-weight: 400; }

.app-nav {
  display: flex; gap: 2px; margin-left: 4px;
  /* Меню длиннее экрана на телефоне — уезжает вбок в СВОЁМ скролле,
     а не переносится на вторую строку и не растягивает шапку. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-nav::-webkit-scrollbar { display: none; }
/* ЦЕЛЬ НАЖАТИЯ. Замер 2026-09-20 на телефоне: пункты меню были 20 px
   в высоту при минимуме 24 (WCAG 2.5.8) и рекомендации 44 для тех, у
   кого зрение и точность уже не те. Половина аудитории — медсёстры за
   пятьдесят, и промах по меню они считают своей виной, а не нашей. */
.app-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 11px; border-radius: var(--ch-radius);
  color: var(--ch-fg-2); font-size: 14.5px; white-space: nowrap;
  text-decoration: none;
}
.app-nav a:hover { background: var(--ch-hover); color: var(--ch-fg); text-decoration: none; }
.app-nav a[aria-current] { background: var(--ch-sel); color: var(--ch-fg); font-weight: 600; }

.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ch-fg-2); }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ch-teal); color: #fff;
  font: 600 9.5px/22px var(--ch-f-t); text-align: center; letter-spacing: .04em;
}
.clock { font-size: 12px; color: var(--ch-fg-3); }

.icon-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--ch-line); border-radius: 50%;
  background: var(--ch-bg); color: var(--ch-fg-2);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: var(--ch-hover); color: var(--ch-fg); }
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .moon { display: block; }
  :root:not([data-theme="light"]) .icon-btn .sun { display: none; }
}

/* ── ПОДВАЛ ──────────────────────────────────────────────────────────── */
.foot {
  background: var(--ch-bg); border-top: 1px solid var(--ch-line);
  padding: 26px 0 34px; margin-top: 32px;
  font-family: var(--ch-f-t); color: var(--ch-fg-2);
}
.foot-in {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1580px; margin: 0 auto; padding: 0 14px;
}
.foot-mark { display: flex; align-items: baseline; gap: 12px; }
.foot-wm { font: 400 20px/1 var(--ch-f-d); text-transform: uppercase; color: var(--ch-fg); }
.foot-unit { font: 400 11px/1 var(--ch-f-m); color: var(--ch-fg-3); letter-spacing: .1em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14px; }
/* ПОДВАЛ — ЭТО ТОЖЕ НАВИГАЦИЯ, и на телефоне часто единственная: на
   длинной странице человек доезжает до низа и ищет, куда дальше.
   Замер 2026-09-20: все пятнадцать ссылок были 20 px в высоту — самая
   мелкая цель на сайте. Подчёркивание постоянное, а не по наведению:
   на телефоне наведения не бывает, и ссылка без подчёркивания в
   подвале не отличается от подписи. */
.foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 2px; color: var(--ch-teal);
  text-decoration: underline; text-underline-offset: 3px;
}
.foot-nav a:hover { text-decoration: underline; }
.foot-mark a, .foot-wm { min-height: 44px; display: inline-flex; align-items: center; }
/* 13px, а не 11.5: это дисклеймер, который люди действительно читают,
   когда решают, можно ли нам верить. */
.foot-fine, .foot-legal {
  font-size: 13px; color: var(--ch-fg-3); max-width: 74ch; line-height: 1.55;
}

/* ── ПЕЧАТЬ ──────────────────────────────────────────────────────────── */
/* Обвязка на бумаге не нужна никому. Раньше это делалось классом
   no-print в разметке каждого листа — то есть опять руками. */
@media print {
  .app-bar, .foot, .skip-link, .progress { display: none !important; }
}

@media (max-width: 560px) {
  .app-bar { gap: 6px; padding: 0 10px; }
  .app-bar .brand { font-size: 15px; }
  .app-nav a { padding: 0 9px; font-size: 13.5px; }
}

/* ── ЛИЦО РАЗДЕЛА В ПОДВАЛЕ ──────────────────────────────────────────────
   Персонаж стоит В подвале, а не лежит на нём: фон у файла прозрачный,
   низ растворён маской ещё при отрисовке. Рамки нет нарочно — рамка
   вокруг портрета и есть то самое «тупо картинка».

   Он на КАЖДОЙ странице сайта, и у каждого раздела свой. Это и делает
   разделы разными при одном и том же оформлении. */
.foot-mascot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 6px;
}
.foot-mascot img {
  width: 76px;
  flex: 0 0 auto;
  margin-bottom: -10px;          /* чуть тонет в подвале */
}
.foot-say {
  font: italic 400 14.5px/1.5 var(--ch-f-t);
  color: var(--ch-fg-2);
  max-width: 34ch;
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .foot-mascot img { width: 60px; }
  .foot-say { font-size: 13.5px; }
}