/* Rule builder — a rule reads as a sentence, never as JSON. */

.rb-root { font-size: 12.5px; }

.rb-always { color: #707A86; font-style: italic; margin: 0 0 4px; }

.rb-join        { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #56636F; }
.rb-join-select { width: 78px; }

.rb-row   { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 6px;
            padding: 6px 8px; background: #F7F9FC; border: 1px solid #E7ECF2; border-radius: 5px; }
.rb-conj  { flex: 0 0 100%; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
            color: #98A1AC; font-weight: 600; margin: -2px 0 2px; }

.rb-field { flex: 1 1 130px; min-width: 0; }
.rb-op    { flex: 0 1 118px; min-width: 0; }
.rb-value { flex: 1 1 110px; min-width: 0; }
.rb-novalue { flex: 1 1 110px; color: #A8B0BA; text-align: center; }

.rb-actions { display: flex; gap: 10px; align-items: center; margin-top: 2px; }

/* Live restatement of the rule in plain English, so an author can confirm the
   sentence says what they meant before they save. */
.rb-preview { margin: 9px 0 0; padding: 7px 10px; background: #EEF4FE;
              border-left: 3px solid var(--wo-blue); border-radius: 3px;
              color: #14417F; font-size: 12.5px; }

.rb-advanced { background: #FFF8E1; border-left: 3px solid #C9A227; padding: 9px 11px; border-radius: 3px; }
.rb-advanced .ni-expr { background: none; border: 0; padding: 0; margin: 0 0 6px; color: #6B5200; }
.rb-advanced small    { color: #8A6100; display: block; }

.rb-hint { display: block; color: #98A1AC; margin-top: 6px; }

/* Validation rules */
.vr-root  { font-size: 12.5px; }
.vr-none  { color: #707A86; font-style: italic; margin: 0 0 6px; }

.vr-rule       { border: 1px solid #E7ECF2; border-radius: 6px; padding: 10px 11px; margin-bottom: 10px; background: #FCFDFE; }
.vr-rule-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.vr-num        { background: #EEF1F5; color: #56636F; border-radius: 50%; width: 19px; height: 19px;
                 display: inline-flex; align-items: center; justify-content: center;
                 font-size: 10px; font-weight: 600; flex: 0 0 auto; }
.vr-severity   { width: 96px; flex: 0 0 auto; }
.vr-severity-hint { color: #98A1AC; font-size: 11px; flex: 1 1 auto; }

.vr-when       { margin-bottom: 9px; }
.vr-when label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }

.vr-message    { margin-bottom: 0; }
.vr-warn       { color: #9A5B00 !important; }

/* A check with no condition can never fire — say so rather than leaving it
   looking configured. */
.vr-inert      { margin-top: 8px; background: #FFF8E1; border-left: 3px solid #C9A227;
                 padding: 6px 10px; border-radius: 3px; color: #8A6100; font-size: 12px; }