/* /bitcoin-cycle-indicators (templates/cycle_hub.html, cycle_indicator.html, partials/cycle_chart.html; main.asi.cyc).
   Loaded after seo.css and altseason.css, whose stat grid and inline-SVG chart it reuses; colours follow the site
   tokens (app.css), so both themes work. The heatmap scale runs blue (slow 200WMA growth) to red (fast). */
.cyc { --cyc-fast: var(--warn, #f5a524); --cyc-slow: var(--teal, #4fe0bf); --cyc-hot: var(--down, #f2495a);
       --cyc-cold: var(--up, #1fcf8a); --cyc-mm: var(--conf, #b394ff); }
.cyc-hot .stat-value small, .cyc-t-hot { color: var(--cyc-hot); }
.cyc-warm .stat-value small, .cyc-t-warm { color: var(--cyc-fast); }
.cyc-cool .stat-value small, .cyc-t-cool { color: var(--cyc-cold); }
.cyc-neutral .stat-value small, .cyc-na .stat-value small, .cyc-t-neutral, .cyc-t-na { color: var(--muted); }
.cyc-sm { font-size: 18px; }
.cyc-sm small { font-size: 13px; color: var(--muted); }

.cyc-chart { max-height: 420px; }
.cyc-l { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cyc-l.price { stroke: var(--text); stroke-width: 1.3; opacity: .85; }
.cyc-l.fast { stroke: var(--cyc-fast); }
.cyc-l.slow { stroke: var(--cyc-slow); }
.cyc-l.mm { stroke: var(--cyc-mm); stroke-width: 1.5; }
.cyc-l.wma { stroke: var(--text); stroke-width: 2; }
.cyc-l.hm { stroke-width: 2.2; }
.cyc-mark { fill: none; stroke: var(--cyc-hot); stroke-width: 2; }
.cyc-band { stroke: var(--line2); stroke-dasharray: 5 4; }
.cyc-band.cyc-b0 { stroke: var(--cyc-cold); } .cyc-band.cyc-b2 { stroke: var(--cyc-hot); }
.cyc-chart .cyc-blab { fill: var(--muted); font-weight: 600; }
.cyc-zhot { fill: var(--cyc-hot); fill-opacity: .08; }
.cyc-zcold { fill: var(--cyc-cold); fill-opacity: .08; }

/* heatmap buckets: 30-day % change of the 200-week MA (seo.cycle_indicators.HEAT_STEPS) */
.cyc { --hm-0: #3b4cc0; --hm-1: #4f63d9; --hm-2: #6a5ed6; --hm-3: #8a55cc; --hm-4: #a94bb8; --hm-5: #c9449c;
       --hm-6: #e2467a; --hm-7: #f05b52; --hm-8: #f57d2f; --hm-9: #e63323; --hm-na: var(--line2); }
.cyc-l.hm-0 { stroke: var(--hm-0); } .cyc-l.hm-1 { stroke: var(--hm-1); } .cyc-l.hm-2 { stroke: var(--hm-2); }
.cyc-l.hm-3 { stroke: var(--hm-3); } .cyc-l.hm-4 { stroke: var(--hm-4); } .cyc-l.hm-5 { stroke: var(--hm-5); }
.cyc-l.hm-6 { stroke: var(--hm-6); } .cyc-l.hm-7 { stroke: var(--hm-7); } .cyc-l.hm-8 { stroke: var(--hm-8); }
.cyc-l.hm-9 { stroke: var(--hm-9); } .cyc-l.hm-na { stroke: var(--hm-na); }

.cyc-legend { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.9; }
.cyc-legend .k { display: inline-block; width: 14px; height: 4px; margin: 0 5px 2px 10px; border-radius: 2px;
                 vertical-align: middle; background: var(--line2); }
.cyc-legend .k:first-child { margin-left: 0; }
.cyc-legend .k.price, .cyc-legend .k.wma { background: var(--text); }
.cyc-legend .k.fast { background: var(--cyc-fast); } .cyc-legend .k.slow { background: var(--cyc-slow); }
.cyc-legend .k.mm { background: var(--cyc-mm); }
.cyc-legend .k.mark { width: 9px; height: 9px; border: 2px solid var(--cyc-hot); border-radius: 50%; background: none; }
.cyc-legend .k.hotband { height: 10px; background: var(--cyc-hot); opacity: .35; }
.cyc-legend .k.coldband { height: 10px; background: var(--cyc-cold); opacity: .35; }
.cyc-legend .k.hm-0 { background: var(--hm-0); } .cyc-legend .k.hm-1 { background: var(--hm-1); }
.cyc-legend .k.hm-2 { background: var(--hm-2); } .cyc-legend .k.hm-3 { background: var(--hm-3); }
.cyc-legend .k.hm-4 { background: var(--hm-4); } .cyc-legend .k.hm-5 { background: var(--hm-5); }
.cyc-legend .k.hm-6 { background: var(--hm-6); } .cyc-legend .k.hm-7 { background: var(--hm-7); }
.cyc-legend .k.hm-8 { background: var(--hm-8); } .cyc-legend .k.hm-9 { background: var(--hm-9); }
.cyc-legend .k.hm-na { background: var(--hm-na); }
.cyc .panel > .note { margin: 0; padding: 8px 14px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.cyc-hub td:last-child { min-width: 260px; }