/* /altcoin-season-index (templates/altcoin_season.html, main.asi). Loaded after seo.css; colours follow the
   site tokens (app.css), so dark and light themes just work. */
.asi { --asi-alt: var(--teal, #2bb3a3); --asi-btc: var(--warn, #f5a524); }
@media (min-width: 760px) { .asi-stats.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .asi-stats.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.asi .panel-h { gap: 8px; flex-wrap: wrap; }
.asi-now .stat-value small { font-size: 13px; font-weight: 600; margin-left: 4px; }
.asi-alt .stat-value small { color: var(--asi-alt); }
.asi-btc .stat-value small { color: var(--asi-btc); }
.asi-date { font-size: 18px; }

.asi-gauge { position: relative; display: flex; height: 8px; margin: 8px 0 6px; border-radius: 4px; overflow: visible; }
.asi-gauge i { display: block; height: 100%; }
.asi-g-btc { width: 25%; background: var(--asi-btc); opacity: .55; border-radius: 4px 0 0 4px; }
.asi-g-mid { width: 50%; background: var(--line2); }
.asi-g-alt { width: 25%; background: var(--asi-alt); opacity: .55; border-radius: 0 4px 4px 0; }
.asi-gauge b { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px;
               background: var(--text); box-shadow: 0 0 0 2px var(--panel); }

.asi-chart { display: block; width: 100%; height: auto; max-height: 360px; }
.asi-chart .grid { stroke: var(--line); stroke-width: 1; }
.asi-chart .grid.band { stroke: var(--line2); stroke-dasharray: 4 4; }
.asi-chart .tick { stroke: var(--line2); }
.asi-chart text { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.asi-chart .band-alt { fill: var(--asi-alt); fill-opacity: .10; }
.asi-chart .band-btc { fill: var(--asi-btc); fill-opacity: .10; }
.asi-line { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.asi .panel-b > .note { margin: 8px 0 0; }

.asi-table td:nth-child(2) { font-family: Inter, sans-serif; }
.asi-yes { color: var(--asi-alt); font-weight: 600; }
.asi-excl { margin: 0; padding: 8px 14px 12px; font-size: 12.5px; }