/* ═══════════════════════════════════════════════════════
   OTS CONTRAST PATCH — TRACK BUTTON VISIBILITY FIX
   Paste at BOTTOM of ots-styles.css or inject as
   separate <style> block after ots-styles.css loads.
   Fixes: inactive track buttons near-invisible on dark bg
   ═══════════════════════════════════════════════════════ */

/* ── TRACK BAR BASE CONTRAST FIX ──────────────────────── */
.track-bar {
  background: rgba(8,6,22,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.55) !important;
}

/* ── INACTIVE TRACK BUTTONS — READABLE ─────────────────── */
.track-btn {
  color: rgba(235,230,255,.72) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.04) !important;
  font-size: 9px !important;
  padding: 5px 14px !important;
  border-radius: 5px !important;
  letter-spacing: .15em !important;
  transition: all .18s ease !important;
}

.track-btn:hover {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.09) !important;
}

/* ── ACTIVE STATE — FULL IDENTITY PER TRACK ─────────────── */

/* Full Depth — Teal */
.track-btn[data-track="full"].active {
  color: #00E5FF !important;
  border-color: rgba(0,229,255,.65) !important;
  background: rgba(0,229,255,.14) !important;
  box-shadow: 0 0 14px rgba(0,229,255,.2) !important;
  font-weight: 700 !important;
}

/* Dinner Table — Warm Amber */
.track-btn[data-track="dinner"].active {
  color: #FFB300 !important;
  border-color: rgba(255,179,0,.65) !important;
  background: rgba(255,179,0,.13) !important;
  box-shadow: 0 0 14px rgba(255,179,0,.2) !important;
  font-weight: 700 !important;
}

/* Street Smart — Alarm Red */
.track-btn[data-track="street"].active {
  color: #FF5555 !important;
  border-color: rgba(255,68,68,.65) !important;
  background: rgba(255,68,68,.13) !important;
  box-shadow: 0 0 14px rgba(255,68,68,.2) !important;
  font-weight: 700 !important;
}

/* Tech Brain — Violet */
.track-btn[data-track="tech"].active {
  color: #C77DFF !important;
  border-color: rgba(199,125,255,.65) !important;
  background: rgba(199,125,255,.13) !important;
  box-shadow: 0 0 14px rgba(199,125,255,.2) !important;
  font-weight: 700 !important;
}

/* Español — Gold */
.track-btn[data-track="es"].active {
  color: #F5C842 !important;
  border-color: rgba(212,160,23,.65) !important;
  background: rgba(212,160,23,.13) !important;
  box-shadow: 0 0 14px rgba(212,160,23,.2) !important;
  font-weight: 700 !important;
}

/* ── LANE TOGGLE — MORE VISIBLE ──────────────────────── */
.lane-btn {
  color: rgba(235,230,255,.62) !important;
  font-size: 8.5px !important;
  letter-spacing: .14em !important;
}

.lane-btn.active {
  color: var(--gold-p, #F5C842) !important;
  background: rgba(212,160,23,.18) !important;
}

/* ── TRACK LABEL — READABLE ──────────────────────────── */
.track-label {
  color: rgba(235,230,255,.5) !important;
  font-size: 8px !important;
  letter-spacing: .2em !important;
}

/* ── MOBILE TRACK BAR ────────────────────────────────── */
@media (max-width: 600px) {
  .track-btn {
    font-size: 8px !important;
    padding: 5px 10px !important;
    letter-spacing: .1em !important;
  }
  .track-bar {
    gap: .4rem !important;
    padding: .5rem .85rem !important;
  }
}