/* KHM Audio Book Display - public player. Fonts and text colour come from the theme. */
.khm-ab {
  --khm-ab-accent: #a8700e;
  --khm-ab-line: rgba(0, 0, 0, 0.12);
  --khm-ab-hover: rgba(0, 0, 0, 0.04);
  --khm-ab-active: rgba(168, 112, 14, 0.12);
  --khm-ab-bar: #fff;
  --khm-ab-height: 600px;
  position: relative;
  margin: 1.5em 0;
  /* Fixed-height box: the track list scrolls inside it, the player sits at the bottom. */
  display: flex;
  flex-direction: column;
  max-height: min(var(--khm-ab-height), 90vh);
}

.khm-ab > * {
  flex: 0 0 auto;
}

.khm-ab__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75em;
}

.khm-ab__search {
  flex: 1 1 14em;
  max-width: 24em;
  padding: 0.5em 0.75em;
  font: inherit;
  border: 1px solid var(--khm-ab-line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
}

.khm-ab__count {
  font-size: 0.9em;
  opacity: 0.75;
}

.khm-ab__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--khm-ab-line);
  border-radius: 6px;
  flex: 1 1 auto;
  min-height: 6em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.khm-ab__item {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--khm-ab-line);
}

.khm-ab__item:first-child {
  border-top: 0;
}

.khm-ab__row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.7em 0.9em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.khm-ab__row:hover,
.khm-ab__row:focus-visible {
  background: var(--khm-ab-hover);
  color: inherit;
  text-decoration: none;
}

.khm-ab__row.is-active {
  background: var(--khm-ab-active);
  font-weight: 600;
}

.khm-ab__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Play / pause glyph drawn in CSS so no icon font or images are needed. */
.khm-ab__icon {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1px solid var(--khm-ab-line);
  background: #fff;
  position: relative;
}

.khm-ab__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7em;
  height: 0.8em;
  transform: translate(-40%, -50%);
  background: var(--khm-ab-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.khm-ab__row.is-active .khm-ab__icon {
  border-color: var(--khm-ab-accent);
}

.khm-ab__row.is-playing .khm-ab__icon::before {
  transform: translate(-50%, -50%);
  clip-path: none;
  background: linear-gradient(to right, var(--khm-ab-accent) 0 35%, transparent 35% 65%, var(--khm-ab-accent) 65% 100%);
}

.khm-ab__empty {
  padding: 1em;
  opacity: 0.75;
}

.khm-ab__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0.75em 0 0;
}

.khm-ab--chapters .khm-ab__pager {
  flex-wrap: nowrap;
  margin: 0 0 0.75em;
}

.khm-ab__pager[hidden] {
  display: none;
}

.khm-ab__chapter {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.45em 0.6em;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: #fff;
  border: 1px solid var(--khm-ab-line);
  border-radius: 6px;
  text-overflow: ellipsis;
}

.khm-ab__page {
  min-width: 2.4em;
  padding: 0.4em 0.6em;
  font: inherit;
  line-height: 1.2;
  color: inherit;
  background: #fff;
  border: 1px solid var(--khm-ab-line);
  border-radius: 6px;
  cursor: pointer;
}

.khm-ab__page:hover:not(:disabled) {
  border-color: var(--khm-ab-accent);
}

.khm-ab__page[aria-current="page"] {
  background: var(--khm-ab-accent);
  border-color: var(--khm-ab-accent);
  color: #fff;
}

.khm-ab__page:disabled {
  opacity: 0.4;
  cursor: default;
}

.khm-ab__gap {
  padding: 0 0.2em;
  opacity: 0.6;
}

/* Player bar: fixed at the bottom of the box, below the scrolling list. */
.khm-ab__player {
  margin-top: 0.75em;
  padding: 0.75em 0.9em;
  background: var(--khm-ab-bar);
  border: 1px solid var(--khm-ab-line);
  border-radius: 8px;
}

.khm-ab__now {
  margin-bottom: 0.5em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.khm-ab__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

.khm-ab__audio {
  flex: 1 1 16em;
  min-width: 0;
  width: 100%;
  height: 40px;
}

.khm-ab__btn,
.khm-ab__speed {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 0.7em;
  font: inherit;
  line-height: 1;
  color: inherit;
  background: #fff;
  border: 1px solid var(--khm-ab-line);
  border-radius: 6px;
  cursor: pointer;
}

.khm-ab__btn:hover:not(:disabled),
.khm-ab__speed:hover {
  border-color: var(--khm-ab-accent);
}

.khm-ab__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Without JavaScript the rows are plain links to the files; hide the player. */
.khm-ab:not(.is-ready) .khm-ab__player {
  display: none;
}

@media (max-width: 600px) {
  .khm-ab__audio {
    order: -1;
    flex-basis: 100%;
  }
  .khm-ab__controls {
    justify-content: space-between;
  }
}