/* ═══════════════════════════════
   Stock Exchange page styles
   ═══════════════════════════════ */

.stock-card:hover { border-color: var(--accent) !important; }

.ticker-item {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

#detail-panel { animation: revealUp 0.3s forwards; opacity: 0; margin-top: 1.5rem; }
#detail-panel[style*="block"] { opacity: 1; }

/* ── Ticker ── */
.ticker-bar { overflow-x: auto; white-space: nowrap; padding: 0.8rem 1.2rem; }
.ticker-strip { display: flex; gap: 1.5rem; font-family: 'Orbitron', sans-serif; font-size: 0.82rem; }

/* ── Grid ── */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; margin-top: 1rem; }

/* ── Detail panel ── */
.detail-layout { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.detail-price { font-size: 2rem; font-family: 'Orbitron', sans-serif; font-weight: 900; }
.detail-change { font-size: 0.85rem; }
.chart-container { flex: 1; min-width: 280px; height: 250px; }
.footer-note { text-align: center; font-size: 0.78rem; }

/* ── Mobile ── */
@media (max-width: 600px) {
    .stock-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .ticker-strip { gap: 1rem; font-size: 0.72rem; }
    .detail-layout { flex-direction: column; gap: 1rem; }
    .detail-price { font-size: 1.5rem; }
    .chart-container { min-width: unset; width: 100%; height: 200px; }
}