/* File: plugins/humanspark-post-audio/assets/post-audio.css
 * Purpose: Chaptered audio player for post content.
 * Project: HumanSpark | Date: 2026-07-23
 *
 * BEM structure: .hs-listen (container) with nested components.
 * LIGHT player theme ('Inset', chosen 2026-07-26) sits in the light reading column.
 * All colors and spacing use --hs-* tokens from humanspark-tokens.css.
 *
 * Component color variables (defined at .hs-listen scope to centralize
 * player-specific shades that have no global token equivalent).
 */

/* ---------------------------------------------------------------------------
   LIGHT ("Inset") treatment - chosen by Alastair 2026-07-26 from the six variations
   at /wp-content/uploads/player-variations/ (Experiments #45).

   Thesis: the player sits inside a light reading column, so it should stop being a
   dark block that interrupts the article. Same engine, same markup, same chapter
   data - this is a colour and chrome change only.

   It keeps the house terminal language rather than inventing a second card style:
   the chrome dot-bar is still here, rendered LIGHT, with the first dot live and
   carrying the post's signature colour. That follows the precedent the 2026-07-18
   sweep set - light components stay light, semantic colour rides a chrome dot - and
   it is why there is no accent edge anywhere in this file (see CLAUDE.md's
   three-part test and docs/REFERENCE-GOTCHAS.md "retired card look").
--------------------------------------------------------------------------- */
.hs-listen {
  /* Component-level color variables (player-specific colors live here) */
  --hs-listen-bg-start: #FBFAF7;
  --hs-listen-bg-end: #F6F4EF;
  /* Still named -dot- for the six rules that reference it, though the window dots are now
     inert chrome (--hs-terminal-dot). Renaming it is a follow-up, not this change. */
  --hs-listen-accent: #007F80;  /* Player-specific teal-lift (brighter than --hs-teal) */
  /* Progress front. Deliberately NOT the teal accent: teal is a link/accent colour sitewide and
     never a fill, and a 6px bar of it across the card is a fill. Gold is the brand's second
     colour and is doing here exactly what it does on an accent border elsewhere. The lift to
     --hs-gradient-start at the leading edge is the brand gradient's opening note, not a new hue. */
  --hs-listen-progress: linear-gradient(90deg, var(--hs-accent), var(--hs-gradient-start));
  --hs-listen-progress-flat: var(--hs-accent);
  /* Track behind the segments. Slightly lifted from --overlay-faint so an UNPLAYED segment still
     reads as an object on the navy rather than disappearing into it. */
  --hs-listen-seg-track: rgba(0, 8, 42, 0.12);
  /* Per-post colour signature, set by the --sig-* modifiers below from the post's category.
     It rides the eyebrow, the live chrome dot and the equaliser - identity, not state. The
     progress front stays gold on every post: progress means the same thing everywhere, so
     letting it change colour per post would make one signal carry two meanings. */
  --hs-listen-signature: var(--hs-listen-accent);
  /* Terminal chrome type. Every fallback is monospace on purpose: the JetBrains Mono webface
     is subset to latin (see theme/css/fonts.css), so any stray glyph outside that range must
     land on another mono face rather than jumping to a proportional one mid-word. */
  --hs-listen-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Primary text. Was five separate `var(--hs-grey)` literals meaning "text on dark"; now one
     variable, so the light/dark flip is a single line rather than a hunt through the file. */
  --hs-listen-text: var(--hs-navy);
  --hs-listen-text-muted: #5A6480;
  --hs-listen-gold-bg: rgba(201, 160, 0, 0.16);
  --hs-listen-icon-text: var(--hs-navy);
  --hs-listen-overlay-faint: rgba(0, 8, 42, 0.11);
  --hs-listen-overlay-dark: rgba(0, 8, 42, 0.05);
  --hs-listen-overlay-light: rgba(0, 8, 42, 0.04);
  --hs-listen-overlay-mark: rgba(0, 8, 42, 0.28);
  --hs-listen-chapter-current-bg: rgba(0, 127, 128, 0.10);

  /* Positioned so the scanline ::after below resolves against this card and not some
     ancestor. The card had no position of its own before. */
  position: relative;
  /* The card's OWN edge is stronger than the internal hairlines (--overlay-faint, 0.11). At 0.11
     the top edge measured (219,218,217) against a (247,249,251) page - real and uniform, but about
     11% contrast on a single row, which reads as absent at 1x and vanishes when a screenshot is
     downscaled (the corner arcs survive because they are thicker than 1px diagonally, which is why
     the corners looked drawn and the straight run did not). Raising this ONE value is the whole
     fix. Adding a second 1px ring via box-shadow is not: a zero-blur zero-offset ring lands
     immediately outside the border, and with no offset shadow above to blur them together the top
     edge then renders as two adjacent hairlines. That was tried on 2026-07-26 and reverted. */
  border: 1px solid rgba(0, 8, 42, 0.2);
  border-radius: 14px;
  overflow: hidden;
  /* One ground. The radial teal glow that used to sit behind the transport was a DARK-card
     device - it lifted a navy panel; on cream it only muddies it. Depth on light comes from
     the chrome bar and the recessed track instead. */
  background: linear-gradient(180deg, var(--hs-listen-bg-start), var(--hs-listen-bg-end));
  /* Inset white highlight does nothing on a light ground. A soft drop shadow is what seats a
     light panel in a light column. Offset DOWNWARD, so it supports the bottom and sides and
     contributes nothing at the top - which is why the top edge is the border's job alone. */
  box-shadow: 0 1px 2px rgba(0, 8, 42, 0.05);
  /* Reserves the collapsed steady-state height so parsing the VTT (which reveals the axis, the
     chapter label and the chapters toggle) does not shift the article. Was 320px when the
     chapter list was always open, then 200px. Measured post-parse height is now 190.5 desktop /
     196 at 375 after the toggles moved onto one row, so 200 was carrying ~10px of pure slack -
     which would have quietly given back a fifth of the vertical space that change recovered. */
  min-height: 196px;
}

/* The COMPACT variant, for podcast episodes (2026-08-03). The reservation above exists so
   parsing a VTT cannot shift the article - it is the collapsed height WITH a chapter axis, a
   chapter label and two toggles. An episode has none of those: no chapters (they live in
   chapters.json on sparkline, unreachable here) and no transcript, so nothing async can
   appear and nothing can shift. Keeping the reservation just pads ~90px of empty card under
   the transport row, which measured 104px against the reserved 196px.
   Anything that later gives episodes real chapters should DROP this modifier rather than
   tune it - the reservation is correct the moment async content can arrive. */
.hs-listen--compact { min-height: 0; }

/* Colour signatures. Three brand accents, not six: the categories group into lanes rather than
   each inventing a hue, which would take the player outside the palette. Set by
   HS_Audio_Frontend::signature_class() from the post's category. */
.hs-listen--sig-gold {
  --hs-listen-signature: var(--hs-accent);
}

.hs-listen--sig-pink {
  --hs-listen-signature: var(--hs-red);
}

/* No scanline. --hs-scanline is white-on-dark (rgba(255,255,255,0.025) stripes) and is
   literally invisible on a cream ground - keeping it would be dead weight pretending to be
   house language. The terminal identity here is carried by the chrome dot-bar and the mono
   type, which both survive the light treatment intact. */

.hs-listen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hs-listen-overlay-faint);
  /* Light equivalent of the graded chrome strip: a faint navy wash, darkest at the top, so
     the bar still reads as recessed relative to the body below it. */
  background: linear-gradient(180deg, rgba(0, 8, 42, 0.05), rgba(0, 8, 42, 0.02));
}

/* Inert chrome, not macOS traffic lights: the coloured dots read as an app window, which
   pulled against the terminal type everywhere else in the card. Same token as every other
   terminal card on the site. */
.hs-listen__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* NOT --hs-terminal-dot: that token is rgba(255,255,255,0.22), i.e. invisible on cream.
     Same device, light-ground value. */
  background: rgba(0, 8, 42, 0.16);
}

.hs-listen__eyebrow {
  margin-left: 8px;
  font-family: var(--hs-listen-mono);
  font-size: var(--hs-text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-listen-signature);
  font-weight: 700;
}
/* A qualifier on the label, not part of it: same type, stepped back in weight, colour and
   tracking so it does not compete with the label for the same glance. Kept in the a11y tree -
   "this audio is synthetic" is precisely what a listener should be told. */
.hs-listen__eyebrow-tag {
  color: var(--hs-listen-text-muted);
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---- Playing state --------------------------------------------------------
   Personality through behaviour rather than ornament: nothing here is visible until the reader
   presses play, and it costs the resting card no pixels. */

/* The live chrome dot - the same device every other terminal card on the site uses to carry a
   semantic colour, applied here to a state that genuinely changes. */
.hs-listen.is-playing .hs-listen__dot:first-child {
  background: var(--hs-listen-signature);
  box-shadow: 0 0 8px var(--hs-listen-signature);
}

.hs-listen__eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
  margin-left: auto;
  /* Reserved, not conditional. The element always holds its width and only fades in, so pressing
     play cannot reflow the bar or nudge the eyebrow. */
  opacity: 0;
  transition: opacity var(--hs-speed-fast);
}

.hs-listen.is-playing .hs-listen__eq {
  opacity: 1;
}

.hs-listen__eq i {
  width: 2px;
  border-radius: 1px;
  background: var(--hs-listen-signature);
  transform-origin: bottom;
}

.hs-listen.is-playing .hs-listen__eq i {
  animation: hs-listen-eq 1s ease-in-out infinite;
}

.hs-listen__eq i:nth-child(1) { height: 5px;  animation-delay: 0s; }
.hs-listen__eq i:nth-child(2) { height: 11px; animation-delay: 0.15s; }
.hs-listen__eq i:nth-child(3) { height: 7px;  animation-delay: 0.3s; }
.hs-listen__eq i:nth-child(4) { height: 10px; animation-delay: 0.45s; }
.hs-listen__eq i:nth-child(5) { height: 6px;  animation-delay: 0.6s; }

@keyframes hs-listen-eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Reduced motion keeps the INDICATOR (it reports a real state) and drops only the movement.
   Hiding it here would remove information from the readers most likely to want it. */
@media (prefers-reduced-motion: reduce) {
  .hs-listen.is-playing .hs-listen__eq i {
    animation: none;
  }
}

/* Echoes the shell prompt at the top of /blog/ ("> humanspark insights"). */
/* The bolt replaces the shell prompt. Two marks in one 9px bar read as clutter, and the bolt is
   the brand's own mark where "> " was borrowed from the /blog/ index. */
.hs-listen__eyebrow::before {
  content: "";
}

.hs-listen__bolt {
  width: 13px;
  height: 13px;
  margin-left: 5px;
  /* Sized decorative SVGs must declare their own display - an inline default puts them on a text
     baseline and the bar's align-items then centres the LINE BOX, not the glyph. Recorded in
     REFERENCE-GOTCHAS after the same class bit the terminal cards. */
  display: block;
  flex: 0 0 auto;
  color: var(--hs-gradient-start);
}

.hs-listen__body {
  padding: 18px;
}

.hs-listen__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.hs-listen__play {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  /* F1 "flat disc", chosen 2026-07-26 from six options. One fill, one glyph, no gradient, no rim
     light, no drop shadow. What it replaced was a lit sphere built for the NAVY card: a black
     0 4px 12px drop shadow and a white inset rim light are dark-ground devices, and neither was
     re-tuned when the player went light - which is why it read heavy and glossy on cream. */
  background: var(--hs-accent);
  /* Navy on gold, not white on gold. White-on-#C9A000 measures ~2.0:1 and was the weakest
     element on the card when this was mocked up; navy is ~8.9:1 on the same fill. */
  color: var(--hs-navy);
  display: grid;
  place-items: center;
  transition: background var(--hs-speed-fast);
  padding: 0;
}

/* Hover and press are carried by the FILL and a scale, not by adding shadow back -
   reintroducing a shadow on interaction would make the flat rest state read as the
   unfinished one. */
.hs-listen__play:hover {
  background: var(--hs-gradient-start);
}

/* Presses in. Without this the button is the only thing on the card that moves when clicked and
   does not acknowledge it. */
.hs-listen__play:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .hs-listen__play:active {
    transform: none;
  }
}

.hs-listen__play svg {
  width: 22px;
  height: 22px;
}

.hs-listen__mid {
  flex: 1 1 auto;
  min-width: 0;
}

.hs-listen__times {
  display: flex;
  justify-content: space-between;
  font-family: var(--hs-listen-mono);
  font-size: 12px;
  color: var(--hs-listen-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.hs-listen__now {
  color: var(--hs-listen-text);
}

.hs-listen__scrub {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: var(--hs-listen-overlay-faint);
  cursor: pointer;
}

.hs-listen__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 6px;
  background: var(--hs-listen-progress);
}

/* ---- Segmented mode -------------------------------------------------------
   One segment per chapter, widths proportional to real chapter durations from the VTT the
   player already parses. Applied by JS only when chapters exist; without them the continuous
   bar above is untouched, which is why there is no second markup path.
   Chapter ticks become redundant here - the gaps ARE the chapter boundaries - so __marks and
   the continuous __fill are hidden rather than removed, keeping the fallback one class away. */
.hs-listen__scrub--seg {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 8px;
  background: none;
}

.hs-listen__scrub--seg .hs-listen__fill,
.hs-listen__scrub--seg .hs-listen__marks {
  display: none;
}

.hs-listen__seg {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--hs-listen-seg-track);
  /* Recessed: the unplayed track is a groove the fill sits inside, not a painted line. */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: transform var(--hs-speed-fast), box-shadow var(--hs-speed-fast);
  /* flex-basis carries the chapter's share of the duration (set inline by JS); flex-grow:0 stops
     a long chapter being flattened toward the mean, which would misreport the structure. */
  flex: 0 0 auto;
  min-width: 3px;
}

.hs-listen__seg::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--seg-played, 0%);
  background: var(--hs-listen-progress-flat);
  /* Lit along the top edge - the fill rises out of the groove instead of lying in it. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* The whole bar is a scrubber, so the segments should say so on hover. Grows upward only
   (transform-origin bottom) to avoid nudging the label line below. */
.hs-listen__scrub--seg:hover .hs-listen__seg {
  transform: scaleY(1.35);
}

@media (prefers-reduced-motion: reduce) {
  .hs-listen__scrub--seg:hover .hs-listen__seg {
    transform: none;
  }
}

/* The chapter in progress. The ring is what stops a part-filled segment reading as a rendering
   artefact - it says "you are here" independently of how much of it is filled. */
.hs-listen__seg--now {
  box-shadow: 0 0 0 1px rgba(201, 160, 0, 0.55);
}

.hs-listen__seg--now::after {
  background: var(--hs-listen-progress);
}

/* ---- Numbered chapter axis ------------------------------------------------
   The navigation the collapsed chapter list never was: move between chapters without opening a
   panel that duplicates the article's own contents. Only ever populated in segmented mode. */
/* The axis mirrors the segment row EXACTLY - same flex, same 3px gap, same per-cell basis set
   inline by JS - so each node cell lines up with the segment above it by construction rather
   than by a percentage that has to stay in sync with gap subtraction, the min-width floor and
   the last-cell remainder. */
.hs-listen__axis {
  display: flex;
  gap: 3px;
  margin-top: 9px;
}

.hs-listen__axis:empty {
  display: none;
}

/* The rail the nodes sit on. Drawn behind them at the dot's centre line. */
.hs-listen__axis::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 4px;
  height: 1px;
  background: var(--hs-listen-overlay-faint);
}

/* One cell per chapter, as wide as the chapter. The whole cell is the hit target - a 9px dot
   would be a poor one, especially on touch. */
.hs-listen__node {
  position: relative;
  flex: 0 0 auto;
  min-width: 3px;
  height: 22px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--hs-listen-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--hs-listen-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--hs-speed-fast);
}

/* The mark rides the cell's LEFT edge, which is the chapter's start time. */
.hs-listen__node-mark {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hs-listen__node-mark--first {
  transform: translateX(0);
}

.hs-listen__node-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--hs-listen-seg-track);
  /* Opaque, so the rail passes behind the dot rather than through it. */
  background: var(--hs-listen-bg-end);
  transition: border-color var(--hs-speed-fast), background var(--hs-speed-fast),
    box-shadow var(--hs-speed-fast), transform var(--hs-speed-fast);
}

.hs-listen__node:hover {
  color: var(--hs-listen-text);
}

.hs-listen__node:hover .hs-listen__node-dot,
.hs-listen__node:focus-visible .hs-listen__node-dot {
  border-color: var(--hs-listen-signature);
  transform: scale(1.25);
}

.hs-listen__node--now {
  color: var(--hs-accent);
}

.hs-listen__node--now .hs-listen__node-dot {
  border-color: var(--hs-accent);
  background: radial-gradient(circle, var(--hs-accent) 0 2px, var(--hs-listen-bg-end) 2.5px);
  box-shadow: 0 0 7px rgba(201, 160, 0, 0.55);
}

/* Culled by measurement in JS - a number is dropped when it would collide with the last one
   kept. visibility, not display: the number keeps its box so the cull is stable rather than
   reflowing the row it is measuring. */
.hs-listen__node-n--hidden {
  visibility: hidden;
}

/* Set by the same measurement pass as the numbers, but only on pure overlap - see the long
   note in post-audio.js. visibility, not display, so the node keeps its width and the axis
   stays aligned with the segment row. */
.hs-listen__node-dot--hidden {
  visibility: hidden;
}

/* The current chapter's dot is the position indicator, so it outranks the overlap cull no
   matter when the cull last ran. Stated in CSS rather than in the JS because --now changes
   continuously during playback while the cull only re-runs on resize. */
.hs-listen__node--now .hs-listen__node-dot--hidden {
  visibility: visible;
}

/* Below 620px the numbers never fit at any chapter count, so skip the measuring entirely.
   Hiding rather than shrinking: 6px digits are decoration, not information, and the label
   line below still carries "CH 05 / 12". */
@media (max-width: 620px) {
  .hs-listen__node-n {
    display: none;
  }

  /* Reclaim the height the hidden numbers were reserving. */
  .hs-listen__node {
    height: 11px;
  }
}

.hs-listen__chlabel {
  margin-top: 7px;
  font-family: var(--hs-listen-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hs-listen-text-muted);
  font-variant-numeric: tabular-nums;
  /* Truncates rather than wraps: a two-line chapter title would reflow the transport row and
     shift the article every time the chapter changed. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No chapters parsed, no label, no reserved space. */
.hs-listen__chlabel:empty {
  display: none;
}

.hs-listen__chlabel b {
  color: var(--hs-accent);
  font-weight: 700;
}

.hs-listen__marks {
  position: absolute;
  inset: 0;
}

.hs-listen__mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  background: var(--hs-listen-overlay-mark);
}

.hs-listen__speed {
  flex: 0 0 auto;
  font-family: var(--hs-listen-mono);
  border: 1px solid var(--hs-listen-overlay-faint);
  background: transparent;
  color: var(--hs-listen-text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  transition: border-color var(--hs-speed-fast);
}

.hs-listen__speed:hover {
  border-color: var(--hs-teal);
}

/* Opens BELOW the shared toggle row now, not immediately under its own button, so it needs its
   own top rule to read as a panel rather than as loose content - the same device the transcript
   panel already used for the same reason. */
.hs-listen__chapters {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--hs-listen-overlay-faint);
  display: grid;
  gap: 0;
}

/* Each <li> wraps a button. Without this the li keeps a line box around it and rows measured
   47px apart despite gap:2px - roughly 9px per row of invisible slack, which is what made a
   5-chapter list 54% of the card. Making the li a flex box collapses it onto the button. */
.hs-listen__chapters li {
  display: flex;
}

.hs-listen__chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--hs-listen-text);
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-family: inherit;
  transition: background var(--hs-speed-fast);
}

.hs-listen__chapter:hover {
  background: var(--hs-listen-overlay-light);
}

.hs-listen__chapter[aria-current="true"] {
  background: var(--hs-listen-chapter-current-bg);
}

.hs-listen__chapter[aria-current="true"] .hs-listen__cn {
  color: var(--hs-listen-accent);
  font-weight: 700;
}

/* Mono here is what makes the chapter list read as a listing rather than a menu: the
   timecodes align into a column against the titles instead of drifting with the digits. */
.hs-listen__ct {
  flex: 0 0 auto;
  font-family: var(--hs-listen-mono);
  font-size: 12px;
  color: var(--hs-listen-text-muted);
  font-variant-numeric: tabular-nums;
  width: 40px;
}

.hs-listen__cn {
  flex: 1 1 auto;
  font-family: var(--hs-listen-mono);
}

.hs-listen__tx-toggle,
.hs-listen__ch-toggle {
  margin: 16px 0 0;
  border: none;
  background: transparent;
  color: var(--hs-listen-accent);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  font-family: var(--hs-listen-mono);
  transition: color var(--hs-speed-fast);
}

/* Both toggles share one row. Stacked, each contributed its own 10px top + 10px bottom padding
   PLUS a 16px gap, so 91 of the 127px between the transport row and the card's bottom edge was
   whitespace around two lines of text. Side by side, that padding is paid once and the gap
   between them becomes horizontal. `column-gap` only - the row-gap stays 0 so a wrap at narrow
   widths does not reintroduce the vertical cost this removes. */
.hs-listen__toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 26px;
  margin-top: 2px;
}
/* Margin now belongs to the row, not the buttons - a margin on a flex item would push its
   sibling's baseline out of line with it. */
.hs-listen__tx-toggle,
.hs-listen__ch-toggle {
  margin: 0;
}

.hs-listen__tx-toggle:hover,
.hs-listen__ch-toggle:hover {
  color: var(--hs-listen-accent);
  opacity: 0.8;
}

.hs-listen__transcript {
  border-top: 1px solid var(--hs-listen-overlay-faint);
  margin-top: 6px;
  padding: 14px 2px 18px;
  max-height: 220px;
  overflow: auto;
}

.hs-listen__cue {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--hs-listen-text-muted);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--hs-speed-fast), color var(--hs-speed-fast);
}

.hs-listen__cue:hover {
  background: var(--hs-listen-overlay-light);
}

.hs-listen__cue[aria-current="true"] {
  color: var(--hs-listen-text);
  background: var(--hs-listen-gold-bg);
}

.hidden {
  display: none;
}