/* Страница монеты /crypto/<slug>, версия 2 (25.09.2026).
   Дизайн-система cfpro-design-system: только токены cf-*, компоненты из
   /lib/cf/components.css. Здесь - раскладка страницы и её собственные узлы.
   Правило раскладки: ни одной пустоты - соседние панели одной высоты,
   строки растягиваются, график подгоняется под карточку монеты. */

*, *::before, *::after { box-sizing: border-box; }
/* Общие куски сайта на странице (окно входа, звезда избранного, подвал, график)
   написаны на старой палитре --g*, --white, --ink. Старый стиль страницы её
   задавал, новый - нет: окно входа выходило прозрачным. Задаём её через токены
   системы, тёмная тема переключается сама. */
:root {
  --ink: var(--cf-ink); --g900: var(--cf-ink); --g700: var(--cf-ink-2); --g500: var(--cf-ink-3); --g400: var(--cf-ink-3);
  --g300: var(--cf-line-strong); --g200: var(--cf-line); --g100: var(--cf-surface-2); --g50: var(--cf-canvas);
  --white: var(--cf-surface); --blue: var(--cf-accent); --up: var(--cf-up); --down: var(--cf-down);
  --lime: var(--cf-lime); --lime600: var(--cf-lime); --lime-soft: var(--cf-lime-tile); --lime-line: var(--cf-lime-tile-line);
  --tip-bg: var(--cf-tooltip-bg); --tip-fg: var(--cf-tooltip-ink);
}
html, body { background: var(--cf-canvas); }
html { overflow-x: clip; }
/* Шрифт на body: подписи графика рисуются холстом и берут его отсюда */
body { margin: 0; color: var(--cf-ink); font-family: var(--font-sans); }
/* Переход для клавиатуры: спрятан за краем, выезжает только при фокусе */
.skiplink { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: var(--cf-radius-sm); background: var(--cf-accent-fill); color: var(--cf-on-accent); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--cf-dur) ease; }
.skiplink:focus { transform: none; }
.cc-main { padding-top: var(--cf-space-20); padding-bottom: var(--cf-space-56); scroll-margin-top: 136px; }
.cc-main [id] { scroll-margin-top: 120px; }
.cc-sec { margin-top: var(--cf-space-44); }
.cc-sec > .cf-h2 { margin: 0 0 var(--cf-space-16); }
.cc-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cf-space-10) var(--cf-space-16); margin-bottom: var(--cf-space-16); flex-wrap: wrap; }
.cc-sec__head .cf-h2 { margin: 0; }
.cc-cap { font-size: 12.5px; color: var(--cf-ink-3); line-height: 1.45; }
.cc-label { font-size: 13px; font-weight: 500; color: var(--cf-ink-3); }
.cc-main a.cf-link { font-weight: inherit; }

/* Логотип: монограмма под картинкой, картинка проявляется, когда догрузится */
.cc-logo { position: relative; display: inline-grid; width: var(--s); height: var(--s); flex: none; border-radius: 50%; overflow: hidden; }
.cc-logo .cf-monogram { width: 100%; height: 100%; font-size: calc(var(--s) * .36); }
.cc-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--cf-dur) ease; background: var(--cf-surface); }
.cc-logo img.is-in { opacity: 1; }
.cc-spark { display: block; }

/* Заглушка живого числа: держит место, пока не пришёл ответ */
.cc-sk { display: inline-block; vertical-align: middle; height: .8em; border-radius: var(--cf-radius-xs); background: var(--cf-surface-3); animation: cc-pulse 1.2s ease-in-out infinite alternate; }
@keyframes cc-pulse { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-sk { animation: none; } }

/* Подсказка по «?» - по клику, на телефоне тоже */
.cf-q + .cc-tip { display: none; }
.cc-tip { position: absolute; z-index: var(--cf-z-popover); max-width: 280px; margin-top: 26px; padding: 10px 12px; border-radius: var(--cf-radius-sm);
  background: var(--cf-tooltip-bg); color: var(--cf-tooltip-ink); font-size: 13px; font-weight: 400; line-height: 1.45; box-shadow: var(--cf-shadow-tooltip); text-align: left; white-space: normal; }
.cf-q + .cc-tip.is-open { display: block; }
@media (hover: hover) and (pointer: fine) { .cf-q:hover + .cc-tip { display: block; } }

/* Первый экран: карточка монеты и график одной высоты */
.t-top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--cf-space-16); align-items: start; margin-top: var(--cf-space-16); }
.t-card { display: flex; flex-direction: column; }
.t-card__head { display: flex; align-items: center; gap: var(--cf-space-12); }
.t-card__head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.t-card__sym { font-size: 15px; color: var(--cf-ink-3); font-weight: 600; letter-spacing: 0; }
.t-card__acts { display: flex; gap: 6px; margin-left: auto; align-self: flex-start; }
.t-card__acts .cf-star[aria-pressed="true"] svg { fill: currentColor; color: var(--cf-star); }
/* Уведомление о цене: окно под колокольчиком, выезжает от него */
.t-card__acts { position: relative; }
.t-bell[aria-pressed="true"] { color: var(--cf-accent); background: var(--cf-accent-soft); }
.t-bell[aria-pressed="true"] svg { fill: currentColor; }
.t-alert { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--cf-z-popover); box-shadow: var(--cf-shadow-popover);
  transform-origin: top right; transition: opacity var(--cf-dur) cubic-bezier(.23, 1, .32, 1), transform var(--cf-dur) cubic-bezier(.23, 1, .32, 1); }
.t-alert[hidden] { display: none; }
@starting-style { .t-alert { opacity: 0; transform: scale(.97) translateY(-4px); } }
.t-alert__row { display: flex; gap: var(--cf-space-8); margin-top: 14px; }
.t-alert__row .cf-seg { flex: none; }
.t-alert__lvl { position: relative; flex: 1; min-width: 0; }
.t-alert__lvl span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--cf-ink-3); pointer-events: none; }
.t-alert__lvl .cf-input { padding-left: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-alert .cf-chips { margin-top: 10px; gap: 6px; }
.t-alert .cf-chip { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.t-alert__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--cf-ink-3); }
.t-alert__note b { color: var(--cf-ink-2); font-weight: 600; }
.t-alert__err { margin: 8px 0 0; font-size: 12.5px; font-weight: 500; color: var(--cf-down); }
.t-alert__pro { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }
@media (max-width: 767px) {
  .t-alert { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; transform-origin: bottom center; }
}
.t-price { margin-top: var(--cf-space-16); min-height: 40px; font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.t-alt { margin-top: 8px; min-height: 22px; font-size: 16px; font-weight: 600; }
.t-alt span { font-size: 12.5px; font-weight: 400; color: var(--cf-ink-3); }
.t-live { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-10); margin-top: var(--cf-space-10); }
.t-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--cf-space-16); }
.t-periods div { padding: 8px 10px; border-radius: var(--cf-radius-sm); background: var(--cf-surface-2); font-size: 14px; font-weight: 600; min-height: 38px; }
.t-periods div span:first-child { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--cf-ink-3); }
.t-card__range { margin-top: auto; padding-top: var(--cf-space-18); min-height: 78px; }
.t-card__range .cc-range { margin-top: 8px; }
.t-chartpanel { padding-top: var(--cf-space-14); padding-bottom: var(--cf-space-10); }
.t-chart { min-height: 402px; }

/* Монета без истории цен: графика нет, карточка на всю ширину */
.t-top.is-nochart { grid-template-columns: minmax(0, 1fr); }
.t-top.is-nochart .t-chartpanel { display: none; }
@media (min-width: 768px) {
  .t-top.is-nochart .t-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--cf-space-32); align-items: start; }
  .t-top.is-nochart .t-card__head, .t-top.is-nochart .t-card > .cf-tags { grid-column: 1 / -1; }
  .t-top.is-nochart .t-periods { grid-column: 2; grid-row: 3 / span 3; }
}
.t-pair.is-solo { grid-template-columns: minmax(0, 1fr); }
.t-pair.is-solo > .cf-panel:last-child { display: none; }
.t-card__range[hidden] { display: none; }

/* Шкала «где цена между минимумом и максимумом» */
.cc-range { position: relative; height: 6px; border-radius: var(--cf-radius-pill); background: var(--cf-surface-3); margin: var(--cf-space-10) 0 var(--cf-space-8); }
.cc-range__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--cf-accent-dim); }
.cc-range__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 0 3px var(--cf-surface); }
.cc-range__ends { display: flex; justify-content: space-between; gap: var(--cf-space-10); font-size: 12.5px; color: var(--cf-ink-3); }
.cc-range__ends b { display: block; color: var(--cf-ink); font-size: 14px; font-weight: 600; }
.cc-range__ends span:last-child { text-align: right; }

/* Лента ключевых чисел: 7 плашек на 4 и 2 колонки - последняя добирает ряд */
@media (max-width: 1100px) { .cf-keystrip--wide > div:nth-child(7):last-child { grid-column: span 2; } }

/* Липкая навигация по разделам */
.t-tabsbar { position: sticky; top: var(--cf-header-h); z-index: var(--cf-z-sticky); margin-top: var(--cf-space-24); background: var(--cf-canvas); }
.t-tabsbar .cf-tabs { overflow-x: auto; scrollbar-width: none; }
.t-tabsbar a.cf-tab { text-decoration: none; white-space: nowrap; }
a.cf-tab[aria-current] { color: var(--cf-ink); border-bottom-color: var(--cf-accent); }
.t-tabsbar + .cc-sec { margin-top: var(--cf-space-16); }

/* Пары панелей: строки растягиваются на высоту соседа - без пустого хвоста */
.t-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cf-space-16); align-items: stretch; }
.t-pair > .cf-panel { display: flex; flex-direction: column; }
.t-pair > .cf-panel > .cf-rows { flex: 1; display: flex; flex-direction: column; }
.t-pair .cf-row { flex: 1; align-items: center; }
.t-ret { flex: 1; display: flex; flex-direction: column; margin-top: 12px; }
.t-ret table { flex: 1; height: 100%; }
.t-ath { padding-top: var(--cf-space-18); }

/* Таблица доходностей */
.cc-ret { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-ret th { font-weight: 500; font-size: 13px; color: var(--cf-ink-3); text-align: right; padding: 0 0 var(--cf-space-8); }
.cc-ret th:first-child, .cc-ret td:first-child { text-align: left; }
.cc-ret td { padding: 9px 0; border-top: 1px solid var(--cf-line); text-align: right; font-weight: 600; }
.cc-ret td:first-child { font-weight: 400; color: var(--cf-ink-2); }

/* Рынки */
.cc-venue { display: inline-flex; align-items: center; gap: var(--cf-space-10); font-weight: 600; }
.cc-share { display: inline-block; width: 56px; height: 6px; margin-right: var(--cf-space-8); border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); vertical-align: middle; overflow: hidden; }
.cc-share i { display: block; height: 100%; border-radius: inherit; background: var(--cf-accent-dim); }
.cc-share--wide { width: 100%; height: 8px; margin: 0; }
.cc-share--wide i { background: var(--cf-chart-1); }
.cc-mstrip a { color: inherit; text-decoration: none; }
.cc-mstrip a:hover { color: var(--cf-accent); }

/* Деривативы */
.cc-deriv .cf-keystrip { border-top: 0; margin-top: -14px; }
.cc-vtab { width: 100%; border-collapse: collapse; margin-top: var(--cf-space-8); font-size: 14px; }
.cc-vtab th { padding: var(--cf-space-10) 0 var(--cf-space-6); font-size: 13px; font-weight: 500; color: var(--cf-ink-3); text-align: right; }
.cc-vtab td { padding: 10px 0; border-top: 1px solid var(--cf-line); text-align: right; font-weight: 600; }
.cc-vtab th:first-child, .cc-vtab td:first-child { text-align: left; font-weight: 600; }
.cc-vtab th + th, .cc-vtab td + td { padding-left: var(--cf-space-16); }
.cc-vtab__bar { width: 34%; }

/* Эмиссия */
.cc-supply { display: flex; height: 10px; margin-top: 14px; border-radius: var(--cf-radius-pill); overflow: hidden; background: var(--cf-surface-3); }
.cc-supply i { display: block; height: 100%; background: var(--cf-accent); }
.cc-supply--open { background: none; border: 1px dashed var(--cf-line-strong); }
.cc-supply-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cf-space-16); margin-top: var(--cf-space-18); padding-top: var(--cf-space-16); border-top: 1px solid var(--cf-line); }
.cc-supply-grid b { display: block; margin: 4px 0 2px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.cc-supply-grid .cc-cap { display: block; }

/* О проекте: текст сворачивается ровно по высоте паспорта */
.t-about { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--cf-space-16); align-items: start; }
.cc-fold { position: relative; overflow: hidden; }
.cc-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--cf-surface)); pointer-events: none; }
.cc-fold.is-open::after, .cc-fold.is-short::after { display: none; }
.cc-fold.is-short + .cf-btn { display: none; }
.cc-main .cf-prose h3 { font-size: 18px; font-weight: 600; margin: var(--cf-space-24) 0 var(--cf-space-8); }
.cc-main .cf-prose h3:first-child { margin-top: 0; }
.cc-main .cf-prose p { margin: 0 0 var(--cf-space-12); }

/* Нажатие */
.cc-main .cf-btn:active, .cc-main .cf-iconbtn:active, .cc-main .cf-seg button:active { transform: scale(.97); }

@media (max-width: 1100px) {
  .t-top, .t-about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cc-sec { margin-top: var(--cf-space-32); }
  .t-pair { grid-template-columns: minmax(0, 1fr); }
  .t-price { font-size: 34px; min-height: 34px; }
  .t-chart { min-height: 366px; }
  .cc-hide-sm { display: none; }
  .cc-supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Тост после сохранения уведомления: класс задаёт display, hidden его не перебил бы */
#ccToast { z-index: var(--cf-z-toast); }
#ccToast[hidden] { display: none; }