/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — hero-card.css  (Phase 8c — narrative engine hero surface)
   ────────────────────────────────────────────────────────────────────────────

   Hero card styles. The hero card sits between the class tabs and the
   leaderboard in the live session view; renders the top hero-tier
   narrative claim from the narrative engine.

   Design decision (Phase 8c): the TEXT renders uniformly in every case —
   same weight, same opacity, no per-tier styling, no hedge-word styling.
   Readability beats cleverness. The hedge words already in the sentence
   ("Looks like", "appears to be") carry the linguistic confidence signal.

   The single visual encoding is the LEFT ACCENT BORDER intensity:
     - .hero-card--strong   full-strength purple  (facts + high-confidence)
     - .hero-card--moderate ~60% purple           (Tier 3 moderate)
     - .hero-card--faint    faint purple          (Tier 3 low)
   Always present, full card height, never missed — unlike an 8px dot.

   When integrating, either:
     A) link this stylesheet in index.html after components.css, or
     B) paste these rules into components.css.

   Only existing tokens from tokens.css are used (no new tokens).
   ════════════════════════════════════════════════════════════════════════════ */


/* ── HERO CARD ROOT ───────────────────────────────────────────────────── */

.hero-card {
  /* Hidden by default. .hero-card--visible is toggled by JS when a claim
     fires. display:none keeps the leaderboard's vertical position stable
     when there's nothing to show. */
  display: none;

  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;

  align-items: center;
  gap: 12px;

  /* Left accent border lives on a pseudo-element so its color/opacity can
     change independently of the card's own 1px border, and so it inherits
     the card's rounded corners cleanly. Default strong; modifiers override
     the opacity below. */
  overflow: hidden;
}

.hero-card--visible {
  display: flex;
  animation: hero-card-fade-in var(--motion-medium) var(--ease-out);
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;       /* full height, pinned left */
  width: 3px;
  background: var(--purple);
  /* opacity set by strength modifiers below */
  opacity: 1;
}

@keyframes hero-card-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── TEXT (uniform in all cases) ──────────────────────────────────────── */

.hero-card__text {
  flex: 1;
  min-width: 0;             /* allow shrinking; prevents overflow */
  color: var(--text);
  font-size: 15px;
  font-weight: 600;         /* one weight, every claim */
  line-height: 1.35;
  letter-spacing: -0.005em;
}


/* ── CONFIDENCE = LEFT BORDER INTENSITY ───────────────────────────────── */

.hero-card--strong::before   { opacity: 1; }
.hero-card--moderate::before { opacity: 0.6; }
.hero-card--faint::before    { opacity: 0.3; }


/* ── DOT (retained in DOM, no longer used; kept hidden) ───────────────── */

.hero-card__dot {
  display: none;
}