/* Word Completion segmented slots: TOEFL-style subtle inline blanks. */

/* The prefix is the part of the word already given, but nothing said so: it sat
   flush against the grey box in the body font while the box used monospace.
   Feedback #13 - a student read the two-letter prefix "fr" as a single "f",
   concluded the target was "frog", and asked for an extra box to hold the
   plural "s". The three boxes were already correct for "ogs"; she had simply
   miscounted which letters were hers to supply, and she got the other four
   blanks in that passage exactly right.

   Ruling the given letters the same way the empty slots are ruled turns the
   whole word into one countable row of letter positions, so "fr[___]" reads as
   five, not four. */
.wc-inline-word .wc-prefix,
.wc-inline-word .wc-suffix {
  position: relative;
  display: inline-block;
  height: 1.28em;
  vertical-align: baseline;
}

/* Geometry copied from .wc-segmented-slots / .wc-segmented-slot so the given
   letters and the empty ones sit on one unbroken rule. A plain border-bottom
   lands below the baseline and reads as a stray mark instead. */
.wc-inline-word .wc-prefix::after,
.wc-inline-word .wc-suffix::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.10em;
  height: 1px;
  background-color: #6b7280;
  opacity: 0.85;
  border-radius: 1px;
}

.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;
}