/* Funnel definition page (feature: received-event funnel page, checkpoint C1).
   Scoped to the funnel page only, so the calendar workspace and its layout cannot change.
   It reuses the app.css dark/cyan desktop tokens, cards, buttons, busy spinner, field and
   state-message styles; everything here is additive and prefixed .fn- plus the two page
   element ids. No new art, font or design system. */

/* The editor needs more room than the calendar card, which keeps its own 960px width. */
#screen-funnels .workspace-body { max-width: 1100px; }
#screen-funnels .card + .card { margin-top: 1.5rem; }

/* Card header with the action pushed to the trailing edge. */
.fn-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.fn-card-head h3 { margin: 0; }
.fn-card-head .btn { margin-left: auto; }

.fn-help { font-size: 0.78rem; color: var(--text-muted); margin: 0.35rem 0 0; }
.fn-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 0.25rem;
}
.fn-table { margin-top: 0.25rem; }

/* Name / version side by side, then the composite preview. */
.fn-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.fn-preview-line { margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.fn-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
}
.fn-preview-muted { font-style: italic; }

/* Fieldset groups inside the editor card. */
.fn-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  min-width: 0;
}
.fn-fieldset legend { font-size: 0.85rem; color: var(--text-muted); padding: 0 0.3rem; }
.fn-fieldset > .fn-help:first-of-type { margin-top: 0; }

/* Observed client-version choices. */
.fn-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  max-height: 180px;
  overflow-y: auto;
}
.fn-version-choice { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.fn-version-choice input { accent-color: var(--accent); }
.fn-version-choice input:focus-visible { outline: var(--focus); outline-offset: 2px; }

.fn-active-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.fn-active-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.fn-active-row input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.fn-active-row label { font-weight: 600; }

/* One ordered stage. The numbered legend is the step indicator; there is no graph canvas. */
.fn-stage-list { margin-top: 0.75rem; }
.fn-stage {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  min-width: 0;
}
.fn-stage legend { font-size: 0.8rem; font-weight: 600; color: var(--accent); padding: 0 0.35rem; }
.fn-stage-number { letter-spacing: 0.4px; text-transform: uppercase; }
.fn-stage-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem 1rem; align-items: start; }
.fn-source-chip {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

/* Optional exact-match property conditions, ANDed within the stage. */
.fn-conditions { margin-top: 0.85rem; border-top: 1px dashed var(--border); padding-top: 0.75rem; }
.fn-conditions-title { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.fn-condition {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1.3fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.fn-condition-novalue { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
.fn-condition-remove { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
.fn-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.fn-row-actions .btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; }

.fn-empty-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* An anchor styled as a button is inline by default, so its padding would overlap the help text
   above it. inline-block makes the line box account for the padding again. */
#signin-card .btn { display: inline-block; margin-top: 0.85rem; }

/* Success feedback for a confirmed save. */
.fn-success { color: var(--success); }

/* Saved-version row actions: explicit copy, per-row independent activation and dashboard status.
   The events-table already stacks rows at the top, which keeps the taller cells readable. */
.fn-copy { display: block; margin-top: 0.45rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.fn-active-cell { white-space: nowrap; }
.fn-active-cell input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.fn-active-cell input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.fn-active-cell label { margin-left: 0.4rem; font-size: 0.85rem; }

.fn-dashboard-cell { min-width: 230px; }
.fn-dash-status {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.fn-dash-published { background: rgba(52, 211, 153, 0.12); color: var(--success); }
.fn-dash-not-configured { background: var(--bg-elev); color: var(--text-muted); }
.fn-dash-unconfirmed { background: rgba(34, 211, 238, 0.12); color: var(--accent); }
.fn-dash-conflict { background: rgba(248, 113, 113, 0.14); color: var(--danger); }
.fn-dash-unknown { background: var(--bg-elev); color: var(--text-muted); font-style: italic; }
.fn-dash-note { display: block; margin-top: 0.3rem; font-size: 0.76rem; color: var(--text-muted); }
.fn-dash-link { display: inline-block; margin-top: 0.3rem; font-size: 0.8rem; }
.fn-retry { display: block; margin-top: 0.45rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; }

/* Copy context banner above the editor fields. */
.fn-copy-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--accent-soft);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--text);
}
.fn-copy-banner .btn { margin-left: auto; padding: 0.35rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }