/* ---------------------------------------------------------------------------
   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-08-28/29. Every step's callout is BOTTOM-anchored here: the
   lift report shows all seven tops moving up by exactly 84px, the player's
   height. What differs per step is where the arrow sits, read off the border
   SVG with check_highlight_overlap.border_arrows:

     01 left  @0.103    02 right @0.501   03 left @0.449
     04 up    @0.501    05 up    @0.501   06 right @0.500   07 down @0.500

   Steps 01-03 get their border stretched by cta.css (background-size:
   100% 100%). Steps 04-07 did NOT - combined.css leaves them on
   background-size: contain, because the CTA never made those four taller and
   an unstretched border was still big enough to hold the content. The player
   changes that: at 84px taller the callout stood up to 94px past its painted
   panel and the player and CTA hung outside the white box (qc_tour, 4 of 7
   pages failing, 2026-08-28). So the four rules below switch them to
   100% 100% as well - the border SVGs already carry preserveAspectRatio="none"
   so they stretch instead of letterboxing.

   Stretching changes the geometry, so EVERY number below was re-measured
   against the stretched border. The pre-stretch values did not survive:
   step 06 needed a 42px lift unstretched and needs NONE stretched, and
   step 07's bottom clearance fell from 30px to 21px and had to be paid back
   in padding.

   SIDE arrows (01, 02, 03, 06) ride at a fixed FRACTION of the box height, so
   a box that grew 84px taller slides its apex up by 84 x (1 - fraction) - not
   by 84. Step 01's arrow sits near the top of the box (0.103), so it slid 75px
   while step 03's mid-height arrow slid 46px. Lifting all of them 84 would
   overshoot every one. Step 06 stretched needs 0.
   UP arrows (04, 05) have their apex ON the top edge, so the apex moves the
   full 84px plus whatever padding adds, and the lift is the sum: the tip
   measured as CROSSING 85px past its band at lift 0, and each step then pays
   its padding-top delta 1:1 on top of that.
   DOWN arrow (07) is tangent along the BOTTOM edge, which added height never
   moves, so it gets NO lift. That also settles the OFF CANVAS reading in the
   lift report: 1114px assumed a lift this step must not have, and at lift 0
   the callout bottom sits at 1030. */
.cad-interface-step-01 .callout { --callout-lift: 75px; }
.cad-interface-step-02 .callout { --callout-lift: 42px; }
.cad-interface-step-03 .callout { --callout-lift: 46px; }

/* padding-top / padding-bottom below are ABSOLUTE, not the delta
   solve_panel_padding prints. Steps 04 and 05 carry the up-arrow notch and
   step 07 the down-arrow notch, so combined.css already gives them 65px on
   that side; the solver's "+10px" / "+9px" are ADDED to that. Writing the
   delta alone (10px, 9px) silently throws away 55px of the base and puts the
   headline 26px ABOVE the painted panel - caught by check_panel_padding,
   2026-08-28. */
.cad-interface-step-04 .callout {
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=5);
  padding-top: 75px;            /* 65 base + 10 solved */
  --callout-lift: 95px;         /* 85 measured crossing + 10 padding, 1:1 */
}
.cad-interface-step-05 .callout {
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=5);
  padding-top: 74px;            /* 65 base + 9 solved */
  --callout-lift: 94px;         /* 85 measured crossing + 9 padding, 1:1 */
}
/* 06: right arrow. Stretched, its apex lands back on its band with no lift -
   the 42px it needed unstretched is measured out, not forgotten. */
.cad-interface-step-06 .callout {
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=5);
}
/* 07: down arrow, tangent along the bottom edge. No lift, by design. The
   stretched notch is taller than the contained one, which cost 9px of bottom
   clearance (30px live -> 21px, under the 24px floor); +12px of padding-bottom
   buys it back to 32px. Growth goes UP off the anchored bottom edge, so the
   arrow does not move and the overlap gate still passes. */
.cad-interface-step-07 .callout {
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=5);
  padding-bottom: 77px;         /* 65 base + 12 measured */
}

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