/* Funnel templates: library, template sheet, page builder, brand, launch checklist and export. Owner: funnels.
   Tokens only (spec 2). Client page colours live in src/funnel-theme.mjs, inside the preview iframes. */

/* ================================================================ library */
.funnel-lib{display:flex;flex-direction:column;gap:40px;padding-bottom:24px}
/* styles.css gives .status-chip a legacy box and loads after the kit; kit pills here keep the kit look. */
:is(.funnel-lib,.fb-editor,.funnel-sheet) .uk-pill.status-chip{display:inline-flex;align-items:center;gap:4px;height:24px;margin:0;padding:0 10px;border:0;border-radius:var(--r-full);background:var(--pill-bg);color:var(--pill-text);font:500 13px/16px var(--font-sans);white-space:nowrap}
:is(.funnel-lib,.fb-editor,.funnel-sheet) .uk-pill--sm.status-chip{height:20px;padding:0 8px;gap:3px;font-size:12px}
:is(.funnel-lib,.fb-editor,.funnel-sheet) .uk-pill.status-chip:has(>.uk-icon){padding-left:7px}
:is(.funnel-lib,.fb-editor,.funnel-sheet) .uk-pill--sm.status-chip:has(>.uk-icon){padding-left:6px}
.funnel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.funnel-head>div:first-child{min-width:0;flex:1}
.funnel-head .page-head{margin:0}
.funnel-head .page-head h1{font:var(--t-h1);letter-spacing:-.02em;font-variation-settings:"opsz" 32;margin:4px 0 8px}
.funnel-head .page-head p{font:var(--t-body);color:var(--text-2);max-width:560px;margin:0}
.funnel-head .page-head .eyebrow{font:var(--t-small);color:var(--text-3);letter-spacing:0;text-transform:none;margin:0}
.funnel-head #program-error:not([hidden]){margin-top:16px}
/* Empty on desktop and tablet: the page bar's #page-actions slot holds the action there (spec 4.2). */
.funnel-head__actions{display:flex;gap:8px;flex:none;padding-bottom:4px}
.funnel-head__actions:empty{display:none}
.funnel-lib>.storage-note{margin:-16px 0 0}

.funnel-block{display:flex;flex-direction:column;gap:16px;min-width:0;scroll-margin-top:72px}
.funnel-block__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.funnel-block__head h2{font:var(--t-h3);letter-spacing:-.01em;margin:0}
.funnel-block__sub{margin:4px 0 0;font:var(--t-body);color:var(--text-3)}
.funnel-block__count{font:var(--t-small);color:var(--text-3)}

/* Live page thumbnails: a 1280px page scaled to the card width. */
.funnel-thumb{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:var(--surface);--thumb-scale:.25}
.funnel-thumb__frame{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform:scale(var(--thumb-scale));transform-origin:0 0;pointer-events:none;background:var(--surface)}
/* Until a thumbnail is painted it shows a quiet page skeleton (no fade: the finished page appears at full strength). */
.funnel-thumb:has(.funnel-thumb__frame:not([data-loaded="true"])){background:linear-gradient(var(--gray-150),var(--gray-150)) 8% 10%/22% 5% no-repeat,linear-gradient(var(--gray-150),var(--gray-150)) 8% 36%/46% 9% no-repeat,linear-gradient(var(--gray-100),var(--gray-100)) 8% 55%/40% 5% no-repeat,linear-gradient(var(--gray-100),var(--gray-100)) 92% 40%/34% 50% no-repeat,var(--surface)}
.funnel-thumb__frame:not([data-loaded="true"]){visibility:hidden}

/* Your funnels */
.funnel-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.funnel-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.funnel-card:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px);border-color:var(--border-strong)}
.funnel-card__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.funnel-card__link:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
.funnel-card .funnel-thumb{border-bottom:1px solid var(--border)}
.funnel-card__body{display:flex;flex-direction:column;gap:8px;padding:14px 12px 14px 16px}
.funnel-card__row{display:flex;align-items:center;gap:8px;min-width:0}
.funnel-card__name{flex:1;min-width:0;margin:0;font:var(--t-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.funnel-card__row .uk-menu{position:relative;z-index:2;margin:-6px 0}
.funnel-card__rename{flex:1;min-width:0;height:32px;margin:-4px 0;padding:0 8px;border:1px solid var(--green-500);border-radius:var(--r-sm);box-shadow:0 0 0 3px rgba(31,157,85,.22);font:600 16px/24px var(--font-sans);color:var(--text-1);background:var(--surface);outline:none;position:relative;z-index:2}
.funnel-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.funnel-card__ready{display:inline-flex;align-items:center;gap:6px;font:var(--t-small);color:var(--text-2)}
.funnel-card__edited{margin:0;font:var(--t-caption);color:var(--text-3)}

/* How do you sell? */
.funnel-helper{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-sunken)}
.funnel-helper__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.funnel-helper__head h3{margin:0;font:var(--t-title)}
.funnel-helper__tag{display:inline-flex;align-items:center;gap:6px;font:var(--t-small);color:var(--green-700)}
.funnel-helper__tag .uk-icon{color:var(--green-500)}
.funnel-helper .uk-card-option,#funnel-sell-help .uk-card-option{background:var(--surface)}
/* Stacked layout (icon above the text) only: padding and the lead plate stay at the kit's size (spec 3.3). */
:is(.funnel-helper,#funnel-sell-help) .uk-card-option{grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto auto;align-content:start;row-gap:12px}
:is(.funnel-helper,#funnel-sell-help) .uk-card-option__lead{grid-row:1;grid-column:1}
:is(.funnel-helper,#funnel-sell-help) .uk-card-option__text{grid-row:2;grid-column:1/-1}
:is(.funnel-helper,#funnel-sell-help) .uk-card-option__check{grid-row:1;grid-column:2}
:is(.funnel-helper,#funnel-sell-help) .uk-card-option__desc{font-size:13px;line-height:18px}
#funnel-sell-help .uk-cards{padding-top:4px}

.funnel-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.funnel-filters>.uk-chips{min-width:0}
.funnel-filters__industry{display:flex;align-items:center;gap:10px;min-width:0}
.funnel-filters__label{font:var(--t-small);color:var(--text-3);white-space:nowrap}

/* Template gallery */
.funnel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.funnel-tpl{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.funnel-tpl[hidden]{display:none}
.funnel-tpl:hover{box-shadow:var(--shadow-raised);border-color:var(--border-strong);transform:translateY(-1px)}
.funnel-tpl.is-recommended{border-color:var(--green-500);box-shadow:0 0 0 1px var(--green-500),var(--shadow-card)}
.funnel-tpl__ribbon{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px 0 8px;border-radius:var(--r-full);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green-100);font:600 12px/16px var(--font-sans);color:var(--green-700)}
.funnel-tpl__ribbon .uk-icon{color:var(--green-500)}
.funnel-tpl__thumb{appearance:none;position:relative;display:block;width:100%;margin:0;padding:20px 24px 0;border:0;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--gray-50),var(--gray-100));cursor:zoom-in;overflow:hidden;font:inherit;text-align:left}
.funnel-tpl__thumb .funnel-thumb{border-radius:8px 8px 0 0;box-shadow:0 0 0 1px var(--border),0 12px 24px -12px rgba(24,24,27,.18);transition:transform var(--dur-3) var(--ease-out)}
.funnel-tpl:hover .funnel-tpl__thumb .funnel-thumb{transform:translateY(-3px)}
.funnel-tpl__thumb:focus-visible{outline:2px solid var(--green-600);outline-offset:-2px}
.funnel-tpl__sample{position:absolute;right:12px;bottom:10px;z-index:2;border-radius:var(--r-full);box-shadow:0 0 0 2px var(--surface),var(--shadow-xs)}
.funnel-tpl__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:16px 16px 14px}
.funnel-tpl__title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.funnel-tpl__title h3{margin:0;font:var(--t-title)}
.funnel-tpl__pages{flex:none;font:var(--t-caption);color:var(--text-3)}
.funnel-tpl__fit{margin:0;font:400 14px/20px var(--font-sans);color:var(--text-2)}
.funnel-tpl__steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.funnel-tpl__steps li{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--r-xs);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);font:500 12px/16px var(--font-sans);color:var(--text-2)}
.funnel-tpl__steps li .uk-icon{color:var(--text-3)}
.funnel-tpl__steps li+li{position:relative;margin-left:12px}
.funnel-tpl__steps li+li::before{content:"";position:absolute;left:-13px;top:50%;width:8px;height:1px;background:var(--gray-400)}
.funnel-tpl__best{margin:0;font:var(--t-caption);color:var(--text-3)}
.funnel-tpl__best span{color:var(--text-2);font-weight:600}
.funnel-tpl__actions{display:flex;justify-content:flex-end;gap:6px;margin-top:auto;padding-top:6px}
.funnel-empty-filter{margin:0;padding:32px;text-align:center;font:var(--t-body);color:var(--text-3);border:1px dashed var(--border-strong);border-radius:var(--r-lg)}

.funnel-missing{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:480px;padding:28px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.funnel-missing>.uk-icon{width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:var(--r-lg);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2)}
.funnel-missing h1{margin:0}
.funnel-missing p{margin:0;font:var(--t-body);color:var(--text-2)}

/* ========================================================= template sheet */
dialog#funnel-template-sheet{max-width:1080px;height:min(860px,calc(100dvh - 48px))}
#funnel-template-sheet .uk-sheet__body{display:flex;padding-top:8px}
.funnel-detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;flex:1;min-height:0}
.funnel-detail__preview{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.funnel-detail__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.funnel-detail__stage{position:relative;flex:1;min-height:360px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;border-radius:var(--r-lg);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--border)}
.funnel-detail__screen{position:relative;overflow:hidden;background:var(--surface);flex:none}
.funnel-detail__screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:var(--surface)}
.funnel-detail__device{flex:none}
.funnel-detail__stage[data-device="phone"] .funnel-detail__device{margin-top:10px;padding:6px;border-radius:30px;background:var(--gray-900);box-shadow:0 24px 48px -16px rgba(24,24,27,.35)}
.funnel-detail__stage[data-device="phone"] .funnel-detail__screen{border-radius:24px;clip-path:inset(0 round 24px)}
.funnel-detail__sample{position:absolute;right:12px;bottom:12px;z-index:1}
.funnel-detail__info{display:flex;flex-direction:column;gap:20px;min-height:0;overflow:auto;padding:2px 2px 8px}
.funnel-detail__fit{margin:0;font:var(--t-body);color:var(--text-1)}
.funnel-detail__group h3{margin:0 0 8px;font:600 13px/18px var(--font-sans);color:var(--text-3)}
.funnel-detail__group p{margin:0;font:400 14px/20px var(--font-sans);color:var(--text-2)}
.funnel-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.funnel-tags li{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--border-strong);font:500 13px/18px var(--font-sans);color:var(--text-2)}
.funnel-need{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.funnel-need li{display:grid;grid-template-columns:16px 1fr;gap:8px;font:400 14px/20px var(--font-sans);color:var(--text-2)}
.funnel-need .uk-icon{margin-top:2px;color:var(--green-500)}
.funnel-detail__pair{display:flex;align-items:center;gap:8px}
.funnel-detail__pair .uk-icon{color:var(--text-3)}

/* ================================================================= editor */
.fb-editor{--fb-rail:252px;--fb-inspector:340px;container:fb-editor/inline-size;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:calc(100dvh - var(--fb-top,52px));margin:calc(var(--fb-pad-top,28px) * -1) calc(var(--fb-pad-right,40px) * -1) calc(var(--fb-pad-bottom,72px) * -1) calc(var(--fb-pad-left,40px) * -1);background:var(--canvas);border-top:1px solid var(--border);overflow:hidden}
/* Three cells that cannot overlap: the name cell takes the space that is left over and ellipses its text, while the
   device toggle and the action group keep their own width. The name cell also clips, so nothing can ever paint on
   top of the Desktop | Phone control. The 4px padding (cancelled by the negative margin) keeps focus rings visible. */
.fb-topbar{grid-row:1;display:flex;align-items:center;gap:12px;height:56px;min-width:0;padding:0 12px 0 4px;background:var(--surface);border-bottom:1px solid var(--border)}
.fb-topbar__start,.fb-topbar__end{display:flex;align-items:center;gap:6px;min-width:0}
/* 4px between the things in the name cell, not 6: four items live here (back, name, template badge, example
   marker) and the eight pixels that saves are what lets the badge and the save state both read at 1440. */
.fb-topbar__start{flex:1 1 auto;gap:4px;overflow:hidden;padding:4px;margin:-4px 0}
.fb-topbar__center{flex:0 0 auto}
/* The actions keep their labels: when the bar runs out of room the name gives way first, then the save line, and
   the template badge leaves whole rather than half-drawn (fitTopbar in funnel-ui.js). */
.fb-topbar__end{flex:0 1 auto;justify-content:flex-end}
.fb-topbar__end>*{flex:none}
.fb-back{flex:none;color:var(--text-2)}
.fb-topbar__sep{width:1px;height:20px;background:var(--border);flex:none}
.fb-name{display:block;flex:1 1 260px;min-width:112px;max-width:260px}
.fb-name input{box-sizing:border-box;width:100%;min-width:0;height:32px;padding:0 8px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font:600 15px/22px var(--font-sans);letter-spacing:-.006em;color:var(--text-1);text-overflow:ellipsis;transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.fb-name input:hover{background:var(--hover)}
.fb-name input:focus{outline:none;background:var(--surface);border-color:var(--green-500);box-shadow:0 0 0 3px rgba(31,157,85,.22)}
/* The template badge never shrinks: a half-drawn pill reads as a glitch, so the name gives up its width instead
   and ellipses, and if the badge still does not fit whole, fitTopbar() in funnel-ui.js hides it outright. It sits
   beside the "Example" marker in the example draft rather than being replaced by it: both are true at once. */
.fb-topbar__tpl{flex:none;white-space:nowrap}
.fb-topbar__demo{display:inline-flex;align-items:center;gap:2px;flex:none}
/* No extra margin: the group's own 6px gap already separates the save line from Brand, and those six pixels are
   what the save state needs to read in full beside the template badge at 1440. */
.fb-save{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;font:var(--t-small);color:var(--text-3);white-space:nowrap}
.fb-save>.uk-icon,.fb-save #funnel-retry{flex:none}
.fb-save #funnel-save-state{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fb-save__ok{color:var(--green-500)}
.fb-save[data-state="saving"] .fb-save__ok,.fb-save[data-state="dirty"] .fb-save__ok,.fb-save[data-state="invalid"] .fb-save__ok{color:var(--gray-400)}
.fb-save[data-state="error"],.fb-save[data-state="conflict"]{color:var(--danger-text)}
.fb-save[data-state="error"] .fb-save__ok,.fb-save[data-state="conflict"] .fb-save__ok{display:none}
.fb-save #funnel-retry{margin-left:2px}
.fb-ready{gap:6px}
.fb-ready__ring{display:inline-flex}
.fb-ready__text{font:500 13px/18px var(--font-sans);color:var(--text-2)}
.fb-error{grid-row:2;margin:8px 12px 0;padding:10px 14px;border-radius:var(--r-md);background:var(--danger-bg);box-shadow:inset 0 0 0 1px var(--danger-border);color:var(--danger-text);font:500 14px/20px var(--font-sans)}
.fb-error[hidden]{display:none}

.fb-body{grid-row:3;display:grid;grid-template-columns:var(--fb-rail) minmax(0,1fr) var(--fb-inspector);min-height:0;min-width:0}
.fb-rail,.fb-inspector{min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--surface)}
.fb-rail{border-right:1px solid var(--border)}
.fb-inspector{border-left:1px solid var(--border)}
.fb-rail__scroll{padding:14px 10px 24px}

/* Funnel map */
.fb-rail__group+.fb-rail__group{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.fb-rail__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-right:6px}
.fb-rail__title{margin:0 0 8px 8px;font:600 12px/16px var(--font-sans);color:var(--text-3)}
.fb-rail__page{font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-map{position:relative;display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fb-map::before{content:"";position:absolute;left:24px;top:24px;bottom:24px;width:2px;border-radius:2px;background:var(--gray-150)}
.fb-node{position:relative;display:flex;align-items:center;gap:0;min-width:0}
.fb-node__main{appearance:none;flex:1;min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:6px 8px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-1);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dur-2) var(--ease-out)}
.fb-node__main:hover{background:var(--hover)}
.fb-node.is-current>.fb-node__main,.fb-node.is-selected>.fb-node__main{background:var(--selected-bg);box-shadow:inset 0 0 0 1px var(--green-100)}
.fb-node__icon{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 3px var(--surface);color:var(--text-2)}
.fb-node.is-current .fb-node__icon,.fb-node.is-selected .fb-node__icon{color:var(--green-500);box-shadow:inset 0 0 0 1px var(--green-500),0 0 0 3px var(--green-50)}
.fb-node--dest .fb-node__icon{background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 3px var(--surface);border-radius:var(--r-full)}
.fb-node__text{display:flex;flex-direction:column;min-width:0}
.fb-node__text strong{font:600 13px/18px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-node__text small{font:400 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-node__warn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:var(--r-full);background:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-border);color:var(--warning-text);font:600 11px/14px var(--font-sans)}
.fb-node__ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-full);background:var(--success-bg);color:var(--green-600)}
.fb-node__pill{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--r-full);font:600 11px/14px var(--font-sans);white-space:nowrap}
.fb-node__pill.is-ok{background:var(--success-bg);color:var(--success-text)}
.fb-node__pill.is-warn{background:var(--warning-bg);color:var(--warning-text)}
.fb-node>.uk-btn--icon{flex:none;margin-left:2px;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.fb-node:hover>.uk-btn--icon,.fb-node:focus-within>.uk-btn--icon,.fb-node.is-current>.uk-btn--icon{opacity:1}
.fb-edge{position:relative;height:20px;padding-left:48px;font:500 11px/20px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-branch{position:relative;display:flex;align-items:center;gap:6px;height:22px;padding-left:48px;font:500 11px/16px var(--font-sans);color:var(--text-3)}
.fb-branch .uk-icon{color:var(--gray-400)}

/* Sections list */
.fb-sections{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none}
.fb-srow{position:relative;display:flex;align-items:center;min-width:0;border-radius:var(--r-sm);background:var(--surface)}
.fb-srow__grip{display:grid;place-items:center;flex:none;width:18px;height:34px;color:var(--gray-400);opacity:0;cursor:grab;touch-action:none;transition:opacity var(--dur-2) var(--ease-out)}
.fb-srow.is-locked .fb-srow__grip{cursor:default}
.fb-srow:hover .fb-srow__grip,.fb-srow:focus-within .fb-srow__grip{opacity:1}
.fb-srow__main{appearance:none;flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;margin:0;padding:0 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-1);font:500 14px/20px var(--font-sans);text-align:left;cursor:pointer;transition:background-color var(--dur-2) var(--ease-out)}
.fb-srow__main:hover{background:var(--hover)}
.fb-srow.is-selected .fb-srow__main{background:var(--selected-bg);box-shadow:inset 0 0 0 1px var(--green-100)}
.fb-srow__icon{display:inline-flex;color:var(--text-3);flex:none}
.fb-srow.is-selected .fb-srow__icon{color:var(--green-500)}
.fb-srow__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-srow__variant{flex:none;font:var(--t-caption);color:var(--text-3)}
.fb-srow__dot{flex:none;width:6px;height:6px;border-radius:var(--r-full);background:var(--warning-solid)}
.fb-srow>.uk-btn--icon{flex:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.fb-srow:hover>.uk-btn--icon,.fb-srow:focus-within>.uk-btn--icon,.fb-srow.is-hidden>.uk-btn--icon{opacity:1}
.fb-srow.is-hidden .fb-srow__label,.fb-srow.is-hidden .fb-srow__icon{color:var(--text-3)}
.fb-srow.is-hidden .fb-srow__label{text-decoration:line-through;text-decoration-color:var(--gray-300)}
.fb-srow.is-dragging{z-index:3;box-shadow:var(--shadow-pop);cursor:grabbing}
.fb-srow.is-dragging .fb-srow__grip{opacity:1;cursor:grabbing}
.fb-srow:not(.is-dragging){transition:transform var(--dur-3) var(--ease-out)}
.fb-rail__group--sections #funnel-add-section{margin-top:6px;justify-content:flex-start;color:var(--text-2)}
.fb-drafts{padding:0 4px}

/* Canvas */
.fb-canvas{display:flex;flex-direction:column;min-width:0;min-height:0}
.fb-canvas__bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px 0;min-width:0}
.fb-canvas__bar .uk-seg{min-width:0;max-width:100%}
.fb-canvas__file{font:var(--t-mono);font-size:12px;color:var(--text-3);white-space:nowrap}
.fb-stage{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:24px;box-sizing:border-box;overflow:hidden}
.fb-device{position:relative;display:flex;flex-direction:column;flex:none;box-sizing:border-box;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px rgba(24,24,27,.08),0 24px 48px -24px rgba(24,24,27,.25),0 2px 6px rgba(24,24,27,.04);overflow:hidden;transform-origin:top center;transition:width var(--dur-5) var(--ease-out),height var(--dur-5) var(--ease-out)}
.fb-device__chrome{display:flex;align-items:center;gap:12px;flex:none;height:36px;padding:0 12px;background:var(--gray-50);border-bottom:1px solid var(--border)}
.fb-dots{display:flex;gap:6px;flex:none}
.fb-dots i{width:10px;height:10px;border-radius:var(--r-full);background:var(--gray-200)}
.fb-url{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;max-width:420px;height:22px;margin:0 auto;padding:0 10px;border-radius:var(--r-full);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden}
.fb-url .uk-icon{flex:none;color:var(--gray-400)}
.fb-url span{overflow:hidden;text-overflow:ellipsis}
.fb-device__screen{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--surface)}
.fb-device__screen iframe{display:block;border:0;transform-origin:0 0;background:var(--surface)}
.fb-editor[data-device="phone"] .fb-device{padding:12px;border-radius:52px;background:var(--gray-900);box-shadow:inset 0 0 0 1px var(--gray-700),0 32px 64px -24px rgba(24,24,27,.4)}
.fb-editor[data-device="phone"] .fb-device__chrome{display:none}
.fb-editor[data-device="phone"] .fb-device__screen{border-radius:40px}

/* Inspector */
#funnel-form{display:flex;flex-direction:column;gap:16px;min-height:100%;box-sizing:border-box;padding:0 20px 24px}
.fb-inspector__phonebar{display:none}
.fb-ins-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;margin:0 -20px;padding:16px 20px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.fb-ins-head .uk-plate{color:var(--text-2)}
.fb-ins-head__text{flex:1;min-width:0}
.fb-ins-title{margin:0;font:var(--t-title);outline:none}
.fb-ins-head__text p{margin:2px 0 0;font:400 13px/18px var(--font-sans);color:var(--text-3)}
.fb-ins-head .uk-menu,.fb-ins-head>.uk-pill{margin-top:4px}
.fb-fields{display:flex;flex-direction:column;gap:16px;min-width:0}
.fb-words{margin:-10px 0 0;font:var(--t-caption);color:var(--text-3)}
.fb-words:empty{display:none}
.fb-proof-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--success-bg);box-shadow:inset 0 0 0 1px var(--success-border);font:500 12px/16px var(--font-sans);color:var(--success-text)}
.fb-proof-note .uk-icon{flex:none;margin-top:1px;color:var(--green-500)}
.fb-group{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.fb-group>legend{float:left;width:100%;margin-bottom:8px;padding:0}
.fb-group>legend+*{clear:both}
.fb-group__count{margin-left:auto;font:500 12px/16px var(--font-sans);color:var(--text-3)}
.fb-group>.uk-field__hint{margin:-4px 0 2px}
.fb-group>.uk-btn{align-self:flex-start}
.fb-lines{display:flex;flex-direction:column;gap:6px}
.fb-line{display:flex;align-items:center;gap:4px}
.fb-line__input{flex:1;min-width:0;box-sizing:border-box;height:36px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-xs);font:var(--t-input);color:var(--text-1)}
.fb-line__input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(31,157,85,.22)}
.fb-items{display:flex;flex-direction:column;gap:8px;min-width:0}
.fb-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.fb-item[open]{border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.fb-item__head{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 4px 0 10px;list-style:none;cursor:pointer;border-radius:var(--r-md)}
.fb-item__head::-webkit-details-marker{display:none}
.fb-item__head:hover{background:var(--gray-25)}
.fb-item__num{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:var(--r-full);background:var(--gray-100);font:600 11px/14px var(--font-sans);color:var(--text-2)}
.fb-item__title{flex:1;min-width:0;font:500 14px/20px var(--font-sans);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-item__tools{display:flex;flex:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.fb-item:hover .fb-item__tools,.fb-item:focus-within .fb-item__tools,.fb-item[open] .fb-item__tools{opacity:1}
.fb-item__tools .uk-btn[disabled]{opacity:.35}
.fb-item__body{display:flex;flex-direction:column;gap:12px;padding:12px 12px 14px;border-top:1px solid var(--border)}
.fb-item__status{margin:0}
.fb-req{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 6px;border-radius:var(--r-full);background:var(--gray-100);font:600 11px/14px var(--font-sans);color:var(--text-2);vertical-align:1px}
.fb-empty-items{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--surface-sunken)}
.fb-empty-items .uk-icon{flex:none;color:var(--text-3);margin-top:1px}
.fb-empty-items p{margin:0;font:400 13px/18px var(--font-sans);color:var(--text-2)}
.fb-icons{margin:0;padding:0;border:0;min-width:0}
.fb-icons>legend{margin-bottom:8px;padding:0}
.fb-icons__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.fb-icon-opt{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.fb-icon-opt:hover{background:var(--hover)}
.fb-icon-opt:has(input:checked){background:var(--selected-bg);box-shadow:inset 0 0 0 1.5px var(--green-500);color:var(--green-700)}
.fb-icon-opt:has(input:focus-visible){outline:2px solid var(--green-600);outline-offset:2px}
.fb-callout{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.fb-callout>.uk-icon{flex:none;margin-top:1px;color:var(--text-3)}
.fb-callout strong{display:block;font:600 13px/18px var(--font-sans)}
.fb-callout p{margin:2px 0 4px;font:400 13px/18px var(--font-sans);color:var(--text-3)}
.fb-callout .uk-btn--link{padding:0;height:auto}
#funnel-writing-help{border-top:1px solid var(--border);padding-top:4px}
#funnel-writing-help .uk-disclosure__body{display:flex;flex-direction:column;gap:8px}
.fb-help__lead{margin:0;font:400 13px/18px var(--font-sans);color:var(--text-3)}
.fb-prompt{display:flex;flex-direction:column;gap:4px;padding:10px 12px 6px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border);background:var(--surface)}
.fb-prompt p{margin:0;font:400 13px/19px var(--font-sans);color:var(--text-2)}
.fb-prompt .uk-btn{align-self:flex-end}
.fb-ins-foot{margin:auto 0 0;padding-top:8px;font:var(--t-caption);color:var(--text-3);text-align:center}
.fb-subhead{margin:8px 0 -6px;font:600 13px/18px var(--font-sans);color:var(--text-1)}
.fb-inspector .uk-cards{gap:8px}
.fb-inspector .uk-card-option{min-height:0;padding:12px;column-gap:12px}
.fb-inspector .uk-card-option__lead .uk-plate{width:32px;height:32px;border-radius:var(--r-sm)}
.fb-inspector .uk-card-option__title{font-size:14px;line-height:20px}
.fb-inspector .uk-card-option__desc{font-size:13px;line-height:18px}
.fb-formbuilder{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.fb-formbuilder__head{display:flex;align-items:baseline;justify-content:space-between}
.fb-formbuilder__head h3{margin:0;font:600 14px/20px var(--font-sans)}
.fb-formbuilder__head span{font:var(--t-caption);color:var(--text-3)}
.fb-formbuilder>.uk-field__hint{margin:-6px 0 0}
.fb-formbuilder>.uk-btn{align-self:flex-start}

/* Phone and compact editor bar */
.fb-phonebar{grid-row:4;display:none;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border)}
.fb-phonebar .uk-seg{flex:1;min-width:0}
.fb-phonebar__ready{flex:none;gap:6px}
.fb-phonebar__ready .fb-ready__ring{display:inline-flex}

/* ============================================================== add section */
dialog#funnel-add-sheet{max-width:880px}
.fb-addgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding-top:4px}
.fb-addcard{appearance:none;position:relative;display:flex;flex-direction:column;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text-1);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.fb-addcard:hover{border-color:var(--border-strong);box-shadow:var(--shadow-raised)}
.fb-addcard:active{transform:scale(.985)}
.fb-addcard__art{display:block;height:92px;padding:14px 16px;box-sizing:border-box;background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.fb-addcard__text{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.fb-addcard__text strong{display:flex;align-items:center;gap:6px;font:600 14px/20px var(--font-sans)}
.fb-addcard__text strong .uk-icon{color:var(--text-3)}
.fb-addcard__text small{font:400 12px/16px var(--font-sans);color:var(--text-3)}
.fb-addcard__tag{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font:600 11px/14px var(--font-sans);color:var(--text-2)}
.fb-art{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:6px;width:100%;height:100%}
.fb-art i{display:block;height:8px;width:var(--w,60%);border-radius:4px;background:var(--gray-300)}
.fb-art--trust i{height:10px}
.fb-art--faq,.fb-art--thank-you-steps,.fb-art--alternatives{flex-direction:column;flex-wrap:nowrap;gap:7px}
.fb-art b{display:block;flex:1;max-width:48px;height:56px;border-radius:6px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong)}
.fb-art b.q{box-shadow:inset 0 0 0 1px var(--border-strong),inset 0 -14px 0 var(--gray-100)}
.fb-art b.g{background:var(--gray-200);box-shadow:none}
.fb-art b.t{max-width:56px;height:62px}
.fb-art b.f{box-shadow:inset 0 0 0 1.5px var(--gray-700)}
.fb-art u{display:block;flex:1;max-width:46px;height:4px;border-radius:2px;background:var(--gray-300);position:relative;text-decoration:none}
.fb-art u::before{content:"";position:absolute;left:0;top:-8px;width:20px;height:20px;border-radius:var(--r-full);background:var(--gray-700)}
.fb-art u.p{height:40px;background:transparent}
.fb-art u.p::before{left:50%;top:0;margin-left:-12px;width:24px;height:24px;background:var(--gray-300)}
.fb-art em{display:block;width:100px;height:56px;border-radius:6px;background:var(--gray-800);position:relative}
.fb-art em::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-left:14px solid var(--surface);border-top:8px solid transparent;border-bottom:8px solid transparent}
.fb-art s{display:block;width:88%;height:56px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);text-decoration:none}
.fb-art s.c{background:var(--gray-800);box-shadow:none}
.fb-art s.h{background:linear-gradient(90deg,transparent 52%,var(--gray-200) 52%);}
.fb-art s.tb{background:repeating-linear-gradient(180deg,var(--surface) 0 13px,var(--gray-200) 13px 14px)}
.fb-art s.fm{width:64%;background:repeating-linear-gradient(180deg,var(--surface) 0 6px,var(--gray-200) 6px 14px,var(--surface) 14px 18px)}
.fb-art s.cal{width:64%;background:repeating-linear-gradient(90deg,var(--surface) 0 11px,var(--gray-200) 11px 12px),var(--surface)}

/* ================================================================== brand */
dialog#funnel-brand-sheet .uk-sheet__body{padding-top:8px}
.fb-brand{display:flex;flex-direction:column;gap:24px}
.fb-brand__group{display:flex;flex-direction:column;gap:10px;min-width:0}
.fb-brand__group+.fb-brand__group{padding-top:20px;border-top:1px solid var(--border)}
.fb-brand__group h3{display:flex;align-items:baseline;justify-content:space-between;margin:0;font:600 14px/20px var(--font-sans)}
.fb-brand__group h3 span{font:500 12px/16px var(--font-sans);color:var(--text-3)}
.fb-brand__group--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fb-brand__current{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 12px;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.fb-brand__current img{max-height:44px;max-width:160px;object-fit:contain}
.fb-brand__current--wide img{width:120px;height:68px;max-width:none;max-height:none;object-fit:cover;border-radius:var(--r-sm)}
.fb-swatches{display:flex;flex-wrap:wrap;gap:8px}
.fb-swatch{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);cursor:pointer}
.fb-swatch__dot{width:28px;height:28px;border-radius:var(--r-full);background:var(--sw);box-shadow:inset 0 0 0 1px rgba(24,24,27,.12);transition:transform var(--dur-2) var(--ease-spring)}
.fb-swatch__dot--default{background:linear-gradient(135deg,var(--gray-900) 0 50%,var(--green-600) 50% 100%)}
.fb-swatch:hover .fb-swatch__dot{transform:scale(1.08)}
.fb-swatch:has(input:checked){box-shadow:0 0 0 2px var(--text-1)}
.fb-swatch:has(input:checked) .fb-swatch__dot{transform:scale(.86)}
.fb-swatch:has(input:focus-visible){outline:2px solid var(--green-600);outline-offset:2px}
.fb-brand__row{display:flex;align-items:flex-end;gap:12px}
.fb-brand__row .uk-field{width:150px;flex:none}
.fb-brand__sample{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:var(--h-field,40px);border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.fb-brand__button{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--r-sm);background:var(--sample);color:var(--sample-ink);font:600 13px/18px var(--font-sans);white-space:nowrap}
.fb-brand__aa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:var(--t-caption);color:var(--text-3)}
.fb-thumbgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fb-thumbimg{position:relative;margin:0}
.fb-thumbimg img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--border)}
.fb-thumbimg .uk-btn{position:absolute;top:4px;right:4px;background:var(--surface);box-shadow:var(--shadow-xs)}

/* ========================================================== full preview */
dialog#funnel-full-preview{max-width:min(1320px,calc(100vw - 48px));height:calc(100dvh - 48px)}
#funnel-full-preview .uk-sheet__body{display:flex;padding-top:4px}
.fb-full{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.fb-full__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.fb-full__note{display:flex;align-items:center;gap:6px;margin:-4px 0 0;font:var(--t-caption);color:var(--text-3)}
.fb-full__note .uk-icon{flex:none}
.fb-full__stage{flex:1;min-height:0;display:flex;justify-content:center;border-radius:var(--r-lg);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.fb-full__stage iframe{width:100%;height:100%;border:0;background:var(--surface)}
.fb-full__stage[data-device="phone"]{padding:16px 0}
.fb-full__stage[data-device="phone"] iframe{width:390px;max-width:100%;border-radius:24px;box-shadow:0 0 0 6px var(--gray-900),0 24px 48px -16px rgba(24,24,27,.35)}

/* ========================================================= launch checklist */
.fb-preflight{display:flex;flex-direction:column;gap:12px}
.fb-preflight__summary{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r-lg);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.fb-preflight__summary p{margin:0;font:400 14px/20px var(--font-sans);color:var(--text-2)}
.fb-preflight__summary .fb-preflight__count{font:600 20px/28px var(--font-sans);letter-spacing:-.012em;color:var(--text-1)}
.fb-preflight .fb-subhead{margin:12px 0 0}
.fb-preflight .fb-checks{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fb-check{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 0;border-bottom:1px solid var(--border)}
.fb-check__icon{display:grid;place-items:center}
.fb-check--success .fb-check__icon{color:var(--green-500)}
.fb-check--warning .fb-check__icon{color:var(--warning-solid)}
.fb-check--neutral .fb-check__icon{color:var(--gray-400)}
.fb-check__label{font:400 14px/20px var(--font-sans);color:var(--text-1)}
.fb-check--success .fb-check__label{color:var(--text-2)}
.fb-check__action{display:flex;align-items:center;gap:8px}
.fb-check__by{font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.fb-lesson{display:flex;align-items:center;gap:8px;margin-top:8px;padding:12px 14px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border);color:var(--link);font:500 14px/20px var(--font-sans);text-decoration:none}
.fb-lesson span{flex:1}
.fb-lesson:hover{background:var(--hover)}

/* ================================================================= export */
.fb-export{display:flex;flex-direction:column;gap:16px}
.fb-export__gaps{display:flex;flex-direction:column;gap:8px}
.fb-export__gaps ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 4px;list-style:none}
.fb-export__gaps li{display:flex;align-items:flex-start;gap:8px;font:400 13px/18px var(--font-sans);color:var(--text-2)}
.fb-export__gaps li .uk-icon{flex:none;margin-top:2px;color:var(--warning-solid)}
.fb-export__detail:empty{display:none}
.fb-files{padding:12px 14px;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.fb-files__title{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:600 13px/18px var(--font-mono);color:var(--text-1)}
.fb-files__title .uk-icon{color:var(--text-3)}
.fb-files ul{margin:0 0 10px;padding:0;list-style:none}
.fb-files li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0 6px 20px;border-top:1px solid var(--border)}
.fb-files li span{font:450 13px/18px var(--font-mono);color:var(--text-1)}
.fb-files li small{font:var(--t-caption);color:var(--text-3);text-align:right}
.fb-files>.uk-field__hint{margin:0}
.fb-copyrows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fb-copyrows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.fb-copyrows li>span{display:grid;grid-template-columns:16px auto;column-gap:10px;align-items:center;min-width:0}
.fb-copyrows li>span .uk-icon{grid-row:1/3;color:var(--text-3)}
.fb-copyrows strong{font:500 14px/20px var(--font-sans)}
.fb-copyrows small{font:400 12px/16px var(--font-mono);color:var(--text-3)}
.fb-md{max-height:280px;margin:0;padding:12px 14px;overflow:auto;border-radius:var(--r-md);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);font:400 12px/18px var(--font-mono);color:var(--text-2);white-space:pre-wrap;word-break:break-word}

/* ============================================================ responsive */
@media (max-width:1180px){
  .funnel-filters{justify-content:flex-start}
}

/* Compact editor (tablet, narrow desktop): canvas plus one side panel switched by Edit | Map. */
@media (min-width:768px){
@container fb-editor (max-width:1099px){
  .fb-body{grid-template-columns:minmax(0,1fr) var(--fb-inspector)}
  .fb-canvas{grid-column:1;grid-row:1}
  .fb-rail,.fb-inspector{grid-column:2;grid-row:1;border-right:0;border-left:1px solid var(--border)}
  .fb-editor:not([data-tab="map"]) .fb-rail,.fb-editor[data-tab="map"] .fb-inspector{display:none}
  .fb-inspector__phonebar{display:flex;padding:10px 12px 0}
  .fb-phonebar{display:flex}
  .fb-phonebar .uk-seg__item[data-value="preview"]{display:none}
  .fb-phonebar .uk-seg{max-width:260px}
  .fb-canvas__file{display:none}
  .fb-topbar .fb-ready__text{display:none}
  .fb-topbar :is(#funnel-brand,#funnel-fullpreview) .uk-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fb-topbar :is(#funnel-brand,#funnel-fullpreview){width:32px;padding:0;justify-content:center}
  .fb-name{flex-basis:220px;max-width:220px}
  .fb-save #funnel-save-state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fb-save{margin-right:0}
}
@container fb-editor (max-width:860px){
  .fb-topbar__center{display:none}
  .fb-body{--fb-inspector:320px}
}
}

@media (max-width:767px){
  .funnel-lib{gap:28px}
  .funnel-head{flex-direction:column;align-items:stretch;gap:16px}
  .funnel-head .page-head h1{font:var(--t-h1)}
  .funnel-head__actions .uk-btn{width:100%;justify-content:center}
  .funnel-grid,.funnel-cards{grid-template-columns:minmax(0,1fr)}
  .funnel-helper{padding:14px}
  :is(.funnel-helper,#funnel-sell-help) .uk-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  :is(.funnel-helper,#funnel-sell-help) .uk-card-option{row-gap:8px}
  :is(.funnel-helper,#funnel-sell-help) .uk-card-option__desc{display:none}
  :is(.funnel-helper,#funnel-sell-help) .uk-card-option__title{font-size:14px;line-height:19px}
  .funnel-filters{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
  .funnel-filters__industry{flex-direction:column;align-items:stretch;gap:6px}
  .funnel-tpl__thumb{padding:14px 16px 0}
  .funnel-card__row>.uk-menu{margin:-10px -4px}
  .funnel-tpl__actions .uk-btn{flex:1;justify-content:center;--btn-h:40px}

  dialog#funnel-template-sheet,dialog#funnel-full-preview{height:92dvh}
  #funnel-template-sheet .uk-sheet__body{display:block}
  .funnel-detail{display:flex;flex-direction:column;gap:20px}
  .funnel-detail__stage{flex:none;height:56dvh;min-height:320px}
  .funnel-detail__info{overflow:visible}
  .fb-addgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fb-addcard__art{height:72px;padding:10px}
  .fb-addcard__tag{display:none}
  .fb-brand__group--split{grid-template-columns:minmax(0,1fr)}
  .fb-thumbgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fb-check{grid-template-columns:20px minmax(0,1fr);padding:10px 0}
  .fb-check__action{grid-column:2;justify-content:flex-start}
  .fb-files li{flex-direction:column;gap:0}
  .fb-files li small{text-align:left}

  /* Editor on phone: one view at a time, page scrolls, no nested fixed-height scrolling.
     In focus mode the shell hides its own phone bar, so the editor bar is the only one and sits at the top. */
  .fb-editor{display:block;height:auto;min-height:calc(100dvh - 52px);padding-bottom:calc(88px + env(safe-area-inset-bottom));border-top:0;overflow:visible;background:var(--surface)}
  body.is-focus-mode .fb-editor{min-height:100dvh}
  .fb-topbar{position:sticky;top:var(--sticky-top);z-index:15;display:flex;gap:4px;height:52px;padding:0 8px 0 4px}
  .fb-topbar__start{flex:1 1 auto}
  .fb-topbar__end{flex:none;gap:2px}
  .fb-topbar__center,.fb-topbar__sep,.fb-topbar__tpl,.fb-back__label,.fb-hide-phone{display:none!important}
  .fb-back{width:44px;padding:0;justify-content:center}
  .fb-name{flex:1 1 0;min-width:72px;max-width:none}
  .fb-name input{width:100%;height:44px;font-size:16px}
  /* Every control the editor draws on a phone is a touch target: the kit's small size is 28px, its plain
     disclosure summary 32px, and a link button is only as tall as its text. Icon buttons keep the kit's
     ::before extension; everything the editor draws itself is grown to a real 44px instead. */
  .fb-topbar .uk-btn,#funnel-add-section,.fb-srow>.uk-btn,.fb-node>.uk-btn,.fb-phonebar .uk-btn,.fb-inspector__phonebar .uk-btn{--btn-h:44px}
  .fb-topbar .uk-btn--link{--btn-h:auto}
  #funnel-form .uk-btn:not(.uk-btn--link){--btn-h:44px}
  #funnel-form .fb-item__head{min-height:44px}
  #funnel-form .uk-btn--link::before{content:"";position:absolute;left:0;right:0;top:50%;min-width:44px;height:44px;transform:translateY(-50%)}
  #funnel-form .uk-disclosure--plain>summary{min-height:44px}
  /* The field wrapper is already 44px tall; without this the input inside it is 42, because the wrapper's
     1px border eats a row top and bottom. The input is transparent, so nothing changes on screen. */
  #funnel-form .uk-input-group>input{height:calc(100% + 2px);margin:-1px 0}
  .fb-line__input{height:44px}
  /* A segmented control that still fits gets a 44px track; one that has wrapped into chips (`uk-seg--wrap`
     sizes its own rows) gets 44px chips instead, so both shapes are thumb-sized. */
  .fb-editor :is(.fb-phonebar,.fb-canvas__bar,#funnel-form) .uk-seg:not(.uk-seg--wrap) .uk-seg__track{height:44px;padding:0}
  .fb-editor .uk-seg--wrap .uk-seg__item{height:44px}
  .fb-phonebar .uk-seg__item,.fb-canvas__bar .uk-seg__item{padding:0 12px;font-size:14px;line-height:20px}
  .fb-topbar__demo .uk-btn{display:none}
  .fb-body{display:block}
  .fb-rail,.fb-inspector,.fb-canvas{border:0;overflow:visible}
  .fb-editor[data-tab="preview"] .fb-rail,.fb-editor:not([data-tab="preview"]) .fb-canvas{display:none}
  .fb-editor[data-tab="edit"] .fb-rail__group--map{display:none}
  .fb-editor[data-tab="map"] .fb-rail__group--sections,.fb-editor[data-tab="map"] .fb-rail__group--drafts{display:none}
  .fb-editor[data-tab="edit"] .fb-rail__group--sections{margin-top:0;padding-top:0;border-top:0}
  .fb-rail__scroll{padding:12px 8px 24px}
  .fb-srow__main{height:44px;font-size:15px}
  .fb-srow__grip{opacity:1;width:28px;height:44px}
  .fb-srow>.uk-btn--icon{opacity:1}
  .fb-node>.uk-btn--icon{opacity:1}
  .fb-node__main{padding:10px 8px}
  .fb-map::before{top:28px;bottom:28px}
  .fb-canvas__bar{padding:12px 12px 8px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .fb-canvas__bar::-webkit-scrollbar{display:none}
  .fb-stage{display:block;padding:0 0 8px;overflow:visible}
  .fb-device,.fb-editor[data-device="phone"] .fb-device{padding:0;border-radius:0;background:var(--surface);box-shadow:0 0 0 1px var(--border);transform:none!important;width:auto!important;height:auto!important}
  .fb-device__chrome,.fb-editor[data-device="phone"] .fb-device__chrome{display:none}
  .fb-device__screen,.fb-editor[data-device="phone"] .fb-device__screen{border-radius:0}
  .fb-device__screen iframe{width:100%}
  .fb-inspector{position:fixed;inset:0;z-index:40;display:block;overflow:auto;background:var(--surface);transform:translateX(100%);visibility:hidden;transition:transform var(--dur-4) var(--ease-out),visibility 0s linear var(--dur-4)}
  .fb-inspector.is-open{transform:none;visibility:visible;transition:transform var(--dur-4) var(--ease-out),visibility 0s}
  .fb-inspector__phonebar{position:sticky;top:0;z-index:3;display:flex;align-items:center;height:52px;padding:0 12px;background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-filter);backdrop-filter:var(--frost-filter);border-bottom:1px solid var(--frost-border)}
  #funnel-form{padding:0 16px calc(32px + env(safe-area-inset-bottom))}
  .fb-ins-head{position:static;margin:0 -16px;padding:14px 16px 12px}
  .fb-item__tools{opacity:1}
  /* Eight columns put a 38px square under a thumb. As many columns as fit at 44px instead: seven at 390, six at
     320, and the squares grow to fill the row rather than shrink below the touch minimum. */
  .fb-icons__grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .fb-phonebar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-filter);backdrop-filter:var(--frost-filter);border-top:1px solid var(--frost-border);--toast-offset:84px}
  .fb-phonebar .uk-seg{max-width:none}
  .fb-phonebar .uk-seg__item[data-value="preview"]{display:flex}
  html.fb-lock{overflow:hidden}
}
@media (max-width:400px){
  .fb-save #funnel-save-state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Room for the draft name and the Example marker: Export keeps its icon and its spoken label. */
  .fb-topbar #funnel-export .uk-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fb-topbar #funnel-export{width:44px;padding:0;justify-content:center}
  .fb-name{min-width:60px}
  .fb-phonebar{gap:6px;padding-left:8px;padding-right:8px}
  .fb-phonebar .uk-seg__item svg{display:none}
}

@media (prefers-reduced-motion:reduce){
  .funnel-card,.funnel-tpl,.funnel-tpl__thumb .funnel-thumb,.fb-device,.fb-srow,.fb-inspector,.fb-swatch__dot{transition:none!important}
  .funnel-card:hover,.funnel-tpl:hover,.funnel-tpl:hover .funnel-tpl__thumb .funnel-thumb{transform:none}
}