/* ---------------------------------------------------------------------------
   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 84px taller and the box grows upward. Where
   that walks it onto the highlight, the step's own rule sets --callout-lift to
   push the whole callout back DOWN by that many pixels. Measured per step with
   scripts/check_highlight_overlap.py, never guessed.

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

/* Per-step compensation, MEASURED. Two separate problems, two separate fixes.

   PROBLEM A - the panel's top edge eats into the text.
   cta.css sets `background-size: 100% 100%`, so the border SVG stretches to the
   box. The arrow notch at the top of that SVG stretches with it, so a taller
   callout gets a proportionally TALLER notch and the white panel's top edge
   moves DOWN into the headline. On step 01 that cost 9px of clearance (26 -> 17
   against the 32+/-8 house standard). Fix: add padding-top equal to the notch
   growth. Adding padding makes the box taller, which grows the notch again, so
   the values below were solved iteratively, not calculated once.

   PROBLEM B - the callout lands on its own highlight.
   The callout is anchored by its BOTTOM edge, so added height pushes the TOP
   edge up into the green marker the arrow points at. Fix: push the box back
   down by exactly the distance its top actually moved, so the top returns to
   where it sits on the live site - tangency included - and the height is spent
   downward into empty canvas.

   Only steps whose arrow is on the TOP edge get a lift. A DOWN-arrow callout is
   tangent along its BOTTOM, which added height never moves, so it is already
   correct and lifting it shoves it INTO its highlight (steps 05 and 09 both
   started crossing by ~50px when that was tried).

   Re-derive both with scripts/measure_callout_lifts.py and
   scripts/solve_panel_padding.py. Gates: check_panel_padding.py and
   check_highlight_overlap.py. */

.accounting-step-01 .callout { padding-top: 52px; --callout-lift: 102px; }
.accounting-step-03 .callout { padding-top: 49px; --callout-lift: 61px; }
.accounting-step-04 .callout { padding-top: 55px; --callout-lift: 100px; }

/* These land on 32px clearance, the house standard, rather than merely restoring
   what the page had before. Steps 01 and 04 sat at 26px and 24px on the live
   site - inside tolerance but at the bottom of it - so the compensation is
   sized to the standard instead. The padding also grows the arrow notch, which pushed each tip past the
   highlight line (10px on step 01, 6px on step 04, against a 4px tolerance), so
   the lifts absorb that too - arrow movement is 1:1 with the lift. */

/* Steps 05, 06, 08 and 09 need neither: their clearance already measures 32px
   with the player in, and the highlight band their arrow faces is tall or wide
   enough that the arrow cannot slide off it.

   Steps 02 and 07 DID need lifts, and shipping without them was the 2026-08-23
   miss: "not on the top edge" was the wrong test. Added height moves EVERY
   arrow that is not on the anchored edge, because the border SVG stretches to
   the box:
   - step 02 is TOP-anchored, so growth went DOWN and drove the bottom arrow
     26px past the header-row highlight (tangent at y=354 on the live site,
     y=380 with the player). Pull the box back up 26.
   - step 07's LEFT arrow rides at 0.499 of the box height against a 41px-tall
     highlight; +56px of height slid the apex from y=465 (band center) to
     y=493, 6px BELOW the band. Pull the box up 28 to re-center the apex.
   Both measured against the live site with scratch apex math; re-check with
   scripts/check_highlight_overlap.py, which now verifies every real arrow's
   apex lands on its band (added after this miss). */
.accounting-step-02 .callout { --callout-lift: -26px; }
.accounting-step-07 .callout { --callout-lift: -28px; }

/* Step 08 carries a pre-existing failure no lift can fix: its highlight is to
   the RIGHT of the callout and 919px tall, so vertical movement is worth exactly
   0.0 points (measured). It already covers 6.7% of its own highlight on the LIVE
   site today, before any audio work; the player takes it to 8.2%. Correcting it
   means moving the callout horizontally, which moves the arrow off its target -
   a design decision, not a silent nudge. Left visible so the gate reports it. */

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