/* ============================================================================
   PRIOR MOVES — Design System foundations
   Colors + type tokens. Source of truth: the injected stylesheet in the
   Streamlit app (super-investor-mirror/app.py `_CSS`), the logo mark, the
   weekly digest email, and the OG card.

   Aesthetic: Bloomberg/terminal data-density × Linear/Ramp/Mercury polish.
   Dark, near-black navy canvas + ONE electric blue→cyan accent.
   Numbers are the product: tabular/mono for every figure.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ---- Brand canvas (dark-first) -------------------------------------- */
  --pm-bg: #0a0f1c; /* page — near-black navy */
  --pm-panel: #111a2e; /* card top / base surface */
  --pm-panel-2: #16223b; /* card bottom / raised surface */
  --pm-panel-3: #1b2942; /* hover / nested surface */
  --pm-border: #243149; /* hairline border */
  --pm-border-2: #33507e; /* hover / focus border (blue-tinted) */

  /* ---- Foreground ----------------------------------------------------- */
  --pm-fg1: #e9eef8; /* primary text */
  --pm-fg2: #93a4be; /* secondary / labels */
  --pm-fg3: #64748b; /* faint / captions, rank numerals */

  /* ---- Accent (the rising-arrow blue→cyan) ---------------------------- */
  --pm-accent: #3b82f6; /* electric blue — primary signal */
  --pm-accent-2: #22d3ee; /* cyan — gradient terminus, cross-signal */
  --pm-accent-ink: #bcd4ff; /* text on accent-tinted chips */
  --pm-accent-grad: linear-gradient(90deg, #3b82f6, #22d3ee); /* @kind color */
  --pm-accent-grad-diag: linear-gradient(
    135deg,
    #3b82f6,
    #22d3ee
  ); /* @kind color */

  /* ---- Semantic: colorblind-safe. up = green-teal, down = amber-red.
          NEVER pure red/green. Distinct from the --alert error red. ------ */
  --pm-up: #34d399; /* positive return / momentum (green-teal) */
  --pm-up-ink: #9ff0cf;
  --pm-up-soft: rgba(52, 211, 153, 0.14);
  --pm-down: #f0a35e; /* negative return (desaturated amber-red) */
  --pm-down-ink: #f7c795;
  --pm-down-soft: rgba(240, 163, 94, 0.14);

  --pm-gold: #f4b740; /* conviction stars, "warn" chips */
  --pm-gold-ink: #f6cf83;
  --pm-alert: #f87171; /* hard errors / destructive only */

  /* ---- Score ramp (PriorScore 0–100). The bar FILL is always the accent
          gradient; WIDTH encodes the score. Star tiers below. ------------ */
  --pm-score-track: rgba(148, 164, 190, 0.16);
  --pm-score-fill: linear-gradient(90deg, #3b82f6, #22d3ee);
  /* star-tier thresholds (single source of truth, mirrors scoring.score_label)
     ≥75 ★★★★★ · ≥60 ★★★★ · ≥45 ★★★ · ≥30 ★★ · <30 ★ */

  /* ---- Ambient hero glow (used sparingly, top of app canvas) ---------- */
  --pm-glow:
    radial-gradient(
      1100px 520px at 78% -8%,
      rgba(34, 211, 238, 0.06),
      transparent 60%
    ),
    radial-gradient(
      900px 480px at 10% -6%,
      rgba(59, 130, 246, 0.08),
      transparent 60%
    ); /* @kind color */

  /* ---- Type families -------------------------------------------------- */
  --pm-font-sans:
    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pm-font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (px) ------------------------------------------------ */
  --pm-text-eyebrow: 13px; /* uppercase, tracked, muted */
  --pm-text-micro: 11px;
  --pm-text-caption: 12px;
  --pm-text-small: 13.5px;
  --pm-text-body: 15px;
  --pm-text-body-lg: 17px;
  --pm-text-h3: 19px;
  --pm-text-h2: 24px;
  --pm-text-h1: 32px;
  --pm-text-display: 40px;
  --pm-text-display-xl: 52px;

  /* ---- Radii ---------------------------------------------------------- */
  --pm-radius-chip: 999px;
  --pm-radius-sm: 8px;
  --pm-radius-md: 10px;
  --pm-radius-lg: 14px; /* cards */
  --pm-radius-xl: 22px; /* logo tile (112/512 ≈ 22%) */

  /* ---- Spacing (4px base) --------------------------------------------- */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 20px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;

  /* ---- Elevation ------------------------------------------------------ */
  --pm-shadow-card: 0 8px 28px rgba(0, 0, 0, 0.28);
  --pm-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.45);
  --pm-card-grad: linear-gradient(180deg, var(--pm-panel), var(--pm-panel-2));

  /* ---- Motion --------------------------------------------------------- */
  --pm-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --pm-dur: 0.15s; /* @kind other */
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt in by wrapping content in .pm-prose, or copy
   the rules you need. Numerals everywhere use tabular/mono.
   ========================================================================== */

.pm-prose {
  font-family: var(--pm-font-sans);
  color: var(--pm-fg1);
  background: var(--pm-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

.pm-eyebrow {
  font-family: var(--pm-font-sans);
  font-size: var(--pm-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-fg2);
}

.pm-display-xl {
  font-size: var(--pm-text-display-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.pm-display {
  font-size: var(--pm-text-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
h1.pm,
.pm-h1 {
  font-size: var(--pm-text-h1);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--pm-fg1);
  margin: 0;
}
h2.pm,
.pm-h2 {
  font-size: var(--pm-text-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--pm-fg1);
  margin: 0;
}
h3.pm,
.pm-h3 {
  font-size: var(--pm-text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--pm-fg1);
  margin: 0;
}

.pm-body-lg {
  font-size: var(--pm-text-body-lg);
  line-height: 1.5;
  color: var(--pm-fg1);
}
.pm-body {
  font-size: var(--pm-text-body);
  line-height: 1.55;
  color: var(--pm-fg1);
}
.pm-small {
  font-size: var(--pm-text-small);
  line-height: 1.5;
  color: var(--pm-fg2);
}
.pm-caption {
  font-size: var(--pm-text-caption);
  line-height: 1.45;
  color: var(--pm-fg3);
}

/* Every figure: tabular, mono. Apply to any numeric value. */
.pm-num {
  font-family: var(--pm-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "zero" 1;
  letter-spacing: -0.01em;
}
.pm-ticker {
  font-family: var(--pm-font-mono);
  font-weight: 700;
  letter-spacing: 0.01em;
}

a.pm,
.pm-link {
  color: var(--pm-accent);
  text-decoration: none;
}
a.pm:hover,
.pm-link:hover {
  text-decoration: underline;
}

.pm-up-text {
  color: var(--pm-up);
}
.pm-down-text {
  color: var(--pm-down);
}