/* Flow builder, shown in a source's Flow tab. Theme tokens (--accent, --card, --ink, …) come from /console.css;
   classes are prefixed fb-. */
.fb {
  --fb-faint: color-mix(in srgb, var(--muted) 65%, var(--card));
  --fb-subtle: color-mix(in srgb, var(--ink) 4%, var(--card));
  --fb-hairline: color-mix(in srgb, var(--border) 55%, var(--card));
  --fb-rail: color-mix(in srgb, var(--ink) 16%, var(--card));
  --fb-green: #2e9b73; --fb-red: #d2493f; --fb-amber: #b7791f;
  font-size: 13px; color: var(--ink);
}
/* Zero-specificity resets, so component classes below always win. */
:where(.fb) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.fb :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb a { color: var(--accent-ink); }
.fb-mono, .fb pre, .fb input.fb-tpl { font-family: "Geist Mono", ui-monospace, monospace; }

.fb input.fb-tpl::placeholder { font-family: Geist, ui-sans-serif, system-ui, sans-serif; }

.fb-grid { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 20px; align-items: start; }
.fb-head { align-items: center; margin-bottom: 18px; }
.fb-headmain { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fb-state { color: var(--muted); font-size: 12px; }
.fb-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--fb-hairline); border-radius: 6px; color: var(--ink); font-size: 12px; text-decoration: none; }
.fb-chip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.fb-headside { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.fb-spacer { flex: 1; }
.fb-dirty { color: var(--fb-amber); font-size: 12px; font-weight: 600; }
.fb-main { min-width: 0; }
.fb-side { position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Save matches the view switch: same height, radius and type size. */
.fb-seg { display: inline-flex; height: 36px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--control); }
.fb-seg button { height: 100%; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.fb-seg button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.fb-save { height: 36px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 650; cursor: pointer; }
.fb-save:disabled { opacity: .55; cursor: default; }

.fb-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.fb-card > header { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.fb-card > header h2 { margin: 0; font-size: 13px; font-weight: 700; }
.fb-card > header small { color: var(--muted); }

.fb-banner { margin-bottom: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--fb-red) 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--fb-red) 7%, var(--card)); color: var(--ink); font-size: 12px; }
.fb-banner ul { margin: 4px 0 0; padding-left: 18px; }
.fb-banner.note { border-color: var(--border); background: var(--fb-subtle); }

.fb-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.fb-row > label, .fb-row > .fb-label { padding-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.fb input[type=text], .fb select, .fb textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--control); }
.fb input[type=text]:focus, .fb textarea:focus, .fb select:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.fb input[type=checkbox], .fb input[type=radio] { accent-color: var(--accent); }
.fb input.fb-tpl { font-size: 12px; }
.fb input.fb-invalid { border-color: var(--fb-red); }
.fb-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-pad { padding-top: 6px; }
.fb-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fb-chk { display: inline-flex; align-items: center; gap: 6px; }
.fb-endpoint { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 8px; background: var(--fb-subtle); font-size: 12px; }
.fb-endpoint code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-link { padding: 0; border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 650; cursor: pointer; }
.fb-muted { color: var(--muted); }
.fb-hint { color: var(--fb-faint); font-size: 11px; }
.fb-error { color: var(--fb-red); font-size: 11px; }
.fb-select-auto { width: auto !important; }
.fb-level { width: 140px !important; }

.fb-rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fb-rule { display: grid; grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 1fr) 26px; gap: 6px; align-items: start; }
.fb-rule .fb-error { margin-top: 3px; }
.fb-rule > div { min-width: 0; }
.fb-rule > .fb-x { padding: 7px 0; line-height: 1; }
.fb-rule.pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 26px; }
.fb-rule.single { grid-template-columns: minmax(0, 1fr) 26px; }
.fb-x { border: 0; background: transparent; color: var(--fb-faint); font-size: 16px; cursor: pointer; }
.fb-x:hover { color: var(--fb-red); }

.fb pre.fb-json { margin: 0; padding: 12px 14px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.fb-json .k { color: var(--muted); }
.fb-json button.k { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.fb-json button.k:hover { color: var(--accent-ink); text-decoration: underline; }
.fb-json .v { padding: 0 2px; border-radius: 4px; color: var(--accent-ink); cursor: pointer; }
.fb-json .v:hover { background: var(--accent-soft); }
.fb-json .n { color: var(--fb-amber); }
.fb-sample-edit { display: grid; gap: 8px; padding: 12px 14px; }
.fb-sample-edit textarea { min-height: 180px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
.fb-empty { padding: 16px; color: var(--muted); font-size: 12px; }

.pass { color: var(--fb-green); } .skip { color: var(--fb-faint); } .fail { color: var(--fb-red); }
.fb-notif { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: var(--fb-subtle); }
.fb-notif .ic { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.fb-notif strong { display: block; font-size: 13px; }
.fb-notif > div:last-child { min-width: 0; }
.fb-notif p, .fb-notif pre { margin: 2px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-lvl { padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.fb-lvl.error { background: color-mix(in srgb, var(--fb-red) 14%, var(--card)); color: var(--fb-red); }
.fb-lvl.warning { background: color-mix(in srgb, var(--fb-amber) 14%, var(--card)); color: var(--fb-amber); }
.fb-lvl.success { background: color-mix(in srgb, var(--fb-green) 14%, var(--card)); color: var(--fb-green); }
.fb-lvl.info { background: var(--accent-soft); color: var(--accent-ink); }
.fb-req { font-size: 12px; }
.fb-req pre { max-height: 180px; margin: 6px 0 0; padding: 8px 10px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--fb-subtle); font-size: 11px; }
.fb-result-note { display: block; padding-top: 7px; color: var(--muted); }

.fb-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fb-panes > div + div { border-left: 1px solid var(--border); }
.fb-panes h3 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.fb-panes pre { max-height: 220px; margin: 0; padding: 10px 12px; overflow: auto; font-size: 11px; line-height: 1.55; }

/* Step list */
.fb-pipe { padding: 4px 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.fb-step { position: relative; padding-left: 42px; }
.fb-step::before { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1px; background: var(--fb-rail); }
.fb-step.first::before { top: 23px; }
.fb-step.last::before { bottom: auto; height: 13px; }
.fb-step.branch { padding-left: 62px; }
.fb-step.branch::after { content: ""; position: absolute; top: 13px; left: 20px; width: 18px; height: 10px; border-bottom: 1px solid var(--fb-rail); border-left: 1px solid var(--fb-rail); border-bottom-left-radius: 10px; }
.fb-dot { position: absolute; z-index: 1; top: 19px; left: 16px; width: 9px; height: 9px; border: 2px solid var(--fb-rail); border-radius: 50%; background: var(--card); transition: background .2s, border-color .2s; }
.fb-step.branch .fb-dot { left: 36px; }
.fb-step.on .fb-dot { border-color: var(--accent); background: var(--accent); }
.fb-prow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding-right: 16px; }
.fb-step + .fb-step > .fb-prow { border-top: 1px solid var(--fb-hairline); }
.fb-step.open > .fb-prow { border-bottom: 1px dashed var(--border); }
.fb-plabel + .fb-step > .fb-prow { border-top: 0; }
.fb-plabel { position: relative; padding: 10px 0 2px 42px; }
.fb-plabel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1px; background: var(--fb-rail); }
.fb-plabel span { color: var(--fb-faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* The step name sits inside a pill switch; the knob slides across the word when it turns on. */
.fb-tslot { flex: none; width: 112px; }
.fb-toggle { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 10px 0 25px; border: 1px solid var(--border); border-radius: 999px; background: var(--control); color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s, color .2s, padding .2s; }
.fb-toggle::before { content: ""; position: absolute; top: 50%; left: 5px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, var(--card)); transition: left .2s ease, background .2s; }
.fb-toggle[aria-checked="true"] { padding: 0 25px 0 10px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.fb-toggle[aria-checked="true"]::before { left: calc(100% - 19px); background: var(--on-accent); }
.fb-toggle:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.fb-toggle:disabled { cursor: default; opacity: .6; }

.fb-pmain { display: flex; flex: 1; align-items: center; align-self: stretch; gap: 14px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.fb-psum { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.fb-step.off .fb-psum { color: var(--fb-faint); }
.fb-pres { flex: none; font-size: 12px; font-weight: 650; }
.fb-pchev { flex: none; width: 14px; color: var(--fb-faint); font-size: 16px; text-align: center; }
.fb-pmain:hover .fb-pchev { color: var(--accent-ink); }
.fb-pbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 20px 0; }

/* JSON editor: a transparent textarea over a highlighted copy of the same text. */
.fb-jcard { overflow: hidden; }
.fb-jbar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.fb-jbar .file { color: var(--muted); font-family: "Geist Mono", ui-monospace, monospace; }
.fb-jstatus { font-weight: 650; }
.fb-jscroll { max-height: calc(100vh - 190px); overflow: auto; background: var(--fb-subtle); }
.fb-jgrid { display: grid; grid-template-columns: max-content 1fr; width: max-content; min-width: 100%; }
.fb-jlines { position: sticky; z-index: 2; left: 0; padding: 14px 10px 14px 14px; border-right: 1px solid var(--fb-hairline); background: var(--fb-subtle); color: var(--fb-faint); font: 12.5px/20px "Geist Mono", ui-monospace, monospace; text-align: right; white-space: pre; user-select: none; }
.fb-jstack { display: grid; min-width: 100%; }
.fb-jstack > * { grid-area: 1 / 1; margin: 0; padding: 14px 18px; border: 0; font: 12.5px/20px "Geist Mono", ui-monospace, monospace; letter-spacing: 0; white-space: pre; tab-size: 2; }
.fb .fb-jstack textarea { width: 100%; height: 100%; overflow: hidden; padding: 14px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; color: transparent; caret-color: var(--ink); resize: none; }
.fb .fb-jstack textarea:focus { box-shadow: none; }
.fb-jstack textarea::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); color: transparent; }
.fb-jstack pre { color: var(--ink); pointer-events: none; }
.fb-jk { color: var(--muted); } .fb-js { color: var(--accent-ink); } .fb-jn { color: var(--fb-amber); } .fb-jb { color: var(--fb-green); } .fb-jp { color: var(--fb-faint); }
.fb-jt { border-radius: 3px; background: var(--accent-soft); }
.fb-jerr { background: color-mix(in srgb, var(--fb-red) 14%, transparent); }

/* Flow analyser */
.fb-flowbox { padding: 6px 12px 14px; }
#fb-flow { display: block; width: 100%; height: auto; overflow: visible; }
#fb-flow .edge { fill: none; stroke: var(--fb-rail); stroke-width: 1.5; stroke-linecap: round; }
#fb-flow .edge.dim { stroke-dasharray: 1 5; }
#fb-flow .lit { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0; }
#fb-flow .fnode .box { fill: var(--card); stroke: var(--border); stroke-width: 1.2; transition: stroke .7s; }
#fb-flow .fnode.src .box { fill: var(--fb-subtle); }
#fb-flow .fnode.dim .box { stroke-dasharray: 3 3; }
#fb-flow .fnode.hit .box { stroke: var(--accent); }
#fb-flow .fnode .glow { fill: none; stroke: var(--accent); stroke-width: 6; opacity: 0; }
#fb-flow .fnode.hit .glow { animation: fb-glow 2s ease-out; }
@keyframes fb-glow { 0% { opacity: .28; } 100% { opacity: 0; } }
#fb-flow .fnode .glyph { fill: none; stroke: var(--accent-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#fb-flow .fnode.dim .glyph, #fb-flow .fnode.src .glyph { stroke: var(--muted); }
#fb-flow .fnode text.name { fill: var(--ink); font-size: 11px; font-weight: 650; }
#fb-flow .fnode.dim text.name { fill: var(--fb-faint); }
#fb-flow text.note { fill: var(--fb-red); font-size: 10.5px; font-weight: 650; }
#fb-flow .packet, #fb-flow .trail { fill: var(--accent); }
#fb-flow .ripple { fill: none; stroke: var(--accent); stroke-width: 1.2; }
@media (prefers-reduced-motion: reduce) { .fb-toggle, .fb-toggle::before, .fb-dot, #fb-flow .fnode .box { transition: none; } #fb-flow .fnode.hit .glow { animation: none; } }

.fb-loading { padding: 60px; color: var(--muted); text-align: center; }
.fb-sample-hint { padding: 0 16px 12px; }

/* ---------- Phone and Home Screen app: single-column, touch-sized builder ---------- */
@media (max-width: 860px) {
  .fb-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* Header: state and view switch, then a full-width save. */
  .fb-headmain { flex-wrap: wrap; gap: 10px; }
  .fb-seg { height: 52px; max-width: 100%; }
  .fb-seg button { min-width: 44px; }
  .fb-state { overflow-wrap: anywhere; }
  .fb-save { width: 100%; height: 44px; }

  /* The analyser and sample event follow the editor and scroll with the page. */
  .fb-side { position: static; }
  .fb-step, .fb-step.branch { padding-left: 24px; }
  .fb-step::before, .fb-plabel::before { left: 10px; }
  .fb-dot, .fb-step.branch .fb-dot { left: 6px; }
  .fb-step.branch::after { left: 10px; width: 10px; }
  .fb-plabel { padding-left: 24px; }
  .fb-prow { gap: 6px; padding-right: 10px; min-height: 52px; }
  .fb-tslot { width: 102px; }
  .fb-pmain { min-width: 44px; min-height: 44px; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
  .fb-psum { flex-basis: 100%; }
  .fb-pbody { padding-right: 10px; overflow-wrap: anywhere; }
  .fb-row > *, .fb-rule > *, .fb-inline > *, .fb-stack > * { min-width: 0; max-width: 100%; }
  .fb-chk input { flex: none; }

  /* Step rows: the label sits above its controls. */
  .fb-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fb-row > label, .fb-row > .fb-label { padding-top: 0; }

  /* Filter rows: field full width, operator and value below, remove at the top-right. */
  .fb-rule:not(.pair):not(.single) { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "field x" "op x" "value x"; gap: 6px; }
  .fb-rule:not(.pair):not(.single) > div:first-child { grid-area: field; }
  .fb-rule:not(.pair):not(.single) > select { grid-area: op; }
  .fb-rule:not(.pair):not(.single) > input { grid-area: value; }
  .fb-rule:not(.pair):not(.single) > .fb-x { grid-area: x; align-self: start; }

  /* Field rows: name then text, remove at the top-right. */
  .fb-rule.pair { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "name x" "text x"; }
  .fb-rule.pair > div:nth-child(1) { grid-area: name; }
  .fb-rule.pair > div:nth-child(2) { grid-area: text; }
  .fb-rule.pair > .fb-x { grid-area: x; align-self: start; }
  .fb-rule.single { grid-template-columns: minmax(0, 1fr) 44px; }

  /* Input and output panes stack. */
  .fb-panes { grid-template-columns: minmax(0, 1fr); }
  .fb-panes > div + div { border-left: 0; border-top: 1px solid var(--border); }

  /* The JSON editor toolbar wraps instead of overflowing. */
  .fb-jbar { flex-wrap: wrap; row-gap: 6px; }
  .fb-jbar > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* Touch-sized controls. */
  .fb-toggle { height: 44px; }
  .fb-x { width: 44px; height: 44px; font-size: 20px; }
  .fb-link, .fb-chip, .fb-chk { min-height: 44px; min-width: 44px; }
  .fb input[type=text], .fb select, .fb textarea { min-height: 44px; font-size: 16px; }
}

/* Match the console's 16px touch fields without separating the caret from its overlay. */
@media (max-width: 860px), (pointer: coarse) {
  .fb-jlines, .fb-jstack > *, .fb .fb-jstack textarea { font: 16px/24px "Geist Mono", ui-monospace, monospace; letter-spacing: 0; }
}