/* ---------------------------------------------------------------------------
   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-30 (measure_callout_lifts.py, port 8123). Every callout
   here is BOTTOM-anchored: the player raised each top edge by 84px and left
   the bottom where it was. Lift = the measured movement, padding 0 first.
   05 is a down arrow on that bottom edge: no lift. */
.document-control-and-version-management-step-01 .callout { --callout-lift: 84px; }   /* left arrow */
.document-control-and-version-management-step-02 .callout { padding-top: 74px; --callout-lift: 93px; }   /* up arrow */
.document-control-and-version-management-step-03 .callout { --callout-lift: 84px; }   /* left arrow */
.document-control-and-version-management-step-04 .callout { padding-top: 75px; --callout-lift: 94px; }   /* up arrow */
.document-control-and-version-management-step-06 .callout { --callout-lift: 84px; }   /* left arrow */
.document-control-and-version-management-step-07 .callout { --callout-lift: 84px; }   /* left arrow */
.document-control-and-version-management-step-08 .callout { --callout-lift: 84px; }   /* right arrow */
.document-control-and-version-management-step-09 .callout { padding-top: 75px; --callout-lift: 94px; }   /* up arrow */

/* 05's down arrow pins the bottom edge to the VMS panel, so the player could
   only grow the box upward: its top ran 17px off the canvas and the headline
   was cut off (Matt, 2026-10-02: "visual on 5 is wrong ... getting cut off").
   No lift is possible without stabbing the panel, so this page's vertical
   spacing is tightened instead: top padding 35 -> 26, player gap 18 -> 12 and
   its inner padding 10 -> 6, footer gap 28 -> 14. */
.document-control-and-version-management-step-05 .callout { padding-top: 26px; }
.document-control-and-version-management-step-05 .gss-player { margin-top: 12px; padding-top: 6px; padding-bottom: 6px; }
.document-control-and-version-management-step-05 .flex-row { margin-top: 14px; }

/* 02 and 04 were this tour's only borders left on background-size: contain
   (combined.css). A contained border cannot grow with the player's height -
   on dashboards 06/07 that left the footer and headline outside the white
   panel. Stretched like the other seven; the SVGs now carry
   preserveAspectRatio="none" (?v=2 busts the cached art). */
.document-control-and-version-management-step-02 .callout,
.document-control-and-version-management-step-04 .callout { background-size: 100% 100%; }
.document-control-and-version-management-step-02 .callout { background-image: url(../img/border-step-02.svg?v=2); }
.document-control-and-version-management-step-04 .callout { background-image: url(../img/border-step-04.svg?v=2); }

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