/* =========================================================
   PLAYER (Global footer + Sight)
   ========================================================= */

/* ---------- Tuning knobs ---------- */
:root{
  /* Progress geometry */
  --seek-track-h: 6px;            /* bar thickness */
  --seek-thumb-size: 14px;        /* knob diameter */
  --ap-fill: 0%;                  /* JS sets this per input (played %) */

  /* Button sizing */
  --player-btn: 44px;             /* main buttons */
  --player-btn-sm: 36px;          /* prev/next */
  --player-icon: 20px;            /* SVG size */

  /* Sight player overlap into hero image */
  --player-overlap: 16px;         /* ↑ to float card more into hero */

  /* Global player layout (footer) */
  --global-pad-top: 1rem;
  --global-pad-bottom: 1.25rem;   /* safe-area is added below */
  --global-reserve: 110px;        /* bottom padding for main .view content */

  /* Colors (inherit from your theme if available) */
  --player-bg: var(--panel, #141414);
  --player-surface: var(--surface, #1b1b1b);
  --player-border: var(--border, #2a2a2a);
  --player-text: var(--text, #f5f5f5);
  --player-muted: var(--muted, #9aa0a6);
  --progress-fill: #1DB954;       /* played portion */
  --progress-bg: #2a2a2a;         /* base track */
}

/* =========================================================
   GLOBAL PLAYER (fixed footer)
   ========================================================= */
.global-player{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: min(100%, var(--page-max));
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);

  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: var(--global-pad-top);
  padding-bottom: calc(var(--global-pad-bottom) + env(safe-area-inset-bottom, 0px));

  background: var(--player-bg);
  border-top: 1px solid var(--player-border);
  z-index: 50;
  overflow: visible; /* let the thumb extend fully at the ends */
}
.global-player.hidden{ display: none; }

/* Keep page content clear of the fixed footer */
.view{ padding-bottom: calc(var(--global-reserve) + env(safe-area-inset-bottom, 0px)); }

/* Global controls + title */
.gp-btn{
  width: var(--player-btn);
  height: var(--player-btn);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid #1DB954;
  background: #1DB954;
  color: #fff;
  cursor: pointer;
}
.gp-btn svg{ width: var(--player-icon) !important; height: var(--player-icon) !important; }

.gp-info{ flex: 1; overflow: hidden; }
.gp-title{
  font-size: 1rem; font-weight: 600; color: var(--player-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .25rem; /* space above progress */
}

/* Optional roomy wrapper (only if you keep a wrapper element) */
.gp-progress-wrap{
  position: relative;
  height: var(--seek-thumb-size);
  display: grid;
  align-items: center;
  margin-top: .25rem;
  overflow: visible;
}

/* =========================================================
   SIGHT PLAYER (card, rows, buttons) — unchanged names
   ========================================================= */
.audio-card{
  margin: .75rem 0 1rem;
  padding: .75rem;
  background: var(--player-bg);
  border: 1px solid var(--player-border);
  border-radius: .9rem;

  position: relative;
  z-index: 1;
  margin-top: calc(var(--player-overlap) * -1);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.audio-row{
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.audio-row.top{ margin-bottom: .75rem; }
.audio-row.bottom{ margin-top: .4rem; }

.ap-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--player-btn); height: var(--player-btn);
  border-radius: 999px;
  border: 1px solid #1DB954;
  background: #1DB954;
  color: #fff;
  cursor: pointer;
}
.ap-btn.sm{ width: var(--player-btn-sm); height: var(--player-btn-sm); }
.ap-btn svg{ width: var(--player-icon) !important; height: var(--player-icon) !important; }
.ap-btn:focus-visible{ outline: 2px solid rgba(128,238,192,.4); outline-offset: 2px; }

.ap-title{ font-weight: 600; font-size: .95rem; }
.ap-times{
  color: var(--player-muted);
  display: inline-flex; gap: .35rem; margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.ap-next-cta{
  appearance: none; border: 1px solid #1DB954;
  background: #1DB954; color: #fff;
  border-radius: .6rem; padding: .4rem .65rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
}
.ap-next-cta:focus-visible{ outline: 2px solid rgba(128,238,192,.4); outline-offset: 2px; }

/* Optional wrapper (only if you keep a wrapper element) */
.ap-progress-wrap{
  position: relative;
  height: var(--seek-thumb-size);
  display: grid;
  align-items: center;
  margin: .5rem 0 .9rem;
  overflow: visible;
}

/* =========================================================
   PROGRESS (shared for Sight + Global)
   - JS updates --ap-fill with the played fraction (0–100%)
   - No buffered (loading) bar is drawn
   ========================================================= */

/* Sight and Walk Player */
#apSeek, #wapSeek{
  appearance: none;
  width: 100%;
  height: var(--seek-thumb-size);
  background:
    linear-gradient(var(--progress-fill), var(--progress-fill)) 0 50% / var(--ap-fill, 0%) var(--seek-track-h) no-repeat,
    linear-gradient(var(--progress-bg), var(--progress-bg)) 0 50% / 100% var(--seek-track-h) no-repeat;
  border-radius: 999px;
  cursor: pointer;
}
#apSeek::-webkit-slider-runnable-track, #wapSeek::-webkit-slider-runnable-track{ height: var(--seek-track-h); background: transparent; }
#apSeek::-webkit-slider-thumb, #wapSeek::-webkit-slider-thumb{
  appearance: none;
  width: var(--seek-thumb-size); height: var(--seek-thumb-size);
  border-radius: 50%;
  background: #1DB954; border: 0;
  margin-top: calc((var(--seek-track-h) - var(--seek-thumb-size)) / 2);
}
#apSeek::-moz-range-track, #wapSeek::-moz-range-track{ height: var(--seek-track-h); background: transparent; border: 0; }
#apSeek::-moz-range-progress, #wapSeek::-moz-range-progress{ background: transparent; }
#apSeek::-moz-range-thumb, #wapSeek::-moz-range-thumb{
  width: var(--seek-thumb-size); height: var(--seek-thumb-size);
  border-radius: 50%; background: #1DB954; border: 0;
}

/* Global — pad content box so the knob never looks cut off at 100% */
#gpSeek{
  appearance: none;
  width: 100%;
  height: var(--seek-thumb-size);
  background:
    linear-gradient(var(--progress-fill), var(--progress-fill)) 0 50% / var(--ap-fill, 0%) var(--seek-track-h) no-repeat,
    linear-gradient(var(--progress-bg), var(--progress-bg)) 0 50% / 100% var(--seek-track-h) no-repeat;
  border-radius: 999px;
  cursor: pointer;

  box-sizing: border-box;
  padding-left:  calc(var(--seek-thumb-size) / 2);
  padding-right: calc(var(--seek-thumb-size) / 2);
  background-origin: content-box;
  background-clip: content-box;
}
#gpSeek::-webkit-slider-runnable-track{ height: var(--seek-track-h); background: transparent; }
#gpSeek::-webkit-slider-thumb{
  appearance: none;
  width: var(--seek-thumb-size); height: var(--seek-thumb-size);
  border-radius: 50%; background: #1DB954; border: 0;
  margin-top: calc((var(--seek-track-h) - var(--seek-thumb-size)) / 2);
}
#gpSeek::-moz-range-track{ height: var(--seek-track-h); background: transparent; border: 0; }
#gpSeek::-moz-range-progress{ background: transparent; }
#gpSeek::-moz-range-thumb{
  width: var(--seek-thumb-size); height: var(--seek-thumb-size);
  border-radius: 50%; background: #1DB954; border: 0;
}

/* Hide any legacy bars to prevent double paint (keep old ids for safety) */
#apBuffered, #apPlayed, #wapBuffered, #wapPlayed, #miniBuffered, #mpBuffered, #mpProgress, #gpBuffered, #gpProgress { display: none !important; }