/* Read-only model rule breakdown — the markup js/model-rules-view.js emits.
 *
 * Loaded by BOTH the app (dark by default, light under [data-theme="light"]) and
 * the admin pages (always light), so nothing here names a background or a text
 * colour: type inherits, and every surface is a neutral grey at low alpha, which
 * reads the same way over either. Keeping it in its own file rather than copying
 * the rules into styles.css and auth-styles.css means the two can't drift.
 *
 * VIXEN INTELLIGENCE, c. 2026, Rahul Tandon
 */

.model-rules {
  --mr-line: rgba(128, 128, 128, 0.35);
  --mr-fill: rgba(128, 128, 128, 0.13);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.45;
}

.model-rules-empty {
  margin: 0;
  opacity: 0.7;
  font-size: 0.76rem;
}

.model-rules-rule {
  border: 1px solid var(--mr-line);
  border-radius: 0.35rem;
  padding: 0.4rem 0.55rem;
}

.model-rules-rule-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Ordinal marker — rules combine as a set, but they are authored, read and
   debugged in order, so the position is worth showing. */
.model-rules-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 0.65rem;
  background: var(--mr-fill);
  font-size: 0.68rem;
  font-weight: 600;
}

.model-rules-type {
  font-size: 0.68rem;
  opacity: 0.75;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--mr-fill);
}

.model-rules-unknown {
  border: 1px dashed currentColor;
  opacity: 0.9;
}

.model-rules-desc {
  margin: 0.3rem 0 0;
  opacity: 0.72;
  font-size: 0.72rem;
}

.model-rules-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.model-rules-summary { margin-top: 0; }

/* One tuning value. `cursor: help` because every chip that has a `title` is
   carrying the param's own help text from the rule definition. */
.model-rules-chip {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--mr-line);
  border-radius: 0.8rem;
  white-space: nowrap;
  font-size: 0.7rem;
  opacity: 0.9;
}

.model-rules-chip[title] { cursor: help; }

.model-rules-chip b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A custom rule's DSL expression is the rule itself — give it room to wrap
   rather than truncating it into a chip. */
.model-rules-expr {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--mr-fill);
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}