/* The site's own audio player. Shared by the reader and the editor so a track
   looks the same while you are placing it as it does once it is published.

   Self-contained: it declares the few tokens it needs with fallbacks, so it
   drops into either stylesheet without inheriting a different palette. */

.sf-audio {
  --sf-a-surface: #111;            /* very dark grey, not the page's black */
  --sf-a-line: rgba(255, 255, 255, 0.10);
  --sf-a-ink: #f4f4f4;
  --sf-a-dim: #7d7d7d;
  --sf-a-track: rgba(255, 255, 255, 0.13);
  --sf-a-buffer: rgba(255, 255, 255, 0.07);
  --p: 0%;                         /* played */
  --b: 0%;                         /* buffered */

  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  height: 54px;
  background: var(--sf-a-surface);
  border: 1px solid var(--sf-a-line);
  border-radius: 0;
  transition: border-color 180ms ease;
}
.sf-audio.playing { border-color: rgba(255, 255, 255, 0.18); }
.sf-audio.failed { opacity: 0.5; }
.sf-audio audio { display: none; }

/* ---- play / pause ---- */

.sf-audio-play {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid var(--sf-a-line);
  border-radius: 0;
  color: var(--sf-a-dim);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.sf-audio-play:hover:not(:disabled) { color: var(--sf-a-ink); border-color: rgba(255,255,255,0.3); }
.sf-audio-play:focus-visible { outline: 1px solid var(--sf-a-ink); outline-offset: 2px; }
.sf-audio-play:disabled { cursor: default; }
.sf-audio.playing .sf-audio-play { color: var(--sf-a-ink); }
.sf-audio-play svg { width: 11px; height: 13px; fill: currentColor; display: block; }
/* The triangle is optically left-heavy in a square; nudge it back to centre. */
.sf-audio:not(.playing) .sf-audio-play svg { margin-left: 2px; }

/* ---- scrubber ---- */

.sf-audio-seek {
  flex: 1;
  min-width: 0;
  height: 18px;                    /* the hit area, not the line */
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sf-audio-seek:disabled { cursor: default; }
.sf-audio-seek:focus { outline: none; }
.sf-audio-seek:focus-visible { outline: 1px solid var(--sf-a-ink); outline-offset: 3px; }

/* One painted track for both engines: played, then buffered, then the rest.
   Driven entirely by --p and --b, so nothing is positioned in script. */
.sf-audio-seek::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 0;
  background:
    linear-gradient(to right, var(--sf-a-ink) var(--p), transparent var(--p)),
    linear-gradient(to right, var(--sf-a-buffer) var(--b), transparent var(--b)),
    var(--sf-a-track);
}
.sf-audio-seek::-moz-range-track {
  height: 2px;
  border-radius: 0;
  background:
    linear-gradient(to right, var(--sf-a-ink) var(--p), transparent var(--p)),
    linear-gradient(to right, var(--sf-a-buffer) var(--b), transparent var(--b)),
    var(--sf-a-track);
}

.sf-audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px;
  height: 12px;
  margin-top: -5px;                /* centre the bar on a 2px track */
  background: var(--sf-a-ink);
  border: 0;
  border-radius: 0;
  transition: height 160ms ease, margin-top 160ms ease;
}
.sf-audio-seek::-moz-range-thumb {
  width: 2px;
  height: 12px;
  background: var(--sf-a-ink);
  border: 0;
  border-radius: 0;
}
/* A playhead you can find, without a dot that reads as a different control. */
.sf-audio:hover .sf-audio-seek::-webkit-slider-thumb,
.sf-audio-seek:focus-visible::-webkit-slider-thumb {
  height: 16px;
  margin-top: -7px;
}
.sf-audio-seek:disabled::-webkit-slider-thumb { opacity: 0; }
.sf-audio-seek:disabled::-moz-range-thumb { opacity: 0; }

/* ---- time ---- */

.sf-audio-time {
  flex: none;
  color: var(--sf-a-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;   /* so the row does not twitch per second */
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .sf-audio { gap: 10px; padding: 0 12px; }
  .sf-audio-time { font-size: 9px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-audio, .sf-audio-play, .sf-audio-seek::-webkit-slider-thumb { transition: none; }
}