/* Shared, opt-in Knowledge Center narration player. */
.article-audio {
  max-width: 760px;
  margin: 1.75rem auto 0;
  padding: 1.25rem 1.5rem;
  text-align: left;
  color: #102a43;
  background: #f0f7fc;
  border: 1px solid #cbdce9;
  border-radius: 14px;
}
.article-audio-heading { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; }
.article-audio audio { width: 100%; }
.article-audio-controls { display: flex; align-items: center; gap: 1rem; }
.article-audio-toggle, .article-audio-speed select {
  min-height: 44px;
  border: 1px solid #829db3;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.article-audio-toggle { min-width: 76px; padding: .6rem .8rem; background: #102a43; color: #fff; }
.article-audio-toggle:hover { background: #204663; }
.article-audio-timeline { flex: 1; min-width: 0; }
.article-audio-seek {
  display: block; width: 100%; height: 44px; margin: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: transparent;
  accent-color: #0369a1;
}
.article-audio-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #0369a1 var(--audio-progress, 0%), #bacddd var(--audio-progress, 0%)); }
.article-audio-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #0369a1; }
.article-audio-seek::-moz-range-track { height: 6px; border-radius: 3px; background: #bacddd; }
.article-audio-seek::-moz-range-progress { height: 6px; background: #0369a1; }
.article-audio-seek::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #0369a1; }
.article-audio-time { display: block; color: #40566b; font-size: .8rem; font-variant-numeric: tabular-nums; }
.article-audio-speed { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.article-audio-speed select { padding: .5rem; color: #102a43; background: #fff; }
.article-audio :is(button, input, select):focus-visible { outline: 3px solid #0369a1; outline-offset: 3px; }
.article-audio-status { margin: .75rem 0 0; font-size: .85rem; }
.article-audio-status:empty { display: none; }
@media (min-width: 601px) {
  .article-audio { padding-top: .75rem; padding-bottom: .75rem; }
  .article-audio-heading { margin-bottom: .25rem; }
  .article-audio-toggle { min-width: 68px; padding: .5rem .7rem; font-size: .875rem; }
  .article-audio-timeline { display: flex; align-items: center; gap: .75rem; }
  .article-audio-seek { flex: 1; min-width: 0; }
  .article-audio-time { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 600px) {
  .article-audio { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; column-gap: .5rem; align-items: center; padding: .25rem 1rem; }
  .article-audio-heading { margin-bottom: 0; line-height: 1.25; }
  .article-audio-toggle { min-width: 44px; padding: .25rem 0; font-size: .875rem; }
  .article-audio-controls { display: contents; }
  .article-audio-timeline { grid-column: 1 / -1; grid-row: 2; }
  .article-audio-time { margin-top: -.5rem; }
  .article-audio-speed { grid-column: 3; grid-row: 1; justify-self: end; gap: .25rem; }
  .article-audio-speed select { width: 64px; padding: .25rem; }
  .article-audio audio,
  .article-audio-status { grid-column: 1 / -1; }
}