/* Edvibe-like exercise rhythm while keeping the Mariiaswort visual language. */
.sp-gaps-exercise,
.sp-builder-exercise {
  max-width: 100%;
}

.sp-gaps-text {
  color: #243047;
  font-size: 17px;
  line-height: 2.65 !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.sp-gaps-text br {
  display: block;
  content: "";
  margin-bottom: .55rem !important;
}

.sp-gap-slot {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  break-inside: avoid;
  white-space: nowrap;
}

.sp-gap-slot input,
.sp-gap-slot [data-gap-choice],
.sp-gap-slot [data-gap-drop] {
  width: 128px !important;
  max-width: min(128px, 70vw);
  border-color: #c9b8df !important;
  background: #faf7ff !important;
}

.sp-gap-slot [data-gap-drop].has-word,
.sp-gap-slot [data-gap-choice]:not(:empty) {
  width: auto !important;
  min-width: 88px;
}

.sp-gap-bank {
  border-color: #dfd2ef !important;
  background: #f3edfb !important;
}

.sp-gap-bank button,
.sp-builder-brick {
  border-color: #c9b8df !important;
  background: #fff !important;
  color: #352548 !important;
}

.sp-builder-row {
  grid-template-columns: 34px minmax(0,1fr);
  align-items: start;
  gap: 8px 12px;
  padding: 14px;
  border: 1px solid #e2d8ef;
  border-radius: 16px;
  background: #fbf9fe;
}

.sp-builder-row > b {
  grid-row: 1 / span 2;
  padding-top: 9px;
  color: #77549f;
}

.sp-builder-row .sp-builder-bank,
.sp-builder-row .sp-builder-target {
  grid-column: 2;
  min-width: 0;
  border-color: #cdbde1;
}

.sp-builder-row .sp-builder-bank {
  background: #f2ebfa;
}

.sp-builder-row .sp-builder-target {
  background: #fff;
}

.sp-builder-actions > [data-builder-check],
.sp-gap-actions > [data-check-gaps] {
  background: #77549f !important;
  color: #fff !important;
}

.sp-exercise-reference-images,
.sp-essay-reference-images {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
}

.sp-exercise-reference-images .sp-article-image,
.sp-essay-reference-images .sp-article-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e2d8ef;
  border-radius: 16px;
  background: #f8f4fc;
}

.sp-exercise-reference-images img,
.sp-essay-reference-images img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 700px) {
  .sp-gaps-text { font-size: 16px; line-height: 2.5 !important; }
  .sp-builder-row { grid-template-columns: 26px minmax(0,1fr); padding: 10px; }
  .sp-builder-brick { white-space: normal; text-align: left; }
}