/* Awinel guided-workflow — phase rail + "what's next" (BC-3, additive).
   Derived state from workflow-engine.js over the selected batch's events. Colors use the Forward
   tokens (tokens.css). NOTE: "done" nodes use --forward-success (sage) NOT --forward-trust (teal) —
   teal is reserved for signed/verified/anchored trust affordances only. */
#phase-rail { margin: 2px 0 12px; }

.pr-rail {
  display: flex; align-items: flex-start;
  padding: 12px 6px 8px;
  background: var(--forward-surface, #fff);
  border: 1px solid var(--forward-border-subtle, #EDEBE7);
  border-radius: 12px;
}
.pr-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.pr-node {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--forward-surface, #fff);
  border: 2px solid var(--forward-border-medium, #D9D5CE);
  z-index: 1;
}
.pr-step.done .pr-node { background: var(--forward-success, #5E8C61); border-color: var(--forward-success, #5E8C61); }
.pr-step.cur .pr-node  { background: var(--forward-accent, #B85C3F); border-color: var(--forward-accent, #B85C3F); box-shadow: 0 0 0 4px #F7EAE4; }
.pr-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; text-align: center;
  color: var(--forward-text-tertiary, #8A8578);
}
.pr-step.done .pr-lbl { color: #3F6A43; }
.pr-step.cur .pr-lbl  { color: var(--forward-accent-active, #8F4229); }
/* connector line between nodes */
.pr-step::before {
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px;
  background: var(--forward-border-medium, #D9D5CE); z-index: 0;
}
.pr-step:first-child::before { display: none; }
.pr-step.done::before, .pr-step.cur::before { background: var(--forward-success, #5E8C61); }

/* milestone node (e.g. "Start") — a smaller transition marker, not a dwell phase */
.pr-step.milestone { flex: 0.7; }
.pr-step.milestone .pr-node { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }
.pr-step.milestone .pr-lbl { font-size: 9.5px; font-style: italic; font-weight: 500; }

/* Level-2 sub-step line (the current phase's steps, e.g. Pyrolize: flame cap → add layers → ¾ coals) */
.pr-substeps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 4px 2px; margin-top: 2px;
}
.pr-sub {
  font-size: 11px; font-weight: 500; color: var(--forward-text-tertiary, #8A8578);
  padding: 3px 9px; border-radius: 999px; background: var(--forward-bg-canvas, #FAFAF8);
  border: 1px solid var(--forward-border-subtle, #EDEBE7); white-space: nowrap;
}
.pr-sub.done { color: #3F6A43; }
.pr-sub.cur  { color: #fff; background: var(--forward-accent, #B85C3F); border-color: var(--forward-accent, #B85C3F); }
.pr-sub .loopn { opacity: 0.85; font-variant-numeric: tabular-nums; }
.pr-sub-arrow { color: var(--forward-text-disabled, #B8B4A8); font-size: 11px; }

/* "what's next" hint */
.pr-next {
  display: flex; gap: 9px; align-items: flex-start;
  background: #F7EAE4; border-radius: 11px; padding: 9px 11px; margin-top: 8px;
}
.pr-next.done { background: var(--forward-success-soft, #E7EFE7); }
.pr-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--forward-accent-active, #8F4229); background: #fff;
  border-radius: 6px; padding: 2px 6px; margin-top: 1px; white-space: nowrap;
}
.pr-next.done .pr-tag { color: #3F6A43; }
.pr-txt { font-size: 12.5px; line-height: 17px; color: #5A3A2C; }
.pr-next.done .pr-txt { color: #3F6A43; }

/* per-batch (= per-bin) phase chip on the batch strip — the derived stage, colored. */
.bchip-label { font-weight: 600; }
.bchip-phase { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.bchip-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.ph-prep { background: var(--forward-warning-soft, #F6EBD7); color: #946115; } .ph-prep .bchip-dot { background: var(--forward-warning, #C8892E); }
.ph-pyrolize { background: #F3E4DD; color: #A54E33; } .ph-pyrolize .bchip-dot { background: #A54E33; }
.ph-stop { background: var(--forward-info-soft, #E2E9EF); color: #3F607E; } .ph-stop .bchip-dot { background: #3F607E; }
.ph-store { background: var(--forward-success-soft, #E7EFE7); color: #3F6A43; } .ph-store .bchip-dot { background: var(--forward-success, #5E8C61); }
.ph-closed { background: var(--forward-border-subtle, #EDEBE7); color: var(--forward-text-tertiary, #8A8578); } .ph-closed .bchip-dot { background: var(--forward-text-tertiary, #8A8578); }

/* off-phase pill on a timeline row — an event logged outside the guided step (annotation, not an error) */
.ev-offphase {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--forward-warning, #C8892E); background: var(--forward-warning-soft, #F6EBD7);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

/* ---- Prep setup checklist ---- */
.wf-cl {
  margin-top: 10px; padding: 12px; border-radius: 12px;
  background: var(--forward-surface, #fff); border: 1px solid var(--forward-border-subtle, #EDEBE7);
}
.wf-cl-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.wf-cl-count { font-size: 12px; font-weight: 600; color: var(--forward-text-tertiary, #8A8578); font-variant-numeric: tabular-nums; }
.wf-cl-group { margin-bottom: 8px; }
.wf-cl-gname { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--forward-text-tertiary, #8A8578); margin: 4px 2px 5px; }
.wf-cl-item {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 5px;
  border-radius: 9px; background: var(--forward-bg-canvas, #FAFAF8);
  border: 1px solid var(--forward-border-subtle, #EDEBE7); font-size: 14px;
}
.wf-cl-item.on { background: var(--forward-success-soft, #E7EFE7); border-color: #BCD6BD; }
.wf-cl-item.on span:last-child { color: #3F6A43; }
.wf-cl-box {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--forward-border-medium, #D9D5CE); color: #fff; font-size: 14px; font-weight: 700;
}
.wf-cl-item.on .wf-cl-box { background: var(--forward-success, #5E8C61); border-color: var(--forward-success, #5E8C61); }
.wf-cl-record {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; text-align: center; margin-top: 6px;
  padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--forward-accent-active, #8F4229); background: #F7EAE4;
}
.wf-cl-record:active { transform: scale(0.99); }
/* Collapsed "recorded ✓" state — the checklist behaves like a dismissed sub-screen after recording.
   Deliberately WITHOUT .wf-cl's surface/border/radius: this line sits immediately above the timeline,
   and card chrome made one recorded event look like a second timeline entry. It is rail chrome — a
   completed step — so it reads as part of the rail and stops competing with the row below it. */
.wf-cl-line {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 2px;
  font-size: 12.5px; font-weight: 600; color: #3F6A43;
}
.wf-cl-line-lbl { flex: 1 1 auto; }
.wf-cl-check { color: var(--forward-success, #5E8C61); font-weight: 700; }

/* ---- phase-scoped capture grid ----
   When a workflow phase is active, the flat action grid shows only the phase's tappable actions; the
   rest hide behind the "More events…" toggle. */
.awb-btn.wf-scoped-hidden { display: none; }

/* "More events…" toggle — a full-width cell inside the docked grid (always visible with the buttons). */
.wf-more-cell {
  all: unset; box-sizing: border-box; cursor: pointer;
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--forward-accent-active, #8F4229);
  padding: 9px; border-radius: 9px; background: #F7EAE4;
}
.wf-more-cell svg { width: 16px; height: 16px; flex: none; }
.wf-more-cell svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wf-more-cell:active { transform: scale(0.99); }
.wf-more-cell.hidden { display: none; }