/* ==========================================================================
   CASE STUDY AUDIO PLAYER — "Listen to this case study"
   --------------------------------------------------------------------------
   A 44px frosted circle, bottom-LEFT of case study pages only, deliberately
   dimensioned to MIRROR the site's light/dark toggle: same 44x44, same 50%
   radius, same misty fog, same 22px offset — so the page has two matching
   bookends with Dale's launcher centred between them. Those numbers are
   measured off .dl-toggle, not guessed; if that button ever changes, change
   these to match or the symmetry reads as a mistake rather than a decision.

   PROGRESS IS THE RIM. There is no CSS border here: the circle's edge is an SVG
   ring, and playback fills it. The control and its progress are one object
   rather than a button with a bar bolted underneath.

   DESKTOP ONLY. On a phone Dale's launcher spans nearly the full width and this
   would crowd the content it exists to serve. The written case study is the
   mobile experience.

   Everything is scoped under #dl-case-audio so nothing leaks into Squarespace.
   ========================================================================== */

#dl-case-audio {
  /* Dark by default; the light block below flips it when the host page does. */
  --dla-text: #f9f8f4;
  --dla-muted: rgba(249, 248, 244, 0.6);
  --dla-rim: rgba(249, 248, 244, 0.35); /* unplayed rim = the toggle's border */
  --dla-fill: #f9f8f4; /* the played arc */
  --dla-fog-bg: rgba(249, 248, 244, 0.12);
  --dla-tip-bg: rgba(28, 28, 24, 0.94);
  --dla-fog-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --dla-blur: blur(16px) saturate(1.25);
  --dla-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  position: fixed;
  /* One notch below Dale (2147483000): if anything ever overlaps, the chat wins.
     It's the interactive surface; this is an offer. */
  z-index: 2147482900;
  bottom: 22px;
  left: 22px;
  width: 44px;
  height: 44px;
  font-family: var(--dla-font);

  /* This wrapper is a bare positioning container and must stay invisible. The
     site's dark mode has `html body.dl-dark > div { background-color:#23231e
     !important }`, and this root IS a direct body>div, so without this it gets
     painted an opaque square — square corners showing behind the round button.
     The button's own !important guard doesn't help: the rule targets THIS
     element, not the button inside it. Both were needed; only the button had one. */
  background: transparent !important;

  display: none; /* the desktop query below opts it back in */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#dl-case-audio.dl-light-host {
  --dla-text: #23231e;
  --dla-muted: rgba(35, 35, 30, 0.55);
  --dla-rim: rgba(35, 35, 30, 0.2);
  --dla-fill: #23231e;
  --dla-fog-bg: rgba(35, 35, 30, 0.06);
  --dla-tip-bg: rgba(255, 255, 255, 0.96);
  --dla-fog-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* Desktop only — see the file header. 1024px keeps it off phones and portrait
   tablets. dl-ready is added once the audio's metadata loads, so the control
   never appears before we know there is something to play. */
@media (min-width: 1024px) {
  #dl-case-audio.dl-ready {
    display: block;
  }
}

/* Hide while the page is scrolling, reappear when it stops — mirrors Dale's
   launcher (.dl-scrolling, 240ms debounce) so the two behave as one system.
   CRITICALLY this uses opacity and NOT display: the JS pauses playback when the
   control is display:none (i.e. the viewport dropped below desktop and the
   pause button is genuinely gone). Scrolling must never stop the audio — you
   scroll BECAUSE you are listening — so it must not touch display. */
#dl-case-audio.dl-scrolling {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

/* --- the circle -------------------------------------------------------- */
#dl-case-audio-toggle {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0; /* deliberately none — the SVG rim IS the border */
  border-radius: 50%;
  /* !important is load-bearing, not laziness. The site's dark mode Custom CSS
     contains:
         html body.dl-dark > div { background-color: #23231e !important; }
     and this player's root is a div appended straight to <body>, so the same
     nuclear rule flattens the fog to opaque slate. Dale's launcher dodges it by
     being a CHILD of #dl-cv-widget; the theme toggle dodges it by being a
     <button>. Both declarations are !important, so specificity decides and our
     #id (1,0,0) beats their (0,1,3). */
  background: var(--dla-fog-bg) !important;
  box-shadow: var(--dla-fog-shadow);
  -webkit-backdrop-filter: var(--dla-blur);
  backdrop-filter: var(--dla-blur);
  color: var(--dla-text);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease;
}

#dl-case-audio-toggle:active {
  transform: scale(0.94);
}

/* --- the rim: track + progress, one object ----------------------------- */
#dl-case-audio-ring {
  position: absolute;
  inset: 0;
  /* 12 o'clock start, clockwise — the direction people expect time to move. */
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}

.dl-ca-track {
  fill: none;
  stroke: var(--dla-rim);
  stroke-width: 1; /* matches .dl-toggle's 1px border exactly */
}

.dl-ca-progress {
  fill: none;
  stroke: var(--dla-fill);
  stroke-width: 2; /* thickens as it fills — the rim, emphasised */
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s linear;
}

/* --- the icon ---------------------------------------------------------- */
#dl-case-audio-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* OPTICAL CENTRING, not geometric. The play triangle's ink is symmetric about
   its bounding box but its MASS is not: vertices (0,0) (12,7) (0,14) put the
   centroid 2 viewBox units — 1.86px rendered — left of the box centre. Centre
   it by the numbers and it reads as sitting left, which is exactly what it did.
   1.5px is a deliberate compromise: full centroid correction (1.86px) over-
   corrects, because the triangle's flat left edge carries more visual weight
   than its area alone suggests.

   The PAUSE icon is two symmetric bars and must NOT move — nudging it would
   make it read as sitting right. Hence the transform lives on the play state
   only, and is removed while playing.

   Size is settled: this renders 11.14px of ink, against 10.84px for the theme
   toggle's ☾ glyph. The two controls mirror each other, so they should carry
   the same weight — measured, not eyeballed. */
#dl-case-audio-icon {
  transform: translateX(1.5px);
}

#dl-case-audio.dl-playing #dl-case-audio-icon {
  transform: none;
}

#dl-case-audio-icon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}

/* --- the label --------------------------------------------------------- */
/* The one real weakness of a bare circle is that it says nothing. It sits
   opposite the theme toggle and mirrors it exactly, so it could easily read as
   another settings control — which means the label has to do real work when it
   appears. Opaque, not fog: 12% white sitting over body copy is just text with
   a haze on it. */
#dl-case-audio-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  color: var(--dla-text);
  background: var(--dla-tip-bg);
  border: 1px solid var(--dla-rim);
  box-shadow: var(--dla-fog-shadow);
  -webkit-backdrop-filter: var(--dla-blur);
  backdrop-filter: var(--dla-blur);
  padding: 8px 11px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  font-variant-numeric: tabular-nums;
}

#dl-case-audio:hover #dl-case-audio-tip,
#dl-case-audio.dl-playing #dl-case-audio-tip,
#dl-case-audio.dl-focus #dl-case-audio-tip {
  opacity: 1;
}

/* --- focus ------------------------------------------------------------- */
#dl-case-audio-toggle:focus-visible {
  outline: 2px solid var(--dla-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #dl-case-audio,
  #dl-case-audio-toggle,
  #dl-case-audio-tip,
  .dl-ca-progress {
    transition: none;
  }
}