/* Rule Composer screen — tracker #257 Slice 5c */

.rules-screen {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.rules-header h1 {
  font-size: var(--type-3xl);
  margin: 0 0 var(--space-2);
}

.rules-subtitle {
  color: var(--color-text-muted);
  font-size: var(--type-sm);
  line-height: 1.5;
  max-width: 64ch;
}

.rules-section h2 {
  font-size: var(--type-lg);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rules-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rules-card--winston {
  border-left: 4px solid var(--color-accent, #B88A3A);
}

.rules-card--active {
  border-left: 4px solid var(--color-success, #3D8B6A);
}

.rules-card--inactive {
  opacity: 0.85;
}

.rules-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rules-card-header h3 {
  margin: 0;
  font-size: var(--type-md);
  font-weight: 600;
}

.rules-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--type-xs);
  font-weight: 600;
  border-radius: 4px;
  background: var(--color-chip-bg, #1f2937);
  color: var(--color-chip-fg, #e5e7eb);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rules-badge--winston {
  background: #B88A3A;
  color: #fff;
}

.rules-badge--active {
  background: #3D8B6A;
  color: #fff;
}

.rules-card-desc {
  margin: 0;
  color: var(--color-text);
  font-size: var(--type-sm);
  line-height: 1.5;
}

.rules-card-rule {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--type-xs);
  color: var(--color-text-muted);
  background: var(--color-codeblock-bg, #0b1220);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.rules-card-rule strong {
  color: var(--color-text);
  font-weight: 600;
}

.rules-coach-link {
  font-size: var(--type-xs);
  color: var(--color-link, #60a5fa);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.rules-coach-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.rules-coach-conflict {
  background: var(--color-codeblock-bg, #0b1220);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  line-height: 1.5;
}

.rules-coach-conflict strong {
  display: block;
  margin-bottom: var(--space-2);
}

.rules-coach-ref {
  color: var(--color-text-muted);
  margin: var(--space-1) 0;
  font-style: italic;
}

.rules-coach-explain {
  margin: var(--space-2) 0;
  line-height: 1.55;
}

.rules-coach-suggest {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.rules-coach-clean {
  font-size: var(--type-sm);
  color: var(--color-success, #3D8B6A);
  margin: var(--space-2) 0;
}

.rules-card-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rules-primary,
.rules-secondary,
.rules-danger {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--type-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.rules-primary {
  background: var(--color-accent, #B88A3A);
  color: #fff;
}

.rules-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.rules-danger {
  background: transparent;
  color: var(--color-danger, #DC2626);
  border-color: var(--color-danger, #DC2626);
}

.rules-author-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.rules-author-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
}

.rules-author-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--type-xs);
  color: var(--color-text-muted);
  flex: 1 1 200px;
}

.rules-author-row input,
.rules-author-row select {
  padding: var(--space-2) var(--space-3);
  background: var(--color-input-bg, #0b1220);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--type-sm);
}

@media (max-width: 759px) {
  .rules-screen {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
  .rules-author-row {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ── NL rule composer (#319, kit RuleComposer) — plain-English → draft →
   pre-fills the structured author form. Net-additive above the form. ── */
.rc-composer { background: var(--ai-soft); border: 1px solid var(--ai-line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.rc-composer-head { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--type-sm); color: var(--ink-2); line-height: 1.45; margin-bottom: var(--space-3); }
.rc-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ai); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--type-sm); }
.rc-input-row { display: flex; gap: var(--space-2); }
.rc-input { flex: 1; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--type-base); background: var(--surface); }
.rc-input:focus { outline: 2px solid var(--ai); outline-offset: 1px; border-color: var(--ai); }
.rc-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.rc-chip { font-size: var(--type-xs); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 4px 11px; color: var(--ink-3); cursor: pointer; }
.rc-chip:hover { border-color: var(--ai-line); color: var(--ai); }
.rc-draft-slot { margin-top: var(--space-4); }
.rc-draft { background: var(--surface); border: 1px solid var(--ai-line); border-radius: var(--radius-md); padding: var(--space-4); }
.rc-draft-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.rc-draft-badge { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-bold); color: var(--ai); }
.rc-conf { font-size: var(--type-xs); font-weight: var(--weight-semi); padding: 2px 9px; border-radius: var(--radius-full); }
.rc-conf-high { background: var(--money-up-soft); color: var(--money-up); }
.rc-conf-med  { background: var(--warn-soft); color: var(--warn); }
.rc-conf-low  { background: var(--surface-3); color: var(--ink-muted); }
.rc-rule-body { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.rc-clause { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--type-sm); }
.rc-clause-k { flex-shrink: 0; width: 56px; font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--ink-muted); }
.rc-clause-k.then { color: var(--money-up); }
.rc-clause-k.scope { color: var(--ai); }
.rc-scope { font-size: var(--type-xs); font-weight: var(--weight-semi); background: var(--ink-faint); color: #fff; padding: 2px 9px; border-radius: var(--radius-full); }
.rc-draft-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }