/* The clause library and the Calculated block's panel in the signing field
   editor (public/js/signing-clauses.js, public/js/signing-editor.js). Its own
   file, like every other feature, so two features never edit the same
   stylesheet. */

/* The field editor is a full-screen layer at z-index 120 and the ordinary modal
   layer is 100, so a window opened from inside the editor would open behind it.
   This one is lifted above both. */
.modal-back.cl-top { z-index: 140; }
/* [hidden] needs help wherever a class sets display. */
.modal-back.cl-top [hidden] { display: none !important; }

.cl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px;
}
.cl-row.on { border-color: var(--blue); }
.cl-main { flex: 1; min-width: 0; }
.cl-main b { margin-right: 6px; }
.cl-peek { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Words in a box, in the selected-block panel. */
.ed-words { width: 100%; resize: vertical; min-height: 84px; }
.ed-clause-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ed-clause-row select {
  flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 7px; background: #fff; font-size: 12.5px;
}
.ed-linkbtn {
  border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline;
}
.ed-sep { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* A Calculated block's lines: the block or number, then how it is taken off. */
.cl-line {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 6px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.cl-line select, .cl-line input { min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }
.cl-line .cl-which { flex: 1 1 140px; }
.cl-line .cl-num { flex: 1 1 70px; }
.cl-line .cl-mode { flex: 1 1 110px; }

/* A multi-line text box on the page in the editor reads from the top left, the
   way it is stamped. */
.dv-markup.mk-text.cl-multi { white-space: pre-wrap; align-items: flex-start; line-height: 1.2; }