/* ═══════════════════════════════════════════════════════════════════════════
   RECON INTELLIGENCE PLATFORM — Visual System
   Aesthetic: Intelligence Terminal
   Palette: Charcoal void + acid-green signal + amber warning + red alert
   Typography: system monospace for labels/data, Georgia for prose/narrative
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg-void:    #0d0f12;
  --bg-surface: #141720;
  --bg-panel:   #1a1e28;
  --bg-raised:  #212535;
  --bg-hover:   #262b3a;

  /* Borders */
  --border-dim:    #2a2e3e;
  --border-mid:    #383d52;
  --border-bright: #4a5068;

  /* Signal / accent */
  --signal:        #00e87a;   /* acid green — primary accent */
  --signal-dim:    #00a857;
  --signal-faint:  rgba(0, 232, 122, 0.08);

  /* Sentiment */
  --pos:     #23c55e;   /* positive */
  --pos-bg:  rgba(35, 197, 94, 0.14);
  --neu:     #e0a020;   /* neutral / amber */
  --neu-bg:  rgba(224, 160, 32, 0.14);
  --neg:     #ef4444;   /* negative */
  --neg-bg:  rgba(239, 68, 68, 0.14);
  --nil:     #5a6080;   /* null */
  --nil-bg:  rgba(90, 96, 128, 0.18);

  /* Text */
  --text-primary:   #e8eaf0;
  --text-secondary: #9098b0;
  --text-dim:       #5a6080;
  --text-link:      #00e87a;
  --text-link-hover:#6fffb4;

  /* Popularity bar */
  --bar-track: #1e2232;
  --bar-fill:  #00e87a;

  /* Typography */
  --font-mono: "Courier New", "Lucida Console", monospace;
  --font-prose: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale (8px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px;

  /* Layout */
  --nav-h: 52px;
  --max-w: 1320px;
  --sidebar-w: 220px;
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ── TOP NAV ─────────────────────────────────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-dim);
  display: flex; align-items: center;
  padding: 0 var(--s5);
  gap: var(--s5);
  /* Subtle scan-line texture */
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 1px, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.06) 2px
  );
}
.nav-brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal);
  white-space: nowrap;
  margin-right: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.nav-brand::before {
  content: "▶";
  font-size: 10px;
  animation: blink 2s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--s2) var(--s3);
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  border: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--signal);
  background: var(--signal-faint);
  border-color: var(--border-dim);
  text-decoration: none;
}
.nav-spacer { flex: 1; }
.nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── PAGE LAYOUT ─────────────────────────────────────────────────────────── */
.page-wrapper {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}
.page-header {
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border-dim);
}
.page-title {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.page-title .accent { color: var(--signal); }
.page-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  margin-top: var(--s2);
}

/* ── SECTION LABELS ─────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 2px; height: 10px;
  background: var(--signal);
  border-radius: 1px;
}

/* ── PANELS ─────────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.panel--accent {
  border-left: 3px solid var(--signal);
}
.panel--warn {
  border-left: 3px solid var(--neu);
}

/* Narrative prose panels */
.narrative-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-left: 3px solid var(--signal);
  border-radius: 4px;
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
}
.narrative-panel p {
  font-family: var(--font-prose);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-primary);
}
.narrative-panel br { display: block; margin: 0.4em 0; content: ""; }

/* ── GRID LAYOUTS ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ── MARKET TILES ────────────────────────────────────────────────────────── */
.market-tile {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: var(--s4) var(--s5);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.market-tile:hover {
  border-color: var(--signal);
  background: var(--bg-hover);
  transform: translateY(-1px);
  text-decoration: none;
}
.market-tile__cc {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}
.market-tile__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: var(--s1);
}

/* ── TABLES ──────────────────────────────────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--s5);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-mid);
}
thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--s3) var(--s4);
  text-align: left;
  white-space: nowrap;
  user-select: none;
  position: relative;
}
table.sortable thead th {
  cursor: pointer;
}
table.sortable thead th:hover {
  color: var(--signal);
  background: var(--signal-faint);
}
table.sortable thead th::after {
  content: " ↕";
  font-size: 9px;
  color: var(--border-bright);
  margin-left: 2px;
}
table.sortable thead th.sort-asc::after  { content: " ↑"; color: var(--signal); }
table.sortable thead th.sort-desc::after { content: " ↓"; color: var(--signal); }
tbody tr {
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.1s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-hover); }
tbody td {
  padding: var(--s3) var(--s4);
  vertical-align: middle;
  color: var(--text-primary);
}
tbody td.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
tbody td.dim { color: var(--text-dim); font-size: 12px; }

/* ── FILTER INPUT ────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
}
.filter-input {
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--s2) var(--s3);
  width: 260px;
  transition: border-color 0.15s;
  outline: none;
}
.filter-input::placeholder { color: var(--text-dim); }
.filter-input:focus { border-color: var(--signal); }
.filter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── SENTIMENT CHIPS ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.chip--pos { color: var(--pos); background: var(--pos-bg); }
.chip--neu { color: var(--neu); background: var(--neu-bg); }
.chip--neg { color: var(--neg); background: var(--neg-bg); }
.chip--nil { color: var(--nil); background: var(--nil-bg); }
.chip::before {
  content: "●";
  font-size: 7px;
}
/* Larger sentiment display for detail views */
.chip--lg {
  font-size: 12px;
  padding: 4px 12px;
}
/* Numeric sentiment score */
.sentiment-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.sentiment-score.pos { color: var(--pos); }
.sentiment-score.neu { color: var(--neu); }
.sentiment-score.neg { color: var(--neg); }
.sentiment-score.nil { color: var(--nil); }

/* ── POPULARITY BAR ──────────────────────────────────────────────────────── */
.pop-cell {
  display: flex; align-items: center; gap: var(--s3);
  min-width: 100px;
}
.pop-score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--signal);
  min-width: 36px;
  text-align: right;
}
.pop-bar {
  flex: 1;
  height: 4px;
  background: var(--bar-track);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
  max-width: 100px;
}
.pop-bar__fill {
  height: 100%;
  background: var(--bar-fill);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── STAR RATING ─────────────────────────────────────────────────────────── */
.rating {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neu);
  white-space: nowrap;
}
.rating__count {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: 4px;
}

/* ── STAT PILLS (header summary) ─────────────────────────────────────────── */
.stat-row {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin: var(--s4) 0;
}
.stat-pill {
  background: var(--bg-raised);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  padding: var(--s2) var(--s4);
  display: flex; align-items: baseline; gap: var(--s2);
}
.stat-pill__val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--signal);
}
.stat-pill__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── APP HEADER ──────────────────────────────────────────────────────────── */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  align-items: start;
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border-dim);
}
.app-header__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--s2);
}
.app-header__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border-dim);
  border-radius: 2px;
  padding: 2px 7px;
}

/* ── SCREENSHOT GALLERY ──────────────────────────────────────────────────── */
.gallery {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s3);
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  margin-bottom: var(--s5);
}
.gallery::-webkit-scrollbar { height: 4px; }
.gallery::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
.gallery__item {
  flex-shrink: 0;
  width: 160px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-dim);
  background: var(--bg-raised);
  transition: border-color 0.15s;
}
.gallery__item:hover { border-color: var(--signal); }
.gallery__item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* ── REVIEW CARDS ────────────────────────────────────────────────────────── */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.review-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: var(--s4);
}
.review-card__header {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
}
.review-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.review-card__body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}
.review-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: var(--s2);
  letter-spacing: 0.06em;
}

/* ── EVIDENCE QUOTES ─────────────────────────────────────────────────────── */
.evidence {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.55;
  padding-left: var(--s3);
  border-left: 2px solid var(--border-mid);
  max-width: 520px;
}

/* ── OVER-INDEXED FEATURES ───────────────────────────────────────────────── */
.overindex-row td.rate-col {
  font-family: var(--font-mono);
  font-size: 12px;
}
.rate-delta {
  color: var(--signal);
  font-weight: 700;
}

/* ── OPPORTUNITIES TABLE ─────────────────────────────────────────────────── */
.opp-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  width: 28px;
  text-align: right;
}

/* ── NOTE BOX ────────────────────────────────────────────────────────────── */
.note-box {
  background: var(--neu-bg);
  border: 1px solid rgba(224,160,32,0.3);
  border-left: 3px solid var(--neu);
  border-radius: 4px;
  padding: var(--s3) var(--s4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neu);
  letter-spacing: 0.02em;
  margin: var(--s4) 0;
}

/* ── EMPTY STATES ────────────────────────────────────────────────────────── */
.empty-state {
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── BREADCRUMB ──────────────────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: var(--s4);
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--signal); }
.breadcrumb__sep { margin: 0 var(--s2); color: var(--border-bright); }

/* ── HIDDEN-BY-FILTER ────────────────────────────────────────────────────── */
tr.filtered-out { display: none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: auto; }
  html, body { max-width: 100%; overflow-x: hidden; }
  .page-wrapper { padding: var(--s4) var(--s3) var(--s7); }
  .app-header { grid-template-columns: 1fr; }
  .filter-input { width: 100%; }
  .gallery__item { width: 120px; }
  .gallery__item img { height: 200px; }

  /* Nav: wrap to multiple rows, drop non-essential chrome, larger tap targets */
  .top-nav { flex-wrap: wrap; height: auto; padding: var(--s2) var(--s3); gap: var(--s2); }
  .nav-spacer { display: none; }
  .nav-badge { display: none; }
  .nav-links { flex-wrap: wrap; gap: var(--s1) var(--s3); width: 100%; }
  .nav-links a { padding: 6px 2px; font-size: 12px; }

  /* Data tables: stay readable, scroll horizontally inside their wrapper */
  table { font-size: 12px; }
  thead th, tbody td { padding: 8px 10px; white-space: nowrap; }

  /* Narrative/prose panels and headings fit small screens */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
}

@media (max-width: 420px) {
  .gallery__item { width: 100px; }
  .gallery__item img { height: 170px; }
  .nav-links a { font-size: 11px; }
}

/* ── SCREENSHOT LIGHTBOX ─────────────────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 7, 9, 0.92);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(0, 232, 122, 0.5);
  box-shadow: 0 0 40px rgba(0, 232, 122, 0.25);
  background: #0d0f12;
}
.lightbox__close {
  position: fixed;
  top: 1.2rem;
  right: 1.4rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.8rem;
  line-height: 1;
  color: #00e87a;
  background: transparent;
  border: 1px solid rgba(0, 232, 122, 0.5);
  border-radius: 4px;
  cursor: pointer;
  font-family: "Courier New", monospace;
}
.lightbox__close:hover { background: rgba(0, 232, 122, 0.12); }

/* ── HORIZONTAL-SCROLL AFFORDANCE FOR DATA TABLES ────────────────────────── */
/* app.js wraps each .table-wrap in .table-affordance and toggles has-left/has-right/scrolled. */
.table-affordance { position: relative; }
.table-affordance::before,
.table-affordance::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 2;
}
.table-affordance::before { left: 0;  background: linear-gradient(to right, var(--bg-void) 12%, transparent); }
.table-affordance::after  { right: 0; background: linear-gradient(to left,  var(--bg-void) 12%, transparent); }
.table-affordance.has-left::before  { opacity: 1; }
.table-affordance.has-right::after   { opacity: 1; }

.table-affordance__hint {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 3;
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--bg-void);
  background: var(--signal);
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 0 12px rgba(0, 232, 122, 0.35);
}
.table-affordance.has-right .table-affordance__hint { opacity: .92; transform: none; animation: tbl-nudge 1.6s ease-in-out infinite; }
.table-affordance.scrolled  .table-affordance__hint { opacity: 0; animation: none; }
@keyframes tbl-nudge { 0%,100% { transform: none; } 50% { transform: translateX(3px); } }

/* slim themed scrollbar so the scroll track is visible */
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--signal); }

/* ── APP SYNOPSIS + ABOUT (Stage 3c) ─────────────────────────────────────── */
.app-synopsis {
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-panel);
  border-left: 3px solid var(--signal);
  border-radius: 4px;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s6);
}
.prose-block {
  font-family: var(--font-prose);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--s4);
  max-width: 70ch;
}
.prose-block--dim { color: var(--text-dim); font-size: 13.5px; }
.orig-text { margin-bottom: var(--s5); }
.orig-text summary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); cursor: pointer; margin-bottom: var(--s2);
}