/* ============================================================================
   STEPS - the Steps tab of a process setup.

   THE SAME RULE AS THE HR FLOW: a step is a line in a sequence, not a card in
   a grid. Cards say the items are independent and interchangeable; these are
   the order a piece of work happens in.

   WHAT IS DIFFERENT HERE, and it is why this file exists rather than reusing
   .hf-step. Every step on this tab carries three lines that an HR flow step
   does not: whether the mail system holds its wording, why it is switched off,
   and what it has actually sent this week. Those lines are the point of the
   screen, so they get their own weight rather than being squeezed into the
   step's subtitle.

   A SWITCHED-OFF STEP IS DIMMED, NOT HIDDEN OR REDDENED. Off is the normal
   state of a step waiting for a push, which happens within a minute, so
   dressing it in the danger scale would cry wolf on every new step somebody
   writes. The BLOCKED line carries the colour, because that is the sentence
   with something to do in it.
   ========================================================================= */

.st-card .card-note {
  color: var(--c-text-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.st-blurb { color: var(--c-text-2); max-width: 74ch; }

.st-error {
  padding: var(--s-4);
  border-left: 3px solid var(--c-danger);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
}

/* ------------------------------------------------------------- readiness */

/* Facts, not warnings. Each line is something Arc knows and the builder does
   not, and every one of them is a reason a step would be stored switched off,
   said BEFORE they write it. */
.st-ready {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  border-left: 3px solid var(--c-border-strong);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  max-width: 82ch;
  display: grid;
  gap: var(--s-1);
}

/* ----------------------------------------------------------------- steps */

.st-steps {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.st-step {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  border-left: 3px solid var(--c-border);
  border-radius: var(--r-sm);
}
.st-step:hover { background: var(--c-hover); }

/* OFF IS MARKED BY THE RULE AND THE CHIP, NOT BY OPACITY, and that is a
   measurement rather than a preference. A 0.72 opacity on this list took
   every secondary line from about 8:1 to 3.88:1 against the card in the
   saffron look, under the 4.5:1 the geometry audit enforces, because opacity
   composites the text toward the background. Off is also the NORMAL state of a
   step waiting for a push, so the quiet has to come from the left rule going
   neutral rather than from the sentences getting harder to read. */
.st-step[data-off="no"] { border-left-color: var(--c-accent); }

.st-step-main { display: grid; gap: var(--s-1); min-width: 0; flex: 1 1 26rem; }

.st-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.st-step-label { font-weight: var(--t-semibold); }

.st-step-when, .st-step-does, .st-step-wording, .st-step-activity {
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  /* A long channel name or a long subject wraps rather than clipping: the
     geometry audit fails clipped text with no title attribute, and a subject
     line is exactly the text somebody needs to read in full. */
  overflow-wrap: anywhere;
}

.st-step-does { display: flex; align-items: flex-start; gap: var(--s-2); }
.st-plain { font-family: var(--f-mono); font-size: var(--t-xs); }
.st-to { color: var(--c-text-3); }

.st-mini { width: 1em; height: 1em; flex: none; margin-top: 0.15em; }

.st-step-blocked {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--c-text);
  font-size: var(--t-sm);
  line-height: var(--t-body);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--c-warn, var(--c-border-strong));
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

.st-step-wording { display: flex; align-items: flex-start; gap: var(--s-2); }

.st-step-activity { font-variant-numeric: tabular-nums; }
.st-last-error { color: var(--c-text-3); }

.st-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  flex: 0 0 auto;
}

.st-add { margin-top: var(--s-4); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* At phone width the actions sit under the step rather than beside it, so a
   44px target never overlaps the text it belongs to. */
@media (max-width: 720px) {
  .st-step { flex-direction: column; }
  .st-step-actions { width: 100%; }
}