/* SyntaxFlow — calculators for other websites (agent/insertar, 17-10-2026).
   Two halves: the embed shell (html.sf-embed, see assets/js/embed.js) and the
   page that explains it and gives the code (/embed/, /es/insertar/: .emb-*).
   Colours only through base.css tokens, so both follow light and dark. */

/* ---- 1. the calculator inside a frame ---------------------------------- */
html.sf-embed{scroll-padding-top:0}
html.sf-embed,html.sf-embed body{height:auto;min-height:0}
html.sf-embed body{margin:0;overflow-x:hidden}
html.sf-embed main.wrap{max-width:none;margin:0;padding:12px 12px 10px}
.sf-embed-off{display:none !important}
html.sf-embed main > section,html.sf-embed main > div{padding:0 !important;margin:0 !important}
.sf-embed-title{font-size:1.12rem;line-height:1.25;margin:0 0 10px;max-width:none;font-stretch:110%;letter-spacing:-.01em}
.sf-embed-title a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule-2)}
.sf-embed-title a:hover{text-decoration-color:currentColor}
.sf-embed-wait{margin:0 0 12px;color:var(--ink-2);font-size:.95rem}
html.sf-embed .calc{box-shadow:none}
html.sf-embed .calc > form,html.sf-embed .calc > .results{padding:18px}
@media(min-width:620px){
  html.sf-embed .calc{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  html.sf-embed .calc > .results{border-top:0;border-left:1px solid var(--rule);align-self:stretch}
}
/* inside the frame: no "what if" curves (whatif.js is not loaded) and none of
   the static asides that send to another tool; the notes the calculation
   writes itself all carry an id and stay */
html.sf-embed .calc .whatif,html.sf-embed .calc .results > .note.info:not([id]){display:none !important}

.sf-embed-by{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;
  margin:0;padding:6px 12px;font-size:.82rem;line-height:1.3;background:var(--paper);border-top:1px solid var(--rule)}
.sf-embed-by a{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sf-embed-by a:hover{color:var(--ink)}
.sf-embed-by svg{width:16px;height:16px;flex:none}

/* ---- 2. the page that gives the code ----------------------------------- */
.emb-steps{margin:0;padding-left:1.3em;max-width:72ch;color:var(--ink-2)}
.emb-steps li{margin:0 0 8px}
.emb-list{display:grid;gap:28px}
.emb-card{display:grid;gap:16px;padding:20px;border:1px solid var(--rule-2);border-radius:var(--r-panel);background:var(--surface)}
.emb-card h3{margin:0;font-size:1.25rem}
.emb-card p{margin:0}
.emb-desc{color:var(--ink-2);max-width:70ch}
.emb-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.emb-ctl label{font-weight:600;font-size:.95rem}
.emb-ctl select{width:auto;min-width:12em}
.emb-preview{min-width:0}
.emb-preview iframe{display:block;width:100%;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.emb-code{display:grid;gap:10px;align-content:start;min-width:0}
.emb-code-h{font-weight:600;font-size:.95rem}
.emb-code pre{margin:0;padding:12px 14px;max-height:340px;overflow:auto;border:1px solid var(--rule);border-radius:10px;
  background:var(--paper-2);color:var(--ink);font-size:.8rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.emb-code .btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.emb-status{font-size:.9rem;color:var(--ink-2)}
.emb-note{font-size:.9rem;color:var(--ink-2)}
@media(min-width:1000px){
  .emb-card{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
  .emb-card > .emb-head{grid-column:1 / -1}
}
.emb-terms{max-width:76ch}
.emb-terms li{margin:0 0 10px}