/* Собрано командой bukatchuk-ui build. Руками не править: правки вносятся в файлы компонентов. */
/* --- tokens: tokens.css --- */
/* Переменные bukatchuk ui. Здесь всё, что одинаково на любом сайте:
   палитра, рамки, тени и шрифты. Размеры текста и отступы задаёт профиль.
   Новый цвет появляется только здесь и только по решению владельца. */
:root{
  /* палитра */
  --base:#FFFFFF; --ink:#0A0A0A; --safety:#FF3E00; --muted:#777; --surface:#F5F5F0;
  /* оттенки текста и линий на белом и на чёрном */
  --text-soft:#333; --text-dim:#444; --line:#ddd; --on-ink-muted:#999; --on-ink-soft:#CFCFCF;
  /* длинный текст и код на чёрном */
  --prose-fg:#1A1A1A; --on-ink-dim:#BBB; --code-fg:#E8E8E8; --code-punct:#BDBDBD; --code-key:#FF8C5A;
  /* состояния: ошибка и успех */
  --safety-tint:#FFE9E0; --ok:#1B7F3B; --ok-tint:#E6F4EA;
  /* «терминал» */
  --term-bg:#08080A; --term-green:#00FF66; --term-amber:#FFAA00; --term-red:#FF5F57; --term-blue:#7FB2FF;
  --dot-amber:#FEBC2E; --dot-green:#28C840;
  /* тема: фон страницы и цвет текста, рамок и теней. --ink и --base — постоянные чёрный и белый:
     фон чёрных блоков (шапка, тёмные карточки) и текст на них; в тёмной теме они не меняются */
  --bg:var(--base); --fg:var(--ink); --grid-line:rgba(0,0,0,.045); --track:rgba(0,0,0,.1);
  /* заливка активного состояния и данных (вкладка, столбик, метка) и текст на ней: в тёмной теме — светлая */
  --solid:var(--ink); --on-solid:var(--base);
  --edge:var(--fg);
  color-scheme:light;
  /* рамки и тени: тень жёсткая, без размытия */
  --border:4px solid var(--fg); --border-thin:2px solid var(--fg); --hair:1px solid rgba(0,0,0,.12);
  --shadow:8px 8px 0 var(--fg); --shadow-sm:4px 4px 0 var(--fg); --shadow-safety:8px 8px 0 var(--safety);
  /* форма: скругления, тени при наведении и «подъём» кнопок. Тема бренда меняет их в brands/<имя>/tokens.css */
  --radius:0; --radius-sm:0;
  --shadow-xs:3px 3px 0 var(--fg); --shadow-hover:6px 6px 0 var(--fg); --shadow-lift:11px 11px 0 var(--fg);
  --lift:translate(-3px,-3px); --lift-sm:translate(-2px,-2px);
  /* акцент: --safety — заливка, рамка и линия; --safety-text — акцент текстом на фоне страницы; --on-safety — текст на заливке */
  --safety-text:var(--safety); --on-safety:#fff;
  /* роли акцента: ошибка и опасное действие; мелкая акцентная метка; крупный акцент (404, номера шагов, буквица) с контуром */
  --danger:var(--safety); --danger-tint:var(--safety-tint); --on-danger:var(--on-safety); --accent-label:var(--safety); --accent-display:var(--safety); --accent-display-stroke:0 transparent; --menu-hover:var(--safety);
  /* подвал: фон, текст, заголовки колонок и ссылки при наведении */
  /* шапка: фон, текст, приглушённый текст, акцент (наведение, текущий пункт), линии */
  --hdr-bg:var(--ink); --hdr-fg:var(--base); --hdr-muted:var(--on-ink-muted); --hdr-accent:var(--safety); --hdr-mark:var(--safety);
  --hdr-border:2px solid var(--safety); --hdr-sep:rgba(255,255,255,.22); --hdr-rule:rgba(255,255,255,.12); --hdr-toggle-line:rgba(255,255,255,.35);
  --ft-bg:var(--safety); --ft-fg:var(--on-safety); --ft-head:var(--ink); --ft-line:rgba(0,0,0,.25); --ft-compact:var(--ink);
  /* шрифты */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --grotesk:'Space Grotesk','JetBrains Mono',ui-monospace,system-ui,sans-serif;
  /* заголовок картинки превью ссылок (блок og) */
  --og-title-font:var(--mono);
  /* шрифт текста и элементов управления (кнопки, вкладки, меню, подписи полей): у bukatchuk — моноширинный капс */
  --font-body:var(--mono); --control-font:var(--mono); --control-case:uppercase; --control-tracking-k:1; --control-size-k:1;
  /* тени кнопки на оранжевом и на чёрном блоке (призыв к действию) */
  --shadow-on-safety:8px 8px 0 rgba(0,0,0,.32); --shadow-on-safety-lift:11px 11px 0 rgba(0,0,0,.32);
  --shadow-on-ink:8px 8px 0 rgba(255,255,255,.2); --shadow-on-ink-lift:11px 11px 0 rgba(255,255,255,.2);
  /* размеры, общие для всех профилей */
  --fs-micro:.64rem; --hdr-h:46px;
  /* слои */
  --z-sticky:60; --z-pop:70; --z-overlay:80; --z-toast:90;
}

/* Тёмная тема: по настройке системы, если посетитель не выбрал светлую, и по выбору (html[data-theme="dark"]).
   Меняются только фон, текст, линии и оттенки; оранжевый, чёрные блоки и «терминал» прежние.
   Цвета тёмной палитры утверждает владелец (BUKATCHUK-159). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111111; --fg:#EDEDE8; --surface:#1C1C1A; --muted:#9A9A95;
    --text-soft:#CFCFCA; --text-dim:#BDBDB8; --line:#333333; --prose-fg:#E4E4DF;
    --safety-tint:#3A1A0F; --ok:#4CC27A; --ok-tint:#10301C;
    --hair:1px solid rgba(255,255,255,.14); --grid-line:rgba(255,255,255,.05); --track:rgba(255,255,255,.14);
    --solid:#EDEDE8; --on-solid:#111111;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111111; --fg:#EDEDE8; --surface:#1C1C1A; --muted:#9A9A95;
  --text-soft:#CFCFCA; --text-dim:#BDBDB8; --line:#333333; --prose-fg:#E4E4DF;
  --safety-tint:#3A1A0F; --ok:#4CC27A; --ok-tint:#10301C;
  --hair:1px solid rgba(255,255,255,.14); --grid-line:rgba(255,255,255,.05); --track:rgba(255,255,255,.14);
  --solid:#EDEDE8; --on-solid:#111111;
  color-scheme:dark;
}

/* Шкала текста и отступы. Одна на всех сайтах; размеры шрифтов меняются только по решению владельца. */
:root{
  --fs-hero:clamp(2.4rem,7vw,6.2rem); --fs-h1:clamp(1.9rem,4.4vw,3.6rem);
  --fs-h2:clamp(1.4rem,2.6vw,2.2rem); --fs-h3:clamp(1.05rem,1.5vw,1.35rem);
  --fs-body:clamp(.95rem,1.05vw,1.05rem); --fs-prose:clamp(1.02rem,1.15vw,1.16rem);
  --fs-stat:clamp(1.6rem,3vw,2.6rem);
  --sec-y:clamp(2.2rem,5vw,4.6rem); --pad-x:clamp(1rem,4vw,4rem);
  --wrap:1180px; --read:44rem;
}

/* --- fonts: fonts.css --- */
/* Шрифты отдаются с домена самого сайта: сторонних запросов нет.
   Подмножества — латиница и кириллица. Лицензии лежат рядом с файлами шрифтов. */

@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/static/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/static/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- base: base.css --- */
/* Сброс и типографика. Шкала текста и отступы — в tokens.css. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.62;color:var(--fg);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong,b{font-weight:700}
img{max-width:100%;height:auto}
::selection{background:var(--safety);color:var(--on-safety)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--grotesk);font-weight:700;letter-spacing:-.03em;line-height:1.04}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em}
h3{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.14}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
section{padding:var(--sec-y) 0}
.sec--surface{background:var(--surface)}
.sec--line{border-top:var(--border)}
.sec--hair{border-top:var(--border-thin)}

.eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-label);font-weight:700;margin-bottom:1rem}
.eyebrow--ink{color:var(--fg)}
.muted{color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- badge: badge.css --- */
/* Метка состояния. */
.badge{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border:2px solid var(--fg)}
.badge--ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.badge--bad{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}
.badge--off{background:var(--surface);color:var(--muted);border-color:var(--muted)}

/* --- button: button.css --- */
/* Кнопка: капс, рамка 2px, жёсткая тень. Главная — оранжевая. */
.btns{display:flex;flex-wrap:wrap;gap:1rem}
/* Ряд «слева и справа»: первая кнопка у левого края, остальные у правого; на телефоне — колонкой, кнопки во всю ширину. */
.btns--split{justify-content:space-between;align-items:stretch}
/* В ряду кнопки одной высоты и строго у краёв: у подписи-кнопки (label) и <button> одна высота строки (и колонкой на телефоне), при наведении кнопка не сдвигается — меняется только тень. */
.btns--split .btn{line-height:inherit}
.btns--split .btn:hover{transform:none}
@media (max-width:760px){.btns--split{flex-direction:column;align-items:stretch}.btns--split .btn{text-align:center}}
.btn{display:inline-block;font-family:var(--control-font);font-weight:700;font-size:calc(.8rem * var(--control-size-k));letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);color:var(--fg);padding:.95rem 1.8rem;border:var(--border-thin);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:transform .12s,box-shadow .12s}
a.btn{text-align:center}
.btn--primary{background:var(--safety);color:var(--on-safety);border-color:var(--safety);box-shadow:var(--shadow)}
.btn--primary:hover{transform:var(--lift);box-shadow:var(--shadow-lift)}
.btn--ghost:hover{transform:var(--lift);box-shadow:var(--shadow-sm)}
.btn--danger{background:var(--ink);color:#fff;border-color:var(--fg);box-shadow:var(--shadow-sm)}
.btn--danger:hover{background:var(--danger);border-color:var(--danger);transform:var(--lift-sm);box-shadow:var(--shadow-hover)}
.btn--warn{border-color:var(--danger);color:var(--danger)}
.btn--warn:hover{background:var(--danger);color:var(--on-danger)}
.btn--sm{font-size:calc(.68rem * var(--control-size-k));padding:.5rem .8rem}
.btn--block{display:block;width:100%;text-align:center}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none;pointer-events:none}

/* --- field: field.css --- */
/* Поле формы: подпись капсом, поле на светлой подложке; при фокусе подложка белая и появляется жёсткая тень. */
.field{display:flex;flex-direction:column;gap:.35rem}
.field__label{font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.18em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:700}
.field__input{font-family:var(--font-body);font-size:1rem;color:var(--fg);background:var(--surface);border:var(--border-thin);border-radius:var(--radius);padding:.8rem .9rem;width:100%;appearance:none}
.field__input:focus{outline:none;background:var(--bg);box-shadow:var(--shadow-sm)}
.field__hint{font-family:var(--sans);font-size:.82rem;line-height:1.4;color:var(--muted)}
.field__error{font-family:var(--sans);font-size:.82rem;line-height:1.4;color:var(--danger)}
.field--invalid .field__input{border-color:var(--danger)}
textarea.field__input{resize:vertical;min-height:5rem;line-height:1.45}
select.field__input{background-image:none;cursor:pointer}
.field__input--sm{width:auto;padding:.45rem .5rem;font-size:.85rem}
input[readonly].field__input{color:var(--muted)}

/* --- card: card.css --- */
/* Карточка. */
.card{border:var(--border-thin);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--bg)}
.card--accent{border-color:var(--safety);box-shadow:var(--shadow-sm)}

/* --- chart: chart.css --- */
/* Графики без библиотек. Столбчатые строятся из разметки, линейный график и спарклайн рисует скрипт
   из data-ui-values. Значения читаются и без скрипта: подписи и числа лежат в разметке. */
.chart{display:flex;flex-direction:column;gap:.8rem;margin:0;color:var(--fg);min-width:0}
.chart__title{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.chart__note{font-family:var(--sans);font-size:.85rem;color:var(--muted)}

/* Столбцы. Доля от максимума приходит в --v (0…1) от скрипта. */
.chart__bars{list-style:none;display:flex;align-items:stretch;gap:.6rem;height:var(--chart-h,13rem)}
.chart__bar{--v:0;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.chart__bar .chart__value{order:1;text-align:center}
.chart__bar .chart__col{order:2;flex:1;min-height:0;display:flex;align-items:flex-end;border-bottom:var(--border-thin);background-image:linear-gradient(to top,var(--line) 1px,transparent 1px);background-size:100% 25%}
.chart__bar .chart__label{order:3;text-align:center}
.chart__fill{display:block;width:100%;height:calc(var(--v)*100%);background:var(--solid);transition:height .4s ease}
.chart__label,.chart__value{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;overflow-wrap:anywhere}
.chart__label{color:var(--muted)}
.chart__bar--accent .chart__fill{background:var(--safety)}
.chart__bar--muted .chart__fill{background:var(--muted)}
.chart__bar:hover .chart__fill{background:var(--safety)}

/* Горизонтальные столбцы */
.chart--horizontal .chart__bars{flex-direction:column;height:auto;gap:.5rem}
.chart--horizontal .chart__bar{flex:none;display:grid;grid-template-columns:minmax(5rem,9rem) minmax(0,1fr) minmax(2.6rem,auto);align-items:center;gap:.8rem}
.chart--horizontal .chart__bar .chart__label{order:0;text-align:left}
.chart--horizontal .chart__bar .chart__col{order:0;height:1.4rem;border-bottom:0;border-left:var(--border-thin);background:var(--surface);background-image:none;align-items:stretch}
.chart--horizontal .chart__bar .chart__value{order:0;text-align:right}
.chart--horizontal .chart__fill{width:calc(var(--v)*100%);height:100%;transition:width .4s ease}

/* Линейный график и спарклайн: SVG рисует скрипт, цвета берутся из currentColor и классов */
.chart__canvas{width:100%;min-height:var(--chart-h,13rem);color:var(--fg)}
.chart__canvas svg{display:block;width:100%;overflow:visible}
.chart__grid{stroke:var(--line);stroke-width:1}
.chart__axis{stroke:currentColor;stroke-width:2}
.chart__tick{fill:currentColor;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.chart__tick--y{text-anchor:end}
.chart__tick--x{text-anchor:middle}
.chart__line{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:miter;stroke-linecap:square}
.chart__line--compare{stroke:var(--muted);stroke-width:2;stroke-dasharray:6 5}
.chart__area{fill:var(--surface);stroke:none}
.chart__dot{fill:var(--bg);stroke:currentColor;stroke-width:2}
.chart__dot--last{fill:var(--safety);stroke:var(--safety)}
.chart--spark{display:block;width:100%;height:var(--spark-h,2.6rem);color:var(--fg)}
.chart--spark svg{display:block;width:100%;height:100%}
.chart--spark .chart__line{stroke-width:2;vector-effect:non-scaling-stroke}
.chart--spark .chart__area{fill:var(--surface)}
.chart--safety{color:var(--safety)}
.chart--safety .chart__canvas{color:var(--safety)}

/* Легенда */
.chart__legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.chart__legend li{display:inline-flex;align-items:center;gap:.5rem}
.chart__swatch{width:.9rem;height:.9rem;background:var(--solid);border:var(--border-thin)}
.chart__swatch--safety{background:var(--safety);border-color:var(--safety)}
.chart__swatch--muted{background:var(--muted);border-color:var(--muted)}
@media (max-width:560px){.chart--horizontal .chart__bar{grid-template-columns:minmax(4rem,6rem) minmax(0,1fr) auto;gap:.5rem}}
@media (prefers-reduced-motion:reduce){.chart__fill{transition:none}}

/* --- table: table.css --- */
/* Таблица — настоящая, чтобы заголовки стояли над своими столбцами; прокрутку на узком экране даёт обёртка. */
.table-wrap{overflow-x:auto;border:var(--border-thin)}
.table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem}
.table th{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;text-align:left;background:var(--ink);color:#fff;padding:.6rem .7rem}
.table td{padding:.6rem .7rem;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.table small{color:var(--muted)}
.table__actions{white-space:nowrap;width:1%;text-align:right}
.table__nowrap{white-space:nowrap;overflow-wrap:normal}
.table .btn{white-space:nowrap}
:where(.table) code{font-family:var(--mono);background:var(--surface);padding:.05rem .35rem;border:1px solid var(--line)}
@media (max-width:860px){.table{min-width:38rem}}
.table--log td{font-size:.8rem}

/* --- data-table: data-table.css --- */
/* Надстройка над .table: панель поиска и выбора, сортировка по заголовку, строка пагинации.
   Сама таблица (.table-wrap, .table) оформлена компонентом table. */
.data-table{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.data-table__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem}
.data-table__search{flex:1 1 14rem;max-width:24rem;min-width:0;font-family:var(--font-body);font-size:.8rem;color:var(--fg);background:var(--bg);border:var(--border-thin);border-radius:var(--radius);padding:.6rem .8rem}
.data-table__search::placeholder{color:var(--muted)}
.data-table__search:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-color:var(--safety)}
.data-table__count{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.data-table__count b{color:var(--accent-label)}
/* Заголовок сортируемого столбца */
.data-table th[data-ui-sort] .data-table__sort{display:inline-flex;align-items:center;gap:.5rem;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.data-table .data-table__sort::after{content:"\2195";font-size:.8rem;opacity:.6}
.data-table th[aria-sort="ascending"] .data-table__sort::after{content:"\25B2";opacity:1;color:var(--accent-label)}
.data-table th[aria-sort="descending"] .data-table__sort::after{content:"\25BC";opacity:1;color:var(--accent-label)}
.data-table .data-table__sort:hover{color:var(--safety-text)}
.data-table .data-table__sort:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Выбор строк */
.data-table .data-table__check{width:1%;white-space:nowrap}
.data-table .data-table__check input{width:1.05rem;height:1.05rem;accent-color:var(--safety);cursor:pointer;vertical-align:middle}
.data-table .data-table__check input:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.data-table th.data-table__check input:focus-visible{outline-color:#fff}
.data-table tbody tr.is-selected td{background:var(--safety-tint)}
.data-table tbody tr:hover td{background:var(--surface)}
.data-table__empty td{text-align:center;color:var(--muted);padding:1.6rem .7rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}
/* Нижняя строка: диапазон и страницы */
.data-table__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem}
.data-table__range{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.data-table__pager{display:flex;align-items:center;gap:.8rem}
.data-table__page{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.04em}
.data-table__pager .btn:disabled{opacity:.4}

/* --- grid: grid.css --- */
/* Сетки. На узком экране — одна колонка. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
.grid2--form{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.4rem}
.grid2--top{align-items:start;gap:1.6rem}
.cell{border:var(--border-thin);padding:clamp(1.2rem,2vw,1.8rem);background:var(--bg)}
.cell--dark{background:var(--ink);color:var(--base)}
.cell--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety)}
@media (max-width:900px){.grid3{grid-template-columns:1fr}.grid2,.grid2--form{grid-template-columns:1fr}}

/* --- description-list: description-list.css --- */
/* Пары «подпись — значение» на <dl>. Строка — <div class="dlist__row"> с <dt> и <dd>. */
.dlist{display:flex;flex-direction:column;font-family:var(--sans);container-type:inline-size}
.dlist__row{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr);gap:.2rem 1.2rem;padding:.65rem 0;border-top:1px solid var(--line)}
.dlist__row:first-child{border-top:0}
.dlist__term{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);padding-top:.2rem}
.dlist__def{font-size:.92rem;line-height:1.5;color:var(--fg);overflow-wrap:anywhere}
.dlist--stacked .dlist__row{grid-template-columns:minmax(0,1fr)}
.dlist--boxed{border:var(--border-thin);padding:.2rem 1rem;background:var(--bg)}
.dlist--boxed .dlist__row:first-child{border-top:0}
.dlist--strong .dlist__row{border-top:var(--border-thin)}
.dlist--strong .dlist__row:first-child{border-top:0}
/* Узкий блок (панель, колонка сетки): колонка подписи не растягивается до 12rem, значению остаётся место. */
@container (max-width:34rem){.dlist__row{grid-template-columns:7rem minmax(0,1fr);column-gap:.9rem}}
@container (max-width:13rem){.dlist__row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.dlist__row{grid-template-columns:minmax(0,1fr)}}

/* Сводка в малом окне: мелкий шрифт, колонка подписи 6,5rem, значение в одну строку с многоточием, без рамки. */
.dlist--compact .dlist__row{grid-template-columns:6.5rem minmax(0,1fr);gap:0 .8rem;padding:.3rem 0}
.dlist--compact .dlist__term{font-size:.6rem;letter-spacing:.1em;padding-top:.1rem}
.dlist--compact .dlist__def{font-size:.82rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}

/* --- dropdown-menu: dropdown-menu.css --- */
/* Меню действий: пункты, группы, разделители, флажки, выбор одного, подменю.
   Положение задаёт скрипт; без скрипта меню скрыто атрибутом hidden.
   Блок .menu используют и контекстное меню, и другие компоненты со списком команд. */
.menu{position:fixed;left:0;top:0;z-index:var(--z-pop);min-width:13rem;max-width:min(22rem,calc(100vw - 1rem));padding:.3rem 0;border:var(--border-thin);border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm);font-family:var(--font-body);font-size:.8rem;overflow:auto;max-height:calc(100dvh - 1rem)}
.menu:focus-visible{outline:none}
.menu__item{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;position:relative;width:100%;padding:.55rem .9rem .55rem 2rem;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-weight:700;letter-spacing:.06em;text-align:left;text-decoration:none;cursor:pointer}
.menu__item:focus,.menu__item:hover,.menu__item[aria-expanded="true"]{background:var(--solid);color:var(--on-solid);outline:none}
.menu__item:focus-visible{outline:3px solid var(--safety);outline-offset:-3px}
.menu__item--danger{color:var(--danger)}
.menu__item--danger:focus,.menu__item--danger:hover{background:var(--danger);color:var(--on-danger)}
.menu__item[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.menu__item[role="menuitemcheckbox"][aria-checked="true"]::before,.menu__item[role="menuitemradio"][aria-checked="true"]::before{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);line-height:1}
.menu__item[role="menuitemcheckbox"][aria-checked="true"]::before{content:"\2713"}
.menu__item[role="menuitemradio"][aria-checked="true"]::before{content:"\25CF";font-size:.6rem}
.menu__item[aria-haspopup]::after{content:"\25B8";flex:none}
.menu__kbd{margin-left:auto;font-size:.74rem;font-weight:400;letter-spacing:.04em;opacity:.7}
.menu__label{padding:.5rem .9rem .3rem 2rem;font-size:var(--fs-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.menu__sep{margin:.3rem 0;border:0;border-top:var(--border-thin)}

/* --- empty: empty.css --- */
/* Пустое состояние. */
.empty{font-family:var(--sans);color:var(--muted)}

/* --- footer: footer.css --- */
/* Подвал. По умолчанию — оранжевый с колонками ссылок (блог); нижняя строка: слева копирайт с годом, справа стаж.
   .ft--compact — только нижняя строка (сервис).
   Подвал у низа окна на коротких страницах — класс ft-page на body: body становится колонкой на всю высоту окна,
   блоки внутри него не сжимаются по содержимому (width:100%, урок BUKATCHUK-285), подвал уходит вниз (BUKATCHUK-302). */
.ft-page{min-height:100dvh;display:flex;flex-direction:column}
.ft-page>*{width:100%}
.ft-page>.ft{margin-top:auto}
.ft{background:var(--ft-bg);color:var(--ft-fg);border-top:var(--border);padding:clamp(2rem,4vw,3.4rem) 0 2rem}
.ft__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.ft h4{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ft-head);margin-bottom:.9rem;font-weight:700}
.ft p{font-family:var(--sans);font-size:.95rem;line-height:1.75}
.ft a:hover{color:var(--ft-head)}
.ft__bottom{max-width:var(--wrap);margin:2.4rem auto 0;padding:1.2rem var(--pad-x) 0;border-top:1px solid var(--ft-line);display:grid;grid-template-columns:1fr auto;gap:.6rem 2rem;align-items:baseline;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ft-compact)}
.ft__bottom>*:last-child{text-align:right}
@media (max-width:760px){.ft__bottom{grid-template-columns:1fr;text-align:left}.ft__bottom>*:last-child{text-align:left}}
@media (max-width:900px){.ft__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__in{grid-template-columns:1fr}}

/* компактный: одна нижняя строка */
.ft--compact{padding:0;color:var(--ft-compact)}
.ft--compact .ft__bottom{margin:0 auto;padding:1.2rem var(--pad-x);border-top:0}
@media (max-width:820px){.ft--compact .ft__bottom{grid-template-columns:1fr}.ft--compact .ft__bottom>*:last-child{text-align:left}}
/* строка документов (соглашение, политики) — над копирайтом, во всю ширину, обычным регистром */
.ft__legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;text-transform:none;letter-spacing:0;font-size:.85rem}
.ft__legal a{color:inherit}
.ft__legal a:hover{color:var(--ft-head)}
.ft__bottom>.ft__legal:last-child{text-align:left}

/* --- form: form.css --- */
/* Форма: вертикальный ритм, поля в ряд, разделы, кнопки и сводка ошибок.
   Сообщения под полями рисует скрипт через .field__error из компонента field. */
.form{display:flex;flex-direction:column;gap:1.4rem}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.2rem}
.form__section{display:flex;flex-direction:column;gap:1.2rem;padding-top:1.4rem;border-top:var(--border-thin)}
.form__section:first-child{padding-top:0;border-top:0}
.form__head{display:flex;flex-direction:column;gap:.35rem}
.form__title{font-family:var(--grotesk);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.14}
.form__desc{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--text-soft);max-width:44rem}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-top:.4rem}
.form__actions--end{justify-content:flex-end}
.form__actions--split{justify-content:space-between}
.form__errors{padding:.9rem 1.1rem;background:var(--danger-tint);border-left:4px solid var(--danger);font-family:var(--sans);font-size:.92rem;line-height:1.5}
.form__errors-title{margin-bottom:.4rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.form__errors ul{margin:0;padding-left:1.1rem;list-style:disc}
.form__errors a{color:var(--fg);text-decoration:underline;text-underline-offset:.15em}
.form__errors a:hover{color:var(--safety-text)}
/* Строка-фильтр: поле, списки и кнопка в одну строку и одной высоты (шрифты не меняются — выравнивается высота).
   Подпись поля остаётся только для скринридера, поэтому полю нужен placeholder; на узком экране элементы переносятся,
   кнопка встаёт на всю ширину. */
.form__row--bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem}
.form__row--bar>.field{flex:2 1 16rem;gap:0}
.form__row--bar>.field .field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form__row--bar>.select,.form__row--bar>.select__native{flex:1 1 11rem;max-width:none}
.form__row--bar .field__input,.form__row--bar .select__btn,.form__row--bar .select__native,.form__row--bar>.btn{height:3.3rem;padding-top:0;padding-bottom:0}
.form__row--bar>.btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:560px){.form__actions .btn{flex:1 1 auto}}
@media (max-width:560px){.form__row--bar>.btn{flex:1 1 100%}}

/* --- theme-toggle: theme-toggle.css --- */
/* Переключатель темы: квадратная кнопка с полукругом; в шапке — светлая рамка на чёрном. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-thin);background:var(--bg);color:var(--fg);cursor:pointer;flex:none}
.theme-toggle__icon{display:block;width:.9rem;height:.9rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme-toggle:hover{color:var(--menu-hover)}
.theme-toggle[aria-pressed="true"] .theme-toggle__icon{transform:rotate(180deg)}
/* у текстовых пунктов шапки после последней буквы есть межбуквенный отступ (.14em) — добавляем его и кнопке, чтобы промежутки были равны */
.hdr .theme-toggle{margin-right:.1rem;width:1.7rem;height:1.7rem;background:transparent;color:var(--hdr-fg);border:1px solid var(--hdr-toggle-line)}
.hdr .theme-toggle:hover{color:var(--menu-hover);border-color:var(--hdr-mark)}

/* --- header: header.css --- */
/* Шапка: прилипает к верху, чёрная с оранжевой линией.
   Знак слева ведёт в блог, название рядом — на стартовую страницу сайта. */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:var(--hdr-bg);color:var(--hdr-fg);border-bottom:var(--hdr-border)}
.hdr__in{display:flex;align-items:center;gap:1rem;padding:.5rem var(--pad-x);max-width:var(--wrap);margin:0 auto;height:var(--hdr-h)}
.hdr__logo{font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.hdr__mark{width:22px;height:22px;display:block;flex:none}
/* разделитель и название не сжимаются, когда меню длинное: иначе разделитель пропадает, а меню прилипает к названию */
.hdr__sep{flex:none;width:1px;height:20px;background:var(--hdr-sep)}
.hdr__sub{flex:none;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--hdr-muted);white-space:nowrap}
a.hdr__sub{color:var(--hdr-fg);padding-bottom:2px;border-bottom:2px solid var(--hdr-mark)}
a.hdr__sub:hover{color:var(--menu-hover)}
/* перед меню — запас 1rem к общему промежутку строки: первый пункт не встаёт вплотную к названию сайта */
.hdr__nav{margin-left:auto;padding-left:1rem;display:flex;gap:1.6rem;font-size:calc(.74rem * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:500}
.hdr__nav a{position:relative;padding-bottom:2px;white-space:nowrap}
.hdr__nav a:hover{color:var(--menu-hover)}
.hdr__nav a.is-active{color:var(--hdr-accent);border-bottom:2px solid var(--hdr-mark)}
.hdr__nav-mobile,.hdr__nav a.hdr__nav-home{display:none}
/* правая часть отделена от меню тем же 1.6rem, что пункты между собой: .6rem + общий промежуток строки 1rem */
.hdr__right{display:flex;align-items:center;gap:1.6rem;margin-left:.6rem;font-size:calc(.74rem * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:500}
.hdr__btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0 0 2px;cursor:pointer}
.hdr__btn:hover{color:var(--menu-hover)}
.hdr__status{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-micro);letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.hdr__dot{width:7px;height:7px;border-radius:50%;background:var(--term-green);box-shadow:0 0 8px var(--term-green);animation:hdr-pulse 2s infinite}
@keyframes hdr-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hdr__clock{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:none;color:var(--muted);white-space:nowrap}
/* когда меню длинное, первыми уходят часы: переключатель темы и кнопки справа должны остаться на экране */
@media (max-width:1440px){.hdr__clock{display:none}}
/* Правая зона стандарта: «Админка» → тема → сервисы → профиль. Меню — компонент dropdown-menu (.menu). */
.hdr__admin{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.hdr__badge{min-width:1.4em;padding:0 .4em;background:var(--hdr-mark);color:var(--ink);font-family:var(--mono);font-size:.7rem;font-weight:700;line-height:1.55;letter-spacing:0;text-align:center}
.hdr__icon,.hdr__avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.hdr__icon{width:2rem;height:2rem}
.hdr__icon:hover{color:var(--menu-hover)}
.hdr__icon:focus-visible,.hdr__avatar:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.hdr__avatar{width:1.9rem;height:1.9rem;overflow:hidden;border-radius:var(--radius)}
.hdr__photo{display:block;width:100%;height:100%;object-fit:cover}
.hdr__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--hdr-mark);color:var(--ink);font-family:var(--grotesk);font-size:.85rem;font-weight:700;letter-spacing:0;text-transform:uppercase}
.hdr__menu{text-transform:none}
.hdr__menu form{margin:0}
.hdr__menu .menu__label.hdr__menu-name{text-transform:none;letter-spacing:.02em;overflow-wrap:anywhere}
/* значок сервиса: квадрат цвета текста (тёмный в светлой теме, светлый в тёмной), пиктограмма линиями цвета фона;
   на пункте под курсором меняются оба цвета — контраст сохраняется */
.hdr__menu .menu__item{justify-content:flex-start;gap:.6rem}
.hdr__svc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;background:currentColor;border-radius:0}
.hdr__svc svg{display:block;fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.hdr__menu .menu__item:hover .hdr__svc svg,.hdr__menu .menu__item:focus .hdr__svc svg{stroke:var(--solid)}
.hdr__more .hdr__svc svg{stroke:var(--hdr-bg)}
.hdr__menu .menu__item[aria-current]::before{content:"\25CF";position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:.6rem;line-height:1}
/* переключатель языка «RU / EN»: текущий язык подчёркнут и выделен акцентом */
.hdr__lang{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.hdr__lang a{padding-bottom:2px;border-bottom:2px solid transparent}
.hdr__lang a:hover{color:var(--menu-hover)}
.hdr__lang a[aria-current]{color:var(--hdr-accent);border-bottom-color:var(--hdr-mark)}
.hdr__lang span{color:var(--hdr-muted)}
/* разделы для телефона: в широком виде скрыты, в бургер-меню идут после разделов сервиса */
.hdr__more{display:none}

.burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:.4rem}
.burger span{width:20px;height:2px;background:currentColor;display:block}
.hdr .burger{color:inherit}

@media (max-width:920px){
  .hdr .hdr__sub,.hdr .hdr__right>:not(.theme-toggle){display:none}
  .hdr .hdr__right{margin-left:auto;gap:.8rem}
  .hdr .hdr__right~.burger{margin-left:.8rem}
  .hdr .burger{display:flex}
  .hdr .hdr__nav{position:fixed;inset:var(--hdr-h) 0 auto 0;background:var(--hdr-bg);border-bottom:var(--hdr-border);flex-direction:column;gap:0;padding:1rem var(--pad-x);display:none}
  .hdr .hdr__nav.is-open{display:flex}
  .hdr .hdr__nav a{padding:.8rem 0;border-bottom:1px solid var(--hdr-rule)}
  .hdr .hdr__nav{overflow-y:auto;max-height:calc(100dvh - var(--hdr-h))}
  .hdr .hdr__more{display:block}
  .hdr .hdr__more-title{margin:1.1rem 0 0;font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--hdr-muted)}
  .hdr .hdr__more a{display:flex;align-items:center;gap:.5rem}
  .hdr .hdr__more a[aria-current]{color:var(--hdr-accent)}
  .hdr .hdr__more form{margin:0}
  .hdr .hdr__more .hdr__btn{display:block;width:100%;padding:.8rem 0;text-align:left;border-bottom:1px solid var(--hdr-rule)}
  .hdr .hdr__nav-mobile{display:block;padding:.8rem 0}
  .hdr .hdr__nav a.hdr__nav-home{display:block;color:var(--hdr-accent)}
}

/* --- link: link.css --- */
/* Ссылка в тексте. */
.link{border-bottom:2px solid var(--safety)}
.link:hover{background:var(--safety);color:var(--on-safety)}

/* --- item-list: item-list.css --- */
/* Список записей. */
.items{list-style:none;display:flex;flex-direction:column;gap:1rem}
.item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.6rem;padding:1rem 1.1rem;border:var(--border-thin);background:var(--bg);box-shadow:var(--shadow-sm)}
.item--past{background:var(--surface);box-shadow:none}
.item__main{min-width:0;flex:1 1 18rem}
.item__title{font-family:var(--grotesk);font-size:1.2rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.item__meta{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.item__link{font-size:.85rem;margin-top:.4rem;overflow-wrap:anywhere}
.item__actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
.item__actions .btn{margin:0}

/* --- panel: panel.css --- */
/* Панель: рамка 4px, жёсткая тень. Форма-панель (--form) — спокойнее: рамка 3px, малая тень. */
.panel{background:var(--bg);border:var(--border);box-shadow:var(--shadow);padding:clamp(1.2rem,2.4vw,2rem);min-height:17rem;display:flex;flex-direction:column;justify-content:center}
.panel__form{display:flex;flex-direction:column;gap:1rem}
.panel__form .eyebrow{margin-bottom:.2rem}
.panel__user{font-family:var(--sans);color:var(--text-soft)}
.panel__user b{font-weight:600;color:var(--fg)}
.panel__hint{font-family:var(--sans);font-size:.86rem;line-height:1.45;color:var(--muted);margin-top:1rem;padding-top:.9rem;border-top:var(--hair)}
.panel__error{font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--fg);background:var(--danger-tint);border-left:4px solid var(--danger);padding:.6rem .8rem}
.panel__loading{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.panel__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case)}
.panel__links a{border-bottom:2px solid var(--fg)}
.panel__links a:hover{border-bottom-color:var(--safety)}
.panel--form{min-height:0;justify-content:flex-start;gap:1rem;box-shadow:var(--shadow-sm);border-width:3px}
@media (max-width:820px){.panel{min-height:0}}
/* Разделитель внутри панели между двумя частями (например, вход через Bukatchuk ID и вход по паролю): линия и отступ. */
.panel__alt{margin-top:1.4rem;padding-top:1.2rem;border-top:var(--hair)}
/* Подсказка первой сразу за разделителем (нижний блок auth__foot и любой panel__alt): разделитель уже дал линию и отступ — второй линии и своих отступов у неё нет (0.25.1). */
.panel__alt>.panel__hint:first-child{margin-top:0;padding-top:0;border-top:0}

/* --- link-map: link-map.css --- */
/* Карта связей: слева источники, справа группы карточек, в карточках — узлы (фишки).
   Выбор источника, узла, карточки или типа подсвечивает связанное (.is-hit), остальное гаснет (.is-dim у корня),
   а скрипт рисует кривые от источников к узлам. Типы узлов — квадратный маркер .link-map__mark--k1…k5 (цвета — токены).
   Вторая группа источников без связей (.link-map__extra, .link-map__source--solo с пунктирной рамкой и ссылкой .link-map__open)
   стоит под основными; линий к ней нет. Ниже 820 px источники встают над группами, линии скрыты. */
.link-map{display:flex;flex-direction:column;gap:1.2rem;font-family:var(--mono)}
.link-map__legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem}
.link-map__legend-title,.link-map__head,.link-map__group-title{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0}
.link-map__reset{margin-left:auto}
.link-map__body{position:relative;display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);column-gap:clamp(3rem,9vw,7rem);align-items:start}
.link-map__sources{display:flex;flex-direction:column;gap:.7rem}
.link-map__groups{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.link-map__group{display:flex;flex-direction:column;gap:.7rem;padding:0}
.link-map__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem 1.2rem}
.link-map__source,.link-map__kind,.link-map__reset,.link-map__node,.link-map__card-head{font:inherit;color:var(--fg);background:var(--bg);cursor:pointer;text-align:left}
.link-map__source{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;padding:.55rem .75rem;border:var(--border-thin);box-shadow:var(--shadow-xs);font-size:.82rem;font-weight:600;transition:opacity .15s,background .12s,color .12s;border-radius:var(--radius)}
.link-map__extra{display:flex;flex-direction:column;gap:.7rem;margin-top:.9rem}
.link-map__solo{display:flex;align-items:stretch;gap:.4rem;min-width:0}
.link-map__solo .link-map__source{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.link-map__source--solo{border-style:dashed}
.link-map__open{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.2rem;border:var(--border-thin);box-shadow:var(--shadow-xs);color:var(--fg);background:var(--bg);text-decoration:none;transition:opacity .15s,color .12s;border-radius:var(--radius)}
.link-map__open:hover{background:var(--solid);color:var(--on-solid)}
.link-map__open svg{fill:none;stroke:currentColor;stroke-width:2}
.link-map__note{font-size:.68rem;font-weight:400;color:var(--muted)}
.link-map__source.is-hit,.link-map__kind[aria-pressed="true"]{background:var(--solid);color:var(--on-solid)}
.link-map__source.is-hit .link-map__note{color:inherit;opacity:.8}
.link-map__card{position:relative;z-index:1;background:var(--bg);border:3px solid var(--fg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:opacity .15s,box-shadow .15s;border-radius:var(--radius)}
.link-map__card.is-hit{box-shadow:4px 4px 0 var(--safety)}
.link-map__card-head{display:flex;flex-direction:column;gap:.15rem;width:100%;padding:.6rem .8rem;border:0;border-bottom:var(--hair);font-size:.82rem;font-weight:600;background:transparent}
.link-map__card-head[aria-pressed="true"]{background:var(--surface)}
.link-map__nodes{display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem .8rem .8rem}
.link-map__node{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border:1px solid var(--fg);font-size:.72rem;transition:opacity .15s,background .12s,color .12s;border-radius:var(--radius-sm)}
.link-map__node.is-hit{background:var(--solid);color:var(--on-solid)}
.link-map__kind{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border:1px solid var(--fg);font-size:.72rem;border-radius:var(--radius-sm)}
.link-map__reset{padding:.25rem .6rem;border:1px dashed var(--fg);font-size:.72rem}
.link-map__mark{flex:none;width:.6rem;height:.6rem;border:1px solid var(--fg);background:var(--muted);border-radius:var(--radius-sm)}
.link-map__mark--k1{background:var(--ok)}
.link-map__mark--k2{background:var(--term-amber)}
.link-map__mark--k3{background:var(--term-blue)}
.link-map__mark--k4{background:var(--safety)}
.link-map__mark--k5{background:var(--muted)}
.link-map__source.is-selected,.link-map__node.is-selected,.link-map__kind.is-selected{outline:2px solid var(--safety);outline-offset:2px}
.link-map__source:focus-visible,.link-map__node:focus-visible,.link-map__card-head:focus-visible,.link-map__kind:focus-visible,.link-map__reset:focus-visible,.link-map__open:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.link-map.is-dim .link-map__source:not(.is-hit),.link-map.is-dim .link-map__node:not(.is-hit),.link-map.is-dim .link-map__card:not(.is-hit),.link-map.is-dim .link-map__solo:not(:has(.is-hit)) .link-map__open{opacity:.35}
.link-map__lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.link-map__line{fill:none;stroke:var(--safety);stroke-width:2;opacity:.85}
@media (max-width:820px){
  .link-map__body{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .link-map__lines{display:none}
  .link-map__sources{flex-direction:row;flex-wrap:wrap}
  .link-map__reset{margin-left:0}
  .link-map__extra{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;margin-top:.3rem}
  .link-map__extra .link-map__head{flex:1 1 100%}
}

/* --- notice: notice.css --- */
/* Уведомление: полоса слева показывает вид сообщения. */
.notice{font-family:var(--sans);font-size:.95rem;line-height:1.45;padding:.7rem .9rem;border-left:4px solid var(--fg);background:var(--surface)}
.notice--error{background:var(--danger-tint);border-left-color:var(--danger)}
.notice--ok{background:var(--ok-tint);border-left-color:var(--ok)}
.notice--info{background:var(--surface)}

/* --- page: page.css --- */
/* Каркас страницы сервиса: занимает всю высоту окна между шапкой и подвалом. */
.page__back{font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);margin-bottom:1.2rem}
.page__back a{border-bottom:2px solid var(--fg);padding-bottom:2px}
.page__back a:hover{border-bottom-color:var(--safety);color:var(--safety-text)}
.page{flex:1;padding:clamp(1.2rem,3vw,2.4rem) 0 3rem}
.page__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);display:flex;flex-direction:column;gap:1.4rem}
.page__in--narrow{max-width:640px}
.page__h{font-family:var(--grotesk);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.03em}
.page__lead{font-family:var(--sans);font-size:1.05rem;line-height:1.5;color:var(--text-soft);max-width:70ch}
/* внутри другой раскладки (.side-nav): поля и ширину задаёт она */
.page--flush{padding:0}
.page--flush .page__in{max-width:none;padding:0}

/* --- password-input: password-input.css --- */
/* Поле пароля с кнопкой «показать/скрыть». Кнопка появляется только со скриптом: без него поле остаётся обычным. */
.password{position:relative;display:flex}
.password__input{flex:1;min-width:0;padding-right:7.2rem}
.password__toggle{position:absolute;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;width:6.6rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-family:var(--control-font);font-size:calc(.74rem * var(--control-size-k));font-weight:700;letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);cursor:pointer}
.js .password__toggle{display:flex}
.password__toggle:hover,.password__toggle[aria-pressed="true"]{background:var(--safety)}
.password__toggle:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.password__input[aria-invalid="true"]{border-color:var(--danger)}

/* --- tabs-panel: tabs-panel.css --- */
/* Вкладки с панелями содержимого на одной странице. Вид тот же, что у вкладок-ссылок:
   капс, моноширинный, активная вкладка — чёрный фон и белый текст, нижняя линия 2px.
   Без скрипта панели видны подряд, каждая со своим заголовком (.tabset__nojs). */
.tabset__list{display:flex;flex-wrap:wrap;gap:.2rem .3rem;border-bottom:var(--border-thin)}
html:not(.js) .tabset__list{display:none}
.tabset__tab{font-family:var(--control-font);font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.16em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:700;color:var(--fg);background:none;padding:.7rem 1rem;border:2px solid transparent;border-bottom:0;border-radius:var(--radius-sm);margin-bottom:-2px;cursor:pointer}
.tabset__tab:hover{color:var(--menu-hover)}
.tabset__tab:focus-visible{outline-offset:-3px}
.tabset__tab[aria-selected="true"]{background:var(--solid);color:var(--on-solid)}
.tabset__tab[aria-selected="true"]:hover{color:#fff}
.tabset__tab[aria-disabled="true"]{color:var(--muted);cursor:default}
.tabset__tab[aria-disabled="true"]:hover{color:var(--muted)}
.tabset__panel{padding:1.4rem 0;font-family:var(--sans);line-height:1.6}
.tabset__panel:focus-visible{outline-offset:2px}
.js .tabset__panel:not(.is-active){display:none}
.tabset__nojs{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:var(--border-thin)}
.js .tabset__nojs{display:none}

/* вертикальный вариант: список слева */
.tabset--vertical{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);align-items:start}
.tabset--vertical .tabset__list{flex-direction:column;flex-wrap:nowrap;gap:.2rem;border-bottom:0;border-right:var(--border-thin)}
.tabset--vertical .tabset__tab{text-align:left;border:2px solid transparent;border-right:0;margin:0 -2px 0 0}
.tabset--vertical .tabset__panel{padding:0 0 0 1.6rem}
html:not(.js) .tabset--vertical{display:block}
@media (max-width:640px){
  .tabset--vertical{display:block}
  .tabset--vertical .tabset__list{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:var(--border-thin)}
  .tabset--vertical .tabset__tab{border-bottom:0;border-right:2px solid transparent;margin:0 0 -2px}
  .tabset--vertical .tabset__panel{padding:1.4rem 0}
  .tabset__tab{padding:.6rem .7rem}
}

/* компактный вариант для малых окон и карточек: мелкие моноширинные подписи, тонкая линия-акцент, панель без отступов */
.tabset--compact .tabset__list{flex-wrap:nowrap;gap:0 1.1rem;border-bottom:1px solid var(--line)}
.tabset--compact .tabset__tab{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem 0;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;white-space:nowrap}
.tabset--compact .tabset__tab[aria-selected="true"],.tabset--compact .tabset__tab[aria-selected="true"]:hover{background:none;color:var(--fg);border-bottom-color:var(--safety)}
.tabset--compact .tabset__panel{padding:.7rem 0 0;font-size:.85rem;line-height:1.45}
/* Без боковых полей рамка фокуса внутрь (-3px) закрывала бы подпись — у компактных вкладок она снаружи. */
.tabset--compact .tabset__tab:focus-visible{outline-width:2px;outline-offset:2px}

/* --- tag: tag.css --- */
/* Тег: капс, тонкая рамка цвета текста. Ссылка-тег при наведении чернеет.
   .tag--filled — чёрный, .tag--safety — оранжевый, .tag--more — счётчик «+N»; .tags — ряд тегов. */
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border:1px solid currentColor;opacity:.75;transition:background .12s,color .12s,opacity .12s}
a.tag:hover{background:var(--solid);color:var(--on-solid);border-color:var(--fg);opacity:1}
.tag--filled{background:var(--solid);color:var(--on-solid);border-color:var(--fg);opacity:1}
.tag--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety);opacity:1}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
/* Счётчик «+N» в конце ряда: пунктирная рамка, ссылка на полный список. */
.tag--more{border-style:dashed;font-weight:700;opacity:1}

/* --- ribbon: ribbon.css --- */
/* Лента показателей: от двух до восьми ячеек в одной рамке и в одну строку. Цвета ячеек идут по кругу через четыре:
   первая — оранжевое число, вторая — серая, третья — чёрная, четвёртая — оранжевая, пятая снова как первая.
   При наведении ячейка чернеет, а чёрная становится оранжевой. Подписи переносятся. Больше четырёх ячеек:
   от 821 до 1100px в три колонки, до 820px в две. .ribbon--compact — мелкая лента на 2–4 ячейки для узкого окна. */
.ribbon{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:var(--border-thin);box-shadow:var(--shadow-sm)}
.ribbon__i{min-width:0;padding:1.4rem clamp(1rem,2vw,2rem);border-right:var(--border-thin);background:var(--bg);cursor:default}
.ribbon__i:last-child{border-right:0}
.ribbon__i:nth-child(4n+1) .ribbon__n{color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke)}
.ribbon__i:nth-child(4n+2){background:var(--surface)}
.ribbon__i:nth-child(4n+3){background:var(--ink);color:var(--base)}
.ribbon__i:nth-child(4n+3) .ribbon__l{color:var(--on-ink-muted)}
.ribbon__i:nth-child(4n+4){background:var(--safety);color:var(--on-safety)}
.ribbon__i:nth-child(4n+4) .ribbon__l{color:#fff}
.ribbon__i:hover{background:var(--ink);color:var(--base)}
.ribbon__i:hover .ribbon__n{color:var(--base)}
.ribbon__i:hover .ribbon__l{color:var(--on-ink-muted)}
.ribbon__i:nth-child(4n+3):hover{background:var(--safety)}
.ribbon__i:nth-child(4n+3):hover .ribbon__l{color:#fff}
.ribbon__n{font-family:var(--grotesk);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1;overflow-wrap:anywhere}
.ribbon__l{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.5rem;overflow-wrap:break-word}
@media (min-width:821px) and (max-width:1100px){
  .ribbon:has(.ribbon__i:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ribbon:has(.ribbon__i:nth-child(5)) .ribbon__i:nth-child(3n){border-right:0}
  .ribbon:has(.ribbon__i:nth-child(5)) .ribbon__i:nth-child(n+4){border-top:var(--border-thin)}
}
@media (max-width:820px){
  .ribbon{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ribbon__i{border-right:var(--border-thin);border-bottom:0}
  .ribbon__i:nth-child(2n){border-right:0}
  .ribbon__i:nth-child(n+3){border-top:var(--border-thin)}
}

/* Мелкая лента для окна-сводки: 2–4 ячейки всегда в одну строку, без тени. */
.ribbon--compact{box-shadow:none}
.ribbon--compact .ribbon__i{padding:.55rem .7rem}
.ribbon--compact .ribbon__n{font-size:1.35rem}
.ribbon--compact .ribbon__l{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;margin-top:.3rem;line-height:1.3}
@media (max-width:820px){
  .ribbon.ribbon--compact{grid-auto-flow:column;grid-template-columns:none}
  .ribbon--compact .ribbon__i{border-right:var(--border-thin);border-top:0}
  .ribbon--compact .ribbon__i:last-child{border-right:0}
}

/* --- popover: popover.css --- */
/* Всплывающая панель у кнопки. Положение задаёт скрипт (BUI.place); без скрипта панель скрыта атрибутом hidden. */
.popover{position:fixed;left:0;top:0;z-index:var(--z-pop);width:min(20rem,calc(100vw - 1rem));padding:1rem 1.1rem;border:var(--border-thin);border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm);font-family:var(--sans);font-size:.92rem;line-height:1.5}
.popover:focus-visible{outline:none}
.popover--wide{width:min(28rem,calc(100vw - 1rem))}
.popover__title{font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.5rem}
.popover__text{color:var(--text-soft)}
.popover__body{display:flex;flex-direction:column;gap:.8rem}
.popover__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;margin-top:.9rem;padding-top:.8rem;border-top:var(--border-thin)}
[data-ui-popover][aria-expanded="true"]{background:var(--solid);color:var(--on-solid)}

/* Окно-сводка: размер фиксирован, содержимое подгоняется под него и никогда не прокручивается; последний элемент (действие) прижат вниз. */
.popover--card{width:min(24rem,calc(100vw - 2rem));height:17rem;display:flex;flex-direction:column;overflow:hidden}
.popover--card>:last-child{margin-top:auto}
.popover--card .popover__title{margin-bottom:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popover--card .popover__foot{padding-top:.6rem;justify-content:flex-start}
/* Статичный образец окна в потоке страницы (витрина, макет): без позиционирования скриптом. */
.popover--static{position:static}
/* У правого края экрана: под шапкой до низа окна, к элементу не ставится (решение владельца 06.11.2026, BUKATCHUK-421).
   С popover--card — та же сводка без прокрутки, только выше. */
.popover--side{left:auto;right:1rem;top:calc(var(--hdr-h) + 1rem);bottom:1rem;width:min(24rem,calc(100vw - 2rem))}
.popover--card.popover--side{height:auto}

/* --- stat: stat.css --- */
/* Карточка показателя: подпись, число, изменение, спарклайн. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem}
.stat{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;border:var(--border-thin);background:var(--bg);box-shadow:var(--shadow-sm);min-width:0}
.stat--accent{border-color:var(--safety);box-shadow:var(--shadow-safety)}
.stat__label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.stat__value{font-family:var(--grotesk);font-size:var(--fs-stat);font-weight:700;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.stat__unit{font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-left:.3rem}
.stat__delta{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.stat__delta::before{font-size:.64rem}
.stat__delta--up{color:var(--ok)}
.stat__delta--up::before{content:"\25B2"}
.stat__delta--down{color:var(--danger)}
.stat__delta--down::before{content:"\25BC"}
.stat__delta--flat::before{content:"\25AC"}
.stat__delta--up.stat__delta--bad{color:var(--danger)}
.stat__delta--down.stat__delta--good{color:var(--ok)}
.stat__note{font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.stat .chart--spark{margin-top:.4rem}

/* --- subhead: subhead.css --- */
/* Заголовок раздела внутри страницы. */
.subhead{font-family:var(--grotesk);font-size:1.15rem;letter-spacing:-.01em;border-bottom:var(--border-thin);padding-bottom:.4rem;margin-top:.6rem}

/* --- brand: brand.css --- */
/* Исключения темы (BUKATCHUK-344). В основе правил нет: тема бренда кладёт свои в
   brands/<тема>/registry/foundation/brand/brand.css. Файл подключается последним в сборке, поэтому его правила
   перекрывают компоненты без повышения точности селекторов и не действуют в других темах. */