/**
 * F1GMAT Mentor · f1gmat-mentor-player.css
 * The audio player built by f1gmat-mentor-player.js around an <audio controls>.
 * Shared by Mentor Slides and Mentor session.
 *
 * Colours use the theme's --fg-* tokens with the F1GMAT defaults as
 * fallbacks. Touch targets are 44px or larger (WCAG 2.2 AA).
 */

.f1-mentor-player {
  --pl-ink: var(--fg-ink, #1A1A1A);
  --pl-muted: var(--fg-ink-muted, #525252);
  --pl-soft: var(--fg-ink-soft, #3D3D3D);
  --pl-paper: var(--fg-paper, #FBFAF7);
  --pl-hair: var(--fg-hairline, #D4CFC4);
  --pl-teal: var(--fg-teal, #0E7490);
  --pl-gold: var(--fg-gold-dark, #8A6B1F);
  --pl-wave: #CEC6B2;
  --pl-white: #FFFFFF;

  padding: 14px 16px 12px;
  border: 1px solid var(--pl-hair);
  border-radius: 6px;
  background: var(--pl-white);
}

.f1-mentor-player *,
.f1-mentor-player *::before,
.f1-mentor-player *::after {
  box-sizing: border-box;
}

.f1-mentor-player audio {
  display: block;
  width: 100%;
}

.f1-mentor-player audio + audio {
  margin-top: 8px;
}

.f1-mentor-player.is-ready audio {
  display: none;
}

/* Loudness bars the server printed (Mp3Cleaner::levels()), one span per
   bar with a fixed height class. Shown above the native controls when
   JavaScript is off; the script draws its own bars from them. */
.f1-mentor-player__levels {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  margin-bottom: 8px;
}

.f1-mentor-player__levels span {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  background: var(--pl-wave);
}

.f1-mentor-player.is-ready .f1-mentor-player__levels {
  display: none;
}

.f1-mentor-lv0 {
  height: 6%;
}

.f1-mentor-lv1 {
  height: 12.3%;
}

.f1-mentor-lv2 {
  height: 18.5%;
}

.f1-mentor-lv3 {
  height: 24.8%;
}

.f1-mentor-lv4 {
  height: 31.1%;
}

.f1-mentor-lv5 {
  height: 37.3%;
}

.f1-mentor-lv6 {
  height: 43.6%;
}

.f1-mentor-lv7 {
  height: 49.9%;
}

.f1-mentor-lv8 {
  height: 56.1%;
}

.f1-mentor-lv9 {
  height: 62.4%;
}

.f1-mentor-lv10 {
  height: 68.7%;
}

.f1-mentor-lv11 {
  height: 74.9%;
}

.f1-mentor-lv12 {
  height: 81.2%;
}

.f1-mentor-lv13 {
  height: 87.5%;
}

.f1-mentor-lv14 {
  height: 93.7%;
}

.f1-mentor-lv15 {
  height: 100%;
}

.f1-mentor-player :focus-visible {
  outline: 2px solid var(--pl-teal);
  outline-offset: 2px;
}

.f1-mentor-player__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.f1-mentor-player .f1-mentor-player__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pl-ink);
  color: var(--pl-white);
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.f1-mentor-player .f1-mentor-player__play:hover {
  background: var(--pl-teal);
}

.f1-mentor-player .f1-mentor-player__play svg {
  width: 18px;
  height: 18px;
}

.f1-mentor-player__wave {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 56px;
  cursor: pointer;
  touch-action: none;
}

.f1-mentor-player__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.f1-mentor-player__bars span {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  background: var(--pl-wave);
}

.f1-mentor-player__clip {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

.f1-mentor-player__clip .f1-mentor-player__bars span {
  background: var(--pl-teal);
}

.f1-mentor-player__head {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 2px;
  background: var(--pl-ink);
  pointer-events: none;
}

.f1-mentor-player__segs {
  position: absolute;
  inset: auto 0 -8px 0;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.f1-mentor-player__segs i {
  height: 3px;
  background: var(--pl-gold);
  opacity: 0.35;
  border-radius: 2px;
}

.f1-mentor-player__segs i.is-now {
  opacity: 1;
}

/* Slide starts. */
.f1-mentor-player__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.f1-mentor-player__marks i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--pl-gold);
  opacity: 0.8;
}

.f1-mentor-player__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--pl-muted);
}

.f1-mentor-player__time {
  font-variant-numeric: tabular-nums;
}

.f1-mentor-player__ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A compact chip with a 44 x 44px hit area. Buttons are prefixed with
 * .f1-mentor-player so a host's button reset (e.g. .f1-mentor :where(button)) never
 * outranks them. */
.f1-mentor-player .f1-mentor-player__chip {
  position: relative;
  min-width: 44px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--pl-hair);
  border-radius: 14px;
  background: var(--pl-paper);
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  color: var(--pl-soft);
  cursor: pointer;
}

.f1-mentor-player .f1-mentor-player__chip::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

@media (prefers-reduced-motion: reduce) {
  .f1-mentor-player * {
    transition: none !important;
  }
}

/* ---------- Kept visible over theme rules ----------
 * A site theme can style every span or i inside its content (a
 * background, display: none, an icon font). These rules restate what the
 * waveform needs, with the !important flag on the few properties a theme
 * rule hid on f1gmat.com: the unplayed bars and the slide ticks
 * disappeared while the played bars stayed. */
.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__bars span,
.f1-mentor-player .f1-mentor-player__levels span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--pl-wave) !important;
}

.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__clip .f1-mentor-player__bars span {
  background: var(--pl-teal) !important;
}

.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__marks i {
  display: block !important;
  visibility: visible !important;
  opacity: 0.8 !important;
  margin: 0 0 0 -1px;
  padding: 0;
  font-style: normal;
  background: var(--pl-gold) !important;
}

.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__head {
  display: block !important;
  visibility: visible !important;
  background: var(--pl-ink) !important;
}

.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__segs i {
  display: block !important;
  visibility: visible !important;
  background: var(--pl-gold) !important;
}

.f1-mentor-player .f1-mentor-player__wave .f1-mentor-player__segs i.is-now {
  opacity: 1 !important;
}

/* The back and forward buttons keep their numbers on one line. */
.f1-mentor-player .f1-mentor-player__skip {
  white-space: nowrap;
}

/* ---------- Mute and volume ----------
 * The speaker chip mutes and unmutes (aria-pressed); the slider beside it
 * sets the volume. The slider's thumb is 24 px or more (WCAG 2.2 target
 * size), and the pair stays on one line when the row wraps. iOS ignores a
 * page volume, so the script hides the slider there. */
.f1-mentor-player__vol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.f1-mentor-player .f1-mentor-player__mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  color: var(--pl-teal);
}

.f1-mentor-player .f1-mentor-player__mute[aria-pressed="true"] {
  border-color: var(--pl-teal);
  color: var(--pl-ink);
}

.f1-mentor-player .f1-mentor-player__mute svg {
  width: 16px;
  height: 16px;
}

.f1-mentor-player .f1-mentor-player__volume {
  width: 88px;
  height: 28px;
  margin: 0;
  padding: 0;
  accent-color: var(--pl-teal);
  cursor: pointer;
}

.f1-mentor-player .f1-mentor-player__volume[hidden] {
  display: none;
}