/* NZT Business Lab — deck (PDF) components.
   Печатные компоненты поверх deck-tokens.css. Порядок подключения:
   page-*.css → ../tokens/fonts.css → deck-tokens.css → deck.css.
   Всё непрозрачное: никакого backdrop-filter (в print он не работает).
   PDF: tools/deck-pdf.mjs (headless Chrome) или Ctrl+P → «фон: печатать». */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55;
  letter-spacing: .01em; counter-reset: sheetno;
}

/* ── Лист ────────────────────────────────────────────────────────────────── */
.sheet {
  position: relative; width: var(--sheet-w); height: var(--sheet-h); overflow: hidden;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  display: flex; flex-direction: column; break-after: page;
  background: var(--page); color: var(--ink-body);
  counter-increment: sheetno;
}
.sheet:last-child { break-after: auto; }

/* Экранное превью: серый «стол» + тень. На печать не влияет. */
@media screen {
  body { background: #1b1b20; padding: 12px 0; }
  .sheet { margin: 0 auto 14px; box-shadow: 0 0 0 1px #2c2c34, 0 8px 30px rgba(0,0,0,.5); }
}

/* ── Декор: статичная замена партиклам ──────────────────────────────────── */
.halo { position: absolute; inset: 0; pointer-events: none; }
/* Поле точек (bone/plum/amber) — фон-SVG, не нужно вставлять разметку */
.dots-field {
  position: absolute; inset: 0; pointer-events: none; background-size: cover; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 720'><g fill='%23ffffff'><circle cx='120' cy='90' r='1.4' opacity='.35'/><circle cx='340' cy='60' r='1' opacity='.22'/><circle cx='560' cy='120' r='1.6' opacity='.3'/><circle cx='800' cy='70' r='1.1' opacity='.25'/><circle cx='1030' cy='120' r='1.4' opacity='.3'/><circle cx='1190' cy='60' r='1' opacity='.2'/><circle cx='230' cy='260' r='1.2' opacity='.22'/><circle cx='90' cy='420' r='1.5' opacity='.3'/><circle cx='300' cy='560' r='1' opacity='.2'/><circle cx='700' cy='640' r='1.3' opacity='.26'/><circle cx='500' cy='400' r='1' opacity='.16'/><circle cx='940' cy='500' r='1.4' opacity='.28'/><circle cx='1180' cy='420' r='1.1' opacity='.22'/><circle cx='1240' cy='640' r='1.4' opacity='.3'/><circle cx='420' cy='680' r='1.1' opacity='.2'/></g><g fill='%238052ff'><circle cx='980' cy='200' r='1.8' opacity='.55'/><circle cx='1100' cy='300' r='1.4' opacity='.45'/><circle cx='880' cy='360' r='1.6' opacity='.4'/><circle cx='1210' cy='210' r='1.2' opacity='.4'/><circle cx='180' cy='170' r='1.4' opacity='.35'/><circle cx='640' cy='540' r='1.5' opacity='.35'/><circle cx='60' cy='620' r='1.6' opacity='.4'/></g><g fill='%23ffb829'><circle cx='1050' cy='430' r='1.6' opacity='.5'/><circle cx='760' cy='180' r='1.2' opacity='.4'/><circle cx='260' cy='660' r='1.4' opacity='.4'/><circle cx='1230' cy='530' r='1.1' opacity='.35'/></g></svg>");
}
.sheet--light .dots-field, .sheet--canvas .dots-field { opacity: .5; filter: invert(1) hue-rotate(180deg); }

/* ── Обвязка слайда ─────────────────────────────────────────────────────── */
.eyebrow { font-family: var(--font-display); font-weight: 400; font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.eyebrow b { color: var(--accent); font-weight: 400; }
.eyebrow-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--d-8); margin-bottom: var(--d-5); }

h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--t-h2); letter-spacing: -0.015em; line-height: 1.16; color: var(--ink-hi); margin-bottom: 3.5mm; text-wrap: balance; position: relative; }
h2 em { font-style: normal; color: var(--accent); }
h2::before { content: ''; display: block; width: 24mm; height: 1.2mm; border-radius: 1mm; margin-bottom: var(--d-4);
             background: linear-gradient(90deg, var(--plum), var(--amber)); }
.lede { position: relative; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-body); margin-bottom: var(--d-5); }
strong { color: var(--ink-hi); }

.body-grow { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.center { margin-top: auto; margin-bottom: auto; }

/* Фолио: автонумерация CSS-счётчиком (у прошлых деков номера пустовали).
   Разметка: <div class="folio"><span class="brand">…spark…NZT BusinessLab</span>
   <span class="no" data-total="09"></span></div> */
.folio { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 6.5mm;
         display: flex; justify-content: space-between; align-items: center;
         border-top: 1px solid var(--line); padding-top: 2.4mm;
         font-size: var(--t-foot); color: var(--ink-mute); letter-spacing: .04em; }
.folio .brand { display: flex; align-items: center; gap: 2mm; }
.folio .no { font-family: var(--font-display); font-weight: 400; font-size: var(--t-foot); }
.folio .no::before { content: counter(sheetno, decimal-leading-zero); }
.folio .no[data-total]::after { content: " / " attr(data-total); color: var(--ink-mute); }
.spark { display: inline-block; vertical-align: -0.18em; }

/* ── Карточки и сетки ───────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: 4px; padding: 7mm 7.5mm; background: var(--fill-card); break-inside: avoid; }
.card--glass { background: var(--card-glass); border-color: rgba(128,82,255,.35); }
.card--tint { background: var(--tint-plum); border-color: rgba(128,82,255,.25); }
.card--amber { border-left: 2px solid var(--amber); }
.card h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); letter-spacing: .01em; color: var(--ink-hi); margin-bottom: 2.6mm; }
.card .k { font-size: var(--t-card); line-height: 1.55; color: var(--ink-mute); hyphens: manual; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--d-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4.5mm; }

/* Плитка-модуль (компактнее карточки) */
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-4); }
.mod { border: 1px solid var(--line); border-radius: 4px; padding: 5mm 5.5mm; background: var(--fill-card); break-inside: avoid; }
.mod .ic { width: 8.5mm; height: 8.5mm; margin-bottom: 2.4mm; }
.mod h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); line-height: 1.3; color: var(--ink-hi); margin-bottom: 1.8mm; }
.mod p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-mute); margin: 0; hyphens: manual; }

/* ── KPI / статы ────────────────────────────────────────────────────────── */
.kpi .v { font-family: var(--font-display); font-weight: 300; font-size: var(--t-kpi); letter-spacing: -0.01em; color: var(--ink-hi); line-height: 1.05; }
.kpi .v em { font-style: normal; color: var(--accent); }
.kpi .l { font-size: var(--t-small); color: var(--ink-mute); margin-top: 1.6mm; line-height: 1.4; }
.kpi .delta { font-size: var(--t-small); font-weight: 700; }
.kpi .delta--up { color: #15846e; }
.kpi .delta--down { color: #c2453a; }
.kpi-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--d-8); }
.kpi-strip .kpi { border-left: 1px solid var(--line); padding-left: var(--d-5); }
.kpi-strip .kpi:first-child { border-left: 0; padding-left: 0; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 6mm; }
.mini-kpis .v { font-size: calc(var(--t-kpi) * .72); }

/* ── Списки, шаги, лента процесса ───────────────────────────────────────── */
/* Чек-список: галочка CSS-маской — без SVG в каждом li */
.points { list-style: none; margin: 0; }
.points li { position: relative; padding-left: 8.5mm; font-size: 11pt; line-height: 1.5; color: var(--ink-body); margin-bottom: 2.8mm; }
.points li::before {
  content: ''; position: absolute; left: 0; top: 1mm; width: 5.5mm; height: 5.5mm;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center / contain no-repeat;
}
li::marker { color: var(--plum); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--d-5); position: relative; }
.steps .step { border: 1px solid var(--line); border-radius: 4px; padding: 6mm 6mm 6.5mm; background: var(--fill-card); display: flex; flex-direction: column; break-inside: avoid; }
.steps .num { font-family: var(--font-display); font-weight: 300; font-size: var(--t-num); color: var(--plum); line-height: 1; }
.steps h4 { font-family: var(--font-display); font-weight: 400; font-size: 11pt; color: var(--ink-hi); margin: 3.6mm 0 2.2mm; }
.steps p { font-size: 10pt; line-height: 1.5; color: var(--ink-mute); margin: 0 0 3mm; hyphens: manual; }
.steps .art { margin-top: auto; border-top: 1px solid var(--line); padding-top: 2.4mm; font-size: var(--t-small); line-height: 1.45; color: var(--ink-body); }
.steps .art b { color: var(--accent-amber); font-weight: 700; }

/* Лента процесса: шаги со стрелками */
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--d-5); }
.flow .fstep { position: relative; border: 1px solid var(--line); border-radius: 4px; background: var(--fill-card); padding: 4mm 4.5mm; font-size: var(--t-small); color: var(--ink-body); break-inside: avoid; }
.flow .fstep b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--t-small); color: var(--ink-hi); margin-bottom: 1.2mm; }
.flow .fstep:not(:last-child)::after { content: '→'; position: absolute; right: calc(-1 * var(--d-5) + .6mm); top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 10pt; }

/* Сетка стадий (3×N компактных плиток с крупной цифрой) */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d-4); }
.stage { border: 1px solid var(--line); border-radius: 4px; background: var(--fill-card); padding: 4.2mm 4.6mm; break-inside: avoid; }
.stage b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 14pt; color: var(--plum); line-height: 1; margin-bottom: 1.8mm; }
.stage span { font-size: 10pt; color: var(--ink-body); }

/* ── Акценты ────────────────────────────────────────────────────────────── */
.band { position: relative; display: flex; align-items: center; gap: var(--d-5); border: 1px solid rgba(255,184,41,.4); border-left: 2px solid var(--amber); border-radius: 4px; background: var(--tint-amber); padding: 4mm 6mm; font-size: var(--t-card); color: var(--ink-body); break-inside: avoid; }
.band b { color: var(--ink-hi); }

.chips { display: flex; flex-wrap: wrap; gap: 1.8mm; }
.chip { border: 1px solid var(--line); border-radius: 3px; background: var(--fill-card); padding: 1.5mm 2.6mm; font-size: 8.5pt; color: var(--ink-body); }
.cap { font-family: var(--font-display); font-weight: 400; font-size: var(--t-foot); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2.4mm; }

.badge { display: inline-block; font-size: 7.5pt; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-amber); border: 1px solid rgba(255,184,41,.45); background: var(--tint-amber); border-radius: 2px; padding: .6mm 1.8mm; }
.tbd { display: inline-block; background: var(--tint-amber); color: var(--accent-amber); border: 1px solid rgba(255,184,41,.5); border-radius: 2px; padding: 0 1.6mm; font-size: 8.5pt; }

/* Цитата */
.quote { position: relative; border-left: 2px solid var(--plum); padding: 2mm 0 2mm 7mm; break-inside: avoid; }
.quote p { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--t-lede) + 1.5pt); line-height: 1.5; color: var(--ink-hi); margin: 0 0 2.4mm; }
.quote cite { font-style: normal; font-size: var(--t-small); color: var(--ink-mute); }
.quote cite b { color: var(--ink-body); font-weight: 700; }

/* ── Таблица печатная ───────────────────────────────────────────────────── */
table.table { width: 100%; border-collapse: collapse; font-size: var(--t-card); color: var(--ink-body); }
table.table thead { display: table-header-group; /* повтор шапки на разрыве */ }
table.table th { font-family: var(--font-display); font-weight: 400; font-size: var(--t-foot); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); text-align: left; padding: 2.2mm 3mm; border-bottom: 1px solid var(--line-strong); }
table.table td { padding: 2.4mm 3mm; border-bottom: 1px solid var(--line); vertical-align: top; }
table.table tr { break-inside: avoid; }
table.table td b { color: var(--ink-hi); }

/* ── Иконко-слот (контур plum + янтарная точка) ─────────────────────────── */
.ic { width: 10.5mm; height: 10.5mm; color: var(--plum); margin-bottom: 3.2mm; }
.ic svg { width: 100%; height: 100%; display: block; }
.ic--sm { width: 8mm; height: 8mm; }

/* Разворот в две колонки с линией */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; }
.split > div { padding: 4mm 9mm 4mm 0; display: flex; flex-direction: column; min-width: 0; }
.split > div + div { border-left: 1px solid var(--line-strong); padding-left: 9mm; padding-right: 0; }

/* Сноски/источники */
.src { position: relative; border-top: 1px solid var(--line); padding-top: 3mm; }
.src .note { font-size: 8.5pt; color: var(--ink-mute); margin-top: 1.6mm; }

/* ── Типы слайдов ───────────────────────────────────────────────────────── */
/* Обложка */
.sheet--cover { justify-content: space-between; }
.cover-brand { position: relative; display: flex; align-items: center; gap: var(--d-4); }
.cover-title { font-family: var(--font-display); font-weight: 300; font-size: var(--t-cover); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink-hi); margin: 5mm 0 7mm; position: relative; max-width: 85%; }
.cover-title em { font-style: normal; color: var(--accent); }
.cover-sub { position: relative; font-size: calc(var(--t-lede) + 1pt); line-height: 1.62; color: var(--ink-body); max-width: 70%; }
.cover-facts { position: relative; margin-top: var(--d-6); font-size: var(--t-card); color: var(--ink-mute); letter-spacing: .02em; }
.cover-facts b { color: var(--ink-body); font-weight: 700; }
.cover-foot { position: relative; border-top: 1px solid var(--line-strong); padding-top: 3.5mm; display: flex; justify-content: space-between; align-items: baseline; gap: var(--d-8); font-size: var(--t-small); color: var(--ink-mute); }
.cover-foot b { color: var(--ink-hi); font-weight: 700; }
.cover-grid { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--d-14); align-items: center; }
.cover-figure { display: flex; justify-content: center; }

/* Дивайдер раздела */
.sheet--divider { justify-content: center; }
.divider-num { font-family: var(--font-display); font-weight: 300; font-size: var(--t-divider); line-height: 1; color: var(--accent); position: relative; }
.divider-num::after { content: ''; display: block; width: 24mm; height: 1.2mm; border-radius: 1mm; margin: 6mm 0;
                      background: linear-gradient(90deg, var(--plum), var(--amber)); }
.divider-title { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--t-h2) + 4pt); letter-spacing: -0.015em; line-height: 1.15; color: var(--ink-hi); max-width: 75%; position: relative; }
.divider-sub { margin-top: 4mm; font-size: var(--t-lede); color: var(--ink-mute); max-width: 60%; position: relative; }

/* Финал: контакты */
.sheet--closing { justify-content: center; }
.closing-logo { position: relative; margin-bottom: 10mm; }
.closing-title { font-family: var(--font-display); font-weight: 300; font-size: calc(var(--t-cover) - 6pt); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-hi); margin-bottom: 7mm; position: relative; }
.closing-title em { font-style: normal; color: var(--accent); }
.closing-contacts { position: relative; display: flex; gap: var(--d-10); flex-wrap: wrap; font-size: var(--t-lede); color: var(--ink-body); }
.closing-contacts b { color: var(--ink-hi); }
.closing-contacts a { color: var(--accent); text-decoration: none; }