/* ============================================================================
   MUVA OS - Forms Library + Builder (E-Forms UX redesign)
   Full-width Forms Library (card gallery + optional shared-grid List view) and a
   dedicated Form Builder (top bar · Build / Logic / Connections / Responses ·
   outline rail + live canvas + properties panel). Uses MUVA tokens only - no new
   colour system, no heavy cards, restrained borders/shadows, pill controls.
   Desktop ≥ 761px is the three-region builder; mobile collapses to sheets.
   ============================================================================ */
@media (min-width:761px){
  /* the Forms screen owns the content height so the library grid / builder scroll internally */
  #screen-forms.active{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
  #screen-forms.active > .dash{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;padding:0}
}
.forms-library,.forms-builder{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.forms-builder[hidden],.forms-library[hidden]{display:none}
/* E20 shared Template Library shell: panel-level padding is GONE - the header rows
   carry their own 10px inset and the grid runs to the panel's inside edges. */
.forms-library{padding:4px 0 0}
/* form-type icon utility column (separate cell - never covers the selection checkbox) */
.fl-ci{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;background:var(--surface-2);color:var(--ink-2)}
.fl-ci svg{width:14px;height:14px}
/* Card and List views are MUTUALLY EXCLUSIVE. The `hidden` attribute MUST hide either view even
   though .fl-grid sets display:grid (class beats the [hidden] UA rule without this override). */
.forms-library [hidden],.forms-builder [hidden]{display:none!important}

/* ---------------- Forms Library ---------------- */
.fl-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:2px 0 14px}
.fl-title{font-size:20px;font-weight:800;letter-spacing:-.5px;margin:0}
.fl-count{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:3px 9px;border-radius:99px}
.fl-search{display:flex;align-items:center;gap:8px;height:36px;width:230px;max-width:100%;padding:0 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill);color:var(--ink-3);transition:.15s var(--ease)}
.fl-search:focus-within{border-color:var(--line-2);background:#fff;box-shadow:var(--sh-sm)}
.fl-search svg{width:15px;height:15px;flex:0 0 auto}
.fl-search input{border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--ink);width:100%}
.fl-search input::placeholder{color:var(--ink-3)}
.fl-sel{height:36px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface-2);padding:0 30px 0 14px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A91' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.fl-sel:focus{outline:none;border-color:var(--ink-3);background-color:#fff;box-shadow:0 0 0 3px rgba(20,20,22,.06)}
.fl-grow{flex:1 1 auto}
/* CARD / LIST VIEW TOGGLE. It used to say "mirrors .seg" in a comment and
   then re-draw the whole control by hand - a second segmented control, 30px
   inside a 34px track, with its own type, its own weight and its own white
   thumb. It IS a `.seg` now (the class is on the element), so it gets the
   shared track and thumb and this file only has to translate its state class:
   the module writes `.on`, the primitive reads `.active`. */
.fl-vtoggle button{cursor:pointer;font-family:inherit}
.fl-vtoggle button.on{background:var(--seg-thumb);border-color:transparent;
  color:var(--acc,var(--ink));box-shadow:var(--seg-thumb-lift)}
.fl-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.fl-body > #flCards{flex:0 0 auto;padding-bottom:22px}
.fl-body > #formListGridWrap{flex:1 1 auto}

/* card gallery */
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}
.fcard{display:flex;flex-direction:column;gap:0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 15px 12px;cursor:pointer;font-family:inherit;transition:border-color .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease)}
.fcard:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.fcard:focus-visible{outline:none;border-color:var(--ink-3);box-shadow:var(--sh-sm)}
.fcard-top{display:flex;align-items:flex-start;gap:10px}
.fcard-ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.fcard-ic svg{width:17px;height:17px}
.fcard-h{flex:1 1 auto;min-width:0}
.fcard-name{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard-desc{font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard-menu{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:none;background:none;border-radius:8px;color:var(--ink-3);cursor:pointer;transition:.12s var(--ease)}
.fcard-menu svg{width:16px;height:16px}
.fcard-menu:hover{background:var(--surface-2);color:var(--ink)}
.fcard-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:13px}
.fcard-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.fcard-foot .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.fcard-foot .fcard-conn{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard-foot svg{width:13px;height:13px;flex:0 0 auto}
.fcard-foot .fcard-edited{margin-left:auto;flex:0 0 auto;white-space:nowrap}

/* pills */
.fpill{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap;border:1px solid transparent}
.fpill-cat{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.fpill-fields{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
/* var(--green) on var(--green-soft) measures 3.23:1 and fails AA at this 10.5px size,
   so the positive pills carry the platform's readable submitted foreground (4.80:1),
   the same pair as .fr-status.s-submitted. Dots stay on the token. */
.fpill-site{background:var(--green-soft,#e8f5ee);color:#0f7a41;border-color:transparent}
/* the canonical model makes a version a real, visible thing */
.fpill-ver{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);font-variant-numeric:tabular-nums}
.fl-vsub{font-weight:600;color:var(--ink-3)}
.fst{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.fst .sd{width:6px;height:6px;border-radius:50%}
.fst-draft{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.fst-draft .sd{background:#c9821b}
.fst-published{background:var(--green-soft,#e8f5ee);color:#0f7a41}
.fst-published .sd{background:var(--green,#0f7a3f)}
.fst-archived{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.fst-archived .sd{background:var(--ink-3)}

/* empty states */
.fl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:60px 20px;color:var(--ink-3)}
.fl-empty svg{width:34px;height:34px;color:var(--line-2)}
.fl-empty .t{font-size:14px;font-weight:800;color:var(--ink-2)}
.fl-empty .s{font-size:12.5px;max-width:340px;line-height:1.5}
.fl-empty .btn{margin-top:6px}

/* List view: shared MuvaTable wrapper (flush full-width workspace, bottom scrollbar) */
/* List grid breaks out to the Library's padded edges → full width, flush with the toolbar edges. */
#formListGridWrap{flex:1 1 auto;min-height:0;border:none;border-top:1px solid var(--line);border-radius:0;overflow:auto;margin:0 -22px}
#formListGridWrap .myd-grid{width:max-content}
.fl-cellname{display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%}
.fl-cellname .ci{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:7px;background:var(--surface-2);color:var(--ink-2)}
.fl-cellname .ci svg{width:14px;height:14px}
.fl-cellname .nm{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* card/list overflow menu (reuse .myd-pop base via .fmenu) */
.fmenu{position:fixed;z-index:9997;min-width:176px;background:var(--surface);border:1px solid var(--menu-border,var(--line));border-radius:var(--pop-r,12px);box-shadow:var(--sh-pop);padding:var(--menu-pad,6px);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .14s var(--ease),transform .14s var(--ease)}
.fmenu.show{opacity:1;transform:none;pointer-events:auto}
.fmenu button{display:flex;align-items:center;gap:9px;width:100%;height:var(--menu-row-h,33px);padding:0 10px;border:none;background:none;border-radius:var(--menu-row-r,7px);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;transition:.12s var(--ease)}
.fmenu button svg{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}
.fmenu button:hover{background:var(--menu-hover,var(--surface-2));color:var(--ink)}
.fmenu button:hover svg{color:var(--ink)}
.fmenu button.danger{color:#B3261E}.fmenu button.danger svg{color:#B3261E}
.fmenu button.danger:hover{background:#FBEAEA}
.fmenu .sep{height:1px;background:var(--line);margin:5px 6px}

/* ---------------- Form Builder ---------------- */
.fb2-top{display:flex;align-items:center;gap:10px;padding:2px 0 12px;flex-wrap:wrap}
.fb2-back{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border:1px solid var(--line);background:#fff;border-radius:var(--pill);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.13s var(--ease)}
.fb2-back svg{width:15px;height:15px}
.fb2-back:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.fb2-namewrap{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto}
.fb2-name{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--ink);border:1px solid transparent;background:none;border-radius:8px;padding:3px 8px;font-family:inherit;max-width:340px;min-width:80px}
.fb2-name:hover{background:var(--surface-2)}
.fb2-name:focus{outline:none;background:#fff;border-color:var(--line-2);box-shadow:var(--sh-sm)}
.fb2-type{height:26px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.2px;padding:0 24px 0 9px;font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:11px}
.fb2-type:hover{border-color:var(--line-2)}
/* published version: the builder shows it and says plainly why it will not change */
.fb2-locked{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);
  border-left:3px solid var(--ink-3);border-radius:10px;background:var(--surface-2);color:var(--ink-2);
  font-size:12.5px;line-height:1.45}
.fb2-locked svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3)}
#formsBuilder[data-flocked="1"] .fb2-name{background:none;border-color:transparent;color:var(--ink-2);cursor:default}
#formsBuilder[data-flocked="1"] .fq-card,#formsBuilder[data-flocked="1"] .fb2-orow{cursor:default}
#formsBuilder[data-flocked="1"] .fq-insert,#formsBuilder[data-flocked="1"] .fb2-addfield{display:none}
.fb2-save{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.fb2-save svg{width:13px;height:13px}
.fb2-save.saving{color:var(--ink-3)}
.fb2-save.saved{color:#0f7a41}
.fb2-save.unsaved{color:#c9821b}
.fb2-top-grow{flex:1 1 auto}
.fb2-actions{display:flex;align-items:center;gap:8px}
.fb2-iconbtn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;border-radius:var(--pill);color:var(--ink-2);cursor:pointer;transition:.13s var(--ease)}
.fb2-iconbtn svg{width:16px;height:16px}
.fb2-iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}

/* builder tabs */
.fb2-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line);margin-bottom:0}
.fb2-tab{position:relative;height:38px;padding:0 13px;border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer;transition:color .13s var(--ease)}
.fb2-tab:hover{color:var(--ink-2)}
.fb2-tab.on{color:var(--ink)}
.fb2-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
.fb2-tab .soon-tag{margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:1px 6px}

/* build layout: outline rail · canvas · properties */
.fb2-build{display:flex;min-height:0;flex:1 1 auto;gap:0}
.fb2-rail{flex:0 0 236px;border-right:1px solid var(--line);overflow:auto;padding:14px 12px 20px;display:flex;flex-direction:column;gap:2px;transition:flex-basis .18s var(--ease)}
.fb2-rail.collapsed{flex-basis:0;padding:0;border-right:none;overflow:hidden}
.fb2-rail-h{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);padding:2px 6px 7px}
.fb2-rail-h .c{margin-left:auto;font-weight:700;color:var(--ink-3)}
.fb2-orow{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 9px;border:none;background:none;border-radius:var(--pill);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
.fb2-orow .oi{width:16px;height:16px;flex:0 0 auto;color:var(--ink-3)}
.fb2-orow .oi svg{width:16px;height:16px}
.fb2-orow .on-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb2-orow .oreq{color:#B3261E;font-weight:800;flex:0 0 auto}
.fb2-orow:hover{background:var(--surface-2);color:var(--ink)}
.fb2-orow.sel{background:var(--slate-soft,#eef1f6);color:var(--ink)}
.fb2-orow.sel .oi{color:var(--ink)}
.fb2-orow.dragging{opacity:.5}
.fb2-orow.drop-before{box-shadow:inset 0 2px 0 var(--ink)}
.fb2-railadd{display:flex;gap:7px;margin-top:9px;padding:0 4px}
.fb2-railadd .btn{flex:1 1 auto;justify-content:center;height:32px;font-size:11.5px}
.fb2-railtoggle{display:none}

/* canvas */
/* grey workspace with a clearly-bounded white form canvas centred in it */
.fb2-canvas-wrap{flex:1 1 auto;min-height:0;overflow:auto;padding:26px 24px 70px;display:flex;justify-content:center;background:var(--surface-2)}
.fb2-canvas{width:100%;max-width:780px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:24px 26px 28px;height:max-content}
.fb2-formhead{padding:0 2px 6px}
.fb2-formhead .fh-name{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.fb2-formhead .fh-meta{display:flex;align-items:center;gap:8px;margin-top:7px}
.fb2-ctxnote{font-size:12px;color:var(--ink-3);line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:12px 0 4px;display:flex;gap:9px}
.fb2-ctxnote svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3);margin-top:1px}
/* field question card */
.fq{position:relative;border:1px solid transparent;border-radius:12px;padding:12px 13px;margin-top:6px;cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease)}
.fq:hover{background:var(--surface-2)}
.fq.sel{background:#fff;border-color:var(--line-2);box-shadow:var(--sh-sm)}
.fq-head{display:flex;align-items:center;gap:9px}
.fq-grip{width:16px;flex:0 0 auto;color:var(--line-2);cursor:grab;display:grid;place-items:center;opacity:0;transition:opacity .12s var(--ease)}
.fq:hover .fq-grip,.fq.sel .fq-grip{opacity:1}
.fq-grip svg{width:15px;height:15px}
.fq-num{font-size:11px;font-weight:800;color:var(--ink-3);min-width:16px}
.fq-label{flex:1 1 auto;font-size:13.5px;font-weight:700;color:var(--ink);border:1px solid transparent;background:none;border-radius:7px;padding:3px 7px;font-family:inherit;min-width:0}
.fq-label:hover{background:var(--surface-2)}
.fq.sel .fq-label:hover{background:var(--surface-2)}
.fq-label:focus{outline:none;background:#fff;border-color:var(--line-2)}
.fq-req{color:#B3261E;font-weight:800;font-size:14px;line-height:1;flex:0 0 auto}
.fq-meta{display:flex;align-items:center;gap:8px;margin:8px 0 0 41px}
.fq-type{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
.fq-type svg{width:14px;height:14px}
.fq-help{font-size:11.5px;color:var(--ink-3)}
.fq-reqchip{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#B3261E}
/* field preview affordance (read-only mimic of the input) */
.fq-afford{margin:9px 0 0 41px}
.fq-afford .aff{height:32px;border:1px dashed var(--line-2);border-radius:8px;background:var(--surface-2);display:flex;align-items:center;gap:6px;padding:0 11px;font-size:12px;color:var(--ink-3);max-width:320px}
/* every affordance/preview icon is a compact inline glyph - never let an unsized SVG fill the cell */
.fq-afford svg,.fq-afford .fdi{width:16px;height:16px;flex:0 0 auto;vertical-align:middle}
.fq-afford .aff-yn{display:inline-flex;gap:6px}
.fq-afford .aff-chip{height:26px;border:1px solid var(--line);border-radius:99px;background:#fff;display:inline-flex;align-items:center;padding:0 12px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
/* per-field hover actions */
.fq-acts{position:absolute;top:9px;right:10px;display:flex;gap:3px;opacity:0;transition:opacity .12s var(--ease)}
.fq:hover .fq-acts,.fq.sel .fq-acts{opacity:1}
.fq-acts button{width:26px;height:26px;display:grid;place-items:center;border:none;background:none;border-radius:7px;color:var(--ink-3);cursor:pointer;transition:.12s var(--ease)}
.fq-acts button svg{width:15px;height:15px}
.fq-acts button:hover{background:var(--surface-2);color:var(--ink)}
.fq-acts button.del:hover{background:#FBEAEA;color:#B3261E}
/* insert-between control */
.fq-insert{height:14px;position:relative;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s var(--ease)}
.fq-insert:hover{opacity:1}
.fq-insert::before{content:"";position:absolute;left:12px;right:12px;height:1px;background:var(--line-2)}
.fq-insert button{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;z-index:1}
.fq-insert button svg{width:13px;height:13px}
.fq-insert button:hover{border-color:var(--ink);color:var(--ink)}
.fb2-addfield{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0 2px;height:36px;padding:0 15px;border:1px dashed var(--line-2);background:none;border-radius:var(--pill);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.13s var(--ease)}
.fb2-addfield svg{width:16px;height:16px}
.fb2-addfield:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}

/* properties panel */
.fb2-props{flex:0 0 300px;border-left:1px solid var(--line);overflow:auto;padding:0;transition:flex-basis .18s var(--ease)}
.fb2-props.closed{flex-basis:0;border-left:none;overflow:hidden}
.fb2-props-head{display:flex;align-items:center;gap:8px;padding:14px 15px 11px;border-bottom:1px solid var(--line)}
.fb2-props-head .t{font-size:12.5px;font-weight:800;color:var(--ink);flex:1 1 auto}
.fb2-props-x{width:26px;height:26px;display:grid;place-items:center;border:none;background:none;border-radius:7px;color:var(--ink-3);cursor:pointer}
.fb2-props-x svg{width:15px;height:15px}
.fb2-props-x:hover{background:var(--surface-2);color:var(--ink)}
.fb2-props-body{padding:14px 15px 24px;display:flex;flex-direction:column;gap:13px}
.fp-field{display:flex;flex-direction:column;gap:6px}
.fp-field > label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.35px;color:var(--ink-3)}
.fp-input,.fp-sel,.fp-area{width:100%;border:1px solid var(--line);border-radius:9px;background-color:var(--surface-2);padding:0 12px;height:36px;font-family:inherit;font-size:12.5px;color:var(--ink);transition:.13s var(--ease)}
.fp-area{height:auto;padding:9px 12px;resize:vertical;min-height:62px;line-height:1.5}
.fp-sel{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:30px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.fp-input:focus,.fp-sel:focus,.fp-area:focus{outline:none;border-color:var(--line-2);background-color:var(--surface);box-shadow:var(--sh-sm)}
.fp-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fp-toggle .l{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.fp-sw{width:38px;height:22px;border-radius:99px;border:none;background:var(--line-2);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s var(--ease)}
.fp-sw span{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s var(--ease)}
.fp-sw.on{background:var(--green,#0f7a3f)}
.fp-sw.on span{transform:translateX(16px)}
.fp-soon{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--ink-3);line-height:1.5;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px}
.fp-soon .soon-tag{font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 6px;flex:0 0 auto}
.fp-empty{padding:30px 18px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.5}
.fp-empty svg{width:26px;height:26px;color:var(--line-2);margin-bottom:8px}
.fp-choices{display:flex;flex-direction:column;gap:6px}
.fp-choicerow{display:flex;gap:6px;align-items:center}
.fp-choicerow .fp-input{height:32px}
.fp-choicerow button{width:30px;height:32px;flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.fp-choicerow button svg{width:14px;height:14px}
.fp-choicerow button:hover{background:#FBEAEA;color:#B3261E;border-color:#f2c9c9}
.fp-addchoice{align-self:flex-start;height:30px;padding:0 12px;border:1px dashed var(--line-2);background:none;border-radius:99px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.fp-addchoice:hover{border-color:var(--ink);color:var(--ink)}

/* Connections / Logic / Responses tab panes */
.fb2-pane{flex:1 1 auto;min-height:0;overflow:auto;padding:22px 24px 50px;display:flex;justify-content:center}
.fb2-pane-in{width:100%;max-width:680px}
.fb2-conn{display:flex;flex-direction:column;gap:9px}
.fconn{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--surface)}
.fconn-ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--ink-2)}
.fconn-ic svg{width:17px;height:17px}
.fconn-b{flex:1 1 auto;min-width:0}
.fconn-t{font-size:13px;font-weight:800;color:var(--ink)}
.fconn-s{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.fconn-state{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-3)}
.fconn-state .sd{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.fconn-state.active{color:var(--green,#0f7a3f)}.fconn-state.active .sd{background:var(--green,#0f7a3f)}
.fconn-cfg{flex:0 0 auto;height:30px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:99px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.13s var(--ease)}
.fconn-cfg:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
.fpane-title{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.2px;margin:0 0 3px}
.fpane-sub{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0 0 16px}
.fsoon-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:44px 22px;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface-2);color:var(--ink-3)}
.fsoon-block svg{width:30px;height:30px;color:var(--line-2)}
.fsoon-block .t{font-size:13.5px;font-weight:800;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.fsoon-block .t .soon-tag{font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.fsoon-block .s{font-size:12px;max-width:400px;line-height:1.55}

/* ---------------- Preview overlay ---------------- */
.fprev-scrim{position:fixed;inset:0;z-index:200;background:rgba(20,20,24,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.fprev-scrim.show{opacity:1;pointer-events:auto}
.fprev{position:fixed;inset:0;z-index:201;display:flex;flex-direction:column;align-items:center;padding:0;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.fprev.show{opacity:1;pointer-events:auto}
.fprev-bar{display:flex;align-items:center;gap:10px;width:100%;height:56px;padding:0 18px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto}
.fprev-bar .t{font-size:13px;font-weight:800;color:var(--ink)}
.fprev-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill);padding:2px}
.fprev-seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:none;background:none;border-radius:var(--pill);font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink-3);cursor:pointer}
.fprev-seg button svg{width:14px;height:14px}
.fprev-seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.fprev-grow{flex:1 1 auto}
.fprev-close{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:var(--pill);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.fprev-close svg{width:15px;height:15px}
.fprev-close:hover{background:var(--surface-2);color:var(--ink)}
.fprev-stage{flex:1 1 auto;width:100%;overflow:auto;display:flex;justify-content:center;padding:26px 18px 50px;background:var(--surface-2)}
.fprev-doc{width:100%;max-width:640px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:26px 26px 30px;height:max-content}
.fprev.mobile .fprev-doc{max-width:390px;border-radius:26px;padding:22px 18px 26px}
.fprev-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px 9px;margin-bottom:12px}
.fprev-title{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.fprev-ctx{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.fprev-q{margin-top:18px}
.fprev-q .ql{font-size:13px;font-weight:700;color:var(--ink);display:flex;gap:5px}
.fprev-q .ql .r{color:#B3261E}
.fprev-q .qhelp{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.fprev-q .qin{margin-top:8px}
.fprev-in{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);height:38px;padding:0 12px;font-family:inherit;font-size:13px;color:var(--ink-3);display:flex;align-items:center}
.fprev-in.area{height:74px;align-items:flex-start;padding-top:10px}
.fprev-yn{display:inline-flex;gap:8px}
.fprev-yn .b{height:34px;padding:0 18px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:12.5px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center}
.fprev-photo{border:1px dashed var(--line-2);border-radius:11px;background:var(--surface-2);color:var(--ink-3);height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:600}
.fprev-photo svg{width:20px;height:20px}
.fprev-submit{margin-top:22px;height:44px;width:100%;border:none;border-radius:12px;background:var(--black);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------------- Mobile ---------------- */
@media (max-width:760px){
  .fl-toolbar{gap:8px}
  .fl-search{width:100%;order:5}
  .fl-grid{grid-template-columns:1fr;gap:11px}
  #formListGridWrap{margin:0 -13px}
  /* builder: canvas primary; rail + props become sheets */
  .fb2-build{flex-direction:column}
  .fb2-rail{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;flex-basis:auto;z-index:150;background:#fff;border-right:none;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:var(--sh-lg);transform:translateY(101%);transition:transform .22s var(--ease)}
  .fb2-rail.sheet-open{transform:translateY(0)}
  .fb2-props{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:80vh;flex-basis:auto;z-index:151;background:#fff;border-left:none;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:var(--sh-lg);transform:translateY(101%);transition:transform .22s var(--ease)}
  .fb2-props.sheet-open{transform:translateY(0)}
  /* Only the builder bar plus its gap: the shared --m-bottom-clear on .content
     already reserves the dock band, so repeating it here double-pads the canvas. */
  .fb2-canvas-wrap{padding:16px 12px 66px}
  .fb2-railtoggle{display:inline-flex}
  /* Above the floating dock, not across it. The dock already reserves the safe
     area beneath itself, so this bar needs no inset of its own. */
  .fb2-mobilebar{position:fixed;left:0;right:0;bottom:calc(var(--mnavH,var(--dock-band)) + 8px);z-index:140;display:flex;gap:8px;padding:9px 12px;background:var(--surface);border-top:1px solid var(--line)}
  .fb2-mobilebar .btn{flex:1 1 auto;justify-content:center}
  .fprev-doc{max-width:100%}
}
@media (min-width:761px){ .fb2-mobilebar{display:none} }
@media (prefers-reduced-motion:reduce){.fcard,.fprev,.fprev-scrim,.fb2-rail,.fb2-props,.fmenu{transition:none}}

/* new-form modal tabs + blank-form fields */
.nf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 15px}
.nf-tab{height:36px;padding:0 13px;border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer;position:relative}
.nf-tab:hover{color:var(--ink-2)}
.nf-tab.on{color:var(--ink)}
.nf-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
.nf-form{display:flex;flex-direction:column;gap:13px}
.nf-form .fp-input,.nf-form .fp-sel{background-color:var(--surface)}
.nf-create{align-self:flex-start;margin-top:4px}
/* rename input inside the shared confirm dialog */
.confirm-dlg .confirm-input{width:100%;height:38px;margin-top:4px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:0 12px;font-family:inherit;font-size:13px;color:var(--ink)}
.confirm-dlg .confirm-input:focus{outline:none;border-color:var(--line-2);background:#fff;box-shadow:var(--sh-sm)}
/* connections workflow-link inline editor */
.fb2-connedit{border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;margin:-9px 0 0;padding:12px 14px 14px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}

/* bulk "Change category" picker (anchored to the shared bulk bar) */
.fm-catpop{min-width:184px}
.fm-catpop .myd-sg-h{padding:9px 12px 5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}

/* field-type picker (choose a field type when adding - not always Text) */
.ftpick{position:fixed;z-index:9997;width:252px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--line);border-radius:var(--pop-r,12px);box-shadow:var(--sh-pop);padding:0;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .14s var(--ease),transform .14s var(--ease);display:flex;flex-direction:column;max-height:min(70vh,380px);overflow:hidden}
.ftpick.show{opacity:1;transform:none;pointer-events:auto}
.ftpick-search{display:flex;align-items:center;gap:8px;margin:6px 6px 4px;height:32px;padding:0 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink-3);flex:0 0 auto}
.ftpick-search:focus-within{border-color:var(--ink-3);background:var(--surface)}
.ftpick-search svg{width:14px;height:14px;flex:0 0 auto}
.ftpick-search input{border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--ink);width:100%}
.ftpick-list{overflow-y:auto;padding:0 6px 8px}
.ftpick-g{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);padding:9px 6px 4px}
.ftpick-item{display:flex;align-items:center;gap:10px;width:100%;height:var(--menu-row-h,33px);padding:0 8px;border:none;background:none;border-radius:var(--menu-row-r,7px);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:left;transition:background .12s var(--ease)}
.ftpick-item:hover{background:var(--menu-hover,var(--surface-2));color:var(--ink)}
.ftpick-ic{width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;color:var(--ink-3)}
.ftpick-ic svg,.ftpick-ic .fdi{width:16px;height:16px}
@media (max-width:760px){ .ftpick{left:var(--dock-inset)!important;right:var(--dock-inset)!important;width:auto;
  bottom:calc(var(--mnavH,var(--dock-band)) + 8px)!important;top:auto!important} }