/*
 * The chapters under an episode's player (includes/key-moments.php, assets/key-moments/key-moments.js): a time, a title and
 * a one-line summary each. A warm paper card in the talk player's family, with its own colors (--km-*), so it reads the
 * same under X and Cornerstone; every rule sits under .vlx-km so the theme's resets don't win. Targets are 44px or more;
 * nothing is wider than its column at 375px.
 */
.vlx-km {
  --km-bg: #FAF6EE; --km-raise: #F1EADC; --km-ink: #221F27; --km-mute: #5E574C; --km-accent: #8A520C; --km-line: rgba(34, 31, 39, .12);
  max-width: 760px; margin: 22px auto 30px; padding: 18px 22px 12px; border: 1px solid var(--km-line); border-radius: 18px;
  background: radial-gradient(110% 80% at 100% 0%, rgba(226, 162, 74, .14), transparent 55%), var(--km-bg);
  color: var(--km-ink); font-family: inherit; line-height: 1.45; box-sizing: border-box; min-width: 0;
}
.vlx-km * { box-sizing: border-box; }
.vlx-km .vlx-km__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; padding: 0; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; color: var(--km-accent); }
.vlx-km .vlx-km__h span { font-weight: 500; letter-spacing: .04em; color: var(--km-mute); text-transform: none; font-size: 13.5px; }
.vlx-km .vlx-km__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.vlx-km .vlx-km__ch { margin: 0; padding: 0 0 6px; list-style: none; border-bottom: 1px solid var(--km-line); }
.vlx-km .vlx-km__ch:last-child { border-bottom: 0; }
.vlx-km .vlx-km__ch::before, .vlx-km .vlx-km__ch::marker { content: none; }
.vlx-km .vlx-km__go { display: flex; align-items: baseline; gap: 14px; min-height: 44px; margin: 0 -10px; padding: 10px 10px 2px; border-radius: 10px; color: var(--km-ink); text-decoration: none; box-shadow: none; }
.vlx-km a.vlx-km__go:hover { background: var(--km-raise); color: var(--km-ink); }
.vlx-km a.vlx-km__go:focus { outline: none; }
.vlx-km a.vlx-km__go:focus-visible { outline: 2px solid var(--km-accent); outline-offset: 2px; }
.vlx-km .vlx-km__go time { flex: none; width: 60px; min-width: 60px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--km-accent); }
.vlx-km .vlx-km__title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.vlx-km a.vlx-km__go[aria-current="true"] .vlx-km__title { color: var(--km-accent); }
.vlx-km .vlx-km__line { margin: 4px 0 4px; padding: 0 0 0 74px; font-size: 15px; line-height: 1.5; color: var(--km-mute); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .vlx-km { padding: 14px 16px 8px; border-radius: 14px; }
  .vlx-km .vlx-km__go { gap: 10px; }
  .vlx-km .vlx-km__go time { width: 50px; min-width: 50px; }
  .vlx-km .vlx-km__title { font-size: 16px; }
  .vlx-km .vlx-km__line { padding-left: 60px; font-size: 14.5px; }
}
/* An episode of an hour or more: h:mm:ss needs a wider time column. */
.vlx-km.vlx-km--hours .vlx-km__go time { width: 72px; min-width: 72px; }
.vlx-km.vlx-km--hours .vlx-km__line { padding-left: 86px; }
@media (max-width: 480px) {
  .vlx-km.vlx-km--hours .vlx-km__go time { width: 64px; min-width: 64px; }
  .vlx-km.vlx-km--hours .vlx-km__line { padding-left: 74px; }
}
/* A long list folds after its first six until "Show all" (key-moments.js; without scripts, all show). */
.vlx-km.is-folded .vlx-km__ch:nth-child(n+7) { display: none; }
.vlx-km.is-folded .vlx-km__ch:nth-child(6) { border-bottom: 0; }
.vlx-km .vlx-km__more { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 4px -10px; padding: 0 14px 0 10px;
  border: 0; border-radius: 22px; background: transparent; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--km-accent); cursor: pointer; }
.vlx-km .vlx-km__more::after { content: "›"; display: inline-block; font-size: 18px; transform: rotate(90deg); }
.vlx-km .vlx-km__more:hover { background: var(--km-raise); color: var(--km-accent); }
.vlx-km .vlx-km__more:focus { outline: none; }
.vlx-km .vlx-km__more:focus-visible { outline: 2px solid var(--km-accent); outline-offset: 2px; }