/* ---------------------------------------------------------------------------
   Narration player for the demo tours.

   The Inline Bar from dashboards-and-kpis-demo/design-lab/audio-player.html
   (variant 1), the treatment Matt selected. One clip per step, covering the
   headline and every bullet in a single pass.

   Sits IN FLOW inside .callout, between the bullet list and .flex-row, so it
   is a real child of the card rather than an overlay. That costs the callout
   84px of height, and because the callout is anchored by its BOTTOM edge every
   one of those pixels comes off the TOP. On four accounting steps (01, 03, 04,
   08) that pushes the box over the green highlight its arrow points at, which
   is what --callout-lift below is for.
   --------------------------------------------------------------------------- */

.gss-player {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 10px 18px 10px 10px;
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  font-family: 'Lato', Arial, sans-serif;
}

/* Play / pause. The icon is a CSS shape so there is no extra image request. */
.gss-player__toggle {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f26b0e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
  box-shadow: 0 4px 12px rgba(242, 107, 14, .4);
}
.gss-player__toggle:hover { transform: scale(1.06); }
.gss-player__toggle:active { transform: scale(.95); }
.gss-player__toggle:focus-visible {
  outline: 3px solid #1c1815;
  outline-offset: 3px;
}

.gss-player__icon { width: 18px; height: 18px; fill: #fff; display: block; }

/* Progress. Click anywhere on the track to seek. */
.gss-player__track {
  flex: 1;
  height: 6px;
  background: #e6e6e6;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}
.gss-player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #f26b0e;
  border-radius: 6px;
}
.gss-player__fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #f26b0e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.gss-player__time {
  flex: none;
  min-width: 42px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.gss-player__replay {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #fff;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s, border-color .18s;
}
.gss-player__replay:hover { color: #f26b0e; border-color: #f26b0e; }
.gss-player__replay:focus-visible {
  outline: 3px solid #1c1815;
  outline-offset: 3px;
}
.gss-player__replay svg { width: 16px; height: 16px; fill: currentColor; display: block; }

@media (prefers-reduced-motion: reduce) {
  .gss-player__toggle { transition: none; }
  .gss-player__toggle:hover, .gss-player__toggle:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Per-step compensation.

   The player makes the callout taller and, because the callout is anchored by
   its BOTTOM edge, the box grows UPWARD into the highlight its arrow points
   at, and the stretched border SVG's notch eats top clearance. Where that
   happens the step's own rule sets --callout-lift (push the box back down by
   the distance its top actually moved) and padding-top (restore the 32px
   house clearance). Both are MEASURED with scripts/measure_callout_lifts.py
   and scripts/solve_panel_padding.py, never guessed, and never copied from
   another tour. Only steps whose top edge moved get a lift; a DOWN-arrow
   callout is tangent along its bottom and lifting it shoves it INTO its
   highlight. See accounting-demo/css/audio.css for the worked example and
   the two-arrow / side-arrow cases (steps 02 and 07 there).

   A step not listed here needs no compensation.
   --------------------------------------------------------------------------- */
.callout { position: relative; top: var(--callout-lift, 0px); }

/* Measured 2026-09-10 with measure_callout_lifts.py + solve_panel_padding.py
   against the live (pre-player) pages on a proxy. Live crm has NO overlap on
   any step, so every hit below was introduced by the player's height.

   Steps 01, 02, 07 and 09 moved 0px and need nothing. */

/* Bottom-anchored steps: the box grew UPWARD, so push it back down by the
   distance the top actually moved. */
.crm-step-04 .callout { --callout-lift: 35px; }   /* right arrow, top moved -35 */
.crm-step-05 .callout { --callout-lift: 24px; }   /* left arrow,  top moved -24 */
.crm-step-08 .callout { --callout-lift: 19px; }   /* right arrow, top moved -19 */

/* Step 06 is the one up-arrow in the tour: lift the measured 42 PLUS the 4px
   of padding, 1:1, because padding grows the stretched notch and the notch
   carries the arrow. */
.crm-step-06 .callout { --callout-lift: 42px; }

/* Step 06 and 03 are the two the overlap gate flagged; 03 is the inverted
   case. Its top edge did NOT move (top-anchored) - the box grew DOWNWARD by
   71px, carrying its DOWN arrow 73px past the band it points at. So it needs
   a NEGATIVE lift, the opposite of every other step here. The general rule
   "down-arrow steps take no lift" assumes a bottom-anchored callout. */
.crm-step-03 .callout { --callout-lift: -71px; }

/* Auto toggle. Opt in to have each step's narration start on arrival.
   Sits inline in the bar, so it costs the callout no extra height. */
.gss-player__auto {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: #767676;
}
.gss-player__auto input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #f26b0e;
  cursor: pointer;
}
.gss-player__auto:hover { color: #f26b0e; }
.gss-player__auto input:focus-visible {
  outline: 3px solid #1c1815;
  outline-offset: 2px;
}

/* Auto-advance countdown. While the tour waits to follow NEXT by itself, the
   button fills left-to-right so a first-time viewer sees WHERE it is about to
   go and what to press to go there manually. Duration comes from audio.js
   (ADVANCE_DELAY_MS) via an inline animation-duration; the 2s here is only a
   fallback. The element is inserted and removed by audio.js. */
.gss-advance-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: gss-advance-fill 2s linear forwards;
}
@keyframes gss-advance-fill {
  to { width: 100%; }
}