/* automatisierung — see kronenwerk.css for the tokens these rules read.
 *
 * Three screens share this part: standing orders, the reminder rule, and the rule
 * engine. They share it because they are one idea — what this product does when nobody
 * is watching — and because everything below is the same two shapes: a schedule read as
 * a list of dates, and a rule read as a sentence.
 *
 * Almost nothing new is invented here. The tables, notices, fields and buttons come from
 * the design system, which is the point of having one. What is here is the handful of
 * arrangements those screens need and no other screen does. */

/* The tokens these rules read, with a value on plain :root.
 *
 * Declared here rather than assumed, because a part file that reads a token it did not
 * declare renders unstyled the day the system stops defining it, and nothing errors. */
:root {
  --automatisierung-luecke: var(--raum-2, 12px);
  --automatisierung-randfarbe: var(--linie, #ddd6c9);
  --automatisierung-radius: var(--radius, 8px);
}

/* The preview of a reminder schedule: one sentence, set apart from the form that
 * produced it. Set apart deliberately — it describes what is SAVED, and a preview
 * sitting inside the form would read as a description of what is typed. */
.regel-vorschau {
  padding: var(--automatisierung-luecke) 0;
}

.regel-vorschau p {
  margin: 0;
}

/* One rule: the sentence on the left, the things you can do to it on the right.
 * Wraps rather than scrolls, because on a narrow screen the buttons belong under the
 * sentence and not off the edge of it. */
.regel-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--automatisierung-luecke);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--automatisierung-luecke) 0;
  border-bottom: 1px solid var(--automatisierung-randfarbe);
}

.regel-zeile:last-child {
  border-bottom: 0;
}

.regel-satz {
  flex: 1 1 20rem;
  min-width: 0;
}

.regel-satz p {
  margin: 4px 0 0;
}

.regel-name {
  font-weight: 600;
}

/* Each action is its own form, because each is its own act and must not ride on the
 * same submit as the others. They line up as if they were one row of buttons. */
.regel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--automatisierung-luecke);
  align-items: center;
}

.regel-knoepfe form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

/* The next few billing dates. A list and not prose: a rhythm is recognised by looking,
 * not by reading, and six dates in a column are recognised in about a second. */
.dauer-vorschau {
  margin-top: var(--automatisierung-luecke);
  padding: var(--automatisierung-luecke);
  border: 1px solid var(--automatisierung-randfarbe);
  border-radius: var(--automatisierung-radius);
}

.dauer-vorschau h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.dauer-termine {
  margin: 0;
  padding-left: 1.1rem;
}

.dauer-termine li {
  margin: 2px 0;
}