/* Раздел «Аналитика» (/analytics/): общий каркас страниц инструментов.

   Всё на токенах дизайн-системы (lib/cf/tokens.css): своих цветов раздел не
   вводит. Страница инструмента - это шапка раздела, короткое «зачем это»,
   панель управления, главный график и под ним то, что помогает его читать.
   Классы с префиксом an- - только здесь; компоненты системы (cf-seg,
   cf-panel, cf-keystrip, cf-faq) используются как есть. */

body { background: var(--cf-canvas); color: var(--cf-ink); margin: 0; }
.an-main { max-width: var(--cf-page-max); margin: 0 auto; padding: var(--cf-space-24) var(--cf-space-24) var(--cf-space-56); }
.an-main :where(h1, h2, h3, p) { text-wrap: balance; }
::selection { background: var(--cf-accent-soft); color: var(--cf-ink); }

/* ---- шапка раздела ---- */
.an-crumbs { margin-bottom: var(--cf-space-14); }
.an-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cf-space-8) var(--cf-space-24); align-items: end; }
.an-head__t { display: flex; align-items: center; gap: var(--cf-space-10); flex-wrap: wrap; }
.an-head .cf-rule { margin-top: var(--cf-space-12); }
.an-head .cf-head__sub { margin-top: var(--cf-space-12); max-width: 78ch; }
.an-head .cf-status { justify-self: end; }
@media (max-width: 767px) {
  .an-main { padding: var(--cf-space-16) var(--cf-space-16) var(--cf-space-44); }
  .an-head { grid-template-columns: 1fr; }
  .an-head .cf-status { justify-self: start; white-space: normal; }
  .an-head .cf-head__title { font-size: 28px; }
}

/* Лаймовая плашка Pro - та же, что у Бонд Радара и в меню. Лайм здесь -
   знак бренда (правило лайма: плашка Pro), а не кнопка и не данные. */
.an-pro-badge { display: inline-block; padding: 4px 7px; border-radius: var(--cf-radius-xs); background: var(--cf-lime); color: var(--cf-on-lime);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; line-height: 1; vertical-align: middle; }

/* ---- «Зачем это» ----
   Новичку нужно объяснение до графика, постоянному читателю - нет. Поэтому
   блок открыт при первом заходе и сворачивается в одну строку по кнопке
   «Понятно»; выбор запоминается на устройстве. */
.an-why { margin-top: var(--cf-space-20); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--cf-space-24);
  align-items: start; padding: var(--cf-space-18) var(--cf-space-20); border-radius: var(--cf-radius-xl); background: var(--cf-surface);
  box-shadow: inset 0 0 0 1px var(--cf-line); }
.an-why__k { display: flex; align-items: center; gap: var(--cf-space-8); font-size: 13px; font-weight: 600; color: var(--cf-ink-3); margin: 0 0 var(--cf-space-6); }
.an-why__k svg { width: 16px; height: 16px; color: var(--cf-accent); flex: none; }
.an-why p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cf-ink-2); text-wrap: pretty; }
.an-why p b { color: var(--cf-ink); font-weight: 600; }
.an-why__x { align-self: start; }
.an-why[data-collapsed="1"] { display: none; }
.an-why-pill { display: none; margin-top: var(--cf-space-16); }
.an-why-pill[data-show="1"] { display: inline-flex; }
@media (max-width: 1100px) { .an-why { grid-template-columns: 1fr; gap: var(--cf-space-14); } .an-why__x { justify-self: start; } }

/* ---- панель управления ---- */
.an-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-10) var(--cf-space-12); margin-top: var(--cf-space-24); }
.an-bar__sp { flex: 1 1 auto; }
.an-bar .cf-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.an-bar .cf-seg::-webkit-scrollbar { display: none; }
.an-bar .cf-seg button { white-space: nowrap; }
.an-lbl { font-size: 13px; color: var(--cf-ink-3); margin-right: calc(var(--cf-space-4) * -1); }

/* Выбор актива: поле с поиском и выпадающим списком. */
.an-pick { position: relative; }
.an-pick__btn { display: inline-flex; align-items: center; gap: var(--cf-space-10); height: var(--cf-h-control); padding: 0 var(--cf-space-14) 0 var(--cf-space-12);
  border: 0; border-radius: var(--cf-radius-pill); background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line-strong);
  color: var(--cf-ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; max-width: 100%; }
.an-pick__btn:hover { background: var(--cf-surface-2); }
.an-pick__btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.an-pick__btn small { font-weight: 500; color: var(--cf-ink-3); font-size: 13px; }
.an-pick__btn .an-mono { flex: none; }
.an-pick__btn svg { width: 14px; height: 14px; color: var(--cf-ink-3); flex: none; }
.an-pick__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-pick__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--cf-z-popover); width: min(420px, calc(100vw - 32px));
  background: var(--cf-surface); border-radius: var(--cf-radius-lg); box-shadow: var(--cf-shadow-popover), inset 0 0 0 1px var(--cf-line); padding: var(--cf-space-8); }
.an-pick__pop[hidden] { display: none; }
.an-pick__pop .cf-search { width: 100%; }
.an-pick__list { max-height: min(56vh, 420px); overflow-y: auto; margin-top: var(--cf-space-6); overscroll-behavior: contain; }
.an-pick__grp { padding: var(--cf-space-10) var(--cf-space-10) var(--cf-space-4); font-size: 12.5px; font-weight: 600; color: var(--cf-ink-3); }
.an-pick__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--cf-space-10); width: 100%;
  padding: var(--cf-space-8) var(--cf-space-10); border: 0; border-radius: var(--cf-radius-md); background: none; color: var(--cf-ink);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer; min-height: 42px; }
.an-pick__opt:hover, .an-pick__opt[data-active="1"] { background: var(--cf-surface-2); }
.an-pick__opt[aria-selected="true"] { background: var(--cf-accent-soft); color: var(--cf-accent); }
.an-pick__opt span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-pick__opt small { color: var(--cf-ink-3); font-size: 12.5px; }
.an-pick__none { padding: var(--cf-space-16); color: var(--cf-ink-3); font-size: 14px; }
.an-mono { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cf-surface-2);
  color: var(--cf-ink-2); font-size: 11px; font-weight: 700; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px var(--cf-line); }

/* ---- ключевые числа ---- */
.an-kpis { margin-top: var(--cf-space-16); }
.an-kpis.cf-keystrip { grid-template-columns: repeat(var(--an-cols, 4), minmax(0, 1fr)); }
.an-kpis .cf-keystrip__v { font-size: 24px; }
.an-kpis .cf-keystrip__u { color: var(--cf-ink-3); }
@media (max-width: 900px) {
  .an-kpis.cf-keystrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpis.cf-keystrip > div:nth-child(3)::before { display: none; }
  .an-kpis.cf-keystrip > div:nth-child(odd) { padding-left: 18px; }
}

/* ---- графики ---- */
.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cf-space-16); margin-top: var(--cf-space-16); }
.an-span-12 { grid-column: span 12; } .an-span-8 { grid-column: span 8; } .an-span-7 { grid-column: span 7; }
.an-span-6 { grid-column: span 6; } .an-span-5 { grid-column: span 5; } .an-span-4 { grid-column: span 4; }
@media (max-width: 1100px) { .an-grid > * { grid-column: span 12; } }
.an-box { position: relative; }
.an-box .cf-panel__head { margin-bottom: var(--cf-space-12); }
.an-box .cf-panel__head p { margin: var(--cf-space-4) 0 0; font-size: 13.5px; color: var(--cf-ink-3); flex-basis: 100%; }
.an-chart { position: relative; height: var(--an-h, 420px); margin: 0 calc(var(--cf-space-8) * -1); }
.an-chart--sm { --an-h: 260px; }
.an-chart--md { --an-h: 340px; }
@media (max-width: 767px) { .an-chart { --an-h: 320px; margin: 0 calc(var(--cf-space-10) * -1); } .an-chart--sm { --an-h: 220px; } }
.an-chart canvas { outline: none; }
/* Легенда графика: значения под перекрестием. Живёт над холстом, чтобы
   не спорить с линиями за место и читаться без наведения на телефоне. */
.an-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cf-space-4) var(--cf-space-16); min-height: 22px; font-size: 13px; color: var(--cf-ink-3);
  font-variant-numeric: tabular-nums; margin-bottom: var(--cf-space-8); }
.an-legend b { color: var(--cf-ink); font-weight: 600; }
.an-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.an-legend i.is-line { height: 3px; border-radius: 2px; vertical-align: 3px; }
.an-legend__d { color: var(--cf-ink-2); font-weight: 600; }
.an-legend__s { display: inline-flex; align-items: baseline; gap: 6px; }
.an-legend__s[data-off="1"] { opacity: .45; }
.an-legend button.an-legend__s { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.an-legend button.an-legend__s:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: var(--cf-radius-xs); }
.an-chart__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cf-ink-3); font-size: 14px; }
.an-chart .cf-skel { position: absolute; inset: 8px; border-radius: var(--cf-radius-md); }
.an-note { margin: var(--cf-space-10) 0 0; font-size: 13px; color: var(--cf-ink-3); line-height: 1.5; }

/* Столбики по категориям (месяцы, дни недели, участники). SVG + DOM-подписи. */
.an-bars { position: relative; width: 100%; }
.an-bars svg { display: block; width: 100%; height: var(--an-h, 260px); overflow: visible; }
.an-bars .b { transition: opacity var(--cf-dur-fast) ease; }
.an-bars .b:focus { outline: none; }
.an-bars .b:hover rect.bar { opacity: .82; }
.an-bars .b:focus-visible rect.bar { stroke: var(--cf-accent); stroke-width: 2.5; paint-order: stroke; }
.an-bars .grid { stroke: var(--cf-line); }
.an-bars .zero { stroke: var(--cf-line-strong); }
.an-bars text { fill: var(--cf-ink-3); font-size: 11.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.an-bars text.v { fill: var(--cf-ink-2); font-size: 12px; font-weight: 600; }
.an-bars rect.bar.is-up { fill: var(--cf-up); } .an-bars rect.bar.is-down { fill: var(--cf-down); }
.an-bars rect.bar.is-acc { fill: var(--cf-chart-1); } .an-bars rect.bar.is-muted { fill: var(--cf-chart-muted); }
.an-bars rect.bar.is-now { stroke: var(--cf-ink); stroke-width: 1.5; }
.an-tip { position: absolute; z-index: var(--cf-z-popover); pointer-events: none; padding: 8px 11px; border-radius: var(--cf-radius-sm);
  background: var(--cf-tooltip-bg); color: var(--cf-tooltip-ink); box-shadow: var(--cf-shadow-tooltip); font-size: 12.5px; line-height: 1.45;
  white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); font-variant-numeric: tabular-nums; }
.an-tip[hidden] { display: none; }
.an-tip b { font-weight: 600; }

/* ---- таблицы раздела ---- */
.an-table td.num, .an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.an-table tr[data-href] { cursor: pointer; }
.an-meter { position: relative; height: 6px; min-width: 64px; border-radius: var(--cf-radius-bar); background: var(--cf-surface-2); overflow: hidden; }
.an-meter i { position: absolute; top: 0; bottom: 0; border-radius: var(--cf-radius-bar); background: var(--cf-chart-1); }
.an-meter.is-split::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--cf-line-strong); }

/* ---- Pro: демо вместо закрытого содержимого (как у Бонд Радара) ---- */
.an-pro { margin-top: var(--cf-space-16); border-radius: var(--cf-radius-xl); background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line); padding: var(--cf-space-24); }
.an-pro__head { display: flex; align-items: center; gap: var(--cf-space-10); flex-wrap: wrap; }
.an-pro__head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.an-pro__lead { margin: var(--cf-space-8) 0 0; color: var(--cf-ink-2); font-size: 15px; max-width: 80ch; }
.an-pro__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cf-space-16); margin-top: var(--cf-space-20); }
.an-pro__card { border-radius: var(--cf-radius-lg); background: var(--cf-surface-2); padding: var(--cf-space-18); min-width: 0; }
.an-pro__card h3 { margin: 0 0 var(--cf-space-8); font-size: 15px; font-weight: 600; }
.an-pro__card p, .an-pro__card li { font-size: 14px; color: var(--cf-ink-2); line-height: 1.5; margin: 0; }
.an-pro__card ul { margin: 0; padding-left: var(--cf-space-18); }
.an-pro__card li + li { margin-top: var(--cf-space-4); }
.an-pro__n { font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.an-pro__n small { font-size: 15px; font-weight: 500; color: var(--cf-ink-3); letter-spacing: 0; margin-left: var(--cf-space-6); }
.an-pro__blur { filter: blur(5px); user-select: none; pointer-events: none; }
.an-pro__foot { display: flex; flex-wrap: wrap; gap: var(--cf-space-12); align-items: center; margin-top: var(--cf-space-20); }
.an-pro__foot .cf-caption, .an-pro__foot small { color: var(--cf-ink-3); font-size: 13px; }
@media (max-width: 1100px) { .an-pro__grid { grid-template-columns: 1fr; } }

/* Полоса для локального просмотра: переключение гостя и подписчика. На
   проде не показывается (только ?demo=1 или localhost). */
.an-devbar { display: flex; align-items: center; gap: var(--cf-space-10); flex-wrap: wrap; margin-bottom: var(--cf-space-16);
  padding: var(--cf-space-8) var(--cf-space-12); border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); font-size: 13px; color: var(--cf-ink-3);
  width: fit-content; }
.an-devbar[hidden] { display: none; }

/* ---- секции ниже графика ---- */
.an-sec { margin-top: var(--cf-space-44); }
.an-sec > .cf-h2, .an-sec > h2 { margin: 0 0 var(--cf-space-6); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.an-sec__lead { margin: 0 0 var(--cf-space-16); color: var(--cf-ink-2); font-size: 15px; max-width: 80ch; }
.an-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cf-space-16); }
.an-read > div { padding: var(--cf-space-18) var(--cf-space-20); border-radius: var(--cf-radius-xl); background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line); }
.an-read b { display: block; font-size: 15px; margin-bottom: var(--cf-space-6); }
.an-read p { margin: 0; font-size: 14px; color: var(--cf-ink-2); line-height: 1.55; }
@media (max-width: 900px) { .an-read { grid-template-columns: 1fr; } }
.an-method { max-width: 920px; }

/* Другие инструменты раздела: список строк, а не сетка одинаковых карточек. */
.an-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--cf-space-24); border-top: 1px solid var(--cf-line); }
.an-rel a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--cf-space-12); align-items: center; padding: var(--cf-space-14) 0;
  border-bottom: 1px solid var(--cf-line); color: var(--cf-ink); text-decoration: none; }
.an-rel a:hover b { color: var(--cf-accent); }
.an-rel a:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: var(--cf-radius-xs); }
.an-rel b { display: block; font-size: 14.5px; font-weight: 600; }
.an-rel small { display: block; font-size: 13px; color: var(--cf-ink-3); margin-top: 2px; }
.an-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--cf-radius-md); background: var(--cf-accent-soft); color: var(--cf-accent); }
.an-ico svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .an-rel { grid-template-columns: 1fr; } }

.an-foot-disc { margin-top: var(--cf-space-24); font-size: 13px; color: var(--cf-ink-3); max-width: 90ch; }
.an-err { margin-top: var(--cf-space-16); }

@media (prefers-reduced-motion: reduce) { .an-main * { transition: none !important; animation: none !important; } }

/* Полоса Pro-инструментов над графиком: уведомление и выгрузка. */
.an-protools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-8); }
.an-protools__t { display: inline-flex; align-items: center; gap: var(--cf-space-6); font-size: 13px; color: var(--cf-ink-3); margin-right: var(--cf-space-4); }
.an-protools .cf-btn svg { margin-right: var(--cf-space-6); }
.an-scrim { position: fixed; inset: 0; z-index: var(--cf-z-modal); display: grid; place-items: center; padding: var(--cf-space-16); background: var(--cf-scrim); }
.an-modal { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.an-modal .cf-modal__title .an-pro-badge { margin-left: var(--cf-space-6); }
.an-csv { margin: 0; padding: var(--cf-space-10); border-radius: var(--cf-radius-sm); background: var(--cf-surface); font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; line-height: 1.5; color: var(--cf-ink-2); overflow-x: auto; white-space: pre; }
.an-quote { margin: 0; padding: var(--cf-space-10) var(--cf-space-12); border-radius: var(--cf-radius-md); background: var(--cf-surface); color: var(--cf-ink); font-size: 14px; line-height: 1.5; }
@media (max-width: 767px) { .an-scrim { padding: 0; align-items: end; } .an-modal { width: 100vw; max-height: 92vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } }

/* ================= Телефон (26.09.2026) =================
   Раздел проработан под палец, а не «ужат» с десктопа: тач-цели от 42px,
   таблицы - списком карточек, выбор актива - листом сверху (снизу его
   закрыла бы клавиатура), без серой вспышки на касании и без залипшего
   hover после тапа. */
.an-main { -webkit-tap-highlight-color: transparent; }
.an-main :is(button, a, [role="button"], summary) { touch-action: manipulation; }
.an-main :is(button, [role="button"], .cf-seg button) { -webkit-user-select: none; user-select: none; }
.an-msort { display: none; }

@media (max-width: 767px) {
  /* Переключатели и кнопки - под палец. */
  .an-main .cf-seg button { min-height: 42px; }
  .an-main .cf-btn--sm { min-height: 42px; }
  .an-main .cf-iconbtn { min-width: 42px; min-height: 42px; }
  .an-crumbs a { display: inline-block; padding: var(--cf-space-10) 0; margin: calc(var(--cf-space-10) * -1) 0; }
  .an-legend button.an-legend__s { min-height: 40px; padding: var(--cf-space-6) 0; }
  .an-bar { gap: var(--cf-space-10); }
  .an-bar > * { max-width: 100%; }
  .an-pick, .an-pick__btn { width: 100%; }
  .an-pick__btn .an-pick__txt { flex: 1 1 auto; text-align: left; }

  /* Выбор актива: лист от верхнего края экрана, во всю ширину. */
  .an-pick__pop { position: fixed; top: calc(var(--cf-space-12) + env(safe-area-inset-top, 0px)); left: var(--cf-space-12); right: var(--cf-space-12);
    width: auto; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
  .an-pick__pop[hidden] { display: none; }
  .an-pick__list { max-height: none; flex: 1 1 auto; }
  .an-pick__pop .cf-search { font-size: 16px; } /* иначе iPhone зумит страницу на фокусе */
  .an-pick__opt { min-height: 48px; }

  /* Таблицы - карточками: название во всю ширину, показатели парами. */
  .an-msort { display: flex; align-items: flex-end; gap: var(--cf-space-8); margin: 0 0 var(--cf-space-10); }
  .an-msort label { display: flex; flex-direction: column; gap: var(--cf-space-4); flex: 1 1 auto; font-size: 13px; color: var(--cf-ink-3); }
  .an-msort select { width: 100%; min-height: 44px; font-size: 16px; }
  .an-msort .cf-btn { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .cf-table-wrap .cf-scroll:has(> table.an-stack) { overflow: visible; }
  table.an-stack { display: block; width: 100%; min-width: 0 !important; }
  table.an-stack thead { display: none; }
  table.an-stack tbody, table.an-stack tfoot { display: block; }
  table.an-stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-space-10) var(--cf-space-16);
    padding: var(--cf-space-14) var(--cf-space-16); border-bottom: 1px solid var(--cf-line); }
  table.an-stack tr:last-child { border-bottom: 0; }
  table.an-stack td, table.an-stack th { display: block; padding: 0 !important; border: 0 !important; text-align: left !important;
    white-space: normal; min-width: 0; background: none; position: static; }
  table.an-stack td:first-child, table.an-stack th:first-child, table.an-stack td[colspan] { grid-column: 1 / -1; }
  table.an-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 500; color: var(--cf-ink-3); }
  table.an-stack td.num { font-size: 15px; font-weight: 600; }
  table.an-stack .an-meter { min-width: 0; }
  /* Зона касания ссылки шире её текста, вёрстка не сдвигается: отступ
     внутрь компенсирован отрицательным полем. */
  table.an-stack a.cf-link, .an-kpis a, .an-note a { display: inline-block; padding: var(--cf-space-12) 0; margin: calc(var(--cf-space-12) * -1) 0; }
  table.an-stack tr[data-href] { cursor: pointer; }
}

/* Hover - только там, где есть мышь: на телефоне подсветка залипала бы
   после касания строки или карточки. */
@media (hover: none) {
  .an-pick__opt:hover:not([data-active="1"]):not([aria-selected="true"]) { background: none; }
  .an-table tbody tr[data-href]:hover { background: none; }
  .an-bars .b:hover rect.bar { opacity: 1; }
  .an-rel a:hover b, .hub-card:hover b { color: inherit; }
  .hub-card:hover { box-shadow: inset 0 0 0 1px var(--cf-line); }
}
.an-pick__top { display: flex; gap: var(--cf-space-8); align-items: center; }
.an-pick__top .cf-search { flex: 1 1 auto; min-width: 0; }
.an-pick__x { display: none; flex: none; }
@media (max-width: 767px) { .an-pick__x { display: inline-grid; place-items: center; } }

/* Панели в одном ряду сетки одной высоты (строка сетки растягивает обе), а
   график внутри растёт на остаток: под графиком не остаётся пустоты, когда
   соседняя панель выше (решение Жени: пустот в раскладке не оставляем). */
.an-grid > .an-box { display: flex; flex-direction: column; }
.an-grid > .an-box > .an-chart { flex: 1 0 auto; }

/* SEO-текст - в самом низу страницы, компактно: мелкий спокойный шрифт,
   небольшие заголовки, две колонки текста на широком экране. На первом экране
   его нет (решение Жени 26.09.2026). */
.an-seo-foot { margin-top: var(--cf-space-44); padding-top: var(--cf-space-24); border-top: 1px solid var(--cf-line); }
.an-seo-foot .an-sec { margin-top: 0; }
.an-seo-foot .an-sec + .an-sec { margin-top: var(--cf-space-20); }
.an-seo-foot h2 { margin: 0 0 var(--cf-space-8) !important; font-size: 15px !important; font-weight: 600; letter-spacing: 0 !important; color: var(--cf-ink-2); }
.an-seo-foot .cf-prose { max-width: none; column-width: 34em; column-gap: var(--cf-space-32); }
.an-seo-foot .cf-prose p { margin: 0 0 var(--cf-space-8); font-size: 13.5px; line-height: 1.6; color: var(--cf-ink-3); }
.an-seo-foot a { color: var(--cf-ink-2); }

/* Pro-инструменты - две круглые иконки с меткой PRO в углу. */
.an-protools { gap: var(--cf-space-6); }
.an-protool { position: relative; }
.an-protool svg { width: 16px; height: 16px; margin: 0 !important; }
.an-protool[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--cf-z-popover); width: max-content;
  padding: 6px 9px; border-radius: var(--cf-radius-sm); background: var(--cf-tooltip-bg); color: var(--cf-tooltip-ink); box-shadow: var(--cf-shadow-tooltip);
  font-size: 12.5px; font-weight: 500; line-height: 1.3; opacity: 0; visibility: hidden; transition: opacity var(--cf-dur-fast) ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .an-protool:hover::after { opacity: 1; visibility: visible; } }
.an-protool:focus-visible::after { opacity: 1; visibility: visible; }

/* display:grid у .an-grid перебивал атрибут hidden: скрытый блок СЗКО
   показывался пустым на вкладке «Акции». */
.an-main [hidden] { display: none !important; }

/* Подвал таблицы - одна строка внутри карточки: слева «Показать ещё N»,
   «Показать все», «Свернуть», справа счётчик «20 из 107». */
.an-more { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12); flex-wrap: wrap;
  padding: var(--cf-space-10) var(--cf-space-16); border-top: 1px solid var(--cf-line); }
.an-more[hidden] { display: none; }
.an-more__b { display: flex; align-items: center; gap: var(--cf-space-6); flex-wrap: wrap; }
.an-more__link { display: inline-flex; align-items: center; gap: var(--cf-space-4); height: var(--cf-h-sm); padding: 0 var(--cf-space-10); border: 0;
  border-radius: var(--cf-radius-pill); background: none; color: var(--cf-accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.an-more__link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .an-more__link:hover { background: var(--cf-accent-soft); } }
.an-more__n { font-size: 13px; color: var(--cf-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) { .an-more__link, .an-more .cf-btn--sm { min-height: 42px; } }

/* Любой ряд сегментов в разделе листается вбок внутри себя, а не распирает
   страницу: на телефоне ряд классов в «Перекосах позиций» раздвигал экран
   до 459px (26.09.2026). */
.an-main .cf-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.an-main .cf-seg::-webkit-scrollbar { display: none; }
.an-main .cf-seg button { flex: none; white-space: nowrap; }
@media (max-width: 767px) { .sk-bar > * { max-width: 100%; } .sk-bar .cf-search { width: 100%; } }

/* Методика - вопросы в две колонки на всю ширину: одиночный список в 920px
   оставлял справа пустую половину экрана (26.09.2026). Раскрытый вопрос
   растит только свою строку сетки. */
.an-main .an-method { max-width: none; }
@media (min-width: 1100px) {
  .an-method .cf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cf-space-40); align-items: start; border-top: 0; }
  .an-method .cf-faq details:nth-child(-n+2) { border-top: 1px solid var(--cf-line); }
}

/* SEO-текст внизу - двумя сбалансированными колонками на всю ширину.
   Правило из seo.css (.an-seo .cf-prose { max-width: 74ch }) ужимало текст в
   одну узкую колонку и оставляло справа пустую половину. */
.an-seo-foot .an-seo .cf-prose { max-width: none; column-count: 2; column-gap: var(--cf-space-40); column-fill: balance; }
/* строки по одной: иначе баланс колонок шагает по две строки и одна колонка короче */
.an-seo-foot .an-seo .cf-prose p { orphans: 1; widows: 1; }
@media (max-width: 900px) { .an-seo-foot .an-seo .cf-prose { column-count: 1; } }

/* Оговорка 39-ФЗ под SEO-текстом - одной строкой на всю ширину, а не
   узким абзацем под левой колонкой (оставлял пустоту справа). */
.an-main .an-foot-disc { max-width: none; margin-top: var(--cf-space-16); padding-top: var(--cf-space-12); border-top: 1px solid var(--cf-line); font-size: 12.5px; line-height: 1.5; }