/* SMTPedia Email Template Generator — scoped to .setg so it cannot leak into the theme. */

.setg{
  --setg-bench:#1B222C;
  --setg-ink:#D6DEE8;
  --setg-dim:#78859A;
  --setg-line:rgba(255,255,255,.09);
  --setg-brass:#B8791F;
  --setg-teal:#3AA696;
  --setg-teal-hi:#4CBFAE;
  --setg-ok:#4FA97A;
  --setg-h:620px;

  /* Lets the layout respond to the width of the CONTENT COLUMN, not the window.
     Essential: this tool often sits inside a themed column narrower than the viewport. */
  container-type:inline-size;
  container-name:setg;

  display:block;
  margin:0 0 22px;
  border:1px solid rgba(20,26,34,.18);
  border-radius:4px;
  overflow:hidden;
  background:var(--setg-bench);
  box-shadow:0 1px 2px rgba(20,26,34,.08), 0 10px 28px -16px rgba(20,26,34,.35);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--setg-ink);
  line-height:1.5;
}
.setg *{box-sizing:border-box}

/* ---------- toolbar ---------- */
.setg-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;
  border-bottom:1px solid var(--setg-line);
  background:rgba(255,255,255,.025);
}
.setg-spacer{flex:1 1 auto}

.setg-pick{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.3;
  background:rgba(255,255,255,.05);
  color:var(--setg-ink);
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px;
  padding:6px 8px;
  cursor:pointer;
  max-width:100%;
  height:auto;
}
.setg-pick option{background:#1B222C;color:#D6DEE8}

.setg-btn{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 13px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;color:var(--setg-ink);
  transition:background .12s ease;
  line-height:1.2;height:auto;
}
.setg-btn:hover{background:rgba(255,255,255,.08);color:var(--setg-ink)}
.setg-primary{background:var(--setg-brass);border-color:var(--setg-brass);color:#141A22;font-weight:700}
.setg-primary:hover{background:#CC8A2A;color:#141A22}

.setg-seg{display:flex;border:1px solid rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.setg-seg button{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 12px;border:0;cursor:pointer;line-height:1.2;height:auto;
  background:transparent;color:var(--setg-dim);
  transition:background .12s ease,color .12s ease;
}
.setg-seg button + button{border-left:1px solid rgba(255,255,255,.16)}
.setg-seg button[aria-pressed="true"]{background:var(--setg-brass);color:#141A22;font-weight:700}
.setg-seg button:hover:not([aria-pressed="true"]){color:var(--setg-ink);background:rgba(255,255,255,.06)}

.setg :focus-visible{outline:2px solid var(--setg-brass);outline-offset:2px}

/* ---------- embed panel ---------- */
.setg-embed{
  padding:14px 12px;
  border-top:2px solid var(--setg-teal);
  background:rgba(58,166,150,.07);
}
.setg-embed[hidden]{display:none}
.setg-embed-head{display:block;margin:0 0 10px}
.setg-embed-head strong{
  display:block;color:var(--setg-ink);
  font-size:14px;font-weight:700;margin:0 0 3px;
}
.setg-embed-head span{
  display:block;color:var(--setg-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.5;
}
.setg-embed-code{
  display:block;width:100%;
  padding:10px 12px;margin:0 0 10px;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;
  background:rgba(0,0,0,.28);color:var(--setg-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.6;
  resize:vertical;white-space:pre-wrap;word-break:break-all;
  box-shadow:none;
}
.setg-embed-code:focus{outline:2px solid var(--setg-brass);outline-offset:1px;color:var(--setg-ink);background:rgba(0,0,0,.28)}
.setg-embed-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- split ---------- */
.setg-split{display:grid;grid-template-columns:1fr 1fr;height:var(--setg-h)}

.setg-pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.setg-pane + .setg-pane{border-left:1px solid var(--setg-line)}

/* Side-by-side needs real room. Below ~880px of CONTAINER width the panes stack,
   so the tool stays usable inside a narrow themed column as well as on a phone. */
@container setg (max-width: 880px){
  .setg-split{grid-template-columns:1fr;height:auto}
  .setg-pane{height:440px}
  .setg-pane + .setg-pane{border-left:0;border-top:1px solid var(--setg-line)}
}
/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size){
  @media (max-width:1100px){
    .setg-split{grid-template-columns:1fr;height:auto}
    .setg-pane{height:440px}
    .setg-pane + .setg-pane{border-left:0;border-top:1px solid var(--setg-line)}
  }
}

.setg-head{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--setg-dim);
  border-bottom:1px solid var(--setg-line);
  flex:none;
}
.setg-dot{width:6px;height:6px;border-radius:50%;background:var(--setg-ok);flex:none}

/* ---------- editor ---------- */
.setg-edit{position:relative;flex:1 1 auto;display:flex;overflow:hidden;min-height:0;background:var(--setg-bench)}
.setg-gutter{
  padding:14px 8px 14px 12px;
  text-align:right;user-select:none;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;
  color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.02);
  border-right:1px solid rgba(255,255,255,.06);
  overflow:hidden;flex:none;min-width:46px;
  font-variant-numeric:tabular-nums;
}
.setg-code{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;resize:none;outline:none;
  padding:14px 14px 14px 12px;margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;
  background:transparent;color:var(--setg-ink);
  tab-size:2;white-space:pre;overflow:auto;
  border-radius:0;box-shadow:none;
}
.setg-code:focus{outline:none;box-shadow:none;background:transparent;color:var(--setg-ink);border:0}
.setg-code::selection{background:rgba(184,121,31,.4)}

/* ---------- preview ---------- */
.setg-stage{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:16px;display:flex;justify-content:center;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.022) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.022) 75%),
    linear-gradient(45deg,rgba(255,255,255,.022) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.022) 75%);
  background-size:16px 16px;
  background-position:0 0,8px 8px;
}
.setg-frame{
  width:100%;max-width:640px;min-height:100%;
  border:0;background:#fff;display:block;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
  transition:max-width .22s ease;
}
.setg-stage[data-vp="mobile"] .setg-frame{max-width:375px}
@media (prefers-reduced-motion:reduce){
  .setg-frame,.setg-toast{transition:none}
}

/* ---------- footnote + toast ---------- */
.setg-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 12px;
  border-top:1px solid var(--setg-line);
  background:rgba(255,255,255,.02);
}
.setg-legal{
  margin:0;padding:0;flex:1 1 260px;min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:var(--setg-dim);line-height:1.5;
}

/* Distribution action — deliberately a different colour family from the brass
   editing controls, because it does something to the TOOL, not to the template. */
.setg-cta{
  display:inline-flex;align-items:center;gap:8px;
  flex:none;
  background:var(--setg-teal);
  border:1px solid var(--setg-teal);
  color:#06201C;
  font-weight:700;
  padding:9px 16px;
  box-shadow:0 0 0 3px rgba(58,166,150,.16);
}
.setg-cta:hover{background:var(--setg-teal-hi);border-color:var(--setg-teal-hi);color:#06201C}
.setg-cta-icon{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:0;
  padding:1px 5px;border-radius:2px;
  background:rgba(6,32,28,.20);
}

.setg-toast{
  position:fixed;left:50%;bottom:26px;
  transform:translateX(-50%) translateY(14px);
  background:#141A22;color:#fff;
  padding:9px 16px;border-radius:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.03em;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:99999;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.setg-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}