/* ticker_v3.css — page-CSS для services/portal/templates/portal/ticker_v3.html.
   design-system.css (styles.css 1:1) лишається чистим — усе специфічне для
   композиції ЦІЄЇ сторінки (переклад inline-стилів jsx-компонентів дизайн-
   системи у CSS-класи, per readme.md "styles.css дає лише токени + ss-*
   структурний каркас, візуал кожного вузла — style="" як у .jsx") живе тут.
   Префікс tv3- для сторінко-локальних класів; ss-* — коли клас реально
   загальносистемний (PinButton/PinBadge/DataTable — використовуються і в
   наступних фазах на цій же сторінці, тому лишаються в ss- просторі імен). */

/* ---------- PinButton.jsx переклад ----------
   pinned-стан синхронізує ticker_v3.js з ss_pins cookie на завантаженні —
   без JS усі зірочки лишаються у неактивному (unpinned) вигляді: чесна
   деградація для функції що й так вимагає JS (закон №1 не порушено, бо
   HTML сам по собі не приховує жодних даних, лише стан персоналізації). */
.ss-pinbtn {
  border: 0; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; padding: 0;
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255, 255, 255, .08); color: var(--text-3); opacity: .38;
  transition: background var(--react), opacity var(--react), color var(--react), transform .14s var(--ease);
}
.ss-pinbtn:hover, .ss-pinbtn:focus-visible { opacity: 1; }
.ss-pinbtn:active { transform: scale(.92); }
.ss-pinbtn.is-pinned {
  opacity: 1; color: #7BE8F5; background: rgba(63, 211, 232, .20);
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .34);
}
.ss-pinbtn.is-pinned svg path { fill: currentColor; }

/* ---------- PinBadge.jsx переклад ---------- */
.ss-pinbadge { display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 9px 9px 14px; border-radius: var(--r-pill); }
.ss-pinbadge-x {
  border: 0; background: rgba(255, 255, 255, .10); color: var(--text-3);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0;
  font-size: 12px; line-height: 20px; transition: background var(--react), color var(--react);
}
/* Danger-red на hover — 1:1 з PinBadge.jsx (onMouseEnter inline у референсі).
   Це destructive-affordance (unpin), не рух ціни — свідомий виняток із
   "up/down лише для ціни/дельти", той самий колір із іншим значенням. */
.ss-pinbadge-x:hover { background: rgba(255, 107, 133, .22); color: #FF6B85; }

/* ---------- DataTable.jsx переклад: базова "непрозора" таблиця ----------
   crosshair (data-hot по стовпцю) — керує ticker_v3.js, семантика вже в
   design-system.css (.ss-table td[data-hot]/th[data-hot]/tr:hover td[data-hot]). */
.ss-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ss-table th {
  padding: 11px 12px; text-align: end; white-space: nowrap; font-family: var(--font);
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-head);
  font-weight: 700; border-block-end: 1px solid #13394A;
}
.ss-table td {
  padding: 11px 12px; text-align: end; white-space: nowrap;
  border-block-end: 1px solid var(--surface-rule); color: var(--surface-text);
}
.ss-table th:first-child, .ss-table td:first-child {
  text-align: start; font-family: var(--font); font-size: 12.5px; min-width: 168px;
  position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1;
}
.ss-table th:first-child { color: var(--text-head); }
.ss-table td.is-null { color: var(--text-faint); }
.ss-table tr.is-total td { font-weight: 600; color: var(--text); }
.ss-table tr.is-total td:first-child { font-weight: 700; }
.ss-table tr.is-indent td:first-child { padding-inline-start: 26px; color: var(--text-3); }
/* Мобільний: липка перша колонка (min-width:168px + успадкований white-space:nowrap)
   розросталась до найдовшого імені (напр. 467px), ховаючи ВСІ колонки даних за
   краєм без підказки (adversarial-review 2026-08, каталоги). Кап + ellipsis →
   колонки даних видно одразу; повне ім'я лишається клікабельним лінком, решта —
   горизонтальним скролом (скролбар застилізований нижче як афорданс). */
@media (max-width: 640px) {
  .ss-table th:first-child, .ss-table td:first-child {
    min-width: 0; max-width: 44vw; overflow: hidden; text-overflow: ellipsis;
  }
}

.tv3-spark-cell { width: 1%; }
/* Спарклайни (Sparkline.jsx) — навмисно НЕ up/down: "Розраховане ≠ звітне"/
   "up-down лише ціні" (readme.md) стосується і трендів метрик, не лише
   вердіктів — revenue/EPS/FCF trend НЕ ціна, тож завжди нейтральний петроль,
   на відміну від дослівного Sparkline.jsx (де колір залежить від напрямку). */
.tv3-spark { display: block; }
/* Performance-бейджі: sparkline на ВСЮ ширину картки (прибирає порожнечу праворуч).
   Scoped до #s-performance — НЕ чіпає компактні sparkline у ratio-таблицях
   (.tv3-spark-cell). preserveAspectRatio="none" на svg → лінія тягнеться по ширині. */
#s-performance .tv3-spark { width: 100%; height: 44px; }
/* Широкий sparkline тягнеться preserveAspectRatio="none" (нерівномірний масштаб).
   Draw-in анімація .ss-draw (stroke-dasharray:var(--len) у 120-user-space) під
   нерівномірним масштабом + non-scaling-stroke ЛАМАЄТЬСЯ — dash-патерн рендерить
   лінію з розривом (стиснута зліва + відірваний стуб справа). Вимикаємо dash для
   цих бейджів: лінія суцільна, тягнеться коректно на всю ширину (draw-in ефекту
   тут нема — прийнятно для міні-бейджа). Scoped, ratio-sparkline не зачеплено. */
#s-performance .tv3-spark polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
.tv3-spark polyline { fill: none; stroke: var(--petrol-200); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Друга лінія (ревью-фікс §7 — Performance "Revenue & Net Income"/"Margins" не
   сміють малювати лише одну метрику з двох у назві): та сама нейтральна
   петроль-родина, тонша й напівпрозоріша, щоб primary-лінія лишалась
   домінантною читанню. */
.tv3-spark polyline.tv3-spark-b { stroke: var(--petrol-100); stroke-width: 1.1; stroke-dasharray: 2 2; opacity: .65; }
/* легенда для 2-серійних sparkline (solid=primary, dashed=secondary) — раніше пунктир
   був без пояснення («не зрозуміло що це»). Показуємо лише коли є друга серія (label_b). */
.tv3-spark-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-block-start: 6px; font-size: 9px; letter-spacing: .04em; color: var(--text-3); }
.tv3-spark-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tv3-sw { display: inline-block; width: 12px; border-top: 2px solid var(--petrol-200); }
.tv3-sw-b { border-top-style: dashed; border-color: var(--petrol-100); }

/* ---------- EmptyState/section note (SectionHeading.jsx `.k` переклад) ---------- */
.tv3-note { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-faint); text-transform: none; }

/* ---------- Metric-info tooltip trigger (ⓘ) — переклад .rt-info зі старої сторінки ---------- */
.tv3-info {
  border: 0; background: transparent; color: var(--text-faint); cursor: help;
  font-size: 11px; padding: 0 0 0 5px; line-height: 1; vertical-align: middle;
}
.tv3-info:hover { color: var(--petrol-100); }
/* Миттєвий кастомний тултіп (initInfoTooltips) — заміна нативного title (лаг ~1.5с).
   position:absolute + page-координати з JS; pointer-events:none щоб не ловив мишу. */
.tv3-tip {
  position: absolute; z-index: 200; max-width: 300px; padding: 8px 11px;
  border-radius: 9px; background: rgba(4, 17, 24, .98); border: 1px solid var(--surface-border);
  color: var(--text); font-size: 12px; line-height: 1.45; letter-spacing: normal; text-transform: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5); pointer-events: none;
}
.tv3-tip[hidden] { display: none; }

/* About-лого компанії — універсальний «чіп» під БУДЬ-ЯКЕ співвідношення сторін
   (квадратні, вертикальні, горизонтальні). object-fit:contain — НЕ cover (cover
   обрізав прямокутні лого); padding щоб лого не торкалось країв; білий фон
   потрібен для темних монохромних лого (Apple тощо) на темному склі. Логотип
   центрується в межах чіпа, letterbox для не-квадратних — коректно, без обрізки. */
.tv3-about-logo {
  width: 72px; height: 72px; object-fit: contain; padding: 9px; box-sizing: border-box;
  border-radius: 15px; flex-shrink: 0; background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

/* ---------- About "read more" — <details><summary class="exp"> ----------
   1:1 з TickerPage.dc.html <style> (.exp), + маркер-приховування бо тут
   summary, не button. */
.exp {
  display: inline-block; margin-block-start: 14px; border: 0; background: rgba(255, 255, 255, .08);
  color: #7BE8F5; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .2);
  transition: background var(--react);
}
.exp:hover { background: rgba(63, 211, 232, .16); }
summary.exp { list-style: none; }
summary.exp::-webkit-details-marker { display: none; }
summary.exp::marker { content: ""; }

/* About: один текст-джерело (повний extract_full) — клампнутий превʼю з fade +
   розгортання НА МІСЦІ. CSS-чекбокс: no-JS, доступно; повний текст завжди в DOM → SEO.
   Замінює старий <details>, що показував і короткий extract, і повний → дубль вступу. */
/* чекбокс видимо-прихований, АЛЕ лишається у tab-order + accessibility tree
   (не `hidden`/`display:none` — той вибивав toggle з клавіатури й screen-reader,
   код-ревʼю HIGH). Той самий патерн, що .ck-switch input у base_v3.html. */
.tv3-about-cb { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; }
.tv3-about-cb:focus-visible ~ .tv3-about-toggle { outline: 2px solid var(--petrol-200); outline-offset: 2px; }
.tv3-about-body { font-size: 13.5px; line-height: 1.75; color: var(--surface-text);
  max-height: 12.25em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent); }
.tv3-about-body > :first-child { margin-block-start: 0; }
.tv3-about-cb:checked ~ .tv3-about-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
.tv3-about-toggle .tv3-about-less { display: none; }
.tv3-about-cb:checked ~ .tv3-about-toggle .tv3-about-more { display: none; }
.tv3-about-cb:checked ~ .tv3-about-toggle .tv3-about-less { display: inline; }

/* ---------- Full Fundamentals concept-groups — <details> переклад .ff-group ---------- */
.tv3-group { margin-block-end: 10px; }
.tv3-group-summary {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .14);
  font-size: 13px; font-weight: 700; color: var(--text);
  transition: background var(--react);
}
.tv3-group-summary::-webkit-details-marker { display: none; }
.tv3-group-summary::marker { content: ""; }
.tv3-group-summary::before {
  content: "▸"; display: inline-block; color: var(--petrol-200); font-size: 10px;
  transition: transform var(--react);
}
.tv3-group[open] > .tv3-group-summary::before { transform: rotate(90deg); }
.tv3-group-summary:hover { background: rgba(255, 255, 255, .07); }
.tv3-group-name { flex: 1 1 auto; }

/* ---------- Toast (max-pins warning) ----------
   Ревью-фікс §15: inset-inline:0 + margin-inline:auto + width:fit-content
   замість inset-inline-start:50%;translate:-50% 0 — фізичний translate ламає
   дзеркалення в RTL (ar), логічні властивості лишаються коректними самі. */
.tv3-toast {
  position: fixed; inset-block-end: 22px; inset-inline: 0; margin-inline: auto;
  width: fit-content; max-width: calc(100% - 32px); z-index: 80;
  padding: 10px 18px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  color: var(--text); background: rgba(10, 45, 58, .92); backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9), inset 1.5px 1.5px 0 rgba(214, 248, 255, .3);
  opacity: 0; pointer-events: none; transition: opacity var(--react);
  text-align: center;
}
.tv3-toast.is-show { opacity: 1; }

/* ---------- Chart canvas (KLineChart mount, ChartPanel.jsx wrapper) ---------- */
/* Графік — власні SVG-компоненти (порт design-system PriceChart/CandleChart).
   #tv3-chart — контейнер авто-висоти: .tv3-plot (фікс. висота, SVG) + .tv3-axis під ним. */
#tv3-chart { position: relative; }
/* overflow:visible — tooltip біля верху НЕ обрізається (SVG сам клампить контент
   по viewBox + border-radius, тож панель лишається зі скругленими кутами). */
.tv3-plot { position: relative; display: flex; height: 320px; overflow: visible; }
@media (max-width: 767px) { .tv3-plot { height: 240px; } }
@media (min-width: 1600px) { .tv3-plot { height: 360px; } }
.tv3-plot-main { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.tv3-svg { display: block; width: 100%; height: 100%; border-radius: var(--r-sm); }
.tv3-cross, .tv3-cross-bg { pointer-events: none; }
.tv3-grid { stroke: rgba(214, 248, 255, .09); stroke-width: 1; }
/* Y-вісь — ОКРЕМИЙ правий жолоб (flex-колонка), а не оверлей: цінники не перекривають
   правий край лінії/свічок (раніше overlay з фоном затуляв останні бари). */
.tv3-yaxis { position: relative; flex: 0 0 58px; }
.tv3-yl { position: absolute; inset-inline-start: 6px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--text-3); white-space: nowrap; }
/* HTML-tooltip у точці під курсором — миттєвий, у DOM (порт дизайнерового tooltip'а). */
.tv3-tt { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 4;
  padding: 9px 12px; border-radius: 12px; white-space: nowrap; background: rgba(8,40,52,.92);
  backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.9), inset 1px 1px 0 rgba(214,248,255,.3); }
.tv3-tt-d { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--text-head); margin-block-end: 4px; }
.tv3-tt-px { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.tv3-tt-delta { font-family: var(--mono); font-size: 10.5px; margin-block-start: 2px; }
.tv3-tt-ohlc { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.tv3-tt-ohlc b { color: var(--text); text-align: end; font-weight: 400; }
.tv3-tt-ohlc b.ss-up { color: var(--up); font-weight: 600; }
.tv3-tt-ohlc b.ss-down { color: var(--down); font-weight: 600; }
/* Спліт у тултіпі — суть події під ціною (напр. «✦ 10-for-1 split»). */
.tv3-tt-split { margin-block-start: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; }
/* Зірка-маркер спліту на графіку (HTML-overlay в .tv3-plot-main, не в розтягнутому SVG).
   pointer-events:auto — щоб рідний title-тултіп працював при наведенні на зірку. */
.tv3-split-mark { position: absolute; top: 3px; transform: translateX(-50%); z-index: 3;
  font-size: 12px; line-height: 1; cursor: help; text-shadow: 0 0 6px currentColor;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.tv3-axis { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-block-start: 10px; font-size: 10px; color: var(--text-faint); }

/* ---------- Sticky header offset (ревью-фікс §13) ----------
   design-system.css лишається чистим 1:1 (readme.md) — .sec{scroll-margin-
   block-start:20px} і .ss-toc{inset-block-start:14px} звідти замало для
   ЦІЄЇ сторінки, бо base_v3.html header — sticky (~64-72px). Ті самі
   селектори тут (специфічність рівна, джерело-порядок пізніший — виграє;
   для .ss-shell>*:first-child>.ss-toc специфічність вища за замовчуванням,
   тому дублюємо той самий селектор явно). */
.sec { scroll-margin-block-start: 84px; margin-block-start: var(--s-6); }
/* Горизонтальний скрол таблиць — ЗАВЖДИ видимий scrollbar як підказка, що є ще
   колонки (fundamentals/statements/13F/ETF та ін.). Раніше overlay-scrollbar на
   macOS ховався → юзер не бачив, що останній стовпець обрізаний (агент-P1).
   Селектор по інлайн-стилю — покриває всі 14 обгорток без правки кожного темплейту. */
[style*="overflow-x:auto"], [style*="overflow-x: auto"] {
  scrollbar-width: thin; scrollbar-color: var(--petrol-600) rgba(255,255,255,.06);
}
[style*="overflow-x:auto"]::-webkit-scrollbar, [style*="overflow-x: auto"]::-webkit-scrollbar { height: 9px; }
[style*="overflow-x:auto"]::-webkit-scrollbar-track, [style*="overflow-x: auto"]::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 5px; }
[style*="overflow-x:auto"]::-webkit-scrollbar-thumb, [style*="overflow-x: auto"]::-webkit-scrollbar-thumb { background: var(--petrol-600); border-radius: 5px; }
[style*="overflow-x:auto"]::-webkit-scrollbar-thumb:hover, [style*="overflow-x: auto"]::-webkit-scrollbar-thumb:hover { background: var(--petrol-500); }

/* Table tools — клієнтська пагінація + пошук для великих таблиць (>50 рядків). */
/* FOUC/CLS: до того як initTableTools() додасть .tv3-tt-ready, ховаємо рядки
   за межею 1-ї сторінки (50) — браузер не малює всі ~3360 рядків AAPL на
   першому кадрі й не смикає layout при згортанні. Рядки ЛИШАЮТЬСЯ в HTML-
   джерелі (display:none, не видалені) → SEO/УТП «все або нічого» цілі.
   50 збігається з data-page-size за замовчуванням; JS-inline-display далі
   перебирає контроль (специфічність inline > цей селектор). */
[data-table-tools]:not(.tv3-tt-ready) tbody tr:nth-child(n+51) { display: none; }
.tv3-tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 12px; }
.tv3-tt-search { flex: 1 1 220px; max-width: 340px; padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--surface-border); background: rgba(6, 26, 34, .6); color: var(--text);
  font-family: var(--font); font-size: 12.5px; }
.tv3-tt-search::placeholder { color: var(--text-3); }
.tv3-tt-search:focus { outline: 2px solid var(--petrol-300); outline-offset: 1px; }
.tv3-tt-count { font-size: 10.5px; letter-spacing: .04em; color: var(--text-3); }
.tv3-tt-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-block-start: 14px; }
.tv3-tt-btn { min-width: 38px; padding: 6px 14px; font-size: 14px; line-height: 1; }
.tv3-tt-btn:disabled { opacity: .38; cursor: default; }
.tv3-tt-pageinfo { font-size: 11px; letter-spacing: .04em; color: var(--text-2); min-width: 120px; text-align: center; }
.tv3-tt-nohit { text-align: center; color: var(--text-3); padding: 22px 12px; }
/* Виноски секцій (Daily OHLCV, ratio-легенда, fundamentals-нотатка).
   2026-08-21 (рішення власника): БЕЗ ch-кап — текст у батьку йде на ширину батька;
   ch-обмеження лишало напівпорожній блок ("пустоти праворуч"), що читалось як
   зламано. Читабельність тут забезпечує сам батько (панель/колонка з padding). */
/* Номер кроку секції (03/04…) — прибрати на вузьких екранах (внутрішній
   PAGE-ORDER маркер, юзеру нічого не каже, на mobile падає сиротою). */
@media (max-width: 600px) { .tv3-sec-num { display: none; } }
.ss-toc { inset-block-start: 84px; }
@media (min-width: 1024px) {
  .ss-shell > *:first-child > .ss-toc { inset-block-start: 84px; max-height: calc(100vh - 98px); }
}

/* Ревью-фікс §5: hero-KPI — перші 3 НАЯВНІ метрики. Шаблон рендерить divs
   лише для кандидатів із значенням (0-4 залежно від покриття), CSS відрізає
   4-й РЕНДЕРЕНИЙ (не позиційний) — разом це "перші 3 наявні", а не "перші 3
   з фіксованого списку". */
.ss-kpi-row > div:nth-child(n+4) { display: none; }

/* Ревью-фікс (round 3, п.2): Performance-картки без latest І без series не
   рендеряться (ticker_v3.html {% spaceless %} лишає .ss-perf-grid СПРАВДІ
   :empty, не просто whitespace, коли всі 4 картки порожні) — тоді ховаємо
   ВСЮ секцію #performance, разом із заголовком, а не порожній грід під ним.
   :has() вже використовується в base_v3.html (header>div>div:has(input)) —
   не новий патерн для цього кодбейзу. */
#s-performance:has(.ss-perf-grid:empty) { display: none; }

/* Ревью-фікс (round 3, п.3): Dividends-картки без значення не рендеряться —
   якщо ВСІ порожні, грід зникає без дірки (таблиця виплат нижче лишається
   незалежно, вона не всередині .ss-div-cards). */
.ss-div-cards:empty { display: none; }

/* Ревью-фікс (round 3, п.4): тепла пляма сцени (ss-blob-warm, base_v3.html,
   позиціонована у % від висоти .ss-scene — спільна для всього сайту, 1:1 з
   дизайнерським референсом) на КОРОТКИХ сторінках (HTHT) випадково потрапляє
   під напівпрозоре скло дивідендних карток і просвічує теплим/помаранчевим.
   Нейтралізуємо ЛИШЕ тут — не сайтвайд, base_v3.html не чіпаємо (спільна
   основа, AAPL-рендер інших карток уже затверджений як є): непрозоріша темна
   петроль-підкладка під наявним --glass-fill глушить будь-який випадковий
   колірний витік з підложжя, сама мова скла (blur+sheen+grain) не змінюється. */
#s-dividends .ss-glass { background-color: rgba(4, 20, 27, .55); }

/* ==================== Фаза 2 — Акти III-V ==================== */

/* ---------- StatusChip.jsx переклад — канон trade_status/AI-вердикт ----------
   Тони 1:1 з design-system/components/StatusChip/StatusChip.jsx TONES:
   live (петроль+glow), win/bull (#67E08C), loss/bear (#FF6B85), lapsed/
   neutral (сірий). Це ЄДИНЕ місце в кодбейзі, де ці два поняття (результат
   сигналу і напрям AI-вердикту) отримують пігулку — решта інформаційних
   бейджів (put/call, activist intent, source) навмисно НЕ StatusChip
   (readme.md: канон вузький, не "будь-який кольоровий лейбл"). */
.ss-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .26);
}
.ss-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ss-chip-live { color: #7BE8F5; }
.ss-chip-live i { box-shadow: 0 0 10px 2px currentColor; }
.ss-chip-win, .ss-chip-bull { color: var(--up); }
.ss-chip-loss, .ss-chip-bear { color: var(--down); }
.ss-chip-lapsed, .ss-chip-neutral { color: #8FB6C2; }

/* ---------- Свідомий відступ: інформаційні тег-бейджі (put/call, activist
   status/intent, ETF source, insider transaction code) — НЕ StatusChip-канон
   (той зарезервований для trade_status/AI-вердикту, readme.md). Тиха
   петроль-пігулка без dot/glow, кілька відтінків для розрізнення категорій
   без семантики "рух ціни". ---------- */
.ss-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--text-2);
  white-space: nowrap;
}
.ss-tag-accent { color: #7BE8F5; background: rgba(63, 211, 232, .14); }
.ss-tag-warn { color: var(--down); background: rgba(255, 107, 133, .14); }
.ss-tag-good { color: var(--up); background: rgba(103, 224, 140, .14); }
/* Амбер — нейтрально-акцентна категорія (activist board/engagement intent),
   НЕ семантика руху ціни (координатор, MINOR §13) — свідомо окремий тон
   від .ss-tag-warn (той лишається за put-option/справжніми "негативними"
   категоріями типу sl_hit-суміжних написів). */
.ss-tag-amber { color: #E0A85C; background: rgba(224, 168, 92, .14); }

/* ---------- News list rows — .lnk 1:1 з dc-референсом (TickerPage.dc.html
   локальний <style>), доданий сюди бо design-system.css лишається чистим. ---------- */
.lnk { display: block; padding-block: 12px; border-block-end: 1px solid rgba(255, 255, 255, .07); transition: background var(--react); }
.lnk:last-child { border-block-end: 0; }
.lnk:hover { background: rgba(255, 255, 255, .03); }

/* ---------- SignalCard.jsx переклад — лід-картка, залита ЛИШЕ коли
   trade_status=open (readme.md: "єдиний повністю залитий обʼєкт мови").
   Градієнт/box-shadow — 1:1 з SignalCard.jsx inline `base`. ---------- */
.tv3-signal-lead {
  display: block; color: #F2FEFF; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(142deg, #3FD3E8 0%, #12A0BE 40%, #0B6C92 74%, #0A4374 100%);
  box-shadow: 0 26px 56px -18px rgba(11, 110, 145, .9), 0 0 66px -20px rgba(47, 200, 225, .6), inset 1.5px 1.5px 0 rgba(255, 255, 255, .45);
  transition: transform .2s var(--ease);
}
.tv3-signal-lead:hover { transform: translateY(-1px); }

/* ---------- RRBeam.jsx переклад — промінь R:R. SSR 50/50, точну пропорцію
   виставляє initRRBeams() (ticker_v3.js) з data-rr/data-rr-status —
   той самий "text вже видимий без JS, бар лише JS-уточнення" патерн,
   що PriceRuler (Фаза 1). Кольори сегментів — статус-залежні, JS перемикає
   через data-rr-status (клас .is-live/.is-win/.is-loss/.is-lapsed). ---------- */
.tv3-beam-track { display: flex; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(214, 248, 255, .14); }
.tv3-beam-seg { display: block; transition: flex-basis .5s var(--ease); }
.tv3-beam-risk { background: linear-gradient(180deg, rgba(255, 107, 133, .16), rgba(255, 107, 133, .05)); }
.tv3-beam-reward { background: linear-gradient(90deg, rgba(123, 232, 245, .14), rgba(63, 211, 232, .07)); position: relative; }
.tv3-beam-needle { position: absolute; inset-block: -6px; inset-inline-start: -1px; width: 2px; background: var(--text); box-shadow: 0 0 12px 2px rgba(234, 246, 249, .5); }
.tv3-beam[data-rr-status="open"] .tv3-beam-risk { background: linear-gradient(180deg, rgba(255, 107, 133, .22), rgba(255, 107, 133, .07)); }
.tv3-beam[data-rr-status="open"] .tv3-beam-reward { background: linear-gradient(90deg, #1C7FB8, #7BE8F5); box-shadow: 0 0 34px -8px rgba(63, 211, 232, .6); }
.tv3-beam[data-rr-status="tp1_hit"] .tv3-beam-reward, .tv3-beam[data-rr-status="tp2_hit"] .tv3-beam-reward { background: linear-gradient(90deg, #3E8F63, #67E08C); box-shadow: 0 0 26px -6px rgba(103, 224, 140, .55); }
.tv3-beam[data-rr-status="tp1_hit"] .tv3-beam-risk, .tv3-beam[data-rr-status="tp2_hit"] .tv3-beam-risk { background: linear-gradient(180deg, rgba(255, 107, 133, .10), rgba(255, 107, 133, .04)); }
.tv3-beam[data-rr-status="sl_hit"] .tv3-beam-risk { background: linear-gradient(90deg, #FF6B85, #B23048); box-shadow: 0 0 26px -6px rgba(255, 107, 133, .55); }
.tv3-beam[data-rr-status="sl_hit"] .tv3-beam-reward { background: linear-gradient(90deg, rgba(123, 232, 245, .07), rgba(63, 211, 232, .03)); }
.tv3-beam[data-rr-status="expired"] .tv3-beam-risk, .tv3-beam[data-rr-status="expired"] .tv3-beam-reward {
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 8px);
}

/* ---------- My Metrics (+/✓ button) — PinButton.jsx-споріднений переклад,
   окремий клас від .ss-pinbtn (інша семантика: додати рядок до персональної
   вкладки, не бейдж-стрічку). ---------- */
.tv3-mmbtn {
  border: 0; cursor: pointer; width: 20px; height: 20px; border-radius: 6px; padding: 0;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(255, 255, 255, .08); color: var(--text-3);
  transition: background var(--react), color var(--react);
}
.tv3-mmbtn:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
.tv3-mmbtn.is-selected { color: #7BE8F5; background: rgba(63, 211, 232, .20); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .34); }

/* ---------- Responsive touch-ups (360 base already covered by design-system.css grids) ---------- */
@media (max-width: 767px) {
  .ss-kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* Лого hero (власник 2026-08-20): контейнер адаптується під аспект зображення.
   Перевизначає жорсткий flex-basis 36px з .ss-ruler-logo (design-system). */
.tv3-logo{flex:0 0 auto;width:auto;height:40px;padding:5px 7px;border-radius:11px;
  background:rgba(234,246,249,.92);box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),0 4px 12px -6px rgba(0,0,0,.5)}
.tv3-logo:not(:has(img)){background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 3px,transparent 3px 9px);width:36px;padding:0}
.tv3-logo-img{display:block;height:30px;width:auto;max-width:72px;object-fit:contain}