/* anota form builder chrome (bld-*). Field visuals come from anota-forms.css (af-*).
   Retokened onto the shared var(--an-*) design system (app.css) — this file used to hardcode
   its own near-duplicate, drifting palette (an off-brand primary #21a884 vs the real
   --an-primary #16A385, its own gradient button, its own font stack). Buttons are unified onto
   the app-wide flat an-btn-* style; bld-btn's compact padding is kept as the deliberate "dense"
   size tier for this toolbar-heavy screen, not a separate visual language. */

/* ---------- motion tokens ----------
   One shared vocabulary for every transition/animation duration and curve added across
   Tasks 6-13, so the canvas reads as a single system rather than a pile of independently-tuned
   values. --bld-dur-gap's value is not arbitrary — it matches Jotform's measured
   margin-bottom .15s ease-in-out for the same gap-open moment. */
:root {
    --bld-dur-fast: .12s;
    --bld-dur-gap: .15s;
    --bld-dur-drawer: .2s;
    --bld-dur-ghost: .18s;

    --bld-ease-out: ease-out;
    --bld-ease-gap: ease-in-out;
    --bld-ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

.bld-root {
    /* Shared by .bld-drawer's width and .bld-designer-fab-shifted's offset, so the two
       cannot silently drift apart. */
    --bld-drawer-w: 320px;

    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--an-slate-50);
    font-family: var(--an-font);
}

/* ---------- top bar ----------
   Three-column grid, not a plain flex row: the outer 1fr columns absorb whatever
   width the title/actions need, so the middle column (the main tabs) stays truly
   centered on the page regardless of title length or how many action buttons are
   present — a flex row with margin-left:auto on the trailing group can't do this,
   it only pushes content to the edges, not center a middle item independently. */
/* The masthead was white-on-white with grey text — structurally present, visually absent, so the
   whole screen read as unfinished. It now sits on a deep brand navy and carries the one place
   anota's teal→green gradient appears: a 3px rule along the top edge. The gradient is in the
   token set and was going unused; a hairline of it is enough to sign the product without
   turning the chrome into a billboard. */
.bld-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: var(--an-ink);
    border-bottom: 0;
}

.bld-topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--an-gradient);
}

.bld-topbar .bld-title { color: #fff; }
.bld-topbar .bld-title::placeholder { color: rgb(255 255 255 / .45); }
.bld-topbar .bld-title:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); }
.bld-topbar .bld-title:focus { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); }

/* Scoped to .bld-topbar deliberately: the generic .bld-back / .bld-btn / .bld-save-status rules
   are defined further down this file, so an unscoped override here would lose the cascade to
   them and silently leave dark-on-dark text. */
.bld-topbar .bld-back { color: rgb(255 255 255 / .6); }
.bld-topbar .bld-back:hover { color: #fff; background: rgb(255 255 255 / .1); }

.bld-topbar .bld-save-status { color: rgb(255 255 255 / .55); }

.bld-topbar .bld-btn {
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .16);
    color: rgb(255 255 255 / .85);
}

.bld-topbar .bld-btn:hover:not(:disabled) {
    background: rgb(255 255 255 / .16);
    border-color: rgb(255 255 255 / .3);
    color: #fff;
}

.bld-topbar .bld-main-tab { color: rgb(255 255 255 / .55); }
.bld-topbar .bld-main-tab:hover { color: #fff; }

.bld-topbar .bld-main-tab-active {
    color: #fff;
    border-bottom-color: var(--an-green);
}

.bld-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bld-back {
    font-size: 20px;
    text-decoration: none;
    color: var(--an-slate-600);
    padding: 2px 8px;
    border-radius: 6px;
}

.bld-back:hover { background: var(--an-slate-100); }

.bld-title {
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    /* Shrinks with its column instead of forcing a 280px minimum (which pushed the title under
       the Build/Settings/Publish tabs on narrow screens); long titles end in an ellipsis. */
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 420px;
    text-overflow: ellipsis;
    background: transparent;
}

.bld-title:hover { border-color: var(--an-slate-200); }
.bld-title:focus { border-color: var(--an-primary); outline: none; background: #fff; }

.bld-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- main tabs (Build / Settings / Publish) ----------
   Underline-indicator nav, not pill buttons — this is primary navigation between
   the builder's three modes, so it needs more visual weight than a bld-btn action.
   Icons reuse the same monoline SVG language as FieldPalette's field-type icons
   (24x24, stroke=currentColor, stroke-width 2) for one consistent icon system
   across the builder, not a one-off set. */
.bld-main-tabs {
    display: flex;
    gap: 4px;
    align-self: stretch;
}

.bld-main-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--an-slate-500);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.bld-main-tab-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }

.bld-main-tab:hover { color: var(--an-slate-800); }

.bld-main-tab-active {
    color: var(--an-primary);
    font-weight: 700;
    border-bottom-color: var(--an-primary);
}

.bld-main-tab-active .bld-main-tab-icon { opacity: 1; }

.bld-save-status { font-size: 12.5px; color: var(--an-slate-500); min-width: 60px; text-align: right; }
.bld-save-error { color: var(--an-error); }

.bld-conflict {
    background: #FFF8EB;
    border-bottom: 1px solid #F5D9A8;
    color: var(--an-warning);
    padding: 8px 16px;
    font-size: 14px;
}

/* ---------- buttons ----------
   One visual language (flat fill, tokened colors, 6px radius) shared with an-btn-*; this
   compact size tier stays smaller than an-btn's 10px×22px because the builder toolbar and
   property panel are too dense for the larger padding. */
.bld-btn, .bld-btn-primary, .bld-btn-danger, .bld-btn-small {
    border: 1px solid var(--an-slate-200);
    background: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    color: var(--an-slate-600);
    text-decoration: none;
    display: inline-block;
}

.bld-btn:hover:not(:disabled) { background: var(--an-slate-50); }
.bld-btn:disabled { opacity: .4; cursor: default; }

.bld-btn-primary {
    background: var(--an-primary);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 7px 18px;
}

.bld-btn-primary:hover { background: var(--an-primary-dark); }

.bld-btn-danger { color: var(--an-error); border-color: #F0B9B9; }
.bld-btn-danger:hover { background: var(--an-error); color: #fff; border-color: var(--an-error); }

.bld-btn-small { padding: 4px 10px; font-size: 13px; }

.bld-btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--an-slate-400);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
}

.bld-btn-icon:hover { color: var(--an-error); background: #FEF2F2; }

/* ---------- stage (replaces the 3-pane grid) ----------
   .bld-workspace is a non-scrolling positioning context: the drawers anchor to it (see
   .bld-drawer below) rather than to the viewport or to .bld-stage. Anchoring to .bld-stage
   itself doesn't work — it's the scroll container, and an absolutely-positioned child of a
   scroll container scrolls away with its content (verified in-browser: a top:0 child moved
   the full scroll delta when its scrolling ancestor was scrolled). .bld-stage is the single
   scroll container for the Build tab now — .bld-canvas-host used to scroll on its own inside
   the old middle column, but with the palette/property panels promoted to overlays there's
   only one scrollable region left, so the scroll lives here. */
.bld-workspace {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* The stage is a tinted wash, not grey. A neutral grey backdrop reads as "unstyled"; a backdrop
   carrying a trace of the brand hue reads as chosen. This is anota's teal pulled almost all the
   way to white — enough cast to be felt, not enough to compete with the form. */
.bld-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* A scroll container that scrolls on y also scrolls on x. Nothing on the canvas should ever
       need sideways scrolling (the rail docks inside the card when the gutter is too narrow),
       so clip rather than let a stray pixel turn into a horizontal scrollbar on phones. */
    overflow-x: hidden;
    background: #EBF1F1;
}

.bld-add-element {
    position: sticky;
    top: 16px;
    margin: 16px 0 0 16px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--an-slate-800);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / .18);
}

.bld-add-element:hover { background: var(--an-slate-900); }

.bld-add-element-icon { font-size: 15px; line-height: 1; }

.bld-canvas-host {
    position: relative; /* positioning context for .bld-rail, which is rendered as a sibling
                            of .af-form here rather than nested inside any one page's canvas */
    padding: 24px;
}

/* ---------- drawers ----------
   Anchored to .bld-workspace (position: absolute, not fixed) — .bld-workspace never scrolls,
   so no topbar-height constant is needed to line the drawer up under the topbar. */
.bld-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bld-drawer-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 0 24px rgb(0 0 0 / .12);
    transition: transform var(--bld-dur-drawer) var(--bld-ease-drawer);
    overflow-y: auto;
}

.bld-drawer-left  { left: 0;  border-right: 1px solid var(--an-slate-200); transform: translateX(-100%); }
.bld-drawer-right { right: 0; border-left:  1px solid var(--an-slate-200); transform: translateX(100%); }

.bld-drawer-open { transform: translateX(0); }

.bld-drawer-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--an-slate-200);
    font-size: 14px;
}

.bld-designer-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--an-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 12px rgb(0 0 0 / .22);
    transition: transform var(--bld-dur-fast) var(--bld-ease-out), right var(--bld-dur-drawer) var(--bld-ease-drawer);
}

.bld-designer-fab svg { width: 20px; height: 20px; flex: none; }

/* The pencil alone didn't say what the button opens. On hover/focus the circle grows into a
   pill with a visible "Design" label (the accessible name is on the button's aria-label). */
.bld-designer-fab {
    width: auto;
    min-width: 46px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 999px;
}

.bld-designer-fab-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    transition: max-width var(--bld-dur-drawer) var(--bld-ease-drawer), margin var(--bld-dur-drawer) var(--bld-ease-drawer);
}

.bld-designer-fab:hover .bld-designer-fab-text,
.bld-designer-fab:focus-visible .bld-designer-fab-text { max-width: 120px; margin-left: 8px; }

/* Slide clear of an open right drawer so the FAB never becomes unclickable
   (it sat underneath the drawer's higher z-index otherwise). */
.bld-designer-fab-shifted { right: calc(var(--bld-drawer-w) + 20px); }

/* ---------- Settings / Publish tabs ----------
   Grid, not centered flex: keeps a flush-left 260px nav rail so these tabs don't float in
   the middle of the screen (the Build tab's own palette rail is gone — Task 6 moved it into
   an overlay drawer — but this column width was chosen to match it). */
.bld-settings-tab, .bld-publish-tab {
    display: grid;
    grid-template-columns: 260px 1fr;
    flex: 1;
    min-height: 0;
}

/* LogicPanel takes over the tab as its own detail view (own "← Volver" back nav) — it's a
   direct child, not part of the nav-rail grid below, so it spans both columns and keeps the
   older centered/capped treatment instead of being squeezed into the 260px nav column. */
.bld-settings-tab > .bld-props {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: flex-start;
    width: min(480px, 100%);
    margin: 24px 16px;
    overflow-y: auto;
}

/* Removes the wrapper from box layout so its nav/content children become direct grid items
   of the 260px-left grid above — same DOM, no markup change needed in SettingsPanel.razor or
   Builder.razor's Publish block to line up with the Build tab's palette. */
.bld-settings-layout { display: contents; }

.bld-settings-nav {
    grid-column: 1;
    background: #fff;
    border-right: 1px solid var(--an-slate-200);
    overflow-y: auto;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bld-settings-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 2.5px solid transparent;
    border-radius: 0 8px 8px 0;
    padding: 9px 30px 9px 14px;
    cursor: pointer;
}

.bld-settings-nav-item:hover { background: var(--an-slate-50); }

.bld-settings-nav-item strong { font-size: 13.5px; font-weight: 600; color: var(--an-slate-700); }
.bld-settings-nav-item small { font-size: 11.5px; color: var(--an-slate-400); }

.bld-settings-nav-active {
    border-left-color: var(--an-primary);
    background: var(--an-primary-subtle);
}

.bld-settings-nav-active strong { color: var(--an-primary-dark); }

.bld-settings-nav-count {
    position: absolute;
    top: 9px;
    right: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--an-slate-100);
    color: var(--an-slate-500);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bld-settings-nav-active .bld-settings-nav-count { background: var(--an-primary); color: #fff; }

.bld-settings-content {
    grid-column: 2;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 28px;
}

.bld-settings-content > .bld-props { width: min(560px, 100%); }

.bld-publish-prompt {
    grid-column: 1 / -1;
    width: min(480px, 100%);
    text-align: center;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 40px 32px;
    justify-self: center;
    align-self: flex-start;
    margin-top: 40px;
}

.bld-publish-prompt h2 { margin: 0 0 8px; font-size: 18px; color: var(--an-slate-800); }
.bld-publish-prompt p { margin: 0 0 20px; color: var(--an-slate-500); font-size: 14px; }

/* ---------- palette ---------- */
.bld-palette { padding: 12px; }

.bld-palette-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--an-slate-600);
    margin-bottom: 12px;
}

.bld-palette-search:focus { border-color: var(--an-primary); outline: none; }
.bld-palette-search::placeholder { color: var(--an-slate-300); }

.bld-palette-group { margin-bottom: 14px; }

.bld-palette-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--an-slate-400);
    margin: 0 4px 6px;
}

.bld-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 13.5px;
    color: var(--an-slate-600);
    cursor: grab;
    background: #fff;
    user-select: none;
    /* pan-y, not none: a vertical swipe must still scroll the drawer on a phone (it would be
       stuck otherwise). A sideways drag — toward the canvas — still starts a field drag. */
    touch-action: pan-y;
}

.bld-palette-item:hover { border-color: var(--an-primary); box-shadow: var(--an-shadow-sm); }
.bld-palette-item:active { cursor: grabbing; }

.bld-palette-icon {
    width: 22px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    color: var(--an-primary);
}

.bld-palette-icon svg {
    width: 16px;
    height: 16px;
}

/* ---------- canvas ----------
   The form is the hero; the chrome is instrumentation and recedes. Three registers only:
   CONTENT (what the respondent will read) in ink at full weight; SUPPORT (sublabels, help)
   in slate-500; UTILITY (page numbers, language tabs, anything the author reads but the
   respondent never sees) in a small uppercase tracked face at slate-400. Nothing else
   competes. */
/* Crisp, not cuddly. A 14px radius with a big diffuse shadow reads as a friendly consumer app;
   a tight radius with a short, defined shadow reads as a working surface — a sheet on a desk,
   with a real edge. The shadow is deliberately short-throw (6px) and comparatively strong so the
   card has a definite boundary instead of fading into the stage. */
.bld-page {
    max-width: 760px;
    margin: 0 auto 28px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgb(27 58 95 / .10), 0 6px 14px rgb(27 58 95 / .10);
}

.bld-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: #FCFDFD;
    border-bottom: 1px solid var(--an-slate-200);
    border-radius: 4px 4px 0 0;
}

.bld-canvas {
    position: relative;
    padding: 18px 20px 20px;
    min-height: 120px;
}

/* Editor-only density: the public form keeps anota-forms.css's 20px. Each card adds its own
   6px padding, so labels still sit ~20px apart — readable, and a long form is noticeably
   shorter to drag through. Qualified with .af-grid on purpose: anota-forms.css loads AFTER this
   file, so a plain .bld-canvas row-gap loses to its `.af-grid { gap }` (the old 22px never
   actually applied). */
.bld-canvas.af-grid { row-gap: 8px; }

/* Hover affordance at a row boundary — a hairline seam (::before) with a "+" pill on top,
   both invisible until hover/focus. `position: relative` here (not just on the ancestor
   .bld-canvas) is required: it makes this button the containing block for its own ::before,
   so the seam's left/right: 12px inset is measured from the row's own edges. Without it, the
   pseudo-element would fall through to the next positioned ancestor up the tree — .bld-canvas —
   and inset from the *entire canvas* instead, landing well outside the row. */
.bld-row-insert {
    position: relative;
    grid-column: 1 / -1;
    height: 20px;
    margin: -10px 0;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--an-primary);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-row-insert::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .35;
}

.bld-row-insert span {
    position: relative;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--an-primary);
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

/* Mouse-only by design: hover has no touch equivalent, and dragging is the touch path for
   inserting a field at a specific spot. :focus-visible still reveals it for keyboard users
   tabbing through the canvas. */
.bld-canvas:hover .bld-row-insert:hover,
.bld-row-insert:focus-visible { opacity: 1; }

.bld-canvas-empty {
    grid-column: span 12;
    display: grid;
    place-items: center;
    gap: 10px;
    border: 2px dashed var(--an-slate-300);
    border-radius: 10px;
    padding: 40px;
    color: var(--an-slate-400);
    font-size: 14px;
    transition: border-color var(--bld-dur-fast) var(--bld-ease-out), background var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-canvas-empty svg { width: 26px; height: 26px; }

/* Toggled on <body> by builder-dnd.js for the duration of any drag (palette or reorder) —
   see its 'bld-dragging-active' add/remove — so the empty canvas reads as a real drop target
   the moment a drag starts, not only once the pointer is directly over it. */
body.bld-dragging-active .bld-canvas-empty {
    border-color: var(--an-primary);
    background: var(--an-primary-subtle);
    color: var(--an-primary);
}

/* Three states, three degrees of presence. At rest a field is pure content — no border, no
   chrome, nothing between the author and what they are making. Hover admits a hairline.
   Selection is the only state allowed colour, and it uses the brand-tinted shadow that already
   exists in the token set rather than inventing a new one.

   Spacing is tighter than the public form on purpose (editor only): a long form is shorter to
   scroll and drag through. The left padding is the grip's lane — reserved at all times, so the
   grip appearing on hover never shifts the content. The -8px side margins reach exactly half
   of the 16px column gap each, so neighbouring cards in a row touch but never overlap.

   No touch-action here: a swipe on a card must scroll the page on phones. Only the grip (and
   palette items) opt out of browser panning, because only they start a touch drag. */
.bld-field {
    position: relative;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 6px 8px 6px 28px;
    margin: -2px -8px;
    cursor: grab;
    transition: background var(--bld-dur-fast) var(--bld-ease-out),
                border-color var(--bld-dur-fast) var(--bld-ease-out),
                box-shadow var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-field:hover {
    border-color: var(--an-slate-200);
    background: var(--an-slate-50);
}

.bld-field.bld-selected {
    border-color: var(--an-primary);
    background: #fff;
    box-shadow: var(--an-shadow-glow);
}

.bld-field.bld-dragging { opacity: .35; }

/* Grip: a full-height lane on the card's LEFT edge, inside its own padding, so it can never
   overlap a neighbour in a multi-column row. Visible on hover and on the selected card; on
   touch screens (no hover) it is always visible and widened to a ≥32px target, since there it
   is the ONLY place a drag can start. */
.bld-field-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26px;
    display: grid;
    place-items: center;
    color: var(--an-slate-400);
    font-size: 16px;
    line-height: 1;
    border-radius: 9px 0 0 9px;
    opacity: 0;
    cursor: grab;
    touch-action: none; /* the pointer drag engine owns gestures that start here */
    user-select: none;
    transition: opacity var(--bld-dur-fast) var(--bld-ease-out),
                background var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-field-grip:hover { background: var(--an-slate-100); color: var(--an-slate-600); }

.bld-field:hover .bld-field-grip,
.bld-field.bld-selected .bld-field-grip { opacity: 1; }

@media (hover: none) and (pointer: coarse) {
    .bld-field { cursor: default; padding-left: 38px; }
    .bld-field-grip { width: 34px; opacity: 1; color: var(--an-slate-500); }
}

/* The drop indicator: a <body>-level line builder-dnd.js positions from measured geometry —
   horizontal between rows for a new-row drop, vertical beside a card for a side-by-side drop.
   Drawn client-side so it tracks the pointer with no server round-trip and never reflows the
   grid it is measuring. */
.bld-drop-line {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    pointer-events: none;
    border-radius: 3px;
    background: var(--an-primary);
    box-shadow: 0 0 0 3px rgb(22 163 133 / .18);
}

/* End caps make the line read as an insertion point, not a border. */
.bld-drop-line::before,
.bld-drop-line::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--an-primary);
}

.bld-drop-line::before { left: -4px; top: -3px; }
.bld-drop-line::after  { right: -4px; top: -3px; }
.bld-drop-line-v::before { left: -3px; top: -4px; }
.bld-drop-line-v::after  { left: -3px; top: auto; right: auto; bottom: -4px; }

/* Body-level ghost: a compact pill (grip + label) that follows the pointer from just below and
   to the right of it, so it never sits on top of the drop line the user is aiming with.
   Positioned via a raw `transform` set on every pointermove (see builder-dnd.js) — no CSS
   transition/animation drives its motion, so there is nothing here for
   prefers-reduced-motion to turn off. */
.bld-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: var(--an-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgb(0 0 0 / .25);
}

.bld-ghost-grip { opacity: .7; flex: none; }

.bld-ghost-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pointer is over no droppable page — the drop would commit nothing. */
.bld-ghost-invalid { opacity: .5; background: var(--an-slate-500); }

body.bld-dragging-active { cursor: grabbing; user-select: none; }

/* "+ Add field" under the last field of every page (and inside the empty state): opens the Add
   element drawer pinned to the end of THIS page. Full grid width so it sits on its own line. */
.bld-add-field {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
    padding: 6px 12px;
    border: 1px dashed var(--an-slate-300);
    border-radius: 8px;
    background: transparent;
    color: var(--an-slate-500);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bld-add-field:hover,
.bld-add-field:focus-visible { border-color: var(--an-primary); color: var(--an-primary); background: var(--an-primary-subtle); }

.bld-add-field-empty { justify-self: center; margin-top: 4px; border-style: solid; }

/* One rail for the whole canvas, parked in the gutter and moved by JS. Both axes come from
   positionRail's transform (measured against the selected field's page card) — a CSS `right:`
   constant would anchor to .bld-canvas-host, which spans the window, not the 760px card.
   When the gutter is too narrow (phones, small windows) positionRail adds .bld-rail-docked and
   parks it inside the selected card's top-right corner, laid out in a row. */
.bld-rail {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform var(--bld-dur-fast) var(--bld-ease-out);
    z-index: 15;
}

.bld-rail.bld-rail-docked {
    flex-direction: row;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    box-shadow: 0 1px 6px rgb(0 0 0 / .14);
}

.bld-rail-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--an-slate-200);
    border-radius: 50%;
    background: #fff;
    color: var(--an-slate-600);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / .1);
}

.bld-rail-btn:hover:not(:disabled) { background: var(--an-slate-50); }
.bld-rail-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }

.bld-rail-docked .bld-rail-btn { box-shadow: none; }

@media (pointer: coarse) {
    .bld-rail-btn { width: 34px; height: 34px; font-size: 14px; }
}

.bld-rail-danger:hover {
    background: var(--an-danger, #dc2626);
    border-color: var(--an-danger, #dc2626);
    color: #fff;
}

/* "Move to page…" popup, anchored to its rail button. Opens to the left of the gutter rail
   (the gutter is at the window's right side) and downward from a docked one. */
.bld-rail-menu-wrap { position: relative; }

.bld-rail-menu {
    position: absolute;
    top: 0;
    right: calc(100% + 8px);
    z-index: 16;
    min-width: 180px;
    max-width: 260px;
    padding: 6px;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--an-shadow-md, 0 6px 18px rgb(0 0 0 / .15));
}

.bld-rail-docked .bld-rail-menu { top: calc(100% + 8px); right: 0; }

.bld-rail-menu-title {
    padding: 4px 8px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--an-slate-400);
}

.bld-rail-menu-item {
    display: block;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--an-slate-700);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bld-rail-menu-item:hover,
.bld-rail-menu-item:focus-visible { background: var(--an-primary-subtle); color: var(--an-primary-dark); }

.bld-hidden-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--an-slate-100);
    color: var(--an-slate-500);
    border-radius: 4px;
    padding: 2px 7px;
}

/* ---------- the trilingual mark ----------
   anota authors every field in ES/EN/PT at once — no other builder does. This is the one place
   the canvas is allowed to be distinctive, so it carries the whole boldness budget and
   everything around it stays quiet.

   It replaces a "1/3" pill that was, by some distance, the loudest thing on the canvas: bright,
   filled, and shouting a number at the author about metadata. Three marks in fixed ES·EN·PT
   order say strictly more — *which* language is missing, not just how many — while reading as
   texture rather than text. Down a long form they form a column you can scan for gaps.

   Deliberately near-invisible at rest (.28 opacity). It is a progress indicator, not a control:
   it should reward a glance, never demand one. */
.bld-i18n {
    position: absolute;
    top: 12px;
    right: 10px;
    display: flex;
    gap: 3px;
    opacity: .28;
    transition: opacity var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-field:hover .bld-i18n,
.bld-field.bld-selected .bld-i18n,
.cc-field:hover .bld-i18n,
.cc-field.cc-field-selected .bld-i18n { opacity: 1; }

.bld-i18n-mark {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--an-slate-400);
}

.bld-i18n-mark.is-done {
    background: var(--an-primary);
    box-shadow: none;
}

.bld-hidden-badge ~ .bld-i18n { top: 30px; }

/* ---------- language tabs (field/page/settings translation editing) ---------- */
.bld-lang-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* A segmented control, not three loose buttons: one track, one moving fill. Borderless at rest
   so a language you are not editing costs the canvas nothing.

   It gets its own band, aligned to the form card and clear of the sticky "Add element" pill.
   Previously it sat top-left in the stage directly beneath that pill — crowded under a control
   it has nothing to do with, and a long way from the card whose page titles it actually edits. */
.bld-lang-tabs {
    max-width: 760px;
    margin: 0 auto 14px;
    padding: 4px;
    width: auto;
    background: rgb(255 255 255 / .7);
    border: 1px solid rgb(27 58 95 / .07);
    border-radius: 8px;
    justify-content: flex-start;
}

.bld-lang-tab {
    border: 0;
    background: transparent;
    color: var(--an-slate-500);
    border-radius: 6px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background var(--bld-dur-fast) var(--bld-ease-out),
                color var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-lang-tab:hover { color: var(--an-ink); background: rgb(255 255 255 / .9); }


.bld-lang-tab-active,
.bld-lang-tab-active:hover {
    background: #fff;
    color: var(--an-ink);
    box-shadow: var(--an-shadow-sm);
}

/* Takes the rest of the tab band and ellipsizes: with the Properties panel open the canvas is
   narrow and the label was cut off mid-word. The full text is in its title attribute. */
.bld-lang-primary {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 11px;
    color: var(--an-slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utility register: everything the author reads but the respondent never sees. Small, tracked,
   uppercase, low-contrast — legible when looked for, invisible when not. Keeping it visually
   distinct from content is what stops the canvas reading as a wall of same-sized text. */
.bld-page-label {
    color: var(--an-slate-400);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    flex: none;
    white-space: nowrap;
}

.bld-page-title-input {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12.5px;
    background: transparent;
    color: var(--an-slate-600);
}

.bld-page-title-input:hover { border-color: var(--an-slate-200); }
.bld-page-title-input:focus { border-color: var(--an-primary); outline: none; background: #fff; }
.bld-page-title-input::placeholder { color: var(--an-slate-300); }

.bld-add-page {
    display: block;
    margin: 0 auto 32px;
    border: 1px dashed var(--an-slate-400);
    background: transparent;
    color: var(--an-slate-500);
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 13.5px;
}

.bld-add-page:hover { border-color: var(--an-primary); color: var(--an-primary); }

/* ---------- property panel ---------- */
.bld-props { padding: 14px; font-size: 13.5px; }

.bld-props-empty { color: var(--an-slate-400); text-align: center; padding: 40px 10px; }

.bld-props-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* No text-transform: the type names are already written in sentence case in every language
   (FieldFactory.DefaultLabel), and `capitalize` turned "Phone number" into "Phone Number" and
   Spanish "Selección única" into "Selección Única", out of step with the palette. */
.bld-props-type {
    font-weight: 600;
    color: var(--an-ink);
}

/* Groups the field's properties (Content / Validation / Appearance) into distinct cards,
   echoing the bordered-card language of .bld-logic-card and the small-caps section labels
   of .bld-palette-title. */
.bld-prop-group {
    border: 1px solid var(--an-slate-200);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
}

.bld-prop-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--an-slate-400);
    margin: 0 0 10px;
}

.bld-prop-group .bld-prop:last-child,
.bld-prop-group .bld-prop-advanced:last-child { margin-bottom: 0; }

.bld-prop { display: block; margin-bottom: 12px; }

.bld-prop > span {
    display: block;
    font-size: 12px;
    color: var(--an-slate-500);
    margin-bottom: 4px;
}

.bld-prop input[type="text"], .bld-prop input:not([type]), .bld-prop input[type="number"],
.bld-prop select, .bld-prop textarea {
    width: 100%;
    border: 1px solid var(--an-slate-200);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 13.5px;
    background: #fff;
}

.bld-prop input:focus, .bld-prop select:focus, .bld-prop textarea:focus {
    border-color: var(--an-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 133, .14);
}

.bld-prop-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bld-prop-inline > span { margin: 0; font-size: 13.5px; color: var(--an-slate-600); }

/* ---------- notification recipient chip input (Publish > Notificaciones) ---------- */
.bld-chip-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--an-slate-200);
    border-radius: 7px;
    padding: 6px 8px;
    background: #fff;
}

.bld-chip-input:focus-within {
    border-color: var(--an-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 133, .14);
}

.bld-chip-input-error, .bld-chip-input-error:focus-within {
    border-color: var(--an-error);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}

.bld-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--an-primary-subtle);
    color: var(--an-primary-dark);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 6px 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.bld-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--an-primary-dark);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.bld-chip-remove:hover { opacity: 1; background: rgba(15, 138, 112, .16); }

.bld-chip-input-field {
    flex: 1 1 120px;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 13.5px;
    padding: 4px 2px;
    background: transparent;
}

.bld-chip-input-hint { font-size: 12px; color: var(--an-slate-400); margin: 5px 0 0; }
.bld-chip-input-hint-error { color: var(--an-error); }

.bld-notif-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.bld-notif-saved { font-size: 13px; color: var(--an-success); font-weight: 600; }

/* ---------- email settings list + card editor (Publish > Notificaciones) ---------- */
.bld-email-add-row { display: flex; gap: 8px; margin-bottom: 16px; }

.bld-email-list { display: flex; flex-direction: column; gap: 10px; }

.bld-email-card {
    border: 1px solid var(--an-slate-200);
    border-left-width: 4px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.bld-email-card-rail-notification { border-left-color: #D97706; }
.bld-email-card-rail-autoresponder { border-left-color: var(--an-primary); }

.bld-email-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
}

.bld-email-card-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.bld-email-card-type-notification { color: #D97706; }
.bld-email-card-type-autoresponder { color: var(--an-primary-dark); }

.bld-email-card-summary {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--an-slate-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bld-email-card-body {
    border-top: 1px solid var(--an-slate-200);
    padding: 16px;
}

.bld-email-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--an-slate-200);
}

.bld-email-tab {
    border: none;
    background: none;
    padding: 8px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--an-slate-400);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.bld-email-tab-active {
    color: var(--an-primary-dark);
    border-bottom-color: var(--an-primary);
}

.bld-email-body-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.bld-email-insert-field {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--an-slate-200);
    border-radius: 6px;
    background: #fff;
    color: var(--an-slate-600);
}

.bld-email-editor {
    border: 1px solid var(--an-slate-200);
    border-radius: 7px;
    background: #fff;
    min-height: 140px;
}

/* Quill's Snow theme ships its own toolbar/border chrome — flatten it into our rounded container
   instead of nesting two visually competing borders. */
.bld-email-editor .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--an-slate-200);
    border-radius: 7px 7px 0 0;
}
.bld-email-editor .ql-container.ql-snow {
    border: none;
    border-radius: 0 0 7px 7px;
    font-size: 13.5px;
}

.bld-email-preview {
    border: 1px solid var(--an-slate-200);
    border-radius: 7px;
    padding: 12px;
    background: var(--an-slate-50);
    max-height: 320px;
    overflow-y: auto;
}

.bld-option-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
/* Text inputs (option labels, product names) take the free width; number inputs (price, max
   quantity) stay narrow. Without this they shared the row equally and names were cut off. */
.bld-option-row > input:not([type]) { flex: 1 1 auto; min-width: 0; }
.bld-option-row > input[type="number"] { flex: 0 0 96px; min-width: 0; }
.bld-option-row-label { font-size: 12.5px; color: var(--an-slate-500); min-width: 44px; }

.bld-prop-advanced summary {
    cursor: pointer;
    color: var(--an-slate-500);
    font-size: 12.5px;
    margin: 10px 0;
}

.bld-loading { padding: 60px; text-align: center; color: var(--an-slate-500); }

/* design-mode field wrapper interaction guard */
.af-design { pointer-events: none; }

/* ---------- live theme preview (canvas) ---------- */
/* The wrapper carries the FormTheme custom props so af- fields preview the real theme.
   .af-form already paints var(--af-bg); the page cards pick up var(--af-page). */
/* Top padding clears the sticky "Add element" pill so the language band starts below it in its
   own space rather than tucking underneath. */
.bld-canvas-theme {
    background: transparent;
    min-height: 100%;
    padding: 20px 8px 8px;
    border-radius: 12px;
}

.bld-canvas-theme .bld-page { background: var(--af-page); }

/* ---------- theme panel ---------- */
.bld-theme-hint {
    font-size: 12px;
    color: var(--an-slate-400);
    margin: 0 0 16px;
    line-height: 1.5;
}

.bld-logo-preview {
    margin: -4px 0 16px;
    padding: 12px;
    border: 1px solid var(--an-slate-200);
    border-radius: 9px;
    background: var(--an-slate-50);
    text-align: center;
}

.bld-logo-preview-img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

.bld-logo-preview-name {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--an-slate-600);
}

.bld-logo-preview-caption {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--an-slate-400);
    line-height: 1.5;
}

.bld-logo-preview-empty { margin: 0; }

.bld-color-row { display: flex; gap: 8px; align-items: center; }

.bld-color-swatch {
    width: 40px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--an-slate-200);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    flex: none;
}

.bld-color-hex { flex: 1; }

/* ---------- logic panel ---------- */
.bld-logic-open {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--an-slate-200);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.bld-logic-open:hover { border-color: var(--an-primary); }

.bld-logic-open-text { display: flex; flex-direction: column; gap: 2px; }

.bld-logic-open-text strong { font-size: 13.5px; color: var(--an-ink); }

.bld-logic-open-text small { font-size: 11.5px; color: var(--an-slate-500); }

.bld-logic-open-count {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--an-slate-100);
    color: var(--an-slate-600);
    font-size: 12px;
    font-weight: 600;
}

.bld-logic-back {
    background: none;
    border: none;
    color: var(--an-primary);
    font-size: 13px;
    cursor: pointer;
    padding: 0 0 12px;
}

/* Rules read as typeset sentences: a thin "reasoning rail" runs down each rule with SI/ENTONCES
   node markers on it, field names render as slate chips, respondent values as teal-washed chips,
   and connective words stay quiet text. The rail is structural, not decorative — rules evaluate
   top to bottom (SI flows into ENTONCES; later rules override earlier ones), and the card
   ordinal exists for the same reason. */

.bld-logic-card {
    position: relative;
    border: 1px solid var(--an-slate-200);
    border-radius: 10px;
    padding: 12px 12px 8px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: var(--an-shadow-sm);
    transition: box-shadow .15s ease;
}

.bld-logic-card:hover { box-shadow: var(--an-shadow-md); }

.bld-logic-ordinal {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--an-slate-400);
    cursor: default;
}

/* ---- the reasoning rail ---- */
.bld-logic-flow, .bld-logic-ghost { position: relative; }

.bld-logic-flow::before, .bld-logic-ghost::before {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(to bottom, var(--an-slate-300), var(--an-primary));
}

.bld-logic-node { position: relative; padding-left: 16px; }

.bld-logic-node + .bld-logic-node { margin-top: 8px; }

.bld-logic-node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--an-ink);
}

.bld-logic-node-then::before { background: var(--an-primary); }

.bld-logic-marker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--an-ink);
    margin-bottom: 3px;
}

.bld-logic-marker-then { color: var(--an-primary-dark); }

/* ---- clause typography ---- */
.bld-logic-clause {
    display: block;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--an-slate-600);
}

.bld-chip {
    display: inline;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--an-slate-100);
    color: var(--an-ink);
    font-weight: 600;
    font-size: 12px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Value chips hold free text (a thank-you message, a redirect URL, an email address), so unlike
   field/page chips they wrap inside the rule card: with the base chip's nowrap a long thank-you
   message ran past the card's right edge. */
.bld-chip-value {
    background: var(--an-primary-subtle);
    color: var(--an-primary-dark);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    border-radius: 10px;
}

.bld-logic-connective { color: var(--an-slate-500); }

.bld-logic-connective-join {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---- card footer ---- */
.bld-logic-card-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--an-slate-100);
}

.bld-logic-card-actions-spacer { flex: 1; }

.bld-logic-edit {
    background: none;
    border: none;
    color: var(--an-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

.bld-logic-edit:hover { background: var(--an-primary-subtle); }

/* ---- empty state: a ghost rule teaches the sentence shape ---- */
.bld-logic-empty { padding: 6px 2px 2px; }

.bld-logic-ghost {
    opacity: .55;
    filter: saturate(.4);
    margin-bottom: 12px;
    pointer-events: none;
}

.bld-logic-empty-text {
    font-size: 12.5px;
    color: var(--an-slate-500);
    line-height: 1.55;
    margin: 0 0 12px;
}

/* ---- editor: the rail expands, sections hang off it ---- */
.bld-logic-editor-flow {
    position: relative;
    padding-left: 16px;
}

.bld-logic-editor-flow::before {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(to bottom, var(--an-slate-300), var(--an-primary));
    transform-origin: top;
    animation: bld-rail-draw .24s ease-out;
}

@keyframes bld-rail-draw {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.bld-logic-section { position: relative; animation: bld-node-in .18s ease-out both; }

.bld-logic-section-then { animation-delay: .08s; }

@keyframes bld-node-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.bld-logic-section::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--an-ink);
}

.bld-logic-section-then::before { background: var(--an-primary); }

.bld-logic-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 24px;
}

.bld-logic-section-head .bld-logic-marker { margin-bottom: 0; }

.bld-logic-match {
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--an-slate-50);
    color: var(--an-slate-600);
    font-size: 11.5px;
    padding: 3px 4px;
    max-width: 100%;
    cursor: pointer;
}

.bld-logic-match:hover { border-color: var(--an-slate-200); background: #fff; }

/* ---- clause groups (one condition / one action) ---- */
.bld-logic-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--an-slate-200);
    border-left: 2px solid var(--an-slate-300);
    border-radius: 8px;
    padding: 8px 26px 8px 8px;
    margin-bottom: 6px;
    background: #fff;
}

.bld-logic-section-then .bld-logic-group { border-left-color: var(--an-primary); }

.bld-logic-duo {
    display: flex;
    gap: 5px;
}

.bld-logic-duo > * { flex: 1; min-width: 0; }

.bld-logic-select {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 12.5px;
    background: var(--an-slate-50);
    color: var(--an-ink);
    min-width: 0;
    box-sizing: border-box;
}

select.bld-logic-select { cursor: pointer; }

.bld-logic-select:hover { border-color: var(--an-slate-200); background: #fff; }

.bld-logic-select:focus-visible, .bld-logic-match:focus-visible {
    border-color: var(--an-primary);
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 133, .14);
}

.bld-logic-formula { font-family: Consolas, "Courier New", monospace; font-size: 12px; }

.bld-logic-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--an-slate-300);
    font-size: 11px;
    cursor: pointer;
}

.bld-logic-remove:hover { color: var(--an-error); background: #FEF2F2; }

.bld-logic-remove:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 1px; }

.bld-logic-add {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--an-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 14px;
}

.bld-logic-add:hover { color: var(--an-primary-dark); text-decoration: underline; }

.bld-logic-add:focus-visible, .bld-logic-edit:focus-visible, .bld-logic-delete:focus-visible {
    outline: 2px solid var(--an-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- editor footer ---- */
.bld-logic-editor-footer {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--an-slate-100);
    display: flex;
    justify-content: flex-end;
}

.bld-logic-delete {
    background: none;
    border: none;
    color: var(--an-error);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 2px;
}

.bld-logic-delete:hover { text-decoration: underline; }

/* ---- list-level add button ---- */
.bld-logic-add-row {
    width: 100%;
    padding: 8px;
    margin: 4px 0 14px;
    border: 1px dashed var(--an-slate-300);
    border-radius: 8px;
    background: none;
    color: var(--an-slate-500);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.bld-logic-add-row:hover { border-color: var(--an-primary); color: var(--an-primary); background: var(--an-primary-subtle); }

.bld-logic-add-row:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 2px; }

.bld-logic-formula-warning { font-size: 11.5px; color: var(--an-error); margin: 0; }

/* ---- calculate action: field-token insert + operator buttons + live preview ---- */
.bld-logic-formula-ops { display: flex; flex-wrap: wrap; gap: 4px; }

.bld-logic-formula-op {
    flex: none;
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border: 1px dashed var(--an-slate-300);
    border-radius: 6px;
    background: none;
    color: var(--an-primary);
    font-size: 13px;
    font-weight: 700;
    font-family: Consolas, "Courier New", monospace;
    cursor: pointer;
}

.bld-logic-formula-op:hover { border-color: var(--an-primary); background: var(--an-primary-subtle); }

.bld-logic-formula-op:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 1px; }

.bld-logic-formula-preview {
    font-size: 11.5px;
    color: var(--an-slate-600);
    background: var(--an-slate-50);
    border: 1px solid var(--an-slate-200);
    border-radius: 6px;
    padding: 4px 7px;
    margin: 0;
}

/* ---- rule search ---- */
.bld-logic-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--an-ink);
    background: #fff;
}

.bld-logic-search::placeholder { color: var(--an-slate-400); }

.bld-logic-search:focus {
    border-color: var(--an-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 133, .14);
}

/* ---- rule filters (action type / field) ---- */
.bld-logic-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.bld-logic-filter {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--an-ink);
    background: #fff;
    cursor: pointer;
}

.bld-logic-filter:hover { border-color: var(--an-slate-300); }

.bld-logic-filter:focus-visible {
    border-color: var(--an-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 133, .14);
}

/* ---- disabled rule cards ---- */
.bld-logic-card-off { opacity: .55; }

.bld-logic-off-pill {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: var(--an-slate-100);
    color: var(--an-slate-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- action-row target controls: single-target select + quick-add, and the two-select copy row ---- */
.bld-logic-target-row { display: flex; align-items: center; gap: 5px; }

.bld-logic-target-row > .bld-logic-select { flex: 1; min-width: 0; }

.bld-logic-copy-row { display: flex; align-items: center; gap: 6px; }

.bld-logic-copy-row > .bld-logic-select { flex: 1; min-width: 0; }

.bld-logic-quickadd {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--an-slate-300);
    border-radius: 6px;
    background: none;
    color: var(--an-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.bld-logic-quickadd:hover { border-color: var(--an-primary); background: var(--an-primary-subtle); }

.bld-logic-quickadd:focus-visible { outline: 2px solid var(--an-primary); outline-offset: 1px; }

/* ---------- narrow screens ----------
   The builder had no breakpoints at all: on a phone the title (min-width 280px) slid under the
   Build/Settings/Publish tabs, the rail parked past the card pushed the page sideways, and
   side-by-side rows squeezed two fields into ~150px each. */

/* Medium widths: the equal 1fr side columns can no longer hold the action buttons, so give the
   title the flexible column and let the tabs and actions take only what they need. */
@media (max-width: 1100px) {
    .bld-topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
    .bld-main-tab { padding: 0 10px; }
}

@media (max-width: 760px) {
    /* Three lines: title, then the actions (wrapping if needed), then the tabs full width. */
    .bld-topbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "left" "actions" "tabs";
        row-gap: 6px;
        padding: 9px 10px 0;
    }

    .bld-topbar-left { grid-area: left; gap: 4px; }
    .bld-topbar-actions { grid-area: actions; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    .bld-topbar .bld-btn { padding: 4px 9px; font-size: 13px; }
    .bld-topbar .bld-btn-primary { padding: 5px 14px; font-size: 13px; margin-left: auto; }
    .bld-save-status { min-width: 0; font-size: 11.5px; }
    .bld-title { max-width: none; font-size: 15px; }

    .bld-main-tabs { grid-area: tabs; justify-content: stretch; min-height: 40px; gap: 0; }
    .bld-main-tab { flex: 1; justify-content: center; padding: 0 6px; font-size: 12.5px; gap: 5px; }
}

@media (max-width: 640px) {
    /* Drawers must leave a sliver of canvas visible (and never exceed the screen). */
    .bld-root { --bld-drawer-w: min(320px, calc(100vw - 36px)); }

    .bld-canvas-host { padding: 12px 8px; }
    .bld-canvas-theme { padding: 12px 0 8px; }
    .bld-page-header { padding: 10px 12px; }
    .bld-canvas { padding: 14px 12px 16px; }
    .bld-lang-tabs { margin-bottom: 10px; }
    .bld-lang-primary { margin-left: 0; flex-basis: 100%; padding: 2px 6px 0; }

    /* Side-by-side rows display stacked, like the public form does at this width. Display
       only: the saved widths are untouched, and the drag engine turns off side-by-side drops
       here (it can't show them). Beats .af-w-N by specificity; the public rule targets
       .af-grid > .af-field, which builder cards are not. */
    .bld-canvas > .bld-field { grid-column: 1 / -1; }

    /* Settings / Publish: the 260px nav column stacks above the content. */
    .bld-settings-tab, .bld-publish-tab { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
    .bld-settings-nav { grid-column: 1; border-right: 0; border-bottom: 1px solid var(--an-slate-200); overflow: visible; }
    .bld-settings-content { grid-column: 1; padding: 16px 12px; overflow: visible; }

    .bld-add-element { margin: 10px 0 0 10px; }
    .bld-designer-fab { right: 14px; bottom: 14px; }
}

/* ---------- reduced motion ----------
   The single authoritative guard for every transition/animation in this file — previously
   scattered across five separate blocks (one per section as each was added), which is exactly
   how a future rule quietly ships unguarded. Anything that gets a transition or animation added
   above must get a matching entry here instead of a new block. */
@media (prefers-reduced-motion: reduce) {
    .bld-drawer,
    .bld-designer-fab,
    .bld-field,
    .bld-field-grip,
    .bld-rail,
    .bld-row-insert,
    .bld-canvas-empty,
    .bld-logic-card,
    .bld-designer-fab-text {
        transition: none !important;
    }

    .bld-logic-editor-flow::before,
    .bld-logic-section {
        animation: none !important;
    }
}

/* ---------- designer: palettes ----------
   Jotform's designer is a gallery — you choose a look by seeing it. anota's was a stack of hex
   inputs, which asks the author to know that three values agree before they can find out. Each
   tile below renders the palette as the thing it actually produces: a card floating on the page
   background, with the accent as its button. */
.bld-schemes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.bld-scheme {
    aspect-ratio: 1;
    padding: 0;
    border: 1.5px solid var(--an-slate-200);
    border-radius: 6px;
    background: var(--s-bg);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color var(--bld-dur-fast) var(--bld-ease-out),
                transform var(--bld-dur-fast) var(--bld-ease-out);
}

.bld-scheme:hover { transform: translateY(-1px); border-color: var(--an-slate-400); }

.bld-scheme.is-active {
    border-color: var(--an-ink);
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--an-ink);
}

.bld-scheme-card {
    width: 62%;
    height: 58%;
    border-radius: 2px;
    background: var(--s-card);
    box-shadow: 0 1px 2px rgb(11 25 41 / .18);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
}

.bld-scheme-accent {
    width: 60%;
    height: 5px;
    border-radius: 1px;
    background: var(--s-accent);
}

/* Settings > Form settings: base language picker and its explanation. */
.bld-base-lang select { flex: 1 1 auto; min-width: 0; }
.bld-base-lang-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--an-slate-500); }