/* ==========================================================================
   Orders — Status Workflow Manager (orders-workflow.html)

   Spec: build/pages.md §12

   Only what is this page's own: the crumb, the in-page tab counts, the status
   tables' column shares, the family dots on the configured path, the setting
   rows, the hold blocks, the rule rows and the dialogs' condition grids.
   Everything another Orders page also says — the path stepper, the readings,
   the hold word, the key–value grid, the two-sided choice, the saved-view
   rows — comes from css/pages/orders.css and is used, never redefined.
   Tokens only; radius never over 7px; nothing under 10px.
   ========================================================================== */

/* ---------- Header ------------------------------------------------------------
   A crumb back to the register over the page name, as the quote detail draws
   its trail: one grey line, the current page in the muted ink after a dot. */
.owf-crumb { margin: 0 0 6px; }
.owf-crumb a { color: var(--color-text-muted); text-decoration: none; }
.owf-crumb a:hover { color: var(--color-primary-700); }

/* ---------- The tab strip ---------------------------------------------------
   The count TRAILS the label here ("Container Path 12"); app.css expects it to
   lead and tightens the gap on its right. Same correction orders.css makes for
   the hub, said for this page's own strip. */
.owf-tabs .tab .count {
  margin-right: 0;
  margin-left: calc(4px - clamp(4px, 0.3vw + 2.2px, 8px));
}

/* ---------- Card header readings --------------------------------------------
   A reading on the right of a card header: words joined by dots, links in the
   link blue, nothing filled. It gives way before the title does. */
.owf-head-reading { font-size: 12px; color: var(--color-text-muted); justify-content: flex-end; flex: none; max-width: 100%; }
/* View | Edit sits top right of every card, the reading or actions under it. */
.owf-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; max-width: 46%; margin-left: auto; }
.owf-head-reading a { color: var(--color-primary-600); text-decoration: none; }
.owf-head-reading a:hover { color: var(--color-primary-700); }
/* The header's title block gives way before the reading or the actions do, and
   never runs into them. */
.owf-shell .card-header { gap: 12px 24px; }
.owf-shell .card-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.owf-head-actions { display: inline-flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.owf-rules-head { align-items: flex-start; }

/* ---------- The configured path ---------------------------------------------
   The editor has no "current" step, so every step wears the family its status
   behaves like on its dot, and the word stays in the page's own ink. The
   modifiers are this page's; the stepper is orders.css's. */
.owf-lead { display: flex; flex-direction: column; gap: 12px; }
.owf-path { font-size: 12px; color: var(--color-text); }
.owf-path .ord-path__step.owf-fam-success::before { background: var(--color-success); }
.owf-path .ord-path__step.owf-fam-warn::before    { background: var(--color-warn); }
.owf-path .ord-path__step.owf-fam-danger::before  { background: var(--color-danger); }
.owf-path .ord-path__step.owf-fam-info::before    { background: var(--color-info); }
.owf-path .ord-path__step.owf-fam-neutral::before { background: var(--color-neutral); }
/* The local path forks after Confirmed. The second row repeats the fork and
   the join as ghosted words so the eye can see where it rejoins. */
.owf-path--branch { margin-top: -4px; }
.owf-step-ghost { color: var(--color-text-subtle); }
.owf-step-ghost::before { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
/* The side exits stand a little apart from the path, led by a grey word. */
.owf-exits { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owf-exits__lead { font-size: 12px; color: var(--color-text-muted); }
.owf-legend { font-size: 12px; color: var(--color-text-muted); }
/* The note is a sentence under the five words, not a sixth reading: it takes
   its own line and the word before it drops its dot. */
.owf-legend__note { color: var(--color-text-subtle); flex-basis: 100%; }
.owf-legend > :nth-last-child(2)::after { content: none; }
/* A note with its icon: a sentence, not a banner. The `--plain` variant drops
   the ground for a note that follows a block of settings. */
.owf-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.owf-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-text-muted); }
.owf-note strong { color: var(--color-text); font-weight: 600; }
.owf-note a { color: var(--color-primary-600); }
.owf-note__t { min-width: 0; }
.owf-note--plain { padding: 0; margin-top: 14px; background: none; border: 0; }
.owf-note .owf-inline-num { margin: -3px 2px; }

/* ---------- The status tables -------------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. The gate column is the
   longest reading on the row; the grip and the pencil take their boxes and no
   more. Cells align to the top because every row carries a sub-line. */
.owf-table th.col-grip    { width: 6%; }
.owf-table th.col-status  { width: 21%; }
.owf-table th.col-family  { width: 12%; }
.owf-table th.col-moves   { width: 17%; }
.owf-table th.col-gate    { width: 24%; }
.owf-table th.col-notify  { width: 15%; }
.owf-table th.col-actions { width: 5%; }
.owf-table tbody td { vertical-align: top; }
.owf-table tbody td.col-grip::after { background: var(--row-mark-center); }
.owf-table tbody tr.dragging { opacity: .45; }
.owf-grip { display: inline-flex; align-items: center; gap: 6px; }
.owf-grip .reorder-num { min-width: 26px; }
/* The name is editable, so it is a field (on the control ground, §13), sized
   to the longest status rather than the column, with the sub-line under it. */
.owf-name { width: 100%; max-width: 190px; padding: 4px 8px; font-size: 13px; font-weight: 500; }
.owf-table .cell-stack { gap: 4px; }
.owf-table .cell-stack .sub { white-space: normal; line-height: 1.4; }
/* The family is a select of the five words, sized to "Waiting" plus the
   chevron (§9), and the badge under it shows the colour that choice means. */
.owf-family { width: auto; min-width: 104px; padding: 4px 28px 4px 8px; font-size: 12px; background-position: right 8px center; }
.owf-family:disabled { opacity: .7; }
.owf-badge { display: inline-flex; margin-top: 6px; }
/* Allowed moves are words; a side exit is the same word in the subtle ink. */
.owf-table .ord-reading { font-size: 13px; }
.owf-exit { color: var(--color-text-subtle); }
.owf-none { color: var(--color-text-subtle); font-style: italic; }
/* Switch first, words after (§5, §16); the sub-line under them explains. */
.owf-sw { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text); line-height: 1.4; }
.owf-sw .switch { margin-top: 0; }
.owf-sw .switch[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.owf-sub { display: block; margin-top: 4px; font-size: 11px; color: var(--color-text-subtle); line-height: 1.4; white-space: normal; }
/* The one fixed sentence on both paths: Expired alerts, releases nothing. */
.owf-fixed { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 500; color: var(--color-text-muted); line-height: 1.4; }
.owf-fixed svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.owf-row-exit td { background: var(--color-surface-alt); }

/* ---------- Setting rows ------------------------------------------------------
   Two across, each read left to right: switch, label, value, then a spacer
   track that absorbs the slack (§16). A short mark under each row, never a
   full-width hairline. */
.owf-settings-wrap { border-top: 1px solid var(--color-border); }
.owf-h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.owf-h3-sub { margin: 2px 0 10px; font-size: 12px; color: var(--color-text-subtle); }
.owf-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
.owf-setting {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, max-content) max-content 1fr;
  align-items: center; gap: 10px; padding: 8px 0;
}
.owf-setting::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 50%; height: 1px;
  background: var(--color-border-strong);
}
.owf-settings > .owf-setting:nth-last-child(-n+2)::after { display: none; }
.owf-setting__l { font-size: 12px; font-weight: 400; color: var(--color-text); }
.owf-setting__v { font-size: 12px; font-weight: 600; color: var(--color-value-tnum); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.owf-setting__num { width: 54px; padding: 3px 7px; font-size: 12px; text-align: right; }
.owf-setting__sel { width: auto; padding: 3px 26px 3px 7px; font-size: 12px; background-position: right 8px center; }
/* A number typed into the middle of a sentence. */
.owf-inline-num { display: inline-block; width: 46px; padding: 2px 6px; font-size: 12px; text-align: right; vertical-align: baseline; }

/* ---------- Holds ----------------------------------------------------------------
   Four blocks on the control ground (§13), two across. The head is the switch,
   the hold word and what it holds now; under it the key–value grid from
   orders.css with switch groups as values. */
.owf-holds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.owf-holds + .owf-note { margin-top: 14px; }
.owf-hold {
  padding: 12px 14px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  min-width: 0;
}
.owf-hold__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.owf-hold__head .ord-hold { font-size: 13px; }
.owf-hold__now { font-size: 12px; color: var(--color-text-muted); }
.owf-hold__now a { color: var(--color-primary-600); text-decoration: none; font-weight: 500; }
.owf-hold__kv { row-gap: 8px; }
.owf-hold__kv dd { font-size: 12px; line-height: 1.5; }
.owf-hold__kv dt { font-size: 12px; }
/* Fields on the control ground invert back to white (§13, three readable levels). */
.owf-hold .input,
.owf-hold .select { background: var(--color-surface); }
.owf-gate-sel { width: auto; padding: 3px 26px 3px 8px; font-size: 12px; background-position: right 8px center; }
/* A group of switches read as one value: switch, word, switch, word. */
.owf-switches { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.owf-switches .switch-field { font-size: 12px; color: var(--color-text); gap: 6px; }
.owf-switches--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.owf-warnword { color: var(--color-warn-ink); font-weight: 600; }
/* A second header inside the one card: the sub-section's title. */
.owf-subhead { border-top: 1px solid var(--color-border); }
.owf-subhead h3 { margin: 0; font-size: 14px; font-weight: 600; }
.owf-subhead .btn { flex: none; }

/* The gates table. The On switch is the last column and sits to the right. */
.owf-gates th.col-gatename { width: 24%; }
.owf-gates th.col-where    { width: 24%; }
.owf-gates th.col-who      { width: 26%; }
.owf-gates th.col-deadline { width: 18%; }
.owf-gates th.col-on       { width: 8%; }
.owf-gates tbody td { vertical-align: top; }
.owf-gates .ord-reading { font-size: 12px; }
.owf-gates td.col-on .switch { display: inline-block; vertical-align: middle; }

/* ---------- Rules -----------------------------------------------------------------
   One row per rule on the control ground: grip, number, switch, then the
   sentence (name over When · If · Then), then the actions. Off fades. */
.owf-rules { display: flex; flex-direction: column; gap: 8px; }
.owf-rule {
  display: grid; grid-template-columns: 16px 26px 34px minmax(0, 1fr) max-content;
  align-items: start; gap: 10px;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.owf-rule .reorder-grip,
.owf-rule .reorder-num,
.owf-rule > .switch { margin-top: 2px; }
.owf-rule.dragging { opacity: .45; }
.owf-rule.is-off .owf-rule__body { opacity: .62; }
.owf-rule__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.owf-rule__name { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.owf-flow { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text); line-height: 1.45; }
.owf-flow__step { display: block; }
.owf-flow__step em { font-style: normal; color: var(--color-text-muted); }
.owf-flow__step svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--color-text-muted); }
/* The three joiners are structural labels: small caps in the muted ink, a fixed
   width so the three sentences line up. */
.owf-flow__k {
  display: inline-block; width: 42px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.owf-rule__meta { font-size: 11px; color: var(--color-text-subtle); }
.owf-rule__acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.owf-rule__acts .btn { margin-right: 4px; }
/* Custom buttons: a sample of the button as it would draw, not a live one. */
.owf-btns th.col-btn   { width: 22%; }
.owf-btns th.col-shown { width: 28%; }
.owf-btns th.col-runs  { width: 34%; }
.owf-btns th.col-perm  { width: 16%; }
.owf-btns tbody td { vertical-align: top; white-space: normal; }
.owf-btn-sample { pointer-events: none; }
/* Run history: when, which rule, which order, what it did, how it went. */
.owf-runs th.col-when   { width: 11%; }
.owf-runs th.col-rule   { width: 24%; }
.owf-runs th.col-order  { width: 17%; }
.owf-runs th.col-did    { width: 36%; }
.owf-runs th.col-result { width: 12%; }
.owf-runs tbody td { vertical-align: top; white-space: normal; }
.owf-runs td.col-when { white-space: nowrap; color: var(--color-text-muted); font-size: 12px; }

/* ---------- The shell's footer ----------------------------------------------------
   Under every tab, a rule above it: the summary, the two-sided Save for, and
   Save Workflow at the right. */
.owf-foot {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.owf-foot__sum { font-size: 12px; color: var(--color-text-muted); }
.owf-foot__acts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }

/* ---------- View mode ------------------------------------------------------------------
   The page opens on the view: the order's road as cards on the control ground
   (§13), an arrow drawn between two cards, the side exits and the deliveries
   as subsections of the one card under a rule each. The family colours the
   icon's disc only (§19); the card itself stays the control ground. */
.owv .card-header { gap: 12px 24px; flex-wrap: wrap; }
.owv .card-header > div:first-child { flex: 1 1 320px; min-width: 0; }
.owv-body { display: flex; flex-direction: column; gap: 14px; }
.owv-lead { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

.owv-road {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px;
  margin: 0; padding: 0; list-style: none;
}
/* The order's road has seven steps; the delivery roads keep six columns. */
.owv-road--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.owv-step {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  cursor: pointer; transition: border-color 120ms;
}
.owv-step:hover { border-color: var(--color-border-strong); }
.owv-step:focus-visible { outline: none; border-color: var(--color-primary); }
/* The arrow: a chevron centred in the gap, level with the icon. */
.owv-road > .owv-step:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; right: -18px;
  width: 11px; height: 11px;
  border-top: 3px solid var(--color-text-subtle); border-right: 3px solid var(--color-text-subtle);
  transform: rotate(45deg);
}
.owv-step__top { display: flex; align-items: center; gap: 8px; }
.owv-step__ico {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.owv-step__ico svg { width: 14px; height: 14px; }
.owv-fam-success .owv-step__ico { background: var(--color-success-50); color: var(--color-success-ink); }
.owv-fam-warn .owv-step__ico    { background: var(--color-warn-50);    color: var(--color-warn-ink); }
.owv-fam-danger .owv-step__ico  { background: var(--color-danger-50);  color: var(--color-danger-ink); }
.owv-fam-info .owv-step__ico    { background: var(--color-info-50);    color: var(--color-info-ink); }
.owv-fam-neutral .owv-step__ico { background: var(--color-neutral-50); color: var(--color-neutral-ink); }
.owv-step__num { font-size: 18px; font-weight: 700; line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.owv-step__name { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.owv-step__what { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-muted); }
/* What moves it on, and who is involved, sit at the foot of every card so
   they line up across the road whatever the sentence above them runs to. */
.owv-step__next { display: flex; gap: 6px; margin: auto 0 0; padding-top: 6px; font-size: 12px; line-height: 1.4; color: var(--color-text); }
.owv-step__next--end { color: var(--color-text-muted); }
.owv-step__who { display: flex; gap: 6px; margin: 0; font-size: 11px; line-height: 1.4; color: var(--color-text-subtle); }
.owv-step__next svg,
.owv-step__who svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }

/* The curves. The map leaves a band above the road for skips and one under
   it for moves back; the SVG covers the map and never takes a click. A
   curve's words sit on the line with a halo of the panel's colour. */
.owv-map { position: relative; padding: 38px 0 40px; }
.owv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.owv-line,
.owv-head { fill: none; stroke: var(--color-text-subtle); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.owv-link--back .owv-line { stroke-dasharray: 5 4; }
.owv-line-label {
  font-size: 11px; fill: var(--color-text-muted);
  paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round;
}
.owv-link { transition: opacity 120ms; }
.owv-key { font-size: 11px; color: var(--color-text-subtle); margin: -6px 0 0; }
/* A road with only moves back keeps the band under it; a road with no
   curves keeps neither. */
.owv-map--under { padding: 0 0 40px; }
.owv-map--flat { padding: 0; }
/* The name over a road when a card holds two (Local: Pickup, Truck). */
.owv-lead--road { display: flex; align-items: center; gap: 6px; margin-bottom: -4px; }
.owv-lead--road svg { width: 14px; height: 14px; }

/* Holds and gates: the same card, not clickable, in a grid that fills the
   row; the from → to of a gate carries a small inline arrow. */
.owv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.owv-step--static { cursor: default; }
.owv-step--static:hover { border-color: var(--color-control-border); }
.owv-inline-ico { width: 12px; height: 12px; vertical-align: -2px; }

/* Rules, read as sentences: number, then the name with its on/off word, the
   sentence and when it last ran. Two across; an off rule fades. */
.owv-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.owv-rule {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.owv-rule__num { font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.owv-rule__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.owv-rule__name { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.owv-rule__on { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.owv-rule__text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.owv-rule__text strong { color: var(--color-text); font-weight: 600; }
.owv-rule__meta { margin: 0; font-size: 11px; color: var(--color-text-subtle); }
.owv-rule.is-off .owv-rule__body { opacity: .62; }

/* Pointing at a step: it takes the primary edge, what it reaches takes the
   move's colour (ahead green, back amber, side exit red), the rest fades. */
.owv-step { transition: opacity 120ms, border-color 120ms, box-shadow 120ms; }
.owv.is-tracing .owv-step:not(.is-src):not(.is-fwd):not(.is-back):not(.is-exit) { opacity: .35; }
.owv-step.is-src  { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.owv-step.is-fwd  { border-color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.owv-step.is-back { border-color: var(--color-warn);    box-shadow: 0 0 0 1px var(--color-warn); }
.owv-step.is-exit { border-color: var(--color-danger);  box-shadow: 0 0 0 1px var(--color-danger); border-style: solid; }
.owv.is-tracing .owv-link:not(.is-on) { opacity: .15; }
.owv-link--skip.is-on .owv-line, .owv-link--skip.is-on .owv-head { stroke: var(--color-success); }
.owv-link--back.is-on .owv-line, .owv-link--back.is-on .owv-head { stroke: var(--color-warn); }
.owv-link.is-on .owv-line-label { fill: var(--color-text); }

/* The side exits: the same card, quieter, off the road. */
.owv-exits,
.owv-deliveries { padding-top: 14px; border-top: 1px solid var(--color-border); }
.owv-exits__row { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 12px; }
.owv-step--exit { border-style: dashed; }
.owv-step--exit .owv-step__who { margin-top: auto; padding-top: 4px; }

/* The deliveries under the order: the mode, then its path as the stepper. */
.owv-dlv { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 18px; margin: 0; }
.owv-dlv dt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.owv-dlv dt svg { width: 14px; height: 14px; }
.owv-dlv dd { margin: 0; min-width: 0; }

/* One step in full. */
.owv-st-what { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--color-text); }
.owv-st-kv { row-gap: 10px; }
.owv-st-kv dd { line-height: 1.45; }

/* ---------- Diagram editor (Edit · Diagram) ---------------------------------------
   A bar (Diagram | List, + Status, Tidy Up, a hint), then the board: a dotted
   grid on the control ground (§13) with white boxes on it, the moves drawn in
   an SVG under the boxes, and a panel that floats over the board's right side
   for whatever was clicked. The board scrolls inside its frame when a
   tenant's diagram grows past the card. */
.owc-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 0; }
.owc-bar__acts { display: inline-flex; gap: 6px; }
.owc-bar__hint { font-size: 11px; color: var(--color-text-subtle); }
.owc-frame { position: relative; border: 1px solid var(--color-control-border); border-radius: var(--radius); overflow: hidden; }
.owc, .owc-view { overflow: auto; max-height: 560px; background-color: var(--color-control); }
.owc-board {
  position: relative; min-width: 100%;
  background-image: radial-gradient(var(--color-control-border) 1px, transparent 1px);
  background-size: 12px 12px;
  touch-action: none; user-select: none;
}
.owc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.owc-line, .owc-head { fill: none; stroke: var(--color-text-subtle); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.owc-move.is-back .owc-line { stroke-dasharray: 5 4; }
/* A side exit: red, dotted, quieter than a move. */
.owc-move.is-exit .owc-line { stroke: var(--color-danger); stroke-opacity: .8; stroke-dasharray: 2 3; }
.owc-move.is-exit .owc-head { stroke: var(--color-danger); stroke-opacity: .8; }
.owc-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.owc-move.is-sel .owc-line, .owc-move.is-sel .owc-head { stroke: var(--color-primary); stroke-width: 2; }
.owc-label {
  font-size: 11px; fill: var(--color-text-muted);
  paint-order: stroke; stroke: var(--color-control); stroke-width: 4px; stroke-linejoin: round;
}
.owc-temp { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.owc-lane { position: absolute; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.owc-node {
  position: absolute; width: 120px; height: 76px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  cursor: grab;
}
.owc-node:active { cursor: grabbing; }
.owc-node--exit { border-style: dashed; }
.owc-node.is-sel { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.owc-node__top { display: flex; align-items: center; gap: 6px; }
.owc-node .owv-step__ico { width: 22px; height: 22px; }
.owc-node .owv-step__ico svg { width: 13px; height: 13px; }
.owc-node__fam { font-size: 11px; color: var(--color-text-subtle); }
.owc-node__name { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--color-text); overflow: hidden; }
/* The blue dot on a box's right edge: drag it onto another box to add a move. */
.owc-handle {
  position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface);
  cursor: crosshair; opacity: 0; transition: opacity 120ms;
}
.owc-node:hover .owc-handle, .owc-node.is-sel .owc-handle { opacity: 1; }
/* The panel for the selected box or arrow. */
.owc-panel {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: 290px; overflow: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 12px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.owc-panel[hidden] { display: none; }
.owc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.owc-panel__route { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.owc-panel__route svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.owc-panel .field { margin: 0; }
.owc-panel .input, .owc-panel .select { width: 100%; }
.owc-panel .owf-switches .switch-field { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--color-text); }
.owc-panel__note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--color-text-subtle); }
.owc-panel__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--color-border); }

/* ---------- View · Diagram ----------------------------------------------------------
   Road | Diagram beside the wording switch; the diagram is the editor's board,
   read-only: boxes open the step in full, pointing at one lights its arrows
   in their own colours and fades the rest. */
.owv-head-sides { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 22px; margin-left: auto; align-self: flex-start; }
.owv-dia { display: flex; flex-direction: column; gap: 12px; }
.owv-dia[hidden], .owv-body[hidden] { display: none; }
.owc-view .owc-board { touch-action: auto; }
.owc-view .owc-node { cursor: pointer; transition: opacity 120ms, border-color 120ms, box-shadow 120ms; }
.owc-view .owc-move { transition: opacity 120ms; }
.owc-node.is-src  { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.owc-node.is-fwd  { border-color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.owc-node.is-back { border-color: var(--color-warn);    box-shadow: 0 0 0 1px var(--color-warn); }
.owc-node.is-exit { border-color: var(--color-danger);  box-shadow: 0 0 0 1px var(--color-danger); border-style: solid; }
.owv.is-tracing .owc-node:not(.is-src):not(.is-fwd):not(.is-back):not(.is-exit) { opacity: .35; }
.owv.is-tracing .owc-move:not(.is-on) { opacity: .12; }
.owc-move.is-on.is-fwd .owc-line, .owc-move.is-on.is-fwd .owc-head { stroke: var(--color-success); stroke-width: 2; }
.owc-move.is-on.is-back .owc-line, .owc-move.is-on.is-back .owc-head { stroke: var(--color-warn); stroke-width: 2; }
.owc-move.is-on.is-exit .owc-line, .owc-move.is-on.is-exit .owc-head { stroke-opacity: 1; stroke-width: 2; }

/* ---------- Dialogs ------------------------------------------------------------------
   The status panel's preview row, and the rule panel's condition and action
   rows: field, operator, value, remove, each sized to what it holds. */
.owf-field-sm { flex: 0 1 220px; }
.owf-field-switch { padding-top: 7px; font-size: 12px; color: var(--color-text); }
.owf-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
}
.owf-preview__l { font-size: 12px; color: var(--color-text-muted); }
.owf-preview .owf-sub { flex-basis: 100%; margin-top: 0; }
.owf-preview + .form-row { margin-top: 14px; }
/* A switch's own label inside a .field keeps the body case: the uppercase
   small-caps belong to the field's heading, not to the options under it. */
.field .owf-switches .switch-field,
.field .owf-field-switch { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--color-text); }
.owf-conds { display: flex; flex-direction: column; gap: 6px; }
.owf-cond,
.owf-act { display: grid; align-items: center; gap: 8px; }
.owf-cond { grid-template-columns: minmax(120px, 1fr) minmax(110px, 0.8fr) minmax(120px, 1.2fr) 32px; }
.owf-act  { grid-template-columns: 26px minmax(140px, 1fr) minmax(140px, 1.4fr) 32px; }
.owf-cond .select, .owf-cond .input,
.owf-act .select, .owf-act .input { width: 100%; min-width: 0; padding: 5px 8px; font-size: 12px; }
.owf-cond .select, .owf-act .select { padding-right: 26px; background-position: right 8px center; }
.owf-cond-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.owf-cond-foot .owf-sub { margin-top: 0; }
.owf-testrow { display: flex; align-items: center; gap: 8px; }
.owf-testrow .select { flex: 1; min-width: 0; font-size: 12px; }
.owf-testrow .btn { flex: none; }
.owf-testout {
  margin-top: 10px; padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.owf-testout[hidden] { display: none; }
.owf-testout p { margin: 6px 0 0; }
.owf-testout strong { color: var(--color-text); }
.slideover-foot .owf-sub { margin: 0; max-width: 260px; }

/* ---------- Narrow screens --------------------------------------------------------------
   Below 1100 the seven-column tables keep their shares on a 980px table and
   scroll inside .table-wrap; the holds and the settings go one across. */
@media (max-width: 1200px) {
  /* The road folds into two rows of three; the third card's arrow has
     nowhere to point. */
  .owv-road { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 78px; }
  .owv-road > .owv-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 640px) {
  /* One card per row; the arrow turns down into the gap below. */
  .owv-road { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .owv-map { padding: 0; }
  .owv-lines { display: none; }
  .owv-road > .owv-step:nth-child(3n)::after { display: block; }
  .owv-road > .owv-step:not(:last-child)::after { top: auto; right: auto; bottom: -18px; left: 22px; transform: rotate(135deg); }
  .owv-exits__row { grid-template-columns: minmax(0, 1fr); }
  .owv-rules { grid-template-columns: minmax(0, 1fr); }
  .owv-dlv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .owv-dlv dd + dt { margin-top: 8px; }
}
@media (max-width: 1100px) {
  .owf-table { min-width: 980px; }
  .owf-gates { min-width: 820px; }
  .owf-runs, .owf-btns { min-width: 760px; }
  .owf-holds { grid-template-columns: minmax(0, 1fr); }
  .owf-head-reading { max-width: 100%; }
  .owf-head-right { max-width: 100%; }
  .card-header:has(> .owf-head-right) { flex-wrap: wrap; gap: 6px 16px; }
}
@media (max-width: 768px) {
  .owf-settings { grid-template-columns: minmax(0, 1fr); }
  .owf-settings > .owf-setting:nth-last-child(-n+2)::after { display: block; }
  .owf-settings > .owf-setting:last-child::after { display: none; }
  .owf-setting { grid-template-columns: 34px minmax(0, 1fr); }
  .owf-setting__v { grid-column: 2; }
  .owf-rule { grid-template-columns: 16px 26px 34px minmax(0, 1fr); }
  .owf-rule__acts { grid-column: 2 / -1; justify-content: flex-start; }
  .owf-rule__acts .btn { min-height: 40px; }
  .owf-rules-head { flex-wrap: wrap; gap: 8px; }
  .owf-head-actions { flex: 1 1 100%; display: flex; justify-content: flex-start; }
  .owf-cond { grid-template-columns: minmax(0, 1fr) 32px; }
  .owf-act { grid-template-columns: 26px minmax(0, 1fr) 32px; }
  .owf-cond .input, .owf-act .input { grid-column: 1 / -1; }
  .owf-act .input { grid-column: 2 / -1; }
  .owf-switches--grid { grid-template-columns: minmax(0, 1fr); }
  .owf-field-sm { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  /* The shell already pads 16; a card body inside it paid the same again and
     left a 214px column for a rule. The body gives its side padding up. */
  .owf-shell > [data-tab-panel] > .card > .card-body { padding-inline: 0; }
  .owf-shell > [data-tab-panel] > .card > .card-header { padding-inline: 0; }
  .owf-rule { grid-template-columns: 16px 26px 34px minmax(0, 1fr); }
  .owf-rule__body,
  .owf-rule__acts { grid-column: 1 / -1; }
  .owf-head-actions .btn { flex: 1 1 auto; justify-content: center; }
  .owf-subhead { flex-wrap: wrap; gap: 8px; }
  .owf-foot { gap: 12px; }
  /* A header reading at phone width stacks one fact per line, no dots. */
  .owf-head-reading { flex-direction: column; align-items: flex-start; row-gap: 2px; }
  .owf-head-reading > *:not(:last-child)::after { content: none; }
  .owf-foot__acts { margin-left: 0; width: 100%; justify-content: space-between; }
  .owf-hold__kv { row-gap: 4px; }
  .owf-hold__kv dd + dt { margin-top: 8px; }
  .owf-flow__k { width: 100%; display: block; }
  .owf-rule__acts { flex-wrap: wrap; }
  .owf-testrow { flex-wrap: wrap; }
  .owf-testrow .select { flex-basis: 100%; }
}