/* Automations list + builder · page styles on DS v4 + app.css */

.au-stats { margin-block-end: var(--space-5); }
.au-tabs { margin-block-end: var(--space-4); }
.au-filter { margin-block-end: var(--space-3); --gap: 8px; }
.au-search { width: 260px; }

/* rules list */
.au-rules { display: grid; gap: var(--space-2); }
.au-rule {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.au-rule:hover { border-color: var(--border-medium); }
.au-rule.is-off .recipe { color: var(--text-muted); }
.au-rule.is-off .recipe .tok { color: var(--text-secondary); border-block-end-color: var(--border-medium); }
.au-rule-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.au-rule .recipe { margin: 0; line-height: 1.9; font-size: var(--text-base); }
.au-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-muted); font-size: var(--text-sm); }
.au-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.au-meta svg { width: 14px; height: 14px; }
.au-rule-end { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.au-state { font-size: var(--text-sm); color: var(--text-muted); min-width: 44px; text-align: end; }
.au-rule:not(.is-off) .au-state { color: var(--success-text); font-weight: var(--weight-semibold); }

/* templates */
.au-tpl-group + .au-tpl-group { margin-block-start: var(--space-6); }
.au-tpl-h { display: flex; align-items: center; gap: 8px; margin-block-end: var(--space-3); font-size: var(--text-md); }
.au-tpl-h svg { width: 18px; height: 18px; color: var(--text-muted); }
.au-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.au-tpl { display: flex; flex-direction: column; gap: var(--space-3); }
.au-tpl .recipe { margin: 0; flex: 1; font-size: var(--text-base); line-height: 1.9; }
.au-tpl-foot { display: flex; justify-content: flex-end; }

/* log */
.au-guard { margin-block-end: var(--space-4); }
#logBody .badge svg { width: 12px; height: 12px; }
#logBody .td-sub { display: block; margin-block-start: 4px; font-size: var(--text-xs); color: var(--text-muted); }

/* ── builder ─────────────────────────────────────────────── */
.ab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.ab-canvas .flow { max-width: none; margin: 0; }
.ab-step-title { font-weight: var(--weight-bold); font-size: var(--text-md); }
.ab-step-sub { color: var(--text-muted); font-size: var(--text-sm); margin-inline-start: auto; }
.flow-kw.st-blue { --st: var(--st-blue); } .flow-kw.st-amber { --st: var(--st-amber); color: #221600; } .flow-kw.st-green { --st: var(--st-green); }

.ab-triggers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.ab-trig {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: var(--text-base-sm); cursor: pointer; text-align: start;
}
.ab-trig svg { width: 16px; height: 16px; flex-shrink: 0; }
.ab-trig:hover { border-color: var(--border-medium); color: var(--text-primary); }
.ab-trig[aria-checked="true"] { border-color: var(--accent); background: var(--accent-glow-md); color: var(--accent-text); font-weight: var(--weight-semibold); }
.ab-config { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-card); font-size: var(--text-base-sm); }
.ab-config .input { width: auto; }
.ab-config .ab-num { width: 72px; }

.ab-conds { display: grid; gap: 8px; }
.ab-cond { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.ab-join { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted); text-align: center; }
.ab-empty { color: var(--text-muted); font-size: var(--text-base-sm); padding: 8px 2px; }

.ab-actions { display: grid; gap: 10px; }
.ab-action { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 10px; background: var(--bg-card); }
.ab-action-head { display: flex; align-items: center; gap: 8px; }
.ab-action-head .ab-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-card-hover); font-size: var(--text-xs); font-weight: var(--weight-bold); flex-shrink: 0; }
.ab-action-head select { flex: 1; }
.ab-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.ab-fields .input-label { font-size: var(--text-xs); }
.ab-var { font-family: var(--font-code); font-size: var(--text-xs); color: var(--accent-text); }

.ab-side { position: sticky; top: var(--space-4); display: grid; gap: var(--space-4); }
.ab-side .card { display: grid; gap: var(--space-3); }
.ab-preview { background: var(--bg-card); border: 1px dashed var(--border-medium); border-radius: var(--radius-md); padding: 12px 14px; }
.ab-preview .recipe { margin: 0; font-size: var(--text-base); line-height: 1.9; }
.ab-test-out { display: grid; gap: 6px; font-size: var(--text-base-sm); }
.ab-test-out li { display: flex; align-items: flex-start; gap: 8px; }
.ab-test-out svg { width: 15px; height: 15px; margin-block-start: 3px; flex-shrink: 0; }
.ab-test-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ab-head-actions { display: flex; align-items: center; gap: 10px; }
.ab-head-actions .switch-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base-sm); color: var(--text-secondary); }

@container page (max-width: 900px) {
  .ab-layout { grid-template-columns: 1fr; }
  .ab-side { position: static; }
}
@container page (max-width: 560px) {
  .au-rule { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .au-rule-end { width: 100%; justify-content: flex-end; }
  .au-search { width: 100%; }
  .ab-cond { grid-template-columns: 1fr 1fr 30px; }
  .ab-cond .ab-join { grid-column: 1 / -1; text-align: start; }
  .ab-cond .ab-cval { grid-column: 1 / 3; }
}
.au-nowrap { white-space: nowrap; }
.au-rule-name { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-semibold); }
.ab-back { align-self: flex-start; justify-self: start; width: fit-content; margin-block-end: var(--space-2); }