/* Settings › Automations (crm-workflows.js), 23 Oct. Structure only: every colour, edge and border comes from the --wf-* tokens, which
   each back office maps onto its own look below (Saltvig: the --crm-* field-notes tokens, themeable in Your look; Ravn: the .ap tokens,
   square, 1.5px ink edges). Flat: no glows, no soft shadows, no tinted pills. */
.sv-owner .wf { --wf-bg: var(--crm-bg); --wf-panel: var(--crm-surface); --wf-ink: var(--crm-ink); --wf-muted: var(--crm-muted); --wf-line: var(--crm-line);
  --wf-line2: color-mix(in srgb, var(--crm-ink) 34%, transparent); --wf-r: var(--crm-radius); --wf-rb: var(--crm-radius-btn); --wf-bw: 1px;
  --wf-pri: var(--crm-primary-bg); --wf-pri-ink: var(--crm-primary-ink); --wf-mono: var(--crm-font-data); }
.ap .wf { --wf-bg: var(--side); --wf-panel: var(--bg); --wf-ink: var(--ink); --wf-muted: var(--muted); --wf-line: var(--line); --wf-line2: var(--line-strong);
  --wf-r: 0px; --wf-rb: 0px; --wf-bw: 1.5px; --wf-pri: var(--ink); --wf-pri-ink: var(--bg); --wf-mono: var(--mono); }

.wf { display: grid; gap: 18px; min-width: 0; color: var(--wf-ink); }
.wf :where(p, h3, h4, ul, ol) { margin: 0; padding: 0; }
.wf :where(ul, ol) { list-style: none; }
.wf-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: var(--wf-bw) solid var(--wf-line2); border-radius: var(--wf-rb); }
.wf-msg { min-height: 1.4em; }
.wf > .wf-msg:empty { min-height: 0; margin-top: -18px; }
.wf-foot > .wf-msg:empty { min-height: 0; margin-top: -8px; }
.wf-msg.is-err { color: var(--crm-err, var(--err, #8e2a17)); }

/* the switch: one kind for every on/off here */
.wf .wf-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--wf-ink); background: none; border: 0; cursor: pointer; }
.wf .wf-sw:disabled { cursor: default; opacity: 0.55; }
.wf-sw__k { position: relative; width: 40px; height: 22px; flex: none; border: var(--wf-bw) solid var(--wf-ink); border-radius: var(--wf-rb); background: var(--wf-panel); }
.wf-sw__k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--wf-rb); background: var(--wf-ink); transition: transform 150ms ease-out; }
.ap .wf-sw__k::after { width: 15px; height: 15px; top: 2px; left: 2px; }
.wf-sw[aria-checked="true"] .wf-sw__k { background: var(--wf-ink); }
.wf-sw[aria-checked="true"] .wf-sw__k::after { background: var(--wf-panel); transform: translateX(18px); }
.wf-sw:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 2px; }
.wf-sw__t { min-width: 2.4em; text-align: left; }
@media (prefers-reduced-motion: reduce) { .wf-sw__k::after { transition: none; } }
.wf-fixed { font-size: 0.875rem; font-weight: 600; color: var(--wf-muted); white-space: nowrap; }
.wf-tag { white-space: nowrap; }
.wf-tag--draft { margin-left: 8px; vertical-align: middle; }

/* the list */
.wf-group { display: grid; gap: 6px; }
.wf-group + .wf-group { padding-top: 18px; border-top: 1px solid var(--wf-line); }
.wf-group__h { font-size: 0.8125rem; font-weight: 700; line-height: 24px; }
.wf-list { display: grid; }
.wf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--wf-line); }
.wf-row:first-child { border-top: 0; }
.wf-row__t { display: grid; gap: 2px; min-width: 0; }
.wf-row__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.wf .wf-row__n { padding: 0; font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--wf-ink); text-align: left; background: none; border: 0; cursor: pointer; }
.wf .wf-row__n:hover { text-decoration: underline; text-underline-offset: 3px; }
.wf-row__m { line-height: 1.45; }
.wf-row__next { font-size: 0.8125rem; font-weight: 600; }
.wf-row.is-off .wf-row__next, .wf-row.is-off .wf-ic { color: var(--wf-muted); }
.wf-row__c { display: flex; justify-content: flex-start; }

/* one workflow */
.wf-top { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--wf-line); }
.wf .wf-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.wf-top__n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wf-top__h { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin-right: 8px; }
.wf-ed { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch; }
.wf-flow { display: grid; justify-items: center; align-content: start; padding: 22px 18px; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: var(--wf-r); }
.wf-flow > li { width: 100%; max-width: 380px; }
.wf .wf-flow__b { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; font: inherit; color: var(--wf-ink); text-align: left;
  background: var(--wf-panel); border: var(--wf-bw) solid var(--wf-line2); border-radius: var(--wf-rb); cursor: pointer; }
.wf .wf-flow__b:hover { border-color: var(--wf-ink); }
.wf-flow__n.is-sel .wf-flow__b { border-color: var(--wf-ink); box-shadow: inset 0 0 0 1px var(--wf-ink); }
.wf-flow__n--trig .wf-flow__b { background: var(--wf-ink); color: var(--wf-panel); border-color: var(--wf-ink); }
.wf-flow__n--trig .wf-ic { border-color: color-mix(in srgb, var(--wf-panel) 45%, transparent); }
.wf-flow__n--trig.is-sel .wf-flow__b { box-shadow: 0 0 0 2px var(--wf-bg), 0 0 0 3.5px var(--wf-ink); }
.wf-flow__n--wait .wf-flow__b { border-style: dashed; }
.wf-flow__n.is-off .wf-flow__l { color: var(--wf-muted); }
.wf-flow__t { display: grid; gap: 2px; min-width: 0; }
.wf-flow__l { font-size: 0.875rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.wf-flow__s { font-size: 0.8125rem; line-height: 1.35; color: var(--wf-muted); }
.wf-flow__n--trig .wf-flow__s { color: inherit; opacity: 0.75; }
.wf-flow__gap { position: relative; height: 22px; }
.wf-flow__gap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1.5px solid var(--wf-line2); }
.wf-flow__stops { padding: 10px 6px 2px; text-align: center; }
.wf-flow__stops p { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 0.8125rem; line-height: 1.4; }
.wf-flow__stops .wf-i { width: 14px; height: 14px; margin-top: 2px; color: var(--wf-muted); }
.wf-flow__end { padding-top: 14px; text-align: center; }
.wf-flow__end p { font-size: 0.8125rem; color: var(--wf-muted); }

.wf-p { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 20px; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-r); }
.wf-p__h { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--wf-line); }
.wf-p__h h4 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.wf-p__big { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.wf-p textarea { min-height: 180px; }
.wf .wf-p__reset { justify-self: start; }
.wf-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; }
.wf-rule .wf-i { margin-top: 1px; }
.wf-wsent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1rem; font-weight: 600; }
.wf .wf-wsent__in { width: auto; min-width: 0; height: 40px; }
.wf .wf-wsent__in[type="number"] { width: 76px; }
.wf .wf-wsent__in[type="time"] { width: 120px; }
.wf-merge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap .wf-mf { min-height: 32px; padding: 0 8px; font: 500 12px/1 var(--mono); color: var(--ink); background: none; border: 1px solid var(--line-strong); cursor: pointer; }
.ap .wf-mf:hover { border-color: var(--ink); }
.wf-pv { display: grid; gap: 8px; min-width: 0; }
.wf-pv__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 0.8125rem; font-weight: 700; }
.wf-pv__b { display: grid; gap: 8px; min-width: 0; }
.wf-pv__s { font-weight: 700; }
.wf-pv__text { padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.55; background: var(--wf-bg); border: 1px solid var(--wf-line); border-radius: var(--wf-r); }
.wf-mailpv { display: block; max-height: 34rem; overflow: auto; border: 1px solid var(--wf-line); border-radius: var(--wf-r); }

.wf-rules { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--wf-line); }
.wf-rules ul { display: grid; gap: 8px; }
.wf-rules li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.875rem; line-height: 1.45; color: var(--wf-muted); }
.wf-rules li .wf-i { color: var(--wf-ink); margin-top: 1px; }
.wf-foot { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--wf-line); }
.wf-foot__b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wf-extra { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--wf-line); }

/* the branch in the vertical flow and in a panel */
.wf-p__path { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--wf-line); }
.wf-p__h:has(.wf-p__x) { grid-template-columns: 34px minmax(0, 1fr) auto; }
.wf .wf-p__h .wf-p__x { width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; }
.wf-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wf-test__m:empty { display: none; }
.wf-test__m.is-err { color: var(--crm-err, var(--err, #8e2a17)); }
.wf-test__n { flex-basis: 100%; margin: 0; }   /* under the button: Send a test sends the saved words */
.wf-test__n[hidden] { display: none; }
/* the AI draft box (P.draft, round 3 task 7): the ask (two rows, full width), Write a draft under it, the answer's line under that */
.wf-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wf .wf-ai__in { flex: 1 1 100%; min-width: 0; min-height: 0; resize: none; }   /* two rows, not the message's 180 px */
.wf-ai__b { flex: none; }
.wf-ai__m { flex-basis: 100%; margin: 0; }
.wf-ai__m:empty { display: none; }
.wf-ai__m.is-err { color: var(--crm-err, var(--err, #8e2a17)); }

/* the canvas (P.canvas, desktop; round 2 task 6): GoHighLevel's drawn flow in our flat look. Only Ravn has it, so it reads the shared
   frame's --sh-* tokens directly: the dots are --sh-line, a selected node --sh-hover with the ink edge. No shadows, no gradients. */
.wf-top--cv { padding-bottom: 0; }
.wf-tabs { display: flex; gap: 24px; margin-top: 4px; }
.wf .wf-tabs button { padding: 10px 0 11px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--wf-muted); background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -17px; cursor: pointer; }
.wf .wf-tabs button:hover { color: var(--wf-ink); }
.wf .wf-tabs button[aria-current] { color: var(--wf-ink); border-bottom-color: var(--wf-ink); }
/* the tabs, Save at their right: the tabs sit on the header's line, Save centred on their labels */
/* one line, always: a status message wraps (at most two lines, the rest in its title) inside the bar, so the canvas under it never moves */
.wf-top__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.wf-top__row > .wf-tabs { margin-top: 0; flex: none; }
.wf .wf-top__row .wf-tabs button { padding: 18px 0 19px; margin-bottom: -1px; }
.wf-bar { display: flex; align-items: center; gap: 10px 14px; min-width: 0; margin: 0 0 11px auto; }
.wf-bar > button { flex: none; }
.wf-bar[hidden] { display: none; }
.wf-bar > .wf-msg { min-height: 0; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-align: right; }
.wf-tabp { display: grid; gap: 18px; min-width: 0; }
.wf-ed--cv { display: block; }
.wf-cv { position: relative; height: max(420px, calc(100vh - var(--wf-cv-top, 260px) - 16px)); overflow: hidden; background: var(--sh-bg); border: 1px solid var(--wf-line);
  border-radius: var(--wf-r); cursor: grab; touch-action: none; }
.wf-cv.is-drag { cursor: grabbing; }
.wf-cv__grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wf-cv__dot { fill: var(--sh-line); }
.wf-cv__stage { position: absolute; left: 0; top: 0; width: max-content; display: flex; flex-direction: column; align-items: center; transform-origin: 0 0; user-select: none; }
.wf .wf-node { width: 264px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; font: inherit; color: var(--wf-ink);
  text-align: left; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-rb); cursor: pointer; }
.wf .wf-node:hover { border-color: var(--wf-ink); }
.wf .wf-node.is-sel { background: var(--sh-hover); border-color: var(--wf-ink); }
.wf-node--wait { border-style: dashed; }
.wf-node.is-off .wf-node__l { color: var(--wf-muted); }
.wf-node .wf-ic { width: 32px; height: 32px; }
.wf-node__t { display: grid; gap: 2px; min-width: 0; }
.wf-node__l { font-size: 0.875rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.wf-node__s { font-size: 0.8125rem; line-height: 1.35; color: var(--wf-muted); }
.wf-cv__c { display: block; width: 0; height: 28px; border-left: 1px solid var(--wf-line2); }
.wf-cv__paths { position: relative; display: flex; align-items: flex-start; padding-top: 20px; }
.wf-cv__paths::before, .wf-cv__path::after { content: ""; position: absolute; top: 0; left: calc(50% - 0.5px); height: 20px; border-left: 1px solid var(--wf-line2); }
.wf-cv__path { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 22px 0; }
.wf-cv__path::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--wf-line2); }
.wf-cv__path:first-child::before { left: 50%; }
.wf-cv__path:last-child::before { right: 50%; }
.wf-cv__lbl { max-width: 264px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; text-align: center; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-rb); }
.wf-cv__end { padding: 3px 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--wf-muted); background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: 999px; }
.wf-cvz { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-rb); cursor: auto; }
.wf .wf-cvz button { min-width: 36px; height: 36px; padding: 0 10px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--wf-ink); background: none; border: 0; cursor: pointer; }
.wf .wf-cvz button:last-child { border-left: 1px solid var(--wf-line); font-size: 0.8125rem; }
.wf .wf-cvz button:hover { background: var(--sh-hover); }
.wf-cvz__p { min-width: 48px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: center; color: var(--wf-muted); }
.wf-mm { position: absolute; right: 16px; bottom: 16px; width: 160px; height: 110px; overflow: hidden; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-rb); cursor: pointer; }
.wf-cv.has-p .wf-mm { right: calc(min(380px, 100% - 48px) + 16px); }
.wf-mm__in > .wf-cv__stage { pointer-events: none; }
.wf-mm__view { position: absolute; border: 1px solid var(--wf-ink); pointer-events: none; }
.wf-cvp { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100% - 48px); overflow: auto; overscroll-behavior: contain; background: var(--wf-panel);
  border-left: 1px solid var(--wf-line2); cursor: auto; }
.wf-cvp > .wf-p { padding: 18px 20px 24px; border: 0; border-radius: 0; }
.wf-cvp .wf-mailpv { max-height: none; }

/* the Settings and Run log tabs */
.wf-setp { display: grid; gap: 18px; }
.wf-set { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px 24px; margin: 0; }
.wf-set dd { display: grid; gap: 4px; margin: 0; }
.wf-set__k { font-size: 0.8125rem; font-weight: 700; line-height: 1.6; }
.wf-log { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.wf-log th { padding: 8px 12px 8px 0; font-size: 0.8125rem; font-weight: 700; text-align: left; border-bottom: 1px solid var(--wf-line); }
.wf-log td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--wf-line); }
.wf-log__at { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--wf-muted); }
.wf-log__s { margin-left: 8px; }

@media (max-width: 900px) {
  .wf-ed { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wf-flow { padding: 16px 10px; }
  .wf-p { padding: 16px 14px; }
}
@media (max-width: 699px) {
  .wf-row { grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px 12px; }
  .wf-row__c, .wf .wf-row__o { grid-column: 2; grid-row: 2; align-self: center; }
  .wf-row__c { justify-self: start; }
  .wf .wf-row__o { justify-self: end; }
}

/* ---------- 27 Oct walk: Ravn's look is every back office's on the shell (Saltvig looked "old"). The --wf-* tokens on the shell's --sh-*
   tokens, rounded hairlines; flat switches; the open automation on the canvas with no box around it and the page ending with it. Ravn's
   own copy of these lines (crm-appointments.css, round 3) moved here, so a model only has to mount it the way Ravn does:
   a page .ap-page.ap-settings, the list inside .ap-box.wf-box > .ap-box__bd (see brain/builds/2026-10-27-shell-controls-plan.md). ---------- */
.sh-frame .wf { --wf-bg: var(--sh-side); --wf-panel: var(--sh-bg); --wf-ink: var(--sh-ink); --wf-muted: var(--sh-quiet); --wf-pri: var(--sh-ink); --wf-pri-ink: var(--sh-bg); --wf-mono: var(--sh-ui); }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf { --wf-r: var(--sh-radius); --wf-rb: 8px; --wf-bw: 1px; --wf-line: var(--sh-line); --wf-line2: color-mix(in srgb, var(--sh-ink) 16%, var(--sh-bg)); }
.sh-frame .ap-settings:has(.wf-cv) { padding-bottom: 0; }
.sh-frame .ap-settings .wf-box:has(.wf-top--cv) { border: 0; background: none; }
.sh-frame .ap-settings .wf-box:has(.wf-top--cv) > .ap-box__bd { padding: 0; }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-sw__k { border-radius: 11px; }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-sw__k::after { width: 15px; height: 15px; top: 2px; left: 2px; border-radius: 50%; }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-sw:not([aria-checked="true"]) .wf-sw__k { border-color: color-mix(in srgb, var(--sh-ink) 24%, var(--sh-bg)); background: var(--sh-hover); }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-sw:not([aria-checked="true"]) .wf-sw__k::after { background: var(--sh-muted); }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-flow__n.is-sel .wf-flow__b { background: var(--sh-hover); box-shadow: none; }
.sh-frame :is(.ap-settings, .ap-autos, .sh-sheet--wf) .wf-flow__n--trig.is-sel .wf-flow__b { background: var(--sh-ink); outline: 1.5px solid var(--sh-ink); outline-offset: 2px; }

/* 27 Oct walk (KERNE's pack, P.addMenu / P.add / P.remove): a + on every join and its short menu, a step's Remove, a text's counter.
   Only drawn when a pack edits structure; Ravn's and Saltvig's editors have none of these */
.wf-plus { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; color: var(--wf-muted); background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: 50%; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.wf-plus .wf-i { width: 12px; height: 12px; }
.wf-plus:hover, .wf-plus:focus-visible { color: var(--wf-ink); border-color: var(--wf-ink); }
.wf-cv__add { display: flex; justify-content: center; }
.wf-flow__gap:has(.wf-plus), .wf-flow__gap.is-open { display: flex; justify-content: center; }
.wf-addm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 320px; padding: 6px; background: var(--wf-panel); border: 1px solid var(--wf-line2); border-radius: var(--wf-rb); }
.wf-addm__ask { padding: 0 6px; font-size: 0.8125rem; color: var(--wf-muted); }
.wf .wf-addm button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--wf-ink); background: none; border: 1px solid var(--wf-line2); border-radius: 6px; cursor: pointer; }
.wf .wf-addm button:hover { border-color: var(--wf-ink); }
.wf .wf-addm .wf-addm__x { min-height: 32px; padding: 0 6px; border: 0; color: var(--wf-muted); }
.wf .wf-addm .wf-i { width: 14px; height: 14px; }
.wf-p__rm { justify-self: start; }
.wf-wsent__at { display: inline-flex; align-items: center; gap: 8px; }
.wf-flow__gap:has(.wf-plus) { height: 30px; align-items: center; }
.wf-flow__gap.is-open { height: auto; padding: 6px 0; }
.wf-flow__gap > .wf-plus, .wf-flow__gap > .wf-addm { position: relative; z-index: 1; }
/* the joins beside a + are short, so a flow with a + on every join keeps Ravn's scale when it is fitted */
.wf-cv__c:has(+ .wf-cv__add), .wf-cv__add + .wf-cv__c { height: 10px; }

/* ---------- Walk 2 (28 Oct, Qasim: "Automations out of Settings; opening one fills the screen; Trigger shows the whole flow"): the owner's
   Automations page (SH.autos) and an open automation as the shell's full-screen sheet. The sheet's head carries the name and the way back
   (Close, Escape), so the editor's own Back, icon and name step aside. On a desktop the canvas takes what the sheet's head and the editor's
   top leave, measured by the layout (not --wf-cv-top), and Fit shows the whole flow from its Trigger down. The phone keeps the vertical
   editor, which scrolls in the sheet. ---------- */
.sh-frame .ap-autos { gap: 16px; }
.sh-frame .sh-sheet.sh-sheet--wf { --sh-sheet-w: 100%; }
.sh-sheet--wf .sh-sheet__b > .wf { flex: 1; min-height: 0; padding: 0 32px 24px; align-content: start; }
.sh-sheet--wf :is(.wf-back, .wf-top__n > .wf-ic, .wf-top__h) { display: none; }
.sh-sheet--wf .wf-top__n:not(:has(.wf-sw, .wf-tag, .wf-fixed)) { display: none; }
.sh-sheet--wf .sh-sheet__b:has(.wf-cv) { overflow: hidden; }
.sh-sheet--wf .wf:has(.wf-cv) { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.sh-sheet--wf .wf-tabp:has(.wf-cv) { grid-template-rows: minmax(0, 1fr); min-height: 0; }
.sh-sheet--wf .wf-ed--cv { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* the on/off switch sits at the right end of the tabs' row (its name is the sheet's title), so the canvas starts right under the tabs */
.sh-sheet--wf .wf-top--cv { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
.sh-sheet--wf .wf-top--cv > .wf-top__row { grid-column: 1; grid-row: 1; }
.sh-sheet--wf .wf-top--cv > .wf-top__n { grid-column: 2; grid-row: 1; align-self: center; padding-bottom: 4px; }
.sh-sheet--wf .wf-cv { height: auto; min-height: 320px; }
.sh-sheet--wf .wf-tabp:not(:has(.wf-cv)) { overflow: auto; }
@media (max-width: 900px) {
  .sh-sheet--wf .sh-sheet__b > .wf { padding: 12px 16px 24px; }
}
@media (min-width: 901px) {   /* the demo's Guest | Owner switch sits at the bottom left, over the sheet: the zoom keeps clear of it */
  html:has(.demo-pill) .sh-sheet--wf .wf-cvz { left: 150px; }
}