/* ========================================================================== Ollily Newsletter Studio — drag-and-drop email editor Four regions: top bar · nav rail · block panel · canvas · properties panel. Tokens mirror the workspace nav so the editor feels like the same product. ========================================================================== */ :root{ --st-ink:var(--sf-c-ink); --st-text:var(--sf-c-text); --st-muted:var(--sf-c-muted); --st-line:var(--sf-c-line); --st-line-soft:var(--sf-c-line-soft); --st-hover:var(--sf-c-hover); --st-soft:var(--sf-c-soft); --st-surface:var(--sf-c-surface); --st-canvas:var(--sf-c-line-soft); --st-accent:var(--sf-c-accent); --st-accent-ink:var(--sf-c-accent-ink); --st-accent-soft:var(--sf-c-accent-soft); --st-brand:var(--sf-c-brand); --st-blush:var(--sf-c-blush); --st-maroon:var(--sf-c-maroon); --st-danger:var(--sf-c-danger); --st-ok:var(--sf-c-ok); --st-ease:var(--sf-ease); --st-top:60px; --st-rail:74px; --st-left:274px; --st-right:312px; } *{box-sizing:border-box} html,body{height:100%;margin:0} body{ font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--st-soft); color:var(--st-ink); overflow:hidden; -webkit-font-smoothing:antialiased; } button,input,select,textarea{font-family:inherit} button{cursor:pointer} /* modals, menus and toasts mount on , outside .st — they need the rule too */ .st svg,.st-modal svg,.st-menu svg,.st-toast svg,.st-ghost svg{ fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .st-modal .st-seg button svg{width:17px;height:17px} .st [data-solid] svg,.st svg[data-solid]{fill:currentColor;stroke:none} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------------------------------------------------------------- shell -- */ .st{ display:grid; grid-template-columns:var(--st-rail) var(--st-left) minmax(0,1fr) var(--st-right); grid-template-rows:var(--st-top) minmax(0,1fr); height:100vh; transition:grid-template-columns .22s var(--st-ease); } .st.lp-off{--st-left:0px} .st.rp-off{--st-right:0px} .st-top{grid-column:1/-1;grid-row:1} .st-rail{grid-column:1;grid-row:2} .st-panel{grid-column:2;grid-row:2} .st-main{grid-column:3;grid-row:2} .st-props{grid-column:4;grid-row:2} /* ------------------------------------------------------------- top bar -- */ .st-top{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:10px; padding:0 14px; background:rgba(255,255,255,.9); border-bottom:1px solid var(--st-line); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); } .st-brand{display:flex;align-items:center;gap:10px;flex:none} .st-mark{ width:30px;height:30px; display:grid;place-items:center; border-radius:0; background:#d0e2ff; box-shadow:0 2px 6px -1px rgba(15,98,254,.4); } .st-mark img{width:17px;height:17px} .st-name{ min-width:60px; max-width:280px; padding:5px 9px; border:1px solid transparent; border-radius:0; background:none; color:var(--st-ink); font-size:16px; font-weight:650; letter-spacing:-.02em; text-overflow:ellipsis; transition:background .15s var(--st-ease),border-color .15s var(--st-ease); } .st-name:hover{background:var(--st-hover)} .st-name:focus{outline:none;background:#fff;border-color:var(--st-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)} .st-sp{flex:1 1 auto;min-width:6px} .st-save{ display:inline-flex; align-items:center; gap:7px; flex:none; color:var(--st-muted); font-size:12px; font-weight:600; white-space:nowrap; transition:color .2s var(--st-ease); } .st-save .d{ width:7px;height:7px; border-radius:50%; background:var(--st-ok); box-shadow:0 0 0 3px rgba(36,161,72,.12); transition:background .2s var(--st-ease),box-shadow .2s var(--st-ease); } .st-save.is-saving .d{background:#d2a106;box-shadow:0 0 0 3px rgba(247,144,9,.14);animation:stPulse 1s ease infinite} .st-save.is-error{color:#a2191f} .st-save.is-error .d{background:var(--st-danger);box-shadow:0 0 0 3px rgba(218,30,40,.14)} @keyframes stPulse{50%{opacity:.35}} .st-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-ink); font-size:14px; font-weight:600; white-space:nowrap; transition:background .15s var(--st-ease),border-color .15s var(--st-ease), box-shadow .15s var(--st-ease),transform .1s var(--st-ease); } .st-btn:hover{background:var(--st-hover);border-color:#c6c6c6} .st-btn:active{transform:translateY(1px)} .st-btn svg{width:16px;height:16px} .st-btn.ghost{border-color:transparent;background:none;color:var(--st-text)} .st-btn.ghost:hover{background:var(--st-hover);color:var(--st-ink)} .st-btn.pri{ border-color:var(--st-accent); background:var(--st-accent); color:#fff; } .st-btn.pri:hover{background:var(--st-accent-ink);border-color:var(--st-accent-ink)} .st-btn.danger{border-color:#ffd7d9;background:#fff;color:#a2191f} .st-btn.danger:hover{background:#fff1f1} .st-btn:disabled{opacity:.4;pointer-events:none} .st-icon{ display:grid; place-items:center; width:34px;height:34px;flex:none; padding:0; border:0; border-radius:0; background:none; color:var(--st-text); transition:background .15s var(--st-ease),color .15s var(--st-ease); } .st-icon svg{width:18px;height:18px} .st-icon:hover{background:var(--st-hover);color:var(--st-ink)} .st-icon:disabled{opacity:.35;pointer-events:none} .st-icon.on{background:var(--st-accent-soft);color:var(--st-accent)} /* split button */ .st-split{display:inline-flex;align-items:stretch;flex:none;border-radius:0;overflow:hidden} .st-split .st-btn{border-radius:0} .st-split .st-btn:first-child{border-radius:0} .st-split .st-caret{ width:32px; padding:0; border-radius:0; border-left:1px solid rgba(255,255,255,.28); justify-content:center; } .st-split .st-caret svg{width:15px;height:15px;transition:transform .2s var(--st-ease)} .st-split .st-caret[aria-expanded="true"] svg{transform:rotate(180deg)} .st-seg{ display:inline-flex; align-items:center; gap:2px; flex:none; padding:3px; border:1px solid var(--st-line); border-radius:0; background:var(--st-soft); } .st-seg button{ display:grid; place-items:center; width:36px;height:28px; border:0; border-radius:0; background:none; color:var(--st-text); transition:background .15s var(--st-ease),color .15s var(--st-ease); } .st-seg button svg{width:17px;height:17px} .st-seg button:hover{background:rgba(0,0,0,.05);color:var(--st-ink)} .st-seg button.on{background:#fff;color:var(--st-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)} .st-size{flex:none;color:var(--st-muted);font-size:12px;font-weight:600;white-space:nowrap} .st-size b{color:var(--st-text);font-weight:600} .st-size.is-heavy b{color:#8e6a00} /* ---------------------------------------------------------------- rail -- */ .st-rail{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; background:var(--st-surface); border-right:1px solid var(--st-line); } .st-railbtn{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; padding:10px 4px 8px; border:0; border-radius:0; background:none; color:var(--st-muted); font-size:12px; font-weight:600; transition:background .15s var(--st-ease),color .15s var(--st-ease); } .st-railbtn svg{width:21px;height:21px} .st-railbtn:hover{background:var(--st-hover);color:var(--st-text)} .st-railbtn.on{background:var(--st-blush);color:var(--st-maroon)} .st-railbtn.on::before{ content:""; position:absolute; left:-8px;top:50%; width:3px;height:26px; border-radius:0; background:var(--st-brand); transform:translateY(-50%); } /* -------------------------------------------------------- block panel -- */ .st-panel{ display:flex; flex-direction:column; min-width:0; background:var(--st-surface); border-right:1px solid var(--st-line); overflow:hidden; } .st-panel-head{padding:16px 16px 10px;border-bottom:1px solid var(--st-line-soft)} .st-panel-head h2{margin:0;font-size:14px;font-weight:650;letter-spacing:-.015em} .st-panel-head p{margin:4px 0 0;font-size:12px;color:var(--st-muted);line-height:1.45} .st-search{ display:flex; align-items:center; gap:8px; height:36px; margin:12px 16px 0; padding:0 11px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-muted); transition:border-color .15s var(--st-ease),box-shadow .15s var(--st-ease); } .st-search:focus-within{border-color:var(--st-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)} .st-search svg{width:16px;height:16px;flex:none} .st-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:12px;color:var(--st-ink)} .st-search input::-webkit-search-cancel-button{display:none} .st-panel-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 22px} .st-panel-body::-webkit-scrollbar{width:10px} .st-panel-body::-webkit-scrollbar-thumb{background:#c6c6c6;border-radius:0;border:3px solid transparent;background-clip:padding-box} .st-gh{ margin:16px 0 8px; color:var(--st-muted); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .st-gh:first-child{margin-top:2px} .st-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .st-bcard{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:78px; padding:12px 8px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-text); font-size:12px; font-weight:600; text-align:center; cursor:grab; transition:background .15s var(--st-ease),border-color .15s var(--st-ease), box-shadow .15s var(--st-ease),transform .15s var(--st-ease),color .15s var(--st-ease); } .st-bcard svg{width:19px;height:19px;color:var(--st-muted);transition:color .15s var(--st-ease)} .st-bcard:hover{ background:var(--st-soft); border-color:#a6c8ff; color:var(--st-ink); transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(0,0,0,.4); } .st-bcard:hover svg{color:var(--st-accent)} .st-bcard:active{cursor:grabbing;transform:translateY(0)} .st-bcard.is-dragging{opacity:.4} /* section cards */ .st-scard{ display:flex; flex-direction:column; gap:0; margin-bottom:10px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); overflow:hidden; cursor:grab; transition:border-color .15s var(--st-ease),box-shadow .15s var(--st-ease),transform .15s var(--st-ease); } .st-scard:hover{border-color:#a6c8ff;transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(0,0,0,.42)} .st-scard-art{height:94px;background:var(--st-soft);border-bottom:1px solid var(--st-line-soft)} .st-scard-art img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .st-scard-name{padding:9px 12px;font-size:12px;font-weight:600;color:var(--st-ink)} .st-panelfade{animation:stFade .2s var(--st-ease) both} @keyframes stFade{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}} /* ------------------------------------------------------------- canvas -- */ .st-main{ position:relative; display:flex; flex-direction:column; min-width:0; background:var(--st-canvas); overflow:hidden; } .st-scroll{flex:1;min-height:0;overflow:auto;padding:26px 20px 120px} .st-scroll::-webkit-scrollbar{width:12px;height:12px} .st-scroll::-webkit-scrollbar-thumb{background:#a6c8ff;border-radius:0;border:3px solid transparent;background-clip:padding-box} .st-stage{margin:0 auto;transform-origin:top center;transition:width .2s var(--st-ease)} /* campaign meta */ /* ---- email details ------------------------------------------------------- A summary card, not a form. It says what the email is and what is missing; the properties panel does the editing. Collapsed it costs one row of canvas. */ .st-meta{ margin:0 auto 18px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; transition:box-shadow var(--st-t-fast,.15s) var(--st-ease); } .st-meta:hover{box-shadow:0 2px 8px -2px rgba(0,0,0,.1)} .st-meta-h{ display:flex;align-items:center;gap:10px; width:100%;padding:7px 13px; border:0;background:none;text-align:left; } .st-meta-h:hover{background:var(--st-hover)} .st-meta-h:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px} .st-meta-h .chev{ flex:none;display:grid;place-items:center; width:20px;height:20px;color:var(--st-muted); } .st-meta-h .chev svg{width:15px;height:15px;transition:transform .26s var(--st-ease)} .st-meta.is-open .st-meta-h .chev svg{transform:rotate(90deg)} .st-meta-h .ttl{flex:none;color:var(--st-ink);font-size:12px;font-weight:650;letter-spacing:-.01em} .st-meta-h .sum{ flex:1;min-width:0; color:var(--st-muted);font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:1;transition:opacity .2s var(--st-ease); } /* expanded, the fields below say it better than the one-liner does */ .st-meta.is-open .st-meta-h .sum{opacity:0} /* Status as a word and a dot. Three pill variants next to five bordered cells was two competing systems in 600px; the dot carries the severity and the word carries the count. */ .st-meta-badge{ flex:none;display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600;white-space:nowrap; color:var(--st-muted); } .st-meta-badge i{width:6px;height:6px;border-radius:50%;background:currentColor} .st-meta-badge.ok{color:var(--st-ok)} .st-meta-badge.warn{color:var(--sf-c-warn)} .st-meta-badge.err{color:var(--sf-c-danger-ink)} /* the same save state as the top bar, in one word, next to what was edited */ .st-meta-save{ flex:none;color:var(--st-muted);font-size:12px;font-weight:500; white-space:nowrap; } .st-meta-save.is-error{color:var(--sf-c-danger-ink);font-weight:600} .st-meta-b{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .28s var(--st-ease); } .st-meta.is-open .st-meta-b{grid-template-rows:1fr} .st-meta-b > .st-meta-g{overflow:hidden;min-height:0} /* Two columns, no rules. The cells used to be separated by a 1px grid drawn with background bleed-through — five boxes inside a box. Whitespace and alignment do the same job without the ink. */ /* The right column carries the subject, which is the longest line anyone writes here, so it gets the wider half rather than an even split that truncated it while the sender column sat half empty. */ .st-meta-g{padding:0 14px 0 30px} /* Vertical padding only once open. On the collapsed 0fr row it survived the clip and left the header 9px taller than it was before any of this. */ .st-meta.is-open .st-meta-g{padding-top:1px;padding-bottom:7px} /* One hairline between the two groups. The previous grid drew a border around every field; a single rule says the same thing five times more quietly. */ .st-meta-sec + .st-meta-sec{ margin-top:7px;padding-top:7px; border-top:1px solid var(--st-line-soft); } .st-meta-f{ display:grid;grid-template-columns:92px minmax(0,1fr); align-items:baseline;gap:10px; width:100%;min-width:0;padding:2px 4px 2px 6px; margin-left:-6px; border:0;border-left:2px solid transparent; background:none;text-align:left; border-radius:0; transition:background var(--st-t-fast,.15s) var(--st-ease), border-color var(--st-t-fast,.15s) var(--st-ease); } .st-meta-f:hover{background:var(--st-hover)} .st-meta-f:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px} /* Selection is a bar and a tint, matching how a selected block reads, rather than a filled cell that turns the row into another box. */ .st-meta-f.is-sel{background:var(--st-blush);border-left-color:var(--st-maroon)} /* The label carries the emphasis and the value sits beside it, so the eye runs down one column of names rather than hunting for them above each value. */ .st-meta-f .k{ color:var(--st-ink);font-size:12px;font-weight:600; letter-spacing:0;text-transform:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .st-meta-f.is-sel .k{color:var(--st-maroon)} /* The dot follows the value rather than sitting in a column of its own, so it reads as belonging to that field instead of floating in the gutter. */ .st-meta-f .v{ display:flex;align-items:center;gap:7px;min-width:0; color:var(--st-ink);font-size:12px;line-height:1.4; } .st-meta-f .v .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* "Not set" is a state, not content — it recedes, and colours up only when the thing that is missing is actually required. */ .st-meta-f.is-empty .v{color:var(--st-muted)} .st-meta-f.is-empty.is-err .v{color:var(--sf-c-danger-ink)} .st-meta-f.is-empty.is-warn .v{color:var(--sf-c-warn)} .st-meta-dot{ flex:none; width:6px;height:6px;border-radius:50%; background:var(--sf-c-warn); } .st-meta-dot.err{background:var(--st-danger)} /* No viewport breakpoint here on purpose. This card tracks the email width, not the window — the canvas scrolls sideways instead of reflowing — so a media query stacked every row at 640px while the card was still 558px wide, for no gain and 105px of extra height. Narrow means the mobile device mode, where 380px still fits a label and a truncated value with its tooltip. */ .st-meta-f .k{min-width:0} /* the email itself */ .st-email{ position:relative; margin:0 auto; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1),0 24px 60px -30px rgba(0,0,0,.45); transition:box-shadow .2s var(--st-ease); } .st-emailinner{position:relative} .st-blk{position:relative;outline:0} .st-blk[data-hidden="1"]{display:none} .st.show-hidden .st-blk[data-hidden="1"]{display:block;opacity:.4} .st-blk::after{ content:""; position:absolute; inset:0; pointer-events:none; border:1.5px solid transparent; border-radius:0; transition:border-color .12s var(--st-ease); } /* Hover shows the innermost block only — an ancestor never draws a second outline around the thing you are actually pointing at. */ .st-blk:hover::after{border-color:rgba(124,58,237,.28)} .st-blk:has(.st-blk:hover)::after{border-color:transparent} /* One purple outline: the selected element, and nothing else. */ .st-blk.is-sel::after{border-color:var(--st-flex);box-shadow:0 0 0 3px var(--st-flex-soft)} .st-blk:has(.st-blk.is-sel):not(.is-sel)::after{border-color:transparent;box-shadow:none} /* Keyboard focus on a block. Arrowing the canvas selects as it goes, so this usually coincides with the selection outline — but focus must never be invisible, and it lands here before anything is selected. */ .st-blk:focus{outline:none} .st-blk:focus-visible::after{border-color:var(--st-accent);box-shadow:0 0 0 3px var(--st-accent-soft)} .st-blk [contenteditable]{outline:0} .st-blk [contenteditable]:focus{ box-shadow:0 0 0 2px rgba(15,98,254,.28); border-radius:0; } /* hover toolbar */ .st-bar{ position:absolute; top:-15px;right:8px; z-index:8; display:flex; align-items:center; gap:1px; padding:3px; border:1px solid var(--st-line); border-radius:0; background:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.4); opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity .15s var(--st-ease),transform .15s var(--st-ease); } .st-blk:hover > .st-bar,.st-blk.is-sel > .st-bar{opacity:1;transform:none;pointer-events:auto} /* an ancestor keeps its handles hidden while the pointer is inside a child */ .st-blk:has(.st-blk:hover) > .st-bar{opacity:0;pointer-events:none} .st-blk:has(.st-blk.is-sel):not(.is-sel) > .st-bar{opacity:0;pointer-events:none} .st-bar button{ display:grid;place-items:center; width:26px;height:26px; border:0;border-radius:0; background:none; color:var(--st-text); transition:background .13s var(--st-ease),color .13s var(--st-ease); } .st-bar button svg{width:14px;height:14px} .st-bar button:hover{background:var(--st-hover);color:var(--st-ink)} .st-bar button.danger:hover{background:#fff1f1;color:#a2191f} .st-bar .sep{width:1px;height:16px;margin:0 2px;background:var(--st-line)} .st-bar .drag{cursor:grab} /* drop indicator */ .st-drop{ height:0; position:relative; transition:height .15s var(--st-ease); } .st-drop.on{height:34px} .st-drop.on::before{ content:""; position:absolute; left:10px;right:10px;top:50%; height:3px; border-radius:0; background:var(--st-accent); transform:translateY(-50%); animation:stPop .18s var(--st-ease) both; } .st-drop.on::after{ content:attr(data-label); position:absolute; left:50%;top:50%; padding:2px 9px; border-radius:999px; background:var(--st-accent); color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transform:translate(-50%,-50%); } @keyframes stPop{from{transform:translateY(-50%) scaleX(.7);opacity:0}to{transform:translateY(-50%) scaleX(1);opacity:1}} .st-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:280px; margin:18px; padding:36px 24px; border:2px dashed #c6c6c6; border-radius:0; color:var(--st-muted); text-align:center; transition:border-color .15s var(--st-ease),background .15s var(--st-ease); } .st-empty.is-over{border-color:var(--st-accent);background:var(--st-accent-soft)} .st-empty svg{width:34px;height:34px;color:#a8a8a8} .st-empty strong{color:var(--st-ink);font-size:14px;font-weight:650} .st-empty p{margin:0;max-width:34ch;font-size:12px;line-height:1.55} /* zoom + canvas footer */ .st-zoom{ position:absolute; left:50%;bottom:18px; z-index:20; display:flex; align-items:center; gap:2px; padding:5px; border:1px solid var(--st-line); border-radius:0; background:rgba(255,255,255,.95); box-shadow:0 10px 26px -12px rgba(0,0,0,.4); transform:translateX(-50%); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .st-zoom button{ display:grid;place-items:center; width:30px;height:28px; border:0;border-radius:0; background:none;color:var(--st-text); transition:background .14s var(--st-ease); } .st-zoom button:hover{background:var(--st-hover);color:var(--st-ink)} .st-zoom svg{width:15px;height:15px} .st-zoom .lbl{ width:auto;padding:0 8px; font-size:12px;font-weight:600; font-variant-numeric:tabular-nums; } .st-zoom .sep{width:1px;height:16px;margin:0 3px;background:var(--st-line)} /* ---------------------------------------------------- properties panel -- */ .st-props{ display:flex; flex-direction:column; min-width:0; background:var(--st-surface); border-left:1px solid var(--st-line); overflow:hidden; } .st-props-head{ display:flex; align-items:center; gap:10px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--st-line-soft); } .st-props-head h2{flex:1;min-width:0;margin:0;font-size:14px;font-weight:650;letter-spacing:-.01em} .st-props-head .tag{ padding:2px 8px; border-radius:0; background:var(--st-accent-soft); color:var(--st-accent-ink); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .st-props-body{flex:1;min-height:0;overflow-y:auto;padding-bottom:30px} .st-props-body::-webkit-scrollbar{width:10px} .st-props-body::-webkit-scrollbar-thumb{background:#c6c6c6;border-radius:0;border:3px solid transparent;background-clip:padding-box} .st-group{border-bottom:1px solid var(--st-line-soft)} .st-group-h{ display:flex; align-items:center; gap:8px; width:100%; padding:13px 16px; border:0; background:none; color:var(--st-ink); font-size:12px; font-weight:650; text-align:left; transition:background .15s var(--st-ease); } .st-group-h:hover{background:var(--st-hover)} .st-group-h .cv{margin-left:auto;color:var(--st-muted);transition:transform .2s var(--st-ease)} .st-group-h .cv svg{width:15px;height:15px} .st-group.open .st-group-h .cv{transform:rotate(180deg)} .st-group-b{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s var(--st-ease); } .st-group.open .st-group-b{grid-template-rows:1fr} .st-group-b > div{overflow:hidden;min-height:0} .st-group-in{padding:2px 16px 16px;display:flex;flex-direction:column;gap:12px} .st-f{display:flex;flex-direction:column;gap:6px} .st-f > label{color:var(--st-text);font-size:12px;font-weight:600} .st-f-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .st-in,.st-sel,.st-ta{ width:100%; height:34px; padding:0 10px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-ink); font-size:12px; transition:border-color .15s var(--st-ease),box-shadow .15s var(--st-ease); } .st-ta{height:auto;padding:9px 10px;line-height:1.5;resize:vertical;min-height:72px} .st-sel{appearance:none;padding-right:26px; 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='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat;background-position:right 8px center;background-size:14px; } .st-in:focus,.st-sel:focus,.st-ta:focus{ outline:none;border-color:var(--st-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12); } .st-color{display:flex;align-items:center;gap:8px} .st-color input[type=color]{ width:34px;height:34px;flex:none; padding:0;border:1px solid var(--st-line);border-radius:0; background:none;cursor:pointer; } .st-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px} .st-color input[type=color]::-webkit-color-swatch{border:0;border-radius:0} .st-color .st-in{flex:1;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;text-transform:uppercase} .st-color .clear{flex:none;width:30px;height:30px;border:0;border-radius:0;background:none;color:var(--st-muted)} .st-color .clear:hover{background:var(--st-hover);color:var(--st-ink)} .st-color .clear svg{width:14px;height:14px} .st-choice{display:flex;gap:2px;padding:3px;border:1px solid var(--st-line);border-radius:0;background:var(--st-soft)} .st-choice button{ flex:1; display:grid;place-items:center; height:28px; border:0;border-radius:0; background:none;color:var(--st-text); font-size:12px;font-weight:600; transition:background .14s var(--st-ease),color .14s var(--st-ease); } .st-choice button svg{width:15px;height:15px} .st-choice button:hover{background:rgba(0,0,0,.05);color:var(--st-ink)} .st-choice button.on{background:#fff;color:var(--st-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)} .st-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px} .st-toggle span{color:var(--st-text);font-size:12px;font-weight:600} .st-sw{ position:relative; width:38px;height:22px;flex:none; border:0;border-radius:999px; background:#d0e2ff; transition:background .18s var(--st-ease); } .st-sw::after{ content:""; position:absolute;left:3px;top:3px; width:16px;height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s var(--st-ease); } .st-sw.on{background:var(--st-accent)} .st-sw.on::after{transform:translateX(16px)} .st-drop-img{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; border:1.5px dashed var(--st-line); border-radius:0; background:var(--st-soft); color:var(--st-muted); font-size:12px; text-align:center; transition:border-color .15s var(--st-ease),background .15s var(--st-ease); } .st-drop-img.is-over{border-color:var(--st-accent);background:var(--st-accent-soft)} .st-drop-img svg{width:22px;height:22px;color:var(--st-accent)} .st-drop-img b{color:var(--st-ink);font-size:12px} .st-thumb{ position:relative; border:1px solid var(--st-line); border-radius:0; overflow:hidden; background:var(--st-soft); } .st-thumb img{display:block;width:100%;max-height:150px;object-fit:cover} .st-hint{color:var(--st-muted);font-size:12px;line-height:1.45} .st-props-empty{ display:flex;flex-direction:column;align-items:center; padding:56px 26px;text-align:center;color:var(--st-muted); } .st-props-empty svg{width:30px;height:30px;margin-bottom:12px;color:#a8a8a8} .st-props-empty strong{color:var(--st-ink);font-size:14px;font-weight:650} .st-props-empty p{margin:6px 0 0;font-size:12px;line-height:1.55} /* --------------------------------------------------------------- modal -- */ .st-modal{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; padding:clamp(12px,4vh,44px); background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); opacity:0;transition:opacity .18s var(--st-ease); } .st-modal.open{opacity:1} .st-card{ display:flex;flex-direction:column; width:min(620px,100%);max-height:100%; border:1px solid var(--st-line);border-radius:0; background:#fff; box-shadow:0 36px 90px -28px rgba(0,0,0,.55); transform:translateY(10px) scale(.99); transition:transform .2s var(--st-ease); } .st-modal.open .st-card{transform:none} .st-card.wide{width:min(1080px,100%)} .st-card-h{display:flex;align-items:flex-start;gap:14px;padding:18px 16px 14px 22px;border-bottom:1px solid var(--st-line)} .st-card-h h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.015em} .st-card-h p{margin:4px 0 0;font-size:12px;color:var(--st-text);line-height:1.5} .st-card-h > div{flex:1;min-width:0} .st-card-b{flex:1;min-height:0;overflow:auto;padding:20px 22px} .st-card-f{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--st-line)} .st-card-f .sp{flex:1} /* preview */ .st-pv-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--st-line);background:var(--st-soft)} .st-pv-stage{ flex:1;min-height:0;overflow:auto; /* align-items:flex-start, not stretch: a stretched child would be forced to the stage's height and the email below it would have nowhere to go. */ display:flex;justify-content:center;align-items:flex-start; padding:26px; background:var(--st-canvas); transition:background .2s var(--st-ease); } /* Carries the zoom. A transform does not affect layout, so the script also sets an explicit width and height here — otherwise the stage would scroll as though the frame were still at 100%. */ .st-pv-scaler{flex:none} .st-pv-stage.dark{background:#001141} .st-pv-frame{ border:1px solid rgba(0,0,0,.12); border-radius:0; background:#fff; box-shadow:0 24px 60px -30px rgba(0,0,0,.6); overflow:hidden; transition:width .25s var(--st-ease); } .st-pv-stage.dark .st-pv-frame{border-color:rgba(255,255,255,.12)} .st-pv-frame iframe{display:block;width:100%;border:0;background:#fff} .st-pv-inbox{ display:flex;align-items:center;gap:10px; padding:12px 16px; border-bottom:1px solid var(--st-line-soft); background:var(--st-soft); } .st-pv-stage.dark .st-pv-inbox{background:#001d6c;border-color:rgba(255,255,255,.08)} .st-pv-av{ width:34px;height:34px;flex:none;display:grid;place-items:center; border-radius:50%; background:#002d9c; color:#fff;font-size:12px;font-weight:600; } .st-pv-meta{min-width:0;flex:1} .st-pv-meta b{display:block;font-size:12px;color:var(--st-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-pv-meta small{display:block;margin-top:2px;font-size:12px;color:var(--st-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-pv-stage.dark .st-pv-meta b{color:#edf5ff} .st-pv-stage.dark .st-pv-meta small{color:#8d8d8d} /* chips (send test) */ .st-chips{ display:flex;flex-wrap:wrap;gap:6px; min-height:44px;padding:7px 8px; border:1px solid var(--st-line);border-radius:0;background:#fff; transition:border-color .15s var(--st-ease),box-shadow .15s var(--st-ease); } .st-chips:focus-within{border-color:var(--st-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)} .st-chip{ display:inline-flex;align-items:center;gap:6px; height:28px;padding:0 6px 0 10px; border-radius:999px; background:var(--st-accent-soft); color:var(--st-accent-ink); font-size:12px;font-weight:600; } .st-chip.bad{background:#fff1f1;color:#a2191f} .st-chip button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit} .st-chip button:hover{background:rgba(0,0,0,.1)} .st-chip svg{width:12px;height:12px} .st-chips input{flex:1;min-width:120px;height:28px;border:0;outline:0;background:none;font-size:12px;color:var(--st-ink)} /* validation list */ .st-checks{display:flex;flex-direction:column;gap:8px} .st-check{ display:flex;align-items:flex-start;gap:11px; padding:11px 13px; border:1px solid var(--st-line);border-radius:0; background:var(--st-surface); } .st-check.err{border-color:#ffd7d9;background:#fff1f1} .st-check.warn{border-color:#f1c21b;background:#fcf4d6} .st-check.ok{border-color:#a7f0ba;background:#defbe6} .st-check-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%} .st-check.err .st-check-ic{color:var(--st-danger)} .st-check.warn .st-check-ic{color:#8e6a00} .st-check.ok .st-check-ic{color:var(--st-ok)} .st-check-ic svg{width:16px;height:16px} .st-check-t{flex:1;min-width:0} .st-check-t b{display:block;font-size:12px;font-weight:650;color:var(--st-ink)} .st-check-t span{display:block;margin-top:2px;font-size:12px;color:var(--st-text);line-height:1.5} .st-check-go{flex:none;border:0;background:none;color:var(--st-accent);font-size:12px;font-weight:600} .st-check-go:hover{text-decoration:underline} /* menus */ .st-menu{ position:fixed;z-index:300; min-width:210px;padding:6px; border:1px solid var(--st-line);border-radius:0;background:#fff; box-shadow:0 22px 48px -18px rgba(0,0,0,.42); opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top right; transition:opacity .16s var(--st-ease),transform .16s var(--st-ease); } .st-menu.open{opacity:1;transform:none} .st-menu button{ display:flex;align-items:center;gap:10px;width:100%; padding:9px 10px;border:0;border-radius:0;background:none; color:var(--st-ink);font-size:12px;font-weight:600;text-align:left; transition:background .14s var(--st-ease); } .st-menu button:hover{background:var(--st-hover)} .st-menu button.danger{color:#a2191f} .st-menu button.danger:hover{background:#fff1f1} .st-menu button svg{width:16px;height:16px;color:var(--st-muted)} .st-menu button.danger svg{color:var(--st-danger)} .st-menu .sep{height:1px;margin:5px 4px;background:var(--st-line-soft)} /* the heading names what the menu acts on — read as a word, not a label */ .st-menu .hd{padding:8px 10px 7px;color:var(--st-muted);font-size:12px;font-weight:650;letter-spacing:-.01em} /* toast */ .st-toast{ position:fixed;left:50%;bottom:26px;z-index:400; display:flex;align-items:center;gap:10px; padding:11px 18px;border-radius:999px; background:var(--st-ink);color:#fff; font-size:12px;font-weight:600;white-space:nowrap; box-shadow:0 20px 44px -16px rgba(0,0,0,.62); opacity:0;pointer-events:none;transform:translate(-50%,14px); transition:opacity .24s var(--st-ease),transform .24s var(--st-ease); } .st-toast.on{opacity:1;transform:translate(-50%,0)} .st-toast .ic{display:flex;color:#6fdc8c} .st-toast.bad .ic{color:#ffb3b8} .st-toast .ic svg{width:16px;height:16px;stroke-width:2.4} /* skeleton */ /* the shimmer itself comes from /design-system/base.css */ .st-sk{display:block;border-radius:0} .st-boot{display:flex;flex-direction:column;gap:14px;width:min(600px,100%);margin:0 auto} .st-boot .a{height:120px} .st-boot .b{height:240px} .st-boot .c{height:70px;width:60%} /* drag ghost */ .st-ghost{ position:fixed;z-index:500;pointer-events:none; padding:9px 14px;border-radius:0; background:var(--st-ink);color:#fff; font-size:12px;font-weight:600; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); opacity:0;transform:translate(-50%,-50%) scale(.96); transition:opacity .12s var(--st-ease),transform .12s var(--st-ease); } .st-ghost.on{opacity:1;transform:translate(-50%,-50%) scale(1)} /* mobile panel switcher */ .st-switch{display:none} /* ------------------------------------------------------------ responsive */ @media (max-width:1400px){ :root{--st-left:250px;--st-right:294px} } @media (max-width:1180px){ /* panels slide over the canvas instead of squeezing it */ .st{grid-template-columns:var(--st-rail) minmax(0,1fr)} .st-panel,.st-props{ position:fixed; top:var(--st-top);bottom:0; z-index:90; width:300px; box-shadow:0 24px 60px -20px rgba(0,0,0,.4); transition:transform .24s var(--st-ease); } .st-panel{left:var(--st-rail);transform:translateX(calc(-100% - var(--st-rail)))} .st-props{right:0;transform:translateX(100%)} .st.lp-open .st-panel{transform:none} .st.rp-open .st-props{transform:none} .st-main{grid-column:2;grid-row:2} .st-scrim{ position:fixed;inset:var(--st-top) 0 0;z-index:80; background:rgba(0,0,0,.32); opacity:0;pointer-events:none; transition:opacity .2s var(--st-ease); } .st.lp-open .st-scrim,.st.rp-open .st-scrim{opacity:1;pointer-events:auto} } @media (max-width:860px){ :root{--st-top:56px;--st-rail:0px} .st-rail{display:none} .st-panel{left:0;transform:translateX(-100%)} .st-panel,.st-props{width:min(320px,86vw)} .st-main{grid-column:1/-1} .st{grid-template-columns:minmax(0,1fr)} .st-top{gap:6px;padding:0 10px;overflow-x:auto;scrollbar-width:none} .st-top::-webkit-scrollbar{display:none} .st-top > *{flex:none} .st-name{font-size:14px;max-width:150px} .st-save span{display:none} .st-scroll{padding:16px 12px 130px} /* one clear way back to blocks / canvas / settings */ .st-switch{ position:fixed;left:12px;right:12px;bottom:12px;z-index:95; display:flex;gap:3px; padding:4px; border:1px solid var(--st-line);border-radius:0; background:rgba(255,255,255,.96); box-shadow:0 14px 34px -14px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .st-switch button{ flex:1; display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 4px 7px; border:0;border-radius:0;background:none; color:var(--st-muted);font-size:12px;font-weight:600; transition:background .15s var(--st-ease),color .15s var(--st-ease); } .st-switch button svg{width:19px;height:19px} .st-switch button.on{background:var(--st-blush);color:var(--st-maroon)} .st-zoom{bottom:80px} .st-card.wide{width:100%} .st-pv-stage{padding:14px} } @media (max-width:620px){ .st-meta{border-radius:0} .st-card-b{padding:16px} .st-card-f{flex-wrap:wrap} .st-toast{left:12px;right:12px;transform:translateY(14px);white-space:normal} .st-toast.on{transform:none} } /* --------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion:reduce){ .st,.st-panel,.st-props,.st-bcard,.st-scard,.st-group-b,.st-group-h .cv, .st-drop,.st-bar,.st-toast,.st-modal,.st-card,.st-sw,.st-sw::after, .st-pv-frame,.st-ghost,.st-stage,.st-menu{transition:none} .st-sk{animation:none} .st-drop.on::before{animation:none} .st-panelfade{animation:none} .st-save.is-saving .d{animation:none} } /* ========================================================================== COLUMNS — editor chrome Everything here is scoped to canvas-only classes (.st-*), never to the .sfc-* markup that render() emits, so previews and exports stay clean. ========================================================================== */ :root{ --st-flex:#8a3ffc; /* the Flex accent from the reference */ --st-flex-soft:rgba(124,58,237,.09); } /* selected columns block: purple outline + dashed guides */ .st-blk.is-sel > div > .st-flexrow{border-radius:0} /* the shared .st-blk.is-sel rule already draws the one purple outline */ .st-flexrow{position:relative} /* the column cell */ .st-area{position:relative;transition:background var(--st-t-fast,.15s) var(--st-ease),box-shadow var(--st-t-fast,.15s) var(--st-ease)} .st-area::after{ content:""; position:absolute; inset:0; pointer-events:none; border:1px dashed transparent; border-radius:0; transition:border-color .12s var(--st-ease),background .12s var(--st-ease); } /* Areas stay invisible until relevant: the parent Flex is selected, the area itself is selected, or something is being dragged over it. */ .st-blk.is-sel .st-area::after{border-color:rgba(124,58,237,.22)} .st-area:hover::after{border-color:rgba(124,58,237,.3)} .st-area:has(.st-blk:hover)::after{border-color:transparent} .st-area.is-selarea::after{border-color:var(--st-flex);border-style:solid;background:var(--st-flex-soft)} .st-area.is-over::after{border-color:var(--st-flex);border-style:dashed;background:rgba(124,58,237,.12)} /* a selected child hints its parent Flex with a tint, not another outline */ .st-blk:has(> div > .st-flexrow .st-blk.is-sel){background:rgba(124,58,237,.035)} /* empty column placeholder */ /* one minimal drop zone per empty area — quiet until it is useful */ .st-areaempty{ display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px; border:1.5px dashed transparent; border-radius:0; color:transparent; font-size:12px; font-weight:600; text-align:center; transition:color .15s var(--st-ease),border-color .15s var(--st-ease),background .15s var(--st-ease); } .st-blk.is-sel .st-areaempty, .st-area:hover .st-areaempty, body.st-dragging .st-areaempty{border-color:rgba(124,58,237,.38);color:#4589ff} body.st-dragging .st-area.is-over .st-areaempty{border-color:var(--st-flex);background:rgba(124,58,237,.1);color:var(--st-flex)} /* the divider between two columns */ .st-flexdiv{ position:absolute; top:0;bottom:0; width:0; cursor:col-resize; touch-action:none; z-index:3; } .st-flexdiv::before{ content:""; position:absolute; left:50%;top:-4px;bottom:-4px; width:0; border-left:2px dashed var(--st-flex); opacity:0; transform:translateX(-50%); transition:opacity .15s var(--st-ease); } .st-flexrow:hover .st-flexdiv::before, .st-blk.is-sel .st-flexdiv::before{opacity:.5} .st-flexdiv:hover::before, .st-flexdiv:focus-visible::before, .st-flexdiv.is-dragging::before{opacity:1} .st-flexdiv-h{ position:absolute; left:50%;top:50%; display:grid; place-items:center; width:16px;height:46px; border:1px solid var(--st-flex); border-radius:0; background:#edf5ff; color:var(--st-flex); transform:translate(-50%,-50%); opacity:0; transition:opacity .15s var(--st-ease),transform .15s var(--st-ease); } .st-flexdiv-h .lucide{width:12px;height:12px} .st-flexrow:hover .st-flexdiv-h, .st-blk.is-sel .st-flexdiv-h, .st-flexdiv:focus-visible .st-flexdiv-h, .st-flexdiv.is-dragging .st-flexdiv-h{opacity:1} .st-flexdiv.is-dragging .st-flexdiv-h{transform:translate(-50%,-50%) scale(1.06)} .st-flexdiv:focus-visible{outline:none} .st-flexdiv:focus-visible .st-flexdiv-h{box-shadow:0 0 0 3px var(--st-flex-soft)} body.st-resizing{cursor:col-resize;user-select:none} /* live size readout while dragging */ .st-sizetip{ position:fixed; z-index:600; padding:5px 10px; border-radius:0; background:var(--st-flex); color:#fff; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-50%,0); transition:opacity .12s var(--st-ease); } .st-sizetip.on{opacity:1} /* nested drop zones read the same as top-level ones, in the columns accent */ .st-area .st-drop.on::before{background:var(--st-flex)} .st-area .st-drop.on::after{background:var(--st-flex)} /* ---- panel controls ------------------------------------------------------ */ .st-areacounts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .st-areacount{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px 7px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-text); font-size:12px; font-weight:600; transition:border-color var(--st-t-fast,.15s) var(--st-ease),background var(--st-t-fast,.15s) var(--st-ease),color var(--st-t-fast,.15s) var(--st-ease); } .st-areacount-art{display:flex;gap:2px;width:30px;height:16px} .st-areacount-art i{flex:1;border-radius:0;background:currentColor;opacity:.32} .st-areacount:hover{border-color:#c6c6c6;background:var(--st-hover)} .st-areacount.on{border-color:var(--st-flex);background:var(--st-flex-soft);color:var(--st-flex)} .st-areacount.on .st-areacount-art i{opacity:.85} .st-areatabs{display:flex;gap:5px;flex-wrap:wrap} .st-areatab{ display:flex; flex-direction:column; align-items:center; min-width:52px; padding:6px 9px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-text); font-size:12px; font-weight:600; transition:border-color var(--st-t-fast,.15s) var(--st-ease),background var(--st-t-fast,.15s) var(--st-ease),color var(--st-t-fast,.15s) var(--st-ease); } .st-areatab small{font-size:12px;font-weight:600;opacity:.7;font-variant-numeric:tabular-nums} .st-areatab:hover{border-color:#c6c6c6;background:var(--st-hover)} .st-areatab.on{border-color:var(--st-flex);background:var(--st-flex-soft);color:var(--st-flex)} .st-areasub{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding-top:4px} .st-areasub-h{ color:var(--st-muted); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .st-stack{display:flex;flex-direction:column;gap:4px} .st-stackopt{ padding:9px 11px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-text); font-size:12px; font-weight:600; text-align:left; transition:border-color var(--st-t-fast,.15s) var(--st-ease),background var(--st-t-fast,.15s) var(--st-ease),color var(--st-t-fast,.15s) var(--st-ease); } .st-stackopt:hover{border-color:#c6c6c6;background:var(--st-hover)} .st-stackopt.on{border-color:var(--st-flex);background:var(--st-flex-soft);color:var(--st-flex)} @media (prefers-reduced-motion:reduce){ .st-area,.st-area::after,.st-flexdiv::before,.st-flexdiv-h, .st-sizetip,.st-areacount,.st-areatab,.st-stackopt{transition:none} } /* ========================================================================== Layers — the document tree A row is a tile + a name; everything else appears when it becomes relevant. Depth is one custom property (--d), so indentation, the dashed spine and the drop indicators all stay in step without a single hard-coded level. ========================================================================== */ .st-lyrs{--st-lyr-i:18px;position:relative;padding:6px 10px 2px} .st-lyr{ position:relative; display:flex; align-items:center; gap:9px; min-height:34px; padding:2px 4px 2px calc(var(--d,0) * var(--st-lyr-i) + 16px); border-radius:0; cursor:pointer; transition:background var(--st-t-fast,.15s) var(--st-ease); } /* the dashed spine + the elbow that reaches each row */ .st-lyr::before,.st-lyr::after{content:"";position:absolute;pointer-events:none} .st-lyr::before{ left:calc(var(--d,0) * var(--st-lyr-i) + 4px); top:0;bottom:0; border-left:1px dashed var(--st-line); } .st-lyr.is-last::before{bottom:auto;height:17px} .st-lyr::after{ left:calc(var(--d,0) * var(--st-lyr-i) + 4px); top:17px;width:8px; border-top:1px dashed var(--st-line); } .st-lyr.has-kids::after{display:none} .st-lyr:hover{background:var(--st-hover)} .st-lyr.is-sel{background:var(--st-blush)} .st-lyr:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px} .st-lyr.is-dragging{opacity:.4} /* expand/collapse sits in the gutter, on the spine — so it masks it */ .st-lyr-tw{ position:absolute; left:calc(var(--d,0) * var(--st-lyr-i) - 2px); top:50%; display:grid;place-items:center; width:17px;height:17px;padding:0; border:0;border-radius:0; background:var(--st-surface); color:var(--st-muted); transform:translateY(-50%); transition:color var(--st-t-fast,.15s) var(--st-ease); } .st-lyr:hover .st-lyr-tw{background:var(--st-hover)} .st-lyr.is-sel .st-lyr-tw{background:var(--st-blush)} .st-lyr-tw:hover{color:var(--st-ink)} .st-lyr-tw svg{width:14px;height:14px;transition:transform .18s var(--st-ease)} .st-lyr-tw.on svg{transform:rotate(90deg)} /* the tile carries the type — and becomes the drag handle on approach */ .st-lyr-tile{ position:relative; flex:none; display:grid; place-items:center; width:30px;height:30px; border:1px solid var(--st-line); border-radius:0; background:var(--st-surface); color:var(--st-text); transition:border-color var(--st-t-fast,.15s) var(--st-ease),background var(--st-t-fast,.15s) var(--st-ease); } .st-lyr-tile .ti,.st-lyr-tile .gr{ grid-area:1/1;display:grid;place-items:center; transition:opacity var(--st-t-fast,.15s) var(--st-ease); } .st-lyr-tile .gr{opacity:0;color:var(--st-muted)} .st-lyr-tile svg{width:16px;height:16px} .st-lyr:hover .st-lyr-tile[data-lgrip], .st-lyr:focus-within .st-lyr-tile[data-lgrip]{border-color:transparent;background:transparent;cursor:grab} .st-lyr:hover .st-lyr-tile[data-lgrip] .ti, .st-lyr:focus-within .st-lyr-tile[data-lgrip] .ti{opacity:0} .st-lyr:hover .st-lyr-tile[data-lgrip] .gr, .st-lyr:focus-within .st-lyr-tile[data-lgrip] .gr{opacity:1} .st-lyr-tile[data-lgrip]:active{cursor:grabbing} .st-lyr-tile[data-lgrip]{touch-action:none} .st-bar .drag{touch-action:none} .st-bcard,.st-scard{touch-action:none} .st-lyr.is-err .st-lyr-tile{border-color:var(--sf-c-danger-line);color:var(--st-danger)} .st-lyr-name{ flex:1;min-width:0;padding-right:2px; font-size:12px;font-weight:560; color:var(--st-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* once the actions are on screen the name yields to them — so a long name ellipsises where it is cut, rather than disappearing under the buttons */ .st-lyr:hover .st-lyr-name,.st-lyr:focus-within .st-lyr-name, .st-lyr.is-sel .st-lyr-name,.st-lyr.is-menu .st-lyr-name{padding-right:92px} .st-lyr.is-sel .st-lyr-name{color:var(--st-maroon)} .st-lyr.is-hidden .st-lyr-name{color:var(--st-muted);text-decoration:line-through} .st-lyr-flag{flex:none;display:grid;place-items:center;color:var(--st-muted)} .st-lyr-flag svg{width:14px;height:14px} .st-lyr-rn{ width:100%;padding:3px 6px; border:1px solid var(--st-accent);border-radius:0; background:var(--st-surface); color:var(--st-ink);font-size:12px;font-weight:600; outline:none;box-shadow:var(--sf-e-focus); } /* Secondary actions stay out of the way until the row is in play — and out of the layout entirely, so a name is never truncated to make room for buttons that aren't on screen. */ .st-lyr-acts{ position:absolute;right:4px;top:50%; display:flex;align-items:center;gap:1px; padding-left:12px;border-radius:0; opacity:0;pointer-events:none; transform:translateY(-50%) translateX(4px); transition:opacity var(--st-t-fast,.15s) var(--st-ease),transform var(--st-t-fast,.15s) var(--st-ease); } .st-lyr:hover .st-lyr-acts,.st-lyr:focus-within .st-lyr-acts, .st-lyr.is-sel .st-lyr-acts,.st-lyr.is-menu .st-lyr-acts{ opacity:1;pointer-events:auto;transform:translateY(-50%); } .st-lyr:hover .st-lyr-acts{background:var(--st-hover)} .st-lyr.is-sel .st-lyr-acts{background:var(--st-blush)} .st-lyr:focus-within:not(:hover):not(.is-sel) .st-lyr-acts, .st-lyr.is-menu:not(:hover):not(.is-sel) .st-lyr-acts{background:var(--st-hover)} .st-lyr-acts button{ display:grid;place-items:center; width:26px;height:26px; border:0;border-radius:0; background:none;color:var(--st-text); transition:background .13s var(--st-ease),color .13s var(--st-ease); } .st-lyr-acts button:hover{background:rgba(0,0,0,.07);color:var(--st-ink)} .st-lyr-acts button:disabled{opacity:.28;pointer-events:none} .st-lyr-acts button:focus-visible{outline:2px solid var(--st-accent);outline-offset:1px} .st-lyr-acts svg{width:16px;height:16px} .st-lyr-none{ position:relative; padding:4px 0 6px calc(var(--d,0) * var(--st-lyr-i) + 16px); font-size:12px;color:var(--st-muted); } .st-lyr-none::before{ content:"";position:absolute; left:calc(var(--d,0) * var(--st-lyr-i) + 4px);top:11px;width:8px; border-top:1px dashed var(--st-line); } /* drop indicator — same grammar as the canvas, indented to its own level */ .st-lyr-drop{height:0;position:relative;transition:height .14s var(--st-ease)} .st-lyr-drop.on,.st-lyr-drop.bad{height:22px} .st-lyr-drop.on::before,.st-lyr-drop.bad::before{ content:"";position:absolute; left:calc(var(--d,0) * var(--st-lyr-i) + 14px);right:6px;top:50%; height:3px;border-radius:0; background:var(--st-accent); transform:translateY(-50%); animation:stPop .18s var(--st-ease) both; } .st-lyr-drop.bad::before{background:var(--st-danger);opacity:.5} .st-lyr-add{ display:flex;align-items:center;gap:9px; width:calc(100% - 20px); margin:6px 10px 10px;padding:4px 6px 4px 10px; border:0;border-radius:0;background:none; color:var(--st-ink);font-size:12px;font-weight:600;text-align:left; transition:background var(--st-t-fast,.15s) var(--st-ease); } .st-lyr-add:hover{background:var(--st-hover)} .st-lyr-add .st-lyr-tile{border-style:dashed;color:var(--st-muted)} .st-lyr-add:hover .st-lyr-tile{border-color:#a6c8ff;color:var(--st-ink)} .st-lyr-add:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px} /* saved sections, alongside the built-in ones */ .st-scard.is-saved .st-scard-art{ display:grid;place-items:center; height:64px;color:var(--st-brand);background:var(--sf-c-blush); } .st-scard.is-saved .st-scard-art svg{width:22px;height:22px} .st-scard.is-saved .st-scard-name{display:flex;align-items:center;gap:8px} .st-scard-del{ flex:none;display:grid;place-items:center; width:22px;height:22px;margin-left:auto; border:0;border-radius:0;background:none;color:var(--st-muted); opacity:0;transition:opacity var(--st-t-fast,.15s) var(--st-ease),background .13s var(--st-ease); } .st-scard:hover .st-scard-del,.st-scard-del:focus-visible{opacity:1} .st-scard-del:hover{background:#fff1f1;color:#a2191f} .st-scard-del svg{width:14px;height:14px} /* a locked block says so, on the canvas as well as in the tree */ .st-bar button.on{background:var(--st-blush);color:var(--st-maroon)} .st-blk[data-locked] > .st-bar button[data-act="up"], .st-blk[data-locked] > .st-bar button[data-act="down"], .st-blk[data-locked] > .st-bar button[data-act="del"], .st-blk[data-locked] > .st-bar .drag{opacity:.32;pointer-events:none} /* an undoable change offers the undo in the toast that reports it */ .st-toast .tx{min-width:0} .st-toast-act{ flex:none;margin:-3px -8px -3px 4px; padding:5px 11px; border:0;border-radius:999px; background:rgba(255,255,255,.14); color:#fff;font:inherit;font-weight:650; transition:background .14s var(--st-ease); } .st-toast-act:hover{background:rgba(255,255,255,.26)} .st-toast-act:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:1px} /* a menu that flipped above its anchor should grow from the bottom */ .st-menu.up{transform-origin:bottom right} @media (max-width:860px){ .st-lyr{min-height:40px} .st-lyr-acts{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .st-lyr,.st-lyr-tile,.st-lyr-acts,.st-lyr-drop,.st-lyr-add, .st-lyr-tw svg,.st-toast-act,.st-scard-del{transition:none} .st-lyr-drop.on::before,.st-lyr-drop.bad::before{animation:none} } .st-menu button:disabled{opacity:.42;pointer-events:none} /* ========================================================================== Sections — Manage / Saved ========================================================================== */ .st-segtabs{ position:relative; display:grid;grid-template-columns:1fr 1fr; gap:2px;margin:12px 16px 4px;padding:3px; border-radius:0; background:var(--st-soft); box-shadow:inset 0 0 0 1px var(--st-line-soft); } .st-segtabs .ind{ position:absolute;top:3px;bottom:3px;left:3px; width:calc(50% - 3px); border-radius:0; background:var(--st-surface); box-shadow:0 1px 2px rgba(0,0,0,.09),0 0 0 1px rgba(0,0,0,.05); transition:transform .26s var(--st-ease); } .st-segtabs[data-tab="saved"] .ind{transform:translateX(100%)} .st-segtabs button{ position:relative;z-index:1; padding:7px 4px;border:0;border-radius:0;background:none; color:var(--st-muted);font-size:12px;font-weight:650; transition:color .2s var(--st-ease); } .st-segtabs button[aria-selected="true"]{color:var(--st-ink)} .st-segtabs button:hover{color:var(--st-text)} .st-segtabs button:focus-visible{outline:2px solid var(--st-accent);outline-offset:1px} /* saved cards get their own controls */ .st-scard.is-saved .st-scard-name .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-scard-btn{ flex:none;display:grid;place-items:center; width:24px;height:24px; border:0;border-radius:0;background:none;color:var(--st-muted); opacity:0;transition:opacity var(--st-t-fast,.15s) var(--st-ease),background .13s var(--st-ease),color .13s var(--st-ease); } .st-scard:hover .st-scard-btn,.st-scard-btn:focus-visible{opacity:1} .st-scard-btn:hover{background:rgba(0,0,0,.07);color:var(--st-ink)} .st-scard-btn svg{width:15px;height:15px} .st-prevbody{padding:0} .st-prevframe{display:block;width:100%;height:min(62vh,560px);border:0;background:var(--st-canvas)} @media (prefers-reduced-motion:reduce){ .st-segtabs .ind,.st-scard-btn{transition:none} } /* remove an image: a corner control on the thumbnail, and a plain-spoken button under the field for anyone who missed it */ .st-thumb{position:relative} .st-thumb-x{ position:absolute;top:6px;right:6px; display:grid;place-items:center; width:26px;height:26px; border:0;border-radius:0; background:rgba(0,0,0,.62);color:#fff; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity var(--st-t-fast,.15s) var(--st-ease),background .13s var(--st-ease); } .st-thumb:hover .st-thumb-x,.st-thumb-x:focus-visible{opacity:1} .st-thumb-x:hover{background:var(--st-danger)} .st-thumb-x svg{width:14px;height:14px} .st-linkbtn{ display:flex;align-items:center;justify-content:center;gap:7px; width:100%;margin-top:7px;padding:8px 10px; border:1px solid var(--st-line);border-radius:0; background:var(--st-surface);color:var(--st-text); font-size:12px;font-weight:600; transition:background .13s var(--st-ease),border-color .13s var(--st-ease),color .13s var(--st-ease); } .st-linkbtn:hover{background:var(--st-hover);border-color:#c6c6c6;color:var(--st-ink)} .st-linkbtn.danger{color:#a2191f;border-color:#ffd7d9} .st-linkbtn.danger:hover{background:#fff1f1} .st-linkbtn svg{width:15px;height:15px} /* ========================================================================== Inline formatting toolbar ========================================================================== */ .st-fmt{ position:fixed;z-index:320; display:flex;align-items:center;gap:1px; padding:4px; border:1px solid var(--st-line);border-radius:0; background:var(--st-surface); box-shadow:0 14px 32px -14px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.06); opacity:0;pointer-events:none; transform:translateY(4px) scale(.97); transition:opacity .13s var(--st-ease),transform .13s var(--st-ease); } .st-fmt.on{opacity:1;pointer-events:auto;transform:none} .st-fmt button{ display:grid;place-items:center; min-width:28px;height:28px;padding:0 6px; border:0;border-radius:0;background:none; color:var(--st-text);font-size:12px; transition:background .12s var(--st-ease),color .12s var(--st-ease); } .st-fmt button b{font-weight:750} .st-fmt button i{font-family:Georgia,serif;font-style:italic;font-size:14px} .st-fmt button:hover{background:var(--st-hover);color:var(--st-ink)} .st-fmt button.on{background:var(--st-accent-soft);color:var(--st-accent)} .st-fmt button:disabled{opacity:.3;pointer-events:none} .st-fmt button svg{width:15px;height:15px} .st-fmt .sep{width:1px;height:16px;margin:0 3px;background:var(--st-line)} .st-fmt svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* a link should read as a link while it is being written */ #stInner [data-e] a{cursor:text;text-underline-offset:2px} #stInner [data-e] a:hover{background:var(--st-accent-soft);border-radius:0} /* validation on a text field */ .st-in.is-bad{border-color:var(--sf-c-danger-line);box-shadow:0 0 0 3px rgba(218,30,40,.12)} .st-hint.is-bad{color:#a2191f} /* the properties field grid, reused inside dialogs */ .st-props-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px} /* ---- email details, in the properties panel ------------------------------ */ .st-metap{ position:relative; padding:12px 14px; border-bottom:1px solid var(--st-line-soft); transition:background var(--st-t-fast,.15s) var(--st-ease); } .st-metap:last-child{border-bottom:0} .st-metap.is-active{background:var(--st-soft)} .st-metap.is-active::before{ content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px; border-radius:0; background:var(--st-brand); } .st-metap-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px} .st-metap-h label{color:var(--st-ink);font-size:12px;font-weight:650} .st-metap-c{color:var(--st-muted);font-size:12px;font-variant-numeric:tabular-nums} .st-metap-c.over{color:var(--sf-c-warn);font-weight:650} .st-meta-pair{display:grid;grid-template-columns:1fr 1.2fr;gap:6px} .st-metap-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .st-chip{ padding:4px 9px; border:1px solid var(--st-line);border-radius:999px; background:var(--st-surface);color:var(--st-text); font-size:12px;font-weight:600; transition:background .13s var(--st-ease),border-color .13s var(--st-ease),color .13s var(--st-ease); } .st-chip:hover{background:var(--st-hover);border-color:#c6c6c6;color:var(--st-ink)} .st-chip:focus-visible{outline:2px solid var(--st-accent);outline-offset:1px} .st-metap .st-hint{display:block;margin-top:7px} .st-hint.is-warn{color:var(--sf-c-warn)} @media (max-width:860px){ .st-meta-g{grid-template-columns:1fr} .st-meta-f{grid-column:1/-1!important} .st-meta-h .sum{display:none} } @media (prefers-reduced-motion:reduce){ .st-meta-b,.st-meta-h .chev svg,.st-meta-f,.st-metap{transition:none} } .st-meta-h .sum .miss,.st-meta-h .sum .bad{font-weight:600} .st-meta-h .sum .err{color:var(--sf-c-danger-ink)} .st-meta-h .sum .warn{color:var(--sf-c-warn)} .st-meta-h .sum .dot{margin:0 7px;color:var(--st-faint,#a8a8a8)} /* ========================================================================== Required footer ========================================================================== */ .st-req{margin-left:3px;color:var(--st-danger);font-weight:600} /* a value with its own editor, per the field pattern in the reference */ .st-editf{ display:flex;align-items:center;gap:10px; padding:0 0 0 11px; border:1px solid var(--st-line);border-radius:0; background:var(--st-soft); overflow:hidden; } .st-editf.is-bad{border-color:var(--sf-c-danger-line);background:var(--sf-c-danger-soft)} .st-editf .val{ flex:1;min-width:0;padding:9px 0; color:var(--st-ink);font-size:12px;line-height:1.45; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .st-editf .val.is-empty{color:var(--st-muted)} .st-editbtn{ flex:none;align-self:stretch; padding:0 14px; border:0;border-left:1px solid var(--st-line); background:var(--st-surface); color:var(--st-ink);font-size:12px;font-weight:650; transition:background .13s var(--st-ease),color .13s var(--st-ease); } .st-editbtn:hover{background:var(--st-hover)} .st-editbtn:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px} .st-sel.is-bad,.st-ta.is-bad{border-color:var(--sf-c-danger-line);box-shadow:0 0 0 3px rgba(218,30,40,.12)} /* the footer's toolbar says why it has no controls */ .st-bar-pin{ display:inline-flex;align-items:center;gap:5px; padding:0 9px;height:26px; border-radius:0; color:var(--st-maroon);background:var(--st-blush); font-size:12px;font-weight:650;white-space:nowrap; } .st-bar-pin svg{width:13px;height:13px} /* preview and publish are shut until the footer is legal */ .st-gate{ display:inline-flex;align-items:center;gap:7px;flex:none; height:32px;padding:0 6px 0 10px; border:1px solid var(--sf-c-danger-line);border-radius:0; background:var(--sf-c-danger-soft); color:var(--sf-c-danger-ink); font-size:12px;font-weight:650;white-space:nowrap; animation:stFade .2s var(--st-ease) both; } .st-gate[hidden]{display:none} .st-gate svg{width:15px;height:15px} .st-gate .a{ padding:3px 9px;border-radius:0; background:var(--sf-c-danger);color:#fff;font-size:12px;font-weight:600; } .st-gate:hover .a{background:var(--sf-c-danger-ink)} .st-gate:focus-visible{outline:2px solid var(--sf-c-danger);outline-offset:2px} @media (max-width:1240px){ .st-gate .t{display:none} } .st-hint.is-err{color:#a2191f} /* ---- editor chrome holds its size through the canvas zoom ---------------- The stage is scaled to fit, which would shrink the controls with it. These scale back by the inverse (set by setZoom) so a handle is the same physical size at 50% as at 150%. Anchored so they stay put while they resize. */ .st-stage{--st-inv:1} .st-bar{transform:scale(var(--st-inv));transform-origin:100% 100%} .st-flexdiv-h{transform:scale(var(--st-inv));transform-origin:50% 50%} .st-bar-pin{transform-origin:100% 100%} /* zoom readout in the preview toolbar — a label, not an icon button */ .st-pv-z{ width:auto!important; min-width:86px; padding:0 10px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } /* menu items with a state tick and an explanatory sub-line */ .st-menu button .ml{flex:1;min-width:0;display:block} .st-menu button .ml em{ display:block; margin-top:2px; font-style:normal; font-size:11px; font-weight:500; line-height:1.4; color:var(--st-muted); white-space:normal; } .st-menu button .mc{flex:none;display:inline-flex} .st-menu button .mc svg{width:14px;height:14px;color:var(--st-accent)} .st-menu button[aria-checked="true"]{color:var(--st-accent)} /* the weight trigger in the selection toolbar reads as a word, not an icon */ .st-fmt-w{width:auto!important;gap:4px;padding:0 8px;font-size:12px;font-weight:600} .st-fmt-w svg{width:13px;height:13px} /* A weight with no real face must fall back to the nearest one the font actually has, not be smeared into a fake by the rasteriser. What the canvas shows is then a weight that exists, which is what the picker promised. */ .st-emailinner,.st-emailinner *{font-synthesis-weight:none} /* ========================================================================== Email details — setup sections, drawer, audience picker ========================================================================== */ /* summary rows gain a completion tick and a go affordance */ .st-meta-f{grid-template-columns:16px 78px minmax(0,1fr) 14px} .st-meta-tick{ display:grid;place-items:center; width:16px;height:16px;align-self:center; border-radius:50%; border:1.5px solid var(--st-line); color:#fff; } .st-meta-tick.on{background:var(--st-ok);border-color:var(--st-ok)} .st-meta-tick svg{width:10px;height:10px} .st-meta-go{ display:grid;place-items:center;align-self:center; color:var(--st-muted);opacity:0; transition:opacity .14s var(--st-ease); } .st-meta-go svg{width:14px;height:14px} .st-meta-f:hover .st-meta-go,.st-meta-f:focus-visible .st-meta-go,.st-meta-f.is-sel .st-meta-go{opacity:1} /* the drawer itself — the shared modal, given room and a mobile sheet */ .st-card.sheet{width:min(760px,100%);max-height:min(88vh,860px)} .st-set-b{display:flex;flex-direction:column;gap:20px;padding:22px} .st-set-state{ flex:none;align-self:center; color:var(--st-muted);font-size:12px;font-weight:600;white-space:nowrap; } .st-set-state.is-saving{color:var(--st-accent)} .st-set-state.is-saved{color:var(--st-ok)} .st-set-state.is-failed{color:var(--sf-c-danger-ink)} .st-set-f{display:flex;flex-direction:column;gap:7px} .st-set-lab{display:flex;align-items:baseline;gap:10px} .st-set-lab label{flex:1;color:var(--st-ink);font-size:12px;font-weight:600} .st-set-lab > span{color:var(--st-muted);font-size:12px} .st-set-lab .req{color:var(--st-muted)} .st-set-caption{ display:block; color:var(--st-muted);font-size:12px;font-weight:600; letter-spacing:.02em; } .st-set-under{display:flex;align-items:baseline;gap:10px} .st-set-under > :first-child{flex:1;min-width:0} .st-set-narrow{max-width:200px} .st-set-inwrap{position:relative;display:flex} .st-set-inwrap .st-in,.st-set-inwrap .st-ta{padding-right:36px} .st-in-act{ position:absolute;top:4px;right:4px; width:28px;height:28px; display:grid;place-items:center; border:0;border-radius:0;background:none;color:var(--st-muted); } .st-in-act:hover{background:var(--st-hover);color:var(--st-ink)} .st-in-act svg{width:15px;height:15px} /* validation sits under the field it belongs to, never in a box of its own */ .st-fielderr{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.45} .st-fielderr svg{width:14px;height:14px;flex:none;margin-top:1px} .st-fielderr.err{color:var(--sf-c-danger-ink)} .st-fielderr.warn{color:var(--sf-c-warn)} /* one quiet band for a result, not a card */ .st-set-reach{ display:flex;align-items:center;gap:14px; padding:12px 14px; background:var(--st-soft); color:var(--st-ink);font-size:12px;line-height:1.5; } .st-set-reach > span{flex:1;min-width:0} .st-set-check{display:flex;align-items:flex-start;gap:12px} .st-set-check > span{flex:1;min-width:0;font-size:12px;line-height:1.5} .st-set-check em{display:block;margin-top:3px;font-style:normal;color:var(--st-muted)} /* audience field */ .st-audbox{ display:flex;align-items:center;gap:10px; width:100%;min-height:44px;padding:6px 10px; border:1px solid var(--st-line);border-radius:0; background:#fff;text-align:left; transition:border-color .15s var(--st-ease),box-shadow .15s var(--st-ease); } .st-audbox:hover{border-color:var(--st-line-strong,var(--st-muted))} .st-audbox[aria-expanded="true"]{border-color:var(--st-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)} .st-audbox.is-warn{border-color:var(--sf-c-warn-line,var(--st-line))} .st-audbox > svg{width:16px;height:16px;flex:none;color:var(--st-muted)} .st-audchips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .st-audchips .ph{color:var(--st-muted);font-size:12px} .st-audchips .st-chip{height:26px} /* the picker: its own scrollport, clamped to the viewport */ .st-audmenu{ position:fixed;z-index:900; display:flex;flex-direction:column; overflow:auto;overscroll-behavior:contain; background:var(--st-surface); border:1px solid var(--st-line); box-shadow:0 18px 40px -18px rgba(0,0,0,.4); } .st-audsearch{ position:sticky;top:0;z-index:1; display:flex;align-items:center;gap:8px; padding:10px; background:var(--st-surface); border-bottom:1px solid var(--st-line-soft); } .st-audsearch svg{width:15px;height:15px;color:var(--st-muted);flex:none} .st-audsearch input{flex:1;min-width:0;height:28px;border:0;outline:0;background:none;font-size:12px;color:var(--st-ink)} .st-audacts{padding:10px 10px 8px;border-bottom:1px solid var(--st-line-soft)} .st-audact{ display:flex;align-items:flex-start;gap:10px; width:100%;padding:8px 6px;margin-top:2px; border:0;border-radius:0;background:none;text-align:left; } .st-audact:hover{background:var(--st-hover)} .st-audact svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--st-accent)} .st-audact b{display:block;color:var(--st-accent-ink,var(--st-accent));font-size:12px;font-weight:600} .st-audact em{display:block;margin-top:2px;font-style:normal;color:var(--st-muted);font-size:12px;line-height:1.45} .st-audgrp-h{ display:flex;align-items:center;gap:8px; width:100%;padding:9px 10px; border:0;background:none;text-align:left; color:var(--st-ink);font-size:12px;font-weight:600; } .st-audgrp-h:hover{background:var(--st-hover)} .st-audgrp-h span{flex:1} .st-audgrp-h svg{width:14px;height:14px;color:var(--st-muted);transition:transform .18s var(--st-ease)} .st-audgrp-h[aria-expanded="false"] svg{transform:rotate(-90deg)} .st-audopt{ display:flex;align-items:center;gap:9px; width:100%;padding:8px 10px 8px 12px; border:0;background:none;text-align:left; color:var(--st-ink);font-size:12px; } .st-audopt:hover:not(:disabled){background:var(--st-hover)} .st-audopt i{width:14px;height:14px;flex:none;display:grid;place-items:center;color:var(--st-accent)} .st-audopt i svg{width:14px;height:14px} .st-audopt span{flex:1;min-width:0} .st-audopt em{font-style:normal;color:var(--st-muted)} .st-audopt.on{font-weight:600} .st-audopt.is-blocked{opacity:.45} .st-audempty{padding:18px 12px;color:var(--st-muted);font-size:12px;text-align:center} /* sender list */ .st-set-senders{display:flex;flex-direction:column;gap:6px} .st-set-sender{ display:flex;align-items:center;gap:10px; padding:9px 10px; border:1px solid var(--st-line);border-radius:0; background:var(--st-surface);text-align:left; } .st-set-sender:hover{background:var(--st-hover)} .st-set-sender.on{border-color:var(--st-accent);background:var(--st-accent-soft)} .st-set-sender b{flex:none;color:var(--st-ink);font-size:12px;font-weight:600} .st-set-sender > span{flex:1;min-width:0;color:var(--st-muted);font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .st-set-sender i{flex:none;display:grid;place-items:center} .st-set-sender i svg{width:14px;height:14px} .st-set-sender i.ok{color:var(--st-ok)} .st-set-sender i.no{color:var(--sf-c-warn)} .st-set-verify{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5} .st-set-verify svg{width:15px;height:15px;flex:none} .st-set-verify.ok{color:var(--st-ok)} .st-set-verify.no{color:var(--sf-c-warn)} .st-set-verify > span{flex:1;min-width:0} /* send-time options */ .st-set-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .st-set-modes.col{grid-template-columns:1fr} .st-set-opt{ display:flex;align-items:flex-start;gap:10px; padding:12px 13px; border:1px solid var(--st-line);border-radius:0; background:var(--st-surface);text-align:left; transition:border-color .15s var(--st-ease),background .15s var(--st-ease); } .st-set-opt:hover{background:var(--st-hover)} .st-set-opt.on{border-color:var(--st-accent);background:var(--st-accent-soft)} .st-set-opt i{ width:16px;height:16px;flex:none;margin-top:1px; border:1.5px solid var(--st-muted);border-radius:50%; } .st-set-opt.on i{border-color:var(--st-accent);border-width:5px} .st-set-opt b{display:block;color:var(--st-ink);font-size:12px;font-weight:600} .st-set-opt em{display:block;margin-top:3px;font-style:normal;color:var(--st-muted);font-size:12px;line-height:1.45} /* an unconnected capability, labelled as one */ .st-set-ai{ display:flex;align-items:center;gap:11px; padding:12px 14px; background:var(--st-soft); } .st-set-ai svg{width:16px;height:16px;flex:none;color:var(--st-muted)} .st-set-ai > span{flex:1;min-width:0;font-size:12px;line-height:1.5} .st-set-ai em{display:block;margin-top:2px;font-style:normal;color:var(--st-muted)} @media (max-width:700px){ /* A full-screen sheet, so the overlay's own padding has to go too — without that the card sat inside a 44px inset and was 323px wide on a 390px phone, which is a dialog pretending to be a sheet. */ .st-modal:has(> .st-card.sheet){padding:0} .st-card.sheet{width:100%;max-width:100%;max-height:100%;height:100%;border:0} .st-set-b{padding:16px;gap:16px} .st-set-modes{grid-template-columns:1fr} .st-card.sheet .st-card-f{position:sticky;bottom:0;background:var(--st-surface)} } /* the properties panel's section index (the drawer owns the forms) */ .st-secrows{display:flex;flex-direction:column;gap:2px;margin-bottom:14px} .st-secrow{ display:flex;align-items:center;gap:10px; width:100%;padding:9px 8px; border:0;border-left:2px solid transparent;background:none;text-align:left; transition:background .14s var(--st-ease); } .st-secrow:hover{background:var(--st-hover)} .st-secrow.is-sel{background:var(--st-blush);border-left-color:var(--st-maroon)} .st-secrow .t{flex:1;min-width:0} .st-secrow b{display:block;color:var(--st-ink);font-size:12px;font-weight:600} .st-secrow em{ display:block;margin-top:2px;font-style:normal; color:var(--st-muted);font-size:12px;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .st-secrow.is-err em{color:var(--sf-c-danger-ink)} .st-secrow.is-warn em{color:var(--sf-c-warn)} .st-secrow > svg{width:14px;height:14px;flex:none;color:var(--st-muted)} /* ---- Email details polish ------------------------------------------------- Fewer boxes: results and guidance are lines of text, choices are segments and radio rows, and only the fields you type into keep a border. */ .st-set-count{ margin:0; color:var(--st-text);font-size:12px;line-height:1.55; } .st-set-count b{color:var(--st-ink);font-weight:600} .st-set-count .ok{color:var(--st-ok)} .st-set-count .no{color:var(--sf-c-warn)} .st-set-count svg{width:13px;height:13px;vertical-align:-2px;margin-right:2px} /* A quiet way in, not a button competing with Save. The shared .st-linkbtn is a full-width bordered control; here it is a link, so it reads as an option rather than a step. */ .st-set-more{ align-self:flex-start; display:inline-flex;align-items:center;justify-content:flex-start;gap:6px; width:auto;margin:0;padding:2px 0; border:0;background:none; color:var(--st-accent-ink,var(--st-accent)); } .st-set-more:hover{background:none;border:0;color:var(--st-accent);text-decoration:underline} .st-set-more svg{width:14px;height:14px} /* the inline links inside a guidance line behave the same way */ .st-set-count .st-linkbtn{ display:inline;width:auto;margin:0;padding:0; border:0;background:none;color:var(--st-accent-ink,var(--st-accent)); font-size:12px;font-weight:600; } .st-set-count .st-linkbtn:hover{background:none;text-decoration:underline} .st-set-seg{align-self:flex-start} .st-set-seg button{width:auto;padding:0 16px;font-size:12px;font-weight:600} .st-set-when{align-items:end} /* a revealed field animates in rather than appearing from nowhere */ .st-reveal{animation:stReveal .22s var(--st-ease) both} @keyframes stReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* borderless radio rows */ .st-radios{display:flex;flex-direction:column;gap:2px} .st-radio{ display:flex;align-items:flex-start;gap:10px; width:100%;padding:9px 10px 9px 8px; border:0;border-radius:0;background:none;text-align:left; transition:background .14s var(--st-ease); } .st-radio:hover{background:var(--st-hover)} .st-radio i{ width:16px;height:16px;flex:none;margin-top:1px; border:1.5px solid var(--st-muted);border-radius:50%; transition:border-color .14s var(--st-ease),border-width .14s var(--st-ease); } .st-radio.on i{border-color:var(--st-accent);border-width:5px} .st-radio > span{flex:1;min-width:0} .st-radio b{display:block;color:var(--st-ink);font-size:12px;font-weight:600} .st-radio em{display:block;margin-top:2px;font-style:normal;color:var(--st-muted);font-size:12px;line-height:1.45} .st-radio-extra{display:block;margin-top:8px;max-width:180px;animation:stReveal .2s var(--st-ease) both} /* the picker fades in with its placement rather than snapping */ .st-audmenu{opacity:0;transform:translateY(-4px); transition:opacity .16s var(--st-ease),transform .16s var(--st-ease)} .st-audmenu.open{opacity:1;transform:none} .st-audopt:focus-visible{background:var(--st-hover)} /* the drawer's actions read primary-then-secondary, left aligned with the form */ .st-card.sheet .st-card-f{padding:14px 22px} @media (prefers-reduced-motion:reduce){ .st-reveal,.st-radio-extra,.st-audmenu{animation:none;transition:none} }