/*
 * Pinpoint Live PV - structural layout guard
 * Always loaded on the front end, even when visual preset CSS is disabled.
 * Prevents theme/global styles from stretching the single-PV badge/pill/panel.
 */
.pp-live-pv-shell,
.plpv-shell {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

/*
 * When the shortcode output itself is a direct content child, follow the
 * theme's content width. Blocksy exposes these variables; other themes fall
 * back to the containing block width.
 */
.entry-content > .pp-live-pv-shell.plpv-shell--content,
.entry-content > p > .pp-live-pv-shell.plpv-shell--content:only-child,
.wp-site-blocks .entry-content > .pp-live-pv-shell.plpv-shell--content {
  display: flex !important;
  width: var(--theme-block-width, 100%) !important;
  max-width: var(--theme-block-max-width, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inside a normal shortcode/block container, use that parent as the boundary. */
.wp-block-shortcode > .pp-live-pv-shell.plpv-shell--content,
.pp-live-pv-shell.plpv-shell--parent {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* The actual PV UI must remain content-sized even if a theme targets spans. */
.pp-live-pv-shell > .pp-live-pv,
.pp-live-pv.plpv {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
}

.pp-live-pv .plpv__num,
.pp-live-pv .plpv__label {
  flex: 0 0 auto;
  max-width: 100%;
}

/* Ranking output stays inside its parent and scrolls only the table when needed. */
.plpv-top,
.plpv-top__wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.plpv-top__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 689px) {
  .pp-live-pv-shell,
  .plpv-shell,
  .pp-live-pv-shell > .pp-live-pv,
  .pp-live-pv.plpv {
    max-width: 100% !important;
  }
}