/* =====================================================================================
   SHUYA · дашборд · единая таблица стилей
   Один файл на все разделы: опционная книга, стратегии, новости, вход.
   Источник правил: брендбук SHUYA CAPITAL (DESIGN.md v2.0, ред. 20.10.2026).

   Принципы, которые здесь зашиты и которые нельзя «подправить на месте»:
   - Тема только светлая (брендбук §4). Тёмных блоков нет намеренно.
   - Никаких #000 и #fff: все нейтрали тонированы cream (§2).
   - amber #C08A3B и red #B52A1C: для плашек и графики. Текст-выделение: ochre #76501F.
     Контраст пар ниже посчитан, а не прикинут (числа в комментариях к токенам).
   - Цифры: IBM Plex Sans + tnum. Моноширинные шрифты для метрик запрещены (§3).
   - Без side-stripe рамок (border-left 3px+) у блоков, без градиентов, без glassmorphism,
     без вложенных карточек (§6, §9). Состояние передаётся плашкой со словом.
   - Карточки только для метрик. Разделы отделяются воздухом и тонкой линией.
   Нейминг: плоские классы по смыслу (.kpi, .table, .plaque), модификаторы через --.
   ===================================================================================== */

:root {
  color-scheme: light;

  /* Поверхности */
  --bg:          #FAF8F2;  /* фон страницы (bg-cream) */
  --bg-soft:     #F1EFE6;  /* шапка таблицы, ячейки метрик, hover строки */
  --bg-panel:    #EBE9DD;  /* раскрытая строка, нажатая кнопка */

  /* Текст. Контраст на --bg / на --bg-soft */
  --ink:         #3E4543;  /* graphite: основной текст, 9.25 / 8.53 */
  --ink-2:       #555B58;  /* graphite-soft: вторичный, 6.54 / 6.03 */
  --ink-3:       #646964;  /* graphite-mute: подписи, 5.28 / 4.87. На тонированных плашках НЕ использовать */

  /* Линии */
  --line:        #D8DAD0;  /* рамки, разделители строк */
  --line-strong: #C9CDC4;  /* sage-grey: рамки контролов */
  --bar:         #E2E1D8;  /* дорожка баров, сетка графиков */
  --rule:        #3E4543;  /* итоговая черта таблицы */

  /* Бренд */
  --forest:      #1F4636;  /* главный акцент: активная навигация, кнопки, позитив. 9.95 */
  --forest-deep: #163225;  /* hover / active */
  --sage:        #58726A;  /* метки разделов (eyebrow). 4.91 на --bg; на --bg-panel 4.28, там не ставить */
  --sage-light:  #A8BFA1;  /* мягкие акценты графики */
  --amber:       #C08A3B;  /* бары, плашки. Как текст на cream 2.85: ЗАПРЕЩЕНО */
  --ochre:       #76501F;  /* выделение в тексте, текст предупреждений. 6.73 */
  --red:         #B52A1C;  /* негатив. Текст на cream 5.97 */

  /* Семантика */
  --pos:         var(--forest);
  --neg:         var(--red);
  --pos-tint:    #E4EAE0;  /* фон плашки «позитив»: forest 8.63 */
  --neg-tint:    #F5E6E0;  /* фон плашки «негатив»: red 5.22 */
  --warn-tint:   #EDE0CA;  /* фон плашки «внимание»: ochre 5.49 */

  /* Серии на графиках. Проверено валидатором палитры на --bg: CVD ΔE ≥ 11.7 для всех пар.
     amber как линия даёт 2.85:1 к фону, поэтому у серий ВСЕГДА легенда + прямая подпись
     у конца линии + табличный вид. Бенчмарки (базовые активы) рисуются пунктиром --ink-3. */
  --s-nv:        #1F4636;  /* счёт NV */
  --s-nv2:       #C08A3B;  /* счёт NV2 */
  --s-ds:        #6B4C7A;  /* счёт DS live */
  --s-km:        #6B4C7A;  /* счёт KM (paper) */
  --s-bench:     #646964;  /* базовый актив, пунктир */
  --s-bench-2:   #58726A;  /* второй базовый актив (sage), тоже пунктиром */
  --s-all:       #3E4543;  /* сумма счетов на графиках стратегий (graphite) */

  /* Типографика */
  --f-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-num:     "IBM Plex Sans", "Inter", system-ui, sans-serif;

  --t-micro: 10.5px;  /* метки колонок, eyebrow */
  --t-xs:    12px;    /* подписи, мета */
  --t-sm:    13px;    /* таблицы, контролы */
  --t-base:  14px;    /* текст */
  --t-md:    16px;    /* заголовок блока (h3), заголовок новости */
  --t-lg:    19px;    /* заголовок раздела (h2) */
  --t-xl:    28px;    /* заголовок страницы (h1) */
  --t-kpi:   24px;    /* значение метрики */

  /* Ритм. Отступы варьируются (брендбук §6): внутри блока 8–16, между блоками 32–48 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --radius: 2px;
  --page-max: 1760px;                    /* контент растёт до 1760px, дальше масштаб (см. «Экраны») */
  --gutter: clamp(16px, 3vw, 48px);      /* боковое поле страницы */
  --ease: cubic-bezier(.25, 1, .5, 1); /* ease-out-quart, §8 */
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-base)/1.5 var(--f-body);
  font-feature-settings: "cv11" 1; /* Inter: однозначная «1» */
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); color: var(--ink); text-wrap: balance; }
p { margin: 0; }
a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--forest); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
::selection { background: var(--sage-light); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }

.num, .tnum { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--ink-3); }
.hl { color: var(--ochre); font-weight: 600; }          /* выделение в тексте (не amber) */
.est::before { content: "≈ "; color: var(--ink-3); }     /* модельная оценка */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Метка-eyebrow: Montserrat 500 uppercase, разрядка. Цвет sage. */
.eyebrow {
  font: 500 var(--t-micro)/1.3 var(--f-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage);
}

/* ---------- Каркас приложения ---------- */
.app-bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.app-bar__inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 64px;
}
.brand { display: inline-flex; flex: none; line-height: 0; }
.brand img { height: 32px; width: auto; }      /* shuya-lockup-h64.png, 2x. Минимум бренда: 24px */
.app-nav { display: flex; gap: var(--s-5); align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.app-nav a {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; padding-top: 2px;
}
.app-nav a:hover { color: var(--forest); }
.app-nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--forest); }
.app-user { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.app-user b { color: var(--ink); font-weight: 500; }

/* Вторая строка навигации (раздел «Новости») */
.subnav { border-bottom: 1px solid var(--line); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.subnav__inner { max-width: var(--page-max); margin: 0 auto; display: flex; gap: var(--s-5); align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--forest); }
.subnav__sep { width: 1px; background: var(--line); margin-block: 12px; flex: none; }
.subnav a.is-secondary { color: var(--ink-3); }

.page {
  max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; /* поля внутри, как у шапки */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-block: var(--s-6) var(--s-7);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7);
}

/* Шапка страницы */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-6); align-items: end; }
.page-head__title { display: grid; gap: var(--s-2); }
.page-head h1 { font-size: var(--t-xl); font-weight: 400; letter-spacing: -.005em; line-height: 1.15; }
.page-head .lead { color: var(--ink-2); max-width: 72ch; }
.page-head__meta { display: grid; gap: 6px; justify-items: end; text-align: right; }
@media (max-width: 760px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-head__meta { justify-items: start; text-align: left; }
}

/* Статус свежести: точка + слова. Цвет никогда не единственный носитель. */
.status { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--t-xs); color: var(--ink-2); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); flex: none; transform: translateY(-1px); }
.status--stale::before { background: var(--amber); }
.status--error::before { background: var(--red); }
.status--error { color: var(--red); }
.status b { color: var(--ink); font-weight: 500; }
.meta-line { font-size: var(--t-xs); color: var(--ink-3); }
.meta-line .tnum { color: var(--ink-2); }

/* ---------- Панель фильтров ---------- */
.toolbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--bg);
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5);
  margin-block: calc(var(--s-7) * -1 + var(--s-5)) 0; /* прижата к шапке страницы */
}
.toolbar__end { margin-left: auto; display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }
.toolbar__scope { width: 100%; font-size: var(--t-xs); color: var(--ink-2); }
.toolbar__scope b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .toolbar { position: static; } .toolbar__end { margin-left: 0; } }

.field { display: grid; gap: 5px; min-width: 0; }
.field__label { font: 500 var(--t-micro)/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.field__row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.select, .input {
  height: 32px; min-width: 0; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background-color: var(--bg); color: var(--ink);
  padding: 0 10px; font-size: var(--t-sm);
}
.select {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.select:hover, .input:hover { border-color: var(--ink-3); }
.input[type="search"] { width: 240px; }
.input[type="date"] { font-family: var(--f-num); font-feature-settings: "tnum" 1; }
.textarea {
  width: 100%; min-height: 76px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg); padding: 8px 10px; font-size: var(--t-sm); line-height: 1.5;
}
.check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--forest); }

/* Кнопки. Primary один на экран. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--radius);
  font: 500 var(--t-sm)/1 var(--f-body); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { border-color: var(--ink-3); background: var(--bg-soft); }
.btn--primary { background: var(--forest); border-color: var(--forest); color: var(--bg); }
.btn--primary:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-soft); border-color: transparent; color: var(--ink); }
.btn--link { height: auto; padding: 0; border: 0; background: none; color: var(--forest); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.btn--link:hover { background: none; text-decoration-color: var(--forest); }
.btn--lg { height: 44px; font-size: var(--t-base); padding: 0 20px; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* Сегментированный переключатель */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.seg button {
  height: 30px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--bg-soft); }
.seg button[aria-pressed="true"] { background: var(--forest); color: var(--bg); }

/* ---------- Разделы ---------- */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.section__titles { display: grid; gap: 6px; max-width: 78ch; }
.section h2 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.section .lead { font-size: var(--t-sm); color: var(--ink-2); }
.section__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
h3, .h3 { font-size: var(--t-md); font-weight: 500; line-height: 1.3; }

.grid-2 { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.grid-2 > * { min-width: 0; }

/* Примечание: фон soft, метка словом. Без цветной полосы сбоку. */
.callout { background: var(--bg-soft); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--ink-2); max-width: 100%; }
.callout b { color: var(--ink); }
.callout__label { font: 600 var(--t-micro)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); margin-right: 8px; }

/* ---------- Метрики (единственное место для «карточек») ---------- */
.kpis {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.kpi { background: var(--bg-soft); padding: var(--s-3) var(--s-4) 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.kpi__label { font: 500 var(--t-micro)/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kpi__value { font: 600 var(--t-kpi)/1.15 var(--f-num); font-feature-settings: "tnum" 1; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.kpi__value small { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.kpi__note { font-size: var(--t-xs); color: var(--ink-3); }
.kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi__value { font-size: 20px; } }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--bg); }
.table-wrap--scroll { max-height: 560px; overflow: auto; }
.table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-soft); text-align: left; white-space: nowrap;
  font: 500 var(--t-micro)/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td.num, .table th.num { text-align: right; }
.table td.num { font-family: var(--f-num); font-feature-settings: "tnum" 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-soft); }
.table th[aria-sort] { cursor: pointer; }
.table th[aria-sort="ascending"]::after { content: " ↑"; }
.table th[aria-sort="descending"]::after { content: " ↓"; }
.table tfoot td { border-top: 1px solid var(--rule); border-bottom: 0; background: var(--bg-soft); font-weight: 600; padding-block: 10px; }
.table--compact td { padding-block: 6px; }
.table .row-group td { background: var(--bg); font: 500 var(--t-micro)/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sage); padding-top: 16px; }
.table .row-strong td { font-weight: 600; }
.table .row-indent td:first-child { padding-left: 28px; }
.table tr.is-active td { background: var(--bg-panel); }

/* Строка-группа с раскрытием (стратегия → ноги → исполнения) */
.t-name { display: flex; align-items: flex-start; gap: 8px; }
.t-name__main { font-weight: 600; color: var(--ink); white-space: nowrap; }
.t-name__sub { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-size: var(--t-xs); color: var(--ink-3); }
.caret { width: 10px; flex: none; color: var(--ink-3); font-size: 10px; line-height: 20px; transition: transform .2s var(--ease); }
tr[aria-expanded] { cursor: pointer; }
tr[aria-expanded="true"] .caret { transform: rotate(90deg); }
tr[aria-expanded="true"] td { background: var(--bg-soft); border-bottom-color: transparent; }
tr.detail > td { background: var(--bg-soft); padding: 0 12px 16px 30px; }
.detail__grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .detail__grid { grid-template-columns: minmax(0, 1fr); } }
.subtable { border-collapse: collapse; width: 100%; font-size: var(--t-xs); }
.subtable th { text-align: left; font: 500 10px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 8px 6px 0; border-bottom: 1px solid var(--line-strong); }
.subtable td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); }
.subtable td.num, .subtable th.num { text-align: right; }
.subtable td.num { font-family: var(--f-num); font-feature-settings: "tnum" 1; }

/* ---------- Плашки и чипы ---------- */
.plaque {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: 600 11px/1 var(--f-body); letter-spacing: .01em;
  padding: 4px 6px; border-radius: var(--radius);
  background: var(--bg-panel); color: var(--ink);
}
.plaque--pos   { background: var(--pos-tint);  color: var(--forest); }
.plaque--neg   { background: var(--neg-tint);  color: var(--red); }
.plaque--warn  { background: var(--warn-tint); color: var(--ochre); }
.plaque--alert { background: var(--red);       color: var(--bg); }      /* 5.97 */
.plaque--brand { background: var(--forest);    color: var(--bg); }
.plaque--paper { background: var(--ink-3);     color: var(--bg); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.plaque--live  { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1px var(--sage-light); }
.chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--t-xs); line-height: 1; color: var(--ink-2);
  padding: 4px 7px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line);
}
.chip--ticker { font-family: var(--f-num); font-weight: 600; color: var(--ink); letter-spacing: .02em; }
button.chip { cursor: pointer; }
button.chip:hover, button.chip[aria-pressed="true"] { border-color: var(--forest); color: var(--forest); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.swatch { display: inline-block; width: 14px; height: 2px; flex: none; vertical-align: middle; }
.detail__label { margin-bottom: 6px; }
.detail__note { margin-top: 8px; }
.swatch--block { width: 16px; height: 10px; background: var(--forest); }
.swatch--peak { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(100,105,100,.18) 4px 5px); box-shadow: inset 0 0 0 1px var(--ink-3); }
.swatch--dash { background: repeating-linear-gradient(90deg, var(--s-bench) 0 4px, transparent 4px 7px) !important; height: 2px; }
.acct { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }

/* Термин с пояснением: видимая зона-триггер (пунктир), брендбук §9 */
.term { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; cursor: help; }

/* ---------- Горизонтальные бары ---------- */
.bars { display: grid; gap: 8px; }
.bar-row {
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: 120px minmax(0, 1fr) 112px 104px;
  font-size: var(--t-xs);
}
.bar-row__label { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row__label small { font-weight: 400; color: var(--ink-3); }
.bar-row__value, .bar-row__extra { text-align: right; font-family: var(--f-num); font-feature-settings: "tnum" 1; white-space: nowrap; }
.bar-row__extra { color: var(--ink-3); }
.track { position: relative; height: 14px; background: var(--bar); }
.fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--amber); }
.fill--pos { background: var(--forest); }
.fill--neg { background: var(--red); }
.fill--peak { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(100,105,100,.18) 4px 5px); }
.track .zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.bars--wide .bar-row { grid-template-columns: 120px minmax(0, 1fr) 200px; }
@media (max-width: 640px) {
  .bar-row, .bars--wide .bar-row { grid-template-columns: 88px minmax(0, 1fr) 96px; }
  .bar-row__extra { grid-column: 2 / -1; text-align: left; }
}

/* ---------- Графики (inline SVG) ---------- */
.figure { display: grid; gap: var(--s-3); min-width: 0; margin: 0; }
.figure__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.figure__head .lead { font-size: var(--t-xs); color: var(--ink-3); max-width: 60ch; margin-top: 4px; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figure .note { font-size: var(--t-xs); color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-xs); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend b { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-weight: 600; color: var(--ink); }
svg .grid { stroke: var(--bar); stroke-width: 1; }
svg .zero-line { stroke: var(--ink-3); stroke-width: 1; }
svg .axis { font: 400 11px var(--f-num); fill: var(--ink-3); font-feature-settings: "tnum" 1; }
svg .label { font: 600 12px var(--f-num); fill: var(--ink); font-feature-settings: "tnum" 1; }
svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .line--bench { stroke-dasharray: 4 3; stroke-width: 1.5; }
svg .area { stroke: none; }
svg .marker { stroke: var(--bg); stroke-width: 2; }
details.table-view summary { font-size: var(--t-xs); color: var(--ink-2); cursor: pointer; width: fit-content; }
details.table-view[open] summary { margin-bottom: var(--s-2); }

/* Подсказка графика (crosshair) */
.tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 10px; font-size: var(--t-xs); display: grid; gap: 3px; min-width: 160px;
  box-shadow: 0 6px 20px rgba(62, 69, 67, .12);
}
.tip__head { color: var(--ink-3); }
.tip__row { display: flex; align-items: center; gap: 8px; }
.tip__row b { margin-left: auto; font-family: var(--f-num); font-feature-settings: "tnum" 1; }

/* Тепловая карта: дивергентная шкала red ↔ нейтраль ↔ forest, текст всегда --ink */
.heat td.cell { text-align: center; font-family: var(--f-num); font-feature-settings: "tnum" 1; min-width: 68px; border: 2px solid var(--bg); color: var(--ink); }
.h-n3 { background: #E9C3B9; } .h-n2 { background: #F0D6CE; } .h-n1 { background: #F6E8E2; }
.h-0  { background: var(--bg-soft); } .heat .h-0 { color: var(--ink-3); }
.h-p1 { background: #E6ECE3; } .h-p2 { background: #CFDBCC; } .h-p3 { background: #B4C8B1; }
.heat th.pcol { text-align: center; line-height: 1.3; cursor: pointer; }
.heat th.pcol small { display: block; font: 400 10px var(--f-num); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.heat th.pcol.is-active { color: var(--forest); box-shadow: inset 0 -2px 0 var(--forest); }
.heat-scale { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.heat-scale i { width: 22px; height: 10px; display: inline-block; }

/* ---------- Методика / сноски ---------- */
.notes { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.notes h3 { font-size: var(--t-sm); font-weight: 600; margin-bottom: 6px; }
.notes p, .notes li { font-size: var(--t-sm); color: var(--ink-2); max-width: 68ch; }
.notes ol, .notes ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.notes b { color: var(--ink); }

/* ---------- Подвал ---------- */
.app-footer { border-top: 1px solid var(--line); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.app-footer__inner { max-width: var(--page-max); margin: 0 auto; padding-block: var(--s-5) var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-3); }
.app-footer img { height: 24px; width: auto; display: block; }
.app-footer p { max-width: 90ch; }

/* =====================================================================================
   НОВОСТИ
   ===================================================================================== */

/* Лента: список, не сетка карточек. Элементы разделены линией. */
.feed { display: grid; border-top: 1px solid var(--rule); }
.feed-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.feed-item__when { display: grid; gap: 4px; align-content: start; font-size: var(--t-xs); color: var(--ink-3); }
.feed-item__when .tnum { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
.feed-item__body { display: grid; gap: var(--s-3); min-width: 0; }
.feed-item h2, .feed-item h3.title { font: 600 17px/1.35 var(--f-body); color: var(--ink); text-wrap: pretty; max-width: 75ch; }
.feed-item p.mech { color: var(--ink-2); max-width: 78ch; }
.feed-item .meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.feed-item.is-new .feed-item__when::after { content: "новое"; justify-self: start; font: 600 10px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--forest); background: var(--pos-tint); padding: 3px 5px; }
@media (max-width: 720px) { .feed-item { grid-template-columns: minmax(0, 1fr); } .feed-item__when { display: flex; flex-wrap: wrap; gap: 4px 10px; } }

/* Связь с тикером (market impact): строка-таблица, не цветная полоса */
.impact { border: 1px solid var(--line); }
.impact__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px var(--s-4); padding: var(--s-3) var(--s-4); }
.impact__row + .impact__row { border-top: 1px solid var(--line); }
.impact__ticker { font: 600 15px/1.2 var(--f-num); color: var(--ink); letter-spacing: .02em; }
.impact__company { font-size: var(--t-xs); color: var(--ink-3); }
.impact__text { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.impact__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--ink-3); }
.impact__facts b { color: var(--ink-2); font-weight: 500; }
.impact__dir { align-self: start; }
.impact--none { padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--ink-3); background: var(--bg-soft); border: 0; }
@media (max-width: 640px) { .impact__row { grid-template-columns: minmax(0, 1fr) auto; } .impact__text { grid-column: 1 / -1; } }

/* Раскрывающиеся блоки внутри элемента ленты: строка действий */
.actions { display: flex; flex-wrap: wrap; gap: 4px 20px; border-top: 1px dashed var(--line); padding-top: 10px; }
.disclosure { font-size: var(--t-sm); }
.disclosure > summary { list-style: none; cursor: pointer; color: var(--forest); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸"; font-size: 10px; color: var(--ink-3); transition: transform .2s var(--ease); }
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary .count { font-family: var(--f-num); color: var(--ink-3); font-weight: 400; }
.disclosure__body { margin-top: var(--s-3); padding: var(--s-4); background: var(--bg-soft); display: grid; gap: var(--s-3); }
.source-list { display: grid; gap: 0; }
.source { display: grid; gap: 3px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.source:first-child { padding-top: 0; }
.source:last-child { border-bottom: 0; padding-bottom: 0; }
.source__meta { font-size: var(--t-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.review { display: grid; gap: 8px; }
.review__subject { font-size: var(--t-xs); color: var(--ink-3); }
.review__subject b { color: var(--ink-2); font-weight: 500; }
.review__log { font-size: var(--t-xs); color: var(--ink-2); display: grid; gap: 4px; }
.review__bar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); }

/* Плавающая кнопка «Есть обновления» */
.feed-update {
  position: fixed; z-index: 30;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 6px 20px rgba(31, 70, 54, .22);
}

/* Истории: две колонки (карта событий | развитие истории) */
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); }
.split__aside { border-right: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 1100px; }
.split__filters { padding: var(--s-4); border-bottom: 1px solid var(--line); display: grid; gap: 8px; background: var(--bg-soft); }
.split__filters .input, .split__filters .select { width: 100%; }
.split__list { overflow: auto; }
.split__main { padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split__aside { border-right: 0; border-bottom: 1px solid var(--line); max-height: 520px; } }

.pick-item { display: grid; gap: 4px; padding: 12px var(--s-4); border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none; color: inherit; }
.pick-item:hover { background: var(--bg-soft); }
.pick-item[aria-current="true"] { background: var(--bg-panel); }
.pick-item__title { font-weight: 600; font-size: var(--t-sm); line-height: 1.35; color: var(--ink); }
.pick-item__meta { font-size: var(--t-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* Вехи истории: вертикальная шкала времени. Точка = фаза; цвет точки + слово. */
.timeline { display: grid; position: relative; }
.timeline::before { content: ""; position: absolute; left: 117px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.ms { display: grid; grid-template-columns: 104px 26px minmax(0, 1fr); gap: 0 0; padding-block: 8px; }
.ms__time { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-size: var(--t-xs); color: var(--ink-3); text-align: right; padding-right: 2px; padding-top: 2px; }
.ms__dot { justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--ink-3); margin-top: 6px; position: relative; z-index: 1; }
.ms--pos .ms__dot { background: var(--forest); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--forest); }
.ms--neg .ms__dot { background: var(--red); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--red); }
.ms--mixed .ms__dot { background: var(--amber); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--amber); }
.ms__body { display: grid; gap: 3px; min-width: 0; }
.ms__phase { font: 500 var(--t-micro)/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.ms__title { font-size: var(--t-sm); color: var(--ink); }
.ms__meta { font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 560px) {
  .timeline::before { left: 13px; }
  .ms { grid-template-columns: 26px minmax(0, 1fr); }
  .ms__time { grid-column: 2; grid-row: 1; text-align: left; }
  .ms__dot { grid-column: 1; grid-row: 1 / span 2; }
  .ms__body { grid-column: 2; }
}

/* Перелом: было → стало, две колонки с плашками */
.turns { display: grid; border-top: 1px solid var(--rule); }
.turn { display: grid; gap: var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.turn__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.turn__ticker { font: 600 16px/1 var(--f-num); letter-spacing: .02em; }
.turn__title { font-weight: 600; color: var(--ink); }
.turn__cols { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.turn__arrow { text-align: center; color: var(--ink-3); padding-top: 24px; font-size: 18px; }
.turn__side { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.turn__side .meta-line { font-size: var(--t-xs); }
@media (max-width: 720px) { .turn__cols { grid-template-columns: minmax(0, 1fr); } .turn__arrow { padding: 0; text-align: left; } }

/* Фонды: строка движения */
.moves { display: grid; border-top: 1px solid var(--rule); }
.move { display: grid; grid-template-columns: 110px minmax(160px, 220px) 84px minmax(0, 1fr) 150px; gap: 4px var(--s-4); align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.move__when { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-size: var(--t-xs); color: var(--ink-3); }
/* Дата отчёта и под ней дата сделки (раздел «Фонды», 22.10.2026) */
.dates { display: grid; gap: 1px; white-space: nowrap; }
.dates .meta-line, .move__when .meta-line { display: block; white-space: nowrap; }
.mv .meta-line { white-space: nowrap; }
.move__fund { font-weight: 600; }
.move__ticker { font: 600 14px var(--f-num); letter-spacing: .02em; }
.move__what { display: grid; gap: 3px; color: var(--ink-2); }
.move__delta { text-align: right; font-family: var(--f-num); font-feature-settings: "tnum" 1; white-space: nowrap; }
.move__delta small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
@media (max-width: 900px) {
  .move { grid-template-columns: minmax(0, 1fr) auto; }
  .move__when { grid-column: 1 / -1; }
  .move__what { grid-column: 1 / -1; }
}

/* =====================================================================================
   ВХОД
   ===================================================================================== */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s-6) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.login__col { width: 100%; max-width: 380px; display: grid; gap: var(--s-6); }
.login__brand { justify-self: center; line-height: 0; }
.login__brand img { width: 168px; height: auto; display: block; } /* stacked lockup: центрируется честно (§5) */
.login__panel { display: grid; gap: var(--s-5); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.login__panel h1 { font-size: 22px; font-weight: 400; }
.login__panel .lead { font-size: var(--t-sm); color: var(--ink-2); margin-top: 6px; }
.form { display: grid; gap: var(--s-4); }
.form .input { width: 100%; height: 44px; font-size: 15px; }
.form .btn { width: 100%; }
.input--otp { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-size: 22px !important; letter-spacing: .5em; padding-left: 14px; }
.form__status { font-size: var(--t-sm); min-height: 20px; color: var(--ink-2); }
.form__status--error { color: var(--red); }
.form__status--ok { color: var(--forest); }
.login__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.qr { width: 196px; height: 196px; justify-self: center; padding: 8px; background: var(--bg); border: 1px solid var(--line); }
.secret { font-family: var(--f-num); font-feature-settings: "tnum" 1; letter-spacing: .12em; font-size: 15px; background: var(--bg-soft); padding: 10px 12px; overflow-wrap: anywhere; }
.steps { display: flex; gap: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); }
.steps span[aria-current="step"] { color: var(--forest); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  .toolbar, .app-nav, .subnav, .feed-update, .app-user { display: none !important; }
  body { background: var(--bg); }
}

/* ---------- Дополнения ---------- */
.toolbar--inline { position: static; margin: 0; border-top: 0; padding-top: 0; }
code { font-family: var(--f-num); font-size: .95em; background: var(--bg-soft); padding: 1px 5px; border-radius: var(--radius); color: var(--ink); }
code.secret { display: block; padding: 10px 12px; }
/* Цвета серий для точек и образцов: классы вместо style="" (CSP style-src 'self' режет атрибут style) */
.c-nv    { background: var(--s-nv) !important; }
.c-nv2   { background: var(--s-nv2) !important; }
.c-km    { background: var(--s-km) !important; }
.c-bench { background: var(--s-bench) !important; }
.c-pos   { background: var(--forest) !important; }
.c-neg   { background: var(--red) !important; }
.c-mixed { background: var(--amber) !important; }
.c-ink   { background: var(--ink-2) !important; }


/* Планшеты и узкие ноутбуки: имя пользователя прячется, чтобы все разделы помещались в строку */
@media (max-width: 1100px) {
  .app-user > span { display: none; }
  .app-bar__inner { gap: var(--s-5); }
  .app-nav { gap: var(--s-4); }
}

/* Узкие экраны: навигация уходит второй строкой во всю ширину, имя пользователя прячется */
@media (max-width: 760px) {
  .app-bar__inner { flex-wrap: wrap; gap: 0 var(--s-4); min-height: 0; padding-top: 12px; }
  .app-nav { order: 3; width: 100%; min-height: 44px; gap: var(--s-4); }
  .app-user > span { display: none; }
  .app-user .btn { padding-inline: 8px; }
}
.impact__dir { justify-self: start; }

/* =====================================================================================
   ГЛАВНАЯ
   ===================================================================================== */
/* Шапка блока раздела: заголовок + ссылка «Открыть раздел» справа */
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.block-head h2 { font-size: var(--t-lg); font-weight: 500; }
.block-head a { font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.block { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }

/* Требует внимания (блок на главной сейчас закомментирован, стили оставлены на случай возврата): строки по серьёзности */
.alerts { display: grid; border: 1px solid var(--line); }
.alert-row { display: grid; grid-template-columns: 116px 150px minmax(0, 1fr) auto; gap: 4px var(--s-4); align-items: baseline; padding: 12px var(--s-4); font-size: var(--t-sm); }
.alert-row + .alert-row { border-top: 1px solid var(--line); }
.alert-row__sev .plaque { min-width: 88px; justify-content: center; }
.alert-row__where { font: 500 var(--t-micro)/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.alert-row__what b { font-weight: 600; }
.alert-row__what .meta-line { display: block; margin-top: 2px; }
.alert-row a { font-weight: 500; white-space: nowrap; }
@media (max-width: 760px) {
  .alert-row { grid-template-columns: auto minmax(0, 1fr); }
  .alert-row__what { grid-column: 1 / -1; }
  .alert-row a { grid-column: 1 / -1; }
}

/* Компактная лента: время | тикер | заголовок */
.mini-feed { display: grid; }
.mini-row { display: grid; grid-template-columns: 52px 112px minmax(0, 1fr); gap: 2px var(--s-3); align-items: baseline; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); text-decoration: none; color: inherit; }
.mini-row:hover .mini-row__title { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.mini-row__time { font-family: var(--f-num); font-feature-settings: "tnum" 1; font-size: var(--t-xs); color: var(--ink-3); }
.mini-row__tick { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.mini-row__tick b { font: 600 13px var(--f-num); letter-spacing: .02em; }
.mini-row__title { color: var(--ink); }
.mini-row__meta { grid-column: 3; font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 560px) { .mini-row { grid-template-columns: 52px minmax(0, 1fr); } .mini-row__title, .mini-row__meta { grid-column: 1 / -1; } }
.sub-h { font: 500 var(--t-micro)/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.grid-news { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 960px) { .grid-news { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================
   ЭКРАНЫ
   Ноутбуки 1280–1536: контент во всю ширину с полями 38–46px.
   Мониторы 1600+: контент до 1760px; лента новостей и другие текстовые блоки
   раскладываются в две колонки, чтобы не было пустых полос.
   Очень большие мониторы: весь интерфейс масштабируется (zoom), а не растягивается:
   строки таблиц длиной в 2500px не читаются.
   Телефоны ≤640: нижняя панель разделов, фильтры свёрнуты, таблицы карточками.
   ===================================================================================== */

@media (min-width: 1800px) { html { zoom: 1.1; } }      /* 1920 → 1745 css px */
@media (min-width: 2300px) { html { zoom: 1.25; } }     /* 2560 → 2048 css px */
@media (min-width: 3200px) { html { zoom: 1.6; } }      /* 3840 → 2400 css px */

/* Лента новостей на широком экране: текст слева, связь с тикером справа */
@media (min-width: 1360px) {
  .feed-item__body { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr); column-gap: var(--s-6); align-items: start; }
  .feed-item__main { grid-column: 1; }
  .feed-item__side { grid-column: 2; grid-row: 1 / span 2; }
  .feed-item .actions { grid-column: 1 / -1; }
}
.feed-item__main, .feed-item__side { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }

/* ---------- Кнопка «Фильтры»: только на телефоне ---------- */
.toolbar__toggle { display: none; }
.toolbar__toggle .count { font-family: var(--f-num); color: var(--ink-3); font-weight: 400; }
.toolbar__toggle[aria-expanded="true"] { background: var(--bg-panel); }

/* Широкие графики и узкие варианты (в проде: один SVG, который строится по ширине контейнера) */
.chart-narrow { display: none; }

@media (max-width: 640px) {
  :root { --t-xl: 24px; --t-lg: 17px; --t-kpi: 20px; }
  .page { gap: var(--s-6); padding-block: var(--s-5) var(--s-6); }

  /* Нижняя панель разделов */
  .app-bar__inner { flex-wrap: nowrap; min-height: 56px; padding-top: 0; }
  .brand img { height: 28px; }
  .app-nav {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; order: 0; width: auto;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; min-height: 0;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-shadow: 0 -4px 16px rgba(62, 69, 67, .06);
  }
  .app-nav a {
    justify-content: center; text-align: center; white-space: normal;
    min-height: 56px; padding: 6px 4px 4px; margin: 0;
    font-size: 10px; letter-spacing: .08em; line-height: 1.25;
    border-bottom: 0; border-top: 2px solid transparent;
  }
  .app-nav a[aria-current="page"] { border-top-color: var(--forest); background: var(--bg-soft); }
  body { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
  .feed-update { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px)); left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .subnav a { min-height: 40px; }

  /* Фильтры свёрнуты в одну кнопку; область прокрутки остаётся данным */
  .toolbar { gap: var(--s-2) var(--s-3); padding-block: 10px; }
  .toolbar__toggle { display: inline-flex; }
  .toolbar:not([data-open="true"]) > :not(.toolbar__toggle):not(.toolbar__scope) { display: none; }
  .toolbar[data-open="true"] > .field { width: 100%; }
  .toolbar[data-open="true"] .select, .toolbar[data-open="true"] .input { width: 100%; height: 40px; }
  .toolbar[data-open="true"] .seg { width: 100%; }
  .toolbar[data-open="true"] .seg button { flex: 1; height: 38px; }
  .toolbar__scope { width: auto; flex: 1; align-self: center; }

  /* Касание: цели не меньше 40px */
  .btn { height: 40px; }
  .seg button { height: 36px; }
  .select, .input { height: 40px; font-size: 16px; } /* 16px: iOS не зумит поле при фокусе */
  .textarea { font-size: 16px; }

  .page-head__meta { gap: 4px; }
  .section__tools { width: 100%; }
  .section__tools .input[type="search"] { width: 100%; }
  .section__tools .seg { flex: 1 1 auto; }
  .section__tools .seg button { flex: 1; }

  /* Графики: узкий вариант с крупными подписями */
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .figure__head { flex-direction: column; }

  /* Таблицы-карточки: строка = блок, подписи колонок из data-label */
  .table--cards { font-size: var(--t-sm); }
  .table--cards > thead { display: none; }
  .table--cards, .table--cards > tbody, .table--cards > tfoot { display: block; }
  .table--cards > * > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px var(--s-4); padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
  .table--cards > tbody > tr:last-child { border-bottom: 0; }
  .table--cards > * > tr > td { display: grid; gap: 1px; padding: 0; border: 0; text-align: left !important; background: none !important; min-width: 0; }
  .table--cards > * > tr > td::before { content: attr(data-label); font: 500 9.5px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .table--cards > * > tr > td:first-child { grid-column: 1 / -1; }
  .table--cards > * > tr > td:first-child::before, .table--cards > * > tr > td[data-label=""]::before { display: none; }
  .table--cards > * > tr > td:empty { display: none; }
  .table--cards > tfoot > tr { background: var(--bg-soft); border-top: 1px solid var(--rule); }
  .table--cards > tfoot > tr > td { border: 0; }
  .table--cards > tbody > tr.row-group { display: block; padding: 14px var(--gutter) 4px; border-bottom: 0; }
  .table--cards > tbody > tr.row-group > td::before { display: none; }
  .table--cards > tbody > tr.row-indent > td:first-child { padding-left: 0; }
  .table--cards > tbody > tr[aria-expanded="true"] { background: var(--bg-soft); border-bottom: 0; }
  .table--cards > tbody > tr.detail { display: block; padding: 0 var(--gutter) 14px; background: var(--bg-soft); }
  .table--cards > tbody > tr.detail > td { padding: 0; }
  .table--cards > tbody > tr.detail > td::before { display: none; }
  .table--cards .t-name { width: 100%; }
  .table--cards > tbody > tr:hover > td { background: none; }
  .table--cards > * > tr > td { justify-items: start; }
  .table--cards > tbody > tr.detail > td { justify-items: stretch; }
  .table-wrap--scroll:has(.table--cards) { max-height: none; }
  .table-wrap:has(.table--cards) { border-inline: 0; overflow: visible; margin-inline: calc(var(--gutter) * -1); border-color: var(--line); }

  /* Подтаблицы в раскрытой строке: прокрутка внутри своего блока */
  .detail__grid > div { overflow-x: auto; }
  .subtable { min-width: 420px; }

  /* Тепловая карта: остаётся таблицей, первая колонка закреплена */
  .heat th:first-child, .heat td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg); box-shadow: 1px 0 0 var(--line); }
  .heat th:first-child { background: var(--bg-soft); z-index: 3; }
  .heat td.cell { min-width: 58px; }

  .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 10px 12px 12px; }
  .bar-row, .bars--wide .bar-row { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .bar-row__extra { grid-column: 1 / -1; text-align: left; margin-top: -4px; }
  .bars { gap: 12px; }
  .split__filters .field__row { flex-wrap: nowrap; }
  .split__main { padding: var(--s-4); }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .move__delta { text-align: left; }
  .turn__arrow { display: none; }
  .feed-update { left: auto; height: 44px; }
  .app-footer__inner { padding-block: var(--s-4) var(--s-5); }
}

/* ---------- Переход к конкретной записи (#якорь с главной) ----------
   Запись встаёт под липкой панелью фильтров, а не за ней: отступ = высота панели
   (--sticky-offset ставит скрипт страницы). Открытая запись подсвечивается фоном. */
:root { --sticky-offset: 0px; }
.feed-item, .turn, .move { scroll-margin-top: calc(var(--sticky-offset) + var(--s-4)); }
.feed-item:target, .turn:target, .move:target {
  background: var(--bg-soft);
  box-shadow: 0 0 0 var(--s-3) var(--bg-soft);
  border-bottom-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .feed-item:target, .turn:target, .move:target { animation: target-fade 2.4s var(--ease) 1.2s both; }
}
@keyframes target-fade { to { background: transparent; box-shadow: 0 0 0 var(--s-3) transparent; } }
.split__more { display: grid; gap: 8px; justify-items: start; padding: var(--s-4); }

/* =====================================================================================
   ВНЕДРЕНИЕ (22.10.2026): то, чего не было в макете, но есть в прод-механике
   ===================================================================================== */
.nowrap { white-space: nowrap; }
.empty { padding: var(--s-3) var(--s-4); color: var(--ink-3); font-size: var(--t-sm); }
.status--stale { color: var(--ochre); }

/* Графики, которые строит JS (charts.js, strategies.js): контейнер — точка отсчёта подсказки */
.chart, .plot { position: relative; min-width: 0; }
.chart svg, .plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot { min-height: 260px; }
.plot > p { padding-top: var(--s-4); }
.plot svg text { font: 400 11px var(--f-num); fill: var(--ink-3); font-feature-settings: "tnum" 1; }
.chart .tip { min-width: 150px; }
.tip--fixed { position: fixed; }

/* Раскрытая строка: пояснения над подтаблицами, ноги и исполнения поровну */
.detail__notes { display: grid; gap: 6px; padding-block: var(--s-2) var(--s-3); font-size: var(--t-sm); max-width: 110ch; }
.detail__grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .detail__grid--even { grid-template-columns: minmax(0, 1fr); } }
tr.detail > td { padding-top: var(--s-2); }

/* Стратегии: пикер моделей, матрица, теплокарта */
.table .check { justify-content: flex-end; }
.table .check small { color: var(--ink-3); font-size: var(--t-xs); }
.table .mname { font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration-color: var(--line-strong); }
.table tr[data-pick] { cursor: pointer; }
.table .row-total td { background: var(--bg-soft); }
.table .row-strong td:first-child .chip { margin-left: 6px; }
.heat td.cell.h-empty { color: var(--ink-3); background: var(--bg); }
.heat .gap-l { box-shadow: inset 2px 0 0 var(--line-strong); }
.heat td:first-child { white-space: nowrap; }
.heat th.pcol:focus-visible { outline-offset: -2px; }
.notes__stack { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.notes .table { font-size: var(--t-xs); }

/* Сводка состояния главной: таблица свежести и блоки */
.block .kpis { margin: 0; }
.home-note { font-size: var(--t-xs); color: var(--ink-3); }

@media (max-width: 640px) {
  /* Карточки таблиц: длинные значения переносятся внутри своей ячейки, а не раздвигают страницу */
  .table--cards > * > tr > td, .table--cards > * > tr > td.num { white-space: normal; overflow-wrap: anywhere; }
  .table--cards .t-name__main { white-space: normal; }
  /* Длинные ленты (сделки стратегий) остаются прокручиваемым блоком, а не страницей в сотню экранов */
  .table-wrap--scroll:has(.table--cards) { max-height: 75vh; overflow: auto; }
}
.table td.tnum { white-space: nowrap; }
a.bar-row { color: inherit; text-decoration: none; }
a.bar-row:hover .bar-row__label { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* Новости: то, что есть в прод-механике ленты и чего не было в макете */
pre.json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 450px; overflow: auto; font: 400 var(--t-xs)/1.45 var(--f-num); color: var(--ink-2); }
.disclosure--inline > summary { font-size: var(--t-xs); }
.disclosure--inline .disclosure__body { background: var(--bg); padding: var(--s-3); margin-top: var(--s-2); }
.impact__text .disclosure--inline .disclosure__body { background: var(--bg-soft); }
.source__more { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.source__more > .disclosure[open] { flex-basis: 100%; }
.chart-one { display: grid; gap: 6px; }
.chart-image { aspect-ratio: 13 / 9; display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: var(--t-sm); color: var(--ink-3); max-width: 900px; }
.chart-image img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.feed-item .actions > .disclosure[open] { flex-basis: 100%; }
.toolbar .select { max-width: 280px; }
.page-head__meta .meta-line { max-width: 60ch; }
@media (max-width: 640px) { .toolbar .select { max-width: none; } }

/* Фонды: «По фондам» и «По тикерам» — блоки по линейке, без вложенных карточек */
.funds-grid { display: grid; gap: var(--s-6) var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.fund-card { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.fund-card .block-head h3 { font-size: var(--t-md); }
.fund-card .track { height: 8px; background: var(--neg-tint); }
.mv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mv-list .mv { display: grid; gap: 2px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.pos-box { display: block; font-size: var(--t-xs); color: var(--ink-2); font-family: var(--f-num); font-feature-settings: "tnum" 1; }
.fund-detail { display: grid; gap: 6px; font-size: var(--t-sm); }
.move__delta small { white-space: normal; }

/* Истории: элементы прод-механики */
button.pick-item { width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); }
.mini-track { position: relative; display: block; height: 10px; margin-top: 4px; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.mini-track .dot { position: absolute; top: 2px; width: 6px; height: 6px; margin-left: -3px; opacity: .85; }
.price-chart { display: grid; gap: var(--s-2); min-height: 120px; }
.price-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--bg); }
ol.evidence { margin: 0 0 var(--s-2); padding-left: 20px; display: grid; gap: 6px; font-size: var(--t-sm); }
ol.evidence .plaque { margin-left: 4px; }
.related-list { display: grid; gap: 6px; justify-items: start; }
.related-list .btn--link { text-align: left; white-space: normal; height: auto; }
.ms { padding-block: 10px; }
.ms__title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.ms__summary { font-size: var(--t-sm); color: var(--ink-2); max-width: 90ch; }
.ms__impact { display: block; font-size: var(--t-xs); color: var(--ink-2); }
.ms__impact .meta-line { display: block; }
.ms__body .disclosure--inline .disclosure__body { background: var(--bg-soft); }
.sp-section { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.sp-section > summary { font-weight: 600; color: var(--ink); }
.sp-body { background: var(--bg) !important; padding-inline: 0 !important; }
/* Названия подсюжетов длинные: в панели подсюжетов чипы и кнопки переносятся, иначе на телефоне
   один чип раздвигает колонку истории шире экрана (22.10). */
.sp-chips .chip, .sp-chips .btn, .chip.sp-tag { white-space: normal; max-width: 100%; height: auto; min-height: 32px; line-height: 1.3; text-align: left; overflow-wrap: anywhere; }
button.chip[aria-pressed="true"] { background: var(--forest); color: var(--bg); border-color: var(--forest); }
.heat .h-mixed { background: var(--warn-tint); }
.dyn td.cell { min-width: 44px; }
.turn__title.btn--link { font-weight: 600; color: var(--ink); white-space: normal; text-align: left; height: auto; }
.phase-bar { align-items: center; }
/* Последовательность фаз в списке: две строки, полностью — в подсказке и на шкале вех */
.pick-item__phases { font-size: var(--t-xs); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .table-wrap--phone-scroll:has(.table--cards) { max-height: 75vh; overflow: auto; } }
@media (max-width: 640px) { .toolbar__scope { width: 100%; flex: none; } }

/* Ценовые графики новостей (news_charts.js): вид макета — линия цены и точки вех на ней */
.news-chart svg .chart-price { stroke: var(--ink-2); }
.news-chart svg .chart-price-dot { fill: var(--ink-2); }
.news-chart svg .chart-ema { stroke-width: 1.2; opacity: .85; }
.news-chart svg .chart-mark { stroke: var(--bg); stroke-width: 2; }
.news-chart svg .chart-mark--gap { fill: var(--bg); stroke-width: 2; }
.news-chart svg .chart-pub-line { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; }
.news-chart svg .chart-off { fill: var(--bg-soft); }
.chart-off-swatch { display: inline-block; width: 14px; height: 10px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.tip__mark { font-size: var(--t-xs); color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 6px; max-width: 320px; }
.chart-one { display: grid; gap: 6px; }
.chart-one + .chart-one { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.chart-one__title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.price-svg { min-height: 200px; }
.chart-one__plot { background: var(--bg); padding: var(--s-2) var(--s-2) 0; }
.news-chart svg .chart-price-area { fill-opacity: .035; }
/* Телефон: подсказка графика — под графиком в потоке страницы, а не поверх линий
   (касание не даёт «увода мыши», и плавающая подсказка закрывала бы график) */
@media (max-width: 640px) {
  .chart .tip { position: static; margin-top: var(--s-2); box-shadow: none; min-width: 0; left: auto !important; top: auto !important; }
}
/* Телефон: первая (закреплённая) колонка теплокарты узкая — иначе она закрывает колонки недель */
@media (max-width: 640px) {
  .heat td:first-child, .heat th:first-child { max-width: 128px; white-space: normal; overflow-wrap: anywhere; font-size: var(--t-xs); }
  .heat td:first-child .chip, .heat td:first-child .plaque--live { display: none; }
}
/* Длинные плашки (список тикеров) и коды в методике переносятся, а не раздвигают страницу */
.plaque { max-width: 100%; }
.chips .plaque { white-space: normal; text-align: left; line-height: 1.3; }
.notes > *, .notes__stack > * { min-width: 0; }
.notes code { overflow-wrap: anywhere; white-space: normal; }
/* Телефон: показатели по две в ряд (макет), нечётная последняя — во всю ширину */
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sort-phone { display: none; }
@media (max-width: 640px) { .sort-phone { display: grid; width: 100%; } .sort-phone .select { width: 100%; } }

/* ---------- Графики с подробностями (опционная книга, 22.10.2026) ---------- */
svg .pt { stroke: var(--bg); stroke-width: 2; }
svg .pt--partial { fill: var(--bg) !important; stroke-width: 2; }
svg .pt.is-hot { stroke: var(--ink); }
svg .bar.is-hot { opacity: .85; }
svg .bar-label { font: 600 11px var(--f-num); fill: var(--ink); font-feature-settings: "tnum" 1; }
.tip__sep { border-top: 1px solid var(--line); margin-block: 3px; }
.tip__ev { display: flex; gap: 10px; justify-content: space-between; }
.tip__ev span { color: var(--ink-2); }
.tip__ev b { font-family: var(--f-num); font-feature-settings: "tnum" 1; white-space: nowrap; }
.chart .tip.tip--wide { min-width: 220px; max-width: 340px; }
.legend .swatch--dot { width: 10px; height: 10px; border-radius: 50%; background: var(--forest); }
.legend .swatch--ring { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--forest); }
.legend .swatch--bar { width: 10px; height: 10px; }
.swatch.c-forest { background: var(--forest); }
.swatch.c-sage-light { background: var(--sage-light); }
.swatch.c-amber { background: var(--amber); }
.figure__tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.table td.wrap { white-space: normal; }
.t-name .plaque { margin-top: 4px; }
.detail__grid--stack { grid-template-columns: minmax(0, 1fr); }
.subtable-wrap { overflow-x: auto; }
.subtable-wrap .subtable td, .subtable-wrap .subtable th { white-space: nowrap; }

/* ---------- Фонды: мультивыбор, статистика, страница фонда (22.10.2026, макет design/proto-funds.html) ---------- */
.multi { position: relative; }
.multi > summary { list-style: none; cursor: pointer; min-width: 220px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.multi > summary::-webkit-details-marker { display: none; }
.multi__panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: min(340px, 86vw); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(62, 69, 67, .12); display: grid; gap: 6px; padding: 10px; }
.multi__list { max-height: 320px; overflow: auto; display: grid; gap: 2px; }
.multi__list .check { padding: 5px 4px; }
.multi__list .check:hover { background: var(--bg-soft); }
.multi__actions { display: flex; gap: 12px; font-size: var(--t-xs); }
.picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picked:empty { display: none; }
.picked button { font: inherit; font-size: var(--t-xs); border: 0; background: var(--bg-panel); color: var(--ink); padding: 4px 8px; border-radius: var(--radius); cursor: pointer; }
.picked button::after { content: " ×"; color: var(--ink-3); }
.picked button:hover { background: var(--line); }
.rank { font-family: var(--f-num); color: var(--ink-3); width: 28px; }
.aum-cell { display: grid; grid-template-columns: 96px minmax(60px, 1fr); gap: 10px; align-items: center; }
.aum-cell .track { height: 6px; }
.fund-link { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.fund-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
/* Тикер — ссылка на TradingView: цвет и вес берёт у ячейки, подчёркивание тонкой линией. */
.tv-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.tv-link:hover, .tv-link:focus-visible { color: var(--forest); border-bottom-color: var(--forest); }
.back-link { font-size: var(--t-sm); }
.table td .cell-sub { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.top-cell { white-space: nowrap; }
.fund-meta { max-width: 900px; }
.fund-meta td { white-space: normal; }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover { color: var(--ink); }
.table th[data-sort]:not([aria-sort])::after { content: " ↕"; color: var(--line-strong); }
.table th[data-sort]:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.qrange { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }
.section__tools { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }

/* ---------------------------------------------------------------- «качество данных» (26.10.2026)
   Сводки и оговорки про ИСТОЧНИК: нужны (честность показа не отменяется), но не впереди того, ради
   чего страницу открывают, и не внутри колонок таблицы — там они ели ширину. Свёрнуты по умолчанию. */
details.data-quality { display: block; border: 1px solid var(--line); background: var(--bg-soft); padding: var(--s-3) var(--s-4); }
details.data-quality > * + * { margin-top: var(--s-3); }
details.data-quality > summary { font: 500 var(--t-sm)/1.3 var(--f-display); color: var(--ink-2); cursor: pointer; width: fit-content; }
details.data-quality .table-wrap { background: var(--bg); }
/* Заголовок, по которому сортируют, говорит об этом курсором ДО клика: прежнее правило
   .table th[aria-sort] меняло указатель только у АКТИВНОЙ колонки, то есть подсказка появлялась
   после того, как человек угадал. */
.table th[data-sort] { cursor: pointer; }

/* Значок примечания В СТРОКЕ (26.10.2026): пояснение про ОДНУ строку, которое прежде стояло в
   ячейке текстом и ело ширину колонки (таблица людей требовала 2498px при доступных 1186).
   Текст жив — он в подсказке и на странице человека; общие для таблицы пояснения остались подписью. */
.rowinfo {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-2);
  font: 600 9px/1 var(--f-display); cursor: help; vertical-align: 1px; flex: none;
}
.rowinfo--warn { border-color: var(--ochre); color: var(--ochre); }
.rowinfo--neg  { border-color: var(--red);    color: var(--red); }

/* Option research tools: independent forms and persistent chart groups. */
.option-tabs { display: flex; align-items: center; padding-inline: 0; margin-block: calc(var(--s-5) - var(--s-7)) calc(var(--s-4) - var(--s-7)); gap: 20px; }
.option-tabs [aria-selected="true"] { color: var(--forest); border-bottom: 2px solid var(--forest); }
#panel-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
#panel-book > .toolbar { margin-top: 0; }
.option-group { padding-block: 24px 32px; border-top: 1px solid var(--line); }
.option-group__head, .option-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 12px 20px; }
.option-group__head { justify-content: space-between; }
.option-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 6px 20px; margin-block: 20px; }
/* Share label/control rows, so multiline labels never stagger the inputs. */
.option-fields > .field { grid-row: span 2; grid-template-rows: subgrid; padding-bottom: 10px; }
.option-fields > .field > .field__label { align-self: end; }
.option-fields > .field > .input, .option-fields > .field > .select { align-self: start; }
.option-fields .input, .option-fields .select { width: 100%; }
.option-command { display: grid; gap: 8px; margin-block: 20px; }
.option-command .input { width: 100%; }
.option-status { min-height: 24px; margin-block: 16px; white-space: pre-line; }
.option-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 760px), 1fr)); gap: 32px; }
.option-results:has(> .option-result--error) { grid-template-columns: minmax(0, 1fr); }
.option-result { min-width: 0; margin: 0; }
.option-result__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.option-result__head h4 { font-size: var(--t-md); }
.option-result__head .meta-line { margin-top: 4px; }
.option-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 12px; margin-bottom: 8px; border-block: 1px solid var(--line); }
.option-metrics dt { font-size: var(--t-xs); color: var(--ink-3); }
.option-metrics dd { margin: 4px 0 0; font: 500 20px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.option-result .table-view { margin-top: 12px; }
.option-quote-details { white-space: pre-line; font-family: var(--f-num); font-variant-numeric: tabular-nums; margin-block: 12px; }
.option-plot { width: 100%; height: clamp(540px, 74vh, 780px); min-width: 0; }
.option-plot--scatter { height: clamp(560px, 78vh, 850px); }
.option-group .seg { width: fit-content; }
.option-group .option-help { margin-block: 12px; }
#spread-result .table-view { margin-block: 20px; }
@media (max-width: 640px) {
  .option-tabs { gap: 4px; overflow-x: auto; white-space: nowrap; }
  .option-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .option-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .option-metrics dd { font-size: 18px; }
  .option-plot { height: 480px; }
  .option-plot--scatter { height: 560px; }
}

.option-expirations { display: grid; gap: 8px; margin-block: 0 20px; }
.option-expirations > .btn { justify-self: start; }
.option-expiration-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.option-expiration-dates .field__row { flex-wrap: nowrap; }
.option-expiration-dates .input { width: 180px; }
/* Shared SVG line-series styles must not hide Plotly's multiline text tspans. */
.option-plot svg tspan.line { fill: inherit; stroke: none; stroke-width: 0; }

/* Copyable bot requests are grouped with their own chart form. */
.option-orders { margin-block: 16px 28px; }
.option-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.option-order h4 { font-size: var(--t-sm); font-weight: 500; }
.option-order__text { grid-column: 1 / -1; line-height: 1.6; overflow-wrap: anywhere; user-select: text; }
.option-methodology { margin-top: 32px; }

.option-history { margin-block: 16px 24px; }
.option-history > summary { cursor: pointer; font: 500 var(--t-sm)/1.5 var(--f-display); }
.option-history > .meta-line { margin-top: 8px; }
#option-history-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.option-history__row { display: flex; align-items: flex-start; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.option-history__row:last-child { border-bottom: 0; }
.option-history__content { min-width: 0; }
.option-history__command { display: block; min-height: 44px; padding: 8px 2px; border: 0; background: none; color: var(--forest); text-align: left; font: inherit; overflow-wrap: anywhere; cursor: pointer; }
.option-history__command:hover { text-decoration: underline; }
.option-history__pin { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 4px; color: var(--ink-3); font: 26px/1 var(--f-body); }
.option-history__pin[aria-pressed="true"] { color: var(--ochre); background: var(--warn-tint); border-color: var(--ochre); }

/* Rolling: use the existing form/table system, separate closing from opening. */
#roll-form h3 { margin-block: 24px 12px; }
#roll-form > .option-actions { margin-top: 24px; }
#roll-history-list { list-style: none; padding: 0; max-height: 280px; overflow-y: auto; }
#roll-history-list .option-history__content { flex: 1; }
.roll-position { min-width: min(100%, 360px); max-width: 100%; }
.roll-orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-block: 24px; }
.roll-order-block { min-width: 0; border-top: 2px solid var(--line-strong); padding-top: 20px; }
.roll-order-block h2 { font-size: var(--t-lg); margin-bottom: 12px; }
#roll-candidate { width: 100%; }
#roll-selection { scroll-margin-top: 28px; }
@media (max-width: 850px) { .roll-orders { grid-template-columns: minmax(0, 1fr); } }