/* ═══════════════════════════════════════════════════════════════
   OTS DESIGN SYSTEM v2 · CONTRAST + TRACK IDENTITY
   Observe The System · Build-718
   Link this from every module: <link rel="stylesheet" href="ots-styles.css">
   Overrides inline CSS where contrast was insufficient.
   ═══════════════════════════════════════════════════════════════ */

/* ─── BASE IMPROVEMENTS ─────────────────────────────────────── */

:root {
  /* Background atmosphere — richer radial, not flat void */
  --bg: #05040F;
  /* Typography — sharper contrast */
  --white: #F0EEFF;
  --body-text: #DDDAF5;
  /* Card surfaces — more distinct from background */
  --card-bg: rgba(14,12,38,.94);
  --card-bg-warm: rgba(22,16,6,.92);
  --card-bg-cold: rgba(6,12,30,.94);
  --card-bg-red: rgba(22,4,4,.92);
  --card-bg-violet: rgba(10,5,28,.94);
  /* Improved borders */
  --card-border: 1px solid rgba(212,160,23,.28);
  --card-border-teal: 1px solid rgba(0,229,255,.25);
  --card-border-alarm: 1px solid rgba(255,68,68,.3);
}

/* Better body default */
body {
  color: var(--body-text);
  letter-spacing: 0.01em;
}

/* Richer background atmosphere — layered radial depth */
body::before {
  background:
    radial-gradient(ellipse 80% 45% at 20% 0%, rgba(0,229,255,.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(212,160,23,.05) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(199,125,255,.03) 0%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 50%, rgba(5,4,15,1) 40%, transparent 100%);
}

/* ─── CARD CONTRAST FIXES ────────────────────────────────────── */

.card {
  background: var(--card-bg);
  border: var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card-alarm {
  background: var(--card-bg-red);
  border-color: rgba(255,68,68,.35);
  box-shadow: 0 0 0 1px rgba(255,68,68,.08) inset;
}

.card-teal {
  background: var(--card-bg-cold);
  border-color: rgba(0,229,255,.28);
  box-shadow: 0 0 0 1px rgba(0,229,255,.06) inset;
}

.card-gold {
  background: var(--card-bg-warm);
  border-color: rgba(212,160,23,.35);
  box-shadow: 0 0 0 1px rgba(212,160,23,.06) inset;
}

.card-violet {
  background: var(--card-bg-violet);
  border-color: rgba(199,125,255,.28);
}

.card-body {
  color: var(--body-text);
  line-height: 1.75;
  font-size: 1.02rem;
}

/* ─── TRACK BAR — IMPROVED VISIBILITY ───────────────────────── */

.track-bar {
  background: rgba(5,4,15,.97);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 20px rgba(0,0,0,.5);
  gap: .5rem;
  flex-wrap: wrap;
  padding: .6rem var(--edge);
}

.track-btn {
  font-size: 9px;
  padding: 5px 13px;
  border-radius: 4px;
  letter-spacing: .18em;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(240,238,255,.4);
  transition: all .18s ease;
}

.track-btn:hover {
  color: var(--white);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
}

/* ─── TRACK IDENTITY SYSTEM ──────────────────────────────────
   Each track panel gets a distinct visual identity.
   Users immediately know which track they're reading.
   ────────────────────────────────────────────────────────── */

/* FULL DEPTH — Forensic Teal */
.track-btn[data-track="full"].active,
#track-full .track-btn.active {
  border-color: rgba(0,229,255,.6);
  color: #00E5FF;
  background: rgba(0,229,255,.1);
  box-shadow: 0 0 12px rgba(0,229,255,.15);
}

.track-content#track-full .track-panel {
  background: rgba(6,10,28,.97);
  border: 1px solid rgba(0,229,255,.2);
  border-left: 3px solid #00E5FF;
  border-radius: 0 12px 12px 0;
  box-shadow: -4px 0 20px rgba(0,229,255,.08), 0 4px 40px rgba(0,0,0,.4);
}

.track-content#track-full .track-panel-title {
  color: #00E5FF;
  border-bottom-color: rgba(0,229,255,.2);
  letter-spacing: .25em;
  font-size: 9px;
}

.track-content#track-full .track-panel p,
.track-content#track-full .track-panel li {
  color: #D8E4F5;
  line-height: 1.8;
}

.track-content#track-full .track-panel h4 {
  color: #7FD4F5;
}

/* DINNER TABLE — Warm Amber */
.track-btn[data-track="dinner"].active {
  border-color: rgba(255,179,0,.6);
  color: #FFB300;
  background: rgba(255,179,0,.1);
  box-shadow: 0 0 12px rgba(255,179,0,.15);
}

.track-content#track-dinner .track-panel {
  background: rgba(22,16,5,.97);
  border: 1px solid rgba(255,179,0,.22);
  border-left: 3px solid #FFB300;
  border-radius: 0 12px 12px 0;
  box-shadow: -4px 0 20px rgba(255,179,0,.08), 0 4px 40px rgba(0,0,0,.4);
}

.track-content#track-dinner .track-panel-title {
  color: #FFB300;
  border-bottom-color: rgba(255,179,0,.2);
  font-size: 9px;
  letter-spacing: .25em;
}

.track-content#track-dinner .track-panel p,
.track-content#track-dinner .track-panel li {
  color: #F0E0C0;
  line-height: 1.85;
  font-size: 1.05rem;
}

.track-content#track-dinner .track-panel h4 {
  color: #F5C842;
  font-size: 1.1rem;
}

.track-content#track-dinner .analogy {
  border-left-color: #FFB300;
  color: #F5C842;
  background: rgba(255,179,0,.05);
  padding: .75rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* STREET SMART — Bold Alarm */
.track-btn[data-track="street"].active {
  border-color: rgba(255,68,68,.65);
  color: #FF4444;
  background: rgba(255,68,68,.1);
  box-shadow: 0 0 12px rgba(255,68,68,.15);
}

.track-content#track-street .track-panel {
  background: rgba(22,4,4,.97);
  border: 1px solid rgba(255,68,68,.22);
  border-left: 3px solid #FF4444;
  border-radius: 0 12px 12px 0;
  box-shadow: -4px 0 20px rgba(255,68,68,.08), 0 4px 40px rgba(0,0,0,.4);
}

.track-content#track-street .track-panel-title {
  color: #FF4444;
  border-bottom-color: rgba(255,68,68,.2);
  font-size: 9px;
  letter-spacing: .25em;
}

.track-content#track-street .track-panel p,
.track-content#track-street .track-panel li {
  color: #F5D8D8;
  line-height: 1.78;
  font-size: 1.05rem;
  font-weight: 600;
}

.track-content#track-street .track-panel h4 {
  color: #FF6666;
  font-size: 1.1rem;
}

.track-content#track-street .analogy {
  border-left-color: #FF4444;
  color: #FF8888;
  background: rgba(255,68,68,.06);
  padding: .75rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* TECH BRAIN — Violet Precise */
.track-btn[data-track="tech"].active {
  border-color: rgba(199,125,255,.6);
  color: #C77DFF;
  background: rgba(199,125,255,.1);
  box-shadow: 0 0 12px rgba(199,125,255,.15);
}

.track-content#track-tech .track-panel {
  background: rgba(8,4,24,.97);
  border: 1px solid rgba(199,125,255,.2);
  border-left: 3px solid #C77DFF;
  border-radius: 0 12px 12px 0;
  box-shadow: -4px 0 20px rgba(199,125,255,.08), 0 4px 40px rgba(0,0,0,.4);
}

.track-content#track-tech .track-panel-title {
  color: #C77DFF;
  border-bottom-color: rgba(199,125,255,.2);
  font-size: 9px;
  letter-spacing: .25em;
}

.track-content#track-tech .track-panel p,
.track-content#track-tech .track-panel li {
  color: #D8C8F0;
  line-height: 1.75;
  font-size: .98rem;
}

.track-content#track-tech .track-panel h4 {
  color: #A070E0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .95rem;
  letter-spacing: .05em;
}

.track-content#track-tech .analogy {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
  border-left-color: #C77DFF;
  color: #B090D8;
  background: rgba(199,125,255,.05);
  padding: .75rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* ESPAÑOL — Gold Cultural */
.track-btn[data-track="es"].active {
  border-color: rgba(212,160,23,.65);
  color: #D4A017;
  background: rgba(212,160,23,.1);
  box-shadow: 0 0 12px rgba(212,160,23,.15);
}

.track-content#track-es .track-panel {
  background: rgba(20,15,4,.97);
  border: 1px solid rgba(212,160,23,.22);
  border-left: 3px solid #D4A017;
  border-radius: 0 12px 12px 0;
  box-shadow: -4px 0 20px rgba(212,160,23,.08), 0 4px 40px rgba(0,0,0,.4);
}

.track-content#track-es .track-panel-title {
  color: #D4A017;
  border-bottom-color: rgba(212,160,23,.2);
  font-size: 9px;
  letter-spacing: .25em;
}

.track-content#track-es .track-panel p,
.track-content#track-es .track-panel li {
  color: #F0E4C0;
  line-height: 1.85;
  font-size: 1.05rem;
}

.track-content#track-es .track-panel h4 {
  color: #F5C842;
  font-size: 1.1rem;
}

.track-content#track-es .analogy {
  border-left-color: #D4A017;
  color: #F5C842;
  background: rgba(212,160,23,.05);
  padding: .75rem 1rem;
  border-radius: 0 8px 8px 0;
}

/* ─── ACTIVE TRACK PANEL INDICATOR ──────────────────────────── */
/* Floating track indicator badge in top-right of active panel */
.track-panel::before {
  content: attr(data-track-name);
  position: absolute;
  top: -1px;
  right: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 6px 6px;
  opacity: .7;
}

/* ─── SECTION HEADER IMPROVEMENTS ───────────────────────────── */

.sec-title {
  letter-spacing: .02em;
  line-height: 1.1;
}

.sec-num {
  letter-spacing: .25em;
}

.sec-sub {
  color: rgba(245,240,230,.65);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* ─── STAT BOXES — IMPROVED SURFACE ─────────────────────────── */

.stat-box {
  background: rgba(12,10,32,.96);
  border: 1px solid rgba(212,160,23,.22);
  box-shadow: 0 2px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition: transform .15s, box-shadow .15s;
}

.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,0,0,.4);
}

/* ─── DIVIDERS — MORE VISIBLE ────────────────────────────────── */

.divider {
  opacity: .35;
  height: 1px;
}

/* ─── VERDICT BLOCK — STRONGER ───────────────────────────────── */

.verdict-block {
  background: rgba(18,2,2,.96);
  border: 1px solid rgba(255,68,68,.35);
  box-shadow: 0 0 40px rgba(255,68,68,.08) inset, 0 4px 40px rgba(0,0,0,.4);
}

.verdict-rationale {
  color: rgba(245,238,240,.82);
  font-size: 1.08rem;
}

/* ─── PULL QUOTES ────────────────────────────────────────────── */

.pull-quote {
  background: rgba(16,3,3,.92);
  box-shadow: -4px 0 0 0 currentColor;
}

/* ─── NETWORK BOX ────────────────────────────────────────────── */

.net-box {
  background: rgba(3,3,14,.97);
  box-shadow: 0 0 0 1px rgba(212,160,23,.12) inset;
}

/* ─── QOP GATE BLOCKS ────────────────────────────────────────── */

.qop {
  background: rgba(3,10,25,.88);
}

.qop-body {
  color: rgba(216,228,245,.82);
}

/* ─── TIMELINE ────────────────────────────────────────────────── */

.tl-body {
  color: rgba(220,216,245,.82);
  line-height: 1.72;
}

/* ─── LANDMINE ITEMS ─────────────────────────────────────────── */

.lm-item {
  background: rgba(18,3,6,.92);
  transition: transform .15s, border-color .15s;
}

.lm-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255,68,68,.35);
}

.lm-desc {
  color: rgba(230,220,225,.6);
  line-height: 1.5;
  font-size: .88rem;
}

/* ─── SOURCES LIST ───────────────────────────────────────────── */

.src-text {
  color: rgba(210,206,240,.68);
  line-height: 1.6;
}

/* ─── TABLE IMPROVEMENTS ─────────────────────────────────────── */

.fraud-table td, .donor-table td, .ext-table td,
.bill-table td, .pre-table td, .flow-table td {
  color: rgba(218,214,242,.82);
  padding: .65rem .85rem;
}

.fraud-table tr:hover td, .donor-table tr:hover td,
.ext-table tr:hover td, .bill-table tr:hover td {
  background: rgba(255,255,255,.035);
}

/* ─── SCROLLBAR (webkit) ─────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgba(5,4,15,.8); }
::-webkit-scrollbar-thumb { background: rgba(212,160,23,.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,160,23,.55); }

/* ─── HERO IMPROVEMENTS ──────────────────────────────────────── */

.hero-sub {
  color: rgba(240,230,200,.72);
}

.hero-eye {
  opacity: .85;
}

/* ─── MOBILE REFINEMENTS ─────────────────────────────────────── */

@media (max-width: 600px) {
  .track-bar {
    gap: .35rem;
    padding: .5rem var(--edge);
  }
  .track-btn {
    font-size: 8px;
    padding: 4px 10px;
  }
  .card-body {
    font-size: .97rem;
  }
}

/* ─── SITE HEADER REFINEMENT ─────────────────────────────────── */

.site-header {
  box-shadow: 0 1px 30px rgba(0,0,0,.6);
}

/* ─── LANE TOGGLE IMPROVEMENT ────────────────────────────────── */

.lane-toggle {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

.lane-btn.active {
  background: rgba(212,160,23,.15);
  box-shadow: 0 0 8px rgba(212,160,23,.12);
}

/* ─── ESOTERIC LANE GLOW ─────────────────────────────────────── */

.esoteric-only .card {
  box-shadow: 0 0 30px rgba(199,125,255,.06) inset;
}

/* ─── CONVICTION BLOCKS (TF-01) ──────────────────────────────── */

.conv-block {
  box-shadow: 0 0 40px rgba(255,68,68,.06) inset, 0 4px 40px rgba(0,0,0,.4);
}

/* ─── LOOSH BARS ─────────────────────────────────────────────── */

.loosh-track {
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}