/**
 * FlowWP admin shell — light theme.
 *
 * Brand Guidelines §03 specifies a dark-first palette. This is the light
 * rendering of that same palette, at the product owner's direction.
 *
 * Brand hues are unchanged where they carry no text: Electric Violet #7C3AED
 * and Cyan #06B6D4 are used exactly as specified for gradients, handles and
 * accents. The status colours are a different matter — #22C55E, #F59E0B and
 * #94A3B8 were picked to sit on Ink #0B0D12 and drop to roughly 2.3:1, 2.2:1
 * and 2.8:1 against white, all below the 4.5:1 WCAG AA floor for body text. So
 * text uses a darker shade of the same hue while fills and badges keep the
 * brand value. Ink #0B0D12 is reused as the primary text colour, which is why
 * the type still reads as FlowWP rather than as generic admin grey.
 *
 * Everything is scoped under #flowwp-root so our surface stops at our screen.
 */

#flowwp-root {
  /* Brand, unchanged. */
  --flow-primary: #7c3aed;
  --flow-accent: #06b6d4;

  /* Light surfaces. */
  --flow-page: #f8fafc;
  --flow-surface: #ffffff;
  --flow-surface-raised: #ffffff;
  --flow-surface-sunken: #f1f5f9;
  --flow-border: #e2e8f0;
  --flow-border-strong: #cbd5e1;

  /* Ink from the brand palette, now doing the work of body text. */
  --flow-text: #0b0d12;
  --flow-muted: #64748b;
  --flow-faint: #94a3b8;

  /* Status: -fill keeps the brand value, -text is the readable shade. */
  --flow-success: #22c55e;
  --flow-success-text: #15803d;
  --flow-warning: #f59e0b;
  --flow-warning-text: #b45309;
  --flow-danger: #ef4444;
  --flow-danger-text: #dc2626;

  --flow-radius: 10px;
  --flow-gap: 20px;
  --flow-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);

  --flow-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --flow-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  margin: 20px 20px 20px 0;
  padding: 0;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-page);
  color: var(--flow-text);
  font-family: var(--flow-font);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
}

#flowwp-root * {
  box-sizing: border-box;
}

/* -- Header ---------------------------------------------------------------- */

.flowwp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--flow-gap);
  padding: 22px 24px;
  border-bottom: 1px solid var(--flow-border);
  background: var(--flow-surface);
}

.flowwp-header__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--flow-text);
}

.flowwp-header__tagline {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--flow-muted);
}

.flowwp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--flow-muted);
  white-space: nowrap;
}

.flowwp-badge--plan {
  border-color: transparent;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
}

.flowwp-body {
  padding: 24px;
}

/* -- Buttons --------------------------------------------------------------- */

.flowwp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--flow-shadow);
  transition: border-color 120ms ease, background 120ms ease;
}

.flowwp-btn:hover:not(:disabled) {
  border-color: var(--flow-primary);
  background: var(--flow-surface-sunken);
}

.flowwp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.flowwp-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
}

.flowwp-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d28d9, #0891b2);
}

.flowwp-btn--danger {
  color: var(--flow-danger-text);
}

.flowwp-btn--danger:hover:not(:disabled) {
  border-color: var(--flow-danger);
  background: #fef2f2;
}

.flowwp-btn:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 2px;
}

/* -- Workflow list --------------------------------------------------------- */

.flowwp-listhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* -- Workflow table -------------------------------------------------------- */

/* Horizontal scroll rather than a squeezed layout: the columns have a width
   below which they stop being readable, and honouring that is better than
   fitting. */
.flowwp-table__wrap {
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
  overflow-x: auto;
}

.flowwp-table {
  width: 100%;
  border-collapse: collapse;
}

.flowwp-table th,
.flowwp-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--flow-border);
  text-align: left;
  vertical-align: middle;
}

.flowwp-table thead th {
  background: var(--flow-surface-sunken);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flow-muted);
  white-space: nowrap;
}

.flowwp-table tbody tr:last-child td {
  border-bottom: none;
}

.flowwp-table tbody tr:hover {
  background: var(--flow-surface-sunken);
}

.flowwp-table__cell--name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.flowwp-table__name {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.flowwp-table__name:hover {
  color: var(--flow-primary);
  text-decoration: underline;
}

.flowwp-table__rename {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--flow-primary);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

/* The count columns are narrow by nature, so they take only what they need and
   leave the slack to the name. */
.flowwp-table__num {
  width: 1%;
  font-family: var(--flow-mono);
  font-size: 13px;
  white-space: nowrap;
}

.flowwp-table thead .flowwp-table__num {
  font-family: var(--flow-font);
}

.flowwp-table__failed {
  margin-left: 8px;
  font-size: 11px;
  color: var(--flow-danger-text);
}

.flowwp-table__when {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--flow-muted);
  white-space: nowrap;
}

.flowwp-table__sub {
  font-size: 11px;
  color: var(--flow-faint);
}

.flowwp-table__actions {
  width: 1%;
  text-align: right;
}

.flowwp-table__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Below this the columns stop fitting, so each row becomes a stack of labelled
   lines. The labels come from data-label, which is why every cell carries one. */
@media (max-width: 900px) {
  .flowwp-table thead {
    display: none;
  }

  .flowwp-table,
  .flowwp-table tbody,
  .flowwp-table tr,
  .flowwp-table td {
    display: block;
    width: auto;
  }

  .flowwp-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--flow-border);
  }

  .flowwp-table tbody tr:last-child {
    border-bottom: none;
  }

  .flowwp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 16px;
    border-bottom: none;
  }

  /* The detail row spans the table and has no column of its own to label. */
  .flowwp-table__detail td::before {
    content: none;
  }

  .flowwp-table__detail td {
    display: block;
    padding: 0 8px 12px;
  }

  .flowwp-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--flow-muted);
  }

  .flowwp-table__actions {
    text-align: left;
  }

  .flowwp-table__buttons {
    justify-content: flex-start;
  }
}

.flowwp-pill {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--flow-border-strong);
  background: var(--flow-surface-sunken);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flow-muted);
}

.flowwp-pill--active {
  border-color: var(--flow-success);
  background: #f0fdf4;
  color: var(--flow-success-text);
}

.flowwp-pill--draft {
  border-color: var(--flow-warning);
  background: #fffbeb;
  color: var(--flow-warning-text);
}

/* -- Workflow list: toolbar ------------------------------------------------ */

.flowwp-listbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.flowwp-listbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.flowwp-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface-sunken);
}

.flowwp-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.flowwp-tabs__tab:hover {
  color: var(--flow-text);
}

.flowwp-tabs__tab.is-current {
  background: var(--flow-surface);
  color: var(--flow-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.flowwp-tabs__tab:focus-visible,
.flowwp-appchip:focus-visible,
.flowwp-switch:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 2px;
}

.flowwp-tabs__count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--flow-border);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.flowwp-tabs__tab.is-current .flowwp-tabs__count {
  background: rgba(124, 58, 237, 0.12);
  color: var(--flow-primary);
}

.flowwp-tabs__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flow-success);
}

.flowwp-listbar__pulse {
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-listbar__pulse strong {
  color: var(--flow-text);
  font-family: var(--flow-mono);
}

.flowwp-listbar__search {
  width: 240px;
  max-width: 100%;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 999px;
  background: var(--flow-surface);
  font-family: inherit;
  font-size: 13px;
}

.flowwp-listbar__search:focus {
  border-color: var(--flow-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.flowwp-listbar__apps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.flowwp-appchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.flowwp-appchip .flowwp-app {
  width: 20px;
  height: 20px;
  padding: 2px;
  box-shadow: none;
}

.flowwp-appchip:hover {
  border-color: var(--flow-border-strong);
}

.flowwp-appchip.is-current {
  border-color: var(--flow-primary);
  background: rgba(124, 58, 237, 0.07);
  color: var(--flow-primary);
}

/* -- Workflow list: rows --------------------------------------------------- */

.flowwp-table__status {
  width: 1%;
  white-space: nowrap;
}

/* A live workflow carries the brand gradient down its left edge. */
.flowwp-row td:first-child {
  position: relative;
}

.flowwp-row--active td:first-child::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--flow-primary), var(--flow-accent));
}

.flowwp-row .flowwp-table__cell--name {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.flowwp-row .flowwp-table__name {
  max-width: 100%;
}

/* The switch. */
.flowwp-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.flowwp-switch:disabled {
  cursor: not-allowed;
}

.flowwp-switch__track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  transition: background 0.2s, border-color 0.2s;
}

/* Never been live: a dashed outline, so it reads as not yet started. */
.flowwp-switch--draft .flowwp-switch__track {
  border-style: dashed;
}

.flowwp-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.flowwp-switch[aria-checked='true'] .flowwp-switch__track {
  border-color: transparent;
  background: linear-gradient(90deg, var(--flow-primary), var(--flow-accent));
}

.flowwp-switch[aria-checked='true'] .flowwp-switch__thumb {
  transform: translateX(16px);
}

.flowwp-switch:hover:not(:disabled) .flowwp-switch__track {
  border-color: var(--flow-primary);
}

.flowwp-switch:disabled:not(.is-pending) .flowwp-switch__track {
  opacity: 0.5;
}

.flowwp-switch.is-pending .flowwp-switch__thumb {
  animation: flowwp-switch-wait 0.8s ease-in-out infinite alternate;
}

@keyframes flowwp-switch-wait {
  to {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.25);
  }
}

.flowwp-switch__word {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 48px;
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-muted);
}

.flowwp-switch--draft .flowwp-switch__word {
  color: var(--flow-warning-text);
}

.flowwp-switch[aria-checked='true'] .flowwp-switch__word {
  color: var(--flow-success-text);
}

.flowwp-switch__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flow-success);
}

.flowwp-switch__dot::after,
.flowwp-tabs__live {
  animation: flowwp-live 2s ease-out infinite;
}

.flowwp-switch__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--flow-success);
}

@keyframes flowwp-live {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

/* App logos. */
.flowwp-app {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
  box-shadow: 0 0 0 2px var(--flow-surface);
  transition: transform 0.15s;
}

.flowwp-app--md {
  width: 32px;
  height: 32px;
  padding: 5px;
}

.flowwp-app--sm {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 7px;
}

.flowwp-app__logo {
  display: inline-flex;
  width: 100%;
  height: 100%;
}

.flowwp-app__logo svg {
  width: 100%;
  height: 100%;
}

.flowwp-app__letter {
  font-size: 12px;
  font-weight: 700;
  color: var(--flow-muted);
}

.flowwp-app--more {
  background: var(--flow-surface-sunken);
  font-size: 11px;
  font-weight: 600;
  color: var(--flow-muted);
  cursor: default;
}

/* The plugin it connects is not active: the workflow cannot do this step. */
.flowwp-app.is-missing .flowwp-app__logo {
  filter: grayscale(1);
  opacity: 0.5;
}

.flowwp-app.is-missing::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--flow-surface);
  border-radius: 50%;
  background: var(--flow-warning);
}

.flowwp-flow {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.flowwp-flow--empty,
.flowwp-flow__hint {
  font-size: 12px;
  color: var(--flow-faint);
}

.flowwp-flow__hint {
  margin-left: 4px;
}

.flowwp-flow__trigger,
.flowwp-flow__steps {
  display: inline-flex;
  align-items: center;
}

.flowwp-flow__trigger {
  gap: 4px;
}

/* Steps overlap like a stack of cards and fan out on hover. */
.flowwp-flow__steps .flowwp-app + .flowwp-app {
  margin-left: -6px;
}

.flowwp-flow__steps:hover .flowwp-app + .flowwp-app {
  margin-left: 3px;
}

.flowwp-flow__steps .flowwp-app {
  transition: margin 0.2s, transform 0.15s;
}

.flowwp-flow .flowwp-app:hover {
  z-index: 1;
  transform: translateY(-2px);
}

.flowwp-flow__none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px dashed var(--flow-border-strong);
  border-radius: 8px;
  color: var(--flow-faint);
  font-weight: 600;
}

/* The wire between trigger and steps: dashed when idle, a gradient with a
   travelling spark when the workflow is live. */
.flowwp-flow__wire {
  position: relative;
  width: 30px;
  height: 2px;
  margin: 0 6px;
  background-image: linear-gradient(90deg, var(--flow-border-strong) 50%, transparent 50%);
  background-size: 6px 2px;
}

.flowwp-flow__wire::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -2px;
  border: 4px solid transparent;
  border-left: 5px solid var(--flow-border-strong);
  border-right: none;
}

.flowwp-flow.is-live .flowwp-flow__wire {
  background: linear-gradient(90deg, var(--flow-primary), var(--flow-accent));
}

.flowwp-flow.is-live .flowwp-flow__wire::after {
  border-left-color: var(--flow-accent);
}

.flowwp-flow__pulse {
  display: none;
}

.flowwp-flow.is-live .flowwp-flow__pulse {
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 1px var(--flow-accent);
  animation: flowwp-spark 1.8s ease-in-out infinite;
}

@keyframes flowwp-spark {
  0% {
    left: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 6px);
    opacity: 0;
  }
}

/* Run health. */
.flowwp-health {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}

.flowwp-health--none {
  font-size: 12px;
  color: var(--flow-faint);
}

.flowwp-health__bar {
  width: 96px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #fecaca;
}

.flowwp-health__ok {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--flow-success);
}

.flowwp-health--fair .flowwp-health__ok {
  background: var(--flow-warning);
}

.flowwp-health__text {
  font-size: 12px;
  color: var(--flow-muted);
  white-space: nowrap;
}

.flowwp-health__text strong {
  font-family: var(--flow-mono);
  color: var(--flow-text);
}

/* Why a workflow could not go live, under its row. */
.flowwp-table__detail td {
  padding: 0 16px 14px;
}

.flowwp-table tbody tr.flowwp-table__detail:hover {
  background: none;
}

.flowwp-golive {
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--flow-danger);
  border-radius: 8px;
  background: #fef2f2;
  animation: flowwp-golive-in 0.2s ease-out;
}

@keyframes flowwp-golive-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.flowwp-golive__title {
  display: block;
  font-size: 13px;
  color: var(--flow-danger-text);
}

.flowwp-golive__text {
  margin: 2px 0 0;
  font-size: 13px;
}

.flowwp-golive__list {
  margin: 6px 0 0 18px;
  padding: 0;
  list-style: disc;
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-golive__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-switch__thumb,
  .flowwp-flow__steps .flowwp-app,
  .flowwp-golive {
    transition: none;
    animation: none;
  }

  .flowwp-switch.is-pending .flowwp-switch__thumb,
  .flowwp-switch__dot::after,
  .flowwp-tabs__live,
  .flowwp-flow.is-live .flowwp-flow__pulse {
    animation: none;
  }
}

@media (max-width: 900px) {
  .flowwp-listbar__search {
    width: 100%;
    margin-left: 0;
  }

  .flowwp-row .flowwp-table__cell--name {
    align-items: flex-end;
  }

  .flowwp-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .flowwp-listhead {
    flex-wrap: wrap;
  }

  /* The switch says what it is, and the live accent needs this ::before
     more than a "Status" label does. */
  .flowwp-table .flowwp-table__status {
    justify-content: flex-start;
  }

  .flowwp-row:not(.flowwp-row--active) .flowwp-table__status::before {
    content: none;
  }
}

/* -- Editor layout --------------------------------------------------------- */

.flowwp-editor {
  display: flex;
  flex-direction: column;
  /* Fill the admin viewport minus the WordPress admin bar and our margins. */
  height: calc(100vh - 100px);
  min-height: 560px;
}

.flowwp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--flow-border);
  background: var(--flow-surface);
  flex-wrap: wrap;
}

.flowwp-toolbar__left,
.flowwp-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flowwp-toolbar__name {
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: text;
}

/* Looks like a title until you approach it, then like a field. Anything more
   assertive would put a permanent input in a toolbar that is mostly buttons. */
.flowwp-toolbar__name:hover:not(:disabled) {
  border-color: var(--flow-border-strong);
  background: var(--flow-surface-sunken);
}

.flowwp-toolbar__name:disabled {
  cursor: default;
}

.flowwp-toolbar__rename {
  padding: 3px 8px;
  border: 1px solid var(--flow-primary);
  border-radius: 6px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}

.flowwp-toolbar__notice {
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-validation {
  padding: 10px 16px;
  border-bottom: 1px solid var(--flow-danger);
  background: #fef2f2;
  color: var(--flow-danger-text);
  font-size: 13px;
}

.flowwp-validation ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--flow-text);
}

.flowwp-editor__body {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  flex: 1;
  min-height: 0;
}

/* -- Panels ---------------------------------------------------------------- */

.flowwp-panel-left,
.flowwp-panel-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--flow-surface);
}

.flowwp-panel-left {
  border-right: 1px solid var(--flow-border);
  /* The integration flyout is positioned against this panel. */
  position: relative;
}

.flowwp-panel-right {
  border-left: 1px solid var(--flow-border);
}

.flowwp-panel__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--flow-border);
}

.flowwp-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.flowwp-panel__search {
  padding: 12px 16px 0;
}

.flowwp-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.flowwp-panel__actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--flow-border);
}

/* -- Upsell ---------------------------------------------------------------- */

/* This sat at the bottom of the panel as a line of small tinted text and went
   unread. It is the only thing in the interface asking for money, so it now
   reads as an offer: brand gradient, an open padlock, and the names of what is
   behind it rather than a bare count. */
.flowwp-upsell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 14px;
  border: none;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
  text-decoration: none;
  transition: filter 120ms ease;
}

.flowwp-upsell:hover,
.flowwp-upsell:focus-visible {
  filter: brightness(1.08);
  color: #fff;
}

.flowwp-upsell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.flowwp-upsell__icon svg {
  width: 17px;
  height: 17px;
}

.flowwp-upsell__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.flowwp-upsell__headline {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.flowwp-upsell__sub {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  /* Legible on the gradient without being as loud as the headline. */
  color: rgba(255, 255, 255, 0.85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-upsell__go {
  flex-shrink: 0;
  font-size: 15px;
  transition: transform 120ms ease;
}

.flowwp-upsell:hover .flowwp-upsell__go {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-upsell,
  .flowwp-upsell__go {
    transition: none;
  }

  .flowwp-upsell:hover .flowwp-upsell__go {
    transform: none;
  }
}

/* -- Node library ---------------------------------------------------------- */

.flowwp-library__group {
  margin-bottom: 16px;
}

.flowwp-library__heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--flow-muted);
}

.flowwp-library__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: grab;
}

.flowwp-library__item:hover {
  border-color: var(--flow-primary);
  background: var(--flow-surface-sunken);
}

.flowwp-library__item.is-locked {
  cursor: not-allowed;
  color: var(--flow-muted);
}

.flowwp-library__badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}

/* An install, not a purchase: neutral, so it never reads as a plan. */
.flowwp-library__badge--plugin {
  flex-shrink: 0;
  padding: 1px 7px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--flow-muted);
  white-space: nowrap;
}

/* -- Fields ---------------------------------------------------------------- */

.flowwp-field {
  display: block;
  margin-bottom: 16px;
}

.flowwp-field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-text);
}

.flowwp-field__required {
  color: var(--flow-danger-text);
}

.flowwp-field input[type='text'],
.flowwp-field input[type='number'],
.flowwp-field input[type='search'],
.flowwp-field input[type='password'],
.flowwp-field select,
.flowwp-field textarea,
.flowwp-panel__search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 13px;
}

.flowwp-field textarea {
  font-family: var(--flow-mono);
  resize: vertical;
}

.flowwp-field input:focus,
.flowwp-field select:focus,
.flowwp-field textarea:focus,
.flowwp-panel__search input:focus {
  outline: none;
  border-color: var(--flow-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.flowwp-field.has-error input,
.flowwp-field.has-error textarea,
.flowwp-field.has-error select {
  border-color: var(--flow-danger);
}

.flowwp-field__hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-field__token {
  font-family: var(--flow-mono);
  color: var(--flow-faint);
}

.flowwp-field__error {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--flow-danger-text);
}

/* -- Canvas ---------------------------------------------------------------- */

.flowwp-canvas {
  position: relative;
  min-height: 0;
  background: var(--flow-page);
}

.flowwp-canvas .react-flow__attribution {
  background: transparent;
  color: var(--flow-faint);
}

.flowwp-canvas__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--flow-muted);
  font-size: 13px;
}

/* React Flow's own wrapper needs the cursor too, not just our card: the card
   does not fill the wrapper's padding, and the mismatch is what made the
   pointer flicker back to an arrow at the edges. */
.react-flow__node {
  cursor: grab;
}

.react-flow__node.dragging,
.react-flow__node.dragging *,
.react-flow__node.dragging .flowwp-node,
.flowwp-node:active {
  cursor: grabbing;
}

/* Promote only the node being dragged: a layer per node would cost memory for
   nothing, and promoting mid-gesture is too late to help. */
.react-flow__node.dragging {
  will-change: transform;
}

/* Text inside a draggable card should still look like text. */
.flowwp-node__sub,
.flowwp-node__title {
  user-select: none;
}

/* Ports are targets, not handles for moving the node. */
.flowwp-handle {
  cursor: crosshair !important;
}

/* -- Shared states --------------------------------------------------------- */

.flowwp-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--flow-muted);
}

.flowwp-empty__hint {
  margin: 8px 0 0;
  font-family: var(--flow-mono);
  font-size: 12px;
  color: var(--flow-faint);
}

.flowwp-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flow-muted);
}

.flowwp-error {
  padding: 14px 16px;
  border: 1px solid var(--flow-danger);
  border-radius: var(--flow-radius);
  background: #fef2f2;
  color: var(--flow-text);
}

.flowwp-error__code {
  font-family: var(--flow-mono);
  font-size: 12px;
  color: var(--flow-danger-text);
}

@media (max-width: 1200px) {
  .flowwp-editor__body {
    grid-template-columns: 200px 1fr 280px;
  }
}

/* -- Library: integration groups ------------------------------------------- */

.flowwp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flowwp-panel__count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  font-family: var(--flow-mono);
  font-size: 11px;
  color: var(--flow-muted);
}

/* -- Integration rows ------------------------------------------------------ */

.flowwp-library__integration {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 10px;
  border: 1px solid var(--flow-border);
  border-radius: 9px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.flowwp-library__integration:hover {
  border-color: var(--flow-primary);
  background: var(--flow-surface-sunken);
}


.flowwp-library__integration-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.flowwp-library__integration-meta {
  font-family: var(--flow-mono);
  font-size: 10px;
  color: var(--flow-muted);
}

.flowwp-library__results {
  margin-bottom: 14px;
}

/* Bigger than the node glyphs because these are brand logos, not line icons:
   the WPForms and ACF marks are illustrations and turn to mush at 16px. */
.flowwp-library__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--flow-primary);
  flex-shrink: 0;
}

/* Brand logos carry their own fills, so they ignore the currentColor the rest
   of the interface tints with — an unavailable integration would otherwise look
   exactly as live as an installed one. Desaturating says "not here" without
   repainting somebody's logo in a colour they would not recognise. */
.flowwp-library__integration.is-unavailable .flowwp-library__icon {
  filter: grayscale(1);
  opacity: 0.5;
}

.flowwp-library__icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-library__integration-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-library__count {
  font-family: var(--flow-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--flow-muted);
}

.flowwp-library__chevron {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--flow-faint);
}

.flowwp-library__integration:hover .flowwp-library__chevron {
  color: var(--flow-primary);
}

/* -- Integration flyout ---------------------------------------------------- */

/* Sits over the panel and a little over the canvas: wider than the list it
   replaces, because node labels are sentences and the list is names. */
.flowwp-library__drill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 300px;
  background: var(--flow-surface);
  border-right: 1px solid var(--flow-border);
  box-shadow: 6px 0 24px rgba(15, 23, 42, 0.12);
  animation: flowwp-drill-in 140ms ease-out;
}

@keyframes flowwp-drill-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-library__drill {
    animation: none;
  }
}

.flowwp-library__drill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--flow-border);
}

.flowwp-library__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--flow-border);
  border-radius: 6px;
  background: var(--flow-surface-sunken);
  color: var(--flow-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.flowwp-library__back:hover {
  border-color: var(--flow-primary);
  color: var(--flow-primary);
}

.flowwp-library__drill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-library__drill-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 16px;
}

.flowwp-library__requirement {
  margin: 10px 14px 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fffbeb;
  font-size: 11px;
  color: var(--flow-warning-text);
}

.flowwp-library__group {
  margin: 0 0 16px;
}

/* -- Icons ----------------------------------------------------------------- */

.flowwp-library__row-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--flow-muted);
}

.flowwp-library__row-icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-library__item:hover .flowwp-library__row-icon {
  color: var(--flow-primary);
}

.flowwp-library__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Token picker ---------------------------------------------------------- */

.flowwp-field__labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.flowwp-field__labelrow .flowwp-field__label {
  margin-bottom: 0;
}

.flowwp-field__pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 6px;
  background: var(--flow-surface-sunken);
  color: var(--flow-primary);
  font-family: var(--flow-mono);
  font-size: 11px;
  cursor: pointer;
}

.flowwp-field__pick-text {
  font-family: var(--flow-font);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.flowwp-field__pick:hover,
.flowwp-field__pick.is-open {
  border-color: var(--flow-primary);
  background: #f5f3ff;
}

/* The field whose dropdown is open, so the connection between the two is
   visible even when the list covers something else. */
.flowwp-field.is-picking input,
.flowwp-field.is-picking textarea {
  border-color: var(--flow-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* -- Webhook setup --------------------------------------------------------- */

.flowwp-webhook {
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface-sunken);
}

.flowwp-webhook__intro,
.flowwp-webhook__note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--flow-muted);
}

.flowwp-webhook__note {
  margin: 8px 0 0;
}

.flowwp-webhook__note code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--flow-surface);
  font-family: var(--flow-mono);
  font-size: 11px;
}

.flowwp-webhook__label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flow-muted);
}

.flowwp-webhook__row {
  display: flex;
  gap: 6px;
}

.flowwp-webhook__url {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 6px;
  background: var(--flow-surface);
  font-family: var(--flow-mono);
  font-size: 11px;
}

.flowwp-webhook__regen {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.flowwp-webhook__regen:hover {
  color: var(--flow-danger-text);
}

/* -- Data dropdown --------------------------------------------------------- */

/* Fixed to the viewport and rendered in a portal: the configuration panel
   scrolls and clips, and a clipped dropdown stops reading as a dropdown. */
.flowwp-picker {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--flow-primary);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: flowwp-picker-in 110ms ease-out;
}

@keyframes flowwp-picker-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-picker {
    animation: none;
  }
}

.flowwp-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--flow-border);
  background: var(--flow-surface-sunken);
  font-size: 12px;
}

.flowwp-picker__close {
  border: none;
  background: none;
  color: var(--flow-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.flowwp-picker__search {
  width: calc(100% - 20px);
  flex-shrink: 0;
  margin: 8px 10px 0;
  padding: 5px 8px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
}

.flowwp-picker__hint {
  margin: 8px 10px;
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-picker__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px 8px;
}

.flowwp-picker__foot {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 10px;
  border-top: 1px solid var(--flow-border);
  background: var(--flow-surface-sunken);
  font-size: 10px;
  color: var(--flow-muted);
}

.flowwp-picker__foot kbd {
  padding: 0 4px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 4px;
  background: var(--flow-surface);
  font-family: var(--flow-mono);
  font-size: 10px;
}

.flowwp-picker__group-title {
  margin: 8px 4px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-picker__leaf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.flowwp-picker__leaf:hover,
.flowwp-picker__leaf.is-active {
  background: #f5f3ff;
}

.flowwp-picker__leaf.is-copied {
  background: #ecfdf5;
}

.flowwp-picker__leaf-label {
  color: var(--flow-text);
  white-space: nowrap;
}

.flowwp-picker__leaf-sample {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--flow-mono);
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-picker__leaf-type {
  font-size: 10px;
  color: var(--flow-faint);
}

.flowwp-picker__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The way into formatting a value: small and beside Close, so the list of
   fields stays the point of the dropdown. */
.flowwp-picker__format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 999px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.flowwp-picker__format span {
  font-family: var(--flow-mono);
  font-style: italic;
  color: var(--flow-primary);
}

.flowwp-picker__format:hover,
.flowwp-picker__format.is-on {
  border-color: var(--flow-primary);
  background: #f5f3ff;
}

.flowwp-picker__link {
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.flowwp-picker__hint code {
  font-family: var(--flow-mono);
  font-size: 10.5px;
}

.flowwp-picker__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 8px 10px 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f5f3ff;
  font-size: 11px;
  color: var(--flow-text);
}

.flowwp-picker__chip button {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--flow-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.flowwp-picker__leaf.is-locked {
  cursor: not-allowed;
}

.flowwp-picker__leaf.is-locked .flowwp-picker__leaf-label {
  color: var(--flow-muted);
}

.flowwp-picker__lock {
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
}

/* -- Template gallery ------------------------------------------------------- */

.flowwp-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}

.flowwp-modal__dialog {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(760px, 100%);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.flowwp-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}

.flowwp-modal__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--flow-border);
}

.flowwp-modal__search {
  flex: 0 1 280px;
  min-width: 180px;
}

.flowwp-modal__notice {
  margin: 12px 20px 0;
}

.flowwp-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  background: var(--flow-surface-sunken);
}

.flowwp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowwp-chip {
  padding: 3px 10px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 999px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.flowwp-chip.is-on {
  border-color: var(--flow-primary);
  background: #f5f3ff;
  color: var(--flow-primary);
}

.flowwp-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.flowwp-template {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 170px;
  padding: 14px;
  border: 1px solid var(--flow-border);
  border-radius: 10px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.flowwp-template:hover:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--flow-primary);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12);
}

.flowwp-template:disabled,
.flowwp-template.is-locked {
  cursor: not-allowed;
}

.flowwp-template.is-locked .flowwp-template__name,
.flowwp-template.is-locked .flowwp-template__desc {
  color: var(--flow-muted);
}

.flowwp-gallery__section {
  margin-top: 18px;
}

.flowwp-gallery__sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
}

.flowwp-gallery__sectiontitle {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-gallery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--flow-border);
  background: var(--flow-surface);
}

.flowwp-template--blank {
  align-items: flex-start;
  justify-content: center;
  border-style: dashed;
}

.flowwp-template__plus {
  font-size: 24px;
  line-height: 1;
  color: var(--flow-primary);
}

.flowwp-template__icons {
  display: flex;
  gap: 6px;
  min-height: 24px;
}

.flowwp-template__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.flowwp-template__icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-template__name {
  font-size: 13.5px;
  line-height: 1.35;
}

.flowwp-template__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--flow-muted);
}

.flowwp-template__setup {
  font-size: 11px;
  color: var(--flow-text);
}

.flowwp-template__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.flowwp-template__category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-faint);
}

.flowwp-template__free {
  padding: 1px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 10px;
  text-transform: uppercase;
}

/* -- Templates page ---------------------------------------------------------- */

.flowwp-tpl {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .flowwp-tpl {
    grid-template-columns: minmax(0, 1fr);
  }
}

.flowwp-tpl__filters {
  position: sticky;
  top: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
}

.flowwp-tpl__search {
  width: 100%;
}

.flowwp-tpl__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.flowwp-tpl__legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-tpl__facet {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.flowwp-tpl__facet:hover {
  background: var(--flow-surface-sunken);
}

.flowwp-tpl__facet.is-on {
  background: #f5f3ff;
  color: var(--flow-primary);
  font-weight: 600;
}

.flowwp-tpl__facet-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.flowwp-tpl__facet-icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-tpl__facet-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-tpl__facet-count {
  font-size: 11px;
  color: var(--flow-faint);
}

.flowwp-tpl__clear {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-primary);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.flowwp-tpl__count {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--flow-muted);
}

/* The plan a template belongs to: quiet for Free, the plan colours above it. */
.flowwp-tier {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.flowwp-tier--free {
  background: #ecfdf5;
  color: #047857;
}

.flowwp-tier--personal {
  background: #eff6ff;
  color: #1d4ed8;
}

.flowwp-tier--business {
  background: #f5f3ff;
  color: #6d28d9;
}

.flowwp-tier--agency {
  background: #fff7ed;
  color: #c2410c;
}

.flowwp-tpl-details {
  width: min(640px, 100%);
}

.flowwp-tpl-details__title {
  margin: 6px 0;
  font-size: 18px;
  line-height: 1.3;
}

.flowwp-tpl-details__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--flow-surface);
}

.flowwp-tpl-details__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.flowwp-tpl-details__heading {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-tpl-details__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flowwp-tpl-details__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
}

.flowwp-tpl-details__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  font-size: 11px;
  font-weight: 700;
  color: var(--flow-muted);
}

.flowwp-tpl-details__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--flow-primary);
}

.flowwp-tpl-details__icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-tpl-details__step-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
}

.flowwp-tpl-details__step-text span {
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-tpl-details__setup {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
}

.flowwp-tpl-details__status {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
}

.flowwp-tpl-details__status.is-ready {
  background: #ecfdf5;
  color: #065f46;
}

.flowwp-tpl-details__status.is-plugin {
  background: #fffbeb;
  color: #92400e;
}

.flowwp-tpl-details__status.is-locked {
  background: #f5f3ff;
  color: #5b21b6;
}

.flowwp-tpl-details__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--flow-border);
}

/* -- Schedules and usage ---------------------------------------------------- */

.flowwp-weekdays {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.flowwp-weekdays__day {
  min-width: 40px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 7px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.flowwp-weekdays__day.is-on {
  border-color: var(--flow-primary);
  background: #f5f3ff;
  color: var(--flow-primary);
  font-weight: 600;
}

.flowwp-weekdays__day:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 1px;
}

.flowwp-weekdays__preset {
  margin-left: 6px;
  font-size: 12px;
}

/* -- Row actions ------------------------------------------------------------ */

/* Quiet until the row is looked at, so a long list reads as names and numbers
   rather than a wall of buttons; a hovered or focused row shows them clearly. */
.flowwp-rowactions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.flowwp-rowbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.flowwp-rowbtn svg {
  flex-shrink: 0;
}

.flowwp-table tbody tr:hover .flowwp-rowbtn,
.flowwp-table tbody tr:focus-within .flowwp-rowbtn {
  color: var(--flow-text);
}

.flowwp-rowbtn:hover:not(:disabled),
.flowwp-rowbtn.is-open {
  border-color: var(--flow-border);
  background: var(--flow-surface);
  color: var(--flow-primary) !important;
  box-shadow: var(--flow-shadow);
}

.flowwp-rowbtn:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 1px;
}

.flowwp-rowbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.flowwp-rowbtn--icon {
  width: 30px;
  padding: 0;
}

.flowwp-rowactions--confirm {
  gap: 6px;
}

.flowwp-rowactions__question {
  margin-right: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--flow-danger-text);
}

.flowwp-rowbtn.flowwp-rowbtn--danger,
.flowwp-table tbody tr:hover .flowwp-rowbtn--danger {
  border-color: var(--flow-danger);
  background: var(--flow-danger);
  color: #fff;
}

.flowwp-rowbtn.flowwp-rowbtn--danger:hover:not(:disabled) {
  border-color: var(--flow-danger-text);
  background: var(--flow-danger-text);
  color: #fff !important;
}

.flowwp-rowmenu {
  position: fixed;
  z-index: 100000;
  width: 196px;
  padding: 6px;
  border: 1px solid var(--flow-border);
  border-radius: 10px;
  background: var(--flow-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.flowwp-rowmenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.flowwp-rowmenu__item:hover:not(:disabled),
.flowwp-rowmenu__item:focus-visible {
  outline: none;
  background: var(--flow-surface-sunken);
}

.flowwp-rowmenu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--flow-primary);
}

.flowwp-rowmenu__item:disabled {
  color: var(--flow-faint);
  cursor: not-allowed;
}

.flowwp-rowmenu__icon {
  display: inline-flex;
  color: var(--flow-muted);
}

.flowwp-rowmenu__label {
  flex: 1;
}

.flowwp-rowmenu__hint {
  padding: 2px 6px;
  border-radius: 999px;
  background: #f5f3ff;
  color: var(--flow-primary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.flowwp-rowmenu__item.is-danger {
  color: var(--flow-danger-text);
}

.flowwp-rowmenu__item.is-danger .flowwp-rowmenu__icon {
  color: inherit;
}

.flowwp-rowmenu__item.is-danger:hover:not(:disabled) {
  background: #fef2f2;
}

.flowwp-rowmenu__divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--flow-border);
}

@media (max-width: 900px) {
  .flowwp-rowactions {
    justify-content: flex-start;
  }

  /* No hover on a phone: show them at full strength. */
  .flowwp-rowbtn {
    color: var(--flow-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-rowbtn {
    transition: none;
  }
}

/* -- Import and export ------------------------------------------------------ */

.flowwp-notice {
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: var(--flow-radius);
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
}

.flowwp-notice__list {
  margin: 6px 0;
  padding-left: 18px;
  font-size: 12.5px;
}

.flowwp-transfer {
  width: min(640px, 100%);
}

.flowwp-transfer__file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.flowwp-transfer__heading {
  margin: 4px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-transfer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.flowwp-transfer__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
}

.flowwp-transfer__item--choice {
  flex-direction: column;
  align-items: stretch;
}

.flowwp-transfer__choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.flowwp-transfer__choice > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flowwp-transfer__meta {
  font-size: 11.5px;
  color: var(--flow-muted);
}

.flowwp-transfer__problems {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
}

.flowwp-transfer__problem {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.flowwp-transfer__problem--error {
  background: #fef2f2;
  color: #b91c1c;
}

.flowwp-transfer__problem--warning {
  background: #fffbeb;
  color: #92400e;
}

.flowwp-transfer__problem--info {
  background: #eff6ff;
  color: #1e40af;
}

/* -- When a step fails ------------------------------------------------------ */

.flowwp-onerror {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--flow-border);
}

.flowwp-onerror__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.flowwp-onerror__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.flowwp-onerror__retry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.flowwp-onerror__retry label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-onerror__retry input,
.flowwp-onerror__retry select {
  width: 100%;
  min-width: 0;
}

.flowwp-onerror__warning {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
}

/* -- File import ------------------------------------------------------------ */

.flowwp-import {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flowwp-import__drop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 14px;
  border: 1px dashed var(--flow-border-strong);
  border-radius: 8px;
  background: var(--flow-surface-sunken);
  color: var(--flow-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.flowwp-import__drop:hover:not(:disabled) {
  border-color: var(--flow-primary);
}

.flowwp-import__drop span {
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-import__file,
.flowwp-import__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
}

.flowwp-import__filehead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.flowwp-import__format {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f5f3ff;
  color: var(--flow-primary);
  font-size: 10px;
  font-weight: 700;
}

.flowwp-import__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.flowwp-import__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.flowwp-import__columns code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--flow-surface-sunken);
  font-size: 11px;
  color: var(--flow-text);
}

.flowwp-import__columns span {
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-import__options summary {
  font-size: 12px;
  color: var(--flow-muted);
  cursor: pointer;
}

.flowwp-import__options[open] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flowwp-import__options input {
  width: 100%;
}

.flowwp-import__error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
}

.flowwp-import__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.flowwp-import__label em {
  font-style: normal;
  font-weight: 400;
  color: var(--flow-muted);
}

.flowwp-import__label select {
  width: 100%;
}

.flowwp-import__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flowwp-import__statusline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.flowwp-import__live {
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-import__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
}

.flowwp-import__bar span {
  display: block;
  height: 100%;
  background: var(--flow-primary);
  transition: width 0.3s ease;
}

.flowwp-import__runs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.flowwp-import__runs div {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--flow-surface-sunken);
}

.flowwp-import__runs dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flow-muted);
}

.flowwp-import__runs dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.flowwp-import__runs .is-bad dd {
  color: #b91c1c;
}

.flowwp-import__failed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.flowwp-import__failed span {
  margin-right: 4px;
  font-weight: 600;
}

/* -- Set variables ---------------------------------------------------------- */

.flowwp-variables {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flowwp-variables__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
}

.flowwp-variables__line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flowwp-variables__name {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.flowwp-variables__line .flowwp-conditions__remove {
  flex-shrink: 0;
}

.flowwp-variables__mode {
  width: 100%;
}

.flowwp-variables__token {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--flow-surface-sunken);
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-variables__hint {
  font-size: 11px;
  color: #b91c1c;
}

.flowwp-variables > .flowwp-conditions__add {
  align-self: flex-start;
}

/* -- Condition builder ------------------------------------------------------ */

.flowwp-conditions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flowwp-conditions__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface-sunken);
}

.flowwp-conditions__match {
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-conditions__match select {
  width: auto;
  padding: 1px 4px;
  font-size: 11px;
}

/* AND / OR between groups: a pill on the spine, so the grouping reads at a glance. */
.flowwp-conditions__joiner {
  align-self: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f5f3ff;
  color: var(--flow-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.flowwp-conditions__joiner--rule {
  align-self: flex-start;
  background: none;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--flow-muted);
}

.flowwp-conditions__rule {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px 22px 6px 6px;
  border: 1px solid var(--flow-border);
  border-radius: 6px;
  background: var(--flow-surface);
}

.flowwp-conditions__value {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.flowwp-conditions__value input {
  flex: 1;
  min-width: 0;
}

.flowwp-conditions__value.is-picking input {
  border-color: var(--flow-primary);
}

.flowwp-conditions__pick {
  flex-shrink: 0;
  padding: 0 6px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 6px;
  background: var(--flow-surface);
  color: var(--flow-primary);
  font-family: var(--flow-mono);
  font-size: 11px;
  cursor: pointer;
}

.flowwp-conditions__operator {
  width: 100%;
  font-size: 12px;
}

.flowwp-conditions__remove {
  position: absolute;
  top: 3px;
  right: 5px;
  border: none;
  background: none;
  color: var(--flow-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.flowwp-conditions__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.flowwp-conditions__add {
  padding: 2px 8px;
  border: 1px dashed var(--flow-border-strong);
  border-radius: 6px;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.flowwp-conditions__add:disabled {
  color: var(--flow-muted);
  cursor: not-allowed;
}

.flowwp-routes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flowwp-routes__route {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
}

.flowwp-routes__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flowwp-routes__head input {
  flex: 1;
  min-width: 0;
}

.flowwp-routes__head .flowwp-conditions__remove {
  position: static;
}

.flowwp-routes__port {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flow-muted);
}

/* -- Test run drawer ------------------------------------------------------- */

.flowwp-run {
  border-top: 1px solid var(--flow-border);
  background: var(--flow-surface);
  max-height: 34vh;
  display: flex;
  flex-direction: column;
}

.flowwp-run__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--flow-border);
  background: var(--flow-surface-sunken);
  font-size: 13px;
}

.flowwp-run__head.is-bad {
  background: #fef2f2;
}

.flowwp-run__headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.flowwp-run__head .flowwp-picker__close {
  margin-left: auto;
}

.flowwp-run__meta {
  font-size: 11px;
  color: var(--flow-muted);
}

/* One glyph carrying the outcome, so a run can be read without reading. */
.flowwp-run__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.flowwp-run__mark.is-ok {
  background: #dcfce7;
  color: var(--flow-success-text);
}

.flowwp-run__mark.is-bad {
  background: #fee2e2;
  color: var(--flow-danger-text);
}

.flowwp-run__mark.is-idle {
  background: var(--flow-surface-sunken);
  color: var(--flow-faint);
}

/* In the editor the results are a drawer at the bottom of a fixed layout; on
   the history screen the same component is the page, so it grows instead. */
.flowwp-run--page {
  max-height: none;
  margin-top: 20px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  box-shadow: var(--flow-shadow);
  overflow: hidden;
}

.flowwp-run__empty {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--flow-muted);
}

.flowwp-run__datas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.flowwp-run__data-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flow-muted);
}

/* The open row's detail, directly beneath it. Tinted and inset so a long list
   reads as "this row, expanded" rather than as another row. */
.flowwp-table__detail > td {
  padding: 0 16px 16px;
  background: var(--flow-surface-sunken);
}

.flowwp-table tbody tr.is-open {
  background: var(--flow-surface-sunken);
}

.flowwp-table tbody tr.is-open td {
  border-bottom-color: transparent;
}

.flowwp-table__detail .flowwp-run--page {
  margin-top: 0;
  background: var(--flow-surface);
}

.flowwp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.flowwp-run__steps {
  overflow-y: auto;
  margin: 0;
  padding: 8px 16px 12px;
  list-style: none;
}

.flowwp-run__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--flow-border);
  border-left: 3px solid var(--flow-border-strong);
  border-radius: 8px;
}

.flowwp-run__step.is-ok   { border-left-color: var(--flow-success); }
.flowwp-run__step.is-bad  { border-left-color: var(--flow-danger); }
.flowwp-run__step.is-idle { border-left-color: var(--flow-faint); }

.flowwp-run__index {
  width: 16px;
  flex-shrink: 0;
  font-family: var(--flow-mono);
  font-size: 11px;
  color: var(--flow-faint);
  text-align: right;
}

.flowwp-run__step-body {
  flex: 1;
  min-width: 0;
}

.flowwp-run__step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.flowwp-run__step-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--flow-muted);
}

.flowwp-run__step-icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-run__step-name {
  font-size: 13px;
  font-weight: 600;
}

.flowwp-run__step-type {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--flow-muted);
}

.flowwp-run__step-status {
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-run__step-time {
  margin-left: auto;
  font-family: var(--flow-mono);
  font-size: 11px;
  color: var(--flow-faint);
}

.flowwp-run__step-error {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--flow-danger-text);
}

.flowwp-run__step-note {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-run__toggle {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-primary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.flowwp-run__toggle:hover {
  text-decoration: underline;
}

.flowwp-run__output {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 160px;
  overflow: auto;
  border-radius: 6px;
  background: var(--flow-surface-sunken);
  font-family: var(--flow-mono);
  font-size: 11px;
  line-height: 1.5;
}

.flowwp-pill--success { border-color: var(--flow-success); background: #f0fdf4; color: var(--flow-success-text); }
.flowwp-pill--failed  { border-color: var(--flow-danger);  background: #fef2f2; color: var(--flow-danger-text); }
.flowwp-pill--waiting { border-color: var(--flow-warning); background: #fffbeb; color: var(--flow-warning-text); }
.flowwp-pill--aborted { border-color: var(--flow-danger);  background: #fef2f2; color: var(--flow-danger-text); }
/* Halted is not a failure — a condition said no — so it reads as neutral
   rather than borrowing the red that means something went wrong. */
.flowwp-pill--halted,
.flowwp-pill--pending { border-color: var(--flow-border-strong); background: var(--flow-surface-sunken); color: var(--flow-muted); }
.flowwp-pill--running { border-color: var(--flow-accent); background: #ecfeff; color: #0e7490; }

/*
 * Options fields — a text input that still takes a token, with the site's own
 * choices beneath it. The list sits in the flow of the form rather than floating
 * over it, so the scrolling config panel never clips it.
 */
.flowwp-options__row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.flowwp-options__row input[type='text'] {
  flex: 1 1 auto;
  min-width: 0;
}

.flowwp-options__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.flowwp-options__toggle:hover,
.flowwp-options__toggle[aria-expanded='true'] {
  border-color: var(--flow-primary);
  color: var(--flow-primary);
}

.flowwp-options__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.flowwp-options__selected {
  display: inline-flex;
  max-width: 100%;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  color: var(--flow-text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-options__selected.is-token {
  color: var(--flow-primary);
}

.flowwp-options__panel {
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
}

.flowwp-options__panel input[type='search'] {
  border: 0;
  border-bottom: 1px solid var(--flow-border);
  border-radius: 0;
  box-shadow: none;
}

.flowwp-options__list {
  max-height: 240px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
}

.flowwp-options__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--flow-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.flowwp-options__option:hover,
.flowwp-options__option:focus-visible {
  background: var(--flow-surface-sunken);
  outline: none;
}

.flowwp-options__option.is-selected {
  background: color-mix(in srgb, var(--flow-primary) 10%, transparent);
  color: var(--flow-primary);
  font-weight: 600;
}

.flowwp-options__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-options__value {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  color: var(--flow-faint);
  font-family: var(--flow-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-options__status {
  margin: 0;
  padding: 8px 10px;
  color: var(--flow-muted);
  font-size: 12px;
}

/* -- Node library: tabs, Tools, Apps --------------------------------------- */

.flowwp-tools-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 9px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 999px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.flowwp-tools-btn:hover {
  border-color: var(--flow-primary);
  color: var(--flow-primary);
}

.flowwp-tools-btn.is-open {
  border-color: transparent;
  background: linear-gradient(90deg, var(--flow-primary), var(--flow-accent));
  color: #ffffff;
}

.flowwp-tools-btn__count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  color: var(--flow-muted);
  font-family: var(--flow-mono);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.flowwp-tools-btn.is-open .flowwp-tools-btn__count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.flowwp-tools-btn:focus-visible,
.flowwp-libtabs__tab:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 2px;
}

.flowwp-libtabs {
  display: flex;
  gap: 2px;
  margin: 12px 16px 0;
  padding: 3px;
  border: 1px solid var(--flow-border);
  border-radius: 9px;
  background: var(--flow-surface-sunken);
}

.flowwp-libtabs__tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.flowwp-libtabs__tab:hover {
  color: var(--flow-text);
}

.flowwp-libtabs__tab.is-current {
  background: var(--flow-surface);
  color: var(--flow-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.flowwp-libtabs__count {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--flow-border);
  font-family: var(--flow-mono);
  font-size: 10px;
  line-height: 16px;
}

.flowwp-libtabs__tab.is-current .flowwp-libtabs__count {
  background: rgba(124, 58, 237, 0.12);
  color: var(--flow-primary);
}

.flowwp-library__heading--split {
  margin-top: 16px;
}

.flowwp-library__kind {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

/* The Tools drawer reuses the integration flyout, with the brand gradient on
   its head so it reads as FlowWP's own kit rather than a plugin. */
.flowwp-tools__head {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), rgba(6, 182, 212, 0.08));
}

.flowwp-tools__head .flowwp-library__back {
  margin-left: auto;
}

.flowwp-tools__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #ffffff;
}

.flowwp-tools__section + .flowwp-tools__section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--flow-border);
}

.flowwp-tools__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

/* Apps, before the first one ships. */
.flowwp-apps-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  border: 1px dashed var(--flow-border-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(6, 182, 212, 0.04));
  text-align: center;
}

.flowwp-apps-soon__art {
  display: inline-flex;
  margin-bottom: 4px;
}

.flowwp-apps-soon__art span {
  width: 30px;
  height: 30px;
  border: 2px solid var(--flow-surface);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  animation: flowwp-apps-float 3s ease-in-out infinite;
}

.flowwp-apps-soon__art span + span {
  margin-left: -8px;
}

.flowwp-apps-soon__art span:nth-child(2) {
  background: linear-gradient(135deg, var(--flow-accent), #22c55e);
  animation-delay: 0.4s;
}

.flowwp-apps-soon__art span:nth-child(3) {
  background: linear-gradient(135deg, #f59e0b, var(--flow-primary));
  animation-delay: 0.8s;
}

@keyframes flowwp-apps-float {
  50% {
    transform: translateY(-4px);
  }
}

.flowwp-apps-soon__title {
  font-size: 14px;
}

.flowwp-apps-soon__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--flow-muted);
}

.flowwp-apps-soon__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.flowwp-apps-soon__names li {
  margin: 0;
  padding: 2px 9px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface);
  font-size: 11.5px;
  color: var(--flow-text);
}

.flowwp-apps-soon .flowwp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-apps-soon__art span {
    animation: none;
  }
}

/* -- Canvas: node cards ---------------------------------------------------- */

/* Each role has a hue: the tag, the ports and the tool tiles take it, so the
   shape of a workflow reads before any title does. */
.flowwp-node {
  --hue: #7c3aed;
  --hue-2: #a78bfa;
  --hue-soft: #f5f3ff;

  position: relative;
  width: 244px;
  padding: 12px;
  border: 1px solid var(--flow-border);
  border-radius: 14px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -4px rgba(15, 23, 42, 0.1);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
  /* The grab cursor must be on the node itself. React Flow puts it on the
     wrapper, which our card covers completely, so without this the pointer
     only changes once it leaves the card. */
  cursor: grab;
}

.flowwp-node--trigger {
  --hue: #0891b2;
  --hue-2: #22d3ee;
  --hue-soft: #ecfeff;
}

.flowwp-node--condition,
.flowwp-node--filter {
  --hue: #d97706;
  --hue-2: #fbbf24;
  --hue-soft: #fffbeb;
}

.flowwp-node--logic {
  --hue: #4f46e5;
  --hue-2: #818cf8;
  --hue-soft: #eef2ff;
}

.flowwp-node--transform,
.flowwp-node--utility,
.flowwp-node--integration {
  --hue: #0284c7;
  --hue-2: #38bdf8;
  --hue-soft: #f0f9ff;
}

.flowwp-node--ai {
  --hue: #c026d3;
  --hue-2: #e879f9;
  --hue-soft: #fdf4ff;
}

.flowwp-node--unknown {
  --hue: #dc2626;
  --hue-2: #f87171;
  --hue-soft: #fef2f2;
}

/* Lifted slightly on hover so a card feels picked up before it is dragged. */
.flowwp-node:hover {
  border-color: var(--flow-border-strong);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px -6px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.flowwp-node.is-selected {
  border-color: var(--hue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 18%, transparent), 0 12px 24px -6px rgba(15, 23, 42, 0.16);
}

/* Selection outranks hover: the lift would otherwise make the selected card
   move when the pointer crosses it. */
.flowwp-node.is-selected:hover {
  transform: none;
}

.flowwp-node.is-incomplete {
  border-color: var(--flow-warning);
}

.flowwp-node.is-error {
  border-color: var(--flow-danger);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.flowwp-node.is-disabled {
  background: var(--flow-surface-sunken);
  opacity: 0.6;
}

.flowwp-node.is-locked {
  border-style: dashed;
}

.flowwp-node.is-locked .flowwp-node__tile {
  filter: grayscale(1);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-node {
    transition: none;
  }

  .flowwp-node:hover {
    transform: none;
  }
}

/* The role tag and any lock float above the card's top edge. */
.flowwp-node__tags {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.flowwp-node__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent);
  border-radius: 999px;
  background: var(--hue-soft);
  color: var(--hue);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.flowwp-node__tagdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue);
}

.flowwp-node__lock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flowwp-node__lock svg {
  width: 9px;
  height: 9px;
}

.flowwp-node__lock--plugin {
  border: 1px solid var(--flow-border-strong);
  background: var(--flow-surface);
  color: var(--flow-muted);
}

.flowwp-node__body {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* The tile: a product's logo on a white plate, or a tool's glyph on its
   role's gradient. */
.flowwp-node__tile {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--hue), var(--hue-2));
  color: #ffffff;
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--hue) 45%, transparent);
}

.flowwp-node__tileicon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.flowwp-node__tile--brand {
  border: 1px solid var(--flow-border);
  background: var(--flow-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.flowwp-node__tile--brand .flowwp-node__tileicon {
  width: 24px;
  height: 24px;
}

.flowwp-node__tileicon svg,
.flowwp-node__glyph svg {
  width: 100%;
  height: 100%;
}

/* What the step does, badged on the corner of whose logo it is. */
.flowwp-node__glyph {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: inline-flex;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  padding: 3.5px;
  border: 2px solid var(--flow-surface);
  border-radius: 50%;
  background: var(--hue);
  color: #ffffff;
}

.flowwp-node__text {
  flex: 1;
  min-width: 0;
}

.flowwp-node__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  /* Two lines, then ellipsis: a long label should not make one card twice the
     height of its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flowwp-node__sub {
  margin-top: 2px;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--flow-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-node__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.flowwp-node__flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fffbeb;
  color: var(--flow-warning-text);
  font-size: 10.5px;
  font-weight: 500;
}

.flowwp-node__flag--error {
  background: #fef2f2;
  color: var(--flow-danger-text);
}

.flowwp-node__flag--off {
  background: var(--flow-border);
  color: var(--flow-muted);
}

/* Several outputs: one row each, its port on its own row. The rows run to the
   card's edges so each port sits on the border as a single output's does. */
.flowwp-node__ports {
  margin: 12px -12px -12px;
  border-top: 1px solid var(--flow-border);
}

.flowwp-node__port {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 18px 6px 14px;
  font-size: 11.5px;
  font-weight: 500;
}

.flowwp-node__port + .flowwp-node__port {
  border-top: 1px dashed var(--flow-border);
}

.flowwp-node__port:last-child {
  border-radius: 0 0 13px 13px;
}

.flowwp-node__port:hover {
  background: var(--flow-surface-sunken);
}

.flowwp-node__portdot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--port, var(--flow-faint));
}

.flowwp-node__portlabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-node__port--yes { --port: #16a34a; }
.flowwp-node__port--no { --port: #e11d48; }
.flowwp-node__port--route { --port: #7c3aed; }
.flowwp-node__port--plain { --port: #94a3b8; }

.flowwp-node__port--error {
  --port: #dc2626;
  color: var(--flow-danger-text);
}

/* -- Canvas: ports --------------------------------------------------------- */

/* Rings on the card's edge, in the role's colour; they fill as the pointer
   reaches them, which is the cue that a line can be pulled from here. */
.flowwp-node .flowwp-handle {
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--port, var(--hue));
  border-radius: 50%;
  background: var(--flow-surface);
  box-shadow: 0 0 0 3px var(--flow-surface);
  transition: transform 120ms ease, background 120ms ease;
}

.flowwp-node .flowwp-handle--out:hover,
.flowwp-node .flowwp-handle--out.connectingfrom {
  background: var(--port, var(--hue));
  transform: translate(50%, -50%) scale(1.3);
}

.flowwp-node .flowwp-handle--in:hover,
.flowwp-node .flowwp-handle--in.connectingto {
  background: var(--hue);
  transform: translate(-50%, -50%) scale(1.3);
}

/* A valid place to drop the line being drawn. */
.flowwp-node .flowwp-handle.connectingto.valid {
  border-color: var(--flow-success);
  background: var(--flow-success);
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-node .flowwp-handle {
    transition: none;
  }
}

/* -- Canvas: edges --------------------------------------------------------- */

.flowwp-canvas .react-flow__edge path.flowwp-edge {
  stroke: #94a3b8;
  stroke-width: 2;
  transition: stroke-width 120ms ease;
}

.flowwp-canvas .react-flow__edge path.flowwp-edge--yes { stroke: #16a34a; }
.flowwp-canvas .react-flow__edge path.flowwp-edge--no { stroke: #e11d48; }
.flowwp-canvas .react-flow__edge path.flowwp-edge--route { stroke: #7c3aed; }

.flowwp-canvas .react-flow__edge path.flowwp-edge--error {
  stroke: #dc2626;
  stroke-dasharray: 6 5;
}

.flowwp-canvas .react-flow__edge path.flowwp-edge.is-live {
  stroke-width: 3;
}

/* Dashes that march along the line while it is hovered or selected, showing
   the direction a run travels. */
.flowwp-edge__flow {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.flowwp-edge__flow.is-live {
  opacity: 0.95;
  animation: flowwp-edge-march 0.8s linear infinite;
}

@keyframes flowwp-edge-march {
  to {
    stroke-dashoffset: -12;
  }
}

.flowwp-edge__label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: all;
}

.flowwp-edge__pill {
  padding: 2px 9px;
  border: 1px solid var(--pill, #94a3b8);
  border-radius: 999px;
  background: var(--flow-surface);
  color: var(--pill, var(--flow-muted));
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.flowwp-edge__pill--yes { --pill: #15803d; }
.flowwp-edge__pill--no { --pill: #e11d48; }
.flowwp-edge__pill--error { --pill: #dc2626; }
.flowwp-edge__pill--route { --pill: #7c3aed; }

.flowwp-edge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--flow-border-strong);
  border-radius: 50%;
  background: var(--flow-surface);
  color: var(--flow-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 120ms ease, transform 120ms ease;
}

.flowwp-edge__label.is-live .flowwp-edge__remove {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.flowwp-edge__remove:hover {
  border-color: var(--flow-danger);
  background: var(--flow-danger);
  color: #ffffff;
}

.flowwp-edge__remove:focus-visible {
  visibility: visible;
  opacity: 1;
  outline: 2px solid var(--flow-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-edge__flow.is-live {
    animation: none;
  }
}

/* -- Editor top bar -------------------------------------------------------- */

.flowwp-editor .flowwp-toolbar {
  gap: 12px;
  padding: 10px 14px;
}

.flowwp-editor .flowwp-toolbar__left {
  gap: 12px;
  min-width: 0;
}

.flowwp-editor .flowwp-toolbar__right {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.flowwp-iconbtn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--flow-border);
  border-radius: 10px;
  background: var(--flow-surface);
  color: var(--flow-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.flowwp-iconbtn:hover {
  border-color: var(--flow-primary);
  color: var(--flow-primary);
}

.flowwp-iconbtn svg {
  width: 17px;
  height: 17px;
}

.flowwp-toolbar__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.flowwp-editor .flowwp-toolbar__name,
.flowwp-editor .flowwp-toolbar__rename {
  max-width: 360px;
  margin-left: -8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Saved, saving or not: a dot and three words under the name, always there,
   so nobody has to wonder before closing the tab. */
.flowwp-savestate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--flow-muted);
}

.flowwp-savestate__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flow-success);
}

.flowwp-savestate--dirty {
  color: var(--flow-warning-text);
}

.flowwp-savestate--dirty .flowwp-savestate__dot {
  background: var(--flow-warning);
}

.flowwp-savestate--saving .flowwp-savestate__dot {
  background: var(--flow-primary);
  animation: flowwp-save-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes flowwp-save-pulse {
  to {
    opacity: 0.3;
  }
}

/* History, Validate and Save share one segmented group: they are the
   secondary tools, and grouping them lets Test run and the switch stand out. */
.flowwp-toolbar__group {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--flow-border);
  border-radius: 11px;
  background: var(--flow-surface-sunken);
}

.flowwp-toolbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.flowwp-toolbtn:hover:not(:disabled) {
  background: var(--flow-surface);
  color: var(--flow-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.flowwp-toolbtn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Unsaved work: Save is the one to press, so it says so. */
.flowwp-toolbtn.is-attention {
  background: var(--flow-surface);
  color: var(--flow-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.flowwp-toolbtn.is-attention::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flow-warning);
}

.flowwp-toolbtn svg {
  width: 15px;
  height: 15px;
}

/* Test run: dark, with a play mark, the most inviting thing in the bar. */
.flowwp-testbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: none;
  border-radius: 999px;
  background: #0b0d12;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(11, 13, 18, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}

.flowwp-testbtn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.55);
}

.flowwp-testbtn:disabled {
  cursor: progress;
}

.flowwp-testbtn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
}

.flowwp-testbtn__icon svg {
  width: 11px;
  height: 11px;
  margin-left: 1px;
}

.flowwp-testbtn.is-running .flowwp-testbtn__icon {
  animation: flowwp-test-spin 1s linear infinite;
}

@keyframes flowwp-test-spin {
  to {
    transform: rotate(360deg);
  }
}

.flowwp-toolbar__live {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface);
}

/* A short-lived word about what just happened; errors stay until dismissed. */
.flowwp-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--flow-border);
  border-radius: 999px;
  background: var(--flow-surface);
  font-size: 12.5px;
  animation: flowwp-toast-in 0.2s ease-out;
}

@keyframes flowwp-toast-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.flowwp-toast--success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--flow-success-text);
}

.flowwp-toast--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--flow-danger-text);
}

.flowwp-toast--info {
  border-color: var(--flow-border);
  background: var(--flow-surface-sunken);
  color: var(--flow-muted);
}

.flowwp-toast__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-toast__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.flowwp-toast__close:hover {
  background: rgba(15, 23, 42, 0.08);
}

.flowwp-toast__close svg {
  width: 12px;
  height: 12px;
}

.flowwp-iconbtn:focus-visible,
.flowwp-toolbtn:focus-visible,
.flowwp-testbtn:focus-visible,
.flowwp-toast__close:focus-visible,
.flowwp-canvastools__btn:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 2px;
}

/* -- Canvas toolbar -------------------------------------------------------- */

.flowwp-canvastools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--flow-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(6px);
}

.flowwp-canvastools__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flowwp-canvastools__btn:hover:not(:disabled) {
  background: var(--flow-surface-sunken);
  color: var(--flow-text);
}

.flowwp-canvastools__btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.flowwp-canvastools__btn--primary {
  padding: 0 11px;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #ffffff;
}

.flowwp-canvastools__btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d28d9, #0891b2);
  color: #ffffff;
}

.flowwp-canvastools__btn svg {
  width: 16px;
  height: 16px;
}

.flowwp-canvastools__sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--flow-border);
}

/* Tidy up glides the cards into place; only while it runs, or every drag
   would trail the pointer. */
.flowwp-canvas.is-arranging .react-flow__node {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-savestate--saving .flowwp-savestate__dot,
  .flowwp-testbtn.is-running .flowwp-testbtn__icon,
  .flowwp-toast {
    animation: none;
  }

  .flowwp-canvas.is-arranging .react-flow__node {
    transition: none;
  }
}

/* -- Canvas: hover actions ------------------------------------------------- */

/* Duplicate and Delete sit on the card's top edge, right-hand side, and show
   while the card is hovered or selected. */
.flowwp-node__actions {
  position: absolute;
  top: -15px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--flow-border);
  border-radius: 9px;
  background: var(--flow-surface);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.react-flow__node:hover .flowwp-node__actions,
.flowwp-node.is-selected .flowwp-node__actions,
.flowwp-node__actions:focus-within {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Hidden while a card is dragged: the buttons would ride along under the
   pointer and invite a stray click on release. */
.react-flow__node.dragging .flowwp-node__actions {
  visibility: hidden;
}

.flowwp-node__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--flow-muted);
  cursor: pointer;
}

.flowwp-node__action svg {
  width: 14px;
  height: 14px;
}

.flowwp-node__action:hover {
  background: var(--flow-surface-sunken);
  color: var(--flow-primary);
}

.flowwp-node__action--danger:hover {
  background: #fef2f2;
  color: var(--flow-danger-text);
}

.flowwp-node__action:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 1px;
}

/* -- Canvas: add after ----------------------------------------------------- */

/* A short dashed stub out of an empty output, ending in a +. */
.flowwp-addafter {
  position: absolute;
  top: 50%;
  left: 100%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.flowwp-node__addmain {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
}

.flowwp-node__port .flowwp-addafter {
  left: calc(100% + 1px);
}

.flowwp-addafter__wire {
  width: 26px;
  height: 0;
  margin-left: 7px;
  border-top: 2px dashed var(--flow-border-strong);
}

.flowwp-addafter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px dashed var(--flow-border-strong);
  border-radius: 7px;
  background: var(--flow-surface);
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  pointer-events: all;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.flowwp-addafter__btn:hover,
.flowwp-addafter__btn:focus-visible {
  border-style: solid;
  border-color: var(--flow-primary);
  background: var(--flow-primary);
  color: #ffffff;
  outline: none;
  transform: scale(1.12);
}

/* -- Canvas: quick add ----------------------------------------------------- */

.flowwp-quickadd {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: 380px;
  overflow: hidden;
  border: 1px solid var(--flow-border);
  border-radius: 14px;
  background: var(--flow-surface);
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(124, 58, 237, 0.05);
  animation: flowwp-quickadd-in 0.14s ease-out;
}

@keyframes flowwp-quickadd-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.flowwp-quickadd__head {
  padding: 10px 10px 6px;
}

.flowwp-quickadd__search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
}

.flowwp-quickadd__search:focus {
  border-color: var(--flow-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.flowwp-quickadd__label {
  padding: 4px 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flow-faint);
}

.flowwp-quickadd__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 6px 6px;
  overflow-y: auto;
  list-style: none;
}

.flowwp-quickadd__list li {
  margin: 0;
}

.flowwp-quickadd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--flow-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.flowwp-quickadd__item.is-active {
  background: var(--flow-surface-sunken);
}

.flowwp-quickadd__item.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
}

.flowwp-quickadd__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #ffffff;
}

.flowwp-quickadd__icon svg {
  width: 100%;
  height: 100%;
}

.flowwp-quickadd__icon--brand {
  padding: 5px;
  border: 1px solid var(--flow-border);
  background: var(--flow-surface);
}

.flowwp-quickadd__icon--condition,
.flowwp-quickadd__icon--filter {
  background: linear-gradient(135deg, #d97706, #fbbf24);
}

.flowwp-quickadd__icon--logic {
  background: linear-gradient(135deg, #4f46e5, #818cf8);
}

.flowwp-quickadd__icon--transform,
.flowwp-quickadd__icon--utility,
.flowwp-quickadd__icon--integration {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.flowwp-quickadd__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.flowwp-quickadd__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-quickadd__meta {
  overflow: hidden;
  font-size: 11px;
  color: var(--flow-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flowwp-quickadd__empty {
  padding: 18px 8px;
  font-size: 12.5px;
  color: var(--flow-muted);
  text-align: center;
}

.flowwp-quickadd__foot {
  padding: 7px 12px;
  border-top: 1px solid var(--flow-border);
  background: var(--flow-surface-sunken);
  font-size: 11px;
  color: var(--flow-muted);
}

.flowwp-quickadd__foot kbd {
  padding: 0 5px;
  border: 1px solid var(--flow-border-strong);
  border-radius: 4px;
  background: var(--flow-surface);
  font-family: var(--flow-mono);
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-node__actions,
  .flowwp-addafter__btn {
    transition: none;
  }

  .flowwp-quickadd {
    animation: none;
  }
}

/* -- Canvas: sticky notes -------------------------------------------------- */

.flowwp-note {
  --note-bg: #fef9c3;
  --note-edge: #fde047;
  --note-ink: #713f12;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--note-edge);
  border-radius: 10px;
  background: var(--note-bg);
  color: var(--note-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 18px -8px rgba(15, 23, 42, 0.25);
  cursor: default;
}

.flowwp-note--blue { --note-bg: #dbeafe; --note-edge: #93c5fd; --note-ink: #1e3a8a; }
.flowwp-note--green { --note-bg: #dcfce7; --note-edge: #86efac; --note-ink: #14532d; }
.flowwp-note--pink { --note-bg: #fce7f3; --note-edge: #f9a8d4; --note-ink: #831843; }
.flowwp-note--purple { --note-bg: #ede9fe; --note-edge: #c4b5fd; --note-ink: #4c1d95; }
.flowwp-note--gray { --note-bg: #f1f5f9; --note-edge: #cbd5e1; --note-ink: #1e293b; }

.flowwp-note.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-edge) 70%, transparent), 0 10px 22px -8px rgba(15, 23, 42, 0.3);
}

/* The strip that drags the note, and holds its colours once selected. */
.flowwp-note__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
  padding: 4px 6px 2px 8px;
  cursor: grab;
}

.flowwp-note__grip {
  width: 28px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--note-ink) 22%, transparent);
}

.flowwp-note__swatches {
  display: inline-flex;
  gap: 4px;
}

.flowwp-note__swatch {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

.flowwp-note__swatch.is-current {
  box-shadow: 0 0 0 2px var(--flow-surface), 0 0 0 3.5px var(--note-ink);
}

.flowwp-note__swatch--yellow { background: #fde047; }
.flowwp-note__swatch--blue { background: #93c5fd; }
.flowwp-note__swatch--green { background: #86efac; }
.flowwp-note__swatch--pink { background: #f9a8d4; }
.flowwp-note__swatch--purple { background: #c4b5fd; }
.flowwp-note__swatch--gray { background: #cbd5e1; }

.flowwp-note__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--note-ink);
  cursor: pointer;
}

.flowwp-note__delete:hover {
  background: rgba(220, 38, 38, 0.12);
  color: var(--flow-danger-text);
}

.flowwp-note__delete svg {
  width: 13px;
  height: 13px;
}

.flowwp-note__text {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 12px 10px;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  cursor: text;
}

.flowwp-note__text::placeholder {
  color: color-mix(in srgb, var(--note-ink) 55%, transparent);
}

.flowwp-note__swatch:focus-visible,
.flowwp-note__delete:focus-visible {
  outline: 2px solid var(--flow-primary);
  outline-offset: 1px;
}

/* React Flow's resize handles, in the note's own colour. */
.flowwp-note__resize-handle.react-flow__resize-control.handle {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--flow-surface);
  border-radius: 3px;
  background: var(--flow-primary);
}

.flowwp-note__resize-line.react-flow__resize-control.line {
  border-color: transparent;
}


/* -- Connections ----------------------------------------------------------- */

.flowwp-connections {
  max-width: 920px;
}

.flowwp-connections__intro {
  margin-bottom: 26px;
}

.flowwp-connections__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--flow-text);
}

.flowwp-connections__text {
  margin: 0;
  max-width: 62ch;
  color: var(--flow-muted);
  line-height: 1.6;
}

.flowwp-connections__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flow-muted);
}

.flowwp-connections__count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--flow-surface-sunken);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--flow-muted);
}

/* The provider's own mark, on a tile that works in both themes. */
.flowwp-connections__mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--flow-border);
  border-radius: 11px;
  background: var(--flow-surface);
  color: var(--flow-text);
}

.flowwp-connections__mark--lg {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

/* -- Adding one ------------------------------------------------------------ */

.flowwp-connections__kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.flowwp-connections__kind {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 13px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.flowwp-connections__kind:hover,
.flowwp-connections__kind:focus-visible {
  border-color: var(--flow-primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.flowwp-connections__kindtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flowwp-connections__kindname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--flow-text);
}

.flowwp-connections__kindnote {
  font-size: 12px;
  line-height: 1.45;
  color: var(--flow-muted);

  /* Two lines of explanation, so the cards in a row stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flowwp-connections__plus {
  margin-left: auto;
  padding-left: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--flow-muted);
}

.flowwp-connections__kind:hover .flowwp-connections__plus {
  color: var(--flow-primary);
}

/* -- The form -------------------------------------------------------------- */

.flowwp-connections__form {
  max-width: 520px;
  margin-bottom: 30px;
  padding: 20px 22px 6px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
}

.flowwp-connections__formhead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.flowwp-connections__formtitle {
  margin: 2px 0 2px;
  font-size: 15px;
  font-weight: 650;
  color: var(--flow-text);
}

.flowwp-connections__formnote {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--flow-muted);
}

.flowwp-connections__formactions {
  display: flex;
  gap: 8px;
  margin: 18px 0 16px;
}

/* -- The list -------------------------------------------------------------- */

.flowwp-connections__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  overflow: hidden;
}

.flowwp-connections__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  transition: background 0.15s;
}

.flowwp-connections__item:hover {
  background: var(--flow-surface-sunken);
}

.flowwp-connections__item + .flowwp-connections__item {
  border-top: 1px solid var(--flow-border);
}

.flowwp-connections__meta {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.flowwp-connections__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text);
}

.flowwp-connections__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-connections__hint {
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid var(--flow-border);
  background: var(--flow-surface-sunken);
  font-family: var(--flow-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--flow-text);
}

/* A dot and a line: the state of one connection, said once. */
.flowwp-connections__status {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.flowwp-connections__status::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-1px);
}

.flowwp-connections__status--ok {
  color: var(--flow-success-text);
}

.flowwp-connections__status--ok::before {
  background: var(--flow-success);
}

.flowwp-connections__status--bad {
  color: var(--flow-danger-text);
}

.flowwp-connections__status--bad::before {
  background: var(--flow-danger);
}

.flowwp-connections__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.flowwp-connections__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.flowwp-connections__action svg {
  width: 14px;
  height: 14px;
}

.flowwp-connections__action:hover:not(:disabled) {
  border-color: var(--flow-border-strong);
  background: var(--flow-surface-sunken);
}

.flowwp-connections__action:disabled {
  opacity: 0.6;
  cursor: default;
}

.flowwp-connections__action--danger {
  padding: 6px 9px;
  color: var(--flow-muted);
}

.flowwp-connections__action--danger:hover:not(:disabled) {
  border-color: var(--flow-danger);
  background: var(--flow-danger);
  color: var(--flow-danger-text);
}

/* -- Nothing saved yet ----------------------------------------------------- */

.flowwp-connections__empty {
  padding: 34px 20px;
  border: 1px dashed var(--flow-border-strong);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  text-align: center;
}

.flowwp-connections__emptymarks {
  display: inline-flex;
  margin-bottom: 14px;
}

.flowwp-connections__emptymarks .flowwp-connections__mark + .flowwp-connections__mark {
  margin-left: -10px;
}

.flowwp-connections__emptytitle {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text);
}

.flowwp-connections__emptytext {
  margin: 0;
  font-size: 12.5px;
  color: var(--flow-muted);
}

/* -- The editor's connection field ----------------------------------------- */

.flowwp-connection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flowwp-connection__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flowwp-connection__mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--flow-border);
  border-radius: 8px;
  background: var(--flow-surface);
  color: var(--flow-text);
}

.flowwp-connection__empty {
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-connection__add {
  align-self: flex-start;
  font-size: 12px;
  color: var(--flow-primary);
}

/* -- Waiting -------------------------------------------------------------- */

/* A ring with one lit quarter: legible at 14px, where a full gradient is mud. */
.flowwp-spinner {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  border-style: solid;
  border-color: var(--flow-border-strong);
  border-top-color: var(--flow-primary);
  border-radius: 50%;
  animation: flowwp-spinner-spin 0.7s linear infinite;
}

@keyframes flowwp-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.flowwp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Tall enough that the content arriving underneath does not jump the page. */
  min-height: 160px;
  padding: 32px 0;
}

.flowwp-loading--tall {
  min-height: 60vh;
}

.flowwp-loading__label {
  font-size: 13px;
  color: var(--flow-muted);
}

/* Someone who asked for less motion still needs to see that the wait is live,
   so the ring breathes instead of spinning. */
@media (prefers-reduced-motion: reduce) {
  .flowwp-spinner {
    animation: flowwp-spinner-breathe 1.6s ease-in-out infinite;
  }

  @keyframes flowwp-spinner-breathe {
    50% {
      opacity: 0.35;
    }
  }
}

/* -- Build with AI -------------------------------------------------------- */

.flowwp-generate {
  width: min(640px, 92vw);
}

.flowwp-generate__text {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.flowwp-generate__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.flowwp-generate__name {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--flow-text);
}

/* The steps as a numbered list: the order is the workflow. */
.flowwp-generate__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flowwp-generate__step {
  font-size: 13px;
}

.flowwp-generate__steplabel {
  color: var(--flow-text);
}

.flowwp-generate__steptype {
  margin-left: 8px;
  font-family: var(--flow-mono);
  font-size: 11px;
  color: var(--flow-faint);
}

.flowwp-generate__notes {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface-sunken);
  font-size: 13px;
}

/* What the author must still decide is not a failure; what the validator
   objects to might be, so it is coloured and the other is not. */
.flowwp-generate__notes--warn {
  border-color: var(--flow-warning);
  background: color-mix(in srgb, var(--flow-warning) 8%, transparent);
}

.flowwp-generate__notes ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flowwp-generate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--flow-border);
}

/* -- The header, dark ----------------------------------------------------- */

/* The one dark band on the page, and it is dark *violet* rather than black:
   mixed from the two brand tokens against a near-black, so it is FlowWP's
   colour at a depth white type can sit on, and it moves with the palette
   instead of pinning three greys nobody can find later. The cyan wash at the
   top left is the accent showing up where the logo is, which is what stops the
   whole band reading as one flat purple. */
.flowwp-header {
  border-bottom: none;
  background:
    radial-gradient(
      900px 260px at 6% -70%,
      color-mix(in srgb, var(--flow-accent) 34%, transparent),
      transparent 70%
    ),
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--flow-primary) 74%, #0c0a1c) 0%,
      color-mix(in srgb, var(--flow-primary) 54%, #0c0a1c) 46%,
      color-mix(in srgb, var(--flow-accent) 44%, #091423) 100%
    );
  color: #fff;
}

.flowwp-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.flowwp-header__logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: contain;
  /* The mark is drawn for a light background; a ring keeps its edges from
     dissolving into the dark rather than recolouring somebody else's logo. */
  background: rgba(255, 255, 255, 0.96);
  padding: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.flowwp-header .flowwp-header__title {
  color: #fff;
}

.flowwp-header .flowwp-header__tagline {
  color: rgba(255, 255, 255, 0.62);
}

.flowwp-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons in the dark band are outlined rather than filled: they are
   navigation, and a row of white blocks would shout over the page below. */
.flowwp-header .flowwp-btn {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
}

.flowwp-header .flowwp-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.flowwp-header .flowwp-badge {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

.flowwp-header .flowwp-badge--plan {
  border-color: transparent;
  color: #fff;
}

@media (max-width: 782px) {
  .flowwp-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .flowwp-header__actions {
    flex-wrap: wrap;
  }
}

/* -- The header's nav ----------------------------------------------------- */

/* Three screens in one tinted group rather than three loose outlined buttons.
   They were indistinguishable from Run history and from each other, and the
   row rearranged itself every time you moved, because the screen you were on
   dropped out of it. Grouping them says these three are the same kind of
   thing; the tint behind the current one says which you are looking at. */
.flowwp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.flowwp-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: none;
  border-radius: 7px;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.flowwp-nav__item svg {
  opacity: 0.8;
}

.flowwp-nav__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* The current screen is a solid chip, so it reads as pressed rather than as
   one more thing to click. */
.flowwp-nav__item.is-active {
  background: #fff;
  color: #221a3d;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.flowwp-nav__item.is-active svg {
  color: var(--flow-primary);
  opacity: 1;
}

/* Run history is not one of the three screens — it is a place you go and come
   back from — so it keeps its own quieter shape outside the group. */
.flowwp-header .flowwp-btn--quiet {
  border-color: transparent;
  background: none;
  color: rgba(255, 255, 255, 0.68);
}

.flowwp-header .flowwp-btn--quiet:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.flowwp-header .flowwp-btn--quiet.is-active {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Keeps the plan and version badges from reading as two more buttons. */
.flowwp-header__rule {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 782px) {
  .flowwp-header__rule {
    display: none;
  }
}

/* -- Build with AI -------------------------------------------------------- */

/* Not a second primary button: New workflow is still the one most people
   want. This borrows the AI gradient for its text and edge so it reads as the
   AI thing on the row without competing for the same job. */
.flowwp-btn--ai {
  position: relative;
  border-color: color-mix(in srgb, var(--flow-primary) 45%, var(--flow-border-strong));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--flow-primary) 9%, var(--flow-surface)),
    color-mix(in srgb, var(--flow-accent) 9%, var(--flow-surface))
  );
  color: var(--flow-primary);
  font-weight: 600;
}

.flowwp-btn--ai:hover:not(:disabled) {
  border-color: var(--flow-primary);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--flow-primary) 16%, var(--flow-surface)),
    color-mix(in srgb, var(--flow-accent) 16%, var(--flow-surface))
  );
}

/* The star picks up the accent so the button has both ends of the gradient in
   it, which is what makes it read as the AI one at a glance. */
.flowwp-btn--ai svg {
  color: var(--flow-accent);
}

.flowwp-btn--ai:disabled svg {
  color: inherit;
}

/* In the dark header the same button inverts: the gradient becomes the fill. */
.flowwp-header .flowwp-btn--ai {
  border-color: transparent;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
}

.flowwp-header .flowwp-btn--ai svg {
  color: rgba(255, 255, 255, 0.85);
}

/* How much of today's allowance is left, beside the button that spends it. */
/* -- The list's action row ------------------------------------------------ */

.flowwp-listactions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Between the two jobs: moving workflows in and out of the site, and making a
   new one. Without it the row reads as four equal choices. */
.flowwp-listactions__split {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--flow-border);
}

/* Import and export: useful, and never the reason anybody opened this page. No
   fill and no shadow until the pointer is on them. */
.flowwp-btn--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--flow-muted);
}

.flowwp-btn--quiet:hover:not(:disabled) {
  border-color: var(--flow-border-strong);
  background: var(--flow-surface);
  color: var(--flow-text);
}

.flowwp-btn--quiet svg {
  color: var(--flow-faint);
}

.flowwp-btn--quiet:hover:not(:disabled) svg {
  color: var(--flow-muted);
}

@media (max-width: 782px) {
  .flowwp-listactions {
    flex-wrap: wrap;
  }

  .flowwp-listactions__split {
    display: none;
  }
}

/* -- A described change --------------------------------------------------- */

.flowwp-revise__summary {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--flow-text);
}

.flowwp-revise__changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flowwp-revise__change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

/* One character carrying the difference, so the list scans without reading:
   what arrived, what went, what was rewritten. */
.flowwp-revise__mark {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.flowwp-revise__change.is-added .flowwp-revise__mark {
  background: color-mix(in srgb, var(--flow-success) 18%, transparent);
  color: var(--flow-success-text);
}

.flowwp-revise__change.is-removed .flowwp-revise__mark {
  background: color-mix(in srgb, var(--flow-danger) 16%, transparent);
  color: var(--flow-danger-text);
}

.flowwp-revise__change.is-changed .flowwp-revise__mark {
  background: color-mix(in srgb, var(--flow-primary) 16%, transparent);
  color: var(--flow-primary);
}

/* The toolbar's AI button, tinted like the one on the list rather than filled:
   the canvas is busy enough without a second coloured block on it. */
.flowwp-toolbtn--ai {
  color: var(--flow-primary);
}

.flowwp-toolbtn--ai svg {
  color: var(--flow-accent);
}

.flowwp-toolbtn--ai:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-primary) 10%, transparent);
}

/* -- The dashboard -------------------------------------------------------- */

.flowwp-dash {
  display: flex;
  flex-direction: column;
  gap: var(--flow-gap);
}

.flowwp-dash__hello {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--flow-gap);
  flex-wrap: wrap;
}

.flowwp-dash__greeting {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--flow-text);
}

.flowwp-dash__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--flow-muted);
}

.flowwp-dash__actions {
  display: flex;
  gap: 8px;
}

/* Four numbers, and they stack rather than shrink: a tile narrow enough to
   wrap its own label has stopped being readable at a glance. */
.flowwp-dash__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.flowwp-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
}

.flowwp-tile__label {
  font-size: 12px;
  color: var(--flow-muted);
}

.flowwp-tile__value {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--flow-text);
}

.flowwp-tile__hint {
  font-size: 12px;
  color: var(--flow-faint);
}

/* Colour only where it means something. A success rate is worth a colour; a
   count of workflows is not, and colouring it would spend the signal. */
.flowwp-tile.is-good .flowwp-tile__value {
  color: var(--flow-success-text);
}

.flowwp-tile.is-warn .flowwp-tile__value {
  color: var(--flow-warning-text);
}

.flowwp-tile.is-bad .flowwp-tile__value {
  color: var(--flow-danger-text);
}

.flowwp-dash__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.flowwp-dash__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.flowwp-dash__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--flow-border);
  font-size: 13px;
}

.flowwp-dash__row:last-child {
  border-bottom: none;
}

.flowwp-dash__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flow-border-strong);
}

.flowwp-dash__dot.is-good {
  background: var(--flow-success);
}

.flowwp-dash__dot.is-bad {
  background: var(--flow-danger);
}

.flowwp-dash__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--flow-text);
  cursor: pointer;
}

.flowwp-dash__name:hover {
  color: var(--flow-primary);
}

.flowwp-dash__when {
  flex: none;
  font-size: 12px;
  color: var(--flow-faint);
}

/* -- Dashboard cards ------------------------------------------------------ */

/* The dashboard's own panel, not the editor's: the editor's fills a column of a
   fixed layout, while these are cards on a scrolling page and want an edge. */
.flowwp-card {
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
  overflow: hidden;
}

.flowwp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--flow-border);
}

.flowwp-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--flow-text);
}

/* Pushed to the far edge so a legend can sit between it and the title. */
.flowwp-card__link {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--flow-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.flowwp-card__link:hover {
  text-decoration: underline;
}

.flowwp-card__body {
  padding: 14px 16px 16px;
}

/* -- The fortnight chart -------------------------------------------------- */

.flowwp-chart__plot {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 128px;
  border-bottom: 1px solid var(--flow-border);
}

/* Every day keeps a slot whether or not anything ran in it: an empty day is
   half of what the chart says, and a chart that draws only its busy days
   redistributes a quiet fortnight into a busy one. */
.flowwp-chart__col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  border-radius: 5px 5px 0 0;
}

.flowwp-chart__col:hover {
  background: color-mix(in srgb, var(--flow-primary) 7%, transparent);
}

/* A day with nothing in it still draws its own baseline. */
.flowwp-chart__col:empty::after {
  content: '';
  width: 100%;
  max-width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--flow-border);
}

.flowwp-chart__bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  /* Fourteen bars across a wide panel are otherwise 80px each, which reads as
     a wall rather than a chart. */
  max-width: 34px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}

.flowwp-chart__seg {
  display: block;
  width: 100%;
}

.flowwp-chart__seg.is-ok {
  background: color-mix(in srgb, var(--flow-primary) 82%, #fff);
}

.flowwp-chart__seg.is-bad {
  background: var(--flow-danger);
}

/* Every bar is labelled, not just the ends: a fortnight is short enough that
   the reader is looking for a particular day, and counting along from a date
   at each end is not reading a chart. */
.flowwp-chart__days {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.flowwp-chart__day {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--flow-faint);
}

.flowwp-chart__day.is-today {
  font-weight: 600;
  color: var(--flow-muted);
}

.flowwp-chart__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
  color: var(--flow-faint);
}

.flowwp-chart__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.flowwp-chart__swatch.is-ok {
  background: color-mix(in srgb, var(--flow-primary) 82%, #fff);
}

.flowwp-chart__swatch.is-bad {
  background: var(--flow-danger);
  margin-left: 8px;
}

/* -- The welcome ---------------------------------------------------------- */

.flowwp-welcome {
  max-width: 820px;
  margin: 40px auto;
  text-align: center;
}

.flowwp-welcome__title {
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--flow-text);
}

.flowwp-welcome__lead {
  margin: 10px auto 28px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--flow-muted);
}

.flowwp-welcome__ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  text-align: left;
}

.flowwp-way {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface);
  box-shadow: var(--flow-shadow);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms ease, transform 120ms ease;
}

.flowwp-way:hover {
  border-color: var(--flow-primary);
  transform: translateY(-1px);
}

/* Numbered, because the three are in an order: the first is the one that gets
   somebody to a working automation quickest. */
.flowwp-way__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flow-primary), var(--flow-accent));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.flowwp-way__title {
  font-size: 14px;
  color: var(--flow-text);
}

.flowwp-way__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--flow-muted);
}

@media (prefers-reduced-motion: reduce) {
  .flowwp-way:hover {
    transform: none;
  }
}

/* -- Links out to flowwp.net ----------------------------------------------- */

/* A docs link reads as a link wherever it sits, including inside the muted
   hint text it usually follows. The arrow is part of the label. */
.flowwp-docslink {
  font-weight: 500;
  text-underline-offset: 2px;
}

/* The editor's Help is a link dressed as a tool, so it loses the link's
   underline and colour and takes the toolbar's instead. */
a.flowwp-toolbtn,
a.flowwp-toolbtn:visited {
  color: var(--flow-muted);
  text-decoration: none;
}

a.flowwp-toolbtn:hover,
a.flowwp-toolbtn:focus {
  color: var(--flow-text);
}

/* The Free plan's way forward: one quiet line, never a banner. */
.flowwp-planstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--flow-border);
  border-radius: var(--flow-radius);
  background: var(--flow-surface-sunken);
  font-size: 12.5px;
  color: var(--flow-muted);
}

.flowwp-planstrip__label {
  color: var(--flow-text);
  font-weight: 600;
}

.flowwp-welcome__foot {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--flow-muted);
}