/* =============================================================================
   SCORES.CSS — Trend Score Colour System
   AI Supply Chain Dashboard
   Created: 2025-02-27

   PURPOSE: The .score-N and .score-pill classes are duplicated identically
   across universe.html, screener.html, etf.html, and index.html.
   This file is the single source of truth.

   USAGE: @import './scores.css'; in any page that shows trend scores.
   Currently used by: index, universe, screener, etf.

   REVERT: Copy the 7 .score-N rules back inline into each page's <style>.
   ============================================================================= */

/* =============================================================================
   SCORE PILL WRAPPER
   Inline-block badge that wraps the score-N colour classes.
   e.g. <span class="score-pill score-5">5/5</span>
   ============================================================================= */
.score-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-data);
    letter-spacing: 0.05em;
}

/* =============================================================================
   SCORE COLOUR TIERS
   score-5 = strongest bull / score-0 = full bear
   ============================================================================= */
.score-5 { background: var(--score-5-bg); color: var(--score-5-fg); }
.score-4 { background: var(--score-4-bg); color: var(--score-4-fg); }
.score-3 { background: var(--score-3-bg); color: var(--score-3-fg); }
.score-2 { background: var(--score-2-bg); color: var(--score-2-fg); }
.score-1 { background: var(--score-1-bg); color: var(--score-1-fg); }
.score-0 { background: var(--score-0-bg); color: var(--score-0-fg); }

/* =============================================================================
   TREND BADGE — vertical layout used on index-page tiles (v5)
   <div class="trend-badge score-5">
       <span>▲▲ 5/5</span>
       <span class="trend-context">STRONG TREND</span>
   </div>
   ============================================================================= */
.trend-badge {
    font-family: var(--font-data);
    font-weight: 800;
    font-size: 0.6rem;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.trend-context {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.8;
}

/* =============================================================================
   VOLUME COLOUR TIERS
   Used in universe, screener, etf tables.
   vol-surge → extremely high volume (>= 3× avg)
   vol-quiet → low volume (< 0.7× avg)
   ============================================================================= */
.vol-surge    { color: #ef4444; }
.vol-high     { color: #f97316; }
.vol-elevated { color: #fbbf24; }
.vol-normal   { color: var(--text-dim); }
.vol-quiet    { color: #60a5fa; }