/* BARTLEY: audio player skin.
 * Styles the `<figure class="bartley-audio">` block (bin/mdbook-audio) and the
 * transport that theme/audio-player.js mounts into it. Palette tokens come from
 * css/variables.css (gold = --quote-border; imprint/gold-lifted = --links). The
 * native <audio controls> no-JS fallback is left unstyled (browser default). */

figure.bartley-audio {
  margin: 1.6em auto;
  max-width: 100%;

  /* Scrubber palette — derived from theme tokens so it adapts per house theme.
   * The thumb must read as a knob sitting ABOVE the rail, never blending into
   * the gold fill: value contrast (--ba-thumb vs gold) + a player-surface
   * knockout ring (--ba-thumb-ring) + an elevation shadow. The ring is the
   * hue-independent separator — it carves a gap even when fill and knob share
   * a hue. Thumb = --fg echoes the brand's figure/ground (ink on light, paper
   * on dark, like the logotype). --ba-pos is the played fraction, set by JS. */
  --ba-pos: 0%;
  --ba-track-h: 5px;
  --ba-thumb-d: 15px;
  --ba-fill: var(--quote-border, #a6894b);
  --ba-rail: color-mix(in srgb, var(--quote-border, #a6894b) 30%, var(--quote-bg, transparent));
  --ba-thumb: var(--fg, #1a1612);
  --ba-thumb-ring: var(--quote-bg, #ebe1ce);
}

/* No-JS fallback: native controls span the column. */
figure.bartley-audio audio.bartley-audio-el {
  display: block;
  width: 100%;
}

/* Header ABOVE the player: emphasized title (the reader-facing label) + muted
 * run time / attribution. Color (not opacity) keeps the title fully legible. */
figure.bartley-audio .bartley-audio-head {
  margin-bottom: 0.5em;
  font-size: 0.95em;
  font-style: italic;
  color: var(--icons, #6e6354);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

figure.bartley-audio .bartley-audio-title {
  font-style: normal;
  font-weight: 600;
  color: var(--fg, inherit);
}

/* The skinned transport (present only once JS has mounted). */
figure.bartley-audio .bartley-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  border: 1px solid var(--quote-border, #a6894b);
  border-radius: 8px;
  background: var(--quote-bg, transparent);
}

figure.bartley-audio .ba-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--links, currentColor);
  cursor: pointer;
  line-height: 1;
}

figure.bartley-audio .ba-btn:hover {
  color: var(--icons-hover, var(--links));
}

figure.bartley-audio .ba-btn:focus-visible {
  outline: 2px solid var(--quote-border, #a6894b);
  outline-offset: 2px;
}

figure.bartley-audio .ba-play {
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border-radius: 50%;
}

/* Custom scrubber. accent-color is deliberately NOT used: it paints track and
 * thumb from one color, fusing them. We hand-style both so the thumb reads
 * forward. The filled portion is a gradient stop at --ba-pos (driven by JS),
 * which works identically in WebKit and Firefox. */
figure.bartley-audio .ba-seek {
  flex: 1 1 auto;
  min-width: 4em;
  height: 1.4em;          /* comfortable pointer target; visual rail is thinner */
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Rail + filled portion (one gradient: fill up to --ba-pos, muted rail after). */
figure.bartley-audio .ba-seek::-webkit-slider-runnable-track {
  height: var(--ba-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--ba-fill) 0 var(--ba-pos),
    var(--ba-rail) var(--ba-pos) 100%);
}
figure.bartley-audio .ba-seek::-moz-range-track {
  height: var(--ba-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--ba-fill) 0 var(--ba-pos),
    var(--ba-rail) var(--ba-pos) 100%);
}

/* The knob: contrasting fill + player-surface knockout ring + elevation shadow,
 * and larger than the rail so it sits visibly on top. */
figure.bartley-audio .ba-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ba-thumb-d);
  height: var(--ba-thumb-d);
  margin-top: calc((var(--ba-track-h) - var(--ba-thumb-d)) / 2);
  border: none;
  border-radius: 50%;
  background: var(--ba-thumb);
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 2px 4px -1px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.12s ease;
}
figure.bartley-audio .ba-seek::-moz-range-thumb {
  width: var(--ba-thumb-d);
  height: var(--ba-thumb-d);
  border: none;
  border-radius: 50%;
  background: var(--ba-thumb);
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 2px 4px -1px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.12s ease;
}

/* Hover / drag: lift the knob further with a soft gold aura. */
figure.bartley-audio .ba-seek:hover::-webkit-slider-thumb,
figure.bartley-audio .ba-seek:active::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 0 0 6px color-mix(in srgb, var(--ba-fill) 24%, transparent),
    0 3px 6px -1px rgba(0, 0, 0, 0.55);
}
figure.bartley-audio .ba-seek:hover::-moz-range-thumb,
figure.bartley-audio .ba-seek:active::-moz-range-thumb {
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 0 0 6px color-mix(in srgb, var(--ba-fill) 24%, transparent),
    0 3px 6px -1px rgba(0, 0, 0, 0.55);
}

figure.bartley-audio .ba-seek:focus { outline: none; }
figure.bartley-audio .ba-seek:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 0 0 5px var(--ba-fill),
    0 2px 4px -1px rgba(0, 0, 0, 0.5);
}
figure.bartley-audio .ba-seek:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 2px var(--ba-thumb-ring),
    0 0 0 5px var(--ba-fill),
    0 2px 4px -1px rgba(0, 0, 0, 0.5);
}

/* Windows High Contrast / forced-colors: shadows are dropped, so fall back to
 * system colors with an explicit border for thumb/rail separation. */
@media (forced-colors: active) {
  figure.bartley-audio .ba-seek::-webkit-slider-runnable-track,
  figure.bartley-audio .ba-seek::-moz-range-track {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  figure.bartley-audio .ba-seek::-webkit-slider-thumb,
  figure.bartley-audio .ba-seek::-moz-range-thumb {
    background: SelectedItem;
    box-shadow: none;
    border: 2px solid Canvas;
  }
}

figure.bartley-audio .ba-time {
  flex: 0 0 auto;
  font-family: var(--mono-font, monospace);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  color: var(--fg, inherit);
  opacity: 0.72;
  white-space: nowrap;
  /* JS pins min-width to the longest timestamp this track will show, so the
     readout never reflows the row when it rolls e.g. 9:59 -> 10:00. Right-
     aligned so the box's right edge (next to the speed pill) stays fixed. */
  text-align: right;
}

/* Speed: a clear pill around the multiplier. JS pins min-width to the widest
 * preset label so the pill never resizes as the rate cycles (1× -> 1.25× ...);
 * the value here is only a pre-font-load fallback. tabular-nums keeps the
 * digits column-aligned. */
figure.bartley-audio .ba-speed {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2em;
  /* Fallback vertical centering for engines without text-box trimming (e.g.
     Firefox): bias the text down a hair so the CAP HEIGHT — not the font's em
     box, which leaves dead space below the baseline — reads centered. The
     @supports block below replaces this with exact cap-box trimming. */
  padding: 0.36em 0.62em 0.28em;
  border: 1px solid var(--quote-border, #a6894b);
  border-radius: 999px;
  background: transparent;
  color: var(--links, currentColor);
  font-size: 0.82em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Where supported (Chrome 133+, Safari 18.2+): trim the line box to the cap
 * height (top) and alphabetic baseline (bottom), so align-items:center centers
 * the cap height exactly — no per-font metric guessing. Padding returns to
 * symmetric since the trim, not the padding, now does the centering. */
@supports (text-box-edge: cap alphabetic) {
  figure.bartley-audio .ba-speed {
    padding-top: 0.32em;
    padding-bottom: 0.32em;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

figure.bartley-audio .ba-speed:hover {
  background: color-mix(in srgb, var(--quote-border, #a6894b) 14%, transparent);
}

figure.bartley-audio .ba-speed:focus-visible {
  outline: 2px solid var(--quote-border, #a6894b);
  outline-offset: 2px;
}