/* Workflows manager — the saved-chain list, its buttons and the how-to panel.
   Measured off their live /workflows: a centred head with a small BETA, an
   800px card (1px #dadce0-ish border, 8px radius, faint shadow) whose header
   row carries outline-green Create New / Export / Import over a hairline, and
   rows of name, pencil + bin, the "flatten > compress" chain and a pale-green
   Launch. */

/* Their head: no tool icon, a 36px title with BETA, and a 26px grey lead.
   The full shell/dedicated scope is needed — app.css sizes the dedicated
   tool-head with a three-class rule that a bare header.wf-head cannot
   outrank. */
.wf-head { text-align: center; align-items: center; }
.wf-head .tool-head-ico { display: none; }
.tool-shell .tool-page-dedicated .tool-head.wf-head h1 { font-size: 2.25rem; }
.tool-shell .tool-page-dedicated .tool-head.wf-head .lead { font-size: 1.6rem; color: #9aa5aa; }

.wf-panel {
  width: 100%; max-width: 800px; margin: 26px auto 30px;
  border: 1px solid var(--line-strong, #ced5d7);
  border-radius: 8px;
  background: var(--white, #fff);
  padding: 30px 40px 40px;
  box-shadow: 0 4px 7px rgba(50, 50, 93, .06), 0 1px 3px rgba(0, 0, 0, .04);
}

.wf-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #e6e9ea);
  padding-bottom: 24px;
}

.wf-panel-head h2 {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
}

.wf-panel-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Their three buttons: white, 1px green outline, green text, 3px radius. */
.wf-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 35px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--white); color: var(--accent);
  font: inherit; font-size: .9rem;
}
.wf-btn i { font-size: .95rem; }
.wf-btn:hover { background: var(--accent-soft); }

.wf-list { list-style: none; margin: 0; padding: 50px 0 0; }

/* Their rows are 90px tall with the name centred — the crop of air above
   and below is what "they have space" means. */
.wf-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 90px; padding: 0;
}

.wf-row.editing .wf-name { color: var(--accent-dark); }

.wf-name {
  flex: 1 1 auto; min-width: 0;
  font-weight: 500; font-size: 1.02rem; color: var(--ink, #1b2430);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Their row: pencil, bin, then the chain in their grey, then Launch. */
.wf-row-actions {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
}
.wf-icon {
  border: 0; background: transparent; cursor: pointer;
  width: 32px; height: 32px; border-radius: 4px;
  color: var(--accent); font-size: 17px; line-height: 1;
}
.wf-icon:hover { background: var(--accent-soft); color: var(--accent-dark); }

.wf-chain {
  flex: 0 1 auto; min-width: 0; max-width: 300px;
  color: #9aa5aa; font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wf-launch {
  border: 1px solid transparent; cursor: pointer;
  background: rgba(31, 122, 109, .07); color: var(--accent);
  font-weight: 400; font-size: 1.125rem;
  height: 40px; padding: 0 20px; border-radius: 4px;
  margin-left: 40px;
}
.wf-launch:hover { background: var(--accent-soft); }

.wf-empty { margin: 16px 0 4px; color: var(--muted); font-size: 14px; }

.wf-how-link {
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--accent); font-size: 14px; margin-left: 6px;
  text-decoration: none;
}

/* ------------------------------------------------------------- how-to panel */
/* Measured off their modal: an 850px square-cornered panel near the top of
   the window, a 17px title bar, three columns with green 17px numbers and
   grey descriptions, and a right-aligned green-text Close. */
.wf-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(16, 24, 32, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 20px;
  overflow: auto;
}
.wf-modal[hidden] { display: none; }

.wf-modal-card {
  position: relative;
  background: #fff; border-radius: 0;
  width: min(850px, 100%);
  max-height: none;
  padding: 0 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.wf-modal-card h2 {
  margin: 0; padding: 20px 22px 14px;
  font-size: 1.06rem; font-weight: 400;
  border-bottom: 1px solid var(--line, #e6e9ea);
}

.wf-modal-x {
  position: absolute; top: 14px; right: 16px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #9aa5b1; padding: 4px 6px;
}
.wf-modal-x:hover { color: #55606c; }

/* Three columns across, numbered, like their panel. */
.wf-how {
  list-style: none; margin: 0; padding: 34px 50px 30px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.wf-how-n {
  display: block;
  color: var(--accent);
  font-size: 1.3rem; font-weight: 600; margin-bottom: 24px;
}

.wf-how h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 400; color: var(--ink); }
.wf-how p { margin: 0; color: #9aa5aa; font-size: 1.06rem; line-height: 1.55; }
.wf-how code {
  background: #f3f5f8; border-radius: 4px; padding: 1px 5px;
  font-size: .8rem; color: #34404d;
}

.wf-modal-foot {
  margin: 0; padding: 16px 22px 20px;
  background: none; border-top: 0;
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Their Close: quiet, green text. */
.wf-close {
  border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: .9rem;
  padding: 8px 16px; border-radius: 4px;
}
.wf-close:hover { background: var(--accent-soft); }

/* ---- the runner (?id=…): our own card, not a borrowed band ---------------
   Launching a workflow swaps the manager for this card. It is built from the
   same glass language as the rest of the site (soft white pane over the page
   gradient), states the chain as numbered steps, and gives the document one
   dashed drop area. Deliberately nothing like the full-bleed grey band with
   wave separators another toolkit uses. */
.wf-run { margin: 26px auto 0; max-width: 800px; }

.wf-runner {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .85);
  background: linear-gradient(140deg, rgba(255, 255, 255, .82),
              rgba(255, 255, 255, .52) 55%, rgba(255, 255, 255, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
              0 22px 48px -30px rgba(21, 57, 99, .5);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  padding: 26px 30px 30px;
  text-align: left;
}

.wf-runner-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

.wf-runner-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}

.wf-runner-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 6px 2px;
  color: var(--muted); font: inherit; font-size: .92rem;
}
.wf-runner-back:hover { color: var(--accent-dark); }

.wf-runner-name {
  margin: 14px 0 0;
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); overflow-wrap: anywhere;
}

/* The chain: numbered pills joined by a short rule, so the order is read left
   to right without borrowing another product's chevron breadcrumb. */
.wf-runner-chain {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 16px 0 0; padding: 0;
}
.wf-runner-chain li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--brand-line, #c6e2f3);
  color: var(--ink-2, #3d4550); font-size: .95rem;
}
.wf-runner-chain .wf-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 700;
}
.wf-runner-chain li.wf-step-arrow {
  background: none; border: 0; padding: 0;
  color: var(--brand-line, #c6e2f3); font-size: 1.05rem;
}

/* The drop area: dashed, click-target for the whole card, so a stray drop
   anywhere on the runner still lands in the form. */
.wf-runner-drop {
  margin: 22px 0 0; padding: 26px 20px;
  border: 2px dashed var(--brand-line, #c6e2f3);
  border-radius: 16px; background: rgba(255, 255, 255, .55);
  text-align: center;
  transition: border-color .18s ease, background .18s ease;
}
.wf-runner.dragover .wf-runner-drop,
.wf-runner-drop.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wf-runner-drop-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 1.5rem;
}
.wf-runner-drop-text { margin: 12px 0 0; color: var(--ink-2, #3d4550); font-size: 1rem; }
.wf-runner-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 18px;
}
.wf-runner-more { position: relative; }
.wf-runner-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--brand-line, #c6e2f3); border-radius: 10px;
  background: #fff; color: var(--accent-dark); font: inherit; font-size: .95rem;
}
.wf-runner-more-btn:hover { background: var(--accent-soft); }

.wf-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 40; min-width: 230px; padding: 6px 0; text-align: left;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 30, 35, .16);
}
.wf-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 16px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.wf-menu-item i { width: 18px; font-size: 1.05rem; color: var(--muted); }
.wf-menu-item:hover { background: var(--accent-soft); color: var(--accent-dark); }

.wf-runner-note {
  margin: 16px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5;
}
.wf-runner-note:first-of-type { margin-top: 22px; }
.wf-runner-terms {
  margin: 10px 0 0; font-size: .92rem; color: var(--muted);
}
.wf-runner-terms a { color: var(--accent-dark); text-decoration: none; }
.wf-runner-terms a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .wf-how { grid-template-columns: 1fr; gap: 20px; }
  .wf-panel { padding: 20px 16px; }
  .wf-list { padding-top: 18px; }
  /* The chain and the wide margins give way first on a phone. */
  .wf-row { min-height: 64px; }
  .wf-chain { display: none; }
  .wf-launch { margin-left: 0; padding: 0 14px; font-size: 1rem; }
  .wf-name { font-size: .98rem; }
}

/* ---- Watermark step composer -------------------------------------------
   Sits under the steps box on /workflows: the text, the Single/Multi pair
   (Multi opens the copies box), and the button that writes the line. */
.wf-wm {
  margin-top: 6px; padding: 14px 16px; border: 1px solid var(--line, #e6e9ea);
  border-radius: 10px; background: #fbfcfc;
}
.wf-wm-title {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  font-weight: 700; color: var(--ink);
}
.wf-wm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-wm-row #wf-wm-text {
  flex: 1 1 220px; min-width: 0; height: 40px; border: 1px solid var(--line, #e6e9ea);
  border-radius: 8px; padding: 0 12px; font: inherit; background: #fff; color: var(--ink);
}
.wf-wm-seg {
  display: inline-flex; border: 1px solid var(--line, #e6e9ea); border-radius: 999px;
  overflow: hidden; background: #fff;
}
.wf-wm-mode {
  border: 0; background: none; padding: 0 16px; height: 38px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--muted, #6b7785);
}
.wf-wm-mode.is-on { background: var(--accent, #1f7a6d); color: #fff; }
.wf-wm-count {
  display: inline-flex; align-items: center; gap: 8px; font-size: .95rem;
  color: var(--ink);
}
.wf-wm-count[hidden] { display: none; }
.wf-wm-count input {
  width: 82px; height: 38px; border: 1px solid var(--line, #e6e9ea);
  border-radius: 8px; padding: 0 10px; font: inherit; background: #fff;
}
.wf-wm #wf-wm-out { margin: 10px 0 0; }
.wf-wm #wf-wm-out code {
  background: #eef3f2; border-radius: 5px; padding: 1px 6px; font-size: .92em;
}