/* MostlyQR — builder app styles. Three-pane tool shell on the Mostly Tiny
   token layer. Works in light + dark (data-theme="dark"). */

body { margin: 0; background: var(--bg); }
/* One-viewport app shell: topbar + QR builder + flow editor as three rows that
   fit the screen on a normal desktop — no page scroll. Each region scrolls
   internally only if its own content overflows (e.g. a long style panel). */
.bld { font-family: var(--font-sans); color: var(--fg); height: 100vh; display: grid;
  grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; -webkit-font-smoothing: antialiased; }

/* ── Topbar ── */
.bld-top { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg-elev) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 30; }
.bld-top__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); }
.bld-top__divider { width: 1px; height: 22px; background: var(--border); }
.bld-crumbs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bld-crumb { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--fg-muted); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 8px; border-radius: 8px; white-space: nowrap; transition: all .14s var(--ease-out); }
.bld-crumb:hover { color: var(--fg); background: var(--bg-row-hover); }
.bld-crumb svg { color: var(--fg-subtle); }
.bld-crumb__sep { color: var(--fg-subtle); font-size: 14px; }
.bld-top__name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.bld-top__name input { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; max-width: 200px; }
.bld-top__name input:hover { background: var(--bg-row-hover); }
.bld-top__name input:focus { outline: none; background: var(--bg-elev); border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.bld-top__spacer { flex: 1; }
.bld-top__actions { display: flex; align-items: center; gap: 10px; }
.bld-savechip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--good-soft); color: color-mix(in srgb, var(--good) 64%, var(--fg)); font-size: 12px; font-weight: 600; }
.bld-savechip svg { color: var(--good); }
.bld-savechip.is-dirty { background: var(--bg-chip); color: var(--fg-muted); }
.bld-themeseg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-chip); }
.bld-themeseg button { display: grid; place-items: center; width: 30px; height: 26px; border: none; background: transparent; border-radius: var(--radius-pill); color: var(--fg-muted); cursor: pointer; transition: all .15s var(--ease-out); }
.bld-themeseg button[data-on="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-xs); }

/* ── Body split ── (row 2: the stepped builder on the LEFT, big QR on the RIGHT) */
.bld-body { min-height: 0; display: grid; grid-template-columns: minmax(500px, 1fr) minmax(440px, 1fr); }

/* ── QR hero ── (LARGE, centred in its own panel, always visible) */
.bld-hero { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; border-left: 1px solid var(--hairline); background: var(--bg-elev); overflow-y: auto; }
.bld-hero .bld-previewcard { flex-direction: column; align-items: center; gap: 26px; max-width: 780px; width: 100%; padding: 36px; }
.bld-hero .bld-qrwrap svg { width: 700px; max-width: 100%; }
.bld-hero .bld-previewmeta { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 480px; }
.bld-hero .bld-scanline { font-size: 12.5px; }
.bld-previewmeta { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ── Right column ── stepper (top) · scrolling step body (middle) · nav (bottom) */
.bld-right { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); }
/* flex column + auto-margin child = short steps centre vertically (to meet the QR),
   but a tall step (Flow) collapses the margins, top-aligns and uses the full height. */
.bld-right__body { min-height: 0; overflow-y: auto; }

/* ── Stepper ── (clickable; numbered; the locked Flows step shows a lock) */
.bld-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 18px 24px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); }
.bld-stepper__line { width: 34px; height: 2px; flex: none; margin: 0 4px; border-radius: 2px; background: var(--border); transition: background .2s var(--ease-out); }
.bld-stepper__line[data-done="true"] { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.bld-stepper__step { display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 11px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius-pill); cursor: pointer; text-align: left; transition: all .15s var(--ease-out); }
.bld-stepper__step:hover { border-color: var(--border-strong); }
.bld-stepper__step[data-on="true"] { border-color: color-mix(in srgb, var(--accent) 48%, transparent); background: var(--accent-bg-soft); box-shadow: var(--shadow-xs); }
.bld-stepper__num { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg-chip); color: var(--fg-muted); font-size: 13px; font-weight: 700; transition: all .15s var(--ease-out); }
.bld-stepper__step[data-on="true"] .bld-stepper__num { background: var(--accent); color: var(--accent-fg); }
.bld-stepper__step[data-done="true"] .bld-stepper__num { background: var(--good); color: #fff; }
.bld-stepper__txt { display: flex; flex-direction: column; line-height: 1.2; }
.bld-stepper__t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.bld-stepper__d { font-size: 11px; color: var(--fg-subtle); margin-top: 2px; }

/* ── Active step panel ── (one step at a time; top-aligned, with breathing room) */
.bld-step { padding: 40px 30px 30px; }
/* Type & Style both lay out in a single column, centred (aligned with the stepper) */
.bld-typecols { display: flex; flex-direction: column; gap: 24px; max-width: 560px; margin-inline: auto; }

/* Footer pinned to the bottom of the right column → Back/Continue at a constant height */
.bld-footer { border-top: 1px solid var(--hairline); background: var(--bg); padding: 14px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Style step → single column, centred */
.bld-stylegrid { display: flex; flex-direction: column; gap: 4px; max-width: 560px; margin-inline: auto; }
.bld-stylegrid .bld-shape { aspect-ratio: auto; height: 54px; }

.bld-grouplabel { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); margin: 2px 0 12px; }
.bld-grouplabel:not(:first-child) { margin-top: 26px; }

/* ── Type picker ── */
.bld-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bld-type { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); cursor: pointer; text-align: left; transition: all .14s var(--ease-out); }
.bld-type:hover { border-color: var(--border-strong); }
.bld-type[data-on="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg-soft); }
.bld-type__ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg-chip); color: var(--fg-muted); transition: all .14s var(--ease-out); }
.bld-type[data-on="true"] .bld-type__ic { background: var(--accent); color: var(--accent-fg); }
.bld-type__name { font-size: 13px; font-weight: 600; }
.bld-type__sub { font-size: 11px; color: var(--fg-subtle); margin-top: -4px; }

/* ── Form ── */
.bld-form { display: flex; flex-direction: column; gap: 14px; }
.bld-form .forge-field { gap: 6px; }
.bld-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bld-dynamicnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: var(--radius); background: var(--accent-bg-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.bld-dynamicnote svg { color: var(--accent); flex: none; margin-top: 1px; }
.bld-dynamicnote b { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--accent) 78%, var(--fg)); }
.bld-dynamicnote p { font-size: 12px; color: var(--fg-muted); margin: 3px 0 0; line-height: 1.45; }

/* ── Center preview ── */
.bld-previewcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 420px; width: 100%; }
.bld-qrwrap { position: relative; padding: 6px; border-radius: var(--radius); display: grid; place-items: center; }
.bld-qrwrap svg { width: 280px; max-width: 100%; height: auto; display: block; border-radius: 8px; }
.bld-barcode-err { display: flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; min-height: 110px; padding: 16px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--hairline); color: var(--fg-muted); font-size: 12.5px; line-height: 1.4; text-align: left; }
.bld-barcode-err svg { width: auto; flex: none; color: var(--danger, #d4504e); }
.bld-destbar { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--hairline); }
.bld-destbar__ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-bg-soft); color: var(--accent); flex: none; }
.bld-destbar__url { font-family: var(--font-mono); font-size: 12px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-destbar__lbl { font-size: 12px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-neverexp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--good-soft); color: color-mix(in srgb, var(--good) 60%, var(--fg)); font-size: 12px; font-weight: 600; }
.bld-neverexp svg { color: var(--good); }
.bld-exports { display: flex; gap: 9px; width: 100%; }
.bld-exports .forge-btn { flex: 1; }
.bld-scanline { font-size: 12px; color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 7px; }

/* ── Style panel ── */
.bld-segs { display: flex; gap: 6px; }
.bld-shapebtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bld-shapebtns--3 { grid-template-columns: repeat(3, 1fr); }
.bld-shapebtns--frame { grid-template-columns: repeat(5, 1fr); }
.bld-shape { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; color: var(--fg-muted); transition: all .14s var(--ease-out); }
.bld-shape:hover { border-color: var(--border-strong); }
.bld-shape[data-on="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-bg-soft); color: var(--accent); }
.bld-shape svg { display: block; }
/* eye frame + eye ball side by side (save vertical space) */
.bld-eyegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* compact colours: foreground · eyes · background, each a swatch that opens the
   OS colour picker, with the live hex beside it */
.bld-colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bld-colorcell__top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; min-height: 18px; }
.bld-colorcell__lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); }
.bld-colorcell__match { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-subtle); cursor: pointer; transition: all .14s var(--ease-out); }
.bld-colorcell__match[data-on="true"] { background: var(--accent-bg-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.bld-colorpick { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); cursor: pointer; transition: border-color .14s var(--ease-out); }
.bld-colorpick:hover { border-color: var(--border-strong); }
.bld-colorpick__chip { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); flex: none; }
.bld-colorpick input[type="color"] { position: absolute; left: 5px; top: 5px; width: 26px; height: 26px; padding: 0; border: none; opacity: 0; cursor: pointer; }
.bld-colorpick__hex { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-gradient { margin-top: 12px; }
.bld-gradient__stops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* Template gallery */
/* Background options + CTA frame options + logo size */
.bld-bgopts, .bld-frameopts { display: flex; gap: 6px; margin-top: 8px; }
.bld-frameopts { flex-direction: column; }
.bld-logosize { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.bld-logosize input[type="range"] { flex: 1; accent-color: var(--accent); }
/* Transparent-background preview: a subtle checkerboard so the code reads on it */
.bld-qrwrap.is-transparent {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e9e9ee 25%, transparent 25%), linear-gradient(-45deg, #e9e9ee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e9ee 75%), linear-gradient(-45deg, transparent 75%, #e9e9ee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.bld-logo { display: flex; align-items: center; gap: 9px; }
.bld-logo__drop { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 12px; border-radius: var(--radius); border: 1px dashed var(--border-strong); background: var(--bg); cursor: pointer; color: var(--fg-muted); font-size: 12px; transition: all .14s var(--ease-out); }
.bld-logo__drop:hover { border-color: var(--accent); color: var(--accent); }
.bld-logo__preview { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--bg); overflow: hidden; flex: none; }
.bld-logo__preview img { width: 100%; height: 100%; object-fit: contain; }
/* logo fit (hug/card/circle) as inline icon buttons, plus a remove (×) */
.bld-logo__fits { display: flex; gap: 5px; flex: none; }
.bld-logofit, .bld-logo__rm { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--fg-muted); cursor: pointer; flex: none; transition: all .14s var(--ease-out); }
.bld-logofit:hover, .bld-logo__rm:hover { border-color: var(--border-strong); }
.bld-logofit[data-on="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-bg-soft); color: var(--accent); }
.bld-logo__rm:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.bld-ecc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bld-eccbtn { padding: 9px 0; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-family: var(--font-sans); transition: all .14s var(--ease-out); }
.bld-eccbtn[data-on="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-bg-soft); }
.bld-eccbtn__k { font-size: 13px; font-weight: 700; color: var(--fg); }
.bld-eccbtn[data-on="true"] .bld-eccbtn__k { color: var(--accent); }
.bld-eccbtn__v { font-size: 11px; color: var(--fg-subtle); margin-top: 1px; }
.bld-ecchint { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--fg-muted); }
.bld-ecchint svg { color: var(--accent); flex: none; margin-top: 1px; }
.bld-ecchint--warn { color: var(--danger, #c0392b); }
.bld-ecchint--warn svg { color: var(--danger, #c0392b); }

/* The edit side is the grey canvas (--bg); lift the step-1/2 controls onto the
   lighter card surface (--bg-elev) so they read as interactive, not flat. The
   active [data-on] states keep their accent fill (higher specificity wins). */
.bld-type, .bld-shape, .bld-eccbtn, .bld-colorpick, .bld-colorcell__match,
.bld-logofit, .bld-logo__rm, .bld-logo__drop, .bld-logo__preview { background: var(--bg-elev); }

#tweaks-root { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ── Registration gate (Save/Download → sign in) ── */
.bld-authwrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, #000 40%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bld-auth { position: relative; width: 100%; max-width: 400px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); padding: 30px 28px 24px; }
.bld-auth__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; color: var(--fg-subtle); cursor: pointer; }
.bld-auth__x:hover { background: var(--bg-chip); color: var(--fg); }
.bld-auth__body { display: flex; flex-direction: column; align-items: flex-start; }
.bld-auth__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; background: var(--accent-bg-soft); color: var(--accent); }
.bld-auth__ic--ok { background: var(--good-soft); color: var(--good); }
.bld-auth__t { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.bld-auth__d { font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; margin: 8px 0 18px; }
.bld-auth__input { width: 100%; box-sizing: border-box; padding: 11px 13px; font: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); margin-bottom: 12px; }
.bld-auth__input:focus { outline: none; border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.bld-auth__err { font-size: 12.5px; color: var(--bad); margin-bottom: 10px; }
.bld-auth__foot { font-size: 12px; color: var(--fg-subtle); margin-top: 12px; }

.bld-exports.is-locked { opacity: 0.5; }
.bld-downloadhint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; border: none; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; }
.bld-downloadhint:hover { text-decoration: underline; }

/* ── Routing — the Flows step (full width). The eyebrow is redundant with the
   stepper, so it's hidden; the title gives the descriptive lead. ── */
.bld-flow { position: relative; }
.bld-flow__head { margin: 0 0 18px; }
.bld-flow__eyebrow { display: none; }
.bld-flow__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.bld-flow__sub { font-size: 13.5px; color: var(--fg-muted); margin: 5px 0 0; line-height: 1.45; max-width: 620px; }
.bld-flow__missing { color: var(--fg-subtle); font-size: 13px; }

/* Flows step: two columns. LEFT = the routing running TOP → DOWN from the scan
   (User scans QR ↓ rules ↓ default). RIGHT = the test simulator + integrations. */
.bld-flow .fl-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 30px; align-items: start; }
.bld-flow .fl-canvas { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: relative; isolation: isolate; }
/* the scan node is a full-width header bar on top, with a beam sweeping across it */
.bld-flow .fl-node--scan { align-self: stretch; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; }
.bld-flow .fl-node__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bld-flow .fl-node__u { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.7; }
/* vertical connectors — centred dashed line + a downward arrowhead between every
   stage (scan ↓ routing ↓ add rule ↓ default) so the flow direction is obvious */
.bld-flow .fl-wire, .bld-flow .fl-wire--h { align-self: center; width: 2px; height: 30px; flex: none; margin: 7px 0 13px; position: relative; opacity: .9;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 75%, transparent) 0 5px, transparent 5px 10px); }
.bld-flow .fl-wire::after, .bld-flow .fl-wire--h::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid color-mix(in srgb, var(--accent) 75%, transparent); }
.bld-flow .fl-route { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.bld-flow .fl-stack, .bld-flow .fl-node--default, .bld-flow .fl-recipes, .bld-flow .fl-intlane { max-width: none; }
.bld-flow .fl-aside { display: flex; flex-direction: column; gap: 20px; }
.bld-flow .fl-intlane { margin-top: 0; padding-top: 0; border-top: none; }
.bld-flow .fl-sim { position: static; }

/* a light beam sweeping horizontally across the dark scan node — reads as "scanning" */
.fl-scanbeam { position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 55%, #ffffff) 50%, transparent 65%);
  opacity: 0.32; mix-blend-mode: screen; animation: fl-scanbeam 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes fl-scanbeam { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fl-scanbeam { animation: none; display: none; } }

/* once the scan beam finishes sweeping (~55% of the cycle), a faint gray band
   drops top→bottom over the whole canvas — the scan "firing" the flow downstream.
   Same 2.6s cycle as the beam so the two stay in lockstep. z-index:-1 (with the
   canvas isolated) puts it BEHIND every card/wire/label, so it only whispers
   through the gaps. pointer-events:none keeps it non-blocking. */
.fl-flowpulse { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--fg) 10%, transparent) 50%, transparent);
  background-repeat: no-repeat; background-size: 100% 34%; background-position: 50% -34%;
  animation: fl-flowpulse 2.6s cubic-bezier(.4, 0, .5, 1) infinite; }
@keyframes fl-flowpulse {
  0%, 50% { background-position: 50% -34%; opacity: 0; }
  58% { opacity: .7; }
  88% { opacity: .7; }
  100% { background-position: 50% 134%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fl-flowpulse { animation: none; display: none; } }

@media (max-width: 1040px) {
  .bld-flow .fl-layout { grid-template-columns: 1fr; }
}

/* Narrow screens: the left/right split stacks into one scrolling column. */
@media (max-width: 960px) {
  .bld { height: auto; min-height: 100vh; display: flex; flex-direction: column; overflow: visible; }
  .bld-top { position: sticky; top: 0; }
  .bld-body { display: flex; flex-direction: column; }
  .bld-hero { order: -1; border-left: none; border-bottom: 1px solid var(--hairline); overflow: visible; padding: 22px; }
  .bld-hero .bld-qrwrap svg { width: 240px; }
  .bld-right { display: flex; flex-direction: column; }
  .bld-right__body { overflow: visible; }
  .bld-footer { position: sticky; bottom: 0; }
  .bld-typecols, .bld-stylegrid { grid-template-columns: 1fr; gap: 26px; }
  .bld-stepper__d { display: none; }
}

/* the flow's default destination is read-only — it mirrors the builder's destination */
.fl-default-ro { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; padding: 8px 2px; font-size: 13px; color: var(--fg); }
.fl-default-input { width: 100%; }
.fl-default-ro__hint { margin-left: auto; flex: none; font-size: 11px; color: var(--fg-subtle); white-space: nowrap; }

/* embedded editor wrapper + save bar */
.fl-editor { position: relative; }
.fl-editor__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; min-height: 30px; }
.fl-editor__state { font-size: 12px; color: var(--fg-subtle); }
.fl-editor__state.is-saved { color: var(--good); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.fl-editor--loading { color: var(--fg-subtle); font-size: 13px; padding: 24px 0; }

/* locked (free plan): a non-covering sticky upgrade banner ABOVE the editor; the
   editor below stays visible (dimmed + read-only) so users see what they unlock. */
.fl-editor__body.is-locked { opacity: .6; pointer-events: none; user-select: none; }
.fl-upgrade { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 13px 16px; margin-bottom: 16px;
  border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-elev)); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fl-upgrade__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); }
.fl-upgrade__txt { flex: 1; min-width: 0; }
.fl-upgrade__t { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.fl-upgrade__d { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; margin-top: 2px; }
.fl-upgrade > .forge-button, .fl-upgrade > button { flex: none; }
@media (max-width: 720px) { .fl-upgrade { flex-wrap: wrap; } .fl-upgrade__txt { flex-basis: 100%; } }

/* ── Security (passcode protection) — a Pro card sitting above the Flow editor.
   Mirrors the routing gate: dimmed + non-interactive body when locked (free). */
.bld-seccard { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 22px; background: var(--bg-elev); }
.bld-seccard__head { display: flex; align-items: center; gap: 12px; }
.bld-seccard__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--accent-bg-soft); color: var(--accent); }
.bld-seccard__txt { flex: 1; min-width: 0; }
.bld-seccard__t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.bld-seccard__d { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; line-height: 1.45; }
.bld-seccard__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); max-width: 360px; }
.bld-seccard.is-locked { opacity: 0.85; }
.bld-seccard.is-locked .bld-seccard__ic { background: color-mix(in srgb, var(--fg-subtle) 14%, transparent); color: var(--fg-subtle); }

/* ── Saved brand styles — a chip strip atop the Style step ── */
.bld-presets { margin: 0 0 22px; }
.bld-presetrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bld-preset { position: relative; display: inline-flex; }
.bld-preset__apply { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); cursor: pointer; transition: all .14s var(--ease-out); }
.bld-preset__apply:hover { border-color: var(--border-strong); background: var(--bg-elev); }
.bld-preset__sw { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); flex: none; }
.bld-preset__sw i { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.bld-preset__sw i:first-child { top: 4px; left: 4px; }
.bld-preset__sw i:last-child { bottom: 4px; right: 4px; }
.bld-preset__nm { font-size: 12.5px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-preset__rm { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.bld-preset:hover .bld-preset__rm { opacity: 1; }
.bld-preset__rm:hover { color: var(--danger, #d4524e); border-color: var(--border-strong); }
.bld-preset__add { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--fg-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s var(--ease-out); }
.bld-preset__add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg-soft); }
.bld-preset__new { display: inline-flex; align-items: center; gap: 6px; }
.bld-preset__nameinput { width: 150px; height: 32px; padding: 0 10px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); font: inherit; font-size: 12.5px; outline: none; }
.bld-preset__confirm { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-fg); cursor: pointer; }
.bld-preset__confirm:disabled { opacity: .5; cursor: default; }