/* home_v3.css — page-CSS для homepage_v3.html (порт cycle-2 Home.dc.html)
   + СПІЛЬНІ cycle-2 примітиви (ss-v*/ss-mark*/ss-needle-live/.k), які
   дизайнерський ds-base має, а компільований design-system.css ще ні —
   тому додаємо їх тут (design-system.css лишається чистим 1:1 з дизайнерським
   styles.css, нічого свого туди не пишемо). About-порт (legal_v3.html при
   page_type=='about') ТЕЖ підключає цей файл заради спільних примітивів +
   .k — homepage-локальні .hm-*/.chip/.row/.ops/.ex/.lead на About просто не
   мають відповідних вузлів (нешкідливі). Джерела за readme.md UI-KIT.md:
   design-system.css (токени, base_v3 підключає) → design-motion.css (.ss-lift)
   → цей файл. Префікс hm-/hv3- (homepage) — сторінко-локальний неймспейс. */

/* ---------- Спільні cycle-2 примітиви ---------- */
/* Величина числа — колір несе знак/акцент (ss-num дає моно+tabular-nums). */
.ss-v        { color: var(--text); }
.ss-v-up     { color: var(--up); }
.ss-v-down   { color: var(--down); }
.ss-v-accent { color: var(--petrol-100); }

/* Наративні «тіки» — 10 сегментів шкали score (0..10). ss-mark-on = активний. */
.ss-mark    { flex: 1 1 0; height: 5px; border-radius: 2px; background: rgba(255,255,255,.10); }
.ss-mark-on { background: linear-gradient(90deg,#0A4374,#12A0BE 55%,#7BE8F5); box-shadow: 0 0 12px -3px rgba(63,211,232,.7); }

/* Стрілка ADX-барометра — «жива» пульсація (декор уже показаного елемента,
   Закон 1 не порушено: появу нічим не анімуємо, лише пульс наявної крапки). */
.ss-needle-live { animation: ss-needle-pulse 2.6s ease-in-out infinite; }
@keyframes ss-needle-pulse {
  0%, 100% { box-shadow: 0 0 22px 3px rgba(63,211,232,.6), inset 1.5px 1.5px 0 rgba(255,255,255,.7); }
  50%      { box-shadow: 0 0 30px 5px rgba(63,211,232,.85), inset 1.5px 1.5px 0 rgba(255,255,255,.7); }
}
@media (prefers-reduced-motion: reduce) { .ss-needle-live { animation: none; } }

/* Моно-мітка-«окуляр» (any entity / meta / SEC forms підписи). */
.k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #4E727F; }

/* ---------- Розкладка ---------- */
/* Hero-fold: заголовок+чіпи / панель-доказ. Дві колонки на десктопі. */
.hm-fold { display: grid; gap: clamp(28px,4vw,44px); grid-template-columns: 1fr; margin-block-start: clamp(34px,5vw,58px); }
@media (min-width: 960px) { .hm-fold { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Парні секції (радар+власники, новини+наративи). */
.hm-two { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .hm-two { grid-template-columns: 1fr 1fr; } }

/* Відступ секції (Home.dc .sec, неймспейснуто щоб не чіпати generic .sec). */
.hm-sec { margin-block-start: 56px; }

/* ---------- Hero-чіпи прикладів ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-size: 12.5px; color: #A9C8D2; background: rgba(255,255,255,.07); box-shadow: inset 1px 1px 0 rgba(214,248,255,.18); transition: color var(--react), background var(--react); }
.chip:hover { color: #EAF6F9; background: rgba(63,211,232,.16); }
.chip s { text-decoration: none; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #5E8492; }

/* ---------- News-рядок + toggle AI-думок ---------- */
.row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-block-end: 1px solid rgba(255,255,255,.07); }
.row:last-child { border-block-end: 0; }
.ops { display: flex; gap: 9px; align-items: center; border: 0; margin: 0; padding: 5px 7px; border-radius: 999px; background: transparent; font: inherit; line-height: 0; cursor: pointer; -webkit-appearance: none; appearance: none; color: #8FB6C2; transition: background var(--react), box-shadow var(--react), color var(--react); }
.ops:hover { background: rgba(63,211,232,.16); color: #7BE8F5; }
.ops[aria-expanded="true"] { background: rgba(63,211,232,.2); box-shadow: inset 1px 1px 0 rgba(214,248,255,.26); color: #7BE8F5; }
.ops:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(123,232,245,.7); }

/* ---------- Explore-приклад (рядок картки-групи) ---------- */
.ex { display: block; padding: 11px 13px; border-radius: 13px; transition: background var(--react); }
.ex:hover { background: rgba(63,211,232,.13); }

/* ---------- Лідер сектора (Beating the S&P 500) ---------- */
.lead { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-block-end: 1px solid rgba(255,255,255,.06); }
.lead:last-child { border-block-end: 0; }
.lead:hover .lead-n { color: #7BE8F5; }