/* Email Composer (/email-tools/email-composer/) — scoped under #cmc; colours follow the site tokens so light/dark just work. */
#cmc{--paper:var(--bg-2);--sheet:var(--surface);--ink:var(--text);--line:var(--border);--stamp:var(--brand);
  --stamp-soft:color-mix(in srgb,var(--brand) 14%,var(--surface));--well:color-mix(in srgb,var(--bg-2) 60%,var(--border));
  --ok:#2e9d62;--warn:#d08a1e;--bad:#d64545;--f-display:var(--font-head);--f-body:var(--font-body);--f-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:14px;line-height:1.5;color:var(--ink)}
#cmc *{box-sizing:border-box}
#cmc .cm-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0 0 14px}
#cmc img{display:inline-block}
#cmc .cm-cutter img{display:block}
#cmc input[type=range]{width:100%}
#cmc .cm-actions{display:flex;flex-wrap:wrap;gap:8px}
#cmc button,#cmc .cm-btn{font:inherit;font-weight:500;border-radius:8px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);padding:8px 14px;cursor:pointer}
#cmc button:hover{border-color:var(--stamp)}
#cmc button:focus-visible,#cmc input:focus-visible,#cmc select:focus-visible,#cmc textarea:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
#cmc button.cm-primary{background:var(--stamp);border-color:var(--stamp);color:var(--sheet)}
#cmc button.cm-ghost{background:transparent}
#cmc button[disabled]{opacity:.5;cursor:not-allowed}
#cmc .cm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:20px;align-items:start}
#cmc .cm-grid .cm-stage{order:1}
#cmc .cm-grid .cm-controls{order:2}
#cmc .cm-grid.cm-swap{grid-template-columns:minmax(0,430px) minmax(0,1fr)}
#cmc .cm-grid.cm-swap .cm-stage{order:2}
#cmc .cm-grid.cm-swap .cm-controls{order:1}
@media (min-width:921px){#cmc .cm-controls{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);max-height:calc(100vh - 88px);overflow:auto;padding-right:4px;overscroll-behavior:contain}}
@media (max-width:920px){#cmc .cm-grid,#cmc .cm-grid.cm-swap{grid-template-columns:minmax(0,1fr)}
#cmc .cm-grid .cm-stage,#cmc .cm-grid.cm-swap .cm-stage{order:1;position:static}
#cmc .cm-grid .cm-controls,#cmc .cm-grid.cm-swap .cm-controls{order:2}}
@media (max-width:920px){#cmc #swapSides{display:none}}
#cmc details.cm-sec.cm-flash{outline:2px solid var(--stamp);outline-offset:2px}
#cmc .cm-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#cmc .cm-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
#cmc .cm-live.cm-busy i{background:var(--warn)}
#cmc .cm-controls{display:flex;flex-direction:column;gap:12px;min-width:0}
#cmc details.cm-sec{background:var(--sheet);border:1px solid var(--line);border-radius:12px;min-width:0}
#cmc details.cm-sec>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--f-display);font-weight:500;font-size:16px}
#cmc details.cm-sec>summary::-webkit-details-marker{display:none}
#cmc details.cm-sec>summary .cm-hint{font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:400}
#cmc details.cm-sec[open]>summary{border-bottom:1px solid var(--line)}
#cmc .cm-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
#cmc label.cm-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.02em;min-width:0}
#cmc input[type=text],#cmc input[type=url],#cmc input[type=number],#cmc select,#cmc textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-width:0}
#cmc textarea{resize:vertical;min-height:64px}
#cmc .cm-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#cmc .cm-row3{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px}
@media (max-width:420px){#cmc .cm-row{grid-template-columns:minmax(0,1fr)}}
#cmc .cm-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
#cmc .cm-toggle input{width:16px;height:16px;accent-color:var(--stamp)}
#cmc .cm-drop{border:1.5px dashed var(--line);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;background:var(--well);cursor:pointer}
#cmc .cm-drop.cm-over{border-color:var(--stamp);background:var(--stamp-soft)}
#cmc .cm-drop img{width:56px;height:70px;object-fit:cover;border-radius:4px;flex:none;border:1px solid var(--line)}
#cmc .cm-drop .cm-meta{min-width:0}
#cmc .cm-drop .cm-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cmc .cm-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
#cmc .cm-small{font-size:12px;color:var(--muted)}
#cmc .cm-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#cmc .cm-seg button{border:0;border-radius:0;padding:6px 12px;background:transparent}
#cmc .cm-seg button[aria-pressed=true]{background:var(--stamp);color:var(--sheet)}
#cmc .cm-slice-list{display:flex;flex-direction:column;gap:10px}
#cmc .cm-slice{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:10px}
#cmc .cm-slice canvas{width:44px;border-radius:3px;border:1px solid var(--line);display:block}
#cmc .cm-slice .cm-stack{display:flex;flex-direction:column;gap:6px;min-width:0}
#cmc .cm-slice .cm-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
#cmc .cm-swatches{display:flex;gap:10px;flex-wrap:wrap}
#cmc .cm-swatch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#cmc .cm-swatch input[type=color]{width:34px;height:28px;border:1px solid var(--line);border-radius:6px;padding:0;background:none}
#cmc .cm-stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;flex-direction:column;gap:12px;min-width:0}
#cmc .cm-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
#cmc .cm-envelope{background:var(--sheet);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
#cmc .cm-inbox{padding:12px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center}
#cmc .cm-avatar{width:36px;height:36px;border-radius:50%;background:var(--stamp-soft);color:var(--stamp);display:grid;place-items:center;font-weight:600}
#cmc .cm-inbox .cm-l1{display:flex;gap:8px;min-width:0}
#cmc .cm-inbox .cm-l1 b,#cmc .cm-inbox .cm-l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cmc .cm-inbox .cm-l2{color:var(--muted);font-size:13px}
#cmc .cm-frame-wrap{background:var(--well);display:flex;justify-content:center;padding:16px;overflow:auto;max-height:calc(100vh - 230px);min-height:420px}
#cmc iframe{border:0;background:#fff;width:640px;max-width:100%;height:1200px;display:block;border-radius:4px}
#cmc iframe.cm-mobile{width:375px}
#cmc .cm-cutter{position:relative;width:min(100%,420px);margin:0 auto;touch-action:none;user-select:none}
#cmc .cm-cutter img{display:block;width:100%;border-radius:4px}
#cmc .cm-cut{position:absolute;left:-8px;right:-8px;height:0;border-top:2px dashed var(--bad);cursor:ns-resize}
#cmc .cm-cut::before{content:"";position:absolute;left:0;right:0;top:-12px;height:24px}
#cmc .cm-cut span{position:absolute;right:0;top:-12px;transform:translateY(-50%);background:var(--bad);color:#fff;font:500 11px/1 var(--f-mono);padding:4px 6px;border-radius:4px}
#cmc .cm-cut.cm-drag{border-top-style:solid}
#cmc .cm-slice-tag{position:absolute;left:6px;background:rgba(24,32,31,.72);color:#fff;font:500 11px/1 var(--f-mono);padding:4px 6px;border-radius:4px;pointer-events:none}
#cmc .cm-checks{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 16px}
#cmc .cm-chk{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:13px;align-items:start}
#cmc .cm-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--ok)}
#cmc .cm-dot.cm-warn{background:var(--warn)}
#cmc .cm-dot.cm-bad{background:var(--bad)}
#cmc .cm-code{background:var(--well);border-radius:8px;padding:12px;font:12px/1.5 var(--f-mono);white-space:pre-wrap;word-break:break-all;max-height:520px;overflow:auto;margin:0}
#cmc-dlg-host dialog{border:1px solid var(--line);border-radius:14px;background:var(--sheet);color:var(--ink);padding:0;width:min(520px,calc(100vw - 32px));box-shadow:var(--shadow)}
#cmc-dlg-host dialog::backdrop{background:rgba(10,14,13,.38);backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%)}
#cmc .cm-dlg{display:flex;flex-direction:column;gap:14px;padding:20px}
#cmc .cm-dlg h2{font-family:var(--f-display);font-size:20px;margin:0}
#cmc .cm-copyset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;margin:0}
#cmc .cm-copyset legend{font-size:12px;color:var(--muted);padding:0 4px}
#cmc .cm-dlg-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
#cmc .cm-dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
#cmc .cm-cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
@media (max-width:420px){#cmc .cm-cta-row{grid-template-columns:minmax(0,1fr)}}
#cmc .cm-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
#cmc .cm-toast.cm-show{opacity:1}
@media (prefers-reduced-motion:reduce){#cmc .cm-toast{transition:none}}
#cmc.wrap{width:min(1320px,100% - 32px)}
#cmc .cm-palette{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#cmc .cm-chips{display:flex;flex-wrap:wrap;gap:6px}
#cmc button.cm-chip{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--sheet);box-shadow:0 0 0 1px var(--line);cursor:pointer}
#cmc button.cm-chip:hover,#cmc button.cm-chip:focus-visible{box-shadow:0 0 0 2px var(--stamp)}
#cmc .cm-chip-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px}
#cmc .cm-swatch input[type=color].cm-active{outline:2px solid var(--stamp);outline-offset:2px}
#cmc-dlg-host #testMsg.cm-ok{color:var(--ok);font-weight:600} #cmc-dlg-host #testMsg.cm-err{color:var(--bad);font-weight:600}
#cmc .cm-tpl-list{display:flex;flex-direction:column;gap:8px;max-height:min(46vh,360px);overflow:auto}
#cmc .cm-tpl{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
#cmc .cm-tpl b{display:block;overflow-wrap:anywhere} #cmc .cm-tpl .cm-small{display:block}
#cmc .cm-tpl-btns{display:flex;gap:6px;flex:none}
@media (max-width:480px){#cmc .cm-dlg-save{grid-template-columns:minmax(0,1fr)}}
#cmc .cm-cutter.cm-picking, #cmc .cm-cutter.cm-picking img{cursor:crosshair}
#cmc .cm-cutter.cm-picking{outline:2px dashed var(--stamp);outline-offset:4px}
#cmc .cm-avatar{overflow:hidden}
#cmc .cm-avatar img{width:100%;height:100%;object-fit:cover;display:block}
#cmc .cm-avatar-lg{width:56px;height:56px;font-size:22px;flex:none;border:1px solid var(--line)}
#cmc .cm-sender{display:flex;gap:12px;align-items:flex-start}
#cmc .cm-from-email{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#cmc .cm-sender .cm-stack{display:flex;flex-direction:column;gap:4px;min-width:0}
#cmc .cm-avatar:has(img){background:#fff;border:1px solid var(--line)}
/* templates & campaigns gallery */
#cmc-dlg-host dialog.cm-wide{width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 32px)}
#cmc .cm-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#cmc .cm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
#cmc .cm-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 12px;color:var(--muted);white-space:nowrap}
#cmc .cm-tabs button[aria-selected=true]{color:var(--stamp);border-bottom-color:var(--stamp);font-weight:600}
#cmc .cm-tabpane{display:flex;flex-direction:column;gap:10px}
#cmc .cm-tabpane[hidden]{display:none}
#cmc .cm-gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));max-height:min(60vh,560px);overflow:auto;padding:2px}
#cmc .cm-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:var(--sheet)}
#cmc .cm-card.cm-current{border-color:var(--stamp);box-shadow:0 0 0 1px var(--stamp)}
#cmc .cm-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
#cmc .cm-card-body b{overflow-wrap:anywhere}
#cmc .cm-card-body .cm-small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cmc .cm-card-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#cmc .cm-card-btns button{padding:6px 10px;font-size:13px}
#cmc .cm-mock{padding:12px 22px 0;height:200px;overflow:hidden;border-bottom:1px solid var(--line)}
#cmc .cm-mock-sheet{display:flex;flex-direction:column;gap:5px;border-radius:4px 4px 0 0;padding-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
#cmc .cm-mock-sheet>img{display:block;width:100%;height:auto;border-radius:4px 4px 0 0}
#cmc .cm-mock-img{height:110px;border-radius:4px 4px 0 0;display:grid;place-items:center;color:#fff;font-size:11px;opacity:.9}
#cmc .cm-mock i{display:block;height:5px;border-radius:3px;background:#c9ced6;margin:0 10px}
#cmc .cm-mock i.cm-mock-h{height:7px;width:60%;margin-top:4px}
#cmc .cm-mock i.cm-short{width:45%}
#cmc .cm-mock-btns{display:flex;gap:5px;margin:2px 10px}
#cmc .cm-mock-btns i{flex:1;height:12px;margin:0;border-radius:4px}
#cmc .cm-mock-int{padding:6px 0;display:flex;flex-direction:column;gap:4px;margin-top:2px}
#cmc .cm-mock-int i{background:rgba(255,255,255,.55)}
#cmc .cm-mock-foot{padding:6px 0;display:flex;flex-direction:column;gap:4px}
#cmc .cm-mock-sheet>img{height:86px;object-fit:cover;object-position:top}
#cmc .cm-mock-img{height:86px}
#cmc .cm-border-ctl{display:flex;align-items:center;gap:10px}
#cmc .cm-border-ctl input[type=range]{flex:1}
#cmc #borderBox.cm-off{opacity:.45;pointer-events:none}
#cmc div.cm-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.02em;min-width:0} #cmc .cm-border-ctl{min-height:38px}
/* action bar: spread across the full width, left to right */
#cmc .cm-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:stretch}
#cmc .cm-actions>button{flex:1 1 auto;white-space:nowrap;text-align:center}
#cmc .cm-actions>button[hidden]{display:none}
@media (max-width:600px){#cmc .cm-actions>button{flex:1 1 calc(50% - 8px);white-space:normal}}
/* step navigation in the settings panel */
#cmc .cm-stepnav{flex:none;position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:6px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow-x:auto;scrollbar-width:none}
#cmc .cm-stepnav::-webkit-scrollbar{display:none}
#cmc .cm-stepnav button{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:none;padding:6px 6px;border-radius:8px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.1;white-space:nowrap}
#cmc .cm-stepnav button span{font-size:11.5px;font-weight:500}
#cmc .cm-stepnav button:hover{background:var(--paper);color:var(--ink)}
#cmc .cm-stepnav button[aria-pressed=true]{background:var(--stamp);color:#fff}
#cmc .cm-stepnav .cm-step-all{flex:0 0 auto;justify-content:center;font-weight:600;font-size:12px}
#cmc details.cm-sec>summary{justify-content:flex-start}
#cmc details.cm-sec>summary .cm-hint{margin-left:auto}
#cmc .cm-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--stamp-soft);color:var(--stamp);font-family:var(--f-body);font-size:12px;font-weight:700;flex:none}
#cmc details.cm-sec[open]>summary .cm-num{background:var(--stamp);color:#fff}
#cmc details.cm-sec>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:8px;flex:none;transition:transform .15s}
#cmc details.cm-sec>summary:not(:has(.cm-hint))::after{margin-left:auto}
#cmc details.cm-sec[open]>summary::after{transform:rotate(-135deg)}
@media (max-width:920px){#cmc .cm-stepnav{position:static}}
/* hover and pointer feedback */
#cmc button,#cmc .cm-btn,#cmc select,#cmc input[type=color],#cmc input[type=range],#cmc input[type=checkbox],#cmc label.cm-toggle,#cmc .cm-swatch,#cmc details.cm-sec>summary,#cmc .cm-drop{cursor:pointer}
#cmc button,#cmc .cm-btn{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s}
#cmc button:not(:disabled):hover{border-color:var(--stamp);background:var(--stamp-soft);color:var(--ink)}
#cmc button.cm-primary:not(:disabled):hover{background:var(--stamp);color:#fff;filter:brightness(1.08);box-shadow:0 6px 16px color-mix(in srgb,var(--stamp) 35%,transparent)}
#cmc button:not(:disabled):active{transform:translateY(1px)}
#cmc .cm-actions>button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
#cmc .cm-stepnav button:not([aria-pressed=true]):hover{background:var(--stamp-soft);color:var(--stamp)}
#cmc .cm-stepnav button[aria-pressed=true]:hover{background:var(--stamp);color:#fff}
#cmc details.cm-sec{transition:border-color .15s,box-shadow .15s}
#cmc details.cm-sec:hover{border-color:color-mix(in srgb,var(--stamp) 40%,var(--line))}
#cmc details.cm-sec>summary{transition:background-color .15s;border-radius:12px}
#cmc details.cm-sec>summary:hover{background:var(--paper)}
#cmc details.cm-sec[open]>summary{border-radius:12px 12px 0 0}
#cmc .cm-drop{transition:border-color .15s,background-color .15s}
#cmc .cm-drop:hover{border-color:var(--stamp);background:var(--stamp-soft)}
#cmc .cm-swatch input[type=color]{transition:transform .12s,box-shadow .12s}
#cmc .cm-swatch:hover input[type=color]{transform:scale(1.08);box-shadow:0 0 0 2px var(--stamp-soft)}
#cmc button.cm-chip{transition:transform .12s,box-shadow .12s}
#cmc button.cm-chip:hover{transform:scale(1.15);background-clip:padding-box}
#cmc .cm-seg button[aria-pressed=false]:hover{background:var(--stamp-soft)}
#cmc .cm-card{transition:transform .15s,box-shadow .15s,border-color .15s;cursor:default}
#cmc .cm-card:hover{transform:translateY(-2px);border-color:var(--stamp);box-shadow:0 10px 24px rgba(0,0,0,.10)}
#cmc .cm-tpl:hover{border-color:var(--stamp)}
#cmc .cm-tabs button:hover{color:var(--ink)}
#cmc .cm-slice{transition:border-color .15s}
#cmc .cm-slice:hover{border-color:color-mix(in srgb,var(--stamp) 45%,var(--line))}
#cmc input:not([type=checkbox]):not([type=range]):not([type=color]):hover,#cmc select:hover,#cmc textarea:hover{border-color:color-mix(in srgb,var(--stamp) 50%,var(--line))}
@media (prefers-reduced-motion:reduce){#cmc *{transition:none!important;transform:none!important}}
/* brand picker */
#cmc .cm-brand{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
#cmc .cm-brand-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:end}
#cmc .cm-brand-row button[hidden]{display:none}
#cmc .cm-brand .cm-small{margin:0}
#cmc button.cm-nudge{border-color:var(--stamp);color:var(--stamp);box-shadow:0 0 0 3px var(--stamp-soft)}
@media (max-width:480px){#cmc .cm-brand-row{grid-template-columns:1fr 1fr}#cmc .cm-brand-row label{grid-column:1/-1}}