/* FV-CMS-VENDORED v0.7.2 — DO NOT EDIT IN PLACE. Source: github.com/avidtech6/freshvibe-cms. To update, run: fvcms-update */
/* oscar-trace.css — fragment.oscar.trace.001 */
.oscar-badge {
  position: absolute;
  min-width: 24px;
  height: 20px;
  border-radius: 10px;
  font: 700 10px ui-monospace, Menlo, monospace;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999997;
  cursor: pointer !important;
  padding: 0 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  line-height: 1;
  border: 1.5px solid rgba(255, 255, 255, .5);
  transition: transform .12s, box-shadow .12s;
  user-select: none;
  letter-spacing: .3px;
}
.oscar-badge:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  border-color: rgba(255, 255, 255, .95);
}
.oscar-badge:active { transform: scale(1.05); }
.oscar-badge.b-section { background: rgba(180, 80, 80, .95); }
.oscar-badge.b-widget { background: rgba(60, 140, 200, .95); }
.oscar-badge.b-heading { background: rgba(120, 80, 180, .95); }
.oscar-badge.b-cta { background: rgba(60, 160, 80, .95); }

.oscar-trace-outline {
  outline: 2px dashed rgba(180, 80, 80, .85) !important;
  outline-offset: -2px;
}
.oscar-trace-outline.kind-widget { outline-color: rgba(60, 140, 200, .85) !important; }
.oscar-trace-outline.kind-heading { outline-color: rgba(120, 80, 180, .85) !important; }
.oscar-trace-outline.kind-cta { outline-color: rgba(60, 160, 80, .85) !important; }
.oscar-trace-outline.hovered {
  outline: 3px solid !important;
  outline-offset: -3px;
  position: relative;
  z-index: 1;
}
.oscar-trace-outline.kind-section.hovered {
  background-color: rgba(180, 80, 80, .10) !important;
  box-shadow: inset 0 0 0 9999px rgba(180, 80, 80, .10) !important;
}
.oscar-trace-outline.kind-widget.hovered {
  background-color: rgba(60, 140, 200, .10) !important;
  box-shadow: inset 0 0 0 9999px rgba(60, 140, 200, .10) !important;
}
.oscar-trace-outline.kind-heading.hovered {
  background-color: rgba(120, 80, 180, .10) !important;
  box-shadow: inset 0 0 0 9999px rgba(120, 80, 180, .10) !important;
}
.oscar-trace-outline.kind-cta.hovered {
  background-color: rgba(60, 160, 80, .10) !important;
  box-shadow: inset 0 0 0 9999px rgba(60, 160, 80, .10) !important;
}

/* Hide trace badges when a panel is focused - badges should not
   overlap the panel manager UI. Per operator feedback 2026-07-29. */
html:has(.oscar-pm-panel[data-focused="1"]) .oscar-badge { display: none; }


/* Mobile: badges always visible (operator needs to tap them to copy tags).
   Per operator feedback 2026-07-30. The :has() rule above would otherwise
   hide badges whenever any panel is focused, which is always the case
   on mobile (the dev panel is always visible). */
@media (max-width: 600px) {
  .oscar-badge { display: flex !important; }
}