/* Automations: overview, builder, runs. Tokens from app.css only. */

.au-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
.au-col { display: grid; gap: var(--s5); min-width: 0; }
.au-h3 { font: 600 15px/1.3 var(--font-display); margin: var(--s4) 0 var(--s2); }
.au-h3:first-child { margin-top: 0; }
.au-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px;
  background: var(--surface-3); color: var(--muted); font: 600 11.5px/1 var(--font); }
.au-page { display: grid; gap: var(--s5); }
.au-page > * { margin: 0; }
.au-page [hidden] { display: none !important; }

/* lists of automations */
.au-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.au-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); transition: border-color .12s, background .12s; }
.au-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.au-item-main { flex: 1 1 auto; min-width: 0; }
.au-item-name { font: 600 15px/1.3 var(--font-display); color: var(--text); }
.au-item-summary { margin: 4px 0 var(--s2); color: var(--text-2); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.au-item-meta { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.au-item-go { color: var(--faint); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; flex: none; }
.au-item-go:hover { background: var(--surface-3); color: var(--text); }
.au-scope { background: var(--surface-3); color: var(--text-2); }
.au-empty-line { margin: 0; }

.au-attention { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.au-attn-list > li { flex-wrap: wrap; padding-left: 0; padding-right: 0; }
.au-recent > li { justify-content: space-between; padding: var(--s3) var(--s4); }
.au-recent a { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.au-recent-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-bullets { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: var(--s2); line-height: 1.5; }
.au-rules { background: var(--surface-2); }

/* templates */
.au-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.au-template { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); margin: 0; }
.au-template h3 { margin: 0; font: 600 14.5px/1.35 var(--font-display); }
.au-template p { margin: 0; }
.au-template-sentence { color: var(--text-2); border-left: 2px solid var(--lavender); padding-left: var(--s3); line-height: 1.5; }
.au-template-foot { margin-top: auto; padding-top: var(--s2); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }

/* step indicator on the new page */
.au-steps-nav { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }
.au-steps-nav li { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) 6px 6px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 500; }
.au-steps-nav li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3);
  font: 600 12px/1 var(--font); }
.au-steps-nav li[aria-current] { color: var(--text); border-color: var(--accent); }
.au-steps-nav li[aria-current] span { background: var(--accent); color: var(--on-primary); }

/* the plain-language sentence */
.au-sentence-card { background: var(--hero-bg); border-color: var(--hero-border); }
.au-sentence { font: 500 20px/1.5 var(--font-display); letter-spacing: -.01em; margin: var(--s2) 0 var(--s4); color: var(--text); max-width: 72ch; }
.au-meta-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.au-controls { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--border); }
.au-more { position: relative; }
.au-more > summary { list-style: none; cursor: pointer; }
.au-more > summary::-webkit-details-marker { display: none; }
.au-more { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.au-more-menu { display: flex; gap: var(--s2); flex-wrap: wrap; }
.au-more-menu form { margin: 0; }

.au-danger-text { color: var(--danger); }

/* builder parts */
.au-builder { display: grid; gap: var(--s4); }
.au-builder > .card + .card { margin-top: 0; }
.au-part .card-head h2 { font-size: 17px; }
.au-edit > summary { cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: 14px; padding: 4px 0; width: fit-content; }
.au-edit[open] > summary { margin-bottom: var(--s4); }
.au-edit + .au-edit { margin-top: var(--s3); }
.au-details-card { padding: var(--s4) var(--s5); }
.au-details-card[open] { padding-bottom: var(--s5); }

.au-choice { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.au-choice-scope { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.au-choice > legend { margin-bottom: var(--s2); }
.au-option { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--border-strong); border-radius: var(--r);
  cursor: pointer; background: var(--surface); }
.au-option:hover { border-color: var(--faint); }
.au-option input { margin-top: 3px; accent-color: var(--violet); width: 17px; height: 17px; flex: none; }
.au-option > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.au-option:has(input:focus-visible) { box-shadow: var(--focus); }
.au-panel { display: grid; gap: var(--s4); padding: var(--s4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.au-js .au-panel[hidden] { display: none; }
.au-days { border: 0; margin: 0; padding: 0; display: flex; gap: var(--s3); flex-wrap: wrap; }
.au-days legend { margin-bottom: var(--s2); }
.au-narrow { max-width: 220px; }
.au-carries dl { margin-top: var(--s3); }
.au-fieldchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.au-conds > li, .au-checks > li { padding-left: 0; padding-right: 0; min-height: 44px; flex-wrap: wrap; }
.au-conds > li { justify-content: space-between; }
.au-checks > li { gap: var(--s2) var(--s3); }
.au-match { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: var(--s3) 0; }
.au-match select { width: auto; min-width: 200px; }
.au-cond-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }

/* steps */
.au-flow { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); position: relative; }
.au-flow > li { position: relative; }
.au-flow > li + li::before { content: ""; position: absolute; left: 21px; top: calc(-1 * var(--s3)); height: var(--s3); border-left: 2px solid var(--border-strong); }
.au-step { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); }
.au-step-num { flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent-text); font: 600 12px/1 var(--font); }
.au-step-body { flex: 1 1 auto; min-width: 0; }
.au-step-title { font-weight: 600; line-height: 1.4; padding-top: 2px; }
.au-step-when { display: flex; gap: 6px; align-items: center; color: var(--accent-text); margin-top: 4px; }
.au-step-text { margin-top: 4px; overflow-wrap: anywhere; }
.au-step-actions { display: flex; gap: 2px; flex: none; }
.au-step-actions .btn { min-width: 32px; }
.au-group { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: var(--s3); background: var(--surface-2); }
.au-group-head { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.au-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.au-branch { display: grid; gap: var(--s2); align-content: start; }
.au-step-branch .au-step-num { background: var(--surface-3); color: var(--text-2); }
.au-secret { margin-top: var(--s2); }
.au-wait { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); margin: 0; }
.au-inline-fields { display: flex; gap: var(--s2); }
.au-inline-fields .input:first-child { max-width: 100px; }
.au-js [data-au-uses][hidden] { display: none !important; }
.au-step-form .au-when { margin-top: 0; }
.au-busy { opacity: .6; pointer-events: none; }

/* test run */
.au-test { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.au-test-form { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--s4); }
.au-test-form .field { flex: 1 1 260px; }
.au-part .au-test-form { margin-top: 0; }

/* runs */
.au-runs td { vertical-align: top; }
.au-err { max-width: 46ch; margin-top: 4px; }
.au-timeline > li { align-items: flex-start; gap: var(--s3); }
.au-tl-path { flex: none; min-width: 40px; font: 600 12px/24px var(--font-mono); color: var(--muted); }
.au-tl-body { flex: 1 1 auto; min-width: 0; }
.au-tl-body p { margin: 4px 0 0; overflow-wrap: anywhere; }
.au-tl-head { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.au-depth-2 { padding-left: calc(var(--s5) + var(--s6)) !important; }
.au-versions > li { display: block; }
.au-version-head { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.au-version-sentence { margin: 6px 0 0; color: var(--text-2); line-height: 1.5; }

@media (max-width: 1080px) {
  .au-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .au-choice { grid-template-columns: minmax(0, 1fr); }
  .au-cond-form { grid-template-columns: minmax(0, 1fr); }
  .au-sentence { font-size: 17.5px; }
  .au-step { flex-wrap: wrap; }
  .au-step-actions { width: 100%; justify-content: flex-end; }
  .au-depth-2 { padding-left: var(--s5) !important; }
  .au-match select { min-width: 0; width: 100%; }
}
.au-edit > .hint, .au-edit > p.hint { display: block; margin: var(--s3) 0 0; font-size: 12.5px; color: var(--muted); }
.au-runs { min-width: 560px; }