/* rules_editor.css — styles for rules_editor.js (Rules view of Job settings → Strategy, explain-a-bar tables).
   Theme tokens from style.css :root. */
/* the Text view's parts are hidden (hidden attribute) while the Rules view shows; class display rules must not win */
#jobsettings-panel-strategy > [hidden] { display: none !important; }
.re-root { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.re-root[hidden] { display: none; }
.re-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); min-width: 0; }
.re-section-title { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.re-note { margin: 0 0 6px; }
.re-family-line { margin: 6px 0; font-size: 12.5px; color: var(--text-dim); }
.re-name { max-width: 360px; }
.re-params, .re-entries { display: flex; flex-direction: column; gap: 6px; }
.re-param { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.re-param-name { font-family: var(--font-mono); font-size: 12px; min-width: 120px; }
.re-param-inputs { display: inline-flex; align-items: center; gap: 4px; }
.re-num { width: 92px; font-family: var(--font-mono); font-size: 12px; }
.re-hint { font-size: 11.5px; color: var(--text-dim); }
.re-dim { font-size: 11.5px; color: var(--text-dim); }
.re-entry { display: grid; grid-template-columns: 22px minmax(90px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; }
.re-entry > .re-preset-was, .re-entry > .re-error { grid-column: 2 / -1; }
.re-num-label { font-size: 11.5px; color: var(--text-faint); text-align: right; }
.re-label, .re-expr { font-family: var(--font-mono); font-size: 12px; min-width: 0; }
.re-from-preset .re-label { color: var(--text-dim); }
.re-overridden .re-expr { border-color: var(--warn); }
.re-tools { display: inline-flex; gap: 2px; }
.re-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.re-new-name, .re-new-value { width: 140px; font-family: var(--font-mono); font-size: 12px; }
.re-stop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 10px; }
.re-error { font-size: 11.5px; margin: 2px 0 0; overflow-wrap: anywhere; }
.re-error[hidden] { display: none; }
.re-summary { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.re-describe { margin: 0; padding-left: 18px; font-size: 12px; }
.re-describe li { overflow-wrap: anywhere; }
.re-facts { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.re-facts code, .re-explain code { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.re-warnings { margin: 0; padding: 6px 10px 6px 26px; border: 1px solid var(--warn); border-radius: var(--radius-sm); font-size: 12px; }
.re-load-error { margin: 0; }

/* explain a bar */
.re-explain { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: 0; }
.re-explain-title { font-size: 12px; font-weight: 600; }
.re-explain-scroll { overflow-x: auto; }
.re-explain-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.re-explain-table th, .re-explain-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.re-explain-table th { color: var(--text-dim); font-weight: 600; }
.re-explain-section { color: var(--text-faint); }
.re-explain-values { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.re-explain-why { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.re-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; border: 1px solid var(--border); white-space: nowrap; }
.re-badge-pass { color: var(--success); border-color: var(--success); }
.re-badge-fail { color: var(--danger); border-color: var(--danger); }
.re-badge-nodata { color: var(--text-dim); }
.re-missed { margin: 6px 0 10px; font-size: 12px; }
.re-missed summary { cursor: pointer; color: var(--text-dim); }
.re-missed-item { padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.re-missed-line { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .re-entry { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .re-entry > .re-expr { grid-column: 2 / -1; }
}