/* =========================
   Question Set → Drag Text
   Draggables compact + no handle-before
   ========================= */

/* 1) Make draggable tiles narrower with only left/right padding */
.h5p-content .h5p-drag-text.h5p-theme .joubel-tip-container {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  width: 30px !important;
  height: 30px !important;
}
/* =========================
   Feedback box
   ========================= */
/* =========================
   Scorebar wrapper
   ========================= */
/* =========================
   Score bar layout
   ========================= */

/* progress track */
/* actual progress bar */
/* subtle glossy highlight */
/* =========================
   Star styling
   ========================= */
/* =========================
   Button row
   ========================= */
/* secondary buttons base */
/* show solutions */
/* retry */
/* hover */
/* active */
/* focus */
/* CHECK-BUTTON */
/* label inside */
/* hover */
/* active / pressed */
/* keyboard focus */
/* disabled */
/* Hide empty drag container in H5P Drag Text */

/* =========================
   H5P Drag Text / Dropzones
   Modern LMS School Style
   Clean School Version
   Strong Override Version
   ========================= */
/* transparent outer wrappers */
/* introduction */
/* task layout */
/* place word bank above sentence area */
/* sentence / drop area */
.h5p-drag-text .h5p-drag-droppable-words {
  display: block !important;
  color: var(--h5p-text-soft) !important;
  font-size: 1rem !important;
  line-height: 2.7 !important;
  margin: 0 auto !important;
  width: fit-content;
}

/* outer inline dropzones */
/* inner dropzones */
/* word bank */
/* draggable cards */
/* accessible hidden content */
/* tablet */
@media (max-width: 768px) {
  .h5p-drag-text {
    --h5p-tile-height: clamp(2.4rem, 2.3rem + 0.15vw, 2.55rem) !important;
  }

  .h5p-drag-text .h5p-question-main-content {
    padding: 1px !important;
  }

  .h5p-drag-text .h5p-question-introduction,
  .h5p-drag-text .h5p-drag-droppable-words-container,
  .h5p-drag-text .h5p-drag-draggables-container {
    padding: 10px !important;
    border-radius: var(--h5p-radius-md) !important;
  }

  .h5p-drag-text .h5p-drag-droppable-words {
    font-size: 1rem !important;
    line-height: 2.45 !important;
  }

  .h5p-drag-text .h5p-dropzone .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline [aria-dropeffect],
  .h5p-drag-text .ui-droppable {
    min-width: clamp(4rem, 3.8rem + 0.5vw, 5.2rem) !important;
  }

  .h5p-drag-text .h5p-draggable,
  .h5p-drag-text .h5p-draggable--has-handle,
  .h5p-drag-text .ui-draggable,
  .h5p-drag-text .ui-draggable-handle {
    padding: 0 10px !important;
    font-size: 0.96rem !important;
  }
}
@media (max-width: 480px) {
  .h5p-drag-text .h5p-question-main-content {
    padding: 0px !important;
  }

  .h5p-drag-text .h5p-drag-droppable-words {
    line-height: 2.2 !important;
  }

  .h5p-drag-text .h5p-dropzone .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline .ui-droppable,
  .h5p-drag-text .h5p-dropzone--inline [aria-dropeffect],
  .h5p-drag-text .ui-droppable {
    min-width: clamp(3.6rem, 3.4rem + 0.45vw, 4.6rem) !important;
  }

  .h5p-drag-text .h5p-draggables-container,
  .h5p-drag-text .h5p-drag-draggables-container {
    gap: 10px !important;
  }
}