/* =========================================================================================
   HolyHome Web — ДИЗАЙН-СИСТЕМА приложения.
   Источник истины по визуалу — BRAND.md рядом. Здесь то, что едино для всех разделов:
   палитры, радиусы, тени, типографика, каркас, навигация, угол управления (язык + тема).

   Правка 20.09.2026: палитра собрана из референсов владельца (тёплая бумага + чернильный
   синий + терракота). Старые имена токенов (--bg, --card, --amber, --yes, --no…) СОХРАНЕНЫ
   как алиасы на новые значения — иначе уже написанные экраны порвутся. Новый код пишем
   на новых именах (--canvas, --surface, --brand, --accent…).
   ========================================================================================= */

/* ═══════════════════════ 1. ТОКЕНЫ ═══════════════════════
   Переключение — атрибутом data-theme на <html>. Если пользователь не выбирал сам,
   идём за системной настройкой; выбор запоминается в localStorage (см. app.js). */

:root,
:root[data-theme="dark"]{
  /* — поверхности «ночь»: тот же чернильный синий, уведённый в темноту — */
  --canvas:#131A29;
  --canvas-2:#171F30;
  --surface:#1A2233;
  --surface-2:#222C40;
  --surface-3:#2A3550;
  --line:#2C374E;
  --line-soft:#232C40;

  /* — чернила — */
  --ink:#ECE7DD;
  --ink-soft:#A6B0C2;
  --ink-mute:#828FA8;

  /* — смысловые цвета — */
  --brand:#86B6EA;         --brand-on:#101726;
  --brand-soft:rgba(134,182,234,.13);  --brand-line:rgba(134,182,234,.30);
  --accent:#F0977C;        --accent-on:#231208;
  --accent-soft:rgba(240,151,124,.13); --accent-line:rgba(240,151,124,.30);
  --sage:#6FC79E;          --sage-soft:rgba(111,199,158,.12);  --sage-line:rgba(111,199,158,.28);
  --rose:#F08296;          --rose-soft:rgba(240,130,150,.12);  --rose-line:rgba(240,130,150,.28);
  --sky:#9AC4E4;           --sky-soft:rgba(154,196,228,.12);   --sky-line:rgba(154,196,228,.28);
  --sand:#DFC69F;          --sand-soft:rgba(223,198,159,.12);  --sand-line:rgba(223,198,159,.26);

  /* — глубина: в темноте тень почти не читается, работу берёт подсветка кромки — */
  --sh-1:0 1px 2px rgba(0,0,0,.30), 0 3px 10px -6px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.34), 0 16px 34px -18px rgba(0,0,0,.66);
  --sh-3:0 6px 16px rgba(0,0,0,.38), 0 32px 60px -26px rgba(0,0,0,.72);
  --edge:inset 0 1px 0 rgba(255,255,255,.05);

  --nav-bg:#161E2E;      /* плотный: блюра под ним больше нет */
  --scrim:rgba(8,12,21,.62);

  /* — нижняя капсула (11.10.2026, референс владельца): плотная, с рамкой и подсветкой
     кромки; активный раздел — приподнятая вкладка на полтона светлее капсулы — */
  --nav-solid:#1A2233;
  --nav-line:#2C374E;
  --nav-ink:#A6B0C2;
  --nav-pill:#273149;
  --nav-pill-line:#36425E;
  --nav-pill-sh:0 2px 4px rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
  --nav-sh:0 2px 6px rgba(0,0,0,.4), 0 20px 40px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme:dark;
}

:root[data-theme="light"]{
  /* — поверхности «бумага»: тёплый крем вместо стерильно-белого — */
  --canvas:#F5F0E8;
  --canvas-2:#EFE9DF;
  --surface:#FFFDF9;
  --surface-2:#EDE7DC;
  --surface-3:#E4DCCE;
  --line:#E3DACB;
  --line-soft:#EFE8DC;

  --ink:#1B2B45;
  --ink-soft:#566277;
  --ink-mute:#79839A;

  --brand:#15406B;         --brand-on:#FFFDF9;
  --brand-soft:#E4EAF2;    --brand-line:#C9D6E4;
  /* терракота на полтона глубже и плашка светлее, чем были изначально: пара
     #A84B2E на #F3D9CE давала 4.21 — ниже нормы AA (4.5). Поймано тестом
     test-design-system, а не на глаз. Стало 5.2 : 1. */
  --accent:#9F4526;        --accent-on:#FFFDF9;
  --accent-soft:#F7E6DE;   --accent-line:#EBC8B6;
  --sage:#2B7256;          --sage-soft:#E7F0E6;  --sage-line:#C7DECB;
  --rose:#A93A4F;          --rose-soft:#F6DEE2;  --rose-line:#E6C2CA;
  --sky:#37709C;           --sky-soft:#DCE9F2;   --sky-line:#C2D8E8;
  --sand:#8A6A3A;          --sand-soft:#F7E7CF;  --sand-line:#E8D3B4;

  --sh-1:0 1px 2px rgba(27,43,69,.05), 0 3px 10px -6px rgba(27,43,69,.12);
  --sh-2:0 2px 5px rgba(27,43,69,.05), 0 14px 30px -16px rgba(27,43,69,.22);
  --sh-3:0 5px 14px rgba(27,43,69,.06), 0 30px 56px -24px rgba(27,43,69,.28);
  --edge:inset 0 1px 0 rgba(255,255,255,.65);

  --nav-bg:#F7F3EC;      /* плотный: блюра под ним больше нет */
  --scrim:rgba(27,43,69,.40);

  /* — нижняя капсула: в светлой теме приподнятая вкладка на полтона ГЛУБЖЕ капсулы,
     с тенью и светлой кромкой — как в референсе владельца — */
  --nav-solid:#FFFDF9;
  --nav-line:#EAE2D5;
  --nav-ink:#566277;
  --nav-pill:#F2ECE2;
  --nav-pill-line:transparent;
  --nav-pill-sh:0 1px 2px rgba(27,43,69,.10), 0 7px 16px -7px rgba(27,43,69,.30), inset 0 1px 0 #fff;
  --nav-sh:0 2px 5px rgba(27,43,69,.06), 0 18px 36px -14px rgba(27,43,69,.32);
  color-scheme:light;
}

/* ═══════════════ РЕДИЗАЙН «КОЛОДА» (21.09.2026) ═══════════════
   Владелец: уйти от вида, по которому не отличить одно приложение от другого, сохранив
   палитру отправной точкой. Решение: каждая единица смысла — тема разбора, вопрос теста,
   нужда, формат, раздел пульта — живёт как КАРТА со своим номером и местом в стопке.

   Что отсюда следует для токенов:
   · у карты есть ЛИЦО (--deck-face) и КРОМКА (--deck-edge). Отделение от фона идёт кромкой
     и сдвигом, а НЕ размытым пятном: пара «тонкая рамка + широкая мягкая тень» — подпись
     генератора, детектор находил её в пяти местах приложения;
   · есть РУБАШКА (--deck-back) — тёплый коричневый, цвет обратной стороны и стопки;
   · есть цвет НОМЕРА (--deck-num), приглушённая охра: номер обязан читаться как маркировка,
     а не спорить с содержимым карты.
   Префикс deck- намеренный: имя --card в этом файле уже занято старым алиасом на --surface,
   и переопределение тихо сломало бы экраны, написанные до редизайна. */
:root, :root[data-theme="dark"]{
  --deck-face:#1D2637;
  --deck-edge:#36415A;
  --deck-edge-hot:#5F6E91;
  --deck-back:#2A2118;
  --deck-num:#BE9860;
  --sel:rgba(240,151,124,.30);   /* выделение текста — от терракоты, а не системное синее */
}
:root[data-theme="light"]{
  --deck-face:#FFFCF6;
  --deck-edge:#E0D5C2;
  --deck-edge-hot:#BFAD91;
  --deck-back:#EFE3D2;
  --deck-num:#916B33;
  --sel:rgba(159,69,38,.20);
}

:root{
  /* Активный раздел в капсуле — терракота, как оранжевый в референсе владельца
     (11.10.2026). Ссылка на --accent, поэтому цвет сам переключается с темой. */
  --nav-on:var(--accent);

  /* — геометрия: крупные мягкие радиусы, как в референсах — */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:32px; --r-pill:999px;
  --gap:12px;
  --tap:44px;                 /* минимальная зона касания (Apple HIG) */

  /* ═══ ДВА ГОЛОСА ВМЕСТО ОДНОГО ═══
     Unbounded звучит ТОЛЬКО на крупном — он и делает экран узнаваемым; Golos несёт всю
     остальную работу и рисовался под кириллицу, поэтому русский текст в нём ровный.
     Подробности и вес файлов — в fonts.css. */
  --font-display:"Unbounded", "Golos", system-ui, sans-serif;
  --font-text:"Golos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ═══ БОКОВОЙ ОТСТУП ЭКРАНА — ОДИН НА ВСЁ ПРИЛОЖЕНИЕ ═══
     Правило владельца 21.09.2026: содержимое отбито от краёв ОДИНАКОВО везде —
     на сайте, в пульте, в будущих профилях, в шапке и в теле страницы.
     Раньше каждый экран решал сам: 12px на доске, 14px в тесте, 16px в пульте,
     20px на публичных — разнобой был виден на глаз при переходах.
     Значение растёт ступенями вместе с шириной; правится ТОЛЬКО здесь. */
  --gutter:16px;              /* узкие телефоны (до 360px) */

  /* — АЛИАСЫ на старые имена: экраны, написанные до 20.09.2026, продолжают работать — */
  --bg:var(--canvas);
  --bg-elev:var(--canvas-2);
  --card:var(--surface);
  --card-soft:var(--surface-2);
  --card-line:var(--line);
  --card-line-soft:var(--line-soft);
  --amber:var(--accent);
  --amber-ink:var(--accent-on);
  --amber-soft:var(--accent-soft);
  --amber-line:var(--accent-line);
  --yes:var(--sage);
  --yes-dim:var(--sage-soft);
  --yes-soft:var(--sage-soft);
  --yes-line:var(--sage-line);
  --no:var(--rose);
  --no-dim:var(--rose-soft);
  --shadow:var(--sh-2);
  --radius:var(--r-md);
}

/* мягкий переход при РУЧНОЙ смене темы (класс вешает app.js) — не при загрузке,
   иначе страница «переливается» на старте */
html.theme-anim,
html.theme-anim body,
html.theme-anim .card, html.theme-anim .tool, html.theme-anim .row,
html.theme-anim .hh-nav, html.theme-anim .hh-card, html.theme-anim .hh-ctl-btn,
html.theme-anim .hh-side, html.theme-anim .hh-tabbar, html.theme-anim .hh-cap,
html.theme-anim .hh-navtabs{
  transition:background-color .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
@media (prefers-reduced-motion:reduce){
  html.theme-anim, html.theme-anim *{transition:none !important; animation:none !important;}
}

/* ═══════════════════════ 2. АДАПТИВНАЯ ШИРИНА ═══════════════════════
   Телефон — базовый приоритет. Дальше ступени. На большом мониторе контент получает
   простор, но текст не растягивается в нечитаемую строку — за это отвечает сетка. */
.hh-wrap{
  width:100%; max-width:640px; margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
@media (min-width:361px){  :root{ --gutter:20px; } }
@media (min-width:700px){  :root{ --gutter:24px; } }
@media (min-width:1000px){ :root{ --gutter:28px; } }
@media (min-width:1400px){ :root{ --gutter:34px; } }
@media (min-width:700px){  .hh-wrap{ max-width:720px;  } }
@media (min-width:1000px){ .hh-wrap{ max-width:980px;  } }
@media (min-width:1400px){ .hh-wrap{ max-width:1260px; } }
@media (min-width:1800px){ .hh-wrap{ max-width:1500px; } }

.hh-grid{display:flex; flex-direction:column; gap:var(--gap);}
@media (min-width:860px){
  .hh-grid.cols-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; }
}
@media (min-width:1400px){ .hh-grid.cols-2{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1800px){ .hh-grid.cols-2{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ═══════════════════════ 3. НАВИГАЦИЯ ═══════════════════════
   Нужна в PWA: там нет ни адресной строки, ни кнопки «назад» браузера. */
.hh-nav{
  position:sticky; top:0; z-index:40;
  /* +8px сверх безопасной зоны: с Safari 26 система рисует поверх верхней кромки
     полосу Liquid Glass, и элементы, прижатые к самому краю, ею «замазываются».
     Небольшой запас уводит содержимое шапки из-под этой полосы. */
  padding-top:calc(env(safe-area-inset-top) + 8px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  /* Блюра больше нет (решение владельца 21.09.2026). Он стоял на части шапок и не
     стоял на других, и приложение выглядело собранным из разных кусков: где-то фон
     «размазывался», где-то нет, и объяснить эту разницу было нечем. Плотная кромка
     читается чище, одинакова везде и не спорит с системным стеклом iOS. */
}
.hh-nav-inner{
  display:flex; align-items:center; gap:10px;
  min-height:52px;
  /* вертикальные отступы свои, боковые — общий токен */
  padding:7px var(--gutter);
  width:100%; max-width:640px; margin:0 auto;
}
@media (min-width:700px){  .hh-nav-inner{ padding:8px var(--gutter); min-height:56px; max-width:720px; } }
@media (min-width:1000px){ .hh-nav-inner{ padding:8px var(--gutter); max-width:980px; } }
@media (min-width:1400px){ .hh-nav-inner{ padding:8px var(--gutter); max-width:1260px; } }
@media (min-width:1800px){ .hh-nav-inner{ max-width:1500px; } }

.hh-back{
  display:inline-flex; align-items:center; gap:5px;
  border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13.5px;
  min-height:var(--tap); padding:0 10px 0 6px; border-radius:var(--r-xs);
  -webkit-tap-highlight-color:transparent;
  text-decoration:none; color:var(--ink-soft);
  transition:color .16s ease;
}
.hh-back:hover{color:var(--ink);}
.hh-back:active{transform:scale(.96);}
.hh-back .chev{font-size:17px; line-height:1;}

.hh-crumbs{
  display:flex; align-items:center; gap:6px; flex:1; min-width:0;
  font-size:12.5px; font-weight:600; overflow:hidden; white-space:nowrap;
  color:var(--ink-soft);
}
.hh-crumbs a{text-decoration:none; color:var(--ink-soft); opacity:.85;}
.hh-crumbs a:hover{opacity:1; color:var(--ink);}
.hh-crumbs .sep{opacity:.45;}
.hh-crumbs .cur{font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis;}
@media (max-width:479px){ .hh-crumbs .hide-sm{display:none;} }

/* ═══════════════════════ 4. УГОЛ УПРАВЛЕНИЯ: ЯЗЫК + ТЕМА ═══════════════════════
   Требование владельца 20.09.2026: на ЛЮБОМ экране (кроме пульта лидера) в правом верхнем
   углу — ровно две кнопки-иконки. Глобус открывает выбор языка списком, вторая переключает
   тему. Никаких трёх кнопок RU/EN/FR в ряд: они занимали место и выглядели по-разному
   на каждой странице. */
.hh-ctl{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:auto; flex:0 0 auto;
}
.hh-ctl-btn{
  position:relative;
  width:38px; height:38px; min-width:38px; border-radius:var(--r-xs);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* реальная зона касания добивается до 44px невидимой областью — визуально кнопка
   остаётся компактной, но пальцем попадаешь без промаха (Apple HIG) */
.hh-ctl-btn::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--tap); height:var(--tap);
}
.hh-ctl-btn:hover{color:var(--ink); border-color:var(--ink-mute); box-shadow:var(--sh-1);}
.hh-ctl-btn:active{transform:scale(.94);}
.hh-ctl-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.hh-ctl-btn svg{width:18px; height:18px; display:block;}

/* значок языка: глобус + текущий код рядом, чтобы язык было видно без открытия */
.hh-ctl-btn.lang{width:auto; min-width:56px; padding:0 9px; gap:5px;}
.hh-ctl-btn.lang .code{
  font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--ink);
}

/* солнце в тёмной теме (= «включить светлую»), луна в светлой */
.hh-ctl-btn .i-sun{display:none;}
.hh-ctl-btn .i-moon{display:block;}
:root[data-theme="dark"] .hh-ctl-btn .i-sun{display:block;}
:root[data-theme="dark"] .hh-ctl-btn .i-moon{display:none;}

/* выпадающий выбор языка */
.hh-langpop{
  /* fixed, а не absolute: попап не должен обрезаться прокруткой или overflow у шапки.
     Координаты выставляет app.js по месту кнопки. */
  position:fixed; z-index:120; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-3); padding:6px;
  opacity:0; transform:translateY(-6px) scale(.97); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.hh-langpop.on{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.hh-langpop button{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:var(--tap); padding:0 10px; border:none; border-radius:var(--r-xs);
  background:transparent; color:var(--ink); font-family:inherit;
  font-size:14px; font-weight:600; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.hh-langpop button:hover{background:var(--surface-2);}
.hh-langpop button .flagcode{
  flex:0 0 auto; width:30px; font-size:11px; font-weight:800; letter-spacing:.05em;
  color:var(--ink-mute);
}
.hh-langpop button[aria-checked="true"]{background:var(--brand-soft); color:var(--brand);}
.hh-langpop button[aria-checked="true"] .flagcode{color:var(--brand);}
.hh-langpop button .tick{margin-left:auto; opacity:0; font-weight:900;}
.hh-langpop button[aria-checked="true"] .tick{opacity:1;}

/* на телефоне выбор языка — лист снизу: до верхнего угла большим пальцем не дотянуться */
@media (max-width:599px){
  .hh-langpop{
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    top:auto !important; min-width:0; border-radius:var(--r-lg); padding:8px;
    transform:translateY(14px);
  }
  .hh-langpop.on{transform:translateY(0);}
  .hh-langpop button{min-height:52px; font-size:15.5px;}
}
.hh-langscrim{
  position:fixed; inset:0; z-index:110; background:transparent;
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.hh-langscrim.on{pointer-events:auto;}
@media (max-width:599px){
  .hh-langscrim{background:var(--scrim);}
  .hh-langscrim.on{opacity:1;}
}

/* старое имя переключателя темы — чтобы уже написанные экраны не потеряли кнопку */
.hh-theme{
  margin-left:auto; flex:0 0 auto;
  width:38px; height:38px; border-radius:var(--r-xs);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.hh-theme:hover{color:var(--ink); border-color:var(--ink-mute);}
.hh-theme:active{transform:scale(.94);}
.hh-theme svg{width:18px; height:18px; display:block;}
.hh-theme .i-sun{display:none;} .hh-theme .i-moon{display:block;}
:root[data-theme="dark"] .hh-theme .i-sun{display:block;}
:root[data-theme="dark"] .hh-theme .i-moon{display:none;}

/* ═══════════════════════ 4½. БРАУЗЕРНЫЕ ПОВЕРХНОСТИ ═══════════════════════
   То, что рисует не приложение, а браузер: выделение текста, курсор ввода, кольцо
   фокуса, полосы прокрутки, цифры в данных. По умолчанию всё это приходит из чужой
   системы — системно-синее выделение поверх кремовой бумаги выдаёт, что страницу
   собрали, а не сделали. Это самый дешёвый признак и он же чаще всего пропускается. */

::selection{ background:var(--sel); color:var(--ink); }
:root{ caret-color:var(--accent); accent-color:var(--brand); }

/* Кольцо фокуса — фирменное и ОДНО на всё приложение. Видно на клавиатуре, не мешает мыши. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px;
}

/* Полосы прокрутки в палитре, а не серые системные. */
* { scrollbar-color:var(--deck-edge) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--deck-edge); border-radius:99px;
  border:3px solid var(--canvas);     /* воздух вокруг ползунка — он не липнет к краю */
}
::-webkit-scrollbar-thumb:hover{ background:var(--deck-edge-hot); }

/* Цифры в данных — моноширинные по ширине: иначе числа «пляшут» при обновлении. */
:where(.hh-num, .hh-chip b, td, .sum b, .n){ font-variant-numeric:tabular-nums; }

/* ═══════════════════════ 5. КОМПОНЕНТЫ ═══════════════════════ */

/* ── КАРТА ──
   Базовая единица приложения. Отделяется от фона КРОМКОЙ и СДВИГОМ, а не размытой
   тенью: «1px рамка + широкая мягкая тень» — ровно та комбинация, которую детектор
   называет подписью генератора и которую он находил у нас в пяти местах.
   Стопка под картой (.stacked) показывает, что за ней есть ещё — сдвигом на 4px,
   а не третьей тенью. */
.hh-card{
  position:relative;
  background:var(--deck-face);
  border:1px solid var(--deck-edge);
  border-radius:var(--r-md);
}
.hh-card.lg{ border-radius:var(--r-lg); }
.hh-card.raised{ border-color:var(--deck-edge-hot); }

/* «под картой ещё есть» — край следующей, а не тень */
.hh-card.stacked::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-5px; height:10px;
  background:var(--deck-back); border:1px solid var(--deck-edge);
  border-top:0; border-radius:0 0 var(--r-md) var(--r-md); z-index:-1;
}

/* Номер карты. Не украшение: он несёт номер темы в опросе, вопроса в тесте, формата
   в реестре — то, чем люди называют их вслух («седьмая тема»). Номер без смысла
   (01 / 02 / 03 для красоты) запрещён. */
.hh-card .hh-num{
  font-family:var(--font-text); font-weight:700; font-size:15px;
  color:var(--deck-num); letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums;
}

.hh-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border-radius:var(--r-xs);
  padding:7px 11px; font-size:12px; font-weight:700; color:var(--ink-soft);
}
.hh-chip b{color:var(--ink); font-variant-numeric:tabular-nums;}

.hh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap); padding:0 16px;
  border:1.5px solid var(--line); background:transparent; color:var(--ink);
  border-radius:var(--r-sm); font-family:inherit; font-weight:700; font-size:14px;
  cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.hh-btn:hover{border-color:var(--ink-mute);}
.hh-btn:active{transform:scale(.97);}
.hh-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.hh-btn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-on); box-shadow:var(--sh-1);}
.hh-btn.warm{background:var(--accent); border-color:var(--accent); color:var(--accent-on);}
.hh-btn.pill{border-radius:var(--r-pill);}

.hh-lead{color:var(--ink-soft); line-height:1.6; font-weight:400;}
.hh-eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.hh-seclabel{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* тост — общий для всех разделов */
.hh-toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:12px 20px; border-radius:var(--r-sm); font-size:13.5px; font-weight:700;
  box-shadow:var(--sh-3); opacity:0; transition:all .22s ease; pointer-events:none; z-index:200;
  max-width:calc(100vw - 32px); text-align:center;
}
.hh-toast.show{opacity:1; transform:translate(-50%,0);}

/* ═══════════════════════ 6. ТИПОГРАФИКА ═══════════════════════
   Крупное — фирменным голосом, остальное — рабочим. Граница проходит по кеглю, а не
   по смыслу: Unbounded на мелком нечитаем, поэтому подзаголовки и подписи остаются
   на Golos, даже когда это «заголовок» по разметке. */
:where(h1, h2, .hh-display){
  font-family:var(--font-display);
  font-weight:800; letter-spacing:-.025em; line-height:1.06;
}
:where(h3, h4, h5, h6){ font-family:var(--font-text); font-weight:700; letter-spacing:-.01em; }
body{ font-family:var(--font-text); }

.hh-scale-up h1{font-size:clamp(26px, 2.4vw, 42px); line-height:1.12;}
@media (min-width:1000px){ .hh-scale-up .hh-lead{font-size:15.5px;} }

/* уважение к системным настройкам доступности */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}