/* Sumongo motion — Forms scene (sm-forms-flow.css). Depends on sm-motion.css. */
.sm-ff .sm-stage {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: 3.4em;
  align-items: center;
  padding: 2.2em 2.6em;
}
.sm-ff .sm-col { position: relative; min-width: 0; }

/* ----- the form ----------------------------------------------------- */
.sm-form-heads { display: grid; }
.sm-form-head-build, .sm-form-head-live { grid-area: 1 / 1; display: flex; align-items: center; gap: .6em; padding: .8em 1.1em; border-bottom: 1px solid var(--sm-line-soft); font-size: .86em; color: var(--sm-muted); }
.sm-form-head-build > span { display: inline-flex; align-items: center; gap: .45em; }
.sm-form-head-build strong { color: var(--sm-ink); font-weight: 550; }
.sm-head-badges { margin-left: auto; display: grid; }
.sm-head-badges .sm-badge { grid-area: 1 / 1; justify-self: end; }
.sm-form-head-live { background: #f7f7f9; border-radius: var(--sm-radius) var(--sm-radius) 0 0; gap: .35em; }
.sm-client-dot { width: .55em; height: .55em; border-radius: 50%; background: #d9d9de; }
.sm-client-url { margin-left: .6em; flex: 1 1 auto; font-size: .86em; color: var(--sm-muted); background: var(--sm-paper); border: 1px solid var(--sm-line-soft); border-radius: 5px; padding: .3em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-form .sm-win-body { padding: 1em 1.3em 1.1em; }
.sm-form-brand { display: inline-flex; align-items: center; gap: .5em; font-size: .82em; font-weight: 550; color: var(--sm-ink-2); }
.sm-form-brand .sm-avatar { width: 1.6em; height: 1.6em; font-size: .8em; }
.sm-form-title { margin: .6em 0 .15em; font-size: 1.25em; font-weight: 550; letter-spacing: -.015em; }
.sm-form-sub { margin: 0 0 .8em; font-size: .84em; color: var(--sm-muted); }
.sm-fslot { position: relative; height: 4.3em; margin-bottom: .5em; border: 1.5px dashed var(--sm-line); border-radius: 8px; }
.sm-fslot::after { content: 'Drop a field here'; position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-size: .76em; color: var(--sm-faint); }
.sm-ffield { position: absolute; inset: -1.5px; z-index: 1; background: var(--sm-paper); border: 1px solid var(--sm-line); border-radius: 8px; padding: .55em .8em; }
.sm-ffield > label { display: block; font-size: .78em; font-weight: 550; color: var(--sm-ink-2); margin-bottom: .3em; }
.sm-ffield > label i { font-style: normal; color: var(--sm-accent); }
.sm-finput { display: flex; align-items: center; gap: .5em; min-height: 1.9em; padding: .25em .6em; border-radius: 6px; background: #f6f6f8; font-size: .88em; color: var(--sm-ink); position: relative; }
.sm-finput.is-select .sm-svg { margin-left: auto; color: var(--sm-faint); }
.sm-select-hint { color: var(--sm-faint); }
.sm-ans-pick { position: absolute; left: .6em; top: 0; bottom: 0; display: inline-flex; align-items: center; font-weight: 500; }
.sm-ans-pick + .sm-select-hint { opacity: 1; }
.sm-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .9em; }
.sm-add { display: inline-flex; align-items: center; gap: .35em; font-size: .8em; color: var(--sm-muted); }
.sm-foot-btns { display: grid; }
.sm-foot-btns .sm-btn { grid-area: 1 / 1; justify-self: end; position: relative; min-width: 7em; }
.sm-send-label, .sm-send-sent { display: inline-flex; align-items: center; gap: .45em; }
.sm-send-sent { position: absolute; inset: 0; justify-content: center; }

/* ----- the side panel ----------------------------------------------- */
.sm-col-side { display: grid; }
.sm-side, .sm-dests { grid-area: 1 / 1; align-self: center; }
.sm-lib { display: grid; gap: .25em; padding: .6em .7em; }
.sm-lib-row { display: flex; align-items: center; gap: .7em; padding: .5em .6em; border-radius: 7px; font-size: .88em; background: var(--sm-paper); }
.sm-lib-row.is-faint { color: var(--sm-faint); }
.sm-lib-row.is-faint strong { color: var(--sm-faint); }
.sm-lib-row > .sm-svg:last-child { margin-left: auto; color: var(--sm-faint); }
.sm-lib-row strong { display: block; font-weight: 550; font-size: .95em; }
.sm-lib-row small { display: block; font-size: .8em; color: var(--sm-muted); }
.sm-lib-ico { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 6px; background: #f3f3f5; color: var(--sm-ink-2); font-size: .8em; font-weight: 600; flex-shrink: 0; }
.sm-lib-ico .sm-svg { width: 1.1em; height: 1.1em; }
.sm-opts { display: grid; gap: .2em; padding: .5em .7em .8em; }
.sm-opt { display: flex; align-items: center; gap: .7em; padding: .55em .5em; border-bottom: 1px solid var(--sm-line-soft); font-size: .88em; }
.sm-opt > .sm-svg { color: var(--sm-faint); }
.sm-opt > div { flex: 1 1 auto; min-width: 0; }
.sm-opt strong { display: block; font-weight: 550; font-size: .95em; }
.sm-opt small { display: block; font-size: .8em; color: var(--sm-muted); }
.sm-switch { position: relative; width: 2.3em; height: 1.3em; border-radius: 999px; background: #d9d9de; flex-shrink: 0; }
.sm-switch i { position: absolute; top: .15em; left: .15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.sm-link-row { display: flex; align-items: center; gap: .55em; margin-top: .6em; padding: .55em .7em; border-radius: 7px; background: var(--sm-accent-tint); border: 1px solid var(--sm-accent-line); font-size: .82em; color: var(--sm-accent-ink); }
.sm-link-url { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sm-dests { display: grid; gap: .8em; }
.sm-dest-body { padding: .5em .7em .6em; display: grid; gap: .2em; }
.sm-dest-row { display: flex; align-items: center; gap: .6em; padding: .4em .5em; border-radius: 6px; font-size: .86em; }
.sm-dest-row > div { flex: 1 1 auto; min-width: 0; }
.sm-dest-row strong { display: block; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-dest-row small { display: block; font-size: .8em; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-dest-row.is-faint { color: var(--sm-faint); }
.sm-dest-row.is-faint strong, .sm-dest-row.is-faint small { color: var(--sm-faint); }
.sm-dest-row .sm-avatar { width: 1.6em; height: 1.6em; font-size: .76em; }
.sm-new-contact, .sm-new-inbox { background: var(--sm-accent-tint); }
.sm-inbox-ico { color: var(--sm-accent-ink); }
.sm-table { padding-top: .35em; }
.sm-tr { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: .5em; padding: .4em .5em; font-size: .8em; border-bottom: 1px solid var(--sm-line-soft); }
.sm-tr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-tr.is-head { color: var(--sm-faint); font-size: .72em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sm-tr.is-faint { color: var(--sm-faint); }
.sm-new-row { background: var(--sm-accent-tint); border-radius: 5px; font-weight: 500; }
.sm-dest-inbox .sm-dest-body { display: grid; }
.sm-dest-inbox .sm-dest-row { grid-area: 1 / 1; }

/* ----- narrow ------------------------------------------------------- */
@container (max-width: 640px) {
  .sm-ff .sm-stage { grid-template-columns: 1fr; gap: 1.2em; padding: 1.2em 1.2em; aspect-ratio: 5 / 8; font-size: clamp(8px, 2.5cqw, 12px); align-content: center; }
  .sm-form-sub, .sm-add, .sm-form-brand { display: none; }
  .sm-form-title { margin-top: 0; font-size: 1.1em; }
  .sm-fslot { height: 3.8em; margin-bottom: .4em; }
  .sm-lib-row.is-faint { display: none; }
  .sm-dests { gap: .5em; }
  .sm-dest-row.is-faint, .sm-tr.is-faint { display: none; }
  .sm-dest-inbox .sm-dest-row.is-faint { display: flex; }
}