/*
 * Value-Based Care Metrics Quiz styles
 *
 * Part 1: Tailwind utilities, precompiled (Tailwind 3.4.17, preflight off) and
 * scoped to #vbc-quiz-container. This replaces the Tailwind Play CDN script,
 * which compiles CSS in the browser at runtime and is not meant for production.
 * If the markup gains new Tailwind classes, rebuild this part.
 *
 * Part 2: the vendor stylesheet that was inline in the embed (keyframes renamed
 * to vbc-slideIn to avoid clashing with theme animations).
 *
 * Font: the original loaded "Hellix" from Google Fonts, but Hellix is a
 * commercial font and is not on Google Fonts, so that request always failed.
 * The quiz uses Hellix only if the theme already loads it.
 */

/* ---- Part 1: Tailwind utilities ---- */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

#vbc-quiz-container .sticky {
  position: sticky
}

#vbc-quiz-container .m-0 {
  margin: 0px
}

#vbc-quiz-container .mx-auto {
  margin-left: auto;
  margin-right: auto
}

#vbc-quiz-container .mb-0 {
  margin-bottom: 0px
}

#vbc-quiz-container .mt-0 {
  margin-top: 0px
}

#vbc-quiz-container .mt-1 {
  margin-top: 0.25rem
}

#vbc-quiz-container .flex {
  display: flex
}

#vbc-quiz-container .grid {
  display: grid
}

#vbc-quiz-container .h-5 {
  height: 1.25rem
}

#vbc-quiz-container .w-5 {
  width: 1.25rem
}

#vbc-quiz-container .w-full {
  width: 100%
}

#vbc-quiz-container .max-w-full {
  max-width: 100%
}

#vbc-quiz-container .flex-shrink-0 {
  flex-shrink: 0
}

#vbc-quiz-container .cursor-pointer {
  cursor: pointer
}

#vbc-quiz-container .flex-col {
  flex-direction: column
}

#vbc-quiz-container .items-start {
  align-items: flex-start
}

#vbc-quiz-container .items-center {
  align-items: center
}

#vbc-quiz-container .justify-center {
  justify-content: center
}

#vbc-quiz-container .justify-between {
  justify-content: space-between
}

#vbc-quiz-container .gap-2 {
  gap: 0.5rem
}

#vbc-quiz-container .break-words {
  overflow-wrap: break-word
}

#vbc-quiz-container .rounded {
  border-radius: 0.25rem
}

#vbc-quiz-container .rounded-lg {
  border-radius: 0.5rem
}

#vbc-quiz-container .rounded-xl {
  border-radius: 0.75rem
}

#vbc-quiz-container .border {
  border-width: 1px
}

#vbc-quiz-container .border-2 {
  border-width: 2px
}

#vbc-quiz-container .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

#vbc-quiz-container .from-slate-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

#vbc-quiz-container .to-slate-800 {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position)
}

#vbc-quiz-container .p-3 {
  padding: 0.75rem
}

#vbc-quiz-container .p-6 {
  padding: 1.5rem
}

#vbc-quiz-container .text-center {
  text-align: center
}

#vbc-quiz-container .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

#vbc-quiz-container .text-\[10px\] {
  font-size: 10px
}

#vbc-quiz-container .text-\[11px\] {
  font-size: 11px
}

#vbc-quiz-container .text-\[13px\] {
  font-size: 13px
}

#vbc-quiz-container .text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

#vbc-quiz-container .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}

#vbc-quiz-container .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}

#vbc-quiz-container .text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}

#vbc-quiz-container .font-bold {
  font-weight: 700
}

#vbc-quiz-container .font-medium {
  font-weight: 500
}

#vbc-quiz-container .font-semibold {
  font-weight: 600
}

#vbc-quiz-container .uppercase {
  text-transform: uppercase
}

#vbc-quiz-container .tracking-wide {
  letter-spacing: 0.025em
}

#vbc-quiz-container .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#vbc-quiz-container .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

#vbc-quiz-container .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

#vbc-quiz-container .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

@media (min-width: 768px) {
  #vbc-quiz-container .md\:mt-0 {
    margin-top: 0px
  }

  #vbc-quiz-container .md\:flex-row {
    flex-direction: row
  }

  #vbc-quiz-container .md\:justify-between {
    justify-content: space-between
  }

  #vbc-quiz-container .md\:self-center {
    align-self: center
  }

  #vbc-quiz-container .md\:text-left {
    text-align: left
  }
}


/* ---- Part 2: vendor styles ---- */
/* 1. MASTER WRAPPER: Centers element and provides outer context */
.vbc-quiz-master-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 10px; 
}

/* 2. STRICT CONTAINER: Forces the white box, rounded corners, and constrained width */
#vbc-quiz-container {
  width: 100% !important;
  max-width: 950px !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  font-family: 'Hellix', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  margin: 0 !important;
}

#vbc-quiz-container * {
  box-sizing: border-box;
}

#vbc-quiz-container .is-hidden {
  display: none !important;
}

/* HARDCODED GRID LAYOUTS (Forces side-by-side even if CMS constraints exist) */
#vbc-quiz-container .quiz-main-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* Left side (card) gets slightly more breathing room */
  gap: 16px; 
  margin-bottom: 8px;
  align-items: start; /* Prevents columns from stretching unnecessarily tall */
}
#vbc-quiz-container .quiz-drop-zones {
  display: grid;
  grid-template-columns: 1fr; /* Strict single-column stack on the right */
  gap: 8px; 
}

/* OVERFLOW FIX: Hardcoded Results Grid (4 items side-by-side) */
#vbc-quiz-container .results-grid {
  display: grid;
  /* minmax(0, 1fr) guarantees the items always fit, even if they have to wrap text */
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  gap: 12px;
  margin-bottom: 16px;
}

/* Responsive stacking for actual mobile viewports */
@media (max-width: 650px) {
  #vbc-quiz-container .quiz-main-layout {
    grid-template-columns: 1fr;
  }
  #vbc-quiz-container .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2x2 grid on mobile */
  }
}

/* Custom Animations and States */
#vbc-quiz-container .metric-card {
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}
#vbc-quiz-container .metric-card:active {
  cursor: grabbing;
  opacity: 0.8;
  transform: scale(1.02);
}

/* SUPER CONDENSED Drop Zones */
#vbc-quiz-container .category-drop {
  min-height: 40px; /* Minimal drop zone height */
  transition: all 0.2s ease;
  border: 2px dashed transparent;
}
#vbc-quiz-container .category-drop.drag-over {
  border-color: currentColor;
  background-color: rgba(59, 130, 246, 0.05);
  transform: scale(1.01);
}

/* Animation for the feedback banner */
#vbc-quiz-container .feedback-message {
  animation: vbc-slideIn 0.3s ease-out;
}
@keyframes vbc-slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Progress bar gradient */
#vbc-quiz-container .progress-bar {
  height: 4px;
  background: linear-gradient(90deg, #8D00FF var(--progress), #e5e7eb var(--progress));
  transition: --progress 0.3s ease;
}

/* Keyboard focus for drop zones (they are now clickable and focusable). */
#vbc-quiz-container .category-drop:focus-visible { outline: 2px solid #8D00FF; outline-offset: 2px; }