/* Crypto pages (/crypto/, /crypto/bitcoin/, /crypto/ethereum/), on top of the
   shared «Бенто, графит» classes in style.css. Asset colors come from the
   shared variables (--btc, --ndq, --cash), so both themes work. */

/* calm "Bento mono" look: big numbers in ink, drawdowns in red */
.cry-btc { color: var(--ink); }
.cry-eth { color: var(--ink); }
.cry-red { color: var(--cash-ink); }

/* the page's inflation switch ("Price" / "After inflation") under the lead;
   crypto.js shows it (without JavaScript it would do nothing) */
.intro .cry-mode { justify-self: start; margin-top: 4px; }
.cry-wait { visibility: hidden; }

/* spacing inside tiles */
.cry-top-s { margin-top: 8px; }
.cry-top-m { margin-top: 12px; }
p.cry-flat { margin-bottom: 0; }
.cry-spark { height: 80px; }
.cry-tm { display: flex; flex-direction: column; align-items: flex-start; }
.cry-tm .sentence { margin-bottom: 0; }
.cry-ticker { display: inline-block; font: 600 10px/1 var(--font); letter-spacing: 0.08em; color: var(--muted); background: var(--track); border-radius: 999px; padding: 4px 7px; margin-left: 4px; vertical-align: 3px; }
.cry-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.cry-asset { display: inline-flex; align-items: center; gap: 8px; }
.cry-head { flex-wrap: nowrap; align-items: flex-start; }

/* notes next to charts and tables */
.cry-note { margin: -4px 0 12px; max-width: 82ch; }
.cry-foot { margin: 10px 0 0; max-width: 82ch; }

/* charts: legend inside the card, room reserved before the JS draws */
.chart .legend { padding: 2px 10px 0; margin: 0 0 4px; }
.cry-plot { min-height: 300px; }
.cry-plot-dd { min-height: 220px; }
.cry-plot-bars { min-height: 260px; }
.cry-plot.cry-fail { min-height: 0; padding: 28px 12px; font-size: 14px; color: var(--muted); }

/* tables */
.cry-gap { margin-top: 14px; }
.cry-table td { vertical-align: top; }
.cry-table .cry-sub { display: block; font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.cry-table .cry-sub.cry-inline { display: inline; margin-left: 4px; }
.cry-mark { color: var(--muted); margin-left: 1px; }
.cry-fall { font-weight: 700; color: var(--cash-ink); }
.cry-open { font-weight: 700; color: var(--bad); }
.cry-pos { color: var(--good); }
.cry-neg { color: var(--bad); }

.cry-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) {
  /* wide tables scroll sideways; the first column stays in view */
  .cry-table th:first-child, .cry-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .cry-table thead th:first-child { z-index: 2; }
  .cry-spark { height: 64px; }
}