/* ---------------------------------------------------------------------------
   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); }

/* Inventory: no callout's top edge moved (measure_callout_lifts: 0 on every
   step), so there are no lifts. On 02, 04 and 06 the taller box stretches the
   top notch and the headline sat 23-26px under the panel edge against live's
   32-33; solve_panel_padding's padding restores it (computed top padding
   65.1 / 65.2 / 35.3px before). */
.inventory-step-02 .callout { padding-top: 73.1px; }
.inventory-step-04 .callout { padding-top: 75.2px; }
.inventory-step-06 .callout { padding-top: 43.3px; }

/* Side-arrow steps: the box is top-anchored and grows DOWN, and the arrow
   rides at a fixed fraction of its height, so the apex slid down by the
   amounts below (live vs local, measured on each arrow's apex). Inventory's
   callouts are position: absolute with their own per-step `top`, which
   outranks the shared --callout-lift rule above, so the shift is a negative
   margin-top instead (07 already carries 22.5px of margin: 22.5 - 41). */
.inventory-step-01 .callout { margin-top: -38px; }     /* left apex 342 -> 380 */
.inventory-step-03 .callout { margin-top: -41px; }     /* left apex 790 -> 831 */
.inventory-step-05 .callout { margin-top: -42px; }     /* right apex 597 -> 639 */
.inventory-step-07 .callout { margin-top: -18.5px; }   /* left apex 244 -> 285 */
.inventory-step-08 .callout { margin-top: -38px; }     /* left apex 249 -> 287 */
.inventory-step-09 .callout { margin-top: -38px; }     /* left apex 705 -> 743 */

/* 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%; }
}