/* ============================================================
   Affiliate Platform — дизайн-система
   Кольори взяті з теми night (Sorro Dashboards) — див. tokens.css.
   Імена токенів наші, значення макетні: завдяки цьому перефарбування
   робиться підміною цієї секції, без правок у 260 класах і в розмітці.
   ============================================================ */

@import url('tokens.css');
@import url('fonts.css');

/* ---------- 1. Токени ---------- */
:root {
  /* база — шкали night (сирі, а не його семантичні імена: --surface-raised
     і --surface-sunken у макеті означають інше, ніж у нас) */
  --bg: var(--grey-950);
  --card: var(--grey-880);
  --card2: var(--grey-860);
  --border: var(--grey-720);
  --text: var(--ink-200);
  --text2: var(--ink-500);
  --text3: var(--ink-650);
  --accent: var(--blue-900);
  --accent2: var(--blue-700);
  --green: var(--green-500);
  --red: var(--red-500);
  --orange: var(--amber-650);
  --purple: var(--violet-500);

  /* семантика поверхонь */
  --surface-page: var(--bg);
  --surface-raised: var(--card);
  --surface-sunken: var(--card2);
  --surface-line: var(--border);
  --surface-line-strong: var(--grey-560);

  /* семантика тексту */
  --ink: var(--text);
  --ink-muted: var(--text2);
  --ink-faint: var(--text3);

  /* статуси — зарезервовані, не використовуються як «колір серії».
     У night підкладки щільні, а не напівпрозорі — читаються чіткіше. */
  --status-good: var(--green-400);
  --status-good-bg: var(--green-bg);
  --status-warning: var(--amber-650);
  --status-warning-bg: var(--amber-bg);
  --status-critical: var(--red-400);
  --status-critical-bg: var(--red-bg);
  --status-neutral: var(--ink-400);
  --status-neutral-bg: var(--grey-860);

  /* tier — метафора металів; кроки підібрані валідатором під темний фон
     (normal-vision ΔE 16.2, CVD ΔE 14.9) */
  --tier-platinum: #cfd8e3;
  --tier-gold: #f5b800;
  --tier-silver: #94a0b0;
  --tier-bronze: #cd7f32;
  --tier-inactive: #4b5563;

  /* типографіка night: Geist для інтерфейсу, Golos Text для великих чисел.
     Кеглі в макеті на піврозмірних кроках — перенесені як є, без округлення. */
  --font: var(--font-ui);
  --fs-display: var(--text-figure-lg);   /* 34px — велике число */
  --fs-value: var(--text-figure);        /* 30px — число KPI-плитки */
  --fs-value-sm: var(--text-title);      /* 16px */
  --fs-body: var(--text-base);           /* 13.5px — робочий кегль */
  --fs-label: var(--text-xs);            /* 12.5px */
  --fs-micro: var(--text-2xs);           /* 12px */

  /* ритм */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  /* радіуси night: --radius-card для карток, --radius-xl для кнопок та інпутів */
  --radius: var(--radius-card);
  --radius-sm: var(--radius-xl);
}

/* ---------- 2. База ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }

/* Фокус видимий скрізь — на дашборді багато клікабельних карток */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.u-numeric { font-variant-numeric: tabular-nums; }
.u-hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Шапка ---------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.page-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.page-title b { color: var(--accent2); font-weight: 700; }

.page-sub {
  font-size: var(--fs-label);
  color: var(--ink-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.page-sub .dot { color: var(--ink-faint); }

.head-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* перемикачі (валюта, тема) */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.switch-label {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: var(--sp-1);
}
.switch button {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- 4. Фільтри ---------- */
.filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: flex-end;
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.f-group { display: flex; flex-direction: column; gap: 3px; }
.f-label {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.f-control {
  background: var(--surface-page);
  color: var(--ink);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: var(--fs-body);
  font-family: inherit;
  min-width: 130px;
  transition: border-color .15s;
}
.f-control:hover, .f-control:focus { border-color: var(--accent); outline: none; }
.f-spacer { flex: 1; }

.btn {
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: var(--fs-label);
  font-weight: 600;
  border: 1px solid var(--surface-line);
  background: var(--surface-page);
  color: var(--ink-muted);
  transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* ---------- 5. Секція ---------- */
.section { margin-bottom: var(--sp-5); }

.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.section-title {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--surface-line);
}
.section-note {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--status-neutral-bg);
  color: var(--ink-muted);
  white-space: nowrap;
}
.badge-accent { background: rgba(99, 102, 241, .14); color: var(--accent2); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning); }

/* ---------- 6. Смуга ризиків ---------- */
.risk-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.risk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--status-neutral);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  transition: border-color .15s, background .15s;
}
.risk:hover { background: var(--surface-sunken); }
.risk[data-severity="warning"] { border-left-color: var(--status-warning); }
.risk[data-severity="critical"] { border-left-color: var(--status-critical); }

.risk-value {
  font-size: var(--fs-value-sm);
  font-weight: 700;
  line-height: 1;
  min-width: 3.2ch;
}
.risk-body { flex: 1; min-width: 0; }
.risk-label {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
}
.risk-hint {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.risk-chevron {
  color: var(--ink-faint);
  font-size: .7rem;
  transition: transform .2s;
}
.risk[aria-expanded="true"] .risk-chevron { transform: rotate(90deg); }

.risk-detail {
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.risk-detail-item { display: flex; align-items: baseline; gap: var(--sp-2); }
.risk-detail-item b { font-size: var(--fs-value-sm); font-weight: 700; }
.risk-detail-item span { font-size: var(--fs-label); color: var(--ink-muted); }

/* ---------- 7. Картки-показники ---------- */
.stat-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat-grid-money { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.stat {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.stat-label {
  font-size: var(--fs-label);
  color: var(--ink-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Значення носить ink-токен, а не «колір метрики»: колір лишається
   каналом статусу, тому ієрархію тримають розмір і позиція. */
.stat-value {
  font-size: var(--fs-value);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}
.stat-value .unit {
  font-size: .6em;
  font-weight: 600;
  color: var(--ink-muted);
  margin-left: 2px;
}

.stat-money .stat-value { font-size: var(--fs-display); }
.stat-money { padding: var(--sp-4); }

/* Сетлмент — маржа відділу, єдина картка з акцентною рамкою */
.stat-emphasis { border-color: var(--accent); }

.stat-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  margin-top: auto;
  padding-top: var(--sp-1);
}
.stat-foot .sep { color: var(--ink-faint); }
.stat-foot b { color: var(--ink); font-weight: 600; }

/* дельта */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--status-neutral-bg);
  color: var(--ink-muted);
}
.delta[data-tone="good"] { background: var(--status-good-bg); color: var(--status-good); }
.delta[data-tone="bad"] { background: var(--status-critical-bg); color: var(--status-critical); }

/* статус під значенням */
.stat-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.stat-status[data-tone="warning"] { color: var(--status-warning); }
.stat-status[data-tone="good"] { color: var(--status-good); }
.stat-status .ico { font-size: .85em; }

/* метр — трек світліший крок того самого кольору, не сірий */
.meter {
  height: 4px;
  border-radius: 2px;
  background: var(--status-neutral-bg);
  overflow: hidden;
  margin-top: var(--sp-1);
}
.meter-fill { height: 100%; border-radius: 2px; background: var(--status-good); }
.meter-fill[data-tone="warning"] { background: var(--status-warning); }

/* pending — не мімікрує під дані */
.stat-pending {
  border-style: dashed;
  background: transparent;
}
.stat-pending .stat-value { color: var(--ink-faint); font-size: var(--fs-value-sm); }
.stat-pending .stat-label { color: var(--ink-faint); }

/* ---------- 8. Tier ---------- */
.tier-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.tier-head-title { font-size: var(--fs-body); font-weight: 600; }
.tier-head-note { font-size: var(--fs-micro); color: var(--ink-faint); }

/* 2px розділювач кольором поверхні — сегменти читаються завдяки зазору,
   а не обведенню */
.tier-bar {
  display: flex;
  gap: 2px;
  height: 26px;
  margin-bottom: var(--sp-3);
}
.tier-seg {
  position: relative;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  transition: filter .15s;
}
.tier-seg:hover { filter: brightness(1.12); }
/* всі заливки tier світлі — підпис на них завжди темний */
.tier-seg-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #10141c;
  padding: 0 var(--sp-1);
  white-space: nowrap;
}

.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}
.tier-legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-label);
}
.tier-swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex: none;
  align-self: center;
}
.tier-legend-name { color: var(--ink); font-weight: 600; }
.tier-legend-val { color: var(--ink-muted); }
.tier-legend-count { color: var(--ink-faint); }

.tier-inactive {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--surface-line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
.tier-inactive b { color: var(--ink); }

/* ---------- 9. Лідери ---------- */
.leaders-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.lead-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.lead-title { font-size: var(--fs-body); font-weight: 600; }
.lead-sub {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}

.lead-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--radius-sm);
  border-top: 1px solid var(--surface-line);
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  color: inherit;
  transition: background .12s;
}
.lead-row:hover { background: var(--surface-sunken); }
.lead-row:first-of-type { border-top: 0; }

.lead-rank {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
}
.lead-rank[data-top="1"] { color: var(--tier-gold); }

.lead-body { min-width: 0; }
.lead-name {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-meta {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

.lead-value {
  font-size: var(--fs-label);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lead-track {
  grid-column: 2 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-sunken);
  overflow: hidden;
  margin-top: 3px;
}
.lead-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
.lead-fill[data-tone="good"] { background: var(--status-good); }
.lead-fill[data-tone="score"] { background: var(--purple); }

/* ---------- 10. Вкладки розділу ---------- */
.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--surface-line);
  margin-bottom: var(--sp-3);
}
.tab {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 9px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab { text-decoration: none; display: inline-block; }
.tab:hover:not([disabled]) { color: var(--ink); }
.tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab[disabled] {
  color: var(--ink-faint);
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.tab-todo {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--status-neutral-bg);
  color: var(--ink-faint);
}

/* ---------- 11. Тултип ---------- */
#tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .12s;
  background: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-label);
  line-height: 1.5;
  max-width: 280px;
  box-shadow: var(--shadow-tooltip);
}
#tooltip.on { opacity: 1; transform: translateY(0); }

/* ---------- 12. Зміст (сторінка-хаб зі списком вкладок) ---------- */
.toc {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.toc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
a.toc-item:hover { border-color: var(--accent); background: var(--surface-sunken); }

.toc-item.is-todo {
  border-style: dashed;
  background: transparent;
}
.toc-item.is-todo .toc-name { color: var(--ink-faint); }

.toc-name { font-size: var(--fs-body); font-weight: 600; }
.toc-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}
/* явная позиция, иначе auto-placement роняет бейдж на свою строку во всю ширину */
.toc-state {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.toc-state[data-state="done"] {
  background: var(--status-good-bg);
  color: var(--status-good);
}

/* ---------- 13. Підвал ---------- */
.page-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--surface-line);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- 14. Адаптив ---------- */
@media (max-width: 900px) {
  body { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
  :root { --fs-display: 1.6rem; --fs-value: 1.3rem; }
  .stat-grid, .stat-grid-money { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .f-control { min-width: 110px; }
  /* довга підказка секції розпирала сторінку по горизонталі */
  .section-note { display: none; }
}

@media (max-width: 560px) {
  .stat-grid, .stat-grid-money, .leaders-grid, .risk-strip { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .tier-bar { height: 32px; }
}

/* ---------- 15. Доступність середовища ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .stat, .tier-card, .lead-card, .risk { border: 1px solid CanvasText; }
  .tier-seg { forced-color-adjust: none; }
}

/* ============================================================
   Компоненти, додані вкладкою «Менеджери».
   Нижче — тільки нові класи; токени і секції 1-15 не чіпаються.
   ============================================================ */

/* ---------- 16. Смуга розподілу (частка кожної групи) ---------- */
.share-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.share-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.share-head-title { font-size: var(--fs-body); font-weight: 600; }
.share-head-total {
  font-size: var(--fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.share-head-note { font-size: var(--fs-micro); color: var(--ink-faint); }

.share-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 52px 96px;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 0;
}

.share-name {
  font-size: var(--fs-label);
  color: var(--ink-muted);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-row[data-unassigned="true"] .share-name { color: var(--status-warning); }

.share-track {
  height: 14px;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
  min-width: 0;
}
/* Заливка одним кольором: градієнт у старій версії кодував нуль,
   а ширина смуги вже несе величину. */
.share-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  min-width: 2px;              /* group із ₹0 має лишатись видимою */
}
.share-row[data-unassigned="true"] .share-fill { background: var(--status-warning); }
.share-row[data-empty="true"] .share-fill { background: var(--surface-line-strong); }

.share-pct,
.share-value {
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.share-pct { color: var(--ink-muted); }
.share-value { font-weight: 600; }
.share-row[data-empty="true"] .share-value { color: var(--ink-faint); font-weight: 400; }

/* ---------- 17. Матриця (щільна таблиця з групами колонок) ---------- */
.table-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--surface-line);
}
.table-title { font-size: var(--fs-body); font-weight: 600; }
.table-note {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-left: auto;
}

.table-scroll { overflow-x: auto; }

table.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
}

table.matrix th,
table.matrix td {
  vertical-align: top;
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--surface-line);
}
table.matrix th:first-child,
table.matrix td:first-child { text-align: left; }

/* Ім'я лишається на місці при горизонтальному скролі — інакше на вузькому
   екрані незрозуміло, чий це рядок. Фон непрозорий, бо під ним їдуть колонки. */
table.matrix th:first-child,
table.matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-raised);
}
.matrix-group th:first-child { background: var(--surface-sunken); }
table.matrix tbody tr[data-clickable="true"]:hover td:first-child,
table.matrix tbody tr[data-open="true"] td:first-child { background: var(--surface-sunken); }

/* верхній рядок шапки — смислові групи, бо 13 колонок поспіль не читаються */
.matrix-group th {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--surface-line);
  padding-top: 5px;
  padding-bottom: 5px;
}
.matrix-group th + th {
  text-align: center;
  border-left: 1px solid var(--surface-line);
}

.matrix-cols th {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-raised);
}

.matrix-sort {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.matrix-sort:hover { color: var(--ink); }
.matrix-sort .arrow { color: var(--ink-faint); font-size: .9em; }
.matrix-sort[aria-sort] { color: var(--ink); }
.matrix-sort[aria-sort] .arrow { color: var(--accent2); }

table.matrix tbody tr { transition: background .12s; }
table.matrix tbody tr[data-clickable="true"] { cursor: pointer; }
table.matrix tbody tr[data-clickable="true"]:hover,
table.matrix tbody tr[data-open="true"] { background: var(--surface-sunken); }
table.matrix tbody tr:last-child td { border-bottom: 0; }

.m-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.m-name-text { font-weight: 600; }
.m-name-sub { font-size: var(--fs-micro); color: var(--ink-faint); font-weight: 400; }
.m-chevron { color: var(--ink-faint); font-size: .8rem; margin-left: auto; padding-left: var(--sp-2); }

/* «Не заведено в CRM» — псевдогрупа, а не менеджер: пунктир замість opacity,
   щоб рядок читався як інший тип запису, а не як пригашені дані. */
table.matrix tbody tr[data-unassigned="true"] td { border-bottom-style: dashed; }
table.matrix tbody tr[data-unassigned="true"] .m-name-text { color: var(--status-warning); }

.m-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.m-val[data-muted="true"] { color: var(--ink-faint); font-weight: 400; }
.m-sub {
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.m-sub[data-tone="good"] { color: var(--status-good); }
.m-sub[data-tone="warning"] { color: var(--status-warning); }
.m-sub[data-tone="bad"] { color: var(--status-critical); }

.m-flag {
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

/* ---------- 18. Панель менеджера (drill-down) ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, .6);
  z-index: 40;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  z-index: 41;
  background: var(--surface-page);
  border-left: 1px solid var(--surface-line);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--surface-line);
}
.drawer-crumb { font-size: var(--fs-micro); color: var(--ink-faint); }
.drawer-title { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.drawer-meta { font-size: var(--fs-micro); color: var(--ink-muted); margin-top: 2px; }

.drawer-close {
  margin-left: auto;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
  flex: none;
}
.drawer-close:hover { color: var(--ink); border-color: var(--surface-line-strong); }

.drawer-body { overflow-y: auto; padding: var(--sp-4); }

.drawer-kpis {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: var(--sp-4);
}
.drawer-kpi {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}
.drawer-kpi .k-label { font-size: var(--fs-micro); color: var(--ink-muted); font-weight: 600; }
.drawer-kpi .k-value {
  font-size: var(--fs-value-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.drawer-kpi .k-foot {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  flex-wrap: wrap;
}

.drawer-foot-note {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}

/* ---------- 19. Адаптив нових компонентів ---------- */
@media (max-width: 900px) {
  .share-row { grid-template-columns: 132px minmax(0, 1fr) 44px 78px; }
  .table-note { display: none; }
}

@media (max-width: 560px) {
  /* на телефоні підпис іде окремим рядком — інакше 96px колонки не лишається */
  .share-row {
    grid-template-columns: minmax(0, 1fr) 44px 78px;
    grid-template-areas: "name name name" "track pct value";
    row-gap: 2px;
    padding: 5px 0;
  }
  .share-name { grid-area: name; text-align: left; }
  .share-track { grid-area: track; }
  .share-pct { grid-area: pct; }
  .share-value { grid-area: value; }
  .drawer { width: 100%; }
}

@media (forced-colors: active) {
  .share-card, .table-card, .drawer-kpi { border: 1px solid CanvasText; }
  .share-fill { forced-color-adjust: none; }
}

/* ============================================================
   Компоненти, додані вкладкою «Афіліати».
   Нижче — тільки нові класи; токени і секції 1-19 не чіпаються.
   ============================================================ */

/* ---------- 20. Смуга підсумку ---------- */
/* Ті самі числа є на «Дашборді» великими картками. Тут вони — контекст
   до списку («що саме я зараз бачу»), тому мають менший вагу, ніж таблиця. */
.summary {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.summary-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.summary-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
}
.summary-note { font-size: var(--fs-micro); color: var(--ink-faint); }

.summary-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--sp-2) var(--sp-4);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--surface-line);
}
.summary-item:first-child { padding-left: 0; border-left: 0; }

.s-label { font-size: var(--fs-micro); color: var(--ink-muted); font-weight: 600; }
.s-value {
  font-size: var(--fs-value-sm);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.s-foot {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

/* ---------- 21. Сегментний перемикач вигляду ---------- */
/* Не другий ряд вкладок: вкладка відповідає на «який розділ», сегмент —
   на «як дивитись цей самий розділ». Різна форма, щоб не читались як рівні. */
.segment {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.seg {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.seg:hover { color: var(--ink); }
.seg[aria-selected="true"] { background: var(--accent); color: #fff; }

/* ---------- 22. Пошук у шапці таблиці ---------- */
.table-search { margin-left: auto; }
.table-search .f-control {
  min-width: 240px;
  padding: 5px 9px;
  font-size: var(--fs-label);
}
.table-head .table-search + .table-note { margin-left: 0; }

/* ---------- 23. Липка шапка і липка перша колонка ---------- */
/* 16 колонок не влазять у жоден екран, а без імені зліва рядок на другому
   екрані прокрутки не впізнати. Тому контейнер має власну висоту й скрол. */
.table-scroll[data-tall="true"] {
  max-height: min(72vh, 760px);
  overflow-y: auto;
}

table.matrix-sticky { border-collapse: separate; border-spacing: 0; }

table.matrix-sticky th,
table.matrix-sticky td { border-bottom: 1px solid var(--surface-line); }

table.matrix-sticky thead th { position: sticky; z-index: 2; }
table.matrix-sticky .matrix-group th { top: 0; height: 25px; }
table.matrix-sticky .matrix-cols th { top: 25px; }

/* фон рядка живе на tr, перша клітинка його успадковує — інакше при
   горизонтальному скролі крізь липку колонку просвічує вміст сусідніх */
table.matrix-sticky tbody tr,
table.matrix-sticky tfoot tr { background: var(--surface-raised); }
table.matrix-sticky tbody tr[data-clickable="true"]:hover,
table.matrix-sticky tbody tr[data-open="true"] { background: var(--surface-sunken); }

table.matrix-sticky th:first-child,
table.matrix-sticky td:first-child {
  position: sticky;
  left: 0;
  background: inherit;
  box-shadow: 1px 0 0 var(--surface-line);
}
table.matrix-sticky thead th:first-child { z-index: 3; background: var(--surface-raised); }
table.matrix-sticky .matrix-group th:first-child { background: var(--surface-sunken); }
table.matrix-sticky tfoot { position: sticky; bottom: 0; z-index: 2; }

/* ---------- 24. Клітинки списку афіліатів ---------- */
.a-name { font-weight: 600; }
.a-mg { font-size: var(--fs-micro); color: var(--ink-faint); font-weight: 400; }
.a-mg[data-unassigned="true"] { color: var(--status-warning); }

.pill {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--status-neutral-bg);
  color: var(--ink-muted);
}
.pill[data-state="Active"] { background: var(--status-good-bg); color: var(--status-good); }

/* Score — шкала 0-100. У оригіналі колонка була суцільно червона: колір,
   що стоїть у кожному рядку, не кодує нічого. Тут забарвлені лише краї. */
.a-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.a-score[data-band="low"] { color: var(--status-critical); }
.a-score[data-band="high"] { color: var(--status-good); }
.a-score[data-band="none"] { color: var(--ink-faint); font-weight: 400; }

/* tier-мікросмуга в рядку */
.tier-mini { display: flex; flex-direction: column; gap: 3px; min-width: 136px; }
.tier-mini-bar {
  display: flex;
  gap: 2px;                     /* зазор кольором поверхні, без обведень */
  height: 8px;
}
.tier-mini-seg { border-radius: 2px; min-width: 2px; }
.tier-mini-legend {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.tier-mini-legend b { font-weight: 600; }
.tier-mini-empty { font-size: var(--fs-micro); color: var(--ink-faint); }

/* ---------- 25. Згорнутий хвіст без обороту ---------- */
.row-more td {
  padding: 0;
  border-bottom: 1px solid var(--surface-line);
}
.row-more button {
  width: 100%;
  text-align: left;
  background: var(--surface-sunken);
  border: 0;
  border-left: 3px solid var(--surface-line-strong);
  color: var(--ink-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.row-more button:hover { color: var(--ink); }
.row-more .row-more-hint { font-weight: 400; color: var(--ink-faint); }

/* рядки без обороту: не помилка, а інший тип запису */
table.matrix tbody tr[data-idle="true"] .m-val { color: var(--ink-faint); font-weight: 400; }

/* підсумковий рядок таблиці */
table.matrix tfoot td {
  border-top: 1px solid var(--surface-line-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  white-space: nowrap;
}
table.matrix tfoot td:first-child { text-align: left; color: var(--ink-muted); font-weight: 600; }

/* ---------- 26. Графіки трендів ---------- */
.chart-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.chart-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  min-width: 0;
}

.chart-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.chart-title { font-size: var(--fs-body); font-weight: 600; }
/* остання точка винесена в шапку: картку видно без читання осі */
.chart-last {
  margin-left: auto;
  font-size: var(--fs-value-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chart-sub {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.chart-body { height: 148px; }
.chart-body svg { display: block; width: 100%; height: 100%; }

.c-grid { stroke: var(--surface-line); stroke-width: 1; }
.c-axis { fill: var(--ink-faint); font-size: 9px; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { stroke: var(--surface-raised); stroke-width: 2; }
.c-hit { fill: transparent; }
.c-cursor { stroke: var(--surface-line-strong); stroke-width: 1; }

.chart-pending {
  border-style: dashed;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 180px;
}
.chart-pending .chart-title { color: var(--ink-faint); }

/* ---------- 27. Адаптив нових компонентів ---------- */
@media (max-width: 900px) {
  .table-search { margin-left: 0; flex: 1; }
  .table-search .f-control { min-width: 0; width: 100%; }
  .summary-items { grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); }
  /* довга підказка секції розпирала сторінку по горизонталі */
  .summary-note { display: none; }
}

@media (max-width: 560px) {
  .chart-grid { grid-template-columns: 1fr; }
  .summary-item { padding-left: 0; border-left: 0; }
  .segment { display: flex; }
  .seg { flex: 1; }
  /* липка колонка на телефоні з'їдає половину екрана */
  table.matrix-sticky th:first-child,
  table.matrix-sticky td:first-child { position: static; box-shadow: none; }
}

@media (forced-colors: active) {
  .summary, .chart-card { border: 1px solid CanvasText; }
  .tier-mini-seg { forced-color-adjust: none; }
}

/* ============================================================
   Компоненти, додані вкладкою «Зрізи».
   Нижче — тільки нові класи; токени і секції 1-27 не чіпаються.
   ============================================================ */

/* ---------- 28. Підказка у смузі фільтрів ---------- */
/* Слайсерів тут один (період), бо ендпоінт зрізів більше нічого не приймає.
   Підпис пояснює, чому смуга коротша, ніж на сусідніх вкладках. */
.filters-note {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  align-self: center;
}

/* ---------- 29. Спарклайн у смузі підсумку ---------- */
/* Одна серія на клітинку, порівнюються не серії між собою, а форма ряду
   всередині метрики — тому колір тут нічого не кодує й однаковий скрізь.
   Остання точка яскравіша: вона ж стоїть числом вище. */
.summary-items-spark { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.summary-items-spark .summary-item { gap: 2px; }

.s-spark {
  display: block;
  width: 100%;
  max-width: 88px;
  height: 24px;
  margin-top: 2px;
  overflow: visible;
}
.s-spark-line {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s-spark-dot { fill: var(--accent2); stroke: var(--surface-raised); stroke-width: 1.5; }

/* ---------- 30. Заголовок колонки з підказкою ---------- */
/* У оригіналі підказки жили в title=: для тач- і keyboard-користувача їх
   не існувало. Пунктир — видимий афорданс, focus робить їх доступними. */
.m-tip {
  border-bottom: 1px dotted var(--surface-line-strong);
  cursor: help;
}
.m-tip:hover { color: var(--ink); border-bottom-color: var(--ink-muted); }

/* ---------- 31. Рядок дня в матриці зрізів ---------- */
.matrix .m-name-sub[data-weekend="true"] { color: var(--ink-muted); }

/* Останній зріз — та сама «зараз», за якою читають смугу підсумку.
   Без виділення її доводиться шукати очима в кінці таблиці. */
table.matrix-sticky tbody tr[data-today="true"] { background: var(--surface-sunken); }
table.matrix-sticky tbody tr[data-today="true"] td:first-child {
  box-shadow: inset 2px 0 0 var(--accent), 1px 0 0 var(--surface-line);
}
table.matrix tbody tr[data-today="true"] .m-name-text { color: var(--accent2); }
table.matrix tbody tr[data-today="true"] .m-val { font-weight: 700; }

/* ---------- 32. Виноска під даними ---------- */
/* Пояснення методології не має важити стільки ж, скільки цифри: під таблицею
   і дрібним кеглем, а не сірим абзацом над нею. */
.page-caveat {
  margin: var(--sp-3) 0 0;
  max-width: 78ch;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-faint);
}
.page-caveat b { color: var(--ink-muted); font-weight: 600; }

/* ---------- 33. Порожній стан ---------- */
/* Пунктирна рамка — той самий pending-патерн, що й у картках: видно, що
   це не дані і не помилка, а ряд, який ще накопичується. */
.empty-state {
  border: 1px dashed var(--surface-line-strong);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  max-width: 78ch;
}
.empty-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: var(--sp-2); }
.empty-text {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1.65;
  color: var(--ink-muted);
}
.empty-text b { color: var(--ink); }

/* ---------- 34. Адаптив нових компонентів ---------- */
@media (max-width: 900px) {
  .filters-note { display: none; }
  .summary-items-spark { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (forced-colors: active) {
  .empty-state { border: 1px dashed CanvasText; }
  .s-spark-line { stroke: CanvasText; }
}

/* ============================================================
   Компоненти, додані вкладкою «Research & Sales».
   Нижче — тільки нові класи; токени і секції 1-34 не чіпаються.
   ============================================================ */

/* ---------- 35. Плашка-пояснення ---------- */
/* Замість .alert з монолітa. Ліва смуга кодує характер повідомлення
   (accent — довідка, warning — те, що вимагає дії), фон лишається
   кольором картки: заливка на всю ширину тягнула на себе увагу сильніше,
   ніж дані під нею. */
.notice {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}
.notice-title {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.notice-text { min-width: 0; flex: 1; }
.notice b { color: var(--ink); font-weight: 600; }
.notice[data-tone="warning"] { border-left-color: var(--status-warning); }
.notice[data-tone="warning"] .notice-title { color: var(--status-warning); }

/* ---------- 36. Ціль-діапазон у картці ---------- */
/* У оригіналі ціль жила в дужках підпису — «Нових лідів/тиж (15–20)», —
   а виконання підписувалось словами «✓ В рамках». Тут діапазон малюється:
   світла смуга — цільове вікно, риска — факт. Видно не лише «в межах чи ні»,
   а й наскільки близько до краю. */
.range { margin-top: var(--sp-2); }

.range-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--surface-line);
  margin: 3px 0;
}
.range-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--surface-line-strong);
}
/* Риска факту — єдиний кольоровий елемент картки, тому колір тут
   справді означає статус, а не «колір цієї метрики». */
.range-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--status-good);
}
.range-mark[data-tone="warning"] { background: var(--status-warning); }
.range-mark[data-tone="bad"] { background: var(--status-critical); }

/* ---------- 37. Воронка ---------- */
/* Горизонтальні смуги замість восьми вертикальних стовпчиків у коробках
   однакової висоти: у оригіналі хвіст воронки (5 / 4 / 3) перетворювався
   на смужки 12 / 10 / 7 % висоти комірки й переставав читатись. */
.funnel-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-2);
}

.funnel { list-style: none; }

.fstep {
  display: grid;
  grid-template-columns: 14px minmax(96px, 150px) 1fr 3.5ch 7ch;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--surface-line);
}
.fstep:first-child { border-top: 0; }

.fstep-idx {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fstep-name-cell { min-width: 0; }
.fstep-name {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
}
.fstep-flag {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--status-warning);
}

/* Одна заливка на всі стадії: у оригіналі кожна стадія мала свій колір,
   але колір не кодував нічого — ні фазу, ні статус. Тут довжина несе
   кількість, а колір лишається каналом статусу і вмикається рівно там,
   де є проблема. */
.fstep-track {
  height: 14px;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
  min-width: 0;
}
.fstep-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.fstep-n {
  text-align: right;
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fstep-cr {
  text-align: right;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fstep[data-flag="bottleneck"] .fstep-fill { background: var(--status-warning); }
.fstep[data-flag="bottleneck"] .fstep-cr {
  color: var(--status-warning);
  font-weight: 700;
}

/* ---------- 38. Статичний список-рейтинг ---------- */
/* Ті самі .lead-row, але без кліку: на цій вкладці рядок нікуди не веде,
   тому hover-підсвітку прибираємо — інакше він обіцяє drill-down, якого немає. */
.lead-card[data-static="true"] .lead-row { cursor: default; }
.lead-card[data-static="true"] .lead-row:hover { background: transparent; }

/* Втрати — одна заливка на всі причини: це не чотири різні сутності,
   а один ранжований розподіл. */
.lead-fill[data-tone="loss"] { background: var(--status-critical); }

.lead-meta .badge { padding: 0 6px; }

/* ---------- 39. Адаптив нових компонентів ---------- */
@media (max-width: 560px) {
  .fstep {
    grid-template-columns: 14px 1fr auto auto;
    grid-template-areas:
      "i n v c"
      "i t t t";
    gap: 2px var(--sp-2);
  }
  .fstep-idx { grid-area: i; align-self: start; padding-top: 2px; }
  .fstep-name-cell { grid-area: n; }
  .fstep-n { grid-area: v; }
  .fstep-cr { grid-area: c; }
  .fstep-track { grid-area: t; margin-top: 4px; }
  .notice-title { white-space: normal; }
}

@media (forced-colors: active) {
  .notice, .funnel-card { border: 1px solid CanvasText; }
  .fstep-fill, .range-band, .range-mark { forced-color-adjust: none; }
}

/* ============================================================
   Компоненти, додані вкладкою «Воронка».
   Ступені беруться з секції «Воронка» (.funnel-card / .fstep) — та сама
   форма, що на Research & Sales, щоб дві воронки борду читались однаково.
   Нижче — лише те, чого там не було: незаповнений ступінь і відвал.
   ============================================================ */

/* ---------- 35. Ступінь, до якого когорта ще не дожила ---------- */
/* Той самий pending-патерн, що в картках: пунктир замість заливки. Нуль
   тут був би брехнею — 14-й день просто ще не настав. */
.fstep[data-state="pending"] .fstep-track {
  background: transparent;
  border: 1px dashed var(--surface-line-strong);
}
.fstep[data-state="pending"] .fstep-idx,
.fstep[data-state="pending"] .fstep-name,
.fstep[data-state="pending"] .fstep-n { color: var(--ink-faint); }
.fstep[data-state="pending"] .fstep-n { font-weight: 400; }
.fstep[data-state="pending"] .fstep-cr { color: var(--ink-faint); }

/* ---------- 36. Перехід між ступенями ---------- */
/* Рядок описує не ступінь, а крок між ними, і несе обидві його величини:
   скільки кабінетів загубилось (цього в оригіналі не було видно взагалі —
   різниця двох карток) і за скільки днів дійшла решта (це була окрема
   KPI-картка «Час до 1-го payin»). Сітка та сама, що в .fstep, щоб числа
   стояли в колонці значень, а не пливли. */
.fdrop {
  display: grid;
  grid-template-columns: 14px minmax(96px, 150px) 1fr minmax(0, 10.5ch);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}
.fdrop-arrow { text-align: center; color: var(--ink-faint); }
.fdrop-label {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  line-height: 1.3;
}
.fdrop-text { min-width: 0; }
.fdrop b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fdrop[data-tone="warning"] b { color: var(--status-warning); }

/* Час до першого payin: той самий кегль, що у значень ступенів — це
   рівноправна величина кроку, а не виноска під воронкою. */
.fdrop-time {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-2);
  white-space: nowrap;
}
.fdrop-n {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fdrop-sub { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.funnel-foot {
  border-top: 1px solid var(--surface-line);
  padding: var(--sp-2) 0 var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}

/* ---------- 37. Відсоток, який нема на чому рахувати ---------- */
/* На когорті в 1-2 кабінети «100.0%» зеленим і «0.0%» червоним — не сигнал,
   а арифметика: у оригіналі сотня однакових зелених рядків забивала
   реальні просідання. Нижче порога відсоток лишається сірим. */
.m-pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.m-pct[data-band="good"] { color: var(--status-good); }
.m-pct[data-band="warn"] { color: var(--status-warning); }
.m-pct[data-band="bad"] { color: var(--status-critical); }
.m-pct[data-band="none"] { color: var(--ink-muted); font-weight: 400; }

/* бейдж стану просто в шапці групи колонок */
.matrix-group th .badge {
  margin-left: var(--sp-2);
  vertical-align: middle;
  font-weight: 700;
}

/* підпис під назвою ступеня */
.fstep-note {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  line-height: 1.3;
}

/* P90 — контекст до середнього в сусідній колонці, а не самостійна величина */
.m-val[data-weak="true"] { font-weight: 400; color: var(--ink-muted); }

/* порожній результат усередині таблиці */
td.matrix-empty {
  padding: var(--sp-4) var(--sp-3);
  color: var(--ink-faint);
  text-align: left;
}

/* ============================================================
   Додано вкладкою «Методологія» (довідник метрик)
   ============================================================ */

/* Моноширинного токена в системі не було — жодна вкладка з даними його не
   потребувала. Додаємо, не чіпаючи наявні токени. */
:root {
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
}

/* ---------- 35. Текст довідника ---------- */
/* Вступ пояснює межі застосовності правил — важливий, але це не дані:
   ширина обмежена мірою рядка, кегль нижчий за заголовок. */
.doc-lead {
  max-width: 90ch;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-muted);
}
.doc-lead b { color: var(--ink); font-weight: 600; }

.doc-link { color: var(--accent2); text-decoration: none; }
.doc-link:hover { text-decoration: underline; }

.foot-link { color: var(--ink-muted); text-decoration: none; }
.foot-link:hover { color: var(--ink); text-decoration: underline; }

/* Довідник — не дія над звітом, тому кнопка тиха: текстова, без рамки-акценту.
   Стрілка каже, що це перехід, а не перемикач у межах сторінки. */
.btn-doc { border-color: transparent; text-decoration: none; }
.btn-doc::after { content: ' ↗'; opacity: .55; }
.btn-doc:hover { border-color: var(--surface-line); color: var(--ink); }

/* Посилання «формула» біля заголовка блока: дрібне, поруч із метрикою,
   веде одразу в її рядок реєстру. */
.doc-ref {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.doc-ref::after { content: ' ↗'; opacity: .55; }
.doc-ref:hover { color: var(--accent2); }

/* Код — приглушений моношрифт на втопленій підкладці, а не суцільний
   блакитний. В оригіналі `code`, `pre` і вся колонка «Формула» були одного
   кольору й читались як один блок. */
.code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--ink);
  white-space: nowrap;
}
.code-block {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.55;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--surface-line-strong);
  background: var(--surface-sunken);
  color: var(--ink);
  /* pre-wrap, а не scroll: формула має бути видна цілком на будь-якій ширині */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  width: fit-content;
  max-width: 100%;
}

/* ---------- 36. Фільтр за періодом ---------- */
.scope-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.scope-filter-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
}
.scope-filter .segment { margin-bottom: 0; }
.scope-filter-hint {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}
.seg-count {
  font-variant-numeric: tabular-nums;
  opacity: .65;
  margin-left: 2px;
}
/* Чип з нулем після пошуку не ховаємо — «0» чесніше за зниклу категорію,
   але приглушуємо, щоб не звало клікнути в порожнечу. */
.seg.is-empty:not([aria-selected="true"]) { color: var(--ink-faint); }

/* ---------- 37. Реєстр метрик ---------- */
/* table-layout: fixed — щоб довга формула не розтягувала таблицю
   по горизонталі; ширини колонок задані, текст переноситься. */
table.reg {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-label);
}
.reg-c-name    { width: 17%; }
.reg-c-what    { width: 22%; }
.reg-c-formula { width: 48%; }
.reg-c-scope   { width: 13%; }

table.reg thead th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--surface-line);
}

table.reg td {
  vertical-align: top;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--surface-line);
}
table.reg tbody tr:last-child td { border-bottom: 0; }

/* Підзаголовок групи несе спільну для рядків умову (вікно, джерело,
   правило агрегації) — щоб не повторювати її в кожному рядку. */
.reg-group th {
  text-align: left;
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--surface-line);
}
.reg-group-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}
.reg-group-count {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-left: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.reg-group-note {
  margin: var(--sp-2) 0 0;
  max-width: 100ch;
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--ink-muted);
}
.reg-group-note b { color: var(--ink); font-weight: 600; }

.reg-name-text { font-weight: 600; color: var(--ink); }
.reg-badge { margin-left: var(--sp-1); }
.reg-what { color: var(--ink-muted); line-height: 1.55; }

/* Рішення й винятки — окремий шар під формулою, дрібніше за неї. */
.reg-notes {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
  list-style: none;
}
.reg-note {
  position: relative;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-muted);
}
.reg-note::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-3) * -1);
  top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--surface-line-strong);
}
.reg-note b { color: var(--ink); font-weight: 600; }
.reg-note .code { background: transparent; padding: 0; color: var(--ink); }
.reg-note-date {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Період — словом, без кольору: одне зі значень («поточний стан»)
   семантично нейтральне, і категорійна палітра з нейтральним слотом
   не проходить chroma floor (перевірено валідатором dataviz). */
.reg-scope { color: var(--ink-muted); }

/* ---------- 38. Шкали ---------- */
.scales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.scale-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.scale-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.scale-title { font-size: var(--fs-body); font-weight: 600; }
.scale-note { font-size: var(--fs-micro); color: var(--ink-faint); }

/* 2px зазор кольором поверхні — той самий прийом, що в tier-bar */
.scale-bar { display: flex; gap: 2px; height: 28px; }
.scale-seg {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  overflow: hidden;
}
.scale-seg-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #10141c;
  padding: 0 var(--sp-1);
  white-space: nowrap;
}
.scale-seg-label.is-on-dark { color: var(--ink); }

.scale-axis { display: flex; gap: 2px; margin-top: var(--sp-1); }
.scale-tick {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  padding-left: var(--sp-1);
  white-space: nowrap;
  overflow: hidden;
}

.scale-caption {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Три вікна когорти — послідовність за свіжістю, тому не категорійні
   кольори, а один відтінок від слабкого до насиченого. Статусні токени
   (green/orange) тут не використовуються: система резервує їх під статус. */
.cohort-bar { display: flex; gap: 2px; }
.cohort-seg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 3px;
  overflow: hidden;
}
.cohort-seg[data-tone="past"] { background: var(--surface-sunken); color: var(--ink-muted); }
.cohort-seg[data-tone="last"] { background: rgba(129, 140, 248, .28); color: var(--ink); }
.cohort-seg[data-tone="this"] { background: var(--accent2); color: #10141c; }
.cohort-name {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cohort-rule { font-size: var(--fs-micro); opacity: .8; white-space: nowrap; }
.cohort-flag {
  align-self: flex-start;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(15, 17, 23, .22);
  color: inherit;
  font-size: var(--fs-micro);
}
.cohort-seg[data-tone="past"] .cohort-flag { background: rgba(255, 255, 255, .05); }

/* ---------- 39. Картки правил ---------- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.rule-card {
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
/* Заголовок правила — без емодзі-іконки: в оригіналі вісім різностильових
   емодзі задавали більше шуму, ніж структури. */
.rule-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: 2px; }
.rule-lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}
.rule-p, .rule-list {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  line-height: 1.65;
  color: var(--ink-muted);
}
.rule-p b, .rule-list b { color: var(--ink); font-weight: 600; }
.rule-card .code-block { margin-bottom: var(--sp-3); }
.rule-list { padding-left: var(--sp-4); }
.rule-list li { margin-bottom: var(--sp-2); }
.rule-list li:last-child { margin-bottom: 0; }
.rule-note {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--surface-line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sunken);
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--ink-muted);
}
.rule-note:last-child { margin-bottom: 0; }
.rule-note b { color: var(--ink); font-weight: 600; }
.rule-card > *:last-child { margin-bottom: 0; }

/* ---------- 40. Адаптив нових компонентів ---------- */
/* Чотири колонки реєстру не влазять у телефон, а горизонтальний скрол
   довідника — гірше за стек: рядок розкладається згори вниз, роль клітинки
   несе оформлення, у «Періоду» — явний підпис. */
@media (max-width: 760px) {
  /* Чотири чипси в один ряд на телефоні ламаються по три рядки кожен.
     Стовпчиком вони читаються як те, чим і є — список фільтрів. */
  .scope-filter { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .scope-filter .segment { flex-direction: column; align-self: stretch; }
  .scope-filter .seg { text-align: left; padding: 8px 12px; }

  /* Пошук з-під заголовка на власний рядок: у 240px він не влазив і різав
     плейсхолдер на півслові. */
  /* flex-basis, а не width: у flex-рядку width:100% просто стискається
     сусідом замість того, щоб перенести елемент на свій рядок. */
  .table-head .table-search { margin-left: 0; flex: 1 0 100%; }
  .table-head .table-search .f-control { width: 100%; min-width: 0; }

  table.reg, table.reg tbody, table.reg tr, table.reg td { display: block; width: auto; }
  table.reg thead { display: none; }
  table.reg tbody tr.reg-row {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--surface-line);
  }
  table.reg td { border-bottom: 0; padding: 0 var(--sp-3); }
  table.reg td + td { margin-top: var(--sp-2); }
  .reg-group { display: block; }
  .reg-group th { display: block; }
  .reg-scope::before {
    content: 'Період — ';
    color: var(--ink-faint);
  }
  .cohort-seg { padding: var(--sp-2); }
  .cohort-rule, .cohort-flag { display: none; }
}

@media (forced-colors: active) {
  .scale-seg, .cohort-seg { border: 1px solid CanvasText; }
  .code-block, .rule-note { border-left: 2px solid CanvasText; }
}

/* ============================================================
   Компоненти, додані вкладкою «Легенда» (coverage report).
   Нижче — тільки нові класи; токени і секції 1-39 не чіпаються.
   ============================================================ */

/* ---------- 40. Значок статусу ---------- */
/* У оригіналі статус був emoji (✅ ⚠ ❌ ❓) у центрі порожньої колонки 8%.
   Два дефекти: ❓ рендериться червоним і зливається з ❌, а між назвою
   метрики і поясненням зяяла дірка, через яку око стрибало.

   Тут — гліф у кольоровому чипі впритул до назви. Форма гліфа (✓ ! ✕ ?)
   несе значення сама, незалежно від кольору: пара green↔orange дає
   ΔE 5.7 при протанопії, тобто на кольорі одному покладатись не можна.
   Колір лишається другим каналом, не єдиним. */
.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  background: var(--status-neutral-bg);
  color: var(--ink-muted);
}
.flag[data-s="ok"]   { background: var(--status-good-bg);     color: var(--status-good); }
.flag[data-s="warn"] { background: var(--status-warning-bg);  color: var(--status-warning); }
.flag[data-s="none"] { background: var(--status-critical-bg); color: var(--status-critical); }
.flag[data-s="req"]  { background: rgba(163, 113, 247, .14);  color: var(--purple); }

/* ---------- 40a. Вступний рядок вкладки ---------- */
/* Одне речення про те, що це за розділ. У оригіналі воно жило всередині
   синьої плашки разом з розшифровкою значків — і читалось як алерт,
   хоча нічого не сталось. */
.page-lead {
  max-width: 96ch;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--ink-muted);
}
.page-lead b { color: var(--ink); font-weight: 600; }

/* ---------- 41. Смуга покриття ---------- */
/* Замінює дві речі оригіналу одразу: плашку-легенду зверху («✅ — порахували
   й перевірили · ⚠ — …») і підсумок, який лежав під 44 рядками прокрутки.
   Тут значення значка, кількість метрик у цьому статусі і фільтр — один
   елемент. Липка, бо сторінка довга: без цього фільтр треба шукати вгорі. */
.cov {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--sp-3);
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}

.cov-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.cov-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 10px 5px 6px;
  border-radius: 20px;
  border: 1px solid var(--surface-line);
  background: var(--surface-page);
  color: var(--ink-muted);
  font-size: var(--fs-label);
  text-align: left;
  transition: border-color .15s, color .15s;
}
.cov-chip:hover { border-color: var(--surface-line-strong); color: var(--ink); }

/* Обране — суцільна рамка кольором статусу. Колір тут дублює вже вибраний
   гліф, тому дальтонік не втрачає стан: активний чип ще й темніший фоном. */
.cov-chip[aria-pressed="true"] { background: var(--surface-sunken); color: var(--ink); }
.cov-chip[aria-pressed="true"][data-s="ok"]   { border-color: var(--status-good); }
.cov-chip[aria-pressed="true"][data-s="warn"] { border-color: var(--status-warning); }
.cov-chip[aria-pressed="true"][data-s="none"] { border-color: var(--status-critical); }
.cov-chip[aria-pressed="true"][data-s="req"]  { border-color: var(--purple); }

.cov-n {
  font-size: var(--fs-value-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cov-l { line-height: 1.25; }

.cov-tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.cov-tools .f-control { min-width: 200px; padding: 5px 9px; font-size: var(--fs-label); }
.cov-count {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 42. Група метрик ---------- */
/* Порядок і заголовки груп — 1:1 з оригіналом. Прибрана тільки повторена
   дев'ять разів шапка «МЕТРИКА | СТАТУС | ДЕТАЛІ»: вона лишається у
   розмітці для скрінрідера, але візуально не повторюється. */
.lg-group { margin-bottom: var(--sp-3); }

.lg-group .table-head { gap: var(--sp-3); }
.lg-mini { display: flex; gap: var(--sp-3); margin-left: auto; }
.lg-mini span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lg-mini [data-s="ok"]   { color: var(--status-good); }
.lg-mini [data-s="warn"] { color: var(--status-warning); }
.lg-mini [data-s="none"] { color: var(--status-critical); }
.lg-mini [data-s="req"]  { color: var(--purple); }

table.lg-tab { width: 100%; border-collapse: collapse; }
table.lg-tab td,
table.lg-tab tbody th {
  vertical-align: top;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--surface-line);
}
table.lg-tab tbody tr:first-child td,
table.lg-tab tbody tr:first-child th { border-top: 0; }

.lg-c-flag { width: 20px; padding-right: 0 !important; }
.lg-c-m {
  width: 22%;
  min-width: 170px;
  max-width: 300px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
}
/* Довгі назви метрик («KPI: ліди / first contacts / qualified / handoffs»)
   мусять переноситись: nowrap тут розпирав сторінку по горизонталі. */
.lg-c-m { overflow-wrap: anywhere; }

/* ---------- 43. Пояснення метрики ---------- */
/* У оригіналі в одній клітинці жили два різні типи запису: як рахується
   (SQL, формула) і що з цим не так (питання до бізнесу, ризик розходження).
   Одним кеглем, суцільним абзацом. Тут вони розведені типографікою —
   слова ті самі, порядок той самий. */
/* Локальні кольори секції: --ink-faint (2.27:1 на картці #181c25) для
   застереження не годиться — там часто лежить найважливіше речення рядка
   («не реалізовано», «Уточнити …»). Токени платформи не чіпаємо, беремо
   два власні: 8.7:1 для формули і 4.96:1 для застереження. */
.lg-group { --lg-d-ink: var(--ink-300); --lg-q-ink: var(--ink-550); }

.lg-c-d { font-size: var(--fs-label); line-height: 1.6; color: var(--lg-d-ink); }
.lg-c-d > :first-child { margin-top: 0; }
.lg-c-d b { color: var(--ink); font-weight: 600; }
.lg-c-d code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .95em;
}

.lg-d { max-width: 88ch; }

/* Застереження — не другий абзац, а виноска зі своєю лівою рискою.
   Риска нейтральна (не кольором статусу): тип запису однаковий для всіх
   рядків, а статус уже закодований гліфом зліва. */
.lg-q {
  margin-top: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--surface-line-strong);
  max-width: 88ch;
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--lg-q-ink);
}
.lg-q b { color: var(--lg-d-ink); font-weight: 600; }

/* ---------- 44. Підсумок ---------- */
/* Лишається внизу, як в оригіналі. Ліва смуга кольором статусу замість
   кольорового жирного тексту: у оригіналі фарбувався сам напис, і три
   абзаци поспіль читались як три різні рівні тривоги. */
.lg-recap { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.lg-recap p {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--surface-line-strong);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 110ch;
}
.lg-recap p .flag { margin-top: 1px; }
.lg-recap p[data-s="ok"]   { border-left-color: var(--status-good); }
.lg-recap p[data-s="warn"] { border-left-color: var(--status-warning); }
.lg-recap p[data-s="none"] { border-left-color: var(--status-critical); }
.lg-recap b { color: var(--ink); font-weight: 600; }

#questionsLead {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
#questionsLead b { color: var(--ink); font-weight: 600; }

.lg-ql { list-style: none; display: grid; gap: var(--sp-2); counter-reset: q; }
.lg-ql li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 96ch;
}
.lg-ql li::before {
  content: counter(q);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.lg-ql b { color: var(--ink); font-weight: 600; }

/* ---------- 45. Адаптив нових компонентів ---------- */
@media (max-width: 900px) {
  .cov-tools { margin-left: 0; width: 100%; }
  .cov-tools .f-control { min-width: 0; flex: 1; }
  .lg-mini { margin-left: 0; }
}

@media (max-width: 560px) {
  /* Три колонки в 420px не живуть: гліф лишається з назвою, пояснення
     переходить на свій рядок під ними. */
  table.lg-tab, table.lg-tab tbody, table.lg-tab tr,
  table.lg-tab td, table.lg-tab tbody th { display: block; }
  table.lg-tab tbody tr { position: relative; border-top: 1px solid var(--surface-line); padding: var(--sp-3) 0; }
  table.lg-tab tbody tr:first-child { border-top: 0; }
  table.lg-tab td, table.lg-tab tbody th { border-top: 0; padding: 0 var(--sp-3); }
  .lg-c-flag { position: absolute; padding-left: var(--sp-3) !important; }
  .lg-c-m { width: auto; padding-left: 34px !important; margin-bottom: var(--sp-2); }
  .lg-c-d { padding-left: 34px !important; }
  .cov-chip { flex: 1 1 140px; }
}

@media (forced-colors: active) {
  .cov-chip[aria-pressed="true"] { border: 2px solid CanvasText; }
  .flag { border: 1px solid CanvasText; }
}

/* вузький екран: перехід складається в два рядки, час іде під текстом втрат */
@media (max-width: 560px) {
  .fdrop {
    grid-template-columns: 14px 1fr;
    gap: 2px var(--sp-2);
  }
  .fdrop-label { grid-column: 2; }
  .fdrop-text { grid-column: 2; }
  .fdrop-time { grid-column: 2; justify-content: flex-start; }
}

/* ---------- 41. Тіні карток (тема night) ----------
   Винесено окремою секцією, а не вплетено в кожен компонент: так крок
   «радіуси + тіні» видно одним блоком і його легко відкотити. */
.stat,
.tier-card,
.lead-card,
.toc-item,
.filters,
.risk,
.chart-card,
.funnel-card,
.table-card,
.rule-card,
.scale-card,
.share-card,
.summary,
.notice {
  box-shadow: var(--shadow-card);
}

.toc-item:hover,
.risk:hover {
  box-shadow: var(--shadow-card-hover);
}

/* картка-заглушка лишається пласкою — вона не носій даних */
.stat-pending {
  box-shadow: none;
}

/* ---------- 42. Картки без обведення (тема night) ----------
   У макеті картку відділяє тон і тінь, а не рамка. Ставимо
   border-color: transparent, а не border: none — рамка лишається
   в потоці, тому геометрія не зсувається ні на піксель. */
.stat,
.tier-card,
.lead-card,
.toc-item,
.filters,
.risk,
.chart-card,
.funnel-card,
.table-card,
.rule-card,
.scale-card,
.share-card,
.summary,
.notice {
  border-color: transparent;
}

/* Рамки, які несуть сенс, лишаються видимими. */
.stat-emphasis { border-color: var(--accent); }          /* маржа відділу */
.stat-pending,
.toc-item.is-todo,
.chart-pending { border-color: var(--surface-line); }    /* пунктир заглушки */

/* ---------- 43. Повітря (тема night) ----------
   Макет дихає помітно вільніше за нашу початкову щільність.
   Свідомо НЕ чіпаємо таблиці: там щільність важливіша за повітря,
   і саме вони ризикують не влізти в 1280px. */
body { padding: var(--space-16) var(--page-pad-x) var(--space-32); }

/* KPI-плитка і картки-контейнери — padding з макета.
   Звичайним .stat даємо --pad-card, а не --pad-kpi: на 1280px у ряд
   стає п'ять карток, і 28px з боків з'їдали рядок з бейджем. */
.stat { padding: var(--pad-card); }
.stat-money { padding: var(--pad-kpi); }   /* фінансові — ширші, місця вистачає */

/* бейдж переноситься цілком, а не ламає назву показника на склади */
.stat-label { flex-wrap: wrap; }
.stat-label > span:first-child { white-space: nowrap; }

.tier-card,
.lead-card,
.chart-card,
.funnel-card,
.rule-card,
.scale-card,
.share-card,
.summary { padding: var(--pad-card); }

/* проміжки між картками: у щільній KPI-сітці — менший, бо в ряд
   стає до п'яти плиток і 24px забирають надто багато ширини */
.stat-grid { gap: var(--space-16); }

.stat-grid-money,
.leaders-grid,
.risk-strip,
.toc { gap: var(--gap-card); }

.section { margin-bottom: var(--gap-card); }

/* ---------- 44. Великі числа — Golos Text (тема night) ----------
   У макеті цифрові показники набрані окремою гарнітурою зі щільним
   трекінгом: так число читається як фігура, а не як рядок тексту. */
.stat-value,
.risk-value,
.summary-value,
.drawer-kpi-value {
  font-family: var(--font-numeric);
  letter-spacing: var(--track-figure);
  font-weight: var(--weight-semibold);
}

/* дрібніші числові значення — трекінг слабший, інакше злипаються */
.stat-pending .stat-value,
.lead-value {
  letter-spacing: var(--track-figure-loose);
}

/* заголовки карток і сторінки */
.page-title,
.tier-head-title,
.lead-title,
.toc-name {
  font-size: var(--text-title);
  letter-spacing: var(--track-title);
}

/* капітель у заголовках секцій */
.section-title { letter-spacing: var(--track-caps); }