/* Вкладка «Модель ROI». Довесок к общему CSS сайта, а не замена.

   Движок графиков берёт цвета из CSS-переменных (--s1, --ord-*, --div-*), поэтому
   тут они и задаются: значения — тёмная палитра исходного отчёта, посадочные
   поверхности подменены на переменные сайта. Палитра проверена валидатором dataviz
   против тёмной поверхности: полоса светлоты, порог цветности, разделение под CVD
   (худшая пара ΔE 9.4 deutan), нормальное зрение (26.5) и контраст — все PASS.

   Слоты серий --s1..--s6 с 16.09.2026 живут в app.css: те же три тона плюс ещё
   три того же семейства нужны главной вкладке для кривых выбранных строк,
   и держать их в двух файлах значило бы снова синхронизировать руками. */
:root{
  --surface-1: var(--panel);
  --ink-1: var(--txt);
  --ink-2: #c3c2b7;
  --ink-muted: var(--dim);
  --grid: #2c2c2a;
  --axis: #3a3444;
  --ord-1: #b7d3f6; --ord-2: #86b6ef; --ord-3: #3987e5; --ord-4: #256abf; --ord-5: #184f95;
  --div-pos-3: #b7d3f6; --div-pos-2: #3987e5; --div-pos-1: #1c5cab;
  --div-mid: #383835;
  --div-neg-1: #7d2523; --div-neg-2: #e34948; --div-neg-3: #f0a9a8;
  /* Зелёно-серо-красная шкала лестницы: там знак означает «лучше/хуже поля»,
     а не просто две стороны от нуля, и сине-красная читалась как нейтральная
     пара. Светлота идёт полосой в обе стороны от серого центра, как в --div-*;
     зелёный взят от --s3 (#199e70), уже проверенного в палитре отчёта. */
  --gsr-pos-1: #145c45; --gsr-pos-2: #199e70; --gsr-pos-3: #7fd3b4;
  --gsr-mid: #383835;
  --gsr-neg-1: #7d2523; --gsr-neg-2: #e34948; --gsr-neg-3: #f0a9a8;
  --success-text: #3ddc84; --critical: #ff5c5c; --warning: #fab219;
  /* Шаг сетки и плотность: два режима отличаются только этими числами */
  --pgap: 12px; --ppad: 10px;
}
:root[data-pdens=cozy]{ --pgap: 16px; --ppad: 14px; }

/* Мера строки. Без неё на мониторе 2400 px карточка растягивается во всю ширину,
   и один график занимает экран целиком — ровно то, из-за чего всё переделывалось. */
.predict{max-width:1600px}

/* Оглавление вкладки: та же форма, что .tabs сайта, но якоря внутри страницы */
.ptabs{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:8px 0 14px;
  position:sticky;top:38px;z-index:8;background:var(--bg);padding:5px 0}
.ptabs a{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:4px 10px;color:var(--dim);font-size:11.5px}
.ptabs a:hover{color:var(--txt);text-decoration:none;border-color:var(--acc2)}
.ptabs .sp{flex:1}
.ptabs button{padding:4px 10px;font-size:11.5px;background:var(--panel2);color:var(--dim);
  border:1px solid var(--line);border-radius:6px;font-weight:500}
.ptabs button:hover{color:var(--txt);border-color:var(--acc2);background:var(--panel2)}

section{scroll-margin-top:92px}
h2.pan{margin:18px 0 6px}
.pnote{color:var(--dim);max-width:92ch;margin:4px 0 10px;font-size:12.5px}

/* Сетка карточек. Графику нужна ширина от 420 px — уже этого подписи корзин
   начинают наезжать друг на друга, поэтому колонок ровно столько, сколько влезет. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:var(--pgap);align-items:start}
.pgrid.wide{grid-template-columns:1fr}
/* Без min-width:0 ячейка сетки не сжимается ниже своего min-content, и широкий
   холст распирает страницу в горизонтальный скролл вместо того, чтобы ужаться */
.pgrid>*{min-width:0}

.chart{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:var(--ppad);margin:0 0 var(--pgap);position:relative;overflow:hidden}
/* Ключевой график раздела: крупнее шрифты подписей и чуть светлее рамка,
   чтобы в потоке одинаковых карточек он читался как главный */
.chart.hero{border-color:#3a3444}
.chart.hero .ptitle{font-size:13px}
.chart.hero .plgnd{font-size:11.5px}
.pgrid .chart{margin:0}
/* Холст рисуется в пикселях контейнера; width:100% — страховка на момент между
   сменой раскладки и перерисовкой по ResizeObserver: масштаб только вниз */
.chart svg{display:block;width:100%;height:auto}
.chart.loading{opacity:.55}
/* Раздел «Фонд» во время запроса: видно, что клик принят, а не потерян в сети */
#fund.pbusy>*:not(.fbar):not(h2){opacity:.45;pointer-events:none;transition:opacity .15s}
#fund.pbusy .ptitle::after{content:" · загрузка…";color:var(--dim);font-weight:400;font-size:11px}
.ptitle{font-size:12px;font-weight:600;margin-bottom:6px;line-height:1.35}
.ptitle .pdim{color:var(--dim);font-weight:400;margin-left:6px;font-size:11px}

/* Легенда — обязательный канал идентичности от двух серий и выше */
.plgnd{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 6px 2px;
  color:var(--dim);font-size:11px}
.plgnd span{display:inline-flex;align-items:center;gap:5px}
.plgnd i{width:9px;height:9px;border-radius:2px;display:inline-block}

.ptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 6px}
.ptools span{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.ptools a{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;color:var(--txt);font-size:11.5px}
.ptools a.off{opacity:.35;pointer-events:none}
.prow{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.prow input[type=range]{width:min(320px,42%);accent-color:var(--acc2)}
/* Статус рядом с ползунком: сколько корзин скрыто при этом пороге */
.prow .pdim{color:var(--dim);font-size:11px}

/* Переключатели методики: состояние видно на самой кнопке, панель не нужна */
.fbar{gap:6px}
.pchips{display:inline-flex;gap:4px;flex-wrap:wrap}
.pchip{background:var(--panel2);border:1px solid var(--line);border-radius:13px;
  padding:3px 10px;color:var(--dim);font-size:11.5px;cursor:pointer;user-select:none}
.pchip:hover{border-color:var(--acc2)}
.pchip.on{background:#2a1020;border-color:var(--acc);color:#fff}
.ptgl{display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;padding:4px 10px;cursor:pointer;font-size:11.5px}
.ptgl b{font-weight:600}
.ptgl.on{border-color:var(--acc);background:#2a1020}
.ptgl small{color:var(--dim)}
.pdate,.pnum{background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:3px 7px;color:var(--txt);font-size:11.5px;color-scheme:dark}
.pnum{width:64px}
.pdate:focus,.pnum:focus{outline:none;border-color:var(--acc2)}
.pgroup{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-right:4px}
.pgroup>span{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}

/* Пресет методики — главный выбор раздела «Фонд», крупнее обычных чипов */
.pchips-lg{gap:8px}
.pchips-lg .pchip{padding:7px 16px;font-size:13px;border-radius:16px}
.pchips-lg .pchip.on{box-shadow:0 0 0 1px var(--acc)}

/* «Своя методика» свёрнута по умолчанию — это тонкая настройка, не главный выбор */
#methodWrap{margin:8px 0 4px}
#methodWrap>summary{cursor:pointer;color:var(--dim);font-size:12px;list-style:revert;padding:2px 0}
#methodWrap>summary:hover{color:var(--ink-2)}
#methodWrap[open]>summary{margin-bottom:6px}

/* Плитки вердикта: значения крупные, но пропорциональными цифрами —
   tabular-nums на таком кегле разваливает число на части */
.grid{gap:var(--pgap)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;min-width:0;flex:1 1 168px;max-width:280px}
.tile .k{font-size:11.5px;color:var(--dim);line-height:1.3}
.tile .v{font-size:21px;font-weight:600;margin:1px 0}
.tile .n{font-size:11.5px;color:var(--ink-2);line-height:1.3}
.tile.pos .v{color:var(--success-text)}
.tile.neg .v{color:var(--critical)}

.banner{display:flex;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-left-width:3px;border-radius:8px;padding:8px 12px;margin-bottom:6px;max-width:104ch}
.banner.ok{border-left-color:var(--good)}
.banner.bad{border-left-color:var(--bad)}
.banner.warn{border-left-color:var(--warning)}
.banner b{display:block;margin-bottom:2px;font-size:12.5px}
.banner span span{color:var(--dim);font-size:12px}

/* Калькулятор: число, интервал, формула, выборка, предупреждения — сверху вниз
   одной колонкой. Прежние плитки-слагаемые убраны: они выглядели независимыми
   замерами, а уровень и ступень связаны тождеством и читаются одной строкой. */
.pcalc{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pcalc .big{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  border-left-width:3px;padding:12px 16px;min-width:186px;display:flex;gap:14px;align-items:baseline}
.pcalc .big.st-green{border-left-color:var(--good)}
.pcalc .big.st-yellow{border-left-color:var(--warning)}
.pcalc .big.st-red{border-left-color:var(--bad)}
.pcalc .big.st-none{border-left-color:var(--line)}
.pcalc .big .k{color:var(--dim);font-size:11.5px}
.pcalc .big .v{font-size:27px;font-weight:600;font-variant-numeric:tabular-nums}
.pcalc .big .n{color:var(--dim);font-size:11.5px}
.plight{font-size:11.5px;border-radius:99px;padding:2px 9px;border:1px solid var(--line)}
.plight.green{color:var(--success-text);border-color:var(--good)}
.plight.yellow{color:var(--warning);border-color:var(--warning)}
.plight.red{color:var(--critical);border-color:var(--bad)}
.pcalc .pform{font-size:15px;font-variant-numeric:tabular-nums}
.pcalc .pform .dim{color:var(--dim)}
.pcalc .pform .op{color:var(--dim)}
.pcalc .pn{color:var(--dim);font-size:12px}
.pwarn{margin:2px 0;padding:6px 12px;border:1px solid var(--line);border-left-width:3px;
  border-radius:8px;background:var(--panel);font-size:12.5px;max-width:104ch}
ul.pwarn{padding-left:28px}
.pwarn.warn{border-left-color:var(--warning)}
.pwarn.bad{border-left-color:var(--bad)}
.pwarn li{margin:2px 0}

/* Разбор: сводка, таблица сочетаний, разложение премии, пять сверок */
.pchecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:8px;margin-top:8px}
.pchk{background:var(--panel);border:1px solid var(--line);border-left-width:3px;
  border-radius:8px;padding:8px 12px;font-size:12.5px}
.pchk.ok{border-left-color:var(--good)}
.pchk.bad{border-left-color:var(--bad)}
.pchk.info{border-left-color:var(--line)}
.pchk .v{font-variant-numeric:tabular-nums;font-weight:600}
.pchk .n,.pchk .d{color:var(--dim);font-size:11.5px}
.pchk .d{margin-top:3px}
td.st-green{color:var(--success-text)}
td.st-yellow{color:var(--warning)}
td.st-red{color:var(--critical)}
td.st-none{color:var(--dim)}

/* Три карточки «что делать» рядом, на узком экране — в столбик */
.pcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--pgap)}
.pcols .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin:0}
.pcols .card b{display:block;margin-bottom:5px}
.pcols ul,.pcav{margin:0;padding-left:17px;color:var(--dim);font-size:12px}
.pcols li,.pcav li{margin:4px 0}
.pcav{max-width:104ch}
.pcav b{color:var(--txt)}
code{background:var(--panel2);border-radius:4px;padding:1px 5px;font-size:11.5px}

/* Таблица-двойник графика: числа те же, но их можно скопировать.
   Высота ограничена — иначе 200 строк дрилл-дауна уводят страницу на километр. */
.scroll{max-height:420px;overflow:auto;margin-bottom:var(--pgap)}
.scroll table{width:100%}

/* Сортировка по клику на заголовок: курсор важнее подсказки — ⓘ остаётся значком,
   но hover-курсор «help» здесь перекрывается явным «pointer». */
.predict th.psort,.predict th.psort[data-help]{cursor:pointer}
.predict th.psort{user-select:none;white-space:nowrap}
.predict th.psort:hover{color:var(--txt)}
.predict th.psort.asc::before,.predict th.psort.desc::before{
  content:"▲";display:inline-block;margin-right:5px;font-size:.7em;color:var(--acc2)}
.predict th.psort.desc::before{content:"▼"}

/* Строка-триггер дрилл-дауна (tFund): клик открывает «Строки турниров разреза» */
.predict tr.prow-pick{cursor:pointer}
.predict tr.prow-pick:hover td{background:#2a2432}

#tip{display:block;opacity:0;transition:opacity .08s;position:fixed;
  background:var(--panel3);border:1px solid var(--line);border-radius:6px;padding:6px 9px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;pointer-events:none;z-index:50;
  box-shadow:0 4px 14px #0008}
#tip .t{font-weight:600;margin-bottom:3px}
#tip .r{display:flex;gap:14px;justify-content:space-between}
#tip .r span{color:var(--dim)}
/* Подсказка о данных: тот же #tip, но текст многострочный, а не пары «метка—число» */
#tip.help{white-space:normal;max-width:360px}
#tip.help .h{color:var(--ink-2);font-weight:400}
.pempty{color:var(--dim);padding:12px;font-size:12px}

/* Подвкладки «Данные · О модели»: форма .tabs сайта, переключение в predict.js */
.psub{margin:8px 0 10px}
.psub a{cursor:pointer;font-size:12px}
.predict [hidden]{display:none!important}

/* Элемент с описанием данных: курсор-вопрос и значок после заголовка.
   Значок только у заголовков — на чипах и тумблерах он превратился бы в шум,
   подсказка там есть по наведению без маркера. */
.predict [data-help]{cursor:help}
.predict h2[data-help]::after,.predict .ptitle[data-help]::after,
.predict th[data-help]::after,.predict .tile .k[data-help]::after,
.predict .pgroup>span[data-help]::after,.predict .ptools>span[data-help]::after,
.predict .pcalc .k[data-help]::after{
  content:"\24D8";margin-left:5px;color:var(--dim);font-weight:400;font-size:.95em;opacity:.75}
.predict th[data-help]::after{margin-left:3px;font-size:.9em}

/* Подвкладка «О модели»: проза, снятая с главной — выводы, что делать, оговорки */
.about{max-width:110ch}
.about h2.pan{margin-top:16px}
.about p{color:var(--ink-2);font-size:12.5px;max-width:92ch;margin:4px 0 10px}
.about .pcav{display:block}
/* Раздел «Покрытие» переехал сюда с вкладки «Данные». Проза читается узкой колонкой
   (110ch), но трём графикам в ней хватает места только на одну колонку.
   Снимаем ограничение на самой подвкладке, а колонку прозы возвращаем её детям:
   привязка к 100vw тут не годится — она не знает про шапку и поля страницы,
   и на узком окне раздел вылезал за габарит контейнера. */
.about{max-width:none}
.about>:not(#coverage){max-width:110ch}
.about #coverage{margin-top:22px}