/* Заголовки блоков — в ритме раздела: та же прописная гарнитура, что у секций обзора
   и скринера. Правим стилем, а не разметкой: заголовков на странице десяток. */
.tk-grid .card-title { font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
    display:flex; align-items:center; gap:7px; }
.tk-grid .card-title .tooltip-icon, .tk-grid .card-title .term-tip { text-transform:none; letter-spacing:0; }
/* Якорь не должен уезжать под шапку сайта и полосу навигации (60 + 44). */
.tk-grid [id]{ scroll-margin-top:114px; }
.stku-hero .tk-logo, .stku-hero .tk-logo-ph { flex:none; }

.stat-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; margin:0; border-radius:0; border-bottom:1px solid var(--border); transition:background .14s var(--ease-out); }
/* Значок-подсказка «?» у метрики с data-tip (напр. «Объём торгов за день») — кружок как у term_tip, единообразно */
.tt-q:hover .term-tip-ico, .tt-q:focus .term-tip-ico { color:#fff; background:var(--accent); border-color:var(--accent); }
.stat-row:last-child { border-bottom:none; }
@media (hover: hover) { .stat-row:hover { background:var(--bg3); } }
/* Шапки таблиц финпоказателей и форвардных мультов: без заливки, годы жирнее */
#sec-fin table thead th, #sec-mult table thead th { background:transparent; font-weight:700; }
.stat-label { color:var(--text2); font-size:13px; }
.stat-value { font-weight:600; font-size:14px; }
.chart-container { position:relative; height:280px; }
/* Подграфик индикаторов (RSI / MACD / оборот) — под ценой, связан с ней по времени. */
.ta-pane { margin-top:6px; width:100%; }

/* ── Панель теханализа (static/js/ticker-ta.js) ───────────────────────────── */
.ta-bar { margin:12px 0 4px; }
.ta-toggle { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
    border:1px solid var(--border2); background:var(--bg3); color:var(--text2);
    font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    transition:color .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out); }
@media (hover: hover) { .ta-toggle:hover { color:var(--text); border-color:var(--accent); } }
.ta-toggle.is-open { background:var(--accent-soft); border-color:var(--accent); color:var(--text); }
.ta-toggle svg { transition:transform .2s var(--ease-out); }
.ta-toggle.is-open svg { transform:translateY(-1px); }
.ta-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:9px;
    animation:taFade .3s var(--ease-out); }
@keyframes taFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.ta-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
    border:1px solid var(--border); background:transparent; color:var(--text2);
    font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
    transition:color .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out); }
.ta-chip i { width:9px; height:3px; border-radius:2px; opacity:.4; transition:opacity .15s; }
.ta-chip:hover { color:var(--text); }
.ta-chip.is-on { color:var(--text); background:var(--bg3); border-color:var(--border2); }
.ta-chip.is-on i { opacity:1; }
.ta-hint { font-size:11.5px; color:var(--text2); }

/* Разбор графика под ним */
.ta-read { margin-top:14px; padding:16px 18px; border-radius:var(--radius);
    border:1px solid var(--border); background:var(--bg);
    animation:taFade .35s var(--ease-out); }
.ta-read-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.ta-read-cap { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text2); }
.ta-badge { padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.ta-badge.is-up { background:var(--green-soft); color:var(--green); }
.ta-badge.is-down { background:var(--red-soft); color:var(--red); }
.ta-badge.is-flat { background:var(--bg3); color:var(--text2); }
.ta-verdict { font-size:13.5px; line-height:1.6; }
.ta-sigs { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:8px; margin-top:12px; }
.ta-sig { padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg2);
    border:1px solid var(--border); border-left-width:3px; }
.ta-sig.bias-up { border-left-color:var(--green); }
.ta-sig.bias-down { border-left-color:var(--red); }
.ta-sig.bias-flat { border-left-color:var(--border2); }
.ta-sig-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ta-sig-name { font-size:12px; font-weight:700; }
.ta-sig-val { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.ta-sig-why { font-size:11.5px; line-height:1.5; color:var(--text2); margin-top:4px; }
.ta-levels { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-top:12px; }
.ta-level { padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg2); border:1px solid var(--border); }
.ta-level.res { border-color:color-mix(in srgb, var(--red) 35%, var(--border)); }
.ta-level.sup { border-color:color-mix(in srgb, var(--green) 35%, var(--border)); }
.ta-level.now { border-color:var(--border2); }
.ta-level-cap { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); }
.ta-level-val { display:block; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:3px; }
.ta-level-sub { display:block; font-size:11px; color:var(--text2); margin-top:2px; }
.ta-points { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:5px; }
.ta-points li { position:relative; padding-left:13px; font-size:12px; line-height:1.55; color:var(--text2); }
.ta-points li::before { content:''; position:absolute; left:0; top:7px; width:4px; height:4px;
    border-radius:50%; background:var(--border2); }
.ta-disclaimer { margin-top:12px; padding-top:11px; border-top:1px dashed var(--border2);
    font-size:11.5px; line-height:1.55; color:var(--text2); }

/* Инструменты рисования (теханализ) */
.draw-layer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.draw-layer.drawing { pointer-events:auto; cursor:crosshair; }
.draw-toolbar { position:absolute; top:8px; left:8px; z-index:5; display:flex; flex-direction:column; gap:2px;
    background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:3px; box-shadow:var(--shadow); }
.dt-btn { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:none;
    background:transparent; color:var(--text2); border-radius:6px; cursor:pointer; transition:background-color .12s, color .12s; }
.dt-btn:hover { background:var(--bg3); color:var(--text); }
.dt-btn.active { background:var(--accent); color:#fff; }
.dt-sep { height:1px; background:var(--border); margin:2px 2px; }
/* OHLC-строка курсора (только в режиме свечей) — оверлей в углу графика */
.ohlc-readout { position:absolute; top:9px; left:46px; z-index:5; pointer-events:none;
    display:none; gap:9px; align-items:center; white-space:nowrap; font-size:11px; font-weight:600;
    letter-spacing:.2px; padding:2px 8px; border-radius:7px; background:rgba(22,25,38,.62); }
.ohlc-readout.show { display:flex; }
.ohlc-readout .ol { color:var(--text2); font-weight:500; margin-right:3px; }
.ohlc-readout .ov { color:var(--text); }
.ohlc-readout .up { color:#22c55e; }
.ohlc-readout .down { color:#ef4444; }
/* Узкие экраны: ужимаем и прячем дату, чтобы строка не вылезала за график */
@media (max-width:560px) {
    .ohlc-readout { left:42px; gap:6px; font-size:10px; padding:2px 6px; max-width:calc(100% - 50px); overflow:hidden; }
    .ohlc-readout .od-date { display:none; }
}
/* Кнопка «во весь экран» */
.chart-fs-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); border-radius:8px; cursor:pointer; flex:0 0 auto; }
@media (hover: hover) { .chart-fs-btn:hover { border-color:var(--accent); color:var(--text); } }
/* Полноэкранный режим карточки графика */
#chartCard:fullscreen, #chartCard:-webkit-full-screen { background:var(--bg2); padding:18px 22px; overflow:auto; display:flex; flex-direction:column; }
#chartCard:fullscreen .chart-container, #chartCard:-webkit-full-screen .chart-container { flex:1 1 auto; height:auto; min-height:0; }
/* Кнопка «Показать ещё» в истории дивидендов */
.div-more-btn { font-size:13px; font-weight:600; color:var(--accent2); background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:7px 16px; cursor:pointer; }
@media (hover: hover) { .div-more-btn:hover { border-color:var(--accent); color:var(--text); } }
/* Таблицы дивидендов: значения по центру, единый размер шрифта */
.div-table { font-size:12.5px; }
.div-table th, .div-table td { text-align:right; vertical-align:middle; }
.div-table th { font-size:11.5px; text-transform:none; letter-spacing:.2px; background:transparent;
    white-space:normal; line-height:1.25; padding:8px 6px; }
.div-table td { padding:10px 6px; font-variant-numeric:tabular-nums; }
.div-table th:first-child, .div-table td:first-child { text-align:left; }
/* Сегмент-контрол периодов */
.period-btn { padding:5px 12px; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--text2); transition:background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out); }
@media (hover: hover) { .period-btn:hover { background:var(--bg3); color:var(--text); } }
.period-btn.active { color:#fff; }   /* фон/тень даёт скользящий .seg-pill под кнопкой */
.period-btn:active { transform:scale(0.96); }
.div-marker { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--yellow); margin-right:4px; }

/* Шапка тикера */
.tk-header { display:flex; align-items:flex-start; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.tk-logo { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:var(--shadow); }
.tk-logo-ph { width:56px; height:56px; border-radius:14px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; letter-spacing:-1px; box-shadow:var(--shadow); }
.tk-exch { color:var(--text2); font-size:13px; background:var(--bg3); padding:3px 10px; border-radius:20px; }
.tk-change { display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:600; }
.tk-change svg { width:12px; height:12px; }

/* Чипы ключевых метрик «с одного взгляда» */
.tk-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tk-chip { display:inline-flex; align-items:baseline; gap:7px; background:var(--bg2); border:1px solid var(--border); padding:7px 13px; border-radius:10px; font-size:13px; transition:border-color .15s var(--ease-out); }
.tk-chip:hover { border-color:var(--border2); }
.tk-chip .k { color:var(--text2); font-size:12px; }
.tk-chip .v { font-weight:700; letter-spacing:-.01em; }

/* ── Шкала справедливой оценки (Morningstar / Simply Wall St) ── */
.fv-card { margin-bottom:20px; }
.fv-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.fv-verdict { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:-8px; }
.fv-badge { font-size:13px; font-weight:700; padding:5px 13px; border-radius:20px; }
.fv-badge.under { color:var(--green); background:var(--green-soft); }
.fv-badge.over  { color:var(--red); background:var(--red-soft); }
.fv-badge.fair  { color:var(--yellow); background:rgba(232,161,58,.14); }
.fv-diff { font-size:14px; font-weight:600; color:var(--text2); }
.fv-diff.up { color:var(--green); }
.fv-diff.down { color:var(--red); }
.fv-rec { font-size:12px; color:var(--text2); }

/* Верхний отступ трека держит подписи целевой метки (val на -30px, cap на -16px):
   при 30px бейдж «Покупать» из шапки наезжал на цену цели. */
.fv-track { position:relative; height:10px; border-radius:6px; margin:46px 0 34px;
            background:linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%); }
.fv-mark { position:absolute; top:50%; transform:translate(-50%,-50%); }
.fv-mark .dot { width:16px; height:16px; border-radius:50%; border:3px solid var(--bg2); box-shadow:0 1px 5px rgba(0,0,0,.45); }
.fv-mark.price .dot { background:var(--text); }
.fv-mark.fair .dot { background:var(--accent2); }
.fv-mark .cap { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; color:var(--text2); }
.fv-mark .val { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.fv-mark.price .cap { top:16px; } .fv-mark.price .val { top:30px; }
.fv-mark.fair .cap { bottom:16px; } .fv-mark.fair .val { bottom:30px; }
/* На телефоне подпись и значение налезали друг на друга: шаг 14px при высоте строки ~20px
   («Текущая» на «271,0 ₽», «Целевая 12М» на целевую цену). Разводим - только здесь,
   десктоп остаётся как был. */
@media (max-width:560px) {
    .fv-mark .cap, .fv-mark .val { line-height:1.2; }
    .fv-mark.price .cap { top:14px; } .fv-mark.price .val { top:32px; }
    .fv-mark.fair .cap { bottom:14px; } .fv-mark.fair .val { bottom:32px; }
}
.fv-note { font-size:12px; color:var(--text2); line-height:1.5; }

/* Разложение цели по методам оценки (v131) */
.fv-methods { border-top:1px solid var(--border); padding-top:12px; }
.fv-methods-title { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.fvm-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13px; }
.fvm-name { flex:0 0 88px; font-weight:600; }
.fvm-note { color:var(--text2); font-size:12px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fvm-w { flex:0 0 96px; display:flex; align-items:center; gap:6px; }
.fvm-bar { flex:1 1 auto; height:4px; border-radius:2px; background:var(--bg3); overflow:hidden; }
.fvm-bar i { display:block; height:100%; background:var(--accent2); border-radius:2px; }
.fvm-wv { font-size:11px; color:var(--text2); font-variant-numeric:tabular-nums; flex:0 0 30px; text-align:right; }
.fvm-t { flex:0 0 90px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:700px) { .fvm-note { display:none; } .fvm-name { flex-basis:76px; } }

/* Бейдж «дивиденд и денежный поток» (v131) */
.div-flow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:8px; margin-bottom:14px; }
.div-flow.ok { color:var(--green); background:var(--green-soft); }
.div-flow.mid { color:var(--yellow); background:rgba(232,161,58,.14); }
.div-flow.bad { color:var(--red); background:var(--red-soft); }
.div-flow .x { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Заглушка справедливой оценки */
.fv-badge.stub { color:var(--text2); background:var(--bg3); font-weight:600; white-space:nowrap; }
.fv-stub .fv-track { background:var(--bg3); }
.fv-stub .fv-mark .dot { background:var(--border2); border-color:var(--bg2); box-shadow:none; }
.fv-stub .fv-mark .cap { color:var(--text2); opacity:.7; }

/* ── Чек-лист здоровья компании (Simply Wall St) ── */
.health-row { display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); }
.health-row:last-child { border-bottom:none; }
.health-ico { flex-shrink:0; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.health-ico.ok { background:var(--green-soft); color:var(--green); }
.health-ico.no { background:var(--red-soft); color:var(--red); }
.health-ico.na { background:var(--bg3); color:var(--text2); }
.health-ico.neutral { background:var(--bg3); color:var(--text2); }
.health-txt { display:flex; flex-direction:column; }
.health-txt .h-label { font-size:14px; font-weight:500; }
.health-txt .h-hint { font-size:12px; color:var(--text2); margin-top:1px; }
.h-value { flex-shrink:0; align-self:center; font-size:13px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text); }
.health-score { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.health-score .hs-num { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.health-score .hs-tot { font-size:14px; color:var(--text2); }

/* ── Оживление карточки при загрузке (в стиле hero главной) ─────────────────── */
/* Ступенчатое появление блоков — тот же приём, что heroIn на главной. */
@keyframes fvRise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.anim-rise { opacity:0; animation:fvRise .55s var(--ease-out) forwards; }
/* «Прорисовка» графика — wipe-reveal слева направо поверх canvas (Lightweight Charts). */
@keyframes fvChartWipe { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
#priceChart { animation:fvChartWipe 1.1s var(--ease-out) both .45s; }
@media (prefers-reduced-motion: reduce) {
    .anim-rise { opacity:1; animation:none; }
    #priceChart { animation:none; }
}
/* Главная сетка карточки: контент + правый сайдбар 340px. На планшете (≤980px) правый
   сайдбар (справедливая цена, ключевые показатели, здоровье) не влезал рядом и распирал
   страницу горизонтальным скроллом — схлопываем в одну колонку. min-width:0 обязателен,
   иначе таблицы/графики в левой колонке не дают сетке сжаться (1fr = minmax(auto,1fr)). */
.tk-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.tk-grid > * { min-width:0; }
@media (max-width:980px) {
    .tk-grid { grid-template-columns:1fr; }
}
/* Таблицы дивидендов: на десктопе overflow:visible, чтобы подсказки «ⓘ» (раскрываются
   снизу) не обрезались. */
.div-scroll { overflow:visible; }
@media (max-width:760px) {
    /* ── Прогнозные выплаты → КАРТОЧКИ ────────────────────────────────────────
       6 колонок (размер, период, две даты, доходность, статус) на телефоне не
       влезают. Строк обычно 1–3 — разворачиваем каждую в карточку: размер в шапку,
       остальное парами «метка: значение» (метка из data-label). */
    .div-forecast, .div-forecast tbody, .div-forecast tr, .div-forecast td { display:block; }
    .div-forecast thead { display:none; }
    .div-forecast tr { background:var(--bg2); border:1px solid var(--border); border-radius:12px;
        padding:12px 14px; margin-bottom:10px; }
    .div-forecast td { text-align:right; padding:5px 0; border:0; }
    /* Шапка карточки: размер выплаты крупно слева. */
    .div-forecast td:first-child { text-align:left; font-size:17px !important; padding:0 0 9px;
        border-bottom:1px solid var(--border); margin-bottom:8px; }
    .div-forecast td:not(:first-child) { display:flex; justify-content:space-between;
        align-items:baseline; gap:12px; }
    .div-forecast td:not(:first-child)::before { content:attr(data-label); color:var(--text2);
        font-size:12.5px; font-weight:500; text-align:left; flex-shrink:0; }

    /* ── История выплат → компактная таблица ─────────────────────────────────
       До 40 строк — карточки были бы слишком длинными. Колонка «Статус» всегда
       «выплачено» (константа) — прячем её, остаются Размер/Дата/Доходность,
       которые свободно помещаются по ширине без скролла. */
    .div-hist { width:100%; }
    .div-hist .div-status-col { display:none; }
    .div-hist th, .div-hist td { font-size:13px; }
}

/* ── Мобильная адаптация карточки тикера ──────────────────────────────────── */
@media (max-width:560px) {
    /* Панель рисования (трендовые, Фибоначчи и т.п.) непригодна для пальца на
       узком экране: 7 кнопок по 26px, к тому же оверлеем закрывает левый край
       графика. На телефоне рисование смысла не имеет — скрываем панель, график
       остаётся полностью доступен. */
    .draw-toolbar { display:none; }
    /* OHLC-строка курсора смещена под скрытую панель — возвращаем к левому краю */
    .ohlc-readout { left:9px; }

    /* Мелкие подписи < 12px поднимаем до порога читаемости */
    .div-table th { font-size:12px; }
    .sim-col-h { font-size:12px; }
    .fv-mark .cap { font-size:12px; }

    /* Тап-таргеты контролов графика: доводим по высоте ближе к 40px.
       .seg-pill меряет геометрию кнопок в рантайме, поэтому увеличение высоты
       .period-btn его не ломает. */
    .period-btn { padding:9px 13px; }
    .chart-type-btn { padding-top:9px !important; padding-bottom:9px !important; }
    .ta-chip { padding-top:8px; padding-bottom:8px; }
    .chart-fs-btn { width:38px; height:38px; }
}

/* Подсказки — кружок со знаком «?», как на карточках фондов. */
.tooltip-icon { width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid var(--border2); font-size: 9px; font-weight: 700; line-height: 1; }
.tooltip-icon:hover, .tooltip-icon:focus {
    color: #fff; background: var(--accent); border-color: var(--accent); }