/* automations/module.css: the rule builder and the run log.
   A condition tree needs to LOOK nested or ALL-of and ANY-of read the same,
   so a group carries a left rule and an indent. Everything reads the theme
   tokens rather than naming a colour. */

.auto-builder{ display:grid; grid-template-columns:1fr; gap:20px; }
/* Two columns only where there is genuinely room for two. */
@media (min-width:1000px){ .auto-builder{ grid-template-columns:1fr 1fr; } }
/* min-width:0 on a grid child, or a long condition row refuses to shrink. */
.auto-col{ min-width:0; }
.auto-col-head{ margin:0 0 10px; font-size:15px; }

.auto-group{ border:1px solid var(--line); border-radius:var(--radius); padding:10px; margin-bottom:8px; background:var(--paper); }
/* The root has no border of its own: the modal already draws that edge. */
.auto-group-root{ border:none; padding:0; background:transparent; }
.auto-group-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.auto-group-head .seg{ flex:0 0 auto; }
.auto-group-head .seg button{ flex:0 0 auto; padding:5px 10px; }
/* The indent plus the rule is what makes nesting legible. */
.auto-group .auto-group{ margin-left:12px; border-left:3px solid var(--line-strong); }
.auto-group-foot{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

.auto-condition{ border:1px solid var(--line); border-radius:var(--radius); padding:8px; margin-bottom:6px; background:var(--paper-raised); }
.auto-condition:last-child{ margin-bottom:0; }
/* Wraps rather than scrolling: a condition is a sentence. min-width:0 on
   EVERY control, or a number input's intrinsic width pushes the remove
   button onto a line of its own. */
.auto-condition-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.auto-condition-row + .auto-condition-row{ margin-top:6px; }
.auto-condition-row select{ flex:1 1 140px; min-width:0; width:auto; }
.auto-condition-row .auto-op{ flex:0 1 120px; min-width:0; }
.auto-condition-row .auto-val{ flex:0 1 90px; min-width:0; width:auto; }
.auto-condition-row .auto-days{ flex:0 0 70px; min-width:0; width:auto; }
.auto-condition-row > .btn.small{ flex:0 0 auto; margin-left:auto; }
.auto-condition-row input[type="date"]{ flex:0 1 150px; width:auto; }
.auto-window, .auto-extra{ padding-left:2px; }
.auto-window select{ flex:0 1 190px; }
.auto-inline-label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.auto-inline-label input, .auto-inline-label select{ margin:0; width:auto; }

.auto-action{ border:1px solid var(--line); border-radius:var(--radius); padding:10px; margin-bottom:8px; background:var(--paper); }
.auto-action-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.auto-action-body{ display:flex; flex-direction:column; gap:6px; }
.auto-action-body input, .auto-action-body textarea, .auto-action-body select{ width:100%; }
.auto-action-body .auto-inline-label select, .auto-action-body .auto-inline-label input{ width:auto; }

.auto-log-row{ border-bottom:1px solid var(--line); padding:8px 0; }
.auto-log-row:last-child{ border-bottom:none; }
.auto-runlog-strip{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; }
.auto-runlog-rule{ border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; background:var(--paper); }

/* .hint carries a generous top margin, right for one note under a field and
   far too much once per condition. Scoped to this builder. */
.auto-condition .hint, #auto-actions .hint, #auto-scope ~ .hint{ margin-top:6px; }

@media (max-width:760px){
  .auto-group-foot .btn.small, .auto-condition-row .btn.small{ min-height:32px; }
  .auto-condition-row select, .auto-condition-row .auto-op, .auto-condition-row .auto-val{ flex:1 1 100%; }
}