/* =====================================================================
   SIGN — the sg- pieces. Everything else is money.css. Colours are the
   Money tokens, so light and dark follow the workspace. The PDF page and
   the role colours are fixed on purpose: paper stays white in dark mode.
   Designed in Figma, page "Agent: Sign".
   ===================================================================== */
.sg-app { --sg-amber: #e2b93b; --sg-amber-bg: #fff4d6; --sg-amber-ink: #7a5a00;
  --sg-blue: #5b8def; --sg-blue-bg: #e1ecff; --sg-blue-ink: #1e3a8a;
  --sg-green: #16a34a; --sg-green-bg: #dcf5e6; --sg-green-ink: #0f5c2c;
  --sg-rose: #e0567a; --sg-rose-bg: #ffe3ea; --sg-rose-ink: #8a1236;
  --sg-violet: #8b6fe0; --sg-violet-bg: #ece6ff; --sg-violet-ink: #43269a;
  --sg-teal: #1fa3a3; --sg-teal-bg: #d9f4f3; --sg-teal-ink: #0b5a5a;
  --sg-merge: #aab3bd; --sg-merge-bg: #eef0f3; --sg-merge-ink: #3d4650; }
.sg-main { display: flex; flex-direction: column; gap: 16px; }
.sg-newbtn { width: 100%; justify-content: center; }
.sg-navgap { height: 10px; }
.sg-navright { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--m-faint); }
.m-nav.sg-sub { padding-left: 26px; }
.sg-sidenote { font-size: 11.5px; line-height: 1.45; color: var(--m-muted); background: var(--m-surface-2); border-radius: 8px; padding: 10px; }
.sg-crumb { font-size: 11.5px; color: var(--m-faint); display: flex; gap: 6px; align-items: center; }
.sg-crumb i { font-style: normal; } .sg-crumb b { color: var(--m-ink); font-weight: 600; }
.sg-dim { color: var(--m-muted); font-size: 11.5px; }
.sg-pad { padding: 18px 20px; } .sg-pad0 { margin: 0 0 12px; }
.sg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-chip { border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.sg-chip.on { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.sg-table td { padding-top: 12px; padding-bottom: 12px; }
.sg-rowlink { cursor: pointer; }
.sg-docname { font-weight: 600; font-size: 13px; }
.sg-go { color: var(--m-faint); text-align: right; }
.sg-avs { display: inline-flex; vertical-align: middle; }
.sg-av { width: 24px; height: 24px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-ink); font-size: 9.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--m-surface); margin-left: -6px; }
.sg-av:first-child { margin-left: 0; } .sg-av.done { background: var(--m-pos-soft); color: var(--m-pos); }

/* templates */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sg-tcard { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.sg-thumb { background: var(--m-surface-2); height: 132px; display: flex; justify-content: center; padding-top: 18px; overflow: hidden; }
.sg-sheet { width: 150px; height: 150px; background: #fff; border: 1px solid #d9dde2; border-radius: 3px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sg-sheet i { height: 4px; border-radius: 2px; background: #d5dae0; } .sg-sheet i.s { width: 60%; } .sg-sheet i:first-child { width: 70%; }
.sg-sheet b { align-self: flex-start; font-size: 8px; font-weight: 600; color: var(--sg-amber-ink); background: var(--sg-amber-bg); border: 1px solid var(--sg-amber); border-radius: 3px; padding: 2px 6px; }
.sg-tbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1; }
.sg-tname { font-weight: 600; font-size: 13px; }
.sg-tfoot { border-top: 1px solid var(--m-line); padding: 8px 12px 8px 16px; display: flex; align-items: center; gap: 6px; }
.sg-tfoot .sg-dim { flex: 1; }

/* editor */
.sg-edapp { display: block; grid-template-columns: none; }
.sg-bar { position: sticky; top: 56px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--m-surface); border-bottom: 1px solid var(--m-line); }
.sg-back { display: inline-flex; align-items: center; gap: 6px; color: var(--m-muted); font-weight: 500; }
.sg-bartitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-nameinput { border: 1px solid transparent; background: transparent; color: var(--m-ink); font: inherit; font-size: 15px; font-weight: 700; padding: 2px 6px; margin-left: -6px; border-radius: 6px; max-width: 520px; }
.sg-nameinput:hover, .sg-nameinput:focus { border-color: var(--m-line); background: var(--m-surface); outline: none; }
.sg-steps { display: flex; gap: 6px; font-size: 12px; color: var(--m-faint); font-weight: 500; }
.sg-steps b, .sg-steps span { padding: 6px 12px; border-radius: 999px; } .sg-steps b { background: var(--m-accent-soft); color: var(--m-ink); font-weight: 600; }
.sg-steps.inline { margin-top: -4px; }
.sg-edbody { display: grid; grid-template-columns: 296px minmax(0, 1fr) 264px; min-height: calc(100vh - 56px - 58px); }
.sg-palette, .sg-props { background: var(--m-surface); padding: 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 114px; height: calc(100vh - 114px); overflow-y: auto; }
.sg-props { border-right: 1px solid var(--m-line); } .sg-palette { border-left: 1px solid var(--m-line); }
.sg-cap { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-faint); margin-top: 10px; }
.sg-cap:first-child { margin-top: 0; }
.sg-role { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 500; }
.sg-role.on { background: var(--m-surface-2); border-color: var(--m-line); font-weight: 600; }
.sg-role span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-role em { font-style: normal; font-size: 10.5px; color: var(--m-faint); }
.sg-roleinput { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--m-ink); padding: 0; outline: none; }
.sg-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; background: var(--m-faint); display: inline-block; }
.sg-dot.pos { background: var(--m-pos); } .sg-dot.warn { background: var(--m-warn); } .sg-dot.neg { background: var(--m-neg); }
.sg-dot.sg-c-amber { background: var(--sg-amber); } .sg-dot.sg-c-blue { background: var(--sg-blue); } .sg-dot.sg-c-green { background: var(--sg-green); }
.sg-dot.sg-c-rose { background: var(--sg-rose); } .sg-dot.sg-c-violet { background: var(--sg-violet); } .sg-dot.sg-c-teal { background: var(--sg-teal); } .sg-dot.sg-c-merge { background: var(--sg-merge); }
.sg-x { border: 0; background: transparent; color: var(--m-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .sg-x:hover { color: var(--m-neg); }
.sg-link { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--m-muted); cursor: pointer; text-align: left; padding: 4px 0; } .sg-link:hover { color: var(--m-ink); } .sg-link.neg { color: var(--m-neg); }
.sg-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-type { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--m-line); background: var(--m-surface); border-radius: 8px; font: inherit; font-size: 12px; font-weight: 500; color: var(--m-ink); cursor: pointer; text-align: left; }
.sg-type, .sg-merge { cursor: grab; user-select: none; -webkit-user-select: none; }
.sg-type:hover { border-color: var(--m-faint); } .sg-type svg.i { color: var(--m-muted); width: 14px; height: 14px; } .sg-type.wide { width: 100%; }
.sg-merges { display: flex; flex-direction: column; gap: 5px; }
.sg-merge { border: 0; background: var(--sg-merge-bg); color: var(--sg-merge-ink); font: inherit; font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: 6px; text-align: left; cursor: pointer; }
.sg-merge:hover { outline: 1px solid var(--sg-merge); }
.sg-canvas { background: var(--m-surface-2); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0 0; min-width: 0; }
.sg-zoombar { display: inline-flex; align-items: center; gap: 10px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 500; color: var(--m-muted); position: sticky; top: 124px; z-index: 3; }
.sg-zoombar button { border: 0; background: transparent; color: var(--m-ink); font-size: 15px; font-weight: 600; cursor: pointer; width: 22px; height: 22px; border-radius: 6px; } .sg-zoombar button:hover { background: var(--m-surface-2); } .sg-zoombar button:disabled { opacity: .3; cursor: default; }
.sg-zoombar i { width: 1px; height: 14px; background: var(--m-line); }
.sg-pagewrap { width: 100%; padding: 0 24px 40px; display: flex; justify-content: safe center; }
.sg-pagewrap.zoomed { overflow-x: auto; }
.sg-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; max-width: 100%; }
.sg-pagewrap.zoomed .sg-pages { max-width: none; }
.sg-pagewrap:not(.zoomed) .sg-page { max-width: 100%; }
.sg-pageno { position: absolute; left: 100%; top: 0; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--m-faint); pointer-events: none; }
.sg-page { scroll-margin-top: 168px; position: relative; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); border: 1px solid #d9dde2; flex-shrink: 0; }
.sg-page canvas { display: block; width: 100%; height: 100%; }
.sg-pageload { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8d97a2; font-size: 13px; }
.sg-layer { position: absolute; inset: 0; touch-action: none; }
.sg-f { position: absolute; border: 1px dashed; border-radius: 3px; cursor: move; display: flex; align-items: center; padding: 0 6px; font-size: 10.5px; font-weight: 600; overflow: hidden; user-select: none; touch-action: none; min-width: 10px; }
.sg-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .sg-f em { font-style: normal; margin-left: 3px; pointer-events: none; }
.sg-f.box { padding: 0; }
.sg-f.sel { border: 2px solid #171b21; z-index: 2; overflow: visible; }
.sg-f.pickmate { outline: 2px dashed #171b21; outline-offset: 2px; }
.sg-f em.pick { font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 6px; background: #171b21; color: #fff; }
.sg-h { display: none; position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; background: #fff; border: 1.5px solid #171b21; cursor: nwse-resize; border-radius: 2px; }
.sg-f.sel .sg-h { display: block; }
.sg-f.sg-c-amber { background: color-mix(in srgb, var(--sg-amber-bg) 85%, transparent); border-color: var(--sg-amber); color: var(--sg-amber-ink); }
.sg-f.sg-c-blue { background: color-mix(in srgb, var(--sg-blue-bg) 85%, transparent); border-color: var(--sg-blue); color: var(--sg-blue-ink); }
.sg-f.sg-c-green { background: color-mix(in srgb, var(--sg-green-bg) 85%, transparent); border-color: var(--sg-green); color: var(--sg-green-ink); }
.sg-f.sg-c-rose { background: color-mix(in srgb, var(--sg-rose-bg) 85%, transparent); border-color: var(--sg-rose); color: var(--sg-rose-ink); }
.sg-f.sg-c-violet { background: color-mix(in srgb, var(--sg-violet-bg) 85%, transparent); border-color: var(--sg-violet); color: var(--sg-violet-ink); }
.sg-f.sg-c-teal { background: color-mix(in srgb, var(--sg-teal-bg) 85%, transparent); border-color: var(--sg-teal); color: var(--sg-teal-ink); }
.sg-f.sg-c-merge { background: color-mix(in srgb, var(--sg-merge-bg) 88%, transparent); border-color: var(--sg-merge); color: var(--sg-merge-ink); font-weight: 500; }
.sg-prophead { display: flex; align-items: center; justify-content: space-between; } .sg-prophead b { font-size: 15px; }
.sg-props input, .sg-props textarea, .sg-props select, .sg-col input, .sg-col textarea, .sg-col select { width: 100%; border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; }
.sg-props textarea, .sg-col textarea { resize: vertical; line-height: 1.5; }
.sg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; padding: 4px 0; }
.sg-toggle em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--m-muted); } .sg-toggle.first { padding-bottom: 12px; }
.sg-pos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 11px; color: var(--m-muted); }
.sg-pos span { border: 1px solid var(--m-line); border-radius: 6px; padding: 5px 6px; text-align: center; }
.sg-two { display: flex; gap: 8px; } .sg-two .m-btn { flex: 1; justify-content: center; }
.sg-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 300px; overflow-y: auto; flex-shrink: 0; padding: 2px; }
.sg-pthumb { border: 0; background: transparent; font: inherit; font-size: 10px; color: var(--m-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; }
.sg-pthumb span { width: 100%; background: #fff; border: 1px solid #d9dde2; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.sg-pthumb.on span { border: 2px solid var(--m-ink); } .sg-pthumb b { font-size: 9px; background: var(--sg-amber-bg); color: var(--sg-amber-ink); border-radius: 999px; padding: 1px 5px; }
.sg-check { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }

/* send */
.sg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sg-problems ul { margin: 6px 0 0; padding-left: 18px; } .sg-problems li { margin: 2px 0; }
.sg-linked { display: flex; align-items: center; gap: 12px; background: var(--m-surface-2); border-radius: 10px; padding: 12px; } .sg-linked b { flex: 1; }
.sg-rec { display: grid; grid-template-columns: 44px 10px minmax(0, 1.1fr) minmax(0, 1.3fr) 170px 96px 20px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--m-line-soft); }
.sg-ord { text-align: center; padding-left: 4px !important; padding-right: 4px !important; } .sg-ord.ghost { color: var(--m-faint); font-size: 11px; }
.sg-codeopt { font-size: 11.5px; color: var(--m-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; } .sg-codeopt input { width: auto; }
.sg-recadd { display: flex; align-items: center; gap: 14px; padding-top: 8px; border-top: 1px solid var(--m-line-soft); flex-wrap: wrap; }
.sg-pre { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.sg-pre span { font-size: 12.5px; font-weight: 500; display: flex; flex-direction: column; } .sg-pre em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--m-faint); }
.sg-pre input.bad { border-color: var(--m-warn); }
.sg-opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 500; } .sg-opt span { flex: 1; } .sg-opt input { width: 70px; text-align: center; } .sg-opt em { font-style: normal; color: var(--m-muted); font-weight: 400; font-size: 12px; width: 110px; }

/* detail */
.sg-prog { display: flex; gap: 0; align-items: flex-start; flex-wrap: wrap; }
.sg-step { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 0 12px 10px 0; }
.sg-stepline { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; }
.sg-stepline .sg-av { width: 32px; height: 32px; font-size: 11.5px; border: 0; margin: 0; }
.sg-stepline i { flex: 1; height: 2px; background: var(--m-line); } .sg-stepline i.done { background: var(--m-pos); }
.sg-stepact { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.sg-copies { margin-top: 8px; }
.sg-linkbox { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--m-surface-2); border-radius: 10px; padding: 12px; font-size: 12px; }
.sg-linkbox span { grid-column: 1 / -1; color: var(--m-muted); } .sg-linkbox input { border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; min-width: 0; }
.sg-audit { display: flex; flex-direction: column; gap: 10px; }
.sg-ev { display: grid; grid-template-columns: 150px 10px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sg-ev b { font-weight: 600; font-size: 12.5px; } .sg-ev em { font-style: normal; color: var(--m-faint); font-size: 11px; margin-left: 8px; }
.sg-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 12.5px; } .sg-kv span { color: var(--m-muted); } .sg-kv b { font-weight: 500; overflow-wrap: anywhere; }

/* new document modal */
.sg-newopt { width: 100%; display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; text-align: left; border: 1px dashed var(--m-line); background: var(--m-surface-2); color: var(--m-ink); border-radius: 10px; padding: 14px; font: inherit; cursor: pointer; }
.sg-newopt svg.i { grid-row: span 2; align-self: center; width: 20px; height: 20px; } .sg-newopt span { color: var(--m-muted); font-size: 12px; } .sg-newopt:hover { border-color: var(--m-faint); }
.sg-tlist { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-top: 8px; }
.sg-titem { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); border-radius: 8px; padding: 10px 12px; font: inherit; cursor: pointer; text-align: left; }
.sg-titem span { color: var(--m-muted); font-size: 11.5px; white-space: nowrap; } .sg-titem:hover { border-color: var(--m-faint); }

@media (max-width: 1180px) { .sg-edbody { grid-template-columns: 250px minmax(0, 1fr) 220px; } .sg-steps { display: none; } }
@media (max-width: 900px) {
  .sg-edbody { grid-template-columns: minmax(0, 1fr); } .sg-palette, .sg-props { position: static; height: auto; border: 0; border-bottom: 1px solid var(--m-line); }
  .sg-bar { flex-wrap: wrap; top: 0; } .sg-zoombar { top: 8px; }
  .sg-rec { grid-template-columns: 44px 10px minmax(0, 1fr) 20px; } .sg-rec > input[type="email"], .sg-rec > select, .sg-rec > .sg-codeopt { grid-column: 3 / 4; }
  .sg-pre { grid-template-columns: minmax(0, 1fr); gap: 4px; } .sg-ev { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sg-ev i { display: none; }
}

/* Phone: agent-phone.css turns the rail into a strip of pills. The note and
   the spacers would stretch that strip, and the New button already sits in
   the page head. */
@media (max-width: 700px) {
  .sg-side .sg-sidenote, .sg-side .sg-navgap, .sg-side .sg-newbtn { display: none !important; }
  .m-nav.sg-sub { padding-left: 14px; }
  .sg-table th:nth-child(2), .sg-table td:nth-child(2), .sg-table th:nth-child(5), .sg-table td:nth-child(5) { display: none; }
}

/* The Signatures card on the deal page and in the CRM (sign.js linkCard). It
   sits outside .sg-app, so it carries no sg- tokens of its own. */
.sg-linkcard .sg-lrows { display: flex; flex-direction: column; }
.sg-lrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--m-line-soft); color: inherit; text-decoration: none; }
.sg-lrow:first-child { border-top: 0; } .sg-lrow span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-lrow b { font-weight: 600; font-size: 13px; } .sg-lrow em { font-style: normal; font-size: 11.5px; color: var(--m-muted); }
.sg-lquick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 10px; } .sg-lquick > span { font-size: 11px; color: var(--m-faint); margin-right: 2px; }

/* Template editor: the deal stages a template is offered on. */
.sg-stagegroup { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .sg-stagegroup > span { width: 100%; font-size: 11px; font-weight: 600; color: var(--m-muted); margin-top: 4px; }
.sg-stage { border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-muted); font: inherit; font-size: 11px; padding: 4px 8px; border-radius: 999px; cursor: pointer; }
.sg-stage.on { background: var(--m-accent); border-color: var(--m-accent); color: #fff; font-weight: 600; }

/* Bulk send */
.sg-bulkfixed { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 6px 0; } .sg-bulkfixed span { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12.5px; }
.sg-bulkadd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .sg-bulkadd > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .sg-bulkadd .m-field { width: 100%; }
.sg-bulklist { margin-top: 14px; border-top: 1px solid var(--m-line); max-height: 420px; overflow-y: auto; }
.sg-bulkrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--m-line-soft); } .sg-bulkrow > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-bulkrow b { font-size: 12.5px; font-weight: 600; } .sg-bulkrow em { font-style: normal; font-size: 11.5px; color: var(--m-muted); } .sg-bulkerr { max-width: 260px; }
@media (max-width: 900px) { .sg-bulkadd, .sg-bulkfixed { grid-template-columns: minmax(0, 1fr); } }

/* Radio circles and conditional fields in the editor. */
.sg-f.box.round { border-radius: 999px; }
.sg-f.cond::after { content: "if"; position: absolute; top: -7px; left: -7px; font-size: 8px; font-weight: 700; line-height: 1; background: #171b21; color: #fff; border-radius: 999px; padding: 2px 4px; pointer-events: none; }
.sg-f.cond { overflow: visible; }

/* A field type being dragged out of the palette. */
.sg-ghost { position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.sg-ghost.off { opacity: .45; }
body.sg-dragging, body.sg-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* A long unbroken name, reason or title (an email address, a pasted string)
   wraps instead of pushing the page sideways. */
.sg-main .m-title, .sg-main .pl-sub, .sg-crumb b, .sg-step, .sg-ev, .sg-bulkfixed span, .sg-bulkrow, .sg-lrow, .sg-pre span { overflow-wrap: anywhere; }
.sg-crumb b { min-width: 0; }