/*
 * Scoped to the compact word-fill renderer only.  A compact cell has an
 * additional wrapper between its blank container and input; standard fill
 * questions, the question bank, marking and the reading-club course runner
 * have a different DOM shape and are intentionally not selected.
 */
span[data-fill-word-compact="r3"] {
  position: static !important;
  top: auto !important;
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em !important;
  margin-inline: 0.12em !important;
  vertical-align: baseline;
  white-space: nowrap;
}

span[data-fill-word-compact="r3"] > span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.12em !important;
  margin-right: 0 !important;
}

span[data-fill-word-compact="r3"] input[data-fill-question][data-fill-order] {
  box-sizing: border-box;
  width: 1.25em !important;
  height: 1.55em !important;
  min-height: 0;
  padding: 0 0 0.04em !important;
  border-bottom-color: #0f766e !important;
  background: #ccfbf1 !important;
  line-height: 1.25 !important;
  vertical-align: baseline !important;
}

span[data-fill-word-compact="r3"] input[data-fill-question][data-fill-order]:focus {
  background: #f0fdfa !important;
}

/* A completed blank becomes the renderer's edit button.  Preserve the same
 * teal field and underline so completion does not make the answer disappear
 * into ordinary body text; the button still re-enters edit mode on click. */
span[data-fill-word-compact="r3"] > button[aria-label^="Edit blank "] {
  margin: 0;
  padding: 0 0.08em 0.04em;
  border: 0;
  border-bottom: 2px solid #0f766e !important;
  border-radius: 0;
  background: #ccfbf1 !important;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: baseline;
}

span[data-fill-word-compact="r3"] > button[aria-label^="Edit blank "]:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}