/* The workout editor's verdict marks (Components::SyntaxHighlightedTextarea
   with the live preview's Components::EditorVerdict). The colouring itself
   is the legacy syntax_highlight.css. */

/* A movement the preview could not find in the gym's library, marked where
   it is typed: a dotted caution underline under the movement's own colour,
   never a change of weight or spacing, so the text keeps its width. The
   preview's notice names the same movements (Components::UnknownMovementsNotice). */
.hl-unknown {
  text-decoration: underline dotted var(--caution);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* The autocomplete's row for a movement the preview could not find
   (description_autocomplete_controller.js): its badge in the same caution
   as the mark above. The row and badge shapes are the legacy
   description_autocomplete.css. */
.autocomplete-badge-unknown {
  color: var(--caution-ink);
  background-color: var(--caution-soft);
}

/* The unknown row wraps: badge and name on one line, the notice and offer
   on the next, where a plain row's hint is cut to one line. */
.autocomplete-item-unknown {
  flex-wrap: wrap;
}

.autocomplete-hint-unknown {
  flex-basis: 100%;
  white-space: normal;
}