/* ═══ Витрина clusker.io — база. Токены повторяют продукт (web/src/shared/tokens.css,
   нейтральная схема): сайт в стиле самого продукта. Секции пользуются ТОЛЬКО токенами. ═══ */
:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --surface-sunk: #F0F0F0;
  --rail: #FBFBFB;
  --ink: #202020;
  --ink-2: #444444;
  --muted: #666666;
  --faint: #8A8A8A;
  --line: #EDEDED;
  --line-strong: #DCDCDC;
  --edge: #878787;
  --accent: #C9452C;
  --accent-hover: #B03B25;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(201, 69, 44, 0.10);
  --sel-soft: rgba(35, 131, 226, 0.16);

  --g-green: #2F6B52;   --g-green-bg: rgba(47,107,82,.12);
  --g-amber: #9A6A11;   --g-amber-bg: rgba(154,106,17,.14);
  --g-violet: #5B49A0;  --g-violet-bg: rgba(91,73,160,.13);
  --g-blue: #26608F;    --g-blue-bg: rgba(38,96,143,.12);
  --g-grey: #6B655E;    --g-grey-bg: rgba(107,101,94,.12);

  --t-graphite: #6B655E; --t-graphite-bg: rgba(107,101,94,.14);
  --t-clay:     #8A5A3E; --t-clay-bg:     rgba(138,90,62,.14);
  --t-ochre:    #9A6A11; --t-ochre-bg:    rgba(154,106,17,.14);
  --t-olive:    #6D7A2C; --t-olive-bg:    rgba(109,122,44,.14);
  --t-sage:     #47795A; --t-sage-bg:     rgba(71,121,90,.14);
  --t-teal:     #2C7370; --t-teal-bg:     rgba(44,115,112,.14);
  --t-sky:      #26608F; --t-sky-bg:      rgba(38,96,143,.14);
  --t-indigo:   #4A55A0; --t-indigo-bg:   rgba(74,85,160,.14);
  --t-lavender: #6B4FA8; --t-lavender-bg: rgba(107,79,168,.14);
  --t-plum:     #8B4292; --t-plum-bg:     rgba(139,66,146,.14);
  --t-rose:     #A2436A; --t-rose-bg:     rgba(162,67,106,.14);
  --t-wine:     #8E3D52; --t-wine-bg:     rgba(142,61,82,.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.05);
  --shadow-3: 0 12px 34px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  --shadow-stage: 0 1px 19px rgba(42,29,48,.06), 0 24px 64px rgba(42,29,48,.10);

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px;
  --sp-7: 24px; --sp-8: 32px; --sp-9: 48px; --sp-10: 64px; --sp-11: 96px; --sp-12: 128px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131313; --surface: #1B1B1B; --surface-2: #1A1A1A; --surface-sunk: #191919; --rail: #0F0F0F;
    --ink: #EAEAEA; --ink-2: #C4C4C4; --muted: #A0A0A0; --faint: #7A7A7A;
    --line: #2D2D2D; --line-strong: #3B3B3B; --edge: #717171;
    --accent: #E4674B; --accent-hover: #EE7A60; --accent-ink: #1A1412; --accent-soft: rgba(228,103,75,.14);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 16px rgba(0,0,0,.45);
    --shadow-3: 0 12px 34px rgba(0,0,0,.55);
    --shadow-stage: 0 24px 64px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Кольцо фокуса — только outline: форму элемента оно не трогает (урок §14.751). */
::selection { background: var(--sel-soft); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--ink); color: var(--bg); border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Раскладка */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section { padding-block: clamp(64px, 10vw, 128px); }
.section--tint { background: var(--surface-2); }
.section__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ── Типографика: надзаголовок-действие, заголовок-выгода, абзац в два предложения */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent); margin-bottom: 12px; }
.h-display { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
.h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; }
.h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 650; }
.h4 { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kbd { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; align-items: center; justify-content: center; font: 500 12px/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; }

/* ── Кнопки: одна акцентная на экран, остальное чернилами */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn--lg { height: 48px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { opacity: .88; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--edge); }
.btn--text { background: transparent; color: var(--ink); padding-inline: 8px; }
.btn--text:hover { background: var(--surface-2); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform .15s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ── Чипы метки — палитра значений --t-* */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); }

/* ── Сцена под интерфейс: мягкая подложка, окно приложения, тень */
.stage { position: relative; border-radius: var(--r-xl); padding: clamp(16px, 3.5vw, 48px); background:
  radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 55%),
  radial-gradient(90% 80% at 100% 100%, var(--t-sky-bg), transparent 60%), var(--surface-2); overflow: hidden; }
.frame { position: relative; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-stage); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--rail); }
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.frame__bar span { margin-inline: auto; font: 500 11.5px/1 var(--sans); color: var(--faint); transform: translateX(-24px); }

/* ── Масштаб сцены интерфейса: .mock рисуется в родном размере (data-w × data-h)
   и ужимается целиком, как скриншот. Считает base.js; без JS — обрезка по ширине. */
.mock { position: relative; width: 100%; overflow: hidden; }
.mock > .mock__canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink); background: var(--bg); text-align: left; }
.mock[inert], .mock [inert] { user-select: none; }

/* ── Место под видео */
.video-slot { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink) 3%, transparent) 14px 15px), var(--surface); color: var(--faint); font-size: 13px; }

/* ── Вошёл или впервые здесь (§14.766). Знак ставит base/signedin.js в <head>
   по куке `clusker_in`, которую сервер приложения выдаёт вместе с сессией.
   Обе половины кнопки стоят в разметке рядом, и переключает их CSS: подпись,
   переписанная скриптом, успела бы мигнуть, а прятать нечего — элемент уже
   есть. Без JS знака нет, и витрина остаётся в гостевом виде: вошедший узнает
   свою кнопку и так, а пришедший впервые обязан увидеть дверь.

   Только `display: none`, и оба правила симметричны: показывать нечем —
   у кнопок, пунктов списка и ячеек своя раскладка, и «вернуть» её единым
   значением нельзя. */
html[data-signed-in] .for-guest { display: none !important; }
html:not([data-signed-in]) .for-member { display: none !important; }

/* ── Появление при прокрутке. Прячется, только когда скрипт есть: класс js ставит base/lang.js
   в <head> до отрисовки. Без JS класса нет, и текст виден (прежний html.no-js никто не ставил —
   без скрипта витрина была пустой). :where — чтобы специфичность осталась (0,1,0) и задержки
   секций (.s-modules__grid > [data-reveal] и т. п.) не сбивались шортхендом transition. */
:where(html.js) [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ── blog-teaser ── */
/* Три последних поста на главной. Сама карточка (.b-card) и обложки — в blog/style.css. */
.s-blog-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7); margin-bottom: clamp(32px, 5vw, 56px); }
.s-blog-teaser__head .h2 { max-width: 640px; }
.s-blog-teaser__all { flex: none; padding-bottom: 6px; }
.s-blog-teaser__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-9) var(--sp-8); }
/* Постов ещё нет — секция не стоит пустой полосой. */
.s-blog-teaser:not(:has(.b-card)) { display: none; }
@media (max-width: 1040px) {
  .s-blog-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-blog-teaser__grid > .b-card:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .s-blog-teaser__head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .s-blog-teaser__all { padding-bottom: 0; }
  .s-blog-teaser__grid { grid-template-columns: minmax(0, 1fr); }
  .s-blog-teaser__grid > .b-card:nth-child(3) { display: block; }
}


/* ── cta-final ── */
/* Финальный призыв перед подвалом: карточка по центру на мягкой подложке в духе .stage. */
.s-cta-final__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding-block: clamp(56px, 9vw, 112px);
  padding-inline: clamp(20px, 5vw, 64px);
  background:
    radial-gradient(70% 90% at 50% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(55% 80% at 0% 100%, var(--t-sky-bg), transparent 70%),
    radial-gradient(55% 80% at 100% 100%, var(--t-lavender-bg), transparent 70%),
    var(--surface-2);
}
/* Точки знака Clusker — редкой сеткой, гаснут к краям */
.s-cta-final__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: center;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, var(--ink), transparent);
  mask-image: radial-gradient(60% 70% at 50% 45%, var(--ink), transparent);
}
.s-cta-final__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  margin-bottom: var(--sp-7);
}
.s-cta-final__title {
  max-width: 20ch;
  text-wrap: balance;
}
.s-cta-final__lead {
  max-width: 56ch;
  margin-top: var(--sp-6);
  text-wrap: pretty;
}
.s-cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.s-cta-final__note {
  margin-top: var(--sp-6);
  color: var(--muted);
}
@media (max-width: 480px) {
  .s-cta-final__actions { flex-direction: column; align-self: stretch; }
  .s-cta-final__actions .btn { width: 100%; }
}


/* ── features ── */
/* Секция features — чередующиеся ряды «текст ↔ сцена» (docs/48 §6, §10).
   Только токены; тёмная тема — через color-mix с --ink, палитра --t-* там не темнеет сама. */
.s-features__rows { display: grid; gap: clamp(64px, 9vw, 120px); }

/* Цвет модуля — палитра значений --t-*, у каждого ряда свой */
.s-features__row--tasks   { --c: var(--t-sky); }
.s-features__row--docs    { --c: var(--t-lavender); }
.s-features__row--bases   { --c: var(--t-teal); }
.s-features__row--canvas  { --c: var(--t-ochre); }
.s-features__row--finance { --c: var(--t-sage); }
.s-features__row--vault   { --c: var(--t-wine); }
.s-features__row--teams   { --c: var(--t-indigo); }

.s-features__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}

.s-features__text { max-width: 520px; }

.s-features .s-features__eyebrow { color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.s-features .s-features__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c);
}

.s-features__title {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.s-features__body {
  margin-top: var(--sp-5);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.s-features__list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.s-features__list li { display: flex; align-items: flex-start; gap: var(--sp-5); }
.s-features__tick {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--g-green-bg);
  color: var(--g-green);
}
.s-features__tick path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-features__list kbd {
  display: inline-flex; min-width: 20px; height: 20px; padding: 0 5px;
  align-items: center; justify-content: center; vertical-align: 1px;
  font: 500 11.5px/1 var(--mono); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
}

.s-features__more { margin-top: var(--sp-7); }

@media (min-width: 960px) {
  .s-features__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 80px);
  }
  /* Чётные ряды зеркально: сцена слева, текст справа. В разметке текст всегда первым —
     на узком экране он встаёт над сценой без перестановки. */
  .s-features__row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .s-features__row:nth-child(even) .s-features__text { order: 2; }
}

/* Сцена догоняет текст на полшага — ряд собирается, а не вспыхивает целиком */
@media (prefers-reduced-motion: no-preference) {
  .s-features__stage[data-reveal] { transition-delay: .08s; }
}

@media (prefers-color-scheme: dark) {
  .s-features .s-features__eyebrow { color: color-mix(in srgb, var(--c) 62%, var(--ink)); }
  .s-features__tick { color: color-mix(in srgb, var(--g-green) 70%, var(--ink)); }
}


/* ── footer ── */
/* Подвал: знак и авторская строка, пять колонок ссылок, язык, огромный вордмарк, © */
.s-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-top: clamp(48px, 7vw, 88px);
  font-size: 14px;
}

/* ── Верх: знак + строка слева, язык справа */
.s-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-7) var(--sp-8);
  margin-bottom: clamp(40px, 6vw, 64px);
}
.s-footer__brand { max-width: 420px; }
.s-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.s-footer__logo img { width: 28px; height: 28px; border-radius: 7px; }
.s-footer__tagline {
  margin-top: var(--sp-5);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── Язык: ссылками, а не <select> — смена по `change` нарушала бы WCAG 3.2.2.
   Текущий язык отмечен aria-current (footer/script.js) и правилом html[lang] — видно и без скрипта. */
.s-footer__langs {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
}
.s-footer__lang-globe { margin-inline: var(--sp-4) var(--sp-2); flex: none; }
.s-footer__langs a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font: 500 14px/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.s-footer__langs a:hover { background: var(--surface-2); color: var(--ink); }
.s-footer__langs a[aria-current="true"],
html[lang="en"] .s-footer__langs a[data-set-lang="en"],
html[lang="ru"] .s-footer__langs a[data-set-lang="ru"] { background: var(--surface-sunk); color: var(--ink); }

/* ── Колонки ссылок */
.s-footer__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-7);
}
.s-footer__h {
  margin-bottom: var(--sp-6);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
}
.s-footer__col ul {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
}
.s-footer__nav a,
.s-footer__legal a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.s-footer__nav a:hover,
.s-footer__legal a:hover { color: var(--ink); }

/* ── Вордмарк во всю ширину контейнера, обрезан снизу по линии подвала.
   Размер от ширины контейнера (cqi): «Clusker» жирным ≈ 3,0–3,3 em, 29cqi помещается
   у всех системных шрифтов; без контейнерных единиц — clamp от ширины окна. */
.s-footer__mark-wrap {
  container-type: inline-size;
  margin-top: clamp(48px, 8vw, 96px);
  user-select: none;
  pointer-events: none;
}
.s-footer__mark {
  font-size: clamp(80px, 18vw, 240px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: .8;
  height: .62em;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: var(--line-strong);
}
@supports (font-size: 1cqi) {
  .s-footer__mark { font-size: 29cqi; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .s-footer__mark {
    color: transparent;
    background-image: linear-gradient(to bottom, var(--line-strong) 25%, transparent 105%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* ── Самый низ */
.s-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-7);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.s-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin: 0;
}

@media (max-width: 960px) {
  .s-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .s-footer__top { flex-direction: column; }
  .s-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
}


/* ── header ── */
/* Шапка витрины: залипает, полупрозрачная; мега-меню карточкой под кнопкой; на ≤ 960 — лист. */
.s-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); }
/* Размытие — на подложке, а не на самой шапке: backdrop-filter у шапки сделал бы её
   опорой для position:fixed, и лист телефона вырос бы на 64 px вместо экрана. */
.s-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s-header::before { background: var(--bg); }
}
.s-header.is-scrolled::before { border-bottom-color: var(--line); }
.s-header.is-sheet-open::before { background: var(--bg); border-bottom-color: var(--line); }

.s-header__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-header :where(svg) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.s-header__bar { height: 100%; display: flex; align-items: center; gap: var(--sp-7); }

.s-header__brand { flex: none; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; border-radius: var(--r-sm); }
.s-header__brand img { width: 26px; height: 26px; }

/* ── Меню */
.s-header__nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.s-header__menu { display: flex; align-items: center; gap: var(--sp-2); }
.s-header__trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.s-header__trigger:hover,
.s-header__item.is-open > .s-header__trigger { background: var(--surface-2); color: var(--ink); }
.s-header__chev { width: 14px; height: 14px; stroke-width: 2; opacity: .6; transition: transform .16s var(--ease); }
.s-header__item.is-open > .s-header__trigger .s-header__chev { transform: rotate(180deg); }

/* ── Панель: левый край ставит script.js под кнопку, в пределах контейнера */
.s-header__panel {
  position: absolute; top: calc(100% - 6px); left: 50%;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-5); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
}
/* мостик над панелью: курсор идёт от кнопки вниз и не теряет меню на щели */
.s-header__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.s-header__item.is-open > .s-header__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s;
}
.s-header__panel--for { width: min(620px, calc(100vw - 2 * var(--gutter))); }
.s-header__panel--res { width: min(380px, calc(100vw - 2 * var(--gutter))); }
.s-header__panel--lang { width: 200px; padding: var(--sp-2); left: auto; right: var(--gutter); }

.s-header__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.s-header__colhead { padding: var(--sp-4) var(--sp-5) var(--sp-3); font-size: 12.5px; font-weight: 600; color: var(--faint); letter-spacing: .01em; }
.s-header__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

.s-header__entry {
  display: flex; align-items: flex-start; gap: 10px; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background-color .12s;
}
.s-header__entry:hover, .s-header__entry:focus-visible { background: var(--surface-2); }
.s-header__entry > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.s-header__entry b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.s-header__entry small { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-header__ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); transition: color .12s; }
.s-header__entry:hover .s-header__ico, .s-header__entry:focus-visible .s-header__ico { color: var(--ink); }

.s-header__foot {
  margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  padding: var(--sp-5) var(--sp-7); font-size: 14px;
  background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Правый край */
.s-header__end { flex: none; display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.s-header__langbtn { gap: var(--sp-3); padding: 0 var(--sp-4); font-size: 13px; font-weight: 600; color: var(--muted); }
.s-header__globe { width: 17px; height: 17px; }
.s-header__login { color: var(--ink-2); }

.s-header__langopt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 36px; padding: 0 10px;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; text-decoration: none; transition: background-color .12s;
}
.s-header__langopt:hover { background: var(--surface-2); color: var(--ink); }
.s-header__langopt svg { width: 16px; height: 16px; stroke-width: 2; color: var(--accent); visibility: hidden; }
/* текущий язык виден и без скрипта — по lang страницы; script.js ставит ещё aria-current */
html[lang="en"] .s-header__langopt[data-set-lang="en"],
html[lang="ru"] .s-header__langopt[data-set-lang="ru"],
.s-header__langopt[aria-current="true"] { color: var(--ink); font-weight: 600; }
html[lang="en"] .s-header__langopt[data-set-lang="en"] svg,
html[lang="ru"] .s-header__langopt[data-set-lang="ru"] svg,
.s-header__langopt[aria-current="true"] svg { visibility: visible; }

/* ── Бургер: две черты, в открытом — крест */
.s-header__burger { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); cursor: pointer; }
.s-header__burger:hover { background: var(--surface-2); }
.s-header__burger i { position: absolute; left: 11px; right: 11px; top: 50%; height: 1.75px; margin-top: -0.875px; border-radius: var(--r-pill); background: currentColor; transition: transform .2s var(--ease); }
.s-header__burger i:first-child { transform: translateY(-4px); }
.s-header__burger i:last-child { transform: translateY(4px); }
.s-header__burger[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.s-header__burger[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }

/* ── Лист телефона */
.s-header__sheet {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
}
.s-header.is-sheet-open .s-header__sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s; }
.s-header.is-sheet-open .s-header__open { visibility: hidden; }
.s-header__sheetin { min-height: 100%; display: flex; flex-direction: column; padding-block: var(--sp-4) var(--sp-8); }

.s-header__acc { border-bottom: 1px solid var(--line); }
.s-header__accbtn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 var(--sp-2);
  border: 0; background: transparent; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  text-align: left; text-decoration: none; cursor: pointer;
}
.s-header__accbtn--link { border-bottom: 1px solid var(--line); }
.s-header__pm { width: 18px; height: 18px; stroke-width: 1.8; color: var(--muted); }
.s-header__pmv { transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease); }
.s-header__accbtn[aria-expanded="true"] .s-header__pmv { transform: scaleY(0); }
.s-header__accbody { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-5); }
.s-header__sheetlink {
  display: flex; align-items: center; gap: var(--sp-5); min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); color: var(--ink-2); font-size: 16px; text-decoration: none;
}
.s-header__sheetlink:hover { background: var(--surface-2); color: var(--ink); }
.s-header__sheetlink--more { color: var(--ink); font-size: 15px; font-weight: 600; }

.s-header__sheetfoot { margin-top: auto; padding-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.s-header__sheetfoot .btn { width: 100%; }
.s-header__sheetlang { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); color: var(--muted); }
.s-header__sheetlang .s-header__langopt { justify-content: center; padding: 0 var(--sp-5); border-radius: var(--r-pill); }
.s-header__sheetlang .s-header__langopt[aria-current="true"],
html[lang="en"] .s-header__sheetlang .s-header__langopt[data-set-lang="en"],
html[lang="ru"] .s-header__sheetlang .s-header__langopt[data-set-lang="ru"] { background: var(--surface-2); }

@media (min-width: 600px) {
  .s-header__accbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .s-header__nav, .s-header__login, .s-header__lang { display: none; }
  .s-header__burger { display: inline-block; }
  .s-header__bar { gap: var(--sp-5); }
}
@media (min-width: 961px) {
  .s-header__sheet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-header__panel, .s-header__sheet, .s-header__item.is-open > .s-header__panel, .s-header.is-sheet-open .s-header__sheet { transition: none; transform: none; }
}

/* §14.766.2: ПОРОГ 961–1100 СНЯТ. Он заводился §14.752.3 под две длинные подписи
   рядом («Открыть Clusker» + «Начать бесплатно»): русская строка не влезала
   на ~7 px при 961 px, и ценой был спрятанный выбор языка. Теперь у гостя слева
   стоит «Войти» — на десять знаков короче, — а у вошедшего кнопка одна вовсе,
   и прятать нечего. Поля пунктов меню тоже возвращены к общим.
   Считано по кеглям, не измерено браузером: его на машине нет. */



/* ── hero ── */
/* Герой главной: бейдж, заголовок-выгода, лид, две кнопки, сцена «Сегодня» (+ телефон на широком). */
.s-hero {
  position: relative;
  isolation: isolate;
  /* шапка залипает поверх: 64 px её высоты + воздух */
  padding-top: clamp(32px, 6vw, 80px); /* шапка sticky и стоит в потоке — её высоту не прибавляем */
  padding-bottom: clamp(56px, 8vw, 112px);
  text-align: center;
}

/* ── Фон: мягкие пятна, без картинок */
.s-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.s-hero__glow { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; }
.s-hero__glow--a { width: max(320px, 48vw); max-width: 680px; left: -14vw; top: -6%; background: radial-gradient(closest-side, var(--accent-soft), transparent); }
.s-hero__glow--b { width: max(280px, 40vw); max-width: 600px; right: -12vw; top: 4%; background: radial-gradient(closest-side, var(--t-sky-bg), transparent); }
.s-hero__glow--c { width: max(360px, 56vw); max-width: 820px; left: 22%; top: 38%; opacity: .7; background: radial-gradient(closest-side, var(--t-ochre-bg), transparent); }

/* ── Текст */
.s-hero__text { display: flex; flex-direction: column; align-items: center; max-width: 880px; margin-inline: auto; }

.s-hero__badge {
  height: 32px; gap: 8px; max-width: 100%;
  padding: 0 12px 0 4px; margin-bottom: 24px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: border-color .15s, color .15s;
}
.s-hero__badge:hover { color: var(--ink); border-color: var(--line-strong); }
.s-hero__badge-new {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600;
}
.s-hero__badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-hero__badge-arrow { transition: transform .15s var(--ease); }
.s-hero__badge:hover .s-hero__badge-arrow { transform: translateX(3px); }

.s-hero__title { max-width: 16ch; text-wrap: balance; word-break: normal; overflow-wrap: normal; hyphens: manual; }
.s-hero__lead { max-width: 620px; margin-top: 20px; text-wrap: pretty; }

.s-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.s-hero__facts { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; margin-top: 20px; padding: 0; list-style: none; }
.s-hero__facts li + li::before { content: "·"; margin-inline: 10px; color: var(--faint); }

/* ── Сцена */
.s-hero__visual { position: relative; max-width: 1120px; margin: clamp(40px, 6vw, 72px) auto 0; }
.s-hero__visual[data-reveal] { transition-delay: .12s; }
.s-hero__scene { will-change: transform; }
.s-hero__phone { display: none; }
/* Сцены телефона нет (секция mock-phone не собралась) — пустая рамка с тенью не рисуется. */
.s-hero__phone:not(:has(.mock)) { display: none; }

@media (min-width: 1024px) {
  .s-hero__phone {
    display: block; position: absolute; z-index: 1;
    right: -16px; bottom: -56px; width: 220px;
    /* Корпус рисует сама сцена mock-phone (рамка 8 px, радиус 44 px при ширине 300).
       Обёртка даёт только место и тень ПО ФОРМЕ корпуса: 44 × 220/300 ≈ 32 px. */
    border-radius: 32px; box-shadow: var(--shadow-3);
    will-change: transform;
  }
}
@media (min-width: 1280px) {
  .s-hero__phone { right: -40px; }
}

/* ── Телефон: заголовок не рвёт слов, кнопки в столбик во всю ширину */
@media (max-width: 560px) {
  .s-hero__title { font-size: clamp(34px, 10vw, 40px); max-width: none; }
  .s-hero__actions { flex-direction: column; align-self: stretch; }
  .s-hero__actions .btn { width: 100%; }
  .s-hero__facts { flex-direction: column; }
  .s-hero__facts li + li::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-hero__scene, .s-hero__phone { transform: none !important; will-change: auto; }
}


/* ── mock-base ── */
/* ═══ Сцена «База»: таблица поставщиков. Источник — prototype/index.html #s-base
   (.viewbar/.vtab, .filters/.fchip, .tablewrap.recgrid). Каркас .ui, тона data-tone
   (--c/--c-bg) и общий вид svg — mock-shell. ═══ */
.m-base .m-base__emo { width: 16px; flex: none; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; }

.m-base .m-base__body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.m-base .m-base__h1emo { margin-right: var(--sp-4); font-size: .92em; }
.m-base .m-base__acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.m-base .m-base__search {
  display: inline-flex; align-items: center; gap: var(--sp-3); width: 210px; height: 32px; padding: 0 var(--sp-3) 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--faint); font-size: 13px;
}
.m-base .m-base__search svg { stroke-width: 1.8; }
.m-base .m-base__search span { flex: 1; }
.m-base .m-base__search kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px;
  border: 1px solid var(--line-strong); font: 500 10.5px/1 var(--mono); color: var(--muted); background: var(--surface-2);
}
.m-base .m-base__new {
  display: inline-flex; align-items: center; gap: var(--sp-3); height: 32px; padding: 0 var(--sp-5);
  border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600;
}
.m-base .m-base__new svg, .m-base .m-base__tab.is-ghost svg, .m-base .m-base__add svg { stroke-width: 2.2; }

/* Полоса видов: вкладка выбранного вида — лист с тенью, остальные приглушены */
.m-base .m-base__views { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.m-base .m-base__tabs, .m-base .m-base__vright { display: flex; align-items: center; gap: var(--sp-1); }
.m-base .m-base__vright { margin-left: auto; gap: var(--sp-2); }
.m-base .m-base__tab { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 11px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }
.m-base .m-base__tab.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.m-base .m-base__tab.is-ghost { color: var(--faint); }
.m-base .m-base__ibtn { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--muted); }
.m-base .m-base__ibtn.is-on { color: var(--accent); background: var(--accent-soft); }
.m-base .m-base__ibtn b {
  position: absolute; top: 1px; right: 0; min-width: 13px; height: 13px; padding: 0 3px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font: 700 9px/13px var(--sans); text-align: center; font-variant-numeric: tabular-nums;
}

/* Чипы отбора */
.m-base .m-base__filters { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.m-base .m-base__fchip {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 11px; border-radius: var(--r-pill);
  font-size: 13px; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface);
}
.m-base .m-base__fchip svg { color: var(--faint); margin-right: -3px; stroke-width: 2; }
.m-base .m-base__fchip.is-on { background: var(--surface-2); border-color: var(--edge); color: var(--ink); font-weight: 600; }
.m-base .m-base__fchip.is-on svg { color: var(--muted); }
.m-base .m-base__fchip.is-reset { border-color: transparent; background: transparent; color: var(--accent); }
.m-base .m-base__fdiv { width: 1px; height: 18px; background: var(--line); margin: 0 var(--sp-2); }

/* Сетка записей: линии только между строками, шапка на --surface-2 — как .recgrid */
.m-base .m-base__grid { margin-top: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.m-base table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.m-base th, .m-base td {
  text-align: left; padding: 0 10px; height: 42px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-base th { height: 32px; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 12px; }
.m-base .is-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.m-base th.is-num { font-family: var(--sans); }
.m-base .is-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.m-base tbody tr.is-hover td { background: var(--surface-2); }

/* Ячейка названия: флекс внутри td (сама ячейка остаётся ячейкой) — кнопка «Открыть»
   на наведённой строке теснит название, а не ложится поверх него */
.m-base .m-base__cell { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; color: var(--ink); font-weight: 500; }
.m-base .m-base__nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-base .m-base__thumb {
  flex: none; width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, var(--surface)), var(--c-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.m-base .m-base__open {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); height: 22px; padding: 0 var(--sp-3);
  border-radius: 5px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.m-base .m-base__open svg { stroke-width: 2; }

/* Выбор — палитра значений --t-* */
.m-base .m-base__pill { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); font-size: 12px; font-weight: 500; background: var(--c-bg); color: var(--c); }
.m-base .m-base__star { color: var(--t-ochre); font-family: var(--sans); }

.m-base .m-base__proj {
  display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 26px); vertical-align: middle;
  padding: 1px var(--sp-4) 1px 6px; border-radius: var(--r-pill); font-size: 11.5px; line-height: 1.6;
  color: var(--ink-2); background: var(--surface-2); overflow: hidden; text-overflow: ellipsis;
}
.m-base .m-base__proj i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--c); }
.m-base tr.is-hover .m-base__proj { background: var(--surface); }
.m-base .m-base__more { margin-left: var(--sp-2); font: 500 11px/1 var(--mono); color: var(--faint); vertical-align: middle; }

.m-base .m-base__foot { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 var(--sp-5); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.m-base .m-base__add { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--faint); }


/* ── mock-board ── */
/* ═══ Сцена «Доска проекта» (§10 docs/48: scrolly, глава 2, #projects).
   Источник — prototype/index.html #s-project: шапка проекта, вкладки, доска
   БЕЗ подложек колонок (.col прозрачна, у колонки только заголовок с линией),
   карточки .kcard. Каркас .ui/.ui-rail — секция mock-shell; здесь только
   содержимое экрана. ═══ */
.m-board .mock__canvas { width: 1200px; height: 760px; }
.m-board .ui { height: 100%; }
.m-board .ui-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 0; background: var(--bg); }

.m-board .m-board__ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Шапка проекта */
.m-board .m-board__head { padding: 22px 32px 0; }
.m-board .m-board__top { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.m-board .m-board__code { font: 600 11.5px/1 var(--mono); letter-spacing: .05em; color: var(--t-sky); background: var(--t-sky-bg); padding: 6px 7px; border-radius: var(--r-sm); }
.m-board .m-board__name { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.m-board .m-board__stage { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--g-blue-bg); color: var(--g-blue); font-size: 12.5px; font-weight: 600; }
.m-board .m-board__stage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.m-board .m-board__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.m-board .m-board__faces { display: flex; }
.m-board .m-board__faces .m-board__who { width: 28px; height: 28px; font-size: 11.5px; margin-left: -7px; box-shadow: 0 0 0 2px var(--bg); }
.m-board .m-board__faces .m-board__who:first-child { margin-left: 0; }
.m-board .m-board__ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; color: var(--ink-2); }

.m-board .m-board__who { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; line-height: 1; color: var(--c); background: linear-gradient(var(--cb), var(--cb)), var(--surface); }

.m-board .m-board__tabs { display: flex; gap: 2px; margin-top: 16px; padding: 8px 8px 0; border-top: 1px solid var(--line); }
.m-board .m-board__tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 10px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.m-board .m-board__tab.is-on { color: var(--ink); font-weight: 600; }
.m-board .m-board__tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.m-board .m-board__n { font-size: 11.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface-sunk); border-radius: var(--r-pill); padding: 1px 6px; min-width: 18px; text-align: center; }
.m-board .m-board__tab.is-on .m-board__n { background: var(--accent-soft); color: var(--accent); }

/* ── Строка вида: раскладка слева, «Сводка» и «+ Задача» справа */
.m-board .m-board__bar { display: flex; align-items: center; gap: 10px; padding: 14px 32px 0; }
.m-board .m-board__seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-sunk); }
.m-board .m-board__seg > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.m-board .m-board__seg > span.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.m-board .m-board__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.m-board .m-board__vbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.m-board .m-board__add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--accent); color: var(--accent-ink); }

/* ── Доска: колонки без подложек, у колонки заголовок + число + «+» */
.m-board .m-board__board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; padding: 20px 32px 0; }
.m-board .m-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-board .m-board__colhead { display: flex; align-items: center; gap: 8px; padding: 0 2px 7px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.m-board .m-board__colname { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.m-board .m-board__colname::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.m-board .m-board__coln { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.m-board .m-board__colplus { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--faint); }

.m-board .m-board__card { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.m-board .m-board__row { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.m-board .m-board__ttl { font-size: 14px; line-height: 1.35; color: var(--ink); min-width: 0; }
.m-board .m-board__tick { position: relative; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 0.5px; flex: none; border-radius: 50%; border: 1.5px solid var(--edge); }
.m-board .m-board__tick.is-p1 { border-color: var(--accent); background: var(--accent-soft); }
.m-board .m-board__tick.is-p2 { border-color: var(--g-amber); background: var(--g-amber-bg); }
.m-board .m-board__tick.is-done { border-color: var(--faint); background: var(--faint); color: var(--surface); }
.m-board .m-board__tick.is-done .m-board__ico { width: 12px; height: 12px; stroke-width: 2.6; }
.m-board .m-board__card.is-done .m-board__ttl { color: var(--faint); text-decoration: line-through; }

.m-board .m-board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 26px; font-size: 12.5px; color: var(--muted); }
.m-board .m-board__meta .m-board__ico { width: 13px; height: 13px; }
.m-board .m-board__due, .m-board .m-board__sub { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-board .m-board__due.is-today { color: var(--g-green); }
.m-board .m-board__due.is-late { color: var(--accent); }
.m-board .m-board__sub.is-full { color: var(--g-green); }
.m-board .m-board__mono { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); }
.m-board .m-board__tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; color: var(--c); background: var(--cb); white-space: nowrap; }
.m-board .m-board__meta .m-board__who { margin-left: auto; }

.m-board .m-board__more { display: inline-flex; align-items: center; gap: 6px; padding: 7px 4px; font-size: 13px; color: var(--faint); }

/* ── Перенос: карточка поднята над своим местом, место — пунктиром */
.m-board .m-board__slot { position: relative; border-radius: var(--r-md); outline: 1.5px dashed var(--line-strong); outline-offset: -1px; background: var(--surface-2); }
.m-board .m-board__card.is-drag { z-index: 2; transform: translate(22px, -8px) rotate(2deg); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.m-board .m-board__hand { position: absolute; right: 34px; bottom: -18px; width: 30px; height: 30px; transform: rotate(-2deg); overflow: visible; }
.m-board .m-board__hand path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-board .m-board__hand-halo path { stroke: var(--surface); stroke-width: 5; }
.m-board .m-board__hand-ink path { stroke: var(--ink); stroke-width: 1.8; }


/* ── mock-canvas ── */
/* Сцена «Холст»: дерево карточек на точечной сетке (источник — prototype #s-canvas, .cvn / .cvn-h / .cvtools).
   Координаты узлов — в разметке переменными --x/--y/--w/--h; цвета только токенами. */
.m-canvas .mock__canvas { width: 1200px; height: 760px; }
.m-canvas {
  --m-cv-sel: var(--t-sky);
  --m-cv-edge: color-mix(in srgb, var(--line-strong), var(--edge) 40%);
}
@supports (color: rgb(from red r g b / .5)) {
  .m-canvas { --m-cv-sel: rgb(from var(--sel-soft) r g b / .6); }
}

.m-canvas .ui { height: 100%; }
.m-canvas .ui-main { position: relative; padding: 0; overflow: hidden; }

/* ── Шапка документа */
.m-canvas .m-canvas__head {
  position: absolute; left: 0; right: 0; top: 0; height: 56px; margin: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.m-canvas .m-canvas__docicon { color: var(--muted); display: grid; place-items: center; }
.m-canvas .m-canvas__title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.m-canvas .m-canvas__seg {
  display: inline-flex; gap: 2px; margin-left: 10px; padding: 2px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.m-canvas .m-canvas__seg > span { padding: 3px 11px; border-radius: 6px; }
.m-canvas .m-canvas__seg > .is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.m-canvas .m-canvas__tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.m-canvas .m-canvas__sync { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--g-green); }
.m-canvas .m-canvas__faces { display: flex; }
.m-canvas .m-canvas__faces .m-canvas__av + .m-canvas__av { margin-left: -6px; }
.m-canvas .m-canvas__av {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--sans); font-style: normal; color: var(--surface);
  box-shadow: 0 0 0 2px var(--bg);
}
.m-canvas .m-canvas__av--me { background: var(--t-teal); }
.m-canvas .m-canvas__av--peer { background: var(--t-plum); }
.m-canvas .m-canvas__av--sm { width: 18px; height: 18px; font-size: 9px; box-shadow: none; margin-left: auto; }
.m-canvas .m-canvas__share {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink);
}

/* ── Поле холста с точечной сеткой */
.m-canvas .m-canvas__field {
  position: absolute; left: 0; right: 0; top: 56px; bottom: 0; overflow: hidden;
  background-color: var(--surface-sunk);
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.m-canvas .m-canvas__edges { position: absolute; left: 0; top: 0; max-width: none; }
.m-canvas .m-canvas__edges path { fill: none; stroke: var(--m-cv-edge); stroke-width: 2; stroke-linecap: round; }
.m-canvas .m-canvas__edges path.is-live { stroke: var(--t-plum); stroke-dasharray: 5 5; opacity: .7; }

/* ── Узлы */
.m-canvas .m-canvas__node {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow-1); font-size: 14px; line-height: 1.35; color: var(--ink); white-space: nowrap;
}
.m-canvas .m-canvas__node--root {
  justify-content: center; font-size: 16px; font-weight: 650; letter-spacing: -0.01em;
  border-color: var(--t-sky); background: linear-gradient(var(--t-sky-bg), var(--t-sky-bg)), var(--surface);
}
.m-canvas .m-canvas__node--branch { font-weight: 600; }
.m-canvas .m-canvas__node--task,
.m-canvas .m-canvas__node--page { align-items: flex-start; padding-top: 12px; }
.m-canvas .m-canvas__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.m-canvas .m-canvas__t { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.m-canvas .m-canvas__sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.m-canvas .m-canvas__meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.m-canvas .m-canvas__due,
.m-canvas .m-canvas__flag { display: inline-flex; align-items: center; gap: 4px; }
.m-canvas .m-canvas__due { color: var(--g-amber); }
.m-canvas .m-canvas__flag { color: var(--accent); font-weight: 600; }
.m-canvas .m-canvas__tick {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--accent); background: var(--accent-soft);
}
.m-canvas .m-canvas__ico { flex: none; color: var(--muted); margin-top: 1px; }

/* Выделенный узел: кольцо и четыре зацепки снаружи рамки */
.m-canvas .m-canvas__node.is-sel { box-shadow: 0 0 0 2px var(--m-cv-sel), var(--shadow-2); }
.m-canvas .m-canvas__hand {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--m-cv-sel);
}
.m-canvas .m-canvas__hand--t { left: calc(50% - 5px); top: -18px; }
.m-canvas .m-canvas__hand--b { left: calc(50% - 5px); bottom: -18px; }
.m-canvas .m-canvas__hand--l { top: calc(50% - 5px); left: -18px; }
.m-canvas .m-canvas__hand--r { top: calc(50% - 5px); right: -18px; }

/* Фото: мягкий градиент вместо картинки */
.m-canvas .m-canvas__node--photo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: var(--surface); }
.m-canvas .m-canvas__img {
  flex: 1; background:
    radial-gradient(circle at 74% 34%, var(--t-ochre-bg) 0 13px, transparent 14px),
    radial-gradient(120% 70% at 28% 118%, var(--t-sage-bg) 0 58%, transparent 59%),
    radial-gradient(90% 60% at 90% 120%, var(--t-sage-bg) 0 50%, transparent 51%),
    linear-gradient(160deg, var(--t-sky-bg), var(--t-sage-bg)), var(--surface-2);
}
.m-canvas .m-canvas__cap {
  flex: none; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-top: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--muted);
}

/* Узел, который тащит соседка */
.m-canvas .m-canvas__ghost {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1.5px dashed var(--line-strong); border-radius: 10px;
}
.m-canvas .m-canvas__node.is-drag { z-index: 3; border-color: var(--t-plum); box-shadow: var(--shadow-3); transform: rotate(1.5deg); }
.m-canvas .m-canvas__peer { position: absolute; left: var(--x); top: var(--y); z-index: 4; }
.m-canvas .m-canvas__peer svg path { fill: var(--t-plum); stroke: var(--surface); stroke-width: 1.4; stroke-linejoin: round; }
.m-canvas .m-canvas__peername {
  position: absolute; left: 14px; top: 20px; padding: 2px 8px; border-radius: 6px;
  background: var(--t-plum); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* ── Панель инструментов снизу по центру */
.m-canvas .m-canvas__toolbar {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.m-canvas .m-canvas__tool { width: 42px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.m-canvas .m-canvas__tool.is-on { background: var(--accent-soft); color: var(--accent); }
.m-canvas .m-canvas__sep { width: 1px; height: 22px; margin: 0 6px; background: var(--line); }
.m-canvas .m-canvas__zoom { padding: 0 10px 0 4px; font: 500 12px/1 var(--mono); color: var(--muted); }

/* ── Мини-карта */
.m-canvas .m-canvas__map {
  position: absolute; right: 18px; bottom: 20px; width: 176px; height: 104px; z-index: 5;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden;
}
.m-canvas .m-canvas__map i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 2px; background: var(--line-strong); }
.m-canvas .m-canvas__map i.is-root { background: var(--t-sky); opacity: .55; }
.m-canvas .m-canvas__map i.is-sel { background: var(--m-cv-sel); }
.m-canvas .m-canvas__view { position: absolute; left: 3px; top: 2px; width: 128px; height: 96px; border-radius: 4px; border: 1.5px solid var(--m-cv-sel); background: var(--sel-soft); }


/* ── mock-doc ── */
/* Сцена «Документ»: страница Clusker с соседом в комнате (§14.335, §14.421).
   Источник — prototype/index.html #s-docs (.blk, .handle, .check, .docmention, .dtag)
   и web/src/shared/tokens.css (.presence, .peer-caret, .peer-mark).
   Каркас .ui/.ui-rail/.ui-side/.ui-task — секция mock-shell; здесь только своё. */

.m-doc .ui-main { position: relative; }

/* ── Шапка (раскладку ряда даёт .ui-top): крошки, лица соседей, «Поделиться» */
.m-doc .m-doc__crumbs { display: flex; align-items: center; gap: var(--sp-3); font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.m-doc .m-doc__crumb-sep { color: var(--faint); }
.m-doc .m-doc__crumb-here { color: var(--ink); font-weight: 500; }
.m-doc .m-doc__acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-5); }
.m-doc .m-doc__faces { display: flex; align-items: center; }
.m-doc .m-doc__face {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 650; color: var(--ink-2); background: var(--surface-2);
  border: 2px solid var(--tone); box-shadow: 0 0 0 2px var(--bg);
}
.m-doc .m-doc__face + .m-doc__face { margin-left: calc(var(--sp-3) * -1); }
.m-doc .m-doc__share {
  display: inline-flex; align-items: center; gap: var(--sp-3); height: 30px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface);
}
.m-doc .m-doc__share svg { color: var(--muted); }

/* ── Дерево страниц: вложенные строки */
.m-doc .ui-side__item.m-doc__nest { padding-left: 30px; }

/* ── Колонка страницы: гуттер слева под ручку блока */
.m-doc .m-doc__page { width: 640px; margin-left: 96px; padding-top: 28px; }
.m-doc .m-doc__title { margin: 0 0 var(--sp-4); font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }

.m-doc .m-doc__tags { display: flex; gap: var(--sp-3); margin: 0 0 22px -4px; }
.m-doc .m-doc__tag {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
}
.m-doc .m-doc__tag b { color: var(--tone); font-weight: 700; font-size: 13px; line-height: 1; }

.m-doc .m-doc__blk { position: relative; font-size: 16px; line-height: 1.62; color: var(--ink); }
.m-doc .m-doc__blk + .m-doc__blk { margin-top: 10px; }
.m-doc .m-doc__blk + .m-doc__blk--h2 { margin-top: 22px; }
.m-doc .m-doc__blk p { margin: 0; }
.m-doc .m-doc__blk h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }

/* ── Каретка соседа: полоска его тоном, флажок с именем НАД строкой, подсветка напечатанного */
.m-doc .m-doc__peer-mark { background: var(--t-teal-bg); border-radius: 2px; }
.m-doc .m-doc__k { display: inline-block; vertical-align: top; overflow: hidden; max-width: 1em; }
.m-doc .m-doc__peer-caret { position: relative; display: inline-block; width: 0; height: 0; vertical-align: text-bottom; }
.m-doc .m-doc__peer-caret::before {
  content: ""; position: absolute; left: -1px; top: -1.1em; bottom: -0.2em;
  border-left: 2px solid var(--t-teal);
}
.m-doc .m-doc__peer-name {
  position: absolute; left: -1px; top: -2.45em; white-space: nowrap;
  padding: 1px var(--sp-3); border-radius: var(--r-sm) var(--r-sm) var(--r-sm) 0;
  background: var(--t-teal); color: var(--bg); font-size: 11px; line-height: 1.5; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .m-doc .m-doc__peer-name { color: var(--ink); }
}

/* Печатает три буквы и мигает — петлёй. Буквы по умолчанию видны: без анимации слово целое. */
.m-doc .m-doc__k { animation: 4.8s step-end infinite; }
.m-doc .m-doc__k--1 { animation-name: m-doc-k1; }
.m-doc .m-doc__k--2 { animation-name: m-doc-k2; }
.m-doc .m-doc__k--3 { animation-name: m-doc-k3; }
.m-doc .m-doc__peer-caret::before { animation: m-doc-blink 1.06s step-end infinite; }
@keyframes m-doc-k1 { 0% { max-width: 0; } 24% { max-width: 1em; } 90% { max-width: 0; } }
@keyframes m-doc-k2 { 0% { max-width: 0; } 34% { max-width: 1em; } 90% { max-width: 0; } }
@keyframes m-doc-k3 { 0% { max-width: 0; } 46% { max-width: 1em; } 90% { max-width: 0; } }
@keyframes m-doc-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .m-doc .m-doc__k, .m-doc .m-doc__peer-caret::before { animation: none; }
}

/* ── Ручка блока — как при наведении: «+» и «⋮⋮» в гуттере */
.m-doc .m-doc__handle { position: absolute; left: -64px; top: -1px; display: flex; align-items: center; gap: var(--sp-1); color: var(--faint); }
.m-doc .m-doc__handle-btn { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; }
.m-doc .m-doc__handle-btn + .m-doc__handle-btn { background: var(--surface-2); color: var(--ink-2); }

/* ── Чек-лист */
.m-doc .m-doc__check { display: flex; align-items: flex-start; gap: 10px; padding: 1px 0; }
.m-doc .m-doc__cbox {
  flex: none; width: 17px; height: 17px; margin-top: 4.5px; border-radius: 5px;
  border: 1.5px solid var(--edge); display: grid; place-items: center; color: var(--accent-ink);
}
.m-doc .m-doc__check.is-done .m-doc__cbox { background: var(--accent); border-color: var(--accent); }
.m-doc .m-doc__check.is-done .m-doc__ctext { color: var(--faint); text-decoration: line-through; }

/* ── Цитата */
.m-doc .m-doc__quote { margin: 0; padding: 2px 0 2px var(--sp-6); border-left: 3px solid var(--line-strong); color: var(--ink-2); }

/* ── Упоминание страницы: чип-имя с приспущенной чертой, а не ссылка */
.m-doc .m-doc__mention {
  padding: 1px 6px 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--line-strong); white-space: nowrap;
}
.m-doc .m-doc__mention svg { display: inline-block; vertical-align: -2px; margin-right: var(--sp-2); color: var(--muted); }

/* ── Живая задача внутри страницы */
.m-doc .m-doc__livetask { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 0 var(--sp-5); box-shadow: var(--shadow-1); }
.m-doc .m-doc__livetask .ui-task { border-bottom: 0; }

/* ── Страница — это файл */
.m-doc .m-doc__file {
  position: absolute; right: 24px; bottom: 18px; display: flex; align-items: center; gap: var(--sp-3);
  font: 500 11.5px/1 var(--mono); color: var(--faint);
}
.m-doc .m-doc__file-sync {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); padding-left: var(--sp-5);
  border-left: 1px solid var(--line); font-family: var(--sans); color: var(--g-green);
}


/* ── mock-finance ── */
/* ═══ mock-finance — сцена «Финансы» (docs/48-landing-site.md §5, §10 #finance).
   Источник: web/src/screens/Finance.tsx (вкладки Сводка/Платежи/Счета/Бюджеты,
   .fin-row, .fin-budget, .fin-prog), FinanceAcross.tsx (плитки, «≈» пересчёт),
   FinanceMoves.tsx (перевод не покрашен). Плана, отчётов и повторов нет (§2). ═══ */

.m-finance .mock__canvas { width: 1200px; height: 760px; }
.m-finance .mf-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── панель */
.m-finance .mf-team-mark { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; }
.m-finance .mf-caret { width: 14px; height: 14px; margin-left: auto; color: var(--faint); }
.m-finance .mf-caret--shut { transform: rotate(-90deg); }
.m-finance .mf-sub { padding-left: 38px; }

/* ── шапка: вкладки сегментом, как .seg в продукте */
.m-finance .mf-seg {
  display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); margin-left: var(--sp-4);
  border-radius: var(--r-sm); background: var(--surface-sunk);
}
.m-finance .mf-seg > span { padding: var(--sp-2) 10px; border-radius: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-seg > .is-on { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-1); }
.m-finance .mf-btn-main { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ── плитки итогов */
.m-finance .mf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-top: 20px; }
.m-finance .mf-tile {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: 14px var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.m-finance .mf-tile__label { font-size: 12.5px; color: var(--muted); }
.m-finance .mf-tile__value { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.m-finance .mf-tile__value.is-in { color: var(--g-green); }
.m-finance .mf-tile__hint { font-size: 12px; color: var(--faint); }

/* ── лента и колонка справа */
.m-finance .mf-body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--sp-7); margin-top: 22px; min-height: 0; }
.m-finance .mf-h {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: var(--sp-4);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.m-finance .mf-h .ui-count { margin-left: 0; padding-left: 0; }

.m-finance .mf-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) 118px 80px; align-items: center; gap: var(--sp-5);
  min-height: 44px; padding: var(--sp-3) var(--sp-2); border-top: 1px solid var(--line);
}
.m-finance .mf-row--head { min-height: 28px; padding-block: 0; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.m-finance .mf-r { text-align: right; }
.m-finance .mf-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-finance .mf-what > b { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-finance .mf-proj { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-proj .ui-dot { width: 7px; height: 7px; }
.m-finance .mf-meta { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-sep { color: var(--faint); }
.m-finance .mf-amt { display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.m-finance .mf-amt.is-in { color: var(--g-green); }
.m-finance .mf-amt > small { font-size: 11px; font-weight: 400; color: var(--faint); }
.m-finance .mf-st { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-st > svg { width: 12px; height: 12px; }
.m-finance .mf-st.is-in { color: var(--g-green); }

.m-finance .mf-aside { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.m-finance .mf-card { padding: 14px var(--sp-6) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

/* ── бюджет: полоса освоения всегда с числом (Finance.tsx Progress) */
.m-finance .mf-bud { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.m-finance .mf-bud__top { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; }
.m-finance .mf-bud__top > b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-finance .mf-bud__top > .mf-num { font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-finance .mf-bud__bar { height: 6px; margin: 7px 0 5px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.m-finance .mf-bud__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); }
.m-finance .mf-bud__meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.m-finance .mf-bud.is-near .mf-bud__bar > i { background: var(--g-amber); }
.m-finance .mf-bud.is-near .mf-bud__meta > span:last-child { color: var(--g-amber); font-weight: 600; }

/* ── перевод: без цвета направления (FinanceMoves.tsx) */
.m-finance .mf-move { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.m-finance .mf-move__top { display: flex; align-items: center; justify-content: space-between; }
.m-finance .mf-move__way { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--ink); white-space: nowrap; }
.m-finance .mf-move__way > svg { width: 14px; height: 14px; color: var(--faint); }
.m-finance .mf-move__sum { display: flex; align-items: center; gap: var(--sp-3); font-size: 13.5px; font-weight: 500; color: var(--ink); }
.m-finance .mf-move__arrow { color: var(--faint); font-family: var(--sans); }
.m-finance .mf-move__rate { font-size: 11.5px; color: var(--faint); }


/* ── mock-graph ── */
/* Сцена «Связи»: третий вид указателя документов (§14.616).
   Источник — web/src/screens/DocGraph.tsx и docgraph.css. В продукте холст рисует canvas 2d;
   здесь — статичный inline SVG с теми же родами рёбер и теми же токенами.
   Каркас .ui/.ui-rail/.ui-top — секция mock-shell; здесь только своё. */

/* ── Шапка (раскладку ряда даёт .ui-top): переключатель видов */
.m-graph .m-graph__seg {
  margin-left: auto; display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-md);
}
.m-graph .m-graph__view {
  display: inline-flex; align-items: center; gap: var(--sp-3); height: 28px; padding: 0 11px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.m-graph .m-graph__view.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ── Холст */
.m-graph .m-graph__body {
  position: relative; flex: 1 1 auto; min-height: 0; margin-top: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); overflow: hidden;
}
.m-graph .m-graph__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

.m-graph .m-graph__e line { stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.m-graph .m-graph__e--tag line { stroke-dasharray: 5 5; stroke-width: 1.4; }
.m-graph .m-graph__e--link line { stroke: var(--accent); stroke-width: 1.8; stroke-opacity: .7; }
.m-graph .m-graph__e--task line { stroke-width: 1; }
.m-graph .m-graph__off { opacity: .32; }
.m-graph .m-graph__task { fill: var(--faint); }

.m-graph .m-graph__page { fill: var(--ink-2); }
.m-graph .m-graph__hub { fill: var(--c); stroke: var(--bg); stroke-width: 3; }
.m-graph .m-graph__tagn { fill: var(--c); }
.m-graph .m-graph__ring { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.m-graph .m-graph__alone { fill: var(--faint); }
.m-graph .m-graph__divider { stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 3 5; }

.m-graph .m-graph__lbl {
  font-family: var(--sans); font-size: 13px; fill: var(--muted);
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
}
.m-graph .m-graph__lbl--hub { font-size: 14px; font-weight: 650; fill: var(--ink); }
.m-graph .m-graph__lbl--on { fill: var(--ink); font-weight: 500; }
.m-graph .m-graph__kicker { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; fill: var(--faint); }
.m-graph .m-graph__count { font-family: var(--sans); font-size: 15px; font-weight: 650; fill: var(--ink-2); }

/* ── Подвал: числа и роды связей с переключателями */
.m-graph .m-graph__foot { position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: 14px; display: flex; align-items: center; gap: var(--sp-4); }
.m-graph .m-graph__pill,
.m-graph .m-graph__kind {
  display: inline-flex; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-1);
}
.m-graph .m-graph__pill { gap: var(--sp-4); padding: 5px 13px; font-size: 12.5px; color: var(--ink-2); }
.m-graph .m-graph__pill b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-graph .m-graph__sep { width: 1px; height: 13px; background: var(--line-strong); }

.m-graph .m-graph__legend { margin-left: auto; display: flex; gap: var(--sp-3); }
.m-graph .m-graph__kind { gap: 7px; padding: 4px 11px 4px 6px; font-size: 12px; color: var(--ink-2); }
.m-graph .m-graph__kind svg { flex: none; }
.m-graph .m-graph__kind.is-off { color: var(--faint); box-shadow: none; }
.m-graph .m-graph__switch { position: relative; flex: none; width: 24px; height: 14px; border-radius: var(--r-pill); background: var(--ink); }
.m-graph .m-graph__switch::after {
  content: ""; position: absolute; top: 2px; left: 12px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg);
}
.m-graph .m-graph__kind.is-off .m-graph__switch { background: var(--line-strong); }
.m-graph .m-graph__kind.is-off .m-graph__switch::after { left: 2px; }

.m-graph .m-graph__sw { stroke: var(--edge); stroke-width: 2; stroke-linecap: round; }
.m-graph .m-graph__sw--tag { stroke-dasharray: 3 3; stroke-linecap: butt; }
.m-graph .m-graph__sw--link { stroke: var(--accent); }
.m-graph .m-graph__sw--task { stroke-width: 1.2; stroke: var(--faint); }


/* ── mock-insights ── */
/* ═══ Сцена «Сводка проекта» (§10 docs/48: scrolly, глава 4, #insights).
   Источник — prototype/index.html #insPanel (§14.317): панель справа НЕ накрывает
   работу, а отнимает у неё полосу; карточки рамкой, а не подложкой; одно крупное
   число на карточку. Каркас .ui/.ui-rail — секция mock-shell. ═══ */
.m-insights .mock__canvas { width: 1200px; height: 760px; }
.m-insights .ui { height: 100%; }
.m-insights .ui-main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-width: 0; min-height: 0; overflow: hidden; padding: 0; background: var(--bg); }

.m-insights .m-insights__ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-insights .m-insights__who { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--c); background: linear-gradient(var(--cb), var(--cb)), var(--surface); }

/* ── Слева: проект и его список, приглушённый */
.m-insights .m-insights__work { min-width: 0; min-height: 0; overflow: hidden; padding: 22px 28px 0 32px; }
.m-insights .m-insights__top { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.m-insights .m-insights__code { font: 600 11.5px/1 var(--mono); letter-spacing: .05em; color: var(--t-sage); background: var(--t-sage-bg); padding: 6px 7px; border-radius: var(--r-sm); }
.m-insights .m-insights__name { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.m-insights .m-insights__faces { margin-left: auto; display: flex; }
.m-insights .m-insights__faces .m-insights__who { width: 28px; height: 28px; font-size: 11.5px; margin-left: -7px; box-shadow: 0 0 0 2px var(--bg); }
.m-insights .m-insights__faces .m-insights__who:first-child { margin-left: 0; }

.m-insights .m-insights__tabs { display: flex; gap: 2px; margin-top: 16px; padding: 8px 8px 0; border-top: 1px solid var(--line); }
.m-insights .m-insights__tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 10px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.m-insights .m-insights__tab.is-on { color: var(--ink); font-weight: 600; }
.m-insights .m-insights__tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.m-insights .m-insights__n { font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; border-radius: var(--r-pill); padding: 1px 6px; min-width: 18px; text-align: center; background: var(--accent-soft); color: var(--accent); }

.m-insights .m-insights__bar { display: flex; justify-content: flex-end; padding-top: 14px; }
.m-insights .m-insights__vbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.m-insights .m-insights__vbtn.is-on { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.m-insights .m-insights__list { margin-top: 10px; opacity: .45; }
.m-insights .m-insights__group { display: flex; align-items: baseline; gap: 8px; padding: 14px 0 6px; font-size: 13.5px; font-weight: 650; color: var(--ink); border-bottom: 1px solid var(--line); }
.m-insights .m-insights__gn { font-size: 12px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.m-insights .m-insights__task { display: flex; align-items: center; gap: 10px; height: 42px; border-bottom: 1px solid var(--line); }
.m-insights .m-insights__tick { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--edge); }
.m-insights .m-insights__tick.is-p1 { border-color: var(--accent); background: var(--accent-soft); }
.m-insights .m-insights__tick.is-p2 { border-color: var(--g-amber); background: var(--g-amber-bg); }
.m-insights .m-insights__tt { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-insights .m-insights__due { min-width: 64px; text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-insights .m-insights__due.is-late { color: var(--accent); }

/* ── Справа: панель сводки */
.m-insights .m-insights__panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2); }
.m-insights .m-insights__phead { display: flex; align-items: baseline; gap: 8px; flex: none; padding: 13px 18px 12px; border-bottom: 1px solid var(--line); }
.m-insights .m-insights__ptitle { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.m-insights .m-insights__when { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.m-insights .m-insights__x { margin-left: auto; align-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--faint); }
.m-insights .m-insights__pbody { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }

/* Карточка — рамкой, а не подложкой: панель и так лежит на своём листе */
.m-insights .m-insights__card { min-width: 0; padding: 11px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.m-insights .m-insights__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.m-insights .m-insights__hn { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.m-insights .m-insights__h--people { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; }
.m-insights .m-insights__h--people .m-insights__hn { margin-left: 0; text-align: right; }

.m-insights .m-insights__metric { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.m-insights .m-insights__big { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-insights .m-insights__big.is-warn { color: var(--accent); }
.m-insights .m-insights__sub { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.m-insights .m-insights__sub--block { display: block; margin-top: 6px; }

.m-insights .m-insights__rows > * + * { border-top: 1px solid var(--line); }
.m-insights .m-insights__row { display: flex; align-items: center; gap: 8px; min-height: 31px; }
.m-insights .m-insights__ttl { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-insights .m-insights__late, .m-insights .m-insights__date { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-insights .m-insights__late { color: var(--accent); }
.m-insights .m-insights__date { color: var(--ink-2); }

/* Ход дела и неделя — парой: у каждой одно крупное число */
.m-insights .m-insights__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-insights .m-insights__pair > .m-insights__card { display: flex; flex-direction: column; }
.m-insights .m-insights__bar-track { display: block; height: 6px; margin-top: auto; border-radius: 3px; overflow: hidden; background: var(--surface-sunk); }
.m-insights .m-insights__bar-track i { display: block; height: 100%; border-radius: 3px; background: var(--g-green); }
.m-insights .m-insights__foot { margin-top: 8px; font-size: 12px; color: var(--faint); }
.m-insights .m-insights__foot b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.m-insights .m-insights__week { display: flex; align-items: flex-end; gap: 5px; margin-top: 4px; }
.m-insights .m-insights__day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.m-insights .m-insights__day b { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.m-insights .m-insights__day > span:last-child { font-size: 10.5px; line-height: 1.2; color: var(--faint); }
.m-insights .m-insights__day.is-today b, .m-insights .m-insights__day.is-today > span:last-child { color: var(--accent); }
.m-insights .m-insights__col { position: relative; display: block; width: 100%; height: 40px; border-radius: 3px; background: var(--surface-sunk); }
.m-insights .m-insights__col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px; background: var(--g-green); }
.m-insights .m-insights__day.is-empty .m-insights__col i { background: var(--line-strong); }

/* По людям: лицо, имя, открытые и просроченные — числами в колонку */
.m-insights .m-insights__person { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 72px; align-items: center; column-gap: 8px; min-height: 31px; }
.m-insights .m-insights__h--people { column-gap: 8px; }
.m-insights .m-insights__h--people > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.m-insights .m-insights__pname { min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-insights .m-insights__num { text-align: right; font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.m-insights .m-insights__num.is-late { color: var(--accent); }
.m-insights .m-insights__num.is-zero { color: var(--faint); }


/* ── mock-mcp ── */
/* ═══ mock-mcp — сцена «Отдай агенту» (docs/48-landing-site.md §10, scrolly глава 5).
   Слева нейтральный чат ассистента (без чужого бренда), справа доска проекта Clusker,
   куда легли четыре задачи. Имена инструментов настоящие — mcp/src/tools
   (documents_list, document_read, tasks_create_bulk; status — колонка доски).
   Каркас справа — .ui из mock-shell; CSS mock-shell идёт ПОСЛЕ этого файла
   (секции по алфавиту), поэтому правки каркаса здесь — с двумя классами. ═══ */

.m-mcp > .mock__canvas { width: 1200px; height: 760px; }
.m-mcp__split { display: grid; grid-template-columns: 55% 45%; width: 100%; height: 100%; }

/* ── Чат */
.m-mcp__chat {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg); border-right: 1px solid var(--line-strong);
}
.m-mcp__chat svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-mcp__cap {
  display: flex; align-items: center; gap: var(--sp-4); flex: none; height: 44px; padding: 0 var(--sp-7);
  border-bottom: 1px solid var(--line); background: var(--rail);
  font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.m-mcp__live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--g-green); box-shadow: 0 0 0 3px var(--g-green-bg); }
.m-mcp__thread {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  flex: 1; min-height: 0; overflow: hidden; padding: var(--sp-7) var(--sp-9) 20px;
}
.m-mcp__bubble {
  align-self: flex-end; max-width: 80%; padding: var(--sp-5) var(--sp-6);
  border-radius: 18px 18px var(--r-sm) 18px; background: var(--surface-2);
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.m-mcp__reply { display: flex; flex-direction: column; gap: 10px; max-width: 94%; }
.m-mcp__who { display: flex; align-items: center; gap: var(--sp-4); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.m-mcp__mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-sunk); color: var(--ink-2); }
.m-mcp__mark svg { width: 16px; height: 16px; }
.m-mcp__text { font-size: 15px; line-height: 1.6; color: var(--ink); }

/* Свёрнутые вызовы инструментов: галочка, имя моноширинным, аргументы строкой */
.m-mcp__calls { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-1); padding: 0; list-style: none; }
.m-mcp__call {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--sp-5) 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1);
}
.m-mcp__ok { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--g-green-bg); color: var(--g-green); }
.m-mcp__ok svg { width: 13px; height: 13px; stroke-width: 2.4; }
.m-mcp__fn { flex: none; font: 600 13px/1 var(--mono); color: var(--ink); }
.m-mcp__arg { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1 var(--mono); color: var(--muted); }
.m-mcp__chat .m-mcp__chev { width: 15px; height: 15px; color: var(--faint); }
.m-mcp__done { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }

.m-mcp__input {
  display: flex; align-items: center; gap: var(--sp-5); flex: none; height: 54px;
  margin: 0 var(--sp-9) 28px; padding: 0 9px 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 14.5px; color: var(--faint);
}
.m-mcp__input > span:first-child { flex: 1; }
.m-mcp__send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.m-mcp__send svg { width: 17px; height: 17px; stroke-width: 2.2; }

/* ── Clusker: доска проекта */
.m-mcp .ui-main { padding: 22px var(--sp-7) 0; }
.m-mcp .m-mcp__head { gap: 10px; }
.m-mcp .m-mcp__head .ui-dot { width: 10px; height: 10px; }
.m-mcp__views { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.m-mcp__view { display: inline-flex; align-items: center; gap: var(--sp-3); height: 28px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }
.m-mcp__view.is-on { background: var(--surface-sunk); color: var(--ink); font-weight: 600; }
.m-mcp .m-mcp__view svg { width: 15px; height: 15px; }

.m-mcp__board { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 20px; margin-top: 18px; min-height: 0; }
.m-mcp__col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.m-mcp__colhead { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-1) 7px; margin-bottom: var(--sp-1); border-bottom: 1px solid var(--line); }
.m-mcp__colhead b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.m-mcp__n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.m-mcp .m-mcp__plus { width: 16px; height: 16px; margin-left: auto; color: var(--faint); }

.m-mcp__card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 7px; padding: var(--sp-5) 13px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1);
}
.m-mcp__row { display: flex; align-items: flex-start; gap: var(--sp-4); line-height: 1.35; }
.m-mcp .m-mcp__row .ui-tick { margin-top: 0; }
.m-mcp__title { min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.m-mcp .m-mcp__meta { padding-left: 26px; }
.m-mcp .ui-add { padding-top: var(--sp-2); }

/* «Новое»: подсветка выделения гаснет по очереди, карточка за карточкой.
   Слой под текстом (isolation + z-index:-1), чтобы не приглушать название. */
.m-mcp__card.is-new::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--sel-soft); opacity: 0; pointer-events: none;
  animation: m-mcp-new 7s var(--ease) infinite;
}
.m-mcp__card.is-new:nth-of-type(2)::after { animation-delay: .45s; }
.m-mcp__card.is-new:nth-of-type(3)::after { animation-delay: .9s; }
.m-mcp__card.is-new:nth-of-type(4)::after { animation-delay: 1.35s; }
@keyframes m-mcp-new {
  0% { opacity: 0; }
  6% { opacity: 1; }
  40% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m-mcp__card.is-new::after { animation: none; opacity: .8; }
}


/* ── mock-notifications ── */
/* ═══ Сцена «Уведомления»: лента чужих действий. Источник — prototype/index.html
   #s-notifs (.seg, .nlist/.nrow, .nface/.nbadge). Каркас .ui, тона data-tone
   (--c/--c-bg) и общий вид svg — mock-shell. ═══ */
.m-notifications .m-notifications__body { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 760px; display: flex; flex-direction: column; }
.m-notifications .m-notifications__readall {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3); height: 32px; padding: 0 var(--sp-5);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface);
}
.m-notifications .m-notifications__readall svg { stroke-width: 1.9; }

/* Два известных заранее значения — сегмент, как в продукте (§14.4) */
.m-notifications .m-notifications__seg { align-self: flex-start; display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-6); padding: 3px; border-radius: 9px; background: var(--surface-sunk); }
.m-notifications .m-notifications__seg span { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.m-notifications .m-notifications__seg span.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.m-notifications .m-notifications__seg b { font-weight: 500; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

.m-notifications .m-notifications__list { margin-top: var(--sp-4); }
.m-notifications .m-notifications__group { padding: var(--sp-5) 0 var(--sp-3) 28px; font-size: 12px; font-weight: 600; color: var(--muted); }

.m-notifications .m-notifications__row {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 10px var(--sp-5) 10px 28px; border-bottom: 1px solid var(--line);
}
/* Непрочитанное: подложка темнее и точка акцента слева */
.m-notifications .m-notifications__row.is-new { background: var(--surface-2); border-radius: var(--r-md); border-bottom: 0; margin-bottom: var(--sp-2); }
.m-notifications .m-notifications__row.is-new::before {
  content: ''; position: absolute; left: 11px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

.m-notifications .m-notifications__face { position: relative; width: 34px; height: 34px; }
.m-notifications .m-notifications__who {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--c-bg); color: var(--c);
}
/* Знак рода события лежит на аватаре: семантическая палитра --g-*, глиф цветом листа */
.m-notifications .m-notifications__badge {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bg); border: 2px solid var(--bg);
}
.m-notifications .m-notifications__badge svg { stroke-width: 2.6; }
.m-notifications .is-new .m-notifications__badge { border-color: var(--surface-2); }
.m-notifications [data-kind="assign"] .m-notifications__badge { background: var(--g-blue); }
.m-notifications [data-kind="done"] .m-notifications__badge { background: var(--g-green); }
.m-notifications [data-kind="comment"] .m-notifications__badge { background: var(--g-violet); }
.m-notifications [data-kind="access"] .m-notifications__badge { background: var(--g-grey); }
/* Событие без человека: квадратный знак системы, а не кружок-аватар */
.m-notifications .m-notifications__face.is-sys { display: grid; place-items: center; border-radius: var(--r-sm); background: var(--g-amber-bg); color: var(--g-amber); }
.m-notifications .m-notifications__face.is-sys svg { stroke-width: 1.8; }

.m-notifications .m-notifications__main { min-width: 0; }
.m-notifications .m-notifications__line { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.m-notifications .m-notifications__line b { color: var(--ink); font-weight: 600; }
.m-notifications .m-notifications__sub, .m-notifications .m-notifications__quote {
  display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-notifications .m-notifications__sub i { display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-3); border-radius: 50%; vertical-align: 1px; background: var(--c); }
.m-notifications .m-notifications__quote { padding-left: var(--sp-4); border-left: 2px solid var(--line-strong); }
.m-notifications .m-notifications__when { padding-top: 2px; font: 400 12px/1.45 var(--mono); font-variant-numeric: tabular-nums; color: var(--faint); }
.m-notifications .is-new .m-notifications__when { color: var(--muted); }


/* ── mock-phone ── */
/* ═══ mock-phone — телефон с экраном «Сегодня» (docs/48-landing-site.md §10, поверх hero).
   Мерки сняты с prototype/mobile/index.html (.shead, .glabel, .trow, .tick, .tabbar, .fab)
   и web/src/mobile/MobileFrame.tsx: вкладок ЧЕТЫРЕ — Сегодня, Предстоящее, Проекты, Обзор
   (§14.180.1), «Документов» и «Ещё» в таб-баре продукта нет.
   Экран рисуется в ширину телефона 390 px и ужимается до 284 px (внутри рамки 8 px),
   чтобы кегли и мишени остались продуктовыми: 32 заголовок, 16 задача, 22 кружок. ═══ */

.m-phone > .mock__canvas { width: 300px; height: 620px; background: transparent; }
.m-phone__body {
  position: relative; width: 300px; height: 620px; overflow: hidden;
  border: 8px solid var(--ink); border-radius: 44px; background: var(--bg);
}
.m-phone__screen {
  position: absolute; left: 0; top: 0; width: 390px; height: 830px;
  transform: scale(.7282); transform-origin: 0 0;
  background: var(--bg); color: var(--ink); font: 400 16px/1.35 var(--sans); text-align: left;
}
.m-phone svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-phone ul { margin: 0; padding: 0; list-style: none; }

/* ── Остров и строка состояния */
.m-phone__island {
  position: absolute; left: 50%; top: 12px; z-index: 30; width: 124px; height: 36px; margin-left: -62px;
  border-radius: var(--r-pill); background: var(--ink);
}
.m-phone__status {
  display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 4px 28px 0 42px;
  font-size: 16px; letter-spacing: -.01em; color: var(--ink);
}
.m-phone__status b { font-weight: 600; font-variant-numeric: tabular-nums; }
.m-phone__sys { display: flex; align-items: center; gap: 6px; }
.m-phone .m-phone__sig { width: 18px; height: 12px; fill: currentColor; stroke: none; }
.m-phone .m-phone__wifi { width: 16px; height: 12px; stroke-width: 2; }
.m-phone .m-phone__bat { width: 27px; height: 13px; fill: currentColor; stroke: none; }

/* ── Шапка экрана: кластер кнопок капсулой и крупный заголовок */
.m-phone__head { padding: 0 var(--sp-6) var(--sp-3); }
.m-phone__top { display: flex; justify-content: flex-end; padding: var(--sp-1) 0 var(--sp-3); }
.m-phone__cluster {
  display: flex; padding: 3px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.m-phone__ib { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink-2); }
.m-phone .m-phone__ib svg { width: 24px; height: 24px; stroke-width: 1.9; }
.m-phone__h1 { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }

/* ── Группы и строки задач */
.m-phone__glabel {
  display: flex; align-items: center; gap: var(--sp-4); padding: 18px var(--sp-6) var(--sp-3);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
}
.m-phone__glabel.is-over { color: var(--accent); }
.m-phone__gact { margin-left: auto; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); }

.m-phone__task { display: flex; gap: 11px; padding: var(--sp-5) var(--sp-6) 11px; border-bottom: 1px solid var(--line); }
.m-phone__tickwrap { display: flex; justify-content: center; flex: none; width: 32px; }
.m-phone__tick { display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); }
.m-phone__tick.is-p1 { border-color: var(--accent); background: var(--accent-soft); }
.m-phone__tick.is-p2 { border-color: var(--g-amber); background: var(--g-amber-bg); }
.m-phone__tbody { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.m-phone__ttitle { font-size: 16px; line-height: 1.35; color: var(--ink); }
.m-phone__tmeta {
  display: flex; align-items: center; gap: 9px; overflow: hidden; white-space: nowrap;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.m-phone__tmeta > span { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.m-phone .m-phone__tmeta svg { width: 14px; height: 14px; color: var(--faint); }
.m-phone__tmeta > .is-over { color: var(--accent); }
.m-phone__tmeta > .m-phone__label { color: var(--c, var(--muted)); }
.m-phone .m-phone__tmeta > .m-phone__label svg { color: currentColor; }
.m-phone__proj { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; margin-top: 1px; font-size: 13px; color: var(--faint); white-space: nowrap; }
.m-phone__proj > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--g-grey)); }

.m-phone [data-tone="graphite"] { --c: var(--t-graphite); }
.m-phone [data-tone="clay"]     { --c: var(--t-clay); }
.m-phone [data-tone="ochre"]    { --c: var(--t-ochre); }
.m-phone [data-tone="teal"]     { --c: var(--t-teal); }
.m-phone [data-tone="sky"]      { --c: var(--t-sky); }
.m-phone [data-tone="lavender"] { --c: var(--t-lavender); }

/* ── Таб-бар капсулой, круглая «+» над ним, полоска «домой» */
.m-phone__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 19; height: 150px; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 44%, color-mix(in srgb, var(--bg) 62%, transparent) 72%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}
.m-phone__tabbar {
  position: absolute; left: 12px; right: 12px; bottom: 30px; z-index: 25;
  display: flex; gap: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.m-phone__tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-width: 0;
  padding: 5px 0 var(--sp-2); border-radius: var(--r-pill); color: var(--ink-2);
}
.m-phone .m-phone__tab svg { width: 22px; height: 22px; }
.m-phone__tab > span { font-size: 11px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.m-phone__tab.is-on { color: var(--accent); background: var(--accent-soft); }
.m-phone__fab {
  position: absolute; right: 16px; bottom: 106px; z-index: 20; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-2);
}
.m-phone .m-phone__fab svg { width: 22px; height: 22px; stroke-width: 2; }
.m-phone__home {
  position: absolute; left: 50%; bottom: 9px; z-index: 26; width: 134px; height: 5px; margin-left: -67px;
  border-radius: var(--r-pill); background: var(--ink);
}


/* ── mock-quickadd ── */
/* Сцена «Быстрая задача»: экран «Сегодня» под подложкой и окно ввода поверх
   (источник — prototype .composer / .c-title .nl / .c-chip / .composer-foot). Только токены. */
.m-quickadd .mock__canvas { width: 1200px; height: 760px; }
.m-quickadd .ui { height: 100%; }
.m-quickadd .m-quickadd__list { display: flex; flex-direction: column; }

/* ── Подложка: чернила 20 % на светлой теме, тень корпуса на тёмной */
.m-quickadd .m-quickadd__scrim { position: absolute; inset: 0; z-index: 10; background: color-mix(in srgb, var(--ink) 20%, transparent); }
@media (prefers-color-scheme: dark) {
  .m-quickadd .m-quickadd__scrim { background: color-mix(in srgb, var(--rail) 62%, transparent); }
}

/* ── Окно */
.m-quickadd .m-quickadd__dialog {
  position: absolute; left: 50%; top: 132px; z-index: 11; width: 620px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  font-size: 14px; color: var(--ink);
}
.m-quickadd .m-quickadd__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
.m-quickadd .m-quickadd__name { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.m-quickadd .m-quickadd__anywhere { font-size: 12px; color: var(--faint); }
.m-quickadd kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 2px;
  font: 600 11px/1 var(--mono); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px;
}
.m-quickadd .m-quickadd__body { padding: 10px 20px 14px; }

/* Строка названия: разобранные куски — пилюли своего тона. Растяжка тенью, а не отступом (§14.276). */
.m-quickadd .m-quickadd__line { font-size: 18px; line-height: 1.55; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.m-quickadd .m-quickadd__nl {
  --m-qa-bg: var(--surface-2);
  border-radius: 4px; background: var(--m-qa-bg); box-shadow: 0 0 0 2px var(--m-qa-bg);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap;
}
.m-quickadd .is-date { --m-qa-bg: var(--g-green-bg); --m-qa-ink: var(--g-green); }
.m-quickadd .is-proj { --m-qa-bg: var(--t-sky-bg); --m-qa-ink: var(--t-sky); }
.m-quickadd .is-tag  { --m-qa-bg: var(--t-ochre-bg); --m-qa-ink: var(--t-ochre); }
.m-quickadd .is-prio { --m-qa-bg: var(--accent-soft); --m-qa-ink: var(--accent); }
.m-quickadd .m-quickadd__nl { color: var(--m-qa-ink, var(--ink)); }
.m-quickadd .m-quickadd__caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 3px; vertical-align: -0.18em;
  background: var(--ink); animation: m-quickadd-blink 1.1s steps(1, end) infinite;
}
@keyframes m-quickadd-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-quickadd .m-quickadd__caret { animation: none; } }

.m-quickadd .m-quickadd__desc { margin-top: 4px; font-size: 13.5px; color: var(--faint); }

/* Ряд чипов: заполненный — заливка тоном свойства и крестик, пустой — контур */
.m-quickadd .m-quickadd__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.m-quickadd .m-quickadd__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.m-quickadd .m-quickadd__chip.is-date,
.m-quickadd .m-quickadd__chip.is-prio,
.m-quickadd .m-quickadd__chip.is-tag { border-color: transparent; background: var(--m-qa-bg); color: var(--m-qa-ink); font-weight: 600; }
.m-quickadd .m-quickadd__chip.is-more { padding: 0 8px; color: var(--faint); }
.m-quickadd .m-quickadd__x { opacity: .7; margin-left: 2px; }
.m-quickadd .m-quickadd__hint { margin-top: 12px; font-size: 12px; color: var(--faint); }
.m-quickadd .m-quickadd__hint em { font: normal 12px var(--mono); color: var(--muted); }

/* Подвал: проект слева, отказ и отправка справа */
.m-quickadd .m-quickadd__foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.m-quickadd .m-quickadd__proj {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
}
.m-quickadd .m-quickadd__proj svg { color: var(--faint); }
.m-quickadd .m-quickadd__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.m-quickadd .m-quickadd__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-2);
}
.m-quickadd .m-quickadd__btn--add { background: var(--accent); color: var(--accent-ink); }
.m-quickadd .m-quickadd__kbd {
  font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 5px; border-radius: 4px; opacity: .85;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
}


/* ── mock-shell ── */
/* ═══ mock-shell — общий каркас приложения для сцен mock-* (docs/48-landing-site.md §5).
   Только CSS. Пропорции сняты с prototype/index.html (.rail, .side, .nav-item, .tgroup,
   .task, .tick, .tmeta, .tag, .chip, .compose); рейл 52 и панель 260 — по контракту.
   Тон любого элемента: data-tone="sky" или style="--c:var(--t-sky);--c-bg:var(--t-sky-bg)". ═══ */

.ui {
  display: grid; grid-template-columns: 52px 260px minmax(0, 1fr);
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.45 var(--sans); text-align: left;
}
.ui--no-side { grid-template-columns: 52px minmax(0, 1fr); }
.ui--no-side > .ui-side { display: none; }
.ui * { box-sizing: border-box; }
.ui a { color: inherit; text-decoration: none; }
.ui h1, .ui h2, .ui h3, .ui p { margin: 0; }
.ui svg {
  display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Тона: палитра значений --t-* (сферы, проекты, метки, люди) */
.ui [data-tone="graphite"] { --c: var(--t-graphite); --c-bg: var(--t-graphite-bg); }
.ui [data-tone="clay"]     { --c: var(--t-clay);     --c-bg: var(--t-clay-bg); }
.ui [data-tone="ochre"]    { --c: var(--t-ochre);    --c-bg: var(--t-ochre-bg); }
.ui [data-tone="olive"]    { --c: var(--t-olive);    --c-bg: var(--t-olive-bg); }
.ui [data-tone="sage"]     { --c: var(--t-sage);     --c-bg: var(--t-sage-bg); }
.ui [data-tone="teal"]     { --c: var(--t-teal);     --c-bg: var(--t-teal-bg); }
.ui [data-tone="sky"]      { --c: var(--t-sky);      --c-bg: var(--t-sky-bg); }
.ui [data-tone="indigo"]   { --c: var(--t-indigo);   --c-bg: var(--t-indigo-bg); }
.ui [data-tone="lavender"] { --c: var(--t-lavender); --c-bg: var(--t-lavender-bg); }
.ui [data-tone="plum"]     { --c: var(--t-plum);     --c-bg: var(--t-plum-bg); }
.ui [data-tone="rose"]     { --c: var(--t-rose);     --c-bg: var(--t-rose-bg); }
.ui [data-tone="wine"]     { --c: var(--t-wine);     --c-bg: var(--t-wine-bg); }
/* приоритет задачи — семантическая палитра, как .tick.p1/.p2/.p3 в продукте */
.ui [data-prio="1"] { --c: var(--accent);  --c-bg: var(--accent-soft); }
.ui [data-prio="2"] { --c: var(--g-amber); --c-bg: var(--g-amber-bg); }
.ui [data-prio="3"] { --c: var(--g-blue);  --c-bg: var(--g-blue-bg); }

/* ── Рейл разделов */
.ui-rail {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  min-height: 0; padding: 12px 0; background: var(--rail); border-right: 1px solid var(--line);
}
/* Знак Clusker: градиент знака (единственное исключение из токенов) и белая точка. */
.ui-rail__logo {
  position: relative; display: block; flex: none; width: 26px; height: 26px; margin-bottom: var(--sp-4);
  border-radius: 50%; background: linear-gradient(140deg, #FF6A4E 0%, #F04432 46%, #B9231A 100%);
}
.ui-rail__logo::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: 10px; height: 10px;
  border-radius: 50%; background: #FFFFFF; transform: translate(-50%, -50%);
}
.ui-rail__btn {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 8px; color: var(--muted);
}
.ui-rail__btn svg { width: 20px; height: 20px; stroke-width: 1.65; }
.ui-rail__btn.is-on { background: var(--surface-sunk); color: var(--ink); }
/* точка «есть новое» — у колокола */
.ui-rail__btn.has-dot::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--rail);
}
.ui-rail__sep { flex: none; width: 22px; height: 1px; margin: var(--sp-3) 0; background: var(--line-strong); }
.ui-rail__spacer { flex: 1; }

/* ── Боковая панель */
.ui-side {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 0; overflow: hidden;
  padding: 12px; background: var(--rail); border-right: 1px solid var(--line);
}
.ui-side__team {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 40px; padding: 0 var(--sp-3); margin-bottom: var(--sp-4);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.ui-side__team > b, .ui-side__team > strong, .ui-side__team-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.ui-side__team > svg { width: 14px; height: 14px; margin-left: auto; color: var(--faint); }
.ui-side__item {
  display: flex; align-items: center; gap: 10px; flex: none; min-width: 0;
  height: 32px; padding: 0 10px; border-radius: 6px;
  font-size: 14px; color: var(--ink); white-space: nowrap;
}
.ui-side__item > svg { width: 16px; height: 16px; color: var(--ink-2); }
.ui-side__item > .ui-dot { margin-inline: 4px; }
.ui-side__item.is-on { background: var(--surface-sunk); font-weight: 500; }
.ui-side__item.is-on > svg { color: var(--ink); }
.ui-side__label {
  padding: 18px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted);
}
/* Главная кнопка раздела («Быстрая задача») — акцентный текст с плюсом в кружке, как .compose */
.ui-compose {
  display: flex; align-items: center; gap: 10px; flex: none; height: 36px; padding: 0 8px; margin-bottom: var(--sp-4);
  border-radius: var(--r-md); font-size: 14px; font-weight: 600; color: var(--accent);
}
.ui-compose > svg { width: 22px; height: 22px; padding: 4.5px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); stroke-width: 2.4; }
.ui-count { margin-left: auto; padding-left: var(--sp-4); font-size: 12.5px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.ui-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--t-graphite)); }

/* ── Лист */
.ui-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 24px 40px; }
.ui-top { display: flex; align-items: center; gap: var(--sp-5); min-height: 40px; }
.ui-title { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.ui-top__sub { align-self: flex-end; padding-bottom: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ui-top__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.ui-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.ui-btn > svg { width: 15px; height: 15px; }
.ui-btn--icon { width: 28px; padding: 0; justify-content: center; }
.ui-btn .ui-kbd { margin-left: var(--sp-2); }

.ui-kbd {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 18px; height: 18px; padding: 0 5px;
  font: 500 11px/1 var(--mono); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
}

.ui-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-sm); font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--c-bg, var(--g-grey-bg)); color: var(--c, var(--g-grey));
}
.ui-chip > svg { width: 12px; height: 12px; }

.ui-avatar {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  background: var(--c-bg, var(--t-sky-bg)); color: var(--c, var(--t-sky));
}
.ui-avatar--sq { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

/* ── Список задач */
.ui-section-h {
  display: flex; align-items: baseline; gap: 10px; margin-top: 22px; padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink);
}
.ui-section-h .ui-count { margin-left: 0; padding-left: 0; font-size: 12.5px; }
.ui-section-h__act { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--accent); }

.ui-task { display: flex; align-items: flex-start; gap: 11px; padding: 11px var(--sp-2) 10px; border-bottom: 1px solid var(--line); }
.ui-tick {
  display: block; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--c, var(--edge)); background: var(--c-bg, transparent);
}
.ui-task__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ui-task__top { display: flex; align-items: flex-start; gap: var(--sp-4); }
.ui-task__top > .ui-task__title { flex: 1; min-width: 0; }
.ui-task__top > .ui-avatar { width: 20px; height: 20px; font-size: 9px; }
.ui-task__title { font-size: 14px; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-task__desc { font-size: 13px; line-height: 1.35; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.ui-task__meta > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ui-task__meta svg { width: 13px; height: 13px; }
.ui-task.is-done .ui-task__body { opacity: .5; }
.ui-task.is-done .ui-task__title { text-decoration: line-through; }
.ui-task.is-done .ui-tick { border-color: var(--faint); background: var(--faint); }

.ui-due { color: var(--g-green); font-variant-numeric: tabular-nums; }
.ui-due.is-late { color: var(--accent); }
.ui-proj { margin-left: auto; color: var(--muted); }
.ui-proj > i { font-style: normal; font-weight: 600; color: var(--c, var(--faint)); }
.ui-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 8px; border-radius: var(--r-pill);
  font-size: 12px; line-height: 1.35; white-space: nowrap;
  background: var(--c-bg, var(--surface-2)); color: var(--c, var(--muted));
}
.ui-tag > svg { width: 11px; height: 11px; }

.ui-add { display: flex; align-items: center; gap: 9px; padding: var(--sp-5) var(--sp-2); font-size: 13px; color: var(--muted); }
.ui-add > svg { width: 18px; height: 18px; color: var(--accent); }


/* ── mock-today ── */
/* ═══ mock-today — экран «Сегодня» для героя. Каркас и классы — mock-shell (.ui-*),
   здесь только то, что свойственно этой сцене. Родной размер 1200×760. ═══ */
.m-today .ui-main { padding-top: 28px; }
.m-today__list { width: 100%; max-width: 820px; }
.m-today .ui-section-h:first-child { margin-top: 18px; }


/* ── mock-upcoming ── */
/* ═══ mock-upcoming — «Предстоящее» календарём недели по часам (docs/48-landing-site.md §10, features #tasks).
   Устройство снято с prototype/index.html §14.530 (.cw-head, .cw-allday, .cw-col, .cw-block,
   .cw-now): шапка дней, полоса «весь день» и тело — ОДНА сетка колонок (жёлоб + 7 долей),
   блок — заливка тоном проекта и левая грань тем же тоном в полную силу.
   Отступления ради витрины: окно 9:00–18:00 вместо суток, линия «сейчас» акцентом,
   раскладка «Список · Календарь» сегментом на виду (в продукте — внутри «Вида»).
   Положение блока — числами в style (--s — начало от 9:00 в часах, --d — длительность). ═══ */

.m-upcoming > .mock__canvas { width: 1200px; height: 760px; }
.m-upcoming .ui-main { padding: 22px 28px 0; }

/* ── Полоса над календарём: неделя, раскладка, листалка */
.m-upcoming__bar { display: flex; align-items: center; gap: var(--sp-5); flex: none; margin: var(--sp-5) 0; }
.m-upcoming__week { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.m-upcoming .m-upcoming__week svg { width: 14px; height: 14px; color: var(--muted); }
.m-upcoming__seg { display: inline-flex; gap: var(--sp-1); margin-left: auto; padding: 3px; border-radius: 9px; background: var(--surface-sunk); }
.m-upcoming__seg > span { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 11px; border-radius: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.m-upcoming__seg > span.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.m-upcoming .m-upcoming__seg svg { width: 14px; height: 14px; }
.m-upcoming__nav { display: inline-flex; overflow: hidden; border: 1px solid var(--edge); border-radius: var(--r-sm); }
.m-upcoming__nav > span { padding: var(--sp-2) 11px; font-size: 13px; line-height: 1.45; color: var(--ink-2); white-space: nowrap; }
.m-upcoming__nav > .is-mid { border-inline: 1px solid var(--line); font-weight: 600; }

/* ── Календарь */
.m-upcoming__cal {
  --gut: 56px; --hour: 58px; --pad: 10px;
  display: flex; flex-direction: column; flex: 1; min-height: 0; border-top: 1px solid var(--line);
}
.m-upcoming__head, .m-upcoming__allday, .m-upcoming__body {
  display: grid; grid-template-columns: var(--gut) repeat(7, minmax(0, 1fr));
}

.m-upcoming__head { flex: none; border-bottom: 1px solid var(--line); }
.m-upcoming__dh {
  display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 9px var(--sp-3);
  border-left: 1px solid var(--line); font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.m-upcoming__dh > b { font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-upcoming__dh.is-today > b { padding: 1px 7px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-weight: 600; }
.m-upcoming__dh.is-off { color: var(--faint); }
.m-upcoming__dh.is-off > b { color: var(--ink-2); }

/* «Весь день» — задачи с датой, но без времени: у них нет часа, значит нет и места в сетке */
.m-upcoming__allday { flex: none; min-height: 33px; border-bottom: 1px solid var(--line-strong); }
.m-upcoming__adl { padding: 10px var(--sp-4) 0 0; font-size: 10.5px; color: var(--faint); text-align: right; white-space: nowrap; }
.m-upcoming__adc { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: 3px; border-left: 1px solid var(--line); }
.m-upcoming__adc.is-off { background: var(--surface-2); }
/* Столбец ~111 px: на подпись чипа остаётся ~79 px, поэтому поля и кружок ужаты на шаг против .cw-chip */
.m-upcoming__chip {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 3px 5px; border-radius: 5px;
  background: var(--c-bg, var(--g-grey-bg)); color: var(--c, var(--g-grey)); font-size: 11.5px; line-height: 1.3;
}
.m-upcoming__chip > i { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; }
.m-upcoming__chip > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Тело: часовые линии — фоном столбца, со сдвигом --pad, чтобы подпись 9:00 не резалась */
.m-upcoming__body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.m-upcoming__gut { position: relative; }
.m-upcoming__gut > span {
  position: absolute; right: var(--sp-4); top: calc(var(--pad) + var(--s) * var(--hour)); transform: translateY(-50%);
  font: 400 11px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.m-upcoming__gut > .is-now { color: var(--accent); font-weight: 700; }
.m-upcoming__col {
  position: relative; min-height: calc(var(--pad) + 9.6 * var(--hour)); border-left: 1px solid var(--line);
  background-image: linear-gradient(to bottom, var(--line) 0 1px, transparent 1px);
  background-size: 100% var(--hour); background-repeat: repeat-y; background-position: 0 var(--pad);
}
.m-upcoming__col.is-off { background-color: var(--surface-2); }

/* Блок задачи: заливка тоном поверх листа (непрозрачная — часовые линии не просвечивают), грань тем же тоном */
.m-upcoming__blk {
  position: absolute; left: 2px; right: 3px;
  top: calc(var(--pad) + var(--s) * var(--hour) + 1px); height: calc(var(--d) * var(--hour) - 2px);
  display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: var(--sp-2) 7px var(--sp-2) 9px;
  border-radius: var(--r-sm);
  background: linear-gradient(var(--c-bg, var(--g-grey-bg)), var(--c-bg, var(--g-grey-bg))), var(--bg);
  box-shadow: inset 3px 0 0 var(--c, var(--g-grey));
  font-size: 12px; line-height: 1.3; color: var(--ink);
}
.m-upcoming__blk > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.m-upcoming__blk > span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-upcoming__blk.is-short { justify-content: center; padding-block: var(--sp-1); }
.m-upcoming__blk.is-short > b { -webkit-line-clamp: 1; }
.m-upcoming__blk.is-short > span { display: none; }
.m-upcoming__blk.is-now { z-index: 2; box-shadow: inset 3px 0 0 var(--c, var(--g-grey)), 0 0 0 1.5px var(--c, var(--g-grey)), var(--shadow-2); }

/* Линия «сейчас»: тонкая через всю неделю, в полную силу — на сегодняшнем столбце (--k — его номер) */
.m-upcoming__now {
  position: absolute; left: var(--gut); right: 0; top: calc(var(--pad) + var(--s) * var(--hour)); z-index: 3;
  height: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); pointer-events: none;
}
.m-upcoming__now > b { position: absolute; top: -1.5px; left: calc(100% / 7 * var(--k)); width: calc(100% / 7); height: 2px; background: var(--accent); }
.m-upcoming__now > i { position: absolute; top: -5.5px; left: calc(100% / 7 * var(--k) - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }


/* ── mock-vault ── */
/* ═══ mock-vault — сцена «Сейф паролей» (docs/48-landing-site.md §5, §10 #vault).
   Источник: web/src/screens/Vault.tsx (VaultSidebar: Все записи · Сейфы · По типу;
   VaultCard: .vlt-card-top, .vlt-field .k/.v, .vlt-act, TotpField с .vlt-ring)
   и prototype/index.html #s-vault (.vgroup, .vrow, .favi, .vname .nm/.vu).
   Выдачи доступа, групп и истории значений нет (§2) — не рисуются. ═══ */

.m-vault .mock__canvas { width: 1200px; height: 760px; }

/* ── панель */
.m-vault .mv-enc {
  display: flex; align-items: center; gap: var(--sp-3); margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); padding: var(--sp-3) 10px;
  border-radius: var(--r-sm); background: var(--g-green-bg); color: var(--g-green); font-size: 12.5px; font-weight: 500;
}
.m-vault .mv-enc > svg { width: 14px; height: 14px; }

.m-vault .mv-btn-main { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ── лист: список записей и карточка */
.m-vault .mv-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--sp-7); margin-top: 18px; min-height: 0; }

.m-vault .mv-group {
  display: flex; align-items: center; gap: var(--sp-4); padding: 14px var(--sp-2) var(--sp-3);
  font-size: 12.5px; color: var(--muted);
}
.m-vault .mv-group:first-child { padding-top: var(--sp-2); }
.m-vault .mv-group > b { font-weight: 600; color: var(--ink-2); }
.m-vault .mv-group > svg { width: 14px; height: 14px; }
.m-vault .mv-group > .ui-count { margin-left: 0; padding-left: 0; }

.m-vault .mv-row {
  display: flex; align-items: center; gap: var(--sp-5); height: 50px; padding: 0 10px;
  border-radius: var(--r-sm);
}
.m-vault .mv-row.is-on { background: var(--surface-sunk); box-shadow: inset 2px 0 0 var(--ink); }
.m-vault .mv-favi {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-bg, var(--surface-2)); color: var(--c, var(--muted)); font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.m-vault .mv-favi--lg { width: 44px; height: 44px; font-size: 16px; }
.m-vault .mv-name { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.m-vault .mv-name > b { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-vault .mv-name > span { font-size: 12.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-vault .mv-when { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }

.m-vault .mv-card {
  display: flex; flex-direction: column; min-height: 0; padding: 20px 22px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2);
}
.m-vault .mv-card__top { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-6); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.m-vault .mv-card__title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.m-vault .mv-card__title > b { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.m-vault .mv-card__title > span { font-size: 12.5px; color: var(--muted); }

/* подпись слева колонкой, значение справа — как .rec-prop в панели записи */
.m-vault .mv-field {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: var(--sp-5);
  min-height: 46px; border-bottom: 1px solid var(--line);
}
.m-vault .mv-k { font-size: 12.5px; color: var(--muted); }
.m-vault .mv-v { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: 14px; color: var(--ink); }
.m-vault .mv-grow { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-vault .mv-secret { font-family: var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.m-vault .mv-totp { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.m-vault .mv-secs { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--faint); }
.m-vault .mv-link { color: var(--g-blue); }
.m-vault .mv-proj { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 13.5px; }
.m-vault .mv-note { white-space: normal; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.m-vault .mv-field--note { align-items: start; padding-block: 13px; border-bottom: 0; }
.m-vault .mv-act {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--muted); border: 1px solid var(--line);
}
.m-vault .mv-act > svg { width: 15px; height: 15px; }

.m-vault .mv-ring { width: 20px; height: 20px; }
.m-vault .mv-ring circle { fill: none; stroke-width: 2.6; }
.m-vault .ui .mv-ring__track { stroke: var(--line-strong); }
.m-vault .ui .mv-ring__left { stroke: var(--g-blue); stroke-linecap: round; }

.m-vault .mv-foot { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.m-vault .mv-foot__line { display: flex; align-items: center; gap: var(--sp-4); font-size: 12.5px; color: var(--muted); }
.m-vault .mv-foot__line > svg { width: 16px; height: 16px; color: var(--ink-2); }
.m-vault .mv-foot__line--shield { color: var(--g-green); }
.m-vault .mv-foot__line--shield > svg { color: var(--g-green); }


/* ── modules ── */
/* Перечень модулей сеткой (docs/48 §6): карточка — ссылка на якорь главной. */
.s-modules__lead { margin-top: var(--sp-5); }

.s-modules__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin: 0; }
@media (min-width: 721px) { .s-modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .s-modules__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
@media (min-width: 1100px) { .s-modules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Задержка появления — только у обёртки: у самой карточки она тормозила бы наведение. */
.s-modules__grid > [data-reveal] { transition-delay: var(--d, 0s); }

.s-modules__card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.s-modules__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
/* Общее кольцо фокуса ставит радиус 4px самому элементу — карточке он свой. */
.s-modules__card:focus-visible { border-radius: var(--r-lg); }

/* Стрелка в углу: подсказка, что карточка ведёт дальше. */
.s-modules__card::after {
  content: "→"; position: absolute; top: var(--sp-7); right: var(--sp-7);
  font-size: 15px; line-height: 1; color: var(--faint); opacity: 0;
  transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease);
}
.s-modules__card:hover::after, .s-modules__card:focus-visible::after { opacity: 1; transform: none; }

.s-modules__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--sp-6);
  border-radius: var(--r-md); background: var(--tone-bg, var(--surface-2)); color: var(--tone, var(--ink-2));
}
.s-modules__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.s-modules__name { font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
/* Нижний отступ описания — наименьший зазор до черты; margin-top:auto у пунктов
   ставит их по низу ряда, чтобы черты в одном ряду стояли на одной высоте. */
.s-modules__desc { margin-top: var(--sp-3); margin-bottom: var(--sp-5); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.s-modules__facts {
  display: grid; gap: var(--sp-2); margin: 0; margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
.s-modules__facts li { position: relative; padding-left: 14px; }
.s-modules__facts li::before {
  content: ""; position: absolute; left: 1px; top: .6em; width: 5px; height: 5px;
  border-radius: var(--r-pill); background: var(--tone, var(--faint)); opacity: .55;
}
.s-modules kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; text-align: center;
  font: 500 11.5px/1.3 var(--mono); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm);
}

.s-modules__more { margin-top: clamp(32px, 4vw, 48px); text-align: center; }


/* ── not-found ── */
.s-not-found { padding-block: clamp(64px, 12vw, 140px); }
.s-not-found__inner { text-align: center; }
.s-not-found__code { font-size: clamp(64px, 14vw, 120px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--line-strong); margin-bottom: var(--sp-6); }
.s-not-found .lead { margin-top: var(--sp-5); }
.s-not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-8); }
.s-not-found__ru { margin-top: clamp(40px, 7vw, 72px); padding-top: var(--sp-8); border-top: 1px solid var(--line); color: var(--ink-2); }
.s-not-found__ru p { margin-top: var(--sp-4); }
@media (max-width: 560px) {
  .s-not-found__actions { flex-direction: column; }
  .s-not-found__actions .btn { width: 100%; }
}


/* ── pricing-compare ── */
/* Таблица сравнения: числа лимитов, а не только галочки.
   Шапка залипает под шапкой сайта. Липкость работает только там, где у обёртки
   нет своей прокрутки: overflow-x:auto делает её контейнером прокрутки, и th
   залипал бы внутри неё, а не у страницы. Поэтому прокрутка по горизонтали —
   только на узком экране, где таблица не влезает; там вместо шапки залипает
   первая колонка с названиями строк. */
.s-pricing-compare__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-md); }
@media (min-width: 960px) { .s-pricing-compare__scroll { overflow: visible; } }

.s-pricing-compare__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.s-pricing-compare__table col.is-featured { background: var(--accent-soft); }
.s-pricing-compare__col-label { width: 28%; }

.s-pricing-compare__table th,
.s-pricing-compare__table td { padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.s-pricing-compare__table td { color: var(--ink); }

/* ── Шапка */
.s-pricing-compare__table thead th { position: sticky; top: var(--header-h); z-index: 2; padding-block: var(--sp-6) var(--sp-5); background: var(--bg); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.s-pricing-compare__table thead th.is-featured { background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--bg); border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.s-pricing-compare__plan { display: block; font-size: 16px; font-weight: 650; color: var(--ink); text-decoration: none; }
.s-pricing-compare__plan:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-pricing-compare__from { display: block; margin-top: var(--sp-1); font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* ── Строки */
.s-pricing-compare__table tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); background: var(--bg); }
.s-pricing-compare__group th { padding-top: var(--sp-8); text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--bg); border-bottom-color: var(--line-strong); }
.s-pricing-compare__group th > span { display: inline-block; position: sticky; left: var(--sp-5); }
.s-pricing-compare__table tbody:first-of-type .s-pricing-compare__group th { padding-top: var(--sp-6); }
.s-pricing-compare__table tbody tr:not(.s-pricing-compare__group):hover > * { background-color: var(--surface-2); }
.s-pricing-compare__table tbody tr:not(.s-pricing-compare__group):hover > td.is-featured { background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--surface-2); }

.s-pricing-compare__yes { font-weight: 700; color: var(--g-green); }
.s-pricing-compare__no { color: var(--faint); }

.s-pricing-compare__note { max-width: 720px; margin-top: var(--sp-6); font-size: 14px; color: var(--muted); }

/* ── Узкий экран: прокрутка внутри обёртки, первая колонка стоит на месте */
@media (max-width: 959px) {
  .s-pricing-compare__table { min-width: 680px; font-size: 14px; }
  .s-pricing-compare__col-label { width: 150px; }
  .s-pricing-compare__table thead th:first-child,
  .s-pricing-compare__table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
  .s-pricing-compare__table thead th:first-child { z-index: 3; }
}


/* ── pricing-faq ── */
/* Вопросы о ценах: аккордеон на <details>, без скрипта. */
.s-pricing-faq__list { display: grid; gap: var(--sp-4); }

.s-pricing-faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.s-pricing-faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-1); }

.s-pricing-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6) var(--sp-7); border-radius: var(--r-md); list-style: none; cursor: pointer; font-size: 16.5px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.s-pricing-faq__item > summary::-webkit-details-marker { display: none; }
.s-pricing-faq__item > summary::marker { content: ""; }
.s-pricing-faq__item > summary:hover { background: var(--surface-2); }
.s-pricing-faq__item[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.s-pricing-faq__icon { position: relative; flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .2s var(--ease); }
.s-pricing-faq__icon::before,
.s-pricing-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; }
.s-pricing-faq__icon::after { transform: rotate(90deg); }
.s-pricing-faq__item[open] .s-pricing-faq__icon { transform: rotate(45deg); color: var(--ink); }

.s-pricing-faq__a { padding: var(--sp-2) var(--sp-7) var(--sp-7); }
.s-pricing-faq__a p { max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 720px) {
  .s-pricing-faq__item > summary { padding: var(--sp-6); font-size: 16px; }
  .s-pricing-faq__a { padding: var(--sp-2) var(--sp-6) var(--sp-6); }
}


/* ── pricing-plans ── */
/* Страница цен: шапка, переключатель периода, пять карточек, «всё включено», свой сервер. */
.s-pricing-plans { padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 96px); }

.s-pricing-plans__head { display: grid; justify-items: center; gap: var(--sp-5); max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.s-pricing-plans__head .lead { max-width: 560px; }
.s-pricing-plans__head .muted { margin-top: calc(-1 * var(--sp-2)); }

/* ── Переключатель периода */
.s-pricing-plans__toggle { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-5); padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); }
.s-pricing-plans__toggle [role="radio"] { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 36px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.s-pricing-plans__toggle [role="radio"]:hover { color: var(--ink); }
.s-pricing-plans__toggle [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1); }
.s-pricing-plans__save { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--g-green-bg); color: var(--g-green); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ── Карточки */
.s-pricing-plans__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 721px) { .s-pricing-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .s-pricing-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .s-pricing-plans__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); } }

.s-pricing-plans__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--sp-7) var(--sp-6) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + var(--sp-7)); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.s-pricing-plans__card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }
.s-pricing-plans__card:target { box-shadow: 0 0 0 2px var(--edge), var(--shadow-2); }
.s-pricing-plans__card.is-featured:target { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }

.s-pricing-plans__badge { position: absolute; top: -11px; left: var(--sp-6); display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-5); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }

.s-pricing-plans__name { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
.s-pricing-plans__motto { margin-top: var(--sp-2); font-size: 14px; line-height: 1.45; color: var(--muted); }

.s-pricing-plans__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); margin-top: var(--sp-6); }
.s-pricing-plans__amount { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-pricing-plans__unit { font-size: 14px; color: var(--muted); white-space: nowrap; }
.s-pricing-plans__billing { margin-top: var(--sp-2); font-size: 13px; line-height: 1.45; color: var(--muted); }
.s-pricing-plans[data-period="month"] .s-pricing-plans__billing.is-yearly-only { color: var(--g-amber); font-weight: 600; }

.s-pricing-plans__cta { width: 100%; margin-top: var(--sp-6); }

.s-pricing-plans__limits { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 0; padding: var(--sp-6) 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.s-pricing-plans__limits li { position: relative; padding-left: 22px; }
.s-pricing-plans__limits li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--g-green); border-bottom: 2px solid var(--g-green); transform: rotate(-45deg); }

/* В ряд — строки девиза и счёта выровнены, чтобы цены и кнопки стояли на одной линии. */
@media (min-width: 721px) {
  .s-pricing-plans__motto { min-height: calc(2em * 1.45); }
  .s-pricing-plans__billing { min-height: calc(2em * 1.45); }
}
@media (min-width: 1200px) {
  .s-pricing-plans__motto { min-height: calc(3em * 1.45); }
}

/* ── Всё включено */
.s-pricing-plans__included { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); margin-top: clamp(32px, 5vw, 48px); padding: var(--sp-6) var(--sp-7); border-radius: var(--r-lg); background: var(--surface-2); }
.s-pricing-plans__included-title { font-size: 16px; line-height: 1.35; font-weight: 600; }
.s-pricing-plans__chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.s-pricing-plans__chips .chip { height: 28px; padding: 0 var(--sp-5); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }

/* ── Свой сервер */
.s-pricing-plans__self { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-top: var(--sp-6); padding: var(--sp-7); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); scroll-margin-top: calc(var(--header-h) + var(--sp-7)); }
.s-pricing-plans__self-text { display: grid; gap: var(--sp-2); max-width: 620px; }
.s-pricing-plans__self:target { border-style: solid; border-color: var(--edge); }

@media (max-width: 720px) {
  .s-pricing-plans__toggle [role="radio"] { padding: 0 var(--sp-5); }
  .s-pricing-plans__included { padding: var(--sp-6); }
  .s-pricing-plans__self { padding: var(--sp-6); }
  .s-pricing-plans__self .btn { width: 100%; }
}


/* ── pricing-teaser ── */
/* Цены на главной: пять плашек в ряд, Studio подсвечена, ссылка на страницу цен. */
.s-pricing-teaser__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 721px) { .s-pricing-teaser__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1040px) { .s-pricing-teaser__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.s-pricing-teaser__row > li { min-width: 0; }

.s-pricing-teaser__tile { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.s-pricing-teaser__tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.s-pricing-teaser__tile.is-featured { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)) var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.s-pricing-teaser__tile.is-featured:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }

.s-pricing-teaser__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); font-size: 15px; font-weight: 600; }
.s-pricing-teaser__badge { font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }

.s-pricing-teaser__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); margin-top: var(--sp-4); }
.s-pricing-teaser__price b { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.s-pricing-teaser__price span { font-size: 13px; color: var(--muted); }

.s-pricing-teaser__limit { margin-top: auto; padding-top: var(--sp-4); font-size: 13.5px; line-height: 1.4; color: var(--muted); }

.s-pricing-teaser__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: clamp(32px, 4vw, 48px); }
.s-pricing-teaser__note { margin-top: var(--sp-6); text-align: center; }

/* Телефон: одна колонка, плашка строкой — название и лимит слева, цена справа. */
@media (max-width: 720px) {
  .s-pricing-teaser__tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "limit price"; align-items: center; column-gap: var(--sp-6); row-gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); }
  .s-pricing-teaser__name { grid-area: name; justify-content: flex-start; }
  .s-pricing-teaser__price { grid-area: price; margin-top: 0; justify-content: flex-end; }
  .s-pricing-teaser__price b { font-size: 24px; }
  .s-pricing-teaser__limit { grid-area: limit; margin-top: 0; padding-top: 0; }
  .s-pricing-teaser__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .s-pricing-teaser__tile:hover { transform: none; }
}


/* ── principles ── */
/* principles — «Наш подход»: шесть тезисов сеткой 3×2 и цитата-манифест. docs/48-landing-site.md §6 */
.s-principles .s-principles__lead { margin-top: var(--sp-5); }

.s-principles .s-principles__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6);
}
.s-principles .s-principles__item {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.s-principles .s-principles__num {
  display: flex; align-items: center; gap: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 500; letter-spacing: -0.02em;
  color: var(--accent);
}
.s-principles .s-principles__num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.s-principles .s-principles__title { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 650; text-wrap: balance; }
.s-principles .s-principles__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* лёгкая лесенка появления по колонкам */
.s-principles .s-principles__item:nth-child(3n+2) { transition-delay: .07s; }
.s-principles .s-principles__item:nth-child(3n) { transition-delay: .14s; }

/* ── Манифест */
.s-principles .s-principles__manifesto {
  max-width: 980px; margin: clamp(56px, 8vw, 104px) auto 0; text-align: center;
}
.s-principles .s-principles__quote p {
  font: 400 clamp(24px, 3.2vw, 40px)/1.28 var(--serif); letter-spacing: -0.01em;
  color: var(--ink-2); text-wrap: balance;
}
.s-principles .s-principles__by {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-7); font-size: 14px; font-weight: 600; color: var(--muted);
}
.s-principles .s-principles__by::before { content: ""; width: 24px; height: 1px; background: var(--line-strong); }

@media (max-width: 1023px) {
  .s-principles .s-principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-principles .s-principles__item:nth-child(n) { transition-delay: 0s; }
  .s-principles .s-principles__item:nth-child(2n) { transition-delay: .07s; }
}
@media (max-width: 720px) {
  .s-principles .s-principles__grid { grid-template-columns: minmax(0, 1fr); }
  .s-principles .s-principles__item:nth-child(n) { transition-delay: 0s; }
  .s-principles .s-principles__quote p { text-wrap: pretty; }
}


/* ── replaces ── */
/* Полоса «Вместо чего» сразу под героем: текстом, без чужих логотипов (docs/48 §6). */
.s-replaces { padding-block: clamp(32px, 5vw, 56px); text-align: center; }
.s-replaces__title { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; color: var(--muted); margin-bottom: var(--sp-6); }

.s-replaces__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4) var(--sp-5); }
.s-replaces__old { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin: 0; }

.s-replaces__pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--muted);
  text-decoration: line-through; text-decoration-color: var(--faint); text-decoration-thickness: 1.5px;
}
.s-replaces__pill--new {
  height: 36px; padding: 0 16px; font-weight: 700; letter-spacing: -0.005em; text-decoration: none;
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

.s-replaces__arrow { display: inline-grid; place-items: center; color: var(--faint); }
.s-replaces__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.s-replaces__note { max-width: 620px; margin: var(--sp-6) auto 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 520px) {
  .s-replaces__row { flex-direction: column; gap: var(--sp-4); }
  .s-replaces__arrow { transform: rotate(90deg); }
  .s-replaces__pill { height: 30px; padding: 0 12px; font-size: 14px; }
  .s-replaces__pill--new { height: 34px; padding: 0 16px; font-size: 15px; }
}


/* ── scrolly ── */
/* Липкая витрина «как идёт работа» (#flow). docs/48-landing-site.md §6, §10.
   Узкое (< 1024) — по умолчанию: одна колонка, сцена под своим текстом.
   Разметка одна: обёртки шагов и сцены на узком становятся display: contents,
   и тексты с фигурами встают в общую сетку попеременно по data-step. */
.s-scrolly {
  --stage-h: calc(100vh - var(--header-h) - 48px);
}
@supports (height: 100svh) {
  .s-scrolly { --stage-h: calc(100svh - var(--header-h) - 48px); }
}

.s-scrolly__lead { margin-top: var(--sp-5); }

/* ── Сетка */
.s-scrolly__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-scrolly__steps,
.s-scrolly__stage { display: contents; }
.s-scrolly__rail { display: none; }

.s-scrolly__step[data-step="0"] { grid-row: 1; }
.s-scrolly__fig[data-step="0"]  { grid-row: 2; }
.s-scrolly__step[data-step="1"] { grid-row: 3; }
.s-scrolly__fig[data-step="1"]  { grid-row: 4; }
.s-scrolly__step[data-step="2"] { grid-row: 5; }
.s-scrolly__fig[data-step="2"]  { grid-row: 6; }
.s-scrolly__step[data-step="3"] { grid-row: 7; }
.s-scrolly__fig[data-step="3"]  { grid-row: 8; }
.s-scrolly__step[data-step="4"] { grid-row: 9; }
.s-scrolly__fig[data-step="4"]  { grid-row: 10; }

/* ── Текст главы */
.s-scrolly__step { max-width: 640px; padding-block: var(--sp-9) var(--sp-7); }
.s-scrolly__step[data-step="0"] { padding-top: 0; }
.s-scrolly__step .eyebrow { gap: var(--sp-5); }
.s-scrolly__num { font: 600 12px/1 var(--mono); letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.s-scrolly__body { margin-top: var(--sp-5); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.s-scrolly__body kbd {
  display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; align-items: center; justify-content: center;
  vertical-align: 2px; font: 500 12px/1 var(--mono); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm);
}

/* ── Фигура = место под видео */
.s-scrolly__fig { min-width: 0; }
.s-scrolly__slot {
  position: relative; display: grid; place-items: center; width: 100%;
  padding: clamp(12px, 3.5vw, 32px);
  border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, var(--t-sky-bg), transparent 60%),
    var(--surface-2);
}
.s-scrolly__slot > .frame { width: 100%; }
.s-scrolly__tag {
  position: absolute; right: var(--sp-5); bottom: var(--sp-5); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--sp-3); height: 26px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-1); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.s-scrolly__tag svg { color: var(--accent); }
.s-scrolly__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.s-scrolly__slot.has-video { aspect-ratio: 16 / 10; padding: 0; }
.s-scrolly__slot.has-video > .s-scrolly__tag { display: none; }

@media (max-width: 1023.98px) {
  .s-scrolly__fig { margin-bottom: var(--sp-6); }
}
@media (max-width: 720px) {
  .s-scrolly__step { padding-top: var(--sp-8); }
  .s-scrolly__body { font-size: 16px; }
  .s-scrolly__tag { right: var(--sp-4); bottom: var(--sp-4); height: 24px; padding: 0 var(--sp-4); font-size: 11.5px; }
}

/* ── Широкое: текст слева, сцена залипает справа */
@media (min-width: 1024px) {
  .s-scrolly__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .s-scrolly__steps { display: block; position: relative; grid-column: 1; grid-row: 1; padding-left: var(--sp-8); }
  .s-scrolly__stage { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); height: var(--stage-h); }

  /* Полоса прогресса: заливка доходит до середины активной главы */
  .s-scrolly__rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: var(--r-pill); background: var(--line); }
  .s-scrolly__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, .1) * 100%); border-radius: inherit; background: var(--accent); transition: height .4s var(--ease); }
  .s-scrolly__fill::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; margin-left: -5px; margin-bottom: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }

  .s-scrolly__step { min-height: 80vh; min-height: 80svh; max-width: 480px; padding-block: var(--sp-8); display: flex; flex-direction: column; justify-content: center; transition: opacity .4s var(--ease); }
  .s-scrolly__step[data-step="0"] { padding-top: var(--sp-8); }
  .s-scrolly.is-live .s-scrolly__step { opacity: .35; }
  .s-scrolly.is-live .s-scrolly__step[aria-current="step"] { opacity: 1; }
  .s-scrolly__step[aria-current="step"] .s-scrolly__num { color: var(--ink); }

  /* Все пять фигур друг на друге, видна одна */
  .s-scrolly__fig {
    position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
    opacity: 0; visibility: hidden; transform: scale(.98);
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
  }
  .s-scrolly__fig.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  /* Подложка 16:10, не выше залипшей сцены; окно вписано и по ширине, и по высоте.
     --ar (ширина/высота сцены) ставит script.js из data-w/data-h у .mock. */
  .s-scrolly__slot { width: min(100%, calc(var(--stage-h) * 1.6)); aspect-ratio: 16 / 10; padding: clamp(16px, 2.2vw, 28px); container-type: size; }
  .s-scrolly__slot > .frame { width: min(100%, calc((100cqh - 34px) * var(--ar, 1.58))); }
}

@media (prefers-reduced-motion: reduce) {
  .s-scrolly__step, .s-scrolly__fill, .s-scrolly__fig, .s-scrolly__fig.is-on { transition: none; }
  .s-scrolly__fig { transform: none; }
}


/* ── testimonials ── */
/* testimonials — отзывы-ОБРАЗЦЫ с видимой пометкой (docs/48-landing-site.md §8). Стена из восьми карточек. */

/* ── Пометка «образцы»: семантический янтарный, это состояние, а не выбор */
.s-testimonials .s-testimonials__sample {
  margin-top: var(--sp-6); height: auto; min-height: 28px; padding: var(--sp-2) var(--sp-5);
  font-size: 13px; font-weight: 600; line-height: 1.35; white-space: normal;
  background: var(--g-amber-bg); color: color-mix(in srgb, var(--g-amber) 80%, var(--ink));
}
.s-testimonials .s-testimonials__sample::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Тона: палитра значений --t-*; текст подмешивает чернила, чтобы читался и в тёмной теме */
.s-testimonials [data-tone="clay"]     { --tone: var(--t-clay);     --tone-bg: var(--t-clay-bg); }
.s-testimonials [data-tone="plum"]     { --tone: var(--t-plum);     --tone-bg: var(--t-plum-bg); }
.s-testimonials [data-tone="indigo"]   { --tone: var(--t-indigo);   --tone-bg: var(--t-indigo-bg); }
.s-testimonials [data-tone="ochre"]    { --tone: var(--t-ochre);    --tone-bg: var(--t-ochre-bg); }
.s-testimonials [data-tone="teal"]     { --tone: var(--t-teal);     --tone-bg: var(--t-teal-bg); }
.s-testimonials [data-tone="sky"]      { --tone: var(--t-sky);      --tone-bg: var(--t-sky-bg); }
.s-testimonials [data-tone="lavender"] { --tone: var(--t-lavender); --tone-bg: var(--t-lavender-bg); }
.s-testimonials [data-tone="sage"]     { --tone: var(--t-sage);     --tone-bg: var(--t-sage-bg); }
.s-testimonials [data-tone="olive"]    { --tone: var(--t-olive);    --tone-bg: var(--t-olive-bg); }
.s-testimonials [data-tone="rose"]     { --tone: var(--t-rose);     --tone-bg: var(--t-rose-bg); }

/* ── Стена: колонки, карточка не рвётся */
.s-testimonials .s-testimonials__wall { columns: 3; column-gap: var(--sp-6); }
.s-testimonials .s-testimonials__card {
  display: inline-block; width: 100%; vertical-align: top;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 var(--sp-6); padding: var(--sp-7);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.s-testimonials .s-testimonials__card:nth-child(3n+2) { transition-delay: .07s; }
.s-testimonials .s-testimonials__card:nth-child(3n) { transition-delay: .14s; }

.s-testimonials .s-testimonials__tag { margin-bottom: var(--sp-5); background: var(--tone-bg); color: color-mix(in srgb, var(--tone) 78%, var(--ink)); }
.s-testimonials .s-testimonials__quote p { font-size: 16px; line-height: 1.6; color: var(--ink); }

.s-testimonials .s-testimonials__who { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.s-testimonials .s-testimonials__avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 600 14px/1 var(--sans); letter-spacing: .02em;
  background: var(--tone-bg, var(--surface-2)); color: color-mix(in srgb, var(--tone, var(--ink-2)) 78%, var(--ink));
}
.s-testimonials .s-testimonials__name { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.s-testimonials .s-testimonials__role { display: block; font-size: 13.5px; line-height: 1.35; color: var(--muted); }

/* ── Большая цитата */
.s-testimonials .s-testimonials__card--big { padding: clamp(24px, 3vw, 36px); background: var(--surface-2); border-color: transparent; box-shadow: none; }
.s-testimonials .s-testimonials__mark { width: 32px; height: 24px; margin-bottom: var(--sp-6); color: var(--accent); }
.s-testimonials .s-testimonials__card--big .s-testimonials__quote p { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -0.015em; font-weight: 600; }
.s-testimonials .s-testimonials__card--big .s-testimonials__who { margin-top: var(--sp-7); }

/* ── Карточка чернилами: тёмная в светлой теме и светлая в тёмной — токены меняются местами сами */
.s-testimonials .s-testimonials__card--ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.s-testimonials .s-testimonials__card--ink .s-testimonials__quote p { color: var(--bg); }
.s-testimonials .s-testimonials__card--ink .s-testimonials__role { color: color-mix(in srgb, var(--bg) 68%, var(--ink)); }
.s-testimonials .s-testimonials__card--ink .s-testimonials__avatar { background: color-mix(in srgb, var(--bg) 16%, var(--ink)); color: var(--bg); }

/* ── Строка MCP под цитатой разработчика */
.s-testimonials .s-testimonials__code {
  display: grid; gap: var(--sp-1); margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  font: 500 12.5px/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.s-testimonials .s-testimonials__code-dim { color: var(--faint); }
.s-testimonials .s-testimonials__code-ok { color: var(--g-green); font-weight: 700; }

@media (max-width: 1023px) {
  .s-testimonials .s-testimonials__wall { columns: 2; }
  .s-testimonials .s-testimonials__card:nth-child(n) { transition-delay: 0s; }
}
@media (max-width: 720px) {
  .s-testimonials .s-testimonials__wall { columns: 1; }
  .s-testimonials .s-testimonials__card { padding: var(--sp-6); }
}


/* ── blog ── */
/* ═══ Блог витрины: указатель /blog/, страница поста, карточка, обложки.
   Карточка .b-card рисуется и на главной (sections/blog-teaser), поэтому живёт здесь.
   Только токены base.css; тёмная тема — сама, через --ink и --surface. ═══ */

/* ── Цвет рубрики — палитра значений --t-* (выбор, а не статус) */
.b-cat, .b-filter { --b-cat: var(--t-graphite); }
:is(.b-cat, .b-filter)[data-cat="product"]     { --b-cat: var(--t-sky); }
:is(.b-cat, .b-filter)[data-cat="design"]      { --b-cat: var(--t-plum); }
:is(.b-cat, .b-filter)[data-cat="engineering"] { --b-cat: var(--t-teal); }
:is(.b-cat, .b-filter)[data-cat="company"]     { --b-cat: var(--t-ochre); }
:is(.b-cat, .b-filter)[data-cat="changelog"]   { --b-cat: var(--t-sage); }

.b-cat {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px;
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: color-mix(in srgb, var(--b-cat) 62%, var(--ink));
  background: color-mix(in srgb, var(--b-cat) 12%, transparent);
  text-decoration: none;
}
.b-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-cat); flex: none; }
.b-sep { margin-inline: 7px; color: var(--faint); }

/* ── Карточка поста */
.b-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.b-card__body { display: flex; flex-direction: column; min-width: 0; }
.b-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.b-card__when { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.b-card__title { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; font-weight: 650; color: var(--ink); text-wrap: balance; }
.b-card__link { color: inherit; text-decoration: none; }
/* Вся карточка — одна ссылка: заголовок растянут на неё, текст остаётся текстом. */
.b-card__link::after { content: ""; position: absolute; inset: -6px; z-index: 1; border-radius: var(--r-lg); }
.b-card__link:focus-visible { outline: none; }
.b-card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-card:hover .b-card__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.b-card__excerpt {
  margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ── Обложки: узор по data-cover, без картинок. Рисуется в долях самой обложки,
   поэтому одинаково держится в карточке, в широкой карточке и в шапке поста. */
.b-cover {
  --c: var(--t-graphite);
  --b-ink: color-mix(in srgb, var(--c) 72%, var(--ink));
  --b-line: color-mix(in srgb, var(--b-ink) 48%, transparent);
  --b-soft: color-mix(in srgb, var(--b-ink) 22%, transparent);
  --b-s1: color-mix(in srgb, var(--b-ink) 20%, var(--surface));
  --b-s2: color-mix(in srgb, var(--b-ink) 38%, var(--surface));
  --b-s3: color-mix(in srgb, var(--b-ink) 60%, var(--surface));
  --b-bg: color-mix(in srgb, var(--c) 9%, var(--surface));
  position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--c) 16%, var(--line));
  background: var(--b-bg);
  transition: border-color .2s;
}
.b-cover::before, .b-cover::after {
  content: ""; position: absolute; pointer-events: none;
  transition: scale .6s var(--ease), rotate .9s var(--ease);
}
.b-card:hover .b-cover { border-color: color-mix(in srgb, var(--c) 36%, var(--line)); }
.b-card:hover .b-cover::before { scale: 1.035; }

/* default — точечная сетка и плитка знака */
.b-cover[data-cover="default"] { --c: var(--accent); }
.b-cover[data-cover="default"]::before { inset: 0; background: radial-gradient(circle, var(--b-soft) 0 1px, transparent 1.6px) 0 0 / 3.2cqi 3.2cqi; }
.b-cover[data-cover="default"]::after {
  width: 22cqi; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; border-radius: 28%;
  background: radial-gradient(120% 120% at 20% 10%, var(--accent), var(--accent-hover)); box-shadow: var(--shadow-3);
}

/* doc — лист с заголовком, строками и кареткой соседа */
.b-cover[data-cover="doc"] { --c: var(--t-sky); }
.b-cover[data-cover="doc"]::before {
  left: 19%; right: 19%; top: 13%; bottom: -6%;
  border-radius: 1.4cqi 1.4cqi 0 0;
  background:
    linear-gradient(var(--b-ink), var(--b-ink)) 20.8% 12.7% / 52% 5.5% no-repeat,
    linear-gradient(var(--b-s2), var(--b-s2)) 14.3% 22.7% / 30% 3% no-repeat,
    repeating-linear-gradient(to bottom, var(--b-s1) 0 1.1cqi, transparent 1.1cqi 3.3cqi) 38.5% 53% / 74% 36% no-repeat,
    linear-gradient(var(--b-s1), var(--b-s1)) 18.5% 91% / 46% 2.2% no-repeat,
    var(--surface);
  box-shadow: var(--shadow-2);
}
.b-cover[data-cover="doc"]::after {
  left: 57%; top: 45%; width: 10cqi; height: 7.5cqi; border-radius: 0 .6cqi .6cqi 0;
  background:
    linear-gradient(var(--t-rose), var(--t-rose)) 0 0 / 100% 2.6cqi no-repeat,
    linear-gradient(var(--t-rose), var(--t-rose)) 0 0 / .45cqi 100% no-repeat;
}

/* vault — циферблат сейфа: риски по кругу и ручка, которая поворачивается */
.b-cover[data-cover="vault"] { --c: var(--t-teal); }
.b-cover[data-cover="vault"]::before {
  width: 42cqi; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--surface) 0 76%, transparent calc(76% + .5px) 90%, var(--surface) calc(90% + .5px)),
    repeating-conic-gradient(var(--b-ink) 0 1.2deg, transparent 1.2deg 12deg),
    var(--surface);
  box-shadow: 0 0 0 1px var(--b-soft), var(--shadow-2);
}
.b-cover[data-cover="vault"]::after {
  width: 20cqi; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; rotate: -32deg; border-radius: 50%;
  background:
    linear-gradient(var(--b-ink), var(--b-ink)) 50% 10% / 1cqi 32% no-repeat,
    radial-gradient(circle closest-side, var(--b-s1) 0 26%, transparent calc(26% + .5px)),
    color-mix(in srgb, var(--c) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--b-soft), var(--shadow-1);
}
.b-card:hover .b-cover[data-cover="vault"]::after { rotate: 58deg; }

/* price — пять ступеней тарифов и крупный знак */
.b-cover[data-cover="price"] { --c: var(--t-ochre); }
.b-cover[data-cover="price"]::before {
  left: 9%; width: 46%; top: 20%; bottom: 18%;
  background:
    linear-gradient(var(--b-line), var(--b-line)) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--b-s1), var(--b-s1)) 0% 100% / 16% 20% no-repeat,
    linear-gradient(var(--b-s2), var(--b-s2)) 25% 100% / 16% 39% no-repeat,
    linear-gradient(var(--b-s2), var(--b-s2)) 50% 100% / 16% 58% no-repeat,
    linear-gradient(var(--b-s3), var(--b-s3)) 75% 100% / 16% 78% no-repeat,
    linear-gradient(var(--b-ink), var(--b-ink)) 100% 100% / 16% 98% no-repeat;
}
.b-cover[data-cover="price"]::after {
  content: "$"; right: 11%; top: 50%; translate: 0 -50%;
  font: 700 34cqi/1 var(--sans); letter-spacing: -0.04em; color: var(--b-ink);
}

/* graph — узлы и рёбра, как вид «Связи» у документов */
.b-cover[data-cover="graph"] { --c: var(--t-indigo); background: radial-gradient(circle, var(--b-soft) 0 1px, transparent 1.6px) 0 0 / 4cqi 4cqi, var(--b-bg); }
.b-cover[data-cover="graph"]::before {
  inset: 0;
  background:
    radial-gradient(circle at 42% 56%, var(--c) 0 2.4cqi, var(--surface) calc(2.4cqi + .6px) 3.3cqi, var(--b-line) calc(3.3cqi + .5px) calc(3.3cqi + 1.5px), transparent calc(3.3cqi + 2px)),
    radial-gradient(circle at 16% 30%, var(--t-rose) 0 1.5cqi, var(--surface) calc(1.5cqi + .6px) 2.2cqi, transparent calc(2.2cqi + .6px)),
    radial-gradient(circle at 66% 24%, var(--b-ink) 0 1.5cqi, var(--surface) calc(1.5cqi + .6px) 2.2cqi, transparent calc(2.2cqi + .6px)),
    radial-gradient(circle at 84% 60%, var(--t-teal) 0 1.8cqi, var(--surface) calc(1.8cqi + .6px) 2.5cqi, transparent calc(2.5cqi + .6px)),
    radial-gradient(circle at 24% 80%, var(--b-ink) 0 1.3cqi, var(--surface) calc(1.3cqi + .6px) 2cqi, transparent calc(2cqi + .6px)),
    radial-gradient(circle at 62% 84%, var(--b-ink) 0 1.3cqi, var(--surface) calc(1.3cqi + .6px) 2cqi, transparent calc(2cqi + .6px)),
    linear-gradient(to top right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 21.62% 40.54% / 26% 26% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 55.26% 35.29% / 24% 32% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 80.49% 37.5% / 18% 36% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 72.41% 58.33% / 42% 4% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 29.27% 73.68% / 18% 24% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 52.5% 77.78% / 20% 28% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), var(--b-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .9px)) 79.49% 78.95% / 22% 24% no-repeat;
}

/* type — крупная типографика на линейках: база, строчные, прописные */
.b-cover[data-cover="type"] { --c: var(--t-plum); }
.b-cover[data-cover="type"]::before {
  inset: 0;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--b-ink) 9%, transparent) 0 1px, transparent 1px 6.25cqi);
}
.b-cover[data-cover="type"]::after {
  content: "Aa"; inset: 0; display: grid; place-items: center;
  font: 400 38cqi/1 var(--serif); letter-spacing: -0.02em; color: var(--b-ink);
  background:
    linear-gradient(var(--b-line), var(--b-line)) 0 calc(50% + .35em) / 100% 1px no-repeat,
    linear-gradient(var(--b-soft), var(--b-soft)) 0 calc(50% - .13em) / 100% 1px no-repeat,
    linear-gradient(var(--b-soft), var(--b-soft)) 0 calc(50% - .34em) / 100% 1px no-repeat;
}

/* log — журнал: линия времени, точки, номер выпуска и строки */
.b-cover[data-cover="log"] { --c: var(--t-sage); }
.b-cover[data-cover="log"]::before {
  left: 9%; right: 9%; top: 11%; bottom: -4%;
  background:
    radial-gradient(circle 1.9cqi, var(--c) 0 52%, var(--b-bg) calc(52% + .5px) 100%, transparent calc(100% + .5px)) 0 0 / 8% 18% repeat-y,
    linear-gradient(transparent 0 20%, var(--b-bg) 20% 30%, transparent 30%) 80.77% 0 / 22% 36% repeat-y,
    linear-gradient(transparent 0 38%, var(--b-s2) 38% 62%, transparent 62%) 13.79% 0 / 13% 18% repeat-y,
    linear-gradient(transparent 0 43%, var(--b-s1) 43% 57%, transparent 57%) 65.91% 0 / 56% 18% repeat-y,
    linear-gradient(var(--b-line), var(--b-line)) 4% 0 / 1.5px 100% no-repeat;
}
.b-cover[data-cover="log"]::after { left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, var(--b-bg)); }

/* ═══ Указатель /blog/ */
.b-index { padding-bottom: clamp(64px, 9vw, 112px); }
.b-hero { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.b-hero__title { text-wrap: balance; }
.b-hero__lead { margin-top: var(--sp-6); max-width: 560px; }

.b-filters { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: clamp(28px, 4vw, 40px); }
.b-filter {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-2);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.b-filter[data-cat]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--b-cat); flex: none; }
.b-filter:hover { background: var(--surface-2); border-color: var(--edge); color: var(--ink); }
.b-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.b-featured { padding-bottom: clamp(40px, 6vw, 72px); }
.b-featured:not(:has(.b-card)) { display: none; }
.b-featured .b-card__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.b-featured .b-card__meta { margin-bottom: 14px; }
.b-featured .b-card__excerpt { margin-top: 14px; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); -webkit-line-clamp: 4; }
.b-featured .b-cover { border-radius: var(--r-xl); }
@media (min-width: 881px) {
  .b-featured .b-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 56px); }
}

.b-featured:has(.b-card:not([hidden])) + .b-list::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: clamp(40px, 6vw, 72px); }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 56px) clamp(24px, 3vw, 32px); }
.b-grid:not(:has(.b-card)) { display: none; }
.b-empty { display: none; padding-block: var(--sp-9); text-align: center; color: var(--muted); }
.b-empty.is-on, .b-index:not(:has(.b-card)) .b-empty { display: block; }

@keyframes b-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.b-index.is-filtered .b-card { animation: b-in .4s var(--ease) both; }

.b-follow { margin-top: clamp(64px, 9vw, 112px); }
.b-follow__card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-7) var(--sp-9);
  padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); border: 1px solid var(--line);
  background: radial-gradient(90% 140% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface-2);
}
.b-follow__text { max-width: 560px; }
.b-follow__lead { margin-top: var(--sp-4); color: var(--muted); }
.b-follow__actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* ═══ Страница поста */
.b-post:not(:has(.b-more .b-card)) { padding-bottom: clamp(72px, 10vw, 128px); }
.b-article__head { max-width: calc(820px + 2 * var(--gutter)); padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 48px); text-align: center; }
.b-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4); font-size: 14px; }
.b-crumbs li { display: inline-flex; align-items: center; gap: var(--sp-4); }
.b-crumbs li + li::before { content: "/"; color: var(--faint); }
.b-crumbs a:not(.b-cat) { color: var(--muted); text-decoration: none; }
.b-crumbs a:not(.b-cat):hover { color: var(--ink); }
.b-article__title { margin-top: var(--sp-7); font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.b-article__excerpt { max-width: 640px; margin: 18px auto 0; text-wrap: pretty; }
.b-byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: var(--sp-7); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.b-byline__author { color: var(--ink); font-weight: 600; }
.b-article__cover { max-width: calc(1080px + 2 * var(--gutter)); }
.b-cover--hero { aspect-ratio: 2 / 1; border-radius: var(--r-xl); }

/* ── Длинный текст: колонка 680, 18/1.7 */
.b-prose {
  max-width: calc(680px + 2 * var(--gutter)); margin: clamp(40px, 6vw, 72px) auto 0; padding-inline: var(--gutter);
  font-size: 18px; line-height: 1.7; color: var(--ink-2); overflow-wrap: break-word;
}
.b-prose > * + * { margin-top: 1.15em; }
.b-prose h2 { margin-top: 2.1em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.b-prose h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 650; color: var(--ink); }
.b-prose :is(h2, h3) + * { margin-top: .55em; }
.b-prose :is(strong, b) { color: var(--ink); font-weight: 650; }
.b-prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); transition: text-decoration-color .15s; }
.b-prose a:hover { text-decoration-color: var(--accent); }
.b-prose :is(ul, ol) { padding-left: 1.35em; }
.b-prose li + li, .b-prose li > :is(ul, ol, p) { margin-top: .45em; }
.b-prose li::marker { color: var(--faint); }
.b-prose ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
.b-prose blockquote { padding: 2px 0 2px 22px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.1em; line-height: 1.6; }
.b-prose blockquote > * + * { margin-top: .8em; }
.b-prose blockquote :is(cite, footer) { display: block; font-size: 15px; font-style: normal; color: var(--muted); }
.b-prose code { padding: .12em .38em; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: .86em; }
.b-prose pre { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 14px/1.65 var(--mono); overflow-x: auto; tab-size: 2; }
.b-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.b-prose kbd {
  display: inline-flex; min-width: 24px; height: 24px; padding: 0 6px; align-items: center; justify-content: center; vertical-align: .1em;
  font: 500 13px/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
}
.b-prose :is(figure, .stage, .frame) { margin-top: 2em; }
.b-prose :is(figure, .stage, .frame) + * { margin-top: 2em; }
.b-prose figure > img, .b-prose > img { border-radius: var(--r-md); border: 1px solid var(--line); }
.b-prose figcaption { margin-top: var(--sp-5); font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.b-prose hr { height: 1px; border: 0; background: var(--line); margin-block: 2.6em; }
.b-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.b-prose :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.b-prose th { font-size: 14px; font-weight: 600; color: var(--ink); border-bottom-color: var(--line-strong); }
/* Широкая вставка (сцена интерфейса, схема) выходит за колонку текста. */
.b-prose .b-wide { position: relative; left: 50%; width: min(1000px, calc(100vw - 2 * var(--gutter))); translate: -50% 0; }

/* ── «Попробуйте Clusker» и «Читают также» */
.b-try { max-width: calc(760px + 2 * var(--gutter)); margin-top: clamp(56px, 8vw, 88px); }
.b-try__card {
  display: flex; align-items: center; gap: var(--sp-7); padding: 24px 28px; border-radius: var(--r-xl); border: 1px solid var(--line);
  background: radial-gradient(90% 160% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface-2);
}
.b-try__icon { flex: none; width: 44px; height: 44px; }
.b-try__text { flex: 1; min-width: 0; }
.b-try__lead { margin-top: var(--sp-2); font-size: 15px; color: var(--muted); }
.b-try__btn { flex: none; }

.b-more { margin-top: clamp(72px, 10vw, 128px); padding-block: clamp(56px, 8vw, 96px); background: var(--surface-2); }
.b-more:not(:has(.b-card)) { display: none; }
.b-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-6); margin-bottom: clamp(28px, 4vw, 40px); }

/* ── Ширины */
@media (max-width: 1040px) {
  .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .b-grid { grid-template-columns: minmax(0, 1fr); }
  .b-cover--hero { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
  .b-prose { font-size: 17px; }
  .b-prose table { display: block; overflow-x: auto; }
  .b-try__card { flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding: 22px; }
  .b-follow__actions, .b-follow__actions .btn { width: 100%; }
}