/* ==========================================================================
   Ollily builders — shared app chrome
   --------------------------------------------------------------------------
   One design language across Creator, Whitepaper and Newsletter, matching the
   DLS workspace nav (app/shell/shell.css → "APP CHROME v2"): same neutrals, radii,
   type ramp, icon stroke, hover/active states, easing and collapse behaviour.

   Everything is scoped under html.sfb (set by shared/chrome.js before paint).
   That prefix is deliberate: shared/engine.js injects its own <style> at runtime,
   *after* this file's <link>, so matching on specificity — not source order —
   is the only reliable way to win.

   Two builder shells are covered:
     · shared/engine.js  (Newsletter, Whitepaper) — .app > .top + .body(.left/.center/.right)
     · creator.html   (Creator)                — .app(.topbar/.left/.stagewrap/.right)
   ========================================================================== */

html.sfb{
  /* ---- palette: identical to the workspace nav ---- */
  --sfb-ink:var(--sf-c-ink);
  --sfb-text:var(--sf-c-text);
  --sfb-muted:var(--sf-c-muted);
  --sfb-line:var(--sf-c-line);
  --sfb-hover:var(--sf-c-hover);
  --sfb-soft:var(--sf-c-soft);
  --sfb-brand:var(--sf-c-brand);
  --sfb-brand-2:var(--sf-c-brand-2);
  --sfb-maroon:var(--sf-c-maroon);
  --sfb-blush:var(--sf-c-blush);
  --sfb-dark:var(--sf-c-dark);
  --sfb-ease:var(--sf-ease);
  --sfb-dur:.34s;

  /* ---- shell metrics, shared by every builder so the frames line up ---- */
  --sfb-top:56px;
  --sfb-left:268px;
  --sfb-right:312px;

  /* ---- remap each builder's own tokens onto the shared palette. This one
         block re-skins every control the builders draw from these vars. ---- */
  --ui-bg:var(--sf-c-soft);
  --ui-panel:var(--sf-c-surface);
  --ui-panel2:var(--sf-c-hover);
  --ui-line:var(--sf-c-line);
  --ui-txt:var(--sf-c-ink);
  --ui-txt2:var(--sf-c-text);
  --ui-txt3:var(--sf-c-muted);
  --accent:var(--sf-c-dark);
}
html.sfb.lp-off{--sfb-left:0px}
html.sfb.rp-off{--sfb-right:0px}

html.sfb body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---- one stroke recipe for every icon in the chrome ---------------------- */
html.sfb .top svg,
html.sfb .topbar svg,
html.sfb .left svg,
html.sfb .right svg,
html.sfb .zoombar svg,
html.sfb .menu .pop svg,
html.sfb .sfb-btn svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* deliberately-filled marks (logo, swatches, badges) opt back out */
html.sfb .sfb-mark svg,
html.sfb .sfb-mark img,
html.sfb [data-filled] svg,
html.sfb svg[data-filled]{stroke:none}

/* ==========================================================================
   1 · Shell + the collapse animation
   ========================================================================== */
html.sfb .app{grid-template-rows:var(--sfb-top) minmax(0,1fr)}
/* sf-builder's .app is a single column: clamp it, or a dense top bar sets the
   grid's width and pushes the right pane past the viewport edge */
html.sfb[data-sfb-shell="engine"] .app{grid-template-columns:minmax(0,1fr)}
html.sfb .app.preview{grid-template-rows:var(--sfb-top) minmax(0,1fr)}

/* sf-builder: the three panes live in .body. Preview / campaign-tab modes own
   their own track values, so leave those alone. */
html.sfb .app:not(.preview):not(.ctab-off) > .body{
  grid-template-columns:var(--sfb-left) minmax(0,1fr) var(--sfb-right);
  transition:grid-template-columns var(--sfb-dur) var(--sfb-ease);
}
/* creator: the panes are tracks of .app itself */
html.sfb[data-sfb-shell="creator"] .app{
  grid-template-columns:var(--sfb-left) minmax(0,1fr) var(--sfb-right);
  transition:grid-template-columns var(--sfb-dur) var(--sfb-ease);
}
/* Pre-existing engine bug, fixed here because this layer owns the shell:
   preview hides .left/.right with display:none, so .center auto-placed into
   the first (0px) track and the document rendered 0px wide with "Exit preview"
   parked off-screen. newsletter-studio/flows.js already pins #center for its campaign
   panes (.app.ctab-off #center{grid-column:2}) — preview never got the same
   treatment, so it was broken in Newsletter *and* Whitepaper. */
html.sfb .app.preview > .body > .center{grid-column:2}

html.sfb .left,
html.sfb .right{min-width:0;overflow-x:hidden}
html.sfb .left{border-right:1px solid var(--sfb-line)}
html.sfb .right{border-left:1px solid var(--sfb-line)}
/* fade the contents out slightly ahead of the track closing */
html.sfb .left > *,
html.sfb .right > *{transition:opacity .18s var(--sfb-ease)}
html.sfb.lp-off .left > *{opacity:0;pointer-events:none}
html.sfb.rp-off .right > *{opacity:0;pointer-events:none}

/* ==========================================================================
   2 · Top bar
   ========================================================================== */
html.sfb .top,
html.sfb .topbar{
  height:var(--sfb-top);
  gap:6px;
  padding:0 12px 0 10px;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--sfb-line);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}

/* workspace mark + builder identity, mirroring the nav's sidebar header */
html.sfb .sfb-home{
  flex:none;
  display:flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 9px 0 6px;
  border-radius:0;
  color:var(--sfb-ink);
  text-decoration:none;
  transition:background .15s var(--sfb-ease);
}
html.sfb .sfb-home:hover{background:var(--sfb-hover)}
html.sfb .sfb-mark{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:0;
  background:#d0e2ff;
  box-shadow:0 2px 6px -1px rgba(15,98,254,.4),inset 0 0 0 1px rgba(0,45,156,.06);
}
html.sfb .sfb-mark img{width:16px;height:16px;object-fit:contain}
html.sfb .sfb-back{
  display:flex;
  align-items:center;
  color:var(--sfb-muted);
  transition:transform .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .sfb-back svg{width:15px;height:15px}
html.sfb .sfb-home:hover .sfb-back{color:var(--sfb-text);transform:translateX(-2px)}

html.sfb .brand,
html.sfb .tb-brand{
  gap:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--sfb-ink);
}
html.sfb .brand .dot,
html.sfb .tb-brand .dot{
  width:8px;
  height:8px;
  box-shadow:0 0 0 4px rgba(15,98,254,.09);
}
html.sfb .brand small{
  padding-left:8px;
  margin-left:2px;
  border-left:1px solid var(--sfb-line);
  color:var(--sfb-muted);
  font-size:12px;
  font-weight:600;
}
html.sfb .savei,
html.sfb .tb-title{color:var(--sfb-muted);font-size:12px;font-weight:600}
html.sfb .savei .d{box-shadow:0 0 0 3px rgba(31,169,126,.14)}
html.sfb .tb-sep{background:var(--sfb-line);height:22px}

/* nothing in the bar may wrap — these bars get dense on the newsletter */
html.sfb .top,
html.sfb .topbar{flex-wrap:nowrap}
html.sfb .top > *,
html.sfb .topbar > *{flex:0 0 auto}
/* the title is the one element allowed to give way */
html.sfb .brand,
html.sfb .tb-brand{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.sfb .top .sp,
html.sfb .topbar .tb-spacer{flex:1 1 auto;min-width:4px}
html.sfb .brand,
html.sfb .tb-brand,
html.sfb .savei,
html.sfb .tbtn,
html.sfb .tb-btn,
html.sfb .nl-tb,
html.sfb .ctabs button{white-space:nowrap}

/* buttons — ghost by default, one dark pill for the primary action */
html.sfb .tbtn,
html.sfb .tb-btn,
html.sfb .nl-tb{
  height:34px;
  gap:7px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:var(--sfb-text);
  font-size:14px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease),
             border-color .15s var(--sfb-ease),transform .1s var(--sfb-ease);
}
html.sfb .tbtn:hover,
html.sfb .tb-btn:hover,
html.sfb .nl-tb:hover{background:var(--sfb-hover);color:var(--sfb-ink);border-color:transparent}
html.sfb .tbtn:active,
html.sfb .tb-btn:active,
html.sfb .nl-tb:active{transform:translateY(1px)}
html.sfb .tbtn svg,
html.sfb .tb-btn svg,
html.sfb .nl-tb svg{width:17px;height:17px}
html.sfb .tbtn.icon,
html.sfb .tb-btn.icon{width:36px;padding:0;border-radius:0}
html.sfb .tbtn.primary,
html.sfb .tb-btn.pri{
  height:34px;
  padding:0 15px;
  border:0;
  border-radius:999px;
  background:var(--sfb-dark);
  color:#fff;
  font-weight:600;
}
html.sfb .tbtn.primary:hover,
html.sfb .tb-btn.pri:hover{background:#002d9c;opacity:1}
html.sfb .tbtn:disabled,
html.sfb .tb-btn[disabled]{opacity:.35}
html.sfb .tbtn:focus-visible,
html.sfb .tb-btn:focus-visible,
html.sfb .sfb-btn:focus-visible{
  outline:none;
  border-color:var(--sfb-brand);
  box-shadow:0 0 0 3px rgba(15,98,254,.16);
}

/* the panel toggles this layer adds */
html.sfb .sfb-btn{
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sfb-text);
  cursor:pointer;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .sfb-btn:hover{background:var(--sfb-hover);color:var(--sfb-ink)}
html.sfb .sfb-btn svg{width:19px;height:19px}
/* a hidden panel reads as a dimmed icon — no accent chip, same as the nav */
html.sfb .sfb-btn:not(.on){color:var(--sfb-muted)}
html.sfb .sfb-div{flex:none;width:1px;height:22px;background:var(--sfb-line);margin:0 4px}

/* newsletter's Edit / Settings / Review segmented control */
html.sfb .ctabs{
  gap:2px;
  padding:3px;
  border:1px solid var(--sfb-line);
  border-radius:999px;
  background:var(--sfb-soft);
}
html.sfb .ctabs button{
  height:28px;
  padding:0 13px;
  border-radius:999px;
  color:var(--sfb-text);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .ctabs button:hover{background:rgba(0,0,0,.05);color:var(--sfb-ink)}
html.sfb .ctabs button.on{
  background:#fff;
  color:var(--sfb-maroon);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
html.sfb .ctabs .cnum{
  width:16px;
  height:16px;
  background:var(--sfb-line);
  color:var(--sfb-muted);
  font-size:9.5px;
  font-weight:600;
}
html.sfb .ctabs button.on .cnum{background:#0f62fe;color:#fff}

/* ==========================================================================
   3 · Left panel — the nav's section/row language
   ========================================================================== */
html.sfb .side-h,
html.sfb .lsec-h,
html.sfb .isec .ih,
html.sfb .rsec-h,
html.sfb .menu .pop .hd{
  color:var(--sfb-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
html.sfb .side-h{padding:16px 16px 8px}
html.sfb .side-h .mono{font-weight:600;letter-spacing:.04em}

/* creator's left tabs → the nav's segmented pill */
html.sfb .ltabs{
  gap:2px;
  margin:10px 12px 2px;
  padding:3px;
  border:1px solid var(--sfb-line);
  border-radius:0;
  background:var(--sfb-soft);
}
html.sfb .ltab{
  padding:7px 6px;
  border-radius:0;
  color:var(--sfb-text);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .ltab:hover{background:rgba(0,0,0,.05);color:var(--sfb-ink)}
html.sfb .ltab.on{
  background:#fff;
  color:var(--sfb-ink);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}

/* palette / template / asset cards */
html.sfb .pblock,
html.sfb .pcard,
html.sfb .addbtn,
html.sfb .blocklist button,
html.sfb .asset{
  border:1px solid var(--sfb-line);
  border-radius:0;
  background:#fff;
  color:var(--sfb-text);
  transition:background .15s var(--sfb-ease),border-color .15s var(--sfb-ease),
             box-shadow .15s var(--sfb-ease),transform .15s var(--sfb-ease);
}
html.sfb .pblock:hover,
html.sfb .pcard:hover,
html.sfb .addbtn:hover,
html.sfb .blocklist button:hover,
html.sfb .asset:hover{
  background:var(--sfb-hover);
  border-color:#c6c6c6;
  color:var(--sfb-ink);
  transform:translateY(-1px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.28);
}
html.sfb .pblock .pi{
  width:30px;
  height:30px;
  border-radius:0;
  background:var(--sfb-soft);
  color:var(--sfb-text);
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .pblock:hover .pi{background:var(--sfb-blush);color:var(--sfb-brand)}
html.sfb .pblock .pi svg{width:17px;height:17px}
html.sfb .blocklist svg{color:var(--sfb-muted)}

/* document outline rows == nav rows, right down to the active rail */
html.sfb .titem{
  position:relative;
  min-height:38px;
  gap:10px;
  padding:8px 11px;
  border:0;
  border-radius:0;
  color:var(--sfb-text);
  font-size:14px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .titem:hover{background:var(--sfb-hover);color:var(--sfb-ink)}
html.sfb .titem.sel{
  background:var(--sfb-blush);
  color:var(--sfb-maroon);
  font-weight:600;
  border:0;
  box-shadow:none;
}
html.sfb .titem.sel::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  width:3px;
  height:20px;
  border-radius:0;
  background:var(--sfb-brand);
  transform:translateY(-50%);
}
html.sfb .titem .dr{color:var(--sfb-muted)}
html.sfb .titem .tt{
  color:var(--sfb-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
}
html.sfb .titem.sel .tt{color:#4589ff}
html.sfb .titem.drop-above{box-shadow:inset 0 2px 0 var(--sfb-brand)}
html.sfb .titem.drop-below{box-shadow:inset 0 -2px 0 var(--sfb-brand)}

/* ==========================================================================
   4 · Right inspector
   ========================================================================== */
html.sfb .itabs{gap:2px;padding:12px 14px 2px}
html.sfb .itabs button{
  height:32px;
  border-radius:0;
  background:var(--sfb-soft);
  color:var(--sfb-text);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .itabs button:hover{background:#edf5ff;color:var(--sfb-ink)}
html.sfb .itabs button.on{background:var(--sfb-dark);color:#fff;font-weight:600}
html.sfb .isec,
html.sfb .rsec{border-bottom:1px solid var(--sfb-line);padding:15px 14px}
html.sfb .empty{color:var(--sfb-muted);font-size:12px;line-height:1.6}

/* fields — one input treatment across both builders */
html.sfb .fld input,
html.sfb .fld select,
html.sfb .fld textarea,
html.sfb .inp,
html.sfb select.inp,
html.sfb textarea.inp,
html.sfb .srch{
  border:1px solid #e0e0e0;
  border-radius:0;
  background:#fff;
  color:var(--sfb-ink);
  font-size:12px;
  transition:border-color .15s var(--sfb-ease),box-shadow .15s var(--sfb-ease),
             background .15s var(--sfb-ease);
}
html.sfb .fld input:hover,
html.sfb .inp:hover,
html.sfb .srch:hover{border-color:#d0e2ff}
html.sfb .fld input:focus,
html.sfb .fld select:focus,
html.sfb .fld textarea:focus,
html.sfb .inp:focus,
html.sfb .srch:focus{
  outline:none;
  border-color:#0f62fe;
  box-shadow:0 0 0 3px rgba(15,98,254,.10);
}
html.sfb .field > label,
html.sfb .fld > label{color:var(--sfb-text);font-size:12px;font-weight:600}
html.sfb .seg{border:1px solid var(--sfb-line);border-radius:0;background:var(--sfb-soft);padding:2px;gap:2px}
html.sfb .seg button{
  border-radius:0;
  background:transparent;
  color:var(--sfb-text);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .seg button:hover{background:rgba(0,0,0,.05);color:var(--sfb-ink)}
html.sfb .seg button.on{background:var(--sfb-dark);color:#fff;font-weight:600}
html.sfb .iconbtn{
  border:1px solid var(--sfb-line);
  border-radius:0;
  color:var(--sfb-text);
  transition:background .15s var(--sfb-ease),border-color .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .iconbtn:hover{background:var(--sfb-hover);border-color:#c6c6c6;color:var(--sfb-ink)}
html.sfb .iconbtn.on{background:var(--sfb-blush);border-color:#a6c8ff;color:var(--sfb-brand)}
html.sfb .upzone{border:1.5px dashed #e0e0e0;border-radius:0;color:var(--sfb-muted)}
html.sfb .upzone.drag{border-color:var(--sfb-brand);background:var(--sfb-blush);color:var(--sfb-maroon)}

/* ==========================================================================
   5 · Menus, popovers, floats — the nav's fade-and-rise
   ========================================================================== */
html.sfb .menu .pop{
  padding:6px;
  border:1px solid var(--sfb-line);
  border-radius:0;
  box-shadow:0 20px 46px -20px rgba(0,0,0,.45);
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity .16s var(--sfb-ease),transform .16s var(--sfb-ease),visibility .16s var(--sfb-ease);
}
html.sfb .menu.open .pop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
html.sfb .menu .pop button{
  gap:10px;
  padding:9px 10px;
  border-radius:0;
  color:var(--sfb-text);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease);
}
html.sfb .menu .pop button:hover{background:var(--sfb-hover);color:var(--sfb-ink)}
html.sfb .menu .pop hr{border-top:1px solid var(--sfb-line)}
html.sfb .zoombar{
  border:1px solid var(--sfb-line);
  border-radius:0;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.3);
}
html.sfb .zoombar button{border-radius:0;color:var(--sfb-text);transition:background .15s var(--sfb-ease),color .15s var(--sfb-ease)}
html.sfb .zoombar button:hover{background:var(--sfb-hover);color:var(--sfb-ink)}
html.sfb .zoomwrap{border:1px solid var(--sfb-line);border-radius:0;height:34px}
html.sfb .zoomwrap button:hover{background:var(--sfb-hover)}

/* ==========================================================================
   6 · Tooltip — the nav's, fixed-position so panes can't clip it
   ========================================================================== */
.sfb-tip{
  position:fixed;
  z-index:9999;
  padding:6px 10px;
  border-radius:0;
  background:#161616;
  color:#fff;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(-3px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
  transition:opacity .14s cubic-bezier(.4,0,.2,1),transform .14s cubic-bezier(.4,0,.2,1);
}
.sfb-tip.on{opacity:1;transform:none}

/* ==========================================================================
   7 · Scrollbars + selection
   ========================================================================== */
html.sfb .pane::-webkit-scrollbar,
html.sfb .left::-webkit-scrollbar,
html.sfb .right::-webkit-scrollbar,
html.sfb .lbody::-webkit-scrollbar{width:10px;height:10px}
html.sfb .pane::-webkit-scrollbar-thumb,
html.sfb .left::-webkit-scrollbar-thumb,
html.sfb .right::-webkit-scrollbar-thumb,
html.sfb .lbody::-webkit-scrollbar-thumb{
  background:#c6c6c6;
  border-radius:0;
  border:3px solid transparent;
  background-clip:padding-box;
}
html.sfb .pane,
html.sfb .left,
html.sfb .right,
html.sfb .lbody{scrollbar-width:thin;scrollbar-color:#c6c6c6 transparent}
html.sfb ::selection{background:rgba(15,98,254,.18)}

/* ==========================================================================
   8 · Entrance — panels settle in, gently staggered (matches the nav)
   ========================================================================== */
@keyframes sfbIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes sfbInRight{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}
html.sfb.sfb-boot .left > *{animation:sfbIn .4s both var(--sfb-ease);animation-delay:calc(.035s * var(--i,0) + .06s)}
html.sfb.sfb-boot .right > *{animation:sfbInRight .4s both var(--sfb-ease);animation-delay:calc(.035s * var(--i,0) + .1s)}
html.sfb.sfb-boot .top > *,
html.sfb.sfb-boot .topbar > *{animation:sfbIn .36s both var(--sfb-ease);animation-delay:calc(.02s * var(--i,0))}

/* ==========================================================================
   8b · Modals, toasts + the collapsed-pane hairline
   ========================================================================== */
/* a collapsed pane should read as gone, not as a 1px seam */
html.sfb.lp-off .left{border-right-color:transparent}
html.sfb.rp-off .right{border-left-color:transparent}

html.sfb .modal,
html.sfb .sf-copybox{
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
html.sfb .modal .box,
html.sfb .modal .card,
html.sfb .sf-copybox .cb-card{
  border:1px solid var(--sfb-line);
  border-radius:0;
  box-shadow:0 32px 80px -24px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.06);
}
html.sfb .modal h3,
html.sfb .sf-copybox .cb-hd b{
  color:var(--sfb-ink);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.015em;
}
html.sfb .modal p,
html.sfb .modal p.sub,
html.sfb .sf-copybox .cb-p{color:var(--sfb-text);font-size:12px;line-height:1.55}
html.sfb .modal input[type=text]{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:0;
  padding:12px 13px;
}
html.sfb .modal input[type=text]:focus{
  outline:none;
  border-color:#0f62fe;
  box-shadow:0 0 0 3px rgba(15,98,254,.10);
}
html.sfb .modal .tpl{
  border:1px solid var(--sfb-line);
  border-radius:0;
  transition:background .15s var(--sfb-ease),border-color .15s var(--sfb-ease),
             box-shadow .15s var(--sfb-ease),transform .15s var(--sfb-ease);
}
html.sfb .modal .tpl:hover{
  background:var(--sfb-hover);
  border-color:#c6c6c6;
  transform:translateY(-1px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.28);
}
html.sfb .modal .tpl .nm{color:var(--sfb-ink)}
html.sfb .modal .tpl .del:hover{background:var(--sfb-brand);color:#fff}
/* inside a modal the ghost treatment loses its affordance — give it an outline */
html.sfb .modal .tbtn:not(.primary),
html.sfb .modal .tb-btn:not(.pri){
  border-color:var(--sfb-line);
  background:#fff;
}
html.sfb .modal .tbtn:not(.primary):hover,
html.sfb .modal .tb-btn:not(.pri):hover{background:var(--sfb-hover);border-color:#c6c6c6}

html.sfb .toast{
  background:var(--sfb-ink);
  border-radius:0;
  padding:11px 17px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.6);
  transition:opacity .25s var(--sfb-ease),transform .25s var(--sfb-ease);
}

/* ==========================================================================
   9 · Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html.sfb .app,
  html.sfb .app > .body,
  html.sfb .left,
  html.sfb .right,
  html.sfb .left > *,
  html.sfb .right > *,
  html.sfb .tbtn,
  html.sfb .tb-btn,
  html.sfb .sfb-btn,
  html.sfb .titem,
  html.sfb .pblock,
  html.sfb .pcard,
  html.sfb .menu .pop,
  .sfb-tip{transition:none}
  html.sfb.sfb-boot .left > *,
  html.sfb.sfb-boot .right > *,
  html.sfb.sfb-boot .top > *,
  html.sfb.sfb-boot .topbar > *{animation:none}
}

/* ==========================================================================
   10 · Narrow viewports — the panels overlay instead of squeezing the canvas
   ========================================================================== */
@media (max-width:1660px){
  html.sfb .savei{display:none}
}
@media (max-width:1500px){
  html.sfb .brand small,
  html.sfb .tb-title{display:none}
  html.sfb .tbtn,
  html.sfb .tb-btn,
  html.sfb .nl-tb{padding:0 9px;font-size:12px}
}
/* the newsletter bar carries ~13 controls — below this it only fits tightened */
@media (max-width:1400px){
  html.sfb .brand{font-size:0}                 /* keep the brand dot, drop the words */
  html.sfb .brand .dot{margin-right:2px}
  html.sfb .top,
  html.sfb .topbar{gap:3px;padding:0 8px}
  html.sfb .tbtn,
  html.sfb .tb-btn,
  html.sfb .nl-tb{padding:0 8px;gap:6px;font-size:12px}
  html.sfb .tbtn.icon,
  html.sfb .tb-btn.icon,
  html.sfb .sfb-btn{width:32px}
  html.sfb .ctabs button{padding:0 9px}
  html.sfb .sfb-home{padding:0 6px;gap:6px}
  html.sfb{--sfb-left:248px;--sfb-right:292px}
}
@media (max-width:1100px){
  html.sfb{--sfb-left:240px;--sfb-right:280px}
}
@media (max-width:900px){
  html.sfb .brand small,
  html.sfb .savei,
  html.sfb .tb-title{display:none}
  html.sfb .top,
  html.sfb .topbar{padding:0 10px 0 8px;gap:6px}
}
/* Below this the bar genuinely cannot hold its controls on one line. It stops
   being `nowrap` and folds at the spacer instead: every control stays reachable,
   the page stops scrolling sideways, and menus still escape the bar because it
   never gains an overflow context. The grid row auto-sizes to match. */
@media (max-width:820px){
  html.sfb .app,
  html.sfb .app.preview{grid-template-rows:auto minmax(0,1fr)}
  html.sfb .top,
  html.sfb .topbar{
    flex-wrap:wrap;
    height:auto;
    min-height:var(--sfb-top);
    padding:6px 8px;
    row-gap:6px;
  }
  html.sfb .top .sp,
  html.sfb .topbar .tb-spacer{flex:1 0 100%;height:0;min-width:0}
  html.sfb .top > *,
  html.sfb .topbar > *{flex:0 1 auto;min-width:0}
}

/* ==========================================================================
   Phones: the three-pane builder layout cannot fit, so the side panes stop
   being tracks and become overlays. Both start closed (shared/chrome.js), and
   the existing [ / ] toggles — and their buttons — open them exactly as before.
   ========================================================================== */
@media (max-width:820px){
  html.sfb .app:not(.preview):not(.ctab-off) > .body,
  html.sfb .app.ctab-off > .body,
  html.sfb[data-sfb-shell="creator"] .app:not(.preview){grid-template-columns:minmax(0,1fr)}

  html.sfb .pane.left,
  html.sfb .pane.right,
  html.sfb[data-sfb-shell="creator"] .app > .left,
  html.sfb[data-sfb-shell="creator"] .app > .right{
    position:fixed;
    top:var(--sfb-top);
    bottom:0;
    z-index:80;
    width:min(320px,86vw);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
    transition:transform .24s var(--sfb-ease,cubic-bezier(.4,0,.2,1));
  }
  html.sfb .pane.left,
  html.sfb[data-sfb-shell="creator"] .app > .left{left:0;transform:translateX(-101%)}
  html.sfb .pane.right,
  html.sfb[data-sfb-shell="creator"] .app > .right{right:0;transform:translateX(101%)}
  html.sfb:not(.lp-off) .pane.left,
  html.sfb:not(.lp-off)[data-sfb-shell="creator"] .app > .left{transform:none}
  html.sfb:not(.rp-off) .pane.right,
  html.sfb:not(.rp-off)[data-sfb-shell="creator"] .app > .right{transform:none}
  /* the canvas keeps the full width whatever the panes are doing */
  html.sfb .pane.center{grid-column:1}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  html.sfb .pane.left,html.sfb .pane.right{transition:none}
}