/* =============================================================================
   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; }

/* =============================================================================
   L3 BADGES — Weinstein Stage, RS Rating, Trend Template
   Added: 2026-03-14 — used by screener.html (+ home.html SIGNALS tab)
   Rendered by src/screener-presets.js badge functions.
   REVERT: Remove this block. Badge functions will render unstyled text.
   ============================================================================= */

/* ── Shared badge base ──────────────────────────────────────────────────── */
.stage-badge, .rs-badge, .tt-badge, .conv-badge, .pattern-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-data);
    letter-spacing: 0.03em;
}

/* ── Weinstein Stage ────────────────────────────────────────────────────── */
.stage-1 { background: rgba(6,182,212,0.12);  color: #06b6d4; }  /* cyan — basing */
.stage-2 { background: rgba(16,185,129,0.15); color: #10b981; }  /* emerald — uptrend */
.stage-3 { background: rgba(251,191,36,0.12); color: #fbbf24; }  /* amber — topping */
.stage-4 { background: rgba(239,68,68,0.12);  color: #ef4444; }  /* red — downtrend */
.stage-null { color: var(--text-dim); }

/* ── RS Rating ──────────────────────────────────────────────────────────── */
.rs-leader { background: rgba(16,185,129,0.15); color: #10b981; }  /* 90+ */
.rs-strong { background: rgba(52,211,153,0.10); color: #34d399; }  /* 70-89 */
.rs-mid    { background: rgba(251,191,36,0.10); color: #fbbf24; }  /* 50-69 */
.rs-low    { color: var(--text-dim); }                              /* <50 */
.rs-null   { color: var(--text-dim); }

/* ── Trend Template ─────────────────────────────────────────────────────── */
.tt-perfect { background: rgba(16,185,129,0.15); color: #10b981; }  /* 8/8 */
.tt-strong  { background: rgba(52,211,153,0.10); color: #34d399; }  /* 6-7 */
.tt-mid     { background: rgba(251,191,36,0.10); color: #fbbf24; }  /* 4-5 */
.tt-low     { color: var(--text-dim); }                              /* <4 */
.tt-null    { color: var(--text-dim); }

/* ── Conviction Score ───────────────────────────────────────────────────── */
.conv-high  { background: rgba(16,185,129,0.15); color: #10b981; font-weight: 800; }  /* 8-10 */
.conv-mid   { background: rgba(251,191,36,0.10); color: #fbbf24; }                     /* 5-7 */
.conv-low   { color: var(--text-dim); }                                                 /* 1-4 */
.conv-null  { color: var(--text-dim); }

/* ── Pattern Badge ──────────────────────────────────────────────────────── */
.pattern-badge {
    background: rgba(139,92,246,0.10);
    color: #a78bfa;
}