/* templates_next/pages/content.html — page shell. Colors from skins/*.css */

.content-page {
  padding: 1.5rem 2rem 0;
}

.content-body {
  max-width: var(--content-max);
  margin: 0 auto;
}

.content-body > *:first-child {
  margin-top: 0;
}

.content-body > *:last-child {
  margin-bottom: 0;
}

.content-body table {
  width: 100%;
  max-width: 42rem;
  table-layout: fixed;
}

.content-body th,
.content-body td {
  padding: 0.7rem 1.75rem 0.7rem 0;
}

.content-body .lesson-audio-play {
  margin: 0.75rem 0 1.25rem;
}

.content-body .lesson-audio-play__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-cta);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-cta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.content-body .lesson-audio-play__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.content-body .lesson-audio-play__btn:hover,
.content-body .lesson-audio-play__btn:focus-visible {
  background: var(--color-cta-wash);
}

.content-body .lesson-audio-play__btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.content-body .lesson-audio-play__btn.is-playing {
  background: var(--color-cta);
  color: var(--color-surface);
}