/* ═══════════════════════════════════════════════════════════════════
   VōxSōma · vs-brand-track.css · 2026-05-05 · v1.0
   ───────────────────────────────────────────────────────────────────
   Brand luxury overlay for track player pages (morning, midday, evening).
   Transforms "hacker laboratory" UI into Bottle Amber + Fraunces luxury.
   Original DOM IDs untouched — audio code keeps working. Just visual.

   Default: brand mode. body.vs-science-mode reveals the technical view
   (frequencies, layer pills, freq bars) for biohackers who want it.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --vs-paper:    #ECEAE0;
  --vs-ink:      #0B0908;
  --vs-ink-soft: #4a4640;
  --vs-ink-quiet:#8a8478;
  --vs-bottle:   #594433;
  --vs-amber:    #B8845A;
  --vs-green:    #5e7a62;
}
html, body {
  background: var(--vs-paper) !important;
  color: var(--vs-ink) !important;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.wrap {
  background: var(--vs-paper);
  position: relative;
  z-index: 1;
}

/* ═══ BRAND LOGO ═══ */
.brand .nav-logo {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
}
.brand .nav-logo span {
  color: var(--vs-bottle) !important;
  background: none !important;
  -webkit-text-fill-color: var(--vs-bottle) !important;
}
.brand .nav-logo svg { display: none !important; }
.brand .brand-sub {
  color: var(--vs-ink-quiet) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin-top: 4px;
}
.back-btn {
  color: rgba(89,68,51,0.40) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.back-btn:hover {
  color: var(--vs-bottle) !important;
}

/* ═══ PHASE NAME — Fraunces italic, large ═══ */
.ph-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--vs-ink) !important;
  font-size: 38px !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
  transition: color 1s ease !important;
}
.ph-sub {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: none !important;
  margin-bottom: 36px !important;
  font-style: italic;
  font-weight: 400 !important;
}

/* ═══ SCIENCE elements — HIDDEN by default, toggle reveals ═══ */
.sci-strip { display: none !important; }
.freq-bars { display: none !important; }
.segs      { display: none !important; }
.layers    { display: none !important; }
body.vs-science-mode .sci-strip { display: flex !important; }
body.vs-science-mode .freq-bars { display: flex !important; }
body.vs-science-mode .segs      { display: flex !important; }
body.vs-science-mode .layers    { display: flex !important; }

/* ═══ RING + TIMER ═══ */
.ring-wrap { margin-bottom: 32px !important; }
.ring-wrap svg circle {
  stroke: rgba(89,68,51,0.10) !important;
}
#arc {
  stroke: var(--vs-amber) !important;
  filter: none !important;
}
.timer-val {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--vs-ink) !important;
  font-size: 32px !important;
  letter-spacing: -0.01em !important;
}
.timer-lbl {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
}

/* ═══ PLAY BUTTON — Bottle Amber ═══ */
.bp {
  background: var(--vs-bottle) !important;
  border: none !important;
  color: var(--vs-paper) !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 22px !important;
  box-shadow: 0 4px 16px rgba(89,68,51,0.20) !important;
  backdrop-filter: none !important;
  transition: all .25s ease !important;
}
.bp:hover, .bp.on {
  background: var(--vs-ink) !important;
  box-shadow: 0 6px 20px rgba(11,9,8,0.30) !important;
  color: var(--vs-paper) !important;
}

/* ═══ VOLUME ═══ */
.vr { margin-bottom: 24px !important; }
.vl {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}
input[type=range] {
  background: rgba(89,68,51,0.15) !important;
  width: 140px !important;
}
input[type=range]::-webkit-slider-thumb {
  background: var(--vs-bottle) !important;
  width: 13px !important;
  height: 13px !important;
}

/* track-info + voiceStatus hidden in brand mode */
.track-info, #voiceStatus {
  display: none !important;
}
body.vs-science-mode .track-info,
body.vs-science-mode #voiceStatus {
  display: block !important;
  color: var(--vs-ink-quiet) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ═══ NOW PLAYING AFFIRMATION ═══ */
#vsNowPlayingAff {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.35;
  color: var(--vs-bottle);
  text-align: center;
  max-width: 520px;
  margin: 12px auto 24px;
  min-height: 78px;
  padding: 0 20px;
  letter-spacing: -0.005em;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
#vsNowPlayingAff.on { opacity: 1; }

/* ═══ SCIENCE TOGGLE BUTTON — HIDDEN per Ramūnas 2026-05-06 ═══
   Brand luxury aesthetics aukščiau biohacker tech jargon. Mygtukas
   paslėptas, science mode visada OFF. Original styles preserved
   (commented) jei kada nors prireiks atstatyti. */
#vsSciToggle { display: none !important; }
/* (legacy styles kept for reference)
   position: fixed; top: 14px; right: 14px; background: transparent;
   border: 1px solid rgba(89,68,51,0.20); color: var(--vs-ink-quiet);
   padding: 7px 12px; border-radius: 6px; font-size: 10.5px;
   letter-spacing: 0.10em; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 500; z-index: 220; transition: all .2s; */

/* ═══ DISC ═══ */
#disc {
  color: var(--vs-ink-quiet) !important;
  background: rgba(89,68,51,0.04);
  padding: 16px 20px !important;
  border-radius: 10px;
  border: 1px solid rgba(89,68,51,0.10);
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ═══ MOBILE ═══ */
@media (max-width: 520px) {
  .ph-name { font-size: 28px !important; }
  .ph-sub { font-size: 11px !important; margin-bottom: 24px !important; }
  .timer-val { font-size: 26px !important; }
  .bp { width: 56px !important; height: 56px !important; }
  #vsNowPlayingAff { font-size: 21px !important; min-height: 66px; }
  #vsSciToggle { font-size: 9.5px; padding: 6px 9px; }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-05-05 · MEDITATION TRACK OVERLAY (relax / focus / sleep)
   Different DOM than voice tracks: .ph-tag (instead of .ph-sub),
   .ph-hz (technical Hz info — hide in brand mode), .tv (instead of
   .timer-val), .tcell telemetry table, .bs (stop button).
   ═══════════════════════════════════════════════════════════════════ */
.ph-tag {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: none !important;
  font-style: italic;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
}
.ph-hz {
  display: none !important;
}
body.vs-science-mode .ph-hz {
  display: block !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}
.tv {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--vs-ink) !important;
  font-size: 32px !important;
  letter-spacing: -0.01em !important;
}
.tl {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
}
.bs {
  background: transparent !important;
  border: 1px solid rgba(89,68,51,0.25) !important;
  color: var(--vs-bottle) !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
  transition: all .2s !important;
}
.bs:hover {
  background: rgba(89,68,51,0.08) !important;
  border-color: var(--vs-bottle) !important;
}

/* Telemetry table (.tcell) — hide in brand mode */
#tel { display: none !important; }
body.vs-science-mode #tel {
  display: grid !important;
  background: rgba(89,68,51,0.04) !important;
}
body.vs-science-mode .tcell {
  background: transparent !important;
}
body.vs-science-mode .tk,
body.vs-science-mode .tv2 {
  color: var(--vs-ink-quiet) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Hide render overlay (#ro) — meditation tracks render full-track MP3 first
   before play. Old "Preparing relax session" UI replaced by /prepare.html
   ceremony pattern in voice model — for now hide; future: route through
   prepare.html when user first opens. */
#ro {
  background: var(--vs-paper) !important;
  border: 1px solid var(--vs-line, rgba(89,68,51,0.18)) !important;
  border-radius: 14px !important;
}
#ro .title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  color: var(--vs-ink) !important;
}
#ro .sub {
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--vs-ink-quiet) !important;
}
#ro .hint {
  color: var(--vs-ink-quiet) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
#ro .bar { background: rgba(89,68,51,0.10) !important; }
#ro .fill { background: var(--vs-amber) !important; }
#ro .pct { color: var(--vs-bottle) !important; font-family: 'Fraunces', Georgia, serif !important; }

/* Volume indicator on meditation pages */
#vv, .tk, .tl { font-family: 'IBM Plex Sans', sans-serif !important; }

/* Headphones warning banner — restyle to brand */
#hp-warn {
  background: rgba(89,68,51,0.08) !important;
  border: 1px solid rgba(89,68,51,0.25) !important;
  color: var(--vs-bottle) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Get button (vsGetBtn) restyle to brand */
#vsGetBtn {
  background: var(--vs-bottle) !important;
  color: var(--vs-paper) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
#vsGetBtn:hover {
  background: var(--vs-ink) !important;
}

@media (max-width: 520px) {
  .tv { font-size: 26px !important; }
  .ph-tag { font-size: 11px !important; }
  .bs { width: 38px !important; height: 38px !important; }
}