/*
 * «Компакт» — стандарт оформления программ (переменные CSS и готовые приёмы).
 * Цвета и визуал — из портала kompakt-24.com, тема «Фирменный стиль»
 * (src/index.css портала, 06.10.2026). Плотность таблиц — из UniVue.
 *
 * Шрифты лежат рядом: Manrope/, Lora/, JetBrainsMono/. Подключайте их из своей
 * программы, а не с fonts.googleapis.com: Google в России периодически недоступен.
 * Новых цветов не заводить: нужен оттенок — смешайте токены через color-mix().
 */

@font-face { font-family: 'Manrope'; font-weight: 300; font-display: swap; src: url('Manrope/Manrope-Light.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('Manrope/Manrope-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('Manrope/Manrope-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('Manrope/Manrope-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('Manrope/Manrope-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('Lora/Lora-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('Lora/Lora-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('JetBrainsMono/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('JetBrainsMono/JetBrainsMono-SemiBold.ttf') format('truetype'); }

:root {
  /* ── Палитра ── */
  --bg: #f4f2ec;            /* бумага — фон страницы */
  --white: #fcfcfa;         /* карточки, таблицы, плашки */
  --ink: #1c2738;           /* текст и заголовки (вместо чистого чёрного) */
  --ink-soft: #48556a;      /* подписи, второстепенный текст */
  --accent-deep: #2a4a70;   /* глубокий синий: наведение на кнопку, тёмные плашки */
  --accent: #3d6492;        /* фирменный синий — главный акцент */
  --accent-bright: #6b8fb5; /* светлый синий: значки, точки, подсветка */
  --accent-mist: #cbd9e7;   /* туман: светлые плашки */
  --accent-haze: #e7edf3;   /* дымка: подложка иконок и врезок */
  --warm: #b3608c;          /* пыльная роза — редкий штрих (≤ 5% площади) */
  --warm-soft: #dfc0d2;     /* светлая роза */
  --line: rgba(28, 39, 56, 0.1);           /* тонкие рамки и разделители */
  --glass: rgba(244, 242, 236, 0.72);      /* матовая шапка */
  --scrim: rgba(28, 39, 56, 0.55);         /* затемнение под окном */
  --danger: #9b2c2c; --danger-bg: #fbeaea; --danger-line: #e8c4c4;
  /* Яркие цвета брендбука #004E96 и #EC008C — только внутри логотипа. */

  /* ── Шрифты ── */
  --font: 'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;          /* только курсив: подзаголовки, цитаты */
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;  /* коды и номера */

  /* ── Форма и движение ── */
  --radius: 22px;                           /* карточки; кнопки — 100px (таблетка) */
  --shadow-lift: 0 40px 70px -30px rgba(28, 39, 56, 0.35);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* одна кривая на все анимации */
  --signature: linear-gradient(90deg, var(--accent) 0 61%, var(--warm) 61% 100%);

  /* ── Фон первого экрана: «небо» + «облака» + зерно ── */
  --hero-base: #e7ecf1;
  /* светлее сверху по центру, темнее к краям и низу */
  --hero-sky: radial-gradient(135% 120% at 50% -10%, #ebf0f4 0%, #eff1ee 48%, #dfe7ef 100%);
  /* четыре размытых пятна: синий, глубокий синий, туман, чуть розы */
  --hero-blobs: radial-gradient(38% 48% at 18% 28%, rgba(61, 100, 146, 0.32), transparent 62%),
    radial-gradient(32% 42% at 82% 22%, rgba(42, 74, 112, 0.24), transparent 62%),
    radial-gradient(46% 56% at 65% 84%, rgba(203, 217, 231, 0.65), transparent 66%),
    radial-gradient(30% 36% at 90% 70%, rgba(179, 96, 140, 0.13), transparent 60%);
  --grain-opacity: 0.06;

  /* ── Плотные рабочие таблицы (размеры UniVue, масштаб 100 %) ── */
  --fs-xs: 11px;            /* подписи колонок, коды в плашках, кнопки */
  --fs-sm: 12px;            /* текст строки */
  --fs-md: 13px;
  --fs-lg: 14px;            /* заголовки окон */
  --row-h: 18px;            /* строка; с нижней линией шаг 19px */
  --row-h-section: 22px;    /* строка крупного раздела */
  --head-h: 24px;           /* шапка таблицы */
  --cell-pad-left: 12px;
  --tree-indent: 20px;      /* сдвиг на уровень вложенности */
  --row-veil-hover: color-mix(in srgb, var(--accent) 10%, transparent);
  --row-veil-selected: color-mix(in srgb, var(--accent) 16%, transparent);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Типографика витрины ── */
.k-eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.k-title   { font-weight: 300; letter-spacing: -0.035em; line-height: 0.99; color: var(--ink); }
.k-section { font-weight: 300; letter-spacing: -0.025em; line-height: 1.06; }
.k-lead    { font-family: var(--serif); font-style: italic; color: var(--ink-soft); line-height: 1.5; }
/* Одно главное слово заголовка: синим + розовая черта снизу, которая «прорастает» слева */
.k-title em, .k-section em { font-style: normal; color: var(--accent); position: relative; }
.k-title em::after, .k-section em::after {
  content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.06em; height: 0.07em;
  background: var(--warm); opacity: 0.85; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; animation: k-grow 0.7s var(--ease) 0.9s forwards;
}
@keyframes k-grow { to { transform: scaleX(1); } }

/* ── Фон первого экрана ── */
.k-hero { position: relative; overflow: hidden; background: var(--hero-sky); background-color: var(--hero-base); }
.k-hero::before {                 /* «облака» медленно дышат — экран мягко переливается */
  content: ''; position: absolute; inset: -25%; z-index: 0;
  filter: blur(46px); background: var(--hero-blobs);
  animation: k-breathe 18s ease-in-out infinite alternate;
}
.k-hero > * { position: relative; z-index: 1; }
@keyframes k-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, -3%, 0) scale(1.1); }
}
/* Зерно бумаги поверх всей страницы: <div class="k-grain"></div> последним в body */
.k-grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Матовая шапка: прозрачная вверху, при прокрутке — «стекло» ── */
.k-header { position: fixed; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s, border-color 0.4s; }
.k-header.scrolled { background: var(--glass); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }

/* ── Карточка: при наведении поднимается, сверху прорастает подпись стиля,
      а мягкий свет идёт за курсором (JS ниже ставит --mx/--my) ── */
.k-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s; }
.k-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
  background: var(--signature); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.k-card::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent-bright) 12%, transparent), transparent 65%); }
.k-card > * { position: relative; z-index: 1; }
.k-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lift); border-color: transparent; }
.k-card:hover::before { transform: scaleX(1); }
.k-card:hover::after { opacity: 1; }
/*  JS (одна строка на карточку):
    card.addEventListener('mousemove', e => { const r = card.getBoundingClientRect();
      card.style.setProperty('--mx', e.clientX - r.left + 'px'); card.style.setProperty('--my', e.clientY - r.top + 'px') })  */

/* ── Кнопки-таблетки ── */
.k-btn { font: 600 0.97rem var(--font); display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.82rem 1.5rem; border-radius: 100px; border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s; }
.k-btn-primary { background: var(--accent); color: #fff;
  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--accent-deep) 60%, transparent); }
.k-btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.k-btn-ghost { background: transparent; color: var(--accent-deep);
  border: 1.5px solid color-mix(in srgb, var(--accent-deep) 22%, transparent); }
.k-btn:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }

/* ── Появление при прокрутке: всплывает на 40px и проявляется из лёгкой размытости.
      IntersectionObserver добавляет класс .in; задержки — через --d ── */
.k-reveal { opacity: 0; }
.k-reveal.in { opacity: 1; animation: k-reveal-rise 0.9s var(--ease) var(--d, 0s) backwards; }
@keyframes k-reveal-rise {
  from { opacity: 0; translate: 0 40px; filter: blur(7px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ── Подпись стиля: двухцветная линия 61/39 (пропорции плашек логотипа) ── */
.k-rule { height: 3px; border-radius: 2px; background: var(--signature); }

/* ── Плотная рабочая таблица ── */
table.k-data { table-layout: fixed; width: 100%; border-collapse: collapse; background: var(--white); font-size: var(--fs-sm); }
table.k-data thead th { position: sticky; top: 0; height: var(--head-h); padding: 0 6px; text-align: left;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); background: var(--white); border-bottom: 1px solid var(--line); }
table.k-data tbody tr { height: var(--row-h); border-bottom: 1px solid var(--line); }
table.k-data tbody tr:nth-child(even) { background-color: var(--bg); }
table.k-data td { padding: 0 2px 0 var(--cell-pad-left); line-height: var(--row-h);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.k-data tbody tr:hover > td { background-image: linear-gradient(var(--row-veil-hover), var(--row-veil-hover)); }
table.k-data tbody tr.selected > td { background-image: linear-gradient(var(--row-veil-selected), var(--row-veil-selected)); }
table.k-data .col-filler { padding: 0; }            /* последняя колонка без ширины забирает остаток */
table.k-data .num, table.k-data .code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.k-data .num { text-align: right; }

/* ── Кто просит меньше движения — движения нет ── */
@media (prefers-reduced-motion: reduce) {
  .k-hero::before, .k-title em::after, .k-section em::after { animation: none; }
  .k-title em::after, .k-section em::after { transform: none; }
  .k-reveal, .k-reveal.in { opacity: 1; animation: none; }
  .k-card, .k-btn { transition: none; }
}