/* Каркас страницы abitup.ru (PR 42.2): утилиты вместо inline-стилей прототипа
   ui_kits/abitup-site/page.jsx. Токены — css/tokens/*, компоненты .au-* —
   css/components.css. Мобильный адаптив — PR 42.4. */

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

.site-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* Словомарка: текст abit_up, «up» — оранжевым (графический логотип не рисуем). */
.wordmark{font-family:var(--font-mono);font-weight:var(--weight-semibold);font-size:22px;letter-spacing:-.02em;color:var(--text-body)}
.wordmark--sm{font-size:15px}
.wordmark-accent{color:var(--accent)}
a.wordmark:hover{text-decoration:none;color:var(--text-body)}

/* Шапка */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface-page) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-1)}
.site-header-inner{height:60px;display:flex;align-items:center;gap:28px}
.site-nav{display:flex;gap:20px;font-family:var(--font-mono);font-size:var(--text-sm)}
.site-header-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.site-header-actions .site-channel-link{font-family:var(--font-mono);font-size:var(--text-sm)}

/* Hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--border-1)}
.hero-kicker{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--orange-400);margin-bottom:18px}
.hero-kicker-note{color:var(--text-faint)}
.hero-title{font-size:var(--text-2xl);max-width:900px}
.hero-lead{font-size:var(--text-md);color:var(--text-muted);max-width:640px;margin:20px 0 32px}
.hero-row{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap}
.hero-metric-value{font-size:72px;line-height:1}
.hero-actions{display:flex;gap:12px;padding-bottom:10px;flex-wrap:wrap}

/* Секции и их заголовки-«лейблы» */
.site-section{margin-top:var(--sp-7)}
.section-label{margin:56px auto 16px}
.section-label--flush{margin:0 0 16px}
.section-label h2{font-size:var(--text-xl);margin-top:6px}
.section-label .au-stat-label{color:var(--orange-400)}
.stack{display:grid;gap:var(--sp-5)}
/* Grid-элемент не сжимается ниже контента (min-width:auto) — карточка с
   широким SVG растянула бы страницу; скроллится .au-chart-scroll внутри. */
.stack>*{min-width:0}

/* Метод: три карточки-колонки */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.method-glyph{font-family:var(--font-mono);color:var(--orange-400);font-size:18px}
.method-card h3{font-size:var(--text-lg);margin:10px 0 8px}
.method-card p{margin:0;font-size:var(--text-sm);color:var(--text-muted)}
.method-links{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-sm)}

/* Донат и бот: QR слева, текст справа */
.split-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.split-row--center{align-items:center}
.split-body{flex:1;min-width:300px}
.split-body h3{font-size:var(--text-lg)}
.split-body--bot h3{font-size:var(--text-xl)}
.split-body .lead{font-size:var(--text-sm);color:var(--text-muted);margin:10px 0 18px;max-width:560px}
.purpose-list{margin:10px 0 16px;padding-left:18px;font-size:var(--text-sm);color:var(--text-muted);display:grid;gap:6px}
.qr-box{width:132px;height:132px;flex:none;border:1px solid var(--border-2);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.qr-box svg,.qr-box img{display:block;width:100%;height:100%}
.qr-placeholder{width:132px;height:132px;flex:none;border:1px dashed var(--border-2);border-radius:var(--radius-sm);display:grid;place-items:center;text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);padding:8px}
.donation-meter{display:grid;gap:6px;max-width:420px;margin-top:var(--sp-4)}
.donation-meter .au-stat-label{margin-top:2px}
.donation-meter svg{display:block}
.au-meter-fill-rect{fill:var(--orange-400)}

/* Графики (PR 42.3): контейнер скролла + палитра.
   Инлайновые style= запрещены (CSP default-src 'self'), var(--…) в
   presentation-атрибутах SVG не работает — цвета задаются этими классами
   (color:var(--токен)), примитивы рисуют fill/stroke="currentColor".
   Контракт классов — abitup.site.charts.base.CHART_COLOR_TOKENS (есть тест). */
.au-chart-scroll{overflow-x:auto;margin-top:20px}
/* Тултип значений, общий для графиков с марками data-chart-hit. */
.chart-plot{position:relative}
.chart-hit{cursor:default}
.chart-hit:focus{outline:none}
.chart-hit:hover rect,.chart-hit:focus rect{opacity:.78}
.chart-tooltip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 10px));
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;pointer-events:none;
  white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-1);
  background:var(--surface-raised);box-shadow:var(--shadow-raised);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.chart-tooltip b{color:var(--text-body);font-weight:var(--weight-semibold)}
.chart-tooltip[hidden]{display:none}
.au-chart-scroll svg{min-width:640px;width:100%;height:auto;display:block}
.au-chart-svg text{font-family:var(--font-mono)}
.au-chartcard-sub{margin:6px 0 0}
.au-chartcard-src{margin-top:14px}
.au-ch-c1{color:var(--chart-1)}
.au-ch-c2{color:var(--chart-2)}
.au-ch-c3{color:var(--chart-3)}
.au-ch-c4{color:var(--chart-4)}
.au-ch-c5{color:var(--chart-5)}
.au-ch-ok{color:var(--ok)}
.au-ch-danger{color:var(--danger)}
.au-ch-accent{color:var(--accent)}
.au-ch-grid{color:var(--chart-grid)}
.au-ch-axis{color:var(--chart-axis)}
.au-ch-muted{color:var(--text-muted)}
.au-ch-faint{color:var(--text-faint)}
.au-ch-track{color:var(--surface-inset)}
.au-ch-bar-bg{color:var(--bg-3)}
/* Наложение распределений (график 10): три области со своими заливками
   (только основной ряд / общая часть / только БВИ) и насыщенные контуры
   поверх них. Заливка и контур — разные токены: область крупная и должна
   быть светлой, линия мелкая и должна быть контрастной. */
.au-ch-ov-a{color:var(--chart-overlay-a)}
.au-ch-ov-b{color:var(--chart-overlay-b)}
.au-ch-ov-both{color:var(--chart-overlay-both)}
.au-ch-fill-a{color:var(--chart-fill-a)}
.au-ch-fill-b{color:var(--chart-fill-b)}
.au-ch-fill-both{color:var(--chart-fill-both)}

/* График 5 (разброс): слайдер «ваш балл», точки-вузы, легенда форм.
   Смысл не только цветом (BRIEF §7): pass-точка залита, fail-точка полая. */
.spread-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px}
.spread-slider{flex:1;min-width:200px;max-width:420px;accent-color:var(--accent)}
.spread-verdict{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}
.spread-verdict b{color:var(--text-body);font-weight:var(--weight-semibold)}
.spread-legend{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}
.spread-legend-pass{color:var(--ok)}
.spread-legend-fail{color:var(--danger)}
.au-spread-dot{stroke:currentColor;stroke-width:1.5}
.au-spread-dot.is-pass{color:var(--ok);fill:currentColor}
.au-spread-dot.is-fail{color:var(--danger);fill:none}
/* Наведение/фокус: точка подрастает — видно, к какому вузу относится тултип. */
.au-spread-dot:hover,.au-spread-dot:focus{r:8;outline:none}
/* Тултип вуза: 63 точки подписать на ленте негде, название раскрывается
   по наведению и по фокусу с клавиатуры. Позиционируется от кружка. */
.spread-plot{position:relative}
.spread-tooltip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 12px));
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;pointer-events:none;
  white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-1);
  background:var(--surface-raised);box-shadow:var(--shadow-raised);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.spread-tooltip b{color:var(--text-body);font-weight:var(--weight-semibold);
  white-space:normal;max-width:280px}
.spread-tooltip[hidden]{display:none}
/* График 1 (пульс): узлы линий с тултипом. Цель наведения (.pulse-node-hit)
   крупнее самой марки — в кружок r=3.5 попасть мышью трудно. */
.pulse-plot{position:relative}
.pulse-node{cursor:default}
.pulse-node:focus{outline:none}
.pulse-node:focus .pulse-node-hit,.pulse-node:hover .pulse-node-hit{
  fill:currentColor;fill-opacity:.16}
.pulse-tooltip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 14px));
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;pointer-events:none;
  white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-1);
  background:var(--surface-raised);box-shadow:var(--shadow-raised);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.pulse-tooltip b{color:var(--text-body);font-weight:var(--weight-semibold)}
.pulse-tooltip[hidden]{display:none}

/* График 1: переключатель шкалы. Обе геометрии в SVG, класс контейнера
   решает, какая видна — без JS остаётся линейная. */
.pulse-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.pulse-controls-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}
.pulse-controls-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}
.pulse-switch{display:inline-flex;border:1px solid var(--border-1);border-radius:var(--radius-sm);overflow:hidden}
.pulse-switch-btn{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:5px 12px;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-muted)}
.pulse-switch-btn+.pulse-switch-btn{border-left:1px solid var(--border-1)}
.pulse-switch-btn.is-active{background:var(--surface-raised);color:var(--text-body)}
.pulse-switch-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Видна геометрия, соответствующая режиму контейнера. */
.pulse-plot .pulse-geom{display:none}
.pulse-plot.is-linear .pulse-geom--linear{display:block}
.pulse-plot.is-log .pulse-geom--log{display:block}

/* График 12 (приход по дням): столбики с тултипом. */
.daily-plot{position:relative}
.daily-bar{cursor:default}
.daily-bar:focus{outline:none}
.daily-bar:hover rect,.daily-bar:focus rect{opacity:.75}
.daily-tooltip{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 10px));
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;pointer-events:none;
  white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-1);
  background:var(--surface-raised);box-shadow:var(--shadow-raised);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.daily-tooltip b{color:var(--text-body);font-weight:var(--weight-semibold)}
.daily-tooltip[hidden]{display:none}

/* График 2: подпись к дневной полосе потоков. */
.flows-daily-caption{margin:18px 0 2px;font-family:var(--font-mono);
  font-size:var(--text-xs);color:var(--text-faint)}

/* График 6 (кейс 247): таблица вердиктов. Подложки green/red-dim — плюс
   текстовые метки au-badge (смысл не только цветом, BRIEF §7). */
.case-summary{margin:20px 0 0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}
.case-table-wrap{max-height:560px;overflow-y:auto;margin-top:14px;border:1px solid var(--border-1);border-radius:var(--radius-sm)}
.case-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.case-table th{position:sticky;top:0;background:var(--surface-raised);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-faint);text-align:left;padding:8px 12px}
.case-table td{padding:7px 12px;border-top:1px solid var(--border-1);vertical-align:top}
.case-table .case-num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.case-table .case-verdict{text-align:right;white-space:nowrap}
.case-table .case-city{color:var(--text-muted);white-space:nowrap}
.case-table tr.is-pass td{background:var(--green-dim)}
.case-table tr.is-fail td{background:var(--red-dim)}
.case-table tr.is-pass .case-margin{color:var(--ok)}
.case-table tr.is-fail .case-margin{color:var(--danger)}
/* Свёрнутая середина списка: нейтральная строка-разделитель между краями. */
.case-table tr.is-ellipsis td{color:var(--text-faint);font-size:var(--text-xs)}
.case-table .case-skipped{color:var(--text-faint);white-space:nowrap}

/* График 7 (дрейф): обязательный дисклеймер на самой карточке */
.chart-disclaimer{margin:12px 0 0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--warn)}

/* Блок «сила метода»: мостик к донату */
.power-bridge{margin:18px 0 0;font-size:var(--text-sm);color:var(--text-muted)}

/* Статы над графиком 1 (одометры) и метр графика 9 */
.chart-stats{display:flex;gap:56px;margin-bottom:8px;flex-wrap:wrap}
.chart-stats .au-stat-value{font-size:44px;line-height:1.1}
.fill-meter{display:grid;gap:6px;max-width:520px;margin-top:var(--sp-4)}
.fill-meter svg{display:block}

/* Дисклеймер страницы */
.site-disclaimer{margin-top:var(--sp-6)}

/* Футер */
.site-footer{border-top:1px solid var(--border-1);margin-top:var(--sp-8)}
.site-footer-inner{padding:28px var(--gutter) 40px;display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}
.site-footer-links{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}

/* --- Мобильный адаптив (PR 42.4, BRIEF §7) ------------------------------
   Ядро (графики 5, 6) читается на 390px; широкие SVG скроллятся ТОЛЬКО
   внутри .au-chart-scroll (горизонтальный скролл задан там выше) — сама
   страница по горизонтали не едет. */

@media (max-width: 720px){
  /* Шапка: канал есть в футере — на узком экране прячем ссылку из шапки;
     остальное ужимается и при нехватке места переносится, не растягивая
     страницу. */
  .site-header-inner{gap:12px;flex-wrap:wrap;height:auto;min-height:52px;padding:8px 0}
  .site-header-actions{gap:8px}
  .site-header-actions .site-channel-link{display:none}
  .site-header .wordmark{font-size:18px}
  .site-nav{gap:12px;font-size:var(--text-xs)}
  /* Hero: цифра не упирается в край. */
  .hero{padding:48px 0 40px}
  .hero-metric-value{font-size:52px}
  .chart-stats{gap:24px}
  .chart-stats .au-stat-value{font-size:32px}
  /* Метод: три колонки складываются в одну. */
  .method-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  /* График 5: слайдер во всю ширину, счётчик и легенда — под ним. */
  .spread-slider{flex-basis:100%;max-width:none}
  /* График 6: компактная таблица кейса — без колонки города, плотнее;
     колонка «итог» с текстовой меткой остаётся видимой без скролла. */
  .case-table .case-city{display:none}
  .case-table th,.case-table td{padding:6px 5px}
  .case-table .case-univ{padding-left:8px}
  .case-table .case-verdict{padding-right:8px}
  .case-table{font-size:var(--text-xs)}
  .case-table .au-badge{height:18px;padding:0 4px;font-size:10px}
  .case-table-wrap{max-height:480px}
}

@media (max-width: 480px){
  /* Совсем узко: прячем и отсечку (выводится из запаса: балл − запас);
     остаются вуз, запас со знаком и текстовый вердикт — без скролла. */
  .case-table .case-cutoff{display:none}
}

/* --- Consent-плашка и /privacy/ (PR 42.6; план 62 — opt-out; план 71 —
   модалка; план 72 — полупрозрачная полоса) --- */
/* План 72 (по просьбе пользователя): плашка НЕ мешает смотреть данные.
   Затемняющий оверлей и inert-фон плана 71 убраны — страница кликабельна и
   читаема, пока плашка висит. Полоса прижата к низу, занимает 1/8 высоты
   экрана (12.5vh) и полупрозрачна: сквозь неё виден контент под ней.

   Прозрачность — 0.78 альфы (то есть ~22% прозрачности, в запрошенном
   диапазоне 20–30%). Фон задаётся не var(--surface-card), а rgb(...) с
   альфой: токен — сплошной цвет, прозрачность из него не получить.
   backdrop-filter слегка размывает подложку, чтобы текст оставался читаемым
   поверх графиков. */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;height:12.5vh;min-height:84px;box-sizing:border-box;padding:12px var(--gutter);background:rgb(29 25 22 / .78);backdrop-filter:blur(6px);border:0;border-top:1px solid var(--border-1);border-radius:0;box-shadow:var(--shadow-modal);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px 20px;overflow:hidden}
[data-theme="light"] .consent-banner{background:rgb(255 255 255 / .78)}
.consent-banner[hidden]{display:none}
/* Полоса низкая — текст ужимается, поэтому заголовок и описание в колонку,
   а кнопки отдельным блоком справа. */
.consent-text{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:720px}
/* Метка региона (aria-labelledby): региону без имени скринридер не даёт
   ориентира. Кегль небольшой — полоса в 1/8 экрана. */
.consent-title{margin:0;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-body)}
.consent-desc{margin:0;font-size:var(--text-xs);line-height:1.45;color:var(--text-muted)}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.consent-actions [hidden]{display:none}
/* Низкие окна: 12.5vh перестаёт вмещать текст — отпускаем высоту по контенту,
   иначе строки обрежутся overflow:hidden. */
@media (max-height:600px){
  .consent-banner{height:auto;min-height:0}
}
/* Узкие экраны: текст в колонку, кнопка справа от него — так полоса остаётся
   близко к 1/8 экрана. В строку «заголовок + текст + кнопка» здесь не влезть,
   а трёхстрочный текст с кнопкой под ним раздувал полосу до 1/5. */
@media (max-width:720px){
  .consent-banner{height:12.5vh;min-height:96px;padding:10px 14px;align-items:center;justify-content:space-between;gap:12px}
  .consent-text{flex:1 1 auto}
  .consent-actions{flex-direction:column;align-items:stretch}
}
/* Совсем узкие (<=420px): заголовок съедает строку, которой не хватает
   тексту, — прячем его. Метка региона остаётся у скринридера через
   aria-labelledby, для глаз хватает самого текста. Вторая фраза
   («Персональные данные не собираются») тоже скрывается: на 390px она уводит
   полосу за 1/8, а на /privacy/ сказано то же самое и полнее. Скрываем
   именно visually-hidden, а не display:none — скринридер читает текст
   целиком, обещание не теряется. */
@media (max-width:420px){
  .consent-title,.consent-desc-more{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .consent-banner{min-height:88px}
}
/* Кнопка-ссылка в футере («Настройки данных»): без формы кнопки. */
.link-button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
.link-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* /privacy/ */
.privacy-page{max-width:760px;margin-left:auto;margin-right:auto;padding-bottom:var(--sp-7)}
.privacy-page h1{font-size:var(--text-xl);margin:0 0 var(--sp-4)}
.privacy-section{margin-top:var(--sp-4)}
.privacy-section h2{font-size:var(--text-md);margin:0 0 10px}
.privacy-section p{margin:0 0 10px;font-size:var(--text-sm);color:var(--text-muted)}
.privacy-section p:last-child{margin-bottom:0}
.privacy-links{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:var(--text-sm)}
a.wordmark-link{text-decoration:none}