/*
 * Flow Antenna — Shared Design System
 * =====================================
 * Single source of truth for tokens, typography, and shared components.
 * Import this on every page:
 *   <link rel="stylesheet" href="/static/flow-system.css">
 *
 * Token convention:
 *   --fa-bg-*      background layers (deepest → surface)
 *   --fa-border-*  borders
 *   --fa-text-*    text hierarchy
 *   --fa-gold-*    brand accent
 *   --fa-*         semantic colours (green, red, amber, etc.)
 */

/* ── GOOGLE FONTS (loaded once here, not per-page) ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* backgrounds — three layers */
  --fa-bg:        #07090F;   /* page background */
  --fa-surface:   #0F1520;   /* panels, cards */
  --fa-surface2:  #141E2E;   /* nested panels, hover states */
  --fa-surface3:  #1A2535;   /* deepest nesting / selected rows */

  /* borders */
  --fa-border:    #1E2D42;   /* standard dividers */
  --fa-border2:   #263550;   /* emphasis borders */

  /* text hierarchy */
  --fa-text:      #E8E2DA;   /* primary — body copy */
  --fa-text2:     #B0BCCA;   /* secondary — labels, meta */
  --fa-muted:     #7A8A9C;   /* muted — placeholders, timestamps */
  --fa-faint:     #3A4A5C;   /* faint — dividers-as-text, hints */

  /* brand gold */
  --fa-gold:      #C9A84C;
  --fa-gold-dim:  rgba(201,168,76,0.12);
  --fa-gold-glow: rgba(201,168,76,0.25);

  /* semantic */
  --fa-green:     #34D399;
  --fa-green-dim: rgba(52,211,153,0.10);
  --fa-red:       #F87171;
  --fa-red-dim:   rgba(248,113,113,0.10);
  --fa-amber:     #FBBF24;
  --fa-amber-dim: rgba(251,191,36,0.10);
  --fa-cyan:      #38BDF8;
  --fa-cyan-dim:  rgba(56,189,248,0.10);
  --fa-purple:    #A78BFA;
  --fa-purple-dim:rgba(167,139,250,0.10);
  --fa-pink:      #F472B6;

  /* typography */
  --fa-font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fa-font-mono: 'DM Mono', 'Fira Code', monospace;
  --fa-font-brand:'Bebas Neue', sans-serif;

  /* spacing scale */
  --fa-r4:  4px;
  --fa-r6:  6px;
  --fa-r8:  8px;
  --fa-r12: 12px;

  /* nav */
  --fa-nav-h:     52px;     /* top header height */
  --fa-bnav-h:    60px;     /* bottom nav height on mobile */
}

/* ── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--fa-font);
  background: var(--fa-bg);
  color: var(--fa-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fa-border); border-radius: 2px; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
.fa-brand {
  font-family: var(--fa-font-brand);
  letter-spacing: 5px;
  color: var(--fa-gold);
  line-height: 1;
}
.fa-mono { font-family: var(--fa-font-mono); }
.fa-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fa-muted);
}
.fa-section-eye {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fa-gold);
  margin-bottom: 12px;
}

/* ── TOP HEADER ──────────────────────────────────────────────────── */
.fa-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--fa-nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 20px 0;
  background: rgba(7,9,15,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--fa-border);
}

.fa-header-brand {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.fa-header-wordmark {
  font-family: var(--fa-font-brand);
  font-size: 19px;
  letter-spacing: 4px;
  color: var(--fa-gold);
  line-height: 1;
}
.fa-header-sub {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fa-muted);
  line-height: 1;
  margin-top: 2px;
}

/* desktop nav links in header */
.fa-header-nav {
  display: flex; align-items: center; gap: 4px;
}
.fa-header-nav a, .fa-header-nav button {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--fa-r4);
  border: 1px solid transparent;
  background: none; color: var(--fa-muted);
  cursor: pointer; transition: all 0.15s;
  text-decoration: none;
  font-family: var(--fa-font);
}
.fa-header-nav a:hover,
.fa-header-nav button:hover { color: var(--fa-text); border-color: var(--fa-border2); }
.fa-header-nav a.active,
.fa-header-nav button.active {
  color: var(--fa-gold);
  border-color: var(--fa-gold-glow);
  background: var(--fa-gold-dim);
}

.fa-header-right {
  display: flex; align-items: center; gap: 10px;
}

/* ── BOTTOM NAV (mobile) ─────────────────────────────────────────── */
.fa-bnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--fa-surface);
  border-top: 1px solid var(--fa-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fa-bnav-inner {
  display: flex; align-items: stretch; height: var(--fa-bnav-h);
}
.fa-bnav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 6px 4px;
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--fa-muted);
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.15s;
  text-decoration: none;
  font-family: var(--fa-font);
  min-height: 48px;
}
.fa-bnav-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.fa-bnav-btn.active { color: var(--fa-gold); }
.fa-bnav-btn:active { opacity: 0.7; }

/* page body offset so content isn't hidden under fixed navs */
.fa-page {
  padding-top: calc(var(--fa-nav-h) + env(safe-area-inset-top, 0px));
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fa-header-nav { display: none !important; }
  .fa-bnav { display: block; }
  .fa-page { padding-bottom: calc(var(--fa-bnav-h) + env(safe-area-inset-bottom, 0px)); }
  .fa-header { padding-left: 14px; padding-right: 14px; }
  .fa-header-wordmark { font-size: 15px; letter-spacing: 3px; }
  .fa-header-sub { display: none; }
}
@media (min-width: 769px) {
  .fa-bnav { display: none !important; }
}

/* ── CARDS ───────────────────────────────────────────────────────── */
.fa-card {
  background: var(--fa-surface);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-r8);
  padding: 16px;
}
.fa-card-hover {
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.fa-card-hover:hover {
  border-color: var(--fa-border2);
  background: var(--fa-surface2);
}

/* ── BADGES / PILLS ──────────────────────────────────────────────── */
.fa-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid; font-weight: 500;
}
.fa-badge-gold  { color: var(--fa-gold);  border-color: var(--fa-gold-glow);  background: var(--fa-gold-dim); }
.fa-badge-green { color: var(--fa-green); border-color: rgba(52,211,153,0.3); background: var(--fa-green-dim); }
.fa-badge-red   { color: var(--fa-red);   border-color: rgba(248,113,113,0.3);background: var(--fa-red-dim); }
.fa-badge-amber { color: var(--fa-amber); border-color: rgba(251,191,36,0.3); background: var(--fa-amber-dim); }
.fa-badge-muted { color: var(--fa-muted); border-color: var(--fa-border);     background: transparent; }

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.fa-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fa-font);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600;
  padding: 8px 20px; border-radius: var(--fa-r6);
  border: 1px solid; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  text-decoration: none;
}
.fa-btn-primary {
  background: var(--fa-gold); border-color: var(--fa-gold);
  color: #07090F;
}
.fa-btn-primary:hover { background: #D4B356; border-color: #D4B356; }

.fa-btn-outline {
  background: none; border-color: var(--fa-border2);
  color: var(--fa-text2);
}
.fa-btn-outline:hover { border-color: var(--fa-gold-glow); color: var(--fa-text); }

.fa-btn-ghost {
  background: none; border-color: transparent; color: var(--fa-muted);
}
.fa-btn-ghost:hover { color: var(--fa-text); }

/* ── STAT DISPLAY ────────────────────────────────────────────────── */
.fa-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.fa-stat-value {
  font-size: 24px; font-weight: 600;
  color: var(--fa-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fa-stat-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fa-muted);
}
.fa-stat-value.up   { color: var(--fa-green); }
.fa-stat-value.down { color: var(--fa-red); }

/* ── LIVE PULSE ──────────────────────────────────────────────────── */
.fa-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid;
}
.fa-pulse-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: fa-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fa-pulse { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

.fa-pulse.live    { color: var(--fa-green); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.06); }
.fa-pulse.pre     { color: var(--fa-amber); border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.06); }
.fa-pulse.closed  { color: var(--fa-muted); border-color: var(--fa-border);      background: transparent; }

/* ── DIVIDERS / SECTIONS ─────────────────────────────────────────── */
.fa-divider {
  height: 1px; background: var(--fa-border); margin: 24px 0;
}
.fa-section {
  padding: 80px 40px;
}
@media (max-width: 768px) {
  .fa-section { padding: 56px 20px; }
}

/* ── SCORE CHIP ──────────────────────────────────────────────────── */
.fa-score {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fa-font-mono);
  font-size: 11px; font-weight: 500;
  width: 38px; height: 38px;
  border-radius: var(--fa-r6);
  border: 1px solid;
  flex-shrink: 0;
}
.fa-score-high   { color: var(--fa-green); border-color: rgba(52,211,153,0.35);  background: rgba(52,211,153,0.08); }
.fa-score-mid    { color: var(--fa-amber); border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.08); }
.fa-score-low    { color: var(--fa-muted); border-color: var(--fa-border);       background: transparent; }

/* ── SOURCE TAG ──────────────────────────────────────────────────── */
.fa-source {
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--fa-r4);
  border: 1px solid var(--fa-border);
  color: var(--fa-muted); background: transparent;
  white-space: nowrap;
}

/* ── FORM INPUTS ─────────────────────────────────────────────────── */
.fa-input {
  width: 100%;
  background: var(--fa-surface2);
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-r6);
  color: var(--fa-text);
  font-family: var(--fa-font);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.fa-input:focus { border-color: var(--fa-gold-glow); }
.fa-input::placeholder { color: var(--fa-muted); }

/* ── MODAL / OVERLAY ─────────────────────────────────────────────── */
.fa-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.fa-modal {
  background: var(--fa-surface);
  border: 1px solid var(--fa-border2);
  border-radius: 12px;
  padding: 28px;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
}

/* ── TABLES ──────────────────────────────────────────────────────── */
.fa-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.fa-table th {
  text-align: left; padding: 8px 12px;
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fa-muted); border-bottom: 1px solid var(--fa-border);
  font-weight: 500;
}
.fa-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--fa-border);
  color: var(--fa-text2);
}
.fa-table tr:last-child td { border-bottom: none; }
.fa-table tr:hover td { background: var(--fa-surface2); }

/* ── UTILITY ─────────────────────────────────────────────────────── */
.fa-text-gold   { color: var(--fa-gold); }
.fa-text-green  { color: var(--fa-green); }
.fa-text-red    { color: var(--fa-red); }
.fa-text-amber  { color: var(--fa-amber); }
.fa-text-muted  { color: var(--fa-muted); }
.fa-text-faint  { color: var(--fa-faint); }
.fa-mono        { font-family: var(--fa-font-mono); }
.fa-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-sr-only     { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }