/* ============================================================
   QwenNotes — styles.css
   Визуальный язык prismml.com (порт prism-ui-kit), чистый CSS.
   Одна палитра: Kanagawa. Всё держится на восьми токенах.
   ============================================================ */

/* ---------- 1. Палитра Kanagawa -----------------------------
   Восемь токенов. Тема висит и на :root, и на data-theme,
   поэтому страница читается даже без атрибута на <html>.
   ------------------------------------------------------------ */

:root,
[data-theme="kanagawa"] {
  --negative: #1f1f28;
  --negative-muted: #2a2a37;
  --stripe: color-mix(in srgb, #2a2a37 55%, var(--negative));
  --positive: #dcd7ba;
  --positive-muted: #8a8980;
  --positive-bold: #f2ecdc;
  --link: #7e9cd8;
  --purple-accent: #7e9cd8;
  --blurple-accent: #957fb8;
  /* В ките эти четыре токена объявлены только в палитре prism, поэтому у
     kanagawa пропадали штриховка (.striped-spacer, .about-hero-hatch) и тёплый
     цвет ссылок в тексте. Производные значения — от токенов kanagawa. */
  --grid: color-mix(in srgb, var(--positive) 12%, transparent);
  --scrim: color-mix(in srgb, var(--positive) 6%, transparent);
  --link-warm: #e6c384;
  --hatch: var(--negative-muted);
}

/* ---------- 2. Токены формы (не зависят от палитры) ---------- */

:root {
  --font-display: "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --border: 1px solid var(--positive);
  /* Только для внутренних правил внутри одного блока (строки таблицы, меню).
     Структурные границы секций и колонок — всегда --border. */
  --border-soft: 1px solid color-mix(in srgb, var(--positive) 22%, transparent);

  --gutter: 48px;
  --container: 1280px;   /* как на оригинале: фиксированный максимум, по центру */
  --pad-section: 72px;
  --sidebar: 400px;      /* колонка сайдбара на странице статьи */
  --table-min: 720px;    /* ниже этого таблица замеров уходит в горизонтальный скролл */

  --step-label: 10px;   /* badge / eyebrow, uppercase */
  --step-ui: 13px;      /* mono UI: nav, buttons, captions */
  --step-ui-lg: 14px;
  --step-body: 16px;
  --step-lead: 18px;
  --step-h3: 24px;
  --step-h2: 36px;
  --step-h1: 66px;

  --motion-fast: 0.1s;
  --motion: 0.2s;
  --motion-slow: 0.6s;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Обязательный минимум для палитры: фолбэк, если тема его не задала.
   Своя палитра может переопределить --stripe, но не обязана. */
[data-theme] {
  --stripe: color-mix(in srgb, var(--negative-muted) 55%, var(--negative));
}

/* ---------- 3. Reset / база --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--negative);
  color: var(--positive);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

h1 {
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}
h2 {
  font-size: var(--step-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
h3 {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p { font-size: var(--step-body); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--motion) var(--ease), opacity var(--motion) var(--ease);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

sup { top: -0.5em; position: relative; font-size: 0.5em; }

::selection { background: var(--positive); color: var(--negative); }

:focus-visible {
  outline: 1px solid var(--positive);
  outline-offset: 2px;
}

img, svg, canvas { display: block; max-width: 100%; }

/* Цифры не «прыгают» при смене значений — важно для стат и графиков */
.tnum, .stat-value, .mono, code, pre { font-variant-numeric: tabular-nums; }

/* ---------- 4. Каркас: section / container ------------------ */

/* Вертикальные линии по краям контейнера — главная фишка стиля: они проходят
   через всю страницу и «рисуют» сетку. Это `border-inline` контейнера,
   а НЕ рамка сетки: если рисовать обе, на одной кромке окажется 2px. */
.container {
  /* Фиксированный максимум как на оригинале, но с полями 5% на узких экранах:
     `min()` держит обе границы сразу. */
  max-width: min(90vw, var(--container));
  margin-inline: auto;
  border-inline: var(--border);
  position: relative;
}

.section {
  border-bottom: var(--border);
  background-color: var(--negative);
  transition: background-color var(--motion) var(--ease);
}
.section.muted { background-color: var(--negative-muted); }
.section.tall { padding-block: var(--pad-section); }
.section.flush { padding: 0; }
.section.inverted { background-color: var(--positive); color: var(--negative); }
.section.inverted .container { border-color: var(--negative); }

.pad { padding: var(--pad-section) var(--gutter); }
.pad-lg { padding: 96px var(--gutter) 120px; }
.pad-sm { padding: 36px var(--gutter); }
/* Ячейка решётки: одинаковые отступы со всех сторон */
.cell { padding: 36px; }

/* ---------- 5a. Решётка «клетка» ------------------------------------
   Рисует ЗАМКНУТЫЕ ячейки: внешняя рамка вокруг каждой карточки плюс общий
   контур сетки. Линия проходит ровно одна — между соседями общая, поэтому
   двойных линий не бывает. Реализуется без nth-child:

     сдвиг контура на -1px  →  у сетки остаются только верхняя и левая линии,
                               а правая и нижняя уезжают под обрез контейнера;
     overflow: hidden       →  отрицательный margin не выходит за контейнер,
                               внешние края замыкает его `border-right/bottom`.

   Число колонок управляется переменной --cols, поэтому `gap` для вертикальных
   линий не нужен (горизонтальные — обычный row-gap). */
.cells {
  --cols: 3;
  --cell-gap-y: 0px;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
  row-gap: var(--cell-gap-y);
  margin-top: -1px;
  overflow: hidden;
  border-top: var(--border);
  border-left: var(--border);
  background-image:
    linear-gradient(var(--negative), var(--negative)),
    linear-gradient(var(--positive), var(--positive));
  background-size: 100% calc(100% + 1px), 100% 1px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
.cells > * { border-right: var(--border); border-bottom: var(--border); }
.cells.cols-2 { --cols: 2; }
.cells.cols-4 { --cols: 4; }
.cells.divided { --cell-gap-y: 1px; }
.cells.framed { margin-left: -1px; }

/* Внешняя рамка сетки, которая упирается в края контейнера.
   Вертикальные границы здесь даёт КОНТЕЙНЕР (`border-inline`) — как на оригинале,
   где вертикальная линия проходит по краям контейнера через всю страницу.
   Сетка добавляет только свою верхнюю линию и внутренние линии ячеек.
   Внешние линии ячеек при этом не видны: у краевых ячеек остаётся только
   внутренняя линия, а правая уходит ровно под границу контейнера. */
.cells.bordered {
  margin-top: 0;
  border-top: var(--border);
  border-left: none;
  overflow: visible;
  background-image: none;
}
.cells.bordered > *:nth-child(3n) { border-right: none; }

/* `.inner` — сетка внутри `.pad`: её крайние линии не нужны, их уже дают
   вертикальная граница контейнера и горизонтальный разделитель. */
.cells.inner { margin-top: 0; }

@media (max-width: 991px) {
  .cells.md-cols-2 { --cols: 2; }
}
@media (max-width: 640px) {
  /* перечисляем варианты явно: `.cells.cols-2` специфичнее, чем `.cells`,
     поэтому одного `.cells` здесь недостаточно */
  .cells,
  .cells.cols-2,
  .cells.cols-3,
  .cells.cols-4,
  .cells.md-cols-2 { --cols: 1; }
}

/* ---------- 5. Стек-утилиты (замена vflex-NN из Webflow) ----- */

.stack   { display: flex; flex-direction: column; gap: 24px; }
.stack-6 { display: flex; flex-direction: column; gap: 6px; }
.stack-12{ display: flex; flex-direction: column; gap: 12px; }
.stack-18{ display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.stack-24{ display: flex; flex-direction: column; gap: 24px; }
.stack-36{ display: flex; flex-direction: column; gap: 36px; }
.stack-48{ display: flex; flex-direction: column; gap: 48px; }
.row     { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.between { justify-content: space-between; }
.center  { align-items: center; }
.wrap    { flex-wrap: wrap; }
.fill    { flex: 1 1 auto; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* Хайрлайн-решётка: у каждой ячейки линия справа, у последней — нет */
/* Хайрлайн-решётка — только ВНУТРЕННИЕ линии, без внешнего контура.
   Для замкнутых ячеек используйте `.cells` выше: там внешняя рамка есть.

   Снимать границу по `:last-child` нельзя: у сетки в 9 ячеек последняя — это
   9-я, и тогда 3-я и 6-я получают линию поверх границы контейнера (двойная).
   Поэтому крайние в ряду ячейки адресуются по номеру колонки. Число колонок
   в селекторе обязано совпадать с `grid-template-columns`. */
.hairlines > * { border-right: var(--border); }
.hairlines.grid-2 > *:nth-child(2n),
.hairlines.grid-3 > *:nth-child(3n) { border-right: none; }

/* ---------- 6. Типографика-утилиты -------------------------- */

.mono {
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
}
.lead { font-size: var(--step-lead); line-height: 1.45; }
.small { font-size: var(--step-ui-lg); }
.muted { color: var(--positive-muted); }
.measure { max-width: 500px; }
.measure-wide { max-width: 620px; }
.uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.nowrap { white-space: nowrap; }

/* Моно-«линейка» — разделитель внутри карточек */
.rule { height: 1px; background: var(--positive); opacity: 0.25; }
.pipe { width: 1px; height: 36px; background: var(--positive); opacity: 0.3; flex: none; }
.pipe.short { height: 24px; }

/* ---------- 7. Кнопки --------------------------------------- */

.btn {
  display: inline-flex;
  align-items: stretch;
  border: var(--border);
  background-color: var(--positive);
  color: var(--negative);
  font-family: var(--font-mono);
  font-size: var(--step-ui-lg);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--motion) var(--ease),
              color var(--motion) var(--ease),
              border-color var(--motion) var(--ease);
}
.btn:hover { text-decoration: none; }

/* Внутренний слой: текст + стрелка, разъезжаются на hover */
.btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
}
.btn-arrow {
  display: inline-block;
  transition: transform var(--motion) var(--ease);
}
.btn:hover .btn-arrow { transform: translate(3px, -3px); }
.btn:hover { background-color: var(--positive-bold); border-color: var(--positive-bold); }

.btn.outline { background-color: transparent; color: var(--positive); }
.btn.outline:hover { background-color: var(--positive); color: var(--negative); }

.btn.ghost {
  background-color: transparent;
  color: var(--positive);
  border-color: transparent;
  padding: 0;
}
.btn.ghost .btn-inner { padding: 4px 0; }
.btn.ghost:hover { background-color: transparent; border-color: transparent; }
.btn.ghost:hover .btn-text { text-decoration: underline; text-underline-offset: 3px; }

.btn.accent {
  background-image: linear-gradient(270deg, var(--purple-accent), var(--blurple-accent));
  border-color: transparent;
  color: #fff;
}
.btn.accent:hover { filter: brightness(1.08); background-color: transparent; }

.btn.small .btn-inner { padding: 12px 24px; font-size: var(--step-ui); }
.btn.wide { width: 100%; justify-content: center; }
.btn-disabled,
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- 8. Бейджи и чипы -------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 111px;
  padding: 4px 15px;
  background-color: var(--positive);
  color: var(--negative);
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}
.badge.outline { background-color: transparent; color: var(--positive); border: var(--border); }
.badge.muted { background-color: var(--negative-muted); color: var(--positive); }
.badge.accent { background-color: var(--blurple-accent); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--border);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive);
  background: transparent;
}
.chip[data-state="on"] { background-color: var(--positive); color: var(--negative); }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.dot.live { animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Цветной квадрат-подложка под иконку (в оригинале .color-wrapper) */
.color-box {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 6px;
  background-color: var(--negative-muted);
  color: var(--positive);
  flex: none;
}
.color-box.accent { background-image: linear-gradient(270deg, var(--purple-accent), var(--blurple-accent)); color: #fff; }
.color-box svg { width: 100%; height: 100%; }

/* ---------- 9. Формы ---------------------------------------- */

.field { display: flex; flex-direction: column; gap: 8px; }

.label {
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
}

.input {
  width: 100%;
  border: var(--border);
  background-color: transparent;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: var(--step-ui-lg);
  padding: 18px 32px;
  transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease);
  appearance: none;
  border-radius: 0;
}
.input::placeholder { color: var(--positive-muted); }
.input:focus { outline: 1px solid var(--positive); outline-offset: 0; }
.input:disabled { opacity: 0.45; cursor: not-allowed; }
.input.invalid { border-color: #d1442f; outline: 1px solid #d1442f; outline-offset: 0; }
.input.small { padding: 12px 16px; font-size: var(--step-ui); }
textarea.input { min-height: 112px; resize: vertical; line-height: 1.5; }

select.input {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 48px;
  cursor: pointer;
}

.hint { font-family: var(--font-mono); font-size: var(--step-ui); color: var(--positive-muted); }
.hint.error { color: #d1442f; }

.input-row { display: flex; }
.input-row .input + .input { border-left: none; }

/* Чекбокс/радио — квадрат с заливкой, без скруглений */
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--step-ui-lg); }
.check input { appearance: none; margin: 0; flex: none; width: 18px; height: 18px; border: var(--border); background: transparent; cursor: pointer; position: relative; top: 2px; }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background-color: var(--positive); box-shadow: inset 0 0 0 4px var(--negative); }
.check input:checked[type="radio"] { box-shadow: inset 0 0 0 5px var(--negative); }

/* Переключатель — прямоугольный, в стиле «тумблер прибора» */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--font-mono); font-size: var(--step-ui); }
.switch input { appearance: none; margin: 0; width: 46px; height: 24px; border: var(--border); background: transparent; cursor: pointer; position: relative; transition: background-color var(--motion) var(--ease); }
.switch input::after {
  content: ""; position: absolute; inset: 3px auto 3px 3px; width: 16px;
  background: var(--positive); transition: transform var(--motion) var(--ease);
}
.switch input:checked { background-color: var(--positive); }
.switch input:checked::after { transform: translateX(22px); background: var(--negative); }

/* ---------- 10. Навигация ----------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--positive);
  text-decoration: none;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo .mark { width: 22px; height: 22px; flex: none; }

.nav-links { display: flex; align-items: center; gap: 24px; }
/* Служебный класс: на мобиле убирает горизонтальные ряды, которые не влезают */
.hide-mobile { display: flex; }

.nav-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive);
  text-decoration: none;
  padding: 2px 0;
}
.nav-link:hover { text-decoration: none; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--positive);
  transition: right var(--motion) var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { right: 0; }

.nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--positive);
  z-index: 60;
  transition: width 0.08s linear;
}

/* Селектор палитры в шапке */
.theme-picker { position: relative; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  border: var(--border);
  background: transparent;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  padding: 9px 14px;
  cursor: pointer;
  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
}
.theme-toggle:hover { background-color: var(--positive); color: var(--negative); }
.theme-toggle .swatch {
  width: 12px; height: 12px; flex: none;
  background: linear-gradient(135deg, var(--negative) 50%, var(--positive) 50%);
  box-shadow: inset 0 0 0 1px currentColor;
}

.theme-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 232px;
  border: var(--border);
  background: var(--negative);
  z-index: 50;
  padding: 0;
  display: none;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--positive) 18%, transparent);
}
.theme-menu[data-open="true"] { display: block; }

.theme-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: var(--border-soft);
  background: transparent;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease);
}
.theme-option:last-child { border-bottom: none; }
.theme-option:hover { background-color: var(--negative-muted); }
.theme-option[aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.theme-option .swatch {
  width: 14px; height: 14px; flex: none;
  box-shadow: inset 0 0 0 1px var(--positive);
}
.theme-option .swatch.split { background: linear-gradient(90deg, var(--sw-neg) 50%, var(--sw-pos) 50%); }
.theme-option .name { flex: 1 1 auto; }
.theme-option .mono-tag { font-size: 11px; opacity: 0.6; }

/* ---------- 11. Секции: hero, banner, stats ------------------ */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 21px var(--gutter);
  background-color: var(--negative-muted);
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 17px;
  text-decoration: none;
  border-bottom: var(--border);
  overflow: hidden;
}
.banner:hover { text-decoration: none; }
.banner:hover .banner-code { transform: translateX(4px); }
.banner-code {
  transition: transform var(--motion) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero { display: grid; grid-template-columns: 3fr 2fr; gap: 0; }
.hero-left { border-right: var(--border); display: flex; flex-direction: column; }
.hero-right { display: flex; flex-direction: column; }
.hero-intro { padding: 72px var(--gutter) 48px; display: flex; flex-direction: column; gap: 48px; }

.stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px var(--gutter);
  border-top: var(--border);
  flex-wrap: wrap;
}
.stat { display: flex; align-items: center; gap: 15px; }
.stat-value { font-size: var(--step-body); }
.stat-value b { font-weight: 600; }

/* Правая колонка hero: «витрина» с геометрической графикой */
.showcase {
  position: relative;
  min-height: 320px;
  flex: 1 1 auto;
  border-bottom: var(--border);
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--purple-accent) 22%, transparent), transparent 55%),
    linear-gradient(315deg, color-mix(in srgb, var(--blurple-accent) 22%, transparent), transparent 60%);
}
.showcase::before,
.showcase::after {
  content: "";
  position: absolute;
  border: var(--border);
  opacity: 0.5;
}
.showcase::before { width: 62%; aspect-ratio: 1; right: 8%; top: 14%; transform: rotate(45deg); }
.showcase::after  { width: 38%; aspect-ratio: 1; right: 20%; top: 32%; transform: rotate(45deg); }
.showcase-label {
  position: absolute;
  left: var(--gutter); bottom: 24px;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  z-index: 2;
}

/* Числовая «плита» — крупный счётчик с моно-подписью */
.metric-plate { padding: 36px var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.metric-plate .figure {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* ---------- 12. Карточки / панели ---------------------------- */

.panel { display: flex; flex-direction: column; gap: 36px; padding: 36px var(--gutter); justify-content: space-between; }
.panel.featured { padding-bottom: 72px; }

/* Карточка рамку не рисует: внутри решётки `.cells` её замыкают линии ячейки,
   а отдельно стоящая карточка помечается классом `.boxed`. */
.card {
  background: transparent;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background-color var(--motion) var(--ease);
}
.card.boxed { border: var(--border); }
.card:hover { background-color: var(--negative-muted); }
a.card, a.card:hover { text-decoration: none; color: var(--positive); }
.card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.card-flat { border: none; border-top: var(--border); padding: 24px 0; }

/* ---------- 12a. Спейсеры сетки --------------------------------------
   В оригинале секции часто разделяются пустыми ячейками, которые несут
   вертикальные линии контейнера. `.spacer` — пустая ячейка нужной высоты,
   `.striped-spacer` — она же со штриховкой. */

.spacer { height: 36px; }
.spacer.tall { height: 144px; }
.spacer.mid { height: 72px; }
.striped-spacer {
  height: 72px;
  border-top: var(--border);
  background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 14px);
}

/* ---------- 12b. Команда и «О нас» -----------------------------------
   Снято с /about. Hero — сетка 1fr/2fr: слева ШТРИХОВАННАЯ колонка, справа
   текст с двумя абзацами. Сетка команды — 4 колонки, «Meet the team»
   занимает всю первую строку; дальше ряды «три участника + штриховой блок»,
   поэтому сетка визуально не распадается на пустые ячейки.

   Портрет-заглушка рисуется инлайн-SVG, настоящая фотография встаёт тем же
   классом `.headshot` — размеры и обрезка совпадают. */

.about-hero {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: var(--border);
}
.about-hero-hatch {
  border-right: var(--border);
  background-image: repeating-linear-gradient(
    -58deg, var(--hatch) 0 1px, transparent 1px 13px
  );
}
.about-hero-text {
  padding: var(--pad-section) var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  border-left: var(--border);
}
.about-hero-text p { max-width: 560px; }

/* Штриховой блок внутри сетки команды: заполняет пустую ячейку ряда */
.team-hatch {
  background-image: repeating-linear-gradient(
    45deg, var(--hatch) 0 1px, transparent 1px 14px
  );
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--border);
  border-left: var(--border);
}
.team-grid > * { border-right: var(--border); border-bottom: var(--border); }
/* Заголовок — на всю ширину первой строки */
.team-heading {
  grid-column: 1 / -1;
  padding: var(--gutter);
  display: flex;
  align-items: flex-start;
}
.team-member { padding: var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.team-member .role { font-size: var(--step-body); color: var(--positive-muted); }

/* Портрет-заглушка: геометрическая марка в тонах палитры.
   Настоящее фото ставится тем же классом — размеры и обрезка совпадают. */
.headshot {
  width: 150px;
  max-width: 100%;
  aspect-ratio: 1;
  display: block;
  background: var(--negative-muted);
  color: var(--positive-muted);
}
.headshot svg { width: 100%; height: 100%; display: block; }

/* ---------- 12c. Вакансии --------------------------------------------
   Слева — липкое описание, справа — список. Каждый пункт: заголовок,
   мета-строка с иконками и кнопка «Подробнее». */

.careers-hero {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: start;
  padding: 0 var(--gutter);
}
/* Колонка с описанием: sticky на 72px, отступы 72/48/72/0 — как в оригинале.
   Липнет сам этот блок: он и есть grid-элемент, а его высота меньше колонки. */
.careers-hero-text {
  padding: var(--pad-section) 0 var(--pad-section) 0;
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lead-sm {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 620px;
}

/* Список ролей — вторая колонка того же блока, с линией слева и отбивкой 72px
   между пунктами. Своих границ у пунктов нет: это не строки таблицы. */
.jobs {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: var(--pad-section) 0 var(--pad-section) var(--gutter);
  border-left: var(--border);
}

.job-item { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.job-title { font-size: var(--step-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.job-meta { display: flex; flex-wrap: wrap; gap: 18px; }
.job-meta-item { display: inline-flex; align-items: center; gap: 15px; }
.job-meta-icon {
  width: 30px; height: 36px;
  padding: 6px;
  display: grid; place-items: center;
  background: var(--negative-muted);
  flex: none;
}
.job-meta-icon svg { width: 18px; height: 18px; }

@media (max-width: 991px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-hatch { display: none; }
  .about-hero-text { padding-bottom: var(--pad-section); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid > *:nth-child(4n) { border-right: var(--border); }
  .team-grid > *:nth-child(2n) { border-right: none; }
  .careers-hero { grid-template-columns: 1fr; }
  .careers-hero-text { position: static; padding-bottom: 24px; }
  .jobs { border-left: none; padding-left: 0; gap: 48px; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid > * { border-right: none; }
  .team-grid > *:nth-last-child(-n + 1) { border-bottom: none; }
  .job-item { flex-direction: column; gap: 24px; }
}

/* ---------- 12d. Карточка-статья (паттерн блога prismml) ------
   Раскладка на grid растягивает ячейки ряда до самой высокой, поэтому внутри
   одного ряда высота всегда одинаковая. Намеренно: строка с заголовком в 3 строки
   задаёт высоту всего ряда, а короткие карточки её наследуют. */

.news-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  min-height: 216px;
  height: 100%;
  padding: 36px;
  background: transparent;
  color: var(--positive);
  text-decoration: none;
  transition: background-color var(--motion) var(--ease);
}
.news-card:hover { background-color: var(--negative-muted); text-decoration: none; }
.news-card:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.news-card:hover .card-arrow { transform: translate(3px, -3px); }

.news-card h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.news-card .news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
}
.news-card .news-meta .dot-sep { opacity: 0.5; }
.news-card .card-arrow { margin-left: auto; transition: transform var(--motion) var(--ease); }
.news-card.compact { min-height: 0; gap: 18px; padding: 24px 36px; }
.news-card.compact h4 { font-size: var(--step-body); }

/* Штриховка пустой ячейки решётки — приём из оригинального блога */
.hatched {
  background-image: repeating-linear-gradient(45deg, var(--stripe) 0 1px, transparent 1px 7px);
  display: grid;
  place-items: center;
}
.hatched .hatch-label {
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
  background: var(--negative);
  padding: 6px 12px;
}

/* Плитка-логотип (в оригинале .supporter-logo-wrapper) */
.logo-cell {
  display: grid;
  place-items: center;
  padding: 24px;
  min-height: 88px;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
  border-right: var(--border);
  border-bottom: var(--border);
  transition: color var(--motion) var(--ease), background-color var(--motion) var(--ease);
}
.logo-cell:hover { color: var(--positive); background-color: var(--negative-muted); }

/* Полосатая «шахматка» для таблиц */
.table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--step-ui); }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: var(--border-soft); }
.table th { font-weight: 400; color: var(--positive-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:hover td { background-color: var(--negative-muted); }
.table tr[data-state="best"] td { background-color: color-mix(in srgb, var(--purple-accent) 12%, transparent); }

/* ---------- 12e. Страница статьи ------------------------------------
   Двухколоночная сетка 1fr / 400px: контент слева, липкий сайдбар справа.
   Снято с /news/bonsai-8b: `.news-post-hero-wrapper` (grid 1fr 400px)
   → `.post-content-wrapper` (padding 72/48) + `.related-posts-wrapper`. */

.article-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar);
  border-top: var(--border);
}
/* min-width: 0 — иначе grid-элемент не сжимается ниже содержимого
   (таблица замеров 720px распирала бы всю страницу) */
.article-body {
  min-width: 0;
  padding: var(--pad-section) var(--gutter);
  border-right: var(--border);
}
.article-side { padding: var(--pad-section) var(--gutter); }

/* Липнет ВНУТРЕННИЙ блок, а не сам grid-элемент: у grid-элемента высота равна
   его области, и `position: sticky` на нём не имеет хода для движения. */
.article-side-sticky {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

@media (max-width: 991px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-body { border-right: none; border-bottom: var(--border); }
  .article-side-sticky { position: static; }
}

/* Хлебная ссылка «назад»: стрелка слева, уезжает на hover */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--positive);
  text-decoration: none;
  transition: transform var(--motion) var(--ease);
}
.back-link:hover { transform: translateX(-6px); text-decoration: none; }
.back-link .arrow { font-family: var(--font-mono); font-size: var(--step-ui); }

/* Мета-строка статьи: дата • автор • издание */
.news-meta-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
}
.news-meta-line > * { flex: 0 0 auto; white-space: nowrap; }
.news-meta-line .sep { opacity: 0.5; }

/* Боковые ссылки сайдбара: иконка 24px + моно-подпись */
.side-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.side-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--positive-muted);
  text-decoration: none;
  transition: color var(--motion) var(--ease);
}
.side-link:hover { color: var(--positive); text-decoration: none; }
.side-link:hover .side-link-text { text-decoration: underline; text-underline-offset: 3px; }
.side-link-icon { width: 24px; height: 24px; flex: none; }
.side-link-text { font-family: var(--font-mono); font-size: var(--step-ui); }

/* ---------- 12f. Длинный текст `.rich-text` --------------------------
   Типографика статьи: вертикальный ритм 18px между блоками, ссылки теплее
   основного текста, подписи и цитаты — 14px курсивом по центру. */

.rich-text { display: flex; flex-direction: column; gap: 18px; }
.rich-text > * { margin: 0; }
.rich-text h2 {
  font-size: var(--step-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 18px;
}
.rich-text h3 { font-size: var(--step-h3); font-weight: 600; line-height: 1.2; }
.rich-text p { font-size: var(--step-body); line-height: 1.5; }
.rich-text a { color: var(--link-warm); text-decoration: underline; text-underline-offset: 3px; }
.rich-text strong { font-weight: 600; }
.rich-text ul, .rich-text ol { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.rich-text li { font-size: var(--step-body); line-height: 1.5; }
.rich-text img { width: 100%; display: block; }
.rich-text figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rich-text figcaption,
.rich-text blockquote {
  font-size: var(--step-ui-lg);
  line-height: 1.5;
  font-style: italic;
  text-align: center;
  border: none;
  padding: 0;
}
.rich-text code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--negative-muted);
  padding: 2px 6px;
}
.rich-text pre {
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  line-height: 1.7;
  background: var(--negative-muted);
  border: var(--border);
  padding: 24px;
  overflow-x: auto;
}
.rich-text pre code { background: none; padding: 0; }

/* ---------- 12g. Таблица замеров `.data-table` -----------------------
   Снято с `.pml-tbl`: шапка — инверсия, числовые колонки вправо с tabular-nums,
   зебра через `--negative-muted`, третья колонка (средний балл) жирная.
   Горизонтальный скролл с тенью у правого края. */

.table-frame { position: relative; width: 100%; min-width: 0; }
.table-frame::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.18) 100%);
}
.table-scroll {
  display: block;
  width: 100%;
  /* min-width: 0 обязателен: без него grid/flex-элемент не сжимается ниже
     min-width таблицы (720px) и распирает страницу вместо своего скролла */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.data-table {
  width: 100%;
  min-width: var(--table-min);
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--step-ui-lg);
  line-height: 1.5;
  color: var(--positive);
}
.data-table thead th {
  background: var(--positive);
  color: var(--negative);
  font-weight: 700;
  text-align: right;
  padding: 12px 14px;
  white-space: nowrap;
}
.data-table thead th:first-child { text-align: left; }
.data-table tbody td {
  padding: 10px 14px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table tbody td:first-child { text-align: left; }
.data-table tbody td:nth-child(3) { font-weight: 700; }
.data-table tbody tr.is-best td:nth-child(1),
.data-table tbody tr.is-best td:nth-child(2) { font-weight: 700; }
.data-table tbody tr:nth-child(odd) td { background: transparent; }
.data-table tbody tr:nth-child(even) td { background: var(--negative-muted); }

/* ---------- 13. Табы и аккордеон ----------------------------
   Таб-контрол — законченная секция: вертикальные линии контейнера по бокам,
   верхняя линия блока и линия таб-бара снизу. Модель состояний — из оригинала:
   активный таб НЕ инвертируется, а получает подчёркивание 2px; прозрачная
   нижняя граница 2px есть у всех табов, чтобы при переключении ничего не сдвигалось. */

[data-tabs] { border-top: var(--border); border-bottom: var(--border); }

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--border);
}
.tab-btn {
  appearance: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--positive-muted);
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  letter-spacing: normal;
  padding: 24px;
  cursor: pointer;
  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.tab-btn:hover { color: var(--positive); }
.tab-btn[aria-selected="true"] {
  color: var(--positive-bold);
  border-bottom-color: var(--positive);
}

.tab-panel { display: none; }
.tab-panel[data-active="true"] { display: block; animation: fade var(--motion) var(--ease); }
/* Высоту панелей выравнивает `app.js` по самой высокой: иначе при переключении
   вкладок скачет вся страница. `min-height` — фолбэк, если скрипт не выполнился. */
.tab-panel { min-height: 280px; }
/* Внутренний отступ панели: бар стоит вплотную к вертикальным линиям контейнера,
   а отступы живут внутри панели — как `.wrapper` с `padding: 48px` в оригинале. */
.tab-panel > .wrap { padding: 48px var(--gutter); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.accordion { border-top: var(--border); }
.acc-item { border-bottom: var(--border); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--gutter);
  background: transparent;
  border: none;
  color: var(--positive);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.acc-btn:hover { background-color: var(--negative-muted); }
.acc-btn .sign { font-family: var(--font-mono); font-weight: 400; transition: transform var(--motion) var(--ease); }
.acc-btn[aria-expanded="true"] .sign { transform: rotate(45deg); }
.acc-body { display: none; padding: 0 var(--gutter) 24px; max-width: 720px; color: var(--positive-muted); }
.acc-body[data-open="true"] { display: block; animation: fade var(--motion) var(--ease); }

/* ---------- 14. Список палитр (галерея) --------------------- */

.palette-grid { /* сетку задаёт .cells; здесь только смысловая роль */ }
.palette-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--positive);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color var(--motion) var(--ease);
}
.palette-card:hover { background-color: var(--negative-muted); }
.palette-card[aria-pressed="true"] { background-color: var(--negative-muted); }
.palette-preview { height: 96px; display: flex; }
.palette-preview span { flex: 1 1 auto; }
.palette-meta {
  padding: 18px 24px 24px;
  border-top: var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.palette-meta .name { font-weight: 600; }

/* ---------- 15. Код и тосты --------------------------------- */

.code-block {
  position: relative;
  border: var(--border);
  background: var(--negative-muted);
  padding: 24px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  line-height: 1.7;
  color: var(--positive);
  white-space: pre;
}
.code-block .tok-sel { color: var(--purple-accent); }
.code-block .tok-prop { color: var(--positive-muted); }
.code-block .tok-val { color: var(--link); }
.code-copy {
  position: absolute; top: 8px; right: 8px;
  border: var(--border);
  background: var(--negative);
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
}
.code-copy:hover { background: var(--positive); color: var(--negative); }

/* Всплывающее подтверждение копирования */
.toast-host {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 80;
  pointer-events: none;
}
.toast {
  border: var(--border);
  background: var(--positive);
  color: var(--negative);
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  padding: 10px 16px;
  animation: toast-in var(--motion) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 16. Футер ---------------------------------------
   Как в оригинале: две колонки и отступы 96/48/120. Слева — логотип, форма
   подписки и копирайт; справа — пять колонок ссылок. Форма горизонтальная:
   поле и кнопка в одну строку. */

.footer {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 48px;
  padding: 96px var(--gutter) 120px;
}
.footer-left { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.footer-left-inner { display: flex; flex-direction: column; gap: 6px; }
.footer-form { display: flex; flex-direction: column; gap: 12px; }
.footer-copy { font-size: var(--step-ui-lg); opacity: 0.65; }
.footer-grid {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .label {
  font-family: var(--font-display);
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--positive);
  margin-bottom: 6px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--step-ui);
  color: var(--positive-muted);
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .footer { flex-direction: column; gap: 36px; padding-top: 48px; padding-bottom: 72px; }
  .footer-grid { flex-wrap: wrap; gap: 48px; }
}

/* ---------- 17. Появление при скролле ------------------------
   Скрытие включается ТОЛЬКО скриптом: `app.js` ставит `js-reveal` на <html>,
   поэтому без JS и при `prefers-reduced-motion` контент виден сразу.
   Иначе скриншот полной страницы (или печать) показывает пустые блоки. */

[data-reveal] { opacity: 1; }

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
}
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 18. Адаптив ------------------------------------- */

@media (max-width: 991px) {
  :root { --gutter: 24px; --step-h1: 48px; --step-h2: 32px; --pad-section: 48px; }
  .hero { grid-template-columns: 1fr; }
  .hero-left { border-right: none; border-bottom: var(--border); }
  .footer { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 72px; }
  .hide-mobile { display: none; }
  .showcase { min-height: 220px; }
}

@media (max-width: 640px) {
  :root { --step-h1: 38px; --step-h2: 28px; --step-h3: 21px; }
  .input { padding: 14px 18px; font-size: var(--step-ui); }
  .btn-inner { padding: 14px 20px; font-size: var(--step-ui); }
  .stats { gap: 16px; }
  .pipe { display: none; }
  /* Пикер палитры остаётся один в шапке — убираем длинную подпись */
  .theme-toggle > [data-theme-name] { display: none; }
  .theme-toggle { padding: 9px 12px; }
  .theme-menu { min-width: 210px; }
}

/* ---------- 19. Печать -------------------------------------- */

@media print {
  .theme-picker, .nav-progress, .toast-host, .banner { display: none; }
  .tab-panel { display: block !important; }
  .acc-body { display: block !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Доводка сетки под 2 и 4 колонки (см. guides/02-components.md) --- */

.cells.cols-2.bordered > *:nth-child(2n) { border-right: none; }
.cells.cols-2.bordered > *:nth-child(3n) { border-right: var(--border); }
.cells.cols-4.bordered > *:nth-child(4n) { border-right: none; }
.cells.cols-4.bordered > *:nth-child(3n) { border-right: var(--border); }

@media (max-width: 991px) {
  .cells.cols-4.bordered > *:nth-child(3n) { border-right: var(--border); }
  .cells.cols-4.bordered > *:nth-child(2n) { border-right: none; }
}