/* Automatisering (au-) */
.au-root { min-height: 320px; }
.au-tabs .au-count { margin-left: 2px; font-size: 11px; padding: 0 6px; }
.au-tabs button.on .au-count { background: var(--signal-soft); color: var(--signal); }
.au-head { margin-bottom: 14px; align-items: center; }
.au-intro { margin: 0; flex: 1 1 260px; }
.au-loading { display: grid; place-items: center; padding: 56px 0; }
.au-foot { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }

/* Lijst met regels */
.au-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-rule { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); transition: border-color .15s; }
.au-rule:hover { border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); }
.au-rule.off .au-rule-main { opacity: .6; }
.au-rule-switch { padding-top: 2px; }
.au-rule-main { min-width: 0; }
.au-rule-name { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.au-rule-name strong { overflow-wrap: anywhere; }
.au-emoji { font-size: 16px; line-height: 1; }
.au-sentence-text { margin: 0 0 4px; color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.au-rule-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Editor */
.au-editor { display: flex; flex-direction: column; gap: 16px; }
.au-ed-head { gap: 10px; }
.au-ed-head h3 { font-size: 18px; }
.au-name-row { display: flex; gap: 12px; align-items: flex-start; }
.au-name-row > .label:last-child { flex: 1; }
.au-icon-in { width: 72px !important; text-align: center; font-size: 18px !important; }
.au-section { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px; background: var(--surface); }
.au-step { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.au-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--signal-soft); color: var(--signal); font-size: 12px; font-weight: 700; font-family: var(--font-ui); }
.au-opt { font-weight: 400; font-family: var(--font-ui); }
.au-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.au-word { color: var(--ink-2); font-size: 14px; }
.au-inline { width: auto !important; max-width: 100%; min-height: 32px !important; padding: 5px 8px !important; font-size: 14px; }
select.au-inline { padding-right: 26px !important; }
.au-grow { flex: 1 1 180px; min-width: 140px; }
.au-num { width: 76px !important; }
.au-time { width: 110px !important; }
.au-hint { margin: 8px 0 0; }
.au-tight { gap: 8px; }
.au-check { margin-top: 2px; }
.au-adder { margin-top: 10px; color: var(--ink-2); border-style: dashed !important; background: transparent !important; }

/* Voorwaarden */
.au-conds { display: flex; flex-direction: column; align-items: flex-start; }
.au-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; width: 100%; }
.au-cond + .au-cond { border-top: 1px dashed var(--line); }
.au-x { margin-left: auto; color: var(--ink-3); }

/* Acties */
.au-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-action { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; }
.au-action.invalid { border-color: var(--red); }
.au-action-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 5px; border-radius: 6px; background: var(--surface); color: var(--ink-3); font-size: 12px; font-weight: 700; }
.au-action-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.au-action-body .input { background: var(--surface); }
.au-action-body .form-error { margin: 0; padding: 6px 10px; }
.au-action-ctrl { display: flex; gap: 2px; }
.au-action-ctrl .icon-btn:disabled { opacity: .35; cursor: default; }
.au-type { font-weight: 600; }

.au-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.au-var { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 6px; padding: 1px 6px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; }
.au-var:hover { border-color: var(--signal); color: var(--signal); }

.au-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.au-swatch { width: 28px; height: 22px; border-radius: 5px; border: 0; cursor: pointer; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.au-swatch.none { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.au-swatch.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.au-swatch:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Voorbeeldzin */
.au-preview { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-panel); background: var(--signal-soft); color: var(--signal); }
.au-preview .ic { flex-shrink: 0; margin-top: 2px; }
.au-preview-text { margin: 2px 0 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.au-ed-foot { position: sticky; bottom: 0; padding-top: 10px; background: var(--surface); border-top: 1px solid var(--line); margin: 0 -20px -20px; padding: 12px 20px; }

@media (max-width: 640px) {
  .au-rule { grid-template-columns: auto 1fr; }
  .au-rule-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .au-action { grid-template-columns: 1fr; }
  .au-action-n { display: none; }
  .au-action-ctrl { justify-content: flex-end; order: -1; }
  .au-name-row { flex-wrap: wrap; }
  .au-section { padding: 12px; }
  .au-inline { flex: 1 1 auto; }
  .au-num { flex: 0 0 76px; }
}