/*
 * eatthis_player_1.1.0.0.css — externalized static CSS for eatthis_player_1.jsp
 *
 * Externalized 2026-05-25 (see engineering-docs/features/jsp-externalization/playbook.md).
 *
 * Per-partner theming values live in the JSP as CSS custom properties on :root.
 * This file consumes them via var(--name).
 *
 * Versioned filename for cache-busting. Bump the version when this file changes.
 * Tomcat serves /css/* with Cache-Control: public, max-age=31536000, immutable.
 */

#instaread-widget {
  visibility: hidden;
  width: 99%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.pointer {
  cursor: pointer;
}

.provider-primary {
  color: var(--primary-color);
}

.provider-primary-background,
.provider-primary-background-spinner:after {
  background-image: linear-gradient(141deg, var(--background-gradient-start) 12%, var(--background-gradient-stop) 87%);
}

.provider-primary-background {
  background: var(--primary-color) !important;
}

.provider-primary-border,
.button-container:hover .spinner,
.button-container:hover .spinner:before,
.button-container-selected .provider-primary-selected,
.button-container-selected .provider-primary-border-small,
.provider-primary-seekbar::-webkit-slider-thumb,
.provider-primary-seekbar::-moz-range-thumb,
.provider-primary-seekbar::-moz-range-progress,
.button-container:hover .circular-button,
.button-container:hover .spinner:after,
.button-container:hover .speed-text-hover,
.widget-ad-container,
.provider-primary-seekbar::-moz-range-progress,
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
.provider-primary-seekbar::-webkit-slider-thumb:hover,
.provider-primary-seekbar::-moz-range-thumb:hover,
.provider-primary-seekbar::-moz-range-thumb {
  background-color: var(--primary-color);
}

.provider-primary-background:hover {
  background-color: var(--primary-color) !important;
  opacity: 0.8;
}

.provider-primary-border {
  border: solid 4px var(--primary-color);
}

.sponsor-text {
  color: var(--sponsor-text-color);
  font-size: var(--sponsor-text-size) !important;
}

.sponsor-instaread-logo {
  height: var(--sponsor-text-logo) !important;
}

.speed-text-hover {
  color: var(--speed-time-color);
}

.speed-current-time,
.current {
  color: var(--timestamp-color);
}

.widget-ad-container {
  /* background-image: linear-gradient(to bottom, var(--widget-ad-gradient-start-color) 0%, var(--widget-ad-gradient-end-color) 100%) !important; */
  cursor: pointer;
  height: var(--default-ad-height);
  background-image: var(--default-ad-bg);
  /* Set the path to your image */
  background-size: cover;
  /* Adjust the background size */
  width: var(--default-ad-width);
  background-repeat: no-repeat;
  -webkit-background-repeat: no-repeat;
  -moz-background-repeat: no-repeat;
  -o-background-repeat: no-repeat;
  background-position: contain;
  box-shadow: none !important;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
}

.widget-ad-inner-container_default {
  background-image: var(--default-ad-bg) !important;
  background-size: cover !important;
  background-position: center !important;
}

.audioPrimaryWaves {
  height: 50px;
  width: 100%;
  cursor: pointer;
  max-width: 377px;
}

.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.text-black {
  color: #000;
}

.font-bold {
  font-weight: 700;
}

.toast {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-color);
  color: #fff;
  padding: 6px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
}

.toast-content {
  font-size: 14px;
}

.pby-container {
  z-index: 9999;
  cursor: pointer;
}

/** Thumb Styles **/
/** Chrome, Safari, Opera, and Edge Chromium **/
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  background-color: var(--primary-color);
  border: none;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}

/** Thumb Styles **/
/** Firefox **/
input[type="range"]::-moz-range-thumb {
  border: none;
  border-radius: 100%;
  background-color: var(--primary-color);
  height: 12px;
  width: 12px;
}

.provider-primary-seekbar::-webkit-slider-thumb:hover {
  -webkit-appearance: none;
  /* Override default look */
  background-color: var(--primary-color);
  appearance: none;
  border: none;
  border-radius: 100%;
  height: 12px;
  width: 12px;
}

.provider-primary-seekbar::-moz-range-thumb:hover {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  border: none;
  border-radius: 100%;
  background-color: var(--primary-color);
  height: 12px;
  width: 12px;
}

.provider-primary-border {
  border: solid 4px var(--primary-color);
}

/* .instaread-widget-mobile .provider-secondary-background {
          background-color: #ffffff;
      } */
.instaread-widget-mobile .audioplayer-middle-container-1 {
  padding-right: 1rem !important;
  padding-left: 0.5rem !important;

}

.instaread-widget-desktop .audioplayer-middle-container-1 {
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
}

.widget-ads-container {
  padding: 1px
}

.instaread-widget-mobile .widget-ad-container {
  margin-top: 0px !important;
}

.instaread-widget-mobile .widget-ads-container {
  width: 320px;
  min-width: 320px;
  height: 100px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center
}

.instaread-widget-mobile .parent-ad-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.instaread-widget-mobile .widget-audio-container {
  padding-top: 16px;
  position: relative;
}

/* .instaread-widget-mobile .widget-audio-inner-container{
          height:auto;
      } */

.instaread-widget-mobile {
  background-color: var(--bg-secondary-color);
  width: 100%;
  max-width: 100%;
  height: 218.4px;
  /* box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 2px 6px 0px rgba(0, 0, 0, 0.15); */
  overflow: hidden;
  box-sizing: border-box;
  padding-top:0.5rem;

  /** border: solid 1px rgb(0 0 0 / 0.1);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); **/
}

.instaread-widget-desktop {
  /* box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 2px 6px 0px rgba(0, 0, 0, 0.15); */

  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  /** border: solid 1px rgb(0 0 0 / 0.1);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); -- **/
}

.adp-interscroller-container {
  position: absolute;
}

.adp-interscroller-inner-div {
  margin-top: 0px;
}

#audio_speed {
  padding: 0.5px;
  border: 1px solid var(--primary-color);
  border-radius: 2px;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 12px;
  border-radius: 0;
  /* line-height: 0; */
  letter-spacing: -1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  -webkit-text-align: center;
  -moz-text-align: center;
  background-color: #ffffff;
  -webkit-background-color: #ffffff;
  -moz-background-color: #ffffff;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.show {
  visibility: visible !important;
}

/* new desktop styles*/
.instaread-widget-desktop .icon-backward_15 #back_15 {
  width: 25px;
  height: 25px;
}

#audio_speed {
  width: 32px;
  height: 18px;
  font-family: var(--font-family) !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  -webkit-text-align: center;
  -moz-text-align: center;
  background-color: #ffffff;
  -webkit-background-color: #ffffff;
  -moz-background-color: #ffffff;

}

.instaread-widget-mobile .pby-container .pb-instaread-logo {
  width: auto;
  opacity: 0.2;
  height: 14px;
}

.instaread-widget-mobile .audio_control_containers {
  display: flex;
  justify-content: center;
  align-items: center;
}

.instaread-widget-mobile .flexible-seekbar {
  padding: 0.0319rem 0;
}

.instaread-widget-mobile .audio-control-1 {
  width: 95.126%;
}

.audio-primary-text {
  font-family: var(--font-family) !important;
}

#textTime {
  font-family: var(--font-family);
}

.circular-button {
  box-shadow: none;
  border-radius: 8px !important;
  /* border: 3px solid var(--button-border-color); */
}

.instaread-widget-mobile .circular-button {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 8px !important;
}

.instaread-widget-mobile .pby-container {
  right: 4.14%;
  bottom: -17px;
}

.instaread-widget-mobile .icon-backward_15 {
  padding-top: 5px;
}

.instaread-widget-mobile .icon-farward_15 {
  padding-top: 5px;
}

.instaread-widget-mobile .icon-backward_15 #back_15 {
  width: 20px;
  height: 18px;

}

.instaread-widget-mobile .icon-farward_15 #far_15 {
  width: 20px;
  height: 18px;
}

.instaread-widget-mobile .icon-pause {
  background: url("../images/icon-pause.png") no-repeat;
  background-position: center;
}

.instaread-widget-mobile .icon-replay {
  background: url("../images/icon-replay.png") no-repeat;
  background-position: center;
}

/* .instaread-widget-desktop .icon-pause{
    background: url("../images/pause-icon.svg") no-repeat;
    background-position: center ;
  }
  .instaread-widget-desktop .icon-replay{
    background: url("../images/replay-icon.svg") no-repeat;
    background-position: center;
  } */
.instaread-widget-mobile .play-icon-inner-container {
  margin-top: 0px;
  margin-left: 0px;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.instaread-widget-mobile .play-icon-inner-container.spinner{
  height: 30px !important;
}

.instaread-widget-mobile .audio-primary-text {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 25px;
  padding-left: 1.2rem;
}

.instaread-widget-mobile #widget-audio-container>div[style*="justify-content: space-between"] {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  height: 29px;
  align-items: center;
  padding: 0 1.2rem;
  box-sizing: border-box;
  width: 100%;
}

.instaread-widget-mobile .advertisementText {
  font-size: 10px !important;
  font-family: var(--font-family);
  margin-bottom: 6px;
  width: 100%;
  padding-left: 2.8rem;
}

.instaread-widget-mobile #audioPrimaryWave {
  width: 220px;
  height: 50px;
}

.circle-block {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.spinner:after {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

.spinner:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.spinner {
  margin: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
  background: -webkit-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
  background: -o-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
  background: -ms-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
  background: linear-gradient(to right, #ffffff 16%, rgba(226, 245, 255, 0) 58%);
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  flex-shrink: 0;
  margin-top: 1.5rem !important;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes load3 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.instaread-widget-desktop .icon-replay {
  /* -webkit-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
      -moz-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
      box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1); */
  border-radius: 8px;
}

.instaread-widget-mobile .icon-replay {
  /* -webkit-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
      -moz-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
      box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1); */
  border-radius: 8px;
}

.instaread-widget-desktop .audioplayer-middle-container-1 {
  padding-left: 1rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.instaread-widget-mobile .audioplayer-middle-container-1 {
  align-items: center;
  display: flex;
}


.instaread-widget-desktop .pby-container {
  bottom: 15px;
}


/* use desktop layout breakpoint*/

  .instaread-widget-desktop {
    background-color: var(--bg-secondary-color);
    width: 100%;
    max-width: 100%;
    height: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .instaread-widget-desktop .audio_control_containers {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .instaread-widget-desktop .icon-backward_15 {
    padding-top: 5px;
  }

  .instaread-widget-desktop .icon-farward_15 {
    padding-top: 5px;
  }

  .instaread-widget-desktop .flexible-seekbar {
    padding: 0.0319rem 0;
  }

  .instaread-widget-desktop .parent-ad-container {
    width: 52%;
    padding: 0px 10px;
    border-bottom: 0;
    height: 132px;
    padding-left: 0px !important
  }

  .instaread-widget-desktop #widget-audio-container {
    width: 65%;
    min-width: 278.4px;
    padding: 0px 10px;
    min-width: 278.4px;
    border-bottom: 0;
    position: relative;
    padding-top: 55px;
    padding-left: 0px !important
  }



  .instaread-widget-desktop .widget-ads-container {
    /* padding: 15px 10px;
              width: 370.3px; */
    width: 320px;
    min-width: 320px;
    min-height: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .instaread-widget-desktop .left-container {
    margin-left: 0.9rem !important;
  }


  .default-instaread-ad-container {
    height: 42px !important;
  }

  .instaread-widget-desktop .circular-button {
    height: 45px;
    width: 45px;
    border-radius: 8px !important;
  }

  .instaread-widget-desktop .pby-container .pb-instaread-logo {
    opacity: 0.2;
    height: 14px;
    width: auto;
  }

  .instaread-widget-desktop .instaread-logo {
    width: 48px;
  }

  .instaread-widget-desktop .audio-control-1 {
    width: 101.03%;
  }

  .instaread-widget-desktop .pby-container {
    right: 3.2%;
  }

  .instaread-widget-desktop .speed-current-time {
    margin-right: 0.1rem;
    padding-top: 4px;
  }


  .instaread-widget-desktop .icon-backward_15 #back_15 {
    width: 20px;
    height: 18px;
  }

  .instaread-widget-desktop .icon-farward_15 #far_15 {
    width: 20px;
    height: 18px;
  }

  #audio_speed {
    font-size: 11px;
    cursor: pointer;
    width: 32px;
    height: 18px;
  }

  .instaread-widget-desktop .play-icon-inner-container {
    margin-top: 0px;
    margin-left: 0px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .instaread-widget-desktop .play-icon-inner-container.spinner {
    height: 30px;
  }

  .instaread-widget-desktop .audio-primary-text {
    font-size: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 60px;
    padding-left: 1rem;
  }

  .instaread-widget-desktop #widget-audio-container>div[style*="justify-content: space-between"] {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    height: 55px;
    align-items: center;
    padding: 0 1.2rem;
    box-sizing: border-box;
    width: 100%;
  }

  .instaread-widget-desktop .audio-display {
    margin-top: 19px;
  }


  .instaread-widget-desktop .advertisementText {
    font-size: 10px !important;
    font-family: var(--font-family);
    margin-left: 2rem;
    width: 87%;
  }


._ap_apex_ad {
  display: flex !important;
  align-items: center !important;
}

.icon-playmbg {
  background: url("../images/icon-playmbg.png") no-repeat;
  background-repeat: no-repeat;
  background-position: 57% 51%;
}

.instaread-widget-desktop .widget-audio-inner-container {
  height: auto;
  margin-top: 0px !important;
}

.instaread-widget-mobile .widget-audio-inner-container {
  /* align-items: center; */
  /* height:85%; */
  margin-top: 0px !important;
}

.instaread-widget-desktop .widget-ad-container {
  cursor: pointer;
  margin-top: -5px !important;
}

.instaread-widget-mobile .audioPrimaryWaves {
  width: 100%;
  max-width: 100%;
  height: 50px;
}

#audioWaveform {
  width: 100%;
  height: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Static waveform bars */
.waveform-bar {
  width: 4px;
  background-color: #ffb3b3;
  border-radius: 3px; /* Fully rounded ends (half of width) */
  transition: background-color 0.4s ease, opacity 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
  opacity: 1;
  animation: fadeInBar 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

@keyframes fadeInBar {
  0% {
    opacity: 0;
    transform: scaleY(0.5);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Gradual fill effect - Apple Music style (left to right) */
.waveform-bar.filling {
  position: relative;
  background-color: #ffb3b3;
  transition: background-color 0.2s ease;
}

.waveform-bar.filling::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--fill-percentage, 0%);
  background-color: var(--primary-color);
  border-radius: 3px;
  transition: width 0.15s ease, opacity 0.1s ease;
  z-index: 1;
}

/* Smooth transition from filling to played - prevent blink */
.waveform-bar.played {
  position: relative;
  background-color: var(--primary-color);
  transition: background-color 0.15s ease;
}

/* When played, keep the fill pseudo-element at 100% to prevent blink */
.waveform-bar.played::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 3px;
  opacity: 1;
  transition: opacity 0.2s ease, width 0.15s ease;
  z-index: 1;
}

/* Ensure waveform container is responsive */
.audioPrimaryWaves {
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.audioPrimaryWaves.transitioning {
  opacity: 0.3;
}

.audio-primary-text {
  font-size: 15px !important;
}


/* Rest of your styles... */

/* ==========================================================================
   KEYBOARD NAVIGATION + TOOLTIPS
   Ported from standard_new_short_player.1.0.4.css.

   THIS FILE IS SHARED: eatthis_player_1.jsp and eatthis_dark_player.jsp both
   link it, but only eatthis_player_1.jsp has the ported markup. Every rule
   below that would otherwise misfire on the un-ported player is guarded by an
   attribute the port adds or removes, so the dark player is unaffected:
     - tooltip bubbles require [data-tooltip]; without it attr() resolves to
       an empty string and a blank grey pill would appear on hover.
     - the logo bubble requires a:not([title]); the dark player still carries
       title="Powered by Instaread", so it keeps its native tooltip and never
       shows two at once.
     - the ad-slot ring needs tabindex on #widget-ads-container (the dark
       player still has it on the child) and the ir-ad-focused class its JS
       never applies, so both are inert there.
   The :focus-visible outlines below DO apply to both players. They only paint
   on keyboard focus and replace the browser default, so the dark player gains
   a visible ring on the stops it already had -- no layout change.
   ========================================================================== */

/* Keyboard focus indicators for every tabbable control in this player.
   None of these had an explicit style before, so keyboard users relied on
   the browser's default outline. Two tabindexes were relocated in the JSP
   to the element users actually see, rather than a legacy/invisible sibling:
   - ad slot: #widget-ads-container (parent), not #widget-ad-container
     (child) -- the child's visibility is toggled by the default-ad timeout
     in JS, so anchoring focus to the parent keeps this stop in the tab
     order regardless of that timer.
   - seek: #audioTrackProgressWrapper (the visible waveform), not
     #audioPlaybar -- that div is legacy/empty (display:none, its own input
     is commented out in the JSP) and was never reachable by Tab despite
     carrying tabindex="3" -- hidden elements are skipped regardless of
     tabindex, so keyboard users never landed on any seek control at all.
   Tab order is play(2), controls(3-5), seek(6), logo(7), ad(8). */
#playCircleBlock:focus-visible,
#backward15:focus-visible,
#farward15:focus-visible,
#audio_speed:focus-visible,
#audioTrackProgressWrapper:focus-visible,
#instalogo:focus-visible {
    outline: 1.5px solid var(--primary-color);
    outline-offset: 1px;
}

/* #widget-ads-container is a fixed reserved layout slot (320x100 here; the
   default ad inside it is --default-ad-width x --default-ad-height = 250x35)
   and the ad is centred in it, so ringing the container itself would draw a
   big mostly-empty box around the ad. The ring goes on the content instead.

   The slot only holds a tab stop while our own default ad is in it -- see
   syncAdTabStop() in the JS, which drops the tabindex once a third-party
   creative renders, so the browser's native tabbing reaches the ad frame
   directly instead of stopping here first.

   The container itself must have its own outline explicitly suppressed --
   it receives real keyboard focus, so without this the browser's native
   default focus ring renders on it (a second, unstyled box) at the same
   time as the custom ring on its content.

   The real-ad state can't use a focus pseudo-class at all. Tabbing into the
   ad puts focus inside the creative's own nested, cross-origin document;
   Chrome then reports the containing frame as this document's activeElement
   but matches none of :focus, :focus-visible or :focus-within on it. So that
   ring is applied by class from syncAdFocusRing() in the JS.

   Rings drawn inset, not outset -- this widget doesn't control the width of
   its surrounding iframe, and on mobile the ad slot sits flush against that
   edge with no spare margin for an outward ring, so an outset ring gets
   clipped by the iframe boundary. */
#widget-ads-container:focus-visible {
    outline: none;
}

#widget-ads-container:focus-visible > *,
#widget-ads-container iframe.ir-ad-focused {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Powered-by-Instaread logo tooltip, replacing the native title that the port
   removes from the <a>. Anchored on the inner <a>, NOT #instalogo itself --
   .pby-container carries layout rules elsewhere in this file, so giving
   #instalogo its own position:relative risks activating offsets that are only
   inert because it has always been position:static. The <a> has no such rules.
   Trigger is the ancestor's hover/focus-visible state since tabindex lives on
   #instalogo, not the <a>. :not([title]) is what keeps this off the dark
   player -- see the file-sharing note at the top of this block. */
#instalogo > a {
    position: relative;
}

#instalogo:hover > a:not([title])::after,
#instalogo:focus-visible > a:not([title])::after {
    content: "Powered by Instaread";
    position: absolute;
    /* Opens UPWARD, unlike the other tooltips in this file. #instalogo sits
       flush against the widget's own bottom edge (measured live: the anchor
       already overlaps to within a few px of #instaread-widget's bottom, on a
       fixed 140px-tall widget with overflow:hidden), so a downward bubble
       lands outside the widget and gets clipped -- invisible even though the
       focus ring still shows. Above the anchor is the rest of the widget,
       ~180px of headroom, so upward is correct here even though every other
       control in this file opens downward for the opposite reason. */
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #5f6368;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    /* Resting state. Both rules below drive the bubble entirely through
       fpTooltipAutoHide, so there is no `transition` here -- with nothing
       ever setting opacity:1 as a static state, a transition could never
       fire. */
    opacity: 0;
    visibility: hidden;
}

/* Auto-dismissing tooltip timeline, shared by the logo bubble and the
   data-tooltip controls further down. A transition cannot express this:
   it only animates a state *change*, so while the pointer stays on the
   control :hover remains true and opacity:1 held forever -- the bubble
   never went away on its own. An animation owns the whole timeline
   instead. Over its run: 0-4% fades in, 4-91% holds (~2s visible),
   91-100% fades out. `forwards` keeps the final hidden frame rather than
   snapping back to the 0% frame, and any animation-delay elapses against
   the element's own (hidden) base style since the fill is not
   `backwards`. */
@keyframes fpTooltipAutoHide {
    0%   { opacity: 0; visibility: visible; }
    4%   { opacity: 1; visibility: visible; }
    91%  { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* Hover waits ~1s before showing, matching native tooltip timing, then
   dismisses itself. :not(:focus-visible) hands a focused control to the
   rule below: both rules animate, and they carry different delays, so
   without it a control that is hovered *and* focused would match both
   and whichever won would decide if the bubble appears at once or after 1s. */
#instalogo:hover:not(:focus-visible) > a:not([title])::after {
    animation: fpTooltipAutoHide 2.3s ease 1s forwards;
}

/* Keyboard focus: show immediately -- no reason to make Tab users wait --
   then dismiss after the same ~2s. */
#instalogo:focus-visible > a:not([title])::after {
    animation: fpTooltipAutoHide 2.2s ease 0s forwards;
}

/* Keyboard-focus tooltip, mirroring each control's data-tooltip attribute --
   native title tooltips don't reliably show on keyboard focus across browsers
   (only reliably on mouse hover), so Tab users got no equivalent hint.
   Controls carry data-tooltip (+ aria-label where they have no visible text)
   instead of title, precisely so the native OS tooltip never fires alongside
   this one. position:relative is unconditional (not just on :focus-visible)
   since none of these elements had an explicit position before -- it's a
   layout no-op without added top/left/etc, and is required so the ::after
   bubble anchors to the control itself. */
#playCircleBlock,
#backward15,
#farward15,
#audio_speed,
#containerAudioPlayer {
    position: relative;
}

/* The seek tooltip hangs off #containerAudioPlayer, NOT off the waveform
   (#audioTrackProgressWrapper) it describes. .audioPrimaryWaves clips with
   overflow:hidden -- deliberately, that clip is what contains the bars -- so a
   bubble anchored there is invisible unless the clip is lifted, and lifting it
   lets the bars escape too. Its parent is the same width, does not clip, and
   needs nothing lifted.

   Every bubble opens DOWNWARD. #audioPrimaryText ("Listen to audio version of
   this article") sits directly above the control row and its box ends only a
   few px clear of it, while a bubble needs ~29px (21px tall + 8px gap) -- an
   upward bubble lands inside the label and covers the text. The widget has
   headroom below every control but above none. */
#playCircleBlock[data-tooltip]::after,
#backward15[data-tooltip]::after,
#farward15[data-tooltip]::after,
#audio_speed[data-tooltip]::after,
#containerAudioPlayer[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #5f6368;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
}

/* playCircleBlock sits at the widget's far-left edge -- centering its tooltip
   (left: 50%; translateX(-50%), like the other controls) pushes half the
   bubble past the container's left edge and clips it. Anchor to the button's
   left edge instead so the bubble only grows rightward. */
#playCircleBlock[data-tooltip]::after {
    left: 0;
    transform: none;
}

/* Hover: wait ~1s before showing, then dismiss after ~2s. See
   fpTooltipAutoHide above for why this is an animation and not a transition.
   :not(:focus-visible) defers to the focus rule below so a control that is
   both hovered and focused picks one timeline rather than racing two. */
#playCircleBlock[data-tooltip]:hover:not(:focus-visible)::after,
#backward15[data-tooltip]:hover:not(:focus-visible)::after,
#farward15[data-tooltip]:hover:not(:focus-visible)::after,
#audio_speed[data-tooltip]:hover:not(:focus-visible)::after,
#containerAudioPlayer[data-tooltip]:hover:not(:focus-within)::after {
    animation: fpTooltipAutoHide 2.3s ease 1s forwards;
}

/* Keyboard focus: show immediately -- no reason to make Tab users wait --
   then dismiss after the same ~2s. Tabbing away and back restarts it, since
   the element stops and re-matches the selector. */
#playCircleBlock[data-tooltip]:focus-visible::after,
#backward15[data-tooltip]:focus-visible::after,
#farward15[data-tooltip]:focus-visible::after,
#audio_speed[data-tooltip]:focus-visible::after,
/* :focus-within, not :focus-visible -- the tab stop is on the waveform child
   (tabindex="6"), so the parent that carries the bubble never matches :focus
   itself. */
#containerAudioPlayer[data-tooltip]:focus-within::after {
    animation: fpTooltipAutoHide 2.2s ease 0s forwards;
}

/* NOTHING may lift .audioPrimaryWaves' overflow:hidden to make the seek
   tooltip visible. That clip is what contains the waveform bars, which are
   drawn taller than the box on purpose; lifting it spills the tallest bars
   over the text above and the ad below, and on touch devices :hover sticks
   after a tap so one scrub leaves them spilled. The tooltip is anchored on
   the non-clipping parent instead; see the ::after rules above. */