/* 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;
}

/* A line the parser warned about (a movement in a timed window with no rep
   count), marked whole where it is typed: a wavy caution underline, the
   warning as the title, so it reads apart from the unknown movement's dotted
   one. The preview's warnings list says the same. */
.hl-warned {
  text-decoration: underline wavy var(--caution);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 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;
}