/* listen.css: looks for listen.js (source: ~/dev/tool-zaid-sites-kit; edit it there). Colours come from the site: currentColor, or --l-accent if the site sets it. */
.l-rate, .l-share {
  font: inherit; font-size: .9em; line-height: 1.6;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 6px;
  padding: 0 .6em; margin-inline-start: .4em; cursor: pointer;
  vertical-align: middle; opacity: .85;
}
.l-rate:hover, .l-share:hover, .l-rate:focus-visible, .l-share:focus-visible { opacity: 1; }
.l-rate { min-width: 3.2em; }

a.l-heard::after { content: " ✓"; color: var(--l-accent, currentColor); font-weight: 700; }
.l-heard-box audio { opacity: .9; }

[data-continue][hidden] { display: none !important; }
.l-continue {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em;
  padding: .6em .9em; border: 1px solid currentColor; border-radius: 8px;
  color: inherit; text-decoration: none;
}
.l-continue:hover .l-continue-title { text-decoration: underline; }
.l-continue-label { font-weight: 700; color: var(--l-accent, inherit); }
.l-continue-title { flex: 1 1 12em; }
.l-continue-time { opacity: .75; font-size: .9em; }