/* Word Completion segmented slots: TOEFL-style subtle inline blanks. */
.wc-segmented-wrapper {
  --missing-chars: 6;
  --slot-width: 1.02ch;
  position: relative !important;
  display: inline-block !important;
  width: calc(var(--missing-chars) * var(--slot-width)) !important;
  height: 1.28em !important;
  margin: 0 0.10em !important;
  vertical-align: baseline !important;
  overflow: visible !important;
  background: rgba(209, 213, 219, 0.65) !important;
  border-radius: 2px !important;
}

.wc-segmented-wrapper .wc-blank-input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 1.28em !important;
  min-width: 0 !important;
  max-width: none !important;

  border: 0 !important;
  border-radius: 2px !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  padding: 0 0 0 0.05ch !important;
  margin: 0 !important;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 1em !important;
  letter-spacing: 0.18ch !important;
  color: #111827 !important;
  caret-color: #2563eb !important;
}

.wc-segmented-slots {
  position: absolute !important;
  left: 0.08ch !important;
  right: 0.08ch !important;
  bottom: 0.10em !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--missing-chars), minmax(0, 1fr)) !important;
  gap: 0.16ch !important;
  pointer-events: none !important;
}

.wc-segmented-slot {
  display: block !important;
  height: 1px !important;
  min-width: 0.48ch !important;
  background-color: #6b7280 !important;
  opacity: 0.85 !important;
  border-radius: 1px !important;
}

.wc-segmented-wrapper:focus-within {
  background: rgba(219, 234, 254, 0.95) !important;
}

.wc-segmented-wrapper:focus-within .wc-segmented-slot {
  background-color: #2563eb !important;
  opacity: 1 !important;
}